优化了各个界面

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible.sync="dialogVisible" width="700px" @close="handleClose" class="compact-dialog" :append-to-body="true">
+  <el-dialog :visible.sync="dialogVisible" width="900px" @close="handleClose" class="compact-dialog" :append-to-body="true">
     <el-form :model="voiceForm" :rules="rules" ref="voiceForm" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12">
@@ -30,7 +30,14 @@
         <el-input v-model="voiceForm.remark" type="textarea" :rows="2" placeholder="请输入内容" class="compact-textarea"
         ></el-input>
         <div class="audio-controls">
-          <span class="counter">000 / 001</span>
+           <div class="audio-player">
+      <audio
+        :src="audioUrl"
+        controls
+        preload="metadata"
+        class="custom-audio"
+      ></audio>
+    </div>
           <el-button type="primary" size="mini" class="preview-btn">生成试听</el-button>
         </div>
       </el-form-item>
@@ -62,6 +69,8 @@ export default {
     return {
       dialogVisible: this.showDialog,
       voiceForm: { ...this.voiceData },
+      audioUrl: 'http://music.163.com/song/media/outer/url?id=447925558.mp3',
+      generatedAudio: null,
       rules: {
         voiceCode: [{ required: true, message: '请输入音色编码', trigger: 'blur' }],
         voiceName: [{ required: true, message: '请输入音色名称', trigger: 'blur' }]
@@ -83,7 +92,7 @@ export default {
       this.$refs.voiceForm.validate(valid => {
         if (valid) this.$emit('save', this.voiceForm)
       })
-    }
+    },
   }
 }
 </script>
@@ -117,13 +126,10 @@ export default {
   .audio-controls {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
+    gap: 16px;
     margin-top: 8px;
 
-    .counter {
-      color: #909399;
-      font-size: 12px;
-    }
 
     .preview-btn {
       padding: 7px 15px;

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

@@ -8,10 +8,10 @@
           <img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
           智能体管理
         </div>
-        <div class="equipment-management2" @click="goUserManagement">
+        <div class="equipment-management2" :class="{ 'active-tab': $route.path === '/user-management' }" @click="goUserManagement">
           用户管理
         </div>
-        <div class="equipment-management2" @click="goModelConfig">
+        <div class="equipment-management2" :class="{ 'active-tab': $route.path === '/model-config' }" @click="goModelConfig">
           模型配置
         </div>
       </div>
@@ -124,6 +124,12 @@ export default {
   color: #3d4566;
   margin-left: 1px;
   align-items: center;
+  transition: all 0.3s ease;
+}
+
+.equipment-management2.active-tab {
+  background: #5778ff !important;
+  color: #fff !important;
 }
 
 .header {

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

@@ -1,7 +1,7 @@
 <template>
   <el-dialog :visible.sync="dialogVisible" width="800px" center>
-    <el-form :model="form" ref="form" label-width="120px">
+    <el-form :model="form" ref="form" label-width="70px">
-      <el-row :gutter="20">
+      <el-row :gutter="20" class="form-row">
         <el-col :span="12">
           <el-form-item label="模型编码">
             <el-input v-model="form.code" placeholder="请输入内容" />
@@ -15,9 +15,9 @@
       </el-row>
 
       <!-- 供应商 -->
-      <el-row :gutter="20">
+      <el-row :gutter="20" class="form-row">
         <el-col :span="12">
-          <el-form-item label="供应商">
+          <el-form-item label="供应器">
             <el-select v-model="form.supplier" placeholder="请选择">
               <el-option label="openai" value="openai" />
               <el-option label="dify" value="dify" />
@@ -27,9 +27,9 @@
         <el-col :span="12">
            <el-form-item>
             <div style="display: flex; align-items: center;">
-              <span class="el-form-item__label" style="width: 120px;">设成默认</span>
+              <span class="el-form-item__label" style="width: 70px;">设成默认</span>
               <el-switch v-model="form.isDefault" style="margin-right: 20px;" />
-              <span class="el-form-item__label" style="width: 120px;">是否启用</span>
+              <span class="el-form-item__label" style="width: 70px;">是否启用</span>
               <el-switch v-model="form.isEnable" />
             </div>
           </el-form-item>
@@ -37,7 +37,7 @@
       </el-row>
 
       <!-- 文档 -->
-      <el-row :gutter="20">
+      <el-row :gutter="20" class="form-row">
         <el-col :span="12">
           <el-form-item label="文档地址">
             <el-input v-model="form.docUrl" placeholder="请输入内容" />
@@ -52,25 +52,22 @@
       </el-row>
 
       <!-- 备注 -->
-      <el-form-item label="备注">
+      <el-form-item label="备注" class="form-row">
         <el-input type="textarea" v-model="form.remark" :rows="2" placeholder="请输入"
         />
       </el-form-item>
 
-      <el-form-item label="接口地址">
+      <div class="vertical-fields">
-        <el-input v-model="form.apiUrl" placeholder="请输入base_url" />
+        <el-form-item label="接口地址">
-      </el-form-item>
+          <el-input v-model="form.apiUrl" placeholder="请输入base_url" />
-      <el-form-item label="模型名称">
+        </el-form-item>
-        <el-input v-model="form.modelName" placeholder="请输入model_name" />
+        <el-form-item label="模型名称">
-      </el-form-item>
+          <el-input v-model="form.modelName" placeholder="请输入model_name" />
-      <el-form-item label="密钥信息">
+        </el-form-item>
-        <el-input
+        <el-form-item label="密钥信息">
-          v-model="form.apiKey"
+          <el-input v-model="form.apiKey" placeholder="请输入api_key" show-password/>
-          placeholder="请输入api_key"
+        </el-form-item>
-          show-password
+      </div>
-        />
-      </el-form-item>
-
     </el-form>
 
     <div slot="footer" class="dialog-footer">
@@ -94,7 +91,7 @@ export default {
         code: "",
         name: "",
         supplier: "",
-        isDefault: false,
+        isDefault: true,
         isEnable: true,
         docUrl: "",
         sort: 123,
@@ -106,6 +103,9 @@ export default {
     };
   },
   watch: {
+    dialogVisible(val) {
+      this.$emit('update:visible', val);
+    },
     visible(val) {
       this.dialogVisible = val;
       if (val) this.form = { ...this.form, ...this.configData };
@@ -131,4 +131,29 @@ export default {
 .el-input-number {
   width: 100%;
 }
+.form-row {
+  margin-bottom: 12px;
+}
+
+.vertical-fields {
+  margin-top: 8px;
+}
+
+.dialog-footer {
+  margin-top: -10px;
+  text-align: center;
+}
+.el-input-number {
+  width: 100%;
+}
+
+.el-input__inner {
+  height: 36px;
+  line-height: 36px;
+}
+
+.el-form-item__label {
+  text-align: left;
+  padding-right: 10px;
+}
 </style>

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

@@ -60,7 +60,7 @@
       <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
         ©2025 xiaozhi-esp32-server
       </div>
-        <ModelEditDialog :visible="editDialogVisible" :modelData="editModelData" @save="handleModelSave"/>
+        <ModelEditDialog :visible.sync="editDialogVisible" :modelData="editModelData" @save="handleModelSave"/>
         <TtsModel :visible.sync="ttsDialogVisible" />
     </el-main>
   </div>