banban/docs/banban-mini-design-atlas/overview-v2.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>伴伴小程序当前页面全景 V2</title>
  <link rel="stylesheet" href="overview-v2.css">
</head>
<body class="atlas-v2">
  <main class="atlas">
    <header class="atlas-header">
      <div class="header-copy">
        <div class="eyebrow">BANBAN MINI PROGRAM · CURRENT BUILD</div>
        <h1>伴伴小程序 / 当前页面全景</h1>
        <p>全部页面画面来自当前 <strong>banban-mini</strong> 构建，并由微信开发者工具直接截图。登录态使用本地固定展示数据，不包含线上用户数据。</p>
        <div class="legend">
          <span><i class="dot orange"></i>游客与入口</span>
          <span><i class="dot green"></i>设备与绑定</span>
          <span><i class="dot blue"></i>会话与定位</span>
          <span><i class="dot coral"></i>管理与家庭</span>
        </div>
      </div>
      <div class="metrics" aria-label="页面统计">
        <div class="metric"><strong>11</strong><span>当前路由</span></div>
        <div class="metric"><strong>26</strong><span>真实截图状态</span></div>
        <div class="metric"><strong>4</strong><span>核心 Tab</span></div>
        <div class="metric wide"><strong>390 px</strong><span>微信模拟器原始截图宽度</span></div>
      </div>
    </header>

    <section class="flow flow-entry">
      <div class="flow-heading">
        <div>
          <span class="flow-number">01</span>
          <p class="flow-eyebrow">ENTRY & DEVICE</p>
          <h2>进入、登录与设备首页</h2>
        </div>
        <p>从游客浏览、登录入口到设备绑定后的状态、告警和设备详情。</p>
      </div>
      <div class="state-grid">
        <article class="state-card"><img src="actual-screens/01-device-guest.png" alt="设备首页游客态"><div class="state-copy"><b>01</b><div><h3>首页 · 游客态</h3><p>未登录时的设备入口</p></div></div></article>
        <article class="state-card"><img src="actual-screens/02-login.png" alt="登录页"><div class="state-copy"><b>02</b><div><h3>登录 · 默认</h3><p>微信登录与协议确认</p></div></div></article>
        <article class="state-card"><img src="actual-screens/08-device-online.png" alt="已绑定设备首页"><div class="state-copy"><b>03</b><div><h3>首页 · 已绑定</h3><p>电量、休眠、音量与告警</p></div></div></article>
        <article class="state-card"><img src="actual-screens/09-device-detail.png" alt="设备详情展开"><div class="state-copy"><b>04</b><div><h3>首页 · 详情展开</h3><p>告警位置与设备详细信息</p></div></div></article>
        <article class="state-card"><img src="actual-screens/06-notification-invalid.png" alt="通知链接失效"><div class="state-copy"><b>05</b><div><h3>通知 · 链接失效</h3><p>无效通知的回退页面</p></div></div></article>
        <article class="state-card"><img src="actual-screens/20-bind-scan.png" alt="设备扫码绑定入口"><div class="state-copy"><b>06</b><div><h3>绑定 · 扫码入口</h3><p>扫码或填写设备信息</p></div></div></article>
      </div>
    </section>

    <section class="flow flow-binding">
      <div class="flow-heading">
        <div>
          <span class="flow-number">02</span>
          <p class="flow-eyebrow">BINDING & DEVICE CONTROL</p>
          <h2>设备二维码、贴卡与休眠</h2>
        </div>
        <p>当前绑定页真实展示二维码识别、等待贴卡、追加卡片和休眠配置。</p>
      </div>
      <div class="state-grid">
        <article class="state-card"><img src="actual-screens/21-bind-recognized.png" alt="设备二维码已识别"><div class="state-copy"><b>07</b><div><h3>绑定 · 已识别</h3><p>设备号和序列号已回填</p></div></div></article>
        <article class="state-card"><img src="actual-screens/22-bind-waiting-card.png" alt="等待设备贴卡"><div class="state-copy"><b>08</b><div><h3>绑定 · 等待贴卡</h3><p>绑卡指令和倒计时状态</p></div></div></article>
        <article class="state-card"><img src="actual-screens/23-bind-add-card.png" alt="添加设备卡片"><div class="state-copy"><b>09</b><div><h3>卡片 · 添加入口</h3><p>为当前设备追加新卡</p></div></div></article>
        <article class="state-card"><img src="actual-screens/24-sleep-schedule.png" alt="定时休眠设置"><div class="state-copy"><b>10</b><div><h3>设备 · 定时休眠</h3><p>休眠时段和时区配置</p></div></div></article>
      </div>
    </section>

    <section class="flow flow-social">
      <div class="flow-heading">
        <div>
          <span class="flow-number">03</span>
          <p class="flow-eyebrow">MESSAGES & LOCATION</p>
          <h2>亲子会话与设备定位</h2>
        </div>
        <p>覆盖游客预览、会话列表、AI 与家长消息，以及绑定设备后的实时位置。</p>
      </div>
      <div class="state-grid">
        <article class="state-card"><img src="actual-screens/03-chat-guest.png" alt="玩伴游客态"><div class="state-copy"><b>11</b><div><h3>玩伴 · 游客态</h3><p>未登录时的会话能力预览</p></div></div></article>
        <article class="state-card"><img src="actual-screens/10-chat-list.png" alt="会话列表"><div class="state-copy"><b>12</b><div><h3>玩伴 · 会话列表</h3><p>AI、家长与宝贝会话</p></div></div></article>
        <article class="state-card"><img src="actual-screens/11-chat-ai-detail.png" alt="AI 会话详情"><div class="state-copy"><b>13</b><div><h3>会话 · AI 玩伴</h3><p>宝贝与伴伴的消息记录</p></div></div></article>
        <article class="state-card"><img src="actual-screens/12-chat-parent-detail.png" alt="家长会话详情"><div class="state-copy"><b>14</b><div><h3>会话 · 家长沟通</h3><p>文字、语音和留言控制</p></div></div></article>
        <article class="state-card"><img src="actual-screens/04-location-guest.png" alt="定位游客态"><div class="state-copy"><b>15</b><div><h3>定位 · 游客态</h3><p>地图与位置能力预览</p></div></div></article>
        <article class="state-card"><img src="actual-screens/13-location-current.png" alt="设备当前位置"><div class="state-copy"><b>16</b><div><h3>定位 · 当前位置</h3><p>地图、地址和定位参数</p></div></div></article>
      </div>
    </section>

    <section class="flow flow-manage">
      <div class="flow-heading">
        <div>
          <span class="flow-number">04</span>
          <p class="flow-eyebrow">MANAGEMENT & FAMILY</p>
          <h2>管理、资料与家庭共享</h2>
        </div>
        <p>当前管理主页与真实交互弹窗，包含宝贝、卡片、角色、家庭和邀请状态。</p>
      </div>
      <div class="state-grid">
        <article class="state-card"><img src="actual-screens/05-manage-guest.png" alt="管理游客态"><div class="state-copy"><b>17</b><div><h3>管理 · 游客态</h3><p>管理功能的登录前预览</p></div></div></article>
        <article class="state-card"><img src="actual-screens/14-manage-overview.png" alt="管理总览"><div class="state-copy"><b>18</b><div><h3>管理 · 账号总览</h3><p>账号、设备和系统版本</p></div></div></article>
        <article class="state-card"><img src="actual-screens/15-manage-menu.png" alt="管理功能菜单"><div class="state-copy"><b>19</b><div><h3>管理 · 功能列表</h3><p>卡片、角色、家庭和通知</p></div></div></article>
        <article class="state-card"><img src="actual-screens/16-manage-child-modal.png" alt="切换当前宝贝弹窗"><div class="state-copy"><b>20</b><div><h3>宝贝 · 切换资料</h3><p>当前、修改和删除操作</p></div></div></article>
        <article class="state-card"><img src="actual-screens/17-manage-cards-modal.png" alt="我的卡片弹窗"><div class="state-copy"><b>21</b><div><h3>卡片 · 卡片列表</h3><p>卡片名称、UUID 和编辑</p></div></div></article>
        <article class="state-card"><img src="actual-screens/18-manage-role-modal.png" alt="切换 AI 角色弹窗"><div class="state-copy"><b>22</b><div><h3>角色 · AI 角色</h3><p>当前角色和可选角色</p></div></div></article>
        <article class="state-card"><img src="actual-screens/19-manage-family-modal.png" alt="家庭成员弹窗"><div class="state-copy"><b>23</b><div><h3>家庭 · 成员列表</h3><p>主成员、共享成员和邀请</p></div></div></article>
        <article class="state-card"><img src="actual-screens/25-family-invite-valid.png" alt="有效家庭邀请"><div class="state-copy"><b>24</b><div><h3>邀请 · 等待加入</h3><p>有效家庭共享邀请</p></div></div></article>
        <article class="state-card"><img src="actual-screens/26-family-invite-expired.png" alt="过期家庭邀请"><div class="state-copy"><b>25</b><div><h3>邀请 · 已失效</h3><p>过期邀请的禁用状态</p></div></div></article>
        <article class="state-card"><img src="actual-screens/07-family-invite-invalid.png" alt="未登录邀请跳转登录"><div class="state-copy"><b>26</b><div><h3>邀请 · 未登录跳转</h3><p>进入邀请前的登录承接页</p></div></div></article>
      </div>
    </section>

    <footer>
      <span>Generated from the current banban-mini build</span>
      <span>WeChat DevTools screenshots · local fixtures only · 2026-09-09</span>
    </footer>
  </main>
</body>
</html>