feat: 响应式支持移动端 (#49 )

* feat: 响应式兼容 h5 * feat: 补充空状态 * feat: thinking * chore: @vueuse/core 导致的类型检查错误 * chore: version 2.4.0
chore: version 2.3.3
2025-07-23 22:34:44 +00:00 · 2023-02-17 10:57:06 +08:00 · 2023-02-16 21:03:12 +08:00 · 2023-02-16 20:30:49 +08:00 · 2023-02-16 20:29:46 +08:00 · 2023-02-16 20:25:29 +08:00
23 changed files with 503 additions and 105 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,6 @@
+node_modules
+Dockerfile
+.git
+.husky
+.github
+.vscode
--- a/.github/workflows/build_docker.yml
+++ b/.github/workflows/build_docker.yml
@@ -0,0 +1,37 @@
+name: build_docker
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  build_docker:
+    name: Build docker
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: chenzhaoyu94/chatgpt-web
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to DockerHub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64,linux/arm64
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -23,7 +23,9 @@
    "axios",
    "bumpp",
    "chatgpt",
+    "chenzhaoyu",
    "commitlint",
+    "dockerhub",
    "esno",
    "GPTAPI",
    "iconify",
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,23 @@
+## v2.4.0
+
+`2023-02-17`
+
+### Feature
+- 响应式支持移动端
+### Enhancement
+- 修改部份描述错误
+## v2.3.3
+
+`2023-02-16`
+
+### Feature
+- 添加 `README` 部份说明和贡献列表
+- 添加 `docker` 镜像
+- 添加 `GitHub Action` 自动化构建
+
+### BugFix
+- 回退依赖更新导致的 [Eslint 报错](https://github.com/eslint/eslint/issues/16896)
+
 ## v2.3.2

 `2023-02-16`
--- a/20
+++ b/20
@@ -0,0 +1,20 @@
+# build front-end
+FROM node:lts-alpine AS builder
+
+COPY ./ /app
+WORKDIR /app
+
+RUN npm install pnpm -g && pnpm install && pnpm run build
+
+# service
+FROM node:lts-alpine
+
+COPY /service /app
+COPY --from=builder /app/dist /app/public
+
+WORKDIR /app
+RUN npm install pnpm -g && pnpm install
+
+EXPOSE 3002
+
+CMD ["pnpm", "run", "start"]
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@

 使用 express 和 vue3 搭建的 ChartGPT 演示网页

-![cover](./docs/cover-2.png)
+![PC](./docs/c1.png)
+
+![Mobile](./docs/c2.png)

 > 提示：目前 `OpenAI` 开放的模型最高只有 `GPT-3`，和现在网页所使用的 `GPT-3.5` 或 `GPT-4` 有很大差距，需要等官方开放最新的模型接口。

@@ -97,9 +99,37 @@ pnpm prod

 PS: 不进行打包，直接在服务器上运行 `pnpm start` 也可

+## Docker build & run
+
+[参考信息](https://github.com/Chanzhaoyu/chatgpt-web/pull/42)
+
+```bash
+docker build -t chatgpt-web .
+```
+
+## Docker compose
+
+[Hub 地址](https://hub.docker.com/repository/docker/chenzhaoyu94/chatgpt-web/general)
+
+```yml
+version: '3'
+
+services:
+  app:
+    image: chenzhaoyu94/chatgpt-web:main
+    ports:
+      - 3002:3002
+    environment:
+      OPENAI_API_KEY: xxxxxx
+```
+
+
 ### 网页
+
 根目录下运行以下命令，然后将 `dist` 文件夹复制到你的托管服务器上

+[参考信息](https://cn.vitejs.dev/guide/static-deploy.html#building-the-app)
+
 ```shell
 pnpm build
 ```
@@ -117,5 +147,15 @@ Q: 文件保存时全部爆红?

 A: `vscode` 请安装项目推荐插件，或手动安装 `Eslint` 插件。

+## 参与贡献
+
+贡献之前请先阅读 [贡献指南](./CONTRIBUTING.md)
+
+感谢所有做过贡献的人!
+
+<a href="https://github.com/Chanzhaoyu/chatgpt-web/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Chanzhaoyu/chatgpt-web" />
+</a>
+
 ## License
 MIT © [ChenZhaoYu](./license)
--- a/docs/c1.png
+++ b/docs/c1.png
--- a/docs/c2.png
+++ b/docs/c2.png
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "chatgpt-web",
-  "version": "2.3.2",
+  "version": "2.4.0",
  "private": false,
  "description": "ChatGPT Web",
  "author": "ChenZhaoYu <chenzhaoyu1994@gmail.com>",
@@ -16,12 +16,14 @@
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "bootstrap": "pnpm install && pnpm run common:prepare",
    "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml",
    "common:prepare": "husky install"
  },
  "dependencies": {
+    "@vueuse/core": "^9.12.0",
    "highlight.js": "^11.7.0",
    "naive-ui": "^2.34.3",
    "pinia": "^2.0.30",
@@ -35,12 +37,14 @@
    "@iconify/vue": "^4.1.0",
    "@types/crypto-js": "^4.1.1",
    "@types/node": "^18.13.0",
+    "@types/web-bluetooth": "^0.0.16",
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.13",
    "axios": "^1.3.3",
    "crypto-js": "^4.1.1",
    "eslint": "^8.34.0",
    "husky": "^8.0.3",
+    "less": "^4.1.3",
    "lint-staged": "^13.1.2",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,13 +7,16 @@ specifiers:
  '@iconify/vue': ^4.1.0
  '@types/crypto-js': ^4.1.1
  '@types/node': ^18.13.0
+  '@types/web-bluetooth': ^0.0.16
  '@vitejs/plugin-vue': ^4.0.0
+  '@vueuse/core': ^9.12.0
  autoprefixer: ^10.4.13
  axios: ^1.3.3
  crypto-js: ^4.1.1
  eslint: ^8.34.0
  highlight.js: ^11.7.0
  husky: ^8.0.3
+  less: ^4.1.3
  lint-staged: ^13.1.2
  naive-ui: ^2.34.3
  npm-run-all: ^4.1.5
@@ -28,6 +31,7 @@ specifiers:
  vue-tsc: ^1.1.0

 dependencies:
+  '@vueuse/core': 9.12.0_vue@3.2.47
  highlight.js: 11.7.0
  naive-ui: 2.34.3_vue@3.2.47
  pinia: 2.0.30_hmuptsblhheur2tugfgucj7gc4
@@ -41,19 +45,21 @@ devDependencies:
  '@iconify/vue': 4.1.0_vue@3.2.47
  '@types/crypto-js': 4.1.1
  '@types/node': 18.13.0
+  '@types/web-bluetooth': 0.0.16
  '@vitejs/plugin-vue': 4.0.0_vite@4.1.1+vue@3.2.47
  autoprefixer: 10.4.13_postcss@8.4.21
  axios: 1.3.3
  crypto-js: 4.1.1
  eslint: 8.34.0
  husky: 8.0.3
+  less: 4.1.3
  lint-staged: 13.1.2
  npm-run-all: 4.1.5
  postcss: 8.4.21
  rimraf: 4.1.2
  tailwindcss: 3.2.6_postcss@8.4.21
  typescript: 4.9.5
-  vite: 4.1.1_@types+node@18.13.0
+  vite: 4.1.1_edl3ajnhen4c5iqs57t4gqrzly
  vue-tsc: 1.1.0_typescript@4.9.5

 packages:
@@ -755,6 +761,9 @@ packages:
    resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
    dev: true

+  /@types/web-bluetooth/0.0.16:
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
  /@typescript-eslint/eslint-plugin/5.52.0_6cfvjsbua5ptj65675bqcn6oza:
    resolution: {integrity: sha512-lHazYdvYVsBokwCdKOppvYJKaJ4S41CgKBcPvyd0xjZNbvQdhn/pnJlGtQksQ/NhInzdaeaSarlBjDXHuclEbg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -892,7 +901,7 @@ packages:
      vite: ^4.0.0
      vue: ^3.2.25
    dependencies:
-      vite: 4.1.1_@types+node@18.13.0
+      vite: 4.1.1_edl3ajnhen4c5iqs57t4gqrzly
      vue: 3.2.47
    dev: true

@@ -1012,6 +1021,31 @@ packages:
  /@vue/shared/3.2.47:
    resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}

+  /@vueuse/core/9.12.0_vue@3.2.47:
+    resolution: {integrity: sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.12.0
+      '@vueuse/shared': 9.12.0_vue@3.2.47
+      vue-demi: 0.13.11_vue@3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/metadata/9.12.0:
+    resolution: {integrity: sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==}
+    dev: false
+
+  /@vueuse/shared/9.12.0_vue@3.2.47:
+    resolution: {integrity: sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==}
+    dependencies:
+      vue-demi: 0.13.11_vue@3.2.47
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
  /JSONStream/1.3.5:
    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
    hasBin: true
@@ -1268,7 +1302,7 @@ packages:
    hasBin: true
    dependencies:
      caniuse-lite: 1.0.30001452
-      electron-to-chromium: 1.4.298
+      electron-to-chromium: 1.4.296
      node-releases: 2.0.10
      update-browserslist-db: 1.0.10_browserslist@4.21.5
    dev: true
@@ -1490,6 +1524,12 @@ packages:
      through2: 4.0.2
    dev: true

+  /copy-anything/2.0.6:
+    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
+    dependencies:
+      is-what: 3.14.1
+    dev: true
+
  /cosmiconfig-typescript-loader/4.3.0_p7cp6dsfhdrlk7mvuxd3wodbsu:
    resolution: {integrity: sha512-NTxV1MFfZDLPiBMjxbHRwSh5LaLcPMwNdCutmnHJCKoVnlvldPWlllonKwrsRJ5pYZBIBGRWWU2tfvzxgeSW5Q==}
    engines: {node: '>=12', npm: '>=6'}
@@ -1724,8 +1764,8 @@ packages:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true

-  /electron-to-chromium/1.4.298:
-    resolution: {integrity: sha512-dJZurgxDeaqn90VmS23Xz+QPQQl84BxnlAfwCDFNjfEhqO2yLMDkeaDoJ1yPXAbmiqTi+hd5TpB5zi1N4hwBuQ==}
+  /electron-to-chromium/1.4.296:
+    resolution: {integrity: sha512-i/6Q+Y9bluDa2a0NbMvdtG5TuS/1Fr3TKK8L+7UUL9QjRS5iFJzCC3r70xjyOnLiYG8qGV4/mMpe6HuAbdJW4w==}
    dev: true

  /emoji-regex/8.0.0:
@@ -1741,6 +1781,15 @@ packages:
    engines: {node: '>=0.12'}
    dev: true

+  /errno/0.1.8:
+    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      prr: 1.0.1
+    dev: true
+    optional: true
+
  /error-ex/1.3.2:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
    dependencies:
@@ -2052,7 +2101,7 @@ packages:
      ci-info: 3.8.0
      clean-regexp: 1.0.0
      eslint: 8.34.0
-      esquery: 1.4.1
+      esquery: 1.4.0
      indent-string: 4.0.0
      is-builtin-module: 3.2.1
      jsesc: 3.0.2
@@ -2186,7 +2235,7 @@ packages:
      eslint-utils: 3.0.0_eslint@8.34.0
      eslint-visitor-keys: 3.3.0
      espree: 9.4.1
-      esquery: 1.4.1
+      esquery: 1.4.0
      esutils: 2.0.3
      fast-deep-equal: 3.1.3
      file-entry-cache: 6.0.1
@@ -2224,8 +2273,8 @@ packages:
      eslint-visitor-keys: 3.3.0
    dev: true

-  /esquery/1.4.1:
-    resolution: {integrity: sha512-3ZggxvMv5EEY1ssUVyHSVt0oPreyBfbUi1XikJVfjFiBeBDLdrb0IWoDiEwqT/2sUQi0TGaWtFhOGDD8RTpXgQ==}
+  /esquery/1.4.0:
+    resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
    engines: {node: '>=0.10'}
    dependencies:
      estraverse: 5.3.0
@@ -2634,11 +2683,27 @@ packages:
    hasBin: true
    dev: true

+  /iconv-lite/0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+    optional: true
+
  /ignore/5.2.4:
    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
    engines: {node: '>= 4'}
    dev: true

+  /image-size/0.5.5:
+    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /import-fresh/3.3.0:
    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
    engines: {node: '>=6'}
@@ -2874,6 +2939,10 @@ packages:
      call-bind: 1.0.2
    dev: true

+  /is-what/3.14.1:
+    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
+    dev: true
+
  /isexe/2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true
@@ -2959,6 +3028,26 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /less/4.1.3:
+    resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      copy-anything: 2.0.6
+      parse-node-version: 1.0.1
+      tslib: 2.5.0
+    optionalDependencies:
+      errno: 0.1.8
+      graceful-fs: 4.2.10
+      image-size: 0.5.5
+      make-dir: 2.1.0
+      mime: 1.6.0
+      needle: 3.2.0
+      source-map: 0.6.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
  /levn/0.4.1:
    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
    engines: {node: '>= 0.8.0'}
@@ -3116,6 +3205,16 @@ packages:
    dependencies:
      sourcemap-codec: 1.4.8

+  /make-dir/2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.1
+    dev: true
+    optional: true
+
  /make-error/1.3.6:
    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
    dev: true
@@ -3206,6 +3305,14 @@ packages:
      mime-db: 1.52.0
    dev: true

+  /mime/1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /mimic-fn/2.1.0:
    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
    engines: {node: '>=6'}
@@ -3298,6 +3405,20 @@ packages:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
    dev: true

+  /needle/3.2.0:
+    resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==}
+    engines: {node: '>= 4.4.x'}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      debug: 3.2.7
+      iconv-lite: 0.6.3
+      sax: 1.2.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+    optional: true
+
  /nice-try/1.0.5:
    resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
    dev: true
@@ -3512,6 +3633,11 @@ packages:
      lines-and-columns: 1.2.4
    dev: true

+  /parse-node-version/1.0.1:
+    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
  /path-exists/4.0.0:
    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
    engines: {node: '>=8'}
@@ -3583,6 +3709,12 @@ packages:
    engines: {node: '>=4'}
    dev: true

+  /pify/4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+    dev: true
+    optional: true
+
  /pinia/2.0.30_hmuptsblhheur2tugfgucj7gc4:
    resolution: {integrity: sha512-q6DUmxWwe/mQgg+55QQjykpKC+aGeGdaJV3niminl19V08dE+LRTvSEuqi6/NLSGCKHI49KGL6tMNEOssFiMyA==}
    peerDependencies:
@@ -3684,6 +3816,11 @@ packages:
    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
    dev: true

+  /prr/1.0.1:
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
+    dev: true
+    optional: true
+
  /punycode/2.3.0:
    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
    engines: {node: '>=6'}
@@ -3896,6 +4033,16 @@ packages:
      regexp-tree: 0.1.24
    dev: true

+  /safer-buffer/2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: true
+    optional: true
+
+  /sax/1.2.4:
+    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: true
+    optional: true
+
  /seemly/0.3.6:
    resolution: {integrity: sha512-lEV5VB8BUKTo/AfktXJcy+JeXns26ylbMkIUco8CYREsQijuz4mrXres2Q+vMLdwkuLxJdIPQ8IlCIxLYm71Yw==}
    dev: false
@@ -4380,7 +4527,7 @@ packages:
      vue: 3.2.47
    dev: false

-  /vite/4.1.1_@types+node@18.13.0:
+  /vite/4.1.1_edl3ajnhen4c5iqs57t4gqrzly:
    resolution: {integrity: sha512-LM9WWea8vsxhr782r9ntg+bhSFS06FJgCvvB0+8hf8UWtvaiDagKYWXndjfX6kGl74keHJUcpzrQliDXZlF5yg==}
    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
@@ -4407,6 +4554,7 @@ packages:
    dependencies:
      '@types/node': 18.13.0
      esbuild: 0.16.17
+      less: 4.1.3
      postcss: 8.4.21
      resolve: 1.22.1
      rollup: 3.15.0
@@ -4449,7 +4597,7 @@ packages:
      eslint-scope: 7.1.1
      eslint-visitor-keys: 3.3.0
      espree: 9.4.1
-      esquery: 1.4.1
+      esquery: 1.4.0
      lodash: 4.17.21
      semver: 7.3.8
    transitivePeerDependencies:
--- a/service/package.json
+++ b/service/package.json
@@ -23,7 +23,7 @@
    "common:cleanup": "rimraf node_modules && rimraf pnpm-lock.yaml"
  },
  "dependencies": {
-    "chatgpt": "^4.4.1",
+    "chatgpt": "^4.3.2",
    "dotenv": "^16.0.3",
    "esno": "^0.16.3",
    "express": "^4.18.2",
@@ -35,7 +35,7 @@
    "@types/node": "^18.13.0",
    "eslint": "^8.34.0",
    "rimraf": "^4.1.2",
-    "tsup": "^6.6.3",
+    "tsup": "^6.6.2",
    "typescript": "^4.9.5"
  }
 }
--- a/service/pnpm-lock.yaml
+++ b/service/pnpm-lock.yaml
@@ -4,18 +4,18 @@ specifiers:
  '@antfu/eslint-config': ^0.35.2
  '@types/express': ^4.17.17
  '@types/node': ^18.13.0
-  chatgpt: ^4.4.1
+  chatgpt: ^4.3.2
  dotenv: ^16.0.3
  eslint: ^8.34.0
  esno: ^0.16.3
  express: ^4.18.2
  isomorphic-fetch: ^3.0.0
  rimraf: ^4.1.2
-  tsup: ^6.6.3
+  tsup: ^6.6.2
  typescript: ^4.9.5

 dependencies:
-  chatgpt: 4.4.1
+  chatgpt: 4.4.0
  dotenv: 16.0.3
  esno: 0.16.3
  express: 4.18.2
@@ -856,8 +856,8 @@ packages:
    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
    dev: true

-  /chatgpt/4.4.1:
-    resolution: {integrity: sha512-rccShNzq/aE4LMmwTW4IOHIAZgNRbX0KetVKRCdR4SkRXz63FWzOfu8pNbaN65gsvvXwXyRzD7W4LLDyXe4TYg==}
+  /chatgpt/4.4.0:
+    resolution: {integrity: sha512-rS1F423hR5marIB7hvZ4KyczK9oFloWY+AR4WKIt+HLyiRgOOWv6V4olu1HvaoOayc5+A/N2WwX0SzuU1rI9Rg==}
    engines: {node: '>=18'}
    dependencies:
      eventsource-parser: 0.0.5
@@ -1393,7 +1393,7 @@ packages:
      ci-info: 3.8.0
      clean-regexp: 1.0.0
      eslint: 8.34.0
-      esquery: 1.4.1
+      esquery: 1.4.0
      indent-string: 4.0.0
      is-builtin-module: 3.2.1
      jsesc: 3.0.2
@@ -1527,7 +1527,7 @@ packages:
      eslint-utils: 3.0.0_eslint@8.34.0
      eslint-visitor-keys: 3.3.0
      espree: 9.4.1
-      esquery: 1.4.1
+      esquery: 1.4.0
      esutils: 2.0.3
      fast-deep-equal: 3.1.3
      file-entry-cache: 6.0.1
@@ -1572,8 +1572,8 @@ packages:
      eslint-visitor-keys: 3.3.0
    dev: true

-  /esquery/1.4.1:
-    resolution: {integrity: sha512-3ZggxvMv5EEY1ssUVyHSVt0oPreyBfbUi1XikJVfjFiBeBDLdrb0IWoDiEwqT/2sUQi0TGaWtFhOGDD8RTpXgQ==}
+  /esquery/1.4.0:
+    resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==}
    engines: {node: '>=0.10'}
    dependencies:
      estraverse: 5.3.0
@@ -3296,7 +3296,7 @@ packages:
      eslint-scope: 7.1.1
      eslint-visitor-keys: 3.3.0
      espree: 9.4.1
-      esquery: 1.4.1
+      esquery: 1.4.0
      lodash: 4.17.21
      semver: 7.3.8
    transitivePeerDependencies:
--- a/src/components/business/Chat/index.vue
+++ b/src/components/business/Chat/index.vue
@@ -1,5 +1,6 @@
 <script setup lang='ts'>
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { MessageReactive } from 'naive-ui'
 import { NButton, NInput, useMessage } from 'naive-ui'
 import { Message } from './components'
 import { Layout } from './layout'
@@ -14,6 +15,8 @@ const ms = useMessage()

 const historyStore = useHistoryStore()

+let messageReactive: MessageReactive | null = null
+
 const scrollRef = ref<HTMLDivElement>()

 const { addChat, clearChat } = useChat()
@@ -51,6 +54,7 @@ async function handleSubmit() {

  try {
    loading.value = true
+    createMessage()
    const { data } = await fetchChatAPI(message, options, controller.signal)
    addMessage(data?.text ?? '', { options: { conversationId: data.conversationId, parentMessageId: data.id } })
  }
@@ -60,6 +64,7 @@ async function handleSubmit() {
  }
  finally {
    loading.value = false
+    removeMessage()
  }
 }

@@ -89,12 +94,32 @@ function handleCancel() {
  controller.abort()
  controller = new AbortController()
  loading.value = false
+  removeMessage()
+}
+
+function createMessage() {
+  if (!messageReactive) {
+    messageReactive = ms.loading('Thinking...', {
+      duration: 0,
+    })
+  }
+}
+
+function removeMessage() {
+  if (messageReactive) {
+    messageReactive.destroy()
+    messageReactive = null
+  }
 }

 onMounted(() => {
  scrollToBottom()
 })

+onBeforeUnmount(() => {
+  handleCancel()
+})
+
 watch(
  heartbeat,
  () => {
@@ -119,12 +144,20 @@ watch(
    <div class="flex flex-col h-full">
      <main class="flex-1 overflow-hidden">
        <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
-          <div>
-            <Message
-              v-for="(item, index) of list" :key="index" :date-time="item.dateTime" :message="item.message"
-              :reversal="item.reversal" :error="item.error"
-            />
-          </div>
+          <template v-if="!list.length">
+            <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
+              <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
+              <span>Aha~</span>
+            </div>
+          </template>
+          <template v-else>
+            <div>
+              <Message
+                v-for="(item, index) of list" :key="index" :date-time="item.dateTime" :message="item.message"
+                :reversal="item.reversal" :error="item.error"
+              />
+            </div>
+          </template>
        </div>
      </main>
      <footer class="p-4">
@@ -135,7 +168,7 @@ watch(
            </span>
          </HoverButton>
          <NInput v-model:value="prompt" placeholder="Type a message..." @keypress="handleEnter" />
-          <NButton type="primary" :loading="loading" @click="handleSubmit">
+          <NButton type="primary" :disabled="loading" @click="handleSubmit">
            <template #icon>
              <SvgIcon icon="ri:send-plane-fill" />
            </template>
--- a/src/components/business/Chat/layout/Layout.vue
+++ b/src/components/business/Chat/layout/Layout.vue
@@ -1,15 +1,42 @@
 <script setup lang='ts'>
+import { computed } from 'vue'
 import { NLayout, NLayoutContent } from 'naive-ui'
 import Sider from './sider/index.vue'
+import Header from './header/index.vue'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+
+const { isMobile } = useBasicLayout()
+
+const collapsed = computed(() => appStore.siderCollapsed)
+
+const getMobileClass = computed(() => {
+  if (isMobile.value)
+    return ['rounded-none', 'shadow-none']
+  return ['border', 'rounded-md', 'shadow-md']
+})
+
+const getContainerClass = computed(() => {
+  return [
+    'h-full',
+    { 'pt-14': isMobile.value },
+    { 'pl-[260px]': !isMobile.value && !collapsed.value },
+  ]
+})
 </script>

 <template>
-  <div class="h-full overflow-hidden border rounded-md shadow-md">
-    <NLayout class="h-full" has-sider>
-      <Sider />
-      <NLayoutContent class="h-full">
-        <slot />
-      </NLayoutContent>
-    </NLayout>
+  <div class="h-screen p-4" :class="[{ 'p-0': isMobile }]">
+    <div class="h-full overflow-hidden" :class="getMobileClass">
+      <NLayout class="z-40 transition" :class="getContainerClass" has-sider>
+        <Sider />
+        <Header v-if="isMobile" />
+        <NLayoutContent class="h-full">
+          <slot />
+        </NLayoutContent>
+      </NLayout>
+    </div>
  </div>
 </template>
--- a/src/components/business/Chat/layout/header/index.vue
+++ b/src/components/business/Chat/layout/header/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { SvgIcon } from '@/components/common'
+import { useAppStore, useHistoryStore } from '@/store'
+
+const appStore = useAppStore()
+const historyStore = useHistoryStore()
+
+const collapsed = computed(() => appStore.siderCollapsed)
+
+function handleAdd() {
+  historyStore.addHistory({
+    title: 'New Chat',
+    isEdit: false,
+    data: [],
+  })
+}
+
+function handleUpdateCollapsed() {
+  appStore.setSiderCollapsed(!collapsed.value)
+}
+</script>
+
+<template>
+  <header class="fixed top-0 left-0 right-0 z-50 border-b bg-white/80 backdrop-blur">
+    <div class="relative flex items-center justify-between px-4 h-14">
+      <button class="flex items-center justify-center w-11 h-11" @click="handleUpdateCollapsed">
+        <SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify" />
+        <SvgIcon v-else class="text-2xl" icon="ri:align-right" />
+      </button>
+      <button class="flex items-center justify-center w-11 h-11" @click="handleAdd">
+        <SvgIcon class="text-2xl" icon="ri:add-fill" />
+      </button>
+    </div>
+  </header>
+</template>
--- a/src/components/business/Chat/layout/sider/Footer.vue
+++ b/src/components/business/Chat/layout/sider/Footer.vue
@@ -1,14 +0,0 @@
-<script setup lang='ts'>
-import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
-</script>
-
-<template>
-  <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t h-[70px]">
-    <UserAvatar class="flex-1" />
-    <HoverButton tooltip="Setting">
-      <span class="text-xl text-[#4f555e]">
-        <SvgIcon icon="ri:settings-4-line" />
-      </span>
-    </HoverButton>
-  </footer>
-</template>
--- a/src/components/business/Chat/layout/sider/List.vue
+++ b/src/components/business/Chat/layout/sider/List.vue
@@ -33,39 +33,47 @@ function handleEnter(index: number, isEdit: boolean, event: KeyboardEvent) {
 <template>
  <NScrollbar class="px-4">
    <div class="flex flex-col gap-2 text-sm">
-      <div v-for="(item, index) of dataSources" :key="index">
-        <a
-          class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer hover:bg-neutral-100 group"
-          :class="historyStore.active === index && ['border-[#4b9e5f]', 'bg-neutral-100', 'text-[#4b9e5f]', 'pr-14']"
-          @click="handleSelect(index)"
-        >
-          <span>
-            <SvgIcon icon="ri:message-3-line" />
-          </span>
-          <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
-            <NInput
-              v-if="item.isEdit" v-model:value="item.title" size="tiny"
-              @keypress="handleEnter(index, false, $event)"
-            />
-            <span v-else>{{ item.title }}</span>
-          </div>
-          <div v-if="historyStore.active === index" class="absolute z-10 flex visible right-1">
-            <template v-if="item.isEdit">
-              <button class="p-1" @click="handleEdit(index, false, $event)">
-                <SvgIcon icon="ri:save-line" />
-              </button>
-            </template>
-            <template v-else>
-              <button class="p-1">
-                <SvgIcon icon="ri:edit-line" @click="handleEdit(index, true, $event)" />
-              </button>
-              <button class="p-1" @click="handleRemove(index, $event)">
-                <SvgIcon icon="ri:delete-bin-line" />
-              </button>
-            </template>
-          </div>
-        </a>
-      </div>
+      <template v-if="!dataSources.length">
+        <div class="flex flex-col items-center mt-4 text-center text-neutral-300">
+          <SvgIcon icon="ri:inbox-line" class="mb-2 text-3xl" />
+          <span>No history</span>
+        </div>
+      </template>
+      <template v-else>
+        <div v-for="(item, index) of dataSources" :key="index">
+          <a
+            class="relative flex items-center gap-3 px-3 py-3 break-all border rounded-md cursor-pointer hover:bg-neutral-100 group"
+            :class="historyStore.active === index && ['border-[#4b9e5f]', 'bg-neutral-100', 'text-[#4b9e5f]', 'pr-14']"
+            @click="handleSelect(index)"
+          >
+            <span>
+              <SvgIcon icon="ri:message-3-line" />
+            </span>
+            <div class="relative flex-1 overflow-hidden break-all text-ellipsis whitespace-nowrap">
+              <NInput
+                v-if="item.isEdit" v-model:value="item.title" size="tiny"
+                @keypress="handleEnter(index, false, $event)"
+              />
+              <span v-else>{{ item.title }}</span>
+            </div>
+            <div v-if="historyStore.active === index" class="absolute z-10 flex visible right-1">
+              <template v-if="item.isEdit">
+                <button class="p-1" @click="handleEdit(index, false, $event)">
+                  <SvgIcon icon="ri:save-line" />
+                </button>
+              </template>
+              <template v-else>
+                <button class="p-1">
+                  <SvgIcon icon="ri:edit-line" @click="handleEdit(index, true, $event)" />
+                </button>
+                <button class="p-1" @click="handleRemove(index, $event)">
+                  <SvgIcon icon="ri:delete-bin-line" />
+                </button>
+              </template>
+            </div>
+          </a>
+        </div>
+      </template>
    </div>
  </NScrollbar>
 </template>
--- a/src/components/business/Chat/layout/sider/index.vue
+++ b/src/components/business/Chat/layout/sider/index.vue
@@ -1,14 +1,16 @@
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { computed, watch } from 'vue'
 import { NButton, NLayoutSider } from 'naive-ui'
 import List from './List.vue'
-import Footer from './Footer.vue'
+import { HoverButton, SvgIcon, UserAvatar } from '@/components/common'
 import { useAppStore, useHistoryStore } from '@/store'
+import { useBasicLayout } from '@/hooks/useBasicLayout'

 const appStore = useAppStore()
 const historyStore = useHistoryStore()
+const { isMobile } = useBasicLayout()

-const collapsed = ref(appStore.siderCollapsed ?? false)
+const collapsed = computed(() => appStore.siderCollapsed)

 function handleAdd() {
  historyStore.addHistory({
@@ -18,10 +20,17 @@ function handleAdd() {
  })
 }

-function handleCollapsed() {
-  collapsed.value = !collapsed.value
-  appStore.setSiderCollapsed(collapsed.value)
+function handleUpdateCollapsed() {
+  appStore.setSiderCollapsed(!collapsed.value)
 }
+
+watch(
+  isMobile,
+  (val) => {
+    appStore.setSiderCollapsed(val)
+  },
+  { flush: 'post' },
+)
 </script>

 <template>
@@ -29,12 +38,13 @@ function handleCollapsed() {
    :collapsed="collapsed"
    :collapsed-width="0"
    :width="260"
+    :show-trigger="isMobile ? false : 'arrow-circle'"
    collapse-mode="transform"
-    show-trigger="arrow-circle"
+    position="absolute"
    bordered
-    @update:collapsed="handleCollapsed"
+    @update-collapsed="handleUpdateCollapsed"
  >
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col h-full" :class="[{ 'pt-14': isMobile }]">
      <main class="flex-1 min-h-0 overflow-hidden">
        <div class="p-4">
          <NButton dashed block @click="handleAdd">
@@ -43,7 +53,14 @@ function handleCollapsed() {
        </div>
        <List />
      </main>
-      <Footer />
+      <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t h-[70px]">
+        <UserAvatar />
+        <HoverButton tooltip="Setting">
+          <span class="text-xl text-[#4f555e]">
+            <SvgIcon icon="ri:settings-4-line" />
+          </span>
+        </HoverButton>
+      </footer>
    </div>
  </NLayoutSider>
 </template>
--- a/src/components/common/UserAvatar/index.vue
+++ b/src/components/common/UserAvatar/index.vue
@@ -17,7 +17,3 @@ import { GithubSite } from '@/components/custom'
    </div>
  </div>
 </template>
-
-<style>
-
-</style>
--- a/src/hooks/useBasicLayout.ts
+++ b/src/hooks/useBasicLayout.ts
@@ -0,0 +1,8 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+
+export function useBasicLayout() {
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+  const isMobile = breakpoints.smaller('sm')
+
+  return { isMobile }
+}
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -3,7 +3,5 @@ import { Chat } from '@/components/business'
 </script>

 <template>
-  <div class="h-full p-4 overflow-hidden">
-    <Chat />
-  </div>
+  <Chat />
 </template>
--- a/start.sh
+++ b/start.sh
@@ -0,0 +1,11 @@
+
+cd ./service
+nohup pnpm start > service.log &
+echo "Start service complete!"
+
+
+cd ..
+echo "" > front.log
+nohup pnpm dev > front.log &
+echo "Start front complete!"
+tail -f front.log
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
    "paths": {
      "@/*": ["./src/*"]
    },
-    "types": ["vite/client", "node", "naive-ui/volar"]
+    // @vueuse/core 不能通过 vue-tsc 检查，所以这里需要忽略，以后将移除
+    "types": ["vite/client", "node", "naive-ui/volar", "web-bluetooth"]
  },
  "exclude": ["node_modules", "dist", "service"]
 }
Author	SHA1	Message	Date
Redon	3f4cb5c900	feat: 响应式支持移动端 (#49 ) * feat: 响应式兼容 h5 * feat: 补充空状态 * feat: thinking * chore: @vueuse/core 导致的类型检查错误 * chore: version 2.4.0	2023-02-17 10:57:06 +08:00
ChenZhaoYu	405aeaa2a5	chore: version 2.3.3	2023-02-16 21:03:12 +08:00
ChenZhaoYu	fd28468778	chore: build_docker repositories	2023-02-16 20:30:49 +08:00
Stephen Ni	4128d319ed	docs: polish docker run (#44 ) * docs: polish docker run * Update README.md --------- Co-authored-by: Redon <790348264@qq.com>	2023-02-16 20:29:46 +08:00
Jerry Wang	4a06b3943c	优化 docker 构建的镜像文件大小，添加自动化构建 (#42 ) * perf: optimize docker image * perf: shrink image size * fix: build docker image * fix: docker image namespace * docs: add docker compose example * docs: fix docker compose example * docs: fix again :) * docs: and again.....	2023-02-16 20:25:29 +08:00
ChenZhaoYu	77cdcb7798	chore: 添加贡献列表	2023-02-16 14:17:03 +08:00
ChenZhaoYu	ee542a01f7	chore: eslint 依赖报错	2023-02-16 14:03:40 +08:00
ChenZhaoYu	30372c2e70	chore: update README	2023-02-16 13:42:19 +08:00
Void	6646695849	Add Dockerfile (#33 ) * add Dockerfile * update Readme.md * Fixed : Docker log file * Update vite.config.ts	2023-02-16 13:39:07 +08:00