Merge pull request #537 from xinnan-tech/web-vue-modelconfig

优化了”模型配置“页面

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

@@ -67,37 +67,6 @@ export default {
                 });
             }).send();
     },
-    // 获取所有模型名称
-    getModelNames(callback) {
-        RequestService.sendRequest()
-            .url(`${getServiceUrl()}/api/v1/models/names`)
-            .method('GET')
-            .success((res) => {
-                RequestService.clearRequestTime();
-                callback(res);
-            })
-            .fail(() => {
-                RequestService.reAjaxFun(() => {
-                    this.getModelNames(callback);
-                });
-            }).send();
-    },
-
-    // 获取模型音色
-    getModelVoices(modelName, callback) {
-        RequestService.sendRequest()
-            .url(`${getServiceUrl()}/api/v1/models/${modelName}/voices`)
-            .method('GET')
-            .success((res) => {
-                RequestService.clearRequestTime();
-                callback(res);
-            })
-            .fail(() => {
-                RequestService.reAjaxFun(() => {
-                    this.getModelVoices(modelName, callback);
-                });
-            }).send();
-    },
     // 获取智能体列表
     getAgentList(callback) {
         RequestService.sendRequest()
@@ -160,7 +129,7 @@ export default {
                 });
             }).send();
     },
-    // API接口代码修改
+    // 修改用户密码
     changePassword(oldPassword, newPassword, successCallback, errorCallback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/api/v1/user/change-password`)  // 修改URL

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

@@ -1,285 +1,376 @@
-  <template>
+<template>
-    <div class="welcome">
+  <div class="welcome">
-      <HeaderBar />
+    <HeaderBar />
-      <div class="model-container">
+
-        <el-menu :default-active="activeTab" class="el-menu-vertical-demo" @select="handleMenuSelect">
+      <div class="operation-bar">
-          <el-menu-item index="vad">语音活动检测</el-menu-item>
+
-          <el-menu-item index="asr">语音识别</el-menu-item>
+        <div class="right-operations">
-          <el-menu-item index="llm">大语言模型</el-menu-item>
+          <el-button v-if="activeTab === 'tts'" type="primary" plain size="small" @click="ttsDialogVisible = true">
-          <el-menu-item index="intent">意图识别</el-menu-item>
+            语音设置
-          <el-menu-item index="tts">语音合成</el-menu-item>
+          </el-button>
-          <el-menu-item index="memory">记忆</el-menu-item>
+          <el-button type="primary" plain size="small" @click="handleImport">
-        </el-menu>
+            导入配置
-        <div class="content-container">
+          </el-button>
-          <div class="import-export-btn">
+          <el-button type="success" plain size="small" @click="handleExport">
-            <el-button v-if="activeTab === 'tts'" type="primary" @click="ttsDialogVisible = true" style="margin-right: 10px;">
+            导出配置
-              模型设置
+          </el-button>
-            </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>
         </div>
       </div>
+    <!-- 主体内容 -->
+    <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">
+            <span class="menu-text">语言活动检测</span>
+          </el-menu-item>
+          <el-menu-item index="asr">
+            <span class="menu-text">语音识别</span>
+          </el-menu-item>
+          <el-menu-item index="llm">
+            <span class="menu-text">大语言模型</span>
+          </el-menu-item>
+          <el-menu-item index="intent">
+            <span class="menu-text">意图识别</span>
+          </el-menu-item>
+          <el-menu-item index="tts">
+            <span class="menu-text">语音合成</span>
+          </el-menu-item>
+          <el-menu-item index="memory">
+            <span class="menu-text">记忆</span>
+          </el-menu-item>
+        </el-menu>
+
+        <!-- 右侧内容 -->
+        <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">
+                <i class="el-icon-plus"></i>添加
+            </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>
+
+          <el-table :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>
+            <el-pagination small background :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total"/>
+          </div>
+        </div>
+      </div>
+
+      <ModelEditDialog :visible.sync="editDialogVisible" :modelData="editModelData" @save="handleModelSave"/>
+      <TtsModel :visible.sync="ttsDialogVisible" />
     </div>
-  </template>
 
-  <script>
+    <div class="copyright">
-  import HeaderBar from "@/components/HeaderBar.vue";
+        ©2025 xiaozhi-esp32-server
-  import ModelEditDialog from "@/components/ModelEditDialog.vue";
+      </div>
-  import TtsModel from "@/components/TtsModel.vue";
+    </div>
-  import AddModelDialog from "@/components/AddModelDialog.vue";
+</template>
 
-  export default {
+<script>
-    components: { HeaderBar, ModelEditDialog, TtsModel, AddModelDialog},
+import HeaderBar from "@/components/HeaderBar.vue";
-    data() {
+import ModelEditDialog from "@/components/ModelEditDialog.vue";
-      return {
+import TtsModel from "@/components/TtsModel.vue";
-        activeTab: 'llm',
+
-        search: '',
+export default {
-        editDialogVisible: false,
+  components: { HeaderBar, ModelEditDialog, TtsModel },
-        editModelData: {},
+  data() {
-        ttsDialogVisible: false,
+    return {
-        addDialogVisible: false, // 新增弹窗显示状态
+      activeTab: 'llm',
-        modelList: [
+      search: '',
-          { code: 'DeepSeek', candidateName: '深度求索', isApplied: true, supplier: '硅基流动' },
+      editDialogVisible: false,
-          { code: 'SmartAssist', candidateName: '智能助手', isApplied: false, supplier: '智脑科技' },
+      editModelData: {},
-          { code: 'CogEngine', candidateName: '认知引擎', isApplied: true, supplier: '云智科技' },
+      ttsDialogVisible: false,
-        ],
+      modelList: [
-        currentPage: 1,
+        { code: 'DeepSeek', candidateName: '深度求索', isApplied: true, supplier: '硅基流动' },
-        pageSize: 4,
+        { code: 'SmartAssist', candidateName: '智能助手', isApplied: false, supplier: '智脑科技' },
-        total: 20
+        { code: 'CogEngine', candidateName: '认知引擎', isApplied: true, supplier: '云智科技' },
-      };
+      ],
+      currentPage: 1,
+      pageSize: 4,
+      total: 20
+    };
+  },
+  methods: {
+    handleMenuSelect(index) {
+      this.activeTab = index;
     },
-    methods: {
+    handleSearch() {
-      handleMenuSelect(index) {
+      console.log('查询：', this.search);
-        this.activeTab = index;
+    },
-      },
+    batchDelete() {
-      handleSearch() {
+      console.log('批量删除');
-        console.log('查询：', this.search);
+    },
-      },
+    addModel() {
-      batchDelete() {
+      console.log('增加模型');
-        console.log('批量删除');
+    },
-      },
+    editModel(model) {
-      // 修改addModel方法
+      this.editModelData = {
-      addModel() {
+        code: model.code,
-        this.addDialogVisible = true;
+        name: model.candidateName,
-      },
+        supplier: model.supplier,
-      // 新增处理方法
+      };
-      handleAddConfirm(formData) {
+      this.editDialogVisible = true;
-        // 这里处理添加模型的逻辑
+    },
-        console.log('新增模型数据:', formData);
+    deleteModel(model) {
-        // 模拟添加到列表
+      console.log('删除：', model);
-        this.modelList.unshift({
+    },
-          code: formData.modelCode,
+    handleCurrentChange(page) {
-          candidateName: formData.modelName,
+      this.currentPage = page;
-          supplier: formData.supplier,
+      console.log('当前页码：', page);
-          isApplied: formData.isEnabled
+    },
-        });
+    handleImport() {
-        this.$message.success('模型添加成功');
+      console.log('导入配置');
-      },
+    },
-      editModel(model) {
+    handleExport() {
-        this.editModelData = {
+      console.log('导出配置');
-          code: model.code,
+    },
-          name: model.candidateName,
+    handleModelSave(formData) {
-          supplier: model.supplier,
+      console.log('保存的模型数据：', formData);
-        };
+    },
-        this.editDialogVisible = true;
+    selectAll() {
-      },
+      console.log('全选');
-      deleteModel(model) {
-        console.log('删除：', model);
-      },
-      handleCurrentChange(page) {
-        this.currentPage = page;
-        console.log('当前页码：', page);
-      },
-      handleImportExport() {
-        console.log('导入导出');
-      },
-      handleModelSave(formData) {
-        console.log('保存的模型数据：', formData);
-      },
-      selectAll() {
-        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;
   }
+};
+</script>
 
-  .model-container {
+<style scoped>
-    display: flex;
+.welcome {
-    margin-top: 25px;
+  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 {
+.main-wrapper {
-    width: 250px;
+  margin: 5px 50px;
-    margin-right: 20px;
+  background-image: url("@/assets/home/background.png");
-    background-color: #f8f9fa;
+  border-radius: 15px;
-  }
+  min-height: 580px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
 
-  .content-container {
+.operation-bar {
-    flex: 1;
+  display: flex;
-    display: flex;
+  justify-content: flex-end;
-    flex-direction: column;
+  align-items: center;
-  }
+  padding: 16px 24px;
+  border-bottom: 1px solid #ebeef5;
+}
 
-  .model-header {
+.content-panel {
-    display: flex;
+  flex: 1;
-    justify-content: space-between;
+  display: flex;
-    align-items: center;
+  overflow: hidden;
-    margin-bottom: 20px;
+  height: 100%;
-  }
+  border-radius: 15px;
+  background: transparent;
+}
 
-  .model-search-operate {
+.nav-panel {
-    display: flex;
+  width: 18%;
-    align-items: center;
+  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 > * {
+.nav-panel .el-menu-item {
-    margin-right: 10px;
+  height: 48px;
-  }
+  line-height: 40px;
+  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 {
+.nav-panel .el-menu-item.is-active {
-    background-color: #f5f7fa;
+  background: #ecf5ff;
-    color: #606266;
+  color: #409EFF;
-    font-weight: 500;
+  border-right: 3px solid #409EFF;
-  }
+}
 
-  .model-card {
+.menu-text {
-    background: #fff;
+  font-size: 14px;
-    border-radius: 12px;
+  color: #606266;
-    padding: 20px;
+  text-align: right;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  width: 100%;
-  }
+  padding-right: 8px;
+}
 
-  .import-export-btn {
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: flex-end;
-    margin-right: 40px;
-  }
 
-  .pagination-container {
+.content-area {
-    margin-top: 20px;
+  flex: 1;
-    display: flex;
+  padding: 24px;
-    justify-content: flex-end;
+  height: 100%;
-  }
+  min-width: 600px;
+  overflow-x: auto;
 
-  .table-footer {
+}
-    margin-top: 20px;
-    display: flex;
-    align-items: center;
-  }
 
-  .footer-btn {
+.title-bar {
-    margin-right: 10px;
+  display: flex;
-  }
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  flex-wrap: nowrap;
+}
 
-  .copyright {
+.model-title {
-    font-size: 12px;
+  font-size: 18px;
-    font-weight: 400;
+  color: #303133;
-    color: #979db1;
+  margin: 0;
-    margin-top: auto;
+}
-    padding-top: 30px;
-    text-align: center;
-  }
 
-  .action-btn {
+.action-group {
-    padding: 0 8px;
+  display: flex;
-  }
+  align-items: center;
+  gap: 16px;
+}
 
-  .header-cell {
+.search-group {
-    font-weight: 500;
+  display: flex;
-  }
+  gap: 8px;
+}
+
+.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;
+}
+
+.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);
+}
+
+
+</style>
 
-  .add-btn {
-    margin-right: 830px;
-    padding: 8px 16px;
-    border-radius: 4px;
-    background-color: #409eff;
-    color: white;
-    border: none;
-    cursor: pointer;
-  }
-  </style>