mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
@@ -1,6 +1,15 @@
|
||||
// FIXME: workaround for avoid searchbar styles be extracted to async chunk
|
||||
@import 'dumi/theme-default/slots/SearchBar/index.less';
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-logo {
|
||||
width: 120px;
|
||||
min-width: 120px;
|
||||
|
||||
4
.github/workflows/preview-deploy.yml
vendored
4
.github/workflows/preview-deploy.yml
vendored
@@ -63,7 +63,7 @@ jobs:
|
||||
steps:
|
||||
# We need get PR id first
|
||||
- name: download pr artifact
|
||||
uses: dawidd6/action-download-artifact@v12
|
||||
uses: dawidd6/action-download-artifact@v13
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
@@ -83,7 +83,7 @@ jobs:
|
||||
# Download site artifact
|
||||
- name: download site artifact
|
||||
if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
|
||||
uses: dawidd6/action-download-artifact@v12
|
||||
uses: dawidd6/action-download-artifact@v13
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
|
||||
@@ -70,7 +70,7 @@ jobs:
|
||||
|
||||
# We need get persist-index first
|
||||
- name: download image snapshot artifact
|
||||
uses: dawidd6/action-download-artifact@v12
|
||||
uses: dawidd6/action-download-artifact@v13
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
@@ -92,7 +92,7 @@ jobs:
|
||||
- name: download report artifact
|
||||
id: download_report
|
||||
if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
|
||||
uses: dawidd6/action-download-artifact@v12
|
||||
uses: dawidd6/action-download-artifact@v13
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
|
||||
@@ -67,7 +67,7 @@ jobs:
|
||||
|
||||
# We need get persist key first
|
||||
- name: Download Visual Regression Ref
|
||||
uses: dawidd6/action-download-artifact@v12
|
||||
uses: dawidd6/action-download-artifact@v13
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
@@ -81,7 +81,7 @@ jobs:
|
||||
|
||||
- name: Download Visual-Regression Artifact
|
||||
if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
|
||||
uses: dawidd6/action-download-artifact@v12
|
||||
uses: dawidd6/action-download-artifact@v13
|
||||
with:
|
||||
workflow: ${{ github.event.workflow_run.workflow_id }}
|
||||
run_id: ${{ github.event.workflow_run.id }}
|
||||
|
||||
645
AGENTS.md
645
AGENTS.md
@@ -1,92 +1,166 @@
|
||||
# AGENTS.md
|
||||
|
||||
> Ant Design 项目开发指南 - 为 AI 编程助手提供项目上下文和开发规范
|
||||
|
||||
## 📑 目录
|
||||
|
||||
- [项目背景](#项目背景)
|
||||
- [快速开始](#快速开始)
|
||||
- [代码规范](#代码规范)
|
||||
- [基本编码规范](#基本编码规范)
|
||||
- [命名规范](#命名规范)
|
||||
- [TypeScript 规范](#typescript-规范)
|
||||
- [样式规范](#样式规范)
|
||||
- [开发指南](#开发指南)
|
||||
- [测试指南](#测试指南)
|
||||
- [演示代码规范](#演示代码规范)
|
||||
- [国际化规范](#国际化规范)
|
||||
- [文档和 Changelog](#文档和-changelog-规范)
|
||||
- [Git 和 Pull Request](#git-和-pull-request-规范)
|
||||
- [质量保证](#质量保证)
|
||||
- [工具链和环境](#工具链和环境)
|
||||
|
||||
---
|
||||
|
||||
## 项目背景
|
||||
|
||||
这是 ant-design/ant-design(antd)的源代码仓库,是一个 React 组件库,发布为 npm 包 antd。
|
||||
这是 [ant-design/ant-design](https://github.com/ant-design/ant-design)(antd)的源代码仓库,是一个 React 组件库,发布为 npm 包 `antd`。
|
||||
|
||||
### 核心特性
|
||||
|
||||
- 使用 TypeScript 和 React 开发
|
||||
- 兼容 React 18 ~ 19 版本
|
||||
- 组件库设计精美,功能完善,广泛应用于企业级中后台产品
|
||||
- 遵循 Ant Design 设计规范
|
||||
- 支持国际化
|
||||
- 支持国际化(i18n)
|
||||
- 支持主题定制和暗色模式
|
||||
- 支持 RTL(从右到左)布局
|
||||
|
||||
## 安装和设置
|
||||
---
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 开发环境要求
|
||||
|
||||
- Node.js 版本 >= 16
|
||||
- 推荐使用 npm 或 yarn
|
||||
- Chrome 80+ 浏览器兼容性
|
||||
- **Node.js**: >= 16
|
||||
- **包管理器**: npm 或 utoo
|
||||
- **浏览器兼容性**: Chrome 80+
|
||||
- **编辑器**: VS Code(推荐)或其他支持 TypeScript 的编辑器
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
# 或
|
||||
yarn install
|
||||
utoo install
|
||||
```
|
||||
|
||||
### 开发命令
|
||||
### 常用开发命令
|
||||
|
||||
```bash
|
||||
npm start # 启动开发服务器
|
||||
npm run build # 构建项目
|
||||
npm test # 运行测试
|
||||
npm run lint # 代码检查
|
||||
# 启动开发服务器(访问 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
|
||||
```
|
||||
|
||||
## 代码风格指南
|
||||
### 项目结构
|
||||
|
||||
```
|
||||
ant-design/
|
||||
├── components/ # 组件源代码
|
||||
│ └── [component]/ # 单个组件目录
|
||||
│ ├── demo/ # 演示代码
|
||||
│ ├── style/ # 样式文件
|
||||
│ ├── index.tsx # 组件入口
|
||||
│ └── index.zh-CN.md # 组件文档
|
||||
├── scripts/ # 构建和工具脚本
|
||||
├── tests/ # 测试文件
|
||||
├── CHANGELOG.zh-CN.md # 中文更新日志
|
||||
├── CHANGELOG.en-US.md # 英文更新日志
|
||||
└── package.json # 项目配置
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 代码规范
|
||||
|
||||
### 基本编码规范
|
||||
|
||||
- 使用 TypeScript 和 React 书写
|
||||
- 使用函数式组件和 hooks,避免类组件
|
||||
- 使用提前返回(early returns)提高代码可读性
|
||||
- 避免引入新依赖,严控打包体积
|
||||
- 兼容 Chrome 80+ 浏览器
|
||||
- 支持服务端渲染
|
||||
- 保持向下兼容,避免 breaking change
|
||||
- 组件名使用大驼峰(PascalCase)
|
||||
- 属性名使用小驼峰(camelCase)
|
||||
- 合理使用 React.memo、useMemo 和 useCallback 优化性能
|
||||
|
||||
### 命名规范
|
||||
|
||||
Antd 命名要求使用**完整名称**而非缩写。
|
||||
- ✅ 使用 TypeScript 和 React 书写
|
||||
- ✅ 使用函数式组件和 Hooks,**避免类组件**
|
||||
- ✅ 使用提前返回(early returns)提高代码可读性
|
||||
- ✅ 避免引入新依赖,严控打包体积
|
||||
- ✅ 兼容 Chrome 80+ 浏览器
|
||||
- ✅ 支持服务端渲染(SSR)
|
||||
- ✅ 保持向下兼容,避免 breaking change
|
||||
- ✅ 组件名使用大驼峰(PascalCase),如 `Button`、`DatePicker`
|
||||
- ✅ 属性名使用小驼峰(camelCase),如 `onClick`、`defaultValue`
|
||||
- ✅ 合理使用 `React.memo`、`useMemo` 和 `useCallback` 优化性能
|
||||
|
||||
#### Props 命名
|
||||
|
||||
- 初始化属性:`default` + `PropName`
|
||||
- 强制渲染:`forceRender`
|
||||
- 子组件强制渲染:`force` + `Sub Component Name` + `Render`
|
||||
- 子组件渲染:`Sub Component Name` + `Render`
|
||||
- 数据源:`dataSource`
|
||||
- 面板开启:使用 `open`,避免使用 `visible`
|
||||
- 显示相关:`show` + `PropName`
|
||||
- 功能性:`PropName` + `able`
|
||||
- 禁用:`disabled`
|
||||
- 额外内容:`extra`
|
||||
- 图标:`icon`
|
||||
- 触发器:`trigger`
|
||||
- 类名:`className`
|
||||
| 用途 | 命名规则 | 示例 |
|
||||
| -------------- | --------------------------------------- | ----------------------------- |
|
||||
| 初始化属性 | `default` + `PropName` | `defaultValue`、`defaultOpen` |
|
||||
| 强制渲染 | `forceRender` | `forceRender` |
|
||||
| 子组件强制渲染 | `force` + `SubComponentName` + `Render` | `forcePanelRender` |
|
||||
| 子组件渲染 | `SubComponentName` + `Render` | `titleRender`、`footerRender` |
|
||||
| 数据源 | `dataSource` | `dataSource` |
|
||||
| 面板开启 | 使用 `open`,避免使用 `visible` | `open`、`defaultOpen` |
|
||||
| 显示相关 | `show` + `PropName` | `showSearch`、`showHeader` |
|
||||
| 功能性 | `PropName` + `able` | `disabled`、`readable` |
|
||||
| 禁用 | `disabled` | `disabled` |
|
||||
| 额外内容 | `extra` | `extra` |
|
||||
| 图标 | `icon` | `icon`、`prefixIcon` |
|
||||
| 触发器 | `trigger` | `trigger` |
|
||||
| 类名 | `className` | `className` |
|
||||
|
||||
#### 事件命名
|
||||
|
||||
- 触发事件:`on` + `EventName`
|
||||
- 子组件事件:`on` + `SubComponentName` + `EventName`
|
||||
- 前置事件:`before` + `EventName`
|
||||
- 后置事件:`after` + `EventName`
|
||||
- 连续动作完成:`on` + `EventName` + `Complete`
|
||||
| 类型 | 命名规则 | 示例 |
|
||||
| ------------ | --------------------------------------- | --------------------- |
|
||||
| 触发事件 | `on` + `EventName` | `onClick`、`onChange` |
|
||||
| 子组件事件 | `on` + `SubComponentName` + `EventName` | `onPanelChange` |
|
||||
| 前置事件 | `before` + `EventName` | `beforeUpload` |
|
||||
| 后置事件 | `after` + `EventName` | `afterClose` |
|
||||
| 连续动作完成 | `on` + `EventName` + `Complete` | `onUploadComplete` |
|
||||
|
||||
#### 组件引用
|
||||
#### 组件引用(Ref)
|
||||
|
||||
组件应提供 `ref` 属性,结构如下:
|
||||
|
||||
```tsx
|
||||
ComponentRef {
|
||||
interface ComponentRef {
|
||||
nativeElement: HTMLElement;
|
||||
focus: VoidFunction;
|
||||
// 其他函数
|
||||
blur: VoidFunction;
|
||||
// 其他方法...
|
||||
}
|
||||
```
|
||||
|
||||
@@ -94,54 +168,99 @@ ComponentRef {
|
||||
|
||||
格式:`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
|
||||
|
||||
示例:
|
||||
|
||||
- `buttonPrimaryColor` - Button 主色
|
||||
- `inputPaddingBlock` - Input 垂直内边距
|
||||
- `menuItemActiveBg` - Menu 激活项背景色
|
||||
|
||||
### API 文档规范
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | ----------- | ---------------------------- | ------------ |
|
||||
| htmlType | xxx | string | `button ` |
|
||||
| type | xxx | `horizontal ` \| `vertical ` | `horizontal` |
|
||||
| disabled | xxx | boolean | false |
|
||||
| minLength | xxx | number | 0 |
|
||||
| style | xxx | CSSProperties | - |
|
||||
#### API 表格格式
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --------- | --------------- | ------------------------------------------------------ | --------- |
|
||||
| htmlType | Button 原生类型 | string | `button` |
|
||||
| type | 按钮类型 | `primary` \| `default` \| `dashed` \| `link` \| `text` | `default` |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| minLength | 最小长度 | number | 0 |
|
||||
| style | 自定义样式 | CSSProperties | - |
|
||||
|
||||
#### API 文档要求
|
||||
|
||||
- 字符串类型的默认值使用反引号
|
||||
- 布尔类型直接使用 true 或 false
|
||||
- 数字类型直接使用数字
|
||||
- 函数类型使用箭头函数表达式
|
||||
- 无默认值使用 `-`
|
||||
- 描述首字母大写,结尾无句号
|
||||
- API 按字母顺序排列
|
||||
- ✅ 字符串类型的默认值使用反引号包裹,如 `` `button` ``
|
||||
- ✅ 布尔类型直接使用 `true` 或 `false`
|
||||
- ✅ 数字类型直接使用数字,如 `0`、`100`
|
||||
- ✅ 函数类型使用箭头函数表达式,如 `(e: Event) => void`
|
||||
- ✅ 无默认值使用 `-`
|
||||
- ✅ 描述首字母大写,结尾无句号
|
||||
- ✅ API 按字母顺序排列
|
||||
|
||||
---
|
||||
|
||||
## TypeScript 规范
|
||||
|
||||
### 基本原则
|
||||
|
||||
- 所有组件和函数必须提供准确的类型定义
|
||||
- 避免使用 `any` 类型,尽可能精确地定义类型
|
||||
- 使用接口而非类型别名定义对象结构
|
||||
- 导出所有公共接口类型,方便用户使用
|
||||
- 严格遵循 TypeScript 类型设计原则,确保类型安全
|
||||
- 确保编译无任何类型错误或警告
|
||||
- ✅ 所有组件和函数必须提供准确的类型定义
|
||||
- ✅ 避免使用 `any` 类型,尽可能精确地定义类型
|
||||
- ✅ 使用接口(interface)而非类型别名(type)定义对象结构
|
||||
- ✅ 导出所有公共接口类型,方便用户使用
|
||||
- ✅ 严格遵循 TypeScript 类型设计原则,确保类型安全
|
||||
- ✅ 确保编译无任何类型错误或警告
|
||||
|
||||
### 组件类型定义
|
||||
|
||||
- 组件 props 应使用 interface 定义,便于扩展
|
||||
- 组件 props 接口命名应为 `ComponentNameProps`
|
||||
- 为组件状态定义专门的接口,如 `ComponentNameState`
|
||||
- 复杂的数据结构应拆分为多个接口定义
|
||||
- 组件的 ref 类型应该明确定义,使用 `React.ForwardRefRenderFunction`
|
||||
- 所有回调函数类型应明确定义参数和返回值
|
||||
```tsx
|
||||
// ✅ 正确:使用 interface 定义 Props
|
||||
interface ButtonProps {
|
||||
type?: 'primary' | 'default' | 'dashed';
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
// ❌ 错误:避免使用 type 定义对象结构
|
||||
type ButtonProps = {
|
||||
type?: 'primary' | 'default';
|
||||
};
|
||||
|
||||
// ✅ 正确:组件 Props 接口命名
|
||||
interface ComponentNameProps {
|
||||
// ...
|
||||
}
|
||||
|
||||
// ✅ 正确:组件状态接口命名
|
||||
interface ComponentNameState {
|
||||
// ...
|
||||
}
|
||||
|
||||
// ✅ 正确:使用 ForwardRefRenderFunction 定义 ref
|
||||
const Component = React.forwardRef<ComponentRef, ComponentProps>((props, ref) => {
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
### 类型使用最佳实践
|
||||
|
||||
- 适当使用泛型增强类型灵活性
|
||||
- 使用交叉类型(&)合并多个类型
|
||||
- 使用字面量联合类型定义有限的选项集合
|
||||
- 避免使用 `enum`,优先使用联合类型和 `as const`
|
||||
- 尽可能依赖 TypeScript 的类型推断
|
||||
- 只在必要时使用类型断言(as)
|
||||
- ✅ 适当使用泛型增强类型灵活性
|
||||
- ✅ 使用交叉类型(&)合并多个类型
|
||||
- ✅ 使用字面量联合类型定义有限的选项集合
|
||||
- ✅ 避免使用 `enum`,优先使用联合类型和 `as const`
|
||||
- ✅ 尽可能依赖 TypeScript 的类型推断
|
||||
- ✅ 只在必要时使用类型断言(`as`)
|
||||
|
||||
```tsx
|
||||
// ✅ 推荐:使用联合类型和 as const
|
||||
const ButtonTypes = ['primary', 'default', 'dashed'] as const;
|
||||
type ButtonType = (typeof ButtonTypes)[number];
|
||||
|
||||
// ❌ 不推荐:使用 enum
|
||||
enum ButtonType {
|
||||
Primary = 'primary',
|
||||
Default = 'default',
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 样式规范
|
||||
|
||||
@@ -165,17 +284,17 @@ ComponentRef {
|
||||
|
||||
### 响应式和主题支持
|
||||
|
||||
- 组件应支持在不同屏幕尺寸下良好展示
|
||||
- 所有组件必须支持暗色模式
|
||||
- 组件应支持从右到左(RTL)的阅读方向
|
||||
- 使用 CSS 逻辑属性(如 margin-inline-start)替代方向性属性(如 margin-left)
|
||||
- 支持通过 ConfigProvider 进行主题定制
|
||||
- ✅ 组件应支持在不同屏幕尺寸下良好展示
|
||||
- ✅ 所有组件必须支持暗色模式
|
||||
- ✅ 组件应支持从右到左(RTL)的阅读方向
|
||||
- ✅ 使用 CSS 逻辑属性(如 `margin-inline-start`)替代方向性属性(如 `margin-left`)
|
||||
- ✅ 支持通过 `ConfigProvider` 进行主题定制
|
||||
|
||||
### 动画效果
|
||||
|
||||
- 使用 CSS 过渡实现简单动画
|
||||
- 复杂动画使用 @rc-component/motion 实现
|
||||
- 尊重用户的减少动画设置(prefers-reduced-motion)
|
||||
- 复杂动画使用 `@rc-component/motion` 实现
|
||||
- 尊重用户的减少动画设置(`prefers-reduced-motion`)
|
||||
- 动画时长和缓动函数应保持一致性
|
||||
- 动画不应干扰用户的操作和阅读体验
|
||||
|
||||
@@ -188,67 +307,108 @@ ComponentRef {
|
||||
- 支持用户放大页面至 200% 时的正常布局
|
||||
- 避免使用会导致闪烁的动画
|
||||
|
||||
## 测试指南
|
||||
---
|
||||
|
||||
### 测试框架和工具
|
||||
## 开发指南
|
||||
|
||||
### 测试指南
|
||||
|
||||
#### 测试框架和工具
|
||||
|
||||
- 使用 Jest 和 React Testing Library 编写单元测试
|
||||
- 对 UI 组件使用快照测试 (Snapshot Testing)
|
||||
- 测试覆盖率要求 100%
|
||||
- 测试文件放在 **tests** 目录,命名格式为:index.test.tsx 或 xxx.test.tsx
|
||||
- 对 UI 组件使用快照测试(Snapshot Testing)
|
||||
- 测试覆盖率要求 **100%**
|
||||
- 测试文件放在 `tests/` 目录,命名格式为:`index.test.tsx` 或 `xxx.test.tsx`
|
||||
|
||||
### 运行测试
|
||||
#### 运行测试
|
||||
|
||||
```bash
|
||||
npm test # 运行所有测试
|
||||
npm test -- --watch # 监听模式
|
||||
npm run test:coverage # 生成覆盖率报告
|
||||
npm test -- --watch # 监听模式
|
||||
npm run test:coverage # 生成覆盖率报告
|
||||
npm run test:image # UI 快照测试(需要 Docker)
|
||||
```
|
||||
|
||||
## 演示代码规范
|
||||
#### 测试最佳实践
|
||||
|
||||
### Demo 基本要求
|
||||
- ✅ 测试用户行为而非实现细节
|
||||
- ✅ 使用有意义的测试描述
|
||||
- ✅ 每个测试用例应该独立,不依赖其他测试
|
||||
- ✅ 测试边界情况和错误处理
|
||||
|
||||
- demo 代码尽可能简洁
|
||||
- 避免冗余代码,方便用户复制到项目直接使用
|
||||
- 每个 demo 聚焦展示一个功能点
|
||||
- 提供中英文两个版本的说明
|
||||
- 遵循展示优先原则,确保视觉效果良好
|
||||
- 展示组件的主要使用场景
|
||||
- 按照由简到繁的顺序排列 demo
|
||||
### 演示代码规范
|
||||
|
||||
### 文件组织
|
||||
#### Demo 基本要求
|
||||
|
||||
- ✅ demo 代码尽可能简洁
|
||||
- ✅ 避免冗余代码,方便用户复制到项目直接使用
|
||||
- ✅ 每个 demo 聚焦展示一个功能点
|
||||
- ✅ 提供中英文两个版本的说明
|
||||
- ✅ 遵循展示优先原则,确保视觉效果良好
|
||||
- ✅ 展示组件的主要使用场景
|
||||
- ✅ 按照由简到繁的顺序排列 demo
|
||||
|
||||
#### 文件组织
|
||||
|
||||
- 每个组件演示包含 `.md`(说明文档)和 `.tsx`(实际代码)两个文件
|
||||
- 位置:组件目录下的 `demo` 子目录,如 `components/button/demo/`
|
||||
- 命名:短横线连接的小写英文单词,如 `basic.tsx`、`custom-filter.tsx`
|
||||
- 文件名应简洁地描述示例内容
|
||||
|
||||
### TSX 代码规范
|
||||
#### TSX 代码规范
|
||||
|
||||
```tsx
|
||||
// ✅ 正确的导入顺序
|
||||
import React, { useState } from 'react';
|
||||
import { Button, Space } from 'antd';
|
||||
import type { ButtonProps } from 'antd';
|
||||
|
||||
import './custom.css';
|
||||
|
||||
// ✅ 使用函数式组件和 Hooks
|
||||
const Demo: React.FC = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleClick = () => {
|
||||
setLoading(true);
|
||||
// ...
|
||||
};
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<Button loading={loading} onClick={handleClick}>
|
||||
Click me
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
|
||||
**规范要点**:
|
||||
|
||||
- 导入顺序:React → 依赖库 → 组件库 → 自定义组件 → 类型 → 样式
|
||||
- 类型:为复杂数据定义清晰接口,避免 `any`
|
||||
- 使用函数式组件和 Hooks
|
||||
- 2空格缩进,箭头函数,驼峰命名
|
||||
- 2 空格缩进,箭头函数,驼峰命名
|
||||
- 优先使用 antd 内置组件,减少外部依赖
|
||||
- 性能优化:适当使用 `useMemo`/`useCallback`,清理副作用
|
||||
|
||||
## 国际化规范
|
||||
### 国际化规范
|
||||
|
||||
### 类型定义
|
||||
#### 类型定义
|
||||
|
||||
antd 的本地化配置的类型定义的入口文件是 `components/locale/index.tsx`,当需要添加新的本地化配置时,需要检查对应组件或全局配置的类型是否存在,如果不存在,则需要增加相应的类型描述。
|
||||
|
||||
### 本地化配置
|
||||
#### 本地化配置
|
||||
|
||||
- 本地化配置文件命名规则:`*_*.ts`,如:`zh_CN.ts`
|
||||
- 通常在为 antd 添加后修改某一项本地化配置时,如无特殊说明,需要同时修改所有语言的本地化配置
|
||||
- 本地化配置文件命名规则:`*_*.ts`,如:`zh_CN.ts`、`en_US.ts`
|
||||
- 通常在为 antd 添加或修改某一项本地化配置时,如无特殊说明,需要同时修改所有语言的本地化配置
|
||||
- 本地化配置的内容通常是纯字符串
|
||||
- 带有 `${}` 的变量将在实际使用的地方被实时替换成对应的变量内容
|
||||
|
||||
### 使用本地化
|
||||
|
||||
使用 `components/locale/index.tsx` 文件中导出的 `useLocale` 获取全局上下文中配置的本地化:
|
||||
#### 使用本地化
|
||||
|
||||
```tsx
|
||||
import { useLocale } from '../locale';
|
||||
@@ -256,7 +416,7 @@ import enUS from '../locale/en_US';
|
||||
|
||||
export function TestComp(props) {
|
||||
const { locale: propLocale } = props;
|
||||
const [contextLocale] = useLocale('TestComp', enUs);
|
||||
const [contextLocale] = useLocale('TestComp', enUS);
|
||||
|
||||
const locale = { ...contextLocale, ...propLocale };
|
||||
|
||||
@@ -264,162 +424,105 @@ export function TestComp(props) {
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 文档和 Changelog 规范
|
||||
|
||||
### 基本要求
|
||||
|
||||
- 提供中英文两个版本
|
||||
- 新的属性需要声明可用的版本号
|
||||
- 属性命名符合 antd 的 API 命名规则
|
||||
- ✅ 提供中英文两个版本
|
||||
- ✅ 新的属性需要声明可用的版本号
|
||||
- ✅ 属性命名符合 antd 的 API 命名规则
|
||||
|
||||
### 文档锚点 ID 规范
|
||||
|
||||
- 针对 Markdown 文件中的标题(# 到 ######)自动生成锚点 ID
|
||||
- 所有中文标题(H1-H6)必须手动指定一个简洁、有意义的英文锚点。
|
||||
- 格式: ## 中文标题 {#english-anchor-id}
|
||||
- 英文标题通常不需要手动指定锚点,但如果需要,可以使用相同的格式。
|
||||
- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`, 且长度不应超过 32 个字符。
|
||||
- 用于演示(demo)且包含 `-demo-` 的 id 不受前面的长度限制。
|
||||
- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀。
|
||||
- 为确保在不同语言间切换时锚点依然有效,同一问题的中英文锚点应保持完全一致。
|
||||
- 例如:
|
||||
- 中文标题:`### 如何使用组件 {#how-to-use-component}`
|
||||
- 英文标题:`### How to Use the Component {#how-to-use-component}`
|
||||
- 所有中文标题(H1-H6)必须手动指定一个简洁、有意义的英文锚点
|
||||
- 格式: `## 中文标题 {#english-anchor-id}`
|
||||
- 英文标题通常不需要手动指定锚点,但如果需要,可以使用相同的格式
|
||||
- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`,且长度不应超过 32 个字符
|
||||
- 用于演示(demo)且包含 `-demo-` 的 id 不受前面的长度限制
|
||||
- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀
|
||||
- 为确保在不同语言间切换时锚点依然有效,同一问题的中英文锚点应保持完全一致
|
||||
|
||||
**示例**:
|
||||
|
||||
- 中文标题:`### 如何使用组件 {#how-to-use-component}`
|
||||
- 英文标题:`### How to Use the Component {#how-to-use-component}`
|
||||
|
||||
### Changelog 规范
|
||||
|
||||
- 在 CHANGELOG.en-US.md 和 CHANGELOG.zh-CN.md 书写每个版本的变更
|
||||
- 对用户使用上无感知的改动建议不要提及,保持 CHANGELOG 的内容有效性
|
||||
- 用面向开发者的角度和叙述方式撰写 CHANGELOG
|
||||
- 描述用户的原始问题,而非解决方式
|
||||
- 尽量给出原始的 PR 链接,社区提交的 PR 改动加上提交者的链接
|
||||
#### 🎯 核心原则
|
||||
|
||||
### 🎯 核心原则
|
||||
1. **文件位置**:在 `CHANGELOG.en-US.md` 和 `CHANGELOG.zh-CN.md` 书写每个版本的变更
|
||||
|
||||
- 有效性过滤:忽略用户无感知的改动(如文档网站改进、纯测试用例更新、内部重构、工具链优化等),除非其对开发者有直接影响。
|
||||
- 开发者视角:描述“用户的原始问题”和“对开发者的影响”,而非“具体的解决代码”。
|
||||
- ❌ 修复 Typography 的 DOM 结构问题。
|
||||
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构,修复了内容空格丢失的问题。
|
||||
- 版本与命名:
|
||||
- 新增属性必须符合 antd API 命名规则。
|
||||
- 新增属性建议在描述中暗示或明确声明可用版本号。
|
||||
- 双语输出:每次处理必须同时提供 **中文版** 和 **英文版**。
|
||||
2. **有效性过滤**:忽略用户无感知的改动(如文档网站改进、纯测试用例更新、内部重构、工具链优化等),除非其对开发者有直接影响。保持 CHANGELOG 的内容有效性。
|
||||
|
||||
### 🎨 格式与结构规范
|
||||
3. **开发者视角**:用面向开发者的角度和叙述方式撰写 CHANGELOG,描述"用户的原始问题"和"对开发者的影响",而非"具体的解决代码"。
|
||||
- ❌ 修复 Typography 的 DOM 结构问题。
|
||||
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构,修复了内容空格丢失的问题。
|
||||
|
||||
- 单条条目结构:`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`。
|
||||
- 组件名\*需加粗,后接英文冒号和空格。
|
||||
- 分组逻辑:
|
||||
- 多项改动:同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列。
|
||||
- 单项改动:直接编写单行条目,不设分类标题。
|
||||
- 文本细节:
|
||||
- 代码包裹:所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 ` ` 包裹。
|
||||
- 中英空格:中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**。
|
||||
4. **版本与命名**:
|
||||
- 新增属性必须符合 antd API 命名规则
|
||||
- 新增属性建议在描述中暗示或明确声明可用版本号
|
||||
|
||||
### 🏷️ Emoji 规范 (严格执行)
|
||||
5. **双语输出**:每次处理必须同时提供 **中文版** 和 **英文版**
|
||||
|
||||
- 🐞 修复 Bug
|
||||
- 💄 样式更新或 token 更新
|
||||
- 🆕 新增特性 / 新增属性
|
||||
- 🔥 极其值得关注的新增特性
|
||||
- 🇺🇸🇨🇳🇬🇧 国际化改动
|
||||
- 📖 📝 文档或网站改进
|
||||
- ✅ 新增或更新测试用例
|
||||
- 🛎 更新警告/提示信息
|
||||
- ⌨️ ♿ 可访问性增强
|
||||
- 🗑 废弃或移除
|
||||
- 🛠 重构或工具链优化
|
||||
- ⚡️ 性能提升
|
||||
6. **PR 链接**:尽量给出原始的 PR 链接,社区提交的 PR 改动加上提交者的链接
|
||||
|
||||
---
|
||||
#### 🎨 格式与结构规范
|
||||
|
||||
### 💡 输出示例参考
|
||||
|
||||
```md
|
||||
#### 中文
|
||||
|
||||
- 🐞 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)
|
||||
|
||||
#### English
|
||||
|
||||
- 🐞 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)
|
||||
```
|
||||
|
||||
### 提示词
|
||||
|
||||
```md
|
||||
### 🤖 角色定义
|
||||
|
||||
你是一位 Ant Design 核心维护者,负责编写 `CHANGELOG.zh-CN.md` 和 `CHANGELOG.en-US.md`。你需要将原始 PR 列表转化为专业、简洁、面向开发者的发布日志。
|
||||
|
||||
### 🎯 核心原则
|
||||
|
||||
1. **有效性过滤**:忽略用户无感知的改动(如文档网站改进、纯测试用例更新、内部重构、工具链优化等),除非其对开发者有直接影响。
|
||||
2. **开发者视角**:描述“用户的原始问题”和“对开发者的影响”,而非“具体的解决代码”。
|
||||
|
||||
- ❌ 修复 Typography 的 DOM 结构问题。
|
||||
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构,修复了内容空格丢失的问题。
|
||||
|
||||
3. **版本与命名**:
|
||||
|
||||
- 新增属性必须符合 antd API 命名规则。
|
||||
- 新增属性建议在描述中暗示或明确声明可用版本号。
|
||||
|
||||
### 🎨 格式与结构规范
|
||||
|
||||
1. **单条条目结构**:`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`。
|
||||
|
||||
- 组件名**无需加粗**,后接英文冒号和空格。
|
||||
1. **单条条目结构**:`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
|
||||
- 组件名**无需加粗**,后接英文冒号和空格
|
||||
|
||||
2. **分组逻辑**:
|
||||
|
||||
- **多项改动**:同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列。
|
||||
- **单项改动**:直接编写单行条目,不设分类标题。
|
||||
- **多项改动**:同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列
|
||||
- **单项改动**:直接编写单行条目,不设分类标题
|
||||
|
||||
3. **文本细节**:
|
||||
- **代码包裹**:所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹
|
||||
- **中英空格**:中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
|
||||
|
||||
- **代码包裹**:所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 ` ` 包裹。
|
||||
- **中英空格**:中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**。
|
||||
#### 🏷️ Emoji 规范(严格执行)
|
||||
|
||||
### 🏷️ Emoji 规范 (严格执行)
|
||||
| Emoji | 用途 |
|
||||
| ------ | ---------------------- |
|
||||
| 🐞 | 修复 Bug |
|
||||
| 💄 | 样式更新或 token 更新 |
|
||||
| 🆕 | 新增特性 / 新增属性 |
|
||||
| 🔥 | 极其值得关注的新增特性 |
|
||||
| 🇺🇸🇨🇳🇬🇧 | 国际化改动 |
|
||||
| 📖 📝 | 文档或网站改进 |
|
||||
| ✅ | 新增或更新测试用例 |
|
||||
| 🛎 | 更新警告/提示信息 |
|
||||
| ⌨️ ♿ | 可访问性增强 |
|
||||
| 🗑 | 废弃或移除 |
|
||||
| 🛠 | 重构或工具链优化 |
|
||||
| ⚡️ | 性能提升 |
|
||||
|
||||
- 🐞 修复 Bug
|
||||
- 💄 样式更新或 token 更新
|
||||
- 🆕 新增特性 / 新增属性
|
||||
- 🔥 极其值得关注的新增特性
|
||||
- 🇺🇸🇨🇳🇬🇧 国际化改动
|
||||
- 📖 📝 文档或网站改进
|
||||
- ✅ 新增或更新测试用例
|
||||
- 🛎 更新警告/提示信息
|
||||
- ⌨️ ♿ 可访问性增强
|
||||
- 🗑 废弃或移除
|
||||
- 🛠 重构或工具链优化
|
||||
- ⚡️ 性能提升
|
||||
#### 💡 输出示例参考
|
||||
|
||||
---
|
||||
|
||||
### 🏗️ 任务执行:请处理以下 PR 数据
|
||||
|
||||
#### 💡 输出示例参考:
|
||||
|
||||
**中文版:**
|
||||
**中文版**:
|
||||
|
||||
```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)
|
||||
- 🐞 Select: 修复 Select `options` 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
|
||||
```
|
||||
|
||||
**English Version:**
|
||||
**English Version**:
|
||||
|
||||
```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)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Git 和 Pull Request 规范
|
||||
|
||||
### 分支管理
|
||||
|
||||
禁止直接提交到以下保护分支:
|
||||
**禁止直接提交到以下保护分支**:
|
||||
|
||||
- `master`:主分支,用于发布
|
||||
- `feature`:特性分支,用于开发新版本
|
||||
@@ -435,18 +538,20 @@ export function TestComp(props) {
|
||||
|
||||
### 分支命名规范
|
||||
|
||||
- 功能开发:`feat/description-of-feature`
|
||||
- 问题修复:`fix/issue-number-or-description`
|
||||
- 文档更新:`docs/what-is-changed`
|
||||
- 代码重构:`refactor/what-is-changed`
|
||||
- 样式修改:`style/what-is-changed`
|
||||
- 测试相关:`test/what-is-changed`
|
||||
- 构建相关:`build/what-is-changed`
|
||||
- 持续集成:`ci/what-is-changed`
|
||||
- 性能优化:`perf/what-is-changed`
|
||||
- 依赖升级:`deps/package-name-version`
|
||||
| 类型 | 格式 | 示例 |
|
||||
| -------- | --------------------------------- | ----------------------------- |
|
||||
| 功能开发 | `feat/description-of-feature` | `feat/add-dark-mode` |
|
||||
| 问题修复 | `fix/issue-number-or-description` | `fix/button-style-issue` |
|
||||
| 文档更新 | `docs/what-is-changed` | `docs/update-api-docs` |
|
||||
| 代码重构 | `refactor/what-is-changed` | `refactor/button-component` |
|
||||
| 样式修改 | `style/what-is-changed` | `style/fix-button-padding` |
|
||||
| 测试相关 | `test/what-is-changed` | `test/add-button-tests` |
|
||||
| 构建相关 | `build/what-is-changed` | `build/update-webpack-config` |
|
||||
| 持续集成 | `ci/what-is-changed` | `ci/add-github-actions` |
|
||||
| 性能优化 | `perf/what-is-changed` | `perf/optimize-render` |
|
||||
| 依赖升级 | `deps/package-name-version` | `deps/upgrade-react-19` |
|
||||
|
||||
### 分支命名注意事项
|
||||
**分支命名注意事项**:
|
||||
|
||||
1. 使用小写字母
|
||||
2. 使用连字符(-)分隔单词
|
||||
@@ -460,8 +565,9 @@ export function TestComp(props) {
|
||||
|
||||
- PR 标题始终使用英文
|
||||
- 遵循格式:`类型: 简短描述`
|
||||
- 例如:`fix: fix button style issues in Safari browser`
|
||||
- 例如:`feat: add dark mode support`
|
||||
- 示例:
|
||||
- `fix: fix button style issues in Safari browser`
|
||||
- `feat: add dark mode support`
|
||||
|
||||
#### PR 内容
|
||||
|
||||
@@ -473,8 +579,8 @@ export function TestComp(props) {
|
||||
|
||||
提交 PR 时请使用项目中提供的模板:
|
||||
|
||||
- 英文模板(推荐):PULL_REQUEST_TEMPLATE.md
|
||||
- 中文模板:PULL_REQUEST_TEMPLATE_CN.md
|
||||
- 英文模板(推荐):`PULL_REQUEST_TEMPLATE.md`
|
||||
- 中文模板:`PULL_REQUEST_TEMPLATE_CN.md`
|
||||
|
||||
#### PR 提交注意事项
|
||||
|
||||
@@ -496,7 +602,7 @@ export function TestComp(props) {
|
||||
4. **工具标注**:
|
||||
- 如果是用 Cursor 提交的代码,请在 PR body 末尾进行标注:`> Submitted by Cursor`
|
||||
|
||||
### PR 改动类型
|
||||
#### PR 改动类型
|
||||
|
||||
- 🆕 新特性提交
|
||||
- 🐞 Bug 修复
|
||||
@@ -508,31 +614,35 @@ export function TestComp(props) {
|
||||
- ⚡️ 性能优化
|
||||
- 🌐 国际化改进
|
||||
|
||||
---
|
||||
|
||||
## 质量保证
|
||||
|
||||
### 代码质量要求
|
||||
|
||||
- 确保代码运行正常,无控制台错误
|
||||
- 适配常见浏览器
|
||||
- 避免过时 API,及时更新到新推荐用法
|
||||
- 测试覆盖率达到 100%
|
||||
- 通过所有 ESLint 和 TypeScript 检查
|
||||
- ✅ 确保代码运行正常,无控制台错误
|
||||
- ✅ 适配常见浏览器
|
||||
- ✅ 避免过时 API,及时更新到新推荐用法
|
||||
- ✅ 测试覆盖率达到 100%
|
||||
- ✅ 通过所有 ESLint 和 TypeScript 检查
|
||||
|
||||
### 性能要求
|
||||
|
||||
- 避免不必要的重新渲染
|
||||
- 合理使用 React.memo、useMemo 和 useCallback
|
||||
- 样式计算应当高效,避免重复计算
|
||||
- 图片和资源应当优化
|
||||
- 支持 Tree Shaking
|
||||
- ✅ 避免不必要的重新渲染
|
||||
- ✅ 合理使用 `React.memo`、`useMemo` 和 `useCallback`
|
||||
- ✅ 样式计算应当高效,避免重复计算
|
||||
- ✅ 图片和资源应当优化
|
||||
- ✅ 支持 Tree Shaking
|
||||
|
||||
### 兼容性要求
|
||||
|
||||
- 支持 React 18 ~ 19 版本
|
||||
- 兼容 Chrome 80+ 浏览器
|
||||
- 支持服务端渲染
|
||||
- 保持向下兼容,避免 breaking change
|
||||
- 支持 TypeScript 4.0+
|
||||
- ✅ 支持 React 18 ~ 19 版本
|
||||
- ✅ 兼容 Chrome 80+ 浏览器
|
||||
- ✅ 支持服务端渲染(SSR)
|
||||
- ✅ 保持向下兼容,避免 breaking change
|
||||
- ✅ 支持 TypeScript 4.0+
|
||||
|
||||
---
|
||||
|
||||
## 工具链和环境
|
||||
|
||||
@@ -557,12 +667,11 @@ export function TestComp(props) {
|
||||
- 自动化发布流程
|
||||
- 支持多环境部署
|
||||
|
||||
---
|
||||
|
||||
## 参考资料
|
||||
|
||||
- [API Naming Rules](https://github.com/ant-design/ant-design/wiki/API-Naming-rules)
|
||||
- [#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
|
||||
|
||||
## 特别说明
|
||||
|
||||
如果使用 AI 编程助手(如 Cursor)进行开发,请在提交 PR 时在末尾标注:`> Submitted by Cursor`
|
||||
- [Development Guide](https://github.com/ant-design/ant-design/wiki/Development)
|
||||
|
||||
@@ -15,6 +15,19 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 6.2.3
|
||||
|
||||
`2026-02-01`
|
||||
|
||||
- Button
|
||||
- 🐞 Fix Button `defaultBg`, `defaultColor`, `defaultHoverColor` and `defaultActiveColor` tokens not taking effect. [#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
|
||||
- 🐞 Fix Button default tokens not taking effect. [#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
|
||||
- 🐞 Fix Button `variant="solid"` borders displaying incorrectly inside Space.Compact. [#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
|
||||
- 🐞 Fix Input.TextArea ref missing `nativeElement` property. [#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
|
||||
- 🐞 Fix Flex default `align` not taking effect when using `orientation`. [#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
|
||||
- 🐞 Fix Typography link selector specificity being too low causing styles to be overridden. [#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
|
||||
- 🐞 Fix ColorPicker HEX input allowing invalid characters. [#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
|
||||
|
||||
## 6.2.2
|
||||
|
||||
`2026-01-26`
|
||||
|
||||
@@ -15,6 +15,19 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 6.2.3
|
||||
|
||||
`2026-02-02`
|
||||
|
||||
- Button
|
||||
- 🐞 修复 Button `defaultBg`、`defaultColor`、`defaultHoverColor` 和 `defaultActiveColor` token 不生效的问题。[#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
|
||||
- 🐞 修复 Button 默认 token 不生效的问题。[#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
|
||||
- 🐞 修复 Button `variant="solid"` 在 Space.Compact 中边框显示异常的问题。[#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
|
||||
- 🐞 修复 Input.TextArea ref 缺少 `nativeElement` 属性的问题。[#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
|
||||
- 🐞 修复 Flex 使用 `orientation` 时默认 `align` 不生效的问题。[#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
|
||||
- 🐞 修复 Typography 链接选择器特异性过低导致样式被覆盖的问题。[#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
|
||||
- 🐞 修复 ColorPicker HEX 输入框可以输入无效字符的问题。[#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
|
||||
|
||||
## 6.2.2
|
||||
|
||||
`2026-01-26`
|
||||
|
||||
@@ -23,6 +23,7 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
|
||||
|
||||
// ========================== Ref ===========================
|
||||
const inputRef = React.useRef<InputRef>(null);
|
||||
|
||||
React.useImperativeHandle(ref, () => inputRef.current!);
|
||||
|
||||
// ========================= Input ==========================
|
||||
@@ -40,7 +41,7 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
|
||||
});
|
||||
};
|
||||
|
||||
const onInternalFocus = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||
const onInternalFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
|
||||
onFocus?.(e);
|
||||
syncSelection();
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "6.2.2",
|
||||
"version": "6.2.3",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
@@ -210,7 +210,7 @@
|
||||
"@types/pngjs": "^6.0.5",
|
||||
"@types/prismjs": "^1.26.5",
|
||||
"@types/progress": "^2.0.7",
|
||||
"@types/react": "19.2.7",
|
||||
"@types/react": "19.2.9",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@types/react-highlight-words": "^0.20.0",
|
||||
"@types/semver": "^7.7.1",
|
||||
@@ -243,7 +243,7 @@
|
||||
"eslint-plugin-jest": "^29.12.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.26",
|
||||
"eslint-plugin-react-refresh": "^0.5.0",
|
||||
"fast-glob": "^3.3.3",
|
||||
"father": "4.6.13",
|
||||
"fs-extra": "^11.3.2",
|
||||
|
||||
@@ -4,7 +4,6 @@ import { input, select } from '@inquirer/prompts';
|
||||
import chalk from 'chalk';
|
||||
import fs from 'fs-extra';
|
||||
import fetch from 'isomorphic-fetch';
|
||||
import jQuery from 'jquery';
|
||||
import jsdom from 'jsdom';
|
||||
import openWindow from 'open';
|
||||
import simpleGit from 'simple-git';
|
||||
@@ -14,8 +13,11 @@ const { window } = new JSDOM();
|
||||
const { document } = new JSDOM('').window;
|
||||
|
||||
global.document = document;
|
||||
global.window = window as any;
|
||||
|
||||
const $ = jQuery<jsdom.DOMWindow>(window) as unknown as JQueryStatic;
|
||||
const jQuery = require('jquery');
|
||||
|
||||
const $ = jQuery(window) as unknown as JQueryStatic;
|
||||
|
||||
const QUERY_TITLE = '.gh-header-title .js-issue-title';
|
||||
const QUERY_DESCRIPTION_LINES = '.comment-body table tbody tr';
|
||||
|
||||
Reference in New Issue
Block a user