feat:修复APIHUB中客户端API权限移除的BUG

src/views/apihub/client.vue

@@ -105,8 +105,15 @@
       </template>
     </el-dialog>
 
-    <!-- API权限管理弹窗 -->
-    <el-dialog v-model="apiAuthVisible" :title="`客户端 '${currentClient.name}' 的API权限管理`" width="1100px" destroy-on-close>
+    <!-- API权限管理对话框 -->
+    <el-dialog
+      v-model="apiAuthVisible"
+      :title="`客户端 '${currentClient.name}' 的API权限管理`"
+      width="1100px"
+      append-to-body
+      destroy-on-close
+      class="api-permission-dialog"
+    >
       <client-api-relation :client-id="currentClient.clientId" @update:apiKeys="handleApiKeysUpdate" />
       <template #footer>
         <span class="dialog-footer">
@@ -507,4 +514,59 @@ const saveApiRelations = async () => {
   border-radius: 3px;
   margin-right: 10px;
 }
+
+.client-detail-tabs {
+  margin-top: 20px;
+}
+
+.custom-upload {
+  margin-left: 10px;
+  color: #409eff;
+  cursor: pointer;
+}
+
+.dialog-header {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  h4 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  .close-btn {
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+  }
+}
+
+/* API权限对话框样式优化 */
+:deep(.api-permission-dialog) {
+  .el-dialog__header {
+    background-color: var(--el-bg-color);
+    padding: 15px 20px;
+    margin-right: 0;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+  
+  .el-dialog__title {
+    font-weight: bold;
+    color: var(--el-text-color-primary);
+  }
+  
+  .el-dialog__body {
+    background-color: var(--el-bg-color-page);
+    padding: 20px;
+  }
+  
+  .el-dialog__footer {
+    background-color: var(--el-bg-color);
+    border-top: 1px solid var(--el-border-color-lighter);
+    padding: 10px 20px;
+  }
+}
 </style>

src/views/apihub/component/ClientApiRelation.vue

@@ -379,11 +379,21 @@ const addApi = (api: ApiInfo) => {
 
 // 移除单个API
 const removeApi = (api: ApiInfo) => {
-  const index = selectedApis.value.findIndex(item => item.id === api.id);
+  // 获取要移除的API唯一标识符
+  const apiIdentifier = api.apiKey || api.key || `${api.id}`;
+  
+  // 在已选API中查找匹配项
+  const index = selectedApis.value.findIndex(item => {
+    const itemIdentifier = item.apiKey || item.key || `${item.id}`;
+    return itemIdentifier === apiIdentifier;
+  });
+  
   if (index !== -1) {
     selectedApis.value.splice(index, 1);
-    selectedApiKeys.value = selectedApis.value.map(item => item.apiKey);
+    selectedApiKeys.value = selectedApis.value.map(item => item.apiKey || item.key || `${item.id}`);
     ElMessage.success('移除成功');
+  } else {
+    ElMessage.warning('未找到要移除的API');
   }
 };
 
@@ -508,6 +518,7 @@ onMounted(() => {
   margin: 0;
   font-size: 16px;
   font-weight: 500;
+  color: var(--el-text-color-primary);
 }
 
 .api-list-actions {
@@ -518,11 +529,13 @@ onMounted(() => {
 .api-list-container,
 .selected-api-container {
   padding: 15px;
-  background-color: #f5f7fa;
+  background-color: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-light);
   border-radius: 4px;
   height: 600px;
   display: flex;
   flex-direction: column;
+  box-shadow: var(--el-box-shadow-light);
 }
 
 .pagination-container {
@@ -530,4 +543,90 @@ onMounted(() => {
   display: flex;
   justify-content: center;
 }
+
+/* 优化深色主题下的表格样式 */
+:deep(.el-table) {
+  --el-table-border-color: var(--el-border-color-lighter);
+  --el-table-header-bg-color: var(--el-fill-color-dark);
+  --el-table-row-hover-bg-color: var(--el-fill-color-dark);
+  background-color: var(--el-bg-color-overlay);
+}
+
+:deep(.el-table th) {
+  background-color: var(--el-fill-color-dark);
+  color: var(--el-text-color-primary);
+  font-weight: bold;
+}
+
+:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
+  background-color: var(--el-color-primary-light-9);
+}
+
+:deep(.el-table td) {
+  color: var(--el-text-color-regular);
+}
+
+:deep(.el-table__empty-text) {
+  color: var(--el-text-color-secondary);
+}
+
+/* 表格状态标识 */
+:deep(.el-tag) {
+  border: 1px solid transparent;
+}
+
+:deep(.el-tag--success) {
+  background-color: var(--el-color-success-light-9);
+  border-color: var(--el-color-success-light-7);
+  color: var(--el-color-success);
+}
+
+:deep(.el-tag--info) {
+  background-color: var(--el-color-info-light-9);
+  border-color: var(--el-color-info-light-7);
+  color: var(--el-color-info-dark-2);
+}
+
+/* 增强表格单元格边框 */
+:deep(.el-table--border .el-table__cell) {
+  border-right: 1px solid var(--el-border-color-lighter);
+}
+
+/* 边框分隔线 */
+.relation-container :deep(.el-col:first-child) {
+  position: relative;
+}
+
+.relation-container :deep(.el-col:first-child)::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 1px;
+  background-color: var(--el-border-color-lighter);
+}
+
+/* 搜索框样式优化 */
+.filter-container :deep(.el-input__inner) {
+  background-color: var(--el-fill-color-blank);
+  border-color: var(--el-border-color);
+}
+
+.filter-container :deep(.el-input__inner:hover) {
+  border-color: var(--el-color-primary-light-3);
+}
+
+.filter-container :deep(.el-input__inner:focus) {
+  border-color: var(--el-color-primary);
+}
+
+/* 按钮样式增强 */
+:deep(.el-button--primary) {
+  box-shadow: 0 2px 6px rgba(var(--el-color-primary-rgb), 0.4);
+}
+
+:deep(.el-button--danger) {
+  box-shadow: 0 2px 6px rgba(var(--el-color-danger-rgb), 0.4);
+}
 </style>