diff --git a/docs/photo-wall.md b/docs/photo-wall.md index 9640ee8..bad7ca8 100644 --- a/docs/photo-wall.md +++ b/docs/photo-wall.md @@ -1,10 +1,14 @@ # 照片墙 Photo Wall(`#photo` 入口) 模拟软木板/墙面的互动照片展示页:上传本地照片,以宝丽来风格散落摆放,用胶带、 -图钉、便签、贴纸、印章、手绘箭头自由装扮,可导出为一张 PNG。**纯前端**(无后端改动), -状态存浏览器 `localStorage`。 +图钉、便签、贴纸、印章、手绘箭头自由装扮,可导出为一张 PNG。 -设计来源:`photo-wall-design.docx`(产品设计文档 v1.0)。本页是其 React 重写版。 +**职责切分**:图片字节**按登录用户存服务器**(最多 10 张/人、严格私有、JWT 鉴权); +背景、装饰、以及每张图的排版覆盖**存浏览器 `localStorage`**(按服务器图片 id 关联)。 + +设计来源:`photo-wall-design.docx`(产品设计文档 v1.0);服务器存图设计见 +[specs/2026-06-24-photo-wall-server-storage-design.md](superpowers/specs/2026-06-24-photo-wall-server-storage-design.md)。 +本页是其 React 重写版。 ## 入口与鉴权流 @@ -22,32 +26,58 @@ - **已登录**用户访问 `#photo` 会跳过登录页,直接进墙。 - 墙内右上角「退出」= 清登录态 + 抹掉地址栏 `#photo`,回到导航页(`StartPage`)。 -## 涉及文件(全部前端) +## 涉及文件 +前端: - `Client/src/App.tsx` — 监听 `hashchange`:`#photo` 短路 gate,置 `wantsPhoto`; - 已登录 + `wantsPhoto` → 渲染 `PhotoWallPage`,否则博客页。 + 已登录 + `wantsPhoto` → 渲染 `PhotoWallPage`(传入会话 `token`),否则博客页。 - `Client/src/components/LoginPage.tsx` — 新增 `hideStats` 开关,隐藏顶部 `AnnouncementBar`(系统负载栏);把轮询的 `useSystemStats` 拆进只在显示时挂载的 `StatsBar` 子组件,隐藏时不发请求。 +- `Client/src/hooks/useAuth.ts` — `Auth` 暴露 `token`(JWT),供图片接口鉴权。 +- `Client/src/api/photos.ts` — 图片接口封装:`listPhotos`/`uploadPhoto`/`deletePhoto`/ + `fetchPhotoObjectUrl`(带 `Authorization: Bearer` 头;读取取 blob 成 objectURL)。 - `Client/src/components/PhotoWallPage.tsx` — 照片墙组件本体。 -- `Client/src/index.css` — 末尾 `.pw-` 命名空间的全部照片墙美术样式(软木板/宝丽来/ - 便签折角/胶带/图钉等,无法用 Tailwind 表达的部分)。 +- `Client/src/index.css` — 末尾 `.pw-` 命名空间的全部照片墙美术样式。 -> 后端零改动:登录走既有 `/api/web/login`,照片墙数据只存浏览器,不落服务器。 +后端(Rust): +- `Server/src/auth.rs` — `issue_token(username)` 签发 HS256 JWT、`verify_token` 校验。 +- `Server/src/routes/extract.rs` — `AuthUser` 提取器(`Authorization: Bearer` → 用户名,失败 401)。 +- `Server/src/photos.rs` — `PhotoStore`:按用户隔离到 `PHOTO_DIR/<用户>/`,含路径安全、 + 类型/大小/数量限额(≤10 张、单图 ≤8MiB),save 加锁防并发越额。 +- `Server/src/routes/web.rs` — 图片接口(见下);登录改签带用户名的 JWT;CORS 放行 + `DELETE`/`Authorization`;图片路由 body 上限放宽至 16MB。 + +## 接口(均经 `AuthUser` 鉴权) + +| 方法 | 路径 | 行为 | +|---|---|---| +| GET | `/api/web/photos` | 列出当前用户图片 id(`{ items:[{id}], max:10 }`) | +| POST | `/api/web/photos` | 上传(body `{ dataUrl }`);满 10 张 409、超 8MiB 413、类型错 415 | +| GET | `/api/web/photos/{id}` | 流式返回字节(属主校验,非法/不存在 404) | +| DELETE | `/api/web/photos/{id}` | 删除 | + +存储:`PHOTO_DIR`(默认 `photo-wall`,线上 `/opt/internet-project/photo-wall/`)下 +每用户一子目录,每图随机十六进制文件名。`JWT_SECRET` 环境变量为签名密钥。 ## 功能 - **照片**:宝丽来白边(底部加大留白)、随机旋转 ±15°、立体投影;三种随机固定方式 (胶带 / 彩色图钉 / 双角胶带)。 -- **交互**:拖拽移动、双击编辑标注、右键菜单(旋转 ±5°、放大/缩小、移到最前/最后、 - 删除;便签额外可改色)。触摸端长按 = 右键。 +- **交互**:拖拽移动、双击编辑标注、右键菜单(旋转 ±15°、放大/缩小、移到最前/最后、 + 旋转角度预设 0/15/30/45/90°、放大比例预设 0.5/0.75/1/1.5/2×、删除;便签额外可改色)。 + 触摸端长按 = 右键。 - **装饰**:便签(5 色 + 折角)、胶带条、12 预设贴纸 + 自定义文字、SVG 印章、手绘箭头 (选中后在画布拖动绘制)。 - **背景**:软木板 / 黑板 / 白墙 / 牛皮纸,工具栏循环切换。 -- **上传**:按钮选择 / 拖入画布 / 剪贴板粘贴(`FileReader` 读 Base64)。 +- **上传**:按钮选择 / 拖入画布 / 剪贴板粘贴(`FileReader` 读 Base64 → 传服务器); + 满 10 张前端拦下、服务器 409 兜底。 - **历史**:撤销/重做 Ctrl+Z / Ctrl+Y,最多 30 步。 -- **持久化**:操作后防抖 1s 自动写 `localStorage`,key `photo-wall-state` - (`{ bgIndex, els }`);工具栏显示「保存中…/已保存」。 +- **持久化**:图片存服务器;**排版/装饰**操作后防抖 1s 自动写 `localStorage`,key + `photo-wall-state`(`{ bgIndex, decorations, photoLayout }`,`photoLayout` 按服务器 + 图片 id 关联位置/旋转/缩放/层级/标注/宽度);工具栏显示「保存中…/已保存」。 + 无本地排版的图片首次加载时自动散落摆放。读到旧结构(`{ bgIndex, els }`,照片带 + base64)时只取其装饰部分,旧照片丢弃。 - **导出**:`html2canvas`(CDN 懒加载)截图画布为 `photo-wall-<时间戳>.png`。 ## 实现注记 @@ -60,6 +90,7 @@ ## 线上访问 -部署后:`http://8.130.143.54:8548/#photo`(纯前端改动,按 -[部署计划](superpowers/plans/2026-06-18-deploy.md)的 frontend-only redeploy 路径上线, -后端无需重启)。 +`http://8.130.143.54:8548/#photo`。服务器存图引入了后端改动 → 走**全量重部署** +(重编 Rust → 传二进制 → `restart_rust.sh` 重启),非 frontend-only。需在服务器 +`weather.env` 配 `JWT_SECRET`;首次上传自动建 `photo-wall/<用户>/`。**因 token 格式 +从旧的时间戳哈希变为 JWT,上线后用户需重新登录一次。** diff --git a/docs/superpowers/plans/2026-06-18-deploy.md b/docs/superpowers/plans/2026-06-18-deploy.md index 544a9e9..91e021e 100644 --- a/docs/superpowers/plans/2026-06-18-deploy.md +++ b/docs/superpowers/plans/2026-06-18-deploy.md @@ -251,6 +251,15 @@ curl -s -o /dev/null -w '%{http_code}\n' http://8.130.143.54:8548/api/client/hea A helper exists on the server: `/opt/internet-project/restart_rust.sh`. The previous binary is kept as `RustServer.bak` for rollback. +**照片墙服务器存图(2026-06-24,后端改动):** +照片墙从纯前端 localStorage 改为按用户存服务器(`#photo` 入口,详见 +[photo-wall.md](../../photo-wall.md))。这引入了后端改动,需**全量重部署**(非 +frontend-only):重编 Rust → 传二进制 → `restart_rust.sh` 重启。新增两个运行时配置: +- `JWT_SECRET`(写在 `/opt/internet-project/weather.env`)—— 登录 token 改为 HS256 + JWT 的签名密钥,未设则用内置开发密钥并告警。**token 格式变了,上线后用户需重登一次。** +- `PHOTO_DIR`(可选,默认 `photo-wall`,即 `/opt/internet-project/photo-wall/`)—— + 图片按用户存到其下子目录,首次上传自动创建。 + > Startpage backgrounds: large PNG/JPG source images are pre-compressed to WebP > (quality ~82) before building — keeps each background under ~600 KB for the > 3 Mbps server link. Two sets live under `Client/src/assets/startpage/`: