@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/CustomNode/RectNode.tsx

@@ -0,0 +1,200 @@
+import { TableListItem as FlowNodeConfigListItemType } from '@/pages/BaseManagement/InstructionParamConfig/data';
+import { ProcessParamConfigListType } from '@/pages/ProductManagement/Instruction/data';
+import { useMemoizedFn } from '@umijs/max';
+import { Handle, Node, NodeProps, NodeResizer, OnResize, Position, useReactFlow } from '@xyflow/react';
+import { Descriptions, Tooltip } from 'antd/lib';
+import React, { memo, useMemo } from 'react';
+import NodeBadge from '../NodeBadge';
+import './index.less';
+import { FlowProcessNodeDataType } from './types';
+import { getConfigListById, nodeColor } from './utils';
+import classnames from 'classnames';
+
+export type BaseDataType = Node<FlowProcessNodeDataType, 'baseDataType'>;
+
+// 动态行高度
+// const LIST_ITEM_HEIGHT = 22;
+// 容器上下总边距
+// const ITEM_MARGIN = 6;
+
+export const rectNodeDefaultStyle = {
+  width: 140,
+  minHeight: 80,
+  display: 'flex',
+  flexDirection: 'column' as const,
+  alignItems: 'center',
+  borderRadius: 4,
+  fontFamily: 'sans-serif',
+  fontSize: 16,
+};
+
+const RectNode: React.FC<NodeProps<BaseDataType> & { extras?: any }> = memo(
+  ({ id, type, data, isConnectable, selected, extras = {} }) => {
+    // const titleBoxRef = useRef<HTMLDivElement>(null);
+    const { updateNodeData } = useReactFlow();
+    // const [boxSyle, setBoxStyle] = useState<React.CSSProperties>({
+    //   ...rectNodeDefaultStyle,
+    //   border: `2px solid ${data.setting?.themeColor}`,
+    //   ...data.setting?.style,
+    //   // 防止修改时不设置背景
+    //   backgroundColor: 'var(--xy-node-background-color, var(--xy-node-background-color-default))',
+    // });
+
+    /**
+     * 配置的动态字段
+     */
+    const getConfigListByProcessId: ProcessParamConfigListType['params'] = useMemo(() => {
+      return getConfigListById(data.processId, extras?.processParamConfigList);
+    }, [data.processId, extras]);
+
+    const itemRender = (item: ProcessParamConfigListType['params'][number]) => {
+      const text = data.extras?.[item.paramCode] as string;
+
+      return (
+        <Descriptions.Item contentStyle={{ margin: 0 }} key={item.paramId} label={item.paramName}>
+          {item.ellipsis ? (
+            <Tooltip title={text}>
+              <div
+                {...item.attributes}
+                className={classnames('ellipsis', item.attributes?.className)}
+                onClick={(e) => {
+                  item.attributes?.onClick?.(e, item);
+                }}
+              >
+                {text ?? '-'}
+              </div>
+            </Tooltip>
+          ) : (
+            <div
+              {...item.attributes}
+              onClick={(e) => {
+                item.attributes?.onClick?.(e, item);
+              }}
+            >
+              {text ?? '-'}
+            </div>
+          )}
+        </Descriptions.Item>
+      );
+    };
+
+    // 改变图形大小
+    const handleResize: OnResize = useMemoizedFn((event, params) => {
+      updateNodeData(id, {
+        setting: {
+          ...data.setting,
+          style: {
+            ...(data.setting?.style || {}),
+            width: params.width,
+            height: params.height,
+          },
+        },
+      });
+    });
+
+    // 初始化节点高度，根据设置修改边框颜色
+    // useEffect(() => {
+    //   const element = titleBoxRef.current;
+    //   // 初始高度 = 头部名称高度 + 配置列高度 + 上下总边距
+    //   setBoxStyle((item) => ({
+    //     ...item,
+    //     border: `2px solid ${data.setting?.themeColor}`,
+    //     height: (element?.offsetHeight || 30) + getConfigListByProcessId.length * LIST_ITEM_HEIGHT + ITEM_MARGIN,
+    //     ...(data.setting?.style || {}),
+    //     backgroundColor: 'var(--xy-node-background-color, var(--xy-node-background-color-default))',
+    //   }));
+    // }, [getConfigListByProcessId, data.setting]);
+
+    return (
+      <div className="customNode">
+        <NodeBadge isStart={data.isStart} isEnd={data.isEnd}>
+          <NodeResizer
+            color={data.setting?.themeColor ?? nodeColor(type)}
+            isVisible={selected}
+            onResize={handleResize}
+            minWidth={100}
+            minHeight={30}
+          />
+          {!data.isStart && (
+            <div className={`handles targets ${data.setting?.targetPosition}`}>
+              {data.setting?.targetHandles ? (
+                data.setting?.targetHandles.map((handle) => (
+                  <Handle
+                    key={handle.id}
+                    id={handle.id}
+                    type="target"
+                    position={data.setting?.targetPosition || Position.Left}
+                    isConnectable={isConnectable}
+                  />
+                ))
+              ) : (
+                <Handle
+                  id="target_1"
+                  type="target"
+                  position={data.setting?.targetPosition || Position.Left}
+                  isConnectable={isConnectable}
+                />
+              )}
+            </div>
+          )}
+          <div
+            className="nodeContent"
+            style={{
+              ...rectNodeDefaultStyle,
+              border: `2px solid ${data.setting?.themeColor}`,
+              ...data.setting?.style,
+              // 防止修改时不设置背景
+              backgroundColor: 'var(--xy-node-background-color, var(--xy-node-background-color-default))',
+            }}
+          >
+            <div
+              // ref={titleBoxRef}
+              className="react-flow-custom-theme__color react-flow-custom__name"
+              style={{
+                display: 'grid',
+                placeItems: 'center',
+                flexGrow: 2,
+                width: '100%',
+                minHeight: 30,
+                borderBottom: `1px solid ${data.setting?.themeColor}`,
+                backgroundColor: `${data.setting?.themeColor}33`,
+              }}
+            >
+              {data.name}
+            </div>
+            <div className="react-flow-custom-theme__color react-flow-custom__label" style={{ margin: 3, flexGrow: 3 }}>
+              <Descriptions column={1} size="small">
+                {getConfigListByProcessId.map(itemRender)}
+              </Descriptions>
+            </div>
+            {extras?.footerRender?.(data)}
+          </div>
+          {!data.isEnd && (
+            <div className={`handles sources ${data.setting?.sourcePosition}`}>
+              {data.setting?.sourceHandles ? (
+                data.setting?.sourceHandles.map((handle) => (
+                  <Handle
+                    key={handle.id}
+                    id={handle.id}
+                    type="source"
+                    position={data.setting?.sourcePosition || Position.Right}
+                    isConnectable={isConnectable}
+                  />
+                ))
+              ) : (
+                <Handle
+                  id="source_1"
+                  type="source"
+                  position={data.setting?.sourcePosition || Position.Right}
+                  isConnectable={isConnectable}
+                />
+              )}
+            </div>
+          )}
+        </NodeBadge>
+      </div>
+    );
+  },
+);
+
+export default React.memo(RectNode);

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/CustomNode/TextNode.tsx

