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

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; // 匹配括号颜色
}