From 3ea1a2bf2f11c45a5f4624ae882eed12abd90a0b Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Thu, 20 Mar 2025 14:08:38 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/components/HeaderBar.vue |  37 ++----
 main/manager-web/src/router/index.js          |  10 +-
 .../src/views/DeviceManagement.vue            |  12 +-
 main/manager-web/src/views/UserManagement.vue | 120 ++++++++++++++++++
 4 files changed, 147 insertions(+), 32 deletions(-)
 create mode 100644 main/manager-web/src/views/UserManagement.vue

diff --git a/main/manager-web/src/components/HeaderBar.vue b/main/manager-web/src/components/HeaderBar.vue
index acc0e981..7f8618dd 100644
--- a/main/manager-web/src/components/HeaderBar.vue
+++ b/main/manager-web/src/components/HeaderBar.vue
@@ -8,13 +8,11 @@
           <img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
           智能体管理
         </div>
-        <div class="console">
-          <i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
-          控制台
+        <div class="equipment-management2" @click="goUserManagement">
+          用户管理
         </div>
         <div class="equipment-management2">
-          设备管理
-          <img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
+          模型配置
         </div>
       </div>
       <div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
@@ -55,6 +53,9 @@ export default {
       // 跳转到首页
       this.$router.push('/')
     },
+    goUserManagement() {
+      this.$router.push('/user-management')
+    },
     // 获取用户信息
     fetchUserInfo() {
       userApi.getUserInfo(({data}) => {
@@ -108,17 +109,17 @@ export default {
 }
 
 .equipment-management2 {
-  width: 87px;
-  height: 22px;
-  border-radius: 11px;
+  width: 82px;
+  height: 24px;
+  border-radius: 12px;
   background: #fff;
   display: flex;
   justify-content: center;
-  font-size: 9px;
-  font-weight: 400;
+  font-size: 10px;
+  font-weight: 500;
   gap: 7px;
   color: #3d4566;
-  margin-left: 2px;
+  margin-left: 1px;
   align-items: center;
 }
 
@@ -158,18 +159,4 @@ export default {
   text-align: left;
   color: #3d4566;
 }
-.console {
-  width: 90px;
-  height: 22px;
-  border-radius: 11px;
-  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  color: #979db1;
-  font-weight: 400;
-  gap: 7px;
-  margin-left: 15px;
-}
 </style>
\ No newline at end of file
diff --git a/main/manager-web/src/router/index.js b/main/manager-web/src/router/index.js
index d3add00a..05c74054 100644
--- a/main/manager-web/src/router/index.js
+++ b/main/manager-web/src/router/index.js
@@ -39,13 +39,21 @@ const routes = [
       return import('../views/register.vue')
     }
   },
-      // 新增设备管理页面路由
+  // 设备管理页面路由
   {
     path: '/device-management',
     name: 'DeviceManagement',
     component: function () {
       return import('../views/DeviceManagement.vue')
     }
+  },
+  // 添加用户管理路由
+  {
+    path: '/user-management',
+    name: 'UserManagement',
+    component: function () {
+      return import('../views/UserManagement.vue')
+    }
 
   }
 ]
diff --git a/main/manager-web/src/views/DeviceManagement.vue b/main/manager-web/src/views/DeviceManagement.vue
index 06c4317c..03939a28 100644
--- a/main/manager-web/src/views/DeviceManagement.vue
+++ b/main/manager-web/src/views/DeviceManagement.vue
@@ -9,11 +9,11 @@
         </el-button>
         <el-table :data="deviceList" style="width: 100%; margin-top: 20px" border stripe>
           <el-table-column label="设备型号" prop="model" flex></el-table-column>
-          <el-table-column label="固件版本" prop="firmwareVersion" width="140"></el-table-column>
-          <el-table-column label="Mac地址" prop="macAddress" width="220"></el-table-column>
-          <el-table-column label="绑定时间" prop="bindTime" width="260"></el-table-column>
-          <el-table-column label="最近对话" prop="lastConversation" width="100"></el-table-column>
-          <el-table-column label="备注" width="220">
+          <el-table-column label="固件版本" prop="firmwareVersion" width="120"></el-table-column>
+          <el-table-column label="Mac地址" prop="macAddress"></el-table-column>
+          <el-table-column label="绑定时间" prop="bindTime" width="200"></el-table-column>
+          <el-table-column label="最近对话" prop="lastConversation" width="140"></el-table-column>
+          <el-table-column label="备注" width="180">
              <template slot-scope="scope">
               <el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="mini" @blur="stopEditRemark(scope.$index)"></el-input>
               <span v-else>
@@ -85,7 +85,7 @@ export default {
         remark: '生产环境设备',
         isEdit: false,
         otaSwitch: false
-      }
+      },
       ]
     };
   },
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
new file mode 100644
index 00000000..d98bf070
--- /dev/null
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="welcome">
+    <HeaderBar />
+    <el-main style="padding: 20px; display: flex; flex-direction: column;">
+      <el-card class="user-card" shadow="always">
+      <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
+        <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
+        <el-button @click="handleSearch">查询</el-button>
+        <el-button type="danger" @click="batchDelete">批量删除</el-button>
+        <el-button type="danger" @click="batchDisable">批量禁用</el-button>
+      </div>
+      
+      <el-table :data="userList" style="width: 100%;" border stripe>
+        <el-table-column label="用户Id" prop="userId"></el-table-column>
+        <el-table-column label="手机号码" prop="phone"></el-table-column>
+        <el-table-column label="Status" prop="status"></el-table-column>
+        <el-table-column label="设备数量" prop="deviceCount"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="resetPassword(scope.row)">重置密码</el-button>
+            <el-button size="mini"
+              v-if="scope.row.status === '正常'"
+              @click="disableUser(scope.row)">禁用</el-button>
+            <el-button size="mini"
+              v-if="scope.row.status === '禁用'"
+              @click="restoreUser(scope.row)">恢复</el-button>
+            <el-button size="mini" @click="deleteUser(scope.row)" style="color: #ff4949">删除用户</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      </el-card>
+
+      <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
+        ©2025 xiaozhi-esp32-server
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script>
+import HeaderBar from "@/components/HeaderBar.vue";
+
+export default {
+  components: { HeaderBar },
+  data() {
+    return {
+      searchPhone: '',
+      userList: [
+        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 10 },
+        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 9 },
+        { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 7 },
+        { userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
+      ]
+    };
+  },
+  methods: {
+    handleSearch() {
+      // 模拟搜索逻辑
+      console.log('执行查询，搜索号码：', this.searchPhone);
+    },
+    batchDelete() {
+      console.log('执行批量删除操作');
+    },
+    batchDisable() {
+      console.log('执行批量禁用操作');
+    },
+    resetPassword(row) {
+      console.log('重置用户密码，用户：', row);
+    },
+    disableUser(row) {
+      row.status = '禁用';
+      console.log('禁用用户：', row);
+    },
+    restoreUser(row) {
+      row.status = '正常';
+      console.log('恢复用户：', row);
+    },
+    deleteUser(row) {
+      console.log('删除用户：', row);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.welcome {
+  min-width: 900px;
+  min-height: 506px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-image: url("@/assets/home/background.png");
+  background-size: cover;
+  background-position: center;
+  -webkit-background-size: cover;
+  -o-background-size: cover;
+}
+
+.user-search-operate {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.user-search-operate > * {
+  margin-right: 10px;
+}
+
+.el-table__header th {
+  background-color: #f5f7fa;
+  color: #606266;
+}
+
+.user-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
\ No newline at end of file

From 6cd88fb98f1a89d53fce7ee6adcaef9902ee9b3a Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Thu, 20 Mar 2025 18:11:37 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE-=E9=A1=B5=E9=9D=A21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/components/HeaderBar.vue |   8 +-
 main/manager-web/src/router/index.js          |   9 +-
 main/manager-web/src/views/ModelConfig.vue    | 181 ++++++++++++++++++
 main/manager-web/src/views/UserManagement.vue |  31 ++-
 main/manager-web/src/views/roleConfig.vue     |   8 +-
 5 files changed, 227 insertions(+), 10 deletions(-)
 create mode 100644 main/manager-web/src/views/ModelConfig.vue

diff --git a/main/manager-web/src/components/HeaderBar.vue b/main/manager-web/src/components/HeaderBar.vue
index 7f8618dd..1e4db69c 100644
--- a/main/manager-web/src/components/HeaderBar.vue
+++ b/main/manager-web/src/components/HeaderBar.vue
@@ -11,7 +11,7 @@
         <div class="equipment-management2" @click="goUserManagement">
           用户管理
         </div>
-        <div class="equipment-management2">
+        <div class="equipment-management2" @click="goModelConfig">
           模型配置
         </div>
       </div>
@@ -56,6 +56,9 @@ export default {
     goUserManagement() {
       this.$router.push('/user-management')
     },
+    goModelConfig() {
+      this.$router.push('/model-config')
+    },
     // 获取用户信息
     fetchUserInfo() {
       userApi.getUserInfo(({data}) => {
@@ -159,4 +162,5 @@ export default {
   text-align: left;
   color: #3d4566;
 }
-</style>
\ No newline at end of file
+</style>
+
diff --git a/main/manager-web/src/router/index.js b/main/manager-web/src/router/index.js
index 05c74054..6bc58823 100644
--- a/main/manager-web/src/router/index.js
+++ b/main/manager-web/src/router/index.js
@@ -54,8 +54,15 @@ const routes = [
     component: function () {
       return import('../views/UserManagement.vue')
     }
+  },
+  {
+   path: '/model-config',
+   name: 'ModelConfig',
+   component: function () {
+     return import('../views/ModelConfig.vue')
+   }
+  },
 
-  }
 ]
 
 const router = new VueRouter({
diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
new file mode 100644
index 00000000..65ad26e2
--- /dev/null
+++ b/main/manager-web/src/views/ModelConfig.vue
@@ -0,0 +1,181 @@
+<template>
+  <div class="welcome">
+    <HeaderBar />
+    <div class="model-tabs-container">
+      <el-tabs v-model="activeTab" class="model-tabs">
+        <el-tab-pane label="语音活动检测模型(VAD)" name="vad"></el-tab-pane>
+        <el-tab-pane label="语音识别(ASR)" name="asr"></el-tab-pane>
+        <el-tab-pane label="大语言模型(LLM)" name="llm"></el-tab-pane>
+        <el-tab-pane label="意图识别模型(Intent)" name="intent"></el-tab-pane>
+        <el-tab-pane label="语音合成模型(TTS)" name="tts"></el-tab-pane>
+        <el-tab-pane label="记忆模型(Memory)" name="memory"></el-tab-pane>
+      </el-tabs>
+      <div class="import-export-btn">
+        <el-button size="small" @click="handleImportExport">导入导出配置</el-button>
+      </div>
+    </div>
+
+    <el-main style="padding: 20px; display: flex; flex-direction: column;">
+      <el-card class="model-card" shadow="always">
+        <div class="model-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
+          <el-input placeholder="请输入模型名称查询" v-model="search" style="width: 300px; margin-right: 10px" />
+          <el-button @click="handleSearch">查询</el-button>
+          <el-button type="primary" @click="addModel">增加模型</el-button>
+          <el-button type="danger" @click="batchDelete">批量删除</el-button>
+        </div>
+
+        <el-table :data="modelList" style="width: 100%;" border stripe>
+          <el-table-column label="模型编码" prop="code"></el-table-column>
+          <el-table-column label="模型名称" prop="candidateName"></el-table-column>
+          <el-table-column label="是否应用">
+            <template slot-scope="scope">
+              <el-tag :type="scope.row.isApplied ? 'success' : 'danger'">
+                {{ scope.row.isApplied ? '是' : '否' }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="供应商名称" prop="supplier"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <el-button size="mini" @click="editModel(scope.row)">修改</el-button>
+              <el-button size="mini" type="danger" @click="deleteModel(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <div class="pagination-container">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[5, 10, 15]"
+          :page-size="pageSize"
+          layout="prev, pager, next"
+          :total="total"
+        />
+      </div>
+
+      <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
+        ©2025 xiaozhi-esp32-server
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script>
+import HeaderBar from "@/components/HeaderBar.vue";
+
+export default {
+  components: { HeaderBar },
+  data() {
+    return {
+      activeTab: 'vad',
+      search: '',
+      modelList: [
+        { code: 'AILLM', candidateName: '阿里百炼', isApplied: true, supplier: 'openai' },
+        { code: 'DoubaoLLM', candidateName: '豆包大模型', isApplied: true, supplier: 'openai' },
+        { code: 'DeepSeekLLM', candidateName: '深度求索', isApplied: true, supplier: 'openai' },
+        { code: 'DifyLLM', candidateName: 'DifChat', isApplied: true, supplier: 'dify' },
+      ],
+      currentPage: 1,
+      pageSize: 4,
+      total: 20
+    };
+  },
+  methods: {
+    // 查询
+    handleSearch() {
+      console.log('查询：', this.search);
+    },
+    // 批量删除
+    batchDelete() {
+      console.log('批量删除');
+    },
+    // 增加
+    addModel() {
+      console.log('增加模型');
+    },
+    // 修改
+    editModel(model) {
+      console.log('修改：', model);
+    },
+    // 删除
+    deleteModel(model) {
+      console.log('删除：', model);
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+      console.log('当前页码：', page);
+    },
+    // 导入导出
+    handleImportExport() {
+      console.log('导入导出');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.welcome {
+  min-width: 900px;
+  min-height: 506px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-image: url("@/assets/home/background.png");
+  background-size: cover;
+  background-position: center;
+  -webkit-background-size: cover;
+  -o-background-size: cover;
+}
+
+.model-search-operate {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.model-search-operate > * {
+  margin-right: 10px;
+}
+
+.el-table__header th {
+  background-color: #f5f7fa;
+  color: #606266;
+}
+
+.model-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.model-tabs-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 25px;
+}
+
+.model-tabs {
+  flex-grow: 0;
+  margin-right: 20px;
+}
+
+.import-export-btn {
+  margin-right: 40px;
+  margin-bottom: 20px;
+
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+::v-deep .el-tabs {
+  margin-left: 70px;
+}
+</style>
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index d98bf070..9ccc5989 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -2,7 +2,7 @@
   <div class="welcome">
     <HeaderBar />
     <el-main style="padding: 20px; display: flex; flex-direction: column;">
-      <el-card class="user-card" shadow="always">
+      <el-card class="user-card" shadow="always" >
       <div class="user-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
         <el-input placeholder="请输入手机号码查询" v-model="searchPhone" style="width: 300px; margin-right: 10px" />
         <el-button @click="handleSearch">查询</el-button>
@@ -30,6 +30,17 @@
       </el-table>
       </el-card>
 
+      <div class="pagination-container">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-sizes="[5, 10, 15]"
+          :page-size="pageSize"
+          layout="prev, pager, next"
+          :total="total"
+        />
+      </div>
+
       <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
         ©2025 xiaozhi-esp32-server
       </div>
@@ -50,7 +61,10 @@ export default {
         { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 9 },
         { userId: '123456', phone: '13800138000', status: '正常', deviceCount: 7 },
         { userId: '123456', phone: '13800138000', status: '禁用', deviceCount: 7 }
-      ]
+      ],
+      currentPage: 1,
+      pageSize: 4,
+      total: 20
     };
   },
   methods: {
@@ -77,7 +91,11 @@ export default {
     },
     deleteUser(row) {
       console.log('删除用户：', row);
-    }
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+      console.log('当前页码：', page);
+    },
   }
 };
 </script>
@@ -117,4 +135,11 @@ export default {
   padding: 20px;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
 </style>
\ No newline at end of file
diff --git a/main/manager-web/src/views/roleConfig.vue b/main/manager-web/src/views/roleConfig.vue
index 77ecc85f..d0f0000e 100644
--- a/main/manager-web/src/views/roleConfig.vue
+++ b/main/manager-web/src/views/roleConfig.vue
@@ -125,11 +125,11 @@ export default {
     ],
       models: [
       { label: '大语言模型(LLM)', key: 'llm' },
-      { label: '语音转文本模型(ASR)', key: 'asr' },
+      { label: '语音识别(ASR)', key: 'asr' },
       { label: '语音活动检测模型(VAD)', key: 'vad' },
-      { label: '语音生成模型(TTS)', key: 'tts' },
-      { label: '意图分类模型(Intent)', key: 'intent' },
-      { label: '记忆增强模型(Memory)', key: 'memory' }
+      { label: '语音合成模型(TTS)', key: 'tts' },
+      { label: '意图识别模型(Intent)', key: 'intent' },
+      { label: '记忆模型(Memory)', key: 'memory' }
     ],
       templates: ['台湾女友', '土豆子', '英语老师', '好奇小男孩', '汪汪队队长']
 

From 5648ee974aaa7df37aec1639fbe69e1d5b527b77 Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Fri, 21 Mar 2025 18:08:47 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=B8=89=E4=B8=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/EditVoiceDialog.vue        | 143 +++++++++++++
 .../src/components/ModelEditDialog.vue        | 134 ++++++++++++
 main/manager-web/src/components/TtsModel.vue  | 194 ++++++++++++++++++
 main/manager-web/src/views/ModelConfig.vue    |  28 ++-
 4 files changed, 494 insertions(+), 5 deletions(-)
 create mode 100644 main/manager-web/src/components/EditVoiceDialog.vue
 create mode 100644 main/manager-web/src/components/ModelEditDialog.vue
 create mode 100644 main/manager-web/src/components/TtsModel.vue

diff --git a/main/manager-web/src/components/EditVoiceDialog.vue b/main/manager-web/src/components/EditVoiceDialog.vue
new file mode 100644
index 00000000..65fc84d4
--- /dev/null
+++ b/main/manager-web/src/components/EditVoiceDialog.vue
@@ -0,0 +1,143 @@
+<template>
+  <el-dialog :visible.sync="dialogVisible" width="700px" @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">
+          <el-form-item label="音色编码" prop="voiceCode">
+            <el-input v-model="voiceForm.voiceCode" placeholder="请输入内容" class="compact-input"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="音色名称" prop="voiceName">
+            <el-input v-model="voiceForm.voiceName" placeholder="请输入内容" class="compact-input"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="语言类型" prop="languageType">
+            <el-input v-model="voiceForm.languageType" placeholder="请输入内容" class="compact-input"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序号" prop="sortNumber">
+            <el-input-number v-model="voiceForm.sortNumber" :min="1" :controls="false" class="compact-number"></el-input-number>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label="备注" prop="remark">
+        <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>
+          <el-button type="primary" size="mini" class="preview-btn">生成试听</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSave">保存</el-button>
+      <el-button type="primary" @click="handleClose">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'EditVoiceDialog',
+  props: {
+    showDialog: Boolean,
+    voiceData: {
+      type: Object,
+      default: () => ({
+        voiceCode: 'wawaxiaohe',
+        voiceName: '湾湾小何',
+        languageType: '中文',
+        sortNumber: 123
+      })
+    }
+  },
+  data() {
+    return {
+      dialogVisible: this.showDialog,
+      voiceForm: { ...this.voiceData },
+      rules: {
+        voiceCode: [{ required: true, message: '请输入音色编码', trigger: 'blur' }],
+        voiceName: [{ required: true, message: '请输入音色名称', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    showDialog(newVal) {
+      this.dialogVisible = newVal
+      if (newVal) this.voiceForm = { ...this.voiceData }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.dialogVisible = false
+      this.$emit('update:showDialog', false)
+    },
+    handleSave() {
+      this.$refs.voiceForm.validate(valid => {
+        if (valid) this.$emit('save', this.voiceForm)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.compact-dialog {
+  /deep/ .el-dialog__body {
+    padding: 20px;
+  }
+
+  .el-form-item {
+    margin-bottom: 16px;
+  }
+
+  .compact-input {
+    width: 100%;
+  }
+
+  .compact-number {
+    width: 100%;
+    /deep/ .el-input__inner {
+      padding-right: 10px;
+    }
+  }
+
+  .compact-textarea {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .audio-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 8px;
+
+    .counter {
+      color: #909399;
+      font-size: 12px;
+    }
+
+    .preview-btn {
+      padding: 7px 15px;
+    }
+  }
+
+  .dialog-footer {
+    padding: 16px 20px 0;
+    text-align: right;
+    border-top: 1px solid #EBEEF5;
+
+    .el-button {
+      min-width: 80px;
+    }
+  }
+}
+</style>
diff --git a/main/manager-web/src/components/ModelEditDialog.vue b/main/manager-web/src/components/ModelEditDialog.vue
new file mode 100644
index 00000000..42236cce
--- /dev/null
+++ b/main/manager-web/src/components/ModelEditDialog.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-dialog :visible.sync="dialogVisible" width="800px" center>
+    <el-form :model="form" ref="form" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="模型编码">
+            <el-input v-model="form.code" placeholder="请输入内容" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="模型名称">
+            <el-input v-model="form.name" placeholder="请输入内容" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 供应商 -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="供应商">
+            <el-select v-model="form.supplier" placeholder="请选择">
+              <el-option label="openai" value="openai" />
+              <el-option label="dify" value="dify" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+           <el-form-item>
+            <div style="display: flex; align-items: center;">
+              <span class="el-form-item__label" style="width: 120px;">设成默认</span>
+              <el-switch v-model="form.isDefault" style="margin-right: 20px;" />
+              <span class="el-form-item__label" style="width: 120px;">是否启用</span>
+              <el-switch v-model="form.isEnable" />
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 文档 -->
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="文档地址">
+            <el-input v-model="form.docUrl" placeholder="请输入内容" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序号">
+            <el-input-number v-model="form.sort" :min="1" :max="999" controls-position="right" placeholder="123"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 备注 -->
+      <el-form-item label="备注">
+        <el-input type="textarea" v-model="form.remark" :rows="2" placeholder="请输入"
+        />
+      </el-form-item>
+
+      <el-form-item label="接口地址">
+        <el-input v-model="form.apiUrl" placeholder="请输入base_url" />
+      </el-form-item>
+      <el-form-item label="模型名称">
+        <el-input v-model="form.modelName" placeholder="请输入model_name" />
+      </el-form-item>
+      <el-form-item label="密钥信息">
+        <el-input
+          v-model="form.apiKey"
+          placeholder="请输入api_key"
+          show-password
+        />
+      </el-form-item>
+
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSave">保存</el-button>
+      <el-button @click="dialogVisible = false">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "ModelConfigDialog",
+  props: {
+    visible: { type: Boolean, default: false },
+    configData: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      dialogVisible: this.visible,
+      form: {
+        code: "",
+        name: "",
+        supplier: "",
+        isDefault: false,
+        isEnable: true,
+        docUrl: "",
+        sort: 123,
+        remark: "",
+        apiUrl: "",
+        modelName: "",
+        apiKey: ""
+      }
+    };
+  },
+  watch: {
+    visible(val) {
+      this.dialogVisible = val;
+      if (val) this.form = { ...this.form, ...this.configData };
+    }
+  },
+  methods: {
+    handleSave() {
+      this.$emit("submit", this.form);
+      this.dialogVisible = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  margin-top: -30px;
+  text-align: center;
+}
+.el-form-item {
+  margin-bottom: 18px;
+}
+.el-input-number {
+  width: 100%;
+}
+</style>
diff --git a/main/manager-web/src/components/TtsModel.vue b/main/manager-web/src/components/TtsModel.vue
new file mode 100644
index 00000000..92b107ed
--- /dev/null
+++ b/main/manager-web/src/components/TtsModel.vue
@@ -0,0 +1,194 @@
+<template>
+  <el-dialog :visible.sync="visible" width="80%" @close="handleClose">
+    <el-row class="main-container">
+      <el-col :span="4">
+        <el-menu class="model-menu" :default-active="activeModel" mode="vertical" @select="handleModelSelect">
+          <el-menu-item index="EdgeTTS">EdgeTTS</el-menu-item>
+          <el-menu-item index="DoubaoTTS">DoubaoTTS</el-menu-item>
+          <el-menu-item index="TTS302AI">TTS302AI</el-menu-item>
+          <el-menu-item index="CosyVoiceSiliconflow">CosyVoiceSiliconflow</el-menu-item>
+        </el-menu>
+      </el-col>
+
+      <el-col :span="20">
+        <div class="search-operate">
+          <el-input placeholder="请输入音色名称查询" v-model="searchQuery" style="width: 300px; margin-right: 10px;"/>
+          <el-button type="primary" @click="handleSearch">查询</el-button>
+          <el-button type="primary" plain @click="handleAddVoice">添加音色</el-button>
+          <el-button type="danger" plain @click="handleBatchDelete">批量删除</el-button>
+        </div>
+
+        <el-table :data="filteredTtsModels" style="width: 100%" border stripe header-row-class-name="table-header">
+          <el-table-column label="音色编码" prop="voiceCode" width="150" align="center"></el-table-column>
+          <el-table-column label="音色名称" prop="voiceName" width="180" align="center"></el-table-column>
+          <el-table-column label="语言类型" prop="languageType" width="120" align="center"></el-table-column>
+          <el-table-column label="备注" prop="remark" align="center"></el-table-column>
+          <el-table-column label="操作" width="200" align="center">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="editVoice(scope.row)" style="color: #409EFF; margin-right: 15px;">修改</el-button>
+              <el-button size="mini" type="text" @click="deleteVoice(scope.row)" style="color: #F56C6C;">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div class="pagination-container">
+          <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" layout="prev, pager, next" prev-text="<" next-text=">"/>
+        </div>
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleClose" size="medium">关闭</el-button>
+          <el-button type="primary" @click="handleImportExport" size="medium">导入导出配置</el-button>
+        </div>
+        <EditVoiceDialog :showDialog="editDialogVisible" :voiceData="editVoiceData" @update:showDialog="editDialogVisible = $event" @saveVoice="handleSaveEditedVoice"/>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import EditVoiceDialog from "@/components/EditVoiceDialog.vue";
+export default {
+  components: { EditVoiceDialog },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeModel: 'EdgeTTS',
+      searchQuery: '',
+      editDialogVisible: false,
+      editVoiceData: {},
+      ttsModels: [
+        { voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
+        { voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
+        { voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
+        { voiceCode: 'wawaxiaohe', voiceName: '湾湾小何', languageType: '中文', remark: '' },
+      ],
+      currentPage: 1,
+      pageSize: 4,
+      total: 20
+    };
+  },
+  computed: {
+    filteredTtsModels() {
+      return this.ttsModels.filter(model =>
+        model.voiceName.toLowerCase().includes(this.searchQuery.toLowerCase())
+      );
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('update:visible', false);
+    },
+    handleModelSelect(index) {
+      this.activeModel = index;
+      // 可根据选中模型加载对应数据
+    },
+    handleSearch() {
+      // 搜索
+    },
+    handleAddVoice() {
+      // 添加音色
+    },
+    handleBatchDelete() {
+      // 批量删除
+    },
+     editVoice(voice) {
+      this.editVoiceData = { ...voice };
+      this.editDialogVisible = true;
+    },
+    handleSaveEditedVoice(voiceForm) {
+      const index = this.ttsModels.findIndex(item => item.voiceCode === voiceForm.voiceCode);
+      if (index !== -1) {
+        this.ttsModels.splice(index, 1, voiceForm);
+      }
+    },
+    deleteVoice(voice) {
+      // 删除
+    },
+    handleImportExport() {
+      // 导入导出
+    }
+  }
+};
+</script>
+
+<style scoped>
+.main-container {
+  padding: 20px;
+}
+
+.model-menu {
+  border-right: 1px solid #ebeef5;
+  height: calc(100vh - 300px);
+  background-color: #fafafa;
+}
+
+.search-operate {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.pagination-container {
+  margin: 20px 0;
+  display: flex;
+  justify-content: right;
+}
+
+.dialog-footer {
+  text-align: right;
+  padding: 20px 20px 0;
+  border-top: 1px solid #ebeef5;
+}
+
+::v-deep .table-header th {
+  background-color: #f5f7fa;
+  color: #606266;
+  font-weight: 600;
+}
+
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #fafafa;
+}
+
+::v-deep .el-table--border td, ::v-deep .el-table--border th {
+  border-right: 1px solid #ebeef5;
+}
+
+::v-deep .el-pagination {
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+::v-deep .el-pagination .btn-prev, ::v-deep .el-pagination .btn-next {
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+::v-deep .el-pagination .btn-prev:hover, ::v-deep .el-pagination .btn-next:hover {
+  background-color: #f5f7fa;
+}
+
+::v-deep .el-pagination .el-pager li {
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  margin: 0 2px;
+}
+
+::v-deep .el-pagination .el-pager li:hover {
+  background-color: #f5f7fa;
+}
+
+::v-deep .el-pagination .el-pager li.active {
+  background-color: #409EFF;
+  color: #fff;
+  border-color: #409EFF;
+}
+</style>
diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
index 65ad26e2..aeeeb754 100644
--- a/main/manager-web/src/views/ModelConfig.vue
+++ b/main/manager-web/src/views/ModelConfig.vue
@@ -2,7 +2,7 @@
   <div class="welcome">
     <HeaderBar />
     <div class="model-tabs-container">
-      <el-tabs v-model="activeTab" class="model-tabs">
+      <el-tabs v-model="activeTab" class="model-tabs" >
         <el-tab-pane label="语音活动检测模型(VAD)" name="vad"></el-tab-pane>
         <el-tab-pane label="语音识别(ASR)" name="asr"></el-tab-pane>
         <el-tab-pane label="大语言模型(LLM)" name="llm"></el-tab-pane>
@@ -11,11 +11,13 @@
         <el-tab-pane label="记忆模型(Memory)" name="memory"></el-tab-pane>
       </el-tabs>
       <div class="import-export-btn">
+        <el-button v-if="activeTab === 'tts'" type="primary" @click="ttsDialogVisible = true" style="margin-right: 10px;">模型设置</el-button>
         <el-button size="small" @click="handleImportExport">导入导出配置</el-button>
       </div>
     </div>
 
     <el-main style="padding: 20px; display: flex; flex-direction: column;">
+
       <el-card class="model-card" shadow="always">
         <div class="model-search-operate" style="display: flex; align-items: center; margin-bottom: 20px;">
           <el-input placeholder="请输入模型名称查询" v-model="search" style="width: 300px; margin-right: 10px" />
@@ -37,7 +39,7 @@
           <el-table-column label="供应商名称" prop="supplier"></el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
-              <el-button size="mini" @click="editModel(scope.row)">修改</el-button>
+              <el-button size="mini" @click="editModel(scope.row)" style="margin-right: 10px;">修改</el-button>
               <el-button size="mini" type="danger" @click="deleteModel(scope.row)">删除</el-button>
             </template>
           </el-table-column>
@@ -58,19 +60,26 @@
       <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"/>
+        <TtsModel :visible.sync="ttsDialogVisible" />
     </el-main>
   </div>
 </template>
 
 <script>
 import HeaderBar from "@/components/HeaderBar.vue";
+import ModelEditDialog from "@/components/ModelEditDialog.vue";
+import TtsModel from "@/components/TtsModel.vue";
 
 export default {
-  components: { HeaderBar },
+  components: { HeaderBar, ModelEditDialog, TtsModel },
   data() {
     return {
       activeTab: 'vad',
       search: '',
+      editDialogVisible: false,
+      editModelData: {},
+      ttsDialogVisible: false,
       modelList: [
         { code: 'AILLM', candidateName: '阿里百炼', isApplied: true, supplier: 'openai' },
         { code: 'DoubaoLLM', candidateName: '豆包大模型', isApplied: true, supplier: 'openai' },
@@ -97,7 +106,12 @@ export default {
     },
     // 修改
     editModel(model) {
-      console.log('修改：', model);
+      this.editModelData = {
+        code: model.code,
+        name: model.candidateName,
+        supplier: model.supplier,
+      };
+      this.editDialogVisible = true;
     },
     // 删除
     deleteModel(model) {
@@ -110,7 +124,11 @@ export default {
     // 导入导出
     handleImportExport() {
       console.log('导入导出');
-    }
+    },
+    handleModelSave(formData) {
+      // 处理保存
+      console.log('保存的模型数据：', formData);
+    },
   }
 };
 </script>

From a5444b11b3f4663eca02e1ed1726104e425dcf0f Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Sat, 22 Mar 2025 00:22:12 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E5=90=84?=
 =?UTF-8?q?=E4=B8=AA=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/EditVoiceDialog.vue        | 22 +++---
 main/manager-web/src/components/HeaderBar.vue | 10 ++-
 .../src/components/ModelEditDialog.vue        | 71 +++++++++++++------
 main/manager-web/src/views/ModelConfig.vue    |  2 +-
 4 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/main/manager-web/src/components/EditVoiceDialog.vue b/main/manager-web/src/components/EditVoiceDialog.vue
index 65fc84d4..b7feb78d 100644
--- a/main/manager-web/src/components/EditVoiceDialog.vue
+++ b/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;
diff --git a/main/manager-web/src/components/HeaderBar.vue b/main/manager-web/src/components/HeaderBar.vue
index 1e4db69c..cba41128 100644
--- a/main/manager-web/src/components/HeaderBar.vue
+++ b/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 {
diff --git a/main/manager-web/src/components/ModelEditDialog.vue b/main/manager-web/src/components/ModelEditDialog.vue
index 42236cce..09e5570c 100644
--- a/main/manager-web/src/components/ModelEditDialog.vue
+++ b/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-row :gutter="20">
+    <el-form :model="form" ref="form" label-width="70px">
+      <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="接口地址">
-        <el-input v-model="form.apiUrl" placeholder="请输入base_url" />
-      </el-form-item>
-      <el-form-item label="模型名称">
-        <el-input v-model="form.modelName" placeholder="请输入model_name" />
-      </el-form-item>
-      <el-form-item label="密钥信息">
-        <el-input
-          v-model="form.apiKey"
-          placeholder="请输入api_key"
-          show-password
-        />
-      </el-form-item>
-
+      <div class="vertical-fields">
+        <el-form-item label="接口地址">
+          <el-input v-model="form.apiUrl" placeholder="请输入base_url" />
+        </el-form-item>
+        <el-form-item label="模型名称">
+          <el-input v-model="form.modelName" placeholder="请输入model_name" />
+        </el-form-item>
+        <el-form-item label="密钥信息">
+          <el-input v-model="form.apiKey" placeholder="请输入api_key" show-password/>
+        </el-form-item>
+      </div>
     </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>
diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
index aeeeb754..720b7c36 100644
--- a/main/manager-web/src/views/ModelConfig.vue
+++ b/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>