diff --git a/src/apis/system/type.ts b/src/apis/system/type.ts index 3aecca27b..81742a48c 100644 --- a/src/apis/system/type.ts +++ b/src/apis/system/type.ts @@ -296,6 +296,8 @@ export interface ClientResp { timeout: string status: string isConcurrent: boolean + isEnableRefreshToken: boolean + refreshTokenTimeout: number replacedRange: string maxLoginCount: number overflowLogoutMode: string @@ -316,6 +318,8 @@ export interface ClientDetailResp { timeout: string status: number isConcurrent: boolean + isEnableRefreshToken: boolean + refreshTokenTimeout: number maxLoginCount: number replacedRange: string overflowLogoutMode: string diff --git a/src/views/system/config/client/AddModal.vue b/src/views/system/config/client/AddModal.vue index ffb664099..f10574e10 100644 --- a/src/views/system/config/client/AddModal.vue +++ b/src/views/system/config/client/AddModal.vue @@ -39,6 +39,8 @@ const [form, resetForm] = useResetReactive({ timeout: 86400, isConcurrent: true, maxLoginCount: -1, + isEnableRefreshToken: false, + refreshTokenTimeout: 2592000, status: 1, }) @@ -56,6 +58,18 @@ watch( }, ) +// 监听 isConcurrent 的变化,处理字段互斥逻辑 +watch( + () => form.isEnableRefreshToken, + (newVal) => { + if (newVal) { + form.refreshTokenTimeout = 2592000 + }else{ + form.refreshTokenTimeout = 0; + } + }, +) + const columns: ColumnItem[] = reactive([ { label: '客户端类型', @@ -118,6 +132,42 @@ const columns: ColumnItem[] = reactive([ }, rules: [{ required: true, message: '请输入 Token 有效期' }], }, + { + label: '是否启用Refresh Token', + field: 'isEnableRefreshToken', + type: 'switch', + span: 12, + props: { + type: 'round', + checkedValue: true, + uncheckedValue: false, + checkedText: '启用', + uncheckedText: '禁用', + }, + }, + { + label: () => ( + + Refresh Token 有效期 + + + ), + field: 'refreshTokenTimeout', + type: 'input-number', + span: 12, + slots: { + append: () => ( + + ), + }, + props: { + placeholder: '请输入 Refresh Token 有效期', + }, + rules: [{ required: true, message: '请输入 Refresh Token 有效期' }], + disabled: () => { + return !form.isEnableRefreshToken + }, + }, { label: '是否允许同一账号多地同时登录', field: 'isConcurrent', diff --git a/src/views/system/config/client/DetailDrawer.vue b/src/views/system/config/client/DetailDrawer.vue index 292162117..426806409 100644 --- a/src/views/system/config/client/DetailDrawer.vue +++ b/src/views/system/config/client/DetailDrawer.vue @@ -13,6 +13,8 @@ {{ dataDetail?.activeTimeout }} {{ dataDetail?.timeout }} + {{ dataDetail?.isEnableRefreshToken ? '是' : '否' }} + {{ dataDetail?.refreshTokenTimeout }} 启用 禁用 diff --git a/src/views/system/config/client/index.vue b/src/views/system/config/client/index.vue index 602554c84..f14d33156 100644 --- a/src/views/system/config/client/index.vue +++ b/src/views/system/config/client/index.vue @@ -5,7 +5,7 @@ :data="dataList" :columns="columns" :loading="loading" - :scroll="{ x: '100%', y: '100%', minWidth: 1400 }" + :scroll="{ x: '100%', y: '100%', minWidth: 1760 }" :pagination="pagination" :disabled-tools="['size']" :disabled-column-keys="['clientKey']" @@ -149,6 +149,8 @@ const columns: TableInstance['columns'] = [ }, { title: 'Token 最低活跃频率', dataIndex: 'activeTimeout', slotName: 'activeTimeout', width: 180, align: 'center', render: ({ record }) => `${record.activeTimeout} 秒` }, { title: 'Token 有效期', dataIndex: 'timeout', slotName: 'timeout', width: 180, align: 'center', render: ({ record }) => `${record.timeout} 秒` }, + { title: '启用Refresh Token', dataIndex: 'isEnableRefreshToken', slotName: 'isEnableRefreshToken', width: 180, align: 'center', render: ({ record }) => `${record.isEnableRefreshToken ? '是' : '否'}` }, + { title: 'Refresh Token 有效期', dataIndex: 'refreshTokenTimeout', slotName: 'refreshTokenTimeout', width: 180, align: 'center', render: ({ record }) => `${record.refreshTokenTimeout} 秒` }, { title: '状态', dataIndex: 'status',