浅念
73 lines
4.9 KiB
Markdown
73 lines
4.9 KiB
Markdown
# 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 | 隐藏确认面板 |
|
||
|
||
## 可操作的演示路径
|
||
|
||
1. 登录（不用真实密码）→相册→详情→拍摄→快门模拟入队→上传中心。
|
||
2. 相册详情→更多→编辑→切换 Details/Access→保存，预览会话中的标题/权限更新。
|
||
3. 成员→邀请同事→搜索示例内部账号→添加；成员菜单可模拟移除。
|
||
4. 分类→填写名称→保存；点击分类铅笔编辑。
|
||
5. 照片网格→大图→隐藏→确认→Hidden 筛选；大图可重新公开及模拟删除。
|
||
6. 设置→语言→选择 English/中文/跟随系统→Done。关闭面板不提交选择。
|
||
7. 上传→Needs attention→重试；不可恢复的源文件项进入示例选图面板。
|
||
8. 分享→打开此前的观众页原型，或复制本地文件预览地址。
|
||
|
||
状态仅保存在当前文档内存，刷新/从目录重新打开某页会恢复示例。直接在预览内跳转保留当前会话变更。账号密码不发送、不持久化；请勿输入真实凭证。
|
||
|
||
## 边界说明
|
||
|
||
- 相机是示例图片，快门仅增加示例队列数；不请求设备摄像头权限。
|
||
- 上传进度、服务端记录、账号、角色与时间为视觉样本，不接入 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 或线上配置。
|