chore: workflow ui (labring#3175)

* chore: workflow ui * fix * change icon color config * change popover to mymenu
Jiangween · Dec 1, 2024 · a6e8adf · a6e8adf
1 parent a597041
commit a6e8adf
Show file tree

Hide file tree

Showing 11 changed files with 323 additions and 365 deletions.
diff --git a/packages/web/components/common/MyBox/IconButton.tsx b/packages/web/components/common/MyBox/IconButton.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Flex, FlexProps } from '@chakra-ui/react';
+import MyIcon from '../Icon';
+
+type Props = FlexProps & {
+  icon: string;
+  onClick?: () => void;
+  hoverColor?: string;
+};
+
+const IconButton = ({ icon, onClick, hoverColor = 'primary.600', ...props }: Props) => {
+  return (
+    <Flex
+      mr={1}
+      p={1}
+      color={'myGray.500'}
+      rounded={'sm'}
+      alignItems={'center'}
+      bg={'transparent'}
+      transition={'background 0.1s'}
+      cursor={'pointer'}
+      _hover={{
+        bg: 'myGray.05',
+        color: hoverColor
+      }}
+      onClick={onClick}
+      {...props}
+    >
+      <MyIcon name={icon as any} w={'16px'} />
+    </Flex>
+  );
+};
+
+export default IconButton;
diff --git a/packages/web/components/common/MyMenu/index.tsx b/packages/web/components/common/MyMenu/index.tsx
@@ -43,9 +43,17 @@ export type Props = {
   }[];
 };
 
