---
name: "混灵画布 · Design System Version 1.1.3"
description: "照片环境中的共享透光组件与科技蓝主要操作"
colors:
  color-accent: "#B45B26"
  color-accent-soft: "#F3D3B6"
  surface-glass: "rgb(247 251 255 / 38%)"
  surface-sheet: "rgb(247 251 255 / 58%)"
  surface-glass-strong: "rgb(247 251 255 / 70%)"
  surface-content: "rgb(247 251 255 / 42%)"
  surface-control: "rgb(247 251 255 / 42%)"
  field-surface: "rgb(247 251 255 / 88%)"
  field-border: "{colors.color-border-strong}"
  field-border-hover: "{colors.color-text-secondary}"
  surface-pane: "rgb(247 251 255 / 64%)"
  surface-node: "rgb(247 251 255 / 66%)"
  surface-inset: "rgb(247 251 255 / 24%)"
  surface-ink: "rgb(17 30 40 / 82%)"
  surface-action: "rgb(24 90 219 / 96%)"
  surface-danger: "rgb(185 28 53 / 97%)"
  glass-border: "rgb(255 255 255 / 58%)"
  canvas-dot: "rgb(32 57 73 / 22%)"
  edge-color: "#506C80"
  color-primary: "#185ADB"
  color-primary-hover: "#1049BB"
  color-primary-active: "#0D3B98"
  color-primary-light: "#E6EDFF"
  color-bg: "#DCE6ED"
  color-surface: "#F7FAFC"
  color-surface-secondary: "rgb(246 250 254 / 24%)"
  color-border: "rgb(35 55 72 / 18%)"
  color-border-strong: "#687C8B"
  color-text-primary: "#17242E"
  color-text-secondary: "#273844"
  color-text-tertiary: "#2F414E"
  color-disabled: "#607381"
  color-success: "#167443"
  color-warning: "#85500D"
  color-error: "#B91C35"
  color-info: "#365F93"
  color-success-soft: "#E8F6EE"
  color-warning-soft: "#FFF0DC"
  color-error-soft: "#FBECEA"
  color-info-soft: "#EDF1F7"
  color-ai-primary: "#695193"
  color-ai-soft: "#F0ECF5"
  node-system: "#426BA7"
  node-extract: "#237E73"
  node-ai: "#795AA5"
  node-output: "#B15D2A"
  node-basic: "#5A6C84"
  color-overlay: "rgb(36 35 33 / 28%)"
  color-focus: "rgb(24 90 219 / 22%)"
typography:
  display:
    fontFamily: "-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"PingFang SC\",\"Helvetica Neue\",Arial,sans-serif"
    fontSize: "40px"
    fontWeight: 600
    lineHeight: "48px"
    letterSpacing: "-.025em"
  headline:
    fontFamily: "-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"PingFang SC\",\"Helvetica Neue\",Arial,sans-serif"
    fontSize: "24px"
    fontWeight: 600
    lineHeight: "32px"
    letterSpacing: "-.015em"
  title:
    fontFamily: "-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"PingFang SC\",\"Helvetica Neue\",Arial,sans-serif"
    fontSize: "16px"
    fontWeight: 600
    lineHeight: "24px"
    letterSpacing: "0"
  body:
    fontFamily: "-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"PingFang SC\",\"Helvetica Neue\",Arial,sans-serif"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "22px"
    letterSpacing: "0"
  body-small:
    fontFamily: "-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"PingFang SC\",\"Helvetica Neue\",Arial,sans-serif"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "20px"
    letterSpacing: "0"
  label:
    fontFamily: "-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",\"PingFang SC\",\"Helvetica Neue\",Arial,sans-serif"
    fontSize: "13px"
    fontWeight: 500
    lineHeight: "18px"
    letterSpacing: ".02em"
  code:
    fontFamily: "ui-monospace,\"SFMono-Regular\",Menlo,Consolas,monospace"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "20px"
    letterSpacing: "0"
rounded:
  xs: "8px"
  sm: "12px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  full: "999px"
spacing:
  space-0: "0px"
  space-1: "4px"
  space-2: "8px"
  space-3: "12px"
  space-4: "16px"
  space-5: "20px"
  space-6: "24px"
  space-8: "32px"
  space-10: "40px"
  space-12: "48px"
  space-16: "64px"
components:
  button-primary:
    backgroundColor: "{colors.surface-action}"
    textColor: "#FFFFFF"
    rounded: "{rounded.full}"
    padding: "0 22px"
    height: "36px"
  button-secondary:
    backgroundColor: "{colors.surface-control}"
    textColor: "{colors.color-text-primary}"
    rounded: "{rounded.full}"
    padding: "0 22px"
    height: "36px"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.color-text-primary}"
    rounded: "{rounded.full}"
    padding: "0 22px"
    height: "36px"
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.color-primary}"
    rounded: "{rounded.full}"
    padding: "0 22px"
    height: "36px"
  button-danger:
    backgroundColor: "{colors.surface-danger}"
    textColor: "#FFFFFF"
    rounded: "{rounded.full}"
    padding: "0 22px"
    height: "36px"
  input:
    backgroundColor: "{colors.field-surface}"
    textColor: "{colors.color-text-primary}"
    rounded: "{rounded.sm}"
    padding: "0 12px"
    height: "36px"
  navigation:
    backgroundColor: "transparent"
    textColor: "{colors.color-text-primary}"
    rounded: "{rounded.xs}"
    padding: "0 10px"
  chip:
    backgroundColor: "{colors.surface-inset}"
    textColor: "{colors.color-text-secondary}"
    rounded: "{rounded.sm}"
    padding: "3px 8px"
  card:
    backgroundColor: "{colors.surface-glass}"
    textColor: "{colors.color-text-primary}"
    rounded: "{rounded.lg}"
    padding: "24px"
  node-shell:
    backgroundColor: "{colors.surface-node}"
    textColor: "{colors.color-text-primary}"
    rounded: "{rounded.lg}"
    padding: "16px"
    width: "500px"
---
# Design System: 混灵画布 Version 1.1.3

## Overview

**Creative North Star: "照片环境中的透光工作台"**

照片环境、透光底色、背景模糊与白色高光共同定义整套组件。科技蓝承担主要动作与开启状态，中性浅玻璃承担次要操作，红色表达删除，绿色表达已连接与运行中；正文使用深色，节点身份与业务状态保持独立语义。此规范替代旧暖灰环境与实底内容方案，普通组件不再使用棕色描边。

本规范从当前 styles.css、scripts/liquid_material.py 与 PRODUCT.md 提取。材质由 CSS 透光、模糊、饱和度和高光模拟，不是物理折射。背景为 Ryan Stone 的 Lake Louise 照片，已保存为 assets/glass-environment-lake.jpg；来源与 Unsplash 许可见 assets/SOURCES.md，无运行时外链。原始 reference-glassmorphism.png 和 references/feedback-01.png 至 feedback-06.png 是内部方向参考，不作为产品背景。浏览器策略明确阻止 file://，未进行截图、实机交互、读屏或响应式视觉验收。

**Key Characteristics:**

