fix

src/shared/components/FlowchartEditor/useDnD.ts

@@ -1,11 +1,11 @@
 import { ref } from "vue"
 import { useVueFlow } from "@vue-flow/core"
-import { nanoid } from "nanoid"
 import {
   getNodeTypeConfig,
   createNodeStyle,
   getNodeDimensions,
 } from "./useNodeStyles"
+import { getRandomId } from "utils/functions"
 
 /**
  * 简化的拖拽处理
@@ -48,7 +48,7 @@ export function useDnD() {
       y: position.y - dimensions.height / 2,
     }
 
-    const nodeId = `node-${nanoid()}`
+    const nodeId = `node-${getRandomId()}`
     const config = getNodeTypeConfig(type)
     const newNode = {
       id: nodeId,

src/shared/components/FlowchartEditor/useFlowOperations.ts

@@ -1,6 +1,6 @@
-import { nanoid } from "nanoid"
 import type { Ref } from "vue"
 import type { Node, Edge } from "@vue-flow/core"
+import { getRandomId } from "utils/functions"
 
 export function useFlowOperations(
   nodes: Ref<Node[]>,
@@ -66,7 +66,7 @@ export function useFlowOperations(
     )
 
     const newEdge: Edge = {
-      id: `edge-${nanoid()}`,
+      id: `edge-${getRandomId()}`,
       source: params.source,
       target: params.target,
       sourceHandle: params.sourceHandle,

src/shared/components/MermaidEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { nanoid } from "nanoid"
+import { copyToClipboard, getRandomId } from "utils/functions"
-import { copyToClipboard } from "utils/functions"
 
 // 动态导入 mermaid
 let mermaid: any = null
@@ -63,7 +62,7 @@ const renderMermaid = async () => {
   try {
     // 确保 mermaid 已加载
     const mermaidInstance = await loadMermaid()
-    const id = `mermaid-${nanoid()}`
+    const id = `mermaid-${getRandomId()}`
     const { svg } = await mermaidInstance.render(id, modelValue.value)
     mermaidContainer.value.innerHTML = svg
 

src/shared/composables/useMermaid.ts

@@ -1,4 +1,4 @@
-import { nanoid } from "nanoid"
+import { getRandomId } from "utils/functions"
 
 export function useMermaid() {
   // 渲染状态
@@ -31,7 +31,7 @@ export function useMermaid() {
 
       // 渲染流程图
       if (container && mermaidCode) {
-        const id = `mermaid-${nanoid()}`
+        const id = `mermaid-${getRandomId()}`
         const { svg } = await mermaid.render(id, mermaidCode)
         container.innerHTML = svg
       }

src/utils/functions.ts

@@ -3,6 +3,7 @@ import { User } from "./types"
 import { USER_TYPE } from "./constants"
 import { strFromU8, strToU8, unzlibSync, zlibSync } from "fflate"
 import copyTextFallback from "copy-text-to-clipboard"
+import { customAlphabet } from "nanoid"
 
 function calculateACRate(acCount: number, totalCount: number): string {
   if (totalCount === 0) return "0.00"
@@ -227,6 +228,10 @@ export async function copyToClipboard(text: string): Promise<boolean> {
   }
 }
 
+export function getRandomId() {
+  return customAlphabet("0123456789abcdefghijklmnopqrstuvwxyz")
+}
+
 // function getChromeVersion() {
 //   var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
 //   return raw ? parseInt(raw[2], 10) : 0