Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
6b28aa2170
  1. 1
      public/serverConfig.json
  2. 58
      src/layout/components/setting/index.vue
  3. 6
      src/layout/index.vue
  4. 12
      src/layout/theme/element-plus.ts
  5. 3
      src/utils/storage/responsive.ts
  6. 1
      types/global.d.ts

1
public/serverConfig.json

@ -8,6 +8,7 @@
"Locale": "zh", "Locale": "zh",
"Layout": "vertical", "Layout": "vertical",
"Theme": "default", "Theme": "default",
"DarkMode": false,
"Grey": false, "Grey": false,
"Weak": false, "Weak": false,
"HideTabs": false, "HideTabs": false,

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

@ -145,23 +145,14 @@ const multiTagsCacheChange = () => {
useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache); useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
}; };
//
nextTick(() => {
settings.greyVal &&
document.querySelector("html")?.setAttribute("class", "html-grey");
settings.weakVal &&
document.querySelector("html")?.setAttribute("class", "html-weakness");
settings.tabsVal && tagsChange();
writeNewStyle(createNewStyle(epThemeColor.value));
});
// //
function onReset() { function onReset() {
storageLocal.clear();
storageSession.clear();
toggleClass(false, "html-grey", document.querySelector("html"));
toggleClass(false, "html-weakness", document.querySelector("html"));
toggleClass(getConfig().Grey, "html-grey", document.querySelector("html"));
toggleClass(
getConfig().Weak,
"html-weakness",
document.querySelector("html")
);
useMultiTagsStoreHook().handleTags("equal", [ useMultiTagsStoreHook().handleTags("equal", [
{ {
path: "/welcome", path: "/welcome",
@ -176,6 +167,8 @@ function onReset() {
]); ]);
useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache); useMultiTagsStoreHook().multiTagsCacheChange(getConfig().MultiTagsCache);
useEpThemeStoreHook().setEpThemeColor("#409EFF"); useEpThemeStoreHook().setEpThemeColor("#409EFF");
storageLocal.clear();
storageSession.clear();
router.push("/login"); router.push("/login");
} }
@ -234,7 +227,11 @@ const getThemeColor = computed(() => {
function setLayoutModel(layout: string) { function setLayoutModel(layout: string) {
layoutTheme.value.layout = layout; layoutTheme.value.layout = layout;
window.document.body.setAttribute("layout", layout); window.document.body.setAttribute("layout", layout);
instance.layout = { layout, theme: layoutTheme.value.theme };
instance.layout = {
layout,
theme: layoutTheme.value.theme,
darkMode: instance.layout.darkMode
};
useAppStoreHook().setLayout(layout); useAppStoreHook().setLayout(layout);
} }
@ -244,7 +241,11 @@ function setLayoutThemeColor(theme: string) {
toggleTheme({ toggleTheme({
scopeName: `layout-theme-${theme}` scopeName: `layout-theme-${theme}`
}); });
instance.layout = { layout: useAppStoreHook().layout, theme };
instance.layout = {
layout: useAppStoreHook().layout,
theme,
darkMode: dataTheme.value
};
if (theme === "default" || theme === "light") { if (theme === "default" || theme === "light") {
setEpThemeColor("#409EFF"); setEpThemeColor("#409EFF");
@ -261,7 +262,7 @@ const setEpThemeColor = (color: string) => {
useEpThemeStoreHook().setEpThemeColor(color); useEpThemeStoreHook().setEpThemeColor(color);
}; };
let dataTheme = ref<boolean>(false);
let dataTheme = ref<boolean>(instance.layout.darkMode);
// //
function dataThemeChange() { function dataThemeChange() {
@ -269,8 +270,27 @@ function dataThemeChange() {
if (dataTheme.value) { if (dataTheme.value) {
body.setAttribute("data-theme", "dark"); body.setAttribute("data-theme", "dark");
setLayoutThemeColor("light"); setLayoutThemeColor("light");
} else body.setAttribute("data-theme", "");
} else {
body.setAttribute("data-theme", "");
instance.layout = {
layout: useAppStoreHook().layout,
theme: instance.layout.theme,
darkMode: dataTheme.value
};
}
} }
//
nextTick(() => {
settings.greyVal &&
document.querySelector("html")?.setAttribute("class", "html-grey");
settings.weakVal &&
document.querySelector("html")?.setAttribute("class", "html-weakness");
settings.tabsVal && tagsChange();
writeNewStyle(createNewStyle(epThemeColor.value));
dataThemeChange();
});
</script> </script>
<template> <template>

6
src/layout/index.vue

@ -51,7 +51,8 @@ const layout = computed(() => {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties // eslint-disable-next-line vue/no-side-effects-in-computed-properties
instance.$storage.layout = { instance.$storage.layout = {
layout: instance.$config?.Layout ?? "vertical", layout: instance.$config?.Layout ?? "vertical",
theme: instance.$config?.Theme ?? "default"
theme: instance.$config?.Theme ?? "default",
darkMode: instance.$config?.DarkMode ?? false
}; };
} }
// //
@ -98,7 +99,8 @@ function setTheme(layoutModel: string) {
window.document.body.setAttribute("layout", layoutModel); window.document.body.setAttribute("layout", layoutModel);
instance.$storage.layout = { instance.$storage.layout = {
layout: `${layoutModel}`, layout: `${layoutModel}`,
theme: instance.$storage.layout?.theme
theme: instance.$storage.layout?.theme,
darkMode: instance.$storage.layout?.darkMode
}; };
} }

12
src/layout/theme/element-plus.ts

@ -3,6 +3,7 @@ import rgbHex from "rgb-hex";
import color from "css-color-function"; import color from "css-color-function";
import epCss from "element-plus/dist/index.css"; import epCss from "element-plus/dist/index.css";
// 色值表
const formula = { const formula = {
"shade-1": "color(primary shade(10%))", "shade-1": "color(primary shade(10%))",
"light-1": "color(primary tint(10%))", "light-1": "color(primary tint(10%))",
@ -16,15 +17,20 @@ const formula = {
"light-9": "color(primary tint(90%))" "light-9": "color(primary tint(90%))"
}; };
// 把生成的样式表写入到style中
export const writeNewStyle = (newStyle: string): void => { export const writeNewStyle = (newStyle: string): void => {
const style = window.document.createElement("style"); const style = window.document.createElement("style");
style.innerText = newStyle; style.innerText = newStyle;
window.document.head.appendChild(style); window.document.head.appendChild(style);
}; };
// 根据主题色,生成最新的样式表
export const createNewStyle = (primaryStyle: string): string => { export const createNewStyle = (primaryStyle: string): string => {
// 根据主色生成色值表
const colors = createColors(primaryStyle); const colors = createColors(primaryStyle);
let cssText = getOriginStyle();
// 在当前ep的默认样式表中标记需要替换的色值
let cssText = getStyleTemplate(epCss);
// 遍历生成的色值表,在 默认样式表 进行全局替换
Object.keys(colors).forEach(key => { Object.keys(colors).forEach(key => {
cssText = cssText.replace( cssText = cssText.replace(
new RegExp("(:|\\s+)" + key, "g"), new RegExp("(:|\\s+)" + key, "g"),
@ -46,10 +52,6 @@ export const createColors = (primary: string) => {
return colors; return colors;
}; };
export const getOriginStyle = () => {
return getStyleTemplate(epCss);
};
const getStyleTemplate = (data: string): string => { const getStyleTemplate = (data: string): string => {
const colorMap = { const colorMap = {
"#3a8ee6": "shade-1", "#3a8ee6": "shade-1",

3
src/utils/storage/responsive.ts

@ -17,7 +17,8 @@ export const injectResponsiveStorage = (app: App, config: ServerConfigs) => {
type: Object, type: Object,
default: Storage.getData(undefined, "layout") ?? { default: Storage.getData(undefined, "layout") ?? {
layout: config.Layout ?? "vertical", layout: config.Layout ?? "vertical",
theme: config.Theme ?? "default"
theme: config.Theme ?? "default",
darkMode: config.DarkMode ?? false
} }
}, },
sets: { sets: {

1
types/global.d.ts

@ -82,6 +82,7 @@ declare global {
Locale?: string; Locale?: string;
Layout?: string; Layout?: string;
Theme?: string; Theme?: string;
DarkMode?: boolean;
Grey?: boolean; Grey?: boolean;
Weak?: boolean; Weak?: boolean;
HideTabs?: boolean; HideTabs?: boolean;

Loading…
Cancel
Save