feat(流程图): AI 点评改成拿例子和测试数据在图上走一遍，同一张图不能再原样重交抽等级

原来让 AI 按逻辑 40 / 完整 30 / 规范 20 / 清晰 10 打总分：同一张图交两次能差 35 分
（有一张 C 再交变 S），22% 的提交和上一次一模一样；评语里写 node_9 这种学生看不到的编号。
照画布稿 FlowResFail / FlowResPass：
- AI 拿题目的例子和最多 3 组测试数据，从开始照着图走到结束，逐组说输出什么、对不对、
  最先错在哪个框；全对 A，全对且写法挑不出毛病 S，走对一半以上 B，否则 C
- 结果页签：「3 组走对 2 组」，逐组 ✓ / ✗，点开看「你的图输出 / 应该输出」，画布上按先后
  编号亮出这一组走过的框、错的那个标红；图一改就不亮，载回那一版又能亮
- 画布和上次评完的那张一模一样时「交给 AI 点评」灰掉；后端也兜着：同一道题一模一样的图
  直接照搬上次走例子的结果，不再问 AI
- 题目一组例子、测试数据都没有时退回老的四项分；老提交照旧按四项分显示
- 历次等级、提交列表的胶囊只写等级，不写分数

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

apps/web/src/shared/components/FlowchartCases.vue

