Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
e9dc8274a0
  1. 1
      public/serverConfig.json
  2. 10
      src/assets/iconfont/iconfont.css
  3. 38
      src/assets/iconfont/iconfont.js
  4. 7
      src/assets/iconfont/iconfont.json
  5. BIN
      src/assets/iconfont/iconfont.ttf
  6. BIN
      src/assets/iconfont/iconfont.woff
  7. BIN
      src/assets/iconfont/iconfont.woff2
  8. 62
      src/components/ReIcon/index.ts
  9. 13
      src/layout/components/setting/index.vue
  10. 89
      src/layout/components/tag/index.vue
  11. 17
      src/layout/index.vue
  12. 4
      src/layout/types.ts
  13. 8
      src/plugins/fontawesome/index.ts
  14. 12
      src/router/index.ts
  15. 98
      src/store/modules/multiTags.ts
  16. 5
      src/store/modules/types.ts
  17. 6
      src/style/sidebar.scss
  18. 2
      src/utils/progress/index.ts
  19. 84
      src/utils/storage/responsive.ts
  20. 1
      types/global.d.ts

1
public/serverConfig.json

@ -3,6 +3,7 @@
"Title": "PureAdmin", "Title": "PureAdmin",
"FixedHeader": true, "FixedHeader": true,
"HiddenSideBar": false, "HiddenSideBar": false,
"MultiTagsCache": false,
"KeepAlive": true, "KeepAlive": true,
"Locale": "zh", "Locale": "zh",
"Layout": "vertical", "Layout": "vertical",

