Merge pull request #831 from xinnan-tech/web-pages-modify

Web pages modify

main/manager-web/src/components/AddDeviceDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible.sync="visible" width="400px" center>
+  <el-dialog :visible="visible" @close="handleClose" width="400px" center>
     <div
       style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
       <div
@@ -79,7 +79,10 @@ export default {
     cancel() {
       this.$emit('update:visible', false)
       this.deviceCode = ""
-    }
+    },
+    handleClose() {
+      this.$emit('update:visible', false);
+    },
   }
 }
 </script>

main/manager-web/src/views/DeviceManagement.vue

@@ -115,8 +115,8 @@ export default {
       activeSearchKeyword: "",
       currentAgentId: this.$route.query.agentId || '',
       currentPage: 1,
-      pageSize: 5,
+      pageSize: 10,
-      pageSizeOptions: [5, 10, 20, 50, 100],
+      pageSizeOptions: [10, 20, 50, 100],
       deviceList: [],
       loading: false,
       userApi: null,
@@ -283,13 +283,18 @@ export default {
           this.deviceList = data.data.map(device => {
             const bindDate = new Date(device.createDate);
             const formattedBindTime = `${bindDate.getFullYear()}-${(bindDate.getMonth() + 1).toString().padStart(2, '0')}-${bindDate.getDate().toString().padStart(2, '0')} ${bindDate.getHours().toString().padStart(2, '0')}:${bindDate.getMinutes().toString().padStart(2, '0')}:${bindDate.getSeconds().toString().padStart(2, '0')}`;
+            let formattedLastConversation = '';
+            if (device.lastConnectedAt) {
+              const lastConvoDate = new Date(device.lastConnectedAt);
+              formattedLastConversation = `${lastConvoDate.getFullYear()}-${(lastConvoDate.getMonth() + 1).toString().padStart(2, '0')}-${lastConvoDate.getDate().toString().padStart(2, '0')} ${lastConvoDate.getHours().toString().padStart(2, '0')}:${lastConvoDate.getMinutes().toString().padStart(2, '0')}:${lastConvoDate.getSeconds().toString().padStart(2, '0')}`;
+            }
             return {
               device_id: device.id,
               model: device.board,
               firmwareVersion: device.appVersion,
               macAddress: device.macAddress,
               bindTime: formattedBindTime,
-              lastConversation: device.lastConnectedAt,
+              lastConversation: formattedLastConversation,
               remark: device.alias,
               isEdit: false,
               otaSwitch: device.autoUpdate === 1,
@@ -331,7 +336,7 @@ export default {
 .main-wrapper {
   margin: 5px 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 200px);
+  min-height: calc(100vh - 24vh);
   height: auto;
   max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -628,12 +633,12 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 330px);
+  max-height: calc(100vh - 40vh);
 }
 
 :deep(.el-table__body-wrapper) {
   flex: 1;
-  overflow: auto;
+  overflow-y: auto;
   max-height: none !important;
 }
 

main/manager-web/src/views/ModelConfig.vue

@@ -152,7 +152,7 @@ export default {
       ttsDialogVisible: false,
       selectedTtsModelId: '',
       modelList: [],
-      pageSizeOptions: [5, 10, 20, 50, 100],
+      pageSizeOptions: [10, 20, 50, 100],
       currentPage: 1,
       pageSize: 10,
       total: 0,
@@ -461,7 +461,7 @@ export default {
 .main-wrapper {
   margin: 5px 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 235px);
+  min-height: calc(100vh - 24vh);
   height: auto;
   max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -656,7 +656,6 @@ export default {
 }
 
 .table-footer {
-  margin-top: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -904,7 +903,7 @@ export default {
 }
 
 .data-table {
-  --table-max-height: calc(100vh - 450px);
+  --table-max-height: calc(100vh - 45vh);
   max-height: var(--table-max-height);
 }
 

main/manager-web/src/views/ParamsManagement.vue

@@ -92,8 +92,8 @@ export default {
             searchCode: "",
             paramsList: [],
             currentPage: 1,
-            pageSize: 5,
+            pageSize: 10,
-            pageSizeOptions: [5, 10, 20, 50, 100],
+            pageSizeOptions: [10, 20, 50, 100],
             total: 0,
             dialogVisible: false,
             dialogTitle: "新增参数",
@@ -330,7 +330,7 @@ export default {
 .main-wrapper {
   margin: 5px 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 350px);
+  min-height: calc(100vh - 24vh);
   height: auto;
   max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -516,7 +516,7 @@ export default {
     flex-direction: column;
     .el-table__body-wrapper {
       flex: 1;
-      overflow: auto;
+      overflow-y: auto;
       max-height: none !important;
     }
 
@@ -649,7 +649,7 @@ export default {
 }
 
 .el-table {
-  --table-max-height: calc(100vh - 400px);
+  --table-max-height: calc(100vh - 40vh);
   max-height: var(--table-max-height);
 
   .el-table__body-wrapper {

main/manager-web/src/views/UserManagement.vue

@@ -99,9 +99,9 @@ export default {
       currentPassword: "",
       searchPhone: "",
       userList: [],
-      pageSizeOptions: [5, 10, 20, 50, 100],
+      pageSizeOptions: [10, 20, 50, 100],
       currentPage: 1,
-      pageSize: 5,
+      pageSize: 10,
       total: 0,
       isAllSelected: false
     };
@@ -355,7 +355,7 @@ export default {
 .main-wrapper {
   margin: 5px 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 350px);
+  min-height: calc(100vh - 24vh);
   height: auto;
   max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
@@ -557,7 +557,7 @@ export default {
   flex-direction: column;
   .el-table__body-wrapper {
     flex: 1;
-    overflow: auto;
+    overflow-y: auto;
     max-height: none !important;
   }
 
@@ -674,7 +674,7 @@ export default {
 }
 
 .el-table {
-  --table-max-height: calc(100vh - 400px);
+  --table-max-height: calc(100vh - 40vh);
   max-height: var(--table-max-height);
 
   .el-table__body-wrapper {

main/manager-web/src/views/roleConfig.vue

@@ -1,88 +1,126 @@
 <template>
   <div class="welcome">
-    <HeaderBar />
+    <HeaderBar/>
-    <el-main style="padding: 16px;display: flex;flex-direction: column;">
+
-      <div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;">
+    <div class="operation-bar">
-        <div
+      <h2 class="page-title">角色配置</h2>
-          style="padding: 15px 24px;font-weight: 700;font-size: 19px;text-align: left;color: #3d4566;display: flex;gap: 13px;align-items: center;">
+    </div>
-          <div
+
-            style="width: 37px;height: 37px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
+    <div class="main-wrapper">
-            <img loading="lazy" src="@/assets/home/setting-user.png" alt="" style="width: 19px;height: 19px;" />
+      <div class="content-panel">
-          </div>
+        <div class="content-area">
-          {{ form.agentName }}
+          <el-card class="config-card" shadow="never">
-        </div>
+            <div class="config-header">
-        <div style="height: 1px;background: #e8f0ff;" />
+              <div class="header-icon">
-        <el-form ref="form" :model="form" label-width="72px">
+                <img loading="lazy" src="@/assets/home/setting-user.png" alt="">
-          <div style="padding: 16px 24px;">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
-              <div>
-                <el-form-item label="助手昵称：">
-                  <div class="input-46" style="width: 100%;">
-                    <el-input v-model="form.agentName" />
-                  </div>
-                </el-form-item>
-                <el-form-item label="角色模版：">
-                  <div style="display: flex;gap: 8px;flex-wrap: wrap;">
-                    <div v-for="(template, index) in templates" :key="`template-${index}`" class="template-item"
-                      :class="{ 'template-loading': loadingTemplate }" @click="selectTemplate(template)">
-                      {{ template.agentName }}
-                    </div>
-                  </div>
-                </el-form-item>
-                <el-form-item label="角色介绍：">
-                  <div class="textarea-box">
-                    <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.systemPrompt"
-                      maxlength="2000" show-word-limit />
-                  </div>
-                </el-form-item>
-                <el-form-item label="语言编码：">
-                  <div class="input-46" style="width: 100%;">
-                    <el-input v-model="form.langCode" placeholder="请输入语言编码，如：zh_CN" maxlength="10" show-word-limit />
-                  </div>
-                </el-form-item>
-                <el-form-item label="交互语种：">
-                  <div class="input-46" style="width: 100%;">
-                    <el-input v-model="form.language" placeholder="请输入交互语种，如：中文" maxlength="10" show-word-limit />
-                  </div>
-                </el-form-item>
               </div>
-              <div>
+              <span class="header-title">{{ form.agentName }}</span>
-                <el-form-item v-for="(model, index) in models" :key="`model-${index}`" :label="model.label"
+            </div>
-                  class="model-item">
+            <div class="divider"></div>
-                  <el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="select-field">
+
-                    <el-option v-for="(item, optionIndex) in modelOptions[model.type]"
+            <el-form ref="form" :model="form" label-width="72px">
-                      :key="`option-${index}-${optionIndex}`" :label="item.label" :value="item.value" />
+              <div class="form-content">
-                  </el-select>
+                <div class="form-grid">
-                </el-form-item>
+                  <div class="form-column">
-                <el-form-item label="角色音色：">
+                    <el-form-item label="助手昵称：">
-                  <div style="display: flex;gap: 8px;align-items: center;">
+                      <el-input v-model="form.agentName" class="form-input"/>
-                    <div class="input-46" style="width: 100%;">
+                    </el-form-item>
-                      <el-select v-model="form.ttsVoiceId" placeholder="请选择" style="width: 100%;">
+                    <el-form-item label="角色模版：">
-                        <el-option v-for="(item, index) in voiceOptions" :key="`voice-${index}`" :label="item.label"
+                      <div class="template-container">
-                          :value="item.value" />
+                        <div
-                      </el-select>
+                            v-for="(template, index) in templates"
-                    </div>
+                            :key="`template-${index}`"
+                            class="template-item"
+                            :class="{ 'template-loading': loadingTemplate }"
+                            @click="selectTemplate(template)"
+                        >
+                          {{ template.agentName }}
+                        </div>
+                      </div>
+                    </el-form-item>
+                    <el-form-item label="角色介绍：">
+                      <el-input
+                          type="textarea"
+                          rows="5"
+                          resize="none"
+                          placeholder="请输入内容"
+                          v-model="form.systemPrompt"
+                          maxlength="2000"
+                          show-word-limit
+                          class="form-textarea"
+                      />
+                    </el-form-item>
+                    <el-form-item label="语言编码：">
+                      <el-input
+                          v-model="form.langCode"
+                          placeholder="请输入语言编码，如：zh_CN"
+                          maxlength="10"
+                          show-word-limit
+                          class="form-input"
+                      />
+                    </el-form-item>
+                    <el-form-item label="交互语种：">
+                      <el-input
+                          v-model="form.language"
+                          placeholder="请输入交互语种，如：中文"
+                          maxlength="10"
+                          show-word-limit
+                          class="form-input"
+                      />
+                    </el-form-item>
                   </div>
-                </el-form-item>
+                  <div class="form-column">
+                    <el-form-item
+                        v-for="(model, index) in models"
+                        :key="`model-${index}`"
+                        :label="model.label"
+                        class="model-item"
+                    >
+                      <el-select
+                          v-model="form.model[model.key]"
+                          filterable
+                          placeholder="请选择"
+                          class="form-select"
+                      >
+                        <el-option
+                            v-for="(item, optionIndex) in modelOptions[model.type]"
+                            :key="`option-${index}-${optionIndex}`"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="角色音色：">
+                      <el-select
+                          v-model="form.ttsVoiceId"
+                          placeholder="请选择"
+                          class="form-select"
+                      >
+                        <el-option
+                            v-for="(item, index) in voiceOptions"
+                            :key="`voice-${index}`"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                </div>
+              </div>
+            </el-form>
+
+            <div class="action-bar">
+              <el-button type="primary" class="save-btn" @click="saveConfig">保存配置</el-button>
+              <el-button class="reset-btn" @click="resetConfig">重置</el-button>
+              <div class="hint-text">
+                <img loading="lazy" src="@/assets/home/red-info.png" alt="">
+                <span>保存配置后，需要重启设备，新的配置才会生效。</span>
               </div>
             </div>
-          </div>
+          </el-card>
-        </el-form>
-        <div style="display: flex;padding: 16px;gap: 8px;align-items: center;">
-          <div class="save-btn" @click="saveConfig">
-            保存配置
-          </div>
-          <div class="reset-btn" @click="resetConfig">
-            重制
-          </div>
-          <div class="clear-text">
-            <img loading="lazy" src="@/assets/home/red-info.png" alt="" style="width: 19px;height: 19px;" />
-            保存配置后，需要重启设备，新的配置才会生效。
-          </div>
         </div>
       </div>
-
+    </div>
-    </el-main>
   </div>
 </template>
 
@@ -90,10 +128,9 @@
 import Api from '@/apis/api';
 import HeaderBar from "@/components/HeaderBar.vue";
 
-
 export default {
   name: 'RoleConfigPage',
-  components: { HeaderBar },
+  components: {HeaderBar},
   data() {
     return {
       form: {
@@ -114,12 +151,12 @@ export default {
         }
       },
       models: [
-        { label: '语音活动检测(VAD)', key: 'vadModelId', type: 'VAD' },
+        {label: '语音活动检测(VAD)', key: 'vadModelId', type: 'VAD'},
-        { label: '语音识别(ASR)', key: 'asrModelId', type: 'ASR' },
+        {label: '语音识别(ASR)', key: 'asrModelId', type: 'ASR'},
-        { label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM' },
+        {label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM'},
-        { label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent' },
+        {label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent'},
-        { label: '记忆(Memory)', key: 'memModelId', type: 'Memory' },
+        {label: '记忆(Memory)', key: 'memModelId', type: 'Memory'},
-        { label: '语音合成(TTS)', key: 'ttsModelId', type: 'TTS' },
+        {label: '语音合成(TTS)', key: 'ttsModelId', type: 'TTS'},
       ],
       modelOptions: {},
       templates: [],
@@ -144,7 +181,7 @@ export default {
         language: this.form.language,
         sort: this.form.sort
       };
-      Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({ data }) => {
+      Api.agent.updateAgentConfig(this.$route.query.agentId, configData, ({data}) => {
         if (data.code === 0) {
           this.$message.success({
             message: '配置保存成功',
@@ -164,7 +201,6 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        // 重置表单
         this.form = {
           agentCode: "",
           agentName: "",
@@ -187,10 +223,10 @@ export default {
           showClose: true
         })
       }).catch(() => {
-      })
+      });
     },
     fetchTemplates() {
-      Api.agent.getAgentTemplate(({ data }) => {
+      Api.agent.getAgentTemplate(({data}) => {
         if (data.code === 0) {
           this.templates = data.data;
         } else {
@@ -235,7 +271,7 @@ export default {
       };
     },
     fetchAgentConfig(agentId) {
-      Api.agent.getDeviceConfig(agentId, ({ data }) => {
+      Api.agent.getDeviceConfig(agentId, ({data}) => {
         if (data.code === 0) {
           this.form = {
             ...this.form,
@@ -255,9 +291,8 @@ export default {
       });
     },
     fetchModelOptions() {
-      // 为每个模型类型获取选项
       this.models.forEach(model => {
-        Api.model.getModelNames(model.type, '', ({ data }) => {
+        Api.model.getModelNames(model.type, '', ({data}) => {
           if (data.code === 0) {
             this.$set(this.modelOptions, model.type, data.data.map(item => ({
               value: item.id,
@@ -274,7 +309,7 @@ export default {
         this.voiceOptions = [];
         return;
       }
-      Api.model.getModelVoices(modelId, '', ({ data }) => {
+      Api.model.getModelVoices(modelId, '', ({data}) => {
         if (data.code === 0 && data.data) {
           this.voiceOptions = data.data.map(voice => ({
             value: voice.id,
@@ -289,7 +324,6 @@ export default {
   watch: {
     'form.model.ttsModelId': {
       handler(newVal, oldVal) {
-        console.log('TTS模型变化:', newVal);
         if (oldVal && newVal !== oldVal) {
           this.form.ttsVoiceId = '';
           this.fetchVoiceOptions(newVal);
@@ -325,60 +359,130 @@ export default {
   min-height: 506px;
   height: 100vh;
   display: flex;
+  position: relative;
   flex-direction: column;
-  background: linear-gradient(145deg, #e6eeff, #eff0ff);
+  background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd);
   background-size: cover;
-  /* 确保背景图像覆盖整个元素 */
-  background-position: center;
-  /* 从顶部中心对齐 */
   -webkit-background-size: cover;
-  /* 兼容老版本WebKit浏览器 */
   -o-background-size: cover;
-  /* 兼容老版本Opera浏览器 */
+  overflow: hidden;
 }
 
-.el-form-item ::v-deep .el-form-item__label {
+.operation-bar {
-  font-size: 10px !important;
+  display: flex;
-  color: #3d4566 !important;
+  justify-content: space-between;
-  font-weight: 400;
+  align-items: center;
-  line-height: 22px;
+  padding: 16px 24px;
-  padding-bottom: 2px;
 }
 
-.select-field {
+.page-title {
-  width: 100%;
+  font-size: 24px;
-  max-width: 720px;
+  margin: 0;
-  border: 1px solid #e4e6ef;
+  color: #2c3e50;
-  background: #f6f8fb;
-  border-radius: 8px;
-  height: 36px !important;
 }
 
-.audio-box {
+.main-wrapper {
+  margin: 5px 22px;
+  border-radius: 15px;
+  height: calc(100vh - 24vh);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+  background: rgba(237, 242, 255, 0.5);
+  display: flex;
+  flex-direction: column;
+}
+
+.content-panel {
   flex: 1;
-  height: 37px;
+  display: flex;
-  border-radius: 20px;
+  overflow: hidden;
-  border: 1px solid #e4e6ef;
+  height: 100%;
+  border-radius: 15px;
+  background: transparent;
+  border: 1px solid #fff;
 }
 
-.clear-btn {
+.content-area {
-  width: 48px;
+  flex: 1;
-  height: 19px;
+  height: 100%;
-  background: #fd8383;
+  min-width: 600px;
-  border-radius: 10px;
+  overflow: auto;
-  line-height: 19px;
+  background-color: white;
-  font-size: 11px;
+  display: flex;
-  color: #fff;
+  flex-direction: column;
-  cursor: pointer;
 }
 
-.clear-text {
+.config-card {
-  color: #979db1;
+  background: white;
-  font-size: 11px;
+  border: none;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.config-header {
   display: flex;
   align-items: center;
+  gap: 13px;
+  padding: 5px 0;
+  font-weight: 700;
+  font-size: 19px;
+  color: #3d4566;
+}
+
+.header-icon {
+  width: 37px;
+  height: 37px;
+  background: #5778ff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-icon img {
+  width: 19px;
+  height: 19px;
+}
+
+.divider {
+  height: 1px;
+  background: #e8f0ff;
+}
+
+.form-content {
+  padding: 16px 0;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.form-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.form-select {
+  width: 100%;
+}
+
+.form-textarea {
+  width: 100%;
+}
+
+.template-container {
+  display: flex;
   gap: 8px;
-  margin-left: 16px;
+  flex-wrap: wrap;
 }
 
 .template-item {
@@ -399,47 +503,57 @@ export default {
   background-color: #d0d8ff;
 }
 
-.prompt-bottom {
+.action-bar {
-  margin-bottom: 4px;
   display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
   align-items: center;
-}
+  gap: 8px;
-
-.input-46 {
-  border: 1px solid #e4e6ef;
-  background: #f6f8fb;
-  border-radius: 8px;
-  height: 36px !important;
-}
-
-.save-btn,
-.reset-btn {
-  width: 112px;
-  height: 37px;
-  border-radius: 18px;
-  line-height: 37px;
-  box-sizing: border-box;
-  cursor: pointer;
-  font-size: 11px
 }
 
 .save-btn {
-  border-radius: 18px;
   background: #5778ff;
-  color: #fff;
+  color: white;
+  border: none;
+  border-radius: 18px;
+  padding: 10px 20px;
 }
 
 .reset-btn {
-  border: 1px solid #adbdff;
   background: #e6ebff;
   color: #5778ff;
+  border: 1px solid #adbdff;
+  border-radius: 18px;
+  padding: 10px 20px;
 }
 
-.textarea-box {
+.hint-text {
-  border: 1px solid #e4e6ef;
+  display: flex;
-  border-radius: 8px;
+  align-items: center;
-  background: #f6f8fb;
+  gap: 8px;
+  color: #979db1;
+  font-size: 11px;
+  margin-left: 16px;
 }
-</style>
+
+.hint-text img {
+  width: 19px;
+  height: 19px;
+}
+
+::v-deep .el-form-item__label {
+  font-size: 10px !important;
+  color: #3d4566 !important;
+  font-weight: 400;
+  line-height: 22px;
+  padding-bottom: 2px;
+}
+
+::v-deep .el-textarea .el-input__count {
+  color: #909399;
+  background: none;
+  position: absolute;
+  font-size: 12px;
+  bottom: -10px;
+  right: 21px;
+}
+
+</style>