refactor(system/client): 优化客户端配置代码

Author: Charles7c

src/apis/system/type.ts

@@ -296,8 +296,8 @@ export interface ClientResp {
   timeout: string
   status: string
   isConcurrent: boolean
-  maxLoginCount: number
   replacedRange: string
+  maxLoginCount: number
   overflowLogoutMode: string
   createUser: string
   createTime: string

src/views/system/config/client/AddModal.vue

@@ -39,8 +39,6 @@ const [form, resetForm] = useResetReactive({
   timeout: 86400,
   isConcurrent: true,
   maxLoginCount: -1,
-  replacedRange: 'ALL_DEVICE_TYPE',
-  overflowLogoutMode: 'KICKOUT',
   status: 1,
 })
 
@@ -82,7 +80,7 @@ const columns: ColumnItem[] = reactive([
   },
   {
     label: () => (
-      <a-tooltip content="-1 代表不限制，永不冻结">
+      <a-tooltip content="-1：不限制，永不冻结">
         Token 最低活跃频率&nbsp;
         <icon-question-circle />
       </a-tooltip>
@@ -102,7 +100,7 @@ const columns: ColumnItem[] = reactive([
   },
   {
     label: () => (
-      <a-tooltip content="-1 代表永不过期">
+      <a-tooltip content="-1：永不过期">
         Token 有效期
         <icon-question-circle />
       </a-tooltip>
@@ -133,10 +131,23 @@ const columns: ColumnItem[] = reactive([
       uncheckedText: '不允许',
     },
   },
+  {
+    label: '顶人下线的范围',
+    field: 'replacedRange',
+    type: 'select',
+    span: 12,
+    props: {
+      options: replaced_range_enum,
+      placeholder: '请选择顶人下线的范围',
+    },
+    disabled: () => {
+      return form.isConcurrent
+    },
+  },
   {
     label: () => (
-      <a-tooltip content="-1 代表不限">
-        最大登录数量
+      <a-tooltip content="-1：不限制">
+        同一账号最大登录数量
         <icon-question-circle />
       </a-tooltip>
     ),
@@ -145,11 +156,11 @@ const columns: ColumnItem[] = reactive([
     span: 12,
     slots: {
       append: () => (
-        <span style={{ width: '80px', textAlign: 'center' }}>个</span>
+        <span style={{ width: '30px', textAlign: 'center' }}>个</span>
       ),
     },
     props: {
-      placeholder: '请输入最大登录数量',
+      placeholder: '请输入同一账号最大登录数量',
       min: -1,
     },
     disabled: () => {
@@ -158,35 +169,25 @@ const columns: ColumnItem[] = reactive([
     rules: [
       {
         validator: (value: number, callback: (errorMessage?: string) => void) => {
-          if (value === 0) {
-            callback('最大登录数量不能为0，请输入-1或正整数')
+          if (value <= 0 && value !== -1) {
+            callback('最大登录数量只能为 -1 或正整数')
           }
           callback()
         },
       },
     ],
   },
   {
-    label: '顶人下线的范围',
-    field: 'replacedRange',
-    type: 'select',
-    span: 12,
-    props: {
-      options: replaced_range_enum,
-      placeholder: '请选择顶人下线的范围',
-    },
-    disabled: () => {
-      return form.isConcurrent
-    },
-  },
-  {
-    label: '溢出人数的注销方式',
+    label: '溢出人数的下线方式',
     field: 'overflowLogoutMode',
     type: 'select',
     span: 12,
     props: {
       options: logout_mode_enum,
-      placeholder: '请选择溢出人数的注销方式',
+      placeholder: '请选择溢出人数的下线方式',
+    },
+    disabled: () => {
+      return form.maxLoginCount === -1 || form.maxLoginCount === 0
     },
   },
   {

src/views/system/config/client/DetailDrawer.vue

@@ -17,17 +17,17 @@
         <a-tag v-if="dataDetail?.status === 1" color="green">启用</a-tag>
         <a-tag v-else color="red">禁用</a-tag>
       </a-descriptions-item>
-      <a-descriptions-item label="是否允许多地登录" :span="2">
+      <a-descriptions-item label="多地登录">
         <a-tag v-if="dataDetail?.isConcurrent" color="blue">允许</a-tag>
         <a-tag v-else color="orange">不允许</a-tag>
       </a-descriptions-item>
-      <a-descriptions-item label="最大登录数量">
-        {{ dataDetail?.maxLoginCount === -1 ? '不限' : dataDetail?.maxLoginCount }}
-      </a-descriptions-item>
-      <a-descriptions-item label="顶人下线范围">
+      <a-descriptions-item label="下线范围">
         <GiCellTag :value="dataDetail?.replacedRange" :dict="replaced_range_enum" />
       </a-descriptions-item>
-      <a-descriptions-item label="溢出注销方式" :span="2">
+      <a-descriptions-item label="登录数量">
+        {{ dataDetail?.maxLoginCount === -1 ? '不限制' : dataDetail?.maxLoginCount }}
+      </a-descriptions-item>
+      <a-descriptions-item label="溢出处理">
         <GiCellTag :value="dataDetail?.overflowLogoutMode" :dict="logout_mode_enum" />
       </a-descriptions-item>
       <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>

src/views/system/config/client/index.vue

@@ -5,7 +5,7 @@
       :data="dataList"
       :columns="columns"
       :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
       :pagination="pagination"
       :disabled-tools="['size']"
       :disabled-column-keys="['clientKey']"
@@ -114,6 +114,7 @@ const columns: TableInstance['columns'] = [
     title: '客户端 ID',
     dataIndex: 'clientId',
     slotName: 'clientId',
+    width: 180,
     ellipsis: true,
     tooltip: true,
     render: ({ record }) => {
@@ -147,7 +148,7 @@ const columns: TableInstance['columns'] = [
     },
   },
   { title: 'Token 最低活跃频率', dataIndex: 'activeTimeout', slotName: 'activeTimeout', width: 180, align: 'center', render: ({ record }) => `${record.activeTimeout} 秒` },
-  { title: 'Token 有效期', dataIndex: 'timeout', slotName: 'timeout', align: 'center', render: ({ record }) => `${record.timeout} 秒` },
+  { title: 'Token 有效期', dataIndex: 'timeout', slotName: 'timeout', width: 180, align: 'center', render: ({ record }) => `${record.timeout} 秒` },
   {
     title: '状态',
     dataIndex: 'status',
@@ -158,31 +159,31 @@ const columns: TableInstance['columns'] = [
     },
   },
   {
-    title: '是否允许多地登录',
+    title: '多地登录',
     dataIndex: 'isConcurrent',
     align: 'center',
     render: ({ record }) => {
       return <Tag>{record.isConcurrent ? '允许' : '不允许'}</Tag>
     },
   },
   {
-    title: '最大登录数量',
-    dataIndex: 'maxLoginCount',
+    title: '下线范围',
+    dataIndex: 'replacedRange',
     align: 'center',
     render: ({ record }) => {
-      return record.maxLoginCount === -1 ? '不限' : record.maxLoginCount
+      return <GiCellTag value={record.replacedRange} dict={replaced_range_enum.value} />
     },
   },
   {
-    title: '顶人下线范围',
-    dataIndex: 'replacedRange',
+    title: '登录数量',
+    dataIndex: 'maxLoginCount',
     align: 'center',
     render: ({ record }) => {
-      return <GiCellTag value={record.replacedRange} dict={replaced_range_enum.value} />
+      return record.maxLoginCount === -1 ? '不限制' : record.maxLoginCount
     },
   },
   {
-    title: '溢出注销方式',
+    title: '溢出处理',
     dataIndex: 'overflowLogoutMode',
     align: 'center',
     render: ({ record }) => {
@@ -194,6 +195,7 @@ const columns: TableInstance['columns'] = [
     title: '操作',
     dataIndex: 'action',
     slotName: 'action',
+    width: 160,
     align: 'center',
     fixed: !isMobile() ? 'right' : undefined,
     show: has.hasPermOr(['system:client:get', 'system:client:update', 'system:client:delete']),