From f8c786e223fd31c90222639b25a0ed68eb2dadca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 14 Aug 2024 23:54:47 +0800
Subject: [PATCH] feat: update style of canvas node

---
 web/components/common/gpt-card.tsx            |  1 +
 web/components/flow/canvas-node.tsx           | 82 ++++++++++++-------
 web/components/flow/node-handler.tsx          |  6 +-
 web/components/flow/node-param-handler.tsx    |  8 +-
 .../flow/node-renderer/cascader.tsx           | 18 ++--
 .../flow/node-renderer/checkbox.tsx           |  2 +-
 .../flow/node-renderer/date-picker.tsx        |  6 +-
 web/components/flow/node-renderer/input.tsx   | 20 ++---
 web/components/flow/node-renderer/radio.tsx   |  2 +-
 web/components/flow/node-renderer/select.tsx  | 11 +--
 .../flow/node-renderer/slider-list.tsx        | 40 ---------
 web/components/flow/node-renderer/slider.tsx  |  4 +-
 .../flow/node-renderer/textarea.tsx           |  7 +-
 .../flow/node-renderer/time-picker.tsx        |  6 +-
 .../flow/node-renderer/tree-select.tsx        | 22 +++--
 15 files changed, 98 insertions(+), 137 deletions(-)
 delete mode 100644 web/components/flow/node-renderer/slider-list.tsx

diff --git a/web/components/common/gpt-card.tsx b/web/components/common/gpt-card.tsx
index 730d459d9..8ab7e0ccc 100644
--- a/web/components/common/gpt-card.tsx
+++ b/web/components/common/gpt-card.tsx
@@ -59,6 +59,7 @@ function GPTCard({
     return icon;
   }, [icon]);
 
+  // TODO: 算子资源标签
   const tagNode = useMemo(() => {
     if (!tags || !tags.length) return null;
     return (
diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx
index ebc1c20a5..de33a0e7b 100644
--- a/web/components/flow/canvas-node.tsx
+++ b/web/components/flow/canvas-node.tsx
@@ -18,7 +18,7 @@ type CanvasNodeProps = {
 const ICON_PATH_PREFIX = '/icons/node/';
 
 function TypeLabel({ label }: { label: string }) {
-  return <div className="w-full h-8 bg-stone-100 dark:bg-zinc-700 px-2 flex items-center justify-center">{label}</div>;
+  return <div className="w-full h-8 align-middle font-semibold">{label}</div>;
 }
 
 const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
@@ -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);
   }
@@ -74,20 +74,24 @@ 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">
           <TypeLabel label="Outputs" />
-          {(outputs || []).map((output, index) => (
-            <NodeHandler key={`${data.id}_input_${index}`} node={data} data={output} type="source" label="outputs" index={index} />
-          ))}
-        </>
+          <div className="text-sm 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} />
+            ))}
+          </div>
+        </div>
       );
     } else if (flowType === 'resource') {
       // resource nodes show output default
       return (
-        <>
+        <div className="bg-zinc-100 rounded p-2">
           <TypeLabel label="Outputs" />
-          <NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} />
-        </>
+          <div className="text-sm">
+            <NodeHandler key={`${data.id}_input_0`} node={data} data={data} type="source" label="outputs" index={0} />
+          </div>
+        </div>
       );
     }
   }
@@ -105,7 +109,15 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
             <DeleteOutlined className="h-full text-lg cursor-pointer" onClick={deleteNode} />
           </IconWrapper>
           <IconWrapper className="mt-2">
-            <Tooltip title={<><p className="font-bold">{node.label}</p><p>{node.description}</p></>} placement="right">
+            <Tooltip
+              title={
+                <>
+                  <p className="font-bold">{node.label}</p>
+                  <p>{node.description}</p>
+                </>
+              }
+              placement="right"
+            >
               <InfoCircleOutlined className="h-full text-lg cursor-pointer" />
             </Tooltip>
           </IconWrapper>
@@ -113,36 +125,46 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
       }
     >
       <div
-        className={classNames('w-72 h-auto rounded-xl shadow-md p-0 border bg-white dark:bg-zinc-800 cursor-grab', {
-          'border-blue-500': node.selected || isHovered,
-          'border-stone-400 dark:border-white': !node.selected && !isHovered,
-          'border-dashed': flowType !== 'operator',
-          'border-red-600': node.invalid,
-        })}
+        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',
+          {
+            'border-blue-500': node.selected || isHovered,
+            'border-stone-400 dark:border-white': !node.selected && !isHovered,
+            'border-dashed': flowType !== 'operator',
+            'border-red-600': node.invalid,
+          },
+        )}
         onMouseEnter={onHover}
         onMouseLeave={onLeave}
       >
         {/* icon and label */}