- 照片环境贯穿文档、节点样例与完整工作区。
- 全套组件共享透光、高光与中性投影，按阅读密度调整厚度。
- 主要按钮和开启开关使用科技蓝，删除使用红色垃圾桶，已连接与运行中使用绿色。
- 共用节点外壳，类型差异放在图标、端口和内容模板。
- 系统字体、等宽数字与紧凑控件保持信息可读。

## Colors

### Primary

科技蓝 `color-primary` 及 hover / active 变体承担主要动作和选择；主按钮实际使用 `surface-action` 与独立低反光 `action-reflection`。次按钮为中性浅玻璃；危险按钮使用 `surface-danger` 红底、白字与垃圾桶图标，hover / active 延续更深红色。`color-accent` 和 `color-accent-soft` 仍用于有限强调、光标和文本选择；旧橙色装饰球已隐藏，不再作为环境光源。

### Secondary

成功、警告、错误、信息分别使用 `color-success`、`color-warning`、`color-error`、`color-info` 及各自 soft 底色。已连接与运行中使用绿色成功状态，不借用科技蓝主色。AI 标签使用 `color-ai-primary`，不替代错误和运行状态。五类节点的 `node-system / node-extract / node-ai / node-output / node-basic` 主要作用于标识与端口；AI 进度环等内容图形也使用节点色，不能据此给整个节点染色。

### Neutral

`color-bg` 是照片缺席时的环境底；`surface-glass / surface-control / surface-sheet / surface-pane / surface-node / surface-glass-strong / surface-inset` 表达同一玻璃材质的不同厚度。`surface-content` 当前也是透光色，不再表示实底正文。`glass-border` 为白色亮边，`color-border` 为中性蓝灰透明分隔，`color-border-strong` 为蓝灰强边界。次级、三级与禁用文字各有变量。警告棕橙保留为语义信号，不能用于普通描边。

前置 YAML 的值是本次提取的规范值；运行时来源仍是 styles.css。节点运行 / 空闲 / 错误分别引用成功 / 三级文字 / 错误色。不透明 `color-surface` 与 soft 色仍是基础原色，不表示内容容器恢复实底；状态标签使用混色保留透光。sidecar 的 tonalRamp 是合成的面板辅助色阶，不是已落地 token，alpha 以前置原值为准。

## Typography

中文与拉丁正文使用系统 sans 栈，无远程字体请求。数字启用 tabular-nums，代码、章节编号与技术标注用系统 monospace。前置层级记录实际 token，常规正文使用 body，密集内容使用 body-small，主要标题使用 display / headline。

源码还提供 h1（32 / 40）、h3（20 / 28）、body-large（15 / 24）、caption（12 / 18）等尺寸，单位 px；这些是样例及辅助层级，不要求每页全部出现。标题字重以 600 为主，按钮 / 标签为 500。`label` tracking token 已定义，但不是所有表单 label 都应用该 tracking；不要将 token 声明误作全部元素的计算样式。

首屏标题在 ≤1100 px 改为 32 / 42；章节标题在 ≤760 px 为 22 / 30、≤440 px 为 20 / 28。不得通过整页缩放代替文档重排。画布节点的独立 zoom 见 Layout。

## Layout

文档容器最大宽度 1200 px，常规内边距上下 48、左右 24 px。采用 4 px 基准间距；组内常见 8 / 12，组件 padding 16 / 24。章节现为独立玻璃阅读面，padding 32 px、底部间距 32 px；≤760 px 改为 20 px 16 px、底部间距 24 px。并排控件高度为 28 / 36 / 44 px；通用图标 20 px、1.6 描边，节点图标 24 px、1.8 描边。

| 源码断点 | 实际变化 |
|---|---|
| ≤1400 px | 工作区侧栏固定时收起部分工具文案及次要按钮。 |
| ≤1200 px | 工作区侧栏 / 对话默认宽度 220 / 420 px；固定侧栏是否显露由用户状态控制，布局由主区剩余宽度决定。 |
| ≤1100 px | 首屏列间距与字体收紧，字号样例列宽调整。 |
| ≤1000 px | 四列示例改两列，Tabs 间距减小。 |
| 主区 <760 px（container / ResizeObserver） | 扣除固定侧栏后采用对话 / 画布单视图；≥760 px保留双栏，不按整个窗口宽度判断。 |
| ≤760 px | 首屏、两列和三列文档示例改单列；目录两列；弹窗留12 px视口边距；工作区侧栏偏好由 hidden / peek / pinned 显式状态管理。 |
| ≤640 px | 连线示例标题堆叠。 |
| ≤600 px | 第 22 区节点宽度随容器重排，内容、标题与状态布局调整。 |
| 工作区容器 ≤560 px | 固定侧栏收为64 px图标栏，项目入口可打开 peek。 |
| ≤440 px | 目录改单列；部分示例仍保持两列；章节标题与表面内边距收紧。 |

完整工作区大屏侧栏 clamp(280px,17.2vw,330px)，对话 clamp(400px,25vw,480px)，画布占余量；对话手柄允许 320–560 px 调节且受画布剩余宽度约束。窗口高度由 JS 在 560–820 px 范围内计算；展开预览占据视口。

**画布尺度边界：** 五类节点统一逻辑宽度 500 px、最小高度 248 px。第 22 区小屏通过内部重排保证文字可读；第 23 区存在 .34 / .45 / .6 等示例 zoom，完整工作区初始使用 .5 zoom，再叠加画布自身缩放与滚动坐标。画布节点并非所有位置都以 1:1 字号展示；实际可读性与端口命中仍待浏览器验证。

## Elevation & Depth

所有组件共享透光、模糊、饱和度和高光；厚度按内容密度调整。常规卡片、阅读面、面板与节点使用 20 px blur；控件与浮层使用 10 px。各 surface 的精确 alpha 在前置 colors 中；内部面按组件使用 compact blur 或复用父材质。共享饱和度为 135%。

公共边缘只使用一条 1 px、白色 58% 的细边；已移除 glass-rim 及顶部/侧向硬质内高光，避免第二道轮廓。普通反光渐变为白色 24% / 3% / 12%；主操作独立使用 6% / 0% / 2%，防止科技蓝被反光冲淡。ghost / text 按钮不叠白色反光。结果气泡 box-shadow 为 none。

阴影分为 none、轻控件（0 3px 10px rgb(18 38 54 / 6%)）、低层（0 6px 18px rgb(18 38 54 / 8%)）、中层（0 16px 36px rgb(18 38 54 / 14%)）、高层（0 28px 68px rgb(18 38 54 / 20%)）。节点默认中层、hover 高层；单层细边与模糊投影共同使用，不增加平行内轮廓。

页面固定背景使用本地照片加 20% 浅色遮罩，工作区与节点展示舞台为同张照片加 16% 遮罩，弹窗照片背板为 66% 遮罩。章节模糊置于独立 ::before，避免改变 fixed 子元素定位参照。dialog 本身不模糊以保持选择弹层坐标；内部面仍透光，其 backdrop 为 8 px blur，配置正文为 18% 透光面。组合输入内层、工具条内按钮复用父表面，不要求每个 DOM 节点独立模糊。

