4.8.5 perf (#1854)

* update yml * perf: chat slider * perf: workflow name * i18n * fix: ts * fix: ts
2025-07-23 05:12:39 +00:00 · 2024-06-26 12:51:36 +08:00
parent 93b44fc8f5
commit e247545afa
15 changed files with 136 additions and 33 deletions
--- a/projects/app/src/components/common/folder/SelectOneResource.tsx
+++ b/projects/app/src/components/common/folder/SelectOneResource.tsx
@@ -136,7 +136,7 @@ const SelectOneResource = ({
                  </Flex>
                )}
                <Avatar ml={index !== 0 ? '0.5rem' : 0} src={item.avatar} w={'1.25rem'} />
-                <Box fontSize={['md', 'sm']} ml={2}>
+                <Box fontSize={['md', 'sm']} ml={2} className="textEllipsis">
                  {item.name}
                </Box>
              </Flex>
--- a/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
+++ b/projects/app/src/pages/app/detail/components/SimpleApp/AppCard.tsx
@@ -87,7 +87,7 @@ const AppCard = () => {
        >
          {appDetail.intro || t('core.app.tip.Add a intro to app')}
        </Box>
-        <HStack>
+        <HStack alignItems={'flex-end'}>
          <Button
            size={['sm', 'md']}
            variant={'whitePrimary'}
@@ -155,7 +155,7 @@ const AppCard = () => {
            colorSchema="gray"
            onClick={() => (appDetail.permission.hasManagePer ? onOpenInfoEdit() : undefined)}
          >
-            <PermissionIconText defaultPermission={appDetail.defaultPermission} fontSize={'md'} />
+            <PermissionIconText defaultPermission={appDetail.defaultPermission} />
          </MyTag>
        </HStack>
      </Box>
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx
@@ -29,6 +29,7 @@ import { ParentIdType } from '@fastgpt/global/common/parentFolder/type';
 import MyBox from '@fastgpt/web/components/common/MyBox';
 import FolderPath from '@/components/common/folder/Path';
 import { getAppFolderPath } from '@/web/core/app/api/app';
+import { useWorkflowUtils } from './hooks/useUtils';

 type ModuleTemplateListProps = {
  isOpen: boolean;
@@ -59,6 +60,13 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
    WorkflowContext,
    (v) => v
  );
+  const [pluginBuffer, setPluginBuffer] = useState<{
+    systemPlugin: FlowNodeTemplateType[];
+    teamPlugin: FlowNodeTemplateType[];
+  }>({
+    [TemplateTypeEnum.systemPlugin]: [],
+    [TemplateTypeEnum.teamPlugin]: []
+  });

  const [templateType, setTemplateType] = useState(TemplateTypeEnum.basic);

@@ -85,14 +93,34 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
        });
      }
      if (templateType === TemplateTypeEnum.systemPlugin) {
-        return getSystemPlugTemplates();
+        if (pluginBuffer.systemPlugin.length === 0) {
+          return getSystemPlugTemplates().then((res) => {
+            setPluginBuffer((state) => ({
+              ...state,
+              systemPlugin: res
+            }));
+            return res;
+          });
+        } else {
+          return pluginBuffer.systemPlugin;
+        }
      }
      if (templateType === TemplateTypeEnum.teamPlugin) {
-        return getTeamPlugTemplates({
-          parentId,
-          searchKey,
-          type: [AppTypeEnum.folder, AppTypeEnum.httpPlugin, AppTypeEnum.plugin]
-        });
+        if (pluginBuffer.teamPlugin.length === 0) {
+          return getTeamPlugTemplates({
+            parentId,
+            searchKey,
+            type: [AppTypeEnum.folder, AppTypeEnum.httpPlugin, AppTypeEnum.plugin]
+          }).then((res) => {
+            setPluginBuffer((state) => ({
+              ...state,
+              teamPlugin: res
+            }));
+            return res;
+          });
+        } else {
+          return pluginBuffer.teamPlugin;
+        }
      }
      return [];
    },
