fix

src/shared/components/FlowchartEditor/CustomNode.vue

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

src/shared/components/FlowchartEditor/index.vue

@@ -22,12 +22,10 @@ import CustomNode from "./CustomNode.vue"
 import { useProblemStore } from "oj/store/problem"
 
 interface Props {
-  readonly?: boolean
   height?: string
 }
 
 withDefaults(defineProps<Props>(), {
-  readonly: false,
   height: "calc(100vh - 133px)",
 })
 
@@ -183,12 +181,11 @@ defineExpose({
     <VueFlow
       v-model:nodes="nodes"
       v-model:edges="edges"
-      :readonly="readonly"
-      @dragover="!readonly ? handleDragOver : undefined"
-      @dragleave="!readonly ? handleDragLeave : undefined"
-      @drop="!readonly ? handleDrop : undefined"
-      @connect="!readonly ? handleConnect : undefined"
-      @edge-click="!readonly ? handleEdgeClick : undefined"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+      @connect="handleConnect"
+      @edge-click="handleEdgeClick"
       :default-edge-options="{
         type: 'step',
         style: {
@@ -211,7 +208,7 @@ defineExpose({
         markerEnd: 'url(#connection-arrow)',
         filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
       }"
-      :fit-view-on-init="readonly"
+      :fit-view-on-init="false"
       :connect-on-click="false"
       :multi-selection-key-code="null"
       :delete-key-code="null"
@@ -240,17 +237,14 @@ defineExpose({
           :id="id"
           :type="type"
           :data="data"
-          :readonly="readonly"
           @delete="handleNodeDelete"
           @update="handleNodeUpdate"
         />
       </template>
 
       <Background variant="lines" :gap="20" :size="1" />
-      <Controls v-if="!readonly" />
+      <Controls />
       <Toolbar
-        v-if="!readonly"
-        r
         :can-undo="canUndo"
         :can-redo="canRedo"
         :is-saving="isSaving"

src/shared/composables/useMermaid.ts

@@ -0,0 +1,54 @@
+import { nanoid } from "nanoid"
+
+export function useMermaid() {
+  // 渲染状态
+  const renderError = ref<string | null>(null)
+  
+  // 动态导入 mermaid
+  let mermaid: any = null
+
+  // 动态加载 Mermaid
+  const loadMermaid = async () => {
+    if (!mermaid) {
+      const mermaidModule = await import("mermaid")
+      mermaid = mermaidModule.default
+      mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: "loose",
+        theme: "default",
+      })
+    }
+    return mermaid
+  }
+
+  // 渲染流程图的函数
+  const renderFlowchart = async (container: HTMLElement | null, mermaidCode: string) => {
+    try {
+      renderError.value = null
+
+      // 确保 mermaid 已加载
+      await loadMermaid()
+
+      // 渲染流程图
+      if (container && mermaidCode) {
+        const id = `mermaid-${nanoid()}`
+        const { svg } = await mermaid.render(id, mermaidCode)
+        container.innerHTML = svg
+      }
+    } catch (error) {
+      renderError.value =
+        error instanceof Error ? error.message : "流程图渲染失败，请检查代码格式"
+    }
+  }
+
+  // 清除渲染错误
+  const clearError = () => {
+    renderError.value = null
+  }
+
+  return {
+    renderError: readonly(renderError),
+    renderFlowchart,
+    clearError,
+  }
+}