refactor(projects): useStore variable name

src/App.vue

@@ -6,11 +6,11 @@ defineOptions({
   name: 'App'
 });
 
-const theme = useThemeStore();
+const themeStore = useThemeStore();
 </script>
 
 <template>
-  <ConfigProvider :theme="theme.antdTheme">
+  <ConfigProvider :theme="themeStore.antdTheme">
     <AppProvider>
       <RouterView />
     </AppProvider>

src/layouts/base-layout/index.vue

@@ -12,15 +12,15 @@ defineOptions({
   name: 'BaseLayout'
 });
 
-const app = useAppStore();
+const appStore = useAppStore();
 </script>
 
 <template>
   <AdminLayout
-    :is-mobile="app.isMobile"
-    :sider-collapse="app.siderCollapse"
-    :full-content="app.fullContent"
-    @click-mobile-sider-mask="app.setSiderCollapse(true)"
+    :is-mobile="appStore.isMobile"
+    :sider-collapse="appStore.siderCollapse"
+    :full-content="appStore.fullContent"
+    @click-mobile-sider-mask="appStore.setSiderCollapse(true)"
   >
     <template #header>
       <GlobalHeader />

src/layouts/modules/global-breadcrumb/index.vue

@@ -7,7 +7,7 @@ defineOptions({
   name: 'GlobalBreadcrumb'
 });
 
-const route = useRouteStore();
+const routeStore = useRouteStore();
 const { routerPushByKey } = useRouterPush();
 
 function handleClickMenu(key: RouteKey) {
@@ -17,7 +17,7 @@ function handleClickMenu(key: RouteKey) {
 
 <template>
   <ABreadcrumb>
-    <ABreadcrumbItem v-for="item in route.breadcrumbs" :key="item.key">
+    <ABreadcrumbItem v-for="item in routeStore.breadcrumbs" :key="item.key">
       <div class="i-flex-y-center align-middle">
         <component :is="item.icon" class="mr-4px text-icon" />
         {{ item.label }}

src/layouts/modules/global-content/index.vue

@@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
   showPadding: true
 });
 
-const app = useAppStore();
+const appStore = useAppStore();
 const routeStore = useRouteStore();
 </script>
 
@@ -31,7 +31,7 @@ const routeStore = useRouteStore();
       <KeepAlive :include="routeStore.cacheRoutes">
         <component
           :is="Component"
-          v-if="app.reloadFlag"
+          v-if="appStore.reloadFlag"
           :key="route.path"
           :class="{ 'p-16px': showPadding }"
           class="flex-grow bg-layout transition-300"

src/layouts/modules/global-header/components/theme-button.vue

@@ -6,15 +6,15 @@ defineOptions({
   name: 'ThemeButton'
 });
 
-const app = useAppStore();
+const appStore = useAppStore();
 </script>
 
 <template>
   <ButtonIcon
     icon="majesticons:color-swatch-line"
     :tooltip-content="$t('icon.themeConfig')"
     trigger-parent
-    @click="app.openThemeDrawer"
+    @click="appStore.openThemeDrawer"
   />
 </template>
 

src/layouts/modules/global-header/components/user-avatar.vue

@@ -8,7 +8,7 @@ defineOptions({
   name: 'UserAvatar'
 });
 
-const auth = useAuthStore();
+const authStore = useAuthStore();
 const { routerPushByKey, toLogin } = useRouterPush();
 
 function loginOrRegister() {
@@ -22,18 +22,18 @@ function logout() {
     okText: $t('common.confirm'),
     cancelText: $t('common.cancel'),
     onOk: () => {
-      auth.resetStore();
+      authStore.resetStore();
     }
   });
 }
 </script>
 
 <template>
-  <AButton v-if="!auth.isLogin" @click="loginOrRegister">{{ $t('page.login.common.loginOrRegister') }}</AButton>
+  <AButton v-if="!authStore.isLogin" @click="loginOrRegister">{{ $t('page.login.common.loginOrRegister') }}</AButton>
   <ADropdown v-else placement="bottomRight" trigger="click">
     <ButtonIcon>
       <SvgIcon icon="ph:user-circle" class="text-icon-large" />
-      <span class="text-16px font-medium">{{ auth.userInfo.userName }}</span>
+      <span class="text-16px font-medium">{{ authStore.userInfo.userName }}</span>
     </ButtonIcon>
     <template #overlay>
       <AMenu>

src/layouts/modules/global-header/index.vue

@@ -6,7 +6,7 @@ import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
 
-const app = useAppStore();
+const appStore = useAppStore();
 const themeStore = useThemeStore();
 const { isFullscreen, toggle } = useFullscreen();
 
