mirror of
https://github.com/labring/FastGPT.git
synced 2025-10-15 07:31:19 +00:00
perf: search key refresh parentId (#5530)
This commit is contained in:
@@ -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
|
||||
|
@@ -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}
|
||||
|
@@ -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>
|
||||
|
@@ -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
|
||||
};
|
||||
};
|
||||
|
@@ -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,
|
||||
|
@@ -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 || ''));
|
||||
}
|
||||
|
@@ -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}
|
||||
|
Reference in New Issue
Block a user