Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 014fb504 by archer
Options

feat: new ui

parent 4d043e0e
Showing with 2200 additions and 1468 deletions
README.md
...@@ -116,12 +116,20 @@ events { ...@@ -116,12 +116,20 @@ events {
} }
http { http {
resolver 8.8.8.8;
proxy_ssl_server_name on;
access_log off; access_log off;
server_names_hash_bucket_size 512; server_names_hash_bucket_size 512;
client_header_buffer_size 32k; client_header_buffer_size 64k;
large_client_header_buffers 4 32k; large_client_header_buffers 4 64k;
client_max_body_size 50M; client_max_body_size 50M;
proxy_connect_timeout 240s;
proxy_read_timeout 240s;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
gzip on; gzip on;
gzip_min_length 1k; gzip_min_length 1k;
gzip_buffers 4 8k; gzip_buffers 4 8k;
...@@ -215,7 +223,7 @@ services: ...@@ -215,7 +223,7 @@ services:
- /root/fast-gpt/pg/init.sql:/docker-entrypoint-initdb.d/init.sh - /root/fast-gpt/pg/init.sql:/docker-entrypoint-initdb.d/init.sh
- /etc/localtime:/etc/localtime:ro - /etc/localtime:/etc/localtime:ro
mongodb: mongodb:
image: mongo:4.0.1 image: mongo:6.0.4
container_name: mongo container_name: mongo
restart: always restart: always
ports: ports:
......
deploy/nginx/nginx.conf
...@@ -7,12 +7,20 @@ events { ...@@ -7,12 +7,20 @@ events {
} }
http { http {
resolver 8.8.8.8;
proxy_ssl_server_name on;
access_log off; access_log off;
server_names_hash_bucket_size 512; server_names_hash_bucket_size 512;
client_header_buffer_size 32k; client_header_buffer_size 64k;
large_client_header_buffers 4 32k; large_client_header_buffers 4 64k;
client_max_body_size 50M; client_max_body_size 50M;
proxy_connect_timeout 240s;
proxy_read_timeout 240s;
proxy_buffer_size 128k;
proxy_buffers 4 256k;
gzip on; gzip on;
gzip_min_length 1k; gzip_min_length 1k;
gzip_buffers 4 8k; gzip_buffers 4 8k;
......
package.json
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"@tanstack/react-query": "^4.24.10", "@tanstack/react-query": "^4.24.10",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"axios": "^1.3.3", "axios": "^1.3.3",
"cookie": "^0.5.0",
"crypto": "^1.0.1", "crypto": "^1.0.1",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
"eventsource-parser": "^0.1.0", "eventsource-parser": "^0.1.0",
...@@ -60,6 +61,7 @@ ...@@ -60,6 +61,7 @@
}, },
"devDependencies": { "devDependencies": {
"@svgr/webpack": "^6.5.1", "@svgr/webpack": "^6.5.1",
"@types/cookie": "^0.5.1",
"@types/formidable": "^2.0.5", "@types/formidable": "^2.0.5",
"@types/jsonwebtoken": "^9.0.1", "@types/jsonwebtoken": "^9.0.1",
"@types/lodash": "^4.14.191", "@types/lodash": "^4.14.191",
......
pnpm-lock.yaml
...@@ -13,6 +13,7 @@ specifiers: ...@@ -13,6 +13,7 @@ specifiers:
'@next/font': 13.1.6 '@next/font': 13.1.6
'@svgr/webpack': ^6.5.1 '@svgr/webpack': ^6.5.1
'@tanstack/react-query': ^4.24.10 '@tanstack/react-query': ^4.24.10
'@types/cookie': ^0.5.1
'@types/formidable': ^2.0.5 '@types/formidable': ^2.0.5
'@types/jsonwebtoken': ^9.0.1 '@types/jsonwebtoken': ^9.0.1
'@types/lodash': ^4.14.191 '@types/lodash': ^4.14.191
...@@ -26,6 +27,7 @@ specifiers: ...@@ -26,6 +27,7 @@ specifiers:
'@types/react-syntax-highlighter': ^15.5.6 '@types/react-syntax-highlighter': ^15.5.6
'@types/tunnel': ^0.0.3 '@types/tunnel': ^0.0.3
axios: ^1.3.3 axios: ^1.3.3
cookie: ^0.5.0
crypto: ^1.0.1 crypto: ^1.0.1
dayjs: ^1.11.7 dayjs: ^1.11.7
eslint: 8.34.0 eslint: 8.34.0
...@@ -80,6 +82,7 @@ dependencies: ...@@ -80,6 +82,7 @@ dependencies:
'@tanstack/react-query': registry.npmmirror.com/@tanstack/react-query/4.24.10_biqbaboplfbrettd7655fr4n2y '@tanstack/react-query': registry.npmmirror.com/@tanstack/react-query/4.24.10_biqbaboplfbrettd7655fr4n2y
'@types/nprogress': registry.npmmirror.com/@types/nprogress/0.2.0 '@types/nprogress': registry.npmmirror.com/@types/nprogress/0.2.0
axios: registry.npmmirror.com/axios/1.3.3 axios: registry.npmmirror.com/axios/1.3.3
cookie: 0.5.0
crypto: registry.npmmirror.com/crypto/1.0.1 crypto: registry.npmmirror.com/crypto/1.0.1
dayjs: registry.npmmirror.com/dayjs/1.11.7 dayjs: registry.npmmirror.com/dayjs/1.11.7
eventsource-parser: registry.npmmirror.com/eventsource-parser/0.1.0 eventsource-parser: registry.npmmirror.com/eventsource-parser/0.1.0
...@@ -116,6 +119,7 @@ dependencies: ...@@ -116,6 +119,7 @@ dependencies:
devDependencies: devDependencies:
'@svgr/webpack': registry.npmmirror.com/@svgr/webpack/6.5.1 '@svgr/webpack': registry.npmmirror.com/@svgr/webpack/6.5.1
'@types/cookie': 0.5.1
'@types/formidable': registry.npmmirror.com/@types/formidable/2.0.5 '@types/formidable': registry.npmmirror.com/@types/formidable/2.0.5
'@types/jsonwebtoken': registry.npmmirror.com/@types/jsonwebtoken/9.0.1 '@types/jsonwebtoken': registry.npmmirror.com/@types/jsonwebtoken/9.0.1
'@types/lodash': registry.npmmirror.com/@types/lodash/4.14.191 '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.191
...@@ -286,6 +290,15 @@ packages: ...@@ -286,6 +290,15 @@ packages:
dev: false dev: false
optional: true optional: true
/@types/cookie/0.5.1:
resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
dev: true
/cookie/0.5.0:
resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
engines: {node: '>= 0.6'}
dev: false
/fsevents/2.3.2: /fsevents/2.3.2:
resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
......
public/docs/chatProblem.md
### 常见问题 ### 常见问题
**请求次数太多了** **请求次数太多了**
一般是因为自己的 openai 账号异常。请先检查自己的账号是否正常使用。 一般是因为自己的 openai 账号异常。请先检查自己的账号是否正常使用。
**内容长度** **内容长度**
chatgpt 上下文最长 4096 tokens, 上下文超长时会报错。 chatgpt 上下文最长 4096 tokens, 会自动截取上下文，超过 4096 部分会被遗忘。
**删除和复制** **删除和复制**
电脑端：聊天内容右侧有复制和删除的图标。 电脑端：聊天内容右侧有复制和删除的图标。
移动端：点击对话头像，可以选择复制或删除该条内容。 移动端：点击对话头像，可以选择复制或删除该条内容。
**代理出错** **代理出错**
服务器代理不稳定，可以过一会儿再尝试。 或者可以访问国外服务器: [FastGpt](https://fastgpt.run/) 服务器代理不稳定，可以过一会儿再尝试。 或者可以访问国外服务器: [FastGpt](https://fastgpt.run/)
**其他问题**
请 WX 联系: fastgpt123
![FastGpt](/imgs/wx300.jpg)
src/api/chat.ts
import { GET, POST, DELETE } from './request'; import { GET, POST, DELETE } from './request';
import type { ChatItemType } from '@/types/chat'; import type { ChatItemType, HistoryItemType } from '@/types/chat';
import type { InitChatResponse } from './response/chat'; import type { InitChatResponse } from './response/chat';
import { RequestPaging } from '../types/index';
/** /**
* 获取初始化聊天内容 * 获取初始化聊天内容
*/ */
export const getInitChatSiteInfo = (modelId: string, chatId: '' | string) => export const getInitChatSiteInfo = (modelId: '' | string, chatId: '' | string) =>
GET<InitChatResponse>(`/chat/init?modelId=${modelId}&chatId=${chatId}`); GET<InitChatResponse>(`/chat/init?modelId=${modelId}&chatId=${chatId}`);
/** /**
* 获取历史记录 * 获取历史记录
*/ */
export const getChatHistory = () => export const getChatHistory = (data: RequestPaging) =>
GET<{ _id: string; title: string; modelId: string }[]>('/chat/getHistory'); POST<HistoryItemType[]>('/chat/getHistory', data);
/** /**
* 删除一条历史记录 * 删除一条历史记录
......
src/api/fetch.ts
import { getToken } from '../utils/user';
import { SYSTEM_PROMPT_HEADER, NEW_CHATID_HEADER } from '@/constants/chat'; import { SYSTEM_PROMPT_HEADER, NEW_CHATID_HEADER } from '@/constants/chat';
interface StreamFetchProps { interface StreamFetchProps {
...@@ -14,8 +13,7 @@ export const streamFetch = ({ url, data, onMessage, abortSignal }: StreamFetchPr ...@@ -14,8 +13,7 @@ export const streamFetch = ({ url, data, onMessage, abortSignal }: StreamFetchPr
const res = await fetch(url, { const res = await fetch(url, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
Authorization: getToken() || ''
}, },
body: JSON.stringify(data), body: JSON.stringify(data),
signal: abortSignal.signal signal: abortSignal.signal
......
src/api/model.ts
import { GET, POST, DELETE, PUT } from './request'; import { GET, POST, DELETE, PUT } from './request';
import type { ModelSchema, ModelDataSchema } from '@/types/mongoSchema'; import type { ModelSchema, ModelDataSchema } from '@/types/mongoSchema';
import { ModelUpdateParams, ShareModelItem } from '@/types/model'; import type { ModelUpdateParams, ShareModelItem } from '@/types/model';
import { RequestPaging } from '../types/index'; import { RequestPaging } from '../types/index';
import { Obj2Query } from '@/utils/tools'; import { Obj2Query } from '@/utils/tools';
import type { ModelListResponse } from './response/model';
/** /**
* 获取模型列表 * 获取模型列表
*/ */
export const getMyModels = () => GET<ModelSchema[]>('/model/list'); export const getMyModels = () => GET<ModelListResponse>('/model/list');
/** /**
* 创建一个模型 * 创建一个模型
...@@ -100,7 +101,7 @@ export const delOneModelData = (dataId: string) => ...@@ -100,7 +101,7 @@ export const delOneModelData = (dataId: string) =>
export const getShareModelList = (data: { searchText?: string } & RequestPaging) => export const getShareModelList = (data: { searchText?: string } & RequestPaging) =>
POST(`/model/share/getModels`, data); POST(`/model/share/getModels`, data);
/** /**
* 获取收藏的模型 * 获取我收藏的模型
*/ */
export const getCollectionModels = () => GET<ShareModelItem[]>(`/model/share/getCollection`); export const getCollectionModels = () => GET<ShareModelItem[]>(`/model/share/getCollection`);
/** /**
......
src/api/request.ts
import axios, { Method, InternalAxiosRequestConfig, AxiosResponse } from 'axios'; import axios, { Method, InternalAxiosRequestConfig, AxiosResponse } from 'axios';
import { getToken, clearToken } from '@/utils/user'; import { clearToken } from '@/utils/user';
import { TOKEN_ERROR_CODE } from '@/service/errorCode'; import { TOKEN_ERROR_CODE } from '@/service/errorCode';
interface ConfigType { interface ConfigType {
...@@ -17,7 +17,7 @@ interface ResponseDataType { ...@@ -17,7 +17,7 @@ interface ResponseDataType {
*/ */
function requestStart(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig { function requestStart(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig {
if (config.headers) { if (config.headers) {
config.headers.Authorization = getToken(); // config.headers.Authorization = getToken();
} }
return config; return config;
......
src/api/response/chat.d.ts
import type { ChatPopulate, ModelSchema } from '@/types/mongoSchema'; import type { ChatPopulate, ModelSchema } from '@/types/mongoSchema';
import type { ChatItemType } from '@/types/chat'; import type { ChatItemType } from '@/types/chat';
export type InitChatResponse = { export interface InitChatResponse {
chatId: string; chatId: string;
modelId: string; modelId: string;
model: {
name: string; name: string;
avatar: string; avatar: string;
intro: string; intro: string;
canUse: boolean;
};
chatModel: ModelSchema['chat']['chatModel']; // 对话模型名 chatModel: ModelSchema['chat']['chatModel']; // 对话模型名
history: ChatItemType[]; history: ChatItemType[];
}; }
src/api/response/model.d.ts 0 → 100644
import { ModelListItemType } from '@/types/model';
export type ModelListResponse = {
myModels: ModelListItemType[];
myCollectionModels: ModelListItemType[];
};
src/api/response/user.d.ts
import type { UserType } from '@/types/user'; import type { UserType } from '@/types/user';
import type { PromotionRecordSchema } from '@/types/mongoSchema'; import type { PromotionRecordSchema } from '@/types/mongoSchema';
export interface ResLogin { export interface ResLogin {
token: string;
user: UserType; user: UserType;
} }
......
src/components/Icon/icons/back.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683436459815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1278" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M377.04830749 512.02677874l395.88826112-382.68981248c23.33363769-22.59430969 23.33363769-59.16132466 0-81.68344804-23.33247261-22.5582171-61.18836224-22.5582171-84.52083485 0L250.30081877 471.19378659c-23.29754397 22.5582171-23.29754397 59.14385977 0 81.63105451l438.11491385 423.52280349c11.70233003 11.27968995 26.99767353 16.91837099 42.29534607 16.91837098 15.29883648 0 30.59418112-5.63984498 42.22548878-16.95446471 23.33363769-22.5582171 23.33363769-59.07283854 0-81.63105451L377.04830749 512.02677874" p-id="1279"></path></svg>
\ No newline at end of file
src/components/Icon/icons/board.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1680878351566" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1173" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M896 771.413333h-768c-51.2 0-93.866667-42.666667-93.866667-93.866666V209.92c0-51.2 42.666667-93.866667 93.866667-93.866667h768c51.2 0 93.866667 42.666667 93.866667 93.866667v465.92c0 52.906667-42.666667 95.573333-93.866667 95.573333zM128 167.253333C104.106667 167.253333 85.333333 186.026667 85.333333 209.92v465.92c0 23.893333 18.773333 42.666667 42.666667 42.666667h768c23.893333 0 42.666667-18.773333 42.666667-42.666667V209.92c0-23.893333-18.773333-42.666667-42.666667-42.666667h-768z" p-id="1174"></path><path d="M512 907.946667c-13.653333 0-25.6-11.946667-25.6-25.6v-136.533334c0-13.653333 11.946667-25.6 25.6-25.6s25.6 11.946667 25.6 25.6v136.533334c0 13.653333-11.946667 25.6-25.6 25.6z" p-id="1175"></path><path d="M680.96 907.946667H343.04c-13.653333 0-25.6-11.946667-25.6-25.6s11.946667-25.6 25.6-25.6h337.92c13.653333 0 25.6 11.946667 25.6 25.6s-11.946667 25.6-25.6 25.6zM776.533333 648.533333h-529.066666c-13.653333 0-25.6-11.946667-25.6-25.6s11.946667-25.6 25.6-25.6h530.773333c13.653333 0 25.6 11.946667 25.6 25.6s-11.946667 25.6-27.306667 25.6z" p-id="1176"></path></svg>
\ No newline at end of file
src/components/Icon/icons/chat.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683254586102" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="940" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 34.13333333c263.91893333 0 477.86666667 213.94773333 477.86666667 477.86666667S775.91893333 989.86666667 512 989.86666667H79.6448A45.51146667 45.51146667 0 0 1 34.13333333 944.3552V512C34.13333333 248.08106667 248.08106667 34.13333333 512 34.13333333zM307.2 580.26666667a22.7552 22.7552 0 0 0-22.7552 22.7552V648.53333333A22.7552 22.7552 0 0 0 307.2 671.28853333h227.5552A22.7552 22.7552 0 0 0 557.51146667 648.53333333v-45.51146666A22.7552 22.7552 0 0 0 534.7552 580.26666667H307.2z m0-182.0448a22.7552 22.7552 0 0 0-22.7552 22.75626666v45.5104A22.7552 22.7552 0 0 0 307.2 489.2448h409.6a22.7552 22.7552 0 0 0 22.7552-22.75626667v-45.5104A22.7552 22.7552 0 0 0 716.8 398.22186667H307.2z" p-id="941"></path></svg>
\ No newline at end of file
src/components/Icon/icons/closeSolid.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683455612885" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1736" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M848.41813333 174.4896q69.90506667 69.90506667 104.31146667 157.2864t34.4064 179.13173333-34.4064 179.13173334-104.31146667 157.2864-157.2864 104.8576-179.13173333 34.95253333-179.67786667-34.95253333-157.83253333-104.8576-104.8576-157.2864-34.95253333-179.13173334 34.95253333-179.13173333 104.8576-157.2864 157.83253333-104.31146667 179.67786667-34.4064 179.13173333 34.4064 157.2864 104.31146667zM734.8224 729.36106667q22.9376-22.9376 20.20693333-52.4288t-25.66826666-52.4288l-114.688-114.688 114.688-114.688q22.9376-22.9376 25.66826666-52.4288t-20.20693333-52.4288-55.15946667-22.9376-55.15946666 22.9376l-114.688 113.59573333-111.4112-111.4112q-22.9376-21.84533333-52.4288-24.576t-52.4288 19.11466667q-22.9376 22.9376-22.9376 55.7056t22.9376 55.7056l111.4112 111.4112-111.4112 111.4112q-22.9376 22.9376-22.9376 55.15946666t22.9376 55.15946667 52.4288 20.20693333 52.4288-25.66826666l111.4112-111.4112 114.688 114.688q22.9376 22.9376 55.15946666 22.9376t55.15946667-22.9376z" p-id="1737"></path></svg>
\ No newline at end of file
src/components/Icon/icons/dbModel.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682232349111" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7070" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M512 102.6c110.7 0 215 12.3 293.9 34.7 35.8 10.2 65 22.1 84.5 34.7 18.6 12 21.3 19.7 21.6 20.6-0.2 0.9-3 8.6-21.6 20.6-19.5 12.5-48.7 24.5-84.5 34.7-78.9 22.3-183.2 34.7-293.9 34.7s-215-12.3-293.9-34.7c-35.8-10.2-65-22.1-84.5-34.7-18.6-12-21.3-19.7-21.6-20.6 0.2-0.9 3-8.6 21.6-20.6 19.5-12.5 48.7-24.5 84.5-34.7 78.9-22.4 183.2-34.7 293.9-34.7m0-40c-243 0-440 58.2-440 130s197 130 440 130 440-58.2 440-130-197-130-440-130zM112 190.4H72v641h40v-641z m840-0.3h-40v641h40v-641zM912 831v0.5c-0.2 0.9-3 8.6-21.6 20.6-19.5 12.5-48.7 24.5-84.5 34.7-78.9 22.3-183.2 34.6-293.9 34.6s-215-12.3-293.9-34.7c-35.8-10.2-65-22.1-84.5-34.7-18.6-12-21.3-19.7-21.6-20.6v-0.3l-40 0.3v0.1c0 71.8 197 130 440 130s440-58.2 440-130v-0.4l-40-0.1z m0-210.5v0.5c-0.2 0.9-3 8.6-21.6 20.6-19.5 12.5-48.7 24.5-84.5 34.7C727 698.6 622.7 711 512 711s-215-12.3-293.9-34.7c-35.8-10.2-65-22.1-84.5-34.7-18.6-12-21.3-19.7-21.6-20.6v-0.3l-40 0.3v0.1c0 71.8 197 130 440 130s440-58.2 440-130v-0.4l-40-0.2z m0-221.5v0.5c-0.2 0.9-3 8.6-21.6 20.6-19.5 12.5-48.7 24.5-84.5 34.7-78.9 22.3-183.2 34.7-293.9 34.7s-215-12.3-293.9-34.7c-35.8-10.2-65-22.1-84.5-34.7-18.6-12-21.3-19.7-21.6-20.6v-0.3l-40 0.3v0.1c0 71.8 197 130 440 130s440-58.2 440-130v-0.4l-40-0.2z" fill="" p-id="7071"></path></svg>
\ No newline at end of file
src/components/Icon/icons/develop.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1680878410563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2745" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M256 512l81.6 108.8a32 32 0 0 1-51.2 38.4l-96-128a31.968 31.968 0 0 1 0-38.4l96-128a32 32 0 0 1 51.2 38.4L256 512zM670.4 620.8a32 32 0 0 0 51.2 38.4l96-128a31.968 31.968 0 0 0 0-38.4l-96-128a32 32 0 0 0-51.2 38.4L752 512l-81.6 108.8zM503.232 646.944a32 32 0 1 1-62.464-13.888l64-288a32 32 0 1 1 62.464 13.888l-64 288z" p-id="2746"></path><path d="M160 144a32 32 0 0 0-32 32V864a32 32 0 0 0 32 32h688a32 32 0 0 0 32-32V176a32 32 0 0 0-32-32H160z m0-64h688a96 96 0 0 1 96 96V864a96 96 0 0 1-96 96H160a96 96 0 0 1-96-96V176a96 96 0 0 1 96-96z" p-id="2747"></path></svg> <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683254594671" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1491" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M46.95735957 106.20989621h930.08528086v158.0067668H46.95735957zM46.95735957 353.99323467v608.68515424h930.08528086V353.99323467H46.95735957z m346.5375657 418.35882335L328.85579413 835.19565715l-165.18889183-172.37101684 165.18889183-172.37101686 64.63913114 62.84359914-105.93635373 109.52741772 105.93635373 109.52741771z m127.48273175 62.84359913l-86.18550917-23.34190854 87.98104116-330.37778366 86.1855077 23.34191003L520.97765702 835.19565715z m193.91739489 0l-64.63913114-62.84359913 105.93635372-109.52741771-105.93635372-109.52741772 64.63913114-62.84359914 165.18889182 172.37101686-165.18889182 172.37101684z" p-id="1492"></path></svg>
\ No newline at end of file \ No newline at end of file
src/components/Icon/icons/empty.svg 0 → 100644
<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="40" cy="40" r="39.5" stroke="#9CA2A8" stroke-dasharray="4 4"/>
<path d="M23.6876 55.8387L23.6407 55.8376C23.3701 55.8288 21.9635 55.7385 21.0265 54.8601C20.0656 53.959 19.9509 52.6633 19.9377 52.4125C19.9364 52.389 19.9358 52.3653 19.9359 52.3417V45.2852C19.9219 44.9945 19.9031 44.0125 20.2321 42.922C20.5474 41.8763 20.9369 41.1898 21.0484 41.0045L24.591 34.7371C24.6087 34.7056 24.6275 34.6752 24.6476 34.6457C24.758 34.4818 25.3518 33.6383 26.166 33.1317C27.0227 32.5982 28.0597 32.557 28.3572 32.557H50.7351C50.7639 32.557 50.7924 32.5578 50.8219 32.5596C51.0443 32.5739 52.1994 32.6714 53.0933 33.1828C53.9469 33.6716 54.634 34.5259 54.763 34.6919C54.7891 34.7259 54.8137 34.7611 54.8367 34.7974L59.0442 41.4646C59.0622 41.4939 59.0804 41.5246 59.0968 41.556C59.1774 41.7109 59.5933 42.529 59.8039 43.3247C60.0119 44.1119 60.0621 44.9819 60.0698 45.1481L60.0708 45.2048V52.2624C60.0756 52.6356 60.0069 53.9162 58.9446 54.8678C57.9386 55.7684 56.5842 55.8381 56.1931 55.8381H23.6876V55.8387ZM23.3271 42.4347C23.2497 42.5723 23.0089 43.0277 22.8065 43.6986C22.5927 44.4079 22.6181 45.0709 22.6215 45.1444C22.6234 45.1761 22.6245 45.208 22.625 45.2398V52.2952L22.6276 52.3147C22.6443 52.4416 22.7217 52.749 22.8551 52.8876L22.8731 52.9067L22.8943 52.9223C23.0811 53.06 23.5441 53.139 23.7058 53.1487L56.1952 53.1493C56.4648 53.1461 56.936 53.0563 57.1495 52.8649C57.3405 52.6937 57.3833 52.3998 57.3833 52.3528L57.3807 52.2712V45.2461C57.3662 44.9721 57.3131 44.4259 57.2031 44.0121C57.0786 43.5393 56.8001 42.973 56.7454 42.8646L56.7303 42.8382L52.6013 36.2947L52.5884 36.2791C52.4319 36.0906 52.0567 35.6879 51.757 35.5161C51.4975 35.3676 50.969 35.2725 50.6968 35.2471L50.6686 35.2458H28.362C28.1532 35.2476 27.7653 35.3029 27.5861 35.4149C27.3338 35.5722 27.0349 35.9316 26.912 36.0994L26.9014 36.1139L23.381 42.3419L23.3429 42.4059L23.3435 42.4043C23.3424 42.4074 23.3271 42.4347 23.3271 42.4347ZM39.8749 30.5851C39.5184 30.5847 39.1766 30.443 38.9245 30.1909C38.6724 29.9388 38.5306 29.5971 38.5301 29.2406V21.5056C38.5306 21.1492 38.6723 20.8075 38.9243 20.5555C39.1763 20.3034 39.518 20.1616 39.8744 20.1611C40.2309 20.1615 40.5728 20.3032 40.8249 20.5553C41.0771 20.8073 41.2189 21.1491 41.2194 21.5056V29.2405C41.2191 29.5969 41.0773 29.9387 40.8252 30.1908C40.5732 30.4429 40.2314 30.5846 39.8749 30.585V30.5851ZM48.8898 30.5341C48.5333 30.5336 48.1916 30.3917 47.9395 30.1396C47.6875 29.8875 47.5457 29.5458 47.5453 29.1893C47.5456 28.8809 47.6516 28.5819 47.8457 28.3423L50.9194 24.5515C51.0453 24.3956 51.2047 24.27 51.3856 24.1838C51.5666 24.0977 51.7646 24.0532 51.965 24.0537C52.2757 24.0537 52.5683 24.1575 52.8103 24.3539C52.948 24.4646 53.0623 24.6017 53.1465 24.757C53.2308 24.9123 53.2833 25.0829 53.3011 25.2587C53.32 25.4343 53.304 25.6119 53.2537 25.7813C53.2035 25.9506 53.1202 26.1083 53.0085 26.2452L49.935 30.036C49.8095 30.1918 49.6507 30.3175 49.4701 30.4036C49.2896 30.4898 49.092 30.5343 48.8919 30.5338H48.8898V30.5341ZM31.0112 30.4313C30.8092 30.4318 30.6097 30.3865 30.4278 30.2988C30.2458 30.2111 30.0861 30.0833 29.9607 29.925L26.9392 26.1344C26.7173 25.8554 26.6151 25.4998 26.6551 25.1455C26.695 24.7912 26.8739 24.4673 27.1525 24.2447C27.3898 24.0541 27.6853 23.9505 27.9897 23.9514C28.4019 23.9514 28.7853 24.1361 29.0419 24.458L32.0637 28.2485C32.2857 28.5274 32.388 28.883 32.3481 29.2372C32.3083 29.5914 32.1295 29.9154 31.851 30.138C31.6128 30.3274 31.3177 30.4307 31.0133 30.4313H31.0112Z" fill="#7B838B"/>
<path d="M39.9264 50.3068C36.9308 50.3068 34.3281 48.2985 33.5976 45.4236L33.5388 45.1918L21.5977 45.1847C21.2412 45.1839 20.8995 45.0419 20.6475 44.7897C20.3954 44.5375 20.2537 44.1957 20.2532 43.8391C20.2537 43.4827 20.3956 43.1411 20.6476 42.8892C20.8997 42.6373 21.2413 42.4955 21.5977 42.4951L34.7466 42.5035C35.103 42.5044 35.4444 42.6465 35.6963 42.8986C35.9481 43.1506 36.0899 43.4922 36.0904 43.8486C36.0904 45.9621 37.7753 47.6174 39.9264 47.6174C42.0698 47.6174 43.7489 45.9622 43.7489 43.8486C43.7496 43.4922 43.8915 43.1506 44.1435 42.8985C44.3954 42.6465 44.737 42.5044 45.0934 42.5035L58.1206 42.4953C58.8623 42.4953 59.4651 43.0976 59.4656 43.8388C59.4661 44.58 58.8634 45.1839 58.1221 45.185L46.3019 45.1921L46.243 45.4238C45.5134 48.2987 42.9162 50.3068 39.9264 50.3068Z" fill="#7B838B"/>
</svg>
src/components/Icon/icons/export.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682957006954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2644" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M942.1 593.9c-22.6 0-41 18.3-41 41v204.8c0 22.6-18.4 41-41 41H163.8c-22.6 0-41-18.4-41-41V634.9c0-22.6-18.3-41-41-41s-41 18.3-41 41v204.8c0 67.8 55.1 122.9 122.9 122.9H860c67.8 0 122.9-55.1 122.9-122.9V634.9c0.1-22.6-18.2-41-40.8-41z" p-id="2645"></path><path d="M309.3 363L471 201.3v515.5c0 22.5 18.4 41 41 41 22.5 0 41-18.4 41-41V201.3L714.7 363c15.9 15.9 42 15.9 57.9 0 15.9-15.9 15.9-42 0-57.9L541.5 73.9c-0.2-0.2-0.3-0.4-0.4-0.5-5.7-5.7-12.7-9.3-20.1-10.9-0.2-0.1-0.5-0.2-0.7-0.2-2.7-0.5-5.4-0.8-8.1-0.8-2.7 0-5.5 0.3-8.1 0.8-0.3 0.1-0.5 0.2-0.7 0.2-7.4 1.6-14.4 5.2-20.1 10.9-0.2 0.2-0.3 0.4-0.4 0.5L251.4 305.1c-15.9 15.9-15.9 42 0 57.9 15.9 15.9 42 15.9 57.9 0z" p-id="2646"></path></svg>
\ No newline at end of file
src/components/Icon/icons/history.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682232686576" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8959" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><path d="M762.805186 140.938939c-14.335497-9.66922-33.725102-5.887081-43.373857 8.398274-9.648754 14.295588-5.897314 33.714869 8.398274 43.373857 106.369609 71.852468 169.864736 191.267185 169.864736 319.445496 0 212.414831-172.802648 385.217479-385.217479 385.217479S127.259382 724.571397 127.259382 512.156566c0-128.178311 63.494103-247.593028 169.864736-319.445496 14.295588-9.658987 18.047028-29.078269 8.398274-43.373857-9.658987-14.285355-29.088502-18.067494-43.373857-8.398274C138.575102 224.432539 64.791655 363.206162 64.791655 512.156566c0 246.851131 200.834074 447.685205 447.685205 447.685205S960.162066 759.007697 960.162066 512.156566C960.162066 363.206162 886.377596 224.432539 762.805186 140.938939z" p-id="8960"></path><path d="M401.003 64.47136c-17.253966 0-31.234375 13.980409-31.234375 31.233352l0 30.470989c0 17.253966 13.980409 31.234375 31.234375 31.234375s31.234375-13.980409 31.234375-31.234375L432.237375 95.704712C432.236352 78.450746 418.256966 64.47136 401.003 64.47136z" p-id="8961"></path><path d="M623.950721 64.47136c-17.253966 0-31.233352 13.980409-31.233352 31.233352l0 30.470989c0 17.253966 13.980409 31.234375 31.233352 31.234375s31.234375-13.980409 31.234375-31.234375L655.185097 95.704712C655.184073 78.450746 641.204687 64.47136 623.950721 64.47136z" p-id="8962"></path><path d="M426.012603 227.493248c11.214413 18.047028 41.970904 48.589648 86.157265 48.589648 43.963281 0 75.105558-30.318516 86.574774-48.223305 9.222035-14.396895 5.03262-33.358759-9.242502-42.763966-14.304797-9.405207-33.593096-5.398964-43.159986 8.764618-0.132006 0.193405-13.614066 19.754926-34.172287 19.754926-19.989263 0-32.423457-18.098193-33.267685-19.36914-9.160637-14.427594-28.264741-18.799158-42.834574-9.770528C421.416935 193.584973 416.912341 212.841549 426.012603 227.493248z" p-id="8963"></path><path d="M510.781242 335.164502c-17.253966 0-31.233352 13.980409-31.233352 31.233352l0 208.225415c0 0.63445 0.149403 1.227967 0.187265 1.853208 0.067538 1.115404 0.148379 2.217505 0.333598 3.314489 0.168846 1.00898 0.416486 1.978051 0.679475 2.951215 0.258896 0.954745 0.529049 1.895163 0.87595 2.821255 0.36839 0.981351 0.801249 1.916653 1.26276 2.847861 0.431835 0.876973 0.880043 1.734504 1.393743 2.569522 0.532119 0.860601 1.115404 1.670036 1.727341 2.472308 0.610914 0.805342 1.235131 1.588171 1.926886 2.336208 0.688685 0.74292 1.424442 1.420349 2.181689 2.093684 0.741897 0.659009 1.484817 1.303692 2.298346 1.89721 0.899486 0.657986 1.850138 1.222851 2.819209 1.783623 0.544399 0.314155 1.00898 0.714268 1.577938 0.998747l208.225415 104.113219c4.484128 2.236947 9.252735 3.304256 13.94971 3.304256 11.44875 0 22.479991-6.334265 27.959795-17.274432 7.706519-15.433504 1.454118-34.192753-13.970176-41.909505l-190.961216-95.480608L542.015617 366.397854C542.015617 349.143888 528.035208 335.164502 510.781242 335.164502z" p-id="8964"></path></svg>
\ No newline at end of file
src/components/Icon/icons/home.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679114254212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2776" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M923.733333 394.666667c-85.333333-70.4-206.933333-174.933333-362.666666-309.333334C533.333333 61.866667 490.666667 61.866667 462.933333 85.333333c-155.733333 134.4-277.333333 238.933333-362.666666 309.333334-14.933333 14.933333-25.6 34.133333-25.6 53.333333 0 38.4 32 70.4 70.4 70.4H192v358.4c0 29.866667 23.466667 53.333333 53.333333 53.333333H405.333333c29.866667 0 53.333333-23.466667 53.333334-53.333333v-206.933333h106.666666v206.933333c0 29.866667 23.466667 53.333333 53.333334 53.333333h160c29.866667 0 53.333333-23.466667 53.333333-53.333333V518.4h46.933333c38.4 0 70.4-32 70.4-70.4 0-21.333333-10.666667-40.533333-25.6-53.333333z m-44.8 59.733333h-57.6c-29.866667 0-53.333333 23.466667-53.333333 53.333333v358.4h-138.666667V661.333333c0-29.866667-23.466667-53.333333-53.333333-53.333333h-128c-29.866667 0-53.333333 23.466667-53.333333 53.333333v206.933334H256V507.733333c0-29.866667-23.466667-53.333333-53.333333-53.333333H145.066667c-4.266667 0-6.4-2.133333-6.4-6.4 0-2.133333 2.133333-4.266667 2.133333-6.4 85.333333-70.4 206.933333-174.933333 362.666667-309.333333 4.266667-4.266667 10.666667-4.266667 14.933333 0 155.733333 134.4 277.333333 238.933333 362.666667 309.333333 2.133333 2.133333 2.133333 2.133333 2.133333 4.266667 2.133333 6.4-2.133333 8.533333-4.266667 8.533333z" p-id="2777"></path></svg>
\ No newline at end of file
src/components/Icon/icons/menu.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679316084227" class="icon" viewBox="0 0 1305 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1173" xmlns:xlink="http://www.w3.org/1999/xlink" width="61.171875" height="48"><path d="M0.837818 75.218317c0 19.642164 8.098902 39.191237 21.969435 53.06177 13.963624 13.963624 33.512697 22.062525 53.247951 22.062525a76.055204 76.055204 0 0 0 53.06177-21.969434c13.963624-13.963624 22.062525-33.512697 22.062526-53.154861A76.055204 76.055204 0 0 0 129.303156 21.970365 76.055204 76.055204 0 0 0 76.055204 0.000931a76.055204 76.055204 0 0 0-53.247951 21.969434A76.706839 76.706839 0 0 0 0.837818 75.218317M0.837818 476.160498c0 19.642164 8.005811 39.377419 21.969435 53.247952 13.963624 13.963624 33.419606 21.969435 53.247951 21.969434a76.241385 76.241385 0 0 0 53.154861-21.969434 75.962113 75.962113 0 0 0 21.969435-53.247952 76.241385 76.241385 0 0 0-21.969435-53.154861 75.962113 75.962113 0 0 0-53.154861-21.969434 76.241385 76.241385 0 0 0-53.247951 21.969434 75.962113 75.962113 0 0 0-21.969435 53.154861M0.837818 877.19577c0 19.642164 8.005811 39.284328 21.969435 53.247951 13.963624 13.963624 33.419606 21.969435 53.247951 21.969435a76.241385 76.241385 0 0 0 53.154861-21.969435 75.962113 75.962113 0 0 0 21.969435-53.247951 76.241385 76.241385 0 0 0-21.969435-53.247952 75.962113 75.962113 0 0 0-53.154861-21.969434 76.241385 76.241385 0 0 0-53.247951 21.969434 76.520658 76.520658 0 0 0-21.969435 53.247952M1304.109361 75.218317c0 41.518508-32.395607 75.124295-72.331571 75.124295H373.945843c-40.029055 0-72.331571-33.512697-72.331571-75.124295C301.521181 33.513628 333.916788 0.000931 373.945843 0.000931h857.831947c40.029055 0 72.331571 33.605788 72.331571 75.217386M1231.77779 551.377884H373.945843c-40.029055 0-72.331571-33.605788-72.331571-75.217386 0-41.518508 32.302516-75.124295 72.331571-75.124295h857.831947c40.029055-0.186182 72.331571 33.512697 72.331571 75.124295 0 41.425417-32.395607 75.217386-72.331571 75.217386zM1304.109361 877.102679c0 41.611599-32.395607 75.310477-72.331571 75.310477H373.945843c-40.029055 0-72.331571-33.698878-72.331571-75.310477 0-41.425417 32.302516-75.124295 72.331571-75.124295h857.831947c40.029055-0.093091 72.331571 33.698878 72.331571 75.124295" p-id="1174"></path></svg>
\ No newline at end of file
src/components/Icon/icons/model.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679070302676" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1173" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M910.13 243.22L545.97 32.97c-19.82-11.46-44.41-11.4-64.16 0.13L115.54 246.51c-19.5 11.36-31.68 32.43-31.76 54.99L82.1 725.44c-0.08 22.87 12.16 44.16 31.97 55.6l364.16 210.25c9.86 5.7 20.92 8.55 31.97 8.55 11.13 0 22.27-2.89 32.19-8.67l366.27-213.41c19.5-11.36 31.66-32.43 31.75-54.99l1.69-423.93c0.08-22.88-12.16-44.18-31.97-55.62zM513.68 88.9l335.28 193.58-332.93 192.2c-1.38 0.8-2.63 1.76-3.94 2.64-1.32-0.88-2.56-1.85-3.94-2.64L178.66 284.46 513.68 88.9zM146.69 725.68l1.24-384.39 327.91 189.32c1.59 0.92 2.74 2.31 3.54 3.89-0.09 1.49-0.29 2.95-0.28 4.45l0.7 175.55-0.8 202.69-332.31-191.51z m398.5 189.44l-0.8-200.61 0.7-175.54c0.01-1.5-0.2-2.97-0.28-4.46 0.8-1.59 1.95-2.98 3.53-3.9l329.03-189.96-1.23 381.29-330.95 193.18z" p-id="1174"></path></svg> <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683254592786" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1352" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M450.09164971 42.7357605a123.86965959 123.86965959 0 0 1 123.76374272 0L889.06369251 222.84722403a123.92261859 123.92261859 0 0 1 62.06722618 107.2407279v360.38180181c0 44.22025102-23.6194395 85.05116445-61.9613093 107.13480989l-0.10591688 0.10591687-315.20830008 180.11146353a123.86965959 123.86965959 0 0 1-123.76374272 0L134.93630749 797.7104805a123.92261859 123.92261859 0 0 1-62.06722618-107.24072676V330.08795193c0-44.22025102 23.67239737-85.05116445 61.9613093-107.13481102l0.10591688-0.10591688z m462.16781482 223.59029646a33.78744889 33.78744889 0 0 0-46.17971029-12.28634453l-353.81496263 204.57823687L158.44982898 254.09267029a33.78744889 33.78744889 0 0 0-33.89336463 58.46605597l353.6031289 204.47232v430.02207687c0 18.00585102 15.14609778 32.62236445 33.84040675 32.62236444a33.20490667 33.20490667 0 0 0 33.73449102-32.62236444V517.29583787l354.18567111-204.79006948a33.78744889 33.78744889 0 0 0 14.66947129-41.20162304z" p-id="1353"></path></svg>
\ No newline at end of file \ No newline at end of file
src/components/Icon/icons/more.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683436563791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1062" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M162.42900021 628.38449281c-64.29851769 0-116.48887344-52.19035577-116.48887345-116.48887345s52.19035577-116.48887344 116.48887345-116.48887345 116.48887344 52.19035577 116.48887344 116.48887345S226.72751789 628.38449281 162.42900021 628.38449281z" fill="#575B66" p-id="1063"></path><path d="M511.89561936 628.38449281c-64.29851769 0-116.48887344-52.19035577-116.48887345-116.48887345s52.19035577-116.48887344 116.48887345-116.48887345 116.48887344 52.19035577 116.48887345 116.48887345S576.19413706 628.38449281 511.89561936 628.38449281z" fill="#575B66" p-id="1064"></path><path d="M861.57099979 628.38449281c-64.29851769 0-116.48887344-52.19035577-116.48887344-116.48887345s52.19035577-116.48887344 116.48887344-116.48887345 116.48887344 52.19035577 116.48887345 116.48887345S925.66075619 628.38449281 861.57099979 628.38449281z" fill="#575B66" p-id="1065"></path></svg>
\ No newline at end of file
src/components/Icon/icons/out.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683506235966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1906" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M833.633836 551.096437 481.955218 551.096437c-16.207124 0-29.359678-13.019525-29.359678-29.322839 0-16.188704 13.057387-29.321816 29.359678-29.321816l359.371834 0-74.718749-74.719772c-11.435447-11.414981-11.473309-29.894867 0.057305-41.424458 11.453866-11.453866 30.124088-11.340279 41.407062-0.038886l109.329011 109.310591c5.555529 1.069355 10.881838 3.703345 15.196097 8.018627 6.681166 6.681166 9.468652 15.691377 8.399297 24.319895 1.069355 8.630564-1.718131 17.640776-8.399297 24.321942-4.314259 4.315282-9.640568 6.987135-15.196097 8.018627l-109.329011 109.309568c-11.281951 11.30037-29.953196 11.413957-41.407062-0.039909-11.530614-11.530614-11.491729-30.009478-0.057305-41.423435L833.633836 551.096437zM745.933425 238.32392l0-97.704253c0-43.2572-35.029818-78.230736-78.230736-78.230736l-508.36931 0c-43.181475 0-78.230736 35.011398-78.230736 78.230736l0 742.759641c0 43.256176 35.011398 78.230736 78.230736 78.230736l508.36931 0c43.181475 0 78.230736-35.050284 78.230736-78.230736l0-97.704253c0-16.188704-13.134135-29.321816-29.341259-29.321816-16.208147 0-29.341259 13.133112-29.341259 29.321816l0 78.230736c0 21.571295-17.600867 39.059598-38.925544 39.059598l-469.635123 0c-21.49557 0-38.943964-17.450441-38.943964-39.059598l0-703.852516c0-21.533432 17.600867-39.019689 38.943964-39.019689l469.635123 0c21.515013 0 38.925544 17.410532 38.925544 39.019689l0 78.269621c0 16.187681 13.133112 29.321816 29.341259 29.321816C732.79929 267.645736 745.933425 254.511601 745.933425 238.32392z" p-id="1907"></path></svg>
\ No newline at end of file
src/components/Icon/icons/pay.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679410564438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2824" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M693.095316 281.760857l-131.632817 223.935003 103.718481 0 0 49.478312-120.846571 0 0 68.193688 120.846571 0 0 50.115659-120.846571 0 0 99.276514-62.164435 0L482.169975 673.483519 356.88022 673.483519l0-50.115659 125.289755 0 0-68.193688L356.88022 555.174172l0-49.478312 106.893053 0-130.364204-223.935003 70.099647 0c60.895822 111.230417 97.898433 181.748475 111.012698 211.562689l1.268612 0c4.441967-12.262847 16.596562-37.002611 36.474732-74.219292l74.536749-137.343396L693.095316 281.760857 693.095316 281.760857zM693.095316 281.760857" p-id="2825"></path><path d="M784.470674 621.448522c-15.061578 0-27.247797 12.187435-27.247797 27.247797s12.187435 27.247797 27.247797 27.247797l71.98128 0c-61.204765 128.843816-192.338895 217.986027-344.464118 217.986027-210.6687 0-381.478892-170.782216-381.478892-381.475243 0-210.696675 170.810191-381.465512 381.478892-381.465512 192.121175 0 350.635679 142.189179 377.137878 326.968701l55.08064 0C917.333181 242.953241 734.255278 76.493794 511.987837 76.493794 271.197197 76.493794 76.012135 271.688586 76.012135 512.456117c0 240.762665 195.185062 435.972053 435.975702 435.972053 164.236031 0 307.128238-90.894915 381.475243-225.064956l0 61.57574c0 15.061578 12.187435 27.247797 27.276989 27.247797 15.004412 0 27.247797-12.187435 27.247797-27.247797L947.987865 648.697535c0-3.297419 0-27.247797-27.247797-27.247797L784.470674 621.449738 784.470674 621.448522zM784.470674 621.448522" p-id="2826"></path></svg>
\ No newline at end of file
src/components/Icon/icons/phoneTabbar/chat.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683450440385" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1585" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M469.21500445 150.07971555h87.84554666V84.19555555h-87.84554666v65.88416zM106.84416 732.06897778v-219.61614223H40.96v219.61614223h65.88416z m450.21866667 142.75242667H249.59431111v65.88416h307.46396444v-65.88416zM40.96 732.06670222c0 115.21137778 93.42520889 208.63658667 208.63658667 208.63658667v-65.88416c-78.84344889 0-142.75242667-63.90897778-142.75242667-142.75242667H40.96z m878.47139555-219.61614222c0 200.11463111-162.25393778 362.36856889-362.37084444 362.36856889v65.88416C793.58862222 940.70328889 985.31555555 748.97863111 985.31555555 512.45056h-65.88416zM557.06055111 150.07971555c200.11690667 0 362.37084445 162.25393778 362.37084444 362.37084445H985.31555555C985.31555555 275.92248889 793.58862222 84.19555555 557.06055111 84.19555555v65.88416zM469.21500445 84.19555555C232.68693333 84.19555555 40.96 275.92248889 40.96 512.45056h65.88416c0-200.11690667 162.25393778-362.37084445 362.37084445-362.37084445V84.19555555z" p-id="1586"></path><path d="M513.13777778 512.45056m-43.92277333 0a43.92277333 43.92277333 0 1 0 87.84554666 0 43.92277333 43.92277333 0 1 0-87.84554666 0Z" p-id="1587"></path><path d="M688.83114667 512.45056m-43.92277334 0a43.92277333 43.92277333 0 1 0 87.84554667 0 43.92277333 43.92277333 0 1 0-87.84554667 0Z" p-id="1588"></path><path d="M337.44440889 512.45056m-43.92277334 0a43.92277333 43.92277333 0 1 0 87.84554667 0 43.92277333 43.92277333 0 1 0-87.84554667 0Z" p-id="1589"></path></svg>
\ No newline at end of file
src/components/Icon/icons/phoneTabbar/me.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683450445756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1866" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M671.3984 266.93973333c0 87.97866667-71.31306667 159.2896-159.2896 159.2896v73.5168c128.55893333 0 232.8064-104.24746667 232.8064-232.8064h-73.5168z m-159.2896 159.2896c-87.97653333 0-159.28746667-71.31306667-159.28746667-159.2896h-73.51893333c0 128.55893333 104.2496 232.8064 232.8064 232.8064v-73.5168z m-159.28746667-159.2896c0-87.97653333 71.31093333-159.28746667 159.28746667-159.28746666V34.13333333c-128.5568 0-232.8064 104.24746667-232.8064 232.8064h73.51893333z m159.28746667-159.28746666c87.97866667 0 159.2896 71.31093333 159.2896 159.28746666h73.5168C744.91733333 138.3808 640.66773333 34.13333333 512.1088 34.13333333v73.51893334z m306.32533333 673.9136c0 25.9264-22.00533333 59.3536-80.18346666 88.41813333-55.97226667 27.98506667-135.86133333 46.36373333-226.14186667 46.36373333V989.86666667c99.2 0 190.85226667-20.04693333 259.02933333-54.10986667 66.01813333-33.03253333 120.81493333-85.37813333 120.81493334-154.19093333H818.432z m-306.32533333 134.784c-90.2784 0-170.1696-18.3808-226.13973333-46.36586667-58.17813333-29.06453333-80.18346667-62.49173333-80.18346667-88.41813333H132.26666667c0 68.8128 54.79466667 121.1584 120.81493333 154.19093333C321.25653333 969.81973333 412.91093333 989.86666667 512.11093333 989.86666667v-73.51893334z m-306.32533333-134.784c0-25.9264 22.00746667-59.3536 80.1856-88.41813334 55.97013333-27.98506667 135.86133333-46.36586667 226.13973333-46.36586666v-73.5168c-99.2 0-190.85226667 20.0448-259.02933333 54.10986666C187.06346667 660.40746667 132.26666667 712.75306667 132.26666667 781.56586667h73.51893333z m306.32533333-134.784c90.28266667 0 170.1696 18.3808 226.14186667 46.36586666 58.176 29.06453333 80.18346667 62.49173333 80.18346666 88.41813334h73.51893334c0-68.8128-54.7968-121.1584-120.81493334-154.19093334-68.17706667-34.06506667-159.82933333-54.10986667-259.02933333-54.10986666v73.5168z" p-id="1867"></path></svg>
\ No newline at end of file
src/components/Icon/icons/phoneTabbar/model.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683450443331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1727" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M58.15222827 227.09272427L492.1075808-23.4520384a39.00952427 39.00952427 0 0 1 39.00952427 0l433.95657066 250.54476267a39.00952427 39.00952427 0 0 1 19.50476267 33.78346666v501.0895232a39.00952427 39.00952427 0 0 1-19.50476267 33.78224747l-433.95657066 250.54476267a39.00952427 39.00952427 0 0 1-39.00952427 0L58.15100907 795.7479616a39.00952427 39.00952427 0 0 1-19.5047616-33.78224747V260.87619093a39.00952427 39.00952427 0 0 1 19.5047616-33.78346666z m63.494096 53.5503232a9.7523808 9.7523808 0 0 0-4.87619094 8.4467808v444.66224746a9.7523808 9.7523808 0 0 0 4.87619094 8.44556267l385.08982826 222.3311232a9.7523808 9.7523808 0 0 0 9.7523808 0l385.08860907-222.329904a9.7523808 9.7523808 0 0 0 4.87619093-8.44678187V289.08982827a9.7523808 9.7523808 0 0 0-4.87619093-8.4467808L516.48853333 58.3131424a9.7523808 9.7523808 0 0 0-9.7523808 0l-385.08982826 222.32990507z m389.56129493 190.72l300.3611424-173.4131808c18.65752427-10.77150507 42.51550507-4.3788192 53.28822933 14.27870506 10.77150507 18.65752427 4.3788192 42.51550507-14.27870506 53.28822827L551.00952427 538.4728384V881.37142827c0 21.54422827-17.46529493 39.00952427-39.00952427 39.00952426-21.54422827 0-39.00952427-17.46529493-39.00952427-39.00952426V539.38712427L172.89386667 366.12632427c-18.65752427-10.77272427-25.05142827-34.63070507-14.27870507-53.28822934 10.77272427-18.65752427 34.63070507-25.05142827 53.28822933-14.278704L511.2076192 471.36304747z" p-id="1728"></path></svg>
\ No newline at end of file
src/components/Icon/icons/phoneTabbar/more.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683450447995" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2005" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M728.99015111 121.90378667h107.92732444V40.96h-107.92732444v80.94378667z m175.38161778 67.45429333v107.92732445H985.31555555v-107.92732445h-80.94378666z m-67.45429334 175.38161778h-107.92732444v80.94378667h107.92732444v-80.94378667z m-175.38161777-67.45429333v-107.92732445h-80.94378667v107.92732445h80.94378667z m67.45429333 67.45429333c-37.23491555 0-67.45429333-30.21937778-67.45429333-67.45429333h-80.94378667c0 81.97006222 66.42801778 148.39808 148.39808 148.39808v-80.94378667z m175.38161778-67.45429333c0 37.23491555-30.21937778 67.45429333-67.45429334 67.45429333v80.94378667c81.97006222 0 148.39808-66.42801778 148.39808-148.39808h-80.94378666zM836.91747555 121.90151111c37.23491555 0 67.45429333 30.21937778 67.45429334 67.45429334H985.31555555C985.31555555 107.38801778 918.88753778 40.96 836.91747555 40.96v80.94378667zM728.99015111 40.96c-81.97006222 0-148.39808 66.42801778-148.39808 148.39808h80.94378667c0-37.23491555 30.21937778-67.45429333 67.45429333-67.45429333V40.96zM189.35808 661.53585778h107.92732445v-80.94378667h-107.92732445v80.94378667z m175.38161778 67.45429333v107.92732444h80.94378667v-107.92732444h-80.94378667z m-67.45429333 175.38161778h-107.92732445V985.31555555h107.92732445v-80.94378666zM121.90151111 836.91747555v-107.92732444H40.96v107.92732444h80.94378667z m67.45429334 67.45429334c-37.23491555 0-67.45429333-30.21937778-67.45429334-67.45429334H40.96C40.96 918.88753778 107.38801778 985.31555555 189.35808 985.31555555v-80.94378666z m175.38161777-67.45429334c0 37.23491555-30.21937778 67.45429333-67.45429333 67.45429334V985.31555555c81.97006222 0 148.39808-66.42801778 148.39808-148.39808h-80.94378667z m-67.45429333-175.38161777c37.23491555 0 67.45429333 30.21937778 67.45429333 67.45429333h80.94378667c0-81.97006222-66.42801778-148.39808-148.39808-148.39808v80.94378667z m-107.92732444-80.94378667C107.38801778 580.59207111 40.96 647.02008889 40.96 728.99015111h80.94378667c0-37.23491555 30.21937778-67.45429333 67.45429333-67.45429333v-80.94378667z m0-458.68828444h107.92732444V40.96h-107.92732444v80.94378667z m175.38161777 67.45429333v107.92732445h80.94378667v-107.92732445h-80.94378667z m-67.45429333 175.38161778h-107.92732444v80.94378667h107.92732444v-80.94378667zM121.90151111 297.28540445v-107.92732445H40.96v107.92732445h80.94378667z m67.45429334 67.45429333c-37.23491555 0-67.45429333-30.21937778-67.45429334-67.45429333H40.96c0 81.97006222 66.42801778 148.39808 148.39808 148.39808v-80.94378667z m175.38161777-67.45429333c0 37.23491555-30.21937778 67.45429333-67.45429333 67.45429333v80.94378667c81.97006222 0 148.39808-66.42801778 148.39808-148.39808h-80.94378667zM297.28540445 121.90151111c37.23491555 0 67.45429333 30.21937778 67.45429333 67.45429334h80.94378667c0-81.97006222-66.42801778-148.39808-148.39808-148.39808v80.94378666zM189.35808 40.96C107.38801778 40.96 40.96 107.38801778 40.96 189.35808h80.94378667c0-37.23491555 30.21937778-67.45429333 67.45429333-67.45429333V40.96z m539.63207111 620.57585778h107.92732444v-80.94378667h-107.92732444v80.94378667z m175.38161778 67.45429333v107.92732444H985.31555555v-107.92732444h-80.94378666z m-67.45429334 175.38161778h-107.92732444V985.31555555h107.92732444v-80.94378666z m-175.38161777-67.45429334v-107.92732444h-80.94378667v107.92732444h80.94378667z m67.45429333 67.45429334c-37.23491555 0-67.45429333-30.21937778-67.45429333-67.45429334h-80.94378667c0 81.97006222 66.42801778 148.39808 148.39808 148.39808v-80.94378666z m175.38161778-67.45429334c0 37.23491555-30.21937778 67.45429333-67.45429334 67.45429334V985.31555555C918.88753778 985.31555555 985.31555555 918.88753778 985.31555555 836.91747555h-80.94378666z m-67.45429334-175.38161777c37.23491555 0 67.45429333 30.21937778 67.45429334 67.45429333H985.31555555c0-81.97006222-66.42801778-148.39808-148.39808-148.39808v80.94378667z m-107.92732444-80.94378667c-81.97006222 0-148.39808 66.42801778-148.39808 148.39808h80.94378667c0-37.23491555 30.21937778-67.45429333 67.45429333-67.45429333v-80.94378667z" p-id="2006"></path></svg>
\ No newline at end of file
src/components/Icon/icons/promotion.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682078370900" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3577" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M941.312 888.704H628.032a32 32 0 0 1 0-64h313.28a32 32 0 0 1 0 64zM519.808 576.768c-158.976 0-288.384-129.344-288.384-288.384S360.832 0 519.808 0s288.384 129.344 288.384 288.384-129.408 288.384-288.384 288.384z m0-512.768C396.096 64 295.424 164.672 295.424 288.384s100.672 224.384 224.384 224.384c123.776 0 224.384-100.672 224.384-224.384S643.584 64 519.808 64z" p-id="3578"></path><path d="M763.264 606.528a31.552 31.552 0 0 1-16.96-4.864 427.2 427.2 0 0 0-100.544-45.952 32 32 0 0 1-21.184-40 31.744 31.744 0 0 1 39.936-21.184 492.16 492.16 0 0 1 115.712 52.864 32 32 0 0 1-16.96 59.136zM59.776 996.928a32 32 0 0 1-32-32 489.6 489.6 0 0 1 347.328-470.464 32 32 0 1 1 18.816 61.184 425.856 425.856 0 0 0-302.144 409.28 32 32 0 0 1-32 32zM964.224 879.68a32.128 32.128 0 0 1-24.32-11.2l-108.224-126.336a32 32 0 1 1 48.64-41.6l108.224 126.336a32 32 0 0 1-24.32 52.8z" p-id="3579"></path><path d="M856 1024a32 32 0 0 1-25.664-51.2l108.224-144.32a32.064 32.064 0 0 1 51.264 38.336L881.6 1011.2a32 32 0 0 1-25.6 12.8z" p-id="3580"></path></svg> <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683254589346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1074" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M446.5084032 361.0189472m-220.5069312 0a215.4848 215.4848 0 1 0 441.01386347 0 215.4848 215.4848 0 1 0-441.01386347 0ZM620.04694507 784.5116256c0-68.92772267 33.63539307-129.9888128 85.37702826-167.69996587 0.03602027-0.02619627 0.03820373-0.08077333 0.00218347-0.1080608-26.91486293-21.45832213-56.54544427-39.6551616-88.3045024-53.96834986-0.02401387-0.0109152-0.0523936-0.00654933-0.07204053 0.009824-46.01985387 38.94457813-105.5320672 62.44187093-170.5412096 62.44187093s-124.52026453-23.4962016-170.5412096-62.44187093c-0.019648-0.01746453-0.04802667-0.0207392-0.07204054-0.009824C143.28449387 622.50178773 47.66130453 749.79343893 32.841648 900.79959573c-0.00436587 0.04038613 0.02837973 0.0753152 0.06876587 0.0753152l622.71265706 0c0.054576 0 0.0873216-0.06003413 0.05566827-0.1058784C633.19001707 867.60954667 620.04694507 827.59745493 620.04694507 784.5116256zM827.43700053 620.7826336c-90.42533867 0-163.728992 73.30365227-163.728992 163.728992s73.30365227 163.728992 163.728992 163.728992 163.728992-73.30365227 163.728992-163.728992S917.86234027 620.7826336 827.43700053 620.7826336zM911.96263893 808.52521067L851.51935253 808.52521067c-0.03820373 0-0.06876587 0.0305632-0.06876586 0.06876586l0 60.4432864c0 12.48597333-9.2812512 23.34448-21.71155627 24.51896214-14.23023253 1.34476053-26.31561493-9.93725867-26.31561493-23.90443307l0-61.05672427c0-0.03820373-0.0305632-0.06876587-0.06876587-0.06876586L742.9124544 808.52630187c-12.48597333 0-23.34448-9.2812512-24.51896213-21.71155627-1.34476053-14.23023253 9.93725867-26.31561493 23.90443306-26.31561493l61.05672427 0c0.03820373 0 0.06876587-0.0305632 0.06876587-0.06876587l0-60.4432864c0-12.48597333 9.2812512-23.34448 21.71155626-24.51896213 14.23023253-1.34476053 26.31561493 9.93725867 26.31561494 23.90443306l0 61.05672427c0 0.03820373 0.0305632 0.06876587 0.06876586 0.06876587l61.05672427 0c13.9671744 0 25.2491936 12.0853824 23.90443307 26.31561493C935.30602667 799.24396053 924.44752 808.52521067 911.96263893 808.52521067z" p-id="1075"></path></svg>
\ No newline at end of file \ No newline at end of file
src/components/Icon/icons/share.svg deleted 100644 → 0
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679070718083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5975" id="mx_n_1679070718084" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M1023.82 694.91v146.26c0 102.38-80.44 182.82-182.82 182.82H182.83C80.45 1024 0 943.56 0 841.18V183.01C0 80.63 80.45 0.19 182.83 0.19h146.26c21.94 0 36.57 14.62 36.57 36.57 0 21.94-14.62 36.56-36.57 36.56H182.83c-58.5 0-109.7 51.19-109.7 109.7v658.17c0 58.5 51.19 109.7 109.7 109.7h658.17c58.5 0 109.7-51.19 109.7-109.7V694.91c0-21.94 14.62-36.56 36.56-36.56 21.93 0 36.56 14.63 36.56 36.56z" p-id="5976"></path><path d="M1012.6 292.61L684.73 5.86c-6.56-5.7-15.02-6.32-21.96-1.49-6.94 4.83-11.31 14.24-11.31 24.65v132.66h-80.9c-84.89 0-164.74 41.49-224.82 116.92-29.27 36.79-52.28 79.65-68.44 127.34C260.57 455.5 252.11 508.02 252.11 562.27c0 40.13 4.65 85.72 12.17 118.79 2.47 11.02 9.89 18.95 18.72 19.94h1.81c8.08 0 15.59-6.07 19.21-15.61 50.29-134.27 154.86-220.98 266.46-220.98h80.9v138.12c0 10.28 4.37 19.69 11.31 24.65 6.94 4.83 15.4 4.33 21.96-1.49l327.96-286.75c5.89-5.21 9.51-13.87 9.51-23.16-0.01-9.3-3.53-17.97-9.52-23.17z m-88.21 16.04L717.4 477.58v-81.92c0-11.07-7.41-20.08-16.52-20.08h-78.98c-49.84 0-95.79 2.5-146.79 32.25-30.31 17.68-130.92 89.06-150 121.09-0.51-7.94 20.14-85.47 23-92.41C390.11 334.54 504.6 237.8 621.9 237.8h78.98c9.1 0 16.52-9.02 16.52-20.08v-78l206.99 168.93z" p-id="5977"></path></svg>
\ No newline at end of file
src/components/Icon/icons/shareMarket.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1682599933100" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5707" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M750.592 668.7232a159.6416 159.6416 0 0 0-128.4608 64.9216l-269.568-138.24a159.3344 159.3344 0 0 0 17.0496-128.6656l261.12-136.704a159.4368 159.4368 0 1 0-31.1296-53.0432L341.1456 412.3648a159.7952 159.7952 0 1 0-32.256 229.7856l286.72 146.9952a159.7952 159.7952 0 1 0 154.88-120.4224z m0-542.72a98.3552 98.3552 0 1 1-98.3552 98.3552 98.4576 98.4576 0 0 1 98.3552-98.304z m-534.2208 484.352A98.3552 98.3552 0 1 1 314.7264 512a98.4576 98.4576 0 0 1-98.3552 98.3552zM750.592 926.72a98.3552 98.3552 0 1 1 98.3552-98.3552A98.4576 98.4576 0 0 1 750.592 926.72z" p-id="5708"></path></svg> <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683254591061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1213" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M389.5296 650.78613333a204.8 204.8 0 1 1-10.82026667-288.49493333L557.43146667 245.76a153.6 153.6 0 1 1 39.25333333 55.9104l-176.46933333 115.02933333c15.01866667 28.50133333 23.48373333 60.928 23.48373333 95.3344a204.11733333 204.11733333 0 0 1-16.86186667 81.47626667l257.1264 144.62293333a153.6 153.6 0 1 1-30.9248 60.928l-263.54346666-148.24106666z" p-id="1214"></path></svg>
\ No newline at end of file \ No newline at end of file
src/components/Icon/icons/user.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1680878383832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1637" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M511.333 63.333c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448z m0 832c-51.868 0-102.15-10.144-149.451-30.15-36.011-15.231-69.123-35.67-98.812-60.897 12.177-31.985 42.226-63.875 84.223-88.903C396.189 686.243 456.222 669.53 512 669.53c55.631 0 115.416 16.658 164.026 45.703 41.762 24.953 71.689 56.812 83.863 88.804-29.764 25.342-62.976 45.865-99.106 61.146-47.299 20.006-97.582 30.15-149.45 30.15z m296.268-139.658c-20.493-35.937-54.353-68.855-98.747-95.381C649.75 624.979 579.839 605.53 512 605.53c-67.964 0-138.094 19.488-197.471 54.875-44.644 26.606-78.656 59.594-99.195 95.586-23.835-28.755-43.234-60.652-57.85-95.208-20.006-47.3-30.15-97.583-30.15-149.451s10.144-102.15 30.15-149.451c19.337-45.719 47.034-86.792 82.321-122.078 35.286-35.287 76.359-62.983 122.078-82.321 47.3-20.006 97.583-30.15 149.451-30.15 51.868 0 102.15 10.144 149.451 30.15 45.719 19.337 86.792 47.034 122.078 82.321 35.287 35.286 62.983 76.359 82.321 122.078 20.006 47.3 30.15 97.583 30.15 149.451s-10.144 102.15-30.15 149.451c-14.563 34.429-33.869 66.22-57.583 94.892z" p-id="1638"></path><path d="M512 220.223c-88.224 0-160 71.776-160 160s71.776 160 160 160c88.225 0 160-71.775 160-160s-71.775-160-160-160z m0 256c-52.935 0-96-43.065-96-96s43.065-96 96-96 96 43.065 96 96-43.065 96-96 96z" p-id="1639"></path></svg> <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683294437103" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1297" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M512 1025.74643102C229.20379943 1025.74643102-1.74643102 794.79620057-1.74643102 512S229.20379943-1.74643102 512-1.74643102 1025.74643102 229.20379943 1025.74643102 512 794.79620057 1025.74643102 512 1025.74643102z m254.5165805-400.62795081c-14.13981003-9.42654002-28.27962006-14.13981003-47.13270009-18.85308002-42.41943008-9.42654002-94.26540019-14.13981003-127.25829026-56.55924012 0 0-18.85308003-18.85308003 23.56635004-65.98578013 42.41943008-47.1327001 42.41943008-122.54502023 32.99289008-179.10426035-9.42654002-56.55924012-65.98578013-94.26540019-127.25829025-94.2654002-61.27251012 0-117.83175024 37.70616007-127.25829026 94.2654002-9.42654002 56.55924012-4.71327001 131.97156027 32.99289007 179.10426035 42.41943008 47.1327001 23.56635005 65.98578013 23.56635005 65.98578013-32.99289006 42.41943008-84.83886017 47.1327001-127.25829024 56.55924012-18.85308003 4.71327001-32.99289006 9.42654002-47.13270012 18.85308002-28.27962006 14.13981003-14.13981003 141.39810029-14.13981001 141.39810029h513.74643101c-9.42654002 0 0-122.54502023-9.42654002-141.39810029z" p-id="1298"></path></svg>
\ No newline at end of file \ No newline at end of file
src/components/Icon/icons/wx.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683506233267" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1762" xmlns:xlink="http://www.w3.org/1999/xlink" width="76.75" height="64"><path d="M86.176896 791.989949a21.240784 21.240784 0 0 1-19.541522-29.567172l61.246284-143.648389c-37.626532-31.205746-67.788446-67.31508-89.636109-107.526919C12.914397 464.529882 0 414.668658 0 363.059621c0-49.594197 11.906977-97.646919 35.405353-142.847308 22.503094-43.294787 54.619159-82.098665 95.47429-115.307114C214.010004 37.250267 324.26788 0 441.371358 0s227.324941 37.250267 310.443164 104.868786c40.842994 33.232724 72.971197 72.036602 95.474291 115.307114 23.498376 45.200389 35.405353 93.253111 35.405353 142.847308h-42.481569C840.212597 186.299884 661.280231 42.481568 441.371358 42.481568S42.481568 186.299884 42.481568 363.059621c0 44.447858 11.130171 87.487756 33.099211 127.905934 21.422848 39.447171 52.070265 74.573359 91.031932 104.383282a21.240784 21.240784 0 0 1 6.639263 25.209777l-45.940782 107.745395 146.670649-67.836996a21.252922 21.252922 0 0 1 15.66963-0.91032 481.291895 481.291895 0 0 0 151.719887 24.056706 500.372188 500.372188 0 0 0 53.793803-2.900884l4.58801 42.226679a543.011545 543.011545 0 0 1-58.381813 3.143636 524.902259 524.902259 0 0 1-157.011877-23.607615L95.085888 790.035796a21.216509 21.216509 0 0 1-8.908992 1.954153z" p-id="1763"></path><path d="M1151.578219 1024a21.204371 21.204371 0 0 1-8.908992-1.96629L980.984378 947.2176a454.504232 454.504232 0 0 1-134.800086 20.09985c-101.37316 0.036413-196.835313-32.237442-268.871915-90.813455-35.441766-28.838916-63.321812-62.508594-82.851196-100.098713a265.958893 265.958893 0 0 1 0-248.407937c19.541521-37.626532 47.421568-71.271934 82.851196-100.098713 72.00019-58.588152 167.498755-90.849868 268.835502-90.849868s196.859588 32.261717 268.859778 90.849868c35.441766 28.838916 63.321812 62.508594 82.851196 100.098713a266.929901 266.929901 0 0 1 30.780931 124.203968c0 44.909087-11.190859 88.228149-33.244862 128.840529-18.631202 34.300832-44.192969 65.166726-76.07842 91.905838l51.803238 121.485148a21.240784 21.240784 0 0 1-19.541521 29.567172z m-169.198018-120.732617a21.228647 21.228647 0 0 1 8.921129 1.966289l119.094043 55.080388-36.412773-85.521466a21.240784 21.240784 0 0 1 6.639262-25.209776c33.208449-25.379703 59.292132-55.262452 77.510656-88.810753 18.64334-34.325107 28.098523-70.847119 28.098523-108.558614 0-150.348339-152.520968-272.670981-339.998198-272.670981S506.186094 501.840836 506.186094 652.201313 658.707062 924.872295 846.172155 924.872295a410.857454 410.857454 0 0 0 129.520233-20.524667 21.228647 21.228647 0 0 1 6.687813-1.080245z" p-id="1764"></path><path d="M276.542873 215.830643m-45.916507 0a45.916507 45.916507 0 1 0 91.833013 0 45.916507 45.916507 0 1 0-91.833013 0Z" p-id="1765"></path><path d="M537.319015 215.830643m-45.916507 0a45.916507 45.916507 0 1 0 91.833013 0 45.916507 45.916507 0 1 0-91.833013 0Z" p-id="1766"></path><path d="M715.790152 509.997297m-45.916506 0a45.916507 45.916507 0 1 0 91.833013 0 45.916507 45.916507 0 1 0-91.833013 0Z" p-id="1767"></path><path d="M976.566294 509.997297m-45.916506 0a45.916507 45.916507 0 1 0 91.833013 0 45.916507 45.916507 0 1 0-91.833013 0Z" p-id="1768"></path></svg>
\ No newline at end of file
src/components/Icon/index.tsx
...@@ -4,25 +4,28 @@ import { Icon } from '@chakra-ui/react'; ...@@ -4,25 +4,28 @@ import { Icon } from '@chakra-ui/react';
const map = { const map = {
model: require('./icons/model.svg').default, model: require('./icons/model.svg').default,
share: require('./icons/share.svg').default,
home: require('./icons/home.svg').default,
menu: require('./icons/menu.svg').default,
pay: require('./icons/pay.svg').default,
copy: require('./icons/copy.svg').default, copy: require('./icons/copy.svg').default,
chatSend: require('./icons/chatSend.svg').default, chatSend: require('./icons/chatSend.svg').default,
board: require('./icons/board.svg').default,
develop: require('./icons/develop.svg').default, develop: require('./icons/develop.svg').default,
user: require('./icons/user.svg').default, user: require('./icons/user.svg').default,
promotion: require('./icons/promotion.svg').default, promotion: require('./icons/promotion.svg').default,
delete: require('./icons/delete.svg').default, delete: require('./icons/delete.svg').default,
withdraw: require('./icons/withdraw.svg').default, withdraw: require('./icons/withdraw.svg').default,
dbModel: require('./icons/dbModel.svg').default,
history: require('./icons/history.svg').default,
stop: require('./icons/stop.svg').default, stop: require('./icons/stop.svg').default,
shareMarket: require('./icons/shareMarket.svg').default, shareMarket: require('./icons/shareMarket.svg').default,
collectionLight: require('./icons/collectionLight.svg').default, collectionLight: require('./icons/collectionLight.svg').default,
collectionSolid: require('./icons/collectionSolid.svg').default, collectionSolid: require('./icons/collectionSolid.svg').default,
export: require('./icons/export.svg').default chat: require('./icons/chat.svg').default,
empty: require('./icons/empty.svg').default,
back: require('./icons/back.svg').default,
more: require('./icons/more.svg').default,
tabbarChat: require('./icons/phoneTabbar/chat.svg').default,
tabbarModel: require('./icons/phoneTabbar/model.svg').default,
tabbarMore: require('./icons/phoneTabbar/more.svg').default,
tabbarMe: require('./icons/phoneTabbar/me.svg').default,
closeSolid: require('./icons/closeSolid.svg').default,
wx: require('./icons/wx.svg').default,
out: require('./icons/out.svg').default
}; };
export type IconName = keyof typeof map; export type IconName = keyof typeof map;
......
src/components/Layout/auth.tsx
...@@ -2,7 +2,6 @@ import React from 'react'; ...@@ -2,7 +2,6 @@ import React from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useToast } from '@chakra-ui/react'; import { useToast } from '@chakra-ui/react';
import { useUserStore } from '@/store/user'; import { useUserStore } from '@/store/user';
import { useGlobalStore } from '@/store/global';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
const unAuthPage: { [key: string]: boolean } = { const unAuthPage: { [key: string]: boolean } = {
...@@ -19,15 +18,13 @@ const Auth = ({ children }: { children: JSX.Element }) => { ...@@ -19,15 +18,13 @@ const Auth = ({ children }: { children: JSX.Element }) => {
status: 'warning' status: 'warning'
}); });
const { userInfo, initUserInfo } = useUserStore(); const { userInfo, initUserInfo } = useUserStore();
const { setLoading } = useGlobalStore();
useQuery( useQuery(
[router.pathname, userInfo], [router.pathname],
() => { () => {
if (unAuthPage[router.pathname] === true || userInfo) { if (unAuthPage[router.pathname] === true || userInfo) {
return setLoading(false); return null;
} else { } else {
setLoading(true);
return initUserInfo(); return initUserInfo();
} }
}, },
...@@ -38,9 +35,6 @@ const Auth = ({ children }: { children: JSX.Element }) => { ...@@ -38,9 +35,6 @@ const Auth = ({ children }: { children: JSX.Element }) => {
`/login?lastRoute=${encodeURIComponent(location.pathname + location.search)}` `/login?lastRoute=${encodeURIComponent(location.pathname + location.search)}`
); );
toast(); toast();
},
onSettled() {
setLoading(false);
} }
} }
); );
......
src/components/Layout/index.tsx
import React, { useEffect } from 'react'; import React, { useCallback, useEffect } from 'react';
import { Box, useColorMode, Flex } from '@chakra-ui/react'; import { Box, useColorMode, Flex } from '@chakra-ui/react';
import Navbar from './navbar'; import Navbar from './navbar';
import NavbarPhone from './navbarPhone'; import NavbarPhone from './navbarPhone';
...@@ -8,53 +8,12 @@ import { useLoading } from '@/hooks/useLoading'; ...@@ -8,53 +8,12 @@ import { useLoading } from '@/hooks/useLoading';
import Auth from './auth'; import Auth from './auth';
import { useGlobalStore } from '@/store/global'; import { useGlobalStore } from '@/store/global';
const unShowLayoutRoute: { [key: string]: boolean } = { const pcUnShowLayoutRoute: Record<string, boolean> = {
'/login': true, '/login': true
'/chat': true
}; };
const navbarList = [ const Layout = ({ children, isPcDevice }: { children: JSX.Element; isPcDevice: boolean }) => {
{ const { isPc } = useScreen({ defaultIsPc: isPcDevice });
label: '介绍',
icon: 'board',
link: '/',
activeLink: ['/']
},
{
label: '共享',
icon: 'shareMarket',
link: '/model/share',
activeLink: ['/model/share']
},
{
label: '模型',
icon: 'model',
link: '/model/list',
activeLink: ['/model/list', '/model/detail']
},
{
label: '账号',
icon: 'user',
link: '/number/setting',
activeLink: ['/number/setting']
},
{
label: '邀请',
icon: 'promotion',
link: '/promotion',
activeLink: ['/promotion']
},
{
label: '开发',
icon: 'develop',
link: '/openapi',
activeLink: ['/openapi']
}
];
const Layout = ({ children }: { children: JSX.Element }) => {
const { isPc } = useScreen();
const router = useRouter(); const router = useRouter();
const { colorMode, setColorMode } = useColorMode(); const { colorMode, setColorMode } = useColorMode();
const { Loading } = useLoading({ defaultLoading: true }); const { Loading } = useLoading({ defaultLoading: true });
...@@ -66,40 +25,60 @@ const Layout = ({ children }: { children: JSX.Element }) => { ...@@ -66,40 +25,60 @@ const Layout = ({ children }: { children: JSX.Element }) => {
} }
}, [colorMode, router.pathname, setColorMode]); }, [colorMode, router.pathname, setColorMode]);
return ( const RenderPc = useCallback(
<> () =>
{!unShowLayoutRoute[router.pathname] ? ( pcUnShowLayoutRoute[router.pathname] ? (
<Box h={'100%'} backgroundColor={'gray.100'} overflow={'auto'}> <Auth>{children}</Auth>
{isPc ? ( ) : (
<> <>
<Box h={'100%'} position={'fixed'} left={0} top={0} w={'80px'}> <Box h={'100%'} position={'fixed'} left={0} top={0} w={'60px'}>
<Navbar navbarList={navbarList} /> <Navbar />
</Box> </Box>
<Box h={'100%'} ml={'80px'}> <Box h={'100%'} ml={'60px'} overflow={'overlay'}>
<Box h={'100%'} py={7} px={'5vw'} m={'auto'} overflowY={'auto'}>
<Auth>{children}</Auth> <Auth>{children}</Auth>
</Box> </Box>
</Box>
</> </>
) : ( ),
[children, router.pathname]
);
const RenderPhone = useCallback(() => {
const phoneUnShowLayoutRoute: Record<string, boolean> = {
'/login': true
};
const isChatPage =
router.pathname === '/chat' && Object.values(router.query).join('').length !== 0;
if (phoneUnShowLayoutRoute[router.pathname] || isChatPage) {
return <Auth>{children}</Auth>;
}
return (
<Flex h={'100%'} flexDirection={'column'}> <Flex h={'100%'} flexDirection={'column'}>
<Box h={'60px'} borderBottom={'1px solid rgba(0,0,0,0.1)'}> <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
<NavbarPhone navbarList={navbarList} />
</Box>
<Box flex={'1 0 0'} h={0} py={3} px={4} overflowY={'auto'}>
<Auth>{children}</Auth> <Auth>{children}</Auth>
</Box> </Box>
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
<NavbarPhone />
</Box>
</Flex> </Flex>
)} );
}, [children, router]);
return (
<>
<Box h={'100%'} overflow={'overlay'} bg={'gray.100'}>
{isPc ? <RenderPc /> : <RenderPhone />}
</Box> </Box>
) : (
<Auth>
<>{children}</>
</Auth>
)}
{loading && <Loading />} {loading && <Loading />}
</> </>
); );
}; };
export default Layout; export default Layout;
Layout.getInitialProps = ({ req }: any) => {
return {
isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
};
};
src/components/Layout/navbar.tsx
import React from 'react'; import React, { useMemo } from 'react';
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex, Image, Tooltip } from '@chakra-ui/react';
import Image from 'next/image';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import MyIcon from '../Icon'; import MyIcon from '../Icon';
import { useUserStore } from '@/store/user';
import { useChatStore } from '@/store/chat';
export enum NavbarTypeEnum { export enum NavbarTypeEnum {
normal = 'normal', normal = 'normal',
small = 'small' small = 'small'
} }
const Navbar = ({ const Navbar = () => {
navbarList
}: {
navbarList: {
label: string;
icon: string;
link: string;
activeLink: string[];
}[];
}) => {
const router = useRouter(); const router = useRouter();
const { userInfo, lastModelId } = useUserStore();
const { lastChatModelId, lastChatId } = useChatStore();
const navbarList = useMemo(
() => [
{
label: '模型',
icon: 'model',
link: `/model?modelId=${lastModelId}`,
activeLink: ['/model']
},
{
label: '聊天',
icon: 'chat',
link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
activeLink: ['/chat']
},
{
label: '共享',
icon: 'shareMarket',
link: '/model/share',
activeLink: ['/model/share']
},
{
label: '邀请',
icon: 'promotion',
link: '/promotion',
activeLink: ['/promotion']
},
{
label: '开发',
icon: 'develop',
link: '/openapi',
activeLink: ['/openapi']
},
{
label: '账号',
icon: 'user',
link: '/number',
activeLink: ['/number']
}
],
[lastChatId, lastChatModelId, lastModelId]
);
return ( return (
<Flex <Flex
flexDirection={'column'} flexDirection={'column'}
alignItems={'center'} alignItems={'center'}
py={3} pt={6}
backgroundColor={'white'} backgroundColor={'#465069'}
h={'100%'} h={'100%'}
w={'100%'} w={'100%'}
boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'} boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'}
userSelect={'none'} userSelect={'none'}
> >
{/* logo */} {/* logo */}
<Box pb={4}> <Box
<Image src={'/icon/logo.png'} width={'35'} height={'35'} alt=""></Image> mb={5}
border={'2px solid #fff'}
borderRadius={'36px'}
overflow={'hidden'}
cursor={'pointer'}
onClick={() => router.push('/number')}
>
<Image
src={userInfo?.avatar || '/icon/human.png'}
objectFit={'contain'}
w={'36px'}
h={'36px'}
alt=""
/>
</Box> </Box>
{/* 导航列表 */} {/* 导航列表 */}
<Box flex={1}> <Box flex={1}>
{navbarList.map((item) => ( {navbarList.map((item) => (
<Flex <Tooltip
label={item.label}
key={item.label} key={item.label}
mb={4} placement={'right'}
openDelay={100}
gutter={-10}
>
<Flex
mb={3}
flexDirection={'column'} flexDirection={'column'}
alignItems={'center'} alignItems={'center'}
justifyContent={'center'} justifyContent={'center'}
onClick={() => { onClick={() => {
if (item.link === router.pathname) return; if (item.link === router.asPath) return;
router.push(item.link, undefined, { router.push(item.link, undefined, {
shallow: true shallow: true
}); });
}} }}
cursor={'pointer'} cursor={'pointer'}
fontSize={'sm'}
w={'60px'} w={'60px'}
h={'70px'} h={'45px'}
borderRadius={'sm'} _hover={{
color: '#ffffff'
}}
{...(item.activeLink.includes(router.pathname) {...(item.activeLink.includes(router.pathname)
? { ? {
color: '#2B6CB0', color: '#ffffff ',
backgroundColor: '#BEE3F8' backgroundImage: 'linear-gradient(270deg,#4e83fd,#3370ff)'
} }
: { : {
color: '#4A5568', color: '#9096a5',
backgroundColor: 'transparent' backgroundColor: 'transparent'
})} })}
> >
<MyIcon <MyIcon name={item.icon as any} width={'22px'} height={'22px'} />
name={item.icon as any}
width={'24px'}
height={'24px'}
fill={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
/>
<Box mt={1}>{item.label}</Box>
</Flex> </Flex>
</Tooltip>
))} ))}
</Box> </Box>
</Flex> </Flex>
......
src/components/Layout/navbarPhone.tsx
import React from 'react'; import React, { useMemo } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import MyIcon from '../Icon'; import MyIcon from '../Icon';
import { import { Flex } from '@chakra-ui/react';
Flex, import { useChatStore } from '@/store/chat';
Drawer,
DrawerBody,
DrawerFooter,
DrawerOverlay,
DrawerContent,
Box,
useDisclosure,
Button,
Image
} from '@chakra-ui/react';
const NavbarPhone = ({ const NavbarPhone = () => {
navbarList
}: {
navbarList: {
label: string;
icon: string;
link: string;
activeLink: string[];
}[];
}) => {
const router = useRouter(); const router = useRouter();
const { lastChatModelId, lastChatId } = useChatStore();
const { isOpen, onClose, onOpen } = useDisclosure(); const navbarList = useMemo(
() => [
{
label: '模型',
icon: 'tabbarModel',
link: `/model`,
activeLink: ['/model']
},
{
label: '聊天',
icon: 'tabbarChat',
link: `/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`,
activeLink: ['/chat']
},
{
label: '发现',
icon: 'tabbarMore',
link: '/tools',
activeLink: ['/tools']
},
{
label: '我',
icon: 'tabbarMe',
link: '/number',
activeLink: ['/number']
}
],
[lastChatId, lastChatModelId]
);
return ( return (
<> <>
...@@ -36,61 +45,51 @@ const NavbarPhone = ({ ...@@ -36,61 +45,51 @@ const NavbarPhone = ({
justifyContent={'space-between'} justifyContent={'space-between'}
backgroundColor={'white'} backgroundColor={'white'}
position={'relative'} position={'relative'}
px={7} px={10}
> >
<Box onClick={onOpen}>
<MyIcon name="menu" width={'20px'} height={'20px'} color={'blackAlpha.700'}></MyIcon>
</Box>
</Flex>
<Drawer isOpen={isOpen} placement="left" size={'xs'} onClose={onClose}>
<DrawerOverlay />
<DrawerContent maxWidth={'50vw'}>
<DrawerBody p={4}>
<Box py={4}>
<Image src={'/icon/logo.png'} margin={'auto'} w={'35'} h={'35'} alt=""></Image>
</Box>
{navbarList.map((item) => ( {navbarList.map((item) => (
<Flex <Flex
key={item.label} position={'relative'}
mb={5} key={item.link}
alignItems={'center'}
justifyContent={'center'}
onClick={() => {
if (item.link === router.pathname) return;
router.push(item.link);
onClose();
}}
cursor={'pointer'} cursor={'pointer'}
h={'60px'}
borderRadius={'md'} borderRadius={'md'}
{...(item.activeLink.includes(router.pathname) textAlign={'center'}
alignItems={'center'}
h={'100%'}
px={3}
{...(item.activeLink.includes(router.asPath)
? { ? {
color: '#2B6CB0', color: '#7089f1'
backgroundColor: '#BEE3F8'
} }
: { : {
color: '#4A5568', color: 'myGray.500'
backgroundColor: 'transparent'
})} })}
_after={
item.activeLink.includes(router.asPath)
? {
content: '""',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
borderRadius: '50%',
w: '18px',
h: '18px',
bg: ' #6782f1',
filter: 'blur(10px)',
boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.25)'
}
: {}
}
onClick={() => {
if (item.link === router.asPath) return;
router.push(item.link);
}}
> >
<MyIcon <MyIcon name={item.icon as any} width={'20px'} height={'20px'} />
name={item.icon as any}
width={'24px'}
height={'24px'}
fill={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
/>
<Box ml={5}>{item.label}</Box>
</Flex> </Flex>
))} ))}
</DrawerBody> </Flex>
<DrawerFooter px={2}>
<Button variant="outline" onClick={onClose}>
Cancel
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</> </>
); );
}; };
......
src/components/Radio/index.tsx
...@@ -28,16 +28,16 @@ const Radio = ({ list, value, onChange, ...props }: Props) => { ...@@ -28,16 +28,16 @@ const Radio = ({ list, value, onChange, ...props }: Props) => {
...(value === item.value ...(value === item.value
? { ? {
border: '5px solid', border: '5px solid',
borderColor: 'blue.500' borderColor: 'myBlue.700'
} }
: { : {
border: '2px solid', border: '2px solid',
borderColor: 'gray.200' borderColor: 'myGray.200'
}) })
}} }}
_hover={{ _hover={{
_before: { _before: {
borderColor: 'blue.400' borderColor: 'myBlue.600'
} }
}} }}
onClick={() => onChange(item.value)} onClick={() => onChange(item.value)}
......
src/components/Slider/index.tsx
...@@ -52,7 +52,7 @@ const MySlider = ({ ...@@ -52,7 +52,7 @@ const MySlider = ({
mt={3} mt={3}
fontSize={'sm'} fontSize={'sm'}
transform={'translateX(-50%)'} transform={'translateX(-50%)'}
{...(activeVal === item.value ? { color: 'blue.500', fontWeight: 'bold' } : {})} {...(activeVal === item.value ? { color: 'myBlue.500', fontWeight: 'bold' } : {})}
> >
<Box px={3} cursor={'pointer'}> <Box px={3} cursor={'pointer'}>
{item.label} {item.label}
...@@ -74,7 +74,7 @@ const MySlider = ({ ...@@ -74,7 +74,7 @@ const MySlider = ({
> >
<SliderFilledTrack /> <SliderFilledTrack />
</SliderTrack> </SliderTrack>
<SliderThumb border={'2.5px solid'} borderColor={'blue.500'}></SliderThumb> <SliderThumb border={'2.5px solid'} borderColor={'myBlue.500'}></SliderThumb>
</Slider> </Slider>
); );
}; };
......
src/components/WxConcat/index.tsx
...@@ -9,23 +9,23 @@ import { ...@@ -9,23 +9,23 @@ import {
ModalFooter, ModalFooter,
ModalBody, ModalBody,
ModalCloseButton, ModalCloseButton,
useColorModeValue useColorModeValue,
Image
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import Image from 'next/image';
const WxConcat = ({ onClose }: { onClose: () => void }) => { const WxConcat = ({ onClose }: { onClose: () => void }) => {
return ( return (
<Modal isOpen={true} onClose={onClose}> <Modal isOpen={true} onClose={onClose}>
<ModalOverlay /> <ModalOverlay />
<ModalContent color={useColorModeValue('blackAlpha.700', 'white')}> <ModalContent>
<ModalHeader>wx交流群</ModalHeader> <ModalHeader>wx交流群</ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody textAlign={'center'}> <ModalBody textAlign={'center'}>
<Image <Image
style={{ margin: 'auto' }} style={{ margin: 'auto' }}
src={'/imgs/wx300.jpg'} src={'/imgs/wx300.jpg'}
width={200} width={'200px'}
height={200} height={'200px'}
alt="" alt=""
/> />
<Box mt={2}> <Box mt={2}>
......
src/constants/theme.ts
import { extendTheme, defineStyleConfig } from '@chakra-ui/react'; import { extendTheme, defineStyleConfig, ComponentStyleConfig } from '@chakra-ui/react';
// @ts-ignore // @ts-ignore
import { modalAnatomy as parts } from '@chakra-ui/anatomy'; import { modalAnatomy, switchAnatomy, selectAnatomy } from '@chakra-ui/anatomy';
// @ts-ignore // @ts-ignore
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'; import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys); const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
modalAnatomy.keys
);
const { definePartsStyle: switchPart, defineMultiStyleConfig: switchMultiStyle } =
createMultiStyleConfigHelpers(switchAnatomy.keys);
const { definePartsStyle: selectPart, defineMultiStyleConfig: selectMultiStyle } =
createMultiStyleConfigHelpers(selectAnatomy.keys);
// modal 弹窗 // modal 弹窗
const ModalTheme = defineMultiStyleConfig({ const ModalTheme = defineMultiStyleConfig({
...@@ -17,46 +23,141 @@ const ModalTheme = defineMultiStyleConfig({ ...@@ -17,46 +23,141 @@ const ModalTheme = defineMultiStyleConfig({
// 按键 // 按键
const Button = defineStyleConfig({ const Button = defineStyleConfig({
baseStyle: {}, baseStyle: {
_active: {
transform: 'scale(0.98)'
}
},
sizes: { sizes: {
sm: { xs: {
fontSize: 'xs', fontSize: 'xs',
px: 3, px: 3,
py: 0, py: 0,
fontWeight: 'normal', fontWeight: 'normal',
height: '22px',
borderRadius: '2px'
},
sm: {
fontSize: 'sm',
px: 3,
py: 0,
fontWeight: 'normal',
height: '26px', height: '26px',
lineHeight: '26px' borderRadius: '2px'
}, },
md: { md: {
fontSize: 'sm', fontSize: 'md',
px: 6, px: 6,
py: 0, py: 0,
height: '34px', height: '32px',
lineHeight: '34px', fontWeight: 'normal',
fontWeight: 'normal' borderRadius: '4px'
}, },
lg: { lg: {
fontSize: 'md', fontSize: 'lg',
px: 8, px: 8,
py: 0, py: 0,
height: '42px', height: '42px',
lineHeight: '42px', fontWeight: 'normal',
fontWeight: 'normal' borderRadius: '8px'
} }
}, },
variants: { variants: {
white: { primary: {
color: '#fff', background: 'myBlue.700 !important',
backgroundColor: 'transparent', color: 'white',
border: '1px solid #ffffff',
_hover: { _hover: {
backgroundColor: 'rgba(255,255,255,0.1)' filter: 'brightness(110%)'
}
},
base: {
color: 'myGray.900',
border: '1px solid',
borderColor: 'myGray.200',
bg: 'transparent',
_hover: {
color: 'myBlue.600'
},
_active: {
color: 'myBlue.700'
} }
} }
}, },
defaultProps: { defaultProps: {
size: 'md', size: 'md',
colorScheme: 'blue' variant: 'primary'
}
});
const Input: ComponentStyleConfig = {
baseStyle: {},
variants: {
outline: {
field: {
backgroundColor: 'transparent',
border: '1px solid',
borderRadius: 'base',
borderColor: 'myGray.200',
_focus: {
borderColor: 'myBlue.600',
boxShadow: '0px 0px 4px #A8DBFF',
bg: 'white'
},
_disabled: {
color: 'myGray.400',
bg: 'myWhite.300'
}
}
}
},
defaultProps: {
size: 'md',
variant: 'outline'
}
};
const Textarea: ComponentStyleConfig = {
variants: {
outline: {
border: '1px solid',
borderRadius: 'base',
borderColor: 'myGray.200',
_focus: {
borderColor: 'myBlue.600',
boxShadow: '0px 0px 4px #A8DBFF'
}
}
},
defaultProps: {
size: 'md',
variant: 'outline'
}
};
const Switch = switchMultiStyle({
baseStyle: switchPart({
track: {
bg: 'myGray.100',
_checked: {
bg: 'myBlue.700'
}
}
})
});
const Select = selectMultiStyle({
variants: {
outline: selectPart({
field: {
borderColor: 'myGray.100',
_focusWithin: {
boxShadow: '0px 0px 4px #A8DBFF',
borderColor: 'myBlue.600'
}
}
})
} }
}); });
...@@ -65,31 +166,57 @@ export const theme = extendTheme({ ...@@ -65,31 +166,57 @@ export const theme = extendTheme({
styles: { styles: {
global: { global: {
'html, body': { 'html, body': {
color: 'blackAlpha.800', color: 'myGray.900',
fontSize: 'md',
fontWeight: 400,
height: '100%', height: '100%',
maxHeight: '100vh', overflow: 'hidden'
overflowY: 'hidden'
} }
} }
}, },
fontSizes: { colors: {
xs: '0.8rem', myGray: {
sm: '0.9rem', 100: '#EFF0F1',
md: '1rem', 200: '#DEE0E2',
lg: '1.125rem', 300: '#BDC1C5',
xl: '1.25rem', 400: '#9CA2A8',
'2xl': '1.5rem', 500: '#7B838B',
'3xl': '1.875rem', 600: '#5A646E',
'4xl': '2.25rem', 700: '#485058',
'5xl': '3rem', 800: '#363C42',
'6xl': '3.75rem', 900: '#24282C',
'7xl': '4.5rem', 1000: '#121416'
'8xl': '6rem', },
'9xl': '8rem' myBlue: {
100: '#f0f7ff',
200: '#EBF7FD',
300: '#d6e8ff',
400: '#adceff',
500: '#85b1ff',
600: '#4e83fd',
700: '#3370ff',
800: '#2152d9',
900: '#1237b3',
1000: '#07228c'
}
}, },
fonts: { fonts: {
body: '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' body: '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
}, },
fontSizes: {
xs: '10px',
sm: '12px',
md: '14px',
lg: '16px',
xl: '16px',
'2xl': '18px',
'3xl': '20px'
},
borders: {
sm: '1px solid #EFF0F1',
base: '1px solid #DEE0E2',
md: '1px solid #BDC1C5'
},
breakpoints: { breakpoints: {
sm: '900px', sm: '900px',
md: '1200px', md: '1200px',
...@@ -99,6 +226,10 @@ export const theme = extendTheme({ ...@@ -99,6 +226,10 @@ export const theme = extendTheme({
}, },
components: { components: {
Modal: ModalTheme, Modal: ModalTheme,
Button Button,
Input,
Textarea,
Switch,
Select
} }
}); });
src/hooks/useConfirm.tsx
...@@ -39,7 +39,7 @@ export const useConfirm = ({ title = '提示', content }: { title?: string; cont ...@@ -39,7 +39,7 @@ export const useConfirm = ({ title = '提示', content }: { title?: string; cont
<AlertDialogFooter> <AlertDialogFooter>
<Button <Button
colorScheme={'gray'} variant={'outline'}
onClick={() => { onClick={() => {
onClose(); onClose();
typeof cancelCb.current === 'function' && cancelCb.current(); typeof cancelCb.current === 'function' && cancelCb.current();
...@@ -48,7 +48,6 @@ export const useConfirm = ({ title = '提示', content }: { title?: string; cont ...@@ -48,7 +48,6 @@ export const useConfirm = ({ title = '提示', content }: { title?: string; cont
取消 取消
</Button> </Button>
<Button <Button
colorScheme="blue"
ml={4} ml={4}
onClick={() => { onClick={() => {
onClose(); onClose();
......
src/hooks/useLoading.tsx
...@@ -18,7 +18,13 @@ export const useLoading = (props?: { defaultLoading: boolean }) => { ...@@ -18,7 +18,13 @@ export const useLoading = (props?: { defaultLoading: boolean }) => {
alignItems={'center'} alignItems={'center'}
justifyContent={'center'} justifyContent={'center'}
> >
<Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" /> <Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="myBlue.500"
size="xl"
/>
</Flex> </Flex>
) : null; ) : null;
}, },
......
src/hooks/usePagination.tsx
...@@ -4,15 +4,18 @@ import { IconButton, Flex, Box, Input } from '@chakra-ui/react'; ...@@ -4,15 +4,18 @@ import { IconButton, Flex, Box, Input } from '@chakra-ui/react';
import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons'; import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
import { useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { useToast } from './useToast'; import { useToast } from './useToast';
import { useQuery } from '@tanstack/react-query';
export const usePagination = <T = any,>({ export const usePagination = <T = any,>({
api, api,
pageSize = 10, pageSize = 10,
params = {} params = {},
defaultRequest = true
}: { }: {
api: (data: any) => any; api: (data: any) => any;
pageSize?: number; pageSize?: number;
params?: Record<string, any>; params?: Record<string, any>;
defaultRequest?: boolean;
}) => { }) => {
const { toast } = useToast(); const { toast } = useToast();
const [pageNum, setPageNum] = useState(1); const [pageNum, setPageNum] = useState(1);
...@@ -90,7 +93,7 @@ export const usePagination = <T = any,>({ ...@@ -90,7 +93,7 @@ export const usePagination = <T = any,>({
}, [maxPage, mutate, pageNum]); }, [maxPage, mutate, pageNum]);
useEffect(() => { useEffect(() => {
mutate(1); defaultRequest && mutate(1);
}, []); }, []);
return { return {
......
src/hooks/useScreen.ts
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useMediaQuery } from '@chakra-ui/react'; import { useMediaQuery } from '@chakra-ui/react';
export function useScreen() { interface Props {
defaultIsPc?: boolean;
}
export function useScreen(data?: Props) {
const { defaultIsPc = false } = data || {};
const [isPc] = useMediaQuery('(min-width: 900px)', { const [isPc] = useMediaQuery('(min-width: 900px)', {
ssr: true, ssr: true,
fallback: false fallback: defaultIsPc
}); });
return { return {
......
src/pages/404.tsx
...@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'; ...@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
const NonePage = () => { const NonePage = () => {
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
router.push('/model/list'); router.push('/model');
}, [router]); }, [router]);
return <div></div>; return <div></div>;
......
src/pages/_app.tsx
...@@ -57,6 +57,7 @@ export default function App({ Component, pageProps }: AppProps) { ...@@ -57,6 +57,7 @@ export default function App({ Component, pageProps }: AppProps) {
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<ColorModeScript initialColorMode={theme.config.initialColorMode} /> <ColorModeScript initialColorMode={theme.config.initialColorMode} />
{/* @ts-ignore */}
<Layout> <Layout>
<Component {...pageProps} /> <Component {...pageProps} />
</Layout> </Layout>
......
src/pages/api/chat/delChatRecordByContentId.ts
...@@ -6,11 +6,7 @@ import { authToken } from '@/service/utils/auth'; ...@@ -6,11 +6,7 @@ import { authToken } from '@/service/utils/auth';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { chatId, contentId } = req.query as { chatId: string; contentId: string }; const { chatId, contentId } = req.query as { chatId: string; contentId: string };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!chatId || !contentId) { if (!chatId || !contentId) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
...@@ -18,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -18,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
await connectToDatabase(); await connectToDatabase();
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
const chatRecord = await Chat.findById(chatId); const chatRecord = await Chat.findById(chatId);
......
src/pages/api/chat/getHistory.ts
...@@ -6,7 +6,7 @@ import { authToken } from '@/service/utils/auth'; ...@@ -6,7 +6,7 @@ import { authToken } from '@/service/utils/auth';
/* 获取历史记录 */ /* 获取历史记录 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const userId = await authToken(req.headers.authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
...@@ -14,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -14,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
{ {
userId userId
}, },
'_id title modelId' '_id title modelId updateTime latestChat'
) )
.sort({ updateTime: -1 }) .sort({ updateTime: -1 })
.limit(20); .limit(20);
......
src/pages/api/chat/init.ts
import type { NextApiRequest, NextApiResponse } from 'next'; import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response'; import { jsonRes } from '@/service/response';
import { connectToDatabase, Chat } from '@/service/mongo'; import { connectToDatabase, Chat, Model } from '@/service/mongo';
import type { InitChatResponse } from '@/api/response/chat'; import type { InitChatResponse } from '@/api/response/chat';
import { authToken } from '@/service/utils/auth'; import { authToken } from '@/service/utils/auth';
import { ChatItemType } from '@/types/chat'; import { ChatItemType } from '@/types/chat';
import { authModel } from '@/service/utils/auth'; import { authModel } from '@/service/utils/auth';
import mongoose from 'mongoose'; import mongoose from 'mongoose';
import { ModelStatusEnum } from '@/constants/model';
import type { ModelSchema } from '@/types/mongoSchema';
/* 初始化我的聊天框，需要身份验证 */ /* 初始化我的聊天框，需要身份验证 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers; const userId = await authToken(req);
const userId = await authToken(authorization);
const { modelId, chatId } = req.query as { modelId: string; chatId: '' | string }; let { modelId, chatId } = req.query as { modelId: '' | string; chatId: '' | string };
if (!modelId) {
throw new Error('缺少参数');
}
await connectToDatabase(); await connectToDatabase();
// 获取 model 数据 let model: ModelSchema;
const { model } = await authModel({ modelId, userId, authUser: false, authOwner: false });
// 没有 modelId 时，直接获取用户的第一个id
if (!modelId) {
const myModel = await Model.findOne({ userId });
if (!myModel) {
const { _id } = await Model.create({
name: 'AI助手1',
userId,
status: ModelStatusEnum.running
});
model = (await Model.findById(_id)) as ModelSchema;
} else {
model = myModel;
}
modelId = model._id;
} else {
// 校验使用权限
const authRes = await authModel({ modelId, userId, authUser: false, authOwner: false });
model = authRes.model;
}
// 历史记录 // 历史记录
let history: ChatItemType[] = []; let history: ChatItemType[] = [];
if (chatId) { if (chatId) {
// auth chatId
const chat = await Chat.countDocuments({
_id: chatId,
userId
});
if (chat === 0) {
throw new Error('聊天框不存在');
}
// 获取 chat.content 数据 // 获取 chat.content 数据
history = await Chat.aggregate([ history = await Chat.aggregate([
{ {
...@@ -59,9 +83,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -59,9 +83,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
data: { data: {
chatId: chatId || '', chatId: chatId || '',
modelId: modelId, modelId: modelId,
model: {
name: model.name, name: model.name,
avatar: model.avatar, avatar: model.avatar,
intro: model.share.intro, intro: model.share.intro,
canUse: model.share.isShare || String(model.userId) === userId
},
chatModel: model.chat.chatModel, chatModel: model.chat.chatModel,
history history
} }
......
src/pages/api/chat/removeHistory.ts
import type { NextApiRequest, NextApiResponse } from 'next'; import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response'; import { jsonRes } from '@/service/response';
import { ChatItemType } from '@/types/chat';
import { connectToDatabase, Chat } from '@/service/mongo'; import { connectToDatabase, Chat } from '@/service/mongo';
import { authToken } from '@/service/utils/auth'; import { authToken } from '@/service/utils/auth';
...@@ -8,7 +7,7 @@ import { authToken } from '@/service/utils/auth'; ...@@ -8,7 +7,7 @@ import { authToken } from '@/service/utils/auth';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { id } = req.query; const { id } = req.query;
const userId = await authToken(req.headers.authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/chat/saveChat.ts
...@@ -20,7 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -20,7 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
const userId = await authToken(req.headers.authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
...@@ -40,7 +40,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -40,7 +40,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
userId, userId,
modelId, modelId,
content, content,
title: content[0].value.slice(0, 20) title: content[0].value.slice(0, 20),
latestChat: content[content.length - 1].value
}); });
return jsonRes(res, { return jsonRes(res, {
data: _id data: _id
...@@ -53,7 +54,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -53,7 +54,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
$each: content $each: content
} }
}, },
updateTime: new Date() updateTime: new Date(),
latestChat: content[content.length - 1].value
}); });
} }
jsonRes(res); jsonRes(res);
......
src/pages/api/model/create.ts
...@@ -11,18 +11,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -11,18 +11,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
const { name } = req.body as { const { name } = req.body as {
name: string; name: string;
}; };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!name) { if (!name) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/model/data/delModelDataById.ts
...@@ -8,18 +8,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -8,18 +8,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
let { dataId } = req.query as { let { dataId } = req.query as {
dataId: string; dataId: string;
}; };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!dataId) { if (!dataId) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await PgClient.delete('modelData', { await PgClient.delete('modelData', {
where: [['user_id', userId], 'AND', ['id', dataId]] where: [['user_id', userId], 'AND', ['id', dataId]]
......
src/pages/api/model/data/exportModelData.ts
...@@ -10,18 +10,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -10,18 +10,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
modelId: string; modelId: string;
}; };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!modelId) { if (!modelId) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/model/data/fetchingUrlData.ts
...@@ -16,9 +16,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -16,9 +16,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
} }
await connectToDatabase(); await connectToDatabase();
const { authorization } = req.headers; await authToken(req);
await authToken(authorization);
const data = await axios const data = await axios
.get(url, { .get(url, {
......
src/pages/api/model/data/getModelData.ts
...@@ -19,21 +19,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -19,21 +19,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
pageSize: string; pageSize: string;
searchText: string; searchText: string;
}; };
const { authorization } = req.headers;
pageNum = +pageNum; pageNum = +pageNum;
pageSize = +pageSize; pageSize = +pageSize;
if (!authorization) {
throw new Error('无权操作');
}
if (!modelId) { if (!modelId) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/model/data/getSplitData.ts
...@@ -12,9 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -12,9 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
} }
await connectToDatabase(); await connectToDatabase();
const { authorization } = req.headers; const userId = await authToken(req);
const userId = await authToken(authorization);
// 找到长度大于0的数据 // 找到长度大于0的数据
const data = await SplitData.find({ const data = await SplitData.find({
......
src/pages/api/model/data/pushModelDataCsv.ts
...@@ -13,18 +13,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -13,18 +13,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
modelId: string; modelId: string;
data: string[][]; data: string[][];
}; };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!modelId || !Array.isArray(data)) { if (!modelId || !Array.isArray(data)) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
...@@ -36,9 +31,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -36,9 +31,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
// 去重 // 去重
const searchRes = await Promise.allSettled( const searchRes = await Promise.allSettled(
data.map(async ([q, a]) => { data.map(async ([q, a = '']) => {
if (!q || !a) { if (!q) {
return Promise.reject('q/a为空'); return Promise.reject('q为空');
} }
try { try {
q = q.replace(/\\n/g, '\n'); q = q.replace(/\\n/g, '\n');
......
src/pages/api/model/data/pushModelDataInput.ts
...@@ -13,18 +13,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -13,18 +13,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
modelId: string; modelId: string;
data: { a: ModelDataSchema['a']; q: ModelDataSchema['q'] }[]; data: { a: ModelDataSchema['a']; q: ModelDataSchema['q'] }[];
}; };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!modelId || !Array.isArray(data)) { if (!modelId || !Array.isArray(data)) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/model/data/putModelData.ts
...@@ -8,18 +8,13 @@ import { PgClient } from '@/service/pg'; ...@@ -8,18 +8,13 @@ import { PgClient } from '@/service/pg';
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) { export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
try { try {
const { dataId, a, q } = req.body as { dataId: string; a: string; q?: string }; const { dataId, a, q } = req.body as { dataId: string; a: string; q?: string };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!dataId) { if (!dataId) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
// 更新 pg 内容 // 更新 pg 内容
await PgClient.update('modelData', { await PgClient.update('modelData', {
......
src/pages/api/model/data/splitData.ts
...@@ -20,9 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -20,9 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
} }
await connectToDatabase(); await connectToDatabase();
const { authorization } = req.headers; const userId = await authToken(req);
const userId = await authToken(authorization);
// 验证是否是该用户的 model // 验证是否是该用户的 model
const model = await Model.findOne({ const model = await Model.findOne({
......
src/pages/api/model/del.ts
import type { NextApiRequest, NextApiResponse } from 'next'; import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response'; import { jsonRes } from '@/service/response';
import { Chat, Model, connectToDatabase } from '@/service/mongo'; import { Chat, Model, connectToDatabase, Collection } from '@/service/mongo';
import { authToken } from '@/service/utils/auth'; import { authToken } from '@/service/utils/auth';
import { PgClient } from '@/service/pg'; import { PgClient } from '@/service/pg';
import { authModel } from '@/service/utils/auth'; import { authModel } from '@/service/utils/auth';
...@@ -9,18 +9,13 @@ import { authModel } from '@/service/utils/auth'; ...@@ -9,18 +9,13 @@ import { authModel } from '@/service/utils/auth';
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) { export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
try { try {
const { modelId } = req.query as { modelId: string }; const { modelId } = req.query as { modelId: string };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!modelId) { if (!modelId) {
throw new Error('参数错误'); throw new Error('参数错误');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
...@@ -40,6 +35,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -40,6 +35,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
modelId modelId
}); });
// 删除收藏列表
await Collection.deleteMany({
modelId
});
// 删除模型 // 删除模型
await Model.deleteOne({ await Model.deleteOne({
_id: modelId, _id: modelId,
......
src/pages/api/model/detail.tsx
...@@ -7,12 +7,6 @@ import { authModel } from '@/service/utils/auth'; ...@@ -7,12 +7,6 @@ import { authModel } from '@/service/utils/auth';
/* 获取我的模型 */ /* 获取我的模型 */
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) { export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
try { try {
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
const { modelId } = req.query as { modelId: string }; const { modelId } = req.query as { modelId: string };
if (!modelId) { if (!modelId) {
...@@ -20,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -20,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/model/list.ts
import type { NextApiRequest, NextApiResponse } from 'next'; import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response'; import { jsonRes } from '@/service/response';
import { connectToDatabase } from '@/service/mongo'; import { connectToDatabase, Collection, Model } from '@/service/mongo';
import { authToken } from '@/service/utils/auth'; import { authToken } from '@/service/utils/auth';
import { Model } from '@/service/models/model'; import type { ModelListResponse } from '@/api/response/model';
/* 获取模型列表 */ /* 获取模型列表 */
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) { export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
try { try {
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
// 根据 userId 获取模型信息 // 根据 userId 获取模型信息
const models = await Model.find({ const [myModels, myCollections] = await Promise.all([
Model.find(
{
userId userId
}).sort({ },
'_id avatar name chat.systemPrompt'
).sort({
_id: -1 _id: -1
}); }),
Collection.find({
userId
}).populate('modelId', '_id avatar name chat.systemPrompt')
]);
jsonRes(res, { jsonRes<ModelListResponse>(res, {
data: models data: {
myModels: myModels.map((item) => ({
_id: item._id,
name: item.name,
avatar: item.avatar,
systemPrompt: item.chat.systemPrompt
})),
myCollectionModels: myCollections
.map((item: any) => ({
_id: item.modelId?._id,
name: item.modelId?.name,
avatar: item.modelId?.avatar,
systemPrompt: item.modelId?.chat.systemPrompt
}))
.filter((item) => !myModels.find((model) => String(model._id) === String(item._id))) // 去重
}
}); });
} catch (err) { } catch (err) {
jsonRes(res, { jsonRes(res, {
......
src/pages/api/model/share/collection.ts
...@@ -12,7 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -12,7 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(req.headers.authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/model/share/getCollection.ts
...@@ -8,7 +8,7 @@ import type { ShareModelItem } from '@/types/model'; ...@@ -8,7 +8,7 @@ import type { ShareModelItem } from '@/types/model';
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) { export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
try { try {
// 凭证校验 // 凭证校验
const userId = await authToken(req.headers.authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/model/share/getModels.ts
import type { NextApiRequest, NextApiResponse } from 'next'; import type { NextApiRequest, NextApiResponse } from 'next';
import { jsonRes } from '@/service/response'; import { jsonRes } from '@/service/response';
import { connectToDatabase, Collection, Model } from '@/service/mongo'; import { connectToDatabase, Collection, Model } from '@/service/mongo';
import { authToken } from '@/service/utils/auth';
import type { PagingData } from '@/types'; import type { PagingData } from '@/types';
import type { ShareModelItem } from '@/types/model'; import type { ShareModelItem } from '@/types/model';
......
src/pages/api/model/update.ts
...@@ -11,18 +11,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -11,18 +11,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
try { try {
const { name, avatar, chat, share, security } = req.body as ModelUpdateParams; const { name, avatar, chat, share, security } = req.body as ModelUpdateParams;
const { modelId } = req.query as { modelId: string }; const { modelId } = req.query as { modelId: string };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('无权操作');
}
if (!name || !chat || !security || !modelId) { if (!name || !chat || !security || !modelId) {
throw new Error('参数错误'); throw new Error('参数错误');
} }
// 凭证校验 // 凭证校验
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/openapi/chat/chat.ts
...@@ -46,7 +46,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -46,7 +46,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
throw new Error('prompts is not array'); throw new Error('prompts is not array');
} }
if (prompts.length > 30 || prompts.length === 0) { if (prompts.length > 30 || prompts.length === 0) {
throw new Error('prompts length range 1-30'); throw new Error('Prompts arr length range 1-30');
} }
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/openapi/delKey.ts
...@@ -7,17 +7,12 @@ import { authToken } from '@/service/utils/auth'; ...@@ -7,17 +7,12 @@ import { authToken } from '@/service/utils/auth';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { id } = req.query as { id: string }; const { id } = req.query as { id: string };
const { authorization } = req.headers;
if (!authorization) {
throw new Error('缺少登录凭证');
}
if (!id) { if (!id) {
throw new Error('缺少参数'); throw new Error('缺少参数');
} }
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/openapi/getKeys.ts
...@@ -7,13 +7,7 @@ import { UserOpenApiKey } from '@/types/openapi'; ...@@ -7,13 +7,7 @@ import { UserOpenApiKey } from '@/types/openapi';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers; const userId = await authToken(req);
if (!authorization) {
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/openapi/postKey.ts
...@@ -8,13 +8,7 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890'); ...@@ -8,13 +8,7 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890');
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers; const userId = await authToken(req);
if (!authorization) {
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/checkPayResult.ts
...@@ -11,10 +11,9 @@ import { PRICE_SCALE } from '@/constants/common'; ...@@ -11,10 +11,9 @@ import { PRICE_SCALE } from '@/constants/common';
/* 校验支付结果 */ /* 校验支付结果 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers;
let { payId } = req.query as { payId: string }; let { payId } = req.query as { payId: string };
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/getBill.ts
...@@ -7,17 +7,12 @@ import type { BillSchema } from '@/types/mongoSchema'; ...@@ -7,17 +7,12 @@ import type { BillSchema } from '@/types/mongoSchema';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers;
let { pageNum = 1, pageSize = 10 } = req.query as { pageNum: string; pageSize: string }; let { pageNum = 1, pageSize = 10 } = req.query as { pageNum: string; pageSize: string };
pageNum = +pageNum; pageNum = +pageNum;
pageSize = +pageSize; pageSize = +pageSize;
if (!authorization) { const userId = await authToken(req);
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/getPayCode.ts
...@@ -11,14 +11,10 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 20); ...@@ -11,14 +11,10 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 20);
/* 获取支付二维码 */ /* 获取支付二维码 */
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers;
let { amount = 0 } = req.query as { amount: string }; let { amount = 0 } = req.query as { amount: string };
amount = +amount; amount = +amount;
if (!authorization) { const userId = await authToken(req);
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization);
const id = nanoid(); const id = nanoid();
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/getPayOrders.ts
...@@ -5,12 +5,7 @@ import { connectToDatabase, Pay } from '@/service/mongo'; ...@@ -5,12 +5,7 @@ import { connectToDatabase, Pay } from '@/service/mongo';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers; const userId = await authToken(req);
if (!authorization) {
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/loginByPassword.ts
...@@ -32,9 +32,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -32,9 +32,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
throw new Error('密码错误'); throw new Error('密码错误');
} }
res.setHeader('Set-Cookie', `token=${generateToken(user._id)}; Path=/; HttpOnly`);
jsonRes(res, { jsonRes(res, {
data: { data: {
token: generateToken(user._id),
user user
} }
}); });
......
src/pages/api/user/promotion/getPromotionData.ts
...@@ -7,13 +7,7 @@ import mongoose from 'mongoose'; ...@@ -7,13 +7,7 @@ import mongoose from 'mongoose';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers; const userId = await authToken(req);
if (!authorization) {
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/promotion/getPromotions.ts
...@@ -6,15 +6,11 @@ import { authToken } from '@/service/utils/auth'; ...@@ -6,15 +6,11 @@ import { authToken } from '@/service/utils/auth';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers;
let { pageNum = 1, pageSize = 10 } = req.query as { pageNum: string; pageSize: string }; let { pageNum = 1, pageSize = 10 } = req.query as { pageNum: string; pageSize: string };
pageNum = +pageNum; pageNum = +pageNum;
pageSize = +pageSize; pageSize = +pageSize;
if (!authorization) {
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization); const userId = await authToken(req);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/register.ts
...@@ -56,9 +56,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -56,9 +56,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
username username
}); });
res.setHeader('Set-Cookie', `token=${generateToken(user._id)}; Path=/; HttpOnly`);
jsonRes(res, { jsonRes(res, {
data: { data: {
token: generateToken(user._id),
user user
} }
}); });
......
src/pages/api/user/tokenLogin.ts
...@@ -7,13 +7,7 @@ import { authToken } from '@/service/utils/auth'; ...@@ -7,13 +7,7 @@ import { authToken } from '@/service/utils/auth';
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try { try {
const { authorization } = req.headers; const userId = await authToken(req);
if (!authorization) {
throw new Error('缺少登录凭证');
}
const userId = await authToken(authorization);
await connectToDatabase(); await connectToDatabase();
......
src/pages/api/user/update.ts
...@@ -9,14 +9,9 @@ import { UserUpdateParams } from '@/types/user'; ...@@ -9,14 +9,9 @@ import { UserUpdateParams } from '@/types/user';
/* 更新一些基本信息 */ /* 更新一些基本信息 */
export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) { export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
try { try {
const { openaiKey } = req.body as UserUpdateParams; const { openaiKey, avatar } = req.body as UserUpdateParams;
const { authorization } = req.headers;
if (!authorization) { const userId = await authToken(req);
throw new Error('无权操作');
}
const userId = await authToken(authorization);
await connectToDatabase(); await connectToDatabase();
...@@ -26,7 +21,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -26,7 +21,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
_id: userId _id: userId
}, },
{ {
openaiKey ...(avatar && { avatar }),
...(openaiKey && { openaiKey })
} }
); );
......
src/pages/api/user/updatePasswordByCode.ts
...@@ -48,9 +48,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse< ...@@ -48,9 +48,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
throw new Error('获取用户信息异常'); throw new Error('获取用户信息异常');
} }
res.setHeader('Set-Cookie', `token=${generateToken(user._id)}; Path=/; HttpOnly`);
jsonRes(res, { jsonRes(res, {
data: { data: {
token: generateToken(user._id),
user user
} }
}); });
......
src/pages/chat/components/Empty.tsx
import React from 'react'; import React from 'react';
import { Card, Box } from '@chakra-ui/react'; import { Card, Box, Image, Flex } from '@chakra-ui/react';
import { useMarkdown } from '@/hooks/useMarkdown'; import { useMarkdown } from '@/hooks/useMarkdown';
import Markdown from '@/components/Markdown'; import Markdown from '@/components/Markdown';
import { LOGO_ICON } from '@/constants/chat';
const Empty = ({ modelName, intro }: { modelName: string; intro: string }) => { const Empty = ({
model: { name, intro, avatar }
}: {
model: {
name: string;
intro: string;
avatar: string;
};
}) => {
const { data: chatProblem } = useMarkdown({ url: '/chatProblem.md' }); const { data: chatProblem } = useMarkdown({ url: '/chatProblem.md' });
const { data: versionIntro } = useMarkdown({ url: '/versionIntro.md' }); const { data: versionIntro } = useMarkdown({ url: '/versionIntro.md' });
...@@ -17,14 +26,15 @@ const Empty = ({ modelName, intro }: { modelName: string; intro: string }) => { ...@@ -17,14 +26,15 @@ const Empty = ({ modelName, intro }: { modelName: string; intro: string }) => {
alignItems={'center'} alignItems={'center'}
justifyContent={'center'} justifyContent={'center'}
> >
{!!intro && (
<Card p={4} mb={10}> <Card p={4} mb={10}>
<Box fontSize={'xl'} fontWeight={'600'} textAlign={'center'} pb={2}> <Flex mb={2} alignItems={'center'} justifyContent={'center'}>
{modelName} 介绍 <Image src={avatar || LOGO_ICON} w={'32px'} h={'32px'} alt={''} />
<Box ml={3} fontSize={'3xl'} fontWeight={'bold'}>
{name}
</Box> </Box>
</Flex>
<Box whiteSpace={'pre-line'}>{intro}</Box> <Box whiteSpace={'pre-line'}>{intro}</Box>
</Card> </Card>
)}
{/* version intro */} {/* version intro */}
<Card p={4} mb={10}> <Card p={4} mb={10}>
<Markdown source={versionIntro} /> <Markdown source={versionIntro} />
......
src/pages/chat/components/History.tsx 0 → 100644
import React, { useCallback, useRef, useState, useMemo } from 'react';
import type { MouseEvent } from 'react';
import { AddIcon } from '@chakra-ui/icons';
import {
Box,
Button,
Flex,
useTheme,
Menu,
MenuList,
MenuItem,
useOutsideClick
} from '@chakra-ui/react';
import { ChatIcon } from '@chakra-ui/icons';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import { useLoading } from '@/hooks/useLoading';
import { useUserStore } from '@/store/user';
import { formatTimeToChatTime } from '@/utils/tools';
import MyIcon from '@/components/Icon';
import type { HistoryItemType, ExportChatType } from '@/types/chat';
import { useChatStore } from '@/store/chat';
import { useScreen } from '@/hooks/useScreen';
import ModelList from './ModelList';
import styles from '../index.module.scss';
const PcSliderBar = ({
isPcDevice,
onclickDelHistory,
onclickExportChat
}: {
isPcDevice: boolean;
onclickDelHistory: (historyId: string) => Promise<void>;
onclickExportChat: (type: ExportChatType) => void;
}) => {
const router = useRouter();
const { modelId = '', chatId = '' } = router.query as { modelId: string; chatId: string };
const theme = useTheme();
const { isPc } = useScreen({ defaultIsPc: isPcDevice });
const ContextMenuRef = useRef(null);
const { Loading, setIsLoading } = useLoading();
const [contextMenuData, setContextMenuData] = useState<{
left: number;
top: number;
history: HistoryItemType;
}>();
const { history, loadHistory } = useChatStore();
const { myModels, myCollectionModels, loadMyModels } = useUserStore();
const models = useMemo(
() => [...myModels, ...myCollectionModels],
[myCollectionModels, myModels]
);
useQuery(['loadModels'], () => loadMyModels(false));
// close contextMenu
useOutsideClick({
ref: ContextMenuRef,
handler: () =>
setTimeout(() => {
setContextMenuData(undefined);
})
});
const { isLoading: isLoadingHistory } = useQuery(['loadingHistory'], () =>
loadHistory({ pageNum: 1 })
);
const onclickContextMenu = useCallback(
(e: MouseEvent<HTMLDivElement>, history: HistoryItemType) => {
e.preventDefault(); // 阻止默认右键菜单
if (!isPc) return;
setContextMenuData({
left: e.clientX + 15,
top: e.clientY + 10,
history
});
},
[isPc]
);
return (
<Flex
position={'relative'}
flexDirection={'column'}
w={'100%'}
h={'100%'}
bg={'white'}
borderRight={['', theme.borders.base]}
>
{/* 新对话 */}
{isPc && (
<Box
className={styles.newChat}
zIndex={1000}
w={'90%'}
h={'40px'}
my={5}
mx={'auto'}
position={'relative'}
>
<Button
variant={'base'}
w={'100%'}
h={'100%'}
leftIcon={<AddIcon />}
onClick={() => router.replace(`/chat?modelId=${modelId}`)}
>
新对话
</Button>
{models.length > 1 && (
<Box
className={styles.modelList}
position={'absolute'}
transition={'0.15s ease-out'}
w={'110%'}
left={0}
top={'45px'}
>
<ModelList models={models} modelId={modelId} />
</Box>
)}
</Box>
)}
{/* chat history */}
<Box flex={'1 0 0'} h={0} overflow={'overlay'}>
{history.map((item) => (
<Flex
position={'relative'}
key={item._id}
alignItems={'center'}
py={3}
pr={[0, 3]}
pl={[6, 3]}
cursor={'pointer'}
transition={'background-color .2s ease-in'}
borderLeft={['none', '5px solid transparent']}
userSelect={'none'}
_hover={{
backgroundColor: ['', '#dee0e3']
}}
{...(item._id === chatId
? {
backgroundColor: '#eff0f1',
borderLeftColor: 'myBlue.600 !important'
}
: {})}
onClick={() => {
if (item._id === chatId) return;
if (isPc) {
router.replace(`/chat?modelId=${item.modelId}&chatId=${item._id}`);
} else {
router.push(`/chat?modelId=${item.modelId}&chatId=${item._id}`);
}
}}
onContextMenu={(e) => onclickContextMenu(e, item)}
>
<ChatIcon fontSize={'16px'} color={'myGray.500'} />
<Box flex={'1 0 0'} w={0} ml={3}>
<Flex alignItems={'center'}>
<Box flex={'1 0 0'} w={0} className="textEllipsis" color={'myGray.1000'}>
{item.title}
</Box>
<Box color={'myGray.400'} fontSize={'sm'}>
{formatTimeToChatTime(item.updateTime)}
</Box>
</Flex>
<Box className="textEllipsis" mt={1} fontSize={'sm'} color={'myGray.500'}>
{item.latestChat || '……'}
</Box>
</Box>
{/* phone quick delete */}
{!isPc && (
<MyIcon
px={3}
name={'delete'}
w={'16px'}
onClickCapture={async (e) => {
e.stopPropagation();
setIsLoading(true);
try {
await onclickDelHistory(item._id);
} catch (error) {
console.log(error);
}
setIsLoading(false);
}}
/>
)}
</Flex>
))}
{!isLoadingHistory && history.length === 0 && (
<Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
还没有聊天记录
</Box>
</Flex>
)}
</Box>
{/* context menu */}
{contextMenuData && (
<Box zIndex={10} position={'fixed'} top={contextMenuData.top} left={contextMenuData.left}>
<Box ref={ContextMenuRef}></Box>
<Menu isOpen>
<MenuList>
<MenuItem
onClick={async () => {
setIsLoading(true);
try {
await onclickDelHistory(contextMenuData.history._id);
if (contextMenuData.history._id === chatId) {
router.replace(`/chat?modelId=${modelId}`);
}
} catch (error) {
console.log(error);
}
setIsLoading(false);
}}
>
删除记录
</MenuItem>
<MenuItem onClick={() => onclickExportChat('html')}>导出HTML格式</MenuItem>
<MenuItem onClick={() => onclickExportChat('pdf')}>导出PDF格式</MenuItem>
<MenuItem onClick={() => onclickExportChat('md')}>导出Markdown格式</MenuItem>
</MenuList>
</Menu>
</Box>
)}
<Loading loading={isLoadingHistory} fixed={false} />
</Flex>
);
};
export default PcSliderBar;
src/pages/chat/components/ModelList.tsx 0 → 100644
import React from 'react';
import { Box, Flex, Image } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import { ModelListItemType } from '@/types/model';
const ModelList = ({ models, modelId }: { models: ModelListItemType[]; modelId: string }) => {
const router = useRouter();
return (
<Box w={'100%'} h={'100%'} bg={'white'} overflow={'overlay'}>
{models.map((item) => (
<Box key={item._id}>
<Flex
key={item._id}
position={'relative'}
alignItems={['flex-start', 'center']}
p={3}
cursor={'pointer'}
transition={'background-color .2s ease-in'}
borderLeft={['', '5px solid transparent']}
_hover={{
backgroundColor: ['', '#dee0e3']
}}
{...(modelId === item._id
? {
backgroundColor: '#eff0f1',
borderLeftColor: 'myBlue.600'
}
: {})}
onClick={() => {
if (item._id === modelId) return;
router.replace(`/chat?modelId=${item._id}`);
}}
>
<Image
src={item.avatar || '/icon/logo.png'}
alt=""
w={'34px'}
maxH={'50px'}
objectFit={'contain'}
/>
<Box flex={'1 0 0'} w={0} ml={3}>
<Box className="textEllipsis" color={'myGray.1000'}>
{item.name}
</Box>
<Box className="textEllipsis" color={'myGray.400'} fontSize={'sm'}>
{item.systemPrompt || '这个模型没有提示词~'}
</Box>
</Box>
</Flex>
</Box>
))}
</Box>
);
};
export default ModelList;
src/pages/chat/components/PhoneSliderBar.tsx 0 → 100644
import React, { useMemo } from 'react';
import { AddIcon, ChatIcon } from '@chakra-ui/icons';
import {
Box,
Button,
Flex,
Divider,
useDisclosure,
useColorMode,
useColorModeValue,
Image
} from '@chakra-ui/react';
import { useUserStore } from '@/store/user';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import MyIcon from '@/components/Icon';
import WxConcat from '@/components/WxConcat';
import { delChatHistoryById } from '@/api/chat';
import { useChatStore } from '@/store/chat';
const PhoneSliderBar = ({
chatId,
modelId,
onClose
}: {
chatId: string;
modelId: string;
onClose: () => void;
}) => {
const router = useRouter();
const { colorMode, toggleColorMode } = useColorMode();
const { myModels, myCollectionModels, loadMyModels } = useUserStore();
const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
const models = useMemo(
() => [...myModels, ...myCollectionModels],
[myCollectionModels, myModels]
);
useQuery(['loadModels'], () => loadMyModels(false));
const { history, loadHistory } = useChatStore();
useQuery(['loadingHistory'], () => loadHistory({ pageNum: 1 }));
const RenderButton = ({
onClick,
children
}: {
onClick: () => void;
children: JSX.Element | string;
}) => (
<Box px={3} mb={2}>
<Flex
alignItems={'center'}
p={2}
cursor={'pointer'}
borderRadius={'md'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.2)'
}}
onClick={onClick}
>
{children}
</Flex>
</Box>
);
return (
<Flex
flexDirection={'column'}
w={'100%'}
h={'100%'}
py={3}
backgroundColor={useColorModeValue('blackAlpha.800', 'blackAlpha.500')}
color={'white'}
>
<Flex alignItems={'center'} justifyContent={'space-between'} px={3}>
<Box flex={'0 0 50px'}>AI助手</Box>
{/* 新对话 */}
<Button
w={'50%'}
variant={'outline'}
colorScheme={'white'}
mb={2}
leftIcon={<AddIcon />}
onClick={() => router.replace(`/chat?modelId=${modelId}`)}
>
新对话
</Button>
</Flex>
{/* 我的模型 & 历史记录 折叠框*/}
<Box flex={'1 0 0'} px={3} h={0} overflowY={'auto'}>
<Box>
{models.map((item) => (
<Flex
key={item._id}
alignItems={'center'}
p={3}
borderRadius={'md'}
mb={2}
cursor={'pointer'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.1)'
}}
fontSize={'xs'}
border={'1px solid transparent'}
{...(item._id === modelId
? {
borderColor: 'rgba(255,255,255,0.5)',
backgroundColor: 'rgba(255,255,255,0.1)'
}
: {})}
onClick={async () => {
if (item._id === modelId) return;
router.replace(`/chat?modelId=${item._id}`);
onClose();
}}
>
<Image src={item.avatar} mr={2} alt={''} w={'16px'} h={'16px'} />
<Box className={'textEllipsis'} flex={'1 0 0'} w={0}>
{item.name}
</Box>
</Flex>
))}
</Box>
<>
<Box py={1}>历史记录</Box>
{history.map((item) => (
<Flex
key={item._id}
alignItems={'center'}
p={3}
borderRadius={'md'}
mb={2}
fontSize={'xs'}
border={'1px solid transparent'}
{...(item._id === chatId
? {
borderColor: 'rgba(255,255,255,0.5)',
backgroundColor: 'rgba(255,255,255,0.1)'
}
: {})}
onClick={() => {
if (item._id === chatId) return;
router.replace(`/chat?modelId=${item.modelId}&chatId=${item._id}`);
onClose();
}}
>
<ChatIcon mr={2} />
<Box flex={'1 0 0'} w={0} className="textEllipsis">
{item.title}
</Box>
<Box>
<MyIcon
name={'delete'}
w={'14px'}
onClick={async (e) => {
e.stopPropagation();
console.log(111);
await delChatHistoryById(item._id);
loadHistory({ pageNum: 1, init: true });
if (item._id === chatId) {
router.replace(`/chat?modelId=${modelId}`);
}
}}
/>
</Box>
</Flex>
))}
</>
</Box>
<Divider my={3} colorScheme={useColorModeValue('gray', 'white')} />
<RenderButton onClick={() => router.push('/')}>
<>
<MyIcon name="out" fill={'white'} w={'18px'} h={'18px'} mr={4} />
退出聊天
</>
</RenderButton>
<RenderButton onClick={onOpenWx}>
<>
<MyIcon name="wx" fill={'white'} w={'18px'} h={'18px'} mr={4} />
交流群
</>
</RenderButton>
{/* wx 联系 */}
{isOpenWx && <WxConcat onClose={onCloseWx} />}
</Flex>
);
};
export default PhoneSliderBar;
src/pages/chat/components/SlideBar.tsx deleted 100644 → 0
import React, { useRef, useEffect, useMemo, useCallback } from 'react';
import { AddIcon, ChatIcon, DeleteIcon, MoonIcon, SunIcon } from '@chakra-ui/icons';
import {
Box,
Button,
Accordion,
AccordionItem,
AccordionButton,
AccordionPanel,
AccordionIcon,
Flex,
Divider,
IconButton,
useDisclosure,
useColorMode,
useColorModeValue,
Menu,
MenuButton,
MenuList,
MenuItem
} from '@chakra-ui/react';
import { useUserStore } from '@/store/user';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import { getToken } from '@/utils/user';
import MyIcon from '@/components/Icon';
import WxConcat from '@/components/WxConcat';
import { getChatHistory, delChatHistoryById } from '@/api/chat';
import { getCollectionModels } from '@/api/model';
import type { ChatSiteItemType } from '../index';
import { fileDownload } from '@/utils/file';
import { htmlTemplate } from '@/constants/common';
const SlideBar = ({
chatId,
modelId,
history,
resetChat,
onClose
}: {
chatId: string;
modelId: string;
history: ChatSiteItemType[];
resetChat: (modelId?: string, chatId?: string) => void;
onClose: () => void;
}) => {
const router = useRouter();
const { colorMode, toggleColorMode } = useColorMode();
const { myModels, getMyModels } = useUserStore();
const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
const preChatId = useRef('chatId'); // 用于校验上一次chatId的情况,判断是否需要刷新历史记录
const { isSuccess, refetch: fetchMyModels } = useQuery(['getMyModels'], getMyModels, {
cacheTime: 5 * 60 * 1000,
enabled: false
});
const { data: collectionModels = [], refetch: fetchCollectionModels } = useQuery(
[getCollectionModels],
getCollectionModels,
{
cacheTime: 5 * 60 * 1000,
enabled: false
}
);
const models = useMemo(() => {
const myModelList = myModels.map((item) => ({
id: item._id,
name: item.name,
icon: 'model' as any
}));
const collectionList = collectionModels
.map((item) => ({
id: item._id,
name: item.name,
icon: 'collectionSolid' as any
}))
.filter((model) => !myModelList.find((item) => item.id === model.id));
return myModelList.concat(collectionList);
}, [collectionModels, myModels]);
const { data: chatHistory = [], mutate: loadChatHistory } = useMutation({
mutationFn: getChatHistory
});
// update history
useEffect(() => {
if (chatId && preChatId.current === '') {
loadChatHistory();
}
preChatId.current = chatId;
}, [chatId, loadChatHistory]);
// init history
useEffect(() => {
setTimeout(() => {
fetchMyModels();
fetchCollectionModels();
loadChatHistory();
}, 1000);
}, [fetchCollectionModels, fetchMyModels, loadChatHistory]);
/**
* export md
*/
const onclickExportMd = useCallback(() => {
fileDownload({
text: history.map((item) => item.value).join('\n'),
type: 'text/markdown',
filename: 'chat.md'
});
}, [history]);
const getHistoryHtml = useCallback(() => {
const historyDom = document.getElementById('history');
if (!historyDom) return;
const dom = Array.from(historyDom.children).map((child, i) => {
const avatar = `<img src="${
child.querySelector<HTMLImageElement>('.avatar')?.src
}" alt="" />`;
const chatContent = child.querySelector<HTMLDivElement>('.markdown');
if (!chatContent) {
return '';
}
const chatContentClone = chatContent.cloneNode(true) as HTMLDivElement;
const codeHeader = chatContentClone.querySelectorAll('.code-header');
codeHeader.forEach((childElement: any) => {
childElement.remove();
});
return `<div class="chat-item">
${avatar}
${chatContentClone.outerHTML}
</div>`;
});
const html = htmlTemplate.replace('{{CHAT_CONTENT}}', dom.join('\n'));
return html;
}, []);
const onclickExportHtml = useCallback(() => {
const html = getHistoryHtml();
html &&
fileDownload({
text: html,
type: 'text/html',
filename: '聊天记录.html'
});
}, [getHistoryHtml]);
const onclickExportPdf = useCallback(() => {
const html = getHistoryHtml();
html &&
// @ts-ignore
html2pdf(html, {
margin: 0,
filename: `聊天记录.pdf`
});
}, [getHistoryHtml]);
const RenderHistory = () => (
<>
{chatHistory.map((item) => (
<Flex
key={item._id}
alignItems={'center'}
p={3}
borderRadius={'md'}
mb={2}
cursor={'pointer'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.1)'
}}
fontSize={'xs'}
border={'1px solid transparent'}
{...(item._id === chatId
? {
borderColor: 'rgba(255,255,255,0.5)',
backgroundColor: 'rgba(255,255,255,0.1)'
}
: {})}
onClick={() => {
if (item._id === chatId) return;
preChatId.current = 'chatId';
resetChat(item.modelId, item._id);
onClose();
}}
>
<ChatIcon mr={2} />
<Box flex={'1 0 0'} w={0} className="textEllipsis">
{item.title}
</Box>
<Box>
<IconButton
icon={<DeleteIcon />}
variant={'unstyled'}
aria-label={'edit'}
size={'xs'}
onClick={async (e) => {
e.stopPropagation();
await delChatHistoryById(item._id);
loadChatHistory();
if (item._id === chatId) {
resetChat();
}
}}
/>
</Box>
</Flex>
))}
</>
);
const RenderButton = ({
onClick,
children
}: {
onClick: () => void;
children: JSX.Element | string;
}) => (
<Box px={3} mb={2}>
<Flex
alignItems={'center'}
p={2}
cursor={'pointer'}
borderRadius={'md'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.2)'
}}
onClick={onClick}
>
{children}
</Flex>
</Box>
);
return (
<Flex
flexDirection={'column'}
w={'100%'}
h={'100%'}
py={3}
backgroundColor={useColorModeValue('blackAlpha.800', 'blackAlpha.500')}
color={'white'}
>
{/* 新对话 */}
{getToken() && (
<Button
w={'90%'}
variant={'white'}
h={'40px'}
mb={2}
mx={'auto'}
leftIcon={<AddIcon />}
onClick={() => resetChat()}
>
新对话
</Button>
)}
{/* 我的模型 & 历史记录 折叠框*/}
<Box flex={'1 0 0'} px={3} h={0} overflowY={'auto'}>
{isSuccess && (
<>
<Box>
{models.map((item) => (
<Flex
key={item.id}
alignItems={'center'}
p={3}
borderRadius={'md'}
mb={2}
cursor={'pointer'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.1)'
}}
fontSize={'xs'}
border={'1px solid transparent'}
{...(item.id === modelId
? {
borderColor: 'rgba(255,255,255,0.5)',
backgroundColor: 'rgba(255,255,255,0.1)'
}
: {})}
onClick={async () => {
if (item.id === modelId) return;
resetChat(item.id);
onClose();
}}
>
<MyIcon name={item.icon} mr={2} color={'white'} w={'16px'} h={'16px'} />
<Box className={'textEllipsis'} flex={'1 0 0'} w={0}>
{item.name}
</Box>
</Flex>
))}
</Box>
</>
)}
<Accordion allowToggle>
<AccordionItem borderTop={0} borderBottom={0}>
<AccordionButton borderRadius={'md'} pl={1}>
<Box as="span" flex="1" textAlign="left">
历史记录
</Box>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={0} px={0}>
<RenderHistory />
</AccordionPanel>
</AccordionItem>
</Accordion>
</Box>
<Divider my={3} colorScheme={useColorModeValue('gray', 'white')} />
{history.length > 0 && (
<Menu autoSelect={false}>
<MenuButton
mx={3}
mb={2}
p={2}
display={'flex'}
alignItems={'center'}
cursor={'pointer'}
borderRadius={'md'}
textAlign={'left'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.2)'
}}
>
<MyIcon name="export" fill={'white'} w={'18px'} h={'18px'} mr={4} />
导出聊天
</MenuButton>
<MenuList fontSize={'sm'} color={'blackAlpha.800'}>
<MenuItem onClick={onclickExportHtml}>HTML格式</MenuItem>
<MenuItem onClick={onclickExportPdf}>PDF格式</MenuItem>
<MenuItem onClick={onclickExportMd}>Markdown格式</MenuItem>
</MenuList>
</Menu>
)}
<RenderButton onClick={() => router.push('/')}>
<>
<MyIcon name="home" fill={'white'} w={'18px'} h={'18px'} mr={4} />
首页
</>
</RenderButton>
<RenderButton onClick={() => router.push('/number/setting')}>
<>
<MyIcon name="pay" fill={'white'} w={'16px'} h={'16px'} mr={4} />
充值
</>
</RenderButton>
<Flex alignItems={'center'} mr={4}>
<Box flex={1}>
<RenderButton onClick={onOpenWx}>交流群</RenderButton>
</Box>
<IconButton
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
aria-label={''}
variant={'outline'}
w={'16px'}
colorScheme={'white'}
_hover={{
backgroundColor: 'rgba(255,255,255,0.2)'
}}
onClick={toggleColorMode}
/>
</Flex>
{/* wx 联系 */}
{isOpenWx && <WxConcat onClose={onCloseWx} />}
</Flex>
);
};
export default SlideBar;
src/pages/chat/index.module.scss
...@@ -9,3 +9,18 @@ ...@@ -9,3 +9,18 @@
transform: scale(1.2); transform: scale(1.2);
} }
} }
.newChat {
.modelList {
height: 0;
border-radius: 6px;
overflow: hidden;
}
&:hover {
.modelList {
height: 50vh;
box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.05);
border: 1px solid #dee0e2;
}
}
}
src/pages/chat/index.tsx
import React, { useCallback, useState, useRef, useMemo, useEffect } from 'react'; import React, { useCallback, useState, useRef, useMemo, useEffect } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { getInitChatSiteInfo, delChatRecordByIndex, postSaveChat } from '@/api/chat'; import {
import type { InitChatResponse } from '@/api/response/chat'; getInitChatSiteInfo,
import type { ChatItemType } from '@/types/chat'; delChatRecordByIndex,
postSaveChat,
delChatHistoryById
} from '@/api/chat';
import type { ChatSiteItemType, ExportChatType } from '@/types/chat';
import { import {
Textarea, Textarea,
Box, Box,
Flex, Flex,
useDisclosure,
Drawer,
DrawerOverlay,
DrawerContent,
useColorModeValue, useColorModeValue,
Menu, Menu,
MenuButton, MenuButton,
...@@ -22,38 +22,46 @@ import { ...@@ -22,38 +22,46 @@ import {
ModalOverlay, ModalOverlay,
ModalContent, ModalContent,
ModalBody, ModalBody,
ModalCloseButton ModalCloseButton,
useDisclosure,
Drawer,
DrawerOverlay,
DrawerContent
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { useScreen } from '@/hooks/useScreen'; import { useScreen } from '@/hooks/useScreen';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { OpenAiChatEnum } from '@/constants/model';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useGlobalStore } from '@/store/global';
import { useCopyData } from '@/utils/tools'; import { useCopyData } from '@/utils/tools';
import { streamFetch } from '@/api/fetch'; import { streamFetch } from '@/api/fetch';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
import { throttle } from 'lodash'; import { throttle } from 'lodash';
import { Types } from 'mongoose'; import { Types } from 'mongoose';
import Markdown from '@/components/Markdown'; import Markdown from '@/components/Markdown';
import { HUMAN_ICON, LOGO_ICON } from '@/constants/chat'; import { LOGO_ICON } from '@/constants/chat';
import { useChatStore } from '@/store/chat';
const SlideBar = dynamic(() => import('./components/SlideBar')); import { useLoading } from '@/hooks/useLoading';
import { fileDownload } from '@/utils/file';
import { htmlTemplate } from '@/constants/common';
import { useUserStore } from '@/store/user';
const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'));
const History = dynamic(() => import('./components/History'));
const Empty = dynamic(() => import('./components/Empty')); const Empty = dynamic(() => import('./components/Empty'));
import styles from './index.module.scss'; import styles from './index.module.scss';
const textareaMinH = '22px'; const textareaMinH = '22px';
export type ChatSiteItemType = { const Chat = ({
status: 'loading' | 'finish'; modelId,
} & ChatItemType; chatId,
isPcDevice
interface ChatType extends InitChatResponse { }: {
history: ChatSiteItemType[]; modelId: string;
} chatId: string;
isPcDevice: boolean;
const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { }) => {
const router = useRouter(); const router = useRouter();
const ChatBox = useRef<HTMLDivElement>(null); const ChatBox = useRef<HTMLDivElement>(null);
...@@ -61,31 +69,34 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -61,31 +69,34 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
// 中断请求 // 中断请求
const controller = useRef(new AbortController()); const controller = useRef(new AbortController());
const isResetPage = useRef(false); const isLeavePage = useRef(false);
const [chatData, setChatData] = useState<ChatType>({
chatId,
modelId,
name: '',
avatar: '/icon/logo.png',
intro: '',
chatModel: OpenAiChatEnum.GPT35,
history: []
}); // 聊天框整体数据
const [inputVal, setInputVal] = useState(''); // user input prompt const [inputVal, setInputVal] = useState(''); // user input prompt
const [showSystemPrompt, setShowSystemPrompt] = useState(''); const [showSystemPrompt, setShowSystemPrompt] = useState('');
const {
lastChatModelId,
setLastChatModelId,
lastChatId,
setLastChatId,
loadHistory,
chatData,
setChatData,
forbidLoadChatData,
setForbidLoadChatData
} = useChatStore();
const isChatting = useMemo( const isChatting = useMemo(
() => chatData.history[chatData.history.length - 1]?.status === 'loading', () => chatData.history[chatData.history.length - 1]?.status === 'loading',
[chatData.history] [chatData.history]
); );
const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
const { toast } = useToast(); const { toast } = useToast();
const { copyData } = useCopyData(); const { copyData } = useCopyData();
const { isPc, media } = useScreen(); const { isPc } = useScreen({ defaultIsPc: isPcDevice });
const { setLoading } = useGlobalStore(); const { Loading, setIsLoading } = useLoading();
const { userInfo } = useUserStore();
const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
// 滚动到底部 // 滚动到底部
const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => { const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => {
...@@ -122,83 +133,13 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -122,83 +133,13 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
}, 100); }, 100);
}, []); }, []);
// 获取对话信息
const loadChatInfo = useCallback(
async ({
modelId,
chatId,
isLoading = false,
isScroll = false
}: {
modelId: string;
chatId: string;
isLoading?: boolean;
isScroll?: boolean;
}) => {
isLoading && setLoading(true);
try {
const res = await getInitChatSiteInfo(modelId, chatId);
setChatData({
...res,
history: res.history.map((item) => ({
...item,
status: 'finish'
}))
});
if (isScroll && res.history.length > 0) {
setTimeout(() => {
scrollToBottom('auto');
}, 1000);
}
} catch (e: any) {
toast({
title: e?.message || '获取对话信息异常,请检查地址',
status: 'error',
isClosable: true,
duration: 5000
});
router.back();
}
setLoading(false);
return null;
},
[router, scrollToBottom, setLoading, toast]
);
// 重载新的对话
const resetChat = useCallback(
async (modelId = chatData.modelId, chatId = '') => {
// 强制中断流
isResetPage.current = true;
controller.current?.abort();
try {
router.replace(`/chat?modelId=${modelId}&chatId=${chatId}`);
loadChatInfo({
modelId,
chatId,
isLoading: true,
isScroll: true
});
} catch (error: any) {
toast({
title: error?.message || '生成新对话失败',
status: 'warning'
});
}
onCloseSlider();
},
[chatData.modelId, loadChatInfo, onCloseSlider, router, toast]
);
// gpt 对话 // gpt 对话
const gptChatPrompt = useCallback( const gptChatPrompt = useCallback(
async (prompts: ChatSiteItemType[]) => { async (prompts: ChatSiteItemType[]) => {
// create abort obj // create abort obj
const abortSignal = new AbortController(); const abortSignal = new AbortController();
controller.current = abortSignal; controller.current = abortSignal;
isResetPage.current = false; isLeavePage.current = false;
const prompt = { const prompt = {
obj: prompts[0].obj, obj: prompts[0].obj,
...@@ -230,7 +171,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -230,7 +171,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
}); });
// 重置了页面，说明退出了当前聊天, 不缓存任何内容 // 重置了页面，说明退出了当前聊天, 不缓存任何内容
if (isResetPage.current) { if (isLeavePage.current) {
return; return;
} }
...@@ -255,7 +196,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -255,7 +196,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
] ]
}); });
if (newChatId) { if (newChatId) {
setForbidLoadChatData(true);
router.replace(`/chat?modelId=${modelId}&chatId=${newChatId}`); router.replace(`/chat?modelId=${modelId}&chatId=${newChatId}`);
loadHistory({ pageNum: 1, init: true });
} }
} catch (err) { } catch (err) {
toast({ toast({
...@@ -280,7 +223,16 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -280,7 +223,16 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
}) })
})); }));
}, },
[chatId, generatingMessage, modelId, router, toast] [
chatId,
setForbidLoadChatData,
generatingMessage,
loadHistory,
modelId,
router,
setChatData,
toast
]
); );
/** /**
...@@ -351,12 +303,21 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -351,12 +303,21 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
history: newChatList.slice(0, newChatList.length - 2) history: newChatList.slice(0, newChatList.length - 2)
})); }));
} }
}, [isChatting, inputVal, chatData.history, resetInputVal, toast, scrollToBottom, gptChatPrompt]); }, [
isChatting,
inputVal,
chatData.history,
setChatData,
resetInputVal,
toast,
scrollToBottom,
gptChatPrompt
]);
// 删除一句话 // 删除一句话
const delChatRecord = useCallback( const delChatRecord = useCallback(
async (index: number, id: string) => { async (index: number, id: string) => {
setLoading(true); setIsLoading(true);
try { try {
// 删除数据库最后一句 // 删除数据库最后一句
await delChatRecordByIndex(chatId, id); await delChatRecordByIndex(chatId, id);
...@@ -368,9 +329,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -368,9 +329,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
setLoading(false); setIsLoading(false);
}, },
[chatId, setLoading] [chatId, setChatData, setIsLoading]
); );
// 复制内容 // 复制内容
...@@ -382,20 +343,172 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -382,20 +343,172 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
[copyData] [copyData]
); );
// 初始化聊天框 // export chat data
useQuery(['init'], () => const onclickExportChat = useCallback(
loadChatInfo({ (type: ExportChatType) => {
const getHistoryHtml = () => {
const historyDom = document.getElementById('history');
if (!historyDom) return;
const dom = Array.from(historyDom.children).map((child, i) => {
const avatar = `<img src="${
child.querySelector<HTMLImageElement>('.avatar')?.src
}" alt="" />`;
const chatContent = child.querySelector<HTMLDivElement>('.markdown');
if (!chatContent) {
return '';
}
const chatContentClone = chatContent.cloneNode(true) as HTMLDivElement;
const codeHeader = chatContentClone.querySelectorAll('.code-header');
codeHeader.forEach((childElement: any) => {
childElement.remove();
});
return `<div class="chat-item">
${avatar}
${chatContentClone.outerHTML}
</div>`;
});
const html = htmlTemplate.replace('{{CHAT_CONTENT}}', dom.join('\n'));
return html;
};
const map: Record<ExportChatType, () => void> = {
md: () => {
fileDownload({
text: chatData.history.map((item) => item.value).join('\n\n'),
type: 'text/markdown',
filename: 'chat.md'
});
},
html: () => {
const html = getHistoryHtml();
html &&
fileDownload({
text: html,
type: 'text/html',
filename: '聊天记录.html'
});
},
pdf: () => {
const html = getHistoryHtml();
html &&
// @ts-ignore
html2pdf(html, {
margin: 0,
filename: `聊天记录.pdf`
});
}
};
map[type]();
},
[chatData.history]
);
// delete history and reload history
const onclickDelHistory = useCallback(
async (historyId: string) => {
await delChatHistoryById(historyId);
loadHistory({ pageNum: 1, init: true });
},
[loadHistory]
);
// 获取对话信息
const loadChatInfo = useCallback(
async ({
modelId, modelId,
chatId, chatId,
isLoading: true, isLoading = false
isScroll: true }: {
}) modelId: string;
chatId: string;
isLoading?: boolean;
}) => {
isLoading && setIsLoading(true);
try {
const res = await getInitChatSiteInfo(modelId, chatId);
setChatData({
...res,
history: res.history.map((item) => ({
...item,
status: 'finish'
}))
});
if (res.history.length > 0) {
setTimeout(() => {
scrollToBottom('auto');
}, 300);
}
// 空 modelId 请求, 重定向到新的 model 聊天
if (res.modelId !== modelId) {
setForbidLoadChatData(true);
router.replace(`/chat?modelId=${res.modelId}`);
}
} catch (e: any) {
// reset all chat tore
setLastChatModelId('');
setLastChatId('');
setChatData();
loadHistory({ pageNum: 1, init: true });
router.replace('/chat');
}
setIsLoading(false);
return null;
},
[
router,
loadHistory,
setForbidLoadChatData,
scrollToBottom,
setChatData,
setIsLoading,
setLastChatId,
setLastChatModelId
]
); );
// 初始化聊天框
const { isLoading } = useQuery(['init', modelId, chatId], () => {
// pc: redirect to latest model chat
if (!modelId && lastChatModelId) {
router.replace(`/chat?modelId=${lastChatModelId}&chatId=${lastChatId}`);
return null;
}
// store id
modelId && setLastChatModelId(modelId);
setLastChatId(chatId);
// focus scroll bottom
chatId && scrollToBottom('auto');
/* get mode and chat into ↓ */
// phone: history page
if (!isPc && Object.keys(router.query).length === 0) return null;
if (forbidLoadChatData) {
setForbidLoadChatData(false);
return null;
}
return loadChatInfo({
modelId,
chatId
});
});
// 更新流中断对象
useEffect(() => { useEffect(() => {
return () => { return () => {
isResetPage.current = true; isLeavePage.current = true;
controller.current?.abort(); controller.current?.abort();
}; };
}, []); }, []);
...@@ -403,61 +516,91 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -403,61 +516,91 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
return ( return (
<Flex <Flex
h={'100%'} h={'100%'}
flexDirection={media('row', 'column')} flexDirection={['column', 'row']}
backgroundColor={useColorModeValue('white', '')} backgroundColor={useColorModeValue('white', '')}
> >
{isPc ? ( {/* pc always show history. phone is only show when modelId is present */}
<Box flex={'0 0 250px'} w={0} h={'100%'}> {isPc || !modelId ? (
<SlideBar <Box flex={[1, '0 0 250px']} w={['100%', 0]} h={'100%'}>
resetChat={resetChat} <History
chatId={chatId} onclickDelHistory={onclickDelHistory}
modelId={modelId} onclickExportChat={onclickExportChat}
history={chatData.history} isPcDevice={isPcDevice}
onClose={onCloseSlider}
/> />
</Box> </Box>
) : ( ) : (
<Box h={'60px'} borderBottom={'1px solid rgba(0,0,0,0.1)'}> <Box
h={'44px'}
borderBottom={'1px solid '}
borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
>
<Flex <Flex
alignItems={'center'} alignItems={'center'}
h={'100%'} h={'100%'}
justifyContent={'space-between'} justifyContent={'space-between'}
backgroundColor={useColorModeValue('white', 'gray.700')} backgroundColor={useColorModeValue('white', 'gray.700')}
color={useColorModeValue('blackAlpha.700', 'white')} color={useColorModeValue('blackAlpha.700', 'white')}
position={'relative'} px={5}
px={7}
> >
<Box onClick={onOpenSlider}>
<MyIcon <MyIcon
name={'menu'} name={'tabbarMore'}
w={'20px'} w={'14px'}
h={'20px'} h={'14px'}
color={useColorModeValue('blackAlpha.700', 'white')} color={useColorModeValue('blackAlpha.700', 'white')}
onClick={onOpenSlider}
/> />
</Box> <Box>{chatData.model.name}</Box>
<Box>{chatData?.name}</Box> <Menu autoSelect={false}>
<MenuButton lineHeight={1}>
<MyIcon
name={'more'}
w={'16px'}
h={'16px'}
color={useColorModeValue('blackAlpha.700', 'white')}
/>
</MenuButton>
<MenuList minW={`90px !important`}>
<MenuItem onClick={() => router.replace(`/chat?modelId=${modelId}`)}>
新对话
</MenuItem>
<MenuItem
onClick={async () => {
try {
setIsLoading(true);
await onclickDelHistory(chatData.chatId);
router.replace(`/chat`);
} catch (err) {
console.log(err);
}
setIsLoading(false);
}}
>
删除记录
</MenuItem>
<MenuItem onClick={() => onclickExportChat('html')}>导出HTML格式</MenuItem>
<MenuItem onClick={() => onclickExportChat('pdf')}>导出PDF格式</MenuItem>
<MenuItem onClick={() => onclickExportChat('md')}>导出Markdown格式</MenuItem>
</MenuList>
</Menu>
</Flex> </Flex>
<Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}> <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} /> <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'250px'}> <DrawerContent maxWidth={'250px'}>
<SlideBar <PhoneSliderBar chatId={chatId} modelId={modelId} onClose={onCloseSlider} />
resetChat={resetChat}
chatId={chatId}
modelId={modelId}
history={chatData.history}
onClose={onCloseSlider}
/>
</DrawerContent> </DrawerContent>
</Drawer> </Drawer>
</Box> </Box>
)} )}
{/* 聊天内容 */}
{modelId && (
<Flex <Flex
{...media({ h: '100%', w: 0 }, { h: 0, w: '100%' })} position={'relative'}
h={[0, '100%']}
w={['100%', 0]}
flex={'1 0 0'} flex={'1 0 0'}
flexDirection={'column'} flexDirection={'column'}
> >
{/* 聊天内容 */}
<Box <Box
id={'history'} id={'history'}
ref={ChatBox} ref={ChatBox}
...@@ -465,13 +608,13 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -465,13 +608,13 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
flex={'1 0 0'} flex={'1 0 0'}
h={0} h={0}
w={'100%'} w={'100%'}
overflowY={'auto'} overflow={'overlay'}
> >
{chatData.history.map((item, index) => ( {chatData.history.map((item, index) => (
<Box <Box
key={item._id} key={item._id}
py={media(9, 6)} py={[6, 9]}
px={media(4, 2)} px={[2, 4]}
backgroundColor={ backgroundColor={
index % 2 !== 0 ? useColorModeValue('blackAlpha.50', 'gray.700') : '' index % 2 !== 0 ? useColorModeValue('blackAlpha.50', 'gray.700') : ''
} }
...@@ -480,10 +623,14 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -480,10 +623,14 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
> >
<Flex maxW={'750px'} m={'auto'} alignItems={'flex-start'}> <Flex maxW={'750px'} m={'auto'} alignItems={'flex-start'}>
<Menu autoSelect={false}> <Menu autoSelect={false}>
<MenuButton as={Box} mr={media(4, 1)} cursor={'pointer'}> <MenuButton as={Box} mr={[1, 4]} cursor={'pointer'}>
<Image <Image
className="avatar" className="avatar"
src={item.obj === 'Human' ? HUMAN_ICON : chatData.avatar || LOGO_ICON} src={
item.obj === 'Human'
? userInfo?.avatar
: chatData.model.avatar || LOGO_ICON
}
alt="avatar" alt="avatar"
w={['20px', '30px']} w={['20px', '30px']}
maxH={'50px'} maxH={'50px'}
...@@ -491,6 +638,11 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -491,6 +638,11 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
/> />
</MenuButton> </MenuButton>
<MenuList fontSize={'sm'}> <MenuList fontSize={'sm'}>
{chatData.model.canUse && (
<MenuItem onClick={() => router.push(`/model?modelId=${chatData.modelId}`)}>
模型详情
</MenuItem>
)}
<MenuItem onClick={() => onclickCopy(item.value)}>复制</MenuItem> <MenuItem onClick={() => onclickCopy(item.value)}>复制</MenuItem>
<MenuItem onClick={() => delChatRecord(index, item._id)}>删除该行</MenuItem> <MenuItem onClick={() => delChatRecord(index, item._id)}>删除该行</MenuItem>
</MenuList> </MenuList>
...@@ -528,7 +680,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -528,7 +680,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
name="copy" name="copy"
w={'14px'} w={'14px'}
cursor={'pointer'} cursor={'pointer'}
color={'alphaBlack.400'} color={'blackAlpha.700'}
onClick={() => onclickCopy(item.value)} onClick={() => onclickCopy(item.value)}
/> />
</Box> </Box>
...@@ -536,7 +688,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -536,7 +688,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
name="delete" name="delete"
w={'14px'} w={'14px'}
cursor={'pointer'} cursor={'pointer'}
color={'alphaBlack.400'} color={'blackAlpha.700'}
_hover={{ _hover={{
color: 'red.600' color: 'red.600'
}} }}
...@@ -547,18 +699,17 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -547,18 +699,17 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
</Flex> </Flex>
</Box> </Box>
))} ))}
{chatData.history.length === 0 && ( {chatData.history.length === 0 && <Empty model={chatData.model} />}
<Empty modelName={chatData.name} intro={chatData.intro} />
)}
</Box> </Box>
{/* 发送区 */} {/* 发送区 */}
<Box m={media('20px auto', '0 auto')} w={'100%'} maxW={media('min(750px, 100%)', 'auto')}> {chatData.model.canUse ? (
<Box m={['0 auto', '20px auto']} w={'100%'} maxW={['auto', 'min(750px, 100%)']}>
<Box <Box
py={'18px'} py={'18px'}
position={'relative'} position={'relative'}
boxShadow={`0 0 15px rgba(0,0,0,0.1)`} boxShadow={`0 0 15px rgba(0,0,0,0.1)`}
border={media('1px solid', '0')} borderTop={['1px solid', 0]}
borderColor={useColorModeValue('gray.200', 'gray.700')} borderTopColor={useColorModeValue('gray.200', 'gray.700')}
borderRadius={['none', 'md']} borderRadius={['none', 'md']}
backgroundColor={useColorModeValue('white', 'gray.700')} backgroundColor={useColorModeValue('white', 'gray.700')}
> >
...@@ -582,6 +733,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -582,6 +733,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
overflowY={'auto'} overflowY={'auto'}
whiteSpace={'pre-wrap'} whiteSpace={'pre-wrap'}
wordBreak={'break-all'} wordBreak={'break-all'}
boxShadow={'none !important'}
color={useColorModeValue('blackAlpha.700', 'white')} color={useColorModeValue('blackAlpha.700', 'white')}
onChange={(e) => { onChange={(e) => {
const textarea = e.target; const textarea = e.target;
...@@ -635,7 +787,15 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -635,7 +787,15 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
</Flex> </Flex>
</Box> </Box>
</Box> </Box>
) : (
<Box m={['0 auto', '20px auto']} w={'100%'} textAlign={'center'} color={'myGray.500'}>
作者已关闭分享
</Box>
)}
<Loading loading={isLoading} fixed={false} />
</Flex> </Flex>
)}
{/* system prompt show modal */} {/* system prompt show modal */}
{ {
...@@ -655,11 +815,10 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => { ...@@ -655,11 +815,10 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
export default Chat; export default Chat;
export async function getServerSideProps(context: any) { Chat.getInitialProps = ({ query, req }: any) => {
const modelId = context?.query?.modelId || '';
const chatId = context?.query?.chatId || '';
return { return {
props: { modelId, chatId } modelId: query?.modelId || '',
chatId: query?.chatId || '',
isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
}; };
} };
src/pages/index.tsx
...@@ -15,7 +15,7 @@ const Home = () => { ...@@ -15,7 +15,7 @@ const Home = () => {
}, [inviterId]); }, [inviterId]);
return ( return (
<> <Box p={[5, 10]}>
<Card p={5} lineHeight={2}> <Card p={5} lineHeight={2}>
<Markdown source={data} isChatting={false} /> <Markdown source={data} isChatting={false} />
</Card> </Card>
...@@ -28,7 +28,7 @@ const Home = () => { ...@@ -28,7 +28,7 @@ const Home = () => {
</Box> </Box>
<Box>Made by FastGpt Team.</Box> <Box>Made by FastGpt Team.</Box>
</Card> </Card>
</> </Box>
); );
}; };
......
src/pages/login/components/ForgetPasswordForm.tsx
...@@ -159,7 +159,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => { ...@@ -159,7 +159,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
float={'right'} float={'right'}
fontSize="sm" fontSize="sm"
mt={2} mt={2}
color={'blue.600'} color={'myBlue.600'}
cursor={'pointer'} cursor={'pointer'}
_hover={{ textDecoration: 'underline' }} _hover={{ textDecoration: 'underline' }}
onClick={() => setPageType('login')} onClick={() => setPageType('login')}
......
src/pages/login/components/LoginForm.tsx
...@@ -97,7 +97,7 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => { ...@@ -97,7 +97,7 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
{!!errors.password && errors.password.message} {!!errors.password && errors.password.message}
</FormErrorMessage> </FormErrorMessage>
</FormControl> </FormControl>
<Flex align={'center'} justifyContent={'space-between'} mt={6} color={'blue.600'}> <Flex align={'center'} justifyContent={'space-between'} mt={6} color={'myBlue.600'}>
<Box <Box
cursor={'pointer'} cursor={'pointer'}
_hover={{ textDecoration: 'underline' }} _hover={{ textDecoration: 'underline' }}
......
src/pages/login/components/RegisterForm.tsx
...@@ -167,7 +167,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => { ...@@ -167,7 +167,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
float={'right'} float={'right'}
fontSize="sm" fontSize="sm"
mt={2} mt={2}
color={'blue.600'} color={'myBlue.600'}
cursor={'pointer'} cursor={'pointer'}
_hover={{ textDecoration: 'underline' }} _hover={{ textDecoration: 'underline' }}
onClick={() => setPageType('login')} onClick={() => setPageType('login')}
......
src/pages/login/index.tsx
...@@ -11,18 +11,18 @@ import dynamic from 'next/dynamic'; ...@@ -11,18 +11,18 @@ import dynamic from 'next/dynamic';
const RegisterForm = dynamic(() => import('./components/RegisterForm')); const RegisterForm = dynamic(() => import('./components/RegisterForm'));
const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm')); const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm'));
const Login = () => { const Login = ({ isPcDevice }: { isPcDevice: boolean }) => {
const router = useRouter(); const router = useRouter();
const { lastRoute = '' } = router.query as { lastRoute: string }; const { lastRoute = '' } = router.query as { lastRoute: string };
const { isPc } = useScreen(); const { isPc } = useScreen({ defaultIsPc: isPcDevice });
const [pageType, setPageType] = useState<`${PageTypeEnum}`>(PageTypeEnum.login); const [pageType, setPageType] = useState<`${PageTypeEnum}`>(PageTypeEnum.login);
const { setUserInfo } = useUserStore(); const { setUserInfo } = useUserStore();
const loginSuccess = useCallback( const loginSuccess = useCallback(
(res: ResLogin) => { (res: ResLogin) => {
setUserInfo(res.user, res.token); setUserInfo(res.user);
setTimeout(() => { setTimeout(() => {
router.push(lastRoute ? decodeURIComponent(lastRoute) : '/model/list'); router.push(lastRoute ? decodeURIComponent(lastRoute) : '/model');
}, 100); }, 100);
}, },
[lastRoute, router, setUserInfo] [lastRoute, router, setUserInfo]
...@@ -41,7 +41,7 @@ const Login = () => { ...@@ -41,7 +41,7 @@ const Login = () => {
} }
useEffect(() => { useEffect(() => {
router.prefetch('/model/list'); router.prefetch('/model');
}, [router]); }, [router]);
return ( return (
...@@ -60,7 +60,8 @@ const Login = () => { ...@@ -60,7 +60,8 @@ const Login = () => {
backgroundColor={'#fff'} backgroundColor={'#fff'}
alignItems={'center'} alignItems={'center'}
justifyContent={'center'} justifyContent={'center'}
p={10} py={[5, 10]}
px={'5vw'}
borderRadius={isPc ? 'md' : 'none'} borderRadius={isPc ? 'md' : 'none'}
gap={5} gap={5}
> >
...@@ -95,3 +96,9 @@ const Login = () => { ...@@ -95,3 +96,9 @@ const Login = () => {
}; };
export default Login; export default Login;
Login.getInitialProps = ({ query, req }: any) => {
return {
isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
};
};
src/pages/model/components/ModelList.tsx 0 → 100644
import React, { useCallback, useMemo, useState } from 'react';
import { Box, Flex, useTheme, Input, IconButton, Tooltip, Image } from '@chakra-ui/react';
import { AddIcon } from '@chakra-ui/icons';
import { useRouter } from 'next/router';
import MyIcon from '@/components/Icon';
import { postCreateModel } from '@/api/model';
import { useLoading } from '@/hooks/useLoading';
import { useToast } from '@/hooks/useToast';
import { useQuery } from '@tanstack/react-query';
import { useUserStore } from '@/store/user';
const ModelList = ({ modelId }: { modelId: string }) => {
const theme = useTheme();
const router = useRouter();
const { toast } = useToast();
const { Loading, setIsLoading } = useLoading();
const { myModels, myCollectionModels, loadMyModels, refreshModel } = useUserStore();
const [searchText, setSearchText] = useState('');
/* 加载模型 */
const { isLoading } = useQuery(['loadModels'], () => loadMyModels(false));
const onclickCreateModel = useCallback(async () => {
setIsLoading(true);
try {
const id = await postCreateModel({ name: `AI助手${myModels.length + 1}` });
toast({
title: '创建成功',
status: 'success'
});
refreshModel.freshMyModels();
router.push(`/model?modelId=${id}`);
} catch (err: any) {
toast({
title: typeof err === 'string' ? err : err.message || '出现了意外',
status: 'error'
});
}
setIsLoading(false);
}, [myModels.length, refreshModel, router, setIsLoading, toast]);
const models = useMemo(
() =>
[
{
label: '我的',
list: myModels.filter((item) =>
new RegExp(searchText, 'ig').test(item.name + item.systemPrompt)
)
},
{
label: '收藏',
list: myCollectionModels.filter((item) =>
new RegExp(searchText, 'ig').test(item.name + item.systemPrompt)
)
}
].filter((item) => item.list.length > 0),
[myCollectionModels, myModels, searchText]
);
const totalModels = useMemo(
() => models.reduce((sum, item) => sum + item.list.length, 0),
[models]
);
return (
<Flex
position={'relative'}
flexDirection={'column'}
w={'100%'}
h={'100%'}
bg={'white'}
borderRight={['', theme.borders.base]}
>
<Flex w={'90%'} my={5} mx={'auto'}>
<Flex flex={1} mr={2} position={'relative'} alignItems={'center'}>
<Input
h={'32px'}
placeholder="搜索 AI 助手"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
/>
{searchText && (
<MyIcon
zIndex={10}
position={'absolute'}
right={3}
name={'closeSolid'}
w={'16px'}
h={'16px'}
color={'myGray.500'}
cursor={'pointer'}
onClick={() => setSearchText('')}
/>
)}
</Flex>
<Tooltip label={'新建一个AI助手'}>
<IconButton
h={'32px'}
icon={<AddIcon />}
aria-label={''}
variant={'outline'}
onClick={onclickCreateModel}
/>
</Tooltip>
</Flex>
<Box flex={'1 0 0'} h={0} overflow={'overlay'}>
{models.map((item) => (
<Box key={item.label} _notFirst={{ mt: 5 }}>
<Box fontWeight={'bold'} pl={5}>
{item.label}
</Box>
{item.list.map((item) => (
<Flex
key={item._id}
position={'relative'}
alignItems={['flex-start', 'center']}
p={3}
mb={[2, 0]}
cursor={'pointer'}
transition={'background-color .2s ease-in'}
borderLeft={['', '5px solid transparent']}
_hover={{
backgroundColor: ['', '#dee0e3']
}}
{...(modelId === item._id
? {
backgroundColor: '#eff0f1',
borderLeftColor: 'myBlue.600'
}
: {})}
onClick={() => {
if (item._id === modelId) return;
router.push(`/model?modelId=${item._id}`);
}}
>
<Image
src={item.avatar || '/icon/logo.png'}
alt=""
w={'34px'}
maxH={'50px'}
objectFit={'contain'}
/>
<Box flex={'1 0 0'} w={0} ml={3}>
<Box className="textEllipsis" color={'myGray.1000'}>
{item.name}
</Box>
<Box className="textEllipsis" color={'myGray.400'} fontSize={'sm'}>
{item.systemPrompt || '这个模型没有提示词~'}
</Box>
</Box>
</Flex>
))}
</Box>
))}
{!isLoading && totalModels === 0 && (
<Flex h={'100%'} flexDirection={'column'} alignItems={'center'} pt={'30vh'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
还没有 AI 助手~
</Box>
</Flex>
)}
</Box>
<Loading loading={isLoading} fixed={false} />
</Flex>
);
};
export default ModelList;
src/pages/model/detail/components/ModelDataCard.tsx → src/pages/model/components/detail/components/ModelDataCard.tsx
import React, { useCallback, useState, useRef } from 'react'; import React, { useCallback, useState, useRef, useEffect } from 'react';
import { import {
Box, Box,
TableContainer, TableContainer,
...@@ -53,6 +53,7 @@ const ModelDataCard = ({ modelId, isOwner }: { modelId: string; isOwner: boolean ...@@ -53,6 +53,7 @@ const ModelDataCard = ({ modelId, isOwner }: { modelId: string; isOwner: boolean
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap',
overflowY: 'auto' overflowY: 'auto'
}); });
const { const {
data: modelDataList, data: modelDataList,
isLoading, isLoading,
...@@ -66,9 +67,14 @@ const ModelDataCard = ({ modelId, isOwner }: { modelId: string; isOwner: boolean ...@@ -66,9 +67,14 @@ const ModelDataCard = ({ modelId, isOwner }: { modelId: string; isOwner: boolean
params: { params: {
modelId, modelId,
searchText searchText
} },
defaultRequest: false
}); });
useEffect(() => {
getData(1);
}, [modelId, getData]);
const [editInputData, setEditInputData] = useState<InputDataType>(); const [editInputData, setEditInputData] = useState<InputDataType>();
const { const {
......
src/pages/model/detail/components/ModelEditForm.tsx → src/pages/model/components/detail/components/ModelEditForm.tsx
...@@ -54,9 +54,10 @@ const ModelEditForm = ({ ...@@ -54,9 +54,10 @@ const ModelEditForm = ({
if (!file) return; if (!file) return;
try { try {
const base64 = await compressImg({ const base64 = await compressImg({
file file,
maxW: 40,
maxH: 60
}); });
setValue('avatar', base64); setValue('avatar', base64);
setRefresh((state) => !state); setRefresh((state) => !state);
} catch (err: any) { } catch (err: any) {
...@@ -184,7 +185,7 @@ const ModelEditForm = ({ ...@@ -184,7 +185,7 @@ const ModelEditForm = ({
<SliderMark <SliderMark
value={getValues('chat.temperature')} value={getValues('chat.temperature')}
textAlign="center" textAlign="center"
bg="blue.500" bg="myBlue.600"
color="white" color="white"
w={'18px'} w={'18px'}
h={'18px'} h={'18px'}
...@@ -195,7 +196,7 @@ const ModelEditForm = ({ ...@@ -195,7 +196,7 @@ const ModelEditForm = ({
{getValues('chat.temperature')} {getValues('chat.temperature')}
</SliderMark> </SliderMark>
<SliderTrack> <SliderTrack>
<SliderFilledTrack /> <SliderFilledTrack bg={'myBlue.700'} />
</SliderTrack> </SliderTrack>
<SliderThumb /> <SliderThumb />
</Slider> </Slider>
......
src/pages/model/detail/components/SelectCsvModal.tsx → src/pages/model/components/detail/components/SelectCsvModal.tsx
...@@ -97,7 +97,7 @@ const SelectJsonModal = ({ ...@@ -97,7 +97,7 @@ const SelectJsonModal = ({
my={3} my={3}
cursor={'pointer'} cursor={'pointer'}
textDecoration={'underline'} textDecoration={'underline'}
color={'blue.600'} color={'myBlue.600'}
onClick={() => onClick={() =>
fileDownload({ fileDownload({
text: csvTemplate, text: csvTemplate,
......
src/pages/model/detail/index.tsx → src/pages/model/components/detail/index.tsx
import React, { useCallback, useState, useMemo, useEffect } from 'react'; import React, { useCallback, useState, useMemo, useEffect } from 'react';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { getModelById, delModelById, putModelById } from '@/api/model'; import { delModelById, putModelById } from '@/api/model';
import type { ModelSchema } from '@/types/mongoSchema'; import type { ModelSchema } from '@/types/mongoSchema';
import { Card, Box, Flex, Button, Tag, Grid } from '@chakra-ui/react'; import { Card, Box, Flex, Button, Tag, Grid } from '@chakra-ui/react';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { formatModelStatus, defaultModel } from '@/constants/model'; import { formatModelStatus } from '@/constants/model';
import { useGlobalStore } from '@/store/global';
import { useScreen } from '@/hooks/useScreen';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import dynamic from 'next/dynamic';
import { useUserStore } from '@/store/user'; import { useUserStore } from '@/store/user';
import { useLoading } from '@/hooks/useLoading';
import ModelEditForm from './components/ModelEditForm';
import ModelDataCard from './components/ModelDataCard';
const ModelEditForm = dynamic(() => import('./components/ModelEditForm')); const ModelDetail = ({ modelId, isPc }: { modelId: string; isPc: boolean }) => {
const ModelDataCard = dynamic(() => import('./components/ModelDataCard'));
const ModelDetail = ({ modelId }: { modelId: string }) => {
const { toast } = useToast(); const { toast } = useToast();
const router = useRouter(); const router = useRouter();
const { isPc } = useScreen(); const { userInfo, modelDetail, loadModelDetail, refreshModel, setLastModelId } = useUserStore();
const { userInfo } = useUserStore(); const { Loading, setIsLoading } = useLoading();
const { setLoading } = useGlobalStore(); const [btnLoading, setBtnLoading] = useState(false);
const [model, setModel] = useState<ModelSchema>(defaultModel);
const formHooks = useForm<ModelSchema>({ const formHooks = useForm<ModelSchema>({
defaultValues: model defaultValues: modelDetail
}); });
const isOwner = useMemo(() => model.userId === userInfo?._id, [model.userId, userInfo?._id]); // load model data
const { isLoading } = useQuery([modelId], () => loadModelDetail(modelId), {
/* 加载模型数据 */ onSuccess(res) {
const loadModel = useCallback(async () => { res && formHooks.reset(res);
setLoading(true); modelId && setLastModelId(modelId);
try { },
const res = await getModelById(modelId); onError(err: any) {
setModel(res);
formHooks.reset(res);
} catch (err: any) {
toast({ toast({
title: err?.message || '获取模型异常', title: err?.message || '获取模型异常',
status: 'error' status: 'error'
}); });
setLastModelId('');
refreshModel.freshMyModels();
router.replace('/model');
} }
setLoading(false); });
return null;
}, [formHooks, modelId, setLoading, toast]);
useQuery([modelId], loadModel); const isOwner = useMemo(
() => modelDetail.userId === userInfo?._id,
[modelDetail.userId, userInfo?._id]
);
/* 点击删除 */ /* 点击删除 */
const handleDelModel = useCallback(async () => { const handleDelModel = useCallback(async () => {
if (!model) return; if (!modelDetail) return;
setLoading(true); setIsLoading(true);
try { try {
await delModelById(model._id); await delModelById(modelDetail._id);
toast({ toast({
title: '删除成功', title: '删除成功',
status: 'success' status: 'success'
}); });
router.replace('/model/list'); refreshModel.removeModelDetail(modelDetail._id);
router.replace('/model');
} catch (err: any) { } catch (err: any) {
toast({ toast({
title: err?.message || '删除失败', title: err?.message || '删除失败',
status: 'error' status: 'error'
}); });
} }
setLoading(false); setIsLoading(false);
}, [setLoading, model, router, toast]); }, [modelDetail, setIsLoading, toast, refreshModel, router]);
/* 点前往聊天预览页 */ /* 点前往聊天预览页 */
const handlePreviewChat = useCallback(async () => { const handlePreviewChat = useCallback(async () => {
...@@ -76,7 +74,7 @@ const ModelDetail = ({ modelId }: { modelId: string }) => { ...@@ -76,7 +74,7 @@ const ModelDetail = ({ modelId }: { modelId: string }) => {
// 提交保存模型修改 // 提交保存模型修改
const saveSubmitSuccess = useCallback( const saveSubmitSuccess = useCallback(
async (data: ModelSchema) => { async (data: ModelSchema) => {
setLoading(true); setBtnLoading(true);
try { try {
await putModelById(data._id, { await putModelById(data._id, {
name: data.name, name: data.name,
...@@ -89,15 +87,16 @@ const ModelDetail = ({ modelId }: { modelId: string }) => { ...@@ -89,15 +87,16 @@ const ModelDetail = ({ modelId }: { modelId: string }) => {
title: '更新成功', title: '更新成功',
status: 'success' status: 'success'
}); });
refreshModel.updateModelDetail(data);
} catch (err: any) { } catch (err: any) {
toast({ toast({
title: err?.message || '更新失败', title: err?.message || '更新失败',
status: 'error' status: 'error'
}); });
} }
setLoading(false); setBtnLoading(false);
}, },
[setLoading, toast] [refreshModel, toast]
); );
// 提交保存表单失败 // 提交保存表单失败
const saveSubmitError = useCallback(() => { const saveSubmitError = useCallback(() => {
...@@ -131,23 +130,31 @@ const ModelDetail = ({ modelId }: { modelId: string }) => { ...@@ -131,23 +130,31 @@ const ModelDetail = ({ modelId }: { modelId: string }) => {
}, [router]); }, [router]);
return ( return (
<> <Box h={'100%'} p={5} overflow={'overlay'} position={'relative'}>
{/* 头部 */} {/* 头部 */}
<Card px={6} py={3}> <Card px={6} py={3}>
{isPc ? ( {isPc ? (
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<Box fontSize={'xl'} fontWeight={'bold'}> <Box fontSize={'xl'} fontWeight={'bold'}>
{model.name} {modelDetail.name}
</Box> </Box>
<Tag ml={2} variant="solid" colorScheme={formatModelStatus[model.status].colorTheme}> <Tag
{formatModelStatus[model.status].text} ml={2}
variant="solid"
colorScheme={formatModelStatus[modelDetail.status].colorTheme}
>
{formatModelStatus[modelDetail.status].text}
</Tag> </Tag>
<Box flex={1} /> <Box flex={1} />
<Button variant={'outline'} onClick={handlePreviewChat}> <Button variant={'outline'} onClick={handlePreviewChat}>
对话体验 开始对话
</Button> </Button>
{isOwner && ( {isOwner && (
<Button ml={4} onClick={formHooks.handleSubmit(saveSubmitSuccess, saveSubmitError)}> <Button
isLoading={btnLoading}
ml={4}
onClick={formHooks.handleSubmit(saveSubmitSuccess, saveSubmitError)}
>
保存修改 保存修改
</Button> </Button>
)} )}
...@@ -156,20 +163,21 @@ const ModelDetail = ({ modelId }: { modelId: string }) => { ...@@ -156,20 +163,21 @@ const ModelDetail = ({ modelId }: { modelId: string }) => {
<> <>
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<Box as={'h3'} fontSize={'xl'} fontWeight={'bold'} flex={1}> <Box as={'h3'} fontSize={'xl'} fontWeight={'bold'} flex={1}>
{model?.name} {modelDetail.name}
</Box> </Box>
<Tag ml={2} colorScheme={formatModelStatus[model.status].colorTheme}> <Tag ml={2} colorScheme={formatModelStatus[modelDetail.status].colorTheme}>
{formatModelStatus[model.status].text} {formatModelStatus[modelDetail.status].text}
</Tag> </Tag>
</Flex> </Flex>
<Box mt={4} textAlign={'right'}> <Box mt={4} textAlign={'right'}>
<Button variant={'outline'} size={'sm'} onClick={handlePreviewChat}> <Button variant={'outline'} size={'sm'} onClick={handlePreviewChat}>
对话体验 开始对话
</Button> </Button>
{isOwner && ( {isOwner && (
<Button <Button
ml={4} ml={4}
size={'sm'} size={'sm'}
isLoading={btnLoading}
onClick={formHooks.handleSubmit(saveSubmitSuccess, saveSubmitError)} onClick={formHooks.handleSubmit(saveSubmitSuccess, saveSubmitError)}
> >
保存修改 保存修改
...@@ -182,22 +190,13 @@ const ModelDetail = ({ modelId }: { modelId: string }) => { ...@@ -182,22 +190,13 @@ const ModelDetail = ({ modelId }: { modelId: string }) => {
<Grid mt={5} gridTemplateColumns={['1fr', '1fr 1fr']} gridGap={5}> <Grid mt={5} gridTemplateColumns={['1fr', '1fr 1fr']} gridGap={5}>
<ModelEditForm formHooks={formHooks} handleDelModel={handleDelModel} isOwner={isOwner} /> <ModelEditForm formHooks={formHooks} handleDelModel={handleDelModel} isOwner={isOwner} />
{modelId && (
<Card p={4} gridColumnStart={[1, 1]} gridColumnEnd={[2, 3]}> <Card p={4} gridColumnStart={[1, 1]} gridColumnEnd={[2, 3]}>
<ModelDataCard modelId={modelId} isOwner={isOwner} /> <ModelDataCard modelId={modelId} isOwner={isOwner} />
</Card> </Card>
)}
</Grid> </Grid>
</> <Loading loading={isLoading} fixed={false} />
</Box>
); );
}; };
export default ModelDetail; export default ModelDetail;
export async function getServerSideProps(context: any) {
const modelId = context.query?.modelId || '';
return {
props: { modelId }
};
}
src/pages/model/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { Box, Flex } from '@chakra-ui/react';
import { useScreen } from '@/hooks/useScreen';
import { useRouter } from 'next/router';
import ModelList from './components/ModelList';
import dynamic from 'next/dynamic';
import { useUserStore } from '@/store/user';
const ModelDetail = dynamic(() => import('./components/detail/index'));
const Model = ({ modelId, isPcDevice }: { modelId: string; isPcDevice: boolean }) => {
const router = useRouter();
const { isPc } = useScreen({
defaultIsPc: isPcDevice
});
const { lastModelId } = useUserStore();
// redirect modelId
useEffect(() => {
if (isPc && !modelId && lastModelId) {
router.replace(`/model?modelId=${lastModelId}`);
}
}, [isPc, lastModelId, modelId, router]);
return (
<Flex h={'100%'} position={'relative'}>
{/* 模型列表 */}
{(isPc || !modelId) && (
<Box w={['100%', '250px']}>
<ModelList modelId={modelId} />
</Box>
)}
<Box flex={1} h={'100%'}>
{modelId && <ModelDetail modelId={modelId} isPc={isPc} />}
</Box>
</Flex>
);
};
export default Model;
Model.getInitialProps = ({ query, req }: any) => {
return {
modelId: query?.modelId || '',
isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
};
};
src/pages/model/list/components/ModelPhoneList.tsx deleted 100644 → 0
import React, { useEffect } from 'react';
import { Box, Button, Flex, Tag } from '@chakra-ui/react';
import type { ModelSchema } from '@/types/mongoSchema';
import { formatModelStatus } from '@/constants/model';
import { useRouter } from 'next/router';
import { ChatModelMap } from '@/constants/model';
const ModelPhoneList = ({
models,
handlePreviewChat
}: {
models: ModelSchema[];
handlePreviewChat: (_: string) => void;
}) => {
const router = useRouter();
useEffect(() => {
router.prefetch('/chat');
}, [router]);
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'}>{ChatModelMap[model.chat.chatModel].name}</Box>
</Flex>
<Flex mt={5}>
<Box flex={'0 0 100px'}>模型温度: </Box>
<Box color={'blackAlpha.500'}>{model.chat.temperature}</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/list/components/ModelTable.tsx deleted 100644 → 0
import { useEffect } from 'react';
import {
Button,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Tag,
Card,
Box
} from '@chakra-ui/react';
import { formatModelStatus } from '@/constants/model';
import type { ModelSchema } from '@/types/mongoSchema';
import { useRouter } from 'next/router';
import { ChatModelMap } from '@/constants/model';
const ModelTable = ({
models = [],
handlePreviewChat
}: {
models: ModelSchema[];
handlePreviewChat: (_: string) => void;
}) => {
const router = useRouter();
const columns = [
{
title: '模型名',
key: 'name',
dataIndex: 'name'
},
{
title: '对话模型',
key: 'service',
render: (model: ModelSchema) => (
<Box fontWeight={'bold'} whiteSpace={'pre-wrap'} maxW={'200px'}>
{ChatModelMap[model.chat.chatModel].name}
</Box>
)
},
{
title: '温度',
key: 'temperature',
render: (model: ModelSchema) => <>{model.chat.temperature}</>
},
{
title: '状态',
key: 'status',
dataIndex: 'status',
render: (item: ModelSchema) => (
<Tag
colorScheme={formatModelStatus[item.status]?.colorTheme}
variant="solid"
px={3}
size={'md'}
>
{formatModelStatus[item.status]?.text}
</Tag>
)
},
{
title: '操作',
key: 'control',
render: (item: ModelSchema) => (
<>
<Button mr={3} onClick={() => handlePreviewChat(item._id)}>
对话
</Button>
<Button
variant={'outline'}
onClick={() => router.push(`/model/detail?modelId=${item._id}`)}
>
编辑
</Button>
</>
)
}
];
useEffect(() => {
router.prefetch('/chat');
}, [router]);
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/list/index.tsx deleted 100644 → 0
import React, { useCallback } from 'react';
import { Box, Button, Flex, Card } from '@chakra-ui/react';
import type { ModelSchema } from '@/types/mongoSchema';
import { useRouter } from 'next/router';
import ModelTable from './components/ModelTable';
import ModelPhoneList from './components/ModelPhoneList';
import { useScreen } from '@/hooks/useScreen';
import { useQuery } from '@tanstack/react-query';
import { useLoading } from '@/hooks/useLoading';
import { useToast } from '@/hooks/useToast';
import { useUserStore } from '@/store/user';
import { postCreateModel } from '@/api/model';
const modelList = () => {
const { toast } = useToast();
const { isPc } = useScreen();
const router = useRouter();
const { myModels, getMyModels } = useUserStore();
const { Loading, setIsLoading } = useLoading();
/* 加载模型 */
const { isLoading } = useQuery(['loadModels'], getMyModels);
const handleCreateModel = useCallback(async () => {
setIsLoading(true);
try {
const id = await postCreateModel({ name: `模型${myModels.length}` });
toast({
title: '创建成功',
status: 'success'
});
router.push(`/model/detail?modelId=${id}`);
} catch (err: any) {
toast({
title: typeof err === 'string' ? err : err.message || '出现了意外',
status: 'error'
});
}
setIsLoading(false);
}, [myModels.length, router, setIsLoading, toast]);
/* 点前往聊天预览页 */
const handlePreviewChat = useCallback(
async (modelId: string) => {
setIsLoading(true);
try {
router.push(`/chat?modelId=${modelId}`, undefined, {
shallow: true
});
} catch (err: any) {
console.log('error->', err);
toast({
title: err.message || '出现一些异常',
status: 'error'
});
}
setIsLoading(false);
},
[router, setIsLoading, toast]
);
return (
<Box position={'relative'}>
{/* 头部 */}
<Card px={6} py={3}>
<Flex alignItems={'center'} justifyContent={'space-between'}>
<Box fontWeight={'bold'} fontSize={'xl'}>
模型列表
</Box>
<Button flex={'0 0 145px'} variant={'outline'} onClick={handleCreateModel}>
新建模型
</Button>
</Flex>
</Card>
{/* 表单 */}
<Box mt={5} position={'relative'}>
{isPc ? (
<ModelTable models={myModels} handlePreviewChat={handlePreviewChat} />
) : (
<ModelPhoneList models={myModels} handlePreviewChat={handlePreviewChat} />
)}
</Box>
<Loading loading={isLoading} />
</Box>
);
};
export default modelList;
src/pages/model/share/components/list.tsx
...@@ -44,7 +44,7 @@ const ShareModelList = ({ ...@@ -44,7 +44,7 @@ const ShareModelList = ({
<Flex <Flex
alignItems={'center'} alignItems={'center'}
cursor={'pointer'} cursor={'pointer'}
color={model.isCollection ? 'blue.600' : 'alphaBlack.700'} color={model.isCollection ? 'myBlue.700' : 'blackAlpha.700'}
onClick={() => onclickCollection(model._id)} onClick={() => onclickCollection(model._id)}
> >
<MyIcon <MyIcon
...@@ -58,7 +58,7 @@ const ShareModelList = ({ ...@@ -58,7 +58,7 @@ const ShareModelList = ({
<Button <Button
size={'sm'} size={'sm'}
variant={'outline'} variant={'outline'}
w={'80px'} w={['60px', '80px']}
onClick={() => router.push(`/chat?modelId=${model._id}`)} onClick={() => router.push(`/chat?modelId=${model._id}`)}
> >
体验 体验
...@@ -67,8 +67,8 @@ const ShareModelList = ({ ...@@ -67,8 +67,8 @@ const ShareModelList = ({
<Button <Button
ml={4} ml={4}
size={'sm'} size={'sm'}
w={'80px'} w={['60px', '80px']}
onClick={() => router.push(`/model/detail?modelId=${model._id}`)} onClick={() => router.push(`/model?modelId=${model._id}`)}
> >
详情 详情
</Button> </Button>
......
src/pages/model/share/index.tsx
...@@ -4,7 +4,7 @@ import { useLoading } from '@/hooks/useLoading'; ...@@ -4,7 +4,7 @@ import { useLoading } from '@/hooks/useLoading';
import { getShareModelList, triggerModelCollection, getCollectionModels } from '@/api/model'; import { getShareModelList, triggerModelCollection, getCollectionModels } from '@/api/model';
import { usePagination } from '@/hooks/usePagination'; import { usePagination } from '@/hooks/usePagination';
import type { ShareModelItem } from '@/types/model'; import type { ShareModelItem } from '@/types/model';
import { useUserStore } from '@/store/user';
import ShareModelList from './components/list'; import ShareModelList from './components/list';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
...@@ -12,6 +12,7 @@ const modelList = () => { ...@@ -12,6 +12,7 @@ const modelList = () => {
const { Loading } = useLoading(); const { Loading } = useLoading();
const lastSearch = useRef(''); const lastSearch = useRef('');
const [searchText, setSearchText] = useState(''); const [searchText, setSearchText] = useState('');
const { refreshModel } = useUserStore();
/* 加载模型 */ /* 加载模型 */
const { data, isLoading, Pagination, getData, pageNum } = usePagination<ShareModelItem>({ const { data, isLoading, Pagination, getData, pageNum } = usePagination<ShareModelItem>({
...@@ -41,15 +42,16 @@ const modelList = () => { ...@@ -41,15 +42,16 @@ const modelList = () => {
await triggerModelCollection(modelId); await triggerModelCollection(modelId);
getData(pageNum); getData(pageNum);
refetchCollection(); refetchCollection();
refreshModel.removeModelDetail(modelId);
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
}, },
[getData, pageNum, refetchCollection] [getData, pageNum, refetchCollection, refreshModel]
); );
return ( return (
<> <Box py={[5, 10]} px={'5vw'}>
<Card px={6} py={3}> <Card px={6} py={3}>
<Flex alignItems={'center'} justifyContent={'space-between'}> <Flex alignItems={'center'} justifyContent={'space-between'}>
<Box fontWeight={'bold'} fontSize={'xl'}> <Box fontWeight={'bold'} fontSize={'xl'}>
...@@ -105,7 +107,7 @@ const modelList = () => { ...@@ -105,7 +107,7 @@ const modelList = () => {
</Card> </Card>
<Loading loading={isLoading} /> <Loading loading={isLoading} />
</> </Box>
); );
}; };
......
src/pages/number/components/PayModal.tsx
...@@ -119,7 +119,7 @@ const PayModal = ({ onClose }: { onClose: () => void }) => { ...@@ -119,7 +119,7 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
<ModalFooter> <ModalFooter>
{!payId && ( {!payId && (
<> <>
<Button colorScheme={'gray'} onClick={onClose}> <Button variant={'outline'} onClick={onClose}>
取消 取消
</Button> </Button>
<Button <Button
......
src/pages/number/setting.tsx → src/pages/number/index.tsx
import React, { useCallback, useState } from 'react'; import React, { useCallback, useState } from 'react';
import { Card, Box, Flex, Button, Input } from '@chakra-ui/react'; import { Card, Box, Flex, Button, Input, Image } from '@chakra-ui/react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { UserUpdateParams } from '@/types/user'; import { UserUpdateParams } from '@/types/user';
import { putUserInfo } from '@/api/user'; import { putUserInfo } from '@/api/user';
...@@ -11,6 +11,8 @@ import { clearToken } from '@/utils/user'; ...@@ -11,6 +11,8 @@ import { clearToken } from '@/utils/user';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useSelectFile } from '@/hooks/useSelectFile';
import { compressImg } from '@/utils/file';
const PayRecordTable = dynamic(() => import('./components/PayRecordTable')); const PayRecordTable = dynamic(() => import('./components/PayRecordTable'));
const BilTable = dynamic(() => import('./components/BillTable')); const BilTable = dynamic(() => import('./components/BillTable'));
...@@ -26,6 +28,11 @@ const NumberSetting = () => { ...@@ -26,6 +28,11 @@ const NumberSetting = () => {
const [showPay, setShowPay] = useState(false); const [showPay, setShowPay] = useState(false);
const { toast } = useToast(); const { toast } = useToast();
const { File, onOpen: onOpenSelectFile } = useSelectFile({
fileType: '.jpg,.png',
multiple: false
});
const onclickSave = useCallback( const onclickSave = useCallback(
async (data: UserUpdateParams) => { async (data: UserUpdateParams) => {
if (data.openaiKey === userInfo?.openaiKey) return; if (data.openaiKey === userInfo?.openaiKey) return;
...@@ -43,7 +50,28 @@ const NumberSetting = () => { ...@@ -43,7 +50,28 @@ const NumberSetting = () => {
[setLoading, toast, updateUserInfo, userInfo?.openaiKey] [setLoading, toast, updateUserInfo, userInfo?.openaiKey]
); );
useQuery(['init'], initUserInfo); const onSelectFile = useCallback(
async (e: File[]) => {
const file = e[0];
if (!file) return;
try {
const base64 = await compressImg({
file,
maxW: 40,
maxH: 60
});
onclickSave({
avatar: base64
});
} catch (err: any) {
toast({
title: typeof err === 'string' ? err : '头像选择异常',
status: 'warning'
});
}
},
[onclickSave, toast]
);
const onclickLogOut = useCallback(() => { const onclickLogOut = useCallback(() => {
clearToken(); clearToken();
...@@ -51,8 +79,10 @@ const NumberSetting = () => { ...@@ -51,8 +79,10 @@ const NumberSetting = () => {
router.replace('/login'); router.replace('/login');
}, [router, setUserInfo]); }, [router, setUserInfo]);
useQuery(['init'], initUserInfo);
return ( return (
<> <Box py={[5, 10]} px={'5vw'}>
{/* 核心信息 */} {/* 核心信息 */}
<Card px={6} py={4}> <Card px={6} py={4}>
<Flex justifyContent={'space-between'}> <Flex justifyContent={'space-between'}>
...@@ -64,16 +94,34 @@ const NumberSetting = () => { ...@@ -64,16 +94,34 @@ const NumberSetting = () => {
</Button> </Button>
</Flex> </Flex>
<Flex mt={6} alignItems={'center'}> <Flex mt={6} alignItems={'center'}>
<Box flex={'0 0 60px'}>账号:</Box> <Box flex={'0 0 50px'}>头像:</Box>
<Image
src={userInfo?.avatar}
alt={'avatar'}
w={['28px', '36px']}
h={['28px', '36px']}
objectFit={'cover'}
cursor={'pointer'}
title={'点击切换头像'}
onClick={onOpenSelectFile}
/>
</Flex>
<Flex mt={6} alignItems={'center'}>
<Box flex={'0 0 50px'}>账号:</Box>
<Box>{userInfo?.username}</Box> <Box>{userInfo?.username}</Box>
</Flex> </Flex>
<Box mt={6}> <Box mt={6}>
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<Box flex={'0 0 60px'}>余额:</Box> <Box flex={'0 0 50px'}>余额:</Box>
<Box> <Box>
<strong>{userInfo?.balance}</strong> 元 <strong>{userInfo?.balance}</strong> 元
</Box> </Box>
<Button size={'sm'} w={'80px'} ml={5} onClick={() => setShowPay(true)}> <Button
size={['xs', 'sm']}
w={['70px', '80px']}
ml={5}
onClick={() => setShowPay(true)}
>
充值 充值
</Button> </Button>
</Flex> </Flex>
...@@ -98,12 +146,13 @@ const NumberSetting = () => { ...@@ -98,12 +146,13 @@ const NumberSetting = () => {
</Flex> </Flex>
</Card> </Card>
<File onSelect={onSelectFile} />
{/* 充值记录 */} {/* 充值记录 */}
<PayRecordTable /> <PayRecordTable />
{/* 账单表 */} {/* 账单表 */}
<BilTable /> <BilTable />
{showPay && <PayModal onClose={() => setShowPay(false)} />} {showPay && <PayModal onClose={() => setShowPay(false)} />}
</> </Box>
); );
}; };
......
src/pages/openapi/index.tsx
...@@ -51,7 +51,7 @@ const OpenApi = () => { ...@@ -51,7 +51,7 @@ const OpenApi = () => {
}); });
return ( return (
<> <Box py={[5, 10]} px={'5vw'}>
<Card px={6} py={4} position={'relative'}> <Card px={6} py={4} position={'relative'}>
<Box fontSize={'xl'} fontWeight={'bold'}> <Box fontSize={'xl'} fontWeight={'bold'}>
FastGpt Api FastGpt Api
...@@ -65,7 +65,7 @@ const OpenApi = () => { ...@@ -65,7 +65,7 @@ const OpenApi = () => {
my={1} my={1}
as="a" as="a"
href="https://kjqvjse66l.feishu.cn/docx/DmLedTWtUoNGX8xui9ocdUEjnNh" href="https://kjqvjse66l.feishu.cn/docx/DmLedTWtUoNGX8xui9ocdUEjnNh"
color={'blue.800'} color={'myBlue.800'}
textDecoration={'underline'} textDecoration={'underline'}
target={'_blank'} target={'_blank'}
> >
...@@ -131,7 +131,7 @@ const OpenApi = () => { ...@@ -131,7 +131,7 @@ const OpenApi = () => {
</ModalBody> </ModalBody>
</ModalContent> </ModalContent>
</Modal> </Modal>
</> </Box>
); );
}; };
......
src/pages/promotion/index.tsx
...@@ -61,7 +61,7 @@ const OpenApi = () => { ...@@ -61,7 +61,7 @@ const OpenApi = () => {
}); });
return ( return (
<> <Box py={[5, 10]} px={'5vw'}>
<Card px={6} py={4} position={'relative'}> <Card px={6} py={4} position={'relative'}>
<Box fontSize={'xl'} fontWeight={'bold'}> <Box fontSize={'xl'} fontWeight={'bold'}>
我的邀请 我的邀请
...@@ -172,7 +172,7 @@ const OpenApi = () => { ...@@ -172,7 +172,7 @@ const OpenApi = () => {
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
</> </Box>
); );
}; };
......
src/pages/tools/index.tsx 0 → 100644
import React from 'react';
import { Box, Flex } from '@chakra-ui/react';
import { ChevronRightIcon } from '@chakra-ui/icons';
import MyIcon from '@/components/Icon';
import { useRouter } from 'next/router';
const list = [
{
icon: 'shareMarket',
label: '模型共享市场',
link: '/model/share'
},
{
icon: 'promotion',
label: '邀请好友',
link: '/promotion'
},
{
icon: 'develop',
label: '开发',
link: '/openapi'
}
];
const Tools = () => {
const router = useRouter();
return (
<Box px={'5vw'}>
{list.map((item) => (
<Flex
key={item.link}
alignItems={'center'}
px={5}
py={4}
bg={'white'}
mt={5}
borderRadius={'md'}
onClick={() => router.push(item.link)}
>
<MyIcon name={item.icon as any} w={'22px'} />
<Box ml={4} flex={1}>
{item.label}
</Box>
<ChevronRightIcon fontSize={'20px'} color={'myGray.600'} />
</Flex>
))}
</Box>
);
};
export default Tools;
src/service/errorCode.ts
...@@ -13,10 +13,8 @@ export const ERROR_CODE: { [key: number]: string } = { ...@@ -13,10 +13,8 @@ export const ERROR_CODE: { [key: number]: string } = {
504: '网关超时' 504: '网关超时'
}; };
export const TOKEN_ERROR_CODE: { [key: number]: string } = { export const TOKEN_ERROR_CODE: Record<number, string> = {
506: '请先登录', 403: '登录状态无效,请重新登录'
507: '请重新登录',
508: '登录已过期'
}; };
export const openaiError: Record<string, string> = { export const openaiError: Record<string, string> = {
......
src/service/models/chat.ts
...@@ -31,6 +31,10 @@ const ChatSchema = new Schema({ ...@@ -31,6 +31,10 @@ const ChatSchema = new Schema({
type: String, type: String,
default: '历史记录' default: '历史记录'
}, },
latestChat: {
type: String,
default: ''
},
content: { content: {
type: [ type: [
{ {
......
src/service/models/user.ts
...@@ -16,6 +16,10 @@ const UserSchema = new Schema({ ...@@ -16,6 +16,10 @@ const UserSchema = new Schema({
get: (val: string) => hashPassword(val), get: (val: string) => hashPassword(val),
select: false select: false
}, },
avatar: {
type: String,
default: '/icon/human.png'
},
balance: { balance: {
// 平台余额，不可提现 // 平台余额，不可提现
type: Number, type: Number,
......
src/service/response.ts
import { NextApiResponse } from 'next'; import { NextApiResponse } from 'next';
import { openaiError, openaiError2, proxyError, ERROR_RESPONSE } from './errorCode'; import { openaiError, openaiError2, proxyError, ERROR_RESPONSE, ERROR_ENUM } from './errorCode';
export interface ResponseType<T = any> { export interface ResponseType<T = any> {
code: number; code: number;
...@@ -21,6 +21,11 @@ export const jsonRes = <T = any>( ...@@ -21,6 +21,11 @@ export const jsonRes = <T = any>(
const errResponseKey = typeof error === 'string' ? error : error?.message; const errResponseKey = typeof error === 'string' ? error : error?.message;
// Specified error // Specified error
if (ERROR_RESPONSE[errResponseKey]) { if (ERROR_RESPONSE[errResponseKey]) {
// login is expired
if (errResponseKey === ERROR_ENUM.unAuthorization) {
res.setHeader('Set-Cookie', 'token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT');
}
return res.json(ERROR_RESPONSE[errResponseKey]); return res.json(ERROR_RESPONSE[errResponseKey]);
} }
......
src/service/utils/auth.ts
import type { NextApiRequest } from 'next'; import type { NextApiRequest } from 'next';
import jwt from 'jsonwebtoken'; import jwt from 'jsonwebtoken';
import cookie from 'cookie';
import { Chat, Model, OpenApi, User } from '../mongo'; import { Chat, Model, OpenApi, User } from '../mongo';
import type { ModelSchema } from '@/types/mongoSchema'; import type { ModelSchema } from '@/types/mongoSchema';
import type { ChatItemSimpleType } from '@/types/chat'; import type { ChatItemSimpleType } from '@/types/chat';
...@@ -10,17 +11,21 @@ import { ERROR_ENUM } from '../errorCode'; ...@@ -10,17 +11,21 @@ import { ERROR_ENUM } from '../errorCode';
import { ChatModelType, OpenAiChatEnum } from '@/constants/model'; import { ChatModelType, OpenAiChatEnum } from '@/constants/model';
/* 校验 token */ /* 校验 token */
export const authToken = (token?: string): Promise<string> => { export const authToken = (req: NextApiRequest): Promise<string> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// 获取 cookie
const cookies = cookie.parse(req.headers.cookie || '');
const token = cookies.token;
if (!token) { if (!token) {
reject('缺少登录凭证'); return reject(ERROR_ENUM.unAuthorization);
return;
} }
const key = process.env.TOKEN_KEY as string; const key = process.env.TOKEN_KEY as string;
jwt.verify(token, key, function (err, decoded: any) { jwt.verify(token, key, function (err, decoded: any) {
if (err || !decoded?.userId) { if (err || !decoded?.userId) {
reject('凭证无效'); reject(ERROR_ENUM.unAuthorization);
return; return;
} }
resolve(decoded.userId); resolve(decoded.userId);
...@@ -127,13 +132,13 @@ export const authModel = async ({ ...@@ -127,13 +132,13 @@ export const authModel = async ({
export const authChat = async ({ export const authChat = async ({
modelId, modelId,
chatId, chatId,
authorization req
}: { }: {
modelId: string; modelId: string;
chatId: '' | string; chatId: '' | string;
authorization?: string; req: NextApiRequest;
}) => { }) => {
const userId = await authToken(authorization); const userId = await authToken(req);
// 获取 model 数据 // 获取 model 数据
const { model, showModelDetail } = await authModel({ const { model, showModelDetail } = await authModel({
......
src/store/chat.ts 0 → 100644
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
import { OpenAiChatEnum } from '@/constants/model';
import { HistoryItemType, ChatType } from '@/types/chat';
import { getChatHistory } from '@/api/chat';
type State = {
history: HistoryItemType[];
loadHistory: (data: { pageNum: number; init?: boolean }) => Promise<null>;
forbidLoadChatData: boolean;
setForbidLoadChatData: (val: boolean) => void;
chatData: ChatType;
setChatData: (e?: ChatType | ((e: ChatType) => ChatType)) => void;
lastChatModelId: string;
setLastChatModelId: (id: string) => void;
lastChatId: string;
setLastChatId: (id: string) => void;
};
const defaultChatData = {
chatId: 'chatId',
modelId: 'modelId',
model: {
name: '',
avatar: '/icon/logo.png',
intro: '',
canUse: false
},
chatModel: OpenAiChatEnum.GPT35,
history: []
};
export const useChatStore = create<State>()(
devtools(
persist(
immer((set, get) => ({
lastChatModelId: '',
setLastChatModelId(id: string) {
set((state) => {
state.lastChatModelId = id;
});
},
lastChatId: '',
setLastChatId(id: string) {
set((state) => {
state.lastChatId = id;
});
},
history: [],
async loadHistory({ pageNum, init = false }: { pageNum: number; init?: boolean }) {
if (get().history.length > 0 && !init) return null;
const data = await getChatHistory({
pageNum,
pageSize: 20
});
set((state) => {
state.history = data;
});
return null;
},
forbidLoadChatData: false,
setForbidLoadChatData(val: boolean) {
set((state) => {
state.forbidLoadChatData = val;
});
},
chatData: defaultChatData,
setChatData(e: ChatType | ((e: ChatType) => ChatType) = defaultChatData) {
if (typeof e === 'function') {
set((state) => {
state.chatData = e(state.chatData);
});
} else {
set((state) => {
state.chatData = e;
});
}
}
})),
{
name: 'globalStore',
partialize: (state) => ({
lastChatModelId: state.lastChatModelId,
lastChatId: state.lastChatId
})
}
)
)
);
src/store/user.ts
import { create } from 'zustand'; import { create } from 'zustand';
import { devtools } from 'zustand/middleware'; import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer'; import { immer } from 'zustand/middleware/immer';
import type { UserType, UserUpdateParams } from '@/types/user'; import type { UserType, UserUpdateParams } from '@/types/user';
import type { ModelSchema } from '@/types/mongoSchema'; import type { ModelSchema } from '@/types/mongoSchema';
import { setToken } from '@/utils/user'; import { getMyModels, getModelById } from '@/api/model';
import { getMyModels } from '@/api/model';
import { formatPrice } from '@/utils/user'; import { formatPrice } from '@/utils/user';
import { getTokenLogin } from '@/api/user'; import { getTokenLogin } from '@/api/user';
import { defaultModel } from '@/constants/model';
import { ModelListItemType } from '@/types/model';
type State = { type State = {
userInfo: UserType | null; userInfo: UserType | null;
initUserInfo: () => Promise<null>; initUserInfo: () => Promise<null>;
setUserInfo: (user: UserType | null, token?: string) => void; setUserInfo: (user: UserType | null) => void;
updateUserInfo: (user: UserUpdateParams) => void; updateUserInfo: (user: UserUpdateParams) => void;
myModels: ModelSchema[]; lastModelId: string;
getMyModels: () => void; setLastModelId: (id: string) => void;
setMyModels: (data: ModelSchema[]) => void; myModels: ModelListItemType[];
myCollectionModels: ModelListItemType[];
loadMyModels: (init?: boolean) => Promise<null>;
modelDetail: ModelSchema;
loadModelDetail: (id: string, init?: boolean) => Promise<ModelSchema>;
refreshModel: {
freshMyModels(): void;
updateModelDetail(model: ModelSchema): void;
removeModelDetail(modelId: string): void;
};
}; };
export const useUserStore = create<State>()( export const useUserStore = create<State>()(
devtools( devtools(
persist(
immer((set, get) => ({ immer((set, get) => ({
userInfo: null, userInfo: null,
async initUserInfo() { async initUserInfo() {
...@@ -27,7 +38,7 @@ export const useUserStore = create<State>()( ...@@ -27,7 +38,7 @@ export const useUserStore = create<State>()(
get().setUserInfo(res); get().setUserInfo(res);
return null; return null;
}, },
setUserInfo(user: UserType | null, token?: string) { setUserInfo(user: UserType | null) {
set((state) => { set((state) => {
state.userInfo = user state.userInfo = user
? { ? {
...@@ -36,7 +47,6 @@ export const useUserStore = create<State>()( ...@@ -36,7 +47,6 @@ export const useUserStore = create<State>()(
} }
: null; : null;
}); });
token && setToken(token);
}, },
updateUserInfo(user: UserUpdateParams) { updateUserInfo(user: UserUpdateParams) {
set((state) => { set((state) => {
...@@ -47,20 +57,60 @@ export const useUserStore = create<State>()( ...@@ -47,20 +57,60 @@ export const useUserStore = create<State>()(
}; };
}); });
}, },
lastModelId: '',
setLastModelId(id: string) {
set((state) => {
state.lastModelId = id;
});
},
myModels: [], myModels: [],
getMyModels: () => myCollectionModels: [],
getMyModels().then((res) => { async loadMyModels(init = false) {
if (get().myModels.length > 0 && !init) return null;
const res = await getMyModels();
set((state) => {
state.myModels = res.myModels;
state.myCollectionModels = res.myCollectionModels;
});
return null;
},
modelDetail: defaultModel,
async loadModelDetail(id: string, init = false) {
if (id === get().modelDetail._id && !init) return get().modelDetail;
const res = await getModelById(id);
set((state) => { set((state) => {
state.myModels = res; state.modelDetail = res;
}); });
return res; return res;
}), },
setMyModels(data: ModelSchema[]) { refreshModel: {
freshMyModels() {
get().loadMyModels(true);
},
updateModelDetail(model: ModelSchema) {
set((state) => { set((state) => {
state.myModels = data; state.modelDetail = model;
});
get().loadMyModels(true);
},
removeModelDetail(modelId: string) {
if (modelId === get().modelDetail._id) {
set((state) => {
state.modelDetail = defaultModel;
state.lastModelId = '';
}); });
return null;
} }
})) get().loadMyModels(true);
}
}
})),
{
name: 'userStore',
partialize: (state) => ({
lastModelId: state.lastModelId
})
}
)
) )
); );
src/styles/reset.scss
...@@ -29,24 +29,35 @@ svg { ...@@ -29,24 +29,35 @@ svg {
height: 100%; height: 100%;
} }
::-webkit-scrollbar,
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 8px;
height: 10px; height: 8px;
} }
::-webkit-scrollbar-track,
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: transparent; background: transparent;
border-radius: 2px; border-radius: 2px;
} }
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #bfbfbf; background: rgba(189, 193, 197, 0.7);
border-radius: 10px; border-radius: 2px;
} }
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #999; background: rgba(189, 193, 197, 1);
}
div {
&::-webkit-scrollbar-thumb {
background: transparent !important;
transition: 1s;
}
&:hover {
&::-webkit-scrollbar-thumb {
background: rgba(189, 193, 197, 0.7) !important;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(189, 193, 197, 1) !important;
}
}
} }
input::placeholder, input::placeholder,
...@@ -54,16 +65,6 @@ textarea::placeholder { ...@@ -54,16 +65,6 @@ textarea::placeholder {
font-size: 0.85em; font-size: 0.85em;
} }
@media (max-width: 900px) {
html {
font-size: 14px;
}
::-webkit-scrollbar,
::-webkit-scrollbar {
width: 2px;
height: 2px;
}
}
.textEllipsis { .textEllipsis {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -75,3 +76,17 @@ textarea::placeholder { ...@@ -75,3 +76,17 @@ textarea::placeholder {
-webkit-focus-ring-color: rgba(0, 0, 0, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);
outline: none; outline: none;
} }
@media (max-width: 900px) {
html {
font-size: 14px;
}
::-webkit-scrollbar {
width: 2px;
height: 2px;
}
}
#nprogress .bar {
background: '#85b1ff' !important; //自定义颜色
}
src/types/chat.d.ts
import { ChatRoleEnum } from '@/constants/chat'; import { ChatRoleEnum } from '@/constants/chat';
import type { InitChatResponse } from '@/api/response/chat';
export type ExportChatType = 'md' | 'pdf' | 'html';
export type ChatItemSimpleType = { export type ChatItemSimpleType = {
obj: `${ChatRoleEnum}`; obj: `${ChatRoleEnum}`;
...@@ -8,3 +11,19 @@ export type ChatItemSimpleType = { ...@@ -8,3 +11,19 @@ export type ChatItemSimpleType = {
export type ChatItemType = { export type ChatItemType = {
_id: string; _id: string;
} & ChatItemSimpleType; } & ChatItemSimpleType;
export type ChatSiteItemType = {
status: 'loading' | 'finish';
} & ChatItemType;
export interface ChatType extends InitChatResponse {
history: ChatSiteItemType[];
}
export type HistoryItemType = {
_id: string;
updateTime: Date;
modelId: string;
title: string;
latestChat: string;
};
src/types/model.d.ts
import { ModelStatusEnum } from '@/constants/model'; import { ModelStatusEnum } from '@/constants/model';
import type { ModelSchema } from './mongoSchema'; import type { ModelSchema } from './mongoSchema';
export type ModelListItemType = {
_id: string;
name: string;
avatar: string;
systemPrompt: string;
};
export interface ModelUpdateParams { export interface ModelUpdateParams {
name: string; name: string;
avatar: string; avatar: string;
......
src/types/mongoSchema.d.ts
...@@ -11,6 +11,7 @@ export interface UserModelSchema { ...@@ -11,6 +11,7 @@ export interface UserModelSchema {
_id: string; _id: string;
username: string; username: string;
password: string; password: string;
avatar: string;
balance: number; balance: number;
inviterId?: string; inviterId?: string;
promotionAmount: number; promotionAmount: number;
......
src/types/user.d.ts
export interface UserType { export interface UserType {
_id: string; _id: string;
username: string; username: string;
avatar: string;
openaiKey: string; openaiKey: string;
balance: number; balance: number;
promotion: { promotion: {
...@@ -10,7 +11,8 @@ export interface UserType { ...@@ -10,7 +11,8 @@ export interface UserType {
export interface UserUpdateParams { export interface UserUpdateParams {
balance?: number; balance?: number;
openaiKey: string; avatar?: string;
openaiKey?: string;
} }
export interface UserBillType { export interface UserBillType {
......
src/utils/tools.ts
import crypto from 'crypto'; import crypto from 'crypto';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import dayjs from 'dayjs';
/** /**
* copy text data * copy text data
...@@ -51,3 +52,39 @@ export const Obj2Query = (obj: Record<string, string | number>) => { ...@@ -51,3 +52,39 @@ export const Obj2Query = (obj: Record<string, string | number>) => {
} }
return queryParams.toString(); return queryParams.toString();
}; };
/**
* 格式化时间成聊天格式
*/
export const formatTimeToChatTime = (time: Date) => {
const now = dayjs();
const target = dayjs(time);
// 如果传入时间小于60秒，返回刚刚
if (now.diff(target, 'second') < 60) {
return '刚刚';
}
// 如果时间是今天，展示几时:几秒
if (now.isSame(target, 'day')) {
return target.format('HH:mm');
}
// 如果是昨天，展示昨天
if (now.subtract(1, 'day').isSame(target, 'day')) {
return '昨天';
}
// 如果是前天，展示前天
if (now.subtract(2, 'day').isSame(target, 'day')) {
return '前天';
}
// 如果是今年，展示某月某日
if (now.isSame(target, 'year')) {
return target.format('M月D日');
}
// 如果是更久之前，展示某年某月某日
return target.format('YYYY/M/D');
};
src/utils/user.ts
import { PRICE_SCALE } from '@/constants/common'; import { PRICE_SCALE } from '@/constants/common';
const tokenKey = 'fast-gpt-token'; const tokenKey = 'fast-gpt-token';
export const setToken = (val: string) => {
localStorage.setItem(tokenKey, val);
};
export const getToken = () => {
return localStorage.getItem(tokenKey);
};
export const clearToken = () => { export const clearToken = () => {
localStorage.removeItem(tokenKey); document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}; };
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment