update

src/oj/problem/components/FlowchartEvaluationDisplay.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { VueFlow } from "@vue-flow/core"
+import FlowchartEditor from "shared/components/FlowchartEditor/index.vue"
 import { atou } from "utils/functions"
-import "@vue-flow/core/dist/style.css"
-import "@vue-flow/core/dist/theme-default.css"
 
 interface EvaluationResult {
   score?: number
@@ -25,8 +23,10 @@ const emit = defineEmits<{
 }>()
 
 const showDetailModal = ref(false)
-const nodes = ref<any[]>([])
+
-const edges = ref<any[]>([])
+const readonlyFlowchartEditorRef = useTemplateRef<any>(
+  "readonlyFlowchartEditorRef",
+)
 
 // 根据分数获取标签类型
 const getScoreType = (score: number) => {
@@ -36,17 +36,15 @@ const getScoreType = (score: number) => {
   return "error"
 }
 
-function openDetailModal() {
+async function openDetailModal() {
   showDetailModal.value = true
-  if (props.myFlowchartZippedStr) {
+  await nextTick()
-    const str = atou(props.myFlowchartZippedStr)
+  const str = atou(props.myFlowchartZippedStr)
-    const json = JSON.parse(str)
+  const json = JSON.parse(str)
-    nodes.value = json.nodes.map((node: any) => ({
+  readonlyFlowchartEditorRef.value.setFlowchartData({
-      ...node,
+    nodes: json.nodes || [],
-      position: node.position || { x: 0, y: 0 },
+    edges: json.edges || [],
-    }))
+  })
-    edges.value = json.edges
-  }
 }
 
 function closeModal() {
@@ -89,21 +87,12 @@ function loadToEditor() {
     >
       <n-grid :cols="5" :x-gap="16">
         <n-gi :span="3">
-          <n-card title="大致缩略图">
+          <n-card title="大致缩略图（有错位问题，建议加载到流程图编辑器查看）">
             <div class="flowchart">
-              <VueFlow
+              <FlowchartEditor
-                :nodes="nodes"
+                ref="readonlyFlowchartEditorRef"
-                :edges="edges"
+                readonly
-                :fit-view-on-init="true"
+                height="400px"
-                :nodes-draggable="false"
-                :nodes-connectable="false"
-                :elements-selectable="false"
-                :zoom-on-scroll="false"
-                :pan-on-scroll="false"
-                :pan-on-drag="false"
-                :select-nodes-on-drag="false"
-                :delete-key-code="null"
-                :multi-selection-key-code="null"
               />
             </div>
           </n-card>

src/shared/components/FlowchartEditor/CustomNode.vue

@@ -1,14 +1,18 @@
 <template>
   <div
     class="custom-node"
-    :class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
+    :class="{
+      'is-hovered': isHovered,
+      'is-editing': isEditing,
+      readonly: readonly,
+    }"
     :data-node-type="nodeType"
-    :draggable="!isEditing"
+    :draggable="!isEditing && !readonly"
-    @mouseenter="isHovered = true"
+    @mouseenter="!readonly ? (isHovered = true) : undefined"
-    @mouseleave="handleMouseLeave"
+    @mouseleave="!readonly ? handleMouseLeave : undefined"
-    @dblclick="handleDoubleClick"
+    @dblclick="!readonly ? handleDoubleClick : undefined"
-    @dragstart="handleDragStart"
+    @dragstart="!readonly ? handleDragStart : undefined"
-    @mousedown="handleMouseDown"
+    @mousedown="!readonly ? handleMouseDown : undefined"
   >
     <!-- 连线点 - 根据节点类型动态显示 -->
     <NodeHandles :node-type="nodeType" :node-config="nodeConfig" />
@@ -32,14 +36,14 @@
       />
 
       <!-- 隐藏的文字用于保持尺寸 -->
-      <span v-if="isEditing" class="node-label-hidden" aria-hidden="true">{{
+      <span v-if="isEditing" class="node-label-hidden" aria-hidden="true">
-        displayLabel
+        {{ displayLabel }}
-      }}</span>
+      </span>
     </div>
 
     <!-- 悬停时显示的操作按钮 -->
     <NodeActions
-      v-if="isHovered"
+      v-if="isHovered && !readonly"
       @delete="handleDelete"
       @mouseenter="handleMouseEnter"
       @mouseleave="handleMouseLeave"
@@ -58,6 +62,7 @@ interface Props {
   id: string
   type: string
   data: any
+  readonly?: boolean
 }
 
 interface Emits {
@@ -66,7 +71,9 @@ interface Emits {
 }
 
 // Props 和 Emits
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+})
 const emit = defineEmits<Emits>()
 
 // 响应式状态
@@ -215,6 +222,15 @@ onUnmounted(() => {
   filter: brightness(1.1);
 }
 
+.custom-node.readonly {
+  cursor: default;
+  pointer-events: none;
+}
+
+.custom-node.readonly .node-content {
+  pointer-events: auto;
+}
+
 /* 节点内容区域 */
 .node-content {
   position: relative;

src/shared/components/FlowchartEditor/index.vue

@@ -23,10 +23,12 @@ import { useProblemStore } from "oj/store/problem"
 
 interface Props {
   readonly?: boolean
+  height?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   readonly: false,
+  height: "calc(100vh - 133px)",
 })
 
 // Vue Flow 实例
@@ -177,16 +179,16 @@ defineExpose({
 </script>
 
 <template>
-  <div class="container">
+  <div class="container" :style="{ height }">
     <VueFlow
       v-model:nodes="nodes"
       v-model:edges="edges"
-      @dragover="handleDragOver"
-      @dragleave="handleDragLeave"
-      @drop="handleDrop"
-      @connect="handleConnect"
-      @edge-click="handleEdgeClick"
       :readonly="readonly"
+      @dragover="!readonly ? handleDragOver : undefined"
+      @dragleave="!readonly ? handleDragLeave : undefined"
+      @drop="!readonly ? handleDrop : undefined"
+      @connect="!readonly ? handleConnect : undefined"
+      @edge-click="!readonly ? handleEdgeClick : undefined"
       :default-edge-options="{
         type: 'step',
         style: {
@@ -209,7 +211,7 @@ defineExpose({
         markerEnd: 'url(#connection-arrow)',
         filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
       }"
-      :fit-view-on-init="false"
+      :fit-view-on-init="readonly"
       :connect-on-click="false"
       :multi-selection-key-code="null"
       :delete-key-code="null"
@@ -238,13 +240,14 @@ defineExpose({
           :id="id"
           :type="type"
           :data="data"
+          :readonly="readonly"
           @delete="handleNodeDelete"
           @update="handleNodeUpdate"
         />
       </template>
 
       <Background variant="lines" :gap="20" :size="1" />
-      <Controls />
+      <Controls v-if="!readonly" />
       <Toolbar
         v-if="!readonly"
         r
@@ -265,7 +268,7 @@ defineExpose({
 <style scoped>
 .container {
   width: 100%;
-  height: calc(100vh - 133px);
+  height: 100%;
   position: relative;
 }
 </style>