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

2025-11-04 10:57:08 +08:00 · 2024-12-27 20:29:59 +08:00
parent f0dff8b753
commit 6ff307251f
17 changed files with 155 additions and 190 deletions
--- a/src/apis/auth/index.ts
+++ b/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 退出登录 */
--- a/src/apis/auth/type.ts
+++ b/src/apis/auth/type.ts
@@ -49,8 +49,8 @@ export enum AuthTypeEnum {
  SOCIAL = 'SOCIAL',
 }
 export interface AuthReq {
-  clientId: string
-  authType: string
+  clientId?: string
+  authType?: string
 }

 /** 账号登录请求参数 */
--- a/src/apis/system/client.ts
+++ b/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 {
-  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 {}
-
-/** @desc 查询系统授权列表 */
-export function listClient(query: ClientPageQuery) {
-  return http.get<PageRes<ClientResp[]>>(`${BASE_URL}`, query)
+/** @desc 查询客户端列表 */
+export function listClient(query: T.ClientPageQuery) {
+  return http.get<PageRes<T.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 删除系统授权 */
-export function deleteClient(id: string) {
-  return http.del(`${BASE_URL}/${id}`)
-}
-
-/** @desc 导出系统授权 */
-export function exportClient(query: ClientQuery) {
-  return http.download(`${BASE_URL}/export`, query)
+/** @desc 删除客户端 */
+export function deleteClient(ids: string | Array<string>) {
+  return http.del(`${BASE_URL}/${ids}`)
 }
--- a/src/apis/system/type.ts
+++ b/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
--- a/src/stores/modules/user.ts
+++ b/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
  }
--- a/src/views/code/generator/GenConfigDrawer.vue
+++ b/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: '请输入作者名称' }],
  },
  {
--- a/src/views/login/components/account/index.vue
+++ b/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 {
--- a/src/views/login/components/email/index.vue
+++ b/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({
--- a/src/views/login/components/phone/index.vue
+++ b/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({
--- a/src/views/monitor/log/operation/OperationLogDetailDrawer.vue
+++ b/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
 }

--- a/src/views/open/app/AppDetailDrawer.vue
+++ b/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
 }

--- a/src/views/system/client/ClientAddModal.vue
+++ b/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: '请选择状态' }],
  },
--- a/src/views/system/client/ClientDetailDrawer.vue
+++ b/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,
-} = useDict('auth_type_enum', 'client_type', 'dis_enable_status_enum')
+  auth_type_enum,
+} = useDict('client_type', 'auth_type_enum')

 const { width } = useWindowSize()

--- a/src/views/system/client/index.vue
+++ b/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">
-          <template #prefix>
-            <icon-search />
-          </template>
-        </a-input>
-        <a-input v-model="queryForm.clientSecret" placeholder="请输入客户端秘钥" allow-clear @change="search">
-          <template #prefix>
-            <icon-search />
-          </template>
-        </a-input>
+        <a-input-search v-model="queryForm.clientKey" placeholder="搜索客户端Key" allow-clear @search="search" />
+        <a-input-search v-model="queryForm.clientSecret" placeholder="搜索客户端秘钥" allow-clear @search="search" />
        <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>
-            <icon-refresh />
-          </template>
+          <template #icon><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>
-            <icon-plus />
-          </template>
+          <template #icon><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,
-} = useDict('auth_type_enum', 'client_type', 'dis_enable_status_enum')
+  auth_type_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: 'timeout', slotName: 'timeout', 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', 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 = () => {
--- a/src/views/system/user/UserAddDrawer.vue
+++ b/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 },
--- a/src/views/system/user/UserUpdateRoleModal.vue
+++ b/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: '请选择角色' }],
  },