Merge pull request #707 from xinnan-tech/web-api-model-modify

Web api model modify

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

@@ -159,5 +159,23 @@ export default {
           })
         }).send()
     },
-
+    // 更新模型配置
+    updateModel(params, callback) {
+      const { modelType, provideCode, id, formData } = params;
+      RequestService.sendRequest()
+        .url(`${getServiceUrl()}/models/${modelType}/${provideCode}/${id}`)
+        .method('PUT')
+        .data(formData)
+        .success((res) => {
+          RequestService.clearRequestTime();
+          callback(res);
+        })
+        .fail((err) => {
+          console.error('更新模型失败:', err);
+          this.$message.error(err.msg || '更新模型失败');
+          RequestService.reAjaxFun(() => {
+            this.updateModel(params, callback);
+          });
+        }).send();
+    },
 }

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

@@ -6,7 +6,7 @@
         添加模型
       </div>
 
-      <!-- 关闭按钮 -->
+
       <button class="custom-close-btn" @click="handleClose">
         ×
       </button>
@@ -61,23 +61,27 @@
       </el-form>
 
       <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div>
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 15px;"></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: 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"></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"></el-input>
-          </el-form-item>
-        </div>
-
-        <el-form-item label="秘钥信息" prop="apiKey">
-          <el-input v-model="formData.configJson.apiKey" placeholder="请输入api_key" show-password
-            class="custom-input-bg"></el-input>
-        </el-form-item>
+      <el-form :model="formData.configJson" label-width="100px" label-position="left" class="custom-form">
+        <template v-for="(row, rowIndex) in chunkedCallInfoFields">
+          <div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0;">
+            <el-form-item
+              v-for="field in row"
+              :key="field.prop"
+              :label="field.label"
+              :prop="field.prop"
+              style="flex: 1;">
+              <el-input
+                v-model="formData.configJson[field.prop]"
+                :placeholder="field.placeholder"
+                :type="field.type || 'text'"
+                class="custom-input-bg"
+                :show-password="field.type === 'password'">
+              </el-input>
+            </el-form-item>
+          </div>
+        </template>
       </el-form>
     </div>
 
