fix(流程图): 点进去空白的 tab、以及「渲染成功」这个只进不出的开关

## 两个开关同时打开会做出一个空 tab

后端在 `allowFlowchart` 为真时把 `mermaidCode` 置成 null(不能把标准答案下发给
正要自己画图的学生,见 routes/problem.ts)。而前端 `tabOptions` 只看
`showFlowchart` 就把 "flowchart" 加进选项,面板那边却要求
`showFlowchart && mermaidCode` —— 两个开关都打开时,选项存在、面板不存在,
URL 里带 `?tab=flowchart` 就会选中一个渲染不出任何东西的页签。

三个断点条件还各不相同(两处要求两者都有,第三处只看 showFlowchart,那处会拿
null 去渲染 ProblemFlowchart)。统一成一个 `canShowFlowchart`。

后台那边把「显示标准流程图」在允许提交流程图时置灰并说明原因,再补一个 watch
把存量数据里两个都开着的情况纠正掉 —— 它们本来就是互斥的。

## 「渲染成功」只进不出

保存前的校验靠 `mermaidRenderSuccess`,而 MermaidEditor 只在成功时 emit、
这个 ref 也就只会从 false 变 true,永不复位。**先写对、再改坏,照样能存进库。**

改成上报渲染结果本身(`render-state`),并在 modelValue 一变就立刻打回
「未验证」,等防抖后的渲染真跑完再报结论 —— 只挂防抖那一支的话,改完 300ms 内
点保存读到的还是上一次的结论,刚改坏的代码会被当成校验通过。宁可让出题人多等
一下,也不能放脏数据进库。

实测:改动后 50ms 读到 false(此时保存会被拦),渲染完成后回到 true;
贴一段坏语法则一直是 false。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-27 06:27:02 -06:00
parent d10172f017
commit 9e41855610
3 changed files with 45 additions and 11 deletions

View File

@@ -53,9 +53,17 @@ const { shouldShowProblem } = storeToRefs(screenModeStore)
const { isMobile, isDesktop } = useBreakpoints()
// tab 选项和面板必须用同一个条件。后端在 allowFlowchart 为真时会把 mermaidCode
// 置成 null不能把标准答案下发给正要自己画图的学生只看 showFlowchart 的话,
// 两个开关同时打开就会做出一个「选项存在、面板不存在」的 tab —— URL 里带
// ?tab=flowchart 会选中一个渲染不出任何东西的页签。
const canShowFlowchart = computed(
() => !!problem.value?.showFlowchart && !!problem.value?.mermaidCode,
)
const tabOptions = computed(() => {
const options: string[] = ["content"]
if (problem.value?.showFlowchart) {
if (canShowFlowchart.value) {
options.push("flowchart")
}
@@ -159,7 +167,7 @@ watch(
<ProblemContent />
</n-tab-pane>
<n-tab-pane
v-if="problem.showFlowchart && problem.mermaidCode"
v-if="canShowFlowchart"
name="flowchart"
tab="流程图表"
>
@@ -211,7 +219,7 @@ watch(
<ProblemContent />
</n-tab-pane>
<n-tab-pane
v-if="problem.showFlowchart && problem.mermaidCode"
v-if="canShowFlowchart"
name="flowchart"
tab="流程图表"
>
@@ -251,7 +259,7 @@ watch(
<n-tab-pane name="content" tab="描述">
<ProblemContent />
</n-tab-pane>
<n-tab-pane v-if="problem.showFlowchart" name="flowchart" tab="流程">
<n-tab-pane v-if="canShowFlowchart" name="flowchart" tab="流程">
<ProblemFlowchart />
</n-tab-pane>
<n-tab-pane name="editor" tab="代码">