diff --git a/src/components/common/Setting/Keys.vue b/src/components/common/Setting/Keys.vue
index cda556a1..601ba6a1 100644
--- a/src/components/common/Setting/Keys.vue
+++ b/src/components/common/Setting/Keys.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { DataTableColumns } from 'naive-ui'
 import { h, onMounted, reactive, ref } from 'vue'
 import { NButton, NDataTable, NInput, NModal, NSelect, NSpace, NSwitch, NTag, useDialog, useMessage } from 'naive-ui'
 import { KeyConfig, Status, UserRole, apiModelOptions, userRoleOptions } from './model'
@@ -18,97 +19,85 @@ const handleSaving = ref(false)
 const keyConfig = ref(new KeyConfig('', 'ChatGPTAPI', [], [], ''))
 
 const keys = ref([])
-const columns = [
-  {
-    title: 'Key',
-    key: 'key',
-    resizable: true,
-    width: 120,
-    minWidth: 50,
-    maxWidth: 120,
-    ellipsis: true,
-  },
-  {
-    title: 'Api Model',
-    key: 'keyModel',
-    width: 150,
-  },
-  {
-    title: 'Base url',
-    key: 'baseUrl',
-    width: 150,
-  },
-  {
-    title: 'Chat Model',
-    key: 'chatModels',
-    width: 300,
-    render(row: any) {
-      const tags = row.chatModels.map((chatModel: string) => {
-        return h(
-          NTag,
-          {
-            style: {
-              marginRight: '6px',
+const createColumns = (): DataTableColumns => {
+  return [
+    {
+      title: 'Key',
+      key: 'key',
+      resizable: true,
+      width: 120,
+      minWidth: 50,
+      maxWidth: 120,
+      ellipsis: true,
+    },
+    {
+      title: 'Api Model',
+      key: 'keyModel',
+      width: 150,
+    },
+    {
+      title: 'Base url',
+      key: 'baseUrl',
+      width: 150,
+    },
+    {
+      title: 'Chat Model',
+      key: 'chatModels',
+      width: 300,
+      render(row: any) {
+        const tags = row.chatModels.map((chatModel: string) => {
+          return h(
+            NTag,
+            {
+              style: {
+                marginRight: '6px',
+              },
+              type: 'info',
+              bordered: false,
             },
-            type: 'info',
-            bordered: false,
-          },
-          {
-            default: () => chatModel,
-          },
-        )
-      })
-      return tags
+            {
+              default: () => chatModel,
+            },
+          )
+        })
+        return tags
+      },
     },
-  },
-  {
-    title: 'User Roles',
-    key: 'userRoles',
-    width: 180,
-    render(row: any) {
-      const tags = row.userRoles.map((userRole: UserRole) => {
-        return h(
-          NTag,
-          {
-            style: {
-              marginRight: '6px',
+    {
+      title: 'User Roles',
+      key: 'userRoles',
+      width: 180,
+      render(row: any) {
+        const tags = row.userRoles.map((userRole: UserRole) => {
+          return h(
+            NTag,
+            {
+              style: {
+                marginRight: '6px',
+              },
+              type: 'info',
+              bordered: false,
             },
-            type: 'info',
-            bordered: false,
-          },
-          {
-            default: () => UserRole[userRole],
-          },
-        )
-      })
-      return tags
+            {
+              default: () => UserRole[userRole],
+            },
+          )
+        })
+        return tags
+      },
     },
-  },
-  {
-    title: 'Remark',
-    key: 'remark',
-    width: 150,
-  },
-  {
-    title: 'Action',
-    key: '_id',
-    width: 220,
-    fixed: 'right',
-    render(row: KeyConfig) {
-      const actions: any[] = []
-      actions.push(h(
-        NButton,
-        {
-          size: 'small',
-          style: {
-            marginRight: '6px',
-          },
-          type: 'error',
-          onClick: () => handleUpdateApiKeyStatus(row._id as string, Status.Disabled),
-        },
-        { default: () => t('common.delete') },
-      ))
-      if (row.status === Status.Normal) {
+    {
+      title: 'Remark',
+      key: 'remark',
+      width: 150,
+    },
+    {
+      title: 'Action',
+      key: '_id',
+      width: 220,
+      fixed: 'right',
+      render(row: any) {
+        const actions: any[] = []
         actions.push(h(
           NButton,
           {
@@ -116,16 +105,33 @@ const columns = [
             style: {
               marginRight: '6px',
             },
-            type: 'info',
-            onClick: () => handleEditKey(row),
+            type: 'error',
+            onClick: () => handleUpdateApiKeyStatus(row._id as string, Status.Disabled),
           },
-          { default: () => t('common.edit') },
+          { default: () => t('common.delete') },
         ))
-      }
-      return actions
+        if (row.status === Status.Normal) {
+          actions.push(h(
+            NButton,
+            {
+              size: 'small',
+              style: {
+                marginRight: '6px',
+              },
+              type: 'info',
+              onClick: () => handleEditKey(row as KeyConfig),
+            },
+            { default: () => t('common.edit') },
+          ))
+        }
+        return actions
+      },
     },
-  },
-]
+  ]
+}
+
+const columns = createColumns()
+
 const pagination = reactive({
   page: 1,
   pageSize: 100,
diff --git a/src/components/common/Setting/User.vue b/src/components/common/Setting/User.vue
index 1c953929..260ad992 100644
--- a/src/components/common/Setting/User.vue
+++ b/src/components/common/Setting/User.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { DataTableColumns } from 'naive-ui'
 import { h, onMounted, reactive, ref } from 'vue'
 import { NButton, NDataTable, NInput, NInputNumber, NModal, NSelect, NSpace, NSwitch, NTag, useDialog, useMessage } from 'naive-ui'
 import { Status, UserInfo, UserRole, userRoleOptions } from './model'
@@ -15,163 +16,169 @@ const handleSaving = ref(false)
 const userRef = ref(new UserInfo([UserRole.User]))
 
 const users = ref([])
-const columns = [
-  {
-    title: 'Email',
-    key: 'email',
-    resizable: true,
-    width: 200,
-    minWidth: 80,
-    maxWidth: 200,
-  },
-  {
-    title: 'Register Time',
-    key: 'createTime',
-    resizable: true,
-    width: 200,
-    minWidth: 80,
-    maxWidth: 200,
-  },
-  {
-    title: 'Verify Time',
-    key: 'verifyTime',
-    resizable: true,
-    width: 200,
-    minWidth: 80,
-    maxWidth: 200,
-  },
-  {
-    title: 'Roles',
-    key: 'status',
-    resizable: true,
-    width: 200,
-    minWidth: 80,
-    maxWidth: 200,
-    render(row: any) {
-      const roles = row.roles.map((role: UserRole) => {
-        return h(
-          NTag,
-          {
-            style: {
-              marginRight: '6px',
+
+const createColumns = (): DataTableColumns => {
+  return [
+    {
+      title: 'Email',
+      key: 'email',
+      resizable: true,
+      width: 200,
+      minWidth: 80,
+      maxWidth: 200,
+    },
+    {
+      title: 'Register Time',
+      key: 'createTime',
+      resizable: true,
+      width: 200,
+      minWidth: 80,
+      maxWidth: 200,
+    },
+    {
+      title: 'Verify Time',
+      key: 'verifyTime',
+      resizable: true,
+      width: 200,
+      minWidth: 80,
+      maxWidth: 200,
+    },
+    {
+      title: 'Roles',
+      key: 'status',
+      resizable: true,
+      width: 200,
+      minWidth: 80,
+      maxWidth: 200,
+      render(row: any) {
+        const roles = row.roles.map((role: UserRole) => {
+          return h(
+            NTag,
+            {
+              style: {
+                marginRight: '6px',
+              },
+              type: 'info',
+              bordered: false,
             },
-            type: 'info',
-            bordered: false,
-          },
-          {
-            default: () => UserRole[role],
-          },
-        )
-      })
-      return roles
+            {
+              default: () => UserRole[role],
+            },
+          )
+        })
+        return roles
+      },
     },
-  },
-  {
-    title: 'Status',
-    key: 'status',
-    width: 80,
-    render(row: any) {
-      return Status[row.status]
+    {
+      title: 'Status',
+      key: 'status',
+      width: 80,
+      render(row: any) {
+        return Status[row.status]
+      },
     },
-  },
-  {
-    title: 'Remark',
-    key: 'remark',
-    resizable: true,
-    width: 200,
-    minWidth: 80,
-    maxWidth: 200,
-  },
-  // 新增额度信息
-  {
-    title: 'Amts',
-    key: 'useAmount',
-    resizable: true,
-    width: 80,
-    minWidth: 30,
-    maxWidth: 100,
-  },
-  // switch off amt limit
-  {
-    title: 'limit switch',
-    key: 'limit_switch',
-    resizable: true,
-    width: 100,
-    minWidth: 30,
-    maxWidth: 100,
-    render(row: any) {
-        return h(NSwitch, {
-        defaultValue: row.limit_switch,
-        round: false,
-        disabled: true,
-      })
+    {
+      title: 'Remark',
+      key: 'remark',
+      resizable: true,
+      width: 200,
+      minWidth: 80,
+      maxWidth: 200,
     },
-  },
-  // 新增额度信息
-  {
-    title: 'Amts',
-    key: 'useAmount',
-    width: 80,
-  },
-  {
-    title: 'Action',
-    key: '_id',
-    width: 220,
-    fixed: 'right',
-    render(row: any) {
-      const actions: any[] = []
-      actions.push(h(
-        NButton,
-        {
-          size: 'small',
-          type: 'error',
-          style: {
-            marginRight: '6px',
-          },
-          onClick: () => handleUpdateUserStatus(row._id, Status.Deleted),
-        },
-        { default: () => t('common.delete') },
-      ))
-      if (row.status === Status.Normal) {
+    // 新增额度信息
+    {
+      title: 'Amts',
+      key: 'useAmount',
+      resizable: true,
+      width: 80,
+      minWidth: 30,
+      maxWidth: 100,
+    },
+    // switch off amt limit
+    {
+      title: 'limit switch',
+      key: 'limit_switch',
+      resizable: true,
+      width: 100,
+      minWidth: 30,
+      maxWidth: 100,
+      render(row: any) {
+          return h(NSwitch, {
+          defaultValue: row.limit_switch,
+          round: false,
+          disabled: true,
+        })
+      },
+    },
+    // 新增额度信息
+    {
+      title: 'Amts',
+      key: 'useAmount',
+      width: 80,
+    },
+    {
+      title: 'Action',
+      key: '_id',
+      width: 220,
+      fixed: 'right',
+      render(row: any) {
+        const actions: any[] = []
         actions.push(h(
           NButton,
           {
             size: 'small',
-            type: 'primary',
+            type: 'error',
             style: {
-              marginRight: '8px',
+              marginRight: '6px',
             },
-            onClick: () => handleEditUser(row),
-          },
-          { default: () => t('chat.editUser') },
-        ))
-      }
-      if (row.status === Status.PreVerify || row.status === Status.AdminVerify) {
-        actions.push(h(
-          NButton,
-          {
-            size: 'small',
-            type: 'info',
-            onClick: () => handleUpdateUserStatus(row._id, Status.Normal),
-          },
-          { default: () => t('chat.verifiedUser') },
-        ))
-      }
-      if (row.secretKey) {
-        actions.push(h(
-          NButton,
-          {
-            size: 'small',
-            type: 'warning',
-            onClick: () => handleDisable2FA(row._id),
+            onClick: () => handleUpdateUserStatus(row._id, Status.Deleted),
           },
-          { default: () => t('chat.disable2FA') },
+          { default: () => t('common.delete') },
         ))
-      }
-      return actions
+        if (row.status === Status.Normal) {
+          actions.push(h(
+            NButton,
+            {
+              size: 'small',
+              type: 'primary',
+              style: {
+                marginRight: '8px',
+              },
+              onClick: () => handleEditUser(row),
+            },
+            { default: () => t('chat.editUser') },
+          ))
+        }
+        if (row.status === Status.PreVerify || row.status === Status.AdminVerify) {
+          actions.push(h(
+            NButton,
+            {
+              size: 'small',
+              type: 'info',
+              onClick: () => handleUpdateUserStatus(row._id, Status.Normal),
+            },
+            { default: () => t('chat.verifiedUser') },
+          ))
+        }
+        if (row.secretKey) {
+          actions.push(h(
+            NButton,
+            {
+              size: 'small',
+              type: 'warning',
+              onClick: () => handleDisable2FA(row._id),
+            },
+            { default: () => t('chat.disable2FA') },
+          ))
+        }
+        return actions
+      },
     },
-  },
-]
+  ]
+}
+
+const columns = createColumns()
+
 const pagination = reactive ({
   page: 1,
   pageSize: 25,