🐛 Fixed the issue of highlightActiveLine and selected background color conflicts

frontend/src/editor/index.vue

@@ -5,6 +5,7 @@ import {
   drawSelection,
   dropCursor,
   EditorView,
+  highlightActiveLine,
   highlightActiveLineGutter,
   highlightSpecialChars,
   keymap,
@@ -12,22 +13,17 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 import {Compartment, EditorState, Extension} from '@codemirror/state';
-import {baseDark} from "@/editor/theme/base-dark";
+import {baseDark, customHighlightActiveLine} from "@/editor/theme/base-dark";
 import {
   bracketMatching,
   defaultHighlightStyle,
   foldGutter,
   foldKeymap,
   indentOnInput,
-  syntaxHighlighting,
-  indentUnit
+  indentUnit,
+  syntaxHighlighting
 } from '@codemirror/language';
-import {
-  defaultKeymap, 
-  history, 
-  historyKeymap, 
-  indentSelection,
-} from '@codemirror/commands';
+import {defaultKeymap, history, historyKeymap, indentSelection,} from '@codemirror/commands';
 import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
 import {autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap} from '@codemirror/autocomplete';
 import {lintKeymap} from '@codemirror/lint';
@@ -80,8 +76,8 @@ const tabHandler = (view: EditorView): boolean => {
   const spaces = ' '.repeat(currentTabSize);
 
   // 在光标位置插入空格
-  const { state, dispatch } = view;
-  dispatch(state.update(state.replaceSelection(spaces), { scrollIntoView: true }));
+  const {state, dispatch} = view;
+  dispatch(state.update(state.replaceSelection(spaces), {scrollIntoView: true}));
   return true;
 };
 
@@ -130,6 +126,8 @@ const createEditor = () => {
     rectangularSelection(),
     crosshairCursor(),
     highlightSelectionMatches(),
+    customHighlightActiveLine,
+    highlightActiveLine(),
     keymap.of([
       ...closeBracketsKeymap,
       ...defaultKeymap,
@@ -209,7 +207,7 @@ const updateTabConfig = () => {
 
   // 更新Tab键映射
   const tabKeymap = editorStore.enableTabIndent
-    ? keymap.of([{ key: "Tab", run: tabHandler }])
+      ? keymap.of([{key: "Tab", run: tabHandler}])
       : [];
 
   view.dispatch({
@@ -240,7 +238,7 @@ onMounted(() => {
 
   // 添加滚轮事件监听
   if (editorElement.value) {
-    editorElement.value.addEventListener('wheel', handleWheel, { passive: false });
+    editorElement.value.addEventListener('wheel', handleWheel, {passive: false});
   }
 });
 

frontend/src/editor/theme/base-dark.ts

@@ -9,10 +9,11 @@ export const config = {
     background: '#252B37',
     foreground: '#9BB586',
     selection: '#1A5888',
+    selectionMatch: 'rgba(26, 88, 136, 0.5)',
     cursor: '#F8F8F2',
     dropdownBackground: '#282A36',
     dropdownBorder: '#191A21',
-    activeLine: '#2E333F',
+    activeLine: 'rgba(46, 51, 63, 0.6)',
     lineNumber: '#676d7c',
     lineNumberActive: '#F8F8F2',
     lineNumberBackground: '#212731',
@@ -42,7 +43,10 @@ export const draculaTheme = EditorView.theme({
     '.cm-content': {caretColor: config.cursor},
 
     '.cm-cursor, .cm-dropCursor': {borderLeftColor: config.cursor},
-    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {backgroundColor: config.selection},
+    
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+        backgroundColor: `${config.selection} !important`
+    },
 
     '.cm-panels': {backgroundColor: config.dropdownBackground, color: config.foreground},
     '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
@@ -57,7 +61,11 @@ export const draculaTheme = EditorView.theme({
     },
 
     '.cm-activeLine': {backgroundColor: config.activeLine},
-    '.cm-selectionMatch': {backgroundColor: config.selection},
+    
+    '.cm-selectionMatch': {
+        backgroundColor: `${config.selectionMatch} !important`,
+        borderRadius: '2px'
+    },
 
     '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
         backgroundColor: config.matchingBracket,
@@ -123,6 +131,12 @@ export const draculaHighlightStyle = HighlightStyle.define([
     {tag: t.strikethrough, textDecoration: 'line-through'},
 ])
 
+export const customHighlightActiveLine = EditorView.theme({
+  '.cm-activeLine': {
+    backgroundColor: config.activeLine,
+  }
+})
+
 export const baseDark: Extension = [
     draculaTheme,
     syntaxHighlighting(draculaHighlightStyle),