feat:优化APIHUB客户端权限保存

src/api/modules/apiHub.ts

@@ -32,6 +32,6 @@ export default {
     delete: (ids: number[]) => del('/client/delete', { ids }),
     resetSecret: (id: number) => put('/client/reset-secret', { id }),
     getApis: (clientId: string) => get('/client/apis', { clientId }),
-    saveApis: (clientId: string, apiKeys: string[]) => post('/client/apis', { clientId, apiKeys })
+    save_apis: (clientId: string, apiKeys: string[]) => post('/client/save_apis', { clientId, apiKeys })
   }
 }

src/views/apihub/client.vue

@@ -106,7 +106,7 @@
     </el-dialog>
 
     <!-- API权限管理弹窗 -->
-    <el-dialog v-model="apiAuthVisible" :title="`客户端 '${currentClient.name}' 的API权限管理`" width="900px" destroy-on-close>
+    <el-dialog v-model="apiAuthVisible" :title="`客户端 '${currentClient.name}' 的API权限管理`" width="1100px" destroy-on-close>
       <client-api-relation :client-id="currentClient.clientId" @update:apiKeys="handleApiKeysUpdate" />
       <template #footer>
         <span class="dialog-footer">
@@ -435,7 +435,7 @@ const saveApiRelations = async () => {
 
   apiSaveLoading.value = true;
   try {
-    await api.client.saveApis(currentClient.value.clientId, selectedApiKeys.value);
+    await api.client.save_apis(currentClient.value.clientId, selectedApiKeys.value);
     ElMessage.success('API权限关联保存成功');
     apiAuthVisible.value = false;
   } catch (error) {

src/views/apihub/component/ClientApiRelation.vue

@@ -40,15 +40,15 @@
               <div class="api-list-actions">
                 <el-button type="primary" size="small" @click="addSelectedApis">添加选中</el-button>
                 <el-button size="small" @click="selectAllVisible">选择当前页</el-button>
-                <el-button size="small" @click="applyTemplate('readonly')">应用只读模板</el-button>
-                <el-button size="small" @click="applyTemplate('fullaccess')">应用完全访问</el-button>
+                <!-- <el-button size="small" @click="applyTemplate('readonly')">应用只读模板</el-button>
+                <el-button size="small" @click="applyTemplate('fullaccess')">应用完全访问</el-button> -->
               </div>
             </div>
             <el-table 
               ref="apiTable" 
               :data="availableApis" 
               style="width: 100%" 
-              height="500px"
+              height="450px"
               v-loading="loading"
               @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="55" />
@@ -145,6 +145,7 @@ import api from '/@/api/modules/apiHub';
 interface ApiInfo {
   id: number;
   key: string;
+  apiKey: string; // 添加apiKey字段
   name: string;
   method: string;
   path: string;
@@ -227,16 +228,20 @@ const getApiList = async () => {
     
     const res = await api.list(params);
     if (res) {
-      availableApis.value = res.list.map((item: any) => ({
-        id: item.id,
-        key: item.key || `${item.id}`,
-        name: item.name,
-        method: item.method,
-        path: item.path,
-        status: item.status,
-        groupId: item.groupId,
-        groupName: item.groupName
-      }));
+      availableApis.value = res.list.map((item: any) => {
+        // 使用APIKey作为唐一标识符
+        return {
+          id: item.id,
+          key: item.key || `${item.id}`,
+          apiKey: item.apiKey || item.key || `${item.id}`, // 使用apiKey或备选值
+          name: item.name,
+          method: item.method,
+          path: item.path,
+          status: item.status,
+          groupId: item.groupId,
+          groupName: item.groupName
+        };
+      });
       total.value = res.total;
     }
   } catch (error) {
@@ -254,7 +259,8 @@ const getClientApis = async () => {
     const res = await api.client.getApis(props.clientId);
     if (res && Array.isArray(res)) {
       selectedApis.value = res;
-      selectedApiKeys.value = res.map(item => item.key);
+      // 使用apiKey字段或备选值
+      selectedApiKeys.value = res.map(item => item.apiKey || item.key || `${item.id}`);
     }
   } catch (error) {
     ElMessage.error('获取客户端API失败');
@@ -318,11 +324,11 @@ const applyTemplate = async (templateId: string) => {
       );
       
       // 合并已有的API和模板中的API
-      const existingKeys = new Set(selectedApiKeys.value);
-      const newApis = filteredApis.filter(api => !existingKeys.has(api.key));
+      const existingApiIds = new Set(selectedApis.value.map(api => api.id));
+      const newApis = filteredApis.filter(api => !existingApiIds.has(api.id));
       
       selectedApis.value = [...selectedApis.value, ...newApis];
-      selectedApiKeys.value = selectedApis.value.map(api => api.key);
+      selectedApiKeys.value = selectedApis.value.map(api => api.apiKey);
       
       ElMessage.success(`成功应用"${template.name}"模板，添加了${newApis.length}个API`);
     }
@@ -343,8 +349,8 @@ const addSelectedApis = () => {
   }
   
   // 过滤掉已经选择的API
-  const existingKeys = new Set(selectedApiKeys.value);
-  const newApis = selectedRows.value.filter(api => !existingKeys.has(api.key));
+  const existingApiIds = new Set(selectedApis.value.map(api => api.id));
+  const newApis = selectedRows.value.filter(api => !existingApiIds.has(api.id));
   
   if (newApis.length === 0) {
     ElMessage.warning('所选API已经全部添加');
@@ -352,7 +358,7 @@ const addSelectedApis = () => {
   }
   
   selectedApis.value = [...selectedApis.value, ...newApis];
-  selectedApiKeys.value = selectedApis.value.map(api => api.key);
+  selectedApiKeys.value = selectedApis.value.map(api => api.apiKey);
   ElMessage.success(`成功添加${newApis.length}个API`);
   
   // 清除表格选择
@@ -367,16 +373,16 @@ const addApi = (api: ApiInfo) => {
   }
   
   selectedApis.value.push(api);
-  selectedApiKeys.value = selectedApis.value.map(item => item.key);
+  selectedApiKeys.value = selectedApis.value.map(item => item.apiKey);
   ElMessage.success('添加成功');
 };
 
 // 移除单个API
 const removeApi = (api: ApiInfo) => {
-  const index = selectedApis.value.findIndex(item => item.key === api.key);
+  const index = selectedApis.value.findIndex(item => item.id === api.id);
   if (index !== -1) {
     selectedApis.value.splice(index, 1);
-    selectedApiKeys.value = selectedApis.value.map(item => item.key);
+    selectedApiKeys.value = selectedApis.value.map(item => item.apiKey);
     ElMessage.success('移除成功');
   }
 };
@@ -404,8 +410,10 @@ const removeAllSelected = async () => {
 };
 
 // 检查API是否已选中
-const isApiSelected = (apiKey: string) => {
-  return selectedApiKeys.value.includes(apiKey);
+const isApiSelected = (key: string) => {
+  // 查找是否有包含此key的API
+  const api = selectedApis.value.find(api => api.key === key);
+  return !!api;
 };
 
 // 搜索API