docs(plan): UI-03 app redesign implementation plan

Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
2026-09-21 23:45:34 +08:00
parent 2a489aa16a
commit 18c4c3cfbc
29 changed files with 2200 additions and 0 deletions
@@ -0,0 +1,55 @@
- generic [ref=e3]:
- banner [ref=e4]:
- generic [ref=e5]: PhotoLive
- generic [ref=e11]:
- button "切换语言" [ref=e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=e14]: ▾
- button "设置" [ref=e16] [cursor=pointer]
- main [ref=e21]:
- generic [ref=e22]:
- generic [ref=e23]:
- generic [ref=e24]:
- generic [ref=e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=e26]
- button "分享相册" [ref=e27] [cursor=pointer]:
- generic [ref=e31]: 分享
- paragraph [ref=e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=e33]:
- generic [ref=e34]: 5 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=e39]: 2026年9月21日
- generic [ref=e44]: 广州·广交会展馆
- navigation "排序" [ref=e49]:
- button "最新" [pressed] [ref=e50] [cursor=pointer]
- button "热门" [ref=e51] [cursor=pointer]
- navigation "分类" [ref=e52]:
- generic [ref=e53]:
- button "全部" [pressed] [ref=e54] [cursor=pointer]
- button "开幕现场" [ref=e55] [cursor=pointer]
- generic [ref=e56]:
- generic [ref=e57]:
- button "点赞" [ref=e59] [cursor=pointer]:
- generic [ref=e62]: "0"
- button "点赞" [ref=e64] [cursor=pointer]:
- generic [ref=e67]: "0"
- button "点赞" [ref=e69] [cursor=pointer]:
- generic [ref=e72]: "0"
- button "点赞" [ref=e74] [cursor=pointer]:
- generic [ref=e77]: "0"
- button "点赞" [ref=e79] [cursor=pointer]:
- generic [ref=e82]: "0"
- button "点赞" [ref=e84] [cursor=pointer]:
- generic [ref=e87]: "0"
- button "点赞" [ref=e89] [cursor=pointer]:
- generic [ref=e92]: "0"
- button "点赞" [ref=e94] [cursor=pointer]:
- generic [ref=e97]: "0"
- button "点赞" [ref=e99] [cursor=pointer]:
- generic [ref=e102]: "2"
- button "点赞" [ref=e104] [cursor=pointer]:
- generic [ref=e107]: "3"
- button "点赞" [ref=e109] [cursor=pointer]:
- generic [ref=e112]: "4"
- button "点赞" [ref=e114] [cursor=pointer]:
- generic [ref=e117]: "5"
- paragraph [ref=e118]: 已经到底了
@@ -0,0 +1,79 @@
- generic [ref=e3]:
- banner [ref=e4]:
- generic [ref=e5]: PhotoLive
- generic [ref=e11]:
- button "切换语言" [ref=e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=e14]: ▾
- button "设置" [ref=e16] [cursor=pointer]
- main [ref=e21]:
- generic [ref=e22]:
- generic [ref=e23]:
- generic [ref=e24]:
- generic [ref=e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=e26]
- button "分享相册" [ref=e27] [cursor=pointer]:
- generic [ref=e31]: 分享
- paragraph [ref=e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=e33]:
- generic [ref=e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=e39]: 2026年9月21日
- generic [ref=e44]: 广州·广交会展馆
- navigation "排序" [ref=e49]:
- button "最新" [pressed] [ref=e50] [cursor=pointer]
- button "热门" [ref=e51] [cursor=pointer]
- navigation "分类" [ref=e52]:
- generic [ref=e53]:
- button "全部" [pressed] [ref=e54] [cursor=pointer]
- button "开幕现场" [ref=e55] [cursor=pointer]
- generic [ref=e56]:
- generic [ref=e57]:
- generic [ref=e58] [cursor=pointer]:
- img "照片 1" [ref=e119]
- button "点赞" [ref=e59]:
- generic [ref=e62]: "0"
- generic [ref=e63] [cursor=pointer]:
- img "照片 2" [ref=e120]
- button "点赞" [ref=e64]:
- generic [ref=e67]: "0"
- generic [ref=e68] [cursor=pointer]:
- img "照片 3" [ref=e121]
- button "点赞" [ref=e69]:
- generic [ref=e72]: "0"
- generic [ref=e73] [cursor=pointer]:
- img "照片 4" [ref=e122]
- button "点赞" [ref=e74]:
- generic [ref=e77]: "0"
- generic [ref=e78] [cursor=pointer]:
- img "照片 5" [ref=e123]
- button "点赞" [ref=e79]:
- generic [ref=e82]: "0"
- generic [ref=e83] [cursor=pointer]:
- img "照片 6" [ref=e124]
- button "点赞" [ref=e84]:
- generic [ref=e87]: "0"
- generic [ref=e88] [cursor=pointer]:
- img "照片 7" [ref=e125]
- button "点赞" [ref=e89]:
- generic [ref=e92]: "0"
- generic [ref=e93] [cursor=pointer]:
- img "照片 8" [ref=e126]
- button "点赞" [ref=e94]:
- generic [ref=e97]: "0"
- generic [ref=e98] [cursor=pointer]:
- img "照片 9" [ref=e127]
- button "点赞" [ref=e99]:
- generic [ref=e102]: "2"
- generic [ref=e103] [cursor=pointer]:
- img "照片 10" [ref=e128]
- button "点赞" [ref=e104]:
- generic [ref=e107]: "3"
- generic [ref=e108] [cursor=pointer]:
- img "照片 11" [ref=e129]
- button "点赞" [ref=e109]:
- generic [ref=e112]: "4"
- generic [ref=e113] [cursor=pointer]:
- img "照片 12" [ref=e130]
- button "点赞" [ref=e114]:
- generic [ref=e117]: "5"
- paragraph [ref=e118]: 已经到底了
@@ -0,0 +1,79 @@
- generic [ref=e3]:
- banner [ref=e4]:
- generic [ref=e5]: PhotoLive
- generic [ref=e11]:
- button "切换语言" [ref=e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=e14]: ▾
- button "设置" [ref=e16] [cursor=pointer]
- main [ref=e21]:
- generic [ref=e22]:
- generic [ref=e23]:
- generic [ref=e24]:
- generic [ref=e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=e26]
- button "分享相册" [ref=e27] [cursor=pointer]:
- generic [ref=e31]: 分享
- paragraph [ref=e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=e33]:
- generic [ref=e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=e39]: 2026年9月21日
- generic [ref=e44]: 广州·广交会展馆
- navigation "排序" [ref=e49]:
- button "最新" [pressed] [ref=e50] [cursor=pointer]
- button "热门" [ref=e51] [cursor=pointer]
- navigation "分类" [ref=e52]:
- generic [ref=e53]:
- button "全部" [pressed] [ref=e54] [cursor=pointer]
- button "开幕现场" [ref=e55] [cursor=pointer]
- generic [ref=e56]:
- generic [ref=e57]:
- generic [ref=e58] [cursor=pointer]:
- img "照片 1" [ref=e119]
- button "点赞" [ref=e59]:
- generic [ref=e62]: "0"
- generic [ref=e63] [cursor=pointer]:
- img "照片 2" [ref=e120]
- button "点赞" [ref=e64]:
- generic [ref=e67]: "0"
- generic [ref=e68] [cursor=pointer]:
- img "照片 3" [ref=e121]
- button "点赞" [ref=e69]:
- generic [ref=e72]: "0"
- generic [ref=e73] [cursor=pointer]:
- img "照片 4" [ref=e122]
- button "点赞" [ref=e74]:
- generic [ref=e77]: "0"
- generic [ref=e78] [cursor=pointer]:
- img "照片 5" [ref=e123]
- button "点赞" [ref=e79]:
- generic [ref=e82]: "0"
- generic [ref=e83] [cursor=pointer]:
- img "照片 6" [ref=e124]
- button "点赞" [ref=e84]:
- generic [ref=e87]: "0"
- generic [ref=e88] [cursor=pointer]:
- img "照片 7" [ref=e125]
- button "点赞" [ref=e89]:
- generic [ref=e92]: "0"
- generic [ref=e93] [cursor=pointer]:
- img "照片 8" [ref=e126]
- button "点赞" [ref=e94]:
- generic [ref=e97]: "0"
- generic [ref=e98] [cursor=pointer]:
- img "照片 9" [ref=e127]
- button "点赞" [ref=e99]:
- generic [ref=e102]: "2"
- generic [ref=e103] [cursor=pointer]:
- img "照片 10" [ref=e128]
- button "点赞" [ref=e104]:
- generic [ref=e107]: "3"
- generic [ref=e108] [cursor=pointer]:
- img "照片 11" [ref=e129]
- button "点赞" [ref=e109]:
- generic [ref=e112]: "4"
- generic [ref=e113] [cursor=pointer]:
- img "照片 12" [ref=e130]
- button "点赞" [ref=e114]:
- generic [ref=e117]: "5"
- paragraph [ref=e118]: 已经到底了
@@ -0,0 +1,29 @@
- generic [ref=f1e3]:
- banner [ref=f1e4]:
- generic [ref=f1e5]: PhotoLive
- generic [ref=f1e11]:
- button "切换语言" [ref=f1e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f1e14]: ▾
- button "设置" [ref=f1e16] [cursor=pointer]
- main [ref=f1e21]:
- generic [ref=f1e22]:
- generic [ref=f1e23]:
- generic [ref=f1e24]:
- generic [ref=f1e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f1e26]
- button "分享相册" [ref=f1e27] [cursor=pointer]:
- generic [ref=f1e31]: 分享
- paragraph [ref=f1e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f1e33]:
- generic [ref=f1e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f1e39]: 2026年9月21日
- generic [ref=f1e44]: 广州·广交会展馆
- navigation "排序" [ref=f1e49]:
- button "最新" [pressed] [ref=f1e50] [cursor=pointer]
- button "热门" [ref=f1e51] [cursor=pointer]
- navigation "分类" [ref=f1e52]:
- generic [ref=f1e53]:
- button "全部" [pressed] [ref=f1e54] [cursor=pointer]
- button "开幕现场" [ref=f1e55] [cursor=pointer]
- status [ref=f1e57]: 加载中…
@@ -0,0 +1,79 @@
- generic [ref=f1e3]:
- banner [ref=f1e4]:
- generic [ref=f1e5]: PhotoLive
- generic [ref=f1e11]:
- button "切换语言" [ref=f1e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f1e14]: ▾
- button "设置" [ref=f1e16] [cursor=pointer]
- main [ref=f1e21]:
- generic [ref=f1e22]:
- generic [ref=f1e23]:
- generic [ref=f1e24]:
- generic [ref=f1e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f1e26]
- button "分享相册" [ref=f1e27] [cursor=pointer]:
- generic [ref=f1e31]: 分享
- paragraph [ref=f1e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f1e33]:
- generic [ref=f1e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f1e39]: 2026年9月21日
- generic [ref=f1e44]: 广州·广交会展馆
- navigation "排序" [ref=f1e49]:
- button "最新" [pressed] [ref=f1e50] [cursor=pointer]
- button "热门" [ref=f1e51] [cursor=pointer]
- navigation "分类" [ref=f1e52]:
- generic [ref=f1e53]:
- button "全部" [pressed] [ref=f1e54] [cursor=pointer]
- button "开幕现场" [ref=f1e55] [cursor=pointer]
- generic [ref=f1e56]:
- generic [ref=f1e70]:
- generic [ref=f1e71] [cursor=pointer]:
- img "照片 1" [ref=f1e72]
- button "点赞" [ref=f1e73]:
- generic [ref=f1e76]: "0"
- generic [ref=f1e77] [cursor=pointer]:
- img "照片 2" [ref=f1e78]
- button "点赞" [ref=f1e79]:
- generic [ref=f1e82]: "0"
- generic [ref=f1e83] [cursor=pointer]:
- img "照片 3" [ref=f1e84]
- button "点赞" [ref=f1e85]:
- generic [ref=f1e88]: "0"
- generic [ref=f1e89] [cursor=pointer]:
- img "照片 4" [ref=f1e90]
- button "点赞" [ref=f1e91]:
- generic [ref=f1e94]: "0"
- generic [ref=f1e95] [cursor=pointer]:
- img "照片 5" [ref=f1e96]
- button "点赞" [ref=f1e97]:
- generic [ref=f1e100]: "0"
- generic [ref=f1e101] [cursor=pointer]:
- img "照片 6" [ref=f1e102]
- button "点赞" [ref=f1e103]:
- generic [ref=f1e106]: "0"
- generic [ref=f1e107] [cursor=pointer]:
- img "照片 7" [ref=f1e108]
- button "点赞" [ref=f1e109]:
- generic [ref=f1e112]: "0"
- generic [ref=f1e113] [cursor=pointer]:
- img "照片 8" [ref=f1e114]
- button "点赞" [ref=f1e115]:
- generic [ref=f1e118]: "0"
- generic [ref=f1e119] [cursor=pointer]:
- img "照片 9" [ref=f1e120]
- button "点赞" [ref=f1e121]:
- generic [ref=f1e124]: "2"
- generic [ref=f1e125] [cursor=pointer]:
- img "照片 10" [ref=f1e126]
- button "点赞" [ref=f1e127]:
- generic [ref=f1e130]: "3"
- generic [ref=f1e131] [cursor=pointer]:
- img "照片 11" [ref=f1e132]
- button "点赞" [ref=f1e133]:
- generic [ref=f1e136]: "4"
- generic [ref=f1e137] [cursor=pointer]:
- img "照片 12" [ref=f1e138]
- button "点赞" [ref=f1e139]:
- generic [ref=f1e142]: "5"
- paragraph [ref=f1e143]: 已经到底了
@@ -0,0 +1,79 @@
- generic [ref=f1e3]:
- banner [ref=f1e4]:
- generic [ref=f1e5]: PhotoLive
- generic [ref=f1e11]:
- button "切换语言" [ref=f1e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f1e14]: ▾
- button "设置" [ref=f1e16] [cursor=pointer]
- main [ref=f1e21]:
- generic [ref=f1e22]:
- generic [ref=f1e23]:
- generic [ref=f1e24]:
- generic [ref=f1e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f1e26]
- button "分享相册" [ref=f1e27] [cursor=pointer]:
- generic [ref=f1e31]: 分享
- paragraph [ref=f1e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f1e33]:
- generic [ref=f1e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f1e39]: 2026年9月21日
- generic [ref=f1e44]: 广州·广交会展馆
- navigation "排序" [ref=f1e49]:
- button "最新" [pressed] [ref=f1e50] [cursor=pointer]
- button "热门" [ref=f1e51] [cursor=pointer]
- navigation "分类" [ref=f1e52]:
- generic [ref=f1e53]:
- button "全部" [pressed] [ref=f1e54] [cursor=pointer]
- button "开幕现场" [ref=f1e55] [cursor=pointer]
- generic [ref=f1e56]:
- generic [ref=f1e70]:
- generic [ref=f1e71] [cursor=pointer]:
- img "照片 1" [ref=f1e72]
- button "点赞" [ref=f1e73]:
- generic [ref=f1e76]: "0"
- generic [ref=f1e77] [cursor=pointer]:
- img "照片 2" [ref=f1e78]
- button "点赞" [ref=f1e79]:
- generic [ref=f1e82]: "0"
- generic [ref=f1e83] [cursor=pointer]:
- img "照片 3" [ref=f1e84]
- button "点赞" [ref=f1e85]:
- generic [ref=f1e88]: "0"
- generic [ref=f1e89] [cursor=pointer]:
- img "照片 4" [ref=f1e90]
- button "点赞" [ref=f1e91]:
- generic [ref=f1e94]: "0"
- generic [ref=f1e95] [cursor=pointer]:
- img "照片 5" [ref=f1e96]
- button "点赞" [ref=f1e97]:
- generic [ref=f1e100]: "0"
- generic [ref=f1e101] [cursor=pointer]:
- img "照片 6" [ref=f1e102]
- button "点赞" [ref=f1e103]:
- generic [ref=f1e106]: "0"
- generic [ref=f1e107] [cursor=pointer]:
- img "照片 7" [ref=f1e108]
- button "点赞" [ref=f1e109]:
- generic [ref=f1e112]: "0"
- generic [ref=f1e113] [cursor=pointer]:
- img "照片 8" [ref=f1e114]
- button "点赞" [ref=f1e115]:
- generic [ref=f1e118]: "0"
- generic [ref=f1e119] [cursor=pointer]:
- img "照片 9" [ref=f1e120]
- button "点赞" [ref=f1e121]:
- generic [ref=f1e124]: "2"
- generic [ref=f1e125] [cursor=pointer]:
- img "照片 10" [ref=f1e126]
- button "点赞" [ref=f1e127]:
- generic [ref=f1e130]: "3"
- generic [ref=f1e131] [cursor=pointer]:
- img "照片 11" [ref=f1e132]
- button "点赞" [ref=f1e133]:
- generic [ref=f1e136]: "4"
- generic [ref=f1e137] [cursor=pointer]:
- img "照片 12" [ref=f1e138]
- button "点赞" [ref=f1e139]:
- generic [ref=f1e142]: "5"
- paragraph [ref=f1e143]: 已经到底了
@@ -0,0 +1,107 @@
- generic [ref=f1e3]:
- banner [ref=f1e4]:
- generic [ref=f1e5]: PhotoLive
- generic [ref=f1e11]:
- button "切换语言" [ref=f1e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f1e14]: ▾
- button "设置" [ref=f1e16] [cursor=pointer]
- main [ref=f1e21]:
- generic [ref=f1e22]:
- generic [ref=f1e23]:
- generic [ref=f1e24]:
- generic [ref=f1e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f1e26]
- button "分享相册" [ref=f1e27] [cursor=pointer]:
- generic [ref=f1e31]: 分享
- paragraph [ref=f1e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f1e33]:
- generic [ref=f1e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f1e39]: 2026年9月21日
- generic [ref=f1e44]: 广州·广交会展馆
- navigation "排序" [ref=f1e49]:
- button "最新" [disabled] [pressed] [ref=f1e50]
- button "热门" [disabled] [ref=f1e51]
- navigation "分类" [ref=f1e52]:
- generic [ref=f1e53]:
- button "全部" [pressed] [ref=f1e54] [cursor=pointer]
- button "开幕现场" [ref=f1e55] [cursor=pointer]
- generic [ref=f1e56]:
- generic [ref=f1e70]:
- generic [ref=f1e71] [cursor=pointer]:
- img "照片 1" [ref=f1e72]
- button "点赞" [ref=f1e73]:
- generic [ref=f1e76]: "0"
- generic [ref=f1e77] [cursor=pointer]:
- img "照片 2" [ref=f1e78]
- button "点赞" [ref=f1e79]:
- generic [ref=f1e82]: "0"
- generic [ref=f1e83] [cursor=pointer]:
- img "照片 3" [ref=f1e84]
- button "点赞" [ref=f1e85]:
- generic [ref=f1e88]: "0"
- generic [ref=f1e89] [cursor=pointer]:
- img "照片 4" [ref=f1e90]
- button "点赞" [ref=f1e91]:
- generic [ref=f1e94]: "0"
- generic [ref=f1e95] [cursor=pointer]:
- img "照片 5" [ref=f1e96]
- button "点赞" [ref=f1e97]:
- generic [ref=f1e100]: "0"
- generic [ref=f1e101] [cursor=pointer]:
- img "照片 6" [ref=f1e102]
- button "点赞" [ref=f1e103]:
- generic [ref=f1e106]: "0"
- generic [ref=f1e107] [cursor=pointer]:
- img "照片 7" [ref=f1e108]
- button "点赞" [ref=f1e109]:
- generic [ref=f1e112]: "0"
- generic [ref=f1e113] [cursor=pointer]:
- img "照片 8" [ref=f1e114]
- button "点赞" [ref=f1e115]:
- generic [ref=f1e118]: "0"
- generic [ref=f1e119] [cursor=pointer]:
- img "照片 9" [ref=f1e120]
- button "点赞" [ref=f1e121]:
- generic [ref=f1e124]: "2"
- generic [ref=f1e125] [cursor=pointer]:
- img "照片 10" [ref=f1e126]
- button "点赞" [ref=f1e127]:
- generic [ref=f1e130]: "3"
- generic [ref=f1e131] [cursor=pointer]:
- img "照片 11" [ref=f1e132]
- button "点赞" [ref=f1e133]:
- generic [ref=f1e136]: "4"
- generic [ref=f1e137] [cursor=pointer]:
- img "照片 12" [ref=f1e138]
- button "点赞" [ref=f1e139]:
- generic [ref=f1e142]: "5"
- paragraph [ref=f1e143]: 已经到底了
- dialog "照片查看器" [active] [ref=f1e144]:
- generic [ref=f1e145]:
- button "关闭" [ref=f1e146] [cursor=pointer]
- paragraph [ref=f1e150]: 1 / 12
- button "更多选项" [ref=f1e152] [cursor=pointer]
- main [ref=f1e157]:
- img "照片" [ref=f1e159]
- button "上一张" [disabled] [ref=f1e160]
- button "下一张" [ref=f1e163] [cursor=pointer]
- generic:
- status
- navigation "缩略图导航" [ref=f1e166]:
- generic [ref=f1e167]:
- button "第 1 张" [ref=f1e168] [cursor=pointer]
- button "第 2 张" [ref=f1e169] [cursor=pointer]
- button "第 3 张" [ref=f1e170] [cursor=pointer]
- button "第 4 张" [ref=f1e171] [cursor=pointer]
- button "第 5 张" [ref=f1e172] [cursor=pointer]
- button "第 6 张" [ref=f1e173] [cursor=pointer]
- button "第 7 张" [ref=f1e174] [cursor=pointer]
- generic [ref=f1e176]:
- generic [ref=f1e177]:
- button "点赞" [ref=f1e178] [cursor=pointer]:
- generic [ref=f1e181]: "0"
- paragraph [ref=f1e183]: 连续点击,为照片点赞
- button "分享照片" [ref=f1e185] [cursor=pointer]:
- generic [ref=f1e189]: 分享
- button "下载" [ref=f1e192] [cursor=pointer]
@@ -0,0 +1,77 @@
- generic [ref=f2e3]:
- banner [ref=f2e4]:
- generic [ref=f2e5]: PhotoLive
- generic [ref=f2e11]:
- button "Switch language" [ref=f2e13] [cursor=pointer]:
- text: EN
- generic [aria-hidden] [ref=f2e14]: ▾
- button "Settings" [ref=f2e16] [cursor=pointer]
- main [ref=f2e21]:
- generic [ref=f2e22]:
- generic [ref=f2e23]:
- generic [ref=f2e24]:
- generic [ref=f2e25]:
- heading "Demo Album · Live" [level=1] [ref=f2e26]
- button "Share album" [ref=f2e27] [cursor=pointer]:
- generic [ref=f2e31]: Share
- paragraph [ref=f2e32]: Generated by the local demo seed; photos really uploaded and processed.
- generic [ref=f2e33]:
- generic [ref=f2e34]: 6 views
- generic "September 21, 2026 at 10:54 PM GMT+8" [ref=f2e39]: September 21, 2026
- generic [ref=f2e44]: Canton Fair Complex
- navigation "Sort" [ref=f2e49]:
- button "Latest" [pressed] [ref=f2e50] [cursor=pointer]
- button "Popular" [ref=f2e51] [cursor=pointer]
- navigation "Categories" [ref=f2e52]:
- generic [ref=f2e53]:
- button "All" [pressed] [ref=f2e54] [cursor=pointer]
- button "Opening" [ref=f2e55] [cursor=pointer]
- generic [ref=f2e56]:
- generic [ref=f2e57]:
- generic [ref=f2e58] [cursor=pointer]:
- img "Photo 1" [ref=f2e59]
- button "Like" [ref=f2e60]:
- generic [ref=f2e63]: "0"
- generic [ref=f2e64] [cursor=pointer]:
- img "Photo 2" [ref=f2e65]
- button "Like" [ref=f2e66]:
- generic [ref=f2e69]: "0"
- generic [ref=f2e70] [cursor=pointer]:
- img "Photo 3" [ref=f2e71]
- button "Like" [ref=f2e72]:
- generic [ref=f2e75]: "0"
- generic [ref=f2e76] [cursor=pointer]:
- img "Photo 4" [ref=f2e77]
- button "Like" [ref=f2e78]:
- generic [ref=f2e81]: "0"
- generic [ref=f2e82] [cursor=pointer]:
- img "Photo 5" [ref=f2e83]
- button "Like" [ref=f2e84]:
- generic [ref=f2e87]: "0"
- generic [ref=f2e88] [cursor=pointer]:
- img "Photo 6" [ref=f2e89]
- button "Like" [ref=f2e90]:
- generic [ref=f2e93]: "0"
- generic [ref=f2e94] [cursor=pointer]:
- img "Photo 7" [ref=f2e95]
- button "Like" [ref=f2e96]:
- generic [ref=f2e99]: "0"
- generic [ref=f2e100] [cursor=pointer]:
- img "Photo 8" [ref=f2e101]
- button "Like" [ref=f2e102]:
- generic [ref=f2e105]: "0"
- generic [ref=f2e106] [cursor=pointer]:
- img "Photo 9" [ref=f2e107]
- button "Like" [ref=f2e108]:
- generic [ref=f2e111]: "2"
- generic [ref=f2e112] [cursor=pointer]:
- img "Photo 10" [ref=f2e113]
- button "Like" [ref=f2e114]:
- generic [ref=f2e117]: "3"
- generic [ref=f2e118] [cursor=pointer]:
- img "Photo 11" [ref=f2e119]
- button "Like" [ref=f2e120]:
- generic [ref=f2e123]: "4"
- button "Like" [ref=f2e125] [cursor=pointer]:
- generic [ref=f2e128]: "5"
- paragraph [ref=f2e129]: You have reached the end
@@ -0,0 +1,77 @@
- generic [ref=f2e3]:
- banner [ref=f2e4]:
- generic [ref=f2e5]: PhotoLive
- generic [ref=f2e11]:
- button "Switch language" [ref=f2e13] [cursor=pointer]:
- text: EN
- generic [aria-hidden] [ref=f2e14]: ▾
- button "Settings" [ref=f2e16] [cursor=pointer]
- main [ref=f2e21]:
- generic [ref=f2e22]:
- generic [ref=f2e23]:
- generic [ref=f2e24]:
- generic [ref=f2e25]:
- heading "Demo Album · Live" [level=1] [ref=f2e26]
- button "Share album" [ref=f2e27] [cursor=pointer]:
- generic [ref=f2e31]: Share
- paragraph [ref=f2e32]: Generated by the local demo seed; photos really uploaded and processed.
- generic [ref=f2e33]:
- generic [ref=f2e34]: 6 views
- generic "September 21, 2026 at 10:54 PM GMT+8" [ref=f2e39]: September 21, 2026
- generic [ref=f2e44]: Canton Fair Complex
- navigation "Sort" [ref=f2e49]:
- button "Latest" [pressed] [ref=f2e50] [cursor=pointer]
- button "Popular" [ref=f2e51] [cursor=pointer]
- navigation "Categories" [ref=f2e52]:
- generic [ref=f2e53]:
- button "All" [pressed] [ref=f2e54] [cursor=pointer]
- button "Opening" [ref=f2e55] [cursor=pointer]
- generic [ref=f2e56]:
- generic [ref=f2e57]:
- generic [ref=f2e58] [cursor=pointer]:
- img "Photo 1" [ref=f2e59]
- button "Like" [ref=f2e60]:
- generic [ref=f2e63]: "0"
- generic [ref=f2e64] [cursor=pointer]:
- img "Photo 2" [ref=f2e65]
- button "Like" [ref=f2e66]:
- generic [ref=f2e69]: "0"
- generic [ref=f2e70] [cursor=pointer]:
- img "Photo 3" [ref=f2e71]
- button "Like" [ref=f2e72]:
- generic [ref=f2e75]: "0"
- generic [ref=f2e76] [cursor=pointer]:
- img "Photo 4" [ref=f2e77]
- button "Like" [ref=f2e78]:
- generic [ref=f2e81]: "0"
- generic [ref=f2e82] [cursor=pointer]:
- img "Photo 5" [ref=f2e83]
- button "Like" [ref=f2e84]:
- generic [ref=f2e87]: "0"
- generic [ref=f2e88] [cursor=pointer]:
- img "Photo 6" [ref=f2e89]
- button "Like" [ref=f2e90]:
- generic [ref=f2e93]: "0"
- generic [ref=f2e94] [cursor=pointer]:
- img "Photo 7" [ref=f2e95]
- button "Like" [ref=f2e96]:
- generic [ref=f2e99]: "0"
- generic [ref=f2e100] [cursor=pointer]:
- img "Photo 8" [ref=f2e101]
- button "Like" [ref=f2e102]:
- generic [ref=f2e105]: "0"
- generic [ref=f2e106] [cursor=pointer]:
- img "Photo 9" [ref=f2e107]
- button "Like" [ref=f2e108]:
- generic [ref=f2e111]: "2"
- generic [ref=f2e112] [cursor=pointer]:
- img "Photo 10" [ref=f2e113]
- button "Like" [ref=f2e114]:
- generic [ref=f2e117]: "3"
- generic [ref=f2e118] [cursor=pointer]:
- img "Photo 11" [ref=f2e119]
- button "Like" [ref=f2e120]:
- generic [ref=f2e123]: "4"
- button "Like" [ref=f2e125] [cursor=pointer]:
- generic [ref=f2e128]: "5"
- paragraph [ref=f2e129]: You have reached the end
@@ -0,0 +1,77 @@
- generic [ref=f2e3]:
- banner [ref=f2e4]:
- generic [ref=f2e5]: PhotoLive
- generic [ref=f2e11]:
- button "Switch language" [ref=f2e13] [cursor=pointer]:
- text: EN
- generic [aria-hidden] [ref=f2e14]: ▾
- button "Settings" [ref=f2e16] [cursor=pointer]
- main [ref=f2e21]:
- generic [ref=f2e22]:
- generic [ref=f2e23]:
- generic [ref=f2e24]:
- generic [ref=f2e25]:
- heading "Demo Album · Live" [level=1] [ref=f2e26]
- button "Share album" [ref=f2e27] [cursor=pointer]:
- generic [ref=f2e31]: Share
- paragraph [ref=f2e32]: Generated by the local demo seed; photos really uploaded and processed.
- generic [ref=f2e33]:
- generic [ref=f2e34]: 6 views
- generic "September 21, 2026 at 10:54 PM GMT+8" [ref=f2e39]: September 21, 2026
- generic [ref=f2e44]: Canton Fair Complex
- navigation "Sort" [ref=f2e49]:
- button "Latest" [pressed] [ref=f2e50] [cursor=pointer]
- button "Popular" [ref=f2e51] [cursor=pointer]
- navigation "Categories" [ref=f2e52]:
- generic [ref=f2e53]:
- button "All" [pressed] [ref=f2e54] [cursor=pointer]
- button "Opening" [ref=f2e55] [cursor=pointer]
- generic [ref=f2e56]:
- generic [ref=f2e57]:
- generic [ref=f2e58] [cursor=pointer]:
- img "Photo 1" [ref=f2e59]
- button "Like" [ref=f2e60]:
- generic [ref=f2e63]: "0"
- generic [ref=f2e64] [cursor=pointer]:
- img "Photo 2" [ref=f2e65]
- button "Like" [ref=f2e66]:
- generic [ref=f2e69]: "0"
- generic [ref=f2e70] [cursor=pointer]:
- img "Photo 3" [ref=f2e71]
- button "Like" [ref=f2e72]:
- generic [ref=f2e75]: "0"
- generic [ref=f2e76] [cursor=pointer]:
- img "Photo 4" [ref=f2e77]
- button "Like" [ref=f2e78]:
- generic [ref=f2e81]: "0"
- generic [ref=f2e82] [cursor=pointer]:
- img "Photo 5" [ref=f2e83]
- button "Like" [ref=f2e84]:
- generic [ref=f2e87]: "0"
- generic [ref=f2e88] [cursor=pointer]:
- img "Photo 6" [ref=f2e89]
- button "Like" [ref=f2e90]:
- generic [ref=f2e93]: "0"
- generic [ref=f2e94] [cursor=pointer]:
- img "Photo 7" [ref=f2e95]
- button "Like" [ref=f2e96]:
- generic [ref=f2e99]: "0"
- generic [ref=f2e100] [cursor=pointer]:
- img "Photo 8" [ref=f2e101]
- button "Like" [ref=f2e102]:
- generic [ref=f2e105]: "0"
- generic [ref=f2e106] [cursor=pointer]:
- img "Photo 9" [ref=f2e107]
- button "Like" [ref=f2e108]:
- generic [ref=f2e111]: "2"
- generic [ref=f2e112] [cursor=pointer]:
- img "Photo 10" [ref=f2e113]
- button "Like" [ref=f2e114]:
- generic [ref=f2e117]: "3"
- generic [ref=f2e118] [cursor=pointer]:
- img "Photo 11" [ref=f2e119]
- button "Like" [ref=f2e120]:
- generic [ref=f2e123]: "4"
- button "Like" [ref=f2e125] [cursor=pointer]:
- generic [ref=f2e128]: "5"
- paragraph [ref=f2e129]: You have reached the end
@@ -0,0 +1,105 @@
- generic [ref=f2e3]:
- banner [ref=f2e4]:
- generic [ref=f2e5]: PhotoLive
- generic [ref=f2e11]:
- button "Switch language" [ref=f2e13] [cursor=pointer]:
- text: EN
- generic [aria-hidden] [ref=f2e14]: ▾
- button "Settings" [ref=f2e16] [cursor=pointer]
- main [ref=f2e21]:
- generic [ref=f2e22]:
- generic [ref=f2e23]:
- generic [ref=f2e24]:
- generic [ref=f2e25]:
- heading "Demo Album · Live" [level=1] [ref=f2e26]
- button "Share album" [ref=f2e27] [cursor=pointer]:
- generic [ref=f2e31]: Share
- paragraph [ref=f2e32]: Generated by the local demo seed; photos really uploaded and processed.
- generic [ref=f2e33]:
- generic [ref=f2e34]: 6 views
- generic "September 21, 2026 at 10:54 PM GMT+8" [ref=f2e39]: September 21, 2026
- generic [ref=f2e44]: Canton Fair Complex
- navigation "Sort" [ref=f2e49]:
- button "Latest" [disabled] [pressed] [ref=f2e50]
- button "Popular" [disabled] [ref=f2e51]
- navigation "Categories" [ref=f2e52]:
- generic [ref=f2e53]:
- button "All" [pressed] [ref=f2e54] [cursor=pointer]
- button "Opening" [ref=f2e55] [cursor=pointer]
- generic [ref=f2e56]:
- generic [ref=f2e57]:
- generic [ref=f2e58] [cursor=pointer]:
- img "Photo 1" [ref=f2e59]
- button "Like" [ref=f2e60]:
- generic [ref=f2e63]: "0"
- generic [ref=f2e64] [cursor=pointer]:
- img "Photo 2" [ref=f2e65]
- button "Like" [ref=f2e66]:
- generic [ref=f2e69]: "0"
- generic [ref=f2e70] [cursor=pointer]:
- img "Photo 3" [ref=f2e71]
- button "Like" [ref=f2e72]:
- generic [ref=f2e75]: "0"
- generic [ref=f2e76] [cursor=pointer]:
- img "Photo 4" [ref=f2e77]
- button "Like" [ref=f2e78]:
- generic [ref=f2e81]: "0"
- generic [ref=f2e82] [cursor=pointer]:
- img "Photo 5" [ref=f2e83]
- button "Like" [ref=f2e84]:
- generic [ref=f2e87]: "0"
- generic [ref=f2e88] [cursor=pointer]:
- img "Photo 6" [ref=f2e89]
- button "Like" [ref=f2e90]:
- generic [ref=f2e93]: "0"
- generic [ref=f2e94] [cursor=pointer]:
- img "Photo 7" [ref=f2e95]
- button "Like" [ref=f2e96]:
- generic [ref=f2e99]: "0"
- generic [ref=f2e100] [cursor=pointer]:
- img "Photo 8" [ref=f2e101]
- button "Like" [ref=f2e102]:
- generic [ref=f2e105]: "0"
- generic [ref=f2e106] [cursor=pointer]:
- img "Photo 9" [ref=f2e107]
- button "Like" [ref=f2e108]:
- generic [ref=f2e111]: "2"
- generic [ref=f2e112] [cursor=pointer]:
- img "Photo 10" [ref=f2e113]
- button "Like" [ref=f2e114]:
- generic [ref=f2e117]: "3"
- generic [ref=f2e118] [cursor=pointer]:
- img "Photo 11" [ref=f2e119]
- button "Like" [ref=f2e120]:
- generic [ref=f2e123]: "4"
- button "Like" [ref=f2e125] [cursor=pointer]:
- generic [ref=f2e128]: "5"
- paragraph [ref=f2e129]: You have reached the end
- dialog "Photo viewer" [active] [ref=f2e130]:
- generic [ref=f2e131]:
- button "Close" [ref=f2e132] [cursor=pointer]
- paragraph [ref=f2e136]: 1 / 12
- button "More options" [ref=f2e138] [cursor=pointer]
- main [ref=f2e143]:
- img "Photo" [ref=f2e145]
- button "Previous photo" [disabled] [ref=f2e146]
- button "Next photo" [ref=f2e149] [cursor=pointer]
- generic:
- status
- navigation "Thumbnail navigation" [ref=f2e152]:
- generic [ref=f2e153]:
- button "Photo 1" [ref=f2e154] [cursor=pointer]
- button "Photo 2" [ref=f2e155] [cursor=pointer]
- button "Photo 3" [ref=f2e156] [cursor=pointer]
- button "Photo 4" [ref=f2e157] [cursor=pointer]
- button "Photo 5" [ref=f2e158] [cursor=pointer]
- button "Photo 6" [ref=f2e159] [cursor=pointer]
- button "Photo 7" [ref=f2e160] [cursor=pointer]
- generic [ref=f2e162]:
- generic [ref=f2e163]:
- button "Like" [ref=f2e164] [cursor=pointer]:
- generic [ref=f2e167]: "0"
- paragraph [ref=f2e169]: Tap to send more love
- button "Share photo" [ref=f2e171] [cursor=pointer]:
- generic [ref=f2e175]: Share
- button "Download" [ref=f2e178] [cursor=pointer]
@@ -0,0 +1,29 @@
- generic [ref=f3e3]:
- banner [ref=f3e4]:
- generic [ref=f3e5]: PhotoLive
- generic [ref=f3e11]:
- button "切换语言" [ref=f3e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f3e14]: ▾
- button "设置" [ref=f3e16] [cursor=pointer]
- main [ref=f3e21]:
- generic [ref=f3e22]:
- generic [ref=f3e23]:
- generic [ref=f3e24]:
- generic [ref=f3e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f3e26]
- button "分享相册" [ref=f3e27] [cursor=pointer]:
- generic [ref=f3e31]: 分享
- paragraph [ref=f3e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f3e33]:
- generic [ref=f3e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f3e39]: 2026年9月21日
- generic [ref=f3e44]: 广州·广交会展馆
- navigation "排序" [ref=f3e49]:
- button "最新" [pressed] [ref=f3e50] [cursor=pointer]
- button "热门" [ref=f3e51] [cursor=pointer]
- navigation "分类" [ref=f3e52]:
- generic [ref=f3e53]:
- button "全部" [pressed] [ref=f3e54] [cursor=pointer]
- button "开幕现场" [ref=f3e55] [cursor=pointer]
- status [ref=f3e57]: 加载中…
@@ -0,0 +1,75 @@
- generic [ref=f3e3]:
- banner [ref=f3e4]:
- generic [ref=f3e5]: PhotoLive
- generic [ref=f3e11]:
- button "切换语言" [ref=f3e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f3e14]: ▾
- button "设置" [ref=f3e16] [cursor=pointer]
- main [ref=f3e21]:
- generic [ref=f3e22]:
- generic [ref=f3e23]:
- generic [ref=f3e24]:
- generic [ref=f3e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f3e26]
- button "分享相册" [ref=f3e27] [cursor=pointer]:
- generic [ref=f3e31]: 分享
- paragraph [ref=f3e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f3e33]:
- generic [ref=f3e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f3e39]: 2026年9月21日
- generic [ref=f3e44]: 广州·广交会展馆
- navigation "排序" [ref=f3e49]:
- button "最新" [pressed] [ref=f3e50] [cursor=pointer]
- button "热门" [ref=f3e51] [cursor=pointer]
- navigation "分类" [ref=f3e52]:
- generic [ref=f3e53]:
- button "全部" [pressed] [ref=f3e54] [cursor=pointer]
- button "开幕现场" [ref=f3e55] [cursor=pointer]
- generic [ref=f3e56]:
- generic [ref=f3e70]:
- generic [ref=f3e71] [cursor=pointer]:
- img "照片 1" [ref=f3e72]
- button "点赞" [ref=f3e73]:
- generic [ref=f3e76]: "0"
- generic [ref=f3e77] [cursor=pointer]:
- img "照片 2" [ref=f3e78]
- button "点赞" [ref=f3e79]:
- generic [ref=f3e82]: "0"
- generic [ref=f3e83] [cursor=pointer]:
- img "照片 3" [ref=f3e84]
- button "点赞" [ref=f3e85]:
- generic [ref=f3e88]: "0"
- generic [ref=f3e89] [cursor=pointer]:
- img "照片 4" [ref=f3e90]
- button "点赞" [ref=f3e91]:
- generic [ref=f3e94]: "0"
- generic [ref=f3e95] [cursor=pointer]:
- img "照片 5" [ref=f3e96]
- button "点赞" [ref=f3e97]:
- generic [ref=f3e100]: "0"
- generic [ref=f3e101] [cursor=pointer]:
- img "照片 6" [ref=f3e102]
- button "点赞" [ref=f3e103]:
- generic [ref=f3e106]: "0"
- generic [ref=f3e107] [cursor=pointer]:
- img "照片 7" [ref=f3e108]
- button "点赞" [ref=f3e109]:
- generic [ref=f3e112]: "0"
- generic [ref=f3e113] [cursor=pointer]:
- img "照片 8" [ref=f3e114]
- button "点赞" [ref=f3e115]:
- generic [ref=f3e118]: "0"
- generic [ref=f3e119] [cursor=pointer]:
- img "照片 9" [ref=f3e120]
- button "点赞" [ref=f3e121]:
- generic [ref=f3e124]: "2"
- generic [ref=f3e125] [cursor=pointer]:
- img "照片 10" [ref=f3e126]
- button "点赞" [ref=f3e127]:
- generic [ref=f3e130]: "3"
- button "点赞" [ref=f3e132] [cursor=pointer]:
- generic [ref=f3e135]: "4"
- button "点赞" [ref=f3e137] [cursor=pointer]:
- generic [ref=f3e140]: "5"
- paragraph [ref=f3e141]: 已经到底了
@@ -0,0 +1,75 @@
- generic [ref=f3e3]:
- banner [ref=f3e4]:
- generic [ref=f3e5]: PhotoLive
- generic [ref=f3e11]:
- button "切换语言" [ref=f3e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f3e14]: ▾
- button "设置" [ref=f3e16] [cursor=pointer]
- main [ref=f3e21]:
- generic [ref=f3e22]:
- generic [ref=f3e23]:
- generic [ref=f3e24]:
- generic [ref=f3e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f3e26]
- button "分享相册" [ref=f3e27] [cursor=pointer]:
- generic [ref=f3e31]: 分享
- paragraph [ref=f3e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f3e33]:
- generic [ref=f3e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f3e39]: 2026年9月21日
- generic [ref=f3e44]: 广州·广交会展馆
- navigation "排序" [ref=f3e49]:
- button "最新" [pressed] [ref=f3e50] [cursor=pointer]
- button "热门" [ref=f3e51] [cursor=pointer]
- navigation "分类" [ref=f3e52]:
- generic [ref=f3e53]:
- button "全部" [pressed] [ref=f3e54] [cursor=pointer]
- button "开幕现场" [ref=f3e55] [cursor=pointer]
- generic [ref=f3e56]:
- generic [ref=f3e70]:
- generic [ref=f3e71] [cursor=pointer]:
- img "照片 1" [ref=f3e72]
- button "点赞" [ref=f3e73]:
- generic [ref=f3e76]: "0"
- generic [ref=f3e77] [cursor=pointer]:
- img "照片 2" [ref=f3e78]
- button "点赞" [ref=f3e79]:
- generic [ref=f3e82]: "0"
- generic [ref=f3e83] [cursor=pointer]:
- img "照片 3" [ref=f3e84]
- button "点赞" [ref=f3e85]:
- generic [ref=f3e88]: "0"
- generic [ref=f3e89] [cursor=pointer]:
- img "照片 4" [ref=f3e90]
- button "点赞" [ref=f3e91]:
- generic [ref=f3e94]: "0"
- generic [ref=f3e95] [cursor=pointer]:
- img "照片 5" [ref=f3e96]
- button "点赞" [ref=f3e97]:
- generic [ref=f3e100]: "0"
- generic [ref=f3e101] [cursor=pointer]:
- img "照片 6" [ref=f3e102]
- button "点赞" [ref=f3e103]:
- generic [ref=f3e106]: "0"
- generic [ref=f3e107] [cursor=pointer]:
- img "照片 7" [ref=f3e108]
- button "点赞" [ref=f3e109]:
- generic [ref=f3e112]: "0"
- generic [ref=f3e113] [cursor=pointer]:
- img "照片 8" [ref=f3e114]
- button "点赞" [ref=f3e115]:
- generic [ref=f3e118]: "0"
- generic [ref=f3e119] [cursor=pointer]:
- img "照片 9" [ref=f3e120]
- button "点赞" [ref=f3e121]:
- generic [ref=f3e124]: "2"
- generic [ref=f3e125] [cursor=pointer]:
- img "照片 10" [ref=f3e126]
- button "点赞" [ref=f3e127]:
- generic [ref=f3e130]: "3"
- button "点赞" [ref=f3e132] [cursor=pointer]:
- generic [ref=f3e135]: "4"
- button "点赞" [ref=f3e137] [cursor=pointer]:
- generic [ref=f3e140]: "5"
- paragraph [ref=f3e141]: 已经到底了
@@ -0,0 +1,103 @@
- generic [ref=f3e3]:
- banner [ref=f3e4]:
- generic [ref=f3e5]: PhotoLive
- generic [ref=f3e11]:
- button "切换语言" [ref=f3e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f3e14]: ▾
- button "设置" [ref=f3e16] [cursor=pointer]
- main [ref=f3e21]:
- generic [ref=f3e22]:
- generic [ref=f3e23]:
- generic [ref=f3e24]:
- generic [ref=f3e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f3e26]
- button "分享相册" [ref=f3e27] [cursor=pointer]:
- generic [ref=f3e31]: 分享
- paragraph [ref=f3e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f3e33]:
- generic [ref=f3e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f3e39]: 2026年9月21日
- generic [ref=f3e44]: 广州·广交会展馆
- navigation "排序" [ref=f3e49]:
- button "最新" [disabled] [pressed] [ref=f3e50]
- button "热门" [disabled] [ref=f3e51]
- navigation "分类" [ref=f3e52]:
- generic [ref=f3e53]:
- button "全部" [pressed] [ref=f3e54] [cursor=pointer]
- button "开幕现场" [ref=f3e55] [cursor=pointer]
- generic [ref=f3e56]:
- generic [ref=f3e70]:
- generic [ref=f3e71] [cursor=pointer]:
- img "照片 1" [ref=f3e72]
- button "点赞" [ref=f3e73]:
- generic [ref=f3e76]: "0"
- generic [ref=f3e77] [cursor=pointer]:
- img "照片 2" [ref=f3e78]
- button "点赞" [ref=f3e79]:
- generic [ref=f3e82]: "0"
- generic [ref=f3e83] [cursor=pointer]:
- img "照片 3" [ref=f3e84]
- button "点赞" [ref=f3e85]:
- generic [ref=f3e88]: "0"
- generic [ref=f3e89] [cursor=pointer]:
- img "照片 4" [ref=f3e90]
- button "点赞" [ref=f3e91]:
- generic [ref=f3e94]: "0"
- generic [ref=f3e95] [cursor=pointer]:
- img "照片 5" [ref=f3e96]
- button "点赞" [ref=f3e97]:
- generic [ref=f3e100]: "0"
- generic [ref=f3e101] [cursor=pointer]:
- img "照片 6" [ref=f3e102]
- button "点赞" [ref=f3e103]:
- generic [ref=f3e106]: "0"
- generic [ref=f3e107] [cursor=pointer]:
- img "照片 7" [ref=f3e108]
- button "点赞" [ref=f3e109]:
- generic [ref=f3e112]: "0"
- generic [ref=f3e113] [cursor=pointer]:
- img "照片 8" [ref=f3e114]
- button "点赞" [ref=f3e115]:
- generic [ref=f3e118]: "0"
- generic [ref=f3e119] [cursor=pointer]:
- img "照片 9" [ref=f3e120]
- button "点赞" [ref=f3e121]:
- generic [ref=f3e124]: "2"
- generic [ref=f3e125] [cursor=pointer]:
- img "照片 10" [ref=f3e126]
- button "点赞" [ref=f3e127]:
- generic [ref=f3e130]: "3"
- button "点赞" [ref=f3e132] [cursor=pointer]:
- generic [ref=f3e135]: "4"
- button "点赞" [ref=f3e137] [cursor=pointer]:
- generic [ref=f3e140]: "5"
- paragraph [ref=f3e141]: 已经到底了
- dialog "照片查看器" [active] [ref=f3e142]:
- generic [ref=f3e143]:
- button "关闭" [ref=f3e144] [cursor=pointer]
- paragraph [ref=f3e148]: 1 / 12
- button "更多选项" [ref=f3e150] [cursor=pointer]
- main [ref=f3e155]:
- img "照片" [ref=f3e157]
- button "上一张" [disabled] [ref=f3e158]
- button "下一张" [ref=f3e161] [cursor=pointer]
- generic:
- status
- navigation "缩略图导航" [ref=f3e164]:
- generic [ref=f3e165]:
- button "第 1 张" [ref=f3e166] [cursor=pointer]
- button "第 2 张" [ref=f3e167] [cursor=pointer]
- button "第 3 张" [ref=f3e168] [cursor=pointer]
- button "第 4 张" [ref=f3e169] [cursor=pointer]
- button "第 5 张" [ref=f3e170] [cursor=pointer]
- button "第 6 张" [ref=f3e171] [cursor=pointer]
- button "第 7 张" [ref=f3e172] [cursor=pointer]
- generic [ref=f3e174]:
- generic [ref=f3e175]:
- button "点赞" [ref=f3e176] [cursor=pointer]:
- generic [ref=f3e179]: "0"
- paragraph [ref=f3e181]: 连续点击,为照片点赞
- button "分享照片" [ref=f3e183] [cursor=pointer]:
- generic [ref=f3e187]: 分享
- button "下载" [ref=f3e190] [cursor=pointer]
@@ -0,0 +1,55 @@
- generic [ref=f4e3]:
- banner [ref=f4e4]:
- generic [ref=f4e5]: PhotoLive
- generic [ref=f4e11]:
- button "切换语言" [ref=f4e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f4e14]: ▾
- button "设置" [ref=f4e16] [cursor=pointer]
- main [ref=f4e21]:
- generic [ref=f4e22]:
- generic [ref=f4e23]:
- generic [ref=f4e24]:
- generic [ref=f4e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f4e26]
- button "分享相册" [ref=f4e27] [cursor=pointer]:
- generic [ref=f4e31]: 分享
- paragraph [ref=f4e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f4e33]:
- generic [ref=f4e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f4e39]: 2026年9月21日
- generic [ref=f4e44]: 广州·广交会展馆
- navigation "排序" [ref=f4e49]:
- button "最新" [pressed] [ref=f4e50] [cursor=pointer]
- button "热门" [ref=f4e51] [cursor=pointer]
- navigation "分类" [ref=f4e52]:
- generic [ref=f4e53]:
- button "全部" [pressed] [ref=f4e54] [cursor=pointer]
- button "开幕现场" [ref=f4e55] [cursor=pointer]
- generic [ref=f4e56]:
- generic [ref=f4e57]:
- button "点赞" [ref=f4e59] [cursor=pointer]:
- generic [ref=f4e62]: "0"
- button "点赞" [ref=f4e64] [cursor=pointer]:
- generic [ref=f4e67]: "0"
- button "点赞" [ref=f4e69] [cursor=pointer]:
- generic [ref=f4e72]: "0"
- button "点赞" [ref=f4e74] [cursor=pointer]:
- generic [ref=f4e77]: "0"
- button "点赞" [ref=f4e79] [cursor=pointer]:
- generic [ref=f4e82]: "0"
- button "点赞" [ref=f4e84] [cursor=pointer]:
- generic [ref=f4e87]: "0"
- button "点赞" [ref=f4e89] [cursor=pointer]:
- generic [ref=f4e92]: "0"
- button "点赞" [ref=f4e94] [cursor=pointer]:
- generic [ref=f4e97]: "0"
- button "点赞" [ref=f4e99] [cursor=pointer]:
- generic [ref=f4e102]: "2"
- button "点赞" [ref=f4e104] [cursor=pointer]:
- generic [ref=f4e107]: "3"
- button "点赞" [ref=f4e109] [cursor=pointer]:
- generic [ref=f4e112]: "4"
- button "点赞" [ref=f4e114] [cursor=pointer]:
- generic [ref=f4e117]: "5"
- paragraph [ref=f4e118]: 已经到底了
@@ -0,0 +1,79 @@
- generic [ref=f4e3]:
- banner [ref=f4e4]:
- generic [ref=f4e5]: PhotoLive
- generic [ref=f4e11]:
- button "切换语言" [ref=f4e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f4e14]: ▾
- button "设置" [ref=f4e16] [cursor=pointer]
- main [ref=f4e21]:
- generic [ref=f4e22]:
- generic [ref=f4e23]:
- generic [ref=f4e24]:
- generic [ref=f4e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f4e26]
- button "分享相册" [ref=f4e27] [cursor=pointer]:
- generic [ref=f4e31]: 分享
- paragraph [ref=f4e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f4e33]:
- generic [ref=f4e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f4e39]: 2026年9月21日
- generic [ref=f4e44]: 广州·广交会展馆
- navigation "排序" [ref=f4e49]:
- button "最新" [pressed] [ref=f4e50] [cursor=pointer]
- button "热门" [ref=f4e51] [cursor=pointer]
- navigation "分类" [ref=f4e52]:
- generic [ref=f4e53]:
- button "全部" [pressed] [ref=f4e54] [cursor=pointer]
- button "开幕现场" [ref=f4e55] [cursor=pointer]
- generic [ref=f4e56]:
- generic [ref=f4e57]:
- generic [ref=f4e58] [cursor=pointer]:
- img "照片 1" [ref=f4e119]
- button "点赞" [ref=f4e59]:
- generic [ref=f4e62]: "0"
- generic [ref=f4e63] [cursor=pointer]:
- img "照片 2" [ref=f4e120]
- button "点赞" [ref=f4e64]:
- generic [ref=f4e67]: "0"
- generic [ref=f4e68] [cursor=pointer]:
- img "照片 3" [ref=f4e121]
- button "点赞" [ref=f4e69]:
- generic [ref=f4e72]: "0"
- generic [ref=f4e73] [cursor=pointer]:
- img "照片 4" [ref=f4e122]
- button "点赞" [ref=f4e74]:
- generic [ref=f4e77]: "0"
- generic [ref=f4e78] [cursor=pointer]:
- img "照片 5" [ref=f4e123]
- button "点赞" [ref=f4e79]:
- generic [ref=f4e82]: "0"
- generic [ref=f4e83] [cursor=pointer]:
- img "照片 6" [ref=f4e124]
- button "点赞" [ref=f4e84]:
- generic [ref=f4e87]: "0"
- generic [ref=f4e88] [cursor=pointer]:
- img "照片 7" [ref=f4e125]
- button "点赞" [ref=f4e89]:
- generic [ref=f4e92]: "0"
- generic [ref=f4e93] [cursor=pointer]:
- img "照片 8" [ref=f4e126]
- button "点赞" [ref=f4e94]:
- generic [ref=f4e97]: "0"
- generic [ref=f4e98] [cursor=pointer]:
- img "照片 9" [ref=f4e127]
- button "点赞" [ref=f4e99]:
- generic [ref=f4e102]: "2"
- generic [ref=f4e103] [cursor=pointer]:
- img "照片 10" [ref=f4e128]
- button "点赞" [ref=f4e104]:
- generic [ref=f4e107]: "3"
- generic [ref=f4e108] [cursor=pointer]:
- img "照片 11" [ref=f4e129]
- button "点赞" [ref=f4e109]:
- generic [ref=f4e112]: "4"
- generic [ref=f4e113] [cursor=pointer]:
- img "照片 12" [ref=f4e130]
- button "点赞" [ref=f4e114]:
- generic [ref=f4e117]: "5"
- paragraph [ref=f4e118]: 已经到底了
@@ -0,0 +1,79 @@
- generic [ref=f4e3]:
- banner [ref=f4e4]:
- generic [ref=f4e5]: PhotoLive
- generic [ref=f4e11]:
- button "切换语言" [ref=f4e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f4e14]: ▾
- button "设置" [ref=f4e16] [cursor=pointer]
- main [ref=f4e21]:
- generic [ref=f4e22]:
- generic [ref=f4e23]:
- generic [ref=f4e24]:
- generic [ref=f4e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f4e26]
- button "分享相册" [ref=f4e27] [cursor=pointer]:
- generic [ref=f4e31]: 分享
- paragraph [ref=f4e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f4e33]:
- generic [ref=f4e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f4e39]: 2026年9月21日
- generic [ref=f4e44]: 广州·广交会展馆
- navigation "排序" [ref=f4e49]:
- button "最新" [pressed] [ref=f4e50] [cursor=pointer]
- button "热门" [ref=f4e51] [cursor=pointer]
- navigation "分类" [ref=f4e52]:
- generic [ref=f4e53]:
- button "全部" [pressed] [ref=f4e54] [cursor=pointer]
- button "开幕现场" [ref=f4e55] [cursor=pointer]
- generic [ref=f4e56]:
- generic [ref=f4e57]:
- generic [ref=f4e58] [cursor=pointer]:
- img "照片 1" [ref=f4e119]
- button "点赞" [ref=f4e59]:
- generic [ref=f4e62]: "0"
- generic [ref=f4e63] [cursor=pointer]:
- img "照片 2" [ref=f4e120]
- button "点赞" [ref=f4e64]:
- generic [ref=f4e67]: "0"
- generic [ref=f4e68] [cursor=pointer]:
- img "照片 3" [ref=f4e121]
- button "点赞" [ref=f4e69]:
- generic [ref=f4e72]: "0"
- generic [ref=f4e73] [cursor=pointer]:
- img "照片 4" [ref=f4e122]
- button "点赞" [ref=f4e74]:
- generic [ref=f4e77]: "0"
- generic [ref=f4e78] [cursor=pointer]:
- img "照片 5" [ref=f4e123]
- button "点赞" [ref=f4e79]:
- generic [ref=f4e82]: "0"
- generic [ref=f4e83] [cursor=pointer]:
- img "照片 6" [ref=f4e124]
- button "点赞" [ref=f4e84]:
- generic [ref=f4e87]: "0"
- generic [ref=f4e88] [cursor=pointer]:
- img "照片 7" [ref=f4e125]
- button "点赞" [ref=f4e89]:
- generic [ref=f4e92]: "0"
- generic [ref=f4e93] [cursor=pointer]:
- img "照片 8" [ref=f4e126]
- button "点赞" [ref=f4e94]:
- generic [ref=f4e97]: "0"
- generic [ref=f4e98] [cursor=pointer]:
- img "照片 9" [ref=f4e127]
- button "点赞" [ref=f4e99]:
- generic [ref=f4e102]: "2"
- generic [ref=f4e103] [cursor=pointer]:
- img "照片 10" [ref=f4e128]
- button "点赞" [ref=f4e104]:
- generic [ref=f4e107]: "3"
- generic [ref=f4e108] [cursor=pointer]:
- img "照片 11" [ref=f4e129]
- button "点赞" [ref=f4e109]:
- generic [ref=f4e112]: "4"
- generic [ref=f4e113] [cursor=pointer]:
- img "照片 12" [ref=f4e130]
- button "点赞" [ref=f4e114]:
- generic [ref=f4e117]: "5"
- paragraph [ref=f4e118]: 已经到底了
@@ -0,0 +1,107 @@
- generic [ref=f4e3]:
- banner [ref=f4e4]:
- generic [ref=f4e5]: PhotoLive
- generic [ref=f4e11]:
- button "切换语言" [ref=f4e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f4e14]: ▾
- button "设置" [ref=f4e16] [cursor=pointer]
- main [ref=f4e21]:
- generic [ref=f4e22]:
- generic [ref=f4e23]:
- generic [ref=f4e24]:
- generic [ref=f4e25]:
- heading "演示相册 · 现场直击" [level=1] [ref=f4e26]
- button "分享相册" [ref=f4e27] [cursor=pointer]:
- generic [ref=f4e31]: 分享
- paragraph [ref=f4e32]: 这是本地演示环境生成的相册,照片由脚本真实上传并经 worker 处理发布。
- generic [ref=f4e33]:
- generic [ref=f4e34]: 6 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f4e39]: 2026年9月21日
- generic [ref=f4e44]: 广州·广交会展馆
- navigation "排序" [ref=f4e49]:
- button "最新" [disabled] [pressed] [ref=f4e50]
- button "热门" [disabled] [ref=f4e51]
- navigation "分类" [ref=f4e52]:
- generic [ref=f4e53]:
- button "全部" [pressed] [ref=f4e54] [cursor=pointer]
- button "开幕现场" [ref=f4e55] [cursor=pointer]
- generic [ref=f4e56]:
- generic [ref=f4e57]:
- generic [ref=f4e58] [cursor=pointer]:
- img "照片 1" [ref=f4e119]
- button "点赞" [ref=f4e59]:
- generic [ref=f4e62]: "0"
- generic [ref=f4e63] [cursor=pointer]:
- img "照片 2" [ref=f4e120]
- button "点赞" [ref=f4e64]:
- generic [ref=f4e67]: "0"
- generic [ref=f4e68] [cursor=pointer]:
- img "照片 3" [ref=f4e121]
- button "点赞" [ref=f4e69]:
- generic [ref=f4e72]: "0"
- generic [ref=f4e73] [cursor=pointer]:
- img "照片 4" [ref=f4e122]
- button "点赞" [ref=f4e74]:
- generic [ref=f4e77]: "0"
- generic [ref=f4e78] [cursor=pointer]:
- img "照片 5" [ref=f4e123]
- button "点赞" [ref=f4e79]:
- generic [ref=f4e82]: "0"
- generic [ref=f4e83] [cursor=pointer]:
- img "照片 6" [ref=f4e124]
- button "点赞" [ref=f4e84]:
- generic [ref=f4e87]: "0"
- generic [ref=f4e88] [cursor=pointer]:
- img "照片 7" [ref=f4e125]
- button "点赞" [ref=f4e89]:
- generic [ref=f4e92]: "0"
- generic [ref=f4e93] [cursor=pointer]:
- img "照片 8" [ref=f4e126]
- button "点赞" [ref=f4e94]:
- generic [ref=f4e97]: "0"
- generic [ref=f4e98] [cursor=pointer]:
- img "照片 9" [ref=f4e127]
- button "点赞" [ref=f4e99]:
- generic [ref=f4e102]: "2"
- generic [ref=f4e103] [cursor=pointer]:
- img "照片 10" [ref=f4e128]
- button "点赞" [ref=f4e104]:
- generic [ref=f4e107]: "3"
- generic [ref=f4e108] [cursor=pointer]:
- img "照片 11" [ref=f4e129]
- button "点赞" [ref=f4e109]:
- generic [ref=f4e112]: "4"
- generic [ref=f4e113] [cursor=pointer]:
- img "照片 12" [ref=f4e130]
- button "点赞" [ref=f4e114]:
- generic [ref=f4e117]: "5"
- paragraph [ref=f4e118]: 已经到底了
- dialog "照片查看器" [active] [ref=f4e131]:
- generic [ref=f4e132]:
- button "关闭" [ref=f4e133] [cursor=pointer]
- paragraph [ref=f4e137]: 1 / 12
- button "更多选项" [ref=f4e139] [cursor=pointer]
- main [ref=f4e144]:
- img "照片" [ref=f4e146]
- button "上一张" [disabled] [ref=f4e147]
- button "下一张" [ref=f4e150] [cursor=pointer]
- generic:
- status
- navigation "缩略图导航" [ref=f4e153]:
- generic [ref=f4e154]:
- button "第 1 张" [ref=f4e155] [cursor=pointer]
- button "第 2 张" [ref=f4e156] [cursor=pointer]
- button "第 3 张" [ref=f4e157] [cursor=pointer]
- button "第 4 张" [ref=f4e158] [cursor=pointer]
- button "第 5 张" [ref=f4e159] [cursor=pointer]
- button "第 6 张" [ref=f4e160] [cursor=pointer]
- button "第 7 张" [ref=f4e161] [cursor=pointer]
- generic [ref=f4e163]:
- generic [ref=f4e164]:
- button "点赞" [ref=f4e165] [cursor=pointer]:
- generic [ref=f4e168]: "0"
- paragraph [ref=f4e170]: 连续点击,为照片点赞
- button "分享照片" [ref=f4e172] [cursor=pointer]:
- generic [ref=f4e176]: 分享
- button "下载" [ref=f4e179] [cursor=pointer]
@@ -0,0 +1,25 @@
- generic [ref=f5e3]:
- banner [ref=f5e4]:
- generic [ref=f5e5]: PhotoLive
- generic [ref=f5e11]:
- button "切换语言" [ref=f5e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f5e14]: ▾
- button "设置" [ref=f5e16] [cursor=pointer]
- main [ref=f5e21]:
- generic [ref=f5e22]:
- generic [ref=f5e23]:
- generic [ref=f5e24]:
- generic [ref=f5e25]:
- heading "空相册 · 敬请期待" [level=1] [ref=f5e26]
- button "分享相册" [ref=f5e27] [cursor=pointer]:
- generic [ref=f5e31]: 分享
- paragraph [ref=f5e32]: 照片陆续上传中,稍后回来查看。
- generic [ref=f5e33]:
- generic [ref=f5e34]: 0 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f5e39]: 2026年9月21日
- generic [ref=f5e44]: 演示场馆
- navigation "排序" [ref=f5e49]:
- button "最新" [pressed] [ref=f5e50] [cursor=pointer]
- button "热门" [ref=f5e51] [cursor=pointer]
- paragraph [ref=f5e54]: 照片即将上线
@@ -0,0 +1,25 @@
- generic [ref=f5e3]:
- banner [ref=f5e4]:
- generic [ref=f5e5]: PhotoLive
- generic [ref=f5e11]:
- button "切换语言" [ref=f5e13] [cursor=pointer]:
- text: 中文
- generic [aria-hidden] [ref=f5e14]: ▾
- button "设置" [ref=f5e16] [cursor=pointer]
- main [ref=f5e21]:
- generic [ref=f5e22]:
- generic [ref=f5e23]:
- generic [ref=f5e24]:
- generic [ref=f5e25]:
- heading "空相册 · 敬请期待" [level=1] [ref=f5e26]
- button "分享相册" [ref=f5e27] [cursor=pointer]:
- generic [ref=f5e31]: 分享
- paragraph [ref=f5e32]: 照片陆续上传中,稍后回来查看。
- generic [ref=f5e33]:
- generic [ref=f5e34]: 1 次浏览
- generic "2026年9月21日 GMT+8 22:54" [ref=f5e39]: 2026年9月21日
- generic [ref=f5e44]: 演示场馆
- navigation "排序" [ref=f5e49]:
- button "最新" [pressed] [ref=f5e50] [cursor=pointer]
- button "热门" [ref=f5e51] [cursor=pointer]
- paragraph [ref=f5e54]: 照片即将上线
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