对话示例容器是上述照片舞台的明确例外：conversation-specimen 不再重复铺 cover 照片，而是统一由外层反光、surface-control、20 px blur、圆角与 overflow:hidden 形成完整表面。内部 conversation 与 guide 均透明，不再各自设置 filter、阴影和外框；guide 只保留列分隔线。这样避免内外照片裁切与多重轮廓形成拼图感；真实视觉结果仍待浏览器验证。

无 backdrop-filter 或请求减少透明度时，glass / pane / sheet 回退 #EAF0F4，strong / content / control / node 回退 #F4F7FA，inset 回退 #E2EBF1；减少透明度关闭模糊与页面背景照片。工作区等局部照片环境仍由各自规则持有，不能宣称所有照片都被隐藏。默认过渡 180 ms；--ease 为 cubic-bezier(.16,1,.3,1)，并非所有 transition 都使用它。减少动效移除动画、过渡和平滑滚动。照片对比、层叠透明度和合成性能仍待真实浏览器验收；4.5:1 是目标，不是已验证结论。

## Shapes

圆角使用前置 xs / sm / md / lg / xl；药丸和圆点使用 full。按钮统一 full 胶囊圆角，输入使用 sm，菜单与浮层 md，卡片 / 节点 lg，工作区外框 xl。节点共用 24 px 外壳，不根据类型改变轮廓。工作区紧凑 chrome 还存在 9 / 10 / 15 px 等局部值，属于当前实现特例，不必扩散为全局尺度。

普通亮边 1 px；节点选择为浅蓝透光底色与柔和边缘光，无新增硬描边。按钮与链接的 focus-visible 使用 1 px 主色 outline、4 px offset、3 px 科技蓝透明外环；通用 focus-visible 是 2 px / 3 px，输入 focus 为主色边框与同色外环。开关为 44 × 26 px，白色滑块 18 px；on 使用主操作科技蓝，off 灰色。字段删除使用红色圆形垃圾桶按钮，菜单删除使用红色垃圾桶和文字；附件卸载继续使用 x，不混作删除。

胶囊操作复用按钮材质和 full 圆角，文字按钮横向 padding 22 px，纯图标按钮保持同高同宽。节点端口改为完整外置圆形，默认直径 32 px，与节点边缘相切；showcase 使用 48 px 逻辑尺寸，在 .5 / .6 zoom 下为 24 / 28.8 px。端口位置按 `calc(-1 * var(--port-size) - 1px)` 从左右外置，不支持的输入或输出方向不再显示假圆点。

## Components

共享样式由 styles.css 持有；scripts/liquid_material.py 在构建阶段以共用 glass() 配方改写规范声明；app.js 工厂与委托事件持有结构和本地行为。没有 React/Vue 组件库或真实 API 状态。sidecar 样例直接提取当前声明，并依赖根 CSS 变量和背后的环境显现材质；它不替代完整交互。

| 组件 | 复用所有者 / 结构 | 变体与边界 |
|---|---|---|
| 按钮 | app.js `btn()`；styles.css `.btn` | 科技蓝 primary、浅玻璃 secondary、ghost、text、红底白字 danger；删除矩阵含 trash 图标，字段删除为圆形 trash，菜单为红色 trash。sm / md / lg、icon-only、禁用和加载保持共用。 |
| 输入与选择 | `field()`、`customField()`、`enhanceSelects()` | 透光输入、白色边缘、focus / error / success；选择器增强原生 select，保持键盘与关闭行为。 |
| Tabs / Switch | `tabs()`、委托事件 | 线条 / pill，aria-selected / aria-checked 表达状态；配置六分区复用样式。 |
| 标签与状态 | `badge()`，`.badge / .tag` | 类别、业务状态、数量与可移除标签；状态圆点不能承担唯一信息。 |
| 卡片与容器 | `.card / .surface / .modal-box` | 卡片 hover 上移 2 px；选中保留高光与 44% 中性浅色底；配置正文继续透光。 |
| 导航 | `workspaceNavigation()`、`setSidebarState()` | Hidden / Peek / Pinned；长名 tooltip、键盘显露、点击外部和 Esc 退出 Peek。 |
| 五类节点 | `workspaceNode()`、`referenceNodeContent()`、`basicNodeContent()` | 相同外壳、选择、更多操作、端口；内容模板各异。AI / 输出使用 group 容器，避免交互控件嵌套 button。 |
| 连线 | `edgeGeometry()`、`roundedPath()`、`drawConnections()` | 直角、圆角、贝塞尔，贝塞尔直接连接，折线保留避障；插入 / 断开与历史属于本地画布状态。 |
| 配置 | `typeConfigSchema()`、`openConfig()`、`validateConfig()` | 五类节点六分区，必填 / URL 校验、测试、未保存退出保护。 |
| AI 对话与工作区 | `workspaceComposer()`、`workspaceConversation()`、`runGeneration()` | 发送 / 停止 / 重试、IME 保护、附件、模型、任务内草稿；生成和运行都是模拟。 |
| 胶囊操作 | scripts/microcomponents.css / .js；第 06 区 | 共用 .btn 的组合、切换、上传 / 下载文字及图标入口；新增 1–10 圆形数字导航，44 px，初始第 3 项，点击同步 aria-current 与说明。 |
| 进度、资源、步骤 | `advanceProcessDemo()`、`renderProcessDemo()`、`transitionGlassStep()`、`renderGlassStepper()`；第 17 区 | 确定进度初始 paused / 74%；资源 meter + slider 初始 64%，同步用量、剩余及 80% / 95% 阈值；四步胶囊导航初始第 3 步、已完成 2 步。 |
| 可恢复反馈 | `processDemoMarkup()`；第 15 区 | 校验卡初始 error / 48%，提供重试；另有静态行内错误与成功示例。 |
| 内容与项目列表 | scripts/collection-components.js / .css；第 27 区 | 搜索与类型 / 状态 / 负责人筛选按 AND 组合；排序、每页 5 条、当前页选择、批量归档与撤销、行内详情；名称不带类型图标，负责人复用32px员工头像，操作列居中胶囊按钮。 |
| 待办事项 | 同一 collection-components 源；第 28 区 | 新增 / 编辑、完成 / 恢复、日期 / 优先级、搜索、到期视图、删除与撤销；操作继续使用共享 .btn。 |

第 27 / 28 章沿用当前玻璃外壳和共享动作按钮，源码由 scripts/build.py 拼入 styles.css / app.js，无新增媒体。集合外壳使用 surface-glass-strong、24 px 圆角和 shadow-1；表格以细分隔、浅蓝 hover / selected 区分行，数据区域不单独叠加模糊。批量栏、语义状态与优先级允许局部色底，不将其提升为新的全局材质。表格最小宽度 790 px，窄屏在带标签的内部滚动区域横向浏览；≤1000 px 搜索独占一行、筛选三列，≤680 px 筛选两列、待办侧栏转横向换行。待办桌面导航宽 180 px，≤1000 px 为 150 px，≤680 px 改单列。

