Optimize the UI of config dialoy

web/src/components/ConfigDialog.vue

@@ -8,14 +8,14 @@
       title="聊天配置"
   >
     <div class="user-info">
-      <el-input v-model="user['api_key']" placeholder="填写你 OpenAI 的 API KEY">
+      <el-input :value="user['api_key']" placeholder="填写你 OpenAI 的 API KEY">
         <template #prepend>API KEY</template>
       </el-input>
 
       <el-descriptions
           class="margin-top"
           title="账户信息"
-          :column="2"
+          :column="col"
           border
       >
 
@@ -125,8 +125,7 @@ import {
   UserFilled,
   Histogram
 } from '@element-plus/icons-vue'
-import {getLoginUser} from "@/utils/storage";
-import {dateFormat} from "@/utils/libs";
+import {isMobile} from "@/utils/libs";
 
 export default defineComponent({
   name: 'ConfigDialog',
@@ -135,11 +134,16 @@ export default defineComponent({
     show: {
       type: Boolean,
       default: true
+    },
+    user: {
+      type: Object,
+      default() {
+        return {}
+      },
     }
   },
   data() {
     return {
-      user: {},
       wechatGroup: "https://img.r9it.com/chatgpt/wechat-group.jpeg",
       wechatCard: "https://img.r9it.com/chatgpt/wechat-card.jpeg"
     }
@@ -151,16 +155,14 @@ export default defineComponent({
       } else {
         return '15vh';
       }
+    },
+    
+    col: function () {
+      return isMobile() ? 1 : 2;
     }
   },
   mounted() {
-    // 获取用户信息
-    const data = getLoginUser();
-    if (data !== null) {
-      this.user = data["user"];
-      this.user['active_time'] = dateFormat(this.user['active_time']);
-      this.user['expired_time'] = dateFormat(this.user['expired_time']);
-    }
+
   },
   methods: {
     save: function () {

web/src/utils/storage.js

@@ -1,4 +1,6 @@
 /* eslint-disable no-constant-condition */
+import {dateFormat} from "@/utils/libs";
+
 /**
  * storage handler
  */
@@ -22,4 +24,15 @@ export function getLoginUser() {
 
 export function setLoginUser(user) {
     sessionStorage.setItem(SessionUserKey, JSON.stringify(user))
+}
+
+export function getUserInfo() {
+    const data = getLoginUser();
+    if (data !== null) {
+        const user = data["user"];
+        user['active_time'] = dateFormat(user['active_time']);
+        user['expired_time'] = dateFormat(user['expired_time']);
+        return user;
+    }
+    return {}
 }

web/src/views/Chat.vue

@@ -21,7 +21,7 @@
           </el-icon>
         </el-button>
 
-        <el-button type="info" size="small" class="config" ref="send-btn" circle @click="showConnectDialog = true">
+        <el-button type="info" size="small" class="config" ref="send-btn" circle @click="configDialog">
           <el-icon>
             <Tools/>
           </el-icon>
@@ -65,7 +65,7 @@
 
     </div><!-- end container -->
 
-    <config-dialog v-model:show="showConnectDialog"></config-dialog>
+    <config-dialog v-model:show="showConfigDialog" :user="userInfo"></config-dialog>
 
     <div class="token-dialog">
       <el-dialog
@@ -107,7 +107,7 @@ import {ElMessage, ElMessageBox} from 'element-plus'
 import {Tools, Lock, Delete} from '@element-plus/icons-vue'
 import ConfigDialog from '@/components/ConfigDialog.vue'
 import {httpPost, httpGet} from "@/utils/http";
-import {getSessionId, setLoginUser} from "@/utils/storage";
+import {getSessionId, getUserInfo, setLoginUser} from "@/utils/storage";
 import hl from 'highlight.js'
 import 'highlight.js/styles/a11y-dark.css'
 
@@ -123,8 +123,11 @@ export default defineComponent({
       role: 'gpt',
       inputValue: '', // 聊天内容
       chatBoxHeight: 0, // 聊天内容框高度
-      showConnectDialog: false,
+
+      showConfigDialog: false,
+      userInfo: {},
       showLoginDialog: false,
+
       token: '', // 会话 token
       replyIcon: 'images/avatar/gpt.png', // 回复信息的头像
 
@@ -159,6 +162,10 @@ export default defineComponent({
   },
 
   methods: {
+    configDialog: function () {
+      this.showConfigDialog = true;
+      this.userInfo = getUserInfo();
+    },
     // 创建 socket 会话连接
     connect: function () {
       // 初始化 WebSocket 对象
@@ -240,26 +247,6 @@ export default defineComponent({
       httpGet("/api/session/get").then(() => {
         // 自动重新连接
         this.connect();
-        // if (this.connectingMessageBox === null) {
-        //   this.connectingMessageBox = ElMessageBox.confirm(
-        //       '^_^ 会话发生异常，您已经从服务器断开连接!',
-        //       '注意：',
-        //       {
-        //         confirmButtonText: '重连会话',
-        //         cancelButtonText: '不聊了',
-        //         type: 'warning',
-        //         showClose: false,
-        //         closeOnClickModal: false
-        //       }
-        //   ).then(() => {
-        //     this.connect();
-        //   }).catch(() => {
-        //     ElMessage({
-        //       type: 'info',
-        //       message: '您关闭了会话',
-        //     })
-        //   })
-        // }
       }).catch((res) => {
         if (res.code === 400) {
           this.showLoginDialog = true;

web/src/views/ChatPlus.vue

@@ -19,7 +19,7 @@
                 </span>
                 <template #dropdown>
                   <el-dropdown-menu>
-                    <el-dropdown-item @click="showConnectDialog = true">
+                    <el-dropdown-item @click="configDialog()">
                       <el-icon>
                         <Tools/>
                       </el-icon>
@@ -135,7 +135,7 @@
       </div>
     </el-row>
 
-    <config-dialog v-model:show="showConnectDialog"></config-dialog>
+    <config-dialog v-model:show="showConfigDialog" :user="userInfo"></config-dialog>
 
     <div class="token-dialog">
       <el-dialog
@@ -189,7 +189,7 @@ import {
 } from '@element-plus/icons-vue'
 import ConfigDialog from '@/components/ConfigDialog.vue'
 import {httpPost, httpGet} from "@/utils/http";
-import {getSessionId, setLoginUser} from "@/utils/storage";
+import {getSessionId, getUserInfo, setLoginUser} from "@/utils/storage";
 import hl from 'highlight.js'
 import 'highlight.js/styles/a11y-dark.css'
 
@@ -218,7 +218,10 @@ export default defineComponent({
       allChatRoles: [], // 所有角色集合
       role: 'gpt',
       inputValue: '', // 聊天内容
-      showConnectDialog: false,
+
+      showConfigDialog: false, // 显示配置对话框
+      userInfo: {},
+
       showLoginDialog: false,
       token: '', // 会话 token
       replyIcon: 'images/avatar/gpt.png', // 回复信息的头像
@@ -258,6 +261,11 @@ export default defineComponent({
   },
 
   methods: {
+    configDialog() {
+      this.showConfigDialog = true
+      this.userInfo = getUserInfo();
+    },
+
     resizeElement: function () {
       this.chatBoxHeight = window.innerHeight - 61 - 115 - 38;
       this.mainWinHeight = window.innerHeight - 61;