refactor: refactor mobile pages for the chat model updating

2025-11-14 05:03:45 +08:00 · 2023-09-04 18:15:56 +08:00
parent 2820adad53
commit 8d4fdaf902
12 changed files with 564 additions and 172 deletions
--- a/web/src/views/mobile/ChatList.vue
+++ b/web/src/views/mobile/ChatList.vue
@@ -64,6 +64,10 @@
      </van-picker>
    </van-popup>

+    <van-dialog v-model:show="showEditChat" title="修改对话标题" show-cancel-button @confirm="saveTitle">
+      <van-field v-model="tmpChatTitle" label="" placeholder="请输入对话标题"/>
+    </van-dialog>
+
    <bind-mobile v-if="isLogin" :show="showBindMobileDialog" :mobile="loginUser.mobile"
                 @hide="showBindMobileDialog = false"/>
  </div>
@@ -71,8 +75,8 @@

 <script setup>
 import {ref} from "vue";
-import {httpGet} from "@/utils/http";
-import {showConfirmDialog, showFailToast, showSuccessToast, showToast} from "vant";
+import {httpGet, httpPost} from "@/utils/http";
+import {showConfirmDialog, showFailToast, showSuccessToast} from "vant";
 import {checkSession} from "@/action/session";
 import router from "@/router";
 import {setChatConfig} from "@/store/chat";
@@ -93,6 +97,9 @@ const models = ref([])
 const showPicker = ref(false)
 const columns = ref([roles.value, models.value])
 const showBindMobileDialog = ref(false)
+const showEditChat = ref(false)
+const item = ref({})
+const tmpChatTitle = ref("")

 checkSession().then((user) => {
  loginUser.value = user
@@ -115,17 +122,18 @@ checkSession().then((user) => {
    showFailToast("加载聊天角色失败")
  })

-  // 加载系统配置
-  httpGet('/api/admin/config/get?key=system').then(res => {
+  // 加载模型
+  httpGet('/api/model/list?enable=1').then(res => {
    if (res.data) {
-      const items = res.data.models
+      const items = res.data
      for (let i = 0; i < items.length; i++) {
-        models.value.push({text: items[i].toUpperCase(), value: items[i]})
+        models.value.push({text: items[i].name, value: items[i].id})
      }
    }
-  }).catch(() => {
-    showFailToast("加载系统配置失败")
+  }).catch(e => {
+    showFailToast("加载模型失败: " + e.message)
  })
+
 }).catch(() => {
  router.push("/login")
 })
@@ -144,6 +152,15 @@ const onLoad = () => {
  })
 };

+const getModelValue = (model_id) => {
+  for (let i = 0; i < models.value.length; i++) {
+    if (models.value[i].value === model_id) {
+      return models.value[i].text
+    }
+  }
+  return ""
+}
+
 const search = () => {
  if (chatName.value === '') {
    chats.value = allChats.value
@@ -185,6 +202,7 @@ const newChat = (item) => {
      helloMsg: options[0].helloMsg
    },
    model: options[1].value,
+    modelValue: getModelValue(options[1].value),
    title: '新建会话',
    chatId: 0
  })
@@ -205,7 +223,8 @@ const changeChat = (chat) => {
      name: role.text,
      icon: role.icon
    },
-    model: chat.model,
+    model: chat.model_id,
+    modelValue: getModelValue(chat.model_id),
    title: chat.title,
    chatId: chat.chat_id,
    helloMsg: chat.hello_msg,
@@ -213,9 +232,18 @@ const changeChat = (chat) => {
  router.push('/mobile/chat/session')
 }

