init

src/store/index.ts

@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+import { createPinia } from 'pinia';
+import { resetSetupStore } from './plugins';
+
+/** Setup Vue store plugin pinia */
+export function setupStore(app: App) {
+  const store = createPinia();
+
+  store.use(resetSetupStore);
+
+  app.use(store);
+}

src/store/modules/app/index.ts

@@ -0,0 +1,166 @@
+import { effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
+import { breakpointsTailwind, useBreakpoints, useEventListener, useTitle } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { useBoolean } from '@sa/hooks';
+import { router } from '@/router';
+import { localStg } from '@/utils/storage';
+import { SetupStoreId } from '@/enum';
+import { $t, setLocale } from '@/locales';
+import { setDayjsLocale } from '@/locales/dayjs';
+import { useRouteStore } from '../route';
+import { useTabStore } from '../tab';
+import { useThemeStore } from '../theme';
+
+export const useAppStore = defineStore(SetupStoreId.App, () => {
+  const themeStore = useThemeStore();
+  const routeStore = useRouteStore();
+  const tabStore = useTabStore();
+  const scope = effectScope();
+  const breakpoints = useBreakpoints(breakpointsTailwind);
+  const { bool: themeDrawerVisible, setTrue: openThemeDrawer, setFalse: closeThemeDrawer } = useBoolean();
+  const { bool: reloadFlag, setBool: setReloadFlag } = useBoolean(true);
+  const { bool: fullContent, toggle: toggleFullContent } = useBoolean();
+  const { bool: contentXScrollable, setBool: setContentXScrollable } = useBoolean();
+  const { bool: siderCollapse, setBool: setSiderCollapse, toggle: toggleSiderCollapse } = useBoolean();
+  const {
+    bool: mixSiderFixed,
+    setBool: setMixSiderFixed,
+    toggle: toggleMixSiderFixed
+  } = useBoolean(localStg.get('mixSiderFixed') === 'Y');
+
+  /** Is mobile layout */
+  const isMobile = breakpoints.smaller('sm');
+
+  /**
+   * Reload page
+   *
+   * @param duration Duration time
+   */
+  async function reloadPage(duration = 300) {
+    setReloadFlag(false);
+
+    const d = themeStore.page.animate ? duration : 40;
+
+    await new Promise(resolve => {
+      setTimeout(resolve, d);
+    });
+
+    setReloadFlag(true);
+    routeStore.resetRouteCache();
+  }
+
+  const locale = ref<App.I18n.LangType>(localStg.get('lang') || 'zh-CN');
+
+  const localeOptions: App.I18n.LangOption[] = [
+    {
+      label: '中文',
+      key: 'zh-CN'
+    },
+    {
+      label: 'English',
+      key: 'en-US'
+    }
+  ];
+
+  function changeLocale(lang: App.I18n.LangType) {
+    locale.value = lang;
+    setLocale(lang);
+    localStg.set('lang', lang);
+  }
+
+  /** Update document title by locale */
+  function updateDocumentTitleByLocale() {
+    const { i18nKey, title } = router.currentRoute.value.meta;
+
+    const documentTitle = i18nKey ? $t(i18nKey) : title;
+
+    useTitle(documentTitle);
+  }
+
+  function init() {
+    setDayjsLocale(locale.value);
+  }
+
+  // watch store
+  scope.run(() => {
+    // watch isMobile, if is mobile, collapse sider
+    watch(
+      isMobile,
+      newValue => {
+        if (newValue) {
+          // backup theme setting before is mobile
+          localStg.set('backupThemeSettingBeforeIsMobile', {
+            layout: themeStore.layout.mode,
+            siderCollapse: siderCollapse.value
+          });
+
+          themeStore.setThemeLayout('vertical');
+          setSiderCollapse(true);
+        } else {
+          // when is not mobile, recover the backup theme setting
+          const backup = localStg.get('backupThemeSettingBeforeIsMobile');
+
+          if (backup) {
+            nextTick(() => {
+              themeStore.setThemeLayout(backup.layout);
+              setSiderCollapse(backup.siderCollapse);
+
+              localStg.remove('backupThemeSettingBeforeIsMobile');
+            });
+          }
+        }
+      },
+      { immediate: true }
+    );
+
+    // watch locale
+    watch(locale, () => {
+      // update document title by locale
+      updateDocumentTitleByLocale();
+
+      // update global menus by locale
+      routeStore.updateGlobalMenusByLocale();
+
+      // update tabs by locale
+      tabStore.updateTabsByLocale();
+
+      // set dayjs locale
+      setDayjsLocale(locale.value);
+    });
+  });
+
+  // cache mixSiderFixed
+  useEventListener(window, 'beforeunload', () => {
+    localStg.set('mixSiderFixed', mixSiderFixed.value ? 'Y' : 'N');
+  });
+
+  /** On scope dispose */
+  onScopeDispose(() => {
+    scope.stop();
+  });
+
+  // init
+  init();
+
+  return {
+    isMobile,
+    reloadFlag,
+    reloadPage,
+    fullContent,
+    locale,
+    localeOptions,
+    changeLocale,
+    themeDrawerVisible,
+    openThemeDrawer,
+    closeThemeDrawer,
+    toggleFullContent,
+    contentXScrollable,
+    setContentXScrollable,
+    siderCollapse,
+    setSiderCollapse,
+    toggleSiderCollapse,
+    mixSiderFixed,
+    setMixSiderFixed,
+    toggleMixSiderFixed
+  };
+});

src/store/modules/auth/index.ts

@@ -0,0 +1,163 @@
+import { computed, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { defineStore } from 'pinia';
+import { useLoading } from '@sa/hooks';
+import { fetchLogin } from '@/service/api';
+import { useRouterPush } from '@/hooks/common/router';
+import { localStg } from '@/utils/storage';
+import { SetupStoreId } from '@/enum';
+import { $t } from '@/locales';
+import { useRouteStore } from '../route';
+import { useTabStore } from '../tab';
+import { clearAuthStorage, getToken } from './shared';
+
+export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
+  const route = useRoute();
+  const authStore = useAuthStore();
+  const routeStore = useRouteStore();
+  const tabStore = useTabStore();
+  const { toLogin, redirectFromLogin } = useRouterPush(false);
+  const { loading: loginLoading, startLoading, endLoading } = useLoading();
+  const { VITE_AUTH_ROUTE_MODE, VITE_STATIC_SUPER_ROLE } = import.meta.env;
+
+  const token = ref(getToken());
+
+  const userInfo: Api.Auth.UserInfo = reactive({
+    id: '',
+    name: '',
+    username: '',
+    email: '',
+    roles: [VITE_STATIC_SUPER_ROLE],
+    buttons: []
+  });
+
+  /** is super role in static route */
+  const isStaticSuper = computed(() => {
+    return VITE_AUTH_ROUTE_MODE === 'static' && userInfo.roles.includes(VITE_STATIC_SUPER_ROLE);
+  });
+
+  /** Is login */
+  const isLogin = computed(() => Boolean(token.value));
+
+  /** Reset auth store */
+  async function resetStore() {
+    recordUserId();
+
+    clearAuthStorage();
+
+    authStore.$reset();
+
+    if (!route.meta.constant) {
+      await toLogin();
+    }
+
+    tabStore.cacheTabs();
+    routeStore.resetStore();
+  }
+
+  /** Record the user ID of the previous login session Used to compare with the current user ID on next login */
+  function recordUserId() {
+    if (!userInfo.id) {
+      return;
+    }
+
+    // Store current user ID locally for next login comparison
+    localStg.set('lastLoginUserId', userInfo.id);
+  }
+
+  /**
+   * Check if current login user is different from previous login user If different, clear all tabs
+   *
+   * @returns {boolean} Whether to clear all tabs
+   */
+  function checkTabClear(): boolean {
+    if (!userInfo.id) {
+      return false;
+    }
+
+    const lastLoginUserId = localStg.get('lastLoginUserId');
+
+    // Clear all tabs if current user is different from previous user
+    if (!lastLoginUserId || lastLoginUserId !== userInfo.id) {
+      localStg.remove('globalTabs');
+      tabStore.clearTabs();
+
+      localStg.remove('lastLoginUserId');
+      return true;
+    }
+
+    localStg.remove('lastLoginUserId');
+    return false;
+  }
+
+  /**
+   * Login
+   *
+   * @param userName User name
+   * @param password Password
+   * @param [redirect=true] Whether to redirect after login. Default is `true`
+   */
+  async function login(userName: string, password: string, redirect = true) {
+    startLoading();
+
+    const res = await fetchLogin(userName, password);
+    if (!res.error) {
+      const pass = await loginByToken(res.response.data);
+
+      if (pass) {
+        // Check if the tab needs to be cleared
+        const isClear = checkTabClear();
+        let needRedirect = redirect;
+
+        if (isClear) {
+          // If the tab needs to be cleared,it means we don't need to redirect.
+          needRedirect = false;
+        }
+        await redirectFromLogin(needRedirect);
+
+        window.$notification?.success({
+          title: $t('page.login.common.loginSuccess'),
+          content: $t('page.login.common.welcomeBack', { userName: userInfo.name }),
+          duration: 4500
+        });
+      }
+    } else {
+      resetStore();
+    }
+
+    endLoading();
+  }
+
+  async function loginByToken(data: Api.Auth.LoginToken) {
+    // 1. stored in the localStorage, the later requests need it in headers
+    localStg.set('token', data.token);
+    localStg.set('userinfo', data.user);
+    // 2. get user info
+    return true;
+  }
+
+  async function initUserInfo() {
+    const hasToken = getToken();
+    const user = localStg.get('userinfo');
+
+    if (hasToken && user) {
+      userInfo.id = user.id;
+      userInfo.name = user.name;
+      userInfo.username = user.username;
+      userInfo.email = user.email;
+      return true;
+    }
+    return false;
+  }
+
+  return {
+    token,
+    userInfo,
+    isStaticSuper,
+    isLogin,
+    loginLoading,
+    resetStore,
+    login,
+    initUserInfo
+  };
+});

