4.8.13 test (#3085)

* perf: workflow node ui * chat iframe url
2024-11-07 12:03:21 +08:00 · 2024-11-07 12:03:21 +08:00 · dc95ab1dc1
commit dc95ab1dc1
parent fa2fbc1ddd
19 changed files with 111 additions and 43 deletions
--- a/docSite/content/zh-cn/docs/development/upgrading/4813.md
+++ b/docSite/content/zh-cn/docs/development/upgrading/4813.md
@ -17,5 +17,6 @@ weight: 811
 6. 优化 - 全文检索语句，减少一轮查询。
 7. 优化 - 修改 findLast 为 [...array].reverse().find，适配旧版浏览器。
 8. 优化 - Markdown 组件自动空格，避免分割 url 中的中文。
-9. 修复 - Dockerfile pnpm install 支持代理。
-10. 修复 - BI 图表生成无法写入文件。
+9. 优化 - 工作流上下文拆分，性能优化。
+10. 修复 - Dockerfile pnpm install 支持代理。
+11. 修复 - BI 图表生成无法写入文件。
--- a/packages/web/components/common/Icon/icons/edgeAdd.svg
+++ b/packages/web/components/common/Icon/icons/edgeAdd.svg
@ -1,3 +1,3 @@
-<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09993 1.21182C6.09993 0.604303 5.60744 0.111816 4.99993 0.111816C4.39242 0.111816 3.89993 0.604303 3.89993 1.21182L3.89993 3.11182H1.9999C1.39239 3.11182 0.899902 3.6043 0.899902 4.21182C0.899902 4.81933 1.39239 5.31182 1.9999 5.31182H3.89993L3.89993 7.21182C3.89993 7.81933 4.39242 8.31182 4.99993 8.31182C5.60744 8.31182 6.09993 7.81933 6.09993 7.21182V5.31182H7.9999C8.60742 5.31182 9.0999 4.81933 9.0999 4.21182C9.0999 3.6043 8.60742 3.11182 7.9999 3.11182H6.09993V1.21182Z" fill="#487FFF"/>
+<svg  viewBox="0 0 10 9"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09993 1.21182C6.09993 0.604303 5.60744 0.111816 4.99993 0.111816C4.39242 0.111816 3.89993 0.604303 3.89993 1.21182L3.89993 3.11182H1.9999C1.39239 3.11182 0.899902 3.6043 0.899902 4.21182C0.899902 4.81933 1.39239 5.31182 1.9999 5.31182H3.89993L3.89993 7.21182C3.89993 7.81933 4.39242 8.31182 4.99993 8.31182C5.60744 8.31182 6.09993 7.81933 6.09993 7.21182V5.31182H7.9999C8.60742 5.31182 9.0999 4.81933 9.0999 4.21182C9.0999 3.6043 8.60742 3.11182 7.9999 3.11182H6.09993V1.21182Z" />
 </svg>
--- a/projects/app/src/components/Markdown/codeBlock/Iframe.tsx
+++ b/projects/app/src/components/Markdown/codeBlock/Iframe.tsx
@ -1,16 +1,19 @@
-import React, { useEffect, useRef, useCallback, useState } from 'react';
+import React from 'react';
 import { Box } from '@chakra-ui/react';
-import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useMarkdownWidth } from '../hooks';