列表搜索覆盖编号、名称、描述和负责人；排序支持最近 / 最早更新及名称。全选仅作用于当前页，部分勾选使用原生 indeterminate；换页、搜索或筛选变更清空选择。批量归档只改变未归档记录，撤销恢复最近一次归档前值。筛选显示可移除条件与清空入口，无结果时保留恢复路径；详情打开后聚焦内容区，关闭后回到对应入口或搜索。待办按本机日历判断今天和逾期，搜索与全部 / 今天 / 逾期 / 未完成 / 已完成视图共同生效；完成项保留勾选、删除线与文字，取消勾选即可恢复。删除支持撤销最近一次操作，表单空标题提供行内错误。所有记录及更改仅存于当前页面会话，刷新重置，不承诺后端持久化。

这两章的交互参考记录为 Carbon Data Table usage、PatternFly Filters guidelines 和 WAI Checkbox pattern，落地以当前源码为准；这些参考不构成视觉或读屏验收证明。新增表格语义包含 caption、行列标题、aria-sort、结果状态播报；原生 checkbox、焦点回退和待办公告已写入源码，但浏览器与辅助技术运行效果尚未验证。

小组件源文件由 scripts/build.py 拼入现有 styles.css / app.js，继续扩展第 06 / 17 章，页面保持 26 个有效章节。进度状态机支持 run、pause、fail、cancel、reset；running 每 180 ms 增加 4，100% 转 success；error / canceled / success 再运行从 0 开始，paused 继续保留进度。上传入口调用本地 file input，只取名称与大小，重置并聚焦模拟进度，不读取或发送文件内容到服务器；下载入口指向 assets/demo-download.txt，可下载本地 TXT 示例。资源与发布前校验仍为本地模拟。

进度与能量条移除分段白线及硬边框，以软胶囊凹槽、填充渐变与柔和阴影表达深度；进度槽 18 px / padding 3 px，能量槽 22 px / padding 4 px。原生 range 交互区高 44 px、轨道 10 px，WebKit / Firefox 分别声明 26 px 圆形滑块；方向键与拖动同步百分比、已用、剩余和辅助说明。低于 80% 为科技蓝，80% 起警告，95% 起容量不足。

步骤导航直接使用共享 .btn：当前步骤与完成数量分别保存，当前项为 Primary，已完成项为成功色，可点击返回；未解锁步骤 disabled。完成与返回不抹掉已有完成数量，重置才重新开始。步骤按钮最小高 52 px、内侧编号 26 px；≤700 px 从四列改两列。进度或步骤动作变为禁用时，焦点转移至可用动作，避免留在禁用按钮上。图标注册在组件生成前执行，图标目录仍保留原章节位置；源码顺序已调整，不据此宣称浏览器首屏验收通过。

端口由 scripts/nodes.css 持有样式，按钮本身是连线锚点；内部加号为端口直径的 40%，hover / focus 变科技蓝白图标，连接有效 / 无效分别为绿 / 红。点击与触控触发一次 480 ms 柔光，不持续闪烁；减少动效关闭动画与过渡，保留静态状态。edgeGeometry 保持原路线算法，仍以实际端口中心锚定；端口全外置不意味着更改避让逻辑。

扩展节点只替换类型内容与配置 schema，复用外壳与端口。组件区保留 baseline 的 24 个有效章节，新增 27 / 28 两章后共 26 章，12 / 19 仍缺号；尺寸 / 状态样例和部分侧栏动作属于展示，不应一概标记为生产功能。源文件验证不能证明焦点路径、读屏、触摸、响应式无溢出或视觉相似度通过；验收证据以 design-qa.md 为准。


### 额度余额卡（第 10 章）

余额卡以剩余量为首要信息，随后展示账户语境、最近消耗和说明。延续既有浅玻璃材质、单层细边、中层投影与共享 `.btn` 胶囊动作；金额采用等宽数字，主读数为 32–48 px。卡片内边距 24 px、圆角 32 px；≤820 px 示例转单列，≤420 px 内边距为 20 px 16 px、圆角 24 px、主读数 36 px。这些为组件局部尺寸，不新增全局 tokens。

`balanceCardMarkup(kind, state)` 提供 Tokens、积分、人民币余额三种变体，以及充足、偏低、耗尽三组虚构快照。只有 Tokens 有本期总额、已用量、剩余比例 meter 与下次重置日期；总额为 1,000,000，已用量由总额减剩余得到。积分与余额没有虚构分母或百分比：积分显示示例有效期，余额显示最近结算时间；人民币以整数分保存、固定两位小数展示，三种单位不自动换算。低于 100,000 Tokens / 500 积分 / ¥100.00 提示偏低，零值显示已耗尽；状态始终含文字和图标。

「用量明细」「额度说明」通过 `aria-expanded` / `aria-controls` 展开本地内容，最近三笔明确标注非完整账单。切换类型或状态只替换演示快照、关闭展开内容，并更新状态播报；没有充值、转账、扣款或真实账户连接。维护源为 `scripts/balance-card.js/css`，由 `scripts/build.py` 拼入交付文件。当前固定 `balance-history` / `balance-rules` ID 与全局查询只支持一个卡片切换变体；多实例复用前须生成唯一 ID 并限定查询范围。源码与隔离函数检查不能替代浏览器视觉、键盘或读屏验收。


### 通知汇总卡（第 15 章）

通知中心使用原生 `details` / `summary`，默认收起，汇总初始 8 条通知、5 条未读及最新标题；背后两层浅玻璃叠片表达集合，展开后隐藏叠片。点击向下展开正常文档流中的列表，只有列表内部滚动，高度上限 `min(440px,60vh)`。外壳沿用玻璃反光、24 px 圆角与中层阴影，条目圆角 18 px；动作复用 `.btn`。≤820 px 示例改单列，≤420 px 收紧内边距；减少动效、减少透明度及强制颜色回退已有源码声明。

支持全部 / 未读筛选、单条 / 全部已读、移除及撤销最近一次移除、模拟新通知和重置。已读状态与「需处理」独立：标为已读不移除消息，也不执行其中任务。重置恢复初始快照并收起；收起按钮或 Esc 将焦点回到 summary。列表为可聚焦且带标签的滚动区域；状态变更有播报，重绘后的操作焦点有回退。`mountNotificationCenter(host)` 为每个挂载实例生成唯一面板 ID，并在各自 host 内查询与维护状态。维护源 `scripts/notification-center.js/css` 由 `scripts/build.py` 集成；虚构通知只存当前页，不接入真实通知、不申请系统通知权限。源码行为不代表浏览器视觉、键盘或读屏验收。


### 登录与注册卡（第 08 章）

认证演示在既有湖景环境中居中放置单张玻璃卡，复用立方品牌标记、共享表单和 `.btn` 胶囊按钮。卡片最大宽度420 px、内边距30 px、圆角28 px，采用88%浅色玻璃底与高层投影；输入高44 px，内部不重复叠加模糊。≤520 px舞台与卡片圆角收为24 px，卡片内边距24 px 18 px。

登录、注册、重置密码三种表单由 `authCardMarkup()` 生成；`mountAuthCard(host)` 分配实例唯一字段ID，限定host内查询。模式切换保留邮箱、清除其他输入；密码支持显隐，登录使用 `current-password`、注册使用 `new-password` 自动填充提示。注册演示校验称呼、邮箱、至少12字符密码和用户自行勾选的示例协议；输入最长128字符，协议明确不是正式条款。填入示例不代勾协议，错误关联字段并聚焦首个错误。

