feat(projects): 1.0 beta

This commit is contained in:
Soybean
2023-11-17 08:45:00 +08:00
parent 1ea4817f6a
commit e918a2c0f5
499 changed files with 15918 additions and 24708 deletions

View File

@ -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
};
});