@@ -0,0 +1,115 @@
# App 全页面效果图 · 新版
日期:2026-09-21。制作方式:内置 image_gen,使用 imagegen 技能。共 5 张设计板、20 个主要页面与关键状态。英文品牌与界面示例,实际产品保留中英文;图片不是当前运行截图。
## 设计方向
蓝白专业影像工具:活动封面主导、明确的上传状态、深色拍摄与照片大图、统一分组表单。底部导航只出现在相册/上传/设置根页面;内部页返回上层。
## 页面索引
### 1. 账号与设置:登录、设置、修改密码、语言选择
![账号与设置:登录、设置、修改密码、语言选择](01-account-settings.png)
### 2. 相册工作台:相册列表、详情、操作菜单、空相册
![相册工作台:相册列表、详情、操作菜单、空相册](02-albums-workspace.png)
### 3. 创建与协作:创建、编辑、成员、分类
![创建与协作:创建、编辑、成员、分类](03-create-collaborate.png)
### 4. 拍摄与上传:相机、上传中心、异常处理、服务端历史
![拍摄与上传:相机、上传中心、异常处理、服务端历史](04-capture-uploads.png)
### 5. 照片与分享:照片网格、大图管理、分享卡、隐藏确认
![照片与分享:照片网格、大图管理、分享卡、隐藏确认](05-photos-share.png)
## 落地约束
- 全部人物、日期、账号、数字、活动照片是设计示例,不可硬编码。生成图不同板的日期不完全一致,实施以真实数据为准。
- 示例二维码不是可用活动二维码,必须使用真实相册链接生成。
- 上传完成、服务端处理完成与公开状态分开;权限取后端结果,不能依据示例画面默认开放。
- 分类行中的照片仅为视觉建议;接口无分类封面时使用统一图标,不新增虚假资产。
- 用户无头像字段时使用姓名首字母。成员示例邮箱不是账号接口契约要求。
- 所有按钮需服从创建者/管理员/协作者权限;隐藏后恢复发布由有权限的人执行,不能向所有协作者承诺可恢复。
- 根页面角标与汇总以真实本机任务口径计算。服务端历史没有预览时显示占位,不泄漏其他账号照片。
- 创建表单和设置均可滚动,生成图仅展示首屏,不省略真实必填字段。照片完整查看使用 contain。
- 当前集合覆盖已核对的全部业务页面,并补充语言、菜单、空态和确认状态;系统相册选择器、权限弹窗、键盘等复用系统界面,不重绘全部操作系统页面。加载、网络失败等通用状态沿用统一组件。
## 完整生成提示词
### 统一样式
```text
Use case: ui-mockup. Generate a high-fidelity professional staff mobile app UI design board for PhotoLive, an internal event photo upload and album management Flutter app. Landscape canvas about 2400x1500, FOUR equally sized tall mobile screens in a single row, each 390:844 proportion, fully visible from status bar to safe area. Flat front-on screens, NO physical phone hardware, NO perspective. Background very pale cool gray, small editorial board heading and screen numbers outside screens, generous gaps. Consistent design system across all screens: white content surfaces on #F6F8FB, deep navy #172033 text, muted slate secondary text, brilliant blue #1A73E8 primary buttons, thin pale dividers, 16px cards, 12px controls, generous 16px page gutters, clean modern sans serif, crisp readable English text, minimal thin-line icons, realistic trade-fair documentary photos when relevant. PhotoLive wordmark with small blue aperture symbol only where appropriate. Mature practical enterprise photography tool, calm spacious hierarchy, image-led, no gradients except subtle image scrims, no excessive pills. Bottom navigation ONLY on root Albums, Uploads and Settings screens: Albums / Uploads / Settings. Inner pages use back arrow, no persistent root navigation. All display data is illustrative. Avoid Chinese text, gibberish text, unrealistic features, fake charts, comments, social followers, Feishu login, public registration, subscriptions, shopping. Staff credentials only, repeated public likes are NOT a staff interface feature. Keep typography large and sharp. All main actions comfortably tappable.
```
### 01 / ACCOUNT & SETTINGS
```text
Screen 1 label "01 Login": white elegant login page, small brand, tasteful narrow event-photo mosaic at top, heading "Your event. In focus.", subtext "Sign in to your company workspace", fields "Account", "Password" with visibility eye, blue "Sign in", restrained "Accounts are provided by your administrator." and top-right EN language choice. No registration or forgot-password service promises.
Screen 2 label "02 Settings": header Settings, profile block avatar "Alex Morgan" subline "alex.morgan · Staff", grouped rows Language "English", Change password, Upload help, App version "1.0.0", separate restrained red "Sign out", bottom tabs Settings selected.
Screen 3 label "03 Change password": back header "Change password", brief instruction, three labeled inputs "Current password", "New password", "Confirm password", eyes, blue "Save password", compact neutral security guidance without made-up policy.
Screen 4 label "04 Language": settings screen dimmed beneath a polished bottom sheet with drag handle, title "App language", options "Follow device", "English" checked blue, "Chinese", explicit "Done" button. Sheet generous spacing, root settings visible behind.
```
### 02 / ALBUM WORKSPACE
```text
Screen 1 label "05 Albums": Albums header plus icon, three photographic album cards with 16:9 exhibition covers, "Canton Fair · Autumn", "Oct 15–19 · Guangzhou", Public and Uploads on small semantic labels; second "Product Launch", third "Team Stories" partially visible. Bottom tabs Albums selected, Uploads badge3. No fake search.
Screen 2 label "06 Album overview": back + ellipsis, compact venue banner, title "Canton Fair · Autumn", calendar and location, separate clear Public and Uploads on statuses. Secondary icon row Photos / Members / Categories / Share. Recent photos 3-column grid of realistic people/venue/products. Sticky bottom actions blue "Take photos" and outlined "Choose photos", safe area. No bottom root tabs.
Screen 3 label "07 Album actions": same album detail background dimmed with bottom sheet title "Album actions": Edit album, Manage members, Categories, Share album with neat line icons, Cancel. All actions equal except no dangerous giant buttons.
Screen 4 label "08 Empty album": back header "Team Stories", compact event information, quiet empty photo frame illustration at center, text "Ready for your first photo", subtext "Capture a moment or choose photos to begin.", bottom blue "Take photos" plus "Choose photos". Empty state professional, no huge cartoon.
```
### 03 / CREATE & COLLABORATE
```text
Screen 1 label "09 Create album": back header New album, white grouped form, field Album title "Canton Fair · Autumn", labeled Starts and Ends date rows, Time zone "Asia/Shanghai", Venue "Guangzhou", accordion "Description & languages" with English selected, primary bottom Create album. Form fits, no unimplemented banner upload control.
Screen 2 label "10 Edit album": back header Edit album, top slim segment Details / Access with Access selected. Distinct grouped switches "Allow uploads" on, "Public access" on, "Allow downloads" on, "Original downloads" off. Short descriptions make semantics clear. Secondary "Content language" English row. Blue bottom Save changes. Use light blue switch on state.
Screen 3 label "11 Members": back Members with plus, owner row "Alex Morgan" Owner, collaborators "Emma Chen" and "Daniel Lee" with small initials avatars, subline "Can manage their own photos", discreet overflow per row, note "Album owners manage all photos and members." Secondary invite button "Invite colleague". No public invitation email flow.
Screen 4 label "12 Categories": back Categories + plus, clean rows "Exhibition", "People", "Highlights" each edit pencil and restrained overflow. Bottom sheet open over lower part labeled "New category", language tabs English / Chinese, Category name field "Behind the scenes", blue Save category. No invented photo counts.
```
### 04 / CAPTURE & UPLOAD
```text
Screen 1 label "13 Camera": beautiful realistic full-screen camera preview of international trade booth and people, dark chrome, top back arrow, destination "Canton Fair · Autumn", category "Exhibition ⌄", bottom large white shutter, camera flip icon, small captured thumbnail, discreet toast "Added to upload queue", badge "3 uploading". No root tabs.
Screen 2 label "14 Uploads": root Uploads title with History icon, summary "Today · This device", large "82 uploaded" and smaller "3 uploading · 13 waiting · 2 need attention", segments All / Active / Needs attention, thumbnail rows showing filename, target album, Uploading 68% blue progress, Waiting for network amber, Confirming upload blue spinner, Uploaded green. Bottom root tabs Uploads selected badge 18. Do not say published for uploaded.
Screen 3 label "15 Needs attention": Uploads same root, Needs attention selected, 2 detailed rows: thumbnail IMG_083.jpg "Connection interrupted" secondary "Retry"; IMG_084.jpg "Source file unavailable" secondary "Select again". One blue "Retry eligible tasks" bottom action above root tabs. Restrained error red, explanatory text no scary giant errors.
Screen 4 label "16 Upload history": inner back header Upload history, subtitle "Server records · All devices", album filter Canton Fair, date Today, grouped clean thumbnail rows: IMG_081.jpg "Uploaded" timestamp, IMG_080.jpg "Processing", IMG_079.jpg "Ready". Small device labels "This device" / "Other device". No totals mixing local and server. No live thumbnail mistakes.
```
### 05 / PHOTOS & SHARING
```text
Screen 1 label "17 Manage photos": back Photos, album subtitle Canton Fair, filter tabs All / Published / Hidden, three-column actual photograph grid with exhibition shots varied subjects, subtle status flags Processing on one, Hidden on one, no giant filenames or like controls. Small uploader chips only if needed, no selection bulk mode.
Screen 2 label "18 Photo details": dark immersive management photo screen, top close and ellipsis, large complete photo of business networking using contain with dark space, navigation chevrons, bottom dark metadata panel "Emma Chen", "Oct 15, 2026 · 10:42", "2400 × 1600 · 2.8 MB", green Published label; bottom actions Hide photo and small red Delete. NO public heart/share/download toolbar.
Screen 3 label "19 Share album": light inner back Share album, refined share card showing small venue cover, Canton Fair · Autumn, date/location, large visually coherent QR placeholder with three finder squares (illustrative not a real link), muted "Scan to view the photo album", bottom blue Copy link, caption "Anyone with the link can view this public album." No fake scan guarantee.
Screen 4 label "20 Hide photo": photo details dark screen under subtle dim overlay, light rounded bottom confirmation sheet title "Hide this photo?", small thumbnail and explanation "Viewers will no longer see this photo. You can publish it again.", primary blue Hide photo and secondary Cancel. No permanent-delete language for hide.
```
### 最终修订提示词
02-albums-workspace
```text
Edit this exact UI board. Preserve all layouts, photography, typography and four screens. Correct only status and dates: replace EVERY upload-count label such as '1,248 uploads', '856 uploads', '32 uploads' with 'Uploads on' and an upload/cloud icon. Especially Empty album must show no photo count. Change visible year 2024 to 2026 everywhere. Keep all other elements identical.
```
04-capture-uploads
```text
Edit this exact four-screen UI board, preserve all layouts and all text except these changes: on first Camera screen REMOVE PHOTO / SQUARE / PANO mode selector entirely, keep that area plain black with safe area. On second and third screens change top PhotoLive wordmark header to plain bold 'Uploads' matching the typography of Upload history. Preserve summary, cards, progress, camera, history and bottom navigation exactly. No new functionality.
```
05-photos-share
```text
Edit this exact four-screen UI board. ONLY on first Manage photos screen remove bottom Albums / Uploads / Settings navigation bar and replace that space with continuation of the photo grid and bottom safe area. This is an inner page with back arrow, not root tab. Preserve all four screens, all other typography, images, actions, QR card, metadata and hide confirmation exactly.
```
@@ -0,0 +1,465 @@
# UI-03:App 全页面新版效果图落地实施方案
版本:1.0
日期:2026-09-21
状态:待执行。所有任务与验收项需实施后填写,不代表已完成。
执行对象:Claude 或其他接手本仓库的开发者。
## 1. 执行目标与依据
将现有 Flutter 工作人员 App 调整为新版五张设计板的视觉效果,覆盖 20 个页面与关键状态。以真实可运行 App 为交付物,不将效果图铺成背景假装实现,不只改首页或返回另一份计划。
### 1.1 设计图(执行前必须打开查看)
| 图号 | 设计板 | 对应页面 |
|---|---|---|
| 01 | [账号与设置](../designs/app-redesign-2026-09-21/01-account-settings.png) | 01 登录、02 设置、03 修改密码、04 语言选择 |
| 02 | [相册工作台](../designs/app-redesign-2026-09-21/02-albums-workspace.png) | 05 相册列表、06 相册详情、07 操作菜单、08 空相册 |
| 03 | [创建与协作](../designs/app-redesign-2026-09-21/03-create-collaborate.png) | 09 新建、10 编辑、11 成员、12 分类 |
| 04 | [拍摄与上传](../designs/app-redesign-2026-09-21/04-capture-uploads.png) | 13 拍摄、14 上传中心、15 异常任务、16 服务端历史 |
| 05 | [照片与分享](../designs/app-redesign-2026-09-21/05-photos-share.png) | 17 照片网格、18 管理大图、19 分享卡、20 隐藏确认 |
[设计索引及原始提示词](../designs/app-redesign-2026-09-21/README.md)。
图为英文概念稿,实际 App 保留中英文。图片外的板号、标题、灰色画布、手机外轮廓不属于 App 页面。
### 1.2 与已有方案的关系
- [UI-01](2026-09-21-UI01-App与悬浮组件体验优化实施方案.md)继续约束业务、数据、权限、上传恢复与公共组件。
- UI-03 是新版 App 视觉落地规范;对卡片、导航、表单、弹层布局的冲突,以本文为准。
- [UI-02](2026-09-21-UI02-观众页效果图落地实施方案.md)负责 Web 观众页,本阶段不修改它。
- 当前代码已有 ui/tokens.dart、公共组件、相册封面/预览模型和 album_photo_viewer_page.dart。先复用并检查,不重新造一套主题、照片控制器或 API。
- 编制时仅静态检查了最新代码;执行者仍需核对当前提交和运行行为,不能把旧阶段测试记录当本阶段证据。
优先级:实际业务权限与接口语义 > 本文明确规则 > 效果图。未在图中显示的真实必填字段不能删除;效果图中看似存在的功能不能自动当作已实现。
## 2. 范围和执行保护
### 必须交付
1. 五张设计板对应的全部页面/弹层。
2. 相册与照片图片化展示、清晰的拍摄和上传入口。
3. 成员邀请选择、分类编辑、图片隐藏/删除等配套交互。
4. 中英文、键盘、系统安全区、大字体、浅深色适配。
5. 对照截图、针对性回归、UI03 验收记录。
### 不在本轮范围
- 重写原生上传桥接、上传状态机、国内海外同步、数据库队列。
- 新增飞书登录、自助注册、社交关注、视频、修图、全景拍摄。
- 修改 Web 观众页、JS 悬浮组件、管理后台布局。
- 变更账号权限、放宽隐藏照片读取、增加未授权原图下载。
- 自动部署、推送、创建正式标签、修改云资源。
### 执行规则
- 开始记录 Git 状态,保护 UI-01/UI-02 等已有改动和未跟踪文件,不执行清理或重置。
- 按本文默认值自主实施;仅实际业务冲突、外部资源缺失等需要明确记录,不为每个圆角重复询问。
- 任务数据、账号隔离、幂等 ID、重试/取消、续签、原生事件确认机制保持不变。
- 不将任务完成改成已公开;文件传完、确认完成、处理完成和公开是不同状态。
- 不手改生成的本地化文件,修改 ARB 后运行生成工具。
- 不把用户上传图片或签名 URL 写入源码/日志/截图测试仓库。
- 测试可能重置数据库,运行前检查目标和脚本,只使用专用测试环境。
- 本文不要求安装指定插件或使用子代理;按当前授权和仓库规则执行。
## 3. 统一视觉与交互规范
| 元素 | 默认规格 |
|---|---|
| 主色 | #1A73E8;主要按钮实色,不使用生成图中偶然出现的渐变 |
| 页面背景 | #F6F8FB |
| 卡片/输入表面 | #FFFFFF |
| 主文字 | #172033 |
| 次文字 | #5E6878 |
| 分隔 | #E5EAF1 |
| 等待/成功/错误 | 复用 tokens.dart 中语义色和深色变体 |
| 页面标题 | 24sp,字重 600–700 |
| 分组标题 | 17–18sp |
| 正文/字段 | 14–16sp |
| 辅助文字 | 12–13sp,不承担唯一关键操作说明 |
| 左右边距 | 通常 16dp |
| 间距 | 4、8、12、16、24、32dp |
| 圆角 | 卡片16、输入/按钮12、标签8dp |
| 主按钮 | 高度至少48dp,文字放大时允许增高 |
| 图标 | 20–24dp,同一种线型,触控区至少44×44dp |
| 相机/大图背景 | #10161E 或现有语义等价深色 |
| 动效 | 复用 motion(context),减少动画时关闭非必要过渡 |
- 按系统字体比例缩放,禁止全局锁定 textScale。对比度目标正文至少4.5:1。
- 保留 Flutter Material 体系;通过 ThemeData 与现有组件统一,不引入第二个大型 UI 库。
- 根页面只有 Albums / Uploads / Settings 三个底部入口。相册详情、照片页、历史等内页不显示根导航。
- 保持 IndexedStack 和页面状态,切换页签不重启上传引擎。
- 深色主题不是把白色 token 直接硬编码进去;普通页面遵守现有系统主题,拍摄/大图始终采用摄影深色。
- 图标和状态同时带文字语义;所有图标按钮具备 Tooltip/Semantics。
- 设置项用轻分隔,减少重阴影;每个操作区域最多一个蓝色主要动作。
- Loading/Error/Empty 优先复用现有 ui/components,允许精修外观,不复制多套。
### 3.1 素材规则
- 品牌沿用当前产品英文名称;已有正式 Logo 优先。不要因设计板装饰文字创建多个 slogan 或替换应用包名。
- 登录摄影拼贴使用项目已有可使用素材,或由用户提供的品牌图片。可从此次生成板提取的素材必须有清晰可用来源和质量;不能将整块含表单的设计图裁作真实背景。无可用素材时用可替换的中性摄影占位并标注未完成视觉项,不偷偷依赖远程图库。
- 相册封面、照片、头像从真实数据读取。头像缺失用姓名首字母,不给所有用户配同一示例人物。
- 图中分类缩略图只是装饰建议;现有接口无分类封面时使用统一分类图标,本轮不扩展分类资产体系。
- 图片采用正确解码尺寸/缓存,列表不用原图。缩略图签名过期遵守既有受控刷新。
- 示例二维码不扫描、不复制为业务资产,必须按真实相册链接生成。
## 4. 20 个页面的落地规格
### 01 登录(图01,login_page.dart)
结构:摄影拼贴 → 品牌 → 主标题 → 简短说明 → 账号/密码 → Sign in → 管理员提供账号说明。
- 手机正常高度时顶部拼贴约占可用高度25%–32%;短屏/键盘开启时压缩图片并允许整页滚动。
- 页面右上提供语言选择;账号和密码标签清晰,密码支持显示/隐藏。
- 主标题示例可使用“Your event. In focus.”及中文对应文案,不能把英文直接写在 Dart 中。
- 登录中禁用重复提交,失败在表单附近显示稳定错误码对应文案。
- 不增加注册、飞书或不存在的找回密码流程;保留现有账号登录与会话恢复。
- 返回键、键盘 Next/Done、自动填充等沿用合理平台行为。
### 02 设置(图01,home_page.dart 中 SettingsTab)
- 顶部 Settings,账号摘要卡含头像占位、显示名、账号、真实角色。
- 账号卡不是未实现的“个人资料编辑”入口;没有编辑功能不画导航箭头。
- 分组:Language、Change password、Upload help、App version;退出单独低强调红色。
- 语言显示语言自身名称;版本来自已有版本配置,不写死截图版本。
- 上传帮助使用本地说明页/底部面板,解释网络、系统后台限制、强制退出后恢复;不承诺锁屏后百分百持续。
- 退出若存在进行中任务,明确任务如何保留;遵守现有引擎停止和账号隔离,不删除队列。
### 03 修改密码(图01,password_change_page.dart)
- 返回标题、简短安全提示、当前/新/确认密码三个字段、Save password。
- 输入框统一样式,确认密码不匹配即时提示;后端规则仍是最终依据。
- 不将生成图“字母数字符号”等提示当新增强制密码政策,文案需与真实校验一致。
- 提交中防重复、成功反馈、会话撤销/重登录按原接口行为处理。
### 04 语言选择(图01,现有语言选择面板)
- 带拖柄的 BottomSheet:Follow device / English / 中文。
- 本版采用临时选中 + Done 提交;滑动关闭/取消不改变原选择,提交后统一刷新语言。
- 各语言以自身语言书写。保留系统跟随与持久化,切换后页面/上传任务不重建丢失。
- 同一面板复用于登录与设置,避免两套选择行为。
### 05 相册列表(图02,albums_tab.dart)
- 顶部品牌/标题、右上新建。次标题可使用“Organize and manage event photos”。
- 图片卡片约16:9,标题、时间地点和 Public/Uploads on 状态叠在底部暗色渐变上,贴近新版图。
- overlay 文字保持对比度;长标题最多两行,卡片不足时增高文字区域,不截掉必要操作。
- 不显示虚假的上传数;正常/下线、公开开关、上传开关是不同事实。
- 无封面使用同尺寸占位,不能拿他人的相册图片补齐。
- 保留分页、下拉刷新、空/错状态;不对每卡发一次详情请求。
- 平板可两列卡片,手机默认单列;不要把所有卡片塞进嵌套滚动。
- 上传角标复用当前账号未完成任务计算;不跨账号,也不把全部历史当未完成。
### 06 相册详情(图02,album_detail_page.dart)
- 顶部返回与更多;封面、标题、时间地点、公开/上传状态。
- 次级四入口 Photos / Members / Categories / Share,44dp以上有效点击区。
- Recent photos 三列少量预览(最多6–9张)与 See all,复用有权限数据;无预览权限用真实状态占位。
- 底部固定 Take photos(主)与 Choose photos(次),带SafeArea,正文留足底部空间。
- 关闭上传时禁用入口并说明原因;公开关闭不自动禁用上传。
- 协作者的照片/操作按已有接口范围,不能为凑预览读取他人管理照片。
- 内页不显示根底部导航。
### 07 相册操作菜单(图02)
- BottomSheet:Edit album、Manage members、Categories、Share album、Cancel。
- 根据角色过滤动作;不能前端显示可管理后端再统一报403作为正常体验。
- 入口不复制另一套编辑/成员/分享实现;与详情四入口共享导航方法。
- 点击动作先关闭面板再进入目标,避免叠层路由错乱。
### 08 空相册(图02)
- 保留真实相册封面和活动资料(如有),中心安静图片占位,Ready for your first photo。
- 底部拍摄/选图仅有上传权限时出现;只读成员显示适当说明。
- 空相册不得出现“32 uploads”或示例照片数。
- 网络失败与空数据分开;真实有处理中照片时提供“正在处理”说明,不把它当绝对空白。
### 09 创建相册(图03,album_form_page.dart)
- 表单分组:标题、开始/结束、时区、地点、Description & languages。
- 图未展示的真实字段如地址仍保留,可放在展开分组;所有必填项继续校验。
- 日期时间用系统/现有选择器,时区显式可见,禁止静默取设备时区。
- 默认语言必填,其他语言可选;编辑某语言不覆盖其他语言内容。
- 表单可滚动,底部 Create album 不被键盘挡住;保存失败保留输入。
- 不新加未实现的封面上传控件;封面配置若已有能力可保留到实际支持的入口。
### 10 编辑相册(图03,同一 AlbumFormPage)
- 顶部 Details / Access 页签,共享同一个表单草稿。
- Details 复用新建字段;Access 展示 Allow uploads、Public access、Allow downloads、Original downloads。
- 每个开关说明准确,不将公众浏览与公众上传混淆。
- 原图下载受总下载开关约束;保持现有保存语义,不能切页签就丢草稿或立刻写服务器。
- Save changes 一次提交验证后的变更;离开未保存表单需要可理解的放弃确认。
- 创建者/管理员与协作者的编辑边界沿用现有权限。
### 11 成员(图03,album_members_page.dart)
- Owner 单独组,Collaborators 列表;头像/首字母、显示名、账号、角色。
- Invite colleague 打开现有企业账号搜索选择器(可改为底部面板),不生成公众注册或外部邮件邀请。
- 搜索保留分页/防抖/竞态处理,空结果、已加入、接口失败均明确反馈。
- 邀请和移除按后端权限;所有者不可当普通协作者直接移除。
- 不硬编码示例邮箱,不新增没有源数据的邮箱字段。
- 成员列表底部按钮与安全区避让,内页不显示根导航。
### 12 分类(图03,现有详情内分类管理)
- 可从详情提取为独立 Categories 页面,以符合设计图;复用现有 CRUD 和语言字段。
- 列表展示真实分类名、编辑/更多入口;无需伪造分类照片。
- New category/Edit category 使用BottomSheet,语言页签、名称、保存。
- 必填和删除关联照片处理沿用既有接口,删除前提示真实影响。
- 无权限用户只可选择可用分类,不展示管理操作。
- 代码提取后移除旧重复区块/入口,避免两份状态不同步。
### 13 拍摄(图04,capture_page.dart)
- 深色摄影界面,顶部返回、目标相册、分类选择、真实上传状态。
- 取景按相机方向/比例正确显示,不拉伸;底部快门、最近拍摄缩略图、前后摄像头切换(设备支持时)。
- 不增加 Square/Pano 等没有实现的模式。
- 每次入队成功给轻量反馈,允许继续连拍;准备/存储失败需可理解提示。
- 退出相机不取消已入队上传;保留权限拒绝、相机初始化失败、生命周期暂停恢复。
- 快门触控区至少72dp;摄像头权限按钮不能被系统导航栏遮挡。
### 14 上传中心(图04,queue_tab.dart)
- 标题 Uploads,右上 History。
- 摘要标注 Today · This device 或真实筛选范围;突出已上传数量,附上传中/等待/需处理。
- All / Active / Needs attention 为主要入口,同时保留既有相册、日期与完成记录筛选(可放筛选菜单)。
- 行内容:本机缩略图、文件名、相册/分类、状态、行级操作。
- 正在上传用百分比与蓝色进度,确认中用不确定进度,等网络橙色,完成绿色。
- 进度回调只刷新相关行;不要为摘要反复扫描全部任务或刷新全部缩略图。
- 上传角标口径固定为未完成任务;completed 与公开完全不同。
### 15 异常任务(图04,同一上传页状态)
- 这是上传中心 Needs attention 筛选,不新增重复的任务存储。
- 网络失败:Retry;源文件缺失/准备失败:Select again;限速/权限等按真实可恢复性给动作。
- Retry eligible tasks 只重试允许重试的任务,不对所有错误一律重试。
- “Today · This device”摘要可继续显示这个范围全部任务,但筛选列表仅显示异常;文案解释清楚,不能称摘要为“筛选结果”却包含其他状态。
- 移除本机记录文案与删除云端照片分开;本轮不新增没有引擎支持的暂停全部按钮。
- 页面为空时显示没有待处理任务,不显示模拟错误。
### 16 服务端上传历史(图04,server_history_page.dart)
- 明确 Server records · All devices;列表按当前账号和权限返回,不是全公司所有用户。
- 相册/时间筛选、真实服务端状态、上传时间、设备来源。
- 后端没有文件名/设备名称时用现有安全回退,不虚构 IMG_x 或硬件型号。
- 无缩略图能力则用一致占位;不能为了展示历史绕过权限取图。
- 不将本机任务和服务端记录相加成总数;保留分页、下拉刷新、加载更多失败。
- 内页不显示根导航。
### 17 照片管理(图05,album_photos_page.dart)
- 返回 Photos、相册副标题,All / Published / Hidden 等筛选。
- 手机三列,极窄屏两列,平板按最小格宽扩列。网格gap约4dp,图片cover;真实纵横比保留到大图。
- Processing/Hidden等必要状态用图标+短标签,不每张叠多个冗余徽章。
- 当前版不新增批量管理,沿用单张大图操作。
- 只请求可访问的管理列表;隐藏预览是否可见必须遵循当前后端能力,不能因为图里可见就放宽。
- 留存分页与滚动位置,签名过期采用既有一次受控刷新。
- 页面无根底部导航。
### 18 照片管理大图(图05,album_photo_viewer_page.dart)
- 摄影深色背景、关闭/更多、contain完整图片、左右切换。
- 底部资料:上传者、相册时区时间、尺寸大小、真实可见性状态。
- 操作区 Hide photo / Publish again(有权限才出现)与 Delete。
- 这是工作人员管理页,不加入公众点赞、点赞气泡、分享下载工具栏。
- 双指缩放、切图、分页、关闭回位优先保留当前已实现机制,禁止另建独立序列。
- 无预览权限、已删除、处理失败给真实占位;不能拿公开原图绕过管理权限。
- 删除使用单独确认,说明当前实际软删除语义,不声称立即物理删除 OSS。
### 19 相册分享(图05,share_qr_dialog.dart)
- 将当前分享对话框整理为手机全屏分享页或全高Sheet;平板可保留居中卡片。避免同一设备两个分享入口外观不同。
- 卡片:真实封面(可缺省)、名称、日期地点、现场生成二维码、扫描说明。
- Copy link 为主要动作,保留已存在的浏览器打开功能作为次级入口。
- 链接包含正确相册token和语言,不能使用设计示例二维码或 OSS URL。
- 相册未公开时必须明确提示当前链接不可公开浏览,不能仍写“Anyone … can view”。
- 复制失败提供可选择文本;未支持系统分享时不画无效 Share 按钮。
- 用户可长按查看/复制链接,但不要把公开token作为主视觉编号。
### 20 隐藏确认(图05)
- 轻量BottomSheet,标题 Hide this photo?、当前图缩略图(有权限才显示)、影响说明、Hide photo / Cancel。
- 文案建议“Viewers will no longer see this photo. Authorized album managers can publish it again.”,避免向所有协作者承诺其能恢复。
- 确认时捕获photoId,防止切图后隐藏了另一张。
- 提交中防重复;失败保留可重试提示;成功关闭面板并更新真实状态。
- 取消不请求接口、不改变状态。删除不复用这段隐藏说明。
## 5. 跨页面业务规则与数据适配
| 项目 | 执行要求 |
|---|---|
| 模型 | 先检查当前 cover/preview 等字段;已有则直接复用,不重复造字段 |
| 隐藏预览 | 当前模型注释限制隐藏照片预览给管理员/创建者,需核实后端并保持;协作者可管理自己的照片不自动等于可读所有隐藏预览 |
| 角色 | 当前账号权限决定入口,后端最终裁决;成员变更后403使用友好刷新提示 |
| 统计 | 只显示真实可得数据,封面卡片用开关状态不造照片总数 |
| 时间 | 日期时区使用现有 album_format.dart;示例2024/2026不是产品默认 |
| 图片 | 网格thumb,大图browse,签名过期有限刷新,头像/缺图有回退 |
| 上传 | 不动task_state、task_store、upload_engine及原生回调语义 |
| 多语言 | 英文设计不是英文限定;ARB双语与占位符一致 |
| 分享 | 正确公开路由、二维码真实生成,不更改观众访问策略 |
| 断网 | 保留已有内容,错误与空态分开;不能恢复网络后重新重复入队 |
本轮原则上不需要后端大规模修改。若UI缺必要字段,先列实际缺口与可用回退;只有真正阻塞必做页面时进行兼容扩展,记录契约和权限验证。不能为一处图标或示例统计增加无关数据表。
## 6. 文件改动地图
以下以 apps/mobile 为根:
| 文件/目录 | 修改内容 |
|---|---|
| lib/app/theme.dart | 统一字体、导航、输入、按钮、BottomSheet/Card主题 |
| lib/ui/tokens.dart | 复用与校准颜色、间距、圆角,避免新增同义常量 |
| lib/ui/components/ | 完善状态、空错态、缩略图;可新增封面卡与共享操作条 |
| lib/pages/login_page.dart | 页面01 |
| lib/pages/home_page.dart | 根导航、页面02/04、帮助入口 |
| lib/pages/password_change_page.dart | 页面03 |
| lib/pages/albums_tab.dart | 页面05 |
| lib/pages/album_detail_page.dart | 页面06/07/08,分类入口调整 |
| lib/pages/album_form_page.dart | 页面09/10,共享草稿和分组 |
| lib/pages/album_members_page.dart | 页面11及邀请选择器 |
| lib/pages/album_categories_page.dart(按需新增) | 页面12,提取现有分类逻辑 |
| lib/pages/capture_page.dart | 页面13 |
| lib/pages/queue_tab.dart | 页面14/15,不复制任务引擎 |
| lib/pages/server_history_page.dart | 页面16 |
| lib/pages/album_photos_page.dart | 页面17 |
| lib/pages/album_photo_viewer_page.dart | 页面18/20 |
| lib/pages/share_qr_dialog.dart | 页面19,保留调用兼容或统一迁移调用方 |
| lib/l10n/app_en.arb、app_zh.arb | 全部新文案和语义标签 |
| pubspec.yaml 与 assets/(如需) | 合规本地登录素材,不引入不必要依赖 |
| test/pages/、test/ui/、integration_test/ | 关键行为与视觉回归 |
页面名移动时追踪引用更新,不保留两个功能重复的入口。共享组件对当前调用者保持合理兼容。
## 7. 可执行任务与出口
### A00 基线与覆盖表
- [ ] 检查当前Git状态、UI-01落实情况、实际运行入口和设备。
- [ ] 打开五张设计板,记录20项当前实现差距。
- [ ] 采集当前App代表页面截图,记录commit/设备/系统/主题。
- [ ] 新建 docs/plans/progress/UI03-验收记录.md。
出口:明确复用组件和实际缺口,保护已有工作。
### A01 主题与共用组件
- [ ] 校准theme/tokens、卡片、表单、图标、状态与Sheet。
- [ ] 完成安全区、大字体、深色及减少动画基础。
- [ ] 确定可用品牌/摄影素材,登记来源;不得用网络假素材掩盖交付缺口。
出口:一套公共规范,后续页面不各写一套。
### A02 账号与设置
- [ ] 页面01–04、上传帮助及退出提示。
- [ ] 键盘、语言持久化、密码错误/提交状态、登录返回行为。
出口:登录到设置完整真实链路符合图01。
### A03 相册工作台
- [ ] 页面05–08、封面、主次操作、菜单及空态。
- [ ] 角色可见性、上传关闭、公开关闭、缺封面、长标题验证。
出口:相册列表→详情→拍摄/选图入口清晰,图02一致。
### A04 表单与协作
- [ ] 页面09–12、Details/Access草稿、成员搜索邀请、分类提取。
- [ ] 未保存退出、语言内容、权限拒绝、重复邀请与分页处理。
出口:创建、编辑、成员、分类是完整可用交互,非仅静态表单。
### A05 拍摄与上传
- [ ] 页面13–16样式、摘要与筛选、错误动作和历史。
- [ ] 连拍入队、网络等待/恢复、重试、账号切换及记录清理回归。
- [ ] 检查行级进度更新,不引入上传期间整页抖动。
出口:图04视觉落地,原有上传机制不退化。
### A06 照片与分享
- [ ] 页面17–20、网格、管理大图、隐藏/删除确认及分享卡。
- [ ] 预览过期、权限撤回、左右切换、返回原位置、复制失败。
出口:图05完整落地,管理操作真实且受权限控制。
### A07 双语、视觉与功能回归
- [ ] 补齐中英文词条、语义标签、空错态及小屏适配。
- [ ] 执行第8节验收,保存优化后截图与差异说明。
- [ ] Android可用设备检查;没有macOS/iOS设备时明确待验,不能用Android结果代表iOS。
出口:各页面可用,未执行的外部验证清晰。
### A08 交接
- [ ] 完成UI03验收记录及页面对应索引。
- [ ] 总纲可新增UI-03状态,不覆盖UI-01/UI-02或把P5标为完成。
- [ ] 报告实际修改、测试结果、设计偏差与剩余素材/真机关口。
出口:接手者无需翻聊天即可核查。
顺序A00→A01→A02/A03/A04/A05/A06→A07→A08。分支关系仅说明工作依赖,不要求启动多个代理。
## 8. 验收矩阵
### 8.1 页面与状态验收
| 编号 | 通过标准 |
|---|---|
| APP-A01 | 20个页面/关键状态均有实现或明确入口映射,没有只做首页 |
| APP-A02 | 图片卡片、分组表单、底部操作、摄影深色风格接近设计板 |
| APP-A03 | 根导航仅三个主页面,内部返回/路由状态正确 |
| APP-A04 | 登录/密码无注册飞书入口;错误与提交反馈真实 |
| APP-A05 | 语言Done提交、取消不改变偏好,中英文持久化有效 |
| APP-A06 | 相册状态、角色入口和封面缺省正确,无伪造计数 |
| APP-A07 | 创建/编辑必填、跨页签草稿、语言字段和时区不丢失 |
| APP-A08 | 邀请为内部账号选择;成员与分类权限、失败状态可用 |
| APP-A09 | 相机方向、权限、连拍与入队反馈正常,无多余拍摄模式 |
| APP-A10 | 上传状态和操作匹配,移除本机记录不删除云图 |
| APP-A11 | 服务端历史与本机队列不混淆,账号隔离正确 |
| APP-A12 | 图片预览受控、签名刷新有限、网格/大图分页和回位正确 |
| APP-A13 | 隐藏/恢复/删除权限真实,确认绑定正确photoId |
| APP-A14 | QR真实生成,公开关闭有提示,复制失败有回退 |
| APP-A15 | 320/390/430逻辑宽度、平板、横屏及1.0/1.3/2.0文字缩放主要操作可达 |
| APP-A16 | 浅深色、减少动画、Semantics、点击目标达标 |
| APP-A17 | 既有上传恢复、凭证续签、原生桥接回归未受影响 |
| APP-A18 | 截图与测试证据真实,iOS/真机关口未完成时明确标注 |
### 8.2 截图要求
保存到 docs/designs/ui03-implementation/,与AI设计板分开:
- 标准尺寸390×844(或最近设备逻辑尺寸):页面01–20英文截图/面板状态各一。
- 中文至少覆盖登录、列表、详情、编辑、成员、上传、大图、分享;其余页面做运行检查并登记。
- 320宽短屏、430宽、平板;重点检查登录键盘、长标题、上传错误长文案、BottomSheet。
- 深色模式至少设置、相册列表、表单、上传。
- 相机与大图横屏、安全区;无相机设备时不能使用静态示例冒充真实预览成功。
- 拍摄权限拒绝、空相册、网络失败、上传关闭、无预览权限、分享关闭等代表状态。
- 截图使用合成测试数据,不提交真实公司账号和私人照片。
允许差异:真实内容、操作系统控件、权限导致的动作隐藏、缺省头像/分类图标、素材比例、大字体重排。不允许省略整页、用假数据代替接口、去掉业务权限或留无效按钮。
### 8.3 自动化与运行入口
使用仓库固定Flutter版本。在 apps/mobile 执行:
```text
flutter gen-l10n
flutter analyze
flutter test
```
- 测试前检查现有 scripts 和 integration_test 引导;从实际脚本运行设备集成,不猜命令或执行未知清库。
- 单元/widget聚焦行为:语言提交取消、表单草稿、权限入口、重试分类、删除/隐藏绑定、签名刷新和分享。
- 对稳定环境下的首页/上传/表单/大图建立少量golden;不为每个间距写脆弱断言。
- 截图测试固定时钟、样本图片、语言与动画,不拿随机AI画板作为像素级golden。
- 保留原有任务/桥接测试;若仅样式变化仍要做拍摄入队和上传队列的实际冒烟。
- 真机后台/锁屏/强退重启验证记录设备、系统与结果;资源不可用列待验证,不重复宣称已通过。
- 若触及API契约或服务端,另跑对应生成、类型和权限测试;本方案不授权对生产环境执行测试。
- 完成时报告实际命令、结果、失败和跳过原因,不沿用旧验收数字。
## 9. 验收记录模板
docs/plans/progress/UI03-验收记录.md 至少包含:
1. 基线commit、时间、设备/系统、Flutter版本与原有工作树改动。
2. 页面01–20:代码入口、完成状态、截图路径。
3. A00–A08任务状态与APP-A01–APP-A18逐项证据。
4. 真实测试命令与结果、未运行项及原因。
5. 与图差异、素材来源、接口缺口与处理。
6. 与UI-01复用关系、未触碰的Web/组件范围。
7. 真机、iOS、外部资源剩余关口。
8. 交付文件清单及下一步。
完成定义:页面视觉与设计方向一致、20项覆盖清楚、关键操作真实可用、业务回归有证据、剩余验证不隐瞒。仅代码编译通过不能替代截图和交互验收。
## 10. 可直接复制给 Claude 的执行指令
> 请执行 docs/plans/2026-09-21-UI03-App全页面新版效果图落地实施方案.md。先打开 docs/designs/app-redesign-2026-09-21/ 下五张PNG,核对最新App和UI-01已有实现,按A00–A08完成20个页面与关键状态的真实改造。优先复用现有主题、模型、管理大图和上传机制,按本文默认设计自主实施,不重复询问常规样式选择。保护已有改动,不修改观众Web或悬浮组件,不放宽隐藏预览/恢复发布权限,不写死图里的日期账号数字和二维码。完成中英文、窄屏、深色和必要测试,交付真实运行截图及UI03验收记录,不只返回计划。缺真机或素材时记录具体影响并继续可完成工作;未经额外授权不部署、不推送、不操作云资源。
+125
View File
@@ -0,0 +1,125 @@
# UI-03 App 全页面新版效果图落地 实施计划
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans. Implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** 按 [UI03 方案](2026-09-21-UI03-App全页面新版效果图落地实施方案.md)和 5 张设计板重构 Flutter App 全部 20 个页面的视觉效果——蓝白工作台风格 + 深色摄影界面,保持全部业务逻辑不变。
**Architecture:** 纯 Flutter 视觉改造。复用 UI-01 已建的 theme/tokens/components;不修改上传引擎/原生桥/数据流/API 契约/Web 观众页/embed 组件。视觉冲突以 UI-03 方案为准。
**Tech Stack:** Flutter 3.44 + Material 3 + Riverpod(已有),零新依赖。
**对应验收:** APP-A01 至 APP-A18(方案 §8.1)。
**依赖基线:** 当前 HEAD(含 UI-01 tag `ui01` + UI-02 tag `ui02`)。
---
## 方案分析
| 维度 | 评估 |
|---|---|
| 范围 | 20 个页面/弹层全覆盖,是 UI-01 的视觉全面升级版 |
| 与 UI-01 的关系 | UI-01 建了主题/组件/业务逻辑——UI-03 在此基础上重做视觉细节(卡片 overlay、封面沉浸、深色摄影等) |
| 复杂度 | 高——每张设计板 4 个页面,涉及页面重写、新弹层、深色摄影模式 |
| 风险 | ① 20 页面改动量大 ② 业务逻辑不能退化 ③ 需保护 UI-01/UI-02 成果 |
| 不变项 | 上传引擎/原生桥/任务状态机/权限校验/API 契约/账号隔离/Web viewer/embed |
---
## Task 1: A00 基线与覆盖表
- [ ] Git 状态核对;记录 HEAD
- [ ] 打开 5 张设计板,逐页核对当前实现差距
- [ ] 采集当前 App 代表页面截图(MuMu)
- [ ] 创建 `docs/plans/progress/UI03-验收记录.md` 骨架 + 20 页面映射表
- [ ] Commit `docs(ui03): baseline screenshots and acceptance skeleton`
---
## Task 2: A01 主题校准 + A02 账号与设置(页面 01-04)
**Files:** theme.dart, tokens.dart, ui/components/, login_page.dart, home_page.dart (SettingsTab), password_change_page.dart, l10n
- [ ] 主题校准:确保字号/字重/间距/圆角与方案 §3 精确一致
- [ ] **页面 01 登录**:摄影拼贴顶部(25-32%高度,短屏/键盘时压缩+滚动)→ 品牌 → 主标题("Your event. In focus.") → 说明 → 账号/密码(带显示/隐藏) → Sign in → 管理员说明;右上语言选择
- [ ] **页面 02 设置**:账号摘要卡(头像占位/首字母+显示名+账号+角色)→ 分组(Language/Change password/Upload help/App version)→ 退出(低强调红色)
- [ ] **页面 03 修改密码**:返回标题+安全提示+三字段+Save;确认不匹配即时提示
- [ ] **页面 04 语言选择**:BottomSheet 带拖柄;Follow device/English/中文各以自身语言书写;临时选中+Done 提交(取消不改)
- [ ] flutter analyze 0 + widget 测试(~12)
- [ ] Commit `feat(mobile): UI-03 theme calibration and account pages (01-04)`
---
## Task 3: A03 相册工作台(页面 05-08)
**Files:** albums_tab.dart, album_detail_page.dart, l10n
- [ ] **页面 05 相册列表**:16:9 封面卡(标题/时间地点/状态叠在底部暗色渐变上,非卡片外独立行);无封面同尺寸占位;保留分页/刷新/空态/角标
- [ ] **页面 06 相册详情**:顶部返回+更多;封面/标题/时间地点/状态;次级四入口(Photos/Members/Categories/Share ≥44dp);Recent photos 三列预览(6-9张)+See all;底部固定 Take photos(主)+Choose photos(次)
- [ ] **页面 07 操作菜单**:BottomSheet (Edit/Members/Categories/Share/Cancel);按角色过滤;先关面板再导航
- [ ] **页面 08 空相册**:保留真实封面和资料;中心安静占位+"Ready for your first photo";有上传权限才显示底部按钮
- [ ] flutter analyze 0 + widget 测试(~12)
- [ ] Commit `feat(mobile): UI-03 album workspace pages (05-08)`
---
## Task 4: A04 表单与协作(页面 09-12)
**Files:** album_form_page.dart, album_members_page.dart, album_categories_page.dart(新提取), album_detail_page.dart(移除旧分类区块)
- [ ] **页面 09 创建**:分组表单(标题/开始结束/时区/地点/Description&languages);时区显式可见;底部 Create album 不被键盘挡住
- [ ] **页面 10 编辑**:Details/Access 页签共享草稿;Access 含 4 开关(upload/public/download/original)各配说明
- [ ] **页面 11 成员**:Owner 单独组+Collaborators 列表;Invite colleague 打开搜索选择器(BottomSheet);保留分页/防抖/竞态
- [ ] **页面 12 分类**:提取为独立 Categories 页面(或可管理 BottomSheet);CRUD+语言字段;无权限用户只可选择
- [ ] 未保存退出确认;重复邀请/接口失败处理
- [ ] flutter analyze 0 + widget 测试(~15)
- [ ] Commit `feat(mobile): UI-03 forms and collaboration pages (09-12)`
---
## Task 5: A05 拍摄与上传(页面 13-16)
**Files:** capture_page.dart, queue_tab.dart, server_history_page.dart, l10n
- [ ] **页面 13 拍摄**:深色摄影界面;顶部返回/目标相册/分类/上传状态;底部快门(≥72dp)+最近缩略图+前后切换;连拍轻反馈;退出不取消已入队
- [ ] **页面 14 上传中心**:标题+History 入口;摘要(突出已完成数+附异常);All/Active/Needs attention 主要筛选;行=缩略图+文件名+状态+操作;百分比进度
- [ ] **页面 15 异常任务**:Needs attention 筛选视图;网络失败=Retry、文件缺失=Select again、限速/权限=按真实可恢复性;"Retry eligible"只重试可重试
- [ ] **页面 16 服务端历史**:"Server records · All devices";按账号/权限;真实服务端状态+时间+设备来源;安全回退
- [ ] 行级进度不整页刷新
- [ ] flutter analyze 0 + widget 测试(~12)
- [ ] Commit `feat(mobile): UI-03 capture and upload pages (13-16)`
---
## Task 6: A06 照片与分享(页面 17-20)
**Files:** album_photos_page.dart, album_photo_viewer_page.dart, share_qr_dialog.dart, l10n
- [ ] **页面 17 照片网格**:返回+相册副标题+筛选(All/Published/Hidden);三列(极窄两列);cover 裁切+必要状态角标
- [ ] **页面 18 管理大图**:摄影深色背景+contain+左右切换;底部资料(上传者/时区时间/尺寸/可见性);操作=Hide photo/Publish again(权限)+Delete;深色确认不虚
- [ ] **页面 19 分享卡**:全屏分享页或全高Sheet;真实封面+名称+日期地点+真生成二维码+Copy link 主操作;公开关闭时提示链接不可浏览
- [ ] **页面 20 隐藏确认**:轻量 BottomSheet;标题+缩略图+影响说明+Hide photo/Cancel;photoId 捕获防错
- [ ] 删除确认说明软删除语义
- [ ] flutter analyze 0 + widget 测试(~12)
- [ ] Commit `feat(mobile): UI-03 photos and share pages (17-20)`
---
## Task 7: A07+A08 回归验收 + 交接
- [ ] 全量回归:`flutter analyze && flutter test` + `pnpm lint && typecheck && test && build && e2e`(web 不降级)
- [ ] 截图:20 个页面英文 + 至少 8 个中文 + 深色/320/平板代表
- [ ] APP-A01 至 APP-A18 逐项验证
- [ ] 完成 `UI03-验收记录.md`
- [ ] 总纲注记 + tag `ui03`
- [ ] Commit `docs: UI-03 acceptance record`
---
## 执行注意
- **保护已有工作**:不覆盖 UI-01/UI-02 改动;不修改 Web viewer/embed/admin
- **业务红线**:上传引擎/原生桥/状态机/权限/幂等/续签全部不动
- **素材规则**:登录拼贴用项目素材或中性占位(不裁设计图为背景);二维码真实生成;头像用首字母
- **UI-01 复用**:tokens.dart/components/PhotoThumbnail/StateBadge 等已建——校准而非重建
- 每任务 TDD + Co-Authored-By trailer