LeAI Component Library
v0.4.6-stage 以 pc-home-template.html 为当前源模板。本页登记首页/聊天态输入框和 Query 业务卡片，DOM class、尺寸、状态与资产路径必须与源模板保持一致。
9可调用组件
100%本地可用
首页输入框
PC-首页-输入框首页欢迎态使用，居中与欢迎标题、能力标签和快捷问题组合。
约束
- 宽
min(673px,100%)，默认高100px，圆角8px。 - 默认显示“思考”模式；发送按钮位于右下角，快速/思考位于左下角。
- 存在产品筛选 tag 时高度为
132px，tag 容器left:14px。
<div class="background-border-wrapper" data-component="PC-首页-输入框">
<div class="background-border-2 has-default-prompt">
<div class="composer-selected-tags" aria-live="polite"></div>
<div class="container-8">
<div class="background"><div class="textarea-wrapper"><div class="textarea is-empty" role="textbox" aria-label="输入问题" contenteditable="true" data-placeholder="联想小新Pad有优惠吗？"></div></div></div>
<div class="radiogroup-radio thinking-active" role="group" aria-label="回答模式"><button type="button" data-mode="quick">快速</button><button type="button" class="active" data-mode="thinking">思考</button></div>
<button class="send-icon" type="button" aria-label="发送"></button>
</div>
</div>
</div>聊天态输入框
PC-聊天-输入框发送消息后固定在聊天工作区底部，宽度随工作区扩展。
约束
- 宽
min(936px, calc(100vw - sidebar - 96px))，默认高100px。 - 在
body.chat-mode中固定于对话工作区底部40px，不遮挡回答列表。 - 输入、回车发送、Shift+Enter 换行、模式切换和产品 tag 行为与首页输入框共享。
<div class="background-border-wrapper chat-composer" data-component="PC-聊天-输入框">
<div class="background-border-2 has-default-prompt">
<div class="composer-selected-tags" aria-live="polite"><span class="composer-selected-tag">主流网游（如LOL、CSGO等）<button type="button" aria-label="移除标签">×</button></span></div>
<div class="container-8">
<div class="background"><div class="textarea-wrapper"><div class="textarea" role="textbox" aria-label="输入问题" contenteditable="true">联想小新Pad有优惠吗？</div></div></div>
<div class="radiogroup-radio thinking-active" role="group" aria-label="回答模式"><button type="button" data-mode="quick">快速</button><button type="button" class="active" data-mode="thinking">思考</button></div>
<button class="send-icon" type="button" aria-label="发送"></button>
</div>
</div>
</div>商品推荐卡
PC-聊天-商品推荐卡Query：“游戏本推荐”、“商品”、“推荐商品”。包含 tab、推荐度、主商品和后续操作。
推荐度：已有1项满足
联想拯救者Y7000X 2026 15英寸电竞游戏本笔记本电脑 碳晶黑
英特尔® 酷睿™ Ultra 7 251HX丨Windows 11丨15英寸丨16GB丨1TB SSD丨RTX5060 8G
预估到手：¥12999¥13999
约束
- 默认选中第一个 tab。
- 卡片宽
min(490px,100%)，图片142px，标题和规格单行省略。 - 生成中和完成后商品名字重均为
600。
<div class="product-card" data-component="PC-聊天-商品推荐卡">...</div>商品多选卡
PC-聊天-商品多选卡商品推荐后的预算、便携性和游戏类型筛选。
您的心理价位大概在哪个范围?
您是否对笔记本电脑的便携性有特别要求?
约束
- 面板宽
min(640px,100%)，选项列表不使用左偏移。 - 未选中：透明底色、
#D3BFD2描边、#4D144A文字；选中：#F9EFF6底色，描边和文字保持不变。 - 同组单选，不同问题组可并存；选中后同步到 Composer tag。
<div class="product-multiselect-panel" data-component="PC-聊天-商品多选卡">...</div>门店推荐卡
PC-聊天-门店推荐卡Query：“门店推荐”。展示门店信息、距离、导航、预约和可领权益。
1
联想智生活体验店（北京市海淀区大悦城店）销售门店
北京市海淀区清河中街68号
可领取门店权益券 拯救者双屏畅玩两件套
约束
- 卡片列表宽
min(500px,100%)，背景使用蓝粉渐变。 - “换一些门店”必须使用
product-card-refresh.svg。
<div class="store-card" data-component="PC-聊天-门店推荐卡">...</div>会员权益卡
PC-聊天-会员权益卡Query：“会员权益”。支持商品/服务/门店权益 tab 和领取反馈。
¥50满5000元可用
联想商城会员专享优惠券
有效期至 2026-07-31
约束
- 权益卡宽
min(520px,100%)，tab 下划线宽31px。 - 券面使用条件文字为
10px / 13px。 - 领取成功使用顶部 toast，不移动卡片布局。
<div class="member-benefit-answer" data-component="PC-聊天-会员权益卡">...</div>驱动下载卡
PC-聊天-驱动下载卡Query：“驱动下载”。已识别设备时展示驱动列表，信息不足时展示引导。
Chipset Driver 芯片组驱动
约束
- 单卡最小高
88px，列表宽min(520px,100%)。 - 安装说明为次按钮，一键下载为红紫渐变主按钮。
<div class="driver-card" data-component="PC-聊天-驱动下载卡">...</div>维修预约卡
PC-聊天-维修预约卡Query：“维修”。先选产品类型，再生成预约信息卡。
预约服务
- 设备型号：待补充
- 联想设备：是
- 故障描述：具体现象待现场确认。
约束
- 选择产品类型后禁用本组其他选项，保留已选态的完整不透明度。
- 预约卡宽
min(340px,100%)，确认后按钮文案变为“预约成功”。
<div class="repair-booking-card" data-component="PC-聊天-维修预约卡">...</div>618 活动卡
PC-聊天-618活动卡Query：“618”、“活动”。展示活动规则和单个活动推荐卡。
约束
- 活动卡宽
268px，主视觉比例268/150，圆角8px。 - 当前模板使用 Aubergine 色块作为活动主视觉。
<a class="consultation-activity-recommend" data-component="PC-聊天-618活动卡" href="#">...</a>