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>
80 lines
2.6 KiB
Text
80 lines
2.6 KiB
Text
---
|
||
description:
|
||
globs: components/*/demo/**
|
||
alwaysApply: false
|
||
---
|
||
# Demo 规范
|
||
|
||
- demo 代码尽可能简洁
|
||
- 避免冗余代码，方便用户复制到项目直接使用
|
||
- 每个 demo 聚焦展示一个功能点
|
||
- 提供中英文两个版本的说明
|
||
- demo 文件扩展名：
|
||
- 基础 demo：.tsx
|
||
- markdown 说明：.md
|
||
- 遵循展示优先原则，确保视觉效果良好
|
||
- 展示组件的主要使用场景
|
||
- 按照由简到繁的顺序排列 demo
|
||
- 确保 demo 在各种尺寸下都能正常展示
|
||
- 对于复杂交互提供必要的操作说明
|
||
|
||
## 文件组织
|
||
|
||
- 每个组件演示包含 `.md`（说明文档）和 `.tsx`（实际代码）两个文件
|
||
- 位置：组件目录下的 `demo` 子目录，如 `components/button/demo/`
|
||
- 命名：短横线连接的小写英文单词，如 `basic.tsx`、`custom-filter.tsx`
|
||
- 文件名应简洁地描述示例内容
|
||
|
||
## MD 文档规范
|
||
|
||
- 必须包含 `## zh-CN` 和 `## en-US` 两种语言说明
|
||
- 内容简洁明了，突出组件特性和用法
|
||
- 避免冗长段落，必要时使用列表或粗体
|
||
- 标注注意事项和实验性功能
|
||
|
||
## TSX 代码规范
|
||
|
||
- 导入顺序：React → 依赖库 → 组件库 → 自定义组件 → 类型 → 样式
|
||
- 类型：为复杂数据定义清晰接口，避免 `any`
|
||
- 结构：
|
||
- 使用函数式组件和 Hooks
|
||
- 复杂逻辑提取为独立函数
|
||
- 状态管理用 `useState`/`useEffect`
|
||
- 风格：
|
||
- 2空格缩进，箭头函数，驼峰命名
|
||
- 常量大写+下划线，布尔props用`is`/`has`前缀
|
||
|
||
## 示例类型
|
||
|
||
1. **基础用法**：展示最简用法，置于首位，代码精简
|
||
2. **变体展示**：不同大小、类型、状态，合理分组
|
||
3. **交互演示**：展示状态变化和用户交互
|
||
4. **数据交互**：展示加载、过滤、排序等
|
||
5. **边界情况**：空数据、错误状态处理
|
||
|
||
## 代码质量
|
||
|
||
- 实用且专注于单一功能
|
||
- 关键处添加简洁注释
|
||
- 使用有意义的数据和变量
|
||
- 优先使用 antd 内置组件，减少外部依赖
|
||
- 性能优化：适当使用 `useMemo`/`useCallback`，清理副作用
|
||
|
||
## 命名规则
|
||
|
||
- 基础文件：`basic.tsx`、`controlled.tsx` 等
|
||
- 调试类：使用 `debug-` 前缀
|
||
- 实验性：使用 `experimental-` 前缀
|
||
|
||
## 特殊示例
|
||
|
||
- **调试示例**：用于开发测试，通常不在文档显示
|
||
- **无障碍**：展示标签关联和键盘导航
|
||
- **响应式**：展示不同视口下的行为
|
||
- **多语言**：展示国际化配置方法
|
||
|
||
## 质量要求
|
||
|
||
- 确保代码运行正常，无控制台错误
|
||
- 适配常见浏览器
|
||
- 避免过时 API，及时更新到新推荐用法
|