Commit b0c6e687 by heheer Committed by GitHub

fix template creating (#5924)

parent 48c0c150
...@@ -5,9 +5,7 @@ import { ...@@ -5,9 +5,7 @@ import {
Flex, Flex,
Button, Button,
Input, Input,
Card,
SimpleGrid, SimpleGrid,
Collapse,
Table, Table,
Thead, Thead,
Tbody, Tbody,
...@@ -15,7 +13,8 @@ import { ...@@ -15,7 +13,8 @@ import {
Th, Th,
Td, Td,
TableContainer, TableContainer,
Center Center,
Fade
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { postCreateApp } from '@/web/core/app/api'; import { postCreateApp } from '@/web/core/app/api';
...@@ -33,7 +32,6 @@ import { ...@@ -33,7 +32,6 @@ import {
getTemplateMarketItemDetail, getTemplateMarketItemDetail,
getTemplateMarketItemList getTemplateMarketItemList
} from '@/web/core/app/api/template'; } from '@/web/core/app/api/template';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { createAppTypeMap } from '@/pageComponents/app/constants'; import { createAppTypeMap } from '@/pageComponents/app/constants';
import { serviceSideProps } from '@/web/common/i18n/utils'; import { serviceSideProps } from '@/web/common/i18n/utils';
import MyImage from '@fastgpt/web/components/common/Image/MyImage'; import MyImage from '@fastgpt/web/components/common/Image/MyImage';
...@@ -44,6 +42,7 @@ import type { McpToolConfigType } from '@fastgpt/global/core/app/tool/mcpTool/ty ...@@ -44,6 +42,7 @@ import type { McpToolConfigType } from '@fastgpt/global/core/app/tool/mcpTool/ty
import AppTypeCard from '@/pageComponents/app/create/AppTypeCard'; import AppTypeCard from '@/pageComponents/app/create/AppTypeCard';
import type { StoreSecretValueType } from '@fastgpt/global/common/secret/type'; import type { StoreSecretValueType } from '@fastgpt/global/common/secret/type';
import { useSystem } from '@fastgpt/web/hooks/useSystem'; import { useSystem } from '@fastgpt/web/hooks/useSystem';
import MyBox from '@fastgpt/web/components/common/MyBox';
type FormType = { type FormType = {
avatar: string; avatar: string;
...@@ -66,7 +65,6 @@ export type CreateAppType = ...@@ -66,7 +65,6 @@ export type CreateAppType =
const CreateAppsPage = () => { const CreateAppsPage = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { feConfigs } = useSystemStore();
const { isPc } = useSystem(); const { isPc } = useSystem();
const { query } = router; const { query } = router;
const { parentId, appType } = query; const { parentId, appType } = query;
...@@ -74,9 +72,10 @@ const CreateAppsPage = () => { ...@@ -74,9 +72,10 @@ const CreateAppsPage = () => {
const [selectedAppType, setSelectedAppType] = useState<CreateAppType>( const [selectedAppType, setSelectedAppType] = useState<CreateAppType>(
(appType as CreateAppType) || AppTypeEnum.workflow (appType as CreateAppType) || AppTypeEnum.workflow
); );
const [creatingTemplateId, setCreatingTemplateId] = useState<string | null>(null);
const isToolType = ToolTypeList.includes(selectedAppType); const isToolType = ToolTypeList.includes(selectedAppType);
const { data: templateData } = useRequest2( const { data: templateData, loading: isLoadingTemplates } = useRequest2(
() => getTemplateMarketItemList({ isQuickTemplate: true, type: selectedAppType }), () => getTemplateMarketItemList({ isQuickTemplate: true, type: selectedAppType }),
{ {
manual: false, manual: false,
...@@ -122,6 +121,10 @@ const CreateAppsPage = () => { ...@@ -122,6 +121,10 @@ const CreateAppsPage = () => {
{ avatar, name, createType, mcpUrl, mcpHeaderSecret, mcpToolList }: FormType, { avatar, name, createType, mcpUrl, mcpHeaderSecret, mcpToolList }: FormType,
templateId?: string templateId?: string
): Promise<string> => { ): Promise<string> => {
if (templateId) {
setCreatingTemplateId(templateId);
}
const appType = selectedAppType; const appType = selectedAppType;
const baseParams = { const baseParams = {
parentId: parentId as string, parentId: parentId as string,
...@@ -310,9 +313,10 @@ const CreateAppsPage = () => { ...@@ -310,9 +313,10 @@ const CreateAppsPage = () => {
/> />
</Flex> </Flex>
</Flex> </Flex>
<Fade in={!isLoadingTemplates && templateData?.list && templateData.list.length > 0}>
<SimpleGrid columns={[1, 3]} gridGap={2.5}> <SimpleGrid columns={[1, 3]} gridGap={2.5}>
{templateData.list.map((item) => ( {templateData.list.map((item) => (
<Card <MyBox
key={item.templateId} key={item.templateId}
p={4} p={4}
borderRadius={'10px'} borderRadius={'10px'}
...@@ -320,11 +324,17 @@ const CreateAppsPage = () => { ...@@ -320,11 +324,17 @@ const CreateAppsPage = () => {
borderColor={'myGray.200'} borderColor={'myGray.200'}
cursor={'pointer'} cursor={'pointer'}
boxShadow={'none'} boxShadow={'none'}
bg={'white'}
_hover={{ _hover={{
boxShadow: boxShadow:
'0 4px 10px 0 rgba(19, 51, 107, 0.08), 0 0 1px 0 rgba(19, 51, 107, 0.08)' '0 4px 10px 0 rgba(19, 51, 107, 0.08), 0 0 1px 0 rgba(19, 51, 107, 0.08)'
}} }}
onClick={handleSubmit((data) => onClickCreate(data, item.templateId))} isLoading={creatingTemplateId === item.templateId}
onClick={() => {
if (!creatingTemplateId) {
handleSubmit((data) => onClickCreate(data, item.templateId))();
}
}}
> >
<Box <Box
position={'relative'} position={'relative'}
...@@ -371,12 +381,10 @@ const CreateAppsPage = () => { ...@@ -371,12 +381,10 @@ const CreateAppsPage = () => {
<Box fontSize={'mini'} color={'myGray.500'} flex={1} noOfLines={2} mt={1}> <Box fontSize={'mini'} color={'myGray.500'} flex={1} noOfLines={2} mt={1}>
{t(item.intro as any)} {t(item.intro as any)}
</Box> </Box>
<Box fontSize={'mini'} color={'myGray.500'} mt={2}> </MyBox>
by {item.author || feConfigs.systemTitle}
</Box>
</Card>
))} ))}
</SimpleGrid> </SimpleGrid>
</Fade>
</Box> </Box>
)} )}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment