go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

release: update 4.4.0

Browse Source
This commit is contained in:
xiaoxian521 2023-06-14 16:29:45 +08:00
parent 6e02ae14a0
commit b6859d7920
24 changed files with 779 additions and 959 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -4,7 +4,6 @@ dist
dist-ssr
*.local
.eslintcache
.stylelintcache
report.html
yarn.lock

3
build/optimize.ts
View File

@ -14,8 +14,7 @@ const include = [
"sortablejs",
"@vueuse/core",
"@pureadmin/utils",
"responsive-storage",
"element-resize-detector"
"responsive-storage"
];
/**

32
package.json
View File

@ -1,6 +1,6 @@
{
"name": "pure-admin-thin",
"version": "4.3.0",
"version": "4.4.0",
"private": true,
"scripts": {
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@ -30,7 +30,7 @@
],
"dependencies": {
"@pureadmin/descriptions": "^1.1.1",
"@pureadmin/table": "^2.2.0",
"@pureadmin/table": "^2.3.2",
"@pureadmin/utils": "^1.9.3",
"@vueuse/core": "^10.1.2",
"@vueuse/motion": "^2.0.0",
@ -39,7 +39,6 @@
"dayjs": "^1.11.8",
"echarts": "^5.4.2",
"element-plus": "^2.3.6",
"element-resize-detector": "^1.2.4",
"js-cookie": "^3.0.5",
"mitt": "^3.0.0",
"mockjs": "^1.1.0",
@ -60,15 +59,14 @@
"@iconify-icons/ri": "^1.2.8",
"@iconify/vue": "^4.1.1",
"@pureadmin/theme": "^3.0.0",
"@types/element-resize-detector": "1.1.3",
"@types/js-cookie": "^3.0.3",
"@types/mockjs": "^1.0.7",
"@types/node": "^20.2.5",
"@types/node": "^20.3.1",
"@types/nprogress": "0.2.0",
"@types/qs": "^6.9.7",
"@types/sortablejs": "^1.15.1",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.8",
"@typescript-eslint/eslint-plugin": "^5.59.11",
"@typescript-eslint/parser": "^5.59.11",
"@vitejs/plugin-vue": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0",
@ -89,31 +87,31 @@
"prettier": "^2.8.8",
"pretty-quick": "^3.1.3",
"rimraf": "^5.0.1",
"rollup-plugin-visualizer": "^5.9.0",
"sass": "^1.62.1",
"sass-loader": "^13.3.1",
"stylelint": "^15.6.3",
"rollup-plugin-visualizer": "^5.9.2",
"sass": "^1.63.3",
"sass-loader": "^13.3.2",
"stylelint": "^15.7.0",
"stylelint-config-html": "^1.1.0",
"stylelint-config-recess-order": "^4.0.0",
"stylelint-config-recess-order": "^4.2.0",
"stylelint-config-recommended": "^12.0.0",
"stylelint-config-recommended-scss": "^11.0.0",
"stylelint-config-recommended-scss": "^12.0.0",
"stylelint-config-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^33.0.0",
"stylelint-config-standard-scss": "^9.0.0",
"stylelint-order": "^6.0.3",
"stylelint-prettier": "^3.0.0",
"stylelint-scss": "^5.0.0",
"stylelint-scss": "^5.0.1",
"svgo": "^3.0.2",
"tailwindcss": "^3.3.2",
"terser": "^5.17.7",
"terser": "^5.18.0",
"typescript": "5.0.4",
"vite": "^4.3.9",
"vite-plugin-cdn-import": "^0.3.5",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-mock": "^2.9.6",
"vite-plugin-mock": "2.9.6",
"vite-plugin-remove-console": "^2.1.1",
"vite-svg-loader": "^4.0.0",
"vue-eslint-parser": "^9.3.0",
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.6.5"
},
"pnpm": {

1149
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
public/serverConfig.json
View File

@ -1,5 +1,5 @@
{
"Version": "4.3.0",
"Version": "4.4.0",
"Title": "PureAdmin",
"FixedHeader": true,
"HiddenSideBar": false,

4
src/directives/auth/index.ts
View File

@ -7,7 +7,9 @@ export const auth: Directive = {
if (value) {
!hasAuth(value) && el.parentNode?.removeChild(el);
} else {
throw new Error("need auths! Like v-auth=\"['btn.add','btn.edit']\"");
throw new Error(
"[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
);
}
}
};

33
src/directives/copy/index.ts Normal file
View File

@ -0,0 +1,33 @@
import { message } from "@/utils/message";
import { useEventListener } from "@vueuse/core";
import { copyTextToClipboard } from "@pureadmin/utils";
import { Directive, type DirectiveBinding } from "vue";
interface CopyEl extends HTMLElement {
copyValue: string;
}
/** 文本复制指令（默认双击复制） */
export const copy: Directive = {
mounted(el: CopyEl, binding: DirectiveBinding) {
const { value } = binding;
if (value) {
el.copyValue = value;
const arg = binding.arg ?? "dblclick";
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
useEventListener(el, arg, () => {
const success = copyTextToClipboard(el.copyValue);
success
? message("复制成功", { type: "success" })
: message("复制失败", { type: "error" });
});
} else {
throw new Error(
'[Directive: copy]: need value! Like v-copy="modelValue"'
);
}
},
updated(el: CopyEl, binding: DirectiveBinding) {
el.copyValue = binding.value;
}
};

