@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/components/DicDropDownList/index.tsx

@@ -0,0 +1,81 @@
+import { Select, } from 'antd';
+import React, { useState, useEffect } from 'react';
+
+import { queryDictionary } from '@/services';
+import { useIntl } from '@umijs/max';
+
+const { Option } = Select;
+
+export interface DicListItem {
+  dicCode: string;
+  dicId: string;
+  dicName: string;
+  dicType: string;
+  dicValue: string;
+}
+
+export interface DicDataItem {
+  dicType: string;
+  list: DicListItem[]
+}
+
+export interface DicDropDownListProps {
+  value?: string;
+  disabled?: boolean;
+  onChange?: any;
+  dicTypes?: string[] | string;
+  localListData?: DicListItem[];
+  showCode?: boolean;
+}
+
+const DicDropDownList: React.FC<DicDropDownListProps> = props => {
+  const {
+    value,
+    disabled,
+    onChange,
+    dicTypes,
+    localListData,
+    showCode
+  } = props;
+
+  const intl = useIntl()
+  const [dicData, setDicData] = useState<DicListItem[]>([]);
+
+  useEffect(() => {
+    if(localListData && Array.isArray(localListData)) {
+      setDicData(localListData)
+      return;
+    }
+    if(dicTypes) {
+      (async () => {
+        const { rows } = await queryDictionary({ dicType: dicTypes });
+        if (rows && rows.length > 0) {
+          setDicData(rows)
+        }
+      })();
+    }
+  }, [localListData]);
+
+  return (
+    <Select
+      disabled={disabled}
+      placeholder={intl.formatMessage({id: 'common.select.placeholder', defaultMessage: '请选择'})}
+      onChange={onChange}
+      allowClear
+      value={value}
+    >
+      {
+        dicData.map(item => {
+          return <Option
+            key={item.dicId}
+            value={item.dicCode}
+          >
+            {showCode ? `${item.dicName}(${item.dicCode})` : item.dicName}
+          </Option>
+        })
+      }
+    </Select>
+  );
+};
+
+export default React.memo(DicDropDownList);

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

@@ -0,0 +1,19 @@
+.context-menu {
+  background: white;
+  border-style: solid;
+  box-shadow: 10px 19px 20px rgba(0, 0, 0, 10%);
+  position: absolute;
+  z-index: 10;
+}
+ 
+.context-menu button {
+  border: none;
+  display: block;
+  padding: 0.5em;
+  text-align: left;
+  width: 100%;
+}
+ 
+.context-menu button:hover {
+  background: skyblue;
+}

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/ContextMenu/index.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Card, Dropdown, MenuProps } from "antd";
+import "./index.less";
+
+export interface ContextMenuProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  id: string;
+  top: React.CSSProperties["top"] | false;
+  left: React.CSSProperties["left"] | false;
+  right: React.CSSProperties["right"] | false;
+  bottom: React.CSSProperties["bottom"] | false;
+  items: MenuProps["items"];
+}
+
+/**
+ * 右键菜单
+ * @param props id, React.HTMLAttributes<HTMLDivElement>
+ * @returns
+ */
+const ContextMenu: React.FC<ContextMenuProps> = (props) => {
+  const { id, items, top, left, right, bottom, ...reset } = props;
+
+  return (
+    <Card
+      className="context-menu"
+      {...reset}
+      style={{
+        top: top || undefined,
+        left: left || undefined,
+        right: right || undefined,
+        bottom: bottom || undefined,
+        padding: 0,
+        ...reset.style,
+      }}
+      styles={{
+        body: {
+          padding: 4,
+        },
+      }}
+    >
+      <Dropdown
+        menu={{ items }}
+        open={true}
+        trigger={["contextMenu"]}
+      ></Dropdown>
+    </Card>
+  );
+};
+
+export default React.memo(ContextMenu);

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

@@ -0,0 +1,32 @@
+.nodePanel {
+  width: 80px;
+  padding: 20px 10px;
+  background-color: white;
+  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
+  border-radius: 6px;
+  text-align: center;
+  display: flex;
+  // justify-content: center;
+  // flex-wrap: wrap;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .node {
+    margin-bottom: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+
+  :global(.custom-polygon-node) .nodeLabel{
+    margin-top: 10px;
+  }
+  
+  .nodeLabel {
+    font-size: 12px;
+    margin-top: 5px;
+  }
+}

package/lib/templates/qiankun/cf-workbench-function/src/components/Flow/CustomDndPanel/index.tsx

