♻️ Refactor theme module

frontend/src/components/tabs/TabContextMenu.vue

@@ -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 & {

frontend/src/i18n/locales/en-US.ts

@@ -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',

frontend/src/i18n/locales/zh-CN.ts

@@ -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: {

frontend/src/views/editor/Editor.vue

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

frontend/src/views/editor/extensions/markdownPreview/styles.ts

@@ -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,

frontend/src/views/editor/theme/base.ts

@@ -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([

frontend/src/views/editor/theme/dark/aura.ts

@@ -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',

frontend/src/views/editor/theme/dark/default-dark.ts

@@ -8,16 +8,11 @@ export const defaultDarkColors: ThemeColors = {
   // 基础色调
   background: '#252B37',
   backgroundSecondary: '#213644',
-  surface: '#474747',
-  dropdownBackground: '#252B37',
-  dropdownBorder: '#ffffff19',
 
   // 文本与界面色
-  foreground: '#9BB586',
+  foreground: '#ffffff',
-  foregroundSecondary: '#9c9c9c',
   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',
 
   // 语法标签色值

frontend/src/views/editor/theme/dark/dracula.ts

@@ -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',

frontend/src/views/editor/theme/dark/github-dark.ts

@@ -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',

frontend/src/views/editor/theme/dark/material-dark.ts

@@ -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',

frontend/src/views/editor/theme/dark/one-dark.ts

@@ -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,

frontend/src/views/editor/theme/dark/solarized-dark.ts

@@ -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',

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

@@ -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',

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

@@ -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',

frontend/src/views/editor/theme/light/default-light.ts

@@ -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',

frontend/src/views/editor/theme/light/github-light.ts

@@ -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',

frontend/src/views/editor/theme/light/material-light.ts

@@ -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',

frontend/src/views/editor/theme/light/solarized-light.ts

@@ -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',

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

@@ -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',

frontend/src/views/editor/theme/types.ts

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