feat: sync api collection will refresh title;perf: invite link ux (#4237)

* update queue

* feat: sync api collection will refresh title

* sync collection

* remove lock

* perf: invite link ux

packages/web/hooks/useCopyData.tsx

@@ -3,6 +3,11 @@ import { useToast } from './useToast';
 import { useCallback } from 'react';
 import { hasHttps } from '../common/system/utils';
 import { isProduction } from '@fastgpt/global/common/system/constants';
+import MyModal from '../components/common/MyModal';
+import React from 'react';
+import { Box, ModalBody } from '@chakra-ui/react';
+import Tag from '../components/common/Tag';
+import { useCommonStore } from '../store/useCommonStore';
 
 /**
  * copy text data
@@ -10,49 +15,27 @@ import { isProduction } from '@fastgpt/global/common/system/constants';
 export const useCopyData = () => {
   const { t } = useTranslation();
   const { toast } = useToast();
+  const { setCopyContent } = useCommonStore();
 
   const copyData = useCallback(
-    async (
-      data: string,
-      title: string | null = t('common:common.Copy Successful'),
-      duration = 1000
-    ) => {
+    async (data: string, title = t('common:common.Copy Successful'), duration = 1000) => {
       data = data.trim();
 
       try {
         if ((hasHttps() || !isProduction) && navigator.clipboard) {
           await navigator.clipboard.writeText(data);
+          if (title) {
+            toast({
+              title,
+              status: 'success',
+              duration
+            });
+          }
         } else {
           throw new Error('');
         }
       } catch (error) {
-        // console.log(error);
-
-        const textarea = document.createElement('textarea');
-        textarea.value = data;
-        textarea.style.position = 'absolute';
-        textarea.style.opacity = '0';
-        document.body.appendChild(textarea);
-
-        textarea.select();
-        const res = document.execCommand('copy');
-        document.body.removeChild(textarea);
-
-        if (!res) {
-          return toast({
-            title: t('common:common.Copy_failed'),
-            status: 'error',
-            duration
-          });
-        }
-      }
-
-      if (title) {
-        toast({
-          title,
-          status: 'success',
-          duration
-        });
+        setCopyContent(data);
       }
     },
     [t, toast]
@@ -62,3 +45,29 @@ export const useCopyData = () => {
     copyData
   };
 };
+
+export const ManualCopyModal = () => {
+  const { t } = useTranslation();
+  const { copyContent, setCopyContent } = useCommonStore();
+
+  return (
+    <MyModal
+      isOpen={!!copyContent}
+      iconSrc="copy"
+      iconColor="primary.600"
+      title={t('common:common.Copy')}
+      maxW={['90vw', '500px']}
+      w={'100%'}
+      onClose={() => setCopyContent(undefined)}
+    >
+      <ModalBody>
+        <Tag w={'100%'} colorSchema="blue">
+          {t('common:can_copy_content_tip')}
+        </Tag>
+        <Box mt={3} borderRadius={'md'} p={3} border={'base'} userSelect={'all'}>
+          {copyContent}
+        </Box>
+      </ModalBody>
+    </MyModal>
+  );
+};