perf: work order tip (#3874)

projects/app/src/components/Layout/WorkorderButton.tsx

@@ -1,33 +1,64 @@
+import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { getWorkorderURL } from '@/web/common/workorder/api';
+import { useUserStore } from '@/web/support/user/useUserStore';
 import { Box, Flex } from '@chakra-ui/react';
+import { StandardSubLevelEnum } from '@fastgpt/global/support/wallet/sub/constants';
 import Icon from '@fastgpt/web/components/common/Icon';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { useToggle } from 'ahooks';
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+
+const WorkOrderShowRouter: { [key: string]: boolean } = {
+  '/app/list': true,
+  '/dataset/list': true,
+  '/toolkit': true
+};
 
 function WorkorderButton() {
+  const router = useRouter();
   const [open, setOpen] = useToggle(true);
   const { t } = useTranslation();
 
-  const { data, runAsync } = useRequest2(getWorkorderURL, {
-    manual: true
+  const { feConfigs, subPlans } = useSystemStore();
+  const { teamPlanStatus } = useUserStore();
+
+  const { isPc } = useSystem();
+
+  const { runAsync: onFeedback } = useRequest2(getWorkorderURL, {
+    manual: true,
+    onSuccess(data) {
+      if (data) {
+        window.open(data.redirectUrl);
+      }
+    }
   });
 
-  const onFeedback = async () => {
-    await runAsync();
-    if (data) {
-      window.open(data.redirectUrl);
-    }
-  };
-  return (
+  const showWorkorder = WorkOrderShowRouter[router.pathname];
+
+  const isPlanUser = useMemo(() => {
+    if (!teamPlanStatus) return false;
+    if (teamPlanStatus.standard?.currentSubLevel !== StandardSubLevelEnum.free) return true;
+    if (teamPlanStatus.datasetMaxSize !== subPlans?.standard?.free?.maxDatasetSize) return true;
+    if (teamPlanStatus.totalPoints !== subPlans?.standard?.free?.totalPoints) return true;
+    return false;
+  }, [
+    subPlans?.standard?.free?.maxDatasetSize,
+    subPlans?.standard?.free?.totalPoints,
+    teamPlanStatus
+  ]);
+
+  return showWorkorder && feConfigs?.show_workorder && isPlanUser && isPc ? (
     <>
       {open ? (
         <Flex
           position="fixed"
-          bottom="20%"
+          bottom="10%"
           right="0"
-          height="62px"
-          width="58px"
+          height="56px"
+          width="56px"
           zIndex={100}
           boxShadow="0px 12px 32px -4px #00175633"
           alignItems="center"
@@ -39,16 +70,16 @@ function WorkorderButton() {
           borderColor={'#DFE6F2'}
         >
           <Box
-            zIndex={101}
-            width="14px"
-            height="14px"
+            zIndex={10}
+            width="1rem"
+            height="1rem"
             position="absolute"
             left="-6px"
             top="-6px"
             borderRadius="full"
             background="white"
             border="1px"
-            borderColor={'myGray.25'}
+            borderColor={'myGray.100'}
             bgColor="myGray.25"
             _hover={{
               cursor: 'pointer',
@@ -73,8 +104,8 @@ function WorkorderButton() {
             borderBottomLeftRadius="8px"
             onClick={onFeedback}
           >
-            <Icon name="feedback" width="28px" height="28px" />
-            <Box fontSize="11px" fontWeight="500">
+            <Icon name="feedback" width="24px" height="24px" />
+            <Box fontSize="xs" fontWeight="500">
               {t('common:question_feedback')}
             </Box>
           </Flex>
@@ -82,7 +113,7 @@ function WorkorderButton() {
       ) : (
         <Flex
           position="fixed"
-          bottom="20%"
+          bottom="10%"
           right="0"
           height="44px"
           width="19px"
@@ -106,7 +137,7 @@ function WorkorderButton() {
         </Flex>
       )}
     </>
-  );
+  ) : null;
 }
 
 export default WorkorderButton;

projects/app/src/components/Layout/auth.tsx

@@ -3,7 +3,6 @@ import { useUserStore } from '@/web/support/user/useUserStore';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';
 import { useToast } from '@fastgpt/web/hooks/useToast';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
 
 const unAuthPage: { [key: string]: boolean } = {
   '/': true,

projects/app/src/components/Layout/index.tsx

@@ -14,7 +14,7 @@ import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { useDebounceEffect, useMount } from 'ahooks';
 import { useTranslation } from 'next-i18next';
 import { useToast } from '@fastgpt/web/hooks/useToast';
-import WorkorderButton from '../support/workorder/WorkorderButton';
+import WorkorderButton from './WorkorderButton';
 
 const Navbar = dynamic(() => import('./navbar'));
 const NavbarPhone = dynamic(() => import('./navbarPhone'));
@@ -57,7 +57,8 @@ const Layout = ({ children }: { children: JSX.Element }) => {
   const { loading, feConfigs, notSufficientModalType, llmModelList, embeddingModelList } =
     useSystemStore();
   const { isPc } = useSystem();
-  const { userInfo, isUpdateNotification, setIsUpdateNotification } = useUserStore();
+  const { userInfo, teamPlanStatus, isUpdateNotification, setIsUpdateNotification } =
+    useUserStore();
   const { setUserDefaultLng } = useI18nLng();
 
   const isChatPage = useMemo(
@@ -122,7 +123,6 @@ const Layout = ({ children }: { children: JSX.Element }) => {
               <Auth>
                 <Box h={'100%'} position={'fixed'} left={0} top={0} w={navbarWidth}>
                   <Navbar unread={unread} />
-                  {feConfigs.show_workorder && <WorkorderButton />}
                 </Box>
                 <Box h={'100%'} ml={navbarWidth} overflow={'overlay'}>
                   {children}
@@ -161,6 +161,7 @@ const Layout = ({ children }: { children: JSX.Element }) => {
           {!!userInfo && importantInforms.length > 0 && (
             <ImportantInform informs={importantInforms} refetch={refetchUnRead} />
           )}
+          <WorkorderButton />
         </>
       )}
 

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

@@ -42,6 +42,8 @@ import AccountContainer from '@/pageComponents/account/AccountContainer';
 import { serviceSideProps } from '@fastgpt/web/common/system/nextjs';
 import { useRouter } from 'next/router';
 import TeamSelector from '@/pageComponents/account/TeamSelector';
+import { getWorkorderURL } from '@/web/common/workorder/api';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 
 const StandDetailModal = dynamic(
   () => import('@/pageComponents/account/info/standardDetailModal'),
@@ -580,9 +582,19 @@ const ButtonStyles = {
 };
 const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {
   const { feConfigs } = useSystemStore();
+  const { teamPlanStatus } = useUserStore();
   const { t } = useTranslation();
   const { isPc } = useSystem();
 
+  const { runAsync: onFeedback } = useRequest2(getWorkorderURL, {
+    manual: true,
+    onSuccess(data) {
+      if (data) {
+        window.open(data.redirectUrl);
+      }
+    }
+  });
+
   return (
     <Box>
       <Grid gridGap={4} mt={3}>
@@ -619,6 +631,16 @@ const Other = ({ onOpenContact }: { onOpenContact: () => void }) => {
             </Box>
           </Flex>
         )}
+        {feConfigs?.show_workorder &&
+          teamPlanStatus &&
+          teamPlanStatus.standard?.currentSubLevel !== StandardSubLevelEnum.free && (
+            <Flex onClick={onFeedback} {...ButtonStyles}>
+              <MyIcon name={'feedback'} w={'18px'} color={'myGray.600'} />
+              <Box ml={2} flex={1}>
+                {t('common:question_feedback')}
+              </Box>
+            </Flex>
+          )}
       </Grid>
     </Box>
   );