src/store/modules/auth/shared.ts

@@ -0,0 +1,12 @@
+import { localStg } from '@/utils/storage';
+
+/** Get token */
+export function getToken() {
+  return localStg.get('token') || '';
+}
+
+/** Clear auth storage */
+export function clearAuthStorage() {
+  localStg.remove('token');
+  localStg.remove('refreshToken');
+}

src/store/modules/route/index.ts

@@ -0,0 +1,348 @@
+import { computed, nextTick, ref, shallowRef } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+import { defineStore } from 'pinia';
+import { useBoolean } from '@sa/hooks';
+import type { CustomRoute, ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
+import { router } from '@/router';
+import { fetchGetConstantRoutes, fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
+import { SetupStoreId } from '@/enum';
+import { createStaticRoutes, getAuthVueRoutes } from '@/router/routes';
+import { ROOT_ROUTE } from '@/router/routes/builtin';
+import { getRouteName, getRoutePath } from '@/router/elegant/transform';
+import { useAuthStore } from '../auth';
+import { useTabStore } from '../tab';
+import {
+  filterAuthRoutesByRoles,
+  getBreadcrumbsByRoute,
+  getCacheRouteNames,
+  getGlobalMenusByAuthRoutes,
+  getSelectedMenuKeyPathByKey,
+  isRouteExistByRouteName,
+  sortRoutesByOrder,
+  transformMenuToSearchMenus,
+  updateLocaleOfGlobalMenus
+} from './shared';
+
+export const useRouteStore = defineStore(SetupStoreId.Route, () => {
+  const authStore = useAuthStore();
+  const tabStore = useTabStore();
+  const { bool: isInitConstantRoute, setBool: setIsInitConstantRoute } = useBoolean();
+  const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
+
+  /**
+   * Auth route mode
+   *
+   * It recommends to use static mode in the development environment, and use dynamic mode in the production
+   * environment, if use static mode in development environment, the auth routes will be auto generated by plugin
+   * "@elegant-router/vue"
+   */
+  const authRouteMode = ref(import.meta.env.VITE_AUTH_ROUTE_MODE);
+
+  /** Home route key */
+  const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
+
+  /**
+   * Set route home
+   *
+   * @param routeKey Route key
+   */
+  function setRouteHome(routeKey: LastLevelRouteKey) {
+    routeHome.value = routeKey;
+  }
+
+  /** constant routes */
+  const constantRoutes = shallowRef<ElegantConstRoute[]>([]);
+
+  function addConstantRoutes(routes: ElegantConstRoute[]) {
+    const constantRoutesMap = new Map<string, ElegantConstRoute>([]);
+
+    routes.forEach(route => {
+      constantRoutesMap.set(route.name, route);
+    });
+
+    constantRoutes.value = Array.from(constantRoutesMap.values());
+  }
+
+  /** auth routes */
+  const authRoutes = shallowRef<ElegantConstRoute[]>([]);
+
+  function addAuthRoutes(routes: ElegantConstRoute[]) {
+    const authRoutesMap = new Map<string, ElegantConstRoute>([]);
+
+    routes.forEach(route => {
+      authRoutesMap.set(route.name, route);
+    });
+
+    authRoutes.value = Array.from(authRoutesMap.values());
+  }
+
+  const removeRouteFns: (() => void)[] = [];
+
+  /** Global menus */
+  const menus = ref<App.Global.Menu[]>([]);
+  const searchMenus = computed(() => transformMenuToSearchMenus(menus.value));
+
+  /** Get global menus */
+  function getGlobalMenus(routes: ElegantConstRoute[]) {
+    menus.value = getGlobalMenusByAuthRoutes(routes);
+  }
+
+  /** Update global menus by locale */
+  function updateGlobalMenusByLocale() {
+    menus.value = updateLocaleOfGlobalMenus(menus.value);
+  }
+
+  /** Cache routes */
+  const cacheRoutes = ref<RouteKey[]>([]);
+
+  /**
+   * Exclude cache routes
+   *
+   * for reset route cache
+   */
+  const excludeCacheRoutes = ref<RouteKey[]>([]);
+
+  /**
+   * Get cache routes
+   *
+   * @param routes Vue routes
+   */
+  function getCacheRoutes(routes: RouteRecordRaw[]) {
+    cacheRoutes.value = getCacheRouteNames(routes);
+  }
+
+  /**
+   * Reset route cache
+   *
+   * @default router.currentRoute.value.name current route name
+   * @param routeKey
+   */
+  async function resetRouteCache(routeKey?: RouteKey) {
+    const routeName = routeKey || (router.currentRoute.value.name as RouteKey);
+
+    excludeCacheRoutes.value.push(routeName);
+
+    await nextTick();
+
+    excludeCacheRoutes.value = [];
+  }
+
+  /** Global breadcrumbs */
+  const breadcrumbs = computed(() => getBreadcrumbsByRoute(router.currentRoute.value, menus.value));
+
+  /** Reset store */
+  async function resetStore() {
+    const routeStore = useRouteStore();
+
+    routeStore.$reset();
+
+    resetVueRoutes();
+
+    // after reset store, need to re-init constant route
+    await initConstantRoute();
+  }
+
+  /** Reset vue routes */
+  function resetVueRoutes() {
+    removeRouteFns.forEach(fn => fn());
+    removeRouteFns.length = 0;
+  }
+
+  /** init constant route */
+  async function initConstantRoute() {
+    if (isInitConstantRoute.value) return;
+
+    const staticRoute = createStaticRoutes();
+
+    if (authRouteMode.value === 'static') {
+      addConstantRoutes(staticRoute.constantRoutes);
+    } else {
+      const { data, error } = await fetchGetConstantRoutes();
+
+      if (!error) {
+        addConstantRoutes(data);
+      } else {
+        // if fetch constant routes failed, use static constant routes
+        addConstantRoutes(staticRoute.constantRoutes);
+      }
+    }
+
+    handleConstantAndAuthRoutes();
+
+    setIsInitConstantRoute(true);
+
+    tabStore.initHomeTab();
+  }
+
+  /** Init auth route */
+  async function initAuthRoute() {
+    // check if user info is initialized
+    if (!authStore.userInfo.id) {
+      await authStore.initUserInfo();
+    }
+
+    if (authRouteMode.value === 'static') {
+      initStaticAuthRoute();
+    } else {
+      await initDynamicAuthRoute();
+    }
+
+    tabStore.initHomeTab();
+  }
+
+  /** Init static auth route */
+  function initStaticAuthRoute() {
+    const { authRoutes: staticAuthRoutes } = createStaticRoutes();
+
+    if (authStore.isStaticSuper) {
+      addAuthRoutes(staticAuthRoutes);
+    } else {
+      const filteredAuthRoutes = filterAuthRoutesByRoles(staticAuthRoutes, authStore.userInfo.roles);
+
+      addAuthRoutes(filteredAuthRoutes);
+    }
+
+    handleConstantAndAuthRoutes();
+
+    setIsInitAuthRoute(true);
+  }
+
+  /** Init dynamic auth route */
+  async function initDynamicAuthRoute() {
+    const { data, error } = await fetchGetUserRoutes();
+
+    if (!error) {
+      const { routes, home } = data;
+
+      addAuthRoutes(routes);
+
+      handleConstantAndAuthRoutes();
+
+      setRouteHome(home);
+
+      handleUpdateRootRouteRedirect(home);
+
+      setIsInitAuthRoute(true);
+    } else {
+      // if fetch user routes failed, reset store
+      authStore.resetStore();
+    }
+  }
+
+  /** handle constant and auth routes */
+  function handleConstantAndAuthRoutes() {
+    const allRoutes = [...constantRoutes.value, ...authRoutes.value];
+
+    const sortRoutes = sortRoutesByOrder(allRoutes);
+
+    const vueRoutes = getAuthVueRoutes(sortRoutes);
+
+    resetVueRoutes();
+
+    addRoutesToVueRouter(vueRoutes);
+
+    getGlobalMenus(sortRoutes);
+
+    getCacheRoutes(vueRoutes);
+  }
+
+  /**
+   * Add routes to vue router
+   *
+   * @param routes Vue routes
+   */
+  function addRoutesToVueRouter(routes: RouteRecordRaw[]) {
+    routes.forEach(route => {
+      const removeFn = router.addRoute(route);
+      addRemoveRouteFn(removeFn);
+    });
+  }
+
+  /**
+   * Add remove route fn
+   *
+   * @param fn
+   */
+  function addRemoveRouteFn(fn: () => void) {
+    removeRouteFns.push(fn);
+  }
+
+  /**
+   * Update root route redirect when auth route mode is dynamic
+   *
+   * @param redirectKey Redirect route key
+   */
+  function handleUpdateRootRouteRedirect(redirectKey: LastLevelRouteKey) {
+    const redirect = getRoutePath(redirectKey);
+
+    if (redirect) {
+      const rootRoute: CustomRoute = { ...ROOT_ROUTE, redirect };
+
+      router.removeRoute(rootRoute.name);
+
+      const [rootVueRoute] = getAuthVueRoutes([rootRoute]);
+
+      router.addRoute(rootVueRoute);
+    }
+  }
+
+  /**
+   * Get is auth route exist
+   *
+   * @param routePath Route path
+   */
+  async function getIsAuthRouteExist(routePath: RouteMap[RouteKey]) {
+    const routeName = getRouteName(routePath);
+
+    if (!routeName) {
+      return false;
+    }
+
+    if (authRouteMode.value === 'static') {
+      const { authRoutes: staticAuthRoutes } = createStaticRoutes();
+      return isRouteExistByRouteName(routeName, staticAuthRoutes);
+    }
+
+    const { data } = await fetchIsRouteExist(routeName);
+
+    return data;
+  }
+
+  /**
+   * Get selected menu key path
+   *
+   * @param selectedKey Selected menu key
+   */
+  function getSelectedMenuKeyPath(selectedKey: string) {
+    return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
+  }
+
+  async function onRouteSwitchWhenLoggedIn() {
+    // some global init logic when logged in and switch route
+  }
+
+  async function onRouteSwitchWhenNotLoggedIn() {
+    // some global init logic if it does not need to be logged in
+  }
+
+  return {
+    resetStore,
+    routeHome,
+    menus,
+    searchMenus,
+    updateGlobalMenusByLocale,
+    cacheRoutes,
+    excludeCacheRoutes,
+    resetRouteCache,
+    breadcrumbs,
+    initConstantRoute,
+    isInitConstantRoute,
+    initAuthRoute,
+    isInitAuthRoute,
+    setIsInitAuthRoute,
+    getIsAuthRouteExist,
+    getSelectedMenuKeyPath,
+    onRouteSwitchWhenLoggedIn,
+    onRouteSwitchWhenNotLoggedIn
+  };
+});

src/store/modules/route/shared.ts

@@ -0,0 +1,335 @@
+import type { RouteLocationNormalizedLoaded, RouteRecordRaw, _RouteRecordBase } from 'vue-router';
+import type { ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
+import { useSvgIcon } from '@/hooks/common/icon';
+import { $t } from '@/locales';
+
+/**
+ * Filter auth routes by roles
+ *
+ * @param routes Auth routes
+ * @param roles Roles
+ */
+export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: string[]) {
+  return routes.flatMap(route => filterAuthRouteByRoles(route, roles));
+}
+
+/**
+ * Filter auth route by roles
+ *
+ * @param route Auth route
+ * @param roles Roles
+ */
+function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]): ElegantConstRoute[] {
+  const routeRoles = (route.meta && route.meta.roles) || [];
+
+  // if the route's "roles" is empty, then it is allowed to access
+  const isEmptyRoles = !routeRoles.length;
+
+  // if the user's role is included in the route's "roles", then it is allowed to access
+  const hasPermission = routeRoles.some(role => roles.includes(role));
+
+  const filterRoute = { ...route };
+
+  if (filterRoute.children?.length) {
+    filterRoute.children = filterRoute.children.flatMap(item => filterAuthRouteByRoles(item, roles));
+  }
+
+  // Exclude the route if it has no children after filtering
+  if (filterRoute.children?.length === 0) {
+    return [];
+  }
+
+  return hasPermission || isEmptyRoles ? [filterRoute] : [];
+}
+
+/**
+ * sort route by order
+ *
+ * @param route route
+ */
+function sortRouteByOrder(route: ElegantConstRoute) {
+  if (route.children?.length) {
+    route.children.sort((next, prev) => (Number(next.meta?.order) || 0) - (Number(prev.meta?.order) || 0));
+    route.children.forEach(sortRouteByOrder);
+  }
+
+  return route;
+}
+
+/**
+ * sort routes by order
+ *
+ * @param routes routes
+ */
+export function sortRoutesByOrder(routes: ElegantConstRoute[]) {
+  routes.sort((next, prev) => (Number(next.meta?.order) || 0) - (Number(prev.meta?.order) || 0));
+  routes.forEach(sortRouteByOrder);
+
+  return routes;
+}
+
+/**
+ * Get global menus by auth routes
+ *
+ * @param routes Auth routes
+ */
+export function getGlobalMenusByAuthRoutes(routes: ElegantConstRoute[]) {
+  const menus: App.Global.Menu[] = [];
+
+  routes.forEach(route => {
+    if (!route.meta?.hideInMenu) {
+      const menu = getGlobalMenuByBaseRoute(route);
+
+      if (route.children?.some(child => !child.meta?.hideInMenu)) {
+        menu.children = getGlobalMenusByAuthRoutes(route.children);
+      }
+
+      menus.push(menu);
+    }
+  });
+
+  return menus;
+}
+
+/**
+ * Update locale of global menus
+ *
+ * @param menus
+ */
+export function updateLocaleOfGlobalMenus(menus: App.Global.Menu[]) {
+  const result: App.Global.Menu[] = [];
+
+  menus.forEach(menu => {
+    const { i18nKey, label, children } = menu;
+
+    const newLabel = i18nKey ? $t(i18nKey) : label;
+
+    const newMenu: App.Global.Menu = {
+      ...menu,
+      label: newLabel
+    };
+
+    if (children?.length) {
+      newMenu.children = updateLocaleOfGlobalMenus(children);
+    }
+
+    result.push(newMenu);
+  });
+
+  return result;
+}
+
+/**
+ * Get global menu by route
+ *
+ * @param route
+ */
+function getGlobalMenuByBaseRoute(route: RouteLocationNormalizedLoaded | ElegantConstRoute) {
+  const { SvgIconVNode } = useSvgIcon();
+
+  const { name, path } = route;
+  const { title, i18nKey, icon = import.meta.env.VITE_MENU_ICON, localIcon, iconFontSize } = route.meta ?? {};
+
+  const label = i18nKey ? $t(i18nKey) : title!;
+
+  const menu: App.Global.Menu = {
+    key: name as string,
+    label,
+    i18nKey,
+    routeKey: name as RouteKey,
+    routePath: path as RouteMap[RouteKey],
+    icon: SvgIconVNode({ icon, localIcon, fontSize: iconFontSize || 20 })
+  };
+
+  return menu;
+}
+
+/**
+ * Get cache route names
+ *
+ * @param routes Vue routes (two levels)
+ */
+export function getCacheRouteNames(routes: RouteRecordRaw[]) {
+  const cacheNames: LastLevelRouteKey[] = [];
+
+  routes.forEach(route => {
+    // only get last two level route, which has component
+    route.children?.forEach(child => {
+      if (child.component && child.meta?.keepAlive) {
+        cacheNames.push(child.name as LastLevelRouteKey);
+      }
+    });
+  });
+
+  return cacheNames;
+}
+
+/**
+ * Is route exist by route name
+ *
+ * @param routeName
+ * @param routes
+ */
+export function isRouteExistByRouteName(routeName: RouteKey, routes: ElegantConstRoute[]) {
+  return routes.some(route => recursiveGetIsRouteExistByRouteName(route, routeName));
+}
+
+/**
+ * Recursive get is route exist by route name
+ *
+ * @param route
+ * @param routeName
+ */
+function recursiveGetIsRouteExistByRouteName(route: ElegantConstRoute, routeName: RouteKey) {
+  let isExist = route.name === routeName;
+
+  if (isExist) {
+    return true;
+  }
+
+  if (route.children && route.children.length) {
+    isExist = route.children.some(item => recursiveGetIsRouteExistByRouteName(item, routeName));
+  }
+
+  return isExist;
+}
+
+/**
+ * Get selected menu key path
+ *
+ * @param selectedKey
+ * @param menus
+ */
+export function getSelectedMenuKeyPathByKey(selectedKey: string, menus: App.Global.Menu[]) {
+  const keyPath: string[] = [];
+
+  menus.some(menu => {
+    const path = findMenuPath(selectedKey, menu);
+
+    const find = Boolean(path?.length);
+
+    if (find) {
+      keyPath.push(...path!);
+    }
+
+    return find;
+  });
+
+  return keyPath;
+}
+
+/**
+ * Find menu path
+ *
+ * @param targetKey Target menu key
+ * @param menu Menu
+ */
+function findMenuPath(targetKey: string, menu: App.Global.Menu): string[] | null {
+  const path: string[] = [];
+
+  function dfs(item: App.Global.Menu): boolean {
+    path.push(item.key);
+
+    if (item.key === targetKey) {
+      return true;
+    }
+
+    if (item.children) {
+      for (const child of item.children) {
+        if (dfs(child)) {
+          return true;
+        }
+      }
+    }
+
+    path.pop();
+
+    return false;
+  }
+
+  if (dfs(menu)) {
+    return path;
+  }
+
+  return null;
+}
+
+/**
+ * Transform menu to breadcrumb
+ *
+ * @param menu
+ */
+function transformMenuToBreadcrumb(menu: App.Global.Menu) {
+  const { children, ...rest } = menu;
+
+  const breadcrumb: App.Global.Breadcrumb = {
+    ...rest
+  };
+
+  if (children?.length) {
+    breadcrumb.options = children.map(transformMenuToBreadcrumb);
+  }
+
+  return breadcrumb;
+}
+
+/**
+ * Get breadcrumbs by route
+ *
+ * @param route
+ * @param menus
+ */
+export function getBreadcrumbsByRoute(
+  route: RouteLocationNormalizedLoaded,
+  menus: App.Global.Menu[]
+): App.Global.Breadcrumb[] {
+  const key = route.name as string;
+  const activeKey = route.meta?.activeMenu;
+
+  for (const menu of menus) {
+    if (menu.key === key) {
+      return [transformMenuToBreadcrumb(menu)];
+    }
+
+    if (menu.key === activeKey) {
+      const ROUTE_DEGREE_SPLITTER = '_';
+
+      const parentKey = key.split(ROUTE_DEGREE_SPLITTER).slice(0, -1).join(ROUTE_DEGREE_SPLITTER);
+
+      const breadcrumbMenu = getGlobalMenuByBaseRoute(route);
+      if (parentKey !== activeKey) {
+        return [transformMenuToBreadcrumb(breadcrumbMenu)];
+      }
+
+      return [transformMenuToBreadcrumb(menu), transformMenuToBreadcrumb(breadcrumbMenu)];
+    }
+
+    if (menu.children?.length) {
+      const result = getBreadcrumbsByRoute(route, menu.children);
+      if (result.length > 0) {
+        return [transformMenuToBreadcrumb(menu), ...result];
+      }
+    }
+  }
+
+  return [];
+}
+
+/**
+ * Transform menu to searchMenus
+ *
+ * @param menus - menus
+ * @param treeMap
+ */
+export function transformMenuToSearchMenus(menus: App.Global.Menu[], treeMap: App.Global.Menu[] = []) {
+  if (menus && menus.length === 0) return [];
+  return menus.reduce((acc, cur) => {
+    if (!cur.children) {
+      acc.push(cur);
+    }
+    if (cur.children && cur.children.length > 0) {
+      transformMenuToSearchMenus(cur.children, treeMap);
+    }
+    return acc;
+  }, treeMap);
+}

