diff --git a/index.html b/index.html index 00808ef..d304317 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,9 @@ - + + +
diff --git a/src/App.vue b/src/App.vue index a084257..86c9489 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,7 +14,18 @@ import { SettingOutlined } from '@ant-design/icons-vue'; const { setRootPath } = useFileTree(); const { loadConfig } = useConfig(); -const { getAntdTheme, primaryColor, toggleTheme, isDark, toggleDarkMode, setGlobalTheme } = useTheme(); +const { + getAntdTheme, + primaryColor, + toggleTheme, + isDark, + toggleDarkMode, + setGlobalTheme, + fontFamily, + codeFontFamily, + setFontFamily, + setCodeFontFamily +} = useTheme(); const route = ref(""); const showSearch = ref(false); @@ -271,6 +282,22 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
暗黑模式
+
+
应用字体
+ + 系统默认 + 霞鹜文楷 (LXGW WenKai) + 思源宋体 (Noto Serif) + 站酷快乐体 (演示用) + +
+
+
代码字体
+ + 系统默认 (Monospace) + Fira Code + +
diff --git a/src/components/LivePreviewEditor.vue b/src/components/LivePreviewEditor.vue index 3f972fd..f2f1db7 100644 --- a/src/components/LivePreviewEditor.vue +++ b/src/components/LivePreviewEditor.vue @@ -49,16 +49,13 @@ let detachPaste = null let removeActionListener = null const liveEditorTheme = computed(() => { - const contentFont = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif' - const monospaceFont = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace' - return EditorView.theme({ '&': { backgroundColor: 'var(--card-background)', color: 'var(--text-color)' }, '.cm-scroller': { - fontFamily: contentFont + fontFamily: 'var(--app-font-family)' }, '.cm-content': { padding: '30px 40px', @@ -67,6 +64,8 @@ const liveEditorTheme = computed(() => { margin: '0 auto', caretColor: 'var(--primary-color)' }, + // ... 其他保持不变，但需要确保 monospaceFont 的地方也改了 + '.cm-selectionBackground, ::selection': { backgroundColor: 'var(--primary-color-bg)' }, @@ -138,7 +137,7 @@ const liveEditorTheme = computed(() => { // 行内代码样式 '.cm-md-monospace': { - fontFamily: monospaceFont, + fontFamily: 'var(--editor-font-family)', backgroundColor: 'var(--hover-background)', padding: '2px 4px', borderRadius: '4px', @@ -147,7 +146,7 @@ const liveEditorTheme = computed(() => { // 代码块样式 '.cm-line.cm-md-fenced-code': { - fontFamily: monospaceFont, + fontFamily: 'var(--editor-font-family)', backgroundColor: 'var(--hover-background)', paddingLeft: '16px', fontSize: '0.9em' @@ -160,11 +159,11 @@ const liveEditorTheme = computed(() => { '.cm-md-code-info': { opacity: 0.5, fontSize: '0.85em', - fontFamily: contentFont, + fontFamily: 'var(--app-font-family)', float: 'right', marginRight: '8px' }, - + // 表格预览样式 (Widget) '.cm-md-table-preview': { display: 'block', @@ -186,7 +185,7 @@ const liveEditorTheme = computed(() => { }, // 表格源码编辑时的样式 '.cm-line.cm-md-table-source': { - fontFamily: monospaceFont, + fontFamily: 'var(--editor-font-family)', whiteSpace: 'pre' }, diff --git a/src/composables/useTheme.js b/src/composables/useTheme.js index 1f73f01..1b50f1e 100644 --- a/src/composables/useTheme.js +++ b/src/composables/useTheme.js @@ -3,6 +3,8 @@ import { theme } from 'ant-design-vue'; const primaryColor = ref('#1890ff'); const isDark = ref(false); +const fontFamily = ref('default'); +const codeFontFamily = ref('default'); export function useTheme() { const toggleTheme = (color) => { @@ -15,14 +17,40 @@ export function useTheme() { updateCSSVariables(); }; + const setFontFamily = (font) => { + fontFamily.value = font; + updateCSSVariables(); + }; + + const setCodeFontFamily = (font) => { + codeFontFamily.value = font; + updateCSSVariables(); + }; + const updateCSSVariables = () => { const root = document.documentElement; root.dataset.theme = isDark.value ? 'dark' : 'light'; root.style.setProperty('--primary-color', primaryColor.value); // 生成一个浅色背景用于选中态 - // 简单变淡处理，或者直接使用 opacity root.style.setProperty('--primary-color-bg', primaryColor.value + '1A'); // 10% opacity + + // 字体设置 + let fontValue = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'; + if (fontFamily.value === 'lxgw') { + fontValue = '"LXGW WenKai Screen", sans-serif'; + } else if (fontFamily.value === 'serif') { + fontValue = '"Noto Serif SC", serif'; + } else if (fontFamily.value === 'zcool') { + fontValue = '"ZCOOL KuaiLe", cursive'; + } + root.style.setProperty('--app-font-family', fontValue); + + let codeFontValue = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace'; + if (codeFontFamily.value === 'fira') { + codeFontValue = '"Fira Code", monospace'; + } + root.style.setProperty('--editor-font-family', codeFontValue); if (isDark.value) { root.style.setProperty('--app-background', '#141414'); @@ -79,6 +107,10 @@ export function useTheme() { toggleTheme, toggleDarkMode, getAntdTheme, - setGlobalTheme + setGlobalTheme, + fontFamily, + codeFontFamily, + setFontFamily, + setCodeFontFamily }; }