LeAI Mobile Component Library
当前移动端组件库按模板真实组件沉淀：商品推荐、多选、门店、首页推荐卡、底部输入框、驱动下载、回答操作等。每个组件展示实际 DOM、依赖 icon 和可复制片段。
首页顶部导航
M-首页-顶部导航
从 m-home-template.html 顶部导航行抽离。包含联想乐享 logo、新建、电话、静音和菜单入口。
调用说明
- 页面顶部固定区域使用，位于内容流上方。
- Logo 从 logos 文件夹调用，功能 icon 从 icons 文件夹调用。
- 系统状态栏不属于该组件，由页面模板单独承载。
<div class="m-navrow" data-component="M-首页-顶部导航"
aria-label="联想乐享顶部导航"> <div class="m-brand"
aria-label="联想乐享"><img src="../logos/logo-mark.png"
alt="" /><img src="../logos/logo-wordmark.png"
alt="联想乐享" /></div> <button
aria-label="新建会话"><img src="../icons/header-add.svg"
alt="" /></button> <button
aria-label="电话"><img src="../icons/header-call.svg"
alt="" /></button> <button
aria-label="静音"><img src="../icons/header-mute.svg"
alt="" /></button> <button
aria-label="菜单"><img src="../icons/header-more.svg"
alt="" /></button> </div>
首页推荐问题卡
M-首页-推荐问题卡
从 m-home-template.html 首页态抽离。用于问候语、推荐问题列表和右箭头行。
调用说明
- 首页首屏使用，必须和底部输入框共同放入 m-home-template.html 验收。
- 推荐问题行点击后填充输入框并触发对应 Query 路由。
- 标题和列表区域使用浅色渐变与白色行卡，不新增营销式装饰。
<div class="container-wrapper"
data-component="M-首页-推荐问题卡"> <div
class="text-wrapper">中午好，观同学</div> <div
class="list"> <div class="item"><div
class="text-wrapper-2">如何加入“乐享慧”产品体验官?</div><div
class="arrow">›</div></div> </div>
</div>
底部输入框
M-聊天-输入框
从模板底部 composer 抽离。包含深度思考、拍搜、SN 识别、语音、输入、添加和发送。
内容由联想乐享AI生成
调用说明
- 支持直接输入；有输入内容时，左侧语音 icon 自动隐藏。
- 输入文字和默认文案均为 400 字重。
- 发送按钮状态由输入内容控制，生成中可切换到 stop 状态。
- 底部 AI 免责声明必须保留。
<div class="m-composer" data-component="M-聊天-输入框">
<button><img
src="../icons/composer-action-reasoning.svg" alt=""
/>深度思考(自动)</button> <div class="frame">
<img class="m-composer-voice-icon"
src="../icons/composer-voice.svg" alt="" /> <input
class="text-wrapper-3" placeholder="推荐一款笔记本" />
<button class="m-send-button"><img
src="../icons/composer-send-active.svg" alt=""
/></button> </div> </div>
商品推荐卡
M-聊天-商品推荐卡
从商品 Query 结果抽离。保留商品 tab、推荐度、商品图、标题、规格、标签、价格和 CTA。
推荐度：已有1项满足
调用说明
- 顶部 tab 横向滚动；点击第二个时 tab 向前移动露出第三个。
- 商品图在移动端缩小并保持固定比例。
- 标签保持普通红色文字样式，不做边框标签。
<div class="product-card" data-component="M-聊天-商品推荐卡"
data-source-component="PC-聊天-商品推荐卡">...</div>
商品多选卡
M-聊天-商品多选卡
从商品推荐后的追问筛选抽离。用于价位、便携性等多选项。
调用说明
- 选项按钮使用线性圆角胶囊。
- 选中态使用 .is-selected，背景为浅紫色。
- 移动端允许换行，但不得压缩文字造成重叠。
<div class="product-multiselect-panel"
data-component="M-聊天-商品多选卡"> <div
class="product-question-group"> <div
class="product-question-title">您的心理价位大概在哪个范围?</div>
<ul class="product-option-list"><li><button
class="product-option
is-selected">7000-10000元</button></li></ul>
</div> </div>
门店推荐卡
M-聊天-门店推荐卡
从门店 Query 结果抽离。包含门店名、类型、地址、营业时间、电话、预约、导航和门店权益。
调用说明
- 门店名称单行超出省略，门店类型不换行。
- 电话和营业时间上下两排展示。
- 预约按钮在左且线性；导航按钮在右且实心。
<div class="store-card" data-component="M-聊天-门店推荐卡"
data-source-component="PC-聊天-门店推荐卡">...</div>
会员权益卡
M-聊天-会员权益卡
从会员权益 Query 结果抽离。包含权益分类 tab、券面、有效期和领取按钮。
调用说明
- tab 横向滚动，点击后切换 active。
-
券卡宽度使用
min(520px, 100%)，移动端不得横向溢出。
<div class="member-coupon-card"
data-component="M-聊天-会员权益卡">...</div>
驱动下载卡
M-聊天-驱动下载卡
从驱动下载 Query 结果抽离。文字在上方，两个按钮在文字下面。
调用说明
- 标题、系统、发布时间统一在按钮上方。
- 按钮行靠右，安装说明为线性，一键下载为实心。
<div class="driver-card"
data-component="M-聊天-驱动下载卡">...</div>
维修预约卡
M-聊天-维修预约卡
从维修 Query 结果抽离。先展示产品类型选择，再生成预约服务卡。
- 设备类型：中小企业
- 设备型号：待补充
- 联想设备：是
- 故障描述：具体现象待现场确认。
调用说明
- 选项按钮使用线性胶囊，已选态填充浅紫。
- 确认预约为实心渐变主按钮，修改信息为线性次按钮。
<div class="repair-booking-card"
data-component="M-聊天-维修预约卡">...</div>
618 活动卡
M-聊天-618活动卡
从活动 Query 结果抽离。展示活动视觉、标题和详情入口。
调用说明
-
卡片宽度固定为
268px并允许max-width: 100%。 - 活动视觉区域保持深紫背景和白色信息层级。
<a class="consultation-activity-recommend"
data-component="M-聊天-618活动卡">...</a>
回答操作栏
M-聊天-回答操作栏
从回答结尾抽离。用于重新生成、复制、语音、展开、赞、踩。
调用说明
- 回答内容结束后显示，位于结果卡片下方。
- icon 直接从 icons 文件夹调用。
- 图标尺寸和间距以模板为准。
<div class="m-answer-actions"
data-component="M-聊天-回答操作栏">...</div>