Feat: Modify the default style of the agent node anchor #9869 (#10489)

### What problem does this PR solve?

Feat: Modify the default style of the agent node anchor #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-10-11 18:45:38 +08:00
committed by GitHub
parent 7d2f65671f
commit 6a0f448419
24 changed files with 77 additions and 195 deletions

View File

@ -21,7 +21,6 @@ import '@xyflow/react/dist/style.css';
import { NotebookPen } from 'lucide-react';
import { memo, useCallback, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { AgentBackground } from '../components/background';
import { AgentInstanceContext, HandleContext } from '../context';
import FormSheet from '../form-sheet/next';
@ -31,6 +30,8 @@ import { useBeforeDelete } from '../hooks/use-before-delete';
import { useMoveNote } from '../hooks/use-move-note';
import { useDropdownManager } from './context';
import { AgentBackground } from '@/components/canvas/background';
import Spotlight from '@/components/spotlight';
import { useRunDataflow } from '../hooks/use-run-dataflow';
import {
useHideFormSheetOnNodeDeletion,
@ -263,6 +264,7 @@ function DataFlowCanvas({ drawerVisible, hideDrawer, showLogSheet }: IProps) {
onBeforeDelete={handleBeforeDelete}
>
<AgentBackground></AgentBackground>
<Spotlight className="z-0" opcity={0.7} coverage={70} />
<Controls position={'bottom-center'} orientation="horizontal">
<ControlButton>
<Tooltip>

View File

@ -1,13 +0,0 @@
import { useIsDarkTheme } from '@/components/theme-provider';
import { Background } from '@xyflow/react';
export function AgentBackground() {
const isDarkTheme = useIsDarkTheme();
return (
<Background
color={isDarkTheme ? 'rgba(255,255,255,0.15)' : '#A8A9B3'}
bgColor={isDarkTheme ? 'rgba(11, 11, 12, 1)' : 'rgba(0, 0, 0, 0.05)'}
/>
);
}

View File

@ -1,3 +1,5 @@
import { AgentBackground } from '@/components/canvas/background';
import Spotlight from '@/components/spotlight';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import {
@ -22,7 +24,6 @@ import { ArrowDownToLine } from 'lucide-react';
import { ReactNode, useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { nodeTypes } from '../canvas';
import { AgentBackground } from '../components/background';
export function VersionDialog({
hideModal,
@ -121,6 +122,7 @@ export function VersionDialog({
minZoom={0.1}
>
<AgentBackground></AgentBackground>
<Spotlight className="z-0" opcity={0.7} coverage={70} />
</ReactFlow>
</ReactFlowProvider>
</section>