npm - @steedos-labs/plugin-workflow - Versions diffs - 3.0.83 → 3.0.84 - Mend

@steedos-labs/plugin-workflow 3.0.83 → 3.0.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/designer/dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <link rel="shortcut icon" type="image/svg+xml" href="/images/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>designer</title>
-    <script type="module" crossorigin src="/api/workflow/designer-v2/assets/index-WAa42ctb.js"></script>
+    <script type="module" crossorigin src="/api/workflow/designer-v2/assets/index-DpFVuLlI.js"></script>
     <link rel="stylesheet" crossorigin href="/api/workflow/designer-v2/assets/index-B56yvQDB.css">
   </head>
   <body>

package/main/default/client/flow2_render.client.js CHANGED Viewed

@@ -1,5 +1,5 @@
 waitForThing(window, 'antd').then(function(){
-    var v = '3.0.83';
+    var v = '3.0.84';
     loadJs('/amis-renderer/amis-renderer.js?v=' + v);
     loadCss('/amis-renderer/amis-renderer.css?v=' + v)
 })

package/main/default/objects/instances/buttons/instance_delete_many.button.yml CHANGED Viewed

@@ -127,7 +127,7 @@ amis_schema: |-
                       ]
                   }
               },
-              "hiddenOn": "${listName!==\"draft\" || display===\"split\"}"
+              "hiddenOn": "${listName!==\"draft\" || display===\"split\" || window:innerWidth <= 768}"
           }
       ],
       "regions": [

package/main/default/objects/instances/listviews/monitor.listview.yml CHANGED Viewed

@@ -48,6 +48,6 @@ extra_columns:
   - extras
   - values
 disableSwitch: true
-# filter_required: true
+filter_required: true
 # searchable_default:
 #   submit_date: "${[STARTOF(DATEMODIFY(NOW(), -180, 'day'), 'day'),ENDOF(NOW(), 'day')]}"

package/main/default/pages/instance_tasks_detail.page.amis.json CHANGED Viewed

@@ -25,19 +25,17 @@
           "type": "service",
           "id": "u:d6db0c84f150",
           "body": {},
-          "messages": {
-          },
+          "messages": {},
           "schemaApi": {
             "url": "${context.rootUrl}/graphql?recordId=${recordId}",
             "method": "post",
-            "messages": {
-            },
+            "messages": {},
             "dataType": "json",
             "headers": {
               "Authorization": "Bearer ${context.tenantId},${context.authToken}"
             },
             "requestAdaptor": "\nconst { recordId } = api.body;\napi.data = {\n  query: `{instance_task:instance_tasks__findOne(id: \"${recordId}\"){_id,instance,is_read}}`\n};\n\nreturn api;",
-            "adaptor": "if(!payload.data.instance_task){return payload;}\nlet boxName = api.body.side_listview_id === 'inbox' ? 'inbox' : 'outbox';\npayload.data = {\n  instanceId: payload.data.instance_task.instance,\n  boxName: boxName,\n  isRead: payload.data.instance_task.is_read\n}\n; console.log('=======>payload===>', payload);  \n const result = {data: {'type':'wrapper','className':'p-0 h-full','body':[{'type':'steedos-instance-detail','id':'u:40052b3812c1','label':'Instance Detail','instanceId':payload.data.instanceId,'boxName':context.side_listview_id}],'id':'u:829a40757f0a'}};console.log('result===>', result); return result;"
+            "adaptor": "if(!payload.data.instance_task){\n  // 同步清掉 PageRecordDetail.tsx 加上的 loading 遮罩和滑动动画\n  try{\n    document.body.classList.remove('steedos-detail-loading');\n    if(window.$){window.$('.page-object-detail-wrapper').removeClass('slide-out-bottom').addClass('slide-in-top');}\n  }catch(e){}\n  // 简易 i18n：plugins 端 adaptor 无法 import i18next，按浏览器语言切换中英文\n  var isZh=(navigator.language||'').toLowerCase().indexOf('zh')===0;\n  var notFoundText=isZh?'\\u65e0\\u6cd5\\u627e\\u5230\\u8bb0\\u5f55':'No records found.';\n  var backText=isZh?'\\u8fd4\\u56de\\u5217\\u8868':'Back to list';\n  // 警示三角图标（Heroicons ExclamationTriangle，amber-500 描边）\n  var svgHtml=\"<span class='empty-record-icon' style='display:block;margin-bottom:16px'><svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='#f59e0b'><path stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.732 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z'/></svg></span>\";\n  // 返回按钮统一调用全局 window.goBack()，参考 header.js 内置详情返回按钮\n  var nfBody=[\n    {type:'html',html:svgHtml},\n    {type:'tpl',tpl:notFoundText,className:'empty-record-title text-xl text-gray-800 font-medium mb-4'},\n    {type:'button',label:backText,level:'primary',className:'empty-record-back-btn',onEvent:{click:{actions:[{actionType:'custom',script:'window.goBack && window.goBack()'}]}}}\n  ];\n  // isRead:true 防止下游 set_have_read ajax 触发\n  return {data:{type:'wrapper',className:'flex flex-col items-center justify-center bg-white p-8 text-center',style:{minHeight:'100vh'},body:nfBody,id:'u:notfound-instance-task',isRead:true}};\n}\nlet boxName = api.body.side_listview_id === 'inbox' ? 'inbox' : 'outbox';\npayload.data = {\n  instanceId: payload.data.instance_task.instance,\n  boxName: boxName,\n  isRead: payload.data.instance_task.is_read\n};\nreturn {data: {'type':'wrapper','className':'p-0 h-full','body':[{'type':'steedos-instance-detail','id':'u:40052b3812c1','label':'Instance Detail','instanceId':payload.data.instanceId,'boxName':context.side_listview_id}],'id':'u:829a40757f0a'}};"
           },
           "onEvent": {
             "fetchSchemaInited": {
@@ -64,8 +62,7 @@
   "regions": [
     "body"
   ],
-  "data": {
-  },
+  "data": {},
   "className": "steedos-instance-wrapper",
   "id": "u:d37465183f56",
   "bodyClassName": "p-0 flex flex-1 overflow-hidden h-full",

package/main/default/pages/page_instance_print.page.amis.json CHANGED Viewed

@@ -201,7 +201,7 @@
                 {
                     "id": "u:259e5e73a3e2",
                     "type": "tpl",
-                    "tpl": "无权限",
+                    "tpl": "${recordNotFound ? '无法找到记录' : '无权限'}",
                     "visibleOn": "${permission === false}"
                 }
             ],
@@ -222,7 +222,7 @@
         "method": "get",
         "data": {},
         "requestAdaptor": "",
-        "adaptor": "",
+        "adaptor": "if (payload && payload.errors && payload.errors.length) { return {data: {permission: false, recordNotFound: true}}; } return payload;",
         "messages": {},
         "sendOn": "${recordId}"
     },

package/main/default/routes/api_workflow_chart.router.js CHANGED Viewed

@@ -7,6 +7,7 @@ const _ = require('lodash');
 const { getCollection } = require("../utils/collection");
 const WorkflowManager = require('../manager/workflow_manager');
 const getHandlersManager = require('../manager/handlers_manager');
+const UUFlowManager = require('../manager/uuflow_manager');
 const { t } = require('@steedos/i18n')
 const FlowversionAPI = {
@@ -136,37 +137,118 @@ const FlowversionAPI = {
         return stepName;
     },
+    // 查找从fromStep到targetStepId的边路径（可能经过中间条件节点）
+    // 返回边集合，如 ["stepA->conditionB", "conditionB->stepC"]
+    findEdgePath: function (fromStep, targetStepId, stepsMap) {
+        let edges = [];
+        // 直接连线
+        if (fromStep.lines) {
+            for (let line of fromStep.lines) {
+                if (line.to_step === targetStepId) {
+                    edges.push(`${fromStep._id}->${targetStepId}`);
+                    return edges;
+                }
+            }
+            // 通过条件节点间接连线（BFS，最多2层中间节点）
+            for (let line of fromStep.lines) {
+                let midStep = stepsMap[line.to_step];
+                if (midStep && midStep.step_type === 'condition') {
+                    if (midStep.lines) {
+                        for (let midLine of midStep.lines) {
+                            if (midLine.to_step === targetStepId) {
+                                edges.push(`${fromStep._id}->${midStep._id}`);
+                                edges.push(`${midStep._id}->${targetStepId}`);
+                                return edges;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // 找不到直接路径，简单标记起止边
+        edges.push(`${fromStep._id}->${targetStepId}`);
+        return edges;
+    },
     generateStepsGraphSyntax: async function (steps, currentStepId, isConvertToString, direction, instance_id, instance) {
         let nodes = [`graph ${direction}`];
         let cachedStepNames = {};
         let skipSteps = new Set(instance?.skip_steps || []);
+        let completedStepIds = instance?._completedStepIds || new Set();
+        let traversedEdges = instance?._traversedEdges || new Set();
+        let predictedEdges = instance?._predictedEdges || new Set();
+        let isInstanceFinished = instance?._isFinished === true;
+        let linkIndex = 0;
+        let traversedLinkIndices = [];
+        let predictedLinkIndices = [];
+        // 先输出所有边，类指令统一在所有边之后输出，避免 mermaid 因
+        // “class 指令出现在节点首次声明之前”而静默忽略 class（V1/V2b 根因）
         for (let step of steps) {
             let lines = step.lines;
             if (lines?.length) {
                 for (let line of lines) {
                     let stepName = "";
-                    // 标记条件节点
                     if (step.name) {
-                        if (step.step_type === "condition") {
-                            nodes.push(`	class ${step._id} condition;`);
-                        }
                         stepName = await FlowversionAPI.getStepName(step, cachedStepNames, instance_id, instance);
                     } else {
                         stepName = "";
                     }
-                    // Mark skipped steps
-                    if (skipSteps.has(step._id)) {
-                        nodes.push(`	class ${step._id} skip-step;`);
-                    }
-                    // 原findPropertyByPK("_id",line.to_step)，转为find
                     let toStep = steps.find(s => s._id === line.to_step);
                     let toStepName = await FlowversionAPI.getStepName(toStep, cachedStepNames, instance_id, instance);
-                    nodes.push(`	${step._id}("${stepName}")-->${line.to_step}("${toStepName}")`);
+                    if (step.step_type === "condition" && line.name) {
+                        let lineName = FlowversionAPI.replaceErrorSymbol(line.name);
+                        nodes.push(`	${step._id}("${stepName}")-->|${lineName}|${line.to_step}("${toStepName}")`);
+                    } else {
+                        nodes.push(`	${step._id}("${stepName}")-->${line.to_step}("${toStepName}")`);
+                    }
+                    if (traversedEdges.has(`${step._id}->${line.to_step}`)) {
+                        traversedLinkIndices.push(linkIndex);
+                    } else if (predictedEdges.has(`${step._id}->${line.to_step}`)) {
+                        predictedLinkIndices.push(linkIndex);
+                    }
+                    linkIndex++;
                 }
             }
         }
-        if (currentStepId) {
-            nodes.push(`	class ${currentStepId} current-step-node;`);
+        // 覆盖 mermaid 默认主题对未流转(default)节点的紫色 inline style，使其匹配图例的灰色
+        nodes.push(`	classDef default fill:#f1f5f9,stroke:#cbd5e1,stroke-width:1.5px,color:#475569;`);
+        // 统一输出 class 指令，优先级：skip-step > current-step-node > completed-step > condition
+        // 已结束流程（isInstanceFinished）不再标记 current-step-node（V3），最后一步按已完成展示
+        let classOf = new Map();
+        let assign = (id, cls) => { if (!classOf.has(id)) classOf.set(id, cls); };
+        if (!isInstanceFinished && currentStepId) {
+            assign(currentStepId, 'current-step-node');
+        }
+        for (let step of steps) {
+            if (skipSteps.has(step._id)) {
+                assign(step._id, 'skip-step');
+            }
+        }
+        for (let stepId of completedStepIds) {
+            if (skipSteps.has(stepId)) continue;
+            if (!isInstanceFinished && stepId === currentStepId) continue;
+            assign(stepId, 'completed-step');
+        }
+        for (let step of steps) {
+            if (step.step_type === 'condition') {
+                assign(step._id, 'condition');
+            }
+        }
+        for (let [id, cls] of classOf) {
+            nodes.push(`	class ${id} ${cls};`);
+        }
+        // 先将所有连线设为灰色（不会流转的路径）
+        if (linkIndex > 0) {
+            let allIndices = Array.from({length: linkIndex}, (_, i) => i).join(',');
+            nodes.push(`	linkStyle ${allIndices} stroke:#cbd5e1,stroke-width:1.5px;`);
+        }
+        // 高亮已流转的连线（绿色实线）
+        if (traversedLinkIndices.length > 0) {
+            nodes.push(`	linkStyle ${traversedLinkIndices.join(',')} stroke:#10b981,stroke-width:3px;`);
+        }
+        // 高亮预测的下一步路径（蓝色虚线）
+        if (predictedLinkIndices.length > 0) {
+            nodes.push(`	linkStyle ${predictedLinkIndices.join(',')} stroke:#3b82f6,stroke-width:2px,stroke-dasharray:5 3;`);
         }
         if (isConvertToString) {
             let graphSyntax = nodes.join("\n");
@@ -505,12 +587,124 @@ const FlowversionAPI = {
                 break;
             }
             default: {
-                let instance = await db.instances.findOne({ _id: instance_id }, { projection: { flow_version: 1, flow: 1, step_approve: 1, skip_steps: 1, traces: { $slice: -1 } } });
+                let instance = await db.instances.findOne({ _id: instance_id });
                 if (instance) {
-                    let currentStepId = instance.traces?.[0]?.step;
+                    let traces = instance.traces || [];
+                    let currentStepId = traces.length > 0 ? traces[traces.length - 1]?.step : null;
+                    // 收集已完成的步骤ID和已流转的路径(from_step -> to_step)
+                    let completedStepIds = new Set();
+                    let traversedEdges = new Set();
+                    for (let i = 0; i < traces.length; i++) {
+                        let trace = traces[i];
+                        if (trace.step) {
+                            completedStepIds.add(trace.step);
+                        }
+                        // 从前一个trace到当前trace的连线视为已流转
+                        if (i > 0 && traces[i - 1].step && trace.step) {
+                            traversedEdges.add(`${traces[i - 1].step}->${trace.step}`);
+                        }
+                    }
+                    instance._completedStepIds = completedStepIds;
+                    instance._traversedEdges = traversedEdges;
+                    let isInstanceFinished = instance.state === 'completed' || instance.state === 'terminated';
+                    instance._isFinished = isInstanceFinished;
+                    // 只有进行中的单子才预测后续路径，已结束的单子不需要预测
+                    let predictedEdges = new Set();
+                    try {
+                        if (currentStepId && !isInstanceFinished) {
+                            let flow = await UUFlowManager.getFlow(instance.flow);
+                            let flowversion = UUFlowManager.getFlowVersion(flow, instance.flow_version);
+                            // 取最新trace的最新approve的_id作为参数
+                            let latestTrace = traces[traces.length - 1];
+                            let latestApproveId = null;
+                            if (latestTrace?.approves?.length) {
+                                latestApproveId = latestTrace.approves[latestTrace.approves.length - 1]._id;
+                            }
+                            let values = UUFlowManager.getUpdatedValues(instance, latestApproveId);
+                            if (process.env.STEEDOS_DEBUG) {
+                                console.log('values===>', values, latestApproveId);
+                            }
+                            let stepsMap = {};
+                            for (let s of flowversion.steps) {
+                                stepsMap[s._id] = s;
+                            }
+                            // 递归预测，最多追踪20步防止死循环
+                            let visited = new Set();
+                            let predictFrom = [currentStepId];
+                            let maxDepth = 20;
+                            let depth = 0;
+                            while (predictFrom.length > 0 && depth < maxDepth) {
+                                depth++;
+                                let nextBatch = [];
+                                for (let fromStepId of predictFrom) {
+                                    if (visited.has(fromStepId)) continue;
+                                    visited.add(fromStepId);
+                                    let fromStep = stepsMap[fromStepId];
+                                    if (!fromStep || fromStep.step_type === 'end') continue;
+                                    if (fromStep.step_type === 'condition') {
+                                        // 条件节点：优先按条件表达式评估；若返回空（如表单字段未填，
+                                        // 无法判断走哪个分支），fallback 展开所有出线，保证预测路径继续延伸（V4）
+                                        let nextStepIds = await UUFlowManager.getNextSteps(instance, flow, fromStep, '', values);
+                                        if (!nextStepIds || nextStepIds.length === 0) {
+                                            nextStepIds = (fromStep.lines || []).map(l => l.to_step);
+                                        }
+                                        for (let nextId of nextStepIds || []) {
+                                            let nextStep = stepsMap[nextId];
+                                            if (!nextStep) continue;
+                                            predictedEdges.add(`${fromStepId}->${nextId}`);
+                                            if (!visited.has(nextId)) {
+                                                nextBatch.push(nextId);
+                                            }
+                                        }
+                                    } else {
+                                        // 非条件步骤：直接根据lines找下一步，不通过getNextSteps（它会把条件节点的所有分支都展开）
+                                        let judge = fromStep.step_type === 'sign' ? 'approved' : 'submitted';
+                                        let lines = (fromStep.lines || []).filter(l => l.state === judge);
+                                        for (let line of lines) {
+                                            let toStep = stepsMap[line.to_step];
+                                            if (!toStep) continue;
+                                            predictedEdges.add(`${fromStepId}->${line.to_step}`);
+                                            if (!visited.has(line.to_step)) {
+                                                nextBatch.push(line.to_step);
+                                            }
+                                        }
+                                    }
+                                }
+                                predictFrom = nextBatch;
+                            }
+                        }
+                    } catch (e) {
+                        // 预测失败不影响主流程，但输出详细错误信息便于排查
+                        console.warn('Chart prediction failed:', e.message, e.stack);
+                    }
+                    instance._predictedEdges = predictedEdges;
                     let flowversion = await WorkflowManager.getInstanceFlowVersion(instance);
                     let steps = flowversion?.steps;
                     if (steps?.length) {
+                        // 解析经过条件节点的已流转边，将 stepA->stepC 展开为 stepA->conditionB, conditionB->stepC
+                        if (traversedEdges.size > 0) {
+                            let stepsMap = {};
+                            for (let s of steps) {
+                                stepsMap[s._id] = s;
+                            }
+                            let resolvedTraversedEdges = new Set();
+                            for (let edge of traversedEdges) {
+                                let [fromId, toId] = edge.split('->');
+                                let fromStep = stepsMap[fromId];
+                                if (fromStep) {
+                                    let edgePaths = FlowversionAPI.findEdgePath(fromStep, toId, stepsMap);
+                                    for (let e of edgePaths) {
+                                        resolvedTraversedEdges.add(e);
+                                    }
+                                } else {
+                                    resolvedTraversedEdges.add(edge);
+                                }
+                            }
+                            instance._traversedEdges = resolvedTraversedEdges;
+                        }
                         graphSyntax = await FlowversionAPI.generateStepsGraphSyntax(steps, currentStepId, false, direction, instance_id, instance);
                     } else {
                         error_msg = "没有找到当前申请单的流程步骤数据";
@@ -535,9 +729,11 @@ const FlowversionAPI = {
 					<script type="text/javascript" src="/unpkg.com/mermaid@9.1.2/dist/mermaid.min.js"></script>
 					<style>
 						body {
-							font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+							font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 							text-align: center;
-							background-color: #fff;
+							background-color: #f8fafc;
+							margin: 0;
+							padding: 20px;
 						}
 						.loading{
 							position: absolute;
@@ -547,8 +743,9 @@ const FlowversionAPI = {
 							z-index: 1100;
 							text-align: center;
 							margin-top: -30px;
-							font-size: 36px;
-							color: #dfdfdf;
+							font-size: 20px;
+							color: #94a3b8;
+							font-weight: 500;
 						}
 						.error-msg{
 							position: absolute;
@@ -557,65 +754,137 @@ const FlowversionAPI = {
 							bottom: 20px;
 							z-index: 1100;
 							text-align: center;
-							font-size: 20px;
-							color: #a94442;
+							font-size: 16px;
+							color: #dc2626;
 						}
+						/* 未流转的步骤 - 浅灰色 */
 						#flow-steps-svg .node rect{
-							fill: #ccccff;
-							stroke: rgb(144, 144, 255);
+							fill: #f1f5f9;
+							stroke: #cbd5e1;
+							stroke-width: 1.5px;
+							rx: 8px;
+							ry: 8px;
+						}
+						/* 已完成的步骤 - 蓝色调 */
+						#flow-steps-svg .node.completed-step rect{
+							fill: #dbeafe;
+							stroke: #3b82f6;
 							stroke-width: 2px;
 						}
+						#flow-steps-svg .node.completed-step .step-name{
+							color: #1e40af;
+						}
+						#flow-steps-svg .node.completed-step .step-handler-name{
+							color: #3b82f6;
+						}
+						/* 当前步骤 - 绿色高亮 + 呼吸动画 */
 						#flow-steps-svg .node.current-step-node rect{
-							fill: #cde498;
-							stroke: #13540c;
-							stroke-width: 2px;
+							fill: #d1fae5;
+							stroke: #10b981;
+							stroke-width: 2.5px;
+							animation: currentStepPulse 2s ease-in-out infinite;
+						}
+						@keyframes currentStepPulse {
+							0%, 100% { stroke-width: 2.5px; filter: drop-shadow(0 0 0px rgba(16,185,129,0)); }
+							50% { stroke-width: 3px; filter: drop-shadow(0 0 6px rgba(16,185,129,0.4)); }
+						}
+						#flow-steps-svg .node.current-step-node .step-name{
+							color: #065f46;
+							font-weight: 600;
 						}
+						#flow-steps-svg .node.current-step-node .step-handler-name{
+							color: #10b981;
+						}
+						/* 条件节点 */
 						#flow-steps-svg .node.condition rect{
-							fill: #ececff;
-							stroke: rgb(204, 204, 255);
-							stroke-width: 1px;
+							fill: #fef3c7;
+							stroke: #f59e0b;
+							stroke-width: 1.5px;
+						}
+						#flow-steps-svg .node.condition .step-name{
+							color: #92400e;
 						}
+						/* 跳过的步骤 */
 						#flow-steps-svg .node.skip-step rect{
-							fill: #e8e8e8;
-							stroke: #999999;
-							stroke-width: 2px;
+							fill: #f9fafb;
+							stroke: #d1d5db;
+							stroke-width: 1.5px;
 							stroke-dasharray: 5, 5;
-							opacity: 0.7;
+							opacity: 0.6;
 						}
 						#flow-steps-svg .node.skip-step .step-name{
-							color: #666666;
+							color: #9ca3af;
 							text-decoration: line-through;
 						}
 						#flow-steps-svg .node.skip-step .step-handler-name{
-							color: #999999;
+							color: #d1d5db;
 						}
-						#flow-steps-svg .node .trace-handler-name{
-							color: #777;
+						/* 节点文字样式 */
+						#flow-steps-svg .node .step-name{
+							color: #64748b;
+							font-size: 14px;
 						}
 						#flow-steps-svg .node .step-handler-name{
-							color: #777;
+							color: #94a3b8;
+							font-size: 12px;
+						}
+						#flow-steps-svg .node .trace-handler-name{
+							color: #94a3b8;
+							font-size: 12px;
+						}
+						/* 默认连线样式 */
+						#flow-steps-svg .edgePath path{
+							stroke: #cbd5e1;
+							stroke-width: 1.5px;
+						}
+						#flow-steps-svg marker path{
+							fill: #cbd5e1;
+						}
+						/* 连线上的文字标签 */
+						#flow-steps-svg .edgeLabel{
+							background-color: transparent;
+							padding: 0;
+							font-size: 12px;
+							color: #64748b;
+						}
+						#flow-steps-svg .edgeLabel span{
+							color: #64748b !important;
+							background: transparent !important;
+						}
+						#flow-steps-svg .edgeLabel span:not(:empty){
+							background: #f8fafc !important;
+							padding: 2px 6px;
+							border-radius: 4px;
 						}
 						div.mermaidTooltip{
 							position: fixed!important;
 							text-align: left!important;
-							padding: 4px!important;
-							font-size: 14px!important;
+							padding: 8px 12px!important;
+							font-size: 13px!important;
 							max-width: 500px!important;
 							left: auto!important;
 							top: 15px!important;
 							right: 15px;
+							border-radius: 6px;
+							box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+						}
+						.graph-node {
+							padding: 4px 8px;
+						}
+						.graph-node .step-name {
+							font-weight: 500;
+							margin-bottom: 2px;
 						}
 						.btn-zoom{
-							background: rgba(0, 0, 0, 0.1);
-							border-color: transparent;
+							border: none;
 							display: inline-block;
-							padding: 2px 10px;
-							font-size: 26px;
-							border-radius: 20px;
-							background: #eee;
-							color: #777;
+							padding: 6px 14px;
+							font-size: 20px;
+							border-radius: 8px;
+							background: #fff;
+							color: #475569;
 							position: fixed;
-							bottom: 15px;
+							bottom: 20px;
 							outline: none;
 							cursor: pointer;
 							z-index: 99999;
@@ -624,6 +893,8 @@ const FlowversionAPI = {
 							-ms-user-select: none;
 							user-select: none;
 							line-height: 1.2;
+							box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
+							transition: all 0.15s ease;
 						}
 						@media (max-width: 768px) {
 							.btn-zoom{
@@ -631,20 +902,72 @@ const FlowversionAPI = {
 							}
 						}
 						.btn-zoom:hover{
-							background: rgba(0, 0, 0, 0.2);
+							background: #f1f5f9;
+							box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 						}
 						.btn-zoom-up{
-							left: 15px;
+							left: 20px;
 						}
 						.btn-zoom-down{
-							left: 60px;
-							padding: 1px 13px 3px 13px;
+							left: 70px;
+						}
+						/* 图例 */
+						.chart-legend {
+							position: fixed;
+							top: 15px;
+							right: 15px;
+							background: #fff;
+							border-radius: 8px;
+							padding: 12px 16px;
+							box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+							font-size: 12px;
+							color: #475569;
+							text-align: left;
+							z-index: 99999;
+						}
+						.chart-legend .legend-item {
+							display: flex;
+							align-items: center;
+							margin-bottom: 6px;
+						}
+						.chart-legend .legend-item:last-child {
+							margin-bottom: 0;
+						}
+						.chart-legend .legend-dot {
+							width: 12px;
+							height: 12px;
+							border-radius: 3px;
+							margin-right: 8px;
+							flex-shrink: 0;
+						}
+						.legend-dot.completed { background: #dbeafe; border: 1.5px solid #3b82f6; }
+						.legend-dot.current { background: #d1fae5; border: 1.5px solid #10b981; }
+						.legend-dot.pending { background: #f1f5f9; border: 1.5px solid #cbd5e1; }
+						.legend-dot.skipped { background: #f9fafb; border: 1.5px dashed #94a3b8; }
+						.legend-dot.condition { background: #fef3c7; border: 1.5px solid #f59e0b; }
+						.chart-legend .legend-line {
+							width: 24px;
+							height: 3px;
+							margin-right: 8px;
+							flex-shrink: 0;
+							border-radius: 2px;
 						}
+						.legend-line.traversed { background: #10b981; }
+						.legend-line.predicted { background: repeating-linear-gradient(90deg, #3b82f6 0px, #3b82f6 5px, transparent 5px, transparent 8px); height: 2px; }
 					</style>
 				</head>
 				<body>
 					<div class = "loading">Loading...</div>
 					<div class = "error-msg">${error_msg}</div>
+					<div class="chart-legend">
+						<div class="legend-item"><span class="legend-dot completed"></span>已完成</div>
+						<div class="legend-item"><span class="legend-dot current"></span>当前步骤</div>
+						<div class="legend-item"><span class="legend-dot pending"></span>未流转</div>
+						<div class="legend-item"><span class="legend-dot skipped"></span>已跳过</div>
+						<div class="legend-item"><span class="legend-dot condition"></span>条件判断</div>
+						<div class="legend-item"><span class="legend-line traversed"></span>已流转路径</div>
+						<div class="legend-item"><span class="legend-line predicted"></span>预测路径</div>
+					</div>
 					<div class="mermaid"></div>
 					<script type="text/javascript">
 						mermaid.initialize({

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@steedos-labs/plugin-workflow",
-  "version": "3.0.83",
+  "version": "3.0.84",
   "main": "package.service.js",
   "license": "MIT",
   "files": [