adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): workflow ui upgrade

Browse Source
This commit is contained in:
zhaoying
2026-03-07 14:55:04 +08:00
parent 06fe3f2f01
commit 6d53d9178c
48 changed files with 1702 additions and 1335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
web/src/views/Workflow/components/CanvasToolbar.tsx
View File

@@ -2,7 +2,6 @@ import type { FC } from 'react';
import { Select } from 'antd';
// import { Node } from '@antv/x6';
import type { GraphRef } from '../types'
import { PlusOutlined, MinusOutlined } from '@ant-design/icons'
interface CanvasToolbarProps {
miniMapRef: React.RefObject<HTMLDivElement>;
@@ -10,150 +9,20 @@ interface CanvasToolbarProps {
isHandMode: boolean;
setIsHandMode: React.Dispatch<React.SetStateAction<boolean>>;
zoomLevel: number;
canUndo: boolean;
canRedo: boolean;
onUndo: () => void;
onRedo: () => void;
}
const CanvasToolbar: FC<CanvasToolbarProps> = ({
miniMapRef,
graphRef,
// isHandMode,
// setIsHandMode,
zoomLevel,
// canUndo,
// canRedo,
// onUndo,
// onRedo,
}) => {
// 整理布局函数
/*
const handleLayout = () => {
if (!graphRef.current) return;
const nodes = graphRef.current.getNodes();
const edges = graphRef.current.getEdges();
// 如果没有连线，使用垂直布局避免节点重叠
if (edges.length === 0) {
nodes.forEach((node, index) => {
const nodeData = node.getData();
const isSpecialNode = nodeData?.isGroup || nodeData?.type === 'if-else';
const nodeHeight = isSpecialNode ? 220 : 50;
const xPosition = 100;
const yPosition = index * (nodeHeight + 100) + 100;
node.setPosition(xPosition, yPosition);
});
return;
}
// 简单的树布局算法
const nodeMap = new Map<string, Node>();
const children = new Map<string, string[]>();
const roots: string[] = [];
// 初始化节点映射
nodes.forEach(node => {
nodeMap.set(node.id, node);
children.set(node.id, []);
});
// 构建父子关系
edges.forEach(edge => {
const sourceId = edge.getSourceCellId();
const targetId = edge.getTargetCellId();
if (sourceId && targetId) {
children.get(sourceId)?.push(targetId);
}
});
// 找到根节点
const hasParent = new Set<string>();
edges.forEach(edge => {
const targetId = edge.getTargetCellId();
if (targetId) hasParent.add(targetId);
});
nodes.forEach(node => {
if (!hasParent.has(node.id)) {
roots.push(node.id);
}
});
// 布局参数
const levelWidths: number[] = [];
const baseNodeSpacing = 120;
let currentY = 100;
// 计算每层的最大宽度
const calculateLevelWidths = (nodeId: string, level: number) => {
const node = nodeMap.get(nodeId);
if (!node) return;
const nodeData = node.getData();
const isSpecialNode = nodeData?.isGroup || nodeData?.type === 'if-else';
const nodeWidth = isSpecialNode ? 400 : 160;
const gap = isSpecialNode ? 150 : 100;
levelWidths[level] = Math.max(levelWidths[level] || 0, nodeWidth + gap);
const childIds = children.get(nodeId) || [];
childIds.forEach((childId: string) => calculateLevelWidths(childId, level + 1));
};
roots.forEach(rootId => calculateLevelWidths(rootId, 0));
// 递归布局函数
const layoutNode = (nodeId: string, level: number, parentY: number): number => {
const node = nodeMap.get(nodeId);
if (!node) return parentY;
const nodeData = node.getData();
const isSpecialNode = nodeData?.isGroup || nodeData?.type === 'if-else';
const nodeHeight = isSpecialNode ? 220 : 50;
const verticalGap = isSpecialNode ? 80 : 40;
const spacing = baseNodeSpacing + nodeHeight + verticalGap;
const xPosition = levelWidths.slice(0, level).reduce((sum, width) => sum + width, 100);
const childIds = children.get(nodeId) || [];
if (childIds.length === 0) {
// 叶子节点
node.setPosition(xPosition, currentY);
currentY += spacing;
return currentY - spacing;
} else {
// 非叶子节点，先布局子节点
const childPositions: number[] = [];
childIds.forEach((childId: string) => {
const childY = layoutNode(childId, level + 1, currentY);
childPositions.push(childY);
});
// 父节点居中，确保有足够间隙
const minY = Math.min(...childPositions);
const maxY = Math.max(...childPositions);
const centerY = (minY + maxY) / 2;
node.setPosition(xPosition, centerY);
return centerY;
}
};
// 布局所有根节点
roots.forEach(rootId => {
layoutNode(rootId, 0, currentY);
currentY += 300; // 不同树之间的间距
});
};
*/
return (
<>
{/* 小地图 */}
<div ref={miniMapRef} className="rb:absolute rb:bottom-15 rb:right-8 rb:z-1000 rb:rounded-lg rb:overflow-hidden"></div>
{/* 缩放控制按钮 */}
<div className="rb:h-8.5 rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.15)] rb:px-3 rb:py-2 rb:absolute rb:bottom-5 rb:right-8 rb:flex rb:flex-row rb:gap-4 rb:z-1000">
<MinusOutlined className="rb:text-[16px] rb:cursor-pointer" onClick={() => graphRef.current?.zoom(-0.1)} />
<div className="rb:h-8.5 rb:bg-[#FFFFFF] rb-border rb:rounded-lg rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.15)] rb:px-3 rb:py-2.25 rb:absolute rb:bottom-5 rb:right-8 rb:flex rb:flex-row rb:gap-2 rb:z-1000">
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/workflow/minus.png')]" onClick={() => graphRef.current?.zoom(-0.1)}></div>
<Select
value={Math.round(zoomLevel * 100)}
onChange={(value: number | string) => {
@@ -181,7 +50,7 @@ const CanvasToolbar: FC<CanvasToolbarProps> = ({
variant='borderless'
size="small"
/>
<PlusOutlined className="rb:text-[16px] rb:cursor-pointer" onClick={() => graphRef.current?.zoom(0.1)} />
<div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/workflow/plus.png')]" onClick={() => graphRef.current?.zoom(0.1)}></div>
</div>
</>
);