npm - @steedos-labs/plugin-workflow - Versions diffs - 3.0.39 → 3.0.41 - Mend

@steedos-labs/plugin-workflow 3.0.39 → 3.0.41

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 (39) hide show

package/designer/dist/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/api/workflow/designer-v2/vite.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-CxYuhf9v.js"></script>
-    <link rel="stylesheet" crossorigin href="/api/workflow/designer-v2/assets/index-Dve-EwQO.css">
+    <script type="module" crossorigin src="/api/workflow/designer-v2/assets/index-DbYFInYv.js"></script>
+    <link rel="stylesheet" crossorigin href="/api/workflow/designer-v2/assets/index-7cMOmCg4.css">
   </head>
   <body>
     <div id="root"></div>

package/main/default/applications/approve_workflow.app.yml CHANGED Viewed

@@ -23,166 +23,9 @@ nav_schema: {
       "ignoreNavSchema": true
     },
     {
-      "type": "wrapper",
-      "size": "none",
-      "className": "instances-sidebar-wrapper mt-1 bg-white",
-      "body": [
-        {
-          "type": "button",
-          "label": "刷新",
-          "className": "instance-nav-reload hidden",
-          "onEvent": {
-            "click": {
-              "actions": [
-                {
-                  "actionType": "reload",
-                  "componentId": "u:instanceNav"
-                }
-              ]
-            }
-          }
-        },
-        {
-          "type": "button",
-          "label": "刷新树",
-          "className": "instance-tree-reload hidden",
-          "onEvent": {
-            "click": {
-              "actions": [
-                {
-                  "actionType": "custom",
-                  "script": "try{ var opts = window.__latestNavOptions; var data = window.__latestNavData; if(!Array.isArray(opts)){ console.log('[tree-reload] no global options'); return; } opts = JSON.parse(JSON.stringify(opts)); var tree = window.__navTreeComponent; if(!tree || !tree.props || !tree.props.formItem){ console.log('[tree-reload] no saved tree ref, trying amisScoped'); var s = window.amisScoped || (document.querySelector('[data-amisScoped]') && document.querySelector('[data-amisScoped]').__amisScoped); if(s){ tree = s.getComponentById('u:instanceNavTree'); } } if(tree && tree.props && tree.props.formItem){ tree.props.formItem.setOptions(opts, undefined, data || {}); console.log('[tree-reload] setOptions done, count:', opts.length); if(tree.forceUpdate){ tree.forceUpdate(); console.log('[tree-reload] forceUpdate called'); } } else { console.log('[tree-reload] FAIL: cannot find tree component'); } }catch(e){ console.warn('[tree-reload error]', e); }"
-                }
-              ]
-            }
-          }
-        },
-        {
-          "type": "service",
-          "id": "u:instanceNav",
-          "className": "bg-white",
-          "onEvent": {
-            "@data.changed.instances": {
-              "actions": [
-                {
-                  "actionType": "reload"
-                }
-              ]
-            },
-            "fetchInited": {
-              "actions": [
-                {
-                  "actionType": "custom",
-                  "script": "try{ var s = event.context && event.context.scoped; if(!s){ var amisScoped = window.amisScoped || (document.querySelector('[data-amisScoped]') && document.querySelector('[data-amisScoped]').__amisScoped); if(amisScoped){ s = amisScoped; } } if(s){ var tree = s.getComponentById('u:instanceNavTree'); if(tree && tree.props && tree.props.formItem){ window.__navTreeComponent = tree; var opts = event.data && event.data.options; if(Array.isArray(opts)){ opts = JSON.parse(JSON.stringify(opts)); tree.props.formItem.setOptions(opts, undefined, event.data); if(tree.forceUpdate){ setTimeout(function(){ tree.forceUpdate(); }, 100); } } } } var _navComp = s && s.getComponentById('u:instanceNav'); if(_navComp && _navComp.props && _navComp.props.store){ window.__instanceNavStore = _navComp.props.store; } if(!window._instanceNavRouteListenerAdded){ window._instanceNavRouteListenerAdded = true; window._wasOnApproveWorkflow = true; window.addEventListener('message', function(evt){ if(!evt.data || !evt.data.type) return; if(evt.data.type === 'ROUTE_CHANGE'){ var isOnApprove = window.location.pathname.indexOf('/app/approve_workflow') === 0; var wasOn = window._wasOnApproveWorkflow; window._wasOnApproveWorkflow = isOnApprove; if(!isOnApprove) return; var isPop = evt.data.navigationType === 'POP'; if(wasOn && !isPop) return; clearTimeout(window._instanceNavReloadTimer); window._instanceNavReloadTimer = setTimeout(function(){ var _val = window.location.pathname + decodeURIComponent(window.location.search); _val = _val.replace(new RegExp('/view/(?!none)[^?#/]+'), '/view/none'); var opts = window.__latestNavOptions; if(opts){ var _fn = function(o,v){ for(var i=0;i<o.length;i++){ if(o[i].value===v) return v; if(o[i].children){ var f=_fn(o[i].children,v); if(f) return f; } } return null; }; var _fl = function(o,sid,sobj){ for(var i=0;i<o.length;i++){ var v=o[i].value; if(v){ var m1=v.match(/side_listview_id=([^&]*)/); var m2=v.match(/side_object=([^&]*)/); if(m1&&m2&&m1[1]===sid&&m2[1]===sobj) return v; } if(o[i].children){ var f=_fl(o[i].children,sid,sobj); if(f) return f; } } return null; }; if(!_fn(opts,_val)){ var lm=_val.match(/side_listview_id=([^&]*)/); var om=_val.match(/side_object=([^&]*)/); if(lm&&om){ var pm=_fl(opts,lm[1],om[1]); if(pm) _val=pm; } } } var store = window.__instanceNavStore; if(store && store.updateData){ store.updateData({ value: _val, _ts: Date.now() }, undefined, false); } var _tree = window.__navTreeComponent; if(_tree && _tree.props && _tree.props.setPrinstineValue){ _tree.props.setPrinstineValue(_val); } }, 300); } }); } }catch(e){ console.warn('[fetchInited error]', e); }"
-                }
-              ]
-            }
-          },
-          "body": [
-            {
-              "type": "input-tree",
-              "name": "instanceNavTree",
-              "treeContainerClassName": "h-full bg-white",
-              "className": "instance-box-tree h-full w-full p-0 bg-white",
-              "id": "u:instanceNavTree",
-              "stacked": true,
-              "multiple": false,
-              "enableNodePath": false,
-              "hideRoot": true,
-              "showIcon": true,
-              "initiallyOpen": false,
-              "virtualThreshold": 100000,
-              "value": "${value}",
-              "size": "md",
-              "onEvent": {
-                "change": {
-                  "actions": [
-                    {
-                      "actionType": "setValue",
-                      "componentId": "instances_list_service",
-                      "args": {
-                        "value": {
-                          "isFlowDataDone": false
-                        }
-                      }
-                    },
-                    {
-                      "actionType": "custom",
-                      "script": "//获取上一次的flowId和categoryId\nconst lastFlowId = event.data.flowId;\nconst lastCategoryId = event.data.categoryId;\n//从value中获取最新的flowId\nvar flowIdRegex = /&flowId=([^&]+)/;\nvar flowIdMatch = event.data.value.match(flowIdRegex);\nconst flowId = flowIdMatch && flowIdMatch.length > 0 ? flowIdMatch[1] : \"\";\n//从value中获取最新的categoryId\nvar categoryIdRegex = /&categoryId=([^&]+)/;\nvar categoryIdMatch = event.data.value.match(categoryIdRegex);\nconst categoryId = categoryIdMatch && categoryIdMatch.length > 0 ? categoryIdMatch[1] : \"\";\n//获取上一次的listname和最新的listname\nconst lastListName = event.data.listName;\nconst listName = event.data.value.split('?')[0].split('instances/grid/')[1];\n//切换流程时清除过滤条件\nif (lastListName == \"monitor\" && listName == \"monitor\" && (flowId != lastFlowId || categoryId != lastCategoryId)) {\n  listViewPropsStoreKey = window.location.pathname + \"/crud\";\n  sessionStorage.removeItem(listViewPropsStoreKey);\n  sessionStorage.removeItem(listViewPropsStoreKey + \"/query\");\n}"
-                    },
-                    {
-                      "actionType": "setValue",
-                      "componentId": "instances_list_service",
-                      "args": {
-                        "value": {
-                          "additionalFilters": [
-                            "${event.data.options.name}",
-                            "=",
-                            "${event.data.options.value}"
-                          ]
-                        }
-                      },
-                      "expression": "${event.data.options.level>=10}"
-                    },
-                    {
-                      "args": {
-                        "link": "${event.data.value}",
-                        "blank": false
-                      },
-                      "actionType": "link"
-                    }
-                  ]
-                }
-              },
-              "menuTpl": {
-                "type": "wrapper",
-                "className": "flex items-center py-1.5 px-3 m-0 rounded-md transition-colors duration-150",
-                "body": [
-                  {
-                    "type": "tpl",
-                    "className": "flex-1 leading-6 truncate instance-menu-label",
-                    "tpl": "${label}",
-                    "id": "u:9dee51f00db4"
-                  },
-                  {
-                    "type": "tpl",
-                    "className": "ml-auto",
-                    "tpl": "",
-                    "badge": {
-                      "className": "h-0",
-                      "offset": [
-                        -5,
-                        0
-                      ],
-                      "mode": "text",
-                      "text": "${tag | toInt}",
-                      "overflowCount": 999
-                    },
-                    "id": "u:2329cd1fecc2"
-                  }
-                ],
-                "id": "u:545154bcc334"
-              },
-              "unfoldedLevel": 2,
-              "source": "${options}"
-            }
-          ],
-          "api": {
-            "method": "get",
-            "url": "${context.rootUrl}/api/${appId}/workflow/nav",
-            "headers": {
-              "Authorization": "Bearer ${context.tenantId},${context.authToken}"
-            },
-            "trackExpression": "false",
-            "messages": {},
-            "adaptor": "var _val = window.location.pathname + decodeURIComponent(window.location.search); _val = _val.replace(new RegExp('/view/(?!none)[^?#/]+'), '/view/none'); console.log('[adaptor] computed value:', _val); function _findNode(opts, val){ for(var i=0;i<opts.length;i++){ if(opts[i].value===val) return opts[i].value; if(opts[i].children){ var f=_findNode(opts[i].children,val); if(f) return f; } } return null; } function _findByListview(opts, sid, sobj){ for(var i=0;i<opts.length;i++){ var v=opts[i].value; if(v){ var m1=v.match(/side_listview_id=([^&]*)/); var m2=v.match(/side_object=([^&]*)/); if(m1&&m2&&m1[1]===sid&&m2[1]===sobj){ return v; } } if(opts[i].children){ var f=_findByListview(opts[i].children,sid,sobj); if(f) return f; } } return null; } if(payload.data.options){ var exactMatch=_findNode(payload.data.options, _val); if(!exactMatch){ console.log('[adaptor] no exact match, trying partial match'); var lm=_val.match(/side_listview_id=([^&]*)/); var om=_val.match(/side_object=([^&]*)/); if(lm&&om){ var partialMatch=_findByListview(payload.data.options, lm[1], om[1]); if(partialMatch){ console.log('[adaptor] partial match found:', partialMatch); _val=partialMatch; } else { console.log('[adaptor] no partial match either, listview='+lm[1]+' object='+om[1]); } } } else { console.log('[adaptor] exact match found'); } } payload.data.value = _val; payload.data._ts = Date.now(); if(payload.data.options){ payload.data.options = JSON.parse(JSON.stringify(payload.data.options)); window.__latestNavOptions = payload.data.options; window.__latestNavData = payload.data; console.log('[adaptor] saved options to global, count:', payload.data.options.length); } return payload;"
-          },
-          "messages": {},
-          "dsType": "api"
-        }
-      ],
-      "isFixedHeight": false,
-      "isFixedWidth": false
+      "type": "approval-tree-menu",
+      "apiUrl": "/api/approve_workflow/workflow/nav",
+      "navigateMode": "router"
     }
   ],
   "isFixedHeight": false,

