u

code/allapp/allapp-rn/src/app/(tabs)/chat.tsx

@@ -1,29 +1,34 @@
+import { useRouter } from 'expo-router'
 import { Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import { AButton, ACell, ACellGroup } from '@/components/common/ao'
+import EmptyState from '@/components/common/EmptyStatus'
 import { Grid, GridItem } from '@/components/ui/grid'
 import { useMoneyCategoryStore } from '@/store/moneyCategory'
+import { useSpaceStore } from '@/store/space'
 
 export default function Demo() {
-  const moneyCategoryStore = useMoneyCategoryStore()
+  const router = useRouter()
+  const spaceStore = useSpaceStore()
 
-  function getCategories() {
+  function NoSpaceTip() {
-    console.log(moneyCategoryStore.categories)
+    return (
-  }
+      <EmptyState
-
+        description="还没有加入空间，选择一个加入或自己创建一个，开始聊天！"
-  async function resetCategory() {
+        footer={
-    moneyCategoryStore.setCategories([])
+          <AButton size="sm">创建 / 加入 空间</AButton>
-    await moneyCategoryStore.init()
+        }
+      />
+    )
   }
 
   return (
-    <ScrollView>
+    <View className="flex-1">
-      <Grid className="gap-4 p-4" _extra={{ className: 'grid-cols-12' }}>
+      {
-        <GridItem className="bg-background-50 p-6 rounded-md" _extra={{ className: 'col-span-3' }} />
+        spaceStore.inSpace()
-        <GridItem className="bg-background-50 p-6 rounded-md" _extra={{ className: 'col-span-3' }} />
+          ? (<View></View>)
-        <GridItem className="bg-background-50 p-6 rounded-md" _extra={{ className: 'col-span-3' }} />
+          : <NoSpaceTip />
-        <GridItem className="bg-background-50 p-6 rounded-md" _extra={{ className: 'col-span-3' }} />
+      }
-      </Grid>
+    </View>
-    </ScrollView>
   )
 }

code/allapp/allapp-rn/src/request/index.ts

@@ -28,8 +28,8 @@ function isWhiteListed(url: string) {
 }
 
 const alovaInstance = createAlova({
-  baseURL: 'http://192.168.5.6:8086/app',
+  // baseURL: 'http://192.168.5.6:8086/app',
-  // baseURL: 'http://192.168.1.137:8086/app',
+  baseURL: 'http://192.168.1.137:8086/app',
   requestAdapter: axiosRequestAdapter(),
   timeout: 5000,
   cacheFor: null,

code/allapp/allapp-rn/src/store/space.ts

@@ -4,6 +4,7 @@ interface SpaceState {
   userSpace: UserSpace | null
   setUserSpace: (space: UserSpace | null) => void
   clear: () => void
+  inSpace: () => boolean
 }
 
 export const useSpaceStore = create<SpaceState>((set, get) => ({
@@ -14,4 +15,8 @@ export const useSpaceStore = create<SpaceState>((set, get) => ({
       userSpace: null,
     })
   },
+  inSpace: () => {
+    const userSpace = get().userSpace
+    return userSpace !== null && userSpace.id !== 0
+  },
 }))

code/allapp/allapp-rn/test.html

@@ -1,94 +1,201 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebSocket Test</title>
+    <title>IM 列表</title>
+    <link rel="stylesheet" href="style.css">
     <style>
-        body {
+        /* 全局设置 */
-            font-family: Arial, sans-serif;
+* {
-            margin: 20px;
+    margin: 0;
-        }
+    padding: 0;
-        #output {
+    box-sizing: border-box;
-            margin-top: 20px;
+}
-            padding: 10px;
+
-            border: 1px solid #ccc;
+body {
-            min-height: 150px;
+    font-family: Arial, sans-serif;
-        }
+    background-color: #f7f7f7;
-        #sendMessage {
+    color: #333;
-            margin-top: 20px;
+}
-            padding: 10px;
+
-            width: 100%;
+/* 顶部栏 */
-        }
+header {
+    background-color: #fff;
+    padding: 15px 20px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+h1 {
+    font-size: 24px;
+    color: #4a90e2;
+}
+
+.search-bar {
+    padding: 8px 12px;
+    width: 200px;
+    border-radius: 20px;
+    border: 1px solid #ddd;
+    font-size: 14px;
+    outline: none;
+}
+
+/* 联系人列表 */
+.contact-list {
+    margin-top: 20px;
+}
+
+.contact-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    margin: 10px 20px;
+    padding: 12px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+
+.contact-item:hover {
+    background-color: #f1f1f1;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 头像 */
+.avatar img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+}
+
+/* 联系人信息 */
+.contact-info {
+    flex: 1;
+    margin-left: 12px;
+}
+
+.contact-name {
+    font-weight: bold;
+    font-size: 16px;
+    color: #333;
+}
+
+.last-message {
+    font-size: 14px;
+    color: #666;
+    margin-top: 5px;
+}
+
+/* 时间和未读消息数 */
+.meta-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.message-time {
+    font-size: 12px;
+    color: #999;
+}
+
+.unread-count {
+    background-color: #f03e3e;
+    color: #fff;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    margin-top: 5px;
+}
+
+/* 底部创建聊天按钮 */
+.create-chat {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+}
+
+.create-chat button {
+    background-color: #4a90e2;
+    color: #fff;
+    padding: 15px 25px;
+    border-radius: 50%;
+    font-size: 18px;
+    border: none;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.create-chat button:hover {
+    background-color: #357ab7;
+}
+
+.create-chat button:active {
+    background-color: #2f6790;
+}
+
     </style>
 </head>
+
 <body>
+    <!-- 顶部栏 -->
+    <header>
+        <div class="header-content">
+            <h1>IM 列表</h1>
+            <input type="text" placeholder="搜索联系人或群组" class="search-bar">
+        </div>
+    </header>
 
-    <h2>WebSocket Test</h2>
+    <!-- 联系人列表 -->
-    <div>
+    <div class="contact-list">
-        <label for="messageInput">Enter Message:</label>
+        <div class="contact-item">
-        <input type="text" id="messageInput" placeholder="Type your message here">
+            <div class="avatar">
-        <button id="sendBtn">Send Message</button>
+                <img src="https://via.placeholder.com/40" alt="头像">
+            </div>
+            <div class="contact-info">
+                <p class="contact-name">张三</p>
+                <p class="last-message">你好，最近怎么样？</p>
+            </div>
+            <div class="meta-info">
+                <p class="message-time">2分钟前</p>
+                <div class="unread-count">3</div>
+            </div>
+        </div>
+
+        <div class="contact-item">
+            <div class="avatar">
+                <img src="https://via.placeholder.com/40" alt="头像">
+            </div>
+            <div class="contact-info">
+                <p class="contact-name">李四</p>
+                <p class="last-message">好的，明天见！</p>
+            </div>
+            <div class="meta-info">
+                <p class="message-time">昨天</p>
+                <div class="unread-count">0</div>
+            </div>
+        </div>
+
+        <!-- 更多联系人项可以在此复制 -->
     </div>
 
-    <div id="output">
+    <!-- 底部按钮 -->
-        <h3>Messages:</h3>
+    <div class="create-chat">
-        <div id="messages"></div>
+        <button>新建对话</button>
     </div>
 
-    <script>
-        // Create a new WebSocket connection
-        const socket = new WebSocket('ws://192.168.1.137:8086/app/ws');
-
-        // Get HTML elements
-        const sendButton = document.getElementById('sendBtn');
-        const messageInput = document.getElementById('messageInput');
-        const messagesDiv = document.getElementById('messages');
-
-        // WebSocket onopen event: Fired when WebSocket connection is established
-        socket.onopen = function(event) {
-            console.log("Connected to WebSocket server!");
-            displayMessage("Connected to WebSocket server!");
-        };
-
-        // WebSocket onmessage event: Fired when a message is received from the server
-        socket.onmessage = function(event) {
-            console.log("Received message from server: " + event.data);
-            displayMessage("Server: " + event.data);
-        };
-
-        // WebSocket onerror event: Fired when there's an error with the WebSocket
-        socket.onerror = function(error) {
-          console.log(error)
-            console.error("WebSocket Error: " + error);
-            displayMessage("WebSocket Error: " + error);
-        };
-
-        // WebSocket onclose event: Fired when the connection is closed
-        socket.onclose = function(event) {
-            console.log("WebSocket connection closed");
-            displayMessage("WebSocket connection closed");
-        };
-
-        // Function to display messages on the page
-        function displayMessage(message) {
-            const messageElement = document.createElement('div');
-            messageElement.textContent = message;
-            messagesDiv.appendChild(messageElement);
-        }
-
-        // Button to send the message
-        sendButton.onclick = function() {
-            const message = messageInput.value;
-            if (message) {
-                console.log("Sending message: " + message);
-                socket.send(message);
-                displayMessage("You: " + message);
-                messageInput.value = ''; // Clear the input field
-            } else {
-                alert("Please enter a message!");
-            }
-        };
-    </script>
 </body>
-</html>
+
+</html>