yyd-flow-designer 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "yyd-flow-designer",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "private": false,
+  "description": "YYD Flow designer (process orchestration UI)",
+  "keywords": [
+    "react",
+    "flow",
+    "workflow",
+    "designer",
+    "xyflow",
+    "yyd-flow-designer"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.tsx",
+  "module": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx",
+    "./style.less": "./src/designer/style.less"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "echo 'library ships TypeScript source for Vite/Webpack hosts'",
+    "prepublishOnly": "node -e \"require('fs').accessSync('src/index.tsx')\""
+  },
+  "peerDependencies": {
+    "@ant-design/icons": ">=5",
+    "@heroicons/react": ">=2",
+    "@xyflow/react": ">=12",
+    "ahooks": ">=3",
+    "antd": ">=5",
+    "lodash": ">=4",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-hotkeys-hook": ">=4",
+    "zustand": ">=4"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@types/dagre": "^0.7.52",
+    "@types/lodash": "^4.17.13",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "typescript": "^5.6.3"
+  }
+}

package/src/adapters/hooks.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+type ServiceFn = (params?: any) => Promise<any>;
+
+/**
+ * 兼容 lowcode useService：期望后端返回 { Code, Content, Message }
+ */
+export function useService(fn: ServiceFn) {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<any>(null);
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+
+  const run = useCallback(async (params?: any) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fnRef.current(params);
+      setData(res);
+      return res;
+    } catch (e) {
+      setError(e);
+      throw e;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { data, run, loading, error };
+}
+
+/** 取 Content / Entity */
+export function useServiceContent(fn: ServiceFn) {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const fnRef = useRef(fn);
+  fnRef.current = fn;
+
+  const run = useCallback(async (params?: any) => {
+    setLoading(true);
+    try {
+      const res = await fnRef.current(params);
+      const content = res?.Content ?? res?.content ?? res;
+      const entity = content?.entity ?? content?.Entity ?? content;
+      setData(entity);
+      return entity;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // no auto
+  }, []);
+
+  return { data, run, loading };
+}

package/src/adapters/http.ts

@@ -0,0 +1,49 @@
+/** HTTP — 替代 @/share_lib/utils/HttpRequest；由宿主注入 baseURL / token */
+let baseURL = '';
+let getHeaders: () => Record<string, string> = () => ({});
+
+export function configureHttp(options: { baseURL?: string; getHeaders?: () => Record<string, string> }) {
+  if (options.baseURL != null) baseURL = options.baseURL.replace(/\/$/, '');
+  if (options.getHeaders) getHeaders = options.getHeaders;
+}
+
+async function request<T = any>(method: string, url: string, data?: any): Promise<T> {
+  const full = url.startsWith('http') ? url : `${baseURL}${url.startsWith('/') ? '' : '/'}${url}`;
+  let res: Response;
+  try {
+    res = await fetch(full, {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+        ...getHeaders(),
+      },
+      body: data != null && method !== 'GET' ? JSON.stringify(data) : undefined,
+    });
+  } catch (e: any) {
+    const raw = e?.message || String(e);
+    throw new Error(
+      raw === 'Failed to fetch'
+        ? `无法连接接口 ${full}。请确认前端 dev（5173 代理）和后端 8088 都在运行`
+        : raw,
+    );
+  }
+  const json = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    throw new Error(json?.Message || json?.message || res.statusText);
+  }
+  return json as T;
+}
+
+export const httpGet = <T = any>(url: string, params?: Record<string, any>) => {
+  let u = url;
+  if (params && Object.keys(params).length) {
+    const q = new URLSearchParams();
+    Object.entries(params).forEach(([k, v]) => {
+      if (v != null) q.set(k, String(v));
+    });
+    u += (u.includes('?') ? '&' : '?') + q.toString();
+  }
+  return request<T>('GET', u);
+};
+
+export const httpPost = <T = any>(url: string, data?: any) => request<T>('POST', url, data);

package/src/adapters/router.tsx

@@ -0,0 +1,23 @@
+/** 替代 umi / react-router useParams — 由 BpmnDesigner 注入 */
+import { createContext, useContext } from 'react';
+
+export type RouteParams = {
+  processId?: string;
+  designMode?: string;
+  appId?: string;
+  projectId?: string;
+};
+
+const RouteCtx = createContext<RouteParams>({});
+
+export const RouteParamsProvider = RouteCtx.Provider;
+
+export function useParams<T extends Record<string, string | undefined> = RouteParams>(): T {
+  return useContext(RouteCtx) as T;
+}
+
+export const history = {
+  push: (url: string) => {
+    if (typeof window !== 'undefined') window.location.href = url;
+  },
+};

package/src/adapters/utils.ts

@@ -0,0 +1,15 @@
+/** Toast / message helpers — 替代 @/share_lib/utils */
+import { message } from 'antd';
+
+export const successMessage = (msg: string) => message.success(msg);
+export const errorMessage = (msg: string) => message.error(msg);
+
+export function getAllQueryString(): Record<string, string> {
+  if (typeof window === 'undefined') return {};
+  const params = new URLSearchParams(window.location.search);
+  const out: Record<string, string> = {};
+  params.forEach((v, k) => {
+    out[k] = v;
+  });
+  return out;
+}