package/main/default/applications/desktop.app.yml ADDED Viewed

@@ -0,0 +1,21 @@
+code: desktop
+enable_nav_schema: true
+nav_schema: {
+  "type": "wrapper",
+  "size": "none",
+  "body": [
+    {
+      "type": "steedos-app-menu",
+      "stacked": true,
+      "appId": "approve_workflow",
+      "ignoreNavSchema": true
+    },
+    {
+      "type": "approval-tree-menu",
+      "apiUrl": "/api/approve_workflow/workflow/nav",
+      "navigateMode": "router"
+    }
+  ],
+  "isFixedHeight": false,
+  "isFixedWidth": false
+}

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

@@ -45,11 +45,7 @@ window.waitForThing(window, 'socket').then(()=>{
         };
         if (isFirstRun === false && shouldReloadView()) {
           window.$(".list-view-btn-reload").click()
-          clearTimeout(window.__navReloadTimer)
-          clearTimeout(window.__navRetryTimer)
-          window.__navReloadTimer = setTimeout(function(){ window.$(".instance-nav-reload").click() }, 500)
-          // Retry: reload tree only (no API request) to pick up data already in Service store
-          window.__navRetryTimer = setTimeout(function(){ window.$(".instance-tree-reload").click() }, 2000)
+          window.postMessage({ type: "approval-tree-menu:reload" }, "*")
         }
         isFirstRun = false;
     });
