photo-live/docs/designs/app-preview-2026-09-22/index.html

<!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>