perf: workflow code (#2492)

* perf: workflow code

* perf: converpoints ui

* perf: account page ui

projects/app/src/pages/account/components/Info/ConversionModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { ModalBody, Box, Button, VStack, HStack, Link } from '@chakra-ui/react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
@@ -6,22 +6,33 @@ import Icon from '@fastgpt/web/components/common/Icon';
 import Tag from '@fastgpt/web/components/common/Tag';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { balanceConversion } from '@/web/support/wallet/bill/api';
-import Loading from '@fastgpt/web/components/common/MyLoading';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/tools';
+import { SUB_EXTRA_POINT_RATE } from '@fastgpt/global/support/wallet/bill/constants';
+import { useRouter } from 'next/router';
 
 const ConversionModal = ({
   onClose,
-  balance,
-  tokens,
   onOpenContact
 }: {
   onClose: () => void;
-  balance: string;
-  tokens: string;
   onOpenContact: () => void;
 }) => {
   const { t } = useTranslation();
+  const { userInfo } = useUserStore();
+  const router = useRouter();
+
+  const points = useMemo(() => {
+    if (!userInfo?.team?.balance) return 0;
+    const balance = formatStorePrice2Read(userInfo?.team?.balance);
+
+    return Math.ceil((balance / 15) * SUB_EXTRA_POINT_RATE);
+  }, []);
 
   const { runAsync: onConvert, loading } = useRequest2(balanceConversion, {
+    onSuccess() {
+      router.reload();
+    },
     successToast: t('user:bill.convert_success'),
     errorToast: t('user:bill.convert_error')
   });
@@ -35,7 +46,6 @@ const ConversionModal = ({
       title={t('user:bill.use_balance')}
     >
       <ModalBody maxW={'450px'}>
-        {loading && <Loading />}
         <VStack px="2.25" gap={2} pb="6">
           <HStack px="4" py="2" color="primary.600" bgColor="primary.50" borderRadius="md">
             <Icon name="common/info" w="1rem" mr="1" />
@@ -43,10 +53,10 @@ const ConversionModal = ({
           </HStack>
           <VStack mt={6}>
             <Box fontSize={'sm'} color="myGray.600" fontWeight="500">
-              {t('user:bill.price')}
+              当前积分价格
             </Box>
             <Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
-              ￥15/1000 {t('user:bill.tokens')}
+              ￥15/1000 {t('user:bill.tokens')}/月
             </Box>
           </VStack>
           <VStack mt={6}>
@@ -54,7 +64,7 @@ const ConversionModal = ({
               {t('user:bill.balance')}
             </Box>
             <Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
-              ￥{balance}
+              ￥{formatStorePrice2Read(userInfo?.team?.balance)?.toFixed(2)}
             </Box>
           </VStack>
           <VStack mt={6}>
@@ -62,9 +72,9 @@ const ConversionModal = ({
               {t('user:bill.you_can_convert')}
             </Box>
             <Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
-              {tokens} {t('user:bill.tokens')}
+              {points} {t('user:bill.tokens')}
             </Box>
-            <Tag>{t('user:bill.token_expire_1year')}</Tag>
+            <Tag fontSize={'lg'}>{t('user:bill.token_expire_1year')}</Tag>
           </VStack>
 
           <VStack mt="6">
@@ -74,6 +84,7 @@ const ConversionModal = ({
               fontSize={'sm'}
               minW={'10rem'}
               onClick={onConvert}
+              isLoading={loading}
             >
               {t('user:bill.conversion')}
             </Button>

projects/app/src/pages/account/components/Info/index.tsx

@@ -305,22 +305,18 @@ const MyInfo = ({ onOpenContact }: { onOpenContact: () => void }) => {
               <Box flex={1}>
                 <strong>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}</strong> 元
               </Box>
-              {userInfo?.permission.hasManagePer && !!standardPlan && (
+              {/* TODO:暂时隐藏 */}
+              {/* {userInfo?.permission.hasManagePer && !!standardPlan && (
                 <Button variant={'primary'} size={'sm'} ml={5} onClick={onOpenConversionModal}>
                   {t('user:bill.conversion')}
                 </Button>
-              )}
+              )} */}
             </Flex>
           </Box>
         )}
       </Box>
       {isOpenConversionModal && (
-        <ConversionModal
-          onClose={onCloseConversionModal}
-          balance={formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}
-          tokens={String((userInfo?.team?.balance ?? 0) / 15 / 10)}
-          onOpenContact={onOpenContact}
-        />
+        <ConversionModal onClose={onCloseConversionModal} onOpenContact={onOpenContact} />
       )}
       {isOpenUpdatePsw && <UpdatePswModal onClose={onCloseUpdatePsw} />}
       {isOpenUpdateNotification && <UpdateNotification onClose={onCloseUpdateNotification} />}

projects/app/src/pages/account/components/Info/standardDetailModal.tsx

@@ -21,6 +21,7 @@ import { subTypeMap, standardSubLevelMap } from '@fastgpt/global/support/wallet/
 import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
 import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
+
 const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
   const { Loading } = useLoading();
@@ -33,6 +34,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
       maxW={['90vw', '1200px']}
       iconSrc="modal/teamPlans"
       title={t('common:support.wallet.Standard Plan Detail')}
+      isCentered
     >
       <ModalCloseButton onClick={onClose} />
       <ModalBody>

projects/app/src/pages/account/index.tsx

@@ -8,7 +8,7 @@ import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import PageContainer from '@/components/PageContainer';
 import SideTabs from '@/components/SideTabs';
 import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
-import UserInfo from './components/Info';
+import UserInfo from './components/Info/index';
 import { serviceSideProps } from '@/web/common/utils/i18n';
 import { useTranslation } from 'next-i18next';
 import Script from 'next/script';

projects/app/src/pages/app/detail/components/Plugin/index.tsx

@@ -38,7 +38,8 @@ const WorkflowEdit = () => {
         cloneDeep({
           nodes: appDetail.modules || [],
           edges: appDetail.edges || []
-        })
+        }),
+        true
       );
     }
   });

projects/app/src/pages/app/detail/components/Workflow/Header.tsx

@@ -61,6 +61,9 @@ const Header = () => {
   } = useContextSelector(WorkflowContext, (v) => v);
 
   const isPublished = useMemo(() => {
+    /* 
+      Find the last saved snapshot in the past and future snapshots
+    */
     const savedSnapshot =
       future.findLast((snapshot) => snapshot.isSaved) || past.find((snapshot) => snapshot.isSaved);
 
@@ -97,6 +100,7 @@ const Header = () => {
           //@ts-ignore
           version: 'v2'
         });
+        // Mark the current snapshot as saved
         setPast((prevPast) =>
           prevPast.map((item, index) =>
             index === prevPast.length - 1

projects/app/src/pages/app/detail/components/WorkflowComponents/context.tsx

@@ -424,7 +424,7 @@ const WorkflowContextProvider = ({
   const onChangeNode = useMemoizedFn((props: FlowNodeChangeProps) => {
     const { nodeId, type } = props;
     setNodes((nodes) => {
-      const newNodes = nodes.map((node) => {
+      return nodes.map((node) => {
         if (node.id !== nodeId) return node;
 
         const updateObj = cloneDeep(node.data);
@@ -490,7 +490,6 @@ const WorkflowContextProvider = ({
           data: updateObj
         };
       });
-      return newNodes;
     });
   });
   const getNodeDynamicInputs = useCallback(
@@ -532,6 +531,13 @@ const WorkflowContextProvider = ({
 
   const initData = useMemoizedFn(
     async (e: Parameters<WorkflowContextType['initData']>[0], isInit?: boolean) => {
+      /* 
+        Refresh web page, load init
+      */
+      if (isInit && past.length > 0) {
+        return resetSnapshot(past[0]);
+      }
+
       setNodes(e.nodes?.map((item) => storeNode2FlowNode({ item })) || []);
       setEdges(e.edges?.map((item) => storeEdgesRenderEdge({ edge: item })) || []);
 
@@ -544,19 +550,15 @@ const WorkflowContextProvider = ({
       }
 
       // If it is the initial data, save the initial snapshot
-      if (!isInit) return;
-      // If it has been initialized, it will not be saved
-      if (past.length > 0) {
-        resetSnapshot(past[0]);
-        return;
+      if (isInit) {
+        saveSnapshot({
+          pastNodes: e.nodes?.map((item) => storeNode2FlowNode({ item })) || [],
+          pastEdges: e.edges?.map((item) => storeEdgesRenderEdge({ edge: item })) || [],
+          customTitle: t(`app:app.version_initial`),
+          chatConfig: appDetail.chatConfig,
+          isSaved: true
+        });
       }
-      saveSnapshot({
-        pastNodes: e.nodes?.map((item) => storeNode2FlowNode({ item })) || [],
-        pastEdges: e.edges?.map((item) => storeEdgesRenderEdge({ edge: item })) || [],
-        customTitle: t(`app:app.version_initial`),
-        chatConfig: appDetail.chatConfig,
-        isSaved: true
-      });
     }
   );