Compare commits

...

67 Commits
v1.4 ... master

Author SHA1 Message Date
Zyronon
c9e2a5d3b9
Merge pull request #109 from zyronon/dependabot/npm_and_yarn/node/axios-1.7.4
build(deps): bump axios from 1.6.7 to 1.7.4 in /node
2024-09-18 16:18:52 +08:00
dependabot[bot]
0f443d5328
build(deps): bump axios from 1.6.7 to 1.7.4 in /node
Bumps [axios](https://github.com/axios/axios) from 1.6.7 to 1.7.4.
- [Release notes](https://github.com/axios/axios/releases)
- [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md)
- [Commits](https://github.com/axios/axios/compare/v1.6.7...v1.7.4)

---
updated-dependencies:
- dependency-name: axios
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-09-18 02:16:05 +00:00
Zyronon
1e30b71800
Merge pull request #108 from zyronon/dependabot/npm_and_yarn/vite-5.2.14
build(deps-dev): bump vite from 5.2.10 to 5.2.14
2024-09-18 10:15:00 +08:00
dependabot[bot]
f9682a17e5
build(deps-dev): bump vite from 5.2.10 to 5.2.14
Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.2.10 to 5.2.14.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.2.14/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.2.14/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-09-17 22:19:45 +00:00
Zyronon
1fd5c98c49
Merge pull request #104 from wangzhiyonglyk/master
fix: 修复纵向滑动的下标的bug
2024-09-08 20:57:53 +08:00
王志勇
9a23497964 fix: 修复纵向滑动的下标的bug 2024-09-08 20:28:16 +08:00
Zyronon
83caeaf669
Merge pull request #90 from zyronon/test
save
2024-06-06 16:46:54 +08:00
Zyronon
0478cc868c
save 2024-06-06 16:46:04 +08:00
zyronon
27ee8d87d6 docs: update readme.md 2024-05-30 14:41:37 +08:00
zyronon
26b2d240b5 Merge remote-tracking branch 'origin/master' 2024-05-30 10:47:07 +08:00
zyronon
8dcda1bd10 fix: root font-size automatic adaptation 2024-05-30 10:46:41 +08:00
Zyronon
84f4febd2e
Update README.ja.md 2024-05-11 00:18:40 +08:00
Zyronon
c5b4f2eb33
Merge pull request #81 from eltociear/update-jpdoc
Update README.ja.md
2024-05-08 13:39:55 +08:00
Ikko Eltociear Ashimine
f18b7b19f3 Update README.ja.md 2024-05-08 14:26:41 +09:00
zyronon
e4a9ce5df3 docs: update README.md 2024-05-08 11:32:42 +08:00
github-actions[bot]
9e2fb6683e docs: Added README."es".md translation via https://github.com/dephraiim/translate-readme 2024-05-08 03:28:40 +00:00
github-actions[bot]
975a95f6da docs: Added README."fr".md translation via https://github.com/dephraiim/translate-readme 2024-05-08 03:28:35 +00:00
github-actions[bot]
84e68fcf6a docs: Added README."de".md translation via https://github.com/dephraiim/translate-readme 2024-05-08 03:28:29 +00:00
github-actions[bot]
4451761e77 docs: Added README."ja".md translation via https://github.com/dephraiim/translate-readme 2024-05-08 03:28:24 +00:00
github-actions[bot]
b7efb141d1 docs: Added README."en".md translation via https://github.com/dephraiim/translate-readme 2024-05-08 03:28:18 +00:00
zyronon
84a38c3678 docs: update README.md 2024-05-08 11:16:48 +08:00
zyronon
a08900bfd8 docs: update README.md 2024-05-07 10:21:23 +08:00
github-actions[bot]
313f38de4f docs: Added README."es".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:19:26 +00:00
github-actions[bot]
1357d8cf9a docs: Added README."fr".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:19:21 +00:00
github-actions[bot]
92029d3703 docs: Added README."de".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:19:16 +00:00
github-actions[bot]
dc973483be docs: Added README."ja".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:19:11 +00:00
github-actions[bot]
07f32c8c1f docs: Added README."en".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:19:05 +00:00
zyronon
d374310e2a docs: update README.md 2024-05-07 10:18:22 +08:00
zyronon
16a1a75ebb docs: update README.md 2024-05-07 10:13:39 +08:00
github-actions[bot]
88dbfc80f8 docs: Added README."es".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:12:07 +00:00
github-actions[bot]
25e2d59310 docs: Added README."fr".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:12:02 +00:00
github-actions[bot]
988b78a437 docs: Added README."de".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:11:56 +00:00
github-actions[bot]
696423d656 docs: Added README."ja".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:11:51 +00:00
github-actions[bot]
9d963d8de3 docs: Added README."en".md translation via https://github.com/dephraiim/translate-readme 2024-05-07 02:11:45 +00:00
zyronon
8d1a405190 docs: update README.md 2024-05-07 10:10:22 +08:00
zyronon
2ed18ca97f Merge branch 'master' into dev 2024-05-07 10:08:28 +08:00
zyronon
34015d5ba8 docs: update README.md 2024-05-06 10:15:09 +08:00
github-actions[bot]
d86cd052c7 docs: Added README."es".md translation via https://github.com/dephraiim/translate-readme 2024-05-06 02:12:51 +00:00
github-actions[bot]
5ecd4a8e8f docs: Added README."fr".md translation via https://github.com/dephraiim/translate-readme 2024-05-06 02:12:46 +00:00
github-actions[bot]
db0c9a522b docs: Added README."de".md translation via https://github.com/dephraiim/translate-readme 2024-05-06 02:12:41 +00:00
github-actions[bot]
9e1d69a55f docs: Added README."ja".md translation via https://github.com/dephraiim/translate-readme 2024-05-06 02:12:35 +00:00
github-actions[bot]
1542bd673a docs: Added README."en".md translation via https://github.com/dephraiim/translate-readme 2024-05-06 02:12:30 +00:00
zyronon
b555aefe11 docs: update README.md 2024-05-06 10:05:25 +08:00
zyronon
e31a5cc7b1 docs: update README.md 2024-05-06 10:03:55 +08:00
zyronon
706bd9fd48 refactor: save 2024-05-04 01:14:00 +08:00
zyronon
91b80ba547 refactor: save 2024-05-04 00:31:47 +08:00
zyronon
eff3277513 refactor: fixed the problem that the scroll component could not remember the height 2024-05-03 17:03:46 +08:00
zyronon
d2b532a760 refactor: fixed the problem that the scroll component could not remember the height 2024-05-03 17:03:28 +08:00
zyronon
de415aeafa refactor: lint code 2024-05-03 00:48:49 +08:00
Zyronon
af2809ec73
Merge pull request #75 from Zihan-Hu/master
refactor: use CSS to prevent selecting
2024-05-02 14:24:23 +08:00
zyronon
2545739964 docs: update README.md 2024-05-02 03:29:04 +08:00
zyronon
d052f60953 refactor: fuck vite defineConfig 2024-05-02 01:08:33 +08:00
zyronon
7f1e157dab refactor: fuck vite defineConfig 2024-05-02 00:31:06 +08:00
zyronon
ca57625cea refactor: fuck vite defineConfig 2024-05-02 00:14:41 +08:00
Zihan Hu
64332a93dd
refactor: use CSS to prevent selecting 2024-05-02 00:01:41 +08:00
zyronon
ea37bb9dff refactor: save 2024-05-01 22:57:01 +08:00
zyronon
939f92da38 refactor: save 2024-05-01 22:53:47 +08:00
zyronon
40d24ae1af refactor: save 2024-05-01 22:43:44 +08:00
zyronon
8b8bef1bff refactor: save 2024-05-01 22:26:37 +08:00
zyronon
b48df2945b refactor: update Dockerfile 2024-05-01 22:14:42 +08:00
zyronon
7cce654633 refactor: update Dockerfile 2024-05-01 22:13:22 +08:00
zyronon
6d95c87a91 refactor: update Dockerfile 2024-05-01 22:07:36 +08:00
zyronon
6b198e8f21 refactor: update Dockerfile 2024-05-01 21:53:13 +08:00
zyronon
6bf2dfedf2 refactor: update Dockerfile 2024-05-01 21:41:20 +08:00
Zyronon
bbbb9ba222
Update .dockerignore 2024-05-01 21:26:24 +08:00
zyronon
2de950fd12 Merge remote-tracking branch 'origin/master' 2024-05-01 21:19:41 +08:00
Zyronon
f99ec38f14
Create docker-image.yml 2024-05-01 21:18:34 +08:00
35 changed files with 4582 additions and 4850 deletions

View File

@ -7,16 +7,12 @@ yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log* lerna-debug.log*
node_modules
.DS_Store .DS_Store
dist-ssr
coverage coverage
*.local *.local
/cypress/videos/ dist
/cypress/screenshots/ node_modules
# Editor directories and files
.vscode/* .vscode/*
!.vscode/extensions.json !.vscode/extensions.json
.idea .idea
@ -25,5 +21,5 @@ coverage
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
docs
*.tsbuildinfo node

View File

@ -44,7 +44,7 @@ jobs:
- name: Build - name: Build
run: pnpm run build-gitee-pages run: pnpm run build-gitee-pages
- name: Deploy to Gitee Pages - name: Deploy to Github Pages
uses: peaceiris/actions-gh-pages@v4 uses: peaceiris/actions-gh-pages@v4
with: with:
github_token: ${{ secrets.GITHUB_TOKEN }} github_token: ${{ secrets.GITHUB_TOKEN }}

View File

@ -37,5 +37,5 @@ jobs:
push: true push: true
platforms: linux/amd64,linux/arm64 platforms: linux/amd64,linux/arm64
tags: | tags: |
ghcr.io/${{ github.repository_owner }}/douyin:${{ steps.vars.outputs.version }} ghcr.io/${{ github.repository_owner }}/douyin-vue:${{ steps.vars.outputs.version }}
ghcr.io/${{ github.repository_owner }}/douyin:latest ghcr.io/${{ github.repository_owner }}/douyin-vue:latest

View File

@ -45,16 +45,25 @@ Github Pages: [https://dy.ttentau.top/](https://dy.ttentau.top/)
【模仿抖音系列】一:[200行代码实现类似Swiper.js的轮播组件](https://juejin.cn/post/7360512664317018146) 【模仿抖音系列】一:[200行代码实现类似Swiper.js的轮播组件](https://juejin.cn/post/7360512664317018146)
【模仿抖音系列】二:[实现抖音 “视频无限滑动“效果](https://juejin.cn/post/7361614921519054883) 【模仿抖音系列】二:[实现抖音 “视频无限滑动“效果](https://juejin.cn/post/7361614921519054883)
【模仿抖音系列】三:[Vue 路由使用介绍以及添加转场动画](https://juejin.cn/post/7362528152777130025) 【模仿抖音系列】三:[Vue 路由使用介绍以及添加转场动画](https://juejin.cn/post/7362528152777130025)
【模仿抖音系列】四:[Vue 有条件路由缓存,就像传统新闻网站一样](https://juejin.cn/post/7365334891473240101)
更多文章正在准备中... 【模仿抖音系列】五:[Github Actions 部署 Pages、同步到 Gitee、翻译 README 、 打包 docker 镜像](https://juejin.cn/post/7365757742381957161)
【模仿抖音系列】六:[使用rem、动态vh自适应移动端](https://juejin.cn/post/7374452765273538595)
## 运行 ## 运行
注意:本项目仅适用于学习和研究,不得用于商业使用 注意:本项目仅适用于学习和研究,不得用于商业使用
### 快速部署至Vercel ### 快速部署至 Vercel
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
### 部署到 Docker
```bash
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
```
### 本地开发 ### 本地开发
**注意:必须 git 命令 clone 下来才能运行,下载 zip 包是无法运行的。如果 clone 速度太慢,推荐使用 gitee 地址** **注意:必须 git 命令 clone 下来才能运行,下载 zip 包是无法运行的。如果 clone 速度太慢,推荐使用 gitee 地址**

View File

@ -25,8 +25,9 @@
## Online-Zugang ## Online-Zugang
Gitee-Seiten:<https://zyronon.gitee.io/douyin/>(Es wird empfohlen, diese Adresse in China zu besuchen) [//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址) "
Hinweis: Gitee-Seiten können derzeit nicht aktualisiert werden, da der Code nicht aktuell ist. Wenn Sie die Firewall umgehen können, empfehle ich den Besuch der folgenden Adresse:
[//]: # "注意Gitee Pages现在无法更新代码不是最新的。如果你能翻墙推荐访问下面地址 "
Github-Seiten:<https://dy.ttentau.top/> Github-Seiten:<https://dy.ttentau.top/>
@ -48,9 +49,9 @@ Github-Seiten:<https://dy.ttentau.top/>
\[Imitation Douyin-Serie] 1:[200 Codezeilen zur Implementierung einer Karussellkomponente ähnlich Swiper.js](https://juejin.cn/post/7360512664317018146) \[Imitation Douyin-Serie] 1:[200 Codezeilen zur Implementierung einer Karussellkomponente ähnlich Swiper.js](https://juejin.cn/post/7360512664317018146)
\[Imitation Douyin-Serie] 2:[Verwirklichen Sie den „unendlich gleitenden Video“-Effekt auf Douyin](https://juejin.cn/post/7361614921519054883) \[Imitation Douyin-Serie] 2:[Verwirklichen Sie den „unendlich gleitenden Video“-Effekt auf Douyin](https://juejin.cn/post/7361614921519054883)
\[Imitation Douyin-Serie] Drei:[Einführung in die Verwendung von Vue-Routing und das Hinzufügen von Übergangsanimationen](https://juejin.cn/post/7362528152777130025) \[Imitation Douyin-Serie] Drei:[Einführung in die Verwendung des Vue-Routings und das Hinzufügen von Übergangsanimationen](https://juejin.cn/post/7362528152777130025)
\[Imitation Douyin-Serie] Vier:[Bedingtes Routen-Caching von Vue, genau wie bei herkömmlichen Nachrichtenseiten](https://juejin.cn/post/7365334891473240101)
Weitere Artikel sind in Vorbereitung... \[Imitation Douyin-Serie] Fünf:[Github-Aktionen stellen Seiten bereit, synchronisieren mit Gitee, übersetzen README, packen Docker-Image](https://juejin.cn/post/7365757742381957161)
## laufen ## laufen
@ -60,8 +61,20 @@ Hinweis: Dieses Projekt ist nur für Studien- und Forschungszwecke geeignet, nic
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
### Auf Docker bereitstellen
```bash
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
```
### lokale Entwicklung ### lokale Entwicklung
**Hinweis: Der Git-Befehl muss geklont werden, damit er ausgeführt werden kann. Das Herunterladen des ZIP-Pakets ist nicht möglich. Wenn die Klongeschwindigkeit zu langsam ist, wird empfohlen, die Gitee-Adresse zu verwenden**
```bash ```bash
git clone https://gitee.com/zyronon/douyin.git (中国使用) git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git https://github.com/zyronon/douyin.git

View File

@ -13,20 +13,21 @@
<a><img src="https://img.shields.io/badge/Powered%20by-Vue-blue"/></a> <a><img src="https://img.shields.io/badge/Powered%20by-Vue-blue"/></a>
</p> </p>
`douyin-vue`is a parody`抖音|TikTok`mobile short video project.`Vue`"Best practices" on the mobile side, comparable to native`App`Silky and smooth experience. Used the latest`Vue`technology stack, based on[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)accomplish. The data is saved locally in the project through[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)The library intercepts the API and returns local json data to simulate real backend requests. `douyin-vue`is a parody`抖音|TikTok`mobile short video project.`Vue`"Best practices" on the mobile side, comparable to native`App` 丝滑流畅的使用体验。使用了最新的 `Vue`technology stack, based on[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)accomplish. The data is saved locally in the project through[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)The library intercepts the API and returns local json data to simulate real backend requests.
<div> <div>
<img width="150px" src='imgs/1.gif' /> <img width="150px" src='docs/imgs/1.gif' />
<img width="150px" src='imgs/2.gif' /> <img width="150px" src='docs/imgs/2.gif' />
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='docs/imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='docs/imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='docs/imgs/5.gif' />
</div> </div>
## Online access ## Online access
Gitee Pages:<https://zyronon.gitee.io/douyin/>(It is recommended to visit this address in China) [//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址) "
Note: Gitee Pages cannot be updated now, the code is not up to date. If you can circumvent the firewall, I recommend visiting the following address:
[//]: # "注意Gitee Pages现在无法更新代码不是最新的。如果你能翻墙推荐访问下面地址 "
Github Pages:<https://dy.ttentau.top/> Github Pages:<https://dy.ttentau.top/>
@ -49,8 +50,8 @@ Github Pages:<https://dy.ttentau.top/>
\[Imitation Douyin Series] 1:[200 lines of code to implement a carousel component similar to Swiper.js](https://juejin.cn/post/7360512664317018146) \[Imitation Douyin Series] 1:[200 lines of code to implement a carousel component similar to Swiper.js](https://juejin.cn/post/7360512664317018146)
\[Imitation Douyin Series] 2:[Realize the "infinite sliding video" effect on Douyin](https://juejin.cn/post/7361614921519054883) \[Imitation Douyin Series] 2:[Realize the "infinite sliding video" effect on Douyin](https://juejin.cn/post/7361614921519054883)
\[Imitation Douyin Series] Three:[Introduction to using Vue routing and adding transition animations](https://juejin.cn/post/7362528152777130025) \[Imitation Douyin Series] Three:[Introduction to using Vue routing and adding transition animations](https://juejin.cn/post/7362528152777130025)
\[Imitation Douyin Series] Four:[Vue conditional route caching, just like traditional news sites](https://juejin.cn/post/7365334891473240101)
More articles are in preparation... \[Imitation Douyin Series] Five:[Github Actions deploy Pages, synchronize to Gitee, translate README, package docker image](https://juejin.cn/post/7365757742381957161)
## run ## run
@ -60,8 +61,20 @@ Note: This project is only suitable for study and research, not for commercial u
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
### Deploy to Docker
```bash
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
```
### local development ### local development
**Note: The git command must be cloned to run. Downloading the zip package cannot run. If the clone speed is too slow, it is recommended to use the gitee address**
```bash ```bash
git clone https://gitee.com/zyronon/douyin.git (中国使用) git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git https://github.com/zyronon/douyin.git
@ -72,7 +85,7 @@ npm run dev
Open your browser and visit:<http://127.0.0.1:3000> Open your browser and visit:<http://127.0.0.1:3000>
**Note: You need to switch the browser to mobile mode, first press`F12`To bring up the console, press`Ctrl+Shift+M`to preview normally** **注意:需要将浏览器切至手机模式,先按 `F12`To bring up the console, press`Ctrl+Shift+M`to preview normally**
## Data Sources ## Data Sources
@ -98,10 +111,10 @@ The above content is all public information on the Internet
## Features and suggestions ## Features and suggestions
The project is currently in the early stages of development, and new features are being added continuously. If you have any features or suggestions for the software, please feel free to contact us.`Issues`raised in The project is currently in the early stages of development and new features are being added continuously. If you have any features or suggestions for the software, please feel free to contact us.`Issues`raised in
If you also like the design ideas of this software, please submit it`PR`, thank you very much for your support! If you also like the design ideas of this software, please submit it`PR`, thank you very much for your support!
## 联系我 ## contact me
You can contact my email<a href="mailto:zyronon@163.com">zyronon@163.com</a> You can contact my email<a href="mailto:zyronon@163.com">zyronon@163.com</a>

View File

@ -16,17 +16,18 @@
`douyin-vue`es una parodia`抖音|TikTok`Proyecto de vídeo corto móvil.`Vue`"Mejores prácticas" en el lado móvil, comparables a las nativas`App`Experiencia sedosa y suave. Usado lo último`Vue`pila de tecnología, basada en[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)lograr. Los datos se guardan localmente en el proyecto a través de[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)La biblioteca intercepta la API y devuelve datos json locales para simular solicitudes de backend reales. `douyin-vue`es una parodia`抖音|TikTok`Proyecto de vídeo corto móvil.`Vue`"Mejores prácticas" en el lado móvil, comparables a las nativas`App`Experiencia sedosa y suave. Usado lo último`Vue`pila de tecnología, basada en[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)lograr. Los datos se guardan localmente en el proyecto a través de[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)La biblioteca intercepta la API y devuelve datos json locales para simular solicitudes de backend reales.
<div> <div>
<img width="150px" src='imgs/1.gif' /> <img width="150px" src='docs/imgs/1.gif' />
<img width="150px" src='imgs/2.gif' /> <img width="150px" src='docs/imgs/2.gif' />
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='docs/imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='docs/imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='docs/imgs/5.gif' />
</div> </div>
## Acceso en linea ## Acceso en linea
Páginas de casas rurales:<https://zyronon.gitee.io/douyin/>(Se recomienda visitar esta dirección en China) [//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址) "
Nota: Las páginas de Gitee no se pueden actualizar ahora, el código no está actualizado. Si puede eludir el firewall, le recomiendo visitar la siguiente dirección:
[//]: # "注意Gitee Pages现在无法更新代码不是最新的。如果你能翻墙推荐访问下面地址 "
Páginas de Github:<https://dy.ttentau.top/> Páginas de Github:<https://dy.ttentau.top/>
@ -48,9 +49,9 @@ Páginas de Github:<https://dy.ttentau.top/>
\[Serie Imitación Douyin] 1:[200 líneas de código para implementar un componente carrusel similar a Swiper.js](https://juejin.cn/post/7360512664317018146) \[Serie Imitación Douyin] 1:[200 líneas de código para implementar un componente carrusel similar a Swiper.js](https://juejin.cn/post/7360512664317018146)
\[Serie Imitación Douyin] 2:[Realice el efecto de "vídeo deslizante infinito" en Douyin](https://juejin.cn/post/7361614921519054883) \[Serie Imitación Douyin] 2:[Realice el efecto de "vídeo deslizante infinito" en Douyin](https://juejin.cn/post/7361614921519054883)
\[Serie Imitación Douyin] Tres:[Introducción al uso del enrutamiento de Vue y la adición de animaciones de transición](https://juejin.cn/post/7362528152777130025) \[Serie Imitación Douyin] Tres:[Vue 路由使用介绍以及添加转场动画](https://juejin.cn/post/7362528152777130025)
\[Serie Imitación Douyin] Cuatro:[Almacenamiento en caché de rutas condicionales de Vue, al igual que los sitios de noticias tradicionales](https://juejin.cn/post/7365334891473240101)
Más artículos están en preparación... \[Serie Imitación Douyin] Cinco:[Github Actions implementa páginas, sincroniza con Gitee, traduce README, empaqueta la imagen de la ventana acoplable](https://juejin.cn/post/7365757742381957161)
## correr ## correr
@ -60,8 +61,20 @@ Nota: Este proyecto sólo es apto para estudio e investigación, no para uso com
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
### Implementar en Docker
```bash
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
```
### desarrollo local ### desarrollo local
**Nota: El comando git debe clonarse para ejecutarse. No se puede ejecutar la descarga del paquete zip. Si la velocidad de clonación es demasiado lenta, se recomienda utilizar la dirección del albergue**
```bash ```bash
git clone https://gitee.com/zyronon/douyin.git (中国使用) git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git https://github.com/zyronon/douyin.git
@ -94,7 +107,7 @@ El video proviene de las siguientes celebridades de Douyin.
Imagen de las notas públicas de Xiaohongshu. Imagen de las notas públicas de Xiaohongshu.
El contenido anterior es toda información pública en Internet. 以上内容均是互联网公开信息
## Funciones y sugerencias ## Funciones y sugerencias
@ -107,7 +120,7 @@ Puedes contactar a mi correo<a href="mailto:zyronon@163.com">zyronon@163.com</a>
> Comparta mis otros proyectos de código abierto: > Comparta mis otros proyectos de código abierto:
> >
> _[**Escribir palabra**- Software de memorización de vocabulario que se puede utilizar en la web ~](https://github.com/zyronon/typing-word)<img src="https://img.shields.io/github/stars/zyronon/typing-word.svg?style=flat-square&label=Star&color=4285dd&logo=github" height="16px" />_ > _[**Escribir palabra**- Software de memorización de vocabulario que se puede utilizar en la web ~](https://github.com/zyronon/typing-word) <img src="https://img.shields.io/github/stars/zyronon/typing-word.svg?style=flat-square&label=Star&color=4285dd&logo=github" height="16px" />_
> _[**Guiones web**- Algunos scripts útiles de Grease Monkey~](https://github.com/zyronon/web-scripts)<img src="https://img.shields.io/github/stars/zyronon/web-scripts.svg?style=flat-square&label=Star&color=4285dd&logo=github" height="16px" />_ > _[**Guiones web**- Algunos scripts útiles de Grease Monkey~](https://github.com/zyronon/web-scripts)<img src="https://img.shields.io/github/stars/zyronon/web-scripts.svg?style=flat-square&label=Star&color=4285dd&logo=github" height="16px" />_
## acuerdo ## acuerdo

View File

@ -16,17 +16,18 @@
`douyin-vue`est une parodie`抖音|TikTok`projet de courte vidéo mobile.`Vue`Des « bonnes pratiques » côté mobile, comparables au natif`App`Expérience soyeuse et douce. Utilisé le dernier`Vue`pile technologique, basée sur[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)accomplir. Les données sont enregistrées localement dans le projet via[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)La bibliothèque intercepte l'API et renvoie des données json locales pour simuler de véritables requêtes backend. `douyin-vue`est une parodie`抖音|TikTok`projet de courte vidéo mobile.`Vue`Des « bonnes pratiques » côté mobile, comparables au natif`App`Expérience soyeuse et douce. Utilisé le dernier`Vue`pile technologique, basée sur[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)accomplir. Les données sont enregistrées localement dans le projet via[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)La bibliothèque intercepte l'API et renvoie des données json locales pour simuler de véritables requêtes backend.
<div> <div>
<img width="150px" src='imgs/1.gif' /> <img width="150px" src='docs/imgs/1.gif' />
<img width="150px" src='imgs/2.gif' /> <img width="150px" src='docs/imgs/2.gif' />
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='docs/imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='docs/imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='docs/imgs/5.gif' />
</div> </div>
## Accès en ligne ## Accès en ligne
Pages du gîte :<https://zyronon.gitee.io/douyin/>(Il est recommandé de visiter cette adresse en Chine) [//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址) "
Remarque : Les pages Gitee ne peuvent pas être mises à jour pour le moment, le code n'est pas à jour. Si vous pouvez contourner le pare-feu, je vous recommande de visiter l'adresse suivante :
[//]: # "注意Gitee Pages现在无法更新代码不是最新的。如果你能翻墙推荐访问下面地址 "
Pages GitHub :<https://dy.ttentau.top/> Pages GitHub :<https://dy.ttentau.top/>
@ -49,8 +50,8 @@ Pages GitHub :<https://dy.ttentau.top/>
\[Série Imitation Douyin] 1 :[200 lignes de code pour implémenter un composant carrousel similaire à Swiper.js](https://juejin.cn/post/7360512664317018146) \[Série Imitation Douyin] 1 :[200 lignes de code pour implémenter un composant carrousel similaire à Swiper.js](https://juejin.cn/post/7360512664317018146)
\[Série Imitation Douyin] 2 :[Réaliser l'effet "vidéo coulissante infinie" sur Douyin](https://juejin.cn/post/7361614921519054883) \[Série Imitation Douyin] 2 :[Réaliser l'effet "vidéo coulissante infinie" sur Douyin](https://juejin.cn/post/7361614921519054883)
\[Série Imitation Douyin] Trois :[Introduction à l'utilisation du routage Vue et à l'ajout d'animations de transition](https://juejin.cn/post/7362528152777130025) \[Série Imitation Douyin] Trois :[Introduction à l'utilisation du routage Vue et à l'ajout d'animations de transition](https://juejin.cn/post/7362528152777130025)
\[Série Imitation Douyin] Quatre :[Mise en cache des routes conditionnelles Vue, tout comme les sites d'information traditionnels](https://juejin.cn/post/7365334891473240101)
D'autres articles sont en préparation... \[Série Imitation Douyin] Cinq :[Les actions Github déploient des pages, synchronisent avec Gitee, traduisent README, emballent l'image Docker](https://juejin.cn/post/7365757742381957161)
## courir ## courir
@ -60,8 +61,20 @@ Remarque : ce projet convient uniquement à l'étude et à la recherche, et non
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
### Déployer sur Docker
```bash
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
```
### développement local ### développement local
**Remarque : La commande git doit être clonée pour s'exécuter. Le téléchargement du package zip ne peut pas s'exécuter. Si la vitesse de clonage est trop lente, il est recommandé d'utiliser l'adresse du gîte**
```bash ```bash
git clone https://gitee.com/zyronon/douyin.git (中国使用) git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git https://github.com/zyronon/douyin.git

View File

@ -16,19 +16,20 @@
`douyin-vue`パロディです`抖音|TikTok`モバイルショートビデオプロジェクト。`Vue`ネイティブと同等のモバイル側の「ベスト プラクティス」`App`シルキーで滑らかな使い心地。最新のものを使用しました`Vue`テクノロジースタック、に基づく[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)成し遂げる。データはプロジェクト内でローカルに保存されます。[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)ライブラリは API をインターセプトし、ローカルの JSON データを返して、実際のバックエンド リクエストをシミュレートします。 `douyin-vue`パロディです`抖音|TikTok`モバイルショートビデオプロジェクト。`Vue`ネイティブと同等のモバイル側の「ベスト プラクティス」`App`シルキーで滑らかな使い心地。最新のものを使用しました`Vue`テクノロジースタック、に基づく[`Vue3`](https://cn.vuejs.org/)、[`Vite5`](https://cn.vitejs.dev/)、[`Pinia`](https://pinia.vuejs.org/)成し遂げる。データはプロジェクト内でローカルに保存されます。[`axios-mock-adapter`](https://github.com/ctimmerm/axios-mock-adapter)ライブラリは API をインターセプトし、ローカルの JSON データを返して、実際のバックエンド リクエストをシミュレートします。
<div> <div>
<img width="150px" src='imgs/1.gif' /> <img width="150px" src='docs/imgs/1.gif' />
<img width="150px" src='imgs/2.gif' /> <img width="150px" src='docs/imgs/2.gif' />
<img width="150px" src='imgs/3.gif' /> <img width="150px" src='docs/imgs/3.gif' />
<img width="150px" src='imgs/4.gif' /> <img width="150px" src='docs/imgs/4.gif' />
<img width="150px" src='imgs/5.gif' /> <img width="150px" src='docs/imgs/5.gif' />
</div> </div>
## オンラインアクセス ## オンラインアクセス
ジーティーページ:[hっtps://zyろのん。ぎてえ。いお/どうyいん/](https://zyronon.gitee.io/douyin/)(中国ではこのアドレスにアクセスすることをお勧めします) [//]: # "Gitee Pages: [https://zyronon.gitee.io/douyin/](https://zyronon.gitee.io/douyin/)(中国地区推荐访问这个地址) "
注: コードが最新ではないため、現在 Gitee ページを更新できません。ファイアウォールを回避できる場合は、次のアドレスにアクセスすることをお勧めします。
Github ページ:[hっtps://dy。ってんたう。とp/](https://dy.ttentau.top/) [//]: # "注意Gitee Pages现在无法更新代码不是最新的。如果你能翻墙推荐访问下面地址 "
Github ページ:[https://dy.ttentau.top/](https://dy.ttentau.top/)
[//]: # "Gitee pages: [https://dy.ttentau.top/](https://dy.ttentau.top/) (中国地区推荐访问这个地址) " [//]: # "Gitee pages: [https://dy.ttentau.top/](https://dy.ttentau.top/) (中国地区推荐访问这个地址) "
@ -47,12 +48,12 @@ Github ページ:[hっtps://dy。ってんたう。とp/](
## リンク ## リンク
【模倣同音シリーズ】 1:[Swiper.js に似たカルーセル コンポーネントを実装するための 200 行のコード](https://juejin.cn/post/7360512664317018146) 【模倣同音シリーズ】 1:[Swiper.js に似たカルーセル コンポーネントを実装するための 200 行のコード](https://juejin.cn/post/7360512664317018146)
【模倣同音シリーズ】2:[Douyinで「無限スライドビデオ」効果を実現](https://juejin.cn/post/7361614921519054883) 【模倣同音シリーズ】 2[Douyinで「無限スライドビデオ」効果を実現](https://juejin.cn/post/7361614921519054883)
【模倣同音シリーズ】その3:[Vue ルーティングの使用とトランジション アニメーションの追加の概要](https://juejin.cn/post/7362528152777130025) 【模倣同音シリーズ】 3[Vue ルーティングの使用とトランジション アニメーションの追加の概要](https://juejin.cn/post/7362528152777130025)
【模倣同音シリーズ】 4[従来のニュースサイトと同様に、Vue の条件付きルート キャッシュ](https://juejin.cn/post/7365334891473240101)
【模倣同音シリーズ】 5[Github Actions ページのデプロイ、Gitee への同期、README の翻訳、Docker イメージのパッケージ化](https://juejin.cn/post/7365757742381957161)
さらなる記事も準備中です... ## 実行
## 走る
注: このプロジェクトは研究と研究のみに適しており、商業利用には適していません。 注: このプロジェクトは研究と研究のみに適しており、商業利用には適していません。
@ -60,8 +61,20 @@ Github ページ:[hっtps://dy。ってんたう。とp/](
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zyronon/douyin)
### Dockerへのデプロイ
```bash
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
```
### 地域開発 ### 地域開発
**注: git コマンドを実行するには、クローンを作成する必要があります。zip パッケージのダウンロードは実行できません。クローン速度が遅すぎる場合は、gitee アドレスを使用することをお勧めします。**
```bash ```bash
git clone https://gitee.com/zyronon/douyin.git (中国使用) git clone https://gitee.com/zyronon/douyin.git (中国使用)
https://github.com/zyronon/douyin.git https://github.com/zyronon/douyin.git
@ -70,27 +83,27 @@ npm install
npm run dev npm run dev
``` ```
ブラウザを開いて、以下にアクセスしてください。[hっtp://127。0。0。1:3000](http://127.0.0.1:3000) ブラウザを開いて、以下にアクセスしてください。[http://127.0.0.1:3000](http://127.0.0.1:3000)
**注: ブラウザをモバイル モードに切り替える必要があります。最初に を押します。`F12`コンソールを表示するには、 を押します。`Ctrl+Shift+M`通常にプレビューする** **注: ブラウザをモバイル モードに切り替える必要があります。最初に を押します。`F12`コンソールを表示するには、`Ctrl+Shift+M` を押します。通常にプレビューする**
## データソース ## データソース
このビデオは以下のDouyinの有名人からのものです このビデオは以下のDouyinの有名人からのものです
- `我是香秀 🐂🍺`[hっtps://v。どうyいん。こm/いYらぱ2L/](https://v.douyin.com/iYRAPA2L/) - `我是香秀 🐂🍺`: [https://v.douyin.com/iYRAPA2L/](https://v.douyin.com/iYRAPA2L/)
- `杨老虎 🐯(磕穿下巴掉牙版)`[hっtps://v。どうyいん。こm/いYら56で/](https://v.douyin.com/iYRA56de/) - `杨老虎 🐯(磕穿下巴掉牙版)`: [https://v.douyin.com/iYRA56de/](https://v.douyin.com/iYRA56de/)
- `条子`[hっtps://v。どうyいん。こm/いYらあqjr/](https://v.douyin.com/iYRAaqjr/) - `条子`: [https://v.douyin.com/iYRAaqjr/](https://v.douyin.com/iYRAaqjr/)
- `达莎 Digi`[hっtps://v。どうyいん。こm/いYら6rwT/](https://v.douyin.com/iYRA6rwT/) - `达莎 Digi`[https://v.douyin.com/iYRA6rwT/](https://v.douyin.com/iYRA6rwT/)
- `小橙子`[hっtps://v。どうyいん。こm/いYらぬdw/](https://v.douyin.com/iYRAnudw/) - `小橙子`: [https://v.douyin.com/iYRAnudw/](https://v.douyin.com/iYRAnudw/)
- `南恬`[hっtps://v。どうyいん。こm/いYらbKm3/](https://v.douyin.com/iYRAbKm3/) - `南恬`: [https://v.douyin.com/iYRAbKm3/](https://v.douyin.com/iYRAbKm3/)
- `小霸宠牛排 🥩`[hっtps://v。どうyいん。こm/いYRそsVB/](https://v.douyin.com/iYRSosVB/) - `小霸宠牛排 🥩`[https://v.douyin.com/iYRSosVB/](https://v.douyin.com/iYRSosVB/)
- `奶茶妹 ◕🌱`[hっtps://v。どうyいん。こm/いYらCKhP/](https://v.douyin.com/iYRACKhP/) - `奶茶妹 ◕🌱`: [https://v.douyin.com/iYRACKhP/](https://v.douyin.com/iYRACKhP/)
- `我才是岚岚`[hっtps://v。どうyいん。こm/いYらQM1C/](https://v.douyin.com/iYRAQM1C/) - `我才是岚岚`: [https://v.douyin.com/iYRAQM1C/](https://v.douyin.com/iYRAQM1C/)
- `周憬艺 ziran`[hっtps://v。どうyいん。こm/いYらQs4h/](https://v.douyin.com/iYRAQs4h/) - `周憬艺 ziran`: [https://v.douyin.com/iYRAQs4h/](https://v.douyin.com/iYRAQs4h/)
- `刘思瑶 nice`[hっtps://v。どうyいん。こm/いYらあえRん/](https://v.douyin.com/iYRAaERn/) - `刘思瑶 nice`: [https://v.douyin.com/iYRAaERn/](https://v.douyin.com/iYRAaERn/)
- `彭十六 elf`[hっtps://v。どうyいん。こm/いYらHrVG/](https://v.douyin.com/iYRAHrVG/) - `彭十六 elf`: [https://v.douyin.com/iYRAHrVG/](https://v.douyin.com/iYRAHrVG/)
- `李子柒`[hっtps://v。どうyいん。こm/いYら5B88/](https://v.douyin.com/iYRA5B88/) - `李子柒`: [https://v.douyin.com/iYRA5B88/](https://v.douyin.com/iYRA5B88/)
小紅書公文書からの写真 小紅書公文書からの写真
@ -98,12 +111,12 @@ npm run dev
## 特徴と提案 ## 特徴と提案
プロジェクトは現在開発の初期段階にあり、新しい機能が継続的に追加されています。ソフトウェアに関する機能や提案がありましたら、お気軽にお問い合わせください。`Issues`で育ちました プロジェクトは現在開発の初期段階にあり、ソフトウェアの新機能や提案があれば、お気軽にお問い合わせください。`Issues`で育ちました
このソフトウェアのデザインアイデアも気に入っていただけましたら、ぜひ送信してください`PR`、 ご支援ありがとうございました! このソフトウェアのデザインアイデアも気に入っていただけましたら、ぜひ `PR`送信してください、 ご支援ありがとうございました!
## 私に連絡して ## 私に連絡して
私のメールアドレスにご連絡いただけます<a href="mailto:zyronon@163.com">zyろのん@163。こm</a> 私のメールアドレスにご連絡いただけます<a href="mailto:zyronon@163.com">zyronon@163.com</a>
> 私の他のオープンソース プロジェクトを共有してください: > 私の他のオープンソース プロジェクトを共有してください:
> >

View File

@ -1,52 +0,0 @@
---
theme: cyanosis
highlight: vs2015
---
# 前言
---
这是我的 [**模仿抖音**](https://juejin.cn/column/7357362143396118528) 系列文章的第四篇:这篇我们将实现页面缓存,就像我们访问传统新闻网站一样
> 第一篇:[200行代码实现类似Swiper.js的轮播组件](https://juejin.cn/post/7360512664317018146)
> 第二篇:[实现抖音 “视频无限滑动“效果](https://juejin.cn/post/7361614921519054883)
> 第三篇:[Vue 路由使用介绍以及添加转场动画](https://juejin.cn/post/7362528152777130025)
# 最终效果
在线预览:[dy.ttentau.top/](https://dy.ttentau.top/)
Github地址[https://github.com/zyronon/douyin](https://github.com/zyronon/douyin)
路由定义源码:[routes.ts](https://github.com/zyronon/douyin/blob/master/src/router/index.ts)
# 实现
## 原理
KeepAlive
组件介绍:[https://cn.vuejs.org/guide/built-ins/keep-alive.html](https://cn.vuejs.org/guide/built-ins/keep-alive.html)
我们知道 `Vue` 内置的 `<KeepAlive>` 组件可以缓存组件,只需要像下面这样写就可以缓存所有组件了
```vue
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
```
可是,这样写所有组件都会被缓存,这显然不是我们希望看到的效果。
我们想要的效果是什么?就像 `jQuery` 时代的网站(例如:[`www.v2ex.com`](https://www.v2ex.com)
)一样,点击一个链接,前进到下一页,浏览完成之后,返回上一页,当前页面被丢弃。再次访问的话需要重新加载
> 吐槽:找了一圈国内的知名网站,点击链接全是单独打开一个标签页,根本没有在当前页跳转的了!
>
> 有喜欢逛 v2ex 的朋友可以试试我开发的这个油猴脚本:[V2Next](https://greasyfork.org/zh-CN/scripts/458024)
> 有UI美化、楼中楼、回复上下文、高赞回复、简洁模式、发送图片和表情 emoji、base64 解码等功能现在每天都1800个 v 友在使用!
大多数情况下,用户进入一个页面,这个页面会请求数据。用户浏览完毕退出页面。如果再次进入,页面就像新开的一样,重新开始请求数据,这是符合用户预期的
而不是像现在这样,不管重新进入多少次,页面都是一开始进入的样子,这时用户可能会怀疑自己是否断网了?我们总不能在每次页面都写 `onActivated`
`onDeactivated` 方法吧!

View File

@ -1,13 +1,16 @@
lockfileVersion: '6.0' lockfileVersion: '9.0'
settings: settings:
autoInstallPeers: true autoInstallPeers: true
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
dependencies: importers:
.:
dependencies:
axios: axios:
specifier: ^1.6.7 specifier: ^1.6.7
version: 1.6.7 version: 1.7.4
nanoid: nanoid:
specifier: ^5.0.6 specifier: ^5.0.6
version: 5.0.6 version: 5.0.6
@ -16,377 +19,328 @@ dependencies:
version: 2.88.2 version: 2.88.2
packages: packages:
/ajv@6.12.6:
resolution: ajv@6.12.6:
{ resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==,
} asn1@0.2.6:
resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
assert-plus@1.0.0:
resolution: {integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==}
engines: {node: '>=0.8'}
asynckit@0.4.0:
resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
aws-sign2@0.7.0:
resolution: {integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==}
aws4@1.12.0:
resolution: {integrity: sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==}
axios@1.7.4:
resolution: {integrity: sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==}
bcrypt-pbkdf@1.0.2:
resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}
caseless@0.12.0:
resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
combined-stream@1.0.8:
resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
engines: {node: '>= 0.8'}
core-util-is@1.0.2:
resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
dashdash@1.14.1:
resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
engines: {node: '>=0.10'}
delayed-stream@1.0.0:
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
engines: {node: '>=0.4.0'}
ecc-jsbn@0.1.2:
resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==}
extend@3.0.2:
resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
extsprintf@1.3.0:
resolution: {integrity: sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==}
engines: {'0': node >=0.6.0}
fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
fast-json-stable-stringify@2.1.0:
resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
follow-redirects@1.15.6:
resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==}
engines: {node: '>=4.0'}
peerDependencies:
debug: '*'
peerDependenciesMeta:
debug:
optional: true
forever-agent@0.6.1:
resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==}
form-data@2.3.3:
resolution: {integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==}
engines: {node: '>= 0.12'}
form-data@4.0.0:
resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
engines: {node: '>= 6'}
getpass@0.1.7:
resolution: {integrity: sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==}
har-schema@2.0.0:
resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==}
engines: {node: '>=4'}
har-validator@5.1.5:
resolution: {integrity: sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==}
engines: {node: '>=6'}
deprecated: this library is no longer supported
http-signature@1.2.0:
resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
engines: {node: '>=0.8', npm: '>=1.3.7'}
is-typedarray@1.0.0:
resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
isstream@0.1.2:
resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==}
jsbn@0.1.1:
resolution: {integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==}
json-schema-traverse@0.4.1:
resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
json-schema@0.4.0:
resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
json-stringify-safe@5.0.1:
resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
jsprim@1.4.2:
resolution: {integrity: sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==}
engines: {node: '>=0.6.0'}
mime-db@1.52.0:
resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
engines: {node: '>= 0.6'}
mime-types@2.1.35:
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
engines: {node: '>= 0.6'}
nanoid@5.0.6:
resolution: {integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==}
engines: {node: ^18 || >=20}
hasBin: true
oauth-sign@0.9.0:
resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
performance-now@2.1.0:
resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
proxy-from-env@1.1.0:
resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
psl@1.9.0:
resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
punycode@2.3.1:
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
engines: {node: '>=6'}
qs@6.5.3:
resolution: {integrity: sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==}
engines: {node: '>=0.6'}
request@2.88.2:
resolution: {integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==}
engines: {node: '>= 6'}
deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
safe-buffer@5.2.1:
resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
safer-buffer@2.1.2:
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
sshpk@1.18.0:
resolution: {integrity: sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==}
engines: {node: '>=0.10.0'}
hasBin: true
tough-cookie@2.5.0:
resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==}
engines: {node: '>=0.8'}
tunnel-agent@0.6.0:
resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
tweetnacl@0.14.5:
resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
uri-js@4.4.1:
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
uuid@3.4.0:
resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
deprecated: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
hasBin: true
verror@1.10.0:
resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
engines: {'0': node >=0.6.0}
snapshots:
ajv@6.12.6:
dependencies: dependencies:
fast-deep-equal: 3.1.3 fast-deep-equal: 3.1.3
fast-json-stable-stringify: 2.1.0 fast-json-stable-stringify: 2.1.0
json-schema-traverse: 0.4.1 json-schema-traverse: 0.4.1
uri-js: 4.4.1 uri-js: 4.4.1
dev: false
/asn1@0.2.6: asn1@0.2.6:
resolution:
{
integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==,
}
dependencies: dependencies:
safer-buffer: 2.1.2 safer-buffer: 2.1.2
dev: false
/assert-plus@1.0.0: assert-plus@1.0.0: {}
resolution:
{
integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==,
}
engines: { node: '>=0.8' }
dev: false
/asynckit@0.4.0: asynckit@0.4.0: {}
resolution:
{
integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==,
}
dev: false
/aws-sign2@0.7.0: aws-sign2@0.7.0: {}
resolution:
{
integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==,
}
dev: false
/aws4@1.12.0: aws4@1.12.0: {}
resolution:
{
integrity: sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==,
}
dev: false
/axios@1.6.7: axios@1.7.4:
resolution:
{
integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==,
}
dependencies: dependencies:
follow-redirects: 1.15.6 follow-redirects: 1.15.6
form-data: 4.0.0 form-data: 4.0.0
proxy-from-env: 1.1.0 proxy-from-env: 1.1.0
transitivePeerDependencies: transitivePeerDependencies:
- debug - debug
dev: false
/bcrypt-pbkdf@1.0.2: bcrypt-pbkdf@1.0.2:
resolution:
{
integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==,
}
dependencies: dependencies:
tweetnacl: 0.14.5 tweetnacl: 0.14.5
dev: false
/caseless@0.12.0: caseless@0.12.0: {}
resolution:
{
integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==,
}
dev: false
/combined-stream@1.0.8: combined-stream@1.0.8:
resolution:
{
integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==,
}
engines: { node: '>= 0.8' }
dependencies: dependencies:
delayed-stream: 1.0.0 delayed-stream: 1.0.0
dev: false
/core-util-is@1.0.2: core-util-is@1.0.2: {}
resolution:
{
integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==,
}
dev: false
/dashdash@1.14.1: dashdash@1.14.1:
resolution:
{
integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==,
}
engines: { node: '>=0.10' }
dependencies: dependencies:
assert-plus: 1.0.0 assert-plus: 1.0.0
dev: false
/delayed-stream@1.0.0: delayed-stream@1.0.0: {}
resolution:
{
integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==,
}
engines: { node: '>=0.4.0' }
dev: false
/ecc-jsbn@0.1.2: ecc-jsbn@0.1.2:
resolution:
{
integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==,
}
dependencies: dependencies:
jsbn: 0.1.1 jsbn: 0.1.1
safer-buffer: 2.1.2 safer-buffer: 2.1.2
dev: false
/extend@3.0.2: extend@3.0.2: {}
resolution:
{
integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==,
}
dev: false
/extsprintf@1.3.0: extsprintf@1.3.0: {}
resolution:
{
integrity: sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==,
}
engines: { '0': node >=0.6.0 }
dev: false
/fast-deep-equal@3.1.3: fast-deep-equal@3.1.3: {}
resolution:
{
integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==,
}
dev: false
/fast-json-stable-stringify@2.1.0: fast-json-stable-stringify@2.1.0: {}
resolution:
{
integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==,
}
dev: false
/follow-redirects@1.15.6: follow-redirects@1.15.6: {}
resolution:
{
integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==,
}
engines: { node: '>=4.0' }
peerDependencies:
debug: '*'
peerDependenciesMeta:
debug:
optional: true
dev: false
/forever-agent@0.6.1: forever-agent@0.6.1: {}
resolution:
{
integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==,
}
dev: false
/form-data@2.3.3: form-data@2.3.3:
resolution:
{
integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==,
}
engines: { node: '>= 0.12' }
dependencies: dependencies:
asynckit: 0.4.0 asynckit: 0.4.0
combined-stream: 1.0.8 combined-stream: 1.0.8
mime-types: 2.1.35 mime-types: 2.1.35
dev: false
/form-data@4.0.0: form-data@4.0.0:
resolution:
{
integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==,
}
engines: { node: '>= 6' }
dependencies: dependencies:
asynckit: 0.4.0 asynckit: 0.4.0
combined-stream: 1.0.8 combined-stream: 1.0.8
mime-types: 2.1.35 mime-types: 2.1.35
dev: false
/getpass@0.1.7: getpass@0.1.7:
resolution:
{
integrity: sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==,
}
dependencies: dependencies:
assert-plus: 1.0.0 assert-plus: 1.0.0
dev: false
/har-schema@2.0.0: har-schema@2.0.0: {}
resolution:
{
integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==,
}
engines: { node: '>=4' }
dev: false
/har-validator@5.1.5: har-validator@5.1.5:
resolution:
{
integrity: sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==,
}
engines: { node: '>=6' }
deprecated: this library is no longer supported
dependencies: dependencies:
ajv: 6.12.6 ajv: 6.12.6
har-schema: 2.0.0 har-schema: 2.0.0
dev: false
/http-signature@1.2.0: http-signature@1.2.0:
resolution:
{
integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==,
}
engines: { node: '>=0.8', npm: '>=1.3.7' }
dependencies: dependencies:
assert-plus: 1.0.0 assert-plus: 1.0.0
jsprim: 1.4.2 jsprim: 1.4.2
sshpk: 1.18.0 sshpk: 1.18.0
dev: false
/is-typedarray@1.0.0: is-typedarray@1.0.0: {}
resolution:
{
integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==,
}
dev: false
/isstream@0.1.2: isstream@0.1.2: {}
resolution:
{
integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==,
}
dev: false
/jsbn@0.1.1: jsbn@0.1.1: {}
resolution:
{
integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==,
}
dev: false
/json-schema-traverse@0.4.1: json-schema-traverse@0.4.1: {}
resolution:
{
integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==,
}
dev: false
/json-schema@0.4.0: json-schema@0.4.0: {}
resolution:
{
integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==,
}
dev: false
/json-stringify-safe@5.0.1: json-stringify-safe@5.0.1: {}
resolution:
{
integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==,
}
dev: false
/jsprim@1.4.2: jsprim@1.4.2:
resolution:
{
integrity: sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==,
}
engines: { node: '>=0.6.0' }
dependencies: dependencies:
assert-plus: 1.0.0 assert-plus: 1.0.0
extsprintf: 1.3.0 extsprintf: 1.3.0
json-schema: 0.4.0 json-schema: 0.4.0
verror: 1.10.0 verror: 1.10.0
dev: false
/mime-db@1.52.0: mime-db@1.52.0: {}
resolution:
{
integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==,
}
engines: { node: '>= 0.6' }
dev: false
/mime-types@2.1.35: mime-types@2.1.35:
resolution:
{
integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==,
}
engines: { node: '>= 0.6' }
dependencies: dependencies:
mime-db: 1.52.0 mime-db: 1.52.0
dev: false
/nanoid@5.0.6: nanoid@5.0.6: {}
resolution:
{
integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==,
}
engines: { node: ^18 || >=20 }
hasBin: true
dev: false
/oauth-sign@0.9.0: oauth-sign@0.9.0: {}
resolution:
{
integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==,
}
dev: false
/performance-now@2.1.0: performance-now@2.1.0: {}
resolution:
{
integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==,
}
dev: false
/proxy-from-env@1.1.0: proxy-from-env@1.1.0: {}
resolution:
{
integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==,
}
dev: false
/psl@1.9.0: psl@1.9.0: {}
resolution:
{
integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==,
}
dev: false
/punycode@2.3.1: punycode@2.3.1: {}
resolution:
{
integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==,
}
engines: { node: '>=6' }
dev: false
/qs@6.5.3: qs@6.5.3: {}
resolution:
{
integrity: sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==,
}
engines: { node: '>=0.6' }
dev: false
/request@2.88.2: request@2.88.2:
resolution:
{
integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==,
}
engines: { node: '>= 6' }
deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
dependencies: dependencies:
aws-sign2: 0.7.0 aws-sign2: 0.7.0
aws4: 1.12.0 aws4: 1.12.0
@ -408,29 +362,12 @@ packages:
tough-cookie: 2.5.0 tough-cookie: 2.5.0
tunnel-agent: 0.6.0 tunnel-agent: 0.6.0
uuid: 3.4.0 uuid: 3.4.0
dev: false
/safe-buffer@5.2.1: safe-buffer@5.2.1: {}
resolution:
{
integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==,
}
dev: false
/safer-buffer@2.1.2: safer-buffer@2.1.2: {}
resolution:
{
integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==,
}
dev: false
/sshpk@1.18.0: sshpk@1.18.0:
resolution:
{
integrity: sha512-2p2KJZTSqQ/I3+HX42EpYOa2l3f8Erv8MWKsy2I9uf4wA7yFIkXRffYdsx86y6z4vHtV8u7g+pPlr8/4ouAxsQ==,
}
engines: { node: '>=0.10.0' }
hasBin: true
dependencies: dependencies:
asn1: 0.2.6 asn1: 0.2.6
assert-plus: 1.0.0 assert-plus: 1.0.0
@ -441,61 +378,26 @@ packages:
jsbn: 0.1.1 jsbn: 0.1.1
safer-buffer: 2.1.2 safer-buffer: 2.1.2
tweetnacl: 0.14.5 tweetnacl: 0.14.5
dev: false
/tough-cookie@2.5.0: tough-cookie@2.5.0:
resolution:
{
integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==,
}
engines: { node: '>=0.8' }
dependencies: dependencies:
psl: 1.9.0 psl: 1.9.0
punycode: 2.3.1 punycode: 2.3.1
dev: false
/tunnel-agent@0.6.0: tunnel-agent@0.6.0:
resolution:
{
integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==,
}
dependencies: dependencies:
safe-buffer: 5.2.1 safe-buffer: 5.2.1
dev: false
/tweetnacl@0.14.5: tweetnacl@0.14.5: {}
resolution:
{
integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==,
}
dev: false
/uri-js@4.4.1: uri-js@4.4.1:
resolution:
{
integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==,
}
dependencies: dependencies:
punycode: 2.3.1 punycode: 2.3.1
dev: false
/uuid@3.4.0: uuid@3.4.0: {}
resolution:
{
integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==,
}
deprecated: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
hasBin: true
dev: false
/verror@1.10.0: verror@1.10.0:
resolution:
{
integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==,
}
engines: { '0': node >=0.6.0 }
dependencies: dependencies:
assert-plus: 1.0.0 assert-plus: 1.0.0
core-util-is: 1.0.2 core-util-is: 1.0.2
extsprintf: 1.3.0 extsprintf: 1.3.0
dev: false

View File

@ -2,11 +2,12 @@
"name": "douyin-vue", "name": "douyin-vue",
"version": "1.1.0", "version": "1.1.0",
"private": true, "private": true,
"type": "module",
"scripts": { "scripts": {
"dev": "vite --host", "dev": "vite --host",
"start": "vite --host", "start": "vite --host",
"serve": "vite --host", "serve": "vite --host",
"build": "vite build --mode prod", "build": "vite build",
"test-del-json": "node node/remove-dist-json.js", "test-del-json": "node node/remove-dist-json.js",
"build-uni-app": "vite build --mode uni", "build-uni-app": "vite build --mode uni",
"build-gp-pages": "vite build --mode gp_pages", "build-gp-pages": "vite build --mode gp_pages",
@ -39,7 +40,7 @@
"@rushstack/eslint-patch": "^1.3.3", "@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node20": "^20.1.2", "@tsconfig/node20": "^20.1.2",
"@types/node": "^20.11.28", "@types/node": "^20.11.28",
"@vitejs/plugin-vue": "4.0.0", "@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0", "@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/eslint-config-prettier": "^8.0.0", "@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0", "@vue/eslint-config-typescript": "^12.0.0",
@ -56,7 +57,7 @@
"rollup-plugin-visualizer": "^5.9.2", "rollup-plugin-visualizer": "^5.9.2",
"typescript": "5.3.3", "typescript": "5.3.3",
"unplugin-vue-macros": "^2.9.1", "unplugin-vue-macros": "^2.9.1",
"vite": "^5.1.7", "vite": "^5.2.14",
"vite-plugin-cdn-import": "0.3.5", "vite-plugin-cdn-import": "0.3.5",
"vue-tsc": "^2.0.6" "vue-tsc": "^2.0.6"
}, },

File diff suppressed because it is too large Load Diff

View File

@ -1,22 +1,11 @@
<template> <template>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="transitionName"> <transition :name="transitionName">
<keep-alive :exclude="store.excludeRoutes"> <keep-alive :exclude="store.excludeNames">
<component :is="Component" /> <component :is="Component" />
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
<BaseMask v-if="!isMobile" @click="isMobile = true" />
<div v-if="!isMobile" class="guide">
<Icon class="danger" icon="mynaui:danger-triangle" />
<Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
<div class="txt">
<h2>切换至手机模式获取最佳体验</h2>
<h3>1. F12 调出控制台</h3>
<h3>2. Ctrl+Shift+M或点击下面图标</h3>
</div>
<img src="@/assets/img/guide.png" alt="" />
</div>
<Call /> <Call />
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -35,7 +24,6 @@ import { BASE_URL } from '@/config'
const store = useBaseStore() const store = useBaseStore()
const route = useRoute() const route = useRoute()
const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
const transitionName = ref('go') const transitionName = ref('go')
// watch $route 使 // watch $route 使
@ -65,27 +53,30 @@ watch(
} }
) )
function setVh() { function resetVhAndPx() {
let vh = window.innerHeight * 0.01 let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`) document.documentElement.style.setProperty('--vh', `${vh}px`)
//document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 + 'px'
} }
onMounted(() => { onMounted(() => {
store.init() store.init()
setVh() resetVhAndPx()
// resize 1vh // resize 1vh
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
location.href = BASE_URL + '/' location.href = BASE_URL + '/'
setVh() resetVhAndPx()
}) })
//
document.onselectstart = new Function('return false') as any
}) })
</script> </script>
<style lang="less"> <style lang="less">
@import './assets/less/index'; @import './assets/less/index';
* {
user-select: none;
}
#app { #app {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -102,44 +93,6 @@ onMounted(() => {
} }
} }
.guide {
color: white;
z-index: 999;
background: var(--active-main-bg);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 16rem;
overflow: hidden;
text-align: center;
.danger {
margin-top: 10rem;
font-size: 40rem;
color: red;
}
.close {
cursor: pointer;
font-size: 18rem;
color: white;
position: absolute;
right: 15rem;
top: 15rem;
}
.txt {
text-align: left;
padding: 0 24rem;
}
img {
display: block;
width: 350rem;
}
}
.go-enter-from { .go-enter-from {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }

View File

@ -54,9 +54,7 @@
}, },
"cover": { "cover": {
"uri": "tos-cn-i-0813/oYVDeaFZyENAAAAKXCYfxD6hI4zADNAURgtySl", "uri": "tos-cn-i-0813/oYVDeaFZyENAAAAKXCYfxD6hI4zADNAURgtySl",
"url_list": [ "url_list": ["jwWCPZVTIA4IKM-8WipLF.png"],
"jwWCPZVTIA4IKM-8WipLF.png"
],
"width": 720, "width": 720,
"height": 720 "height": 720
}, },
@ -227,15 +225,11 @@
"cover_url": [ "cover_url": [
{ {
"uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5", "uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
"url_list": [ "url_list": ["AiIEMkIA7Cb3s5c4e7e6g.png"]
"AiIEMkIA7Cb3s5c4e7e6g.png"
]
}, },
{ {
"uri": "c8510002be9a3a61aad2", "uri": "c8510002be9a3a61aad2",
"url_list": [ "url_list": ["aHzLr77vcdBMUil15rXBa.png"]
"aHzLr77vcdBMUil15rXBa.png"
]
} }
], ],
"district": "", "district": "",
@ -258,9 +252,7 @@
"share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。", "share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。",
"share_image_url": { "share_image_url": {
"uri": "tos-cn-p-0015/oge0HBDnlBbbZHjeDc4WtAI7AA0xb88gd9Ipjc", "uri": "tos-cn-p-0015/oge0HBDnlBbbZHjeDc4WtAI7AA0xb88gd9Ipjc",
"url_list": [ "url_list": ["5jTb5yW0_50o6UaLR5hvo.png"]
"5jTb5yW0_50o6UaLR5hvo.png"
]
}, },
"share_qrcode_url": { "share_qrcode_url": {
"uri": "216a001823018b74cedd", "uri": "216a001823018b74cedd",
@ -283,15 +275,11 @@
"white_cover_url": [ "white_cover_url": [
{ {
"uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5", "uri": "douyin-user-image-file/f2196ddaa37f3097932d8a29ff0d0ca5",
"url_list": [ "url_list": ["N_SVO2HXIpaY04hgsXYDI.png"]
"N_SVO2HXIpaY04hgsXYDI.png"
]
}, },
{ {
"uri": "318f1000413827e122102", "uri": "318f1000413827e122102",
"url_list": [ "url_list": ["Sfz4PgDDqyNYHkFyXub5g.png"]
"Sfz4PgDDqyNYHkFyXub5g.png"
]
} }
] ]
} }
@ -348,9 +336,7 @@
}, },
"cover": { "cover": {
"uri": "2071800047c9d7f961529", "uri": "2071800047c9d7f961529",
"url_list": [ "url_list": ["_T0vQPZKXrNC6ulECmMes.png"],
"_T0vQPZKXrNC6ulECmMes.png"
],
"width": 720, "width": 720,
"height": 720 "height": 720
}, },
@ -478,15 +464,11 @@
"cover_url": [ "cover_url": [
{ {
"uri": "douyin-user-image-file/f0e0fa1c47be6c2eedb3bbc077b2e89b", "uri": "douyin-user-image-file/f0e0fa1c47be6c2eedb3bbc077b2e89b",
"url_list": [ "url_list": ["eTzFhGSTt3FN9Wu_SwYfJ.png"]
"eTzFhGSTt3FN9Wu_SwYfJ.png"
]
}, },
{ {
"uri": "c8510002be9a3a61aad2", "uri": "c8510002be9a3a61aad2",
"url_list": [ "url_list": ["ycPju2wLo8QdUH3BhOHfP.png"]
"ycPju2wLo8QdUH3BhOHfP.png"
]
} }
], ],
"district": "", "district": "",
@ -509,9 +491,7 @@
"share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。", "share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。",
"share_image_url": { "share_image_url": {
"uri": "tos-cn-p-0015/oMYiIAfY7PDPW4RWABzAIB6KeiygIB7AVxhctZ", "uri": "tos-cn-p-0015/oMYiIAfY7PDPW4RWABzAIB6KeiygIB7AVxhctZ",
"url_list": [ "url_list": ["yynTGOW4ukH0o6ivqStEd.png"]
"yynTGOW4ukH0o6ivqStEd.png"
]
}, },
"share_qrcode_url": { "share_qrcode_url": {
"uri": "3306001c73315193d5b5", "uri": "3306001c73315193d5b5",
@ -534,15 +514,11 @@
"white_cover_url": [ "white_cover_url": [
{ {
"uri": "douyin-user-image-file/f0e0fa1c47be6c2eedb3bbc077b2e89b", "uri": "douyin-user-image-file/f0e0fa1c47be6c2eedb3bbc077b2e89b",
"url_list": [ "url_list": ["3Lbs4vjci4a5PWPjuHqGO.png"]
"3Lbs4vjci4a5PWPjuHqGO.png"
]
}, },
{ {
"uri": "318f1000413827e122102", "uri": "318f1000413827e122102",
"url_list": [ "url_list": ["2QCe-HDrBnJc06gcYCeTW.png"]
"2QCe-HDrBnJc06gcYCeTW.png"
]
} }
] ]
} }
@ -602,9 +578,7 @@
}, },
"cover": { "cover": {
"uri": "tos-cn-i-0813/oQKse1TDAG7fAI4EGEeLASDnAQEoABSnbJ2BvM", "uri": "tos-cn-i-0813/oQKse1TDAG7fAI4EGEeLASDnAQEoABSnbJ2BvM",
"url_list": [ "url_list": ["NYLpBo9emIte6nynBBQNe.png"],
"NYLpBo9emIte6nynBBQNe.png"
],
"width": 720, "width": 720,
"height": 720 "height": 720
}, },
@ -766,15 +740,11 @@
"cover_url": [ "cover_url": [
{ {
"uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f", "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
"url_list": [ "url_list": ["2eFwyUS9yN8r7wJCXHUvb.png"]
"2eFwyUS9yN8r7wJCXHUvb.png"
]
}, },
{ {
"uri": "c8510002be9a3a61aad2", "uri": "c8510002be9a3a61aad2",
"url_list": [ "url_list": ["0yrHnPaNjbwpkaPNo7s4x.png"]
"0yrHnPaNjbwpkaPNo7s4x.png"
]
} }
], ],
"district": "", "district": "",
@ -797,9 +767,7 @@
"share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。", "share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。",
"share_image_url": { "share_image_url": {
"uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu", "uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu",
"url_list": [ "url_list": ["qnOWDz5lUek2B1I5MPHa-.png"]
"qnOWDz5lUek2B1I5MPHa-.png"
]
}, },
"share_qrcode_url": { "share_qrcode_url": {
"uri": "216a0023aa35c71d4381", "uri": "216a0023aa35c71d4381",
@ -822,15 +790,11 @@
"white_cover_url": [ "white_cover_url": [
{ {
"uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f", "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
"url_list": [ "url_list": ["ejF34o5i413UeROTNoYFI.png"]
"ejF34o5i413UeROTNoYFI.png"
]
}, },
{ {
"uri": "318f1000413827e122102", "uri": "318f1000413827e122102",
"url_list": [ "url_list": ["x9tjnPkC-OscQ480dZZAR.png"]
"x9tjnPkC-OscQ480dZZAR.png"
]
} }
] ]
} }
@ -890,9 +854,7 @@
}, },
"cover": { "cover": {
"uri": "tos-cn-i-0813/oAgAlhXilAAJ6u5MAzCgDBGefASENIN9XA3lyP", "uri": "tos-cn-i-0813/oAgAlhXilAAJ6u5MAzCgDBGefASENIN9XA3lyP",
"url_list": [ "url_list": ["dRGIZeauclEl_diysOXxZ.png"],
"dRGIZeauclEl_diysOXxZ.png"
],
"width": 720, "width": 720,
"height": 720 "height": 720
}, },
@ -1093,15 +1055,11 @@
"cover_url": [ "cover_url": [
{ {
"uri": "douyin-user-image-file/fc185d55c7e3c95a57f88ef99f6c5a63", "uri": "douyin-user-image-file/fc185d55c7e3c95a57f88ef99f6c5a63",
"url_list": [ "url_list": ["GH2GQ_6U9XovU9wyhraHy.png"]
"GH2GQ_6U9XovU9wyhraHy.png"
]
}, },
{ {
"uri": "c8510002be9a3a61aad2", "uri": "c8510002be9a3a61aad2",
"url_list": [ "url_list": ["Zd0yXNnpYUJtfs1PoJMQ2.png"]
"Zd0yXNnpYUJtfs1PoJMQ2.png"
]
} }
], ],
"district": null, "district": null,
@ -1124,9 +1082,7 @@
"share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。", "share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。",
"share_image_url": { "share_image_url": {
"uri": "tos-cn-p-0015/o0lXhVW8g4D9AIzIlnIX23ftAOAzNet3BcBpzK", "uri": "tos-cn-p-0015/o0lXhVW8g4D9AIzIlnIX23ftAOAzNet3BcBpzK",
"url_list": [ "url_list": ["ZRRKVy4ShmXRvpIEPMYoa.png"]
"ZRRKVy4ShmXRvpIEPMYoa.png"
]
}, },
"share_qrcode_url": { "share_qrcode_url": {
"uri": "6f940019bd6b1c90b090", "uri": "6f940019bd6b1c90b090",
@ -1149,15 +1105,11 @@
"white_cover_url": [ "white_cover_url": [
{ {
"uri": "douyin-user-image-file/fc185d55c7e3c95a57f88ef99f6c5a63", "uri": "douyin-user-image-file/fc185d55c7e3c95a57f88ef99f6c5a63",
"url_list": [ "url_list": ["5mEqucAqJ1I440RfZH2t6.png"]
"5mEqucAqJ1I440RfZH2t6.png"
]
}, },
{ {
"uri": "318f1000413827e122102", "uri": "318f1000413827e122102",
"url_list": [ "url_list": ["72skmrYgEr7JkUqAbch-Q.png"]
"72skmrYgEr7JkUqAbch-Q.png"
]
} }
] ]
} }
@ -1217,9 +1169,7 @@
}, },
"cover": { "cover": {
"uri": "tos-cn-p-0015/e468ce3333034b1db0c987b00f2b5af3", "uri": "tos-cn-p-0015/e468ce3333034b1db0c987b00f2b5af3",
"url_list": [ "url_list": ["od74MFuaQhZyh-PZyPN1S.png"],
"od74MFuaQhZyh-PZyPN1S.png"
],
"width": 720, "width": 720,
"height": 720 "height": 720
}, },
@ -1355,15 +1305,11 @@
"cover_url": [ "cover_url": [
{ {
"uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f", "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
"url_list": [ "url_list": ["2eFwyUS9yN8r7wJCXHUvb.png"]
"2eFwyUS9yN8r7wJCXHUvb.png"
]
}, },
{ {
"uri": "c8510002be9a3a61aad2", "uri": "c8510002be9a3a61aad2",
"url_list": [ "url_list": ["0yrHnPaNjbwpkaPNo7s4x.png"]
"0yrHnPaNjbwpkaPNo7s4x.png"
]
} }
], ],
"district": "", "district": "",
@ -1386,9 +1332,7 @@
"share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。", "share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。",
"share_image_url": { "share_image_url": {
"uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu", "uri": "tos-cn-p-0015/oceLdA0zALBI8CoyKiCfhU69IBlNq4RsbgzSAu",
"url_list": [ "url_list": ["qnOWDz5lUek2B1I5MPHa-.png"]
"qnOWDz5lUek2B1I5MPHa-.png"
]
}, },
"share_qrcode_url": { "share_qrcode_url": {
"uri": "216a0023aa35c71d4381", "uri": "216a0023aa35c71d4381",
@ -1411,15 +1355,11 @@
"white_cover_url": [ "white_cover_url": [
{ {
"uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f", "uri": "douyin-user-image-file/c029dcead6fbf261d15b1ab7de43bf2f",
"url_list": [ "url_list": ["ejF34o5i413UeROTNoYFI.png"]
"ejF34o5i413UeROTNoYFI.png"
]
}, },
{ {
"uri": "318f1000413827e122102", "uri": "318f1000413827e122102",
"url_list": [ "url_list": ["x9tjnPkC-OscQ480dZZAR.png"]
"x9tjnPkC-OscQ480dZZAR.png"
]
} }
] ]
} }
@ -1479,9 +1419,7 @@
}, },
"cover": { "cover": {
"uri": "tos-cn-i-0813/5f0a61be754f42089db66c01854674bd", "uri": "tos-cn-i-0813/5f0a61be754f42089db66c01854674bd",
"url_list": [ "url_list": ["Yo64h_V2GqTSG3CSkWOOY.png"],
"Yo64h_V2GqTSG3CSkWOOY.png"
],
"width": 720, "width": 720,
"height": 720 "height": 720
}, },
@ -1654,15 +1592,11 @@
"cover_url": [ "cover_url": [
{ {
"uri": "douyin-user-file/4eec4c18569133d5990381a62ba49327", "uri": "douyin-user-file/4eec4c18569133d5990381a62ba49327",
"url_list": [ "url_list": ["fmO_JqQD-ukKguwbdyoiL.png"]
"fmO_JqQD-ukKguwbdyoiL.png"
]
}, },
{ {
"uri": "c8510002be9a3a61aad2", "uri": "c8510002be9a3a61aad2",
"url_list": [ "url_list": ["n3chqEY3p_JKnn2jSdd2b.png"]
"n3chqEY3p_JKnn2jSdd2b.png"
]
} }
], ],
"district": null, "district": null,
@ -1685,9 +1619,7 @@
"share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。", "share_desc": "长按复制此条消息打开抖音搜索查看TA的更多作品。",
"share_image_url": { "share_image_url": {
"uri": "tos-cn-p-0015/o80AiAzNXCD7yDQlX88bABg7YfimvUQ49SneAq", "uri": "tos-cn-p-0015/o80AiAzNXCD7yDQlX88bABg7YfimvUQ49SneAq",
"url_list": [ "url_list": ["vE3YDSQkYb_YZdfgDRZU8.png"]
"vE3YDSQkYb_YZdfgDRZU8.png"
]
}, },
"share_qrcode_url": { "share_qrcode_url": {
"uri": "315100005802d9a7fc08a", "uri": "315100005802d9a7fc08a",
@ -1710,15 +1642,11 @@
"white_cover_url": [ "white_cover_url": [
{ {
"uri": "douyin-user-file/4eec4c18569133d5990381a62ba49327", "uri": "douyin-user-file/4eec4c18569133d5990381a62ba49327",
"url_list": [ "url_list": ["OvKvfthk8TXKeVpwEkQNq.png"]
"OvKvfthk8TXKeVpwEkQNq.png"
]
}, },
{ {
"uri": "318f1000413827e122102", "uri": "318f1000413827e122102",
"url_list": [ "url_list": ["XIX6McGHe3ffHggOT8Rql.png"]
"XIX6McGHe3ffHggOT8Rql.png"
]
} }
] ]
} }

View File

@ -51,7 +51,7 @@ export default {
}, },
radius: { radius: {
type: String, type: String,
default: '3' default: '6'
} }
}, },
data() { data() {
@ -159,9 +159,9 @@ export default {
} }
&.white { &.white {
background: white; background: white !important;
color: black; color: black;
border: 1px solid gainsboro; border: 1px solid gainsboro !important;
} }
&.info { &.info {

View File

@ -14,7 +14,7 @@ export default {
@import '../assets/less/index'; @import '../assets/less/index';
.NoMore { .NoMore {
font-size: 12rem; font-size: 13rem;
height: 60rem; height: 60rem;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -1,5 +1,10 @@
<template> <template>
<Scroll :loading="state.loading" :full-loading="!state.list.length" @pulldown="loadData"> <Scroll
ref="scroll"
:loading="state.loading"
:full-loading="!state.list.length"
@pulldown="loadData"
>
<slot :list="state.list"></slot> <slot :list="state.list"></slot>
<NoMore v-if="state.total !== 0 && state.total === state.list.length" /> <NoMore v-if="state.total !== 0 && state.total === state.list.length" />
</Scroll> </Scroll>
@ -10,6 +15,7 @@ import { onMounted, reactive } from 'vue'
import { _notice } from '@/utils' import { _notice } from '@/utils'
import Scroll from '@/components/Scroll.vue' import Scroll from '@/components/Scroll.vue'
import NoMore from '@/components/NoMore.vue' import NoMore from '@/components/NoMore.vue'
import { useScroll } from '@/utils/hooks/useScroll.ts'
const props = defineProps({ const props = defineProps({
api: { api: {
@ -19,6 +25,7 @@ const props = defineProps({
} }
} }
}) })
const scroll = useScroll()
const state = reactive({ const state = reactive({
list: [], list: [],

View File

@ -79,8 +79,8 @@ watch(
() => props.list, () => props.list,
(newVal, oldVal) => { (newVal, oldVal) => {
// console.log('watch-list', newVal.length, oldVal.length, newVal) // console.log('watch-list', newVal.length, oldVal.length, newVal)
// //
if (newVal.length < oldVal.length) { if (newVal.length <= oldVal.length) {
insertContent() insertContent()
} else { } else {
// //
@ -112,10 +112,45 @@ watch(
watch( watch(
() => props.index, () => props.index,
(newVal, oldVal) => { (newVal) => {
state.localIndex = newVal state.localIndex = newVal
// console.log('watch-index', newVal, oldVal) // console.log('watch-index', newVal, oldVal)
if (!props.list.length) return if (!props?.list?.length) return
//
if (
slideListEl.value &&
slideListEl.value?.innerHTML &&
state.localIndex < props?.list?.length
) {
let startIndex = slideListEl.value
.querySelector(`.${itemClassName}:first-child`)
.getAttribute('data-index')
let endIndex = slideListEl.value
.querySelector(`.${itemClassName}:last-child`)
.getAttribute('data-index')
if (
state.localIndex >= (startIndex as any) * 1 &&
state.localIndex <= (endIndex as any) * 1
) {
//
touchEnd({})
} else {
//
insertContent()
}
}
}
)
/**
* 滑动
*/
watch(
() => state.localIndex,
(newVal, oldVal) => {
bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[newVal]) bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[newVal])
bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, { bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
uniqueId: props.uniqueId, uniqueId: props.uniqueId,
@ -131,7 +166,6 @@ watch(
}, 200) }, 200)
} }
) )
watch( watch(
() => props.active, () => props.active,
(newVal) => { (newVal) => {
@ -166,7 +200,7 @@ function insertContent() {
if (!props.list.length) return if (!props.list.length) return
//SlideList //SlideList
slideListEl.value.innerHTML = '' slideListEl.value.innerHTML = ''
let half = (props.virtualTotal - 1) / 2 let half = parseInt((props.virtualTotal / 2).toString()) //
// props.virtualTotal domindex0 // props.virtualTotal domindex0
let start = 0 let start = 0
if (state.localIndex > half) { if (state.localIndex > half) {
@ -272,7 +306,7 @@ function touchEnd(e) {
emit('refresh') emit('refresh')
} }
slideTouchEnd(e, state, canNext, (isNext) => { slideTouchEnd(e, state, canNext, (isNext) => {
let half = (props.virtualTotal - 1) / 2 let half = parseInt((props.virtualTotal / 2).toString()) //
if (props.list.length > props.virtualTotal) { if (props.list.length > props.virtualTotal) {
//() //()
if (isNext) { if (isNext) {

View File

@ -1,17 +0,0 @@
export default {
data() {
return {
mainScrollTop: 0
}
},
activated() {
if (this.$refs.mainScroll && this.$refs.mainScroll.wrapper) {
this.$refs.mainScroll.wrapper.scrollTop = this.mainScrollTop
}
},
deactivated() {
if (this.$refs.mainScroll && this.$refs.mainScroll.wrapper) {
this.mainScrollTop = this.$refs.mainScroll.wrapper.scrollTop
}
}
}

View File

@ -196,6 +196,18 @@
</ConfirmDialog> </ConfirmDialog>
<ShareToFriend v-model="state.shareToFriend" /> <ShareToFriend v-model="state.shareToFriend" />
<BaseMask v-if="!isMobile" @click="isMobile = true" />
<div v-if="!isMobile" class="guide">
<Icon class="danger" icon="mynaui:danger-triangle" />
<Icon class="close" icon="simple-line-icons:close" @click="isMobile = true" />
<div class="txt">
<h2>切换至手机模式获取最佳体验</h2>
<h3>1. F12 调出控制台</h3>
<h3>2. Ctrl+Shift+M或点击下面图标</h3>
</div>
<img src="@/assets/img/guide.png" alt="" />
</div>
</div> </div>
</template> </template>
@ -226,10 +238,12 @@ import { DefaultUser } from '@/utils/const_var'
import { _no } from '@/utils' import { _no } from '@/utils'
import LongVideo from '@/pages/home/slide/LongVideo.vue' import LongVideo from '@/pages/home/slide/LongVideo.vue'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import BaseMask from '@/components/BaseMask.vue'
const nav = useNav() const nav = useNav()
const baseStore = useBaseStore() const baseStore = useBaseStore()
const uploader = ref() const uploader = ref()
const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
const state = reactive({ const state = reactive({
active: true, active: true,
@ -457,4 +471,42 @@ function dislike() {
overflow: hidden; overflow: hidden;
border-radius: 10rem; border-radius: 10rem;
} }
.guide {
color: white;
z-index: 999;
background: var(--active-main-bg);
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 16rem;
overflow: hidden;
text-align: center;
.danger {
margin-top: 10rem;
font-size: 40rem;
color: red;
}
.close {
cursor: pointer;
font-size: 18rem;
color: white;
position: absolute;
right: 15rem;
top: 15rem;
}
.txt {
text-align: left;
padding: 0 24rem;
}
img {
display: block;
width: 350rem;
}
}
</style> </style>

View File

@ -149,7 +149,7 @@ function showDetail(e, item) {
let s = document.querySelector('.shadow') let s = document.querySelector('.shadow')
_css(s, 'z-index', '1') _css(s, 'z-index', '1')
_css(s, 'transition', '0s') _css(s, 'transition', 'all 0s')
_css(s, 'top', domRect.top) _css(s, 'top', domRect.top)
_css(s, 'left', domRect.left) _css(s, 'left', domRect.left)
_css(s, 'width', domRect.width) _css(s, 'width', domRect.width)

View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { reactive, ref, watch } from 'vue' import { reactive, ref, watch } from 'vue'
import { _checkImgUrl, _duration, _formatNumber, _stopPropagation } from '@/utils' import { _checkImgUrl, _duration, _formatNumber, _stopPropagation } from '@/utils'
import { recommendedLongVideo, recommendedVideo } from '@/api/videos' import { recommendedLongVideo } from '@/api/videos'
import ScrollList from '@/components/ScrollList.vue' import ScrollList from '@/components/ScrollList.vue'
import { useNav } from '@/utils/hooks/useNav' import { useNav } from '@/utils/hooks/useNav'

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="RequestUpdate" id="RequestUpdate"> <div class="RequestUpdate" id="RequestUpdate">
<BaseHeader> <BaseHeader :is-fixed="false">
<template v-slot:center> <template v-slot:center>
<span class="f16">求更新</span> <span class="f16">求更新</span>
</template> </template>
@ -112,9 +112,13 @@ function toggleRequestUpdate() {
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 14rem; font-size: 14rem;
display: flex;
flex-direction: column;
.content { .content {
padding: 60rem 15rem 60rem 15rem; flex: 1;
overflow: auto;
padding: 15rem 15rem 60rem 15rem;
.none { .none {
display: flex; display: flex;

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="AllMessage"> <div id="AllMessage">
<BaseHeader> <BaseHeader :is-fixed="false">
<template v-slot:center> <template v-slot:center>
<div class="center" @click="data.isShowType = !data.isShowType"> <div class="center" @click="data.isShowType = !data.isShowType">
<span class="f16">{{ showTypeText }}</span> <span class="f16">{{ showTypeText }}</span>
@ -43,32 +43,22 @@
<div class="mask" @click="data.isShowType = false"></div> <div class="mask" @click="data.isShowType = false"></div>
</div> </div>
</transition> </transition>
<div class="content"> <Scroll ref="mainScroll">
<Loading v-if="data.loading" />
<Scroll
v-else
ref="mainScroll"
:use-refresh="true"
:loading="data.loadingMore"
@refresh="refresh"
@pulldown="loadData"
>
<div class="messages"> <div class="messages">
<div class="message" @click="nav('/message/visitors')"> <div
class="message"
v-for="(item, i) in store.friends.all"
:key="i"
@click="nav('/message/visitors')"
>
<div class="left"> <div class="left">
<img <img v-lazy="_checkImgUrl(item.avatar)" alt="" class="avatar" />
v-lazy="_checkImgUrl(store.userinfo.cover_url[0].url_list[0])"
alt=""
class="avatar"
/>
</div> </div>
<div class="right"> <div class="right">
<div class="desc"> <div class="desc">
<div class="top"> <div class="name">{{ item.name }}</div>
<div class="name">主页访客</div>
</div>
<div class="desc-content">4人最近访问了你的主页看看他们是谁</div>
<div class="bottom"> <div class="bottom">
<div class="desc-content">近期访问过你的主页</div>
<div class="time">01-11</div> <div class="time">01-11</div>
</div> </div>
</div> </div>
@ -79,76 +69,16 @@
/> />
</div> </div>
</div> </div>
<div class="message" :key="i" v-for="(item, i) in showMessageList" @click="_no">
<div class="left">
<img v-lazy="_checkImgUrl(item.author.avatar)" alt="" class="avatar" />
<img
v-if="data.selectShowType === 2"
src="@/assets/img/icon/message/love-message.webp"
alt=""
class="type"
/>
<img
v-if="data.selectShowType === 3"
src="@/assets/img/icon/message/call-message.webp"
alt=""
class="type"
/>
<img
v-if="data.selectShowType === 4"
src="@/assets/img/icon/message/comment-message.webp"
alt=""
class="type"
/>
</div> </div>
<div class="right">
<div class="desc">
<div class="top">
<div class="name">{{ item.author.nickname }}</div>
<div class="tag">朋友</div>
</div>
<div class="desc-content">
<span v-if="data.selectShowType === 1">好好看啊</span>
<span v-if="data.selectShowType === 2">赞了你的作品</span>
<span v-if="data.selectShowType === 3">@{{ store.userinfo.nickname }}</span>
<span v-if="data.selectShowType === 4">好好看啊</span>
</div>
<div class="bottom">
<div class="type" v-if="data.selectShowType === 3">在评论中提到了你</div>
<div class="type" v-if="data.selectShowType === 4">回复了你的评论</div>
<div class="time">01-11</div>
</div>
</div>
<img
v-lazy="_checkImgUrl(item.video + '?vframe/jpg/offset/0/w/300')"
alt=""
class="poster"
/>
</div>
</div>
<div class="look-all" v-if="!data.showAll" @click="data.showAll = true">
<span>查看全部</span>
<dy-back />
</div>
</div>
<div class="title">
<span>朋友推荐</span>
<img src="@/assets/img/icon/about-gray.png" alt="" />
</div>
<Peoples v-model:list="data.recommend" :loading="data.loadingMore" mode="recommend" />
</Scroll> </Scroll>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Scroll from '@/components/Scroll.vue' import Scroll from '@/components/Scroll.vue'
import Loading from '@/components/Loading.vue'
import Peoples from '../people/components/Peoples.vue'
import resource from '@/assets/data/resource.js'
import { useBaseStore } from '@/store/pinia' import { useBaseStore } from '@/store/pinia'
import { _checkImgUrl, _no, _sleep, cloneDeep } from '@/utils' import { _checkImgUrl } from '@/utils'
import { computed, onMounted, reactive } from 'vue' import { computed, reactive } from 'vue'
import { useNav } from '@/utils/hooks/useNav.js' import { useNav } from '@/utils/hooks/useNav.js'
defineOptions({ defineOptions({
@ -158,20 +88,10 @@ defineOptions({
const store = useBaseStore() const store = useBaseStore()
const nav = useNav() const nav = useNav()
const data = reactive({ const data = reactive({
loading: false,
loadingMore: false,
isShowType: false, isShowType: false,
showAll: false,
recommend: [],
fans: [],
messages: [],
selectShowType: 1 selectShowType: 1
}) })
onMounted(() => {
getData()
})
const showTypeText = computed(() => { const showTypeText = computed(() => {
switch (data.selectShowType) { switch (data.selectShowType) {
case 1: case 1:
@ -187,52 +107,10 @@ const showTypeText = computed(() => {
} }
}) })
const showMessageList = computed(() => {
if (data.showAll) {
return data.messages
}
return data.messages.slice(0, 2)
})
async function getData() {
data.loading = true
await _sleep(800)
data.loading = false
data.recommend = cloneDeep(store.friends.all)
data.fans = cloneDeep(store.friends.all)
data.recommend.map((v) => {
v.type = -1
})
data.messages = cloneDeep(resource.videos)
}
function toggleShowType(index) { function toggleShowType(index) {
data.selectShowType = index data.selectShowType = index
data.isShowType = false data.isShowType = false
} }
// function remove(index) {
// _notice('')
// data.recommend.splice(index, 1)
// }
async function refresh() {
await _sleep(1000)
//TODO
// data.$refs.mainScroll.refreshEnd()
}
async function loadData() {
if (data.loadingMore) return
data.loadingMore = true
await _sleep(500)
data.loadingMore = false
let temp = cloneDeep(store.friends.all)
temp.map((v) => {
v.type = -1
})
data.recommend = data.recommend.concat(temp)
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@ -242,9 +120,12 @@ async function loadData() {
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
background: var(--color-message);
overflow: auto; overflow: auto;
color: white; color: white;
font-size: 14rem; font-size: 14rem;
display: flex;
flex-direction: column;
.center { .center {
display: flex; display: flex;
@ -254,6 +135,7 @@ async function loadData() {
width: 15rem; width: 15rem;
transform: rotate(180deg); transform: rotate(180deg);
transition: all 0.3s; transition: all 0.3s;
margin-left: 3rem;
} }
.show { .show {
@ -269,10 +151,12 @@ async function loadData() {
margin-top: var(--common-header-height); margin-top: var(--common-header-height);
.dialog-content { .dialog-content {
background: var(--main-bg); border-radius: 0 0 4rem 4rem;
background: var(--color-message);
overflow: hidden;
img { img {
width: 16rem; width: 18rem;
} }
} }
@ -285,18 +169,16 @@ async function loadData() {
} }
} }
.content {
padding: 0 var(--page-padding);
padding-top: var(--common-header-height);
.scroll { .scroll {
height: calc(var(--vh, 1vh) * 100 - var(--common-header-height)); flex: 1;
padding: 0 10rem;
} }
.messages { .messages {
.message { .message {
margin-bottom: 20rem; margin-bottom: 20rem;
display: flex; display: flex;
gap: 10rem;
&:first-child { &:first-child {
margin-top: 20rem; margin-top: 20rem;
@ -308,22 +190,10 @@ async function loadData() {
position: relative; position: relative;
.avatar { .avatar {
width: 48rem; width: 58rem;
height: 48rem; height: 58rem;
border-radius: 50%; border-radius: 50%;
} }
.type {
position: absolute;
right: 0;
bottom: 10rem;
width: 17rem;
padding: 2.5rem;
border-radius: 50%;
background: black;
}
margin-right: 10rem;
} }
.right { .right {
@ -334,40 +204,29 @@ async function loadData() {
.desc { .desc {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: center;
gap: 5rem;
.top { color: white;
//margin-bottom: 10rem; font-size: 16rem;
display: flex;
align-items: center;
.tag {
color: var(--second-text-color);
padding: 1rem 4rem;
margin-left: 10rem;
border-radius: 2rem;
background: var(--second-btn-color-tran);
font-size: 10rem;
}
}
.bottom { .bottom {
//margin-top: 10rem;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12rem; font-size: 13rem;
color: var(--second-text-color); color: lightgrey;
.type { .time {
margin-right: 10rem; font-size: 12rem;
margin-left: 10rem;
color: var(--second-text-color);
} }
} }
} }
.poster { .poster {
margin-left: 10rem; margin-left: 10rem;
width: 64rem; width: 58rem;
height: 64rem; height: 70rem;
object-fit: cover; object-fit: cover;
border-radius: 3rem; border-radius: 3rem;
} }
@ -389,19 +248,5 @@ async function loadData() {
} }
} }
} }
.title {
margin-top: 15rem;
margin-bottom: 10rem;
font-size: 12rem;
display: flex;
align-items: center;
img {
margin-left: 5rem;
width: 13rem;
}
}
}
} }
</style> </style>

View File

@ -81,6 +81,7 @@ onMounted(getData)
bottom: 0; bottom: 0;
top: 0; top: 0;
overflow: auto; overflow: auto;
background: var(--color-message);
color: white; color: white;
font-size: 14rem; font-size: 14rem;

View File

@ -8,9 +8,9 @@
</header> </header>
<Scroll ref="mainScroll"> <Scroll ref="mainScroll">
<div class="friends pl1r"> <div class="friends">
<div <div
class="friend pr1r pl1r" class="friend"
@click="nav('/message/chat')" @click="nav('/message/chat')"
:key="index" :key="index"
v-for="(item, index) in store.friends.all" v-for="(item, index) in store.friends.all"
@ -20,12 +20,13 @@
</div> </div>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
<div class="friend pr10p"> <div class="friend">
<div class="avatar">
<img src="../../assets/img/icon/message/setting.png" alt="" /> <img src="../../assets/img/icon/message/setting.png" alt="" />
<span class="ml1r">状态设置</span> </div>
<span>状态设置</span>
</div> </div>
</div> </div>
<div class="line mt2r"></div>
<div class="messages"> <div class="messages">
<!-- 粉丝--> <!-- 粉丝-->
<div class="message" @click="nav('/message/fans')"> <div class="message" @click="nav('/message/fans')">
@ -54,7 +55,7 @@
<div class="name"> <div class="name">
<span>互动消息</span> <span>互动消息</span>
</div> </div>
<div class="detail">xxx 赞了你的评论</div> <div class="detail">xxx 近期访问过你的主页</div>
</div> </div>
<div class="right"> <div class="right">
<dy-back class="arrow" mode="gray" img="back" direction="right" /> <dy-back class="arrow" mode="gray" img="back" direction="right" />
@ -433,11 +434,13 @@ import { useBaseStore } from '@/store/pinia'
import { computed, onMounted, reactive, watch } from 'vue' import { computed, onMounted, reactive, watch } from 'vue'
import { useNav } from '@/utils/hooks/useNav.js' import { useNav } from '@/utils/hooks/useNav.js'
import { _checkImgUrl, _sleep, cloneDeep } from '@/utils' import { _checkImgUrl, _sleep, cloneDeep } from '@/utils'
import { useScroll } from '@/utils/hooks/useScroll'
defineOptions({ defineOptions({
name: 'Message' name: 'Message'
}) })
const mainScroll = useScroll()
const store = useBaseStore() const store = useBaseStore()
const nav = useNav() const nav = useNav()
const data = reactive({ const data = reactive({
@ -521,6 +524,8 @@ async function loadRecommendData() {
.no-search { .no-search {
height: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
display: flex;
flex-direction: column;
> header { > header {
padding: 0 20rem; padding: 0 20rem;
@ -772,36 +777,48 @@ async function loadRecommendData() {
} }
.scroll { .scroll {
height: calc(100% - var(--common-header-height) - var(--footer-height)); flex: 1;
padding-top: 10rem; padding-top: 10rem;
padding-bottom: var(--footer-height);
} }
.friends { .friends {
overflow-x: scroll; overflow-x: scroll;
display: flex; display: flex;
font-size: 14rem; font-size: 14rem;
padding: 0 10rem;
gap: 20rem;
.friend { .friend {
@width: 70rem;
width: @width;
min-width: @width;
&:nth-last-child(1) { &:nth-last-child(1) {
img { .avatar {
margin: 0 10rem; height: @width;
padding: 17rem;
background: var(--second-btn-color-tran);
width: 30rem;
height: 30rem;
border-radius: 50%; border-radius: 50%;
margin-bottom: 6rem; display: flex;
align-items: center;
justify-content: center;
background: var(--second-btn-color-tran);
margin-bottom: 10rem;
img {
width: 35rem;
height: 35rem;
}
} }
} }
.avatar { .avatar {
position: relative; position: relative;
margin-bottom: 6rem; margin-bottom: 6rem;
width: 100%;
img { img {
@width: 64rem; width: 100%;
width: @width; height: 100%;
height: @width;
border-radius: 50%; border-radius: 50%;
} }
@ -821,7 +838,7 @@ async function loadRecommendData() {
span { span {
width: 64rem; width: 64rem;
font-size: 12rem; font-size: 12rem;
color: lightgray; color: white;
display: block; display: block;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
@ -833,6 +850,8 @@ async function loadRecommendData() {
} }
.messages { .messages {
margin-top: 20rem;
.message { .message {
display: flex; display: flex;
align-items: center; align-items: center;
@ -874,12 +893,12 @@ async function loadRecommendData() {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@padding: 14rem; @padding: 16rem;
padding: @padding 0 @padding 0; padding: @padding 0 @padding 0;
.left { .left {
.name { .name {
font-size: 14rem; font-size: 16rem;
color: white; color: white;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@ -896,7 +915,7 @@ async function loadRecommendData() {
.detail { .detail {
color: var(--second-text-color); color: var(--second-text-color);
font-size: 12rem; font-size: 14rem;
margin-top: 4rem; margin-top: 4rem;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -68,11 +68,13 @@ import { nextTick, onMounted, reactive, watch } from 'vue'
import Scroll from '@/components/Scroll.vue' import Scroll from '@/components/Scroll.vue'
import { useNav } from '@/utils/hooks/useNav.js' import { useNav } from '@/utils/hooks/useNav.js'
import { _no, _sleep } from '@/utils' import { _no, _sleep } from '@/utils'
import { useScroll } from '@/utils/hooks/useScroll'
defineOptions({ defineOptions({
name: 'SystemNotice' name: 'SystemNotice'
}) })
const mainScroll = useScroll()
const nav = useNav() const nav = useNav()
const data = reactive({ const data = reactive({
loading: false, loading: false,

View File

@ -30,24 +30,19 @@ router.beforeEach((to, from) => {
if (toDepth > fromDepth) { if (toDepth > fromDepth) {
if (to.matched && to.matched.length) { if (to.matched && to.matched.length) {
const toComponentName = to.matched[0].components?.default.name const toComponentName = to.matched[0].components?.default.name
// store.commit('updateExcludeRoutes', {type: 'remove', value: toComponentName}) baseStore.updateExcludeNames({ type: 'remove', value: toComponentName })
baseStore.updateExcludeRoutes({ type: 'remove', value: toComponentName })
// console.log('to', toComponentName)
// console.log('前进') // console.log('前进')
// console.log('删除', toComponentName) // console.log('删除', toComponentName)
} }
} else { } else {
if (from.matched && from.matched.length) { if (from.matched && from.matched.length) {
const fromComponentName = from.matched[0].components?.default.name const fromComponentName = from.matched[0].components?.default.name
// store.commit('updateExcludeRoutes', {type: 'add', value: fromComponentName}) baseStore.updateExcludeNames({ type: 'add', value: fromComponentName })
baseStore.updateExcludeRoutes({ type: 'add', value: fromComponentName })
// console.log('后退') // console.log('后退')
// console.log('添加', fromComponentName) // console.log('添加', fromComponentName)
} }
} }
// ...
// 返回 false 以取消导航
return true return true
}) })

View File

@ -11,7 +11,7 @@ export const useBaseStore = defineStore('base', {
maskDialog: false, maskDialog: false,
maskDialogMode: 'dark', maskDialogMode: 'dark',
version: '17.1.0', version: '17.1.0',
excludeRoutes: [], excludeNames: [],
judgeValue: 20, judgeValue: 20,
homeRefresh: 60, homeRefresh: 60,
loading: false, loading: false,
@ -78,18 +78,18 @@ export const useBaseStore = defineStore('base', {
this.maskDialogMode = val.mode this.maskDialogMode = val.mode
} }
}, },
updateExcludeRoutes(val) { updateExcludeNames(val) {
if (val.type === 'add') { if (val.type === 'add') {
if (!this.excludeRoutes.find((v) => v === val.value)) { if (!this.excludeNames.find((v) => v === val.value)) {
this.excludeRoutes.push(val.value) this.excludeNames.push(val.value)
} }
} else { } else {
const resIndex = this.excludeRoutes.findIndex((v) => v === val.value) const resIndex = this.excludeNames.findIndex((v) => v === val.value)
if (resIndex !== -1) { if (resIndex !== -1) {
this.excludeRoutes.splice(resIndex, 1) this.excludeNames.splice(resIndex, 1)
} }
} }
// console.log('store.excludeRoutes', store.excludeRoutes,val) // console.log('store.excludeNames', store.excludeNames,val)
} }
} }
}) })

View File

@ -142,7 +142,7 @@ export default class Dom {
} }
export function _css(el, key, value?) { export function _css(el, key, value?) {
const reg = /^\d+.?\d*(px|pt|em|rem|vw|vh|%|rpx|ms)$/i const reg = /^-?\d+.?\d*(px|pt|em|rem|vw|vh|%|rpx|ms)$/i
if (value === undefined) { if (value === undefined) {
let val = null let val = null
if ('getComputedStyle' in window) { if ('getComputedStyle' in window) {

View File

@ -1,13 +0,0 @@
import { onActivated, onDeactivated } from 'vue'
export function useBase() {
const mainScroll = $ref()
const mainScrollTop = $ref(0)
onActivated(() => {
console.log('onActivated')
})
onDeactivated(() => {
console.log('onDeactivated')
})
}

View File

@ -0,0 +1,17 @@
import { onActivated, onDeactivated, ref } from 'vue'
export function useScroll() {
const mainScroll = ref()
let mainScrollTop = $ref(0)
onActivated(() => {
if (mainScroll.value && mainScroll.value.wrapper) {
mainScroll.value.wrapper.scrollTop = mainScrollTop
}
})
onDeactivated(() => {
if (mainScroll.value && mainScroll.value.wrapper) {
mainScrollTop = mainScroll.value.wrapper.scrollTop
}
})
return mainScroll
}

View File

@ -1,4 +1,4 @@
import { defineConfig, PluginOption } from 'vite' import { defineConfig, PluginOption, UserConfig } from 'vite'
import Vue from '@vitejs/plugin-vue' import Vue from '@vitejs/plugin-vue'
import VueJsx from '@vitejs/plugin-vue-jsx' import VueJsx from '@vitejs/plugin-vue-jsx'
import { visualizer } from 'rollup-plugin-visualizer' import { visualizer } from 'rollup-plugin-visualizer'
@ -7,22 +7,17 @@ import { fileURLToPath, URL } from 'node:url'
import { getLastCommit } from 'git-last-commit' import { getLastCommit } from 'git-last-commit'
import VueMacros from 'unplugin-vue-macros/vite' import VueMacros from 'unplugin-vue-macros/vite'
// import viteImagemin from 'vite-plugin-imagemin'
// import viteCompression from 'vite-plugin-compression'
const lifecycle = process.env.npm_lifecycle_event const lifecycle = process.env.npm_lifecycle_event
// { export default defineConfig((): Promise<UserConfig> => {
// name: 'axios', let latestCommitHash = ''
// var: 'axios',
// path: 'https://lib.baomitu.com/axios/1.6.8/axios.min.js'
// },
export default defineConfig(async () => { return new Promise((resolve) => {
const latestCommitHash = await new Promise<string>((resolve) => { getLastCommit((err, commit) => {
return getLastCommit((err, commit) => (err ? 'unknown' : resolve(commit.shortHash))) if (!err) {
}) latestCommitHash = commit.shortHash
return { }
resolve({
base: './', base: './',
envDir: 'env', envDir: 'env',
plugins: [ plugins: [
@ -103,11 +98,6 @@ export default defineConfig(async () => {
// }, // },
// }), // }),
], ],
define: {
LATEST_COMMIT_HASH: JSON.stringify(
latestCommitHash + (process.env.NODE_ENV === 'production' ? '' : ' (dev)')
)
},
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) '@': fileURLToPath(new URL('./src', import.meta.url))
@ -119,7 +109,7 @@ export default defineConfig(async () => {
rollupOptions: { rollupOptions: {
// https://rollupjs.org/guide/en/#outputmanualchunks // https://rollupjs.org/guide/en/#outputmanualchunks
output: { output: {
manualChunks(id, { getModuleInfo }) { manualChunks(id: string, { getModuleInfo }: any) {
const reg = /(.*)\/src\/components\/(.*)/ const reg = /(.*)\/src\/components\/(.*)/
if (reg.test(id)) { if (reg.test(id)) {
const importersLen = getModuleInfo(id)?.importers.length ?? 0 const importersLen = getModuleInfo(id)?.importers.length ?? 0
@ -167,6 +157,11 @@ export default defineConfig(async () => {
}, },
assetsInlineLimit: 2048 assetsInlineLimit: 2048
}, },
define: {
LATEST_COMMIT_HASH: JSON.stringify(
latestCommitHash + (process.env.NODE_ENV === 'production' ? '' : ' (dev)')
)
},
esbuild: { esbuild: {
// drop: ['console', 'debugger'] // drop: ['console', 'debugger']
}, },
@ -177,6 +172,11 @@ export default defineConfig(async () => {
fs: { fs: {
strict: false strict: false
} }
},
preview: {
port: 5555
} }
} })
})
})
}) })