@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

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

@@ -0,0 +1,350 @@
+import {
+  ClearOutlined,
+  CloudDownloadOutlined,
+  ExpandOutlined,
+  MinusOutlined,
+  ReloadOutlined,
+  SearchOutlined,
+  ShrinkOutlined,
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { ReactFlowJsonObject, useReactFlow } from '@xyflow/react';
+import { Button, Dropdown, Radio } from 'antd';
+import React, { memo, useMemo } from 'react';
+import { FlowControlAllKey, FlowControlEditKey, FlowControlViewKey, ItemsProps } from './data';
+import styles from './index.less';
+
+export const flowControlViewKeys: FlowControlViewKey[] = [
+  'zoomIn',
+  'zoomOut',
+  'zoomReset',
+  'translateRest',
+  'showMiniMap',
+  'download',
+  'viewAll',
+];
+export const flowControlEditKeys: FlowControlEditKey[] = [
+  'undo',
+  'redo',
+  'settings',
+  'reset',
+  'clear',
+  'save',
+  'import',
+  'export',
+];
+
+type IProps = {
+  disabledAll?: boolean;
+  readonly?: boolean;
+  showKeys?: FlowControlAllKey[];
+  handleSettingsOpenChange?: (open: boolean) => void;
+  onSave?: (data: ReactFlowJsonObject) => void;
+  onReset?: () => void;
+  onClear?: () => void;
+  onExport?: (data: ReactFlowJsonObject) => void;
+  onImport?: (data: ReactFlowJsonObject) => void;
+  onDownload?: (blob: Blob) => void;
+};
+
+const Control: React.FC<IProps> = (props) => {
+  const { formatMessage } = useIntl();
+
+  const {
+    readonly,
+    showKeys,
+    disabledAll,
+    handleSettingsOpenChange,
+    onSave,
+    onReset,
+    onClear,
+    onExport,
+    onImport,
+    onDownload,
+  } = props;
+
+  const { setNodes, setEdges, getZoom, zoomIn, zoomOut, zoomTo, setViewport, fitView, toObject } = useReactFlow();
+
+  const handleImport = (data: string) => {
+    const jsonData: ReactFlowJsonObject = JSON.parse(data);
+    if (onImport) {
+      onImport?.(jsonData);
+    } else {
+      // 将导入的数据渲染到画布上
+      setEdges(jsonData.edges);
+      setNodes(jsonData.nodes);
+      setViewport(jsonData.viewport);
+    }
+  };
+
+  const defautlItems: ItemsProps[] = [
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.zoomIn',
+        defaultMessage: '放大',
+      }),
+      key: 'zoomIn',
+      icon: <SearchOutlined />,
+      onClick: () => {
+        zoomIn();
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.zoomOut',
+        defaultMessage: '缩小',
+      }),
+      key: 'zoomOut',
+      icon: <MinusOutlined />,
+      onClick: () => {
+        zoomOut();
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.zoomReset',
+        defaultMessage: '大小适应',
+      }),
+      key: 'zoomReset',
+      icon: <ShrinkOutlined />,
+      onClick: () => {
+        zoomTo(1);
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.translateRest',
+        defaultMessage: '定位还原',
+      }),
+      key: 'translateRest',
+      icon: <ReloadOutlined />,
+      onClick: () => {
+        setViewport({ x: 0, y: 0, zoom: getZoom() });
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    // {
+    //   label: "查看缩略图",
+    //   key: "showMiniMap",
+    //   icon: <PictureOutlined />,
+    //   onClick: () => {
+    // const { miniMap } = lf.extension;
+    // // @ts-ignore
+    // if (miniMap.isShow) {
+    //   // @ts-ignore
+    //   miniMap.hide?.();
+    // } else {
+    //   // @ts-ignore
+    //   miniMap.show?.(lf.graphModel.width - 150, 40);
+    // }
+    //   },
+    //   props: {
+    //     disabled: disabledAll,
+    //   },
+    // },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.viewAll',
+        defaultMessage: '显示全部内容',
+      }),
+      key: 'viewAll',
+      icon: <ExpandOutlined />,
+      onClick: () => {
+        fitView();
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    // 需要借助插件，详细请看文档 https://reactflow.dev/examples/misc/download-image
+    // {
+    //   label: "下载图片",
+    //   key: "download",
+    //   icon: <DownloadOutlined />,
+    //   onClick: async () => {
+    //     // const { data: blob } = await lf.getSnapshotBlob();
+    //     // if (onDownload) {
+    //     //   onDownload(blob);
+    //     // } else {
+    //     //   downloadImgWithWatermark('临时名称', blob, { text: currentUser.userCode });
+    //     // }
+    //   },
+    //   props: {
+    //     disabled: disabledAll,
+    //   },
+    // },
+  ];
+
+  const editItems: ItemsProps[] = [
+    // 该功能需要专业版
+    // {
+    //   label: "上一步",
+    //   key: "undo",
+    //   icon: <ArrowLeftOutlined />,
+    //   props: {
+    //     disabled: undoDisable || disabledAll,
+    //   },
+    //   onClick: () => {
+    //     // lf.undo();
+    //   },
+    // },
+    // {
+    //   label: "下一步",
+    //   key: "redo",
+    //   icon: <ArrowRightOutlined />,
+    //   props: {
+    //     disabled: redoDisable || disabledAll,
+    //   },
+    //   onClick: () => {
+    //     // lf.redo();
+    //   },
+    // },
+    // {
+    //   label: formatMessage({
+    //     id: 'lib.Flow.control.settings',
+    //     defaultMessage: '设置',
+    //   }),
+    //   key: 'settings',
+    //   icon: <SettingOutlined />,
+    //   onClick: () => {
+    //     handleSettingsOpenChange?.(true);
+    //   },
+    //   props: {
+    //     disabled: disabledAll,
+    //   },
+    // },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.reset',
+        defaultMessage: '重置',
+      }),
+      key: 'reset',
+      icon: <ReloadOutlined />,
+      onClick: () => {
+        // lf.clearData();
+        // lf.resetTranslate();
+        // lf.resetZoom();
+        // lf.history.undos = [];
+        // lf.history.redos = [];
+        onReset?.();
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    // {
+    //   label: formatMessage({
+    //     id: 'lib.Flow.control.save',
+    //     defaultMessage: '保存',
+    //   }),
+    //   key: 'save',
+    //   icon: <SaveOutlined />,
+    //   onClick: () => {
+    //     const flow = toObject();
+    //     onSave?.(flow);
+    //   },
+    //   props: {
+    //     disabled: disabledAll,
+    //   },
+    // },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.clear',
+        defaultMessage: '清空',
+      }),
+      key: 'clear',
+      icon: <ClearOutlined />,
+      onClick: () => {
+        onClear?.();
+        setNodes([]);
+        setEdges([]);
+        setViewport({ x: 0, y: 0, zoom: 0.8 });
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+    // {
+    //   label: (
+    //     <ImportDataUpload accept=".txt,.json" onImport={handleImport}>
+    //       {formatMessage({ id: 'lib.Flow.control.import', defaultMessage: '导入' })}
+    //     </ImportDataUpload>
+    //   ),
+    //   key: 'import',
+    //   icon: <UploadOutlined />,
+    //   onClick: () => {},
+    //   props: {
+    //     disabled: disabledAll,
+    //   },
+    // },
+    {
+      label: formatMessage({
+        id: 'lib.Flow.control.export',
+        defaultMessage: '导出',
+      }),
+      key: 'export',
+      icon: <CloudDownloadOutlined />,
+      onClick: () => {
+        const { edges, nodes, viewport } = toObject();
+        onExport?.({ edges, nodes, viewport });
+      },
+      props: {
+        disabled: disabledAll,
+      },
+    },
+  ];
+
+  // 过滤没有权限的按钮
+  const items: ItemsProps[] = useMemo(() => {
+    const allItems = [...defautlItems, ...editItems];
+    if (showKeys) {
+      return allItems.filter((item) => showKeys.includes(item.key));
+    }
+    return readonly ? [...defautlItems] : allItems;
+  }, [disabledAll, readonly]);
+
+  const radioItems = useMemo(() => {
+    return items.filter((item) => [...flowControlViewKeys, 'undo', 'redo'].includes(item.key));
+  }, [items]);
+
+  const dropdownItems = useMemo(() => {
+    const newItems = items.filter((item) => flowControlEditKeys.slice(2).includes(item.key as any));
+    return newItems;
+  }, [items]);
+
+  return (
+    <div className={styles.container}>
+      <Radio.Group value={'small'}>
+        {radioItems.map((item) => (
+          <Radio.Button key={item.key} onClick={item.onClick} {...item.props}>
+            <span style={{ marginRight: 3 }}>{item.icon}</span>
+            <span>{item.label}</span>
+          </Radio.Button>
+        ))}
+      </Radio.Group>
+      {dropdownItems.length ? (
+        <Dropdown menu={{ items: dropdownItems }} arrow disabled={disabledAll}>
+          <Button>
+            {formatMessage({
+              id: 'lib.Flow.control.option',
+              defaultMessage: '操作',
+            })}
+          </Button>
+        </Dropdown>
+      ) : null}
+    </div>
+  );
+};
+
+export default memo(Control);

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

