# 照片墙 Photo Wall（`#photo` 入口）

模拟软木板/墙面的互动照片展示页：上传本地照片，以宝丽来风格散落摆放，用胶带、
图钉、便签、贴纸、印章、手绘箭头自由装扮，可导出为一张 PNG。**纯前端**（无后端改动），
状态存浏览器 `localStorage`。

设计来源：`photo-wall-design.docx`（产品设计文档 v1.0）。本页是其 React 重写版。

## 入口与鉴权流

地址栏 `#photo` 是一个**写死的公开入口**，与开发者入口门（`dev_gate`）**无关**：

```
浏览器 #photo
  └─ 直接显示登录页（复用 LoginPage，但去掉顶部服务器负载栏）  ← 不查后端 gate
       登录页提交用户名 + 密码
  └─ POST /api/web/login → 校验同一套 ccuser 账号 → 成功后进入照片墙
```

- `#photo` **不走** `POST /api/web/gate`（藏门口令），但照片墙本身仍被登录挡住——
  用的是同一套 `ccuser` 后端账号（见 [auth-login-gate.md](auth-login-gate.md)）。
- **已登录**用户访问 `#photo` 会跳过登录页，直接进墙。
- 墙内右上角「退出」= 清登录态 + 抹掉地址栏 `#photo`，回到导航页（`StartPage`）。

## 涉及文件（全部前端）

- `Client/src/App.tsx` — 监听 `hashchange`：`#photo` 短路 gate，置 `wantsPhoto`；
  已登录 + `wantsPhoto` → 渲染 `PhotoWallPage`，否则博客页。
- `Client/src/components/LoginPage.tsx` — 新增 `hideStats` 开关，隐藏顶部
  `AnnouncementBar`（系统负载栏）；把轮询的 `useSystemStats` 拆进只在显示时挂载的
  `StatsBar` 子组件，隐藏时不发请求。
- `Client/src/components/PhotoWallPage.tsx` — 照片墙组件本体。
- `Client/src/index.css` — 末尾 `.pw-` 命名空间的全部照片墙美术样式（软木板/宝丽来/
  便签折角/胶带/图钉等，无法用 Tailwind 表达的部分）。

> 后端零改动：登录走既有 `/api/web/login`，照片墙数据只存浏览器，不落服务器。

## 功能

- **照片**：宝丽来白边（底部加大留白）、随机旋转 ±15°、立体投影；三种随机固定方式
  （胶带 / 彩色图钉 / 双角胶带）。
- **交互**：拖拽移动、双击编辑标注、右键菜单（旋转 ±5°、放大/缩小、移到最前/最后、
  删除；便签额外可改色）。触摸端长按 = 右键。
- **装饰**：便签（5 色 + 折角）、胶带条、12 预设贴纸 + 自定义文字、SVG 印章、手绘箭头
  （选中后在画布拖动绘制）。
- **背景**：软木板 / 黑板 / 白墙 / 牛皮纸，工具栏循环切换。
- **上传**：按钮选择 / 拖入画布 / 剪贴板粘贴（`FileReader` 读 Base64）。
- **历史**：撤销/重做 Ctrl+Z / Ctrl+Y，最多 30 步。
- **持久化**：操作后防抖 1s 自动写 `localStorage`，key `photo-wall-state`
  （`{ bgIndex, els }`）；工具栏显示「保存中…/已保存」。
- **导出**：`html2canvas`（CDN 懒加载）截图画布为 `photo-wall-<时间戳>.png`。

## 实现注记

- **拖拽性能**：拖拽过程中只直接改 DOM 的 `transform`（GPU 合成），**不触发 React
  重渲染**；松手后才一次性 commit 进状态并记一步历史。故拖拽中不得 `setState`。
- 元素统一 Pointer Events 处理鼠标 + 触摸；`touch-action: none` 防止滚动抢手势。
- 「保存中…」由各改动入口（mutate / undo / redo / 拖拽 commit / 换背景）打标，
  防抖 effect 仅负责落盘并置「已保存」——避免在 effect 内同步 `setState` 引发级联渲染。

## 线上访问

部署后：`http://8.130.143.54:8548/#photo`（纯前端改动，按
[部署计划](superpowers/plans/2026-06-18-deploy.md)的 frontend-only redeploy 路径上线，
后端无需重启）。