feature：实现角色配置

main/manager-web/src/apis/api.js

@@ -3,6 +3,7 @@ import agent from './module/agent.js'
 import device from './module/device.js'
 import user from './module/user.js'
 import ota from './module/ota.js'
+import model from './module/model.js'
 import admin from './module/admin.js'
 
 /**
@@ -31,5 +32,6 @@ export default {
     agent,
     device,
     ota,
+    model,
     admin
 }

main/manager-web/src/apis/module/admin.js

@@ -5,16 +5,16 @@ import {getServiceUrl} from '../api'
 export default {
     // 用户列表
     getUserList(callback) {
-        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/admin/users`)
+        RequestService.sendRequest().url(`${getServiceUrl()}/admin/users`)
             .method('GET')
             .success((res) => {
                 RequestService.clearRequestTime()
                 callback(res)
             })
             .fail(() => {
-                RequestService.reAjaxFun(() => {
-                    this.getList()
-                })
+                // RequestService.reAjaxFun(() => {
+                //     this.getUserList()
+                // })
             }).send()
     },
 }

main/manager-web/src/apis/module/model.js

@@ -0,0 +1,32 @@
+import RequestService from '../httpRequest'
+import {getServiceUrl} from '../api'
+
+
+export default {
+    //模型配置列表
+    getModelList(callback) {
+        RequestService.sendRequest().url(`${getServiceUrl()}/model/list`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime()
+                callback(res)
+            })
+            .fail((err) => {
+                console.error('获取模型配置列表失败:', err);
+            }).send()
+    },
+    
+    //音色列表
+    getTtsVoiceList(ttsModelId, callback) {
+        RequestService.sendRequest().url(`${getServiceUrl()}/tts/voice`)
+            .method('GET')
+            .data({ttsModelId})
+            .success((res) => {
+                RequestService.clearRequestTime()
+                callback(res)
+            })
+            .fail((err) => {
+                console.error('获取音色列表失败:', err);
+            }).send()
+    },
+}

main/manager-web/src/apis/module/user.js

@@ -18,7 +18,8 @@ export default {
                 //     this.login(loginForm, callback)
                 // })
             }).send()
-    },    // 获取验证码
+    },    
+    // 获取验证码
     getCaptcha(uuid, callback) {
 
         RequestService.sendRequest()
@@ -98,4 +99,24 @@ export default {
                 // })
             }).send()
     },
+    // 修改用户密码
+    changePassword(oldPassword, newPassword, successCallback, errorCallback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/user/change-password`)  // 修改URL
+            .method('PUT')  // 修改方法为PUT
+            .data({
+                old_password: oldPassword,  // 修改参数名
+                new_password: newPassword   // 修改参数名
+            })
+            .success((res) => {
+                RequestService.clearRequestTime();
+                successCallback(res);
+            })
+            .fail((error) => {
+                // RequestService.reAjaxFun(() => {
+                //     this.changePassword(oldPassword, newPassword, successCallback, errorCallback);
+                // });
+            })
+            .send();
+    },
 }

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

@@ -1,16 +1,25 @@
 <template>
   <el-dialog
       :visible.sync="visible"
-      width="1000px"
+      width="975px"
       center
       custom-class="custom-dialog"
       :show-close="false"
+      class="center-dialog"
+
   >
-    <div style="margin: 0 30px 20px; text-align: left; padding: 20px; border-radius: 10px;">
-      <div style="font-size: 27px; color: #3d4566; margin-bottom: 15px; text-align: center;">添加模型</div>
+    <div style="margin: 0 18px; text-align: left; padding: 10px; border-radius: 10px;">
+      <div style="font-size: 30px; color: #3d4566; margin-top: -10px; margin-bottom: 10px; text-align: center;">
+        添加模型
+      </div>
+
+      <!-- 关闭按钮 -->
+      <button class="custom-close-btn" @click="handleClose">
+        ×
+      </button>
 
       <!-- 模型信息部分 -->
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
         <div style="font-size: 20px; font-weight: bold; color: #3d4566;">模型信息</div>
         <div style="display: flex; align-items: center; gap: 20px;">
           <div style="display: flex; align-items: center;">
@@ -24,35 +33,35 @@
         </div>
       </div>
 
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 20px;"></div>
+      <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
 
       <el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
         <!-- 第一行：模型名称和模型编码 -->
-        <div style="display: flex; gap: 20px; margin-bottom: 15px;">
-          <el-form-item label="模型名称" prop="modelName" style="flex: 1; margin-bottom: 0;">
+        <div style="display: flex; gap: 20px; margin-bottom: 0;">
+          <el-form-item label="模型名称" prop="modelName" style="flex: 1;">
             <el-input
-              v-model="formData.modelName"
-              placeholder="请输入模型名称"
-              class="custom-input-bg"
+                v-model="formData.modelName"
+                placeholder="请输入模型名称"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
-          <el-form-item label="模型编码" prop="modelCode" style="flex: 1; margin-bottom: 0;">
+          <el-form-item label="模型编码" prop="modelCode" style="flex: 1;">
             <el-input
-              v-model="formData.modelCode"
-              placeholder="请输入模型编码"
-              class="custom-input-bg"
+                v-model="formData.modelCode"
+                placeholder="请输入模型编码"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
         </div>
 
         <!-- 第二行：供应器和排序号 -->
-        <div style="display: flex; gap: 20px; margin-bottom: 15px;">
-          <el-form-item label="供应器" prop="supplier" style="flex: 1; margin-bottom: 0;">
+        <div style="display: flex; gap: 20px; margin-bottom: 0;">
+          <el-form-item label="供应器" prop="supplier" style="flex: 1;">
             <el-select
-              v-model="formData.supplier"
-              placeholder="请选择"
-              class="custom-select custom-input-bg"
-              style="width: 100%;"
+                v-model="formData.supplier"
+                placeholder="请选择"
+                class="custom-select custom-input-bg"
+                style="width: 100%;"
             >
               <el-option label="硅基流动" value="硅基流动"></el-option>
               <el-option label="智脑科技" value="智脑科技"></el-option>
@@ -60,26 +69,26 @@
               <el-option label="其他" value="其他"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="排序号" prop="sortOrder" style="flex: 1; margin-bottom: 0;">
+          <el-form-item label="排序号" prop="sortOrder" style="flex: 1;">
             <el-input
-              v-model="formData.sort"
-              placeholder="请输入排序号"
-              class="custom-input-bg"
+                v-model="formData.sort"
+                placeholder="请输入排序号"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
         </div>
 
         <!-- 文档地址 -->
-        <el-form-item label="文档地址" prop="docLink" style="margin-bottom: 15px;">
+        <el-form-item label="文档地址" prop="docLink" style="margin-bottom: 27px;">
           <el-input
-            v-model="formData.docLink"
-            placeholder="请输入文档地址"
-            class="custom-input-bg"
+              v-model="formData.docLink"
+              placeholder="请输入文档地址"
+              class="custom-input-bg"
           ></el-input>
         </el-form-item>
 
         <!-- 备注 -->
-        <el-form-item label="备注" prop="remark" style="margin-bottom: 15px;">
+        <el-form-item label="备注" prop="remark" class="prop-remark">
           <el-input
               v-model="formData.remark"
               type="textarea"
@@ -92,29 +101,29 @@
 
       <!-- 调用信息部分 -->
       <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div>
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 20px;"></div>
+      <div style="height: 2px; background: #e9e9e9; margin-bottom: 15px;"></div>
 
       <el-form :model="formData" label-width="100px" label-position="left" class="custom-form">
         <!-- 第一行：模型名称和接口地址 -->
-        <div style="display: flex; gap: 20px; margin-bottom: 15px;">
+        <div style="display: flex; gap: 10px; margin-bottom: 15px;">
           <el-form-item label="模型名称" prop="param1" style="flex: 0.5; margin-bottom: 0;">
             <el-input
-              v-model="formData.configJson.param1"
-              placeholder="请输入model_name"
-              class="custom-input-bg"
+                v-model="formData.configJson.param1"
+                placeholder="请输入model_name"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
           <el-form-item label="接口地址" prop="param2" style="flex: 1; margin-bottom: 0;">
             <el-input
-              v-model="formData.configJson.param2"
-              placeholder="请输入base_url"
-              class="custom-input-bg"
+                v-model="formData.configJson.param2"
+                placeholder="请输入base_url"
+                class="custom-input-bg"
             ></el-input>
           </el-form-item>
         </div>
 
         <!-- 秘钥信息 -->
-        <el-form-item label="秘钥信息" prop="apiKey" style="margin-bottom: 15px;">
+        <el-form-item label="秘钥信息" prop="apiKey">
           <el-input
               v-model="formData.configJson.apiKey"
               placeholder="请输入api_key"
@@ -126,7 +135,7 @@
     </div>
 
     <!-- 保存按钮 -->
-    <div style="display: flex; margin: 20px 0; justify-content: center;">
+    <div style="display: flex;justify-content: center;">
       <el-button
           type="primary"
           @click="confirm"
@@ -135,12 +144,6 @@
         保存
       </el-button>
     </div>
-
-    <!-- 关闭按钮 -->
-    <!-- 修改关闭按钮 -->
-    <button class="custom-close-btn" @click="handleClose">
-      ×
-    </button>
   </el-dialog>
 </template>
 
@@ -216,6 +219,7 @@ export default {
   border-radius: 20px;
   overflow: hidden;
   background: white;
+  padding-bottom: 17px;
 }
 
 .custom-dialog .el-dialog__header {
@@ -223,6 +227,18 @@ export default {
   border-bottom: none;
 }
 
+.center-dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.center-dialog .el-dialog {
+  margin: 4% 0 auto !important;
+  display: flex;
+  flex-direction: column;
+}
+
 .custom-close-btn {
   position: absolute;
   top: 20px;
@@ -249,19 +265,15 @@ export default {
   border-color: #409EFF;
 }
 
-.custom-select .el-input__inner {
-  padding-right: 30px !important;
-}
-
 .custom-select .el-input__suffix {
   background: #e6e8ea;
-  right: 7px;
-  width: 24px;
-  height: 24px;
+  right: 6px;
+  width: 20px;
+  height: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
-  top: 7px;
+  top: 9px;
 }
 
 .custom-select .el-input__suffix-inner {
@@ -276,42 +288,34 @@ export default {
   display: inline-block;
   width: 0;
   height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 8px solid #c0c4cc;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 7px solid #c0c4cc;
   position: relative;
-  top: -1px;
+  top: -2px;
   transform: rotate(180deg);
 }
 
-.custom-select .el-select .el-input .el-select__caret {
-  color: #c0c4cc;
-  font-size: 14px;
-  transition: transform .3s;
-  transform: rotateZ(0deg);
-  cursor: pointer;
-}
-
-.custom-select .el-select .el-input.is-focus .el-icon-arrow-up:before {
-  transform: rotateZ(180deg);
-}
-
-/* 表单样式调整 */
 .custom-form .el-form-item {
-  margin-bottom: 0;
+  margin-bottom: 20px; /* 统一设置所有表单项的间距 */
 }
 
 .custom-form .el-form-item__label {
   color: #3d4566;
   font-weight: normal;
   text-align: right;
-  padding-right: 15px;
+  padding-right: 20px;
+
+}
+
+.custom-form .el-form-item.prop-remark .el-form-item__label {
+  margin-top: -4px;
 }
 
 /* 修改placeholder颜色 */
 .custom-input-bg .el-input__inner::-webkit-input-placeholder,
 .custom-input-bg .el-textarea__inner::-webkit-input-placeholder {
-  color: #9c9f9e ;
+  color: #9c9f9e;
 }
 
 /* 输入框背景色 */