合法提交仅运行600 ms本地加载模拟：设置 `aria-busy`、禁用当前实例输入和按钮；结束清空密码并恢复隐藏显示。模拟异常提供重试，成功清空表单并将焦点移至结果；重置流程明确不发送邮件。组件不验证真实身份、不创建账号或会话，也没有网络请求或存储。维护源为 `scripts/auth-card.js/css`，由 `scripts/build.py` 集成；视觉、真实键盘与辅助技术效果仍待浏览器验收。


### 工作区启动首页（第 26 章）

启动首页是既有 Task Workspace 内的初始视图，共用工作区外壳、侧栏和 `workspaceComposer()`。沿用湖景透光玻璃与共享胶囊按钮，中央内容最大宽度820 px，包含立方标记、欢迎语、3个快捷提示、输入区及最多6条最近工作。输入区使用24 px圆角、中层投影，复用父表面的模糊；历史条目为共享选项按钮。≤1100 px历史由两列改单列，≤760 px收紧内容内边距并为侧栏入口留位。

最近工作读取实际 `taskSessions`，初始包含当前任务与2条虚构历史；按访问先后排序、去重并提示未发送草稿。快捷提示只填入文本，不直接发送。首页提交将文本、模型选择与附件标签交给新任务，清空首页文本/附件并进入既有对话流程；仅附件可创建「附件分析」，空输入不创建任务。回访恢复每个任务的对话、草稿、模型及附件标签，`launchCanvases` 缓存各任务当前画布DOM，`launchActiveCanvases` 另存空画布预览前的活动画布，切换任务后仍可恢复原节点及编辑状态；首次访问的任务使用空画布。

侧栏「工作区首页」与展示区「启动首页 / 返回当前任务」在同一外壳内切换；首页和侧栏历史统一经过 `openLaunchConversation()`，同步清除对话及父层折叠状态后再聚焦输入；回首页保存当前任务并聚焦欢迎标题。等待回复时仅显示「正在整理演示回复…」。任务回复明确区分空画布与已有节点，并说明生成是本地模拟，不会根据描述自动修改画布。全部会话、访问记录和画布缓存仅存本页，刷新重置。维护源 `scripts/launch-home.js/css`，`scripts/build.py` 集成任务切换和模拟回复钩子；不改产品基线或建立独立应用外壳。浏览器视觉及真实键盘、端到端交互仍未验收。


### 独立官网首页

`website.html` 提供独立公共入口，方向由 `WEBSITE_BRIEF.md` 约束：沿用湖景照片、科技蓝、透光玻璃与共享 `.btn`，不建立新品牌或第二套组件。顶部品牌和入口、两行主标题与主操作、场景流程示意、底部工作方法及原型标识组成单屏。外壳最大1440 px，主内容最大1120 px，标题36–64 px、字距−.04em，主标题上方不加装饰性眉题，流程面板圆角28 px；1366×768 / 1440×900首屏完整展示只是设计目标。窄屏、低高度及放大字体允许自然滚动；≤760 px流程为两列，≤380 px改为单列。

客服答疑、数据分析、文档审核由同一 `website-scenarios.json` 提供内容。点击场景按钮更新标题、四步流程、预期产出及入口，同步 `aria-pressed`，流程内容和预期产出均设独立的礼貌播报区域；不自动轮播。主操作进入第26章工作区，登录演示进入第08章。「用这个场景开始」传递白名单 `scenario`，`launchWebsiteScenario()` 只匹配已定义场景，将提示词填入既有工作区首页输入区，由用户决定发送；未知参数不预填，不接受任意URL提示文本，不自动提交。流程与产出保留人工确认，明确为本地示意，无真实后端或客户背书。

维护源 `scripts/website-home.html/css/js` 与 `scripts/website-scenarios.json` 经 `scripts/build.py` 生成 `website.html/css/js`，与工作区共用场景数据；共享样式及官网CSS/JS引用携带内容指纹。保留跳转主内容入口、无脚本说明、减少透明度/无模糊/强制颜色回退。当前没有浏览器、渲染或实际键盘验收，不能据源码声称单屏适配、对比度或交互已通过。

## Do's and Don'ts

### Do:

- Do 使用 styles.css 的现有变量、scripts/liquid_material.py 的共用材质配方和 app.js 模板扩展组件。
- Do 让照片环境通过组件与节点显现，按阅读密度调整材质厚度。
- Do 使用科技蓝主要动作、中性浅玻璃次动作、红色垃圾桶删除和绿色已连接/运行中，并保留开启与关闭开关的区别。
- Do 让对话示例外层统一持有模糊、圆角与轮廓，内部列保持透明。
- Do 分别表达节点身份、交互选择与运行状态。
- Do 保留键盘焦点、减少动效、减少透明度与不支持模糊时的回退。

### Don't:

- Don’t 把全部语义色替换成橙色，或给五类节点各造一套外壳。
- Don’t 恢复仅首页玻璃、其他组件大面积实底的旧方案。
- Don’t 恢复普通棕色描边、底部暗 inset 或结果气泡双轮廓。
- Don’t 将附件卸载的 x 当成删除垃圾桶，或用科技蓝代替成功绿色。
- Don’t 给复用父表面的内层重复叠加模糊、背景动画或无意义霓虹装饰。
- Don’t 删除基线章节、示例或本地交互；12、19 为已移除编号。
- Don’t 把 CSS 模拟写成物理折射，或把源码检查、本地生成、模拟发布写成截图验收、真实 AI 或后端成功。

图标槽 `[data-icon]` 使用 inline-flex 居中、line-height:0，直接子 SVG 为 display:block，消除文字基线留白。圆形 study-arrow 固定44px且禁止压缩。

## 本轮组件细化

- 普通端口直径 32 px；画布展示为 48 逻辑 px（.5 / .6 缩放下为 24 / 28.8 px），保持全外置与实际中心连线。状态文字 14 px / 24 px、圆点 8 px，更多按钮 32 px，均以标题行中心对齐。
- 搜索入口为 36 px 圆形玻璃按钮；悬停共用 `--interaction-hover`（科技蓝18%），按下为26%。菜单危险操作使用红色14%反馈。
- 主操作取消白色边线。胶囊以纵向弧面渐变、柔和内阴影与下方投影建立体积，禁用时去投影；不恢复双层硬描边。Pill / Segment 选中使用科技蓝白字，悬停仍为浅蓝。
- Canvas Dock 固定于画布底部中央，脱离滚动画布内容；仅含添加节点、模板库。上方共用面板支持切换、再次点击关闭、点击外部、焦点离开与 Esc；Esc 在捕获阶段处理，先关闭当前面板。面板按可用画布高度限高滚动。视图、缩放、历史与连线路径在上方工具区换行排列。
- 第23章新增独立 Dock 展示区；空画布与活动画布复用同一组件。三个模板追加各自节点与连接，不覆盖已有内容；连接进入现有撤销历史，模板节点本身不提供整组撤销。
- 第18章提供67个固定标识的图标，支持中文及英文标识检索；统一24单位网格、20 px展示与1.6线宽。

源码：`scripts/refinements.py`、`scripts/canvas-dock.js/css`、`scripts/icon-library.js`，由同一构建脚本合入交付文件。当前45项静态/独立函数检查通过，实际浏览器和视觉验收未完成。

