From 83e89b473ff3fecdb3c9982f4e9891a98cd22d8f Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Sat, 9 May 2026 01:54:02 -0600
Subject: [PATCH] fix

---
 .../ai/components/RankDistributionChart.vue   |  2 +-
 src/oj/problem/components/SubmitCode.vue      |  2 +-
 src/oj/problem/components/SubmitFlowchart.vue |  3 ++-
 src/shared/components/CodeEditor.vue          | 23 +++++++++----------
 src/shared/components/SyncCodeEditor.vue      | 22 +++++++++---------
 src/shared/extensions/autocompletion.ts       |  6 ++---
 src/shared/extensions/baseTheme.ts            |  9 ++++++++
 src/shared/themes/createTheme.ts              |  2 +-
 src/shared/themes/smoothy.ts                  | 19 ++++++++++++++-
 9 files changed, 57 insertions(+), 31 deletions(-)
 create mode 100644 src/shared/extensions/baseTheme.ts

diff --git a/src/oj/ai/components/RankDistributionChart.vue b/src/oj/ai/components/RankDistributionChart.vue
index 19e3ffe..db51802 100644
--- a/src/oj/ai/components/RankDistributionChart.vue
+++ b/src/oj/ai/components/RankDistributionChart.vue
@@ -3,7 +3,7 @@
     <template #header-extra>
       <n-text depth="3" style="font-size: 12px">
         了解同期解题速度和竞争力
-        </n-text>
+      </n-text>
     </template>
     <div style="height: 300px">
       <Pie :data="data" :options="options" />
