Strona główna Odkrywaj Pomoc
Zaloguj się
txl
/
ylrz_saas_his_scrm_adminUI
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Drzewo: c19e212257
Gałęzie Tagi
ylrz_saas_hi...
/
public
/
workflow-canvas.html

workflow-canvas.html 18 KB
Historia Czysty

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6. <title>龙虾引擎 - 工作流可视化编辑器</title>
    7. 

  7. <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    8. 

  8. <script src="https://unpkg.com/@vue-flow/core@latest/dist/vue-flow.umd.js"></script>
    9. 

  9. <script src="https://unpkg.com/@vue-flow/background@latest/dist/vue-flow-background.umd.js"></script>
    10. 

  10. <script src="https://unpkg.com/@vue-flow/minimap@latest/dist/vue-flow-minimap.umd.js"></script>
    11. 

  11. <script src="https://unpkg.com/@vue-flow/controls@latest/dist/vue-flow-controls.umd.js"></script>
    12. 

  12. <link href="https://unpkg.com/@vue-flow/core@latest/dist/style.css" rel="stylesheet">
    13. 

  13. <link href="https://unpkg.com/@vue-flow/minimap@latest/dist/style.css" rel="stylesheet">
    14. 

  14. <link href="https://unpkg.com/@vue-flow/controls@latest/dist/style.css" rel="stylesheet">
    15. 

  15. 

  16. <style>
    17. 

  17. *{margin:0;padding:0;box-sizing:border-box}
    18. 

  18. body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;height:100vh;overflow:hidden}
    19. 

  19. #app{display:flex;height:100vh}
    20. 

  20. .sidebar{width:220px;background:#1a1a2e;color:#fff;padding:12px;overflow-y:auto;flex-shrink:0}
    21. 

  21. .sidebar h3{font-size:14px;margin:8px 0;color:#e94560;border-bottom:1px solid #333;padding-bottom:4px}
    22. 

  22. .node-item{background:#16213e;margin:4px 0;padding:8px;border-radius:6px;cursor:grab;font-size:12px;border:1px solid #0f3460;transition:all .2s}
    23. 

  23. .node-item:hover{background:#0f3460;border-color:#e94560;transform:translateX(2px)}
    24. 

  24. .node-item .type-tag{display:inline-block;background:#e94560;color:#fff;padding:1px 6px;border-radius:3px;font-size:10px;margin-right:6px}
    25. 

  25. .main{flex:1;position:relative}
    26. 

  26. .toolbar{position:absolute;top:10px;left:10px;z-index:10;display:flex;gap:8px}
    27. 

  27. .toolbar button{padding:6px 14px;border:none;border-radius:4px;cursor:pointer;font-size:12px}
    28. 

  28. .btn-primary{background:#e94560;color:#fff}
    29. 

  29. .btn-secondary{background:#0f3460;color:#fff}
    30. 

  30. .btn-success{background:#22c55e;color:#fff}
    31. 

  31. .prop-panel{width:320px;background:#f8f9fa;border-left:2px solid #dee2e6;padding:12px;overflow-y:auto;flex-shrink:0;font-size:13px}
    32. 

  32. .prop-panel h3{color:#1a1a2e;margin-bottom:10px}
    33. 

  33. .prop-panel label{display:block;margin:6px 0 2px;color:#555;font-weight:600}
    34. 

  34. .prop-panel input,.prop-panel textarea,.prop-panel select{width:100%;padding:6px;border:1px solid #ccc;border-radius:4px;font-size:12px;margin-bottom:6px}
    35. 

  35. .prop-panel textarea{min-height:60px;font-family:monospace}
    36. 

  36. .vue-flow__node{font-size:12px;min-width:120px;text-align:center}
    37. 

  37. .flow-node{padding:8px 12px;border-radius:8px;border:2px solid;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.1)}
    38. 

  38. .flow-node.start{border-color:#22c55e}
    39. 

  39. .flow-node.ai{border-color:#8b5cf6}
    40. 

  40. .flow-node.msg{border-color:#3b82f6}
    41. 

  41. .flow-node.cond{border-color:#f59e0b}
    42. 

  42. .flow-node.end{border-color:#ef4444}
    43. 

  43. .flow-node.default{border-color:#6b7280}
    44. 

  44. .node-name{font-weight:700}
    45. 

  45. .node-desc{font-size:10px;color:#888;margin-top:2px}
    46. 

  46. .modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}
    47. 

  47. .modal{background:#fff;border-radius:12px;padding:24px;width:500px;max-height:80vh;overflow-y:auto}
    48. 

  48. .modal h4{margin-bottom:12px}
    49. 

  49. .modal textarea{width:100%;min-height:120px;margin:8px 0;font-family:monospace;font-size:12px;padding:8px}
    50. 

  50. .modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
    51. 

  51. </style>
    52. 

  52. </head>
    53. 

  53. <body>
    54. 

  54. <div id="app">
    55. 

  55.   <div class="sidebar">
    56. 

  56.     <h3>🦞 龙虾引擎</h3>
    57. 

  57.     <div v-for="(group,gname) in nodeGroups" :key="gname">
    58. 

  58.       <h3>{{gname}}</h3>
    59. 

  59.       <div class="node-item" v-for="nt in group" :key="nt.type"
    60. 

  60.            @dragstart="onDragStart($event,nt)" draggable="true">
    61. 

  61.         <span class="type-tag">{{nt.type}}</span>{{nt.name}}
    62. 

  62.       </div>
    63. 

  63.     </div>
    64. 

  64.     <div style="margin-top:12px;border-top:1px solid #333;padding-top:8px">
    65. 

  65.       <button class="btn-primary" style="width:100%;padding:8px;margin:4px 0" @click="showGenerate=true">🤖 AI生成工作流</button>
    66. 

  66.       <button class="btn-secondary" style="width:100%;padding:8px;margin:4px 0" @click="exportJson">📋 导出JSON</button>
    67. 

  67.       <button class="btn-success" style="width:100%;padding:8px;margin:4px 0" @click="saveWorkflow">💾 保存到服务器</button>
    68. 

  68.       <button class="btn-secondary" style="width:100%;padding:8px;margin:4px 0" @click="showLoad=true">📂 加载工作流</button>
    69. 

  69.     </div>
    70. 

  70.   </div>
    71. 

  71. 

  72.   <div class="main" @drop="onDrop" @dragover.prevent>
    73. 

  73.     <div class="toolbar">
    74. 

  74.       <button class="btn-primary" @click="fitView()">🎯 适应视图</button>
    75. 

  75.       <button class="btn-secondary" @click="undo()">↩ 撤销</button>
    76. 

  76.     </div>
    77. 

  77.     <vue-flow ref="flowRef" v-model="elements" :node-types="nodeTypes"
    78. 

  78.       :default-edge-options="{animated:true,style:{stroke:'#64748b',strokeWidth:2}}"
    79. 

  79.       @node-click="onNodeClick" @connect="onConnect" style="height:100%;background:#f1f5f9">
    80. 

  80.       <template #node-start="props"><div class="flow-node start"><div class="node-name">🚀 {{props.data.label}}</div></div></template>
    81. 

  81.       <template #node-ai="props"><div class="flow-node ai"><div class="node-name">🧠 {{props.data.label}}</div></div></template>
    82. 

  82.       <template #node-msg="props"><div class="flow-node msg"><div class="node-name">💬 {{props.data.label}}</div></div></template>
    83. 

  83.       <template #node-cond="props"><div class="flow-node cond"><div class="node-name">🔀 {{props.data.label}}</div></div></template>
    84. 

  84.       <template #node-end="props"><div class="flow-node end"><div class="node-name">🏁 {{props.data.label}}</div></div></template>
    85. 

  85.       <template #node-default="props"><div class="flow-node default"><div class="node-name">📌 {{props.data.label}}</div></div></template>
    86. 

  86.       <vue-flow-background />
    87. 

  87.       <vue-flow-minimap />
    88. 

  88.       <vue-flow-controls />
    89. 

  89.     </vue-flow>
    90. 

  90.   </div>
    91. 

  91. 

  92.   <div class="prop-panel" v-if="selectedNode">
    93. 

  93.     <h3>节点属性</h3>
    94. 

  94.     <label>节点编码</label><input v-model="selectedNode.data.nodeCode">
    95. 

  95.     <label>节点名称</label><input v-model="selectedNode.data.label">
    96. 

  96.     <label>节点类型</label>
    97. 

  97.     <select v-model.number="selectedNode.data.nodeType" @change="onTypeChange">
    98. 

  98.       <option v-for="nt in allNodes" :value="nt.type" :key="nt.type">{{nt.type}}-{{nt.name}}</option>
    99. 

  99.     </select>
    100. 

  100.     <label>下一节点</label><input v-model="selectedNode.data.nextNodeCode" placeholder="next_node_code">
    101. 

  101.     <label>话术模板</label><textarea v-model="selectedNode.data.messageTemplate" placeholder="支持 ${变量}"></textarea>
    102. 

  102.     <label>条件表达式</label><textarea v-model="selectedNode.data.conditionExpr" placeholder='{"field":"intent","op":"eq","value":"purchase"}'></textarea>
    103. 

  103.     <label>节点配置(JSON)</label><textarea v-model="selectedNode.data.nodeConfig" placeholder='{"collectFields":["1","2"]}'></textarea>
    104. 

  104.     <label>最大轮次</label><input v-model.number="selectedNode.data.maxRounds" type="number" min="0">
    105. 

  105.     <button class="btn-primary" style="width:100%;margin-top:8px;padding:8px" @click="selectedNode=null">关闭</button>
    106. 

  106.   </div>
    107. 

  107. </div>
    108. 

  108. 

  109. <div class="modal-overlay" v-if="showGenerate">
    110. 

  110.   <div class="modal">
    111. 

  111.     <h4>🤖 AI生成工作流</h4>
    112. 

  112.     <label>需求描述</label>
    113. 

  113.     <textarea v-model="genReq" placeholder="例如：我需要一个旅游行业的客户跟进流程，包括意图识别、信息收集、发送方案、条件判断、创建跟进任务..."></textarea>
    114. 

  114.     <label>行业类型</label>
    115. 

  115.     <select v-model="genIndustry">
    116. 

  116.       <option value="travel">旅游</option><option value="medical">医美</option>
    117. 

  117.       <option value="education">教育</option><option value="insurance">保险</option>
    118. 

  118.       <option value="general">通用</option>
    119. 

  119.     </select>
    120. 

  120.     <label>已有工作流JSON(可选-迭代优化)</label>
    121. 

  121.     <textarea v-model="genExisting" placeholder="粘贴已有工作流JSON进行迭代优化...留空则全新生成"></textarea>
    122. 

  122.     <label>迭代指令(可选)</label>
    123. 

  123.     <input v-model="genInstruction" placeholder="如：增加关怀节点、优化话术、调整条件">
    124. 

  124.     <div class="actions">
    125. 

  125.       <button class="btn-secondary" @click="showGenerate=false">取消</button>
    126. 

  126.       <button class="btn-primary" @click="aiGenerate()">生成</button>
    127. 

  127.     </div>
    128. 

  128.     <div v-if="genResult" style="margin-top:12px;background:#f0fdf4;padding:10px;border-radius:6px;font-size:12px">
    129. 

  129.       <b>评分:{{genResult.score}}</b> {{genResult.details}}
    130. 

  130.     </div>
    131. 

  131.   </div>
    132. 

  132. </div>
    133. 

  133. 

  134. <div class="modal-overlay" v-if="showLoad">
    135. 

  135.   <div class="modal">
    136. 

  136.     <h4>📂 加载工作流</h4>
    137. 

  137.     <textarea v-model="loadJson" placeholder="粘贴工作流JSON..."></textarea>
    138. 

  138.     <div class="actions">
    139. 

  139.       <button class="btn-secondary" @click="showLoad=false">取消</button>
    140. 

  140.       <button class="btn-primary" @click="importJson()">加载</button>
    141. 

  141.     </div>
    142. 

  142.   </div>
    143. 

  143. </div>
    144. 

  144. </div>
    145. 

  145. 

  146. <script>
    147. 

  147. const {createApp,ref,computed,reactive,onMounted} = Vue
    148. 

  148. const nodeGroups = {
    149. 

  149.   '流程控制':[{type:1,name:'开始',icon:'🚀'},{type:99,name:'结束',icon:'🏁'},{type:4,name:'等待',icon:'⏳'}],
    150. 

  150.   'AI智能':[{type:2,name:'AI处理',icon:'🧠'},{type:11,name:'知识检索',icon:'🔍'}],
    151. 

  151.   '交互触达':[{type:3,name:'发送消息',icon:'💬'},{type:7,name:'信息收集',icon:'📋'},{type:10,name:'HTTP调用',icon:'🌐'}],
    152. 

  152.   '逻辑控制':[{type:5,name:'条件判断',icon:'🔀'},{type:13,name:'循环迭代',icon:'🔄'},{type:16,name:'变量赋值',icon:'📝'}],
    153. 

  153.   '业务操作':[{type:6,name:'创建任务',icon:'✅'},{type:8,name:'转人工',icon:'👤'},{type:9,name:'标签操作',icon:'🏷'}],
    154. 

  154.   '扩展能力':[{type:12,name:'代码执行',icon:'⚡'},{type:14,name:'数据库查询',icon:'🗄'},{type:15,name:'子流程',icon:'📦'}]
    155. 

  155. }
    156. 

  156. const allNodes = Object.values(nodeGroups).flat()
    157. 

  157. 

  158. const typeToCategory = {}
    159. 

  159. allNodes.forEach(n => {
    160. 

  160.   if (n.type === 1) typeToCategory[n.type] = 'start'
    161. 

  161.   else if (n.type === 99) typeToCategory[n.type] = 'end'
    162. 

  162.   else if (n.type === 2 || n.type === 11) typeToCategory[n.type] = 'ai'
    163. 

  163.   else if (n.type === 3 || n.type === 7 || n.type === 10) typeToCategory[n.type] = 'msg'
    164. 

  164.   else if (n.type === 5 || n.type === 13 || n.type === 16) typeToCategory[n.type] = 'cond'
    165. 

  165.   else typeToCategory[n.type] = 'default'
    166. 

  166. })
    167. 

  167. 

  168. const app = createApp({
    169. 

  169.   setup(){
    170. 

  170.     const flowRef = ref(null)
    171. 

  171.     const selectedNode = ref(null)
    172. 

  172.     const elements = ref([
    173. 

  173.       {id:'1',type:'start',position:{x:300,y:50},data:{label:'开始',nodeCode:'START',nodeType:1,nextNodeCode:'MSG_1',messageTemplate:'',conditionExpr:'',nodeConfig:'{}',maxRounds:0}},
    174. 

  174.       {id:'2',type:'msg',position:{x:300,y:180},data:{label:'欢迎消息',nodeCode:'MSG_1',nodeType:3,nextNodeCode:'END',messageTemplate:'您好${customerName}，欢迎咨询！',conditionExpr:'',nodeConfig:'{}',maxRounds:0}},
    175. 

  175.       {id:'3',type:'end',position:{x:300,y:310},data:{label:'结束',nodeCode:'END',nodeType:99,nextNodeCode:'',messageTemplate:'',conditionExpr:'',nodeConfig:'{}',maxRounds:0}},
    176. 

  176.       {id:'e1-2',source:'1',target:'2',animated:true},
    177. 

  177.     ])
    178. 

  178.     const showGenerate = ref(false), showLoad = ref(false)
    179. 

  179.     const genReq = ref(''), genIndustry = ref('travel'), genExisting = ref(''), genInstruction = ref('')
    180. 

  180.     const genResult = ref(null), loadJson = ref('')
    181. 

  181.     let nodeIdCounter = elements.value.length
    182. 

  182. 

  183.     const nodeTypes = {
    184. 

  184.       start:{template:'#node-start'}, ai:{template:'#node-ai'}, msg:{template:'#node-msg'},
    185. 

  185.       cond:{template:'#node-cond'}, end:{template:'#node-end'}, default:{template:'#node-default'}
    186. 

  186.     }
    187. 

  187. 

  188.     function onDragStart(ev,nt){
    189. 

  189.       ev.dataTransfer.setData('application/json',JSON.stringify(nt))
    190. 

  190.       ev.dataTransfer.effectAllowed = 'move'
    191. 

  191.     }
    192. 

  192.     function onDrop(ev){
    193. 

  193.       const nt = JSON.parse(ev.dataTransfer.getData('application/json'))
    194. 

  194.       const pos = flowRef.value?.screenToFlowCoordinate?.({x:ev.clientX,y:ev.clientY}) || {x:ev.offsetX,y:ev.offsetY}
    195. 

  195.       nodeIdCounter++
    196. 

  196.       const cat = typeToCategory[nt.type] || 'default'
    197. 

  197.       elements.value.push({
    198. 

  198.         id:String(nodeIdCounter), type:cat, position:pos,
    199. 

  199.         data:{label:nt.name,nodeCode:nt.name.toUpperCase()+'_'+nodeIdCounter,nodeType:nt.type,
    200. 

  200.               nextNodeCode:'',messageTemplate:'',conditionExpr:'',nodeConfig:'{}',maxRounds:0}
    201. 

  201.       })
    202. 

  202.     }
    203. 

  203.     function onNodeClick({node}){ selectedNode.value = node }
    204. 

  204.     function onConnect(conn){
    205. 

  205.       elements.value.push({id:'e'+conn.source+'-'+conn.target,source:conn.source,target:conn.target,animated:true})
    206. 

  206.     }
    207. 

  207.     function onTypeChange(){
    208. 

  208.       if(selectedNode.value){
    209. 

  209.         selectedNode.value.type = typeToCategory[selectedNode.value.data.nodeType] || 'default'
    210. 

  210.       }
    211. 

  211.     }
    212. 

  212.     function fitView(){ flowRef.value?.fitView() }
    213. 

  213.     function undo(){ elements.value.pop() }
    214. 

  214.     function exportJson(){
    215. 

  215.       const nodes = elements.value.filter(e=>e.type&&e.data).map(e=>({nodeCode:e.data.nodeCode,nodeName:e.data.label,nodeType:e.data.nodeType,sortNo:parseInt(e.id),nextNodeCode:e.data.nextNodeCode,messageTemplate:e.data.messageTemplate||'',conditionExpr:e.data.conditionExpr||'',nodeConfig:e.data.nodeConfig||'{}',maxRounds:e.data.maxRounds||0}))
    216. 

  216.       const edges = elements.value.filter(e=>e.source&&e.target).map((e,i)=>({edgeKey:'EDGE_'+i,sourceNodeCode:elements.value.find(n=>n.id===e.source)?.data?.nodeCode||'',targetNodeCode:elements.value.find(n=>n.id===e.target)?.data?.nodeCode||'',edgeLabel:''}))
    217. 

  217.       const json = JSON.stringify({templateName:'工作流模板',description:'',nodes,edges},null,2)
    218. 

  218.       navigator.clipboard.writeText(json).then(()=>alert('已复制到剪贴板'))
    219. 

  219.       console.log(json)
    220. 

  220.     }
    221. 

  221. 

  222.     async function saveWorkflow(){
    223. 

  223.       exportJson()
    224. 

  224.       const token = localStorage.getItem('company_token') || ''
    225. 

  225.       try{
    226. 

  226.         const r = await fetch('http://localhost:8006/workflow/lobster/template/save',{
    227. 

  227.           method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer '+token},
    228. 

  228.           body:JSON.stringify(JSON.parse(await navigator.clipboard.readText()))
    229. 

  229.         })
    230. 

  230.         const d = await r.json()
    231. 

  231.         alert(d.code===200?'保存成功！':'保存失败: '+d.msg)
    232. 

  232.       }catch(e){alert('请先登录系统获取token，或在控制台复制JSON手动保存')}
    233. 

  233.     }
    234. 

  234. 

  235.     async function aiGenerate(){
    236. 

  236.       genResult.value = null
    237. 

  237.       genStatus.value = 'submitting'
    238. 

  238.       genProgress.value = '正在提交AI生成任务...'
    239. 

  239.       
    240. 

  240.       const body = {requirement:genReq.value,industryType:genIndustry.value,modelConfig:{modelA:'doubao-lite',modelB:'doubao-lite',modelC:'doubao-lite'}}
    241. 

  241.       if(genExisting.value){
    242. 

  242.         body.existingWorkflow = genExisting.value
    243. 

  243.         body.modifyInstruction = genInstruction.value||'优化工作流结构'
    244. 

  244.       }
    245. 

  245.       try{
    246. 

  246.         /* 第一步: 提交异步任务, 立即返回recordId */
    247. 

  247.         const submitRes = await fetch('/workflow/ai-generator/generate',{
    248. 

  248.           method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)
    249. 

  249.         })
    250. 

  250.         const submitData = await submitRes.json()
    251. 

  251.         if(submitData.code!==200||!submitData.data||!submitData.data.recordId){
    252. 

  252.           genStatus.value = 'error'
    253. 

  253.           genProgress.value = '提交失败'
    254. 

  254.           alert('AI生成任务提交失败')
    255. 

  255.           return
    256. 

  256.         }
    257. 

  257. 

  258.         const recordId = submitData.data.recordId
    259. 

  259.         genProgress.value = 'AI正在生成工作流(模型A生成中)...'
    260. 

  260.         
    261. 

  261.         /* 第二步: 轮询任务状态, 每3秒查询一次, 最多轮询60次(3分钟) */
    262. 

  262.         for(let i=0;i<60;i++){
    263. 

  263.           await new Promise(r=>setTimeout(r,3000))
    264. 

  264.           const pollRes = await fetch('/workflow/ai-generator/result/'+recordId+'/detail')
    265. 

  265.           const pollData = await pollRes.json()
    266. 

  266.           if(pollData.code===200&&pollData.data){
    267. 

  267.             const result = pollData.data
    268. 

  268.             if(result.status==='completed'||result.status==='done'){
    269. 

  269.               genResult.value = {score:result.qualityScore||'85',details:result.suggestions||''}
    270. 

  270.               elements.value = parseWorkflowJson(result.workflowJson || result.nodes || result)
    271. 

  271.               genStatus.value = 'done'
    272. 

  272.               genProgress.value = 'AI生成完成! (得分:'+(result.qualityScore||85)+')'
    273. 

  273.               return
    274. 

  274.             }
    275. 

  275.             if(result.status==='failed'){
    276. 

  276.               genStatus.value = 'error'
    277. 

  277.               genProgress.value = '生成失败: '+(result.errorMsg||'未知错误')
    278. 

  278.               return
    279. 

  279.             }
    280. 

  280.             /* 进度更新 */
    281. 

  281.             if(i<5) genProgress.value = 'AI正在生成工作流(模型A生成中)...'
    282. 

  282.             else if(i<10) genProgress.value = '模型B优化中...'
    283. 

  283.             else genProgress.value = '模型C质检评分中...'
    284. 

  284.           }
    285. 

  285.         }
    286. 

  286.         genStatus.value = 'error'
    287. 

  287.         genProgress.value = '超时(3分钟)，请重试'
    288. 

  288.       }catch(e){
    289. 

  289.         genStatus.value = 'error'
    290. 

  290.         genProgress.value = '请求失败: '+e.message
    291. 

  291.         alert('AI生成请求失败: '+e.message)
    292. 

  292.       }
    293. 

  293.     }
    294. 

  294. 

  295.     function importJson(){
    296. 

  296.       try{
    297. 

  297.         elements.value = parseWorkflowJson(JSON.parse(loadJson.value))
    298. 

  298.         showLoad.value = false
    299. 

  299.       }catch(e){alert('JSON格式错误: '+e.message)}
    300. 

  300.     }
    301. 

  301. 

  302.     function parseWorkflowJson(wf){
    303. 

  303.       if(typeof wf==='string') wf = JSON.parse(wf)
    304. 

  304.       const nodes = (wf.nodes||[]).map((n,i)=>({id:String(i+1),type:typeToCategory[n.nodeType]||'default',position:{x:300,y:50+i*130},data:{label:n.nodeName||n.name||'',nodeCode:n.nodeCode||'',nodeType:n.nodeType||3,nextNodeCode:n.nextNodeCode||'',messageTemplate:n.messageTemplate||'',conditionExpr:n.conditionExpr||'',nodeConfig:typeof n.nodeConfig==='string'?n.nodeConfig:JSON.stringify(n.nodeConfig),maxRounds:n.maxRounds||0}}))
    305. 

  305.       const edgeMap = {}
    306. 

  306.       nodes.forEach(n=>{if(n.data.nextNodeCode) edgeMap[n.data.nodeCode]=n.data.nextNodeCode})
    307. 

  307.       const edges = (wf.edges||[]).map((e,i)=>({id:'e'+i,source:nodes.find(n=>n.data.nodeCode===e.sourceNodeCode)?.id||'',target:nodes.find(n=>n.data.nodeCode===e.targetNodeCode)?.id||'',animated:true}))
    308. 

  308.       nodeIdCounter = nodes.length
    309. 

  309.       return [...nodes,...edges]
    310. 

  310.     }
    311. 

  311. 

  312.     return {nodeGroups,allNodes,flowRef,elements,selectedNode,nodeTypes,
    313. 

  313.       showGenerate,showLoad,genReq,genIndustry,genExisting,genInstruction,genResult,loadJson,
    314. 

  314.       onDragStart,onDrop,onNodeClick,onConnect,onTypeChange,fitView,undo,exportJson,saveWorkflow,aiGenerate,importJson}
    315. 

  315.   }
    316. 

  316. })
    317. 

  317. app.component('vue-flow',VueFlow.default)
    318. 

  318. app.component('vue-flow-background',VueFlowBackground.default)
    319. 

  319. app.component('vue-flow-minimap',VueFlowMinimap.default)
    320. 

  320. app.component('vue-flow-controls',VueFlowControls.default)
    321. 

  321. app.mount('#app')
    322. 

  322. </script>
    323. 

  323. </body>
    324. 

  324. </html>
    325.