Compare commits
13 Commits
0ca1a142a4
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| da75f50798 | |||
| ed3e9322b2 | |||
| 97917164ea | |||
| 59f3747496 | |||
| 86cc5cc500 | |||
| e8b9a190ec | |||
| 507d77a576 | |||
| 22b9405ed2 | |||
| 711c446f74 | |||
| e6e4d71b1c | |||
| 6ae879ba80 | |||
| 9137a12dc9 | |||
| f4b9f34ec8 |
1
.browserslistrc
Normal file
1
.browserslistrc
Normal file
@@ -0,0 +1 @@
|
|||||||
|
chrome >= 90
|
||||||
2
.github/workflows/deploy.yml
vendored
2
.github/workflows/deploy.yml
vendored
@@ -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
795
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
28
package.json
28
package.json
@@ -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"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -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 = {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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`
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
14
tsconfig.app.json
Normal 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"]
|
||||||
|
}
|
||||||
@@ -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" }]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user