doc gpt V0.2

src/api/chat.ts

@@ -0,0 +1,65 @@
+import { GET, POST, DELETE } from './request';
+import { ChatItemType, ChatSiteType, ChatSiteItemType } from '@/types/chat';
+
+/**
+ * 获取一个聊天框的ID
+ */
+export const getChatSiteId = (modelId: string) => GET<string>(`/chat/generate?modelId=${modelId}`);
+
+/**
+ * 获取初始化聊天内容
+ */
+export const getInitChatSiteInfo = (chatId: string, windowId: string = '') =>
+  GET<{
+    windowId: string;
+    chatSite: ChatSiteType;
+    history: ChatItemType[];
+  }>(`/chat/init?chatId=${chatId}&windowId=${windowId}`);
+
+/**
+ * 发送 GPT3 prompt
+ */
+export const postGPT3SendPrompt = ({
+  chatId,
+  prompt
+}: {
+  prompt: ChatSiteItemType[];
+  chatId: string;
+}) =>
+  POST<string>(`/chat/gpt3`, {
+    chatId,
+    prompt: prompt.map((item) => ({
+      obj: item.obj,
+      value: item.value
+    }))
+  });
+
+/**
+ * 预发 prompt 进行存储
+ */
+export const postChatGptPrompt = ({
+  prompt,
+  windowId,
+  chatId
+}: {
+  prompt: ChatSiteItemType;
+  windowId: string;
+  chatId: string;
+}) =>
+  POST<string>(`/chat/preChat`, {
+    windowId,
+    prompt: {
+      obj: prompt.obj,
+      value: prompt.value
+    },
+    chatId
+  });
+/* 获取 Chat 的 Event 对象，进行持续通信 */
+export const getChatGPTSendEvent = (chatId: string, windowId: string) =>
+  new EventSource(`/api/chat/chatGpt?chatId=${chatId}&windowId=${windowId}`);
+
+/**
+ * 删除最后一句
+ */
+export const delLastMessage = (windowId?: string) =>
+  windowId ? DELETE(`/chat/delLastMessage?windowId=${windowId}`) : null;

src/api/model.ts

@@ -0,0 +1,28 @@
+import { GET, POST, DELETE, PUT } from './request';
+import type { ModelType } from '@/types/model';
+import { ModelUpdateParams } from '@/types/model';
+import { TrainingItemType } from '../types/training';
+
+export const getMyModels = () => GET<ModelType[]>('/model/list');
+
+export const postCreateModel = (data: { name: string; serviceModelName: string }) =>
+  POST<ModelType>('/model/create', data);
+
+export const delModelById = (id: string) => DELETE(`/model/del?modelId=${id}`);
+
+export const getModelById = (id: string) => GET<ModelType>(`/model/detail?modelId=${id}`);
+
+export const putModelById = (id: string, data: ModelUpdateParams) =>
+  PUT(`/model/update?modelId=${id}`, data);
+
+export const postTrainModel = (id: string, form: FormData) =>
+  POST(`/model/train?modelId=${id}`, form, {
+    headers: {
+      'content-type': 'multipart/form-data'
+    }
+  });
+
+export const putModelTrainingStatus = (id: string) => PUT(`/model/putTrainStatus?modelId=${id}`);
+
+export const getModelTrainings = (id: string) =>
+  GET<TrainingItemType[]>(`/model/getTrainings?modelId=${id}`);

src/api/request.ts

