全集组件库 · Interactive Components

组件命名遵循 PC-XX位置-XX功能。本页是设计体系的组件层：上游遵循 standards/design-system-complete.html 和 icon-board.html，下游服务页面模板。每个组件都提供预览、状态、调用说明和可复制片段。

# LeAI Component Library

乐享组件保持规范 token、SVG icon 命名及交互形态，并提供可复制的调用说明。完整页面还原时，必须将本页组件放回对应页面模板中验收布局、滚动、响应式和业务交互。

10 组件
100%本地可用

## 首页新建对话输入框

`PC-首页-首页新建对话输入框`

适用于首页首屏大标题下的服务咨询输入框，默认仅保留深度思考模式，支持 3 个常驻能力标签、更多菜单、图片入口和发送态。

### 联想乐享帮你 找服务

联想乐享已收到你的问题，会优先结合优惠、国补、服务权益给出建议。内容由 AI 生成，请核对关键信息。

### 调用说明

- 根节点使用 `data-component="PC-首页-首页新建对话输入框"`。
- 输入非空时给发送按钮添加 `.ready`。
- 模式按钮使用 `aria-pressed` 表达选中状态。

`<form class="leai-composer" data-component="PC-首页-首页新建对话输入框"> <textarea placeholder="最近有什么优惠活动？"></textarea> <button class="leai-mode active" type="button">深度思考</button> <button class="leai-mode" type="button">商品导购</button> <button class="leai-mode" type="button">解决方案</button> <button class="leai-mode" type="button">门店查询</button> <button class="leai-more" type="button">更多 <span class="leai-more-menu"><span>职场认证</span><span>服务预约</span></span> </button> <button class="leai-send" type="submit"><img src="../icons/composer-send.svg" alt="" /></button> </form>`
AI 结果面必须带免责声明：内容由联想乐享基于当前信息生成，请在使用前核对关键信息。

## 聊天态输入框

`PC-聊天-聊天态输入框`

线上首页聊天态输入框组件。用于对话开始后的底部 composer，支持模式切换、业务范围入口、更多菜单、图片入口、发送 idle/ready 状态和 AI 免责声明。

内容由联想乐享基于当前信息生成，请在使用前核对关键信息。

聊天态输入框已提交，发送按钮会根据输入内容在 idle / ready 间切换。

### 调用说明

- 根节点使用 `data-component="PC-聊天-聊天态输入框"`，推荐保留线上类名 `.lxfd-composer`。
- 输入为空时发送按钮添加 `.idle`；输入非空时移除 `.idle`。
- 首页全屏输入框默认仅保留 `深度思考`；不展示 `联网搜索`。
- 能力标签默认 `visibleCount = 3`：`商品导购`、`解决方案`、`门店查询` 常驻展示。
- `更多` 菜单只展示剩余能力：`职场认证`、`服务预约`，不得重复常驻标签。
- 1920px 及以上大屏仍保持 3 个常驻标签 + 更多，不自动展开全部能力标签。
- 点击常驻标签或更多菜单项，直接进入对话并发送对应意图。
- 更多业务入口给 `.lxfd-scope-more` 添加 `.open`，并同步 `aria-expanded`。
- 聊天态必须保留底部 AI 免责声明。

`<form class="lxfd-composer" data-component="PC-聊天-聊天态输入框"> <textarea placeholder="最近有什么优惠活动？"></textarea> <div class="lxfd-comp-actions"> <div class="lxfd-comp-left"> <button class="lxfd-toggle on" type="button" aria-pressed="true">深度思考</button> </div> <div class="lxfd-scope-actions"> <button class="lxfd-toggle lxfd-scope-chip" type="button">商品导购</button> <button class="lxfd-toggle lxfd-scope-chip" type="button">解决方案</button> <button class="lxfd-toggle lxfd-scope-chip" type="button">门店查询</button> <div class="lxfd-scope-more"> <button class="lxfd-toggle lxfd-scope-more-btn" type="button" aria-expanded="false">更多</button> <div class="lxfd-scope-menu" role="menu"> <button class="lxfd-toggle lxfd-scope-chip" type="button" role="menuitem">职场认证</button> <button class="lxfd-toggle lxfd-scope-chip" type="button" role="menuitem">服务预约</button> </div> </div> </div> <button class="lxfd-img-btn" type="button">...</button> <button class="lxfd-send idle" type="submit"><img src="../icons/composer-send.svg" alt="" /></button> </div> </form> <p class="lxfd-footnote">内容由联想乐享基于当前信息生成，请在使用前核对关键信息。</p>`

