♻️ Refactor search

2025-12-08 23:20:37 +08:00
parent 281f53c049
commit 3660d13d7d
42 changed files with 1003 additions and 1953 deletions
--- a/frontend/src/views/editor/theme/base.ts
+++ b/frontend/src/views/editor/theme/base.ts
@@ -62,6 +62,17 @@ export function createBaseTheme(colors: ThemeColors): Extension {
            outline: `0.5px solid ${colors.matchingBracket}`,
        },

+        // 搜索匹配
+        '.cm-searchMatch': {
+            backgroundColor: `${colors.searchMatch} !important`,
+            borderRadius: '2px',
+        },
+        '.cm-searchMatch-selected': {
+            backgroundColor: `${colors.searchMatchSelected} !important`,
+            outline: `2px solid ${colors.searchMatchSelectedOutline}`,
+            borderRadius: '2px',
+        },
+
        // 代码块层（自定义）
        '.code-blocks-layer': {
            width: '100%',
--- a/frontend/src/views/editor/theme/dark/aura.ts
+++ b/frontend/src/views/editor/theme/dark/aura.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#3b334b',
  matchingBracket: '#a394f033',

+  // 搜索匹配 - Aura 紫青色调
+  searchMatch: 'rgba(162, 119, 255, 0.4)',
+  searchMatchSelected: 'rgba(97, 255, 202, 0.45)',
+  searchMatchSelectedOutline: '#61ffca',
+
  comment: '#6d6d6d',
  lineComment: '#5c5c5c',
  blockComment: '#5a5a5a',
--- a/frontend/src/views/editor/theme/dark/default-dark.ts
+++ b/frontend/src/views/editor/theme/dark/default-dark.ts
@@ -22,6 +22,11 @@ export const defaultDarkColors: ThemeColors = {
  borderColor: '#1e222a',
  matchingBracket: '#ffffff19',

+  // 搜索匹配 - 金黄色调
+  searchMatch: 'rgba(250, 220, 81, 0.7)',
+  searchMatchSelected: 'rgba(255, 140, 0, 0.85)',
+  searchMatchSelectedOutline: '#ff6600',
+
  // 语法标签色值
  comment: '#6272a4',
  lineComment: '#5c6b99',
--- a/frontend/src/views/editor/theme/dark/dracula.ts
+++ b/frontend/src/views/editor/theme/dark/dracula.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#191a21',
  matchingBracket: '#44475a',

+  // 搜索匹配 - Dracula 紫粉色调
+  searchMatch: 'rgba(189, 147, 249, 0.45)',
+  searchMatchSelected: 'rgba(255, 121, 198, 0.65)',
+  searchMatchSelectedOutline: '#ff79c6',
+
  comment: '#6272a4',
  lineComment: '#55608c',
  blockComment: '#4f597f',
--- a/frontend/src/views/editor/theme/dark/github-dark.ts
+++ b/frontend/src/views/editor/theme/dark/github-dark.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#1b1f23',
  matchingBracket: '#17e5e650',

+  // 搜索匹配 - GitHub 蓝色调
+  searchMatch: 'rgba(121, 184, 255, 0.4)',
+  searchMatchSelected: 'rgba(51, 146, 255, 0.6)',
+  searchMatchSelectedOutline: '#58a6ff',
+
  comment: '#6a737d',
  lineComment: '#596068',
  blockComment: '#4f555c',
--- a/frontend/src/views/editor/theme/dark/material-dark.ts
+++ b/frontend/src/views/editor/theme/dark/material-dark.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#ffffff10',
  matchingBracket: '#263238',

+  // 搜索匹配 - Material 青绿色调
+  searchMatch: 'rgba(137, 221, 255, 0.4)',
+  searchMatchSelected: 'rgba(130, 170, 255, 0.55)',
+  searchMatchSelectedOutline: '#82aaff',
+
  comment: '#546e7a',
  lineComment: '#4b606a',
  blockComment: '#455962',
--- a/frontend/src/views/editor/theme/dark/one-dark.ts
+++ b/frontend/src/views/editor/theme/dark/one-dark.ts
@@ -34,6 +34,11 @@ export const config: ThemeColors = {
  borderColor: darkBackground,
  matchingBracket: '#bad0f847',

+  // 搜索匹配 - One Dark 蓝橙色调
+  searchMatch: 'rgba(97, 175, 239, 0.4)',
+  searchMatchSelected: 'rgba(229, 192, 123, 0.55)',
+  searchMatchSelectedOutline: '#e5c07b',
+
  comment: stone,
  lineComment: '#6c7484',
  blockComment: '#606775',
--- a/frontend/src/views/editor/theme/dark/solarized-dark.ts
+++ b/frontend/src/views/editor/theme/dark/solarized-dark.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#073642',
  matchingBracket: '#073642',

+  // 搜索匹配 - Solarized 黄橙色调
+  searchMatch: 'rgba(181, 137, 0, 0.45)',
+  searchMatchSelected: 'rgba(203, 75, 22, 0.55)',
+  searchMatchSelectedOutline: '#cb4b16',
+
  comment: '#586e75',
  lineComment: '#4f646a',
  blockComment: '#46595e',
--- a/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
+++ b/frontend/src/views/editor/theme/dark/tokyo-night-storm.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#1f2335',
  matchingBracket: '#1f2335',

+  // 搜索匹配 - Tokyo Night Storm 紫蓝色调
+  searchMatch: 'rgba(187, 154, 247, 0.4)',
+  searchMatchSelected: 'rgba(122, 162, 247, 0.55)',
+  searchMatchSelectedOutline: '#7aa2f7',
+
  comment: '#565f89',
  lineComment: '#4d567b',
  blockComment: '#454e6f',
--- a/frontend/src/views/editor/theme/dark/tokyo-night.ts
+++ b/frontend/src/views/editor/theme/dark/tokyo-night.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#16161e',
  matchingBracket: '#16161e',

+  // 搜索匹配 - Tokyo Night 紫蓝色调
+  searchMatch: 'rgba(187, 154, 247, 0.4)',
+  searchMatchSelected: 'rgba(122, 162, 247, 0.55)',
+  searchMatchSelectedOutline: '#7aa2f7',
+
  comment: '#444b6a',
  lineComment: '#3d4360',
  blockComment: '#373d55',
--- a/frontend/src/views/editor/theme/light/default-light.ts
+++ b/frontend/src/views/editor/theme/light/default-light.ts
@@ -20,6 +20,11 @@ export const defaultLightColors: ThemeColors = {
    borderColor: '#d8dee4',
    matchingBracket: '#00000019',

+    // 搜索匹配 - 金黄色调
+    searchMatch: 'rgba(255, 200, 0, 0.55)',
+    searchMatchSelected: 'rgba(255, 140, 0, 0.75)',
+    searchMatchSelectedOutline: '#ff8c00',
+
    comment: '#6a737d',
    lineComment: '#808a95',
    blockComment: '#5c646f',
--- a/frontend/src/views/editor/theme/light/github-light.ts
+++ b/frontend/src/views/editor/theme/light/github-light.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#e1e4e8',
  matchingBracket: '#34d05840',

+  // 搜索匹配 - GitHub 蓝色调
+  searchMatch: 'rgba(3, 102, 214, 0.25)',
+  searchMatchSelected: 'rgba(3, 102, 214, 0.45)',
+  searchMatchSelectedOutline: '#0366d6',
+
  comment: '#6a737d',
  lineComment: '#5e6873',
  blockComment: '#4f5864',
--- a/frontend/src/views/editor/theme/light/material-light.ts
+++ b/frontend/src/views/editor/theme/light/material-light.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#00000010',
  matchingBracket: '#fafafa',

+  // 搜索匹配 - Material 紫色调
+  searchMatch: 'rgba(124, 77, 255, 0.25)',
+  searchMatchSelected: 'rgba(145, 184, 89, 0.45)',
+  searchMatchSelectedOutline: '#91b859',
+
  comment: '#90a4ae',
  lineComment: '#8598a3',
  blockComment: '#788b97',
--- a/frontend/src/views/editor/theme/light/solarized-light.ts
+++ b/frontend/src/views/editor/theme/light/solarized-light.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#eee8d5',
  matchingBracket: '#eee8d5',

+  // 搜索匹配 - Solarized 黄橙色调
+  searchMatch: 'rgba(181, 137, 0, 0.35)',
+  searchMatchSelected: 'rgba(38, 139, 210, 0.4)',
+  searchMatchSelectedOutline: '#268bd2',
+
  comment: '#93a1a1',
  lineComment: '#82939d',
  blockComment: '#7a8b95',
--- a/frontend/src/views/editor/theme/light/tokyo-night-day.ts
+++ b/frontend/src/views/editor/theme/light/tokyo-night-day.ts
@@ -21,6 +21,11 @@ export const config: ThemeColors = {
  borderColor: '#e9e9ec',
  matchingBracket: '#e9e9ec',

+  // 搜索匹配 - Tokyo Night Day 紫蓝色调
+  searchMatch: 'rgba(152, 84, 241, 0.25)',
+  searchMatchSelected: 'rgba(46, 125, 233, 0.4)',
+  searchMatchSelectedOutline: '#2e7de9',
+
  comment: '#9da3c2',
  lineComment: '#8b90a8',
  blockComment: '#7e849d',
--- a/frontend/src/views/editor/theme/types.ts
+++ b/frontend/src/views/editor/theme/types.ts
@@ -192,5 +192,10 @@ export interface ThemeColors extends ThemeTagColors {

  borderColor: string;  // 边框颜色
  matchingBracket: string;  // 匹配括号颜色
+
+  // 搜索匹配颜色
+  searchMatch: string;  // 搜索匹配背景色
+  searchMatchSelected: string;  // 当前选中匹配背景色
+  searchMatchSelectedOutline: string;  // 当前选中匹配边框色
 }