Browse Source

release: update `4.4.0`

i18n
xiaoxian521 1 year ago
parent
commit
97f0e1531c
  1. 3
      build/optimize.ts
  2. 32
      package.json
  3. 1149
      pnpm-lock.yaml
  4. 2
      public/serverConfig.json
  5. 4
      src/directives/auth/index.ts
  6. 33
      src/directives/copy/index.ts
  7. 27
      src/directives/elResizeDetector/index.ts
  8. 3
      src/directives/index.ts
  9. 55
      src/directives/optimize/index.ts
  10. 11
      src/layout/components/panel/index.vue
  11. 19
      src/layout/components/sidebar/horizontal.vue
  12. 11
      src/layout/components/sidebar/mixNav.vue
  13. 43
      src/layout/components/sidebar/vertical.vue
  14. 76
      src/layout/components/tag/index.vue
  15. 33
      src/layout/hooks/useNav.ts
  16. 12
      src/layout/index.vue
  17. 2
      src/layout/types.ts
  18. 5
      src/router/index.ts
  19. 2
      src/router/utils.ts
  20. 1
      src/store/modules/types.ts
  21. 12
      src/utils/mitt.ts
  22. 93
      types/global.d.ts
  23. 105
      types/router.d.ts

3
build/optimize.ts

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

32
package.json

