该 HTML 是联想乐享 PC 端全站规范入口。准确还原页面时，需要联动 icon-board、leai-component 和页面模板。

Lenovo Lexiang PC Design System

# 联想乐享PC端规范全集

覆盖全站视觉规则、图标资产、组件细节、页面模板、频道页面、交互状态、hover、active、disabled、focus 和 AI 免责声明。

## 规范原则

以该文件为总纲，联动 icon-board、leai-component 与 templates 保证全站样式和交互一致。

色彩红色品牌点睛，Aubergine 承载交互强调
形态 8px 内圆角，细边框，轻阴影
布局 PC 高密度信息，稳定尺寸，避免嵌套卡片
版本 v0.11.1-stage · 当前版本，替代 v0.11.0-stage
调用总规范定规则，组件库给实现，模板做页面验收

## 四层体系

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

`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

Meta

### 内容由 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、不用大面积暗紫背景或重装饰卡片替代当前净白方向。