refactor: 优化认证及客户端相关代码

.env.test

@@ -19,4 +19,4 @@ VITE_OPEN_DEVTOOLS = true
 VITE_APP_SETTING = false
 
 # 客户端ID
-VITE_CLIENT_ID = '8ed5c8f9-555a-4961-ab66-9b87ddc4e3d0'
+VITE_CLIENT_ID = 'ef51c9a3e9046c4f2ea45142c8a8344a'

src/apis/auth/index.ts

@@ -27,7 +27,7 @@ export function socialLogin(req: any) {
 
 /** @desc 三方账号登录授权 */
 export function socialAuth(source: string) {
-  return http.get<T.SocialAuthAuthorizeResp>(`/oauth/${source}`)
+  return http.get<T.SocialAuthAuthorizeResp>(`${BASE_URL}/${source}`)
 }
 
 /** @desc 退出登录 */

src/apis/auth/type.ts

@@ -49,8 +49,8 @@ export enum AuthTypeEnum {
   SOCIAL = 'SOCIAL',
 }
 export interface AuthReq {
-  clientId: string
+  clientId?: string
-  authType: string
+  authType?: string
 }
 
 /** 账号登录请求参数 */

src/apis/system/client.ts

@@ -1,77 +1,31 @@
+import type * as T from './type'
 import http from '@/utils/http'
 
+export type * from './type'
+
 const BASE_URL = '/system/client'
 
-export interface ClientResp {
+/** @desc 查询客户端列表 */
-  id: string
+export function listClient(query: T.ClientPageQuery) {
-  clientId: string
+  return http.get<PageRes<T.ClientResp[]>>(`${BASE_URL}`, query)
-  clientKey: string
-  clientSecret: string
-  authType: string
-  clientType: string
-  activeTimeout: string
-  timeout: string
-  status: string
-  createUser: string
-  createTime: string
-  updateUser: string
-  updateTime: string
-  createUserString: string
-  updateUserString: string
-}
-export interface ClientDetailResp {
-  id: string
-  clientId: string
-  clientKey: string
-  clientSecret: string
-  authType: string
-  clientType: string
-  activeTimeout: string
-  timeout: string
-  status: string
-  createUser: string
-  createTime: string
-  updateUser: string
-  updateTime: string
-  createUserString: string
-  updateUserString: string
-}
-export interface ClientQuery {
-  clientKey: string
-  clientSecret: string
-  authType: string[]
-  clientType: string
-  status: string
-  sort: Array<string>
-}
-export interface ClientPageQuery extends ClientQuery, PageQuery {}
-
-/** @desc 查询系统授权列表 */
-export function listClient(query: ClientPageQuery) {
-  return http.get<PageRes<ClientResp[]>>(`${BASE_URL}`, query)
 }
 
-/** @desc 查询系统授权详情 */
+/** @desc 查询客户端详情 */
 export function getClient(id: string) {
-  return http.get<ClientDetailResp>(`${BASE_URL}/${id}`)
+  return http.get<T.ClientDetailResp>(`${BASE_URL}/${id}`)
 }
 
-/** @desc 新增系统授权 */
+/** @desc 新增客户端 */
 export function addClient(data: any) {
   return http.post(`${BASE_URL}`, data)
 }
 
-/** @desc 修改系统授权 */
+/** @desc 修改客户端 */
 export function updateClient(data: any, id: string) {
   return http.put(`${BASE_URL}/${id}`, data)
 }
 
-/** @desc 删除系统授权 */
+/** @desc 删除客户端 */
-export function deleteClient(id: string) {
+export function deleteClient(ids: string | Array<string>) {
-  return http.del(`${BASE_URL}/${id}`)
+  return http.del(`${BASE_URL}/${ids}`)
-}
-
-/** @desc 导出系统授权 */
-export function exportClient(query: ClientQuery) {
-  return http.download(`${BASE_URL}/export`, query)
 }

src/apis/system/type.ts

@@ -1,4 +1,4 @@
-/** 系统用户类型 */
+/** 用户类型 */
 export interface UserResp {
   id: string
   username: string
@@ -20,11 +20,9 @@ export interface UserResp {
   roleNames: Array<string>
   disabled: boolean
 }
-
 export type UserDetailResp = UserResp & {
   pwdResetTime?: string
 }
-
 export interface UserImportResp {
   importKey: string
   totalRows: number
@@ -33,7 +31,6 @@ export interface UserImportResp {
   duplicateEmailRows: number
   duplicatePhoneRows: number
 }
-
 export interface UserQuery {
   description?: string
   status?: number
@@ -42,10 +39,9 @@ export interface UserQuery {
   sort: Array<string>
   userIds?: Array<string>
 }
-
 export interface UserPageQuery extends UserQuery, PageQuery {}
 
-/** 系统角色类型 */
+/** 角色类型 */
 export interface RoleResp {
   id: string
   name: string
@@ -60,22 +56,19 @@ export interface RoleResp {
   updateTime: string
   disabled: boolean
 }
-
 export type RoleDetailResp = RoleResp & {
   menuIds: Array<number>
   deptIds: Array<number>
   menuCheckStrictly: boolean
   deptCheckStrictly: boolean
 }
-
 export interface RoleQuery {
   description?: string
   sort: Array<string>
 }
-
 export interface RolePageQuery extends RoleQuery, PageQuery {}
 
-/** 系统菜单类型 */
+/** 菜单类型 */
 export interface MenuResp {
   id: string
   title: string
@@ -98,13 +91,12 @@ export interface MenuResp {
   updateTime: string
   children: MenuResp[]
 }
-
 export interface MenuQuery {
   title?: string
   status?: number
 }
 
-/** 系统部门类型 */
+/** 部门类型 */
 export interface DeptResp {
   id: string
   name: string
@@ -119,13 +111,12 @@ export interface DeptResp {
   parentId: string
   children: DeptResp[]
 }
-
 export interface DeptQuery {
   description?: string
   status?: number
 }
 
-/** 系统字典类型 */
+/** 字典类型 */
 export interface DictResp {
   id: string
   name: string
@@ -137,12 +128,10 @@ export interface DictResp {
   updateUserString: string
   updateTime: string
 }
-
 export interface DictQuery {
   description?: string
   sort: Array<string>
 }
-
 export interface DictItemResp {
   id: string
   label: string
@@ -157,18 +146,16 @@ export interface DictItemResp {
   updateUserString: string
   updateTime: string
 }
-
 export interface DictItemQuery {
   description?: string
   status?: number
   sort: Array<string>
   dictId: string
 }
-
 export interface DictItemPageQuery extends DictItemQuery, PageQuery {
 }
 
-/** 系统公告类型 */
+/** 公告类型 */
 export interface NoticeResp {
   id?: string
   title?: string
@@ -184,17 +171,15 @@ export interface NoticeResp {
   updateUserString?: string
   updateTime?: string
 }
-
 export interface NoticeQuery {
   title?: string
   type?: string
   sort: Array<string>
 }
-
 export interface NoticePageQuery extends NoticeQuery, PageQuery {
 }
 
-/** 系统文件类型 */
+/** 文件类型 */
 export interface FileItem {
   id: string
   name: string
@@ -211,7 +196,6 @@ export interface FileItem {
   updateUserString: string
   updateTime: string
 }
-
 /** 文件资源统计信息 */
 export interface FileStatisticsResp {
   type: string
@@ -220,17 +204,15 @@ export interface FileStatisticsResp {
   unit: string
   data: Array<FileStatisticsResp>
 }
-
 export interface FileQuery {
   name?: string
   type?: string
   sort: Array<string>
 }
-
 export interface FilePageQuery extends FileQuery, PageQuery {
 }
 
-/** 系统存储类型 */
+/** 存储类型 */
 export interface StorageResp {
   id: string
   name: string
@@ -250,16 +232,59 @@ export interface StorageResp {
   updateUserString: string
   updateTime: string
 }
-
 export interface StorageQuery {
   description?: string
   status?: number
   sort: Array<string>
 }
-
 export interface StoragePageQuery extends StorageQuery, PageQuery {
 }
 
+/** 客户端类型 */
+export interface ClientResp {
+  id: string
+  clientId: string
+  clientKey: string
+  clientSecret: string
+  authType: string
+  clientType: string
+  activeTimeout: string
+  timeout: string
+  status: string
+  createUser: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface ClientDetailResp {
+  id: string
+  clientId: string
+  clientKey: string
+  clientSecret: string
+  authType: string
+  clientType: string
+  activeTimeout: string
+  timeout: string
+  status: string
+  createUser: string
+  createTime: string
+  updateUser: string
+  updateTime: string
+  createUserString: string
+  updateUserString: string
+}
+export interface ClientQuery {
+  clientKey: string
+  clientSecret: string
+  authType: string[]
+  clientType: string
+  status: string
+  sort: Array<string>
+}
+export interface ClientPageQuery extends ClientQuery, PageQuery {}
+
 /** 系统参数类型 */
 export interface OptionResp {
   id: string

src/stores/modules/user.ts

@@ -51,21 +51,21 @@ const storeSetup = () => {
 
   // 登录
   const accountLogin = async (req: AccountLoginReq) => {
-    const res = await accountLoginApi(req)
+    const res = await accountLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeEnum.ACCOUNT })
     setToken(res.data.token)
     token.value = res.data.token
   }
 
   // 邮箱登录
   const emailLogin = async (req: EmailLoginReq) => {
-    const res = await emailLoginApi(req)
+    const res = await emailLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeEnum.EMAIL })
     setToken(res.data.token)
     token.value = res.data.token
   }
 
   // 手机号登录
   const phoneLogin = async (req: PhoneLoginReq) => {
-    const res = await phoneLoginApi(req)
+    const res = await phoneLoginApi({ ...req, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeEnum.PHONE })
     setToken(res.data.token)
     token.value = res.data.token
   }

src/views/code/generator/GenConfigDrawer.vue

@@ -154,9 +154,6 @@ const formColumns: Columns = reactive([
     label: '作者名称',
     field: 'author',
     type: 'input',
-    props: {
-      placeholder: '请输入作者名称',
-    },
     rules: [{ required: true, message: '请输入作者名称' }],
   },
   {

src/views/login/components/account/index.vue

@@ -43,7 +43,6 @@ import { useStorage } from '@vueuse/core'
 import { getImageCaptcha } from '@/apis/common'
 import { useTabsStore, useUserStore } from '@/stores'
 import { encryptByRsa } from '@/utils/encrypt'
-import { AuthTypeEnum } from '@/apis'
 
 const loginConfig = useStorage('login-config', {
   rememberMe: true,
@@ -120,8 +119,6 @@ const handleLogin = async () => {
       password: encryptByRsa(form.password) || '',
       captcha: form.captcha,
       uuid: form.uuid,
-      clientId: import.meta.env.VITE_CLIENT_ID,
-      authType: AuthTypeEnum.ACCOUNT,
     })
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
@@ -135,8 +132,7 @@ const handleLogin = async () => {
     loginConfig.value.username = rememberMe ? form.username : ''
     Message.success('欢迎使用')
   } catch (error) {
-    console.log('error', error)
+    console.error(error)
-
     getCaptcha()
     form.captcha = ''
   } finally {

src/views/login/components/email/index.vue

@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { type FormInstance, Message } from '@arco-design/web-vue'
-import { AuthTypeEnum, type BehaviorCaptchaReq } from '@/apis'
+import type { BehaviorCaptchaReq } from '@/apis'
 // import { type BehaviorCaptchaReq, getEmailCaptcha } from '@/apis'
 import { useTabsStore, useUserStore } from '@/stores'
 import * as Regexp from '@/utils/regexp'
@@ -69,7 +69,7 @@ const handleLogin = async () => {
     const isInvalid = await formRef.value?.validate()
     if (isInvalid) return
     loading.value = true
-    await userStore.emailLogin({ ...form, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeEnum.EMAIL })
+    await userStore.emailLogin(form)
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
     await router.push({

src/views/login/components/phone/index.vue

@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { type FormInstance, Message } from '@arco-design/web-vue'
-import { AuthTypeEnum, type BehaviorCaptchaReq } from '@/apis'
+import type { BehaviorCaptchaReq } from '@/apis'
 // import { type BehaviorCaptchaReq, getSmsCaptcha } from '@/apis'
 import { useTabsStore, useUserStore } from '@/stores'
 import * as Regexp from '@/utils/regexp'
@@ -69,7 +69,7 @@ const handleLogin = async () => {
   if (isInvalid) return
   try {
     loading.value = true
-    await userStore.phoneLogin({ ...form, clientId: import.meta.env.VITE_CLIENT_ID, authType: AuthTypeEnum.PHONE })
+    await userStore.phoneLogin(form)
     tabsStore.reset()
     const { redirect, ...othersQuery } = router.currentRoute.value.query
     await router.push({

src/views/monitor/log/operation/OperationLogDetailDrawer.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { type LogDetailResp, getLog as getData } from '@/apis/monitor'
+import { type LogDetailResp, getLog as getDetail } from '@/apis/monitor'
 
 const dataId = ref('')
 const dataDetail = ref<LogDetailResp>()
@@ -76,7 +76,7 @@ const visible = ref(false)
 
 // 查询详情
 const getDataDetail = async () => {
-  const { data } = await getData(dataId.value)
+  const { data } = await getDetail(dataId.value)
   dataDetail.value = data
 }
 

src/views/open/app/AppDetailDrawer.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { useWindowSize } from '@vueuse/core'
-import { type AppResp, getApp as getData } from '@/apis/open/app'
+import { type AppResp, getApp as getDetail } from '@/apis/open/app'
 
 const { width } = useWindowSize()
 
@@ -27,7 +27,7 @@ const visible = ref(false)
 
 // 查询详情
 const getDataDetail = async () => {
-  const { data } = await getData(dataId.value)
+  const { data } = await getDetail(dataId.value)
   dataDetail.value = data
 }
 

src/views/system/client/ClientAddModal.vue

@@ -4,8 +4,8 @@
     :title="title"
     :mask-closable="false"
     :esc-to-close="false"
-    draggable
     :width="width >= 600 ? 600 : '100%'"
+    draggable
     @before-ok="save"
     @close="reset"
   >
@@ -19,6 +19,7 @@ import { useWindowSize } from '@vueuse/core'
 import CryptoJS from 'crypto-js'
 import { addClient, getClient, updateClient } from '@/apis/system/client'
 import { type Columns, GiForm, type Options } from '@/components/GiForm'
+import { DisEnableStatusList } from '@/constant/common'
 import { useResetReactive } from '@/hooks'
 import { useDict } from '@/hooks/app'
 
@@ -31,15 +32,14 @@ const { width } = useWindowSize()
 const dataId = ref('')
 const visible = ref(false)
 const isUpdate = computed(() => !!dataId.value)
-const title = computed(() => (isUpdate.value ? '修改客户端管理' : '新增客户端管理'))
+const title = computed(() => (isUpdate.value ? '修改客户端' : '新增客户端'))
 const formRef = ref<InstanceType<typeof GiForm>>()
-const { auth_type_enum, client_type, dis_enable_status_enum } = useDict('auth_type_enum', 'client_type', 'dis_enable_status_enum')
+const { client_type, auth_type_enum } = useDict('auth_type_enum', 'client_type')
 
 const options: Options = {
-  form: { layout: 'vertical' },
+  form: { size: 'large', layout: 'vertical' },
   btns: { hide: true },
   grid: { cols: 2 },
-
 }
 
 const [form, resetForm] = useResetReactive({
@@ -53,12 +53,13 @@ const handleGenerate = () => {
   const timestamp = Date.now()
   form.clientSecret = CryptoJS.MD5(`${timestamp}`).toString(CryptoJS.enc.Hex)
 }
+
 const columns: Columns = reactive([
   {
-    label: '客户端Key',
+    label: '客户端 Key',
     field: 'clientKey',
     type: 'input',
-    rules: [{ required: true, message: '请输入客户端Key' }],
+    rules: [{ required: true, message: '请输入客户端 Key' }],
     span: 2,
     disabled: () => {
       return isUpdate.value
@@ -91,48 +92,54 @@ const columns: Columns = reactive([
     options: auth_type_enum,
     props: {
       multiple: true,
+      maxTagCount: 2,
     },
-    rules: [{ required: true, message: '请输入认证类型' }],
+    rules: [{ required: true, message: '请选择认证类型' }],
   },
   {
     label: '客户端类型',
     field: 'clientType',
     type: 'select',
     options: client_type,
-    rules: [{ required: true, message: '请输入客户端类型' }],
+    rules: [{ required: true, message: '请选择客户端类型' }],
   },
   {
     label: () => (
       <a-tooltip content="-1 代表不限制，永不冻结">
-        Token最低活跃频率
+        Token 最低活跃频率
         <icon-info-circle-fill />
       </a-tooltip>
     ),
     field: 'activeTimeout',
     type: 'input-number',
-    rules: [{ required: true, message: 'Token最低活跃频率不能为空' }],
     slots: {
       append: () => (
         <span style={{ width: '30px', textAlign: 'center' }}>秒</span>
       ),
     },
-
+    props: {
+      placeholder: '请输入 Token 最低活跃频率',
+    },
+    rules: [{ required: true, message: '请输入 Token 最低活跃频率' }],
   },
   {
     label: () => (
       <a-tooltip content="-1 代表永不过期">
-        Token有效期
+        Token 有效期
         <icon-info-circle-fill />
       </a-tooltip>
     ),
     field: 'timeout',
     type: 'input-number',
-    rules: [{ required: true, message: 'Token有效期不能为空' }],
     slots: {
       append: () => (
         <span style={{ width: '30px', textAlign: 'center' }}>秒</span>
       ),
     },
+    props: {
+      placeholder: '请输入 Token 有效期',
+    },
+    rules: [{ required: true, message: '请输入 Token 有效期' }],
   },
   {
     label: '状态',
@@ -140,7 +147,7 @@ const columns: Columns = reactive([
     type: 'radio-group',
     props: {
       type: 'button',
-      options: dis_enable_status_enum,
+      options: DisEnableStatusList,
     },
     rules: [{ required: true, message: '请选择状态' }],
   },

src/views/system/client/ClientDetailDrawer.vue

@@ -1,8 +1,8 @@
 <template>
-  <a-drawer v-model:visible="visible" title="客户端管理详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
+  <a-drawer v-model:visible="visible" title="客户端详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
     <a-descriptions :column="1" size="large" class="general-description">
       <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
-      <a-descriptions-item label="客户端ID">{{ dataDetail?.clientId }}</a-descriptions-item>
+      <a-descriptions-item label="客户端ID"><a-typography-paragraph :copyable="!!dataDetail?.clientId">{{ dataDetail?.clientId }}</a-typography-paragraph></a-descriptions-item>
       <a-descriptions-item label="客户端Key">{{ dataDetail?.clientKey }}</a-descriptions-item>
       <a-descriptions-item label="客户端秘钥">{{ dataDetail?.clientSecret }}</a-descriptions-item>
       <a-descriptions-item label="认证类型">
@@ -16,7 +16,7 @@
       <a-descriptions-item label="Token最低活跃频率">{{ dataDetail?.activeTimeout }}</a-descriptions-item>
       <a-descriptions-item label="Token有效期">{{ dataDetail?.timeout }}</a-descriptions-item>
       <a-descriptions-item label="状态">
-        <GiCellTag :value="dataDetail?.status" :dict="dis_enable_status_enum" />
+        <GiCellStatus :status="dataDetail?.status" />
       </a-descriptions-item>
       <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
       <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
@@ -30,13 +30,11 @@
 import { useWindowSize } from '@vueuse/core'
 import { type ClientDetailResp, getClient as getDetail } from '@/apis/system/client'
 import { useDict } from '@/hooks/app'
-import GiCellTag from '@/components/GiCell/GiCellTag.vue'
 
 const {
-  auth_type_enum,
   client_type,
-  dis_enable_status_enum,
+  auth_type_enum,
-} = useDict('auth_type_enum', 'client_type', 'dis_enable_status_enum')
+} = useDict('client_type', 'auth_type_enum')
 
 const { width } = useWindowSize()
 

src/views/system/client/index.vue

@@ -6,60 +6,38 @@
       :data="dataList"
       :columns="columns"
       :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
       :pagination="pagination"
       :disabled-tools="['size']"
-      :disabled-column-keys="['name']"
+      :disabled-column-keys="['clientKey']"
       @refresh="search"
     >
       <template #toolbar-left>
-        <a-input v-model="queryForm.clientKey" placeholder="请输入客户端Key" allow-clear @change="search">
+        <a-input-search v-model="queryForm.clientKey" placeholder="搜索客户端Key" allow-clear @search="search" />
-          <template #prefix>
+        <a-input-search v-model="queryForm.clientSecret" placeholder="搜索客户端秘钥" allow-clear @search="search" />
-            <icon-search />
-          </template>
-        </a-input>
-        <a-input v-model="queryForm.clientSecret" placeholder="请输入客户端秘钥" allow-clear @change="search">
-          <template #prefix>
-            <icon-search />
-          </template>
-        </a-input>
         <a-select
           v-model="queryForm.clientType"
           :options="client_type"
           placeholder="请选择客户端类型"
           allow-clear
-          style="width: 150px"
+          style="width: 160px"
           @change="search"
         />
         <a-select
-          v-model="queryForm.status" :options="dis_enable_status_enum" placeholder="请选择状态" allow-clear
+          v-model="queryForm.status" :options="DisEnableStatusList" placeholder="请选择状态" allow-clear
           style="width: 150px"
           @change="search"
-        >
+        />
-          <template #prefix>
-            <icon-search />
-          </template>
-        </a-select>
         <a-button @click="reset">
-          <template #icon>
+          <template #icon><icon-refresh /></template>
-            <icon-refresh />
-          </template>
           <template #default>重置</template>
         </a-button>
       </template>
       <template #toolbar-right>
         <a-button v-permission="['system:client:add']" type="primary" @click="onAdd">
-          <template #icon>
+          <template #icon><icon-plus /></template>
-            <icon-plus />
-          </template>
           <template #default>新增</template>
         </a-button>
-        <a-button v-permission="['system:client:export']" @click="onExport">
-          <template #icon>
-            <icon-download />
-          </template>
-          <template #default>导出</template>
-        </a-button>
       </template>
       <template #action="{ record }">
         <a-space>
@@ -87,22 +65,24 @@
 import type { LabelValue } from '@arco-design/web-vue/es/tree-select/interface'
 import ClientAddModal from './ClientAddModal.vue'
 import ClientDetailDrawer from './ClientDetailDrawer.vue'
-import { type ClientQuery, type ClientResp, deleteClient, exportClient, listClient } from '@/apis/system/client'
+import { type ClientQuery, type ClientResp, deleteClient, listClient } from '@/apis/system/client'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
-import { useDownload, useTable } from '@/hooks'
+import { DisEnableStatusList } from '@/constant/common'
+import { useTable } from '@/hooks'
 import { useDict } from '@/hooks/app'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
+import CellCopy from '@/components/CellCopy/index.vue'
 import GiCellTag from '@/components/GiCell/GiCellTag.vue'
 import GiCellTags from '@/components/GiCell/GiCellTags.vue'
+import GiCellStatus from '@/components/GiCell/GiCellStatus.vue'
 
-defineOptions({ name: 'Client' })
+defineOptions({ name: 'SystemClient' })
 
 const {
-  auth_type_enum,
   client_type,
-  dis_enable_status_enum,
+  auth_type_enum,
-} = useDict('auth_type_enum', 'client_type', 'dis_enable_status_enum')
+} = useDict('client_type', 'auth_type_enum')
 
 const queryForm = reactive<ClientQuery>({
   clientKey: '',
@@ -117,6 +97,7 @@ const formatAuthType = (data: string[]) => {
     return auth_type_enum.value.find((d: LabelValue) => d.value === item).label
   })
 }
+
 const {
   tableData: dataList,
   loading,
@@ -125,8 +106,26 @@ const {
   handleDelete,
 } = useTable((page) => listClient({ ...queryForm, ...page }), { immediate: true })
 const columns: TableInstanceColumns[] = [
-  { title: '客户端ID', dataIndex: 'clientId', slotName: 'clientId', ellipsis: true, tooltip: true },
+  {
-  { title: '客户端Key', dataIndex: 'clientKey', slotName: 'clientKey', ellipsis: true, tooltip: true, align: 'center' },
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  {
+    title: '客户端 ID',
+    dataIndex: 'clientId',
+    slotName: 'clientId',
+    ellipsis: true,
+    tooltip: true,
+    render: ({ record }) => {
+      return (
+        <CellCopy content={record.clientId} />
+      )
+    },
+  },
+  { title: '客户端 Key', dataIndex: 'clientKey', slotName: 'clientKey', ellipsis: true, tooltip: true, align: 'center' },
   { title: '客户端秘钥', dataIndex: 'clientSecret', slotName: 'clientSecret', ellipsis: true, tooltip: true, align: 'center' },
   {
     title: '认证类型',
@@ -152,18 +151,21 @@ const columns: TableInstanceColumns[] = [
       return <GiCellTag value={record.clientType} dict={client_type.value} />
     },
   },
-  { title: 'Token最低活跃频率', dataIndex: 'activeTimeout', slotName: 'activeTimeout', align: 'center' },
+  { title: 'Token 最低活跃频率', dataIndex: 'activeTimeout', slotName: 'activeTimeout', width: 180, align: 'center', render: ({ record }) => `${record.activeTimeout} s` },
-  { title: 'Token有效期', dataIndex: 'timeout', slotName: 'timeout', align: 'center' },
+  { title: 'Token 有效期', dataIndex: 'timeout', slotName: 'timeout', align: 'center', render: ({ record }) => `${record.timeout} s` },
   {
     title: '状态',
     dataIndex: 'status',
     slotName: 'status',
     align: 'center',
     render: ({ record }) => {
-      return <GiCellTag value={record.status} dict={dis_enable_status_enum.value} />
+      return <GiCellStatus status={record.status} />
     },
   },
-  { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
+  { title: '创建人', dataIndex: 'createUserString', width: 140, ellipsis: true, tooltip: true, show: false },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', width: 140, ellipsis: true, tooltip: true, show: false },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
   {
     title: '操作',
     dataIndex: 'action',
@@ -188,16 +190,11 @@ const reset = () => {
 // 删除
 const onDelete = (record: ClientResp) => {
   return handleDelete(() => deleteClient(record.id), {
-    content: `是否确定删除该条数据？`,
+    content: `是否确定删除客户端「${record.clientKey}(${record.clientId})」？`,
     showModal: true,
   })
 }
 
-// 导出
-const onExport = () => {
-  useDownload(() => exportClient(queryForm))
-}
-
 const ClientAddModalRef = ref<InstanceType<typeof ClientAddModal>>()
 // 新增
 const onAdd = () => {

src/views/system/user/UserAddDrawer.vue

@@ -53,7 +53,6 @@ const columns: Columns = reactive([
     field: 'username',
     type: 'input',
     props: {
-      placeholder: '请输入用户名',
       maxLength: 64,
       showWordLimit: true,
     },
@@ -64,7 +63,6 @@ const columns: Columns = reactive([
     field: 'nickname',
     type: 'input',
     props: {
-      placeholder: '请输入昵称',
       maxLength: 30,
       showWordLimit: true,
     },
@@ -75,7 +73,6 @@ const columns: Columns = reactive([
     field: 'password',
     type: 'input-password',
     props: {
-      placeholder: '请输入密码',
       maxLength: 32,
       showWordLimit: true,
     },
@@ -89,7 +86,6 @@ const columns: Columns = reactive([
     field: 'phone',
     type: 'input',
     props: {
-      placeholder: '请输入手机号码',
       maxLength: 11,
     },
   },
@@ -98,7 +94,6 @@ const columns: Columns = reactive([
     field: 'email',
     type: 'input',
     props: {
-      placeholder: '请输入邮箱',
       maxLength: 255,
     },
   },
@@ -114,7 +109,6 @@ const columns: Columns = reactive([
     type: 'tree-select',
     data: deptList,
     props: {
-      placeholder: '请选择所属部门',
       allowClear: true,
       allowSearch: true,
       fallbackOption: false,
@@ -133,7 +127,6 @@ const columns: Columns = reactive([
     type: 'select',
     options: roleList,
     props: {
-      placeholder: '请选择角色',
       multiple: true,
       allowClear: true,
       allowSearch: true,
@@ -145,7 +138,6 @@ const columns: Columns = reactive([
     field: 'description',
     type: 'textarea',
     props: {
-      placeholder: '请输入描述',
       maxLength: 200,
       showWordLimit: true,
       autoSize: { minRows: 3, maxRows: 5 },

src/views/system/user/UserUpdateRoleModal.vue

@@ -48,7 +48,6 @@ const columns: Columns = reactive([
       multiple: true,
       allowClear: true,
       allowSearch: { retainInputValue: true },
-      placeholder: '请选择角色',
     },
     rules: [{ required: true, message: '请选择角色' }],
   },