-        <div className="flex flex-row items-center p-2">
+        <div className="flex flex-row items-center">
           <Image src={'/icons/node/vis.png'} width={24} height={24} alt="" />
           <p className="ml-2 text-lg font-bold text-ellipsis overflow-hidden whitespace-nowrap">{node.label}</p>
         </div>
-        {inputs && inputs.length > 0 && (
-          <>
+
+        {inputs?.length > 0 && (
+          <div className="bg-zinc-100 rounded p-2">
             <TypeLabel label="Inputs" />
-            {(inputs || []).map((input, index) => (
-              <NodeHandler key={`${node.id}_input_${index}`} node={node} data={input} type="target" label="inputs" index={index} />
-            ))}
-          </>
+            <div className="text-sm 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} />
+              ))}
+            </div>
+          </div>
         )}
-        {parameters && parameters.length > 0 && (
-          <>
+
+        {parameters?.length > 0 && (
+          <div className="bg-zinc-100 rounded p-2">
             <TypeLabel label="Parameters" />
-            {(parameters || []).map((parameter, index) => (
-              <NodeParamHandler key={`${node.id}_param_${index}`} node={node} data={parameter} label="parameters" index={index} />
-            ))}
-          </>
+            <div className="text-sm 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} />
+              ))}
+            </div>
+          </div>
         )}
+
         {renderOutput(node)}
       </div>
     </Popover>
diff --git a/web/components/flow/node-handler.tsx b/web/components/flow/node-handler.tsx
index 0db0599e8..9b7682291 100644
--- a/web/components/flow/node-handler.tsx
+++ b/web/components/flow/node-handler.tsx
@@ -94,15 +94,15 @@ const NodeHandler: React.FC<NodeHandlerProps> = ({ node, data, type, label, inde
       })}
     >
       <Handle
-        className="w-2 h-2"
+        className={classNames('w-2 h-2', type === 'source' ? '-mr-4' : '-ml-4')}
         type={type}
         position={type === 'source' ? Position.Right : Position.Left}
         id={`${node.id}|${label}|${index}`}
         isValidConnection={(connection) => isValidConnection(connection)}
       />
       <Typography
