@steedos-labs/plugin-workflow 3.0.25 → 3.0.27

package/designer/README.md

@@ -0,0 +1,110 @@
+# Workflow Designer (React + shadcn/ui)
+
+Modern workflow designer built with React 18, TypeScript, and shadcn/ui.
+
+## 🚀 Quick Start
+
+### Development
+
+```bash
+npm install
+npm run dev
+```
+
+Open http://localhost:5173/
+
+### Production Build
+
+```bash
+npm run build
+```
+
+Built files will be in `dist/` directory.
+
+## 🛠️ Tech Stack
+
+- **React 19** - UI framework
+- **TypeScript** - Type safety
+- **Vite** - Build tool
+- **Tailwind CSS** - Styling
+- **shadcn/ui** - UI components
+- **Zustand** - State management
+- **Axios** - HTTP client
+
+## 📁 Project Structure
+
+```
+designer/
+├── src/
+│   ├── components/
+│   │   ├── ui/              # shadcn/ui components
+│   │   ├── layout/          # Layout components
+│   │   ├── workflow/        # Workflow-specific (TODO)
+│   │   └── form/            # Form designer (TODO)
+│   ├── lib/                 # Utilities
+│   ├── pages/               # Page components
+│   │   └── WorkflowDesigner.tsx
+│   ├── stores/              # Zustand stores (TODO)
+│   ├── types/               # TypeScript types (TODO)
+│   ├── App.tsx
+│   └── main.tsx
+├── public/
+├── dist/                    # Build output
+└── package.json
+```
+
+## 🌐 Backend Integration
+
+The new designer is served via:
+- **Development**: http://localhost:5173/
+- **Production**: /api/workflow/designer-v2
+
+Backend route: `main/default/routes/designer-v2.router.js`
+
+## 📝 Features
+
+### Implemented ✅
+- Modern UI with shadcn/ui
+- Responsive layout
+- TypeScript type safety
+- Basic component structure
+- Development server
+- Production build
+
+### TODO 🚧
+- Workflow canvas with React Flow
+- Form designer components
+- State management with Zustand
+- API integration
+- Internationalization (i18n)
+- Unit tests
+- More shadcn/ui components
+
+## 🎨 Customization
+
+### Tailwind Configuration
+
+Edit `tailwind.config.js` to customize theme.
+
+### Path Aliases
+
+TypeScript path aliases are configured in `tsconfig.app.json`:
+- `@/` maps to `./src/`
+
+## 📦 Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run lint` - Run ESLint
+- `npm run preview` - Preview production build
+
+## 🔗 Related Documentation
+
+See parent directory for comprehensive planning docs:
+- [Refactoring Plan](../DESIGNER_REFACTOR_PLAN.md)
+- [URL Structure](../URL_STRUCTURE.md)
+- [Quick Start Guide](../QUICK_START_GUIDE.md)
+
+## 📄 License
+
+MIT

package/main/default/objects/flows/flows.object.yml

@@ -769,6 +769,24 @@ actions:
               const iframe_url = `/api/workflow/designer?url=${url}&title=${title}`;
               return Steedos.openWindow(Steedos.absoluteUrl(iframe_url));
             }
+  designFlowV2:
+    label: 流程设计器V2(BETA)
+    visible: !<tag:yaml.org,2002:js/function> |-
+      function (object_name, record_id, record_permissions) {
+              return true;
+            }
+    'on': record_more
+    todo: !<tag:yaml.org,2002:js/function> |-
+      function (object_name, record_id, record_permissions, data) {
+              const flow = data && data.record;
+              const space = Builder.settings.context.user.spaceId;
+              const companyId = Builder.settings.context.user.company_id;
+              let url = `/api/workflow/designer-v2?flowId=${flow._id}`;
+              if (companyId && !Builder.settings.context.user.is_space_admin) {
+                url = url + `&companyId=${companyId}`;
+              }
+              return Steedos.openWindow(url);
+            }
   enableFlow:
     label: Enable Flow
     visible: !<tag:yaml.org,2002:js/function> |-

package/main/default/objects/instance_tasks/buttons/instance_new.button.yml