## 首页内容标签卡片

`PC-首页-内容标签卡片`

用于首页新品、活动、新闻、案例切换模块，卡片支持 hover 抬升和 tab 数据切换。

### 调用说明

- Tab 使用 `.leai-tab.active` 控制选中态。
- 卡片推荐使用 3 列；窄屏可降为单列。
- 图片引用当前 skill 的 `../img` 目录。

`<div class="pc-home-content-tabs" data-component="PC-首页-内容标签卡片"> <div class="leai-tabs">...</div> <div class="leai-card-grid">...</div> </div>`

## 侧栏历史记录抽屉

`PC-侧栏-历史记录抽屉`

用于展开历史记录、新建对话和底部权益提示，支持新增历史、选中历史和收起状态。

历史记录
推荐商品
推荐笔记本电脑
你好
教育优惠怎么叠加
查询附近门店
推荐商品
企业采购方案
推荐笔记本电脑
乐豆商城 · 积分可抵现，会员日翻倍，详情见会员中心。

### 调用说明

- 抽屉宽度建议 300px，独立滚动历史列表。
- 当前历史项添加 `.active`。
- 收起按钮应与侧栏状态机联动。

`<aside class="pc-history-drawer" data-component="PC-侧栏-历史记录抽屉"> <button class="history-new">＋ 新建对话</button> <div class="history-list">...</div> </aside>`

## 顶部悬浮主导航

`PC-顶部-悬浮主导航`

适用于首页及频道页顶部悬浮导航，默认显示当前会话标题，展开后在同一轨道展示主频道。

### 调用说明

- 默认态显示当前会话标题；鼠标 hover、键盘 focus 或点击标题时，在同一条 flex 轨道柔和展开导航。
- 默认态标题右侧显示向下箭头；展开后箭头移动到导航最右侧并旋转为收起方向。
- 展开态当前会话标题置于首位并使用淡紫底色；频道项 hover 只切换深紫文字，不增加背景或激活下划线。
- 点击标题切换 `.expanded`，并同步 `aria-expanded`；当前频道给 `.nav-item` 添加 `.active`。
- 适用模板：`home-fullscreen-dialog-template.html`、`shop-chat-page-template.html`、`product-detail-page-template.html`。
- 禁止回退为旧的箭头胶囊、绝对定位浮层或展开时引发布局跳动的实现。

`<nav class="pc-floating-nav" data-component="PC-顶部-悬浮主导航"> <button class="nav-current" aria-expanded="false" aria-controls="pcFloatingNavMenu"> <span class="nav-current-label">开启新对话</span> </button> <div class="nav-menu" id="pcFloatingNavMenu" role="menu"> <button class="nav-item active" role="menuitem" data-page="home">首页</button> <button class="nav-item" role="menuitem" data-page="personal">个人及家庭</button> <button class="nav-item" role="menuitem" data-page="business">中小企业</button> <button class="nav-item" role="menuitem" data-page="enterprise">政教及大企业</button> <button class="nav-item" role="menuitem" data-page="brand">品牌</button> </div> </nav>`

## 导购默认态智能体面板

`PC-侧栏-导购默认态智能体面板`

购物导购页左侧完整默认态，组合顶部工具、欢迎语、快捷问题、快捷入口和底部输入框。

### 我是联想乐享

有任何问题随时告诉我

深度思考(自动)

### 调用说明

- 来源：`shop-chat-page-template.html` 的左侧 `.assistant-panel` 默认态。
- 适用路由：`/shop-chat/`、`/b-chat/`、`/biz-chat/`；作为组合组件调用，不替代独立输入框组件。
- 顶部工具依次为新建对话、历史记录、换位和全屏；必须保留固定图标盒与可访问名称。
- 快捷问题点击后进入聊天态；输入为空时发送按钮禁用，输入后切换为可发送状态。
- 支持 default、quick-item hover/focus、composer focus、disabled send、history open、chat-start 和 panel collapsed 状态。
- 禁止用于官网营销首屏或全屏首页；全屏对话应调用 `home-fullscreen-dialog-template.html`。