@@ -0,0 +1,121 @@
+import { DragEnum, useDnD } from '@/constants';
+import { useIntl } from '@umijs/max';
+import { type Node } from '@xyflow/react';
+import React from 'react';
+import styles from './index.less';
+import classnames from 'classnames';
+
+export interface PanelListType<NodeData = any> {
+  type: DragEnum | 'selection';
+  name: string;
+  label?: string;
+  text?: string;
+  url?: string;
+  icon?: React.ReactNode;
+  style?: React.CSSProperties;
+  data?: Node['data'] & NodeData;
+  callback?: any;
+  panelType?: 'node' | 'other';
+}
+
+interface IProps<NodeData> {
+  style?: React.CSSProperties;
+  panelList: PanelListType<NodeData>[];
+}
+
+const isDraggable = (item: PanelListType) => item.type !== 'selection';
+
+/**
+ * 节点拖拽面板
+ * @param props panelList
+ * @returns
+ */
+const CustomDndPanel = <NodeData extends Record<string, unknown> = Record<string, unknown>>(
+  props: IProps<NodeData>,
+) => {
+  const { style, panelList = [] } = props;
+  const [_, setNode] = useDnD();
+  const { formatMessage } = useIntl();
+  
+  // 开始拖动
+  const onDragStart = (event: React.DragEvent<HTMLDivElement>, node: PanelListType) => {
+    setNode(node);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  // 获取图形
+  const getIcon = (item: PanelListType) => {
+    // 图片图形
+    if (item.url) {
+      return (
+        <img
+          style={{ ...item.style }}
+          src={item.url}
+          draggable={isDraggable(item)}
+          onDragStart={(event) => onDragStart(event, item)}
+        />
+      );
+    }
+    // 图标
+    if (item.icon) {
+      return (
+        <div style={{ ...item.style }} draggable={isDraggable(item)} onDragStart={(event) => onDragStart(event, item)}>
+          {item.icon}
+        </div>
+      );
+    }
+    // 样式图形
+    return (
+      <div
+        style={{ ...item.style }}
+        draggable={isDraggable(item)}
+        onDragStart={(event) => onDragStart(event, item)}
+      ></div>
+    );
+  };
+
+  return (
+    <div className={classnames(styles.nodePanel, 'noUserSelect')} style={style}>
+      <div>
+        <div style={{ marginBlockEnd: 16, backgroundColor: '#ccc' }}>
+          {formatMessage({ id: 'pages.Instruction.process.column.process.list', defaultMessage: '工序列表' })}
+        </div>
+        <div>
+          {panelList
+            .filter((node) => node.panelType !== 'other')
+            .map((item, key) => {
+              return (
+                <React.Fragment key={key}>
+                  <div className={`${styles.node} ${item.type}`} key={key} onClick={() => item.callback?.()}>
+                    <div className={styles.nodeIcon}>{getIcon(item)}</div>
+                    <div className={styles.nodeLabel}>{item.name}</div>
+                  </div>
+                </React.Fragment>
+              );
+            })}
+        </div>
+      </div>
+      <div>
+        <div style={{ marginBlockStart: 16, marginBlockEnd: 16, backgroundColor: '#ccc' }}>
+          {formatMessage({ id: 'pages.Instruction.process.helpTools', defaultMessage: '辅助工具' })}
+        </div>
+        <div>
+          {panelList
+            .filter((node) => node.panelType === 'other')
+            .map((item, key) => {
+              return (
+                <React.Fragment key={key}>
+                  <div className={`${styles.node} ${item.type}`} key={key} onClick={() => item.callback?.()}>
+                    <div className={styles.nodeIcon}>{getIcon(item)}</div>
+                    <div className={styles.nodeLabel}>{item.name}</div>
+                  </div>
+                </React.Fragment>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(CustomDndPanel);

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ConnectionLineComponentProps } from '@xyflow/react';
+ 
+/**
+ * 连线时的自定义线
+ * @param props 
+ * @returns 
+ */
+const ConnectionLint = (props: ConnectionLineComponentProps<any>) => {
+  const { fromX, fromY, toX, toY, fromNode } = props
+  
+  return (
+    <g>
+      <path
+        fill="none"
+        stroke={fromNode.data?.connectLineColor || '#b1b1b7'}
+        strokeWidth={1.5}
+        className="animated"
+        d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
+      />
+      <circle
+        cx={toX}
+        cy={toY}
+        fill="#fff"
+        r={3}
+        stroke={fromNode.data?.connectLineColor || '#b1b1b7'}
+        strokeWidth={1.5}
+      />
+    </g>
+  );
+};
+
+export default React.memo(ConnectionLint)

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

@@ -0,0 +1,54 @@
+import {
+  BezierEdge,
+  EdgeLabelRenderer,
+  EdgeProps,
+  getBezierPath,
+  type Edge,
+} from "@xyflow/react";
+import React from "react";
+import { BaseEdgeDataType } from "./types";
+
+export type BaseDataType = Edge<BaseEdgeDataType, "baseDataType">;
+
+function CustomBezierEdge(props: EdgeProps<BaseDataType>) {
+  const { label, data = {} as BaseDataType, ...reset } = props;
+  const [labelX, labelY] = getBezierPath({
+    sourceX: reset.sourceX,
+    sourceY: reset.sourceY,
+    targetX: reset.targetX,
+    targetY: reset.targetY,
+  });
+
+  return (
+    <>
+      <BezierEdge
+        {...reset}
+        style={{
+          strokeWidth: 2,
+          ...(props.style || {}),
+          stroke:
+            props.style?.stroke ??
+            "var(--xy-edge-stroke, var(--xy-edge-stroke-default))",
+        }}
+      />
+      <EdgeLabelRenderer>
+        <div
+          style={{
+            position: "absolute",
+            fontSize: 10,
+            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+            pointerEvents: "all",
+            color:
+              "var(--xy-edge-label-color, var(--xy-edge-label-color-default))",
+            backgroundColor:
+              "var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))",
+          }}
+        >
+          {label}
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+}
+
+export default React.memo(CustomBezierEdge);

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

@@ -0,0 +1,162 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from "react";
+import {
+  Handle,
+  NodeProps,
+  NodeResizer,
+  OnResize,
+  Position,
+  useReactFlow,
+  type Node,
+} from "@xyflow/react";
+import { nodeColor } from "./utils";
+import { BaseNodeDataType } from "./types";
+import { DragEnum } from "@/constants";
+import { Input } from "antd";
+
+export type BaseDataType = Node<BaseNodeDataType, "baseDataType">;
+
+export const groupNodeDefaultStyle = {
+  width: 200,
+  height: 250,
+  borderRadius: 8,
+  display: "flex",
+  justifyContent: "center",
+};
+
+const GroupNode: React.FC<NodeProps<BaseDataType>> = memo((props) => {
+  const { id, type, data, isConnectable, selected } = props;
+
+  const { setNodes, updateNodeData } = useReactFlow();
+  const labelRef = useRef<HTMLDivElement>(null);
+  const [isEditLabel, setIsEditLabel] = useState(false);
+  const [label, setLabel] = useState(data.label);
+
+  // 改变图形大小
+  const handleResize: OnResize = useCallback((event, params) => {
+    setNodes((nds) =>
+      nds.map((node) => {
+        if (node.id === id) {
+          return {
+            ...node,
+            data: {
+              ...node.data,
+              style: {
+                ...(node.data.style || {}),
+                width: params.width,
+                height: params.height,
+              },
+            },
+          };
+        }
+
+        return node;
+      })
+    );
+  }, []);
+
+  const labelChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLabel(e.target.value)
+  };
+
+  // 失去焦点显示div
+  const labelInputBlur = () => {
+    updateNodeData(id, { label });
+    setIsEditLabel(false);
+  };
+
+  const dblclick = (e: MouseEvent) => {
+    e.stopPropagation();
+    setIsEditLabel(true);
+  };
+
+  // 双击label显示输入框
+  useEffect(() => {
+    if (labelRef.current) {
+      labelRef.current.addEventListener("dblclick", dblclick);
+    }
+    return () => {
+      labelRef.current?.removeEventListener("dblclick", dblclick);
+    };
+  }, [labelRef.current]);
+
+  return (
+    <div className="customNode">
+      <NodeResizer
+        color={data.setting?.themeColor ?? nodeColor(type)}
+        isVisible={selected}
+        onResize={handleResize}
+        minWidth={100}
+        minHeight={30}
+      />
+      <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
+        ref={labelRef}
+        className="nodeContent"
+        style={{
+          ...groupNodeDefaultStyle,
+          border: `2px solid ${nodeColor(DragEnum.GROUP_NODE)}`,
+          ...data.setting.style,
+          // 连线会在节点的后面，所以需要透明度  官网示例：https://reactflow.dev/examples/nodes/dynamic-grouping
+          backgroundColor: nodeColor(DragEnum.GROUP_NODE),
+        }}
+      >
+        {isEditLabel ? (
+          <Input
+            style={{ height: 40 }}
+            autoFocus
+            value={label}
+            onChange={labelChange}
+            onBlur={labelInputBlur}
+          />
+        ) : (
+          <div>{data.label}</div>
+        )}
+      </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>
+      )}
+    </div>
+  );
+});
+
+export default React.memo(GroupNode);