src/store/modules/tab/index.ts

@@ -0,0 +1,385 @@
+import { computed, ref } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import type { RouteKey } from '@elegant-router/types';
+import { router } from '@/router';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { localStg } from '@/utils/storage';
+import { SetupStoreId } from '@/enum';
+import { useThemeStore } from '../theme';
+import {
+  extractTabsByAllRoutes,
+  filterTabsByIds,
+  findTabByRouteName,
+  getAllTabs,
+  getDefaultHomeTab,
+  getFixedTabIds,
+  getTabByRoute,
+  getTabIdByRoute,
+  isTabInTabs,
+  reorderFixedTabs,
+  updateTabByI18nKey,
+  updateTabsByI18nKey
+} from './shared';
+
+export const useTabStore = defineStore(SetupStoreId.Tab, () => {
+  const routeStore = useRouteStore();
+  const themeStore = useThemeStore();
+  const { routerPush } = useRouterPush(false);
+
+  /** Tabs */
+  const tabs = ref<App.Global.Tab[]>([]);
+
+  /** Get active tab */
+  const homeTab = ref<App.Global.Tab>();
+
+  /** Init home tab */
+  function initHomeTab() {
+    homeTab.value = getDefaultHomeTab(router, routeStore.routeHome);
+  }
+
+  /** Get all tabs */
+  const allTabs = computed(() => getAllTabs(tabs.value, homeTab.value));
+
+  /** Active tab id */
+  const activeTabId = ref<string>('');
+
+  /**
+   * Set active tab id
+   *
+   * @param id Tab id
+   */
+  function setActiveTabId(id: string) {
+    activeTabId.value = id;
+  }
+
+  /**
+   * Init tab store
+   *
+   * @param currentRoute Current route
+   */
+  function initTabStore(currentRoute: App.Global.TabRoute) {
+    const storageTabs = localStg.get('globalTabs');
+
+    if (themeStore.tab.cache && storageTabs) {
+      const extractedTabs = extractTabsByAllRoutes(router, storageTabs);
+      tabs.value = updateTabsByI18nKey(extractedTabs);
+    }
+
+    addTab(currentRoute);
+  }
+
+  /**
+   * Add tab
+   *
+   * @param route Tab route
+   * @param active Whether to activate the added tab
+   */
+  function addTab(route: App.Global.TabRoute, active = true) {
+    const tab = getTabByRoute(route);
+
+    const isHomeTab = tab.id === homeTab.value?.id;
+
+    if (!isHomeTab && !isTabInTabs(tab.id, tabs.value)) {
+      tabs.value.push(tab);
+    }
+
+    if (active) {
+      setActiveTabId(tab.id);
+    }
+  }
+
+  /**
+   * Remove tab
+   *
+   * @param tabId Tab id
+   */
+  async function removeTab(tabId: string) {
+    const removeTabIndex = tabs.value.findIndex(tab => tab.id === tabId);
+    if (removeTabIndex === -1) return;
+
+    const removedTabRouteKey = tabs.value[removeTabIndex].routeKey;
+    const isRemoveActiveTab = activeTabId.value === tabId;
+
+    // if remove the last tab, then switch to the second last tab
+    const nextTab = tabs.value[removeTabIndex + 1] || tabs.value[removeTabIndex - 1] || homeTab.value;
+
+    // remove tab
+    tabs.value.splice(removeTabIndex, 1);
+
+    // if current tab is removed, then switch to next tab
+    if (isRemoveActiveTab && nextTab) {
+      await switchRouteByTab(nextTab);
+    }
+
+    // reset route cache
+    routeStore.resetRouteCache(removedTabRouteKey);
+  }
+
+  /** remove active tab */
+  async function removeActiveTab() {
+    await removeTab(activeTabId.value);
+  }
+
+  /**
+   * remove tab by route name
+   *
+   * @param routeName route name
+   */
+  async function removeTabByRouteName(routeName: RouteKey) {
+    const tab = findTabByRouteName(routeName, tabs.value);
+    if (!tab) return;
+
+    await removeTab(tab.id);
+  }
+
+  /**
+   * Clear tabs
+   *
+   * @param excludes Exclude tab ids
+   */
+  async function clearTabs(excludes: string[] = []) {
+    const remainTabIds = [...getFixedTabIds(tabs.value), ...excludes];
+
+    // Identify tabs to be removed and collect their routeKeys if strategy is 'close'
+    const tabsToRemove = tabs.value.filter(tab => !remainTabIds.includes(tab.id));
+    const routeKeysToReset: RouteKey[] = [];
+
+    for (const tab of tabsToRemove) {
+      routeKeysToReset.push(tab.routeKey);
+    }
+
+    const removedTabsIds = tabsToRemove.map(tab => tab.id);
+
+    // If no tabs are actually being removed based on excludes and fixed tabs, exit
+    if (removedTabsIds.length === 0) {
+      return;
+    }
+
+    const isRemoveActiveTab = removedTabsIds.includes(activeTabId.value);
+    // filterTabsByIds returns tabs NOT in removedTabsIds, so these are the tabs that will remain
+    const updatedTabs = filterTabsByIds(removedTabsIds, tabs.value);
+
+    function update() {
+      tabs.value = updatedTabs;
+    }
+
+    if (!isRemoveActiveTab) {
+      update();
+    } else {
+      const activeTabCandidate = updatedTabs[updatedTabs.length - 1] || homeTab.value;
+
+      if (activeTabCandidate) {
+        // Ensure there's a tab to switch to
+        await switchRouteByTab(activeTabCandidate);
+      }
+      // Update the tabs array regardless of switch success or if a candidate was found
+      update();
+    }
+
+    // After tabs are updated and route potentially switched, reset cache for removed tabs
+    for (const routeKey of routeKeysToReset) {
+      routeStore.resetRouteCache(routeKey);
+    }
+  }
+
+  const { routerPushByKey } = useRouterPush();
+  /**
+   * Replace tab
+   *
+   * @param key Route key
+   * @param options Router push options
+   */
+  async function replaceTab(key: RouteKey, options?: App.Global.RouterPushOptions) {
+    const oldTabId = activeTabId.value;
+
+    // push new route
+    await routerPushByKey(key, options);
+
+    // remove old tab (exclude fixed tab)
+    if (!isTabRetain(oldTabId)) {
+      await removeTab(oldTabId);
+    }
+  }
+
+  /**
+   * Switch route by tab
+   *
+   * @param tab
+   */
+  async function switchRouteByTab(tab: App.Global.Tab) {
+    const fail = await routerPush(tab.fullPath);
+    if (!fail) {
+      setActiveTabId(tab.id);
+    }
+  }
+
+  /**
+   * Clear left tabs
+   *
+   * @param tabId
+   */
+  async function clearLeftTabs(tabId: string) {
+    const tabIds = tabs.value.map(tab => tab.id);
+    const index = tabIds.indexOf(tabId);
+    if (index === -1) return;
+
+    const excludes = tabIds.slice(index);
+    await clearTabs(excludes);
+  }
+
+  /**
+   * Clear right tabs
+   *
+   * @param tabId
+   */
+  async function clearRightTabs(tabId: string) {
+    const isHomeTab = tabId === homeTab.value?.id;
+    if (isHomeTab) {
+      clearTabs();
+      return;
+    }
+
+    const tabIds = tabs.value.map(tab => tab.id);
+    const index = tabIds.indexOf(tabId);
+    if (index === -1) return;
+
+    const excludes = tabIds.slice(0, index + 1);
+    await clearTabs(excludes);
+  }
+
+  /**
+   * Fix tab
+   *
+   * @param tabId
+   */
+  function fixTab(tabId: string) {
+    const tabIndex = tabs.value.findIndex(t => t.id === tabId);
+    if (tabIndex === -1) return;
+
+    const tab = tabs.value[tabIndex];
+    const fixedCount = getFixedTabIds(tabs.value).length;
+    tab.fixedIndex = fixedCount;
+
+    if (tabIndex !== fixedCount) {
+      tabs.value.splice(tabIndex, 1);
+      tabs.value.splice(fixedCount, 0, tab);
+    }
+
+    reorderFixedTabs(tabs.value);
+  }
+
+  /**
+   * Unfix tab
+   *
+   * @param tabId
+   */
+  function unfixTab(tabId: string) {
+    const tabIndex = tabs.value.findIndex(t => t.id === tabId);
+    if (tabIndex === -1) return;
+
+    const tab = tabs.value[tabIndex];
+    tab.fixedIndex = undefined;
+
+    const fixedCount = getFixedTabIds(tabs.value).length;
+    if (tabIndex !== fixedCount) {
+      tabs.value.splice(tabIndex, 1);
+      tabs.value.splice(fixedCount, 0, tab);
+    }
+
+    reorderFixedTabs(tabs.value);
+  }
+
+  /**
+   * Set new label of tab
+   *
+   * @default activeTabId
+   * @param label New tab label
+   * @param tabId Tab id
+   */
+  function setTabLabel(label: string, tabId?: string) {
+    const id = tabId || activeTabId.value;
+
+    const tab = tabs.value.find(item => item.id === id);
+    if (!tab) return;
+
+    tab.oldLabel = tab.label;
+    tab.newLabel = label;
+  }
+
+  /**
+   * Reset tab label
+   *
+   * @default activeTabId
+   * @param tabId Tab id
+   */
+  function resetTabLabel(tabId?: string) {
+    const id = tabId || activeTabId.value;
+
+    const tab = tabs.value.find(item => item.id === id);
+    if (!tab) return;
+
+    tab.newLabel = undefined;
+  }
+
+  /**
+   * Is tab retain
+   *
+   * @param tabId
+   */
+  function isTabRetain(tabId: string) {
+    if (tabId === homeTab.value?.id) return true;
+
+    const fixedTabIds = getFixedTabIds(tabs.value);
+
+    return fixedTabIds.includes(tabId);
+  }
+
+  /** Update tabs by locale */
+  function updateTabsByLocale() {
+    tabs.value = updateTabsByI18nKey(tabs.value);
+
+    if (homeTab.value) {
+      homeTab.value = updateTabByI18nKey(homeTab.value);
+    }
+  }
+
+  /** Cache tabs */
+  function cacheTabs() {
+    if (!themeStore.tab.cache) return;
+
+    localStg.set('globalTabs', tabs.value);
+  }
+
+  // cache tabs when page is closed or refreshed
+  useEventListener(window, 'beforeunload', () => {
+    cacheTabs();
+  });
+
+  return {
+    /** All tabs */
+    tabs: allTabs,
+    activeTabId,
+    homeTab,
+    initHomeTab,
+    initTabStore,
+    addTab,
+    removeTab,
+    removeActiveTab,
+    removeTabByRouteName,
+    replaceTab,
+    clearTabs,
+    clearLeftTabs,
+    clearRightTabs,
+    fixTab,
+    unfixTab,
+    switchRouteByTab,
+    setTabLabel,
+    resetTabLabel,
+    isTabRetain,
+    updateTabsByLocale,
+    getTabIdByRoute,
+    cacheTabs
+  };
+});

