pengjunjie/ragflow
1
0
Fork 1
mirror of https://github.com/infiniflow/ragflow.git synced 2025-12-08 20:42:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Modify the style of the canvas operator node #3221 (#8261)

Browse Source 
### What problem does this PR solve?

Feat: Modify the style of the canvas operator node #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-06-16 09:29:08 +08:00
committed by GitHub
parent f7074037ef
commit 0bde5397d0
12 changed files with 270 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
web/src/pages/agent/canvas/node/node-header.tsx
View File

@ -1,20 +1,7 @@
import { useTranslate } from '@/hooks/common-hooks';
import { Flex } from 'antd';
import { Copy, Play, Trash2 } from 'lucide-react';
import { Operator, operatorMap } from '../../constant';
import { cn } from '@/lib/utils';
import { memo } from 'react';
import { Operator } from '../../constant';
import OperatorIcon from '../../operator-icon';
import { needsSingleStepDebugging } from '../../utils';
import NodeDropdown from './dropdown';
import { NextNodePopover } from './popover';
import {
TooltipContent,
TooltipNode,
TooltipTrigger,
} from '@/components/xyflow/tooltip-node';
import { Position } from '@xyflow/react';
import { PropsWithChildren, memo } from 'react';
import { RunTooltip } from '../../flow-tooltip';
interface IProps {
id: string;
label: string;
@ -24,55 +11,20 @@ interface IProps {
wrapperClassName?: string;
}
const ExcludedRunStateOperators = [Operator.Answer];
export function RunStatus({ id, name, label }: IProps) {
const { t } = useTranslate('flow');
return (
<section className="flex justify-end items-center pb-1 gap-2 text-blue-600">
{needsSingleStepDebugging(label) && (
<RunTooltip>
<Play className="size-3 cursor-pointer" data-play />
</RunTooltip> // data-play is used to trigger single step debugging
)}
<NextNodePopover nodeId={id} name={name}>
<span className="cursor-pointer text-[10px]">
{t('operationResults')}
</span>
</NextNodePopover>
</section>
);
}
const InnerNodeHeader = ({
label,
id,
name,
gap = 4,
className,
wrapperClassName,
}: IProps) => {
return (
<section className={wrapperClassName}>
{!ExcludedRunStateOperators.includes(label as Operator) && (
<RunStatus id={id} name={name} label={label}></RunStatus>
)}
<Flex
flex={1}
align="center"
justify={'space-between'}
gap={gap}
className={className}
>
<OperatorIcon
name={label as Operator}
color={operatorMap[label as Operator]?.color}
></OperatorIcon>
<section className={cn(wrapperClassName, 'pb-4')}>
<div className={cn(className, 'flex gap-2.5')}>
<OperatorIcon name={label as Operator}></OperatorIcon>
<span className="truncate text-center font-semibold text-sm">
{name}
</span>
<NodeDropdown id={id} label={label}></NodeDropdown>
</Flex>
</div>
</section>
);
};
@ -80,37 +32,3 @@ const InnerNodeHeader = ({
const NodeHeader = memo(InnerNodeHeader);
export default NodeHeader;
function IconWrapper({ children }: PropsWithChildren) {
return (
<div className="p-1.5 bg-text-title rounded-sm cursor-pointer">
{children}
</div>
);
}
type ToolBarProps = {
selected?: boolean | undefined;
} & PropsWithChildren;
export function ToolBar({ selected, children }: ToolBarProps) {
return (
<TooltipNode selected={selected}>
<TooltipTrigger>{children}</TooltipTrigger>
<TooltipContent position={Position.Top}>
<section className="flex gap-2 items-center">
<IconWrapper>
<Play className="size-3.5" />
</IconWrapper>
<IconWrapper>
<Copy className="size-3.5" />
</IconWrapper>
<IconWrapper>
<Trash2 className="size-3.5" />
</IconWrapper>
</section>
</TooltipContent>
</TooltipNode>
);
}