Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
85a60cdc4d
  1. 55
      src/layout/components/setting/index.vue
  2. 3
      src/layout/index.vue
  3. 2
      src/layout/theme/auroraGreen-vars.scss
  4. 2
      src/layout/theme/default-vars.scss
  5. 2
      src/layout/theme/dusk-vars.scss
  6. 2
      src/layout/theme/light-vars.scss
  7. 2
      src/layout/theme/mingQing-vars.scss
  8. 2
      src/layout/theme/pink-vars.scss
  9. 2
      src/layout/theme/saucePurple-vars.scss
  10. 2
      src/layout/theme/volcano-vars.scss
  11. 2
      src/layout/theme/yellow-vars.scss
  12. 57
      src/router/index.ts
  13. 14
      src/store/modules/multiTags.ts
  14. 3
      src/utils/storage/responsive.ts

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

@ -10,6 +10,7 @@ import {
getCurrentInstance getCurrentInstance
} from "vue"; } from "vue";
import panel from "../panel/index.vue"; import panel from "../panel/index.vue";
import { getConfig } from "/@/config";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { templateRef } from "@vueuse/core"; import { templateRef } from "@vueuse/core";
@ -29,23 +30,23 @@ const instanceConfig =
getCurrentInstance().appContext.app.config.globalProperties.$config; getCurrentInstance().appContext.app.config.globalProperties.$config;
let themeColors = ref<Array<themeColorsType>>([ let themeColors = ref<Array<themeColorsType>>([
//
//
{ rgb: "27, 42, 71", themeColor: "default" }, { rgb: "27, 42, 71", themeColor: "default" },
//
//
{ rgb: "255, 255, 255", themeColor: "light" }, { rgb: "255, 255, 255", themeColor: "light" },
//
//
{ rgb: "245, 34, 45", themeColor: "dusk" }, { rgb: "245, 34, 45", themeColor: "dusk" },
//
//
{ rgb: "250, 84, 28", themeColor: "volcano" }, { rgb: "250, 84, 28", themeColor: "volcano" },
//
//
{ rgb: "250, 219, 20", themeColor: "yellow" }, { rgb: "250, 219, 20", themeColor: "yellow" },
//
// 绿
{ rgb: "19, 194, 194", themeColor: "mingQing" }, { rgb: "19, 194, 194", themeColor: "mingQing" },
// 绿
// 绿
{ rgb: "82, 196, 26", themeColor: "auroraGreen" }, { rgb: "82, 196, 26", themeColor: "auroraGreen" },
//
//
{ rgb: "235, 47, 150", themeColor: "pink" }, { rgb: "235, 47, 150", themeColor: "pink" },
//
//
{ rgb: "114, 46, 209", themeColor: "saucePurple" } { rgb: "114, 46, 209", themeColor: "saucePurple" }
]); ]);
@ -77,7 +78,8 @@ const logoVal = ref(storageLocal.getItem("logoVal") || "1");
const settings = reactive({ const settings = reactive({
greyVal: instance.sets.grey, greyVal: instance.sets.grey,
weakVal: instance.sets.weak, weakVal: instance.sets.weak,
tabsVal: instance.sets.hideTabs
tabsVal: instance.sets.hideTabs,
multiTagsCache: instance.sets.multiTagsCache
}); });
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) { function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
@ -93,7 +95,8 @@ const greyChange = (value): void => {
instance.sets = { instance.sets = {
grey: value, grey: value,
weak: instance.sets.weak, weak: instance.sets.weak,
hideTabs: instance.sets.hideTabs
hideTabs: instance.sets.hideTabs,
multiTagsCache: instance.sets.multiTagsCache
}; };
}; };
@ -107,7 +110,8 @@ const weekChange = (value): void => {
instance.sets = { instance.sets = {
grey: instance.sets.grey, grey: instance.sets.grey,
weak: value, weak: value,
hideTabs: instance.sets.hideTabs
hideTabs: instance.sets.hideTabs,
multiTagsCache: instance.sets.multiTagsCache
}; };
}; };
@ -116,11 +120,23 @@ const tagsChange = () => {
instance.sets = { instance.sets = {
grey: instance.sets.grey, grey: instance.sets.grey,
weak: instance.sets.weak, weak: instance.sets.weak,
hideTabs: showVal
hideTabs: showVal,
multiTagsCache: instance.sets.multiTagsCache
}; };
emitter.emit("tagViewsChange", 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
};
useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
};
// //
nextTick(() => { nextTick(() => {
settings.greyVal && settings.greyVal &&
@ -148,6 +164,7 @@ function onReset() {
} }
} }
]); ]);
useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache);
router.push("/login"); router.push("/login");
} }
@ -317,6 +334,18 @@ function setLayoutThemeColor(theme: string) {
> >
</el-switch> </el-switch>
</li> </li>
<li>
<span>标签页持久化</span>
<el-switch
v-model="settings.multiTagsCache"
inline-prompt
inactive-color="#a6a6a6"
active-text="开"
inactive-text="关"
@change="multiTagsCacheChange"
>
</el-switch>
</li>
<li> <li>
<span>标签风格</span> <span>标签风格</span>

3
src/layout/index.vue

@ -60,7 +60,8 @@ const layout = computed(() => {
instance.$storage.sets = { instance.$storage.sets = {
grey: instance.$config?.Grey ?? false, grey: instance.$config?.Grey ?? false,
weak: instance.$config?.Weak ?? false, weak: instance.$config?.Weak ?? false,
hideTabs: instance.$config?.HideTabs ?? false
hideTabs: instance.$config?.HideTabs ?? false,
multiTagsCache: instance.$config?.MultiTagsCache ?? false
}; };
} }
return instance.$storage?.layout.layout; return instance.$storage?.layout.layout;

2
src/layout/theme/auroraGreen-vars.scss

@ -1,4 +1,4 @@
/* 极光绿 */
/* 酸橙绿 */
$subMenuActiveText: #fff; $subMenuActiveText: #fff;
$menuBg: #0b1e15; $menuBg: #0b1e15;
$menuHover: #60ac80; $menuHover: #60ac80;

2
src/layout/theme/default-vars.scss

@ -1,5 +1,5 @@
/** /**
* 暗雅默认
* 道奇蓝默认
* 此scss变量文件作为multipleScopeVars去编译时会自动移除!default以达到变量提升 * 此scss变量文件作为multipleScopeVars去编译时会自动移除!default以达到变量提升
* 同时此scss变量文件作为默认主题变量文件被其他.scss通过 @import 必需 !default * 同时此scss变量文件作为默认主题变量文件被其他.scss通过 @import 必需 !default
*/ */

2
src/layout/theme/dusk-vars.scss

@ -1,4 +1,4 @@
/* 薄暮 */
/* 猩红色 */
$subMenuActiveText: #fff; $subMenuActiveText: #fff;
$menuBg: #2a0608; $menuBg: #2a0608;
$menuHover: #e13c39; $menuHover: #e13c39;

2
src/layout/theme/light-vars.scss

@ -1,4 +1,4 @@
/* 亮 */
/* 亮白色 */
$subMenuActiveText: #409eff; $subMenuActiveText: #409eff;
$menuBg: #fff; $menuBg: #fff;
$menuHover: #e0ebf6; $menuHover: #e0ebf6;

2
src/layout/theme/mingQing-vars.scss

@ -1,4 +1,4 @@
/* 明青 */
/* 绿宝石 */
$subMenuActiveText: #fff; $subMenuActiveText: #fff;
$menuBg: #032121; $menuBg: #032121;
$menuHover: #59bfc1; $menuHover: #59bfc1;

2
src/layout/theme/pink-vars.scss

@ -1,4 +1,4 @@
/* 粉红 */
/* 深粉色 */
$subMenuActiveText: #fff; $subMenuActiveText: #fff;
$menuBg: #28081a; $menuBg: #28081a;
$menuHover: #d84493; $menuHover: #d84493;

2
src/layout/theme/saucePurple-vars.scss

@ -1,4 +1,4 @@
/* 酱紫 */
/* 深紫罗兰色 */
$subMenuActiveText: #fff; $subMenuActiveText: #fff;
$menuBg: #130824; $menuBg: #130824;
$menuHover: #693ac9; $menuHover: #693ac9;

2
src/layout/theme/volcano-vars.scss

@ -1,4 +1,4 @@
/* 火山 */
/* 橙红色 */
$subMenuActiveText: #fff; $subMenuActiveText: #fff;
$menuBg: #2b0e05; $menuBg: #2b0e05;
$menuHover: #e85f33; $menuHover: #e85f33;

2
src/layout/theme/yellow-vars.scss

@ -1,4 +1,4 @@
/* 橘黄 */
/* 金色 */
$subMenuActiveText: #d25f00; $subMenuActiveText: #d25f00;
$menuBg: #2b2503; $menuBg: #2b2503;
$menuHover: #f6da4d; $menuHover: #f6da4d;

57
src/router/index.ts

@ -188,6 +188,49 @@ export function resetRouter() {
}); });
} }
function findRouteByPath(path, routes) {
let res = routes.find(item => item.path == path);
if (res) {
return res;
} else {
for (let i = 0; i < routes.length; i++) {
if (
routes[i].children instanceof Array &&
routes[i].children.length > 0
) {
res = findRouteByPath(path, routes[i].children);
if (res) {
return res;
}
}
}
return null;
}
}
function getParentPaths(path, routes) {
// 深度遍历查找
function dfs(routes, path, parents) {
for (let i = 0; i < routes.length; i++) {
const item = routes[i];
// 找到path则返回父级path
if (item.path === path) return parents;
// children不存在或为空则不递归
if (!item.children || !item.children.length) continue;
// 往下查找时将当前path入栈
parents.push(item.path);
if (dfs(item.children, path, parents).length) return parents;
// 深度遍历查找未找到时当前path 出栈
parents.pop();
}
// 未找到时返回空数组
return [];
}
return dfs(routes, path, []);
}
// 路由白名单 // 路由白名单
const whiteList = ["/login"]; const whiteList = ["/login"];
@ -245,9 +288,17 @@ router.beforeEach((to, _from, next) => {
handTag(path, parentPath, name, meta); handTag(path, parentPath, name, meta);
return router.push(path); return router.push(path);
} else { } else {
const { path, name, meta } = to;
handTag(path, parentPath, name, meta);
return router.push(to.path);
const { path } = to;
const routes = router.options.routes;
const route = findRouteByPath(path, routes);
const routePartent = getParentPaths(path, routes);
handTag(
route.path,
routePartent[routePartent.length - 1],
route.name,
route.meta
);
return router.push(path);
} }
} }
router.push(to.path); router.push(to.path);

