@cloudbase/weda-ui 3.4.9-alpha.1024 → 3.4.10

package/dist/web/components/chart/common/data-transform.js

@@ -1,5 +1,7 @@
 import { debug } from '../../../utils/console';
 import { ChartError } from './chart-error';
+import lodashSet from 'lodash.set';
+import { isNil } from '../../../utils/lodash';
 export const checkIsNewData = (props) => {
     var _a, _b;
     return (Object.keys((_a = props.dataSource) !== null && _a !== void 0 ? _a : {}).length === 0 &&
@@ -55,12 +57,17 @@ export function transform(chartType, dataInput, chartInput) {
         }
         return true;
     });
-    const unitFormatter = (value) => {
+    const formatter = ({ value, percent }) => {
         let val = Number(value);
+        let result = '';
         if (chartInput.isUnit) {
             val = val / chartInput.unit;
         }
-        return `${val.toFixed(chartInput.decimalDigits)}${chartInput.suffix}`;
+        result = `${val.toFixed(chartInput.decimalDigits)}${chartInput.suffix}`;
+        if (chartInput.isPercent && !isNil(percent)) {
+            result = `${result}(${percent}%)`;
+        }
+        return result;
     };
     const series = [];
     const groups = [];
@@ -105,8 +112,8 @@ export function transform(chartType, dataInput, chartInput) {
                             ]
                             : [eachYaxis.Value],
                     };
