浅念
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 App 全页面 HTML 交互原型
日期：2026-09-22。打开 index.html 查看页面目录和交互预览，点击“全部页面总览”查看全部20页的实际渲染截图。也可以直接打开 01-login.html 等独立入口。无须启动服务、安装依赖或访问网络。
设计依据
../../plans/2026-09-21-UI03-App全页面新版效果图落地实施方案.md../../plans/2026-09-22-UI03R-App高保真还原完整实施方案.md../app-redesign-2026-09-21/下五张设计板。
本目录为独立 HTML 设计原型，未修改 Flutter、API、观众页或嵌入组件业务代码。各页面是 HTML/CSS 控件，不是把整张设计板作为界面。摄影素材通过 CSS 显示已有生成设计图中的摄影区域，来源为本项目 viewer-mobile-concept-2026-09-21.png；assets/reference.png 为离线副本。摄影主题接近参考图，但并非五张板中的每张原始照片；低分辨率局部素材仅用于预览，不作为生产图片素材。
页面清单
| 编号 | 独立文件 | 内容 |
|---|---|---|
| 01 | 01-login.html | 摄影拼贴、示例账号登录 |
| 02 | 02-settings.html | 账号摘要、设置、退出 |
| 03 | 03-password.html | 密码校验演示 |
| 04 | 04-language.html | 语言选择与 Done 提交 |
| 05 | 05-albums.html | 三张摄影封面相册卡 |
| 06 | 06-album-detail.html | 相册详情、九宫格、拍摄/选图 |
| 07 | 07-album-actions.html | 相册操作面板 |
| 08 | 08-empty-album.html | 空相册与上传入口 |
| 09 | 09-create-album.html | 创建表单、日期、时区、地点、语言 |
| 10 | 10-edit-album.html | 详情/权限页签，草稿统一保存 |
| 11 | 11-members.html | 所有者、协作者、内部账号选择 |
| 12 | 12-categories.html | 分类列表、新建与编辑面板 |
| 13 | 13-camera.html | 深色相机取景演示、模拟入队 |
| 14 | 14-uploads.html | 本机摘要、进度与状态 |
| 15 | 15-upload-errors.html | 可重试与需重新选择的异常任务 |
| 16 | 16-upload-history.html | 服务端跨设备历史示例 |
| 17 | 17-photos.html | 三列照片网格与公开/隐藏筛选 |
| 18 | 18-photo-detail.html | 管理大图、元信息、隐藏/删除 |
| 19 | 19-share.html | 分享卡、演示二维码、预览链接 |
| 20 | 20-hide-photo.html | 隐藏确认面板 |
可操作的演示路径
- 登录（不用真实密码）→相册→详情→拍摄→快门模拟入队→上传中心。
- 相册详情→更多→编辑→切换 Details/Access→保存，预览会话中的标题/权限更新。
- 成员→邀请同事→搜索示例内部账号→添加；成员菜单可模拟移除。
- 分类→填写名称→保存；点击分类铅笔编辑。
- 照片网格→大图→隐藏→确认→Hidden 筛选；大图可重新公开及模拟删除。
- 设置→语言→选择 English/中文/跟随系统→Done。关闭面板不提交选择。
- 上传→Needs attention→重试；不可恢复的源文件项进入示例选图面板。
- 分享→打开此前的观众页原型，或复制本地文件预览地址。
状态仅保存在当前文档内存，刷新/从目录重新打开某页会恢复示例。直接在预览内跳转保留当前会话变更。账号密码不发送、不持久化；请勿输入真实凭证。
边界说明
- 相机是示例图片，快门仅增加示例队列数；不请求设备摄像头权限。
- 上传进度、服务端记录、账号、角色与时间为视觉样本，不接入 OSS/网络/原生后台上传。
- 浏览器HTML不能验证 Flutter 的系统相机、后台/锁屏、原生手势、iOS/Android 安全区或性能。
- 二维码是真实编码的演示 URL
https://example.com/photolive-preview，不是公开相册，不能用于活动分发。正式 QR 必须由真实公开相册链接生成。 - 分享中的“打开观众页预览”依赖本目录上一层
viewer-preview-2026-09-22.html；单独搬运本目录时，App 本身可离线打开，但此跨原型链接会失效。 - 所有管理写操作仅在原型内模拟，不构成权限、接口或生产功能验收。
- 参考板是英文浅色，本套以该基准制作；中文可切换，未提供全套系统深色主题、双指缩放和原生键盘还原。
文件结构
index.html：目录、固定尺寸预览、截图总览。01-*.html至20-*.html：20个独立页面入口。app.js/styles.css：公共界面和交互实现。pages.js：页面索引。assets/：离线摄影素材与演示二维码。screenshots/：实际 HTML 渲染截图。validation.json：自动检查结果，不能替代原生 App 验收。build-preview.cjs：本仓库环境中重新生成入口与二维码；浏览原型无需运行。
在本目录使用 node build-preview.cjs 可以重新生成入口，所需 qrcode 使用仓库已有依赖。不要通过此脚本修改原生 App 或线上配置。