From 0ff7a1e53b77bb666d49d211a2476f216285550f Mon Sep 17 00:00:00 2001 From: YangFong Date: Sun, 18 Aug 2024 22:45:13 +0800 Subject: [PATCH] feat: support for theme options --- .../EditorHeader/StyleDropdown.vue | 6 +- src/config/index.js | 269 ++++++++++++++++++ src/stores/index.js | 32 ++- src/utils/index.js | 36 ++- 4 files changed, 324 insertions(+), 19 deletions(-) diff --git a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue index f38767777..7670f4730 100644 --- a/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue +++ b/src/components/CodemirrorEditor/EditorHeader/StyleDropdown.vue @@ -18,12 +18,13 @@ import { HoverCardTrigger, } from '@/components/ui/hover-card' -import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, githubConfig, legendOptions } from '@/config' +import { codeBlockThemeOptions, colorOptions, fontFamilyOptions, fontSizeOptions, githubConfig, legendOptions, themeOptions } from '@/config' import { useStore } from '@/stores' const store = useStore() const { + theme, fontFamily, fontSize, fontColor, @@ -35,6 +36,7 @@ const { const { resetStyleConfirm, + themeChanged, fontChanged, sizeChanged, colorChanged, @@ -73,6 +75,8 @@ function customStyle() { + + { const output = ref(``) + // 文本字体 + const theme = useStorage(addPrefix(`theme`), themeOptions[0].value) // 文本字体 const fontFamily = useStorage(`fonts`, fontFamilyOptions[0].value) // 文本大小 @@ -45,8 +47,10 @@ export const useStore = defineStore(`store`, () => { // 图注格式 const legend = useStorage(`legend`, legendOptions[3].value) + const fontSizeNumber = fontSize.value.replace(`px`, ``) + const wxRenderer = new WxRenderer({ - theme: setColor(fontColor.value), + theme: setTheme(themeMap[theme.value], fontSizeNumber, fontColor.value, theme.value === `default`), fonts: fontFamily.value, size: fontSize.value, }) @@ -174,11 +178,11 @@ export const useStore = defineStore(`store`, () => { // 更新 CSS const updateCss = () => { const json = css2json(cssEditor.value.getValue()) - let theme = setFontSize(fontSize.value.replace(`px`, ``)) + let t = setFontSizeWithTemplate(themeMap[theme.value])(fontSizeNumber, theme.value === `default`) - theme = customCssWithTemplate(json, fontColor.value, theme) + t = customCssWithTemplate(json, fontColor.value, t) wxRenderer.setOptions({ - theme, + theme: t, }) editorRefresh() } @@ -224,6 +228,8 @@ export const useStore = defineStore(`store`, () => { isCiteStatus.value = false isMacCodeBlock.value = true + theme.value = themeOptions[0].value + fontFamily.value = fontFamilyOptions[0].value fontFamily.value = fontFamilyOptions[0].value fontSize.value = fontSizeOptions[2].value fontColor.value = colorOptions[0].value @@ -255,10 +261,18 @@ export const useStore = defineStore(`store`, () => { } const getTheme = (size, color) => { - const theme = setFontSize(size.replace(`px`, ``)) - return setColorWithCustomTemplate(theme, color) + const t = setFontSizeWithTemplate(themeMap[theme.value])(size.replace(`px`, ``), theme.value === `default`) + return setColorWithCustomTemplate(t, color, theme.value === `default`) } + const themeChanged = withAfterRefresh((newTheme) => { + wxRenderer.setOptions({ + theme: setTheme(themeMap[newTheme], fontSizeNumber, fontColor.value, newTheme === `default`), + }) + + theme.value = newTheme + }) + const fontChanged = withAfterRefresh((fonts) => { wxRenderer.setOptions({ fonts, @@ -393,6 +407,7 @@ export const useStore = defineStore(`store`, () => { output, editor, cssEditor, + theme, fontFamily, fontSize, fontColor, @@ -401,6 +416,7 @@ export const useStore = defineStore(`store`, () => { editorRefresh, + themeChanged, fontChanged, sizeChanged, colorChanged, diff --git a/src/utils/index.js b/src/utils/index.js index e0dd9dddc..6022327e2 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -9,13 +9,19 @@ export function addPrefix(str) { return `${prefix}__${str}` } -function createCustomTheme(theme, color) { +function createCustomTheme(theme, color, isDefalut = true) { const customTheme = JSON.parse(JSON.stringify(theme)) customTheme.block.h1[`border-bottom`] = `2px solid ${color}` customTheme.block.h2.background = color customTheme.block.h3[`border-left`] = `3px solid ${color}` customTheme.block.h4.color = color customTheme.inline.strong.color = color + + if (!isDefalut) { + customTheme.block.h3[`border-bottom`] = `1px dashed ${color}` + customTheme.block.blockquote[`border-left`] = `4px solid ${color}` + } + return customTheme } @@ -26,24 +32,34 @@ export function setColorWithTemplate(theme) { } } -export function setColorWithCustomTemplate(theme, color) { - return createCustomTheme(theme, color) +export function setColorWithCustomTemplate(theme, color, isDefalut = true) { + return createCustomTheme(theme, color, isDefalut) } // 设置自定义字体大小 export function setFontSizeWithTemplate(template) { - return function (fontSize) { + return function (fontSize, isDefalut = true) { const customTheme = JSON.parse(JSON.stringify(template)) - customTheme.block.h1[`font-size`] = `${fontSize * 1.2}px` - customTheme.block.h2[`font-size`] = `${fontSize * 1.2}px` - customTheme.block.h3[`font-size`] = `${fontSize * 1.1}px` - customTheme.block.h4[`font-size`] = `${fontSize}px` + if (isDefalut) { + customTheme.block.h1[`font-size`] = `${fontSize * 1.2}px` + customTheme.block.h2[`font-size`] = `${fontSize * 1.2}px` + customTheme.block.h3[`font-size`] = `${fontSize * 1.1}px` + customTheme.block.h4[`font-size`] = `${fontSize}px` + } + else { + customTheme.block.h1[`font-size`] = `${fontSize * 1.4}px` + customTheme.block.h2[`font-size`] = `${fontSize * 1.3}px` + customTheme.block.h3[`font-size`] = `${fontSize * 1.2}px` + customTheme.block.h4[`font-size`] = `${fontSize * 1.1}px` + } + return customTheme } } -export const setColor = setColorWithTemplate(defaultTheme) -export const setFontSize = setFontSizeWithTemplate(defaultTheme) +export function setTheme(theme, fontSize, color, isDefalut) { + return setColorWithCustomTemplate(setFontSizeWithTemplate(theme)(fontSize, isDefalut), color, isDefalut) +} export function customCssWithTemplate(jsonString, color, theme) { // block