@@ -101,6 +105,8 @@ export default {
     return {
       providers: [],
       providersLoaded: false,
+      providerFields: [],
+      currentProvider: null,
       formData: {
         modelName: '',
         modelCode: '',
@@ -110,14 +116,35 @@ export default {
         remark: '',
         isEnabled: true,
         isDefault: true,
-        configJson: {
-          param1: '',
-          param2: '',
-          apiKey: ''
-        }
+        configJson: {}
       }
     }
   },
+  watch: {
+    visible(val) {
+      if(val) {
+        this.initConfigJson();
+      }
+    },
+    'formData.supplier'(newVal) {
+      this.currentProvider = this.providers.find(p => p.value === newVal);
+      this.providerFields = this.currentProvider?.fields || [];
+      this.initDynamicConfig();
+    }
+  },
+  computed: {
+    dynamicCallInfoFields() {
+      return this.providerFields;
+    },
+    chunkedCallInfoFields() {
+      const chunkSize = 2;
+      const result = [];
+      for (let i = 0; i < this.dynamicCallInfoFields.length; i += chunkSize) {
+        result.push(this.dynamicCallInfoFields.slice(i, i + chunkSize));
+      }
+      return result;
+    }
+  },
   methods: {
     loadProviders() {
       if (this.providersLoaded)
@@ -126,23 +153,54 @@ export default {
       Api.model.getModelProviders(this.modelType, (data) => {
         this.providers = data.map(item => ({
           label: item.name,
-          value: item.providerCode
+          value: item.providerCode,
+          fields: JSON.parse(item.fields || '[]').map(f => ({
+            label: f.label,
+            prop: f.key,
+            type: f.type === 'password' ? 'password' : 'text',
+            placeholder: `请输入${f.label}`
+          }))
         }))
         this.providersLoaded = true
       })
     },
+    initConfigJson() {
+      const defaultConfig = {};
+      this.providerFields.forEach(field => {
+        defaultConfig[field.prop] = '';
+      });
+      this.formData.configJson = { ...defaultConfig };
+    },
+    initDynamicConfig() {
+      const newConfig = {};
+      this.providerFields.forEach(field => {
+        newConfig[field.prop] = this.formData.configJson[field.prop] || '';
+      });
+      this.formData.configJson = newConfig;
+    },
     confirm() {
-      if (!this.formData.modelName || !this.formData.modelCode || !this.formData.supplier ||
-        !this.formData.configJson.param1 || !this.formData.configJson.param2 || !this.formData.configJson.apiKey) {
-        this.$message.error('请填写所有必填字段');
+      if (!this.formData.supplier) {
+        this.$message.error('请选择供应器');
         return;
       }
 
-      this.$emit('confirm', {
-        ...this.formData,
+      const submitData = {
+        modelName: this.formData.modelName || '',
+        modelCode: this.formData.modelCode || '',
+        supplier: this.formData.supplier,
+        sort: this.formData.sort || 1,
+        docLink: this.formData.docLink || '',
+        remark: this.formData.remark || '',
+        isEnabled: this.formData.isEnabled ? 1 : 0,
+        isDefault: this.formData.isDefault ? 1 : 0,
         provideCode: this.formData.supplier,
-        configJson: this.formData.configJson
-      });
+        configJson: {
+          ...this.formData.configJson,
+          type: this.formData.supplier
+        }
+      };
+
+      this.$emit('confirm', submitData);
       this.$emit('update:visible', false);
       this.resetForm();
     },
@@ -156,15 +214,14 @@ export default {
         remark: '',
         isEnabled: true,
         isDefault: true,
-        configJson: {
-          param1: '',
-          param2: '',
-          apiKey: ''
-        }
+        configJson: {}
       };
       // 重置加载状态
       this.providers = [];
       this.providersLoaded = false;
+      // 重置字段配置
+      this.providerFields = [];
+      this.currentProvider = null;
     },
     handleClose() {
       this.resetForm();

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

@@ -15,11 +15,11 @@
         <div style="display: flex; align-items: center; gap: 20px;">
           <div style="display: flex; align-items: center;">
             <span style="margin-right: 8px;">是否启用</span>
-                <el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
+            <el-switch v-model="form.isEnabled" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
           </div>
           <div style="display: flex; align-items: center;">
             <span style="margin-right: 8px;">设为默认</span>
-                <el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
+            <el-switch v-model="form.isDefault" :active-value="1" :inactive-value="0" class="custom-switch"></el-switch>
           </div>
         </div>
       </div>
@@ -38,7 +38,7 @@
 
         <div style="display: flex; gap: 20px; margin-bottom: 0;">
           <el-form-item label="供应器" prop="supplier" style="flex: 1;">
-            <el-select v-model="form.modelType" placeholder="请选择" class="custom-select custom-input-bg"
+            <el-select v-model="form.configJson.type" placeholder="请选择" class="custom-select custom-input-bg"
               style="width: 100%;" @focus="loadProviders" filterable>
               <el-option v-for="item in providers" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
@@ -59,21 +59,26 @@
       </el-form>
 
       <div style="font-size: 20px; font-weight: bold; color: #3d4566; margin-bottom: 15px;">调用信息</div>
-      <div style="height: 2px; background: #e9e9e9; margin-bottom: 15px;"></div>
+      <div style="height: 2px; background: #e9e9e9; margin-bottom: 22px;"></div>
 
-      <el-form :model="form" label-width="100px" label-position="left" class="custom-form">
-        <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-          <el-form-item label="模型名称" prop="modelName" style="flex: 0.5; margin-bottom: 0;">
-            <el-input v-model="form.name" placeholder="请输入model_name" class="custom-input-bg"></el-input>
-          </el-form-item>
-          <el-form-item label="接口地址" prop="apiUrl" style="flex: 1; margin-bottom: 0;">
-            <el-input v-model="form.apiUrl" placeholder="请输入base_url" class="custom-input-bg"></el-input>
-          </el-form-item>
-        </div>
-
-        <el-form-item label="秘钥信息" prop="apiKey">
-          <el-input v-model="form.apiKey" placeholder="请输入api_key" show-password class="custom-input-bg"></el-input>
-        </el-form-item>
+      <el-form :model="form.configJson" ref="callInfoForm" label-width="100px" label-position="left" class="custom-form">
+        <template v-for="(row, rowIndex) in chunkedCallInfoFields">
+          <div :key="rowIndex" style="display: flex; gap: 20px; margin-bottom: 0;">
+            <el-form-item v-for="field in row"
+              :key="field.prop"
+              :label="field.label"
+              :prop="field.prop"
+              style="flex: 1;">
+              <el-input
+                v-model="form.configJson[field.prop]"
+                :placeholder="field.placeholder"
+                :type="field.type || 'text'"
+                class="custom-input-bg"
+                :show-password="field.type === 'password'">
+              </el-input>
+            </el-form-item>
+          </div>
+        </template>
       </el-form>
     </div>
 
@@ -89,7 +94,6 @@
 import Api from '@/apis/api';
 
 const DEFAULT_CONFIG_JSON = {
-  provider: "",
   type: "",
   base_url: "",
   model_name: "",
@@ -97,8 +101,8 @@ const DEFAULT_CONFIG_JSON = {
   raw: {},
   config: {
     keyComparator: {},
-    ignoreError: 0,
-    ignoreCase: 0,
+    ignoreError: false,
+    ignoreCase: false,
     dateFormat: "",
     ignoreNullValue: false,
     transientSupport: false,
@@ -111,7 +115,7 @@ const DEFAULT_CONFIG_JSON = {
 
 export default {
   name: "ModelEditDialog",
-    props: {
+  props: {
     visible: { type: Boolean, default: false },
     modelData: {
       type: Object,
@@ -135,12 +139,62 @@ export default {
         docLink: "",
         remark: "",
         sort: 0,
-        apiKey: "",
-        apiUrl: "",
         configJson: JSON.parse(JSON.stringify(DEFAULT_CONFIG_JSON))
       }
     };
   },
+  computed: {
+    callInfoFields() {
+      const fieldsMap = {
+        llm: [
+            { label: '模型名称', prop: 'model_name', placeholder: '请输入model_name' },
+            { label: '接口地址', prop: 'base_url', placeholder: '请输入base_url' },
+            { label: '秘钥信息', prop: 'api_key', placeholder: '请输入api_key', type: 'password' }
+        ],
+        vad: [
+            { label: '模型名称', prop: 'model_name', placeholder: '请输入model_name' },
+            { label: '模型目录', prop: 'model_dir', placeholder: '请输入model_dir' },
+            { label: '阈值', prop: 'threshold', placeholder: '请输入threshold' },
+            { label: '静音时长', prop: 'min_silence_duration_ms', placeholder: '请输入min_silence_duration_ms' },
+            { label: '接口地址', prop: 'base_url', placeholder: '请输入base_url' },
+            { label: '秘钥信息', prop: 'api_key', placeholder: '请输入api_key', type: 'password' }
+        ],
+        asr: [
+            { label: '模型名称', prop: 'model_name', placeholder: '请输入model_name' },
+            { label: '集群', prop: 'cluster', placeholder: '请输入cluster' },
+            { label: '接口地址', prop: 'base_url', placeholder: '请输入base_url' },
+            { label: '秘钥信息', prop: 'api_key', placeholder: '请输入api_key', type: 'password' }
+        ],
+        intent: [
+            { label: '模型名称', prop: 'model_name', placeholder: '请输入model_name' },
+            { label: 'LLM模型', prop: 'llm', placeholder: '请输入llm' },
+            { label: '接口地址', prop: 'base_url', placeholder: '请输入base_url' },
+            { label: '秘钥信息', prop: 'api_key', placeholder: '请输入api_key', type: 'password' }
+        ],
+        tts: [
+            { label: '模型名称', prop: 'model_name', placeholder: '请输入model_name' },
+            { label: '语音ID', prop: 'voice_id', placeholder: '请输入voice_id' },
+            { label: '接口地址', prop: 'base_url', placeholder: '请输入base_url' },
+            { label: '秘钥信息', prop: 'api_key', placeholder: '请输入api_key', type: 'password' }
+        ],
+        memory: [
+            { label: '模型名称', prop: 'model_name', placeholder: '请输入model_name' },
+            { label: '接口地址', prop: 'base_url', placeholder: '请输入base_url' },
+            { label: '秘钥信息', prop: 'api_key', placeholder: '请输入api_key', type: 'password' }
+        ]
+      };
+
+      return fieldsMap[this.modelType] || [];
+    },
+    chunkedCallInfoFields() {
+      const chunkSize = 2;
+      const result = [];
+      for (let i = 0; i < this.callInfoFields.length; i += chunkSize) {
+        result.push(this.callInfoFields.slice(i, i + chunkSize));
+      }
+      return result;
+    },
+  },
   watch: {
     modelType() {
       this.resetProviders()
@@ -169,8 +223,6 @@ export default {
         docLink: "",
         remark: "",
         sort: 0,
-        apiKey: "",
-        apiUrl: "",
         configJson: JSON.parse(JSON.stringify(DEFAULT_CONFIG_JSON))
       };
     },
@@ -184,14 +236,18 @@ export default {
           if (data.code === 0 && data.data) {
             const model = data.data;
 
-            this.loadProviders();
-
             let configJson = model.configJson || {};
             if (typeof configJson !== 'object' || Array.isArray(configJson)) {
               console.warn('Invalid configJson format, using default');
               configJson = {};
             }
 
+            this.callInfoFields.forEach(field => {
+              if (!configJson.hasOwnProperty(field.prop)) {
+                configJson[field.prop] = '';
+              }
+            });
+
             this.form = {
               id: model.id || "",
               modelType: model.modelType || "",
@@ -202,9 +258,6 @@ export default {
               docLink: model.docLink || "",
               remark: model.remark || "",
               sort: model.sort || 0,
-              apiKey: configJson.api_key || "",
-              apiUrl: configJson.base_url || "",
-              name:configJson.model_name,
               configJson: {
                 ...JSON.parse(JSON.stringify(DEFAULT_CONFIG_JSON)),
                 ...configJson,
@@ -219,23 +272,27 @@ export default {
       }
     },
     handleSave() {
+      const provideCode = this.form.configJson.type;
+      const { provider, ...restConfigJson } = this.form.configJson;
       const formData = {
-        modelCode: this.form.code,
-        modelName: this.form.name,
-        supplier: this.form.supplier,
+        id: this.form.id,
+        modelCode: this.form.modelCode,
+        modelName: this.form.modelName,
         isDefault: this.form.isDefault ? 1 : 0,
-        isEnabled: this.form.isEnable ? 1 : 0,
-        docLink: this.form.docUrl,
-        sort: this.form.sort,
+        isEnabled: this.form.isEnabled ? 1 : 0,
+        docLink: this.form.docLink,
         remark: this.form.remark,
+        sort: this.form.sort || 0,
         configJson: {
-          provider: this.form.supplier,
-          modelName: this.form.modelName,
-          apiUrl: this.form.apiUrl,
-          apiKey: this.form.apiKey
+          ...restConfigJson,
+          config: {
+            ...restConfigJson.config,
+            ignoreError: !!restConfigJson.config?.ignoreError,
+            ignoreCase: !!restConfigJson.config?.ignoreCase,
+          }
         }
       };
-      this.$emit("save", formData);
+      this.$emit("save", { provideCode, formData });
       this.dialogVisible = false;
     },
     loadProviders() {
@@ -249,7 +306,6 @@ export default {
         this.providersLoaded = true;
       });
     },
-
   }
 };
 </script>
@@ -414,4 +470,22 @@ export default {
 .custom-input-bg .el-input__inner {
   height: 32px;
 }
+
+
+.custom-form .el-form-item {
+  margin-bottom: 20px;
+}
+
+
+.custom-input-bg .el-input__inner {
+  height: 32px;
+}
+
+
+.custom-form .el-form-item__label {
+  color: #3d4566;
+  font-weight: normal;
+  text-align: right;
+  padding-right: 20px;
+}
 </style>

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

@@ -53,7 +53,7 @@
             </div>
             <div class="action-group">
               <div class="search-group">
-                <el-input placeholder="请输入模型名称查询" v-model="search" size="small" class="search-input" clearable />
+                <el-input placeholder="请输入模型名称查询" v-model="search" size="small" class="search-input" clearable @keyup.enter="handleSearch" />
                 <el-button type="primary" size="small" class="search-btn" @click="handleSearch">
                   查询
                 </el-button>
@@ -212,8 +212,8 @@ export default {
       this.loadData();
     },
     handleSearch() {
-      // TODO: 查询
-      console.log('查询：', this.search);
+      this.currentPage = 1;
+      this.loadData();
     },
     // 批量删除
     batchDelete() {
@@ -301,9 +301,21 @@ export default {
       // TODO: 导出配置
       console.log('导出配置');
     },
-    handleModelSave(formData) {
-      // TODO: 保存模型数据
-      console.log('保存的模型数据：', formData);
+    handleModelSave({ provideCode, formData }) {
+      const modelType = this.activeTab;
+      const id = formData.id;
+      Api.model.updateModel(
+        { modelType, provideCode, id, formData },
+        ({ data }) => {
+          if (data.code === 0) {
+            this.$message.success('保存成功');
+            this.loadData();
+            this.editDialogVisible = false;
+          } else {
+            this.$message.error(data.msg || '保存失败');
+          }
+        }
+      );
     },
     selectAll() {
       if (this.isAllSelected) {