feat: chat list page for mobile is ready

api/go/handler/user_handler.go

@@ -218,10 +218,9 @@ func (h *UserHandler) Logout(c *gin.Context) {
 
 // Session 获取/验证会话
 func (h *UserHandler) Session(c *gin.Context) {
-	sessionId := c.GetHeader(types.SessionName)
-	session := h.App.ChatSession.Get(sessionId)
-	if session.ClientIP == c.ClientIP() {
-		resp.SUCCESS(c, session)
+	user, err := utils.GetLoginUser(c, h.db)
+	if err == nil {
+		resp.SUCCESS(c, user)
 	} else {
 		resp.NotAuth(c)
 	}

web/src/action/session.js

@@ -3,7 +3,7 @@ import {httpGet} from "@/utils/http";
 export function checkSession() {
     return new Promise((resolve, reject) => {
         httpGet('/api/user/session').then(res => {
-            resolve(res)
+            resolve(res.data)
         }).catch(err => {
             reject(err)
         })

web/src/main.js

@@ -4,11 +4,25 @@ import "element-plus/dist/index.css"
 import 'vant/lib/index.css';
 import App from './App.vue'
 import {createPinia} from "pinia";
-import {Cell, Image, List, NavBar, Notify, Search, Tabbar, TabbarItem, TextEllipsis} from "vant";
+import {
+    Cell,
+    ConfigProvider,
+    Image,
+    List,
+    NavBar,
+    Notify,
+    Picker,
+    Popup,
+    Search,
+    Tabbar,
+    TabbarItem,
+    TextEllipsis
+} from "vant";
 import router from "@/router";
 
 const app = createApp(App)
 app.use(createPinia())
+app.use(ConfigProvider);
 app.use(Tabbar);
 app.use(TabbarItem);
 app.use(NavBar);
@@ -17,6 +31,8 @@ app.use(Cell)
 app.use(Image)
 app.use(TextEllipsis)
 app.use(Notify)
+app.use(Picker)
+app.use(Popup)
 app.use(List);
 app.use(router).use(ElementPlus).mount('#app')
 

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,5 +1,6 @@
 <template>
-  <div>
+  <van-config-provider :theme="theme">
+    <div class="mobile-home">
       <router-view/>
 
       <van-tabbar route v-model="active" @change="onChange">
@@ -9,12 +10,15 @@
       </van-tabbar>
 
     </div>
+  </van-config-provider>
+
 </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>