4.8.13 test (#3085)

* perf: workflow node ui * chat iframe url
2024-11-07 12:03:21 +08:00
parent f58dba2eda
commit 45aa2e7374
18 changed files with 108 additions and 41 deletions
--- 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}
        />
      )}