LeAI Component Library

首页新建对话输入框

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-商城-顶部轮播广告横幅

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

调用说明

来源：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 不适用。

首页新建对话输入框

联想乐享帮你 找服务

调用说明

聊天态输入框

调用说明

首页内容标签卡片

调用说明

侧栏历史记录抽屉

调用说明

顶部悬浮主导航

调用说明

导购默认态智能体面板

调用说明

商品悬浮推荐提问卡

调用说明

商城顶部轮播广告横幅

拯救驾临 执御客川

调用说明

商城商品卡片

小新AIR13

小新AIR13

调用说明

商品悬停智能鼠标

调用说明

详情页商品购买信息区

小新 Air 13 2026 AI 轻薄本

调用说明

详情页用户评价智能总结

轻薄但接口很完整

屏幕与性能兼顾

官方服务更放心

移动办公体验优秀

调用说明

组件调用契约与状态矩阵

统一依赖

组件级适用状态

联想乐享帮你找服务

拯救驾临执御客川