package/src/api/flowDefine.ts

@@ -0,0 +1,30 @@
+import { httpGet, httpPost } from '../adapters/http';
+
+/** 与 lowcode 前端一致的路径前缀；boot 可配 context 或反代 */
+const P = '/web';
+
+async function getEntity(params: any) {
+  return httpGet(`${P}/flowDefine/get/` + params.processId);
+}
+
+async function getList(params: any) {
+  return httpPost(`${P}/flowDefine/getList`, params);
+}
+
+async function add(params: any) {
+  return httpPost(`${P}/flowDefine/add`, params);
+}
+
+async function update(params: any) {
+  return httpPost(`${P}/flowDefine/update`, params);
+}
+
+async function del(params: any) {
+  return httpPost(`${P}/flowDefine/deleteByIds`, params);
+}
+
+async function checkProcessCodeExists(params: any) {
+  return httpGet(`${P}/flowDefine/checkProcessCodeExists`, params);
+}
+
+export default { getEntity, getList, add, update, del, checkProcessCodeExists };

package/src/api/flowDraft.ts

@@ -0,0 +1,13 @@
+import { httpGet, httpPost } from '../adapters/http';
+
+const P = '/web';
+
+export const FlowDraftSaveReq = (params: any) => httpPost(`${P}/flowDraft/save`, params);
+export const FlowDraftGetReq = (params: any) =>
+  httpGet(`${P}/flowDraft/getByProcessId/` + params?.processId);
+export const FlowVersionHistoryAddReq = (params: any) =>
+  httpPost(`${P}/flowVersionHistory/add`, params);
+export const FlowVersionHistoryGetListReq = (params: any) =>
+  httpPost(`${P}/flowVersionHistory/getList`, params);
+export const FlowVersionHistoryRestoreReq = (params: any) =>
+  httpPost(`${P}/flowVersionHistory/restore`, params);

package/src/designer/flow/Edges/ConnectionLine.tsx

@@ -0,0 +1,44 @@
+import type { ConnectionLineComponentProps } from "@xyflow/react";
+import { getSmoothStepPath, Position } from "@xyflow/react";
+
+const ConnectionLine = ({
+  fromX,
+  fromY,
+  toX,
+  toY,
+  fromPosition = Position.Right,
+  toPosition = Position.Left,
+}: ConnectionLineComponentProps) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX: fromX,
+    sourceY: fromY,
+    sourcePosition: fromPosition,
+    targetX: toX,
+    targetY: toY,
+    targetPosition: toPosition,
+    borderRadius: 14,
+    offset: 18,
+  });
+
+  return (
+    <g>
+      <path
+        fill="none"
+        stroke={"#009688"}
+        strokeWidth={2}
+        className="animated"
+        d={edgePath}
+      />
+      <circle
+        cx={toX}
+        cy={toY}
+        fill="#fff"
+        r={2}
+        stroke={"#009688"}
+        strokeWidth={10}
+      />
+    </g>
+  );
+};
+
+export default ConnectionLine;

package/src/designer/flow/Edges/CustomEdge.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import {
+    BaseEdge,
+    getBezierPath,
+    type EdgeProps,
+} from '@xyflow/react';
+import { useMemo } from 'react';
+
+export default function CustomEdge({
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    style = {},
+    selected,
+    markerEnd,
+}: EdgeProps) {
+    const [edgePath] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+
+    // 计算路径长度用于动画
+    const pathLength = useMemo(() => {
+        if (typeof document !== 'undefined') {
+            const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            pathElement.setAttribute('d', edgePath);
+            const length = pathElement.getTotalLength();
+            return length || 1000; // 如果计算失败，使用默认值
+        }
+        return 1000;
+    }, [edgePath]);
+
+    // 使用 #4b7bec 作为默认颜色
+    const strokeColor = "#4b7bec";
+
+    // 获取 strokeWidth 的实际数值，用于计算动画路径的宽度
+    const strokeWidthValue = useMemo(() => {
+        if (typeof document !== 'undefined') {
+            const root = document.documentElement;
+            const computedValue = getComputedStyle(root)
+                .getPropertyValue('--xy-edge-stroke-width-default')
+                .trim();
+            const numValue = parseFloat(computedValue);
+            // 如果无法获取 CSS 变量值，使用默认值 2
+            return isNaN(numValue) ? 1 : numValue;
+        }
+        return 2; // SSR 时的默认值
+    }, []);
+
+    // 虚线参数：8px 实线，4px 空白
+    const dashArray = "8,4";
+    // 电流光点长度约为路径的 20%，让效果更明显
+    const dashLength = pathLength * 0.2;
+
+    // 处理 markerEnd：如果是字符串直接使用，如果是对象则转换为字符串 URL
+    // xyflow 会自动生成 marker，我们只需要使用传递进来的 markerEnd（字符串格式）
+    const markerEndUrl = useMemo(() => {
+        if (!markerEnd) {
+            // 如果没有传递 markerEnd，使用 BaseEdge 的默认行为
+            return undefined;
+        }
+        // markerEnd 应该是字符串 URL（如 "url(#react-flow__arrowclosed-...)"）
+        return typeof markerEnd === 'string' ? markerEnd : undefined;
+    }, [markerEnd]);
+
+    // 合并样式，添加虚线
+    const edgeStyle = {
+        ...style,
+        strokeDasharray: dashArray,
+        opacity: 0.4,
+    };
+
+    return (
+        <>
+            {/* 使用 BaseEdge 渲染基础虚线路径，它会自动处理 xyflow 默认箭头 */}
+            <BaseEdge
+                id={id}
+                path={edgePath}
+                style={edgeStyle}
+                markerEnd={markerEndUrl}
+            />
+            {/* 电流动画路径 - 仅在选中时显示动画效果 */}
+            {selected && (
+                <path
+                    fill="none"
+                    stroke={strokeColor}
+                    strokeWidth={strokeWidthValue * 1.8}
+                    strokeDasharray={`${dashLength},${pathLength + dashLength}`}
+                    d={edgePath}
+                    opacity="1"
+                    markerEnd={markerEndUrl}
+                >   
+                    <animate
+                        attributeName="stroke-dashoffset"
+                        values={`0;-${pathLength + dashLength}`}
+                        dur="2s"
+                        repeatCount="indefinite"
+                    />
+                </path>
+            )}
+        </>
+    );
+}

