2.5 KiB
瞬间 FLOW
Next.js Pages Router + React + TypeScript 的抖音风格单页演示。无登录、无数据库、无后端业务接口。
本地启动
Node.js 22，pnpm 10.28.2：
corepack enable
pnpm install --frozen-lockfile
pnpm dev
浏览器打开 http://localhost:3000 。页面直接铺满浏览器宽度，没有侧栏或固定宽度的播放器外框。手机保留底部导航，电脑使用浮层控制。
上下拖动时，上下两条视频会随鼠标或手指一起移动；轻拖后松开回弹，超过约 19% 屏幕高度或快速甩动则翻页。三条真实页面循环复用，避免切换时闪屏。电脑也支持滚轮、上下方向键及右侧切换按钮。空格暂停，M 切换声音，斜杠搜索。
交互
- 三段本地 MP4 无限循环切换，单击暂停、双击位置爱心与粒子、拖动进度、静音/开启声音、桌面全屏。
- 点赞收藏弹性反馈，评论面板滑入滑出，手机评论面板可拖动顶部把手向下关闭；系统减少动态效果设置受到尊重。
- 点赞、收藏、关注按视频保存在本机 localStorage，无需账号。
- 搜索默认数据、标签搜索、分享视频专属链接、评论抽屉及本次会话评论。
- 其他导航提供演示提示，不包含其他业务页面。
重新生成视频
pnpm generate:videos
scripts/generate-videos.mjs 使用 Canvas 绘图和 FFmpeg 生成日落、海岸、霓虹三段 8 秒 H.264/AAC 视频及封面。无外部素材下载；成品已提交，正常构建和运行无需 FFmpeg。音轨为程序生成的轻声合成音，初始静音。
检查与构建
pnpm typecheck
pnpm build
pnpm start
Docker 持久化部署
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 回滚到该宿主机已保留的镜像。