@@ -21,8 +21,11 @@ amis_schema: |-
                                       {
                                         "type": "service",
                                         "dsType": "api",
+                                        "data": {
+                                            "isMobile": "${window:innerWidth <= 768}"
+                                        },
                                         "schemaApi": {
-                                            "url": "/api/v6/functions/pages/schema?pageId=flow_selector",
+                                            "url": "${isMobile ? '/api/v6/functions/pages/schema?pageId=flow_selector_mobile' : '/api/v6/functions/pages/schema?pageId=flow_selector'}",
                                             "method": "get"
                                         },
                                         "initFetchSchema": true,

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

@@ -21,8 +21,11 @@ amis_schema: |-
                                 {
                                         "type": "service",
                                         "dsType": "api",
+                                        "data": {
+                                            "isMobile": "${window:innerWidth <= 768}"
+                                        },
                                         "schemaApi": {
-                                            "url": "/api/v6/functions/pages/schema?pageId=flow_selector",
+                                            "url": "${isMobile ? '/api/v6/functions/pages/schema?pageId=flow_selector_mobile' : '/api/v6/functions/pages/schema?pageId=flow_selector'}",
                                             "method": "get"
                                         },
                                         "initFetchSchema": true,

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

@@ -83,6 +83,17 @@ amis_schema: |-
                                                           },
                                                           "actionType": "ajax"
                                                       },