@@ -0,0 +1,124 @@
+import axios, { Method, InternalAxiosRequestConfig, AxiosResponse } from 'axios';
+import { getToken, clearToken } from '@/utils/user';
+import { TOKEN_ERROR_CODE } from '@/constants/responseCode';
+
+interface ConfigType {
+  headers?: { [key: string]: string };
+  hold?: boolean;
+}
+interface ResponseDataType {
+  code: number;
+  message: string;
+  data: any;
+}
+
+/**
+ * 请求开始
+ */
+function requestStart(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig {
+  if (config.headers) {
+    config.headers.Authorization = getToken();
+  }
+
+  return config;
+}
+
+/**
+ * 请求成功,检查请求头
+ */
+function responseSuccess(response: AxiosResponse<ResponseDataType>) {
+  return response;
+}
+/**
+ * 响应数据检查
+ */
+function checkRes(data: ResponseDataType) {
+  if (data === undefined) {
+    console.log(data, 'data is empty');
+    return Promise.reject('服务器异常');
+  } else if (data.code < 200 || data.code >= 400) {
+    return Promise.reject(data.message);
+  }
+  return data.data;
+}
+
+/**
+ * 响应错误
+ */
+function responseError(err: any) {
+  console.error('请求错误', err);
+
+  if (!err) {
+    return Promise.reject('未知错误');
+  }
+  if (typeof err === 'string') {
+    return Promise.reject(err);
+  }
+  if (err.response) {
+    // 有报错响应
+    const res = err.response;
+    /* token过期,判断请求token与本地是否相同，若不同需要重发 */
+    if (res.data.code in TOKEN_ERROR_CODE) {
+      clearToken();
+      return Promise.reject('token过期，重新登录');
+    }
+  }
+  return Promise.reject('未知错误');
+}
+
+/* 创建请求实例 */
+const instance = axios.create({
+  timeout: 60000, // 超时时间
+  headers: {
+    'content-type': 'application/json'
+  }
+});
+
+/* 请求拦截 */
+instance.interceptors.request.use(requestStart, (err) => Promise.reject(err));
+/* 响应拦截 */
+instance.interceptors.response.use(responseSuccess, (err) => Promise.reject(err));
+
+function request(url: string, data: any, config: ConfigType, method: Method): any {
+  /* 去空 */
+  for (const key in data) {
+    if (data[key] === null || data[key] === undefined) {
+      delete data[key];
+    }
+  }
+
+  return instance
+    .request({
+      baseURL: '/api',
+      url,
+      method,
+      data: method === 'GET' ? null : data,
+      params: method === 'GET' ? data : null, // get请求不携带data，params放在url上
+      ...config // 用户自定义配置，可以覆盖前面的配置
+    })
+    .then((res) => checkRes(res.data))
+    .catch((err) => responseError(err));
+}
+
+/**
+ * api请求方式
+ * @param {String} url
+ * @param {Any} params
+ * @param {Object} config
+ * @returns
+ */
+export function GET<T>(url: string, params = {}, config: ConfigType = {}): Promise<T> {
+  return request(url, params, config, 'GET');
+}
+
+export function POST<T>(url: string, data = {}, config: ConfigType = {}): Promise<T> {
+  return request(url, data, config, 'POST');
+}
+
+export function PUT<T>(url: string, data = {}, config: ConfigType = {}): Promise<T> {
+  return request(url, data, config, 'PUT');
+}
+
+export function DELETE<T>(url: string, config: ConfigType = {}): Promise<T> {
+  return request(url, {}, config, 'DELETE');
+}

src/api/response/user.d.ts

@@ -0,0 +1,5 @@
+import type { UserType } from '@/types/user';
+export interface ResLogin {
+  token: string;
+  user: UserType;
+}

src/api/user.ts

@@ -0,0 +1,48 @@
+import { GET, POST, PUT } from './request';
+import { createHashPassword } from '@/utils/tools';
+import { ResLogin } from './response/user';
+import { EmailTypeEnum } from '@/constants/common';
+import { UserType, UserUpdateParams } from '@/types/user';
+
+export const sendCodeToEmail = ({ email, type }: { email: string; type: `${EmailTypeEnum}` }) =>
+  GET('/user/sendEmail', { email, type });
+
+export const getTokenLogin = () => GET<UserType>('/user/tokenLogin');
+
+export const postRegister = ({
+  email,
+  password,
+  code
+}: {
+  email: string;
+  code: string;
+  password: string;
+}) =>
+  POST<ResLogin>('/user/register', {
+    email,
+    code,
+    password: createHashPassword(password)
+  });
+
+export const postFindPassword = ({
+  email,
+  code,
+  password
+}: {
+  email: string;
+  code: string;
+  password: string;
+}) =>
+  POST<ResLogin>('/user/updatePasswordByCode', {
+    email,
+    code,
+    password: createHashPassword(password)
+  });
+
+export const postLogin = ({ email, password }: { email: string; password: string }) =>
+  POST<ResLogin>('/user/loginByPassword', {
+    email,
+    password: createHashPassword(password)
+  });
+
+export const putUserInfo = (data: UserUpdateParams) => PUT('/user/update', data);

src/components/Icon/index.tsx

@@ -0,0 +1,23 @@
+type TIconfont = {
+  name: string;
+  color?: string;
+  width?: number | string;
+  height?: number | string;
+  className?: string;
+};
+
+function Icon({ name, color = 'inherit', width = 16, height = 16, className = '' }: TIconfont) {
+  const style = {
+    fill: color,
+    width,
+    height
+  };
+
+  return (
+    <svg className={`icon ${className}`} aria-hidden="true" style={style}>
+      <use xlinkHref={`#${name}`}></use>
+    </svg>
+  );
+}
+
+export default Icon;

src/components/Layout/auth.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { useToast } from '@chakra-ui/react';
+import { getTokenLogin } from '@/api/user';
+import { useUserStore } from '@/store/user';
+import { useGlobalStore } from '@/store/global';
+import { useQuery } from '@tanstack/react-query';
+
+const unAuthPage: { [key: string]: boolean } = {
+  '/login': true,
+  '/chat': true
+};
+
+const Auth = ({ children }: { children: JSX.Element }) => {
+  const router = useRouter();
+  const toast = useToast({
+    title: '请先登录',
+    position: 'top',
+    status: 'warning'
+  });
+  const { userInfo, setUserInfo } = useUserStore();
+  const { setLoading } = useGlobalStore();
+
+  useQuery(
+    [router.pathname, userInfo],
+    () => {
+      setLoading(true);
+      if (unAuthPage[router.pathname] === true || userInfo) {
+        return setLoading(false);
+      } else {
+        return getTokenLogin();
+      }
+    },
+    {
+      onSuccess(user) {
+        if (user) {
+          setUserInfo(user);
+        }
+      },
+      onError(error) {
+        console.log(error);
+        router.push('/login');
+        toast();
+      },
+      onSettled() {
+        setLoading(false);
+      }
+    }
+  );
+
+  return userInfo || unAuthPage[router.pathname] === true ? <>{children}</> : null;
+};
+
+export default Auth;

src/components/Layout/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import Navbar from './navbar';
+import NavbarPhone from './navbarPhone';
+import { useRouter } from 'next/router';
+import { useScreen } from '@/hooks/useScreen';
+import { useLoading } from '@/hooks/useLoading';
+import Auth from './auth';
+import { useGlobalStore } from '@/store/global';
+
+const unShowLayoutRoute: { [key: string]: boolean } = {
+  '/login': true,
+  '/chat': true
+};
+
+const navbarList = [
+  {
+    label: '介绍',
+    icon: 'icon-gongzuotai-01',
+    link: '/',
+    activeLink: ['/']
+  },
+  {
+    label: '模型',
+    icon: 'icon-moxing',
+    link: '/model/list',
+    activeLink: ['/model/list', '/model/detail']
+  },
+  // {
+  //   label: '数据',
+  //   icon: 'icon-datafull',
+  //   link: '/training/dataList',
+  //   activeLink: ['/training/dataList']
+  // },
+  {
+    label: '账号',
+    icon: 'icon-yonghu-yuan',
+    link: '/number/setting',
+    activeLink: ['/number/setting']
+  }
+];
+
+const Layout = ({ children }: { children: JSX.Element }) => {
+  const { isPc } = useScreen();
+  const router = useRouter();
+  const { Loading } = useLoading({
+    defaultLoading: true
+  });
+  const { loading } = useGlobalStore();
+
+  return (
+    <>
+      {!unShowLayoutRoute[router.pathname] ? (
+        <Box minHeight={'100vh'} backgroundColor={'gray.100'}>
+          {isPc ? (
+            <>
+              <Box h={'100vh'} position={'fixed'} left={0} top={0} w={'80px'}>
+                <Navbar navbarList={navbarList} />
+              </Box>
+              <Box ml={'80px'} p={7}>
+                <Box maxW={'1100px'} m={'auto'}>
+                  <Auth>{children}</Auth>
+                </Box>
+              </Box>
+            </>
+          ) : (
+            <Box pt={'60px'}>
+              <Box
+                h={'60px'}
+                position={'fixed'}
+                top={0}
+                left={0}
+                right={0}
+                zIndex={100}
+                borderBottom={'1px solid rgba(0,0,0,0.1)'}
+              >
+                <NavbarPhone navbarList={navbarList} />
+              </Box>
+              <Box py={3} px={4}>
+                <Auth>{children}</Auth>
+              </Box>
+            </Box>
+          )}
+        </Box>
+      ) : (
+        <Auth>
+          <>{children}</>
+        </Auth>
+      )}
+      {loading && <Loading />}
+    </>
+  );
+};
+
+export default Layout;

src/components/Layout/navbar.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import Icon from '../Icon';
+import styles from './style.module.scss';
+
+export enum NavbarTypeEnum {
+  normal = 'normal',
+  small = 'small'
+}
+
+const Navbar = ({
+  navbarList
+}: {
+  navbarList: {
+    label: string;
+    icon: string;
+    link: string;
+    activeLink: string[];
+  }[];
+}) => {
+  const router = useRouter();
+
+  return (
+    <Flex
+      flexDirection={'column'}
+      alignItems={'center'}
+      py={3}
+      backgroundColor={'white'}
+      h={'100%'}
+      w={'100%'}
+      boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'}
+      userSelect={'none'}
+    >
+      {/* logo */}
+      <Box pb={4}>
+        <Image src={'/logo.svg'} width={50} height={100} alt=""></Image>
+      </Box>
+      {/* 导航列表 */}
+      <Box flex={1}>
+        {navbarList.map((item) => (
+          <Flex
+            key={item.label}
+            mb={4}
+            flexDirection={'column'}
+            alignItems={'center'}
+            justifyContent={'center'}
+            onClick={() =>
+              router.push(item.link, undefined, {
+                shallow: true
+              })
+            }
+            cursor={'pointer'}
+            fontSize={'sm'}
+            w={'60px'}
+            h={'70px'}
+            borderRadius={'sm'}
+            {...(item.activeLink.includes(router.pathname)
+              ? {
+                  color: '#2B6CB0',
+                  backgroundColor: '#BEE3F8'
+                }
+              : {
+                  color: '#4A5568',
+                  backgroundColor: 'transparent'
+                })}
+          >
+            <Icon
+              name={item.icon}
+              width={24}
+              height={24}
+              color={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
+            />
+            <Box mt={1}>{item.label}</Box>
+          </Flex>
+        ))}
+      </Box>
+      {/* 通知 icon */}
+      {/* <Flex className={styles.informIcon} mb={5} justifyContent={'center'}>
+        <Icon name={'icon-tongzhi'} width={28} height={28} color={'#718096'}></Icon>
+      </Flex> */}
+    </Flex>
+  );
+};
+
+export default Navbar;

src/components/Layout/navbarPhone.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Icon from '../Icon';
+import {
+  Flex,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerOverlay,
+  DrawerContent,
+  Box,
+  useDisclosure,
+  Button,
+  Image
+} from '@chakra-ui/react';
+
+const NavbarPhone = ({
+  navbarList
+}: {
+  navbarList: {
+    label: string;
+    icon: string;
+    link: string;
+    activeLink: string[];
+  }[];
+}) => {
+  const router = useRouter();
+
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  return (
+    <>
+      <Flex
+        alignItems={'center'}
+        h={'100%'}
+        justifyContent={'space-between'}
+        backgroundColor={'white'}
+        position={'relative'}
+        px={7}
+      >
+        <Box onClick={onOpen}>
+          <Icon name="icon-caidan" width={20} height={20}></Icon>
+        </Box>
+        {/* <Icon name="icon-tongzhi" width={20} height={20}></Icon> */}
+      </Flex>
+      <Drawer isOpen={isOpen} placement="left" size={'xs'} onClose={onClose}>
+        <DrawerOverlay />
+        <DrawerContent maxWidth={'60vw'}>
+          <DrawerBody p={4}>
+            <Box pb={4}>
+              <Image src={'/logo.svg'} w={'100%'} h={'70px'} pt={2} alt=""></Image>
+            </Box>
+            {navbarList.map((item) => (
+              <Flex
+                key={item.label}
+                mb={4}
+                alignItems={'center'}
+                justifyContent={'center'}
+                onClick={() => {
+                  router.push(item.link);
+                  onClose();
+                }}
+                cursor={'pointer'}
+                fontSize={'sm'}
+                h={'65px'}
+                borderRadius={'md'}
+                {...(item.activeLink.includes(router.pathname)
+                  ? {
+                      color: '#2B6CB0',
+                      backgroundColor: '#BEE3F8'
+                    }
+                  : {
+                      color: '#4A5568',
+                      backgroundColor: 'transparent'
+                    })}
+              >
+                <Icon
+                  name={item.icon}
+                  width={24}
+                  height={24}
+                  color={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
+                />
+                <Box ml={5}>{item.label}</Box>
+              </Flex>
+            ))}
+          </DrawerBody>
+
+          <DrawerFooter px={2}>
+            <Button variant="outline" onClick={onClose}>
+              Cancel
+            </Button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default NavbarPhone;

src/components/Layout/style.module.scss

@@ -0,0 +1,6 @@
+.informIcon {
+  svg {
+    cursor: pointer;
+    margin: 0;
+  }
+}

src/components/Markdown/codeLight.ts

@@ -0,0 +1,283 @@
+import React from 'react';
+export const codeLight: { [key: string]: React.CSSProperties } = {
+  'code[class*=language-]': {
+    color: '#d4d4d4',
+    fontSize: '13px',
+    textShadow: 'none',
+    fontFamily: 'Menlo,Monaco,Consolas,"Andale Mono","Ubuntu Mono","Courier New",monospace',
+    direction: 'ltr',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none'
+  },
+  'pre[class*=language-]': {
+    color: '#d4d4d4',
+    fontSize: '13px',
+    textShadow: 'none',
+    fontFamily: 'Menlo,Monaco,Consolas,"Andale Mono","Ubuntu Mono","Courier New",monospace',
+    direction: 'ltr',
+    textAlign: 'left',
+    whiteSpace: 'pre',
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.5',
+    MozTabSize: '4',
+    OTabSize: '4',
+    tabSize: '4',
+    WebkitHyphens: 'none',
+    MozHyphens: 'none',
+    msHyphens: 'none',
+    hyphens: 'none',
+    padding: '1em',
+    margin: '.5em 0',
+    overflow: 'auto',
+    background: '#1e1e1e'
+  },
+  'code[class*=language-] ::selection': {
+    textShadow: 'none',
+    background: '#264f78'
+  },
+  'code[class*=language-]::selection': {
+    textShadow: 'none',
+    background: '#264f78'
+  },
+  'pre[class*=language-] ::selection': {
+    textShadow: 'none',
+    background: '#264f78'
+  },
+  'pre[class*=language-]::selection': {
+    textShadow: 'none',
+    background: '#264f78'
+  },
+  ':not(pre)>code[class*=language-]': {
+    padding: '.1em .3em',
+    borderRadius: '.3em',
+    color: '#db4c69',
+    background: '#1e1e1e'
+  },
+  '.namespace': {
+    opacity: '0.7'
+  },
+  'doctype.doctype-tag': {
+    color: '#569cd6'
+  },
+  'doctype.name': {
+    color: '#9cdcfe'
+  },
+  comment: {
+    color: '#6a9955'
+  },
+  prolog: {
+    color: '#6a9955'
+  },
+  '.language-html .language-css .token.punctuation': {
+    color: '#d4d4d4'
+  },
+  '.language-html .language-javascript .token.punctuation': {
+    color: '#d4d4d4'
+  },
+  punctuation: {
+    color: '#d4d4d4'
+  },
+  boolean: {
+    color: '#569cd6'
+  },
+  constant: {
+    color: '#9cdcfe'
+  },
+  inserted: {
+    color: '#b5cea8'
+  },
+  number: {
+    color: '#b5cea8'
+  },
+  property: {
+    color: '#9cdcfe'
+  },
+  symbol: {
+    color: '#b5cea8'
+  },
+  tag: {
+    color: '#569cd6'
+  },
+  unit: {
+    color: '#b5cea8'
+  },
+  'attr-name': {
+    color: '#9cdcfe'
+  },
+  builtin: {
+    color: '#ce9178'
+  },
+  char: {
+    color: '#ce9178'
+  },
+  deleted: {
+    color: '#ce9178'
+  },
+  selector: {
+    color: '#d7ba7d'
+  },
+  string: {
+    color: '#ce9178'
+  },
+  '.language-css .token.string.url': {
+    textDecoration: 'underline'
+  },
+  entity: {
+    color: '#569cd6'
+  },
+  operator: {
+    color: '#d4d4d4'
+  },
+  'operator.arrow': {
+    color: '#569cd6'
+  },
+  atrule: {
+    color: '#ce9178'
+  },
+  'atrule.rule': {
+    color: '#c586c0'
+  },
+  'atrule.url': {
+    color: '#9cdcfe'
+  },
+  'atrule.url.function': {
+    color: '#dcdcaa'
+  },
+  'atrule.url.punctuation': {
+    color: '#d4d4d4'
+  },
+  keyword: {
+    color: '#569cd6'
+  },
+  'keyword.control-flow': {
+    color: '#c586c0'
+  },
+  'keyword.module': {
+    color: '#c586c0'
+  },
+  function: {
+    color: '#dcdcaa'
+  },
+  'function.maybe-class-name': {
+    color: '#dcdcaa'
+  },
+  regex: {
+    color: '#d16969'
+  },
+  important: {
+    color: '#569cd6'
+  },
+  italic: {
+    fontStyle: 'italic'
+  },
+  'class-name': {
+    color: '#4ec9b0'
+  },
+  'maybe-class-name': {
+    color: '#4ec9b0'
+  },
+  console: {
+    color: '#9cdcfe'
+  },
+  parameter: {
+    color: '#9cdcfe'
+  },
+  interpolation: {
+    color: '#9cdcfe'
+  },
+  'punctuation.interpolation-punctuation': {
+    color: '#569cd6'
+  },
+  'exports.maybe-class-name': {
+    color: '#9cdcfe'
+  },
+  'imports.maybe-class-name': {
+    color: '#9cdcfe'
+  },
+  variable: {
+    color: '#9cdcfe'
+  },
+  escape: {
+    color: '#d7ba7d'
+  },
+  'tag.punctuation': {
+    color: 'grey'
+  },
+  cdata: {
+    color: 'grey'
+  },
+  'attr-value': {
+    color: '#ce9178'
+  },
+  'attr-value.punctuation': {
+    color: '#ce9178'
+  },
+  'attr-value.punctuation.attr-equals': {
+    color: '#d4d4d4'
+  },
+  namespace: {
+    color: '#4ec9b0'
+  },
+  'code[class*=language-javascript]': {
+    color: '#9cdcfe'
+  },
+  'code[class*=language-jsx]': {
+    color: '#9cdcfe'
+  },
+  'code[class*=language-tsx]': {
+    color: '#9cdcfe'
+  },
+  'code[class*=language-typescript]': {
+    color: '#9cdcfe'
+  },
+  'pre[class*=language-javascript]': {
+    color: '#9cdcfe'
+  },
+  'pre[class*=language-jsx]': {
+    color: '#9cdcfe'
+  },
+  'pre[class*=language-tsx]': {
+    color: '#9cdcfe'
+  },
+  'pre[class*=language-typescript]': {
+    color: '#9cdcfe'
+  },
+  'code[class*=language-css]': {
+    color: '#ce9178'
+  },
+  'pre[class*=language-css]': {
+    color: '#ce9178'
+  },
+  'code[class*=language-html]': {
+    color: '#d4d4d4'
+  },
+  'pre[class*=language-html]': {
+    color: '#d4d4d4'
+  },
+  '.language-regex .token.anchor': {
+    color: '#dcdcaa'
+  },
+  '.language-html .token.punctuation': {
+    color: 'grey'
+  },
+  'pre[class*=language-]>code[class*=language-]': {
+    position: 'relative',
+    zIndex: '1'
+  },
+  '.line-highlight.line-highlight': {
+    background: '#f7ebc6',
+    boxShadow: 'inset 5px 0 0 #f7d87c',
+    zIndex: '0'
+  }
+};

src/components/Markdown/index.module.scss

@@ -0,0 +1,122 @@
+.waitingAnimation::after {
+  display: inline-block;
+  content: '';
+  width: 4px;
+  height: 14px;
+  transform: translate(4px, 2px) scaleY(1.3);
+  background-color: rgba(0, 0, 0, 0.7);
+  animation: blink 0.6s infinite;
+}
+.animation {
+  :last-child::after {
+    display: inline-block;
+    content: '';
+    width: 4px;
+    height: 14px;
+    transform: translate(4px, 2px) scaleY(1.3);
+    background-color: rgba(0, 0, 0, 0.7);
+    animation: blink 0.6s infinite;
+  }
+}
+@keyframes blink {
+  from,
+  to {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+.markdown {
+  /* 标题样式 */
+  h1 {
+    font-size: 1.8rem;
+  }
+
+  h2 {
+    font-size: 1.6rem;
+  }
+
+  h3 {
+    font-size: 1.4rem;
+  }
+
+  h4 {
+    font-size: 1.2rem;
+  }
+
+  h5 {
+    font-size: 1rem;
+  }
+
+  h6 {
+    font-size: 0.83rem;
+  }
+
+  /* 列表样式 */
+  ol,
+  ul {
+    padding-left: 1.5rem;
+    margin-left: 1rem;
+  }
+  ul {
+    list-style: inside;
+  }
+  ol {
+    list-style: decimal;
+  }
+
+  /* 链接样式 */
+  a {
+    color: #0077cc;
+    text-decoration: none;
+    border-bottom: 1px solid #0077cc;
+  }
+
+  a:hover {
+    color: #005580;
+    border-bottom-color: #005580;
+  }
+
+  /* 图片样式 */
+  img {
+    max-width: 100%;
+    max-height: 200px;
+    margin: auto;
+  }
+
+  /* 强调样式 */
+  em,
+  i {
+    font-style: italic;
+  }
+
+  strong,
+  b {
+    font-weight: bold;
+  }
+
+  /* 代码样式 */
+  code {
+    border-radius: 3px;
+    width: 100%;
+  }
+
+  pre {
+    padding: 10px 15px;
+    width: 100%;
+    background-color: #222 !important;
+    overflow-x: auto;
+  }
+
+  pre code {
+    display: block;
+    border: none;
+    background-color: #222;
+    color: #fff;
+  }
+
+  p {
+    line-height: 1.7;
+  }
+}

src/components/Markdown/index.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo, memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import styles from './index.module.scss';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { codeLight } from './codeLight';
+import { Box, Flex } from '@chakra-ui/react';
+import { useCopyData } from '@/utils/tools';
+import Icon from '@/components/Icon';
+
+const Markdown = ({ source, isChatting }: { source: string; isChatting: boolean }) => {
+  // const formatSource = useMemo(() => source.replace(/\n/g, '\n'), [source]);
+  const { copyData } = useCopyData();
+  return (
+    <ReactMarkdown
+      className={`${styles.markdown} ${
+        isChatting ? (source === '' ? styles.waitingAnimation : styles.animation) : ''
+      }`}
+      rehypePlugins={[remarkGfm]}
+      skipHtml={true}
+      components={{
+        p: 'div',
+        pre: 'div',
+        code({ node, inline, className, children, ...props }) {
+          const match = /language-(\w+)/.exec(className || '');
+          const code = String(children).replace(/\n$/, '');
+
+          return (
+            <Box my={3} borderRadius={'md'} overflow={'hidden'}>
+              <Flex py={2} px={5} backgroundColor={'#323641'} color={'#fff'} fontSize={'sm'}>
+                <Box flex={1}>{match?.[1]}</Box>
+                <Flex cursor={'pointer'} onClick={() => copyData(code)} alignItems={'center'}>
+                  <Icon name={'icon-fuzhi'} width={15} height={15} color={'#fff'}></Icon>
+                  <Box ml={1}>复制代码</Box>
+                </Flex>
+              </Flex>
+              <SyntaxHighlighter
+                style={codeLight as any}
+                showLineNumbers
+                language={match?.[1]}
+                {...props}
+              >
+                {code}
+              </SyntaxHighlighter>
+            </Box>
+          );
+        }
+      }}
+    >
+      {source}
+    </ReactMarkdown>
+  );
+};
+
+export default memo(Markdown);

src/constants/common.ts

@@ -0,0 +1,44 @@
+export enum EmailTypeEnum {
+  register = 'register',
+  findPassword = 'findPassword'
+}
+
+export const introPage = `
+## 欢迎使用 Doc GPT
+
+时间比较赶，介绍没来得及完善，先直接上怎么使用：  
+
+1. 使用邮箱注册账号。  
+2. 进入账号页面，添加关联账号，目前只有 openai 的账号可以添加，直接去 openai 官网，把 API Key 粘贴过来。  
+3. 进入模型页，创建一个模型，建议直接用 ChatGPT。    
+4. 在模型列表点击【对话】，即可使用 API 进行聊天。  
+
+### 模型配置
+
+1. **提示语**：会在每个对话框的第一句自动加入，用于限定该模型的对话内容。  
+
+
+2. **单句最大长度**：每个聊天，单次输入内容的最大长度。  
+
+
+3. **上下文最大长度**：每个聊天，最多的轮数除以2，建议设置为偶数。可以持续聊天，但是旧的聊天内容会被截断，AI 就不会知道被截取的内容。 
+例如：上下文最大长度为6。在第 4 轮对话时，第一轮对话的内容不会被计入。
+
+4. **过期时间**：生成对话框后，这个对话框多久过期。  
+
+5. **聊天最大加载次数**：单个对话框最多被加载几次，设置为-1代表不限制，正数代表只能加载 n 次，防止被盗刷。  
+
+### 对话框介绍
+
+1. 每个对话框以 windowId 作为标识。  
+2. 每次点击【对话】，都会生成新的对话框，无法回到旧的对话框。对话框内刷新，会恢复对话内容。  
+3. 直接分享对话框（网页）的链接给朋友，会共享同一个对话内容。但是！！！千万不要两个人同时用一个链接，会串味，还没解决这个问题。  
+4. 如果想分享一个纯的对话框，可以把链接里 windowId 参数去掉。例如：  
+
+* 当前网页链接：http://docgpt.ahapocket.cn/chat?chatId=6402c9f64cb5d6283f764&windowId=6402c94cb5d6283f76fb49  
+* 分享链接应为：http://docgpt.ahapocket.cn/chat?chatId=6402c9f64cb5d6283f764  
+
+### 其他问题
+还有其他问题，可以加我 wx，拉个交流群大家一起聊聊。
+![](/imgs/erweima.jpg)
+`;

src/constants/model.ts

@@ -0,0 +1,53 @@
+export enum OpenAiModelEnum {
+  GPT35 = 'gpt-3.5-turbo',
+  GPT3 = 'text-davinci-003'
+}
+export const OpenAiList = [
+  {
+    name: 'chatGPT',
+    model: OpenAiModelEnum.GPT35,
+    trainName: 'turbo',
+    canTraining: false,
+    maxToken: 4060
+  },
+  {
+    name: 'GPT3',
+    model: OpenAiModelEnum.GPT3,
+    trainName: 'davinci',
+    canTraining: true,
+    maxToken: 4060
+  }
+];
+
+export enum TrainingStatusEnum {
+  pending = 'pending',
+  succeed = 'succeed',
+  errored = 'errored',
+  canceled = 'canceled'
+}
+
+export enum ModelStatusEnum {
+  running = 'running',
+  training = 'training',
+  pending = 'pending',
+  closed = 'closed'
+}
+
+export const formatModelStatus = {
+  [ModelStatusEnum.running]: {
+    colorTheme: 'green',
+    text: '运行中'
+  },
+  [ModelStatusEnum.training]: {
+    colorTheme: 'blue',
+    text: '训练中'
+  },
+  [ModelStatusEnum.pending]: {
+    colorTheme: 'gray',
+    text: '加载中'
+  },
+  [ModelStatusEnum.closed]: {
+    colorTheme: 'red',
+    text: '已关闭'
+  }
+};

src/constants/responseCode.ts

@@ -0,0 +1,20 @@
+export const ERROR_CODE: { [key: number]: string } = {
+  400: '请求失败',
+  401: '无权访问',
+  403: '紧张访问',
+  404: '请求不存在',
+  405: '请求方法错误',
+  406: '请求的格式错误',
+  410: '资源已删除',
+  422: '验证错误',
+  500: '服务器发生错误',
+  502: '网关错误',
+  503: '服务器暂时过载或维护',
+  504: '网关超时'
+};
+
+export const TOKEN_ERROR_CODE: { [key: number]: string } = {
+  506: '请先登录',
+  507: '请重新登录',
+  508: '登录已过期'
+};

src/constants/theme.ts

@@ -0,0 +1,87 @@
+import { extendTheme, defineStyleConfig } from '@chakra-ui/react';
+// @ts-ignore
+import { modalAnatomy as parts } from '@chakra-ui/anatomy';
+// @ts-ignore
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys);
+
+// modal 弹窗
+const ModalTheme = defineMultiStyleConfig({
+  baseStyle: definePartsStyle({
+    dialog: {
+      width: '90%'
+    }
+  })
+});
+
+// 按键
+const Button = defineStyleConfig({
+  baseStyle: {},
+  sizes: {
+    sm: {
+      fontSize: 'sm',
+      px: 3,
+      py: 0,
+      fontWeight: 'normal',
+      height: '26px'
+    },
+    md: {
+      fontSize: 'md',
+      px: 6,
+      py: 0,
+      height: '34px',
+      fontWeight: 'normal'
+    },
+    lg: {
+      fontSize: 'lg',
+      px: 8,
+      py: 0,
+      height: '42px',
+      fontWeight: 'normal'
+    }
+  },
+  variants: {
+    outline: {
+      borderWidth: '1.5px'
+    }
+  },
+  defaultProps: {
+    size: 'md',
+    colorScheme: 'blue'
+  }
+});
+
+// 全局主题
+export const theme = extendTheme({
+  styles: {
+    global: {
+      'html, body': {
+        color: 'blackAlpha.800',
+        fontSize: '14px'
+      }
+    }
+  },
+  fonts: {
+    body: 'system-ui, sans-serif'
+  },
+  fontSizes: {
+    xs: '0.8rem',
+    sm: '0.9rem',
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '3.75rem',
+    '7xl': '4.5rem',
+    '8xl': '6rem',
+    '9xl': '8rem'
+  },
+  components: {
+    Modal: ModalTheme,
+    Button
+  }
+});

src/constants/user.ts

@@ -0,0 +1,5 @@
+export enum PageTypeEnum {
+  login = 'login',
+  register = 'register',
+  forgetPassword = 'forgetPassword'
+}

src/hooks/useConfirm.tsx

@@ -0,0 +1,61 @@
+import { useState, useRef } from 'react';
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
+  Button
+} from '@chakra-ui/react';
+
+export const useConfirm = ({ title = '提示', content }: { title?: string; content: string }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef(null);
+  const confirmCb = useRef<any>();
+  const cancelCb = useRef<any>();
+
+  return {
+    openConfirm: (confirm?: any, cancel?: any) => {
+      onOpen();
+      confirmCb.current = confirm;
+      cancelCb.current = cancel;
+    },
+    ConfirmChild: () => (
+      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              {title}
+            </AlertDialogHeader>
+
+            <AlertDialogBody>{content}</AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button
+                colorScheme={'gray'}
+                onClick={() => {
+                  onClose();
+                  typeof cancelCb.current === 'function' && cancelCb.current();
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                colorScheme="blue"
+                ml={3}
+                onClick={() => {
+                  onClose();
+                  typeof confirmCb.current === 'function' && confirmCb.current();
+                }}
+              >
+                确认
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    )
+  };
+};

src/hooks/useLoading.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { Spinner, Flex } from '@chakra-ui/react';
+
+export const useLoading = (props?: { defaultLoading: boolean }) => {
+  const [isLoading, setIsLoading] = useState(props?.defaultLoading || false);
+
+  const Loading = ({
+    loading,
+    fixed = true
+  }: {
+    loading?: boolean;
+    fixed?: boolean;
+  }): JSX.Element | null => {
+    return isLoading || loading ? (
+      <Flex
+        position={fixed ? 'fixed' : 'absolute'}
+        zIndex={100}
+        backgroundColor={'rgba(255,255,255,0.5)'}
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        alignItems={'center'}
+        justifyContent={'center'}
+      >
+        <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
+      </Flex>
+    ) : null;
+  };
+
+  return {
+    isLoading,
+    setIsLoading,
+    Loading
+  };
+};

src/hooks/useScreen.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { useMediaQuery } from '@chakra-ui/react';
+
+export function useScreen() {
+  const [isPc] = useMediaQuery('(min-width: 900px)', {
+    ssr: true,
+    fallback: false
+  });
+
+  return {
+    isPc,
+    mediaLgMd: useMemo(() => (isPc ? 'lg' : 'md'), [isPc]),
+    mediaMdSm: useMemo(() => (isPc ? 'md' : 'sm'), [isPc]),
+    media: (pc: number | string, phone: number | string) => (isPc ? pc : phone)
+  };
+}

src/hooks/useSendCode.ts

@@ -0,0 +1,65 @@
+import { useState, useMemo, useCallback } from 'react';
+import { sendCodeToEmail } from '@/api/user';
+import { EmailTypeEnum } from '@/constants/common';
+import { useToast } from '@chakra-ui/react';
+let timer: any;
+
+export const useSendCode = () => {
+  const toast = useToast({
+    position: 'top',
+    duration: 2000
+  });
+  const [codeSending, setCodeSending] = useState(false);
+  const [codeCountDown, setCodeCountDown] = useState(0);
+  const sendCodeText = useMemo(() => {
+    if (codeCountDown >= 10) {
+      return `${codeCountDown}s后重新获取`;
+    }
+    if (codeCountDown > 0) {
+      return `0${codeCountDown}s后重新获取`;
+    }
+    return '获取验证码';
+  }, [codeCountDown]);
+
+  const sendCode = useCallback(
+    async ({ email, type }: { email: string; type: `${EmailTypeEnum}` }) => {
+      setCodeSending(true);
+      try {
+        await sendCodeToEmail({
+          email,
+          type
+        });
+        setCodeCountDown(60);
+        timer = setInterval(() => {
+          setCodeCountDown((val) => {
+            if (val <= 0) {
+              clearInterval(timer);
+            }
+            return val - 1;
+          });
+        }, 1000);
+        toast({
+          title: '验证码已发送',
+          status: 'success',
+          position: 'top'
+        });
+      } catch (error) {
+        typeof error === 'string' &&
+          toast({
+            title: error,
+            status: 'error',
+            position: 'top'
+          });
+      }
+      setCodeSending(false);
+    },
+    [toast]
+  );
+
+  return {
+    codeSending,
+    sendCode,
+    sendCodeText,
+    codeCountDown
+  };
+};

src/hooks/useToast.ts

@@ -0,0 +1,13 @@
+import { useToast as uToast, UseToastOptions } from '@chakra-ui/react';
+
+export const useToast = (props?: UseToastOptions) => {
+  const toast = uToast({
+    position: 'top',
+    duration: 2000,
+    ...props
+  });
+
+  return {
+    toast
+  };
+};

src/pages/404.tsx

@@ -0,0 +1,13 @@
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const NonePage = () => {
+  const router = useRouter();
+  useEffect(() => {
+    router.push('/model/list');
+  }, [router]);
+
+  return <div></div>;
+};
+
+export default NonePage;

src/pages/_app.tsx

@@ -1,6 +1,46 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import type { AppProps, NextWebVitalsMetric } from 'next/app';
+import Head from 'next/head';
+import { ChakraProvider } from '@chakra-ui/react';
+import Layout from '@/components/Layout';
+import { theme } from '@/constants/theme';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import '../styles/reset.scss';
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  // Create a client
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: false,
+        cacheTime: 0
+      }
+    }
+  });
+
+  return (
+    <>
+      <Head>
+        <title>Doc GPT</title>
+        <meta name="description" content="Generated by Doc GPT" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
+        />
+        <link rel="icon" href="/favicon.ico" />
+        <script src="/iconfont.js" async></script>
+      </Head>
+      <QueryClientProvider client={queryClient}>
+        <ChakraProvider theme={theme}>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </ChakraProvider>
+      </QueryClientProvider>
+    </>
+  );
 }
+
+// export function reportWebVitals(metric: NextWebVitalsMetric) {
+//   console.log(metric);
+// }

src/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
@@ -9,5 +9,5 @@ export default function Document() {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }

src/pages/api/chat/chatGpt.ts

@@ -0,0 +1,110 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { connectToDatabase, Chat, ChatWindow } from '@/service/mongo';
+import type { ModelType } from '@/types/model';
+import { getOpenAIApi, authChat } from '@/service/utils/chat';
+import { openaiProxy } from '@/service/utils/tools';
+import { ChatCompletionRequestMessage, ChatCompletionRequestMessageRoleEnum } from 'openai';
+import { ChatItemType } from '@/types/chat';
+
+/* 发送提示词 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.writeHead(200, {
+    Connection: 'keep-alive',
+    'Content-Encoding': 'none',
+    'Cache-Control': 'no-cache',
+    'Content-Type': 'text/event-stream'
+  });
+  const { chatId, windowId } = req.query as { chatId: string; windowId: string };
+
+  try {
+    if (!windowId || !chatId) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    const { chat, userApiKey } = await authChat(chatId);
+
+    const model: ModelType = chat.modelId;
+
+    const map = {
+      Human: ChatCompletionRequestMessageRoleEnum.User,
+      AI: ChatCompletionRequestMessageRoleEnum.Assistant,
+      SYSTEM: ChatCompletionRequestMessageRoleEnum.System
+    };
+    // 读取对话内容
+    const prompts: ChatItemType[] = (await ChatWindow.findById(windowId)).content;
+
+    // 长度过滤
+    const maxContext = model.security.contextMaxLen;
+    const filterPrompts =
+      prompts.length > maxContext + 2
+        ? [prompts[0], ...prompts.slice(prompts.length - maxContext)]
+        : prompts.slice(0, prompts.length);
+
+    // 格式化文本内容
+    const formatPrompts: ChatCompletionRequestMessage[] = filterPrompts.map(
+      (item: ChatItemType) => ({
+        role: map[item.obj],
+        content: item.value
+      })
+    );
+
+    // 获取 chatAPI
+    const chatAPI = getOpenAIApi(userApiKey);
+    const chatResponse = await chatAPI.createChatCompletion(
+      {
+        model: model.service.chatModel,
+        temperature: 1,
+        // max_tokens: model.security.contentMaxLen,
+        messages: formatPrompts,
+        stream: true
+      },
+      openaiProxy
+    );
+
+    // 截取字符串内容
+    const reg = /{"content"(.*)"}/g;
+    // @ts-ignore
+    const match = chatResponse.data.match(reg);
+    let AIResponse = '';
+    if (match) {
+      match.forEach((item: string, i: number) => {
+        try {
+          const json = JSON.parse(item);
+          // 开头的换行忽略
+          if (i === 0 && json.content?.startsWith('\n')) return;
+          AIResponse += json.content;
+          const content = json.content.replace(/\n/g, '<br/>'); // 无法直接传输\n
+          content && res.write(`data: ${content}\n\n`);
+        } catch (err) {
+          err;
+        }
+      });
+    }
+    res.write(`data: [DONE]\n\n`);
+
+    // 存入库
+    await ChatWindow.findByIdAndUpdate(windowId, {
+      $push: {
+        content: {
+          obj: 'AI',
+          value: AIResponse
+        }
+      },
+      updateTime: Date.now()
+    });
+
+    res.end();
+  } catch (err: any) {
+    console.log(err?.response?.data || err);
+    // 删除最一条数据库记录, 也就是预发送的那一条
+    await ChatWindow.findByIdAndUpdate(windowId, {
+      $pop: { content: 1 },
+      updateTime: Date.now()
+    });
+
+    res.end();
+  }
+}

src/pages/api/chat/delLastMessage.ts

@@ -0,0 +1,28 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, ChatWindow } from '@/service/mongo';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { windowId } = req.query as { windowId: string };
+
+    if (!windowId) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    // 删除最一条数据库记录, 也就是预发送的那一条
+    await ChatWindow.findByIdAndUpdate(windowId, {
+      $pop: { content: 1 },
+      updateTime: Date.now()
+    });
+
+    jsonRes(res);
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/chat/generate.ts

@@ -0,0 +1,53 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, Model, Chat } from '@/service/mongo';
+import { authToken } from '@/service/utils/tools';
+import { ModelType } from '@/types/model';
+
+/* 获取我的模型 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { modelId } = req.query;
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+
+    if (!modelId) {
+      throw new Error('缺少参数');
+    }
+
+    // 凭证校验
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 获取模型配置
+    const model: ModelType | null = await Model.findOne({
+      _id: modelId,
+      userId
+    });
+
+    if (!model) {
+      throw new Error('模型不存在');
+    }
+
+    // 创建 chat 数据
+    const response = await Chat.create({
+      userId,
+      modelId,
+      expiredTime: Date.now() + model.security.expiredTime,
+      loadAmount: model.security.maxLoadAmount
+    });
+
+    jsonRes(res, {
+      data: response._id
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/chat/gpt3.ts

@@ -0,0 +1,83 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, Chat } from '@/service/mongo';
+import type { ModelType } from '@/types/model';
+import { getOpenAIApi } from '@/service/utils/chat';
+import { ChatItemType } from '@/types/chat';
+import { openaiProxy } from '@/service/utils/tools';
+
+/* 发送提示词 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { prompt, chatId } = req.body as { prompt: ChatItemType[]; chatId: string };
+
+    if (!prompt || !chatId) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    // 获取 chat 数据
+    const chat = await Chat.findById(chatId)
+      .populate({
+        path: 'modelId',
+        options: {
+          strictPopulate: false
+        }
+      })
+      .populate({
+        path: 'userId',
+        options: {
+          strictPopulate: false
+        }
+      });
+
+    if (!chat || !chat.modelId || !chat.userId) {
+      throw new Error('聊天已过期');
+    }
+
+    const model: ModelType = chat.modelId;
+
+    // 获取 user 的 apiKey
+    const user = chat.userId;
+
+    const userApiKey = user.accounts?.find((item: any) => item.type === 'openai')?.value;
+
+    if (!userApiKey) {
+      throw new Error('缺少ApiKey, 无法请求');
+    }
+
+    // 获取 chatAPI
+    const chatAPI = getOpenAIApi(userApiKey);
+
+    // prompt处理
+    const formatPrompt = prompt.map((item) => `${item.value}\n\n###\n\n`).join('');
+
+    // 发送请求
+    const response = await chatAPI.createCompletion(
+      {
+        model: model.service.modelName,
+        prompt: formatPrompt,
+        temperature: 0.5,
+        max_tokens: model.security.contentMaxLen,
+        top_p: 1,
+        frequency_penalty: 0,
+        presence_penalty: 0.6,
+        stop: ['###']
+      },
+      openaiProxy
+    );
+
+    const responseMessage = response.data.choices[0]?.text;
+
+    jsonRes(res, {
+      data: responseMessage
+    });
+  } catch (err: any) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/chat/init.ts

@@ -0,0 +1,91 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, Chat, ChatWindow } from '@/service/mongo';
+import type { ModelType } from '@/types/model';
+
+/* 获取我的模型 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { chatId, windowId } = req.query as { chatId: string; windowId?: string };
+
+    if (!chatId) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    // 获取 chat 数据
+    const chat = await Chat.findById(chatId).populate({
+      path: 'modelId',
+      options: {
+        strictPopulate: false
+      }
+    });
+
+    // 安全校验
+    if (chat.loadAmount === 0 || chat.expiredTime < Date.now()) {
+      throw new Error('聊天框已过期');
+    }
+
+    if (chat.loadAmount > 0) {
+      await Chat.updateOne(
+        {
+          _id: chat._id
+        },
+        {
+          $inc: { loadAmount: -1 }
+        }
+      );
+    }
+
+    const model: ModelType = chat.modelId;
+
+    /* 查找是否有记录 */
+    let history = null;
+    let responseId = windowId;
+    try {
+      history = await ChatWindow.findById(windowId);
+    } catch (error) {
+      error;
+    }
+
+    const defaultContent = model.systemPrompt
+      ? [
+          {
+            obj: 'SYSTEM',
+            value: model.systemPrompt
+          }
+        ]
+      : [];
+
+    if (!history) {
+      // 没有记录，创建一个
+      const response = await ChatWindow.create({
+        chatId,
+        updateTime: Date.now(),
+        content: defaultContent
+      });
+      responseId = response._id;
+    }
+
+    jsonRes(res, {
+      data: {
+        windowId: responseId,
+        chatSite: {
+          modelId: model._id,
+          name: model.name,
+          avatar: model.avatar,
+          secret: model.security,
+          chatModel: model.service.chatModel
+        },
+        history: history ? history.content : defaultContent
+      }
+    });
+  } catch (err) {
+    console.log(err);
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/chat/preChat.ts

@@ -0,0 +1,43 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { ChatItemType } from '@/types/chat';
+import { connectToDatabase, ChatWindow } from '@/service/mongo';
+import type { ModelType } from '@/types/model';
+import { authChat } from '@/service/utils/chat';
+
+/* 聊天预请求，存储聊天内容 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { windowId, prompt, chatId } = req.body as {
+      windowId: string;
+      prompt: ChatItemType;
+      chatId: string;
+    };
+
+    if (!windowId || !prompt || !chatId) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    const { chat } = await authChat(chatId);
+
+    // 长度校验
+    const model: ModelType = chat.modelId;
+    if (prompt.value.length > model.security.contentMaxLen) {
+      throw new Error('输入内容超长');
+    }
+
+    await ChatWindow.findByIdAndUpdate(windowId, {
+      $push: { content: prompt },
+      updateTime: Date.now()
+    });
+
+    jsonRes(res);
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/hello.ts

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}

src/pages/api/model/create.ts

@@ -0,0 +1,75 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase } from '@/service/mongo';
+import { authToken } from '@/service/utils/tools';
+import { ModelStatusEnum, OpenAiList } from '@/constants/model';
+import { Model } from '@/service/models/model';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { name, serviceModelName, serviceModelCompany = 'openai' } = req.body;
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+
+    if (!name || !serviceModelName || !serviceModelCompany) {
+      throw new Error('缺少参数');
+    }
+
+    // 凭证校验
+    const userId = await authToken(authorization);
+
+    const modelItem = OpenAiList.find((item) => item.model === serviceModelName);
+
+    if (!modelItem) {
+      throw new Error('模型错误');
+    }
+
+    await connectToDatabase();
+
+    // 重名校验
+    const authRepeatName = await Model.findOne({
+      name,
+      userId
+    });
+    if (authRepeatName) {
+      throw new Error('模型名重复');
+    }
+
+    // 上限校验
+    const authCount = await Model.countDocuments({
+      userId
+    });
+    if (authCount >= 5) {
+      throw new Error('上限5个模型');
+    }
+
+    // 创建模型
+    const response = await Model.create({
+      name,
+      userId,
+      status: ModelStatusEnum.running,
+      service: {
+        company: serviceModelCompany,
+        trainId: modelItem.trainName,
+        chatModel: modelItem.model,
+        modelName: modelItem.model
+      }
+    });
+
+    // 根据 id 获取模型信息
+    const model = await Model.findById(response._id);
+
+    jsonRes(res, {
+      data: model
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/model/del.ts

@@ -0,0 +1,70 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { Chat, Model, Training, connectToDatabase } from '@/service/mongo';
+import { authToken, getUserOpenaiKey } from '@/service/utils/tools';
+import { TrainingStatusEnum } from '@/constants/model';
+import { getOpenAIApi } from '@/service/utils/chat';
+import { TrainingItemType } from '@/types/training';
+import { openaiProxy } from '@/service/utils/tools';
+
+/* 获取我的模型 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { modelId } = req.query;
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+
+    if (!modelId) {
+      throw new Error('参数错误');
+    }
+
+    // 凭证校验
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 删除模型
+    await Model.deleteOne({
+      _id: modelId,
+      userId
+    });
+
+    // 删除对应的聊天
+    await Chat.deleteMany({
+      modelId
+    });
+
+    // 查看是否正在训练
+    const training: TrainingItemType | null = await Training.findOne({
+      modelId,
+      status: TrainingStatusEnum.pending
+    });
+
+    // 如果正在训练，需要删除openai上的相关信息
+    if (training) {
+      const openai = getOpenAIApi(await getUserOpenaiKey(userId));
+      // 获取训练记录
+      const tuneRecord = await openai.retrieveFineTune(training.tuneId, openaiProxy);
+
+      // 删除训练文件
+      openai.deleteFile(tuneRecord.data.training_files[0].id, openaiProxy);
+      // 取消训练
+      openai.cancelFineTune(training.tuneId, openaiProxy);
+    }
+
+    // 删除对应训练记录
+    await Training.deleteMany({
+      modelId
+    });
+
+    jsonRes(res);
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/model/detail.tsx

@@ -0,0 +1,47 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase } from '@/service/mongo';
+import { authToken } from '@/service/utils/tools';
+import { Model } from '@/service/models/model';
+import { ModelType } from '@/types/model';
+
+/* 获取我的模型 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+
+    const { modelId } = req.query;
+
+    if (!modelId) {
+      throw new Error('参数错误');
+    }
+
+    // 凭证校验
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 根据 userId 获取模型信息
+    const model: ModelType | null = await Model.findOne({
+      userId,
+      _id: modelId
+    });
+
+    if (!model) {
+      throw new Error('模型不存在');
+    }
+
+    jsonRes(res, {
+      data: model
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/model/getTrainings.ts

@@ -0,0 +1,60 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, Model, Training } from '@/service/mongo';
+import { getOpenAIApi } from '@/service/utils/chat';
+import formidable from 'formidable';
+import { authToken, getUserOpenaiKey } from '@/service/utils/tools';
+import { join } from 'path';
+import fs from 'fs';
+import type { ModelType } from '@/types/model';
+import type { OpenAIApi } from 'openai';
+import { ModelStatusEnum, TrainingStatusEnum } from '@/constants/model';
+import { openaiProxy } from '@/service/utils/tools';
+
+// 关闭next默认的bodyParser处理方式
+export const config = {
+  api: {
+    bodyParser: false
+  }
+};
+
+/* 上传文件，开始微调 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+    const { modelId } = req.query;
+    if (!modelId) {
+      throw new Error('参数错误');
+    }
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    /* 获取 modelId 下的 training 记录 */
+    const records = await Training.find({
+      modelId
+    });
+
+    jsonRes(res, {
+      data: records
+    });
+  } catch (err: any) {
+    /* 清除上传的文件，关闭训练记录 */
+    // @ts-ignore
+    if (openai) {
+      // @ts-ignore
+      uploadFileId && openai.deleteFile(uploadFileId);
+      // @ts-ignore
+      trainId && openai.cancelFineTune(trainId);
+    }
+
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/model/list.ts

@@ -0,0 +1,35 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase } from '@/service/mongo';
+import { authToken } from '@/service/utils/tools';
+import { Model } from '@/service/models/model';
+
+/* 获取我的模型 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+
+    // 凭证校验
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 根据 userId 获取模型信息
+    const models = await Model.find({
+      userId
+    });
+
+    jsonRes(res, {
+      data: models
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/model/putTrainStatus.ts

@@ -0,0 +1,101 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, Model, Training } from '@/service/mongo';
+import { getOpenAIApi } from '@/service/utils/chat';
+import { authToken, getUserOpenaiKey } from '@/service/utils/tools';
+import type { ModelType } from '@/types/model';
+import { TrainingItemType } from '@/types/training';
+import { ModelStatusEnum, TrainingStatusEnum } from '@/constants/model';
+import { OpenAiTuneStatusEnum } from '@/service/constants/training';
+import { openaiProxy } from '@/service/utils/tools';
+
+/* 更新训练状态 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+    const { modelId } = req.query as { modelId: string };
+    if (!modelId) {
+      throw new Error('参数错误');
+    }
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 获取模型
+    const model: ModelType | null = await Model.findById(modelId);
+
+    if (!model || model.status !== 'training') {
+      throw new Error('模型不在训练中');
+    }
+
+    // 查询正在训练中的训练记录
+    const training: TrainingItemType | null = await Training.findOne({
+      modelId,
+      status: 'pending'
+    });
+
+    if (!training) {
+      throw new Error('找不到训练记录');
+    }
+
+    // 用户的 openai 实例
+    const openai = getOpenAIApi(await getUserOpenaiKey(userId));
+
+    // 获取 openai 的训练情况
+    const { data } = await openai.retrieveFineTune(training.tuneId, openaiProxy);
+
+    if (data.status === OpenAiTuneStatusEnum.succeeded) {
+      // 删除训练文件
+      openai.deleteFile(data.training_files[0].id, openaiProxy);
+
+      // 更新模型
+      await Model.findByIdAndUpdate(modelId, {
+        status: ModelStatusEnum.running,
+        updateTime: new Date(),
+        service: {
+          ...model.service,
+          trainId: data.fine_tuned_model, // 训练完后，再次训练和对话使用的 model 是一样的
+          chatModel: data.fine_tuned_model
+        }
+      });
+      // 更新训练数据
+      await Training.findByIdAndUpdate(training._id, {
+        status: TrainingStatusEnum.succeed
+      });
+
+      return jsonRes(res, {
+        data: '模型微调完成'
+      });
+    }
+
+    if (data.status === OpenAiTuneStatusEnum.cancelled) {
+      // 删除训练文件
+      openai.deleteFile(data.training_files[0].id, openaiProxy);
+
+      // 更新模型
+      await Model.findByIdAndUpdate(modelId, {
+        status: ModelStatusEnum.running,
+        updateTime: new Date()
+      });
+      // 更新训练数据
+      await Training.findByIdAndUpdate(training._id, {
+        status: TrainingStatusEnum.canceled
+      });
+
+      return jsonRes(res, {
+        data: '模型微调取消'
+      });
+    }
+
+    throw new Error('模型还在训练中');
+  } catch (err: any) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/model/train.ts

@@ -0,0 +1,127 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, Model, Training } from '@/service/mongo';
+import { getOpenAIApi } from '@/service/utils/chat';
+import formidable from 'formidable';
+import { authToken, getUserOpenaiKey } from '@/service/utils/tools';
+import { join } from 'path';
+import fs from 'fs';
+import type { ModelType } from '@/types/model';
+import type { OpenAIApi } from 'openai';
+import { ModelStatusEnum, TrainingStatusEnum } from '@/constants/model';
+import { openaiProxy } from '@/service/utils/tools';
+
+// 关闭next默认的bodyParser处理方式
+export const config = {
+  api: {
+    bodyParser: false
+  }
+};
+
+/* 上传文件，开始微调 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  let openai: OpenAIApi, trainId: string, uploadFileId: string;
+
+  try {
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+    const { modelId } = req.query;
+    if (!modelId) {
+      throw new Error('参数错误');
+    }
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 获取模型的状态
+    const model: ModelType | null = await Model.findById(modelId);
+
+    if (!model || model.status !== 'running') {
+      throw new Error('模型正忙');
+    }
+
+    // const trainingType = model.service.modelType
+    const trainingType = model.service.trainId; // 目前都默认是 openai text-davinci-03
+
+    // 获取用户的 API Key 实例化后的对象
+    openai = getOpenAIApi(await getUserOpenaiKey(userId));
+
+    // 接收文件并保存
+    const form = formidable({
+      uploadDir: join(process.cwd(), 'public/trainData'),
+      keepExtensions: true
+    });
+
+    const { files } = await new Promise<{
+      fields: formidable.Fields;
+      files: formidable.Files;
+    }>((resolve, reject) => {
+      form.parse(req, (err, fields, files) => {
+        if (err) return reject(err);
+        resolve({ fields, files });
+      });
+    });
+    const file = files.file;
+
+    // 上传文件
+    // @ts-ignore
+    const uploadRes = await openai.createFile(
+      // @ts-ignore
+      fs.createReadStream(file.filepath),
+      'fine-tune',
+      openaiProxy
+    );
+    uploadFileId = uploadRes.data.id; // 记录上传文件的 ID
+
+    // 开始训练
+    const trainRes = await openai.createFineTune(
+      {
+        training_file: uploadFileId,
+        model: trainingType,
+        suffix: model.name
+      },
+      openaiProxy
+    );
+
+    trainId = trainRes.data.id; // 记录训练 ID
+
+    // 创建训练记录
+    await Training.create({
+      serviceName: 'openai',
+      tuneId: trainId,
+      status: TrainingStatusEnum.pending,
+      modelId
+    });
+
+    // 修改模型状态
+    await Model.findByIdAndUpdate(modelId, {
+      $inc: {
+        trainingTimes: +1
+      },
+      updateTime: new Date(),
+      status: ModelStatusEnum.training
+    });
+
+    jsonRes(res, {
+      data: 'start training'
+    });
+  } catch (err: any) {
+    /* 清除上传的文件，关闭训练记录 */
+    // @ts-ignore
+    if (openai) {
+      // @ts-ignore
+      uploadFileId && openai.deleteFile(uploadFileId, openaiProxy);
+      // @ts-ignore
+      trainId && openai.cancelFineTune(trainId, openaiProxy);
+    }
+
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/model/update.ts

@@ -0,0 +1,49 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase } from '@/service/mongo';
+import { authToken } from '@/service/utils/tools';
+import { Model } from '@/service/models/model';
+import type { ModelUpdateParams } from '@/types/model';
+
+/* 获取我的模型 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { name, service, security, systemPrompt } = req.body as ModelUpdateParams;
+    const { modelId } = req.query as { modelId: string };
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('无权操作');
+    }
+
+    if (!name || !service || !security || !modelId) {
+      throw new Error('参数错误');
+    }
+
+    // 凭证校验
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 更新模型
+    await Model.updateOne(
+      {
+        _id: modelId,
+        userId
+      },
+      {
+        name,
+        service,
+        systemPrompt,
+        security
+      }
+    );
+
+    jsonRes(res);
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/test.ts

@@ -0,0 +1,24 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  if (req.method !== 'GET') return;
+
+  res.writeHead(200, {
+    Connection: 'keep-alive',
+    'Content-Encoding': 'none',
+    'Cache-Control': 'no-cache',
+    'Content-Type': 'text/event-stream'
+  });
+
+  let val = 0;
+
+  const timer = setInterval(() => {
+    console.log('发送消息', val);
+    res.write(`data: ${val++}\n\n`);
+    if (val > 30) {
+      clearInterval(timer);
+      res.write(`data: [DONE]\n\n`);
+      res.end();
+    }
+  }, 500);
+}

src/pages/api/timer/clearAuthCode.ts

@@ -0,0 +1,24 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { AuthCode } from '@/service/models/authCode';
+import { connectToDatabase } from '@/service/mongo';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    await connectToDatabase();
+
+    const authCode = await AuthCode.deleteMany({
+      expiredTime: { $lt: Date.now() }
+    });
+
+    jsonRes(res, {
+      message: `删除了${authCode.deletedCount}条记录`
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/timer/clearChatWindow.ts

@@ -0,0 +1,25 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, ChatWindow } from '@/service/mongo';
+
+/* 定时删除那些不活跃的内容 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    await connectToDatabase();
+
+    const response = await ChatWindow.deleteMany(
+      { $expr: { $lt: [{ $size: '$content' }, 5] } },
+      // 使用 $pull 操作符删除数组中的元素
+      { $pull: { content: { $exists: true } } }
+    );
+
+    jsonRes(res, {
+      message: `删除了${response.deletedCount}条记录`
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/timer/updateTraining.ts

@@ -0,0 +1,76 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase, Training, Model } from '@/service/mongo';
+import type { TrainingItemType } from '@/types/training';
+import { TrainingStatusEnum, ModelStatusEnum } from '@/constants/model';
+import { getOpenAIApi } from '@/service/utils/chat';
+import { getUserOpenaiKey } from '@/service/utils/tools';
+import { OpenAiTuneStatusEnum } from '@/service/constants/training';
+import { sendTrainSucceed } from '@/service/utils/sendEmail';
+import { openaiProxy } from '@/service/utils/tools';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    await connectToDatabase();
+
+    // 查询正在训练中的训练记录
+    const trainingRecords: TrainingItemType[] = await Training.find({
+      status: TrainingStatusEnum.pending
+    });
+
+    const openai = getOpenAIApi(await getUserOpenaiKey('63f9a14228d2a688d8dc9e1b'));
+
+    const response = await Promise.all(
+      trainingRecords.map(async (item) => {
+        const { data } = await openai.retrieveFineTune(item.tuneId, openaiProxy);
+        if (data.status === OpenAiTuneStatusEnum.succeeded) {
+          // 删除训练文件
+          openai.deleteFile(data.training_files[0].id, openaiProxy);
+
+          const model = await Model.findById(item.modelId).populate({
+            path: 'userId',
+            options: {
+              strictPopulate: false
+            }
+          });
+
+          if (!model) {
+            throw new Error('模型不存在');
+          }
+
+          // 更新模型
+          await Model.findByIdAndUpdate(item.modelId, {
+            status: ModelStatusEnum.running,
+            updateTime: new Date(),
+            service: {
+              ...model.service,
+              trainId: data.fine_tuned_model, // 训练完后，再次训练和对话使用的 model 是一样的
+              chatModel: data.fine_tuned_model
+            }
+          });
+          // 更新训练数据
+          await Training.findByIdAndUpdate(item._id, {
+            status: TrainingStatusEnum.succeed
+          });
+
+          // 发送邮件通知
+          await sendTrainSucceed(model.userId.email as string, model.name);
+          return 'succeed';
+        }
+        return 'pending';
+      })
+    );
+
+    jsonRes(res, {
+      data: `${response.length}个训练线程，${
+        response.filter((item) => item === 'succeed').length
+      }个完成`
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/user/loginByPassword.ts

@@ -0,0 +1,47 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase } from '@/service/mongo';
+import { User } from '@/service/models/user';
+import { generateToken } from '@/service/utils/tools';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { email, password } = req.body;
+
+    if (!email || !password) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    // 检测邮箱是否存在
+    const authEmail = await User.findOne({
+      email
+    });
+    if (!authEmail) {
+      throw new Error('邮箱未注册');
+    }
+
+    const user = await User.findOne({
+      email,
+      password
+    });
+
+    if (!user) {
+      throw new Error('密码错误');
+    }
+
+    jsonRes(res, {
+      data: {
+        token: generateToken(user._id),
+        user
+      }
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/user/register.ts

@@ -0,0 +1,61 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { User } from '@/service/models/user';
+import { AuthCode } from '@/service/models/authCode';
+import { connectToDatabase } from '@/service/mongo';
+import { generateToken } from '@/service/utils/tools';
+import { EmailTypeEnum } from '@/constants/common';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { email, code, password } = req.body;
+
+    if (!email || !code || !password) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    // 验证码校验
+    const authCode = await AuthCode.findOne({
+      email,
+      code,
+      type: EmailTypeEnum.register,
+      expiredTime: { $gte: Date.now() }
+    });
+
+    if (!authCode) {
+      throw new Error('验证码错误');
+    }
+
+    // 重名校验
+    const authRepeat = await User.findOne({
+      email
+    });
+
+    if (authRepeat) {
+      throw new Error('邮箱已被注册');
+    }
+
+    const response = await User.create({
+      email,
+      password
+    });
+
+    // 根据 id 获取用户信息
+    const user = await User.findById(response._id);
+
+    jsonRes(res, {
+      data: {
+        token: generateToken(user._id),
+        user
+      }
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/user/sendEmail.ts

@@ -0,0 +1,54 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { AuthCode } from '@/service/models/authCode';
+import { connectToDatabase } from '@/service/mongo';
+import { sendCode } from '@/service/utils/sendEmail';
+import { EmailTypeEnum } from '@/constants/common';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { email, type } = req.query;
+
+    if (!email || !type) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    let code = '';
+    for (let i = 0; i < 6; i++) {
+      code += Math.floor(Math.random() * 10);
+    }
+
+    // 判断 1 分钟内是否有重复数据
+    const authCode = await AuthCode.findOne({
+      email,
+      type,
+      expiredTime: { $gte: Date.now() + 4 * 60 * 1000 } // 如果有一个记录的过期时间，大于当前+4分钟，说明距离上次发送还没到1分钟。（因为默认创建时，过期时间是未来5分钟）
+    });
+
+    if (authCode) {
+      throw new Error('请勿频繁获取验证码');
+    }
+
+    // 创建 auth 记录
+    await AuthCode.create({
+      email,
+      type,
+      code
+    });
+
+    // 发送验证码
+    await sendCode(email as string, code, type as `${EmailTypeEnum}`);
+
+    jsonRes(res, {
+      message: '发送验证码成功'
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/user/tokenLogin.ts

@@ -0,0 +1,36 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { connectToDatabase } from '@/service/mongo';
+import { User } from '@/service/models/user';
+import { authToken } from '@/service/utils/tools';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('缺少参数');
+    }
+
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 根据 id 获取用户信息
+    const user = await User.findById(userId);
+
+    if (!user) {
+      throw new Error('账号异常');
+    }
+
+    jsonRes(res, {
+      data: user
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/user/update.ts

@@ -0,0 +1,41 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { User } from '@/service/models/user';
+import { connectToDatabase } from '@/service/mongo';
+import { authToken } from '@/service/utils/tools';
+import { UserUpdateParams } from '@/types/user';
+
+/* 更新一些基本信息 */
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { accounts } = req.body as UserUpdateParams;
+    const { authorization } = req.headers;
+
+    if (!authorization) {
+      throw new Error('缺少参数');
+    }
+
+    const userId = await authToken(authorization);
+
+    await connectToDatabase();
+
+    // 更新对应的记录
+    await User.updateOne(
+      {
+        _id: userId
+      },
+      {
+        // 限定字段
+        ...(accounts ? { accounts } : {})
+      }
+    );
+
+    jsonRes(res);
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/api/user/updatePasswordByCode.ts