@@ -240,6 +268,7 @@ const RenderList = React.memo(function RenderList({
  const { toast } = useToast();
  const reactFlowWrapper = useContextSelector(WorkflowContext, (v) => v.reactFlowWrapper);
  const setNodes = useContextSelector(WorkflowContext, (v) => v.setNodes);
+  const { computedNewNodeName } = useWorkflowUtils();

  const formatTemplates = useMemo<nodeTemplateListType>(() => {
    const copy: nodeTemplateListType = JSON.parse(JSON.stringify(workflowNodeTemplateList(t)));
@@ -266,6 +295,8 @@ const RenderList = React.memo(function RenderList({
            setLoading(false);
            return res;
          }
+
+          // base node
          return { ...template };
        } catch (e) {
          toast({
@@ -284,7 +315,11 @@ const RenderList = React.memo(function RenderList({
      const node = nodeTemplate2FlowNode({
        template: {
          ...templateNode,
-          name: t(templateNode.name),
+          name: computedNewNodeName({
+            templateName: t(templateNode.name),
+            flowNodeType: templateNode.flowNodeType,
+            pluginId: templateNode.pluginId
+          }),
          intro: t(templateNode.intro || '')
        },
        position: { x: mouseX, y: mouseY - 20 },
@@ -301,7 +336,7 @@ const RenderList = React.memo(function RenderList({
          .concat(node)
      );
    },
-    [reactFlowWrapper, setLoading, setNodes, t, toast, x, y, zoom]
+    [computedNewNodeName, reactFlowWrapper, setLoading, setNodes, t, toast, x, y, zoom]
  );

  const Render = useMemo(() => {
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useKeyboard.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useKeyboard.tsx
@@ -6,11 +6,13 @@ import { Node } from 'reactflow';
 import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext, getWorkflowStore } from '../../context';
+import { useWorkflowUtils } from './useUtils';

 export const useKeyboard = () => {
  const { t } = useTranslation();
  const { setNodes, onSaveWorkflow } = useContextSelector(WorkflowContext, (v) => v);
  const { copyData } = useCopyData();
+  const { computedNewNodeName } = useWorkflowUtils();

  const [isDowningCtrl, setIsDowningCtrl] = useState(false);

@@ -56,6 +58,11 @@ export const useKeyboard = () => {
            id: nodeId,
            data: {
              ...item.data,
+              name: computedNewNodeName({
+                templateName: item.data?.name || '',
+                flowNodeType: item.data?.flowNodeType || '',
+                pluginId: item.data?.pluginId
+              }),
              nodeId
            },
            position: {
@@ -75,7 +82,7 @@ export const useKeyboard = () => {
          .concat(newNodes)
      );
    } catch (error) {}
-  }, [hasInputtingElement, setNodes]);
+  }, [computedNewNodeName, hasInputtingElement, setNodes]);

  const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useUtils.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useUtils.tsx
@@ -0,0 +1,42 @@
+import { useContextSelector } from 'use-context-selector';
+import { WorkflowContext } from '../../context';
+import { useTranslation } from 'next-i18next';
+import { useCallback } from 'react';
+import { FlowNodeTypeEnum } from '@fastgpt/global/core/workflow/node/constant';
+
+export const useWorkflowUtils = () => {
+  const { t } = useTranslation();
+  const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
+
+  const computedNewNodeName = useCallback(
+    ({
+      templateName,
+      flowNodeType,
+      pluginId
+    }: {
+      templateName: string;
+      flowNodeType: FlowNodeTypeEnum;
+      pluginId?: string;
+    }) => {
+      const nodeLength = nodeList.filter((node) => {
+        if (node.flowNodeType === flowNodeType) {
+          if (node.flowNodeType === FlowNodeTypeEnum.pluginModule) {
+            return node.pluginId === pluginId;
+          } else {
+            return true;
+          }
+        }
+      }).length;
+      return nodeLength > 0 ? `${templateName}#${nodeLength + 1}` : templateName;
+    },
+    [nodeList]
+  );
+
+  return {
+    computedNewNodeName
+  };
+};
+
+export default function Dom() {
+  return <></>;
+}
--- 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
@@ -27,6 +27,7 @@ import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useMount } from 'ahooks';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useWorkflowUtils } from '../../hooks/useUtils';

 type Props = FlowNodeItemType & {
  children?: React.ReactNode | React.ReactNode[] | string;
@@ -292,6 +293,7 @@ const MenuRender = React.memo(function MenuRender({

  const setNodes = useContextSelector(WorkflowContext, (v) => v.setNodes);
  const setEdges = useContextSelector(WorkflowContext, (v) => v.setEdges);
+  const { computedNewNodeName } = useWorkflowUtils();

  const onCopyNode = useCallback(
    (nodeId: string) => {
@@ -300,7 +302,11 @@ const MenuRender = React.memo(function MenuRender({
        if (!node) return state;
        const template = {
          avatar: node.data.avatar,
-          name: node.data.name,
+          name: computedNewNodeName({
+            templateName: node.data.name,
+            flowNodeType: node.data.flowNodeType,
+            pluginId: node.data.pluginId
+          }),
          intro: node.data.intro,
          flowNodeType: node.data.flowNodeType,
          inputs: node.data.inputs,
@@ -323,12 +329,13 @@ const MenuRender = React.memo(function MenuRender({
              inputs: template.inputs,
              outputs: template.outputs,
              version: template.version
-            }
+            },
+            selected: true
          })
        );
      });
    },
-    [setNodes]
+    [computedNewNodeName, setNodes]
  );
  const onDelNode = useCallback(
    (nodeId: string) => {
--- a/projects/app/src/pages/app/list/components/List.tsx
+++ b/projects/app/src/pages/app/list/components/List.tsx
@@ -36,6 +36,8 @@ const ConfigPerModal = dynamic(() => import('@/components/support/permission/Con
 import type { EditHttpPluginProps } from './HttpPluginEditModal';
 import { postCopyApp } from '@/web/core/app/api/app';
 import { getTeamMembers } from '@/web/support/user/team/api';
+import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
+import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 const HttpEditModal = dynamic(() => import('./HttpPluginEditModal'));

@@ -43,6 +45,8 @@ const ListItem = () => {
  const { t } = useTranslation();
  const { appT } = useI18n();
  const router = useRouter();
+  const { isPc } = useSystem();
+
  const { myApps, loadMyApps, onUpdateApp, setMoveAppId, folderDetail, appType } =
    useContextSelector(AppListContext, (v) => v);
  const [loadingAppId, setLoadingAppId] = useState<string>();
@@ -175,9 +179,6 @@ const ListItem = () => {
                  isFolder: app.type === AppTypeEnum.folder
                })}
              >
-                {/* <Box position={'absolute'} top={3.5} right={0}>
-                  <AppTypeTag type={app.type} />
-                </Box> */}
                <HStack>
                  <Avatar src={app.avatar} borderRadius={'md'} w={'1.5rem'} />
                  <Box flex={'1 0 0'} fontSize={'1.125rem'}>
@@ -188,7 +189,7 @@ const ListItem = () => {
                  </Box>
                </HStack>
                <Box
-                  flex={'1 0 80px'}
+                  flex={['1 0 60px', '1 0 80px']}
                  mt={3}
                  pr={8}
                  textAlign={'justify'}
@@ -219,10 +220,12 @@ const ListItem = () => {
                  </HStack>

                  <HStack>
-                    {/* <HStack spacing={0.5} className="time">
-                      <MyIcon name={'history'} w={'0.85rem'} />
-                      <Box>{formatTimeToChatTime(app.updateTime)}</Box>
-                    </HStack> */}
+                    {isPc && (
+                      <HStack spacing={0.5} className="time">
+                        <MyIcon name={'history'} w={'0.85rem'} />
+                        <Box>{formatTimeToChatTime(app.updateTime)}</Box>
+                      </HStack>
+                    )}
                    {app.permission.hasManagePer && (
                      <Box className="more" display={['', 'none']}>
                        <MyMenu
--- a/projects/app/src/pages/app/list/index.tsx
+++ b/projects/app/src/pages/app/list/index.tsx
@@ -144,7 +144,7 @@ const MyApps = () => {
              gap={5}
              display={'flex'}
              alignItems={'center'}
-              fontSize={'md'}
+              fontSize={['sm', 'md']}
              onChange={(e) => {
                router.push({
                  query: {
--- a/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
+++ b/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
@@ -159,7 +159,10 @@ const ChatHistorySlider = ({
        {!isPc && appId && (
          <LightRowTabs<TabEnum>
            flex={'1 0 0'}
-            mr={2}
+            mr={1}
+            inlineStyles={{
+              px: 1
+            }}
            list={[
              { label: t('core.chat.Recent use'), value: TabEnum.recently },
              { label: t('App'), value: TabEnum.app },
--- a/projects/app/src/web/core/workflow/utils.ts
+++ b/projects/app/src/web/core/workflow/utils.ts
@@ -58,9 +58,11 @@ export const nodeTemplate2FlowNode = ({
  };
 };
 export const storeNode2FlowNode = ({
-  item: storeNode
+  item: storeNode,
+  selected = false
 }: {
  item: StoreNodeItemType;
+  selected?: boolean;
 }): Node<FlowNodeItemType> => {
  // init some static data
  const template =
@@ -101,6 +103,7 @@ export const storeNode2FlowNode = ({
    id: storeNode.nodeId,
    type: storeNode.flowNodeType,
    data: moduleItem,
+    selected,
    position: storeNode.position || { x: 0, y: 0 }
  };
 };