mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
style(projects): format code
This commit is contained in:
Soybean
@ -2,9 +2,7 @@ import type { App } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import { resetSetupStore } from './plugins';
|
||||
|
||||
/**
|
||||
* setup Vue store plugin pinia
|
||||
*/
|
||||
/** Setup Vue store plugin pinia */
|
||||
export function setupStore(app: App) {
|
||||
const store = createPinia();
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ref, watch, effectScope, onScopeDispose } from 'vue';
|
||||
import { effectScope, onScopeDispose, ref, watch } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { breakpointsTailwind, useBreakpoints, useTitle } from '@vueuse/core';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
@ -24,14 +24,13 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
|
||||
const { bool: siderCollapse, setBool: setSiderCollapse, toggle: toggleSiderCollapse } = useBoolean();
|
||||
const { bool: mixSiderFixed, setBool: setMixSiderFixed, toggle: toggleMixSiderFixed } = useBoolean();
|
||||
|
||||
/**
|
||||
* is mobile layout
|
||||
*/
|
||||
/** Is mobile layout */
|
||||
const isMobile = breakpoints.smaller('sm');
|
||||
|
||||
/**
|
||||
* reload page
|
||||
* @param duration duration time
|
||||
* Reload page
|
||||
*
|
||||
* @param duration Duration time
|
||||
*/
|
||||
async function reloadPage(duration = 0) {
|
||||
setReloadFlag(false);
|
||||
@ -64,9 +63,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
|
||||
localStg.set('lang', lang);
|
||||
}
|
||||
|
||||
/**
|
||||
* update document title by locale
|
||||
*/
|
||||
/** Update document title by locale */
|
||||
function updateDocumentTitleByLocale() {
|
||||
const { i18nKey, title } = router.currentRoute.value.meta;
|
||||
|
||||
@ -110,9 +107,7 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* on scope dispose
|
||||
*/
|
||||
/** On scope dispose */
|
||||
onScopeDispose(() => {
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { fetchLogin, fetchGetUserInfo } from '@/service/api';
|
||||
import { fetchGetUserInfo, fetchLogin } from '@/service/api';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { useRouteStore } from '../route';
|
||||
import { getToken, getUserInfo, clearAuthStorage } from './shared';
|
||||
import { $t } from '@/locales';
|
||||
import { useRouteStore } from '../route';
|
||||
import { clearAuthStorage, getToken, getUserInfo } from './shared';
|
||||
|
||||
export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
|
||||
const routeStore = useRouteStore();
|
||||
@ -18,14 +18,10 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
|
||||
|
||||
const userInfo: Api.Auth.UserInfo = reactive(getUserInfo());
|
||||
|
||||
/**
|
||||
* is login
|
||||
*/
|
||||
/** Is login */
|
||||
const isLogin = computed(() => Boolean(token.value));
|
||||
|
||||
/**
|
||||
* reset auth store
|
||||
*/
|
||||
/** Reset auth store */
|
||||
async function resetStore() {
|
||||
const authStore = useAuthStore();
|
||||
|
||||
@ -41,9 +37,10 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* login
|
||||
* @param userName user name
|
||||
* @param password password
|
||||
* Login
|
||||
*
|
||||
* @param userName User name
|
||||
* @param password Password
|
||||
*/
|
||||
async function login(userName: string, password: string) {
|
||||
startLoading();
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
import { localStg } from '@/utils/storage';
|
||||
|
||||
/**
|
||||
* get token
|
||||
*/
|
||||
/** Get token */
|
||||
export function getToken() {
|
||||
return localStg.get('token') || '';
|
||||
}
|
||||
|
||||
/**
|
||||
* get user info
|
||||
*/
|
||||
/** Get user info */
|
||||
export function getUserInfo() {
|
||||
const emptyInfo: Api.Auth.UserInfo = {
|
||||
userId: '',
|
||||
@ -21,9 +17,7 @@ export function getUserInfo() {
|
||||
return userInfo;
|
||||
}
|
||||
|
||||
/**
|
||||
* clear auth storage
|
||||
*/
|
||||
/** Clear auth storage */
|
||||
export function clearAuthStorage() {
|
||||
localStg.remove('token');
|
||||
localStg.remove('refreshToken');
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import type { ElegantConstRoute, CustomRoute, RouteKey, LastLevelRouteKey, RouteMap } from '@elegant-router/types';
|
||||
import type { CustomRoute, ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { router } from '@/router';
|
||||
import { createRoutes, getAuthVueRoutes, ROOT_ROUTE } from '@/router/routes';
|
||||
import { getRoutePath, getRouteName } from '@/router/elegant/transform';
|
||||
import { ROOT_ROUTE, createRoutes, getAuthVueRoutes } from '@/router/routes';
|
||||
import { getRouteName, getRoutePath } from '@/router/elegant/transform';
|
||||
import { fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
|
||||
import {
|
||||
filterAuthRoutesByRoles,
|
||||
getGlobalMenusByAuthRoutes,
|
||||
updateLocaleOfGlobalMenus,
|
||||
getCacheRouteNames,
|
||||
isRouteExistByRouteName,
|
||||
getSelectedMenuKeyPathByKey,
|
||||
getBreadcrumbsByRoute
|
||||
} from './shared';
|
||||
import { useAppStore } from '../app';
|
||||
import { useAuthStore } from '../auth';
|
||||
import { useTabStore } from '../tab';
|
||||
import {
|
||||
filterAuthRoutesByRoles,
|
||||
getBreadcrumbsByRoute,
|
||||
getCacheRouteNames,
|
||||
getGlobalMenusByAuthRoutes,
|
||||
getSelectedMenuKeyPathByKey,
|
||||
isRouteExistByRouteName,
|
||||
updateLocaleOfGlobalMenus
|
||||
} from './shared';
|
||||
|
||||
export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
const appStore = useAppStore();
|
||||
@ -29,52 +29,46 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
const removeRouteFns: (() => void)[] = [];
|
||||
|
||||
/**
|
||||
* auth route mode
|
||||
* @description 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"
|
||||
* 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
|
||||
*/
|
||||
/** Home route key */
|
||||
const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
|
||||
|
||||
/**
|
||||
* set route home
|
||||
* @param routeKey route key
|
||||
* Set route home
|
||||
*
|
||||
* @param routeKey Route key
|
||||
*/
|
||||
function setRouteHome(routeKey: LastLevelRouteKey) {
|
||||
routeHome.value = routeKey;
|
||||
}
|
||||
|
||||
/**
|
||||
* global menus
|
||||
*/
|
||||
/** Global menus */
|
||||
const menus = ref<App.Global.Menu[]>([]);
|
||||
|
||||
/**
|
||||
* get global menus
|
||||
*/
|
||||
/** Get global menus */
|
||||
function getGlobalMenus(routes: ElegantConstRoute[]) {
|
||||
menus.value = getGlobalMenusByAuthRoutes(routes);
|
||||
}
|
||||
|
||||
/**
|
||||
* update global menus by locale
|
||||
*/
|
||||
/** Update global menus by locale */
|
||||
function updateGlobalMenusByLocale() {
|
||||
menus.value = updateLocaleOfGlobalMenus(menus.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* cache routes
|
||||
*/
|
||||
/** Cache routes */
|
||||
const cacheRoutes = ref<RouteKey[]>([]);
|
||||
|
||||
/**
|
||||
* get cache routes
|
||||
* @param routes vue routes
|
||||
* Get cache routes
|
||||
*
|
||||
* @param routes Vue routes
|
||||
*/
|
||||
function getCacheRoutes(routes: RouteRecordRaw[]) {
|
||||
const { constantVueRoutes } = createRoutes();
|
||||
@ -83,7 +77,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* add cache routes
|
||||
* Add cache routes
|
||||
*
|
||||
* @param routeKey
|
||||
*/
|
||||
function addCacheRoutes(routeKey: RouteKey) {
|
||||
@ -93,7 +88,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* remove cache routes
|
||||
* Remove cache routes
|
||||
*
|
||||
* @param routeKey
|
||||
*/
|
||||
function removeCacheRoutes(routeKey: RouteKey) {
|
||||
@ -105,7 +101,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* re-cache routes by route key
|
||||
* Re-cache routes by route key
|
||||
*
|
||||
* @param routeKey
|
||||
*/
|
||||
async function reCacheRoutesByKey(routeKey: RouteKey) {
|
||||
@ -117,7 +114,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* re-cache routes by route keys
|
||||
* Re-cache routes by route keys
|
||||
*
|
||||
* @param routeKeys
|
||||
*/
|
||||
async function reCacheRoutesByKeys(routeKeys: RouteKey[]) {
|
||||
@ -126,14 +124,10 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* global breadcrumbs
|
||||
*/
|
||||
/** Global breadcrumbs */
|
||||
const breadcrumbs = computed(() => getBreadcrumbsByRoute(router.currentRoute.value, menus.value));
|
||||
|
||||
/**
|
||||
* reset store
|
||||
*/
|
||||
/** Reset store */
|
||||
async function resetStore() {
|
||||
const routeStore = useRouteStore();
|
||||
|
||||
@ -142,17 +136,13 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
resetVueRoutes();
|
||||
}
|
||||
|
||||
/**
|
||||
* reset vue routes
|
||||
*/
|
||||
/** Reset vue routes */
|
||||
function resetVueRoutes() {
|
||||
removeRouteFns.forEach(fn => fn());
|
||||
removeRouteFns.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* init auth route
|
||||
*/
|
||||
/** Init auth route */
|
||||
async function initAuthRoute() {
|
||||
if (authRouteMode.value === 'static') {
|
||||
await initStaticAuthRoute();
|
||||
@ -163,9 +153,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
tabStore.initHomeTab(router);
|
||||
}
|
||||
|
||||
/**
|
||||
* init static auth route
|
||||
*/
|
||||
/** Init static auth route */
|
||||
async function initStaticAuthRoute() {
|
||||
const { authRoutes } = createRoutes();
|
||||
|
||||
@ -176,9 +164,7 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* init dynamic auth route
|
||||
*/
|
||||
/** Init dynamic auth route */
|
||||
async function initDynamicAuthRoute() {
|
||||
const {
|
||||
data: { routes, home }
|
||||
@ -194,8 +180,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* handle routes
|
||||
* @param routes auth routes
|
||||
* Handle routes
|
||||
*
|
||||
* @param routes Auth routes
|
||||
*/
|
||||
function handleAuthRoutes(routes: ElegantConstRoute[]) {
|
||||
const vueRoutes = getAuthVueRoutes(routes);
|
||||
@ -208,8 +195,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* add routes to vue router
|
||||
* @param routes vue routes
|
||||
* Add routes to vue router
|
||||
*
|
||||
* @param routes Vue routes
|
||||
*/
|
||||
function addRoutesToVueRouter(routes: RouteRecordRaw[]) {
|
||||
routes.forEach(route => {
|
||||
@ -219,7 +207,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* add remove route fn
|
||||
* Add remove route fn
|
||||
*
|
||||
* @param fn
|
||||
*/
|
||||
function addRemoveRouteFn(fn: () => void) {
|
||||
@ -227,8 +216,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* update root route redirect when auth route mode is dynamic
|
||||
* @param redirectKey redirect route key
|
||||
* Update root route redirect when auth route mode is dynamic
|
||||
*
|
||||
* @param redirectKey Redirect route key
|
||||
*/
|
||||
function handleUpdateRootRouteRedirect(redirectKey: LastLevelRouteKey) {
|
||||
const redirect = getRoutePath(redirectKey);
|
||||
@ -245,8 +235,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* get is auth route exist
|
||||
* @param routePath route path
|
||||
* Get is auth route exist
|
||||
*
|
||||
* @param routePath Route path
|
||||
*/
|
||||
async function getIsAuthRouteExist(routePath: RouteMap[RouteKey]) {
|
||||
const routeName = getRouteName(routePath);
|
||||
@ -267,8 +258,9 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* get selected menu key path
|
||||
* @param selectedKey selected menu key
|
||||
* Get selected menu key path
|
||||
*
|
||||
* @param selectedKey Selected menu key
|
||||
*/
|
||||
function getSelectedMenuKeyPath(selectedKey: string) {
|
||||
return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import type { RouteRecordRaw, _RouteRecordBase, RouteLocationNormalizedLoaded } from 'vue-router';
|
||||
import type { ElegantConstRoute, RouteKey, RouteMap, LastLevelRouteKey } from '@elegant-router/types';
|
||||
import type { RouteLocationNormalizedLoaded, RouteRecordRaw, _RouteRecordBase } from 'vue-router';
|
||||
import type { ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
|
||||
import { useSvgIconRender } from '@sa/hooks';
|
||||
import { $t } from '@/locales';
|
||||
import SvgIcon from '@/components/custom/svg-icon.vue';
|
||||
|
||||
/**
|
||||
* filter auth routes by roles
|
||||
* @param routes auth routes
|
||||
* @param roles roles
|
||||
* Filter auth routes by roles
|
||||
*
|
||||
* @param routes Auth routes
|
||||
* @param roles Roles
|
||||
*/
|
||||
export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: string[]) {
|
||||
const SUPER_ROLE = 'R_SUPER';
|
||||
@ -20,9 +21,10 @@ export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: stri
|
||||
}
|
||||
|
||||
/**
|
||||
* filter auth route by roles
|
||||
* @param route auth route
|
||||
* @param roles roles
|
||||
* Filter auth route by roles
|
||||
*
|
||||
* @param route Auth route
|
||||
* @param roles Roles
|
||||
*/
|
||||
function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
|
||||
const routeRoles = (route.meta && route.meta.roles) || [];
|
||||
@ -43,8 +45,9 @@ function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get global menus by auth routes
|
||||
* @param routes auth routes
|
||||
* Get global menus by auth routes
|
||||
*
|
||||
* @param routes Auth routes
|
||||
*/
|
||||
export function getGlobalMenusByAuthRoutes(routes: ElegantConstRoute[]) {
|
||||
const menus: App.Global.Menu[] = [];
|
||||
@ -65,7 +68,8 @@ export function getGlobalMenusByAuthRoutes(routes: ElegantConstRoute[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* update locale of global menus
|
||||
* Update locale of global menus
|
||||
*
|
||||
* @param menus
|
||||
*/
|
||||
export function updateLocaleOfGlobalMenus(menus: App.Global.Menu[]) {
|
||||
@ -92,7 +96,8 @@ export function updateLocaleOfGlobalMenus(menus: App.Global.Menu[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get global menu by route
|
||||
* Get global menu by route
|
||||
*
|
||||
* @param route
|
||||
*/
|
||||
function getGlobalMenuByBaseRoute(route: RouteLocationNormalizedLoaded | ElegantConstRoute) {
|
||||
@ -116,8 +121,9 @@ function getGlobalMenuByBaseRoute(route: RouteLocationNormalizedLoaded | Elegant
|
||||
}
|
||||
|
||||
/**
|
||||
* get cache route names
|
||||
* @param routes vue routes (two levels)
|
||||
* Get cache route names
|
||||
*
|
||||
* @param routes Vue routes (two levels)
|
||||
*/
|
||||
export function getCacheRouteNames(routes: RouteRecordRaw[]) {
|
||||
const cacheNames: LastLevelRouteKey[] = [];
|
||||
@ -135,7 +141,8 @@ export function getCacheRouteNames(routes: RouteRecordRaw[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* is route exist by route name
|
||||
* Is route exist by route name
|
||||
*
|
||||
* @param routeName
|
||||
* @param routes
|
||||
*/
|
||||
@ -144,7 +151,8 @@ export function isRouteExistByRouteName(routeName: RouteKey, routes: ElegantCons
|
||||
}
|
||||
|
||||
/**
|
||||
* recursive get is route exist by route name
|
||||
* Recursive get is route exist by route name
|
||||
*
|
||||
* @param route
|
||||
* @param routeName
|
||||
*/
|
||||
@ -163,7 +171,8 @@ function recursiveGetIsRouteExistByRouteName(route: ElegantConstRoute, routeName
|
||||
}
|
||||
|
||||
/**
|
||||
* get selected menu key path
|
||||
* Get selected menu key path
|
||||
*
|
||||
* @param selectedKey
|
||||
* @param menus
|
||||
*/
|
||||
@ -186,9 +195,10 @@ export function getSelectedMenuKeyPathByKey(selectedKey: string, menus: App.Glob
|
||||
}
|
||||
|
||||
/**
|
||||
* find menu path
|
||||
* @param targetKey target menu key
|
||||
* @param menu menu
|
||||
* Find menu path
|
||||
*
|
||||
* @param targetKey Target menu key
|
||||
* @param menu Menu
|
||||
*/
|
||||
function findMenuPath(targetKey: string, menu: App.Global.Menu): string[] | null {
|
||||
const path: string[] = [];
|
||||
@ -221,7 +231,8 @@ function findMenuPath(targetKey: string, menu: App.Global.Menu): string[] | null
|
||||
}
|
||||
|
||||
/**
|
||||
* transform menu to breadcrumb
|
||||
* Transform menu to breadcrumb
|
||||
*
|
||||
* @param menu
|
||||
*/
|
||||
function transformMenuToBreadcrumb(menu: App.Global.Menu) {
|
||||
@ -239,7 +250,8 @@ function transformMenuToBreadcrumb(menu: App.Global.Menu) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get breadcrumbs by route
|
||||
* Get breadcrumbs by route
|
||||
*
|
||||
* @param route
|
||||
* @param menus
|
||||
*/
|
||||
|
||||
@ -3,64 +3,59 @@ import type { Router } from 'vue-router';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import {
|
||||
getAllTabs,
|
||||
getDefaultHomeTab,
|
||||
getTabByRoute,
|
||||
isTabInTabs,
|
||||
filterTabsById,
|
||||
getFixedTabIds,
|
||||
filterTabsByIds,
|
||||
updateTabsByI18nKey,
|
||||
updateTabByI18nKey
|
||||
} from './shared';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { useThemeStore } from '../theme';
|
||||
import {
|
||||
filterTabsById,
|
||||
filterTabsByIds,
|
||||
getAllTabs,
|
||||
getDefaultHomeTab,
|
||||
getFixedTabIds,
|
||||
getTabByRoute,
|
||||
isTabInTabs,
|
||||
updateTabByI18nKey,
|
||||
updateTabsByI18nKey
|
||||
} from './shared';
|
||||
|
||||
export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPush } = useRouterPush(false);
|
||||
|
||||
/**
|
||||
* tabs
|
||||
*/
|
||||
/** Tabs */
|
||||
const tabs = ref<App.Global.Tab[]>([]);
|
||||
|
||||
/**
|
||||
* get active tab
|
||||
*/
|
||||
/** Get active tab */
|
||||
const homeTab = ref<App.Global.Tab>();
|
||||
|
||||
/**
|
||||
* init home tab
|
||||
* @param router router instance
|
||||
* Init home tab
|
||||
*
|
||||
* @param router Router instance
|
||||
*/
|
||||
function initHomeTab(router: Router) {
|
||||
homeTab.value = getDefaultHomeTab(router);
|
||||
}
|
||||
|
||||
/**
|
||||
* get all tabs
|
||||
*/
|
||||
/** Get all tabs */
|
||||
const allTabs = computed(() => getAllTabs(tabs.value, homeTab.value));
|
||||
|
||||
/**
|
||||
* active tab id
|
||||
*/
|
||||
/** Active tab id */
|
||||
const activeTabId = ref<string>('');
|
||||
|
||||
/**
|
||||
* set active tab id
|
||||
* @param id tab id
|
||||
* Set active tab id
|
||||
*
|
||||
* @param id Tab id
|
||||
*/
|
||||
function setActiveTabId(id: string) {
|
||||
activeTabId.value = id;
|
||||
}
|
||||
|
||||
/**
|
||||
* init tab store
|
||||
* @param currentRoute current route
|
||||
* Init tab store
|
||||
*
|
||||
* @param currentRoute Current route
|
||||
*/
|
||||
function initTabStore(currentRoute: App.Global.TabRoute) {
|
||||
const storageTabs = localStg.get('globalTabs');
|
||||
@ -73,9 +68,10 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* add tab
|
||||
* @param route tab route
|
||||
* @param active whether to activate the added tab
|
||||
* 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);
|
||||
@ -92,8 +88,9 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* remove tab
|
||||
* @param tabId tab id
|
||||
* Remove tab
|
||||
*
|
||||
* @param tabId Tab id
|
||||
*/
|
||||
async function removeTab(tabId: string) {
|
||||
const isRemoveActiveTab = activeTabId.value === tabId;
|
||||
@ -117,8 +114,9 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* clear tabs
|
||||
* @param excludes exclude tab ids
|
||||
* Clear tabs
|
||||
*
|
||||
* @param excludes Exclude tab ids
|
||||
*/
|
||||
async function clearTabs(excludes: string[] = []) {
|
||||
const remainTabIds = [...getFixedTabIds(tabs.value), ...excludes];
|
||||
@ -143,7 +141,8 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* switch route by tab
|
||||
* Switch route by tab
|
||||
*
|
||||
* @param tab
|
||||
*/
|
||||
async function switchRouteByTab(tab: App.Global.Tab) {
|
||||
@ -154,7 +153,8 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* clear left tabs
|
||||
* Clear left tabs
|
||||
*
|
||||
* @param tabId
|
||||
*/
|
||||
async function clearLeftTabs(tabId: string) {
|
||||
@ -167,7 +167,8 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* clear right tabs
|
||||
* Clear right tabs
|
||||
*
|
||||
* @param tabId
|
||||
*/
|
||||
async function clearRightTabs(tabId: string) {
|
||||
@ -180,10 +181,11 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* set new label of tab
|
||||
* @param label new tab label
|
||||
* @param tabId tab id
|
||||
* 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;
|
||||
@ -195,9 +197,10 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* reset tab label
|
||||
* @param tabId tab id
|
||||
* Reset tab label
|
||||
*
|
||||
* @default activeTabId
|
||||
* @param tabId Tab id
|
||||
*/
|
||||
function resetTabLabel(tabId?: string) {
|
||||
const id = tabId || activeTabId.value;
|
||||
@ -209,7 +212,8 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* is tab retain
|
||||
* Is tab retain
|
||||
*
|
||||
* @param tabId
|
||||
*/
|
||||
function isTabRetain(tabId: string) {
|
||||
@ -220,9 +224,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
return fixedTabIds.includes(tabId);
|
||||
}
|
||||
|
||||
/**
|
||||
* update tabs by locale
|
||||
*/
|
||||
/** Update tabs by locale */
|
||||
function updateTabsByLocale() {
|
||||
tabs.value = updateTabsByI18nKey(tabs.value);
|
||||
|
||||
@ -231,9 +233,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* cache tabs
|
||||
*/
|
||||
/** Cache tabs */
|
||||
function cacheTabs() {
|
||||
if (!themeStore.tab.cache) return;
|
||||
|
||||
@ -246,9 +246,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
});
|
||||
|
||||
return {
|
||||
/**
|
||||
* all tabs
|
||||
*/
|
||||
/** All tabs */
|
||||
tabs: allTabs,
|
||||
activeTabId,
|
||||
initHomeTab,
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import type { Router } from 'vue-router';
|
||||
import type { RouteMap, LastLevelRouteKey } from '@elegant-router/types';
|
||||
import type { LastLevelRouteKey, 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
|
||||
* Get all tabs
|
||||
*
|
||||
* @param tabs Tabs
|
||||
* @param homeTab Home tab
|
||||
*/
|
||||
export function getAllTabs(tabs: App.Global.Tab[], homeTab?: App.Global.Tab) {
|
||||
if (!homeTab) {
|
||||
@ -23,7 +24,8 @@ export function getAllTabs(tabs: App.Global.Tab[], homeTab?: App.Global.Tab) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get tab id by route
|
||||
* Get tab id by route
|
||||
*
|
||||
* @param route
|
||||
*/
|
||||
export function getTabIdByRoute(route: App.Global.TabRoute) {
|
||||
@ -42,7 +44,8 @@ export function getTabIdByRoute(route: App.Global.TabRoute) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get tab by route
|
||||
* Get tab by route
|
||||
*
|
||||
* @param route
|
||||
*/
|
||||
export function getTabByRoute(route: App.Global.TabRoute) {
|
||||
@ -67,7 +70,8 @@ export function getTabByRoute(route: App.Global.TabRoute) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get default home tab
|
||||
* Get default home tab
|
||||
*
|
||||
* @param router
|
||||
*/
|
||||
export function getDefaultHomeTab(router: Router) {
|
||||
@ -93,7 +97,8 @@ export function getDefaultHomeTab(router: Router) {
|
||||
}
|
||||
|
||||
/**
|
||||
* is tab in tabs
|
||||
* Is tab in tabs
|
||||
*
|
||||
* @param tab
|
||||
* @param tabs
|
||||
*/
|
||||
@ -102,7 +107,8 @@ export function isTabInTabs(tabId: string, tabs: App.Global.Tab[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* filter tabs by id
|
||||
* Filter tabs by id
|
||||
*
|
||||
* @param tabId
|
||||
* @param tabs
|
||||
*/
|
||||
@ -111,7 +117,8 @@ export function filterTabsById(tabId: string, tabs: App.Global.Tab[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* filter tabs by ids
|
||||
* Filter tabs by ids
|
||||
*
|
||||
* @param tabIds
|
||||
* @param tabs
|
||||
*/
|
||||
@ -120,7 +127,8 @@ export function filterTabsByIds(tabIds: string[], tabs: App.Global.Tab[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get fixed tabs
|
||||
* Get fixed tabs
|
||||
*
|
||||
* @param tabs
|
||||
*/
|
||||
export function getFixedTabs(tabs: App.Global.Tab[]) {
|
||||
@ -128,7 +136,8 @@ export function getFixedTabs(tabs: App.Global.Tab[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get fixed tab ids
|
||||
* Get fixed tab ids
|
||||
*
|
||||
* @param tabs
|
||||
*/
|
||||
export function getFixedTabIds(tabs: App.Global.Tab[]) {
|
||||
@ -138,7 +147,8 @@ export function getFixedTabIds(tabs: App.Global.Tab[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* update tabs label
|
||||
* Update tabs label
|
||||
*
|
||||
* @param tabs
|
||||
*/
|
||||
function updateTabsLabel(tabs: App.Global.Tab[]) {
|
||||
@ -149,7 +159,8 @@ function updateTabsLabel(tabs: App.Global.Tab[]) {
|
||||
}
|
||||
|
||||
/**
|
||||
* update tab by i18n key
|
||||
* Update tab by i18n key
|
||||
*
|
||||
* @param tab
|
||||
*/
|
||||
export function updateTabByI18nKey(tab: App.Global.Tab) {
|
||||
@ -162,7 +173,8 @@ export function updateTabByI18nKey(tab: App.Global.Tab) {
|
||||
}
|
||||
|
||||
/**
|
||||
* update tabs by i18n key
|
||||
* Update tabs by i18n key
|
||||
*
|
||||
* @param tabs
|
||||
*/
|
||||
export function updateTabsByI18nKey(tabs: App.Global.Tab[]) {
|
||||
|
||||
@ -1,26 +1,20 @@
|
||||
import { ref, computed, effectScope, onScopeDispose, watch, toRefs } from 'vue';
|
||||
import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { usePreferredColorScheme, useEventListener } from '@vueuse/core';
|
||||
import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { createThemeToken, initThemeSettings, addThemeVarsToHtml, toggleCssDarkMode, getNaiveTheme } from './shared';
|
||||
import { addThemeVarsToHtml, createThemeToken, getNaiveTheme, initThemeSettings, toggleCssDarkMode } from './shared';
|
||||
|
||||
/**
|
||||
* theme store
|
||||
*/
|
||||
/** Theme store */
|
||||
export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
const scope = effectScope();
|
||||
const osTheme = usePreferredColorScheme();
|
||||
|
||||
/**
|
||||
* theme settings
|
||||
*/
|
||||
/** Theme settings */
|
||||
const settings: Ref<App.Theme.ThemeSetting> = ref(initThemeSettings());
|
||||
|
||||
/**
|
||||
* dark mode
|
||||
*/
|
||||
/** Dark mode */
|
||||
const darkMode = computed(() => {
|
||||
if (settings.value.themeScheme === 'auto') {
|
||||
return osTheme.value === 'dark';
|
||||
@ -28,9 +22,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
return settings.value.themeScheme === 'dark';
|
||||
});
|
||||
|
||||
/**
|
||||
* theme colors
|
||||
*/
|
||||
/** Theme colors */
|
||||
const themeColors = computed(() => {
|
||||
const { themeColor, otherColor, isInfoFollowPrimary } = settings.value;
|
||||
const colors: App.Theme.ThemeColor = {
|
||||
@ -41,20 +33,17 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
return colors;
|
||||
});
|
||||
|
||||
/**
|
||||
* naive theme
|
||||
*/
|
||||
/** Naive theme */
|
||||
const naiveTheme = computed(() => getNaiveTheme(themeColors.value));
|
||||
|
||||
/**
|
||||
* settings json
|
||||
* @description it is for copy settings
|
||||
* Settings json
|
||||
*
|
||||
* It is for copy settings
|
||||
*/
|
||||
const settingsJson = computed(() => JSON.stringify(settings.value));
|
||||
|
||||
/**
|
||||
* reset store
|
||||
*/
|
||||
/** Reset store */
|
||||
function resetStore() {
|
||||
const themeStore = useThemeStore();
|
||||
|
||||
@ -62,16 +51,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme scheme
|
||||
* Set theme scheme
|
||||
*
|
||||
* @param themeScheme
|
||||
*/
|
||||
function setThemeScheme(themeScheme: UnionKey.ThemeScheme) {
|
||||
settings.value.themeScheme = themeScheme;
|
||||
}
|
||||
|
||||
/**
|
||||
* toggle theme scheme
|
||||
*/
|
||||
/** Toggle theme scheme */
|
||||
function toggleThemeScheme() {
|
||||
const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
|
||||
|
||||
@ -85,9 +73,10 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* update theme colors
|
||||
* @param key theme color key
|
||||
* @param color theme color
|
||||
* Update theme colors
|
||||
*
|
||||
* @param key Theme color key
|
||||
* @param color Theme color
|
||||
*/
|
||||
function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
|
||||
if (key === 'primary') {
|
||||
@ -98,24 +87,21 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme layout
|
||||
* @param mode theme layout mode
|
||||
* Set theme layout
|
||||
*
|
||||
* @param mode Theme layout mode
|
||||
*/
|
||||
function setThemeLayout(mode: UnionKey.ThemeLayoutMode) {
|
||||
settings.value.layout.mode = mode;
|
||||
}
|
||||
|
||||
/**
|
||||
* setup theme vars to html
|
||||
*/
|
||||
/** Setup theme vars to html */
|
||||
function setupThemeVarsToHtml() {
|
||||
const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value);
|
||||
addThemeVarsToHtml(themeTokens, darkThemeTokens);
|
||||
}
|
||||
|
||||
/**
|
||||
* cache theme settings
|
||||
*/
|
||||
/** Cache theme settings */
|
||||
function cacheThemeSettings() {
|
||||
const isProd = import.meta.env.PROD;
|
||||
|
||||
@ -150,9 +136,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* on scope dispose
|
||||
*/
|
||||
/** On scope dispose */
|
||||
onScopeDispose(() => {
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
import type { GlobalThemeOverrides } from 'naive-ui';
|
||||
import { getColorPalette, getColorByColorPaletteNumber } from '@sa/color-palette';
|
||||
import { getRgbOfColor, addColorAlpha } from '@sa/utils';
|
||||
import { themeSettings, overrideThemeSettings } from '@/theme/settings';
|
||||
import { getColorByColorPaletteNumber, getColorPalette } from '@sa/color-palette';
|
||||
import { addColorAlpha, getRgbOfColor } from '@sa/utils';
|
||||
import { overrideThemeSettings, themeSettings } from '@/theme/settings';
|
||||
import { themeVars } from '@/theme/vars';
|
||||
import { localStg } from '@/utils/storage';
|
||||
|
||||
const DARK_CLASS = 'dark';
|
||||
|
||||
/**
|
||||
* init theme settings
|
||||
*/
|
||||
/** Init theme settings */
|
||||
export function initThemeSettings() {
|
||||
const isProd = import.meta.env.PROD;
|
||||
|
||||
@ -32,8 +30,9 @@ export function initThemeSettings() {
|
||||
}
|
||||
|
||||
/**
|
||||
* create theme token
|
||||
* @param colors theme colors
|
||||
* Create theme token
|
||||
*
|
||||
* @param colors Theme colors
|
||||
*/
|
||||
export function createThemeToken(colors: App.Theme.ThemeColor) {
|
||||
const paletteColors = createThemePaletteColors(colors);
|
||||
@ -73,8 +72,9 @@ export function createThemeToken(colors: App.Theme.ThemeColor) {
|
||||
}
|
||||
|
||||
/**
|
||||
* create theme palette colors
|
||||
* @param colors theme colors
|
||||
* Create theme palette colors
|
||||
*
|
||||
* @param colors Theme colors
|
||||
*/
|
||||
function createThemePaletteColors(colors: App.Theme.ThemeColor) {
|
||||
const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
|
||||
@ -94,8 +94,9 @@ function createThemePaletteColors(colors: App.Theme.ThemeColor) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get css var by tokens
|
||||
* @param tokens theme base tokens
|
||||
* Get css var by tokens
|
||||
*
|
||||
* @param tokens Theme base tokens
|
||||
*/
|
||||
function getCssVarByTokens(tokens: App.Theme.BaseToken) {
|
||||
const styles: string[] = [];
|
||||
@ -129,7 +130,8 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
|
||||
}
|
||||
|
||||
/**
|
||||
* add theme vars to html
|
||||
* Add theme vars to html
|
||||
*
|
||||
* @param tokens
|
||||
*/
|
||||
export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
|
||||
@ -150,14 +152,15 @@ export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.
|
||||
|
||||
const style = document.createElement('style');
|
||||
|
||||
style.innerText = css + darkCss;
|
||||
style.textContent = css + darkCss;
|
||||
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* toggle css dark mode
|
||||
* @param darkMode is dark mode
|
||||
* Toggle css dark mode
|
||||
*
|
||||
* @param darkMode Is dark mode
|
||||
*/
|
||||
export function toggleCssDarkMode(darkMode = false) {
|
||||
function addDarkClass() {
|
||||
@ -184,8 +187,9 @@ interface NaiveColorAction {
|
||||
}
|
||||
|
||||
/**
|
||||
* get naive theme colors
|
||||
* @param colors theme colors
|
||||
* Get naive theme colors
|
||||
*
|
||||
* @param colors Theme colors
|
||||
*/
|
||||
function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
|
||||
const colorActions: NaiveColorAction[] = [
|
||||
@ -212,8 +216,9 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
|
||||
}
|
||||
|
||||
/**
|
||||
* get naive theme
|
||||
* @param colors theme colors
|
||||
* Get naive theme
|
||||
*
|
||||
* @param colors Theme colors
|
||||
*/
|
||||
export function getNaiveTheme(colors: App.Theme.ThemeColor) {
|
||||
const { primary: colorLoading } = colors;
|
||||
|
||||
@ -3,7 +3,8 @@ import { cloneDeep } from 'lodash-es';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
|
||||
/**
|
||||
* the plugin reset the state of the store which is written by setup syntax
|
||||
* The plugin reset the state of the store which is written by setup syntax
|
||||
*
|
||||
* @param context
|
||||
*/
|
||||
export function resetSetupStore(context: PiniaPluginContext) {
|
||||
|
||||
Reference in New Issue
Block a user