浅念
37d88da4bc
- admin-preview-2026-09-22/ 20页新版后台HTML原型+截图+validation（UI05 交付） - app-preview-2026-09-22/ 截图/validation/check 脚本入库及小改 - admin-redesign-concept 概念图 - UI05 管理后台分析与新版设计说明、用户列表分页计划文档 - UI06 全端视觉统一实施方案（以两个 HTML 预览为唯一视觉基准） - services/api g4-sync-once 手动同步脚本 Co-Authored-By: Claude Code <noreply@anthropic.com>
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 是本仓库的生成和检查辅助脚本。普通浏览无需执行它们。