@@ -0,0 +1,307 @@
+<script setup lang="ts">
+import type { FlowchartCaseReport } from "@oj2/contract"
+import { useThemeVars } from "naive-ui"
+
+/**
+ * 流程图「走例子」的逐组结果（设计稿 FlowResFail / FlowResPass）：每组一行，✓ / ✗、名字、输入；
+ * 点一组展开「你的图输出 / 应该输出」。题目页里点一组还会在画布上亮出它走过的路
+ * （selected 交给外面处理）；提交列表里只是展开看。
+ *
+ * 全部走对时收成一排小标签，地方让给「照着它写代码」。
+ */
+const { report } = defineProps<{ report: FlowchartCaseReport }>()
+const selected = defineModel<number | null>("selected", { default: null })
+
+const theme = useThemeVars()
+
+const allPassed = computed(() => report.passed === report.total)
+
+function oneLine(text: string) {
+  return text.replace(/\n/g, " ")
+}
+
+/** 你的图多出来、或者和应该输出对不上的那几行标红 */
+function outputLines(output: string, expected: string) {
+  const want = new Set(expected.split("\n").map((line) => line.trim()))
+  return (output ? output.split("\n") : []).map((line) => ({
+    text: line,
+    off: !want.has(line.trim()),
+  }))
+}
+
+function toggle(index: number) {
+  selected.value = selected.value === index ? null : index
+}
+</script>
+
+<template>
+  <div v-if="allPassed" class="chips">
+    <button
+      v-for="(row, index) in report.cases"
+      :key="row.name"
+      type="button"
+      class="chip"
+      :class="{ active: selected === index }"
+      :title="`输入：${oneLine(row.input)}`"
+      @click="toggle(index)"
+    >
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M5 12.5l4.5 4.5L19 7.5" />
+      </svg>
+      {{ row.name }}
+    </button>
+  </div>
+
+  <div v-else class="cases">
+    <div
+      v-for="(row, index) in report.cases"
+      :key="row.name"
+      class="case"
+      :class="{ open: selected === index }"
+    >
+      <button
+        type="button"
+        class="case-row"
+        :aria-expanded="selected === index"
+        @click="toggle(index)"
+      >
+        <span
+          class="mark"
+          :class="row.ok ? 'ok' : 'bad'"
+          :aria-label="row.ok ? '走对了' : '没走对'"
+        >
+          <svg
+            v-if="row.ok"
+            width="13"
+            height="13"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M5 12.5l4.5 4.5L19 7.5" />
+          </svg>
+          <svg
+            v-else
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.6"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <path d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        </span>
+        <span class="name">{{ row.name }}</span>
+        <span class="input">{{ oneLine(row.input) }}</span>
+        <span v-if="!row.ok && selected !== index" class="why">{{ row.why }}</span>
+      </button>
+      <div v-if="selected === index" class="detail">
+        <div class="outputs">
+          <div class="output">
+            <span class="label">你的图输出</span>
+            <div class="box" :class="{ wrong: !row.ok }">
+              <div
+                v-for="(line, i) in outputLines(row.output, row.expected)"
+                :key="i"
+                class="line"
+                :class="{ off: !row.ok && line.off }"
+              >
+                {{ line.text || " " }}
+              </div>
+              <div v-if="!row.output" class="line empty">（什么也没输出）</div>
+            </div>
+          </div>
+          <div class="output">
+            <span class="label">应该输出</span>
+            <div class="box">
+              <div v-for="(line, i) in row.expected.split('\n')" :key="i" class="line">
+                {{ line || " " }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <p v-if="row.why" class="why-full">{{ row.why }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 9px;
+  border: 1px solid transparent;
+  border-radius: 13px;
+  background: rgba(24, 160, 88, 0.12);
+  color: v-bind("theme.successColorPressed");
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.chip.active {
+  border-color: v-bind("theme.successColor");
+}
+
+.cases {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.case {
+  border: 1px solid transparent;
+  border-radius: 6px;
+}
+
+.case.open {
+  border-color: v-bind("theme.dividerColor");
+}
+
+.case-row {
+  width: 100%;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  color: v-bind("theme.textColor1");
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.case-row:hover,
+.case.open .case-row {
+  background: rgba(128, 128, 128, 0.08);
+}
+
+.mark {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mark.ok {
+  background: rgba(24, 160, 88, 0.14);
+  color: v-bind("theme.successColorPressed");
+}
+
+.mark.bad {
+  background: rgba(208, 48, 80, 0.12);
+  color: v-bind("theme.errorColor");
+}
+
+.name {
+  flex: none;
+  width: 52px;
+  color: v-bind("theme.textColor2");
+}
+
+.input {
+  flex: none;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--oj-code-font, Consolas, Monaco, monospace);
+}
+
+.why {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: v-bind("theme.textColor2");
+}
+
+.detail {
+  padding: 8px 10px 10px;
+}
+
+.outputs {
+  display: flex;
+  gap: 10px;
+}
+
+.output {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label {
+  font-size: 12px;
+  color: v-bind("theme.textColor3");
+}
+
+.box {
+  padding: 6px 4px;
+  border-radius: 4px;
+  background: rgba(128, 128, 128, 0.08);
+  font-family: var(--oj-code-font, Consolas, Monaco, monospace);
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.box.wrong {
+  background: rgba(208, 48, 80, 0.06);
+}
+
+.line {
+  padding: 0 6px;
+  border-radius: 2px;
+}
+
+.line.off {
+  background: rgba(208, 48, 80, 0.16);
+}
+
+.line.empty {
+  color: v-bind("theme.textColor3");
+}
+
+.why-full {
+  margin: 8px 0 0;
+  font-size: 14px;
+  line-height: 1.7;
+}
+</style>

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

@@ -9,8 +9,10 @@ import {
   insertStep,
   parseDoc,
   removeStep,
+  signature,
   STEP_LABEL,
   type FlowDoc,
+  type FlowHighlight,
   type StepKind,
 } from "./model"
 import { layoutDoc, PLACEHOLDER, type LaidNode, type LaidSlot } from "./layout"
@@ -534,6 +536,40 @@ function miniPoints(kind: StepKind) {
   return "15,1 25,6 15,11 5,6"
 }
 
+// ==================== 走例子的路径 ====================
+
+/**
+ * 结果页签里点了某一组数据：亮出它在图上走过的框（按第一次经过的先后编号），最先出问题的
+ * 那个标红，没走到的变淡（设计稿 FlowResFail）。图一改就收掉 —— 路径是按交上去那一版走的
+ */
+const highlightSet = shallowRef<{ value: FlowHighlight; shape: string } | null>(null)
+/** 记下亮的时候图长什么样，之后不一样了就不亮（不用 watch 去清：进页面读草稿也会改 doc） */
+const highlight = computed(() =>
+  highlightSet.value && highlightSet.value.shape === signature(doc.value)
+    ? highlightSet.value.value
+    : null,
+)
+const stepNo = computed(() => new Map((highlight.value?.order ?? []).map((id, i) => [id, i + 1])))
+
+function setHighlight(next: FlowHighlight | null) {
+  highlightSet.value = next ? { value: next, shape: signature(doc.value) } : null
+  const target = next?.bad ?? next?.order.at(-1)
+  if (target) nextTick(() => reveal(target))
+}
+
+function nodeState(node: LaidNode) {
+  if (!highlight.value) return ""
+  if (node.id === highlight.value.bad) return "bad"
+  return stepNo.value.has(node.id) ? "onpath" : "dim"
+}
+
+/** 编号圆点的位置：方框贴在左上角，菱形挪到顶点右边（左边是「是」） */
+function badgeAt(node: LaidNode) {
+  if (node.kind === "if" || node.kind === "while")
+    return { x: node.x + node.w / 2 + 16, y: node.y + 2 }
+  return { x: node.x - 2, y: node.y + 2 }
+}
+
 // ==================== 对外 ====================
 
 /**
@@ -552,7 +588,7 @@ function setDoc(next: FlowDoc) {
   fitSoon()
 }
 
-defineExpose({ getDoc, setDoc, undo, redo, clear, canUndo, canRedo, savedAt })
+defineExpose({ getDoc, setDoc, undo, redo, clear, setHighlight, canUndo, canRedo, savedAt })
 </script>
 
 <template>
@@ -635,7 +671,7 @@ defineExpose({ getDoc, setDoc, undo, redo, clear, canUndo, canRedo, savedAt })
           v-for="node in layout.nodes"
           :key="node.id"
           class="node"
-          :class="{ editable: editable(node), selected: node.id === selectedId }"
+          :class="[{ editable: editable(node), selected: node.id === selectedId }, nodeState(node)]"
           @pointerdown.stop
           @click.stop="onNodeClick(node)"
         >
@@ -679,6 +715,14 @@ defineExpose({ getDoc, setDoc, undo, redo, clear, canUndo, canRedo, savedAt })
             {{ nodeLabel(node) }}
           </text>
         </g>
+        <template v-for="node in layout.nodes" :key="`b${node.id}`">
+          <g v-if="stepNo.has(node.id)" class="badge" aria-hidden="true">
+            <circle :cx="badgeAt(node).x" :cy="badgeAt(node).y" r="10" />
+            <text :x="badgeAt(node).x" :y="badgeAt(node).y + 4" text-anchor="middle">
+              {{ stepNo.get(node.id) }}
+            </text>
+          </g>
+        </template>
       </svg>
 
       <button
@@ -862,6 +906,33 @@ defineExpose({ getDoc, setDoc, undo, redo, clear, canUndo, canRedo, savedAt })
   stroke-width: 2.6;
 }
 
+.node.dim {
+  opacity: 0.35;
+}
+
+.node.onpath > rect,
+.node.onpath > polygon {
+  stroke: v-bind("theme.textColor1");
+  stroke-width: 2.4;
+}
+
+.node.bad > rect,
+.node.bad > polygon {
+  stroke: #d03050;
+  stroke-width: 2.6;
+  fill: rgba(208, 48, 80, 0.12);
+}
+
+.badge circle {
+  fill: v-bind("theme.textColor1");
+}
+
+.badge text {
+  font-size: 12px;
+  font-weight: 700;
+  fill: v-bind("theme.cardColor");
+}
+
 .placeholder {
   opacity: 0.5;
 }

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

@@ -1,4 +1,12 @@
-import type { Branch, FlowDoc, FlowStep, Slot, StepKind } from "./model"
+import {
+  END_ID,
+  START_ID,
+  type Branch,
+  type FlowDoc,
+  type FlowStep,
+  type Slot,
+  type StepKind,
+} from "./model"
 
 /**
  * 结构树 → 坐标。纯函数，每次改动整张重排（13 个框的图不到一毫秒）。
@@ -280,9 +288,9 @@ export function layoutDoc(doc: FlowDoc, measure: Measure): Layout {
   }
 
   const items: Item[] = [
-    { kind: "start", id: "__start", text: "开始" },
+    { kind: "start", id: START_ID, text: "开始" },
     ...doc.steps,
-    { kind: "end", id: "__end", text: "结束" },
+    { kind: "end", id: END_ID, text: "结束" },
   ]
   const ext = measureBlock(items)
   // 竖线和 + 的位置跟着 doc.steps 走：空图时开始和结束之间也要有一个 +

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

@@ -37,6 +37,16 @@ export interface Slot {
   index: number
 }
 
+/** 画布上亮出某一组数据走过的路：order 是按先后经过的框，bad 是最先出问题的那个 */
+export interface FlowHighlight {
+  order: string[]
+  bad: string | null
+}
+
+/** 开始、结束在画布上的 id（它们不进数据） */
+export const START_ID = "__start"
+export const END_ID = "__end"
+
 export const STEP_LABEL: Record<StepKind, string> = {
   input: "输入",
   output: "输出",
@@ -196,6 +206,23 @@ function escapeLabel(raw: string) {
   return raw.replace(/#/g, "#35;").replace(/"/g, "#quot;").replace(/\r?\n/g, "<br/>")
 }
 
+/**
+ * Mermaid 里第 n 个框（nN）是画布上的哪一步：开始、各步按先序（判断先「是」再「否」）、结束。
+ * 和下面 toMermaid 建框的顺序一致 —— AI 走例子时报的是 nN，结果页签靠它在画布上亮出路径
+ */
+export function mermaidOrder(doc: FlowDoc): string[] {
+  const order = [START_ID]
+  const walk = (steps: FlowStep[]) => {
+    for (const step of steps) {
+      order.push(step.id)
+      for (const child of children(step)) walk(child)
+    }
+  }
+  walk(doc.steps)
+  order.push(END_ID)
+  return order
+}
+
 export function toMermaid(doc: FlowDoc): string {
   const lines: string[] = ["flowchart TD"]
   const classes: string[] = []