联想乐享 PC 端 HTML 设计规范全集

四层体系

生成或还原页面时必须按顺序联动，不要只看单个示例文件。

standard -> icons -> components -> templates

01 规范总纲

standards/design-system-complete.html 定义全站原则、tokens、布局、状态、频道规则和验收标准。

02 图标资产

assets/icons/icon-board.html 负责选择正式 SVG、调用路径、分类、用途和禁止误用位置。

03 组件细节

assets/component/leai-component.html 负责组件 DOM、class、状态、交互和可复制片段。

04 页面模板

assets/templates/*.html 负责完整页面结构、组合关系、交互链路和截图验收基准。

使用顺序：先确认页面类型和总规则，再选 icon，再选组件，最后从最接近的模板组装并验收。

颜色 Tokens

页面背景、品牌、文本、边框、hover 和状态色。

:root tokens

品牌红#e42b20

价格红#ff2b2b

Aubergine#5b1452

深紫红#4e1646

页面背景#f7f3fa

弱底色#f6f1f8

Hover 底色#f0eaf8

蓝紫渐变端点#eef0ff

乐享品牌浅色渐变96deg #fcf2f8 -> #e3eafd

乐享品牌红紫渐变90deg #4d144a -> #b8252e

默认边框#e6dfea

强调边框#d8c8dd

正文#101010

弱文字#9a929f

文字与排版

Source Han Sans CN，400/500/700，letter-spacing 为 0。

font-family

Page Title

你好，我是联想乐享

32px / 42px / 700

Section

核心组件

20px / 30px / 700

Body

可以帮你处理文档、规划任务、调用技能或整理结果。

16px / 26px / 500

Menu

我的服务

15px / 40px row

内容由 AI 生成，请核对关键信息。

13px / 20px

Caption

已引用 3 个来源

12px / 18px

间距、圆角与阴影

4px 基础节奏，控制类 7px 圆角，面板/卡片 8px 圆角。

radius / shadow

控制圆角 7px

按钮、输入、quick item、chips 使用 7px。

面板圆角 8px

卡片、菜单、Composer、模态框使用 8px。

轻阴影

浮层 `0 10px 26px rgba(50, 29, 57, .12)`。

按钮与图标

固定高度、可见 hover、active 和 disabled 状态。

.btn / .icon-btn

Icon 调用

所有正式图标从 assets/icons/icon-board.html 选择，不临时手绘或用文字符号替代。

assets/icons/icon-board.html

29 个正式 SVG

当前 Icon Board 共登记 29 个正式资产，包含新增 smart-cursor.svg。文件、中文名称、位置、关联组件、调用方式和误用限制均以 Icon Board 为准。

调用方式

默认使用 <img class="icon" src="assets/icons/icon-name.svg" alt="" />。仅在需要继承文字颜色时使用 CSS mask；实际路径必须根据页面的 <base href> 解析并通过断链检查。

位置映射

Composer 使用 composer-*，顶部工具使用 mall-*，历史/侧栏使用 sidebar-*，快捷入口使用 shortcut-*，基础导航使用 global-*。

发送与订单

composer-send.svg 已包含圆形渐变表面，禁止再次叠加背景；mall-orders.svg 是“我的订单”唯一正式图标。

智能鼠标

smart-cursor.svg 只用于 PC-商城-商品悬停智能鼠标 的商品停留提示，不替代系统常规指针。

禁止替代

禁止内联 SVG、base64 SVG、media/ 图标、Emoji、字符方块或运行时手绘图标；已有正式资产时不得创建同义图标。

图标尺寸由所属组件定义；图标库决定文件、语义、用途和调用边界。图标按钮必须提供 aria-label，装饰图标使用空 alt。

输入与表单

输入框 36px 高，focus 使用 Aubergine 描边和淡焦点环。

input / select

问题标题

任务类型

错误示例需要授权后继续。

禁用示例

菜单与浮层

白底、8px 圆角、细边框、轻阴影，菜单项 40px。

.menu-row

卡片与商品

卡片用于重复项和结果单元；商品卡保持图片比例与价格红。

.card / .product-card

任务卡片

显示标题、状态、当前步骤和下一步操作。hover 提升边框和轻阴影。

技能卡片

展示图标、名称、能力摘要、启用状态和主操作。

结果卡片

生成结果需包含复制、重试、来源和 AI 免责声明。

小新 AIR

2.5K 120Hz｜轻至 1.1kg

¥ 6799

YOGA Pro

OLED 屏｜AI 办公

¥ 7999

ThinkPad

商务可靠｜长续航

¥ 7299

拯救者

创作游戏｜高性能

¥ 8999

组件库关系

assets/component/leai-component.html 是组件细节库，负责可调用组件的 DOM、class、状态和交互片段。

PC-位置-功能

命名规则

组件名称遵循 PC-位置-功能，例如 PC-聊天-聊天态输入框，便于按页面位置和功能检索。

组件内容

每个组件应包含预览、适用场景、依赖 token、依赖 icon、default/hover/focus/active/disabled/loading/empty/error 状态和复制片段；不适用的状态必须明确标注。

使用边界

组件库给局部实现；完整页面必须回到页面模板校验组合、间距、滚动、响应式和交互链路。

当前正式登记 12 个组件：PC-首页-首页新建对话输入框、PC-聊天-聊天态输入框、PC-首页-内容标签卡片、PC-侧栏-历史记录抽屉、PC-顶部-悬浮主导航、PC-侧栏-导购默认态智能体面板、PC-侧栏-商品悬浮推荐提问卡、PC-商城-顶部轮播广告横幅、PC-商城-商品卡片、PC-商城-商品悬停智能鼠标、PC-详情页-商品购买信息区、PC-详情页-用户评价智能总结。购物车、订单、会员、门店、企业、政企、资料中心和弹窗组件按业务成熟度继续补齐。

页面模板

模板是页面级精准还原基准；不要只按零散组件拼页面后跳过模板验收。

assets/templates/*.html

全屏首页

home-fullscreen-dialog-template.html 对应根路径全屏 .lxfd：欢迎态、历史侧栏、底部 dock、scope chips、gallery 和聊天态。

左右导购首页

shop-chat-page-template.html 对应 /shop-chat/、/b-chat/、/biz-chat/：左助手、右商城、商品卡、拖拽、更多菜单。

产品详情

product-detail-page-template.html 对应助手商务壳内的详情页：产品图、SPU、AI 理由、CTA、买条和用户评价。

模板必须标注线上资源版本。生产还原前先核对当前服务器 CSS/JS 版本，旧模板不得重新引入已废弃的 portal home。

底部 Composer

红紫渐变描边、14px 输入字号、深度思考、3 个常驻能力标签、更多菜单、图片和发送按钮。

.composer

首页全屏输入框 mode 区默认仅保留「深度思考」。scope 标签默认 visibleCount = 3，常驻「商品导购 / 解决方案 / 门店查询」，更多菜单只展示「职场认证 / 服务预约」。1920px 及以上大屏也不得自动展开全部能力标签。

对话消息

用户消息使用粉紫渐变气泡，助手消息保持可读宽度并带操作。

chat message

帮我整理一下今天的任务

我已读取当前信息，下面是重点摘要和建议动作。内容由联想乐享基于当前信息生成，请在使用前核对关键信息。

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

电商模块

商品、详情、评价、对比、购物车和订单必须继承助手商务壳内的净白发丝线风格。

commerce modules

商品卡与楼层

图片区域稳定，标题/spec/价格层级固定；正常桌面 4 列，宽屏扩到 5/6 列，避免图片溢出或加载态闪烁。

商品详情

使用 Scheme A：左侧干净产品图，右侧标题、AI 理由、SPU、价格、CTA、服务保障，详情图无白缝。

用户评价

使用 Scheme B：AI 总结、评分条、筛选 tags、横向评价卡、箭头滚动和低调 AI 说明。

商品对比

使用轻量表格 data-v="1"：参数列、商品表头、AI 解读行、最优值浅紫胶囊和自动推荐理由。

购物车

商品行、数量、优惠、合计和结算 CTA 清晰分层；右上全屏入口和分屏内容状态需要保持一致。

我的订单

订单状态、履约信息、售后入口和再次购买入口保持紧凑列表，不使用重阴影和营销式大卡。

频道页面

全站频道采用净白、发丝线、低饱和、紫红小强调；业务内容优先，不做营销落地页式装饰。

home / personal / business / enterprise / brand

首页

当前根路径以全屏 .lxfd 为主，保留欢迎、gallery、聊天、历史和全屏到分屏的桥接，避免旧 portal home 闪回。

个人及家庭

聚焦商品导购、教育特惠、以旧换新、会员、门店、服务和订单，使用左助手 + 右商城内容结构。

中小企业

覆盖企业定制、企业会员权益、企业门店、服务、开票、账期和批量采购，优先白底线框方案。

政教及大企业

覆盖行业解决方案、资料中心、方案顾问、产品池、同行案例和专家联系入口，保持方案型信息结构。

品牌

使用真实视觉资产和清晰 Lenovo 品牌信号，品牌故事、价值体系、时间轴和案例保持可访问。

会员与门店

会员中心使用浅紫红会员卡方向；门店使用地图/列表双视图，操作为导航、查库存、约到店。

状态反馈

生成、空、错误、权限、完成状态都需要具体说明和下一步动作。

states

生成中

说明正在做什么，不使用泛泛的加载中。

正在分析文件...

骨架屏

用于已知布局的结果区域。

错误

说明失败原因和恢复方式。

权限不足。你可以授权后重试，或改用本地文件继续。

暂无历史记录

可以新建对话、上传文件或从推荐问题开始。

表格与列表

紧凑行高、状态标签、行 hover、右侧操作。

table

任务	类型	状态	更新时间
会议纪要整理	文件理解	已完成	16:20
联想商品推荐	导购	生成中	16:12
技能中心筛选	任务	待确认	15:46

弹窗、抽屉与确认

聚焦配置使用弹窗，次级详情使用抽屉，内容短而明确。

modal / drawer

Hover、Focus 与可访问性

图标按钮必须有 aria-label，focus 不可移除，状态不能只靠颜色表达。

a11y

Hover

使用 `--lavender-hover` 和 `--border-strong`，可加轻微阴影。

Focus

使用 Aubergine 描边和淡紫焦点环，支持键盘操作。

AI 免责声明

生成答案、推荐和任务结果必须显示免责声明。

调用与验收

所有页面输出都要能追溯到规则、图标、组件和模板，避免只凭视觉印象复刻。

validation checklist

调用顺序

先读本总纲，再读 icon-board，再读 leai-component，最后选模板；业务细节按 references 中对应页面规则校验。

团队入口

README.md 是 PM、设计和研发的统一入口；多人使用时只认唯一 skill 源目录，不维护分叉规范。

POC 优先

新功能先不要修改 skill，先用现有模板、组件和 icon 做 POC；评审后只沉淀可复用的新模式。

版本校准

当前设计系统版本为 v0.11.1-stage，替代 v0.11.0-stage。模板和线上资源版本必须标注；生产还原前确认当前 CSS/JS query，不用旧快照作为最新线上依据。

视觉验收

检查 token、字体、圆角、边框、阴影、图标、状态、响应式、文字溢出、滚动和交互链路。

组件验收

组件必须说明默认、hover、active、focus、disabled、loading、empty、error 状态和 aria 要求。

页面验收

页面必须对照最接近的模板，验证首屏、导航、助手、composer、右侧内容、弹窗、业务路由和本地 fallback。

发布治理

正式更新按 references/release-and-governance.md 执行：版本号、release note、线上同步和回滚都要记录。

多人边界

PM 和研发消费 skill，设计师提出沉淀建议，设计系统负责人合并正式规范更新。

禁止事项

不临时造 icon、不使用旧 portal home、不靠 CSS 覆盖旧 DOM、不用大面积暗紫背景或重装饰卡片替代当前净白方向。

联想乐享PC端规范全集

规范原则