Compare commits

..

13 Commits

Author SHA1 Message Date
da75f50798 styling mermaid
Some checks are pending
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Waiting to run
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Waiting to run
2026-05-06 21:36:20 -06:00
ed3e9322b2 update
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-06 20:39:08 -06:00
97917164ea update
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-05 09:54:52 -06:00
59f3747496 fix
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-05 07:27:06 -06:00
86cc5cc500 fix 2026-05-05 07:26:47 -06:00
e8b9a190ec fix update
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-05 07:23:40 -06:00
507d77a576 fix in mobile
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-05 05:53:59 -06:00
22b9405ed2 fix
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-04 11:06:25 -06:00
711c446f74 update
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-04 11:00:07 -06:00
e6e4d71b1c fix UI
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-03 10:22:03 -06:00
6ae879ba80 update
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-05-02 09:11:00 -06:00
9137a12dc9 fix
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-04-27 04:07:09 -06:00
f4b9f34ec8 fix
Some checks failed
Deploy / deploy (build, debian, 22, /root/OJDeploy/data/clientnext) (push) Has been cancelled
Deploy / deploy (build:staging, school, 8822, /root/OJ/data/dist) (push) Has been cancelled
2026-04-27 03:56:16 -06:00
15 changed files with 768 additions and 507 deletions

1
.browserslistrc Normal file
View File

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

View File

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

795
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -9,6 +9,14 @@
"build:test": "rsbuild build --env-mode=test", "build:test": "rsbuild build --env-mode=test",
"fmt": "prettier --write src *.ts" "fmt": "prettier --write src *.ts"
}, },
"overrides": {
"dompurify": "3.4.2",
"lodash": "4.18.1",
"lodash-es": "4.18.1",
"picomatch": "4.0.4",
"uuid": "14.0.0",
"yaml": "2.8.4"
},
"dependencies": { "dependencies": {
"@codemirror/autocomplete": "^6.20.1", "@codemirror/autocomplete": "^6.20.1",
"@codemirror/lang-cpp": "^6.0.3", "@codemirror/lang-cpp": "^6.0.3",
@@ -19,11 +27,11 @@
"@vue-flow/minimap": "^1.5.4", "@vue-flow/minimap": "^1.5.4",
"@vue-flow/node-resizer": "^1.5.1", "@vue-flow/node-resizer": "^1.5.1",
"@vue-flow/node-toolbar": "^1.1.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": "^5.7.0",
"@wangeditor-next/editor-for-vue": "^5.1.14", "@wangeditor-next/editor-for-vue": "^5.1.14",
"axios": "^1.15.0", "axios": "^1.16.0",
"canvas-confetti": "^1.9.4", "canvas-confetti": "^1.9.4",
"chart.js": "^4.5.1", "chart.js": "^4.5.1",
"codemirror": "^6.0.2", "codemirror": "^6.0.2",
@@ -31,29 +39,29 @@
"date-fns": "^4.1.0", "date-fns": "^4.1.0",
"fflate": "^0.8.2", "fflate": "^0.8.2",
"highlight.js": "^11.11.1", "highlight.js": "^11.11.1",
"md-editor-v3": "^6.4.2", "md-editor-v3": "^6.5.0",
"mermaid": "^11.14.0", "mermaid": "^11.14.0",
"naive-ui": "^2.44.1", "naive-ui": "^2.44.1",
"nanoid": "^5.1.7", "nanoid": "^5.1.11",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"pinia": "^3.0.4", "pinia": "^3.0.4",
"skulpt": "^1.2.0", "skulpt": "^1.2.0",
"vue": "^3.5.32", "vue": "^3.5.33",
"vue-chartjs": "^5.3.3", "vue-chartjs": "^5.3.3",
"vue-codemirror": "^6.1.1", "vue-codemirror": "^6.1.1",
"vue-router": "^5.0.4", "vue-router": "^5.0.6",
"y-codemirror.next": "^0.3.5", "y-codemirror.next": "^0.3.5",
"y-webrtc": "^10.3.0", "y-webrtc": "^10.3.0",
"yjs": "^13.6.30" "yjs": "^13.6.30"
}, },
"devDependencies": { "devDependencies": {
"@iconify/vue": "^5.0.0", "@iconify/vue": "^5.0.0",
"@rsbuild/core": "^1.7.5", "@rsbuild/core": "^2.0.3",
"@rsbuild/plugin-vue": "^1.2.7", "@rsbuild/plugin-vue": "^1.2.7",
"@types/canvas-confetti": "^1.9.0", "@types/canvas-confetti": "^1.9.0",
"@types/node": "^25.6.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-auto-import": "^21.0.0",
"unplugin-vue-components": "^32.0.0" "unplugin-vue-components": "^32.0.0"
} }

View File

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

View File

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

View File