10
src/assets/iconfont/iconfont.css

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2208059 */ font-family: "iconfont"; /* Project id 2208059 */
src: url("iconfont.woff2?t=1636197082361") format("woff2"),
url("iconfont.woff?t=1636197082361") format("woff"),
url("iconfont.ttf?t=1636197082361") format("truetype");
src: url("iconfont.woff2?t=1638023560828") format("woff2"),
url("iconfont.woff?t=1638023560828") format("woff"),
url("iconfont.ttf?t=1638023560828") format("truetype");
} }
.iconfont { .iconfont {
@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.team-icontabs::before {
content: "\e63e";
}
.team-iconlogo::before { .team-iconlogo::before {
content: "\e620"; content: "\e620";
} }

38
src/assets/iconfont/iconfont.js
File diff suppressed because it is too large
View File

7
src/assets/iconfont/iconfont.json

@ -6,6 +6,13 @@
"description": "pure-admin", "description": "pure-admin",
"glyphs": [ "glyphs": [
{ {
"icon_id": "20594647",
"name": "标签页",
"font_class": "tabs",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "22129506", "icon_id": "22129506",
"name": "水能", "name": "水能",
"font_class": "logo", "font_class": "logo",

BIN
src/assets/iconfont/iconfont.ttf

BIN
src/assets/iconfont/iconfont.woff

BIN
src/assets/iconfont/iconfont.woff2

62
src/components/ReIcon/index.ts

@ -3,39 +3,53 @@ import icon from "./src/Icon.vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { iconComponents } from "/@/plugins/element-plus"; import { iconComponents } from "/@/plugins/element-plus";
export const Icon = Object.assign(icon, {
install(app: App) {
app.component(icon.name, icon);
}
});
export default {
Icon
};
/** /**
* find icon component * find icon component
* @param icon icon图标 * @param icon icon图标
* @returns component * @returns component
*/ */
export function findIconReg(icon: string) { export function findIconReg(icon: string) {
const faReg = /^fa-/;
// fontawesome
const faReg = /^FA-/;
// iconfont
const iFReg = /^IF-/;
// typeof icon === "function" 属于SVG
if (faReg.test(icon)) { if (faReg.test(icon)) {
return findIcon(icon.split(faReg)[1]);
const text = icon.split(faReg)[1];
return findIcon(
text.slice(0, text.indexOf(" ")),
"FA",
text.slice(text.indexOf(" ") + 1, text.length)
);
} else if (iFReg.test(icon)) {
return findIcon(icon.split(iFReg)[1], "IF");
} else if (typeof icon === "function") {
return findIcon(icon, "SVG");
} else { } else {
return findIcon(icon, false);
return findIcon(icon, "EL");
} }
} }
export function findIcon(icon: String, isFa: Boolean = true) {
if (isFa) {
// 支持fontawesome、iconfont、element-plus/icons、自定义svg
export function findIcon(icon: String, type = "EL", property?: string) {
if (type === "FA") {
return defineComponent({ return defineComponent({
name: "FaIcon", name: "FaIcon",
data() {
return { icon: icon };
setup() {
return { icon, property };
}, },
components: { FontAwesomeIcon }, components: { FontAwesomeIcon },
template: `<font-awesome-icon :icon="icon" />`
template: `<font-awesome-icon :icon="icon" v-bind:[property]="true" />`
}); });
} else {
} else if (type === "IF") {
return defineComponent({
name: "IfIcon",
data() {
return { icon: `iconfont ${icon}` };
},
template: `<i :class="icon" />`
});
} else if (type === "EL") {
const components = iconComponents.filter( const components = iconComponents.filter(
component => component.name === icon component => component.name === icon
); );
@ -44,5 +58,17 @@ export function findIcon(icon: String, isFa: Boolean = true) {
} else { } else {
return null; return null;
} }
} else if (type === "SVG") {
return icon;
} }
} }
export const Icon = Object.assign(icon, {
install(app: App) {
app.component(icon.name, icon);
}
});
export default {
Icon
};

13
src/layout/components/setting/index.vue

@ -17,6 +17,7 @@ import { debounce } from "/@/utils/debounce";
import { themeColorsType } from "../../types"; import { themeColorsType } from "../../types";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "/@/store/modules/app";
import { storageLocal, storageSession } from "/@/utils/storage"; import { storageLocal, storageSession } from "/@/utils/storage";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils"; import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
const router = useRouter(); const router = useRouter();
@ -135,6 +136,18 @@ function onReset() {
storageSession.clear(); storageSession.clear();
toggleClass(false, "html-grey", document.querySelector("html")); toggleClass(false, "html-grey", document.querySelector("html"));
toggleClass(false, "html-weakness", document.querySelector("html")); toggleClass(false, "html-weakness", document.querySelector("html"));
useMultiTagsStoreHook().handleTags("equal", [
{
path: "/welcome",
parentPath: "/",
meta: {
title: "message.hshome",
icon: "el-icon-s-home",
i18n: true,
showLink: true
}
}
]);
router.push("/login"); router.push("/login");
} }

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

@ -1,18 +1,3 @@
<script lang="ts">
let routerArrays: Array<RouteConfigs> = [
{
path: "/welcome",
parentPath: "/",
meta: {
title: "message.hshome",
icon: "el-icon-s-home",
i18n: true,
showLink: true
}
}
];
</script>
<script setup lang="ts"> <script setup lang="ts">
import { import {
ref, ref,
@ -33,15 +18,16 @@ import closeOther from "/@/assets/svg/close_other.svg";
import closeRight from "/@/assets/svg/close_right.svg"; import closeRight from "/@/assets/svg/close_right.svg";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
import { transformI18n } from "/@/utils/i18n"; import { transformI18n } from "/@/utils/i18n";
import { storageLocal } from "/@/utils/storage"; import { storageLocal } from "/@/utils/storage";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { RouteConfigs, tagsViewsType } from "../../types";
import { handleAliveRoute, delAliveRoutes } from "/@/router"; import { handleAliveRoute, delAliveRoutes } from "/@/router";
import { useSettingStoreHook } from "/@/store/modules/settings"; import { useSettingStoreHook } from "/@/store/modules/settings";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import { toggleClass, removeClass, hasClass } from "/@/utils/operate"; import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
import { RouteConfigs, relativeStorageType, tagsViewsType } from "../../types";
import { templateRef, useResizeObserver, useDebounceFn } from "@vueuse/core";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -49,15 +35,18 @@ const translateX = ref<number>(0);
const activeIndex = ref<number>(-1); const activeIndex = ref<number>(-1);
let refreshButton = "refresh-button"; let refreshButton = "refresh-button";
const instance = getCurrentInstance(); const instance = getCurrentInstance();
let relativeStorage: relativeStorageType;
const pureSetting = useSettingStoreHook(); const pureSetting = useSettingStoreHook();
const showTags = ref(storageLocal.getItem("tagsVal") || false); const showTags = ref(storageLocal.getItem("tagsVal") || false);
const tabDom = templateRef<HTMLElement | null>("tabDom", null); const tabDom = templateRef<HTMLElement | null>("tabDom", null);
const containerDom = templateRef<HTMLElement | null>("containerDom", null); const containerDom = templateRef<HTMLElement | null>("containerDom", null);
const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null); const scrollbarDom = templateRef<HTMLElement | null>("scrollbarDom", null);
let multiTags: ComputedRef<Array<RouteConfigs>> = computed(() => {
return useMultiTagsStoreHook()?.multiTags;
});
const dynamicTagView = () => { const dynamicTagView = () => {
const index = dynamicTagList.value.findIndex(item => {
const index = multiTags.value.findIndex(item => {
return item.path === route.path; return item.path === route.path;
}); });
moveToView(index); moveToView(index);
@ -150,41 +139,38 @@ const tagsViews = ref<Array<tagsViewsType>>([
icon: close, icon: close,
text: "message.hscloseCurrentTab", text: "message.hscloseCurrentTab",
divided: false, divided: false,
disabled: routerArrays.length > 1 ? false : true,
disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: closeLeft, icon: closeLeft,
text: "message.hscloseLeftTabs", text: "message.hscloseLeftTabs",
divided: true, divided: true,
disabled: routerArrays.length > 1 ? false : true,
disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: closeRight, icon: closeRight,
text: "message.hscloseRightTabs", text: "message.hscloseRightTabs",
divided: false, divided: false,
disabled: routerArrays.length > 1 ? false : true,
disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: closeOther, icon: closeOther,
text: "message.hscloseOtherTabs", text: "message.hscloseOtherTabs",
divided: true, divided: true,
disabled: routerArrays.length > 2 ? false : true,
disabled: multiTags.value.length > 2 ? false : true,
show: true show: true
}, },
{ {
icon: closeAll, icon: closeAll,
text: "message.hscloseAllTabs", text: "message.hscloseAllTabs",
divided: false, divided: false,
disabled: routerArrays.length > 1 ? false : true,
disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
} }
]); ]);
const dynamicTagList: ComputedRef<Array<RouteConfigs>> = computed(() => {
return relativeStorage.routesInStorage;
});
// //
const showModel = ref(storageLocal.getItem("showModel") || "smart"); const showModel = ref(storageLocal.getItem("showModel") || "smart");
@ -200,7 +186,7 @@ let buttonTop = ref(0);
let currentSelect = ref({}); let currentSelect = ref({});
function dynamicRouteTag(value: string, parentPath: string): void { function dynamicRouteTag(value: string, parentPath: string): void {
const hasValue = relativeStorage.routesInStorage.some((item: any) => {
const hasValue = multiTags.value.some(item => {
return item.path === value; return item.path === value;
}); });
@ -209,13 +195,12 @@ function dynamicRouteTag(value: string, parentPath: string): void {
arr.forEach((arrItem: any) => { arr.forEach((arrItem: any) => {
let pathConcat = parentPath + arrItem.path; let pathConcat = parentPath + arrItem.path;
if (arrItem.path === value || pathConcat === value) { if (arrItem.path === value || pathConcat === value) {
routerArrays.push({
useMultiTagsStoreHook().handleTags("push", {
path: value, path: value,
parentPath: `/${parentPath.split("/")[1]}`, parentPath: `/${parentPath.split("/")[1]}`,
meta: arrItem.meta, meta: arrItem.meta,
name: arrItem.name name: arrItem.name
}); });
relativeStorage.routesInStorage = routerArrays;
} 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, parentPath);
@ -242,13 +227,17 @@ function onFresh() {
function deleteDynamicTag(obj: any, current: any, tag?: string) { function deleteDynamicTag(obj: any, current: any, tag?: string) {
// //
let delAliveRouteList = []; let delAliveRouteList = [];
let valueIndex: number = routerArrays.findIndex((item: any) => {
let valueIndex: number = multiTags.value.findIndex((item: any) => {
return item.path === obj.path; return item.path === obj.path;
}); });
const spliceRoute = (start?: number, end?: number, other?: boolean): void => {
const spliceRoute = (
startIndex?: number,
length?: number,
other?: boolean
): void => {
if (other) { if (other) {
relativeStorage.routesInStorage = [
useMultiTagsStoreHook().handleTags("equal", [
{ {
path: "/welcome", path: "/welcome",
parentPath: "/", parentPath: "/",
@ -260,11 +249,12 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
} }
}, },
obj obj
];
routerArrays = relativeStorage.routesInStorage;
]);
} else { } else {
delAliveRouteList = routerArrays.splice(start, end);
relativeStorage.routesInStorage = routerArrays;
delAliveRouteList = useMultiTagsStoreHook().handleTags("splice", "", {
startIndex,
length
});
} }
}; };
@ -273,12 +263,12 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
} else if (tag === "left") { } else if (tag === "left") {
spliceRoute(1, valueIndex - 1); spliceRoute(1, valueIndex - 1);
} else if (tag === "right") { } else if (tag === "right") {
spliceRoute(valueIndex + 1, routerArrays.length);
spliceRoute(valueIndex + 1, multiTags.value.length);
} else { } else {
// //
spliceRoute(valueIndex, 1); spliceRoute(valueIndex, 1);
} }
let newRoute: any = routerArrays.slice(-1);
let newRoute = useMultiTagsStoreHook().handleTags("slice");
if (current === route.path) { if (current === route.path) {
// //
tag tag
@ -294,8 +284,8 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
} else { } else {
// //
tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]); tag ? delAliveRoutes(delAliveRouteList) : delAliveRoutes([obj]);
if (!routerArrays.length) return;
let isHasActiveTag = routerArrays.some(item => {
if (!multiTags.value.length) return;
let isHasActiveTag = multiTags.value.some(item => {
return item.path === route.path; return item.path === route.path;
}); });
!isHasActiveTag && !isHasActiveTag &&
@ -365,11 +355,12 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
break; break;
case 5: case 5:
// //
routerArrays.splice(1, routerArrays.length);
relativeStorage.routesInStorage = routerArrays;
useMultiTagsStoreHook().handleTags("splice", "", {
startIndex: 1,
length: multiTags.value.length
});
usePermissionStoreHook().clearAllCachePage(); usePermissionStoreHook().clearAllCachePage();
router.push("/welcome"); router.push("/welcome");
break; break;
} }
setTimeout(() => { setTimeout(() => {
@ -400,8 +391,8 @@ function disabledMenus(value: boolean) {
// //
function showMenuModel(currentPath: string, refresh = false) { function showMenuModel(currentPath: string, refresh = false) {
let allRoute = unref(relativeStorage.routesInStorage);
let routeLength = unref(relativeStorage.routesInStorage).length;
let allRoute = multiTags.value;
let routeLength = multiTags.value.length;
// currentIndex1 // currentIndex1
let currentIndex = allRoute.findIndex(v => v.path === currentPath); let currentIndex = allRoute.findIndex(v => v.path === currentPath);
// currentIndexrouteLength-1 // currentIndexrouteLength-1
@ -452,7 +443,7 @@ function openMenu(tag, e) {
showMenuModel(tag.path); showMenuModel(tag.path);
} else if ( } else if (
// eslint-disable-next-line no-dupe-else-if // eslint-disable-next-line no-dupe-else-if
relativeStorage.routesInStorage.length === 2 &&
multiTags.value.length === 2 &&
route.path !== tag.path route.path !== tag.path
) { ) {
showMenus(true); showMenus(true);
@ -531,8 +522,6 @@ watch(
onBeforeMount(() => { onBeforeMount(() => {
if (!instance) return; if (!instance) return;
relativeStorage = instance.appContext.app.config.globalProperties.$storage;
routerArrays = relativeStorage.routesInStorage ?? routerArrays;
// //
showMenuModel(route.fullPath); showMenuModel(route.fullPath);
@ -569,7 +558,7 @@ onBeforeMount(() => {
> >
<div <div
:ref="'dynamic' + index" :ref="'dynamic' + index"
v-for="(item, index) in dynamicTagList"
v-for="(item, index) in multiTags"
:key="index" :key="index"
:class="[ :class="[
'scroll-item is-closable', 'scroll-item is-closable',

17
src/layout/index.vue

@ -17,6 +17,7 @@ import fullScreen from "/@/assets/svg/full_screen.svg";
import exitScreen from "/@/assets/svg/exit_screen.svg"; import exitScreen from "/@/assets/svg/exit_screen.svg";
import { deviceDetection } from "/@/utils/deviceDetection"; import { deviceDetection } from "/@/utils/deviceDetection";
import { useSettingStoreHook } from "/@/store/modules/settings"; import { useSettingStoreHook } from "/@/store/modules/settings";
import { useMultiTagsStore } from "/@/store/modules/multiTags";
import navbar from "./components/navbar.vue"; import navbar from "./components/navbar.vue";
import tag from "./components/tag/index.vue"; import tag from "./components/tag/index.vue";
@ -33,11 +34,11 @@ const instance = getCurrentInstance().appContext.app.config.globalProperties;
const layout = computed(() => { const layout = computed(() => {
// //
if ( if (
!instance.$storage.routesInStorage ||
instance.$storage.routesInStorage.length === 0
useMultiTagsStore().multiTagsCache &&
(!instance.$storage.tags || instance.$storage.tags.length === 0)
) { ) {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties // eslint-disable-next-line vue/no-side-effects-in-computed-properties
instance.$storage.routesInStorage = routerArrays;
instance.$storage.tags = routerArrays;
} }
// //
if (!instance.$storage.locale) { if (!instance.$storage.locale) {
@ -105,6 +106,9 @@ function toggle(device: string, bool: boolean) {
useAppStoreHook().toggleSideBar(bool, "resize"); useAppStoreHook().toggleSideBar(bool, "resize");
} }
//
let isAutoCloseSidebar = true;
// //
emitter.on("resize", ({ detail }) => { emitter.on("resize", ({ detail }) => {
if (isMobile) return; if (isMobile) return;
@ -117,11 +121,16 @@ emitter.on("resize", ({ detail }) => {
*/ */
if (width > 0 && width <= 760) { if (width > 0 && width <= 760) {
toggle("mobile", false); toggle("mobile", false);
isAutoCloseSidebar = true;
} else if (width > 760 && width <= 990) { } else if (width > 760 && width <= 990) {
toggle("desktop", false);
if (isAutoCloseSidebar) {
toggle("desktop", false);
isAutoCloseSidebar = false;
}
} else if (width > 990) { } else if (width > 990) {
if (!set.sidebar.isClickHamburger) { if (!set.sidebar.isClickHamburger) {
toggle("desktop", true); toggle("desktop", true);
isAutoCloseSidebar = true;
} }
} }
}); });

4
src/layout/types.ts

@ -24,8 +24,8 @@ export type RouteConfigs = {
name?: string; name?: string;
}; };
export type relativeStorageType = {
routesInStorage: Array<RouteConfigs>;
export type multiTagsType = {
tags: Array<RouteConfigs>;
}; };
export type tagsViewsType = { export type tagsViewsType = {

8
src/plugins/fontawesome/index.ts

@ -6,12 +6,16 @@
import { App } from "vue"; import { App } from "vue";
import "font-awesome/css/font-awesome.css"; import "font-awesome/css/font-awesome.css";
import { library } from "@fortawesome/fontawesome-svg-core"; import { library } from "@fortawesome/fontawesome-svg-core";
import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
import {
faUserSecret,
faCoffee,
faSpinner
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
// github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5 // github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5
import "remixicon/fonts/remixicon.css"; import "remixicon/fonts/remixicon.css";
export function useFontawesome(app: App) { export function useFontawesome(app: App) {
library.add(faUserSecret);
library.add(faUserSecret, faCoffee, faSpinner);
app.component("font-awesome-icon", FontAwesomeIcon); app.component("font-awesome-icon", FontAwesomeIcon);
} }

12
src/router/index.ts

@ -13,6 +13,7 @@ import NProgress from "/@/utils/progress";
import { useTimeoutFn } from "@vueuse/core"; import { useTimeoutFn } from "@vueuse/core";
import { storageSession, storageLocal } from "/@/utils/storage"; import { storageSession, storageLocal } from "/@/utils/storage";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
// 静态路由 // 静态路由
import homeRouter from "./modules/home"; import homeRouter from "./modules/home";
@ -126,7 +127,7 @@ export const addAsyncRoutes = (arrRoutes: Array<RouteComponent>) => {
// 创建路由实例 // 创建路由实例
export const router: Router = createRouter({ export const router: Router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
routes: filterTree(ascending(constantRoutes)).concat(...remainingRouter),
routes: ascending(constantRoutes).concat(...remainingRouter),
scrollBehavior(to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
return new Promise(resolve => { return new Promise(resolve => {
if (savedPosition) { if (savedPosition) {
@ -222,11 +223,12 @@ router.beforeEach((to, _from, next) => {
// 刷新 // 刷新
if (usePermissionStoreHook().wholeRoutes.length === 0) if (usePermissionStoreHook().wholeRoutes.length === 0)
initRouter(name.username).then((router: Router) => { initRouter(name.username).then((router: Router) => {
if (!useMultiTagsStoreHook().getMultiTagsCache) {
return router.push("/");
}
router.push(to.path); router.push(to.path);
// 刷新页面更新标签栏与页面路由匹配 // 刷新页面更新标签栏与页面路由匹配
const localRoutes = storageLocal.getItem(
"responsive-routesInStorage"
);
const localRoutes = storageLocal.getItem("responsive-tags");
const optionsRoutes = router.options?.routes; const optionsRoutes = router.options?.routes;
const newLocalRoutes = []; const newLocalRoutes = [];
optionsRoutes.forEach(ors => { optionsRoutes.forEach(ors => {
@ -237,7 +239,7 @@ router.beforeEach((to, _from, next) => {
}); });
}); });
storageLocal.setItem( storageLocal.setItem(
"responsive-routesInStorage",
"responsive-tags",
uniqBy(newLocalRoutes, "path") uniqBy(newLocalRoutes, "path")
); );
}); });

98
src/store/modules/multiTags.ts

@ -0,0 +1,98 @@
import { defineStore } from "pinia";
import { store } from "/@/store";
import { getConfig } from "/@/config";
import { positionType } from "./types";
import { storageLocal } from "/@/utils/storage";
interface Itag {
path: string;
parentPath: string;
name: string;
meta: any;
}
export const useMultiTagsStore = defineStore({
id: "pure-multiTags",
state: () => ({
// 存储标签页信息(路由信息)
multiTags: getConfig().MultiTagsCache
? storageLocal.getItem("responsive-tags")
: [
{
path: "/welcome",
parentPath: "/",
meta: {
title: "message.hshome",
icon: "el-icon-s-home",
i18n: true,
showLink: true
}
}
],
multiTagsCache: getConfig().MultiTagsCache
}),
getters: {
getMultiTagsCache() {
return this.multiTagsCache;
}
},
actions: {
tagsCache(multiTags) {
this.getMultiTagsCache &&
storageLocal.setItem("responsive-tags", multiTags);
},
handleTags<T>(
mode: string,
value?: T | Itag,
position?: positionType
): any {
switch (mode) {
case "equal":
this.multiTags = value;
break;
case "push":
{
const tagVal = value as Itag;
// 判断tag是否已存在:
const tagHasExits = this.multiTags.some(tag => {
return tag.path === tagVal?.path;
});
if (tagHasExits) return;
const meta = tagVal?.meta;
const dynamicLevel = meta?.dynamicLevel ?? -1;
if (dynamicLevel > 0) {
// dynamicLevel动态路由可打开的数量
const realPath = meta?.realPath ?? "";
// 获取到已经打开的动态路由数, 判断是否大于dynamicLevel
if (
this.multiTags.filter(e => e.meta?.realPath ?? "" === realPath)
.length >= dynamicLevel
) {
// 关闭第一个
const index = this.multiTags.findIndex(
item => item.meta?.realPath === realPath
);
index !== -1 && this.multiTags.splice(index, 1);
}
}
this.multiTags.push(value);
this.tagsCache(this.multiTags);
}
break;
case "splice":
this.multiTags.splice(position?.startIndex, position?.length);
this.tagsCache(this.multiTags);
return this.multiTags;
break;
case "slice":
return this.multiTags.slice(-1);
break;
}
}
}
});
export function useMultiTagsStoreHook() {
return useMultiTagsStore(store);
}

5
src/store/modules/types.ts

@ -4,3 +4,8 @@ export type cacheType = {
mode: string; mode: string;
name?: RouteRecordName; name?: RouteRecordName;
}; };
export type positionType = {
startIndex?: number;
length?: number;
};

6
src/style/sidebar.scss

@ -444,12 +444,6 @@
} }
} }
& > .el-menu {
i {
margin-right: 16px;
}
}
.is-active > .el-sub-menu__title, .is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown { .is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important; color: $subMenuActiveText !important;

2
src/utils/progress/index.ts

@ -7,7 +7,7 @@ NProgress.configure({
// 递增进度条的速度 // 递增进度条的速度
speed: 500, speed: 500,
// 是否显示加载ico // 是否显示加载ico
showSpinner: true,
showSpinner: false,
// 自动递增间隔 // 自动递增间隔
trickleSpeed: 200, trickleSpeed: 200,
// 初始化时的最小百分比 // 初始化时的最小百分比

84
src/utils/storage/responsive.ts

@ -3,45 +3,53 @@ import { App } from "vue";
import Storage from "responsive-storage"; import Storage from "responsive-storage";
export const injectResponsiveStorage = (app: App, config: ServerConfigs) => { export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
app.use(Storage, {
// 默认显示首页tag
routesInStorage: {
type: Array,
default: Storage.getData(undefined, "routesInStorage") ?? [
{
path: "/welcome",
parentPath: "/",
meta: {
title: "message.hshome",
i18n: true,
icon: "HomeFilled",
showLink: true
}
const configObj = Object.assign(
{
// 国际化 默认中文zh
locale: {
type: Object,
default: Storage.getData(undefined, "locale") ?? {
locale: config.Locale ?? "zh"
}
},
// layout模式以及主题
layout: {
type: Object,
default: Storage.getData(undefined, "layout") ?? {
layout: config.Layout ?? "vertical",
theme: config.Theme ?? "default"
}
},
sets: {
type: Object,
default: Storage.getData(undefined, "sets") ?? {
grey: config.Grey ?? false,
weak: config.Weak ?? false,
hideTabs: config.HideTabs ?? false
} }
]
},
// 国际化 默认中文zh
locale: {
type: Object,
default: Storage.getData(undefined, "locale") ?? {
locale: config.Locale ?? "zh"
}
},
// layout模式以及主题
layout: {
type: Object,
default: Storage.getData(undefined, "layout") ?? {
layout: config.Layout ?? "vertical",
theme: config.Theme ?? "default"
} }
}, },
sets: {
type: Object,
default: Storage.getData(undefined, "sets") ?? {
grey: config.Grey ?? false,
weak: config.Weak ?? false,
hideTabs: config.HideTabs ?? false
}
}
});
config.MultiTagsCache
? {
// 默认显示首页tag
tags: {
type: Array,
default: Storage.getData(undefined, "tags") ?? [
{
path: "/welcome",
parentPath: "/",
meta: {
title: "message.hshome",
i18n: true,
icon: "HomeFilled",
showLink: true
}
}
]
}
}
: {}
);
app.use(Storage, configObj);
}; };

1
types/global.d.ts

@ -87,6 +87,7 @@ declare global {
Title?: string; Title?: string;
FixedHeader?: boolean; FixedHeader?: boolean;
HiddenSideBar?: boolean; HiddenSideBar?: boolean;
MultiTagsCache?: boolean;
KeepAlive?: boolean; KeepAlive?: boolean;
Locale?: string; Locale?: string;
Layout?: string; Layout?: string;

Loading…
Cancel
Save