@steedos-labs/plugin-workflow 3.0.65 → 3.0.67

package/main/default/objects/instances/buttons/instance_reopen.button.yml

@@ -1,7 +1,69 @@
 name: instance_reopen
-is_enable: false
-label: 取消隐藏
+is_enable: true
+label: 显示审批单
 'on': record_only
 type: amis_button
 visible: true
-sort: 990
+sort: 2110
+amis_schema: |-
+  {
+      "type": "service",
+      "body": [
+          {
+              "type": "button",
+              "label": "${'CustomAction.instances.instance_reopen' | t}",
+              "id": "u:instance_reopen",
+              "className": "  ",
+              "confirmText": "${'CustomLabels.instance_action_reopen_confirm' | t}",
+              "onEvent": {
+                  "click": {
+                      "actions": [
+                          {
+                              "args": {
+                                  "api": {
+                                      "url": "${context.rootUrl}/api/workflow/instance/hide",
+                                      "method": "post",
+                                      "data": {
+                                          "instance_id": "${record._id}",
+                                          "is_hidden": false
+                                      },
+                                      "headers": {
+                                          "Authorization": "Bearer ${context.tenantId},${context.authToken}"
+                                      },
+                                      "adaptor": "return response.status == 200 ? {data: {...payload}, status: 0, msg: payload.message || t('instance_action_reopen_msg_success')} : {...payload, status: 1, msg: payload.message || t('instance_action_reopen_msg_failed')};"
+                                  },
+                                  "messages": {}
+                              },
+                              "actionType": "ajax"
+                          },
+                          {
+                              "actionType": "wait",
+                              "args": {
+                                  "time": 500
+                              }
+                          },
+                          {
+                              "actionType": "custom",
+                              "script": "SteedosWorkflow.Instance.changed=false; $('.steedos-workflow-reload-btn').trigger('click')"
+                          },
+                          {
+                              "actionType": "custom",
+                              "script": "window.$('.list-view-btn-reload').click()"
+                          },
+                          {
+                              "actionType": "custom",
+                              "script": "window.postMessage({ type: 'approval-tree-menu:reload' }, '*')"
+                          }
+                      ],
+                      "weight": 0
+                  }
+              },
+              "visibleOn": "(this.record.box === 'monitor' || this.record.box === 'completed') && this.record.state === 'completed' && this.record.is_hidden === true && context.user.is_space_admin"
+          }
+      ],
+      "regions": [
+          "body"
+      ],
+      "bodyClassName": "p-0",
+      "id": "u:instance_reopen_service"
+  }

package/main/default/objects/instances/buttons/instance_save.button.yml

@@ -18,7 +18,7 @@ amis_schema: |-
                                       "method": "post",
                                       "sendOn": "",
                                       "requestAdaptor": "var _SteedosUI$getRef$get, _approveValues$next_s;\nconst formValues = context._scoped.getComponentById(\"instance_form\").getValues();const _formValues = JSON.parse(JSON.stringify(formValues)); if(_formValues){delete _formValues.__applicant} \nconst approveValues = (_SteedosUI$getRef$get = context._scoped.getComponentById(\"instance_approval\")) === null || _SteedosUI$getRef$get === void 0 ? void 0 : _SteedosUI$getRef$get.getValues();\nlet nextUsers = approveValues === null || approveValues === void 0 ? void 0 : approveValues.next_users;\nif (_.isString(nextUsers)) {\n  nextUsers = [approveValues.next_users];\n}\nconst instance = context.record;\nconst body = {\n  instance: {\n    _id: instance._id,\n    applicant: formValues.__applicant || formValues.applicant.user,\n    submitter: formValues.submitter,\n    traces: [{\n      _id: instance.trace._id,\n      step: instance.step._id,\n      approves: [{\n        _id: instance.approve._id,\n        next_steps: [{\n          step: approveValues === null || approveValues === void 0 || (_approveValues$next_s = approveValues.next_step) === null || _approveValues$next_s === void 0 ? void 0 : _approveValues$next_s._id,\n          users: nextUsers\n        }],\n        description: approveValues === null || approveValues === void 0 ? void 0 : approveValues.suggestion,\n        values: _formValues\n      }]\n    }]\n  }\n};\napi.data = body;\nreturn api;",
-                                      "adaptor": "window.SteedosWorkflow.Instance.changed = false; if (payload.instance == \"upgraded\") { window.setTimeout(function(){ $('.steedos-workflow-reload-btn').trigger('click'); }, 2000); return {...payload, status: 1, msg: t('instance_action_instance_save_msg_upgraded')}; } \n return payload.instance != false ? {data: payload, status: 0, msg: t('instance_action_instance_save_msg_success')} : {...payload, status: 1, msg: t('instance_action_instance_save_msg_failed')};",
+                                      "adaptor": "window.SteedosWorkflow.Instance.changed = false; if (payload.instance == \"upgraded\") { window.setTimeout(function(){ $('.steedos-workflow-reload-btn').trigger('click'); }, 2000); return {...payload, status: 1, msg: t('instance_action_instance_save_msg_upgraded')}; } \n var _silent = window.__instance_save_silent; return payload.instance != false ? {data: payload, status: 0, msg: _silent ? '' : t('instance_action_instance_save_msg_success')} : {...payload, status: 1, msg: t('instance_action_instance_save_msg_failed')};",
                                       "data": {
                                           "&": "$$"
                                       }
@@ -34,7 +34,7 @@ amis_schema: |-
                                       "method": "post",
                                       "sendOn": "",
                                       "requestAdaptor": "var _SteedosUI$getRef$get, _approveValues$next_s;\nconst formValues = context._scoped.getComponentById(\"instance_form\").getValues();\nconst approveValues = (_SteedosUI$getRef$get = context._scoped.getComponentById(\"instance_approval\")) === null || _SteedosUI$getRef$get === void 0 ? void 0 : _SteedosUI$getRef$get.getValues();\nlet nextUsers = approveValues === null || approveValues === void 0 ? void 0 : approveValues.next_users;\nif (_.isString(nextUsers)) {\n  nextUsers = [approveValues.next_users];\n}\nconst instance = context.record;\nconst body = {\n  approve: {\n    id: instance.approve._id,\n    instance: instance._id,\n    trace: instance.trace._id,\n    next_steps: [{\n      step: approveValues === null || approveValues === void 0 || (_approveValues$next_s = approveValues.next_step) === null || _approveValues$next_s === void 0 ? void 0 : _approveValues$next_s._id,\n      users: nextUsers\n    }],\n    description: approveValues === null || approveValues === void 0 ? void 0 : approveValues.suggestion,\n    judge: approveValues === null || approveValues === void 0 ? void 0 : approveValues.judge,\n    values: formValues\n  }\n};\napi.data = body;\nreturn api;",
