mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-10 19:39:21 +08:00
Compare commits
12 Commits
feature
...
docs/agent
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
446c446dcc | ||
|
|
0a5334b5e5 | ||
|
|
928fecbb2d | ||
|
|
8d1e2fafa9 | ||
|
|
8a496e15aa | ||
|
|
ea58eaf200 | ||
|
|
dd15122cb2 | ||
|
|
da84086627 | ||
|
|
8f723775a7 | ||
|
|
46dd425e39 | ||
|
|
58b451d485 | ||
|
|
e242c9af5a |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -78,6 +78,7 @@ __image_snapshots__/
|
||||
.env
|
||||
examples/
|
||||
.neocoder/
|
||||
.claude/
|
||||
|
||||
# generated css
|
||||
components/style/antd.css
|
||||
|
||||
717
AGENTS.md
717
AGENTS.md
@@ -11,14 +11,17 @@
|
||||
- [命名规范](#命名规范)
|
||||
- [TypeScript 规范](#typescript-规范)
|
||||
- [样式规范](#样式规范)
|
||||
- [代码格式化](#代码格式化)
|
||||
- [开发指南](#开发指南)
|
||||
- [测试指南](#测试指南)
|
||||
- [演示代码规范](#演示代码规范)
|
||||
- [国际化规范](#国际化规范)
|
||||
- [组件开发模板](#组件开发模板)
|
||||
- [文档和 Changelog](#文档和-changelog-规范)
|
||||
- [Git 和 Pull Request](#git-和-pull-request-规范)
|
||||
- [质量保证](#质量保证)
|
||||
- [工具链和环境](#工具链和环境)
|
||||
- [常见问题和故障排查](#常见问题和故障排查)
|
||||
|
||||
---
|
||||
|
||||
@@ -29,12 +32,15 @@
|
||||
### 核心特性
|
||||
|
||||
- 使用 TypeScript 和 React 开发
|
||||
- 兼容 React 18 ~ 19 版本
|
||||
- 组件库设计精美,功能完善,广泛应用于企业级中后台产品
|
||||
- 遵循 Ant Design 设计规范
|
||||
- 支持国际化(i18n)
|
||||
- 支持主题定制和暗色模式
|
||||
- 兼容 React 18+ 版本(peerDependencies: `>=18.0.0`)
|
||||
- 包含 **84+ 个组件**,涵盖通用、输入、数据展示、反馈、导航、布局等类型
|
||||
- 采用完整的 CSS-in-JS 架构(基于 `@ant-design/cssinjs`)
|
||||
- 支持 Design Token 主题系统和动态主题切换
|
||||
- 支持国际化(i18n),包含 150+ 语言 locales
|
||||
- 支持暗色模式和自定义主题
|
||||
- 支持 RTL(从右到左)布局
|
||||
- 支持服务端渲染(SSR)
|
||||
- 提供完整的 TypeScript 类型定义
|
||||
|
||||
---
|
||||
|
||||
@@ -42,9 +48,9 @@
|
||||
|
||||
### 开发环境要求
|
||||
|
||||
- **Node.js**: >= 16
|
||||
- **包管理器**: npm 或 utoo
|
||||
- **浏览器兼容性**: Chrome 80+
|
||||
- **Node.js**: >= 18.12.0(推荐使用 LTS 版本)
|
||||
- **包管理器**: npm 或 ut(内部包管理器)
|
||||
- **浏览器兼容性**: 现代浏览器(Chrome 80+、Edge、Firefox、Safari)
|
||||
- **编辑器**: VS Code(推荐)或其他支持 TypeScript 的编辑器
|
||||
|
||||
### 安装依赖
|
||||
@@ -58,52 +64,53 @@ utoo install
|
||||
### 常用开发命令
|
||||
|
||||
```bash
|
||||
# 启动开发服务器(访问 http://127.0.0.1:8001)
|
||||
npm start
|
||||
|
||||
# 编译 TypeScript 代码到 lib 和 es 目录
|
||||
npm run compile
|
||||
|
||||
# 构建 UMD 格式的构建产物
|
||||
npm run build
|
||||
|
||||
# 运行所有测试
|
||||
npm test
|
||||
|
||||
# 监听模式运行测试
|
||||
npm test -- --watch
|
||||
|
||||
# 生成测试覆盖率报告
|
||||
npm run test:coverage
|
||||
|
||||
# 代码检查(包括 TypeScript、ESLint、Biome、Markdown、Changelog)
|
||||
npm run lint
|
||||
|
||||
# 格式化代码
|
||||
npm run format
|
||||
|
||||
# 生成 Changelog(交互式)
|
||||
npm run changelog
|
||||
|
||||
# 清理构建产物
|
||||
npm run clean
|
||||
npm start # 启动开发服务器(http://127.0.0.1:8001)
|
||||
npm run build # 完整构建
|
||||
npm test # 运行测试
|
||||
npm run lint # 代码检查
|
||||
npm run format # 代码格式化
|
||||
npm run version # 生成版本信息
|
||||
npm run clean # 清理构建产物
|
||||
```
|
||||
|
||||
### 项目结构
|
||||
|
||||
```
|
||||
ant-design/
|
||||
├── components/ # 组件源代码
|
||||
│ └── [component]/ # 单个组件目录
|
||||
│ ├── demo/ # 演示代码
|
||||
│ ├── style/ # 样式文件
|
||||
│ ├── index.tsx # 组件入口
|
||||
│ └── index.zh-CN.md # 组件文档
|
||||
├── scripts/ # 构建和工具脚本
|
||||
├── tests/ # 测试文件
|
||||
├── CHANGELOG.zh-CN.md # 中文更新日志
|
||||
├── CHANGELOG.en-US.md # 英文更新日志
|
||||
└── package.json # 项目配置
|
||||
├── components/ # 组件源代码(84+ 组件)
|
||||
│ ├── component-name/ # 单个组件目录
|
||||
│ │ ├── ComponentName.tsx # 主组件实现
|
||||
│ │ ├── SubComponent.tsx # 子组件(如有)
|
||||
│ │ ├── helpers.ts # 辅助函数
|
||||
│ │ ├── hooks/ # 组件专属 hooks
|
||||
│ │ ├── demo/ # 演示代码(*.tsx 和 *.md)
|
||||
│ │ ├── style/ # 样式系统
|
||||
│ │ │ ├── index.ts # 样式钩子生成器
|
||||
│ │ │ ├── token.ts # 主题 token 定义
|
||||
│ │ │ └── variant.ts # 变体样式
|
||||
│ │ ├── __tests__/ # 单元测试
|
||||
│ │ ├── index.en-US.md # 英文文档
|
||||
│ │ ├── index.zh-CN.md # 中文文档
|
||||
│ │ └── index.tsx # 导出入口
|
||||
│ ├── _util/ # 社会工具函数库
|
||||
│ ├── theme/ # 主题系统
|
||||
│ ├── locale/ # 国际化文本(150+ 文件)
|
||||
│ └── index.ts # 组件总入口
|
||||
├── scripts/ # 构建和工具脚本(26+ 脚本)
|
||||
├── tests/ # 测试文件和工具
|
||||
│ ├── __mocks__/ # Jest mocks
|
||||
│ ├── shared/ # 共享测试工具
|
||||
│ └── setup.ts # 测试环境设置
|
||||
├── docs/ # 站点文档
|
||||
├── CHANGELOG.zh-CN.md # 中文更新日志
|
||||
├── CHANGELOG.en-US.md # 英文更新日志
|
||||
├── package.json # 项目配置
|
||||
├── tsconfig.json # TypeScript 配置
|
||||
├── eslint.config.mjs # ESLint 配置
|
||||
├── biome.json # Biome 配置
|
||||
├── .jest.js # Jest 配置
|
||||
├── .dumirc.ts # Dumi 文档配置
|
||||
└── webpack.config.js # Webpack 构建配置
|
||||
```
|
||||
|
||||
---
|
||||
@@ -114,14 +121,20 @@ ant-design/
|
||||
|
||||
- ✅ 使用 TypeScript 和 React 书写
|
||||
- ✅ 使用函数式组件和 Hooks,**避免类组件**
|
||||
- ✅ 使用 `forwardRef` 实现组件 ref 传递
|
||||
- ✅ 使用提前返回(early returns)提高代码可读性
|
||||
- ✅ 避免引入新依赖,严控打包体积
|
||||
- ✅ 兼容 Chrome 80+ 浏览器
|
||||
- ✅ 兼容现代浏览器
|
||||
- ✅ 支持服务端渲染(SSR)
|
||||
- ✅ 保持向下兼容,避免 breaking change
|
||||
- ✅ 组件名使用大驼峰(PascalCase),如 `Button`、`DatePicker`
|
||||
- ✅ 属性名使用小驼峰(camelCase),如 `onClick`、`defaultValue`
|
||||
- ✅ 合理使用 `useLayoutEffect` 处理性能敏感操作(如 loading 延迟)
|
||||
- ✅ 合理使用 `React.memo`、`useMemo` 和 `useCallback` 优化性能
|
||||
- ✅ 使用 `clsx` 处理类名拼接
|
||||
- ✅ 使用 `devUseWarning` 提供开发时 API 过期警告
|
||||
- ✅ 使用 `displayName` 设置组件调试名称
|
||||
- ✅ 支持 Semantic 样式系统(`classNames` 和 `styles` 属性)
|
||||
|
||||
#### Props 命名
|
||||
|
||||
@@ -140,6 +153,37 @@ ant-design/
|
||||
| 图标 | `icon` | `icon`、`prefixIcon` |
|
||||
| 触发器 | `trigger` | `trigger` |
|
||||
| 类名 | `className` | `className` |
|
||||
| 样式对象 | `style` | `style` |
|
||||
|
||||
#### 组件引用 (Ref)
|
||||
|
||||
组件应支持 `classNames` 和 `styles` 属性,用于精细化样式定制:
|
||||
|
||||
```tsx
|
||||
// classNames 属性类型定义
|
||||
export type ComponentClassNamesType = {
|
||||
root?: string;
|
||||
icon?: string;
|
||||
content?: string;
|
||||
// ... 其他元素
|
||||
};
|
||||
|
||||
// styles 属性类型定义
|
||||
export type ComponentStylesType = {
|
||||
root?: React.CSSProperties;
|
||||
icon?: React.CSSProperties;
|
||||
content?: React.CSSProperties;
|
||||
// ... 其他元素
|
||||
};
|
||||
|
||||
// 使用示例
|
||||
<Button
|
||||
classNames={{ root: 'custom-btn', icon: 'custom-icon' }}
|
||||
styles={{ root: { width: 200 }, icon: { color: 'red' } }}
|
||||
>
|
||||
Button
|
||||
</Button>;
|
||||
```
|
||||
|
||||
#### 事件命名
|
||||
|
||||
@@ -164,27 +208,19 @@ interface ComponentRef {
|
||||
}
|
||||
```
|
||||
|
||||
#### 组件 Token 命名
|
||||
|
||||
格式:`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
|
||||
|
||||
示例:
|
||||
|
||||
- `buttonPrimaryColor` - Button 主色
|
||||
- `inputPaddingBlock` - Input 垂直内边距
|
||||
- `menuItemActiveBg` - Menu 激活项背景色
|
||||
|
||||
### API 文档规范
|
||||
|
||||
#### API 表格格式
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | --------------- | ------------------------------------------------------ | --------- |
|
||||
| htmlType | Button 原生类型 | string | `button` |
|
||||
| type | 按钮类型 | `primary` \| `default` \| `dashed` \| `link` \| `text` | `default` |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| minLength | 最小长度 | number | 0 |
|
||||
| style | 自定义样式 | CSSProperties | - |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| htmlType | Button 原生类型 | string | `button` | - |
|
||||
| type | 按钮类型 | `primary` \| `default` \| `dashed` \| `link` \| `text` | `default` | - |
|
||||
| disabled | 是否禁用 | boolean | false | - |
|
||||
| minLength | 最小长度 | number | 0 | - |
|
||||
| style | 自定义样式 | CSSProperties | - | - |
|
||||
| classNames | 自定义类名 | ComponentClassNamesType | - | 5.0.0 |
|
||||
| styles | 自定义内联样式 | ComponentStylesType | - | 5.0.0 |
|
||||
|
||||
#### API 文档要求
|
||||
|
||||
@@ -195,6 +231,7 @@ interface ComponentRef {
|
||||
- ✅ 无默认值使用 `-`
|
||||
- ✅ 描述首字母大写,结尾无句号
|
||||
- ✅ API 按字母顺序排列
|
||||
- ✅ 新增属性需要声明可用版本号,如 `5.0.0`
|
||||
|
||||
---
|
||||
|
||||
@@ -264,40 +301,117 @@ enum ButtonType {
|
||||
|
||||
## 样式规范
|
||||
|
||||
### 样式方案
|
||||
### 样式架构
|
||||
|
||||
Ant Design 6.x 采用完整的 **CSS-in-JS** 架构,基于 `@ant-design/cssinjs` 实现:
|
||||
|
||||
- 使用 `@ant-design/cssinjs` 作为样式解决方案
|
||||
- 每个组件的样式应该放在 `style/` 目录下
|
||||
- 样式文件应该与组件结构保持一致
|
||||
- 使用 CSS-in-JS 时应当注意性能影响,避免不必要的样式重计算
|
||||
- 样式生成函数应遵循 `gen[ComponentName]Style` 的命名规范
|
||||
- 样式覆盖应使用类选择器而非标签选择器,提高样式特异性
|
||||
- 使用 `@ant-design/cssinjs-utils` 提供额外样式工具
|
||||
- 支持动态样式和主题切换
|
||||
- 样式独立注入,避免 CSS 污染
|
||||
- 支持 Server-Side Rendering (SSR)
|
||||
|
||||
### 组件样式结构
|
||||
|
||||
每个组件的样式应该放在 `style/` 目录下,建议结构:
|
||||
|
||||
```
|
||||
style/
|
||||
├── index.ts # 样式钩生成器(导出点)
|
||||
├── token.ts # 组件 token 定义
|
||||
├── variant.ts # 变体样式(solid/outlined/text 等)
|
||||
├── compact.ts # 紧凑布局样式(如需要)
|
||||
└── group.ts | 组合样式(如需要)
|
||||
```
|
||||
|
||||
### 样式生成函数规范
|
||||
|
||||
```typescript
|
||||
// 1. Token 准备函数
|
||||
const prepareToken = (token: GlobalToken): ComponentToken => {
|
||||
return mergeToken(token, {
|
||||
// 组件特定 token
|
||||
controlHeightLG: 40,
|
||||
});
|
||||
};
|
||||
|
||||
// 2. Component Token 准备函数
|
||||
export const prepareComponentToken: GetDefaultToken<'ComponentName'> = (token) => ({
|
||||
componentBg: token.colorBgContainer,
|
||||
componentBorder: token.colorBorder,
|
||||
// ...
|
||||
});
|
||||
|
||||
// 3. 样式生成函数
|
||||
const genComponentStyle: GenerateStyle<ComponentToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
return {
|
||||
[componentCls]: {
|
||||
// 基础样式
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 4. 导出样式钩子(使用 genStyleHooks)
|
||||
export default genStyleHooks(
|
||||
'ComponentName', // 组件名称
|
||||
(token) => [genComponentStyle(token)],
|
||||
prepareComponentToken, // Component Token 准备函数
|
||||
{
|
||||
unitless: {
|
||||
// 无单位 token
|
||||
fontWeight: true,
|
||||
},
|
||||
},
|
||||
);
|
||||
```
|
||||
|
||||
### Token 系统
|
||||
|
||||
- 使用 Ant Design 的设计 Token 系统
|
||||
使用 Ant Design 的 Design Token 系统:
|
||||
|
||||
- 避免硬编码颜色、尺寸、间距等值
|
||||
- 组件样式应基于全局 Token 和组件级 Token
|
||||
- 自定义样式应尽可能使用现有的 Token,保持一致性
|
||||
- 组件级 Token 命名规范:`Component` + 属性名,如 `buttonPrimaryColor`
|
||||
- 对 Token 的修改应当向下传递,确保设计系统的一致性
|
||||
- 自定义样式应尽可能使用现有的 Token
|
||||
- 组件级 Token 命名规范:`Component` + `semantic part` + `css property`
|
||||
- 使用 `mergeToken` 合并 token
|
||||
- 使用 `calc` 处理 CSS 计算值
|
||||
|
||||
### Token 命名规范
|
||||
|
||||
格式:`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
|
||||
|
||||
示例:
|
||||
|
||||
- `buttonPrimaryColor` - Button 主色
|
||||
- `inputPaddingBlock` - Input 垂直内边距
|
||||
- `menuItemActiveBg` - Menu 激活项背景色
|
||||
|
||||
### 响应式和主题支持
|
||||
|
||||
- ✅ 组件应支持在不同屏幕尺寸下良好展示
|
||||
- ✅ 组件应支持不同屏幕尺寸(使用 CSS 媒体查询)
|
||||
- ✅ 所有组件必须支持暗色模式
|
||||
- ✅ 组件应支持从右到左(RTL)的阅读方向
|
||||
- ✅ 使用 CSS 逻辑属性(如 `margin-inline-start`)替代方向性属性(如 `margin-left`)
|
||||
- ✅ 组件应支持 RTL(从右到左)布局
|
||||
- ✅ 使用 CSS 逻辑属性(如 `margin-inline-start`)替代方向性属性
|
||||
- ✅ 支持通过 `ConfigProvider` 进行主题定制
|
||||
- ✅ 使用 CSS 变量 (`cssVarCls`) 支持动态主题切换
|
||||
|
||||
### 动画效果
|
||||
|
||||
- 使用 CSS 过渡实现简单动画
|
||||
- 复杂动画使用 `@rc-component/motion` 实现
|
||||
- 尊重用户的减少动画设置(`prefers-reduced-motion`)
|
||||
- 动画时长和缓动函数应保持一致性
|
||||
- 动画时长和缓动函数应使用 Token:`motionDurationMid`、`motionEaseInOut`
|
||||
- 动画不应干扰用户的操作和阅读体验
|
||||
|
||||
### CSS-in-JS 注意事项
|
||||
|
||||
- 样式生成函数应遵循 `gen[ComponentName]Style` 的命名规范
|
||||
- 样式覆盖应使用类选择器而非标签选择器
|
||||
- 避免在 render 过程中重复创建样式对象
|
||||
- 使用 `hashId` 确保样式唯一性
|
||||
- 使用 `cssVarCls` 支持 CSS 变量
|
||||
|
||||
### 可访问性样式
|
||||
|
||||
- 遵循 WCAG 2.1 AA 级别标准
|
||||
@@ -309,32 +423,132 @@ enum ButtonType {
|
||||
|
||||
---
|
||||
|
||||
## 代码格式化
|
||||
|
||||
### 工具配置
|
||||
|
||||
项目使用多种代码格式化工具组合使用:
|
||||
|
||||
| 工具 | 用途 | 配置文件 |
|
||||
| -------- | ------------------------ | ------------------- |
|
||||
| Biome | 代码检查和格式化(主要) | `biome.json` |
|
||||
| ESLint | 代码质量检查 | `eslint.config.mjs` |
|
||||
| Prettier | 补充格式化 | `.prettierrc` |
|
||||
|
||||
### 格式化规范
|
||||
|
||||
配置文件:`biome.json`、`.prettierrc`
|
||||
|
||||
- **缩进**: 2 空格
|
||||
- **行宽**: 100 字符
|
||||
- **引号**: JavaScript 使用单引号,JSX 属性使用双引号
|
||||
- **尾随逗号**: 强制添加(`all`)
|
||||
- **分号**: 不强制使用
|
||||
|
||||
### 格式化命令
|
||||
|
||||
```bash
|
||||
# 使用 Biome 格式化
|
||||
npm run format
|
||||
|
||||
# 使用 Biome 检查
|
||||
npm run lint:biome
|
||||
|
||||
# 使用 Prettier 格式化(补充)
|
||||
npm run prettier
|
||||
```
|
||||
|
||||
### 导入顺序
|
||||
|
||||
使用 `@ianvs/prettier-plugin-sort-imports` 插件自动排序导入:
|
||||
|
||||
```typescript
|
||||
// 1. React 导入
|
||||
import React, { forwardRef, useState } from 'react';
|
||||
import RcComponent from '@rc-component/component';
|
||||
// 2. 第三方库导入
|
||||
import clsx from 'clsx';
|
||||
|
||||
// 3. Ant Design 内部导入
|
||||
import { useToken } from '../theme/internal';
|
||||
// 4. 相对路径导入
|
||||
import { helperFunction } from './helpers';
|
||||
// 5. 类型导入
|
||||
import type { RefType } from './types';
|
||||
// 6. 样式导入(如果有)
|
||||
import './custom.css';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 开发指南
|
||||
|
||||
### 测试指南
|
||||
|
||||
#### 测试框架和工具
|
||||
|
||||
- 使用 Jest 和 React Testing Library 编写单元测试
|
||||
- 对 UI 组件使用快照测试(Snapshot Testing)
|
||||
- 使用 **Jest 30+** 和 **React Testing Library** 编写单元测试
|
||||
- 使用 **jest-axe** 进行可访问性测试
|
||||
- 使用 **jest-image-snapshot** 进行视觉回归测试
|
||||
- 测试覆盖率要求 **100%**
|
||||
- 测试文件放在 `tests/` 目录,命名格式为:`index.test.tsx` 或 `xxx.test.tsx`
|
||||
- 测试文件放在组件目录下的 `__tests__/` 目录
|
||||
|
||||
#### 测试文件类型
|
||||
|
||||
| 测试类型 | 文件名 | 用途 |
|
||||
| ------------- | ------------------------ | ------------------------- |
|
||||
| 主测试 | `index.test.tsx` | 组件功能测试 |
|
||||
| 无障碍测试 | `a11y.test.ts` | WCAG 可访问性标准测试 |
|
||||
| 类型测试 | `type.test.tsx` | TypeScript 类型完整性测试 |
|
||||
| Semantic 测试 | `demo-semantic.test.tsx` | Demo 语义化测试 |
|
||||
| Demo 测试 | `demo.test.ts` | Demo 代码测试 |
|
||||
|
||||
#### 测试辅助函数
|
||||
|
||||
项目提供了多个测试辅助函数:
|
||||
|
||||
```typescript
|
||||
// mountTest - 测试组件挂载/卸载
|
||||
import mountTest from 'tests/shared/mountTest';
|
||||
// rtlTest - 测试 RTL 布局渲染
|
||||
import rtlTest from 'tests/shared/rtlTest';
|
||||
|
||||
mountTest(Button);
|
||||
|
||||
rtlTest(Button);
|
||||
```
|
||||
|
||||
#### 运行测试
|
||||
|
||||
```bash
|
||||
npm test # 运行所有测试
|
||||
npm test -- --watch # 监听模式
|
||||
npm run test:coverage # 生成覆盖率报告
|
||||
npm run test:image # UI 快照测试(需要 Docker)
|
||||
# 运行单元测试
|
||||
npm test
|
||||
|
||||
# 更新测试快照
|
||||
npm run test:update
|
||||
|
||||
# 运行视觉回归测试(需要 Puppeteer/Docker)
|
||||
npm run test:image
|
||||
|
||||
# 运行所有测试套件
|
||||
npm run test:all
|
||||
|
||||
# 运行 Node.js 环境测试
|
||||
npm run test:node
|
||||
|
||||
# 运行站点文档测试
|
||||
npm run test:site
|
||||
```
|
||||
|
||||
#### 测试最佳实践
|
||||
|
||||
- ✅ 测试用户行为而非实现细节
|
||||
- ✅ 使用有意义的测试描述
|
||||
- ✅ 使用有意义的测试描述(`describe` 和 `it`)
|
||||
- ✅ 每个测试用例应该独立,不依赖其他测试
|
||||
- ✅ 测试边界情况和错误处理
|
||||
- ✅ 组件应同时包含 `mountTest` 和 `rtlTest`
|
||||
- ✅ 新增功能必须有对应的测试用例
|
||||
- ✅ 使用 `toHaveBeenCalledTimes` 而非 `toHaveBeenCalledExactTimes`
|
||||
|
||||
### 演示代码规范
|
||||
|
||||
@@ -424,6 +638,147 @@ export function TestComp(props) {
|
||||
}
|
||||
```
|
||||
|
||||
### 组件开发模板
|
||||
|
||||
#### 标准组件目录结构
|
||||
|
||||
```
|
||||
[component-name]/
|
||||
├── ComponentName.tsx # 主组件实现
|
||||
├── index.tsx # 导出入口
|
||||
├── demo/ # 演示代码
|
||||
│ ├── basic.tsx
|
||||
│ └── basic.md
|
||||
├── style/ # 样式系统
|
||||
│ ├── index.ts
|
||||
│ └── token.ts
|
||||
├── __tests__/ # 测试文件
|
||||
│ ├── index.test.tsx
|
||||
│ └── a11y.test.ts
|
||||
├── index.en-US.md # 英文文档
|
||||
└── index.zh-CN.md # 中文文档
|
||||
```
|
||||
|
||||
#### 主组件模板
|
||||
|
||||
```tsx
|
||||
import React, { forwardRef, useContext, useRef } from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
|
||||
import { useComposeRef } from '../_util/hooks';
|
||||
import { useComponentConfig } from '../_util/hooks/useComponentConfig';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import { ConfigProviderContext } from '../../config-provider';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface ComponentNameProps {
|
||||
// ... 其他 props
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
classNames?: ComponentClassNames;
|
||||
styles?: ComponentStyles;
|
||||
}
|
||||
|
||||
export interface ComponentRef {
|
||||
nativeElement: HTMLElement;
|
||||
focus: VoidFunction;
|
||||
blur: VoidFunction;
|
||||
}
|
||||
|
||||
export type ComponentClassNames = {
|
||||
root?: string;
|
||||
// ...
|
||||
};
|
||||
|
||||
export type ComponentStyles = {
|
||||
root?: React.CSSProperties;
|
||||
// ...
|
||||
};
|
||||
|
||||
const InternalComponent = React.forwardRef<ComponentRef, ComponentNameProps>((props, ref) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
style,
|
||||
classNames,
|
||||
styles,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
const { getPrefixCls, direction } = useContext(ConfigProviderContext);
|
||||
const componentConfig = useComponentConfig('ComponentName');
|
||||
const prefixCls = getPrefixCls('component-name', customizePrefixCls);
|
||||
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
|
||||
const domRef = useRef<HTMLElement>(null);
|
||||
const mergedRef = useComposeRef(ref, domRef);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('ComponentName');
|
||||
warning.deprecated(!deprecatedProp, 'deprecatedProp', 'newProp');
|
||||
}
|
||||
|
||||
return wrapCSSVar(
|
||||
<div
|
||||
ref={mergedRef}
|
||||
className={clsx(
|
||||
prefixCls,
|
||||
hashId,
|
||||
cssVarCls,
|
||||
className,
|
||||
classNames?.root,
|
||||
componentConfig.className,
|
||||
)}
|
||||
style={{ ...style, ...styles?.root, ...componentConfig.style }}
|
||||
dir={direction}
|
||||
{...restProps}
|
||||
>
|
||||
{/* 子内容 */}
|
||||
</div>,
|
||||
);
|
||||
});
|
||||
|
||||
const Component = InternalComponent as typeof InternalComponent & {
|
||||
displayName?: string;
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Component.displayName = 'ComponentName';
|
||||
}
|
||||
|
||||
export default Component;
|
||||
```
|
||||
|
||||
#### 样式模板
|
||||
|
||||
```typescript
|
||||
// style/token.ts
|
||||
import type { TokenType } from '../../theme/internal';
|
||||
// style/index.ts
|
||||
import { genStyleHooks } from '../../theme/internal';
|
||||
import { prepareComponentToken } from './token';
|
||||
|
||||
export interface ComponentToken {
|
||||
componentFontSize?: number;
|
||||
componentPadding?: number;
|
||||
}
|
||||
|
||||
export const prepareComponentToken: GetDefaultToken<'ComponentName'> = (token) => ({
|
||||
componentFontSize: token.fontSize,
|
||||
componentPadding: token.paddingXS,
|
||||
});
|
||||
|
||||
const genComponentStyle: GenerateStyle<ComponentToken> = (token) => {
|
||||
const { componentCls, fontSize, padding } = token;
|
||||
return { [componentCls]: { fontSize, padding } };
|
||||
};
|
||||
|
||||
export default genStyleHooks(
|
||||
'ComponentName',
|
||||
(token) => [genComponentStyle(token)],
|
||||
prepareComponentToken,
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 文档和 Changelog 规范
|
||||
@@ -460,7 +815,8 @@ export function TestComp(props) {
|
||||
|
||||
3. **开发者视角**:用面向开发者的角度和叙述方式撰写 CHANGELOG,描述"用户的原始问题"和"对开发者的影响",而非"具体的解决代码"。
|
||||
- ❌ 修复 Typography 的 DOM 结构问题。
|
||||
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构,修复了内容空格丢失的问题。
|
||||
- ✅ 💄 Typography 重构并简化 DOM 结构,修复内容空格丢失的问题。(中文:Emoji + 组件名 + 描述,无冒号)
|
||||
- ✅ 💄 Refactor Typography DOM structure and fix content space loss.(英文:Emoji + 动词 + 组件名 + 描述)
|
||||
|
||||
4. **版本与命名**:
|
||||
- 新增属性必须符合 antd API 命名规则
|
||||
@@ -472,15 +828,26 @@ export function TestComp(props) {
|
||||
|
||||
#### 🎨 格式与结构规范
|
||||
|
||||
1. **单条条目结构**:`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
|
||||
- 组件名**无需加粗**,后接英文冒号和空格
|
||||
1. **条目顺序与符号**:
|
||||
- **Emoji 置顶**:每条条目以 Emoji 开头(如 🐞 💄 🆕),后接内容
|
||||
- **不加冒号**:组件名后不使用英文冒号,直接接描述
|
||||
|
||||
2. **分组逻辑**:
|
||||
- **多项改动**:同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列
|
||||
- **单项改动**:直接编写单行条目,不设分类标题
|
||||
2. **组件名要求**:
|
||||
- **每条必含组件名**:每条 changelog 正文中都必须出现对应组件名(分组标题下的子条同样要在句中出现组件名)
|
||||
- **组件名不用反引号**:组件名(如 Modal、Drawer、Button、Upload.Dragger)不使用 `` ` `` 包裹;属性名、API、token 等仍用反引号
|
||||
|
||||
3. **文本细节**:
|
||||
- **代码包裹**:所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹
|
||||
3. **中英文条目句式**:
|
||||
- **中文**:`Emoji 组件名 动词/描述 … [#PR](链接) [@贡献者]`
|
||||
例:`🐞 Button 修复暗色主题下 \`color\` 的 \`hover\` 与 \`active\` 状态颜色相反的问题。`
|
||||
- **英文**:`Emoji 动词 组件名 描述 … [#PR](链接) [@贡献者]`(动词在前,如 Fix / Add / Support / Remove / Disable / Refactor / Improve / Change)
|
||||
例:`🐞 Fix Button reversed \`hover\` and \`active\` colors for \`color\` in dark theme.`
|
||||
|
||||
4. **分组逻辑**:
|
||||
- **多项改动**:同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列,子条中仍须包含组件名
|
||||
- **单项改动**:直接写单行条目,不设分类标题
|
||||
|
||||
5. **文本细节**:
|
||||
- **代码包裹**:所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹(组件名除外)
|
||||
- **中英空格**:中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
|
||||
|
||||
#### 🏷️ Emoji 规范(严格执行)
|
||||
@@ -502,18 +869,28 @@ export function TestComp(props) {
|
||||
|
||||
#### 💡 输出示例参考
|
||||
|
||||
**中文版**:
|
||||
需要同时提供中英文两个版本,格式如下:
|
||||
|
||||
**中文版**(Emoji 在前、无冒号、每条含组件名、属性用反引号):
|
||||
|
||||
```markdown
|
||||
- 🐞 Drawer: 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🐞 Select: 修复 Select `options` 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider 支持 Modal 和 Drawer 的 `maskClosable` 全局配置。[#56739](链接) [@luozz1994](链接)
|
||||
- Button
|
||||
- 🐞 Button 修复暗色主题下 `color` 的 `hover` 与 `active` 状态颜色相反的问题。[#56872](链接) [@zombieJ](链接)
|
||||
- 💄 Modal & Drawer 默认关闭蒙层 blur 效果。[#56781](链接) [@aojunhao123](链接)
|
||||
- 🐞 Tooltip & Popover 修复弹出层动画起始位置偏左的问题。[#56887](链接) [@zombieJ](链接)
|
||||
```
|
||||
|
||||
**English Version**:
|
||||
**英文版**(Emoji 在前、动词在前、无冒号、每条含组件名):
|
||||
|
||||
```markdown
|
||||
- 🐞 Drawer: Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🐞 Select: Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
|
||||
- ConfigProvider
|
||||
- 🆕 Support ConfigProvider global configuration of `maskClosable` for Modal and Drawer. [#56739](link) [@luozz1994](link)
|
||||
- Button
|
||||
- 🐞 Fix Button reversed `hover` and `active` colors for `color` in dark theme. [#56872](link) [@zombieJ](link)
|
||||
- 💄 Disable Modal & Drawer mask blur effect by default. [#56781](link) [@aojunhao123](link)
|
||||
- 🐞 Fix Tooltip & Popover popup animation starting position being shifted to the left. [#56887](link) [@zombieJ](link)
|
||||
```
|
||||
|
||||
---
|
||||
@@ -648,17 +1025,27 @@ export function TestComp(props) {
|
||||
|
||||
### 开发工具
|
||||
|
||||
- 推荐使用 VS Code 或其他支持 TypeScript 的编辑器
|
||||
- 配置 ESLint 和 Prettier
|
||||
- 使用 TypeScript 严格模式
|
||||
- 配置 Git hooks 进行代码检查
|
||||
- **编辑器**: 推荐使用 VS Code 或其他支持 TypeScript 的编辑器
|
||||
- **代码检查**: ESLint (@antfu/eslint-config) + Biome
|
||||
- **格式化**: Biome + Prettier
|
||||
- **类型检查**: TypeScript 5.9+ 严格模式
|
||||
- **Git hooks**: Husky + lint-staged
|
||||
|
||||
### 构建工具
|
||||
|
||||
- 使用 webpack 进行构建
|
||||
- 支持 ES modules 和 CommonJS
|
||||
- 提供 UMD 格式的构建产物
|
||||
- 支持按需加载
|
||||
| 工具 | 用途 |
|
||||
| ------- | ---------------------- |
|
||||
| Father | 组件编译(lib/es) |
|
||||
| Webpack | dist 构建和产物分析 |
|
||||
| Dumi | 文档站点构建 |
|
||||
| Mako | SSR 构建器(生产环境) |
|
||||
|
||||
### 构建产物
|
||||
|
||||
- **lib/**: CommonJS 格式
|
||||
- **es/**: ES Modules 格式
|
||||
- **dist/**: UMD 格式(包含 dist/antd.min.js)
|
||||
- **locale/**: 国际化配置
|
||||
|
||||
### CI/CD
|
||||
|
||||
@@ -666,6 +1053,113 @@ export function TestComp(props) {
|
||||
- 包括单元测试、集成测试、类型检查、代码风格检查
|
||||
- 自动化发布流程
|
||||
- 支持多环境部署
|
||||
- 支持视觉回归测试
|
||||
|
||||
### 相关配置文件
|
||||
|
||||
| 配置文件 | 说明 |
|
||||
| ------------------- | ---------------- |
|
||||
| `package.json` | 项目配置和脚本 |
|
||||
| `tsconfig.json` | TypeScript 配置 |
|
||||
| `eslint.config.mjs` | ESLint 配置 |
|
||||
| `biome.json` | Biome 配置 |
|
||||
| `.prettierrc` | Prettier 配置 |
|
||||
| `.jest.js` | Jest 测试配置 |
|
||||
| `.dumirc.ts` | Dumi 文档配置 |
|
||||
| `webpack.config.js` | Webpack 构建配置 |
|
||||
|
||||
---
|
||||
|
||||
## 常见问题和故障排查
|
||||
|
||||
### 开发相关问题
|
||||
|
||||
#### 启动开发服务器失败
|
||||
|
||||
```bash
|
||||
# 确认 Node.js 版本
|
||||
node -v # 应该 >= 18
|
||||
|
||||
# 尝试清理 node_modules 和重新安装
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
|
||||
# 重新生成版本信息
|
||||
npm run version
|
||||
```
|
||||
|
||||
#### 样式不生效
|
||||
|
||||
- 确保已运行 `npm run style` 生成样式文件
|
||||
- 检查 `useStyle` hook 是否正确调用
|
||||
- 确认 `hashId` 和 `cssVarCls` 是否正确应用到类名
|
||||
|
||||
#### TypeScript 类型错误
|
||||
|
||||
```bash
|
||||
# 运行 TypeScript 类型检查
|
||||
npm run tsc
|
||||
|
||||
# 清理构建产物后重新编译
|
||||
npm run clean && npm run compile
|
||||
```
|
||||
|
||||
### 测试相关问题
|
||||
|
||||
#### 快照测试失败
|
||||
|
||||
```bash
|
||||
# 更新快照
|
||||
npm run test:update
|
||||
|
||||
# 按组件更新快照
|
||||
npm test -- --updateSnapshot components/button/__tests__
|
||||
```
|
||||
|
||||
#### 视觉回归测试问题
|
||||
|
||||
```bash
|
||||
# 本地运行视觉回归测试
|
||||
npm run test:visual-regression:local
|
||||
|
||||
# 需要确保 Puppeteer 和相关依赖已正确安装
|
||||
```
|
||||
|
||||
### 构建相关问题
|
||||
|
||||
#### 构建产物体积过大
|
||||
|
||||
```bash
|
||||
# 运行包体积分析
|
||||
npm run size-limit
|
||||
|
||||
# 检查是否有重复依赖包(production 构建)
|
||||
npm run dist
|
||||
|
||||
# 分析 bundle
|
||||
ANALYZER=true npm run dist
|
||||
```
|
||||
|
||||
#### Token 相关问题
|
||||
|
||||
```bash
|
||||
# 重新生成 Token 元数据
|
||||
npm run token:meta
|
||||
|
||||
# 收集 Token 统计
|
||||
npm run token:statistic
|
||||
|
||||
# 重新构建样式
|
||||
npm run style
|
||||
```
|
||||
|
||||
### 国际化问题
|
||||
|
||||
#### 新增多语言配置
|
||||
|
||||
1. 在 `components/locale/` 下添加对应的语言文件
|
||||
2. 更新 `components/locale/index.tsx` 的类型定义
|
||||
3. 确保所有语言配置保持同步
|
||||
|
||||
---
|
||||
|
||||
@@ -675,3 +1169,6 @@ export function TestComp(props) {
|
||||
- [#16048](https://github.com/ant-design/ant-design/issues/16048) - Current listing api & Chinese version
|
||||
- [#25066](https://github.com/ant-design/ant-design/issues/25066) - API standard in the document
|
||||
- [Development Guide](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
- [@ant-design/cssinjs](https://github.com/ant-design/cssinjs) - CSS-in-JS 解决方案
|
||||
- [React 文档](https://react.dev)
|
||||
- [TypeScript 文档](https://www.typescriptlang.org/docs/)
|
||||
|
||||
@@ -15,6 +15,48 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 6.3.0
|
||||
|
||||
`2026-02-10`
|
||||
|
||||
- ConfigProvider
|
||||
- 🆕 Support ConfigProvider global configuration of `maskClosable` for Modal and Drawer. [#56739](https://github.com/ant-design/ant-design/pull/56739) [@luozz1994](https://github.com/luozz1994)
|
||||
- 🆕 Support ConfigProvider `suffixIcon` global configuration for DatePicker and TimePicker. [#56709](https://github.com/ant-design/ant-design/pull/56709) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `expandIcon` and `loadingIcon` global configuration for Cascader. [#56482](https://github.com/ant-design/ant-design/pull/56482) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `scroll` global configuration for Table. [#56628](https://github.com/ant-design/ant-design/pull/56628) [@Clayton](https://github.com/Clayton)
|
||||
- 🆕 Support ConfigProvider `className` and `style` configuration for App, and `arrow` prop for ColorPicker. [#56573](https://github.com/ant-design/ant-design/pull/56573) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🆕 Support ConfigProvider `loadingIcon` global configuration for Button. [#56439](https://github.com/ant-design/ant-design/pull/56439) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `rangePicker.separator` global configuration. [#56499](https://github.com/ant-design/ant-design/pull/56499) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support ConfigProvider `tooltipIcon` and `tooltipProps` global configuration for Form. [#56372](https://github.com/ant-design/ant-design/pull/56372) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- Upload
|
||||
- 🆕 Add Upload `classNames.trigger` and `styles.trigger` props. [#56578](https://github.com/ant-design/ant-design/pull/56578) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- 🆕 Support Upload.Dragger `onDoubleClick` event. [#56579](https://github.com/ant-design/ant-design/pull/56579) [@ug-hero](https://github.com/ug-hero)
|
||||
- 🐞 Fix Upload missing default height for `picture-card` / `picture-circle` parent nodes. [#56864](https://github.com/ant-design/ant-design/pull/56864) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🆕 Add Grid `xxxl` (1920px) breakpoint to adapt to FHD screens. [#56825](https://github.com/ant-design/ant-design/pull/56825) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Support Switch `indicator` customization for semantic structure. [#56710](https://github.com/ant-design/ant-design/pull/56710) [@zombieJ](https://github.com/zombieJ)
|
||||
- Button
|
||||
- 🐞 Fix Button reversed `hover` and `active` colors for `color` in dark theme. [#56872](https://github.com/ant-design/ant-design/pull/56872) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix Button border size not following Design Token `lineWidth`. [#56683](https://github.com/ant-design/ant-design/pull/56683) [@zombieJ](https://github.com/zombieJ)
|
||||
- Select
|
||||
- 💄 Remove Select redundant `-content-value` div DOM in single mode to optimize semantic structure, allowing override via `classNames` and `styles`. [#56811](https://github.com/ant-design/ant-design/pull/56811) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix Select `notFoundContent` not taking effect. [#56756](https://github.com/ant-design/ant-design/pull/56756) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- Radio
|
||||
- 🐞 Fix Radio.Group extra right margin for radio items when vertically aligned. [#56909](https://github.com/ant-design/ant-design/pull/56909) [@jany55555](https://github.com/jany55555)
|
||||
- 💄 Remove Radio `-inner` DOM node of `icon` sub-element for better semantic structure adaptation. [#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Disable Modal & Drawer mask blur effect by default. [#56781](https://github.com/ant-design/ant-design/pull/56781) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Fix Tooltip & Popover popup animation starting position being shifted to the left. [#56887](https://github.com/ant-design/ant-design/pull/56887) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix List color-related tokens not working for deprecated component config. [#56913](https://github.com/ant-design/ant-design/pull/56913) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 Refactor Spin DOM structure to align across different scenarios and support full Semantic Structure. [#56852](https://github.com/ant-design/ant-design/pull/56852) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Add Icon accessibility names to the search icon SVG to improve screen reader support. [#56521](https://github.com/ant-design/ant-design/pull/56521) [@huangkevin-apr](https://github.com/huangkevin-apr)
|
||||
- 🐞 Fix Cascader filter list resetting immediately when closing on selection in search mode, affecting UX. [#56764](https://github.com/ant-design/ant-design/pull/56764) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Improve Tree accessibility support. [#56716](https://github.com/ant-design/ant-design/pull/56716) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Support ColorPicker semantic structure for selection block, and fix `root` semantic being incorrectly applied to popup elements. [#56607](https://github.com/ant-design/ant-design/pull/56607) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Change Avatar default value of `size` from `default` to `medium` for consistency. [#56440](https://github.com/ant-design/ant-design/pull/56440) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 💄 Remove Checkbox `-inner` DOM node of `icon` sub-element for better semantic structure adaptation. [#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- MISC
|
||||
- 🐞 MISC: Fix React Compiler compatibility in UMD version, now disabled by default. [#56830](https://github.com/ant-design/ant-design/pull/56830) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 Streamline `styles` and `classNames` type definitions for better standardization. [#56758](https://github.com/ant-design/ant-design/pull/56758) [@crazyair](https://github.com/crazyair)
|
||||
|
||||
## 6.2.3
|
||||
|
||||
`2026-02-02`
|
||||
|
||||
@@ -15,6 +15,48 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 6.3.0
|
||||
|
||||
`2026-02-10`
|
||||
|
||||
- ConfigProvider
|
||||
- 🆕 ConfigProvider 支持 Modal 和 Drawer 的 `maskClosable` 全局配置。[#56739](https://github.com/ant-design/ant-design/pull/56739) [@luozz1994](https://github.com/luozz1994)
|
||||
- 🆕 ConfigProvider 支持 DatePicker 和 TimePicker 的 `suffixIcon` 全局配置。[#56709](https://github.com/ant-design/ant-design/pull/56709) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 Cascader 的 `expandIcon` 和 `loadingIcon` 全局配置。[#56482](https://github.com/ant-design/ant-design/pull/56482) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 Table 的 `scroll` 全局配置。[#56628](https://github.com/ant-design/ant-design/pull/56628) [@Clayton](https://github.com/Clayton)
|
||||
- 🆕 ConfigProvider 支持配置 App 的 `className` 与 `style`,以及 ColorPicker 的 `arrow` 属性。[#56573](https://github.com/ant-design/ant-design/pull/56573) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🆕 ConfigProvider 支持 Button 的 `loadingIcon` 全局配置。[#56439](https://github.com/ant-design/ant-design/pull/56439) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 `rangePicker.separator` 全局配置。[#56499](https://github.com/ant-design/ant-design/pull/56499) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 ConfigProvider 支持 Form 的 `tooltipIcon` 和 `tooltipProps` 全局配置。[#56372](https://github.com/ant-design/ant-design/pull/56372) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- Upload
|
||||
- 🆕 Upload 新增 `classNames.trigger` 和 `styles.trigger` 属性。[#56578](https://github.com/ant-design/ant-design/pull/56578) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- 🆕 Upload.Dragger 支持 `onDoubleClick` 事件。[#56579](https://github.com/ant-design/ant-design/pull/56579) [@ug-hero](https://github.com/ug-hero)
|
||||
- 🐞 Upload 修复 `picture-card` / `picture-circle` 父节点缺少默认高度的问题。[#56864](https://github.com/ant-design/ant-design/pull/56864) [@wanpan11](https://github.com/wanpan11)
|
||||
- 🆕 Grid 新增 `xxxl`(1920px)断点以适应 FHD 屏幕。[#56825](https://github.com/ant-design/ant-design/pull/56825) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Switch 语义化结构支持 `indicator` 定制。[#56710](https://github.com/ant-design/ant-design/pull/56710) [@zombieJ](https://github.com/zombieJ)
|
||||
- Button
|
||||
- 🐞 Button 修复暗色主题下 `color` 的 `hover` 与 `active` 状态颜色相反的问题。[#56872](https://github.com/ant-design/ant-design/pull/56872) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Button 修复边框尺寸未跟随 Design Token `lineWidth` 的问题。[#56683](https://github.com/ant-design/ant-design/pull/56683) [@zombieJ](https://github.com/zombieJ)
|
||||
- Select
|
||||
- 💄 Select 移除单选模式下额外的 `-content-value` div DOM,优化语义化结构并支持通过 `classNames` 与 `styles` 覆盖。[#56811](https://github.com/ant-design/ant-design/pull/56811) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Select 修复 `notFoundContent` 不生效的问题。[#56756](https://github.com/ant-design/ant-design/pull/56756) [@QdabuliuQ](https://github.com/QdabuliuQ)
|
||||
- Radio
|
||||
- 🐞 Radio.Group 修复垂直排列时单选项出现多余右边距的问题。[#56909](https://github.com/ant-design/ant-design/pull/56909) [@jany55555](https://github.com/jany55555)
|
||||
- 💄 Radio 移除 `icon` 子元素 `-inner` DOM 节点以更好适配语义化结构。[#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Modal & Drawer 默认关闭蒙层 blur 效果。[#56781](https://github.com/ant-design/ant-design/pull/56781) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Tooltip & Popover 修复弹出层动画起始位置偏左的问题。[#56887](https://github.com/ant-design/ant-design/pull/56887) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 List 修复废弃组件配置的颜色相关 token 不生效的问题。[#56913](https://github.com/ant-design/ant-design/pull/56913) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 Spin 重构 DOM 结构以对齐不同场景,并支持全量语义化结构(Semantic Structure)。[#56852](https://github.com/ant-design/ant-design/pull/56852) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Icon 为搜索图标 SVG 添加无障碍名称,改善屏幕阅读器支持。[#56521](https://github.com/ant-design/ant-design/pull/56521) [@huangkevin-apr](https://github.com/huangkevin-apr)
|
||||
- 🐞 Cascader 修复搜索模式下选择选项并关闭时,过滤列表立即还原影响体验的问题。[#56764](https://github.com/ant-design/ant-design/pull/56764) [@zombieJ](https://github.com/zombieJ)
|
||||
- ⌨️ ♿ Tree 优化无障碍支持。[#56716](https://github.com/ant-design/ant-design/pull/56716) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 ColorPicker 选择块支持语义化结构,并修复 `root` 语义化错误应用到弹出元素的问题。[#56607](https://github.com/ant-design/ant-design/pull/56607) [@zombieJ](https://github.com/zombieJ)
|
||||
- 💄 Avatar 将 `size` 默认值从 `default` 改为 `medium` 以保持一致性。[#56440](https://github.com/ant-design/ant-design/pull/56440) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 💄 Checkbox 移除 `icon` 子元素 `-inner` DOM 节点以更好适配语义化结构。[#56783](https://github.com/ant-design/ant-design/pull/56783) [@zombieJ](https://github.com/zombieJ)
|
||||
- MISC
|
||||
- 🐞 MISC: 修复 UMD 版本中 React Compiler 兼容性问题,现已默认关闭。[#56830](https://github.com/ant-design/ant-design/pull/56830) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🛠 精简 `styles` 和 `classNames` 类型定义,使其更规范。[#56758](https://github.com/ant-design/ant-design/pull/56758) [@crazyair](https://github.com/crazyair)
|
||||
|
||||
## 6.2.3
|
||||
|
||||
`2026-02-02`
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
## ❤️ 赞助者 [](https://opencollective.com/ant-design/contribute/sponsors-218)
|
||||
|
||||
[](https://opencollective.com/ant-design/contribute/sponsors-218/checkout)
|
||||
[](https://tractian.com) [](https://lobehub.com/)
|
||||
|
||||
[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
|
||||
[npm-url]: https://npmjs.org/package/antd
|
||||
@@ -115,6 +115,7 @@ export default App;
|
||||
|
||||
- [首页](https://ant.design/)
|
||||
- [所有组件](https://ant.design/components/overview-cn)
|
||||
- [赞助](https://ant.design/docs/react/sponsor)
|
||||
- [更新日志](CHANGELOG.zh-CN.md)
|
||||
- [React 底层基础组件](https://react-component.github.io/)
|
||||
- [🆕 Ant Design X](https://x.ant.design/index-cn)
|
||||
|
||||
@@ -14,7 +14,7 @@ An enterprise-class UI design language and React UI library.
|
||||
|
||||
## ❤️ Sponsors [](https://opencollective.com/ant-design/contribute/sponsors-218)
|
||||
|
||||
[](https://opencollective.com/ant-design/contribute/sponsors-218/checkout)
|
||||
[](https://tractian.com) [](https://lobehub.com/)
|
||||
|
||||
[npm-image]: https://img.shields.io/npm/v/antd.svg?style=flat-square
|
||||
[npm-url]: https://npmjs.org/package/antd
|
||||
@@ -98,6 +98,7 @@ export default () => (
|
||||
|
||||
- [Home page](https://ant.design/)
|
||||
- [Components Overview](https://ant.design/components/overview)
|
||||
- [Sponsor](https://ant.design/docs/react/sponsor)
|
||||
- [Change Log](CHANGELOG.en-US.md)
|
||||
- [rc-components](https://react-component.github.io/)
|
||||
- [🆕 Ant Design X](https://x.ant.design/index-cn)
|
||||
|
||||
@@ -17,9 +17,9 @@ const TRIGGER_EVENTS: (keyof WindowEventMap)[] = [
|
||||
'load',
|
||||
];
|
||||
|
||||
function getDefaultTarget() {
|
||||
const getDefaultTarget = () => {
|
||||
return typeof window !== 'undefined' ? window : null;
|
||||
}
|
||||
};
|
||||
|
||||
// Affix
|
||||
export interface AffixProps {
|
||||
@@ -37,6 +37,7 @@ export interface AffixProps {
|
||||
rootClassName?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const AFFIX_STATUS_NONE = 0;
|
||||
const AFFIX_STATUS_PREPARE = 1;
|
||||
|
||||
|
||||
@@ -48,11 +48,6 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
|
||||
Common props ref:[Common props](/docs/react/common-props)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
:::warning{title=Note}
|
||||
v5 uses `rootClassName` & `rootStyle` to configure the outermost element style, instead of `className` & `style` from v4. This is done to align the API with Modal.
|
||||
:::
|
||||
|
||||
| Props | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - | |
|
||||
|
||||
@@ -48,11 +48,6 @@ demo:
|
||||
|
||||
通用属性参考:[通用属性](/docs/react/common-props)
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
:::warning{title=注意}
|
||||
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
||||
:::
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
||||
|
||||
@@ -251,13 +251,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
|
||||
});
|
||||
|
||||
const newProps = {
|
||||
...props,
|
||||
checkable,
|
||||
selectable,
|
||||
showIcon,
|
||||
motion,
|
||||
blockNode,
|
||||
disabled: mergedDisabled,
|
||||
...mergedProps,
|
||||
showLine: Boolean(showLine),
|
||||
dropIndicatorRender,
|
||||
};
|
||||
|
||||
@@ -79,6 +79,7 @@ Common props ref:[Common props](/docs/react/common-props)
|
||||
| treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array<{ key, title, children, \[disabled, selectable] }> | - | |
|
||||
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
|
||||
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys}) | - | |
|
||||
| onDoubleClick | Callback function for when the user double clicks a treeNode | function(event, node) | - | |
|
||||
| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - | |
|
||||
| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - | |
|
||||
| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - | |
|
||||
|
||||
@@ -78,6 +78,7 @@ demo:
|
||||
| treeData | treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(key 在整个树范围内唯一) | array<{key, title, children, \[disabled, selectable]}> | - | |
|
||||
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
|
||||
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys}) | - | |
|
||||
| onDoubleClick | 双击树节点触发 | function(event, node) | - | |
|
||||
| onDragEnd | dragend 触发时调用 | function({event, node}) | - | |
|
||||
| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - | |
|
||||
| onDragLeave | dragleave 触发时调用 | function({event, node}) | - | |
|
||||
|
||||
47
docs/react/sponsor.en-US.md
Normal file
47
docs/react/sponsor.en-US.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
group:
|
||||
title: Others
|
||||
order: 2
|
||||
title: Sponsor
|
||||
description: Help sustain Ant Design development via OpenCollective.
|
||||
---
|
||||
|
||||
Ant Design is MIT licensed and free to use. The effort required to maintain and evolve a large UI library is only sustainable with the support from our community and sponsors.
|
||||
|
||||
- If you are using Ant Design to build a revenue-generating product, sponsoring helps ensure the project remains healthy and actively maintained. It is also a great way to demonstrate your company's support for Open Source.
|
||||
- If you enjoy Ant Design, consider sponsoring as a way to show appreciation and help keep the project moving forward.
|
||||
|
||||
We'd like to thank the following companies and individuals for their generous sponsorship and support!
|
||||
|
||||
## Sponsors [](https://opencollective.com/ant-design/contribute/sponsors-218)
|
||||
|
||||
[](https://tractian.com) [](https://lobehub.com/)
|
||||
|
||||
[View all Sponsors ❤️](https://opencollective.com/ant-design/contribute/sponsors-218)
|
||||
|
||||
## Backers [](https://opencollective.com/ant-design/contribute/backers-217)
|
||||
|
||||
[](https://opencollective.com/ant-design/contribute/backers-217)
|
||||
|
||||
[View all Backers ❤️](https://opencollective.com/ant-design/contribute/backers-217)
|
||||
|
||||
## How to sponsor
|
||||
|
||||
We accept sponsorship via the following platforms:
|
||||
|
||||
| Platform | Homepage | Sponsor Page |
|
||||
| --- | --- | --- |
|
||||
| **OpenCollective** | [Homepage](https://opencollective.com/ant-design) | [All ways to contribute](https://opencollective.com/ant-design/contribute) |
|
||||
| **GitHub Sponsors** | [Homepage](https://github.com/sponsors/ant-design) | [Sponsor now](https://github.com/sponsors/ant-design) |
|
||||
|
||||
### OpenCollective options
|
||||
|
||||
| Option | Homepage | Checkout |
|
||||
| --- | --- | --- |
|
||||
| **Sponsors** | [Plan home](https://opencollective.com/ant-design/contribute/sponsors-218) | [Sponsor now](https://opencollective.com/ant-design/contribute/sponsors-218/checkout) |
|
||||
| **Backers** | [Plan home](https://opencollective.com/ant-design/contribute/backers-217) | [Sponsor now](https://opencollective.com/ant-design/contribute/backers-217/checkout) |
|
||||
| **Donation** | - | [One-time or recurring](https://opencollective.com/ant-design/donate) |
|
||||
|
||||
> If you need invoices or reimbursement details, please follow the respective platform's flow and billing instructions.
|
||||
|
||||
If you want to sponsor specific features or fixes, you can also check our [IssueHunt board](https://issuehunt.io/repos/34526884).
|
||||
47
docs/react/sponsor.zh-CN.md
Normal file
47
docs/react/sponsor.zh-CN.md
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
group:
|
||||
title: 其他
|
||||
order: 2
|
||||
title: 赞助
|
||||
description: 通过 OpenCollective 赞助 Ant Design,帮助项目长期可持续发展。
|
||||
---
|
||||
|
||||
Ant Design 使用 MIT 协议开源并永久免费使用。维护与演进一个大型 UI 组件库需要持续投入,离不开社区与赞助者的支持。
|
||||
|
||||
- 如果你的团队正在使用 Ant Design 构建面向业务的产品,赞助可以帮助项目保持健康、持续维护与迭代;同时也能展示你们对开源生态的支持。
|
||||
- 如果你在工作或学习中受益于 Ant Design,欢迎以赞助的方式表达支持,帮助项目长期稳定发展。
|
||||
|
||||
感谢以下企业与个人对 Ant Design 项目的赞助与支持!
|
||||
|
||||
## Sponsors [](https://opencollective.com/ant-design/contribute/sponsors-218) {#sponsors}
|
||||
|
||||
[](https://tractian.com) [](https://lobehub.com/)
|
||||
|
||||
[查看所有 Sponsors ❤️](https://opencollective.com/ant-design/contribute/sponsors-218)
|
||||
|
||||
## Backers [](https://opencollective.com/ant-design/contribute/backers-217) {#backers}
|
||||
|
||||
[](https://opencollective.com/ant-design/contribute/backers-217)
|
||||
|
||||
[查看所有 Backers ❤️](https://opencollective.com/ant-design/contribute/backers-217)
|
||||
|
||||
## 如何赞助 {#how-to-sponsor}
|
||||
|
||||
我们通过以下平台接受赞助:
|
||||
|
||||
| 平台 | 主页 | 赞助入口 |
|
||||
| --- | --- | --- |
|
||||
| **OpenCollective** | [主页](https://opencollective.com/ant-design) | [所有赞助方式](https://opencollective.com/ant-design/contribute) |
|
||||
| **GitHub Sponsors** | [主页](https://github.com/sponsors/ant-design) | [立即赞助](https://github.com/sponsors/ant-design) |
|
||||
|
||||
### OpenCollective 赞助方式
|
||||
|
||||
| 方式 | 主页 | 付款入口 |
|
||||
| --- | --- | --- |
|
||||
| **Sponsors** | [赞助产品主页](https://opencollective.com/ant-design/contribute/sponsors-218) | [立即赞助](https://opencollective.com/ant-design/contribute/sponsors-218/checkout) |
|
||||
| **Backers** | [赞助产品主页](https://opencollective.com/ant-design/contribute/backers-217) | [立即赞助](https://opencollective.com/ant-design/contribute/backers-217/checkout) |
|
||||
| **Donation** | - | [单次/持续捐赠](https://opencollective.com/ant-design/donate) |
|
||||
|
||||
> 如需发票或报销相关信息,请按相应平台的流程与账单指引操作。
|
||||
|
||||
如果你希望推动某个具体功能或修复,也可以通过 [IssueHunt](https://issuehunt.io/repos/34526884) 赞助特定 Issue。
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "6.2.3",
|
||||
"version": "6.3.0",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
@@ -136,7 +136,7 @@
|
||||
"@rc-component/rate": "~1.0.1",
|
||||
"@rc-component/resize-observer": "^1.1.1",
|
||||
"@rc-component/segmented": "~1.3.0",
|
||||
"@rc-component/select": "~1.6.2",
|
||||
"@rc-component/select": "~1.6.5",
|
||||
"@rc-component/slider": "~1.0.1",
|
||||
"@rc-component/steps": "~1.2.2",
|
||||
"@rc-component/switch": "~1.0.3",
|
||||
@@ -221,7 +221,7 @@
|
||||
"adm-zip": "^0.5.16",
|
||||
"ajv": "^8.17.1",
|
||||
"ali-oss": "^6.23.0",
|
||||
"antd-img-crop": "~4.28.0",
|
||||
"antd-img-crop": "~4.29.0",
|
||||
"antd-style": "^4.1.0",
|
||||
"antd-token-previewer": "^3.0.0",
|
||||
"axios": "^1.13.2",
|
||||
|
||||
Reference in New Issue
Block a user