@@ -0,0 +1,59 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/response';
+import { User } from '@/service/models/user';
+import { AuthCode } from '@/service/models/authCode';
+import { connectToDatabase } from '@/service/mongo';
+import { generateToken } from '@/service/utils/tools';
+import { EmailTypeEnum } from '@/constants/common';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    const { email, code, password } = req.body;
+
+    if (!email || !code || !password) {
+      throw new Error('缺少参数');
+    }
+
+    await connectToDatabase();
+
+    // 验证码校验
+    const authCode = await AuthCode.findOne({
+      email,
+      code,
+      type: EmailTypeEnum.findPassword,
+      expiredTime: { $gte: Date.now() }
+    });
+
+    if (!authCode) {
+      throw new Error('验证码错误');
+    }
+
+    // 更新对应的记录
+    await User.updateOne(
+      {
+        email
+      },
+      {
+        password
+      }
+    );
+
+    // 根据 email 获取用户信息
+    const user = await User.findOne({
+      email
+    });
+
+    jsonRes(res, {
+      data: {
+        token: generateToken(user._id),
+        user
+      }
+    });
+  } catch (err) {
+    jsonRes(res, {
+      code: 500,
+      error: err
+    });
+  }
+}

src/pages/chat/index.tsx

@@ -0,0 +1,390 @@
+import React, { useCallback, useState, useRef, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import {
+  getInitChatSiteInfo,
+  postGPT3SendPrompt,
+  getChatGPTSendEvent,
+  postChatGptPrompt,
+  delLastMessage
+} from '@/api/chat';
+import { ChatSiteItemType, ChatSiteType } from '@/types/chat';
+import { Textarea, Box, Flex, Button } from '@chakra-ui/react';
+import { useToast } from '@/hooks/useToast';
+import Icon from '@/components/Icon';
+import { useScreen } from '@/hooks/useScreen';
+import Markdown from '@/components/Markdown';
+import { useQuery } from '@tanstack/react-query';
+import { useLoading } from '@/hooks/useLoading';
+import { OpenAiModelEnum } from '@/constants/model';
+
+const Chat = () => {
+  const { toast } = useToast();
+  const router = useRouter();
+  const { media } = useScreen();
+  const { chatId, windowId } = router.query as { chatId: string; windowId?: string };
+  const ChatBox = useRef<HTMLDivElement>(null);
+  const TextareaDom = useRef<HTMLTextAreaElement>(null);
+
+  const [chatSiteData, setChatSiteData] = useState<ChatSiteType>(); // 聊天框整体数据
+  const [chatList, setChatList] = useState<ChatSiteItemType[]>([]); // 对话内容
+  const [inputVal, setInputVal] = useState(''); // 输入的内容
+
+  const isChatting = useMemo(() => chatList[chatList.length - 1]?.status === 'loading', [chatList]);
+  const lastWordHuman = useMemo(() => chatList[chatList.length - 1]?.obj === 'Human', [chatList]);
+  const { Loading } = useLoading();
+
+  // 滚动到底部
+  const scrollToBottom = useCallback(() => {
+    // 滚动到底部
+    setTimeout(() => {
+      ChatBox.current &&
+        ChatBox.current.scrollTo({
+          top: ChatBox.current.scrollHeight,
+          behavior: 'smooth'
+        });
+    }, 100);
+  }, []);
+
+  // 初始化聊天框
+  useQuery([chatId, windowId], () => (chatId ? getInitChatSiteInfo(chatId, windowId) : null), {
+    cacheTime: 5 * 60 * 1000,
+    onSuccess(res) {
+      if (!res) return;
+      router.replace(`/chat?chatId=${chatId}&windowId=${res.windowId}`);
+
+      setChatSiteData(res.chatSite);
+      setChatList(
+        res.history.map((item) => ({
+          ...item,
+          status: 'finish'
+        }))
+      );
+      scrollToBottom();
+    },
+    onError() {
+      toast({
+        title: '初始化异常',
+        status: 'error'
+      });
+    }
+  });
+
+  // gpt3 方法
+  const gpt3ChatPrompt = useCallback(
+    async (newChatList: ChatSiteItemType[]) => {
+      // 请求内容
+      const response = await postGPT3SendPrompt({
+        prompt: newChatList,
+        chatId: chatId as string
+      });
+
+      // 更新 AI 的内容
+      setChatList((state) =>
+        state.map((item, index) => {
+          if (index !== state.length - 1) return item;
+          return {
+            ...item,
+            status: 'finish',
+            value: response
+          };
+        })
+      );
+    },
+    [chatId]
+  );
+
+  // chatGPT
+  const chatGPTPrompt = useCallback(
+    async (newChatList: ChatSiteItemType[]) => {
+      if (!windowId) return;
+      /* 预请求，把消息存入库 */
+      await postChatGptPrompt({
+        windowId,
+        prompt: newChatList[newChatList.length - 1],
+        chatId
+      });
+
+      return new Promise((resolve, reject) => {
+        const event = getChatGPTSendEvent(chatId, windowId);
+        event.onmessage = ({ data }) => {
+          if (data === '[DONE]') {
+            event.close();
+            setChatList((state) =>
+              state.map((item, index) => {
+                if (index !== state.length - 1) return item;
+                return {
+                  ...item,
+                  status: 'finish'
+                };
+              })
+            );
+            resolve('');
+          } else if (data) {
+            const msg = data.replace(/<br\/>/g, '\n');
+            setChatList((state) =>
+              state.map((item, index) => {
+                if (index !== state.length - 1) return item;
+                return {
+                  ...item,
+                  value: item.value + msg
+                };
+              })
+            );
+          }
+        };
+        event.onerror = (err) => {
+          console.error(err, '===');
+          event.close();
+          reject('对话出现错误');
+        };
+      });
+    },
+    [chatId, windowId]
+  );
+
+  /**
+   * 发送一个内容
+   */
+  const sendPrompt = useCallback(async () => {
+    const storeInput = inputVal;
+    // 去除空行
+    const val = inputVal
+      .trim()
+      .split('\n')
+      .filter((val) => val)
+      .join('\n\n');
+    if (!chatSiteData?.modelId || !val || !ChatBox.current || isChatting) {
+      return;
+    }
+
+    const newChatList: ChatSiteItemType[] = [
+      ...chatList,
+      {
+        obj: 'Human',
+        value: val,
+        status: 'finish'
+      },
+      {
+        obj: 'AI',
+        value: '',
+        status: 'loading'
+      }
+    ];
+
+    // 插入内容
+    setChatList(newChatList);
+    setInputVal('');
+    // 滚动到底部
+    setTimeout(() => {
+      scrollToBottom();
+
+      if (TextareaDom.current) {
+        TextareaDom.current.style.height = 22 + 'px';
+      }
+    }, 100);
+
+    const fnMap: { [key: string]: any } = {
+      [OpenAiModelEnum.GPT35]: chatGPTPrompt,
+      [OpenAiModelEnum.GPT3]: gpt3ChatPrompt
+    };
+
+    try {
+      /* 对长度进行限制 */
+      const maxContext = chatSiteData.secret.contextMaxLen;
+      const requestPrompt =
+        newChatList.length > maxContext + 2
+          ? [newChatList[0], ...newChatList.slice(newChatList.length - maxContext - 1, -1)]
+          : newChatList.slice(0, newChatList.length - 1);
+
+      if (typeof fnMap[chatSiteData.chatModel] === 'function') {
+        await fnMap[chatSiteData.chatModel](requestPrompt);
+      }
+    } catch (err) {
+      toast({
+        title: typeof err === 'string' ? err : '聊天已过期',
+        status: 'warning',
+        duration: 5000,
+        isClosable: true
+      });
+
+      setInputVal(storeInput);
+
+      setChatList(newChatList.slice(0, newChatList.length - 2));
+    }
+  }, [
+    chatGPTPrompt,
+    chatList,
+    chatSiteData,
+    gpt3ChatPrompt,
+    inputVal,
+    isChatting,
+    scrollToBottom,
+    toast
+  ]);
+
+  // 重新编辑
+  const reEdit = useCallback(async () => {
+    if (chatList[chatList.length - 1]?.obj !== 'Human') return;
+    // 删除数据库最后一句
+    delLastMessage(windowId);
+    const val = chatList[chatList.length - 1].value;
+
+    setInputVal(val);
+
+    setChatList(chatList.slice(0, -1));
+
+    setTimeout(() => {
+      if (TextareaDom.current) {
+        TextareaDom.current.style.height = val.split('\n').length * 22 + 'px';
+      }
+    }, 100);
+  }, [chatList, windowId]);
+
+  return (
+    <Flex h={'100vh'} flexDirection={'column'} overflowY={'hidden'}>
+      {/* 头部 */}
+      <Flex
+        px={4}
+        h={'50px'}
+        alignItems={'center'}
+        backgroundColor={'white'}
+        boxShadow={'0 5px 10px rgba(0,0,0,0.1)'}
+        zIndex={1}
+      >
+        <Box flex={1}>{chatSiteData?.name}</Box>
+        {/* 重置按键 */}
+        <Box cursor={'pointer'} onClick={() => router.replace(`/chat?chatId=${chatId}`)}>
+          <Icon name={'icon-zhongzhi'} width={20} height={20} color={'#718096'}></Icon>
+        </Box>
+        {/* 滚动到底部按键 */}
+        {/* 滚动到底部 */}
+        {ChatBox.current && ChatBox.current.scrollHeight > 2 * ChatBox.current.clientHeight && (
+          <Box ml={10} cursor={'pointer'} onClick={scrollToBottom}>
+            <Icon
+              name={'icon-xiangxiazhankai-xianxingyuankuang'}
+              width={25}
+              height={25}
+              color={'#718096'}
+            ></Icon>
+          </Box>
+        )}
+      </Flex>
+      {/* 聊天内容 */}
+      <Box ref={ChatBox} flex={'1 0 0'} h={0} w={'100%'} px={0} pb={10} overflowY={'auto'}>
+        {chatList.map((item, index) => (
+          <Box
+            key={index}
+            py={media(9, 6)}
+            px={media(4, 3)}
+            backgroundColor={index % 2 === 0 ? 'rgba(247,247,248,1)' : '#fff'}
+            borderBottom={'1px solid rgba(0,0,0,0.1)'}
+          >
+            <Flex maxW={'800px'} m={'auto'} alignItems={'flex-start'}>
+              <Box mr={4}>
+                <Image
+                  src={item.obj === 'Human' ? '/imgs/human.png' : '/imgs/modelAvatar.png'}
+                  alt="/imgs/modelAvatar.png"
+                  width={30}
+                  height={30}
+                ></Image>
+              </Box>
+              <Box flex={'1 0 0'} w={0} overflowX={'auto'}>
+                <Markdown
+                  source={item.value}
+                  isChatting={isChatting && index === chatList.length - 1}
+                />
+              </Box>
+            </Flex>
+          </Box>
+        ))}
+      </Box>
+      <Box
+        m={media('20px auto', '0 auto')}
+        w={media('100vw', '100%')}
+        maxW={'800px'}
+        boxShadow={'0 -14px 30px rgba(255,255,255,0.6)'}
+      >
+        {lastWordHuman ? (
+          <Box textAlign={'center'}>
+            <Box color={'red'}>对话出现了异常</Box>
+            <Flex py={5} justifyContent={'center'}>
+              <Button
+                mr={20}
+                onClick={() => router.replace(`/chat?chatId=${chatId}`)}
+                colorScheme={'green'}
+              >
+                重开对话
+              </Button>
+              <Button onClick={reEdit}>重新编辑最后一句</Button>
+            </Flex>
+          </Box>
+        ) : (
+          <Box
+            py={5}
+            position={'relative'}
+            boxShadow={'base'}
+            overflow={'hidden'}
+            borderRadius={media('md', 'none')}
+          >
+            {/* 输入框 */}
+            <Textarea
+              ref={TextareaDom}
+              w={'100%'}
+              pr={'45px'}
+              py={0}
+              border={'none'}
+              _focusVisible={{
+                border: 'none'
+              }}
+              placeholder="提问"
+              resize={'none'}
+              value={inputVal}
+              rows={1}
+              height={'22px'}
+              lineHeight={'22px'}
+              maxHeight={'150px'}
+              maxLength={chatSiteData?.secret.contentMaxLen || -1}
+              overflowY={'auto'}
+              onChange={(e) => {
+                const textarea = e.target;
+                setInputVal(textarea.value);
+
+                textarea.style.height = textarea.value.split('\n').length * 22 + 'px';
+              }}
+              onKeyDown={(e) => {
+                // 触发快捷发送
+                if (e.keyCode === 13 && !e.shiftKey) {
+                  sendPrompt();
+                  e.preventDefault();
+                }
+                // 全选内容
+                // @ts-ignore
+                e.key === 'a' && e.ctrlKey && e.target?.select();
+              }}
+            />
+            {/* 发送和等待按键 */}
+            <Box position={'absolute'} bottom={5} right={media('20px', '10px')}>
+              {isChatting ? (
+                <Image
+                  style={{ transform: 'translateY(4px)' }}
+                  src={'/icon/chatting.svg'}
+                  width={30}
+                  height={30}
+                  alt={''}
+                />
+              ) : (
+                <Box cursor={'pointer'} onClick={sendPrompt}>
+                  <Icon name={'icon-fasong'} width={20} height={20} color={'#718096'}></Icon>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        )}
+      </Box>
+      <Loading loading={!chatSiteData} />
+    </Flex>
+  );
+};
+
+export default Chat;

src/pages/index.tsx

@@ -1,123 +1,17 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from '@next/font/google'
-import styles from '@/styles/Home.module.css'
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { Card, Text, Box, Heading, Flex } from '@chakra-ui/react';
+import Markdown from '@/components/Markdown';
+import { introPage } from '@/constants/common';
 
-const inter = Inter({ subsets: ['latin'] })
+const Home = () => {
+  const router = useRouter();
 
-export default function Home() {
   return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={styles.main}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>src/pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
+    <Card p={5} lineHeight={2}>
+      <Markdown source={introPage} isChatting={false} />
+    </Card>
+  );
+};
 
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-          <div className={styles.thirteen}>
-            <Image
-              src="/thirteen.svg"
-              alt="13"
-              width={40}
-              height={31}
-              priority
-            />
-          </div>
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2 className={inter.className}>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p className={inter.className}>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-    </>
-  )
-}
+export default Home;

src/pages/login/components/ForgetPasswordForm.tsx

@@ -0,0 +1,193 @@
+import React, { useState, Dispatch, useCallback } from 'react';
+import {
+  FormControl,
+  Box,
+  Input,
+  Button,
+  FormErrorMessage,
+  useToast,
+  Flex
+} from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { PageTypeEnum } from '../../../constants/user';
+import { postFindPassword } from '@/api/user';
+import { useSendCode } from '@/hooks/useSendCode';
+import type { ResLogin } from '@/api/response/user';
+import { useScreen } from '@/hooks/useScreen';
+
+interface Props {
+  setPageType: Dispatch<`${PageTypeEnum}`>;
+  loginSuccess: (e: ResLogin) => void;
+}
+
+interface RegisterType {
+  email: string;
+  code: string;
+  password: string;
+  password2: string;
+}
+
+const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
+  const toast = useToast();
+  const { mediaLgMd } = useScreen();
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    trigger,
+    formState: { errors }
+  } = useForm<RegisterType>({
+    mode: 'onBlur'
+  });
+
+  const { codeSending, sendCodeText, sendCode, codeCountDown } = useSendCode();
+
+  const onclickSendCode = useCallback(async () => {
+    const check = await trigger('email');
+    if (!check) return;
+    sendCode({
+      email: getValues('email'),
+      type: 'findPassword'
+    });
+  }, [getValues, sendCode, trigger]);
+
+  const [requesting, setRequesting] = useState(false);
+
+  const onclickFindPassword = useCallback(
+    async ({ email, code, password }: RegisterType) => {
+      setRequesting(true);
+      try {
+        loginSuccess(
+          await postFindPassword({
+            email,
+            code,
+            password
+          })
+        );
+        toast({
+          title: `密码已找回`,
+          status: 'success',
+          position: 'top'
+        });
+      } catch (error) {
+        typeof error === 'string' &&
+          toast({
+            title: error,
+            status: 'error',
+            position: 'top'
+          });
+      }
+      setRequesting(false);
+    },
+    [loginSuccess, toast]
+  );
+
+  return (
+    <>
+      <Box fontWeight={'bold'} fontSize={'2xl'} textAlign={'center'}>
+        找回 DocGPT 账号
+      </Box>
+      <form onSubmit={handleSubmit(onclickFindPassword)}>
+        <FormControl mt={8} isInvalid={!!errors.email}>
+          <Input
+            placeholder="邮箱"
+            size={mediaLgMd}
+            {...register('email', {
+              required: '邮箱不能为空',
+              pattern: {
+                value: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/,
+                message: '邮箱错误'
+              }
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.email && errors.email.message}
+          </FormErrorMessage>
+        </FormControl>
+        <FormControl mt={8} isInvalid={!!errors.email}>
+          <Flex>
+            <Input
+              flex={1}
+              placeholder="验证码"
+              size={mediaLgMd}
+              {...register('code', {
+                required: '验证码不能为空'
+              })}
+            ></Input>
+            <Button
+              ml={5}
+              w={'145px'}
+              maxW={'50%'}
+              size={mediaLgMd}
+              onClick={onclickSendCode}
+              isDisabled={codeCountDown > 0}
+              isLoading={codeSending}
+            >
+              {sendCodeText}
+            </Button>
+          </Flex>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.code && errors.code.message}
+          </FormErrorMessage>
+        </FormControl>
+        <FormControl mt={8} isInvalid={!!errors.password}>
+          <Input
+            type={'password'}
+            placeholder="新密码"
+            size={mediaLgMd}
+            {...register('password', {
+              required: '密码不能为空',
+              minLength: {
+                value: 4,
+                message: '密码最少4位最多12位'
+              },
+              maxLength: {
+                value: 12,
+                message: '密码最少4位最多12位'
+              }
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.password && errors.password.message}
+          </FormErrorMessage>
+        </FormControl>
+        <FormControl mt={8} isInvalid={!!errors.password2}>
+          <Input
+            type={'password'}
+            placeholder="确认密码"
+            size={mediaLgMd}
+            {...register('password2', {
+              validate: (val) => (getValues('password') === val ? true : '两次密码不一致')
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.password2 && errors.password2.message}
+          </FormErrorMessage>
+        </FormControl>
+        <Box
+          float={'right'}
+          fontSize="sm"
+          mt={2}
+          color={'blue.600'}
+          cursor={'pointer'}
+          _hover={{ textDecoration: 'underline' }}
+          onClick={() => setPageType('login')}
+        >
+          去登录
+        </Box>
+        <Button
+          type="submit"
+          mt={8}
+          w={'100%'}
+          size={mediaLgMd}
+          colorScheme="blue"
+          isLoading={requesting}
+        >
+          找回密码
+        </Button>
+      </form>
+    </>
+  );
+};
+
+export default RegisterForm;

src/pages/login/components/LoginForm.tsx

@@ -0,0 +1,134 @@
+import React, { useState, Dispatch, useCallback } from 'react';
+import { FormControl, Flex, Input, Button, FormErrorMessage, Box } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { PageTypeEnum } from '@/constants/user';
+import { postLogin } from '@/api/user';
+import type { ResLogin } from '@/api/response/user';
+import { useToast } from '@/hooks/useToast';
+import { useScreen } from '@/hooks/useScreen';
+
+interface Props {
+  setPageType: Dispatch<`${PageTypeEnum}`>;
+  loginSuccess: (e: ResLogin) => void;
+}
+
+interface LoginFormType {
+  email: string;
+  password: string;
+}
+
+const LoginForm = ({ setPageType, loginSuccess }: Props) => {
+  const { toast } = useToast();
+  const { mediaLgMd } = useScreen();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<LoginFormType>();
+
+  const [requesting, setRequesting] = useState(false);
+
+  const onclickLogin = useCallback(
+    async ({ email, password }: LoginFormType) => {
+      setRequesting(true);
+      try {
+        loginSuccess(
+          await postLogin({
+            email,
+            password
+          })
+        );
+        toast({
+          title: '登录成功',
+          status: 'success'
+        });
+      } catch (error) {
+        typeof error === 'string' &&
+          toast({
+            title: error,
+            status: 'error',
+            position: 'top'
+          });
+      }
+      setRequesting(false);
+    },
+    [loginSuccess, toast]
+  );
+
+  return (
+    <>
+      <Box fontWeight={'bold'} fontSize={'2xl'} textAlign={'center'}>
+        登录 DocGPT
+      </Box>
+      <form onSubmit={handleSubmit(onclickLogin)}>
+        <FormControl mt={8} isInvalid={!!errors.email}>
+          <Input
+            placeholder="邮箱"
+            size={mediaLgMd}
+            {...register('email', {
+              required: '邮箱不能为空',
+              pattern: {
+                value: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/,
+                message: '邮箱错误'
+              }
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.email && errors.email.message}
+          </FormErrorMessage>
+        </FormControl>
+        <FormControl mt={8} isInvalid={!!errors.password}>
+          <Input
+            type={'password'}
+            size={mediaLgMd}
+            placeholder="密码"
+            {...register('password', {
+              required: '密码不能为空',
+              minLength: {
+                value: 4,
+                message: '密码最少4位最多12位'
+              },
+              maxLength: {
+                value: 12,
+                message: '密码最少4位最多12位'
+              }
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.password && errors.password.message}
+          </FormErrorMessage>
+        </FormControl>
+        <Flex align={'center'} justifyContent={'space-between'} mt={6} color={'blue.600'}>
+          <Box
+            cursor={'pointer'}
+            _hover={{ textDecoration: 'underline' }}
+            onClick={() => setPageType('forgetPassword')}
+            fontSize="sm"
+          >
+            忘记密码?
+          </Box>
+          <Box
+            cursor={'pointer'}
+            _hover={{ textDecoration: 'underline' }}
+            onClick={() => setPageType('register')}
+            fontSize="sm"
+          >
+            注册账号
+          </Box>
+        </Flex>
+        <Button
+          type="submit"
+          mt={8}
+          w={'100%'}
+          size={mediaLgMd}
+          colorScheme="blue"
+          isLoading={requesting}
+        >
+          登录
+        </Button>
+      </form>
+    </>
+  );
+};
+
+export default LoginForm;

src/pages/login/components/RegisterForm.tsx

@@ -0,0 +1,193 @@
+import React, { useState, Dispatch, useCallback } from 'react';
+import {
+  FormControl,
+  Box,
+  Input,
+  Button,
+  FormErrorMessage,
+  useToast,
+  Flex
+} from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { PageTypeEnum } from '@/constants/user';
+import { postRegister } from '@/api/user';
+import { useSendCode } from '@/hooks/useSendCode';
+import type { ResLogin } from '@/api/response/user';
+import { useScreen } from '@/hooks/useScreen';
+
+interface Props {
+  loginSuccess: (e: ResLogin) => void;
+  setPageType: Dispatch<`${PageTypeEnum}`>;
+}
+
+interface RegisterType {
+  email: string;
+  password: string;
+  password2: string;
+  code: string;
+}
+
+const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
+  const toast = useToast();
+  const { mediaLgMd } = useScreen();
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    trigger,
+    formState: { errors }
+  } = useForm<RegisterType>({
+    mode: 'onBlur'
+  });
+
+  const { codeSending, sendCodeText, sendCode, codeCountDown } = useSendCode();
+
+  const onclickSendCode = useCallback(async () => {
+    const check = await trigger('email');
+    if (!check) return;
+    sendCode({
+      email: getValues('email'),
+      type: 'register'
+    });
+  }, [getValues, sendCode, trigger]);
+
+  const [requesting, setRequesting] = useState(false);
+
+  const onclickRegister = useCallback(
+    async ({ email, password, code }: RegisterType) => {
+      setRequesting(true);
+      try {
+        loginSuccess(
+          await postRegister({
+            email,
+            code,
+            password
+          })
+        );
+        toast({
+          title: `注册成功`,
+          status: 'success',
+          position: 'top'
+        });
+      } catch (error) {
+        typeof error === 'string' &&
+          toast({
+            title: error,
+            status: 'error',
+            position: 'top'
+          });
+      }
+      setRequesting(false);
+    },
+    [loginSuccess, toast]
+  );
+
+  return (
+    <>
+      <Box fontWeight={'bold'} fontSize={'2xl'} textAlign={'center'}>
+        注册 DocGPT 账号
+      </Box>
+      <form onSubmit={handleSubmit(onclickRegister)}>
+        <FormControl mt={8} isInvalid={!!errors.email}>
+          <Input
+            placeholder="邮箱"
+            size={mediaLgMd}
+            {...register('email', {
+              required: '邮箱不能为空',
+              pattern: {
+                value: /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/,
+                message: '邮箱错误'
+              }
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.email && errors.email.message}
+          </FormErrorMessage>
+        </FormControl>
+        <FormControl mt={8} isInvalid={!!errors.email}>
+          <Flex>
+            <Input
+              flex={1}
+              size={mediaLgMd}
+              placeholder="验证码"
+              {...register('code', {
+                required: '验证码不能为空'
+              })}
+            ></Input>
+            <Button
+              ml={5}
+              w={'145px'}
+              maxW={'50%'}
+              size={mediaLgMd}
+              onClick={onclickSendCode}
+              isDisabled={codeCountDown > 0}
+              isLoading={codeSending}
+            >
+              {sendCodeText}
+            </Button>
+          </Flex>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.code && errors.code.message}
+          </FormErrorMessage>
+        </FormControl>
+        <FormControl mt={8} isInvalid={!!errors.password}>
+          <Input
+            type={'password'}
+            placeholder="密码"
+            size={mediaLgMd}
+            {...register('password', {
+              required: '密码不能为空',
+              minLength: {
+                value: 4,
+                message: '密码最少4位最多12位'
+              },
+              maxLength: {
+                value: 12,
+                message: '密码最少4位最多12位'
+              }
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.password && errors.password.message}
+          </FormErrorMessage>
+        </FormControl>
+        <FormControl mt={8} isInvalid={!!errors.password2}>
+          <Input
+            type={'password'}
+            placeholder="确认密码"
+            size={mediaLgMd}
+            {...register('password2', {
+              validate: (val) => (getValues('password') === val ? true : '两次密码不一致')
+            })}
+          ></Input>
+          <FormErrorMessage position={'absolute'} fontSize="xs">
+            {!!errors.password2 && errors.password2.message}
+          </FormErrorMessage>
+        </FormControl>
+        <Box
+          float={'right'}
+          fontSize="sm"
+          mt={2}
+          color={'blue.600'}
+          cursor={'pointer'}
+          _hover={{ textDecoration: 'underline' }}
+          onClick={() => setPageType('login')}
+        >
+          已有账号，去登录
+        </Box>
+        <Button
+          type="submit"
+          mt={8}
+          w={'100%'}
+          size={mediaLgMd}
+          colorScheme="blue"
+          isLoading={requesting}
+        >
+          确认注册
+        </Button>
+      </form>
+    </>
+  );
+};
+
+export default RegisterForm;

src/pages/login/index.module.scss

@@ -0,0 +1,7 @@
+.loginPage {
+  background: url('/icon/login-bg.svg') no-repeat;
+  background-size: cover;
+  height: 100vh;
+  width: 100vw;
+  user-select: none;
+}

src/pages/login/index.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useCallback } from 'react';
+import styles from './index.module.scss';
+import { Box, Flex, Image } from '@chakra-ui/react';
+import { PageTypeEnum } from '@/constants/user';
+import LoginForm from './components/LoginForm';
+import RegisterForm from './components/RegisterForm';
+import ForgetPasswordForm from './components/ForgetPasswordForm';
+import { useScreen } from '@/hooks/useScreen';
+import type { ResLogin } from '@/api/response/user';
+import { useRouter } from 'next/router';
+import { useUserStore } from '@/store/user';
+
+const Login = () => {
+  const router = useRouter();
+  const { isPc } = useScreen();
+  const [pageType, setPageType] = useState<`${PageTypeEnum}`>(PageTypeEnum.login);
+  const { setUserInfo } = useUserStore();
+
+  const loginSuccess = useCallback(
+    (res: ResLogin) => {
+      setUserInfo(res.user, res.token);
+      router.push('/');
+    },
+    [router, setUserInfo]
+  );
+
+  const map = {
+    [PageTypeEnum.login]: {
+      Component: <LoginForm setPageType={setPageType} loginSuccess={loginSuccess} />,
+      img: '/icon/loginLeft.svg'
+    },
+    [PageTypeEnum.register]: {
+      Component: <RegisterForm setPageType={setPageType} loginSuccess={loginSuccess} />,
+      img: '/icon/loginLeft.svg'
+    },
+    [PageTypeEnum.forgetPassword]: {
+      Component: <ForgetPasswordForm setPageType={setPageType} loginSuccess={loginSuccess} />,
+      img: '/icon/loginLeft.svg'
+    }
+  };
+
+  return (
+    <Box className={styles.loginPage} p={isPc ? '10vh 10vw' : 0}>
+      <Flex
+        maxW={'1240px'}
+        m={'auto'}
+        backgroundColor={'#fff'}
+        height="100%"
+        alignItems={'center'}
+        justifyContent={'center'}
+        p={10}
+        borderRadius={isPc ? 'md' : 'none'}
+        gap={5}
+      >
+        {isPc && (
+          <Image
+            src={map[pageType].img}
+            order={pageType === PageTypeEnum.login ? 0 : 2}
+            flex={'1 0 0'}
+            w="0"
+            maxW={'600px'}
+            height={'100%'}
+            maxH={'450px'}
+            alt=""
+          />
+        )}
+
+        <Box
+          order={1}
+          flex={`0 0 ${isPc ? '400px' : '100%'}`}
+          height={'100%'}
+          maxH={'450px'}
+          border="1px"
+          borderColor="gray.200"
+          py={5}
+          px={10}
+          borderRadius={isPc ? 'md' : 'none'}
+        >
+          {map[pageType].Component}
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Login;

src/pages/model/components/CreateModel.tsx

@@ -0,0 +1,126 @@
+import React, { Dispatch, useState, useCallback } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  FormControl,
+  FormErrorMessage,
+  Button,
+  useToast,
+  Input,
+  Select
+} from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { postCreateModel } from '@/api/model';
+import { ModelType } from '@/types/model';
+import { OpenAiList } from '@/constants/model';
+
+interface CreateFormType {
+  name: string;
+  serviceModelName: string;
+}
+
+const CreateModel = ({
+  isOpen,
+  setCreateModelOpen,
+  onSuccess
+}: {
+  isOpen: boolean;
+  setCreateModelOpen: Dispatch<boolean>;
+  onSuccess: Dispatch<ModelType>;
+}) => {
+  const [requesting, setRequesting] = useState(false);
+  const toast = useToast({
+    duration: 2000,
+    position: 'top'
+  });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<CreateFormType>({
+    defaultValues: {
+      serviceModelName: OpenAiList[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={isOpen} 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: '底层模型不能为空'
+                })}
+              >
+                {OpenAiList.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>
+          </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/components/ModelEditForm.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback } from 'react';
+import { Grid, Box, Card, Flex, Button, FormControl, Input, Textarea } from '@chakra-ui/react';
+import type { ModelType } from '@/types/model';
+import { useForm } from 'react-hook-form';
+import { useToast } from '@/hooks/useToast';
+import { putModelById } from '@/api/model';
+import { useScreen } from '@/hooks/useScreen';
+import { useGlobalStore } from '@/store/global';
+
+const ModelEditForm = ({ model }: { model: ModelType }) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm<ModelType>({
+    defaultValues: model
+  });
+  const { setLoading } = useGlobalStore();
+  const { toast } = useToast();
+  const { isPc } = useScreen();
+
+  const onclickSave = useCallback(
+    async (data: ModelType) => {
+      setLoading(true);
+      try {
+        await putModelById(data._id, {
+          name: data.name,
+          systemPrompt: data.systemPrompt,
+          service: data.service,
+          security: data.security
+        });
+        toast({
+          title: '更新成功',
+          status: 'success'
+        });
+      } catch (err) {
+        console.log(err);
+        toast({
+          title: err as string,
+          status: 'success'
+        });
+      }
+      setLoading(false);
+    },
+    [setLoading, toast]
+  );
+  const submitError = useCallback(() => {
+    // deep search message
+    const deepSearch = (obj: any): string => {
+      if (!obj) return '提交表单错误';
+      if (!!obj.message) {
+        return obj.message;
+      }
+      return deepSearch(Object.values(obj)[0]);
+    };
+    toast({
+      title: deepSearch(errors),
+      status: 'error',
+      duration: 4000,
+      isClosable: true
+    });
+  }, [errors, toast]);
+
+  return (
+    <Grid gridTemplateColumns={isPc ? '1fr 1fr' : '1fr'} gridGap={5}>
+      <Card p={4}>
+        <Flex justifyContent={'space-between'} alignItems={'center'}>
+          <Box fontWeight={'bold'} fontSize={'lg'}>
+            修改模型信息
+          </Box>
+          <Button onClick={handleSubmit(onclickSave, submitError)}>保存</Button>
+        </Flex>
+        <FormControl mt={5}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 80px'}>展示名称:</Box>
+            <Input
+              {...register('name', {
+                required: '展示名称不能为空'
+              })}
+            ></Input>
+          </Flex>
+        </FormControl>
+        <FormControl mt={5}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 80px'}>对话模型:</Box>
+            <Box>{model.service.modelName}</Box>
+          </Flex>
+        </FormControl>
+        <FormControl mt={5}>
+          <Textarea
+            rows={4}
+            maxLength={500}
+            {...register('systemPrompt')}
+            placeholder={'系统的提示词，会在进入聊天时放置在第一句，用于限定模型的聊天范围'}
+          />
+        </FormControl>
+      </Card>
+      <Card p={4}>
+        <Box fontWeight={'bold'} fontSize={'lg'}>
+          安全策略
+        </Box>
+        <FormControl mt={2}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 120px'}>单句最大长度:</Box>
+            <Input
+              flex={1}
+              type={'number'}
+              {...register('security.contentMaxLen', {
+                required: '单句长度不能为空',
+                min: {
+                  value: 0,
+                  message: '单句长度最小为0'
+                },
+                max: {
+                  value: 4000,
+                  message: '单句长度最长为4000'
+                },
+                valueAsNumber: true
+              })}
+            ></Input>
+          </Flex>
+        </FormControl>
+        <FormControl mt={5}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 120px'}>上下文最大长度:</Box>
+            <Input
+              flex={1}
+              type={'number'}
+              {...register('security.contextMaxLen', {
+                required: '上下文长度不能为空',
+                min: {
+                  value: 1,
+                  message: '上下文长度最小为5'
+                },
+                max: {
+                  value: 400000,
+                  message: '上下文长度最长为 400000'
+                },
+                valueAsNumber: true
+              })}
+            ></Input>
+          </Flex>
+        </FormControl>
+        <FormControl mt={5}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 120px'}>聊天过期时间:</Box>
+            <Input
+              flex={1}
+              type={'number'}
+              {...register('security.expiredTime', {
+                required: '聊天过期时间不能为空',
+                min: {
+                  value: 0.1,
+                  message: '聊天过期时间最小为0.1小时'
+                },
+                max: {
+                  value: 999999,
+                  message: '聊天过期时间最长为 999999 小时'
+                },
+                valueAsNumber: true
+              })}
+            ></Input>
+            <Box ml={3}>小时</Box>
+          </Flex>
+        </FormControl>
+        <FormControl mt={5} pb={5}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 130px'}>聊天最大加载次数:</Box>
+            <Box flex={1}>
+              <Input
+                type={'number'}
+                {...register('security.maxLoadAmount', {
+                  required: '聊天最大加载次数不能为空',
+                  max: {
+                    value: 999999,
+                    message: '聊天最大加载次数最小为 999999 次'
+                  },
+                  valueAsNumber: true
+                })}
+              ></Input>
+              <Box fontSize={'sm'} color={'blackAlpha.400'} position={'absolute'}>
+                设置为-1代表不限制次数
+              </Box>
+            </Box>
+            <Box ml={3}>次</Box>
+          </Flex>
+        </FormControl>
+      </Card>
+    </Grid>
+  );
+};
+
+export default ModelEditForm;

src/pages/model/components/ModelPhoneList.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box, Button, Flex, Heading, Tag } from '@chakra-ui/react';
+import type { ModelType } from '@/types/model';
+import { formatModelStatus } from '@/constants/model';
+import dayjs from 'dayjs';
+import { useRouter } from 'next/router';
+
+const ModelPhoneList = ({
+  models,
+  handlePreviewChat
+}: {
+  models: ModelType[];
+  handlePreviewChat: (_: string) => void;
+}) => {
+  const router = useRouter();
+
+  return (
+    <Box borderRadius={'md'} overflow={'hidden'} mb={5}>
+      {models.map((model) => (
+        <Box
+          key={model._id}
+          _notFirst={{ borderTop: '1px solid rgba(0,0,0,0.1)' }}
+          px={6}
+          py={3}
+          backgroundColor={'white'}
+        >
+          <Flex alignItems={'flex-start'}>
+            <Box flex={'1 0 0'} w={0} fontSize={'lg'} fontWeight={'bold'}>
+              {model.name}
+            </Box>
+            <Tag
+              colorScheme={formatModelStatus[model.status].colorTheme}
+              variant="solid"
+              px={3}
+              size={'md'}
+            >
+              {formatModelStatus[model.status].text}
+            </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>
+          </Flex>
+          <Flex mt={5}>
+            <Box flex={'0 0 100px'}>AI模型: </Box>
+            <Box color={'blackAlpha.500'}>{model.service.modelName}</Box>
+          </Flex>
+          <Flex mt={5}>
+            <Box flex={'0 0 100px'}>训练次数: </Box>
+            <Box color={'blackAlpha.500'}>{model.trainingTimes}次</Box>
+          </Flex>
+          <Flex mt={5} justifyContent={'flex-end'}>
+            <Button
+              mr={3}
+              variant={'outline'}
+              w={'100px'}
+              size={'sm'}
+              onClick={() => handlePreviewChat(model._id)}
+            >
+              体验
+            </Button>
+            <Button
+              size={'sm'}
+              w={'100px'}
+              onClick={() => router.push(`/model/detail?modelId=${model._id}`)}
+            >
+              编辑
+            </Button>
+          </Flex>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default ModelPhoneList;

src/pages/model/components/ModelTable.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Tag,
+  Card,
+  Box
+} from '@chakra-ui/react';
+import { formatModelStatus } from '@/constants/model';
+import dayjs from 'dayjs';
+import type { ModelType } from '@/types/model';
+import { useRouter } from 'next/router';
+
+const ModelTable = ({
+  models = [],
+  handlePreviewChat
+}: {
+  models: ModelType[];
+  handlePreviewChat: (_: string) => void;
+}) => {
+  const router = useRouter();
+  const columns = [
+    {
+      title: '模型名',
+      key: 'name',
+      dataIndex: 'name'
+    },
+    {
+      title: '最后更新时间',
+      key: 'updateTime',
+      render: (item: ModelType) => dayjs(item.updateTime).format('YYYY-MM-DD HH:mm')
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status',
+      render: (item: ModelType) => (
+        <Tag
+          colorScheme={formatModelStatus[item.status].colorTheme}
+          variant="solid"
+          px={3}
+          size={'md'}
+        >
+          {formatModelStatus[item.status].text}
+        </Tag>
+      )
+    },
+    {
+      title: 'AI模型',
+      key: 'service',
+      render: (item: ModelType) => (
+        <Box wordBreak={'break-all'} whiteSpace={'pre-wrap'} maxW={'200px'}>
+          {item.service.modelName}
+        </Box>
+      )
+    },
+    {
+      title: '训练次数',
+      key: 'trainingTimes',
+      dataIndex: 'trainingTimes'
+    },
+    {
+      title: '操作',
+      key: 'control',
+      render: (item: ModelType) => (
+        <>
+          <Button mr={3} onClick={() => handlePreviewChat(item._id)}>
+            对话
+          </Button>
+          <Button
+            colorScheme={'gray'}
+            onClick={() => router.push(`/model/detail?modelId=${item._id}`)}
+          >
+            编辑
+          </Button>
+        </>
+      )
+    }
+  ];
+
+  return (
+    <Card py={3}>
+      <TableContainer>
+        <Table variant={'simple'}>
+          <Thead>
+            <Tr>
+              {columns.map((item) => (
+                <Th key={item.key}>{item.title}</Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {models.map((item) => (
+              <Tr key={item._id}>
+                {columns.map((col) => (
+                  <Td key={col.key}>
+                    {col.render
+                      ? col.render(item)
+                      : !!col.dataIndex
+                      ? // @ts-ignore nextline
+                        item[col.dataIndex]
+                      : ''}
+                  </Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Card>
+  );
+};
+
+export default ModelTable;

src/pages/model/components/Training.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { Box, Card, TableContainer, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
+import { ModelType } from '@/types/model';
+import { getModelTrainings } from '@/api/model';
+import type { TrainingItemType } from '@/types/training';
+
+const Training = ({ model }: { model: ModelType }) => {
+  const columns: {
+    title: string;
+    key: keyof TrainingItemType;
+    dataIndex: string;
+  }[] = [
+    {
+      title: '训练ID',
+      key: 'tuneId',
+      dataIndex: 'tuneId'
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status'
+    }
+  ];
+
+  const [records, setRecords] = useState<TrainingItemType[]>([]);
+
+  const loadTrainingRecords = useCallback(async (id: string) => {
+    try {
+      const res = await getModelTrainings(id);
+      setRecords(res);
+    } catch (error) {
+      console.log(error);
+    }
+  }, []);
+
+  useEffect(() => {
+    model._id && loadTrainingRecords(model._id);
+  }, [loadTrainingRecords, model]);
+
+  return (
+    <Card p={4} h={'100%'}>
+      <Box fontWeight={'bold'} fontSize={'lg'}>
+        训练记录: {model.trainingTimes}次
+      </Box>
+      <TableContainer mt={4}>
+        <Table variant={'simple'}>
+          <Thead>
+            <Tr>
+              {columns.map((item) => (
+                <Th key={item.key}>{item.title}</Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {records.map((item) => (
+              <Tr key={item._id}>
+                {columns.map((col) => (
+                  // @ts-ignore
+                  <Td key={col.key}>{item[col.dataIndex]}</Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Card>
+  );
+};
+
+export default Training;

src/pages/model/detail.tsx

@@ -0,0 +1,247 @@
+import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import { getModelById, delModelById, postTrainModel, putModelTrainingStatus } from '@/api/model';
+import { getChatSiteId } from '@/api/chat';
+import type { ModelType } from '@/types/model';
+import { Card, Box, Flex, Button, Tag, Grid } from '@chakra-ui/react';
+import { useToast } from '@/hooks/useToast';
+import { useConfirm } from '@/hooks/useConfirm';
+import { formatModelStatus, ModelStatusEnum, OpenAiList } from '@/constants/model';
+import { useGlobalStore } from '@/store/global';
+import { useScreen } from '@/hooks/useScreen';
+import ModelEditForm from './components/ModelEditForm';
+import Icon from '@/components/Icon';
+import Training from './components/Training';
+
+const ModelDetail = () => {
+  const { toast } = useToast();
+  const router = useRouter();
+  const { isPc } = useScreen();
+  const { setLoading } = useGlobalStore();
+  const { openConfirm, ConfirmChild } = useConfirm({
+    content: '确认删除该模型?'
+  });
+  const SelectFileDom = useRef<HTMLInputElement>(null);
+
+  const { modelId } = router.query as { modelId: string };
+  const [model, setModel] = useState<ModelType>();
+
+  const canTrain = useMemo(() => {
+    const openai = OpenAiList.find((item) => item.model === model?.service.modelName);
+    return openai && openai.canTraining === true;
+  }, [model]);
+
+  /* 加载模型数据 */
+  const loadModel = useCallback(async () => {
+    if (!modelId) return;
+    setLoading(true);
+    try {
+      const res = await getModelById(modelId as string);
+      res.security.expiredTime /= 60 * 60 * 1000;
+      setModel(res);
+
+      console.log(res);
+    } catch (err) {
+      console.log(err);
+    }
+    setLoading(false);
+  }, [modelId, setLoading]);
+
+  useEffect(() => {
+    loadModel();
+  }, [loadModel, modelId]);
+
+  /* 点击删除 */
+  const handleDelModel = useCallback(async () => {
+    if (!model) return;
+    setLoading(true);
+    try {
+      await delModelById(model._id);
+      toast({
+        title: '删除成功',
+        status: 'success'
+      });
+      router.replace('/model/list');
+    } catch (err) {
+      console.log(err);
+    }
+    setLoading(false);
+  }, [setLoading, model, router, toast]);
+
+  /* 点前往聊天预览页 */
+  const handlePreviewChat = useCallback(async () => {
+    if (!model) return;
+    setLoading(true);
+    try {
+      const chatId = await getChatSiteId(model._id);
+
+      router.push(`/chat?chatId=${chatId}`);
+    } catch (err) {
+      console.log(err);
+    }
+    setLoading(false);
+  }, [setLoading, model, router]);
+
+  /* 上传数据集,触发微调 */
+  const startTraining = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!modelId || !e.target.files || e.target.files?.length === 0) return;
+      setLoading(true);
+      try {
+        const file = e.target.files[0];
+        const formData = new FormData();
+        formData.append('file', file);
+        await postTrainModel(modelId, formData);
+
+        toast({
+          title: '开始训练，大约需要 30 分钟',
+          status: 'success'
+        });
+
+        // 重新获取模型
+        loadModel();
+      } catch (err) {
+        toast({
+          title: typeof err === 'string' ? err : '文件格式错误',
+          status: 'error'
+        });
+        console.log(err);
+      }
+      setLoading(false);
+    },
+    [setLoading, loadModel, modelId, toast]
+  );
+
+  /* 点击更新模型状态 */
+  const handleClickUpdateStatus = useCallback(async () => {
+    if (!model || model.status !== ModelStatusEnum.training) return;
+    setLoading(true);
+
+    try {
+      await putModelTrainingStatus(model._id);
+      loadModel();
+    } catch (error) {
+      console.log(error);
+    }
+    setLoading(false);
+  }, [setLoading, loadModel, model]);
+
+  return (
+    <>
+      {!!model && (
+        <>
+          {/* 头部 */}
+          <Card px={6} py={3}>
+            {isPc ? (
+              <Flex alignItems={'center'}>
+                <Box fontSize={'xl'} fontWeight={'bold'}>
+                  {model.name} 配置
+                </Box>
+                <Tag
+                  ml={2}
+                  variant="solid"
+                  colorScheme={formatModelStatus[model.status].colorTheme}
+                  cursor={model.status === ModelStatusEnum.training ? 'pointer' : 'default'}
+                  onClick={handleClickUpdateStatus}
+                >
+                  {formatModelStatus[model.status].text}
+                </Tag>
+                <Box flex={1} />
+                <Button variant={'outline'} onClick={handlePreviewChat}>
+                  对话体验
+                </Button>
+              </Flex>
+            ) : (
+              <>
+                <Flex alignItems={'center'}>
+                  <Box as={'h3'} fontSize={'xl'} fontWeight={'bold'} flex={1}>
+                    {model.name} 配置
+                  </Box>
+                  <Tag ml={2} colorScheme={formatModelStatus[model.status].colorTheme}>
+                    {formatModelStatus[model.status].text}
+                  </Tag>
+                </Flex>
+                <Box mt={4} textAlign={'right'}>
+                  <Button variant={'outline'} onClick={handlePreviewChat}>
+                    对话体验
+                  </Button>
+                </Box>
+              </>
+            )}
+          </Card>
+          {/* 基本信息编辑 */}
+          <Box mt={5}>
+            <ModelEditForm model={model} />
+          </Box>
+          {/* 其他配置 */}
+          <Grid mt={5} gridTemplateColumns={isPc ? '1fr 1fr' : '1fr'} gridGap={5}>
+            <Training model={model} />
+            <Card h={'100%'} p={4}>
+              <Box fontWeight={'bold'} fontSize={'lg'}>
+                神奇操作
+              </Box>
+              <Flex mt={5} alignItems={'center'}>
+                <Box flex={'0 0 80px'}>模型微调:</Box>
+                <Button
+                  size={'sm'}
+                  onClick={() => {
+                    SelectFileDom.current?.click();
+                  }}
+                  title={!canTrain ? '' : '模型不支持微调'}
+                  isDisabled={!canTrain}
+                >
+                  上传微调数据集
+                </Button>
+                <Flex
+                  as={'a'}
+                  href="/TrainingTemplate.jsonl"
+                  download
+                  ml={5}
+                  cursor={'pointer'}
+                  alignItems={'center'}
+                  color={'blue.500'}
+                >
+                  <Icon name={'icon-yunxiazai'} color={'#3182ce'} />
+                  下载模板
+                </Flex>
+              </Flex>
+              {/* 提示 */}
+              <Box mt={3} py={3} color={'blackAlpha.500'}>
+                <Box as={'li'} lineHeight={1.9}>
+                  每行包括一个 prompt 和一个 completion
+                </Box>
+                <Box as={'li'} lineHeight={1.9}>
+                  prompt 必须以 \n\n###\n\n 结尾，且尽量保障每个 prompt
+                  内容不都是同一个标点结尾，可以加一个空格打断相同性，
+                </Box>
+                <Box as={'li'} lineHeight={1.9}>
+                  completion 开头必须有一个空格，末尾必须以 ### 结尾，同样的不要都是同一个标点结尾。
+                </Box>
+              </Box>
+              <Flex mt={5} alignItems={'center'}>
+                <Box flex={'0 0 80px'}>删除模型:</Box>
+                <Button
+                  colorScheme={'red'}
+                  size={'sm'}
+                  onClick={() => {
+                    openConfirm(() => {
+                      handleDelModel();
+                    });
+                  }}
+                >
+                  删除模型
+                </Button>
+              </Flex>
+            </Card>
+          </Grid>
+        </>
+      )}
+      <Box position={'absolute'} w={0} h={0} overflow={'hidden'}>
+        <input ref={SelectFileDom} type="file" accept=".jsonl" onChange={startTraining} />
+      </Box>
+      <ConfirmChild />
+    </>
+  );
+};
+
+export default ModelDetail;

src/pages/model/list.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Button, Flex, Card } from '@chakra-ui/react';
+import { getMyModels } from '@/api/model';
+import { getChatSiteId } from '@/api/chat';
+import { ModelType } from '@/types/model';
+import CreateModel from './components/CreateModel';
+import { useRouter } from 'next/router';
+import ModelTable from './components/ModelTable';
+import ModelPhoneList from './components/ModelPhoneList';
+import { useScreen } from '@/hooks/useScreen';
+import { useGlobalStore } from '@/store/global';
+
+const ModelList = () => {
+  const { isPc } = useScreen();
+  const router = useRouter();
+  const [models, setModels] = useState<ModelType[]>([]);
+  const [openCreateModel, setOpenCreateModel] = useState(false);
+  const { setLoading } = useGlobalStore();
+
+  /* 加载模型 */
+  const loadModels = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await getMyModels();
+      setModels(res);
+    } catch (err) {
+      console.log(err);
+    }
+    setLoading(false);
+  }, [setLoading]);
+  useEffect(() => {
+    loadModels();
+  }, [loadModels]);
+
+  /* 创建成功回调 */
+  const createModelSuccess = useCallback((data: ModelType) => {
+    setModels((state) => [data, ...state]);
+  }, []);
+
+  /* 点前往聊天预览页 */
+  const handlePreviewChat = useCallback(
+    async (modelId: string) => {
+      setLoading(true);
+      try {
+        const chatId = await getChatSiteId(modelId);
+
+        router.push(`/chat?chatId=${chatId}`, undefined, {
+          shallow: true
+        });
+      } catch (err) {
+        console.log(err);
+      }
+      setLoading(false);
+    },
+    [router, setLoading]
+  );
+
+  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={models} handlePreviewChat={handlePreviewChat} />
+        ) : (
+          <ModelPhoneList models={models} handlePreviewChat={handlePreviewChat} />
+        )}
+      </Box>
+      {/* 创建弹窗 */}
+      <CreateModel
+        isOpen={openCreateModel}
+        setCreateModelOpen={setOpenCreateModel}
+        onSuccess={createModelSuccess}
+      />
+    </Box>
+  );
+};
+
+export default ModelList;

src/pages/number/setting.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback } from 'react';
+import {
+  Card,
+  Box,
+  Flex,
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Select,
+  Input
+} from '@chakra-ui/react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { UserUpdateParams } from '@/types/user';
+import { putUserInfo } from '@/api/user';
+import { useToast } from '@/hooks/useToast';
+import { useGlobalStore } from '@/store/global';
+import { useUserStore } from '@/store/user';
+import { UserType } from '@/types/user';
+
+const NumberSetting = () => {
+  const { userInfo, updateUserInfo } = useUserStore();
+  const { setLoading } = useGlobalStore();
+  const { register, handleSubmit, control } = useForm<UserUpdateParams>({
+    defaultValues: userInfo as UserType
+  });
+  const { toast } = useToast();
+  const {
+    fields: accounts,
+    append: appendAccount,
+    remove: removeAccount
+  } = useFieldArray({
+    control,
+    name: 'accounts'
+  });
+
+  const onclickSave = useCallback(
+    async (data: UserUpdateParams) => {
+      setLoading(true);
+      try {
+        await putUserInfo(data);
+        updateUserInfo(data);
+        toast({
+          title: '更新成功',
+          status: 'success'
+        });
+      } catch (error) {}
+      setLoading(false);
+    },
+    [setLoading, toast, updateUserInfo]
+  );
+
+  return (
+    <>
+      <Card px={6} py={4}>
+        <Box fontSize={'xl'} fontWeight={'bold'}>
+          账号信息
+        </Box>
+        <Box mt={6}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 60px'}>邮箱:</Box>
+            <Box>{userInfo?.email}</Box>
+          </Flex>
+        </Box>
+        {/* <Box mt={6}>
+          <Flex alignItems={'center'}>
+            <Box flex={'0 0 60px'}>余额:</Box>
+            <Box>
+              <strong>{userInfo?.balance}</strong> 元
+            </Box>
+            <Button size={'sm'} w={'80px'} ml={5}>
+              充值
+            </Button>
+          </Flex>
+        </Box> */}
+      </Card>
+      <Card mt={6} px={6} py={4}>
+        <Flex mb={5} justifyContent={'space-between'}>
+          <Box fontSize={'xl'} fontWeight={'bold'}>
+            关联账号
+          </Box>
+          <Box>
+            {accounts.length === 0 && (
+              <Button
+                mr={5}
+                variant="outline"
+                onClick={() =>
+                  appendAccount({
+                    type: 'openai',
+                    value: ''
+                  })
+                }
+              >
+                新增
+              </Button>
+            )}
+            <Button onClick={handleSubmit(onclickSave)}>保存</Button>
+          </Box>
+        </Flex>
+        <TableContainer>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>账号类型</Th>
+                <Th>值</Th>
+                <Th></Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {accounts.map((item, i) => (
+                <Tr key={item.id}>
+                  <Td minW={'200px'}>
+                    <Select
+                      {...register(`accounts.${i}.type`, {
+                        required: '类型不能为空'
+                      })}
+                    >
+                      <option value="openai">openai</option>
+                    </Select>
+                  </Td>
+                  <Td minW={'200px'} whiteSpace="pre-wrap" wordBreak={'break-all'}>
+                    <Input
+                      {...register(`accounts.${i}.value`, {
+                        required: '账号不能为空'
+                      })}
+                    ></Input>
+                  </Td>
+                  <Td>
+                    <Button onClick={() => removeAccount(i)}>删除</Button>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Card>
+    </>
+  );
+};
+
+export default NumberSetting;

src/pages/training/dataList.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Card, Box, Flex, Button } from '@chakra-ui/react';
+
+const TrainDataList = () => {
+  return (
+    <>
+      <Card px={6} py={4}>
+        <Flex alignItems={'center'}>
+          <Box fontSize={'xl'} fontWeight={'bold'} flex={1}>
+            训练数据管理
+          </Box>
+          <Button variant={'outline'} mr={6}>
+            导入数据
+          </Button>
+          <Button>插入一条数据</Button>
+        </Flex>
+      </Card>
+      {/* 数据表 */}
+    </>
+  );
+};
+
+export default TrainDataList;

src/service/constants/training.ts

@@ -0,0 +1,5 @@
+export enum OpenAiTuneStatusEnum {
+  cancelled = 'cancelled',
+  succeeded = 'succeeded',
+  pending = 'pending'
+}

src/service/errorCode.ts

@@ -0,0 +1,3 @@
+export const openaiError: Record<string, string> = {
+  context_length_exceeded: '内容超出长度'
+};

src/service/models/authCode.ts

@@ -0,0 +1,24 @@
+import { Schema, model, models } from 'mongoose';
+
+const AuthCodeSchema = new Schema({
+  email: {
+    type: String,
+    required: true
+  },
+  code: {
+    type: String,
+    required: true,
+    length: 6
+  },
+  type: {
+    type: String,
+    enum: ['register', 'findPassword'],
+    required: true
+  },
+  expiredTime: {
+    type: Number,
+    default: () => Date.now() + 5 * 60 * 1000
+  }
+});
+
+export const AuthCode = models['auth_code'] || model('auth_code', AuthCodeSchema);

src/service/models/chat.ts

@@ -0,0 +1,26 @@
+import { Schema, model, models } from 'mongoose';
+
+const ChatSchema = new Schema({
+  userId: {
+    type: Schema.Types.ObjectId,
+    ref: 'user',
+    required: true
+  },
+  modelId: {
+    type: Schema.Types.ObjectId,
+    ref: 'model',
+    required: true
+  },
+  expiredTime: {
+    // 过期时间
+    type: Number,
+    required: true
+  },
+  loadAmount: {
+    // 剩余加载次数
+    type: Number,
+    required: true
+  }
+});
+
+export const Chat = models['chat'] || model('chat', ChatSchema);

src/service/models/chatWindow.ts

@@ -0,0 +1,28 @@
+import { Schema, model, models } from 'mongoose';
+
+const ChatWindowSchema = new Schema({
+  chatId: {
+    type: Schema.Types.ObjectId,
+    ref: 'chat',
+    required: true
+  },
+  updateTime: {
+    type: Number,
+    required: true
+  },
+  content: [
+    {
+      obj: {
+        type: String,
+        required: true,
+        enum: ['Human', 'AI', 'SYSTEM']
+      },
+      value: {
+        type: String,
+        required: true
+      }
+    }
+  ]
+});
+
+export const ChatWindow = models['chatWindow'] || model('chatWindow', ChatWindowSchema);

src/service/models/model.ts

@@ -0,0 +1,86 @@
+import { Schema, model, models } from 'mongoose';
+
+const ModelSchema = new Schema({
+  name: {
+    type: String,
+    required: true
+  },
+  avatar: {
+    type: String,
+    default: '/imgs/modelAvatar.png'
+  },
+  systemPrompt: {
+    type: String,
+    default: ''
+  },
+  userId: {
+    type: Schema.Types.ObjectId,
+    ref: 'user',
+    required: true
+  },
+  status: {
+    type: String,
+    required: true,
+    enum: ['waiting', 'running', 'training', 'closed']
+  },
+  updateTime: {
+    type: Date,
+    default: () => new Date()
+  },
+  trainingTimes: {
+    type: Number,
+    default: 0
+  },
+  service: {
+    company: {
+      type: String,
+      required: true,
+      enum: ['openai']
+    },
+    trainId: {
+      // 训练时需要的 ID
+      type: String,
+      required: true
+    },
+    chatModel: {
+      // 聊天时使用的模型
+      type: String,
+      required: true
+    },
+    modelName: {
+      // 底层模型的名称
+      type: String,
+      required: true
+    }
+  },
+  security: {
+    type: {
+      domain: {
+        type: [String],
+        default: ['*']
+      },
+      contextMaxLen: {
+        type: Number,
+        default: 20
+      },
+      contentMaxLen: {
+        type: Number,
+        default: 4000
+      },
+      expiredTime: {
+        type: Number,
+        default: 1,
+        set: (val: number) => val * (60 * 60 * 1000)
+      },
+      maxLoadAmount: {
+        // 负数代表不限制
+        type: Number,
+        default: -1
+      }
+    },
+    default: {},
+    required: true
+  }
+});
+
+export const Model = models['model'] || model('model', ModelSchema);

src/service/models/training.ts

@@ -0,0 +1,28 @@
+import { Schema, model, models } from 'mongoose';
+
+const TrainingSChema = new Schema({
+  serviceName: {
+    // 模型厂商名
+    type: String,
+    required: true
+  },
+  tuneId: {
+    // 微调进程 ID
+    type: String,
+    required: true
+  },
+  modelId: {
+    // 关联模型的 ID
+    type: Schema.Types.ObjectId,
+    ref: 'model',
+    required: true
+  },
+  status: {
+    // 状态值
+    type: String,
+    required: true,
+    enum: ['pending', 'succeed', 'errored', 'canceled']
+  }
+});
+
+export const Training = models['training'] || model('training', TrainingSChema);

src/service/models/user.ts

@@ -0,0 +1,40 @@
+import { Schema, model, models } from 'mongoose';
+import { hashPassword } from '@/service/utils/tools';
+
+const UserSchema = new Schema({
+  email: {
+    type: String,
+    required: true,
+    unique: true // 唯一
+  },
+  password: {
+    type: String,
+    required: true,
+    set: (val: string) => hashPassword(val),
+    get: (val: string) => hashPassword(val),
+    select: false
+  },
+  balance: {
+    type: Number,
+    default: 0
+  },
+  accounts: [
+    {
+      type: {
+        type: String,
+        required: true,
+        enum: ['openai'] // 定义允许的type
+      },
+      value: {
+        type: String,
+        required: true
+      }
+    }
+  ],
+  createTime: {
+    type: Date,
+    default: () => new Date()
+  }
+});
+
+export const User = models['user'] || model('user', UserSchema);

src/service/mongo.ts

@@ -0,0 +1,23 @@
+import mongoose from 'mongoose';
+import type { Mongoose } from 'mongoose';
+
+let cachedClient: Mongoose;
+
+export async function connectToDatabase() {
+  if (cachedClient && cachedClient.connection.readyState === 1) {
+    return cachedClient;
+  }
+
+  cachedClient = await mongoose.connect(process.env.MONGODB_UR as string, {
+    dbName: 'doc_gpt'
+  });
+
+  return cachedClient;
+}
+
+export * from './models/authCode';
+export * from './models/chat';
+export * from './models/model';
+export * from './models/user';
+export * from './models/training';
+export * from './models/chatWindow';

src/service/preChatStore.ts

@@ -0,0 +1,21 @@
+import { ChatItemType } from '../types/chat';
+
+export const chatWindows = new Map<string, ChatItemType[]>();
+
+/**
+ * 获取聊天窗口信息
+ */
+export const getWindowMessages = (id: string) => {
+  return chatWindows.get(id) || [];
+};
+
+export const pushWindowMessage = (id: string, prompt: ChatItemType) => {
+  const messages = chatWindows.get(id) || [];
+  messages.push(prompt);
+  chatWindows.set(id, messages);
+  return messages;
+};
+
+export const deleteWindow = (id: string) => {
+  chatWindows.delete(id);
+};

src/service/response.ts

@@ -0,0 +1,36 @@
+import { NextApiResponse } from 'next';
+import { openaiError } from './errorCode';
+
+export interface ResponseType<T = any> {
+  code: number;
+  message: string;
+  data: T;
+}
+
+export const jsonRes = (
+  res: NextApiResponse,
+  props?: {
+    code?: number;
+    message?: string;
+    data?: any;
+    error?: any;
+  }
+) => {
+  const { code = 200, message = '', data = null, error } = props || {};
+
+  let msg = message;
+  if ((code < 200 || code >= 400) && !message) {
+    msg =
+      typeof error === 'string'
+        ? error
+        : openaiError[error?.response?.data?.message] || error?.message || '请求错误';
+
+    console.log(msg);
+  }
+
+  res.json({
+    code,
+    message: msg,
+    data
+  });
+};

src/service/utils/chat.ts

@@ -0,0 +1,45 @@
+import { Configuration, OpenAIApi } from 'openai';
+import { Chat } from '../mongo';
+
+export const getOpenAIApi = (apiKey: string) => {
+  const configuration = new Configuration({
+    apiKey
+  });
+
+  return new OpenAIApi(configuration, undefined);
+};
+
+export const authChat = async (chatId: string) => {
+  // 获取 chat 数据
+  const chat = await Chat.findById(chatId)
+    .populate({
+      path: 'modelId',
+      options: {
+        strictPopulate: false
+      }
+    })
+    .populate({
+      path: 'userId',
+      options: {
+        strictPopulate: false
+      }
+    });
+
+  if (!chat || !chat.modelId || !chat.userId) {
+    return Promise.reject('聊天已过期');
+  }
+
+  // 获取 user 的 apiKey
+  const user = chat.userId;
+
+  const userApiKey = user.accounts?.find((item: any) => item.type === 'openai')?.value;
+
+  if (!userApiKey) {
+    return Promise.reject('该用户缺少ApiKey, 无法请求');
+  }
+
+  return {
+    userApiKey,
+    chat
+  };
+};

src/service/utils/sendEmail.ts

@@ -0,0 +1,63 @@
+import * as nodemailer from 'nodemailer';
+import { EmailTypeEnum } from '@/constants/common';
+import dayjs from 'dayjs';
+
+const myEmail = process.env.MY_MAIL;
+let mailTransport = nodemailer.createTransport({
+  // host: 'smtp.qq.email',
+  service: 'qq',
+  secure: true, //安全方式发送,建议都加上
+  auth: {
+    user: myEmail,
+    pass: process.env.MAILE_CODE
+  }
+});
+
+const emailMap: { [key: string]: any } = {
+  [EmailTypeEnum.register]: {
+    subject: '注册 DocGPT 账号',
+    html: (code: string) => `<div>您正在注册 DocGPT 账号，验证码为：${code}</div>`
+  },
+  [EmailTypeEnum.findPassword]: {
+    subject: '修改 DocGPT 密码',
+    html: (code: string) => `<div>您正在修改 DocGPT 账号密码，验证码为：${code}</div>`
+  }
+};
+
+export const sendCode = (email: string, code: string, type: `${EmailTypeEnum}`) => {
+  return new Promise((resolve, reject) => {
+    const options = {
+      from: `"DocGPT" ${myEmail}`,
+      to: email,
+      subject: emailMap[type]?.subject,
+      html: emailMap[type]?.html(code)
+    };
+    mailTransport.sendMail(options, function (err, msg) {
+      if (err) {
+        console.log(err);
+        reject('邮箱异常');
+      } else {
+        resolve('');
+      }
+    });
+  });
+};
+
+export const sendTrainSucceed = (email: string, modelName: string) => {
+  return new Promise((resolve, reject) => {
+    const options = {
+      from: `"DocGPT" ${myEmail}`,
+      to: email,
+      subject: '模型训练完成通知',
+      html: `你的模型 ${modelName} 已于 ${dayjs().format('YYYY-MM-DD HH:mm')} 训练完成！`
+    };
+    mailTransport.sendMail(options, function (err, msg) {
+      if (err) {
+        console.log(err);
+        reject('邮箱异常');
+      } else {
+        resolve('');
+      }
+    });
+  });
+};

src/service/utils/tools.ts

@@ -0,0 +1,63 @@
+import crypto from 'crypto';
+import jwt from 'jsonwebtoken';
+import { User } from '../models/user';
+import tunnel from 'tunnel';
+
+/* 密码加密 */
+export const hashPassword = (psw: string) => {
+  return crypto.createHash('sha256').update(psw).digest('hex');
+};
+
+/* 生成 token */
+export const generateToken = (userId: string) => {
+  const key = process.env.TOKEN_KEY as string;
+  const token = jwt.sign(
+    {
+      userId,
+      exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 7
+    },
+    key
+  );
+  return token;
+};
+
+/* 校验 token */
+export const authToken = (token: string): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const key = process.env.TOKEN_KEY as string;
+
+    jwt.verify(token, key, function (err, decoded: any) {
+      if (err || !decoded?.userId) {
+        reject('凭证无效');
+        return;
+      }
+      resolve(decoded.userId);
+    });
+  });
+};
+
+/* 获取用户的 openai APIkey */
+export const getUserOpenaiKey = async (userId: string) => {
+  const user = await User.findById(userId);
+
+  const userApiKey = user?.accounts?.find((item: any) => item.type === 'openai')?.value;
+  if (!userApiKey) {
+    return Promise.reject('缺少ApiKey, 无法请求');
+  }
+
+  return Promise.resolve(userApiKey);
+};
+
+/* 代理 */
+export const openaiProxy: any =
+  process.env.AXIOS_PROXY_PORT && process.env.AXIOS_PROXY_HOST
+    ? {
+        httpsAgent: tunnel.httpsOverHttp({
+          proxy: {
+            host: process.env.AXIOS_PROXY_HOST,
+            port: +process.env.AXIOS_PROXY_PORT
+          }
+        }),
+        proxy: false
+      }
+    : undefined;

src/store/global.ts

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+type State = {
+  loading: boolean;
+  setLoading: (val: boolean) => null;
+};
+
+export const useGlobalStore = create<State>()(
+  devtools(
+    immer((set, get) => ({
+      loading: false,
+      setLoading: (val: boolean) => {
+        set((state) => {
+          state.loading = val;
+        });
+        return null;
+      }
+    }))
+  )
+);

src/store/user.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import type { UserType, UserUpdateParams } from '@/types/user';
+import { setToken } from '@/utils/user';
+
+type State = {
+  userInfo: UserType | null;
+  setUserInfo: (user: UserType, token?: string) => void;
+  updateUserInfo: (user: UserUpdateParams) => void;
+};
+
+export const useUserStore = create<State>()(
+  devtools(
+    immer((set, get) => ({
+      userInfo: null,
+      setUserInfo: (user: UserType, token?: string) => {
+        set((state) => {
+          state.userInfo = user;
+        });
+        token && setToken(token);
+      },
+      updateUserInfo: (user: UserUpdateParams) => {
+        set((state) => {
+          if (!state.userInfo) return;
+          state.userInfo = {
+            ...state.userInfo,
+            ...user
+          };
+        });
+      }
+    }))
+  )
+);

src/styles/Home.module.css

@@ -1,278 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  width: var(--max-width);
-  max-width: 100%;
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo,
-.thirteen {
-  position: relative;
-}
-
-.thirteen {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 75px;
-  padding: 25px 10px;
-  margin-left: 16px;
-  transform: translateZ(0);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: 0px 2px 8px -1px #0000001a;
-}
-
-.thirteen::before,
-.thirteen::after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-}
-
-/* Conic Gradient Animation */
-.thirteen::before {
-  animation: 6s rotate linear infinite;
-  width: 200%;
-  height: 200%;
-  background: var(--tile-border);
-}
-
-/* Inner Square */
-.thirteen::after {
-  inset: 0;
-  padding: 1px;
-  border-radius: var(--border-radius);
-  background: linear-gradient(
-    to bottom right,
-    rgba(var(--tile-start-rgb), 1),
-    rgba(var(--tile-end-rgb), 1)
-  );
-  background-clip: content-box;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .thirteen::before {
-    animation: none;
-  }
-
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo,
-  .thirteen img {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

src/styles/globals.css

@@ -1,107 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

src/styles/reset.scss

@@ -0,0 +1,112 @@
+body,
+h1,
+h2,
+h3,
+h4,
+hr,
+p,
+blockquote,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+pre,
+form,
+fieldset,
+legend,
+button,
+input,
+textarea,
+th,
+td,
+svg {
+  margin: 0;
+}
+body,
+button,
+input,
+select,
+textarea {
+  font: 12px/1.5tahoma, arial, \5b8b\4f53;
+}
+// h1, h2, h3, h4, h5, h6{ font-size:100%; }
+address,
+cite,
+dfn,
+em,
+var {
+  font-style: normal;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: couriernew, courier, monospace;
+}
+small {
+  font-size: 12px;
+}
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+}
+a {
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+sup {
+  vertical-align: text-top;
+}
+sub {
+  vertical-align: text-bottom;
+}
+legend {
+  color: #000;
+}
+fieldset,
+img {
+  border: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+::-webkit-scrollbar,
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 2px;
+}
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb {
+  background: #bfbfbf;
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover,
+::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+@media (max-width: 900px) {
+  ::-webkit-scrollbar,
+  ::-webkit-scrollbar {
+    width: 2px;
+    height: 2px;
+  }
+}

src/types/chat.d.ts

@@ -0,0 +1,16 @@
+import type { ModelType } from './model';
+export interface ChatSiteType {
+  name: string;
+  avatar: string;
+  modelId: string;
+  chatModel: string;
+  secret: ModelType.security;
+}
+
+export type ChatItemType = {
+  obj: 'Human' | 'AI' | 'SYSTEM';
+  value: string;
+};
+export type ChatSiteItemType = {
+  status: 'loading' | 'finish';
+} & ChatItemType;

src/types/model.d.ts

@@ -0,0 +1,40 @@
+import { ModelStatusEnum } from '@/constants/model';
+export interface ModelType {
+  _id: string;
+  userId: string;
+  name: string;
+  avatar: string;
+  status: `${ModelStatusEnum}`;
+  updateTime: Date;
+  trainingTimes: number;
+  systemPrompt: string;
+  service: {
+    company: 'openai'; // 关联的厂商
+    trainId: string; // 训练时需要的ID
+    chatModel: string; // 聊天时用的模型
+    modelName: string; // 关联的模型
+  };
+  security: {
+    domain: string[];
+    contentMaxLen: number;
+    contextMaxLen: number;
+    expiredTime: number;
+    maxLoadAmount: number;
+  };
+}
+
+export interface ModelUpdateParams {
+  name: string;
+  systemPrompt: string;
+  service: {
+    company: 'openai'; // 关联的厂商
+    modelName: string; // 关联的模型
+  };
+  security: {
+    domain: string[];
+    contentMaxLen: number;
+    contextMaxLen: number;
+    expiredTime: number;
+    maxLoadAmount: number;
+  };
+}

src/types/training.d.ts

@@ -0,0 +1,9 @@
+import { TrainingStatusEnum } from '@/constants/model';
+
+export type TrainingItemType = {
+  _id: string;
+  serviceName: string;
+  tuneId: string;
+  modelId: string;
+  status: `${TrainingStatusEnum}`;
+};

src/types/user.d.ts

@@ -0,0 +1,21 @@
+export enum UserNumberEnum {
+  phone = 'phone',
+  wx = 'wx'
+}
+
+export interface UserType {
+  _id: string;
+  email: string;
+  accounts: {
+    type: string;
+    value: string;
+  }[];
+  balance: number;
+}
+
+export interface UserUpdateParams {
+  accounts?: {
+    type: string;
+    value: string;
+  }[];
+}

src/utils/tools.ts

@@ -0,0 +1,47 @@
+import crypto from 'crypto';
+import { useToast } from '@/hooks/useToast';
+
+/**
+ * copy text data
+ */
+export const useCopyData = () => {
+  const { toast } = useToast();
+  return {
+    copyData: (data: string, title: string = '复制成功') => {
+      const clipboardObj = navigator.clipboard;
+      clipboardObj
+        .writeText(data)
+        .then(() => {
+          toast({
+            title,
+            status: 'success',
+            duration: 1000
+          });
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  };
+};
+
+export const createHashPassword = (text: string) => {
+  const hash = crypto.createHash('sha256').update(text).digest('hex');
+  return hash;
+};
+
+/**
+ * 读取文件内容
+ */
+export const loadLocalFileContent = (file: File) => {
+  return new Promise((resolve: (_: string) => void, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = (err) => {
+      reject(err);
+    };
+    reader.readAsText(file);
+  });
+};

src/utils/user.ts

@@ -0,0 +1,11 @@
+const tokenKey = 'doc-gpt-token';
+
+export const setToken = (val: string) => {
+  localStorage.setItem(tokenKey, val);
+};
+export const getToken = () => {
+  return localStorage.getItem(tokenKey);
+};
+export const clearToken = () => {
+  localStorage.removeItem(tokenKey);
+};