91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import { Box, Button, Flex, Card } from '@chakra-ui/react';
|
|
import { getChatSiteId } from '@/api/chat';
|
|
import type { ModelSchema } from '@/types/mongoSchema';
|
|
import { useRouter } from 'next/router';
|
|
import ModelTable from './components/ModelTable';
|
|
import ModelPhoneList from './components/ModelPhoneList';
|
|
import { useScreen } from '@/hooks/useScreen';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { useLoading } from '@/hooks/useLoading';
|
|
import dynamic from 'next/dynamic';
|
|
import { useToast } from '@/hooks/useToast';
|
|
import { useUserStore } from '@/store/user';
|
|
|
|
const CreateModel = dynamic(() => import('./components/CreateModel'));
|
|
|
|
const modelList = () => {
|
|
const { toast } = useToast();
|
|
const { isPc } = useScreen();
|
|
const router = useRouter();
|
|
const { myModels, setMyModels, getMyModels } = useUserStore();
|
|
const [openCreateModel, setOpenCreateModel] = useState(false);
|
|
const { Loading, setIsLoading } = useLoading();
|
|
|
|
/* 加载模型 */
|
|
const { isLoading } = useQuery(['loadModels'], getMyModels);
|
|
|
|
/* 创建成功回调 */
|
|
const createModelSuccess = useCallback(
|
|
(data: ModelSchema) => {
|
|
setMyModels([data, ...myModels]);
|
|
},
|
|
[myModels, setMyModels]
|
|
);
|
|
|
|
/* 点前往聊天预览页 */
|
|
const handlePreviewChat = useCallback(
|
|
async (modelId: string) => {
|
|
setIsLoading(true);
|
|
try {
|
|
const chatId = await getChatSiteId(modelId);
|
|
|
|
router.push(`/chat?chatId=${chatId}`, undefined, {
|
|
shallow: true
|
|
});
|
|
} catch (err: any) {
|
|
console.log('error->', err);
|
|
toast({
|
|
title: err.message || '出现一些异常',
|
|
status: 'error'
|
|
});
|
|
}
|
|
setIsLoading(false);
|
|
},
|
|
[router, setIsLoading, toast]
|
|
);
|
|
|
|
return (
|
|
<Box position={'relative'}>
|
|
{/* 头部 */}
|
|
<Card px={6} py={3}>
|
|
<Flex alignItems={'center'} justifyContent={'space-between'}>
|
|
<Box fontWeight={'bold'} fontSize={'xl'}>
|
|
模型列表
|
|
</Box>
|
|
|
|
<Button flex={'0 0 145px'} variant={'outline'} onClick={() => setOpenCreateModel(true)}>
|
|
新建模型
|
|
</Button>
|
|
</Flex>
|
|
</Card>
|
|
{/* 表单 */}
|
|
<Box mt={5} position={'relative'}>
|
|
{isPc ? (
|
|
<ModelTable models={myModels} handlePreviewChat={handlePreviewChat} />
|
|
) : (
|
|
<ModelPhoneList models={myModels} handlePreviewChat={handlePreviewChat} />
|
|
)}
|
|
</Box>
|
|
{/* 创建弹窗 */}
|
|
{openCreateModel && (
|
|
<CreateModel setCreateModelOpen={setOpenCreateModel} onSuccess={createModelSuccess} />
|
|
)}
|
|
|
|
<Loading loading={isLoading} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default modelList;
|