Files
story/web/public/design-v074/index.html
T
2026-08-30 14:26:28 +08:00

45 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>安心陪伴 v0.74 设计基准</title>
<style>
:root{--paper:#fbfaf7;--surface:#fffefd;--ink:#262525;--muted:#77726c;--line:#e6e0d8;--blue:#315d9b;--blue-soft:#edf3fb;--coral:#c45f3b;--coral-soft:#fff2ec;--green:#5f8f69;--green-soft:#edf6ef;--amber:#a8732f;--amber-soft:#fff7e8}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper)}button,input,select{font:inherit}.app{min-height:1024px}.top{position:fixed;z-index:5;inset:0 0 auto;height:68px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(255,254,252,.98)}.brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:760}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;font-size:16px}.search{display:flex;align-items:center;width:360px;height:40px;margin-left:auto;padding:0 14px;border:1px solid var(--line);border-radius:9px;color:#999;background:#fff}.account{margin-left:14px;padding:9px 12px;border:0;background:transparent}.side{position:fixed;z-index:4;top:68px;bottom:0;left:0;width:228px;padding:14px 12px 18px;border-right:1px solid var(--line);background:var(--surface)}.side-label{padding:8px 12px 10px;color:var(--muted);font-size:13px}.nav{display:grid;gap:3px}.nav a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:9px;color:#4a4947;text-decoration:none;font-size:14px}.nav a.active{color:var(--blue);background:var(--blue-soft);font-weight:650}.nav hr{width:100%;margin:8px 0;border:0;border-top:1px solid var(--line)}.main{min-width:0;margin-left:228px;padding-top:68px}.page{width:min(1360px,100%);margin:auto;padding:0 28px 56px}.page-head{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 0 18px}.page-head h1{margin:0 0 7px;font-size:28px;letter-spacing:-.03em}.page-head p{margin:0;color:var(--muted);font-size:14px}.verified,.status{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;color:#467550;background:var(--green-soft);font-size:12px}.context{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;margin-bottom:16px;padding:8px 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.families,.actions,.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.families button,.actions button,.chips button,.btn{min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fff}.families button.active{border-color:#e5d2bd;background:#f6ecdf;font-weight:650}.families .add{width:38px;padding:0}.actions .primary,.btn.primary{border-color:var(--blue);color:#fff;background:var(--blue)}.actions .danger{color:#a74135}.grid{display:grid;gap:16px}.two{grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr)}.three{grid-template-columns:minmax(250px,.72fr) minmax(400px,1.3fr) minmax(220px,.62fr)}.card{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--surface)}.card-pad{padding:22px}.card h2,.card h3{margin:0}.card h2{font-size:21px}.card h3{font-size:17px}.sub{margin:7px 0 0;color:var(--muted);font-size:13px}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 12px}.list{display:grid}.row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:62px;padding:12px 20px;border-top:1px solid var(--line)}.row:first-child{border-top:0}.row strong{display:block;font-size:14px}.row small{display:block;margin-top:4px;color:var(--muted)}.metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--line)}.metric{padding:18px;background:var(--surface)}.metric strong{display:block;margin-top:8px;font-size:24px}.metric span,.metric small{color:var(--muted);font-size:12px}.elder-tabs{display:flex;align-items:center;gap:26px;min-height:92px;padding:4px 12px}.elder{display:grid;justify-items:center;gap:4px;border:0;background:transparent}.avatar{display:grid;place-items:center;width:58px;height:58px;border:3px solid #fff;border-radius:50%;color:#7c5b4f;background:#f0ddd4;box-shadow:0 0 0 1px #d8cfc5;font-size:18px}.elder.active .avatar{box-shadow:0 0 0 2px var(--blue)}.chart{display:flex;align-items:flex-end;justify-content:space-around;height:230px;padding:22px}.bar{display:grid;justify-items:center;gap:7px;color:var(--muted);font-size:11px}.bar i{display:block;width:20px;border-radius:5px 5px 2px 2px;background:#6489be}.mood{padding:6px 9px;border-radius:999px;color:var(--coral);background:var(--coral-soft);font-size:12px}.notice{padding:18px;border:1px solid #efd6c7;border-radius:12px;background:#fff7ef;color:#6b4b3c}.timeline{position:relative;padding:14px}.timeline:before{position:absolute;top:18px;bottom:18px;left:24px;width:2px;background:#d9c7bf;content:""}.timeline .item{position:relative;margin:0 0 8px;padding:14px 14px 14px 34px;border-radius:10px}.timeline .item.active{background:#f7ebe6;box-shadow:inset 3px 0 var(--coral)}.timeline .item:before{position:absolute;top:20px;left:8px;width:10px;height:10px;border:3px solid #fff;border-radius:50%;background:#b86a55;content:""}.summary-block{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}.summary-block.warm{background:#fff7f2}.summary-block.cool{background:#f1f6fc}.tags{display:flex;flex-wrap:wrap;gap:7px}.tag{padding:5px 9px;border-radius:999px;color:#6f544c;background:#f3e9e4;font-size:12px}.family-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.member{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff}.member .avatar{width:48px;height:48px}.permission{padding:4px 8px;border-radius:999px;color:var(--blue);background:var(--blue-soft);font-size:11px}.device{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;padding:20px;border-top:1px solid var(--line)}.device:first-child{border-top:0}.device-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#efebe6}.candidate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.candidate{min-height:190px;padding:19px;border:1px solid var(--line);border-radius:13px;background:#fff}.candidate p{line-height:1.7}.schedule{display:grid;grid-template-columns:90px 18px 1fr auto;align-items:center;gap:8px;padding:15px 20px;border-top:1px solid var(--line)}.schedule:first-child{border-top:0}.schedule-dot{width:10px;height:10px;border-radius:50%;background:var(--blue)}.auth-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.auth-item{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}.auth-item header{display:flex;justify-content:space-between}.heat{display:grid;grid-template-columns:repeat(26,12px);gap:5px;padding:20px}.heat i{width:12px;height:12px;border-radius:3px;background:#eceff3}.heat i:nth-child(7n),.heat i:nth-child(17n){background:#a7c0e2}.model-hero{display:flex;align-items:center;justify-content:space-between;padding:22px;border:1px solid #d9dfdc;border-radius:14px;background:#f5f8f6}.model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.model{padding:20px;border:1px solid var(--line);border-radius:13px;background:#fff}.model.active{border-color:#8dab96;box-shadow:inset 0 3px #6b9475}.matrix{width:100%;border-collapse:collapse}.matrix th,.matrix td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center}.matrix th:first-child{text-align:left}.matrix thead{color:var(--muted);background:#faf7f2}.empty{display:grid;place-items:center;min-height:190px;color:var(--muted);text-align:center}.footer-note{margin-top:14px;color:var(--muted);font-size:12px}@media(max-width:900px){.side{width:76px}.side-label,.nav a{font-size:0}.nav a:before{content:"•";font-size:18px}.main{margin-left:76px}.two,.three,.candidate-grid,.model-grid,.auth-list{grid-template-columns:1fr}.page{padding-inline:16px}.search{display:none}}
</style>
</head>
<body><div id="root"></div>
<script>
const pages={
home:{title:'陪伴周记',desc:'从每位长者出发,查看最近聊天、心情线索和需要家人关心的变化。'},
conversations:{title:'回忆时间轴',desc:'以时间串起每一次聊天,查看 AI 摘要、关键词、故事候选与下次话题。'},
stories:{title:'故事与记忆',desc:'核对智能整理的故事,沉淀经过家人确认的长期记忆。'},
subjects:{title:'长者资料',desc:'维护长期陪伴资料、交流节奏、话题偏好和分项授权。'},
messages:{title:'日程与提醒',desc:'安排陪伴时间,集中处理设备、故事和隐私待办。'},
members:{title:'家庭管理',desc:'管理家庭空间、成员邀请、角色和所有权。'},
devices:{title:'陪伴设备',desc:'绑定设备并查看在线状态、固件、音量和诊断结果。'},
sharing:{title:'内容分享',desc:'向指定家人分享故事、文字或录音,并随时撤销权限。'},
privacy:{title:'数据与授权',desc:'按项目查看授权,申请访问、更正、撤回、删除或私有导出。'},
billing:{title:'服务用量',desc:'围绕长者聊天查看时长、活跃日和最近通话。'},
models:{title:'大模型管理',desc:'配置、测试并激活用于摘要、关键词和故事候选生成的大模型。'},
profile:{title:'设置与权限',desc:'查看登录身份、家庭角色和全部权限范围。'}
};
const nav=[['home','首页'],['conversations','聊天记录'],['stories','故事与记忆'],['subjects','长者资料'],['messages','日程与提醒'],['members','家庭管理'],['devices','陪伴设备'],['sharing','内容分享'],['privacy','数据与授权'],['billing','服务用量'],['models','大模型管理'],['profile','设置与权限']];
const section=new URL(location.href).searchParams.get('section')||'home';const meta=pages[section]||pages.home;
const context=`<div class="context"><div class="families"><button class="active">合成数据一号家庭</button><button class="add">+</button></div><div class="actions"><span class="status">● 状态实时更新</span><button>刷新数据</button>${section==='subjects'?'<button class="primary">新增长者</button>':''}${section==='devices'?'<button class="primary">绑定设备</button>':''}${section==='members'?'<button class="primary">邀请家人</button>':''}</div></div>`;
function home(){return `<div class="elder-tabs"><button class="elder active"><span class="avatar">林</span><strong>测试长者</strong><small>长者</small></button></div><div class="grid two"><section class="card"><div class="card-head"><div><h2>陪伴周记</h2><p class="sub">最近 7 天聊了 2 次,共 18 分钟</p></div><span class="mood">设备离线</span></div><div class="chart">${[2,2,2,6,82,2,2].map((h,i)=>`<div class="bar"><span>8/${24+i}</span><i style="height:${h}px"></i><small>${i===4?'16':'0'}分钟</small><span>平稳</span></div>`).join('')}</div></section><section class="card card-pad"><h2>最近一次聊天</h2><p class="sub">08/28 21:16 · 时长待确认</p><div class="summary-block">本次聊天已结束,AI 摘要正在整理中。</div><div class="summary-block warm"><strong>心情线索:平稳</strong><p class="sub">根据已授权的聊天内容推测,不是健康诊断。</p></div><button class="btn primary" style="width:100%">查看完整聊天</button></section></div><div class="grid two" style="margin-top:16px"><section class="card card-pad"><h2>值得家人关心</h2><div class="notice" style="margin-top:14px">最近两次聊天都提到睡眠变浅,可以温和问问最近休息得怎么样。</div></section><section class="card"><div class="card-head"><h2>最近动态</h2></div><div class="row"><div><strong>完成一次 AI 陪伴</strong><small>今天 10:15 · 22 分钟</small></div><span>查看</span></div><div class="row"><div><strong>故事候选等待确认</strong><small>“天津小学教书的日子”</small></div><span>审核</span></div></section></div>`}
function conversations(){return `<div class="grid three"><section class="card"><div class="card-head"><div><h3>聊天记录</h3><p class="sub">按时间浏览</p></div></div><div class="timeline"><div class="item active"><strong>2026-08-30 · 10:15</strong><small>23 分钟 · 心情平稳</small></div><div class="item"><strong>2026-08-28 · 13:07</strong><small>18 分钟 · 心情开心</small></div><div class="item"><strong>2026-08-27 · 09:38</strong><small>14 分钟 · 心情平稳</small></div></div></section><section class="card card-pad"><div style="display:flex;justify-content:space-between"><h2>AI 聊天总结</h2><span class="status">已总结</span></div><p style="line-height:1.85">奶奶今天聊起她在天津当小学语文老师的日子。她回忆了 1980 年代初在和平区一所小学任教的经历,每天骑自行车上班,课堂上注重朗读和写字,常自制教具。</p><div class="summary-block"><h3>关键词</h3><div class="tags" style="margin-top:10px"><span class="tag">天津</span><span class="tag">小学老师</span><span class="tag">语文教学</span><span class="tag">1980年代</span></div></div><div class="summary-block warm"><h3>故事候选</h3><p>“那时候我在天津和平区的小学教书,教语文……”</p></div><div class="summary-block cool"><h3>下次可以聊</h3><p>还记得当时教室里有什么有趣的事吗?</p></div></section><aside class="card card-pad"><h3>总结模型</h3><p class="sub">豆包内容总结 Pro</p><span class="status" style="margin-top:14px">运行正常</span><div class="summary-block"><strong>最近生成</strong><p class="sub">2026-08-30 10:40</p></div><button class="btn primary" style="width:100%">审核并保存为故事</button></aside></div>`}
function stories(){return `<div class="card"><div class="card-head"><div><h2>待审核故事</h2><p class="sub">5 个故事由 AI 根据聊天整理,确认后才进入长期记忆。</p></div><div class="chips"><button class="primary">全部</button><button>待审核</button><button>已确认</button></div></div><div class="candidate-grid" style="padding:0 20px 20px">${['天津小学教书的日子','春天院子里的柿子树','第一次带学生春游'].map((x,i)=>`<article class="candidate"><span class="mood">等待审核</span><h3 style="margin-top:18px">${x}</h3><p class="sub">来自 2026-08-${30-i*2} 的聊天摘要,模型已标记来源。</p><div class="actions" style="margin-top:24px"><button>查看来源</button><button class="primary">开始审核</button></div></article>`).join('')}</div></div><section class="card" style="margin-top:16px"><div class="card-head"><div><h2>已确认记忆</h2><p class="sub">家人确认后,豆包才可以在后续聊天中谨慎参考。</p></div><div class="search" style="margin:0;width:300px">搜索记忆</div></div><div class="empty">暂时还没有已确认记忆</div></section>`}
function subjects(){return `<div class="grid two"><section><div class="family-grid"><article class="card card-pad" style="border:2px solid #36485f"><div style="display:flex;gap:14px"><span class="avatar">林</span><div><h2>测试长者</h2><p class="sub">Asia/Shanghai · 档案版本 v1</p></div></div><div class="metric-row" style="margin-top:20px"><div class="metric"><span>交流节奏</span><strong style="font-size:16px">放慢语速</strong></div><div class="metric"><span>资料完整度</span><strong style="font-size:16px">80%</strong></div></div><div class="row" style="padding-inline:0"><strong style="color:var(--coral)">等待完善资料</strong><button class="btn">编辑资料</button></div></article><button class="card empty" style="width:100%;font:inherit"><div><span class="avatar" style="margin:auto;background:#f36f4f;color:#fff">+</span><h2>添加新长者</h2><p class="sub">创建新的长者档案与交流偏好</p></div></button></div></section><aside class="card card-pad"><h2>豆包交流设置</h2><p class="sub">这些内容会从下一次新聊天开始生效。</p><div class="summary-block"><strong>优先话题</strong><div class="tags" style="margin-top:10px"><span class="tag">家乡</span><span class="tag">工作经历</span><span class="tag">园艺</span></div></div><div class="summary-block warm"><strong>避免主动提及</strong><p class="sub">收入、家庭矛盾</p></div><div class="summary-block cool"><strong>长期陪伴方向</strong><p class="sub">多聊年轻时的工作经历,让长者心情放松。</p></div></aside></div>`}
function members(){return `<div class="grid two"><section class="card"><div class="card-head"><div><h2>家庭成员</h2><p class="sub">2 位成员 · 当前角色:所有者</p></div><button class="btn primary">邀请家人</button></div><div class="family-grid" style="padding:0 20px 20px"><div class="member"><span class="avatar">主</span><div><strong>本地所有者</strong><small>家庭所有者</small></div><span class="permission">管理全部</span></div><div class="member"><span class="avatar">编</span><div><strong>本地编辑者</strong><small>编辑者</small></div><button class="btn">调整角色</button></div></div></section><aside class="card"><div class="card-head"><div><h2>家庭信息</h2><p class="sub">合成数据一号家庭</p></div><button class="btn">编辑</button></div><div class="row"><div><strong>家庭所有者</strong><small>本地所有者</small></div></div><div class="row"><div><strong>待处理邀请</strong><small>当前没有待接受邀请</small></div></div></aside></div><section class="card" style="margin-top:16px"><div class="card-head"><h2>最近家庭活动</h2></div><div class="row"><div><strong>本地编辑者加入了家庭</strong><small>2026-08-27 22:34</small></div></div><div class="row"><div><strong>家庭名称已更新</strong><small>2026-08-27 20:16</small></div></div></section>`}
function messages(){return `<div class="grid two"><section class="card"><div class="card-head"><div><h2>今天的陪伴安排</h2><p class="sub">2026-08-30 周日</p></div><button class="btn primary">新增提醒</button></div><div class="schedule"><time>10:15</time><span class="schedule-dot"></span><div><strong>AI 陪伴聊天</strong><small>测试长者 · 已完成 22 分钟</small></div><span class="status">已完成</span></div><div class="schedule"><time>16:00</time><span class="schedule-dot" style="background:var(--coral)"></span><div><strong>每日陪伴提醒</strong><small>建议和测试长者聊一聊今天的心情</small></div><span class="mood">即将开始</span></div></section><aside class="card"><div class="card-head"><h2>需要处理</h2><span class="mood">3</span></div><div class="row"><div><strong>故事等待确认</strong><small>天津小学教书的日子</small></div><button class="btn">去审核</button></div><div class="row"><div><strong>设备当前离线</strong><small>simulated-terminal</small></div><button class="btn">查看</button></div></aside></div><section class="card" style="margin-top:16px"><div class="card-head"><h2>近期记录</h2><span class="status">实时连接</span></div><div class="row"><div><strong>完成一次聊天总结</strong><small>今天 10:40 · 豆包内容总结 Pro</small></div></div><div class="row"><div><strong>故事候选已生成</strong><small>今天 10:42 · 等待家庭确认</small></div></div></section>`}
function devices(){return `<section class="card"><div class="card-head"><div><h2>陪伴设备</h2><p class="sub">2 台设备 · 0 台在线</p></div><div class="chips"><button>全部</button><button>在线</button><button>离线</button></div></div><div class="device"><span class="device-icon">音</span><div><h3>simulated-terminal</h3><p class="sub">测试长者 · 客厅 · 最后在线 08/29 13:56</p></div><div class="actions"><span class="mood">离线</span><button>配置与诊断</button></div></div><div class="device"><span class="device-icon">音</span><div><h3>voice-terminal</h3><p class="sub">测试长者 · 尚未上报固件版本</p></div><div class="actions"><span class="mood">离线</span><button>配置与诊断</button></div></div></section><div class="metric-row" style="margin-top:16px"><div class="metric"><span>绑定设备</span><strong>2</strong></div><div class="metric"><span>在线设备</span><strong>0</strong></div><div class="metric"><span>待同步配置</span><strong>1</strong></div><div class="metric"><span>诊断异常</span><strong>0</strong></div></div>`}
function sharing(){return `<div class="grid two"><section class="card"><div class="card-head"><div><h2>创建内容分享</h2><p class="sub">只分享具体资源,不会开放整段长者档案。</p></div></div><div class="card-pad" style="padding-top:4px"><div class="summary-block"><strong>1. 选择长者与资源</strong><p class="sub">测试长者 · 故事“天津小学教书的日子”</p></div><div class="summary-block"><strong>2. 指定家人与权限</strong><p class="sub">本地编辑者 · 仅查看文字 · 7 天有效</p></div><button class="btn primary" style="margin-top:16px">核对并创建分享</button></div></section><aside class="card"><div class="card-head"><div><h2>有效分享</h2><p class="sub">1 项</p></div></div><div class="row"><div><strong>天津小学教书的日子</strong><small>本地编辑者 · 仅查看 · 09/06 到期</small></div><button class="btn danger">撤销</button></div></aside></div>`}
function privacy(){return `<section class="card"><div class="card-head"><div><h2>分项授权</h2><p class="sub">每一项都独立生效和撤回,角色权限不会自动扩大数据范围。</p></div><select class="btn"><option>测试长者</option></select></div><div class="auth-list" style="padding:0 20px 20px">${[['保存文字记录','生效中'],['保存原始录音','未授权'],['整理故事与摘要','生效中'],['个性化长期记忆','生效中'],['家庭资源分享','未授权']].map(x=>`<div class="auth-item"><header><strong>${x[0]}</strong><span class="${x[1]==='生效中'?'status':'mood'}">${x[1]}</span></header><p class="sub">适用于后续新聊天,可随时提交撤回。</p><button class="btn">查看说明</button></div>`).join('')}</div></section><div class="grid two" style="margin-top:16px"><section class="card"><div class="card-head"><div><h2>个人数据请求</h2><p class="sub">访问、更正、撤回或删除</p></div><button class="btn primary">发起请求</button></div><div class="empty">当前没有处理中请求</div></section><aside class="card"><div class="card-head"><div><h2>私有导出</h2><p class="sub">生成后仅当前账号可下载</p></div><button class="btn">生成导出</button></div><div class="empty">尚未生成私有导出文件</div></aside></div>`}
function billing(){return `<div class="metric-row"><div class="metric"><span>累计聊天时长</span><strong>18 分钟</strong></div><div class="metric"><span>今日聊天时长</span><strong>0 分钟</strong></div><div class="metric"><span>平均每次时长</span><strong>2 分钟</strong></div><div class="metric"><span>活跃天数</span><strong>2 天</strong></div></div><section class="card" style="margin-top:16px"><div class="card-head"><div><h2>聊天活动</h2><p class="sub">最近一年 · 2025-08-31 至 2026-08-30</p></div><div class="chips"><button class="primary">每日</button><button>每周</button><button>累计</button></div></div><div class="heat">${Array.from({length:156},()=>'<i></i>').join('')}</div></section><div class="grid two" style="margin-top:16px"><section class="card"><div class="card-head"><h2>按长者</h2></div><div class="row"><div><strong>测试长者</strong><small>11 次聊天</small></div><strong>18 分钟</strong></div></section><section class="card"><div class="card-head"><h2>最近聊天</h2></div><div class="row"><div><strong>08/28 13:08 · 测试长者</strong><small>simulated-terminal</small></div><strong>1 分钟</strong></div></section></div>`}
function models(){return `<div class="model-hero"><div><h2>当前总结模型:豆包内容总结 Pro</h2><p class="sub">负责聊天摘要、关键词、故事候选和下次话题。</p></div><span class="status">运行正常</span></div><div class="model-grid" style="margin-top:16px"><article class="model active"><div style="display:flex;justify-content:space-between"><h2>豆包内容总结 Pro</h2><span class="status">当前激活</span></div><p class="sub">火山方舟 / ep-20260830-summary</p><div class="summary-block"><strong>最近测试</strong><p class="sub">2026-08-30 10:32 · 通过 · 820ms</p></div><div class="actions"><button>测试连接</button><button>编辑配置</button></div></article><article class="model"><div style="display:flex;justify-content:space-between"><h2>备用总结模型</h2><span class="mood">未激活</span></div><p class="sub">OpenAI 兼容接口 / summary-backup</p><div class="summary-block"><strong>最近测试</strong><p class="sub">2026-08-29 18:02 · 通过 · 1.2s</p></div><div class="actions"><button>测试连接</button><button class="primary">激活模型</button></div></article></div>`}
function profile(){return `<div class="grid two"><section class="card card-pad"><div style="display:flex;align-items:center;gap:16px"><span class="avatar">主</span><div><h2>本地所有者</h2><p class="sub">owner · 当前家庭角色:所有者</p></div><button class="btn" style="margin-left:auto">退出登录</button></div><div class="summary-block"><strong>家庭范围</strong><p class="sub">合成数据一号家庭 · 15 项权限中包含 12 项一般权限</p></div></section><aside class="card card-pad"><h2>敏感资源说明</h2><p class="sub" style="line-height:1.7">播放和下载录音不由家庭角色自动获得,必须按长者、用途和有效期单独授权。</p></aside></div><section class="card" style="margin-top:16px"><div class="card-head"><div><h2>全部权限</h2><p class="sub">家庭角色决定一般操作范围</p></div><span class="permission">15 项</span></div><table class="matrix"><thead><tr><th>权限</th><th>所有者</th><th>管理员</th><th>编辑者</th><th>查看者</th></tr></thead><tbody>${['查看家庭','管理家庭资料','管理家庭成员','查看长者资料','编辑长者资料','查看聊天记录','审核故事与记忆','管理陪伴设备','查看隐私请求','管理总结大模型'].map((x,i)=>`<tr><th>${x}</th><td>✓</td><td>${i===2||i===9?'✓':'✓'}</td><td>${i<2?'—':'✓'}</td><td>${i===0||i===3||i===5?'✓':'—'}</td></tr>`).join('')}</tbody></table></section>`}
const renderers={home,conversations,stories,subjects,messages,members,devices,sharing,privacy,billing,models,profile};
document.getElementById('root').innerHTML=`<div class="app"><header class="top"><div class="brand"><span class="brand-mark">心</span>安心陪伴</div><div class="search">搜索长者、设备、聊天</div><button class="account">本地所有者⌄</button></header><aside class="side"><div class="side-label">长者陪伴</div><nav class="nav">${nav.map(([k,l],i)=>`${i===6?'<hr>':''}<a class="${section===k?'active':''}" href="?section=${k}">${l}</a>`).join('')}</nav></aside><main class="main"><div class="page"><header class="page-head"><div><h1>${meta.title}</h1><p>${meta.desc}</p></div><span class="verified">家庭权限已校验</span></header>${context}${(renderers[section]||home)()}<p class="footer-note">设计基准 · 1440 × 1024 · 日期锚点 2026-08-30</p></div></main></div>`;
</script></body></html>