feat: chat list page for mobile is ready

web/src/views/ChatPlus.vue

@@ -697,13 +697,13 @@ const searchChat = function () {
     chatList.value = allChats.value
     return
   }
-  const roles = [];
+  const items = [];
   for (let i = 0; i < allChats.value.length; i++) {
     if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
-      roles.push(allChats.value[i]);
+      items.push(allChats.value[i]);
     }
   }
-  chatList.value = roles;
+  chatList.value = items;
 }
 
 const updateUser = function (data) {

web/src/views/mobile/Chat.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="chat-mobile">
-    <van-nav-bar :title="title"/>
+  <div class="container chat-mobile">
+    <van-nav-bar
+        :title="title"
+        right-text="新建会话"
+        @click-right="showPicker = true"
+    />
 
     <div class="content">
       <van-search
@@ -28,9 +32,28 @@
           </div>
         </van-cell>
       </van-list>
-
-
     </div>
+
+    <van-popup v-model:show="showPicker" position="bottom">
+      <van-picker
+          title="选择模型和角色"
+          :columns="columns"
+          @cancel="showPicker = false"
+          @confirm="newChat"
+      >
+        <template #option="item">
+          <div class="picker-option">
+            <van-image
+                fit="cover"
+                :src="item.icon"
+                round
+                v-if="item.icon"
+            />
+            <span>{{ item.text }}</span>
+          </div>
+        </template>
+      </van-picker>
+    </van-popup>
   </div>
 </template>
 
@@ -39,6 +62,8 @@ import {ref} from "vue";
 import {httpGet} from "@/utils/http";
 import {getLoginUser} from "@/utils/storage";
 import {showFailToast} from "vant";
+import {checkSession} from "@/action/session";
+import router from "@/router";
 
 const title = ref("会话列表")
 const chatName = ref("")
@@ -49,6 +74,49 @@ const finished = ref(false)
 const error = ref(false)
 const user = getLoginUser()
 
+const showPicker = ref(false)
+const columns = ref([
+  [{text: 'GPT-3.5', value: 1},
+    {text: 'GPT-4', value: 2},
+  ],
+  [{text: 'xxxx', value: 3},
+    {text: 'yyy', value: 4},]
+])
+
+checkSession().then(() => {
+  // 加载角色列表
+  httpGet(`/api/role/list?user_id=${user.id}`).then((res) => {
+    if (res.data) {
+      const items = res.data
+      const roles = []
+      for (let i = 0; i < items.length; i++) {
+        // console.log(items[i])
+        roles.push({text: items[i].name, value: items[i].id, icon: items[i].icon})
+      }
+      columns.value[0] = roles
+    }
+  }).catch(() => {
+    showFailToast("加载聊天角色失败")
+  })
+
+  // 加载系统配置
+  httpGet('/api/admin/config/get?key=system').then(res => {
+    if (res.data) {
+      const items = res.data.models
+      const models = []
+      for (let i = 0; i < items.length; i++) {
+        console.log(items[i])
+        models.push({text: items[i].toUpperCase(), value: items[i]})
+      }
+      columns.value[1] = models
+    }
+  }).catch(() => {
+    showFailToast("加载系统配置失败")
+  })
+}).catch(() => {
+  router.push("/login")
+})
+
 const onLoad = () => {
   httpGet("/api/chat/list?user_id=" + user.id).then((res) => {
     if (res.data) {
@@ -68,13 +136,17 @@ const search = () => {
     chats.value = allChats.value
     return
   }
-  const roles = [];
+  const items = [];
   for (let i = 0; i < allChats.value.length; i++) {
     if (allChats.value[i].title.toLowerCase().indexOf(chatName.value.toLowerCase()) !== -1) {
-      roles.push(allChats.value[i]);
+      items.push(allChats.value[i]);
     }
   }
-  chats.value = roles;
+  chats.value = items;
+}
+
+const newChat = (value) => {
+  console.log(value)
 }
 
 </script>
@@ -83,8 +155,6 @@ const search = () => {
 
 .chat-mobile {
   .content {
-    padding: 0 10px;
-
     .van-cell__value {
       .chat-list-item {
         display flex
@@ -101,5 +171,19 @@ const search = () => {
       }
     }
   }
+
+  .van-picker-column {
+    .picker-option {
+      display flex
+      width 100%
+      padding 0 10px
+
+      .van-image {
+        width 20px;
+        height 20px;
+        margin-right 5px
+      }
+    }
+  }
 }
 </style>

web/src/views/mobile/Home.vue

@@ -1,20 +1,24 @@
 <template>
-  <div>
-    <router-view/>
+  <van-config-provider :theme="theme">
+    <div class="mobile-home">
+      <router-view/>
 
-    <van-tabbar route v-model="active" @change="onChange">
-      <van-tabbar-item to="/mobile/chat" name="home" icon="chat-o"></van-tabbar-item>
-      <van-tabbar-item to="/mobile/setting" name="setting" icon="setting-o"></van-tabbar-item>
-      <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o"></van-tabbar-item>
-    </van-tabbar>
+      <van-tabbar route v-model="active" @change="onChange">
+        <van-tabbar-item to="/mobile/chat" name="home" icon="chat-o"></van-tabbar-item>
+        <van-tabbar-item to="/mobile/setting" name="setting" icon="setting-o"></van-tabbar-item>
+        <van-tabbar-item to="/mobile/profile" name="profile" icon="user-o"></van-tabbar-item>
+      </van-tabbar>
+
+    </div>
+  </van-config-provider>
 
-  </div>
 </template>
 
 <script setup>
 import {ref} from "vue";
 
 const active = ref('home');
+const theme = ref("light")
 const onChange = (index) => {
   console.log(index)
   // showToast(`标签 ${index}`);
@@ -22,8 +26,32 @@ const onChange = (index) => {
 </script>
 
 <style lang="stylus">
+.mobile-home {
+  .container {
+    .van-nav-bar {
+      position fixed
+      width 100%
+    }
+
+    .content {
+      padding 46px 10px 0 10px;
+    }
+  }
+
+}
+
+// 黑色主题
+.van-theme-dark body {
+  background #1c1c1e
+}
+
 .van-toast--fail {
   background #fef0f0
   color #f56c6c
 }
+
+.van-nav-bar {
+  position fixed
+  width 100%
+}
 </style>