-                                      "adaptor": "window.SteedosWorkflow.Instance.changed = false;  return payload.instance ? {...payload, status: 0, msg: t('instance_action_instance_save_msg_success')} : {...payload, status: 1, msg: t('instance_action_instance_save_msg_failed')};",
+                                      "adaptor": "window.SteedosWorkflow.Instance.changed = false;  var _silent = window.__instance_save_silent; return payload.instance ? {...payload, status: 0, msg: _silent ? '' : t('instance_action_instance_save_msg_success')} : {...payload, status: 1, msg: t('instance_action_instance_save_msg_failed')};",
                                       "data": {
                                           "&": "$$"
                                       }

package/main/default/objects/instances/fields/is_hidden.field.yml

@@ -0,0 +1,5 @@
+name: is_hidden
+label: Hidden
+type: boolean
+defaultValue: false
+visible_on: "${false}"

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

@@ -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\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",
+    "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 matchKeywords(name, filterText) {\n        if (!filterText) return true;\n        var keywords = filterText.toLowerCase().split(/\\s+/).filter(function(k) { return k.length > 0; });\n        if (keywords.length === 0) return true;\n        var lowerName = name.toLowerCase();\n        return keywords.every(function(k) { return lowerName.includes(k); });\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) && matchKeywords(f.name, filterText);\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 && matchKeywords(f.name, filterText);\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                matchKeywords(f.name, filterText);\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"
-}
+}

package/main/default/pages/flow_selector_mobile.page.amis.json

