diff --git a/apps/kimi-web/design/design-system.html b/apps/kimi-web/design/design-system.html index 9ca0de3b8..f41fc9cdc 100644 --- a/apps/kimi-web/design/design-system.html +++ b/apps/kimi-web/design/design-system.html @@ -1117,8 +1117,8 @@
grip
-

禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此线稿图标体系内。

-

少数非线稿图形不进注册表，各有专属组件统一维护，禁止复制手写：<ContextRing :pct />（Composer 上下文进度环，数据驱动）、<AuthStateIcon kind />（登录流程的成功 / 过期 / 错误彩色插图）、<Spinner />（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（border-radius:50%），不再用 SVG。scripts/check-style.mjs 的 icon-from-registry 规则对以上与品牌标记豁免，其余手写 <svg> 一律告警。

+

禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此图标体系内。

+

少数特殊图形不进注册表，各有专属组件统一维护，禁止复制手写：<ContextRing :pct />（Composer 上下文进度环，数据驱动）、<AuthStateIcon kind />（登录流程的成功 / 过期 / 错误彩色插图）、<Spinner />（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（border-radius:50%），不再用 SVG。scripts/check-style.mjs 的 icon-from-registry 规则对以上与品牌标记豁免，其余手写 <svg> 一律告警。

间距 Spacing

4px 基础网格，组件内外所有间距、间隙、内边距都来自此刻度，杜绝随机像素。

@@ -1273,8 +1273,8 @@ 带图标 / 状态
- - + +
@@ -1315,11 +1315,11 @@
IconButton
- - - - - + + + + +
i
@@ -1343,7 +1343,7 @@
带图标 / 小尺寸
- plan + plan passed read-only
@@ -1352,9 +1352,9 @@
Pill · 工具条药丸（composer）
- kimi-k2· thinking + kimi-k2· thinking yolo - 12k / 200k + 12k / 200k
@@ -1456,7 +1456,7 @@
session.ts - + 
import { verify } from './jwt';
 
