# PhotoLive 管理后台新版 HTML 原型

打开 **index.html**，使用左侧菜单浏览；点击“全部页面目录”查看20个入口。每个页面也有独立HTML文件，可双击打开。无需启动服务或访问互联网。

视觉基于Art Design Pro / Element Plus的后台布局，但此目录是独立原生HTML原型，没有改动 `apps/admin`。

## 交付文件

- `index.html`：默认相册管理入口。
- `01-*.html` 至 `20-*.html`：独立页面，见下表。
- `styles.css`、`admin.js`、`icons.js`、`pages.js`：共享外观、交互及索引。
- `assets/`：离线示例图片与演示二维码。
- `screenshots/01.png` 至 `20.png`：实际HTML渲染截图；mobile前缀为窄屏检查。
- `validation.json`：本次浏览器检查结果。
- `image-prompt.txt`：概念图完整生成提示词。
- `../../plans/2026-09-22-UI05-管理后台分析与新版设计说明.md`：现状分析、接口差异及实施映射。

## 页面目录

| 编号 | 内容 | 文件 |
|---|---|---|
| 01 | 账号密码登录 | 01-login.html |
| 02 | 相册卡片/表格列表 | 02-albums.html |
| 03 | 相册照片网格/表格 | 03-photos.html |
| 04 | 成员与所有者交接 | 04-members.html |
| 05 | 双语分类 | 05-categories.html |
| 06 | 水印预览、生成任务 | 06-watermark.html |
| 07 | 分享卡、二维码、链接 | 07-sharing.html |
| 08 | 新建相册表单 | 08-create-album.html |
| 09 | 编辑资料、访问开关 | 09-edit-album.html |
| 10 | 账号、角色与治理 | 10-users.html |
| 11 | 用户目录同步 | 11-user-sync.html |
| 12 | 用量、阈值与告警 | 12-usage.html |
| 13 | 展示位、绑定、接入代码 | 13-embed-slots.html |
| 14 | v1/v2配置与小窗预览 | 14-embed-editor.html |
| 15 | 宣传图与资产入口 | 15-branding.html |
| 16 | 管理大图及操作 | 16-photo-viewer.html |
| 17 | 403 | 17-403.html |
| 18 | 404 | 18-404.html |
| 19 | 500 | 19-500.html |
| 20 | 同步批次失败明细 | 20-sync-detail.html |

## 可以体验

- 中英文切换、相册搜索、卡片/表格切换、照片分类/状态筛选。
- 查看大图、单张隐藏/恢复/软删除、选择已公开照片批量隐藏。
- 创建和编辑示例相册、邀请内部示例用户、交接所有者、分类增改。
- 水印文字/位置/透明度/字号即时预览。
- 账号搜索、角色修改、重置密码流程、激活/锁定；自身账号角色不可改。
- 同步运行模拟、失败详情、用量阈值对话框。
- 展示位开关/绑定、v1/v2设置、固定195×280预览、收起展开、模拟气泡、复制示例代码。

## 重要边界

所有数据和操作为样例，不调用生产接口、不真正重置密码或上传/删除文件。请勿输入真实账号密码。原型状态只存在当前标签页内存，重新打开独立页会重置。

摄影局部来自本次生成的后台概念图，`assets/photo-reference.png` 保留离线来源。界面文字、表单、卡片和表格均为真实DOM。样例文件名、时间、人数和数据不能抄进生产默认值。

分享QR指向 `https://example.com/photolive-preview`，仅用于展示，不是相册链接。跨原型链接依赖上一层已生成的 `viewer-preview-2026-09-22.html` / `embed-preview-2026-09-22.html`；搬运目录时请一同携带，或修改为实际目标。

嵌入配置中的预览为简化CSS展示；正式组件须复用现有UI04代码。此次未完成真实角色权限、OSS、网络异常、水印生成、用户同步或Art Design Pro运行集成验收。

`build-preview.cjs` / `check-preview.cjs` 是本仓库的生成和检查辅助脚本。普通浏览无需执行它们。