-        className={classNames('p-2', {
-          'pr-4': label === 'outputs',
+        className={classNames('bg-white w-full px-2 py-1 rounded text-neutral-500',{
+          'text-right': label === 'outputs',
         })}
       >
         <Popconfirm
diff --git a/web/components/flow/node-param-handler.tsx b/web/components/flow/node-param-handler.tsx
index 58e9c8d78..2dbccd3fc 100644
--- a/web/components/flow/node-param-handler.tsx
+++ b/web/components/flow/node-param-handler.tsx
@@ -39,7 +39,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
       case 'int':
       case 'float':
         return (
-          <div className="p-2 text-sm">
+          <div className="text-sm">
             <p>
               {data.label}:<RequiredIcon optional={data.optional} />
               {data.description && (
@@ -59,7 +59,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
         );
       case 'str':
         return (
-          <div className="p-2 text-sm">
+          <div className="text-sm">
             <p>
               {data.label}:<RequiredIcon optional={data.optional} />
               {data.description && (
@@ -86,11 +86,11 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ node, data, label,
             )}
           </div>
         );
-      case 'checkbox':
+      case 'bool':
         defaultValue = defaultValue === 'False' ? false : defaultValue;
         defaultValue = defaultValue === 'True' ? true : defaultValue;
         return (
-          <div className="p-2 text-sm">
+          <div className="text-sm">
             <p>
               {data.label}:<RequiredIcon optional={data.optional} />
               {data.description && (
diff --git a/web/components/flow/node-renderer/cascader.tsx b/web/components/flow/node-renderer/cascader.tsx
index 4c9d69ac8..118c3ac40 100644
--- a/web/components/flow/node-renderer/cascader.tsx
+++ b/web/components/flow/node-renderer/cascader.tsx
@@ -13,15 +13,13 @@ export const RenderCascader = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <div className="p-2 text-sm">
-      <Cascader
-        {...attr}
-        options={data.options}
-        defaultValue={defaultValue}
-        placeholder="please select"
-        className="w-full nodrag"
-        onChange={onChange}
-      />
-    </div>
+    <Cascader
+      {...attr}
+      options={data.options}
+      defaultValue={defaultValue}
+      placeholder="please select"
+      className="w-full nodrag"
+      onChange={onChange}
+    />
   );
 };
diff --git a/web/components/flow/node-renderer/checkbox.tsx b/web/components/flow/node-renderer/checkbox.tsx
index 34b8ac657..0500d3498 100644
--- a/web/components/flow/node-renderer/checkbox.tsx
+++ b/web/components/flow/node-renderer/checkbox.tsx
@@ -14,7 +14,7 @@ export const RenderCheckbox = (params: Props) => {
 
   return (
     data.options?.length > 0 && (
-      <div className="p-2 text-sm">
+      <div className="bg-white p-2 rounded">
         <Checkbox.Group {...attr} options={data.options} defaultValue={defaultValue} onChange={onChange} />
       </div>
     )
diff --git a/web/components/flow/node-renderer/date-picker.tsx b/web/components/flow/node-renderer/date-picker.tsx
index d69538a61..25ddd33cc 100644
--- a/web/components/flow/node-renderer/date-picker.tsx
+++ b/web/components/flow/node-renderer/date-picker.tsx
@@ -17,9 +17,5 @@ export const RenderDatePicker = (params: Props) => {
     onChange(dateString);
   };
 
-  return (
-    <div className="p-2 text-sm">
-      <DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />
-    </div>
-  );
+  return <DatePicker {...attr} className="w-full" defaultValue={dayjs(defaultValue)} onChange={onChangeDate} />;
 };
diff --git a/web/components/flow/node-renderer/input.tsx b/web/components/flow/node-renderer/input.tsx
index 8a47d3d2f..538d14081 100644
--- a/web/components/flow/node-renderer/input.tsx
+++ b/web/components/flow/node-renderer/input.tsx
@@ -13,16 +13,14 @@ export const RenderInput = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <div className="p-2 text-sm">
-      <Input
-        {...attr}
-        className="w-full"
-        placeholder="please input"
-        defaultValue={defaultValue}
-        onChange={(e) => {
-          onChange(e.target.value);
-        }}
-      />
-    </div>
+    <Input
+      {...attr}
+      className="w-full"
+      placeholder="please input"
+      defaultValue={defaultValue}
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+    />
   );
 };
diff --git a/web/components/flow/node-renderer/radio.tsx b/web/components/flow/node-renderer/radio.tsx
index 1bc1763a6..056681ef4 100644
--- a/web/components/flow/node-renderer/radio.tsx
+++ b/web/components/flow/node-renderer/radio.tsx
@@ -13,7 +13,7 @@ export const RenderRadio = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <div className="p-2 text-sm">
+    <div className="bg-white p-2 rounded">
       <Radio.Group
         {...attr}
         options={data.options}
diff --git a/web/components/flow/node-renderer/select.tsx b/web/components/flow/node-renderer/select.tsx
index 8472f39b4..cd4784596 100644
--- a/web/components/flow/node-renderer/select.tsx
+++ b/web/components/flow/node-renderer/select.tsx
@@ -13,15 +13,6 @@ export const RenderSelect = (params: Props) => {
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <div className="p-2 text-sm">
-      <Select
-        {...attr}
-        className="w-full nodrag"
-        placeholder="please select"
-        defaultValue={defaultValue}
-        options={data.options}
-        onChange={onChange}
-      />
-    </div>
+    <Select {...attr} className="w-full nodrag" placeholder="please select" defaultValue={defaultValue} options={data.options} onChange={onChange} />
   );
 };
diff --git a/web/components/flow/node-renderer/slider-list.tsx b/web/components/flow/node-renderer/slider-list.tsx
deleted file mode 100644
index a1e3553f4..000000000
--- a/web/components/flow/node-renderer/slider-list.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { IFlowNodeParameter } from '@/types/flow';
-import { convertKeysToCamelCase } from '@/utils/flow';
-import { Col, InputNumber, Row, Slider, Space } from 'antd';
-import type { InputNumberProps } from 'antd';
-import React, { useState } from 'react';
-
-type TextAreaProps = {
-  data: IFlowNodeParameter;
-  defaultValue: any;
-  onChange: (value: any) => void;
-};
-
-export const RenderSlider = (params: TextAreaProps) => {
-  const { data, defaultValue, onChange } = params;
-  const attr = convertKeysToCamelCase(data.ui?.attr || {});
-  const [inputValue, setInputValue] = useState(defaultValue);
-
-  const onChangeSlider: InputNumberProps['onChange'] = (newValue) => {
-    setInputValue(newValue as number);
-    onChange(newValue as number);
-  };
-
-  return (
-    <div className="p-2 text-sm">
-      {data?.ui?.show_input ? (
-        <Row>
-          <Col span={12}>
-            <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
-          </Col>
-
-          <Col span={4}>
-            <InputNumber {...attr} style={{ margin: '0 16px' }} value={inputValue} onChange={onChangeSlider} />
-          </Col>
-        </Row>
-      ) : (
-        <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
-      )}
-    </div>
-  );
-};
diff --git a/web/components/flow/node-renderer/slider.tsx b/web/components/flow/node-renderer/slider.tsx
index bb8456adb..1017e20bb 100644
--- a/web/components/flow/node-renderer/slider.tsx
+++ b/web/components/flow/node-renderer/slider.tsx
@@ -21,7 +21,7 @@ export const RenderSlider = (params: TextAreaProps) => {
   };
 
   return (
-    <div className="p-2 text-sm">
+    <>
       {data?.ui?.show_input ? (
         <Row>
           <Col span={12}>
@@ -34,6 +34,6 @@ export const RenderSlider = (params: TextAreaProps) => {
       ) : (
         <Slider {...attr} onChange={onChangeSlider} value={typeof inputValue === 'number' ? inputValue : 0} />
       )}
-    </div>
+    </>
   );
 };
diff --git a/web/components/flow/node-renderer/textarea.tsx b/web/components/flow/node-renderer/textarea.tsx
index 5f8c55ac0..4a2c40f20 100644
--- a/web/components/flow/node-renderer/textarea.tsx
+++ b/web/components/flow/node-renderer/textarea.tsx
@@ -1,6 +1,7 @@
 import { IFlowNodeParameter } from '@/types/flow';
 import { Input } from 'antd';
 import { convertKeysToCamelCase } from '@/utils/flow';
+import classNames from 'classnames';
 
 const { TextArea } = Input;
 
@@ -12,11 +13,11 @@ type TextAreaProps = {
 
 export const RenderTextArea = (params: TextAreaProps) => {
   const { data, defaultValue, onChange } = params;
-  convertKeysToCamelCase(data?.ui?.attr?.autosize || {});
+  const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
   return (
-    <div className="p-2 text-sm">
-      <TextArea {...data.ui.attr} defaultValue={defaultValue} onChange={(e) => onChange(e.target.value)} {...data.ui.attr.autosize} rows={4} />
+    <div className={classNames({ 'mb-3': attr.showCount === true })}>
+      <TextArea {...attr} defaultValue={defaultValue} onChange={onChange} />
     </div>
   );
 };
diff --git a/web/components/flow/node-renderer/time-picker.tsx b/web/components/flow/node-renderer/time-picker.tsx
index 358f0b8a9..bfe3f8cb7 100644
--- a/web/components/flow/node-renderer/time-picker.tsx
+++ b/web/components/flow/node-renderer/time-picker.tsx
@@ -17,9 +17,5 @@ export const RenderTimePicker = (params: TextAreaProps) => {
     onChange(timeString);
   };
 
-  return (
-    <div className="p-2 text-sm">
-      <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />
-    </div>
-  );
+  return <TimePicker {...attr} className="w-full" defaultValue={defaultValue} onChange={onChangeTime} />;
 };
diff --git a/web/components/flow/node-renderer/tree-select.tsx b/web/components/flow/node-renderer/tree-select.tsx
index 7acc3d73a..508407217 100644
--- a/web/components/flow/node-renderer/tree-select.tsx
+++ b/web/components/flow/node-renderer/tree-select.tsx
@@ -79,18 +79,16 @@ export const RenderTreeSelect = (params: TextAreaProps) => {
   };
 
   return (
-    <div className="p-2 text-sm">
-      <TreeSelect
-        fieldNames={{ label: 'label', value: 'value', children: 'children' }}
-        {...data.ui.attr}
-        style={{ width: '100%' }}
-        value={defaultValue}
-        treeDefaultExpandAll
-        onChange={onChange}
-        treeData={data.options}
-        onDropdownVisibleChange={handleDropdownVisibleChange}
-      />
-    </div>
+    <TreeSelect
+      fieldNames={{ label: 'label', value: 'value', children: 'children' }}
+      {...data.ui.attr}
+      style={{ width: '100%' }}
+      value={defaultValue}
+      treeDefaultExpandAll
+      onChange={onChange}
+      treeData={data.options}
+      onDropdownVisibleChange={handleDropdownVisibleChange}
+    />
 
     // TODO: Implement the TreeSelect component
     //   <TreeSelect