-                    if (chartInput.isUnit) {
-                        series[idx].label.formatter = (params) => unitFormatter(params.value);
+                    if (chartInput.isUnit || chartInput.isPercent) {
+                        series[idx].label.formatter = formatter;
                     }
                 }
                 else {
@@ -121,10 +128,7 @@ export function transform(chartType, dataInput, chartInput) {
                     }
                 }
                 if (chartType === 'pie') {
-                    // series[idx].label.position = 'inner';
-                    series[idx].label['normal'] = {
-                        position: 'inner',
-                    };
+                    lodashSet(series[idx], 'label.position', 'inner');
                     if (chartInput.chartType === 'pie') {
                         series[idx]['radius'] = '70%';
                     }
@@ -221,7 +225,7 @@ export function transform(chartType, dataInput, chartInput) {
             return (_a = item.XLabel.Value) !== null && _a !== void 0 ? _a : null;
         });
         if (chartInput.isUnit) {
-            yAxis.axisLabel.formatter = unitFormatter;
+            yAxis.axisLabel.formatter = (value) => formatter({ value });
         }
         if (chartInput.directionType === 'crosswise') {
             return {

package/dist/web/components/chart/line/index.old.js

@@ -4,7 +4,7 @@ import EChartLine from '../common/core/eChartLine';
 import classNames from '../../../utils/classnames';
 import { useWedaChart } from '../common/useChart';
 export default function Line(opts) {
-    const { id, style, className, chartType, isTitle, title, titleLocation, dataSource, filterData, xField, xStatistics, xIsCountEmpty, yField, groupKey, groupKeyTimeSpan, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, } = opts;
+    const { id, style, className, chartType, isTitle, title, titleLocation, dataSource, setColor, filterData, xField, xStatistics, xIsCountEmpty, yField, groupKey, groupKeyTimeSpan, isLegend, legend, legend2, isXaxisName, xAxisName, isXaxisAxisLabelShow, isXaxisAxisTickShow, isXaxisAxisLabelRotate, isYAxisSplitlineLinestyleWidth, yAxisSplitlineLinestyleType, yAxisMax, yAxisMin, isYAxisName, yAxisName, isSeriesShowSymbol, isYAxisShow, isUnit, unit, decimalDigits, suffix, } = opts;
     const domRef = useRef();
     useWedaChart(domRef, EChartLine, {
         chartType,
@@ -12,6 +12,7 @@ export default function Line(opts) {
         title,
         titleLocation,
         dataSource,
+        setColor,
         filterData,
         xField,
         xStatistics,

package/dist/web/components/flow/common/request.js

@@ -5,15 +5,15 @@ import { isInIde } from './utils';
  * @description 基于callWedaApi 封装，主要是处理出入参大小写，以及预览数据
  */
 export async function flowRequest(params, config) {
-    const { previewData, upperCaseData = true, upperCaseIgnoreKeys, } = config || {};
+    const { previewData, upperCaseData = true, upperCaseIgnoreKeys, lowerCaseResult = true, } = config || {};
     if (isInIde()) {
-        return toTransKeyCase(previewData || {}, 'toLowerCase');
+        return toTransKeyCase(previewData || {}, lowerCaseResult ? 'toLowerCase' : 'toUpperCase');
     }
     const result = await callWedaApi({
         ...params,
         data: toTransKeyCase(params.data, upperCaseData ? 'toUpperCase' : 'toLowerCase', upperCaseIgnoreKeys),
     });
-    return toTransKeyCase(result, 'toLowerCase');
+    return toTransKeyCase(result, lowerCaseResult ? 'toLowerCase' : 'toUpperCase');
 }
 /** 转换具体参数的首字母大小写 */
 function toTransKeyCase(target, method, ignoreKeyValues) {

package/dist/web/components/flow/modules/chart/index.js

@@ -1,10 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RenderProcess } from './Chart';
-import { useFlowConfig, WedaFlowContainer, } from '../../common';
+import { useEffect, useState } from 'react';
+import { message } from 'tea-component';
+import { useFlowConfig, WedaFlowContainer, flowRequest, } from '../../common';
+import FlowGraph from '../../../flow-graph';
+import { processCanvasInfoPreviewData } from './preview-data';
 export default function ModelFlowChart(props) {
     const flowConfig = useFlowConfig({
         moduleName: 'flow-chart',
         wedaPlatformProps: props,
     });
-    return (_jsx(WedaFlowContainer, { wedaPlatformProps: props, ref: flowConfig.elementRef, children: _jsx(RenderProcess, { ...flowConfig, wedaPlatformProps: props }) }));
+    return (_jsx(WedaFlowContainer, { wedaPlatformProps: props, ref: flowConfig.elementRef, children: _jsx(FlowChart, { ...flowConfig, wedaPlatformProps: props }) }));
 }
+const FlowChart = (props) => {
+    const { processInstance } = props;
+    const [canvasInfo, setCanvasInfo] = useState({
+        Nodes: [],
+        Edges: [],
+    });
+    useEffect(() => {
+        (async () => {
+            if (processInstance.instanceId) {
+                const result = await getProcessCanvasInfo({
+                    flowCode: processInstance.flowCode,
+                    instanceId: processInstance.instanceId,
+                    appVersion: processInstance.flowVersion,
+                });
+                setCanvasInfo(result);
+            }
+        })();
+    }, [processInstance]);
+    /**
+     * 获取流程实例运行图
+     */
+    async function getProcessCanvasInfo(data) {
+        try {
+            const result = await flowRequest({
+                data,
+                action: 'GetProcessCanvasInfo',
+            }, { lowerCaseResult: false, previewData: processCanvasInfoPreviewData });
+            return result;
+        }
+        catch (error) {
+            message.error({ content: '获取流程实例运行数据失败' });
+            return {};
+        }
+    }
+    return _jsx(FlowGraph, { processCanvasInfo: canvasInfo });
+};

package/dist/web/components/flow/modules/chart/preview-data.js

@@ -0,0 +1,88 @@
+export const processCanvasInfoPreviewData = {
+    Nodes: [
+        {
+            visited: true,
+            Id: 2,
+            ElementId: 'approvalNode1656317642548',
+            Name: '经理审批',
+            DataType: 17,
+            Status: 1,
+            Conf: [
+                {
+                    Name: '张三',
+                    Status: 2,
+                    OpTime: 1656502417000,
+                    Comment: '',
+                    AttachmentInfo: '[]',
+                    NewProcessors: 'true',
+                },
+            ],
+        },
+        {
+            visited: true,
+            Id: 3,
+            ElementId: 'approvalNode1656317679079',
+            Name: '总监审批',
+            DataType: 17,
+            Status: 3,
+            Conf: [
+                { Name: '王五', Status: 0, OpTime: 0 },
+                { Name: '李四', Status: 0, OpTime: 0 },
+            ],
+        },
+        {
+            visited: true,
+            Id: 4,
+            ElementId: 'approvalNode1656317682440',
+            Name: '人事审批',
+            DataType: 17,
+            Status: 2,
+        },
+        {
+            visited: true,
+            Id: 1,
+            ElementId: 'startNode',
+            Name: '开始',
+            DataType: 1,
+            Status: 1,
+        },
+        {
+            visited: true,
+            Id: 5,
+            ElementId: 'endNode',
+            Name: '结束',
+            DataType: 13,
+            Status: 2,
+        },
+    ],
+    Edges: [
+        {
+            Label: '同意',
+            Type: 2,
+            Source: 'approvalNode1656317679079',
+            Target: 'approvalNode1656317682440',
+            Status: 2,
+        },
+        {
+            Label: '同意c',
+            Type: 2,
+            Source: 'approvalNode1656317682440',
+            Target: 'endNode',
+            Status: 2,
+        },
+        {
+            Label: '同意',
+            Type: 2,
+            Source: 'approvalNode1656317642548',
+            Target: 'approvalNode1656317679079',
+            Status: 2,
+        },
+        {
+            Label: '',
+            Type: 2,
+            Source: 'startNode',
+            Target: 'approvalNode1656317642548',
+            Status: 2,
+        },
+    ],
+};

package/dist/web/components/flow-graph/constants.js

@@ -0,0 +1,28 @@
+export const STATUS_COLOR_MAP = {
+    1: {
+        bgColor: 'rgba(10,191,91,0.10)',
+        lineColor: '#0ABF5B',
+    },
+    2: {
+        bgColor: 'rgba(153,153,153,0.10)',
+        lineColor: '#999999',
+    },
+    3: {
+        bgColor: 'rgba(0,110,255,0.20)',
+        lineColor: '#2473F2',
+    },
+};
+export const APPROVE_MAP = {
+    0: { txt: '待审批', color: '#F88000' },
+    1: { txt: '提交', color: '#09BF5B' },
+    2: { txt: '同意', color: '#09BF5B' },
+    3: { txt: '拒绝', color: '#E02020' },
+    4: { txt: '转办', color: '#333333' },
+    5: { txt: '撤销', color: '#333333' },
+    6: { txt: '回退', color: '#333333' },
+    7: { txt: '加签', color: '#333333' },
+    8: { txt: '终止', color: '#333333' },
+    9: { txt: '跳过', color: '#333333' },
+    10: { txt: '待处理', color: '#F88000' },
+    13: { txt: '已处理', color: '#09BF5B' },
+};

package/dist/web/components/flow-graph/graph.js

@@ -0,0 +1,267 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import G6 from '@antv/g6';
+import { Status, Modal, Button, ConfigProvider } from 'tea-component';
+import moment from 'moment';
+import { getUuid } from '../../utils/tool';
+import { STATUS_COLOR_MAP, APPROVE_MAP } from './constants';
+import './style.css';
+/** 流程图组件 */
+export const FlowGraph = (props) => {
+    const { processCanvasInfo, ...restProps } = props;
+    const containerIdRef = useRef(getUuid());
+    // 节点审批详情弹窗显示状态
+    const [modalVisible, setModalVisible] = useState(false);
+    // 节点审批详情弹窗显示数据
+    const [modalData, setModalData] = useState({
+        nodeName: '',
+        confData: null,
+    });
+    useEffect(() => {
+        var _a;
+        if (((_a = processCanvasInfo === null || processCanvasInfo === void 0 ? void 0 : processCanvasInfo.Nodes) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            renderGraph({
+                data: processCanvasInfo,
+                containerIdRef,
+                setModalData,
+                onOpenModal,
+            });
+        }
+    }, [processCanvasInfo]);
+    const onOpenModal = () => setModalVisible(true);
+    const onCloseModal = () => setModalVisible(false);
+    // antv注册节点
+    registerNode();
+    return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx("div", { ...restProps, children: _jsxs("div", { id: containerIdRef.current, children: [renderStatus(!processCanvasInfo), renderTooltipContentModal({
+                        modalData,
+                        visible: modalVisible,
+                        onClose: onCloseModal,
+                    })] }) }) }));
+};
+// 渲染当前状态
+const renderStatus = (isEmpty) => {
+    if (isEmpty) {
+        return _jsx(Status, { icon: "blank", size: "l", title: "\u6682\u65E0\u6D41\u8F6C\u8282\u70B9" });
+    }
+    return null;
+};
+// 渲染图示内容
+const renderGraph = (config) => {
+    const { data, containerIdRef, onOpenModal, setModalData } = config;
+    const container = document.getElementById(containerIdRef.current);
+    if (!container)
+        return;
+    const width = container.scrollWidth;
+    const height = document.documentElement.clientHeight;
+    const tooltip = new G6.Tooltip({
+        offsetX: 60,
+        offsetY: -20,
+        trigger: 'click',
+        itemTypes: ['node'],
+        getContent: (e) => {
+            return renderTooltipContent(e, onOpenModal, setModalData);
+        },
+    });
+    const graphData = getGraphData(data);
+    const graph = new G6.Graph({
+        container: containerIdRef.current,
+        width,
+        height: height - 300,
+        fitView: true,
+        fitViewPadding: [20, 40, 50, 20],
+        layout: {
+            type: 'dagre',
+            ranksep: 30,
+            controlPoints: true,
+        },
+        defaultNode: {
+            type: 'sql',
+        },
+        plugins: [tooltip],
+        defaultEdge: {
+            type: 'polyline',
+            style: {
+                endArrow: true,
+                lineWidth: 2,
+                stroke: '#C2C8D5',
+            },
+        },
+        nodeStateStyles: {
+            selected: {
+                stroke: '#000',
+                fill: '#5394ef',
+            },
+        },
+        modes: {
+            default: ['drag-canvas', 'zoom-canvas'],
+        },
+    });
+    graph.data(graphData);
+    graph.render();
+    if (typeof window !== 'undefined') {
+        window.onresize = () => {
+            if (!graph || graph.get('destroyed'))
+                return;
+            if (!container || !container.scrollWidth || !container.scrollHeight)
+                return;
+            graph.changeSize(container.scrollWidth, container.scrollHeight);
+        };
+    }
+};
+// 渲染提示内容
+const renderTooltipContent = (e, onOpenModal, setModalData) => {
+    var _a;
+    const outDiv = document.createElement('div');
+    outDiv.style.width = 'auto';
+    const modelData = e.item.getModel();
+    const dataSource = modelData === null || modelData === void 0 ? void 0 : modelData.dataSource;
+    let vDomContent = null;
+    if ((_a = dataSource === null || dataSource === void 0 ? void 0 : dataSource.Conf) === null || _a === void 0 ? void 0 : _a.length) {
+        const contentHtml = dataSource === null || dataSource === void 0 ? void 0 : dataSource.Conf.map((info, index) => {
+            // 区分处理节点和审批节点的 待审批/待处理 文案
+            if (modelData.dataType === 23 && info.Status === 0) {
+                info.Status = 10;
+            }
+            return (_jsxs("li", { className: "weda-flow-graph-info-item", onClick: () => {
+                    onOpenModal();
+                    setModalData({
+                        nodeName: dataSource === null || dataSource === void 0 ? void 0 : dataSource.Name,
+                        confData: info,
+                    });
+                }, children: [_jsxs("div", { className: "first-line", children: [_jsx("i", { className: info.Status ? 'tootip-will_do' : '' }), _jsx("span", { className: "tootip-name", children: info.Name }), _jsx("span", { style: {
+                                    color: APPROVE_MAP[info.Status ? info.Status : 0].color,
+                                    paddingLeft: '8px',
+                                }, children: APPROVE_MAP[info.Status ? info.Status : 0].txt })] }), info.Status && info.OpTime ? (_jsx("p", { className: "tooltip-time", children: moment(info.OpTime).format('YYYY-MM-DD HH:mm:ss') })) : null] }, `conf-${index}`));
+        });
+        vDomContent = (_jsxs("div", { className: "weda-flow-graph-info", children: [_jsx("h4", { children: "\u8282\u70B9\u5BA1\u6279\u4FE1\u606F" }), _jsx("ul", { className: "weda-flow-graph-info-content", children: contentHtml })] }));
+    }
+    else {
+        vDomContent = _jsx("p", { children: "\u6682\u65E0\u4FE1\u606F" });
+    }
+    ReactDOM.render(vDomContent, outDiv);
+    return outDiv;
+};
+// 渲染提示内容弹窗
+const renderTooltipContentModal = (config) => {
+    var _a, _b;
+    const { visible, onClose, modalData: { nodeName, confData }, } = config;
+    const showData = [
+        {
+            label: '审批节点',
+            content: nodeName,
+        },
+        {
+            label: '审批人',
+            content: confData === null || confData === void 0 ? void 0 : confData.Name,
+        },
+        {
+            label: '审批操作',
+            content: (_jsx("span", { style: {
+                    color: (_a = APPROVE_MAP === null || APPROVE_MAP === void 0 ? void 0 : APPROVE_MAP[confData === null || confData === void 0 ? void 0 : confData.Status]) === null || _a === void 0 ? void 0 : _a.color,
+                }, children: (_b = APPROVE_MAP === null || APPROVE_MAP === void 0 ? void 0 : APPROVE_MAP[confData === null || confData === void 0 ? void 0 : confData.Status]) === null || _b === void 0 ? void 0 : _b.txt })),
+        },
+        {
+            label: '操作时间',
+            content: (confData === null || confData === void 0 ? void 0 : confData.OpTime)
+                ? moment(confData === null || confData === void 0 ? void 0 : confData.OpTime).format('YYYY-MM-DD HH:mm:ss')
+                : undefined,
+        },
+        {
+            label: '审批意见',
+            content: confData === null || confData === void 0 ? void 0 : confData.Comment,
+        },
+        {
+            label: '操作详情',
+            content: confData === null || confData === void 0 ? void 0 : confData.NewProcessors,
+        },
+    ];
+    if (!visible)
+        return null;
+    return (_jsxs(Modal, { visible: true, caption: '审批详情', onClose: onClose, className: "weda-flow-graph-info-modal", destroyOnClose: true, children: [_jsx(Modal.Body, { children: _jsx("div", { className: "weda-flow-graph-info-modal_content", children: showData
+                        .filter(({ content }) => content)
+                        .map(({ label, content }, index) => (_jsxs("div", { children: [_jsx("span", { className: "weda-flow-graph-info-modal_content-label", children: label }), _jsx("span", { className: "weda-flow-graph-info-modal_content-content", children: content })] }, index))) }) }), _jsx(Modal.Footer, { children: _jsx(Button, { type: "weak", onClick: onClose, children: "\u5173\u95ED" }) })] }));
+};
+// 获取图示数据
+const getGraphData = (data) => {
+    var _a;
+    const graphNodes = data.Nodes.map((node) => {
+        const { ElementId, Status } = node;
+        const graphNode = {
+            style: {
+                lineWidth: 3,
+                stroke: STATUS_COLOR_MAP[node.Status].lineColor,
+                fill: STATUS_COLOR_MAP[node.Status].bgColor,
+            },
+            id: `${node.ElementId}`,
+            label: node.Name,
+            labelCfg: {
+                style: {
+                    fontSize: 14,
+                    fill: '#00287E',
+                    fontWeight: 'bold',
+                },
+            },
+            dataSource: node,
+        };
+        if ((ElementId === null || ElementId === void 0 ? void 0 : ElementId.startsWith('startNode')) || (ElementId === null || ElementId === void 0 ? void 0 : ElementId.startsWith('end'))) {
+            graphNode.type = 'circle';
+            graphNode.size = 80;
+            if (Status === 3) {
+                graphNode.style.lineDash = [5];
+            }
+        }
+        if (ElementId.startsWith('exclusiveGateway')) {
+            graphNode.type = 'diamond';
+            graphNode.size = [160, 80];
+            graphNode.anchorPoints = [
+                [0.5, 0],
+                [0, 0.5],
+                [0.5, 1],
+                [1, 0.5],
+            ];
+        }
+        return graphNode;
+    });
+    const graphEdges = (_a = data.Edges) === null || _a === void 0 ? void 0 : _a.map((edge) => {
+        const graphEdge = {
+            source: edge.Source,
+            target: edge.Target,
+            label: edge.Label,
+        };
+        if (edge.Status === 1) {
+            graphEdge.style = {
+                stroke: '#0ABF5B',
+            };
+        }
+        return graphEdge;
+    });
+    return {
+        nodes: graphNodes,
+        edges: graphEdges,
+    };
+};
+// 注册节点
+const registerNode = () => {
+    G6.registerNode('sql', {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        drawShape(cfg, group) {
+            var _a, _b;
+            const rect = group.addShape('rect', {
+                attrs: {
+                    x: -75,
+                    y: -25,
+                    width: 150,
+                    height: 50,
+                    radius: 10,
+                    stroke: (_a = STATUS_COLOR_MAP === null || STATUS_COLOR_MAP === void 0 ? void 0 : STATUS_COLOR_MAP[cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Status]) === null || _a === void 0 ? void 0 : _a.lineColor,
+                    fill: (_b = STATUS_COLOR_MAP === null || STATUS_COLOR_MAP === void 0 ? void 0 : STATUS_COLOR_MAP[cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Status]) === null || _b === void 0 ? void 0 : _b.bgColor,
+                    lineWidth: 3,
+                    lineDash: (cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Status) === 3 ? [5] : undefined,
+                },
+                name: cfg === null || cfg === void 0 ? void 0 : cfg.dataSource.Name,
+            });
+            return rect;
+        },
+    }, 'single-node');
+};

package/dist/web/components/flow-graph/index.js

@@ -0,0 +1,2 @@
+import { FlowGraph } from './graph';
+export default FlowGraph;

package/dist/web/components/flow-graph/style.css

@@ -0,0 +1,109 @@
+.weda-flow-graph-info {
+  padding: 2px 4px;
+}
+.weda-flow-graph-info h4 {
+  margin-bottom: 4px;
+  font-size: 14px;
+  border-bottom: 1px solid #eee;
+  color: #000;
+}
+.weda-flow-graph-info .weda-flow-graph-info-content {
+  max-height: 160px;
+  overflow: auto;
+}
+.weda-flow-graph-info .weda-flow-graph-info-content .weda-flow-graph-info-item {
+  padding: 8px 0;
+  border-bottom: 1px solid #e5e8ed;
+  cursor: pointer;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line {
+  height: 20px;
+  display: flex;
+  justify-content: flex-start nowrap;
+  align-items: center;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  i {
+  width: 16px;
+  height: 16px;
+  position: relative;
+  border-radius: 50%;
+  background: rgba(36, 115, 242, 0.15);
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  i.tooltip-will_do {
+  background: rgba(162, 172, 189, 0.15);
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  i.tooltip-will_do:after {
+  background: #a2acbd;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  i:after {
+  content: '';
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 8px;
+  height: 8px;
+  background-color: var(--co-common-main-color);
+  border-radius: 50%;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .first-line
+  .tootip-name {
+  padding-left: 8px;
+}
+.weda-flow-graph-info
+  .weda-flow-graph-info-content
+  .weda-flow-graph-info-item
+  .tooltip-time {
+  padding-left: 24px;
+  color: #999;
+  font-size: 12px;
+  height: 18px;
+  line-height: 18px;
+}
+.weda-flow-graph-info-modal_content > div {
+  display: flex;
+  margin-bottom: 8px;
+}
+.weda-flow-graph-info-modal_content
+  > div
+  .weda-flow-graph-info-modal_content-label {
+  min-width: 60px;
+  margin-right: 28px;
+  color: #999;
+}
+.weda-flow-graph-info-modal_content
+  > div
+  .weda-flow-graph-info-modal_content-content {
+  color: #333;
+}
+.weda-flow-graph-info-modal_content
+  > div
+  .weda-flow-graph-info-modal_content_link
+  > button {
+  display: block;
+}
+.weda-flow-graph-info-modal .tea-dialog__body {
+  max-height: 200px;
+  overflow: auto;
+}

package/dist/web/components/flow-graph/types.js

@@ -0,0 +1 @@
+export {};

package/dist/web/components/form/select/dropdown-select/index.css

@@ -146,6 +146,10 @@
   position: relative;
 }
 
+.form-select-pc .wedatea2td-dropdown__value {
+  white-space: normal;
+}
+
 .form-select-pc .pc-clear {
   position: absolute;
   right: 22px;

package/dist/web/components/form/select/dropdown-select/index.js

@@ -96,7 +96,10 @@ export function PureSelect({ params, selectedValue, updateValue, placeholder, si
                 }
             }
             else {
-                setOptions((opt) => opt.concat(value.option));
+                setOptions((oldOptions) => {
+                    const newOptions = value.option.filter((item) => oldOptions.findIndex((i) => i.value === item.value) < 0);
+                    return oldOptions.concat(newOptions);
+                });
                 if (pageNo === 1 && value.option.length === 0) {
                     setStatus(Status.EMPTY);
                 }