以 m-home-template.html 为事实源的移动端设计规范

字体层级

规范与页面一级标题 · 24–38px / 700

移动端模块标题 · 17–22px / 700

AI 回答正文 · 15px / 26px / 400

规格、元信息与辅助说明 · 12–13px / 400

基础 Token

移动原则

• 页面按模板固定为：状态栏、品牌 header、消息流、组件区、底部 composer。
• 用户问题气泡右对齐，回答内容从左侧开始进入自然文本流。
• Skill 调用区、结果卡片和底部输入框都从 leai-component.html 调用，不在规范页重新绘制。
• 首页布局调用 M-首页-顶部导航、M-首页-推荐问题卡 和 M-聊天-输入框 三个组件拼装。
• 模板只负责组件在页面中的位置、滚动、固定底部和免责声明保留。

真实对话流组件图

按模板发送后状态展示：用户气泡、Skill 完成区、回答正文、结果卡、回答操作。

推荐一款笔记本

已完成1个Skill工具调用

Skill (商品推荐服务) 已调用

根据你的需求，以下是几款符合当前市场趋势和性能表现的笔记本电脑推荐：

YOGA Pro 14s 2024：这款AI高能本搭载英特尔酷睿 Ultra 7处理器。

推荐度：已有1项满足

联想拯救者Y7000X 2026

英特尔® 酷睿™ Ultra 7 251HX

500元优惠券 以旧换新

状态组件图

展示模板中真实状态类对应的视觉结果，覆盖发送前、Skill 运行、结果展示。

发送前：首页态 .m-mobile-chat-feed 隐藏

Skill 运行中

正在分析用户意图

Skill 已展开 已完成1个Skill工具调用

Skill (门店查询服务) 已调用

回答完成后 .m-result-cards.is-visible .m-answer-actions.is-visible

页面骨架

• .m-home-topbar 固定承载状态栏和顶部导航； 其中导航行调用 M-首页-顶部导航。
• .background 承载首页问候和推荐问题卡；首页卡调用 M-首页-推荐问题卡。
• .m-mobile-chat-feed 是聊天滚动容器，默认 display:none。
• 底部 .div-2 固定承载快捷按钮、输入框和 AI 免责声明，输入框调用 M-聊天-输入框。

状态切换

• 未发送时：展示 .background 首页卡片，隐藏 .m-mobile-chat-feed。
• 发送后：给 .screen 增加 .has-sent-message，首页内容透明并禁用点击，聊天流显示。
• 输入框输入态：.composer-has-text 控制发送按钮状态， .composer-user-typing 控制语音 icon 隐藏。
• 新建会话按钮 .m-new-session-button 调用 resetSession()，清空消息并回到首页态。

发送与渲染顺序

1. 推荐问题、发送按钮或回车触发 sendMessage()。
2. 用户问题写入 .m-user-bubble，右对齐，最大宽度 258px。
3. appendAssistantFlow() 创建 .m-assistant-flow。
4. 先展示 .m-skill-summary 的运行态，再展开 .m-skill-region。
5. .m-answer-content 模拟打字输出，完成后渲染结果卡和回答操作。

Skill 调用区

• .m-skill-summary 初始文案为「正在分析用户意图」， 900ms 后切到「正在获取数据」。
• 1800ms 后进入完成态：.is-complete，文案为「已完成1个Skill工具调用」。
• .m-skill-region 展示成功 icon 和 Skill (服务名称) 已调用。
• Summary 支持点击和键盘 Enter/Space 展开收起，必须保留 aria-expanded。

Query 路由

回答流规则

• 回答正文统一进入 .m-answer-content，字号 15px，行高 26px。
• renderAnswerContent() 会识别 标题： 结构并用 strong 加粗标题。
• .m-result-cards 默认隐藏，回答打字结束后增加 .is-visible。
• 结果卡内部 tab、多选项等交互在卡片容器内代理处理，不影响主消息流。
• .m-answer-actions 在结果卡之后显示，固定调用 chat-action-regenerate/copy/voice/expand/like/dislike 六个 icon。

当前可调用组件

• M-首页-顶部导航、M-首页-推荐问题卡
• M-聊天-输入框
• M-聊天-商品推荐卡、M-聊天-商品多选卡
• M-聊天-门店推荐卡、M-聊天-会员权益卡
• M-聊天-驱动下载卡、M-聊天-维修预约卡、M-聊天-618活动卡
• M-聊天-回答操作栏

移动同步边界

从 PC 同步的结果卡片必须保留 PC 原始 class 和视觉层级。移动端只允许做宽度、自适应、滚动、换行、截断、图片缩放和按钮换行。

可点击选择态

M-聊天-商品多选卡、M-聊天-会员权益卡、M-聊天-维修预约卡 必须支持真实点击切换。商品和维修选项同步 .is-selected 与 aria-pressed；会员 tab 同步 .is-active、aria-selected 和券面内容。

主模板

覆盖移动端首页态、聊天态、底部输入框、Skill 调用、7 个 Query 结果场景和回答操作区。

POC 规则

新移动端 POC 复制主模板开始，在 Skill 目录外产出。规范不足时先复用最接近组件，评审通过后再沉淀。

仅当任务是生成一个新的 POC 页面时，默认强制执行以下两条原文；评审、说明、审查或修改已有页面时不自动触发：

严格按照模版框架m-home-template.html 和skill里面的规范design-system-complete.html 生成poc 及交互，生成的POC就是按照m-home-template.html模版框架生成

本次任务只能在 Skill 目录外产出独立 POC，严禁修改模板、规范、icon 库、组件库、SKILL.md 和 references。
必须复制 assets/templates/m-home-template.html 作为页面起点，保留首页态、聊天态、移动端 header、输入框和现有 Query 路由；把新功能实现为明确的 Query 路由或现有页面入口。优先复用 assets/component/leai-component.html 的组件和 assets/icons/icon-board.html 的正式资产。
请直接输出完整、可运行的 POC HTML。若规范不足，先用最接近的现有组件完成 POC，并单独列出建议由设计师后续沉淀的内容。