53 lines
28 KiB
HTML
53 lines
28 KiB
HTML
<div id="couple-journal" class="viz-dotted-background">
|
||
<div class="preview-controls" aria-label="设计稿状态">
|
||
<label>展示状态 <select id="journal-state"><option value="filled">有记录 · 已绑定</option><option value="empty">无记录 · 已绑定</option><option value="unbound">未绑定</option><option value="denied">对方关闭姨姨可见</option></select></label>
|
||
<span>设计示例</span>
|
||
</div>
|
||
<div class="journal-phone" aria-label="精致情侣手账设计稿">
|
||
<div class="phone-status"><span>09:41</span><span>••• ▰</span></div>
|
||
<header class="phone-nav"><button id="journal-back" aria-label="返回首页" hidden>‹</button><strong id="journal-title">我们</strong><span class="capsule">••• <b>◉</b></span></header>
|
||
<main id="journal-content"></main>
|
||
<nav class="phone-tabs" aria-label="小程序导航"><button data-page="home"><i data-lucide="house"></i><span>我们</span></button><button data-page="records"><i data-lucide="notebook-pen"></i><span>记录</span></button><button data-page="profile"><i data-lucide="user-round"></i><span>我的</span></button></nav>
|
||
<div class="home-indicator"></div>
|
||
<div id="journal-sheet" class="sheet-mask" hidden><section class="journal-sheet" role="dialog" aria-modal="true" aria-labelledby="sheet-title"><div class="sheet-grip"></div><header><h3 id="sheet-title"></h3><button id="sheet-close" aria-label="关闭">×</button></header><div id="sheet-content"></div></section></div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
#couple-journal {--j-bg:#faf5ee;--j-paper:#fffdf8;--j-ink:#352e2a;--j-muted:#85776d;--j-rose:#b74768;--j-soft:#f4e2e3;--j-line:#e9ddd0;--j-white:#fff;--j-green:#658776;--j-shadow:0 8px 25px #72524012;color:var(--j-ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;padding:20px 10px 28px;color-scheme:light}
|
||
#couple-journal *{box-sizing:border-box}#couple-journal button,#couple-journal select{font:inherit}#couple-journal button{cursor:inherit}#couple-journal button:focus-visible,#couple-journal select:focus-visible{outline:3px solid var(--j-rose);outline-offset:3px}#couple-journal [hidden]{display:none!important}
|
||
#couple-journal .preview-controls{max-width:390px;margin:0 auto 20px;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;color:var(--j-muted)}#couple-journal select{border:1px solid var(--j-line);background:var(--j-paper);color:var(--j-ink);border-radius:9px;padding:9px;max-width:230px;font-size:12px}#couple-journal .preview-controls label{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
|
||
#couple-journal .journal-phone{max-width:390px;margin:auto;background:var(--j-bg);border:1px solid var(--j-line);border-radius:32px;overflow:hidden;position:relative;box-shadow:0 20px 60px #46332318;min-height:830px}#couple-journal .phone-status{padding:19px 25px 8px;display:flex;justify-content:space-between;font-size:12px;font-weight:600}#couple-journal .phone-nav{height:54px;display:flex;align-items:center;justify-content:center;position:relative}#couple-journal .phone-nav strong{font-size:18px;letter-spacing:2px}#couple-journal .capsule{position:absolute;right:16px;font-size:18px;letter-spacing:1px;border:1px solid var(--j-line);border-radius:24px;padding:4px 10px}#couple-journal .capsule b{font-weight:400;border-left:1px solid var(--j-line);margin-left:7px;padding-left:8px}#couple-journal #journal-back{position:absolute;left:18px;background:none;border:0;font-size:29px;width:40px;height:44px;color:var(--j-ink)}
|
||
#couple-journal main{padding:20px 22px 28px;min-height:655px}#couple-journal .eyebrow{font-size:11px;letter-spacing:2px;color:var(--j-muted);text-transform:uppercase}#couple-journal .head-row{display:flex;justify-content:space-between;align-items:center;gap:12px}#couple-journal h2{font-size:21px;margin:6px 0 20px;font-weight:600;letter-spacing:1px}#couple-journal h3{font-size:16px;margin:0;font-weight:600}#couple-journal p{font-size:13px;line-height:1.8;margin:8px 0;color:var(--j-muted)}#couple-journal .quiet-link{background:none;border:0;color:var(--j-rose);font-size:12px;padding:8px 0;min-height:44px}#couple-journal .rose-button{border:0;background:var(--j-rose);color:var(--j-white);border-radius:14px;padding:12px 18px;font-size:13px;min-height:44px}#couple-journal .outline-button{background:var(--j-paper);color:var(--j-rose);border:1px solid var(--j-line);border-radius:12px;padding:11px 15px;min-height:44px;font-size:13px}
|
||
#couple-journal .space-cover{position:relative;margin:6px 0 27px;padding:25px 24px 20px;border-radius:6px 30px 6px 30px;background:var(--j-paper);box-shadow:var(--j-shadow);border:1px solid var(--j-line)}#couple-journal .space-cover:before{content:"";position:absolute;left:calc(50% - 28px);top:-9px;width:56px;height:20px;background:#e9d5b7bb;transform:rotate(-5deg);clip-path:polygon(3% 0,100% 3%,97% 96%,0 100%)}#couple-journal .cover-top{display:flex;justify-content:space-between;align-items:center}#couple-journal .little-heart{color:var(--j-rose);transform:rotate(12deg)}#couple-journal .days{font-family:Georgia,serif;font-size:76px;line-height:1.08;letter-spacing:-4px;margin-top:12px;color:var(--j-rose)}#couple-journal .days span{font-family:inherit;font-size:14px;letter-spacing:0;color:var(--j-muted);margin-left:12px}#couple-journal .cover-date{font-size:11px;color:var(--j-muted);letter-spacing:1px;margin-top:9px}#couple-journal .couple-line{display:flex;gap:10px;align-items:center;border-top:1px dashed var(--j-line);padding-top:16px;margin-top:21px;font-size:12px}#couple-journal .avatar{width:33px;height:33px;border-radius:50%;background:var(--j-soft);display:grid;place-items:center;color:var(--j-rose);font-size:13px;border:3px solid var(--j-paper)}#couple-journal .avatar.second{background:#e4ebe3;color:#526b57;margin-left:-15px}#couple-journal .couple-line .distance{margin-left:auto;color:var(--j-muted);font-size:11px}
|
||
#couple-journal .memory{display:flex;align-items:center;gap:15px;margin:0 0 27px;padding:0;border:0;text-align:left;background:none;color:var(--j-ink);width:100%;min-height:60px}#couple-journal .calendar-stamp{width:46px;flex-shrink:0;border:1px solid var(--j-line);background:var(--j-paper);text-align:center;border-radius:7px;transform:rotate(-5deg)}#couple-journal .calendar-stamp small{display:block;font-size:9px;padding:4px;background:var(--j-soft);color:var(--j-rose)}#couple-journal .calendar-stamp b{display:block;font-family:Georgia,serif;font-size:24px;padding:4px;font-weight:400}#couple-journal .memory b{font-size:14px;font-weight:500}#couple-journal .memory p{margin:3px 0;font-size:11px}#couple-journal .memory .countdown{margin-left:auto;font-family:Georgia,serif;font-size:29px;color:var(--j-rose)}#couple-journal .countdown small{font-family:sans-serif;font-size:11px;margin-left:4px}
|
||
#couple-journal .shortcuts{display:flex;justify-content:space-between;margin-bottom:30px;border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line);padding:15px 0}#couple-journal .shortcuts button{background:none;border:0;color:var(--j-ink);font-size:11px;display:flex;align-items:center;gap:7px;min-height:44px;padding:0 3px}#couple-journal .shortcuts svg{width:17px;height:17px;color:var(--j-rose)}#couple-journal .section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}#couple-journal .paper-story{position:relative;background:var(--j-paper);padding:16px;box-shadow:var(--j-shadow);border:1px solid var(--j-line);border-radius:5px;transform:rotate(-1deg);margin-bottom:21px;text-align:left;width:100%;color:var(--j-ink)}#couple-journal .paper-story time{font-family:Georgia,serif;font-size:12px;letter-spacing:1px;color:var(--j-muted)}#couple-journal .paper-story h3{margin:9px 0 8px}#couple-journal .paper-story p{font-size:12px;margin:6px 0 11px}#couple-journal .story-footer{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--j-muted);padding-top:8px}
|
||
#couple-journal .landscape{height:147px;overflow:hidden;position:relative;background:linear-gradient(#e2bfac 0%,#f4d8ba 48%,#92aaa9 49%,#c4d1c7 100%);border-radius:2px;margin:8px 0}#couple-journal .landscape:before{content:"";position:absolute;width:180px;height:170px;border-radius:45% 60% 0 0;background:#788e81;left:-30px;top:65px;transform:rotate(30deg)}#couple-journal .landscape:after{content:"";position:absolute;width:200px;height:140px;border-radius:70% 60% 0 0;background:#556f68;right:-40px;top:85px;transform:rotate(-20deg)}#couple-journal .sun{position:absolute;width:29px;height:29px;border-radius:50%;background:#fff1d8;right:72px;top:27px;box-shadow:0 0 32px #fff1d899}#couple-journal .photo-label{position:absolute;bottom:10px;left:12px;color:#fffdf8;z-index:1;font-size:10px;letter-spacing:2px}
|
||
#couple-journal .empty-note{text-align:center;padding:35px 15px;background:var(--j-paper);border:1px dashed var(--j-line);border-radius:6px 25px 6px 25px;margin-top:18px}#couple-journal .empty-note>svg{color:var(--j-rose);width:30px;height:30px;margin-bottom:15px}#couple-journal .empty-note h3{font-size:17px}#couple-journal .empty-note p{font-size:12px;margin:10px 0 20px}#couple-journal .invite{border:1px dashed var(--j-line);padding:17px;border-radius:16px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;gap:12px}#couple-journal .invite h3{font-size:13px}#couple-journal .invite p{font-size:11px;margin:3px 0}
|
||
#couple-journal .record-filters{display:flex;gap:20px;border-bottom:1px solid var(--j-line);margin-bottom:24px}#couple-journal .record-filters button{background:none;border:0;color:var(--j-muted);padding:12px 2px;min-height:44px;font-size:13px}#couple-journal .record-filters button.active{border-bottom:2px solid var(--j-rose);color:var(--j-rose);font-weight:600}#couple-journal .month-label{font-family:Georgia,serif;font-size:28px;letter-spacing:-1px;margin:0 0 18px}#couple-journal .month-label small{font-family:sans-serif;font-size:12px;letter-spacing:0;color:var(--j-muted);margin-left:10px}#couple-journal .tools{margin-top:27px;padding-top:20px;border-top:1px solid var(--j-line)}#couple-journal .tool-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:15px}#couple-journal .tool-list button{background:var(--j-paper);border:1px solid var(--j-line);border-radius:12px;color:var(--j-muted);font-size:11px;padding:13px 3px;display:flex;align-items:center;gap:7px;flex-direction:column;min-height:60px}#couple-journal .tool-list svg{width:19px;height:19px;color:var(--j-rose)}
|
||
#couple-journal .period-summary{margin:3px 0 25px}#couple-journal .period-summary h2{font-size:28px;margin:8px 0;color:var(--j-rose)}#couple-journal .period-summary p{font-size:12px}#couple-journal .calendar-paper{background:var(--j-paper);border:1px solid var(--j-line);border-radius:22px;padding:18px 13px;box-shadow:var(--j-shadow)}#couple-journal .calendar-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}#couple-journal .calendar-heading b{font-size:15px;font-weight:600}#couple-journal .calendar-heading button{background:none;border:0;color:var(--j-muted);width:44px;height:44px;font-size:21px}#couple-journal .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 0}#couple-journal .calendar-grid small{text-align:center;font-size:10px;color:var(--j-muted);padding-bottom:8px}#couple-journal .calendar-grid button{background:none;border:0;font-size:12px;min-height:40px;color:var(--j-ink);border-radius:10px;padding:0;position:relative}#couple-journal .calendar-grid button.period-day{background:var(--j-soft);color:var(--j-rose)}#couple-journal .calendar-grid button.predicted{background:#f8eeeb;color:#956571}#couple-journal .calendar-grid button.selected{background:var(--j-rose);color:var(--j-white);box-shadow:0 3px 8px #b7476830}#couple-journal .calendar-grid button.recorded:after{content:"";position:absolute;bottom:4px;left:calc(50% - 2px);width:4px;height:4px;background:currentColor;border-radius:50%}#couple-journal .calendar-legend{display:flex;justify-content:center;gap:17px;margin-top:17px;font-size:10px;color:var(--j-muted)}#couple-journal .calendar-legend span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;background:var(--j-soft);border-radius:2px}#couple-journal .calendar-legend span+span:before{background:#f8eeeb}#couple-journal .day-details{margin-top:26px}#couple-journal .day-detail-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--j-line);padding:14px 0;font-size:12px}#couple-journal .day-detail-row svg{color:var(--j-rose);width:17px;height:17px}#couple-journal .day-detail-row span:last-child{margin-left:auto;color:var(--j-muted)}#couple-journal .permission-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:12px;border-top:1px solid var(--j-line);margin-top:24px}#couple-journal .permission-row p{font-size:11px;margin:3px 0}#couple-journal .toggle{border:0;width:42px;height:26px;border-radius:16px;background:var(--j-rose);padding:3px;display:flex;justify-content:flex-end;flex-shrink:0}#couple-journal .toggle.off{background:#b6a99b;justify-content:flex-start}#couple-journal .toggle:before{content:"";width:20px;height:20px;background:var(--j-white);border-radius:50%}
|
||
#couple-journal .phone-tabs{display:flex;background:var(--j-paper);border-top:1px solid var(--j-line);padding:12px 22px 5px;justify-content:space-around}#couple-journal .phone-tabs button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--j-muted);font-size:10px;min-width:66px;min-height:44px}#couple-journal .phone-tabs svg{width:20px;height:20px}#couple-journal .phone-tabs button.active{color:var(--j-rose)}#couple-journal .home-indicator{width:100px;height:4px;border-radius:4px;background:var(--j-ink);margin:11px auto 9px}#couple-journal .sheet-mask{position:absolute;inset:0;background:#352e2a55;z-index:3;display:flex;align-items:flex-end}#couple-journal .journal-sheet{width:100%;background:var(--j-paper);border-radius:25px 25px 0 0;padding:10px 24px 30px;box-shadow:0 -10px 35px #352e2a18}#couple-journal .sheet-grip{width:32px;height:4px;border-radius:3px;background:var(--j-line);margin:0 auto 20px}#couple-journal .journal-sheet header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}#couple-journal .journal-sheet header button{background:none;border:0;color:var(--j-muted);font-size:23px;width:44px;height:44px}#couple-journal .sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}#couple-journal .sheet-actions button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--j-bg);color:var(--j-ink);border:1px solid var(--j-line);border-radius:15px;padding:17px;font-size:13px}#couple-journal .sheet-actions svg{color:var(--j-rose)}#couple-journal .sheet-field{display:block;font-size:12px;color:var(--j-muted);margin:14px 0}#couple-journal .sheet-field input,#couple-journal .sheet-field textarea{display:block;width:100%;margin-top:8px;border:1px solid var(--j-line);background:var(--j-bg);color:var(--j-ink);border-radius:11px;padding:12px;font:inherit;font-size:16px}#couple-journal .sheet-field textarea{min-height:100px;resize:vertical}
|
||
@media(max-width:360px){#couple-journal{padding:12px 0}#couple-journal main{padding:18px 17px}#couple-journal .shortcuts button{gap:4px;font-size:10px}#couple-journal .preview-controls{padding:0 5px}#couple-journal .days{font-size:68px}#couple-journal .calendar-grid button{min-height:38px}}
|
||
</style>
|
||
<script>
|
||
(()=>{
|
||
const root=document.getElementById('couple-journal'),content=root.querySelector('#journal-content'),picker=root.querySelector('#journal-state'),sheet=root.querySelector('#journal-sheet');
|
||
const saved=window.openai?.widgetState?.modelContent||{};
|
||
const state={page:['home','records','period','profile'].includes(saved.page)?saved.page:'home',scenario:['filled','empty','unbound','denied'].includes(saved.scenario)?saved.scenario:'filled',filter:'日记',day:5,visible:true,accent:'#b74768',paper:true};
|
||
const icon=name=>`<i data-lucide="${name}" aria-hidden="true"></i>`;
|
||
const scene=()=>'<div class="landscape" role="img" aria-label="海边日落示意插画"><span class="sun"></span><span class="photo-label">海边的傍晚</span></div>';
|
||
const story=()=>`<button class="paper-story" data-action="story"><time>10.04 / SUNDAY</time><h3>把日落装进口袋</h3><p>沿着海边走了很久，回头的时候，刚好看见你在笑。</p>${scene()}<div class="story-footer">${icon('heart')} 小满 · 昨天 18:32</div></button>`;
|
||
const empty=(title,desc,action='留下第一篇',key='publish')=>`<div class="empty-note">${icon('notebook-pen')}<h3>${title}</h3><p>${desc}</p><button class="rose-button" data-action="${key}">${action}</button></div>`;
|
||
const tools=()=>`<div class="tools"><h3>一起的小事</h3><div class="tool-list">${[['music-2','歌曲','songs'],['circle-check','打卡','checkin'],['flower-2','姨姨','period'],['paw-print','宠物','pet']].map(([i,n,a])=>`<button data-action="${a}">${icon(i)}${n}</button>`).join('')}</div></div>`;
|
||
function home(){const unbound=state.scenario==='unbound';return `<div class="eyebrow">OUR LITTLE WORLD</div><h2>${unbound?'给日常留一点位置':'平凡的日子，也值得记住'}</h2><section class="space-cover"><div class="cover-top"><span class="eyebrow">${unbound?'我的生活手账':'我们在一起'}</span><span class="little-heart">${icon('heart')}</span></div><div class="days">${unbound?'124':'365'}<span>天</span></div><div class="cover-date">${unbound?'注册于 2026.06.03':'故事开始于 2025.10.05'}</div><div class="couple-line"><span class="avatar">满</span>${unbound?'': '<span class="avatar second">屿</span>'}<span>${unbound?'小满':'小满 & 阿屿'}</span><span class="distance">${unbound?'等待另一半加入':'把日子慢慢过成故事'}</span></div></section>${unbound?'<div class="invite"><div><h3>邀请另一半，共写这本手账</h3><p>绑定后，一起收藏日常</p></div><button class="outline-button" data-action="bind">邀请</button></div>':'<button class="memory" data-action="memory"><span class="calendar-stamp"><small>OCT</small><b>12</b></span><span><b>下一次值得期待</b><p>第一次旅行纪念日</p></span><span class="countdown">7<small>天后</small></span></button>'}<div class="shortcuts">${[['calendar-heart','记忆日','memory'],['images','相册','albums'],['notebook-pen','写日记','publish'],['flower-2','姨姨','period']].map(([i,n,a])=>`<button data-action="${a}">${icon(i)}${n}</button>`).join('')}</div><div class="section-top"><h3>最近的一页</h3><button class="quiet-link" data-action="records">翻翻手账 →</button></div>${state.scenario==='filled'||state.scenario==='denied'?story():empty('故事，从今天开始','一句心情、一张照片，都可以成为第一页。')}`;}
|
||
function records(){let body;if(state.scenario==='empty'||state.scenario==='unbound')body=empty('还没有'+state.filter,'慢慢积攒属于你们的生活片段。',state.filter==='相册'?'创建相册':state.filter==='记忆日'?'添加记忆日':'写日记',state.filter==='相册'?'newAlbum':state.filter==='记忆日'?'newMemory':'publish');else if(state.filter==='日记')body='<div class="month-label">October<small>2026 · 十月</small></div>'+story()+'<button class="paper-story" data-action="story"><time>10.02 / FRIDAY</time><h3>今天你做的饭，满分</h3><p>没有特别的安排。两个人一起买菜、做饭，就已经是很好的周末。</p><div class="story-footer">'+icon('heart')+' 阿屿 · 10月2日</div></button>';else if(state.filter==='相册')body='<button class="paper-story" data-action="album">'+scene()+'<h3>沿着海岸线</h3><p>12 张照片 · 10月4日更新</p></button>';else body='<button class="memory" data-action="memory"><span class="calendar-stamp"><small>OCT</small><b>12</b></span><span><b>第一次旅行</b><p>每一年，都想和你重游一次</p></span><span class="countdown">7<small>天后</small></span></button>';return `<div class="head-row"><div><span class="eyebrow">PAGES OF US</span><h2>我们的生活手账</h2></div><button class="rose-button" data-action="publish">＋ 记录</button></div><div class="record-filters">${['日记','相册','记忆日'].map(n=>`<button data-filter="${n}" class="${state.filter===n?'active':''}">${n}</button>`).join('')}</div>${body}${tools()}`;}
|
||
function permission(){return `<div class="permission-row"><div>对方可见<p>关闭后，对方无法查看这份生理记录</p></div><button class="toggle ${state.visible?'':'off'}" role="switch" aria-checked="${state.visible}" aria-label="对方可见" data-action="toggle"></button></div>`;}
|
||
function period(){if(state.scenario==='denied')return empty('对方暂时关闭了可见','这份生理记录目前不可查看，<br>需要对方重新开启后才能访问。','刷新权限','refresh')+permission();if(state.scenario==='empty'||state.scenario==='unbound')return `<div class="period-summary"><span class="eyebrow">BODY JOURNAL</span><h2>慢慢了解自己的节奏</h2><p>从记录一次生理期开始。</p></div>${empty('还没有生理期记录','填写最近一次生理期，开始记录身体状态。','设置生理期','settings')}${permission()}`;const days=Array.from({length:35},(_,i)=>{const d=i-3;return d<1||d>31?'<span></span>':`<button data-day="${d}" aria-label="10月${d}日${d<=5?' 经期':''}" class="${d<=5?'period-day':''} ${d>=29?'predicted':''} ${d===state.day?'selected':''} ${[2,5].includes(d)?'recorded':''}">${d}</button>`}).join('');return `<div class="period-summary"><div class="head-row"><span class="eyebrow">BODY JOURNAL</span><button class="quiet-link" data-action="settings">周期设置 ${icon('settings-2')}</button></div><h2>生理期第 5 天</h2><p>平均周期 28 天 · 下次预计 10月29日</p></div><section class="calendar-paper"><div class="calendar-heading"><button data-action="calendarHelp" aria-label="上个月">‹</button><b>2026年 10月</b><button data-action="calendarHelp" aria-label="下个月">›</button></div><div class="calendar-grid">${['日','一','二','三','四','五','六'].map(d=>'<small>'+d+'</small>').join('')}${days}</div><div class="calendar-legend"><span>经期</span><span>预测经期</span></div></section><div class="day-details"><div class="section-top"><h3>10月${state.day}日 · 当天记录</h3><button class="quiet-link" data-action="bodyRecord">＋ 添加</button></div>${[2,5].includes(state.day)?`<div class="day-detail-row">${icon('flower-2')}<span>经量</span><span>少量</span></div><div class="day-detail-row">${icon('smile')}<span>心情</span><span>平静</span></div><div class="day-detail-row">${icon('notebook-pen')}<span>备注</span><span>今天状态不错</span></div>`:'<p>这一天还没有记录，留意一下身体的感受。</p><button class="outline-button" data-action="bodyRecord">记录当天状态</button>'}</div>${permission()}`;}
|
||
function profile(){return `<div class="eyebrow">MY CORNER</div><h2>我的小角落</h2><div class="space-cover"><div class="head-row"><div><h3>小满</h3><p>ID 520087</p></div><span class="avatar">满</span></div><button class="quiet-link" data-action="editProfile">编辑资料 →</button></div><h3>我们的关系</h3>${state.scenario==='unbound'?'<div class="invite"><p>另一半还没有加入</p><button class="outline-button" data-action="bind">绑定情侣</button></div>':'<div class="permission-row"><span>小满 & 阿屿<p>在一起 365 天</p></span><button class="quiet-link" data-action="relationship">关系管理 →</button></div>'}<div class="permission-row"><span>外观与通知</span><button class="quiet-link" data-action="appearance">设置 →</button></div>`;}
|
||
function render(){root.style.setProperty('--j-rose',state.accent);root.querySelectorAll('.paper-story,.space-cover').forEach(e=>e.style.transform=state.paper?'':'none');picker.value=state.scenario;content.innerHTML=({home,records,period,profile}[state.page])();root.querySelector('#journal-title').textContent={home:'我们',records:'记录',period:'姨姨',profile:'我的'}[state.page];root.querySelector('#journal-back').hidden=state.page!=='period';root.querySelectorAll('[data-page]').forEach(b=>{b.classList.toggle('active',b.dataset.page===(state.page==='period'?'records':state.page));b.setAttribute('aria-current',b.classList.contains('active')?'page':'false')});if(!state.paper)root.querySelectorAll('.paper-story,.space-cover').forEach(e=>e.style.transform='none');globalThis.lucide?.createIcons();}
|
||
function persist(){window.openai?.setWidgetState?.({modelContent:{page:state.page,scenario:state.scenario},privateContent:null})?.catch(()=>{});}
|
||
function openSheet(title,body){root.querySelector('#sheet-title').textContent=title;root.querySelector('#sheet-content').innerHTML=body;sheet.hidden=false;globalThis.lucide?.createIcons();root.querySelector('#sheet-close').focus();}
|
||
function action(a){if(['period','records'].includes(a)){state.page=a;render();persist();return;}if(a==='toggle'){state.visible=!state.visible;render();return;}if(a==='publish')openSheet('留下一页日常',`<div class="sheet-actions"><button data-action="write">${icon('notebook-pen')}写日记</button><button data-action="newAlbum">${icon('images')}建相册</button><button data-action="newMemory">${icon('calendar-heart')}记忆日</button><button data-action="bodyRecord">${icon('flower-2')}身体记录</button></div>`);else if(a==='write')openSheet('写日记','<label class="sheet-field">标题<input placeholder="给今天起个名字"></label><label class="sheet-field">正文<textarea placeholder="今天有什么想留下的？"></textarea></label><button class="rose-button" data-action="close">完成预览</button>');else if(a==='bodyRecord')openSheet(`10月${state.day}日 · 记录身体状态`,`<div class="sheet-actions">${[['flower-2','经量'],['smile','心情'],['thermometer','体温'],['notebook-pen','备注']].map(([i,n])=>`<button data-action="recordField">${icon(i)}${n}</button>`).join('')}</div>`);else if(a==='settings')openSheet('周期设置','<label class="sheet-field">最近一次开始日期<input type="date" value="2026-10-01"></label><label class="sheet-field">持续天数<input type="number" value="5"></label><label class="sheet-field">周期长度<input type="number" value="28"></label><button class="rose-button" data-action="close">完成预览</button>');else if(a==='story')openSheet('把日落装进口袋',scene()+'<p>沿着海边走了很久，回头的时候，刚好看见你在笑。</p><p>小满 · 2026年10月4日</p>');else if(a==='close'){sheet.hidden=true;}else{const titles={bind:'邀请另一半',memory:'第一次旅行纪念日',albums:'相册里的片段',album:'沿着海岸线',newAlbum:'创建相册',newMemory:'添加记忆日',refresh:'当前权限',relationship:'关系管理',appearance:'外观与通知',editProfile:'编辑资料',recordField:'当天状态',songs:'一起听的歌',checkin:'一起打卡',pet:'宠物养成',calendarHelp:'日历月份'};openSheet(titles[a]||'记录',a==='refresh'?'<p>对方仍关闭了可见。你自己的可见开关不会解除对方设置的限制。</p>':a==='relationship'?'<p>你和阿屿已绑定。</p><button class="outline-button" data-action="close">解绑情侣</button>':a==='bind'?'<label class="sheet-field">对方ID<input placeholder="输入另一半的ID"></label><button class="rose-button" data-action="close">完成预览</button>':'<p>此处展示交互与排版，正式页面继续使用现有接口数据。</p><button class="outline-button" data-action="close">返回</button>');}}
|
||
root.addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;if(b.dataset.page){state.page=b.dataset.page;render();persist();}else if(b.dataset.filter){state.filter=b.dataset.filter;render();}else if(b.dataset.day){state.day=Number(b.dataset.day);render();}else if(b.dataset.action)action(b.dataset.action);});picker.addEventListener('change',()=>{state.scenario=picker.value;state.visible=true;render();persist();});root.querySelector('#journal-back').addEventListener('click',()=>{state.page='home';render();persist();});root.querySelector('#sheet-close').addEventListener('click',()=>sheet.hidden=true);sheet.addEventListener('click',e=>{if(e.target===sheet)sheet.hidden=true;});root.addEventListener('keydown',e=>{if(e.key==='Escape')sheet.hidden=true;});window.addEventListener('openai:set_globals',e=>{const v=e.detail?.globals?.widgetState?.modelContent;if(v&&['home','records','period','profile'].includes(v.page)){state.page=v.page;if(['filled','empty','unbound','denied'].includes(v.scenario))state.scenario=v.scenario;render();}});render();if(globalThis.Tweak){const tweak=new Tweak({container:root.querySelector('.journal-phone'),onChange:render});tweak.addColorPicker(state,'accent',{label:'重点色',reference:'--j-rose'});tweak.addToggle(state,'paper',{label:'手账纸张倾斜'});}
|
||
})();
|
||
</script>
|