@@ -10,6 +10,26 @@ body {
--md-theme-color: var(--n-text-color) !important; --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-old(root),
::view-transition-new(root) { ::view-transition-new(root) {
animation: none; animation: none;

View File

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

View File

@@ -72,15 +72,19 @@ export function useMermaidConverter() {
// 添加样式定义来区分不同类型的节点 // 添加样式定义来区分不同类型的节点
mermaid += "\n" mermaid += "\n"
mermaid += 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 += 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 += 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 += 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 += 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" mermaid += "\n"
// 为节点应用样式 // 为节点应用样式
@@ -90,8 +94,10 @@ export function useMermaidConverter() {
switch (originalType) { switch (originalType) {
case "start": case "start":
mermaid += ` class ${nodeId} startNode\n`
break
case "end": case "end":
mermaid += ` class ${nodeId} startEnd\n` mermaid += ` class ${nodeId} endNode\n`
break break
case "input": case "input":
mermaid += ` class ${nodeId} input\n` mermaid += ` class ${nodeId} input\n`
@@ -100,9 +106,11 @@ export function useMermaidConverter() {
mermaid += ` class ${nodeId} output\n` mermaid += ` class ${nodeId} output\n`
break break
case "decision": case "decision":
case "loop":
mermaid += ` class ${nodeId} decision\n` mermaid += ` class ${nodeId} decision\n`
break break
case "loop":
mermaid += ` class ${nodeId} loop\n`
break
default: default:
mermaid += ` class ${nodeId} process\n` mermaid += ` class ${nodeId} process\n`
} }

View File

@@ -15,7 +15,6 @@ import { renderTableTitle } from "utils/renders"
import ProblemStatus from "./components/ProblemStatus.vue" import ProblemStatus from "./components/ProblemStatus.vue"
import AuthorSelect from "shared/components/AuthorSelect.vue" import AuthorSelect from "shared/components/AuthorSelect.vue"
import ProblemListTitle from "./components/ProblemListTitle.vue" import ProblemListTitle from "./components/ProblemListTitle.vue"
import { labelRect } from "mermaid/dist/rendering-util/rendering-elements/shapes/labelRect"
interface Tag { interface Tag {
id: number id: number
@@ -221,12 +220,12 @@ function rowProps(row: ProblemFiltered) {
<template> <template>
<n-flex vertical size="large"> <n-flex vertical size="large">
<n-flex justify="space-between"> <div class="problem-list-toolbar">
<n-space> <n-space>
<n-form :show-feedback="false" inline label-placement="left"> <n-form :show-feedback="false" inline label-placement="left">
<n-form-item label="难度"> <n-form-item label="难度">
<n-select <n-select
style="width: 120px" style="width: 100px"
v-model:value="query.difficulty" v-model:value="query.difficulty"
:options="difficultyOptions" :options="difficultyOptions"
/> />
@@ -238,7 +237,7 @@ function rowProps(row: ProblemFiltered) {
<n-form :show-feedback="false" inline label-placement="left"> <n-form :show-feedback="false" inline label-placement="left">
<n-form-item label="排序"> <n-form-item label="排序">
<n-select <n-select
style="width: 120px" style="width: 100px"
v-model:value="query.sort" v-model:value="query.sort"
:options="sortOptions" :options="sortOptions"
/> />
@@ -274,8 +273,8 @@ function rowProps(row: ProblemFiltered) {
</n-form-item> </n-form-item>
</n-form> </n-form>
</n-space> </n-space>
<Hitokoto v-if="isDesktop" /> <Hitokoto v-if="isDesktop" class="problem-list-hitokoto" />
</n-flex> </div>
<n-collapse-transition :show="showTag"> <n-collapse-transition :show="showTag">
<n-flex> <n-flex>
<n-tag <n-tag
@@ -304,4 +303,32 @@ function rowProps(row: ProblemFiltered) {
/> />
</template> </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>

View File

@@ -26,27 +26,44 @@ onMounted(receive)
@click="receive" @click="receive"
v-if="hitokoto.sentence" 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> </div>
</template> </template>
<style scoped> <style scoped>
.hitokoto { .hitokoto {
cursor: pointer; 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 { .hitokoto .sentence {
max-width: 400px; text-align: right;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
} }
.hitokoto .from { .hitokoto .from {
float: right; 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; font-size: 12px;
line-height: 18px;
color: grey; color: grey;
} }
</style> </style>

View File

@@ -1,5 +1,236 @@
import { getRandomId } from "utils/functions" 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() { export function useMermaid() {
// 渲染状态 // 渲染状态
const renderError = ref<string | null>(null) const renderError = ref<string | null>(null)
@@ -15,7 +246,8 @@ export function useMermaid() {
mermaid.initialize({ mermaid.initialize({
startOnLoad: false, startOnLoad: false,
securityLevel: "strict", securityLevel: "strict",
theme: "default", theme: "base",
themeVariables: mermaidThemeVariables,
}) })
} }
return mermaid return mermaid
@@ -37,6 +269,7 @@ export function useMermaid() {
const id = `mermaid-${getRandomId()}` const id = `mermaid-${getRandomId()}`
const { svg } = await mermaid.render(id, mermaidCode) const { svg } = await mermaid.render(id, mermaidCode)
container.innerHTML = svg container.innerHTML = svg
applyFlowchartDisplayStyle(container)
} }
} catch (error) { } catch (error) {
renderError.value = renderError.value =

14
tsconfig.app.json Normal file
View File

@@ -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"]
}

View File

@@ -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" }]
} }

View File

@@ -1,9 +1,24 @@
{ {
"compilerOptions": { "compilerOptions": {
"composite": true, "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext", "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"] "include": ["rsbuild.config.ts"]
} }