+                                                      {
+                                                          "actionType": "broadcast",
+                                                          "args": {
+                                                              "eventName": "@data.@instanceDetail.changed"
+                                                          },
+                                                          "data": {}
+                                                      },
+                                                      {
+                                                        "actionType": "custom",
+                                                        "script": "$('.steedos-workflow-reload-btn').trigger('click')"
+                                                      },
                                                       {
                                                           "componentId": "",
                                                           "args": {},

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

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

@@ -0,0 +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    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            searchInput.addEventListener('input', (e) => {\n                renderMobileContent(e.target.value.trim());\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.includes(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 => f.name.includes(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                ${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=\"${flow.name}\">\n                    ${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/flow_selector_mobile.page.yml

@@ -0,0 +1,7 @@
+name: flow_selector_mobile
+is_active: true
+label: 流程选择(移动端)
+pageAssignments: []
+render_engine: amis
+type: app
+widgets: []

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

@@ -214,7 +214,7 @@
     "data": {},
     "id": "u:d37465183f56",
     "className": "steedos-instance-related-view-wrapper flex justify-center",
-    "bodyClassName": "p-0 flex flex-1 overflow-hidden h-full",
+    "bodyClassName": "p-0 flex flex-1 h-full",
     "name": "amis-root-workflow",
     "initApi": {
         "url": "/api/workflow/v2/instance/${recordId}/permission",
@@ -302,6 +302,12 @@
         ".steedos-amis-instance-view-content": {
             "max-width": "none !important"
         },
+        ".steedos-instance-print-wrapper .liquid-amis-container": {
+            "overflow": "visible !important"
+        },
+        ".steedos-instance-print-wrapper .instance-template .table-page-body": {
+            "width": "100%"
+        },
         ".simplify-traces .step-type-start":{
             "display": "none !important"
         },

package/main/default/routes/am.router.js

@@ -81,6 +81,34 @@ router.get('/am/designer/startup', async function (req, res) {
     }
 })
 
+// startup v2 - lightweight: only return the specified flow and its form
+router.get('/am/designer/startup/v2', async function (req, res) {
+    try {
+        let flowId = req.query.flowId;
+        if (!flowId) {
+            return res.status(400).send({ status: 'error', message: 'flowId is required' });
+        }
+
+        let flowCollection = await getCollection('flows');
+        let formCollection = await getCollection('forms');
+
+        let flow = await flowCollection.findOne({ _id: flowId }, { projection: { historys: 0 } });
+        if (!flow) {
+            return res.status(404).send({ status: 'error', message: 'Flow not found' });
+        }
+
+        let form = await formCollection.findOne({ _id: flow.form }, { projection: { historys: 0 } });
+
+        res.send({
+            flow,
+            form,
+            sync_token: new Date().getTime() / 1000
+        });
+    } catch (error) {
+        res.status(500).send(error.message);
+    }
+})
+
 // 表单
 router.post('/am/forms', async function (req, res) {
     try {

package/main/default/routes/api_workflow_ai_design.router.js

@@ -0,0 +1,184 @@
+const express = require("express");
+const router = express.Router();
+const steedosAuth = require('@steedos/auth');
+const axios = require('axios');
+const bodyParser = require('body-parser');
+
+router.use(bodyParser.json({ limit: '2mb' }));
+
+/**
+ * AI Workflow Designer endpoint
+ * 
+ * Accepts natural language instructions and current workflow steps,
+ * calls an OpenAI-compatible LLM API to generate modified steps.
+ * 
+ * Environment variables:
+ *   WORKFLOW_AI_API_KEY    - API key for the LLM provider
+ *   WORKFLOW_AI_BASE_URL   - Base URL (default: https://api.openai.com/v1)
+ *   WORKFLOW_AI_MODEL      - Model name (default: gpt-4o)
+ */
+router.post('/am/ai/design', async function auth(req, res, next) {
+  try {
+    const result = await steedosAuth.auth(req, res);
+    if (result && result.userId) {
+      req.user = result;
+      next();
+    } else {
+      res.status(401).json({ error: '请先登录' });
+    }
+  } catch (e) {
+    res.status(401).json({ error: '认证失败' });
+  }
+}, async function (req, res) {
+  try {
+    const apiKey = process.env.WORKFLOW_AI_API_KEY;
+    if (!apiKey) {
+      return res.status(500).json({ error: '请先配置环境变量 WORKFLOW_AI_API_KEY' });
+    }
+
+    const baseURL = process.env.WORKFLOW_AI_BASE_URL || 'https://api.openai.com/v1';
+    const model = process.env.WORKFLOW_AI_MODEL || 'gpt-4o';
+
+    const { steps, formFields, userRequest } = req.body;
+
+    if (!userRequest) {
+      return res.status(400).json({ error: '请输入需求描述' });
+    }
+
+    // Build form fields description
+    const fieldsDesc = (formFields || [])
+      .filter(f => f.code)
+      .map(f => `  - ${f.name || f.code} (编码: ${f.code}, 类型: ${f.type || 'text'})`)
+      .join('\n');
+
+    const systemPrompt = `你是一个专业的审批流程设计师。你的任务是根据用户的自然语言描述，修改审批流程的步骤定义（JSON 格式）。
+
+## 步骤数据结构
+
+每个步骤(step)是一个 JSON 对象，必须包含以下字段：
+- _id: 字符串，唯一标识。已有步骤保留原 _id，新步骤使用 "step-" + 小写字母数字随机串（如 "step-a1b2c3d4"）
+- name: 字符串，步骤名称
+- step_type: 字符串，类型，只能是以下之一：
+  - "start" — 开始节点（流程必须有且仅有一个）
+  - "end" — 结束节点（流程必须有且仅有一个）
+  - "submit" — 填写步骤
+  - "sign" — 审批步骤
+  - "counterSign" — 会签步骤（多人同时审批）
+  - "condition" — 条件分支节点
+- deal_type: 字符串, 处理人身份（submit/sign/counterSign 必填），可选值：
+  - "pickupAtRuntime" — 审批时指定
+  - "specifyUser" — 指定人员
+  - "applicantSuperior" — 申请人的上级
+  - "applicant" — 申请人
+  - "hrRole" — 指定角色
+  - "applicantRole" — 指定审批岗位
+- posx, posy: 数字，节点位置。纵向从上到下排列，开始节点 posx=200,posy=40，之后每步 y 增加约120
+- timeout_hours: 数字，超时小时数，默认 168
+- lines: 数组，从当前步骤出发的连线，每条连线包含：
+  - _id: 字符串，连线唯一标识，用 "line-" + 随机串
+  - name: 字符串，连线名称（可空）
+  - to_step: 字符串，目标步骤的 _id
+  - state: 字符串，"submitted"（提交）/ "approved"（核准）/ "rejected"（驳回）
+  - condition: 字符串，条件表达式（仅条件节点的出线需要），格式如 {字段编码} > 10000
+
+## 规则
+1. 流程必须有且仅有一个 start 和一个 end 节点
+2. 所有步骤必须通过 lines 互相连通，不能有孤立节点
+3. 从 start 开始必须能最终到达 end
+4. 审批步骤(sign)通常有两条出线：approved（核准）到下一步，rejected（驳回）回到填写或上一步
+5. 条件节点(condition)有多条出线，每条带不同的 condition 表达式
+6. 不要添加 notify、concurrentStart、concurrentEnd 类型的步骤
+7. 修改时尽可能保留用户已有步骤的 _id 和设置，只改需要改的部分
+8. 返回完整的 steps 数组
+
+## 输出格式
+直接返回 JSON 数组，不要有任何其他文字、解释、markdown 标记。`;
+
+    const userContent = `## 当前表单字段
+${fieldsDesc || '（无字段信息）'}
+
+## 当前流程步骤
+${JSON.stringify(steps || [], null, 2)}
+
+## 用户需求
+${userRequest}
+
+请返回修改后的完整 steps JSON 数组。`;
+
+    const response = await axios.post(`${baseURL}/chat/completions`, {
+      model,
+      messages: [
+        { role: 'system', content: systemPrompt },
+        { role: 'user', content: userContent },
+      ],
+      temperature: 0.3,
+      max_tokens: 8000,
+    }, {
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+      },
+      timeout: 120000,
+    });
+
+    const content = response.data?.choices?.[0]?.message?.content;
+    if (!content) {
+      return res.status(500).json({ error: 'AI 未返回有效内容' });
+    }
+
+    // Try to parse the JSON from the response
+    let stepsResult;
+    try {
+      let text = content.trim();
+      // Strip markdown code block if present
+      if (text.startsWith('```json')) text = text.slice(7);
+      else if (text.startsWith('```')) text = text.slice(3);
+      if (text.endsWith('```')) text = text.slice(0, -3);
+      text = text.trim();
+
+      // Find JSON array
+      const arrStart = text.indexOf('[');
+      const arrEnd = text.lastIndexOf(']');
+      if (arrStart !== -1 && arrEnd > arrStart) {
+        stepsResult = JSON.parse(text.substring(arrStart, arrEnd + 1));
+      } else {
+        stepsResult = JSON.parse(text);
+      }
+    } catch (parseErr) {
+      return res.status(500).json({
+        error: 'AI 返回内容无法解析为 JSON',
+        raw: content,
+      });
+    }
+
+    if (!Array.isArray(stepsResult)) {
+      return res.status(500).json({ error: 'AI 返回的不是步骤数组' });
+    }
+
+    // Basic validation
+    const hasStart = stepsResult.some(s => s.step_type === 'start');
+    const hasEnd = stepsResult.some(s => s.step_type === 'end');
+    if (!hasStart || !hasEnd) {
+      return res.status(500).json({ error: 'AI 返回的流程缺少开始或结束节点' });
+    }
+
+    return res.json({ steps: stepsResult });
+
+  } catch (error) {
+    console.error('AI workflow design error:', error?.response?.data || error?.message || error);
+    if (error.response) {
+      const status = error.response.status;
+      const data = error.response.data;
+      if (status === 401 || status === 403) {
+        return res.status(500).json({ error: 'AI API 密钥无效或权限不足，请检查 WORKFLOW_AI_API_KEY' });
+      }
+      if (status === 429) {
+        return res.status(500).json({ error: 'AI API 请求频率超限，请稍后重试' });
+      }
+      return res.status(500).json({ error: data?.error?.message || 'AI API 调用失败' });
+    }
+    return res.status(500).json({ error: error.message || 'AI 服务调用失败' });
+  }
+});
+
+exports.default = router;

package/main/default/routes/api_workflow_next_step_users.router.js

@@ -87,6 +87,10 @@ router.post('/api/workflow/v2/nextStepUsers', requireAuthentication, async funct
 
                         if (applicant)
                             nextStepUsers = await WorkflowManager.getRoleUsersByOrgsAndRoles(spaceId, applicant.organizations, approveRoleIds);
+                        if(!nextStepUsers || nextStepUsers.length < 1){
+                            const roles = await WorkflowManager.getRoles(instance.space, approveRoleIds);
+                            error = t('next_step_users_not_found.applicant_role', {role_name: _.join(_.map(roles, 'name'), ', ')}, userSession.language)
+                        }
                         break;
                     case 'hrRole':
                         var approveHrRoleIds = nextStep.approver_hr_roles;

package/main/default/routes/designer-v2.router.js

@@ -0,0 +1,62 @@
+'use strict';
+const express = require('express');
+const router = express.Router();
+const { requireAuthentication } = require("@steedos/auth");
+const path = require('path');
+
+/**
+ * New React-based workflow designer
+ * URL: /api/workflow/designer-v2
+ */
+router.get('/api/workflow/designer-v2', requireAuthentication, async (req, res) => {
+  try {
+    // In development, proxy to Vite dev server
+    if (process.env.NODE_ENV === 'development') {
+      return res.redirect('http://localhost:5173');
+    }
+    
+    // In production, serve built React app
+    const designerPath = path.join(__dirname, '../../../designer/dist/index.html');
+    res.sendFile(designerPath);
+  } catch (e) {
+    res.status(500).send({
+      errors: [{ errorMessage: e.message }]
+    });
+  }
+});
+
+/**
+ * New designer startup API
+ * URL: /api/designer-v2/startup
+ */
+router.get('/api/designer-v2/startup', requireAuthentication, async (req, res) => {
+  try {
+    const { getObject } = require('@steedos/objectql');
+    
+    // Get workspace data
+    const space = await getObject("spaces").findOne(req.user.spaceId);
+    
+    // Return initialization data
+    res.json({
+      user: {
+        userId: req.user.userId,
+        name: req.user.name,
+        spaceId: req.user.spaceId
+      },
+      space: space,
+      message: 'New designer startup API - ready for implementation'
+    });
+  } catch (e) {
+    res.status(500).send({
+      errors: [{ errorMessage: e.message }]
+    });
+  }
+});
+
+/**
+ * Serve static assets for production (js, css, images, etc.)
+ */
+const designerDistPath = path.join(__dirname, '../../../designer/dist');
+router.use('/api/workflow/designer-v2', express.static(designerDistPath));
+
+exports.default = router;