`<aside class="pc-guide-panel-demo" data-component="PC-侧栏-导购默认态智能体面板" aria-label="联想乐享 AI 助手"> <div class="guide-panel-tools">...新建对话 / 历史记录 / 换位...</div> <button class="guide-panel-toggle" aria-label="对话全屏">...</button> <div class="guide-panel-welcome"> <h3>我是联想乐享</h3> <p>有任何问题随时告诉我</p> <div class="guide-question-list">...五条快捷问题...</div> </div> <div class="guide-panel-bottom"> <div class="guide-shortcuts">...客服 / 教育特惠 / 以旧换新 / 更多...</div> <form class="guide-panel-composer">...输入与发送操作...</form> </div> </aside>`

## 商品悬浮推荐提问卡

`PC-侧栏-商品悬浮推荐提问卡`

用户在商品卡停留后显示商品上下文、AI 推荐摘要和三条可直接提问的问题。

ThinkPad X1 Carbon 2026
¥14,999 起
你在看
这款拯救者配置拉满，打游戏、剪视频、跑 AI 都流畅，硬核玩家用着超爽。
乐享建议你问问
深度思考(自动)

### 调用说明

- 来源：`shop-chat-page-template.html` 的 `.hover-prompt-panel .pop` 和当前 `app.js` 渲染结构。
- 商品卡连续停留 6 秒后出现；显示 8 秒后自动关闭。手动关闭与自动关闭使用同一折叠动画。
- 商品缩略图、名称、价格和推荐摘要必须与当前悬浮商品同步；API 摘要失败时使用保守默认文案。
- 问题按钮点击后把完整问题写入当前输入框、聚焦输入区，并进入可发送状态。
- 支持 opening、visible、question hover/focus、closing 和 reduced-motion 状态。
- 推荐摘要属于 AI 生成内容，正式页面需保留页面级 AI 免责声明。

`<article class="hover-reco-pop" data-component="PC-侧栏-商品悬浮推荐提问卡"> <button class="hover-reco-close" aria-label="关闭商品推荐问题">✕</button> <div class="hover-reco-context">...商品缩略图 / 名称 / 价格 / 你在看...</div> <div class="hover-reco-body"> <div class="hover-reco-summary">...AI 推荐摘要...</div> <div class="hover-reco-divider"><span>乐享建议你问问</span></div> <div class="hover-reco-actions">...三条推荐问题...</div> </div> </article>`

## 商城顶部轮播广告横幅

`PC-商城-顶部轮播广告横幅`

用于商城内容区顶部的品牌活动广告，支持双图切换、营销文案和详情入口。

2026 拯救者PC新品震撼来袭

### 拯救驾临 执御客川

### 调用说明

- 来源：`shop-chat-page-template.html` 内容区顶部 `.hero`、`.hero-slides` 和 `.hero-copy`。
- 适用路由：`/shop-chat/`、`/b-chat/`、`/biz-chat/`；默认高度 212px、圆角 16px。
- 图片必须使用已审核活动素材；组件当前复用 `banner1.jpg` 和 `banner2.jpg`。
- 支持 default、hover image zoom、active slide、CTA hover/focus、loading、empty 和 collapsed 状态。
- 装饰性轮播图使用空替代文本；活动名称和行动入口由可见文案提供。自动轮播时需提供暂停能力。
- 禁止用于全屏对话首页或替代商品推荐卡；移动端需按素材安全区重新裁切。

`<section class="pc-mall-hero-banner" data-component="PC-商城-顶部轮播广告横幅" aria-label="商城活动"> <div class="mall-hero-slides" aria-hidden="true"> <img class="mall-hero-slide is-active" src="assets/img/banner1.jpg" alt="" /> <img class="mall-hero-slide" src="assets/img/banner2.jpg" alt="" /> </div> <div class="mall-hero-copy"> <p class="mall-hero-kicker">2026 拯救者PC新品震撼来袭</p> <h3 class="mall-hero-title">拯救驾临 执御客川</h3> <button class="mall-hero-cta">了解详情</button> </div> <div class="mall-hero-dots">...轮播状态...</div> </section>`

## 商城商品卡片

`PC-商城-商品卡片`

用于导购商品网格和商城楼层，展示商品图、标题、规格、优惠标签和价格。

### 小新AIR13

2.5K 120Hz｜轻至1.1kg

