feat(题目): 参考流程图不用再点开，摊在例子后面，画法和学生自己画的图一样

原来折成一条「老师给的参考流程图」要点开，用 Mermaid 画、整张缩进左栏后字只剩十来像素。
现在默认摊开、放在例子后面（长图不把例子挤出第一屏），用画流程图那套排版和符号画
（FlowchartView，颜色形状和画布共用 paint.ts）；只有手写 Mermaid 的老图照旧走 Mermaid。
出题页预览和说明文字一起改。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/admin/problem/components/CodePreview.vue

@@ -5,11 +5,15 @@ import { useMermaid } from "shared/composables/useMermaid"
 import { DIFFICULTY, SOURCES } from "utils/constants"
 import { getTagColor } from "utils/functions"
 import type { AstRules, BlankProblem, LANGUAGE } from "utils/types"
+import type { FlowDoc } from "shared/components/FlowchartEditor/model"
 import type { AstCheckState, FlowchartMode, PreviewTab } from "./editorTypes"
 import type { TemplateParts } from "./codeTemplate"
 import { isBlankHtml } from "./problemForm"
 
 const CodeEditor = defineAsyncComponent(() => import("shared/components/CodeEditor.vue"))
+const FlowchartView = defineAsyncComponent(
+  () => import("shared/components/FlowchartEditor/FlowchartView.vue"),
+)
 
 /**
  * 编程题出题页的右栏：学生打开这道题看到的样子（设计稿「编程题出题页」B）。
@@ -35,6 +39,8 @@ const props = defineProps<{
   astChecks: AstCheckState
   flowchartMode: FlowchartMode
   mermaidCode: string
+  /** 画布画的参考图；有就照学生题面那样画（FlowchartView），老题手写的 Mermaid 才走 mermaidCode */
+  flowchartDoc: FlowDoc | null
 }>()
 
 const tab = defineModel<PreviewTab>("tab", { required: true })