@@ -320,16 +324,6 @@ export default {
   background-color: #f6f8fc;
 }
 
-.custom-form .el-input__inner,
-.custom-form .el-textarea__inner {
-  border-radius: 4px;
-  border: 1px solid #DCDFE6;
-}
-
-.custom-form .el-input__inner:focus,
-.custom-form .el-textarea__inner:focus {
-  border-color: #409EFF;
-}
 
 .save-btn {
   background: #e6f0fd;
@@ -347,10 +341,6 @@ export default {
   border: none;
 }
 
-/* 修复select宽度问题 */
-.el-select {
-  display: block;
-}
 
 /* 修改开关样式 */
 .custom-switch .el-switch__core {
@@ -381,4 +371,17 @@ export default {
   margin-left: -18px;
   background-color: #1b47ee;
 }
+
+
+/* 调整flex布局的gap */
+[style*="display: flex"] {
+  gap: 20px; /* 扩大flex项间距 */
+}
+
+/* 调整输入框高度 */
+.custom-input-bg .el-input__inner {
+  height: 32px; /* 固定输入框高度 */
+}
+
+
 </style>

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

@@ -23,8 +23,7 @@ export default {
 .message {
   font-size: 14px;
   font-weight: 400;
-  margin-top: auto;
-  padding-top: 30px;
+  padding: 20px;
   color: #979db1;
 }
 </style>

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

@@ -14,9 +14,11 @@
           控制台
         </div>
         <div ref="menu-code_user" class="menu-btn" @click="goToPage('/user-management')">
+          <i class="el-icon-user"></i>
           用户管理
         </div>
         <div ref="menu-code_model" class="menu-btn" @click="goToPage('/model-config')">
+          <i class="el-icon-news"></i>
           模型配置
         </div>
         <div ref="menu-code_ota" class="menu-btn" @click="goToPage('/ota')">
@@ -34,7 +36,7 @@
         <img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
         <el-dropdown trigger="click">
           <span class="el-dropdown-link">
-             {{ userInfo.mobile || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
+             {{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item icon="el-icon-user" @click.native="">个人中心</el-dropdown-item>

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

@@ -122,9 +122,10 @@ export default {
 }
 
 .model-menu {
-  border-right: 1px solid #ebeef5;
+  border: 1px solid #ebeef5;
   height: calc(100vh - 300px);
   background-color: #fafafa;
+  margin-right: 20px;
 }
 
 .search-operate {

main/manager-web/src/router/index.js

@@ -73,7 +73,7 @@ const routes = [
       menuCode: 'user',
     },
     component: function () {
-      return import('../views/UserManagement.vue')
+      return import('../views/userManagement.vue')
     }
   },
   {
@@ -83,7 +83,7 @@ const routes = [
      menuCode: 'model',
    },
    component: function () {
-     return import('../views/ModelConfig.vue')
+     return import('../views/modelConfig.vue')
    }
   },
 

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

@@ -1,285 +1,407 @@
-  <template>
-    <div class="welcome">
-      <HeaderBar />
-      <div class="model-container">
-        <el-menu :default-active="activeTab" class="el-menu-vertical-demo" @select="handleMenuSelect">
-          <el-menu-item index="vad">语音活动检测</el-menu-item>
-          <el-menu-item index="asr">语音识别</el-menu-item>
-          <el-menu-item index="llm">大语言模型</el-menu-item>
-          <el-menu-item index="intent">意图识别</el-menu-item>
-          <el-menu-item index="tts">语音合成</el-menu-item>
-          <el-menu-item index="memory">记忆</el-menu-item>
-        </el-menu>
-        <div class="content-container">
-          <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>
-          <el-main style="padding: 20px; display: flex; flex-direction: column;">
-            <el-card class="model-card" shadow="always">
-              <div class="model-header">
-                <h2>大语言模型 (LLM)</h2>
-                <el-button type="primary" @click="addModel" class="add-btn">添加</el-button>
-              </div>
-              <div class="model-search-operate" style="margin-bottom: 20px;">
-                <el-input
-                  placeholder="请输入模型名称查询"
-                  v-model="search"
-                  style="width: 300px; margin-right: 10px"
-                />
-                <el-button @click="handleSearch">查询</el-button>
-              </div>
-              <el-table
-                :data="modelList"
-                style="width: 100%;"
-                border
-                stripe
-                header-cell-class-name="header-cell"
-              >
-                <el-table-column type="selection" width="55"></el-table-column>
-                <el-table-column label="模型名称" prop="candidateName"></el-table-column>
-                <el-table-column label="模型编码" prop="code"></el-table-column>
-                <el-table-column label="提供商" prop="supplier"></el-table-column>
-                <el-table-column label="是否启用">
-                  <template slot-scope="scope">
-                    <el-switch v-model="scope.row.isApplied" active-color="#409EFF" inactive-color="#C0CCDA"></el-switch>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作">
-                  <template slot-scope="scope">
-                    <el-button
-                      size="mini"
-                      @click="editModel(scope.row)"
-                      style="margin-right: 5px;"
-                      type="text"
-                      class="action-btn"
-                    >修改</el-button>
-                    <el-button
-                      size="mini"
-                      type="danger"
-                      @click="deleteModel(scope.row)"
-                      class="action-btn"
-                    >删除</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-              <div class="table-footer">
-                <el-button @click="selectAll" class="footer-btn">全选</el-button>
-                <el-button type="danger" @click="batchDelete" class="footer-btn">删除</el-button>
-              </div>
-            </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 class="copyright">
-              ©2025 xiaozhi-esp32-server
-            </div>
-            <ModelEditDialog :visible.sync="editDialogVisible" :modelData="editModelData" @save="handleModelSave"/>
-            <TtsModel :visible.sync="ttsDialogVisible" />
-            <AddModelDialog :visible.sync="addDialogVisible" :modelType="activeTab" @confirm="handleAddConfirm"/>
-          </el-main>
+<template>
+  <div class="welcome">
+    <HeaderBar />
+    <!-- 首页内容 -->
+    <el-main style="padding: 20px; display: flex; flex-direction: column;">
+      <div class="operation-bar">
+        <!-- 面包屑-->
+        <div class="breadcrumbs">
+          <el-breadcrumb separator="/">
+            <el-breadcrumb-item>控制台</el-breadcrumb-item>
+            <el-breadcrumb-item>模型配置</el-breadcrumb-item>
+          </el-breadcrumb>
+        </div>
+        <div class="right-operations">
+          <el-button v-if="activeTab === 'tts'" type="primary" plain size="small" @click="ttsDialogVisible = true">
+            语音设置
+          </el-button>
+          <el-button type="primary" plain size="small" @click="handleImport">
+            导入配置
+          </el-button>
+          <el-button type="success" plain size="small" @click="handleExport">
+            导出配置
+          </el-button>
         </div>
       </div>
-    </div>
-  </template>
+      <!-- 主体内容 -->
+      <div class="main-wrapper">
+        <div class="content-panel">
+          <!-- 左侧导航 -->
+          <el-menu :default-active="activeTab" class="nav-panel" @select="handleMenuSelect"
+                  style="background-size: cover; background-position: center;">
+            <el-menu-item index="vad">
+              语言活动检测
+            </el-menu-item>
+            <el-menu-item index="asr">
+              语音识别
+            </el-menu-item>
+            <el-menu-item index="llm">
+              大语言模型
+            </el-menu-item>
+            <el-menu-item index="intent">
+              意图识别
+            </el-menu-item>
+            <el-menu-item index="tts">
+              语音合成
+            </el-menu-item>
+            <el-menu-item index="memory">
+              记忆
+            </el-menu-item>
+          </el-menu>
 
-  <script>
-  import HeaderBar from "@/components/HeaderBar.vue";
-  import ModelEditDialog from "@/components/ModelEditDialog.vue";
-  import TtsModel from "@/components/TtsModel.vue";
-  import AddModelDialog from "@/components/AddModelDialog.vue";
+          <!-- 右侧内容 -->
+          <div class="content-area">
+            <div class="title-bar">
+              <div class="title-wrapper">
+              <h2 class="model-title">大语言模型（LLM）</h2>
+              <el-button type="primary" size="small" @click="addModel" class="add-btn">
+                添加
+              </el-button>
+              </div>
+              <div class="action-group">
+                <div class="search-group">
+                  <el-input placeholder="请输入模型名称查询" v-model="search" size="small" class="search-input" clearable/>
+                  <el-button type="primary" size="small" class="search-btn" @click="handleSearch">
+                    查询
+                  </el-button>
+                </div>
+              </div>
+            </div>
 
-  export default {
-    components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog},
-    data() {
-      return {
-        activeTab: 'llm',
-        search: '',
-        editDialogVisible: false,
-        editModelData: {},
-        ttsDialogVisible: false,
-        addDialogVisible: false, // 新增弹窗显示状态
-        modelList: [
-          { code: 'DeepSeek', candidateName: '深度求索', isApplied: true, supplier: '硅基流动' },
-          { code: 'SmartAssist', candidateName: '智能助手', isApplied: false, supplier: '智脑科技' },
-          { code: 'CogEngine', candidateName: '认知引擎', isApplied: true, supplier: '云智科技' },
-        ],
-        currentPage: 1,
-        pageSize: 4,
-        total: 20
-      };
+            <el-table :header-cell-style="{background: 'transparent'}" :data="modelList" border class="data-table" header-row-class-name="table-header" >
+              <el-table-column type="selection" width="55" align="center"></el-table-column>
+              <el-table-column label="模型名称" prop="candidateName" align="center"></el-table-column>
+              <el-table-column label="模型编码" prop="code" align="center"></el-table-column>
+              <el-table-column label="提供商" prop="supplier" align="center"></el-table-column>
+              <el-table-column label="是否启用" align="center" width="120">
+                <template slot-scope="scope">
+                  <el-switch v-model="scope.row.isApplied" class="custom-switch" :active-color="null" :inactive-color="null"/>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template slot-scope="scope">
+                  <el-button type="text" size="mini" @click="editModel(scope.row)" class="edit-btn">
+                    修改
+                  </el-button>
+                  <el-button type="text" size="mini" @click="deleteModel(scope.row)" class="delete-btn">
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            
+            <div class="table-footer">
+              <div class="batch-actions">
+                <el-button size="mini" @click="selectAll">全选</el-button>
+                <el-button size="mini" type="danger" icon="el-icon-delete" @click="batchDelete">
+                  删除
+                </el-button>
+              </div>
+              <div class="pagination-container">
+              <el-pagination @current-change="handleCurrentChange" background :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total"/>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <ModelEditDialog :visible.sync="editDialogVisible" :modelData="editModelData" @save="handleModelSave"/>
+        <TtsModel :visible.sync="ttsDialogVisible" />
+        <AddModelDialog :visible.sync="addDialogVisible" :modelType="activeTab" @confirm="handleAddConfirm"/>
+      </div>
+    </el-main>
+    <!-- 底部 -->
+    <Footer :visible="true" />
+  </div>
+</template>
+
+<script>
+import HeaderBar from "@/components/HeaderBar.vue";
+import ModelEditDialog from "@/components/ModelEditDialog.vue";
+import TtsModel from "@/components/TtsModel.vue";
+import AddModelDialog from "@/components/AddModelDialog.vue";
+import Footer from '@/components/Footer.vue'
+
+export default {
+  components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog,Footer },
+  data() {
+    return {
+      addDialogVisible: false,
+      activeTab: 'llm',
+      search: '',
+      editDialogVisible: false,
+      editModelData: {},
+      ttsDialogVisible: false,
+      modelList: [
+        { code: 'DeepSeek', candidateName: '深度求索', isApplied: true, supplier: '硅基流动' },
+        { code: 'SmartAssist', candidateName: '智能助手', isApplied: false, supplier: '智脑科技' },
+        { code: 'CogEngine', candidateName: '认知引擎', isApplied: true, supplier: '云智科技' },
+      ],
+      currentPage: 1,
+      pageSize: 4,
+      total: 20
+    };
+  },
+  methods: {
+    handleMenuSelect(index) {
+      this.activeTab = index;
     },
-    methods: {
-      handleMenuSelect(index) {
-        this.activeTab = index;
-      },
-      handleSearch() {
-        console.log('查询：', this.search);
-      },
-      batchDelete() {
-        console.log('批量删除');
-      },
-      // 修改addModel方法
-      addModel() {
-        this.addDialogVisible = true;
-      },
-      // 新增处理方法
-      handleAddConfirm(formData) {
-        // 这里处理添加模型的逻辑
-        console.log('新增模型数据:', formData);
-        // 模拟添加到列表
-        this.modelList.unshift({
-          code: formData.modelCode,
-          candidateName: formData.modelName,
-          supplier: formData.supplier,
-          isApplied: formData.isEnabled
-        });
-        this.$message.success('模型添加成功');
-      },
-      editModel(model) {
-        this.editModelData = {
-          code: model.code,
-          name: model.candidateName,
-          supplier: model.supplier,
-        };
-        this.editDialogVisible = true;
-      },
-      deleteModel(model) {
-        console.log('删除：', model);
-      },
-      handleCurrentChange(page) {
-        this.currentPage = page;
-        console.log('当前页码：', page);
-      },
-      handleImportExport() {
-        console.log('导入导出');
-      },
-      handleModelSave(formData) {
-        console.log('保存的模型数据：', formData);
-      },
-      selectAll() {
-        console.log('全选');
-      }
+    handleSearch() {
+      console.log('查询：', this.search);
+    },
+    batchDelete() {
+      console.log('批量删除');
+    },
+    addModel() {
+      this.addDialogVisible = true;
+    },
+    editModel(model) {
+      this.editModelData = {
+        code: model.code,
+        name: model.candidateName,
+        supplier: model.supplier,
+      };
+      this.editDialogVisible = true;
+    },
+    deleteModel(model) {
+      console.log('删除：', model);
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page;
+      console.log('当前页码：', page);
+    },
+    handleImport() {
+      console.log('导入配置');
+    },
+    handleExport() {
+      console.log('导出配置');
+    },
+    handleModelSave(formData) {
+      console.log('保存的模型数据：', formData);
+    },
+    selectAll() {
+      console.log('全选');
+    },
+    handleAddConfirm(newModel) {
+      console.log('新增模型数据:', newModel);
     }
-  };
-  </script>
+  },
+};
+</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;
-  }
+<style scoped>
+.breadcrumbs{
+  /* padding: 10px 0 0 5px; */
+}
 
-  .model-container {
-    display: flex;
-    margin-top: 25px;
-  }
+::v-deep .el-table tr{
+  background: transparent;
+}
+.welcome {
+  min-width: 900px;
+  min-height: 506px;
+  height: 100vh;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background-size: cover;
+  background: linear-gradient(to bottom right, #dce8ff, #e4eeff, #e6cbfd) center;
+  -webkit-background-size: cover;
+  -o-background-size: cover;
+}
 
-  .el-menu-vertical-demo {
-    width: 250px;
-    margin-right: 20px;
-    background-color: #f8f9fa;
-  }
+.main-wrapper {
+  /* margin: 5px 24px; */
+  background-image: url("@/assets/home/background.png");
+  border-radius: 15px;
+  min-height: 600px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
 
-  .content-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
+.operation-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  /* padding: 16px 24px; */
+}
 
-  .model-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-  }
+.content-panel {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+  border-radius: 15px;
+  background: transparent;
+}
 
-  .model-search-operate {
-    display: flex;
-    align-items: center;
-  }
+.nav-panel {
+  width: 18%;
+  min-width: 200px;
+  height: 100%;
+  border-right: 1px solid #ebeef5;
+  background-size: cover;
+  background: url("../assets/model/model.png") no-repeat center;
+  padding: 16px 0;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
 
-  .model-search-operate > * {
-    margin-right: 10px;
-  }
+.nav-panel .el-menu-item {
+  height: 48px;
+  line-height: 48px;
+  border-radius: 4px;
+  transition: all 0.3s;
+  display: flex !important;
+  justify-content: flex-end;
+  padding-right: 12px !important;
+  width: fit-content;
+  margin: 8px 12px 8px auto;
+  min-width: unset;
+}
 
-  .el-table__header th {
-    background-color: #f5f7fa;
-    color: #606266;
-    font-weight: 500;
-  }
+.nav-panel .el-menu-item.is-active {
+  background-image:linear-gradient(-45deg,#ecf5ff,#cfe4f9);
+  /* background: #ecf5ff; */
+  color: #409EFF;
+  border-right: 3px solid #409EFF;
+}
 
-  .model-card {
-    background: #fff;
-    border-radius: 12px;
-    padding: 20px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  }
+.nav-panel .el-menu-item:hover {
+  background-image:linear-gradient(-45deg,#ecf5ff,#cfe4f9);
+}
 
-  .import-export-btn {
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: flex-end;
-    margin-right: 40px;
-  }
+.content-area {
+  flex: 1;
+  padding: 24px;
+  height: 100%;
+  min-width: 600px;
+  overflow-x: auto;
 
-  .pagination-container {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-end;
-  }
+}
 
-  .table-footer {
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-  }
+.title-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: nowrap;
+}
 
-  .footer-btn {
-    margin-right: 10px;
-  }
+.model-title {
+  font-size: 18px;
+  color: #303133;
+  margin: 0;
+}
 
-  .copyright {
-    font-size: 12px;
-    font-weight: 400;
-    color: #979db1;
-    margin-top: auto;
-    padding-top: 30px;
-    text-align: center;
-  }
+.action-group {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
 
-  .action-btn {
-    padding: 0 8px;
-  }
+.search-group {
+  display: flex;
+  gap: 8px;
+}
 
-  .header-cell {
-    font-weight: 500;
-  }
+.search-input {
+  width: 240px;
+}
+
+.search-btn {
+  background: linear-gradient(135deg, #6B8CFF, #A966FF);
+  border: none;
+  color: white;
+}
+
+.data-table {
+  border-radius: 6px;
+  overflow: hidden;
+  background-color: transparent !important;
+
+}
+
+.data-table /deep/ .el-table__row {
+  background-color: transparent !important;
+}
+
+.table-header th {
+  background-color: transparent !important;
+  color: #606266;
+  font-weight: 600;
+}
+
+.table-footer {
+  margin-top: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+  width: 100%;
+}
+
+.batch-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.copyright {
+  text-align: center;
+  color: #979db1;
+  font-size: 12px;
+  font-weight: 400;
+  margin-top: auto;
+  padding: 30px 0 20px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+}
+
+.edit-btn {
+  color: #409EFF !important;
+}
+
+.delete-btn {
+  color: #F56C6C !important;
+}
+
+.add-btn {
+  background: #87CEFA;
+  border: none;
+  color: white;
+  padding: 8px 16px;
+}
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.batch-actions .el-button:first-child {
+  background: linear-gradient(135deg, #409EFF, #6B8CFF);
+  border: none;
+  color: white;
+}
+
+.batch-actions .el-button:first-child:hover {
+  background: linear-gradient(135deg, #3A8EE6, #5A7CFF);
+}
+
+.el-table th /deep/ .el-table__cell {
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  background-color: transparent !important;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+}
+
+
+</style>
 
-  .add-btn {
-    margin-right: 830px;
-    padding: 8px 16px;
-    border-radius: 4px;
-    background-color: #409eff;
-    color: white;
-    border: none;
-    cursor: pointer;
-  }
-  </style>

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

@@ -24,9 +24,9 @@
             type="selection"
             width="55">
             </el-table-column>
-          <el-table-column label="用户Id" prop="user_id"></el-table-column>
+          <el-table-column label="用户Id" prop="userid"></el-table-column>
           <el-table-column label="手机号码" prop="mobile"></el-table-column>
-          <el-table-column label="设备数量" prop="device_count"></el-table-column>
+          <el-table-column label="设备数量" prop="deviceCount"></el-table-column>
           <el-table-column label="状态" prop="status"></el-table-column>
           <el-table-column label="操作">
             <template slot-scope="scope">
@@ -77,6 +77,7 @@ import adminApi from '@/apis/module/admin';
 
 
 export default {
+  name: 'UserManagement',
   components: { HeaderBar },
   data() {
     return {
@@ -95,7 +96,7 @@ export default {
   created() {
     adminApi.getUserList(({data}) => {
       //mock偶尔会返回-1导致出错，又会返回两个list，所以这里只取第一个
-      this.userList = data.data[0].list;
+      this.userList = data.data.list;
       console.log('用户列表：', this.userList);
     })
   },

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

@@ -198,6 +198,7 @@ export default {
   margin-left: 75px;
   margin-top: 15px;
   cursor: pointer;
+  width: fit-content;
 
   .left-add {
     width: 105px;

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

@@ -36,11 +36,11 @@
         <!-- 分页 -->
         <el-pagination background :current-page="page.pageNo" :page-size="page.pageSize" :pager-count="5" layout="prev, pager, next" :total="page.total" style="margin-top: 4px;text-align: right;"></el-pagination>
       </div>
-      <!-- 底部 -->
-      <Footer :visible="true" />
-      <!-- 添加设备OTA对话框 -->
-      <AddDeviceOtaDialog :visible.sync="addDeviceOtaDialogVisible" :data="otaData" @confirmSave="handleSaveDeviceOta" @confirmUpdate="handleUpdateDeviceOta" />
     </el-main>
+    <!-- 底部 -->
+    <Footer :visible="true" />
+    <!-- 添加设备OTA对话框 -->
+    <AddDeviceOtaDialog :visible.sync="addDeviceOtaDialogVisible" :data="otaData" @confirmSave="handleSaveDeviceOta" @confirmUpdate="handleUpdateDeviceOta" />
   </div>
 </template>
 

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

@@ -37,8 +37,8 @@
               <div style="display: flex;gap: 8px;align-items: center;">
                 <div style="flex:1;">
                   <el-select v-model="form.ttsVoiceId" placeholder="请选择" style="width: 100%;">
-                    <el-option v-for="item in options" :key="item.value" :label="item.label"
-                               :value="item.value">
+                    <el-option v-for="item in ttsVoices" :key="item.id" :label="item.name"
+                               :value="item.id">
                     </el-option>
                   </el-select>
                 </div>
@@ -65,8 +65,8 @@
               <template slot="label">
                 <div style="line-height: 20px;">{{model.label}}</div>
               </template>
-              <el-select v-model="form.model[model.key]" filterable placeholder="请选择" style="width: 100%;">
-                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+              <el-select v-model="form[model.key+'ModelId']" filterable placeholder="请选择" style="width: 100%;" disabled>
+                <el-option v-for="item in model.list" :key="item.id" :label="item.modelName" :value="item.id"/>
               </el-select>
             </el-form-item>
             <el-form-item label="" class="lh-form-item" style="margin-top: -25px;">
@@ -98,6 +98,7 @@
 import Api from '@/apis/api';
 import HeaderBar from "@/components/HeaderBar.vue";
 import Footer from "@/components/Footer.vue";
+import {getUUID, goToPage, showDanger, showSuccess} from '@/utils'
 
 export default {
   name: 'RoleConfigPage',
@@ -105,41 +106,37 @@ export default {
   data() {
     return {
       agentId: this.$route.query.agentId,
-      agentName: this.$route.query.agentName,
       form: {
         agentCode:"",
         agentName:"",
         asrModelId:"",
         intentModelId:"",
         llmModelId:"",
-        memModelId:"",
+        memoryModelId:"",
         systemPrompt:"",
         ttsModelId:"",
         ttsVoiceId:"",
         vadModelId:"",
         model:{}
       },
-      options: [
-        { value: '选项1', label: '黄金糕' },
-        { value: '选项2', label: '双皮奶' }
+      ttsVoices: [],
+      models: [
+        { label: '大语言模型(LLM)', key: 'llm', list: [] },
+        { label: '语音转文本模型(ASR)', key: 'asr', list: [] },
+        { label: '语音活动检测模型(VAD)', key: 'vad', list: [] },
+        { label: '语音生成模型(TTS)', key: 'tts', list: [] },
+        { label: '意图分类模型(Intent)', key: 'intent', list: [] },
+        { label: '记忆增强模型(Memory)', key: 'memory', list: [] }
       ],
-      models: [],
-      //[
-      //   { label: '大语言模型(LLM)', key: 'llm' },
-      //   { label: '语音转文本模型(ASR)', key: 'asr' },
-      //   { label: '语音活动检测模型(VAD)', key: 'vad' },
-      //   { label: '语音生成模型(TTS)', key: 'tts' },
-      //   { label: '意图分类模型(Intent)', key: 'intent' },
-      //   { label: '记忆增强模型(Memory)', key: 'memory' }
-      // ],
-      templates: ['通用男声','通用女声','阳光男生','奶气萌娃']
-
+      templates: []
     }
   },
   mounted() {
     // 获取智能体列表
     this.fetchAgentTemplateList();
     this.handleGetConfig();
+    this.fetchModelList();
+    this.getTtsVoicelList();
   },
   methods: {
     fetchAgentTemplateList() {
@@ -152,6 +149,30 @@ export default {
         }
       })
     },
+    fetchModelList() {
+      // 获取模型配置列表
+      Api.model.getModelList(({data}) => {
+        if (data.code === 0) {
+          let models = data.data;
+          this.models.map(model => {
+            model.list = models.filter(item => item.modelType.toLowerCase() === model.key)
+          })
+          console.log("models", this.models)
+        } else {
+          showDanger(data.msg)
+        }
+      })
+    },
+    getTtsVoicelList(ttsModelId) {
+      // 获取智能体列表
+      Api.model.getTtsVoiceList(ttsModelId || '',({data}) => {
+        if (data.code === 0) {
+          this.ttsVoices = data.data
+        } else {
+          showDanger(data.msg)
+        }
+      })
+    },
     handleGetConfig(){
       Api.agent.getAgentConfig(this.agentId, ({data}) => {
         if (data.code === 0) {
@@ -163,7 +184,13 @@ export default {
     },
     saveConfig() {
       // 此处写保存配置逻辑
-      this.$message.success('配置已保存')
+      Api.agent.saveAgentConfig(this.agentId, this.form, ({data}) => {
+        if (data.code === 0) {
+          showSuccess('保存成功')
+        } else {
+          showDanger(data.msg)
+        }
+      })
     },
     resetConfig() {
       this.$confirm('确定要重置配置吗？', '提示', {
@@ -185,8 +212,18 @@ export default {
     },
     // 处理选择模板的逻辑
     selectTemplate(template) {
-      this.form.name = template;
-      this.$message.success(`已选择模板：${template}`);
+      Object.assign(this.form,{
+        agentCode: template.agentCode,
+        llmModelId: template.llmModelId,
+        asrModelId: template.asrModelId,
+        vadModelId: template.vadModelId,
+        ttsModelId: template.ttsModelId,
+        ttsVoiceId: template.ttsVoiceId,
+        intentModelId: template.intentModelId,
+        memoryModelId: template.memoryModelId,
+        systemPrompt: template.systemPrompt
+      })
+      this.$message.success(`已选择模板：${template.agentName}`);
     }
   }
 }