@@ -0,0 +1,50 @@
+import React, { memo, useEffect, useState } from "react";
+import {
+  NodeProps,
+  Node,
+} from "@xyflow/react";
+import { BaseNodeDataType } from "./types";
+
+export type BaseDataType = Node<BaseNodeDataType, "baseDataType">;
+
+export const textNodeDefaultStyle = {
+  minWidth: 30,
+  display: "flex",
+  flexDirection: "column" as const,
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "0px 4px",
+  borderRadius: 4,
+}
+
+const LABEL_FONT_SIZE = 14
+
+const TextNode: React.FC<NodeProps<BaseDataType>> = memo(
+  ({ id, type, data, selected }) => {
+    
+    return (
+      <div
+        style={{
+          ...textNodeDefaultStyle,
+          border: `2px dashed ${data?.setting?.style?.borderColor ?? '#aaa'}`,
+          ...data?.setting?.style,
+        }}
+      >
+        <div
+          className="react-flow-custom__label"
+          style={{
+            display: "flex",
+            flexGrow: 3,
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: LABEL_FONT_SIZE,
+          }}
+        >
+          {data.label}
+        </div>
+      </div>
+    );
+  }
+);
+
+export default React.memo(TextNode);

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/CustomNode/createNodeWithExtras.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+/**
+ * 用于扩展节点组件参数
+ * @param Component 节点组件
+ * @param extras 额外的参数
+ */
+const createNodeWithExtras = (Component: React.ComponentType<any>, extras: any) => {
+  return (props: any) => React.createElement(Component, { ...props, extras });
+};
+
+export default createNodeWithExtras;

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/CustomNode/index.less

@@ -0,0 +1,50 @@
+.customNode {
+  .handles {
+    position: absolute;
+    display: flex;
+    justify-content: space-around;
+
+    &.left,&.right {
+      flex-direction: column;
+    }
+
+    // 锚点位置
+    &.left {
+      left: 0;
+      top: 0;
+      height: 100%;
+      transform: translateX(-50%);
+    }
+    &.top {
+      left: 0;
+      top: 0;
+      width: 100%;
+      transform: translateY(-50%);
+    }
+    &.right {
+      right: 0;
+      top: 0;
+      height: 100%;
+      transform: translateX(50%);
+    }
+    &.bottom {
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      transform: translateY(50%);
+    }
+  }
+  
+  // 配置锚点数量需要，勿删，除非不需要配置锚点数量
+  .handles .react-flow__handle {
+    position: relative;
+    top: 0;
+    left: 0;
+    transform: none;
+  }
+
+  .react-flow-custom__label .ant-descriptions .ant-descriptions-row >td:last-child {
+    padding-block-end: 0px;
+  }
+}
+

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/CustomNode/types.d.ts

