Skip to content

refactor(ccui): 多代理组件优化——深色模式 token 化 / 逻辑·响应式修复 / 可访问性 / 一致性 - #20

Merged
vaebe merged 3 commits into
mainfrom
opt/components-darkmode-logic-cleanup
Jun 8, 2026
Merged

refactor(ccui): 多代理组件优化——深色模式 token 化 / 逻辑·响应式修复 / 可访问性 / 一致性#20
vaebe merged 3 commits into
mainfrom
opt/components-darkmode-logic-cleanup

Conversation

@vaebe

@vaebe vaebe commented Jun 8, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Owner

概述

多代理审查驱动的全库组件优化收口。从多代理扫描 → 重确认（每条 2 个对立视角 + 分歧裁决）
→ 73 条安全自动修 → 58 条人工决策落地 → /code-review-expert 审查再整改，分阶段完成。

  • 171 files changed
  • 验证基线：93 files / 2028 tests 通过 · vue-tsc 0 错误 · docs:build 无 Undefined variable

提交脉络

commit 内容
15a3548 深色模式 token 化 / 逻辑修复 / 泄漏清理
759b980 重确认后 73 项中可安全自动修部分（a11y / 响应式 / BEM / perf / logic）
e64b0bf 剩余 58 条待人工介入清单（临时文档）
2c91dd1 落地 58 条人工决策项 + 审查整改
41643db 移除已落地的清单文档

主要变更

深色模式（固定 token 组） — themes/{light,dark}.ts 新增 menu-dark-* / layout-dark-* /
button-*-shadow，收口 layout/menu/button 硬编码色；强制深色组件（深色侧栏/menu theme="dark"）
不随 .dark 切换，保「浅色页深色侧栏」语义。

响应式 — config-provider 注入 computed ref + Proxy 解包（恢复 15 个消费者响应性）；
tabs/tree/avatar 补响应；descriptions slot thunk 化；textarea 受控空串修复（modelValue 默认 undefined）。

逻辑 — date-picker clear 重置 pending；modal Escape 改栈式（只关栈顶）；message 走 leave 过渡；
table-column 改按 DOM 位置排序（解决重挂载/中间插列错位）；time-picker now 尊重 step/disabled。

可访问性（25 处） — 补 role/aria/tabindex/keydown + 处理器签名放宽；color-picker clear 移出 button；
segmented radiogroup + 每实例 name；carousel 正确 aria 关联；date-picker grid 三层语义。

一致性 BEM — radio/check-box/calendar/timeline/button-3d/rate 状态类走 ns 命名空间约定。

设计取舍 — tag solid 实现饱和度差异；steps 移除无样式的 navigation 死类型。

性能/去重 — form 删重复 deep watch；grid resize rAF 节流；badge @mixin 抽公共块。

审查整改

落地后经 /code-review-expert：0 P0 / 0 P1 / 2 P2 / 6 P3，已全部整改
（textarea no-op 真修、table-column 改 DOM 排序、modal/message/tree/date-picker/tag/config-provider 6 项 P3）。

排除项

  • input-number 经验证为非缺陷（clamp-on-keystroke 是有意 UX、测试断言该行为），未改。

测试

cd packages/ccui && npx vp test --environment jsdom --run → 93 files / 2028 passed
pnpm docs:build → 无 Undefined variable，build complete

人工抽检（可选，单测覆盖不到）

  • tag solid 在 yellow/lime/cyan 等浅色系 preset 的白字对比度
  • carousel slidesToShow>1 下 aria 关联的读屏体验

Summary by CodeRabbit

  • New Features

    • Enhanced keyboard accessibility across components with proper focus management and Enter/Space key activation.
    • Improved theme token support for better dark mode consistency.

  • Bug Fixes

    • Fixed pagination clamping to prevent out-of-range displays.
    • Corrected validation timing and state management in form components.
    • Resolved visual states for indeterminate checkboxes and selection handling.

  • Improvements

    • Upgraded component styling to use design tokens, improving theme switching and dark mode support.
    • Enhanced accessibility with ARIA labels and semantic attributes throughout the UI.

vaebe and others added 3 commits June 5, 2026 09:34
@vaebe @claude
refactor(ccui): 多代理审查落地组件优化——深色模式 token 化/逻辑修复/泄漏清理
15a3548 
阶段化多子代理编排：81 组件并行发现 → 对抗验证（剔除误报）→ 67 组件并行最小修复，
全程测试+真实构建守门，3 处破坏测试契约的行为变更已回退。

