54 lines
2.5 KiB
Markdown
54 lines
2.5 KiB
Markdown
# 瞬间 FLOW
|
||
|
||
Next.js Pages Router + React + TypeScript 的抖音风格单页演示。无登录、无数据库、无后端业务接口。
|
||
|
||
## 本地启动
|
||
|
||
Node.js 22，pnpm 10.28.2：
|
||
|
||
```sh
|
||
corepack enable
|
||
pnpm install --frozen-lockfile
|
||
pnpm dev
|
||
```
|
||
|
||
浏览器打开 http://localhost:3000 。页面直接铺满浏览器宽度，没有侧栏或固定宽度的播放器外框。手机保留底部导航，电脑使用浮层控制。
|
||
|
||
上下拖动时，上下两条视频会随鼠标或手指一起移动；轻拖后松开回弹，超过约 19% 屏幕高度或快速甩动则翻页。三条真实页面循环复用，避免切换时闪屏。电脑也支持滚轮、上下方向键及右侧切换按钮。空格暂停，M 切换声音，斜杠搜索。
|
||
|
||
## 交互
|
||
|
||
- 三段本地 MP4 无限循环切换，单击暂停、双击位置爱心与粒子、拖动进度、静音/开启声音、桌面全屏。
|
||
- 点赞收藏弹性反馈，评论面板滑入滑出，手机评论面板可拖动顶部把手向下关闭；系统减少动态效果设置受到尊重。
|
||
- 点赞、收藏、关注按视频保存在本机 localStorage，无需账号。
|
||
- 搜索默认数据、标签搜索、分享视频专属链接、评论抽屉及本次会话评论。
|
||
- 其他导航提供演示提示，不包含其他业务页面。
|
||
|
||
## 重新生成视频
|
||
|
||
```sh
|
||
pnpm generate:videos
|
||
```
|
||
|
||
`scripts/generate-videos.mjs` 使用 Canvas 绘图和 FFmpeg 生成日落、海岸、霓虹三段 8 秒 H.264/AAC 视频及封面。无外部素材下载；成品已提交，正常构建和运行无需 FFmpeg。音轨为程序生成的轻声合成音，初始静音。
|
||
|
||
## 检查与构建
|
||
|
||
```sh
|
||
pnpm typecheck
|
||
pnpm build
|
||
pnpm start
|
||
```
|
||
|
||
## Docker 持久化部署
|
||
|
||
```sh
|
||
docker compose up -d --build --wait
|
||
```
|
||
|
||
默认发布到宿主机 `18080` 端口，可用 `PUBLIC_PORT` 覆盖。容器以非 root 用户运行，具有健康检查、日志轮转及 `unless-stopped` 重启策略。
|
||
|
||
推送 main 触发 `.gitea/workflows/deploy.yml`，使用 `ces-control` 标签 runner 构建并部署。该 runner 必须能访问目标宿主机 Docker daemon 并具备 Compose v2；安全组需允许公网访问所选端口。运行持久性由宿主机 Docker 提供，runner 任务结束不会删除应用容器。若同标签有多个 runner，应由管理员保证标签指向预期部署主机。
|
||
|
||
后续更新：提交并推送 main 即可。镜像保留提交 SHA 标签，可用 `IMAGE_TAG=<旧提交SHA> docker compose up -d --no-build` 回滚到该宿主机已保留的镜像。
|