Compare commits
No commits in common. "36fc4eeddf234e5cd5dc3e5df99806e1ea78841d" and "7b200dcb68b3819d30a96827fc2633c684bf5818" have entirely different histories.
36fc4eeddf
...
7b200dcb68
|
|
@ -5,7 +5,7 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Fira+Code:wght@400;500&family=Noto+Serif+SC:wght@400;700&family=M+PLUS+Rounded+1c:wght@400;500&family=Zen+Maru+Gothic:wght@400;500&family=JetBrains+Mono:wght@400;500&family=Roboto+Mono:wght@400;500&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Fira+Code:wght@400;500&family=Noto+Serif+SC:wght@400;700&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
|
||||||
<!-- 引入霞鹜文楷 -->
|
<!-- 引入霞鹜文楷 -->
|
||||||
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-web/style.css" media="print" onload="this.media='all'">
|
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-web/style.css" media="print" onload="this.media='all'">
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
22
src/App.vue
22
src/App.vue
|
|
@ -107,12 +107,7 @@ const loadGlobalConfig = async () => {
|
||||||
if (data) {
|
if (data) {
|
||||||
// 恢复主题
|
// 恢复主题
|
||||||
if (data.theme) {
|
if (data.theme) {
|
||||||
setGlobalTheme(
|
setGlobalTheme(data.theme.primaryColor, data.theme.isDark);
|
||||||
data.theme.primaryColor,
|
|
||||||
data.theme.isDark,
|
|
||||||
data.theme.fontFamily,
|
|
||||||
data.theme.codeFontFamily
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 恢复历史记录
|
// 恢复历史记录
|
||||||
|
|
@ -151,9 +146,7 @@ const saveGlobalConfig = async () => {
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
primaryColor: primaryColor.value,
|
primaryColor: primaryColor.value,
|
||||||
isDark: isDark.value,
|
isDark: isDark.value
|
||||||
fontFamily: fontFamily.value,
|
|
||||||
codeFontFamily: codeFontFamily.value
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -179,7 +172,7 @@ const openDirectory = async (path) => {
|
||||||
await saveGlobalConfig();
|
await saveGlobalConfig();
|
||||||
};
|
};
|
||||||
|
|
||||||
watch([primaryColor, isDark, fontFamily, codeFontFamily], async () => {
|
watch([primaryColor, isDark], async () => {
|
||||||
antdTheme.value = getAntdTheme();
|
antdTheme.value = getAntdTheme();
|
||||||
// 主题变化时保存
|
// 主题变化时保存
|
||||||
await saveGlobalConfig();
|
await saveGlobalConfig();
|
||||||
|
|
@ -293,11 +286,9 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
|
||||||
<div class="settings-label">应用字体</div>
|
<div class="settings-label">应用字体</div>
|
||||||
<a-select :value="fontFamily" style="width: 100%" @change="setFontFamily">
|
<a-select :value="fontFamily" style="width: 100%" @change="setFontFamily">
|
||||||
<a-select-option value="default">系统默认</a-select-option>
|
<a-select-option value="default">系统默认</a-select-option>
|
||||||
<a-select-option value="sans">思源黑体 (Noto Sans)</a-select-option>
|
|
||||||
<a-select-option value="serif">思源宋体 (Noto Serif)</a-select-option>
|
|
||||||
<a-select-option value="lxgw">霞鹜文楷 (LXGW WenKai)</a-select-option>
|
<a-select-option value="lxgw">霞鹜文楷 (LXGW WenKai)</a-select-option>
|
||||||
<a-select-option value="rounded">圆体 (M PLUS Rounded)</a-select-option>
|
<a-select-option value="serif">思源宋体 (Noto Serif)</a-select-option>
|
||||||
<a-select-option value="zen">丸黑 (Zen Maru Gothic)</a-select-option>
|
<a-select-option value="zcool">站酷快乐体 (演示用)</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-item">
|
<div class="settings-item">
|
||||||
|
|
@ -305,9 +296,6 @@ const { state } = useFileTree(); // 需要获取 rootPath 用于保存
|
||||||
<a-select :value="codeFontFamily" style="width: 100%" @change="setCodeFontFamily">
|
<a-select :value="codeFontFamily" style="width: 100%" @change="setCodeFontFamily">
|
||||||
<a-select-option value="default">系统默认 (Monospace)</a-select-option>
|
<a-select-option value="default">系统默认 (Monospace)</a-select-option>
|
||||||
<a-select-option value="fira">Fira Code</a-select-option>
|
<a-select-option value="fira">Fira Code</a-select-option>
|
||||||
<a-select-option value="jetbrains">JetBrains Mono</a-select-option>
|
|
||||||
<a-select-option value="roboto">Roboto Mono</a-select-option>
|
|
||||||
<a-select-option value="source">Source Code Pro</a-select-option>
|
|
||||||
</a-select>
|
</a-select>
|
||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
|
||||||
|
|
@ -410,7 +410,6 @@ const handleModalOk = async () => {
|
||||||
:deep(.ant-tree) {
|
:deep(.ant-tree) {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-family: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.ant-tree-treenode) {
|
:deep(.ant-tree-treenode) {
|
||||||
|
|
|
||||||
|
|
@ -43,30 +43,12 @@ export function useTheme() {
|
||||||
fontValue = '"Noto Serif SC", serif';
|
fontValue = '"Noto Serif SC", serif';
|
||||||
} else if (fontFamily.value === 'zcool') {
|
} else if (fontFamily.value === 'zcool') {
|
||||||
fontValue = '"ZCOOL KuaiLe", cursive';
|
fontValue = '"ZCOOL KuaiLe", cursive';
|
||||||
} else if (fontFamily.value === 'mashan') {
|
|
||||||
fontValue = '"Ma Shan Zheng", cursive';
|
|
||||||
} else if (fontFamily.value === 'longcang') {
|
|
||||||
fontValue = '"Long Cang", cursive';
|
|
||||||
} else if (fontFamily.value === 'zhimangxing') {
|
|
||||||
fontValue = '"Zhi Mang Xing", cursive';
|
|
||||||
} else if (fontFamily.value === 'huangyou') {
|
|
||||||
fontValue = '"ZCOOL QingKe HuangYou", sans-serif';
|
|
||||||
} else if (fontFamily.value === 'xiaowei') {
|
|
||||||
fontValue = '"ZCOOL XiaoWei", serif';
|
|
||||||
} else if (fontFamily.value === 'maocao') {
|
|
||||||
fontValue = '"Liu Jian Mao Cao", cursive';
|
|
||||||
}
|
}
|
||||||
root.style.setProperty('--app-font-family', fontValue);
|
root.style.setProperty('--app-font-family', fontValue);
|
||||||
|
|
||||||
let codeFontValue = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace';
|
let codeFontValue = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace';
|
||||||
if (codeFontFamily.value === 'fira') {
|
if (codeFontFamily.value === 'fira') {
|
||||||
codeFontValue = '"Fira Code", monospace';
|
codeFontValue = '"Fira Code", monospace';
|
||||||
} else if (codeFontFamily.value === 'jetbrains') {
|
|
||||||
codeFontValue = '"JetBrains Mono", monospace';
|
|
||||||
} else if (codeFontFamily.value === 'roboto') {
|
|
||||||
codeFontValue = '"Roboto Mono", monospace';
|
|
||||||
} else if (codeFontFamily.value === 'source') {
|
|
||||||
codeFontValue = '"Source Code Pro", monospace';
|
|
||||||
}
|
}
|
||||||
root.style.setProperty('--editor-font-family', codeFontValue);
|
root.style.setProperty('--editor-font-family', codeFontValue);
|
||||||
|
|
||||||
|
|
@ -97,20 +79,6 @@ export function useTheme() {
|
||||||
const borderColor = isDark.value ? '#303030' : '#f0f0f0';
|
const borderColor = isDark.value ? '#303030' : '#f0f0f0';
|
||||||
const hoverBackground = isDark.value ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)';
|
const hoverBackground = isDark.value ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.04)';
|
||||||
|
|
||||||
// 获取当前对应的字体栈字符串
|
|
||||||
let fontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif';
|
|
||||||
if (fontFamily.value === 'lxgw') fontStack = '"LXGW WenKai Screen", sans-serif';
|
|
||||||
else if (fontFamily.value === 'serif') fontStack = '"Noto Serif SC", serif';
|
|
||||||
else if (fontFamily.value === 'sans') fontStack = '"Noto Sans SC", sans-serif';
|
|
||||||
else if (fontFamily.value === 'rounded') fontStack = '"M PLUS Rounded 1c", sans-serif';
|
|
||||||
else if (fontFamily.value === 'zen') fontStack = '"Zen Maru Gothic", sans-serif';
|
|
||||||
|
|
||||||
let codeFontStack = 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace';
|
|
||||||
if (codeFontFamily.value === 'fira') codeFontStack = '"Fira Code", monospace';
|
|
||||||
else if (codeFontFamily.value === 'jetbrains') codeFontStack = '"JetBrains Mono", monospace';
|
|
||||||
else if (codeFontFamily.value === 'roboto') codeFontStack = '"Roboto Mono", monospace';
|
|
||||||
else if (codeFontFamily.value === 'source') codeFontStack = '"Source Code Pro", monospace';
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
algorithm: isDark.value ? theme.darkAlgorithm : theme.defaultAlgorithm,
|
algorithm: isDark.value ? theme.darkAlgorithm : theme.defaultAlgorithm,
|
||||||
token: {
|
token: {
|
||||||
|
|
@ -127,11 +95,9 @@ export function useTheme() {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
const setGlobalTheme = (color, dark, font, codeFont) => {
|
const setGlobalTheme = (color, dark) => {
|
||||||
if (color) primaryColor.value = color;
|
if (color) primaryColor.value = color;
|
||||||
if (typeof dark === 'boolean') isDark.value = dark;
|
if (typeof dark === 'boolean') isDark.value = dark;
|
||||||
if (font) fontFamily.value = font;
|
|
||||||
if (codeFont) codeFontFamily.value = codeFont;
|
|
||||||
updateCSSVariables();
|
updateCSSVariables();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ body {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-size: var(--app-font-size);
|
font-size: var(--app-font-size);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-family: var(--app-font-family, "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif);
|
font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", system-ui, -apple-system, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue