perf: API key validity period setting

Author: wangdan-fit2cloud

ui/src/layout/layout-header/avatar/APIKeyDialog.vue

@@ -2,7 +2,7 @@
   <el-dialog
     :title="$t('layout.apiKey')"
     v-model="dialogVisible"
-    width="800"
+    width="1080"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     align-center
@@ -22,11 +22,14 @@
     <el-button type="primary" class="mb-16" @click="createApiKey">
       {{ $t('common.create') }}
     </el-button>
-    <el-table
+    <app-table
       :data="apiKey"
       :loading="loading"
       style="min-height: 300px"
       :max-height="420"
+      :pagination-config="paginationConfig"
+      @sizeChange="handleSizeChange"
+      @changePage="getApiKeyList"
     >
       <el-table-column prop="secret_key" label="API Key">
         <template #default="{ row }">
@@ -38,24 +41,55 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column :label="$t('common.status.label')" width="80">
+      <el-table-column :label="$t('views.document.enableStatus.label')" width="100">
         <template #default="{ row }">
-          <div @click.stop>
-            <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
+          <div v-if="row.is_active" class="flex align-center">
+            <el-icon class="color-success mr-8" style="font-size: 16px">
+              <SuccessFilled />
+            </el-icon>
+            <span class="color-text-primary">
+              {{ $t('common.status.enabled') }}
+            </span>
+          </div>
+          <div v-else class="flex align-center">
+            <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
+            <span class="color-text-primary">
+              {{ $t('common.status.disabled') }}
+            </span>
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="name" :label="$t('common.createDate')" width="170">
+      <el-table-column :label="$t('layout.crossSettings')" width="100">
+        <template #default="{ row }">
+          <el-tag type="info" class="info-tag">
+            {{ $t('views.system.authentication.scanTheQRCode.alreadyTurnedOn') }}
+          </el-tag>
+          <el-tag class="blue-tag">
+            {{ $t('views.system.authentication.scanTheQRCode.notEnabled') }}
+          </el-tag>
+        </template>
+      </el-table-column>
+
+      <el-table-column :label="$t('layout.about.expiredTime')" width="170">
+        <template #default="{ row }">
+          <!-- {{ datetimeFormat(row.create_time) }} -->
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common.createDate')" width="170" prop="create_time" sortable>
         <template #default="{ row }">
           {{ datetimeFormat(row.create_time) }}
         </template>
       </el-table-column>
-      <el-table-column :label="$t('common.setting')" align="left" width="80">
+      <el-table-column :label="$t('common.operation')" align="left" width="130">
         <template #default="{ row }">
+          <span @click.stop>
+            <el-switch size="small" v-model="row.is_active" @change="changeState($event, row)" />
+          </span>
+          <el-divider direction="vertical" />
           <span class="mr-4">
             <el-tooltip effect="dark" :content="$t('common.setting')" placement="top">
               <el-button type="primary" text @click.stop="settingApiKey(row)">
-                <AppIcon iconName="app-setting"></AppIcon>
+                <AppIcon iconName="app-edit"></AppIcon>
               </el-button>
             </el-tooltip>
           </span>
@@ -66,19 +100,19 @@
           </el-tooltip>
         </template>
       </el-table-column>
-    </el-table>
+    </app-table>
     <SettingAPIKeyDialog ref="SettingAPIKeyDialogRef" @refresh="refresh" />
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import { copyClick } from '@/utils/clipboard'
 import systemKeyApi from '@/api/system/api-key'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { t } from '@/locales'
-import SettingAPIKeyDialog from '@/views/application-overview/component/SettingAPIKeyDialog.vue'
+import SettingAPIKeyDialog from '@/views/application-overview/component/SettingAPIKeyDrawer.vue'
 
 const route = useRoute()
 const {
@@ -91,6 +125,7 @@ const props = defineProps({
     default: '',
   },
 })
+
 const emit = defineEmits(['addData'])
 
 const apiUrl = window.location.origin + `${window.MaxKB.prefix}/api-doc/`
@@ -99,12 +134,23 @@ const dialogVisible = ref<boolean>(false)
 const loading = ref(false)
 const apiKey = ref<any>(null)
 
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 20,
+  total: 0,
+})
+
 watch(dialogVisible, (bool) => {
   if (!bool) {
     apiKey.value = null
   }
 })
 
+function handleSizeChange() {
+  paginationConfig.current_page = 1
+  getApiKeyList()
+}
+
 function settingApiKey(row: any) {
   SettingAPIKeyDialogRef.value.open(row, 'USER')
 }