@@ -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    /* Mobile-optimized scrollbars */\n    ::-webkit-scrollbar {\n        width: 4px;\n        height: 4px;\n    }\n    ::-webkit-scrollbar-track {\n        background: transparent;\n    }\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n    }\n\n    /* Force full screen modal for mobile */\n    .antd-Modal:has(#steedosFlowSelectorMobile) {\n        top: 0 !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        max-width: 100vw !important;\n        width: 100vw !important;\n        height: 100vh !important;\n        height: 100dvh !important;\n    }\n\n    .antd-Modal-content:has(#steedosFlowSelectorMobile) {\n        height: 100vh !important;\n        height: 100dvh !important;\n        padding-bottom: 0 !important;\n        display: flex !important;\n        flex-direction: column !important;\n        border-radius: 0 !important;\n        overflow: hidden !important;\n    }\n\n    .antd-Modal-body:has(#steedosFlowSelectorMobile) {\n        margin: 0 !important;\n        flex: 1 !important;\n        height: auto !important;\n        overflow: hidden !important;\n        padding: 0 !important;\n        display: flex !important;\n        flex-direction: column !important;\n    }\n    \n    .antd-Service, .liquid-amis-container {\n        display: flex; /* Ensure flex propagation */\n        flex-direction: column;\n        height: 100%;\n        overflow: hidden; /* Prevent double scrollbars */\n    }\n\n    /* Mobile category selector styles */\n    .mobile-category-pill {\n        -webkit-tap-highlight-color: transparent;\n        touch-action: manipulation;\n    }\n\n    /* Flow card animations */\n    @keyframes flowCardSlideIn {\n        0% {\n            opacity: 0;\n            transform: translateY(20px);\n        }\n        100% {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n</style>\n\n<!-- Main Mobile Container -->\n<div id=\"steedosFlowSelectorMobile\" class=\"flex flex-col h-full w-full bg-[#F5F5F7] font-sans text-gray-900 overflow-hidden\">\n    \n    <!-- Top Header Section -->\n    <div class=\"shrink-0 bg-white border-b border-gray-200 shadow-sm pt-4\">\n        \n        <!-- Search Bar -->\n        <div class=\"px-4 pb-3\">\n            <div class=\"relative\">\n                <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400\">\n                    <svg class=\"h-5 w-5\" 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 \n                    type=\"text\" \n                    id=\"mobileSearchInput\" \n                    placeholder=\"搜索流程...\" \n                    class=\"w-full rounded-xl border border-gray-200 bg-gray-50 py-2.5 pl-10 pr-3 text-base text-gray-900 placeholder:text-gray-400 outline-none transition-all duration-200 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20\"\n                >\n            </div>\n        </div>\n        \n        <!-- Category Tabs - Horizontal Scroll -->\n        <div class=\"overflow-x-auto scrollbar-hide pb-2\">\n            <div id=\"mobileCategoryTabs\" class=\"flex gap-2 px-4 min-w-full\">\n                <!-- Categories will be inserted here -->\n            </div>\n        </div>\n    </div>\n    \n    <!-- Main Content Area -->\n    <!-- Added min-h-0 and webkit-overflow-scrolling for better mobile scrolling -->\n    <div class=\"flex-1 overflow-y-auto scroll-smooth px-4 py-4 min-h-0\" style=\"-webkit-overflow-scrolling: touch;\">\n        <div id=\"mobileContentContainer\" class=\"space-y-3 pb-safe\">\n            <div class=\"flex flex-col items-center justify-center pt-20 text-center\">\n                <div class=\"inline-flex items-center gap-2 text-gray-400 text-sm animate-pulse\">\n                    <svg class=\"animate-spin h-5 w-5\" 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\n<script>\n    const MobileWorkflowService = {\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                // Use relative path directly to avoid cross-origin issues if apiBase is mixed up\n                const url = \"/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, \n                                    name: f.name, \n                                    categoryId: cat._id, \n                                    categoryName: cat.name || \"其他流程\" \n                                });\n                            });\n                        }\n                    });\n                }\n                return { categories: categories, flows: parsedFlows };\n            } catch (e) { \n                console.error(\"MobileWorkflowService 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) { \n                if (!favs.includes(flowId)) favs.push(flowId); \n            } else { \n                favs = favs.filter(id => id !== flowId); \n            }\n            localStorage.setItem('steedos_fav_ids', JSON.stringify(favs));\n            return favs;\n        }\n    };\n\n    const MobileAppState = { \n        allFlows: [], \n        categories: [], \n        favorites: [],\n        currentCategory: 'all',\n        /* Virtualization State */\n        filteredFlows: [],\n        renderedCount: 0,\n        batchSize: 50\n    };\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\n    const tabsEl = document.getElementById('mobileCategoryTabs');\n    // Important: ContentEl is the scroll host\n    // listEl is the container for items\n    let contentEl, listEl, searchInput;\n\n    function initElements() {\n        // Find elements scoped to our container to avoid collisions if multiple instances\n        const wrapper = document.getElementById('steedosFlowSelectorMobile');\n        if (!wrapper) return false;\n        \n        searchInput = document.getElementById('mobileSearchInput');\n        // The scroll container is the div with class 'overflow-y-auto'\n        contentEl = wrapper.querySelector('.overflow-y-auto');\n        listEl = document.getElementById('mobileContentContainer');\n        return true;\n    }\n\n    async function initMobile() {\n        // Wait for DOM to be ready\n        if (!initElements()) {\n            setTimeout(initMobile, 100);\n            return;\n        }\n\n        try {\n            const data = await MobileWorkflowService.getData();\n            MobileAppState.allFlows = data.flows;\n            MobileAppState.categories = data.categories;\n            MobileAppState.favorites = MobileWorkflowService.getFavorites();\n            \n            initObserver();\n            renderMobileTabs();\n            renderMobileContent();\n            \n            // Search init\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                renderMobileContent(e.target.value.trim());\n            });\n            searchInput.addEventListener('input', function(e) {\n                if (_isComposing) return;\n                clearTimeout(_searchTimer);\n                _searchTimer = setTimeout(function() { renderMobileContent(e.target.value.trim()); }, 300);\n            });\n\n        } catch (e) {\n            console.error('Init error:', e);\n            if (listEl) listEl.innerHTML = `<div class=\"text-center pt-20 text-gray-400 text-sm\">加载失败，请检查网络连接</div>`;\n        }\n    }\n\n    let observer;\n    function initObserver() {\n        if (!contentEl) return;\n        \n        const options = {\n            root: contentEl, // Observe intersection with scroll container\n            rootMargin: '200px',\n            threshold: 0.1\n        };\n        \n        observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    renderNextBatch();\n                }\n            });\n        }, options);\n    }\n\n    function renderMobileTabs(filterText = \"\") {\n        if (!tabsEl) return;\n        \n        // Save scroll position\n        const currentScroll = tabsEl.scrollLeft;\n        tabsEl.innerHTML = \"\";\n        \n        // Filter flows by search text to determine counts\n        let searchedFlows = MobileAppState.allFlows;\n        if (filterText && filterText.length > 0) {\n            searchedFlows = searchedFlows.filter(f => f.name.toLowerCase().includes(filterText.toLowerCase()));\n        }\n        \n        // All category\n        const allCount = searchedFlows.length;\n        const isAllActive = MobileAppState.currentCategory === 'all';\n        // Only show count on 'all' if we are filtering, same as PC? PC usually shows (Total). Let's show (count).\n        const allTab = createTab('all', `全部 (${allCount})`, isAllActive);\n        tabsEl.appendChild(allTab);\n        \n        // Favorites\n        // For favorites, we filter the ALREADY SEARCHED flows to see if they are in favorites\n        const favCount = searchedFlows.filter(f => MobileAppState.favorites.includes(f.id)).length;\n        if (favCount > 0) {\n            const isFavActive = MobileAppState.currentCategory === 'fav';\n            const favTab = createTab('fav', `★ 收藏 (${favCount})`, isFavActive);\n            tabsEl.appendChild(favTab);\n        }\n        \n        // Category tabs\n        MobileAppState.categories.forEach(cat => {\n            const count = searchedFlows.filter(f => f.categoryId === cat._id).length;\n            if (count > 0) {\n                const isActive = MobileAppState.currentCategory === cat._id;\n                const tab = createTab(cat._id, `${cat.name} (${count})`, isActive);\n                tabsEl.appendChild(tab);\n            }\n        });\n        \n        // Restore scroll position\n        tabsEl.scrollLeft = currentScroll;\n    }\n\n    function createTab(catId, label, isActive) {\n        const tab = document.createElement('button');\n        const baseClass = \"mobile-category-pill shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all duration-200\";\n        const activeClass = \"bg-blue-500 text-white shadow-md\";\n        const inactiveClass = \"bg-white text-gray-700 border border-gray-200 active:bg-gray-50\";\n        \n        tab.className = `${baseClass} ${isActive ? activeClass : inactiveClass}`;\n        tab.textContent = label;\n        tab.dataset.categoryId = catId;\n        \n        tab.onclick = () => {\n            MobileAppState.currentCategory = catId;\n            // Pass current search text to preserve filter\n            renderMobileContent(document.getElementById('mobileSearchInput').value.trim());\n        };\n        \n        return tab;\n    }\n\n    function renderMobileContent(filterText = \"\") {\n        if (!contentEl || !listEl) return;\n        \n        const isSearching = filterText.length > 0;\n        let flows = MobileAppState.allFlows;\n        \n        // 1. First filter by search text\n        if (isSearching) {\n            flows = flows.filter(f => f.name.toLowerCase().includes(filterText.toLowerCase()));\n        }\n\n        // 2. Then filter by category\n        if (MobileAppState.currentCategory === 'fav') {\n            flows = flows.filter(f => MobileAppState.favorites.includes(f.id));\n        } else if (MobileAppState.currentCategory !== 'all') {\n            flows = flows.filter(f => f.categoryId === MobileAppState.currentCategory);\n        }\n        \n        const flowsToShow = flows;\n        \n        // Update tabs to reflect these search results\n        renderMobileTabs(filterText);\n        \n        listEl.innerHTML = \"\";\n        contentEl.scrollTop = 0;\n        \n        if (flowsToShow.length === 0) {\n            listEl.innerHTML = `\n                <div class=\"flex flex-col items-center justify-center pt-20 text-center\">\n                    <div class=\"text-gray-300 text-7xl mb-4\">∅</div>\n                    <div class=\"text-gray-400 text-sm\">${isSearching ? '未找到匹配的流程' : '此分类暂无流程'}</div>\\n                </div>\n            `;\n            return;\n        }\n        \n        MobileAppState.filteredFlows = flowsToShow;\n        MobileAppState.renderedCount = 0;\n        \n        renderNextBatch();\n        updateSentinel();\n    }\n\n    function renderNextBatch() {\n        const { filteredFlows, renderedCount, batchSize } = MobileAppState;\n        const total = filteredFlows.length;\n        if (renderedCount >= total) return;\n        \n        const nextBatch = filteredFlows.slice(renderedCount, renderedCount + batchSize);\n        const fragment = document.createDocumentFragment();\n        \n        nextBatch.forEach((flow, i) => {\n            const index = renderedCount + i;\n            const card = createMobileFlowCard(flow, index);\n            \n            // Remove animation for later batches to avoid scroll lag appearance\n            if (renderedCount > 0) {\n                card.style.animationDelay = '0s';\n            }\n            \n            fragment.appendChild(card);\n        });\n        \n        // Remove sentinel if exists\n        const sentinel = document.getElementById('scroll-sentinel');\n        if (sentinel) sentinel.remove();\n        \n        listEl.appendChild(fragment);\n        MobileAppState.renderedCount += nextBatch.length;\n        \n        updateSentinel();\n    }\n\n    function updateSentinel() {\n        if (MobileAppState.renderedCount < MobileAppState.filteredFlows.length) {\n            const sentinel = document.createElement('div');\n            sentinel.id = 'scroll-sentinel';\n            sentinel.className = 'flex justify-center p-4';\n            sentinel.innerHTML = '<span class=\"text-gray-400 text-xs\">加载更多...</span>';\n            listEl.appendChild(sentinel);\n            if (observer) observer.observe(sentinel);\n        }\n    }\n\n    function createMobileFlowCard(flow, index) {\n        const isFav = MobileAppState.favorites.includes(flow.id);\n        const colorMap = [\n            'bg-blue-50 text-blue-600', \n            'bg-orange-50 text-orange-600', \n            'bg-emerald-50 text-emerald-600', \n            'bg-indigo-50 text-indigo-600',\n            'bg-purple-50 text-purple-600',\n            'bg-pink-50 text-pink-600'\n        ];\n        const colorClass = colorMap[(flow.name.length + index) % colorMap.length];\n        const firstChar = flow.name.replace(/【.*?】/g, '').charAt(0) || flow.name.charAt(0);\n        \n        const card = document.createElement('div');\n        card.className = 'relative flex items-center gap-3 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm transition-all duration-200 active:scale-[0.97] active:bg-gray-50';\n        card.style.animation = 'flowCardSlideIn 0.4s ease-out forwards';\n        card.style.animationDelay = `${Math.min(index * 0.05, 0.5)}s`;\n        card.style.opacity = '0';\n        \n        const iconClass = isFav ? 'text-yellow-400 fill-current' : 'text-gray-300 fill-none stroke-current stroke-[1.5]';\n        \n        card.innerHTML = `\n            <div class=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-xl text-lg font-bold ${colorClass}\">\n                ${escapeHtml(firstChar)}\n            </div>\n            <div class=\"flex-1 min-w-0\">\n                <div class=\"text-base font-medium text-gray-900 leading-snug line-clamp-3\" title=\"${escapeHtml(flow.name)}\">\n                    ${escapeHtml(flow.name)}\n                </div>\n            </div>\n            <button class=\"star-btn shrink-0 flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200 active:scale-90 ${isFav ? 'bg-yellow-50' : 'active:bg-gray-100'}\" title=\"${isFav ? '取消收藏' : '收藏'}\">\n                <svg class=\"h-6 w-6 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            </button>\\n        `;\n        \n        // Click card to select flow\n        card.onclick = (e) => {\n            if (!e.target.closest('.star-btn')) {\n                setTimeout(() => {\n                    data._scoped.doAction([\n                        { \n                            \"actionType\": \"broadcast\", \n                            \"args\": { \"eventName\": \"flows.selected\" }, \n                            \"data\": { \"value\": flow.id } \n                        }\n                    ]);\n                }, 50);\n            }\n        };\n        \n        // Star button to toggle favorite\n        const starBtn = card.querySelector('.star-btn');\n        const starIcon = starBtn.querySelector('svg');\n        starBtn.onclick = (e) => {\n            e.stopPropagation();\n            const newFavState = !isFav;\n            MobileAppState.favorites = MobileWorkflowService.toggleFavorite(flow.id, newFavState);\n            \n            // Update UI\n            if (newFavState) {\n                starBtn.classList.add('bg-yellow-50');\n                starBtn.classList.remove('active:bg-gray-100');\n                starIcon.setAttribute('class', 'h-6 w-6 transition-colors duration-300 text-yellow-400 fill-current');\n            } else {\n                starBtn.classList.remove('bg-yellow-50');\n                starBtn.classList.add('active:bg-gray-100');\n                starIcon.setAttribute('class', 'h-6 w-6 transition-colors duration-300 text-gray-300 fill-none stroke-current stroke-[1.5]');\n            }\n            \n            // Refresh tabs and content after short delay\n            setTimeout(() => {\n                renderMobileTabs();\n                renderMobileContent(searchInput.value.trim());\n            }, 300);\n        };\n        \n        return card;\n    }\n\n    // Initialize\n    initMobile();\n</script>",
+    "template": "<style>\n    @keyframes fadeUpSpring {\n        0% { opacity: 0; transform: translateY(10px); }\n        100% { opacity: 1; transform: translateY(0); }\n    }\n    \n    /* Mobile-optimized scrollbars */\n    ::-webkit-scrollbar {\n        width: 4px;\n        height: 4px;\n    }\n    ::-webkit-scrollbar-track {\n        background: transparent;\n    }\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n    }\n\n    /* Force full screen modal for mobile */\n    .antd-Modal:has(#steedosFlowSelectorMobile) {\n        top: 0 !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        max-width: 100vw !important;\n        width: 100vw !important;\n        height: 100vh !important;\n        height: 100dvh !important;\n    }\n\n    .antd-Modal-content:has(#steedosFlowSelectorMobile) {\n        height: 100vh !important;\n        height: 100dvh !important;\n        padding-bottom: 0 !important;\n        display: flex !important;\n        flex-direction: column !important;\n        border-radius: 0 !important;\n        overflow: hidden !important;\n    }\n\n    .antd-Modal-body:has(#steedosFlowSelectorMobile) {\n        margin: 0 !important;\n        flex: 1 !important;\n        height: auto !important;\n        overflow: hidden !important;\n        padding: 0 !important;\n        display: flex !important;\n        flex-direction: column !important;\n    }\n    \n    .antd-Service, .liquid-amis-container {\n        display: flex; /* Ensure flex propagation */\n        flex-direction: column;\n        height: 100%;\n        overflow: hidden; /* Prevent double scrollbars */\n    }\n\n    /* Mobile category selector styles */\n    .mobile-category-pill {\n        -webkit-tap-highlight-color: transparent;\n        touch-action: manipulation;\n    }\n\n    /* Flow card animations */\n    @keyframes flowCardSlideIn {\n        0% {\n            opacity: 0;\n            transform: translateY(20px);\n        }\n        100% {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n</style>\n\n<!-- Main Mobile Container -->\n<div id=\"steedosFlowSelectorMobile\" class=\"flex flex-col h-full w-full bg-[#F5F5F7] font-sans text-gray-900 overflow-hidden\">\n    \n    <!-- Top Header Section -->\n    <div class=\"shrink-0 bg-white border-b border-gray-200 shadow-sm pt-4\">\n        \n        <!-- Search Bar -->\n        <div class=\"px-4 pb-3\">\n            <div class=\"relative\">\n                <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400\">\n                    <svg class=\"h-5 w-5\" 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 \n                    type=\"text\" \n                    id=\"mobileSearchInput\" \n                    placeholder=\"搜索流程...\" \n                    class=\"w-full rounded-xl border border-gray-200 bg-gray-50 py-2.5 pl-10 pr-3 text-base text-gray-900 placeholder:text-gray-400 outline-none transition-all duration-200 focus:bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20\"\n                >\n            </div>\n        </div>\n        \n        <!-- Category Tabs - Horizontal Scroll -->\n        <div class=\"overflow-x-auto scrollbar-hide pb-2\">\n            <div id=\"mobileCategoryTabs\" class=\"flex gap-2 px-4 min-w-full\">\n                <!-- Categories will be inserted here -->\n            </div>\n        </div>\n    </div>\n    \n    <!-- Main Content Area -->\n    <!-- Added min-h-0 and webkit-overflow-scrolling for better mobile scrolling -->\n    <div class=\"flex-1 overflow-y-auto scroll-smooth px-4 py-4 min-h-0\" style=\"-webkit-overflow-scrolling: touch;\">\n        <div id=\"mobileContentContainer\" class=\"space-y-3 pb-safe\">\n            <div class=\"flex flex-col items-center justify-center pt-20 text-center\">\n                <div class=\"inline-flex items-center gap-2 text-gray-400 text-sm animate-pulse\">\n                    <svg class=\"animate-spin h-5 w-5\" 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\n<script>\n    const MobileWorkflowService = {\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                // Use relative path directly to avoid cross-origin issues if apiBase is mixed up\n                const url = \"/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, \n                                    name: f.name, \n                                    categoryId: cat._id, \n                                    categoryName: cat.name || \"其他流程\" \n                                });\n                            });\n                        }\n                    });\n                }\n                return { categories: categories, flows: parsedFlows };\n            } catch (e) { \n                console.error(\"MobileWorkflowService 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) { \n                if (!favs.includes(flowId)) favs.push(flowId); \n            } else { \n                favs = favs.filter(id => id !== flowId); \n            }\n            localStorage.setItem('steedos_fav_ids', JSON.stringify(favs));\n            return favs;\n        }\n    };\n\n    const MobileAppState = { \n        allFlows: [], \n        categories: [], \n        favorites: [],\n        currentCategory: 'all',\n        /* Virtualization State */\n        filteredFlows: [],\n        renderedCount: 0,\n        batchSize: 50\n    };\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\n    const tabsEl = document.getElementById('mobileCategoryTabs');\n    // Important: ContentEl is the scroll host\n    // listEl is the container for items\n    let contentEl, listEl, searchInput;\n\n    function initElements() {\n        // Find elements scoped to our container to avoid collisions if multiple instances\n        const wrapper = document.getElementById('steedosFlowSelectorMobile');\n        if (!wrapper) return false;\n        \n        searchInput = document.getElementById('mobileSearchInput');\n        // The scroll container is the div with class 'overflow-y-auto'\n        contentEl = wrapper.querySelector('.overflow-y-auto');\n        listEl = document.getElementById('mobileContentContainer');\n        return true;\n    }\n\n    async function initMobile() {\n        // Wait for DOM to be ready\n        if (!initElements()) {\n            setTimeout(initMobile, 100);\n            return;\n        }\n\n        try {\n            const data = await MobileWorkflowService.getData();\n            MobileAppState.allFlows = data.flows;\n            MobileAppState.categories = data.categories;\n            MobileAppState.favorites = MobileWorkflowService.getFavorites();\n            \n            initObserver();\n            renderMobileTabs();\n            renderMobileContent();\n            \n            // Search init\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                renderMobileContent(e.target.value.trim());\n            });\n            searchInput.addEventListener('input', function(e) {\n                if (_isComposing) return;\n                clearTimeout(_searchTimer);\n                _searchTimer = setTimeout(function() { renderMobileContent(e.target.value.trim()); }, 300);\n            });\n\n        } catch (e) {\n            console.error('Init error:', e);\n            if (listEl) listEl.innerHTML = `<div class=\"text-center pt-20 text-gray-400 text-sm\">加载失败，请检查网络连接</div>`;\n        }\n    }\n\n    let observer;\n    function initObserver() {\n        if (!contentEl) return;\n        \n        const options = {\n            root: contentEl, // Observe intersection with scroll container\n            rootMargin: '200px',\n            threshold: 0.1\n        };\n        \n        observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    renderNextBatch();\n                }\n            });\n        }, options);\n    }\n\n    function matchKeywords(name, filterText) {\n        if (!filterText) return true;\n        var keywords = filterText.toLowerCase().split(/\\s+/).filter(function(k) { return k.length > 0; });\n        if (keywords.length === 0) return true;\n        var lowerName = name.toLowerCase();\n        return keywords.every(function(k) { return lowerName.includes(k); });\n    }\n\n    function renderMobileTabs(filterText = \"\") {\n        if (!tabsEl) return;\n        \n        // Save scroll position\n        const currentScroll = tabsEl.scrollLeft;\n        tabsEl.innerHTML = \"\";\n        \n        // Filter flows by search text to determine counts\n        let searchedFlows = MobileAppState.allFlows;\n        if (filterText && filterText.length > 0) {\n            searchedFlows = searchedFlows.filter(f => matchKeywords(f.name, filterText));\n        }\n        \n        // All category\n        const allCount = searchedFlows.length;\n        const isAllActive = MobileAppState.currentCategory === 'all';\n        // Only show count on 'all' if we are filtering, same as PC? PC usually shows (Total). Let's show (count).\n        const allTab = createTab('all', `全部 (${allCount})`, isAllActive);\n        tabsEl.appendChild(allTab);\n        \n        // Favorites\n        // For favorites, we filter the ALREADY SEARCHED flows to see if they are in favorites\n        const favCount = searchedFlows.filter(f => MobileAppState.favorites.includes(f.id)).length;\n        if (favCount > 0) {\n            const isFavActive = MobileAppState.currentCategory === 'fav';\n            const favTab = createTab('fav', `★ 收藏 (${favCount})`, isFavActive);\n            tabsEl.appendChild(favTab);\n        }\n        \n        // Category tabs\n        MobileAppState.categories.forEach(cat => {\n            const count = searchedFlows.filter(f => f.categoryId === cat._id).length;\n            if (count > 0) {\n                const isActive = MobileAppState.currentCategory === cat._id;\n                const tab = createTab(cat._id, `${cat.name} (${count})`, isActive);\n                tabsEl.appendChild(tab);\n            }\n        });\n        \n        // Restore scroll position\n        tabsEl.scrollLeft = currentScroll;\n    }\n\n    function createTab(catId, label, isActive) {\n        const tab = document.createElement('button');\n        const baseClass = \"mobile-category-pill shrink-0 whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all duration-200\";\n        const activeClass = \"bg-blue-500 text-white shadow-md\";\n        const inactiveClass = \"bg-white text-gray-700 border border-gray-200 active:bg-gray-50\";\n        \n        tab.className = `${baseClass} ${isActive ? activeClass : inactiveClass}`;\n        tab.textContent = label;\n        tab.dataset.categoryId = catId;\n        \n        tab.onclick = () => {\n            MobileAppState.currentCategory = catId;\n            // Pass current search text to preserve filter\n            renderMobileContent(document.getElementById('mobileSearchInput').value.trim());\n        };\n        \n        return tab;\n    }\n\n    function renderMobileContent(filterText = \"\") {\n        if (!contentEl || !listEl) return;\n        \n        const isSearching = filterText.length > 0;\n        let flows = MobileAppState.allFlows;\n        \n        // 1. First filter by search text\n        if (isSearching) {\n            flows = flows.filter(f => matchKeywords(f.name, filterText));\n        }\n\n        // 2. Then filter by category\n        if (MobileAppState.currentCategory === 'fav') {\n            flows = flows.filter(f => MobileAppState.favorites.includes(f.id));\n        } else if (MobileAppState.currentCategory !== 'all') {\n            flows = flows.filter(f => f.categoryId === MobileAppState.currentCategory);\n        }\n        \n        const flowsToShow = flows;\n        \n        // Update tabs to reflect these search results\n        renderMobileTabs(filterText);\n        \n        listEl.innerHTML = \"\";\n        contentEl.scrollTop = 0;\n        \n        if (flowsToShow.length === 0) {\n            listEl.innerHTML = `\n                <div class=\"flex flex-col items-center justify-center pt-20 text-center\">\n                    <div class=\"text-gray-300 text-7xl mb-4\">∅</div>\n                    <div class=\"text-gray-400 text-sm\">${isSearching ? '未找到匹配的流程' : '此分类暂无流程'}</div>\\n                </div>\n            `;\n            return;\n        }\n        \n        MobileAppState.filteredFlows = flowsToShow;\n        MobileAppState.renderedCount = 0;\n        \n        renderNextBatch();\n        updateSentinel();\n    }\n\n    function renderNextBatch() {\n        const { filteredFlows, renderedCount, batchSize } = MobileAppState;\n        const total = filteredFlows.length;\n        if (renderedCount >= total) return;\n        \n        const nextBatch = filteredFlows.slice(renderedCount, renderedCount + batchSize);\n        const fragment = document.createDocumentFragment();\n        \n        nextBatch.forEach((flow, i) => {\n            const index = renderedCount + i;\n            const card = createMobileFlowCard(flow, index);\n            \n            // Remove animation for later batches to avoid scroll lag appearance\n            if (renderedCount > 0) {\n                card.style.animationDelay = '0s';\n            }\n            \n            fragment.appendChild(card);\n        });\n        \n        // Remove sentinel if exists\n        const sentinel = document.getElementById('scroll-sentinel');\n        if (sentinel) sentinel.remove();\n        \n        listEl.appendChild(fragment);\n        MobileAppState.renderedCount += nextBatch.length;\n        \n        updateSentinel();\n    }\n\n    function updateSentinel() {\n        if (MobileAppState.renderedCount < MobileAppState.filteredFlows.length) {\n            const sentinel = document.createElement('div');\n            sentinel.id = 'scroll-sentinel';\n            sentinel.className = 'flex justify-center p-4';\n            sentinel.innerHTML = '<span class=\"text-gray-400 text-xs\">加载更多...</span>';\n            listEl.appendChild(sentinel);\n            if (observer) observer.observe(sentinel);\n        }\n    }\n\n    function createMobileFlowCard(flow, index) {\n        const isFav = MobileAppState.favorites.includes(flow.id);\n        const colorMap = [\n            'bg-blue-50 text-blue-600', \n            'bg-orange-50 text-orange-600', \n            'bg-emerald-50 text-emerald-600', \n            'bg-indigo-50 text-indigo-600',\n            'bg-purple-50 text-purple-600',\n            'bg-pink-50 text-pink-600'\n        ];\n        const colorClass = colorMap[(flow.name.length + index) % colorMap.length];\n        const firstChar = flow.name.replace(/【.*?】/g, '').charAt(0) || flow.name.charAt(0);\n        \n        const card = document.createElement('div');\n        card.className = 'relative flex items-center gap-3 rounded-2xl border border-gray-200 bg-white p-4 shadow-sm transition-all duration-200 active:scale-[0.97] active:bg-gray-50';\n        card.style.animation = 'flowCardSlideIn 0.4s ease-out forwards';\n        card.style.animationDelay = `${Math.min(index * 0.05, 0.5)}s`;\n        card.style.opacity = '0';\n        \n        const iconClass = isFav ? 'text-yellow-400 fill-current' : 'text-gray-300 fill-none stroke-current stroke-[1.5]';\n        \n        card.innerHTML = `\n            <div class=\"flex h-14 w-14 shrink-0 items-center justify-center rounded-xl text-lg font-bold ${colorClass}\">\n                ${escapeHtml(firstChar)}\n            </div>\n            <div class=\"flex-1 min-w-0\">\n                <div class=\"text-base font-medium text-gray-900 leading-snug line-clamp-3\" title=\"${escapeHtml(flow.name)}\">\n                    ${escapeHtml(flow.name)}\n                </div>\n            </div>\n            <button class=\"star-btn shrink-0 flex h-10 w-10 items-center justify-center rounded-full transition-all duration-200 active:scale-90 ${isFav ? 'bg-yellow-50' : 'active:bg-gray-100'}\" title=\"${isFav ? '取消收藏' : '收藏'}\">\n                <svg class=\"h-6 w-6 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            </button>\\n        `;\n        \n        // Click card to select flow\n        card.onclick = (e) => {\n            if (!e.target.closest('.star-btn')) {\n                setTimeout(() => {\n                    data._scoped.doAction([\n                        { \n                            \"actionType\": \"broadcast\", \n                            \"args\": { \"eventName\": \"flows.selected\" }, \n                            \"data\": { \"value\": flow.id } \n                        }\n                    ]);\n                }, 50);\n            }\n        };\n        \n        // Star button to toggle favorite\n        const starBtn = card.querySelector('.star-btn');\n        const starIcon = starBtn.querySelector('svg');\n        starBtn.onclick = (e) => {\n            e.stopPropagation();\n            const newFavState = !isFav;\n            MobileAppState.favorites = MobileWorkflowService.toggleFavorite(flow.id, newFavState);\n            \n            // Update UI\n            if (newFavState) {\n                starBtn.classList.add('bg-yellow-50');\n                starBtn.classList.remove('active:bg-gray-100');\n                starIcon.setAttribute('class', 'h-6 w-6 transition-colors duration-300 text-yellow-400 fill-current');\n            } else {\n                starBtn.classList.remove('bg-yellow-50');\n                starBtn.classList.add('active:bg-gray-100');\n                starIcon.setAttribute('class', 'h-6 w-6 transition-colors duration-300 text-gray-300 fill-none stroke-current stroke-[1.5]');\n            }\n            \n            // Refresh tabs and content after short delay\n            setTimeout(() => {\n                renderMobileTabs();\n                renderMobileContent(searchInput.value.trim());\n            }, 300);\n        };\n        \n        return card;\n    }\n\n    // Initialize\n    initMobile();\n</script>",
     "className": "h-full"
-}
+}

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

