Merge pull request 'bug' (#130) from main into prod

Reviewed-on: #130

f/web-kboss/src/views/operation/modelInfoConfig/index.vue

@@ -10,28 +10,45 @@
               v-model="queryForm.modelName"
               size="small"
               clearable
-              placeholder="搜索模型名称"
+              placeholder="搜索模型/接口/描述"
+              @keyup.enter.native="handleSearch"
+              @clear="handleSearch"
             ></el-input>
           </el-form-item>
           <el-form-item label="类型">
-            <el-select v-model="queryForm.modelType" size="small" placeholder="全部">
+            <el-select v-model="queryForm.modelType" size="small" clearable filterable placeholder="全部" @change="handleSearch">
               <el-option label="全部" value=""></el-option>
-              <el-option label="文本生成" value="文本生成"></el-option>
-              <el-option label="图像生成" value="图像生成"></el-option>
-              <el-option label="语音合成" value="语音合成"></el-option>
+              <el-option
+                v-for="item in modelTypeOptions"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="供应商">
-            <el-select v-model="queryForm.provider" size="small" placeholder="全部">
+            <el-select
+              v-model="queryForm.provider"
+              size="small"
+              clearable
+              filterable
+              allow-create
+              default-first-option
+              placeholder="选择或输入供应商"
+              @change="handleSearch"
+            >
               <el-option label="全部" value=""></el-option>
-              <el-option label="OpenAI" value="OpenAI"></el-option>
-              <el-option label="Google" value="Google"></el-option>
-              <el-option label="开元云" value="开元云"></el-option>
+              <el-option
+                v-for="item in providerOptions"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
             </el-select> 
           </el-form-item>
           <el-form-item>
-            <el-button size="small" type="primary">查询</el-button>
-            <el-button size="small">重置</el-button>
+            <el-button size="small" type="primary" @click="handleSearch">查询</el-button>
+            <el-button size="small" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
         <el-button size="small" type="primary" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
@@ -39,7 +56,7 @@
     </section>
 
     <section class="table-card">
-      <el-tabs v-model="activeTab" class="config-tabs">
+      <el-tabs v-model="activeTab" class="config-tabs" @tab-click="handleTabChange">
         <el-tab-pane label="待上架" name="pending"></el-tab-pane>
         <el-tab-pane label="已上架" name="listed"></el-tab-pane>
       </el-tabs>
@@ -68,12 +85,16 @@
       </el-table>
 
       <div class="table-footer">
-        <span>共 {{ displayTableData.length }} 条</span>
-        <div class="pager">
-          <el-button size="mini">上一页</el-button>
-          <span>1 / 1</span>
-          <el-button size="mini">下一页</el-button>
-        </div>
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="filteredTableData.length"
+          :current-page.sync="currentPage"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        ></el-pagination>
       </div>
     </section>
 
@@ -100,13 +121,47 @@ export default {
         modelType: '',
         provider: ''
       },
-      tableData: []
+      tableData: [],
+      modelTypeOptions: [],
+      providerOptions: [],
+      currentPage: 1,
+      pageSize: 10
     }
   },
   computed: {
-    displayTableData() {
+    filteredTableData() {
       const targetStatus = this.activeTab === 'listed' ? 1 : 0
-      return this.tableData.filter(item => Number(item.listing_status || 0) === targetStatus)
+      const modelName = this.normalizeSearchText(this.queryForm.modelName)
+      const modelType = this.normalizeSearchText(this.queryForm.modelType)
+      const provider = this.normalizeSearchText(this.queryForm.provider)
+
+      return this.tableData.filter(item => {
+        if (Number(item.listing_status || 0) !== targetStatus) return false
+
+        const apiDoc = item.api_doc || {}
+        const nameText = this.normalizeSearchText([
+          item.model_name,
+          item.display_name,
+          item.llmid,
+          item.id,
+          item.description,
+          apiDoc.api_url,
+          apiDoc.curl_code,
+          apiDoc.python_code
+        ].join(' '))
+        const typeText = this.normalizeSearchText(item.model_type)
+        const providerText = this.normalizeSearchText(item.provider)
+
+        const nameMatched = !modelName || nameText.includes(modelName)
+        const typeMatched = !modelType || typeText === modelType || typeText.includes(modelType)
+        const providerMatched = !provider || providerText === provider
+
+        return nameMatched && typeMatched && providerMatched
+      })
+    },
+    displayTableData() {
+      const start = (this.currentPage - 1) * this.pageSize
+      return this.filteredTableData.slice(start, start + this.pageSize)
     }
   },
   created() {
@@ -115,13 +170,45 @@ export default {
   methods: {
     // 获取模型信息配置列表
     async getModelInfoConfigList() {
-      const res = await reqModelInfoConfigList()
+      const res = await reqModelInfoConfigList({
+        current_page: 1,
+        page_size: 1000
+      })
       console.log(res);
       if (res.status === true) {
-        this.tableData = res.data.model_list
+        const data = res.data || {}
+        this.tableData = Array.isArray(data.model_list) ? data.model_list : []
+        this.providerOptions = Array.isArray(data.provider_list) ? data.provider_list.filter(Boolean) : []
+        this.modelTypeOptions = Array.isArray(data.model_type_list) ? data.model_type_list.filter(Boolean) : []
+        this.currentPage = 1
       }
       
     },
+    normalizeSearchText(value) {
+      return String(value || '').trim().toLowerCase()
+    },
+    handleSearch() {
+      this.currentPage = 1
+    },
+    resetQuery() {
+      this.queryForm = {
+        modelName: '',
+        modelType: '',
+        provider: ''
+      }
+      this.currentPage = 1
+      this.getModelInfoConfigList()
+    },
+    handleTabChange() {
+      this.currentPage = 1
+    },
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.currentPage = 1
+    },
+    handleCurrentChange(page) {
+      this.currentPage = page
+    },
 
     openAddDialog() {
       this.$refs.editDialog.open()
@@ -238,7 +325,7 @@ export default {
 .table-footer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   padding: 12px 0 0;
   color: #667085;
   font-size: 13px;