2.0 KiB
2.0 KiB
素材库配色与多选架构经验
更新日期：2026-05-17
这次改造不只是“把颜色调顺眼一点”，而是把素材库的视觉状态、操作入口和全局主题 token 收拢到同一套架构里。
问题背景
- 素材库卡片的 hover / selected 反馈偏重，黑灰阴影和白色蒙层会压住图片内容。
- 同一操作区里有多个橙色主按钮，主次关系不清，视觉也会抢焦点。
- 多选场景下，顶部工具条和右侧详情栏都想承担“插入/使用”动作，入口重复。
- AI 编程如果看不到统一 token，很容易继续写局部硬编码颜色。
架构变更
- 主题层统一输出
--aitu-ui-*token，组件层优先读 token，不再各自发明颜色。 - 素材库卡片状态改成“边框 + 浅底 + 轻 focus ring”，不再用整图蒙层做选中反馈。
- 多选操作收敛到右侧 inspector，顶部只保留浏览级操作，避免双主按钮。
- 同一区域默认只保留一个品牌橙主按钮，其余动作降级为 outline、text 或 danger。
- 颜色规则进入文档后，后续 AI 编程可以直接按规范生成，减少风格漂移。
落地经验
- 选中态必须比 hover 更明确，但不要靠压暗内容来实现。
- 视觉强调优先用边框、浅底、角标和 focus ring，而不是堆阴影。
- 多选不是纯样式分支，而是产品状态，入口要能显式感知 selection mode。
- 批量动作最好和摘要信息放在一起，减少用户在不同区域重复找同一个按钮。
后续约束
- 新 UI 先查共享 token，再考虑新增颜色。
- 禁止新增黑色主按钮、重黑遮罩、孤立蓝色 focus。
- 需要新增 token 时，先说明语义、使用范围和替代方案。
- 同一区域如果已经有主按钮，就不要再堆第二个品牌主按钮。
涉及范围
packages/drawnix/src/styles/theme.scsspackages/drawnix/src/styles/tdesign-theme.scsspackages/drawnix/src/components/media-library/*