src/store/modules/tab/shared.ts

@@ -0,0 +1,263 @@
+import type { Router } from 'vue-router';
+import type { LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
+import { $t } from '@/locales';
+import { getRoutePath } from '@/router/elegant/transform';
+
+/**
+ * Get all tabs
+ *
+ * @param tabs Tabs
+ * @param homeTab Home tab
+ */
+export function getAllTabs(tabs: App.Global.Tab[], homeTab?: App.Global.Tab) {
+  if (!homeTab) {
+    return [];
+  }
+
+  const filterHomeTabs = tabs.filter(tab => tab.id !== homeTab.id);
+
+  const fixedTabs = filterHomeTabs.filter(isFixedTab).sort((a, b) => a.fixedIndex! - b.fixedIndex!);
+
+  const remainTabs = filterHomeTabs.filter(tab => !isFixedTab(tab));
+
+  const allTabs = [homeTab, ...fixedTabs, ...remainTabs];
+
+  return updateTabsLabel(allTabs);
+}
+
+/**
+ * Is fixed tab
+ *
+ * @param tab
+ */
+function isFixedTab(tab: App.Global.Tab) {
+  return tab.fixedIndex !== undefined && tab.fixedIndex !== null;
+}
+
+/**
+ * Get tab id by route
+ *
+ * @param route
+ */
+export function getTabIdByRoute(route: App.Global.TabRoute) {
+  const { path, query = {}, meta } = route;
+
+  let id = path;
+
+  if (meta.multiTab) {
+    const queryKeys = Object.keys(query).sort();
+    const qs = queryKeys.map(key => `${key}=${query[key]}`).join('&');
+
+    id = `${path}?${qs}`;
+  }
+
+  return id;
+}
+
+/**
+ * Get tab by route
+ *
+ * @param route
+ */
+export function getTabByRoute(route: App.Global.TabRoute) {
+  const { name, path, fullPath = path, meta } = route;
+
+  const { title, i18nKey, fixedIndexInTab } = meta;
+
+  // Get icon and localIcon from getRouteIcons function
+  const { icon, localIcon } = getRouteIcons(route);
+
+  const label = i18nKey ? $t(i18nKey) : title;
+
+  const tab: App.Global.Tab = {
+    id: getTabIdByRoute(route),
+    label,
+    routeKey: name as LastLevelRouteKey,
+    routePath: path as RouteMap[LastLevelRouteKey],
+    fullPath,
+    fixedIndex: fixedIndexInTab,
+    icon,
+    localIcon,
+    i18nKey
+  };
+
+  return tab;
+}
+
+/**
+ * The vue router will automatically merge the meta of all matched items, and the icons here may be affected by other
+ * matching items, so they need to be processed separately
+ *
+ * @param route
+ */
+export function getRouteIcons(route: App.Global.TabRoute) {
+  // Set default value for icon at the beginning
+  let icon: string = route?.meta?.icon || import.meta.env.VITE_MENU_ICON;
+  let localIcon: string | undefined = route?.meta?.localIcon;
+
+  // Route.matched only appears when there are multiple matches,so check if route.matched exists
+  if (route.matched) {
+    // Find the meta of the current route from matched
+    const currentRoute = route.matched.find(r => r.name === route.name);
+    // If icon exists in currentRoute.meta, it will overwrite the default value
+    icon = currentRoute?.meta?.icon || icon;
+    localIcon = currentRoute?.meta?.localIcon;
+  }
+
+  return { icon, localIcon };
+}
+
+/**
+ * Get default home tab
+ *
+ * @param router
+ * @param homeRouteName routeHome in useRouteStore
+ */
+export function getDefaultHomeTab(router: Router, homeRouteName: LastLevelRouteKey) {
+  const homeRoutePath = getRoutePath(homeRouteName);
+  const i18nLabel = $t(`route.${homeRouteName}`);
+
+  let homeTab: App.Global.Tab = {
+    id: getRoutePath(homeRouteName),
+    label: i18nLabel || homeRouteName,
+    routeKey: homeRouteName,
+    routePath: homeRoutePath,
+    fullPath: homeRoutePath
+  };
+
+  const routes = router.getRoutes();
+  const homeRoute = routes.find(route => route.name === homeRouteName);
+  if (homeRoute) {
+    homeTab = getTabByRoute(homeRoute);
+  }
+
+  return homeTab;
+}
+
+/**
+ * Is tab in tabs
+ *
+ * @param tab
+ * @param tabs
+ */
+export function isTabInTabs(tabId: string, tabs: App.Global.Tab[]) {
+  return tabs.some(tab => tab.id === tabId);
+}
+
+/**
+ * Filter tabs by id
+ *
+ * @param tabId
+ * @param tabs
+ */
+export function filterTabsById(tabId: string, tabs: App.Global.Tab[]) {
+  return tabs.filter(tab => tab.id !== tabId);
+}
+
+/**
+ * Filter tabs by ids
+ *
+ * @param tabIds
+ * @param tabs
+ */
+export function filterTabsByIds(tabIds: string[], tabs: App.Global.Tab[]) {
+  return tabs.filter(tab => !tabIds.includes(tab.id));
+}
+
+/**
+ * extract tabs by all routes
+ *
+ * @param router
+ * @param tabs
+ */
+export function extractTabsByAllRoutes(router: Router, tabs: App.Global.Tab[]) {
+  const routes = router.getRoutes();
+
+  const routeNames = routes.map(route => route.name);
+
+  return tabs.filter(tab => routeNames.includes(tab.routeKey));
+}
+
+/**
+ * Get fixed tabs
+ *
+ * @param tabs
+ */
+export function getFixedTabs(tabs: App.Global.Tab[]) {
+  return tabs.filter(isFixedTab);
+}
+
+/**
+ * Get fixed tab ids
+ *
+ * @param tabs
+ */
+export function getFixedTabIds(tabs: App.Global.Tab[]) {
+  const fixedTabs = getFixedTabs(tabs);
+
+  return fixedTabs.map(tab => tab.id);
+}
+
+/**
+ * Reorder fixed tabs fixedIndex
+ *
+ * @param tabs
+ */
+export function reorderFixedTabs(tabs: App.Global.Tab[]) {
+  const fixedTabs = getFixedTabs(tabs);
+  fixedTabs.forEach((t, i) => {
+    t.fixedIndex = i;
+  });
+}
+
+/**
+ * Update tabs label
+ *
+ * @param tabs
+ */
+function updateTabsLabel(tabs: App.Global.Tab[]) {
+  const updated = tabs.map(tab => ({
+    ...tab,
+    label: tab.newLabel || tab.oldLabel || tab.label
+  }));
+
+  return updated;
+}
+
+/**
+ * Update tab by i18n key
+ *
+ * @param tab
+ */
+export function updateTabByI18nKey(tab: App.Global.Tab) {
+  const { i18nKey, label } = tab;
+
+  return {
+    ...tab,
+    label: i18nKey ? $t(i18nKey) : label
+  };
+}
+
+/**
+ * Update tabs by i18n key
+ *
+ * @param tabs
+ */
+export function updateTabsByI18nKey(tabs: App.Global.Tab[]) {
+  return tabs.map(tab => updateTabByI18nKey(tab));
+}
+
+/**
+ * find tab by route name
+ *
+ * @param name
+ * @param tabs
+ */
+export function findTabByRouteName(name: RouteKey, tabs: App.Global.Tab[]) {
+  const routePath = getRoutePath(name);
+
+  const tabId = routePath;
+  const multiTabId = `${routePath}?`;
+
+  return tabs.find(tab => tab.id === tabId || tab.id.startsWith(multiTabId));
+}

src/store/modules/theme/index.ts

@@ -0,0 +1,302 @@
+import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
+import type { Ref } from 'vue';
+import { useDateFormat, useEventListener, useNow, usePreferredColorScheme } from '@vueuse/core';
+import { defineStore } from 'pinia';
+import { getPaletteColorByNumber } from '@sa/color';
+import { localStg } from '@/utils/storage';
+import { SetupStoreId } from '@/enum';
+import { useAuthStore } from '../auth';
+import {
+  addThemeVarsToGlobal,
+  createThemeToken,
+  getNaiveTheme,
+  initThemeSettings,
+  toggleAuxiliaryColorModes,
+  toggleCssDarkMode
+} from './shared';
+
+/** Theme store */
+export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
+  const scope = effectScope();
+  const osTheme = usePreferredColorScheme();
+  const authStore = useAuthStore();
+
+  /** Theme settings */
+  const settings: Ref<App.Theme.ThemeSetting> = ref(initThemeSettings());
+
+  /** Optional NaiveUI theme overrides from preset */
+  const naiveThemeOverrides: Ref<App.Theme.NaiveUIThemeOverride | undefined> = ref(undefined);
+
+  /** Watermark time instance with controls */
+  const { now: watermarkTime, pause: pauseWatermarkTime, resume: resumeWatermarkTime } = useNow({ controls: true });
+
+  /** Dark mode */
+  const darkMode = computed(() => {
+    if (settings.value.themeScheme === 'auto') {
+      return osTheme.value === 'dark';
+    }
+    return settings.value.themeScheme === 'dark';
+  });
+
+  /** grayscale mode */
+  const grayscaleMode = computed(() => settings.value.grayscale);
+
+  /** colourWeakness mode */
+  const colourWeaknessMode = computed(() => settings.value.colourWeakness);
+
+  /** Theme colors */
+  const themeColors = computed(() => {
+    const { themeColor, otherColor, isInfoFollowPrimary } = settings.value;
+    const colors: App.Theme.ThemeColor = {
+      primary: themeColor,
+      ...otherColor,
+      info: isInfoFollowPrimary ? themeColor : otherColor.info
+    };
+    return colors;
+  });
+
+  /** Naive theme */
+  const naiveTheme = computed(() => getNaiveTheme(themeColors.value, settings.value, naiveThemeOverrides.value));
+
+  /**
+   * Settings json
+   *
+   * It is for copy settings
+   */
+  const settingsJson = computed(() => JSON.stringify(settings.value));
+
+  /** Watermark time date formatter */
+  const formattedWatermarkTime = computed(() => {
+    const { watermark } = settings.value;
+    const date = useDateFormat(watermarkTime, watermark.timeFormat);
+    return date.value;
+  });
+
+  /** Watermark content */
+  const watermarkContent = computed(() => {
+    const { watermark } = settings.value;
+
+    if (watermark.enableUserName && authStore.userInfo.username) {
+      return authStore.userInfo.username;
+    }
+
+    if (watermark.enableTime) {
+      return formattedWatermarkTime.value;
+    }
+
+    return watermark.text;
+  });
+
+  /** Reset store */
+  function resetStore() {
+    const themeStore = useThemeStore();
+
+    themeStore.$reset();
+  }
+
+  /**
+   * Set theme scheme
+   *
+   * @param themeScheme
+   */
+  function setThemeScheme(themeScheme: UnionKey.ThemeScheme) {
+    settings.value.themeScheme = themeScheme;
+  }
+
+  /**
+   * Set grayscale value
+   *
+   * @param isGrayscale
+   */
+  function setGrayscale(isGrayscale: boolean) {
+    settings.value.grayscale = isGrayscale;
+  }
+
+  /**
+   * Set colourWeakness value
+   *
+   * @param isColourWeakness
+   */
+  function setColourWeakness(isColourWeakness: boolean) {
+    settings.value.colourWeakness = isColourWeakness;
+  }
+
+  /** Toggle theme scheme */
+  function toggleThemeScheme() {
+    const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
+
+    const index = themeSchemes.findIndex(item => item === settings.value.themeScheme);
+
+    const nextIndex = index === themeSchemes.length - 1 ? 0 : index + 1;
+
+    const nextThemeScheme = themeSchemes[nextIndex];
+
+    setThemeScheme(nextThemeScheme);
+  }
+
+  /**
+   * Update theme colors
+   *
+   * @param key Theme color key
+   * @param color Theme color
+   */
+  function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
+    let colorValue = color;
+
+    if (settings.value.recommendColor) {
+      // get a color palette by provided color and color name, and use the suitable color
+
+      colorValue = getPaletteColorByNumber(color, 500, true);
+    }
+
+    if (key === 'primary') {
+      settings.value.themeColor = colorValue;
+    } else {
+      settings.value.otherColor[key] = colorValue;
+    }
+  }
+
+  /**
+   * Set theme layout
+   *
+   * @param mode Theme layout mode
+   */
+  function setThemeLayout(mode: UnionKey.ThemeLayoutMode) {
+    settings.value.layout.mode = mode;
+  }
+
+  /** Setup theme vars to global */
+  function setupThemeVarsToGlobal() {
+    const { themeTokens, darkThemeTokens } = createThemeToken(
+      themeColors.value,
+      settings.value.tokens,
+      settings.value.recommendColor
+    );
+    addThemeVarsToGlobal(themeTokens, darkThemeTokens);
+  }
+
+  /**
+   * Set watermark enable user name
+   *
+   * @param enable Whether to enable user name watermark
+   */
+  function setWatermarkEnableUserName(enable: boolean) {
+    settings.value.watermark.enableUserName = enable;
+
+    if (enable) {
+      settings.value.watermark.enableTime = false;
+    }
+  }
+
+  /**
+   * Set watermark enable time
+   *
+   * @param enable Whether to enable time watermark
+   */
+  function setWatermarkEnableTime(enable: boolean) {
+    settings.value.watermark.enableTime = enable;
+
+    if (enable) {
+      settings.value.watermark.enableUserName = false;
+    }
+  }
+
+  /**
+   * Set NaiveUI theme overrides
+   *
+   * @param overrides NaiveUI theme overrides or undefined to clear
+   */
+  function setNaiveThemeOverrides(overrides?: App.Theme.NaiveUIThemeOverride) {
+    naiveThemeOverrides.value = overrides;
+  }
+
+  /** Only run timer when watermark is visible and time display is enabled */
+  function updateWatermarkTimer() {
+    const { watermark } = settings.value;
+    const shouldRunTimer = watermark.visible && watermark.enableTime;
+
+    if (shouldRunTimer) {
+      resumeWatermarkTime();
+    } else {
+      pauseWatermarkTime();
+    }
+  }
+
+  /** Cache theme settings */
+  function cacheThemeSettings() {
+    const isProd = import.meta.env.PROD;
+
+    if (!isProd) return;
+
+    localStg.set('themeSettings', settings.value);
+  }
+
+  // cache theme settings when page is closed or refreshed
+  useEventListener(window, 'beforeunload', () => {
+    cacheThemeSettings();
+  });
+
+  // watch store
+  scope.run(() => {
+    // watch dark mode
+    watch(
+      darkMode,
+      val => {
+        toggleCssDarkMode(val);
+        localStg.set('darkMode', val);
+      },
+      { immediate: true }
+    );
+
+    watch(
+      [grayscaleMode, colourWeaknessMode],
+      val => {
+        toggleAuxiliaryColorModes(val[0], val[1]);
+      },
+      { immediate: true }
+    );
+
+    // themeColors change, update css vars and storage theme color
+    watch(
+      themeColors,
+      val => {
+        setupThemeVarsToGlobal();
+        localStg.set('themeColor', val.primary);
+      },
+      { immediate: true }
+    );
+
+    // watch watermark settings to control timer
+    watch(
+      () => [settings.value.watermark.visible, settings.value.watermark.enableTime],
+      () => {
+        updateWatermarkTimer();
+      },
+      { immediate: true }
+    );
+  });
+
+  /** On scope dispose */
+  onScopeDispose(() => {
+    scope.stop();
+  });
+
+  return {
+    ...toRefs(settings.value),
+    darkMode,
+    themeColors,
+    naiveTheme,
+    settingsJson,
+    watermarkContent,
+    setGrayscale,
+    setColourWeakness,
+    resetStore,
+    setThemeScheme,
+    toggleThemeScheme,
+    updateThemeColors,
+    setThemeLayout,
+    setWatermarkEnableUserName,
+    setWatermarkEnableTime,
+    setNaiveThemeOverrides
+  };
+});

