mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-15 13:38:29 +02:00
79425c5dc1
* feat: add cursor rules in .cursor/rules * docs: add non-component changelog rule * docs: update cursor rules format * feat: update cursor rules * refactor: remove duplicated styles.mdc * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * Delete .cursor/rules/component.mdc Signed-off-by: afc163 <afc163@gmail.com> * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * Delete pr_template.txt Signed-off-by: afc163 <afc163@gmail.com> * Delete .cursorrules Signed-off-by: afc163 <afc163@gmail.com> * Apply suggestions from code review Signed-off-by: afc163 <afc163@gmail.com> * Update .cursor/rules/project.mdc Signed-off-by: afc163 <afc163@gmail.com> * Update project.mdc Signed-off-by: afc163 <afc163@gmail.com> * Delete .cursor/rules/implementation.mdc Signed-off-by: afc163 <afc163@gmail.com> * Update project.mdc Signed-off-by: afc163 <afc163@gmail.com> * Apply suggestions from code review Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: afc163 <afc163@gmail.com> * feat: add server-side rendering guidelines * update * update --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
79 lines
No EOL
2.8 KiB
Text
79 lines
No EOL
2.8 KiB
Text
---
|
||
description:
|
||
globs: components/*/style/**
|
||
alwaysApply: false
|
||
---
|
||
# 样式规范
|
||
|
||
## 样式方案
|
||
|
||
- 使用 `@ant-design/cssinjs` 作为样式解决方案
|
||
- 每个组件的样式应该放在 `style/` 目录下
|
||
- 样式文件应该与组件结构保持一致
|
||
- 使用 CSS-in-JS 时应当注意性能影响，避免不必要的样式重计算
|
||
- 样式生成函数应遵循 `gen[ComponentName]Style` 的命名规范
|
||
- 样式覆盖应使用类选择器而非标签选择器，提高样式特异性
|
||
|
||
## Token 系统
|
||
|
||
- 使用 Ant Design 的设计 Token 系统
|
||
- 避免硬编码颜色、尺寸、间距等值
|
||
- 组件样式应基于全局 Token 和组件级 Token
|
||
- 自定义样式应尽可能使用现有的 Token，保持一致性
|
||
- 组件级 Token 命名规范：`Component` + 属性名，如 `buttonPrimaryColor`
|
||
- 对 Token 的修改应当向下传递，确保设计系统的一致性
|
||
|
||
## 响应式设计
|
||
|
||
- 组件应支持在不同屏幕尺寸下良好展示
|
||
- 使用相对单位（如 em、rem）而非固定像素值
|
||
- 关键断点应与设计系统保持一致
|
||
- 在小屏幕上提供良好的降级方案
|
||
- 使用 CSS Grid 和 Flexbox 布局实现响应式布局
|
||
- 考虑移动设备上的触摸交互体验
|
||
|
||
## 暗色模式
|
||
|
||
- 所有组件必须支持暗色模式
|
||
- 暗色模式应通过 Token 系统实现，不应硬编码
|
||
- 测试暗色模式下的颜色对比度，确保可访问性
|
||
- 在设计暗色模式时考虑降低亮度和饱和度
|
||
- 确保文本在暗色背景上有足够的对比度
|
||
- 图片和图标应提供适合暗色模式的版本
|
||
|
||
## RTL 支持
|
||
|
||
- 组件应支持从右到左（RTL）的阅读方向
|
||
- 使用 CSS 逻辑属性（如 margin-inline-start）替代方向性属性（如 margin-left）
|
||
- 图标和方向性元素应随 RTL 模式翻转
|
||
- 测试组件在 RTL 模式下的布局和交互
|
||
- 确保文本对齐和方向符合 RTL 规范
|
||
- 处理好数字和日期等特殊内容在 RTL 模式下的显示
|
||
|
||
## 动画效果
|
||
|
||
- 使用 CSS 过渡实现简单动画
|
||
- 复杂动画使用 rc-motion 实现
|
||
- 尊重用户的减少动画设置（prefers-reduced-motion）
|
||
- 动画时长和缓动函数应保持一致性
|
||
- 动画不应干扰用户的操作和阅读体验
|
||
- 为关键操作提供合适的反馈动画
|
||
- 避免使用会导致性能问题的 CSS 属性（如 box-shadow）进行动画
|
||
|
||
## 主题定制
|
||
|
||
- 支持通过 ConfigProvider 进行主题定制
|
||
- 提供完整的组件级 Token 配置
|
||
- 保持向后兼容性，不轻易改变 Token 含义
|
||
- 避免在组件内使用不可覆盖的样式
|
||
- 提供主题切换的平滑过渡效果
|
||
- 测试自定义主题在各种组件组合下的效果
|
||
|
||
## 可访问性样式
|
||
|
||
- 遵循 WCAG 2.1 AA 级别标准
|
||
- 确保焦点状态有明显的视觉提示
|
||
- 提供足够的色彩对比度
|
||
- 不依赖颜色来传达信息
|
||
- 支持用户放大页面至 200% 时的正常布局
|
||
- 避免使用会导致闪烁的动画 |