@yuku123/z-wf-frontend-component 0.1.0

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@yuku123/z-wf-frontend-component",
+  "version": "0.1.0",
+  "private": false,
+  "description": "z-wf FlowDesigner 组件包 - LogicFlow 驱动的可视化流程设计器",
+  "keywords": [
+    "react",
+    "logicflow",
+    "flow-designer",
+    "workflow",
+    "z-opc"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "zifang",
+    "email": "1340947819@qq.com"
+  },
+  "homepage": "https://github.com/yuku123/z-opc/tree/main/z-wf/_frontend_component#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yuku123/z-opc.git",
+    "directory": "z-wf/_frontend_component"
+  },
+  "bugs": {
+    "url": "https://github.com/yuku123/z-opc/issues"
+  },
+  "main": "./dist/z-wf_frontend_component.umd.js",
+  "module": "./dist/z-wf_frontend_component.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/z-wf_frontend_component.es.js",
+      "require": "./dist/z-wf_frontend_component.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite --port 3098",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@logicflow/core": "^2.2.3",
+    "@logicflow/extension": "^2.2.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^6.2.0"
+  }
+}

package/src/components/FlowDesigner/index.module.css

@@ -0,0 +1,137 @@
+.designerContainer {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background: #fafafa;
+}
+
+.canvas {
+    width: 100%;
+    height: 100%;
+}
+
+/* 拖拽面板样式 */
+.dndItem {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px;
+    cursor: grab;
+    transition: all 0.2s;
+    border-radius: 6px;
+}
+
+.dndItem:hover {
+    background: #f0f7ff;
+    transform: scale(1.05);
+}
+
+.dndItem img {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 8px;
+}
+
+.dndItem span {
+    font-size: 12px;
+    color: #595959;
+    white-space: nowrap;
+}
+
+/* LogicFlow 样式覆盖 */
+:global(.lf-dnd-panel) {
+    width: 80px !important;
+    background: #fff;
+    border-right: 1px solid #e8e8e8;
+    padding: 16px 0;
+}
+
+:global(.lf-control) {
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+:global(.lf-mini-map) {
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 节点样式 */
+:global(.lf-node) {
+    cursor: pointer;
+}
+
+:global(.lf-node:hover) {
+    filter: brightness(0.95);
+}
+
+:global(.lf-node.selected) {
+    filter: drop-shadow(0 0 4px rgba(22, 119, 255, 0.5));
+}
+
+/* 边样式 */
+:global(.lf-edge) {
+    stroke: #8c8c8c;
+    stroke-width: 2;
+}
+
+:global(.lf-edge:hover) {
+    stroke: #1677ff;
+    stroke-width: 3;
+}
+
+/* 文本样式 */
+:global(.lf-text) {
+    font-size: 14px;
+    fill: #262626;
+}
+
+/* 属性面板 */
+.propertyPanel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 300px;
+    background: #fff;
+    border-left: 1px solid #e8e8e8;
+    padding: 16px;
+    overflow-y: auto;
+    z-index: 10;
+}
+
+.propertyPanelTitle {
+    font-size: 16px;
+    font-weight: 500;
+    color: #262626;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+/* 工具栏 */
+.toolbar {
+    position: absolute;
+    top: 16px;
+    left: 96px;
+    right: 316px;
+    height: 48px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    gap: 8px;
+    z-index: 10;
+}
+
+.toolbarDivider {
+    width: 1px;
+    height: 24px;
+    background: #e8e8e8;
+    margin: 0 8px;
+}

package/src/components/FlowDesigner/index.tsx

@@ -0,0 +1,133 @@
+import React, {useCallback, useEffect, useRef} from 'react';
+import styles from './index.module.css';
+import {registerApprovalNodes} from './nodes';
+import LogicFlow from '@logicflow/core';
+import {Control, DndPanel, Menu, MiniMap, SelectionSelect} from '@logicflow/extension';
+
+const nodeTypes = [
+    {
+        type: 'start',
+        label: '开始节点',
+        icon: 'https://cdn.jsdelivr.net/gh/LogicFlow/static@latest/docs/static/start.png'
+    },
+    {
+        type: 'approval',
+        label: '审批节点',
+        icon: 'https://cdn.jsdelivr.net/gh/LogicFlow/static@latest/docs/static/approve.png'
+    },
+    {
+        type: 'condition',
+        label: '条件分支',
+        icon: 'https://cdn.jsdelivr.net/gh/LogicFlow/static@latest/docs/static/condition.png'
+    },
+    {type: 'copy', label: '抄送节点', icon: 'https://cdn.jsdelivr.net/gh/LogicFlow/static@latest/docs/static/copy.png'},
+    {type: 'end', label: '结束节点', icon: 'https://cdn.jsdelivr.net/gh/LogicFlow/static@latest/docs/static/end.png'},
+];
+
+interface FlowDesignerProps {
+    processDefinitionId?: string;
+    initialData?: any;
+    readOnly?: boolean;
+    onSave?: (data: any) => void;
+    onDeploy?: () => void;
+}
+
+const FlowDesigner: React.FC<FlowDesignerProps> = ({
+                                                       processDefinitionId,
+                                                       initialData,
+                                                       readOnly = false,
+                                                       onSave,
+                                                       onDeploy,
+                                                   }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const lfRef = useRef<any>(null);
+
+    const initLogicFlow = useCallback(() => {
+        if (!containerRef.current) return;
+
+        LogicFlow.use(Control);
+        LogicFlow.use(MiniMap);
+        LogicFlow.use(Menu);
+        LogicFlow.use(DndPanel);
+        LogicFlow.use(SelectionSelect);
+
+        const lf = new LogicFlow({
+            container: containerRef.current,
+            grid: {size: 20, visible: true, type: 'dot', config: {color: '#e5e5e5'}},
+            keyboard: {enabled: true},
+            snapline: true,
+            outline: true,
+            textEdit: !readOnly,
+            isSilentMode: readOnly,
+            style: {rect: {rx: 4, ry: 4}},
+        });
+
+        registerApprovalNodes(lf);
+
+        lf.extension.dndPanel.setPatternItems(
+            nodeTypes.map(node => ({type: node.type, label: node.label, icon: node.icon, className: styles.dndItem}))
+        );
+
+        lf.render(initialData || {
+            nodes: [{id: 'start-1', type: 'start', x: 100, y: 300, text: '开始'}],
+            edges: []
+        });
+
+        lfRef.current = lf;
+    }, [initialData, readOnly]);
+
+    useEffect(() => {
+        // 确保CDN资源加载完成
+        if (typeof LogicFlow !== 'undefined') {
+            initLogicFlow();
+        } else {
+            const timer = setInterval(() => {
+                if (typeof LogicFlow !== 'undefined') {
+                    clearInterval(timer);
+                    initLogicFlow();
+                }
+            }, 300);
+            return () => clearInterval(timer);
+        }
+        return () => {
+            lfRef.current?.destroy();
+            lfRef.current = null;
+        };
+    }, [initLogicFlow]);
+
+    const getGraphData = useCallback(() => lfRef.current?.getGraphData() || null, []);
+
+    React.useImperativeHandle(
+        (React as any).useRef<any>().current,
+        () => ({getGraphData}),
+        [getGraphData]
+    );
+
+    return (
+        <div className={styles.designerContainer}>
+            <div ref={containerRef} className={styles.canvas} style={{height: '70vh'}}/>
+            <div style={{marginTop: 16, display: 'flex', gap: 12}}>
+                <button onClick={() => onSave?.(getGraphData())} style={{
+                    padding: '8px 16px',
+                    backgroundColor: '#1677ff',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: 4,
+                    cursor: 'pointer'
+                }}>保存流程
+                </button>
+                <button onClick={() => onDeploy?.()} style={{
+                    padding: '8px 16px',
+                    backgroundColor: '#52c41a',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: 4,
+                    cursor: 'pointer'
+                }}>部署流程
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default FlowDesigner;

package/src/components/FlowDesigner/nodes/index.ts

@@ -0,0 +1,157 @@
+import {CircleNode, h, PolygonNode, RectNode} from '@logicflow/core';
+
+// 开始节点
+class StartNode extends RectNode {
+    static extendKey = 'start';
+
+    getNodeStyle() {
+        const style = super.getNodeStyle();
+        style.fill = '#52c41a';
+        style.stroke = '#52c41a';
+        style.strokeWidth = 2;
+        return style;
+    }
+
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.color = '#fff';
+        style.fontSize = 14;
+        return style;
+    }
+
+    getShape() {
+        const {x, y, width, height} = this.getAttributes();
+        const r = height / 2;
+        return h('rect', {
+            x: x - width / 2,
+            y: y - height / 2,
+            width,
+            height,
+            rx: r,
+            ry: r,
+        });
+    }
+}
+
+// 审批节点
+class ApprovalNode extends RectNode {
+    static extendKey = 'approval';
+
+    getNodeStyle() {
+        const style = super.getNodeStyle();
+        style.fill = '#fff';
+        style.stroke = '#1677ff';
+        style.strokeWidth = 2;
+        return style;
+    }
+
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.color = '#262626';
+        style.fontSize = 14;
+        return style;
+    }
+}
+
+// 条件节点（菱形）
+class ConditionNode extends PolygonNode {
+    static extendKey = 'condition';
+
+    getNodeStyle() {
+        const style = super.getNodeStyle();
+        style.fill = '#fff7e6';
+        style.stroke = '#fa8c16';
+        style.strokeWidth = 2;
+        return style;
+    }
+
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.color = '#262626';
+        style.fontSize = 13;
+        return style;
+    }
+
+    getAttributes() {
+        const attributes = super.getAttributes();
+        const width = Math.max(80, attributes.width || 80);
+        const height = Math.max(80, attributes.height || 80);
+        const points = [
+            [attributes.x, attributes.y - height / 2],
+            [attributes.x + width / 2, attributes.y],
+            [attributes.x, attributes.y + height / 2],
+            [attributes.x - width / 2, attributes.y],
+        ];
+        return {...attributes, points, width, height};
+    }
+}
+
+// 抄送节点
+class CopyNode extends RectNode {
+    static extendKey = 'copy';
+
+    getNodeStyle() {
+        const style = super.getNodeStyle();
+        style.fill = '#f6ffed';
+        style.stroke = '#52c41a';
+        style.strokeWidth = 2;
+        style.strokeDasharray = '5,5';
+        return style;
+    }
+
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.color = '#262626';
+        style.fontSize = 14;
+        return style;
+    }
+}
+
+// 结束节点
+class EndNode extends CircleNode {
+    static extendKey = 'end';
+
+    getNodeStyle() {
+        const style = super.getNodeStyle();
+        style.fill = '#ff4d4f';
+        style.stroke = '#ff4d4f';
+        style.strokeWidth = 2;
+        return style;
+    }
+
+    getTextStyle() {
+        const style = super.getTextStyle();
+        style.color = '#fff';
+        style.fontSize = 14;
+        return style;
+    }
+}
+
+// 注册所有节点
+export function registerApprovalNodes(lf: any): void {
+    lf.register({
+        type: 'start',
+        view: StartNode,
+        model: RectNode.model,
+    });
+    lf.register({
+        type: 'approval',
+        view: ApprovalNode,
+        model: RectNode.model,
+    });
+    lf.register({
+        type: 'condition',
+        view: ConditionNode,
+        model: PolygonNode.model,
+    });
+    lf.register({
+        type: 'copy',
+        view: CopyNode,
+        model: RectNode.model,
+    });
+    lf.register({
+        type: 'end',
+        view: EndNode,
+        model: CircleNode.model,
+    });
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export {default as FlowDesigner} from './components/FlowDesigner'
+export {default} from './components/FlowDesigner'