Browse Source

perf: 同步完整版分支代码

i18n
xiaoxian521 3 years ago
parent
commit
c4de900bc0
  1. 22
      src/components/ReIcon/index.ts
  2. 2
      src/layout/components/setting/index.vue
  3. 9
      src/layout/theme/element-plus.ts

22
src/components/ReIcon/index.ts

@ -9,20 +9,24 @@ import { iconComponents } from "/@/plugins/element-plus";
* @returns component
*/
export function findIconReg(icon: string) {
// fontawesome
const faReg = /^FA-/;
// fontawesome4
const fa4Reg = /^fa-/;
// fontawesome5+
const fa5Reg = /^FA-/;
// iconfont
const iFReg = /^IF-/;
// remixicon
const riReg = /^RI-/;
// typeof icon === "function" 属于SVG
if (faReg.test(icon)) {
const text = icon.split(faReg)[1];
if (fa5Reg.test(icon)) {
const text = icon.split(fa5Reg)[1];
return findIcon(
text.slice(0, text.indexOf(" ")),
text.slice(0, text.indexOf(" ") == -1 ? text.length : text.indexOf(" ")),
"FA",
text.slice(text.indexOf(" ") + 1, text.length)
);
} else if (fa4Reg.test(icon)) {
return findIcon(icon.split(fa4Reg)[1], "fa");
} else if (iFReg.test(icon)) {
return findIcon(icon.split(iFReg)[1], "IF");
} else if (typeof icon === "function") {
@ -45,6 +49,14 @@ export function findIcon(icon: String, type = "EL", property?: string) {
components: { FontAwesomeIcon },
template: `<font-awesome-icon :icon="icon" v-bind:[property]="true" />`
});
} else if (type === "fa") {
return defineComponent({
name: "faIcon",
data() {
return { icon: `fa ${icon}` };
},
template: `<i :class="icon" />`
});
} else if (type === "IF") {
return defineComponent({
name: "IfIcon",

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

@ -24,7 +24,7 @@ import { useAppStoreHook } from "/@/store/modules/app";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
import { storageLocal, storageSession } from "/@/utils/storage";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
import { createNewStyle, writeNewStyle } from "/@/utils/theme";
import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
import { toggleTheme } from "@zougt/vite-plugin-theme-preprocessor/dist/browser-utils";
const router = useRouter();

9
src/utils/theme/index.ts → src/layout/theme/element-plus.ts

@ -1,3 +1,4 @@
/* 动态改变element-plus主题色 */
import rgbHex from "rgb-hex";
import color from "css-color-function";
import epCss from "element-plus/dist/index.css";
@ -15,13 +16,13 @@ const formula = {
"light-9": "color(primary tint(90%))"
};
export const writeNewStyle = newStyle => {
export const writeNewStyle = (newStyle: string): void => {
const style = window.document.createElement("style");
style.innerText = newStyle;
window.document.head.appendChild(style);
};
export const createNewStyle = primaryStyle => {
export const createNewStyle = (primaryStyle: string): string => {
const colors = createColors(primaryStyle);
let cssText = getOriginStyle();
Object.keys(colors).forEach(key => {
@ -33,7 +34,7 @@ export const createNewStyle = primaryStyle => {
return cssText;
};
export const createColors = primary => {
export const createColors = (primary: string) => {
if (!primary) return;
const colors = {
primary
@ -49,7 +50,7 @@ export const getOriginStyle = () => {
return getStyleTemplate(epCss);
};
const getStyleTemplate = data => {
const getStyleTemplate = (data: string): string => {
const colorMap = {
"#3a8ee6": "shade-1",
"#409eff": "primary",
Loading…
Cancel
Save