From 56959808a95bb5b8bfcfdf195a80cc70c3a62927 Mon Sep 17 00:00:00 2001
From: Ran_Chen <1908198662@qq.com>
Date: Wed, 16 Apr 2025 11:17:02 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=96=B0=E5=A2=9E=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E6=8C=89=E9=92=AE=E7=BB=91=E5=AE=9A=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E2=80=9C=E8=A7=92=E8=89=B2=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E2=80=9D=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AddDeviceDialog.vue        |   7 +-
 main/manager-web/src/views/roleConfig.vue     | 434 +++++++++++-------
 2 files changed, 279 insertions(+), 162 deletions(-)

diff --git a/main/manager-web/src/components/AddDeviceDialog.vue b/main/manager-web/src/components/AddDeviceDialog.vue
index bc7da372..51f5426b 100644
--- a/main/manager-web/src/components/AddDeviceDialog.vue
+++ b/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>
diff --git a/main/manager-web/src/views/roleConfig.vue b/main/manager-web/src/views/roleConfig.vue
index e71a218d..31856493 100644
--- a/main/manager-web/src/views/roleConfig.vue
+++ b/main/manager-web/src/views/roleConfig.vue
@@ -1,88 +1,126 @@
 <template>
   <div class="welcome">
-    <HeaderBar />
-    <el-main style="padding: 16px;display: flex;flex-direction: column;">
-      <div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;">
-        <div
-          style="padding: 15px 24px;font-weight: 700;font-size: 19px;text-align: left;color: #3d4566;display: flex;gap: 13px;align-items: center;">
-          <div
-            style="width: 37px;height: 37px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
-            <img loading="lazy" src="@/assets/home/setting-user.png" alt="" style="width: 19px;height: 19px;" />
-          </div>
-          {{ form.agentName }}
-        </div>
-        <div style="height: 1px;background: #e8f0ff;" />
-        <el-form ref="form" :model="form" label-width="72px">
-          <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>
+    <HeaderBar/>
+
+    <div class="operation-bar">
+      <h2 class="page-title">角色配置</h2>
+    </div>
+
+    <div class="main-wrapper">
+      <div class="content-panel">
+        <div class="content-area">
+          <el-card class="config-card" shadow="never">
+            <div class="config-header">
+              <div class="header-icon">
+                <img loading="lazy" src="@/assets/home/setting-user.png" alt="">
               </div>
-              <div>
-                <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="select-field">
-                    <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="角色音色：">
-                  <div style="display: flex;gap: 8px;align-items: center;">
-                    <div class="input-46" style="width: 100%;">
-                      <el-select v-model="form.ttsVoiceId" placeholder="请选择" style="width: 100%;">
-                        <el-option v-for="(item, index) in voiceOptions" :key="`voice-${index}`" :label="item.label"
-                          :value="item.value" />
-                      </el-select>
-                    </div>
+              <span class="header-title">{{ form.agentName }}</span>
+            </div>
+            <div class="divider"></div>
+
+            <el-form ref="form" :model="form" label-width="72px">
+              <div class="form-content">
+                <div class="form-grid">
+                  <div class="form-column">
+                    <el-form-item label="助手昵称：">
+                      <el-input v-model="form.agentName" class="form-input"/>
+                    </el-form-item>
+                    <el-form-item label="角色模版：">
+                      <div class="template-container">
+                        <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="角色介绍：">
+                      <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-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>
+          </el-card>
         </div>
       </div>
-
-    </el-main>
+    </div>
   </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: '语音识别(ASR)', key: 'asrModelId', type: 'ASR' },
-        { label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM' },
-        { label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent' },
-        { label: '记忆(Memory)', key: 'memModelId', type: 'Memory' },
-        { label: '语音合成(TTS)', key: 'ttsModelId', type: 'TTS' },
+        {label: '语音活动检测(VAD)', key: 'vadModelId', type: 'VAD'},
+        {label: '语音识别(ASR)', key: 'asrModelId', type: 'ASR'},
+        {label: '大语言模型(LLM)', key: 'llmModelId', type: 'LLM'},
+        {label: '意图识别(Intent)', key: 'intentModelId', type: 'Intent'},
+        {label: '记忆(Memory)', key: 'memModelId', type: 'Memory'},
+        {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 {
-  font-size: 10px !important;
-  color: #3d4566 !important;
-  font-weight: 400;
-  line-height: 22px;
-  padding-bottom: 2px;
+.operation-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
 }
 
-.select-field {
-  width: 100%;
-  max-width: 720px;
-  border: 1px solid #e4e6ef;
-  background: #f6f8fb;
-  border-radius: 8px;
-  height: 36px !important;
+.page-title {
+  font-size: 24px;
+  margin: 0;
+  color: #2c3e50;
 }
 
-.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;
-  border-radius: 20px;
-  border: 1px solid #e4e6ef;
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  border-radius: 15px;
+  background: transparent;
+  border: 1px solid #fff;
 }
 
-.clear-btn {
-  width: 48px;
-  height: 19px;
-  background: #fd8383;
-  border-radius: 10px;
-  line-height: 19px;
-  font-size: 11px;
-  color: #fff;
-  cursor: pointer;
+.content-area {
+  flex: 1;
+  height: 100%;
+  min-width: 600px;
+  overflow: auto;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
 }
 
-.clear-text {
-  color: #979db1;
-  font-size: 11px;
+.config-card {
+  background: white;
+  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 {
-  margin-bottom: 4px;
+.action-bar {
   display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
   align-items: center;
-}
-
-.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
+  gap: 8px;
 }
 
 .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 {
-  border: 1px solid #e4e6ef;
-  border-radius: 8px;
-  background: #f6f8fb;
+.hint-text {
+  display: flex;
+  align-items: center;
+  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>
\ No newline at end of file