教育特惠国补优惠

¥ 9799起

### 小新AIR13

2.5K 120Hz｜轻至1.1kg

¥ 9799

### 调用说明

- 来源：`shop-chat-page-template.html` 的 `.product-card` 当前商城皮肤。
- 图片区域固定 155px，图片使用 `object-fit: contain`；标题、规格保持单行省略。
- 支持 default、hover/focus、`.is-selected`、`.is-disabled`。
- 品牌角标按模板最终样式隐藏，不在卡片图片上方显示。
- 卡片可点击时添加 `tabindex="0"`；商品图必须提供准确替代文本。
- 禁止把推荐理由、详情长文或多组 CTA 塞入商品卡；复杂信息进入详情页或推荐浮层。

`<article class="pc-shop-product-card" tabindex="0" data-component="PC-商城-商品卡片"> <div class="shop-card-visual"><img src="assets/img/shop-1.jpg" alt="小新 AIR 13 商品图" /></div> <h3 class="shop-card-title">小新AIR13</h3> <p class="shop-card-spec">2.5K 120Hz｜轻至1.1kg</p> <div class="shop-card-promos"><span class="shop-card-promo">教育特惠</span></div> <p class="shop-card-price">¥ 9799<small>起</small></p> </article>`

## 商品悬停智能鼠标

`PC-商城-商品悬停智能鼠标`

用户在商城商品卡片上移动并短暂停留时，以智能鼠标和“乐享正在帮你”气泡提示 AI 推荐即将出现。

小新AIR13 将鼠标移入并停留片刻
小新AIR13 智能鼠标会跟随当前位置
乐享正在帮你

### 调用说明

- 来源：`shop-chat-page-template.html` 的商品卡 hover dwell 智能鼠标方案 A。
- 仅在鼠标精确指针设备上启用；进入商品卡后隐藏系统光标，智能箭头跟随指针。
- 停留约 600ms 后展示“乐享正在帮你”气泡；离开卡片立即收起并恢复系统光标。
- 浮层必须使用 `pointer-events:none`，不得阻断商品卡点击；减少动态效果设置下关闭复杂动画。
- 依赖 token：`--aubergine`、`--brand-red`、`--ease`；依赖 icon：`smart-cursor.svg`。
- 状态：default 隐藏、hover/focus 跟随、active 醒目提示；disabled/loading/empty/error 对本装饰提示不适用。

`<div class="pc-smart-cursor-demo" data-component="PC-商城-商品悬停智能鼠标" data-smart-cursor-demo> <div class="smart-ai-cursor" aria-hidden="true"> <img class="smart-ai-cursor-arrow" src="assets/icons/smart-cursor.svg" alt="" /> <div class="smart-ai-cursor-label"> <span class="smart-ai-cursor-logo"><img src="assets/logos/logo-mark.png" alt="" /></span> <span>乐享正在帮你</span> </div> </div> </div>`

## 详情页商品购买信息区

`PC-详情页-商品购买信息区`

商品详情页首屏核心购买模块，组合商品主图、AI 推荐理由、配置选择、价格、购买操作和服务保障。

AI 推荐热销

### 小新 Air 13 2026 AI 轻薄本

酷睿 Ultra 7｜32GB LPDDR5x｜1TB SSD｜13.3 英寸高色域屏｜轻至 1.08kg

✦乐享推荐轻薄机身、旗舰屏幕与企业级可靠性兼顾，适合高频移动办公和 AI 多任务。由联想乐享 AI 生成 · 仅供参考

本系列共 4 款配置 · ¥12,999 - ¥18,999
新品首发商务旗舰会员专享以旧换新

¥12,999¥14,999 限时省 ¥2,000

联想官方正品官方渠道与原厂保障
180 天只换不修符合规则可享换新服务
14 天无理由退换购买前请核对适用规则
商品编号：83KX0007CD

### 调用说明

- 来源：`product-detail-page-template.html` 当前详情页首屏 `.detail-main`。
- 主图区不放缩略图；主图使用 `object-fit: contain`，禁止裁切商品主体。
- 配置项点击后切换选中态并同步主价格；价格、库存与商品编号必须由商品接口提供。
- AI 推荐理由必须保留“由联想乐享 AI 生成 · 仅供参考”说明。
- 购买、对比、购物车按钮应接入真实业务流程，不得仅保留静态反馈。

