refactor(system/client): 移除终端部分配置字段

Author: Charles7c

src/apis/system/type.ts

@@ -268,10 +268,8 @@ export interface StorageQuery {
 export interface ClientResp {
   id: string
   clientId: string
-  clientKey: string
-  clientSecret: string
-  authType: string
   clientType: string
+  authType: string
   activeTimeout: string
   timeout: string
   status: string
@@ -285,10 +283,8 @@ export interface ClientResp {
 export interface ClientDetailResp {
   id: string
   clientId: string
-  clientKey: string
-  clientSecret: string
-  authType: string
   clientType: string
+  authType: string
   activeTimeout: string
   timeout: string
   status: string
@@ -300,10 +296,8 @@ export interface ClientDetailResp {
   updateUserString: string
 }
 export interface ClientQuery {
-  clientKey: string
-  clientSecret: string
-  authType: string[]
   clientType: string
+  authType: string[]
   status: string
   sort: Array<string>
 }

src/views/open/app/AppDetailDrawer.vue

@@ -1,10 +1,13 @@
 <template>
-  <a-drawer v-model:visible="visible" title="应用详情" :width="width >= 500 ? 500 : '100%'" :footer="false">
+  <a-drawer v-model:visible="visible" title="应用详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
     <a-descriptions :column="2" size="large" class="general-description">
       <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
       <a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
       <a-descriptions-item label="Access Key" :span="2"><CellCopy :content="dataDetail?.accessKey" /></a-descriptions-item>
-      <a-descriptions-item label="状态"><GiCellStatus :status="dataDetail?.status" /></a-descriptions-item>
+      <a-descriptions-item label="状态">
+        <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="失效时间">{{ dataDetail?.expireTime }}</a-descriptions-item>
       <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
       <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>

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

@@ -16,7 +16,6 @@
 <script setup lang="tsx">
 import { Message } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
-import CryptoJS from 'crypto-js'
 import { addClient, getClient, updateClient } from '@/apis/system/client'
 import { type ColumnItem, GiForm } from '@/components/GiForm'
 import { DisEnableStatusList } from '@/constant/common'
@@ -43,39 +42,15 @@ const [form, resetForm] = useResetReactive({
   isShare: 1,
   status: 1,
 })
-const handleGenerate = () => {
-  const timestamp = Date.now()
-  form.clientSecret = CryptoJS.MD5(`${timestamp}`).toString(CryptoJS.enc.Hex)
-}
 
 const columns: ColumnItem[] = reactive([
   {
-    label: '终端 Key',
-    field: 'clientKey',
-    type: 'input',
-    span: 24,
-    required: true,
+    label: '终端类型',
+    field: 'clientType',
+    type: 'select',
+    span: 12,
     props: {
-      maxLength: 32,
-    },
-    disabled: () => isUpdate.value,
-  },
-  {
-    label: '终端秘钥',
-    field: 'clientSecret',
-    type: 'input',
-    span: 24,
-    required: true,
-    disabled: () => isUpdate.value,
-    slots: {
-      append: () => (
-        <a-button onClick={handleGenerate}>
-          {{
-            default: '随机生成',
-            icon: <icon-refresh />,
-          }}
-        </a-button>
-      ),
+      options: client_type,
     },
   },
   {
@@ -90,15 +65,6 @@ const columns: ColumnItem[] = reactive([
       maxTagCount: 2,
     },
   },
-  {
-    label: '终端类型',
-    field: 'clientType',
-    type: 'select',
-    span: 12,
-    props: {
-      options: client_type,
-    },
-  },
   {
     label: () => (
       <a-tooltip content="-1 代表不限制，永不冻结">

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

@@ -3,20 +3,19 @@
     <a-descriptions :column="2" size="large" class="general-description">
       <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
       <a-descriptions-item label="终端ID" :span="2"><a-typography-paragraph :copyable="!!dataDetail?.clientId">{{ dataDetail?.clientId }}</a-typography-paragraph></a-descriptions-item>
-      <a-descriptions-item label="终端Key" :span="2">{{ dataDetail?.clientKey }}</a-descriptions-item>
-      <a-descriptions-item label="终端秘钥" :span="2">{{ dataDetail?.clientSecret }}</a-descriptions-item>
+      <a-descriptions-item label="终端类型" :span="2">
+        <GiCellTag :value="dataDetail?.clientType" :dict="client_type" />
+      </a-descriptions-item>
       <a-descriptions-item label="认证类型" :span="2">
         <a-space>
           <GiCellTag v-for="(item, index) in dataDetail?.authType" :key="index" :value="item" :dict="auth_type_enum" />
         </a-space>
       </a-descriptions-item>
-      <a-descriptions-item label="终端类型" :span="2">
-        <GiCellTag :value="dataDetail?.clientType" :dict="client_type" />
-      </a-descriptions-item>
       <a-descriptions-item label="Token最低活跃频率">{{ dataDetail?.activeTimeout }}</a-descriptions-item>
       <a-descriptions-item label="Token有效期">{{ dataDetail?.timeout }}</a-descriptions-item>
       <a-descriptions-item label="状态" :span="2">
-        <GiCellStatus :status="dataDetail?.status" />
+        <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="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
       <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>

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

@@ -5,14 +5,13 @@
       :data="dataList"
       :columns="columns"
       :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
       :pagination="pagination"
       :disabled-tools="['size']"
       :disabled-column-keys="['clientKey']"
       @refresh="search"
     >
       <template #toolbar-left>
-        <a-input-search v-model="queryForm.clientKey" placeholder="搜索终端Key" allow-clear @search="search" />
         <a-select
           v-model="queryForm.clientType"
           :options="client_type"
@@ -83,10 +82,8 @@ const {
 } = useDict('client_type', 'auth_type_enum')
 
 const queryForm = reactive<ClientQuery>({
-  clientKey: '',
-  clientSecret: '',
-  authType: [] as string[],
   clientType: '',
+  authType: [] as string[],
   status: '',
   sort: ['id,desc'],
 })
@@ -123,30 +120,28 @@ const columns: TableInstance['columns'] = [
       )
     },
   },
-  { title: '终端 Key', dataIndex: 'clientKey', slotName: 'clientKey', ellipsis: true, tooltip: true, align: 'center' },
-  { title: '终端秘钥', dataIndex: 'clientSecret', slotName: 'clientSecret', ellipsis: true, tooltip: true, align: 'center' },
   {
-    title: '认证类型',
-    dataIndex: 'authType',
-    slotName: 'authType',
+    title: '终端类型',
+    dataIndex: 'clientType',
+    slotName: 'clientType',
     ellipsis: true,
     tooltip: true,
     align: 'center',
     render: ({ record }) => {
-      return (
-        <GiCellTags data={formatAuthType(record.authType)} />
-      )
+      return <GiCellTag value={record.clientType} dict={client_type.value} />
     },
   },
   {
-    title: '终端类型',
-    dataIndex: 'clientType',
-    slotName: 'clientType',
+    title: '认证类型',
+    dataIndex: 'authType',
+    slotName: 'authType',
     ellipsis: true,
     tooltip: true,
     align: 'center',
     render: ({ record }) => {
-      return <GiCellTag value={record.clientType} dict={client_type.value} />
+      return (
+        <GiCellTags data={formatAuthType(record.authType)} />
+      )
     },
   },
   { title: 'Token 最低活跃频率', dataIndex: 'activeTimeout', slotName: 'activeTimeout', width: 180, align: 'center', render: ({ record }) => `${record.activeTimeout} 秒` },
@@ -177,10 +172,8 @@ const columns: TableInstance['columns'] = [
 
 // 重置
 const reset = () => {
-  queryForm.clientKey = ''
-  queryForm.clientSecret = ''
-  queryForm.authType = []
   queryForm.clientType = ''
+  queryForm.authType = []
   queryForm.status = ''
   search()
 }