首頁 探索 說明
登入
gebadi
/
robot_screen
4
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
分支: master
分支列表 標籤列表
robot_screen
/
迎宾巡逻安防机器人机身屏交互系统详细设计开发文档（一期）.html

迎宾巡逻安防机器人机身屏交互系统详细设计开发文档（一期）.html 77 KB
永久連結 文件歷史 原始文件

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4.   <meta charset="UTF-8" />
    5. 

  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.   <title>迎宾巡逻安防机器人机身屏交互系统详细设计开发文档（一期）</title>
    7. 

  7.   <style>
    8. 

  8.     :root{
    9. 

  9.       --primary:#2f8ee5;--primary2:#20b7c7;--green:#10b981;--orange:#f59e0b;--red:#ef4444;--purple:#7c3aed;
    10. 

  10.       --text:#1f2937;--sub:#4b5563;--muted:#64748b;--line:#e5e7eb;--bg:#f5f8fb;--card:#fff;--tag:#eef7ff;--code:#f8fafc
    11. 

  11.     }
    12. 

  12.     *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.75}
    13. 

  13.     .container{width:1240px;max-width:calc(100vw - 48px);margin:24px auto 60px}.hero{background:linear-gradient(135deg,#e9f8ff 0%,#dff8f5 42%,#f7fbff 100%);color:#0f172a;border:1px solid rgba(47,142,229,.16);border-radius:24px;padding:38px 42px;box-shadow:0 18px 50px rgba(47,142,229,.12);position:relative;overflow:hidden}
    14. 

  14.     .hero:after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(32,183,199,.16)}.hero h1{margin:0 0 12px;font-size:34px;line-height:1.25;position:relative}.hero p{margin:8px 0;color:#334155;font-size:15px;position:relative}.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;position:relative}.chip{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(47,142,229,.18);font-size:13px;color:#1e5f99}
    15. 

  15.     .section{background:var(--card);border-radius:18px;padding:28px 30px;margin-top:20px;box-shadow:0 10px 30px rgba(15,23,42,.06)}h2{margin:0 0 14px;font-size:24px;color:#111827;padding-left:14px;border-left:5px solid var(--primary)}h3{margin:26px 0 10px;font-size:18px;color:#111827}h4{margin:20px 0 8px;font-size:16px;color:#111827}p,li{font-size:14px;color:var(--sub)}ul,ol{margin:8px 0 8px 22px;padding:0}
    16. 

  16.     .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff}.card strong{color:#111827}.tag{display:inline-block;padding:3px 10px;margin-right:8px;margin-bottom:8px;border-radius:999px;background:var(--tag);color:#1f7ace;font-size:12px;border:1px solid #dbeafe}
    17. 

  17.     .warn{border-left:5px solid var(--orange);background:#fffaf0;padding:16px 18px;border-radius:12px;color:#7c5a10;font-size:14px}.danger{border-left:5px solid var(--red);background:#fff5f5;padding:16px 18px;border-radius:12px;color:#8f1d1d;font-size:14px}.ok{border-left:5px solid var(--green);background:#f0fdf4;padding:16px 18px;border-radius:12px;color:#166534;font-size:14px}.note{border-left:5px solid var(--purple);background:#faf5ff;padding:16px 18px;border-radius:12px;color:#6b21a8;font-size:14px}.info{border-left:5px solid var(--primary2);background:#ecfeff;padding:16px 18px;border-radius:12px;color:#155e75;font-size:14px}
    18. 

  18.     table{width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border:1px solid var(--line);table-layout:fixed}th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;font-size:13px;color:var(--sub);word-break:break-word}th{background:#f8fafc;color:#111827;font-weight:600}.toc{columns:2;gap:30px}.toc a{display:block;text-decoration:none;color:var(--primary);padding:3px 0;font-size:14px}.code{background:var(--code);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-family:Consolas,Monaco,monospace;font-size:12px;line-height:1.6;color:#0f172a;white-space:pre-wrap;overflow:auto}.footer{text-align:center;color:#94a3b8;margin-top:20px;font-size:12px}code.inline{background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe;padding:2px 6px;border-radius:6px;font-size:12px}.flow{background:#f8fafc;border:1px dashed #cbd5e1;border-radius:14px;padding:14px 16px;font-family:Consolas,Monaco,monospace;font-size:13px;color:#334155;white-space:pre-wrap}
    19. 

  19.     @media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.toc{columns:1}.container{max-width:calc(100vw - 24px)}.hero{padding:24px}.section{padding:22px}table{display:block;overflow:auto}}
    20. 

  20.   </style>
    21. 

  21. </head>
    22. 

  22. <body>
    23. 

  23. <div class="container">
    24. 

  24.   <div class="hero">
    25. 

  25.     <h1>迎宾巡逻安防机器人机身屏交互系统详细设计开发文档（一期）</h1>
    26. 

  26.     <p>文档用途：作为机器人机身屏前端页面设计、交互流程、Mock 开发、后续接口联调和验收测试的统一开发基线。</p>
    27. 

  27.     <p>文档原则：一期先完成屏幕端前端页面与交互流程，使用 Mock 数据，后续再逐步对接小主机后端、语音服务、身份识别、导航点位、访客登记等接口。</p>
    28. 

  28.     <div class="meta"><span class="chip">技术基线：Vue3 + Vite</span><span class="chip">运行环境：Ubuntu + Chromium Kiosk</span><span class="chip">屏幕基准：1024×768 横屏 8 寸</span><span class="chip">交互方式：10 点触摸 + 语音指令</span></div>
    29. 

  29.   </div>
    30. 

  30. 

  31.   <div class="section"><h2>目录</h2><div class="toc">
    32. 

  32.     <a href="#s1">1. 项目定位与建设目标</a><a href="#s2">2. 运行环境与技术选型</a><a href="#s3">3. 系统边界与职责划分</a><a href="#s4">4. 总体功能架构</a><a href="#s5">5. 主菜单与页面结构</a><a href="#s6">6. 核心业务流程设计</a><a href="#s7">7. 页面详细设计</a><a href="#s8">8. 播放、播报与声音控制规则</a><a href="#s9">9. 语音指令与事件通信设计</a><a href="#s10">10. 输入方式与触摸交互规范</a><a href="#s11">11. UI 视觉与屏幕适配规范</a><a href="#s12">12. Mock 数据与前端开发建议</a><a href="#s13">13. 后续接口设计建议</a><a href="#s14">14. 开发优先级与实施顺序</a><a href="#s15">15. 测试验收要点</a><a href="#s16">16. 安全、隐私与异常兜底</a><a href="#s17">17. 运行部署与现场维护建议</a><a href="#s18">18. 待确认与后续扩展事项</a>
    33. 

  33.   </div></div>
    34. 

  34. 

  35.   <div class="section" id="s1"><h2>1. 项目定位与建设目标</h2>
    36. 

  36.     <p>本系统为<strong>迎宾巡逻安防机器人机身屏交互系统</strong>，运行在机器人本体小主机盒子中，通过 8 寸触摸屏面向访客、现场用户、前台/物业/工作人员提供迎宾展示、访客登记、预约核验、路线引导、通知公告、呼叫工作人员等交互能力。</p>
    37. 

  37.     <div class="ok">屏幕端不是运维后台，不承担素材上传、问答库维护、播放方案配置、日志查询、OTA 升级、账号管理、白名单批量维护等后台管理能力。</div>
    38. 

  38.     <h3>1.1 一期建设目标</h3>
    39. 

  39.     <div class="grid-3">
    40. 

  40.       <div class="card"><strong>展示可用</strong><br>无人交互时播放广告素材、通知公告或欢迎页，形成机器人对外展示窗口。</div>
    41. 

  41.       <div class="card"><strong>交互清晰</strong><br>通过大按钮、大字体和简洁流程完成访客登记、路线引导、通知查看等操作。</div>
    42. 

  42.       <div class="card"><strong>接口可替换</strong><br>一期先用 Mock 数据完成前端，后续接口成熟后平滑替换为真实数据。</div>
    43. 

  43.     </div>
    44. 

  44.     <h3>1.2 一期设计基准</h3>
    45. 

  45.     <ul><li>屏幕尺寸按 1024×768 横屏 8 寸设计，支持 10 点触摸。</li><li>小主机系统为 Ubuntu，前端运行于 Chromium Kiosk 全屏模式。</li><li>语音识别、人脸识别、身份证读卡、TTS、导航等能力由小主机后端或机器人侧服务提供，屏幕端只负责展示与交互。</li><li>路线引导、语音指令、人脸识别、访客登记等接口可先 Mock，后续再接入真实接口。</li></ul>
    46. 

  46.   </div>
    47. 

  47. 

  48.   <div class="section" id="s2"><h2>2. 运行环境与技术选型</h2>
    49. 

  49.     <h3>2.1 推荐技术路线</h3>
    50. 

  50.     <table><thead><tr><th>项目</th><th>建议方案</th><th>说明</th></tr></thead><tbody>
    51. 

  51.       <tr><td>产品形态</td><td>HTML5 机器人机身屏应用</td><td>对外可理解为 H5 屏幕端应用，运行于浏览器全屏环境。</td></tr>
    52. 

  52.       <tr><td>开发框架</td><td>Vue3 + Vite</td><td>适合组件化开发、路由管理、状态管理和后续接口联调。</td></tr>
    53. 

  53.       <tr><td>状态管理</td><td>Pinia</td><td>管理机器人状态、播放状态、语音指令、全局弹窗、用户输入等。</td></tr>
    54. 

  54.       <tr><td>路由</td><td>Vue Router</td><td>管理待机页、主菜单、访客登记、路线引导、通知公告等页面。</td></tr>
    55. 

  55.       <tr><td>运行方式</td><td>Chromium Kiosk</td><td>Ubuntu 开机后自动全屏打开本地 screen 地址。</td></tr>
    56. 

  56.       <tr><td>部署方式</td><td>Nginx 托管静态文件</td><td>Vue3 打包后生成 dist 静态文件，部署到小主机本地目录。</td></tr>
    57. 

  57.     </tbody></table>
    58. 

  58.     <h3>2.2 Vue3 与 HTML5 的关系</h3>
    59. 

  59.     <div class="info">Vue3 并不是和 HTML5 二选一。Vue3 最终打包产物仍是 HTML、CSS、JavaScript 静态文件。推荐表述为：本系统采用 Vue3 开发 HTML5 机身屏应用。</div>
    60. 

  60.     <h3>2.3 更新部署方式</h3>
    61. 

  61.     <div class="flow">开发阶段：
    62. 

  62. 编写 Vue3 源码 → npm run build → 生成 dist 静态文件
    63. 

  63. 

  64. 部署阶段：
    65. 

  65. 上传 dist.zip → 解压覆盖 /usr/share/nginx/html/screen → 刷新或重启 Chromium → 完成更新
    66. 

  66. 

  67. 后续产品化：
    68. 

  68. 可将 screen-ui-vX.X.X.zip 纳入运维端 OTA 升级模块，支持备份、覆盖、刷新和失败回滚。</div>
    69. 

  69.   </div>
    70. 

  70. 

  71.   <div class="section" id="s3"><h2>3. 系统边界与职责划分</h2>
    72. 

  72.     <h3>3.1 屏幕端负责内容</h3>
    73. 

  73.     <div><span class="tag">待机展示</span><span class="tag">素材播放</span><span class="tag">播报内容展示</span><span class="tag">语音指令响应</span><span class="tag">访客登记</span><span class="tag">预约核验</span><span class="tag">身份证读取交互</span><span class="tag">人脸识别结果展示</span><span class="tag">路线引导前端流程</span><span class="tag">通知公告展示</span><span class="tag">呼叫工作人员占位</span><span class="tag">全局状态提示</span><span class="tag">隐藏系统信息页</span></div>
    74. 

  74.     <h3>3.2 屏幕端不负责内容</h3>
    75. 

  75.     <ul><li>不负责人脸采集、人脸识别算法、人脸比对。</li><li>不负责身份证读卡器底层驱动和 SDK 调用。</li><li>不负责 TTS 合成能力和语音对话能力。</li><li>不负责真实导航规划、路径控制、巡逻任务控制。</li><li>不负责运维后台管理能力，如素材上传、播放方案编辑、问答库维护、白名单导入、OTA、日志中心等。</li></ul>
    76. 

  76.     <h3>3.3 与其他系统的关系</h3>
    77. 

  77.     <table><thead><tr><th>系统/服务</th><th>负责内容</th><th>屏幕端使用方式</th></tr></thead><tbody>
    78. 

  78.       <tr><td>运维端 Web 管理系统</td><td>欢迎语、素材、播放方案、播报内容、播报任务、访客记录、预约记录、白名单、系统配置等管理。</td><td>屏幕端读取或消费运维端配置结果，不重复建设后台管理页面。</td></tr>
    79. 

  79.       <tr><td>小主机后端服务</td><td>接口聚合、语音指令接收、播报任务调度、TTS 调用、身份证读卡接口、人脸识别结果转发、机器人状态接口等。</td><td>屏幕前端通过 HTTP 轮询或接口调用与其通信。</td></tr>
    80. 

  80.       <tr><td>语音服务</td><td>语音识别、语音对话、TTS 播放或播报能力。</td><td>语音识别结果先上报小主机后端，再由屏幕端获取并执行动作。</td></tr>
    81. 

  81.       <tr><td>机器人主控/导航服务</td><td>点位列表、导航任务、运动控制、状态采集、巡逻任务等。</td><td>一期路线引导先 Mock，后续接入真实点位和导航状态接口。</td></tr>
    82. 

  82.     </tbody></table>
    83. 

  83.   </div>
    84. 

  84. 

  85.   <div class="section" id="s3-1"><h2>3.4 典型运行状态与页面状态机</h2>
    86. 

  86.     <p>屏幕端应围绕“无人待机、用户交互、业务办理、插播播报、异常提示”几个状态进行设计，避免页面之间随意跳转导致流程混乱。</p>
    87. 

  87.     <table><thead><tr><th>状态</th><th>触发来源</th><th>页面表现</th><th>退出条件</th></tr></thead><tbody>
    88. 

  88.       <tr><td>待机播放</td><td>系统启动、无操作超时、业务结束</td><td>播放素材广告；无素材时显示欢迎页。</td><td>触摸屏幕、语音唤醒、识别结果、播报任务、异常事件。</td></tr>
    89. 

  89.       <tr><td>主菜单交互</td><td>用户触摸或语音打开菜单</td><td>展示访客登记、路线引导、通知公告、呼叫工作人员。</td><td>选择功能、返回待机、无操作超时。</td></tr>
    90. 

  90.       <tr><td>业务办理</td><td>进入访客登记、预约核验、路线引导等流程</td><td>展示表单、确认页、状态页、结果页。</td><td>业务完成、用户取消、超时返回、异常中断。</td></tr>
    91. 

  91.       <tr><td>播报插播</td><td>播报任务到时</td><td>暂停素材，显示播报内容文字，配合 TTS 语音播放。</td><td>播报结束后恢复原待机播放状态。</td></tr>
    92. 

  92.       <tr><td>异常提示</td><td>低电量、故障、网络异常、服务不可用</td><td>全局弹窗或全屏提示，文案应面向访客，避免技术化。</td><td>异常解除、用户确认、系统自动恢复。</td></tr>
    93. 

  93.     </tbody></table>
    94. 

  94.   </div>
    95. 

  95. 

  96.   <div class="section" id="s4"><h2>4. 总体功能架构</h2>
    97. 

  97.     <div class="grid-4">
    98. 

  98.       <div class="card"><strong>待机展示</strong><ul><li>广告素材播放</li><li>默认欢迎页</li><li>通知/公告插播</li><li>无操作自动返回</li></ul></div>
    99. 

  99.       <div class="card"><strong>主菜单</strong><ul><li>访客登记</li><li>路线引导</li><li>通知公告</li><li>呼叫工作人员</li></ul></div>
    100. 

  100.       <div class="card"><strong>访客登记</strong><ul><li>预约到访</li><li>现场登记</li><li>身份证读取</li><li>手机号查询</li></ul></div>
    101. 

  101.       <div class="card"><strong>识别结果</strong><ul><li>人脸识别结果</li><li>预约用户展示</li><li>白名单结果展示</li><li>识别失败引导</li></ul></div>
    102. 

  102.       <div class="card"><strong>路线引导</strong><ul><li>目的地列表</li><li>目的地确认</li><li>模拟导航中</li><li>到达提示</li></ul></div>
    103. 

  103.       <div class="card"><strong>语音响应</strong><ul><li>接收语音指令</li><li>页面跳转</li><li>识别文本展示</li><li>状态切换</li></ul></div>
    104. 

  104.       <div class="card"><strong>全局状态</strong><ul><li>电量</li><li>网络</li><li>充电</li><li>异常提示</li></ul></div>
    105. 

  105.       <div class="card"><strong>系统信息</strong><ul><li>隐藏入口</li><li>设备编号</li><li>IP/版本</li><li>刷新页面</li></ul></div>
    106. 

  106.     </div>
    107. 

  107.   </div>
    108. 

  108. 

  109.   <div class="section" id="s5"><h2>5. 主菜单与页面结构</h2>
    110. 

  110.     <h3>5.1 一期主菜单</h3>
    111. 

  111.     <table><thead><tr><th>菜单入口</th><th>页面职责</th><th>一期处理方式</th><th>优先级</th></tr></thead><tbody>
    112. 

  112.       <tr><td>访客登记</td><td>进入预约到访或现场登记流程，支持身份证读取、手机号查询、手动填写等。</td><td>正式前端流程 + Mock 数据</td><td>P0</td></tr>
    113. 

  113.       <tr><td>路线引导</td><td>选择目的地，展示引导流程和导航状态。</td><td>正式前端流程 + Mock 数据</td><td>P0</td></tr>
    114. 

  114.       <tr><td>通知公告</td><td>展示运维端播报内容中的通知/公告类内容。</td><td>Mock 列表与详情，后续对接播报内容接口</td><td>P0</td></tr>
    115. 

  115.       <tr><td>呼叫工作人员</td><td>为访客提供求助入口。</td><td>保留按钮和占位交互，真实方式后续确认</td><td>P1</td></tr>
    116. 

  116.     </tbody></table>
    117. 

  117.     <h4>5.1.1 当前主菜单页面设计收口说明</h4>
    118. 

  118.     <ul>
    119. 

  119.       <li>主菜单页已按“上方欢迎引导 + 下方 2×2 大触摸入口”的结构进行设计，不再采用左右 Dashboard 布局或后台卡片式布局。</li>
    120. 

  120.       <li>上方欢迎引导区仅保留主标题和副标题，避免三层文案造成视觉负担。</li>
    121. 

  121.       <li>四个入口统一为大按钮式服务入口，整张卡片均可点击，不再显示每张卡片右下角小箭头或“点击进入”分割栏。</li>
    122. 

  122.       <li>图标采用内联 SVG 方式实现，并保留彩色渐变图标底座；后续如需统一图标规范，可替换为同一套线性图标库的 SVG。</li>
    123. 

  123.       <li>左下角“返回待机”采用轻量悬浮胶囊按钮，不使用整条底部操作栏，以减少页面原型感。</li>
    124. 

  124.     </ul>
    125. 

  125.     <div class="note">业务咨询模块取消，不作为主菜单入口。机器人介绍不作为一级菜单，可通过待机素材、欢迎页素材或后续主题内容体现。</div>
    126. 

  126.     <h3>5.2 页面结构建议</h3>
    127. 

  127.     <table><thead><tr><th>页面</th><th>路由建议</th><th>说明</th></tr></thead><tbody>
    128. 

  128.       <tr><td>待机展示页</td><td>/idle</td><td>无人交互时的默认页面，播放素材或显示欢迎页。</td></tr>
    129. 

  129.       <tr><td>主菜单页</td><td>/menu</td><td>触摸或语音唤醒后展示四个主入口。</td></tr>
    130. 

  130.       <tr><td>访客登记首页</td><td>/visitor</td><td>选择预约到访或现场登记。</td></tr>
    131. 

  131.       <tr><td>预约核验页</td><td>/visitor/appointment</td><td>支持身份证读取和手机号查询。</td></tr>
    132. 

  132.       <tr><td>预约确认页</td><td>/visitor/appointment-confirm</td><td>展示预约信息，用户确认后生成访客记录。</td></tr>
    133. 

  133.       <tr><td>现场登记页</td><td>/visitor/walk-in</td><td>身份证读取填充或手动填写访客信息。</td></tr>
    134. 

  134.       <tr><td>登记成功页</td><td>/visitor/success</td><td>显示登记成功、欢迎语和后续指引。</td></tr>
    135. 

  135.       <tr><td>识别结果页</td><td>/recognition/result</td><td>根据人脸识别结果展示预约用户、白名单人员或未识别结果。</td></tr>
    136. 

  136.       <tr><td>路线引导页</td><td>/navigation</td><td>展示目的地分类和地点列表。</td></tr>
    137. 

  137.       <tr><td>导航状态页</td><td>/navigation/status</td><td>展示模拟导航中、到达、取消等状态。</td></tr>
    138. 

  138.       <tr><td>通知公告页</td><td>/notice</td><td>展示通知公告列表和详情。</td></tr>
    139. 

  139.       <tr><td>呼叫工作人员页</td><td>/call-staff</td><td>保留入口，显示占位提示。</td></tr>
    140. 

  140.       <tr><td>隐藏系统信息页</td><td>/system-info</td><td>长按 Logo 或指定区域进入，优先级低。</td></tr>
    141. 

  141.     </tbody></table>
    142. 

  142.   </div>
    143. 

  143. 

  144.   <div class="section" id="s6"><h2>6. 核心业务流程设计</h2>
    145. 

  145.     <h3>6.1 待机展示流程</h3>
    146. 

  146.     <div class="flow">进入屏幕系统
    147. 

  147. ↓
    148. 

  148. 加载屏幕配置、主题配置、播放方案、机器人状态
    149. 

  149. ↓
    150. 

  150. 判断是否存在启用的播放方案
    151. 

  151. ├─ 有播放方案：播放素材广告 / 图片 / 视频
    152. 

  152. └─ 无播放方案：显示默认欢迎页
    153. 

  153. ↓
    154. 

  154. 用户触摸屏幕或语音唤醒
    155. 

  155. ↓
    156. 

  156. 进入主菜单页</div>
    157. 

  157.     <h3>6.2 播报内容插播流程</h3>
    158. 

  158.     <div class="flow">小主机后端判断播报任务到时
    159. 

  159. ↓
    160. 

  160. 后端读取播报内容文本
    161. 

  161. ↓
    162. 

  162. 后端判断是否已有可用 MP3
    163. 

  163. ├─ 已有且未失效：复用 MP3
    164. 

  164. └─ 没有或已失效：调用第三方 TTS 生成 MP3
    165. 

  165. ↓
    166. 

  166. current 接口返回 broadcasting=true、title、content、audioUrl、audioDuration
    167. 

  167. ↓
    168. 

  168. 屏幕前端轮询获取当前播报状态
    169. 

  169. ↓
    170. 

  170. 暂停当前图片轮播或视频播放
    171. 

  171. ↓
    172. 

  172. 显示播报浮层
    173. 

  173. ↓
    174. 

  174. 屏幕端播放 audioUrl 对应 MP3
    175. 

  175. ↓
    176. 

  176. audio ended 或 audio error
    177. 

  177. ↓
    178. 

  178. 隐藏播报浮层
    179. 

  179. ↓
    180. 

  180. 恢复原待机播放状态</div>
    181. 

  181.     <h3>6.3 预约到访流程</h3>
    182. 

  182.     <div class="flow">访客登记
    183. 

  183. ↓
    184. 

  184. 选择“预约到访”
    185. 

  185. ↓
    186. 

  186. 选择核验方式：身份证读取 / 手机号查询
    187. 

  187. ↓
    188. 

  188. 查询预约记录
    189. 

  189. ├─ 查询成功：展示预约信息确认页
    190. 

  190. └─ 查询失败：提示未查询到预约，可转现场登记
    191. 

  191. ↓
    192. 

  192. 访客确认预约信息
    193. 

  193. ↓
    194. 

  194. 提交登记
    195. 

  195. ↓
    196. 

  196. 登记成功</div>
    197. 

  197.     <h3>6.4 现场登记流程</h3>
    198. 

  198.     <div class="flow">访客登记
    199. 

  199. ↓
    200. 

  200. 选择“现场登记”
    201. 

  201. ↓
    202. 

  202. 选择身份证读取或手动填写
    203. 

  203. ↓
    204. 

  204. 填写/回填访客姓名、手机号、身份证号、来访单位、被访人、来访事由
    205. 

  205. ↓
    206. 

  206. 提交登记前确认
    207. 

  207. ↓
    208. 

  208. 提交成功
    209. 

  209. ↓
    210. 

  210. 显示登记成功页</div>
    211. 

  211.     <div class="note">现场登记页字段顺序：访客姓名 → 手机号码 → 身份证号 → 来访单位 → 被访人 → 来访事由。被访部门不在机身屏现场登记页展示。</div>
    212. 

  212.     <h3>6.5 人脸识别结果进入流程</h3>
    213. 

  213.     <div class="flow">机器人侧完成人脸识别
    214. 

  214. ↓
    215. 

  215. 识别结果上报小主机后端
    216. 

  216. ↓
    217. 

  217. 屏幕前端轮询获取识别结果
    218. 

  218. ↓
    219. 

  219. 根据结果展示页面
    220. 

  220. ├─ 预约访客：进入预约确认页
    221. 

  221. ├─ 白名单人员：展示欢迎/通行提示
    222. 

  222. └─ 未识别人员：引导进入访客登记</div>
    223. 

  223.     <h3>6.6 语音指令响应流程</h3>
    224. 

  224.     <div class="flow">语音服务识别用户指令
    225. 

  225. ↓ HTTP
    226. 

  226. 小主机后端接收识别结果
    227. 

  227. ↓
    228. 

  228. 屏幕前端定时轮询最新指令
    229. 

  229. ↓
    230. 

  230. 执行动作
    231. 

  231. ├─ 打开访客登记
    232. 

  232. ├─ 打开路线引导
    233. 

  233. ├─ 打开通知公告
    234. 

  234. ├─ 打开主菜单
    235. 

  235. └─ 显示提示信息</div>
    236. 

  236.   </div>
    237. 

  237. 

  238.   <div class="section" id="s7"><h2>7. 页面详细设计</h2>
    239. 

  239.     <h3>7.1 待机展示页</h3>
    240. 

  240.     <table><thead><tr><th>项</th><th>详细设计</th></tr></thead><tbody>
    241. 

  241.       <tr><td>页面目标</td><td>无人操作时作为机器人对外展示窗口，播放素材广告、公告内容或显示默认欢迎页。</td></tr>
    242. 

  242.       <tr><td>主要内容</td><td>图片素材、视频素材、欢迎标题、欢迎副标题、Logo、当前时间、机器人简要状态。</td></tr>
    243. 

  243.       <tr><td>交互方式</td><td>触摸任意区域或语音唤醒后进入主菜单。</td></tr>
    244. 

  244.       <tr><td>兜底逻辑</td><td>有启用播放方案且存在可播放素材时进入播放方案模式；无播放方案、播放方案禁用或素材为空时显示默认欢迎页。</td></tr>
    245. 

  245.       <tr><td>无操作规则</td><td>其他页面长时间无操作后自动返回待机页。</td></tr>
    246. 

  246.     </tbody></table>
    247. 

  247.     <h4>待机页当前实现收口说明</h4>
    248. 

  248.     <ul>
    249. 

  249.       <li>待机页分为两种明确模式：默认欢迎模式与播放方案模式。</li>
    250. 

  250.       <li>默认欢迎模式使用“背景图 + 前端动态文字叠加”的方式实现，机器人名称、欢迎语、副标题、按钮、时间、状态等内容均由前端或后续主题配置动态渲染。</li>
    251. 

  251.       <li>默认欢迎背景图仅作为氛围底图，不包含文字、按钮、Logo 等 UI 元素，便于后续通过运维端主题配置替换。</li>
    252. 

  252.       <li>播放方案模式以图片/视频素材为主视觉，状态、时间、触摸提示等仅作为轻量浮层展示。</li>
    253. 

  253.       <li>播放方案模式中，图片按配置时长自动轮播，视频优先按 ended 事件切换；素材加载失败时跳过当前素材。</li>
    254. 

  254.       <li>开发阶段保留欢迎模式与播放方案模式的调试切换入口，正式上线时应通过配置隐藏。</li>
    255. 

  255.     </ul>
    256. 

  256.     <h4>待机素材播放补充规则</h4>
    257. 

  257.     <ul><li>图片素材建议支持展示时长、排序、启停状态、适用屏幕方向、填充方式。</li><li>视频素材建议支持静音状态、音量、循环播放、播放失败跳过、播放完成自动切下一条。</li><li>素材填充方式建议支持 cover 与 contain：cover 适合全屏沉浸展示，contain 适合完整展示但可能留边。</li><li>本地网络或素材加载异常时，应自动跳过当前素材并展示下一条；全部素材不可用时回退欢迎页。</li><li>后续可考虑素材预缓存到小主机本地，降低网络波动对待机播放的影响。</li></ul>
    258. 

  258.     <h3>7.2 主菜单页</h3>
    259. 

  259.     <table><thead><tr><th>项</th><th>详细设计</th></tr></thead><tbody>
    260. 

  260.       <tr><td>页面目标</td><td>提供四个核心入口，方便访客快速选择服务。</td></tr>
    261. 

  261.       <tr><td>菜单入口</td><td>访客登记、路线引导、通知公告、呼叫工作人员。</td></tr>
    262. 

  262.       <tr><td>布局建议</td><td>1024×768 横屏下采用“上方欢迎引导 + 下方 2×2 大触摸入口”的布局，左下角保留轻量悬浮返回待机按钮。</td></tr>
    263. 

  263.       <tr><td>状态展示</td><td>顶部显示 Logo、时间、电量、网络、当前工作状态。</td></tr>
    264. 

  264.       <tr><td>语音支持</td><td>语音指令“我要登记”“我要去某地”“查看通知”等可直接跳转对应页面。</td></tr>
    265. 

  265.     </tbody></table>
    266. 

  266.     <h4>主菜单页当前实现收口说明</h4>
    267. 

  267.     <ul>
    268. 

  268.       <li>主菜单页已取消左右分栏式引导区，统一改为上下结构，使页面更贴近机器人机身屏的服务选择页。</li>
    269. 

  269.       <li>页面顶部保留 StatusBar，主内容区居中展示标题“请选择需要的服务”和辅助说明“触摸下方入口办理业务，也可以直接说出您的需求”。</li>
    270. 

  270.       <li>四个服务入口均为大面积触摸按钮，入口本身即代表可点击，不额外展示“点击进入”文字或右下角箭头。</li>
    271. 

  271.       <li>按钮图标采用彩色渐变底座 + 白色线性 SVG 图标，当前语义为：访客登记、定位导航、公告喇叭、电话呼叫。</li>
    272. 

  272.       <li>若现场屏幕肉眼显示比例与系统截图不一致，应优先排查外接屏分辨率、镜像显示、浏览器缩放和屏幕硬件拉伸，不建议通过前端强行修正比例。</li>
    273. 

  273.     </ul>
    274. 

  274.     <h3>7.3 访客登记页面</h3>
    275. 

  275.     <table><thead><tr><th>模块</th><th>详细设计</th></tr></thead><tbody>
    276. 

  276.       <tr><td>访客登记首页</td><td>展示预约到访、现场登记两个入口。</td></tr>
    277. 

  277.       <tr><td>预约到访</td><td>支持身份证读取查询、手机号查询；人脸识别命中预约用户时可直接进入预约确认页。</td></tr>
    278. 

  278.       <tr><td>现场登记</td><td>支持身份证读取自动填充和手动填写。</td></tr>
    279. 

  279.       <tr><td>登记字段</td><td>访客姓名、手机号、身份证号、来访单位、被访人、来访事由。</td></tr>
    280. 

  280.       <tr><td>输入方式</td><td>手机号、身份证号使用前端内置数字键盘；访客姓名、来访单位、被访人使用文本输入弹窗（依赖系统软键盘）；来访事由使用枚举选项弹窗。</td></tr>
    281. 

  281.       <tr><td>超时规则</td><td>登记页面长时间无操作后清空敏感信息并返回待机。</td></tr>
    282. 

  282.     </tbody></table>
    283. 

  283.     <h4>7.3.1 现场登记页字段说明</h4>
    284. 

  284.     <table><thead><tr><th>字段</th><th>类型</th><th>说明</th></tr></thead><tbody>
    285. 

  285.       <tr><td>访客姓名</td><td>文本输入</td><td>依赖系统软键盘，不做枚举。</td></tr>
    286. 

  286.       <tr><td>手机号码</td><td>数字输入</td><td>前端 NumericKeyboard，11 位，格式校验。</td></tr>
    287. 

  287.       <tr><td>身份证号</td><td>数字输入</td><td>前端 NumericKeyboard，支持末位 X，选填。</td></tr>
    288. 

  288.       <tr><td>来访单位</td><td>文本输入</td><td>依赖系统软键盘，不做枚举选择，用于填写访客来自的公司、单位、团队、施工队或客户机构等。</td></tr>
    289. 

  289.       <tr><td>被访人</td><td>文本输入</td><td>依赖系统软键盘，不做枚举。被访部门不在机身屏现场登记页展示。</td></tr>
    290. 

  290.       <tr><td>来访事由</td><td>枚举选择</td><td>枚举选项弹窗，不做自由文本输入。</td></tr>
    291. 

  291.     </tbody></table>
    292. 

  292.     <h4>7.3.2 预约确认页字段规则</h4>
    293. 

  293.     <table><thead><tr><th>字段</th><th>是否可编辑</th><th>说明</th></tr></thead><tbody>
    294. 

  294.       <tr><td>预约单号</td><td>不可修改</td><td>系统自动生成。</td></tr>
    295. 

  295.       <tr><td>访客姓名</td><td>不可修改</td><td>来源于预约数据。</td></tr>
    296. 

  296.       <tr><td>身份证号</td><td>不可修改</td><td>来源于预约数据或读取。</td></tr>
    297. 

  297.       <tr><td>手机号码</td><td>不可修改</td><td>来源于预约数据。</td></tr>
    298. 

  298.       <tr><td>被访人</td><td>可修改</td><td>通过蓝色标记和编辑图标提示可点击编辑。被访部门不在预约确认页展示。</td></tr>
    299. 

  299.       <tr><td>预约时间</td><td>不可修改</td><td>来源于预约数据。</td></tr>
    300. 

  300.       <tr><td>来访事由</td><td>可修改</td><td>通过蓝色标记和编辑图标提示可点击编辑，枚举选项弹窗。</td></tr>
    301. 

  301.     </tbody></table>
    302. 

  302.     <h4>7.3.3 登记成功页字段规则</h4>
    303. 

  303.     <table><thead><tr><th>字段</th><th>说明</th></tr></thead><tbody>
    304. 

  304.       <tr><td>访客姓名</td><td>展示登记的访客姓名。</td></tr>
    305. 

  305.       <tr><td>手机号码</td><td>展示登记的手机号，脱敏显示，如 138****0000。不展示完整号码。</td></tr>
    306. 

  306.       <tr><td>被访人</td><td>展示登记的被访人。</td></tr>
    307. 

  307.       <tr><td>登记时间</td><td>展示提交登记的时间。</td></tr>
    308. 

  308.     </tbody></table>
    309. 

  309.     <div class="note">登记成功页不展示身份证号，不展示来访单位（来访单位为后台登记字段，不在成功结果页展示）。成功页展示"登记成功"标题、欢迎语和后续指引文案，提供"返回待机"按钮。生产环境可 10 秒后自动返回待机页；开发环境不自动跳转，方便调试。</div>
    310. 

  310.     <h3>7.4 路线引导页面</h3>
    311. 

  311.     <table><thead><tr><th>模块</th><th>详细设计</th></tr></thead><tbody>
    312. 

  312.       <tr><td>页面目标</td><td>让访客选择目的地，展示机器人带路或路线引导流程。</td></tr>
    313. 

  313.       <tr><td>一期处理</td><td>正式前端版，数据使用 Mock，后续替换真实点位和导航接口。</td></tr>
    314. 

  314.       <tr><td>页面内容</td><td>目的地分类、目的地列表、常用地点、目的地确认、导航中状态、到达提示。</td></tr>
    315. 

  315.       <tr><td>操作按钮</td><td>开始引导、取消引导、返回首页。</td></tr>
    316. 

  316.       <tr><td>异常提示</td><td>接口未接入或导航不可用时，提示“路线引导功能正在接入中”。</td></tr>
    317. 

  317.     </tbody></table>
    318. 

  318.     <h3>7.5 通知公告页面</h3>
    319. 

  319.     <table><thead><tr><th>模块</th><th>详细设计</th></tr></thead><tbody>
    320. 

  320.       <tr><td>数据来源</td><td>复用运维端播报内容管理中的通知、公告、提示类内容。</td></tr>
    321. 

  321.       <tr><td>页面形式</td><td>公告列表 + 公告详情，支持大字体展示。</td></tr>
    322. 

  322.       <tr><td>播放关系</td><td>定时播报任务触发时，可暂停素材广告并插播公告文字和语音。</td></tr>
    323. 

  323.       <tr><td>一期处理</td><td>先使用 Mock 数据展示公告列表和详情。</td></tr>
    324. 

  324.     </tbody></table>
    325. 

  325.     <h3>7.6 呼叫工作人员页面</h3>
    326. 

  326.     <table><thead><tr><th>模块</th><th>详细设计</th></tr></thead><tbody>
    327. 

  327.       <tr><td>页面目标</td><td>为访客提供求助入口。</td></tr>
    328. 

  328.       <tr><td>一期处理</td><td>保留入口和占位交互，真实呼叫方式后续确认。</td></tr>
    329. 

  329.       <tr><td>提示文案</td><td>可显示“已为您通知工作人员，请稍候”或“呼叫功能正在接入中”。</td></tr>
    330. 

  330.       <tr><td>后续扩展</td><td>可接入运维端通知、主控平台事件、语音通话或视频通话。</td></tr>
    331. 

  331.     </tbody></table>
    332. 

  332.     <h3>7.7 隐藏系统信息页</h3>
    333. 

  333.     <table><thead><tr><th>模块</th><th>详细设计</th></tr></thead><tbody>
    334. 

  334.       <tr><td>入口方式</td><td>长按 Logo 或指定区域 5 秒进入。</td></tr>
    335. 

  335.       <tr><td>页面内容</td><td>设备编号、机器人编号、本地 IP、前端版本、后端服务状态、网络状态、当前时间。</td></tr>
    336. 

  336.       <tr><td>操作按钮</td><td>刷新页面、返回待机。重启类操作暂不开放。</td></tr>
    337. 

  337.       <tr><td>优先级</td><td>P2，非一期核心功能。</td></tr>
    338. 

  338.     </tbody></table>
    339. 

  339.   </div>
    340. 

  340. 

  341.   <div class="section" id="s8"><h2>8. 播放、播报与声音控制规则</h2>
    342. 

  342.     <h3>8.1 内容优先级</h3>
    343. 

  343.     <table><thead><tr><th>优先级</th><th>内容类型</th><th>处理规则</th></tr></thead><tbody>
    344. 

  344.       <tr><td>最高</td><td>紧急异常 / 告警提示</td><td>立即打断当前页面，展示全局异常提示。</td></tr>
    345. 

  345.       <tr><td>高</td><td>播报内容</td><td>暂停素材广告，展示播报文字，后端生成 MP3，屏幕端播放。</td></tr>
    346. 

  346.       <tr><td>普通</td><td>素材广告</td><td>作为待机主内容播放图片或视频。</td></tr>
    347. 

  347.       <tr><td>最低</td><td>欢迎页</td><td>无播放方案时的兜底页面。</td></tr>
    348. 

  348.     </tbody></table>
    349. 

  349.     <h3>8.2 声音来源与职责</h3>
    350. 

  350.     <table><thead><tr><th>声音来源</th><th>归属</th><th>说明</th></tr></thead><tbody>
    351. 

  351.       <tr><td>视频素材声音</td><td>屏幕端</td><td>视频播放时可通过喇叭输出，屏幕端需要支持静音和音量控制。</td></tr>
    352. 

  352.       <tr><td>播报内容语音</td><td>屏幕端播放后端 MP3</td><td>数据库播报内容以文字为主；一期由后端调用第三方 TTS 生成并缓存 MP3 文件，屏幕端通过当前播报状态接口获取 audioUrl 后进行播放，同时展示播报文字和状态。</td></tr>
    353. 

  353.       <tr><td>登记成功/导航到达/异常提示音</td><td>屏幕端或本地服务</td><td>可根据后续实现选择前端音频文件播放或后端统一播放。</td></tr>
    354. 

  354.       <tr><td>语音对话声音</td><td>语音服务</td><td>不归屏幕系统控制，屏幕端只展示识别结果或跳转页面。</td></tr>
    355. 

  355.     </tbody></table>
    356. 

  356.     <h3>8.3 音量与静音控制</h3>
    357. 

  357.     <ul><li>屏幕端应提供静音/取消静音和音量调节能力，优先作用于视频素材和前端提示音。</li><li>当播报内容或语音对话发生时，屏幕端应暂停或静音当前视频素材。</li><li>播报结束后，屏幕端恢复素材播放状态。</li><li>语音服务和浏览器同时输出到同一喇叭时，应由小主机后端协调音频抢占策略。</li></ul>
    358. 

  358.     <h3>8.4 播报插播运行规则</h3>
    359. 

  359.     <ul>
    360. 

  360.       <li>播报内容优先级高于素材广告和默认欢迎页。</li>
    361. 

  361.       <li>播报任务到时后，后端负责调用第三方 TTS 生成或复用 MP3 文件，并通过当前播报状态接口返回 audioUrl；屏幕端负责播放该 MP3，并通过 audio ended 事件感知播报结束。</li>
    362. 

  362.       <li>播报开始时，屏幕端暂停当前图片轮播或视频播放，并播放播报 MP3。</li>
    363. 

  363.       <li>播报播放期间，屏幕端显示播报浮层。</li>
    364. 

  364.       <li>播报 MP3 播放结束后，屏幕端隐藏播报浮层，并恢复原素材播放状态。</li>
    365. 

  365.       <li>播报插播不应重置当前播放方案和当前素材索引。</li>
    366. 

  366.       <li>如果 MP3 播放失败，屏幕端应记录 warning 日志，并恢复素材播放。</li>
    367. 

  367.       <li>一期只在待机页执行播报插播，不强制打断访客登记、路线引导等业务办理页面。</li>
    368. 

  368.     </ul>
    369. 

  369.   </div>
    370. 

  370. 

  371.   <div class="section" id="s9"><h2>9. 语音指令与事件通信设计</h2>
    372. 

  372.     <h3>9.1 一期通信链路</h3>
    373. 

  373.     <div class="flow">语音服务识别指令
    374. 

  374. ↓ HTTP
    375. 

  375. 小主机后端接收并保存最新指令
    376. 

  376. ↓
    377. 

  377. 屏幕前端每 0.5 秒或 1 秒轮询 /screen/command/latest
    378. 

  378. ↓
    379. 

  379. 屏幕前端执行跳转或状态切换
    380. 

  380. ↓
    381. 

  381. 屏幕前端回执 /screen/command/ack</div>
    382. 

  382.     <h3>9.2 指令类型建议</h3>
    383. 

  383.     <table><thead><tr><th>指令类型</th><th>示例</th><th>屏幕动作</th></tr></thead><tbody>
    384. 

  384.       <tr><td>OPEN_PAGE</td><td>打开访客登记</td><td>跳转 /visitor</td></tr>
    385. 

  385.       <tr><td>OPEN_MENU</td><td>打开菜单</td><td>跳转 /menu</td></tr>
    386. 

  386.       <tr><td>SHOW_RECOGNITION_RESULT</td><td>人脸识别结果</td><td>跳转识别结果页或预约确认页</td></tr>
    387. 

  387.       <tr><td>START_BROADCAST</td><td>开始播报通知</td><td>暂停素材，展示播报内容</td></tr>
    388. 

  388.       <tr><td>END_BROADCAST</td><td>播报结束</td><td>恢复待机播放</td></tr>
    389. 

  389.       <tr><td>SHOW_ALERT</td><td>低电量/故障</td><td>显示全局提示</td></tr>
    390. 

  390.     </tbody></table>
    391. 

  391.     <div class="note">一期采用 HTTP 轮询，后续可升级为 WebSocket 或 SSE，以减少延迟并提升实时性。</div>
    392. 

  392.   </div>
    393. 

  393. 

  394.   <div class="section" id="s10"><h2>10. 输入方式与触摸交互规范</h2>
    395. 

  395.     <h3>10.1 输入策略</h3>
    396. 

  396.     <table><thead><tr><th>输入内容</th><th>推荐方式</th><th>说明</th></tr></thead><tbody>
    397. 

  397.       <tr><td>手机号</td><td>前端内置数字键盘</td><td>11 位手机号输入，支持清空、删除、确认。</td></tr>
    398. 

  398.       <tr><td>身份证号</td><td>前端内置数字键盘 + X</td><td>支持 18 位身份证号和末位 X，可选填。</td></tr>
    399. 

  399.       <tr><td>访客姓名</td><td>文本输入弹窗 + 系统软键盘</td><td>点击字段弹出文本输入弹窗，依赖 Ubuntu 系统软键盘。</td></tr>
    400. 

  400.       <tr><td>来访单位</td><td>文本输入弹窗 + 系统软键盘</td><td>文本输入弹窗，依赖系统软键盘，不做枚举选择。</td></tr>
    401. 

  401.       <tr><td>被访人</td><td>文本输入弹窗 + 系统软键盘</td><td>文本输入弹窗，依赖系统软键盘。被访部门不在机身屏现场登记页展示。</td></tr>
    402. 

  402.       <tr><td>来访事由</td><td>枚举选项弹窗</td><td>预置选项弹窗（商务洽谈、面试应聘、快递/外卖、设备维修、探亲访友、咨询业务、其他事宜），不做自由文本输入。</td></tr>
    403. 

  403.     </tbody></table>
    404. 

  404.     <h3>10.2 防误触与超时规则</h3>
    405. 

  405.     <ul><li>长时间无操作自动返回待机页，建议默认 60 秒，可配置。</li><li>访客登记、身份证读取、手机号查询等页面超时后自动清空敏感信息。</li><li>退出登记流程时需弹窗确认，避免误触导致信息丢失。</li><li>提交登记前展示确认页，避免误提交。</li><li>重启、关机、开始巡逻、停止巡逻等高风险动作不在普通屏幕端开放。</li></ul>
    406. 

  406.     <h3>10.3 触摸尺寸建议</h3>
    407. 

  407.     <table><thead><tr><th>元素</th><th>建议尺寸</th></tr></thead><tbody>
    408. 

  408.       <tr><td>主菜单卡片</td><td>不小于 220×150px</td></tr>
    409. 

  409.       <tr><td>主按钮高度</td><td>72px - 96px</td></tr>
    410. 

  410.       <tr><td>普通按钮高度</td><td>56px - 72px</td></tr>
    411. 

  411.       <tr><td>图标按钮</td><td>不小于 64×64px</td></tr>
    412. 

  412.       <tr><td>输入框高度</td><td>不小于 56px</td></tr>
    413. 

  413.     </tbody></table>
    414. 

  414.   </div>
    415. 

  415. 

  416.   <div class="section" id="s11"><h2>11. UI 视觉与屏幕适配规范</h2>
    417. 

  417.     <h3>11.1 视觉风格</h3>
    418. 

  418.     <div class="ok">屏幕端采用“温和迎宾风 + 轻科技感”，适配大厅、展厅、营业厅、酒店等公共接待场景。</div>
    419. 

  419.     <table><thead><tr><th>设计项</th><th>建议</th></tr></thead><tbody>
    420. 

  420.       <tr><td>主色</td><td>青蓝、湖蓝、柔和科技蓝。</td></tr>
    421. 

  421.       <tr><td>背景</td><td>浅色背景、柔和渐变、低噪点纹理。</td></tr>
    422. 

  422.       <tr><td>组件</td><td>大按钮、圆角卡片、柔和阴影、清晰图标。</td></tr>
    423. 

  423.       <tr><td>文字</td><td>大字号、低密度、短文案、强引导。</td></tr>
    424. 

  424.       <tr><td>避免</td><td>后台表格风、深色监控大屏风、强安防压迫感、密集小字。</td></tr>
    425. 

  425.     </tbody></table>
    426. 

  426.     <h3>11.2 1024×768 横屏布局建议</h3>
    427. 

  427.     <div class="flow">顶部状态栏：Logo / 时间 / 电量 / 网络 / 状态
    428. 

  428. 中部主内容：待机素材、主菜单、登记表单或路线引导内容
    429. 

  429. 底部操作区：返回、确认、取消、帮助等大按钮</div>
    430. 

  430.     <div class="info">实机调试补充：当系统截图比例正常但肉眼观察屏幕画面存在压缩或拉伸时，应优先检查 Mac/Ubuntu 外接屏分辨率、镜像模式、浏览器缩放比例、屏幕控制板缩放方式和设备像素比。前端 CSS 中的正方形图标容器不应为适配异常显示链路而改成非标准比例。</div>
    431. 

  431.     <h3>11.3 字号建议</h3>
    432. 

  432.     <table><thead><tr><th>文本类型</th><th>建议字号</th></tr></thead><tbody>
    433. 

  433.       <tr><td>页面主标题</td><td>32px - 40px</td></tr>
    434. 

  434.       <tr><td>模块标题</td><td>24px - 30px</td></tr>
    435. 

  435.       <tr><td>正文/说明</td><td>18px - 22px</td></tr>
    436. 

  436.       <tr><td>按钮文字</td><td>20px - 26px</td></tr>
    437. 

  437.       <tr><td>状态文字</td><td>16px - 20px</td></tr>
    438. 

  438.     </tbody></table>
    439. 

  439.     <h3>11.4 竖屏适配说明</h3>
    440. 

  440.     <div class="warn">一期不以未知竖屏为验收目标。代码实现时避免大量写死像素和绝对定位，优先使用 flex/grid、百分比、clamp 等方式，为后续竖屏适配保留空间。</div>
    441. 

  441.   </div>
    442. 

  442. 

  443.   <div class="section" id="s12"><h2>12. Mock 数据与前端开发建议</h2>
    444. 

  444.     <h3>12.1 一期前端开发方式</h3>
    445. 

  445.     <ul><li>先完成 Vue3 前端工程、页面路由、组件拆分和 Mock 数据。</li><li>所有接口封装统一走 api 层，即使一期使用本地 Mock，也保留后续替换真实接口的结构。</li><li>播放状态、机器人状态、语音指令、访客登记信息等统一由 Pinia 管理。</li><li>待机播放器、数字键盘、状态栏、全局弹窗、登记表单、目的地卡片等应封装为可复用组件。</li></ul>
    446. 

  446.     <h3>12.2 组件拆分建议</h3>
    447. 

  447.     <table><thead><tr><th>组件</th><th>职责</th></tr></thead><tbody>
    448. 

  448.       <tr><td>ScreenLayout.vue</td><td>统一页面布局、顶部状态栏、底部操作区。</td></tr>
    449. 

  449.       <tr><td>StatusBar.vue</td><td>展示 Logo、时间、电量、网络、机器人状态。</td></tr>
    450. 

  450.       <tr><td>IdlePlayer.vue</td><td>待机素材播放，支持图片、视频、欢迎页兜底。</td></tr>
    451. 

  451.       <tr><td>BroadcastOverlay.vue</td><td>播报内容插播展示。</td></tr>
    452. 

  452.       <tr><td>MainMenu.vue</td><td>四个主菜单入口。</td></tr>
    453. 

  453.       <tr><td>NumericKeyboard.vue</td><td>手机号、身份证号输入键盘。</td></tr>
    454. 

  454.       <tr><td>VisitorForm.vue</td><td>访客登记表单。</td></tr>
    455. 

  455.       <tr><td>CameraPreview.vue</td><td>摄像头预览窗口。</td></tr>
    456. 

  456.       <tr><td>DestinationList.vue</td><td>路线引导目的地列表。</td></tr>
    457. 

  457.       <tr><td>GlobalAlert.vue</td><td>全局异常、低电量、网络异常等提示。</td></tr>
    458. 

  458.     </tbody></table>
    459. 

  459.     <h3>12.3 推荐前端目录结构</h3>
    460. 

  460.     <div class="code">src/
    461. 

  461. ├─ api/                  接口封装与 Mock 入口
    462. 

  462. ├─ assets/               图片、图标、默认素材
    463. 

  463. ├─ components/           通用组件
    464. 

  464. ├─ layouts/              屏幕基础布局
    465. 

  465. ├─ mock/                 Mock 数据
    466. 

  466. ├─ router/               页面路由
    467. 

  467. ├─ stores/               Pinia 状态管理
    468. 

  468. ├─ utils/                工具函数、时间、格式化、设备判断
    469. 

  469. ├─ views/                页面视图
    470. 

  470. │  ├─ idle/              待机展示
    471. 

  471. │  ├─ menu/              主菜单
    472. 

  472. │  ├─ visitor/           访客登记
    473. 

  473. │  ├─ navigation/        路线引导
    474. 

  474. │  ├─ notice/            通知公告
    475. 

  475. │  └─ system/            系统信息
    476. 

  476. └─ App.vue</div>
    477. 

  477.     <h3>12.4 Mock 数据范围</h3>
    478. 

  478.     <div><span class="tag">机器人状态</span><span class="tag">播放方案</span><span class="tag">素材列表</span><span class="tag">播报内容</span><span class="tag">语音指令</span><span class="tag">预约记录</span><span class="tag">身份证读取结果</span><span class="tag">人脸识别结果</span><span class="tag">目的地列表</span><span class="tag">通知公告</span></div>
    479. 

  479.     <h4>12.5 访客登记 Mock 开发说明</h4>
    480. 

  480.     <ul>
    481. 

  481.       <li>开发环境允许现场登记提交失败时使用 Mock 成功数据跳转 <code class="inline">/visitor/success</code>，便于前端调试登记成功页。</li>
    482. 

  482.       <li>正式生产环境不启用 Mock 提交兜底，接口失败时正常提示"登记失败，请重试"。</li>
    483. 

  483.       <li>登记成功页（<code class="inline">Success.vue</code>）支持开发环境无 <code class="inline">registrationInfo</code> 时使用 Mock 数据展示，Mock 数据包含访客姓名、手机号、被访人、登记时间。</li>
    484. 

  484.       <li>预约确认页（<code class="inline">AppointmentConfirm.vue</code>）可在开发环境通过 <code class="inline">setMockAppointment()</code> 方法注入 Mock 预约数据进行调试。</li>
    485. 

  485.       <li>开发阶段所有 Mock 数据仅在前端内存中，不持久化，不上报真实后端接口。</li>
    486. 

  486.     </ul>
    487. 

  487.     <h4>本地播放素材 Mock 约定</h4>
    488. 

  488.     <ul>
    489. 

  489.       <li>开发阶段播放方案素材放置于 <code class="inline">src/assets/media/play-plan/images/</code> 与 <code class="inline">src/assets/media/play-plan/videos/</code> 目录。</li>
    490. 

  490.       <li>Mock 播放方案通过 Vite 的 <code class="inline">import.meta.glob</code> 自动扫描本地图片与视频文件，不再手动逐个 import 固定素材。</li>
    491. 

  491.       <li>本地素材仅用于模拟后端播放方案返回结果，组件仅消费 <code class="inline">playPlan.items</code> 中的 <code class="inline">url</code>、<code class="inline">type</code>、<code class="inline">duration</code>、<code class="inline">fitMode</code> 等字段。</li>
    492. 

  492.       <li>后续对接真实接口时，应保持数据结构一致，由后端返回素材 URL 与播放参数，前端不再依赖本地素材目录。</li>
    493. 

  493.     </ul>
    494. 

  494.   </div>
    495. 

  495. 

  496.   <div class="section" id="s13"><h2>13. 后续接口设计建议</h2>
    497. 

  497.     <div class="note">本章为后续接口对接建议，一期前端可先使用 Mock 数据实现。</div>
    498. 

  498.     <table><thead><tr><th>接口</th><th>方法</th><th>说明</th><th>主要字段</th></tr></thead><tbody>
    499. 

  499.       <tr><td>/screen/config</td><td>GET</td><td>获取屏幕配置</td><td>robotName、logoUrl、idleTimeout、theme、volume、mute</td></tr>
    500. 

  500.       <tr><td>/screen/status</td><td>GET</td><td>获取机器人简要状态</td><td>batteryLevel、networkStatus、workStatus、chargeStatus、faultFlag</td></tr>
    501. 

  501.       <tr><td>/robot-ops/screen/play-plan/current</td><td>GET</td><td>获取当前播放方案</td><td>enabled、planId、planName、loopMode、defaultFitMode、version、items</td></tr>
    502. 

  502.       <tr><td>/robot-ops/screen/broadcast/current</td><td>GET</td><td>获取当前播报状态</td><td>broadcasting、taskId、contentId、title、content、contentType、audioUrl、audioDuration、playMode、startTime、estimatedEndTime、version</td></tr>
    503. 

  503.       <tr><td>/robot-ops/screen/broadcast/ack</td><td>POST</td><td>播报播放完成回执</td><td>taskId、contentId、resultStatus、resultMsg、playTime</td></tr>
    504. 

  504.       <tr><td>/screen/command/latest</td><td>GET</td><td>获取最新语音/系统指令</td><td>commandId、type、action、payload、timestamp</td></tr>
    505. 

  505.       <tr><td>/screen/command/ack</td><td>POST</td><td>指令处理回执</td><td>commandId、resultStatus、resultMsg</td></tr>
    506. 

  506.       <tr><td>/screen/id-card/read</td><td>POST</td><td>读取身份证</td><td>name、idCardNo、gender、nation、address、photoUrl</td></tr>
    507. 

  507.       <tr><td>/screen/appointment/query</td><td>GET</td><td>预约查询</td><td>mobile、idCardNo；返回 appointmentNo、visitorName、visitedPerson、appointmentTime</td></tr>
    508. 

  508.       <tr><td>/screen/visitor/register</td><td>POST</td><td>提交访客登记</td><td>visitorName、mobile、idCardNo、visitorCompany（或 visitorSource 承接"来访单位"）、visitedPerson、visitReason、visitType、registerType、appointmentNo</td></tr>
    509. 

  509.       <tr><td>/screen/recognition/latest</td><td>GET</td><td>获取最新识别结果</td><td>personType、matchStatus、visitorName、appointmentNo、confidence</td></tr>
    510. 

  510.       <tr><td>/screen/destination/list</td><td>GET</td><td>目的地列表</td><td>destinationId、name、category、floor、description</td></tr>
    511. 

  511.       <tr><td>/screen/navigation/start</td><td>POST</td><td>发起导航</td><td>destinationId</td></tr>
    512. 

  512.       <tr><td>/screen/navigation/status</td><td>GET</td><td>导航状态</td><td>taskId、status、currentPoint、targetName、progress</td></tr>
    513. 

  513.       <tr><td>/screen/notice/list</td><td>GET</td><td>通知公告列表</td><td>title、content、publishTime、contentType</td></tr>
    514. 

  514.       <tr><td>/screen/call-staff</td><td>POST</td><td>呼叫工作人员</td><td>callType、pagePath、remark</td></tr>
    515. 

  515.       <tr><td>/screen/camera/preview-url</td><td>GET</td><td>获取摄像头预览地址</td><td>streamUrl、streamType、expireTime</td></tr>
    516. 

  516.       <tr><td>/screen/audio/control</td><td>POST</td><td>音量与静音控制</td><td>volume、mute、sourceType</td></tr>
    517. 

  517.       <tr><td>/screen/event/report</td><td>POST</td><td>屏幕事件上报</td><td>eventType、pagePath、eventData、timestamp</td></tr>
    518. 

  518.     </tbody></table>
    519. 

  519. 

  520.     <h3>13.1 当前播放方案接口详细设计</h3>
    521. 

  521.     <div class="info">本接口为机身屏待机页播放方案模式的一期核心接口。运维 Web 前端、机身屏前端和后端服务共用同一套数据库与同一个后端服务；运维端负责素材上传和播放方案配置，机身屏前端只读取当前播放方案并播放素材。</div>
    522. 

  522. 

  523.     <h4>13.1.1 接口基本信息</h4>
    524. 

  524.     <table><thead><tr><th>项</th><th>设计内容</th></tr></thead><tbody>
    525. 

  525.       <tr><td>接口地址</td><td><code class="inline">GET /robot-ops/screen/play-plan/current</code></td></tr>
    526. 

  526.       <tr><td>接口用途</td><td>供机身屏 <code class="inline">/idle</code> 待机页读取当前启用播放方案。前端根据返回结果决定进入播放方案模式或回退默认欢迎页。</td></tr>
    527. 

  527.       <tr><td>部署关系</td><td>运维 Web 前端、机身屏前端和后端服务部署在同一台小主机，共用同一套数据库和同一个后端服务。</td></tr>
    528. 

  528.       <tr><td>素材访问地址</td><td>屏幕端访问素材统一使用完整 URL，例如 <code class="inline">http://192.168.0.30/profile/upload/xxx.mp4</code>。</td></tr>
    529. 

  529.       <tr><td>是否允许多个当前方案</td><td>不允许。播放方案主表中同一时间只允许一个方案为当前播放方案。</td></tr>
    530. 

  530.     </tbody></table>
    531. 

  531. 

  532.     <h4>13.1.2 数据来源与字段映射</h4>
    533. 

  533.     <table><thead><tr><th>数据表</th><th>主要字段</th><th>接口字段</th><th>说明</th></tr></thead><tbody>
    534. 

  534.       <tr><td>robot_ops_play_plan</td><td>id</td><td>planId</td><td>播放方案 ID。</td></tr>
    535. 

  535.       <tr><td>robot_ops_play_plan</td><td>plan_name</td><td>planName</td><td>播放方案名称。</td></tr>
    536. 

  536.       <tr><td>robot_ops_play_plan</td><td>loop_mode</td><td>loopMode</td><td>循环方式，建议支持 loop、once；一期默认 loop。</td></tr>
    537. 

  537.       <tr><td>robot_ops_play_plan</td><td>status</td><td>enabled 判断依据</td><td>status=1 表示当前播放方案。</td></tr>
    538. 

  538.       <tr><td>robot_ops_play_plan</td><td>update_time</td><td>version</td><td>可使用更新时间生成版本号，用于前端判断播放方案是否变化。</td></tr>
    539. 

  539.       <tr><td>robot_ops_play_plan_item</td><td>id</td><td>itemId / id</td><td>播放方案明细 ID。</td></tr>
    540. 

  540.       <tr><td>robot_ops_play_plan_item</td><td>asset_id</td><td>assetId</td><td>关联素材 ID。</td></tr>
    541. 

  541.       <tr><td>robot_ops_play_plan_item</td><td>play_order</td><td>sort</td><td>播放顺序，按升序返回。</td></tr>
    542. 

  542.       <tr><td>robot_ops_play_plan_item</td><td>stay_seconds</td><td>staySeconds / duration</td><td>图片停留秒数；duration = staySeconds × 1000。</td></tr>
    543. 

  543.       <tr><td>robot_ops_media_asset</td><td>asset_name</td><td>title</td><td>素材名称。</td></tr>
    544. 

  544.       <tr><td>robot_ops_media_asset</td><td>asset_type</td><td>type</td><td>素材类型，转换为 image 或 video。</td></tr>
    545. 

  545.       <tr><td>robot_ops_media_asset</td><td>file_url</td><td>url</td><td>素材文件地址，后端需补全为屏幕端可直接访问的完整 URL。</td></tr>
    546. 

  546.       <tr><td>robot_ops_media_asset</td><td>thumbnail_url</td><td>thumbnailUrl</td><td>缩略图地址，可为空。</td></tr>
    547. 

  547.       <tr><td>robot_ops_media_asset</td><td>status</td><td>过滤依据</td><td>只有启用状态素材可被屏幕端播放。</td></tr>
    548. 

  548.     </tbody></table>
    549. 

  549. 

  550.     <h4>13.1.3 后端取数规则</h4>
    551. 

  551.     <ol>
    552. 

  552.       <li>查询 <code class="inline">robot_ops_play_plan</code> 中 <code class="inline">status=1</code> 的当前播放方案。</li>
    553. 

  553.       <li>如果不存在当前播放方案，返回 <code class="inline">enabled=false</code> 和空 <code class="inline">items</code>。</li>
    554. 

  554.       <li>如果存在当前播放方案，查询该方案下的 <code class="inline">robot_ops_play_plan_item</code> 明细，并按 <code class="inline">play_order</code> 升序排序。</li>
    555. 

  555.       <li>关联 <code class="inline">robot_ops_media_asset</code> 素材表，获取素材名称、类型、文件地址、缩略图、视频时长、启用状态等。</li>
    556. 

  556.       <li>过滤不可播放素材：素材不存在、素材停用、<code class="inline">file_url</code> 为空、<code class="inline">asset_type</code> 不是 image/video。</li>
    557. 

  557.       <li>如果过滤后素材列表为空，也返回 <code class="inline">enabled=false</code> 和空 <code class="inline">items</code>。</li>
    558. 

  558.       <li>如果存在可播放素材，返回 <code class="inline">enabled=true</code> 和已排序的素材列表。</li>
    559. 

  559.     </ol>
    560. 

  560. 

  561.     <h4>13.1.4 素材 URL 补全规则</h4>
    562. 

  562.     <p>后端返回给屏幕端的 <code class="inline">url</code> 和 <code class="inline">thumbnailUrl</code> 必须是浏览器可直接访问的地址。屏幕端当前约定素材访问前缀为 <code class="inline">http://192.168.0.30</code>。</p>
    563. 

  563.     <table><thead><tr><th>数据库 file_url 示例</th><th>接口返回 url 示例</th><th>处理规则</th></tr></thead><tbody>
    564. 

  564.       <tr><td><code class="inline">http://192.168.0.30/profile/upload/a.mp4</code></td><td><code class="inline">http://192.168.0.30/profile/upload/a.mp4</code></td><td>已是完整 URL，原样返回。</td></tr>
    565. 

  565.       <tr><td><code class="inline">/profile/upload/a.mp4</code></td><td><code class="inline">http://192.168.0.30/profile/upload/a.mp4</code></td><td>使用资源访问前缀拼接。</td></tr>
    566. 

  566.       <tr><td><code class="inline">profile/upload/a.mp4</code></td><td><code class="inline">http://192.168.0.30/profile/upload/a.mp4</code></td><td>补充斜杠后再拼接。</td></tr>
    567. 

  567.     </tbody></table>
    568. 

  568.     <div class="note">建议后端将资源访问前缀配置化，例如 <code class="inline">screen.resource-base-url=http://192.168.0.30</code>，避免硬编码到业务代码中。</div>
    569. 

  569. 

  570.     <h4>13.1.5 返回示例</h4>
    571. 

  571.     <div class="code">{
    572. 

  572.   "code": 200,
    573. 

  573.   "msg": "查询成功",
    574. 

  574.   "data": {
    575. 

  575.     "enabled": true,
    576. 

  576.     "planId": 1,
    577. 

  577.     "planName": "默认播放方案",
    578. 

  578.     "loopMode": "loop",
    579. 

  579.     "defaultFitMode": "cover",
    580. 

  580.     "version": "20260513153000",
    581. 

  581.     "items": [
    582. 

  582.       {
    583. 

  583.         "id": 1001,
    584. 

  584.         "itemId": 1001,
    585. 

  585.         "assetId": 501,
    586. 

  586.         "type": "image",
    587. 

  587.         "title": "欢迎宣传图",
    588. 

  588.         "url": "http://192.168.0.30/profile/upload/2026/05/welcome.png",
    589. 

  589.         "thumbnailUrl": "http://192.168.0.30/profile/upload/2026/05/welcome.png",
    590. 

  590.         "duration": 8000,
    591. 

  591.         "staySeconds": 8,
    592. 

  592.         "fitMode": "cover",
    593. 

  593.         "showTitle": false,
    594. 

  594.         "sort": 1
    595. 

  595.       },
    596. 

  596.       {
    597. 

  597.         "id": 1002,
    598. 

  598.         "itemId": 1002,
    599. 

  599.         "assetId": 502,
    600. 

  600.         "type": "video",
    601. 

  601.         "title": "机器人介绍视频",
    602. 

  602.         "url": "http://192.168.0.30/profile/upload/2026/05/robot-intro.mp4",
    603. 

  603.         "thumbnailUrl": "http://192.168.0.30/profile/upload/2026/05/robot-intro-cover.jpg",
    604. 

  604.         "duration": null,
    605. 

  605.         "staySeconds": null,
    606. 

  606.         "fitMode": "cover",
    607. 

  607.         "muted": false,
    608. 

  608.         "showTitle": false,
    609. 

  609.         "sort": 2
    610. 

  610.       }
    611. 

  611.     ]
    612. 

  612.   },
    613. 

  613.   "timestamp": "2026-05-13 15:30:00"
    614. 

  614. }</div>
    615. 

  615. 

  616.     <h4>13.1.6 无播放方案或无可播放素材返回示例</h4>
    617. 

  617.     <div class="code">{
    618. 

  618.   "code": 200,
    619. 

  619.   "msg": "暂无当前播放方案",
    620. 

  620.   "data": {
    621. 

  621.     "enabled": false,
    622. 

  622.     "planId": null,
    623. 

  623.     "planName": "",
    624. 

  624.     "loopMode": "loop",
    625. 

  625.     "defaultFitMode": "cover",
    626. 

  626.     "version": "",
    627. 

  627.     "items": []
    628. 

  628.   },
    629. 

  629.   "timestamp": "2026-05-13 15:30:00"
    630. 

  630. }</div>
    631. 

  631. 

  632.     <h4>13.1.7 前端播放规则</h4>
    633. 

  633.     <ul>
    634. 

  634.       <li><code class="inline">enabled=false</code> 或 <code class="inline">items</code> 为空时，机身屏回退默认欢迎页。</li>
    635. 

  635.       <li><code class="inline">enabled=true</code> 且 <code class="inline">items</code> 有数据时，机身屏进入播放方案模式。</li>
    636. 

  636.       <li>图片素材按 <code class="inline">staySeconds</code> 控制停留时长，前端使用 <code class="inline">duration</code> 毫秒值进行定时切换。</li>
    637. 

  637.       <li>视频素材默认完整播放，前端监听 <code class="inline">ended</code> 事件后切换下一条，不使用 <code class="inline">staySeconds</code> 强制截断。</li>
    638. 

  638.       <li><code class="inline">fitMode</code> 默认 cover，后续可扩展 contain、stretch。</li>
    639. 

  639.       <li><code class="inline">showTitle</code> 默认 false，避免和素材自带文字冲突。</li>
    640. 

  640.       <li>屏幕端进入 <code class="inline">/idle</code> 待机页时，应立即请求一次 <code class="inline">/robot-ops/screen/play-plan/current</code> 当前播放方案接口。</li>
    641. 

  641.       <li>待机播放期间，屏幕端应每 60 秒重新请求一次当前播放方案接口，用于检查运维端是否更新了播放方案或素材配置。</li>
    642. 

  642.       <li>前端应通过接口返回的 <code class="inline">version</code> 字段判断播放方案是否变化；如果 <code class="inline">version</code> 未变化，不应重置当前播放进度。</li>
    643. 

  643.       <li>如果 <code class="inline">version</code> 发生变化，前端应标记新方案待生效，并在当前图片展示结束或当前视频播放结束后切换到新播放方案，不建议直接打断正在播放的视频。</li>
    644. 

  644.       <li>如果重新请求后发现无当前播放方案、播放方案禁用或素材为空，前端应在当前素材播放结束后回退默认欢迎页。</li>
    645. 

  645.     </ul>
    646. 

  646. 

  647.     <h4>13.1.8 播放方案更新检查策略</h4>
    648. 

  648.     <table><thead><tr><th>场景</th><th>处理策略</th><th>说明</th></tr></thead><tbody>
    649. 

  649.       <tr><td>进入待机页</td><td>立即请求当前播放方案接口</td><td>确保屏幕端启动或从业务页面返回待机时读取最新播放配置。</td></tr>
    650. 

  650.       <tr><td>待机播放中</td><td>每 60 秒请求一次 <code class="inline">/robot-ops/screen/play-plan/current</code></td><td>一期不单独增加 version 接口，直接轮询 current 接口即可。</td></tr>
    651. 

  651.       <tr><td>version 未变化</td><td>不重置播放进度</td><td>避免图片/视频被无意义重播或闪烁。</td></tr>
    652. 

  652.       <tr><td>version 变化</td><td>当前素材结束后切换新方案</td><td>图片在本次 duration 结束后切换；视频在 ended 后切换。</td></tr>
    653. 

  653.       <tr><td>方案被取消或素材为空</td><td>当前素材结束后回退默认欢迎页</td><td>避免播放过程中突兀黑屏或直接中断。</td></tr>
    654. 

  654.     </tbody></table>
    655. 

  655.     <div class="note">后续如需降低接口数据量，可扩展轻量版本检查接口 <code class="inline">GET /robot-ops/screen/play-plan/version</code>。屏幕端每 30-60 秒请求 version，只有版本变化时再请求 current 完整播放方案。一期建议先使用 current 接口轮询，降低前后端联调复杂度。</div>
    656. 

  656. 

  657.     <h3>13.2 当前播报状态接口详细设计</h3>
    658. 

  658.     <div class="info">本接口供机身屏 <code class="inline">/idle</code> 待机页获取当前播报状态。前端根据 broadcasting 判断是否显示播报浮层，并暂停或恢复当前素材播放。</div>
    659. 

  659. 

  660.     <h4>13.2.1 接口基本信息</h4>
    661. 

  661.     <table><thead><tr><th>项</th><th>设计内容</th></tr></thead><tbody>
    662. 

  662.       <tr><td>接口地址</td><td><code class="inline">GET /robot-ops/screen/broadcast/current</code></td></tr>
    663. 

  663.       <tr><td>接口用途</td><td>供机身屏 <code class="inline">/idle</code> 待机页获取当前播报状态。前端根据 broadcasting 判断是否显示播报浮层、播放 MP3，并暂停或恢复当前素材播放。</td></tr>
    664. 

  664.       <tr><td>数据来源</td><td>运维端播报内容管理与播报任务管理。后端关联播报任务和播报内容后，生成 MP3 并返回当前播报文本和音频地址。</td></tr>
    665. 

  665.       <tr><td>轮询频率</td><td>一期建议待机页每 2 秒轮询一次。</td></tr>
    666. 

  666.       <tr><td>TTS 职责</td><td>后端负责播报文本转 MP3、音频缓存、任务命中判断和音频地址返回；屏幕端负责根据 audioUrl 播放 MP3、展示播报浮层、暂停和恢复当前素材播放。</td></tr>
    667. 

  667.       <tr><td>生效范围</td><td>一期优先只在 <code class="inline">/idle</code> 待机页执行播报插播；访客登记、路线引导等业务办理页面暂不强制打断。</td></tr>
    668. 

  668.     </tbody></table>
    669. 

  669. 

  670.     <h4>13.2.2 数据来源与字段映射</h4>
    671. 

  671.     <table><thead><tr><th>来源表</th><th>来源字段</th><th>接口字段</th><th>说明</th></tr></thead><tbody>
    672. 

  672.       <tr><td>robot_ops_broadcast_task</td><td>id</td><td>taskId</td><td>播报任务 ID。</td></tr>
    673. 

  673.       <tr><td>robot_ops_broadcast_task</td><td>task_name</td><td>taskName</td><td>播报任务名称。</td></tr>
    674. 

  674.       <tr><td>robot_ops_broadcast_task</td><td>content_id</td><td>contentId</td><td>关联播报内容 ID。</td></tr>
    675. 

  675.       <tr><td>robot_ops_broadcast_task</td><td>start_time</td><td>startTime</td><td>本次播报开始时间。</td></tr>
    676. 

  676.       <tr><td>robot_ops_broadcast_task</td><td>end_time、frequency_minutes、cycle_type、cycle_value、status</td><td>后端判断依据</td><td>由后端根据任务规则判断是否命中当前播报，前端不参与计算。</td></tr>
    677. 

  677.       <tr><td>robot_ops_broadcast_content</td><td>content_name</td><td>title</td><td>播报标题。</td></tr>
    678. 

  678.       <tr><td>robot_ops_broadcast_content</td><td>content_type</td><td>contentType</td><td>播报分类，例如通知、宣传、提示、安防提醒、自定义。</td></tr>
    679. 

  679.       <tr><td>robot_ops_broadcast_content</td><td>broadcast_text</td><td>content</td><td>播报文本，用于屏幕展示，并由后端调用第三方 TTS 生成 MP3。</td></tr>
    680. 

  680.       <tr><td>robot_ops_broadcast_content</td><td>status</td><td>过滤依据</td><td>只有启用状态的播报内容可被任务触发。</td></tr>
    681. 

  681.     </tbody></table>
    682. 

  682. 

  683.     <h4>13.2.3 有播报返回示例</h4>
    684. 

  684.     <div class="code">{
    685. 

  685.   "code": 200,
    686. 

  686.   "msg": "查询成功",
    687. 

  687.   "data": {
    688. 

  688.     "broadcasting": true,
    689. 

  689.     "taskId": 12,
    690. 

  690.     "contentId": 35,
    691. 

  691.     "taskName": "大厅整点提醒",
    692. 

  692.     "title": "参观提醒",
    693. 

  693.     "content": "欢迎各位来宾参观，请按照现场工作人员引导有序通行。",
    694. 

  694.     "contentType": "notice",
    695. 

  695.     "level": "normal",
    696. 

  696.     "audioUrl": "http://192.168.0.30/profile/audio/broadcast/35_abc123.mp3",
    697. 

  697.     "audioDuration": 20.5,
    698. 

  698.     "playMode": "once",
    699. 

  699.     "startTime": "2026-05-18 16:30:00",
    700. 

  700.     "estimatedEndTime": "2026-05-18 16:30:20",
    701. 

  701.     "version": "20260518163000"
    702. 

  702.   },
    703. 

  703.   "timestamp": "2026-05-18 16:30:01"
    704. 

  704. }</div>
    705. 

  705. 

  706.     <h4>13.2.4 无播报返回示例</h4>
    707. 

  707.     <div class="code">{
    708. 

  708.   "code": 200,
    709. 

  709.   "msg": "当前无播报",
    710. 

  710.   "data": {
    711. 

  711.     "broadcasting": false,
    712. 

  712.     "taskId": null,
    713. 

  713.     "contentId": null,
    714. 

  714.     "taskName": "",
    715. 

  715.     "title": "",
    716. 

  716.     "content": "",
    717. 

  717.     "contentType": "",
    718. 

  718.     "level": "normal",
    719. 

  719.     "audioUrl": "",
    720. 

  720.     "audioDuration": null,
    721. 

  721.     "playMode": "once",
    722. 

  722.     "startTime": null,
    723. 

  723.     "estimatedEndTime": null,
    724. 

  724.     "version": "20260518163100"
    725. 

  725.   },
    726. 

  726.   "timestamp": "2026-05-18 16:31:00"
    727. 

  727. }</div>
    728. 

  728. 

  729.     <h4>13.2.5 屏幕端处理规则</h4>
    730. 

  730.     <ul>
    731. 

  731.       <li>屏幕端进入 <code class="inline">/idle</code> 后立即请求一次当前播报状态接口，并每 2 秒轮询一次。</li>
    732. 

  732.       <li>当 broadcasting=true 且 audioUrl 不为空时，屏幕端显示播报浮层，展示播报标题、播报正文和"正在播报"状态。</li>
    733. 

  733.       <li>当前为图片素材时，播报开始后暂停图片轮播定时器，并播放 audioUrl 对应 MP3；播报结束后恢复图片轮播。</li>
    734. 

  734.       <li>当前为视频素材时，播报开始后暂停视频播放，并播放 audioUrl 对应 MP3；播报结束后继续播放视频。</li>
    735. 

  735.       <li>当前为默认欢迎页时，播报开始后显示播报浮层并播放 MP3；播报结束后隐藏播报浮层。</li>
    736. 

  736.       <li>屏幕端应通过 audio ended 事件判断播报播放完成。</li>
    737. 

  737.       <li>播报插播不应重置当前播放方案和当前素材索引。</li>
    738. 

  738.       <li>如果 audioUrl 为空、MP3 加载失败或播放失败，屏幕端应记录 warning 日志，并恢复原素材播放状态。</li>
    739. 

  739.       <li>接口请求失败或后端播报服务异常时，不影响当前素材播放。</li>
    740. 

  740.     </ul>
    741. 

  741. 

  742.     <h4>13.2.6 后端与 TTS 处理建议</h4>
    743. 

  743.     <ul>
    744. 

  744.       <li>一期 TTS 不采用流式 TTS，统一采用"第三方 TTS 生成 MP3 文件 + 屏幕端播放 MP3"的方式实现。</li>
    745. 

  745.       <li>后端根据播报任务的开始时间、结束时间、频率、循环类型和循环取值判断当前是否命中播报。</li>
    746. 

  746.       <li>后端应避免同一任务在同一时间窗口内重复触发。</li>
    747. 

  747.       <li>播报任务命中后，后端读取播报内容文本，判断该内容是否已有可用 MP3 文件；如果已有且未失效，则直接复用；如果没有或内容已修改，则调用第三方 TTS 重新生成 MP3。</li>
    748. 

  748.       <li>MP3 文件建议保存到小主机本地目录，例如 <code class="inline">/data/robot/audio/broadcast/</code>，并通过静态资源服务暴露为屏幕端可访问的 audioUrl，例如 <code class="inline">http://192.168.0.30/profile/audio/broadcast/35_abc123.mp3</code>。</li>
    749. 

  749.       <li>MP3 是否需要重新生成，应根据播报文本、音色、语速、音量、TTS 供应商和模型版本等生成 Hash 进行判断；Hash 不一致或本地文件不存在时重新生成。</li>
    750. 

  750.       <li>后端在 current 接口中返回 broadcasting=true、audioUrl、audioDuration、title、content 等字段。</li>
    751. 

  751.       <li>屏幕端负责播放 MP3。后端不直接控制浏览器音频播放，也不直接负责暂停/恢复素材。</li>
    752. 

  752.       <li>后端可根据任务命中状态和播放窗口维护当前播报状态；如增加播放完成回执接口，则以后端收到 ack 后结束本次播报状态。</li>
    753. 

  753.       <li>如果 TTS 生成失败，应记录失败原因，并避免影响素材播放；current 接口可返回 broadcasting=false 或返回错误状态，具体按后端实现处理。</li>
    754. 

  754.       <li>后端应封装统一 TtsService，不要将第三方 TTS API 直接写死在播报任务逻辑中。</li>
    755. 

  755.     </ul>
    756. 

  756. 

  757.     <h4>13.2.7 MP3 文件生成与复用规则</h4>
    758. 

  758.     <table><thead><tr><th>场景</th><th>处理规则</th><th>说明</th></tr></thead><tbody>
    759. 

  759.       <tr><td>首次播报</td><td>调用第三方 TTS 生成 MP3</td><td>生成完成后保存本地文件，并记录音频路径、访问 URL、时长、Hash 和生成状态。</td></tr>
    760. 

  760.       <tr><td>重复播报相同内容</td><td>复用已生成 MP3</td><td>避免每次播报都请求第三方 TTS，降低成本和延迟。</td></tr>
    761. 

  761.       <tr><td>播报文本修改</td><td>重新生成 MP3</td><td>文本变化后 Hash 变化，旧音频失效。</td></tr>
    762. 

  762.       <tr><td>音色/语速/音量/供应商参数修改</td><td>重新生成 MP3</td><td>同一文本在不同语音参数下应视为不同音频。</td></tr>
    763. 

  763.       <tr><td>本地音频文件丢失</td><td>重新生成 MP3</td><td>数据库有记录但文件不存在时应自动补偿生成。</td></tr>
    764. 

  764.       <tr><td>MP3 播放失败</td><td>屏幕端记录失败并恢复素材播放</td><td>不应阻塞待机素材播放，后续可通过事件上报或运行日志记录。</td></tr>
    765. 

  765.       <tr><td>TTS 生成失败</td><td>后端记录失败状态和错误信息</td><td>不返回可播放 audioUrl，屏幕端不进入播报播放状态。</td></tr>
    766. 

  766.     </tbody></table>
    767. 

  767.     <p>建议 Hash 计算口径为：<code class="inline">md5(播报文本 + 音色 + 语速 + 音量 + TTS供应商 + 模型版本)</code></p>
    768. 

  768.     <p>后端应封装统一 TtsService。屏幕端应封装统一音频播放逻辑，用于播放播报 MP3、监听 ended/error 事件，并在播放完成或失败后恢复素材播放。</p>
    769. 

  769.     <div class="note">一期如后端需要确认屏幕端实际播放完成，可提供 POST <code class="inline">/robot-ops/screen/broadcast/ack</code>。屏幕端在 audio ended 后上报 success，在 audio error 后上报 failed。若一期暂不做 ack，后端可根据播报窗口或 estimatedEndTime 结束播报状态。</div>
    770. 

  770.   </div>
    771. 

  771. 

  772.   <div class="section" id="s14"><h2>14. 开发优先级与实施顺序</h2>
    773. 

  773.     <table><thead><tr><th>阶段</th><th>开发内容</th><th>目标</th></tr></thead><tbody>
    774. 

  774.       <tr><td>第一阶段</td><td>Vue3 工程、路由、布局、状态栏、全局样式、Mock 数据框架</td><td>建立屏幕端前端基础工程。</td></tr>
    775. 

  775.       <tr><td>第二阶段</td><td>待机展示页、默认欢迎模式、播放方案模式、本地素材 Mock、图片/视频播放器、当前播放方案接口、欢迎页兜底、无操作返回待机</td><td>前端已收口；下一步由后端提供 <code class="inline">/robot-ops/screen/play-plan/current</code> 接口，跑通运维端素材与播放方案到机身屏播放链路。</td></tr>
    776. 

  776.       <tr><td>第三阶段</td><td>主菜单页、上方欢迎引导、2×2 大触摸入口、返回待机按钮、图标与文案优化</td><td>已完成前端收口，后续重点进入访客登记流程开发。</td></tr>
    777. 

  777.       <tr><td>第四阶段</td><td>访客登记、预约核验、身份证读取 Mock、数字键盘</td><td>完成核心登记流程。</td></tr>
    778. 

  778.       <tr><td>第五阶段</td><td>路线引导正式前端流程、目的地 Mock、导航状态 Mock</td><td>完成路线引导演示闭环。</td></tr>
    779. 

  779.       <tr><td>第六阶段</td><td>当前播报状态接口、播报浮层、素材暂停/恢复、通知公告列表、声音/静音控制</td><td>优先跑通运维端播报内容与播报任务到机身屏插播展示链路。</td></tr>
    780. 

  780.       <tr><td>第七阶段</td><td>语音指令轮询 Mock、人脸识别结果 Mock、全局异常提示</td><td>完成事件驱动页面跳转能力。</td></tr>
    781. 

  781.       <tr><td>第八阶段</td><td>隐藏系统信息页、屏幕刷新、版本展示</td><td>补充现场维护辅助能力。</td></tr>
    782. 

  782.     </tbody></table>
    783. 

  783.   </div>
    784. 

  784. 

  785.   <div class="section" id="s15"><h2>15. 测试验收要点</h2>
    786. 

  786.     <h3>15.1 页面与交互验收</h3>
    787. 

  787.     <ul>
    788. 

  788.       <li>待机页应支持默认欢迎模式与播放方案模式两种状态，并能通过播放方案是否启用和素材是否为空进行自动切换。</li>
    789. 

  789.       <li>主菜单页应采用上方欢迎引导与下方 2×2 大触摸入口结构，四个入口整体可点击，不依赖小箭头或“点击进入”文字传达可操作性。</li>
    790. 

  790.       <li>1024×768 分辨率下所有页面无横向滚动、无明显遮挡。</li><li>主菜单四个入口清晰可点击，按钮尺寸适合 8 寸触摸屏。</li><li>长时间无操作可自动返回待机。</li><li>访客登记流程完整，支持预约到访和现场登记。</li><li>手机号和身份证号输入使用内置数字键盘。</li><li>路线引导页面流程完整，可从目的地选择到模拟到达。</li><li>通知公告列表和详情可正常展示。</li><li>呼叫工作人员入口有明确占位反馈。</li>
    791. 

  791.     </ul>
    792. 

  792.     <h3>15.2 播放与声音验收</h3>
    793. 

  793.     <ul>
    794. 

  794.       <li>待机状态有播放方案时播放素材，无播放方案时显示欢迎页。</li>
    795. 

  795.       <li>视频素材可播放声音，支持静音和音量调节。</li>
    796. 

  796.       <li>播报内容插播时可暂停当前图片轮播或视频播放，播报结束后恢复原素材播放状态。</li>
    797. 

  797.       <li>屏幕端在待机页应每 2 秒轮询一次 <code class="inline">/robot-ops/screen/broadcast/current</code>，当返回 broadcasting=true 时显示播报浮层。</li>
    798. 

  798.       <li>播报期间不应重置当前播放方案和当前素材索引。</li>
    799. 

  799.       <li>异常提示优先级高于播报和素材广告。</li>
    800. 

  800.     </ul>
    801. 

  801.     <h3>15.3 Mock 与接口替换验收</h3>
    802. 

  802.     <ul>
    803. 

  803.       <li>运维端上传图片/视频素材并创建播放方案后，机身屏应可通过 <code class="inline">/robot-ops/screen/play-plan/current</code> 获取当前播放方案并播放素材。</li>
    804. 

  804.       <li>当运维端未设置当前播放方案、播放方案被禁用或所有素材不可播放时，机身屏应自动回退默认欢迎页。</li>
    805. 

  805.       <li>接口返回的素材 <code class="inline">url</code> 必须是屏幕端浏览器可直接访问的完整地址，例如 <code class="inline">http://192.168.0.30/profile/upload/xxx.mp4</code>。</li>
    806. 

  806.       <li>屏幕端在待机播放期间应每 60 秒检查一次当前播放方案；当接口返回的 <code class="inline">version</code> 变化时，应在当前图片展示结束或当前视频播放结束后切换到新播放方案。</li>
    807. 

  807.       <li>当播放方案更新为无可播放素材或取消当前播放方案时，屏幕端应自动回退默认欢迎页。</li>
    808. 

  808.       <li>所有 Mock 数据均通过统一 api 层获取，后续可替换真实接口。</li>
    809. 

  809.       <li>语音指令、识别结果、预约查询、身份证读取、导航状态均有 Mock 数据和页面响应。</li>
    810. 

  810.       <li>关键用户操作可预留事件上报接口。</li>
    811. 

  811.     </ul>
    812. 

  812.   </div>
    813. 

  813. 

  814.   <div class="section" id="s16"><h2>16. 安全、隐私与异常兜底</h2>
    815. 

  815.     <h3>16.1 隐私与敏感信息处理</h3>
    816. 

  816.     <ul><li>访客手机号、身份证号、访客照片等敏感信息不应长时间停留在屏幕上。</li><li>登记成功或流程超时后，应自动清空本地表单数据和临时识别结果。</li><li>身份证号展示时可考虑脱敏，例如仅展示前 6 位和后 4 位。</li><li>摄像头预览只在识别、核验、登记等明确业务场景展示，不在待机页长期展示。</li><li>屏幕端不应在本地持久化敏感访客信息，确需缓存时应由小主机后端统一处理。</li></ul>
    817. 

  817.     <h3>16.2 异常兜底文案</h3>
    818. 

  818.     <table><thead><tr><th>异常类型</th><th>面向访客文案</th><th>处理建议</th></tr></thead><tbody>
    819. 

  819.       <tr><td>网络异常</td><td>当前网络连接异常，部分功能暂不可用，请稍后再试。</td><td>保留返回待机与重试按钮。</td></tr>
    820. 

  820.       <tr><td>后端服务异常</td><td>服务暂时不可用，请联系现场工作人员。</td><td>隐藏技术错误码，可在系统信息页展示。</td></tr>
    821. 

  821.       <tr><td>身份证读取失败</td><td>身份证读取失败，请重新放置证件或选择手动登记。</td><td>提供重试与手动填写入口。</td></tr>
    822. 

  822.       <tr><td>预约查询为空</td><td>未查询到预约信息，您可以选择现场登记。</td><td>提供转现场登记按钮。</td></tr>
    823. 

  823.       <tr><td>导航不可用</td><td>路线引导功能暂不可用，请联系工作人员。</td><td>返回主菜单或呼叫工作人员。</td></tr>
    824. 

  824.       <tr><td>素材加载失败</td><td>不向访客展示技术提示。</td><td>自动跳过素材，全部失败时显示欢迎页。</td></tr>
    825. 

  825.     </tbody></table>
    826. 

  826.     <h3>16.3 操作安全边界</h3>
    827. 

  827.     <div class="warn">普通访客可见页面不开放重启、关机、开始巡逻、停止巡逻、地图编辑、参数配置等高风险操作。现场维护能力应放入隐藏系统信息页或运维端。</div>
    828. 

  828.   </div>
    829. 

  829. 

  830.   <div class="section" id="s17"><h2>17. 运行部署与现场维护建议</h2>
    831. 

  831.     <h3>17.1 Chromium Kiosk 启动建议</h3>
    832. 

  832.     <div class="code">chromium-browser \
    833. 

  833.   --kiosk \
    834. 

  834.   --noerrdialogs \
    835. 

  835.   --disable-infobars \
    836. 

  836.   --disable-session-crashed-bubble \
    837. 

  837.   http://127.0.0.1/screen</div>
    838. 

  838.     <p>实际命令需根据 Ubuntu 版本、Chromium 安装路径、是否启用硬件加速等情况调整。</p>
    839. 

  839.     <h3>17.2 开机自启建议</h3>
    840. 

  840.     <ul><li>小主机启动后应先启动 Nginx、小主机后端、语音服务等基础服务。</li><li>Chromium Kiosk 建议在本地服务启动完成后再打开，避免首屏接口异常。</li><li>可使用 systemd 或桌面自启动脚本管理 Chromium 启动。</li><li>现场断电重启后，屏幕应自动恢复到待机展示页。</li></ul>
    841. 

  841.     <h3>17.3 前端包更新建议</h3>
    842. 

  842.     <div class="flow">上传 screen-ui-vX.X.X.zip
    843. 

  843. ↓
    844. 

  844. 备份旧版本目录
    845. 

  845. ↓
    846. 

  846. 解压覆盖新版本 dist
    847. 

  847. ↓
    848. 

  848. 刷新 Chromium 页面或重启 Chromium
    849. 

  849. ↓
    850. 

  850. 异常时回滚旧版本</div>
    851. 

  851.     <h3>17.4 现场维护信息建议</h3>
    852. 

  852.     <ul><li>隐藏系统信息页应展示前端版本、后端服务连接状态、本机 IP、机器人编号、屏幕分辨率、当前音量、网络状态。</li><li>系统信息页可提供刷新页面、重新加载配置、返回待机等低风险操作。</li><li>错误日志、接口异常、识别失败等详细排查信息建议上报后端或运维端，不直接展示给访客。</li></ul>
    853. 

  853.   </div>
    854. 

  854. 

  855.   <div class="section" id="s18"><h2>18. 待确认与后续扩展事项</h2>
    856. 

  856.     <table><thead><tr><th>事项</th><th>当前处理</th><th>后续方向</th></tr></thead><tbody>
    857. 

  857.       <tr><td>呼叫工作人员真实方式</td><td>一期保留按钮和占位交互。</td><td>可接入运维端消息、主控平台通知、语音/视频通话。</td></tr>
    858. 

  858.       <tr><td>真实导航接口</td><td>一期使用 Mock 数据。</td><td>对接点位列表、导航开始、导航状态、取消导航接口。</td></tr>
    859. 

  859.       <tr><td>Ubuntu 中文输入体验</td><td>一期数字输入内置键盘，中文输入暂依赖系统软键盘或预置选项。</td><td>结合现场系统环境优化软键盘或减少自由文本输入。</td></tr>
    860. 

  860.       <tr><td>WebSocket/SSE 推送</td><td>一期 HTTP 轮询。</td><td>后续升级为 WebSocket 或 SSE。</td></tr>
    861. 

  861.       <tr><td>竖屏适配</td><td>一期按 1024×768 横屏开发。</td><td>屏幕选型确定后专项适配。</td></tr>
    862. 

  862.       <tr><td>屏幕端 OTA</td><td>一期可手动部署 dist 包。</td><td>后续纳入运维端 OTA 升级模块。</td></tr>
    863. 

  863.       <tr><td>播报 TTS 实现方式</td><td>文档建议由小主机后端调用 TTS/语音服务。</td><td>后续确认 TTS 服务地址、播放完成回调、音频抢占规则。</td></tr>
    864. 

  864.       <tr><td>摄像头预览流格式</td><td>文档建议仅在识别相关页面展示。</td><td>后续确认 RTSP、HTTP-FLV、WebRTC 或 MJPEG 等实现方式。</td></tr>
    865. 

  865.       <tr><td>呼叫工作人员闭环</td><td>一期占位。</td><td>后续确认是通知运维端、现场终端、语音通话还是视频通话。</td></tr>
    866. 

  866.     </tbody></table>
    867. 

  867.   </div>
    868. 

  868. 

  869.   <div class="footer">迎宾巡逻安防机器人机身屏交互系统详细设计开发文档（一期）｜建议版本：V1.1</div>
    870. 

  870. </div>
    871. 

  871. </body>
    872. 

  872. </html>
    873.