-const editChat = (item) => {
-  showToast('修改会话标题')
-
+const editChat = (row) => {
+  showEditChat.value = true
+  item.value = row
+  tmpChatTitle.value = row.title
+}
+const saveTitle = () => {
+  httpPost('/api/chat/update', {id: item.value.id, title: tmpChatTitle.value}).then(() => {
+    showSuccessToast("操作成功！");
+    item.value.title = tmpChatTitle.value;
+  }).catch(e => {
+    showFailToast("操作失败：" + e.message);
+  })
 }

 const removeChat = (item) => {
--- a/web/src/views/mobile/ChatSession.vue
+++ b/web/src/views/mobile/ChatSession.vue
@@ -1,13 +1,13 @@
 <template>
  <van-config-provider :theme="getMobileTheme()">
-    <div class="mobile-chat">
+    <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
      <van-sticky ref="navBarRef" :offset-top="0" position="top">
        <van-nav-bar left-arrow left-text="返回" @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-cell center title="模型">{{ modelValue }}</van-cell>
              </van-dropdown-item>
            </van-dropdown-menu>
          </template>
@@ -28,7 +28,6 @@
      <div id="message-list-box" :style="{height: winHeight+'px'}" class="message-list-box">
        <van-list
            v-model:error="error"
-            v-model:loading="loading"
            :finished="finished"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
@@ -47,6 +46,12 @@
                        :icon="item.icon"
                        :org-content="item.orgContent"
                        :tokens="item['tokens']"/>
+            <chat-mid-journey v-else-if="item.type==='mj'"
+                              :content="item.content"
+                              :icon="item.icon"
+                              @disable-input="disableInput(true)"
+                              @enable-input="enableInput"
+                              :created-at="dateFormat(item['created_at'])"/>
          </van-cell>
        </van-list>
      </div>
@@ -80,7 +85,7 @@

 <script setup>
 import {nextTick, onMounted, ref} from "vue";
-import {showToast, showDialog} from "vant";
+import {showToast} from "vant";
 import {useRouter} from "vue-router";
 import {dateFormat, randString, renderInputText, UUID} from "@/utils/libs";
 import {getChatConfig} from "@/store/chat";
@@ -89,9 +94,10 @@ import hl from "highlight.js";
 import 'highlight.js/styles/a11y-dark.css'
 import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
 import ChatReply from "@/components/mobile/ChatReply.vue";
-import {getSessionId} from "@/store/session";
+import {getSessionId, getUserToken} from "@/store/session";
 import {checkSession} from "@/action/session";
 import {getMobileTheme} from "@/store/system";
+import ChatMidJourney from "@/components/mobile/ChatMidJourney.vue";

 const winHeight = ref(0)
 const navBarRef = ref(null)
@@ -101,6 +107,7 @@ const router = useRouter()
 const chatConfig = getChatConfig()
 const role = chatConfig.role
 const model = chatConfig.model
+const modelValue = chatConfig.modelValue
 const title = chatConfig.title
 const chatId = chatConfig.chatId
 const loginUser = ref(null)
@@ -123,7 +130,6 @@ checkSession().then(user => {
 const onLoad = () => {
  httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
    // 加载状态结束
-    loading.value = false;
    finished.value = true;
    const data = res.data
    if (data && data.length > 0) {
@@ -132,6 +138,11 @@ const onLoad = () => {
        if (data[i].type === "prompt") {
          chatData.value.push(data[i]);
          continue;
+        } else if (data[i].type === "mj") {
+          data[i].content = JSON.parse(data[i].content)
+          data[i].content.html = md.render(data[i].content?.content)
+          chatData.value.push(data[i]);
+          continue;
        }

        data[i].orgContent = data[i].content;
@@ -189,14 +200,14 @@ const connect = function (chat_id, role_id) {
      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}`);
+  const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model_id=${model}`);
  _socket.addEventListener('open', () => {
+    loading.value = false
    previousText.value = '';
    canSend.value = true;
    activelyClose.value = false;

    if (isNewChat) { // 加载打招呼信息
-      loading.value = false;
      chatData.value.push({
        type: "reply",
        id: randString(32),
@@ -220,10 +231,39 @@ const connect = function (chat_id, role_id) {
            icon: role.icon,
            content: ""
          });
+        } else if (data.type === "mj") {
+          disableInput(true)
+          const content = data.content;
+          const md = require('markdown-it')({breaks: true});
+          content.html = md.render(content.content)
+          let key = content.key
+          // fixed bug: 执行 Upscale 和 Variation 操作的时候覆盖之前的绘画
+          if (content.status === "Finished") {
+            key = randString(32)
+            enableInput()
+          }
+          // console.log(content)
+          // check if the message is in chatData
+          let flag = false
+          for (let i = 0; i < chatData.value.length; i++) {
+            if (chatData.value[i].id === content.key) {
+              flag = true
+              chatData.value[i].content = content
+              chatData.value[i].id = key
+              break
+            }
+          }
+          if (flag === false) {
+            chatData.value.push({
+              type: "mj",
+              id: key,
+              icon: "/images/avatar/mid_journey.png",
+              content: content
+            });
+          }
+
        } else if (data.type === 'end') { // 消息接收完毕
-          canSend.value = true;
-          showReGenerate.value = true;
-          showStopGenerate.value = false;
+          enableInput()
          lineBuffer.value = ''; // 清空缓冲

        } else {
@@ -250,7 +290,6 @@ const connect = function (chat_id, role_id) {
  });

  _socket.addEventListener('close', () => {
-    console.log(activelyClose.value)
    if (activelyClose.value) { // 忽略主动关闭
      return;
    }
@@ -260,18 +299,26 @@ const connect = function (chat_id, role_id) {
    checkSession().then(() => {
      connect(chat_id, role_id)
    }).catch(() => {
-      showDialog({
-        title: '会话提示',
-        message: '当前会话已经失效，请重新登录！',
-      }).then(() => {
-        router.push('/login')
-      });
+      loading.value = true
+      setTimeout(() => connect(chat_id, role_id), 3000)
    });
  });

  socket.value = _socket;
 }

+const disableInput = (force) => {
+  canSend.value = false;
+  showReGenerate.value = false;
+  showStopGenerate.value = !force;
+}
+
+const enableInput = () => {
+  canSend.value = true;
+  showReGenerate.value = previousText.value !== "";
+  showStopGenerate.value = false;
+}
+
 // 将聊天框的滚动条滑动到最底部
 const scrollListBox = () => {
  document.getElementById('message-list-box').scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
@@ -300,9 +347,7 @@ const sendMessage = () => {
    scrollListBox()
  })

-  canSend.value = false;
-  showStopGenerate.value = true;
-  showReGenerate.value = false;
+  disableInput(false)
  socket.value.send(prompt.value);
  previousText.value = prompt.value;
  prompt.value = '';
@@ -312,17 +357,12 @@ const sendMessage = () => {
 const stopGenerate = () => {
  showStopGenerate.value = false;
  httpGet("/api/chat/stop?session_id=" + getSessionId()).then(() => {
-    canSend.value = true;
-    if (previousText.value !== '') {
-      showReGenerate.value = true;
-    }
+    enableInput()
  })
 }

 const reGenerate = () => {
-  canSend.value = false;
-  showStopGenerate.value = true;
-  showReGenerate.value = false;
+  disableInput(false)
  const text = '重新生成上述问题的答案：' + previousText.value;
  // 追加消息
  chatData.value.push({
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -5,14 +5,6 @@
    <div class="content">
      <van-form @submit="save">
        <van-cell-group inset v-model="form">
-          <van-field
-              v-model="form.username"
-              name="用户名"
-              label="用户名"
-              readonly
-              disabled
-              placeholder="用户名"
-          />
          <van-field
              v-model="form.mobile"
              name="手机号"
@@ -21,13 +13,6 @@
              disabled
              placeholder="手机号"
          />
-          <van-field
-              v-model="form.nickname"
-              name="昵称"
-              label="昵称"
-              placeholder="昵称"
-              :rules="[{ required: true, message: '请填写用户昵称' }]"
-          />
          <van-field label="头像">
            <template #input>
              <van-uploader v-model="fileList"
@@ -37,15 +22,21 @@
            </template>
          </van-field>

-          <van-field label="剩余次数">
+          <van-field label="剩余对话次数">
            <template #input>
-              <van-tag type="success">{{ form.calls }}</van-tag>
+              <van-tag type="primary">{{ form.calls }}</van-tag>
            </template>
          </van-field>

-          <van-field label="消耗 Tokens">
+          <van-field label="剩余绘图次数">
            <template #input>
-              <van-tag type="primary">{{ form.tokens }}</van-tag>
+              <van-tag type="primary">{{ form.img_calls }}</van-tag>
+            </template>
+          </van-field>
+
+          <van-field label="累计消耗tokens">
+            <template #input>
+              <van-tag type="primary">{{ form.total_tokens }}</van-tag>
            </template>
          </van-field>
        </van-cell-group>
@@ -125,6 +116,13 @@ const save = () => {
 }
 </script>

-<style scoped>
-
+<style lang="stylus">
+.mobile-user-profile {
+  .content {
+    .van-field__label {
+      width 100px
+      text-align right
+    }
+  }
+}
 </style>
--- a/web/src/views/mobile/Setting.vue
+++ b/web/src/views/mobile/Setting.vue
@@ -6,45 +6,19 @@
      <van-form @submit="save" v-model="form">
        <van-cell-group inset>
          <van-field
-              v-model="form.chat_config.model"
-              readonly
-              label="默认模型"
-              placeholder=""
-              @click="showPicker = true"
+              v-model="form.chat_config.api_keys.OpenAI"
+              label="OpenAI KEY"
+              placeholder="OpenAI API KEY"
          />
          <van-field
-              v-model.number="form.chat_config.max_tokens"
-              type="number"
-              name="MaxTokens"
-              label="MaxTokens"
-              placeholder="每次请求最大 token 数量"
-              :rules="[{ required: true, message: '请填写 MaxTokens' }]"
+              v-model="form.chat_config.api_keys.Azure"
+              label="Azure KEY"
+              placeholder="Azure API KEY"
          />
          <van-field
-              v-model.number="form.chat_config.temperature"
-              type="number"
-              name="Temperature"
-              label="Temperature"
-              placeholder="模型温度"
-              :rules="[{ required: true, message: '请填写 Temperature' }]"
-          />
-
-          <van-field name="switch" label="聊天记录">
-            <template #input>
-              <van-switch v-model="form.chat_config.enable_history"/>
-            </template>
-          </van-field>
-
-          <van-field name="switch" label="聊天上下文">
-            <template #input>
-              <van-switch v-model="form.chat_config.enable_context"/>
-            </template>
-          </van-field>
-          <van-field
-              v-model="form.chat_config.api_key"
-              name="API KEY"
-              label="API KEY"
-              placeholder="配置自己的 api key"
+              v-model="form.chat_config.api_keys.ChatGLM"
+              label="ChatGLM KEY"
+              placeholder="ChatGLM API KEY"
          />
        </van-cell-group>
        <div style="margin: 16px;">
@@ -74,12 +48,7 @@ import {ElMessage} from "element-plus";
 const title = ref('聊天设置')
 const form = ref({
  chat_config: {
-    model: '',
-    max_tokens: 0,
-    enable_context: false,
-    enable_history: false,
-    temperature: false,
-    api_key: ''
+    api_keys: {OpenAI: "", Azure: "", ChatGLM: ""}
  }
 })
 const showPicker = ref(false)
@@ -89,6 +58,7 @@ onMounted(() => {
  // 获取最新用户信息
  httpGet('/api/user/profile').then(res => {
    form.value = res.data
+    form.value.chat_config.api_keys = res.data.chat_config.api_keys ?? {OpenAI: "", Azure: "", ChatGLM: ""}
  }).catch(() => {
    showFailToast('获取用户信息失败')
  });
@@ -119,10 +89,15 @@ const save = () => {

 </script>

-<style scoped lang="stylus">
+<style lang="stylus">
 .mobile-setting {
  .content {
    padding-top 60px
+
+    .van-field__label {
+      width 100px
+      text-align right
+    }
  }
 }
 </style>