package/src/designer/flow/Edges/DefaultEdge.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/react';
+import { useMemo } from 'react';
+
+const EDGE_STROKE = '#94a3b8';
+const EDGE_STROKE_SELECTED = '#6366f1';
+const BACK_RAIL_GAP = 28;
+const BACK_RAIL_STEP = 16;
+
+const round = (n: number) => Math.round(n * 10) / 10;
+
+const isBackEdge = (sourceX: number, targetX: number) => sourceX > targetX + 16;
+
+const getBackArcPath = (sx: number, sy: number, tx: number, ty: number, railY: number) => {
+    const x1 = round(sx);
+    const y1 = round(sy);
+    const x2 = round(tx);
+    const y2 = round(ty);
+    const yRail = round(railY);
+    const span = Math.max(80, x1 - x2);
+    const c1x = round(x1 - span * 0.08);
+    const c2x = round(x2 + span * 0.22);
+    return `M ${x1} ${y1} C ${c1x} ${yRail}, ${c2x} ${yRail}, ${x2} ${y2}`;
+};
+
+export default function DefaultEdge({
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    style = {},
+    selected,
+    data,
+}: EdgeProps) {
+    const back = isBackEdge(sourceX, targetX);
+    const lane = back ? (id.charCodeAt(Math.max(0, id.length - 1)) % 4) : 0;
+    const railY = Math.min(sourceY, targetY) - BACK_RAIL_GAP - lane * BACK_RAIL_STEP;
+
+    const edgePath = useMemo(() => {
+        if (back) {
+            return getBackArcPath(sourceX, sourceY, targetX, targetY, railY);
+        }
+        const [path] = getBezierPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+        });
+        return path;
+    }, [back, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, railY]);
+
+    const trailOn = Boolean((data as any)?.trailOn);
+    const stroke = trailOn ? '#22c55e' : selected ? EDGE_STROKE_SELECTED : EDGE_STROKE;
+    const markerId = `bpmn-edge-arrow-${id}-${trailOn ? 'trail' : selected ? 'selected' : 'default'}`;
+
+    return (
+        <>
+            <defs>
+                <marker
+                    id={markerId}
+                    viewBox="0 0 14 14"
+                    markerWidth="12.5"
+                    markerHeight="12.5"
+                    refX="11"
+                    refY="7"
+                    orient="auto"
+                    markerUnits="strokeWidth"
+                >
+                    <path
+                        d="M1.8 2.8 L10.5 7 L1.8 11.2 Q3.4 7 1.8 2.8 Z"
+                        fill={stroke}
+                        stroke={stroke}
+                        strokeWidth="0.6"
+                        strokeLinejoin="round"
+                        strokeLinecap="round"
+                    />
+                </marker>
+            </defs>
+            <BaseEdge
+                id={id}
+                path={edgePath}
+                style={{
+                    ...style,
+                    stroke,
+                    strokeWidth: trailOn || selected ? 2.5 : 2,
+                }}
+                markerEnd={`url(#${markerId})`}
+            />
+        </>
+    );
+}

package/src/designer/flow/Edges/defaultEdgeOptions.ts

@@ -0,0 +1,13 @@
+import { MarkerType } from '@xyflow/react';
+
+export const defaultEdgeOptions = {
+    type: 'default',
+    markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 16,
+        height: 16,
+        color: '#94a3b8',
+    },
+};
+
+export default defaultEdgeOptions;

package/src/designer/flow/Edges/index.tsx

@@ -0,0 +1,5 @@
+import CustomEdge from './CustomEdge';
+import DefaultEdge from './DefaultEdge';
+import ConnectionLine from './ConnectionLine'; 
+
+export default { custom: CustomEdge, default: DefaultEdge, connectionLine: ConnectionLine };