From b8538c72fca6371e51b831d5cd472eb22680b65e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com> Date: Thu, 15 Aug 2024 00:25:42 +0800 Subject: [PATCH 1/2] fix: fixed the issue of incorrect background color of canvas node in dark mode --- web/components/flow/canvas-node.tsx | 10 +++++----- web/components/flow/node-handler.tsx | 2 +- web/components/flow/node-renderer/date-picker.tsx | 12 +++++++++++- web/components/flow/node-renderer/time-picker.tsx | 2 +- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx index de33a0e7b..0177aa4f1 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -74,7 +74,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { function renderOutput(data: IFlowNode) { if (flowType === 'operator' && outputs?.length > 0) { return ( - <div className="bg-zinc-100 rounded p-2"> + <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Outputs" /> <div className="text-sm flex flex-col space-y-3"> {outputs?.map((output, index) => ( @@ -86,7 +86,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { } else if (flowType === 'resource') { // resource nodes show output default return ( - <div className="bg-zinc-100 rounded p-2"> + <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Outputs" /> <div className="text-sm"> <NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} /> @@ -126,7 +126,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { > <div className={classNames( - 'w-72 h-auto rounded-xl shadow-md px-2 py-4 border bg-white dark:bg-zinc-800 cursor-grab flex flex-col space-y-2 text-sm', + 'w-80 h-auto rounded-xl shadow-md px-2 py-4 border bg-white dark:bg-zinc-800 cursor-grab flex flex-col space-y-2 text-sm', { 'border-blue-500': node.selected || isHovered, 'border-stone-400 dark:border-white': !node.selected && !isHovered, @@ -144,7 +144,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { </div> {inputs?.length > 0 && ( - <div className="bg-zinc-100 rounded p-2"> + <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Inputs" /> <div className="text-sm flex flex-col space-y-2"> {inputs?.map((input, index) => ( @@ -155,7 +155,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { )} {parameters?.length > 0 && ( - <div className="bg-zinc-100 rounded p-2"> + <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Parameters" /> <div className="text-sm flex flex-col space-y-3 text-neutral-500"> {parameters?.map((parameter, index) => ( diff --git a/web/components/flow/node-handler.tsx b/web/components/flow/node-handler.tsx index 9b7682291..dfe144b2c 100644 --- a/web/components/flow/node-handler.tsx +++ b/web/components/flow/node-handler.tsx @@ -101,7 +101,7 @@ const NodeHandler: React.FC<NodeHandlerProps> = ({ node, data, type, label, inde isValidConnection={(connection) => isValidConnection(connection)} /> <Typography - className={classNames('bg-white w-full px-2 py-1 rounded text-neutral-500',{ + className={classNames('bg-white dark:bg-[#232734] w-full px-2 py-1 rounded text-neutral-500',{ 'text-right': label === 'outputs', })} > diff --git a/web/components/flow/node-renderer/date-picker.tsx b/web/components/flow/node-renderer/date-picker.tsx index 25ddd33cc..478295c75 100644 --- a/web/components/flow/node-renderer/date-picker.tsx +++ b/web/components/flow/node-renderer/date-picker.tsx @@ -11,11 +11,21 @@ type Props = { export const RenderDatePicker = (params: Props) => { const { data, defaultValue, onChange } = params; + console.log('data', data); + const attr = convertKeysToCamelCase(data.ui?.attr || {}); const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => { onChange(dateString); }; - return <DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />; + return ( + <DatePicker + {...attr} + className="w-full" + placeholder="please select a date" + defaultValue={defaultValue ? dayjs(defaultValue) : null} + onChange={onChangeDate} + /> + ); }; diff --git a/web/components/flow/node-renderer/time-picker.tsx b/web/components/flow/node-renderer/time-picker.tsx index bfe3f8cb7..95e13524b 100644 --- a/web/components/flow/node-renderer/time-picker.tsx +++ b/web/components/flow/node-renderer/time-picker.tsx @@ -17,5 +17,5 @@ export const RenderTimePicker = (params: TextAreaProps) => { onChange(timeString); }; - return <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />; + return <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} placeholder="please select a moment" />; }; From 9796bf9a9d396973e1808d179f9f4deda1cbfdfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com> Date: Thu, 15 Aug 2024 00:32:31 +0800 Subject: [PATCH 2/2] style: delete redundant font styles --- web/components/flow/canvas-node.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx index 0177aa4f1..59129718f 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -26,7 +26,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { const { inputs, outputs, parameters, flow_type: flowType } = node; const [isHovered, setIsHovered] = useState(false); const reactFlow = useReactFlow(); - + function onHover() { setIsHovered(true); } @@ -76,7 +76,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { return ( <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Outputs" /> - <div className="text-sm flex flex-col space-y-3"> + <div className="flex flex-col space-y-3"> {outputs?.map((output, index) => ( <NodeHandler key={`${data.id}_input_${index}`} node={data} data={output} type="source" label="outputs" index={index} /> ))} @@ -88,9 +88,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { return ( <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Outputs" /> - <div className="text-sm"> - <NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} /> - </div> + <NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} /> </div> ); } @@ -146,7 +144,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { {inputs?.length > 0 && ( <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Inputs" /> - <div className="text-sm flex flex-col space-y-2"> + <div className="flex flex-col space-y-2"> {inputs?.map((input, index) => ( <NodeHandler key={`${node.id}_input_${index}`} node={node} data={input} type="target" label="inputs" index={index} /> ))} @@ -157,7 +155,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => { {parameters?.length > 0 && ( <div className="bg-zinc-100 dark:bg-zinc-700 rounded p-2"> <TypeLabel label="Parameters" /> - <div className="text-sm flex flex-col space-y-3 text-neutral-500"> + <div className="flex flex-col space-y-3 text-neutral-500"> {parameters?.map((parameter, index) => ( <NodeParamHandler key={`${node.id}_param_${index}`} node={node} data={parameter} label="parameters" index={index} /> ))}