节点点击选中使用 `--node-selected-fill`（浅蓝86%）与 `--node-selected-shadow`（柔边光及下方投影）；键盘 focus-visible 保留独立可见焦点。胶囊物理边框宽度为0，背景延伸到border-box，保留弧面阴影；系统强制颜色模式保留可辨认边界。第23章Dock展示初始放置一个可选中、拖动、配置的基础节点，无预设连线。

## 统一按钮组件

`.btn` 是唯一按钮外观入口：full圆角、无物理描边、弧面光影；不再提供 `.capsule` 变体。`primary` 科技蓝、默认次操作浅玻璃、`danger` 红色，三者共享体积规则；`ghost` / `text` 共享轮廓与状态逻辑但不带实体投影。默认/悬停/按下/焦点/禁用/加载展示均使用同一组件。焦点轮廓仅表达键盘定位，禁用去投影，加载保留对应变体材质。

尺寸仍为sm28 / md36 / lg44px；横向留白12 / 22 / 24px。纯图标按钮各尺寸同高同宽，呈圆形。选项切换使用`data-button-toggle`和`aria-pressed`。第06章下方是“组合与切换”示例，不再维护第二套胶囊规范。

按钮材质声明集中于`scripts/button_system.py`；附加尺寸和语义状态在`scripts/buttons.css`。`scripts/microcomponents.js`中的进度、步骤和组合示例直接使用基础`.btn`。后续组件通过语义和尺寸变体复用，不能另加一套胶囊外观。

全页动作按钮统一接入`.btn`，局部只维护布局。`button-option`承载多行选项，`menu-option`承载菜单条目，`toggle`承载按下/展开状态；选中使用科技蓝、白字及弱反光，子图标和说明继承前景。Select/Switch/Tab/节点端口保持各自语义。完整检查范围与验证限制见`qa/button-audit.md`。

## 侧栏连续展开与节点快捷横条（2026-09-28）

侧栏原先在hidden/peek/pinned之间切换absolute/relative定位、单列/双列网格，只有transform动画，布局会瞬间改变。现在侧栏始终为绝对定位、保持同一宽度；主内容始终在第二列，第一列在0与侧栏宽度之间连续过渡260ms。≤760px保持覆盖式显示，不挤压内容；减少动态效果时直接切换。隐藏立即设置inert，必要时恢复外部按钮焦点；快速切换取消旧peek计时器，关闭visibility延后至位移完成。网格让位仍需布局计算，尚未实测帧率，不能宣称只在合成线程运行。

Dock添加入口为44px圆形加号，保留无障碍名称和title。上方节点浮层宽544px、最大为画布宽度减24px；单行五类节点：系统节点、数据节点、AI节点、输出节点、基础节点。去掉标题、说明、逐项描述和末尾加号，以共享Ghost按钮、图标及短标签呈现；窄画布横向滚动。小型指示角根据触发按钮中心动态定位，模板库仍使用列表。左右/Home/End切换焦点，Esc关闭并返回入口，点击直接复用原节点添加逻辑。保持当前液态玻璃材质，不照搬参考图的黑色配色。

维护源：scripts/sidebar_motion.py、scripts/sidebar-motion.css、scripts/canvas-dock.js/css。背景处理不在本次修改范围。

验证：37项原有检查+9项细化检查通过；包含侧栏快速切换/偏好持久化/焦点与inert、横条五类型、图标入口名称、指示角位置的独立函数检查。CSS词法及按钮清单通过。浏览器策略限制仍在，未进行DOM、视觉或帧率认证。

参考：Apple Popovers https://developer.apple.com/design/human-interface-guidelines/popovers/ 建议指示角尽量直接指向触发控件；web.dev https://web.dev/articles/animations-and-performance 说明transform/opacity通常更易优化，布局动画仍需主线程工作。

## 工作流内容组件（2026-09-28）

第10章增加文件夹、知识库文件夹和角色卡，维护源为scripts/workflow-content.js/css。文件夹由后侧页签、叠放纸张、半透明前袋组成；展开列出三份示例文档，知识库另有“已就绪”语义。打开/收起复用共享按钮和aria-expanded/aria-controls。它们是流程叙事中的内容对象，不新增执行节点类型。

角色卡使用本地AI生成虚构人物肖像（assets/demo-role-portrait.png），显式标记演示身份。待机、语音、视频三个状态支持切换，活动态有静音、模拟波形和演示计时；切换语音/视频保留会话起点，回到待机清除计时并禁用静音。只有一个按需计时器，计时文本不作为实时播报区域；状态变化使用role=status。视频是状态示例和静态肖像，没有音视频传输或设备权限请求。减少动态效果停止波形与纸张过渡。

独立组件下方有“资料来源→角色协作→答复与引用”组合演示，资料来源可切换普通文件夹/知识库。桌面并排，窄屏转为纵向；继续使用当前中性液态玻璃、科技蓝操作、绿色状态。三个媒体图标进入共享图标库，当前共70项。

验证：37项原检查、9项细化检查、3项新增内容组件检查通过（49项）；CSS词法和按钮清单通过。肖像已查看，页面未进行浏览器/视觉验收，未请求或模拟真实麦克风、摄像头权限。

## 员工信息卡与圆形头像（2026-09-28）

第10章新增Employee区域，源文件scripts/employee-content.js/css。员工卡参考大肖像、姓名、描述与底部动作的层级，使用当前浅色液态玻璃；展示姓名、职位、部门、员工编号、在职/休假/停用状态及可展开详情。各实例有独立详情ID。演示肖像复用AI生成的虚构人物，不代表真实员工。

employeeAvatarMarkup提供24/32/40/64px常用头像，96px用于大图缺失占位。在线、忙碌、离线有无障碍文字说明；无照片显示姓名首字，图片失败移除破图并保留占位。employeeCardMarkup接受结构化数据，输入统一裁剪和转义。在职状态不等于在线状态，紧凑员工条目不根据在职状态推断在线。

本地预览表单支持姓名、职位、部门、在职状态与照片占位切换，同步更新员工卡/紧凑条目；重置恢复示例，不持久化任何员工信息。所有动作使用共享.btn，Select使用现有增强控件。窄屏改为单列。

验证：原49项加3项员工组件源码/独立函数检查，共52项通过；新增覆盖输入转义、唯一详情目标、头像尺寸约束与缺省、员工信息同步和在线状态分离。浏览器/视觉验收未执行。

## 项目与模板卡（2026-09-28）

第10章project-components新增横向大封面项目卡。复用液态玻璃与共享按钮，底部承载标题、简介、元信息与动作。包含精选模板、已有项目、无封面模板三个样例；有封面卡采用本地AI生成的虚构工业巡检图，封面失败时回退到相同流程图案背景。

模板动作是“选用模板”，已有项目是“打开项目”，两者均有“预览”。选用只记录本页当前模板，提供已选用标记、aria-pressed及取消入口；项目打开只展开结构预览，不改变模板选择。预览包含真实样例节点顺序；打开时聚焦预览区域，关闭或Esc回到触发按钮。演示不创建后端项目、不连接系统，刷新后重置。

