Compare commits

...

12 Commits

Author SHA1 Message Date
afc163
446c446dcc Merge branch 'master' into docs/agents-update
Signed-off-by: afc163 <afc163@gmail.com>
2026-02-10 13:54:01 +08:00
afc163
0a5334b5e5 Update AGENTS.md
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: afc163 <afc163@gmail.com>
2026-02-10 13:52:52 +08:00
陈帅
928fecbb2d docs: release version 6.3.0 with new features and bug fixes (#56916)
* docs: release version 6.3.0 with new features and bug fixes

* docs: update Changelog format spec and unify 6.3.0 entry format

* Update CHANGELOG.en-US.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 陈帅 <qixian.cs@outlook.com>

* Update CHANGELOG.en-US.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 陈帅 <qixian.cs@outlook.com>

* Update CHANGELOG.zh-CN.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 陈帅 <qixian.cs@outlook.com>

* Update CHANGELOG.zh-CN.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 陈帅 <qixian.cs@outlook.com>

* chore: remove raw markdown output MISC item from 6.3.0 changelog

* Remove raw markdown output support entry from CHANGELOG.en-US.md

* Update CHANGELOG.zh-CN.md

Signed-off-by: thinkasany <480968828@qq.com>

* Update CHANGELOG.en-US.md

Signed-off-by: thinkasany <480968828@qq.com>

* docs: reorder 6.3.0 changelog 

* docs: reorder 6.3.0 changelog - features first, fix refactor emoji

- Move all 🆕 feature entries to the top (ConfigProvider, Upload, Grid, Switch)
- Change Spin refactor entry emoji from 💄 to 🛠 (tool icon for refactoring)
- Both zh-CN and en-US changelogs updated

Co-authored-by: 陈帅 <wasd2144@hotmail.com>

* docs: change ColorPicker support entry emoji from 🐞 to 🆕 and move to feature section

- ColorPicker '支持/Support' semantic structure is a feature, should use 🆕
- Moved to feature section at the top alongside other 🆕 entries

Co-authored-by: 陈帅 <wasd2144@hotmail.com>

* docs: revert ColorPicker entry back to 🐞 and original position

- ColorPicker semantic structure support is not a new feature, keep 🐞
- Move back to original position (before Avatar)

Co-authored-by: 陈帅 <wasd2144@hotmail.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

---------

Signed-off-by: 陈帅 <qixian.cs@outlook.com>
Signed-off-by: thinkasany <480968828@qq.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: thinkasany <480968828@qq.com>
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
2026-02-10 13:06:20 +08:00
afc163
8d1e2fafa9 Merge branch 'master' into docs/agents-update 2026-02-10 11:03:31 +08:00
afc163
8a496e15aa docs(agents): update and simplify AGENTS.md with latest project information
- Update React version requirement to 18+ and Node.js to 18.12.0+
- Add Biome code formatting tool section
- Expand CSS-in-JS architecture and Token system documentation
- Add component development template
- Add troubleshooting section
- Simplify frequently used commands
- Duplicate references section removed
- Merge duplicate Token naming sections

Co-Authored-By: Claude (GLM-4.7) <noreply@anthropic.com>
2026-02-10 10:59:43 +08:00
afc163
ea58eaf200 docs: add sponsor page (#56918)
* feat: add sponsor page and navigation link

* adjust: reduce sponsor logo height from 80px to 60px

Co-Authored-By: Claude (GLM-4.7) <noreply@anthropic.com>

* adjust: increase sponsor logo height from 60px to 80px

Co-Authored-By: Claude (GLM-4.7) <noreply@anthropic.com>

* docs(sponsor): move badges to same line as section titles

Co-Authored-By: Claude (GLM-4.7) <noreply@anthropic.com>

* Apply suggestions from code review

Signed-off-by: afc163 <afc163@gmail.com>

* Delete .claude/settings.local.json

Signed-off-by: afc163 <afc163@gmail.com>

* docs: add GitHub Sponsors link and format sponsorship as table

Co-Authored-By: Claude (GLM-4.7) <noreply@anthropic.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: Claude (GLM-4.7) <noreply@anthropic.com>
2026-02-10 10:13:43 +08:00
dependabot[bot]
dd15122cb2 chore: bump antd-img-crop in the dev-dependencies group (#56921)
Bumps the dev-dependencies group with 1 update: [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop).


Updates `antd-img-crop` from 4.28.0 to 4.29.0
- [Commits](https://github.com/nanxiaobei/antd-img-crop/commits)

---
updated-dependencies:
- dependency-name: antd-img-crop
  dependency-version: 4.29.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: dev-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-02-10 08:45:08 +08:00
Copilot
da84086627 chore: rerun CI by empty commit (#56875)
* Initial plan

* fix: add @csstools to Jest transform whitelist to fix CI parse error

Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>

* fix: add mjs file extension support to node test config

Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>

* empty commit

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>
2026-02-10 06:35:02 +08:00
github-actions[bot]
8f723775a7 chore: upgrade deps (#56920)
Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>
2026-02-10 02:25:22 +08:00
thinkasany
46dd425e39 refactor: improve tree code (#56919) 2026-02-09 23:30:11 +08:00
xliez
58b451d485 docs(tree): add onDoubleClick API documentation (#56911)
* docs(tree): add onDoubleClick API documentation

* update

---------

Co-authored-by: thinkasany <480968828@qq.com>
2026-02-09 22:02:50 +08:00
thinkasany
e242c9af5a docs(drawer): rm useless tip (#56917) 2026-02-09 21:50:50 +08:00
15 changed files with 799 additions and 134 deletions

1
.gitignore vendored
View File

@@ -78,6 +78,7 @@ __image_snapshots__/
.env
examples/
.neocoder/
.claude/
# generated css
components/style/antd.css

717
AGENTS.md
View File

@@ -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/)

View File

@@ -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`

View File

@@ -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`

View File

@@ -14,7 +14,7 @@
## ❤️ 赞助者 [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design/contribute/sponsors-218)
[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/sponsors-218/checkout)
[![TRACTIAN](https://images.opencollective.com/tractian/0235da9/logo/256.png?height=80)](https://tractian.com) [![LobeHub](https://images.opencollective.com/lobehub/ac07c4c/logo/256.png?height=80)](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)

View File

@@ -14,7 +14,7 @@ An enterprise-class UI design language and React UI library.
## ❤️ Sponsors [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design/contribute/sponsors-218)
[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=72)](https://opencollective.com/ant-design/contribute/sponsors-218/checkout)
[![TRACTIAN](https://images.opencollective.com/tractian/0235da9/logo/256.png?height=80)](https://tractian.com) [![LobeHub](https://images.opencollective.com/lobehub/ac07c4c/logo/256.png?height=80)](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)

View File

@@ -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;

View File

@@ -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) | - | |

View File

@@ -48,11 +48,6 @@ demo:
通用属性参考:[通用属性](/docs/react/common-props)
<!-- prettier-ignore -->
:::warning{title=注意}
v5 使用 `rootClassName``rootStyle` 来配置最外层元素样式。原 v4 `className``style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
:::
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |

View File

@@ -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,
};

View File

@@ -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&lt;{ 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}) | - | |

View File

@@ -78,6 +78,7 @@ demo:
| treeData | treeNodes 数据,如果设置则不需要手动构造 TreeNode 节点key 在整个树范围内唯一) | array&lt;{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}) | - | |

View 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/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design/contribute/sponsors-218)
[![TRACTIAN](https://images.opencollective.com/tractian/0235da9/logo/256.png?height=80)](https://tractian.com) [![LobeHub](https://images.opencollective.com/lobehub/ac07c4c/logo/256.png?height=80)](https://lobehub.com/)
[View all Sponsors ❤️](https://opencollective.com/ant-design/contribute/sponsors-218)
## Backers [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design/contribute/backers-217)
[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=72)](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).

View 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/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design/contribute/sponsors-218) {#sponsors}
[![TRACTIAN](https://images.opencollective.com/tractian/0235da9/logo/256.png?height=80)](https://tractian.com) [![LobeHub](https://images.opencollective.com/lobehub/ac07c4c/logo/256.png?height=80)](https://lobehub.com/)
[查看所有 Sponsors ❤️](https://opencollective.com/ant-design/contribute/sponsors-218)
## Backers [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design/contribute/backers-217) {#backers}
[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=72)](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。

View File

@@ -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",