@@ -84,6 +90,8 @@ const editorCode = computed(() => {
 
 // ---------------------------------------------------------------- 流程图
 
+const referenceDoc = computed(() => (props.flowchartDoc?.steps.length ? props.flowchartDoc : null))
+
 const container = useTemplateRef<HTMLElement>("chart")
 const { renderFlowchart, renderError, renderSuccess } = useMermaid()
 
@@ -164,11 +172,6 @@ onMounted(() => nextTick(render))
         </section>
       </div>
 
-      <button v-if="flowchartMode === 'show'" type="button" class="fold" @click="tab = 'flowchart'">
-        <span>›</span><b>老师给的参考流程图</b>
-        <span class="muted">学生点开才看到 · 在「流程图」里看</span>
-      </button>
-
       <div class="exampleHead">
         <h3 class="title">例子</h3>
         <div class="grow"></div>
@@ -188,6 +191,15 @@ onMounted(() => nextTick(render))
         {{ bigData ? "在左边加一个例子" : "在左边的测试数据里勾几组「当例子」" }}
       </p>
 
+      <template v-if="flowchartMode === 'show'">
+        <h3 class="title">参考流程图</h3>
+        <div v-if="referenceDoc" class="reference">
+          <FlowchartView :doc="referenceDoc" />
+        </div>
+        <p v-else-if="mermaidCode.trim()" class="muted small">老题手写的图，在「流程图」里看</p>
+        <p v-else class="placeholder">还没画</p>
+      </template>
+
       <template v-if="!isBlankHtml(hint)">
         <h3 class="title">提示</h3>
         <Markdown html :content="hint" />
@@ -250,11 +262,15 @@ onMounted(() => nextTick(render))
         学生在题目页右边自己画，交上去按例子和测试数据评
       </p>
       <template v-else>
-        <p class="muted small">学生在题面里点开「老师给的参考流程图」看到的是：</p>
-        <p v-if="!mermaidCode.trim()" class="placeholder">还没画</p>
-        <div v-if="renderError" class="chartError">画不出来：{{ renderError }}</div>
+        <p class="muted small">学生在题面例子下面看到的是：</p>
+        <div v-if="referenceDoc" class="reference">
+          <FlowchartView :doc="referenceDoc" />
+        </div>
+        <p v-else-if="!mermaidCode.trim()" class="placeholder">还没画</p>
+        <div v-else-if="renderError" class="chartError">画不出来：{{ renderError }}</div>
       </template>
-      <div v-show="flowchartMode === 'show'" ref="chart" class="chart"></div>
+      <!-- 老题手写的 Mermaid 才露出来；有结构树时也照常渲染，保存按钮要它报「画得出来」 -->
+      <div v-show="flowchartMode === 'show' && !referenceDoc" ref="chart" class="chart"></div>
     </div>
   </aside>
 </template>
@@ -361,19 +377,11 @@ onMounted(() => nextTick(render))
   color: v-bind("theme.textColor3");
 }
 
-.fold {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 38px;
-  padding: 0 12px;
-  border: 1px solid v-bind("theme.borderColor");
+/* 参考流程图：和学生题面（ProblemContent.vue）同一种浅灰底 */
+.reference {
   border-radius: 6px;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
+  background-color: rgba(128, 128, 128, 0.05);
+  padding: 16px 12px;
 }
 
 .exampleHead {

apps/web/src/admin/problem/detail.vue

@@ -1211,7 +1211,7 @@ onMounted(async () => {
               <n-radio value="show" />
               <span>
                 <b>给学生看一张参考流程图</b>
-                <small>题面里多一条「老师给的参考流程图」，默认收着，学生点开才看</small>
+                <small>题面里例子下面摊开一张参考流程图</small>
               </span>
             </label>
             <label class="mode" :class="{ on: form.flowchartMode === 'draw' }">
@@ -1355,6 +1355,7 @@ onMounted(async () => {
       :ast-checks="astChecks"
       :flowchart-mode="form.flowchartMode"
       :mermaid-code="previewMermaid"
+      :flowchart-doc="form.flowchartDoc"
       @render-state="mermaidOk = $event"
       @collapse="previewCollapsed = true"
     />

apps/web/src/oj/problem/components/ProblemContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isSqlProblem } from "@oj2/contract"
+import { isSqlProblem, parseFlowDoc } from "@oj2/contract"
 import { useThemeVars } from "naive-ui"
 import { storeToRefs } from "pinia"
 import { useProblemStore } from "oj/store/problem"
@@ -15,6 +15,9 @@ import { useUserStore } from "shared/store/user"
 import { useProblemPageContext } from "../composables/problemPageContext"
 
 const ProblemFlowchart = defineAsyncComponent(() => import("./ProblemFlowchart.vue"))
+const FlowchartView = defineAsyncComponent(
+  () => import("shared/components/FlowchartEditor/FlowchartView.vue"),
+)
 const MyFlowchart = defineAsyncComponent(() => import("./MyFlowchart.vue"))
 
 const theme = useThemeVars()
@@ -45,25 +48,29 @@ const myStatus = computed(() => {
 // 不写「限时 1 秒 / 内存 256MB」：中职学生看了只会犯迷糊，超时、超内存判出来时结果页签里自有说明
 
 // ==================== 流程图小节 ====================
-// 同一个位置二选一：老师给的参考图（showFlowchart，默认折叠），或者学生自己画到 A/S 的
-// 那张（allowFlowchart）。两个开关在后台是互斥的（admin/problem/detail.vue）；后端在
-// allowFlowchart 为真时会把 mermaidCode 置成 null，不能把标准答案下发给正要自己画图的学生。
+// 老师给的参考图（showFlowchart）和学生自己画到 A/S 的那张（allowFlowchart）只会有一个：
+// 两个开关在后台是互斥的（admin/problem/detail.vue）；后端在 allowFlowchart 为真时会把
+// mermaidCode 置成 null，不能把标准答案下发给正要自己画图的学生。
 const canShowReferenceFlowchart = computed(
   () => !!problem.value?.showFlowchart && !!problem.value?.mermaidCode,
 )
+/**
+ * 参考图用画流程图那套排法画（设计稿「参考流程图」C）。只有手写 Mermaid、没有结构树的老图
+ * （恢复老备份才会有）退回 Mermaid
+ */
+const referenceDoc = computed(() => {
+  const doc = parseFlowDoc(problem.value?.flowchartData)
+  return doc?.steps.length ? doc : null
+})
 const myFlowchartStore = useMyFlowchartStore()
 const flowchartStore = useFlowchartStore()
 const userStore = useUserStore()
 const myFlowchartZoom = ref(false)
-/** 参考流程图默认折叠；自己画的那张默认展开、可以收起（设计稿「流程图 A 级之后」） */
-const referenceOpen = ref(false)
+/** 自己画的那张默认展开、可以收起（设计稿「流程图 A 级之后」） */
 const myFlowchartOpen = ref(true)
 watch(
   () => problem.value?._id,
-  () => {
-    referenceOpen.value = false
-    myFlowchartOpen.value = true
-  },
+  () => (myFlowchartOpen.value = true),
 )
 
 /** 流程图画到 A / S 了：标题下给个「流程图 A 级」 */
@@ -252,39 +259,8 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
       </section>
     </div>
 
-    <!-- 老师给的参考流程图：一行可以点开的条，默认折叠 -->
-    <section v-if="canShowReferenceFlowchart" class="block">
-      <button
-        type="button"
-        class="fold"
-        :aria-expanded="referenceOpen"
-        @click="referenceOpen = !referenceOpen"
-      >
-        <svg
-          class="fold-caret"
-          :class="{ open: referenceOpen }"
-          width="12"
-          height="12"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-        >
-          <path d="M9 6l6 6-6 6" />
-        </svg>
-        <span class="fold-title">老师给的参考流程图</span>
-        <span class="fold-note">{{ referenceOpen ? "收起" : "点开看" }}</span>
-      </button>
-      <div v-if="referenceOpen" class="fold-body">
-        <ProblemFlowchart />
-      </div>
-    </section>
-
     <!-- 自己画到 A/S 的那张：默认展开一小块，可以放大、可以收起 -->
-    <section v-else-if="myFlowchartStore.showing" class="block">
+    <section v-if="!canShowReferenceFlowchart && myFlowchartStore.showing" class="block">
       <div class="block-head">
         <h3 class="title">你画的流程图</h3>
         <n-button text type="primary" size="small" @click="myFlowchartZoom = true">
@@ -377,6 +353,18 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
       </template>
     </SqlProblemData>
 
+    <!--
+      老师给的参考流程图：默认摊开，放在例子后面（设计稿「参考流程图」C）。原来在例子前面、
+      折成一条要点开 —— 摊开放前面的话，长图（1056 有一千来像素高）会把例子挤出第一屏
+    -->
+    <section v-if="canShowReferenceFlowchart" class="block">
+      <h3 class="title">参考流程图</h3>
+      <div class="reference-flowchart">
+        <FlowchartView v-if="referenceDoc" :doc="referenceDoc" />
+        <ProblemFlowchart v-else />
+      </div>
+    </section>
+
     <section v-if="problem.hint" class="block">
       <h3 class="title">提示</h3>
       <Markdown html :content="problem.hint" />
@@ -502,48 +490,11 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
   font-weight: 600;
 }
 
-/* 参考流程图：一行可以点开的条 */
-.fold {
-  width: 100%;
-  height: 38px;
-  box-sizing: border-box;
-  padding: 0 12px;
-  border: 1px solid v-bind("theme.dividerColor");
+/* 参考流程图：和例子的格子同一种浅灰底 */
+.reference-flowchart {
   border-radius: 6px;
-  background-color: rgba(128, 128, 128, 0.04);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-}
-
-.fold:hover {
-  border-color: v-bind("theme.borderColor");
-}
-
-.fold-caret {
-  flex: none;
-  transition: transform 0.15s;
-}
-
-.fold-caret.open {
-  transform: rotate(90deg);
-}
-
-.fold-title {
-  font-weight: 600;
-}
-
-.fold-note {
-  font-size: 13px;
-  color: v-bind("theme.textColor3");
-}
-
-.fold-body {
-  margin-top: 8px;
+  background-color: rgba(128, 128, 128, 0.05);
+  padding: 16px 12px;
 }
 
 .my-flowchart {

apps/web/src/shared/components/FlowchartEditor/FlowchartView.vue

@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import { useThemeVars } from "naive-ui"
+import type { FlowDoc } from "./model"
+import { layoutDoc } from "./layout"
+import { nodeLabel, shapePoints, useFlowPaint } from "./paint"
+
+/**
+ * 只看不改的流程图：和画流程图的画布同一套排版、形状、颜色（layoutDoc），没有 +、没有平移缩放。
+ * 题面里老师给的参考图、出题页的预览用它 —— 原来走 Mermaid，排法和学生画的那张不一样，
+ * 整张缩进左栏后字只剩十来像素。
+ *
+ * 宽度超过容器时整张按比例缩到正好放下（viewBox），不超过就按原大小居中。
+ */
+const { doc } = defineProps<{ doc: FlowDoc }>()
+
+const theme = useThemeVars()
+const { paint, lineColor } = useFlowPaint()
+
+const root = useTemplateRef<HTMLElement>("root")
+let measureCtx: CanvasRenderingContext2D | null = null
+const fontFamily = ref("")
+function measure(text: string) {
+  if (measureCtx) return measureCtx.measureText(text).width
+  let w = 0
+  for (const ch of text) w += ch.charCodeAt(0) > 0x2e80 ? 14 : 7.8
+  return w
+}
+onMounted(() => {
+  const family = getComputedStyle(root.value!).fontFamily
+  measureCtx = document.createElement("canvas").getContext("2d")
+  if (measureCtx) measureCtx.font = `14px ${family}`
+  fontFamily.value = family
+})
+
+const layout = computed(() => {
+  void fontFamily.value
+  return layoutDoc(doc, measure)
+})
+
+// 箭头的 marker 要全页唯一：出题页的预览里题面和「流程图」页签同时摆着两张
+const markerId = `flow-view-arrow-${useId()}`
+</script>
+
+<template>
+  <div ref="root" class="flow-view">
+    <svg
+      :viewBox="`0 0 ${layout.width} ${layout.height}`"
+      :style="{ width: `${layout.width}px` }"
+      role="img"
+      aria-label="流程图"
+      class="chart"
+    >
+      <defs>
+        <marker
+          :id="markerId"
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerWidth="5.5"
+          markerHeight="5.5"
+          orient="auto-start-reverse"
+        >
+          <path d="M0 0L10 5L0 10z" :fill="lineColor" />
+        </marker>
+      </defs>
+      <path
+        v-for="(d, i) in layout.lines"
+        :key="`l${i}`"
+        :d="d"
+        fill="none"
+        :stroke="lineColor"
+        stroke-width="1.6"
+      />
+      <path
+        v-for="(d, i) in layout.arrows"
+        :key="`a${i}`"
+        :d="d"
+        fill="none"
+        :stroke="lineColor"
+        stroke-width="1.6"
+        :marker-end="`url(#${markerId})`"
+      />
+      <circle
+        v-for="(p, i) in layout.dots"
+        :key="`d${i}`"
+        :cx="p.x"
+        :cy="p.y"
+        r="2.6"
+        :fill="lineColor"
+      />
+      <text
+        v-for="(t, i) in layout.labels"
+        :key="`t${i}`"
+        :x="t.x"
+        :y="t.y"
+        :text-anchor="t.anchor"
+        class="branch-label"
+      >
+        {{ t.text }}
+      </text>
+      <g v-for="node in layout.nodes" :key="node.id">
+        <rect
+          v-if="node.kind === 'start' || node.kind === 'end'"
+          :x="node.x"
+          :y="node.y"
+          :width="node.w"
+          :height="node.h"
+          :rx="node.h / 2"
+          :fill="paint(node.kind).fill"
+          :stroke="paint(node.kind).stroke"
+          stroke-width="1.6"
+        />
+        <rect
+          v-else-if="node.kind === 'process'"
+          :x="node.x"
+          :y="node.y"
+          :width="node.w"
+          :height="node.h"
+          rx="2"
+          :fill="paint(node.kind).fill"
+          :stroke="paint(node.kind).stroke"
+          stroke-width="1.6"
+        />
+        <polygon
+          v-else
+          :points="shapePoints(node)"
+          :fill="paint(node.kind).fill"
+          :stroke="paint(node.kind).stroke"
+          stroke-width="1.6"
+        />
+        <text
+          :x="node.x + node.w / 2"
+          :y="node.y + node.h / 2 + 5"
+          text-anchor="middle"
+          :fill="paint(node.kind).text"
+        >
+          {{ nodeLabel(node) }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+.flow-view {
+  display: flex;
+  justify-content: center;
+}
+
+.chart {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  font-family: inherit;
+  font-size: 14px;
+  overflow: visible;
+}
+
+.branch-label {
+  font-size: 13px;
+  fill: v-bind("theme.textColor2");
+}
+</style>

apps/web/src/shared/components/FlowchartEditor/index.vue

@@ -15,6 +15,7 @@ import {
   type StepKind,
 } from "./model"
 import { layoutDoc, PLACEHOLDER, type LaidNode, type LaidSlot } from "./layout"
+import { nodeLabel, shapePoints, useFlowPaint } from "./paint"
 
 /**
  * 画流程图（插入式）。设计稿：画布「画流程图重设计」页的 FlowEdB / FlowEdBLoop。
@@ -49,7 +50,7 @@ const model = defineModel<FlowDoc | null>("value", { default: null })
 
 const message = useMessage()
 const theme = useThemeVars()
-const isDark = useDark()
+const { isDark, paint, lineColor } = useFlowPaint()
 
 // ==================== 数据与历史 ====================
 
@@ -507,44 +508,8 @@ onUnmounted(() => document.removeEventListener("keydown", onKeyDown))
 
 // ==================== 颜色 ====================
 
-type Paint = { fill: string; stroke: string; text: string }
-const paints = computed<Record<string, Paint>>(() =>
-  isDark.value
-    ? {
-        terminal: { fill: "rgba(24,160,88,0.16)", stroke: "#3fbf7f", text: "#8fe0b4" },
-        io: { fill: "rgba(70,130,220,0.18)", stroke: "#5b8fdc", text: "#a9c6f2" },
-        process: { fill: "#26272b", stroke: "#8a8f98", text: "#e6e7ea" },
-        decision: { fill: "rgba(208,138,28,0.18)", stroke: "#e0a040", text: "#f2cd8c" },
-      }
-    : {
-        terminal: { fill: "#eef8f2", stroke: "#18a058", text: "#0c6b3b" },
-        io: { fill: "#eef4fd", stroke: "#2f6bc4", text: "#1d4f9c" },
-        process: { fill: "#ffffff", stroke: "#7d828a", text: "#1f2225" },
-        decision: { fill: "#fdf5e6", stroke: "#d08a1c", text: "#8a5200" },
-      },
-)
-function paint(kind: LaidNode["kind"]) {
-  if (kind === "start" || kind === "end") return paints.value.terminal!
-  if (kind === "input" || kind === "output") return paints.value.io!
-  if (kind === "if" || kind === "while") return paints.value.decision!
-  return paints.value.process!
-}
-const lineColor = computed(() => (isDark.value ? "#8a8f98" : "#7d828a"))
 const dotColor = computed(() => (isDark.value ? "#34363b" : "#e3e5e8"))
 
-function shapePoints(node: LaidNode) {
-  const { x, y, w, h } = node
-  if (node.kind === "if" || node.kind === "while")
-    return `${x + w / 2},${y} ${x + w},${y + h / 2} ${x + w / 2},${y + h} ${x},${y + h / 2}`
-  const s = 10
-  return `${x + s},${y} ${x + w},${y} ${x + w - s},${y + h} ${x},${y + h}`
-}
-
-function nodeLabel(node: LaidNode) {
-  if (node.kind === "start" || node.kind === "end") return node.text
-  return node.text.trim() || PLACEHOLDER[node.kind]
-}
-
 /** 菜单里的小图标：和画布上同一套形状 */
 function miniPoints(kind: StepKind) {
   if (kind === "input" || kind === "output") return "6,2 25,2 20,14 1,14"

apps/web/src/shared/components/FlowchartEditor/paint.ts

@@ -0,0 +1,48 @@
+import { PLACEHOLDER, type LaidNode } from "./layout"
+
+/**
+ * 框的颜色和形状：画流程图的画布（index.vue）和只看的图（FlowchartView.vue）共用一份，
+ * 两边才长得一样
+ */
+
+type Paint = { fill: string; stroke: string; text: string }
+
+const LIGHT: Record<string, Paint> = {
+  terminal: { fill: "#eef8f2", stroke: "#18a058", text: "#0c6b3b" },
+  io: { fill: "#eef4fd", stroke: "#2f6bc4", text: "#1d4f9c" },
+  process: { fill: "#ffffff", stroke: "#7d828a", text: "#1f2225" },
+  decision: { fill: "#fdf5e6", stroke: "#d08a1c", text: "#8a5200" },
+}
+const DARK: Record<string, Paint> = {
+  terminal: { fill: "rgba(24,160,88,0.16)", stroke: "#3fbf7f", text: "#8fe0b4" },
+  io: { fill: "rgba(70,130,220,0.18)", stroke: "#5b8fdc", text: "#a9c6f2" },
+  process: { fill: "#26272b", stroke: "#8a8f98", text: "#e6e7ea" },
+  decision: { fill: "rgba(208,138,28,0.18)", stroke: "#e0a040", text: "#f2cd8c" },
+}
+
+export function useFlowPaint() {
+  const isDark = useDark()
+  function paint(kind: LaidNode["kind"]) {
+    const paints = isDark.value ? DARK : LIGHT
+    if (kind === "start" || kind === "end") return paints.terminal!
+    if (kind === "input" || kind === "output") return paints.io!
+    if (kind === "if" || kind === "while") return paints.decision!
+    return paints.process!
+  }
+  const lineColor = computed(() => (isDark.value ? "#8a8f98" : "#7d828a"))
+  return { isDark, paint, lineColor }
+}
+
+/** 判断、循环是菱形，输入输出是平行四边形（处理、起止是 rect，不走这里） */
+export function shapePoints(node: LaidNode) {
+  const { x, y, w, h } = node
+  if (node.kind === "if" || node.kind === "while")
+    return `${x + w / 2},${y} ${x + w},${y + h / 2} ${x + w / 2},${y + h} ${x},${y + h / 2}`
+  const s = 10
+  return `${x + s},${y} ${x + w},${y} ${x + w - s},${y + h} ${x},${y + h}`
+}
+
+export function nodeLabel(node: LaidNode) {
+  if (node.kind === "start" || node.kind === "end") return node.text
+  return node.text.trim() || PLACEHOLDER[node.kind]
+}