style: format code

src/layout/aside/component/Menu.vue

@@ -9,7 +9,7 @@ import { useUserStore } from '@/stores/user'
 
 import type { MenuInst } from 'naive-ui'
 
-const Menu = inject(menuInjectionKey, null)
+const menuInject = inject(menuInjectionKey, null)
 
 const configureStore = useConfigureStore()
 
@@ -35,7 +35,7 @@ watch(
   <NScrollbar>
     <NMenu
       ref="menuRef"
-      :collapsed-width="Menu?.collapse.width"
+      :collapsed-width="menuInject?.collapse.width"
       :collapsed="configureStore.configure.menuCollapsed"
       :collapsed-icon-size="20"
       :value="menuActiveKey"

src/layout/aside/index.vue

@@ -11,12 +11,12 @@ defineOptions({
   name: 'AsideLayout',
 })
 
-const Menu = inject(menuInjectionKey, null)
+const menuInject = inject(menuInjectionKey, null)
 
 const configureStore = useConfigureStore()
 
 const menuCollapseWidth = computed(() =>
-  configureStore.configure.menuCollapsed ? Menu?.collapse.width : Menu?.collapse.maxWidth,
+  configureStore.configure.menuCollapsed ? menuInject?.collapse.width : menuInject?.collapse.maxWidth,
 )
 
 function handleCollapseClick() {

src/layout/component/Tabs.vue

@@ -35,7 +35,7 @@ type ContextMenuActions = {
   lock: () => void
 }
 
-const Tabs = inject(tabsInjectionKey, null)
+const tabsInject = inject(tabsInjectionKey, null)
 
 const scrollbarRef = useTemplateRef<InstanceType<typeof NScrollbar>>('scrollbarRef')
 
@@ -48,19 +48,19 @@ const { tabs, tabActiveKey, tabsKeepAlive } = storeToRefs(tabsStore)
 const {
   isLocked,
   isPinned,
-  getOthers,
-  getLefts,
-  getRights,
-  getAlls,
+  getUnlockedTabKeysExcept,
+  getUnlockedTabKeysBefore,
+  getUnlockedTabKeysAfter,
+  getUnlockedTabKeys,
   hasKeepAlive,
-  addKeepAlive,
+  setKeepAlive,
   setLocked,
   setTabs,
-  remove,
-  removeAlls,
-  removeLefts,
-  removeOthers,
-  removeRights,
+  removeTab,
+  removeAllTabs,
+  removeTabsBefore,
+  removeTabsExcept,
+  removeTabsAfter,
 } = tabsStore
 
 const tabPinnedList = ref<Tab[]>([])
@@ -69,27 +69,27 @@ const tabList = ref<Tab[]>([])
 
 const isMounted = ref(false)
 
-const tabUnderlayTransition = reactive({
+const tabBackgroundTransitionClasses = reactive({
   leaveToClass: '',
   enterFromClass: 'scale-0 opacity-0',
 })
 
-const tabContextmenuOptions = ref<Tab | null>(null)
-
 const isTabDragging = ref(false)
 
 const showTabTooltip = ref(true)
 
 const showTabDropdown = ref(false)
 
+const tabContextMenu = ref<Tab | null>(null)
+
 const tabDropdownOptions = computed<DropdownOption[]>(() => {
-  const currentTab = tabContextmenuOptions.value
+  const currentTab = tabContextMenu.value
 
   if (!currentTab) {
     return []
   }
 
-  const { key, compName } = currentTab
+  const { key, componentName } = currentTab
 
   return [
     {
@@ -102,7 +102,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭',
     },
     {
-      disabled: isEmpty(getOthers(key)),
+      disabled: isEmpty(getUnlockedTabKeysExcept(key)),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrows-out-line-horizontal',
@@ -111,7 +111,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭其他',
     },
     {
-      disabled: isEmpty(getLefts(key)),
+      disabled: isEmpty(getUnlockedTabKeysBefore(key)),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrow-line-left',
@@ -120,7 +120,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭左侧',
     },
     {
-      disabled: isEmpty(getRights(key)),
+      disabled: isEmpty(getUnlockedTabKeysAfter(key)),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrow-line-right',
@@ -129,7 +129,7 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭右侧',
     },
     {
-      disabled: isEmpty(getAlls()),
+      disabled: isEmpty(getUnlockedTabKeys()),
       icon: () =>
         h('span', {
           class: 'iconify ph--arrows-horizontal',
@@ -138,9 +138,9 @@ const tabDropdownOptions = computed<DropdownOption[]>(() => {
       label: '关闭所有',
     },
     {
-      disabled: isEmpty(compName),
+      disabled: isEmpty(componentName),
       icon: () =>
-        hasKeepAlive(compName)
+        hasKeepAlive(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(compName) ? '取消缓存' : '缓存标签页',
+      label: hasKeepAlive(componentName) ? '取消缓存' : '缓存标签页',
     },
     {
       disabled: isPinned(key),
@@ -176,12 +176,12 @@ const handleTabClick = (key: string) => {
 }
 
 const handleTabCloseClick = (key: string) => {
-  remove(key)
+  removeTab(key)
 }
 
 const handleTabContextMenuClick = (e: MouseEvent, tab: Tab) => {
   e.preventDefault()
-  tabContextmenuOptions.value = tab
+  tabContextMenu.value = tab
   showTabDropdown.value = false
   showTabTooltip.value = false
 
@@ -195,7 +195,7 @@ const handleTabContextMenuClick = (e: MouseEvent, tab: Tab) => {
 const onTabDropdownClickOutside = () => {
   showTabDropdown.value = false
   showTabTooltip.value = true
-  tabContextmenuOptions.value = null
+  tabContextMenu.value = null
 }
 
 const onTabDraggableStart = () => {
@@ -233,35 +233,37 @@ const onScrollbarWheeled = (e: WheelEvent) => {
 }
 
 function getTabContextMenuActions(): ContextMenuActions | null {
-  const tabValue = tabContextmenuOptions.value
+  const tabValue = tabContextMenu.value
 
   if (!tabValue) {
     return null
   }
 
+  const { key, componentName } = tabValue
+
   return {
     close: () => {
-      remove(tabValue.key)
+      removeTab(key)
     },
     closeAll: () => {
-      removeAlls()
+      removeAllTabs()
     },
     closeLeft: () => {
-      removeLefts(tabValue.key)
+      removeTabsBefore(key)
     },
     closeOther: () => {
-      removeOthers(tabValue.key)
+      removeTabsExcept(key)
     },
     closeRight: () => {
-      removeRights(tabValue.key)
+      removeTabsAfter(key)
     },
     keepAlive: () => {
-      if (tabValue.compName) {
-        addKeepAlive(tabValue.compName)
+      if (componentName) {
+        setKeepAlive(componentName)
       }
     },
     lock: () => {
-      setLocked(tabValue.key)
+      setLocked(key)
     },
   }
 }
@@ -278,12 +280,12 @@ watch(
   (): [Tab[], string] => [tabs.value, tabActiveKey.value],
   ([newTabs, newActive], [oldTabs, oldActive]) => {
     if (!newActive) {
-      tabUnderlayTransition.leaveToClass = 'scale-0 opacity-0'
+      tabBackgroundTransitionClasses.leaveToClass = 'scale-0 opacity-0'
       return
     }
 
     if (!oldActive) {
-      tabUnderlayTransition.enterFromClass = 'scale-0 opacity-0'
+      tabBackgroundTransitionClasses.enterFromClass = 'scale-0 opacity-0'
       return
     }
 
@@ -291,11 +293,11 @@ watch(
     const newActiveIndex = newTabs.findIndex((item) => item.key === newActive)
 
     if (oldActiveIndex > newActiveIndex && newActiveIndex !== -1) {
-      tabUnderlayTransition.leaveToClass = '-translate-x-full'
-      tabUnderlayTransition.enterFromClass = 'translate-x-full'
+      tabBackgroundTransitionClasses.leaveToClass = '-translate-x-full'
+      tabBackgroundTransitionClasses.enterFromClass = 'translate-x-full'
     } else {
-      tabUnderlayTransition.leaveToClass = 'translate-x-full'
-      tabUnderlayTransition.enterFromClass = '-translate-x-full'
+      tabBackgroundTransitionClasses.leaveToClass = 'translate-x-full'
+      tabBackgroundTransitionClasses.enterFromClass = '-translate-x-full'
     }
   },
 )
@@ -332,8 +334,8 @@ onMounted(() => {
         <Transition
           enter-active-class="transition-[opacity,scale,translate] duration-300 ease-naive-bezier will-change-[opacity,transform,scale]"
           leave-active-class="transition-[opacity,scale,translate] duration-300 ease-naive-bezier will-change-[opacity,transform,scale]"
-          :leave-to-class="tabUnderlayTransition.leaveToClass"
-          :enter-from-class="tabUnderlayTransition.enterFromClass"
+          :leave-to-class="tabBackgroundTransitionClasses.leaveToClass"
+          :enter-from-class="tabBackgroundTransitionClasses.enterFromClass"
           @after-enter="scrollToActiveTab"
         >
           <div
@@ -392,8 +394,8 @@ onMounted(() => {
             <Transition
               enter-active-class="transition-[opacity,scale,translate] duration-300 ease-naive-bezier will-change-[opacity,transform,scale]"
               leave-active-class="transition-[opacity,scale,translate] duration-300 ease-naive-bezier will-change-[opacity,transform,scale]"
-              :leave-to-class="tabUnderlayTransition.leaveToClass"
-              :enter-from-class="tabUnderlayTransition.enterFromClass"
+              :leave-to-class="tabBackgroundTransitionClasses.leaveToClass"
+              :enter-from-class="tabBackgroundTransitionClasses.enterFromClass"
               @after-enter="scrollToActiveTab"
             >
               <div
@@ -417,7 +419,7 @@ onMounted(() => {
                   :class="[
                     tab.icon,
                     {
-                      'text-primary': tab.compName && tabsKeepAlive.includes(tab.compName),
+                      'text-primary': tab.componentName && tabsKeepAlive.includes(tab.componentName),
                     },
                   ]"
                 />
@@ -453,7 +455,7 @@ onMounted(() => {
     <div class="flex items-center gap-x-2 px-3.5">
       <ButtonAnimation
         title="刷新"
-        @click="Tabs?.doRefresh(true)"
+        @click="tabsInject?.doRefresh(true)"
         animation="rotate"
       >
         <span class="iconify size-5 ph--arrows-clockwise"></span>

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

@@ -9,7 +9,6 @@ import {
   useModal,
   NScrollbar,
 } from 'naive-ui'
-import { storeToRefs } from 'pinia'
 import { h, ref } from 'vue'
 
 import { ButtonAnimation } from '@/components'
@@ -31,8 +30,6 @@ const configureStore = useConfigureStore()
 
 const { color, setColor } = usePersonalization()
 
-const { configure } = storeToRefs(configureStore)
-
 const { modify, reset } = configureStore
 
 const modal = useModal()
@@ -142,9 +139,11 @@ const showNoiseModal = () => {
           <NDivider>布局相关</NDivider>
           <div class="flex flex-col gap-y-1.5">
             <div class="flex items-center justify-between">
-              <span>收起侧边菜单</span>
+              <span>展开侧边菜单</span>
               <NSwitch
-                :value="configure.menuCollapsed"
+                :value="configureStore.configure.menuCollapsed"
+                :checked-value="false"
+                :unchecked-value="true"
                 @update-value="
                   (value) =>
                     modify({
@@ -156,7 +155,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>显示顶部加载条</span>
               <NSwitch
-                :value="configure.showTopLoadingBar"
+                :value="configureStore.configure.showTopLoadingBar"
                 @update-value="
                   (value) =>
                     modify({
@@ -168,7 +167,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>显示Logo</span>
               <NSwitch
-                :value="configure.showLogo"
+                :value="configureStore.configure.showLogo"
                 @update-value="
                   (value) =>
                     modify({
@@ -180,7 +179,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>显示导航按钮</span>
               <NSwitch
-                :value="configure.showNavigation"
+                :value="configureStore.configure.showNavigation"
                 @update-value="
                   (value) =>
                     modify({
@@ -192,7 +191,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>显示面包屑</span>
               <NSwitch
-                :value="configure.showBreadcrumb"
+                :value="configureStore.configure.showBreadcrumb"
                 @update-value="
                   (value) =>
                     modify({
@@ -204,7 +203,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>显示标签页</span>
               <NSwitch
-                :value="configure.showTabs"
+                :value="configureStore.configure.showTabs"
                 @update-value="
                   (value) =>
                     modify({
@@ -216,7 +215,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>常显标签关闭按钮</span>
               <NSwitch
-                :value="configure.showTabClose"
+                :value="configureStore.configure.showTabClose"
                 @update-value="
                   (value) =>
                     modify({
@@ -228,7 +227,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>显示底部</span>
               <NSwitch
-                :value="configure.showFooter"
+                :value="configureStore.configure.showFooter"
                 @update-value="
                   (value) =>
                     modify({
@@ -253,7 +252,7 @@ const showNoiseModal = () => {
               </ButtonAnimation>
             </div>
             <NSwitch
-              :value="configure.showWatermark"
+              :value="configureStore.configure.showWatermark"
               @update-value="
                 (value) =>
                   modify({
@@ -274,7 +273,7 @@ const showNoiseModal = () => {
               </ButtonAnimation>
             </div>
             <NSwitch
-              :value="configure.showNoise"
+              :value="configureStore.configure.showNoise"
               @update-value="
                 (value) =>
                   modify({
@@ -285,13 +284,13 @@ const showNoiseModal = () => {
           </div>
           <div class="flex flex-col gap-y-1.5">
             <div class="flex items-center justify-between">
-              <span>启用路由过渡效果</span>
+              <span>启用导航过渡效果</span>
               <NSwitch
-                :value="configure.enableRouteTransition"
+                :value="configureStore.configure.enableNavigationTransition"
                 @update-value="
                   (value) =>
                     modify({
-                      enableRouteTransition: value,
+                      enableNavigationTransition: value,
                     })
                 "
               />
@@ -299,7 +298,7 @@ const showNoiseModal = () => {
             <div class="flex items-center justify-between">
               <span>文字可选中</span>
               <NSwitch
-                :value="configure.enableTextSelect"
+                :value="configureStore.configure.enableTextSelect"
                 @update-value="
                   (value) =>
                     modify({

src/layout/header/Logo.vue

@@ -6,12 +6,12 @@ import { useConfigureStore } from '@/stores/configure'
 
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
-const Menu = inject(menuInjectionKey, null)
+const menuInject = inject(menuInjectionKey, null)
 
 const configureStore = useConfigureStore()
 
 const collapseWidth = computed(() => {
-  return configureStore.configure.menuCollapsed ? Menu?.collapse.width : Menu?.collapse.maxWidth
+  return configureStore.configure.menuCollapsed ? menuInject?.collapse.width : menuInject?.collapse.maxWidth
 })
 </script>
 <template>

src/layout/header/Navigation.vue

@@ -9,11 +9,11 @@ const navigationState = reactive({
   canGoForward: true,
 })
 
-const stop = watch(
+const stopWatch = watch(
   () => router.currentRoute.value,
   () => {
     if (!window.navigation) {
-      stop()
+      stopWatch()
       return
     }
 

src/layout/index.vue

@@ -28,7 +28,7 @@ const { scrollbarInMainLayout } = useComponentThemeOverrides()
 
 const shouldRefresh = ref(false)
 
-const collapsed = reactive({
+const menuCollapse = reactive({
   width: 64,
   maxWidth: 272,
 })
@@ -38,7 +38,7 @@ const doRefresh: TabsInjection['doRefresh'] = (value) => {
 }
 
 provide(menuInjectionKey, {
-  collapse: collapsed,
+  collapse: menuCollapse,
 })
 
 provide(tabsInjectionKey, {

src/layout/main/index.vue

@@ -16,7 +16,7 @@ defineOptions({
   name: 'MainLayout',
 })
 
-const Tabs = inject(tabsInjectionKey, null)
+const tabsInject = inject(tabsInjectionKey, null)
 
 const tabsStore = useTabsStore()
 
@@ -36,12 +36,12 @@ let oldTabs: Tab[] = []
 const transitionName = ref('')
 
 function createTab(route: RouteLocationNormalizedLoaded) {
-  const { pinned, compName, icon = 'iconify ph--browser', label = '未命名标签' } = route.meta
+  const { pinned, componentName, icon = 'iconify ph--browser', label = '未命名标签' } = route.meta
 
   const { fullPath, name } = route
 
   create({
-    compName,
+    componentName,
     icon,
     name,
     key: fullPath,
@@ -57,7 +57,7 @@ watch(
       router.push(tabActiveKey.value)
     }
 
-    if (!configure.value.enableRouteTransition) return
+    if (!configure.value.enableNavigationTransition) return
 
     if (!configure.value.showTabs) {
       transitionName.value = 'scale'
@@ -81,12 +81,12 @@ watch(
 )
 
 watch(
-  () => Tabs?.shouldRefresh.value,
+  () => tabsInject?.shouldRefresh.value,
   (shouldRefresh) => {
     if (shouldRefresh) {
       transitionName.value = 'shake'
       nextTick(() => {
-        Tabs?.doRefresh(false)
+        tabsInject?.doRefresh(false)
       })
     }
   },
@@ -138,14 +138,14 @@ onMounted(() => {
 </script>
 <template>
   <RouterView
-    v-if="configure.enableRouteTransition"
+    v-if="configure.enableNavigationTransition"
     v-slot="{ Component, route }"
   >
     <Transition :name="transitionName">
       <KeepAlive :include="tabsKeepAlive">
         <component
           :is="Component"
-          v-if="isMounted && !Tabs?.shouldRefresh.value"
+          v-if="isMounted && !tabsInject?.shouldRefresh.value"
           :key="route.path + JSON.stringify(route.query)"
         />
       </KeepAlive>

src/router/record.ts

@@ -7,7 +7,7 @@ export const routeRecordRaw: MergeMenuMixedOption[] = [
     icon: 'iconify-[mage--dashboard-chart]',
     label: '仪表板',
     meta: {
-      compName: 'Dashboard',
+      componentName: 'Dashboard',
       pinned: true,
       showTab: true,
     },
@@ -26,7 +26,7 @@ export const routeRecordRaw: MergeMenuMixedOption[] = [
         icon: 'iconify-[ph--table]',
         label: '数据表格',
         meta: {
-          compName: 'DataTable',
+          componentName: 'DataTable',
           label: '数据表格',
           showTab: true,
         },
@@ -38,7 +38,7 @@ export const routeRecordRaw: MergeMenuMixedOption[] = [
         icon: 'iconify-[ph--article]',
         label: '数据表单',
         meta: {
-          compName: 'DataForm',
+          componentName: 'DataForm',
           label: '数据表单',
           showTab: true,
         },
@@ -171,7 +171,7 @@ export const routeRecordRaw: MergeMenuMixedOption[] = [
     icon: 'iconify-[ph--messenger-logo]',
     label: '反馈组件',
     meta: {
-      compName: 'Feedback',
+      componentName: 'Feedback',
       showTab: true,
     },
     component: 'feedback/index',
@@ -182,7 +182,7 @@ export const routeRecordRaw: MergeMenuMixedOption[] = [
     icon: 'iconify-[pixelarticons--drag-and-drop]',
     label: '拖拽模块',
     meta: {
-      compName: 'Draggable',
+      componentName: 'Draggable',
       showTab: true,
     },
     component: 'draggable/index',
@@ -193,7 +193,7 @@ export const routeRecordRaw: MergeMenuMixedOption[] = [
     icon: 'iconify-[streamline-freehand--server-error-404-not-found]',
     label: '404页面',
     meta: {
-      compName: 'notfoundPage404',
+      componentName: 'notfoundPage404',
     },
     component: 'not-found/404',
   },

src/stores/configure.ts

@@ -16,7 +16,7 @@ export interface ConfigureOptions {
   showWatermark: boolean
   showNoise: boolean
   showTopLoadingBar: boolean
-  enableRouteTransition: boolean
+  enableNavigationTransition: boolean
   enableTextSelect: boolean
   watermarkOptions: Partial<WatermarkProps>
   noiseOpacity: number
@@ -33,7 +33,7 @@ const DEFAULT_CONFIGURE_OPTIONS: ConfigureOptions = {
   showNavigation: true,
   showBreadcrumb: true,
   showTopLoadingBar: true,
-  enableRouteTransition: true,
+  enableNavigationTransition: true,
   enableTextSelect: true,
   watermarkOptions: {
     content: 'Watermark',

src/stores/tabs.ts

@@ -4,7 +4,7 @@ import { acceptHMRUpdate, defineStore } from 'pinia'
 import type { RouteRecordNameGeneric } from 'vue-router'
 
 export interface Tab {
-  compName?: string
+  componentName?: string
   name?: RouteRecordNameGeneric
   icon?: string
   key: string
@@ -16,7 +16,7 @@ export interface Tab {
 export const useTabsStore = defineStore('tabsStore', () => {
   const tabs = useStorage<Tab[]>('tabs', [
     {
-      compName: 'Dashboard',
+      componentName: 'Dashboard',
       icon: 'iconify-[mage--dashboard-chart]',
       key: '/dashboard',
       label: '仪表板',
@@ -29,85 +29,85 @@ export const useTabsStore = defineStore('tabsStore', () => {
   const tabsKeepAlive = useStorage<string[]>('tabsKeepAlive', [])
 
   const removeTabs = (keys: string[]) => {
-    const activeTabKeyIndex = tabs.value.findIndex((item) => item.key === tabActiveKey.value)
+    const keysSet = new Set(keys)
+    const activeIndex = tabs.value.findIndex((tab) => tab.key === tabActiveKey.value)
 
-    if (keys.includes(tabActiveKey.value)) {
-      let newActiveKey = ''
+    let newActiveKey = ''
 
-      for (let i = activeTabKeyIndex + 1; i < tabs.value.length; i++) {
-        if (!keys.includes(tabs.value[i].key)) {
+    if (keysSet.has(tabActiveKey.value)) {
+      for (let i = activeIndex + 1; i < tabs.value.length; i++) {
+        if (!keysSet.has(tabs.value[i].key)) {
           newActiveKey = tabs.value[i].key
           break
         }
       }
 
       if (!newActiveKey) {
-        for (let i = activeTabKeyIndex - 1; i >= 0; i--) {
-          if (!keys.includes(tabs.value[i].key)) {
+        for (let i = activeIndex - 1; i >= 0; i--) {
+          if (!keysSet.has(tabs.value[i].key)) {
             newActiveKey = tabs.value[i].key
             break
           }
         }
       }
 
-      setActive(newActiveKey)
+      if (newActiveKey) {
+        setActive(newActiveKey)
+      }
     }
 
-    tabs.value = tabs.value.filter((item) => !keys.includes(item.key))
+    tabs.value = tabs.value.filter((tab) => !keysSet.has(tab.key))
   }
 
   function findTabIndex(key: string) {
     return tabs.value.findIndex((item) => item.key === key)
   }
 
-  function getLefts(key: string) {
-    const mutableTabKeys: string[] = []
+  function getUnlockedTabKeysBefore(key: string) {
+    const unlockedTabKeys: string[] = []
 
-    for (let i = 0; i < tabs.value.length; i++) {
-      if (tabs.value[i].key === key) break
+    for (const tab of tabs.value) {
+      if (tab.key === key) break
 
-      if (!tabs.value[i].locked && !tabs.value[i].pinned) {
-        mutableTabKeys.push(tabs.value[i].key)
+      if (!tab.locked && !tab.pinned) {
+        unlockedTabKeys.push(tab.key)
       }
     }
-
-    return mutableTabKeys
+    return unlockedTabKeys
   }
 
-  function getRights(key: string) {
-    const mutableTabKeys: string[] = []
+  function getUnlockedTabKeysAfter(key: string) {
+    const unlockedTabKeys: 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) {
-        mutableTabKeys.push(tabs.value[i].key)
+        unlockedTabKeys.push(tabs.value[i].key)
       }
     }
 
-    return mutableTabKeys
+    return unlockedTabKeys
   }
 
-  function getOthers(key: string) {
-    const mutableTabKeys: string[] = []
+  function getUnlockedTabKeysExcept(key: string) {
+    const unlockedTabKeys: string[] = []
 
-    for (let i = 0; i < tabs.value.length; i++) {
-      if (tabs.value[i].key !== key) {
-        if (!tabs.value[i].locked && !tabs.value[i].pinned) {
-          mutableTabKeys.push(tabs.value[i].key)
-        }
+    for (const tab of tabs.value) {
+      if (tab.key !== key && !tab.locked && !tab.pinned) {
+        unlockedTabKeys.push(tab.key)
       }
     }
 
-    return mutableTabKeys
+    return unlockedTabKeys
   }
 
-  function getAlls() {
+  function getUnlockedTabKeys() {
     const mutableTabKeys: string[] = []
 
-    for (let i = 0; i < tabs.value.length; i++) {
-      if (!tabs.value[i].locked && !tabs.value[i].pinned) {
-        mutableTabKeys.push(tabs.value[i].key)
+    for (const tab of tabs.value) {
+      if (!tab.locked && !tab.pinned) {
+        mutableTabKeys.push(tab.key)
       }
     }
 
@@ -132,37 +132,37 @@ export const useTabsStore = defineStore('tabsStore', () => {
     setActive(tab.key)
   }
 
-  const remove = (key: string) => {
+  const removeTab = (key: string) => {
     removeTabs([key])
   }
 
-  const removeLefts = (key: string) => {
-    removeTabs(getLefts(key))
+  const removeTabsBefore = (key: string) => {
+    removeTabs(getUnlockedTabKeysBefore(key))
   }
 
-  const removeRights = (key: string) => {
-    removeTabs(getRights(key))
+  const removeTabsAfter = (key: string) => {
+    removeTabs(getUnlockedTabKeysAfter(key))
   }
 
-  const removeOthers = (key: string) => {
-    removeTabs(getOthers(key))
+  const removeTabsExcept = (key: string) => {
+    removeTabs(getUnlockedTabKeysExcept(key))
   }
 
-  const removeAlls = () => {
-    removeTabs(getAlls())
+  const removeAllTabs = () => {
+    removeTabs(getUnlockedTabKeys())
   }
 
-  const hasKeepAlive = (compName?: string) => {
-    const index = tabsKeepAlive.value.findIndex((item) => item === compName)
+  const hasKeepAlive = (componentName?: string) => {
+    const index = tabsKeepAlive.value.findIndex((item) => item === componentName)
     return index !== -1 ? true : false
   }
 
-  const addKeepAlive = (compName: string) => {
-    const index = tabsKeepAlive.value.findIndex((item) => item === compName)
+  const setKeepAlive = (componentName: string) => {
+    const index = tabsKeepAlive.value.findIndex((item) => item === componentName)
     if (index !== -1) {
       tabsKeepAlive.value.splice(index, 1)
     } else {
-      tabsKeepAlive.value.push(compName)
+      tabsKeepAlive.value.push(componentName)
     }
   }
 
@@ -188,20 +188,20 @@ export const useTabsStore = defineStore('tabsStore', () => {
     tabActiveKey,
     tabsKeepAlive,
     create,
-    getAlls,
-    getLefts,
-    getOthers,
-    getRights,
+    getUnlockedTabKeys,
+    getUnlockedTabKeysBefore,
+    getUnlockedTabKeysExcept,
+    getUnlockedTabKeysAfter,
     hasKeepAlive,
     isLocked,
     isPinned,
-    removeAlls,
-    removeLefts,
-    removeOthers,
-    removeRights,
-    remove,
+    removeAllTabs,
+    removeTabsBefore,
+    removeTabsExcept,
+    removeTabsAfter,
+    removeTab,
     setActive,
-    addKeepAlive,
+    setKeepAlive,
     setLocked,
     setTabs,
   }

src/typings/vue-router.d.ts

@@ -2,7 +2,7 @@ import 'vue-router'
 
 declare module 'vue-router' {
   interface RouteMeta {
-    compName?: string
+    componentName?: string
     pinned?: boolean
     label?: string
     icon?: string