feat: vue-mobile => 完善移动端聊天列表页功能

README.md

@@ -6,8 +6,8 @@
 * 聊天体验跟 ChatGPT 官方版本完全一致。
 * 内置了各种预训练好的角色，比如小红书写手，英语翻译大师，苏格拉底，孔子，乔布斯，周报助手等。轻松满足你的各种聊天和应用需求。
 
-**本项目基于 MIT 协议，免费开放全部源代码，可以作为个人学习使用或者商用。如需商用建议联系作者登记，仅做统计使用，优秀项目我们将在项目首页为您展示。
-**
+**本项目基于 MIT 协议，免费开放全部源代码，可以作为个人学习使用或者商用。如需商用建议联系作者登记，仅做统计使用，
+优秀项目我们将在项目首页为您展示。**
 
 ## 功能截图
 

web/src/main.js

@@ -5,8 +5,15 @@ import 'vant/lib/index.css';
 import App from './App.vue'
 import {createPinia} from "pinia";
 import {
+    Button,
     Cell,
+    CellGroup,
     ConfigProvider,
+    DropdownItem,
+    DropdownMenu,
+    Field,
+    Form,
+    Icon,
     Image,
     List,
     NavBar,
@@ -14,6 +21,8 @@ import {
     Picker,
     Popup,
     Search,
+    Sticky,
+    SwipeCell,
     Tabbar,
     TabbarItem,
     TextEllipsis
@@ -34,6 +43,15 @@ app.use(Notify)
 app.use(Picker)
 app.use(Popup)
 app.use(List);
+app.use(Form);
+app.use(Field);
+app.use(CellGroup);
+app.use(Button);
+app.use(DropdownMenu);
+app.use(Icon);
+app.use(DropdownItem);
+app.use(Sticky);
+app.use(SwipeCell);
 app.use(router).use(ElementPlus).mount('#app')
 
 

web/src/router.js

@@ -102,17 +102,22 @@ const routes = [
         ]
     },
 
+    {
+        path: '/mobile/chat/session',
+        name: 'mobile-chat-session',
+        component: () => import('@/views/mobile/ChatSession.vue'),
+    },
     {
         name: 'mobile',
         path: '/mobile',
         meta: {title: 'ChatGPT-智能助手V3'},
         component: () => import('@/views/mobile/Home.vue'),
-        redirect: '/mobile/chat',
+        redirect: '/mobile/chat/list',
         children: [
             {
-                path: '/mobile/chat',
-                name: 'mobile-chat',
-                component: () => import('@/views/mobile/Chat.vue'),
+                path: '/mobile/chat/list',
+                name: 'mobile-chat-list',
+                component: () => import('@/views/mobile/ChatList.vue'),
             },
             {
                 path: '/mobile/setting',

web/src/store/chat.js

@@ -0,0 +1,11 @@
+import Storage from 'good-storage'
+
+const CHAT_CONFIG_KEY = "chat_config"
+
+export function getChatConfig() {
+    return Storage.get(CHAT_CONFIG_KEY)
+}
+
+export function setChatConfig(chatConfig) {
+    Storage.set(CHAT_CONFIG_KEY, chatConfig)
+}

web/src/utils/http.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import {getSessionId} from "@/utils/storage";
+import {getSessionId} from "@/store/session";
 
 axios.defaults.timeout = 10000
 axios.defaults.baseURL = process.env.VUE_APP_API_HOST

web/src/views/ChatPlus.vue

@@ -212,7 +212,7 @@ import 'highlight.js/styles/a11y-dark.css'
 import {dateFormat, randString, removeArrayItem, renderInputText, UUID} from "@/utils/libs";
 import {ElMessage, ElMessageBox} from "element-plus";
 import hl from "highlight.js";
-import {getLoginUser, getSessionId, removeLoginUser} from "@/utils/storage";
+import {getLoginUser, getSessionId, removeLoginUser} from "@/store/session";
 import {httpGet, httpPost} from "@/utils/http";
 import {useRouter} from "vue-router";
 import Clipboard from "clipboard";
@@ -232,7 +232,7 @@ const mainWinHeight = ref(0); // 主窗口高度
 const chatBoxHeight = ref(0); // 聊天内容框高度
 const leftBoxHeight = ref(0);
 const loading = ref(true);
-const user = ref(getLoginUser());
+const user = getLoginUser();
 const roles = ref([]);
 const roleId = ref(0)
 const newChatItem = ref(null);
@@ -246,7 +246,7 @@ onMounted(() => {
   checkSession().then(() => {
     isLogin.value = true
     // 加载角色列表
-    httpGet(`/api/role/list?user_id=${user.value.id}`).then((res) => {
+    httpGet(`/api/role/list?user_id=${user.id}`).then((res) => {
       roles.value = res.data;
       roleId.value = roles.value[0]['id'];
       // 获取会话列表
@@ -265,8 +265,9 @@ onMounted(() => {
     }).catch(e => {
       ElMessage.error("加载系统配置失败: " + e.message)
     })
-  }).catch(() => {
-    router.push('login')
+  }).catch((e) => {
+    console.log(e)
+    //router.push('login')
   });
 
   const clipboard = new Clipboard('.copy-reply');
@@ -281,7 +282,7 @@ onMounted(() => {
 
 // 加载会话
 const loadChats = function () {
-  httpGet("/api/chat/list?user_id=" + user.value.id).then((res) => {
+  httpGet("/api/chat/list?user_id=" + user.id).then((res) => {
     if (res.data) {
       chatList.value = res.data;
       allChats.value = res.data;
@@ -405,7 +406,6 @@ const removeChat = function (event, chat) {
 
 // 创建 socket 连接
 const prompt = ref('');
-// const replyIcon = 'images/avatar/gpt.png';// 回复信息的头像
 const showStopGenerate = ref(false); // 停止生成
 const showReGenerate = ref(false); // 重新生成
 const previousText = ref(''); // 上一次提问
@@ -570,7 +570,7 @@ const sendMessage = function () {
   chatData.value.push({
     type: "prompt",
     id: randString(32),
-    icon: user.value.avatar,
+    icon: user.avatar,
     content: renderInputText(prompt.value),
     created_at: new Date().getTime(),
   });
@@ -707,8 +707,8 @@ const searchChat = function () {
 }
 
 const updateUser = function (data) {
-  user.value.avatar = data.avatar;
-  user.value.nickname = data.nickname;
+  user.avatar = data.avatar;
+  user.nickname = data.nickname;
 }
 </script>
 

web/src/views/Login.vue

@@ -4,7 +4,7 @@
     <div class="main">
       <div class="contain">
         <div class="logo">
-          <el-image src="images/logo.png" fit="cover" />
+          <el-image src="images/logo.png" fit="cover"/>
         </div>
         <div class="header">{{ title }}</div>
         <div class="content">
@@ -40,7 +40,7 @@
       </div>
 
       <footer class="footer">
-        <footer-bar />
+        <footer-bar/>
       </footer>
     </div>
   </div>
@@ -52,9 +52,10 @@ import {onMounted, ref} from "vue";
 import {Lock, UserFilled} from "@element-plus/icons-vue";
 import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
-import {setLoginUser} from "@/utils/storage";
+import {setLoginUser} from "@/store/session";
 import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
+import {isMobile} from "@/utils/libs";
 
 const router = useRouter();
 const title = ref('ChatGPT-PLUS 用户登录');
@@ -79,8 +80,11 @@ const login = function () {
 
   httpPost('/api/user/login', {username: username.value.trim(), password: password.value.trim()}).then((res) => {
     setLoginUser(res.data)
-    router.push("chat")
-
+    if (isMobile()) {
+      router.push('/mobile')
+    } else {
+      router.push('chat')
+    }
   }).catch((e) => {
     ElMessage.error('登录失败，' + e.message)
   })
@@ -118,6 +122,7 @@ const login = function () {
 
     .logo {
       text-align center
+
       .el-image {
         width 120px;
       }

web/src/views/admin/Login.vue

@@ -48,7 +48,7 @@ import {onMounted, ref} from "vue";
 import {Lock, UserFilled} from "@element-plus/icons-vue";
 import {httpPost} from "@/utils/http";
 import {ElMessage} from "element-plus";
-import {setLoginUser} from "@/utils/storage";
+import {setLoginUser} from "@/store/session";
 import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
 

web/src/views/mobile/ChatList.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="container chat-mobile">
+  <div class="container mobile-chat-list" v-if="isLogin">
     <van-nav-bar
         :title="title"
-        right-text="新建会话"
-        @click-right="showPicker = true"
-    />
+        left-text="新建会话"
+        @click-left="showPicker = true">
+      <template #right>
+        <van-icon name="delete-o" @click="clearAllChatHistory"/>
+      </template>
+    </van-nav-bar>
 
     <div class="content">
       <van-search
@@ -22,15 +25,21 @@
           finished-text="没有更多了"
           @load="onLoad"
       >
-        <van-cell v-for="item in chats" :key="item.id">
-          <div class="chat-list-item">
-            <van-image
-                round
-                :src="item.icon"
-            />
-            <van-text-ellipsis class="text" :content="item.title"/>
-          </div>
-        </van-cell>
+        <van-swipe-cell v-for="item in chats" :key="item.id">
+          <van-cell>
+            <div class="chat-list-item">
+              <van-image
+                  round
+                  :src="item.icon"
+              />
+              <div class="van-ellipsis">{{ item.title }}</div>
+            </div>
+          </van-cell>
+          <template #right>
+            <van-button square type="primary" text="修改" @click="editChat(item)"/>
+            <van-button square type="danger" text="删除" @click="removeChat(item)"/>
+          </template>
+        </van-swipe-cell>
       </van-list>
     </div>
 
@@ -60,10 +69,11 @@
 <script setup>
 import {ref} from "vue";
 import {httpGet} from "@/utils/http";
-import {getLoginUser} from "@/utils/storage";
-import {showFailToast} from "vant";
+import {getLoginUser} from "@/store/session";
+import {showFailToast, showSuccessToast, showToast} from "vant";
 import {checkSession} from "@/action/session";
 import router from "@/router";
+import {setChatConfig} from "@/store/chat";
 
 const title = ref("会话列表")
 const chatName = ref("")
@@ -73,11 +83,13 @@ const loading = ref(false)
 const finished = ref(false)
 const error = ref(false)
 const user = getLoginUser()
+const isLogin = ref(false)
 
 const showPicker = ref(false)
 const columns = ref([])
 
 checkSession().then(() => {
+  isLogin.value = true
   // 加载角色列表
   httpGet(`/api/role/list?user_id=${user.id}`).then((res) => {
     if (res.data) {
@@ -138,16 +150,37 @@ const search = () => {
   chats.value = items;
 }
 
+const clearAllChatHistory = () => {
+  showSuccessToast('所有聊天记录已清空')
+}
+
 const newChat = (item) => {
-  console.log(item.selectedValues)
   showPicker.value = false
+  const options = item.selectedOptions
+  setChatConfig({
+    role: {
+      id: options[0].value,
+      name: options[0].text,
+      icon: options[0].icon
+    },
+    model: options[1].value,
+  })
+  router.push('/mobile/chat/session')
+}
+
+const editChat = (item) => {
+  showToast('修改会话标题')
+}
+
+const removeChat = (item) => {
+  showToast('删除当前会话')
 }
 
 </script>
 
 <style scoped lang="stylus">
 
-.chat-mobile {
+.mobile-chat-list {
   .content {
     .van-cell__value {
       .chat-list-item {
@@ -158,7 +191,7 @@ const newChat = (item) => {
           height 30px
         }
 
-        .text {
+        .van-ellipsis {
           margin-top 4px;
           margin-left 10px;
         }
@@ -179,5 +212,13 @@ const newChat = (item) => {
       }
     }
   }
+
+  .van-nav-bar {
+    .van-nav-bar__right {
+      .van-icon {
+        font-size 20px;
+      }
+    }
+  }
 }
 </style>

web/src/views/mobile/ChatSession.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="mobile-chat">
+    <van-sticky :offset-top="0" position="top" ref="navBarRef">
+      <van-nav-bar left-text="返回" left-arrow @click-left="router.back()">
+        <template #title>
+          <van-dropdown-menu>
+            <van-dropdown-item :title="title">
+              <van-cell center title="角色"> {{ role.name }}</van-cell>
+              <van-cell center title="模型">{{ model }}</van-cell>
+            </van-dropdown-item>
+          </van-dropdown-menu>
+        </template>
+
+        <template #right>
+          <van-icon name="delete-o" @click="clearChatHistory"/>
+        </template>
+      </van-nav-bar>
+    </van-sticky>
+
+
+    <div class="message-list-box" :style="{height: winHeight+'px'}">
+
+    </div>
+
+    <van-sticky :offset-bottom="0" position="bottom" ref="bottomBarRef">
+      <div class="chat-box">
+        <van-cell-group>
+          <van-field
+              v-model="prompt"
+              center
+              clearable
+              placeholder="输入你的问题"
+          >
+            <template #button>
+              <van-button size="small" type="primary" @click="sendMessage">发送</van-button>
+            </template>
+            <template #extra>
+              <div class="icon-box">
+                <van-icon v-if="showStopGenerate" name="stop-circle-o" @click="stopGenerate"/>
+                <van-icon v-if="showReGenerate" name="play-circle-o" @click="reGenerate"/>
+              </div>
+            </template>
+          </van-field>
+        </van-cell-group>
+      </div>
+    </van-sticky>
+  </div>
+
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {showToast} from "vant";
+import {useRouter} from "vue-router";
+import {UUID} from "@/utils/libs";
+import {getChatConfig} from "@/store/chat";
+
+const title = ref('简单介绍一下高更的艺术思想')
+const winHeight = ref(0)
+const navBarRef = ref(null)
+const bottomBarRef = ref(null)
+const router = useRouter()
+
+const chatConfig = getChatConfig()
+const role = chatConfig.role
+const model = chatConfig.model
+
+onMounted(() => {
+  winHeight.value = window.innerHeight - navBarRef.value.$el.offsetHeight - bottomBarRef.value.$el.offsetHeight
+})
+
+// 创建 socket 连接
+const prompt = ref('');
+const showStopGenerate = ref(false); // 停止生成
+const showReGenerate = ref(false); // 重新生成
+const previousText = ref(''); // 上一次提问
+const lineBuffer = ref(''); // 输出缓冲行
+const socket = ref(null);
+const activelyClose = ref(false); // 主动关闭
+const canSend = ref(true);
+const connect = function (chat_id, role_id) {
+  let isNewChat = false;
+  if (!chat_id) {
+    isNewChat = true;
+    chat_id = UUID();
+  }
+  // 先关闭已有连接
+  if (socket.value !== null) {
+    activelyClose.value = true;
+    socket.value.close();
+  }
+
+  const _role = getRoleById(role_id);
+  // 初始化 WebSocket 对象
+  const _sessionId = getSessionId();
+  let host = process.env.VUE_APP_WS_HOST
+  if (host === '') {
+    if (location.protocol === 'https:') {
+      host = 'wss://' + location.host;
+    } else {
+      host = 'ws://' + location.host;
+    }
+  }
+  const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model=${model.value}`);
+  _socket.addEventListener('open', () => {
+    chatData.value = []; // 初始化聊天数据
+    previousText.value = '';
+    canSend.value = true;
+    activelyClose.value = false;
+
+    if (isNewChat) { // 加载打招呼信息
+      loading.value = false;
+      chatData.value.push({
+        type: "reply",
+        id: randString(32),
+        icon: _role['icon'],
+        content: _role['hello_msg'],
+        orgContent: _role['hello_msg'],
+      })
+    } else { // 加载聊天记录
+      loadChatHistory(chat_id);
+    }
+  });
+
+  _socket.addEventListener('message', event => {
+    if (event.data instanceof Blob) {
+      const reader = new FileReader();
+      reader.readAsText(event.data, "UTF-8");
+      reader.onload = () => {
+        const data = JSON.parse(String(reader.result));
+        if (data.type === 'start') {
+          chatData.value.push({
+            type: "reply",
+            id: randString(32),
+            icon: _role['icon'],
+            content: ""
+          });
+        } else if (data.type === 'end') { // 消息接收完毕
+          canSend.value = true;
+          showReGenerate.value = true;
+          showStopGenerate.value = false;
+          lineBuffer.value = ''; // 清空缓冲
+
+          // 追加当前会话到会话列表
+          if (isNewChat && newChatItem.value !== null) {
+            newChatItem.value['title'] = previousText.value;
+            newChatItem.value['chat_id'] = chat_id;
+            chatList.value.unshift(newChatItem.value);
+            activeChat.value = newChatItem.value;
+            newChatItem.value = null; // 只追加一次
+          }
+
+          // 获取 token
+          const reply = chatData.value[chatData.value.length - 1]
+          httpGet(`/api/chat/tokens?text=${reply.orgContent}&model=${model.value}`).then(res => {
+            reply['created_at'] = new Date().getTime();
+            reply['tokens'] = res.data;
+            // 将聊天框的滚动条滑动到最底部
+            nextTick(() => {
+              document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
+            })
+          })
+
+        } else {
+          lineBuffer.value += data.content;
+          let md = require('markdown-it')();
+          const reply = chatData.value[chatData.value.length - 1]
+          reply['orgContent'] = lineBuffer.value;
+          reply['content'] = md.render(lineBuffer.value);
+
+          nextTick(() => {
+            hl.configure({ignoreUnescapedHTML: true})
+            const lines = document.querySelectorAll('.chat-line');
+            const blocks = lines[lines.length - 1].querySelectorAll('pre code');
+            blocks.forEach((block) => {
+              hl.highlightElement(block)
+            })
+          })
+        }
+        // 将聊天框的滚动条滑动到最底部
+        nextTick(() => {
+          document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
+        })
+      };
+    }
+
+  });
+
+  _socket.addEventListener('close', () => {
+    if (activelyClose.value) { // 忽略主动关闭
+      return;
+    }
+    // 停止发送消息
+    canSend.value = true;
+    socket.value = null;
+    loading.value = true;
+    checkSession().then(() => {
+      connect(chat_id, role_id)
+    }).catch(() => {
+      ElMessageBox({
+        title: '会话提示',
+        message: "当前会话已经失效，请重新登录",
+        confirmButtonText: 'OK',
+        callback: () => router.push('login')
+      });
+    });
+  });
+
+  socket.value = _socket;
+}
+
+const clearChatHistory = () => {
+  showToast('清空聊记录')
+}
+
+const sendMessage = () => {
+  showToast("发送成功")
+}
+
+const stopGenerate = () => {
+  showToast("停止生成")
+}
+
+const reGenerate = () => {
+  showToast('重新生成')
+}
+</script>
+
+<style scoped lang="stylus">
+.mobile-chat {
+  .message-list-box {
+
+  }
+
+  .chat-box {
+    .icon-box {
+      .van-icon {
+        font-size 24px
+        margin-left 10px;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="stylus">
+.mobile-chat {
+  .van-nav-bar__title {
+    .van-dropdown-menu__title {
+      margin-right 10px
+    }
+
+    .van-cell__title {
+      text-align left
+    }
+  }
+
+  .van-nav-bar__right {
+    .van-icon {
+      font-size 20px
+    }
+  }
+}
+</style>