@@ -89,16 +89,16 @@
                     "name": "radios",
                     "type": "radios",
                     "label": false,
-                    "value": "190",
+                    "value": "210",
                     "className": "mr-0",
                     "options": [
                        {
                             "label": "A4纵向",
-                            "value": "190"
+                            "value": "210"
                         },
                         {
                             "label": "A4横向",
-                            "value": "277"
+                            "value": "297"
                         }
                     ],
                     "mode": "inline",
@@ -107,7 +107,7 @@
                             "actions": [
                                 {
                                     "actionType": "custom",
-                                    "script": "doAction({actionType: 'setValue', componentId: 'u:print-width', args: {value: Number(event.data.value)}}); $('.steedos-instance-related-view-wrapper .instance-form').css('width', event.data.value + 'mm'); $('.steedos-instance-related-view-wrapper .instance-approve-history').css('width', event.data.value + 'mm'); var orientation = event.data.value === '277' ? 'landscape' : 'portrait'; var styleEl = document.getElementById('print-page-orientation'); if (!styleEl) { styleEl = document.createElement('style'); styleEl.id = 'print-page-orientation'; document.head.appendChild(styleEl); } styleEl.textContent = '@page { size: A4 ' + orientation + '; }';"
+                                    "script": "doAction({actionType: 'setValue', componentId: 'u:print-width', args: {value: Number(event.data.value)}}); $('.steedos-instance-related-view-wrapper').css('width', event.data.value + 'mm');"
                                 }
                             ]
                         }
