refactor: refactor mobile pages for the chat model updating

api/handler/user_handler.go

@@ -76,7 +76,7 @@ func (h *UserHandler) Register(c *gin.Context) {
 	var item model.User
 	res := h.db.Where("mobile = ?", data.Mobile).First(&item)
 	if res.RowsAffected > 0 {
-		resp.ERROR(c, "该手机号码以及被注册，请更换其他手机号")
+		resp.ERROR(c, "该手机号码已经被注册，请更换其他手机号")
 		return
 	}
 

web/src/components/admin/AdminSidebar.vue

@@ -89,7 +89,7 @@ const items = [
   {
     icon: 'api-key',
     index: '/admin/apikey',
-    title: 'API-KEY 管理',
+    title: 'API-KEY',
   },
   {
     icon: 'model',

web/src/components/mobile/BindMobile.vue

@@ -18,8 +18,7 @@
           placeholder="请输入短信验证码"
       >
         <template #button>
-          <!--          <van-button size="small" type="primary">发送验证码</van-button>-->
+          <send-msg-mobile size="small" :mobile="form.mobile"/>
-          <send-msg size="small" :mobile="form.mobile"/>
         </template>
       </van-field>
     </van-cell-group>
@@ -28,11 +27,10 @@
 
 <script setup>
 import {computed, ref} from "vue";
-import SendMsg from "@/components/mobile/SendMsg.vue";
-import {ElMessage} from "element-plus";
 import {httpPost} from "@/utils/http";
 import {validateMobile} from "@/utils/validate";
 import {showNotify} from "vant";
+import SendMsgMobile from "@/components/mobile/SendMsgMobile.vue";
 
 const props = defineProps({
   show: Boolean,

web/src/components/mobile/ChatMidJourney.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="mobile-message-mj">
+    <div class="chat-icon">
+      <van-image :src="icon"/>
+    </div>
+
+    <div class="chat-item">
+      <div class="triangle"></div>
+      <div class="content-box">
+        <div class="content">
+          <div class="content-inner">
+            <div class="text" v-html="data.html"></div>
+            <div class="images" v-if="data.image?.url !== ''">
+              <el-image :src="data.image?.url"
+                        :zoom-rate="1.2"
+                        :preview-src-list="[data.image?.url]"
+                        fit="cover"
+                        :initial-index="0" loading="lazy">
+                <template #placeholder>
+                  <div class="image-slot"
+                       :style="{height: height+'px', lineHeight:height+'px'}">
+                    正在加载图片<span class="dot">...</span></div>
+                </template>
+
+                <template #error>
+                  <div class="image-slot">
+                    <el-icon>
+                      <Picture/>
+                    </el-icon>
+                  </div>
+                </template>
+              </el-image>
+            </div>
+          </div>
+
+          <div class="opt" v-if="data.showOpt &&data.image?.hash !== ''">
+            <div class="opt-line">
+              <ul>
+                <li><a @click="upscale(1)">U1</a></li>
+                <li><a @click="upscale(2)">U2</a></li>
+                <li><a @click="upscale(3)">U3</a></li>
+                <li><a @click="upscale(4)">U4</a></li>
+              </ul>
+            </div>
+
+            <div class="opt-line">
+              <ul>
+                <li><a @click="variation(1)">V1</a></li>
+                <li><a @click="variation(2)">V2</a></li>
+                <li><a @click="variation(3)">V3</a></li>
+                <li><a @click="variation(4)">V4</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {Picture} from "@element-plus/icons-vue";
+import {httpPost} from "@/utils/http";
+import {getSessionId} from "@/store/session";
+import {showNotify} from "vant";
+
+const props = defineProps({
+  content: Object,
+  icon: String,
+  createdAt: String
+});
+
+const data = ref(props.content)
+const cacheKey = "img_placeholder_height"
+const item = localStorage.getItem(cacheKey);
+const loading = ref(false)
+const height = ref(0)
+if (item) {
+  height.value = parseInt(item)
+}
+if (data.value["image"]?.width > 0) {
+  height.value = 350 * data.value["image"]?.height / data.value["image"]?.width
+  localStorage.setItem(cacheKey, height.value)
+}
+data.value["showOpt"] = data.value["content"]?.indexOf("- Image #") === -1;
+// console.log(data.value)
+
+watch(() => props.content, (newVal) => {
+  data.value = newVal;
+});
+const emits = defineEmits(['disable-input', 'disable-input']);
+const upscale = (index) => {
+  send('/api/mj/upscale', index)
+}
+
+const variation = (index) => {
+  send('/api/mj/variation', index)
+}
+
+const send = (url, index) => {
+  loading.value = true
+  emits('disable-input')
+  httpPost(url, {
+    index: index,
+    message_id: data.value?.["message_id"],
+    message_hash: data.value?.["image"]?.hash,
+    session_id: getSessionId(),
+    key: data.value?.["key"],
+    prompt: data.value?.["prompt"],
+  }).then(() => {
+    showNotify({type: "success", message: "任务推送成功，请耐心等待任务执行..."})
+    loading.value = false
+  }).catch(e => {
+    showNotify({type: "danger", message: "任务推送失败：" + e.message})
+    emits('disable-input')
+  })
+}
+</script>
+
+<style lang="stylus">
+.mobile-message-mj {
+  display flex
+  justify-content: flex-start;
+
+  .chat-icon {
+    margin-right 5px
+
+    .van-image {
+      width 32px
+
+      img {
+        border-radius 5px
+      }
+    }
+  }
+
+  .chat-item {
+    display: inline-block;
+    position: relative;
+    padding: 0 0 0 5px;
+    overflow: hidden;
+
+    .triangle {
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-right: 5px solid #fff;
+      position: absolute;
+      left: 0;
+      top: 13px;
+    }
+
+    .content-box {
+
+      display flex
+      flex-direction row
+
+      .content {
+        text-align left
+        width 100%
+        overflow-x auto
+        min-height 20px;
+        word-break break-word;
+        padding: 5px 10px;
+        color #444444
+        background-color: #ffffff;
+        font-size: 16px
+        border-radius: 5px;
+
+        .content-inner {
+          word-break break-word;
+          padding: 6px 10px;
+          color #374151;
+          font-size: var(--content-font-size);
+          border-radius: 5px;
+          overflow: auto;
+
+          .text {
+            p:first-child {
+              margin-top 0
+            }
+          }
+
+          .images {
+            max-width 350px;
+
+            .el-image {
+              border-radius 10px;
+
+              .image-slot {
+                color #c1c1c1
+                width 350px
+                text-align center
+                border-radius 10px;
+                border 1px solid #e1e1e1
+              }
+            }
+          }
+        }
+
+        .opt {
+          .opt-line {
+            margin 6px 0
+
+            ul {
+              display flex
+              flex-flow row
+              padding-left 10px
+
+              li {
+                margin-right 10px
+
+                a {
+                  padding 3px 0
+                  width 50px
+                  text-align center
+                  border-radius 5px
+                  display block
+                  cursor pointer
+                  background-color #4E5058
+                  color #ffffff
+
+                  &:hover {
+                    background-color #6D6F78
+                  }
+                }
+              }
+            }
+          }
+        }
+
+      }
+    }
+
+  }
+}
+
+
+.van-theme-dark {
+  .mobile-message-reply {
+    .chat-item {
+      .triangle {
+        border-right: 5px solid #404042;
+      }
+
+      .content-box {
+        .content {
+          color #c1c1c1
+          background-color: #404042;
+
+          p > code {
+            color #c1c1c1
+            background-color #2b2b2b
+          }
+        }
+      }
+
+    }
+  }
+
+}
+</style>

web/src/components/mobile/SendMsg.vue

@@ -1,62 +0,0 @@
-<template>
-  <van-button size="small"
-              type="primary"
-              :disabled="!canSend"
-              :size="props.size"
-              @click="sendMsg">{{ btnText }}
-  </van-button>
-</template>
-
-<script setup>
-// 发送短信验证码组件
-import {ref} from "vue";
-import {validateMobile} from "@/utils/validate";
-import {ElMessage} from "element-plus";
-import {httpGet, httpPost} from "@/utils/http";
-import {showNotify} from "vant";
-
-const props = defineProps({
-  mobile: String,
-  size: String,
-});
-const btnText = ref('发送验证码')
-const canSend = ref(true)
-
-const sendMsg = () => {
-  if (!canSend.value) {
-    return
-  }
-
-  if (!validateMobile(props.mobile)) {
-    return showNotify({type: 'danger', message: '请输入合法的手机号'})
-  }
-  canSend.value = false
-  httpGet('/api/verify/token').then(res => {
-    httpPost('/api/verify/sms', {token: res.data, mobile: props.mobile}).then(() => {
-      showNotify({type: 'success', message: '短信发送成功'})
-      let time = 120
-      btnText.value = time
-      const handler = setInterval(() => {
-        time = time - 1
-        if (time <= 0) {
-          clearInterval(handler)
-          btnText.value = '重新发送'
-          canSend.value = true
-        } else {
-          btnText.value = time
-        }
-      }, 1000)
-    }).catch(e => {
-      canSend.value = true
-      showNotify({type: 'danger', message: '短信发送失败：' + e.message})
-    })
-  }).catch(e => {
-    console.log('failed to fetch token: ' + e.message)
-  })
-}
-
-</script>
-
-<style scoped>
-
-</style>

web/src/components/mobile/SendMsgMobile.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-container class="captcha-box">
+    <el-button type="primary" class="send-btn" :size="props.size" :disabled="!canSend" @click="loadCaptcha" plain>
+      {{ btnText }}
+    </el-button>
+
+    <el-dialog
+        v-model="showCaptcha"
+        :close-on-click-modal="true"
+        :show-close="false"
+        style="width:90%;max-width: 800px;"
+    >
+      <captcha-plus
+          :max-dot="maxDot"
+          :image-base64="imageBase64"
+          :thumb-base64="thumbBase64"
+          width="100%"
+          @close="showCaptcha = false"
+          @refresh="handleRequestCaptCode"
+          @confirm="handleConfirm"
+      />
+
+    </el-dialog>
+  </el-container>
+</template>
+
+<script setup>
+// 发送短信验证码组件
+import {ref} from "vue";
+import lodash from 'lodash'
+import {validateMobile} from "@/utils/validate";
+import {ElMessage} from "element-plus";
+import {httpGet, httpPost} from "@/utils/http";
+import CaptchaPlus from "@/components/CaptchaPlus.vue";
+
+const props = defineProps({
+  mobile: String,
+  size: String,
+});
+const btnText = ref('发送验证码')
+const canSend = ref(true)
+const showCaptcha = ref(false)
+const maxDot = ref(5)
+const imageBase64 = ref('')
+const thumbBase64 = ref('')
+const captKey = ref('')
+const dots = ref(null)
+
+const handleRequestCaptCode = () => {
+
+  httpGet('/api/captcha/get').then(res => {
+    const data = res.data
+    imageBase64.value = data.image
+    thumbBase64.value = data.thumb
+    captKey.value = data.key
+  }).catch(e => {
+    ElMessage.error('获取人机验证数据失败：' + e.message)
+  })
+}
+
+const handleConfirm = (dots) => {
+  if (lodash.size(dots) <= 0) {
+    return ElMessage.error('请进行人机验证再操作')
+  }
+
+  let dotArr = []
+  lodash.forEach(dots, (dot) => {
+    dotArr.push(dot.x, dot.y)
+  })
+  dots.value = dotArr.join(',')
+  httpPost('/api/captcha/check', {
+    dots: dots.value,
+    key: captKey.value
+  }).then(() => {
+    showCaptcha.value = false
+    sendMsg()
+  }).catch(() => {
+    ElMessage.error('人机验证失败')
+    handleRequestCaptCode()
+  })
+}
+
+const loadCaptcha = () => {
+  if (!validateMobile(props.mobile)) {
+    return ElMessage.error("请输入合法的手机号")
+  }
+
+  showCaptcha.value = true
+  handleRequestCaptCode() // 每次点开都刷新验证码
+}
+
+const sendMsg = () => {
+  if (!canSend.value) {
+    return
+  }
+
+  canSend.value = false
+  httpPost('/api/sms/code', {mobile: props.mobile, key: captKey.value, dots: dots.value}).then(() => {
+    ElMessage.success('短信发送成功')
+    let time = 120
+    btnText.value = time
+    const handler = setInterval(() => {
+      time = time - 1
+      if (time <= 0) {
+        clearInterval(handler)
+        btnText.value = '重新发送'
+        canSend.value = true
+      } else {
+        btnText.value = time
+      }
+    }, 1000)
+  }).catch(e => {
+    canSend.value = true
+    ElMessage.error('短信发送失败：' + e.message)
+  })
+}
+
+</script>
+
+<style lang="stylus">
+
+.captcha-box {
+  .send-btn {
+    width: 100%;
+  }
+
+  .el-dialog {
+    .el-dialog__header {
+      padding: 0;
+    }
+
+    .el-dialog__body {
+      //padding 0
+    }
+  }
+}
+</style>

web/src/views/Login.vue

@@ -55,12 +55,22 @@ import {ElMessage} from "element-plus";
 import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
 import {isMobile} from "@/utils/libs";
+import {checkSession} from "@/action/session";
 
 const router = useRouter();
 const title = ref('ChatGPT-PLUS 用户登录');
 const username = ref(process.env.VUE_APP_USER);
 const password = ref(process.env.VUE_APP_PASS);
 
+checkSession().then(() => {
+  if (isMobile()) {
+    router.replace('mobile')
+  } else {
+    router.replace('chat')
+  }
+}).catch(() => {
+})
+
 onMounted(() => {
   document.addEventListener('keyup', (e) => {
     if (e.key === 'Enter') {

web/src/views/Register.vue

@@ -64,7 +64,8 @@
                     </el-input>
                   </el-col>
                   <el-col :span="12">
-                    <send-msg size="large" :mobile="formData.mobile"/>
+                    <send-msg-mobile size="large" :mobile="formData.mobile" v-if="isMobile()"/>
+                    <send-msg size="large" :mobile="formData.mobile" v-else/>
                   </el-col>
                 </el-row>
               </div>
@@ -107,6 +108,8 @@ import {useRouter} from "vue-router";
 import FooterBar from "@/components/FooterBar.vue";
 import SendMsg from "@/components/SendMsg.vue";
 import {validateMobile} from "@/utils/validate";
+import {isMobile} from "@/utils/libs";
+import SendMsgMobile from "@/components/mobile/SendMsgMobile.vue";
 
 const router = useRouter();
 const title = ref('ChatGPT-PLUS 用户注册');

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 {httpGet, httpPost} from "@/utils/http";
-import {showConfirmDialog, showFailToast, showSuccessToast, showToast} from "vant";
+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(() => {
+  }).catch(e => {
-    showFailToast("加载系统配置失败")
+    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) => {
+const editChat = (row) => {
-  showToast('修改会话标题')
+  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) => {

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;
+          enableInput()
-          showReGenerate.value = true;
-          showStopGenerate.value = false;
           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({
+      loading.value = true
-        title: '会话提示',
+      setTimeout(() => connect(chat_id, role_id), 3000)
-        message: '当前会话已经失效，请重新登录！',
-      }).then(() => {
-        router.push('/login')
-      });
     });
   });
 
   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;
+  disableInput(false)
-  showStopGenerate.value = true;
-  showReGenerate.value = 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;
+    enableInput()
-    if (previousText.value !== '') {
-      showReGenerate.value = true;
-    }
   })
 }
 
 const reGenerate = () => {
-  canSend.value = false;
+  disableInput(false)
-  showStopGenerate.value = true;
-  showReGenerate.value = false;
   const text = '重新生成上述问题的答案：' + previousText.value;
   // 追加消息
   chatData.value.push({

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>

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"
+              v-model="form.chat_config.api_keys.OpenAI"
-              readonly
+              label="OpenAI KEY"
-              label="默认模型"
+              placeholder="OpenAI API KEY"
-              placeholder=""
-              @click="showPicker = true"
           />
           <van-field
-              v-model.number="form.chat_config.max_tokens"
+              v-model="form.chat_config.api_keys.Azure"
-              type="number"
+              label="Azure KEY"
-              name="MaxTokens"
+              placeholder="Azure API KEY"
-              label="MaxTokens"
-              placeholder="每次请求最大 token 数量"
-              :rules="[{ required: true, message: '请填写 MaxTokens' }]"
           />
           <van-field
-              v-model.number="form.chat_config.temperature"
+              v-model="form.chat_config.api_keys.ChatGLM"
-              type="number"
+              label="ChatGLM KEY"
-              name="Temperature"
+              placeholder="ChatGLM API KEY"
-              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"
           />
         </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: '',
+    api_keys: {OpenAI: "", Azure: "", ChatGLM: ""}
-    max_tokens: 0,
-    enable_context: false,
-    enable_history: false,
-    temperature: false,
-    api_key: ''
   }
 })
 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>