27
src/directives/elResizeDetector/index.ts
View File

@ -1,27 +0,0 @@
import { Directive, type DirectiveBinding, type VNode } from "vue";
import elementResizeDetectorMaker from "element-resize-detector";
import type { Erd } from "element-resize-detector";
import { emitter } from "@/utils/mitt";
const erd: Erd = elementResizeDetectorMaker({
strategy: "scroll"
});
export const resize: Directive = {
mounted(el: HTMLElement, binding?: DirectiveBinding, vnode?: VNode) {
erd.listenTo(el, elem => {
const width = elem.offsetWidth;
const height = elem.offsetHeight;
if (binding?.instance) {
emitter.emit("resize", { detail: { width, height } });
} else {
vnode.el.dispatchEvent(
new CustomEvent("resize", { detail: { width, height } })
);
}
});
},
unmounted(el: HTMLElement) {
erd.uninstall(el);
}
};

3
src/directives/index.ts
View File

@ -1,2 +1,3 @@
export * from "./auth";
export * from "./elResizeDetector";
export * from "./copy";
export * from "./optimize";

55
src/directives/optimize/index.ts Normal file
View File

@ -0,0 +1,55 @@
import {
isFunction,
isObject,
isArray,
debounce,
throttle
} from "@pureadmin/utils";
import { useEventListener } from "@vueuse/core";
import { Directive, type DirectiveBinding } from "vue";
/** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
export const optimize: Directive = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
const { value } = binding;
const optimizeType = binding.arg ?? "debounce";
const type = ["debounce", "throttle"].find(t => t === optimizeType);
if (type) {
if (value && value.event && isFunction(value.fn)) {
let params = value?.params;
if (params) {
if (isArray(params) || isObject(params)) {
params = isObject(params) ? Array.of(params) : params;
} else {
throw new Error(
"[Directive: optimize]: `params` must be an array or object"
);
}
}
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
useEventListener(
el,
value.event,
type === "debounce"
? debounce(
params ? () => value.fn(...params) : value.fn,
value?.timeout ?? 200,
value?.immediate ?? false
)
: throttle(
params ? () => value.fn(...params) : value.fn,
value?.timeout ?? 1000
)
);
} else {
throw new Error(
"[Directive: optimize]: `event` and `fn` are required, and `fn` must be a function"
);
}
} else {
throw new Error(
"[Directive: optimize]: only `debounce` and `throttle` are supported"
);
}
}
};

11
src/layout/components/panel/index.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import { emitter } from "@/utils/mitt";
import { onClickOutside } from "@vueuse/core";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import Close from "@iconify-icons/ep/close";
const target = ref(null);
@ -27,8 +27,15 @@ onClickOutside(target, (event: any) => {
show.value = false;
});
emitter.on("openPanel", () => {
onMounted(() => {
emitter.on("openPanel", () => {
show.value = true;
});
});
onBeforeUnmount(() => {
// 解绑`openPanel`公共事件，防止多次触发
emitter.off("openPanel");
});
</script>

19
src/layout/components/sidebar/horizontal.vue
View File

@ -1,8 +1,9 @@
<script setup lang="ts">
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import { ref, watch, nextTick } from "vue";
import SidebarItem from "./sidebarItem.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { ref, nextTick, computed } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import { usePermissionStoreHook } from "@/store/modules/permission";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
@ -13,26 +14,21 @@ const menuRef = ref();
const {
route,
title,
routers,
logout,
backTopMenu,
onPanel,
menuSelect,
username,
userAvatar,
avatarsStyle
} = useNav();
const defaultActive = computed(() =>
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
);
nextTick(() => {
menuRef.value?.handleResize();
});
watch(
() => route.path,
() => {
menuSelect(route.path, routers);
}
);
</script>
<template>
@ -49,8 +45,7 @@ watch(
ref="menuRef"
mode="horizontal"
class="horizontal-header-menu"
:default-active="route.path"
@select="indexPath => menuSelect(indexPath, routers)"
:default-active="defaultActive"
>
<sidebar-item
v-for="route in usePermissionStoreHook().wholeMenus"

11
src/layout/components/sidebar/mixNav.vue
View File

@ -2,6 +2,7 @@
import extraIcon from "./extraIcon.vue";
import Search from "../search/index.vue";
import Notice from "../notice/index.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@ -16,10 +17,8 @@ const defaultActive = ref(null);
const {
route,
device,
routers,
logout,
onPanel,
menuSelect,
resolvePath,
username,
userAvatar,
@ -31,10 +30,9 @@ function getDefaultActive(routePath) {
const wholeMenus = usePermissionStoreHook().wholeMenus;
/** 当前路由的父级路径 */
const parentRoutes = getParentPaths(routePath, wholeMenus)[0];
defaultActive.value = findRouteByPath(
parentRoutes,
wholeMenus
)?.children[0]?.path;
defaultActive.value = !isAllEmpty(route.meta?.activePath)
? route.meta.activePath
: findRouteByPath(parentRoutes, wholeMenus)?.children[0]?.path;
}
onMounted(() => {
@ -65,7 +63,6 @@ watch(
mode="horizontal"
class="horizontal-header-menu"
:default-active="defaultActive"
@select="indexPath => menuSelect(indexPath, routers)"
>
<el-menu-item
v-for="route in usePermissionStoreHook().wholeMenus"

43
src/layout/components/sidebar/vertical.vue
View File

@ -5,11 +5,11 @@ import { emitter } from "@/utils/mitt";
import SidebarItem from "./sidebarItem.vue";
import leftCollapse from "./leftCollapse.vue";
import { useNav } from "@/layout/hooks/useNav";
import { storageLocal } from "@pureadmin/utils";
import { responsiveStorageNameSpace } from "@/config";
import { ref, computed, watch, onBeforeMount } from "vue";
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
import { findRouteByPath, getParentPaths } from "@/router/utils";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
const route = useRoute();
const showLogo = ref(
@ -18,8 +18,7 @@ const showLogo = ref(
)?.showLogo ?? true
);
const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
useNav();
const { device, pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
const subMenuData = ref([]);
@ -33,7 +32,13 @@ const loading = computed(() =>
pureApp.layout === "mix" ? false : menuData.value.length === 0 ? true : false
);
function getSubMenuData(path: string) {
const defaultActive = computed(() =>
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
);
function getSubMenuData() {
let path = "";
path = defaultActive.value;
subMenuData.value = [];
// path的上级路由组成的数组
const parentPathArr = getParentPaths(
@ -49,22 +54,27 @@ function getSubMenuData(path: string) {
subMenuData.value = parenetRoute?.children;
}
getSubMenuData(route.path);
watch(
() => [route.path, usePermissionStoreHook().wholeMenus],
() => {
if (route.path.includes("/redirect")) return;
getSubMenuData();
menuSelect(route.path);
}
);
onMounted(() => {
getSubMenuData();
onBeforeMount(() => {
emitter.on("logoChange", key => {
showLogo.value = key;
});
});
watch(
() => [route.path, usePermissionStoreHook().wholeMenus],
() => {
if (route.path.includes("/redirect")) return;
getSubMenuData(route.path);
menuSelect(route.path, routers);
}
);
onBeforeUnmount(() => {
// 解绑`logoChange`公共事件，防止多次触发
emitter.off("logoChange");
});
</script>
<template>
@ -83,9 +93,8 @@ watch(
mode="vertical"
class="outer-most select-none"
:collapse="isCollapse"
:default-active="route.path"
:default-active="defaultActive"
:collapse-transition="false"
@select="indexPath => menuSelect(indexPath, routers)"
>
<sidebar-item
v-for="routes in menuData"

76
src/layout/components/tag/index.vue
View File

@ -3,12 +3,12 @@ import { emitter } from "@/utils/mitt";
import { RouteConfigs } from "../../types";
import { useTags } from "../../hooks/useTag";
import { routerArrays } from "@/layout/types";
import { isEqual, isAllEmpty } from "@pureadmin/utils";
import { handleAliveRoute, getTopMenu } from "@/router/utils";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useResizeObserver, useFullscreen } from "@vueuse/core";
import { isEqual, isAllEmpty, debounce } from "@pureadmin/utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
@ -52,20 +52,22 @@ const topPath = getTopMenu()?.path;
const { VITE_HIDE_HOME } = import.meta.env;
const { isFullscreen, toggle } = useFullscreen();
const dynamicTagView = () => {
const dynamicTagView = async () => {
await nextTick();
const index = multiTags.value.findIndex(item => {
if (item.query) {
if (!isAllEmpty(route.query)) {
return isEqual(route.query, item.query);
} else if (item.params) {
} else if (!isAllEmpty(route.params)) {
return isEqual(route.params, item.params);
} else {
return item.path === route.path;
return route.path === item.path;
}
});
moveToView(index);
};
const moveToView = async (index: number): Promise<void> => {
await nextTick();
const tabNavPadding = 10;
if (!instance.refs["dynamic" + index]) return;
const tabItemEl = instance.refs["dynamic" + index][0];
@ -76,9 +78,6 @@ const moveToView = async (index: number): Promise<void> => {
? scrollbarDom.value?.offsetWidth
: 0;
// 获取视图更新后dom
await nextTick();
// 已有标签页总长度（包含溢出部分）
const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
@ -133,31 +132,29 @@ const handleScroll = (offset: number): void => {
}
};
function dynamicRouteTag(value: string, parentPath: string): void {
function dynamicRouteTag(value: string): void {
const hasValue = multiTags.value.some(item => {
return item.path === value;
});
function concatPath(arr: object[], value: string, parentPath: string) {
function concatPath(arr: object[], value: string) {
if (!hasValue) {
arr.forEach((arrItem: any) => {
const pathConcat = parentPath + arrItem.path;
if (arrItem.path === value || pathConcat === value) {
if (arrItem.path === value || arrItem.path === value) {
useMultiTagsStoreHook().handleTags("push", {
path: value,
parentPath: `/${parentPath.split("/")[1]}`,
meta: arrItem.meta,
name: arrItem.name
});
} else {
if (arrItem.children && arrItem.children.length > 0) {
concatPath(arrItem.children, value, parentPath);
concatPath(arrItem.children, value);
}
}
});
}
}
concatPath(router.options.routes as any, value, parentPath);
concatPath(router.options.routes as any, value);
}
/** 刷新路由 */
@ -167,7 +164,7 @@ function onFresh() {
path: "/redirect" + fullPath,
query
});
handleAliveRoute(route as toRouteType, "refresh");
handleAliveRoute(route as ToRouteType, "refresh");
}
function deleteDynamicTag(obj: any, current: any, tag?: string) {
@ -240,7 +237,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
function deleteMenu(item, tag?: string) {
deleteDynamicTag(item, item.path, tag);
handleAliveRoute(route as toRouteType);
handleAliveRoute(route as ToRouteType);
}
function onClickDrop(key, item, selectRoute?: RouteConfigs) {
@ -288,7 +285,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
length: multiTags.value.length
});
router.push(topPath);
handleAliveRoute(route as toRouteType);
handleAliveRoute(route as ToRouteType);
break;
case 6:
// 整体页面全屏
@ -463,7 +460,17 @@ function tagOnClick(item) {
// showMenuModel(item?.path, item?.query);
}
onBeforeMount(() => {
watch(route, () => {
activeIndex.value = -1;
dynamicTagView();
});
watch(isFullscreen, () => {
tagsViews[6].icon = Fullscreen;
tagsViews[6].text = "全屏";
});
onMounted(() => {
if (!instance) return;
// 根据当前路由初始化操作标签页的禁用状态
@ -481,32 +488,25 @@ onBeforeMount(() => {
});
// 接收侧边栏切换传递过来的参数
emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
dynamicRouteTag(indexPath, parentPath);
emitter.on("changLayoutRoute", indexPath => {
dynamicRouteTag(indexPath);
setTimeout(() => {
showMenuModel(indexPath);
});
});
});
watch([route], () => {
activeIndex.value = -1;
dynamicTagView();
});
watch(isFullscreen, () => {
tagsViews[6].icon = Fullscreen;
tagsViews[6].text = "全屏";
});
onMounted(() => {
useResizeObserver(
scrollbarDom,
useDebounceFn(() => {
dynamicTagView();
}, 200)
debounce(() => dynamicTagView())
);
});
onBeforeUnmount(() => {
// 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
emitter.off("tagViewsChange");
emitter.off("tagViewsShowModel");
emitter.off("changLayoutRoute");
});
</script>
<template>

35
src/layout/hooks/useNav.ts
View File

@ -5,9 +5,9 @@ import { routeMetaType } from "../types";
import userAvatar from "@/assets/user.jpg";
import { getTopMenu } from "@/router/utils";
import { useGlobal } from "@pureadmin/utils";
import { computed, CSSProperties } from "vue";
import { useRouter, useRoute } from "vue-router";
import { router, remainingPaths } from "@/router";
import { computed, type CSSProperties } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { useUserStoreHook } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission";
@ -97,38 +97,13 @@ export function useNav() {
}
}
function menuSelect(indexPath: string, routers): void {
if (wholeMenus.value.length === 0) return;
if (isRemaining(indexPath)) return;
let parentPath = "";
const parentPathIndex = indexPath.lastIndexOf("/");
if (parentPathIndex > 0) {
parentPath = indexPath.slice(0, parentPathIndex);
}
/** 找到当前路由的信息 */
function findCurrentRoute(indexPath: string, routes) {
if (!routes) return console.error(errorInfo);
return routes.map(item => {
if (item.path === indexPath) {
if (item.redirect) {
findCurrentRoute(item.redirect, item.children);
} else {
/** 切换左侧菜单 通知标签页 */
emitter.emit("changLayoutRoute", {
indexPath,
parentPath
});
}
} else {
if (item.children) findCurrentRoute(indexPath, item.children);
}
});
}
findCurrentRoute(indexPath, routers);
function menuSelect(indexPath: string) {
if (wholeMenus.value.length === 0 || isRemaining(indexPath)) return;
emitter.emit("changLayoutRoute", indexPath);
}
/** 判断路径是否参与菜单 */
function isRemaining(path: string): boolean {
function isRemaining(path: string) {
return remainingPaths.includes(path);
}

12
src/layout/index.vue
View File

@ -3,14 +3,15 @@ import "animate.css";
// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
import "@/components/ReIcon/src/offlineIcon";
import { setType } from "./types";
import { emitter } from "@/utils/mitt";
import { useLayout } from "./hooks/useLayout";
import { useResizeObserver } from "@vueuse/core";
import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings";
import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import {
h,
ref,
reactive,
computed,
onMounted,
@ -26,6 +27,7 @@ import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue";
import backTop from "@/assets/svg/back_top.svg?component";
const appWrapperRef = ref();
const { isDark } = useDark();
const { layout } = useLayout();
const isMobile = deviceDetection();
@ -78,10 +80,10 @@ function toggle(device: string, bool: boolean) {
// 判断是否可自动关闭菜单栏
let isAutoCloseSidebar = true;
// 监听容器
emitter.on("resize", ({ detail }) => {
useResizeObserver(appWrapperRef, entries => {
if (isMobile) return;
const { width } = detail;
const entry = entries[0];
const { width } = entry.contentRect;
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
/** width app-wrapper类容器宽度
* 0 < width <= 760 隐藏侧边栏
@ -147,7 +149,7 @@ const layoutHeader = defineComponent({
</script>
<template>
<div :class="['app-wrapper', set.classes]" v-resize>
<div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
<div
v-show="
set.device === 'mobile' &&

2
src/layout/types.ts
View File

@ -6,7 +6,6 @@ export const routerArrays: Array<RouteConfigs> =
? [
{
path: "/welcome",
parentPath: "/",
meta: {
title: "首页",
icon: "homeFilled"
@ -25,7 +24,6 @@ export type routeMetaType = {
export type RouteConfigs = {
path?: string;
parentPath?: string;
query?: object;
params?: object;
meta?: routeMetaType;

5
src/router/index.ts
View File

@ -100,7 +100,7 @@ const whiteList = ["/login"];
const { VITE_HIDE_HOME } = import.meta.env;
router.beforeEach((to: toRouteType, _from, next) => {
router.beforeEach((to: ToRouteType, _from, next) => {
if (to.meta?.keepAlive) {
handleAliveRoute(to, "add");
// 页面整体刷新和点击标签页刷新
@ -174,7 +174,8 @@ router.beforeEach((to: toRouteType, _from, next) => {
}
}
}
router.push(to.fullPath);
// 确保动态路由完全加入路由列表并且不影响静态路由（注意：动态路由刷新时router.beforeEach可能会触发两次，第一次触发动态路由还未完全添加，第二次动态路由才完全添加到路由列表，如果需要在router.beforeEach做一些判断可以在to.name存在的条件下去判断，这样就只会触发一次）
if (isAllEmpty(to.name)) router.push(to.fullPath);
});
}
toCorrectRoute();

2
src/router/utils.ts
View File

@ -256,7 +256,7 @@ function formatTwoStageRoutes(routesList: RouteRecordRaw[]) {
}
/** 处理缓存路由（添加、删除、刷新） */
function handleAliveRoute({ name }: toRouteType, mode?: string) {
function handleAliveRoute({ name }: ToRouteType, mode?: string) {
switch (mode) {
case "add":
usePermissionStoreHook().cacheOperate({

1
src/store/modules/types.ts
View File

@ -23,7 +23,6 @@ export type appType = {
export type multiType = {
path: string;
parentPath: string;
name: string;
meta: any;
query?: object;

12
src/utils/mitt.ts
View File

@ -1,21 +1,13 @@
import type { Emitter } from "mitt";
import mitt from "mitt";
/** 全局公共事件需要在此处添加类型 */
type Events = {
resize: {
detail: {
width: number;
height: number;
};
};
openPanel: string;
tagViewsChange: string;
tagViewsShowModel: string;
logoChange: boolean;
changLayoutRoute: {
indexPath: string;
parentPath: string;
};
changLayoutRoute: string;
};
export const emitter: Emitter<Events> = mitt<Events>();

93
types/global.d.ts vendored
View File

@ -7,7 +7,6 @@ import type {
import type { ECharts } from "echarts";
import type { IconifyIcon } from "@iconify/vue";
import type { TableColumns } from "@pureadmin/table";
import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
/**
* 全局类型声明，无需引入直接在 `.vue` 、`.ts` 、`.tsx` 文件使用即可获得类型提示
@ -150,98 +149,6 @@ declare global {
tags?: Array<any>;
}
/**
* `src/router` 文件夹里的类型声明
*/
interface toRouteType extends RouteLocationNormalized {
meta: {
roles: Array<string>;
keepAlive?: boolean;
dynamicLevel?: string;
};
}
/**
* @description 完整子路由配置表
*/
interface RouteChildrenConfigsTable {
/** 子路由地址 `必填` */
path: string;
/** 路由名字（对应不要重复，和当前组件的`name`保持一致）`必填` */
name?: string;
/** 路由重定向 `可选` */
redirect?: string;
/** 按需加载组件 `可选` */
component?: RouteComponent;
meta?: {
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
title: string;
/** 菜单图标 `可选` */
icon?: string | FunctionalComponent | IconifyIcon;
/** 菜单名称右侧的额外图标 */
extraIcon?: string | FunctionalComponent | IconifyIcon;
/** 是否在菜单中显示（默认`true`）`可选` */
showLink?: boolean;
/** 是否显示父级菜单 `可选` */
showParent?: boolean;
/** 页面级别权限设置 `可选` */
roles?: Array<string>;
/** 按钮级别权限设置 `可选` */
auths?: Array<string>;
/** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */
keepAlive?: boolean;
/** 内嵌的`iframe`链接 `可选` */
frameSrc?: string;
/** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
frameLoading?: boolean;
/** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */
transition?: {
/**
* @description 当前路由动画效果
* @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
* @see animate.css {@link https://animate.style}
*/
name?: string;
/** 进场动画 */
enterTransition?: string;
/** 离场动画 */
leaveTransition?: string;
};
// 是否不添加信息到标签页，（默认`false`）
hiddenTag?: boolean;
/** 动态路由可打开的最大数量 `可选` */
dynamicLevel?: number;
};
/** 子路由配置项 */
children?: Array<RouteChildrenConfigsTable>;
}
/**
* @description 整体路由配置表（包括完整子路由）
*/
interface RouteConfigsTable {
/** 路由地址 `必填` */
path: string;
/** 路由名字（保持唯一）`可选` */
name?: string;
/** `Layout`组件 `可选` */
component?: RouteComponent;
/** 路由重定向 `可选` */
redirect?: string;
meta?: {
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
title: string;
/** 菜单图标 `可选` */
icon?: string | FunctionalComponent | IconifyIcon;
/** 是否在菜单中显示（默认`true`）`可选` */
showLink?: boolean;
/** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
rank?: number;
};
/** 子路由配置项 */
children?: Array<RouteChildrenConfigsTable>;
}
/**
* 平台里所有组件实例都能访问到的全局属性对象的类型声明
*/

105
types/router.d.ts vendored Normal file
View File

@ -0,0 +1,105 @@
// 全局路由类型声明
import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
declare global {
interface ToRouteType extends RouteLocationNormalized {
meta: CustomizeRouteMeta;
}
/**
* @description 完整子路由的`meta`配置表
*/
interface CustomizeRouteMeta {
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
title: string;
/** 菜单图标 `可选` */
icon?: string | FunctionalComponent | IconifyIcon;
/** 菜单名称右侧的额外图标 */
extraIcon?: string | FunctionalComponent | IconifyIcon;
/** 是否在菜单中显示（默认`true`）`可选` */
showLink?: boolean;
/** 是否显示父级菜单 `可选` */
showParent?: boolean;
/** 页面级别权限设置 `可选` */
roles?: Array<string>;
/** 按钮级别权限设置 `可选` */
auths?: Array<string>;
/** 路由组件缓存（开启 `true`、关闭 `false`）`可选` */
keepAlive?: boolean;
/** 内嵌的`iframe`链接 `可选` */
frameSrc?: string;
/** `iframe`页是否开启首次加载动画（默认`true`）`可选` */
frameLoading?: boolean;
/** 页面加载动画（有两种形式，一种直接采用vue内置的`transitions`动画，另一种是使用`animate.css`写进、离场动画）`可选` */
transition?: {
/**
* @description 当前路由动画效果
* @see {@link https://next.router.vuejs.org/guide/advanced/transitions.html#transitions}
* @see animate.css {@link https://animate.style}
*/
name?: string;
/** 进场动画 */
enterTransition?: string;
/** 离场动画 */
leaveTransition?: string;
};
// 是否不添加信息到标签页，（默认`false`）
hiddenTag?: boolean;
/** 动态路由可打开的最大数量 `可选` */
dynamicLevel?: number;
/** 将某个菜单激活
* （主要用于通过`query`或`params`传参的路由，当它们通过配置`showLink: false`后不在菜单中显示，就不会有任何菜单高亮，
* 而通过设置`activePath`指定激活菜单即可获得高亮，`activePath`为指定激活菜单的`path`）
*/
activePath?: string;
}
/**
* @description 完整子路由配置表
*/
interface RouteChildrenConfigsTable {
/** 子路由地址 `必填` */
path: string;
/** 路由名字（对应不要重复，和当前组件的`name`保持一致）`必填` */
name?: string;
/** 路由重定向 `可选` */
redirect?: string;
/** 按需加载组件 `可选` */
component?: RouteComponent;
meta?: CustomizeRouteMeta;
/** 子路由配置项 */
children?: Array<RouteChildrenConfigsTable>;
}
/**
* @description 整体路由配置表（包括完整子路由）
*/
interface RouteConfigsTable {
/** 路由地址 `必填` */
path: string;
/** 路由名字（保持唯一）`可选` */
name?: string;
/** `Layout`组件 `可选` */
component?: RouteComponent;
/** 路由重定向 `可选` */
redirect?: string;
meta?: {
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
title: string;
/** 菜单图标 `可选` */
icon?: string | FunctionalComponent | IconifyIcon;
/** 是否在菜单中显示（默认`true`）`可选` */
showLink?: boolean;
/** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
rank?: number;
};
/** 子路由配置项 */
children?: Array<RouteChildrenConfigsTable>;
}
}
// https://router.vuejs.org/zh/guide/advanced/meta.html#typescript
declare module "vue-router" {
interface RouteMeta extends CustomizeRouteMeta {}
}