@@ -0,0 +1,39 @@
+import { useIntl } from "@umijs/max";
+import { Badge } from "antd";
+import React from "react";
+
+interface NodeBadgeProps {
+  isStart?: boolean;
+  isEnd?: boolean;
+  label?: string | React.ReactNode;
+  color?: string;
+  children: React.ReactNode;
+}
+
+const NodeBadge: React.FC<NodeBadgeProps> = (props) => {
+  const { isStart, isEnd, label, color, children } = props;
+  const { formatMessage } = useIntl();
+
+  const countMap = {
+    start: {
+      label: formatMessage({ id: 'lib.Flow.status.start', defaultMessage: '开始' }),
+      color: "#0099ff",
+    },
+    end: {
+      label: formatMessage({ id: 'lib.Flow.status.end', defaultMessage: '结束' }),
+      color: "#52c41a",
+    },
+  };
+
+  if(!isStart && !isEnd) return children;
+
+  const typeData = isStart ? countMap.start : countMap.end;
+
+  return (
+    <Badge count={label ?? typeData?.label} color={color ?? typeData?.color} offset={[-8, 0]}>
+      {children}
+    </Badge>
+  );
+};
+
+export default React.memo(NodeBadge);

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

@@ -0,0 +1,21 @@
+.update-node__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+ 
+.update-node__controls label {
+  display: block;
+}
+ 
+.update-node__bg-label {
+  margin-top: 10px;
+}
+ 
+.update-node__checkbox-wrapper {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,87 @@
+import { BaseEdgeDataType } from '@/components/Flow/CustomNode/types';
+import { DrawerForm, DrawerFormProps } from '@ant-design/pro-components';
+import { MyColorPicker, useIntl } from '@umijs/max';
+import { useReactFlow, type Edge } from '@xyflow/react';
+import { Form, Input } from 'antd';
+import React, { useCallback, useEffect } from 'react';
+import './index.less';
+
+interface IProps extends DrawerFormProps {
+  edge: Edge<BaseEdgeDataType> | null;
+  onSubmitAfter?: (values: any) => void;
+}
+
+const UpdateEdgeDrawer = (props: IProps) => {
+  const { edge, onSubmitAfter, ...reset } = props;
+
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const { updateEdge } = useReactFlow();
+
+  useEffect(() => {
+    if (edge) {
+      form.setFieldsValue({
+        label: edge.label,
+        stroke: edge.style?.stroke,
+      });
+    } else {
+      form.resetFields();
+    }
+  }, [edge]);
+
+  // 提交表单
+  const handleSubmit = useCallback(() => {
+    if (!edge) return Promise.resolve(true);
+
+    const values = form.getFieldsValue();
+    // 更新节点
+    updateEdge(edge.id, {
+      ...edge,
+      label: values.label,
+      style: {
+        ...edge.style,
+        stroke: values.stroke,
+      },
+      markerEnd: {
+        // @ts-ignore
+        ...(edge?.markerEnd || {}),
+        color: values.stroke || '#b1b1b7',
+      },
+    });
+
+    reset.onOpenChange?.(false);
+    onSubmitAfter?.(values);
+
+    return Promise.resolve(true);
+  }, [form, edge]);
+
+  if (!edge) return <></>;
+
+  return (
+    <DrawerForm
+      form={form}
+      title={formatMessage({ id: 'lib.Flow.modal.edge.update.title', defaultMessage: '修改边外观配置' })}
+      open={!!edge}
+      width={500}
+      {...reset}
+      onFinish={handleSubmit}
+      drawerProps={{ maskClosable: false, closable: false }}
+    >
+      <Form.Item label={formatMessage({ id: 'lib.Flow.modal.text.title', defaultMessage: '文案' })} name="label">
+        <Input />
+      </Form.Item>
+      {/* <Form.Item label="颜色" name="color">
+          <MyColorPicker
+            onChange={(value) =>
+              form.setFieldValue("color", value?.toHexString())
+            }
+          />
+        </Form.Item> */}
+      <Form.Item label={formatMessage({ id: 'lib.Flow.modal.edge.stroke', defaultMessage: '边颜色' })} name="stroke">
+        <MyColorPicker onChange={(value) => form.setFieldValue('stroke', value?.toHexString())} />
+      </Form.Item>
+    </DrawerForm>
+  );
+};
+
+export default React.memo(UpdateEdgeDrawer);

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

@@ -0,0 +1,21 @@
+.update-node__controls {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 4;
+  font-size: 12px;
+}
+ 
+.update-node__controls label {
+  display: block;
+}
+ 
+.update-node__bg-label {
+  margin-top: 10px;
+}
+ 
+.update-node__checkbox-wrapper {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}