共用按钮新增on-media变量用于照片上次级动作，沿用同一胶囊几何与状态，未引入局部按钮造型。首卡跨列，后两卡成对；≤800px单列。卡片不是嵌套按钮，标题通过aria-labelledby关联，各标题ID唯一。封面装饰图使用空alt。

维护源：scripts/project-content.js/css。55项源码/独立函数检查通过，包含模板/项目操作区分、封面缺省、输入转义、单选规则和焦点往返。独立源码复核无明确阻断；未做浏览器或视觉验收。


Dock添加入口状态：所有画布共用canvasDockMarkup。加号默认为Primary科技蓝底白色加号，面板展开时通过aria-expanded=true切换白色玻璃底与深色加号；关闭或切换到模板库后恢复蓝色。保持44px圆形、共享胶囊立体材质及键盘焦点。样式维护于scripts/buttons.css的dock-create变体，不再使用通用toggle选中配色。


## 节点配置布局整理

五类节点共用有边界的配置布局：弹窗宽度上限860px，高度为min(760px, 可用视口高度)，桌面上下各留16px、窄屏各留10px；高度不由当前页签内容决定。Header、胶囊页签和Footer保持位置，正文flex填满剩余空间并独立滚动；预留滚动条空间，减少横向位移。低高度视口收紧固定区间距。页签从modal-body移为兄弟元素，消除透明吸顶区下的字段叠影，保留role=tab、aria-selected、roving tabindex与方向键操作。

配置分组默认两列；普通短字段最大360px、选择器280px、数字输入160px。长说明、URL和字段表格跨列；文本域初始76px，可纵向调整至220px。输出格式分段控件按内容宽度收紧，空间不足换行。620px以下单列；表格在自身区域横向滚动。通用字段规则用:where降低优先级，让类型宽度约束生效。没有删除配置字段、校验、保存/恢复或未保存退出保护。

维护源：scripts/node_configuration.py与scripts/node-configuration.css；胶囊页签状态在scripts/buttons.css。源码及相关回归检查通过，实际浏览器布局和交互仍未验收。


## 内容状态标签（2026-09-29）

第11章与第27章共用scripts/status-labels.js/css。进行中科技蓝、已发布成功绿、待审核琥珀、异常错误红，草稿/已暂停/已归档使用中性灰并配不同图标。标签改用不透明实底白字（至少5.81:1计算对比度），保留文字，去掉旧collection-status浅色/统一圆点实现；它是展示标签，不是按钮。七种状态在规范中展示，列表保留原有四种业务数据。详见qa/status-colors.md；源码检查通过，浏览器视觉未验收。

## 空画布引导卡（2026-09-29）

空画布是正常的初始状态，不采用错误色。共享empty-message增加88%浅色玻璃底、背景模糊、24px圆角与柔和投影，标题18px、说明14px，保留共享Primary添加按钮。卡片最大360px，宽度受画布约束；画布视口为底部Dock单独保留90px，短画布内引导区可滚动。第23章空画布示例高度440px，内部画布占满容器，去掉旧的仅在Dock示例中增加卡片底部内边距的规则。减少透明度设置或不支持背景模糊时使用实色底。

维护源：scripts/refinements.py与scripts/canvas-dock.css。37项基础检查、9项相关回归检查、JS语法和CSS声明检查通过；浏览器视觉及实际交互未验收。

文件夹轮廓修正：scripts/workflow-content.js/css以每个实例独立ID的SVG曲线裁切替换前后层的polygon硬裁切。左右外缘与斜肩均使用曲线连接，归一化坐标随普通/紧凑文件夹缩放。普通资料与知识库共用轮廓；纸张展开、文字和操作保持原有实现。未提供裁切时回退为圆角面板，强制颜色模式保留前层实线边界。


## 内容库工具区与选择器定位（2026-09-29）

内容库按组件宽度排列：超过960px时标题左侧、搜索与三个筛选右侧；不足时改为上下分区，720px以下搜索独占一行，480px以下筛选两列，300px以下一列。移除内容库装饰性英文眉题，保留业务标题、说明及本地演示标识。筛选条件摘要与结果计数仍紧贴表格。

共享选择器由scripts/select-behavior.js维护，替换基线旧定位代码。默认下方优先，不足向上，两侧均不足取较大空间并限高滚动。短列表可以data-placement="item-aligned"启用选中行与触发器对齐；第27章类型/状态/负责人使用此模式，顺序保持不变，触及边界回退为上下展开。搜索型选择器始终采用上下展开。最大高度320px、边距12px、普通展开间隔6px，同时约束左右边缘、visualViewport和所在dialog。搜索后/窗口尺寸变化重算，外部滚动使触发器移动时关闭；打开与键盘导航只滚动选项列表，选中态统一蓝底白字加勾选图标。

参考：Radix Select区分item-aligned与popper（https://www.radix-ui.com/primitives/docs/components/select）；Carbon Data Table将搜索、筛选组织在列表工具栏中（https://carbondesignsystem.com/components/data-table/usage/）。布局断点与本页应用规则为本项目决策，非外部强制标准。

## 系统补充审阅样板（第 29–31 章）

三章按入口与浏览、运行与协作、数据与管理组织为双栏样板，≤1120px转单栏。它们组合既有 `.btn`、`.control`、`.surface`、`.menu`、`.badge`、`.switch` 和图标，不创建新按钮、输入或语义颜色变体。样板专用 CSS 只负责栅格、信息排列、详情面板、时间线和数据图形；按钮保留共享胶囊几何。审阅卡使用已有较厚玻璃层级，列表与日志内部使用浅透光内容面，不逐层重复模糊。运行记录、设置分类与详情行使用轻量选中态，与操作按钮的主蓝状态分开。所有数据和状态为本地设计演示，发布、分享、导入、上传和持久化均未接后端。浏览器视觉与键盘验收仍待完成。

新增章节的原生 `select` 在动态插入后交由共享 `enhanceSelects()` 增强；第 30 章权限与第 31 章状态筛选沿用第 07 章的 Select 触发器、箭头、弹层和键盘规则。权限触发器宽 136px，窄屏独占一行；筛选标签与增强控件保留在同一列。

第 31 章的起止日期筛选与第 28 章的待办截止日期使用同一个月历浮层。触发器沿用 `.control`，日历浮层沿用 Select 的强玻璃表面和阴影，日期圆形选中态使用现有主蓝色与共享 `.btn`；不复制参考图中的暗色主题、活动彩点或周／月视图切换，因为这里的任务只是选择日期。周标题按周一到周日，非本月日期减弱层级；今天用细描边区别于已选日期。支持月份及年份浏览、今天、清除、方向键、Page Up/Down 和 Escape。起止边界互相限制，日期值仍保存在原有表单字段中；筛选状态仍为本页示例，不查询后端。待办新增、编辑、清空与提交继续读取原有日期字段。

## 数据展示组件定位与时序折线图（第 10、27、31 章）

通用数据表格（Data Table）使用第 27 章「内容与项目列表」：它有列标题、行操作、搜索、筛选、排序、选择、批量操作、分页与空态。第 24 章「字段映射」是可编辑的配置表格（Editable Table），解决单元格录入任务，不能代替通用数据列表。卡片列表（Card List）使用第 10 章「资源分类页与卡片」（Library Pages），复用既有项目卡片。第 31 章提供这两处的直接章节链接，不再做第二套表格或卡片。

