revert

.browserslistrc

@@ -0,0 +1 @@
+chrome >= 90

.github/workflows/deploy.yml

@@ -29,7 +29,7 @@ jobs:
         with:
           node-version: 24
           cache: npm
-      - run: npm ci
+      - run: npm install
       - run: npm run ${{ matrix.build_command }}
         env:
           CI: false

package.json

@@ -10,7 +10,7 @@
     "fmt": "prettier --write src *.ts"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/autocomplete": "^6.20.2",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-python": "^6.2.1",
     "@vue-flow/background": "^1.3.2",
@@ -19,11 +19,11 @@
     "@vue-flow/minimap": "^1.5.4",
     "@vue-flow/node-resizer": "^1.5.1",
     "@vue-flow/node-toolbar": "^1.1.1",
-    "@vueuse/core": "^14.2.1",
+    "@vueuse/core": "^14.3.0",
-    "@vueuse/router": "^14.2.1",
+    "@vueuse/router": "^14.3.0",
     "@wangeditor-next/editor": "^5.7.0",
     "@wangeditor-next/editor-for-vue": "^5.1.14",
-    "axios": "^1.15.0",
+    "axios": "^1.16.0",
     "canvas-confetti": "^1.9.4",
     "chart.js": "^4.5.1",
     "codemirror": "^6.0.2",
@@ -31,29 +31,29 @@
     "date-fns": "^4.1.0",
     "fflate": "^0.8.2",
     "highlight.js": "^11.11.1",
-    "md-editor-v3": "^6.4.2",
+    "md-editor-v3": "^6.5.0",
     "mermaid": "^11.14.0",
     "naive-ui": "^2.44.1",
-    "nanoid": "^5.1.7",
+    "nanoid": "^5.1.11",
     "normalize.css": "^8.0.1",
     "pinia": "^3.0.4",
     "skulpt": "^1.2.0",
-    "vue": "^3.5.32",
+    "vue": "^3.5.34",
     "vue-chartjs": "^5.3.3",
     "vue-codemirror": "^6.1.1",
-    "vue-router": "^5.0.4",
+    "vue-router": "^5.0.6",
     "y-codemirror.next": "^0.3.5",
     "y-webrtc": "^10.3.0",
     "yjs": "^13.6.30"
   },
   "devDependencies": {
-    "@iconify/vue": "^5.0.0",
+    "@iconify/vue": "^5.0.1",
     "@rsbuild/core": "^1.7.5",
     "@rsbuild/plugin-vue": "^1.2.7",
     "@types/canvas-confetti": "^1.9.0",
     "@types/node": "^25.6.0",
-    "prettier": "^3.8.2",
+    "prettier": "^3.8.3",
-    "typescript": "^6.0.2",
+    "typescript": "^6.0.3",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-vue-components": "^32.0.0"
   }

rsbuild.config.ts

@@ -4,7 +4,7 @@ import AutoImport from "unplugin-auto-import/rspack"
 import Components from "unplugin-vue-components/rspack"
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
 