@@ -62,6 +58,7 @@ window.waitForThing(window, 'socket').then(()=>{
         };
         if (shouldReloadView()) {
           window.$(".list-view-btn-reload").click()
+          window.postMessage({ type: "approval-tree-menu:reload" }, "*")
         }
     });

package/main/default/manager/handlers_manager.js CHANGED Viewed

@@ -159,7 +159,11 @@ getHandlersManager.getHandlers = async function (instance_id, step_id, login_use
     // 拟稿时, 可以设定后续每个步骤的处理人 #1926
     if (instance.step_approve && !_.isEmpty(instance.step_approve[`${step_id}_options`])) {
-        return instance.step_approve[`${step_id}_options`];
+        const res = instance.step_approve[`${step_id}_options`];
+        if(res != null && res.length > 0 && res[0] != null){
+            return res;
+        }
     }
     let approve_users = [];
@@ -195,7 +199,6 @@ getHandlersManager.getHandlers = async function (instance_id, step_id, login_use
     current_step = _.find(current_steps, function (step) {
         return step._id === step_id;
     });
     if (current_step.step_type === "condition") {
         const unfinished_trace = _.find(instance.traces, function (trace) {
             return trace.is_finished === false;

package/main/default/manager/instance_number_rules.js CHANGED Viewed

@@ -19,7 +19,7 @@ module.exports = {
             name: name
         });
         if (!numberRules) {
-            throw new Meteor.Error('error!', `${name}`);
+            throw new Error('error!', `${name}`);
         }
         date = new Date();
         context = {};

package/main/default/manager/uuflow_manager.js CHANGED Viewed

@@ -1585,7 +1585,7 @@ UUFlowManager.workflow_engine = async function (approve_from_client, current_use
 };
 // Skip processed constants and helpers
-const SKIP_DESCRIPTION = '滑步跳过：已在之前步骤处理过';
+const SKIP_DESCRIPTION = ''; //滑步跳过：已在之前步骤处理过
 function isNormalApprove(approve) {
     return !approve.type || approve.type === 'draft' || approve.type === 'reassign';
@@ -1662,7 +1662,7 @@ UUFlowManager.handleSkipProcessed = async function (instance_id, flow, maxDepth
             return;
         }
-        const next_step_id = lines[0].to_step;
+        let next_step_id = lines[0].to_step;
         let next_step;
         try {
             next_step = UUFlowManager.getStep(instance, flow, next_step_id);
@@ -1670,6 +1670,24 @@ UUFlowManager.handleSkipProcessed = async function (instance_id, flow, maxDepth
             return;
         }
+        // If the next step is a condition node, evaluate it server-side to find the real next step
+        // Condition nodes should never be "stopped at" during slide step; we must resolve through them.
+        let conditionDepth = 10;
+        while (next_step.step_type === 'condition' && conditionDepth-- > 0) {
+            console.log(`[workflow/engine] [handleSkipProcessed] Evaluating condition node "${next_step.name}"`);
+            const resolvedStepIds = await UUFlowManager.getNextSteps(instance, flow, next_step, '');
+            if (!resolvedStepIds || resolvedStepIds.length === 0) {
+                console.warn('[workflow/engine] [handleSkipProcessed] Condition node evaluated to no next steps');
+                return;
+            }
+            next_step_id = resolvedStepIds[0];
+            try {
+                next_step = UUFlowManager.getStep(instance, flow, next_step_id);
+            } catch (e) {
+                return;
+            }
+        }
         // Mark current trace as finished with all approves as skipped
         const setObj = {};
         setObj[`traces.${traceIdx}.is_finished`] = true;

package/main/default/objects/instance_tasks/listviews/inbox.listview.yml CHANGED Viewed

@@ -19,7 +19,7 @@ mobile_columns:
 filter_scope: space
 filters: !!js/function |
     function(filters, data){
-      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}`, {
+      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}&additionalFilters=\${data.additionalFilters || ""}`, {
           type: 'get', async: false
       });
       return result.filter;

package/main/default/objects/instance_tasks/listviews/outbox.listview.yml CHANGED Viewed

@@ -18,7 +18,7 @@ mobile_columns:
 filter_scope: space
 filters: !!js/function |
     function(filters, data){
-      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}`, {
+      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}&additionalFilters=\${data.additionalFilters || ""}`, {
           type: 'get', async: false
       });
       return result.filter;

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

@@ -29,13 +29,19 @@ amis_schema: |-
                                 "actionType": "custom",
                                 "script": "SteedosWorkflow.Instance.changed=false; navigate('/app/approve_workflow/instances/view/none?side_object=instances&side_listview_id=draft&additionalFilters=&flowId=&categoryId=')"
                             },
+                            {
+                                "actionType": "wait",
+                                "args": {
+                                    "time": 500
+                                }
+                            },
                             {
                                 "actionType": "custom",
                                 "script":"window.$('.list-view-btn-reload').click()"
                             },
                             {
                                 "actionType": "custom",
-                                "script":"window.$('.instance-nav-reload').click()"
+                                "script":"window.postMessage({ type: 'approval-tree-menu:reload' }, '*')"
                             }
                       ],
                       "weight": 0

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

@@ -68,7 +68,7 @@ amis_schema: |-
                                                         {
                                                             "actionType": "wait",
                                                             "args": {
-                                                                "time": 100
+                                                                "time": 500
                                                             }
                                                         },
                                                         {
@@ -77,7 +77,7 @@ amis_schema: |-
                                                         },
                                                         {
                                                             "actionType": "custom",
-                                                            "script":"window.$('.instance-nav-reload').click()"
+                                                            "script":"window.postMessage({ type: 'approval-tree-menu:reload' }, '*')"
                                                         }
                                                     ]
                                                 }

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

@@ -18,7 +18,7 @@ mobile_columns:
 filter_scope: space
 filters: !!js/function |
     function(filters, data){
-      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}`, {
+      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}&additionalFilters=\${data.additionalFilters || ""}`, {
           type: 'get', async: false
       });
       return result.filter;

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

@@ -9,7 +9,7 @@ columns:
 filter_scope: space
 filters: !!js/function |
     function(filters, data){
-      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}`, {
+      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}&additionalFilters=\${data.additionalFilters || ""}`, {
           type: 'get', async: false
       });
       return result.filter;

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

