story/web/public/design-v074/index.html

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