update

2025-10-13 15:18:14 +08:00
parent 854b1f0769
commit 6f1720acd5
17 changed files with 248 additions and 184 deletions
--- a/src/oj/flowchart/index.vue
+++ b/src/oj/flowchart/index.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import FlowchartEditor from "shared/components/FlowchartEditor/index.vue"
+</script>
+<template>
+  <FlowchartEditor />
+</template>
+<style scoped></style>
--- a/src/oj/problem/components/Form.vue
+++ b/src/oj/problem/components/Form.vue
@@ -72,19 +72,17 @@ const menu = computed<DropdownOption[]>(() => [
  { label: "重置代码", key: "reset" },
 ])

-const languageOptions: DropdownOption[] = languages.value.map(
-  (it) => ({
-    label: () =>
-      h(NFlex, { align: "center" }, () => [
-        h(Icon, {
-          icon: ICON_SET[it],
-          width: 16,
-        }),
-        LANGUAGE_SHOW_VALUE[it],
-      ]),
-    value: it,
-  }),
-)
+const languageOptions: DropdownOption[] = languages.value.map((it) => ({
+  label: () =>
+    h(NFlex, { align: "center" }, () => [
+      h(Icon, {
+        icon: ICON_SET[it],
+        width: 16,
+      }),
+      LANGUAGE_SHOW_VALUE[it],
+    ]),
+  value: it,
+}))

 const copy = async () => {
  const success = await copyToClipboard(codeStore.code.value)
--- a/src/oj/problem/components/ProblemEditor.vue
+++ b/src/oj/problem/components/ProblemEditor.vue
@@ -81,7 +81,7 @@ const handleSyncStatusChange = (status: {
 }

 // 提供FlowchartEditor的ref给子组件
-provide('flowchartEditorRef', flowchartEditorRef)
+provide("flowchartEditorRef", flowchartEditorRef)
 </script>

 <template>
@@ -93,7 +93,10 @@ provide('flowchartEditorRef', flowchartEditorRef)
      @change-language="changeLanguage"
      @toggle-sync="toggleSync"
    />
-    <FlowchartEditor v-if="codeStore.code.language === 'Flowchart'" ref="flowchartEditorRef" />
+    <FlowchartEditor
+      v-if="codeStore.code.language === 'Flowchart'"
+      ref="flowchartEditorRef"
+    />
    <SyncCodeEditor
      v-else
      v-model:value="codeStore.code.value"
--- a/src/oj/problem/components/SubmitFlowchart.vue
+++ b/src/oj/problem/components/SubmitFlowchart.vue
@@ -55,7 +55,7 @@ function handleLoadToEditor(data: any) {
    >
      {{ loading ? "评分中..." : "提交流程图" }}
    </n-button>
-    
+
    <!-- 显示提交次数 -->
    <n-button secondary v-if="submissionCount > 0" type="info">
      {{ submissionCount }} 次
--- a/src/oj/problem/composables/useFlowchartSubmission.ts
+++ b/src/oj/problem/composables/useFlowchartSubmission.ts
@@ -1,9 +1,9 @@
-import { ref, watch } from 'vue'
-import { useMessage } from 'naive-ui'
+import { ref, watch } from "vue"
+import { useMessage } from "naive-ui"
 import {
  useFlowchartWebSocket,
  type FlowchartEvaluationUpdate,
-} from 'shared/composables/websocket'
+} from "shared/composables/websocket"

 export interface EvaluationResult {
  score?: number
@@ -21,7 +21,7 @@ export interface SubmissionStatus {

 export function useFlowchartSubmission() {
  const message = useMessage()
-  
+
  const evaluationResult = ref<EvaluationResult | null>(null)
  const submissionStatus = ref<SubmissionStatus | null>(null)
  const loading = ref(false)
@@ -67,7 +67,7 @@ export function useFlowchartSubmission() {
  const subscribeToSubmission = (submissionId: string) => {
    console.log("开始订阅WebSocket更新")
    subscribe(submissionId)
-    
+
    // 设置评分状态显示
    submissionStatus.value = {
      status: "processing",
--- a/src/oj/problem/composables/useFlowchartSubmit.ts
+++ b/src/oj/problem/composables/useFlowchartSubmit.ts
@@ -1,16 +1,16 @@
-import { ref } from 'vue'
-import { useMessage } from 'naive-ui'
-import { submitFlowchart, getCurrentProblemFlowchartSubmission } from 'oj/api'
-import { useProblemStore } from 'oj/store/problem'
-import { atou, utoa } from 'utils/functions'
-import { useMermaidConverter } from './useMermaidConverter'
-import { useFlowchartSubmission } from './useFlowchartSubmission'
+import { ref } from "vue"
+import { useMessage } from "naive-ui"
+import { submitFlowchart, getCurrentProblemFlowchartSubmission } from "oj/api"
+import { useProblemStore } from "oj/store/problem"
+import { atou, utoa } from "utils/functions"
+import { useMermaidConverter } from "./useMermaidConverter"
+import { useFlowchartSubmission } from "./useFlowchartSubmission"

 export function useFlowchartSubmit() {
  const message = useMessage()
  const problemStore = useProblemStore()
  const { problem } = toRefs(problemStore)
-  
+
  const { convertToMermaid } = useMermaidConverter()
  const {
    evaluationResult,
@@ -26,7 +26,7 @@ export function useFlowchartSubmit() {

  // 提交次数
  const submissionCount = ref(0)
-  
+
  // 存储流程图数据
  const myFlowchartZippedStr = ref("")

@@ -34,7 +34,9 @@ export function useFlowchartSubmit() {
  const checkCurrentSubmissionStatus = async () => {
    if (!problem.value?.id) return

-    const { data } = await getCurrentProblemFlowchartSubmission(problem.value.id)
+    const { data } = await getCurrentProblemFlowchartSubmission(
+      problem.value.id,
+    )
    const submission = data.submission
    submissionCount.value = data.count
    if (submission && submission.status === 2) {
@@ -52,7 +54,7 @@ export function useFlowchartSubmit() {
  // 提交流程图
  const submitFlowchartData = async (flowchartEditorRef: any) => {
    if (!flowchartEditorRef?.value) return
-    
+
    // 获取流程图的JSON数据
    const flowchartData = flowchartEditorRef.value.getFlowchartData()

@@ -60,7 +62,7 @@ export function useFlowchartSubmit() {
      message.error("流程图节点或边不能为空")
      return
    }
-    
+
    const mermaidCode = convertToMermaid(flowchartData)
    const compressed = utoa(JSON.stringify(flowchartData))

--- a/src/oj/problem/composables/useMermaidConverter.ts
+++ b/src/oj/problem/composables/useMermaidConverter.ts
@@ -65,7 +65,8 @@ export function useMermaidConverter() {
    mermaid += "\n"
    mermaid +=
      "    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px\n"
-    mermaid += "    classDef input fill:#e3f2fd,stroke:#1976d2,stroke-width:2px\n"
+    mermaid +=
+      "    classDef input fill:#e3f2fd,stroke:#1976d2,stroke-width:2px\n"
    mermaid +=
      "    classDef output fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px\n"
    mermaid +=
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -96,6 +96,10 @@ export const ojs: RouteRecordRaw = {
      component: () => import("oj/ai/analysis.vue"),
      meta: { requiresAuth: true },
    },
+    {
+      path: "flowchart",
+      component: () => import("oj/flowchart/index.vue"),
+    },
  ],
 }

--- a/src/shared/components/FlowchartEditor/CustomNode.vue
+++ b/src/shared/components/FlowchartEditor/CustomNode.vue
@@ -1,5 +1,5 @@
 <template>
-  <div 
+  <div
    class="custom-node"
    :class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
    :data-node-type="nodeType"
@@ -11,18 +11,15 @@
    @mousedown="handleMouseDown"
  >
    <!-- 连线点 - 根据节点类型动态显示 -->
-    <NodeHandles 
-      :node-type="nodeType"
-      :node-config="nodeConfig"
-    />
-    
+    <NodeHandles :node-type="nodeType" :node-config="nodeConfig" />
+
    <!-- 节点内容 -->
    <div class="node-content">
      <!-- 显示模式 -->
      <span v-if="!isEditing" class="node-label">{{ displayLabel }}</span>
-      
+
      <!-- 编辑模式 -->
-      <input 
+      <input
        v-if="isEditing"
        ref="editInput"
        v-model="editText"
@@ -33,13 +30,15 @@
        @click.stop
        @focusout="handleSaveEdit"
      />
-      
+
      <!-- 隐藏的文字用于保持尺寸 -->
-      <span v-if="isEditing" class="node-label-hidden" aria-hidden="true">{{ displayLabel }}</span>
+      <span v-if="isEditing" class="node-label-hidden" aria-hidden="true">{{
+        displayLabel
+      }}</span>
    </div>
-    
+
    <!-- 悬停时显示的操作按钮 -->
-    <NodeActions 
+    <NodeActions
      v-if="isHovered"
      @delete="handleDelete"
      @mouseenter="handleMouseEnter"
@@ -49,10 +48,10 @@
 </template>

 <script lang="ts" setup>
-import { ref, onUnmounted, nextTick, computed, watch } from 'vue'
-import { getNodeTypeConfig } from './useNodeStyles'
-import NodeHandles from './NodeHandles.vue'
-import NodeActions from './NodeActions.vue'
+import { ref, onUnmounted, nextTick, computed, watch } from "vue"
+import { getNodeTypeConfig } from "./useNodeStyles"
+import NodeHandles from "./NodeHandles.vue"
+import NodeActions from "./NodeActions.vue"

 // 类型定义
 interface Props {
@@ -73,7 +72,7 @@ const emit = defineEmits<Emits>()
 // 响应式状态
 const isHovered = ref(false)
 const isEditing = ref(false)
-const editText = ref('')
+const editText = ref("")
 const editInput = ref<HTMLInputElement>()

 // 定时器和事件处理器
@@ -83,16 +82,17 @@ let globalClickHandler: ((event: MouseEvent) => void) | null = null
 // 计算属性
 const nodeType = computed(() => props.data.originalType || props.type)
 const nodeConfig = computed(() => getNodeTypeConfig(nodeType.value))
-const displayLabel = computed(() => props.data.customLabel || nodeConfig.value.label)
-
+const displayLabel = computed(
+  () => props.data.customLabel || nodeConfig.value.label,
+)

 // 事件处理器
-const handleDelete = () => emit('delete', props.id)
+const handleDelete = () => emit("delete", props.id)

 const handleMouseDown = (event: MouseEvent) => {
  // 检查是否点击在连线点区域
  const target = event.target as HTMLElement
-  if (target.closest('.vue-flow__handle')) {
+  if (target.closest(".vue-flow__handle")) {
    // 如果在连线点区域，禁用节点拖拽
    event.preventDefault()
    return false
@@ -103,16 +103,16 @@ const handleDragStart = (event: DragEvent) => {
  if (isEditing.value) {
    return
  }
-  
+
  // 检查是否在连线点区域开始拖拽
  const target = event.target as HTMLElement
-  if (target.closest('.vue-flow__handle')) {
+  if (target.closest(".vue-flow__handle")) {
    event.preventDefault()
    return false
  }
-  
+
  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.effectAllowed = "move"
  }
 }

@@ -133,7 +133,7 @@ const handleSaveEdit = () => {
  if (isEditing.value) {
    // 保存编辑的文本
    if (editText.value.trim()) {
-      emit('update', props.id, editText.value.trim())
+      emit("update", props.id, editText.value.trim())
    }
    isEditing.value = false
    removeGlobalClickHandler()
@@ -142,7 +142,7 @@ const handleSaveEdit = () => {

 const handleCancelEdit = () => {
  isEditing.value = false
-  editText.value = ''
+  editText.value = ""
  removeGlobalClickHandler()
 }

@@ -165,23 +165,25 @@ const handleMouseLeave = () => {
 // 全局点击处理器
 const addGlobalClickHandler = () => {
  if (globalClickHandler) return
-  
+
  globalClickHandler = (event: MouseEvent) => {
-    if (isEditing.value && !(event.target as Element)?.closest('.custom-node')) {
+    if (
+      isEditing.value &&
+      !(event.target as Element)?.closest(".custom-node")
+    ) {
      handleSaveEdit()
    }
  }
-  document.addEventListener('click', globalClickHandler, { capture: true })
+  document.addEventListener("click", globalClickHandler, { capture: true })
 }

 const removeGlobalClickHandler = () => {
  if (globalClickHandler) {
-    document.removeEventListener('click', globalClickHandler, { capture: true })
+    document.removeEventListener("click", globalClickHandler, { capture: true })
    globalClickHandler = null
  }
 }

-
 // 清理函数
 onUnmounted(() => {
  if (hideTimeout) {
--- a/src/shared/components/FlowchartEditor/NodeActions.vue
+++ b/src/shared/components/FlowchartEditor/NodeActions.vue
@@ -1,16 +1,18 @@
 <template>
-  <div 
+  <div
    class="node-actions"
    @mouseenter="$emit('mouseenter')"
    @mouseleave="$emit('mouseleave')"
  >
-    <button 
+    <button
      class="action-btn delete-btn"
      @click.stop="$emit('delete')"
      title="删除节点"
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+        <path
+          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        />
      </svg>
    </button>
  </div>
--- a/src/shared/components/FlowchartEditor/NodeHandles.vue
+++ b/src/shared/components/FlowchartEditor/NodeHandles.vue
@@ -39,7 +39,7 @@
        zIndex: 10,
        left: '-10px',
        top: '50%',
-        transform: 'translateY(-50%)'
+        transform: 'translateY(-50%)',
      }"
    />
    <Handle
@@ -54,10 +54,10 @@
        zIndex: 10,
        right: '-10px',
        top: '50%',
-        transform: 'translateY(-50%)'
+        transform: 'translateY(-50%)',
      }"
    />
-    
+
    <!-- 是/否标签 -->
    <div class="decision-labels">
      <span class="decision-label decision-label-yes">是</span>
@@ -111,7 +111,7 @@
        })
      "
    />
-    
+
    <!-- 标签 -->
    <div class="loop-labels">
      <span class="loop-label loop-label-enter">进入</span>
--- a/src/shared/components/FlowchartEditor/Toolbar.vue
+++ b/src/shared/components/FlowchartEditor/Toolbar.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { getNodeTypeConfig } from './useNodeStyles'
+import { computed } from "vue"
+import { getNodeTypeConfig } from "./useNodeStyles"

 // 拖拽开始处理
 const onDragStart = (event: DragEvent, type: string) => {
  if (!event.dataTransfer || !type) return
-  
+
  event.dataTransfer.setData("application/vueflow", type)
  event.dataTransfer.effectAllowed = "move"
 }
@@ -30,36 +30,30 @@ const emit = defineEmits<{
 // 工具栏状态

 // 节点类型定义 - 优化性能
-const nodeTypes = computed(() => [
-  'start',
-  'input', 
-  'default',
-  'decision',
-  'loop',
-  'output',
-  'end'
-].map(type => {
-  const config = getNodeTypeConfig(type)
-  return {
-    type,
-    ...config
-  }
-}))
+const nodeTypes = computed(() =>
+  ["start", "input", "default", "decision", "loop", "output", "end"].map(
+    (type) => {
+      const config = getNodeTypeConfig(type)
+      return {
+        type,
+        ...config,
+      }
+    },
+  ),
+)

 // 获取保存状态标题
 const getSaveStatusTitle = () => {
  if (props.isSaving) {
-    return '正在保存...'
+    return "正在保存..."
  } else if (props.hasUnsavedChanges) {
-    return '有未保存的更改'
+    return "有未保存的更改"
  } else if (props.lastSaved) {
    return `已保存 - ${new Date(props.lastSaved).toLocaleTimeString()}`
  } else {
-    return '已保存'
+    return "已保存"
  }
 }
-
-
 </script>
 <template>
  <div class="toolbar">
@@ -67,11 +61,15 @@ const getSaveStatusTitle = () => {
    <div class="toolbar-header">
      <div class="header-content">
        <h3>节点库</h3>
-        <div class="save-status-indicator" :class="{ 
-          'saving': props.isSaving, 
-          'unsaved': props.hasUnsavedChanges && !props.isSaving,
-          'saved': !props.hasUnsavedChanges && !props.isSaving 
-        }" :title="getSaveStatusTitle()">
+        <div
+          class="save-status-indicator"
+          :class="{
+            saving: props.isSaving,
+            unsaved: props.hasUnsavedChanges && !props.isSaving,
+            saved: !props.hasUnsavedChanges && !props.isSaving,
+          }"
+          :title="getSaveStatusTitle()"
+        >
          <span v-if="props.isSaving" class="spinner">⏳</span>
          <span v-else-if="props.hasUnsavedChanges">●</span>
          <span v-else>✔</span>
@@ -80,7 +78,6 @@ const getSaveStatusTitle = () => {
      <p class="description">拖拽节点到画布中</p>
    </div>

-
    <!-- 节点列表 -->
    <div class="nodes">
      <div
@@ -105,8 +102,8 @@ const getSaveStatusTitle = () => {
    <!-- 工具栏操作 -->
    <div class="toolbar-actions">
      <div class="history-controls">
-        <button 
-          class="action-btn history-btn" 
+        <button
+          class="action-btn history-btn"
          :disabled="!canUndo"
          @click="$emit('undo')"
          title="撤销 (Ctrl+Z)"
@@ -114,8 +111,8 @@ const getSaveStatusTitle = () => {
          <span class="btn-icon">↶</span>
          <span class="btn-text">撤销</span>
        </button>
-        <button 
-          class="action-btn history-btn" 
+        <button
+          class="action-btn history-btn"
          :disabled="!canRedo"
          @click="$emit('redo')"
          title="重做 (Ctrl+Y)"
@@ -124,12 +121,15 @@ const getSaveStatusTitle = () => {
          <span class="btn-text">重做</span>
        </button>
      </div>
-      <button class="action-btn clear-btn" @click="$emit('clear')" title="清空画布">
+      <button
+        class="action-btn clear-btn"
+        @click="$emit('clear')"
+        title="清空画布"
+      >
        <span class="btn-icon">🗑️</span>
        <span class="btn-text">清空画布</span>
      </button>
    </div>
-
  </div>
 </template>

@@ -150,7 +150,6 @@ const getSaveStatusTitle = () => {
  transition: all 0.3s ease;
 }

-
 .toolbar-header {
  margin-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
@@ -207,23 +206,30 @@ const getSaveStatusTitle = () => {
 }

@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
 }

-
 .description {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
 }

-
 /* 节点列表样式 */
 .nodes {
  display: flex;
@@ -285,7 +291,6 @@ const getSaveStatusTitle = () => {
  line-height: 1.3;
 }

-
 /* 工具栏操作按钮样式 */
 .toolbar-actions {
  display: flex;
@@ -366,7 +371,6 @@ const getSaveStatusTitle = () => {
  font-size: 12px;
 }

-
 /* 滚动条样式 */
 .toolbar::-webkit-scrollbar {
  width: 6px;
@@ -386,7 +390,6 @@ const getSaveStatusTitle = () => {
  background: #94a3b8;
 }

-
 /* 响应式设计 */
@media (max-width: 768px) {
  .toolbar {
--- a/src/shared/components/FlowchartEditor/index.vue
+++ b/src/shared/components/FlowchartEditor/index.vue
@@ -1,10 +1,16 @@
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from "vue"
 import Toolbar from "./Toolbar.vue"
 import "@vue-flow/core/dist/style.css"
 import "@vue-flow/core/dist/theme-default.css"
 import "@vue-flow/controls/dist/style.css"
-import { useVueFlow, VueFlow, type Node, type Edge, MarkerType } from "@vue-flow/core"
+import {
+  useVueFlow,
+  VueFlow,
+  type Node,
+  type Edge,
+  MarkerType,
+} from "@vue-flow/core"
 import { Controls } from "@vue-flow/controls"
 import { Background } from "@vue-flow/background"

@@ -13,6 +19,15 @@ import { useHistory } from "./useHistory"
 import { useFlowOperations } from "./useFlowOperations"
 import { useCache } from "./useCache"
 import CustomNode from "./CustomNode.vue"
+import { useProblemStore } from "oj/store/problem"
+
+interface Props {
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  readonly: false,
+})

 // Vue Flow 实例
 const { addNodes, addEdges, removeNodes, removeEdges } = useVueFlow()
@@ -24,15 +39,20 @@ const edges = ref<Edge[]>([])
 // 历史记录管理
 const { canUndo, canRedo, saveState, undo, redo } = useHistory()

+const problemStore = useProblemStore()
+const { problem } = storeToRefs(problemStore)
 // 缓存管理
-const { isSaving, lastSaved, hasUnsavedChanges, saveToCache, loadFromCache, clearCache } = useCache(
-  nodes,
-  edges,
-  'flowchart-editor-data'
-)
+const { isSaving, lastSaved, hasUnsavedChanges, loadFromCache, clearCache } =
+  useCache(
+    nodes,
+    edges,
+    problem.value?._id
+      ? `flowchart-editor-data-problem-${problem.value!._id}`
+      : "flowchart-editor-data",
+  )

 // 拖拽处理
-const { isDragOver, onDragOver, onDragLeave, onDrop } = useDnD()
+const { onDragOver, onDragLeave, onDrop } = useDnD()

 // 流程操作
 const {
@@ -41,7 +61,7 @@ const {
  handleNodeDelete,
  handleNodeUpdate,
  clearCanvas,
-  deleteSelected
+  deleteSelected,
 } = useFlowOperations(
  nodes,
  edges,
@@ -49,7 +69,7 @@ const {
  addEdges,
  removeNodes,
  removeEdges,
-  saveState
+  saveState,
 )

 // 拖拽处理包装
@@ -96,15 +116,15 @@ const handleClear = () => {
 const handleKeyDown = (event: KeyboardEvent) => {
  if (event.target instanceof HTMLInputElement) return

-  if (event.key === 'Delete' || event.key === 'Backspace') {
+  if (event.key === "Delete" || event.key === "Backspace") {
    deleteSelected()
  }

  if (event.ctrlKey || event.metaKey) {
-    if (event.key === 'z' && !event.shiftKey) {
+    if (event.key === "z" && !event.shiftKey) {
      event.preventDefault()
      handleUndo()
-    } else if (event.key === 'z' && event.shiftKey) {
+    } else if (event.key === "z" && event.shiftKey) {
      event.preventDefault()
      handleRedo()
    }
@@ -112,32 +132,32 @@ const handleKeyDown = (event: KeyboardEvent) => {
 }

 onMounted(() => {
-  document.addEventListener('keydown', handleKeyDown)
-  
+  document.addEventListener("keydown", handleKeyDown)
+
  // 从缓存恢复数据
  loadFromCache()
 })

 onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeyDown)
+  document.removeEventListener("keydown", handleKeyDown)
 })

 // 加载外部数据到编辑器
-const setFlowchartData = (data: { nodes: Node[], edges: Edge[] }) => {
+const setFlowchartData = (data: { nodes: Node[]; edges: Edge[] }) => {
  if (data && data.nodes && data.edges) {
    // 确保节点数据包含必要的位置信息
-    const processedNodes = data.nodes.map(node => ({
+    const processedNodes = data.nodes.map((node) => ({
      ...node,
-      position: node.position || { x: 0, y: 0 }
+      position: node.position || { x: 0, y: 0 },
    }))
-    
+
    // 确保边数据包含必要的 handle 信息
-    const processedEdges = data.edges.map(edge => ({
+    const processedEdges = data.edges.map((edge) => ({
      ...edge,
      sourceHandle: edge.sourceHandle || null,
-      targetHandle: edge.targetHandle || null
+      targetHandle: edge.targetHandle || null,
    }))
-    
+
    nodes.value = processedNodes
    edges.value = processedEdges
    saveState(nodes.value, edges.value)
@@ -150,9 +170,9 @@ defineExpose({
  edges,
  getFlowchartData: () => ({
    nodes: nodes.value,
-    edges: edges.value
+    edges: edges.value,
  }),
-  setFlowchartData
+  setFlowchartData,
 })
 </script>

@@ -166,13 +186,14 @@ defineExpose({
      @drop="handleDrop"
      @connect="handleConnect"
      @edge-click="handleEdgeClick"
+      :readonly="readonly"
      :default-edge-options="{
        type: 'step',
-        style: { 
-          stroke: '#6366f1', 
-          strokeWidth: 2.5, 
+        style: {
+          stroke: '#6366f1',
+          strokeWidth: 2.5,
          cursor: 'pointer',
-          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'
+          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
        },
        markerEnd: {
          type: MarkerType.ArrowClosed,
@@ -204,7 +225,12 @@ defineExpose({
          orient="auto"
          markerUnits="strokeWidth"
        >
-          <path d="M0,0 L0,6 L10,3 z" fill="#6366f1" stroke="#6366f1" strokeWidth="0.5" />
+          <path
+            d="M0,0 L0,6 L10,3 z"
+            fill="#6366f1"
+            stroke="#6366f1"
+            strokeWidth="0.5"
+          />
        </marker>
      </defs>
      <template #node-custom="{ data, id, type }">
@@ -220,6 +246,8 @@ defineExpose({
      <Background variant="lines" :gap="20" :size="1" />
      <Controls />
      <Toolbar
+        v-if="!readonly"
+        r
        :can-undo="canUndo"
        :can-redo="canRedo"
        :is-saving="isSaving"
@@ -241,4 +269,3 @@ defineExpose({
  position: relative;
 }
 </style>
-
--- a/src/shared/components/FlowchartEditor/useCache.ts
+++ b/src/shared/components/FlowchartEditor/useCache.ts
@@ -1,6 +1,6 @@
-import { ref, watch } from 'vue'
-import { useStorage, useDebounceFn } from '@vueuse/core'
-import type { Node, Edge } from '@vue-flow/core'
+import { ref, watch } from "vue"
+import { useStorage, useDebounceFn } from "@vueuse/core"
+import type { Node, Edge } from "@vue-flow/core"

 /**
 * 缓存管理 - 使用 @vueuse 的 useStorage
@@ -8,7 +8,7 @@ import type { Node, Edge } from '@vue-flow/core'
 export function useCache(
  nodes: any,
  edges: any,
-  storageKey: string = 'flowchart-editor-data'
+  storageKey: string = "flowchart-editor-data",
 ) {
  const isSaving = ref(false)
  const lastSaved = ref<Date | null>(null)
@@ -22,7 +22,7 @@ export function useCache(
  }>(storageKey, {
    nodes: [],
    edges: [],
-    timestamp: ''
+    timestamp: "",
  })

  // 防抖保存
@@ -52,7 +52,9 @@ export function useCache(
    if (storedData.value.nodes?.length || storedData.value.edges?.length) {
      nodes.value = storedData.value.nodes
      edges.value = storedData.value.edges
-      lastSaved.value = storedData.value.timestamp ? new Date(storedData.value.timestamp) : null
+      lastSaved.value = storedData.value.timestamp
+        ? new Date(storedData.value.timestamp)
+        : null
      hasUnsavedChanges.value = false
      return true
    }
@@ -61,16 +63,20 @@ export function useCache(

  // 清除缓存数据
  const clearCache = () => {
-    storedData.value = { nodes: [], edges: [], timestamp: '' }
+    storedData.value = { nodes: [], edges: [], timestamp: "" }
    lastSaved.value = null
    hasUnsavedChanges.value = false
  }

  // 监听节点和边的变化
-  watch([nodes, edges], () => {
-    hasUnsavedChanges.value = true
-    debouncedSave()
-  }, { deep: true })
+  watch(
+    [nodes, edges],
+    () => {
+      hasUnsavedChanges.value = true
+      debouncedSave()
+    },
+    { deep: true },
+  )

  return {
    isSaving,
@@ -78,6 +84,6 @@ export function useCache(
    hasUnsavedChanges,
    saveToCache,
    loadFromCache,
-    clearCache
+    clearCache,
  }
 }
--- a/src/shared/components/FlowchartEditor/useDnD.ts
+++ b/src/shared/components/FlowchartEditor/useDnD.ts
@@ -1,7 +1,11 @@
-import { ref } from 'vue'
+import { ref } from "vue"
 import { useVueFlow } from "@vue-flow/core"
 import { nanoid } from "nanoid"
-import { getNodeTypeConfig, createNodeStyle, getNodeDimensions } from "./useNodeStyles"
+import {
+  getNodeTypeConfig,
+  createNodeStyle,
+  getNodeDimensions,
+} from "./useNodeStyles"

 /**
 * 简化的拖拽处理
@@ -25,39 +29,39 @@ export function useDnD() {
  const onDrop = (event: DragEvent) => {
    event.preventDefault()
    isDragOver.value = false
-    
+
    const type = event.dataTransfer?.getData("application/vueflow")
    if (!type) return
-    
+
    // 获取鼠标在画布中的坐标
    const position = screenToFlowCoordinate({
      x: event.clientX,
      y: event.clientY,
    })
-    
+
    // 根据节点类型获取实际尺寸
    const dimensions = getNodeDimensions(type)
-    
+
    // 调整位置，使节点中心点对齐到鼠标位置
    const adjustedPosition = {
      x: position.x - dimensions.width / 2,
-      y: position.y - dimensions.height / 2
+      y: position.y - dimensions.height / 2,
    }
-    
+
    const nodeId = `node-${nanoid()}`
    const config = getNodeTypeConfig(type)
    const newNode = {
      id: nodeId,
-      type: 'custom',
+      type: "custom",
      position: adjustedPosition,
      data: {
        label: config.label,
        color: config.color,
-        originalType: type
+        originalType: type,
      },
-      style: createNodeStyle(type)
+      style: createNodeStyle(type),
    }
-    
+
    addNodes([newNode])
    return newNode
  }
@@ -66,6 +70,6 @@ export function useDnD() {
    isDragOver,
    onDragOver,
    onDragLeave,
-    onDrop
+    onDrop,
  }
 }
--- a/src/shared/components/FlowchartEditor/useHistory.ts
+++ b/src/shared/components/FlowchartEditor/useHistory.ts
@@ -1,11 +1,11 @@
-import { ref, computed } from 'vue'
-import type { Node, Edge } from '@vue-flow/core'
+import { ref, computed } from "vue"
+import type { Node, Edge } from "@vue-flow/core"

 /**
 * 简化的历史记录管理
 */
 export function useHistory() {
-  const history = ref<{ nodes: Node[], edges: Edge[] }[]>([])
+  const history = ref<{ nodes: Node[]; edges: Edge[] }[]>([])
  const historyIndex = ref(-1)

  // 是否可以撤销
@@ -17,15 +17,15 @@ export function useHistory() {
  // 保存状态到历史记录
  const saveState = (nodes: Node[], edges: Edge[]) => {
    const currentState = { nodes: [...nodes], edges: [...edges] }
-    
+
    // 如果当前不在历史记录的末尾，删除后面的记录
    if (historyIndex.value < history.value.length - 1) {
      history.value = history.value.slice(0, historyIndex.value + 1)
    }
-    
+
    history.value.push(currentState)
    historyIndex.value = history.value.length - 1
-    
+
    // 限制历史记录数量
    if (history.value.length > 20) {
      history.value.shift()
@@ -58,6 +58,6 @@ export function useHistory() {
    canRedo,
    saveState,
    undo,
-    redo
+    redo,
  }
 }
--- a/src/shared/composables/websocket.ts
+++ b/src/shared/composables/websocket.ts
@@ -414,7 +414,10 @@ export function createWebSocketComposable<T extends WebSocketMessage>(
 * 流程图评分更新消息类型
 */
 export interface FlowchartEvaluationUpdate extends WebSocketMessage {
-  type: "flowchart_evaluation_completed" | "flowchart_evaluation_failed" | "flowchart_evaluation_update"
+  type:
+    | "flowchart_evaluation_completed"
+    | "flowchart_evaluation_failed"
+    | "flowchart_evaluation_update"
  submission_id: string
  score?: number
  grade?: string
@@ -474,8 +477,10 @@ export function useFlowchartWebSocket(
    scheduleDisconnect: (delay?: number) => ws.scheduleDisconnect(delay),
    cancelScheduledDisconnect: () => ws.cancelScheduledDisconnect(),
    status: ws.status,
-    addHandler: (h: MessageHandler<FlowchartEvaluationUpdate>) => ws.addHandler(h),
-    removeHandler: (h: MessageHandler<FlowchartEvaluationUpdate>) => ws.removeHandler(h),
+    addHandler: (h: MessageHandler<FlowchartEvaluationUpdate>) =>
+      ws.addHandler(h),
+    removeHandler: (h: MessageHandler<FlowchartEvaluationUpdate>) =>
+      ws.removeHandler(h),
  }
 }