more chat role is ready, and add API to add new chat role

2025-11-09 02:33:42 +08:00 · 2023-04-08 09:39:03 +08:00
parent df7d4d5b94
commit df9e587300
21 changed files with 231 additions and 104 deletions
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -7,16 +7,22 @@ import ChatPlus from "@/views/ChatPlus.vue";
 import Chat from "@/views/Chat.vue";
 import NotFound from './views/404.vue'
 import TestPage from './views/Test.vue'
+import Home from "@/views/Home.vue";
 import './utils/prototype'

 const routes = [
    {
-        name: 'chat-plus', path: '/', component: ChatPlus, meta: {
+        name: 'home', path: '/', component: Home, meta: {
+            title: 'ChatGPT-Plus'
+        }
+    },
+    {
+        name: 'plus', path: '/plus', component: ChatPlus, meta: {
            title: 'ChatGPT-Plus for PC'
        }
    },
    {
-        name: 'chat-mobile', path: '/mobile', component: Chat, meta: {
+        name: 'mobile', path: '/mobile', component: Chat, meta: {
            title: 'ChatGPT-Plus for Mobile'
        }
    },
--- a/web/src/utils/http.js
+++ b/web/src/utils/http.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import {getSessionId} from "@/utils/storage";

-axios.defaults.timeout = 5000
+axios.defaults.timeout = 10000
 axios.defaults.baseURL = process.env.VUE_APP_API_HOST
 axios.defaults.withCredentials = true;
 axios.defaults.headers.post['Content-Type'] = 'application/json'
--- a/web/src/utils/libs.js
+++ b/web/src/utils/libs.js
@@ -12,4 +12,10 @@ export function randString(length) {
        buf.push(str.charAt(rand))
    }
    return buf.join("")
+}
+
+export function isMobile() {
+    const userAgent = navigator.userAgent;
+    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
+    return mobileRegex.test(userAgent);
 }
--- a/web/src/views/Chat.vue
+++ b/web/src/views/Chat.vue
@@ -85,9 +85,9 @@
          <el-button type="primary" @click="submitToken">提交</el-button>
        </el-row>

-        <el-row class="row-center">
-          <p>打开微信扫下面二维码免费领取口令</p>
-        </el-row>
+        <div class="tip-text">
+          打开微信扫下面二维码免费领取口令, <strong>强烈建议你使用 PC 浏览器访问获得更好的聊天体验。</strong>
+        </div>

        <el-row class="row-center">
          <el-image src="images/wx.png" fit="cover"/>
@@ -142,63 +142,9 @@ export default defineComponent({
  mounted: function () {
    nextTick(() => {
      this.chatBoxHeight = window.innerHeight - this.toolBoxHeight;
+      ElMessage.warning("强烈建议使用PC浏览器访问获的更好的聊天体验！")
    })

-    // for (let i = 0; i < 10; i++) {
-    //   this.chatData.push({
-    //     type: "prompt",
-    //     id: randString(32),
-    //     icon: 'images/user-icon.png',
-    //     content: "孙悟空为什么可以把金棍棒放进耳朵？",
-    //   });
-    //   this.chatData.push({
-    //     type: "reply",
-    //     id: randString(32),
-    //     icon: 'images/gpt-icon.png',
-    //     content: "以下是一个使用 WebSocket API 建立 WebSocket 连接并发送消息的 JavaScript 示例代码：\n" +
-    //         "\n" +
-    //         "```js\n" +
-    //         "const socket = new WebSocket('ws://localhost:8080');\n" +
-    //         "\n" +
-    //         "// 监听 WebSocket 连接打开事件\n" +
-    //         "socket.addEventListener('open', (event) => {\n" +
-    //         "  console.log('WebSocket 连接已打开');\n" +
-    //         "\n" +
-    //         "  // 发送消息\n" +
-    //         "  socket.send('Hello WebSocket!');\n" +
-    //         "});\n" +
-    //         "\n" +
-    //         "// 监听 WebSocket 接收到消息事件\n" +
-    //         "socket.addEventListener('message', (event) => {\n" +
-    //         "  console.log('接收到消息：' + event.data);\n" +
-    //         "});\n" +
-    //         "\n" +
-    //         "// 监听 WebSocket 连接关闭事件\n" +
-    //         "socket.addEventListener('close', (event) => {\n" +
-    //         "   console.log('WebSocket 连接已关闭');\n" +
-    //         "});\n" +
-    //         "\n" +
-    //         "// 监听 WebSocket 出错事件\n" +
-    //         "socket.addEventListener('error', (event) => {\n" +
-    //         "   console.log('WebSocket 连接出错');\n" +
-    //         "});\n" +
-    //         "```\n" +
-    //         "\n" +
-    //         "在实际使用时，需要替换上述代码中的 WebSocket 连接地址和端口号。此外，根据后端的实现，可能需要在客户端发送的消息中携带一些特定信息，以便后端能够正确地处理这些消息。",
-    //   });
-    // }
-    //
-    // let md = require('markdown-it')();
-    // this.chatData[this.chatData.length - 1]["content"] = md.render(this.chatData[this.chatData.length - 1]["content"]);
-    //
-    // nextTick(() => {
-    //   const lines = document.querySelectorAll('.chat-line');
-    //   const blocks = lines[lines.length - 1].querySelectorAll('pre code');
-    //   blocks.forEach((block) => {
-    //     hl.highlightElement(block)
-    //   })
-    // })
-
    window.addEventListener("resize", () => {
      this.chatBoxHeight = window.innerHeight - this.toolBoxHeight;
      this.inputBoxWidth = window.innerWidth - 20;
@@ -626,15 +572,23 @@ export default defineComponent({

    .el-dialog__body {
      padding 10px 10px 20px 10px;
-    }

-    .el-row {
-      flex-wrap nowrap
+      .el-row {
+        flex-wrap nowrap

-      button {
-        margin-left 5px;
+        button {
+          margin-left 5px;
+        }
+      }
+
+      .tip-text {
+        text-align left
+        padding 10px 20px;
+        line-height 1.5
      }
    }
+
+
  }
 }

--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -31,7 +31,7 @@
    </el-row>
    <el-row>
      <div class="left-box">
-        <div class="content">
+        <div class="content" :style="{height: leftBoxHeight+'px'}">
          <el-row v-for="item in chatRoles" :key="item.key">
            <div :class="item.key === this.role?'chat-role-item active':'chat-role-item'" @click="changeRole(item)">
              <el-image :src="item.icon" class="avatar"/>
@@ -41,7 +41,7 @@
        </div>
      </div>
      <div class="right-box" :style="{height: mainWinHeight+'px'}">
-        <div v-loading="loading">
+        <div v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)">
          <div id="container">
            <div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
              <div v-for="chat in chatData" :key="chat.id">
@@ -160,6 +160,7 @@ export default defineComponent({
      socket: null,
      mainWinHeight: 0, // 主窗口高度
      chatBoxHeight: 0, // 聊天内容框高度
+      leftBoxHeight: 0,
      sending: true,
      loading: true
    }
@@ -180,6 +181,7 @@ export default defineComponent({
    resizeElement: function () {
      this.chatBoxHeight = window.innerHeight - 61 - 115 - 38;
      this.mainWinHeight = window.innerHeight - 61;
+      this.leftBoxHeight = window.innerHeight - 61 - 100;
    },
    // 创建 socket 会话连接
    connect: function () {
@@ -391,7 +393,6 @@ export default defineComponent({
      }).then((res) => {
        setSessionId(res.data)
        this.connect();
-        this.loading = false;
      }).catch(() => {
        ElMessage.error("口令错误");
        this.token = '';
@@ -498,11 +499,19 @@ export default defineComponent({
        border-top: 1px solid #2F3032
        border-right: 1px solid #2F3032

+        // 隐藏滚动条
+        ::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+          background-color: transparent;
+        }
+
        .content {
-          display flex
-          flex-wrap: wrap;
-          flex-direction column
+          //display flex
+          //flex-wrap: wrap;
+          //flex-direction column
          width 100%
+          overflow-y scroll

          .chat-role-item {
            display flex
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>{{ title }}</div>
+</template>
+
+<script>
+import { defineComponent } from "vue"
+import {isMobile} from "@/utils/libs";
+
+export default defineComponent({
+  name: 'HomePage',
+  data () {
+    return {
+      title: "Loading page...",
+
+    }
+  },
+  mounted() {
+    if (isMobile()) {
+      this.$router.push("mobile");
+    } else {
+      this.$router.push("plus");
+    }
+
+  }
+})
+</script>