-const MermaidBlock = ({ code }: { code: string }) => {
+const IframeBlock = ({ code }: { code: string }) => {
+  const { width, Ref } = useMarkdownWidth();
  return (
-    <Box w={'100%'}>
+    <Box w={width} ref={Ref}>
      <iframe
        src={code}
+        sandbox="allow-scripts allow-forms allow-popups allow-downloads allow-presentation allow-storage-access-by-user-activation"
+        referrerPolicy="no-referrer"
        style={{
          width: '100%',
          height: '100%',
-          minHeight: '40vh',
+          minHeight: '70vh',
          border: 'none'
        }}
      />
@ -18,4 +21,4 @@ const MermaidBlock = ({ code }: { code: string }) => {
  );
 };

-export default MermaidBlock;
+export default IframeBlock;
--- a/projects/app/src/components/Markdown/codeBlock/iframe-html.tsx
+++ b/projects/app/src/components/Markdown/codeBlock/iframe-html.tsx
@ -0,0 +1,25 @@
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import { Box } from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useMarkdownWidth } from '../hooks';
+
+const MermaidBlock = ({ code }: { code: string }) => {
+  const { width, Ref } = useMarkdownWidth();
+  return (
+    <Box w={width} ref={Ref}>
+      <iframe
+        src={code}
+        sandbox="allow-scripts allow-forms allow-popups allow-downloads allow-presentation allow-storage-access-by-user-activation"
+        referrerPolicy="no-referrer"
+        style={{
+          width: '100%',
+          height: '100%',
+          minHeight: '70vh',
+          border: 'none'
+        }}
+      />
+    </Box>
+  );
+};
+
+export default MermaidBlock;
--- a/projects/app/src/components/Markdown/hooks.ts
+++ b/projects/app/src/components/Markdown/hooks.ts
@ -0,0 +1,34 @@
+import { useScreen } from '@fastgpt/web/hooks/useScreen';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useMarkdownWidth = () => {
+  const Ref = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(400);
+  const { screenWidth } = useScreen();
+  const { isPc } = useSystem();
+
+  const findMarkdownDom = useCallback(() => {
+    if (!Ref.current) return;
+
+    // 一直找到 parent = markdown 的元素
+    let parent = Ref.current?.parentElement;
+    while (parent && !parent.className.includes('chat-box-card')) {
+      parent = parent.parentElement;
+    }
+
+    const ChatItemDom = parent?.parentElement;
+    const clientWidth = ChatItemDom?.clientWidth ? ChatItemDom.clientWidth - (isPc ? 90 : 60) : 500;
+    setWidth(clientWidth);
+    return parent?.parentElement;
+  }, [isPc]);
+
+  useEffect(() => {
+    findMarkdownDom();
+  }, [findMarkdownDom, screenWidth, Ref.current]);
+
+  return {
+    Ref,
+    width
+  };
+};
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx
@ -157,10 +157,10 @@ const ButtonEdge = (props: EdgeProps) => {
            position={'absolute'}
            transform={`translate(-55%, -50%) translate(${labelX}px,${labelY}px)`}
            pointerEvents={'all'}
-            w={'17px'}
-            h={'17px'}
+            w={'18px'}
+            h={'18px'}
            bg={'white'}
-            borderRadius={'17px'}
+            borderRadius={'18px'}
            cursor={'pointer'}
            zIndex={defaultZIndex + 1000}
            onClick={() => onDelConnect(id)}
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/Container.tsx
@ -6,7 +6,7 @@ const Container = ({ children, ...props }: BoxProps) => {
  return (
    <Flex
      flexDirection={'column'}
-      mx={4}
+      mx={3}
      p={4}
      position={'relative'}
      bg={'myGray.50'}
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeAnswer.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeAnswer.tsx
@ -16,7 +16,7 @@ const NodeAnswer = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
    const { isTool, commonInputs } = splitToolInputs(inputs, nodeId);

    return (
-      <NodeCard minW={'400px'} selected={selected} {...data}>
+      <NodeCard selected={selected} {...data}>
        <Container>
          {isTool && (
            <>
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeCQNode.tsx
@ -99,7 +99,7 @@ const NodeCQNode = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                    nodeId={nodeId}
                    handleId={getHandleId(nodeId, 'source', item.key)}
                    position={Position.Right}
-                    translate={[36, 0]}
+                    translate={[34, 0]}
                  />
                </Box>
              </Box>
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/ListItem.tsx
@ -266,7 +266,7 @@ const ListItem = ({
            nodeId={nodeId}
            handleId={handleId}
            position={Position.Right}
-            translate={[3, 0]}
+            translate={[5, 0]}
          />
        )}
      </Flex>
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeIfElse/index.tsx
@ -98,7 +98,7 @@ const NodeIfElse = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
              nodeId={nodeId}
              handleId={elseHandleId}
              position={Position.Right}
-              translate={[20, 0]}
+              translate={[18, 0]}
            />
          </Flex>
        </Container>
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeSystemConfig.tsx
@ -52,7 +52,6 @@ const NodeUserGuide = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
    return (
      <>
        <NodeCard
-          minW={'420px'}
          selected={selected}
          menuForbid={{
            debug: true,
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeUserSelect.tsx
@ -63,9 +63,8 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                    {t('common:option') + (i + 1)}
                  </Box>
                </HStack>
-                <Box position={'relative'}>
+                <Box position={'relative'} mt={1}>
                  <Input
-                    mt={1}
                    defaultValue={item.value}
                    bg={'white'}
                    fontSize={'sm'}
@ -94,7 +93,7 @@ const NodeUserSelect = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                    nodeId={nodeId}
                    handleId={getHandleId(nodeId, 'source', item.key)}
                    position={Position.Right}
-                    translate={[26, 0]}
+                    translate={[34, 0]}
                  />
                </Box>
              </Box>
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeWorkflowStart.tsx
@ -65,7 +65,6 @@ const NodeStart = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
  const Render = useMemo(() => {
    return (
      <NodeCard
-        minW={'420px'}
        selected={selected}
        menuForbid={{
          copy: true,
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx
@ -52,7 +52,7 @@ export const ConnectionSourceHandle = ({
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Right}
-          translate={[2, 0]}
+          translate={[4, 0]}
        />
      );
    })();
@ -69,7 +69,7 @@ export const ConnectionSourceHandle = ({
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Left}
-          translate={[-6, 0]}
+          translate={[-8, 0]}
        />
      );
    })();
@ -92,7 +92,7 @@ export const ConnectionSourceHandle = ({
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Top}
-          translate={[0, -2]}
+          translate={[0, -5]}
        />
      );
    })();
@ -108,7 +108,7 @@ export const ConnectionSourceHandle = ({
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Bottom}
-          translate={[0, 2]}
+          translate={[0, 5]}
        />
      );
    })();
@ -194,7 +194,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Left}
-          translate={[-2, 0]}
+          translate={[-4, 0]}
          showHandle={showHandle}
        />
      );
@ -209,7 +209,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Right}
-          translate={[2, 0]}
+          translate={[4, 0]}
          showHandle={showHandle}
        />
      );
@ -224,7 +224,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Top}
-          translate={[0, -2]}
+          translate={[0, -5]}
          showHandle={showHandle}
        />
      );
@ -239,7 +239,7 @@ export const ConnectionTargetHandle = React.memo(function ConnectionTargetHandle
          nodeId={nodeId}
          handleId={handleId}
          position={Position.Bottom}
-          translate={[0, 2]}
+          translate={[0, 5]}
          showHandle={showHandle}
        />
      );
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/index.tsx
@ -112,7 +112,15 @@ const MySourceHandle = React.memo(function MySourceHandle({
        position={position}
        isConnectableEnd={false}
      >
-        {showAddIcon && <MyIcon name={'edgeAdd'} pointerEvents={'none'} />}
+        {showAddIcon && (
+          <MyIcon
+            name={'edgeAdd'}
+            color={'primary.500'}
+            pointerEvents={'none'}
+            w={'14px'}
+            h={'14px'}
+          />
+        )}
      </Handle>
    );
  }, [handleId, position, showAddIcon, styles, transform]);
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/style.tsx
@ -1,8 +1,8 @@
 export const primaryColor = '#487FFF';
 export const lowPrimaryColor = '#94B5FF';
 export const handleSize = {
-  width: '18px',
-  height: '18px'
+  width: '20px',
+  height: '20px'
 };

 export const sourceCommonStyle = {
@ -12,16 +12,16 @@ export const sourceCommonStyle = {
 };
 export const handleConnectedStyle = {
  borderColor: lowPrimaryColor,
-  width: '14px',
-  height: '14px'
+  width: '16px',
+  height: '16px'
 };
 export const handleHighLightStyle = {
  borderColor: primaryColor,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
-  width: '18px',
-  height: '18px'
+  width: '20px',
+  height: '20px'
 };

 export default function Dom() {
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx
@ -150,7 +150,7 @@ const NodeCard = (props: Props) => {
      <Box position={'relative'}>
        {/* debug */}
        {showHeader && (
-          <Box px={4} pt={4}>
+          <Box px={3} pt={4}>
            {/* tool target handle */}
            <ToolTargetHandle show={showToolHandle} nodeId={nodeId} />

@ -667,7 +667,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({

    return !!debugResult && !!statusData ? (
      <>
-        <Flex px={4} bg={statusData.bg} borderTopRadius={'md'} py={3}>
+        <Flex px={3} bg={statusData.bg} borderTopRadius={'md'} py={3}>
          <MyIcon name={statusData.icon as any} w={'16px'} mr={2} />
          <Box color={'myGray.900'} fontWeight={'bold'} flex={'1 0 0'}>
            {statusData.text}
@ -708,7 +708,7 @@ const NodeDebugResponse = React.memo(function NodeDebugResponse({
            border={'base'}
          >
            {/* Status header */}
-            <Flex h={'54x'} px={4} py={3} alignItems={'center'}>
+            <Flex h={'54x'} px={3} py={3} alignItems={'center'}>
              <MyIcon mr={1} name={'core/workflow/debugResult'} w={'20px'} color={'primary.600'} />
              <Box fontWeight={'bold'} flex={'1'}>
                {t('common:core.workflow.debug.Run result')}
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/Label.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/RenderOutput/Label.tsx
@ -1,5 +1,5 @@
 import { FlowNodeOutputItemType } from '@fastgpt/global/core/workflow/type/io.d';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTranslation } from 'next-i18next';
 import { Box, Flex } from '@chakra-ui/react';
 import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
@ -41,7 +41,7 @@ const OutputLabel = ({ nodeId, output }: { nodeId: string; output: FlowNodeOutpu
        <SourceHandle
          nodeId={nodeId}
          handleId={getHandleId(nodeId, 'source', output.key)}
-          translate={[26, 0]}
+          translate={[34, 0]}
          position={Position.Right}
        />
      )}