14
src/store/modules/multiTags.ts

@ -1,6 +1,5 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { store } from "/@/store"; import { store } from "/@/store";
import { getConfig } from "/@/config";
import { storageLocal } from "/@/utils/storage"; import { storageLocal } from "/@/utils/storage";
import { multiType, positionType } from "./types"; import { multiType, positionType } from "./types";
@ -8,7 +7,7 @@ export const useMultiTagsStore = defineStore({
id: "pure-multiTags", id: "pure-multiTags",
state: () => ({ state: () => ({
// 存储标签页信息(路由信息) // 存储标签页信息(路由信息)
multiTags: getConfig().MultiTagsCache
multiTags: storageLocal.getItem("responsive-sets").multiTagsCache
? storageLocal.getItem("responsive-tags") ? storageLocal.getItem("responsive-tags")
: [ : [
{ {
@ -22,7 +21,7 @@ export const useMultiTagsStore = defineStore({
} }
} }
], ],
multiTagsCache: getConfig().MultiTagsCache
multiTagsCache: storageLocal.getItem("responsive-sets").multiTagsCache
}), }),
getters: { getters: {
getMultiTagsCache() { getMultiTagsCache() {
@ -30,6 +29,14 @@ export const useMultiTagsStore = defineStore({
} }
}, },
actions: { actions: {
multiTagsCacheChange(multiTagsCache: boolean) {
this.multiTagsCache = multiTagsCache;
if (multiTagsCache) {
storageLocal.setItem("responsive-tags", this.multiTags);
} else {
storageLocal.removeItem("responsive-tags");
}
},
tagsCache(multiTags) { tagsCache(multiTags) {
this.getMultiTagsCache && this.getMultiTagsCache &&
storageLocal.setItem("responsive-tags", multiTags); storageLocal.setItem("responsive-tags", multiTags);
@ -42,6 +49,7 @@ export const useMultiTagsStore = defineStore({
switch (mode) { switch (mode) {
case "equal": case "equal":
this.multiTags = value; this.multiTags = value;
this.tagsCache(this.multiTags);
break; break;
case "push": case "push":
{ {

3
src/utils/storage/responsive.ts

@ -25,7 +25,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
default: Storage.getData(undefined, "sets") ?? { default: Storage.getData(undefined, "sets") ?? {
grey: config.Grey ?? false, grey: config.Grey ?? false,
weak: config.Weak ?? false, weak: config.Weak ?? false,
hideTabs: config.HideTabs ?? false
hideTabs: config.HideTabs ?? false,
multiTagsCache: config.MultiTagsCache ?? false
} }
} }
}, },

Loading…
Cancel
Save