feat: support partial locale overrides for calendar and date picker#56376
feat: support partial locale overrides for calendar and date picker#56376zombieJ merged 16 commits intoant-design:featurefrom
Conversation
|
|
👁 Visual Regression Report for PR #56376 Failed ❌
Warning There are more diffs not shown in the table. Please check the Full Report for details. Important There are 48 diffs found in this PR: 🔄
|
|
|
📝 WalkthroughSummary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings. Walkthrough将大量组件的语义类型由单一字面名（SemanticName）拆分为每组件导出的 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Dev as 开发/调用端
participant Component as Modal/Drawer 组件
participant Config as ConfigProvider
participant Hook as useFocusable
participant RC as 底层 RcModal/RcDrawer
Note over Dev,Component: 渲染或以 API 调用 Modal/Drawer（可含 focusable）
Dev->>Component: 传入 props (including focusable?)
Component->>Config: 读取组件配置（可选，如 focus defaults）
Component->>Hook: useFocusable(focusable, defaultTrap, legacyFlag)
Hook-->>Component: 返回 mergedFocusable (trap, focusTriggerAfterClose, autoFocusButton)
Component->>RC: 将 mergedFocusable 及其它 props 传给底层 Rc 组件
RC-->>Component: 生命周期/焦点行为执行（focus 管理）
Component-->>Dev: 渲染完成 / 用户交互响应
说明：图示为新增 focusable 流在 Modal/Drawer 中的核心调用链（ConfigProvider → useFocusable → 组件 → 底层 Rc 实现）。 Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @QDyanbing, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the internationalization capabilities of the Calendar and DatePicker components. It introduces the ability to provide partial locale overrides, meaning developers no longer need to supply an entire locale object to change just a few text strings. The components now intelligently deep merge the provided partial locale with the default or context-defined locale, streamlining customization and reducing boilerplate code for internationalized applications. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/date-picker/generatePicker/generateSinglePicker.tsx (1)
186-186: 类型转换位置不当，影响类型安全当前将
props.locale强制转换为PickerLocale是不安全的：
props.locale的类型是DeepPartial<PickerLocale>（可能是部分的）- 将其转换为
PickerLocale断言它是完整的，这与类型定义矛盾- 这削弱了
DeepPartial提供的类型安全保护参考
generateRangePicker.tsx第 121 行的实现，应该转换合并后的结果而不是输入。🔎 建议的修复方案
-const locale = merge<PickerLocale>(contextLocale, (props.locale || {}) as PickerLocale); +const locale = merge<PickerLocale>(contextLocale, props.locale || {}) as PickerLocale;或者更简洁的方式：
-const locale = merge<PickerLocale>(contextLocale, (props.locale || {}) as PickerLocale); +const locale = merge(contextLocale, props.locale || {}) as PickerLocale;这样只对最终结果进行类型断言，保持了输入参数的类型安全。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/_util/type.tscomponents/calendar/generateCalendar.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/interface.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use camelCase for property names
All components and functions must provide accurate type definitions
Avoid usinganytype, define types as precisely as possible
Use interface rather than type alias for defining object structures
All TypeScript should compile without errors or warnings
Use generics appropriately to enhance type flexibility
Use intersection types (&) to merge multiple types
Use literal union types to define limited option sets
Avoid using enum, prefer union types andas const
Rely on TypeScript's type inference as much as possible
Use type assertions (as) only when necessary
Complex data structures should be split into multiple interface definitions
Avoid outdated APIs and keep updated to new recommended usage
Files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/_util/type.tscomponents/calendar/generateCalendar.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
components/**/*.{ts,tsx}: Use TypeScript and React for component development
Use functional components and hooks, avoid class components
Use PascalCase for component names
Use complete names rather than abbreviations in component naming
Initialize properties should usedefault+PropNamenaming pattern
Panel opening should useopenprop instead ofvisible
Event handlers should followon+EventNamenaming pattern
Child component events should followon+SubComponentName+EventNamenaming pattern
Components should provide arefattribute withnativeElementandfocusmethods
Export all public interface types for user convenience
Component props should use interface definition namedComponentNameProps
Use CSS transitions for simple animations, rc-motion for complex animations
Respect user's prefers-reduced-motion setting for animations
Follow WCAG 2.1 AA level accessibility standards for styling
Achieve 100% test coverage
UseuseLocalehook fromcomponents/locale/index.tsxto get localization configuration
Use React.memo, useMemo, and useCallback appropriately for performance optimization
UseReact.ForwardRefRenderFunctionfor component ref types
Callback function types should have explicit parameter and return value definitions
Component state should have dedicated interfaces (e.g., ComponentNameState)
Components should display well on different screen sizes (responsive design)
Components should support right-to-left (RTL) reading direction
Support page zoom to 200% with normal layout
Avoid animations that cause flickering
Ensure code runs normally with no console errors
Avoid unnecessary re-renders
Support Tree Shaking for bundle optimization
Files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/_util/type.tscomponents/calendar/generateCalendar.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/_util/type.tscomponents/calendar/generateCalendar.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/_util/type.tscomponents/calendar/generateCalendar.tsx
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,js}: Use early returns to improve code readability
Pass all ESLint and TypeScript checks
Files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/_util/type.tscomponents/calendar/generateCalendar.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/calendar/generateCalendar.tsx
🧠 Learnings (16)
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/calendar/generateCalendar.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/*.{ts,tsx} : Use `useLocale` hook from `components/locale/index.tsx` to get localization configuration
Applied to files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/calendar/generateCalendar.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/*.{ts,tsx} : Initialize properties should use `default` + `PropName` naming pattern
Applied to files:
components/date-picker/generatePicker/interface.tscomponents/_util/type.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/*.{ts,tsx} : Component Token naming format should follow: `variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
Applied to files:
components/date-picker/generatePicker/interface.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/demo/*.tsx : Demo code import order: React → dependencies → antd components → custom components → types → styles
Applied to files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsx
📚 Learning: 2025-11-13T02:52:08.942Z
Learnt from: meet-student
Repo: ant-design/ant-design PR: 55697
File: components/drawer/index.tsx:86-88
Timestamp: 2025-11-13T02:52:08.942Z
Learning: In Ant Design components (components/**/*.{ts,tsx}), always use `import useId from 'rc-util/lib/hooks/useId'` instead of `React.useId()` for generating unique IDs, to ensure compatibility with React 16-19. The rc-util hook automatically uses the native implementation in React 18+ and provides a fallback for older versions.
Applied to files:
components/date-picker/generatePicker/interface.tscomponents/date-picker/generatePicker/generateSinglePicker.tsxcomponents/date-picker/generatePicker/generateRangePicker.tsxcomponents/calendar/generateCalendar.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/*.{ts,tsx} : Export all public interface types for user convenience
Applied to files:
components/date-picker/generatePicker/generateSinglePicker.tsxcomponents/_util/type.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to **/*.{ts,tsx} : Use intersection types (&) to merge multiple types
Applied to files:
components/date-picker/generatePicker/generateSinglePicker.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/*.{ts,tsx} : Use functional components and hooks, avoid class components
Applied to files:
components/date-picker/generatePicker/generateSinglePicker.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/style/*.ts : Use design tokens from the Ant Design token system
Applied to files:
components/date-picker/generatePicker/generateRangePicker.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Avoid hardcoding colors, sizes, spacing values; use design Tokens instead
Applied to files:
components/date-picker/generatePicker/generateRangePicker.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/style/**/*.{ts,tsx} : Components should use global Tokens and component-level Tokens for styling
Applied to files:
components/date-picker/generatePicker/generateRangePicker.tsx
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to **/*.{ts,tsx} : Use interface rather than type alias for defining object structures
Applied to files:
components/_util/type.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to **/*.{ts,tsx} : Rely on TypeScript's type inference as much as possible
Applied to files:
components/_util/type.ts
📚 Learning: 2025-11-24T16:31:15.831Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:31:15.831Z
Learning: Applies to components/**/*.{ts,tsx} : Component props should use interface definition named `ComponentNameProps`
Applied to files:
components/_util/type.ts
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Component props interfaces should be named `ComponentNameProps`
Applied to files:
components/_util/type.ts
🧬 Code graph analysis (2)
components/date-picker/generatePicker/interface.ts (2)
components/_util/type.ts (1)
DeepPartial(14-16)components/date-picker/generatePicker/index.tsx (1)
PickerLocale(7-7)
components/calendar/generateCalendar.tsx (1)
components/_util/type.ts (1)
DeepPartial(14-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: build
- GitHub Check: size
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-node
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: lint
- GitHub Check: build
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: build preview
🔇 Additional comments (11)
components/_util/type.ts (1)
33-40: 代码格式优化合理
GetProps类型的格式调整为更紧凑的形式，语义保持不变，提升了可读性。components/calendar/generateCalendar.tsx (3)
6-6: 导入语句正确正确引入了
merge函数和DeepPartial类型，符合功能需求。Also applies to: 11-11
32-32: 类型定义清晰且支持部分覆盖引入
CalendarLocale类型定义并将locale属性改为DeepPartial<CalendarLocale>，使得用户可以只传递需要覆盖的字段，提升了 API 的灵活性。Also applies to: 50-50
314-314: locale 合并逻辑实现正确使用
merge函数将上下文 locale 与 props.locale 深度合并，正确处理了 undefined 的情况，实现了部分覆盖的功能。components/date-picker/generatePicker/interface.ts (2)
19-19: 导入语句正确正确引入了
DeepPartial类型工具。
99-99: 支持 DatePicker 的部分 locale 覆盖将
InjectDefaultProps中的locale类型从PickerLocale改为DeepPartial<PickerLocale>，使得所有 DatePicker 相关组件都支持部分 locale 覆盖。components/date-picker/generatePicker/generateSinglePicker.tsx (2)
7-7: 导入 merge 函数正确正确引入了用于深度合并的
merge函数。
39-44: 类型导入完整正确引入了
PickerLocale类型用于 locale 合并时的类型标注。components/date-picker/generatePicker/generateRangePicker.tsx (3)
7-7: 导入 merge 函数正确正确引入了用于深度合并的
merge函数。
28-28: 类型导入完整正确引入了
PickerLocale和RangePickerProps类型。
121-121: locale 合并逻辑实现正确使用
merge函数深度合并 locale 数据，类型转换位置正确（转换结果而非输入），保持了类型安全。这是比generateSinglePicker.tsx更好的实现模式。
More templates
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feature #56376 +/- ##
===========================================
Coverage 100.00% 100.00%
===========================================
Files 807 807
Lines 17819 14870 -2949
Branches 5107 3934 -1173
===========================================
- Hits 17819 14870 -2949 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will increase total bundle size by 728 bytes (0.02%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
Files in
Files in
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
components/date-picker/__tests__/RangePicker.test.tsx (1)
224-241: 可以移除冗余的 MockDate 调用。测试用例功能正确，但 225 行的
setMockDate()和 240 行的resetMockDate()调用是冗余的。文件的beforeEach（第 27 行）和afterEach（第 31 行）已经处理了 MockDate 的设置和重置。🔎 建议的优化
it('should support deep merge locale with partial fields', () => { - setMockDate(); - const wrapper = render( <RangePicker open locale={ { lang: { shortWeekDays: ['一', '二', '三', '四', '五', '六', '日'] } } as PickerLocale } />, ); expect(wrapper.container.querySelector('.ant-picker-content thead')?.textContent).toBe( '一二三四五六日', ); - - resetMockDate(); });components/calendar/__tests__/index.test.tsx (1)
600-613: 建议使用更具体的类型断言以保持一致性。测试用例功能正确，但第 605 行使用了
as any类型断言。为了与 DatePicker 和 RangePicker 测试保持一致性和类型安全性，建议使用更具体的 locale 类型（如果 Calendar 有对应的 locale 类型定义）。
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/calendar/__tests__/index.test.tsxcomponents/calendar/generateCalendar.tsxcomponents/date-picker/__tests__/DatePicker.test.tsxcomponents/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/generatePicker/generateSinglePicker.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- components/calendar/generateCalendar.tsx
- components/date-picker/generatePicker/generateSinglePicker.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Internationalization: obtain locale configuration via `useLocale` hook from `components/locale/index.tsx`; ensure new locale configurations have corresponding type definitions
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Internationalization: obtain locale configuration via `useLocale` hook from `components/locale/index.tsx`; ensure new locale configurations have corresponding type definitions
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/__tests__/**/*.test.{ts,tsx} : Write comprehensive tests using Jest and React Testing Library
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.test.{ts,tsx} : Use Jest and React Testing Library for unit tests; place test files in **tests** directory with naming format `index.test.tsx` or `xxx.test.tsx`; achieve 100% test coverage
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsx
🧬 Code graph analysis (2)
components/date-picker/__tests__/RangePicker.test.tsx (2)
tests/utils.tsx (2)
setMockDate(14-16)resetMockDate(18-20)components/date-picker/generatePicker/interface.ts (1)
PickerLocale(40-43)
components/date-picker/__tests__/DatePicker.test.tsx (3)
tests/__mocks__/rc-util/lib/Portal.tsx (1)
render(23-29)components/date-picker/generatePicker/interface.ts (1)
PickerLocale(40-43)components/date-picker/generatePicker/index.tsx (1)
PickerLocale(7-7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (14)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: lint
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-node
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: build
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: size
🔇 Additional comments (1)
components/date-picker/__tests__/DatePicker.test.tsx (1)
504-521: 测试用例结构良好，正确验证了深度合并功能。此测试用例正确地验证了部分 locale 覆盖的深度合并行为。测试隔离性好，MockDate 的设置和重置都在测试用例内部完成，类型断言使用了具体的
PickerLocale类型。
| />, | ||
| ); | ||
|
|
||
| expect(wrapper.container.querySelector('.ant-picker-content thead')?.textContent).toBe( |
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI Agents
In @components/date-picker/__tests__/DatePicker.test.tsx:
- Line 523: Remove the redundant explicit call to MockDate.reset() at the
indicated spot; the afterEach hook already calls MockDate.reset(), so delete the
standalone MockDate.reset() invocation (referencing the existing afterEach and
the MockDate.reset() call in the failing test) to avoid duplicate resets.
- Line 510: Replace the unsafe "as any" assertion on the locale prop with a
precise Partial<PickerLocale> type (e.g., locale={{ lang: { shortWeekDays: [...]
} } as Partial<PickerLocale>}) so the test supplies a correctly typed partial
locale for the component that will be deep-merged at runtime; also remove the
redundant MockDate.reset() call (the existing afterEach hook already handles
cleanup) to avoid duplicate teardown.
In @components/date-picker/__tests__/RangePicker.test.tsx:
- Line 243: The explicit call to resetMockDate() inside the test is redundant
because the afterEach hook (declared earlier in RangePicker.test.tsx) already
calls resetMockDate(); remove the standalone `resetMockDate();` statement from
the test to avoid duplication and rely on the existing afterEach cleanup for the
RangePicker tests.
- Line 230: Replace the unsafe "as any" assertion on the locale prop with a
proper Partial<PickerLocale> typed object: import the PickerLocale type, change
the assertion to "as Partial<PickerLocale>" for the locale value used in
RangePicker.test.tsx (the object with lang.shortWeekDays), and if needed include
a minimal timePickerLocale stub to satisfy callers; this keeps the test typed
correctly while still only providing the partial locale fields used.
🧹 Nitpick comments (1)
components/date-picker/__tests__/RangePicker.test.tsx (1)
234-236: 建议统一断言方法以提高可维护性此处使用
.textContent).toBe()进行断言，而 DatePicker 测试（第 514-516 行）使用toHaveTextContent()方法。建议统一使用toHaveTextContent()以保持测试风格一致。🔎 建议的重构
- expect(container.querySelector('.ant-picker-content thead')?.textContent).toBe( - '一二三四五六日', - ); + expect(container.querySelector('.ant-picker-content thead')).toHaveTextContent( + '一二三四五六日', + );
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
components/calendar/__tests__/index.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsxcomponents/date-picker/__tests__/RangePicker.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- components/calendar/tests/index.test.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Always use TypeScript with strict type checking
Never useanytype - define precise types instead
Use interfaces (not type aliases) for object structures
Export all public interface types
Prefer union types over enums, useas constfor constants
Use early returns to improve readability
Support tree shaking
Follow import order: React → dependencies → antd components → custom components → types → styles
Prefer antd built-in components over external dependencies
Pass all ESLint and TypeScript checks
No console errors or warnings
**/*.{ts,tsx}: Use TypeScript and React to develop, with function-based components and hooks instead of class components
Use early returns to improve code readability
Component names should use PascalCase
Property names should use camelCase
Use React.memo, useMemo, and useCallback appropriately to optimize performance
All components and functions must provide accurate type definitions; avoid usinganytype and use interfaces instead of type aliases for object structures
Component props should use interface definition with naming conventionComponentNameProps; define separate interfaces for component state likeComponentNameState
UseReact.ForwardRefRenderFunctionfor component ref types and explicitly define all callback function parameters and return values
Use generics appropriately to enhance type flexibility; use union types andas constinstead ofenum; rely on TypeScript's type inference and minimize type assertions
Internationalization: obtain locale configuration viauseLocalehook fromcomponents/locale/index.tsx; ensure new locale configurations have corresponding type definitions
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.tsx: Component props interfaces should be namedComponentNameProps
Component ref types should useReact.ForwardRefRenderFunction
Use functional components with hooks exclusively (no class components)
Apply performance optimizations with React.memo, useMemo, useCallback appropriately
Support server-side rendering
Components must support ref forwarding with structure including nativeElement, focus, and other methods
Use PascalCase for component names
Use camelCase for props with specific patterns:default+PropNamefor defaults,forceRenderfor force rendering,openinstead ofvisiblefor panel state,show+PropNamefor display toggles,PropName+ablefor capabilities,dataSourcefor data source,disabledfor disabled state,extrafor additional content,iconfor icons,triggerfor triggers,classNamefor CSS classes
Useon+EventNamepattern for event handlers (e.g.,onClick,onChange)
Useon+SubComponentName+EventNamepattern for sub-component events
Use complete names, never abbreviations in prop naming
Optimize for minimal re-renders
UseuseLocalehook fromcomponents/locale/index.tsx
Support accessibility (WCAG 2.1 AA)
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Never hardcode colors, sizes, or spacing values
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/__tests__/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/__tests__/**/*.test.{ts,tsx}: Write comprehensive tests using Jest and React Testing Library
Include snapshot tests for UI components
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use 2-space indentation
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Maintain cross-browser compatibility
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
**/*.tsx: Use @ant-design/cssinjs as the styling solution; place component styles instyle/directory with filenames followinggen[ComponentName]Stylenaming convention
Use CSS-in-JS and avoid hardcoded colors, sizes, and spacing values; base component styles on global and component-level design tokens
Components must support dark mode, different screen sizes, and RTL (right-to-left) reading direction; use CSS logical properties likemargin-inline-startinstead of directional properties
Use CSS transitions for simple animations and @rc-component/motion for complex animations; respect prefers-reduced-motion user preference
Follow WCAG 2.1 AA accessibility standards: ensure clear focus states, sufficient color contrast, avoid color-only information conveyance, support 200% page zoom, and avoid flickering animations
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Jest and React Testing Library for unit tests; place test files in tests directory with naming format
index.test.tsxorxxx.test.tsx; achieve 100% test coverage
Files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Internationalization: obtain locale configuration via `useLocale` hook from `components/locale/index.tsx`; ensure new locale configurations have corresponding type definitions
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/__tests__/**/*.test.{ts,tsx} : Write comprehensive tests using Jest and React Testing Library
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to components/**/*.tsx : Use `useLocale` hook from `components/locale/index.tsx`
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.{ts,tsx} : Internationalization: obtain locale configuration via `useLocale` hook from `components/locale/index.tsx`; ensure new locale configurations have corresponding type definitions
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2025-11-24T16:30:28.374Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T16:30:28.374Z
Learning: Applies to **/__tests__/**/*.test.{ts,tsx} : Include snapshot tests for UI components
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsxcomponents/date-picker/__tests__/DatePicker.test.tsx
📚 Learning: 2026-01-04T15:16:45.886Z
Learnt from: CR
Repo: ant-design/ant-design PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-04T15:16:45.886Z
Learning: Applies to **/*.test.{ts,tsx} : Use Jest and React Testing Library for unit tests; place test files in **tests** directory with naming format `index.test.tsx` or `xxx.test.tsx`; achieve 100% test coverage
Applied to files:
components/date-picker/__tests__/RangePicker.test.tsx
🧬 Code graph analysis (1)
components/date-picker/__tests__/DatePicker.test.tsx (1)
tests/__mocks__/rc-util/lib/Portal.tsx (1)
render(23-29)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
- GitHub Check: test lib/es module (es, 2/2)
- GitHub Check: test lib/es module (lib, 1/2)
- GitHub Check: test lib/es module (es, 1/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-node
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: build
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: lint
- GitHub Check: build preview
- GitHub Check: build
- GitHub Check: size
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
There was a problem hiding this comment.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
components/splitter/interface.ts (1)
28-31: 消除重复的类型定义。
SplitterSemanticDraggerClassNames(第 28-31 行) 与DraggerSemanticClassNames(第 18-21 行) 的结构完全相同，这违反了 DRY 原则，可能导致维护问题。建议移除
SplitterSemanticDraggerClassNames或使其引用DraggerSemanticClassNames。🔎 建议的重构方案
方案 1：移除重复定义（推荐）
-export interface SplitterSemanticDraggerClassNames { - default?: string; - active?: string; -} -如果代码库中有使用
SplitterSemanticDraggerClassNames的地方，需要将其替换为DraggerSemanticClassNames。方案 2：使用类型别名
-export interface SplitterSemanticDraggerClassNames { - default?: string; - active?: string; -} +export type SplitterSemanticDraggerClassNames = DraggerSemanticClassNames;components/pagination/demo/mini.tsx (1)
8-36: 确认此文件的更改与当前 PR 范围不符。此 PR 的目标是为 Calendar、DatePicker 和 RangePicker 支持部分 locale 覆盖。然而，components/pagination/demo/mini.tsx 的更改仅展示了分页大小变体（小/大尺寸），不包含任何 locale 相关的功能。
该文件应在单独的 PR 中提交，或如果确实需要展示 Pagination 的 locale 功能，应改用 components/pagination/design/demo/mini.tsx（已包含 locale 支持）作为参考，并将相应的 locale 覆盖功能添加到主 demo 文件中。
components/drawer/DrawerPanel.tsx (1)
78-79:drawerStyle已弃用但styles.content提示不准确。注释说明使用
styles.content替代drawerStyle，但DrawerSemanticStyles中定义的是section而非content。建议验证此处文档是否需要更正为styles.section。
🤖 Fix all issues with AI Agents
In @components/alert/__tests__/index.test.tsx:
- Line 13: The import for ConfigProvider uses an absolute path
'antd/es/config-provider' while other UI imports in this test (Button,
Popconfirm, Tooltip) use local/relative module imports; update the
ConfigProvider import to use the same relative import style as the other
components (replace the 'antd/es/config-provider' import statement for
ConfigProvider with the corresponding relative path used for the other
components in this file) so all component imports are consistent.
In @components/date-picker/generatePicker/interface.ts:
- Around line 19-33: 将 DatePickerSemanticClassNames 和 DatePickerSemanticStyles 从
type 别名改为 interface，以符合“使用 interface 而非 type 定义对象结构”的编码规范，保持原有可选属性（root, prefix,
input, suffix）和类型不变；同时替换 lines 19 和 27 的注释（当前的 "import type
{SemanticName}..."）为一条说明性注释，例如说明这些类型是本地定义以便与 rc-component/picker 内部解耦（引用
DatePickerSemanticClassNames 和 DatePickerSemanticStyles 以定位要修改的定义和注释）。
- Around line 35-55: PanelSemanticClassNames and PanelSemanticStyles are
declared as non-exported type aliases but are part of the public API; change
them to exported interfaces and export them so consumers can reference them.
Replace "type PanelSemanticClassNames = { ... }" with "export interface
PanelSemanticClassNames { ... }" and likewise change "type PanelSemanticStyles =
{ ... }" to "export interface PanelSemanticStyles { ... }", then update any
local references/imports that expect these names (e.g., usages around lines 60,
66, 119, 120) to use the exported interfaces.
In @components/dropdown/dropdown.tsx:
- Around line 46-67: The Dropdown semantic types are missing the `list` key
which Menu expects; update the `DropdownSemanticClassNames` type to include
`list?: string` and the `DropdownSemanticStyles` type to include `list?:
React.CSSProperties` so the Dropdown can pass list class/style through to Menu;
ensure these additions align with the existing `DropdownClassNamesType` and
`DropdownStylesType` usages (types: DropdownSemanticClassNames,
DropdownSemanticStyles) so consumers can fully control the Menu list styling.
In @components/float-button/__tests__/semantic.test.tsx:
- Around line 12-27: The test mixes types: variables are declared as
ButtonSemanticClassNames and ButtonSemanticStyles but later type assertions use
FloatButtonSemanticName, causing a mismatch; update the assertions to use the
matching types (e.g., use Required<ButtonSemanticClassNames> and the correct
styles type) or change the variable declarations to FloatButtonSemanticName if
that was intended, ensuring all references to ButtonSemanticClassNames,
ButtonSemanticStyles and FloatButtonSemanticName are consistent across the test
(adjust the assertions at the places currently using FloatButtonSemanticName to
match the actual declared types).
In @components/modal/Modal.tsx:
- Around line 272-274: The Dialog component does not support the focusTrap prop,
so remove the incorrect prop forwarding: delete the
focusTrap={mergedFocusable.trap} line in Modal.tsx where Dialog is rendered (the
code that currently passes mergedFocusable.focusTriggerAfterClose and
mergedFocusable.trap). Ensure useFocusable.ts still returns trap if needed
elsewhere and that OmitFocusType continues to exclude 'focusTrap' so no other
code forwards this nonexistent prop to Dialog.
In @components/pagination/demo/mini.md:
- Line 7: The sentence "Small and large size pagination." uses incorrect
compound-adjective hyphenation; update the text to use hyphens for the compound
adjective so it reads "Small-and-large-size pagination." Replace the existing
string in the demo markdown (the paragraph that currently contains "Small and
large size pagination.") with the hyphenated version to follow
compound-adjective rules.
In @components/space/index.tsx:
- Around line 23-37: Add the missing exported SemanticName type for the Space
component by defining and exporting a type alias named SemanticName that is the
intersection of the keys of SpaceSemanticClassNames and SpaceSemanticStyles
(i.e., export type SemanticName = keyof SpaceSemanticClassNames & keyof
SpaceSemanticStyles;), so the component's exported types match the pattern used
by other components like Tooltip and Slider.
In @components/spin/index.tsx:
- Around line 37-41: SpinStylesType currently repeats the wrapper property in
the third generic parameter; remove that duplication so the type uses only
SemanticStylesType<SpinProps, SpinSemanticStyles> (i.e., delete the third
generic argument that specifies wrapper?: React.CSSProperties) and rely on
wrapper being defined once in SpinSemanticStyles, keeping references to
SpinStylesType, SemanticStylesType, SpinSemanticStyles, and SpinProps to locate
and update the type alias.
In @components/splitter/interface.ts:
- Around line 4-14: Remove the unused exported type SplitterSemanticName (the
line defining "export type SplitterSemanticName = keyof
SplitterSemanticClassNames & keyof SplitterSemanticStyles;") since it is not
referenced anywhere; keep the two useful types SplitterSemanticClassNames and
SplitterSemanticStyles as-is, and if SplitterSemanticName was intentionally part
of the public API, instead mark it in documentation or reintroduce it where
consumers need it—otherwise delete the SplitterSemanticName declaration to avoid
dead/unused exports.
🧹 Nitpick comments (25)
components/mentions/index.tsx (1)
48-60: 建议使用interface而非type定义对象结构。根据编码规范，对象结构应使用
interface而非type别名。这样可以提高扩展性并保持代码一致性。🔎 建议的重构
-export type MentionSemanticClassNames = { +export interface MentionSemanticClassNames { root?: string; textarea?: string; popup?: string; suffix?: string; -}; +} -export type MentionSemanticStyles = { +export interface MentionSemanticStyles { root?: React.CSSProperties; textarea?: React.CSSProperties; popup?: React.CSSProperties; suffix?: React.CSSProperties; -}; +}基于编码规范。
components/qr-code/interface.ts (2)
25-28: 建议使用interface而非type定义对象结构。根据编码规范，对象结构应使用
interface定义而非类型别名。虽然功能上正确，但应遵循项目的一致性约定。🔎 建议的修复
-export type QRCodeSemanticClassNames = { +export interface QRCodeSemanticClassNames { root?: string; cover?: string; -}; +}
30-33: 建议使用interface而非type定义对象结构。与
QRCodeSemanticClassNames类似，此对象结构应使用interface定义以符合编码规范。🔎 建议的修复
-export type QRCodeSemanticStyles = { +export interface QRCodeSemanticStyles { root?: React.CSSProperties; cover?: React.CSSProperties; -}; +}components/masonry/Masonry.tsx (1)
33-41: 考虑使用interface替代type来定义对象结构。根据编码规范，对象结构应使用
interface而非type别名定义。虽然当前实现与其他类似组件（如 Menu、Anchor）的模式一致，但为符合规范，建议调整：🔎 建议的修改
-type MasonrySemanticClassNames = { +interface MasonrySemanticClassNames { root?: string; item?: string; -}; +} -type MasonrySemanticStyles = { +interface MasonrySemanticStyles { root?: React.CSSProperties; item?: React.CSSProperties; -}; +}components/input/Input.tsx (1)
33-47: 考虑使用interface替代type定义对象结构根据编码规范，对象结构应优先使用
interface而非type。interface提供更好的错误提示和声明合并能力。🔎 建议的修改
-export type InputSemanticClassNames = { +export interface InputSemanticClassNames { root?: string; prefix?: string; suffix?: string; input?: string; count?: string; -}; +} -export type InputSemanticStyles = { +export interface InputSemanticStyles { root?: React.CSSProperties; prefix?: React.CSSProperties; suffix?: React.CSSProperties; input?: React.CSSProperties; count?: React.CSSProperties; -}; +}components/card/CardMeta.tsx (1)
10-24: 建议对象结构使用 interface 而非 type。根据项目编码规范，对象结构应使用
interface而非type别名。虽然当前实现在功能上是正确的，但为了保持代码库的一致性，建议将CardMetaSemanticClassNames和CardMetaSemanticStyles改为接口定义。🔎 建议的重构方案
-export type CardMetaSemanticClassNames = { +export interface CardMetaSemanticClassNames { root?: string; section?: string; avatar?: string; title?: string; description?: string; -}; +} -export type CardMetaSemanticStyles = { +export interface CardMetaSemanticStyles { root?: React.CSSProperties; section?: React.CSSProperties; avatar?: React.CSSProperties; title?: React.CSSProperties; description?: React.CSSProperties; -}; +}基于编码规范的相关要求。
components/anchor/Anchor.tsx (1)
57-69: 建议使用interface代替type定义对象结构。根据编码规范，对象结构应使用
interface而非type别名。不过考虑到此模式与其他组件（如menu.tsx）保持一致，可以作为后续统一重构处理。🔎 建议的修改
-export type AnchorSemanticClassNames = { - root?: string; - item?: string; - itemTitle?: string; - indicator?: string; -}; - -export type AnchorSemanticStyles = { - root?: React.CSSProperties; - item?: React.CSSProperties; - itemTitle?: React.CSSProperties; - indicator?: React.CSSProperties; -}; +export interface AnchorSemanticClassNames { + root?: string; + item?: string; + itemTitle?: string; + indicator?: string; +} + +export interface AnchorSemanticStyles { + root?: React.CSSProperties; + item?: React.CSSProperties; + itemTitle?: React.CSSProperties; + indicator?: React.CSSProperties; +}components/skeleton/demo/_semantic.tsx (1)
8-8: 类型简化符合 Demo 文件规范。类型定义从
Required<SemanticClassNames<SemanticName>>简化为Record<SemanticName, string>，这符合 Ant Design demo 文件中推荐使用简化类型定义的最佳实践。当前实现中所有语义化键名（root、header、section、avatar、title、paragraph）在中英文 locale 中均已完整定义，不会造成运行时问题。💡 可选的类型安全增强建议
如需更严格的编译时类型检查，可考虑保留
Required<>包装以强制要求所有SemanticName键都必须存在：-const locales: Record<'cn' | 'en', Record<SemanticName, string>> = { +const locales: Record<'cn' | 'en', Required<Record<SemanticName, string>>> = {不过对于 demo 文件而言，当前的简化类型已足够清晰且实用。
components/result/index.tsx (1)
36-52: 考虑使用interface代替type根据编码规范，对象结构应优先使用
interface而非type别名。不过，如果这是为了与代码库中其他组件的语义类型模式保持一致，可以保留当前实现。🔎 建议的修改
-export type ResultSemanticClassNames = { +export interface ResultSemanticClassNames { root?: string; title?: string; subTitle?: string; body?: string; extra?: string; icon?: string; -}; +} -export type ResultSemanticStyles = { +export interface ResultSemanticStyles { root?: React.CSSProperties; title?: React.CSSProperties; subTitle?: React.CSSProperties; body?: React.CSSProperties; extra?: React.CSSProperties; icon?: React.CSSProperties; -}; +}components/steps/index.tsx (1)
30-66: 考虑语义类型定义的维护性新增的
StepsSemanticClassNames和StepsSemanticStyles类型与现有的StepsSemanticName联合类型在结构上存在重复（都包含相同的 10 个键）。这种设计提高了公共 API 的清晰度和类型推断能力，但也意味着在添加新的语义名称时需要在三处同步更新。虽然这是改善开发体验的常见模式，但建议在未来维护时注意保持这三个类型定义的一致性。
components/list/Item.tsx (1)
11-19: 考虑使用 interface 而非 type 定义对象结构根据项目编码规范，对象结构应优先使用
interface而非type定义。虽然当前实现功能正常，但为保持代码库一致性，建议改为：interface ListItemSemanticClassNames { actions?: string; extra?: string; } interface ListItemSemanticStyles { actions?: React.CSSProperties; extra?: React.CSSProperties; }基于编码规范，应使用 interface 定义对象结构。
components/transfer/index.tsx (1)
33-59: 语义化类型定义完整且正确
TransferSemanticClassNames和TransferSemanticStyles类型定义覆盖了组件的所有语义部分（root、section、header、title、body、list、item 等），结构清晰，所有字段均为可选，符合语义化覆盖的设计意图。不过，根据项目编码规范，建议对这些对象结构使用
interface而非type：🔎 建议使用 interface 的重构方案
-export type TransferSemanticClassNames = { +export interface TransferSemanticClassNames { root?: string; section?: string; header?: string; title?: string; body?: string; list?: string; item?: string; itemIcon?: string; itemContent?: string; footer?: string; actions?: string; -}; +} -export type TransferSemanticStyles = { +export interface TransferSemanticStyles { root?: React.CSSProperties; section?: React.CSSProperties; header?: React.CSSProperties; title?: React.CSSProperties; body?: React.CSSProperties; list?: React.CSSProperties; item?: React.CSSProperties; itemIcon?: React.CSSProperties; itemContent?: React.CSSProperties; footer?: React.CSSProperties; actions?: React.CSSProperties; -}; +}基于编码规范，对象结构应优先使用 interface。
components/color-picker/interface.ts (2)
57-59: 建议使用 interface 代替 type 定义对象结构。根据编码规范，对象结构应使用
interface而非type别名。虽然功能上等效，但遵循项目约定有助于保持代码一致性。🔎 建议的修改
-export type ColorPickerSemanticClassNames = { +export interface ColorPickerSemanticClassNames { root?: string; -}; +}基于编码规范。
61-63: 建议使用 interface 代替 type 定义对象结构。与
ColorPickerSemanticClassNames相同，此对象结构应使用interface定义以符合项目编码规范。🔎 建议的修改
-export type ColorPickerSemanticStyles = { +export interface ColorPickerSemanticStyles { root?: React.CSSProperties; -}; +}基于编码规范。
components/time-picker/index.tsx (1)
19-19: 建议清理注释掉的导入语句这些注释掉的 import 语句可能在迁移过程中有参考价值，但长期保留会让代码显得混乱。建议在确认迁移完成后删除这些注释，或者改为更清晰的说明性注释（如
// Replaced with component-specific semantic types）。Also applies to: 27-27
components/input/TextArea.tsx (1)
30-47: 建议使用interface替代type定义对象结构根据编码规范，对象结构应使用
interface而非type别名定义。当前实现使用了type，建议调整为interface以保持一致性。🔎 建议的修改
-export type TextAreaSemanticClassNames = { +export interface TextAreaSemanticClassNames { root?: string; textarea?: string; count?: string; -}; +} -export type TextAreaSemanticStyles = { +export interface TextAreaSemanticStyles { root?: React.CSSProperties; textarea?: React.CSSProperties; count?: React.CSSProperties; -}; +}components/button/Button.tsx (1)
34-44: 语义类型定义使用type别名而非interface根据编码规范，对象结构应优先使用
interface而非type别名。但考虑到此 PR 在多个组件中统一采用type定义语义类型（如 Tooltip、Space、Popover 等），为保持一致性，当前实现可以接受。🔎 可选：使用 interface 替代 type
-export type ButtonSemanticClassNames = { +export interface ButtonSemanticClassNames { root?: string; icon?: string; content?: string; -}; +} -export type ButtonSemanticStyles = { +export interface ButtonSemanticStyles { root?: React.CSSProperties; icon?: React.CSSProperties; content?: React.CSSProperties; -}; +}components/input/Search.tsx (1)
20-45: 根据编码规范，建议使用 interface 替代 type alias 定义对象结构。编码规范指出应使用
interface而非type alias来定义对象结构。当前InputSearchSemanticClassNames、InputSearchSemanticStyles、InputSearchClassNamesType和InputSearchStylesType均使用了type定义。🔎 建议的修改
-export type InputSearchSemanticClassNames = { +export interface InputSearchSemanticClassNames { root?: string; input?: string; prefix?: string; suffix?: string; count?: string; -}; +} -export type InputSearchSemanticStyles = { +export interface InputSearchSemanticStyles { root?: React.CSSProperties; input?: React.CSSProperties; prefix?: React.CSSProperties; suffix?: React.CSSProperties; count?: React.CSSProperties; -}; +}注：考虑到整个 PR 中其他组件也采用了相同的
type模式，此建议可延后处理或在后续统一重构。components/radio/interface.ts (1)
47-61: 建议补充 SemanticName 类型导出以保持一致性。其他组件（如 Slider、Pagination、Tree）均定义并导出了
SemanticName类型作为语义键的联合类型。Radio 组件可考虑添加相同模式以保持 API 一致性。🔎 建议的修改
+export type RadioSemanticName = keyof RadioSemanticClassNames & keyof RadioSemanticStyles; + export type RadioSemanticClassNames = { root?: string; icon?: string; label?: string; };components/tour/interface.ts (1)
22-52: Tour 语义类型定义正确，但存在冗余新增的
TourSemanticClassNames和TourSemanticStyles类型定义正确。但注意到TourSemanticName（第 9-20 行）仍然是手动定义的联合类型，而新增的ClassNames和Styles类型中重复了相同的键。为保持与其他组件的一致性（如 Menu、Skeleton、Tabs 等使用
keyof交集派生），建议将TourSemanticName更新为派生类型：-export type TourSemanticName = - | 'root' - | 'cover' - | 'mask' - | 'section' - | 'footer' - | 'actions' - | 'indicator' - | 'indicators' - | 'header' - | 'title' - | 'description'; +export type TourSemanticName = keyof TourSemanticClassNames & keyof TourSemanticStyles;这样可以避免重复定义，并确保类型始终保持同步。
components/float-button/__tests__/semantic.test.tsx (1)
7-8: 统一语义类型导入来源测试文件混合使用了来自 Button 和 FloatButton 的语义类型。由于
FloatButtonSemanticName仅是ButtonSemanticName的别名，且 FloatButton 未定义自己的FloatButtonSemanticClassNames和FloatButtonSemanticStyles，建议统一导入来源，以保证代码一致性：
- 若使用 FloatButton 的类型，应同时导入
FloatButtonSemanticName、FloatButtonClassNamesType和FloatButtonStylesType- 或直接使用 Button 的类型（
ButtonSemanticName、ButtonSemanticClassNames、ButtonSemanticStyles），移除 FloatButton 语义类型的导入components/descriptions/index.tsx (1)
37-53: 建议使用interface替代type定义对象结构。根据编码规范，对象结构应使用
interface而非type别名。🔎 建议的修改
-export type DescriptionsSemanticClassNames = { +export interface DescriptionsSemanticClassNames { root?: string; header?: string; title?: string; extra?: string; label?: string; content?: string; -}; +} -export type DescriptionsSemanticStyles = { +export interface DescriptionsSemanticStyles { root?: React.CSSProperties; header?: React.CSSProperties; title?: React.CSSProperties; extra?: React.CSSProperties; label?: React.CSSProperties; content?: React.CSSProperties; -}; +}components/drawer/DrawerPanel.tsx (1)
13-43: 语义化类型定义模式正确，建议使用interface。
DrawerSemanticClassNames和DrawerSemanticStyles的定义遵循了整个代码库的重构模式。与DescriptionsSemanticClassNames类似，建议使用interface替代type，以符合编码规范。🔎 建议的修改
-export type DrawerSemanticClassNames = { +export interface DrawerSemanticClassNames { root?: string; mask?: string; header?: string; // ... other properties -}; +} -export type DrawerSemanticStyles = { +export interface DrawerSemanticStyles { root?: React.CSSProperties; mask?: React.CSSProperties; // ... other properties -}; +}components/breadcrumb/Breadcrumb.tsx (1)
56-69: 建议使用interface替代type定义对象结构根据编码规范，对象结构应使用
interface而非type别名。BreadcrumbSemanticClassNames和BreadcrumbSemanticStyles都是对象结构。🔎 建议修改
-export type BreadcrumbSemanticClassNames = { - root?: string; - item?: string; - separator?: string; -}; - -export type BreadcrumbSemanticStyles = { - root?: React.CSSProperties; - item?: React.CSSProperties; - separator?: React.CSSProperties; -}; +export interface BreadcrumbSemanticClassNames { + root?: string; + item?: string; + separator?: string; +} + +export interface BreadcrumbSemanticStyles { + root?: React.CSSProperties; + item?: React.CSSProperties; + separator?: React.CSSProperties; +}components/alert/Alert.tsx (1)
25-47: 建议使用interface替代type定义对象结构与 Breadcrumb 组件一致，
AlertSemanticClassNames和AlertSemanticStyles是对象结构，根据编码规范应使用interface。🔎 建议修改
-export type AlertSemanticClassNames = { - root?: string; - icon?: string; - section?: string; - title?: string; - description?: string; - actions?: string; - close?: string; -}; - -export type AlertSemanticStyles = { - root?: React.CSSProperties; - icon?: React.CSSProperties; - section?: React.CSSProperties; - title?: React.CSSProperties; - description?: React.CSSProperties; - actions?: React.CSSProperties; - close?: React.CSSProperties; -}; +export interface AlertSemanticClassNames { + root?: string; + icon?: string; + section?: string; + title?: string; + description?: string; + actions?: string; + close?: string; +} + +export interface AlertSemanticStyles { + root?: React.CSSProperties; + icon?: React.CSSProperties; + section?: React.CSSProperties; + title?: React.CSSProperties; + description?: React.CSSProperties; + actions?: React.CSSProperties; + close?: React.CSSProperties; +}
| import Popconfirm from '../../popconfirm'; | ||
| import Tooltip from '../../tooltip'; | ||
| import type { AlertProps, AlertRef } from '../Alert'; | ||
| import ConfigProvider from 'antd/es/config-provider'; |
There was a problem hiding this comment.
导入路径不一致
此处使用了 antd/es/config-provider 的绝对导入路径，而文件中其他导入（如第 9-11 行的 Button、Popconfirm、Tooltip）使用的是相对路径 ../../component-name。建议保持一致性。
🔎 建议的修复
-import ConfigProvider from 'antd/es/config-provider';
+import ConfigProvider from '../../config-provider';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import ConfigProvider from 'antd/es/config-provider'; | |
| import ConfigProvider from '../../config-provider'; |
🤖 Prompt for AI Agents
In @components/alert/__tests__/index.test.tsx at line 13, The import for
ConfigProvider uses an absolute path 'antd/es/config-provider' while other UI
imports in this test (Button, Popconfirm, Tooltip) use local/relative module
imports; update the ConfigProvider import to use the same relative import style
as the other components (replace the 'antd/es/config-provider' import statement
for ConfigProvider with the corresponding relative path used for the other
components in this file) so all component imports are consistent.
| // import type {SemanticName} from "@rc-component/picker/interface" | ||
| export type DatePickerSemanticClassNames = { | ||
| root?: string; | ||
| prefix?: string; | ||
| input?: string; | ||
| suffix?: string; | ||
| }; | ||
|
|
||
| // import type {SemanticName} from "@rc-component/picker/interface" | ||
| export type DatePickerSemanticStyles = { | ||
| root?: React.CSSProperties; | ||
| prefix?: React.CSSProperties; | ||
| input?: React.CSSProperties; | ||
| suffix?: React.CSSProperties; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
建议使用 interface 而非 type 定义对象结构。
根据编码规范："Use interfaces (not type aliases) for object structures"，DatePickerSemanticClassNames 和 DatePickerSemanticStyles 应该使用 interface 而非 type 来定义。
此外，lines 19 和 27 的注释提到 import type {SemanticName} 可能会造成混淆，因为实际上是在本地定义而非导入。建议改为说明为何选择本地定义（例如："Locally defined to decouple from rc-component/picker internals"）。
🔎 建议的重构方案
-// import type {SemanticName} from "@rc-component/picker/interface"
-export type DatePickerSemanticClassNames = {
+// Locally defined to decouple from rc-component/picker internals
+export interface DatePickerSemanticClassNames {
root?: string;
prefix?: string;
input?: string;
suffix?: string;
-};
+}
-// import type {SemanticName} from "@rc-component/picker/interface"
-export type DatePickerSemanticStyles = {
+// Locally defined to decouple from rc-component/picker internals
+export interface DatePickerSemanticStyles {
root?: React.CSSProperties;
prefix?: React.CSSProperties;
input?: React.CSSProperties;
suffix?: React.CSSProperties;
-};
+}基于编码规范的要求。
🤖 Prompt for AI Agents
In @components/date-picker/generatePicker/interface.ts around lines 19 - 33, 将
DatePickerSemanticClassNames 和 DatePickerSemanticStyles 从 type 别名改为
interface，以符合“使用 interface 而非 type 定义对象结构”的编码规范，保持原有可选属性（root, prefix, input,
suffix）和类型不变；同时替换 lines 19 和 27 的注释（当前的 "import type
{SemanticName}..."）为一条说明性注释，例如说明这些类型是本地定义以便与 rc-component/picker 内部解耦（引用
DatePickerSemanticClassNames 和 DatePickerSemanticStyles 以定位要修改的定义和注释）。
| // import type {PanelSemanticName} from "@rc-component/picker/interface" | ||
| type PanelSemanticClassNames = { | ||
| root?: string; | ||
| header?: string; | ||
| body?: string; | ||
| content?: string; | ||
| item?: string; | ||
| footer?: string; | ||
| container?: string; | ||
| }; | ||
|
|
||
| // import type {PanelSemanticName} from "@rc-component/picker/interface" | ||
| type PanelSemanticStyles = { | ||
| root?: React.CSSProperties; | ||
| header?: React.CSSProperties; | ||
| body?: React.CSSProperties; | ||
| content?: React.CSSProperties; | ||
| item?: React.CSSProperties; | ||
| footer?: React.CSSProperties; | ||
| container?: React.CSSProperties; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
建议导出 Panel 语义化类型并使用 interface。
PanelSemanticClassNames 和 PanelSemanticStyles 虽然未直接导出，但它们是公共 API 的一部分（在 lines 60, 66, 119, 120 中使用）。根据编码规范："Export all public interface types"，这些类型应该被导出，以便使用者能够显式引用它们来构造类型正确的对象。
同时，这些对象结构应该使用 interface 而非 type 定义。
🔎 建议的重构方案
-// import type {PanelSemanticName} from "@rc-component/picker/interface"
-type PanelSemanticClassNames = {
+// Locally defined to decouple from rc-component/picker internals
+export interface PanelSemanticClassNames {
root?: string;
header?: string;
body?: string;
content?: string;
item?: string;
footer?: string;
container?: string;
-};
+}
-// import type {PanelSemanticName} from "@rc-component/picker/interface"
-type PanelSemanticStyles = {
+// Locally defined to decouple from rc-component/picker internals
+export interface PanelSemanticStyles {
root?: React.CSSProperties;
header?: React.CSSProperties;
body?: React.CSSProperties;
content?: React.CSSProperties;
item?: React.CSSProperties;
footer?: React.CSSProperties;
container?: React.CSSProperties;
-};
+}基于编码规范的要求。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // import type {PanelSemanticName} from "@rc-component/picker/interface" | |
| type PanelSemanticClassNames = { | |
| root?: string; | |
| header?: string; | |
| body?: string; | |
| content?: string; | |
| item?: string; | |
| footer?: string; | |
| container?: string; | |
| }; | |
| // import type {PanelSemanticName} from "@rc-component/picker/interface" | |
| type PanelSemanticStyles = { | |
| root?: React.CSSProperties; | |
| header?: React.CSSProperties; | |
| body?: React.CSSProperties; | |
| content?: React.CSSProperties; | |
| item?: React.CSSProperties; | |
| footer?: React.CSSProperties; | |
| container?: React.CSSProperties; | |
| }; | |
| // Locally defined to decouple from rc-component/picker internals | |
| export interface PanelSemanticClassNames { | |
| root?: string; | |
| header?: string; | |
| body?: string; | |
| content?: string; | |
| item?: string; | |
| footer?: string; | |
| container?: string; | |
| } | |
| // Locally defined to decouple from rc-component/picker internals | |
| export interface PanelSemanticStyles { | |
| root?: React.CSSProperties; | |
| header?: React.CSSProperties; | |
| body?: React.CSSProperties; | |
| content?: React.CSSProperties; | |
| item?: React.CSSProperties; | |
| footer?: React.CSSProperties; | |
| container?: React.CSSProperties; | |
| } |
🤖 Prompt for AI Agents
In @components/date-picker/generatePicker/interface.ts around lines 35 - 55,
PanelSemanticClassNames and PanelSemanticStyles are declared as non-exported
type aliases but are part of the public API; change them to exported interfaces
and export them so consumers can reference them. Replace "type
PanelSemanticClassNames = { ... }" with "export interface
PanelSemanticClassNames { ... }" and likewise change "type PanelSemanticStyles =
{ ... }" to "export interface PanelSemanticStyles { ... }", then update any
local references/imports that expect these names (e.g., usages around lines 60,
66, 119, 120) to use the exported interfaces.
| export type DropdownSemanticClassNames = { | ||
| root?: string; | ||
| item?: string; | ||
| itemTitle?: string; | ||
| itemIcon?: string; | ||
| itemContent?: string; | ||
| }; | ||
|
|
||
| export type DropdownSemanticStyles = { | ||
| root?: React.CSSProperties; | ||
| item?: React.CSSProperties; | ||
| itemTitle?: React.CSSProperties; | ||
| itemIcon?: React.CSSProperties; | ||
| itemContent?: React.CSSProperties; | ||
| }; | ||
|
|
||
| export type DropdownClassNamesType = SemanticClassNamesType< | ||
| DropdownProps, | ||
| DropdownSemanticClassNames | ||
| >; | ||
|
|
||
| export type DropdownStylesType = SemanticStylesType<DropdownProps, DropdownSemanticStyles>; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for Menu component's semantic type definitions
find . -type f -name "*.tsx" -o -name "*.ts" | xargs grep -l "MenuSemanticClassNames\|MenuSemanticStyles" | head -5Repository: ant-design/ant-design
Length of output: 125
🏁 Script executed:
# Look for Menu component definition and its semantic types
find components/menu -type f -name "*.tsx" -o -name "*.ts" | xargs grep -l "SemanticClassNames\|SemanticStyles"Repository: ant-design/ant-design
Length of output: 121
🏁 Script executed:
# Check the dropdown.tsx file to see how semantic keys are used with Menu
sed -n '280,300p' components/dropdown/dropdown.tsxRepository: ant-design/ant-design
Length of output: 581
🏁 Script executed:
# Find Menu component props definition
rg "export interface MenuProps|export type MenuProps" components/menu -A 20 | head -50Repository: ant-design/ant-design
Length of output: 1126
🏁 Script executed:
# Find MenuClassNamesType and MenuStylesType definitions
rg "type MenuClassNamesType|type MenuStylesType" components/menu -B 5 -A 10Repository: ant-design/ant-design
Length of output: 1160
🏁 Script executed:
# Look for MenuSemanticClassNames in Menu component
rg "MenuSemanticClassNames|MenuSemanticStyles" components/menu -B 2 -A 10Repository: ant-design/ant-design
Length of output: 5275
🏁 Script executed:
# Check the menu.tsx file structure around type definitions
head -100 components/menu/menu.tsx | tail -50Repository: ant-design/ant-design
Length of output: 1314
补充缺失的语义键定义。
DropdownSemanticClassNames 和 DropdownSemanticStyles 缺少 list 语义键，而 Menu 组件的类型定义中包含此键。由于下拉菜单会将这些语义键传递给 Menu 组件，缺少 list 会导致开发者无法通过 Dropdown 的语义接口完整控制 Menu 的列表样式。
应在两个语义类型定义中各添加一个 list 字段以保持与 Menu 组件的完整兼容性：
建议的修改
export type DropdownSemanticClassNames = {
root?: string;
+ list?: string;
item?: string;
itemTitle?: string;
itemIcon?: string;
itemContent?: string;
};
export type DropdownSemanticStyles = {
root?: React.CSSProperties;
+ list?: React.CSSProperties;
item?: React.CSSProperties;
itemTitle?: React.CSSProperties;
itemIcon?: React.CSSProperties;
itemContent?: React.CSSProperties;
};🤖 Prompt for AI Agents
In @components/dropdown/dropdown.tsx around lines 46 - 67, The Dropdown semantic
types are missing the `list` key which Menu expects; update the
`DropdownSemanticClassNames` type to include `list?: string` and the
`DropdownSemanticStyles` type to include `list?: React.CSSProperties` so the
Dropdown can pass list class/style through to Menu; ensure these additions align
with the existing `DropdownClassNamesType` and `DropdownStylesType` usages
(types: DropdownSemanticClassNames, DropdownSemanticStyles) so consumers can
fully control the Menu list styling.
| const initialClassNames: ButtonSemanticClassNames = { | ||
| root: 'custom-root', | ||
| icon: 'custom-icon', | ||
| content: 'custom-content', | ||
| }; | ||
| const updatedClassNames: SemanticClassNames<FloatButtonSemanticName> = { | ||
| const updatedClassNames: ButtonSemanticClassNames = { | ||
| root: 'custom-root-2', | ||
| icon: 'custom-icon-2', | ||
| content: 'custom-content-2', | ||
| }; | ||
| const styles: Record<FloatButtonSemanticName, Record<string, any>> = { | ||
| const styles: ButtonSemanticStyles = { | ||
| root: { color: 'rgb(255, 0, 0)' }, | ||
| icon: { color: 'rgb(0, 0, 255)' }, | ||
| content: { color: 'rgb(0, 255, 0)' }, | ||
| }; | ||
| const classNamesTargets: Required<SemanticClassNames<FloatButtonSemanticName>> = { | ||
| const classNamesTargets: Required<ButtonSemanticClassNames> = { |
There was a problem hiding this comment.
类型使用与断言不匹配
在 Lines 12-27 中使用 ButtonSemanticClassNames 和 ButtonSemanticStyles 定义变量类型，但在 Lines 36 和 46 的类型断言中仍使用 FloatButtonSemanticName。这种不一致可能导致类型安全问题。
建议统一类型引用，确保类型断言与实际使用的类型定义匹配。
🤖 Prompt for AI Agents
In @components/float-button/__tests__/semantic.test.tsx around lines 12 - 27,
The test mixes types: variables are declared as ButtonSemanticClassNames and
ButtonSemanticStyles but later type assertions use FloatButtonSemanticName,
causing a mismatch; update the assertions to use the matching types (e.g., use
Required<ButtonSemanticClassNames> and the correct styles type) or change the
variable declarations to FloatButtonSemanticName if that was intended, ensuring
all references to ButtonSemanticClassNames, ButtonSemanticStyles and
FloatButtonSemanticName are consistent across the test (adjust the assertions at
the places currently using FloatButtonSemanticName to match the actual declared
types).
| // Focusable | ||
| focusTriggerAfterClose={mergedFocusable.focusTriggerAfterClose} | ||
| focusTrap={mergedFocusable.trap} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cd /tmp && find . -type f -name "*.tsx" -o -name "*.ts" 2>/dev/null | head -1 && echo "Repository available"Repository: ant-design/ant-design
Length of output: 186
🏁 Script executed:
# 检查 Modal.tsx 中的代码上下文
head -300 components/modal/Modal.tsx | tail -50Repository: ant-design/ant-design
Length of output: 1920
🏁 Script executed:
# 查找 Dialog 组件的导入和 focusTrap 使用
rg -n 'focusTrap|Dialog' components/modal/Modal.tsx | head -20Repository: ant-design/ant-design
Length of output: 198
🏁 Script executed:
# 检查 package.json 中 @rc-component/dialog 的版本
cat package.json | grep -A2 -B2 "@rc-component/dialog"Repository: ant-design/ant-design
Length of output: 264
🏁 Script executed:
# 在代码库中搜索其他 focusTrap 的使用
rg -n 'focusTrap' components/ --type tsxRepository: ant-design/ant-design
Length of output: 92
🏁 Script executed:
# 尝试使用更宽泛的搜索 focusTrap，不指定文件类型
rg -n 'focusTrap' components/Repository: ant-design/ant-design
Length of output: 337
🏁 Script executed:
# 搜索 mergedFocusable 的定义
rg -n 'mergedFocusable' components/modal/Modal.tsx -B5 -A5Repository: ant-design/ant-design
Length of output: 1398
🏁 Script executed:
# 搜索 Dialog 的类型定义和 props
rg -n '@rc-component/dialog|DialogProps' components/ --max-count=20Repository: ant-design/ant-design
Length of output: 1756
🌐 Web query:
rc-component/dialog focusTrap property documentation
💡 Result:
There is no documented focusTrap prop for rc-component/dialog. The official API/README for @rc-component/dialog lists focusTriggerAfterClose and related props but does not expose a focusTrap option — focus-trapping is handled internally (no public focusTrap prop). [1][2]
Sources:
- @rc-component/dialog README / API. [1]
- rc-dialog (react-component) docs page (API list). [2]
🏁 Script executed:
# 查看 useFocusable.ts 的完整内容，理解 focusTrap 的定义
cat components/drawer/useFocusable.tsRepository: ant-design/ant-design
Length of output: 740
🏁 Script executed:
# 搜索 useFocusable 的定义位置
fd useFocusableRepository: ant-design/ant-design
Length of output: 98
Dialog 组件不支持 focusTrap 属性，需要移除此传递。
根据 @rc-component/dialog（版本 ~1.8.0）的官方文档，该组件的公开 API 中不存在 focusTrap 属性。代码在第 274 行传递 focusTrap={mergedFocusable.trap} 给 Dialog，但 Dialog 不会识别或处理此属性。
检查 components/drawer/useFocusable.ts 发现，返回的对象包含 trap 属性，而 OmitFocusType 明确列出 'focusTrap' 应被忽略，这表明该属性不应传递给 Dialog。建议移除此行或检查是否有其他正确的属性名称应该被使用。
🤖 Prompt for AI Agents
In @components/modal/Modal.tsx around lines 272 - 274, The Dialog component does
not support the focusTrap prop, so remove the incorrect prop forwarding: delete
the focusTrap={mergedFocusable.trap} line in Modal.tsx where Dialog is rendered
(the code that currently passes mergedFocusable.focusTriggerAfterClose and
mergedFocusable.trap). Ensure useFocusable.ts still returns trap if needed
elsewhere and that OmitFocusType continues to exclude 'focusTrap' so no other
code forwards this nonexistent prop to Dialog.
| margin-bottom: 24px; | ||
| } | ||
| </style> | ||
| Small and large size pagination. |
There was a problem hiding this comment.
修复复合形容词的连字符用法
根据英语语法规范，作为复合形容词修饰名词时应使用连字符连接。建议修改为 "Small-and-large-size pagination."
🔎 建议的修复
-Small and large size pagination.
+Small-and-large-size pagination.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Small and large size pagination. | |
| Small-and-large-size pagination. |
🧰 Tools
🪛 LanguageTool
[grammar] ~7-~7: Use a hyphen to join words.
Context: ...小尺寸和大尺寸的分页控件。 ## en-US Small and large size pagination.
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
In @components/pagination/demo/mini.md at line 7, The sentence "Small and large
size pagination." uses incorrect compound-adjective hyphenation; update the text
to use hyphens for the compound adjective so it reads "Small-and-large-size
pagination." Replace the existing string in the demo markdown (the paragraph
that currently contains "Small and large size pagination.") with the hyphenated
version to follow compound-adjective rules.
| export type SpaceSemanticClassNames = { | ||
| root?: string; | ||
| item?: string; | ||
| separator?: string; | ||
| }; | ||
|
|
||
| export type SpaceSemanticStyles = { | ||
| root?: React.CSSProperties; | ||
| item?: React.CSSProperties; | ||
| separator?: React.CSSProperties; | ||
| }; | ||
|
|
||
| export type SpaceClassNamesType = SemanticClassNamesType<SpaceProps, SemanticName>; | ||
| export type SpaceClassNamesType = SemanticClassNamesType<SpaceProps, SpaceSemanticClassNames>; | ||
|
|
||
| export type SpaceStylesType = SemanticStylesType<SpaceProps, SemanticName>; | ||
| export type SpaceStylesType = SemanticStylesType<SpaceProps, SpaceSemanticStyles>; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for SemanticName exports across the components directory
rg "export type SemanticName" --type ts --type tsx components/ | head -30Repository: ant-design/ant-design
Length of output: 92
🏁 Script executed:
# Also check the Space component file specifically
cat -n components/space/index.tsx | head -50Repository: ant-design/ant-design
Length of output: 2172
🏁 Script executed:
# Check if SemanticName is used elsewhere or if there's a pattern
rg "SemanticName" --type ts --type tsx components/ | head -40Repository: ant-design/ant-design
Length of output: 92
🏁 Script executed:
# Search for SemanticName exports without file type constraints
rg "export type SemanticName" components/ | head -20Repository: ant-design/ant-design
Length of output: 2329
🏁 Script executed:
# Check a few specific component files for comparison
find components -name "index.ts" -o -name "index.tsx" | head -10 | xargs grep -l "SemanticName"Repository: ant-design/ant-design
Length of output: 49
🏁 Script executed:
# Look at Button component as reference
head -80 components/button/index.tsx | tail -50Repository: ant-design/ant-design
Length of output: 332
添加缺失的 SemanticName 类型导出
Space 组件未导出 SemanticName 类型，但其他 20+ 组件（如 Tooltip、Slider、Menu、Anchor 等）都遵循此模式。为保持 API 一致性，应在导出中添加：
export type SemanticName = keyof SpaceSemanticClassNames & keyof SpaceSemanticStyles;🤖 Prompt for AI Agents
In @components/space/index.tsx around lines 23 - 37, Add the missing exported
SemanticName type for the Space component by defining and exporting a type alias
named SemanticName that is the intersection of the keys of
SpaceSemanticClassNames and SpaceSemanticStyles (i.e., export type SemanticName
= keyof SpaceSemanticClassNames & keyof SpaceSemanticStyles;), so the
component's exported types match the pattern used by other components like
Tooltip and Slider.
| export type SpinStylesType = SemanticStylesType< | ||
| SpinProps, | ||
| SemanticName, | ||
| { | ||
| wrapper?: React.CSSProperties; | ||
| } | ||
| SpinSemanticStyles, | ||
| { wrapper?: React.CSSProperties } | ||
| >; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# 查看 components/spin/index.tsx 文件的完整内容
cat components/spin/index.tsxRepository: ant-design/ant-design
Length of output: 186
🏁 Script executed:
# 如果文件太长，先查看行数
wc -l components/spin/index.tsxRepository: ant-design/ant-design
Length of output: 94
🏁 Script executed:
# 读取 spin/index.tsx 的第 20-50 行
sed -n '20,50p' components/spin/index.tsxRepository: ant-design/ant-design
Length of output: 826
🏁 Script executed:
# 查找 SemanticStylesType 的定义
rg -n 'type SemanticStylesType' --type=tsx --type=tsRepository: ant-design/ant-design
Length of output: 92
🏁 Script executed:
# 检查其他组件中 SemanticStylesType 的使用情况
rg -B 2 -A 3 'SemanticStylesType<' components/ --type=tsx | head -100Repository: ant-design/ant-design
Length of output: 92
🏁 Script executed:
# 查找 SemanticStylesType 的定义
rg -n 'type SemanticStylesType' components/Repository: ant-design/ant-design
Length of output: 142
🏁 Script executed:
# 检查其他组件中 SemanticStylesType 的使用情况，不带文件类型标志
rg -B 2 -A 3 'SemanticStylesType<' components/ | head -150Repository: ant-design/ant-design
Length of output: 8195
🏁 Script executed:
# 查看 SemanticStylesType 的完整定义
sed -n '18,40p' components/_util/hooks/useMergeSemantic.tsRepository: ant-design/ant-design
Length of output: 1088
🏁 Script executed:
# 再次查看 spin/index.tsx 的第 28-41 行完整内容
sed -n '28,41p' components/spin/index.tsxRepository: ant-design/ant-design
Length of output: 441
🏁 Script executed:
# 检查所有组件的 SemanticStyles 定义中是否有 wrapper
rg -B 5 'wrapper\?' components/ | grep -A 5 'SemanticStyles'Repository: ant-design/ant-design
Length of output: 1051
🏁 Script executed:
# 检查所有使用 SemanticStylesType 的第三参数中是否有 wrapper
rg 'SemanticStylesType<' -A 4 components/ | grep -B 3 'wrapper'Repository: ant-design/ant-design
Length of output: 288
🏁 Script executed:
# 查看 Table 的完整定义作为对比
rg -B 2 -A 8 'export type TableStylesType' components/table/InternalTable.tsxRepository: ant-design/ant-design
Length of output: 321
🏁 Script executed:
# 查看 Spin 组件如何使用 styles 来确认 wrapper 的真实用途
rg -n 'wrapper' components/spin/Spin.tsx | head -20Repository: ant-design/ant-design
Length of output: 129
🏁 Script executed:
# 在 spin/index.tsx 中查找 wrapper 的使用
rg -n 'wrapper' components/spin/index.tsxRepository: ant-design/ant-design
Length of output: 392
🏁 Script executed:
# 查看完整的 spin/index.tsx 类型导出部分（第 15-50 行）
sed -n '15,50p' components/spin/index.tsxRepository: ant-design/ant-design
Length of output: 980
从 SpinStylesType 的第三参数中移除重复的 wrapper 属性定义。
wrapper?: React.CSSProperties 已在 SpinSemanticStyles 中定义（第 29 行），无需在 SemanticStylesType 的第三参数中重复定义（第 40 行）。第三参数应仅用于定义 SemanticStyles 中不存在的额外嵌套属性，而不是重复已有属性。建议将第 37-41 行改为：
export type SpinStylesType = SemanticStylesType<
SpinProps,
SpinSemanticStyles
>;🤖 Prompt for AI Agents
In @components/spin/index.tsx around lines 37 - 41, SpinStylesType currently
repeats the wrapper property in the third generic parameter; remove that
duplication so the type uses only SemanticStylesType<SpinProps,
SpinSemanticStyles> (i.e., delete the third generic argument that specifies
wrapper?: React.CSSProperties) and rely on wrapper being defined once in
SpinSemanticStyles, keeping references to SpinStylesType, SemanticStylesType,
SpinSemanticStyles, and SpinProps to locate and update the type alias.
| export type SplitterSemanticName = keyof SplitterSemanticClassNames & keyof SplitterSemanticStyles; | ||
|
|
||
| export type SplitterSemanticClassNames = { | ||
| root?: string; | ||
| panel?: string; | ||
| }; | ||
|
|
||
| export type SplitterSemanticStyles = { | ||
| root?: React.CSSProperties; | ||
| panel?: React.CSSProperties; | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
rg -nP '\bSplitterSemanticName\b' --type=ts --type=tsx -C2Repository: ant-design/ant-design
Length of output: 92
🏁 Script executed:
rg 'SplitterSemanticName' -C2Repository: ant-design/ant-design
Length of output: 433
🏁 Script executed:
rg 'SplitterSemanticClassNames|SplitterSemanticStyles' -C2Repository: ant-design/ant-design
Length of output: 1460
🏁 Script executed:
cat -n components/splitter/interface.tsRepository: ant-design/ant-design
Length of output: 4431
SplitterSemanticName 未被使用，建议移除。
虽然 SplitterSemanticClassNames 和 SplitterSemanticStyles 的定义清晰且正被使用，但 SplitterSemanticName 仅在其定义处出现，在整个代码库中未被引用。如果这不是有意为外部消费者保留的公共 API，应该将其移除。
验证结果
搜索整个代码库确认 SplitterSemanticName 的唯一出现是在 components/splitter/interface.ts 第 4 行的定义，无任何实际使用。
🤖 Prompt for AI Agents
In @components/splitter/interface.ts around lines 4 - 14, Remove the unused
exported type SplitterSemanticName (the line defining "export type
SplitterSemanticName = keyof SplitterSemanticClassNames & keyof
SplitterSemanticStyles;") since it is not referenced anywhere; keep the two
useful types SplitterSemanticClassNames and SplitterSemanticStyles as-is, and if
SplitterSemanticName was intentionally part of the public API, instead mark it
in documentation or reintroduce it where consumers need it—otherwise delete the
SplitterSemanticName declaration to avoid dead/unused exports.
|
操作出问题了 |
| steps: | ||
| - uses: actions/checkout@v6 | ||
| - uses: utooland/setup-utoo@v1 | ||
| - uses: oven-sh/setup-bun@v2 |
汗……我看 branch 名字叫 |
🤔 这个变动的性质是？
💡 需求背景和解决方案
📝 更新日志
locale不完全时，会使用当前locale缺省补齐剩余内容。