-const typeMapStyle: Record<MenuItemType, { styles: MenuItemProps; iconColor?: string }> = {
-  primary: {
-    styles: {
+const MyMenu = ({
+  width = 'auto',
+  trigger = 'hover',
+  size = 'sm',
+  offset,
+  Button,
+  menuList,
+  placement = 'bottom-start'
+}: Props) => {
+  const typeMapStyle: Record<MenuItemType, MenuItemProps & { iconColor?: string }> = {
+    primary: {
       _hover: {
         backgroundColor: 'primary.50',
         color: 'primary.600'
@@ -57,12 +65,10 @@ const typeMapStyle: Record<MenuItemType, { styles: MenuItemProps; iconColor?: st
       _active: {
         backgroundColor: 'primary.50',
         color: 'primary.600'
-      }
+      },
+      iconColor: 'myGray.600'
     },
-    iconColor: 'myGray.600'
-  },
-  gray: {
-    styles: {
+    gray: {
       _hover: {
         backgroundColor: 'myGray.05',
         color: 'primary.600'
@@ -74,12 +80,10 @@ const typeMapStyle: Record<MenuItemType, { styles: MenuItemProps; iconColor?: st
       _active: {
         backgroundColor: 'myGray.05',
         color: 'primary.600'
-      }
+      },
+      iconColor: 'myGray.400'
     },
-    iconColor: 'myGray.400'
-  },
-  grayBg: {
-    styles: {
+    grayBg: {
       _hover: {
         backgroundColor: 'myGray.05',
         color: 'primary.600'
@@ -91,12 +95,10 @@ const typeMapStyle: Record<MenuItemType, { styles: MenuItemProps; iconColor?: st
       _active: {
         backgroundColor: 'myGray.05',
         color: 'primary.600'
-      }
+      },
+      iconColor: 'myGray.600'
     },
-    iconColor: 'myGray.600'
-  },
-  danger: {
-    styles: {
+    danger: {
       color: 'red.600',
       _hover: {
         background: 'red.1'
@@ -106,98 +108,88 @@ const typeMapStyle: Record<MenuItemType, { styles: MenuItemProps; iconColor?: st
       },
       _active: {
         background: 'red.1'
-      }
-    },
-    iconColor: 'red.600'
-  }
-};
-const sizeMapStyle: Record<
-  MenuSizeType,
-  {
-    iconStyle: AvatarProps;
-    labelStyle: BoxProps;
-    dividerStyle: DividerProps;
-    menuItemStyle: MenuItemProps;
-  }
-> = {
-  mini: {
-    iconStyle: {
-      w: '14px'
-    },
-    labelStyle: {
-      fontSize: 'mini'
-    },
-    dividerStyle: {
-      my: 0.5
-    },
-    menuItemStyle: {
-      py: 1.5,
-      px: 2
+      },
+      iconColor: 'red.600'
     }
-  },
-  xs: {
-    iconStyle: {
-      w: '14px'
-    },
-    labelStyle: {
-      fontSize: 'sm'
-    },
-    dividerStyle: {
-      my: 0.5
-    },
-    menuItemStyle: {
-      py: 1.5,
-      px: 2
+  };
+  const sizeMapStyle: Record<
+    MenuSizeType,
+    {
+      iconStyle: AvatarProps;
+      labelStyle: BoxProps;
+      dividerStyle: DividerProps;
+      menuItemStyle: MenuItemProps;
     }
-  },
-  sm: {
-    iconStyle: {
-      w: '1rem'
-    },
-    labelStyle: {
-      fontSize: 'sm'
-    },
-    dividerStyle: {
-      my: 1
-    },
-    menuItemStyle: {
-      py: 2,
-      px: 3,
-      _notLast: {
-        mb: 0.5
+  > = {
+    mini: {
+      iconStyle: {
+        w: '14px'
+      },
+      labelStyle: {
+        fontSize: 'mini'
+      },
+      dividerStyle: {
+        my: 0.5
+      },
+      menuItemStyle: {
+        py: 1.5,
+        px: 2
       }
-    }
-  },
-  md: {
-    iconStyle: {
-      w: '2rem',
-      borderRadius: '6px'
     },
-    labelStyle: {
-      fontSize: 'sm'
+    xs: {
+      iconStyle: {
+        w: '14px'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      },
+      dividerStyle: {
+        my: 0.5
+      },
+      menuItemStyle: {
+        py: 1.5,
+        px: 2
+      }
     },
-    dividerStyle: {
-      my: 1
+    sm: {
+      iconStyle: {
+        w: '1rem'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      },
+      dividerStyle: {
+        my: 1
+      },
+      menuItemStyle: {
+        py: 2,
+        px: 3,
+        _notLast: {
+          mb: 0.5
+        }
+      }
     },
-    menuItemStyle: {
-      py: 2,
-      px: 3,
-      _notLast: {
-        mb: 0.5
+    md: {
+      iconStyle: {
+        w: '2rem',
+        borderRadius: '6px'
+      },
+      labelStyle: {
+        fontSize: 'sm'
+      },
+      dividerStyle: {
+        my: 1
+      },
+      menuItemStyle: {
+        py: 2,
+        px: 3,
+        _notLast: {
+          mb: 0.5
+        }
       }
     }
-  }
-};
+  };
 
-const MyMenu = ({
-  width = 'auto',
-  trigger = 'hover',
-  size = 'sm',
-  offset,
-  Button,
-  menuList,
-  placement = 'bottom-start'
-}: Props) => {
   const { isPc } = useSystem();
   const ref = useRef<HTMLDivElement>(null);
   const closeTimer = useRef<any>();
@@ -301,7 +293,7 @@ const MyMenu = ({
                     fontSize={'sm'}
                     color={child.isActive ? 'primary.700' : 'myGray.600'}
                     whiteSpace={'pre-wrap'}
-                    {...typeMapStyle[child.type || 'primary'].styles}
+                    {...typeMapStyle[child.type || 'primary']}
                     {...sizeMapStyle[size].menuItemStyle}
                     {...child.menuItemStyles}
                   >

diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json
@@ -740,7 +740,7 @@
   "core.module.template.AI support tool tip": "Models that support function calls can better use tool calls.",
   "core.module.template.Basic Node": "Basic",
   "core.module.template.Query extension": "Question Optimization",
-  "core.module.template.System Plugin": "System Plugin",
+  "core.module.template.System Plugin": "System",
   "core.module.template.System input module": "System Input",
   "core.module.template.Team app": "Team",
   "core.module.template.Tool module": "Tool",

diff --git a/projects/app/src/components/Layout/navbar.tsx b/projects/app/src/components/Layout/navbar.tsx
@@ -96,7 +96,6 @@ const Navbar = ({ unread }: { unread: number }) => {
       w={'100%'}
       userSelect={'none'}
       pb={2}
-      bg={isSecondNavbarPage ? 'myGray.50' : 'transparent'}
     >
       {/* logo */}
       <Box

diff --git a/projects/app/src/components/core/app/VariableEdit.tsx b/projects/app/src/components/core/app/VariableEdit.tsx
@@ -31,7 +31,7 @@ import ChatFunctionTip from './Tip';
 import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
 import InputTypeConfig from '@/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig';
-import MyIconButton from '@fastgpt/web/components/common/Icon/button';
+import IconButton from '@fastgpt/web/components/common/MyBox/IconButton';
 
 export const defaultVariable: VariableItemType = {
   id: nanoid(),
@@ -220,7 +220,7 @@ const VariableEdit = ({
                   </Td>
                   <Td>
                     <Flex>
-                      <MyIconButton
+                      <IconButton
                         icon={'common/settingLight'}
                         onClick={() => {
                           const formattedItem = {
@@ -230,7 +230,7 @@ const VariableEdit = ({
                           reset(formattedItem);
                         }}
                       />
-                      <MyIconButton
+                      <IconButton
                         icon={'delete'}
                         hoverColor={'red.500'}
                         onClick={() =>