perf: search key refresh parentId (#5530)

This commit is contained in:
Archer
2025-08-26 11:30:02 +08:00
committed by GitHub
parent 830eb19055
commit 3b25bf57c4
9 changed files with 73 additions and 71 deletions

View File

@@ -24,9 +24,11 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
const {
templateType,
parentId,
searchKey,
setSearchKey,
templatesIsLoading,
templates,
loadNodeTemplates,
onUpdateTemplateType,
onUpdateParentId
} = useNodeTemplates();
@@ -79,8 +81,10 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
<NodeTemplateListHeader
onClose={onClose}
templateType={templateType}
loadNodeTemplates={loadNodeTemplates}
parentId={parentId || ''}
onUpdateTemplateType={onUpdateTemplateType}
parentId={parentId}
searchKey={searchKey}
setSearchKey={setSearchKey}
onUpdateParentId={onUpdateParentId}
/>
<NodeTemplateList

View File

@@ -24,9 +24,11 @@ const NodeTemplatesPopover = () => {
const {
templateType,
parentId,
searchKey,
setSearchKey,
templatesIsLoading,
templates,
loadNodeTemplates,
onUpdateTemplateType,
onUpdateParentId
} = useNodeTemplates();
@@ -116,9 +118,11 @@ const NodeTemplatesPopover = () => {
<NodeTemplateListHeader
isPopover={true}
templateType={templateType}
loadNodeTemplates={loadNodeTemplates}
parentId={parentId || ''}
onUpdateTemplateType={onUpdateTemplateType}
parentId={parentId}
onUpdateParentId={onUpdateParentId}
searchKey={searchKey}
setSearchKey={setSearchKey}
/>
<NodeTemplateList
onAddNode={onAddNode}

View File

@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
import type { Dispatch, SetStateAction } from 'react';
import React from 'react';
import { Box, Flex, IconButton, Input, InputGroup, InputLeftElement } from '@chakra-ui/react';
import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -9,7 +10,7 @@ import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { getSystemPluginPaths } from '@/web/core/app/api/plugin';
import { getAppFolderPath } from '@/web/core/app/api/app';
import FolderPath from '@/components/common/folder/Path';
import { useDebounceEffect } from 'ahooks';
import type { ParentIdType } from '@fastgpt/global/common/parentFolder/type';
export enum TemplateTypeEnum {
'basic' = 'basic',
@@ -21,12 +22,10 @@ export type NodeTemplateListHeaderProps = {
onClose?: () => void;
isPopover?: boolean;
templateType: TemplateTypeEnum;
parentId: string;
loadNodeTemplates: (params: {
parentId?: string;
type?: TemplateTypeEnum;
searchVal?: string;
}) => Promise<any>;
parentId: ParentIdType;
searchKey: string;
setSearchKey: Dispatch<SetStateAction<string>>;
onUpdateTemplateType: (type: TemplateTypeEnum) => void;
onUpdateParentId: (parentId: string) => void;
};
@@ -35,33 +34,15 @@ const NodeTemplateListHeader = ({
isPopover = false,
templateType,
parentId,
loadNodeTemplates,
searchKey,
setSearchKey,
onUpdateTemplateType,
onUpdateParentId
}: NodeTemplateListHeaderProps) => {
const { t } = useTranslation();
const { feConfigs } = useSystemStore();
const router = useRouter();
const [searchKey, setSearchKey] = useState('');
useEffect(() => {
setSearchKey('');
}, [templateType]);
useDebounceEffect(
() => {
loadNodeTemplates({
type: templateType,
parentId: '',
searchVal: searchKey
});
},
[searchKey, loadNodeTemplates, templateType],
{
wait: 300
}
);
// Get paths
const { data: paths = [] } = useRequest2(
() => {
@@ -80,7 +61,7 @@ const NodeTemplateListHeader = ({
{/* Tabs */}
<Flex flex={'1 0 0'} alignItems={'center'} gap={2}>
<Box flex={'1 0 0'}>
<FillRowTabs
<FillRowTabs<TemplateTypeEnum>
list={[
{
icon: 'core/modules/basicNode',
@@ -109,10 +90,7 @@ const NodeTemplateListHeader = ({
: {})}
value={templateType}
onChange={(e) => {
loadNodeTemplates({
type: e as TemplateTypeEnum,
parentId: ''
});
onUpdateTemplateType(e);
}}
/>
</Box>

View File

@@ -1,4 +1,4 @@
import { useState, useMemo, useCallback } from 'react';
import { useState, useMemo, useCallback, useRef } from 'react';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import type { NodeTemplateListItemType } from '@fastgpt/global/core/workflow/type/node';
@@ -8,10 +8,15 @@ import { TemplateTypeEnum } from './header';
import { useContextSelector } from 'use-context-selector';
import { WorkflowContext } from '../../../context';
import type { ParentIdType } from '@fastgpt/global/common/parentFolder/type';
import { useDebounceEffect } from 'ahooks';
export const useNodeTemplates = () => {
const { feConfigs } = useSystemStore();
const [templateType, setTemplateType] = useState(TemplateTypeEnum.basic);
const [searchKey, setSearchKey] = useState('');
const searchKeyLock = useRef(false);
const [parentId, setParentId] = useState<ParentIdType>('');
const basicNodeTemplates = useContextSelector(WorkflowContext, (v) => v.basicNodeTemplates);
@@ -72,9 +77,9 @@ export const useNodeTemplates = () => {
runAsync: loadNodeTemplates
} = useRequest2(
async ({
parentId = '',
parentId,
type = templateType,
searchVal = ''
searchVal
}: {
parentId?: ParentIdType;
type?: TemplateTypeEnum;
@@ -96,23 +101,40 @@ export const useNodeTemplates = () => {
}
},
{
onSuccess(res, [{ parentId = '', type = templateType }]) {
setParentId(parentId);
setTemplateType(type);
},
refreshDeps: [templateType]
onSuccess() {
searchKeyLock.current = false;
}
}
);
const onUpdateParentId = useCallback(
(parentId: ParentIdType) => {
loadNodeTemplates({
parentId
});
useDebounceEffect(
() => {
if (searchKeyLock.current) {
return;
}
loadNodeTemplates({ parentId, searchVal: searchKey });
},
[loadNodeTemplates]
[searchKey],
{
wait: 300
}
);
const onUpdateParentId = useCallback((parentId: ParentIdType) => {
searchKeyLock.current = true;
setSearchKey('');
setParentId(parentId);
loadNodeTemplates({ parentId });
}, []);
const onUpdateTemplateType = useCallback((type: TemplateTypeEnum) => {
searchKeyLock.current = true;
setSearchKey('');
setParentId('');
setTemplateType(type);
loadNodeTemplates({ type });
}, []);
const templates = useMemo(() => {
if (templateType === TemplateTypeEnum.basic) {
return basicNodes || [];
@@ -125,7 +147,9 @@ export const useNodeTemplates = () => {
parentId,
templatesIsLoading,
templates,
loadNodeTemplates,
onUpdateParentId
onUpdateParentId,
onUpdateTemplateType,
searchKey,
setSearchKey
};
};

View File

@@ -52,10 +52,8 @@ const ListItem = () => {
content: t('app:move.hint')
});
const { myApps, loadMyApps, onUpdateApp, setMoveAppId, folderDetail } = useContextSelector(
AppListContext,
(v) => v
);
const { myApps, loadMyApps, onUpdateApp, setMoveAppId, folderDetail, setSearchKey } =
useContextSelector(AppListContext, (v) => v);
const [editedApp, setEditedApp] = useState<EditResourceInfoFormType>();
const [editHttpPlugin, setEditHttpPlugin] = useState<EditHttpPluginProps>();
@@ -185,6 +183,7 @@ const ListItem = () => {
}}
onClick={() => {
if (AppFolderTypeList.includes(app.type)) {
setSearchKey('');
router.push({
query: {
...router.query,

View File

@@ -41,7 +41,6 @@ async function handler(
}))
.filter((item) => {
if (searchKey) {
if (item.isFolder) return false;
const regx = new RegExp(`${replaceRegChars(searchKey)}`, 'i');
return regx.test(String(item.name)) || regx.test(String(item.intro || ''));
}

View File

@@ -56,7 +56,8 @@ const MyApps = ({ MenuIcon }: { MenuIcon: JSX.Element }) => {
isFetchingApps,
folderDetail,
refetchFolderDetail,
setSearchKey
setSearchKey,
searchKey
} = useContextSelector(AppListContext, (v) => v);
const { userInfo } = useUserStore();
@@ -164,6 +165,7 @@ const MyApps = ({ MenuIcon }: { MenuIcon: JSX.Element }) => {
{isPc && (
<SearchInput
maxW={['auto', '250px']}
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
placeholder={t('app:search_app')}
maxLength={30}
@@ -244,6 +246,7 @@ const MyApps = ({ MenuIcon }: { MenuIcon: JSX.Element }) => {
{
<SearchInput
maxW={['auto', '250px']}
value={searchKey}
onChange={(e) => setSearchKey(e.target.value)}
placeholder={t('app:search_app')}
maxLength={30}