@@ -117,7 +117,7 @@
                     "name": "width",
                     "type": "input-number",
                     "id": "u:print-width",
-                    "value": "190",
+                    "value": "210",
                     "mode": "inline",
                     "className": "w-20 mr-0",
                     "min": "100",
@@ -126,7 +126,7 @@
                             "actions": [
                                 {
                                     "actionType": "custom",
-                                    "script": "$('.steedos-instance-related-view-wrapper .instance-form').css('width', event.data.value + 'mm'); $('.steedos-instance-related-view-wrapper .instance-approve-history').css('width', event.data.value + 'mm');"
+                                    "script": "$('.steedos-instance-related-view-wrapper').css('width', event.data.value + 'mm');"
                                 }
                             ]
                         }
@@ -233,28 +233,45 @@
     },
     "editorState": "default",
     "css": {
+        "body": {
+            "background-color": "#C0C0C0"
+        },
+        "body > .bg-slate-50": {
+            "background-color": "transparent !important"
+        },
+        ".steedos-instance-related-view-wrapper": {
+            "width": "210mm",
+            "margin": "0 auto",
+            "background-color": "#fff"
+        },
         ".steedos-instance-related-view-wrapper > .antd-Page-content": {
-            "display": "inline-block",
-            "transition": "width 0.5s ease-in-out",
-            "width": "unset"
+            "transition": "width 0.5s ease-in-out"
         },
         ".steedos-instance-related-view-wrapper .instance-form": {
-            "width": "190mm",
+            "width": "100%",
+            "margin": "0 auto",
+            "padding": "0 15px",
             "transition": "width 0.5s ease-in-out"
         },
         ".steedos-instance-related-view-wrapper .instance-approve-history": {
-            "width": "190mm",
+            "width": "100%",
+            "margin": "0 auto",
+            "padding": "0 15px",
             "transition": "width 0.5s ease-in-out"
         },
-        ".steedos-instance-related-view-wrapper .steedos-amis-instance-view-content": {
-            "display": "inline-block"
+        ".steedos-instance-related-view-wrapper .instance-name": {
+            "margin": "10px 0 5px 0"
+        },
+        ".steedos-instance-related-view-wrapper .table-page-title": {
+            "display": "none !important"
+        },
+        ".steedos-instance-related-view-wrapper .table-page-body.form-table > tbody > tr:first-child": {
+            "visibility": "collapse"
         },
         ".steedos-amis-instance-view-body": {
-            "padding": "unset",
-            "margin": "1rem",
-            "display": "flex",
-            "flex-direction": "column",
-            "align-items": "center"
+            "padding": "0",
+            "margin": "0",
+            "align-items": "stretch"
         },
         ".steedos-global-header-root": {
             "display": "none"
@@ -353,23 +370,39 @@
                 "height": "auto !important",
                 "overflow": "visible !important",
                 "display": "block !important",
-                "position": "static !important"
+                "position": "static !important",
+                "background-color": "#fff !important"
             },
             ".resize-sensor, .no-print, .antd-Page-toolbar, .steedos-global-header-root": {
                 "display": "none !important"
             },
-            ".steedos-instance-related-view-wrapper, .steedos-instance-related-view-wrapper .antd-Page-content, .steedos-instance-related-view-wrapper .antd-Page-main, .steedos-instance-related-view-wrapper .antd-Page-body, .steedos-instance-related-view-wrapper .steedos-instance-detail-wrapper, .steedos-instance-related-view-wrapper .antd-Service, .steedos-instance-related-view-wrapper .antd-Wrapper, .steedos-instance-related-view-wrapper .steedos-amis-instance-view, .steedos-instance-related-view-wrapper .steedos-amis-instance-view-body, .steedos-instance-related-view-wrapper .steedos-amis-instance-view-content, .steedos-instance-related-view-wrapper .liquid-amis-container": {
+            ".steedos-instance-related-view-wrapper": {
                 "display": "block !important",
                 "height": "auto !important",
-                "width": "100% !important",
+                "margin": "0 auto !important",
                 "overflow": "visible !important",
                 "flex": "none !important",
                 "position": "static !important"
             },
+            ".steedos-instance-related-view-wrapper .antd-Page-content, .steedos-instance-related-view-wrapper .antd-Page-main, .steedos-instance-related-view-wrapper .antd-Page-body, .steedos-instance-related-view-wrapper .steedos-instance-detail-wrapper, .steedos-instance-related-view-wrapper .antd-Service, .steedos-instance-related-view-wrapper .antd-Wrapper, .steedos-instance-related-view-wrapper .steedos-amis-instance-view, .steedos-instance-related-view-wrapper .steedos-amis-instance-view-body, .steedos-instance-related-view-wrapper .steedos-amis-instance-view-content, .steedos-instance-related-view-wrapper .liquid-amis-container": {
+                "display": "block !important",
+                "height": "auto !important",
+                "width": "100% !important",
+                "overflow": "visible !important",
+                "flex": "none !important",
+                "position": "static !important",
+                "padding": "0 !important",
+                "margin": "0 !important"
+            },
             ".steedos-instance-related-view-wrapper .instance-form": {
                  "margin": "0 auto",
-                 "width": "100% !important",
-                 "max-width": "100% !important"
+                 "padding": "0 15px !important",
+                 "width": "100% !important"
+            },
+            ".steedos-instance-related-view-wrapper .instance-approve-history": {
+                 "margin": "0 auto",
+                 "padding": "0 15px !important",
+                 "width": "100% !important"
             },
             ".steedos-instance-related-view-wrapper .instance-form-view": {
                 "table-layout": "fixed !important",
@@ -380,39 +413,75 @@
                 "display": "block !important"
             },
             ".steedos-instance-related-view-wrapper .antd-Table-contentWrap": {
-                "overflow-y": "visible !important",
                 "overflow-x": "auto !important",
                 "display": "block !important",
                 "width": "100% !important",
                 "height": "auto !important"
             },
+            ".steedos-instance-related-view-wrapper .instance-form .td-childfield": {
+                "overflow-x": "auto !important",
+                "overflow-y": "visible !important"
+            },
             ".steedos-instance-related-view-wrapper .instance-form-view td": {
                 "border-width": "1px !important"
             },
             ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table": {
                 "-webkit-print-color-adjust": "exact !important",
                 "print-color-adjust": "exact !important",
-                "table-layout": "auto !important"
+                "table-layout": "auto !important",
+                "width": "100% !important",
+                "border-collapse": "collapse !important"
+            },
+            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table thead": {
+                "display": "table-row-group !important"
             },
             ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table th": {
                 "border-left": "1px solid #000 !important",
+                "border-right": "1px solid #000 !important",
                 "border-bottom": "1px solid #000 !important",
+                "border-top": "none !important",
                 "white-space": "normal !important"
             },