@@ -0,0 +1,47 @@
+import { Position, type Node } from '@xyflow/react';
+
+type HandleType = {
+  id: string;
+  position?: Position;
+};
+
+export type NodeDataSetting = {
+  themeColor?: string;
+  labelStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
+  sourceHandles: HandleType[];
+  targetHandles: HandleType[];
+  sourcePosition?: Position;
+  targetPosition?: Position;
+};
+
+export type BaseNodeDataType = {
+  label?: string;
+  isStart?: boolean;
+  isEnd?: boolean;
+  name?: string;
+  setting: NodeDataSetting;
+};
+
+export type BaseEdgeDataType = {
+  label?: string;
+  style?: React.CSSProperties;
+};
+
+export interface FlowProcessNodeDataType extends Node['data'], BaseNodeDataType {
+  productId: string;
+  /** 工序ID */
+  processId: string;
+  /** 工艺工序ID */
+  instructionProcessId?: string;
+  name?: string;
+  label?: string;
+  isStart?: boolean;
+  isEnd?: boolean;
+  extras?: {
+    [key: string]: unknown;
+  };
+  [key: string]: unknown;
+}
+
+export type FlowProcessNodeType = Node<FlowProcessNodeDataType>;

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/CustomNode/utils.ts

@@ -0,0 +1,67 @@
+import { DragEnum } from '@/constants/DnDContext';
+import { TableListItem as FlowNodeConfigListItemType } from '@/pages/BaseManagement/InstructionParamConfig/data';
+import { ProcessParamConfigListType } from '@/pages/ProductManagement/Instruction/data';
+import { type Node } from '@xyflow/react';
+
+export const nodeColor = (data: Node | Node['type']) => {
+  const type = typeof data === 'object' ? data.type : data;
+  switch (type) {
+    case DragEnum.BENDING_NODE:
+      return '#FF6347';
+    case DragEnum.LASER_NODE:
+      return '#6495ED';
+    case DragEnum.STAMPING_NODE:
+      return '#3CB371';
+    case DragEnum.NCT_NODE:
+      return '#954615';
+    case DragEnum.RIVET_NODE:
+      return '#aaa';
+    case DragEnum.GROUP_NODE:
+      return 'rgba(153,26,152,0.1)';
+    default:
+      return '#6495ED';
+  }
+};
+
+/**
+ * 列表排序，序号有值的放前面，没有的放后面
+ * @param list 列表
+ * @param sortKey 排序字段
+ * @returns 排序后的列表
+ */
+export const listSort = <T>(list?: T[], sortKey: keyof T = 'sortNo' as any) => {
+  if (!list?.length) return [];
+  
+  return list.sort((a, b) => {
+    const aValue = a[sortKey];
+    const bValue = b[sortKey];
+    
+    // 处理 null/undefined 值：没有值的放在后面
+    if (aValue == null && bValue == null) return 0;
+    if (aValue == null) return 1;
+    if (bValue == null) return -1;
+    
+    // 都有值时按数值排序
+    return (aValue as number) - (bValue as number);
+  });
+};
+
+/**
+ * 配置的动态字段
+ */
+export const getConfigListById = (
+  id?: number | string,
+  paramConfigList?: ProcessParamConfigListType[],
+  onlyShowImportant: boolean = true,
+) => {
+  if (!id) return [];
+  const item: ProcessParamConfigListType | undefined = paramConfigList?.find((item: ProcessParamConfigListType) => {
+    return item.processId === id;
+  });
+
+  if (!onlyShowImportant) {
+    return listSort(item?.params);
+  }
+
+  return listSort(item?.params?.filter((item) => item.important));
+};

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/FlowControl/data.d.ts

@@ -0,0 +1,18 @@
+import { type Node, type Edge } from "@xyflow/react";
+
+export type FlowControlViewKey = 'zoomIn' | 'zoomOut' | 'zoomReset' | 'translateRest' | 'showMiniMap' | 'download' | 'viewAll';
+export type FlowControlEditKey = 'undo' | 'redo' | 'settings' | 'reset' | 'clear' | 'save' | 'import' | 'export';
+export type FlowControlAllKey = FlowControlViewKey | FlowControlEditKey;
+
+export interface ItemsProps {
+  key: FlowControlViewKey | FlowControlEditKey;
+  label: React.ReactNode;
+  icon: JSX.Element;
+  onClick: () => void;
+  [key: string]: any;
+}
+
+export interface FlowDataType<T = any, K = any> {
+  nodes: Node<T>[];
+  edges: Edge<K>[];
+}

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/FlowControl/index.less

@@ -0,0 +1,17 @@
+.container {
+  .item {
+    cursor: pointer;
+    &:hover {
+      color: #1890ff;
+    }
+    & > :first-child {
+      margin-right: 3px;
+    }
+  }
+}
+
+.upload {
+  :global(.ant-upload-list) {
+    display: none;
+  }
+}