feat(客户端管理): 优化客户端管理界面功能

- 添加默认客户端ID常量
- 重构密钥输入组件使用SpaceCompact布局
- 替换TableSwitch为ApiSwitch并优化状态切换逻辑

apps/web-antd/src/views/system/client/index.vue

@@ -6,6 +6,7 @@ import type { Client } from '#/api/system/client/model';
 
 import { useAccess } from '@vben/access';
 import { Page, useVbenDrawer } from '@vben/common-ui';
+import { DEFAULT_CLIENT_ID, EnableStatus } from '@vben/constants';
 
 import { Modal, Popconfirm, Space } from 'antdv-next';
 
@@ -16,7 +17,7 @@ import {
   clientList,
   clientRemove,
 } from '#/api/system/client';
-import { TableSwitch } from '#/components/table';
+import { ApiSwitch } from '#/components/global';
 import { commonDownloadExcel } from '#/utils/file/download';
 
 import clientDrawer from './client-drawer.vue';
@@ -108,6 +109,12 @@ function handleDownloadExcel() {
 }
 
 const { hasAccessByCodes } = useAccess();
+async function handleChangeStatus(checked: boolean, row: Client) {
+  await clientChangeStatus({
+    clientId: row.id,
+    status: checked ? EnableStatus.Enable : EnableStatus.Disable,
+  });
+}
 </script>
 
 <template>
@@ -142,10 +149,13 @@ const { hasAccessByCodes } = useAccess();
       <template #status="{ row }">
         <!-- pc不允许禁用 禁用了直接登录不了 应该设置disabled -->
         <!-- 登录提示: 认证权限类型已禁用 -->
-        <TableSwitch
+        <ApiSwitch
-          v-model:value="row.status"
+          :value="row.status === EnableStatus.Enable"
-          :api="() => clientChangeStatus(row)"
+          :api="(checked) => handleChangeStatus(checked, row)"
-          :disabled="row.id === 1 || !hasAccessByCodes(['system:client:edit'])"
+          :disabled="
+            row.id === DEFAULT_CLIENT_ID ||
+            !hasAccessByCodes(['system:client:edit'])
+          "
           @reload="tableApi.query()"
         />
       </template>

apps/web-antd/src/views/system/client/secret-input.vue

@@ -2,7 +2,7 @@
 import { IconifyIcon } from '@vben/icons';
 import { buildUUID } from '@vben/utils';
 
-import { Input } from 'antdv-next';
+import { Input, SpaceCompact } from 'antdv-next';
 
 defineOptions({ name: 'SecretInput' });
 
@@ -27,16 +27,19 @@ defineExpose({ refreshSecret });
 </script>
 
 <template>
-  <Input v-model:value="value" :disabled="disabled" :placeholder="placeholder">
+  <SpaceCompact>
-    <template v-if="!disabled" #addonAfter>
+    <Input
-      <a-button type="primary" @click="refreshSecret">
+      v-model:value="value"
-        <div class="flex items-center gap-[4px]">
+      :disabled="disabled"
-          <IconifyIcon icon="charm:refresh" />
+      :placeholder="placeholder"
-          <span>随机生成</span>
+    />
-        </div>
+    <a-button v-if="!disabled" type="primary" @click="refreshSecret">
-      </a-button>
+      <div class="flex items-center gap-[4px]">
-    </template>
+        <IconifyIcon icon="charm:refresh" />
-  </Input>
+        <span>随机生成</span>
+      </div>
+    </a-button>
+  </SpaceCompact>
 </template>
 
 <style lang="scss" scoped>

packages/constants/src/core.ts

@@ -52,6 +52,11 @@ export const SUPERADMIN_ROLE_KEY = 'superadmin';
  */
 export const ADMIN_ROLE_KEY = 'admin';
 
+/**
+ * 默认客户端ID
+ */
+export const DEFAULT_CLIENT_ID = 1;
+
 /**
  * 对应 字典-S系统开关的状态
  */