diff --git a/src/oj/problem/components/SubmitCode.vue b/src/oj/problem/components/SubmitCode.vue
index bc25d76..b20d7ea 100644
--- a/src/oj/problem/components/SubmitCode.vue
+++ b/src/oj/problem/components/SubmitCode.vue
@@ -196,7 +196,7 @@ watch(
     placement="bottom-end"
     scrollable
     :show-arrow="false"
-    style="max-height: 600px;"
+    style="max-height: 600px"
     :show="showResult"
     @clickoutside="showResult = false"
   >
diff --git a/src/oj/problem/components/SubmitFlowchart.vue b/src/oj/problem/components/SubmitFlowchart.vue
index 032a7cf..d6304c9 100644
--- a/src/oj/problem/components/SubmitFlowchart.vue
+++ b/src/oj/problem/components/SubmitFlowchart.vue
@@ -42,7 +42,8 @@ interface FlowchartEditorInstance {
 }
 
 // 通过inject获取FlowchartEditor组件的引用
-const flowchartEditorRef = inject<Ref<FlowchartEditorInstance | null>>("flowchartEditorRef")
+const flowchartEditorRef =
+  inject<Ref<FlowchartEditorInstance | null>>("flowchartEditorRef")
 const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
 
 // 基础组合式函数
diff --git a/src/shared/components/CodeEditor.vue b/src/shared/components/CodeEditor.vue
index 84b13e5..6dbf97b 100644
--- a/src/shared/components/CodeEditor.vue
+++ b/src/shared/components/CodeEditor.vue
@@ -1,12 +1,17 @@
 <script lang="ts" setup>
 import { cpp } from "@codemirror/lang-cpp"
 import { python } from "@codemirror/lang-python"
-import { EditorView } from "@codemirror/view"
+import { bracketMatching } from "@codemirror/language"
 import { Codemirror } from "vue-codemirror"
-import { autocompletion } from "@codemirror/autocomplete"
-import { LANGUAGE } from "utils/types"
+import {
+  autocompletion,
+  closeBrackets,
+  completeAnyWord,
+} from "@codemirror/autocomplete"
+import type { LANGUAGE } from "utils/types"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
+import { styleTheme } from "shared/extensions/baseTheme"
 import { enhanceCompletion } from "shared/extensions/autocompletion"
 
 interface Props {
@@ -30,14 +35,6 @@ const code = defineModel<string>("value")
 
 const isDark = useDark()
 
-const styleTheme = EditorView.baseTheme({
-  "& .cm-scroller": { "font-family": "Monaco" },
-  "&.cm-editor.cm-focused": { outline: "none" },
-  "&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
-    "font-family": "Monaco",
-  },
-})
-
 const langExtension = computed(() => {
   return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
 })
@@ -45,8 +42,10 @@ const langExtension = computed(() => {
 const extensions = computed(() => [
   styleTheme,
   langExtension.value,
+  bracketMatching(),
+  closeBrackets(),
   autocompletion({
-    override: [enhanceCompletion(props.language)],
+    override: [enhanceCompletion(props.language), completeAnyWord],
   }),
   isDark.value ? oneDark : smoothy,
 ])
diff --git a/src/shared/components/SyncCodeEditor.vue b/src/shared/components/SyncCodeEditor.vue
index 330d71a..98ae998 100644
--- a/src/shared/components/SyncCodeEditor.vue
+++ b/src/shared/components/SyncCodeEditor.vue
@@ -1,13 +1,19 @@
 <script lang="ts" setup>
 import { cpp } from "@codemirror/lang-cpp"
 import { python } from "@codemirror/lang-python"
+import { bracketMatching } from "@codemirror/language"
 import { EditorView } from "@codemirror/view"
 import { Codemirror } from "vue-codemirror"
-import { autocompletion } from "@codemirror/autocomplete"
+import {
+  autocompletion,
+  closeBrackets,
+  completeAnyWord,
+} from "@codemirror/autocomplete"
 import type { Extension } from "@codemirror/state"
-import { LANGUAGE } from "utils/types"
+import type { LANGUAGE } from "utils/types"
 import { oneDark } from "../themes/oneDark"
 import { smoothy } from "../themes/smoothy"
+import { styleTheme } from "shared/extensions/baseTheme"
 import { useCodeSync, SYNC_ERROR_CODES } from "../composables/sync"
 import { useBreakpoints } from "../composables/breakpoints"
 import { enhanceCompletion } from "shared/extensions/autocompletion"
@@ -50,14 +56,6 @@ const emit = defineEmits<{
 
 const { isDesktop } = useBreakpoints()
 
-const styleTheme = EditorView.baseTheme({
-  "& .cm-scroller": { "font-family": "Monaco" },
-  "&.cm-editor.cm-focused": { outline: "none" },
-  "&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
-    "font-family": "Monaco",
-  },
-})
-
 const langExtension = computed((): Extension => {
   return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
 })
@@ -65,9 +63,11 @@ const langExtension = computed((): Extension => {
 const extensions = computed(() => [
   styleTheme,
   langExtension.value,
+  bracketMatching(),
+  closeBrackets(),
   isDark.value ? oneDark : smoothy,
   autocompletion({
-    override: [enhanceCompletion(props.language)],
+    override: [enhanceCompletion(props.language), completeAnyWord],
   }),
   getInitialExtension(),
 ])
diff --git a/src/shared/extensions/autocompletion.ts b/src/shared/extensions/autocompletion.ts
index b847dab..4f09444 100644
--- a/src/shared/extensions/autocompletion.ts
+++ b/src/shared/extensions/autocompletion.ts
@@ -5,7 +5,7 @@ import type {
   CompletionSource,
 } from "@codemirror/autocomplete"
 import type { EditorView } from "@codemirror/view"
-import { LANGUAGE } from "utils/types"
+import type { LANGUAGE } from "utils/types"
 import { c } from "./c"
 import { python } from "./python"
 
@@ -25,7 +25,7 @@ export function enhanceCompletion(language: LANGUAGE): CompletionSource {
     context: CompletionContext,
   ): Promise<CompletionResult | null> {
     const word = context.matchBefore(/\w+/)
-    if (!word) return null
+    if (!word && !context.explicit) return null
 
     const trulyLanguage = language.startsWith("Python") ? "python" : "c"
     const completions: Completion[] = (
@@ -63,7 +63,7 @@ export function enhanceCompletion(language: LANGUAGE): CompletionSource {
     })
 
     return {
-      from: word.from,
+      from: word ? word.from : context.pos,
       options: completions,
       validFor: /^\w+$/,
     }
diff --git a/src/shared/extensions/baseTheme.ts b/src/shared/extensions/baseTheme.ts
new file mode 100644
index 0000000..f663018
--- /dev/null
+++ b/src/shared/extensions/baseTheme.ts
@@ -0,0 +1,9 @@
+import { EditorView } from "@codemirror/view"
+
+export const styleTheme = EditorView.baseTheme({
+  "& .cm-scroller": { "font-family": "Monaco" },
+  "&.cm-editor.cm-focused": { outline: "none" },
+  "&.cm-editor .cm-tooltip.cm-tooltip-autocomplete ul": {
+    "font-family": "Monaco",
+  },
+})
diff --git a/src/shared/themes/createTheme.ts b/src/shared/themes/createTheme.ts
index 0c7a2fa..8190216 100644
--- a/src/shared/themes/createTheme.ts
+++ b/src/shared/themes/createTheme.ts
@@ -82,7 +82,7 @@ export const createTheme = ({
       ".cm-cursor, .cm-dropCursor": {
         borderLeftColor: settings.caret,
       },
-      "&.cm-focused .cm-selectionBackgroundm .cm-selectionBackground, .cm-content ::selection":
+      "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
         {
           backgroundColor: settings.selection,
         },
diff --git a/src/shared/themes/smoothy.ts b/src/shared/themes/smoothy.ts
index b58cdc6..bb64ee1 100644
--- a/src/shared/themes/smoothy.ts
+++ b/src/shared/themes/smoothy.ts
@@ -1,8 +1,23 @@
 import { tags as t } from "@lezer/highlight"
+import { EditorView } from "@codemirror/view"
+import type { Extension } from "@codemirror/state"
 import { createTheme } from "./createTheme"
 
+const tooltipTheme = EditorView.theme({
+  ".cm-tooltip": {
+    border: "1px solid #e0e0e0",
+    backgroundColor: "#f8f8f8",
+  },
+  ".cm-tooltip-autocomplete": {
+    "& > ul > li[aria-selected]": {
+      backgroundColor: "#e8e8e8",
+      color: "#000000",
+    },
+  },
+})
+
 // Author: Kenneth Reitz
-export const smoothy = createTheme({
+const smoothyBase = createTheme({
   variant: "light",
   settings: {
     background: "#FFFFFF",
@@ -81,3 +96,5 @@ export const smoothy = createTheme({
     },
   ],
 })
+
+export const smoothy: Extension = [smoothyBase, tooltipTheme]