+            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table th:first-child, .steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table td:first-child": {
+                "border-left": "none !important"
+            },
+            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table th:last-child, .steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table td:last-child": {
+                "border-right": "none !important"
+            },
             ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table td": {
-                "border-left": "1px solid #000 !important",
-                "border-bottom": "1px solid #000 !important"
+                "border": "1px solid #000 !important"
+            },
+            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table th.antd-Table-operationCell, .steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table td.antd-Table-operationCell, .steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table td.steedos-input-table-column-operation": {
+                "display": "none !important"
             },
-            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table th.antd-Table-operationCell, .steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table td.antd-Table-operationCell": {
-                "visibility": "collapse !important",
-                "border": "none !important",
-                "padding": "0 !important"
+            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table tbody td .antd-Form-static": {
+                "word-break": "normal !important",
+                "white-space": "normal !important",
+                "overflow": "visible !important",
+                "text-overflow": "clip !important",
+                "max-width": "none !important"
             },
-            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Form-static": {
-                "word-break": "normal !important"
+            ".steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table tbody td .antd-PlainField, .steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table tbody td .antd-TplField, .steedos-instance-related-view-wrapper .steedos-input-table .antd-Table-table tbody td .antd-Words-field": {
+                "white-space": "normal !important",
+                "overflow": "visible !important",
+                "text-overflow": "clip !important",
+                "max-width": "none !important",
+                "display": "inline !important"
             },
             ".steedos-instance-related-view-wrapper .instance-approve-history .antd-Table-table tr td": {
                 "border-bottom": "1px solid #e8e8e8 !important"
+            },
+            ".antd-Table-content.scroll-end": {
+                "direction": "rtl !important"
+            },
+            ".antd-Table-content.scroll-end table": {
+                "direction": "ltr !important"
+            },
+            ".steedos-instance-related-view-wrapper .table-page-body.form-table > tbody > tr:first-child": {
+                "display": "none !important"
+            },
+            ".steedos-instance-related-view-wrapper .table-page-body.form-table > tbody > tr:nth-child(2) td": {
+                "border-top": "none !important"
             }
         }
     },
