完成获取智能体配置

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

@@ -112,22 +112,6 @@ export default {
                 });
             }).send();
     },
-    // 获取设备配置
-    getDeviceConfig(device_id, callback) {
-        RequestService.sendRequest()
-            .url(`${getServiceUrl()}/api/v1/user/configDevice/${device_id}`)
-            .method('GET')
-            .success((res) => {
-                RequestService.clearRequestTime();
-                callback(res);
-            })
-            .fail((err) => {
-                console.error('获取配置失败:', err);
-                RequestService.reAjaxFun(() => {
-                    this.getDeviceConfig(device_id, callback);
-                });
-            }).send();
-    },
     // 获取所有模型名称
     getModelNames(callback) {
         RequestService.sendRequest()
@@ -221,5 +205,21 @@ export default {
                 });
             }).send();
     },
+    // 获取智能体配置
+    getDeviceConfig(deviceId, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/agent/${deviceId}`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('获取配置失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.getDeviceConfig(deviceId, callback);
+                });
+            }).send();
+    },
 
 }

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

@@ -17,7 +17,7 @@
       音色模型：{{ device.ttsVoiceName }}
     </div>
     <div style="display: flex;gap: 10px;align-items: center;">
-      <div class="settings-btn" @click="$emit('configure')">
+      <div class="settings-btn" @click="handleConfigure">
         配置角色
       </div>
       <div class="settings-btn">
@@ -48,6 +48,9 @@ export default {
   methods: {
     handleDelete() {
       this.$emit('delete', this.device.agentId)
+    },
+    handleConfigure() {
+      this.$router.push({ path: '/role-config', query: { agentId: this.device.agentId } });
     }
   }
 }

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

@@ -4,14 +4,14 @@
       <div style="display: flex;align-items: center;gap: 10px;">
         <img alt="" src="@/assets/xiaozhi-logo.png" style="width: 42px;height: 42px;"/>
         <img alt="" src="@/assets/xiaozhi-ai.png" style="width: 58px;height: 12px;"/>
-        <div class="equipment-management" @click="goHome">
+        <div class="equipment-management" :class="{ 'active-tab': $route.path === '/home' }" @click="goHome">
           <img alt="" src="@/assets/home/equipment.png" style="width: 12px;height: 10px;"/>
           智能体管理
         </div>
-        <div class="equipment-management2" :class="{ 'active-tab': $route.path === '/user-management' }" @click="goUserManagement">
+        <div class="equipment-management" :class="{ 'active-tab': $route.path === '/user-management' }" @click="goUserManagement">
           用户管理
         </div>
-        <div class="equipment-management2" :class="{ 'active-tab': $route.path === '/model-config' }" @click="goModelConfig">
+        <div class="equipment-management" :class="{ 'active-tab': $route.path === '/model-config' }" @click="goModelConfig">
           模型配置
         </div>
       </div>
@@ -104,26 +104,7 @@ export default {
 </script>
 
 <style scoped>
-.equipment-management,
-.equipment-management2 {
-  cursor: pointer;
-}
-
 .equipment-management {
-  width: 82px;
-  height: 24px;
-  border-radius: 12px;
-  background: #5778ff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  font-weight: 500;
-  color: #fff;
-  font-size: 10px;
-}
-
-.equipment-management2 {
   width: 82px;
   height: 24px;
   border-radius: 12px;
@@ -137,9 +118,11 @@ export default {
   margin-left: 1px;
   align-items: center;
   transition: all 0.3s ease;
+  cursor: pointer;
+
 }
 
-.equipment-management2.active-tab {
+.equipment-management.active-tab {
   background: #5778ff !important;
   color: #fff !important;
 }

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

@@ -1,68 +1,93 @@
 <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 v-if="activeTab === 'tts'" type="primary" @click="ttsDialogVisible = true" style="margin-right: 10px;">模型设置</el-button>
-        <el-button size="small" @click="handleImportExport">导入导出配置</el-button>
+    <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" />
+        </el-main>
       </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)" style="margin-right: 10px;">修改</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>
-        <ModelEditDialog :visible.sync="editDialogVisible" :modelData="editModelData" @save="handleModelSave"/>
-        <TtsModel :visible.sync="ttsDialogVisible" />
-    </el-main>
   </div>
 </template>
 
@@ -75,16 +100,15 @@ export default {
   components: { HeaderBar, ModelEditDialog, TtsModel },
   data() {
     return {
-      activeTab: 'vad',
+      activeTab: 'llm',
       search: '',
       editDialogVisible: false,
       editModelData: {},
       ttsDialogVisible: false,
       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' },
+        { code: 'DeepSeek', candidateName: '深度求索', isApplied: true, supplier: '硅基流动' },
+        { code: 'SmartAssist', candidateName: '智能助手', isApplied: false, supplier: '智脑科技' },
+        { code: 'CogEngine', candidateName: '认知引擎', isApplied: true, supplier: '云智科技' },
       ],
       currentPage: 1,
       pageSize: 4,
@@ -92,19 +116,18 @@ export default {
     };
   },
   methods: {
-    // 查询
+    handleMenuSelect(index) {
+      this.activeTab = index;
+    },
     handleSearch() {
       console.log('查询：', this.search);
     },
-    // 批量删除
     batchDelete() {
       console.log('批量删除');
     },
-    // 增加
     addModel() {
       console.log('增加模型');
     },
-    // 修改
     editModel(model) {
       this.editModelData = {
         code: model.code,
@@ -113,7 +136,6 @@ export default {
       };
       this.editDialogVisible = true;
     },
-    // 删除
     deleteModel(model) {
       console.log('删除：', model);
     },
@@ -121,14 +143,15 @@ export default {
       this.currentPage = page;
       console.log('当前页码：', page);
     },
-    // 导入导出
     handleImportExport() {
       console.log('导入导出');
     },
     handleModelSave(formData) {
-      // 处理保存
       console.log('保存的模型数据：', formData);
     },
+    selectAll() {
+      console.log('全选');
+    }
   }
 };
 </script>
@@ -147,8 +170,31 @@ export default {
   -o-background-size: cover;
 }
 
-.model-search-operate {
+.model-container {
+  display: flex;
+  margin-top: 25px;
+}
+
+.el-menu-vertical-demo {
+  width: 250px;
+  margin-right: 20px;
+  background-color: #f8f9fa;
+}
+
+.content-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.model-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
+}
+
+.model-search-operate {
   display: flex;
   align-items: center;
 }
@@ -160,6 +206,7 @@ export default {
 .el-table__header th {
   background-color: #f5f7fa;
   color: #606266;
+  font-weight: 500;
 }
 
 .model-card {
@@ -169,22 +216,11 @@ export default {
   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;
-
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 40px;
 }
 
 .pagination-container {
@@ -193,7 +229,40 @@ export default {
   justify-content: flex-end;
 }
 
-::v-deep .el-tabs {
-  margin-left: 70px;
+.table-footer {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.footer-btn {
+  margin-right: 10px;
+}
+
+.copyright {
+  font-size: 12px;
+  font-weight: 400;
+  color: #979db1;
+  margin-top: auto;
+  padding-top: 30px;
+  text-align: center;
+}
+
+.action-btn {
+  padding: 0 8px;
+}
+
+.header-cell {
+  font-weight: 500;
+}
+
+.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/roleConfig.vue

@@ -17,7 +17,7 @@
           <div style="padding: 16px 24px;max-width: 792px;">
             <el-form-item label="助手昵称：">
               <div class="input-46" style="width: 100%; max-width: 412px;">
-                <el-input v-model="form.name"/>
+                <el-input v-model="form.agentName"/>
               </div>
             </el-form-item>
             <el-form-item label="角色模版：">
@@ -30,7 +30,7 @@
             <el-form-item label="角色音色：">
               <div style="display: flex;gap: 8px;align-items: center;">
                 <div class="input-46" style="flex:1.4;">
-                  <el-select v-model="form.timbre" placeholder="请选择" style="width: 100%;">
+                  <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>
@@ -45,13 +45,13 @@
             <el-form-item label="角色介绍：">
               <div class="textarea-box">
                 <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
-                          v-model="form.introduction" maxlength="2000" show-word-limit/>
+                          v-model="form.systemPrompt" maxlength="2000" show-word-limit/>
               </div>
             </el-form-item>
             <el-form-item label="记忆体：">
               <div class="textarea-box">
                 <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
-                          v-model="form.prompt" maxlength="1000"/>
+                          v-model="form.memModelld" maxlength="1000"/>
                 <div class="prompt-bottom">
                   <div style="display: flex;gap: 8px;align-items: center;">
                     <div style="color: #979db1;font-size: 11px;">当前记忆（每次对话后重新生成）</div>
@@ -60,7 +60,7 @@
                       清除
                     </div>
                   </div>
-                  <div style="color: #979db1;font-size:11px;">{{ form.prompt.length }}/1000</div>
+                  <div style="color: #979db1;font-size:11px;">{{ form.systemPrompt.length }}/1000</div>
                 </div>
               </div>
             </el-form-item>
@@ -106,33 +106,35 @@ export default {
     return {
       deviceMac: 'CC:ba:97:11:a6:ac',
       form: {
-        name: "",
-        timbre: "",
-        introduction: "",
-        prompt: "",
+        agentCode:"",
+        agentName: "",
+        ttsVoiceId: "",
+        systemPrompt: "",
+        langCode:"",
+        language:"",
+        sort:"",
         model: {
-          tts: "",
-          vad: "",
-          asr: "",
-          llm: "",
-          memory:"",
-          intent:""
+          ttsModelId: "",
+          vadModelId: "",
+          asrModelId:"",
+          llmModelId: "",
+          memModelId: "",
+          intentModelId: "",
         }
       },
-    options: [
-      { value: '选项1', label: '黄金糕' },
-      { value: '选项2', label: '双皮奶' }
-    ],
+      options: [
+        { value: '选项1', label: '黄金糕' },
+        { value: '选项2', label: '双皮奶' }
+      ],
       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' }
-    ],
+        { 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: ['台湾女友', '土豆子', '英语老师', '好奇小男孩', '汪汪队队长']
-
     }
   },
   methods: {
@@ -148,20 +150,57 @@ export default {
       }).then(() => {
         // 重置表单
         this.form = {
-          name: "",
-          timbre: "",
-          introduction: "",
-          prompt: "",
-          model: ""
+          agentCode:"",
+          agentName: "",
+          ttsVoiceId: "",
+          systemPrompt: "",
+          langCode:"",
+          language:"",
+          sort:"",
+          model: {
+            ttsModelId: "",
+            vadModelId: "",
+            asrModelId:"",
+            llmModelId: "",
+            memModelId: "",
+            intentModelId: "",
+          }
         }
         this.$message.success('配置已重置')
       }).catch(() => {
       })
     },
-    // 处理选择模板的逻辑
     selectTemplate(template) {
       this.form.name = template;
       this.$message.success(`已选择模板：${template}`);
+    },
+  fetchAgentConfig(agentId) {
+    import('@/apis/module/user').then(({ default: userApi }) => {
+      userApi.getDeviceConfig(agentId, ({ data }) => {
+        if (data.code === 0) {
+          this.form = {
+            ...this.form,
+            ...data.data,
+            model: {
+              ttsModelId: data.data.ttsModelId,
+              vadModelId: data.data.vadModelId,
+              asrModelId: data.data.asrModelId,
+              llmModelId: data.data.llmModelId,
+              memModelId: data.data.memModelId,
+              intentModelId: data.data.intentModelId
+            }
+          };
+        } else {
+          this.$message.error(data.msg || '获取配置失败');
+        }
+      });
+    });
+  }
+},
+  mounted() {
+    const agentId = this.$route.query.agentId;
+    if (agentId) {
+      this.fetchAgentConfig(agentId);
     }
   }
 }