时序折线图（Time-series Line Chart）此前没有对应样板，第 31 章现新增独立宽卡。它以 0 为纵轴基线、按日连续横轴、单条主蓝色曲线和当前数据点表达运行次数；使用共享玻璃卡、按钮和文字层级。近 7 日／近 30 日切换复用共享胶囊切换按钮。曲线、总数、当前点读数和可展开逐日表格都来自同一组本地示例数据；键盘可用左右方向键及 Home／End 浏览数据点。坐标刻度与选中读数显示具体数值，颜色不作为唯一信息载体。示例数据按本地日期生成，不连接运行服务。

## 独立数据表格与图表组件（第 32 章）

参考图 1 的价值是横向信息密度、分离的行面板和直接可见的状态；其暗黑主题、操作系统徽标和绿色整行光晕不属于本系统。第 32 章的 Data Table 02 是第 27 章通用表格的独立摆放变体：轻玻璃组件边界内包含标题、结果数、筛选、表格与滚动区，行间留 8px，使用共享状态标签和资源能量条。能量条显式继承 0–79% 科技蓝、80–94% 提醒色和 95% 以上错误色，读数始终并列。它适合服务状态总览；第 27 章继续负责内容管理中的搜索、批量选择和分页。

雷达指标画像卡片是单对象的紧凑竖向组件。图形是单系列雷达图（Radar Chart，亦称蜘蛛图），参考图的多层环形图只用于提取紧凑卡片的排版方式；环形占比与雷达指标的含义不同。顶部放对象名称、简要资料与状态，中部放缩小的雷达图和可配置的概览字段，底部用两列列出逐项指标值；指标解释收进卡片内的原生 `details`，需要时展开。鼠标悬停、键盘聚焦或触控点按雷达顶点，会显示指标名称与 0–100 分数。5 维设备与 8 维人物由同一渲染函数生成，未来可替换为物品等对象；维度数量来自数据。示例概览分别为“良好”和“稳健”，由数据显式提供，不自动合成总分，因为不同维度的权重需要业务依据。所有维度必须是同向、同一 0–100 分尺度；示例评分没有真实测量依据，不能作为业务结论。卡片与页面其他组件共用浅色透光表面、高光边缘、模糊、阴影和共享状态标签；雷达网格与轮廓使用细描边及轻高光，避免进度轨道遮挡刻度。

参考图 4 的半圆组件用于有总量的资源占比，语义为 Meter，而非任务执行 Progress。它与第 17 章资源能量条共用 80% 提醒、95% 容量不足阈值，且沿用环形进度的内凹轨道、渐变填充与高光材质，并保留用量、剩余额度和 0／100 刻度。图 4 的周柱状图作为分类比较样板，柱体复用资源能量条轨道与填充；待办列表已有第 28 章，图 4／5 的时序折线图已有第 31 章。图形遵循现有玻璃材质、文字层级和语义色，不复制暗色霓虹与强光晕。

## 规划、步骤与指标组件（第 33 章）

资源时间轴（Resource Timeline）与甘特图（Gantt Chart）共享日期网格和横向滚动容器，使用不同的行语义：前者按成员展示本周任务分配，后者按任务展示六个月工期、完成度与前置任务。网格保持轻玻璃表面与分离的行容器。普通任务条复用共享 `.btn.primary` 的科技蓝胶囊材质，超时未完成任务复用 `.btn.danger` 的红色材质；两者均使用白字与浅色指示点。超时由任务的待完成状态和结束日期共同决定，明细表另以文字写出状态。甘特条在胶囊内部用深蓝段表示完成比例。条形长度与明细表的起止日期出自同一组数据；日期表提供无图形的准确读取方式。参考图 1 的按队伍与月份排列有价值，但其长期项目数字和高饱和团队颜色未照搬。

连线步骤导航（Connected Stepper）是第 17 章 Stepper 的另一种布局，而非第二套按钮。独立的 `.planning-stepper-component` 包含圆钮序列、当前步骤说明和导航操作，外层章节只承载标题与使用规则；`createConnectedStepper(root,{steps,initialStep,completedThrough,label})` 可在其他容器复用。圆点直接复用第 06 章 1–10 数字圆钮的 `.btn icon-only lg`；数字在已完成态仍保留，右下小勾和成功色补充状态。已完成步骤可返回，未到达步骤禁用，当前项使用 `aria-current="step"`；窄屏转为纵向。

里程碑（Milestone Timeline）只显示有明确日期、交付结果和状态的关键节点，与第 30 章记录日常操作的 Activity Timeline 分工不同。未来节点明确标作「待开始」，不以大小或光晕暗示已完成。Metric Card 用一张较大的主指标卡与三张紧凑卡建立读数顺序：成功率显示主要数值和七个本周期示例采样点，处理时长、待处理任务和失败运行保持高密度扫描。卡片共用浅玻璃底，语义色收敛到图标底与变化标签，取消横贯卡片的彩色标题带。方向箭头必须连同业务含义判断好坏：失败次数上升为不利，处理时长下降为有利。第 33 章示例可切换近 7／30 日，趋势与读数均非真实业务数据。


## 开发组件规则（2026-10-01）

浅色玻璃体系保持；数据密集区使用稳定浅色表面。密度、层级、图表、表格和动效扩展定义于 scripts/development-tokens.css，默认主题导出 tokens.json。36/48/56px表格最小行高、6/12/16px单元格上下留白分别用于紧凑/标准/舒适密度。组件选用、状态矩阵、响应式断点、公共行为与API以 DEVELOPMENT_STANDARD.md 为准。原有变体保留用途差异，步骤状态、数据查询、浮层定位与指标读数共用核心函数。新增业务组件不执行真实服务操作。

## 1.1.1 功能边界与一致性

默认字段浅玻璃填充为 --field-surface（88%），边界使用 --field-border / --field-border-hover；白色 --glass-border 用于装饰材质。减少透明度/不支持blur时字段使用稳定实底，伪元素反光和模糊一并回退。局部可读性修复保留其余卡片和环境容器的透光策略；配色计算不等于照片背景的实际视觉验收。

共享动效使用 --motion-* / --ease-*；spinner、skeleton、图标绘制等职责不同的时长属于受控例外。待办状态和前四环图分类接入共享语义色/图表系列Tokens。键盘、浮层与适用状态见 DEVELOPMENT_STANDARD.md / COMPONENT_STATUS.md。

## 1.1.2 质量复核规则

关闭态开关通过 --switch-surface-off 引用既有 --color-border-strong，搭配轻反射形成可辨认轨道；保留44×26px、滑块18px位移及蓝色开启态。强制颜色模式使用系统ButtonFace/ButtonText/Highlight/HighlightText。静态sRGB对比不代替实际玻璃背景验收。

待办与内容管理组合按其collection容器宽度使用1000/680px断点，窄字段与分页可收缩/换行；环图标签可断行，360px以下容器转单列。视口回退保留。动态状态、焦点和异步规则见 DEVELOPMENT_STANDARD.md；本轮结果及真实浏览器未验收项见 FINAL_ACCEPTANCE.md。