feat: new ui

2025-07-23 21:13:50 +00:00 · 2023-05-04 23:30:59 +08:00
parent 4d043e0e46
commit 014fb504a4
133 changed files with 2426 additions and 1696 deletions
--- a/README.md
+++ b/README.md
@@ -116,12 +116,20 @@ events {
 }

 http {
+    resolver 8.8.8.8;
+    proxy_ssl_server_name on;
+
    access_log off;
    server_names_hash_bucket_size 512;
-    client_header_buffer_size 32k;
-    large_client_header_buffers 4 32k;
+    client_header_buffer_size 64k;
+    large_client_header_buffers 4 64k;
    client_max_body_size 50M;

+    proxy_connect_timeout       240s;
+    proxy_read_timeout          240s;
+    proxy_buffer_size 128k;
+    proxy_buffers 4 256k;
+
    gzip  on;
    gzip_min_length   1k;
    gzip_buffers  4 8k;
@@ -215,7 +223,7 @@ services:
      - /root/fast-gpt/pg/init.sql:/docker-entrypoint-initdb.d/init.sh
      - /etc/localtime:/etc/localtime:ro
  mongodb:
-    image: mongo:4.0.1
+    image: mongo:6.0.4
    container_name: mongo
    restart: always
    ports:
--- a/deploy/nginx/nginx.conf
+++ b/deploy/nginx/nginx.conf
@@ -7,12 +7,20 @@ events {
 }

 http {
+    resolver 8.8.8.8;
+    proxy_ssl_server_name on;
+
    access_log off;
    server_names_hash_bucket_size 512;
-    client_header_buffer_size 32k;
-    large_client_header_buffers 4 32k;
+    client_header_buffer_size 64k;
+    large_client_header_buffers 4 64k;
    client_max_body_size 50M;

+    proxy_connect_timeout       240s;
+    proxy_read_timeout          240s;
+    proxy_buffer_size 128k;
+    proxy_buffers 4 256k;
+ 
    gzip  on;
    gzip_min_length   1k;
    gzip_buffers  4 8k;
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
    "@tanstack/react-query": "^4.24.10",
    "@types/nprogress": "^0.2.0",
    "axios": "^1.3.3",
+    "cookie": "^0.5.0",
    "crypto": "^1.0.1",
    "dayjs": "^1.11.7",
    "eventsource-parser": "^0.1.0",
@@ -60,6 +61,7 @@
  },
  "devDependencies": {
    "@svgr/webpack": "^6.5.1",
+    "@types/cookie": "^0.5.1",
    "@types/formidable": "^2.0.5",
    "@types/jsonwebtoken": "^9.0.1",
    "@types/lodash": "^4.14.191",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,7 @@ specifiers:
  '@next/font': 13.1.6
  '@svgr/webpack': ^6.5.1
  '@tanstack/react-query': ^4.24.10
+  '@types/cookie': ^0.5.1
  '@types/formidable': ^2.0.5
  '@types/jsonwebtoken': ^9.0.1
  '@types/lodash': ^4.14.191
@@ -26,6 +27,7 @@ specifiers:
  '@types/react-syntax-highlighter': ^15.5.6
  '@types/tunnel': ^0.0.3
  axios: ^1.3.3
+  cookie: ^0.5.0
  crypto: ^1.0.1
  dayjs: ^1.11.7
  eslint: 8.34.0
@@ -80,6 +82,7 @@ dependencies:
  '@tanstack/react-query': registry.npmmirror.com/@tanstack/react-query/4.24.10_biqbaboplfbrettd7655fr4n2y
  '@types/nprogress': registry.npmmirror.com/@types/nprogress/0.2.0
  axios: registry.npmmirror.com/axios/1.3.3
+  cookie: 0.5.0
  crypto: registry.npmmirror.com/crypto/1.0.1
  dayjs: registry.npmmirror.com/dayjs/1.11.7
  eventsource-parser: registry.npmmirror.com/eventsource-parser/0.1.0
@@ -116,6 +119,7 @@ dependencies:

 devDependencies:
  '@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/jsonwebtoken': registry.npmmirror.com/@types/jsonwebtoken/9.0.1
  '@types/lodash': registry.npmmirror.com/@types/lodash/4.14.191
@@ -286,6 +290,15 @@ packages:
    dev: false
    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:
    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
--- a/public/docs/chatProblem.md
+++ b/public/docs/chatProblem.md
@@ -1,10 +1,14 @@
 ### 常见问题
+
 **请求次数太多了**
 一般是因为自己的 openai 账号异常。请先检查自己的账号是否正常使用。
 **内容长度**
-chatgpt 上下文最长 4096 tokens,  上下文超长时会报错。
+chatgpt 上下文最长 4096 tokens, 会自动截取上下文，超过 4096 部分会被遗忘。
 **删除和复制**
 电脑端：聊天内容右侧有复制和删除的图标。
 移动端：点击对话头像，可以选择复制或删除该条内容。
 **代理出错**
 服务器代理不稳定，可以过一会儿再尝试。 或者可以访问国外服务器: [FastGpt](https://fastgpt.run/)
+**其他问题**
+请 WX 联系: fastgpt123
+![FastGpt](/imgs/wx300.jpg)
--- a/src/api/chat.ts
+++ b/src/api/chat.ts
@@ -1,18 +1,19 @@
 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 { 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}`);

 /**
 * 获取历史记录
 */
-export const getChatHistory = () =>
-  GET<{ _id: string; title: string; modelId: string }[]>('/chat/getHistory');
+export const getChatHistory = (data: RequestPaging) =>
+  POST<HistoryItemType[]>('/chat/getHistory', data);

 /**
 * 删除一条历史记录
--- a/src/api/fetch.ts
+++ b/src/api/fetch.ts
@@ -1,4 +1,3 @@
-import { getToken } from '../utils/user';
 import { SYSTEM_PROMPT_HEADER, NEW_CHATID_HEADER } from '@/constants/chat';

 interface StreamFetchProps {
@@ -14,8 +13,7 @@ export const streamFetch = ({ url, data, onMessage, abortSignal }: StreamFetchPr
        const res = await fetch(url, {
          method: 'POST',
          headers: {
-            'Content-Type': 'application/json',
-            Authorization: getToken() || ''
+            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data),
          signal: abortSignal.signal
--- a/src/api/model.ts
+++ b/src/api/model.ts
@@ -1,13 +1,14 @@
 import { GET, POST, DELETE, PUT } from './request';
 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 { 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) =>
 export const getShareModelList = (data: { searchText?: string } & RequestPaging) =>
  POST(`/model/share/getModels`, data);
 /**
- * 获取收藏的模型
+ * 获取我收藏的模型
 */
 export const getCollectionModels = () => GET<ShareModelItem[]>(`/model/share/getCollection`);
 /**
--- a/src/api/request.ts
+++ b/src/api/request.ts
@@ -1,5 +1,5 @@
 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';

 interface ConfigType {
@@ -17,7 +17,7 @@ interface ResponseDataType {
 */
 function requestStart(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig {
  if (config.headers) {
-    config.headers.Authorization = getToken();
+    // config.headers.Authorization = getToken();
  }

  return config;
--- a/src/api/response/chat.d.ts
+++ b/src/api/response/chat.d.ts
@@ -1,12 +1,15 @@
 import type { ChatPopulate, ModelSchema } from '@/types/mongoSchema';
 import type { ChatItemType } from '@/types/chat';

-export type InitChatResponse = {
+export interface InitChatResponse {
  chatId: string;
  modelId: string;
+  model: {
    name: string;
    avatar: string;
    intro: string;
+    canUse: boolean;
+  };
  chatModel: ModelSchema['chat']['chatModel']; // 对话模型名
  history: ChatItemType[];
-};
+}
--- a/src/api/response/model.d.ts
+++ b/src/api/response/model.d.ts
@@ -0,0 +1,6 @@
+import { ModelListItemType } from '@/types/model';
+
+export type ModelListResponse = {
+  myModels: ModelListItemType[];
+  myCollectionModels: ModelListItemType[];
+};
--- a/src/api/response/user.d.ts
+++ b/src/api/response/user.d.ts
@@ -1,7 +1,6 @@
 import type { UserType } from '@/types/user';
 import type { PromotionRecordSchema } from '@/types/mongoSchema';
 export interface ResLogin {
-  token: string;
  user: UserType;
 }

--- a/src/components/Icon/icons/back.svg
+++ b/src/components/Icon/icons/back.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/board.svg
+++ b/src/components/Icon/icons/board.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/chat.svg
+++ b/src/components/Icon/icons/chat.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/closeSolid.svg
+++ b/src/components/Icon/icons/closeSolid.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/dbModel.svg
+++ b/src/components/Icon/icons/dbModel.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/develop.svg
+++ b/src/components/Icon/icons/develop.svg
@@ -1 +1 @@
-<?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>
--- a/src/components/Icon/icons/empty.svg
+++ b/src/components/Icon/icons/empty.svg
@@ -0,0 +1,5 @@
+<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>
--- a/src/components/Icon/icons/export.svg
+++ b/src/components/Icon/icons/export.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/history.svg
+++ b/src/components/Icon/icons/history.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/home.svg
+++ b/src/components/Icon/icons/home.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/menu.svg
+++ b/src/components/Icon/icons/menu.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/model.svg
+++ b/src/components/Icon/icons/model.svg
@@ -1 +1 @@
-<?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>
--- a/src/components/Icon/icons/more.svg
+++ b/src/components/Icon/icons/more.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/out.svg
+++ b/src/components/Icon/icons/out.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/pay.svg
+++ b/src/components/Icon/icons/pay.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/phoneTabbar/chat.svg
+++ b/src/components/Icon/icons/phoneTabbar/chat.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/phoneTabbar/me.svg
+++ b/src/components/Icon/icons/phoneTabbar/me.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/phoneTabbar/model.svg
+++ b/src/components/Icon/icons/phoneTabbar/model.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/phoneTabbar/more.svg
+++ b/src/components/Icon/icons/phoneTabbar/more.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/icons/promotion.svg
+++ b/src/components/Icon/icons/promotion.svg
@@ -1 +1 @@
-<?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>
--- a/src/components/Icon/icons/share.svg
+++ b/src/components/Icon/icons/share.svg
@@ -1 +0,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>
--- a/src/components/Icon/icons/shareMarket.svg
+++ b/src/components/Icon/icons/shareMarket.svg
@@ -1 +1 @@
-<?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>
--- a/src/components/Icon/icons/user.svg
+++ b/src/components/Icon/icons/user.svg
@@ -1 +1 @@
-<?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>
--- a/src/components/Icon/icons/wx.svg
+++ b/src/components/Icon/icons/wx.svg
@@ -0,0 +1 @@
+<?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>
--- a/src/components/Icon/index.tsx
+++ b/src/components/Icon/index.tsx
@@ -4,25 +4,28 @@ import { Icon } from '@chakra-ui/react';

 const map = {
  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,
  chatSend: require('./icons/chatSend.svg').default,
-  board: require('./icons/board.svg').default,
  develop: require('./icons/develop.svg').default,
  user: require('./icons/user.svg').default,
  promotion: require('./icons/promotion.svg').default,
  delete: require('./icons/delete.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,
  shareMarket: require('./icons/shareMarket.svg').default,
  collectionLight: require('./icons/collectionLight.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;
--- a/src/components/Layout/auth.tsx
+++ b/src/components/Layout/auth.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import { useToast } from '@chakra-ui/react';
 import { useUserStore } from '@/store/user';
-import { useGlobalStore } from '@/store/global';
 import { useQuery } from '@tanstack/react-query';

 const unAuthPage: { [key: string]: boolean } = {
@@ -19,15 +18,13 @@ const Auth = ({ children }: { children: JSX.Element }) => {
    status: 'warning'
  });
  const { userInfo, initUserInfo } = useUserStore();
-  const { setLoading } = useGlobalStore();

  useQuery(
-    [router.pathname, userInfo],
+    [router.pathname],
    () => {
      if (unAuthPage[router.pathname] === true || userInfo) {
-        return setLoading(false);
+        return null;
      } else {
-        setLoading(true);
        return initUserInfo();
      }
    },
@@ -38,9 +35,6 @@ const Auth = ({ children }: { children: JSX.Element }) => {
          `/login?lastRoute=${encodeURIComponent(location.pathname + location.search)}`
        );
        toast();
-      },
-      onSettled() {
-        setLoading(false);
      }
    }
  );
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Box, useColorMode, Flex } from '@chakra-ui/react';
 import Navbar from './navbar';
 import NavbarPhone from './navbarPhone';
@@ -8,53 +8,12 @@ import { useLoading } from '@/hooks/useLoading';
 import Auth from './auth';
 import { useGlobalStore } from '@/store/global';

-const unShowLayoutRoute: { [key: string]: boolean } = {
-  '/login': true,
-  '/chat': true
+const pcUnShowLayoutRoute: Record<string, boolean> = {
+  '/login': true
 };

-const navbarList = [
-  {
-    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 Layout = ({ children, isPcDevice }: { children: JSX.Element; isPcDevice: boolean }) => {
+  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
  const router = useRouter();
  const { colorMode, setColorMode } = useColorMode();
  const { Loading } = useLoading({ defaultLoading: true });
@@ -66,40 +25,60 @@ const Layout = ({ children }: { children: JSX.Element }) => {
    }
  }, [colorMode, router.pathname, setColorMode]);

-  return (
-    <>
-      {!unShowLayoutRoute[router.pathname] ? (
-        <Box h={'100%'} backgroundColor={'gray.100'} overflow={'auto'}>
-          {isPc ? (
-            <>
-              <Box h={'100%'} position={'fixed'} left={0} top={0} w={'80px'}>
-                <Navbar navbarList={navbarList} />
-              </Box>
-              <Box h={'100%'} ml={'80px'}>
-                <Box h={'100%'} py={7} px={'5vw'} m={'auto'} overflowY={'auto'}>
+  const RenderPc = useCallback(
+    () =>
+      pcUnShowLayoutRoute[router.pathname] ? (
        <Auth>{children}</Auth>
+      ) : (
+        <>
+          <Box h={'100%'} position={'fixed'} left={0} top={0} w={'60px'}>
+            <Navbar />
          </Box>
+          <Box h={'100%'} ml={'60px'} overflow={'overlay'}>
+            <Auth>{children}</Auth>
          </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'}>
-              <Box h={'60px'} borderBottom={'1px solid rgba(0,0,0,0.1)'}>
-                <NavbarPhone navbarList={navbarList} />
-              </Box>
-              <Box flex={'1 0 0'} h={0} py={3} px={4} overflowY={'auto'}>
+        <Box flex={'1 0 0'} h={0} overflow={'overlay'}>
          <Auth>{children}</Auth>
        </Box>
-            </Flex>
-          )}
+        <Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
+          <NavbarPhone />
+        </Box>
+      </Flex>
+    );
+  }, [children, router]);
+
+  return (
+    <>
+      <Box h={'100%'} overflow={'overlay'} bg={'gray.100'}>
+        {isPc ? <RenderPc /> : <RenderPhone />}
      </Box>
-      ) : (
-        <Auth>
-          <>{children}</>
-        </Auth>
-      )}
      {loading && <Loading />}
    </>
  );
 };

 export default Layout;
+
+Layout.getInitialProps = ({ req }: any) => {
+  return {
+    isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
+  };
+};
--- a/src/components/Layout/navbar.tsx
+++ b/src/components/Layout/navbar.tsx
@@ -1,78 +1,130 @@
-import React from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import Image from 'next/image';
+import React, { useMemo } from 'react';
+import { Box, Flex, Image, Tooltip } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import MyIcon from '../Icon';
+import { useUserStore } from '@/store/user';
+import { useChatStore } from '@/store/chat';
+
 export enum NavbarTypeEnum {
  normal = 'normal',
  small = 'small'
 }

-const Navbar = ({
-  navbarList
-}: {
-  navbarList: {
-    label: string;
-    icon: string;
-    link: string;
-    activeLink: string[];
-  }[];
-}) => {
+const Navbar = () => {
  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 (
    <Flex
      flexDirection={'column'}
      alignItems={'center'}
-      py={3}
-      backgroundColor={'white'}
+      pt={6}
+      backgroundColor={'#465069'}
      h={'100%'}
      w={'100%'}
      boxShadow={'4px 0px 4px 0px rgba(43, 45, 55, 0.01)'}
      userSelect={'none'}
    >
      {/* logo */}
-      <Box pb={4}>
-        <Image src={'/icon/logo.png'} width={'35'} height={'35'} alt=""></Image>
+      <Box
+        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 flex={1}>
        {navbarList.map((item) => (
-          <Flex
+          <Tooltip
+            label={item.label}
            key={item.label}
-            mb={4}
+            placement={'right'}
+            openDelay={100}
+            gutter={-10}
+          >
+            <Flex
+              mb={3}
              flexDirection={'column'}
              alignItems={'center'}
              justifyContent={'center'}
              onClick={() => {
-              if (item.link === router.pathname) return;
+                if (item.link === router.asPath) return;
                router.push(item.link, undefined, {
                  shallow: true
                });
              }}
              cursor={'pointer'}
-            fontSize={'sm'}
              w={'60px'}
-            h={'70px'}
-            borderRadius={'sm'}
+              h={'45px'}
+              _hover={{
+                color: '#ffffff'
+              }}
              {...(item.activeLink.includes(router.pathname)
                ? {
-                  color: '#2B6CB0',
-                  backgroundColor: '#BEE3F8'
+                    color: '#ffffff ',
+                    backgroundImage: 'linear-gradient(270deg,#4e83fd,#3370ff)'
                  }
                : {
-                  color: '#4A5568',
+                    color: '#9096a5',
                    backgroundColor: 'transparent'
                  })}
            >
-            <MyIcon
-              name={item.icon as any}
-              width={'24px'}
-              height={'24px'}
-              fill={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
-            />
-            <Box mt={1}>{item.label}</Box>
+              <MyIcon name={item.icon as any} width={'22px'} height={'22px'} />
            </Flex>
+          </Tooltip>
        ))}
      </Box>
    </Flex>
--- a/src/components/Layout/navbarPhone.tsx
+++ b/src/components/Layout/navbarPhone.tsx
@@ -1,32 +1,41 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import MyIcon from '../Icon';
-import {
-  Flex,
-  Drawer,
-  DrawerBody,
-  DrawerFooter,
-  DrawerOverlay,
-  DrawerContent,
-  Box,
-  useDisclosure,
-  Button,
-  Image
-} from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
+import { useChatStore } from '@/store/chat';

-const NavbarPhone = ({
-  navbarList
-}: {
-  navbarList: {
-    label: string;
-    icon: string;
-    link: string;
-    activeLink: string[];
-  }[];
-}) => {
+const NavbarPhone = () => {
  const router = useRouter();
-
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { lastChatModelId, lastChatId } = useChatStore();
+  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 (
    <>
@@ -36,61 +45,51 @@ const NavbarPhone = ({
        justifyContent={'space-between'}
        backgroundColor={'white'}
        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) => (
          <Flex
-                key={item.label}
-                mb={5}
-                alignItems={'center'}
-                justifyContent={'center'}
-                onClick={() => {
-                  if (item.link === router.pathname) return;
-                  router.push(item.link);
-                  onClose();
-                }}
+            position={'relative'}
+            key={item.link}
            cursor={'pointer'}
-                h={'60px'}
            borderRadius={'md'}
-                {...(item.activeLink.includes(router.pathname)
+            textAlign={'center'}
+            alignItems={'center'}
+            h={'100%'}
+            px={3}
+            {...(item.activeLink.includes(router.asPath)
              ? {
-                      color: '#2B6CB0',
-                      backgroundColor: '#BEE3F8'
+                  color: '#7089f1'
                }
              : {
-                      color: '#4A5568',
-                      backgroundColor: 'transparent'
+                  color: 'myGray.500'
                })}
+            _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
-                  name={item.icon as any}
-                  width={'24px'}
-                  height={'24px'}
-                  fill={item.activeLink.includes(router.pathname) ? '#2B6CB0' : '#4A5568'}
-                />
-                <Box ml={5}>{item.label}</Box>
+            <MyIcon name={item.icon as any} width={'20px'} height={'20px'} />
          </Flex>
        ))}
-          </DrawerBody>
-
-          <DrawerFooter px={2}>
-            <Button variant="outline" onClick={onClose}>
-              Cancel
-            </Button>
-          </DrawerFooter>
-        </DrawerContent>
-      </Drawer>
+      </Flex>
    </>
  );
 };
--- a/src/components/Radio/index.tsx
+++ b/src/components/Radio/index.tsx
@@ -28,16 +28,16 @@ const Radio = ({ list, value, onChange, ...props }: Props) => {
            ...(value === item.value
              ? {
                  border: '5px solid',
-                  borderColor: 'blue.500'
+                  borderColor: 'myBlue.700'
                }
              : {
                  border: '2px solid',
-                  borderColor: 'gray.200'
+                  borderColor: 'myGray.200'
                })
          }}
          _hover={{
            _before: {
-              borderColor: 'blue.400'
+              borderColor: 'myBlue.600'
            }
          }}
          onClick={() => onChange(item.value)}
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -52,7 +52,7 @@ const MySlider = ({
          mt={3}
          fontSize={'sm'}
          transform={'translateX(-50%)'}
-          {...(activeVal === item.value ? { color: 'blue.500', fontWeight: 'bold' } : {})}
+          {...(activeVal === item.value ? { color: 'myBlue.500', fontWeight: 'bold' } : {})}
        >
          <Box px={3} cursor={'pointer'}>
            {item.label}
@@ -74,7 +74,7 @@ const MySlider = ({
      >
        <SliderFilledTrack />
      </SliderTrack>
-      <SliderThumb border={'2.5px solid'} borderColor={'blue.500'}></SliderThumb>
+      <SliderThumb border={'2.5px solid'} borderColor={'myBlue.500'}></SliderThumb>
    </Slider>
  );
 };
--- a/src/components/WxConcat/index.tsx
+++ b/src/components/WxConcat/index.tsx
@@ -9,23 +9,23 @@ import {
  ModalFooter,
  ModalBody,
  ModalCloseButton,
-  useColorModeValue
+  useColorModeValue,
+  Image
 } from '@chakra-ui/react';
-import Image from 'next/image';

 const WxConcat = ({ onClose }: { onClose: () => void }) => {
  return (
    <Modal isOpen={true} onClose={onClose}>
      <ModalOverlay />
-      <ModalContent color={useColorModeValue('blackAlpha.700', 'white')}>
+      <ModalContent>
        <ModalHeader>wx交流群</ModalHeader>
        <ModalCloseButton />
        <ModalBody textAlign={'center'}>
          <Image
            style={{ margin: 'auto' }}
            src={'/imgs/wx300.jpg'}
-            width={200}
-            height={200}
+            width={'200px'}
+            height={'200px'}
            alt=""
          />
          <Box mt={2}>
--- a/src/constants/theme.ts
+++ b/src/constants/theme.ts
@@ -1,10 +1,16 @@
-import { extendTheme, defineStyleConfig } from '@chakra-ui/react';
+import { extendTheme, defineStyleConfig, ComponentStyleConfig } from '@chakra-ui/react';
 // @ts-ignore
-import { modalAnatomy as parts } from '@chakra-ui/anatomy';
+import { modalAnatomy, switchAnatomy, selectAnatomy } from '@chakra-ui/anatomy';
 // @ts-ignore
 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 弹窗
 const ModalTheme = defineMultiStyleConfig({
@@ -17,46 +23,141 @@ const ModalTheme = defineMultiStyleConfig({

 // 按键
 const Button = defineStyleConfig({
-  baseStyle: {},
+  baseStyle: {
+    _active: {
+      transform: 'scale(0.98)'
+    }
+  },
  sizes: {
-    sm: {
+    xs: {
      fontSize: 'xs',
      px: 3,
      py: 0,
      fontWeight: 'normal',
+      height: '22px',
+      borderRadius: '2px'
+    },
+    sm: {
+      fontSize: 'sm',
+      px: 3,
+      py: 0,
+      fontWeight: 'normal',
      height: '26px',
-      lineHeight: '26px'
+      borderRadius: '2px'
    },
    md: {
-      fontSize: 'sm',
+      fontSize: 'md',
      px: 6,
      py: 0,
-      height: '34px',
-      lineHeight: '34px',
-      fontWeight: 'normal'
+      height: '32px',
+      fontWeight: 'normal',
+      borderRadius: '4px'
    },
    lg: {
-      fontSize: 'md',
+      fontSize: 'lg',
      px: 8,
      py: 0,
      height: '42px',
-      lineHeight: '42px',
-      fontWeight: 'normal'
+      fontWeight: 'normal',
+      borderRadius: '8px'
    }
  },
  variants: {
-    white: {
-      color: '#fff',
-      backgroundColor: 'transparent',
-      border: '1px solid #ffffff',
+    primary: {
+      background: 'myBlue.700 !important',
+      color: 'white',
      _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: {
    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({
  styles: {
    global: {
      'html, body': {
-        color: 'blackAlpha.800',
+        color: 'myGray.900',
+        fontSize: 'md',
+        fontWeight: 400,
        height: '100%',
-        maxHeight: '100vh',
-        overflowY: 'hidden'
+        overflow: 'hidden'
      }
    }
  },
-  fontSizes: {
-    xs: '0.8rem',
-    sm: '0.9rem',
-    md: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '1.875rem',
-    '4xl': '2.25rem',
-    '5xl': '3rem',
-    '6xl': '3.75rem',
-    '7xl': '4.5rem',
-    '8xl': '6rem',
-    '9xl': '8rem'
+  colors: {
+    myGray: {
+      100: '#EFF0F1',
+      200: '#DEE0E2',
+      300: '#BDC1C5',
+      400: '#9CA2A8',
+      500: '#7B838B',
+      600: '#5A646E',
+      700: '#485058',
+      800: '#363C42',
+      900: '#24282C',
+      1000: '#121416'
+    },
+    myBlue: {
+      100: '#f0f7ff',
+      200: '#EBF7FD',
+      300: '#d6e8ff',
+      400: '#adceff',
+      500: '#85b1ff',
+      600: '#4e83fd',
+      700: '#3370ff',
+      800: '#2152d9',
+      900: '#1237b3',
+      1000: '#07228c'
+    }
  },
  fonts: {
    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: {
    sm: '900px',
    md: '1200px',
@@ -99,6 +226,10 @@ export const theme = extendTheme({
  },
  components: {
    Modal: ModalTheme,
-    Button
+    Button,
+    Input,
+    Textarea,
+    Switch,
+    Select
  }
 });
--- a/src/hooks/useConfirm.tsx
+++ b/src/hooks/useConfirm.tsx
@@ -39,7 +39,7 @@ export const useConfirm = ({ title = '提示', content }: { title?: string; cont

              <AlertDialogFooter>
                <Button
-                  colorScheme={'gray'}
+                  variant={'outline'}
                  onClick={() => {
                    onClose();
                    typeof cancelCb.current === 'function' && cancelCb.current();
@@ -48,7 +48,6 @@ export const useConfirm = ({ title = '提示', content }: { title?: string; cont
                  取消
                </Button>
                <Button
-                  colorScheme="blue"
                  ml={4}
                  onClick={() => {
                    onClose();
--- a/src/hooks/useLoading.tsx
+++ b/src/hooks/useLoading.tsx
@@ -18,7 +18,13 @@ export const useLoading = (props?: { defaultLoading: boolean }) => {
          alignItems={'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>
      ) : null;
    },
--- a/src/hooks/usePagination.tsx
+++ b/src/hooks/usePagination.tsx
@@ -4,15 +4,18 @@ import { IconButton, Flex, Box, Input } from '@chakra-ui/react';
 import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
 import { useMutation } from '@tanstack/react-query';
 import { useToast } from './useToast';
+import { useQuery } from '@tanstack/react-query';

 export const usePagination = <T = any,>({
  api,
  pageSize = 10,
-  params = {}
+  params = {},
+  defaultRequest = true
 }: {
  api: (data: any) => any;
  pageSize?: number;
  params?: Record<string, any>;
+  defaultRequest?: boolean;
 }) => {
  const { toast } = useToast();
  const [pageNum, setPageNum] = useState(1);
@@ -90,7 +93,7 @@ export const usePagination = <T = any,>({
  }, [maxPage, mutate, pageNum]);

  useEffect(() => {
-    mutate(1);
+    defaultRequest && mutate(1);
  }, []);

  return {
--- a/src/hooks/useScreen.ts
+++ b/src/hooks/useScreen.ts
@@ -1,10 +1,15 @@
 import { useMemo } from '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)', {
    ssr: true,
-    fallback: false
+    fallback: defaultIsPc
  });

  return {
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 const NonePage = () => {
  const router = useRouter();
  useEffect(() => {
-    router.push('/model/list');
+    router.push('/model');
  }, [router]);

  return <div></div>;
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -57,6 +57,7 @@ export default function App({ Component, pageProps }: AppProps) {
      <QueryClientProvider client={queryClient}>
        <ChakraProvider theme={theme}>
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+          {/* @ts-ignore */}
          <Layout>
            <Component {...pageProps} />
          </Layout>
--- a/src/pages/api/chat/delChatRecordByContentId.ts
+++ b/src/pages/api/chat/delChatRecordByContentId.ts
@@ -6,11 +6,7 @@ import { authToken } from '@/service/utils/auth';
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { chatId, contentId } = req.query as { chatId: string; contentId: string };
-    const { authorization } = req.headers;

-    if (!authorization) {
-      throw new Error('无权操作');
-    }
    if (!chatId || !contentId) {
      throw new Error('缺少参数');
    }
@@ -18,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    await connectToDatabase();

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    const chatRecord = await Chat.findById(chatId);

--- a/src/pages/api/chat/getHistory.ts
+++ b/src/pages/api/chat/getHistory.ts
@@ -6,7 +6,7 @@ import { authToken } from '@/service/utils/auth';
 /* 获取历史记录 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const userId = await authToken(req.headers.authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

@@ -14,7 +14,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      {
        userId
      },
-      '_id title modelId'
+      '_id title modelId updateTime latestChat'
    )
      .sort({ updateTime: -1 })
      .limit(20);
--- a/src/pages/api/chat/init.ts
+++ b/src/pages/api/chat/init.ts
@@ -1,33 +1,57 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 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 { authToken } from '@/service/utils/auth';
 import { ChatItemType } from '@/types/chat';
 import { authModel } from '@/service/utils/auth';
 import mongoose from 'mongoose';
+import { ModelStatusEnum } from '@/constants/model';
+import type { ModelSchema } from '@/types/mongoSchema';

 /* 初始化我的聊天框，需要身份验证 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

-    const { modelId, chatId } = req.query as { modelId: string; chatId: '' | string };
-
-    if (!modelId) {
-      throw new Error('缺少参数');
-    }
+    let { modelId, chatId } = req.query as { modelId: '' | string; chatId: '' | string };

    await connectToDatabase();

-    // 获取 model 数据
-    const { model } = await authModel({ modelId, userId, authUser: false, authOwner: false });
+    let model: ModelSchema;
+
+    // 没有 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[] = [];

    if (chatId) {
+      // auth chatId
+      const chat = await Chat.countDocuments({
+        _id: chatId,
+        userId
+      });
+      if (chat === 0) {
+        throw new Error('聊天框不存在');
+      }
      // 获取 chat.content 数据
      history = await Chat.aggregate([
        {
@@ -59,9 +83,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      data: {
        chatId: chatId || '',
        modelId: modelId,
+        model: {
          name: model.name,
          avatar: model.avatar,
          intro: model.share.intro,
+          canUse: model.share.isShare || String(model.userId) === userId
+        },
        chatModel: model.chat.chatModel,
        history
      }
--- a/src/pages/api/chat/removeHistory.ts
+++ b/src/pages/api/chat/removeHistory.ts
@@ -1,6 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/service/response';
-import { ChatItemType } from '@/types/chat';
 import { connectToDatabase, Chat } from '@/service/mongo';
 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) {
  try {
    const { id } = req.query;
-    const userId = await authToken(req.headers.authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/chat/saveChat.ts
+++ b/src/pages/api/chat/saveChat.ts
@@ -20,7 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      throw new Error('缺少参数');
    }

-    const userId = await authToken(req.headers.authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

@@ -40,7 +40,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
        userId,
        modelId,
        content,
-        title: content[0].value.slice(0, 20)
+        title: content[0].value.slice(0, 20),
+        latestChat: content[content.length - 1].value
      });
      return jsonRes(res, {
        data: _id
@@ -53,7 +54,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
            $each: content
          }
        },
-        updateTime: new Date()
+        updateTime: new Date(),
+        latestChat: content[content.length - 1].value
      });
    }
    jsonRes(res);
--- a/src/pages/api/model/create.ts
+++ b/src/pages/api/model/create.ts
@@ -11,18 +11,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
    const { name } = req.body as {
      name: string;
    };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }

    if (!name) {
      throw new Error('缺少参数');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/model/data/delModelDataById.ts
+++ b/src/pages/api/model/data/delModelDataById.ts
@@ -8,18 +8,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
    let { dataId } = req.query as {
      dataId: string;
    };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }

    if (!dataId) {
      throw new Error('缺少参数');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await PgClient.delete('modelData', {
      where: [['user_id', userId], 'AND', ['id', dataId]]
--- a/src/pages/api/model/data/exportModelData.ts
+++ b/src/pages/api/model/data/exportModelData.ts
@@ -10,18 +10,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      modelId: string;
    };

-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }
-
    if (!modelId) {
      throw new Error('缺少参数');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/model/data/fetchingUrlData.ts
+++ b/src/pages/api/model/data/fetchingUrlData.ts
@@ -16,9 +16,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    }
    await connectToDatabase();

-    const { authorization } = req.headers;
-
-    await authToken(authorization);
+    await authToken(req);

    const data = await axios
      .get(url, {
--- a/src/pages/api/model/data/getModelData.ts
+++ b/src/pages/api/model/data/getModelData.ts
@@ -19,21 +19,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      pageSize: string;
      searchText: string;
    };
-    const { authorization } = req.headers;

    pageNum = +pageNum;
    pageSize = +pageSize;

-    if (!authorization) {
-      throw new Error('无权操作');
-    }
-
    if (!modelId) {
      throw new Error('缺少参数');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/model/data/getSplitData.ts
+++ b/src/pages/api/model/data/getSplitData.ts
@@ -12,9 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    }
    await connectToDatabase();

-    const { authorization } = req.headers;
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    // 找到长度大于0的数据
    const data = await SplitData.find({
--- a/src/pages/api/model/data/pushModelDataCsv.ts
+++ b/src/pages/api/model/data/pushModelDataCsv.ts
@@ -13,18 +13,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      modelId: string;
      data: string[][];
    };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }

    if (!modelId || !Array.isArray(data)) {
      throw new Error('缺少参数');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

@@ -36,9 +31,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<

    // 去重
    const searchRes = await Promise.allSettled(
-      data.map(async ([q, a]) => {
-        if (!q || !a) {
-          return Promise.reject('q/a为空');
+      data.map(async ([q, a = '']) => {
+        if (!q) {
+          return Promise.reject('q为空');
        }
        try {
          q = q.replace(/\\n/g, '\n');
--- a/src/pages/api/model/data/pushModelDataInput.ts
+++ b/src/pages/api/model/data/pushModelDataInput.ts
@@ -13,18 +13,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      modelId: string;
      data: { a: ModelDataSchema['a']; q: ModelDataSchema['q'] }[];
    };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }

    if (!modelId || !Array.isArray(data)) {
      throw new Error('缺少参数');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/model/data/putModelData.ts
+++ b/src/pages/api/model/data/putModelData.ts
@@ -8,18 +8,13 @@ import { PgClient } from '@/service/pg';
 export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  try {
    const { dataId, a, q } = req.body as { dataId: string; a: string; q?: string };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }

    if (!dataId) {
      throw new Error('缺少参数');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    // 更新 pg 内容
    await PgClient.update('modelData', {
--- a/src/pages/api/model/data/splitData.ts
+++ b/src/pages/api/model/data/splitData.ts
@@ -20,9 +20,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    }
    await connectToDatabase();

-    const { authorization } = req.headers;
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    // 验证是否是该用户的 model
    const model = await Model.findOne({
--- a/src/pages/api/model/del.ts
+++ b/src/pages/api/model/del.ts
@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 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 { PgClient } from '@/service/pg';
 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>) {
  try {
    const { modelId } = req.query as { modelId: string };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }

    if (!modelId) {
      throw new Error('参数错误');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

@@ -40,6 +35,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      modelId
    });

+    // 删除收藏列表
+    await Collection.deleteMany({
+      modelId
+    });
+
    // 删除模型
    await Model.deleteOne({
      _id: modelId,
--- a/src/pages/api/model/detail.tsx
+++ b/src/pages/api/model/detail.tsx
@@ -7,12 +7,6 @@ import { authModel } from '@/service/utils/auth';
 /* 获取我的模型 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  try {
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }
-
    const { modelId } = req.query as { modelId: string };

    if (!modelId) {
@@ -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();

--- a/src/pages/api/model/list.ts
+++ b/src/pages/api/model/list.ts
@@ -1,32 +1,49 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/service/response';
-import { connectToDatabase } from '@/service/mongo';
+import { connectToDatabase, Collection, Model } from '@/service/mongo';
 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>) {
  try {
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }
-
    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

    // 根据 userId 获取模型信息
-    const models = await Model.find({
+    const [myModels, myCollections] = await Promise.all([
+      Model.find(
+        {
          userId
-    }).sort({
+        },
+        '_id avatar name chat.systemPrompt'
+      ).sort({
        _id: -1
-    });
+      }),
+      Collection.find({
+        userId
+      }).populate('modelId', '_id avatar name chat.systemPrompt')
+    ]);

-    jsonRes(res, {
-      data: models
+    jsonRes<ModelListResponse>(res, {
+      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) {
    jsonRes(res, {
--- a/src/pages/api/model/share/collection.ts
+++ b/src/pages/api/model/share/collection.ts
@@ -12,7 +12,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      throw new Error('缺少参数');
    }
    // 凭证校验
-    const userId = await authToken(req.headers.authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/model/share/getCollection.ts
+++ b/src/pages/api/model/share/getCollection.ts
@@ -8,7 +8,7 @@ import type { ShareModelItem } from '@/types/model';
 export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  try {
    // 凭证校验
-    const userId = await authToken(req.headers.authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/model/share/getModels.ts
+++ b/src/pages/api/model/share/getModels.ts
@@ -1,7 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@/service/response';
 import { connectToDatabase, Collection, Model } from '@/service/mongo';
-import { authToken } from '@/service/utils/auth';
 import type { PagingData } from '@/types';
 import type { ShareModelItem } from '@/types/model';

--- a/src/pages/api/model/update.ts
+++ b/src/pages/api/model/update.ts
@@ -11,18 +11,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
  try {
    const { name, avatar, chat, share, security } = req.body as ModelUpdateParams;
    const { modelId } = req.query as { modelId: string };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('无权操作');
-    }

    if (!name || !chat || !security || !modelId) {
      throw new Error('参数错误');
    }

    // 凭证校验
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/openapi/chat/chat.ts
+++ b/src/pages/api/openapi/chat/chat.ts
@@ -46,7 +46,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      throw new Error('prompts is not array');
    }
    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();
--- a/src/pages/api/openapi/delKey.ts
+++ b/src/pages/api/openapi/delKey.ts
@@ -7,17 +7,12 @@ import { authToken } from '@/service/utils/auth';
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { id } = req.query as { id: string };
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }

    if (!id) {
      throw new Error('缺少参数');
    }

-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/openapi/getKeys.ts
+++ b/src/pages/api/openapi/getKeys.ts
@@ -7,13 +7,7 @@ import { UserOpenApiKey } from '@/types/openapi';

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/openapi/postKey.ts
+++ b/src/pages/api/openapi/postKey.ts
@@ -8,13 +8,7 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890');

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/user/checkPayResult.ts
+++ b/src/pages/api/user/checkPayResult.ts
@@ -11,10 +11,9 @@ import { PRICE_SCALE } from '@/constants/common';
 /* 校验支付结果 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
    let { payId } = req.query as { payId: string };

-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/user/getBill.ts
+++ b/src/pages/api/user/getBill.ts
@@ -7,17 +7,12 @@ import type { BillSchema } from '@/types/mongoSchema';

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
    let { pageNum = 1, pageSize = 10 } = req.query as { pageNum: string; pageSize: string };

    pageNum = +pageNum;
    pageSize = +pageSize;

-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/user/getPayCode.ts
+++ b/src/pages/api/user/getPayCode.ts
@@ -11,14 +11,10 @@ const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 20);
 /* 获取支付二维码 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
    let { amount = 0 } = req.query as { amount: string };
    amount = +amount;

-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    const id = nanoid();
    await connectToDatabase();
--- a/src/pages/api/user/getPayOrders.ts
+++ b/src/pages/api/user/getPayOrders.ts
@@ -5,12 +5,7 @@ import { connectToDatabase, Pay } from '@/service/mongo';

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/user/loginByPassword.ts
+++ b/src/pages/api/user/loginByPassword.ts
@@ -32,9 +32,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      throw new Error('密码错误');
    }

+    res.setHeader('Set-Cookie', `token=${generateToken(user._id)}; Path=/; HttpOnly`);
+
    jsonRes(res, {
      data: {
-        token: generateToken(user._id),
        user
      }
    });
--- a/src/pages/api/user/promotion/getPromotionData.ts
+++ b/src/pages/api/user/promotion/getPromotionData.ts
@@ -7,13 +7,7 @@ import mongoose from 'mongoose';

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/user/promotion/getPromotions.ts
+++ b/src/pages/api/user/promotion/getPromotions.ts
@@ -6,15 +6,11 @@ import { authToken } from '@/service/utils/auth';

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
    let { pageNum = 1, pageSize = 10 } = req.query as { pageNum: string; pageSize: string };
    pageNum = +pageNum;
    pageSize = +pageSize;
-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }

-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/user/register.ts
+++ b/src/pages/api/user/register.ts
@@ -56,9 +56,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      username
    });

+    res.setHeader('Set-Cookie', `token=${generateToken(user._id)}; Path=/; HttpOnly`);
+
    jsonRes(res, {
      data: {
-        token: generateToken(user._id),
        user
      }
    });
--- a/src/pages/api/user/tokenLogin.ts
+++ b/src/pages/api/user/tokenLogin.ts
@@ -7,13 +7,7 @@ import { authToken } from '@/service/utils/auth';

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
-    const { authorization } = req.headers;
-
-    if (!authorization) {
-      throw new Error('缺少登录凭证');
-    }
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

--- a/src/pages/api/user/update.ts
+++ b/src/pages/api/user/update.ts
@@ -9,14 +9,9 @@ import { UserUpdateParams } from '@/types/user';
 /* 更新一些基本信息 */
 export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
  try {
-    const { openaiKey } = req.body as UserUpdateParams;
-    const { authorization } = req.headers;
+    const { openaiKey, avatar } = req.body as UserUpdateParams;

-    if (!authorization) {
-      throw new Error('无权操作');
-    }
-
-    const userId = await authToken(authorization);
+    const userId = await authToken(req);

    await connectToDatabase();

@@ -26,7 +21,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
        _id: userId
      },
      {
-        openaiKey
+        ...(avatar && { avatar }),
+        ...(openaiKey && { openaiKey })
      }
    );

--- a/src/pages/api/user/updatePasswordByCode.ts
+++ b/src/pages/api/user/updatePasswordByCode.ts
@@ -48,9 +48,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
      throw new Error('获取用户信息异常');
    }

+    res.setHeader('Set-Cookie', `token=${generateToken(user._id)}; Path=/; HttpOnly`);
+
    jsonRes(res, {
      data: {
-        token: generateToken(user._id),
        user
      }
    });
--- a/src/pages/chat/components/Empty.tsx
+++ b/src/pages/chat/components/Empty.tsx
@@ -1,9 +1,18 @@
 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 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: versionIntro } = useMarkdown({ url: '/versionIntro.md' });

@@ -17,14 +26,15 @@ const Empty = ({ modelName, intro }: { modelName: string; intro: string }) => {
      alignItems={'center'}
      justifyContent={'center'}
    >
-      {!!intro && (
      <Card p={4} mb={10}>
-          <Box fontSize={'xl'} fontWeight={'600'} textAlign={'center'} pb={2}>
-            {modelName} 介绍
+        <Flex mb={2} alignItems={'center'} justifyContent={'center'}>
+          <Image src={avatar || LOGO_ICON} w={'32px'} h={'32px'} alt={''} />
+          <Box ml={3} fontSize={'3xl'} fontWeight={'bold'}>
+            {name}
          </Box>
+        </Flex>
        <Box whiteSpace={'pre-line'}>{intro}</Box>
      </Card>
-      )}
      {/* version intro */}
      <Card p={4} mb={10}>
        <Markdown source={versionIntro} />
--- a/src/pages/chat/components/History.tsx
+++ b/src/pages/chat/components/History.tsx
@@ -0,0 +1,242 @@
+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;
--- a/src/pages/chat/components/ModelList.tsx
+++ b/src/pages/chat/components/ModelList.tsx
@@ -0,0 +1,57 @@
+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;
--- a/src/pages/chat/components/PhoneSliderBar.tsx
+++ b/src/pages/chat/components/PhoneSliderBar.tsx
@@ -0,0 +1,194 @@
+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;
--- a/src/pages/chat/components/SlideBar.tsx
+++ b/src/pages/chat/components/SlideBar.tsx
@@ -1,386 +0,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;
--- a/src/pages/chat/index.module.scss
+++ b/src/pages/chat/index.module.scss
@@ -9,3 +9,18 @@
    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;
+    }
+  }
+}
--- a/src/pages/chat/index.tsx
+++ b/src/pages/chat/index.tsx
@@ -1,16 +1,16 @@
 import React, { useCallback, useState, useRef, useMemo, useEffect } from 'react';
 import { useRouter } from 'next/router';
-import { getInitChatSiteInfo, delChatRecordByIndex, postSaveChat } from '@/api/chat';
-import type { InitChatResponse } from '@/api/response/chat';
-import type { ChatItemType } from '@/types/chat';
+import {
+  getInitChatSiteInfo,
+  delChatRecordByIndex,
+  postSaveChat,
+  delChatHistoryById
+} from '@/api/chat';
+import type { ChatSiteItemType, ExportChatType } from '@/types/chat';
 import {
  Textarea,
  Box,
  Flex,
-  useDisclosure,
-  Drawer,
-  DrawerOverlay,
-  DrawerContent,
  useColorModeValue,
  Menu,
  MenuButton,
@@ -22,38 +22,46 @@ import {
  ModalOverlay,
  ModalContent,
  ModalBody,
-  ModalCloseButton
+  ModalCloseButton,
+  useDisclosure,
+  Drawer,
+  DrawerOverlay,
+  DrawerContent
 } from '@chakra-ui/react';
 import { useToast } from '@/hooks/useToast';
 import { useScreen } from '@/hooks/useScreen';
 import { useQuery } from '@tanstack/react-query';
-import { OpenAiChatEnum } from '@/constants/model';
 import dynamic from 'next/dynamic';
-import { useGlobalStore } from '@/store/global';
 import { useCopyData } from '@/utils/tools';
 import { streamFetch } from '@/api/fetch';
 import MyIcon from '@/components/Icon';
 import { throttle } from 'lodash';
 import { Types } from 'mongoose';
 import Markdown from '@/components/Markdown';
-import { HUMAN_ICON, LOGO_ICON } from '@/constants/chat';
+import { LOGO_ICON } from '@/constants/chat';
+import { useChatStore } from '@/store/chat';
+import { useLoading } from '@/hooks/useLoading';
+import { fileDownload } from '@/utils/file';
+import { htmlTemplate } from '@/constants/common';
+import { useUserStore } from '@/store/user';

-const SlideBar = dynamic(() => import('./components/SlideBar'));
+const PhoneSliderBar = dynamic(() => import('./components/PhoneSliderBar'));
+const History = dynamic(() => import('./components/History'));
 const Empty = dynamic(() => import('./components/Empty'));

 import styles from './index.module.scss';

 const textareaMinH = '22px';

-export type ChatSiteItemType = {
-  status: 'loading' | 'finish';
-} & ChatItemType;
-
-interface ChatType extends InitChatResponse {
-  history: ChatSiteItemType[];
-}
-
-const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
+const Chat = ({
+  modelId,
+  chatId,
+  isPcDevice
+}: {
+  modelId: string;
+  chatId: string;
+  isPcDevice: boolean;
+}) => {
  const router = useRouter();

  const ChatBox = useRef<HTMLDivElement>(null);
@@ -61,31 +69,34 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {

  // 中断请求
  const controller = useRef(new AbortController());
-  const isResetPage = useRef(false);
-
-  const [chatData, setChatData] = useState<ChatType>({
-    chatId,
-    modelId,
-    name: '',
-    avatar: '/icon/logo.png',
-    intro: '',
-    chatModel: OpenAiChatEnum.GPT35,
-    history: []
-  }); // 聊天框整体数据
+  const isLeavePage = useRef(false);

  const [inputVal, setInputVal] = useState(''); // user input prompt
  const [showSystemPrompt, setShowSystemPrompt] = useState('');

+  const {
+    lastChatModelId,
+    setLastChatModelId,
+    lastChatId,
+    setLastChatId,
+    loadHistory,
+    chatData,
+    setChatData,
+    forbidLoadChatData,
+    setForbidLoadChatData
+  } = useChatStore();
+
  const isChatting = useMemo(
    () => chatData.history[chatData.history.length - 1]?.status === 'loading',
    [chatData.history]
  );
-  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();

  const { toast } = useToast();
  const { copyData } = useCopyData();
-  const { isPc, media } = useScreen();
-  const { setLoading } = useGlobalStore();
+  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
+  const { Loading, setIsLoading } = useLoading();
+  const { userInfo } = useUserStore();
+  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();

  // 滚动到底部
  const scrollToBottom = useCallback((behavior: 'smooth' | 'auto' = 'smooth') => {
@@ -122,83 +133,13 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
    }, 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 对话
  const gptChatPrompt = useCallback(
    async (prompts: ChatSiteItemType[]) => {
      // create abort obj
      const abortSignal = new AbortController();
      controller.current = abortSignal;
-      isResetPage.current = false;
+      isLeavePage.current = false;

      const prompt = {
        obj: prompts[0].obj,
@@ -230,7 +171,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
      });

      // 重置了页面，说明退出了当前聊天, 不缓存任何内容
-      if (isResetPage.current) {
+      if (isLeavePage.current) {
        return;
      }

@@ -255,7 +196,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
          ]
        });
        if (newChatId) {
+          setForbidLoadChatData(true);
          router.replace(`/chat?modelId=${modelId}&chatId=${newChatId}`);
+          loadHistory({ pageNum: 1, init: true });
        }
      } catch (err) {
        toast({
@@ -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 }) => {
        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(
    async (index: number, id: string) => {
-      setLoading(true);
+      setIsLoading(true);
      try {
        // 删除数据库最后一句
        await delChatRecordByIndex(chatId, id);
@@ -368,9 +329,9 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
      } catch (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 }) => {
    [copyData]
  );

-  // 初始化聊天框
-  useQuery(['init'], () =>
-    loadChatInfo({
-      modelId,
-      chatId,
-      isLoading: true,
-      isScroll: true
-    })
+  // export chat data
+  const onclickExportChat = useCallback(
+    (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,
+      chatId,
+      isLoading = false
+    }: {
+      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(() => {
    return () => {
-      isResetPage.current = true;
+      isLeavePage.current = true;
      controller.current?.abort();
    };
  }, []);
@@ -403,61 +516,91 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
  return (
    <Flex
      h={'100%'}
-      flexDirection={media('row', 'column')}
+      flexDirection={['column', 'row']}
      backgroundColor={useColorModeValue('white', '')}
    >
-      {isPc ? (
-        <Box flex={'0 0 250px'} w={0} h={'100%'}>
-          <SlideBar
-            resetChat={resetChat}
-            chatId={chatId}
-            modelId={modelId}
-            history={chatData.history}
-            onClose={onCloseSlider}
+      {/* pc always show history. phone is only show when modelId is present */}
+      {isPc || !modelId ? (
+        <Box flex={[1, '0 0 250px']} w={['100%', 0]} h={'100%'}>
+          <History
+            onclickDelHistory={onclickDelHistory}
+            onclickExportChat={onclickExportChat}
+            isPcDevice={isPcDevice}
          />
        </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
            alignItems={'center'}
            h={'100%'}
            justifyContent={'space-between'}
            backgroundColor={useColorModeValue('white', 'gray.700')}
            color={useColorModeValue('blackAlpha.700', 'white')}
-            position={'relative'}
-            px={7}
+            px={5}
          >
-            <Box onClick={onOpenSlider}>
            <MyIcon
-                name={'menu'}
-                w={'20px'}
-                h={'20px'}
+              name={'tabbarMore'}
+              w={'14px'}
+              h={'14px'}
+              color={useColorModeValue('blackAlpha.700', 'white')}
+              onClick={onOpenSlider}
+            />
+            <Box>{chatData.model.name}</Box>
+            <Menu autoSelect={false}>
+              <MenuButton lineHeight={1}>
+                <MyIcon
+                  name={'more'}
+                  w={'16px'}
+                  h={'16px'}
                  color={useColorModeValue('blackAlpha.700', 'white')}
                />
-            </Box>
-            <Box>{chatData?.name}</Box>
+              </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>
          <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
            <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
            <DrawerContent maxWidth={'250px'}>
-              <SlideBar
-                resetChat={resetChat}
-                chatId={chatId}
-                modelId={modelId}
-                history={chatData.history}
-                onClose={onCloseSlider}
-              />
+              <PhoneSliderBar chatId={chatId} modelId={modelId} onClose={onCloseSlider} />
            </DrawerContent>
          </Drawer>
        </Box>
      )}

+      {/* 聊天内容 */}
+      {modelId && (
        <Flex
-        {...media({ h: '100%', w: 0 }, { h: 0, w: '100%' })}
+          position={'relative'}
+          h={[0, '100%']}
+          w={['100%', 0]}
          flex={'1 0 0'}
          flexDirection={'column'}
        >
-        {/* 聊天内容 */}
          <Box
            id={'history'}
            ref={ChatBox}
@@ -465,13 +608,13 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
            flex={'1 0 0'}
            h={0}
            w={'100%'}
-          overflowY={'auto'}
+            overflow={'overlay'}
          >
            {chatData.history.map((item, index) => (
              <Box
                key={item._id}
-              py={media(9, 6)}
-              px={media(4, 2)}
+                py={[6, 9]}
+                px={[2, 4]}
                backgroundColor={
                  index % 2 !== 0 ? useColorModeValue('blackAlpha.50', 'gray.700') : ''
                }
@@ -480,10 +623,14 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
              >
                <Flex maxW={'750px'} m={'auto'} alignItems={'flex-start'}>
                  <Menu autoSelect={false}>
-                  <MenuButton as={Box} mr={media(4, 1)} cursor={'pointer'}>
+                    <MenuButton as={Box} mr={[1, 4]} cursor={'pointer'}>
                      <Image
                        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"
                        w={['20px', '30px']}
                        maxH={'50px'}
@@ -491,6 +638,11 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                      />
                    </MenuButton>
                    <MenuList fontSize={'sm'}>
+                      {chatData.model.canUse && (
+                        <MenuItem onClick={() => router.push(`/model?modelId=${chatData.modelId}`)}>
+                          模型详情
+                        </MenuItem>
+                      )}
                      <MenuItem onClick={() => onclickCopy(item.value)}>复制</MenuItem>
                      <MenuItem onClick={() => delChatRecord(index, item._id)}>删除该行</MenuItem>
                    </MenuList>
@@ -528,7 +680,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                          name="copy"
                          w={'14px'}
                          cursor={'pointer'}
-                        color={'alphaBlack.400'}
+                          color={'blackAlpha.700'}
                          onClick={() => onclickCopy(item.value)}
                        />
                      </Box>
@@ -536,7 +688,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                        name="delete"
                        w={'14px'}
                        cursor={'pointer'}
-                      color={'alphaBlack.400'}
+                        color={'blackAlpha.700'}
                        _hover={{
                          color: 'red.600'
                        }}
@@ -547,18 +699,17 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                </Flex>
              </Box>
            ))}
-          {chatData.history.length === 0 && (
-            <Empty modelName={chatData.name} intro={chatData.intro} />
-          )}
+            {chatData.history.length === 0 && <Empty model={chatData.model} />}
          </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
                py={'18px'}
                position={'relative'}
                boxShadow={`0 0 15px rgba(0,0,0,0.1)`}
-            border={media('1px solid', '0')}
-            borderColor={useColorModeValue('gray.200', 'gray.700')}
+                borderTop={['1px solid', 0]}
+                borderTopColor={useColorModeValue('gray.200', 'gray.700')}
                borderRadius={['none', 'md']}
                backgroundColor={useColorModeValue('white', 'gray.700')}
              >
@@ -582,6 +733,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                  overflowY={'auto'}
                  whiteSpace={'pre-wrap'}
                  wordBreak={'break-all'}
+                  boxShadow={'none !important'}
                  color={useColorModeValue('blackAlpha.700', 'white')}
                  onChange={(e) => {
                    const textarea = e.target;
@@ -635,7 +787,15 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                </Flex>
              </Box>
            </Box>
+          ) : (
+            <Box m={['0 auto', '20px auto']} w={'100%'} textAlign={'center'} color={'myGray.500'}>
+              作者已关闭分享
+            </Box>
+          )}
+
+          <Loading loading={isLoading} fixed={false} />
        </Flex>
+      )}

      {/* system prompt show modal */}
      {
@@ -655,11 +815,10 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {

 export default Chat;

-export async function getServerSideProps(context: any) {
-  const modelId = context?.query?.modelId || '';
-  const chatId = context?.query?.chatId || '';
-
+Chat.getInitialProps = ({ query, req }: any) => {
  return {
-    props: { modelId, chatId }
+    modelId: query?.modelId || '',
+    chatId: query?.chatId || '',
+    isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
  };
-}
+};
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -15,7 +15,7 @@ const Home = () => {
  }, [inviterId]);

  return (
-    <>
+    <Box p={[5, 10]}>
      <Card p={5} lineHeight={2}>
        <Markdown source={data} isChatting={false} />
      </Card>
@@ -28,7 +28,7 @@ const Home = () => {
        </Box>
        <Box>Made by FastGpt Team.</Box>
      </Card>
-    </>
+    </Box>
  );
 };

--- a/src/pages/login/components/ForgetPasswordForm.tsx
+++ b/src/pages/login/components/ForgetPasswordForm.tsx
@@ -159,7 +159,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
          float={'right'}
          fontSize="sm"
          mt={2}
-          color={'blue.600'}
+          color={'myBlue.600'}
          cursor={'pointer'}
          _hover={{ textDecoration: 'underline' }}
          onClick={() => setPageType('login')}
--- a/src/pages/login/components/LoginForm.tsx
+++ b/src/pages/login/components/LoginForm.tsx
@@ -97,7 +97,7 @@ const LoginForm = ({ setPageType, loginSuccess }: Props) => {
            {!!errors.password && errors.password.message}
          </FormErrorMessage>
        </FormControl>
-        <Flex align={'center'} justifyContent={'space-between'} mt={6} color={'blue.600'}>
+        <Flex align={'center'} justifyContent={'space-between'} mt={6} color={'myBlue.600'}>
          <Box
            cursor={'pointer'}
            _hover={{ textDecoration: 'underline' }}
--- a/src/pages/login/components/RegisterForm.tsx
+++ b/src/pages/login/components/RegisterForm.tsx
@@ -167,7 +167,7 @@ const RegisterForm = ({ setPageType, loginSuccess }: Props) => {
          float={'right'}
          fontSize="sm"
          mt={2}
-          color={'blue.600'}
+          color={'myBlue.600'}
          cursor={'pointer'}
          _hover={{ textDecoration: 'underline' }}
          onClick={() => setPageType('login')}
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@@ -11,18 +11,18 @@ import dynamic from 'next/dynamic';
 const RegisterForm = dynamic(() => import('./components/RegisterForm'));
 const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm'));

-const Login = () => {
+const Login = ({ isPcDevice }: { isPcDevice: boolean }) => {
  const router = useRouter();
  const { lastRoute = '' } = router.query as { lastRoute: string };
-  const { isPc } = useScreen();
+  const { isPc } = useScreen({ defaultIsPc: isPcDevice });
  const [pageType, setPageType] = useState<`${PageTypeEnum}`>(PageTypeEnum.login);
  const { setUserInfo } = useUserStore();

  const loginSuccess = useCallback(
    (res: ResLogin) => {
-      setUserInfo(res.user, res.token);
+      setUserInfo(res.user);
      setTimeout(() => {
-        router.push(lastRoute ? decodeURIComponent(lastRoute) : '/model/list');
+        router.push(lastRoute ? decodeURIComponent(lastRoute) : '/model');
      }, 100);
    },
    [lastRoute, router, setUserInfo]
@@ -41,7 +41,7 @@ const Login = () => {
  }

  useEffect(() => {
-    router.prefetch('/model/list');
+    router.prefetch('/model');
  }, [router]);

  return (
@@ -60,7 +60,8 @@ const Login = () => {
        backgroundColor={'#fff'}
        alignItems={'center'}
        justifyContent={'center'}
-        p={10}
+        py={[5, 10]}
+        px={'5vw'}
        borderRadius={isPc ? 'md' : 'none'}
        gap={5}
      >
@@ -95,3 +96,9 @@ const Login = () => {
 };

 export default Login;
+
+Login.getInitialProps = ({ query, req }: any) => {
+  return {
+    isPcDevice: !/Mobile/.test(req ? req.headers['user-agent'] : navigator.userAgent)
+  };
+};
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<?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>
				`@@ -1 +0,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>