- 深色模式：55 处硬编码 rgba(0,0,0,..)/阴影 → $ccui-* token，深色下正常反色
- 逻辑：anchor 字面量 0 渲染、死 prop showInkInFixed；watermark/color-picker/
  image-preview 等边界条件修复
- 清理：18 处定时器/监听/Observer 补 onBeforeUnmount 卸载，消除泄漏
- 样式去重 + 删除 avatar 死文件 icon-nobody.tsx（引用已清）

验证：vp test 2023 通过/93 文件（基线不变）；真实库构建 ✓ built 无 Undefined variable；
新引入 33 个 token 全部比对 358 个已定义 token、@use 就位。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vaebe @claude
fix(ccui): 多代理重确认后补修73项中可安全自动修部分（a11y/响应式/BEM/perf/logic）
759b980 
对上一轮"待人工审"131条做多代理重确认（每条2对立视角+分歧裁决）：
确认0误报，其中73条实为确定性安全修复（不改对外API/行为/快照），本提交落地之。

- a11y：close/clear/分页/菜单项等补 tabindex/role/aria-label/键盘(Enter|Space) 可达，
  仅新增属性、不动既有 class/结构/事件
- 响应式：card boxClass→computed、breadcrumb separator→toRef、check-box inject/computed
  上提至 setup 顶层、check-box-group 不可变数组等价改写（DOM 输出逐字不变）
- 一致性：写死类名→ns.e()/ns.m() 并与 scss 选择器锁步
- perf：数组下标 key→稳定唯一 key（masonry/space 等）
- logic：form-list key 对齐、若干边界修复

跳过6项（image-preview 固定深色查看器 chrome、不存在的 token、menu 本已正确等）。
验证：vp test 2023 通过/93 文件；真实构建无 Undefined variable；新增 token 全已定义、@use 就位。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vaebe @claude
docs(ccui): 多代理优化——剩余58条待人工介入清单
e64b0bf 
经多代理重确认后仍需人工决策的项（涉及对外行为/API、快照契约、设计取舍或较大重构）。
已自动修复部分见 15a3548 / 759b980。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jun 8, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c34878be-9c3f-487b-bd8d-d580d73cdf1a

📥 Commits

Reviewing files that changed from the base of the PR and between 368c4d6 and e64b0bf.