@@ -18,12 +18,12 @@ defineOptions({
 <template>
   <DarkModeContainer class="flex-y-center h-full shadow-header">
     <div class="flex-1-hidden flex-y-center h-full">
-      <MenuToggler :collapsed="app.siderCollapse" @click="app.toggleSiderCollapse" />
+      <MenuToggler :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
       <GlobalBreadcrumb />
     </div>
     <div class="flex-y-center justify-end h-full">
       <FullScreen :full="isFullscreen" @click="toggle" />
-      <LangSwitch :lang="app.locale" :lang-options="app.localeOptions" @change-lang="app.changeLocale" />
+      <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
       <ColorSchemaSwitch
         :color-schema="themeStore.colorScheme"
         :is-dark="themeStore.darkMode"

src/layouts/modules/global-menu/vertical-menu.vue

@@ -12,7 +12,7 @@ defineOptions({
 });
 
 const route = useRoute();
-const app = useAppStore();
+const appStore = useAppStore();
 const routeStore = useRouteStore();
 const { routerPushByKey } = useRouterPush();
 
@@ -26,7 +26,7 @@ const selectedKeys = computed(() => {
 });
 
 const openKeys = computed(() => {
-  if (app.siderCollapse) return [];
+  if (appStore.siderCollapse) return [];
 
   const [selectedKey] = selectedKeys.value;
 
@@ -50,7 +50,7 @@ function handleClickMenu(menuInfo: MenuInfo) {
         :items="routeStore.menus"
         :selected-keys="selectedKeys"
         :open-keys="openKeys"
-        :inline-collapsed="app.siderCollapse"
+        :inline-collapsed="appStore.siderCollapse"
         class="menu w-full"
         @click="handleClickMenu"
       />

src/layouts/modules/global-sider/index.vue

@@ -7,12 +7,12 @@ defineOptions({
   name: 'GlobalSider'
 });
 
-const app = useAppStore();
+const appStore = useAppStore();
 </script>
 
 <template>
   <DarkModeContainer class="flex-vertical-stretch wh-full shadow-sider">
-    <GlobalLogo :show-title="!app.siderCollapse" class="h-48px" />
+    <GlobalLogo :show-title="!appStore.siderCollapse" class="h-48px" />
     <VerticalMenu />
   </DarkModeContainer>
 </template>

src/layouts/modules/global-tab/context-menu.vue

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabledKeys: () => []
 });
 
-const tab = useTabStore();
+const { removeTab, clearTabs, clearLeftTabs, clearRightTabs } = useTabStore();
 
 interface DropdownOption {
   key: App.Global.DropdownKey;
@@ -75,19 +75,19 @@ const options = computed(() => {
 
 const dropdownAction: Record<App.Global.DropdownKey, () => void> = {
   closeCurrent() {
-    tab.removeTab(props.tabId);
+    removeTab(props.tabId);
   },
   closeOther() {
-    tab.clearTabs([props.tabId]);
+    clearTabs([props.tabId]);
   },
   closeLeft() {
-    tab.clearLeftTabs(props.tabId);
+    clearLeftTabs(props.tabId);
   },
   closeRight() {
-    tab.clearRightTabs(props.tabId);
+    clearRightTabs(props.tabId);
   },
   closeAll() {
-    tab.clearTabs();
+    clearTabs();
   }
 };
 </script>

src/layouts/modules/global-tab/index.vue

@@ -15,8 +15,8 @@ defineOptions({
 });
 
 const route = useRoute();
-const app = useAppStore();
-const theme = useThemeStore();
+const appStore = useAppStore();
+const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const tabStore = useTabStore();
 
@@ -87,7 +87,7 @@ async function handleCloseTab(tab: App.Global.Tab) {
 }
 
 async function refresh() {
-  app.reloadPage(500);
+  appStore.reloadPage(500);
 }
 
 function init() {
@@ -115,7 +115,7 @@ init();
 <template>
   <DarkModeContainer class="flex-y-center wh-full px-16px shadow-tab">
     <div ref="bsWrapper" class="flex-1-hidden h-full">
-      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: app.isMobile }">
+      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }">
         <div ref="tabRef" class="flex h-full pr-18px" :class="[isChromeMode ? 'items-end' : 'items-center gap-12px']">
           <ContextMenu
             v-for="tab in tabStore.tabs"
@@ -125,9 +125,9 @@ init();
           >
             <PageTab
               :[TAB_DATA_ID]="tab.id"
-              :dark-mode="theme.darkMode"
+              :dark-mode="themeStore.darkMode"
               :active="tab.id === tabStore.activeTabId"
-              :active-color="theme.themeColor"
+              :active-color="themeStore.themeColor"
               :closable="!tabStore.isTabRetain(tab.id)"
               @click="tabStore.switchRouteByTab(tab)"
               @close="handleCloseTab(tab)"
@@ -145,8 +145,8 @@ init();
         </div>
       </BetterScroll>
     </div>
-    <ReloadButton :loading="!app.reloadFlag" @click="refresh" />
-    <FullScreen :full="app.fullContent" @click="app.toggleFullContent" />
+    <ReloadButton :loading="!appStore.reloadFlag" @click="refresh" />
+    <FullScreen :full="appStore.fullContent" @click="appStore.toggleFullContent" />
   </DarkModeContainer>
 </template>
 

src/layouts/modules/theme-drawer/index.vue

@@ -6,18 +6,18 @@ defineOptions({
   name: 'ThemeDrawer'
 });
 
-const app = useAppStore();
+const appStore = useAppStore();
 </script>
 
 <template>
   <ADrawer
-    :open="app.themeDrawerVisible"
+    :open="appStore.themeDrawerVisible"
     :title="$t('themeDrawer.title')"
     :closable="false"
-    @close="app.closeThemeDrawer"
+    @close="appStore.closeThemeDrawer"
   >
     <template #extra>
-      <AButton @click="app.closeThemeDrawer">{{ $t('common.cancel') }}</AButton>
+      <AButton @click="appStore.closeThemeDrawer">{{ $t('common.cancel') }}</AButton>
     </template>
   </ADrawer>
 </template>

src/router/guard/permission.ts

@@ -16,7 +16,7 @@ export function createPermissionGuard(router: Router) {
       next({ path: from.fullPath, replace: true, query: from.query, hash: to.hash });
     }
 
-    const auth = useAuthStore();
+    const authStore = useAuthStore();
 
     const isLogin = Boolean(localStg.get('token'));
     const needLogin = !to.meta.constant;
@@ -28,8 +28,8 @@ export function createPermissionGuard(router: Router) {
     const SUPER_ADMIN = 'R_SUPER';
     const hasPermission =
       !routeRoles.length ||
-      auth.userInfo.roles.includes(SUPER_ADMIN) ||
-      auth.userInfo.roles.some(role => routeRoles.includes(role));
+      authStore.userInfo.roles.includes(SUPER_ADMIN) ||
+      authStore.userInfo.roles.some(role => routeRoles.includes(role));
 
     const strategicPatterns: Common.StrategicPattern[] = [
       // 1. if it is login route when logged in, change to the root page

src/store/modules/auth/index.ts

@@ -27,11 +27,11 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
    * reset auth store
    */
   async function resetStore() {
-    const auth = useAuthStore();
+    const authStore = useAuthStore();
 
     clearAuthStorage();
 
-    auth.$reset();
+    authStore.$reset();
 
     if (!route.value.meta.constant) {
       await toLogin();

src/store/modules/route/index.ts

@@ -22,9 +22,9 @@ import { useAuthStore } from '../auth';
 import { useTabStore } from '../tab';
 
 export const useRouteStore = defineStore(SetupStoreId.Route, () => {
-  const app = useAppStore();
-  const auth = useAuthStore();
-  const tab = useTabStore();
+  const appStore = useAppStore();
+  const authStore = useAuthStore();
+  const tabStore = useTabStore();
   const scope = effectScope();
   const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
 
@@ -109,7 +109,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   async function reCacheRoutesByKey(routeKey: RouteKey) {
     removeCacheRoutes(routeKey);
 
-    await app.reloadPage();
+    await appStore.reloadPage();
 
     addCacheRoutes(routeKey);
   }
@@ -148,14 +148,14 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
       await initDynamicAuthRoute();
     }
 
-    tab.initHomeTab(router);
+    tabStore.initHomeTab(router);
   }
 
   /**
    * init static auth route
    */
   async function initStaticAuthRoute() {
-    const filteredAuthRoutes = filterAuthRoutesByRoles(authRoutes, auth.userInfo.roles);
+    const filteredAuthRoutes = filterAuthRoutesByRoles(authRoutes, authStore.userInfo.roles);
 
     handleAuthRoutes(filteredAuthRoutes);
 
@@ -253,7 +253,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   scope.run(() => {
     // update menus when locale changed
     watch(
-      () => app.locale,
+      () => appStore.locale,
       () => {
         refreshLocaleOfGlobalMenus();
       }

src/store/modules/tab/index.ts

@@ -17,7 +17,7 @@ import { useRouterPush } from '@/hooks/common/router';
 import { useAppStore } from '../app';
 
 export const useTabStore = defineStore(SetupStoreId.Tab, () => {
-  const app = useAppStore();
+  const appStore = useAppStore();
   const scope = effectScope();
   const { routerPush } = useRouterPush(false);
 
@@ -228,7 +228,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
   scope.run(() => {
     // update menus when locale changed
     watch(
-      () => app.locale,
+      () => appStore.locale,
       () => {
         updateAllTabsByI18nKey();
       }