src/store/modules/theme/shared.ts

@@ -0,0 +1,266 @@
+import type { GlobalThemeOverrides } from 'naive-ui';
+import { defu } from 'defu';
+import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
+import { DARK_CLASS } from '@/constants/app';
+import { toggleHtmlClass } from '@/utils/common';
+import { localStg } from '@/utils/storage';
+import { overrideThemeSettings, themeSettings } from '@/theme/settings';
+import { themeVars } from '@/theme/vars';
+
+/** Init theme settings */
+export function initThemeSettings() {
+  const isProd = import.meta.env.PROD;
+
+  // if it is development mode, the theme settings will not be cached, by update `themeSettings` in `src/theme/settings.ts` to update theme settings
+  if (!isProd) return themeSettings;
+
+  // if it is production mode, the theme settings will be cached in localStorage
+  // if want to update theme settings when publish new version, please update `overrideThemeSettings` in `src/theme/settings.ts`
+
+  const localSettings = localStg.get('themeSettings');
+
+  let settings = defu(localSettings, themeSettings);
+
+  const isOverride = localStg.get('overrideThemeFlag') === BUILD_TIME;
+
+  if (!isOverride) {
+    settings = defu(overrideThemeSettings, settings);
+
+    localStg.set('overrideThemeFlag', BUILD_TIME);
+  }
+
+  return settings;
+}
+
+/**
+ * create theme token css vars value by theme settings
+ *
+ * @param colors Theme colors
+ * @param tokens Theme setting tokens
+ * @param [recommended=false] Use recommended color. Default is `false`
+ */
+export function createThemeToken(
+  colors: App.Theme.ThemeColor,
+  tokens?: App.Theme.ThemeSetting['tokens'],
+  recommended = false
+) {
+  const paletteColors = createThemePaletteColors(colors, recommended);
+
+  const { light, dark } = tokens || themeSettings.tokens;
+
+  const themeTokens: App.Theme.ThemeTokenCSSVars = {
+    colors: {
+      ...paletteColors,
+      nprogress: paletteColors.primary,
+      ...light.colors
+    },
+    boxShadow: {
+      ...light.boxShadow
+    }
+  };
+
+  const darkThemeTokens: App.Theme.ThemeTokenCSSVars = {
+    colors: {
+      ...themeTokens.colors,
+      ...dark?.colors
+    },
+    boxShadow: {
+      ...themeTokens.boxShadow,
+      ...dark?.boxShadow
+    }
+  };
+
+  return {
+    themeTokens,
+    darkThemeTokens
+  };
+}
+
+/**
+ * Create theme palette colors
+ *
+ * @param colors Theme colors
+ * @param [recommended=false] Use recommended color. Default is `false`
+ */
+function createThemePaletteColors(colors: App.Theme.ThemeColor, recommended = false) {
+  const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
+  const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
+
+  colorKeys.forEach(key => {
+    const colorMap = getColorPalette(colors[key], recommended);
+
+    colorPaletteVar[key] = colorMap.get(500)!;
+
+    colorMap.forEach((hex, number) => {
+      colorPaletteVar[`${key}-${number}`] = hex;
+    });
+  });
+
+  return colorPaletteVar;
+}
+
+/**
+ * Get css var by tokens
+ *
+ * @param tokens Theme base tokens
+ */
+function getCssVarByTokens(tokens: App.Theme.BaseToken) {
+  const styles: string[] = [];
+
+  function removeVarPrefix(value: string) {
+    return value.replace('var(', '').replace(')', '');
+  }
+
+  function removeRgbPrefix(value: string) {
+    return value.replace('rgb(', '').replace(')', '');
+  }
+
+  for (const [key, tokenValues] of Object.entries(themeVars)) {
+    for (const [tokenKey, tokenValue] of Object.entries(tokenValues)) {
+      let cssVarsKey = removeVarPrefix(tokenValue);
+      let cssValue = tokens[key][tokenKey];
+
+      if (key === 'colors') {
+        cssVarsKey = removeRgbPrefix(cssVarsKey);
+        const { r, g, b } = getRgb(cssValue);
+        cssValue = `${r} ${g} ${b}`;
+      }
+
+      styles.push(`${cssVarsKey}: ${cssValue}`);
+    }
+  }
+
+  const styleStr = styles.join(';');
+
+  return styleStr;
+}
+
+/**
+ * Add theme vars to global
+ *
+ * @param tokens
+ */
+export function addThemeVarsToGlobal(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
+  const cssVarStr = getCssVarByTokens(tokens);
+  const darkCssVarStr = getCssVarByTokens(darkTokens);
+
+  const css = `
+    :root {
+      ${cssVarStr}
+    }
+  `;
+
+  const darkCss = `
+    html.${DARK_CLASS} {
+      ${darkCssVarStr}
+    }
+  `;
+
+  const styleId = 'theme-vars';
+
+  const style = document.querySelector(`#${styleId}`) || document.createElement('style');
+
+  style.id = styleId;
+
+  style.textContent = css + darkCss;
+
+  document.head.appendChild(style);
+}
+
+/**
+ * Toggle css dark mode
+ *
+ * @param darkMode Is dark mode
+ */
+export function toggleCssDarkMode(darkMode = false) {
+  const { add, remove } = toggleHtmlClass(DARK_CLASS);
+
+  if (darkMode) {
+    add();
+  } else {
+    remove();
+  }
+}
+
+/**
+ * Toggle auxiliary color modes
+ *
+ * @param grayscaleMode
+ * @param colourWeakness
+ */
+export function toggleAuxiliaryColorModes(grayscaleMode = false, colourWeakness = false) {
+  const htmlElement = document.documentElement;
+  htmlElement.style.filter = [grayscaleMode ? 'grayscale(100%)' : '', colourWeakness ? 'invert(80%)' : '']
+    .filter(Boolean)
+    .join(' ');
+}
+
+type NaiveColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active';
+type NaiveColorKey = `${App.Theme.ThemeColorKey}Color${NaiveColorScene}`;
+type NaiveThemeColor = Partial<Record<NaiveColorKey, string>>;
+interface NaiveColorAction {
+  scene: NaiveColorScene;
+  handler: (color: string) => string;
+}
+
+/**
+ * Get naive theme colors
+ *
+ * @param colors Theme colors
+ * @param [recommended=false] Use recommended color. Default is `false`
+ */
+function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false) {
+  const colorActions: NaiveColorAction[] = [
+    { scene: '', handler: color => color },
+    { scene: 'Suppl', handler: color => color },
+    { scene: 'Hover', handler: color => getPaletteColorByNumber(color, 500, recommended) },
+    { scene: 'Pressed', handler: color => getPaletteColorByNumber(color, 700, recommended) },
+    { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
+  ];
+
+  const themeColors: NaiveThemeColor = {};
+
+  const colorEntries = Object.entries(colors) as [App.Theme.ThemeColorKey, string][];
+
+  colorEntries.forEach(color => {
+    colorActions.forEach(action => {
+      const [colorType, colorValue] = color;
+      const colorKey: NaiveColorKey = `${colorType}Color${action.scene}`;
+      themeColors[colorKey] = action.handler(colorValue);
+    });
+  });
+
+  return themeColors;
+}
+
+/**
+ * Get naive theme
+ *
+ * @param colors Theme colors
+ * @param settings Theme settings object
+ * @param overrides Optional manual overrides from preset
+ */
+export function getNaiveTheme(
+  colors: App.Theme.ThemeColor,
+  settings: App.Theme.ThemeSetting,
+  overrides?: GlobalThemeOverrides
+) {
+  const { primary: colorLoading } = colors;
+
+  const theme: GlobalThemeOverrides = {
+    common: {
+      ...getNaiveThemeColors(colors, settings.recommendColor),
+      borderRadius: `${settings.themeRadius}px`
+    },
+    LoadingBar: {
+      colorLoading
+    },
+    Tag: {
+      borderRadius: `${settings.themeRadius}px`
+    }
+  };
+
+  // If there are overrides, merge them with priority
+  // overrides has higher priority than auto-generated theme
+  return overrides ? defu(overrides, theme) : theme;
+}

src/store/plugins/index.ts

@@ -0,0 +1,22 @@
+import type { PiniaPluginContext } from 'pinia';
+import { jsonClone } from '@sa/utils';
+import { SetupStoreId } from '@/enum';
+
+/**
+ * The plugin reset the state of the store which is written by setup syntax
+ *
+ * @param context
+ */
+export function resetSetupStore(context: PiniaPluginContext) {
+  const setupSyntaxIds = Object.values(SetupStoreId) as string[];
+
+  if (setupSyntaxIds.includes(context.store.$id)) {
+    const { $state } = context.store;
+
+    const defaultStore = jsonClone($state);
+
+    context.store.$reset = () => {
+      context.store.$patch(defaultStore);
+    };
+  }
+}