@ -1,6 +1,6 @@
{ {
"name": "pure-admin-thin", "name": "pure-admin-thin",
"version": "4.3.0",
"version": "4.4.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite", "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@ -30,7 +30,7 @@
], ],
"dependencies": { "dependencies": {
"@pureadmin/descriptions": "^1.1.1", "@pureadmin/descriptions": "^1.1.1",
"@pureadmin/table": "^2.2.0",
"@pureadmin/table": "^2.3.2",
"@pureadmin/utils": "^1.9.3", "@pureadmin/utils": "^1.9.3",
"@vueuse/core": "^10.1.2", "@vueuse/core": "^10.1.2",
"@vueuse/motion": "^2.0.0", "@vueuse/motion": "^2.0.0",
@ -39,7 +39,6 @@
"dayjs": "^1.11.8", "dayjs": "^1.11.8",
"echarts": "^5.4.2", "echarts": "^5.4.2",
"element-plus": "^2.3.6", "element-plus": "^2.3.6",
"element-resize-detector": "^1.2.4",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
@ -62,15 +61,14 @@
"@iconify/vue": "^4.1.1", "@iconify/vue": "^4.1.1",
"@intlify/unplugin-vue-i18n": "^0.11.0", "@intlify/unplugin-vue-i18n": "^0.11.0",
"@pureadmin/theme": "^3.0.0", "@pureadmin/theme": "^3.0.0",
"@types/element-resize-detector": "1.1.3",
"@types/js-cookie": "^3.0.3", "@types/js-cookie": "^3.0.3",
"@types/mockjs": "^1.0.7", "@types/mockjs": "^1.0.7",
"@types/node": "^20.2.5",
"@types/node": "^20.3.1",
"@types/nprogress": "0.2.0", "@types/nprogress": "0.2.0",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@types/sortablejs": "^1.15.1", "@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": "^4.2.3",
"@vitejs/plugin-vue-jsx": "^3.0.1", "@vitejs/plugin-vue-jsx": "^3.0.1",
"@vue/eslint-config-prettier": "^7.1.0", "@vue/eslint-config-prettier": "^7.1.0",
@ -91,31 +89,31 @@
"prettier": "^2.8.8", "prettier": "^2.8.8",
"pretty-quick": "^3.1.3", "pretty-quick": "^3.1.3",
"rimraf": "^5.0.1", "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-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": "^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-recommended-vue": "^1.4.0",
"stylelint-config-standard": "^33.0.0", "stylelint-config-standard": "^33.0.0",
"stylelint-config-standard-scss": "^9.0.0", "stylelint-config-standard-scss": "^9.0.0",
"stylelint-order": "^6.0.3", "stylelint-order": "^6.0.3",
"stylelint-prettier": "^3.0.0", "stylelint-prettier": "^3.0.0",
"stylelint-scss": "^5.0.0",
"stylelint-scss": "^5.0.1",
"svgo": "^3.0.2", "svgo": "^3.0.2",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"terser": "^5.17.7",
"terser": "^5.18.0",
"typescript": "5.0.4", "typescript": "5.0.4",
"vite": "^4.3.9", "vite": "^4.3.9",
"vite-plugin-cdn-import": "^0.3.5", "vite-plugin-cdn-import": "^0.3.5",
"vite-plugin-compression": "^0.5.1", "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-plugin-remove-console": "^2.1.1",
"vite-svg-loader": "^4.0.0", "vite-svg-loader": "^4.0.0",
"vue-eslint-parser": "^9.3.0",
"vue-eslint-parser": "^9.3.1",
"vue-tsc": "^1.6.5" "vue-tsc": "^1.6.5"
}, },
"pnpm": { "pnpm": {

1149
pnpm-lock.yaml
File diff suppressed because it is too large
View File

2
public/serverConfig.json

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

4
src/directives/auth/index.ts

@ -7,7 +7,9 @@ export const auth: Directive = {
if (value) { if (value) {
!hasAuth(value) && el.parentNode?.removeChild(el); !hasAuth(value) && el.parentNode?.removeChild(el);
} else { } 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

@ -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

@ -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

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

55
src/directives/optimize/index.ts

@ -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

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

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

@ -1,8 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import Search from "../search/index.vue"; import Search from "../search/index.vue";
import Notice from "../notice/index.vue"; import Notice from "../notice/index.vue";
import { ref, watch, nextTick } from "vue";
import SidebarItem from "./sidebarItem.vue"; import SidebarItem from "./sidebarItem.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { ref, nextTick, computed } from "vue";
import { useNav } from "@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import { useTranslationLang } from "../../hooks/useTranslationLang"; import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
@ -17,11 +18,9 @@ const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef); useTranslationLang(menuRef);
const { const {
title, title,
routers,
logout, logout,
backTopMenu, backTopMenu,
onPanel, onPanel,
menuSelect,
username, username,
userAvatar, userAvatar,
avatarsStyle, avatarsStyle,
@ -29,16 +28,13 @@ const {
getDropdownItemClass getDropdownItemClass
} = useNav(); } = useNav();
const defaultActive = computed(() =>
!isAllEmpty(route.meta?.activePath) ? route.meta.activePath : route.path
);
nextTick(() => { nextTick(() => {
menuRef.value?.handleResize(); menuRef.value?.handleResize();
}); });
watch(
() => route.path,
() => {
menuSelect(route.path, routers);
}
);
</script> </script>
<template> <template>
@ -55,8 +51,7 @@ watch(
ref="menuRef" ref="menuRef"
mode="horizontal" mode="horizontal"
class="horizontal-header-menu" class="horizontal-header-menu"
:default-active="route.path"
@select="indexPath => menuSelect(indexPath, routers)"
:default-active="defaultActive"
> >
<sidebar-item <sidebar-item
v-for="route in usePermissionStoreHook().wholeMenus" v-for="route in usePermissionStoreHook().wholeMenus"

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

@ -2,6 +2,7 @@
import extraIcon from "./extraIcon.vue"; import extraIcon from "./extraIcon.vue";
import Search from "../search/index.vue"; import Search from "../search/index.vue";
import Notice from "../notice/index.vue"; import Notice from "../notice/index.vue";
import { isAllEmpty } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import { transformI18n } from "@/plugins/i18n"; import { transformI18n } from "@/plugins/i18n";
import { ref, toRaw, watch, onMounted, nextTick } from "vue"; import { ref, toRaw, watch, onMounted, nextTick } from "vue";
@ -21,10 +22,8 @@ const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef); useTranslationLang(menuRef);
const { const {
device, device,
routers,
logout, logout,
onPanel, onPanel,
menuSelect,
resolvePath, resolvePath,
username, username,
userAvatar, userAvatar,
@ -38,10 +37,9 @@ function getDefaultActive(routePath) {
const wholeMenus = usePermissionStoreHook().wholeMenus; const wholeMenus = usePermissionStoreHook().wholeMenus;
/** 当前路由的父级路径 */ /** 当前路由的父级路径 */
const parentRoutes = getParentPaths(routePath, wholeMenus)[0]; 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(() => { onMounted(() => {
@ -72,7 +70,6 @@ watch(
mode="horizontal" mode="horizontal"
class="horizontal-header-menu" class="horizontal-header-menu"
:default-active="defaultActive" :default-active="defaultActive"
@select="indexPath => menuSelect(indexPath, routers)"
> >
<el-menu-item <el-menu-item
v-for="route in usePermissionStoreHook().wholeMenus" v-for="route in usePermissionStoreHook().wholeMenus"

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

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

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

@ -4,12 +4,12 @@ import { emitter } from "@/utils/mitt";
import { RouteConfigs } from "../../types"; import { RouteConfigs } from "../../types";
import { useTags } from "../../hooks/useTag"; import { useTags } from "../../hooks/useTag";
import { routerArrays } from "@/layout/types"; import { routerArrays } from "@/layout/types";
import { isEqual, isAllEmpty } from "@pureadmin/utils";
import { handleAliveRoute, getTopMenu } from "@/router/utils"; import { handleAliveRoute, getTopMenu } from "@/router/utils";
import { useSettingStoreHook } from "@/store/modules/settings"; 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 { 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 ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill"; import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
@ -54,20 +54,22 @@ const topPath = getTopMenu()?.path;
const { VITE_HIDE_HOME } = import.meta.env; const { VITE_HIDE_HOME } = import.meta.env;
const { isFullscreen, toggle } = useFullscreen(); const { isFullscreen, toggle } = useFullscreen();
const dynamicTagView = () => {
const dynamicTagView = async () => {
await nextTick();
const index = multiTags.value.findIndex(item => { const index = multiTags.value.findIndex(item => {
if (item.query) {
if (!isAllEmpty(route.query)) {
return isEqual(route.query, item.query); return isEqual(route.query, item.query);
} else if (item.params) {
} else if (!isAllEmpty(route.params)) {
return isEqual(route.params, item.params); return isEqual(route.params, item.params);
} else { } else {
return item.path === route.path;
return route.path === item.path;
} }
}); });
moveToView(index); moveToView(index);
}; };
const moveToView = async (index: number): Promise<void> => { const moveToView = async (index: number): Promise<void> => {
await nextTick();
const tabNavPadding = 10; const tabNavPadding = 10;
if (!instance.refs["dynamic" + index]) return; if (!instance.refs["dynamic" + index]) return;
const tabItemEl = instance.refs["dynamic" + index][0]; const tabItemEl = instance.refs["dynamic" + index][0];
@ -78,9 +80,6 @@ const moveToView = async (index: number): Promise<void> => {
? scrollbarDom.value?.offsetWidth ? scrollbarDom.value?.offsetWidth
: 0; : 0;
// dom
await nextTick();
// //
const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0; const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
@ -135,31 +134,29 @@ const handleScroll = (offset: number): void => {
} }
}; };
function dynamicRouteTag(value: string, parentPath: string): void {
function dynamicRouteTag(value: string): void {
const hasValue = multiTags.value.some(item => { const hasValue = multiTags.value.some(item => {
return item.path === value; return item.path === value;
}); });
function concatPath(arr: object[], value: string, parentPath: string) {
function concatPath(arr: object[], value: string) {
if (!hasValue) { if (!hasValue) {
arr.forEach((arrItem: any) => { 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", { useMultiTagsStoreHook().handleTags("push", {
path: value, path: value,
parentPath: `/${parentPath.split("/")[1]}`,
meta: arrItem.meta, meta: arrItem.meta,
name: arrItem.name name: arrItem.name
}); });
} else { } else {
if (arrItem.children && arrItem.children.length > 0) { 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);
} }
/** 刷新路由 */ /** 刷新路由 */
@ -169,7 +166,7 @@ function onFresh() {
path: "/redirect" + fullPath, path: "/redirect" + fullPath,
query query
}); });
handleAliveRoute(route as toRouteType, "refresh");
handleAliveRoute(route as ToRouteType, "refresh");
} }
function deleteDynamicTag(obj: any, current: any, tag?: string) { function deleteDynamicTag(obj: any, current: any, tag?: string) {
@ -242,7 +239,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
function deleteMenu(item, tag?: string) { function deleteMenu(item, tag?: string) {
deleteDynamicTag(item, item.path, tag); deleteDynamicTag(item, item.path, tag);
handleAliveRoute(route as toRouteType);
handleAliveRoute(route as ToRouteType);
} }
function onClickDrop(key, item, selectRoute?: RouteConfigs) { function onClickDrop(key, item, selectRoute?: RouteConfigs) {
@ -290,7 +287,7 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
length: multiTags.value.length length: multiTags.value.length
}); });
router.push(topPath); router.push(topPath);
handleAliveRoute(route as toRouteType);
handleAliveRoute(route as ToRouteType);
break; break;
case 6: case 6:
// //
@ -465,7 +462,17 @@ function tagOnClick(item) {
// showMenuModel(item?.path, item?.query); // showMenuModel(item?.path, item?.query);
} }
onBeforeMount(() => {
watch(route, () => {
activeIndex.value = -1;
dynamicTagView();
});
watch(isFullscreen, () => {
tagsViews[6].icon = Fullscreen;
tagsViews[6].text = $t("buttons.hswholeFullScreen");
});
onMounted(() => {
if (!instance) return; if (!instance) return;
// //
@ -483,32 +490,25 @@ onBeforeMount(() => {
}); });
// //
emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
dynamicRouteTag(indexPath, parentPath);
emitter.on("changLayoutRoute", indexPath => {
dynamicRouteTag(indexPath);
setTimeout(() => { setTimeout(() => {
showMenuModel(indexPath); showMenuModel(indexPath);
}); });
}); });
});
watch([route], () => {
activeIndex.value = -1;
dynamicTagView();
});
watch(isFullscreen, () => {
tagsViews[6].icon = Fullscreen;
tagsViews[6].text = $t("buttons.hswholeFullScreen");
});
onMounted(() => {
useResizeObserver( useResizeObserver(
scrollbarDom, scrollbarDom,
useDebounceFn(() => {
dynamicTagView();
}, 200)
debounce(() => dynamicTagView())
); );
}); });
onBeforeUnmount(() => {
// `tagViewsChange``tagViewsShowModel``changLayoutRoute`
emitter.off("tagViewsChange");
emitter.off("tagViewsShowModel");
emitter.off("changLayoutRoute");
});
</script> </script>
<template> <template>

33
src/layout/hooks/useNav.ts

@ -114,38 +114,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); return remainingPaths.includes(path);
} }

12
src/layout/index.vue

@ -3,14 +3,15 @@ import "animate.css";
// src/components/ReIcon/src/offlineIcon.ts 使addIcon // src/components/ReIcon/src/offlineIcon.ts 使addIcon
import "@/components/ReIcon/src/offlineIcon"; import "@/components/ReIcon/src/offlineIcon";
import { setType } from "./types"; import { setType } from "./types";
import { emitter } from "@/utils/mitt";
import { useLayout } from "./hooks/useLayout"; import { useLayout } from "./hooks/useLayout";
import { useResizeObserver } from "@vueuse/core";
import { useAppStoreHook } from "@/store/modules/app"; import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings"; import { useSettingStoreHook } from "@/store/modules/settings";
import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils"; import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { import {
h, h,
ref,
reactive, reactive,
computed, computed,
onMounted, onMounted,
@ -26,6 +27,7 @@ import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue"; import Horizontal from "./components/sidebar/horizontal.vue";
import backTop from "@/assets/svg/back_top.svg?component"; import backTop from "@/assets/svg/back_top.svg?component";
const appWrapperRef = ref();
const { isDark } = useDark(); const { isDark } = useDark();
const { layout } = useLayout(); const { layout } = useLayout();
const isMobile = deviceDetection(); const isMobile = deviceDetection();
@ -78,10 +80,10 @@ function toggle(device: string, bool: boolean) {
// //
let isAutoCloseSidebar = true; let isAutoCloseSidebar = true;
//
emitter.on("resize", ({ detail }) => {
useResizeObserver(appWrapperRef, entries => {
if (isMobile) return; if (isMobile) return;
const { width } = detail;
const entry = entries[0];
const { width } = entry.contentRect;
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout); width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
/** width app-wrapper /** width app-wrapper
* 0 < width <= 760 隐藏侧边栏 * 0 < width <= 760 隐藏侧边栏
@ -147,7 +149,7 @@ const layoutHeader = defineComponent({
</script> </script>
<template> <template>
<div :class="['app-wrapper', set.classes]" v-resize>
<div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
<div <div
v-show=" v-show="
set.device === 'mobile' && set.device === 'mobile' &&

2
src/layout/types.ts

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

5
src/router/index.ts

@ -101,7 +101,7 @@ const whiteList = ["/login"];
const { VITE_HIDE_HOME } = import.meta.env; const { VITE_HIDE_HOME } = import.meta.env;
router.beforeEach((to: toRouteType, _from, next) => {
router.beforeEach((to: ToRouteType, _from, next) => {
if (to.meta?.keepAlive) { if (to.meta?.keepAlive) {
handleAliveRoute(to, "add"); handleAliveRoute(to, "add");
// 页面整体刷新和点击标签页刷新 // 页面整体刷新和点击标签页刷新
@ -176,7 +176,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(); toCorrectRoute();

2
src/router/utils.ts

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

1
src/store/modules/types.ts

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

12
src/utils/mitt.ts

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

93
types/global.d.ts

@ -7,7 +7,6 @@ import type {
import type { ECharts } from "echarts"; import type { ECharts } from "echarts";
import type { IconifyIcon } from "@iconify/vue"; import type { IconifyIcon } from "@iconify/vue";
import type { TableColumns } from "@pureadmin/table"; import type { TableColumns } from "@pureadmin/table";
import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
/** /**
* `.vue` `.ts` `.tsx` 使 * `.vue` `.ts` `.tsx` 使
@ -151,98 +150,6 @@ declare global {
} }
/** /**
* `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>;
}
/**
* 访 * 访
*/ */
interface GlobalPropertiesApi { interface GlobalPropertiesApi {

105
types/router.d.ts

@ -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 {}
}
Loading…
Cancel
Save