@@ -1487,7 +1487,7 @@ export function auth(token: string) {
                   
新建会话

                   
为当前工作区创建一个独立的 Agent 会话。
- +
@@ -1514,11 +1514,11 @@ export function auth(token: string) {
Toast
- +
已连接到服务器
本地守护进程响应正常，可以开始新会话。
- +
上下文使用 82%
建议执行 /compact 以释放空间。
@@ -1569,7 +1569,7 @@ export function auth(token: string) {
阅读完整 设计令牌文档 后再动手。 - 在 GitHub 查看 + 在 GitHub 查看 查看历史记录
@@ -1582,11 +1582,11 @@ export function auth(token: string) {
Menu · 下拉菜单
-
打开文件
-
已选中项
-
不可用项
+
打开文件
+
已选中项
+
不可用项
-
删除会话
+
删除会话
@@ -1636,9 +1636,9 @@ export function auth(token: string) {
Checkbox · 复选框
- + - +
@@ -1649,7 +1649,7 @@ export function auth(token: string) {
Avatar
K - + K
@@ -1661,7 +1661,7 @@ export function auth(token: string) {
EmptyState
- +
暂无会话
点击「新建会话」开始与 Kimi 对话
@@ -1692,7 +1692,7 @@ export function auth(token: string) {
Tooltip（悬停按钮）
- + 新建会话
@@ -1704,8 +1704,8 @@ export function auth(token: string) {
Banner
-
已连接到服务器
-
当前处于 yolo 模式，工具调用将自动执行
+
已连接到服务器
+
当前处于 yolo 模式，工具调用将自动执行
@@ -1747,7 +1747,7 @@ export function auth(token: string) {
- curl -fsSL https://code.kimi.com/install.sh | bash + curl -fsSL https://code.kimi.com/install.sh | bash
@@ -1760,11 +1760,11 @@ export function auth(token: string) {
实色 TopBar - +
毛玻璃 TopBar · .frost - +
@@ -1776,11 +1776,11 @@ export function auth(token: string) {
Workspaces
- + kimi-code-web
- + playground
@@ -1814,19 +1814,19 @@ export function auth(token: string) {
- + 3 个工具调用 · 已完成 · 0.8s - +
- + read_file src/auth/session.ts 0.2s - +
12 export function verify(token: string) {
13 return jwt.verify(token, getSecret());
14 }
@@ -1834,20 +1834,20 @@ export function auth(token: string) {
- + read_file src/auth/middleware.ts 0.2s - +
- + grep "jwt.verify" · 4 处匹配 0.1s - +
@@ -1859,7 +1859,7 @@ export function auth(token: string) {
- + 需要你确认一个决定
JWT 的过期时间希望设多长？默认 7 天，刷新令牌 30 天。
@@ -1872,7 +1872,7 @@ export function auth(token: string) {
- + 需要写入权限 write_file
@@ -1905,7 +1905,7 @@ export function auth(token: string) { ① 工具行 · 最轻（默认）
- + read_file src/auth/session.ts 0.2s @@ -1914,10 +1914,10 @@ export function auth(token: string) {
- + 3 个工具调用 · 已完成 · 0.8s - +
③ 决策卡 · 重（仅 question / approval，需用户介入） @@ -1958,13 +1958,13 @@ export function auth(token: string) {
给 Kimi 发消息，/ 调用命令，@ 引用文件…
- + yolo - plan + plan
- kimi-k2· thinking - + kimi-k2· thinking +
@@ -2197,7 +2197,7 @@ export function auth(token: string) {
  • 文件夹图标放在 --sb-gutter 槽里，开合态切换图标。
  • 名称下方一行 fg-muted 的小字路径。
    • -
  • kebab（菜单）与「+」（在该工作区新建）都用 IconButton sm，hover 才显示。
    • +
  • kebab（菜单）与「+」（在该工作区新建）都用 IconButton sm，hover 或键盘聚焦时显示（不 hover 时以 opacity:0 保留在 tab 序里，保持键盘可达）。
  • 分组可折叠；折叠时隐藏其会话列表。
diff --git a/apps/kimi-web/public/design-system.html b/apps/kimi-web/public/design-system.html index 96da55a35..f41fc9cdc 100644 --- a/apps/kimi-web/public/design-system.html +++ b/apps/kimi-web/public/design-system.html @@ -823,6 +823,7 @@ 05主题系统 06样式规则 07应用壳与侧栏 + 08可访问性
配套产出
@@ -1116,8 +1117,8 @@
grip
-

禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此线稿图标体系内。

-

少数非线稿图形不进注册表，各有专属组件统一维护，禁止复制手写：<ContextRing :pct />（Composer 上下文进度环，数据驱动）、<AuthStateIcon kind />（登录流程的成功 / 过期 / 错误彩色插图）、<Spinner />（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（border-radius:50%），不再用 SVG。scripts/check-style.mjs 的 icon-from-registry 规则对以上与品牌标记豁免，其余手写 <svg> 一律告警。

+

禁止用 emoji 充当功能图标（唯一例外：月相 🌑…🌘，仅用于「等待 Agent 响应」聊天态）。Kimi 品牌标记（32×22 的眼睛 logo）属于品牌资产，不在此图标体系内。

+

少数特殊图形不进注册表，各有专属组件统一维护，禁止复制手写：<ContextRing :pct />（Composer 上下文进度环，数据驱动）、<AuthStateIcon kind />（登录流程的成功 / 过期 / 错误彩色插图）、<Spinner />（加载态）。状态小圆点（如 Provider 列表）一律用 CSS 圆点（border-radius:50%），不再用 SVG。scripts/check-style.mjs 的 icon-from-registry 规则对以上与品牌标记豁免，其余手写 <svg> 一律告警。

间距 Spacing

4px 基础网格，组件内外所有间距、间隙、内边距都来自此刻度，杜绝随机像素。

@@ -1227,6 +1228,10 @@ 从而天然支持亮 / 暗模式与可定制主题色。

+
i
+ 每个交互基元的键盘行为、焦点与 ARIA 契约见 §08 可访问性。新增基元须一并给出键盘模型，不能只实现鼠标交互。 +
+

组件选型指南

@@ -1268,8 +1273,8 @@ 带图标 / 状态
- - + +
@@ -1310,11 +1315,11 @@
IconButton
- - - - - + + + + +
i
@@ -1338,7 +1343,7 @@
带图标 / 小尺寸
- plan + plan passed read-only
@@ -1347,9 +1352,9 @@
Pill · 工具条药丸（composer）
- kimi-k2· thinking + kimi-k2· thinking yolo - 12k / 200k + 12k / 200k
@@ -1451,7 +1456,7 @@
session.ts - + 
import { verify } from './jwt';
 
@@ -1482,7 +1487,7 @@ export function auth(token: string) {
                   
新建会话

                   
为当前工作区创建一个独立的 Agent 会话。
- +
@@ -1509,11 +1514,11 @@ export function auth(token: string) {
Toast
- +
已连接到服务器
本地守护进程响应正常，可以开始新会话。
- +
上下文使用 82%
建议执行 /compact 以释放空间。
@@ -1564,7 +1569,7 @@ export function auth(token: string) {
阅读完整 设计令牌文档 后再动手。 - 在 GitHub 查看 + 在 GitHub 查看 查看历史记录
@@ -1577,11 +1582,11 @@ export function auth(token: string) {
Menu · 下拉菜单
-
打开文件
-
已选中项
-
不可用项
+
打开文件
+
已选中项
+
不可用项
-
删除会话
+
删除会话
@@ -1631,9 +1636,9 @@ export function auth(token: string) {
Checkbox · 复选框
- + - +
@@ -1644,7 +1649,7 @@ export function auth(token: string) {
Avatar
K - + K
@@ -1656,7 +1661,7 @@ export function auth(token: string) {
EmptyState
- +
暂无会话
点击「新建会话」开始与 Kimi 对话
@@ -1687,7 +1692,7 @@ export function auth(token: string) {
Tooltip（悬停按钮）
- + 新建会话
@@ -1699,8 +1704,8 @@ export function auth(token: string) {
Banner
-
已连接到服务器
-
当前处于 yolo 模式，工具调用将自动执行
+
已连接到服务器
+
当前处于 yolo 模式，工具调用将自动执行
@@ -1742,7 +1747,7 @@ export function auth(token: string) {
- curl -fsSL https://code.kimi.com/install.sh | bash + curl -fsSL https://code.kimi.com/install.sh | bash
@@ -1755,11 +1760,11 @@ export function auth(token: string) {
实色 TopBar - +
毛玻璃 TopBar · .frost - +
@@ -1771,11 +1776,11 @@ export function auth(token: string) {
Workspaces
- + kimi-code-web
- + playground
@@ -1809,19 +1814,19 @@ export function auth(token: string) {
- + 3 个工具调用 · 已完成 · 0.8s - +
- + read_file src/auth/session.ts 0.2s - +
12 export function verify(token: string) {
13 return jwt.verify(token, getSecret());
14 }
@@ -1829,20 +1834,20 @@ export function auth(token: string) {
- + read_file src/auth/middleware.ts 0.2s - +
- + grep "jwt.verify" · 4 处匹配 0.1s - +
@@ -1854,7 +1859,7 @@ export function auth(token: string) {
- + 需要你确认一个决定
JWT 的过期时间希望设多长？默认 7 天，刷新令牌 30 天。
@@ -1867,7 +1872,7 @@ export function auth(token: string) {
- + 需要写入权限 write_file
@@ -1900,7 +1905,7 @@ export function auth(token: string) { ① 工具行 · 最轻（默认）
- + read_file src/auth/session.ts 0.2s @@ -1909,10 +1914,10 @@ export function auth(token: string) {
- + 3 个工具调用 · 已完成 · 0.8s - +
③ 决策卡 · 重（仅 question / approval，需用户介入） @@ -1953,13 +1958,13 @@ export function auth(token: string) {
给 Kimi 发消息，/ 调用命令，@ 引用文件…
- + yolo - plan + plan
- kimi-k2· thinking - + kimi-k2· thinking +
@@ -2079,7 +2084,7 @@ export function auth(token: string) {

状态矩阵 State matrix

-

每个可交互基元都应在适用处定义以下状态，缺失即按样式规则告警。focus-visible 一律走 --p-focus-ring，disabled 统一 opacity:.5。

+

每个可交互基元都应在适用处定义以下状态，缺失即按样式规则告警。focus-visible 一律走 --p-focus-ring（只在键盘聚焦时出现，详见 §08），disabled 统一 opacity:.5。

@@ -2192,7 +2197,7 @@ export function auth(token: string) { @@ -2222,6 +2227,69 @@ export function auth(token: string) { + +
+
+ 08 +

可访问性 A11y（务实版）

+
+

+ Kimi Web 是本地开发者工具，不以 WCAG 某一 conformance 级别为目标，也不维护完整的读屏 QA 矩阵。 + 本节只收「低成本、不损观感、对键盘重度用户也有直接好处」的规则，作为各基元的底线契约； + 其余昂贵且 ROI 偏低的部分（如对流式输出的实时播报编排）暂不作为强制要求。 +

+ +
i
+ 关于焦点环「丑」：下面要求的焦点可见性一律用 :focus-visible（而非 :focus）。 + 它只在键盘聚焦时出现，鼠标点击不会触发，因此不会污染鼠标驱动的视觉；环的强弱用 --p-focus-ring 统一调，不逐处覆盖。 +
+ +

1. 对比度与颜色 Contrast & color

+
    +
  • 正文文本与背景对比度 ≥ 4.5:1；控件边框、图标、关键图形 ≥ 3:1。换主题色 / 暗色模式时按 §05 一起核对。
    • +
  • 状态不只靠颜色传达。错误、选中、禁用等状态要同时有文字、图标或形态变化（例如错误态不只红，还带文案或图标）。
    • +
+ +

2. 键盘可操作 Keyboard operable

+

鼠标能完成的操作，键盘必须也能完成；Tab 顺序跟随 DOM，不另造跳序。复合控件按下表定义键盘模型，缺失即视为不完整：

+
状态 StateButtonInputCardMenu itemSwitch
+ + + + + + + +
控件键盘行为
DialogTab 在弹窗内循环（焦点锁）；Esc 关闭；关闭后焦点回到触发元素。
Menu↑ / ↓ 移动高亮，Enter 选中，Esc 关闭。
Tabs← / → 切换标签（roving tabindex），只有当前标签在 Tab 序列里。
Switch / Segmented← / → 或 Space / Enter 切换。
+ +

3. 焦点可见 Focus visibility

+ + +

4. 命名与语义 Labels & semantics

+ + +

5. 目标尺寸 Target size

+

桌面可点击目标 ≥ 32px；触摸设备 ≥ 44px（与 §01 原则、IconButton 的 lg 档一致）。

+ +

6. 减少动态效果 Reduced motion

+

统一在全局样式按 §02 的 @media (prefers-reduced-motion: reduce) 处理，组件不各自判断；MoonSpinner 月相在当前帧暂停。

+ +

7. 动态内容播报 Live announcements（非强制）

+

读屏播报在本产品里不做强制契约。Toast 这类短提示用 role="status" / aria-live 即可；聊天流式输出当前不做逐字播报，属可接受取舍，后续如有真实需求再补。

+ +
✓
+ 明确暂不强制：WCAG conformance 级别声明、完整 ARIA 模式表、逐款读屏软件的 QA 矩阵、以及对流式输出的实时播报编排——这些不写入基元契约，避免成为无人维护的口号。 +
+ +