📒 Files selected for processing (135)
  • CCUI-OPTIMIZATION-RISK-REPORT.md
  • packages/ccui/ui/affix/src/affix.tsx
  • packages/ccui/ui/alert/src/alert.scss
  • packages/ccui/ui/alert/src/alert.tsx
  • packages/ccui/ui/anchor/src/anchor-types.ts
  • packages/ccui/ui/anchor/src/anchor.tsx
  • packages/ccui/ui/auto-complete/src/auto-complete.scss
  • packages/ccui/ui/avatar/src/avatar.tsx
  • packages/ccui/ui/avatar/src/components/icon-nobody.tsx
  • packages/ccui/ui/avatar/src/composables/use-get-background-color.ts
  • packages/ccui/ui/avatar/src/composables/use-get-display-name.ts
  • packages/ccui/ui/badge/src/badge.tsx
  • packages/ccui/ui/border-beam/src/border-beam.scss
  • packages/ccui/ui/breadcrumb/src/breadcrumb.scss
  • packages/ccui/ui/breadcrumb/src/breadcrumb.tsx
  • packages/ccui/ui/button-3d/src/button-3d.scss
  • packages/ccui/ui/button-3d/src/button-3d.tsx
  • packages/ccui/ui/button/src/button.scss
  • packages/ccui/ui/button/src/button.tsx
  • packages/ccui/ui/calendar/src/calendar.tsx
  • packages/ccui/ui/card-meta/src/card-meta-types.ts
  • packages/ccui/ui/card/src/card.scss
  • packages/ccui/ui/card/src/card.tsx
  • packages/ccui/ui/carousel/src/carousel.scss
  • packages/ccui/ui/carousel/src/carousel.tsx
  • packages/ccui/ui/cascader/src/cascader.tsx
  • packages/ccui/ui/check-box/src/check-box-group.tsx
  • packages/ccui/ui/check-box/src/check-box.tsx
  • packages/ccui/ui/checkable-tag/src/checkable-tag-group.tsx
  • packages/ccui/ui/checkable-tag/src/checkable-tag.scss
  • packages/ccui/ui/collapse/src/collapse-item.tsx
  • packages/ccui/ui/collapse/src/collapse.scss
  • packages/ccui/ui/collapse/src/collapse.tsx
  • packages/ccui/ui/color-picker/src/color-picker.scss
  • packages/ccui/ui/color-picker/src/color-picker.tsx
  • packages/ccui/ui/config-provider/src/config-provider.tsx
  • packages/ccui/ui/date-picker/src/date-picker.tsx
  • packages/ccui/ui/descriptions/src/descriptions.scss
  • packages/ccui/ui/descriptions/src/descriptions.tsx
  • packages/ccui/ui/divider/src/divider.tsx
  • packages/ccui/ui/drawer/src/drawer.scss
  • packages/ccui/ui/dropdown/src/dropdown.scss
  • packages/ccui/ui/dropdown/src/dropdown.tsx
  • packages/ccui/ui/empty/src/empty.tsx
  • packages/ccui/ui/flex/src/flex.tsx
  • packages/ccui/ui/float-button/src/back-top.tsx
  • packages/ccui/ui/float-button/src/float-button.scss
  • packages/ccui/ui/form/src/form-item.tsx
  • packages/ccui/ui/form/src/form-list.tsx
  • packages/ccui/ui/grid/src/grid.tsx
  • packages/ccui/ui/icon/src/icon.tsx
  • packages/ccui/ui/image-preview/src/image-preview.scss
  • packages/ccui/ui/image-preview/src/image-preview.tsx
  • packages/ccui/ui/image/src/image.scss
  • packages/ccui/ui/image/src/image.tsx
  • packages/ccui/ui/input-number/src/input-number.tsx
  • packages/ccui/ui/input-otp/src/input-otp.scss
  • packages/ccui/ui/input-otp/src/input-otp.tsx
  • packages/ccui/ui/input-search/src/input-search.scss
  • packages/ccui/ui/input-search/src/input-search.tsx
  • packages/ccui/ui/input/src/input.scss
  • packages/ccui/ui/input/src/input.tsx
  • packages/ccui/ui/layout/src/layout.scss
  • packages/ccui/ui/layout/src/layout.tsx
  • packages/ccui/ui/masonry/src/masonry.tsx
  • packages/ccui/ui/mentions/src/mentions.scss
  • packages/ccui/ui/mentions/src/mentions.tsx
  • packages/ccui/ui/menu/src/menu.scss
  • packages/ccui/ui/menu/src/menu.tsx
  • packages/ccui/ui/message/src/message.scss
  • packages/ccui/ui/modal/src/confirm.tsx
  • packages/ccui/ui/modal/src/modal.scss
  • packages/ccui/ui/notification/src/notification-item.tsx
  • packages/ccui/ui/notification/src/notification.scss
  • packages/ccui/ui/notification/src/notification.ts
  • packages/ccui/ui/notification/src/use-notification.ts
  • packages/ccui/ui/pagination/src/pagination.tsx
  • packages/ccui/ui/popconfirm/src/popconfirm-types.ts
  • packages/ccui/ui/popconfirm/src/popconfirm.scss
  • packages/ccui/ui/popconfirm/src/popconfirm.tsx
  • packages/ccui/ui/popover/src/popover.scss
  • packages/ccui/ui/popover/src/popover.tsx
  • packages/ccui/ui/progress/src/progress-types.ts
  • packages/ccui/ui/progress/src/progress.scss
  • packages/ccui/ui/progress/src/progress.tsx
  • packages/ccui/ui/radio/src/radio-group.tsx
  • packages/ccui/ui/range-picker/src/range-picker-types.ts
  • packages/ccui/ui/range-picker/src/range-picker.tsx
  • packages/ccui/ui/rate/src/rate.tsx
  • packages/ccui/ui/result/src/result-types.ts
  • packages/ccui/ui/result/src/result.scss
  • packages/ccui/ui/segmented/src/segmented.scss
  • packages/ccui/ui/select/src/select.scss
  • packages/ccui/ui/select/src/select.tsx
  • packages/ccui/ui/skeleton-node/src/skeleton-node.scss
  • packages/ccui/ui/skeleton/src/skeleton.scss
  • packages/ccui/ui/skeleton/src/skeleton.tsx
  • packages/ccui/ui/slider/src/composables/use-slider.ts
  • packages/ccui/ui/slider/src/slider.scss
  • packages/ccui/ui/slider/src/slider.tsx
  • packages/ccui/ui/space-compact/src/space-compact.scss
  • packages/ccui/ui/spin/src/spin-types.ts
  • packages/ccui/ui/spin/src/spin.tsx
  • packages/ccui/ui/splitter/src/splitter.scss
  • packages/ccui/ui/splitter/src/splitter.tsx
  • packages/ccui/ui/steps/src/steps.scss
  • packages/ccui/ui/steps/src/steps.tsx
  • packages/ccui/ui/switch/src/switch.scss
  • packages/ccui/ui/table-column-group/src/table-column-group.tsx
  • packages/ccui/ui/table-column/src/table-column.tsx
  • packages/ccui/ui/table-summary/src/table-summary.tsx
  • packages/ccui/ui/table/src/table-types.ts
  • packages/ccui/ui/table/src/table.scss
  • packages/ccui/ui/table/src/table.tsx
  • packages/ccui/ui/tabs/src/components/tab/tab.tsx
  • packages/ccui/ui/tabs/src/tabs.scss
  • packages/ccui/ui/tabs/src/tabs.tsx
  • packages/ccui/ui/tag/src/tag.scss
  • packages/ccui/ui/textarea/src/textarea.tsx
  • packages/ccui/ui/time-picker/src/time-picker.tsx
  • packages/ccui/ui/timeline/src/timeline-item.tsx
  • packages/ccui/ui/timeline/src/timeline.scss
  • packages/ccui/ui/tooltip/src/tooltip.scss
  • packages/ccui/ui/tooltip/src/tooltip.tsx
  • packages/ccui/ui/transfer/src/transfer.scss
  • packages/ccui/ui/transfer/src/transfer.tsx
  • packages/ccui/ui/tree-select/src/tree-select.scss
  • packages/ccui/ui/tree-select/src/tree-select.tsx
  • packages/ccui/ui/tree/src/composables/use-tree-flatten.ts
  • packages/ccui/ui/tree/src/tree.tsx
  • packages/ccui/ui/typography/src/typography.scss
  • packages/ccui/ui/typography/src/typography.tsx
  • packages/ccui/ui/upload/src/upload.scss
  • packages/ccui/ui/watermark/src/watermark-types.ts
  • packages/ccui/ui/watermark/src/watermark.tsx