-export default defineConfig(({ envMode }) => {
+const config: ReturnType<typeof defineConfig> = defineConfig(({ envMode }) => {
   const { publicVars, rawPublicVars } = loadEnv({
     cwd: process.cwd(),
     mode: envMode,
@@ -20,6 +20,7 @@ export default defineConfig(({ envMode }) => {
     ws: true,
     changeOrigin: true,
   }
+
   return {
     plugins: [pluginVue()],
     tools: {
@@ -96,3 +97,5 @@ export default defineConfig(({ envMode }) => {
     },
   }
 })
+
+export default config

src/admin/announcement/detail.vue

@@ -54,7 +54,7 @@ async function submit() {
   const api = {
     "admin announcement create": createAnnouncement,
     "admin announcement edit": editAnnouncement,
-  }[<string>route.name]
+  }[route.name as string]
   try {
     await api!(announcement)
     if (route.name === "admin announcement create") {

src/admin/contest/detail.vue

@@ -97,7 +97,7 @@ async function submit() {
   const api = {
     "admin contest create": createContest,
     "admin contest edit": editContest,
-  }[<string>route.name]
+  }[route.name as string]
   try {
     await api!(contest)
     if (route.name === "admin contest create") {

src/admin/problem/components/Modal.vue

@@ -33,7 +33,7 @@ const columns: DataTableColumn<AdminProblemFiltered>[] = [
     render: (row) =>
       h(AddButton, {
         problemID: row.id,
-        contestID: <string>route.params.contestID,
+        contestID: route.params.contestID as string,
         onAdded: () => emit("change"),
       }),
     width: 60,

src/admin/problem/detail.vue

@@ -44,7 +44,7 @@ const title = computed(
       "admin problem edit": "编辑题目",
       "admin contest problem create": "新建比赛题目",
       "admin contest problem edit": "编辑比赛题目",
-    })[<string>route.name],
+    })[route.name as string],
 )
 
 const isAIGenerating = ref(false)
@@ -136,7 +136,6 @@ async function getProblemDetail() {
   }
   try {
     const { data } = await getProblem(props.problemID)
-    toggleReady(true)
     problem.value.id = data.id
     problem.value._id = data._id
     problem.value.title = data.title
@@ -189,6 +188,7 @@ async function getProblemDetail() {
     })
     // 标签
     tags.value.select = data.tags
+    toggleReady(true)
   } catch (error) {
     message.error("获取题目失败")
     router.push({ name: "admin problem list" })
@@ -358,7 +358,7 @@ async function submit() {
     "admin problem edit": editProblem,
     "admin contest problem create": createContestProblem,
     "admin contest problem edit": editContestProblem,
-  }[<string>route.name]
+  }[route.name as string]
   if (
     route.name === "admin contest problem create" ||
     route.name === "admin contest problem edit"

src/admin/problem/list.vue

@@ -23,7 +23,7 @@ const title = computed(
     ({
       "admin problem list": "题目列表",
       "admin contest problem list": "比赛题目列表",
-    })[<string>route.name],
+    })[route.name as string],
 )
 const isContestProblemList = computed(
   () => route.name === "admin contest problem list",

src/admin/tutorial/components/ExerciseManager.vue

@@ -80,6 +80,10 @@ function toggleAnswer(i: number) {
 }
 
 async function save() {
+  if (formType.value === "mcq" && mcqAnswer.value.length === 0) {
+    message.error("请至少勾选一个正确答案")
+    return
+  }
   let data: Record<string, unknown>
   if (formType.value === "mcq") {
     data = {

src/index.css

@@ -10,6 +10,26 @@ body {
   --md-theme-color: var(--n-text-color) !important;
 }
 
+.oj-mermaid-surface {
+  box-sizing: border-box;
+  padding: 18px;
+  overflow: auto;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 8px;
+  background:
+    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
+    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #eef6ff 100%);
+  background-size:
+    24px 24px,
+    24px 24px,
+    auto;
+}
+
+.oj-mermaid-surface > svg {
+  max-width: 100%;
+}
+
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation: none;

src/oj/learn/components/ExerciseMcq.vue

@@ -3,6 +3,7 @@ import { Exercise, ExerciseMcqData } from "utils/types"
 
 const props = defineProps<{ exercise: Exercise }>()
 const data = computed(() => props.exercise.data as ExerciseMcqData)
+const isSingle = computed(() => data.value.answer.length === 1)
 
 const selected = ref<Set<number>>(new Set())
 const correct = ref(false)
@@ -12,8 +13,13 @@ const partial = ref(false)
 function select(idx: number) {
   if (correct.value) return
   const s = new Set(selected.value)
+  if (isSingle.value) {
+    s.clear()
+    if (!selected.value.has(idx)) s.add(idx)
+  } else {
     if (s.has(idx)) s.delete(idx)
     else s.add(idx)
+  }
   selected.value = s
   wrong.value = false
   partial.value = false
@@ -30,6 +36,7 @@ function submit() {
     wrong.value = false
     partial.value = false
   } else {
+    selected.value = new Set()
     const hasIntersection = [...sel].some((v) => answer.has(v))
     if (hasIntersection) {
       partial.value = true
@@ -62,9 +69,9 @@ function optionType(idx: number): "default" | "primary" | "success" {
   >
     <template #header>
       <n-space align="center" :size="8">
-        <n-tag type="success" size="small" :bordered="false"
+        <n-tag type="success" size="small" :bordered="false">
-          >练一练 · 多选题</n-tag
+          练一练 · {{ isSingle ? "单选题" : "多选题" }}
-        >
+        </n-tag>
       </n-space>
     </template>
 

src/oj/problem/components/ProblemSubmission.vue

@@ -50,7 +50,7 @@ const columns: DataTableColumn<Submission>[] = [
           text: true,
           type: "info",
           onClick: () => {
-            showCodePanel(row.id, <string>route.params.problemID ?? "")
+            showCodePanel(row.id, (route.params.problemID as string) ?? "")
           },
         },
         () => row.id.slice(0, 12),
@@ -116,8 +116,8 @@ async function listSubmissions() {
     ...query,
     myself: "1",
     offset,
-    problem_id: <string>route.params.problemID ?? "",
+    problem_id: (route.params.problemID as string) ?? "",
-    contest_id: <string>route.params.contestID ?? "",
+    contest_id: (route.params.contestID as string) ?? "",
   })
   submissions.value = res.data.results
   total.value = res.data.total
@@ -125,7 +125,7 @@ async function listSubmissions() {
 
 async function getRankOfThisProblem() {
   loading.value = true
-  const res = await getRankOfProblem(<string>route.params.problemID ?? "")
+  const res = await getRankOfProblem((route.params.problemID as string) ?? "")
   loading.value = false
 
   class_name.value = res.data.class_name

src/oj/problem/components/SubmitCode.vue

@@ -24,8 +24,8 @@ const codeStore = useCodeStore()
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 const route = useRoute()
-const contestID = <string>route.params.contestID ?? ""
+const contestID = (route.params.contestID as string) ?? ""
-const problemSetId = <string>route.params.problemSetId ?? ""
+const problemSetId = (route.params.problemSetId as string) ?? ""
 
 const router = useRouter()
 const [commentPanel] = useToggle()

src/oj/problem/composables/useMermaidConverter.ts

@@ -72,15 +72,19 @@ export function useMermaidConverter() {
     // 添加样式定义来区分不同类型的节点
     mermaid += "\n"
     mermaid +=
-      "    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px\n"
+      "    classDef startNode fill:#dcfce7,stroke:#16a34a,stroke-width:2.5px,color:#0f172a\n"
     mermaid +=
-      "    classDef input fill:#e3f2fd,stroke:#1976d2,stroke-width:2px\n"
+      "    classDef endNode fill:#fee2e2,stroke:#dc2626,stroke-width:2.5px,color:#0f172a\n"
     mermaid +=
-      "    classDef output fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px\n"
+      "    classDef input fill:#dbeafe,stroke:#2563eb,stroke-width:2.5px,color:#0f172a\n"
     mermaid +=
-      "    classDef process fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px\n"
+      "    classDef output fill:#ede9fe,stroke:#7c3aed,stroke-width:2.5px,color:#0f172a\n"
     mermaid +=
-      "    classDef decision fill:#fff3e0,stroke:#e65100,stroke-width:2px\n"
+      "    classDef process fill:#f0f9ff,stroke:#0284c7,stroke-width:2.5px,color:#0f172a\n"
+    mermaid +=
+      "    classDef decision fill:#fef3c7,stroke:#d97706,stroke-width:2.5px,color:#0f172a\n"
+    mermaid +=
+      "    classDef loop fill:#fae8ff,stroke:#c026d3,stroke-width:2.5px,color:#0f172a\n"
     mermaid += "\n"
 
     // 为节点应用样式
@@ -90,8 +94,10 @@ export function useMermaidConverter() {
 
       switch (originalType) {
         case "start":
+          mermaid += `    class ${nodeId} startNode\n`
+          break
         case "end":
-          mermaid += `    class ${nodeId} startEnd\n`
+          mermaid += `    class ${nodeId} endNode\n`
           break
         case "input":
           mermaid += `    class ${nodeId} input\n`
@@ -100,9 +106,11 @@ export function useMermaidConverter() {
           mermaid += `    class ${nodeId} output\n`
           break
         case "decision":
-        case "loop":
           mermaid += `    class ${nodeId} decision\n`
           break
+        case "loop":
+          mermaid += `    class ${nodeId} loop\n`
+          break
         default:
           mermaid += `    class ${nodeId} process\n`
       }

src/oj/problem/list.vue

@@ -15,7 +15,6 @@ import { renderTableTitle } from "utils/renders"
 import ProblemStatus from "./components/ProblemStatus.vue"
 import AuthorSelect from "shared/components/AuthorSelect.vue"
 import ProblemListTitle from "./components/ProblemListTitle.vue"
-import { labelRect } from "mermaid/dist/rendering-util/rendering-elements/shapes/labelRect"
 
 interface Tag {
   id: number
@@ -221,12 +220,12 @@ function rowProps(row: ProblemFiltered) {
 
 <template>
   <n-flex vertical size="large">
-    <n-flex justify="space-between">
+    <div class="problem-list-toolbar">
       <n-space>
         <n-form :show-feedback="false" inline label-placement="left">
           <n-form-item label="难度">
             <n-select
-              style="width: 120px"
+              style="width: 100px"
               v-model:value="query.difficulty"
               :options="difficultyOptions"
             />
@@ -238,7 +237,7 @@ function rowProps(row: ProblemFiltered) {
         <n-form :show-feedback="false" inline label-placement="left">
           <n-form-item label="排序">
             <n-select
-              style="width: 120px"
+              style="width: 100px"
               v-model:value="query.sort"
               :options="sortOptions"
             />
@@ -274,8 +273,8 @@ function rowProps(row: ProblemFiltered) {
           </n-form-item>
         </n-form>
       </n-space>
-      <Hitokoto v-if="isDesktop" />
+      <Hitokoto v-if="isDesktop" class="problem-list-hitokoto" />
-    </n-flex>
+    </div>
     <n-collapse-transition :show="showTag">
       <n-flex>
         <n-tag
@@ -304,4 +303,32 @@ function rowProps(row: ProblemFiltered) {
   />
 </template>
 
-<style scoped></style>
+<style scoped>
+.problem-list-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, auto) minmax(250px, 1fr);
+  align-items: start;
+  gap: 12px 16px;
+}
+
+.problem-list-toolbar :deep(.n-space) {
+  min-width: 0;
+}
+
+.problem-list-hitokoto {
+  justify-self: end;
+  width: 100%;
+  max-width: 720px;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .problem-list-toolbar {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .problem-list-toolbar :deep(.n-space) {
+    width: 100%;
+  }
+}
+</style>

src/oj/submission/detail.vue

@@ -81,7 +81,7 @@ async function copyToProblem() {
   }
 
   const contestID = submission.value!.contest
-  const problemSetId = <string>route.params.problemSetId ?? ""
+  const problemSetId = (route.params.problemSetId as string) ?? ""
   if (contestID) {
     // 竞赛题目
     router.push({

src/oj/submission/list.vue

@@ -103,7 +103,7 @@ async function listSubmissions() {
       ...query,
       offset,
       problem_id: query.problem,
-      contest_id: <string>route.params.contestID ?? "",
+      contest_id: (route.params.contestID as string) ?? "",
       language: query.language,
       today: query.today,
     })

src/oj/user/index.vue

@@ -93,7 +93,7 @@ function groupBadgesByIcon(badges: UserBadgeType[]): GroupedBadge[] {
 async function init() {
   toggle(true)
   try {
-    const res = await getProfile(<string>route.query.name)
+    const res = await getProfile(route.query.name as string)
     profile.value = res.data
     const acm = res.data.acm_problems_status.problems || {}
     const oi = res.data.oi_problems_status.problems || {}
@@ -114,7 +114,7 @@ async function init() {
     }
 
     if (route.query.name) {
-      promises.push(getUserBadges(<string>route.query.name))
+      promises.push(getUserBadges(route.query.name as string))
     } else {
       promises.push(getUserBadges())
     }

src/shared/components/Beian.vue

@@ -26,7 +26,7 @@ import { useBreakpoints } from "shared/composables/breakpoints"
 const route = useRoute()
 const { isMobile } = useBreakpoints()
 const hiddenICP = computed(() =>
-  ["problem", "contest problem"].includes(<string>route.name),
+  ["problem", "contest problem"].includes(route.name as string),
 )
 
 function goICP() {

src/shared/components/Hitokoto.vue

@@ -26,27 +26,44 @@ onMounted(receive)
     @click="receive"
     v-if="hitokoto.sentence"
   >
-    <div class="sentence">{{ hitokoto.sentence }}</div>
+    <span class="from">{{ "来自 " + hitokoto.from }}</span>
-    <div class="from">{{ "来自 " + hitokoto.from }}</div>
+    <span class="sentence">{{ hitokoto.sentence }}</span>
   </div>
 </template>
 <style scoped>
 .hitokoto {
   cursor: pointer;
-  height: 34px;
+  height: 36px;
+  min-width: 0;
+  display: flow-root;
+  overflow: hidden;
+  text-align: right;
+  line-height: 18px;
+  word-break: break-all;
+}
+
+.hitokoto::before {
+  content: "";
+  float: right;
+  width: 0;
+  height: 18px;
 }
 
 .hitokoto .sentence {
-  max-width: 400px;
+  text-align: right;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  word-break: break-all;
-  white-space: nowrap;
 }
 
 .hitokoto .from {
   float: right;
+  clear: right;
+  max-width: min(45%, 260px);
+  margin-left: 8px;
+  text-align: right;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
   font-size: 12px;
+  line-height: 18px;
   color: grey;
 }
 </style>

src/shared/components/TextEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {
+import type {
   IDomEditor,
   IEditorConfig,
   IToolbarConfig,
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
 const message = useMessage()
 
 const editorRef = shallowRef<IDomEditor>()
+const toolbarEditorRef = shallowRef<IDomEditor>()
 
 const toolbarConfig: Partial<IToolbarConfig> = {
   toolbarKeys: [
@@ -91,8 +92,10 @@ function onClick() {
   editorRef.value.focus()
 }
 
-function handleCreated(editor: IDomEditor) {
+async function handleCreated(editor: IDomEditor) {
   editorRef.value = editor
+  await nextTick()
+  toolbarEditorRef.value = editor
 }
 
 async function customUpload(file: File, insertFn: InsertFnType) {
@@ -113,7 +116,7 @@ async function customUpload(file: File, insertFn: InsertFnType) {
   <div class="editorWrapper">
     <Toolbar
       class="toolbar"
-      :editor="editorRef"
+      :editor="toolbarEditorRef"
       :defaultConfig="props.simple ? toolbarConfigSimple : toolbarConfig"
       mode="simple"
     />

src/shared/composables/useMermaid.ts

@@ -1,5 +1,236 @@
 import { getRandomId } from "utils/functions"
 
+const mermaidThemeVariables = {
+  primaryColor: "#e0f2fe",
+  primaryTextColor: "#0f172a",
+  primaryBorderColor: "#0284c7",
+  lineColor: "#64748b",
+  secondaryColor: "#f5f3ff",
+  tertiaryColor: "#ecfdf5",
+  background: "#ffffff",
+  mainBkg: "#f8fafc",
+  secondBkg: "#eef2ff",
+  tertiaryBkg: "#f0fdfa",
+  nodeBorder: "#2563eb",
+  clusterBkg: "#f8fafc",
+  clusterBorder: "#cbd5e1",
+  edgeLabelBackground: "#ffffff",
+  fontFamily:
+    'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+}
+
+const semanticNodeClasses = [
+  "startNode",
+  "endNode",
+  "startEnd",
+  "input",
+  "output",
+  "process",
+  "decision",
+  "loop",
+]
+
+const displayStyleId = "oj-mermaid-display-style"
+
+const mermaidDisplayStyle = `
+.oj-mermaid-flowchart {
+  max-width: 100%;
+  height: auto;
+}
+
+.oj-mermaid-flowchart g.node rect,
+.oj-mermaid-flowchart g.node polygon,
+.oj-mermaid-flowchart g.node ellipse,
+.oj-mermaid-flowchart g.node circle,
+.oj-mermaid-flowchart g.node path {
+  stroke-width: 2.5px !important;
+  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.12));
+}
+
+.oj-mermaid-flowchart g.node.startNode rect,
+.oj-mermaid-flowchart g.node.startNode polygon,
+.oj-mermaid-flowchart g.node.startNode ellipse,
+.oj-mermaid-flowchart g.node.startNode circle,
+.oj-mermaid-flowchart g.node.startNode path,
+.oj-mermaid-flowchart g.node.startEnd rect,
+.oj-mermaid-flowchart g.node.startEnd polygon,
+.oj-mermaid-flowchart g.node.startEnd ellipse,
+.oj-mermaid-flowchart g.node.startEnd circle,
+.oj-mermaid-flowchart g.node.startEnd path {
+  fill: #dcfce7 !important;
+  stroke: #16a34a !important;
+}
+
+.oj-mermaid-flowchart g.node.endNode rect,
+.oj-mermaid-flowchart g.node.endNode polygon,
+.oj-mermaid-flowchart g.node.endNode ellipse,
+.oj-mermaid-flowchart g.node.endNode circle,
+.oj-mermaid-flowchart g.node.endNode path {
+  fill: #fee2e2 !important;
+  stroke: #dc2626 !important;
+}
+
+.oj-mermaid-flowchart g.node.input rect,
+.oj-mermaid-flowchart g.node.input polygon,
+.oj-mermaid-flowchart g.node.input ellipse,
+.oj-mermaid-flowchart g.node.input circle,
+.oj-mermaid-flowchart g.node.input path {
+  fill: #dbeafe !important;
+  stroke: #2563eb !important;
+}
+
+.oj-mermaid-flowchart g.node.output rect,
+.oj-mermaid-flowchart g.node.output polygon,
+.oj-mermaid-flowchart g.node.output ellipse,
+.oj-mermaid-flowchart g.node.output circle,
+.oj-mermaid-flowchart g.node.output path {
+  fill: #ede9fe !important;
+  stroke: #7c3aed !important;
+}
+
+.oj-mermaid-flowchart g.node.process rect,
+.oj-mermaid-flowchart g.node.process polygon,
+.oj-mermaid-flowchart g.node.process ellipse,
+.oj-mermaid-flowchart g.node.process circle,
+.oj-mermaid-flowchart g.node.process path {
+  fill: #f0f9ff !important;
+  stroke: #0284c7 !important;
+}
+
+.oj-mermaid-flowchart g.node.decision rect,
+.oj-mermaid-flowchart g.node.decision polygon,
+.oj-mermaid-flowchart g.node.decision ellipse,
+.oj-mermaid-flowchart g.node.decision circle,
+.oj-mermaid-flowchart g.node.decision path {
+  fill: #fef3c7 !important;
+  stroke: #d97706 !important;
+}
+
+.oj-mermaid-flowchart g.node.loop rect,
+.oj-mermaid-flowchart g.node.loop polygon,
+.oj-mermaid-flowchart g.node.loop ellipse,
+.oj-mermaid-flowchart g.node.loop circle,
+.oj-mermaid-flowchart g.node.loop path {
+  fill: #fae8ff !important;
+  stroke: #c026d3 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-0 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-0 path {
+  fill: #dbeafe !important;
+  stroke: #2563eb !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-1 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-1 path {
+  fill: #ccfbf1 !important;
+  stroke: #0d9488 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-2 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-2 path {
+  fill: #ede9fe !important;
+  stroke: #7c3aed !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-3 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-3 path {
+  fill: #ffe4e6 !important;
+  stroke: #e11d48 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-4 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-4 path {
+  fill: #fef3c7 !important;
+  stroke: #d97706 !important;
+}
+
+.oj-mermaid-flowchart g.node.oj-node-palette-5 rect,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 polygon,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 ellipse,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 circle,
+.oj-mermaid-flowchart g.node.oj-node-palette-5 path {
+  fill: #dcfce7 !important;
+  stroke: #16a34a !important;
+}
+
+.oj-mermaid-flowchart g.node .label,
+.oj-mermaid-flowchart g.node .nodeLabel,
+.oj-mermaid-flowchart g.node .nodeLabel p,
+.oj-mermaid-flowchart g.node .label span {
+  color: #0f172a !important;
+  fill: #0f172a !important;
+  font-weight: 650 !important;
+}
+
+.oj-mermaid-flowchart .edgePaths path.path,
+.oj-mermaid-flowchart .flowchart-link {
+  stroke: #64748b !important;
+  stroke-width: 2.4px !important;
+}
+
+.oj-mermaid-flowchart marker path,
+.oj-mermaid-flowchart .marker {
+  fill: #64748b !important;
+  stroke: #64748b !important;
+}
+
+.oj-mermaid-flowchart .edgeLabel rect,
+.oj-mermaid-flowchart .edgeLabel .labelBkg {
+  fill: rgba(255, 255, 255, 0.94) !important;
+  stroke: #cbd5e1 !important;
+}
+
+.oj-mermaid-flowchart .edgeLabel,
+.oj-mermaid-flowchart .edgeLabel span,
+.oj-mermaid-flowchart .edgeLabel p {
+  color: #334155 !important;
+  font-weight: 600 !important;
+}
+`
+
+const svgNamespace = "http://www.w3.org/2000/svg"
+
+function applyFlowchartDisplayStyle(container: HTMLElement) {
+  container.classList.add("oj-mermaid-surface")
+
+  const svg = container.querySelector("svg")
+  if (!svg) return
+
+  svg.classList.add("oj-mermaid-flowchart")
+
+  const nodes = Array.from(svg.querySelectorAll<SVGGElement>("g.node"))
+  nodes.forEach((node, index) => {
+    const hasSemanticClass = semanticNodeClasses.some((className) =>
+      node.classList.contains(className),
+    )
+    if (!hasSemanticClass) {
+      node.classList.add(`oj-node-palette-${index % 6}`)
+    }
+  })
+
+  svg.querySelector(`#${displayStyleId}`)?.remove()
+  const style = document.createElementNS(svgNamespace, "style")
+  style.setAttribute("id", displayStyleId)
+  style.textContent = mermaidDisplayStyle
+  svg.insertBefore(style, svg.firstChild)
+}
+
 export function useMermaid() {
   // 渲染状态
   const renderError = ref<string | null>(null)
@@ -15,7 +246,8 @@ export function useMermaid() {
       mermaid.initialize({
         startOnLoad: false,
         securityLevel: "strict",
-        theme: "default",
+        theme: "base",
+        themeVariables: mermaidThemeVariables,
       })
     }
     return mermaid
@@ -37,6 +269,7 @@ export function useMermaid() {
         const id = `mermaid-${getRandomId()}`
         const { svg } = await mermaid.render(id, mermaidCode)
         container.innerHTML = svg
+        applyFlowchartDisplayStyle(container)
       }
     } catch (error) {
       renderError.value =

tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}

tsconfig.json

@@ -1,24 +1,7 @@
 {
-  "compilerOptions": {
+  "files": [],
-    "target": "ESNext",
+  "references": [
-    "useDefineForClassFields": true,
+    { "path": "./tsconfig.app.json" },
-    "module": "ESNext",
+    { "path": "./tsconfig.node.json" }
-    "strict": true,
+  ]
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "lib": ["ESNext", "DOM"],
-    "skipLibCheck": true,
-    "noEmit": true,
-    "paths": {
-      "shared/*": ["./src/shared/*"],
-      "utils/*": ["./src/utils/*"],
-      "oj/*": ["./src/oj/*"],
-      "admin/*": ["./src/admin/*"],
-    },
-    "types": ["naive-ui/volar"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -1,9 +1,24 @@
 {
   "compilerOptions": {
-    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "skipLibCheck": true,
-    "allowSyntheticDefaultImports": true
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   },
   "include": ["rsbuild.config.ts"]
 }