feat(布置作业): 能布置「画流程图」「先画再写」，看板分清卡在画图还是写代码

布置时多一个「做什么」：写代码 / 先画再写 / 画流程图（只能选打开了画流程图的题）。
- 先画再写：一道题图画到 A/S、代码也交对才算做完；学生画一道写一道、全画完再写都行，
  打开题目自动停在该做的那一步（图没画对停画布，画对了换到布置的语言）
- 也能分开布置：先一节画流程图，看板上「用这几道题写代码」再开一节；学生那边把今天
  几节课的要求合起来，还没画完的照样看得到要画
- 看板格子是一条进度：图 1/6 → 空心「图 ✓」→ 代码 ✗ → ✓，先写代码没画图的写「缺图」；
  卡在画图上的点开讲那张图（要改的框标红 + AI 的哪里错/怎么改），按走对几组归堆
- 写代码的课不再拿画对的流程图顶替做完；数据统计里画流程图的课数流程图提交

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

apps/web/src/utils/flowchart.ts

@@ -45,3 +45,29 @@ export function flowchartVerdict(report: FlowchartCaseReport, grade: string | nu
 export function caseHeadline(report: FlowchartCaseReport) {
   return report.passed === report.total ? `${report.total} 组全部走对` : `${report.total} 组走对 ${report.passed} 组`
 }
+
+/**
+ * 图填满图框：大图照旧缩小，小图也放大，但最多到原尺寸的 1.5 倍（再大字就粗笨了）。
+ * 原来只缩不放，比大小这种五六个框的图在一大块空白中间只占一小团
+ */
+export function fitFlowchartGraph(el: HTMLElement | null) {
+  const svg = el?.querySelector('svg')
+  const w = Number.parseFloat(svg?.getAttribute('width') ?? '')
+  const h = Number.parseFloat(svg?.getAttribute('height') ?? '')
+  if (!svg || !w || !h) return
+  if (!svg.getAttribute('viewBox')) svg.setAttribute('viewBox', `0 0 ${w} ${h}`)
+  svg.style.width = '100%'
+  svg.style.height = '100%'
+  svg.style.maxWidth = `${w * 1.5}px`
+  svg.style.maxHeight = `${h * 1.5}px`
+}
+
+/**
+ * 要改的那个框标红（加 oj-focus，颜色由用的地方的样式定）：AI 对着答案指出的，没有就退回
+ * 程序找到的第一处出错的框。pele 把 Mermaid 的框号放在节点 <g> 的 data-id 上
+ */
+export function markFlowchartFocus(el: HTMLElement | null, report: FlowchartCaseReport | null) {
+  const focus = report?.focus ?? report?.cases.find((row) => !row.ok)?.wrongAt
+  if (!el || !focus) return
+  el.querySelector(`.pele-node[data-id="${focus}"]`)?.classList.add('oj-focus')
+}