@@ -140,9 +186,10 @@ function changeState(bool: boolean, row: any) {
 }
 
 function createApiKey() {
-  systemKeyApi.postAPIKey(loading).then((res) => {
-    getApiKeyList()
-  })
+  // systemKeyApi.postAPIKey(loading).then((res) => {
+  //   getApiKeyList()
+  // })
+  SettingAPIKeyDialogRef.value.open(null, 'USER')
 }
 
 const open = () => {

ui/src/locales/lang/en-US/layout.ts

@@ -7,6 +7,7 @@ export default {
   apiServiceAddress: 'API Service Address',
   language: 'Language',
   isExpire: 'License not uploaded or expired',
+  crossSettings: 'Cross-Origin Settings',
   about: {
     title: 'About',
     expiredTime: 'Expiration Date',
@@ -32,9 +33,9 @@ export default {
     daysLater: 'days later',
     hoursLater: 'hours later',
     expired: 'expired',
-    expiringSoon: 'expiring soon'
+    expiringSoon: 'expiring soon',
   },
   copyright: 'Copyright © 2014-2026 FIT2CLOUD, All rights reserved.',
   userManualUrl: 'http://docs.maxkb.hk/',
-  forumUrl: 'https://github.com/1Panel-dev/MaxKB/discussions'
+  forumUrl: 'https://github.com/1Panel-dev/MaxKB/discussions',
 }

ui/src/locales/lang/zh-CN/layout.ts

@@ -7,6 +7,7 @@ export default {
   apiServiceAddress: 'API 服务地址',
   language: '语言',
   isExpire: '未上传 License 或 License 已过期。',
+  crossSettings: '跨域设置',
   about: {
     title: '关于',
     expiredTime: '到期时间',
@@ -32,7 +33,10 @@ export default {
     daysLater: '天后',
     hoursLater: '小时后',
     expired: '已过期',
-    expiringSoon: '即将到期'
+    expiringSoon: '即将到期',
+    neverExpires: '永不过期',
+    daysValid: '天有效',
+
   },
   copyright: '版权所有 © 2014-2026 杭州飞致云信息科技有限公司',
   userManualUrl: 'https://maxkb.cn/docs/v2/',

ui/src/locales/lang/zh-Hant/layout.ts

@@ -3,19 +3,19 @@ export default {
   wiki: '使用者手冊',
   forum: '論壇求助',
   logout: '登出',
-
   apiKey: 'API Key 管理',
   apiServiceAddress: 'API 服務地址',
   language: '語言',
   isExpire: '未上傳 License 或 License 已過期。',
+  crossSettings: '跨域設定',
   about: {
     title: '關於',
     expiredTime: '到期時間',
     edition: {
       label: '版本',
       community: '社群版',
       professional: '專業版',
-      enterprise: '企業版'
+      enterprise: '企業版',
     },
     version: '版本號',
     serialNo: '序列號',
@@ -33,9 +33,9 @@ export default {
     daysLater: '天後',
     hoursLater: '小時後',
     expired: '已過期',
-    expiringSoon: '即將到期'
+    expiringSoon: '即將到期',
   },
   copyright: '版權所有 © 2014-2026 杭州飛致雲信息科技有限公司',
-  userManualUrl:'https://maxkb.cn/docs/v2/',
-  forumUrl: 'https://github.com/1Panel-dev/MaxKB/discussions'
+  userManualUrl: 'https://maxkb.cn/docs/v2/',
+  forumUrl: 'https://github.com/1Panel-dev/MaxKB/discussions',
 }

ui/src/utils/time.ts

@@ -2,7 +2,16 @@ import moment from 'moment'
 import 'moment/dist/locale/zh-cn'
 
 moment.locale('zh-cn')
-import {t} from '@/locales'
+import { t } from '@/locales'
+
+export const expiredTimeList = {
+  'never': t('layout.time.neverExpires'),
+  '7': '7 ' + t('layout.time.daysValid'),
+  '30': '30 ' + t('layout.time.daysValid'),
+  '90': '90 ' + t('layout.time.daysValid'),
+  '180': '180 ' + t('layout.time.daysValid'),
+  'custom': t('common.custom'),
+}
 
 // 当天日期 YYYY-MM-DD
 export const nowDate = moment().format('YYYY-MM-DD')
@@ -11,6 +20,18 @@ export const nowDate = moment().format('YYYY-MM-DD')
 export function beforeDay(n: number | string) {
   return moment().subtract(n, 'days').format('YYYY-MM-DD')
 }
+// 当前时间的n天后的时间戳
+export function AfterTimestamp(n: number | string) {
+  return Number(moment().add(parseInt(n as string), 'days').format('x'))
+}
+
+export function formatEndDate(date: any) {
+  return Number(moment(date).endOf('day').format('x'));
+} // date的23点59分
+
+export function formatStartDate(date: any) {
+  return Number(moment(date).startOf('day').format('x'));
+} // date的0点
 
 const getCheckDate = (timestamp: any) => {
   if (!timestamp) return false
@@ -43,7 +64,6 @@ export const dateFormat = (timestamp: any) => {
   return `${y}-${m}-${d}`
 }
 
-
 export function fromNowDate(time: any) {
   // 拿到当前时间戳和发布时的时间戳，然后得出时间戳差
   const curTime = new Date()

ui/src/views/application-overview/component/APIKeyDialog.vue

@@ -67,7 +67,7 @@
 import { ref, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { copyClick } from '@/utils/clipboard'
-import SettingAPIKeyDialog from './SettingAPIKeyDialog.vue'
+import SettingAPIKeyDialog from './SettingAPIKeyDrawer.vue'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { t } from '@/locales'

ui/src/views/application-overview/component/SettingAPIKeyDialog.vue

@@ -68,6 +68,7 @@ const loading = ref(false)
 
 const APIKeyId = ref('')
 const APIType = ref('APPLICATION')
+const isCreate = ref(false)
 
 watch(dialogVisible, (bool) => {
   if (!bool) {
@@ -79,12 +80,17 @@ watch(dialogVisible, (bool) => {
 })
 
 const open = (data: any, type: string) => {
-  APIKeyId.value = data.id
+  if (data) {
+    isCreate.value = false
+    APIKeyId.value = data.id
+    form.value.allow_cross_domain = data.allow_cross_domain
+    form.value.cross_domain_list = data.cross_domain_list?.length
+      ? data.cross_domain_list?.join('\n')
+      : ''
+  } else {
+    isCreate.value = true
+  }
   APIType.value = type
-  form.value.allow_cross_domain = data.allow_cross_domain
-  form.value.cross_domain_list = data.cross_domain_list?.length
-    ? data.cross_domain_list?.join('\n')
-    : ''
   dialogVisible.value = true
 }