@steedos-labs/plugin-workflow 3.0.26 → 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/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/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/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;

package/package.json

@@ -1,8 +1,20 @@
 {
   "name": "@steedos-labs/plugin-workflow",
-  "version": "3.0.26",
+  "version": "3.0.27",
   "main": "package.service.js",
   "license": "MIT",
+  "files": [
+    "main",
+    "src",
+    "designer/dist",
+    "public/applications",
+    "public/office",
+    "public/workflow",
+    "package.service.js",
+    "package.service.yml",
+    "LICENSE.txt",
+    "README.md"
+  ],
   "scripts": {
     "build:watch": "tsc --watch",
     "release": "npm publish --registry https://registry.npmjs.org && npx cnpm sync @steedos-labs/plugin-workflow",