feat(题目): 参考流程图点一下能放大看，手机上宽图横着滚、按返回先关弹框

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

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

@@ -13,6 +13,8 @@ import { isFlowchartPass, useFlowchartStore } from "oj/store/flowchart"
 import { useMyFlowchartStore } from "shared/store/myFlowchart"
 import { useUserStore } from "shared/store/user"
 import { useProblemPageContext } from "../composables/problemPageContext"
+import { useBackClose } from "shared/composables/backClose"
+import { useBreakpoints } from "shared/composables/breakpoints"
 
 const ProblemFlowchart = defineAsyncComponent(() => import("./ProblemFlowchart.vue"))
 const FlowchartView = defineAsyncComponent(
@@ -62,6 +64,10 @@ const referenceDoc = computed(() => {
   const doc = parseFlowDoc(problem.value?.flowchartData)
   return doc?.steps.length ? doc : null
 })
+/** 点开放大看。手机上弹框是整屏的，按返回先关它 */
+const referenceZoom = ref(false)
+const { isMobile } = useBreakpoints()
+useBackClose(referenceZoom, isMobile)
 const myFlowchartStore = useMyFlowchartStore()
 const flowchartStore = useFlowchartStore()
 const userStore = useUserStore()
@@ -358,11 +364,32 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
       折成一条要点开 —— 摊开放前面的话，长图（1056 有一千来像素高）会把例子挤出第一屏
     -->
     <section v-if="canShowReferenceFlowchart" class="block">
+      <div class="block-head">
         <h3 class="title">参考流程图</h3>
-      <div class="reference-flowchart">
+        <n-button text type="primary" size="small" class="block-link" @click="referenceZoom = true">
+          放大看
+        </n-button>
+      </div>
+      <div
+        class="reference-flowchart"
+        role="button"
+        tabindex="0"
+        aria-label="放大看参考流程图"
+        @click="referenceZoom = true"
+        @keydown.enter="referenceZoom = true"
+      >
         <FlowchartView v-if="referenceDoc" :doc="referenceDoc" />
         <ProblemFlowchart v-else />
       </div>
+      <n-modal
+        v-model:show="referenceZoom"
+        preset="card"
+        title="参考流程图"
+        :style="{ maxWidth: '1000px' }"
+      >
+        <FlowchartView v-if="referenceDoc" :doc="referenceDoc" zoomed />
+        <ProblemFlowchart v-else />
+      </n-modal>
     </section>
 
     <section v-if="problem.hint" class="block">
@@ -492,6 +519,7 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
 
 /* 参考流程图：和例子的格子同一种浅灰底 */
 .reference-flowchart {
+  cursor: zoom-in;
   border-radius: 6px;
   background-color: rgba(128, 128, 128, 0.05);
   padding: 16px 12px;

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

@@ -10,8 +10,10 @@ import { nodeLabel, shapePoints, useFlowPaint } from "./paint"
  * 整张缩进左栏后字只剩十来像素。
  *
  * 宽度超过容器时整张按比例缩到正好放下（viewBox），不超过就按原大小居中。
+ * zoomed（点开放大的弹框里）：放大到 1.5 倍、放不下就缩回容器宽，但不小于原大小 ——
+ * 手机上宽图横着滚，不再缩成看不清的一团。
  */
-const { doc } = defineProps<{ doc: FlowDoc }>()
+const { doc, zoomed = false } = defineProps<{ doc: FlowDoc; zoomed?: boolean }>()
 
 const theme = useThemeVars()
 const { paint, lineColor } = useFlowPaint()
@@ -42,10 +44,14 @@ const markerId = `flow-view-arrow-${useId()}`
 </script>
 
 <template>
-  <div ref="root" class="flow-view">
+  <div ref="root" class="flow-view" :class="{ zoomed }">
     <svg
       :viewBox="`0 0 ${layout.width} ${layout.height}`"
-      :style="{ width: `${layout.width}px` }"
+      :style="
+        zoomed
+          ? { width: `${layout.width * 1.5}px`, minWidth: `${layout.width}px` }
+          : { width: `${layout.width}px` }
+      "
       role="img"
       aria-label="流程图"
       class="chart"
@@ -147,6 +153,11 @@ const markerId = `flow-view-arrow-${useId()}`
   justify-content: center;
 }
 
+.flow-view.zoomed {
+  display: block;
+  overflow-x: auto;
+}
+
 .chart {
   display: block;
   max-width: 100%;
@@ -156,6 +167,10 @@ const markerId = `flow-view-arrow-${useId()}`
   overflow: visible;
 }
 
+.zoomed .chart {
+  margin: 0 auto;
+}
+
 .branch-label {
   font-size: 13px;
   fill: v-bind("theme.textColor2");