From 34eda14473ed0ab9f9e82a10d61534dc83ef0430 Mon Sep 17 00:00:00 2001 From: lrl <742798240@qq.com> Date: Wed, 29 Dec 2021 21:51:05 +0800 Subject: [PATCH] perf: storage --- public/serverConfig.json | 4 ++ src/layout/components/appMain.vue | 2 +- src/layout/components/setting/index.vue | 75 +++++++++++----------- src/layout/components/sidebar/vertical.vue | 4 +- src/layout/components/tag/index.vue | 8 ++- src/layout/index.vue | 18 ++++-- src/router/modules/index.ts | 6 +- src/store/modules/app.ts | 18 +++--- src/store/modules/epTheme.ts | 9 ++- src/store/modules/multiTags.ts | 4 +- src/utils/storage/responsive.ts | 10 ++- types/global.d.ts | 4 ++ 12 files changed, 96 insertions(+), 66 deletions(-) diff --git a/public/serverConfig.json b/public/serverConfig.json index 42cf9c15a..fc972e10d 100644 --- a/public/serverConfig.json +++ b/public/serverConfig.json @@ -12,6 +12,10 @@ "Grey": false, "Weak": false, "HideTabs": false, + "SidebarStatus": true, + "EpThemeColor": "#409EFF", + "ShowLogo": "1", + "ShowModel": "smart", "MapConfigure": { "amapKey": "97b3248d1553172e81f168cf94ea667e", "options": { diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue index 534928f71..8c1a8aa0a 100644 --- a/src/layout/components/appMain.vue +++ b/src/layout/components/appMain.vue @@ -27,7 +27,7 @@ const transitions = computed(() => { }); const hideTabs = computed(() => { - return instance?.sets.hideTabs; + return instance?.configure.hideTabs; }); const layout = computed(() => { diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 503490938..1164f06a9 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -79,17 +79,19 @@ if (unref(layoutTheme)) { } // 默认灵动模式 -const markValue = ref(storageLocal.getItem("showModel") || "smart"); +const markValue = ref(instance.configure?.showModel || "smart"); -const logoVal = ref(storageLocal.getItem("logoVal") || "1"); +const logoVal = ref(instance.configure?.showLogo || "1"); const epThemeColor = ref(useEpThemeStoreHook().getEpThemeColor); const settings = reactive({ - greyVal: instance.sets.grey, - weakVal: instance.sets.weak, - tabsVal: instance.sets.hideTabs, - multiTagsCache: instance.sets.multiTagsCache + greyVal: instance.configure.grey, + weakVal: instance.configure.weak, + tabsVal: instance.configure.hideTabs, + showLogo: instance.configure.showLogo, + showModel: instance.configure.showModel, + multiTagsCache: instance.configure.multiTagsCache }); const getThemeColorStyle = computed(() => { @@ -98,6 +100,12 @@ const getThemeColorStyle = computed(() => { }; }); +function changeStorageConfigure(key, val) { + const storageConfigure = instance.configure; + storageConfigure[key] = val; + instance.configure = storageConfigure; +} + function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) { const targetEl = target || document.body; let { className } = targetEl; @@ -108,12 +116,7 @@ function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) { // 灰色模式设置 const greyChange = (value): void => { toggleClass(settings.greyVal, "html-grey", document.querySelector("html")); - instance.sets = { - grey: value, - weak: instance.sets.weak, - hideTabs: instance.sets.hideTabs, - multiTagsCache: instance.sets.multiTagsCache - }; + changeStorageConfigure("grey", value); }; // 色弱模式设置 @@ -123,33 +126,18 @@ const weekChange = (value): void => { "html-weakness", document.querySelector("html") ); - instance.sets = { - grey: instance.sets.grey, - weak: value, - hideTabs: instance.sets.hideTabs, - multiTagsCache: instance.sets.multiTagsCache - }; + changeStorageConfigure("weak", value); }; const tagsChange = () => { let showVal = settings.tabsVal; - instance.sets = { - grey: instance.sets.grey, - weak: instance.sets.weak, - hideTabs: showVal, - multiTagsCache: instance.sets.multiTagsCache - }; + changeStorageConfigure("hideTabs", showVal); emitter.emit("tagViewsChange", showVal); }; const multiTagsCacheChange = () => { let multiTagsCache = settings.multiTagsCache; - instance.sets = { - grey: instance.sets.grey, - weak: instance.sets.weak, - hideTabs: instance.sets.hideTabs, - multiTagsCache: multiTagsCache - }; + changeStorageConfigure("multiTagsCache", multiTagsCache); useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache); }; @@ -174,22 +162,22 @@ function onReset() { } ]); useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache); - useEpThemeStoreHook().setEpThemeColor("#409EFF"); + useEpThemeStoreHook().setEpThemeColor(getConfig().EpThemeColor); storageLocal.clear(); storageSession.clear(); router.push("/login"); } function onChange(label) { - storageLocal.setItem("showModel", label); + changeStorageConfigure("showModel", label); emitter.emit("tagViewsShowModel", label); } // 侧边栏Logo function logoChange() { unref(logoVal) === "1" - ? storageLocal.setItem("logoVal", "1") - : storageLocal.setItem("logoVal", "-1"); + ? changeStorageConfigure("showLogo", "1") + : changeStorageConfigure("showLogo", "-1"); emitter.emit("logoChange", unref(logoVal)); } @@ -238,13 +226,19 @@ function setLayoutModel(layout: string) { instance.layout = { layout, theme: layoutTheme.value.theme, - darkMode: instance.layout.darkMode + darkMode: instance.layout.darkMode, + sidebarStatus: instance.layout.sidebarStatus, + epThemeColor: instance.layout.epThemeColor }; useAppStoreHook().setLayout(layout); } +// 存放夜间主题切换前的导航主题色 +let tempLayoutThemeColor; + // 设置导航主题色 function setLayoutThemeColor(theme: string) { + tempLayoutThemeColor = instance.layout.theme; layoutTheme.value.theme = theme; toggleTheme({ scopeName: `layout-theme-${theme}` @@ -252,11 +246,13 @@ function setLayoutThemeColor(theme: string) { instance.layout = { layout: useAppStoreHook().layout, theme, - darkMode: dataTheme.value + darkMode: dataTheme.value, + sidebarStatus: instance.layout.sidebarStatus, + epThemeColor: instance.layout.epThemeColor }; if (theme === "default" || theme === "light") { - setEpThemeColor("#409EFF"); + setEpThemeColor(getConfig().EpThemeColor); } else { const colors = find(themeColors.value, { themeColor: theme }); const color = "#" + rgbHex(colors.rgb); @@ -280,10 +276,13 @@ function dataThemeChange() { setLayoutThemeColor("light"); } else { body.setAttribute("data-theme", ""); + tempLayoutThemeColor && setLayoutThemeColor(tempLayoutThemeColor); instance.layout = { layout: useAppStoreHook().layout, theme: instance.layout.theme, - darkMode: dataTheme.value + darkMode: dataTheme.value, + sidebarStatus: instance.layout.sidebarStatus, + epThemeColor: instance.layout.epThemeColor }; } } diff --git a/src/layout/components/sidebar/vertical.vue b/src/layout/components/sidebar/vertical.vue index 61082acd5..2e153cca7 100644 --- a/src/layout/components/sidebar/vertical.vue +++ b/src/layout/components/sidebar/vertical.vue @@ -12,7 +12,9 @@ import { usePermissionStoreHook } from "/@/store/modules/permission"; const route = useRoute(); const pureApp = useAppStoreHook(); const router = useRouter().options.routes; -const showLogo = ref(storageLocal.getItem("logoVal") || "1"); +const showLogo = ref( + storageLocal.getItem("responsive-configure")?.showLogo || "1" +); const isCollapse = computed(() => { return !pureApp.getSidebarStatus; }); diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue index 4ea4e0fea..b84bb7bdd 100644 --- a/src/layout/components/tag/index.vue +++ b/src/layout/components/tag/index.vue @@ -232,9 +232,13 @@ const tagsViews = ref>([ ]); // 显示模式，默认灵动模式显示 -const showModel = ref(storageLocal.getItem("showModel") || "smart"); +const showModel = ref( + storageLocal.getItem("responsive-configure")?.showModel || "smart" +); if (!showModel.value) { - storageLocal.setItem("showModel", "card"); + const configure = storageLocal.getItem("responsive-configure"); + configure.showModel = "card"; + storageLocal.setItem("responsive-configure", configure); } let visible = ref(false); diff --git a/src/layout/index.vue b/src/layout/index.vue index 98de564d0..69d9acf9e 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -16,8 +16,8 @@ import { useAppStoreHook } from "/@/store/modules/app"; import fullScreen from "/@/assets/svg/full_screen.svg"; import exitScreen from "/@/assets/svg/exit_screen.svg"; import { deviceDetection } from "/@/utils/deviceDetection"; -import { useSettingStoreHook } from "/@/store/modules/settings"; import { useMultiTagsStore } from "/@/store/modules/multiTags"; +import { useSettingStoreHook } from "/@/store/modules/settings"; import navbar from "./components/navbar.vue"; import tag from "./components/tag/index.vue"; @@ -52,16 +52,20 @@ const layout = computed(() => { instance.$storage.layout = { layout: instance.$config?.Layout ?? "vertical", theme: instance.$config?.Theme ?? "default", - darkMode: instance.$config?.DarkMode ?? false + darkMode: instance.$config?.DarkMode ?? false, + sidebarStatus: instance.$config?.SidebarStatus ?? true, + epThemeColor: instance.$config?.EpThemeColor ?? "#409EFF" }; } // 灰色模式、色弱模式、隐藏标签页 - if (!instance.$storage.sets) { + if (!instance.$storage.configure) { // eslint-disable-next-line - instance.$storage.sets = { + instance.$storage.configure = { grey: instance.$config?.Grey ?? false, weak: instance.$config?.Weak ?? false, hideTabs: instance.$config?.HideTabs ?? false, + showLogo: instance.$config?.ShowLogo ?? "1", + showModel: instance.$config?.ShowModel ?? "smart", multiTagsCache: instance.$config?.MultiTagsCache ?? false }; } @@ -91,7 +95,7 @@ const set: setType = reactive({ }), hideTabs: computed(() => { - return instance.$storage?.sets.hideTabs; + return instance.$storage?.configure.hideTabs; }) }); @@ -100,7 +104,9 @@ function setTheme(layoutModel: string) { instance.$storage.layout = { layout: `${layoutModel}`, theme: instance.$storage.layout?.theme, - darkMode: instance.$storage.layout?.darkMode + darkMode: instance.$storage.layout?.darkMode, + sidebarStatus: instance.$storage.layout?.sidebarStatus, + epThemeColor: instance.$storage.layout?.epThemeColor }; } diff --git a/src/router/modules/index.ts b/src/router/modules/index.ts index ce34a1a96..f4ad70394 100644 --- a/src/router/modules/index.ts +++ b/src/router/modules/index.ts @@ -1,6 +1,7 @@ // 静态路由 import homeRouter from "./home"; import errorRouter from "./error"; +import guideRouter from "./guide"; import editorRouter from "./editor"; import nestedRouter from "./nested"; import menuTreeRouter from "./menuTree"; @@ -8,7 +9,6 @@ import externalLink from "./externalLink"; import flowChartRouter from "./flowchart"; import remainingRouter from "./remaining"; import componentsRouter from "./components"; -import guideRouter from "./guide"; import { RouteRecordRaw, RouteComponent } from "vue-router"; import { @@ -21,13 +21,13 @@ import { const routes = [ homeRouter, errorRouter, + guideRouter, nestedRouter, externalLink, editorRouter, menuTreeRouter, flowChartRouter, - componentsRouter, - guideRouter + componentsRouter ]; // 导出处理后的静态路由（三级及以上的路由全部拍成二级） diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index f488d9941..9deee604a 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -1,17 +1,17 @@ -import { storageLocal } from "/@/utils/storage"; -import { deviceDetection } from "/@/utils/deviceDetection"; import { store } from "/@/store"; import { appType } from "./types"; import { defineStore } from "pinia"; import { getConfig } from "/@/config"; +import { storageLocal } from "/@/utils/storage"; +import { deviceDetection } from "/@/utils/deviceDetection"; export const useAppStore = defineStore({ id: "pure-app", state: (): appType => ({ sidebar: { - opened: storageLocal.getItem("sidebarStatus") - ? !!+storageLocal.getItem("sidebarStatus") - : true, + opened: + storageLocal.getItem("responsive-layout")?.sidebarStatus ?? + getConfig().SidebarStatus, withoutAnimation: false, isClickHamburger: false }, @@ -30,20 +30,22 @@ export const useAppStore = defineStore({ }, actions: { TOGGLE_SIDEBAR(opened?: boolean, resize?: string) { + const layout = storageLocal.getItem("responsive-layout"); if (opened && resize) { this.sidebar.withoutAnimation = true; this.sidebar.opened = true; - storageLocal.setItem("sidebarStatus", true); + layout.sidebarStatus = true; } else if (!opened && resize) { this.sidebar.withoutAnimation = true; this.sidebar.opened = false; - storageLocal.setItem("sidebarStatus", false); + layout.sidebarStatus = false; } else if (!opened && !resize) { this.sidebar.withoutAnimation = false; this.sidebar.opened = !this.sidebar.opened; this.sidebar.isClickHamburger = !this.sidebar.opened; - storageLocal.setItem("sidebarStatus", this.sidebar.opened); + layout.sidebarStatus = this.sidebar.opened; } + storageLocal.setItem("responsive-layout", layout); }, TOGGLE_DEVICE(device: string) { this.device = device; diff --git a/src/store/modules/epTheme.ts b/src/store/modules/epTheme.ts index 0632036e9..96f8a51ca 100644 --- a/src/store/modules/epTheme.ts +++ b/src/store/modules/epTheme.ts @@ -1,11 +1,14 @@ import { store } from "/@/store"; import { defineStore } from "pinia"; +import { getConfig } from "/@/config"; import { storageLocal } from "/@/utils/storage"; export const useEpThemeStore = defineStore({ id: "pure-epTheme", state: () => ({ - epThemeColor: storageLocal.getItem("epThemeColor") || "#409EFF" + epThemeColor: + storageLocal.getItem("responsive-layout")?.epThemeColor ?? + getConfig().EpThemeColor }), getters: { getEpThemeColor() { @@ -14,8 +17,10 @@ export const useEpThemeStore = defineStore({ }, actions: { setEpThemeColor(newColor) { + const layout = storageLocal.getItem("responsive-layout"); this.epThemeColor = newColor; - storageLocal.setItem("epThemeColor", newColor); + layout.epThemeColor = newColor; + storageLocal.setItem("responsive-layout", layout); } } }); diff --git a/src/store/modules/multiTags.ts b/src/store/modules/multiTags.ts index c2260e7a7..82f356ae2 100644 --- a/src/store/modules/multiTags.ts +++ b/src/store/modules/multiTags.ts @@ -8,7 +8,7 @@ export const useMultiTagsStore = defineStore({ id: "pure-multiTags", state: () => ({ // 存储标签页信息（路由信息） - multiTags: storageLocal.getItem("responsive-sets").multiTagsCache + multiTags: storageLocal.getItem("responsive-configure").multiTagsCache ? storageLocal.getItem("responsive-tags") : [ { @@ -22,7 +22,7 @@ export const useMultiTagsStore = defineStore({ } } ], - multiTagsCache: storageLocal.getItem("responsive-sets").multiTagsCache + multiTagsCache: storageLocal.getItem("responsive-configure").multiTagsCache }), getters: { getMultiTagsCache() { diff --git a/src/utils/storage/responsive.ts b/src/utils/storage/responsive.ts index 240c016a5..dba3d351d 100644 --- a/src/utils/storage/responsive.ts +++ b/src/utils/storage/responsive.ts @@ -18,15 +18,19 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => { default: Storage.getData(undefined, "layout") ?? { layout: config.Layout ?? "vertical", theme: config.Theme ?? "default", - darkMode: config.DarkMode ?? false + darkMode: config.DarkMode ?? false, + sidebarStatus: config.SidebarStatus ?? true, + epThemeColor: config.EpThemeColor ?? "409EFF" } }, - sets: { + configure: { type: Object, - default: Storage.getData(undefined, "sets") ?? { + default: Storage.getData(undefined, "configure") ?? { grey: config.Grey ?? false, weak: config.Weak ?? false, hideTabs: config.HideTabs ?? false, + showLogo: config.ShowLogo ?? "1", + showModel: config.ShowModel ?? "smart", multiTagsCache: config.MultiTagsCache ?? false } } diff --git a/types/global.d.ts b/types/global.d.ts index 90396fb9e..a2b8c7656 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -86,6 +86,10 @@ declare global { Grey?: boolean; Weak?: boolean; HideTabs?: boolean; + SidebarStatus?: boolean; + EpThemeColor?: string; + ShowLogo?: string; + ShowModel?: string; MapConfigure?: { amapKey?: string; options: {