Perf: worfklow scroll cannot wheel. Adapt wrokflow skip circle. Change tab alway output stream (#2688)

* perf: teaxtarea no wheel

* remove render error

* adapt workflow skip circle

* perf: change tab can stream output

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx

@@ -4,17 +4,16 @@ import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../context';
-import { useI18n } from '@/web/context/I18n';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
+
 type Props = {
   onClose: () => void;
 };
 
 const ImportSettings = ({ onClose }: Props) => {
-  const { appT } = useI18n();
   const { toast } = useToast();
   const { File, onOpen } = useSelectFile({
     fileType: 'json',
@@ -25,21 +24,6 @@ const ImportSettings = ({ onClose }: Props) => {
   const [isDragging, setIsDragging] = useState(false);
   const [value, setValue] = useState('');
   const { t } = useTranslation();
-  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(true);
-  }, []);
-
-  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    setIsDragging(false);
-  }, []);
-  const handleDrop = useCallback(async (e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    const file = e.dataTransfer.files[0];
-    readJSONFile(file);
-    setIsDragging(false);
-  }, []);
 
   const readJSONFile = useCallback(
     (file: File) => {
@@ -62,6 +46,25 @@ const ImportSettings = ({ onClose }: Props) => {
     [t, toast]
   );
 
+  const handleDragEnter = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = useCallback(
+    async (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      readJSONFile(file);
+      setIsDragging(false);
+    },
+    [readJSONFile]
+  );
+
   const onSelectFile = useCallback(
     async (e: File[]) => {
       const file = e[0];
@@ -70,16 +73,14 @@ const ImportSettings = ({ onClose }: Props) => {
     },
     [readJSONFile]
   );
+
   return (
     <MyModal
       isOpen
       onClose={onClose}
-      title={
-        <Flex align={'center'} ml={-3}>
-          <MyIcon name={'common/importLight'} color={'primary.600'} w={'1.25rem'} mr={'0.62rem'} />
-          <Box lineHeight={'1.25rem'}>{appT('import_configs')}</Box>
-        </Flex>
-      }
+      iconSrc="common/importLight"
+      iconColor="primary.600"
+      title={t('app:import_configs')}
       size={isPc ? 'lg' : 'md'}
     >
       <ModalBody>
@@ -129,14 +130,12 @@ const ImportSettings = ({ onClose }: Props) => {
                 border={'1px solid'}
                 borderRadius={'md'}
                 borderColor={'myGray.200'}
-                h={'15.125rem'}
                 value={value}
                 placeholder={
                   isPc
                     ? t('app:paste_config') + '\n' + t('app:or_drag_JSON')
                     : t('app:paste_config')
                 }
-                defaultValue={value}
                 rows={16}
                 onChange={(e) => setValue(e.target.value)}
               />

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/FlowController.tsx

@@ -34,12 +34,10 @@ const FlowController = React.memo(function FlowController() {
 
   // Controller shortcut key
   useKeyPress(['ctrl.z', 'meta.z'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     undo();
   });
   useKeyPress(['ctrl.shift.z', 'meta.shift.z', 'ctrl.y', 'meta.y'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     redo();
   });

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useKeyboard.tsx

@@ -86,12 +86,10 @@ export const useKeyboard = () => {
   }, [computedNewNodeName, hasInputtingElement, setNodes]);
 
   useKeyPressEffect(['ctrl.c', 'meta.c'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     onCopy();
   });
   useKeyPressEffect(['ctrl.v', 'meta.v'], (e) => {
-    e.preventDefault();
     if (!mouseInCanvas) return;
     onParse();
   });

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ToolHandle.tsx

@@ -44,7 +44,7 @@ export const ToolTargetHandle = ({ show, nodeId }: ToolHandleProps) => {
         type="target"
         id={handleId}
         position={Position.Top}
-        isConnectableStart={false}
+        isConnectableEnd={showHandle}
       >
         <Box
           className="flow-handle"