put model and app selector on the top of chat page

CHANGELOG.md

@@ -4,6 +4,7 @@
 * 功能优化：聊天输入框会随着输入内容的增多自动调整高度
 * Bug修复：修复移动端聊天页面模型切换不生效的Bug
 * 功能优化：给PC端扫码支付增加签名验证和有效期验证
+* Bug修复：修复支付码生成API权限控制的问题
 
 ## v4.0.7
 

web/src/assets/css/chat-plus.styl

@@ -135,6 +135,34 @@ $borderColor = #4676d0;
         background-color: var(--el-bg-color)
         color var(--el-text-color-primary)
 
+        .chat-config {
+          height 30px
+          padding 10px 30px
+          display flex
+          justify-content center
+          justify-items center
+          border-bottom 1px solid #d9d9e3
+
+          .role-select-label {
+            color #ffffff
+          }
+
+          .el-select {
+            max-width 150px;
+            margin-right 10px;
+          }
+
+          .role-select {
+            max-width 130px;
+          }
+
+          .el-button {
+            .el-icon {
+              margin-right 5px;
+            }
+          }
+        }
+
         #container {
           overflow: hidden;
           width: 100%;

web/src/views/ChatPlus.vue

@@ -66,41 +66,6 @@
       </el-aside>
       <el-main v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.3)">
         <div class="chat-container">
-          <div>
-            <div id="container" :style="{height: mainWinHeight+'px'}">
-              <div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
-                <div v-if="showHello">
-                  <welcome @send="autofillPrompt"/>
-                </div>
-                <div v-for="item in chatData" :key="item.id" v-else>
-                  <chat-prompt
-                      v-if="item.type==='prompt'"
-                      :icon="item.icon"
-                      :created-at="dateFormat(item['created_at'])"
-                      :tokens="item['tokens']"
-                      :model="getModelValue(modelID)"
-                      :content="item.content"/>
-                  <chat-reply v-else-if="item.type==='reply'" :data="item" @regen="reGenerate" :read-only="false"/>
-                </div>
-              </div><!-- end chat box -->
-
-              <div class="input-box">
-                <div class="input-box-inner">
-                  <span class="tool-item">
-                      <el-popover
-                          :width="300"
-                          trigger="click"
-                          placement="top-start"
-                      >
-                        <template #reference>
-                          <div>
-                            <el-tooltip effect="dark" content="模型选择">
-                              <i class="iconfont icon-model"></i>
-                            </el-tooltip>
-                          </div>
-                        </template>
-
-                        <template #default>
           <div class="chat-config">
             <el-select v-model="roleId" filterable placeholder="角色" @change="_newChat"
                        class="role-select"
@@ -135,10 +100,27 @@
               </el-option>
             </el-select>
           </div>
-                        </template>
-                      </el-popover>
-                  </span>
 
+          <div>
+            <div id="container" :style="{height: mainWinHeight+'px'}">
+              <div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
+                <div v-if="showHello">
+                  <welcome @send="autofillPrompt"/>
+                </div>
+                <div v-for="item in chatData" :key="item.id" v-else>
+                  <chat-prompt
+                      v-if="item.type==='prompt'"
+                      :icon="item.icon"
+                      :created-at="dateFormat(item['created_at'])"
+                      :tokens="item['tokens']"
+                      :model="getModelValue(modelID)"
+                      :content="item.content"/>
+                  <chat-reply v-else-if="item.type==='reply'" :data="item" @regen="reGenerate" :read-only="false"/>
+                </div>
+              </div><!-- end chat box -->
+
+              <div class="input-box">
+                <div class="input-box-inner">
                   <span class="tool-item" @click="ElMessage.info('暂时不支持语音输入')">
                     <el-tooltip class="box-item" effect="dark" content="语音输入">
                       <i class="iconfont icon-mic-bold"></i>
@@ -376,8 +358,8 @@ const getRoleById = function (rid) {
 }
 
 const resizeElement = function () {
-  chatBoxHeight.value = window.innerHeight - 50 - 82 - 38;
+  chatBoxHeight.value = window.innerHeight - 101 - 82 - 38;
-  mainWinHeight.value = window.innerHeight - 50;
+  mainWinHeight.value = window.innerHeight - 101;
   leftBoxHeight.value = window.innerHeight - 90 - 45 - 82;
 };
 
@@ -944,29 +926,4 @@ const insertURL = (url) => {
     }
   }
 }
-
-.chat-config {
-  display flex
-  flex-direction row
-  padding-top 10px;
-
-  .role-select-label {
-    color #ffffff
-  }
-
-  .el-select {
-    max-width 150px;
-    margin-right 10px;
-  }
-
-  .role-select {
-    max-width 130px;
-  }
-
-  .el-button {
-    .el-icon {
-      margin-right 5px;
-    }
-  }
-}
 </style>