@@ -422,7 +491,7 @@
             "actions": [
                 {
                     "actionType": "custom",
-                    "script": "document.querySelectorAll('link[rel=\"stylesheet\"]').forEach(link => { if (link.href.includes('salesforce-lightning-design-system.min.css')) { link.remove(); } }); var styleEl = document.createElement('style'); styleEl.id = 'print-page-orientation'; styleEl.textContent = '@page { size: A4 portrait; }'; document.head.appendChild(styleEl);"
+                    "script": "document.querySelectorAll('link[rel=\"stylesheet\"]').forEach(link => { if (link.href.includes('salesforce-lightning-design-system.min.css')) { link.remove(); } }); for(var si=0;si<document.styleSheets.length;si++){try{var sh=document.styleSheets[si];if(!sh.href||!sh.href.match(/index-[A-Za-z0-9]+\\.css/))continue;for(var ri=sh.cssRules.length-1;ri>=0;ri--){var sel=sh.cssRules[ri].selectorText||'';if(sel.match(/^::?-webkit-scrollbar/))sh.deleteRule(ri);}}catch(e){}} var styleEl=document.createElement('style'); styleEl.id='print-page-orientation'; styleEl.textContent='@page { margin: 0; }'; document.head.appendChild(styleEl); document.addEventListener('scroll',function(e){var t=e.target;if(t&&t.classList&&t.classList.contains('antd-Table-content')){if(window._isPrinting)return;var sl=t.scrollLeft;var max=t.scrollWidth-t.clientWidth;if(sl>0&&sl>=max-1){t.classList.add('scroll-end');}else{t.classList.remove('scroll-end');}}},true); window.addEventListener('beforeprint',function(){window._isPrinting=true;}); window.addEventListener('afterprint',function(){window._isPrinting=false;});"
                 },
                 {
                     "actionType": "custom",