mirror of
https://github.com/m-xlsea/ruoyi-plus-soybean.git
synced 2025-09-24 07:49:47 +08:00
feat(projects): 1.0 beta
This commit is contained in:
Soybean
@ -2,13 +2,13 @@ import type { App } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import { resetSetupStore } from './plugins';
|
||||
|
||||
/** setup vue store plugin: pinia. - [安装vue状态管理插件：pinia] */
|
||||
/**
|
||||
* setup Vue store plugin pinia
|
||||
*/
|
||||
export function setupStore(app: App) {
|
||||
const store = createPinia();
|
||||
|
||||
store.use(resetSetupStore);
|
||||
|
||||
app.use(store);
|
||||
}
|
||||
|
||||
export * from './modules';
|
||||
export * from './subscribe';
|
||||
|
||||
@ -1,110 +1,144 @@
|
||||
import { nextTick } from 'vue';
|
||||
import { ref, watch, effectScope, onScopeDispose } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import type { Socket } from 'socket.io-client';
|
||||
import { LAYOUT_SCROLL_EL_ID } from '@soybeanjs/vue-materials';
|
||||
import { breakpointsTailwind, useBreakpoints, useTitle } from '@vueuse/core';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { router } from '@/router';
|
||||
import { $t, setLocale } from '@/locales';
|
||||
import { setDayjsLocale } from '@/locales/dayjs';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { useRouteStore } from '../route';
|
||||
import { useTabStore } from '../tab';
|
||||
import { useThemeStore } from '../theme';
|
||||
|
||||
interface AppState {
|
||||
/** 滚动元素的id */
|
||||
scrollElId: string;
|
||||
/** 主体内容全屏 */
|
||||
contentFull: boolean;
|
||||
/** 禁用主体内容的水平方向的滚动 */
|
||||
disableMainXScroll: boolean;
|
||||
/** 重载页面(控制页面的显示) */
|
||||
reloadFlag: boolean;
|
||||
/** 项目配置的抽屉可见状态 */
|
||||
settingDrawerVisible: boolean;
|
||||
/** 侧边栏折叠状态 */
|
||||
siderCollapse: boolean;
|
||||
/** vertical-mix模式下 侧边栏的固定状态 */
|
||||
mixSiderFixed: boolean;
|
||||
/** socket.io 实例 */
|
||||
socket: Socket | null;
|
||||
}
|
||||
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();
|
||||
|
||||
export const useAppStore = defineStore('app-store', {
|
||||
state: (): AppState => ({
|
||||
scrollElId: LAYOUT_SCROLL_EL_ID,
|
||||
contentFull: false,
|
||||
disableMainXScroll: false,
|
||||
reloadFlag: true,
|
||||
settingDrawerVisible: false,
|
||||
siderCollapse: false,
|
||||
mixSiderFixed: false,
|
||||
socket: null
|
||||
}),
|
||||
actions: {
|
||||
/**
|
||||
* 获取滚动配置
|
||||
*/
|
||||
getScrollConfig() {
|
||||
const scrollEl = document.querySelector(`#${this.scrollElId}`);
|
||||
/**
|
||||
* is mobile layout
|
||||
*/
|
||||
const isMobile = breakpoints.smaller('sm');
|
||||
|
||||
const { scrollLeft = 0, scrollTop = 0 } = scrollEl || {};
|
||||
/**
|
||||
* reload page
|
||||
* @param duration duration time
|
||||
*/
|
||||
async function reloadPage(duration = 0) {
|
||||
setReloadFlag(false);
|
||||
|
||||
return {
|
||||
scrollEl,
|
||||
scrollLeft,
|
||||
scrollTop
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 重载页面
|
||||
* @param duration - 重载的延迟时间(ms)
|
||||
*/
|
||||
async reloadPage(duration = 0) {
|
||||
this.reloadFlag = false;
|
||||
await nextTick();
|
||||
if (duration) {
|
||||
setTimeout(() => {
|
||||
this.reloadFlag = true;
|
||||
}, duration);
|
||||
} else {
|
||||
this.reloadFlag = true;
|
||||
}
|
||||
setTimeout(() => {
|
||||
document.documentElement.scrollTo({ left: 0, top: 0 });
|
||||
}, 100);
|
||||
},
|
||||
/** 打开设置抽屉 */
|
||||
openSettingDrawer() {
|
||||
this.settingDrawerVisible = true;
|
||||
},
|
||||
/** 关闭设置抽屉 */
|
||||
closeSettingDrawer() {
|
||||
this.settingDrawerVisible = false;
|
||||
},
|
||||
/** 切换抽屉可见状态 */
|
||||
toggleSettingDrawerVisible() {
|
||||
this.settingDrawerVisible = !this.settingDrawerVisible;
|
||||
},
|
||||
/** 设置侧边栏折叠状态 */
|
||||
setSiderCollapse(collapse: boolean) {
|
||||
this.siderCollapse = collapse;
|
||||
},
|
||||
/** 折叠/展开 侧边栏折叠状态 */
|
||||
toggleSiderCollapse() {
|
||||
this.siderCollapse = !this.siderCollapse;
|
||||
},
|
||||
/** 设置 vertical-mix模式下 侧边栏的固定状态 */
|
||||
setMixSiderIsFixed(isFixed: boolean) {
|
||||
this.mixSiderFixed = isFixed;
|
||||
},
|
||||
/** 设置 vertical-mix模式下 侧边栏的固定状态 */
|
||||
toggleMixSiderFixed() {
|
||||
this.mixSiderFixed = !this.mixSiderFixed;
|
||||
},
|
||||
/** 设置主体是否禁用滚动 */
|
||||
setDisableMainXScroll(disable: boolean) {
|
||||
this.disableMainXScroll = disable;
|
||||
},
|
||||
/** 设置主体内容全屏 */
|
||||
setContentFull(full: boolean) {
|
||||
this.contentFull = full;
|
||||
},
|
||||
/** 设置socket实例 */
|
||||
setSocket<T extends Socket = Socket>(socket: T) {
|
||||
this.socket = socket;
|
||||
if (duration > 0) {
|
||||
await new Promise(resolve => {
|
||||
setTimeout(resolve, duration);
|
||||
});
|
||||
}
|
||||
|
||||
setReloadFlag(true);
|
||||
}
|
||||
|
||||
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) {
|
||||
setSiderCollapse(true);
|
||||
|
||||
themeStore.setThemeLayout('vertical');
|
||||
}
|
||||
},
|
||||
{ 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();
|
||||
|
||||
// sey dayjs locale
|
||||
setDayjsLocale(locale.value);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 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
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,154 +1,96 @@
|
||||
import { unref, nextTick } from 'vue';
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { router } from '@/router';
|
||||
import { fetchLogin, fetchUserInfo } from '@/service';
|
||||
import { useRouterPush } from '@/composables';
|
||||
import { localStg } from '@/utils';
|
||||
import { $t } from '@/locales';
|
||||
import { useTabStore } from '../tab';
|
||||
import { useLoading } from '@sa/hooks';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { fetchLogin, fetchGetUserInfo } from '@/service/api';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { useRouteStore } from '../route';
|
||||
import { getToken, getUserInfo, clearAuthStorage } from './helpers';
|
||||
import { getToken, getUserInfo, clearAuthStorage } from './shared';
|
||||
import { $t } from '@/locales';
|
||||
|
||||
interface AuthState {
|
||||
/** 用户信息 */
|
||||
userInfo: Auth.UserInfo;
|
||||
/** 用户token */
|
||||
token: string;
|
||||
/** 登录的加载状态 */
|
||||
loginLoading: boolean;
|
||||
}
|
||||
export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
|
||||
const routeStore = useRouteStore();
|
||||
const { route, toLogin, redirectFromLogin } = useRouterPush(false);
|
||||
const { loading: loginLoading, startLoading, endLoading } = useLoading();
|
||||
|
||||
export const useAuthStore = defineStore('auth-store', {
|
||||
state: (): AuthState => ({
|
||||
userInfo: getUserInfo(),
|
||||
token: getToken(),
|
||||
loginLoading: false
|
||||
}),
|
||||
getters: {
|
||||
/** 是否登录 */
|
||||
isLogin(state) {
|
||||
return Boolean(state.token);
|
||||
const token = ref(getToken());
|
||||
|
||||
const userInfo: Api.Auth.UserInfo = reactive(getUserInfo());
|
||||
|
||||
/**
|
||||
* is login
|
||||
*/
|
||||
const isLogin = computed(() => Boolean(token.value));
|
||||
|
||||
/**
|
||||
* reset auth store
|
||||
*/
|
||||
async function resetStore() {
|
||||
const authStore = useAuthStore();
|
||||
|
||||
clearAuthStorage();
|
||||
|
||||
authStore.$reset();
|
||||
|
||||
if (!route.value.meta.constant) {
|
||||
await toLogin();
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
/** 重置auth状态 */
|
||||
resetAuthStore() {
|
||||
const { toLogin } = useRouterPush(false);
|
||||
const { resetTabStore } = useTabStore();
|
||||
const { resetRouteStore } = useRouteStore();
|
||||
const route = unref(router.currentRoute);
|
||||
|
||||
clearAuthStorage();
|
||||
this.$reset();
|
||||
routeStore.resetStore();
|
||||
}
|
||||
|
||||
if (route.meta.requiresAuth) {
|
||||
toLogin();
|
||||
}
|
||||
|
||||
nextTick(() => {
|
||||
resetTabStore();
|
||||
resetRouteStore();
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 处理登录后成功或失败的逻辑
|
||||
* @param backendToken - 返回的token
|
||||
*/
|
||||
async handleActionAfterLogin(backendToken: ApiAuth.Token) {
|
||||
const route = useRouteStore();
|
||||
const { toLoginRedirect } = useRouterPush(false);
|
||||
|
||||
const loginSuccess = await this.loginByToken(backendToken);
|
||||
|
||||
if (loginSuccess) {
|
||||
await route.initAuthRoute();
|
||||
|
||||
// 跳转登录后的地址
|
||||
toLoginRedirect();
|
||||
|
||||
// 登录成功弹出欢迎提示
|
||||
if (route.isInitAuthRoute) {
|
||||
window.$notification?.success({
|
||||
title: $t('page.login.common.loginSuccess'),
|
||||
content: $t('page.login.common.welcomeBack', { userName: this.userInfo.userName }),
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// 不成功则重置状态
|
||||
this.resetAuthStore();
|
||||
},
|
||||
/**
|
||||
* 根据token进行登录
|
||||
* @param backendToken - 返回的token
|
||||
*/
|
||||
async loginByToken(backendToken: ApiAuth.Token) {
|
||||
let successFlag = false;
|
||||
|
||||
// 先把token存储到缓存中(后面接口的请求头需要token)
|
||||
const { token, refreshToken } = backendToken;
|
||||
localStg.set('token', token);
|
||||
localStg.set('refreshToken', refreshToken);
|
||||
|
||||
// 获取用户信息
|
||||
const { data } = await fetchUserInfo();
|
||||
if (data) {
|
||||
// 成功后把用户信息存储到缓存中
|
||||
localStg.set('userInfo', data);
|
||||
|
||||
// 更新状态
|
||||
this.userInfo = data;
|
||||
this.token = token;
|
||||
|
||||
successFlag = true;
|
||||
}
|
||||
|
||||
return successFlag;
|
||||
},
|
||||
/**
|
||||
* 登录
|
||||
* @param userName - 用户名
|
||||
* @param password - 密码
|
||||
*/
|
||||
async login(userName: string, password: string) {
|
||||
this.loginLoading = true;
|
||||
const { data } = await fetchLogin(userName, password);
|
||||
if (data) {
|
||||
await this.handleActionAfterLogin(data);
|
||||
}
|
||||
this.loginLoading = false;
|
||||
},
|
||||
/**
|
||||
* 更换用户权限(切换账号)
|
||||
* @param userRole
|
||||
*/
|
||||
async updateUserRole(userRole: Auth.RoleType) {
|
||||
const { resetRouteStore, initAuthRoute } = useRouteStore();
|
||||
|
||||
const accounts: Record<Auth.RoleType, { userName: string; password: string }> = {
|
||||
super: {
|
||||
userName: 'Super',
|
||||
password: 'super123'
|
||||
},
|
||||
admin: {
|
||||
userName: 'Admin',
|
||||
password: 'admin123'
|
||||
},
|
||||
user: {
|
||||
userName: 'User01',
|
||||
password: 'user01123'
|
||||
}
|
||||
};
|
||||
const { userName, password } = accounts[userRole];
|
||||
const { data } = await fetchLogin(userName, password);
|
||||
if (data) {
|
||||
await this.loginByToken(data);
|
||||
resetRouteStore();
|
||||
initAuthRoute();
|
||||
/**
|
||||
* login
|
||||
* @param userName user name
|
||||
* @param password password
|
||||
*/
|
||||
async function login(userName: string, password: string) {
|
||||
startLoading();
|
||||
|
||||
try {
|
||||
const { data: loginToken } = await fetchLogin(userName, password);
|
||||
|
||||
await loginByToken(loginToken);
|
||||
|
||||
await routeStore.initAuthRoute();
|
||||
|
||||
await redirectFromLogin();
|
||||
|
||||
if (routeStore.isInitAuthRoute) {
|
||||
window.$notification?.success({
|
||||
title: $t('page.login.common.loginSuccess'),
|
||||
content: $t('page.login.common.welcomeBack', { userName: userInfo.userName })
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
resetStore();
|
||||
} finally {
|
||||
endLoading();
|
||||
}
|
||||
}
|
||||
|
||||
async function loginByToken(loginToken: Api.Auth.LoginToken) {
|
||||
// 1. stored in the localStorage, the later requests need it in headers
|
||||
localStg.set('token', loginToken.token);
|
||||
localStg.set('refreshToken', loginToken.refreshToken);
|
||||
|
||||
const { data: info } = await fetchGetUserInfo();
|
||||
|
||||
// 2. store user info
|
||||
localStg.set('userInfo', info);
|
||||
|
||||
// 3. update auth route
|
||||
token.value = loginToken.token;
|
||||
Object.assign(userInfo, info);
|
||||
}
|
||||
|
||||
return {
|
||||
token,
|
||||
userInfo,
|
||||
isLogin,
|
||||
loginLoading,
|
||||
resetStore,
|
||||
login
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,23 +1,29 @@
|
||||
import { localStg } from '@/utils';
|
||||
import { localStg } from '@/utils/storage';
|
||||
|
||||
/** 获取token */
|
||||
/**
|
||||
* get token
|
||||
*/
|
||||
export function getToken() {
|
||||
return localStg.get('token') || '';
|
||||
}
|
||||
|
||||
/** 获取用户信息 */
|
||||
/**
|
||||
* get user info
|
||||
*/
|
||||
export function getUserInfo() {
|
||||
const emptyInfo: Auth.UserInfo = {
|
||||
const emptyInfo: Api.Auth.UserInfo = {
|
||||
userId: '',
|
||||
userName: '',
|
||||
userRole: 'user'
|
||||
roles: []
|
||||
};
|
||||
const userInfo: Auth.UserInfo = localStg.get('userInfo') || emptyInfo;
|
||||
const userInfo = localStg.get('userInfo') || emptyInfo;
|
||||
|
||||
return userInfo;
|
||||
}
|
||||
|
||||
/** 去除用户相关缓存 */
|
||||
/**
|
||||
* clear auth storage
|
||||
*/
|
||||
export function clearAuthStorage() {
|
||||
localStg.remove('token');
|
||||
localStg.remove('refreshToken');
|
||||
@ -1,6 +0,0 @@
|
||||
export * from './app';
|
||||
export * from './theme';
|
||||
export * from './auth';
|
||||
export * from './tab';
|
||||
export * from './route';
|
||||
export * from './setup-store';
|
||||
@ -1,188 +1,292 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
import { defineStore } from 'pinia';
|
||||
import { ROOT_ROUTE, constantRoutes, router, routes as staticRoutes } from '@/router';
|
||||
import { fetchUserRoutes } from '@/service';
|
||||
import { useBoolean } from '@sa/hooks';
|
||||
import type { ElegantConstRoute, CustomRoute, RouteKey, LastLevelRouteKey, 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 { fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
|
||||
import {
|
||||
localStg,
|
||||
filterAuthRoutesByUserPermission,
|
||||
getCacheRoutes,
|
||||
getConstantRouteNames,
|
||||
transformAuthRouteToVueRoutes,
|
||||
transformAuthRouteToVueRoute,
|
||||
transformAuthRouteToMenu,
|
||||
transformAuthRouteToSearchMenus,
|
||||
transformRouteNameToRoutePath,
|
||||
transformRoutePathToRouteName,
|
||||
sortRoutes
|
||||
} from '@/utils';
|
||||
filterAuthRoutesByRoles,
|
||||
getGlobalMenusByAuthRoutes,
|
||||
updateLocaleOfGlobalMenus,
|
||||
getCacheRouteNames,
|
||||
isRouteExistByRouteName,
|
||||
getSelectedMenuKeyPathByKey,
|
||||
getBreadcrumbsByRoute
|
||||
} from './shared';
|
||||
import { useAppStore } from '../app';
|
||||
import { useAuthStore } from '../auth';
|
||||
import { useTabStore } from '../tab';
|
||||
|
||||
interface RouteState {
|
||||
export const useRouteStore = defineStore(SetupStoreId.Route, () => {
|
||||
const appStore = useAppStore();
|
||||
const authStore = useAuthStore();
|
||||
const tabStore = useTabStore();
|
||||
const { bool: isInitAuthRoute, setBool: setIsInitAuthRoute } = useBoolean();
|
||||
const removeRouteFns: (() => void)[] = [];
|
||||
|
||||
/**
|
||||
* 权限路由模式:
|
||||
* - static - 前端声明的静态
|
||||
* - dynamic - 后端返回的动态
|
||||
* 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"
|
||||
*/
|
||||
authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE'];
|
||||
/** 是否初始化了权限路由 */
|
||||
isInitAuthRoute: boolean;
|
||||
/** 路由首页name(前端静态路由时生效，后端动态路由该值会被后端返回的值覆盖) */
|
||||
routeHomeName: AuthRoute.AllRouteKey;
|
||||
/** 菜单 */
|
||||
menus: App.GlobalMenuOption[];
|
||||
/** 搜索的菜单 */
|
||||
searchMenus: AuthRoute.Route[];
|
||||
/** 缓存的路由名称 */
|
||||
cacheRoutes: string[];
|
||||
}
|
||||
const authRouteMode = ref(import.meta.env.VITE_AUTH_ROUTE_MODE);
|
||||
|
||||
export const useRouteStore = defineStore('route-store', {
|
||||
state: (): RouteState => ({
|
||||
authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
|
||||
isInitAuthRoute: false,
|
||||
routeHomeName: transformRoutePathToRouteName(import.meta.env.VITE_ROUTE_HOME_PATH),
|
||||
menus: [],
|
||||
searchMenus: [],
|
||||
cacheRoutes: []
|
||||
}),
|
||||
actions: {
|
||||
/** 重置路由的store */
|
||||
resetRouteStore() {
|
||||
this.resetRoutes();
|
||||
this.$reset();
|
||||
},
|
||||
/** 重置路由数据，保留固定路由 */
|
||||
resetRoutes() {
|
||||
const routes = router.getRoutes();
|
||||
routes.forEach(route => {
|
||||
const name = (route.name || 'root') as AuthRoute.AllRouteKey;
|
||||
if (!this.isConstantRoute(name)) {
|
||||
router.removeRoute(name);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 是否是固定路由
|
||||
* @param name 路由名称
|
||||
*/
|
||||
isConstantRoute(name: AuthRoute.AllRouteKey) {
|
||||
const constantRouteNames = getConstantRouteNames(constantRoutes);
|
||||
return constantRouteNames.includes(name);
|
||||
},
|
||||
/**
|
||||
* 是否是有效的固定路由
|
||||
* @param name 路由名称
|
||||
*/
|
||||
isValidConstantRoute(name: AuthRoute.AllRouteKey) {
|
||||
const NOT_FOUND_PAGE_NAME: AuthRoute.NotFoundRouteKey = 'not-found';
|
||||
const constantRouteNames = getConstantRouteNames(constantRoutes);
|
||||
return constantRouteNames.includes(name) && name !== NOT_FOUND_PAGE_NAME;
|
||||
},
|
||||
/**
|
||||
* 处理权限路由
|
||||
* @param routes - 权限路由
|
||||
*/
|
||||
handleAuthRoute(routes: AuthRoute.Route[]) {
|
||||
(this.menus as App.GlobalMenuOption[]) = transformAuthRouteToMenu(routes);
|
||||
this.searchMenus = transformAuthRouteToSearchMenus(routes);
|
||||
/**
|
||||
* home route key
|
||||
*/
|
||||
const routeHome = ref(import.meta.env.VITE_ROUTE_HOME);
|
||||
|
||||
const vueRoutes = transformAuthRouteToVueRoutes(routes);
|
||||
/**
|
||||
* set route home
|
||||
* @param routeKey route key
|
||||
*/
|
||||
function setRouteHome(routeKey: LastLevelRouteKey) {
|
||||
routeHome.value = routeKey;
|
||||
}
|
||||
|
||||
vueRoutes.forEach(route => {
|
||||
router.addRoute(route);
|
||||
});
|
||||
/**
|
||||
* global menus
|
||||
*/
|
||||
const menus = ref<App.Global.Menu[]>([]);
|
||||
|
||||
this.cacheRoutes = getCacheRoutes(vueRoutes);
|
||||
},
|
||||
/** 动态路由模式下：更新根路由的重定向 */
|
||||
handleUpdateRootRedirect(routeKey: AuthRoute.AllRouteKey) {
|
||||
if (routeKey === 'root' || routeKey === 'not-found') {
|
||||
throw new Error('routeKey的值不能为root或者not-found');
|
||||
}
|
||||
const rootRoute: AuthRoute.Route = { ...ROOT_ROUTE, redirect: transformRouteNameToRoutePath(routeKey) };
|
||||
const rootRouteName: AuthRoute.AllRouteKey = 'root';
|
||||
router.removeRoute(rootRouteName);
|
||||
const rootVueRoute = transformAuthRouteToVueRoute(rootRoute)[0];
|
||||
router.addRoute(rootVueRoute);
|
||||
},
|
||||
/** 初始化动态路由 */
|
||||
async initDynamicRoute() {
|
||||
const { resetAuthStore } = useAuthStore();
|
||||
const { initHomeTab } = useTabStore();
|
||||
/**
|
||||
* get global menus
|
||||
*/
|
||||
function getGlobalMenus(routes: ElegantConstRoute[]) {
|
||||
menus.value = getGlobalMenusByAuthRoutes(routes);
|
||||
}
|
||||
|
||||
const { userId } = localStg.get('userInfo') || {};
|
||||
/**
|
||||
* update global menus by locale
|
||||
*/
|
||||
function updateGlobalMenusByLocale() {
|
||||
menus.value = updateLocaleOfGlobalMenus(menus.value);
|
||||
}
|
||||
|
||||
if (!userId) {
|
||||
throw new Error('userId 不能为空!');
|
||||
}
|
||||
/**
|
||||
* cache routes
|
||||
*/
|
||||
const cacheRoutes = ref<RouteKey[]>([]);
|
||||
|
||||
const { error, data } = await fetchUserRoutes(userId);
|
||||
/**
|
||||
* get cache routes
|
||||
* @param routes vue routes
|
||||
*/
|
||||
function getCacheRoutes(routes: RouteRecordRaw[]) {
|
||||
const { constantVueRoutes } = createRoutes();
|
||||
|
||||
if (!error) {
|
||||
this.handleAuthRoute(sortRoutes(data.routes));
|
||||
// home相关处理需要在最后，否则会出现找不到主页404的情况
|
||||
this.routeHomeName = data.home;
|
||||
this.handleUpdateRootRedirect(data.home);
|
||||
cacheRoutes.value = getCacheRouteNames([...constantVueRoutes, ...routes]);
|
||||
}
|
||||
|
||||
initHomeTab(data.home, router);
|
||||
/**
|
||||
* add cache routes
|
||||
* @param routeKey
|
||||
*/
|
||||
function addCacheRoutes(routeKey: RouteKey) {
|
||||
if (cacheRoutes.value.includes(routeKey)) return;
|
||||
|
||||
this.isInitAuthRoute = true;
|
||||
} else {
|
||||
resetAuthStore();
|
||||
}
|
||||
},
|
||||
/** 初始化静态路由 */
|
||||
async initStaticRoute() {
|
||||
const { initHomeTab } = useTabStore();
|
||||
const auth = useAuthStore();
|
||||
cacheRoutes.value.push(routeKey);
|
||||
}
|
||||
|
||||
const routes = filterAuthRoutesByUserPermission(staticRoutes, auth.userInfo.userRole);
|
||||
this.handleAuthRoute(routes);
|
||||
/**
|
||||
* remove cache routes
|
||||
* @param routeKey
|
||||
*/
|
||||
function removeCacheRoutes(routeKey: RouteKey) {
|
||||
const index = cacheRoutes.value.findIndex(item => item === routeKey);
|
||||
|
||||
initHomeTab(this.routeHomeName, router);
|
||||
if (index === -1) return;
|
||||
|
||||
this.isInitAuthRoute = true;
|
||||
},
|
||||
/** 初始化权限路由 */
|
||||
async initAuthRoute() {
|
||||
if (this.authRouteMode === 'dynamic') {
|
||||
await this.initDynamicRoute();
|
||||
} else {
|
||||
await this.initStaticRoute();
|
||||
}
|
||||
},
|
||||
/** 从缓存路由中去除某个路由 */
|
||||
removeCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const index = this.cacheRoutes.indexOf(name);
|
||||
if (index > -1) {
|
||||
this.cacheRoutes.splice(index, 1);
|
||||
}
|
||||
},
|
||||
/** 添加某个缓存路由 */
|
||||
addCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const index = this.cacheRoutes.indexOf(name);
|
||||
if (index === -1) {
|
||||
this.cacheRoutes.push(name);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 重新缓存路由
|
||||
*/
|
||||
async reCacheRoute(name: AuthRoute.AllRouteKey) {
|
||||
const { reloadPage } = useAppStore();
|
||||
cacheRoutes.value.splice(index, 1);
|
||||
}
|
||||
|
||||
const isCached = this.cacheRoutes.includes(name);
|
||||
/**
|
||||
* re-cache routes by route key
|
||||
* @param routeKey
|
||||
*/
|
||||
async function reCacheRoutesByKey(routeKey: RouteKey) {
|
||||
removeCacheRoutes(routeKey);
|
||||
|
||||
if (isCached) {
|
||||
this.removeCacheRoute(name);
|
||||
}
|
||||
await appStore.reloadPage();
|
||||
|
||||
await reloadPage();
|
||||
addCacheRoutes(routeKey);
|
||||
}
|
||||
|
||||
if (isCached) {
|
||||
this.addCacheRoute(name as AuthRoute.AllRouteKey);
|
||||
}
|
||||
/**
|
||||
* re-cache routes by route keys
|
||||
* @param routeKeys
|
||||
*/
|
||||
async function reCacheRoutesByKeys(routeKeys: RouteKey[]) {
|
||||
for await (const key of routeKeys) {
|
||||
await reCacheRoutesByKey(key);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* global breadcrumbs
|
||||
*/
|
||||
const breadcrumbs = computed(() => getBreadcrumbsByRoute(router.currentRoute.value, menus.value));
|
||||
|
||||
/**
|
||||
* reset store
|
||||
*/
|
||||
async function resetStore() {
|
||||
const routeStore = useRouteStore();
|
||||
|
||||
routeStore.$reset();
|
||||
|
||||
resetVueRoutes();
|
||||
}
|
||||
|
||||
/**
|
||||
* reset vue routes
|
||||
*/
|
||||
function resetVueRoutes() {
|
||||
removeRouteFns.forEach(fn => fn());
|
||||
removeRouteFns.length = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* init auth route
|
||||
*/
|
||||
async function initAuthRoute() {
|
||||
if (authRouteMode.value === 'static') {
|
||||
await initStaticAuthRoute();
|
||||
} else {
|
||||
await initDynamicAuthRoute();
|
||||
}
|
||||
|
||||
tabStore.initHomeTab(router);
|
||||
}
|
||||
|
||||
/**
|
||||
* init static auth route
|
||||
*/
|
||||
async function initStaticAuthRoute() {
|
||||
const { authRoutes } = createRoutes();
|
||||
|
||||
const filteredAuthRoutes = filterAuthRoutesByRoles(authRoutes, authStore.userInfo.roles);
|
||||
|
||||
handleAuthRoutes(filteredAuthRoutes);
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* init dynamic auth route
|
||||
*/
|
||||
async function initDynamicAuthRoute() {
|
||||
const {
|
||||
data: { routes, home }
|
||||
} = await fetchGetUserRoutes();
|
||||
|
||||
handleAuthRoutes(routes);
|
||||
|
||||
setRouteHome(home);
|
||||
|
||||
handleUpdateRootRouteRedirect(home);
|
||||
|
||||
setIsInitAuthRoute(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* handle routes
|
||||
* @param routes auth routes
|
||||
*/
|
||||
function handleAuthRoutes(routes: ElegantConstRoute[]) {
|
||||
const vueRoutes = getAuthVueRoutes(routes);
|
||||
|
||||
addRoutesToVueRouter(vueRoutes);
|
||||
|
||||
getGlobalMenus(routes);
|
||||
|
||||
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 } = createRoutes();
|
||||
|
||||
return isRouteExistByRouteName(routeName, authRoutes);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
return {
|
||||
resetStore,
|
||||
routeHome,
|
||||
menus,
|
||||
updateGlobalMenusByLocale,
|
||||
cacheRoutes,
|
||||
reCacheRoutesByKey,
|
||||
reCacheRoutesByKeys,
|
||||
breadcrumbs,
|
||||
initAuthRoute,
|
||||
isInitAuthRoute,
|
||||
setIsInitAuthRoute,
|
||||
getIsAuthRouteExist,
|
||||
getSelectedMenuKeyPath
|
||||
};
|
||||
});
|
||||
|
||||
271
src/store/modules/route/shared.ts
Normal file
271
src/store/modules/route/shared.ts
Normal file
@ -0,0 +1,271 @@
|
||||
import type { RouteRecordRaw, _RouteRecordBase, RouteLocationNormalizedLoaded } from 'vue-router';
|
||||
import type { ElegantConstRoute, RouteKey, RouteMap, LastLevelRouteKey } 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
|
||||
*/
|
||||
export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: string[]) {
|
||||
const SUPER_ROLE = 'R_SUPER';
|
||||
|
||||
if (roles.includes(SUPER_ROLE)) {
|
||||
return routes;
|
||||
}
|
||||
|
||||
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[]) {
|
||||
const routeRoles = (route.meta && route.meta.roles) || [];
|
||||
|
||||
if (!routeRoles.length) {
|
||||
return [route];
|
||||
}
|
||||
|
||||
const hasPermission = routeRoles.some(role => roles.includes(role));
|
||||
|
||||
const filterRoute = { ...route };
|
||||
|
||||
if (filterRoute.children?.length) {
|
||||
filterRoute.children = filterRoute.children.flatMap(item => filterAuthRouteByRoles(item, roles));
|
||||
}
|
||||
|
||||
return hasPermission ? [filterRoute] : [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 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?.length) {
|
||||
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 } = useSvgIconRender(SvgIcon);
|
||||
|
||||
const { name, path } = route;
|
||||
const { title, i18nKey, icon = import.meta.env.VITE_MENU_ICON, localIcon } = 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: 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;
|
||||
|
||||
const menuKey = activeKey || key;
|
||||
|
||||
for (const menu of menus) {
|
||||
if (menu.key === menuKey) {
|
||||
const breadcrumbMenu = menuKey !== activeKey ? menu : getGlobalMenuByBaseRoute(route);
|
||||
|
||||
return [transformMenuToBreadcrumb(breadcrumbMenu)];
|
||||
}
|
||||
|
||||
if (menu.children?.length) {
|
||||
const result = getBreadcrumbsByRoute(route, menu.children);
|
||||
if (result.length > 0) {
|
||||
return [transformMenuToBreadcrumb(menu), ...result];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
import { reactive } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useBoolean } from '@/hooks';
|
||||
|
||||
export const useSetupStore = defineStore('setup-store', () => {
|
||||
const { bool: visible, setTrue: show, setFalse: hide } = useBoolean();
|
||||
|
||||
interface Config {
|
||||
name: string;
|
||||
}
|
||||
|
||||
const config = reactive<Config>({ name: 'config' });
|
||||
|
||||
/** 设置配置 */
|
||||
function setConfig(conf: Partial<Config>) {
|
||||
Object.assign(config, conf);
|
||||
}
|
||||
|
||||
return {
|
||||
visible,
|
||||
show,
|
||||
hide,
|
||||
config,
|
||||
setConfig
|
||||
};
|
||||
});
|
||||
@ -1,79 +0,0 @@
|
||||
import type { RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router';
|
||||
import { localStg } from '@/utils';
|
||||
|
||||
/**
|
||||
* 根据vue路由获取tab路由
|
||||
* @param route
|
||||
*/
|
||||
export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocationNormalizedLoaded) {
|
||||
const fullPath = hasFullPath(route) ? route.fullPath : route.path;
|
||||
const tabRoute: App.GlobalTabRoute = {
|
||||
name: route.name,
|
||||
fullPath,
|
||||
meta: route.meta,
|
||||
scrollPosition: {
|
||||
left: 0,
|
||||
top: 0
|
||||
}
|
||||
};
|
||||
return tabRoute;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取该页签在多页签数据中的索引
|
||||
* @param tabs - 多页签数据
|
||||
* @param fullPath - 该页签的路径
|
||||
*/
|
||||
export function getIndexInTabRoutes(tabs: App.GlobalTabRoute[], fullPath: string) {
|
||||
return tabs.findIndex(tab => tab.fullPath === fullPath);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断该页签是否在多页签数据中
|
||||
* @param tabs - 多页签数据
|
||||
* @param fullPath - 该页签的路径
|
||||
*/
|
||||
export function isInTabRoutes(tabs: App.GlobalTabRoute[], fullPath: string) {
|
||||
return getIndexInTabRoutes(tabs, fullPath) > -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据路由名称获取该页签在多页签数据中的索引
|
||||
* @param tabs - 多页签数据
|
||||
* @param routeName - 路由名称
|
||||
*/
|
||||
export function getIndexInTabRoutesByRouteName(tabs: App.GlobalTabRoute[], routeName: string) {
|
||||
return tabs.findIndex(tab => tab.name === routeName);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断路由是否有fullPath属性
|
||||
* @param route 路由
|
||||
*/
|
||||
function hasFullPath(
|
||||
route: RouteRecordNormalized | RouteLocationNormalizedLoaded
|
||||
): route is RouteLocationNormalizedLoaded {
|
||||
return Boolean((route as RouteLocationNormalizedLoaded).fullPath);
|
||||
}
|
||||
|
||||
/** 获取缓存的多页签数据 */
|
||||
export function getTabRoutes() {
|
||||
const routes: App.GlobalTabRoute[] = [];
|
||||
const data = localStg.get('multiTabRoutes');
|
||||
if (data) {
|
||||
const defaultTabRoutes = data.map(item => ({
|
||||
...item,
|
||||
scrollPosition: {
|
||||
left: 0,
|
||||
top: 0
|
||||
}
|
||||
}));
|
||||
routes.push(...defaultTabRoutes);
|
||||
}
|
||||
return routes;
|
||||
}
|
||||
|
||||
/** 清空多页签数据 */
|
||||
export function clearTabRoutes() {
|
||||
localStg.set('multiTabRoutes', []);
|
||||
}
|
||||
@ -1,264 +1,267 @@
|
||||
import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
|
||||
import { computed, ref } from 'vue';
|
||||
import type { Router } from 'vue-router';
|
||||
import { defineStore } from 'pinia';
|
||||
import { useRouteStore } from '@/store';
|
||||
import { useRouterPush } from '@/composables';
|
||||
import { localStg } from '@/utils';
|
||||
import { useThemeStore } from '../theme';
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import {
|
||||
clearTabRoutes,
|
||||
getIndexInTabRoutes,
|
||||
getIndexInTabRoutesByRouteName,
|
||||
getTabRouteByVueRoute,
|
||||
getTabRoutes,
|
||||
isInTabRoutes
|
||||
} from './helpers';
|
||||
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';
|
||||
|
||||
interface TabState {
|
||||
/** 多页签数据 */
|
||||
tabs: App.GlobalTabRoute[];
|
||||
/** 多页签首页 */
|
||||
homeTab: App.GlobalTabRoute;
|
||||
/** 当前激活状态的页签(路由fullPath) */
|
||||
activeTab: string;
|
||||
}
|
||||
export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPush } = useRouterPush(false);
|
||||
|
||||
export const useTabStore = defineStore('tab-store', {
|
||||
state: (): TabState => ({
|
||||
tabs: [],
|
||||
homeTab: {
|
||||
name: 'root',
|
||||
fullPath: '/',
|
||||
meta: {
|
||||
title: 'Root'
|
||||
},
|
||||
scrollPosition: {
|
||||
left: 0,
|
||||
top: 0
|
||||
}
|
||||
},
|
||||
activeTab: ''
|
||||
}),
|
||||
getters: {
|
||||
/** 当前激活状态的页签索引 */
|
||||
activeTabIndex(state) {
|
||||
const { tabs, activeTab } = state;
|
||||
return tabs.findIndex(tab => tab.fullPath === activeTab);
|
||||
/**
|
||||
* tabs
|
||||
*/
|
||||
const tabs = ref<App.Global.Tab[]>([]);
|
||||
|
||||
/**
|
||||
* get active tab
|
||||
*/
|
||||
const homeTab = ref<App.Global.Tab>();
|
||||
|
||||
/**
|
||||
* init home tab
|
||||
* @param router router instance
|
||||
*/
|
||||
function initHomeTab(router: Router) {
|
||||
homeTab.value = getDefaultHomeTab(router);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
tabs.value = updateTabsByI18nKey(storageTabs);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
/** 重置Tab状态 */
|
||||
resetTabStore() {
|
||||
clearTabRoutes();
|
||||
this.$reset();
|
||||
},
|
||||
/** 缓存页签路由数据 */
|
||||
cacheTabRoutes() {
|
||||
localStg.set('multiTabRoutes', this.tabs);
|
||||
},
|
||||
/**
|
||||
* 设置当前路由对应的页签为激活状态
|
||||
* @param fullPath - 路由fullPath
|
||||
*/
|
||||
setActiveTab(fullPath: string) {
|
||||
this.activeTab = fullPath;
|
||||
},
|
||||
/**
|
||||
* 设置当前路由对应的页签title
|
||||
* @param title - tab名称
|
||||
*/
|
||||
setActiveTabTitle(title: string) {
|
||||
const item = this.tabs.find(tab => tab.fullPath === this.activeTab);
|
||||
if (item) {
|
||||
if (item.meta.i18nTitle) {
|
||||
item.meta.i18nTitle = title as I18nType.I18nKey;
|
||||
} else {
|
||||
item.meta.title = title;
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 初始化首页页签路由
|
||||
* @param routeHomeName - 路由首页的name
|
||||
* @param router - 路由实例
|
||||
*/
|
||||
initHomeTab(routeHomeName: string, router: Router) {
|
||||
const routes = router.getRoutes();
|
||||
const findHome = routes.find(item => item.name === routeHomeName);
|
||||
if (findHome && !findHome.children.length) {
|
||||
// 有子路由的不能作为Tab
|
||||
this.homeTab = getTabRouteByVueRoute(findHome);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 添加多页签
|
||||
* @param route - 路由
|
||||
*/
|
||||
addTab(route: RouteLocationNormalizedLoaded) {
|
||||
const tab = getTabRouteByVueRoute(route);
|
||||
|
||||
if (isInTabRoutes(this.tabs, tab.fullPath)) {
|
||||
return;
|
||||
}
|
||||
addTab(currentRoute);
|
||||
}
|
||||
|
||||
const index = getIndexInTabRoutesByRouteName(this.tabs, route.name as string);
|
||||
/**
|
||||
* 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);
|
||||
|
||||
if (index === -1) {
|
||||
this.tabs.push(tab);
|
||||
return;
|
||||
}
|
||||
const isHomeTab = tab.id === homeTab.value?.id;
|
||||
|
||||
const { multiTab = false } = route.meta;
|
||||
if (!multiTab) {
|
||||
this.tabs.splice(index, 1, tab);
|
||||
return;
|
||||
}
|
||||
if (!isHomeTab && !isTabInTabs(tab.id, tabs.value)) {
|
||||
tabs.value.push(tab);
|
||||
}
|
||||
|
||||
this.tabs.push(tab);
|
||||
},
|
||||
/**
|
||||
* 删除多页签
|
||||
* @param fullPath - 路由fullPath
|
||||
*/
|
||||
async removeTab(fullPath: string) {
|
||||
const { reCacheRoute } = useRouteStore();
|
||||
const { routerPush } = useRouterPush(false);
|
||||
|
||||
const tabName = this.tabs.find(tab => tab.fullPath === fullPath)?.name as AuthRoute.AllRouteKey | undefined;
|
||||
if (tabName) {
|
||||
await reCacheRoute(tabName);
|
||||
}
|
||||
|
||||
const isActive = this.activeTab === fullPath;
|
||||
const updateTabs = this.tabs.filter(tab => tab.fullPath !== fullPath);
|
||||
if (!isActive) {
|
||||
this.tabs = updateTabs;
|
||||
}
|
||||
if (isActive && updateTabs.length) {
|
||||
const activePath = updateTabs[updateTabs.length - 1].fullPath;
|
||||
const navigationFailure = await routerPush(activePath);
|
||||
if (!navigationFailure) {
|
||||
this.tabs = updateTabs;
|
||||
this.setActiveTab(activePath);
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 清空多页签(多页签首页保留)
|
||||
* @param excludes - 保留的多页签path
|
||||
*/
|
||||
async clearTab(excludes: string[] = []) {
|
||||
const { routerPush } = useRouterPush(false);
|
||||
|
||||
const homePath = this.homeTab.fullPath;
|
||||
const remain = [homePath, ...excludes];
|
||||
const hasActive = remain.includes(this.activeTab);
|
||||
const updateTabs = this.tabs.filter(tab => remain.includes(tab.fullPath));
|
||||
if (hasActive) this.tabs = updateTabs;
|
||||
if (!hasActive && updateTabs.length) {
|
||||
const activePath = updateTabs[updateTabs.length - 1].fullPath;
|
||||
const navigationFailure = await routerPush(activePath);
|
||||
if (!navigationFailure) {
|
||||
this.tabs = updateTabs;
|
||||
this.setActiveTab(activePath);
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 清除左边多页签
|
||||
* @param fullPath - 路由fullPath
|
||||
*/
|
||||
clearLeftTab(fullPath: string) {
|
||||
const index = getIndexInTabRoutes(this.tabs, fullPath);
|
||||
if (index > -1) {
|
||||
const excludes = this.tabs.slice(index).map(item => item.fullPath);
|
||||
this.clearTab(excludes);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 清除右边多页签
|
||||
* @param fullPath - 路由fullPath
|
||||
*/
|
||||
clearRightTab(fullPath: string) {
|
||||
const index = getIndexInTabRoutes(this.tabs, fullPath);
|
||||
if (index > -1) {
|
||||
const excludes = this.tabs.slice(0, index + 1).map(item => item.fullPath);
|
||||
this.clearTab(excludes);
|
||||
}
|
||||
},
|
||||
/** 清除所有多页签 */
|
||||
clearAllTab() {
|
||||
this.clearTab();
|
||||
},
|
||||
/**
|
||||
* 点击单个tab
|
||||
* @param fullPath - 路由fullPath
|
||||
*/
|
||||
async handleClickTab(fullPath: string) {
|
||||
const { routerPush } = useRouterPush(false);
|
||||
|
||||
const isActive = this.activeTab === fullPath;
|
||||
if (!isActive) {
|
||||
const navigationFailure = await routerPush(fullPath);
|
||||
if (!navigationFailure) this.setActiveTab(fullPath);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 记录tab滚动位置
|
||||
* @param fullPath - 路由fullPath
|
||||
* @param position - tab当前页的滚动位置
|
||||
*/
|
||||
recordTabScrollPosition(fullPath: string, position: { left: number; top: number }) {
|
||||
const index = getIndexInTabRoutes(this.tabs, fullPath);
|
||||
if (index > -1) {
|
||||
this.tabs[index].scrollPosition = position;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取tab滚动位置
|
||||
* @param fullPath - 路由fullPath
|
||||
*/
|
||||
getTabScrollPosition(fullPath: string) {
|
||||
const position = {
|
||||
left: 0,
|
||||
top: 0
|
||||
};
|
||||
const index = getIndexInTabRoutes(this.tabs, fullPath);
|
||||
if (index > -1) {
|
||||
Object.assign(position, this.tabs[index].scrollPosition);
|
||||
}
|
||||
return position;
|
||||
},
|
||||
/** 初始化Tab状态 */
|
||||
iniTabStore(currentRoute: RouteLocationNormalizedLoaded) {
|
||||
const theme = useThemeStore();
|
||||
|
||||
const tabs: App.GlobalTabRoute[] = theme.tab.isCache ? getTabRoutes() : [];
|
||||
|
||||
const hasHome = getIndexInTabRoutesByRouteName(tabs, this.homeTab.name as string) > -1;
|
||||
if (!hasHome && this.homeTab.name !== 'root') {
|
||||
tabs.unshift(this.homeTab);
|
||||
}
|
||||
|
||||
const isHome = currentRoute.fullPath === this.homeTab.fullPath;
|
||||
const index = getIndexInTabRoutesByRouteName(tabs, currentRoute.name as string);
|
||||
if (!isHome) {
|
||||
const currentTab = getTabRouteByVueRoute(currentRoute);
|
||||
if (!currentRoute.meta.multiTab) {
|
||||
if (index > -1) {
|
||||
tabs.splice(index, 1, currentTab);
|
||||
} else {
|
||||
tabs.push(currentTab);
|
||||
}
|
||||
} else {
|
||||
const hasCurrent = isInTabRoutes(tabs, currentRoute.fullPath);
|
||||
if (!hasCurrent) {
|
||||
tabs.push(currentTab);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.tabs = tabs;
|
||||
this.setActiveTab(currentRoute.fullPath);
|
||||
if (active) {
|
||||
setActiveTabId(tab.id);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* remove tab
|
||||
* @param tabId tab id
|
||||
*/
|
||||
async function removeTab(tabId: string) {
|
||||
const isRemoveActiveTab = activeTabId.value === tabId;
|
||||
const updatedTabs = filterTabsById(tabId, tabs.value);
|
||||
|
||||
function update() {
|
||||
tabs.value = updatedTabs;
|
||||
}
|
||||
|
||||
if (!isRemoveActiveTab) {
|
||||
update();
|
||||
return;
|
||||
}
|
||||
|
||||
const activeTab = updatedTabs.at(-1) || homeTab.value;
|
||||
|
||||
if (activeTab) {
|
||||
await switchRouteByTab(activeTab);
|
||||
update();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* clear tabs
|
||||
* @param excludes exclude tab ids
|
||||
*/
|
||||
async function clearTabs(excludes: string[] = []) {
|
||||
const remainTabIds = [...getFixedTabIds(tabs.value), ...excludes];
|
||||
const removedTabsIds = tabs.value.map(tab => tab.id).filter(id => !remainTabIds.includes(id));
|
||||
|
||||
const isRemoveActiveTab = removedTabsIds.includes(activeTabId.value);
|
||||
const updatedTabs = filterTabsByIds(removedTabsIds, tabs.value);
|
||||
|
||||
function update() {
|
||||
tabs.value = updatedTabs;
|
||||
}
|
||||
|
||||
if (!isRemoveActiveTab) {
|
||||
update();
|
||||
return;
|
||||
}
|
||||
|
||||
const activeTab = updatedTabs[updatedTabs.length - 1] || homeTab.value;
|
||||
|
||||
await switchRouteByTab(activeTab);
|
||||
update();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 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);
|
||||
}
|
||||
|
||||
/**
|
||||
* set new label of tab
|
||||
* @param label new tab label
|
||||
* @param tabId tab id
|
||||
* @default activeTabId
|
||||
*/
|
||||
function setTabLabel(label: string, tabId?: string) {
|
||||
const id = tabId || activeTabId.value;
|
||||
|
||||
const tab = tabs.value.find(item => item.id === id);
|
||||
if (!tab) return;
|
||||
|
||||
tab.newLabel = label;
|
||||
}
|
||||
|
||||
/**
|
||||
* reset tab label
|
||||
* @param tabId tab id
|
||||
* @default activeTabId
|
||||
*/
|
||||
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,
|
||||
initHomeTab,
|
||||
initTabStore,
|
||||
addTab,
|
||||
removeTab,
|
||||
clearTabs,
|
||||
clearLeftTabs,
|
||||
clearRightTabs,
|
||||
switchRouteByTab,
|
||||
setTabLabel,
|
||||
resetTabLabel,
|
||||
isTabRetain,
|
||||
updateTabsByLocale
|
||||
};
|
||||
});
|
||||
|
||||
170
src/store/modules/tab/shared.ts
Normal file
170
src/store/modules/tab/shared.ts
Normal file
@ -0,0 +1,170 @@
|
||||
import type { Router } from 'vue-router';
|
||||
import type { RouteMap, LastLevelRouteKey } 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 fixedTabs = tabs.filter(tab => tab.fixedIndex !== undefined).sort((a, b) => a.fixedIndex! - b.fixedIndex!);
|
||||
|
||||
const remainTabs = tabs.filter(tab => tab.fixedIndex === undefined);
|
||||
|
||||
const allTabs = [homeTab, ...fixedTabs, ...remainTabs];
|
||||
|
||||
return updateTabsLabel(allTabs);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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, icon = import.meta.env.VITE_MENU_ICON, localIcon } = meta;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* get default home tab
|
||||
* @param router
|
||||
*/
|
||||
export function getDefaultHomeTab(router: Router) {
|
||||
const homeRouteName = import.meta.env.VITE_ROUTE_HOME;
|
||||
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));
|
||||
}
|
||||
|
||||
/**
|
||||
* get fixed tabs
|
||||
* @param tabs
|
||||
*/
|
||||
export function getFixedTabs(tabs: App.Global.Tab[]) {
|
||||
return tabs.filter(tab => tab.fixedIndex !== undefined);
|
||||
}
|
||||
|
||||
/**
|
||||
* get fixed tab ids
|
||||
* @param tabs
|
||||
*/
|
||||
export function getFixedTabIds(tabs: App.Global.Tab[]) {
|
||||
const fixedTabs = getFixedTabs(tabs);
|
||||
|
||||
return fixedTabs.map(tab => tab.id);
|
||||
}
|
||||
|
||||
/**
|
||||
* update tabs label
|
||||
* @param tabs
|
||||
*/
|
||||
function updateTabsLabel(tabs: App.Global.Tab[]) {
|
||||
return tabs.map(tab => ({
|
||||
...tab,
|
||||
label: tab.newLabel || tab.label
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* 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));
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
import type { GlobalThemeOverrides } from 'naive-ui';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { themeSetting } from '@/settings';
|
||||
import { sessionStg, addColorAlpha, getColorPalette } from '@/utils';
|
||||
|
||||
/** 初始化主题配置 */
|
||||
export function initThemeSettings() {
|
||||
const isProd = import.meta.env.PROD;
|
||||
// 生产环境才缓存主题配置，本地开发实时调整配置更改配置的json
|
||||
const storageSettings = sessionStg.get('themeSettings');
|
||||
|
||||
if (isProd && storageSettings) {
|
||||
return storageSettings;
|
||||
}
|
||||
|
||||
const themeColor = sessionStg.get('themeColor') || themeSetting.themeColor;
|
||||
const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7);
|
||||
const otherColor = { ...themeSetting.otherColor, info };
|
||||
const setting = cloneDeep({ ...themeSetting, themeColor, otherColor });
|
||||
return setting;
|
||||
}
|
||||
|
||||
type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error';
|
||||
type ColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active';
|
||||
type ColorKey = `${ColorType}Color${ColorScene}`;
|
||||
type ThemeColor = Partial<Record<ColorKey, string>>;
|
||||
|
||||
interface ColorAction {
|
||||
scene: ColorScene;
|
||||
handler: (color: string) => string;
|
||||
}
|
||||
|
||||
/** 获取主题颜色的各种场景对应的颜色 */
|
||||
function getThemeColors(colors: [ColorType, string][]) {
|
||||
const colorActions: ColorAction[] = [
|
||||
{ scene: '', handler: color => color },
|
||||
{ scene: 'Suppl', handler: color => color },
|
||||
{ scene: 'Hover', handler: color => getColorPalette(color, 5) },
|
||||
{ scene: 'Pressed', handler: color => getColorPalette(color, 7) },
|
||||
{ scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
|
||||
];
|
||||
|
||||
const themeColor: ThemeColor = {};
|
||||
|
||||
colors.forEach(color => {
|
||||
colorActions.forEach(action => {
|
||||
const [colorType, colorValue] = color;
|
||||
const colorKey: ColorKey = `${colorType}Color${action.scene}`;
|
||||
themeColor[colorKey] = action.handler(colorValue);
|
||||
});
|
||||
});
|
||||
|
||||
return themeColor;
|
||||
}
|
||||
|
||||
/** 获取naive的主题颜色 */
|
||||
export function getNaiveThemeOverrides(colors: Record<ColorType, string>): GlobalThemeOverrides {
|
||||
const { primary, success, warning, error } = colors;
|
||||
|
||||
const info = themeSetting.isCustomizeInfoColor ? colors.info : getColorPalette(primary, 7);
|
||||
|
||||
const themeColors = getThemeColors([
|
||||
['primary', primary],
|
||||
['info', info],
|
||||
['success', success],
|
||||
['warning', warning],
|
||||
['error', error]
|
||||
]);
|
||||
|
||||
const colorLoading = primary;
|
||||
|
||||
return {
|
||||
common: {
|
||||
...themeColors
|
||||
},
|
||||
LoadingBar: {
|
||||
colorLoading
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,181 +1,173 @@
|
||||
import { ref, computed, effectScope, onScopeDispose, watch, toRefs } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { darkTheme } from 'naive-ui';
|
||||
import { sessionStg } from '@/utils';
|
||||
import { getNaiveThemeOverrides, initThemeSettings } from './helpers';
|
||||
import { usePreferredColorScheme, useEventListener } from '@vueuse/core';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
import { localStg } from '@/utils/storage';
|
||||
import { createThemeToken, initThemeSettings, addThemeVarsToHtml, toggleCssDarkMode, getNaiveTheme } from './shared';
|
||||
|
||||
type ThemeState = Theme.Setting;
|
||||
/**
|
||||
* theme store
|
||||
*/
|
||||
export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
|
||||
const scope = effectScope();
|
||||
const osTheme = usePreferredColorScheme();
|
||||
|
||||
export const useThemeStore = defineStore('theme-store', {
|
||||
state: (): ThemeState => initThemeSettings(),
|
||||
getters: {
|
||||
/** naiveUI的主题配置 */
|
||||
naiveThemeOverrides(state) {
|
||||
const overrides = getNaiveThemeOverrides({ primary: state.themeColor, ...state.otherColor });
|
||||
return overrides;
|
||||
},
|
||||
/** naive-ui暗黑主题 */
|
||||
naiveTheme(state) {
|
||||
return state.darkMode ? darkTheme : undefined;
|
||||
},
|
||||
/** 页面动画模式 */
|
||||
pageAnimateMode(state) {
|
||||
return state.page.animate ? state.page.animateMode : undefined;
|
||||
/**
|
||||
* theme settings
|
||||
*/
|
||||
const settings: Ref<App.Theme.ThemeSetting> = ref(initThemeSettings());
|
||||
|
||||
/**
|
||||
* dark mode
|
||||
*/
|
||||
const darkMode = computed(() => {
|
||||
if (settings.value.themeScheme === 'auto') {
|
||||
return osTheme.value === 'dark';
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
/** 重置theme状态 */
|
||||
resetThemeStore() {
|
||||
sessionStg.remove('themeSettings');
|
||||
this.$reset();
|
||||
},
|
||||
/** 缓存主题配置 */
|
||||
cacheThemeSettings() {
|
||||
const isProd = import.meta.env.PROD;
|
||||
if (isProd) {
|
||||
sessionStg.set('themeSettings', this.$state);
|
||||
}
|
||||
},
|
||||
/** 设置暗黑模式 */
|
||||
setDarkMode(darkMode: boolean) {
|
||||
this.darkMode = darkMode;
|
||||
},
|
||||
/** 设置自动跟随系统主题 */
|
||||
setFollowSystemTheme(visible: boolean) {
|
||||
this.followSystemTheme = visible;
|
||||
},
|
||||
/** 设置自动跟随系统主题 */
|
||||
setIsCustomizeDarkModeTransition(isCustomize: boolean) {
|
||||
this.isCustomizeDarkModeTransition = isCustomize;
|
||||
},
|
||||
/** 自动跟随系统主题 */
|
||||
setAutoFollowSystemMode(darkMode: boolean) {
|
||||
if (this.followSystemTheme) {
|
||||
this.darkMode = darkMode;
|
||||
}
|
||||
},
|
||||
/** 切换/关闭 暗黑模式 */
|
||||
toggleDarkMode() {
|
||||
this.darkMode = !this.darkMode;
|
||||
},
|
||||
/** 设置布局最小宽度 */
|
||||
setLayoutMinWidth(minWidth: number) {
|
||||
this.layout.minWidth = minWidth;
|
||||
},
|
||||
/** 设置布局模式 */
|
||||
setLayoutMode(mode: UnionKey.ThemeLayoutMode) {
|
||||
this.layout.mode = mode;
|
||||
},
|
||||
/** 设置滚动模式 */
|
||||
setScrollMode(mode: UnionKey.ThemeScrollMode) {
|
||||
this.scrollMode = mode;
|
||||
},
|
||||
/** 设置侧边栏反转色 */
|
||||
setSiderInverted(isInverted: boolean) {
|
||||
this.sider.inverted = isInverted;
|
||||
},
|
||||
/** 设置头部反转色 */
|
||||
setHeaderInverted(isInverted: boolean) {
|
||||
this.header.inverted = isInverted;
|
||||
},
|
||||
/** 设置系统主题颜色 */
|
||||
setThemeColor(themeColor: string) {
|
||||
this.themeColor = themeColor;
|
||||
},
|
||||
/** 设置固定头部和多页签 */
|
||||
setIsFixedHeaderAndTab(isFixed: boolean) {
|
||||
this.fixedHeaderAndTab = isFixed;
|
||||
},
|
||||
/** 设置重载按钮可见状态 */
|
||||
setReloadVisible(visible: boolean) {
|
||||
this.showReload = visible;
|
||||
},
|
||||
/** 设置头部高度 */
|
||||
setHeaderHeight(height: number | null) {
|
||||
if (height) {
|
||||
this.header.height = height;
|
||||
}
|
||||
},
|
||||
/** 设置头部面包屑可见 */
|
||||
setHeaderCrumbVisible(visible: boolean) {
|
||||
this.header.crumb.visible = visible;
|
||||
},
|
||||
/** 设置头部面包屑图标可见 */
|
||||
setHeaderCrumbIconVisible(visible: boolean) {
|
||||
this.header.crumb.showIcon = visible;
|
||||
},
|
||||
/** 设置多页签可见 */
|
||||
setTabVisible(visible: boolean) {
|
||||
this.tab.visible = visible;
|
||||
},
|
||||
/** 设置多页签高度 */
|
||||
setTabHeight(height: number | null) {
|
||||
if (height) {
|
||||
this.tab.height = height;
|
||||
}
|
||||
},
|
||||
/** 设置多页签风格 */
|
||||
setTabMode(mode: UnionKey.ThemeTabMode) {
|
||||
this.tab.mode = mode;
|
||||
},
|
||||
/** 设置多页签缓存 */
|
||||
setTabIsCache(isCache: boolean) {
|
||||
this.tab.isCache = isCache;
|
||||
},
|
||||
/** 侧边栏宽度 */
|
||||
setSiderWidth(width: number | null) {
|
||||
if (width) {
|
||||
this.sider.width = width;
|
||||
}
|
||||
},
|
||||
/** 侧边栏折叠时的宽度 */
|
||||
setSiderCollapsedWidth(width: number) {
|
||||
this.sider.collapsedWidth = width;
|
||||
},
|
||||
/** vertical-mix模式下侧边栏宽度 */
|
||||
setMixSiderWidth(width: number | null) {
|
||||
if (width) {
|
||||
this.sider.mixWidth = width;
|
||||
}
|
||||
},
|
||||
/** vertical-mix模式下侧边栏折叠时的宽度 */
|
||||
setMixSiderCollapsedWidth(width: number) {
|
||||
this.sider.mixCollapsedWidth = width;
|
||||
},
|
||||
/** vertical-mix模式下侧边栏展示子菜单的宽度 */
|
||||
setMixSiderChildMenuWidth(width: number) {
|
||||
this.sider.mixChildMenuWidth = width;
|
||||
},
|
||||
/** 设置水平模式的菜单的位置 */
|
||||
setHorizontalMenuPosition(position: UnionKey.ThemeHorizontalMenuPosition) {
|
||||
this.menu.horizontalPosition = position;
|
||||
},
|
||||
/** 设置底部是否显示 */
|
||||
setFooterVisible(isVisible: boolean) {
|
||||
this.footer.visible = isVisible;
|
||||
},
|
||||
/** 设置底部是否固定 */
|
||||
setFooterIsFixed(isFixed: boolean) {
|
||||
this.footer.fixed = isFixed;
|
||||
},
|
||||
/** 设置底部是否固定 */
|
||||
setFooterIsRight(right: boolean) {
|
||||
this.footer.right = right;
|
||||
},
|
||||
/** 设置底部高度 */
|
||||
setFooterHeight(height: number) {
|
||||
this.footer.height = height;
|
||||
},
|
||||
/** 设置底部高度 */
|
||||
setFooterInverted(inverted: boolean) {
|
||||
this.footer.inverted = inverted;
|
||||
},
|
||||
/** 设置切换页面时是否过渡动画 */
|
||||
setPageIsAnimate(animate: boolean) {
|
||||
this.page.animate = animate;
|
||||
},
|
||||
/** 设置页面过渡动画类型 */
|
||||
setPageAnimateMode(mode: UnionKey.ThemeAnimateMode) {
|
||||
this.page.animateMode = mode;
|
||||
|
||||
return settings.value.themeScheme === 'dark';
|
||||
});
|
||||
|
||||
/**
|
||||
* 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 json
|
||||
* @description it is for copy settings
|
||||
*/
|
||||
const settingsJson = computed(() => JSON.stringify(settings.value));
|
||||
|
||||
/**
|
||||
* reset store
|
||||
*/
|
||||
function resetStore() {
|
||||
const themeStore = useThemeStore();
|
||||
|
||||
themeStore.$reset();
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme scheme
|
||||
* @param themeScheme
|
||||
*/
|
||||
function setThemeScheme(themeScheme: UnionKey.ThemeScheme) {
|
||||
settings.value.themeScheme = themeScheme;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
if (key === 'primary') {
|
||||
settings.value.themeColor = color;
|
||||
} else {
|
||||
settings.value.otherColor[key] = color;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* set theme layout
|
||||
* @param mode theme layout mode
|
||||
*/
|
||||
function setThemeLayout(mode: UnionKey.ThemeLayoutMode) {
|
||||
settings.value.layout.mode = mode;
|
||||
}
|
||||
|
||||
/**
|
||||
* setup theme vars to html
|
||||
*/
|
||||
function setupThemeVarsToHtml() {
|
||||
const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value);
|
||||
addThemeVarsToHtml(themeTokens, darkThemeTokens);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// themeColors change, update css vars
|
||||
watch(
|
||||
themeColors,
|
||||
() => {
|
||||
setupThemeVarsToHtml();
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* on scope dispose
|
||||
*/
|
||||
onScopeDispose(() => {
|
||||
scope.stop();
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(settings.value),
|
||||
darkMode,
|
||||
themeColors,
|
||||
naiveTheme,
|
||||
settingsJson,
|
||||
resetStore,
|
||||
setThemeScheme,
|
||||
toggleThemeScheme,
|
||||
updateThemeColors,
|
||||
setThemeLayout
|
||||
};
|
||||
});
|
||||
|
||||
231
src/store/modules/theme/shared.ts
Normal file
231
src/store/modules/theme/shared.ts
Normal file
@ -0,0 +1,231 @@
|
||||
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 { themeVars } from '@/theme/vars';
|
||||
import { localStg } from '@/utils/storage';
|
||||
|
||||
const DARK_CLASS = 'dark';
|
||||
|
||||
/**
|
||||
* init theme settings
|
||||
* @param darkMode is dark mode
|
||||
*/
|
||||
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 settings = localStg.get('themeSettings') || themeSettings;
|
||||
|
||||
const isOverride = localStg.get('overrideThemeFlag') === BUILD_TIME;
|
||||
|
||||
if (!isOverride) {
|
||||
Object.assign(settings, overrideThemeSettings);
|
||||
localStg.set('overrideThemeFlag', BUILD_TIME);
|
||||
}
|
||||
|
||||
return settings;
|
||||
}
|
||||
|
||||
/**
|
||||
* create theme token
|
||||
* @param darkMode is dark mode
|
||||
*/
|
||||
export function createThemeToken(colors: App.Theme.ThemeColor) {
|
||||
const paletteColors = createThemePaletteColors(colors);
|
||||
|
||||
const themeTokens: App.Theme.ThemeToken = {
|
||||
colors: {
|
||||
...paletteColors,
|
||||
nprogress: paletteColors.primary,
|
||||
container: 'rgb(255, 255, 255)',
|
||||
layout: 'rgb(247, 250, 252)',
|
||||
inverted: 'rgb(0, 20, 40)',
|
||||
base_text: 'rgb(31, 31, 31)'
|
||||
},
|
||||
boxShadow: {
|
||||
header: '0 1px 2px rgb(0, 21, 41, 0.08)',
|
||||
sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
|
||||
tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
|
||||
}
|
||||
};
|
||||
|
||||
const darkThemeTokens: App.Theme.ThemeToken = {
|
||||
colors: {
|
||||
...themeTokens.colors,
|
||||
container: 'rgb(28, 28, 28)',
|
||||
layout: 'rgb(18, 18, 18)',
|
||||
base_text: 'rgb(224, 224, 224)'
|
||||
},
|
||||
boxShadow: {
|
||||
...themeTokens.boxShadow
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
themeTokens,
|
||||
darkThemeTokens
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* create theme palette colors
|
||||
* @param colors theme colors
|
||||
*/
|
||||
function createThemePaletteColors(colors: App.Theme.ThemeColor) {
|
||||
const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
|
||||
const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
|
||||
|
||||
colorKeys.forEach(key => {
|
||||
const { palettes, main } = getColorPalette(colors[key], key);
|
||||
|
||||
colorPaletteVar[key] = main.hexcode;
|
||||
|
||||
palettes.forEach(item => {
|
||||
colorPaletteVar[`${key}-${item.number}`] = item.hexcode;
|
||||
});
|
||||
});
|
||||
|
||||
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 } = getRgbOfColor(cssValue);
|
||||
cssValue = `${r} ${g} ${b}`;
|
||||
}
|
||||
|
||||
styles.push(`${cssVarsKey}: ${cssValue}`);
|
||||
}
|
||||
}
|
||||
|
||||
const styleStr = styles.join(';');
|
||||
|
||||
return styleStr;
|
||||
}
|
||||
|
||||
/**
|
||||
* add theme vars to html
|
||||
* @param tokens
|
||||
*/
|
||||
export function addThemeVarsToHtml(tokens: App.Theme.BaseToken, darkTokens: App.Theme.BaseToken) {
|
||||
const cssVarStr = getCssVarByTokens(tokens);
|
||||
const darkCssVarStr = getCssVarByTokens(darkTokens);
|
||||
|
||||
const css = `
|
||||
html {
|
||||
${cssVarStr}
|
||||
}
|
||||
`;
|
||||
|
||||
const darkCss = `
|
||||
html.${DARK_CLASS} {
|
||||
${darkCssVarStr}
|
||||
`;
|
||||
|
||||
const style = document.createElement('style');
|
||||
|
||||
style.innerText = css + darkCss;
|
||||
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* toggle css dark mode
|
||||
* @param darkMode
|
||||
*/
|
||||
export function toggleCssDarkMode(darkMode = false) {
|
||||
function addDarkClass() {
|
||||
document.documentElement.classList.add(DARK_CLASS);
|
||||
}
|
||||
|
||||
function removeDarkClass() {
|
||||
document.documentElement.classList.remove(DARK_CLASS);
|
||||
}
|
||||
|
||||
if (darkMode) {
|
||||
addDarkClass();
|
||||
} else {
|
||||
removeDarkClass();
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
*/
|
||||
function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
|
||||
const colorActions: NaiveColorAction[] = [
|
||||
{ scene: '', handler: color => color },
|
||||
{ scene: 'Suppl', handler: color => color },
|
||||
{ scene: 'Hover', handler: color => getColorByColorPaletteNumber(color, 500) },
|
||||
{ scene: 'Pressed', handler: color => getColorByColorPaletteNumber(color, 700) },
|
||||
{ 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
|
||||
*/
|
||||
export function getNaiveTheme(colors: App.Theme.ThemeColor) {
|
||||
const { primary: colorLoading } = colors;
|
||||
|
||||
const theme: GlobalThemeOverrides = {
|
||||
common: {
|
||||
...getNaiveThemeColors(colors)
|
||||
},
|
||||
LoadingBar: {
|
||||
colorLoading
|
||||
}
|
||||
};
|
||||
|
||||
return theme;
|
||||
}
|
||||
@ -1,13 +1,13 @@
|
||||
import type { PiniaPluginContext } from 'pinia';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { SetupStoreId } from '@/enum';
|
||||
|
||||
/**
|
||||
* setup语法的重置状态插件
|
||||
* the plugin reset the state of the store which is written by setup syntax
|
||||
* @param context
|
||||
* @description 请将用setup语法的状态id写入到setupSyntaxIds
|
||||
*/
|
||||
export function resetSetupStore(context: PiniaPluginContext) {
|
||||
const setupSyntaxIds = ['setup-store'];
|
||||
const setupSyntaxIds = Object.values(SetupStoreId) as string[];
|
||||
|
||||
if (setupSyntaxIds.includes(context.store.$id)) {
|
||||
const { $state } = context.store;
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
import { effectScope, onScopeDispose, watch } from 'vue';
|
||||
import { useFullscreen } from '@vueuse/core';
|
||||
import { useAppStore } from '../modules';
|
||||
|
||||
/** 订阅app store */
|
||||
export default function subscribeAppStore() {
|
||||
const { isFullscreen, toggle } = useFullscreen();
|
||||
|
||||
const app = useAppStore();
|
||||
|
||||
const scope = effectScope();
|
||||
|
||||
function update() {
|
||||
if (app.contentFull && !isFullscreen.value) {
|
||||
toggle();
|
||||
}
|
||||
if (!app.contentFull && isFullscreen.value) {
|
||||
toggle();
|
||||
}
|
||||
}
|
||||
|
||||
scope.run(() => {
|
||||
watch(
|
||||
() => app.contentFull,
|
||||
() => {
|
||||
update();
|
||||
}
|
||||
);
|
||||
|
||||
watch(isFullscreen, newValue => {
|
||||
if (!newValue) {
|
||||
app.setContentFull(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onScopeDispose(() => {
|
||||
scope.stop();
|
||||
});
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import subscribeAppStore from './app';
|
||||
import subscribeThemeStore from './theme';
|
||||
|
||||
/** 订阅状态 */
|
||||
export function subscribeStore() {
|
||||
subscribeAppStore();
|
||||
subscribeThemeStore();
|
||||
}
|
||||
@ -1,119 +0,0 @@
|
||||
import { effectScope, onScopeDispose, watch } from 'vue';
|
||||
import { useOsTheme } from 'naive-ui';
|
||||
import type { GlobalThemeOverrides } from 'naive-ui';
|
||||
import { useElementSize } from '@vueuse/core';
|
||||
import { kebabCase } from 'lodash-es';
|
||||
import { sessionStg, getColorPalettes, getRgbOfColor } from '@/utils';
|
||||
import { useThemeStore } from '../modules';
|
||||
|
||||
/** 订阅theme store */
|
||||
export default function subscribeThemeStore() {
|
||||
const theme = useThemeStore();
|
||||
const osTheme = useOsTheme();
|
||||
const { width } = useElementSize(document.documentElement);
|
||||
const { addDarkClass, removeDarkClass } = handleCssDarkMode();
|
||||
const scope = effectScope();
|
||||
|
||||
scope.run(() => {
|
||||
// 监听主题颜色
|
||||
watch(
|
||||
() => theme.themeColor,
|
||||
newValue => {
|
||||
sessionStg.set('themeColor', newValue);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听naiveUI themeOverrides
|
||||
watch(
|
||||
() => theme.naiveThemeOverrides,
|
||||
newValue => {
|
||||
if (newValue.common) {
|
||||
addThemeCssVarsToHtml(newValue.common);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 监听暗黑模式
|
||||
watch(
|
||||
() => theme.darkMode,
|
||||
newValue => {
|
||||
if (newValue) {
|
||||
addDarkClass();
|
||||
} else {
|
||||
removeDarkClass();
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
);
|
||||
|
||||
// 监听操作系统主题模式
|
||||
watch(
|
||||
osTheme,
|
||||
newValue => {
|
||||
const isDark = newValue === 'dark';
|
||||
theme.setAutoFollowSystemMode(isDark);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 禁用横向滚动(页面切换时,过渡动画会产生水平方向的滚动条, 小于最小宽度时，不禁止)
|
||||
watch(width, newValue => {
|
||||
if (newValue < theme.layout.minWidth) {
|
||||
document.documentElement.style.overflowX = 'auto';
|
||||
} else {
|
||||
document.documentElement.style.overflowX = 'hidden';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onScopeDispose(() => {
|
||||
scope.stop();
|
||||
});
|
||||
}
|
||||
|
||||
/** css 暗黑模式 */
|
||||
function handleCssDarkMode() {
|
||||
const DARK_CLASS = 'dark';
|
||||
function addDarkClass() {
|
||||
document.documentElement.classList.add(DARK_CLASS);
|
||||
}
|
||||
function removeDarkClass() {
|
||||
document.documentElement.classList.remove(DARK_CLASS);
|
||||
}
|
||||
return {
|
||||
addDarkClass,
|
||||
removeDarkClass
|
||||
};
|
||||
}
|
||||
|
||||
type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
|
||||
type ThemeVarsKeys = keyof ThemeVars;
|
||||
|
||||
/** 添加css vars至html */
|
||||
function addThemeCssVarsToHtml(themeVars: ThemeVars) {
|
||||
const keys = Object.keys(themeVars) as ThemeVarsKeys[];
|
||||
const style: string[] = [];
|
||||
keys.forEach(key => {
|
||||
const color = themeVars[key];
|
||||
|
||||
if (color) {
|
||||
const { r, g, b } = getRgbOfColor(color);
|
||||
style.push(`--${kebabCase(key)}: ${r},${g},${b}`);
|
||||
|
||||
if (key === 'primaryColor') {
|
||||
const colorPalettes = getColorPalettes(color);
|
||||
|
||||
colorPalettes.forEach((palette, index) => {
|
||||
const { r: pR, g: pG, b: pB } = getRgbOfColor(palette);
|
||||
style.push(`--${kebabCase(key)}${index + 1}: ${pR},${pG},${pB}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
const styleStr = style.join(';');
|
||||
document.documentElement.style.cssText += styleStr;
|
||||
}
|
||||
Reference in New Issue
Block a user