landaiqing/voidraft
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 18 Wiki Activity

♻️ Refactor theme module

Browse Source
This commit is contained in:
landaiqing
2025-11-21 00:03:03 +08:00
parent fc7c162e2f
commit 339ed53c2e
21 changed files with 70 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/tabs/TabContextMenu.vue
View File

@@ -147,7 +147,7 @@ onUnmounted(() => {
padding: 8px 12px;
cursor: pointer;
font-size: 12px;
color: var(--text-muted);
color: var(--text-primary);
transition: all 0.15s ease;
gap: 8px;
@@ -165,7 +165,7 @@ onUnmounted(() => {
flex-shrink: 0;
width: 12px;
height: 12px;
color: var(--text-muted);
color: var(--text-primary);
transition: color 0.15s ease;
.menu-item:hover & {

47
frontend/src/i18n/locales/en-US.ts
View File

@@ -161,53 +161,6 @@ export default {
customThemeColors: 'Custom Theme Colors',
resetToDefault: 'Reset to Default',
colorValue: 'Color Value',
themeColors: {
basic: 'Basic Colors',
text: 'Text Colors',
syntax: 'Syntax Highlighting',
interface: 'Interface Elements',
border: 'Borders & Dividers',
search: 'Search & Matching',
// Base Colors
background: 'Main Background',
backgroundSecondary: 'Secondary Background',
surface: 'Panel Background',
dropdownBackground: 'Dropdown Background',
dropdownBorder: 'Dropdown Border',
// Text Colors
foreground: 'Primary Text',
foregroundSecondary: 'Secondary Text',
comment: 'Comments',
// Syntax Highlighting - Core
keyword: 'Keywords',
string: 'Strings',
function: 'Functions',
number: 'Numbers',
operator: 'Operators',
variable: 'Variables',
type: 'Types',
// Syntax Highlighting - Extended
constant: 'Constants',
storage: 'Storage Type',
parameter: 'Parameters',
class: 'Class Names',
heading: 'Headings',
invalid: 'Invalid/Error',
regexp: 'Regular Expressions',
// Interface Elements
cursor: 'Cursor',
selection: 'Selection Background',
selectionBlur: 'Unfocused Selection',
activeLine: 'Active Line Highlight',
lineNumber: 'Line Numbers',
activeLineNumber: 'Active Line Number',
// Borders & Dividers
borderColor: 'Border Color',
borderLight: 'Light Border',
// Search & Matching
searchMatch: 'Search Match',
matchingBracket: 'Matching Bracket'
},
lineHeight: 'Line Height',
tabSettings: 'Tab Settings',
tabSize: 'Tab Size',

48
frontend/src/i18n/locales/zh-CN.ts
View File

@@ -202,54 +202,6 @@ export default {
customThemeColors: '自定义主题颜色',
resetToDefault: '重置为默认',
colorValue: '颜色值',
themeColors: {
basic: '基础色调',
text: '文本颜色',
syntax: '语法高亮',
interface: '界面元素',
border: '边框分割线',
search: '搜索匹配',
// 基础色调
background: '主背景色',
backgroundSecondary: '次要背景色',
surface: '面板背景',
dropdownBackground: '下拉菜单背景',
dropdownBorder: '下拉菜单边框',
// 文本颜色
foreground: '主文本色',
foregroundSecondary: '次要文本色',
comment: '注释色',
// 语法高亮 - 核心
keyword: '关键字',
string: '字符串',
function: '函数名',
number: '数字',
operator: '操作符',
variable: '变量',
type: '类型',
// 语法高亮 - 扩展
constant: '常量',
storage: '存储类型',
parameter: '参数',
class: '类名',
heading: '标题',
invalid: '无效内容',
regexp: '正则表达式',
// 界面元素
cursor: '光标',
selection: '选中背景',
selectionBlur: '失焦选中背景',
activeLine: '当前行高亮',
lineNumber: '行号',
activeLineNumber: '活动行号',
// 边框和分割线
borderColor: '边框色',
borderLight: '浅色边框',
// 搜索和匹配
searchMatch: '搜索匹配',
matchingBracket: '匹配括号'
},
hotkeyPreview: '预览：',
none: '无',
backup: {

8
frontend/src/views/editor/Editor.vue
View File

@@ -33,10 +33,10 @@ onMounted(async () => {
await tabStore.initializeTab();
});
onBeforeUnmount(() => {
editorStore.clearAllEditors();
});
// onBeforeUnmount(() => {
// editorStore.clearAllEditors();
//
// });
</script>
<template>

28
frontend/src/views/editor/extensions/markdownPreview/styles.ts
View File

@@ -78,6 +78,34 @@ export function createMarkdownPreviewTheme(colors: ThemeColors) {
}
},
// 面板动画效果
'.cm-panels.cm-panels-top': {
borderBottom: '2px solid black'
},
'.cm-panels.cm-panels-bottom': {
animation: 'panelSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
},
'@keyframes panelSlideUp': {
from: {
transform: 'translateY(100%)',
opacity: '0'
},
to: {
transform: 'translateY(0)',
opacity: '1'
}
},
'@keyframes panelSlideDown': {
from: {
transform: 'translateY(0)',
opacity: '1'
},
to: {
transform: 'translateY(100%)',
opacity: '0'
}
},
// 内容区域
".cm-preview-content": {
flex: 1,

83
frontend/src/views/editor/theme/base.ts
View File

@@ -15,6 +15,14 @@ export function createBaseTheme(colors: ThemeColors): Extension {
// 编辑器主题样式
const theme = EditorView.theme({
'&': {
backgroundColor: colors.background,
},
'.cm-editor': {
backgroundColor: colors.background,
},
// 光标
'.cm-cursor, .cm-dropCursor': {
borderLeftColor: colors.cursor,
@@ -47,62 +55,13 @@ export function createBaseTheme(colors: ThemeColors): Extension {
color: colors.activeLineNumber,
},
// 面板动画效果
'.cm-panels.cm-panels-top': {
borderBottom: '2px solid black'
},
'.cm-panels.cm-panels-bottom': {
animation: 'panelSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
},
'@keyframes panelSlideUp': {
from: {
transform: 'translateY(100%)',
opacity: '0'
},
to: {
transform: 'translateY(0)',
opacity: '1'
}
},
'@keyframes panelSlideDown': {
from: {
transform: 'translateY(0)',
opacity: '1'
},
to: {
transform: 'translateY(100%)',
opacity: '0'
}
},
// 括号匹配
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
outline: `0.5px solid ${colors.searchMatch}`,
outline: `0.5px solid ${colors.matchingBracket}`,
},
// 工具提示
// '.cm-tooltip': {
// border: colors.dark ? 'none' : `1px solid ${colors.dropdownBorder}`,
// backgroundColor: colors.surface,
// // color: colors.foreground,
// boxShadow: colors.dark ? 'none' : '0 2px 8px rgba(0,0,0,0.1)',
// },
// '.cm-tooltip .cm-tooltip-arrow:before': {
// borderTopColor: 'transparent',
// borderBottomColor: 'transparent',
// },
// '.cm-tooltip .cm-tooltip-arrow:after': {
// borderTopColor: colors.surface,
// borderBottomColor: colors.surface,
// },
// '.cm-tooltip-autocomplete': {
// '& > ul > li[aria-selected]': {
// backgroundColor: colors.activeLine,
// color: colors.foreground,
// },
// },
// 代码块层（自定义）
'.code-blocks-layer': {
width: '100%',
@@ -122,8 +81,19 @@ export function createBaseTheme(colors: ThemeColors): Extension {
background: colors.backgroundSecondary,
borderTop: `1px solid ${colors.borderColor}`,
},
'.code-block-empty-selected': {
backgroundColor: colors.selection,
},
// 代码块开始标记
'.code-block-start': {
height: '12px',
position: 'relative',
},
'.code-block-start.first': {
height: '0px',
},
// 数学计算结果（自定义）
// 数学计算结果
'.code-blocks-math-result': {
paddingLeft: "12px",
position: "relative",
@@ -150,15 +120,6 @@ export function createBaseTheme(colors: ThemeColors): Extension {
'.code-blocks-math-result-copied.fade-out': {
opacity: 0,
},
// 代码块开始标记（自定义）
'.code-block-start': {
height: '12px',
position: 'relative',
},
'.code-block-start.first': {
height: '0px',
},
}, {dark: colors.dark});
const highlightStyle = HighlightStyle.define([

7
frontend/src/views/editor/theme/dark/aura.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#21202e',
backgroundSecondary: '#2b2a3b',
surface: '#21202e',
dropdownBackground: '#21202e',
dropdownBorder: '#3b334b',
foreground: '#edecee',
foregroundSecondary: '#c9c5cf',
cursor: '#a277ff',
selection: '#3d375e7f',
selectionBlur: '#3d375e7f',
activeLine: '#4d4b6622',
lineNumber: '#a394f033',
activeLineNumber: '#cdccce',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#ff6767',
diffChanged: '#ffca85',
borderColor: '#3b334b',
borderLight: '#edecee19',
searchMatch: '#61ffca',
matchingBracket: '#a394f033',
comment: '#6d6d6d',

9
frontend/src/views/editor/theme/dark/default-dark.ts
View File

@@ -8,16 +8,11 @@ export const defaultDarkColors: ThemeColors = {
// 基础色调
background: '#252B37',
backgroundSecondary: '#213644',
surface: '#474747',
dropdownBackground: '#252B37',
dropdownBorder: '#ffffff19',
// 文本与界面色
foreground: '#9BB586',
foregroundSecondary: '#9c9c9c',
foreground: '#ffffff',
cursor: '#ffffff',
selection: '#0865a9',
selectionBlur: '#225377',
activeLine: '#ffffff0a',
lineNumber: '#ffffff26',
activeLineNumber: '#ffffff99',
@@ -25,8 +20,6 @@ export const defaultDarkColors: ThemeColors = {
diffDeleted: '#ff6b6b',
diffChanged: '#ffb86c',
borderColor: '#1e222a',
borderLight: '#ffffff19',
searchMatch: '#8fbcbb',
matchingBracket: '#ffffff19',
// 语法标签色值

7
frontend/src/views/editor/theme/dark/dracula.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#282a36',
backgroundSecondary: '#323543',
surface: '#282a36',
dropdownBackground: '#282a36',
dropdownBorder: '#191a21',
foreground: '#f8f8f2',
foregroundSecondary: '#cfcfc9',
cursor: '#f8f8f2',
selection: '#44475a',
selectionBlur: '#44475a',
activeLine: '#53576c22',
lineNumber: '#6272a4',
activeLineNumber: '#f8f8f2',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#ff5555',
diffChanged: '#f1fa8c',
borderColor: '#191a21',
borderLight: '#f8f8f219',
searchMatch: '#50fa7b',
matchingBracket: '#44475a',
comment: '#6272a4',

7
frontend/src/views/editor/theme/dark/github-dark.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#24292e',
backgroundSecondary: '#2e343b',
surface: '#24292e',
dropdownBackground: '#24292e',
dropdownBorder: '#1b1f23',
foreground: '#d1d5da',
foregroundSecondary: '#b3bac2',
cursor: '#c8e1ff',
selection: '#3392ff44',
selectionBlur: '#3392ff44',
activeLine: '#4d566022',
lineNumber: '#444d56',
activeLineNumber: '#e1e4e8',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#d73a49',
diffChanged: '#c69026',
borderColor: '#1b1f23',
borderLight: '#d1d5da19',
searchMatch: '#79b8ff',
matchingBracket: '#17e5e650',
comment: '#6a737d',

7
frontend/src/views/editor/theme/dark/material-dark.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#263238',
backgroundSecondary: '#2d3e46',
surface: '#263238',
dropdownBackground: '#263238',
dropdownBorder: '#ffffff10',
foreground: '#eeffff',
foregroundSecondary: '#9fbac2',
cursor: '#ffcc00',
selection: '#80cbc420',
selectionBlur: '#80cbc420',
activeLine: '#4c616c22',
lineNumber: '#37474f',
activeLineNumber: '#607a86',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#ff5370',
diffChanged: '#ffcb6b',
borderColor: '#ffffff10',
borderLight: '#eeffff19',
searchMatch: '#82aaff',
matchingBracket: '#263238',
comment: '#546e7a',

9
frontend/src/views/editor/theme/dark/one-dark.ts
View File

@@ -14,7 +14,6 @@ const violet = '#c678dd';
const darkBackground = '#21252b';
const highlightBackground = '#313949ff';
const background = '#282c34';
const tooltipBackground = '#353a42';
const selection = '#3e4451';
export const config: ThemeColors = {
@@ -23,15 +22,9 @@ export const config: ThemeColors = {
background,
backgroundSecondary: highlightBackground,
surface: tooltipBackground,
dropdownBackground: darkBackground,
dropdownBorder: stone,
foreground: ivory,
foregroundSecondary: stone,
cursor: '#528bff',
selection,
selectionBlur: selection,
activeLine: '#6699ff0b',
lineNumber: stone,
activeLineNumber: ivory,
@@ -39,8 +32,6 @@ export const config: ThemeColors = {
diffDeleted: coral,
diffChanged: whiskey,
borderColor: darkBackground,
borderLight: `${ivory}19`,
searchMatch: malibu,
matchingBracket: '#bad0f847',
comment: stone,

7
frontend/src/views/editor/theme/dark/solarized-dark.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#002b36',
backgroundSecondary: '#003643',
surface: '#002b36',
dropdownBackground: '#002b36',
dropdownBorder: '#2aa19899',
foreground: '#fdf6e3',
foregroundSecondary: '#93a1a1',
cursor: '#d30102',
selection: '#274642',
selectionBlur: '#274642',
activeLine: '#005b7022',
lineNumber: '#93a1a1',
activeLineNumber: '#949494',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#dc322f',
diffChanged: '#b58900',
borderColor: '#073642',
borderLight: '#93a1a119',
searchMatch: '#2aa198',
matchingBracket: '#073642',
comment: '#586e75',

7
frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#24283b',
backgroundSecondary: '#2b3151',
surface: '#24283b',
dropdownBackground: '#24283b',
dropdownBorder: '#7982a9',
foreground: '#c0caf5',
foregroundSecondary: '#7982a9',
cursor: '#c0caf5',
selection: '#6f7bb630',
selectionBlur: '#6f7bb630',
activeLine: '#4d547722',
lineNumber: '#3b4261',
activeLineNumber: '#737aa2',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#f7768e',
diffChanged: '#ff9e64',
borderColor: '#1f2335',
borderLight: '#7982a919',
searchMatch: '#7aa2f7',
matchingBracket: '#1f2335',
comment: '#565f89',

7
frontend/src/views/editor/theme/dark/tokyo-night.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#1a1b26',
backgroundSecondary: '#272839',
surface: '#1a1b26',
dropdownBackground: '#1a1b26',
dropdownBorder: '#787c99',
foreground: '#c0caf5',
foregroundSecondary: '#787c99',
cursor: '#c0caf5',
selection: '#515c7e40',
selectionBlur: '#515c7e40',
activeLine: '#43455c22',
lineNumber: '#363b54',
activeLineNumber: '#737aa2',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#f7768e',
diffChanged: '#ff9e64',
borderColor: '#16161e',
borderLight: '#787c9919',
searchMatch: '#7aa2f7',
matchingBracket: '#16161e',
comment: '#444b6a',

7
frontend/src/views/editor/theme/light/default-light.ts
View File

@@ -7,15 +7,10 @@ export const defaultLightColors: ThemeColors = {
background: '#ffffff',
backgroundSecondary: '#f4f7fb',
surface: '#f7f8f9',
dropdownBackground: '#ffffff',
dropdownBorder: '#e1e4e8',
foreground: '#24292e',
foregroundSecondary: '#6a737d',
cursor: '#000000',
selection: '#77baff',
selectionBlur: '#c4d4df',
activeLine: '#0000000a',
lineNumber: '#00000040',
activeLineNumber: '#000000aa',
@@ -23,8 +18,6 @@ export const defaultLightColors: ThemeColors = {
diffDeleted: '#d73a49',
diffChanged: '#c69026',
borderColor: '#d8dee4',
borderLight: '#0000000c',
searchMatch: '#1f6feb',
matchingBracket: '#00000019',
comment: '#6a737d',

7
frontend/src/views/editor/theme/light/github-light.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#ffffff',
backgroundSecondary: '#f1faf1',
surface: '#ffffff',
dropdownBackground: '#ffffff',
dropdownBorder: '#e1e4e8',
foreground: '#444d56',
foregroundSecondary: '#6a737d',
cursor: '#044289',
selection: '#0366d625',
selectionBlur: '#0366d625',
activeLine: '#c6c6c622',
lineNumber: '#1b1f234d',
activeLineNumber: '#24292e',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#cb2431',
diffChanged: '#f2cc60',
borderColor: '#e1e4e8',
borderLight: '#444d5619',
searchMatch: '#005cc5',
matchingBracket: '#34d05840',
comment: '#6a737d',

7
frontend/src/views/editor/theme/light/material-light.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#fafafa',
backgroundSecondary: '#f1faf1',
surface: '#fafafa',
dropdownBackground: '#fafafa',
dropdownBorder: '#00000010',
foreground: '#90a4ae',
foregroundSecondary: '#7e939e',
cursor: '#272727',
selection: '#80cbc440',
selectionBlur: '#80cbc440',
activeLine: '#c2c2c222',
lineNumber: '#cfd8dc',
activeLineNumber: '#7e939e',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#e53935',
diffChanged: '#ffcb6b',
borderColor: '#00000010',
borderLight: '#90a4ae19',
searchMatch: '#6182b8',
matchingBracket: '#fafafa',
comment: '#90a4ae',

7
frontend/src/views/editor/theme/light/solarized-light.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#fdf6e3',
backgroundSecondary: '#ffeeccd4',
surface: '#fdf6e3',
dropdownBackground: '#fdf6e3',
dropdownBorder: '#d3af86',
foreground: '#586e75',
foregroundSecondary: '#93a1a1',
cursor: '#657b83',
selection: '#eee8d5',
selectionBlur: '#eee8d5',
activeLine: '#d5bd5c22',
lineNumber: '#586e75',
activeLineNumber: '#567983',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#dc322f',
diffChanged: '#b58900',
borderColor: '#eee8d5',
borderLight: '#586e7519',
searchMatch: '#268bd2',
matchingBracket: '#eee8d5',
comment: '#93a1a1',

7
frontend/src/views/editor/theme/light/tokyo-night-day.ts
View File

@@ -8,15 +8,10 @@ export const config: ThemeColors = {
background: '#e1e2e7',
backgroundSecondary: '#d2d8ef',
surface: '#e1e2e7',
dropdownBackground: '#e1e2e7',
dropdownBorder: '#6a6f8e',
foreground: '#6a6f8e',
foregroundSecondary: '#9da3c2',
cursor: '#3760bf',
selection: '#8591b840',
selectionBlur: '#8591b840',
activeLine: '#a7aaba22',
lineNumber: '#b3b6cd',
activeLineNumber: '#68709a',
@@ -24,8 +19,6 @@ export const config: ThemeColors = {
diffDeleted: '#ff3e64',
diffChanged: '#b15c00',
borderColor: '#e9e9ec',
borderLight: '#6a6f8e19',
searchMatch: '#2e7de9',
matchingBracket: '#e9e9ec',
comment: '#9da3c2',

34
frontend/src/views/editor/theme/types.ts
View File

@@ -175,30 +175,22 @@ export interface ThemeColors extends ThemeTagColors {
themeName: string;
dark: boolean;
background: string;
backgroundSecondary: string;
surface: string;
dropdownBackground: string;
dropdownBorder: string;
background: string; // 背景
backgroundSecondary: string; // 第二背景块
foreground: string;
foregroundSecondary: string;
foreground: string; // 背景文字颜色
cursor: string;
selection: string;
selectionBlur: string;
activeLine: string;
lineNumber: string;
activeLineNumber: string;
cursor: string; // 光标颜色
selection: string; // 选中文字颜色
activeLine: string; // 当前行颜色
lineNumber: string; // 行号颜色
activeLineNumber: string; // 当前行号颜色
diffInserted?: string;
diffDeleted?: string;
diffChanged?: string;
diffInserted?: string; // 插入颜色
diffDeleted?: string; // 删除颜色
diffChanged?: string; // 变更颜色
borderColor: string;
borderLight: string;
searchMatch: string;
matchingBracket: string;
borderColor: string; // 边框颜色
matchingBracket: string; // 匹配括号颜色
}