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} />
               ))}