@@ -18,7 +18,7 @@ mobile_columns:
 filter_scope: space
 filters: !!js/function |
     function(filters, data){
-      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}`, {
+      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}&additionalFilters=\${data.additionalFilters || ""}`, {
           type: 'get', async: false
       });
       return result.filter;

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

@@ -18,7 +18,7 @@ mobile_columns:
 filter_scope: space
 filters: !!js/function |
     function(filters, data){
-      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}`, {
+      var result = Steedos.authRequest(`/api/workflow/v2/\${data.listName}/filter?app=\${data.appId}&additionalFilters=\${data.additionalFilters || ""}`, {
           type: 'get', async: false
       });
       return result.filter;

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

@@ -1,5 +1,5 @@
 {
     "type": "liquid",
-    "template": "<style>\n    @keyframes fadeUpSpring {\n        0% { opacity: 0; transform: translateY(10px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    \n    /* Make scrollbars standardized and visible */\n    ::-webkit-scrollbar {\n        width: 8px;\n        height: 8px;\n    }\n    ::-webkit-scrollbar-track {\n        background: transparent;\n    }\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.25); /* Darker for visibility on gray bg */\n        border-radius: 4px;\n        border: 2px solid transparent; /* Creates padding effect */\n        background-clip: content-box;\n    }\n    ::-webkit-scrollbar-thumb:hover {\n        background-color: rgba(0, 0, 0, 0.4);\n    }\n\n    /* \n       Fix outer modal scrollbar - SAFER VERSION \n       Only apply these aggressive overrides (no padding, hidden overflow)\n       to the specific modal that contains our component (identified by #steedosFlowSelectorSidebarList).\n       This prevents breaking other stacked modals like 'Confirm Dialogs'.\n    */\n    .antd-Modal-body:has(#steedosFlowSelectorSidebarList) {\n        overflow: hidden !important;\n        padding: 0 !important; /* Optional: maximize space */\n        display: flex;\n        flex-direction: column;\n    }\n\n    /* Ensure the AMIS container fills height if needed */\n    .antd-Service, .liquid-amis-container {\n        height: 100%;\n    }\n</style>\n\n<!-- Main Container: Fixed Height 70vh. -->\n<div class=\"flex h-[70vh] max-h-[800px] w-full overflow-hidden font-sans text-gray-900 bg-white\" style=\"min-height: 0;\">\n\n    <!-- Left Sidebar -->\n    <!-- flex-col, h-full, overflow-hidden -->\n    <div class=\"flex flex-col w-[260px] h-full border-r border-gray-200 bg-[#F2F2F7] shrink-0 overflow-hidden\">\n        <!-- Header -->\n        <div class=\"shrink-0 pt-4 pb-2 px-3\">\n            <div class=\"relative group\">\n                <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-gray-500\">\n                    <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n                    </svg>\n                </div>\n                <input type=\"text\" id=\"searchInput\" placeholder=\"搜索流程名称...\" class=\"w-full rounded-[10px] border-none bg-[#767680]/10 py-1.5 pl-9 pr-3 text-[14px] text-gray-900 placeholder:text-gray-500 outline-none transition-all duration-200 focus:bg-white focus:shadow-sm focus:ring-2 focus:ring-blue-500/20\">\n            </div>\n        </div>\n        \n        <!-- List Container -->\n        <!-- min-h-0 is CRITICAL for flex child scrolling -->\n        <div class=\"flex-1 min-h-0 overflow-y-auto px-2 pb-4 space-y-0.5 scroll-smooth\" id=\"steedosFlowSelectorSidebarList\">\n        </div>\n    </div>\n\n    <!-- Right Content -->\n    <!-- flex-1 fills remaining width -->\n    <div class=\"flex-1 h-full relative bg-white overflow-hidden\">\n        <!-- Absolute inset-0 locks the scroll container size -->\n        <div id=\"mainContentScroll\" class=\"absolute inset-0 overflow-y-auto scroll-smooth p-6\">\n            <div id=\"contentContainer\" class=\"w-full h-auto min-h-full\">\n                 <div class=\"flex h-full w-full flex-col items-center justify-center pt-20\">\n                    <div class=\"inline-flex items-center gap-2 text-gray-400 text-sm animate-pulse\">\n                        <svg class=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path>\n                        </svg>\n                        <span>正在加载资源...</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<script>\n    const WorkflowService = {\n        apiBase: \"\", \n        getHeaders: function() { return { 'Content-Type': 'application/json' }; },\n        getData: async function() {\n            try {\n                const appId = (typeof data !== 'undefined' && data.context && data.context.app_id) ? data.context.app_id : \"\";\n                const url = this.apiBase + \"/service/api/flows/getList?action=new&appId=\" + encodeURIComponent(appId);\n                const res = await fetch(url, { headers: this.getHeaders() });\n                const treeData = await res.json();\n                const categories = [];\n                const parsedFlows = [];\n                if (Array.isArray(treeData)) {\n                    treeData.forEach(cat => {\n                        categories.push({ _id: cat._id, name: cat.name });\n                        if (Array.isArray(cat.flows)) {\n                            cat.flows.forEach(f => {\n                                parsedFlows.push({\n                                    id: f._id, name: f.name, categoryId: cat._id, categoryName: cat.name || \"其他流程\" \n                                });\n                            });\n                        }\n                    });\n                }\n                return { categories: categories, flows: parsedFlows };\n            } catch (e) { \n                console.error(\"WorkflowService Error:\", e);\n                return { categories: [], flows: [] }; \n            }\n        },\n        getFavorites: function() {\n            const saved = localStorage.getItem('steedos_fav_ids');\n            return saved ? JSON.parse(saved) : [];\n        },\n        toggleFavorite: function(flowId, isFav) {\n            let favs = this.getFavorites();\n            if (isFav) { if (!favs.includes(flowId)) favs.push(flowId); } \n            else { favs = favs.filter(id => id !== flowId); }\n            localStorage.setItem('steedos_fav_ids', JSON.stringify(favs));\n            return favs;\n        }\n    };\n\n    const AppState = { allFlows: [], categories: [], favorites: [] };\n    const sidebarEl = document.getElementById('steedosFlowSelectorSidebarList');\n    const contentEl = document.getElementById('contentContainer');\n    const searchInput = document.getElementById('searchInput');\n\n    async function init() {\n        try {\n            const data = await WorkflowService.getData();\n            AppState.allFlows = data.flows;\n            AppState.categories = data.categories;\n            AppState.favorites = WorkflowService.getFavorites();\n            renderUI();\n        } catch (e) {\n            contentEl.innerHTML = `<div class=\"text-gray-400 text-sm\">加载失败，请检查网络</div>`;\n        }\n    }\n\n    function renderUI(filterText = \"\") {\n        sidebarEl.innerHTML = \"\";\n        contentEl.innerHTML = \"\";\n\n        const isSearching = filterText.length > 0;\n        let groups = [];\n\n        const favFlows = AppState.allFlows.filter(f => \n            AppState.favorites.includes(f.id) && \n            (isSearching ? f.name.includes(filterText) : true)\n        );\n        if (favFlows.length > 0) {\n            groups.push({ id: 'fav', name: \"我的收藏\", items: favFlows, isFav: true });\n        }\n\n        AppState.categories.forEach(cat => {\n            const items = AppState.allFlows.filter(f => \n                f.categoryId === cat._id &&\n                (isSearching ? f.name.includes(filterText) : true)\n            );\n            if (items.length > 0) {\n                groups.push({ id: cat._id, name: cat.name, items: items, isFav: false });\n            }\n        });\n\n        const otherItems = AppState.allFlows.filter(f => \n            !AppState.categories.find(c => c._id === f.categoryId) &&\n            (isSearching ? f.name.includes(filterText) : true)\n        );\n        if (otherItems.length > 0) {\n            groups.push({ id: 'other', name: \"其他流程\", items: otherItems, isFav: false });\n        }\n\n        if (groups.length === 0) {\n            contentEl.innerHTML = `<div class=\"animate-[fadeUpSpring_0.5s_ease-out] text-center pt-20\"><div class=\"text-gray-200 text-7xl mb-4\">∅</div><div class=\"text-gray-400 text-sm\">未找到匹配流程</div></div>`;\n            return;\n        }\n\n        const contentFragment = document.createDocumentFragment();\n        groups.forEach((group, index) => {\n            const groupId = `group-\\${group.id}`;\n            const navItem = document.createElement('div');\n            let navBase = \"group flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-[14px] transition-all duration-200 ease-out select-none\";\n            let activeClass = \"bg-[#007AFF] text-white shadow-sm font-medium\";\n            let inactiveClass = \"text-gray-700 hover:bg-black/5 active:bg-black/10\";\n            \n            navItem.className = `\\${navBase} \\${index === 0 ? activeClass : inactiveClass}`;\n            const badgeClass = index === 0 ? \"text-white/80\" : \"text-gray-400 group-hover:text-gray-500\";\n            \n            navItem.innerHTML = `<span class=\"truncate\">\\${group.isFav ? '★ ' : ''}\\${group.name}</span><span class=\"\\${badgeClass} text-[12px] font-medium transition-colors\">\\${group.items.length}</span>`;\n            \n            navItem.onclick = () => {\n                Array.from(sidebarEl.children).forEach(el => {\n                    el.className = `\\${navBase} \\${inactiveClass}`;\n                    el.querySelector('span:last-child').className = \"text-gray-400 group-hover:text-gray-500 text-[12px] font-medium transition-colors\";\n                });\n                navItem.className = `\\${navBase} \\${activeClass}`;\n                navItem.querySelector('span:last-child').className = \"text-white/80 text-[12px] font-medium transition-colors\";\n                \n                const target = document.getElementById(groupId);\n                const container = document.getElementById('mainContentScroll');\n                if(target && container) {\n                    const targetTop = target.getBoundingClientRect().top; \n                    const containerTop = container.getBoundingClientRect().top; \n                    container.scrollTo({ top: container.scrollTop + targetTop - containerTop - 16, behavior: 'smooth' });\n                }\n            };\n            sidebarEl.appendChild(navItem);\n\n            const section = document.createElement('div');\n            section.id = groupId;\n            section.className = \"mb-10\";\n            const headerColor = group.isFav ? 'text-amber-500' : 'text-gray-900';\n            section.innerHTML = `<div class=\"sticky top-0 z-20 mb-4 bg-white pb-2 text-xl font-bold tracking-tight  text-left border-b border-gray-100 \\${headerColor}\">\\${group.name}</div>`;\n\n            const grid = document.createElement('div');\n            grid.className = 'grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4';\n\n            const gridFragment = document.createDocumentFragment();\n            group.items.forEach((flow, i) => {\n                const isFav = AppState.favorites.includes(flow.id);\n                const colorMap = ['bg-blue-50 text-blue-600', 'bg-orange-50 text-orange-600', 'bg-emerald-50 text-emerald-600', 'bg-indigo-50 text-indigo-600'];\n                const colorClass = colorMap[(flow.name.length + i) % 4];\n                const firstChar = flow.name.replace(/【.*?】/g, '').charAt(0) || flow.name.charAt(0);\n                const card = document.createElement('div');\n                card.className = 'group relative flex h-auto min-h-[72px] cursor-pointer items-center rounded-2xl border border-gray-100 bg-white p-3 text-left shadow-[0_2px_8px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.02] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-1 hover:border-gray-200 hover:shadow-[0_12px_24px_rgba(0,0,0,0.08)] active:scale-[0.98] active:bg-gray-50' + (i < 12 ? ' animate-[fadeUpSpring_0.4s_cubic-bezier(0.16,1,0.3,1)_forwards]' : '');\n                if (i < 12) { card.style.animationDelay = (i * 0.03) + 's'; card.style.opacity = '0'; }\n                const iconClass = isFav ? 'text-yellow-400 fill-current' : 'text-gray-300 group-hover/btn:text-gray-400 fill-none stroke-current stroke-[1.5]';\n                const btnBgClass = isFav ? 'opacity-100 hover:scale-110' : 'opacity-0 group-hover:opacity-100 hover:bg-gray-100 hover:scale-110';\n\n                card.innerHTML = `\n                    <div class=\"star-btn group/btn absolute right-2 top-1/2 -translate-y-1/2 z-20 flex h-8 w-8 items-center justify-center rounded-full transition-all duration-200 \\${btnBgClass}\" title=\"\\${isFav ? '取消收藏' : '加入收藏'}\">\n                        <svg class=\"h-5 w-5 transition-colors duration-300 \\${iconClass}\" viewBox=\"0 0 24 24\">\n                           <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" />\n                        </svg>\n                    </div>\n                    <div class=\"mr-4 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[16px] font-bold \\${colorClass}\">\\${firstChar}</div>\n                    <div class=\"flex-1 pr-8 text-[15px] font-medium text-gray-900 line-clamp-3 leading-relaxed tracking-tight\" title=\"\\${flow.name}\">\\${flow.name}</div>\n                `;\n                card.onclick = () => {\n                   if (card.dataset.loading === 'true') return;\n                   card.dataset.loading = 'true';\n                   card.style.pointerEvents = 'none';\n                   card.style.opacity = '0.6';\n                   card.innerHTML = '<div class=\"flex items-center justify-center w-full gap-2 text-gray-400 text-sm\"><svg class=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle><path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path></svg><span>正在创建...</span></div>';\n                   setTimeout(() => {\n                        data._scoped.doAction([\n                            { \"actionType\": \"broadcast\", \"args\": { \"eventName\": \"flows.selected\" }, \"data\": { \"value\": flow.id } }\n                        ])\n                   }, 50);\n                };\n                const starBtn = card.querySelector('.star-btn');\n                const starIcon = starBtn.querySelector('svg');\n                starBtn.onclick = (e) => {\n                    e.stopPropagation();\n                    const newFavState = !starBtn.classList.contains('active-fav');\n                    if (newFavState) {\n                        starBtn.classList.add('active-fav', 'opacity-100');\n                        starBtn.classList.add('animate-[starPop_0.4s_ease-out]');\n                        starIcon.setAttribute('class', 'h-5 w-5 transition-colors duration-300 text-yellow-400 fill-current');\n                    } else {\n                        starBtn.classList.remove('active-fav', 'opacity-100');\n                        starBtn.classList.remove('animate-[starPop_0.4s_ease-out]');\n                        starIcon.setAttribute('class', 'h-5 w-5 transition-colors duration-300 text-gray-300 group-hover/btn:text-gray-400 fill-none stroke-current stroke-[1.5]');\n                    }\n                    AppState.favorites = WorkflowService.toggleFavorite(flow.id, newFavState);\n                    setTimeout(() => renderUI(searchInput.value), 300);\n                };\n                if (isFav) starBtn.classList.add('active-fav');\n                gridFragment.appendChild(card);\n            });\n            grid.appendChild(gridFragment);\n            section.appendChild(grid);\n            contentFragment.appendChild(section);\n        });\n        contentEl.appendChild(contentFragment);\n    }\n\n    let _searchTimer = null;\n    searchInput.addEventListener('input', (e) => {\n        clearTimeout(_searchTimer);\n        _searchTimer = setTimeout(() => renderUI(e.target.value.trim()), 300);\n    });\n    init();\n</script>\n",
+    "template": "<style>\n    @keyframes fadeUpSpring {\n        0% { opacity: 0; transform: translateY(10px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    \n    /* Make scrollbars standardized and visible */\n    ::-webkit-scrollbar {\n        width: 8px;\n        height: 8px;\n    }\n    ::-webkit-scrollbar-track {\n        background: transparent;\n    }\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.25); /* Darker for visibility on gray bg */\n        border-radius: 4px;\n        border: 2px solid transparent; /* Creates padding effect */\n        background-clip: content-box;\n    }\n    ::-webkit-scrollbar-thumb:hover {\n        background-color: rgba(0, 0, 0, 0.4);\n    }\n\n    /* \n       Fix outer modal scrollbar - SAFER VERSION \n       Only apply these aggressive overrides (no padding, hidden overflow)\n       to the specific modal that contains our component (identified by #steedosFlowSelectorSidebarList).\n       This prevents breaking other stacked modals like 'Confirm Dialogs'.\n    */\n    .antd-Modal-body:has(#steedosFlowSelectorSidebarList) {\n        overflow: hidden !important;\n        padding: 0 !important; /* Optional: maximize space */\n        display: flex;\n        flex-direction: column;\n    }\n\n    /* Ensure the AMIS container fills height if needed */\n    .antd-Service, .liquid-amis-container {\n        height: 100%;\n    }\n</style>\n\n<!-- Main Container: Fixed Height 70vh. -->\n<div class=\"flex h-[70vh] max-h-[800px] w-full overflow-hidden font-sans text-gray-900 bg-white\" style=\"min-height: 0;\">\n\n    <!-- Left Sidebar -->\n    <!-- flex-col, h-full, overflow-hidden -->\n    <div class=\"flex flex-col w-[260px] h-full border-r border-gray-200 bg-[#F2F2F7] shrink-0 overflow-hidden\">\n        <!-- Header -->\n        <div class=\"shrink-0 pt-4 pb-2 px-3\">\n            <div class=\"relative group\">\n                <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-gray-500\">\n                    <svg class=\"h-4 w-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n                        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n                    </svg>\n                </div>\n                <input type=\"text\" id=\"searchInput\" placeholder=\"搜索流程名称...\" class=\"w-full rounded-[10px] border-none bg-[#767680]/10 py-1.5 pl-9 pr-3 text-[14px] text-gray-900 placeholder:text-gray-500 outline-none transition-all duration-200 focus:bg-white focus:shadow-sm focus:ring-2 focus:ring-blue-500/20\">\n            </div>\n        </div>\n        \n        <!-- List Container -->\n        <!-- min-h-0 is CRITICAL for flex child scrolling -->\n        <div class=\"flex-1 min-h-0 overflow-y-auto px-2 pb-4 space-y-0.5 scroll-smooth\" id=\"steedosFlowSelectorSidebarList\">\n        </div>\n    </div>\n\n    <!-- Right Content -->\n    <!-- flex-1 fills remaining width -->\n    <div class=\"flex-1 h-full relative bg-white overflow-hidden\">\n        <!-- Absolute inset-0 locks the scroll container size -->\n        <div id=\"mainContentScroll\" class=\"absolute inset-0 overflow-y-auto scroll-smooth p-6\">\n            <div id=\"contentContainer\" class=\"w-full h-auto min-h-full\">\n                 <div class=\"flex h-full w-full flex-col items-center justify-center pt-20\">\n                    <div class=\"inline-flex items-center gap-2 text-gray-400 text-sm animate-pulse\">\n                        <svg class=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n                            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path>\n                        </svg>\n                        <span>正在加载资源...</span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<script>\n    const WorkflowService = {\n        apiBase: \"\",\n        getHeaders: function() { return { 'Content-Type': 'application/json' }; },\n        getData: async function() {\n            try {\n                const appId = (typeof data !== 'undefined' && data.context && data.context.app_id) ? data.context.app_id : \"\";\n                const url = this.apiBase + \"/service/api/flows/getList?action=new&appId=\" + encodeURIComponent(appId);\n                const res = await fetch(url, { headers: this.getHeaders() });\n                const treeData = await res.json();\n                const categories = [];\n                const parsedFlows = [];\n                if (Array.isArray(treeData)) {\n                    treeData.forEach(cat => {\n                        categories.push({ _id: cat._id, name: cat.name });\n                        if (Array.isArray(cat.flows)) {\n                            cat.flows.forEach(f => {\n                                parsedFlows.push({\n                                    id: f._id, name: f.name, categoryId: cat._id, categoryName: cat.name || \"其他流程\"\n                                });\n                            });\n                        }\n                    });\n                }\n                return { categories: categories, flows: parsedFlows };\n            } catch (e) {\n                console.error(\"WorkflowService Error:\", e);\n                return { categories: [], flows: [] };\n            }\n        },\n        getFavorites: function() {\n            const saved = localStorage.getItem('steedos_fav_ids');\n            return saved ? JSON.parse(saved) : [];\n        },\n        toggleFavorite: function(flowId, isFav) {\n            let favs = this.getFavorites();\n            if (isFav) { if (!favs.includes(flowId)) favs.push(flowId); }\n            else { favs = favs.filter(id => id !== flowId); }\n            localStorage.setItem('steedos_fav_ids', JSON.stringify(favs));\n            return favs;\n        }\n    };\n\n    const AppState = { allFlows: [], categories: [], favorites: [] };\n\n    function escapeHtml(str) {\n        return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;');\n    }\n    const sidebarEl = document.getElementById('steedosFlowSelectorSidebarList');\n    const contentEl = document.getElementById('contentContainer');\n    const searchInput = document.getElementById('searchInput');\n\n    // Optimization 2: lazy rendering state\n    let _observer = null;\n    let _currentGroups = [];\n\n    // Render cards into a placeholder element for a single group (lazy)\n    var ESTIMATED_CARD_HEIGHT_PX = 88;\n    var LAZY_LOAD_MARGIN = '300px 0px';\n\n    function fillCards(group, placeholder) {\n        if (placeholder.dataset.rendered) return;\n        placeholder.dataset.rendered = 'true';\n        placeholder.style.minHeight = '';\n        const gridFragment = document.createDocumentFragment();\n        group.items.forEach(function(flow, i) {\n            const isFav = AppState.favorites.includes(flow.id);\n            const colorMap = ['bg-blue-50 text-blue-600', 'bg-orange-50 text-orange-600', 'bg-emerald-50 text-emerald-600', 'bg-indigo-50 text-indigo-600'];\n            const colorClass = colorMap[(flow.name.length + i) % 4];\n            const firstChar = flow.name.replace(/【.*?】/g, '').charAt(0) || flow.name.charAt(0);\n            const card = document.createElement('div');\n            card.className = 'group relative flex h-auto min-h-[72px] cursor-pointer items-center rounded-2xl border border-gray-100 bg-white p-3 text-left shadow-[0_2px_8px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.02] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-1 hover:border-gray-200 hover:shadow-[0_12px_24px_rgba(0,0,0,0.08)] active:scale-[0.98] active:bg-gray-50' + (i < 12 ? ' animate-[fadeUpSpring_0.4s_cubic-bezier(0.16,1,0.3,1)_forwards]' : '');\n            if (i < 12) { card.style.animationDelay = (i * 0.03) + 's'; card.style.opacity = '0'; }\n            // Optimization 3: data-flow-id for event delegation\n            card.dataset.flowId = flow.id;\n            const iconClass = isFav ? 'text-yellow-400 fill-current' : 'text-gray-300 group-hover/btn:text-gray-400 fill-none stroke-current stroke-[1.5]';\n            const btnBgClass = isFav ? 'opacity-100 hover:scale-110' : 'opacity-0 group-hover:opacity-100 hover:bg-gray-100 hover:scale-110';\n            card.innerHTML = '<div class=\"star-btn group/btn absolute right-2 top-1/2 -translate-y-1/2 z-20 flex h-8 w-8 items-center justify-center rounded-full transition-all duration-200 ' + btnBgClass + (isFav ? ' active-fav' : '') + '\" title=\"' + (isFav ? '取消收藏' : '加入收藏') + '\" data-flow-id=\"' + flow.id + '\"><svg class=\"h-5 w-5 transition-colors duration-300 ' + iconClass + '\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z\" /></svg></div><div class=\"mr-4 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[16px] font-bold ' + colorClass + '\">' + escapeHtml(firstChar) + '</div><div class=\"flex-1 pr-8 text-[15px] font-medium text-gray-900 line-clamp-3 leading-relaxed tracking-tight\" title=\"' + escapeHtml(flow.name) + '\">' + escapeHtml(flow.name) + '</div>';\n            gridFragment.appendChild(card);\n        });\n        placeholder.appendChild(gridFragment);\n    }\n\n    // Optimization 3: single delegated click listener — handles both star-btn and card clicks\n    contentEl.addEventListener('click', function(e) {\n        const starBtn = e.target.closest('.star-btn');\n        if (starBtn) {\n            const flowId = starBtn.dataset.flowId;\n            const isFav = AppState.favorites.includes(flowId);\n            const newFavState = !isFav;\n            if (newFavState) {\n                starBtn.classList.add('active-fav', 'opacity-100');\n                starBtn.querySelector('svg').setAttribute('class', 'h-5 w-5 transition-colors duration-300 text-yellow-400 fill-current');\n                starBtn.setAttribute('title', '取消收藏');\n            } else {\n                starBtn.classList.remove('active-fav', 'opacity-100');\n                starBtn.querySelector('svg').setAttribute('class', 'h-5 w-5 transition-colors duration-300 text-gray-300 group-hover/btn:text-gray-400 fill-none stroke-current stroke-[1.5]');\n                starBtn.setAttribute('title', '加入收藏');\n            }\n            AppState.favorites = WorkflowService.toggleFavorite(flowId, newFavState);\n            setTimeout(function() { renderUI(searchInput.value); }, 300);\n            return;\n        }\n        const card = e.target.closest('[data-flow-id]');\n        if (card && !card.classList.contains('star-btn')) {\n            if (card.dataset.loading === 'true') return;\n            card.dataset.loading = 'true';\n            card.style.pointerEvents = 'none';\n            card.style.opacity = '0.6';\n            card.innerHTML = '<div class=\"flex items-center justify-center w-full gap-2 text-gray-400 text-sm\"><svg class=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle><path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"></path></svg><span>正在创建...</span></div>';\n            setTimeout(function() {\n                data._scoped.doAction([\n                    { \"actionType\": \"broadcast\", \"args\": { \"eventName\": \"flows.selected\" }, \"data\": { \"value\": card.dataset.flowId } }\n                ]);\n            }, 50);\n        }\n    });\n\n    async function init() {\n        try {\n            const result = await WorkflowService.getData();\n            AppState.allFlows = result.flows;\n            AppState.categories = result.categories;\n            AppState.favorites = WorkflowService.getFavorites();\n            renderUI();\n        } catch (e) {\n            contentEl.innerHTML = '<div class=\"text-gray-400 text-sm\">加载失败，请检查网络</div>';\n        }\n    }\n\n    function renderUI(filterText) {\n        filterText = filterText || \"\";\n        // Disconnect previous IntersectionObserver before rebuilding DOM\n        if (_observer) { _observer.disconnect(); _observer = null; }\n        sidebarEl.innerHTML = \"\";\n        contentEl.innerHTML = \"\";\n\n        const isSearching = filterText.length > 0;\n        const groups = [];\n\n        const favFlows = AppState.allFlows.filter(function(f) {\n            return AppState.favorites.includes(f.id) && (isSearching ? f.name.toLowerCase().includes(filterText.toLowerCase()) : true);\n        });\n        if (favFlows.length > 0) {\n            groups.push({ id: 'fav', name: \"我的收藏\", items: favFlows, isFav: true });\n        }\n\n        AppState.categories.forEach(function(cat) {\n            const items = AppState.allFlows.filter(function(f) {\n                return f.categoryId === cat._id && (isSearching ? f.name.toLowerCase().includes(filterText.toLowerCase()) : true);\n            });\n            if (items.length > 0) {\n                groups.push({ id: cat._id, name: cat.name, items: items, isFav: false });\n            }\n        });\n\n        const otherItems = AppState.allFlows.filter(function(f) {\n            return !AppState.categories.find(function(c) { return c._id === f.categoryId; }) &&\n                (isSearching ? f.name.toLowerCase().includes(filterText.toLowerCase()) : true);\n        });\n        if (otherItems.length > 0) {\n            groups.push({ id: 'other', name: \"其他流程\", items: otherItems, isFav: false });\n        }\n\n        if (groups.length === 0) {\n            contentEl.innerHTML = '<div class=\"animate-[fadeUpSpring_0.5s_ease-out] text-center pt-20\"><div class=\"text-gray-200 text-7xl mb-4\">∅</div><div class=\"text-gray-400 text-sm\">未找到匹配流程</div></div>';\n            return;\n        }\n\n        _currentGroups = groups;\n        const contentFragment = document.createDocumentFragment();\n        const navBase = \"group flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-[14px] transition-all duration-200 ease-out select-none\";\n        const activeClass = \"bg-[#007AFF] text-white shadow-sm font-medium\";\n        const inactiveClass = \"text-gray-700 hover:bg-black/5 active:bg-black/10\";\n\n        groups.forEach(function(group, index) {\n            const groupId = 'group-' + group.id;\n            const navItem = document.createElement('div');\n            navItem.className = navBase + ' ' + (index === 0 ? activeClass : inactiveClass);\n            const badgeClass = index === 0 ? \"text-white/80\" : \"text-gray-400 group-hover:text-gray-500\";\n            navItem.innerHTML = '<span class=\"truncate\">' + (group.isFav ? '★ ' : '') + group.name + '</span><span class=\"' + badgeClass + ' text-[12px] font-medium transition-colors\">' + group.items.length + '</span>';\n\n            navItem.onclick = (function(grp, gId) {\n                return function() {\n                    Array.from(sidebarEl.children).forEach(function(el) {\n                        el.className = navBase + ' ' + inactiveClass;\n                        el.querySelector('span:last-child').className = \"text-gray-400 group-hover:text-gray-500 text-[12px] font-medium transition-colors\";\n                    });\n                    navItem.className = navBase + ' ' + activeClass;\n                    navItem.querySelector('span:last-child').className = \"text-white/80 text-[12px] font-medium transition-colors\";\n                    const section = document.getElementById(gId);\n                    if (section) {\n                        // Optimization 2: force-render target section before scrolling to avoid blank placeholder\n                        const ph = section.querySelector('.card-placeholder');\n                        if (ph && !ph.dataset.rendered) {\n                            fillCards(grp, ph);\n                            if (_observer) _observer.unobserve(ph);\n                        }\n                        const container = document.getElementById('mainContentScroll');\n                        if (container) {\n                            const targetTop = section.getBoundingClientRect().top;\n                            const containerTop = container.getBoundingClientRect().top;\n                            container.scrollTo({ top: container.scrollTop + targetTop - containerTop - 16, behavior: 'smooth' });\n                        }\n                    }\n                };\n            })(group, groupId);\n            sidebarEl.appendChild(navItem);\n\n            // Optimization 2: render section header + placeholder (cards filled lazily)\n            const section = document.createElement('div');\n            section.id = groupId;\n            section.className = \"mb-10\";\n            const headerColor = group.isFav ? 'text-amber-500' : 'text-gray-900';\n            section.innerHTML = '<div class=\"sticky top-0 z-20 mb-4 bg-white pb-2 text-xl font-bold tracking-tight  text-left border-b border-gray-100 ' + headerColor + '\">' + group.name + '</div>';\n            const placeholder = document.createElement('div');\n            placeholder.className = 'card-placeholder grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4';\n            // Pre-size the placeholder to avoid layout shift while cards aren't rendered yet\n            placeholder.style.minHeight = (Math.ceil(group.items.length / 4) * ESTIMATED_CARD_HEIGHT_PX) + 'px';\n            section.appendChild(placeholder);\n            contentFragment.appendChild(section);\n        });\n\n        contentEl.appendChild(contentFragment);\n\n        // Optimization 2: set up IntersectionObserver to fill cards as groups scroll into view\n        const scrollContainer = document.getElementById('mainContentScroll');\n        _observer = new IntersectionObserver(function(entries) {\n            entries.forEach(function(entry) {\n                if (entry.isIntersecting && entry.target.isConnected && !entry.target.dataset.rendered) {\n                    const ph = entry.target;\n                    const section = ph.parentElement;\n                    if (section && section.id) {\n                        const gId = section.id.replace('group-', '');\n                        const grp = _currentGroups.find(function(g) { return String(g.id) === gId; });\n                        if (grp) {\n                            fillCards(grp, ph);\n                            if (_observer) _observer.unobserve(ph);\n                        }\n                    }\n                }\n            });\n        }, { root: scrollContainer, rootMargin: LAZY_LOAD_MARGIN });\n\n        contentEl.querySelectorAll('.card-placeholder').forEach(function(p) {\n            _observer.observe(p);\n        });\n    }\n\n    // Optimization 4: Chinese IME compositionstart/compositionend prevents stutter during composition\n    let _isComposing = false;\n    let _searchTimer = null;\n    searchInput.addEventListener('compositionstart', function() { _isComposing = true; });\n    searchInput.addEventListener('compositionend', function(e) {\n        _isComposing = false;\n        clearTimeout(_searchTimer);\n        renderUI(e.target.value.trim());\n    });\n    searchInput.addEventListener('input', function(e) {\n        if (_isComposing) return;\n        clearTimeout(_searchTimer);\n        _searchTimer = setTimeout(function() { renderUI(e.target.value.trim()); }, 300);\n    });\n\n    init();\n</script>\n\n",
     "className": "h-full"
-}
+}