Walkthrough

新增风险报告文档，并为多个 ccui 组件更新了键盘交互、ARIA 语义、受控状态同步、滚动/选择逻辑以及主题变量引用。

Changes

风险报告文档

Layer / File(s) Summary
风险分类清单
CCUI-OPTIMIZATION-RISK-REPORT.md		 新增多类别风险清单，按响应式、逻辑、可访问性、一致性、深色模式、性能和样式去重分组。

组件行为与样式更新

Layer / File(s) Summary
交互语义与键盘支持
packages/ccui/ui/*		 多个交互组件补充了按钮语义、键盘触发、ARIA 属性和可聚焦状态。
状态同步与交互流程
packages/ccui/ui/*		 多个组件调整了受控同步、监听绑定、导航、清理和渲染时机。
表格与布局注册
packages/ccui/ui/table*, packages/ccui/ui/splitter*		 表格列顺序、列渲染代理、汇总注册和分割面板尺寸处理发生调整。
主题变量与样式收敛
packages/ccui/ui/*/*.scss		 大量组件样式从硬编码颜色、阴影和尺寸切换为共享主题变量或更统一的命名方式。

Sequence Diagram(s)

未生成。

Estimated Code Review Effort

🎯 5 (Critical) | ⏱️ ~90+ minutes

Possibly related PRs

  • vaebe/ccui#5: 同样涉及 packages/ccui/ui/calendar/src/calendar.tsx 的日期网格和交互逻辑调整。
  • vaebe/ccui#12: 同样涉及 input-number 和 slider 的交互与数值计算更新。
  • vaebe/ccui#19: 同样集中在 ccui 组件的主题变量、阴影和颜色收敛。

Poem

🐰 我蹦进了新样式的花园，
键盘一按，按钮轻轻开言。
影子变柔，颜色更齐整，
月光下的组件，闪闪发亮真安静。
我把萝卜藏进风险报告里，嘻嘻，跳！

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch opt/components-darkmode-logic-cleanup

@vaebe
vaebe merged commit eade608 into main Jun 8, 2026
3 of 4 checks passed
@vaebe
vaebe deleted the opt/components-darkmode-logic-cleanup branch June 8, 2026 13:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@vaebe