Lenovo Lexiang 4.0 · PC Standard
联想乐享4.0PC端规范
本规范以当前可运行的 pc-home-template.html 为唯一页面事实源，统一首页全屏对话、侧栏、输入框、Skill 调用、回答状态、正式业务卡片和响应式行为。产品经理与研发只读调用，设计角色负责版本写入。
规范来源与层级
所有高保真 POC 按“规范 → Icon → 卡片组件 → 页面模板”的顺序调用；页面外壳和回答壳属于模板结构，不登记成独立卡片组件。
总规范
本文件定义从当前模板提炼出的 token、布局、状态、卡片和验收规则。
Icon 库
icon-board.html 登记 21 个精确 SVG 文件名，不允许使用 -1 或备选别名。
组件库
leai-component.html 登记首页/聊天态输入框和 7 个 Query 业务卡片。
页面模板
pc-home-template.html 承载完整页面结构、对话流程和交互实现。
视觉基础
颜色体系由品牌主色、浅色渐变、五级紫色、状态辅助色和黑白灰组成。主渐变用于主按钮与重要强调，浅色渐变用于用户对话气泡，状态色只表达对应语义。
主色
乐享渐变深色
#4D144A → #B8252E
主按钮、重要强调和品牌渐变。
乐享标准主色
#4D144A
选中、链接、图标和重点描边。
紫色与浅色渐变
乐享渐变浅色
#FCF2F8 → #E3EAFD
用户对话气泡。
乐享紫色 1
#D3BFD2
按钮描边等。
乐享紫色 2
#E2DDEB
按钮描边、分割线等。
乐享紫色 3
#F9EFF6
按钮选中后的强调底色。
乐享紫色 4
#F3F0F7
按钮选中、弱强调底色。
乐享紫色 5
#FCFAFF
默认卡片底色等。
辅助色
乐享状态黄
#FFF4E3
提示、待处理与浅色标签。
乐享状态绿
#48D39E
成功、可用与完成状态。
乐享状态红
#FF2F2F
错误、价格和高优先级提醒。
黑白灰
乐享黑 0
#000000
最强标题与高对比内容。
乐享黑 1
#252525
主要正文。
乐享黑 2
#454545
次强文字与文本按钮。
乐享黑 3
#979797
弱化文字与辅助信息。
乐享黑 4
#606060
次级正文与说明。
乐享黑 5
#F6F6F6
中性弱背景。
白色
#FFFFFF
主工作区、卡片和浮层底色。
字体层级
规范与页面一级标题 · 24–38px / 700
关键操作与模块标题 · 15–16px / 500–600
AI 回答正文 · 15px / 30px / 400
规格、元信息与辅助说明 · 12–13px / 400
基础 Token
#252525#606060 / #979797#EEEBF44 / 8 / 10 / 20 / 999px150–220ms ease0页面骨架
PC 端默认锁定一屏，由固定侧栏、中央工作区、欢迎态/对话态和底部输入框组成；侧栏折叠后工作区重新计算，不覆盖内容。
使用 clamp(240px,18vw,260px)。
保留品牌、展开、对话、历史和底部入口。
根据侧栏和视口宽度动态计算。
默认高 100px；存在筛选 tag 时高 132px。
对话态底部预留 148px 给固定输入框。
cubic-bezier(.2,0,0,1)。
按钮规范
按钮样式从当前主模板中的商品、门店、会员、驱动、维修和回答操作提炼。同一操作区只保留一个主按钮；其余操作按层级降为次按钮、弱强调或文本按钮。
尺寸与布局
- 业务按钮默认高 30px，弱强调操作可用 34px；字号 11–13px。
- 水平内边距 13–17px，文案与 icon 间距 4–7px，业务操作可用 999px 胶囊圆角。
- 图标按钮固定正方形热区，icon 视觉尺寸 14–16px；并列按钮间距 10–12px。
交互与文案
- Hover 使用
#EBE4F1或主渐变亮度.96；Active 可向下位移 1px。 - Focus 必须有 2px 可见焦点环，不得只依赖颜色变化；状态切换 150–220ms。
- 使用“动词 + 对象”的简体中文，如“确认预约”“一键下载”；避免“确定”“点击这里”等含糊文案。
对话、Skill 与生成状态
页面从用户消息进入 Skill 生成，再进入回答流式输出和完成操作。生成中与生成完成后的商品名称字重均为 600。
右侧用户气泡使用蓝粉渐变，字号 15px，圆角 10px。
Skill 摘要进入 is-loading-intent，底部显示 2px 动态线。
使用 is-loading-data，保留当前 Skill 名称和可收起区域。
显示流式正文、业务卡片和重新生成/复制/朗读/赞/踩。
Skill 摘要
- 默认高 36px，圆角 4px。
- 箭头定位
top:3px。 - 展开内容左侧使用
#F0EDF61px 竖线。
回答完成态
拯救者 Y7000X 2026：适合追求高性能与便携性的电竞玩家。
主模板 Query 映射
以下触发词是当前正式模板与组件库的共同契约。扩展 Query 时必须先在独立 POC 验证，再由设计角色写回。
| 发送 Query | 正式组件 | 输出行为 |
|---|---|---|
| 游戏本推荐商品推荐商品 | PC-聊天-商品推荐卡PC-聊天-商品多选卡 | 三款商品 tab 默认选中第一项，随后输出预算、便携性和游戏类型选项。 |
| 门店推荐 | PC-聊天-门店推荐卡 | 门店信息、距离、导航、预约、权益与换一些门店。 |
| 会员权益 | PC-聊天-会员权益卡 | 权益说明、分类 tab、优惠券、领取反馈和继续追问。 |
| 驱动下载 | PC-聊天-驱动下载卡 | 信息不足时引导补充 SN/型号；识别后输出官方驱动卡。 |
| 维修 | PC-聊天-维修预约卡 | 先选产品类型，再输出预约信息、修改和确认状态。 |
| 618活动 | PC-聊天-618活动卡 | 活动规则、叠加优惠和 268×150 主视觉活动卡。 |
9 个正式组件
组件库登记首页输入框、聊天态输入框和 7 个 Query 业务卡片。Skill 回答壳和回答操作栏仍由主模板统一承载。
推荐度：已有1项满足
商品多选卡
首页输入框
宽 min(673px,100%)；默认高 100px。
聊天态输入框
宽 min(936px,工作区)；固定于聊天区底部。
门店推荐卡
宽 min(500px,100%)；含导航、预约、权益和刷新。
会员权益卡
宽 min(520px,100%)；分类下划线 31px。
驱动下载卡
宽 min(520px,100%)；单卡最小高 88px。
维修预约卡
宽 min(340px,100%)；支持选择、修改和确认。
618 活动卡
固定宽 268px；主视觉比例 268/150。
组件事实源
DOM、class、交互状态以 leai-component.html 为局部调用基线。
正式 Icon 资产
只调用 Icon 看板登记的精确文件名。当前共 21 个 SVG；禁止临时绘制、复制为 -1 或新增备选态别名。
sidebar-new-chat.svg
sidebar-history.svg
sidebar-toggle.svg
sidebar-mobile.svg
composer-tools.svg
composer-web-searc.svg
composer-sn.svg
composer-image-upload.svg
composer-send-disabled.svg
composer-send-enabled.svg
chat-selected-lg.svg
chat-selected-sm.svgchat-action-regenerate.svgchat-action-copy.svgchat-action-voice-play.svgchat-action-like.svgchat-action-dislike.svgproduct-card-recommend.svg
product-card-compare.svg
product-card-all.svg
product-card-refresh.svg响应式与验收
主模板优先服务 PC；900px 以下进入窄屏适配，隐藏侧栏并释放页面滚动。所有固定格式卡片必须保持稳定尺寸，不因动态内容跳动。
| 1440 / 1280px | 验证展开侧栏、中央 936px 工作区、欢迎图、能力标签、673px 输入框和底部工具。 |
| 1180px 以下 | 侧栏固定 240px；内容工作区收敛到 760px；页面水平内边距 20px。 |
| 900px 以下 | 隐藏展开/收起侧栏和切换按钮；主区域宽 100%；对话输入框固定于左右各 20px。 |
| 低于 820px 高度 | 能力标签缩放至 94%，减少输入框上方间距，确保免责声明仍可见。 |
| 交互验收 | 检查侧栏折叠、历史列表、Query 发送、Skill 展开/收起、卡片 tab/选项、按钮反馈和 AI 免责声明。 |
| 可访问性 | 图标按钮有 aria-label，装饰图 alt=""，键盘焦点可见，动态回答区域使用 aria-live。 |
调用、POC 与写入权限
产品经理和研发只能读取规范并在 Skill 目录外产出独立 POC；设计师在 POC 中迭代，通过评审后仅由设计角色写回规范。
允许
- 从主模板复制结构到 Skill 目录外的 POC。
- 调用 2 个输入框、7 个正式卡片和 21 个正式 SVG。
- 在 POC 中验证新流程、新状态和临时组合。
- 评审通过后由设计同步四层和版本记录。
禁止
- PM 或研发直接修改模板、规范、组件和 Icon 库。
- 把模板页面结构误登记成独立卡片组件。
- 调用未登记 Icon、
-1文件或备选态别名。 - 在旧版本号下发布已经修改的规范内容。
标准调用提示
使用 lenovo-leai-pc-4.0-design，读取 design-system-complete.html、icon-board.html、leai-component.html 和 pc-home-template.html，只在 Skill 目录外产出 POC。不得修改 Skill 源文件；现有规范不足时使用最接近模式完成 POC，并单独记录建议由设计后续沉淀的内容。