`<section class="pc-detail-purchase" data-component="PC-详情页-商品购买信息区"> <div class="pc-detail-gallery">...商品标签与主图...</div> <div class="pc-detail-info"> <h3 class="pc-detail-title">小新 Air 13 2026 AI 轻薄本</h3> <p class="pc-detail-reason">...AI 推荐理由与免责声明...</p> <div class="pc-detail-variants">...配置选择...</div> <p class="pc-detail-price">...价格与优惠...</p> <div class="pc-detail-actions">...购买操作...</div> <div class="pc-detail-services">...服务保障...</div> </div> </section>`

## 详情页用户评价智能总结

`PC-详情页-用户评价智能总结`

汇总综合评分、星级分布和乐享 AI 评价摘要，并通过横向卡片展示已购用户评价。

### 用户评价

由联想乐享 AI 总结的核心产品评价 · 仅供参考

4.9/ 5 综合评分
★★★★★
5★76%
4★18%
3★4%
2★1%
1★1%
✦✨ 乐享 AI 总结智能摘要 · 仅供参考

用户普遍认可这款产品的轻薄便携、屏幕素质与商务可靠性，适合移动办公和高频差旅；少数用户希望进一步提升高负载续航表现。

屏幕素质高性能强悍做工精致适合创作

#### 轻薄但接口很完整

出差携带负担很小，键盘手感和屏幕观感都很稳，办公续航也符合预期。

轻薄便携商务办公
陈先生 · 已购用户

#### 屏幕与性能兼顾

OLED 屏幕细腻，日常多任务和轻度 AI 工作流都很流畅，风扇控制比较克制。

屏幕清晰性能稳定
林女士 · 已购用户

#### 官方服务更放心

到货包装完整，迁移资料和售后咨询响应都很快，适合作为长期主力机。

官方服务做工精致
周先生 · 已购用户

#### 移动办公体验优秀

机身坚固，会议、文档和远程协作切换顺畅，指纹登录很方便。

可靠耐用移动办公
王女士 · 已购用户

### 调用说明

- 来源：`product-detail-page-template.html` 的详情页 `.detail-reviews-section.lx-review-b`。
- 评分、分布比例、评价正文和点赞数必须来自真实评价数据，不允许使用 AI 生成内容伪装为用户评价。
- AI 摘要必须与用户评价区分，并始终显示“智能摘要 · 仅供参考”。
- 左右按钮以一张评价卡的宽度滚动；评价卡区域保留键盘和触控板横向滚动能力。

`<section class="pc-detail-reviews" data-component="PC-详情页-用户评价智能总结"> <header class="pc-review-header">...标题与 AI 说明...</header> <div class="pc-review-overview"> <div class="pc-review-rating">...综合评分与星级分布...</div> <div class="pc-review-ai">...乐享 AI 总结与标签...</div> </div> <div class="pc-review-grid">...真实用户评价卡片...</div> </section>`

## 组件调用契约与状态矩阵

`四层治理`

所有可调用组件共享以下依赖和状态声明；组件自身“调用说明”中的专有约束优先。

### 统一依赖

- 基础 token：品牌红、茄紫、薰衣草中性色、8–20px 圆角、轻量阴影与统一缓动；禁止组件私自创建同义色值。
- 图标依赖：只能引用 `assets/icons/icon-board.html` 已登记的 SVG；调用页面使用 `<img>`，不得以字符、内联 SVG、base64 或远端 media 资源替代。
- 默认/hover/focus/active/disabled：所有可点击根节点必须具备；不可点击展示组件需明确标记“不适用”。
- loading：数据型卡片使用 shimmer，任务型组件说明正在执行的动作；纯装饰组件不适用。
- empty：保留组件结构并提供 2–4 个可执行入口；纯导航和装饰组件不适用。
- error：保留用户输入，提供一个主要恢复动作；AI 请求失败时使用本地联想乐享兜底答案和 AI 免责声明。

### 组件级适用状态

- 输入框、抽屉、导航、商品卡、详情购买区、评价区：default / hover / focus / active / disabled / loading / empty / error。
- 标签卡、广告横幅、推荐提问卡：default / hover / focus / active / disabled；无远端数据时补 empty/error。
- 商品悬停智能鼠标：default / hover / focus / active；disabled、loading、empty、error 不适用。

已复制