Skip to content

[P2] 设计系统补全与文档漂移修复包(前端审计第二轮) #1827

Description

@DeliciousBuding

背景

前端审计第二轮对设计系统做缺口与文档漂移审计:token 契约缺伴生语义、表单组件族缺失、断点体系不存在、Storybook 基建缺口、文档断言过期。聚合追踪(第一轮已知的孤儿组件/stories/icon/间距/designTokens.ts/preset UI/mobile hex/CI visual QA 在 #1820)。

所属部分

  • 前端
  • 后端
  • 客户端

要做什么

token 契约:

  • --td-* 缺状态伴生 token(无 --td-info、无 bg/soft 变体)→ 组件被迫消费 v4 裸名(DeployCard/Pill/RiskBadge/AgentStreamingBar)
  • 6 预设不覆盖 --danger/--danger-bg(只写 --destructive/--color-danger),预设主题下 danger 停留默认红;glass/state/run/tool/role/bdr-focus 族零覆盖
  • 无 disabled token 家族:组件各自硬编码 opacity 五档并存(0.3/0.4/0.5/0.65/0.85)
  • --state-* 固定 hex 且 light 对比 ≈3.3:1 正文 AA 失败,但被 TasksPage/ProjectsPage/OrchestratorCard/DagTree 消费
  • 117 处 var(--td-*, 字面量) fallback 与 SSOT 矛盾:radius-control 6/8px 双值、text-sm/xs 双值、--td-surface white 三处(明令禁止)、--td-dur-normal 140/180ms、--wb-gap-2xs 6/4px、--r-full 999/9999px、链式引用不存在 token(--bg-3/--mono)
  • 死 token 清理:--run-(16 条)、--tool-(10 条)零消费者
    组件缺口:
  • 无 Input/Textarea/Checkbox/Switch/Radio/FormField 表单组件族:19 个文件裸 input/textarea,error 态各自手写;AuthPage .input desktop/web 双份分叉;SettingsPage 自造 .switch
  • Select 缺 disabled option/error 态/resize 重定位
    响应式:
  • 断点体系不存在:tokens-base 断点只在注释(CSS 变量不可用于 @media)、无 JS 断点 hook;实际 @media 混用 760/767/768/480/720/700/420/360
  • 761-1919px 零 @media:1280px 窗口主区被压到约 560px;useWorkbenchPanelLayout 无 resize 监听
    基建:
  • Storybook:desktop stories glob 匹配 0 文件(死配置);preview 不加载 presets.css/不设 data-theme;backgrounds 硬编码与主题值不一致
  • preset FOUC:desktop index.html 无预渲染脚本、web 只引导 mode 不引导 preset key
  • z-index 绕过 --z-* 表裸写三处;StatusBadge 长在 ui/ 之外成治理盲区
    文档漂移修复:
  • 07 §2.6 「无 var(--x,…) fallback 残留」不实(110+ 处);§1 data-preset tokendance 不存在(实际 data-theme-preset 且无 tokendance 预设);§10 断点 hook 不存在;component-acceptance Modal/ToastStack 缺 stories 已过期、ToastStack debt 已实现;chatview fork lg/xl 20/28 描述已过期(实际 16/24);visual QA 89/100 scorecard 外迁不可复核 → 逐条修订或补证据

验收标准

  • --td-* 契约补齐状态伴生 token,v4 裸名消费清零
  • 断点有 SSOT(CSS + JS hook),760-1920 区间有布局策略
  • Storybook 可渲染 dark/preset stories
  • 文档断言与代码一致;design token 门禁与 tokens 测试通过

相关文档

  • docs/architecture/07-design-system-ssot.md
  • docs/component-acceptance.md

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Medium priorityjavascriptPull requests that update javascript code前端Web 工作台、IM 交互、前端状态和 UI

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions