perf: model framwork

src/pages/model/list/components/CreateModel.tsx

@@ -1,138 +0,0 @@
-import React, { Dispatch, useState, useCallback, useMemo } from 'react';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  ModalCloseButton,
-  FormControl,
-  FormErrorMessage,
-  Button,
-  useToast,
-  Input,
-  Select,
-  Box
-} from '@chakra-ui/react';
-import { useForm } from 'react-hook-form';
-import { postCreateModel } from '@/api/model';
-import type { ModelSchema } from '@/types/mongoSchema';
-import { modelList } from '@/constants/model';
-import { formatPrice } from '@/utils/user';
-
-interface CreateFormType {
-  name: string;
-  serviceModelName: string;
-}
-
-const CreateModel = ({
-  setCreateModelOpen,
-  onSuccess
-}: {
-  setCreateModelOpen: Dispatch<boolean>;
-  onSuccess: Dispatch<ModelSchema>;
-}) => {
-  const [requesting, setRequesting] = useState(false);
-  const [refresh, setRefresh] = useState(false);
-  const toast = useToast({
-    duration: 2000,
-    position: 'top'
-  });
-  const {
-    getValues,
-    register,
-    handleSubmit,
-    formState: { errors }
-  } = useForm<CreateFormType>({
-    defaultValues: {
-      serviceModelName: modelList[0].model
-    }
-  });
-
-  const handleCreateModel = useCallback(
-    async (data: CreateFormType) => {
-      setRequesting(true);
-      try {
-        const res = await postCreateModel(data);
-        toast({
-          title: '创建成功',
-          status: 'success'
-        });
-        onSuccess(res);
-        setCreateModelOpen(false);
-      } catch (err: any) {
-        toast({
-          title: typeof err === 'string' ? err : err.message || '出现了意外',
-          status: 'error'
-        });
-      }
-      setRequesting(false);
-    },
-    [onSuccess, setCreateModelOpen, toast]
-  );
-
-  return (
-    <>
-      <Modal isOpen={true} onClose={() => setCreateModelOpen(false)}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>创建模型</ModalHeader>
-          <ModalCloseButton />
-
-          <ModalBody>
-            <FormControl mb={8} isInvalid={!!errors.name}>
-              <Input
-                placeholder="模型名称"
-                {...register('name', {
-                  required: '模型名不能为空'
-                })}
-              />
-              <FormErrorMessage position={'absolute'} fontSize="xs">
-                {!!errors.name && errors.name.message}
-              </FormErrorMessage>
-            </FormControl>
-            <FormControl isInvalid={!!errors.serviceModelName}>
-              <Select
-                placeholder="选择基础模型类型"
-                {...register('serviceModelName', {
-                  required: '底层模型不能为空',
-                  onChange() {
-                    setRefresh(!refresh);
-                  }
-                })}
-              >
-                {modelList.map((item) => (
-                  <option key={item.model} value={item.model}>
-                    {item.name}
-                  </option>
-                ))}
-              </Select>
-              <FormErrorMessage position={'absolute'} fontSize="xs">
-                {!!errors.serviceModelName && errors.serviceModelName.message}
-              </FormErrorMessage>
-            </FormControl>
-            <Box mt={3} textAlign={'center'} fontSize={'sm'} color={'blackAlpha.600'}>
-              {formatPrice(
-                modelList.find((item) => item.model === getValues('serviceModelName'))?.price || 0,
-                1000
-              )}
-              元/1K tokens(包括上下文和标点符号)
-            </Box>
-          </ModalBody>
-
-          <ModalFooter>
-            <Button mr={3} colorScheme={'gray'} onClick={() => setCreateModelOpen(false)}>
-              取消
-            </Button>
-            <Button isLoading={requesting} onClick={handleSubmit(handleCreateModel)}>
-              确认创建
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-};
-
-export default CreateModel;

src/pages/model/list/components/ModelPhoneList.tsx

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import { Box, Button, Flex, Tag } from '@chakra-ui/react';
 import type { ModelSchema } from '@/types/mongoSchema';
 import { formatModelStatus } from '@/constants/model';
-import dayjs from 'dayjs';
 import { useRouter } from 'next/router';
+import { ChatModelMap } from '@/constants/model';
 
 const ModelPhoneList = ({
   models,
@@ -42,12 +42,12 @@ const ModelPhoneList = ({
             </Tag>
           </Flex>
           <Flex mt={5}>
-            <Box flex={'0 0 100px'}>最后更新时间: </Box>
-            <Box color={'blackAlpha.500'}>{dayjs(model.updateTime).format('YYYY-MM-DD HH:mm')}</Box>
+            <Box flex={'0 0 100px'}>对话模型: </Box>
+            <Box color={'blackAlpha.500'}>{ChatModelMap[model.chat.chatModel]}</Box>
           </Flex>
           <Flex mt={5}>
-            <Box flex={'0 0 100px'}>AI模型: </Box>
-            <Box color={'blackAlpha.500'}>{model.service.modelName}</Box>
+            <Box flex={'0 0 100px'}>模型温度: </Box>
+            <Box color={'blackAlpha.500'}>{model.chat.temperature}</Box>
           </Flex>
           <Flex mt={5} justifyContent={'flex-end'}>
             <Button

src/pages/model/list/components/ModelTable.tsx

@@ -13,10 +13,9 @@ import {
   Box
 } from '@chakra-ui/react';
 import { formatModelStatus } from '@/constants/model';
-import dayjs from 'dayjs';
 import type { ModelSchema } from '@/types/mongoSchema';
 import { useRouter } from 'next/router';
-import { modelList } from '@/constants/model';
+import { ChatModelMap } from '@/constants/model';
 
 const ModelTable = ({
   models = [],
@@ -33,18 +32,18 @@ const ModelTable = ({
       dataIndex: 'name'
     },
     {
-      title: '模型类型',
+      title: '对话模型',
       key: 'service',
       render: (model: ModelSchema) => (
         <Box fontWeight={'bold'} whiteSpace={'pre-wrap'} maxW={'200px'}>
-          {modelList.find((item) => item.model === model.service.modelName)?.name}
+          {ChatModelMap[model.chat.chatModel]}
         </Box>
       )
     },
     {
-      title: '最后更新时间',
-      key: 'updateTime',
-      render: (item: ModelSchema) => dayjs(item.updateTime).format('YYYY-MM-DD HH:mm')
+      title: '温度',
+      key: 'temperature',
+      render: (model: ModelSchema) => <>{model.chat.temperature}</>
     },
     {
       title: '状态',

src/pages/model/list/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Box, Button, Flex, Card } from '@chakra-ui/react';
 import type { ModelSchema } from '@/types/mongoSchema';
 import { useRouter } from 'next/router';
@@ -7,30 +7,37 @@ 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'));
+import { postCreateModel } from '@/api/model';
 
 const modelList = () => {
   const { toast } = useToast();
   const { isPc } = useScreen();
   const router = useRouter();
-  const { myModels, setMyModels, getMyModels } = useUserStore();
-  const [openCreateModel, setOpenCreateModel] = useState(false);
+  const { myModels, getMyModels } = useUserStore();
   const { Loading, setIsLoading } = useLoading();
 
   /* 加载模型 */
   const { isLoading } = useQuery(['loadModels'], getMyModels);
 
-  /* 创建成功回调 */
-  const createModelSuccess = useCallback(
-    (data: ModelSchema) => {
-      setMyModels([data, ...myModels]);
-    },
-    [myModels, setMyModels]
-  );
+  const handleCreateModel = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const id = await postCreateModel({ name: `模型${myModels.length}` });
+      toast({
+        title: '创建成功',
+        status: 'success'
+      });
+      router.push(`/model/detail?modelId=${id}`);
+    } catch (err: any) {
+      toast({
+        title: typeof err === 'string' ? err : err.message || '出现了意外',
+        status: 'error'
+      });
+    }
+    setIsLoading(false);
+  }, [myModels.length, router, setIsLoading, toast]);
 
   /* 点前往聊天预览页 */
   const handlePreviewChat = useCallback(
@@ -61,7 +68,7 @@ const modelList = () => {
             模型列表
           </Box>
 
-          <Button flex={'0 0 145px'} variant={'outline'} onClick={() => setOpenCreateModel(true)}>
+          <Button flex={'0 0 145px'} variant={'outline'} onClick={handleCreateModel}>
             新建模型
           </Button>
         </Flex>
@@ -74,10 +81,6 @@ const modelList = () => {
           <ModelPhoneList models={myModels} handlePreviewChat={handlePreviewChat} />
         )}
       </Box>
-      {/* 创建弹窗 */}
-      {openCreateModel && (
-        <CreateModel setCreateModelOpen={setOpenCreateModel} onSuccess={createModelSuccess} />
-      )}
 
       <Loading loading={isLoading} />
     </Box>