perf: Improve the use of store in the app

packages/business/access/src/generate-menu-and-routes/index.ts

@@ -3,6 +3,8 @@ import type { RouteRecordRaw } from 'vue-router';
 
 import type { GeneratorMenuAndRoutesOptions } from '../types';
 
+import { cloneDepp } from '@vben-core/toolkit';
+
 import { generateMenus } from './generate-menus';
 import { generateRoutesByBackend } from './generate-routes-backend';
 import { generateRoutesByFrontend } from './generate-routes-frontend';
@@ -12,6 +14,8 @@ async function generateMenusAndRoutes(
   options: GeneratorMenuAndRoutesOptions,
 ) {
   const { router } = options;
+
+  options.routes = cloneDepp(options.routes);
   // 生成路由
   const accessibleRoutes = await generateRoutes(mode, options);
 

packages/business/access/src/index.ts

@@ -1,4 +1,4 @@
-export { default as Authority } from './authority.vue';
 export * from './generate-menu-and-routes';
+export { default as RoleAuthority } from './role-authority.vue';
 export type * from './types';
 export * from './use-access';

packages/business/access/src/role-authority.vue

@@ -9,15 +9,15 @@ interface Props {
    * - When the permission mode is 'backend', the value can be a code permission value.
    * @default ''
    */
-  value?: string[];
+  roles?: string[];
 }
 
 defineOptions({
-  name: 'Authority',
+  name: 'FrontendAuthority',
 });
 
 withDefaults(defineProps<Props>(), {
-  value: undefined,
+  roles: undefined,
 });
 </script>
 

packages/business/access/src/use-access.ts

@@ -1,28 +1,13 @@
 import { computed } from 'vue';
 
 import { preferences } from '@vben-core/preferences';
-import { useAccessStore } from '@vben-core/stores';
 
 function useAccess() {
-  const accessStore = useAccessStore();
-  const currentAccessMode = computed(() => {
+  const accessMode = computed(() => {
     return preferences.app.accessMode;
   });
 
-  /**
-   * 更改账号角色
-   * @param roles
-   */
-  async function changeRoles(roles: string[]): Promise<void> {
-    if (preferences.app.accessMode !== 'frontend') {
-      throw new Error(
-        'The current access mode is not frontend, so the role cannot be changed',
-      );
-    }
-    accessStore.setUserRoles(roles);
-  }
-
-  return { changeRoles, currentAccessMode };
+  return { accessMode };
 }
 
 export { useAccess };

packages/business/layouts/src/basic/content/content.vue

@@ -3,14 +3,14 @@ import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import { preferences, usePreferences } from '@vben-core/preferences';
 import { Spinner } from '@vben-core/shadcn-ui';
-import { storeToRefs, useTabbarStore } from '@vben-core/stores';
+import { storeToRefs, useCoreTabbarStore } from '@vben-core/stores';
 
 import { IFrameRouterView } from '../../iframe';
 import { useContentSpinner } from './use-content-spinner';
 
 defineOptions({ name: 'LayoutContent' });
 
-const tabsStore = useTabbarStore();
+const tabsStore = useCoreTabbarStore();
 const { keepAlive } = usePreferences();
 const { spinning } = useContentSpinner();
 
@@ -64,7 +64,11 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
             :key="route.fullPath"
           />
         </KeepAlive>
-        <component :is="Component" v-else :key="route.fullPath" />
+        <component
+          :is="Component"
+          v-else-if="renderRouteView"
+          :key="route.fullPath"
+        />
       </Transition>
     </RouterView>
   </div>

packages/business/layouts/src/basic/header/header.vue

@@ -2,7 +2,7 @@
 import { GlobalSearch, LanguageToggle, ThemeToggle } from '@vben/widgets';
 import { usePreferences } from '@vben-core/preferences';
 import { VbenFullScreen } from '@vben-core/shadcn-ui';
-import { useAccessStore } from '@vben-core/stores';
+import { useCoreAccessStore } from '@vben-core/stores';
 
 interface Props {
   /**
@@ -19,7 +19,7 @@ withDefaults(defineProps<Props>(), {
   theme: 'light',
 });
 
-const accessStore = useAccessStore();
+const accessStore = useCoreAccessStore();
 const { globalSearchShortcutKey } = usePreferences();
 </script>
 

packages/business/layouts/src/basic/menu/use-extra-menu.ts

@@ -5,12 +5,12 @@ import { useRoute } from 'vue-router';
 
 import { findRootMenuByPath } from '@vben-core/helpers';
 import { preferences } from '@vben-core/preferences';
-import { useAccessStore } from '@vben-core/stores';
+import { useCoreAccessStore } from '@vben-core/stores';
 
 import { useNavigation } from './use-navigation';
 
 function useExtraMenu() {
-  const accessStore = useAccessStore();
+  const accessStore = useCoreAccessStore();
   const { navigation } = useNavigation();
 
   const menus = computed(() => accessStore.getAccessMenus);

packages/business/layouts/src/basic/menu/use-mixed-menu.ts

@@ -5,12 +5,12 @@ import { useRoute } from 'vue-router';
 
 import { findRootMenuByPath } from '@vben-core/helpers';
 import { preferences, usePreferences } from '@vben-core/preferences';
-import { useAccessStore } from '@vben-core/stores';
+import { useCoreAccessStore } from '@vben-core/stores';
 
 import { useNavigation } from './use-navigation';
 
 function useMixedMenu() {
-  const accessStore = useAccessStore();
+  const accessStore = useCoreAccessStore();
   const { navigation } = useNavigation();
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);

packages/business/layouts/src/basic/tabbar/use-tabs.ts

@@ -19,14 +19,18 @@ import {
   MdiPin,
   MdiPinOff,
 } from '@vben-core/iconify';
-import { storeToRefs, useAccessStore, useTabbarStore } from '@vben-core/stores';
+import {
+  storeToRefs,
+  useCoreAccessStore,
+  useCoreTabbarStore,
+} from '@vben-core/stores';
 import { filterTree } from '@vben-core/toolkit';
 
 function useTabs() {
   const router = useRouter();
   const route = useRoute();
-  const accessStore = useAccessStore();
-  const tabsStore = useTabbarStore();
+  const accessStore = useCoreAccessStore();
+  const tabbarStore = useCoreTabbarStore();
   const { accessMenus } = storeToRefs(accessStore);
 
   const currentActive = computed(() => {
@@ -35,7 +39,7 @@ function useTabs() {
 
   const { locale } = useI18n();
   const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
-  watch([() => tabsStore.getTabs, () => locale.value], ([tabs, _]) => {
+  watch([() => tabbarStore.getTabs, () => locale.value], ([tabs, _]) => {
     currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
   });
 
@@ -46,7 +50,7 @@ function useTabs() {
     const affixTabs = filterTree(router.getRoutes(), (route) => {
       return !!route.meta?.affixTab;
     });
-    tabsStore.setAffixTabs(affixTabs);
+    tabbarStore.setAffixTabs(affixTabs);
   };
 
   // 点击tab,跳转路由
@@ -56,7 +60,7 @@ function useTabs() {
 
   // 关闭tab
   const handleClose = async (key: string) => {
-    await tabsStore.closeTabByKey(key, router);
+    await tabbarStore.closeTabByKey(key, router);
   };
 
   function wrapperTabLocale(tab: RouteLocationNormalizedGeneric) {
@@ -80,14 +84,14 @@ function useTabs() {
   watch(
     () => route.path,
     () => {
-      tabsStore.addTab(route as RouteLocationNormalized);
+      tabbarStore.addTab(route as RouteLocationNormalized);
     },
     { immediate: true },
   );
 
   const createContextMenus = (tab: TabItem) => {
-    const tabs = tabsStore.getTabs;
-    const affixTabs = tabsStore.affixTabs;
+    const tabs = tabbarStore.getTabs;
+    const affixTabs = tabbarStore.affixTabs;
     const index = tabs.findIndex((item) => item.path === tab.path);
 
     const disabled = tabs.length <= 1;
@@ -109,7 +113,7 @@ function useTabs() {
       {
         disabled: !isCurrentTab,
         handler: async () => {
-          await tabsStore.refreshTab(router);
+          await tabbarStore.refresh(router);
         },
         icon: IcRoundRefresh,
         key: 'reload',
@@ -118,7 +122,7 @@ function useTabs() {
       {
         disabled: !!affixTab || disabled,
         handler: async () => {
-          await tabsStore.closeTab(tab, router);
+          await tabbarStore.closeTab(tab, router);
         },
         icon: IcRoundClose,
         key: 'close',
@@ -127,8 +131,8 @@ function useTabs() {
       {
         handler: async () => {
           await (affixTab
-            ? tabsStore.unPushPinTab(tab)
-            : tabsStore.pushPinTab(tab));
+            ? tabbarStore.unPushPinTab(tab)
+            : tabbarStore.pushPinTab(tab));
         },
         icon: affixTab ? MdiPinOff : MdiPin,
         key: 'affix',
@@ -140,7 +144,7 @@ function useTabs() {
       {
         disabled: closeLeftDisabled,
         handler: async () => {
-          await tabsStore.closeLeftTabs(tab);
+          await tabbarStore.closeLeftTabs(tab);
         },
         icon: MdiFormatHorizontalAlignLeft,
         key: 'close-left',
@@ -149,7 +153,7 @@ function useTabs() {
       {
         disabled: closeRightDisabled,
         handler: async () => {
-          await tabsStore.closeRightTabs(tab);
+          await tabbarStore.closeRightTabs(tab);
         },
         icon: MdiFormatHorizontalAlignRight,
         key: 'close-right',
@@ -159,7 +163,7 @@ function useTabs() {
       {
         disabled: closeOtherDisabled,
         handler: async () => {
-          await tabsStore.closeOtherTabs(tab);
+          await tabbarStore.closeOtherTabs(tab);
         },
         icon: MdiArrowExpandHorizontal,
         key: 'close-other',
@@ -168,7 +172,7 @@ function useTabs() {
       {
         disabled,
         handler: async () => {
-          await tabsStore.closeAllTabs(router);
+          await tabbarStore.closeAllTabs(router);
         },
         icon: IcRoundMultipleStop,
         key: 'close-all',
@@ -187,7 +191,7 @@ function useTabs() {
    * 取消固定标签页
    */
   const handleUnPushPin = async (tab: TabItem) => {
-    await tabsStore.unPushPinTab(tab);
+    await tabbarStore.unPushPinTab(tab);
   };
 
   return {

packages/business/layouts/src/iframe/iframe-router-view.vue

@@ -6,12 +6,12 @@ import { useRoute } from 'vue-router';
 
 import { preferences } from '@vben-core/preferences';
 import { Spinner } from '@vben-core/shadcn-ui';
-import { useTabbarStore } from '@vben-core/stores';
+import { useCoreTabbarStore } from '@vben-core/stores';
 
 defineOptions({ name: 'IFrameRouterView' });
 
 const spinningList = ref<boolean[]>([]);
-const tabsStore = useTabbarStore();
+const tabsStore = useCoreTabbarStore();
 const route = useRoute();
 
 const enableTabbar = computed(() => preferences.tabbar.enable);

packages/business/universal-ui/package.json

@@ -43,6 +43,7 @@
     "@vben-core/design": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/shadcn-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
     "@vben/locales": "workspace:*",
     "@vben/types": "workspace:*",
     "@vueuse/integrations": "^10.11.0",

packages/business/universal-ui/src/authentication/code-login.vue

@@ -4,6 +4,7 @@ import type { LoginCodeEmits } from './typings';
 import { computed, onBeforeUnmount, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { LOGIN_PATH } from '@vben/constants';
 import { $t } from '@vben/locales';
 import { VbenButton, VbenInput, VbenPinInput } from '@vben-core/shadcn-ui';
 
@@ -26,7 +27,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
-  loginPath: '/auth/login',
+  loginPath: LOGIN_PATH,
 });
 
 const emit = defineEmits<{

packages/business/universal-ui/src/authentication/forget-password.vue

@@ -2,6 +2,7 @@
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { LOGIN_PATH } from '@vben/constants';
 import { $t } from '@vben/locales';
 import { VbenButton, VbenInput } from '@vben-core/shadcn-ui';
 
@@ -24,7 +25,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
-  loginPath: '/auth/login',
+  loginPath: LOGIN_PATH,
 });
 
 const emit = defineEmits<{

packages/business/universal-ui/src/authentication/qrcode-login.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { LOGIN_PATH } from '@vben/constants';
 import { $t } from '@vben/locales';
 import { VbenButton } from '@vben-core/shadcn-ui';
 
@@ -26,7 +27,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
-  loginPath: '/auth/login',
+  loginPath: LOGIN_PATH,
 });
 
 const router = useRouter();

packages/business/universal-ui/src/authentication/register.vue

@@ -4,6 +4,7 @@ import type { RegisterEmits } from './typings';
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { LOGIN_PATH } from '@vben/constants';
 import { $t } from '@vben/locales';
 import {
   VbenButton,
@@ -31,7 +32,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
-  loginPath: '/auth/login',
+  loginPath: LOGIN_PATH,
 });
 
 const emit = defineEmits<{