style: format code

index.html

@@ -28,7 +28,7 @@
           (!localStorage.getItem('theme') &&
             window.matchMedia('(prefers-color-scheme: dark)').matches),
       )
-      window.eltLoader = document.getElementById('appLoader')
+      window.loaderElement = document.getElementById('appLoader')
     </script>
     <script
       type="module"

src/components/ButtonAnimation.vue

@@ -15,7 +15,7 @@ const { duration = 600, animation = 'beat' } = defineProps<ButtonAnimationProps>
 
 const isAnimating = ref(false)
 
-const handleButtonClick = () => {
+const onButtonClicked = () => {
   if (isAnimating.value) return
 
   isAnimating.value = true
@@ -31,7 +31,7 @@ const handleButtonClick = () => {
     quaternary
     circle
     v-bind="$attrs"
-    @click.stop="handleButtonClick"
+    @click.stop="onButtonClicked"
   >
     <template #icon>
       <div

src/composable/comp/useDataTable.ts

@@ -10,7 +10,7 @@ interface DataTableOptions {
   parentWrap?: MaybeHTMLElement
 }
 
-type EltKey = 'container' | 'dataTable' | 'table' | 'tableThead' | 'wrap'
+type ElementKey = 'container' | 'dataTable' | 'table' | 'tableThead' | 'wrap'
 
 export function useDataTable<T extends ComponentPublicInstance>(
   target: Ref<T | null>,
@@ -22,7 +22,7 @@ export function useDataTable<T extends ComponentPublicInstance>(
 
   const maxHeight = ref<number | undefined>(0)
 
-  const eltNode = reactive<Record<EltKey, HTMLElement | null>>({
+  const elementMap = reactive<Record<ElementKey, HTMLElement | null>>({
     dataTable: null,
     table: null,
     tableThead: null,
@@ -31,7 +31,7 @@ export function useDataTable<T extends ComponentPublicInstance>(
   })
 
   function updateMaxHeight() {
-    const { container, wrap, tableThead, table } = eltNode
+    const { container, wrap, tableThead, table } = elementMap
 
     if (!container || !wrap || !tableThead || !table) {
       return
@@ -48,14 +48,14 @@ export function useDataTable<T extends ComponentPublicInstance>(
         : containerHeight - wrapHeight - theadHeight + tableHeight) - 1
   }
 
-  const debouncedFn = debounce(() => {
+  const debounceUpdateMaxHeight = debounce(() => {
     updateMaxHeight()
   }, 300)
 
-  function getParentElt(elt: MaybeHTMLElement) {
-    if (isString(elt)) return eltNode.dataTable?.closest<HTMLElement>(elt) ?? null
-    if (isRef(elt)) return elt.value
-    if (isElement(elt)) return elt
+  function getParentElement(element: MaybeHTMLElement) {
+    if (isString(element)) return elementMap.dataTable?.closest<HTMLElement>(element) ?? null
+    if (isRef(element)) return element.value
+    if (isElement(element)) return element
     return null
   }
 
@@ -65,15 +65,15 @@ export function useDataTable<T extends ComponentPublicInstance>(
       return
     }
 
-    eltNode.dataTable = (target.value?.$el as HTMLElement) ?? null
-    eltNode.table = eltNode.dataTable?.querySelector('.n-data-table-base-table') ?? null
-    eltNode.tableThead = eltNode.table?.querySelector('.n-data-table-thead') ?? null
+    elementMap.dataTable = (target.value?.$el as HTMLElement) ?? null
+    elementMap.table = elementMap.dataTable?.querySelector('.n-data-table-base-table') ?? null
+    elementMap.tableThead = elementMap.table?.querySelector('.n-data-table-thead') ?? null
 
     nextTick(() => {
-      eltNode.container = getParentElt(parentContainer)
-      eltNode.wrap = getParentElt(parentWrap)
+      elementMap.container = getParentElement(parentContainer)
+      elementMap.wrap = getParentElement(parentWrap)
 
-      const missingKeys = Object.entries(eltNode)
+      const missingKeys = Object.entries(elementMap)
         .filter((value) => value[1] == null)
         .map(([key]) => key)
 
@@ -84,12 +84,12 @@ export function useDataTable<T extends ComponentPublicInstance>(
       resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
           const { height } = entry.contentRect
-          if (height) debouncedFn()
+          if (height) debounceUpdateMaxHeight()
         }
       })
 
-      if (eltNode.container) {
-        resizeObserver.observe(eltNode.container)
+      if (elementMap.container) {
+        resizeObserver.observe(elementMap.container)
       }
     })
   }

src/composable/usePersonalization.ts

@@ -3,22 +3,22 @@ import { ref } from 'vue'
 export type Theme = 'dark' | 'light' | 'system'
 
 interface PersonalizationOptions {
-  colorKey: string
+  storageColorKey: string
   defaultColor: string
   defaultTheme: Theme
   storageThemeKey: string
 }
 
-let personalizationInstance: ReturnType<typeof createPersonalization> | null = null
+let personalizationInstance: ReturnType<typeof setupPersonalization> | null = null
 
-function createPersonalization(options: PersonalizationOptions) {
-  const { colorKey, defaultColor, defaultTheme, storageThemeKey } = options
+function setupPersonalization(options: PersonalizationOptions) {
+  const { storageColorKey, defaultColor, defaultTheme, storageThemeKey } = options
 
   const rootElement = window.document.documentElement
   const prefersDarkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 
   const theme = ref<Theme>((localStorage.getItem(storageThemeKey) as Theme) || defaultTheme)
-  const color = ref(localStorage.getItem(colorKey) || defaultColor)
+  const color = ref(localStorage.getItem(storageColorKey) || defaultColor)
   const isDark = ref(false)
 
   function setTheme(value: Theme) {
@@ -30,15 +30,15 @@ function createPersonalization(options: PersonalizationOptions) {
       localStorage.setItem(storageThemeKey, theme.value)
     }
 
-    updateThemeClass()
+    toggleDocumentElementClass()
   }
 
   function setColor(value: string) {
     color.value = value
-    localStorage.setItem(colorKey, color.value)
+    localStorage.setItem(storageColorKey, color.value)
   }
 
-  function updateThemeClass() {
+  function toggleDocumentElementClass() {
     const isDarkTheme =
       localStorage.getItem(storageThemeKey) === 'dark' ||
       (!localStorage.getItem(storageThemeKey) && prefersDarkMediaQuery.matches)
@@ -48,7 +48,7 @@ function createPersonalization(options: PersonalizationOptions) {
     rootElement.classList.toggle('dark', isDarkTheme)
   }
 
-  function applyThemeFromStorage() {
+  function updateTheme() {
     const storageTheme = localStorage.getItem(storageThemeKey) as Theme
     if (['dark', 'light'].includes(storageTheme)) {
       setTheme(storageTheme)
@@ -58,13 +58,13 @@ function createPersonalization(options: PersonalizationOptions) {
   }
 
   function destroy() {
-    prefersDarkMediaQuery.removeEventListener('change', updateThemeClass)
-    window.removeEventListener('storage', applyThemeFromStorage)
+    prefersDarkMediaQuery.removeEventListener('change', toggleDocumentElementClass)
+    window.removeEventListener('storage', updateTheme)
   }
 
-  updateThemeClass()
-  prefersDarkMediaQuery.addEventListener('change', updateThemeClass)
-  window.addEventListener('storage', applyThemeFromStorage)
+  toggleDocumentElementClass()
+  prefersDarkMediaQuery.addEventListener('change', toggleDocumentElementClass)
+  window.addEventListener('storage', updateTheme)
 
   return {
     color,
@@ -78,8 +78,8 @@ function createPersonalization(options: PersonalizationOptions) {
 
 export const usePersonalization = () => {
   if (!personalizationInstance) {
-    personalizationInstance = createPersonalization({
-      colorKey: 'color',
+    personalizationInstance = setupPersonalization({
+      storageColorKey: 'color',
       defaultColor: '#8e51ff',
       defaultTheme: 'system',
       storageThemeKey: 'theme',

src/layout/aside/component/Menu.vue

@@ -39,7 +39,7 @@ watch(
       :collapsed="configureStore.configure.menuCollapsed"
       :collapsed-icon-size="20"
       :value="menuActiveKey"
-      :options="userStore.userMenu"
+      :options="userStore.menuList"
     />
   </NScrollbar>
 </template>

src/layout/aside/index.vue

@@ -4,7 +4,7 @@ import { computed, inject } from 'vue'
 import { menuInjectionKey } from '@/injection'
 import { useConfigureStore } from '@/stores/configure'
 
-import CompMenu from './component/Menu.vue'
+import Menu from './component/Menu.vue'
 import UserCard from './component/UserCard.vue'
 
 defineOptions({
@@ -32,7 +32,7 @@ function handleCollapseClick() {
       width: `${menuCollapseWidth}px`,
     }"
   >
-    <CompMenu />
+    <Menu />
     <UserCard />
     <div
       class="absolute top-1/2 right-0 z-50 grid size-6 translate-x-1/2 -translate-y-1/2 cursor-pointer place-items-center rounded-full border border-naive-border bg-white transition-[background-color,border-color] duration-300 ease-naive-bezier hover:bg-neutral-50 dark:bg-neutral-750 dark:hover:bg-neutral-700"

src/layout/component/Tabs.vue

@@ -43,24 +43,24 @@ const tabsStore = useTabsStore()
 
 const configureStore = useConfigureStore()
 
-const { tabs, tabActiveKey, tabsKeepAlive } = storeToRefs(tabsStore)
+const { tabs, tabActiveKey, keepAliveTabs } = storeToRefs(tabsStore)
 
 const {
   isLocked,
   isPinned,
-  getUnlockedTabKeysExcept,
-  getUnlockedTabKeysBefore,
-  getUnlockedTabKeysAfter,
-  getUnlockedTabKeys,
-  hasKeepAlive,
-  setKeepAlive,
+  hasKeepAliveTab,
+  getUnlockedKeysBefore,
+  getUnlockedKeysAfter,
+  getUnlockedKeysExcept,
+  getUnlockedKeys,
+  setKeepAliveTab,
   setLocked,
-  setTabs,
-  removeTab,
-  removeAllTabs,
-  removeTabsBefore,
-  removeTabsExcept,
-  removeTabsAfter,
+  update,
+  remove,
+  removeBefore,
+  removeAfter,
+  removeExcept,
+  removeAll,
 } = tabsStore
 
 const tabPinnedList = ref<Tab[]>([])
@@ -102,7 +102,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭',
     },
     {
-      disabled: isEmpty(getUnlockedTabKeysExcept(key)),
+      disabled: isEmpty(getUnlockedKeysExcept(key)),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrows-out-line-horizontal',
@@ -111,7 +111,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭其他',
     },
     {
-      disabled: isEmpty(getUnlockedTabKeysBefore(key)),
+      disabled: isEmpty(getUnlockedKeysBefore(key)),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrow-line-left',
@@ -120,7 +120,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭左侧',
     },
     {
-      disabled: isEmpty(getUnlockedTabKeysAfter(key)),
+      disabled: isEmpty(getUnlockedKeysAfter(key)),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrow-line-right',
@@ -129,7 +129,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭右侧',
     },
     {
-      disabled: isEmpty(getUnlockedTabKeys()),
+      disabled: isEmpty(getUnlockedKeys()),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrows-horizontal',
@@ -140,7 +140,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
     {
       disabled: isEmpty(componentName),
       icon: () =>
-        hasKeepAlive(componentName)
+        hasKeepAliveTab(componentName)
           ? h('span', {
               class: 'iconify-[hugeicons--database-02]',
             })
@@ -148,7 +148,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
               class: 'iconify-[hugeicons--database-locked]',
             }),
       key: 'keepAlive',
-      label: hasKeepAlive(componentName) ? '取消缓存' : '缓存标签页',
+      label: hasKeepAliveTab(componentName) ? '取消缓存' : '缓存标签页',
     },
     {
       disabled: isPinned(key),
@@ -176,7 +176,7 @@ const handleTabClick = (key: string) => {
 }
 
 const handleTabCloseClick = (key: string) => {
-  removeTab(key)
+  remove(key)
 }
 
 const handleTabContextMenuClick = (e: MouseEvent, tab: Tab) => {
@@ -204,7 +204,7 @@ const onTabDraggableStart = () => {
 }
 
 const onTabDraggableEnd = () => {
-  setTabs([...tabPinnedList.value, ...tabList.value])
+  update([...tabPinnedList.value, ...tabList.value])
   showTabTooltip.value = true
 }
 
@@ -243,23 +243,23 @@ function getTabContextMenuActions(): ContextMenuActions | null {
 
   return {
     close: () => {
-      removeTab(key)
+      remove(key)
     },
     closeAll: () => {
-      removeAllTabs()
+      removeAll()
     },
     closeLeft: () => {
-      removeTabsBefore(key)
+      removeBefore(key)
     },
     closeOther: () => {
-      removeTabsExcept(key)
+      removeExcept(key)
     },
     closeRight: () => {
-      removeTabsAfter(key)
+      removeAfter(key)
     },
     keepAlive: () => {
       if (componentName) {
-        setKeepAlive(componentName)
+        setKeepAliveTab(componentName)
       }
     },
     lock: () => {
@@ -420,7 +420,7 @@ onMounted(() => {
                     tab.icon,
                     {
                       'text-primary':
-                        tab.componentName && tabsKeepAlive.includes(tab.componentName),
+                        tab.componentName && keepAliveTabs.includes(tab.componentName),
                     },
                   ]"
                 />

src/layout/header/Actions/component/SignOut.vue

@@ -17,11 +17,11 @@ const handleSignOutClick = () => {
     content: '确定要退出登录吗？',
     positiveText: '确定',
     negativeText: '取消',
-    onPositiveClick: clearUserInfo,
+    onPositiveClick: cleanupUserInfo,
   })
 }
 
-function clearUserInfo() {
+function cleanupUserInfo() {
   userStore.cleanup()
 }
 </script>

src/layout/main/index.vue

@@ -22,25 +22,25 @@ const tabsStore = useTabsStore()
 
 const configureStore = useConfigureStore()
 
-const { tabs, tabActiveKey, tabsKeepAlive } = storeToRefs(tabsStore)
+const { tabs, tabActiveKey, keepAliveTabs: keepAliveComponents } = storeToRefs(tabsStore)
 
 const { configure, isNavigating } = storeToRefs(configureStore)
 
-const { createTab, setActive } = tabsStore
+const { create, setActive } = tabsStore
 
 const isMounted = ref(false)
 
-// Snapshots need to be recorded to make accurate judgments
-let oldTabs: Tab[] = []
-
 const transitionName = ref('')
 
-function doCreateTab(route: RouteLocationNormalizedLoaded) {
+// snapshots need to be recorded to make accurate judgments
+let oldTabs: Tab[] = []
+
+function createTab(route: RouteLocationNormalizedLoaded) {
   const { pinned, componentName, icon = 'iconify ph--browser', label = '未命名标签' } = route.meta
 
   const { fullPath, name } = route
 
-  createTab({
+  create({
     componentName,
     icon,
     name,
@@ -96,12 +96,12 @@ watch(
   (): [RouteLocationNormalizedLoaded, boolean] => [router.currentRoute.value, isNavigating.value],
   ([newRoute, isNavigating], [oldRoute]) => {
     const { name, meta } = newRoute
-    const { showTab, multiTab } = meta
+    const { showTab, enableMultiTab } = meta
     const findTab = tabs.value.find((item) => item.name === name)
 
     if (!isNavigating && newRoute.fullPath !== oldRoute?.fullPath) {
-      if (showTab && (!findTab || multiTab)) {
-        doCreateTab(newRoute)
+      if (showTab && (!findTab || enableMultiTab)) {
+        createTab(newRoute)
       } else if (!isEmpty(findTab)) {
         setActive(findTab.key)
       } else {
@@ -116,12 +116,12 @@ onMounted(() => {
   const { name, meta } = currentRoute
 
   const findTab = tabs.value.find((item) => item.name === name)
-  const { showTab, multiTab } = meta
+  const { showTab, enableMultiTab: multiTab } = meta
 
   if (name === 'layout' && tabActiveKey.value) {
     router.replace(tabActiveKey.value)
   } else if (showTab && (!findTab || multiTab)) {
-    doCreateTab(currentRoute)
+    createTab(currentRoute)
   } else if (!isEmpty(findTab)) {
     setActive(findTab.key)
   }
@@ -140,7 +140,7 @@ onMounted(() => {
     v-slot="{ Component, route }"
   >
     <Transition :name="transitionName">
-      <KeepAlive :include="tabsKeepAlive">
+      <KeepAlive :include="keepAliveComponents">
         <component
           :is="Component"
           v-if="isMounted && !tabsInject?.shouldRefresh.value"

src/main.ts

@@ -14,9 +14,9 @@ async function setupApp() {
 
   await router.isReady()
 
-  if (window.eltLoader) {
-    window.eltLoader.remove()
-    window.eltLoader = null
+  if (window.loaderElement) {
+    window.loaderElement.remove()
+    window.loaderElement = null
   }
 
   app.mount('#app')

src/router/guard.ts

@@ -42,17 +42,23 @@ export function setupRouterGuard(router: Router) {
     }
 
     if (userStore.token && !router.hasRoute('layout')) {
-      await userStore.resolveUserMenu()
-
-      router.addRoute({
-        path: '/',
-        name: 'layout',
-        component: Layout,
-        redirect: '/dashboard',
-        children: userStore.userRoute,
-      })
-
-      next(to.fullPath)
+      try {
+        await userStore.resolveMenuList()
+
+        router.addRoute({
+          path: '/',
+          name: 'layout',
+          component: Layout,
+          redirect: '/dashboard',
+          children: userStore.routeList,
+        })
+
+        next(to.fullPath)
+      } catch (error) {
+        console.error('Error resolving user menu or adding route:', error)
+        userStore.cleanup()
+        next()
+      }
 
       return false
     }

src/router/helper.ts

@@ -9,7 +9,7 @@ type NoIndex<T> = {
   [K in keyof T as string extends K ? never : K]: T[K]
 }
 
-type ReplaceKeys<T, R extends Partial<Record<keyof T, any>>> = T extends any
+type ReplaceKeys<T, R extends Partial<Record<keyof T, unknown>>> = T extends unknown
   ? {
       [K in keyof T]: K extends keyof R ? R[K] : T[K]
     } & Omit<R, keyof T>

src/router/record.ts

@@ -206,7 +206,7 @@ export const routeRecordRaw: MergeMenuMixedOptions[] = [
     component: 'about/index',
     meta: {
       showTab: true,
-      multiTab: true,
+      enableMultiTab: true,
     },
   },
 ]

src/stores/tabs.ts

@@ -27,9 +27,9 @@ export const useTabsStore = defineStore('tabsStore', () => {
 
   const tabActiveKey = useStorage<string>('tabActiveKey', '')
 
-  const tabsKeepAlive = useStorage<string[]>('tabsKeepAlive', [])
+  const keepAliveTabs = useStorage<string[]>('keepAliveTabs', [])
 
-  const removeTabs = (keys: string[]) => {
+  function removeTabs(keys: string[]) {
     const keysSet = new Set(keys)
     const activeIndex = tabs.value.findIndex((tab) => tab.key === tabActiveKey.value)
 
@@ -64,58 +64,58 @@ export const useTabsStore = defineStore('tabsStore', () => {
     return tabs.value.findIndex((item) => item.key === key)
   }
 
-  function getUnlockedTabKeysBefore(key: string) {
-    const unlockedTabKeys: string[] = []
+  function getUnlockedKeysBefore(key: string) {
+    const unlockedKeys: string[] = []
 
     for (const tab of tabs.value) {
       if (tab.key === key) break
 
       if (!tab.locked && !tab.pinned) {
-        unlockedTabKeys.push(tab.key)
+        unlockedKeys.push(tab.key)
       }
     }
-    return unlockedTabKeys
+    return unlockedKeys
   }
 
-  function getUnlockedTabKeysAfter(key: string) {
-    const unlockedTabKeys: string[] = []
+  function getUnlockedKeysAfter(key: string) {
+    const unlockedKeys: string[] = []
 
     for (let i = tabs.value.length - 1; i >= 0; i--) {
       if (tabs.value[i].key === key) break
 
       if (!tabs.value[i].locked && !tabs.value[i].pinned) {
-        unlockedTabKeys.push(tabs.value[i].key)
+        unlockedKeys.push(tabs.value[i].key)
       }
     }
 
-    return unlockedTabKeys
+    return unlockedKeys
   }
 
-  function getUnlockedTabKeysExcept(key: string) {
-    const unlockedTabKeys: string[] = []
+  function getUnlockedKeysExcept(key: string) {
+    const unlockedKeys: string[] = []
 
     for (const tab of tabs.value) {
       if (tab.key !== key && !tab.locked && !tab.pinned) {
-        unlockedTabKeys.push(tab.key)
+        unlockedKeys.push(tab.key)
       }
     }
 
-    return unlockedTabKeys
+    return unlockedKeys
   }
 
-  function getUnlockedTabKeys() {
-    const mutableTabKeys: string[] = []
+  function getUnlockedKeys() {
+    const unlockedKeys: string[] = []
 
     for (const tab of tabs.value) {
       if (!tab.locked && !tab.pinned) {
-        mutableTabKeys.push(tab.key)
+        unlockedKeys.push(tab.key)
       }
     }
 
-    return mutableTabKeys
+    return unlockedKeys
   }
 
-  function setTabs(value: Tab[]) {
+  function update(value: Tab[]) {
     tabs.value = value
   }
 
@@ -123,7 +123,7 @@ export const useTabsStore = defineStore('tabsStore', () => {
     tabActiveKey.value = key
   }
 
-  function createTab(tab: Tab) {
+  function create(tab: Tab) {
     const index = tabs.value.findIndex((item) => item.key === tab.key)
 
     if (index === -1) {
@@ -133,37 +133,37 @@ export const useTabsStore = defineStore('tabsStore', () => {
     setActive(tab.key)
   }
 
-  const removeTab = (key: string) => {
+  const remove = (key: string) => {
     removeTabs([key])
   }
 
-  const removeTabsBefore = (key: string) => {
-    removeTabs(getUnlockedTabKeysBefore(key))
+  const removeBefore = (key: string) => {
+    removeTabs(getUnlockedKeysBefore(key))
   }
 
-  const removeTabsAfter = (key: string) => {
-    removeTabs(getUnlockedTabKeysAfter(key))
+  const removeAfter = (key: string) => {
+    removeTabs(getUnlockedKeysAfter(key))
   }
 
-  const removeTabsExcept = (key: string) => {
-    removeTabs(getUnlockedTabKeysExcept(key))
+  const removeExcept = (key: string) => {
+    removeTabs(getUnlockedKeysExcept(key))
   }
 
-  const removeAllTabs = () => {
-    removeTabs(getUnlockedTabKeys())
+  const removeAll = () => {
+    removeTabs(getUnlockedKeys())
   }
 
-  const hasKeepAlive = (componentName?: string) => {
-    const index = tabsKeepAlive.value.findIndex((item) => item === componentName)
+  const hasKeepAliveTab = (componentName?: string) => {
+    const index = keepAliveTabs.value.findIndex((item) => item === componentName)
     return index !== -1 ? true : false
   }
 
-  const setKeepAlive = (componentName: string) => {
-    const index = tabsKeepAlive.value.findIndex((item) => item === componentName)
+  const setKeepAliveTab = (componentName: string) => {
+    const index = keepAliveTabs.value.findIndex((item) => item === componentName)
     if (index !== -1) {
-      tabsKeepAlive.value.splice(index, 1)
+      keepAliveTabs.value.splice(index, 1)
     } else {
-      tabsKeepAlive.value.push(componentName)
+      keepAliveTabs.value.push(componentName)
     }
   }
 
@@ -187,24 +187,24 @@ export const useTabsStore = defineStore('tabsStore', () => {
   return {
     tabs,
     tabActiveKey,
-    tabsKeepAlive,
-    createTab,
-    getUnlockedTabKeys,
-    getUnlockedTabKeysBefore,
-    getUnlockedTabKeysExcept,
-    getUnlockedTabKeysAfter,
-    hasKeepAlive,
+    keepAliveTabs,
+    getUnlockedKeysBefore,
+    getUnlockedKeysAfter,
+    getUnlockedKeys,
+    getUnlockedKeysExcept,
+    create,
+    remove,
+    update,
+    removeBefore,
+    removeAfter,
+    removeExcept,
+    removeAll,
     isLocked,
     isPinned,
-    removeAllTabs,
-    removeTabsBefore,
-    removeTabsExcept,
-    removeTabsAfter,
-    removeTab,
     setActive,
-    setKeepAlive,
+    setKeepAliveTab,
     setLocked,
-    setTabs,
+    hasKeepAliveTab,
   }
 })
 

src/stores/user.ts

@@ -29,15 +29,15 @@ export const useUserStore = defineStore('userStore', () => {
 
   const token = useStorage<string | null>('token', '')
 
-  const userMenu = ref<MenuProps['options']>([])
+  const menuList = ref<MenuProps['options']>([])
 
-  const userRoute = ref<RouteRecordRaw[]>([])
+  const routeList = ref<RouteRecordRaw[]>([])
 
   const setToken = (value: string | null) => {
     token.value = value
   }
 
-  async function resolveUserMenu() {
+  async function resolveMenuList() {
     const res = await new Promise<MergeMenuMixedOptions[]>((resolve) => {
       if (token.value?.includes('admin')) {
         resolve(routeRecordRaw)
@@ -50,8 +50,8 @@ export const useUserStore = defineStore('userStore', () => {
       }
     })
 
-    userMenu.value = resolveMenu(res) || []
-    userRoute.value = resolveRoute(res) || []
+    menuList.value = resolveMenu(res) || []
+    routeList.value = resolveRoute(res) || []
   }
 
   function cleanup(redirectPath?: string) {
@@ -66,17 +66,17 @@ export const useUserStore = defineStore('userStore', () => {
       router.removeRoute('layout')
     }
 
-    userMenu.value = []
+    menuList.value = []
 
-    userRoute.value = []
+    routeList.value = []
   }
 
   return {
     user,
     token,
-    userMenu,
-    userRoute,
-    resolveUserMenu,
+    menuList,
+    routeList,
+    resolveMenuList,
     setToken,
     cleanup,
   }

src/typings/vue-router.d.ts

@@ -7,6 +7,6 @@ declare module 'vue-router' {
     label?: string
     icon?: string
     showTab?: boolean
-    multiTab?: boolean
+    enableMultiTab?: boolean
   }
 }

src/typings/window.d.ts

@@ -4,7 +4,7 @@ declare global {
       canGoBack: boolean
       canGoForward: boolean
     }
-    eltLoader?: HTMLElement | null
+    loaderElement?: HTMLElement | null
   }
 }
 

src/views/dashboard/index.vue

@@ -38,7 +38,7 @@ let highestRevenueChartInstance: ECharts | null = null
 let highestRevenueChartResizeHandler: (() => void) | null = null
 
 const CHART_CONFIG = {
-  MONTHS: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+  MONTHS: Array.from({ length: 12 }, (_, i) => `${i + 1}月`),
 }
 
 const getBusinessLinesConfig = () => [

src/views/data-show/data-table/index.vue

@@ -141,14 +141,14 @@ const ShowOrEdit = defineComponent({
     const inputRef = ref<InstanceType<typeof NInput> | null>(null)
     const inputValue = ref(props.value)
 
-    function handleOnClick() {
+    function onClick() {
       isEdit.value = true
       nextTick(() => {
         inputRef.value?.focus()
       })
     }
 
-    function handleChange() {
+    function onBlur() {
       if (!inputValue.value.trim()) {
         message.error('为空就再也编辑不了了')
         inputValue.value = props.value
@@ -158,7 +158,7 @@ const ShowOrEdit = defineComponent({
     }
 
     return () => (
-      <div onClick={handleOnClick}>
+      <div onClick={onClick}>
         {isEdit.value ? (
           <NInput
             ref={inputRef}
@@ -167,7 +167,7 @@ const ShowOrEdit = defineComponent({
             onUpdateValue={(value) => {
               inputValue.value = value
             }}
-            onBlur={handleChange}
+            onBlur={onBlur}
           />
         ) : (
           <span>{props.value}</span>

src/views/feedback/index.vue

@@ -22,12 +22,19 @@ const { getModalModifier } = useComponentModifier()
 
 const notification = useNotification()
 
-const handleChangeMessageStateType = () => {
+const showModal = reactive({
+  modal1: false,
+  modal2: false,
+  modal3: false,
+  modal4: false,
+})
+
+const changeMessageState = () => {
   let counter = 5
 
-  let timer: any = null
+  let timer: ReturnType<typeof setInterval> | null = null
 
-  const messageInstance = message.create('5秒后 根据状态类更换换图标', {
+  const messageInstance = message.create('5秒后 根据状态更换图标', {
     type: 'info',
     duration: 0,
     closable: true,
@@ -36,7 +43,9 @@ const handleChangeMessageStateType = () => {
   timer = setInterval(() => {
     counter -= 1
     if (counter <= 0) {
-      clearInterval(timer)
+      if (timer) {
+        clearInterval(timer)
+      }
       messageInstance.type = 'error'
       messageInstance.content = '切换图标了'
       return
@@ -45,14 +54,7 @@ const handleChangeMessageStateType = () => {
   }, 1000)
 }
 
-const showModal = reactive({
-  modal1: false,
-  modal2: false,
-  modal3: false,
-  modal4: false,
-})
-
-const handleCreateDialogApi = (type: ModalProps['type'] = 'success') => {
+const createDialogApi = (type: ModalProps['type'] = 'success') => {
   const title = {
     success: '成功的Dialog',
     warning: '警告的Dialog',
@@ -134,7 +136,7 @@ const handleCreateDialogApi = (type: ModalProps['type'] = 'success') => {
         >
           加载Message
         </NButton>
-        <NButton @click="handleChangeMessageStateType"> 根据状态切换图标 </NButton>
+        <NButton @click="changeMessageState"> 根据状态切换图标 </NButton>
         <NCard
           size="small"
           title="Setup 外使用"
@@ -232,7 +234,7 @@ const handleCreateDialogApi = (type: ModalProps['type'] = 'success') => {
               type="success"
               size="small"
               secondary
-              @click="handleCreateDialogApi('success')"
+              @click="createDialogApi('success')"
             >
               成功Dialog
             </NButton>
@@ -240,7 +242,7 @@ const handleCreateDialogApi = (type: ModalProps['type'] = 'success') => {
               type="warning"
               size="small"
               tertiary
-              @click="handleCreateDialogApi('warning')"
+              @click="createDialogApi('warning')"
             >
               警告Dialog
             </NButton>
@@ -248,7 +250,7 @@ const handleCreateDialogApi = (type: ModalProps['type'] = 'success') => {
               type="error"
               size="small"
               dashed
-              @click="handleCreateDialogApi('error')"
+              @click="createDialogApi('error')"
             >
               失败Dialog
             </NButton>
@@ -256,7 +258,7 @@ const handleCreateDialogApi = (type: ModalProps['type'] = 'success') => {
               type="info"
               size="small"
               ghost
-              @click="handleCreateDialogApi('info')"
+              @click="createDialogApi('info')"
             >
               信息Dialog
             </NButton>

src/views/sign-in/index.vue

@@ -43,14 +43,14 @@ const textureStyle = computed(() => {
   }
 })
 
-const formRef = useTemplateRef<InstanceType<typeof NForm>>('formRef')
+const signInFormRef = useTemplateRef<InstanceType<typeof NForm>>('signInFormRef')
 
-const signinForm = reactive({
+const signInForm = reactive({
   account: 'admin',
   password: '123456',
 })
 
-const rules: Record<string, FormItemRule[]> = {
+const signInFormRules: Record<string, FormItemRule[]> = {
   account: [{ required: true, message: '请输入账号', trigger: ['input'] }],
   password: [{ required: true, message: '请输入密码', trigger: ['input'] }],
 }
@@ -59,7 +59,7 @@ function toLayout() {
   const { r } = router.currentRoute.value.query
 
   setTimeout(() => {
-    if (signinForm.account.includes('admin')) {
+    if (signInForm.account.includes('admin')) {
       userStore.setToken('admin')
     } else {
       userStore.setToken('user')
@@ -74,7 +74,7 @@ function toLayout() {
 }
 
 const handleSubmitClick = () => {
-  formRef.value?.validate((errors) => {
+  signInFormRef.value?.validate((errors) => {
     if (!errors) {
       loading.value = true
       toLayout()
@@ -144,17 +144,17 @@ onUnmounted(() => {
           </div>
           <div class="mt-12">
             <NForm
-              ref="formRef"
-              :model="signinForm"
+              ref="signInFormRef"
+              :model="signInForm"
               :show-require-mark="false"
-              :rules="rules"
+              :rules="signInFormRules"
             >
               <NFormItem
                 path="account"
                 label="账号"
               >
                 <NInput
-                  v-model:value="signinForm.account"
+                  v-model:value="signInForm.account"
                   placeholder="请输入账号"
                   clearable
                   :input-props="{
@@ -171,7 +171,7 @@ onUnmounted(() => {
                 label="密码"
               >
                 <NInput
-                  v-model:value="signinForm.password"
+                  v-model:value="signInForm.password"
                   placeholder="请输入密码"
                   type="password"
                   clearable