V4.6.6-1 (#656)

projects/app/src/pages/plugin/edit/Header.tsx

@@ -7,7 +7,7 @@ import { useCopyData } from '@/web/common/hooks/useCopyData';
 import dynamic from 'next/dynamic';
 import MyIcon from '@/components/Icon';
 import MyTooltip from '@/components/MyTooltip';
-import { useFlowProviderStore } from '@/components/core/module/Flow/FlowProvider';
+import { getFlowStore } from '@/components/core/module/Flow/FlowProvider';
 import { filterExportModules, flowNode2Modules } from '@/components/core/module/utils';
 import { putUpdatePlugin } from '@/web/core/plugin/api';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/module/node/constant';
@@ -25,10 +25,11 @@ const Header = ({ plugin, onClose }: Props) => {
   const { toast } = useToast();
   const { copyData } = useCopyData();
   const { isOpen: isOpenImport, onOpen: onOpenImport, onClose: onCloseImport } = useDisclosure();
-  const { nodes, edges, onFixView } = useFlowProviderStore();
   const [previewModules, setPreviewModules] = React.useState<ModuleItemType[]>();
 
-  const flow2ModulesAndCheck = useCallback(() => {
+  const flow2ModulesAndCheck = useCallback(async () => {
+    const { nodes, edges } = await getFlowStore();
+
     const modules = flowNode2Modules({ nodes, edges });
 
     // check required connect
@@ -97,7 +98,7 @@ const Header = ({ plugin, onClose }: Props) => {
     }
 
     return modules;
-  }, [edges, nodes, t, toast]);
+  }, [t, toast]);
 
   const { mutate: onclickSave, isLoading } = useRequest({
     mutationFn: (modules: ModuleItemType[]) => {
@@ -121,15 +122,12 @@ const Header = ({ plugin, onClose }: Props) => {
       >
         <MyTooltip label={t('common.Back')} offset={[10, 10]}>
           <IconButton
-            size={'sm'}
+            size={'smSquare'}
             icon={<MyIcon name={'back'} w={'14px'} />}
-            borderRadius={'md'}
-            borderColor={'myGray.300'}
-            variant={'base'}
+            variant={'whiteBase'}
             aria-label={''}
             onClick={() => {
               onClose();
-              onFixView();
             }}
           />
         </MyTooltip>
@@ -141,8 +139,8 @@ const Header = ({ plugin, onClose }: Props) => {
           <IconButton
             mr={[3, 6]}
             icon={<MyIcon name={'importLight'} w={['14px', '16px']} />}
-            borderRadius={'lg'}
-            variant={'base'}
+            variant={'whitePrimary'}
+            size={'smSquare'}
             aria-label={'save'}
             onClick={onOpenImport}
           />
@@ -151,11 +149,11 @@ const Header = ({ plugin, onClose }: Props) => {
           <IconButton
             mr={[3, 6]}
             icon={<MyIcon name={'export'} w={['14px', '16px']} />}
-            borderRadius={'lg'}
-            variant={'base'}
+            size={'smSquare'}
+            variant={'whitePrimary'}
             aria-label={'save'}
-            onClick={() => {
-              const modules = flow2ModulesAndCheck();
+            onClick={async () => {
+              const modules = await flow2ModulesAndCheck();
               if (modules) {
                 copyData(filterExportModules(modules), t('app.Export Config Successful'));
               }
@@ -166,11 +164,11 @@ const Header = ({ plugin, onClose }: Props) => {
           <IconButton
             mr={[3, 6]}
             icon={<MyIcon name={'core/module/previewLight'} w={['14px', '16px']} />}
-            borderRadius={'lg'}
+            size={'smSquare'}
             aria-label={'save'}
-            variant={'base'}
-            onClick={() => {
-              const modules = flow2ModulesAndCheck();
+            variant={'whitePrimary'}
+            onClick={async () => {
+              const modules = await flow2ModulesAndCheck();
               if (modules) {
                 setPreviewModules(modules);
               }
@@ -180,11 +178,11 @@ const Header = ({ plugin, onClose }: Props) => {
         <MyTooltip label={t('module.Save Config')}>
           <IconButton
             icon={<MyIcon name={'save'} w={['14px', '16px']} />}
-            borderRadius={'lg'}
+            size={'smSquare'}
             isLoading={isLoading}
             aria-label={'save'}
-            onClick={() => {
-              const modules = flow2ModulesAndCheck();
+            onClick={async () => {
+              const modules = await flow2ModulesAndCheck();
               if (modules) {
                 onclickSave(modules);
               }

projects/app/src/pages/plugin/edit/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { useRouter } from 'next/router';
 import Header from './Header';
 import Flow from '@/components/core/module/Flow';
@@ -21,7 +21,7 @@ const Render = ({ pluginId }: Props) => {
   const { t } = useTranslation();
   const router = useRouter();
   const { toast } = useToast();
-  const { nodes = [] } = useFlowProviderStore();
+  const { nodes, initData } = useFlowProviderStore();
   const { pluginModuleTemplates, loadPluginTemplates } = usePluginStore();
 
   const moduleTemplates = useMemo(() => {
@@ -71,10 +71,13 @@ const Render = ({ pluginId }: Props) => {
 
   useQuery(['getPlugTemplates'], () => loadPluginTemplates());
 
+  useEffect(() => {
+    initData(JSON.parse(JSON.stringify(pluginDetail?.modules || [])));
+  }, [pluginDetail?.modules]);
+
   return pluginDetail ? (
     <Flow
       templates={moduleTemplates}
-      modules={pluginDetail?.modules || []}
       Header={<Header plugin={pluginDetail} onClose={() => router.back()} />}
     />
   ) : (

projects/app/src/pages/plugin/list/component/EditModal.tsx

@@ -192,14 +192,13 @@ const CreateModal = ({
         </Box>
       </ModalBody>
 
-      <Flex px={5} py={4}>
+      <Flex px={5} py={4} alignItems={'center'}>
         {!!defaultValue.id && (
           <IconButton
             className="delete"
-            size={'sm'}
+            size={'xsSquare'}
             icon={<MyIcon name={'delete'} w={'14px'} />}
-            variant={'base'}
-            borderRadius={'md'}
+            variant={'whiteDanger'}
             aria-label={'delete'}
             _hover={{
               bg: 'red.100'
@@ -211,7 +210,7 @@ const CreateModal = ({
           />
         )}
         <Box flex={1} />
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
           {t('common.Close')}
         </Button>
         {!!defaultValue.id ? (

projects/app/src/pages/plugin/list/index.tsx

@@ -29,8 +29,8 @@ const MyModules = () => {
   });
 
   return (
-    <PageContainer isLoading={isLoading}>
-      <Flex pt={3} px={5} alignItems={'center'}>
+    <PageContainer isLoading={isLoading} insertProps={{ px: [5, '48px'] }}>
+      <Flex pt={[4, '30px']} alignItems={'center'} justifyContent={'space-between'}>
         <Flex flex={1} alignItems={'center'}>
           <Image src={'/imgs/module/plugin.svg'} alt={''} mr={2} h={'24px'} />
           <Box className="textlg" letterSpacing={1} fontSize={['20px', '24px']} fontWeight={'bold'}>
@@ -39,36 +39,35 @@ const MyModules = () => {
         </Flex>
         <Button
           leftIcon={<AddIcon />}
-          variant={'base'}
+          variant={'primaryOutline'}
           onClick={() => setEditModalData(defaultForm)}
         >
           {t('common.New Create')}
         </Button>
       </Flex>
       <Grid
-        p={5}
-        gridTemplateColumns={['1fr', 'repeat(3,1fr)', 'repeat(4,1fr)', 'repeat(5,1fr)']}
+        py={5}
+        gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
         gridGap={5}
       >
         {data.map((plugin) => (
-          <Card
+          <Box
             key={plugin._id}
-            py={4}
+            py={3}
             px={5}
             cursor={'pointer'}
-            h={'140px'}
-            border={theme.borders.md}
-            boxShadow={'none'}
+            minH={'140px'}
+            borderWidth={'1.5px'}
+            borderColor={'borderColor.low'}
+            bg={'white'}
+            borderRadius={'lg'}
             userSelect={'none'}
             position={'relative'}
             _hover={{
-              boxShadow: '1px 1px 10px rgba(0,0,0,0.2)',
-              borderColor: 'transparent',
-              '& .delete': {
-                display: 'block'
-              },
-              '& .chat': {
-                display: 'block'
+              borderColor: 'primary.300',
+              boxShadow: '1.5',
+              '& .edit': {
+                display: 'flex'
               }
             }}
             onClick={() => router.push(`/plugin/edit?pluginId=${plugin._id}`)}
@@ -77,18 +76,17 @@ const MyModules = () => {
               <Avatar src={plugin.avatar} borderRadius={'md'} w={'28px'} />
               <Box ml={3}>{plugin.name}</Box>
               <IconButton
-                className="delete"
+                className="edit"
                 position={'absolute'}
                 top={4}
                 right={4}
-                size={'sm'}
+                size={'smSquare'}
                 icon={<MyIcon name={'edit'} w={'14px'} />}
-                variant={'base'}
-                borderRadius={'md'}
-                aria-label={'delete'}
+                variant={'whitePrimary'}
+                aria-label={'edit'}
                 display={['', 'none']}
                 _hover={{
-                  bg: 'blue.100'
+                  bg: 'primary.100'
                 }}
                 onClick={(e) => {
                   e.stopPropagation();
@@ -110,7 +108,7 @@ const MyModules = () => {
             >
               {plugin.intro || t('plugin.No Intro')}
             </Box>
-          </Card>
+          </Box>
         ))}
       </Grid>
       {data.length === 0 && <EmptyTip />}