fix(viewer): replace text arrow share icon with SVG share glyph
Co-Authored-By: Claude Code <noreply@anthropic.com>
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Login</title><link rel="stylesheet" href="styles.css"></head><body data-page="1"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Settings</title><link rel="stylesheet" href="styles.css"></head><body data-page="2"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Change password</title><link rel="stylesheet" href="styles.css"></head><body data-page="3"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · App language</title><link rel="stylesheet" href="styles.css"></head><body data-page="4"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Albums</title><link rel="stylesheet" href="styles.css"></head><body data-page="5"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Album overview</title><link rel="stylesheet" href="styles.css"></head><body data-page="6"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Album actions</title><link rel="stylesheet" href="styles.css"></head><body data-page="7"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Empty album</title><link rel="stylesheet" href="styles.css"></head><body data-page="8"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · New album</title><link rel="stylesheet" href="styles.css"></head><body data-page="9"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Edit album</title><link rel="stylesheet" href="styles.css"></head><body data-page="10"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Members</title><link rel="stylesheet" href="styles.css"></head><body data-page="11"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Categories</title><link rel="stylesheet" href="styles.css"></head><body data-page="12"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Camera</title><link rel="stylesheet" href="styles.css"></head><body data-page="13"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Uploads</title><link rel="stylesheet" href="styles.css"></head><body data-page="14"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Needs attention</title><link rel="stylesheet" href="styles.css"></head><body data-page="15"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Upload history</title><link rel="stylesheet" href="styles.css"></head><body data-page="16"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Manage photos</title><link rel="stylesheet" href="styles.css"></head><body data-page="17"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Photo details</title><link rel="stylesheet" href="styles.css"></head><body data-page="18"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Share album</title><link rel="stylesheet" href="styles.css"></head><body data-page="19"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · Hide photo</title><link rel="stylesheet" href="styles.css"></head><body data-page="20"><main id="app" class="app"></main><script src="app.js"></script></body></html>
|
||||
@@ -0,0 +1,72 @@
|
||||
# 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 或线上配置。
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h33v33H0z"/><path stroke="#172033" d="M2 2.5h7m2 0h4m1 0h1m1 0h5m1 0h7M2 3.5h1m5 0h1m2 0h3m1 0h5m4 0h1m5 0h1M2 4.5h1m1 0h3m1 0h1m1 0h3m3 0h3m5 0h1m1 0h3m1 0h1M2 5.5h1m1 0h3m1 0h1m1 0h5m2 0h1m1 0h1m1 0h1m2 0h1m1 0h3m1 0h1M2 6.5h1m1 0h3m1 0h1m1 0h2m3 0h1m2 0h1m2 0h2m1 0h1m1 0h3m1 0h1M2 7.5h1m5 0h1m1 0h1m1 0h1m2 0h4m5 0h1m5 0h1M2 8.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M10 9.5h2m1 0h1m1 0h1m1 0h1m2 0h1M2 10.5h1m1 0h5m2 0h1m1 0h1m2 0h1m2 0h1m2 0h1m1 0h5M3 11.5h1m5 0h2m3 0h1m3 0h5m1 0h3m3 0h1M4 12.5h3m1 0h2m2 0h2m3 0h1m1 0h1m2 0h2m1 0h2M2 13.5h5m2 0h1m1 0h1m4 0h1m1 0h1m2 0h3m1 0h1m1 0h1m1 0h1M2 14.5h1m2 0h1m2 0h1m1 0h1m6 0h3m1 0h1m5 0h2M2 15.5h2m3 0h1m1 0h1m1 0h2m2 0h2m1 0h4m1 0h4m3 0h1M3 16.5h3m1 0h2m1 0h2m3 0h4m3 0h1m1 0h5M6 17.5h2m1 0h1m2 0h1m2 0h1m1 0h2m1 0h1m1 0h2m2 0h1m2 0h1M2 18.5h2m2 0h1m1 0h5m1 0h1m1 0h2m1 0h1m1 0h1m5 0h2M2 19.5h1m1 0h1m1 0h2m1 0h1m1 0h4m3 0h9m1 0h1m1 0h1M2 20.5h1m1 0h1m2 0h2m8 0h1m2 0h1m1 0h1m3 0h1m1 0h1M2 21.5h1m1 0h1m6 0h2m1 0h1m1 0h1m4 0h2m6 0h1M2 22.5h1m2 0h4m3 0h2m3 0h3m1 0h6m1 0h3M10 23.5h2m1 0h1m1 0h2m1 0h1m3 0h1m3 0h5M2 24.5h7m3 0h6m1 0h1m1 0h2m1 0h1m1 0h3M2 25.5h1m5 0h1m1 0h1m1 0h2m1 0h1m1 0h1m2 0h3m3 0h1M2 26.5h1m1 0h3m1 0h1m1 0h5m1 0h4m2 0h5m1 0h1M2 27.5h1m1 0h3m1 0h1m1 0h3m1 0h2m2 0h1m1 0h4m1 0h1m1 0h4M2 28.5h1m1 0h3m1 0h1m1 0h1m1 0h4m1 0h2m4 0h7M2 29.5h1m5 0h1m2 0h2m3 0h3m3 0h1m1 0h4m1 0h1M2 30.5h7m1 0h3m1 0h2m3 0h3m1 0h4m1 0h1"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,10 @@
|
||||
const fs=require('fs'),path=require('path');
|
||||
const root=__dirname;
|
||||
const pages=[['login','登录','Login'],['settings','设置','Settings'],['password','修改密码','Change password'],['language','语言选择','App language'],['albums','相册列表','Albums'],['album-detail','相册详情','Album overview'],['album-actions','相册操作','Album actions'],['empty-album','空相册','Empty album'],['create-album','创建相册','New album'],['edit-album','编辑相册','Edit album'],['members','协作成员','Members'],['categories','分类管理','Categories'],['camera','拍摄','Camera'],['uploads','上传中心','Uploads'],['upload-errors','异常任务','Needs attention'],['upload-history','上传历史','Upload history'],['photos','照片管理','Manage photos'],['photo-detail','管理大图','Photo details'],['share','相册分享','Share album'],['hide-photo','隐藏确认','Hide photo']].map(([slug,zh,en],i)=>({id:i+1,file:`${String(i+1).padStart(2,'0')}-${slug}.html`,zh,en}));
|
||||
fs.mkdirSync(path.join(root,'assets'),{recursive:true});
|
||||
fs.copyFileSync(path.join(root,'../viewer-mobile-concept-2026-09-21.png'),path.join(root,'assets/reference.png'));
|
||||
for(const page of pages)fs.writeFileSync(path.join(root,page.file),`<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>PhotoLive · ${page.en}</title><link rel="stylesheet" href="styles.css"></head><body data-page="${page.id}"><main id="app" class="app"></main><script src="app.js"></script></body></html>`);
|
||||
fs.writeFileSync(path.join(root,'pages.js'),'window.PREVIEW_PAGES='+JSON.stringify(pages,null,2)+';');
|
||||
const QR=require(require.resolve('qrcode',{paths:[path.resolve(root,'../../../apps/admin')]}));
|
||||
QR.toString('https://example.com/photolive-preview',{type:'svg',margin:2,color:{dark:'#172033',light:'#ffffff'}},(err,svg)=>{if(err)throw err;fs.writeFileSync(path.join(root,'assets/demo-qr.svg'),svg)});
|
||||
console.log('Generated 20 page entry points and offline assets.');
|
||||
@@ -0,0 +1,10 @@
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>PhotoLive · App 全页面交互预览</title><style>
|
||||
*{box-sizing:border-box}body{margin:0;background:#edf1f7;color:#172033;font:14px/1.5 system-ui,-apple-system,'Segoe UI','PingFang SC',sans-serif}button,select{font:inherit}button{cursor:pointer}header{height:76px;background:#ffffffdd;border-bottom:1px solid #dfe6ef;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:16px}.brand{font-size:23px;font-weight:750;letter-spacing:-.7px}.brand span{color:#1a73e8}header p{margin:2px 0 0;font-size:11px;color:#7b8ca3}.header-tools{display:flex;gap:8px}button,select,.open{border:1px solid #d8e1ed;border-radius:8px;background:white;padding:9px 12px;color:#45617e;text-decoration:none;font-size:12px}.workspace{display:flex;min-height:calc(100vh - 76px)}aside{width:248px;flex:none;padding:24px 16px;background:#f8fafd;border-right:1px solid #dfe6ef}aside h2{font-size:10px;font-weight:600;color:#8a9bb1;letter-spacing:1.5px;margin:22px 12px 8px}aside h2:first-child{margin-top:0}.page-link{width:100%;border:0;background:transparent;display:flex;gap:12px;align-items:center;border-radius:8px;text-align:left;padding:10px 12px;line-height:1.3;font-size:12px}.page-link.active{background:#e2edff;color:#1a73e8}.page-link .num{font-size:11px;color:#91a2ba;font-variant-numeric:tabular-nums}.page-link small{display:block;font-size:10px;color:#98a4b5;margin-top:3px}.main{flex:1;min-width:0;padding:26px 28px 36px}.presentation{display:flex;gap:36px;justify-content:center;align-items:flex-start}.phone-column{width:390px;flex:none}.caption{display:flex;justify-content:space-between;align-items:center;color:#60718a;font-size:12px;margin-bottom:12px}.screen{width:100%;height:844px;background:white;border:1px solid #d9e2ed;border-radius:22px;overflow:hidden;box-shadow:0 20px 60px #2b426b17}iframe{width:100%;height:100%;border:0;background:#f6f8fb;display:block}.notes{max-width:230px;padding-top:50px}.notes .eyebrow{font-size:10px;color:#1a73e8;letter-spacing:2px}.notes h1{font-size:28px;margin:12px 0;line-height:1.3;letter-spacing:-.7px}.notes p{font-size:12px;color:#7c8aa0;line-height:1.9}.notes .chips{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}.chips span{background:#fff9;border:1px solid #dce4ee;padding:5px 9px;font-size:10px;border-radius:6px;color:#6480a1}.pager{display:flex;gap:8px;margin-top:20px}.pager button{flex:1}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px}.gallery a{color:#354b69;text-decoration:none;font-size:12px}.gallery img{display:block;width:100%;margin-top:10px;border-radius:14px;border:1px solid #d7e1ef;box-shadow:0 8px 24px #22395912}.mobile-select{display:none}.footer-note{margin-top:14px;color:#95a1b3;font-size:10px;text-align:center}[hidden]{display:none!important}@media(max-width:1100px){.notes{display:none}.main{padding:24px 18px}}@media(max-width:740px){header{height:auto;min-height:74px;padding:12px 16px;flex-wrap:wrap}.brand{font-size:20px}.header-tools button{display:none}aside{display:none}.main{padding:14px 0 0}.mobile-select{display:block;margin:0 12px 12px;width:calc(100% - 24px)}.phone-column{width:100%!important;max-width:430px}.caption{padding:0 14px}.screen{border-radius:0;border-left:0;border-right:0;box-shadow:none;height:calc(100dvh - 180px);min-height:568px}.footer-note{padding:0 16px 12px}.gallery{padding:0 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}}
|
||||
</style></head><body><header><div><div class="brand"><span>◈</span> PhotoLive <span style="font-weight:400;color:#97a4b7;font-size:13px;letter-spacing:0;margin-left:12px">APP DESIGN PREVIEW</span></div><p>20 个页面与关键状态 · 可交互 HTML 原型 · 离线可用</p></div><div class="header-tools"><button id="overview">全部页面总览</button><select id="width" aria-label="Preview width"><option value="390">390 × 844</option><option value="320">320 × 568</option><option value="430">430 × 932</option></select><a class="open" id="standalone" target="_blank" rel="noopener">独立打开 ↗</a></div></header><div class="workspace"><aside id="nav"></aside><main class="main"><select class="mobile-select" id="mobilePages" aria-label="选择页面"></select><div class="presentation" id="presentation"><div class="phone-column" id="column"><div class="caption"><span id="caption"></span><span id="sizeLabel">390 × 844</span></div><div class="screen" id="screen"><iframe id="preview" title="PhotoLive App 交互预览" src="05-albums.html"></iframe></div><div class="footer-note">演示账号与样例数据 · 未连接相机、OSS 或生产服务</div></div><div class="notes"><div class="eyebrow">UI–03 / INTERACTIVE PROTOTYPE</div><h1 id="pageTitle"></h1><p id="pageDesc"></p><div class="chips"><span>真实 HTML 组件</span><span>中英文</span><span>可点击跳转</span><span>本地摄影素材</span></div><p>在左侧选择页面,或直接在原型内操作。登录页与设置页可切换语言。相机、上传、成员和权限修改均为当前预览会话的模拟状态。</p><p>分享页二维码为演示码,指向 example.com;“打开观众页预览”可连接此前生成的观众页文件。</p><div class="pager"><button id="previous">← 上一页</button><button id="next">下一页 →</button></div></div></div><div class="gallery" id="gallery" hidden></div></main></div><script src="pages.js"></script><script>
|
||||
const pages=window.PREVIEW_PAGES,$=s=>document.querySelector(s);let selected=5,overview=false;const groups=['ACCOUNT & SETTINGS','ALBUM WORKSPACE','CREATE & COLLABORATE','CAPTURE & UPLOAD','PHOTOS & SHARING'];const descriptions=['摄影拼贴、企业账号登录、设置和语言选择。没有自行注册或飞书入口。','照片主导的相册工作台。详情包含拍摄、选图、成员、分类、分享入口及空态。','统一分组表单、权限草稿、内部成员邀请和双语分类编辑。','深色拍摄界面、本机上传队列、异常处理与独立的服务端历史。','三列照片管理、深色管理大图、相册分享及隐藏确认。'];
|
||||
pages.forEach((p,i)=>{if(i%4===0)$('#nav').insertAdjacentHTML('beforeend','<h2>'+groups[Math.floor(i/4)]+'</h2>');const b=document.createElement('button');b.className='page-link';b.dataset.id=p.id;b.innerHTML='<span class="num">'+String(p.id).padStart(2,'0')+'</span><span>'+p.zh+'<small>'+p.en+'</small></span>';b.onclick=()=>select(p.id);$('#nav').append(b);const opt=new Option(String(p.id).padStart(2,'0')+' · '+p.zh,p.id);$('#mobilePages').append(opt);const a=document.createElement('a');a.href=p.file;a.innerHTML=String(p.id).padStart(2,'0')+' / '+p.zh+'<img loading="lazy" src="screenshots/'+String(p.id).padStart(2,'0')+'.png" alt="'+p.zh+'截图">';a.onclick=e=>{e.preventDefault();select(p.id)};$('#gallery').append(a)});
|
||||
function labels(){const p=pages[selected-1];document.querySelectorAll('.page-link').forEach(b=>b.classList.toggle('active',+b.dataset.id===selected));$('#caption').textContent=String(selected).padStart(2,'0')+' / '+p.en;$('#pageTitle').textContent=p.zh;$('#pageDesc').textContent=descriptions[Math.floor((selected-1)/4)];$('#mobilePages').value=selected;$('#standalone').href=p.file;history.replaceState(null,'','#'+selected)}
|
||||
function showOverview(value){overview=value;$('#gallery').hidden=!value;$('#presentation').hidden=value;$('#overview').textContent=value?'返回交互预览':'全部页面总览'}
|
||||
function select(id){selected=Math.max(1,Math.min(20,Number(id)));showOverview(false);$('#preview').src=pages[selected-1].file;labels()}
|
||||
$('#previous').onclick=()=>select(selected===1?20:selected-1);$('#next').onclick=()=>select(selected===20?1:selected+1);$('#mobilePages').onchange=e=>select(e.target.value);$('#overview').onclick=()=>showOverview(!overview);$('#width').onchange=e=>{const w=+e.target.value,h=w===320?568:w===430?932:844;$('#column').style.width=w+'px';$('#screen').style.height=h+'px';$('#sizeLabel').textContent=w+' × '+h};window.addEventListener('message',e=>{if(e.source!==$('#preview').contentWindow||e.data?.type!=='photolive-preview-page'||!Number.isInteger(e.data.page)||e.data.page<1||e.data.page>20)return;selected=e.data.page;labels()});select(Number(location.hash.slice(1))||5);
|
||||
</script></body></html>
|
||||
@@ -0,0 +1,122 @@
|
||||
window.PREVIEW_PAGES=[
|
||||
{
|
||||
"id": 1,
|
||||
"file": "01-login.html",
|
||||
"zh": "登录",
|
||||
"en": "Login"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"file": "02-settings.html",
|
||||
"zh": "设置",
|
||||
"en": "Settings"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"file": "03-password.html",
|
||||
"zh": "修改密码",
|
||||
"en": "Change password"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"file": "04-language.html",
|
||||
"zh": "语言选择",
|
||||
"en": "App language"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"file": "05-albums.html",
|
||||
"zh": "相册列表",
|
||||
"en": "Albums"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"file": "06-album-detail.html",
|
||||
"zh": "相册详情",
|
||||
"en": "Album overview"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"file": "07-album-actions.html",
|
||||
"zh": "相册操作",
|
||||
"en": "Album actions"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"file": "08-empty-album.html",
|
||||
"zh": "空相册",
|
||||
"en": "Empty album"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"file": "09-create-album.html",
|
||||
"zh": "创建相册",
|
||||
"en": "New album"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"file": "10-edit-album.html",
|
||||
"zh": "编辑相册",
|
||||
"en": "Edit album"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"file": "11-members.html",
|
||||
"zh": "协作成员",
|
||||
"en": "Members"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"file": "12-categories.html",
|
||||
"zh": "分类管理",
|
||||
"en": "Categories"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"file": "13-camera.html",
|
||||
"zh": "拍摄",
|
||||
"en": "Camera"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"file": "14-uploads.html",
|
||||
"zh": "上传中心",
|
||||
"en": "Uploads"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"file": "15-upload-errors.html",
|
||||
"zh": "异常任务",
|
||||
"en": "Needs attention"
|
||||
},
|
||||
{
|
||||
"id": 16,
|
||||
"file": "16-upload-history.html",
|
||||
"zh": "上传历史",
|
||||
"en": "Upload history"
|
||||
},
|
||||
{
|
||||
"id": 17,
|
||||
"file": "17-photos.html",
|
||||
"zh": "照片管理",
|
||||
"en": "Manage photos"
|
||||
},
|
||||
{
|
||||
"id": 18,
|
||||
"file": "18-photo-detail.html",
|
||||
"zh": "管理大图",
|
||||
"en": "Photo details"
|
||||
},
|
||||
{
|
||||
"id": 19,
|
||||
"file": "19-share.html",
|
||||
"zh": "相册分享",
|
||||
"en": "Share album"
|
||||
},
|
||||
{
|
||||
"id": 20,
|
||||
"file": "20-hide-photo.html",
|
||||
"zh": "隐藏确认",
|
||||
"en": "Hide photo"
|
||||
}
|
||||
];
|
||||
|
After Width: | Height: | Size: 340 KiB |
|
After Width: | Height: | Size: 182 KiB |
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 106 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 1014 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 411 KiB |