-
-
Notifications
You must be signed in to change notification settings - Fork 934
refactor: migrate rc-* to @rc-component/* and classnames to clsx #1448
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthrough将项目中大量对外/internal 依赖从旧的 Changes
Estimated code review effort🎯 3 (中等复杂度) | ⏱️ ~25 分钟 需要额外关注:
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
|
Waiting |
Summary of ChangesHello @yoyo837, 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 primarily focuses on a significant refactoring effort to modernize the project's dependency management. By migrating from legacy Highlights
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
|
|
All alerts resolved. Learn more about Socket for GitHub. This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
This pull request is a large refactoring effort to migrate rc-* dependencies to @rc-component/* and replace classnames with clsx for bundle size optimization. The changes are extensive and mostly correct. However, I've identified a few issues that need attention. There's a critical inconsistency where the classNames prop was renamed to clsx in type definitions and documentation but not in the component implementations, which will break the API for TypeScript users. Additionally, there's an incorrect type import that will likely cause a build failure. I've also pointed out several instances of redundant clsx usage that could be simplified for better readability and minor performance gains.
| // ======================== Render ======================== | ||
| return ( | ||
| <div className={classnames(styles.container)} ref={containerRef}> | ||
| <div className={clsx(styles.container)} ref={containerRef}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When there's only a single class name, you can use it directly without wrapping it in clsx. This improves readability and avoids an unnecessary function call. This also applies to styles.colWrap on line 154 and styles.listWrap on line 158.
| <div className={clsx(styles.container)} ref={containerRef}> | |
| <div className={styles.container} ref={containerRef}> |
| > | ||
| <li | ||
| className={classnames(styles.listItem)} | ||
| className={clsx(styles.listItem)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| </Flex> | ||
| {tag && ( | ||
| <Tag variant="filled" className={classnames(styles.tag)} color={getTagColor(tag)}> | ||
| <Tag variant="filled" className={clsx(styles.tag)} color={getTagColor(tag)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| <div className={styles.chain_item} key={item.label}> | ||
| <div> | ||
| <div className={classnames(styles.chain_item_icon)}> | ||
| <div className={clsx(styles.chain_item_icon)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| <List | ||
| itemLayout="horizontal" | ||
| className={classnames(styles.container)} | ||
| className={clsx(styles.container)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| const info = getInfo(item); | ||
| return ( | ||
| <List.Item className={classnames(styles.item)}> | ||
| <List.Item className={clsx(styles.item)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| <Link to={info?.href}> | ||
| <List.Item.Meta | ||
| className={classnames(styles.itemMeta)} | ||
| className={clsx(styles.itemMeta)} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| }} | ||
| > | ||
| <div className={classNames(styles.holder)}> | ||
| <div className={clsx(styles.holder)}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/x/components/actions/ActionsFeedback.tsx (1)
131-139:disliked语义 class 条件疑似写错,导致样式状态不生效这里的条件目前是:
[`${classNames.disliked}`]: classNames.disliked && value === 'like',而对应的样式判断是:
style={{ ...styles.dislike, ...(value === 'dislike' ? styles.disliked : {}) }}可以看出语义上「已点踩」状态应该在
value === 'dislike'时生效;现在写成value === 'like',会导致classNames.disliked永远不会在点踩激活时被应用(如果这是从旧代码沿袭下来的,那是一个沿用的 bug,正好可以趁本次重构一并修掉)。建议改为:
- [`${classNames.disliked}`]: classNames.disliked && value === 'like', + [`${classNames.disliked}`]: classNames.disliked && value === 'dislike',这样与
styles.disliked以及-dislike-active的逻辑就一致了。packages/x/components/bubble/interface.ts (1)
204-228: 严重错误:RoleProps类型中'clsx'应为'classNames'。
BubbleProps接口包含classNames属性,Pick应引用'classNames'而非'clsx'。当前写法会导致 TypeScript 错误,因为BubbleProps中不存在clsx属性。export type RoleProps = Pick< BubbleProps<any>, | 'typing' | 'variant' | 'shape' | 'placement' | 'rootClassName' - | 'clsx' + | 'classNames' | 'className' | 'styles' | 'style'
🧹 Nitpick comments (9)
packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx (1)
292-301: Codesandbox 依赖迁移到 @rc-component/util,建议确保有安全兜底在 codesandbox 的
package.json里显式增加@rc-component/util依赖,方向上和 PR 目标(从 rc-* 迁移到 @rc-component/*)一致。不过这里直接读取pkgDependencyList['@rc-component/util'],如果站点配置缺这个 key,会传入undefined:'@rc-component/util': pkgDependencyList['@rc-component/util'],建议至少确认站点侧已同步配置该依赖;如果希望更健壮,可以考虑加一个版本兜底,例如:
- '@rc-component/util': pkgDependencyList['@rc-component/util'], + '@rc-component/util': pkgDependencyList['@rc-component/util'] ?? 'latest',以避免预览环境在配置缺失时安装失败。
packages/x/components/actions/ActionsFeedback.tsx (1)
110-119: like 图标的 clsx 使用正确,可考虑略微简化写法(可选)当前逻辑在
value === 'like'时同时应用语义类classNames.liked和状态类${feedbackCls}-item-like-active,与上方style中styles.liked的判断保持一致,行为是合理的。如果想让写法更贴近
clsx的常用风格,可以(非必需)改成类似:- className={clsx( - `${feedbackCls}-item`, - `${prefixCls}-item`, - `${feedbackCls}-item-like`, - classNames.like, - { - [`${classNames.liked}`]: classNames.liked && value === 'like', - [`${feedbackCls}-item-like-active`]: value === 'like', - }, - )} + className={clsx( + `${feedbackCls}-item`, + `${prefixCls}-item`, + `${feedbackCls}-item-like`, + classNames.like, + value === 'like' && classNames.liked, + value === 'like' && `${feedbackCls}-item-like-active`, + )}纯属风格优化,可酌情考虑。
packages/x/components/bubble/index.en-US.md (1)
190-190: 文档中 RoleProps 的clsx字段建议补充迁移说明这里将
RoleProps中透出的字段由classNames重命名为clsx,与实现保持一致没有问题。不过这相当于对 BubbleProps 公共 API 的重命名,建议在本节或 changelog 里显式注明「由classNames重命名为clsx」以及是否仍兼容旧字段,方便使用者完成迁移并感知潜在的 breaking。packages/x/.dumi/hooks/useMenu.tsx (1)
5-5: useMenu 中 clsx 迁移保持菜单渲染不变
Link上的className={clsx(className, { [styles.link]: tag })}与原来的条件 class 合并逻辑一致,仅在存在tag时附加布局样式。Tag上的className={clsx(styles.tag)}当前等价于直接传styles.tag,保留 clsx 主要是与全局写法保持一致,可以按现状保留;如果后续没有再追加其他类名,也可以在整理时顺手精简掉。整体来看,该文件的变更是等价迁移。
Also applies to: 64-64, 70-70
packages/x/.dumi/pages/index/components/DesignGuide.tsx (1)
3-3: 类名工具迁移正确。从
classnames迁移到clsx实现正确。Line 227 的
clsx(styles.chain_item_icon)只包含单个参数,可以直接使用styles.chain_item_icon而无需包装:- <div className={clsx(styles.chain_item_icon)}> + <div className={styles.chain_item_icon}>Also applies to: 227-227
packages/x/components/welcome/index.tsx (1)
60-77: useMemo 依赖项可能不完整,classNames / styles 变化时不会重新计算
iconNode/titleNode/extraNode的useMemo目前只依赖icon/title/extra,但内部还闭包了prefixCls、contextConfig.classNames.*、classNames.*、styles.*。如果这些值在运行期发生变化而对应的内容(如icon)不变,节点不会重新计算,类名和样式会“卡住”。可以考虑:
- 要么把这些依赖补齐进依赖数组;
- 要么直接去掉这些
useMemo,让渲染逻辑保持简单。这一点属于行为边缘情况,但现在改 clsx 正好是个顺手收紧依赖的机会。
Also applies to: 79-93, 95-108
packages/x/components/file-card/components/ImageLoading.tsx (1)
3-4: ImageLoading 中使用 clsx 组合类名的方式正确,可考虑是否需要透传 mergeSinkProps
- 外层容器、Skeleton.Node 和内部 Flex 上对
clsx的使用都只是在原有类名基础上做简单拼接/条件追加,行为与之前classnames等价。- 目前
mergeSinkProps只用于决定类名和额外图标/文字,但<Spin>实际上传入的是percent={mergedPercent} {...(spinProps as SpinProps)}。如果你的期望是把size、icon等默认属性也传给 antd 的Spin组件,可以考虑改为使用mergeSinkProps进行展开。如果当前视觉和交互都符合预期,这部分可以保留现状;否则可以顺手调整以避免配置分散。
Also applies to: 26-32
packages/x/.dumi/theme/slots/ContentTabs/index.tsx (1)
2-2: TabsProps 类型从 rc-tabs 迁移到 @rc-component/table 建议再核实一次这里运行时代码仍使用 antd 的
<Tabs>,但类型却改为从@rc-component/table引入TabsProps,包名与类型名(table vs tabs)有些不对称:
- 如果
@rc-component/table确实导出了与 antd Tabs 完全一致的TabsProps,则当前写法没问题;- 否则会引入 TS 类型错误或误导性的类型定义。
建议:要么确认依赖文档确保该类型正确来源,要么考虑直接基于 antd 的 Tabs 组件推断类型(例如通过
Parameters<typeof Tabs>[0]['items']之类方式)以降低对底层 rc/@rc-component 包的耦合。packages/x/components/thought-chain/Node.tsx (1)
2-5: Node 组件中 motion 与 clsx 迁移基本保持原有行为,仅有轻微风格问题CSSMotion 与 pickAttrs 切换到
@rc-component版本后,collapseMotion 的使用方式和展开/折叠逻辑未改变;icon、header、content、footer 等处的className均改为用clsx构造,包含 line 派生类、可折叠状态和 blink 动画类,整体语义与之前的classnames一致,预期不会影响渲染或交互。个别只包含一个常量类名的地方(例如${nodeCls}-box)使用clsx有些多余,但纯属风格问题,不影响运行。如前几个文件所述,也请一并确认import { clsx } from 'clsx';的导入方式与当前依赖版本和打包配置兼容。Also applies to: 56-57, 62-63, 65-68, 75-77, 79-82, 107-108, 112-113, 124-125
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (107)
package.json(2 hunks)packages/x-markdown/package.json(2 hunks)packages/x-markdown/src/XMarkdown/index.tsx(2 hunks)packages/x-markdown/src/plugins/HighlightCode/index.tsx(4 hunks)packages/x-markdown/src/plugins/Mermaid/index.tsx(5 hunks)packages/x-markdown/tests/setup.ts(1 hunks)packages/x-markdown/tests/setupAfterEnv.ts(1 hunks)packages/x-sdk/src/x-chat/index.ts(1 hunks)packages/x-sdk/tests/setup.ts(1 hunks)packages/x-sdk/tests/utils.tsx(1 hunks)packages/x/.dumi/components/SemanticPreview.tsx(4 hunks)packages/x/.dumi/hooks/useMenu.tsx(2 hunks)packages/x/.dumi/hooks/useThemeAnimation.ts(1 hunks)packages/x/.dumi/pages/index/common/Container.tsx(2 hunks)packages/x/.dumi/pages/index/components/DesignGuide.tsx(2 hunks)packages/x/.dumi/pages/index/components/MainBanner.tsx(3 hunks)packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx(2 hunks)packages/x/.dumi/pages/index/index.tsx(2 hunks)packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx(2 hunks)packages/x/.dumi/theme/builtins/ImagePreview/index.tsx(3 hunks)packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx(2 hunks)packages/x/.dumi/theme/builtins/InstallDependencies/index.tsx(1 hunks)packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx(2 hunks)packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx(2 hunks)packages/x/.dumi/theme/builtins/InstallDependencies/utoo.tsx(2 hunks)packages/x/.dumi/theme/builtins/InstallDependencies/yarn.tsx(2 hunks)packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx(2 hunks)packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx(3 hunks)packages/x/.dumi/theme/builtins/TokenCompare/index.tsx(2 hunks)packages/x/.dumi/theme/builtins/VideoPlayer/index.tsx(2 hunks)packages/x/.dumi/theme/common/Color/ColorPalettes.tsx(2 hunks)packages/x/.dumi/theme/common/PrevAndNext.tsx(3 hunks)packages/x/.dumi/theme/common/styles/Common.tsx(1 hunks)packages/x/.dumi/theme/layouts/DocLayout/index.tsx(2 hunks)packages/x/.dumi/theme/slots/Content/ColumnCard.tsx(4 hunks)packages/x/.dumi/theme/slots/Content/Contributors.tsx(2 hunks)packages/x/.dumi/theme/slots/Content/DocAnchor.tsx(2 hunks)packages/x/.dumi/theme/slots/Content/index.tsx(2 hunks)packages/x/.dumi/theme/slots/ContentTabs/index.tsx(1 hunks)packages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsx(1 hunks)packages/x/.dumi/theme/slots/Header/Actions.tsx(2 hunks)packages/x/.dumi/theme/slots/Header/Logo.tsx(2 hunks)packages/x/.dumi/theme/slots/Header/Navigation.tsx(2 hunks)packages/x/.dumi/theme/slots/Header/SwitchBtn.tsx(2 hunks)packages/x/.dumi/theme/slots/Header/index.tsx(2 hunks)packages/x/.dumi/theme/slots/Sidebar/index.tsx(1 hunks)packages/x/components/_util/hooks/use-collapsible.ts(1 hunks)packages/x/components/_util/hooks/use-shortcut-keys.ts(1 hunks)packages/x/components/_util/motion.ts(1 hunks)packages/x/components/_util/warning.ts(1 hunks)packages/x/components/actions/ActionsAudio.tsx(2 hunks)packages/x/components/actions/ActionsCopy.tsx(2 hunks)packages/x/components/actions/ActionsFeedback.tsx(4 hunks)packages/x/components/actions/ActionsItem.tsx(2 hunks)packages/x/components/actions/ActionsMenu.tsx(2 hunks)packages/x/components/actions/Item.tsx(2 hunks)packages/x/components/actions/context.ts(1 hunks)packages/x/components/actions/index.tsx(4 hunks)packages/x/components/attachments/DropArea.tsx(2 hunks)packages/x/components/attachments/FileList/index.tsx(4 hunks)packages/x/components/attachments/PlaceholderUploader.tsx(2 hunks)packages/x/components/attachments/index.tsx(6 hunks)packages/x/components/bubble/Bubble.tsx(6 hunks)packages/x/components/bubble/BubbleList.tsx(3 hunks)packages/x/components/bubble/Divider.tsx(2 hunks)packages/x/components/bubble/EditableContent.tsx(1 hunks)packages/x/components/bubble/System.tsx(2 hunks)packages/x/components/bubble/TypingContent.tsx(2 hunks)packages/x/components/bubble/hooks/useTyping.ts(1 hunks)packages/x/components/bubble/index.en-US.md(1 hunks)packages/x/components/bubble/index.zh-CN.md(1 hunks)packages/x/components/bubble/interface.ts(2 hunks)packages/x/components/conversations/Creation.tsx(2 hunks)packages/x/components/conversations/GroupTitle.tsx(3 hunks)packages/x/components/conversations/Item.tsx(2 hunks)packages/x/components/conversations/__tests__/index.test.tsx(1 hunks)packages/x/components/conversations/demo/shortcutKeys.tsx(1 hunks)packages/x/components/conversations/hooks/useCreation.tsx(2 hunks)packages/x/components/conversations/index.tsx(5 hunks)packages/x/components/file-card/FileCard.tsx(5 hunks)packages/x/components/file-card/List.tsx(3 hunks)packages/x/components/file-card/components/File.tsx(3 hunks)packages/x/components/file-card/components/ImageLoading.tsx(2 hunks)packages/x/components/prompts/index.tsx(6 hunks)packages/x/components/sender/SenderHeader.tsx(4 hunks)packages/x/components/sender/SenderSwitch.tsx(3 hunks)packages/x/components/sender/SlotTextArea.tsx(3 hunks)packages/x/components/sender/TextArea.tsx(2 hunks)packages/x/components/sender/components/ActionButton.tsx(2 hunks)packages/x/components/sender/components/LoadingButton.tsx(2 hunks)packages/x/components/sender/index.tsx(5 hunks)packages/x/components/sender/useSpeech.ts(1 hunks)packages/x/components/sources/Sources.tsx(6 hunks)packages/x/components/sources/components/CarouselCard.tsx(3 hunks)packages/x/components/suggestion/index.tsx(2 hunks)packages/x/components/suggestion/useActive.ts(1 hunks)packages/x/components/think/Think.tsx(4 hunks)packages/x/components/thought-chain/Item.tsx(4 hunks)packages/x/components/thought-chain/Node.tsx(6 hunks)packages/x/components/thought-chain/Status.tsx(2 hunks)packages/x/components/thought-chain/index.tsx(4 hunks)packages/x/components/welcome/index.tsx(6 hunks)packages/x/docs/playground/ultramodern.tsx(2 hunks)packages/x/package.json(4 hunks)packages/x/scripts/generate-component-changelog.ts(1 hunks)packages/x/tests/__mocks__/@rc-component/virtual-list.ts(1 hunks)packages/x/tests/__mocks__/rc-virtual-list.ts(0 hunks)
⛔ Files not processed due to max files limit (4)
- packages/x/tests/setup.ts
- packages/x/tests/setupAfterEnv.ts
- packages/x/tests/utils.tsx
- packages/x/typings/custom-typings.d.ts
💤 Files with no reviewable changes (1)
- packages/x/tests/mocks/rc-virtual-list.ts
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-01-27T09:36:11.490Z
Learnt from: YumoImer
Repo: ant-design/x PR: 479
File: components/bubble/demo/debug-list.tsx:39-57
Timestamp: 2025-01-27T09:36:11.490Z
Learning: In the Bubble.List debug demo component, the different typing behavior between pushBubble (sets typing: true) and unshiftBubble (no typing property) operations is intentional to facilitate testing different scenarios.
Applied to files:
packages/x/components/bubble/TypingContent.tsxpackages/x/components/bubble/interface.ts
📚 Learning: 2024-11-23T15:50:20.802Z
Learnt from: YumoImer
Repo: ant-design/x PR: 223
File: package.json:224-224
Timestamp: 2024-11-23T15:50:20.802Z
Learning: `rc-drawer` 依赖在 `.dumi/theme/layouts/SidebarLayout` 文件中被使用,是项目中的必要依赖,今后不应建议移除。
Applied to files:
packages/x/.dumi/theme/builtins/InstallDependencies/index.tsxpackages/x/.dumi/theme/slots/Sidebar/index.tsxpackages/x/.dumi/hooks/useThemeAnimation.tspackages/x/.dumi/theme/layouts/DocLayout/index.tsxpackages/x/.dumi/theme/slots/Header/Navigation.tsxpackages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsxpackages/x/.dumi/theme/slots/Header/index.tsxpackages/x/.dumi/hooks/useMenu.tsxpackages/x/scripts/generate-component-changelog.tspackages/x/.dumi/theme/slots/Content/index.tsxpackages/x/package.jsonpackages/x/.dumi/theme/common/styles/Common.tsx
🧬 Code graph analysis (3)
packages/x/components/actions/context.ts (1)
packages/x/components/actions/interface.ts (1)
ActionsProps(6-65)
packages/x/components/thought-chain/Node.tsx (1)
packages/x/components/thought-chain/interface.ts (1)
ThoughtChainProps(66-114)
packages/x/components/bubble/interface.ts (3)
packages/x/components/index.ts (2)
BubbleItemType(7-7)BubbleProps(7-7)packages/x/components/bubble/index.tsx (2)
BubbleItemType(7-7)BubbleProps(10-10)packages/x/components/bubble/Bubble.tsx (1)
BubbleProps(273-273)
⏰ 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). (2)
- GitHub Check: size
- GitHub Check: WIP
🔇 Additional comments (123)
packages/x-markdown/tests/setup.ts (1)
43-43: 注释更新准确反映依赖迁移。注释已正确更新,从
rc-motion改为@rc-component/motion,与 PR 的依赖迁移目标保持一致。packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx (2)
2-2: 导入语句正确!从
classnames迁移到clsx的导入语句符合PR重构目标。clsx是一个更轻量级的替代方案,能够有效减少包体积。
24-24: 类名合并迁移正确!
clsx在此场景下的行为与classNames完全一致,能够正确处理两个参数的合并(其中className可能为undefined)。功能保持不变,符合预期。packages/x/.dumi/theme/slots/Header/SwitchBtn.tsx (2)
1-4: 导入迁移到 @rc-component/util 与 clsx 与本次重构目标一致omit 的来源切换到
@rc-component/util/lib/omit,以及改用clsx,都与本次依赖迁移方向统一,当前看不到行为或打包层面的风险;只需确保仓库中@rc-component/util与clsx的版本在各包内保持一致即可。
87-90: span 的 className 组合逻辑保持清晰且不改变行为两处
span都通过value === 1在两组样式间切换,并在每次调用中始终包含labelStyle,仅切换叠加的样式类,阅读性好且应与原有视觉行为一致,无需额外调整。packages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsx (1)
1-1: Import path changed fromrc-util/lib/Dom/dynamicCSSto@rc-component/util/lib/Dom/dynamicCSS.Ensure
removeCSSandupdateCSSmaintain API compatibility with the new package. Verify that the behavior of these functions remains consistent, particularly in how they interact with the DOM manipulation at the call sites (lines 66, 73, 80).packages/x/components/_util/hooks/use-collapsible.ts (1)
1-2: Verify package dependencies and import migration consistencyThe import changes migrate from
rc-motionto@rc-component/motionand fromrc-util/lib/hooks/useMergedStateto@rc-component/util/lib/hooks/useMergedState. Before merging, confirm:
package.jsonincludes@rc-component/motionand@rc-component/utilas dependencies- All other files in the codebase using
rc-motionorrc-utilhave been updated similarly- The new packages provide identical APIs to their predecessors
packages/x/.dumi/theme/builtins/ImagePreview/index.tsx (2)
83-86: LGTM! 迁移到 clsx 的实现正确。
clsx和classNames在这些用例中的 API 完全兼容。字符串参数和条件对象的组合方式正确,功能保持不变。Also applies to: 107-110
1-3: Verify package dependency migration in package.json.The import path migration from
rc-utilto@rc-component/utiland fromclassnamestoclsxaligns with the PR objectives. Before approving, confirm that:
@rc-component/utilandclsxare added to package.json dependenciesrc-utilandclassnamesare removed from package.json dependencies- The import paths for toArray (
@rc-component/util/lib/Children/toArray) and clsx are correctpackages/x/components/_util/motion.ts (1)
1-6: 类型导入迁移看起来正确且无运行时影响这里将
rc-motion的类型导入迁移到@rc-component/motion,并且使用了import type,不会引入额外运行时代码,符合本 PR 的体积优化目标;MotionEvent也从对应的@rc-component/motion/lib/interface获取,和既有用法保持一致。整体改动是纯类型层面的,无行为变化风险。packages/x/components/actions/ActionsAudio.tsx (2)
2-2: LGTM! clsx 导入语句正确从
classnames迁移到clsx的导入语句正确。clsx是classnames的轻量级替代品,符合 PR 减小包体积的目标。
51-54: Unable to complete verification. The filepackages/x/components/actions/ActionsAudio.tsxcould not be located in the repository. Please confirm the file path is correct and ensure the file is committed and discoverable.packages/x/components/suggestion/useActive.ts (1)
1-1: Import migration to@rc-component/utilis compatible.The
useEventhook API is identical in bothrc-utiland@rc-component/util:useEvent<T extends Function>(callback: T) => Treturns a stable callback. This migration aligns with the PR's broader rc-component ecosystem consolidation and introduces no breaking changes.packages/x/components/actions/ActionsCopy.tsx (2)
1-1: 迁移 pickAttrs 到 @rc-component/util 与 PR 目标一致从 rc-util 切到
@rc-component/util/lib/pickAttrs有助于统一依赖、减少重复打包,看起来是无行为差异的替换;请确认相关依赖已在 package.json 中同步升级且构建通过即可。
3-3: 使用 clsx 合并类名的方式正确,行为与原先 classnames 一致
clsx的调用方式与之前的classnames模式相同,copyCls、hashId、cssVarCls、rootClassName、className以及 RTL 条件类都被保留,类名顺序与结构清晰,没有引入行为变化,满足迁移到 clsx 的需求。Also applies to: 62-72
packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx (1)
231-235: 使用模式正确!
clsx的使用方式与classnames完全一致,条件样式类的逻辑保持不变。假设导入语法正确,此变更可以有效减少包体积。packages/x/components/attachments/FileList/index.tsx (5)
104-106: 使用clsx合并局部 className 语义正确这里将文件/描述的类名合并逻辑替换为
clsx,参数顺序与原实现一致,保留了状态前缀 + 可选外部类名的语义,没有引入行为变化,看起来是安全的迁移。
133-133: 根节点className使用clsx保持原有合并逻辑
clsx(\${prefixCls}-list`, className)` 仍然是「基础前缀类 + 可选自定义类」的模式,迁移不改变行为,没问题。
135-140: 各 slot 的classNames合并顺序合理,保持与上下文配置兼容这里统一用
clsx合并classNames.*与contextClassNames.*,参数顺序保持「组件传入优先,其次是 context」,与原先模式一致,没有明显行为变化,迁移良好。
158-158: 上传按钮className使用clsx合并三方类名实现合理
clsx(classNames.upload, contextClassNames.upload, \${listCls}-upload-btn`)` 同时兼顾组件自定义、上下文配置以及固定 BEM 类名,顺序和语义都合理,迁移没有问题。
4-4: No action required — the import style is correct and supportedThe
clsxpackage explicitly exports both a default export and a named export. The import statementimport { clsx } from 'clsx';is a valid and supported pattern, particularly for TypeScript users. Bothimport clsx from 'clsx'andimport { clsx } from 'clsx'work identically and will not cause runtime errors.Likely an incorrect or invalid review comment.
packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx (3)
6-6: clsx 引入方式符合官方用法,替换 classnames 合理这里改为
import { clsx } from 'clsx';与官方 README 推荐用法之一一致,用于替代原来的 classnames 没有语义差异,体积也更小,方向正确。
163-167: codeBoxClass 使用 clsx 重写后语义与原逻辑保持一致
clsx('code-box', { expand: codeExpand, 'code-box-debug': originDebug, 'code-box-simplify': simplify })等价于原先的 classNames 写法,保持了.code-box基类及按布尔值附加修饰类的行为,没发现逻辑问题。
170-172: highlightClass 的展开样式切换实现简洁清晰
clsx('highlight-wrapper', { 'highlight-wrapper-expand': codeExpand })直接用布尔值控制单一修饰类,逻辑简单明了,和视图展开状态一一对应。packages/x/components/actions/ActionsFeedback.tsx (2)
2-4: pickAttrs 与 clsx 的迁移总体合理,但需要注意依赖版本
pickAttrs从rc-util迁到@rc-component/util/lib/pickAttrs,调用参数保持一致,看起来是等价替换,符合本 PR「统一迁移到 @rc-component/*」的目标。import { clsx } from 'clsx';在clsx >= 1.2.0中是官方支持的 named export alias 导入方式,因此语义正确,但前提是仓库中锁定的clsx版本已升级到该范围。(github.com)建议确认当前依赖中的
clsx版本 ≥ 1.2.0,以避免老版本构建时出现导入错误。
84-95: 使用 clsx 构建根节点 mergedCls 语义正确这里从
classnames切到clsx仅是工具替换,字符串与对象入参的结构保持不变,direction === 'rtl'时仍然只按需附加-rtlclass,行为与原实现基本一致,没有看出功能性差异问题。packages/x/scripts/generate-component-changelog.ts (1)
51-51: LGTM!关键字更新正确对齐包迁移。该更改将 changelog 分类关键字从
'rc-motion'更新为'@rc-component/motion',与 PR 中的包迁移目标一致。这确保了新的 changelog 条目能够正确匹配和分类。为了确保迁移的完整性,建议验证:
- 代码库中是否还有对旧包名
rc-motion的引用- 现有 CHANGELOG 文件中是否有旧包名的条目可能会被遗漏
packages/x/docs/playground/ultramodern.tsx (2)
25-25: 从 classnames 迁移到 clsx 的导入正确导入语句从
classnames正确迁移到clsx。clsx 是一个更轻量的替代方案,有助于减小打包体积。
402-402: clsx 的使用方式正确从
classNames迁移到clsx的使用是正确的。两者的对象语法完全兼容,条件类名的逻辑保持不变。packages/x/.dumi/theme/slots/Content/Contributors.tsx (2)
3-3: classnames 到 clsx 的迁移正确导入语句从
classNames正确迁移到clsx。这符合 PR 的目标,有助于减小打包体积。
50-50: clsx 使用正确
clsx的使用方式与classNames完全兼容。条件类名的对象语法保持不变,功能等效。packages/x/components/bubble/TypingContent.tsx (2)
1-1: classnames 到 clsx 的迁移正确导入语句从
classnames正确迁移到clsx,这有助于减小打包体积。
36-39: clsx 的多条件使用正确
clsx的使用完全兼容原有的classNames对象语法。两个条件类名(${prefixCls}-typing和${prefixCls}-fade-in)的逻辑保持不变,功能等效。packages/x/components/_util/warning.ts (1)
1-1: Warning import migration requires verificationThe migration from
rc-util/lib/warningto@rc-component/util/lib/warningcannot be fully verified without access to the repository. Ensure that:
- The
@rc-component/utilpackage exportsresetWarnedas a named export matching the originalrc-utilAPI- Lines 11 and 19 continue to work correctly with the new import source
- The
rcWarningandrcResetWarnedfunction signatures remain unchangedpackages/x/.dumi/theme/common/styles/Common.tsx (1)
2-2: Verify@rc-component/utilpackage compatibilityThe import path migration from
rc-utilto@rc-component/utilappears sound, withupdateCSSusage unchanged. However, confirmation is needed that:
@rc-component/util/lib/Dom/dynamicCSSexportsupdateCSSwith the same API signature- No other
rc-utilimports remain in the codebase for the dynamicCSS functionality- The
@rc-component/utildependency is properly installed and configuredpackages/x/components/_util/hooks/use-shortcut-keys.ts (1)
1-1: Verify KeyCode import compatibility between @rc-component/util and rc-utilThe import path change from
rc-util/lib/KeyCodeto@rc-component/util/lib/KeyCoderequires verification that:
- The target export path exists and is stable
- The KeyCode API interface remains compatible
- All usages in this file work as expected with the new import
Run the suggested verification scripts against your codebase to confirm there are no remaining old imports and that KeyCode usage patterns function correctly.
packages/x-sdk/src/x-chat/index.ts (1)
1-1: useEvent 导入迁移正确从
rc-util迁移到@rc-component/util的useEvent导入是正确的。两个包都导出相同的useEventAPI(签名:<T extends Function>(callback: T) => T),确保完全兼容性。packages/x/components/conversations/demo/shortcutKeys.tsx (1)
9-9: KeyCode 导入迁移与 PR 目标一致这里只是将
KeyCode的导入从rc-util迁移到@rc-component/util,用法保持不变,快捷键行为理论上应与之前一致。建议在依赖升级后跑一遍相关快捷键交互或测试,确认打包与运行时解析都正常。packages/x/.dumi/theme/slots/Header/Logo.tsx (1)
2-2: Logo 组件切换到 clsx 语义保持一致
className={clsx(styles.logo, (isMobile || isMini) && styles.mobile)}与原先的 classnames 写法等价,移动端与迷你态样式应用逻辑不变,改动符合统一使用 clsx 的方向。Also applies to: 77-77
packages/x/.dumi/theme/builtins/InstallDependencies/utoo.tsx (1)
2-2: UtooIcon 使用 clsx 合并类名是等价迁移
clsx(styles.iconWrap, className)与原来的 classnames 用法语义一致,同时保留透传的外部className,图标渲染行为不会变化。Also applies to: 24-24
packages/x/components/attachments/PlaceholderUploader.tsx (1)
2-2: PlaceholderUploader 类名合并迁移保持原有逻辑
clsx(placeholderCls, { ... }, className)与之前的 classnames 写法一一对应:拖入态与禁用态的修饰类仍按布尔状态切换,外部className继续附加,行为上是无感重构。Also applies to: 68-75
packages/x/.dumi/theme/builtins/InstallDependencies/yarn.tsx (1)
2-2: YarnIcon 使用 clsx 合并类名符合预期
className={clsx(styles.iconWrap, className)}正确保留了固定包裹样式并附加外部传入类名,与此前 classnames 行为一致,图标展示不会受影响。Also applies to: 24-24
packages/x/components/sender/components/ActionButton.tsx (1)
2-2: ActionButton 使用 clsx 组装类名,禁用态逻辑保持不变
className={clsx(prefixCls, className, { [${prefixCls}-disabled]: mergedDisabled })}与之前 classnames 写法等价:基础前缀、外部类名和禁用态修饰类都保留下来,只是替换了工具函数。建议在 Sender 区域把几种 action(send/clear/cancel/speech)都点一圈,确认禁用态样式在新依赖下表现正常。Also applies to: 44-46
packages/x/components/bubble/System.tsx (1)
1-1: 重构正确,依赖迁移合理。从
classnames迁移到clsx是一个很好的优化选择,clsx更轻量且性能更好。此处的用法语义完全一致,类名合并逻辑保持不变。Also applies to: 34-44
packages/x/components/bubble/Divider.tsx (1)
2-2: 类名工具迁移正确。
clsx替换classnames的实现正确,类名合并的输入参数和语义保持一致,不影响功能。Also applies to: 35-45
packages/x/components/bubble/EditableContent.tsx (1)
1-1: 工具函数导入路径更新正确。
useEvent从rc-util迁移到@rc-component/util,使用方式保持不变,重构合理。packages/x/components/bubble/hooks/useTyping.ts (1)
1-1: Hook 导入路径迁移正确。
useLayoutEffect从rc-util迁移到@rc-component/util/es/hooks/useLayoutEffect,Hook 的使用方式完全一致。packages/x/.dumi/theme/builtins/VideoPlayer/index.tsx (1)
3-3: 类名工具迁移实现正确。
clsx替换classnames用于类名合并,实现正确且语义一致。Also applies to: 62-62, 70-70
packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx (1)
4-4: 类名工具迁移实现正确。
clsx替换classnames,支持多个参数和条件对象的用法完全正确,类名合并逻辑保持不变。Also applies to: 109-109
packages/x-sdk/tests/utils.tsx (1)
1-2: Internal API import path requires verification.The migration from
rc-resize-observerto@rc-component/resize-observerfollows the documented package rename. However, importing internal APIs (_rs) from specific paths (es/utils/observerUtilandlib/utils/observerUtil) is not part of the standard migration guidance and may not be stable across versions.Verify that:
- The
_rsexport exists in both theesandlibvariants of the new package- This internal API is intended for consumption and won't break in future updates
- The test utilities work correctly with the new package by running the test suite
packages/x/.dumi/theme/builtins/TokenCompare/index.tsx (1)
5-5: 迁移到 clsx 的实现正确。从
classNames迁移到clsx的改动是正确的,两者在此使用场景下的 API 完全兼容,不会影响功能。Also applies to: 110-110
packages/x/components/file-card/components/File.tsx (1)
1-1: clsx 迁移实现正确,保持了原有逻辑。文件中所有的
classNames调用已正确替换为clsx,条件类名的拼接逻辑保持不变,组件行为不受影响。Also applies to: 38-41, 56-57, 62-65, 68-70
packages/x/components/actions/ActionsMenu.tsx (1)
3-3: 类名工具库迁移正确。
clsx替换classNames的改动正确,className 的拼接逻辑与原实现保持一致。Also applies to: 53-57, 60-62
packages/x/components/attachments/index.tsx (2)
126-126: clsx 类名拼接实现正确。所有
clsx的使用都正确保留了原有的条件类名逻辑,不会影响组件的样式渲染。Also applies to: 174-181, 191-192, 200-201, 211-220
1-1: 工具库迁移正确。从
rc-util迁移到@rc-component/util的改动符合预期。useEvent和useMergedState这两个 Hook 在@rc-component/util中可正常导出,API 保持兼容。packages/x-sdk/tests/setup.ts (1)
44-44: 注释更新正确。将注释中的包名从
rc-motion更新为@rc-component/motion,与实际的包迁移保持一致。packages/x/components/sources/components/CarouselCard.tsx (1)
3-3: clsx 迁移正确,条件类名逻辑保持不变。所有
clsx的使用都正确实现了条件类名的拼接,特别是按钮禁用状态的样式控制逻辑保持一致。Also applies to: 36-36, 40-42, 52-54
packages/x/.dumi/theme/slots/Content/DocAnchor.tsx (1)
4-4: TOC 调试样式的类名工具迁移正确。
clsx替换classNames实现正确,条件类名toc-debug的应用逻辑保持不变。Also applies to: 90-92
packages/x/.dumi/hooks/useThemeAnimation.ts (1)
1-1: dynamicCSS 工具导入路径更新需要验证。从
rc-util/lib/Dom/dynamicCSS迁移到@rc-component/util/lib/Dom/dynamicCSS的改动需要确认项目中所有相关使用都已完成迁移,且新包提供的 API 与旧包保持一致。建议运行以下检查:
- 确认项目中不存在旧的
rc-utildynamicCSS 导入- 验证
@rc-component/util包中removeCSS和updateCSS函数的 API 签名保持不变packages/x/components/welcome/index.tsx (1)
2-2: clsx 替换整体看起来是等价迁移 ✅这些位置对
clsx的使用方式与之前classnames的参数顺序和含义保持一致,语义和行为都应一致,满足统一依赖、减小包体的目标。建议在本地跑一遍类型检查和构建,确认当前clsx版本支持命名导入用法。Also applies to: 71-72, 87-88, 102-103, 114-126, 147-151
packages/x/.dumi/theme/slots/Sidebar/index.tsx (1)
2-2: MobileMenu 从rc-drawer迁移到@rc-component/drawer看起来合理保持了默认导入和用法不变,只是切换了包名,符合本 PR “rc-* → @rc-component/*” 的目标。请确认:
@rc-component/drawer已作为依赖加入到对应 package.json;- dumi 文档站在移动端下打开侧边栏时行为和样式都正常。
Based on learnings, 之前 rc-drawer 是文档侧边栏布局中的必要依赖,此处迁移到作用等价的新包能继续满足该需求。
Also applies to: 137-143
packages/x/components/actions/ActionsItem.tsx (1)
2-2: ActionsItem 中 pickAttrs / clsx 的迁移是等价的
pickAttrs从@rc-component/util/lib/pickAttrs引入,与之前 rc-util 的子路径形式一致,domProps的生成逻辑未变。mergedCls使用clsx组合各类名和 RTL 条件标记,顺序清晰、语义与原先classnames一致。整体看起来是一次纯粹的依赖迁移,不改变行为。建议本地跑一遍类型检查和单测,确认新包
@rc-component/util和clsx的类型/打包配置一切正常。Also applies to: 4-4, 75-101
packages/x/.dumi/theme/layouts/DocLayout/index.tsx (1)
1-1: DocLayout 使用 clsx 控制rtlclass 的实现正确在
<html>元素上用clsx({ rtl: direction === 'rtl' }),与之前的写法语义一致,只在direction === 'rtl'时输出rtlclass,其它情况为空字符串,对现有样式不应有行为差异。请在文档站切换 RTL / LTR 模式验证一下<html>的 class 是否如预期变化。Also applies to: 93-97
packages/x/.dumi/theme/slots/Content/index.tsx (1)
2-2: Content 里 classNames → clsx 的替换是等价的
<article>的className={clsx(styles.articleWrapper, { rtl: isRTL })}与之前写法等价:始终带上styles.articleWrapper,在 RTL 模式下额外加一个rtl。逻辑简单清晰,符合本 PR 的重构目标。建议在文档页切换方向时检查一下文章区域的布局是否与之前一致。Also applies to: 60-60
packages/x/components/actions/context.ts (1)
4-8: ActionsContext referencesActionsProps['clsx']which may not exist in the ActionsProps interfaceThe context type definition references
ActionsProps['clsx']for theclassNamesfield, but this property may not be defined in ActionsProps. Verify thatclsxis a valid property in ActionsProps; if not, it should referenceActionsProps['classNames']instead:export const ActionsContext = React.createContext<{ prefixCls?: string; styles?: ActionsProps['styles']; - classNames?: ActionsProps['clsx']; + classNames?: ActionsProps['classNames']; }>(null!);packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx (1)
4-4: clsx 替换是等价迁移,但 itemMeta 的 CSS 有一个多余的}
className={clsx(styles.container)}/clsx(styles.item)/clsx(styles.itemMeta)都只是把单个样式类包进 clsx,行为与原先classnames(styles.xxx)完全一致。- 注意到
itemMeta的样式中这一行:itemMeta: css` padding-inline: ${token.padding}px}; `,末尾多了一个
},会让这一条 CSS 声明变成非法值,导致padding-inline不生效。建议改为:
- itemMeta: css` - padding-inline: ${token.padding}px}; - `, + itemMeta: css` + padding-inline: ${token.padding}px; + `,修复后列表项 Meta 的左右内边距会按设计 token 生效。
Also applies to: 14-31, 58-67
packages/x/.dumi/pages/index/components/MainBanner.tsx (1)
3-3: clsx 迁移与原逻辑一致
className={clsx(...)}
- 参数都是样式字符串和布尔短路表达式,clsx 与原先 classnames 行为一致。
direction === 'rtl' && styles.lottie_rtl在 clsx 下同样只在条件为真时追加类名。这块迁移看起来是无副作用的样式级重构。
Also applies to: 263-265, 268-270, 278-279
packages/x/.dumi/theme/slots/Content/ColumnCard.tsx (1)
4-4: 图标类名由 classnames 切换为 clsx 无行为差异
clsx(logo, 'xxx-logo')只是在两个字符串类名间做拼接,等价于之前的classNames用法,不影响样式分支或交互逻辑。整体改动保持行为不变。
Also applies to: 144-145, 178-179, 212-213
packages/x/.dumi/pages/index/common/Container.tsx (1)
2-2: 容器类名合并改用 clsx,语义保持不变
className={clsx(styles.container, props.className)}与原先的 classnames 用法等价,能正确忽略未传入的props.className,不影响现有调用方。Also applies to: 51-52
packages/x/components/suggestion/index.tsx (1)
1-1: Suggestion 组件 util 与类名迁移整体合理
useMergedState/useEvent从@rc-component/util引入,调用方式未变,受控/非受控逻辑、事件包装语义保持一致。rootClassName={clsx(rootClassName, prefixCls, hashId, cssVarCls, { ... })}继续确保:
- 基础前缀类、样式 hash、CSS 变量类都挂在 Cascader 上;
block时追加${prefixCls}-block修饰符。- 外层 wrapper 使用
clsx(prefixCls, contextConfig.className, rootClassName, className, ...)也与之前 classnames 逻辑一致。整体为无行为变化的依赖与样式拼接重构。
Also applies to: 4-4, 93-96, 103-111, 141-145, 159-163, 175-177, 182-190
packages/x/components/sender/TextArea.tsx (1)
1-2: Sender TextArea 的 rc-util 替换与 clsx 使用看起来安全
getComponent使用的getValue(components, ['input'])仅做安全取值,迁移到@rc-component/util/lib/utils/get不改变行为。domProps = pickAttrs(restProps, { attr: true, aria: true, data: true })继续只透传合法 DOM/ARIA/data 属性。className={clsx(\${prefixCls}-input`, classNames.input)}中第二个参数允许为undefined`,clsx 会自动忽略,效果与之前一致。建议本地跑一遍 Sender 场景相关用例,确认新路径与打包配置完全匹配。
Also applies to: 5-5, 10-16, 154-158, 160-163, 172-178
packages/x/tests/__mocks__/@rc-component/virtual-list.ts (1)
1-3: 虚拟列表 mock 对齐 @rc-component 版本通过
export default直接透传@rc-component/virtual-list/lib/mock,可以平滑替换原 rc-virtual-list mock。
建议确认 Jest / 测试运行器对__mocks__/@rc-component/virtual-list的解析路径与之前 rc-virtual-list 配置一致,以免出现未命中 mock 的情况。packages/x/components/sender/SenderSwitch.tsx (1)
1-2: SenderSwitch 状态管理与类名迁移保持原始语义
useMergedState迁移到@rc-component/util后:
- 仍以
defaultValue为初始值、value为受控值;- onChange 回调里通过
onChange?.(key || false)将undefined归一到false,与原逻辑一致。mergedCls = clsx(...)中继续合并:
- 组件前缀类、上下文 classNames、hashId/cssVarCls;
-checked与-rtl修饰符。- Button 的
className={clsx(\${switchCls}-content`, classNames.content)}` 与之前 classnames 等价。整体为依赖与样式层的重构,行为不变。
Also applies to: 4-4, 63-67, 87-95, 98-113, 100-113, 128-132
packages/x/components/attachments/DropArea.tsx (1)
1-1: DropArea 类名改用 clsx,条件类逻辑保持一致
className={clsx(areaCls, className, { [\${areaCls}-on-body`]: container.tagName === 'BODY' })}`:
- 始终包含基础
areaCls;- 透传自定义
className;- 在容器为
<body>时追加修饰类,与原先 classnames 行为相同。整体迁移不会影响拖拽逻辑与显示时机。
Also applies to: 73-80
packages/x/components/bubble/BubbleList.tsx (2)
1-3: LGTM! 依赖迁移正确。导入语句已正确从
classnames和rc-util迁移到clsx和@rc-component/util。使用 ES 模块路径(/es/)有助于树摇优化。
149-156: LGTM!clsx使用正确。所有
classNames调用已正确替换为clsx。clsx与classnames在此类用法中功能等效,且体积更小。Also applies to: 212-214
packages/x/components/bubble/Bubble.tsx (2)
1-2: LGTM! 导入迁移一致。已正确迁移到
@rc-component/util和clsx。
78-93: LGTM! 类名组合已统一迁移。所有
className构造已一致地迁移到clsx,保持了相同的逻辑和条件。Also applies to: 157-168, 182-182, 196-196, 235-238
packages/x/.dumi/components/SemanticPreview.tsx (2)
2-2: LGTM! 导入更新正确。已正确迁移到
@rc-component/util和clsx。Also applies to: 5-5
152-152: LGTM! 类名构造已一致更新。所有
className构造都已正确迁移到clsx。Also applies to: 154-154, 158-158, 182-182, 204-208
packages/x/components/sources/Sources.tsx (2)
2-7: LGTM! 依赖迁移全面且一致。已正确从
rc-motion和rc-util迁移到@rc-component/motion和@rc-component/util,并引入了clsx。
94-106: LGTM! 类名组合更新完整。所有
className构造已一致地迁移到clsx。Also applies to: 161-167, 175-179, 184-193, 198-201
packages/x/components/sender/SlotTextArea.tsx (2)
2-4: LGTM! 导入更新正确。已正确迁移到
@rc-component/util和clsx。
180-183: LGTM!clsx使用正确。类名构造已正确更新为使用
clsx。Also applies to: 626-634
packages/x/components/actions/index.tsx (2)
1-4: LGTM! 完整的依赖迁移。已正确从
rc-motion和rc-util迁移到@rc-component/motion和@rc-component/util,包括CSSMotion、pickAttrs、composeRef等工具函数。
57-69: LGTM! 类名组合已一致迁移。所有
className构造已统一使用clsx。Also applies to: 99-103, 112-116
packages/x-markdown/package.json (2)
57-57: Remove this comment — no concrete compatibility concerns identified.The comment requests generic verification of
clsx@^2.1.1without identifying specific compatibility issues or actual problems.clsx@^2.1.1is a stable, widely-adopted version with no known critical issues. If specific compatibility concerns exist (e.g., with React 19, antd 6.1.0, or particular use cases), they should be explicitly identified in the comment; otherwise, this represents an unnecessary precautionary check.
73-73: Verify antd 6.1.0 fully supports React 19 before merging.antd 6.1.0 targets React 18+ with stated React 19 compatibility intent, but known issues exist: some ecosystem packages have outdated peerDependencies, and runtime problems have been reported with certain dependency combinations (e.g., Next.js 15, ref access changes). End-to-end testing is required, particularly for static APIs (Modal/message) and ref-dependent libraries. If peer-dependency warnings occur during installation, apply overrides or use
--legacy-peer-depsas a temporary workaround.Also applies to: 79-79
packages/x/components/think/Think.tsx (2)
2-6: LGTM!导入迁移正确:
@rc-component/motion、@rc-component/util和clsx的引入符合 PR 目标。clsx的 API 与classnames兼容,迁移是安全的。
92-103: LGTM!
clsx用法正确,支持字符串、对象和数组参数,与之前的classnames行为一致。packages/x/components/prompts/index.tsx (2)
1-4: LGTM!导入迁移正确。
CSSMotion和composeRef从@rc-component/*导入,clsx替换classnames,符合 PR 目标。
156-175: LGTM!
clsx用于mergedCls和mergedListCls的构建方式与原classnames一致,迁移正确。packages/x/components/file-card/FileCard.tsx (2)
14-17: LGTM!
pickAttrs从@rc-component/util导入,clsx替换classnames,迁移正确。
202-213: LGTM!
mergedCls的构建逻辑与原实现一致,clsx正确处理条件类名。packages/x/components/file-card/List.tsx (2)
2-4: LGTM!
CSSMotionList从@rc-component/motion导入,clsx替换classnames,迁移正确。
63-69: LGTM!
mergedCls构建逻辑正确,多个条件类名的处理方式与原classnames一致。packages/x/components/sender/useSpeech.ts (1)
1-1: useSpeech 中迁移 useEvent/useMergedState 到 @rc-component/util 看起来是等价替换命名和调用方式保持不变,理论上无行为差异;建议确认当前项目中 @rc-component/util 的对应实现与原 rc-util 钩子在受控 value/onChange 语义上完全一致。
packages/x-markdown/src/XMarkdown/index.tsx (1)
1-1: XMarkdown 使用 clsx 合并类名的写法与原 classnames 等价导入改为
{ clsx },mergedCls仍按相同顺序合并prefixCls、固定类和外部rootClassName/className,生成的类名集合不会变化,可读性也保持良好。Also applies to: 30-30
packages/x/components/conversations/__tests__/index.test.tsx (1)
1-1: 测试用例中的 KeyCode 来源迁移到 @rc-component/util/lib/KeyCode仅调整了导入路径,
KeyCode.ONE、KeyCode.K等常量名保持不变;请确认新包中的实际数值映射与原 rc-util 完全一致,以避免快捷键相关断言(尤其是重复快捷键告警用例)出现偏差。packages/x/.dumi/pages/index/index.tsx (1)
2-2: 首页多个 section 的 className 已改用 clsx 组合
clsx(styles.section, styles.container/framework)的用法与原先的 classnames 等价,所有参与合并的样式变量和顺序未变,视觉结构应保持一致;同时也与仓库其余 clsx 用法保持统一。Also applies to: 45-45, 50-50, 58-58
packages/x/.dumi/theme/slots/Header/Navigation.tsx (1)
2-2: HeaderNavigation 导航容器 className 迁移到 clsx,条件逻辑保持不变
clsx中对styles.nav、mobile/pc、mini、RTL 以及外部className的组合顺序和条件与原实现一致,预期不会影响布局或主题切换行为。Also applies to: 179-185
packages/x/components/thought-chain/Item.tsx (1)
1-2: ThoughtChain Item 迁移到 clsx 及 @rc-component/util/pickAttrs 整体合理
pickAttrs仅更换了来源路径,调用参数保持不变(attr/aria/data),DOM 透传行为应与原实现一致。- 若干处
className改用clsx合并:根节点、content、title、description 均保留了原有基础类与条件类(variant、点击态、错误态、RTL、blink 等),渲染出来的类名集合与之前一致。整体看是无行为差异的依赖替换,便于在项目内统一到 @rc-component/util 与 clsx。
Also applies to: 129-143, 156-158, 164-165, 173-173
packages/x/components/sender/components/LoadingButton.tsx (1)
2-2: LoadingButton 使用 clsx 合并类名,行为与原实现一致
className={clsx(className, \${prefixCls}-loading-button`)}仍会保留外部传入的className`,并附加内部约定类名,顺序与原 classnames 用法一致,不影响样式覆盖关系。Also applies to: 18-18
packages/x/components/thought-chain/Status.tsx (1)
7-7: LGTM! clsx 迁移正确。类名组合逻辑正确,对象语法的条件类名使用得当。
Also applies to: 82-84
packages/x/.dumi/theme/common/Color/ColorPalettes.tsx (1)
1-1: LGTM! clsx 替换正确。条件类名逻辑保持不变,深色模式的类名处理正确。
Also applies to: 84-84
packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx (1)
2-2: LGTM! 简单的类名合并迁移正确。Also applies to: 24-24
packages/x/components/conversations/Item.tsx (2)
6-6: LGTM! clsx 迁移正确。条件类名的逻辑正确,包括 active 和 disabled 状态的处理。
Also applies to: 46-51
2-2: Verify @rc-component/util pickAttrs API compatibility.Based on documentation,
pickAttrsis exported from bothrc-utiland@rc-component/utilwith the identical signature:pickAttrs(props: Object): Object. Both packages support the import path@rc-component/util/lib/pickAttrs, indicating the migration maintains API compatibility. However, local codebase verification (usage patterns, test coverage) could not be completed due to repository access limitations.packages/x/components/conversations/hooks/useCreation.tsx (1)
2-2: LGTM! CreationLabel 组件的 clsx 迁移正确。所有类名组合逻辑正确:
- 条件类名用于快捷键显示状态(15 行)
- 静态类名用于快捷键容器和单个按键(18、20 行)
Also applies to: 15-15, 18-20
packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx (1)
2-2: LGTM! 简单的类名合并迁移正确。Also applies to: 24-24
packages/x-markdown/src/plugins/Mermaid/index.tsx (1)
9-9: Unable to verify clsx migration claims without repository access.The review comment approves the clsx migration in the Mermaid component and claims correct updates across multiple line ranges (62-73, 257-257, 277-282, 292-292). However, I cannot access the repository to validate these assertions or run the suggested verification scripts to check test coverage and rendering behavior.
packages/x/.dumi/theme/slots/Header/index.tsx (1)
4-4: Migration from classnames to clsx approved, but specific implementation verification required.The classnames-to-clsx migration is generally sound as clsx is a compatible, higher-performance alternative with compatible API. However, verification of the specific implementation at lines 4, 152, 160-167 could not be completed due to repository access limitations. Ensure all classnames usages across these lines were consistently updated and that any component tests pass with the new library.
packages/x/.dumi/theme/slots/Header/Actions.tsx (1)
4-4: LGTM!迁移正确从
classnames到clsx的迁移正确,保持了相同的条件类名逻辑。Also applies to: 155-160
packages/x-markdown/src/plugins/HighlightCode/index.tsx (1)
4-4: LGTM!类名组合迁移正确所有
classNames到clsx的替换都保持了相同的参数和逻辑。Also applies to: 41-52, 62-77, 93-94
packages/x/components/conversations/Creation.tsx (1)
1-1: LGTM!迁移符合预期
clsx替换正确,类名组合逻辑保持不变。Also applies to: 51-53
packages/x/.dumi/theme/common/PrevAndNext.tsx (1)
4-4: LGTM!类名工具迁移正确
clsx替换正确应用于前后导航元素。Also applies to: 148-148, 157-157
packages/x/components/conversations/GroupTitle.tsx (1)
2-3: LGTM!双重迁移执行正确正确迁移了:
rc-motion→@rc-component/motionclassnames→clsx所有导入和使用都已更新,保持了原有功能。
Also applies to: 5-5, 47-49, 52-52, 55-58, 66-66
packages/x/components/actions/Item.tsx (1)
2-2: LGTM!迁移正确
clsx替换保持了条件类名逻辑不变。Also applies to: 31-33
packages/x/components/thought-chain/index.tsx (1)
1-2: LGTM!工具库迁移完整正确迁移了:
rc-util→@rc-component/util(pickAttrs 导入)classnames→clsx(所有类名组合)所有更新保持了原有的功能和逻辑。
Also applies to: 54-68, 109-113, 127-127
packages/x/components/sender/SenderHeader.tsx (1)
2-4: SenderHeader 中 rc-motion 与 classnames 迁移整体合理,但请确认 clsx 导入方式从
rc-motion切到@rc-component/motion,以及从classnames切到clsx后,动画的 enter/leave 配置和 header/content 的类名组合逻辑都保持原语义,RTL 分支也保留,看起来不会引入行为变化。唯一需要确认的是:目前使用import { clsx } from 'clsx';,而社区示例通常是默认导入写法;请确认[email protected]的导出形式、类型定义以及项目的模块解析配置都支持这种命名导入方式,避免构建期类型或运行时问题。Also applies to: 82-84, 97-98, 120-121
packages/x/components/conversations/index.tsx (1)
1-2: Conversations 组件的 useMergedState / pickAttrs / clsx 迁移保持语义不变,但需确认 clsx 导入activeKey 相关状态改用
@rc-component/util的useMergedState,签名和之前 rc-util 版兼容;pickAttrs依旧只下发 attr/aria/data 属性。根节点、Item、Creation、分组标题和子列表的className组合改用clsx后,类名拼接顺序和 RTL 条件类都与原来的classnames版本一致,预期不会改变渲染结果。建议和其他文件一起确认import { clsx } from 'clsx';这种命名导入是否被当前[email protected]及构建配置正确支持,以避免类型或运行时问题。Also applies to: 4-4, 172-184, 239-243, 279-280, 303-307
packages/x/components/sender/index.tsx (1)
1-2: Sender 组件中 useMergedState / pickAttrs 与 clsx 迁移看起来安全,但请检查 clsx 的导入方式
useMergedState从@rc-component/util引入后,innerValue的受控/非受控逻辑与之前保持一致;pickAttrs继续只透传 attr/aria/data 属性到根节点。根容器、content、prefix、actions 列表和 footer 的className均改为用clsx合并,包含 RTL/disabled 以及contextConfig.classNames、classNames等信息,语义与旧版classnames对齐。建议确认import { clsx } from 'clsx';能被当前[email protected]与项目的打包/类型配置正确识别,否则可以考虑改回默认导入形式以降低风险。Also applies to: 4-4, 121-134, 327-338, 355-356, 364-368
packages/x/package.json (1)
87-89: 依赖从 rc- / classnames 迁移到 @rc-component 与 clsx 的配置整体合理,但需在 CI 中重点验收*在 dependencies 中新增
@rc-component/motion、@rc-component/util和clsx,以及在 devDependencies 中引入@rc-component/drawer、@rc-component/resize-observer、@rc-component/table、@rc-component/virtual-list,与代码里看到的 rc-* → @rc-component/* 与 classnames → clsx 迁移方向一致;同时将 antd 升级到^6.1.0并同步更新 peerDependencies 里的 antd 版本也符合预期。建议在 CI/本地重点确认两点:1)运行时代码中已不存在对旧 rc-* 包的引用;2)antd@^6.1.0与react@>=18(尤其是当前使用的 19 版本)以及这些 @rc-component 包组合在构建和测试阶段都能正常工作。Based on learnings, 之前确认 drawer 在.dumi/theme中是必需依赖,这次迁移到@rc-component/drawer后也请确认相关 import 已同步更新,避免文档站点在构建时缺少依赖。Also applies to: 105-111, 153-153, 244-244
00e74c4 to
a851956
Compare
a851956 to
70fef95
Compare
|
🙏 我正准备做这个 👍 |
a7ce1fa to
87e0707
Compare
Bundle ReportChanges will increase total bundle size by 1.51MB (80.82%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: x-markdown-array-pushAssets Changed:
|
|
奇怪,咋es模块会报错 |
22248bb to
d60332d
Compare
ae4f847 to
5d0ec9f
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1448 +/- ##
==========================================
- Coverage 94.76% 94.62% -0.14%
==========================================
Files 137 137
Lines 3915 3945 +30
Branches 1119 1126 +7
==========================================
+ Hits 3710 3733 +23
- Misses 202 209 +7
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
@kimteayon 好了 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/x/components/_util/hooks/use-shortcut-keys.ts (1)
224-227: 严重:useEffect 清理函数中的事件监听器移除错误导致内存泄漏。第 226 行在清理函数中错误地使用了
addEventListener而不是removeEventListener,这会导致每次组件重新渲染时都添加新的keyup监听器而不是移除它,造成内存泄漏。应用此 diff 修复内存泄漏:
return () => { document.removeEventListener('keydown', onKeydown); - document.addEventListener('keyup', onKeyup); + document.removeEventListener('keyup', onKeyup); };注意:这是代码中的预存问题,不是本次 PR 引入的,但需要尽快修复以避免性能问题。
packages/x/components/actions/ActionsFeedback.tsx (1)
132-140:classNames.disliked的条件写成了value === 'like',应为dislike当前逻辑:
{ [`${classNames.disliked}`]: classNames.disliked && value === 'like', [`${feedbackCls}-item-dislike-active`]: value === 'dislike', }
*-dislike-active在value === 'dislike'时生效是正确的;- 但
classNames.disliked却在value === 'like'时才会附加,这与语义明显不符,会导致「自定义已点踩样式」永远无法在点踩态生效,反而在点赞态被错误附加(如果两者都配置,还会引发样式冲突)。建议改为在点踩态时才附加
classNames.disliked:- { - [`${classNames.disliked}`]: classNames.disliked && value === 'like', - [`${feedbackCls}-item-dislike-active`]: value === 'dislike', - }, + { + [`${classNames.disliked}`]: classNames.disliked && value === FEEDBACK_VALUE.dislike, + [`${feedbackCls}-item-dislike-active`]: value === FEEDBACK_VALUE.dislike, + },这样既修复逻辑错误,也顺便统一使用
FEEDBACK_VALUE.dislike,避免魔法字符串。
♻️ Duplicate comments (2)
packages/x/.dumi/pages/index/components/DesignGuide.tsx (1)
227-227: 单个类名无需使用clsx包装。当只有单个类名时,可以直接使用以提高可读性。
应用以下 diff 来简化代码:
- <div className={clsx(styles.chain_item_icon)}> + <div className={styles.chain_item_icon}>packages/x-markdown/tests/setupAfterEnv.ts (1)
3-11:spyElementPrototypes从@rc-component/util引用风险较大,建议改为本地实现这里把原来的
rc-util/lib/test/domHook迁移成:import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';有几点风险:
@rc-component/util的exports未必暴露lib/test/domHook这个子路径,即使打包里有文件,也可能在 Node/Jest 下直接import失败(和你在 PR 里提到的SyntaxError: Unexpected token 'export'很像)。- 就算能解析,测试环境目前大概率仍按 CJS 处理,若这个文件是 ESM(包含
export语法),同样会在运行时抛Unexpected token 'export'。- 这个文件里对
spyElementPrototypes的唯一用法只是给HTMLElement打一个scrollTo: jest.fn()的 mock,用这么深的内部工具并不划算,而且把测试耦合到包内部实现细节,将来包内部结构再变一次还会再炸。考虑到上面这些,建议在这个文件里直接去掉
spyElementPrototypes依赖,改成简单的本地 mock,会更稳也更利于未来升级。例如:-import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; ... -// Mock `scrollTo` since jsdom do not support it -spyElementPrototypes(HTMLElement, { - scrollTo: jest.fn(), -}); +// Mock `scrollTo` since jsdom do not support it +if (typeof HTMLElement !== 'undefined') { + // jsdom 环境下原型上通常不存在 scrollTo,这里直接打一个可配置的 stub + Object.defineProperty(HTMLElement.prototype, 'scrollTo', { + configurable: true, + writable: true, + value: jest.fn(), + }); +}这样可以完全绕开
@rc-component/util的 test 工具子路径,也有望直接解决当前的 ES module 报错问题,同时不影响现有测试语义。
🧹 Nitpick comments (3)
packages/x/components/actions/ActionsFeedback.tsx (2)
2-4:@rc-component/util与clsx引入方式合理,但注意构建配置与依赖版本
pickAttrs从@rc-component/util/lib/pickAttrs以默认导入方式使用,接口与旧的rc-util/lib/pickAttrs一致,迁移方向正确。clsx支持import { clsx } from 'clsx'的命名导入方式,现在的写法是推荐方式之一,替换掉classnames没问题。建议额外确认两点:
- 构建/SSR 环境(特别是 Next.js 等)是否已经把
@rc-component家族包加入transpilePackages或等效配置,否则仍可能在某些环境下遇到SyntaxError: Unexpected token 'export'之类的 ESM 报错。- 项目依赖里已显式添加
@rc-component/util和clsx,并确保clsx版本 ≥ 1.2 以支持命名导出写法。(Based on learnings,此处按要求使用中文回复。)
111-120: 点赞项的clsx拼接正确,可选的小优化
classNames.like始终附加,classNames.liked仅在value === 'like'且传入了该字段时才生效,对应「已点赞」语义,逻辑是正确的。feedbackCls下的*-like-active也只在value === 'like'时附加,行为与之前保持一致。可选的小重构(非必须):
- 将这里的字符串字面量
'like'统一替换为FEEDBACK_VALUE.like,可以减少魔法字符串,未来重命名时更安全,例如:- style={{ ...styles.like, ...(value === 'like' ? styles.liked : {}) }} + style={{ ...styles.like, ...(value === FEEDBACK_VALUE.like ? styles.liked : {}) }} @@ - [`${classNames.liked}`]: classNames.liked && value === 'like', - [`${feedbackCls}-item-like-active`]: value === 'like', + [`${classNames.liked}`]: classNames.liked && value === FEEDBACK_VALUE.like, + [`${feedbackCls}-item-like-active`]: value === FEEDBACK_VALUE.like,packages/x/components/file-card/List.tsx (1)
2-5: List 组件对 motion 与 clsx 的迁移整体正确,可考虑微调用法这里把
CSSMotionList切到@rc-component/motion,并用 clsx 统一替换了原来的 classnames,包含:
- 根节点
mergedCls组合了compCls、rootClassName、classNameRoot、hashId、RTL 标记等,逻辑与之前一致;- content 容器和每个 item 的类名依然按 overflow / ping / size / motionCls 条件拼接;
- FileCard 的
className={clsx(item.className, classNameCard)}也继续支持列表级和 item 级样式叠加。功能上看是 1:1 迁移,没有引入新的行为差异。唯一可以考虑的小优化是:外层
<div className={clsx(mergedCls)}>这里可以直接写成className={mergedCls},避免一次多余调用,但完全是可选的微调,不影响当前合入。Also applies to: 63-73, 125-133, 149-150, 157-158
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (105)
-
package.json(1 hunks) -
packages/x-markdown/.jest.js(1 hunks) -
packages/x-markdown/package.json(1 hunks) -
packages/x-markdown/src/XMarkdown/index.tsx(2 hunks) -
packages/x-markdown/tests/setup.ts(1 hunks) -
packages/x-markdown/tests/setupAfterEnv.ts(1 hunks) -
packages/x-sdk/.jest.js(1 hunks) -
packages/x-sdk/package.json(1 hunks) -
packages/x-sdk/src/x-chat/index.ts(1 hunks) -
packages/x-sdk/tests/setup.ts(1 hunks) -
packages/x-sdk/tests/utils.tsx(1 hunks) -
packages/x/.dumi/components/SemanticPreview.tsx(4 hunks) -
packages/x/.dumi/hooks/useMenu.tsx(2 hunks) -
packages/x/.dumi/hooks/useThemeAnimation.ts(1 hunks) -
packages/x/.dumi/pages/index/common/Container.tsx(2 hunks) -
packages/x/.dumi/pages/index/components/DesignGuide.tsx(2 hunks) -
packages/x/.dumi/pages/index/components/MainBanner.tsx(3 hunks) -
packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx(2 hunks) -
packages/x/.dumi/pages/index/index.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/ImagePreview/index.tsx(3 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/index.tsx(1 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/utoo.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/yarn.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx(3 hunks) -
packages/x/.dumi/theme/builtins/TokenCompare/index.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/VideoPlayer/index.tsx(2 hunks) -
packages/x/.dumi/theme/common/Color/ColorPalettes.tsx(2 hunks) -
packages/x/.dumi/theme/common/PrevAndNext.tsx(3 hunks) -
packages/x/.dumi/theme/common/styles/Common.tsx(1 hunks) -
packages/x/.dumi/theme/layouts/DocLayout/index.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Content/ColumnCard.tsx(4 hunks) -
packages/x/.dumi/theme/slots/Content/Contributors.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Content/DocAnchor.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Content/index.tsx(2 hunks) -
packages/x/.dumi/theme/slots/ContentTabs/index.tsx(1 hunks) -
packages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsx(1 hunks) -
packages/x/.dumi/theme/slots/Header/Actions.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/Logo.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/Navigation.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/SwitchBtn.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/index.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Sidebar/index.tsx(1 hunks) -
packages/x/.jest.js(1 hunks) -
packages/x/components/_util/hooks/use-collapsible.ts(1 hunks) -
packages/x/components/_util/hooks/use-shortcut-keys.ts(1 hunks) -
packages/x/components/_util/motion.ts(1 hunks) -
packages/x/components/_util/warning.ts(1 hunks) -
packages/x/components/actions/ActionsAudio.tsx(2 hunks) -
packages/x/components/actions/ActionsCopy.tsx(2 hunks) -
packages/x/components/actions/ActionsFeedback.tsx(4 hunks) -
packages/x/components/actions/ActionsItem.tsx(2 hunks) -
packages/x/components/actions/ActionsMenu.tsx(2 hunks) -
packages/x/components/actions/Item.tsx(2 hunks) -
packages/x/components/actions/index.tsx(4 hunks) -
packages/x/components/attachments/DropArea.tsx(2 hunks) -
packages/x/components/attachments/FileList/index.tsx(4 hunks) -
packages/x/components/attachments/PlaceholderUploader.tsx(2 hunks) -
packages/x/components/attachments/index.tsx(6 hunks) -
packages/x/components/bubble/Bubble.tsx(6 hunks) -
packages/x/components/bubble/BubbleList.tsx(3 hunks) -
packages/x/components/bubble/Divider.tsx(2 hunks) -
packages/x/components/bubble/EditableContent.tsx(1 hunks) -
packages/x/components/bubble/System.tsx(2 hunks) -
packages/x/components/bubble/TypingContent.tsx(2 hunks) -
packages/x/components/bubble/hooks/useTyping.ts(1 hunks) -
packages/x/components/code-highlighter/CodeHighlighter.tsx(4 hunks) -
packages/x/components/conversations/Creation.tsx(2 hunks) -
packages/x/components/conversations/GroupTitle.tsx(3 hunks) -
packages/x/components/conversations/Item.tsx(2 hunks) -
packages/x/components/conversations/__tests__/index.test.tsx(1 hunks) -
packages/x/components/conversations/demo/shortcutKeys.tsx(1 hunks) -
packages/x/components/conversations/hooks/useCreation.tsx(2 hunks) -
packages/x/components/conversations/index.tsx(5 hunks) -
packages/x/components/file-card/FileCard.tsx(5 hunks) -
packages/x/components/file-card/List.tsx(4 hunks) -
packages/x/components/file-card/components/File.tsx(3 hunks) -
packages/x/components/file-card/components/ImageLoading.tsx(3 hunks) -
packages/x/components/mermaid/Mermaid.tsx(5 hunks) -
packages/x/components/prompts/index.tsx(6 hunks) -
packages/x/components/sender/SenderHeader.tsx(4 hunks) -
packages/x/components/sender/SenderSwitch.tsx(3 hunks) -
packages/x/components/sender/SlotTextArea.tsx(5 hunks) -
packages/x/components/sender/TextArea.tsx(2 hunks) -
packages/x/components/sender/__tests__/use-speech.test.tsx(1 hunks) -
packages/x/components/sender/components/ActionButton.tsx(2 hunks) -
packages/x/components/sender/components/LoadingButton.tsx(2 hunks) -
packages/x/components/sender/components/Skill.tsx(2 hunks) -
packages/x/components/sender/hooks/use-speech.ts(1 hunks) -
packages/x/components/sender/index.tsx(5 hunks) -
packages/x/components/sources/Sources.tsx(6 hunks) -
packages/x/components/sources/components/CarouselCard.tsx(3 hunks) -
packages/x/components/suggestion/index.tsx(3 hunks) -
packages/x/components/suggestion/useActive.ts(1 hunks) -
packages/x/components/think/Think.tsx(4 hunks) -
packages/x/components/thought-chain/Item.tsx(4 hunks) -
packages/x/components/thought-chain/Node.tsx(5 hunks) -
packages/x/components/thought-chain/Status.tsx(2 hunks) -
packages/x/components/thought-chain/index.tsx(4 hunks) -
packages/x/components/welcome/index.tsx(6 hunks) -
packages/x/docs/playground/ultramodern.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/x/components/sender/hooks/use-speech.ts
🚧 Files skipped from review as they are similar to previous changes (62)
- packages/x/components/actions/ActionsAudio.tsx
- packages/x/components/conversations/demo/shortcutKeys.tsx
- packages/x/.dumi/theme/builtins/VideoPlayer/index.tsx
- packages/x/.dumi/theme/slots/Header/Actions.tsx
- packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx
- packages/x/components/sender/components/LoadingButton.tsx
- packages/x/components/bubble/TypingContent.tsx
- packages/x/.dumi/theme/builtins/InstallDependencies/utoo.tsx
- packages/x/components/file-card/FileCard.tsx
- packages/x/components/sources/components/CarouselCard.tsx
- packages/x/components/conversations/Creation.tsx
- packages/x/components/prompts/index.tsx
- packages/x/components/think/Think.tsx
- packages/x/components/actions/index.tsx
- packages/x/.dumi/pages/index/index.tsx
- packages/x/components/suggestion/useActive.ts
- packages/x/components/actions/ActionsItem.tsx
- packages/x/.dumi/theme/slots/Content/index.tsx
- packages/x/components/sender/components/ActionButton.tsx
- packages/x/components/_util/motion.ts
- packages/x/.dumi/theme/layouts/DocLayout/index.tsx
- packages/x-markdown/tests/setup.ts
- packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx
- packages/x/.dumi/theme/slots/Content/DocAnchor.tsx
- packages/x/.dumi/theme/slots/Header/index.tsx
- packages/x/components/attachments/index.tsx
- packages/x/components/conversations/tests/index.test.tsx
- packages/x/.dumi/theme/slots/Header/Logo.tsx
- packages/x/components/actions/ActionsCopy.tsx
- packages/x-sdk/tests/setup.ts
- packages/x/components/thought-chain/index.tsx
- packages/x/.dumi/theme/builtins/InstallDependencies/yarn.tsx
- packages/x/.dumi/components/SemanticPreview.tsx
- packages/x/.dumi/theme/common/PrevAndNext.tsx
- packages/x/components/thought-chain/Node.tsx
- package.json
- packages/x/components/attachments/PlaceholderUploader.tsx
- packages/x/components/welcome/index.tsx
- packages/x/.dumi/theme/slots/ContentTabs/index.tsx
- packages/x/components/_util/warning.ts
- packages/x/components/file-card/components/File.tsx
- packages/x/.dumi/theme/common/Color/ColorPalettes.tsx
- packages/x/components/conversations/hooks/useCreation.tsx
- packages/x/docs/playground/ultramodern.tsx
- packages/x/.dumi/theme/slots/Sidebar/index.tsx
- packages/x/components/bubble/EditableContent.tsx
- packages/x/.dumi/hooks/useMenu.tsx
- packages/x/components/sender/SenderSwitch.tsx
- packages/x/components/bubble/Bubble.tsx
- packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
- packages/x/.dumi/theme/slots/Header/Navigation.tsx
- packages/x/components/thought-chain/Status.tsx
- packages/x-markdown/src/XMarkdown/index.tsx
- packages/x/components/attachments/FileList/index.tsx
- packages/x/components/conversations/GroupTitle.tsx
- packages/x/.dumi/theme/slots/Header/SwitchBtn.tsx
- packages/x/components/bubble/BubbleList.tsx
- packages/x/components/actions/Item.tsx
- packages/x/components/sender/TextArea.tsx
- packages/x/components/bubble/hooks/useTyping.ts
- packages/x/components/sender/index.tsx
- packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时,需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时,需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: YumoImer
Repo: ant-design/x PR: 223
File: package.json:224-224
Timestamp: 2024-11-23T15:50:20.802Z
Learning: `rc-drawer` 依赖在 `.dumi/theme/layouts/SidebarLayout` 文件中被使用,是项目中的必要依赖,今后不应建议移除。
📚 Learning: 2024-11-23T15:50:20.802Z
Learnt from: YumoImer
Repo: ant-design/x PR: 223
File: package.json:224-224
Timestamp: 2024-11-23T15:50:20.802Z
Learning: `rc-drawer` 依赖在 `.dumi/theme/layouts/SidebarLayout` 文件中被使用,是项目中的必要依赖,今后不应建议移除。
Applied to files:
packages/x/.dumi/theme/builtins/InstallDependencies/index.tsxpackages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsxpackages/x/.dumi/hooks/useThemeAnimation.tspackages/x/.dumi/theme/common/styles/Common.tsx
🧬 Code graph analysis (2)
packages/x/.dumi/pages/index/components/MainBanner.tsx (1)
packages/x/.dumi/theme/utils.ts (1)
getLocalizedPathname(123-151)
packages/x/components/thought-chain/Item.tsx (1)
packages/x/components/style/motion/blink.ts (1)
blink(4-25)
⏰ 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). (1)
- GitHub Check: WIP
🔇 Additional comments (61)
packages/x/.dumi/pages/index/components/DesignGuide.tsx (1)
3-3: LGTM!导入语句正确。从
classnames迁移到clsx的导入语句正确,符合 PR 的优化目标。packages/x/.dumi/theme/slots/Content/Contributors.tsx (2)
3-3: 导入语句正确从
classnames迁移到clsx的导入语句正确,clsx包支持命名导出。
50-50:clsx使用方式需验证代码从
classNames迁移到clsx,条件类名对象语法{ [className]: condition }的兼容性需确认。若遇到 ES 模块相关错误,请检查项目的 TypeScript 和构建配置是否正确处理了clsx的模块导出。packages/x/components/sender/__tests__/use-speech.test.tsx (1)
5-12: 迁移正确,需验证实现文件同步更新mock 声明从
rc-util迁移到@rc-component/util符合 PR 目标,mock 实现逻辑保持一致。请确认
use-speech.tsx实现文件也已同步迁移到@rc-component/util,以及新包的模块格式与 Jest 配置兼容。packages/x-sdk/tests/utils.tsx (1)
1-2: Verify internal API availability and ES module error relationThese imports rely on internal APIs (the
_rsexport name indicates this is a private/internal interface). Using internal APIs across package migrations is risky because internal APIs can change without notice.Please verify:
- Confirm that
@rc-component/resize-observerexports_rsfrom bothes/utils/observerUtilandlib/utils/observerUtil- Confirm the function signature and behavior match the previous package
- Clarify if the ES module error mentioned in PR comments (
SyntaxError: Unexpected token 'export') is related to this import, and if so, whether the new package structure supports these import pathsConsider checking if there's a public API alternative to
_rsin the new package instead of relying on internal utilities.packages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsx (1)
1-1: 将 dynamicCSS 导入迁移到 @rc-component/util 与 PR 目标一致这一行仅替换了包名,
removeCSS/updateCSS的用法和调用位置保持不变,从语义上是无损迁移,符合统一收敛到@rc-component/util的目标。建议在本地跑一遍文档站构建与 SSR/测试(如果有),确认新的@rc-component/util/lib/Dom/dynamicCSS入口在所有打包环境下都能正常解析,避免此前评论里提到的 ES 模块Unexpected token 'export'报错再次出现。(根据历史 learnings,本次评审按中文回复。)
packages/x/.dumi/theme/common/styles/Common.tsx (1)
2-2:updateCSS路径更新保持行为不变这里同步改为从
@rc-component/util/lib/Dom/dynamicCSS引入updateCSS,与本 PR 其他文件的迁移方式保持一致,useInsertionEffect中的调用签名未变,运行时行为应与之前一致。合并前建议在文档站构建(含 SSR 或测试环境,如适用)中确认该入口在浏览器与 Node 侧都能正常加载,以规避 ES 模块export解析相关的问题。packages/x/components/_util/hooks/use-collapsible.ts (1)
1-2: 导入迁移符合 PR 目标,但需验证依赖和兼容性。这两行将
rc-motion和rc-util迁移到@rc-component/motion和@rc-component/util是正确的重构方向,符合 PR 的包体积优化目标。不过,鉴于 PR 评论中提到的 ES 模块错误("奇怪,咋es模块会报错
SyntaxError: Unexpected token 'export'"),建议验证以下几点:
- 确认
package.json中已正确添加新依赖包及其版本- 确认新旧包之间的 API 完全兼容(
CSSMotionProps类型定义和useMergedState函数签名)- 排查 ES 模块语法错误的根本原因(可能与包导出配置或构建配置有关)
packages/x/components/sender/components/Skill.tsx (2)
3-3: LGTM!从 classnames 迁移到 clsx 的改动正确。导入语法和使用方式都符合 clsx 的 API 规范,逻辑保持一致:始终应用基础类名,条件性地应用禁用状态类名。
Also applies to: 50-52
3-3: 验证 classnames 到 clsx 的迁移完整性和 ES 模块错误。根据 PR 评论中提到的 ES 模块语法错误,需要确认:
clsx依赖是否已正确添加到package.jsonclassnames依赖是否已完全移除- 整个代码库中的
classnames导入是否已全部迁移到clsx- 构建配置是否正确处理
clsx的 ES 模块格式建议检查是否存在遗漏的
classnames导入,并确保依赖配置和构建工具链已适当更新以支持clsx。packages/x/components/bubble/System.tsx (1)
1-1: clsx 导入与使用方式正确,迁移后行为在本组件内等价这里从
classnames迁移为clsx,并仅用于拼接一组可能为string | undefined的 className(hashId / cssVarCls / cls / prefixCls / contextConfig.className / classNames.root / className / rootClassName),在这种用法下clsx(...)与原来的classnames(...)行为一致,不会改变最终生成的 class 字符串。
import { clsx } from 'clsx';也是官方支持的写法(自 clsx ≥ 1.2.0 起提供与默认导出等价的 named export),只需确保仓库中依赖版本满足该前提即可。(github.com)建议本地确认当前
package.json中的clsx版本 ≥ 1.2.0;如后续升级到更高大版本,也请顺带跑一遍相关用例,确保SystemBubble渲染的 className 未发生意外变化。(基于 learnings,按约定使用中文回复。)Also applies to: 34-44
packages/x/components/sender/SlotTextArea.tsx (4)
147-159: LGTM!
clsx处理多个字符串参数的方式与classnames完全一致,这些简单的类名拼接用法迁移正确。
232-235: LGTM!条件类名的对象语法在
clsx中与classnames行为一致。
904-912: LGTM!混合使用字符串和条件对象的模式迁移正确,
clsx完全支持此 API。
2-4: Import changes are syntactically correct.The named export
import { clsx } from 'clsx'is valid—clsx supports both default and named exports in all versions (ESM and CJS). The@rc-component/util/lib/pickAttrspath follows the expected migration pattern.The ES module error (
SyntaxError: Unexpected token 'export') mentioned in PR comments is not caused by theclsximport syntax. If the error persists, investigate build/bundler configuration or other imports in the codebase.packages/x-sdk/.jest.js (1)
2-2: 配置更新与其他包保持一致。添加
@rc-component到编译模块列表的改动与 packages/x/.jest.js 保持一致,确保测试环境正确处理新的依赖包。packages/x-markdown/.jest.js (1)
2-2: 配置更新与其他包保持一致。添加
@rc-component到编译模块列表的改动与其他包的 Jest 配置保持一致,确保整个项目的测试环境统一处理 @rc-component 依赖。packages/x/.jest.js (1)
2-2: 配置更新正确,建议验证模块转换。添加
@rc-component到编译模块列表与 PR 的迁移目标一致。此配置确保新的 @rc-component 包在测试期间被正确转换。根据 PR 评论中提到的 ES 模块错误("奇怪,咋es模块会报错
SyntaxError: Unexpected token 'export'"),建议验证 transformIgnorePatterns 正则表达式是否正确处理作用域包(scoped packages)的路径结构。packages/x/.dumi/hooks/useThemeAnimation.ts (1)
1-1: Verify import migration to @rc-component/utilThe import path migration from
rc-utilto@rc-component/util/lib/Dom/dynamicCSScannot be fully verified at this time. Manual verification needed to confirm:
@rc-component/utilis listed as a dependency inpackage.json- The path
@rc-component/util/lib/Dom/dynamicCSSexists and exportsremoveCSSandupdateCSS- No other incomplete migrations from
rc-utilremain in this file or related filesOnce confirmed, this change appears logically sound given the function signatures and usage remain unchanged.
packages/x/components/_util/hooks/use-shortcut-keys.ts (1)
1-1: 验证新包 KeyCode 导出与旧包 API 的完全兼容性。导入路径从
rc-util/lib/KeyCode迁移到@rc-component/util/lib/KeyCode符合重构目标。请确保:
- 新包导出的
KeyCode对象包含本文件使用的所有属性(如KeyCode.ONE)和支持Object.entries()迭代- 确认 package.json 中
@rc-component/util的版本支持此 API- 搜索整个代码库,确保所有
rc-util/lib/KeyCode导入已完成迁移,避免混用两个包此外,建议联系 PR 作者了解提到的 ES 模块语法错误的具体上下文,确认是否与此导入路径相关。
packages/x/.dumi/theme/builtins/TokenCompare/index.tsx (2)
110-110: Unable to complete verification. The original review comment discusses a classNames to clsx refactor and raises valid concerns about ES module compatibility that require investigation, but these concerns were not conclusively resolved in the original comment. Manual verification by accessing the actual codebase is needed to confirm: (1) that clsx is properly declared as a dependency, (2) the module format of clsx in the project's build environment, and (3) whether the ES module syntax error is related to this change or an existing issue.
5-5: Import syntax for clsx migration is correct.Migrating from classnames to clsx is a sound optimization choice—clsx is significantly smaller (~239 B gzipped vs ~400–700 B for classnames) and offers better runtime performance while maintaining equivalent API compatibility. The named import syntax is correct.
However, verification of the following is needed:
- Confirm clsx is present in package.json dependencies
- Verify line 110 usage has been updated from
classNames()toclsx()- Ensure no remaining classnames imports exist in the codebase
packages/x/components/suggestion/index.tsx (3)
3-4: clsx 与 @rc-component/util 的引入方式看起来正确这里把
classnames/rc-util迁移为clsx和@rc-component/util,useEvent/useMergedState的签名和用法保持不变,看起来是一次机械替换,没有丢参数或逻辑。建议跑一下相关用例或 Storybook 场景,顺带确认之前提到的 ESMUnexpected token 'export'问题在当前依赖组合下已不存在。
174-184: CascaderrootClassName使用 clsx 聚合类名逻辑保持一致这里用
clsx聚合rootClassName、className、classNames.root、prefixCls、hashId、cssVarCls,以及基于block的修饰类,参数顺序与预期一致,没有明显的行为改变风险。这块我这边看是安全的迁移。
201-209: 内部 content 容器的 className 迁移到 clsx 无语义变化内部
<div>的className也改为通过clsx组合,仍然包含prefixCls、rootClassName、contextConfig.classNames.content、classNames.content、"${prefixCls}-content"、hashId和cssVarCls,没有丢失任何原有类名,属于等价替换。这一段改动看起来没有问题。packages/x/.dumi/theme/builtins/InstallDependencies/index.tsx (1)
2-2: 当前代码的 Tab 类型导入是正确的导入
Tab类型来自@rc-component/tabs/lib/interface是正确的做法。antd 的Tabs组件内部基于@rc-component/tabs构建,因此使用该库的Tab类型来定义items数组完全兼容。之前关于错误导入@rc-component/table的问题已得到解决。packages/x/components/sources/Sources.tsx (3)
94-106: clsx 迁移看起来正确
clsx的使用方式与classnames完全兼容,支持字符串、对象和数组参数。这里的迁移保持了相同的逻辑和行为,同时减小了包体积。
161-198: 其余 clsx 用法一致且正确Lines 161、175、184 和 198 处的
clsx用法都符合预期,与原classnames的行为一致。
2-7: @rc-component/ 包的 ESM/CJS 兼容性需要验证*搜索结果显示
@rc-component/motion可能存在 ESM/CJS 互操作性问题:该包可能仅暴露 ESM 构建,CommonJS 命名导出支持受限。行 2-3 的导入方式import { CSSMotionProps, CSSMotion }的可行性取决于项目构建配置和包的exports字段。建议验证:
@rc-component/motion和@rc-component/util的版本及其package.json中的exports字段- 项目
tsconfig.json的moduleResolution和module配置是否支持这些包的导出结构- PR 评论中的 ES 模块错误是否由这些导入引起,或是其他依赖问题
clsx 迁移可行性:搜索确认 clsx 是 classnames 的兼容替代品,但需要检查文件中 clsx 的具体使用模式,特别是是否存在深层嵌套数组的情况(classnames 会完全展平,clsx 行为可能不同)。
packages/x/components/sender/SenderHeader.tsx (2)
82-84: LGTM!clsx 迁移实现正确三处
clsx的使用都正确地替换了classNames:
- 第 82-84 行:正确处理了多个类名和条件 RTL 类
- 第 97 行和第 120 行:正确组合语义化类名
clsx的 API 与classNames完全兼容,且体积更小,符合 PR 的 bundle size 优化目标。Also applies to: 97-97, 120-120
2-4: 验证 @rc-component/motion 与 rc-motion 的兼容性迁移引入了正确的包变更,但需要确保版本一致性:根据官方文档,
@rc-component/motion与rc-motion在 API 上兼容(均导出 CSSMotion、CSSMotionList),但跨版本间可能存在破坏性变更。请检查package.json中两个包的主版本号是否匹配。至于 PR 评论中提到的 ES 模块语法错误,需要在完整的 PR 上下文中验证该错误是否与这些包的导入相关或已被解决。
packages/x/components/attachments/DropArea.tsx (1)
1-1:classnames→clsx迁移在本组件中语义等价,导入方式已验证
- 第 1 行的
import { clsx } from 'clsx';是有效的命名导出方式。clsx v2.1.1(当前最新版本)自 v1.2.0 起官方支持此导出形式,无需依赖esModuleInterop,与社区主流写法保持一致。- 第 77–79 行将
classnames(areaCls, className, {...})替换为clsx(areaCls, className, {...}),两个库在处理字符串参数和条件对象时的逻辑完全相同,因此不会改变生成的 className,也不会影响-on-body这类状态样式的挂载。整体来看,从导入方式到运行时行为,这个迁移都是安全且规范的。
Also applies to: 77-79
packages/x/components/actions/ActionsFeedback.tsx (1)
84-96: 根节点mergedCls使用clsx后语义与原先保持一致这里将原来的
classnames(...)换成clsx(...),参数顺序与内容(prefixCls、feedbackCls、hashId、cssVarCls、rootClassName、classNames.root、${prefixCls}-list、className以及 RTL 条件类)都保持不变,最终生成的类名集合与之前等价,可安全迁移。packages/x/components/code-highlighter/CodeHighlighter.tsx (4)
1-1: clsx 导入方式请确认是否与全仓统一这里使用的是
import { clsx } from 'clsx';,而社区里也有大量使用默认导入的写法(import clsx from 'clsx';)。请确认:
- 当前
clsx版本和类型定义是否显式导出了命名导出clsx;- 本仓库其他文件对
clsx的导入方式是否保持一致。如若类型检查或打包有问题,可以统一改为默认导入写法以避免兼容性隐患。
42-53: 根容器类名从 classnames 迁移到 clsx 实现等价
mergedCls使用 clsx 合并前缀、上下文 className、自身 className 以及 RTL 状态,语义与原先 classnames 版本一致,看起来没有行为变化风险。
69-73: Header 与 HeaderTitle 的 clsx 替换保持原有拼接逻辑Header 和 HeaderTitle 的
className都用 clsx 合并固定前缀和来自 contextConfig / props 的扩展类名,实现与原先 classnames 相同,层级和优先级也清晰,无额外逻辑问题。Also applies to: 77-81
104-104: 代码容器 className 的 clsx 迁移无行为差异
className={clsx(\${prefixCls}-code`, contextConfig.classNames?.code, classNames.code)}` 与旧的 classnames 用法等价,继续支持可选上下文类名和自定义类名覆盖,没发现额外问题。packages/x/.dumi/theme/builtins/ImagePreview/index.tsx (3)
83-86:previewClassName的 clsx 重写与原逻辑等价这里用
clsx(rootClassName, 'clearfix', 'preview-image-boxes', { ... })替代原先的 classnames 拼接方式,条件类:
preview-image-boxes-compare依赖comparablepreview-image-boxes-with-carousel依赖hasCarousel结构与语义都未改变,输出类名集合与旧实现等价,风险很低。
107-110:imageWrapperClassName条件类逻辑保持不变
clsx(imgWrapperCls, { good: coverMeta.isGood, bad: coverMeta.isBad })与原先基于 classnames 的实现完全对齐:
- 根据图片元信息打上
good/bad状态类,- 对于既是 good 又是 bad 的情况,会同时带两个类,与之前行为一致。
这部分实现简洁清晰,无需额外调整。
1-4:clsx的导入与用法方式正确
import { clsx } from 'clsx'和传入字符串及条件对象的使用方式都是官方支持的标准用法。clsx 会自动过滤 falsey 值并展平对象,使得{ foo: true, bar: false }→"foo"的逻辑正确。建议在整体 PR 级别确认以下变更:
package.json/pnpm-lock.yaml中rc-util是否已替换为@rc-component/utilclassnames是否已移除,clsx是否已正确添加为新依赖- 避免重复依赖或缺少依赖的情况
packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx (2)
231-235: 迁移正确,API使用兼容。
clsx的使用方式与classnames完全兼容,条件表达式的写法正确。这里的迁移不会影响功能,同时能够减小bundle体积。
3-3: clsx named import syntax is correct; verify build configuration if ES module errors occur.The import
import { clsx } from 'clsx'is valid—clsx has supported the named export since v1.2.0. However, if the PR encounters "SyntaxError: Unexpected token 'export'" errors, this is typically a module format mismatch in your build or test configuration, not a clsx-specific issue. Ensure your tsconfig, Jest, or bundler is configured to handle both ESM and CommonJS correctly.packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx (1)
2-2: [rewritten comment]
[classification tag]packages/x/components/conversations/Item.tsx (1)
2-2: ConversationsItem 中 pickAttrs / clsx 迁移整体语义保持不变
pickAttrs从 rc-util 迁移到@rc-component/util/lib/pickAttrs,调用方式与过滤配置(aria/data/attr)保持一致,DOM 属性透传行为应与之前相同。mergedCls改用clsx以字符串 + 对象形式组合类名,布尔条件控制 active/disabled 状态,与原本 classnames 写法等价,现有样式逻辑不会改变。建议在 Story 或 demo 里简单确认一次以下场景的最终
className:
- 普通项 / active 项 / disabled 项;
- 带外部
className和prefixCls的组合情况。Also applies to: 6-6, 46-51
packages/x/components/conversations/index.tsx (2)
1-2: 状态合并与根节点类名构建的依赖迁移看起来正确
useMergedState/pickAttrs从 rc-util 迁移到@rc-component/util的对应路径后,调用签名和用法保持不变:defaultActiveKey作为默认值、activeKey作为受控值、onChange回调仍在内部统一触发,行为应与之前一致。domProps = pickAttrs(restProps, { attr: true, aria: true, data: true })与旧实现一致,避免把无关 props 透传到<ul>上,语义正确。- 根节点
mergedCls使用clsx叠加prefixCls、上下文配置 className/classNames.root、外部className/rootClassName以及hashId/cssVarCls,再按方向条件加-rtl,叠加顺序合理、不会覆盖掉用户自定义类名。考虑到本 PR 里曾提到 ESM 报错 “Unexpected token 'export'”,建议在构建/测试配置里确认:
@rc-component/*与antd是否在需要时被编译/转译(比如 Next.js 的transpilePackages、jest/vitest 的transformIgnorePatterns等),避免因为升级 util 源头引入新的转译缺失问题。Also applies to: 4-4, 129-134, 146-156, 172-184
239-243: item / creation / group / list 上使用 clsx 合并类名的写法与原逻辑等价
ConversationsItem的className={clsx(classNames.item, contextConfig.classNames.item, baseConversationInfo.className)}:仍然是“全局配置 → 实例级配置 → 单项自定义 className”的叠加顺序,不会改变现有覆盖关系。Creation/GroupTitle的className={clsx(contextConfig.classNames.xxx, classNames.xxx)}让外部传入的classNames在语义上继续叠加在上下文配置之上,保持组件配置/场景覆盖能力。- 分组列表
className={clsx(\${prefixCls}-list`, { `${prefixCls}-group-collapsible-list`: groupInfo.collapsible })}` 也只是把 “允许折叠” 转成一个附加类,布尔对象写法与原先 classnames 完全兼容。这些改动不会改变现有渲染结果,更多是依赖收敛和体积优化层面的重构,建议在分组开启/关闭、可折叠/不可折叠几种场景下跑一下现有用例或 Story,确认 className 仍符合预期。
Also applies to: 279-283, 303-307
packages/x-markdown/package.json (1)
51-57: 依赖从classnames迁移到clsx看起来一致且必要本包 Markdown 组件在 PR 中已经改用
clsx合并 className,这里直接新增clsx运行时依赖是合理且与代码使用保持一致,没有额外行为变化需要担心。packages/x-sdk/src/x-chat/index.ts (1)
1-1:useEvent迁移到@rc-component/util保持了原有语义这里只是调整了
useEvent的来源,调用方式与依赖关系在文件内部保持不变,onRequest的行为应与原先rc-util版本一致。packages/x/components/bubble/Divider.tsx (1)
2-2:DividerBubble使用clsx合并类名实现等价
rootMergedCls由多段样式来源(hashId/cssVarCls、前缀类名、contextConfig/classNames/rootClassName 等)用clsx串起来,参数顺序合理,语义与原先classnames写法一致,不会影响渲染结果。Also applies to: 35-45
packages/x/.dumi/pages/index/common/Container.tsx (1)
2-2: 容器组件切换到clsx后行为保持不变
className={clsx(styles.container, props.className)}能正常处理props.className为undefined的情况,与原先classnames的行为等价,对外部使用Container的方式没有变化。Also applies to: 51-51
packages/x/components/mermaid/Mermaid.tsx (1)
3-3: Mermaid 组件改用clsx合并类名,覆盖面与条件逻辑正确
mergedCls中同时合并了前缀、上下文 className、语义化classNames.root、hashId/cssVarCls 以及 RTL 条件类,clsx对对象形式条件类支持良好,逻辑清晰。- header、graph、code 三处
className也都按之前结构迁移到clsx,包括renderType === RenderType.Code时隐藏 graph 的条件类名,行为与旧实现一致。Also applies to: 79-90, 272-277, 299-305, 314-318
packages/x/.dumi/pages/index/components/MainBanner.tsx (1)
3-3: 主站 Banner 使用clsx合并按钮和 Lottie 类名实现合理
- Start 按钮和 Design 按钮通过
clsx(styles.btn, styles.xxx)组合基类与变体类,便于后续扩展更多修饰 class。- Lottie 组件包装处
clsx(styles.lottie, direction === 'rtl' && styles.lottie_rtl)的条件类处理 RTL 场景,语义清晰,与原先classnames写法等价。Also applies to: 263-264, 268-269, 278-279
packages/x/components/actions/ActionsMenu.tsx (1)
3-3: ActionsMenu 使用clsx合并下拉菜单类名正确且易扩展
- Dropdown 的
className={clsx(\${prefixCls}-dropdown`, classNames.itemDropdown, dropdownProps?.className)}` 既保留了内部前缀,也兼容外部透传样式和语义化覆盖,顺序合理。- 内部 item 使用
clsx(\${prefixCls}-item`, `${prefixCls}-sub-item`, classNames?.item)` 也保持了原有结构,仅替换工具函数,无行为变化。Also applies to: 53-54, 60-61
packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx (1)
4-4: Fix CSS syntax error initemMetastyle and reviewclsxusage consistencyThe style at line 30 has an extra closing brace:
padding-inline: ${token.padding}px};should bepadding-inline: ${token.padding}px;. This invalid CSS prevents the property from being parsed correctly.The three instances of
className={clsx(styles.xxx)}are functionally correct and maintain consistency with the unifiedclsxapproach. While these could be simplified toclassName={styles.xxx}, keeping theclsxwrapper is acceptable for consistency.Apply the fix to the
itemMetastyle definition as shown in the diff. Verify whether similar CSS syntax errors with extra}exist elsewhere in the codebase (e.g., searching forpx};patterns).packages/x-sdk/package.json (1)
46-48: 将 @rc-component/util 放到 dependencies 里是合理的x-sdk 在运行时会直接使用 util,放在
dependencies而不是devDependencies符合预期,也和本次 rc-* → @rc-component/* 的重构目标一致。建议在这个包下单独跑一遍compile/test,确认新的 @rc-component/util 在打包和测试环境(father、jest、tsx 等)下都能正常解析模块格式(尤其是 ESM/CJS 差异)。Based on learnings, 使用中文进行代码评审。packages/x/.dumi/theme/slots/Content/ColumnCard.tsx (1)
4-4: ColumnCard 中从 classnames 迁移到 clsx 行为等价这里的改动只是在
ZhihuOutlined、YuqueOutlined、JuejinLogo三处把classNames(logo, 'xxx-logo')换成了clsx(logo, 'xxx-logo'),配合createStyles里&.xxx-logo的写法,最终生成的类名组合和原来一致,不会影响图标配色、布局或链接行为,属于安全的实现细节替换。Also applies to: 144-145, 178-179, 212-213
packages/x/components/file-card/components/ImageLoading.tsx (1)
2-2: ImageLoading 中 clsx 替换是 1:1,无行为变化外层容器、Skeleton.Node 的
rootClassName以及内部 Flex 的className都只是从 classnames 换成了 clsx,传入仍是原来的字符串与对象组合,生成的类名集合不变,percent文案和图标渲染逻辑也未改,整体属于安全迁移。如果后续再整理的话,可以考虑把mergeSinkProps之类的命名调整为更贴近含义(例如mergedSpinProps),纯属可选的小清理。Also applies to: 28-29, 40-41, 44-46
packages/x/components/thought-chain/Item.tsx (4)
129-143: 根容器 className 组合用 clsx 替换 classnames 合理这里把根节点的
className从原来的 classnames 切换到clsx,依次组合了prefixCls、hashId、className、cssVarCls、rootClassName、classNames?.root以及itemCls,并根据variant / onClick / status / direction条件附加修饰类,结构与原实现一致,没有丢失任何旧的 class,行为应保持不变。
156-159: 内容容器的 blink 动画 class 逻辑清晰且无行为变化
className={clsx(\${itemCls}-content`, { [`${prefixCls}-motion-blink`]: blink })}保留了原本的内容容器基础类,并在blink为 true 时附加`${prefixCls}-motion-blink``。这与 blink 动画样式的命名约定吻合,且不会影响未开启 blink 时的渲染。
160-177: 标题与描述节点的 clsx 迁移保持既有样式扩展点
- 标题节点:
className={clsx(\${itemCls}-title`, classNames?.title, { [`${itemCls}-title-with-description`]: description })},在保留基础类的前提下继续支持外部通过classNames?.title覆盖,并在存在description` 时附加修饰类,逻辑与原实现对齐。- 描述节点:
className={clsx(\${itemCls}-description`, classNames?.description)}同样保留了基础类和classNames?.description` 扩展点。整体看,这里从 classnames 迁移到 clsx 没有改变条件判断和可定制性,可以直接接受。
1-2: No change needed to the clsx importThe current named import
import { clsx } from 'clsx'is valid and supported. The clsx package exports both a default export and a named export aliasclsx, making both import styles functionally equivalent:
import clsx from 'clsx'(default import)import { clsx } from 'clsx'(named import)The named export was intentionally added to support TypeScript users who prefer to avoid the
esModuleInteropcompiler option. Either style will work correctly without runtime errors.Likely an incorrect or invalid review comment.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/x/components/_util/hooks/use-shortcut-keys.ts (1)
219-228: 清理函数中存在严重 bug:第 226 行应使用 removeEventListener。清理函数中的第 226 行错误地使用了
addEventListener而不是removeEventListener,这会导致每次组件重新渲染时都会累积keyup事件监听器,造成内存泄漏。虽然此问题与当前 PR 的迁移工作无关,但属于严重的运行时问题,建议立即修复。
应用以下 diff 修复此 bug:
useEffect(() => { if (flattenShortcutKeys.length === 0) return; document.addEventListener('keydown', onKeydown); document.addEventListener('keyup', onKeyup); return () => { document.removeEventListener('keydown', onKeydown); - document.addEventListener('keyup', onKeyup); + document.removeEventListener('keyup', onKeyup); }; }, [flattenShortcutKeys.length, observer]);packages/x/components/thought-chain/index.tsx (1)
54-68: 检测到重复的 className 属性在
mergedCls的clsx()调用中,className出现了两次(第 55 行和第 62 行)。这会导致相同的类名被添加两次,虽然最终渲染结果不会有问题(重复的类名会被浏览器忽略),但这是冗余的。建议应用以下修改移除重复项:
const mergedCls = clsx( - className, prefixCls, contextConfig.className, contextConfig.classNames.root, rootClassName, hashId, cssVarCls, className, classNames.root, `${prefixCls}-box`, { [`${prefixCls}-rtl`]: direction === 'rtl', }, );packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx (1)
29-31: itemMeta 样式中多余的}可能导致 CSS 属性失效
itemMeta的样式里:padding-inline: ${token.padding}px};末尾多了一个},生成后的 CSS 会类似padding-inline: 16px};,这是无效值,浏览器会忽略该属性。建议修正为:- itemMeta: css` - padding-inline: ${token.padding}px}; - `, + itemMeta: css` + padding-inline: ${token.padding}px; + `,以确保 padding 正常生效。
♻️ Duplicate comments (1)
packages/x/.dumi/components/SemanticPreview.tsx (1)
152-158: 单个类名无需使用clsx包裹当只有一个类名时,直接使用即可,无需
clsx函数调用。此问题已在之前的审查中指出。- <div className={clsx(styles.container)} ref={containerRef}> + <div className={styles.container} ref={containerRef}> <Row style={{ minHeight: height }}> - <Col span={16} className={clsx(styles.colWrap)}> + <Col span={16} className={styles.colWrap}> <XProvider theme={{ token: { motion: false } }}>{cloneNode}</XProvider> </Col> <Col span={8}> - <ul className={clsx(styles.listWrap)}> + <ul className={styles.listWrap}>以及第 182 行:
- className={clsx(styles.listItem)} + className={styles.listItem}Also applies to: 182-182
🧹 Nitpick comments (2)
packages/x/components/mermaid/Mermaid.tsx (1)
3-3: Consider aligning clsx import style with package conventions (stylistic, not critical)The current import
import { clsx } from 'clsx';is valid and supported. However, clsx examples typically show the default import pattern:import clsx from 'clsx';. For consistency with common usage patterns and the package's primary export, consider adopting the default import style.-import { clsx } from 'clsx'; +import clsx from 'clsx';Note: Both styles are equivalent; this is a stylistic preference rather than a functional issue.
packages/x/components/conversations/index.tsx (1)
1-2: Conversations 中 rc-util → @rc-component/util 与 clsx 迁移整体合理
useMergedState与pickAttrs改为从@rc-component/util引入后,调用参数仍为{ value, onChange }和{ attr: true, aria: true, data: true },mergedActiveKey的受控/非受控逻辑与 DOM 属性过滤行为都保持一致。- 根
mergedCls、每个ConversationsItem、Creation、分组GroupTitle以及内部列表类名统一改用clsx合并,保留了prefixCls、contextConfig.classNames.*、外部classNames.*、rootClassName和 RTL 标记,类名顺序也基本与之前一致,样式语义不会改变。- 如果后续
useXComponentConfig('conversations')允许缺省classNames,可以考虑将若干访问改为可选链(例如contextConfig.classNames?.root),做一点防御式处理,但这属于小优化,不影响当前实现。Also applies to: 4-4, 172-184, 239-243, 279-283, 303-307
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (105)
-
package.json(1 hunks) -
packages/x-markdown/.jest.js(1 hunks) -
packages/x-markdown/package.json(1 hunks) -
packages/x-markdown/src/XMarkdown/index.tsx(2 hunks) -
packages/x-markdown/tests/setup.ts(1 hunks) -
packages/x-markdown/tests/setupAfterEnv.ts(1 hunks) -
packages/x-sdk/.jest.js(1 hunks) -
packages/x-sdk/package.json(1 hunks) -
packages/x-sdk/src/x-chat/index.ts(1 hunks) -
packages/x-sdk/tests/setup.ts(1 hunks) -
packages/x-sdk/tests/utils.tsx(1 hunks) -
packages/x/.dumi/components/SemanticPreview.tsx(4 hunks) -
packages/x/.dumi/hooks/useMenu.tsx(2 hunks) -
packages/x/.dumi/hooks/useThemeAnimation.ts(1 hunks) -
packages/x/.dumi/pages/index/common/Container.tsx(2 hunks) -
packages/x/.dumi/pages/index/components/DesignGuide.tsx(2 hunks) -
packages/x/.dumi/pages/index/components/MainBanner.tsx(3 hunks) -
packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx(2 hunks) -
packages/x/.dumi/pages/index/index.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/ImagePreview/index.tsx(3 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/index.tsx(1 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/utoo.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/InstallDependencies/yarn.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx(3 hunks) -
packages/x/.dumi/theme/builtins/TokenCompare/index.tsx(2 hunks) -
packages/x/.dumi/theme/builtins/VideoPlayer/index.tsx(2 hunks) -
packages/x/.dumi/theme/common/Color/ColorPalettes.tsx(2 hunks) -
packages/x/.dumi/theme/common/PrevAndNext.tsx(3 hunks) -
packages/x/.dumi/theme/common/styles/Common.tsx(1 hunks) -
packages/x/.dumi/theme/layouts/DocLayout/index.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Content/ColumnCard.tsx(4 hunks) -
packages/x/.dumi/theme/slots/Content/Contributors.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Content/DocAnchor.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Content/index.tsx(2 hunks) -
packages/x/.dumi/theme/slots/ContentTabs/index.tsx(1 hunks) -
packages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsx(1 hunks) -
packages/x/.dumi/theme/slots/Header/Actions.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/Logo.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/Navigation.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/SwitchBtn.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Header/index.tsx(2 hunks) -
packages/x/.dumi/theme/slots/Sidebar/index.tsx(1 hunks) -
packages/x/.jest.js(1 hunks) -
packages/x/components/_util/hooks/use-collapsible.ts(1 hunks) -
packages/x/components/_util/hooks/use-shortcut-keys.ts(1 hunks) -
packages/x/components/_util/motion.ts(1 hunks) -
packages/x/components/_util/warning.ts(1 hunks) -
packages/x/components/actions/ActionsAudio.tsx(2 hunks) -
packages/x/components/actions/ActionsCopy.tsx(2 hunks) -
packages/x/components/actions/ActionsFeedback.tsx(4 hunks) -
packages/x/components/actions/ActionsItem.tsx(2 hunks) -
packages/x/components/actions/ActionsMenu.tsx(2 hunks) -
packages/x/components/actions/Item.tsx(2 hunks) -
packages/x/components/actions/index.tsx(4 hunks) -
packages/x/components/attachments/DropArea.tsx(2 hunks) -
packages/x/components/attachments/FileList/index.tsx(4 hunks) -
packages/x/components/attachments/PlaceholderUploader.tsx(2 hunks) -
packages/x/components/attachments/index.tsx(6 hunks) -
packages/x/components/bubble/Bubble.tsx(6 hunks) -
packages/x/components/bubble/BubbleList.tsx(3 hunks) -
packages/x/components/bubble/Divider.tsx(2 hunks) -
packages/x/components/bubble/EditableContent.tsx(1 hunks) -
packages/x/components/bubble/System.tsx(2 hunks) -
packages/x/components/bubble/TypingContent.tsx(2 hunks) -
packages/x/components/bubble/hooks/useTyping.ts(1 hunks) -
packages/x/components/code-highlighter/CodeHighlighter.tsx(4 hunks) -
packages/x/components/conversations/Creation.tsx(2 hunks) -
packages/x/components/conversations/GroupTitle.tsx(3 hunks) -
packages/x/components/conversations/Item.tsx(2 hunks) -
packages/x/components/conversations/__tests__/index.test.tsx(1 hunks) -
packages/x/components/conversations/demo/shortcutKeys.tsx(1 hunks) -
packages/x/components/conversations/hooks/useCreation.tsx(2 hunks) -
packages/x/components/conversations/index.tsx(5 hunks) -
packages/x/components/file-card/FileCard.tsx(5 hunks) -
packages/x/components/file-card/List.tsx(4 hunks) -
packages/x/components/file-card/components/File.tsx(3 hunks) -
packages/x/components/file-card/components/ImageLoading.tsx(3 hunks) -
packages/x/components/mermaid/Mermaid.tsx(5 hunks) -
packages/x/components/prompts/index.tsx(6 hunks) -
packages/x/components/sender/SenderHeader.tsx(4 hunks) -
packages/x/components/sender/SenderSwitch.tsx(3 hunks) -
packages/x/components/sender/SlotTextArea.tsx(5 hunks) -
packages/x/components/sender/TextArea.tsx(2 hunks) -
packages/x/components/sender/__tests__/use-speech.test.tsx(1 hunks) -
packages/x/components/sender/components/ActionButton.tsx(2 hunks) -
packages/x/components/sender/components/LoadingButton.tsx(2 hunks) -
packages/x/components/sender/components/Skill.tsx(2 hunks) -
packages/x/components/sender/hooks/use-speech.ts(1 hunks) -
packages/x/components/sender/index.tsx(5 hunks) -
packages/x/components/sources/Sources.tsx(6 hunks) -
packages/x/components/sources/components/CarouselCard.tsx(3 hunks) -
packages/x/components/suggestion/index.tsx(3 hunks) -
packages/x/components/suggestion/useActive.ts(1 hunks) -
packages/x/components/think/Think.tsx(4 hunks) -
packages/x/components/thought-chain/Item.tsx(4 hunks) -
packages/x/components/thought-chain/Node.tsx(5 hunks) -
packages/x/components/thought-chain/Status.tsx(2 hunks) -
packages/x/components/thought-chain/index.tsx(4 hunks) -
packages/x/components/welcome/index.tsx(6 hunks) -
packages/x/docs/playground/ultramodern.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (67)
- packages/x/components/conversations/tests/index.test.tsx
- packages/x/components/conversations/hooks/useCreation.tsx
- packages/x/components/bubble/System.tsx
- packages/x/.dumi/theme/slots/Header/Navigation.tsx
- packages/x/.dumi/theme/builtins/InstallDependencies/bun.tsx
- packages/x/components/bubble/Divider.tsx
- packages/x-markdown/tests/setupAfterEnv.ts
- packages/x/components/actions/Item.tsx
- packages/x/components/sender/SenderHeader.tsx
- packages/x/.dumi/theme/slots/Content/Contributors.tsx
- packages/x/.dumi/pages/index/components/SceneIntroduction/index.tsx
- packages/x/docs/playground/ultramodern.tsx
- packages/x/components/attachments/DropArea.tsx
- packages/x/.dumi/theme/builtins/InstallDependencies/yarn.tsx
- packages/x/components/welcome/index.tsx
- packages/x/components/sender/SenderSwitch.tsx
- packages/x/components/sources/components/CarouselCard.tsx
- packages/x/.dumi/theme/layouts/DocLayout/index.tsx
- packages/x/components/attachments/FileList/index.tsx
- packages/x/.dumi/theme/common/PrevAndNext.tsx
- packages/x/components/bubble/hooks/useTyping.ts
- packages/x/.dumi/theme/builtins/ImagePreview/index.tsx
- packages/x/components/conversations/GroupTitle.tsx
- packages/x/.dumi/theme/slots/Content/ColumnCard.tsx
- packages/x/.dumi/theme/slots/ContentTabs/index.tsx
- packages/x/components/actions/ActionsFeedback.tsx
- packages/x/components/_util/warning.ts
- packages/x/components/sender/components/LoadingButton.tsx
- packages/x/.dumi/theme/builtins/TokenCompare/index.tsx
- packages/x/components/sources/Sources.tsx
- packages/x-markdown/package.json
- packages/x/.dumi/theme/slots/Header/index.tsx
- packages/x/components/prompts/index.tsx
- packages/x/components/conversations/Item.tsx
- packages/x-sdk/src/x-chat/index.ts
- packages/x/.dumi/hooks/useThemeAnimation.ts
- packages/x/components/file-card/components/ImageLoading.tsx
- packages/x/components/sender/TextArea.tsx
- packages/x/components/sender/index.tsx
- packages/x/components/thought-chain/Node.tsx
- packages/x/components/attachments/index.tsx
- packages/x/.dumi/pages/index/common/Container.tsx
- packages/x/components/conversations/demo/shortcutKeys.tsx
- packages/x/components/suggestion/useActive.ts
- packages/x/components/actions/ActionsAudio.tsx
- packages/x/components/actions/ActionsItem.tsx
- packages/x/components/file-card/List.tsx
- packages/x/.dumi/theme/slots/Header/Logo.tsx
- packages/x/components/thought-chain/Status.tsx
- packages/x/.dumi/pages/index/components/DesignGuide.tsx
- packages/x/.dumi/hooks/useMenu.tsx
- packages/x/.dumi/theme/builtins/VideoPlayer/index.tsx
- packages/x/components/bubble/EditableContent.tsx
- packages/x/components/file-card/FileCard.tsx
- packages/x/.dumi/theme/slots/Content/index.tsx
- packages/x/.dumi/pages/index/index.tsx
- packages/x/components/_util/hooks/use-collapsible.ts
- packages/x/components/bubble/TypingContent.tsx
- packages/x/.dumi/theme/builtins/InstallDependencies/npm.tsx
- packages/x/.dumi/theme/slots/Content/DocAnchor.tsx
- packages/x/components/attachments/PlaceholderUploader.tsx
- packages/x/components/actions/ActionsCopy.tsx
- packages/x-markdown/src/XMarkdown/index.tsx
- packages/x-markdown/tests/setup.ts
- packages/x/.dumi/theme/builtins/InstallDependencies/index.tsx
- packages/x/components/actions/ActionsMenu.tsx
- packages/x/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时,需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时,需要用中文回复中文评论。该项目的文档支持中英双语。
📚 Learning: 2024-11-23T15:50:20.802Z
Learnt from: YumoImer
Repo: ant-design/x PR: 223
File: package.json:224-224
Timestamp: 2024-11-23T15:50:20.802Z
Learning: `rc-drawer` 依赖在 `.dumi/theme/layouts/SidebarLayout` 文件中被使用,是项目中的必要依赖,今后不应建议移除。
Applied to files:
packages/x/.dumi/theme/common/styles/Common.tsxpackages/x/.dumi/theme/slots/Sidebar/index.tsxpackages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsx
🧬 Code graph analysis (2)
packages/x/components/thought-chain/Item.tsx (1)
packages/x/components/style/motion/blink.ts (1)
blink(4-25)
packages/x/.dumi/pages/index/components/MainBanner.tsx (1)
packages/x/.dumi/theme/utils.ts (1)
getLocalizedPathname(123-151)
⏰ 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). (2)
- GitHub Check: build preview
- GitHub Check: size
🔇 Additional comments (45)
packages/x/.dumi/theme/slots/Footer/AdditionalInfo.tsx (1)
1-1: 将rc-util动态样式工具迁移到@rc-component/util看起来合理这一行从
rc-util/lib/Dom/dynamicCSS切到@rc-component/util/lib/Dom/dynamicCSS,调用方式与参数签名保持不变,对InfoNewVersion的运行时行为应无影响,符合本 PR 的依赖迁移目标。建议在本地确认以下两点:
@rc-component/util中的removeCSS/updateCSS是否与旧实现保持同名同路径导出(尤其是lib/Dom/dynamicCSS的相对路径)。- 构建后的 ESM/CJS 产物不会再出现你之前提到的
SyntaxError: Unexpected token 'export'之类问题(跑一遍 dumi 文档站或打包即可确认)。如果这两个点都没问题,这个变更就可以放心合入。
packages/x/components/sender/__tests__/use-speech.test.tsx (1)
5-12: jest.mock 路径更新与依赖迁移目标一致将 mock 源从
'rc-util'改为'@rc-component/util'与本 PR 的依赖迁移保持一致,mock 结构也仍然提供useEvent与useMergedState,对现有用例行为没有功能性影响,看起来是安全的依赖重定向。
Based on learnings.packages/x/.dumi/theme/common/styles/Common.tsx (1)
2-13: 导入路径迁移到 @rc-component/util 看起来正确
updateCSS从rc-util/lib/Dom/dynamicCSS迁到@rc-component/util/lib/Dom/dynamicCSS,调用方式保持不变,符合本 PR 统一迁移 rc-* 到 @rc-component/* 的目标,整体行为应保持一致,没有看到额外风险。
Based on learnings, 使用中文回复。packages/x/.dumi/theme/slots/Sidebar/index.tsx (1)
2-2: 引入 @rc-component/drawer 的方式看起来正确本文件只是把
MobileMenu的来源从rc-drawer切到@rc-component/drawer,组件用法保持不变,这里逻辑没有问题,也符合本 PR 的依赖迁移目标。建议顺带确认两点:
package.json中已正确新增@rc-component/drawer依赖并移除旧的rc-drawer(或按项目规划保留)。- 文档站 / dumi 构建以及可能的 SSR 环境对
@rc-component/drawer的 ESM/CJS 解析没有问题,之前提到的SyntaxError: Unexpected token 'export'现在应已通过 CI 和本地构建验证。(基于 learnings,这里只检查从
rc-drawer到@rc-component/drawer的迁移正确性,不建议移除该类依赖本身。)packages/x/.dumi/theme/common/Color/ColorPalettes.tsx (1)
1-1: No changes required. Theimport { clsx } from 'clsx'syntax is valid and officially supported.Since clsx v1.2.0, the package exports both a default export and a named export alias. Both import styles are functionally equivalent and documented:
import clsx from 'clsx';import { clsx } from 'clsx';The named import will work correctly at runtime, and the usage on line 84 is valid.
Likely an incorrect or invalid review comment.
packages/x/components/_util/hooks/use-shortcut-keys.ts (1)
1-1: 验证 @rc-component/util 包的 KeyCode 导出兼容性。该导入路径迁移与 PR 目标一致(rc-util → @rc-component/util)。由于 PR 评论中提到过 ES 模块相关的问题,建议确保新包的
KeyCode导出与原包 API 完全兼容,特别是第 40 行的KeyCode.ONE和第 55 行的Object.entries(KeyCode)用法。packages/x/components/thought-chain/Item.tsx (2)
129-143: clsx 迁移正确无误所有
clsx()的使用都正确地替换了原来的classnames(),包括:
- 对象语法用于条件类名(如
{ [className]: condition })- 多参数传递
- 字符串和对象的混合使用
这些用法在
clsx中都得到完全支持,不会引入任何功能变化。Also applies to: 156-158, 163-165, 173-173
1-2: 验证新包版本兼容性和安全性从
rc-util迁移到@rc-component/util以及用clsx替代classnames的变更符合 PR 目标。导入语句正确指向新包。建议在合并前确认:
@rc-component/util和clsx包在项目依赖中正确声明- 新包版本与项目其他依赖兼容
- npm 安装成功且无版本冲突
packages/x/components/thought-chain/index.tsx (2)
1-2: 导入迁移正确与
Item.tsx中的变更一致,从rc-util迁移到@rc-component/util,并引入clsx替代classnames。
109-112: clsx 使用正确在 Context Provider 的
classNames对象和ThoughtChainNode组件的className属性中正确使用了clsx()进行类名合并。迁移符合预期。Also applies to: 127-127
packages/x/components/file-card/components/File.tsx (2)
38-41: classnames → clsx 的调用迁移是等价的,逻辑保持不变
mergedCls以及 icon/name/description 处的clsx调用方式与原先classnames(...)的模式一致:字符串 + 可选字符串 + 条件对象,classNames.*可能为undefined的情况也会被clsx自动忽略,不会引入多余空格或错误类名。整体看这里纯属工具替换,没有行为变化,组件的交互和样式控制逻辑保持不变。Also applies to: 56-69
1-1: Clsx import approach is sound; verify dependency migration completenessThe change to
import { clsx } from 'clsx';aligns with the usage patterns below and poses no semantic issues. From this file's perspective, the migration is safe. However, confirm two key points:
package.jsonincludes the newclsxdependency and has removedclassnames(or confirmed it's no longer referenced in production code).- No orphaned
classnamesimports remain elsewhere in the repository to avoid bundle bloat from dual libraries.Before merging, verify:
- All
classnamesimports have been replaced or removed across the codebasepackage.jsoncorrectly declaresclsxand no longer listsclassnamesas a dependency- No production code still references the old library
packages/x/components/mermaid/Mermaid.tsx (1)
79-90: clsx 合并类名逻辑与原 classnames 保持一致,语义清晰
mergedCls、header / graph / code 几处className={clsx(...)}
- 都只传入字符串、可选字符串与布尔条件对象;
- 继续包含
prefixCls、语义 classNames(root/header/graph/code)、hashId、cssVarCls和 RTL 修饰类;- 不引入额外条件或顺序变化。
整体看起来只是从
classnames平移到clsx,不会改变渲染结果,改动是安全的。👍Also applies to: 272-276, 299-304, 314-318
packages/x-sdk/tests/setup.ts (1)
44-48: 注释更新与依赖迁移一致,行为保持不变这里仅把说明从 rc-motion 更新为
@rc-component/motion,下方 AnimationEvent / TransitionEvent 的 polyfill 实现未改,仍可兼容 css-animation 与 motion 依赖,没问题。(根据长期学习记录,本次评审统一使用中文回复。)建议在 CI 或本地跑一遍 x-sdk 相关动画用例,顺带确认迁移到
@rc-component/motion后没有额外 warning。packages/x/components/_util/motion.ts (1)
1-6: motion 类型导入迁移到 @rc-component/motion,逻辑不变
CSSMotionProps、MotionEventHandler、MotionEndEventHandler以及MotionEvent改为从@rc-component/motion及其lib/interface导入,与本 PR 其它 @rc-component 迁移保持一致,只影响类型检查,不变更运行时逻辑。请在本地跑一遍 TypeScript 构建或相关单测(例如
tsc -b/ motion 相关测试),确认@rc-component/motion/lib/interface路径在当前版本下可正常解析。packages/x/components/sender/hooks/use-speech.ts (1)
1-1: use-speech Hook 引用迁移到 @rc-component/util,行为保持
useEvent和useMergedState的来源替换为@rc-component/util,Hook 内部逻辑未改,预期行为应与之前一致。请确认
packages/x/package.json中已移除rc-util并添加了匹配版本的@rc-component/util,并跑一遍 sender 相关用例,确保语音控制逻辑(受控/非受控、权限监听)正常。package.json (1)
18-18: prepare 脚本改为直接运行 husky,符合新版本用法在已升级到
husky@^9.1.6的前提下,把"prepare"从husky install改为husky是符合官方推荐的配置方式,简化了初始化流程,没问题。建议在全新 clone 的环境执行一次
npm install/pnpm install,确认 Git hooks 会按预期自动生成并生效。packages/x/.dumi/theme/builtins/InstallDependencies/utoo.tsx (1)
2-2: UtooIcon 使用 clsx 组装 className,等价替换将
classNames(styles.iconWrap, className)替换为clsx(styles.iconWrap, className),参数列表保持不变,对于字符串和可选外部className的组合,clsx 与原 classnames 行为一致。(github.com)请确认根包和
packages/x中已统一引入clsx依赖,并确保 dumi 主题构建及文档站点在此改动后可以正常编译、渲染。Also applies to: 24-24
packages/x/components/conversations/Creation.tsx (1)
1-1: Creation 组件切换到 clsx 组装 className,逻辑保持一致
className由clsx(prefixCls, className, \${prefixCls}-${mergeAlign}`, { `${prefixCls}-disabled`: disabled })` 构造,参数结构与原先 classnames 版本一致,按钮禁用态的样式开关逻辑不变。(github.com)只要外部始终传入有效的
prefixCls,生成的各类${prefixCls}-*class 都会符合预期;建议在常见 align 组合(start/center/end)和 disabled 状态下简单回归一下 UI。Also applies to: 51-53
packages/x-sdk/tests/utils.tsx (1)
1-2: 测试工具改用 @rc-component/resize-observer,逻辑不变但依赖内部导出
onEsResize/onLibResize的来源仅从rc-resize-observer切换到@rc-component/resize-observer,triggerResize仍通过_rs触发观察回调,测试语义保持不变。@rc-component/resize-observer本身就是 rc-resize-observer 的 scoped 版本,API 结构基本延续。(npmjs.com)这里依赖了
utils/observerUtil的内部_rs导出,如果后续库内部结构有调整,问题会优先在测试里暴露;建议在依赖升级时关注一下该文件是否还能正常通过编译与测试。packages/x/.dumi/pages/index/components/MainBanner.tsx (1)
3-3: MainBanner 使用 clsx 统一处理 className,行为与原先一致
MainBanner中按钮与 Lottie 的className构造都由 classnames 换成了clsx:按钮使用clsx(styles.btn, styles.startBtn/designBtn),动画使用clsx(styles.lottie, direction === 'rtl' && styles.lottie_rtl),这些都是 clsx 官方推荐的典型用法,生成结果与旧实现等价。(github.com)建议在文档站切换中/英文及 RTL 场景下简单手测 Banner:确认按钮样式和 RTL 布局下的 Lottie 位置与预期一致即可。
Also applies to: 263-279
packages/x/components/suggestion/index.tsx (1)
3-4: Suggestion 中 clsx 与 @rc-component/util 迁移语义保持一致
useMergedState/useEvent改为从@rc-component/util引入后,用法与原先 rc-util 版本一致;rootClassName和内容容器的类名合并改用clsx,顺序与之前保持一致,RTL 与 block 等状态类名逻辑不变,看起来不会影响行为或样式。前提是依赖中使用的 clsx 版本支持命名导出({ clsx })。Also applies to: 93-100, 107-116, 174-184, 201-209
packages/x/components/sender/components/ActionButton.tsx (1)
2-2: ActionButton 使用 clsx 组合类名方式正确
className={clsx(prefixCls, className, { [${prefixCls}-disabled]: mergedDisabled })}与之前的 classnames 调用语义一致,仍然只在禁用时追加-disabled类,行为与视觉都应保持不变。Also applies to: 52-54
packages/x/components/sender/components/Skill.tsx (1)
3-3: Skill 关闭按钮迁移到 clsx 后行为保持一致关闭按钮的类名从 classnames 切换到
clsx,依旧只在config.disabled为 true 时附加-close-disabled类名,点击禁用时提前 return 的逻辑未改动,整体语义一致。Also applies to: 50-52
packages/x/.dumi/theme/builtins/MarkdownPluginsOverView.tsx (1)
4-4: MarkdownPluginsOverView 中 clsx 替换保持原有样式语义
styles.container、styles.item、styles.itemMeta现在通过clsx传入,当前都是单一类名,和直接传字符串等价,也方便后续需要时按条件合并更多类名,对现有布局不会有影响。Also applies to: 58-58, 63-67
packages/x/.dumi/theme/builtins/InstallDependencies/pnpm.tsx (1)
2-2: PnpmIcon 中 clsx 替换行为正确
<span className={clsx(styles.iconWrap, className)} />与原来的 classnames 用法等价,既保证了基础样式iconWrap,也能安全地附加外部传入的className,不会改变现有渲染效果。Also applies to: 24-24
packages/x/components/code-highlighter/CodeHighlighter.tsx (1)
1-1: CodeHighlighter 中类名合并迁移到 clsx 无语义变化根节点的
mergedCls以及 header、header title 和 code 容器的类名现在都通过clsx合并,依旧包含prefixCls、contextConfig.classNames.*、外部classNames.*与hashId/cssVarCls,RTL 时才追加-rtl,整体逻辑与原来的 classnames 版本一致。Also applies to: 42-53, 69-73, 77-81, 104-105
packages/x/.dumi/theme/builtins/Previewer/CodePreviewer.tsx (1)
6-6: CodePreviewer 中 clsx 及 @rc-component/util 依赖迁移看起来正确
codeBoxClass和highlightClass现在通过clsx合并,基类(code-box/highlight-wrapper)加上若干布尔状态类(如expand、highlight-wrapper-expand)的逻辑与原来的 classnames 版本一致,不会影响展开/收起行为。- codesandbox 生成的
package.json里新增了'@rc-component/util': pkgDependencyList['@rc-component/util'],与主包使用的新依赖保持一致,有利于在线示例在 CodeSandbox 上正常运行。建议确认pkgDependencyList中已包含该键,否则可能会生成没有版本号的依赖项。Also applies to: 163-167, 170-172, 295-301
packages/x/components/sender/SlotTextArea.tsx (4)
2-4: 导入迁移正确从
rc-util迁移到@rc-component/util,从classnames迁移到clsx的改动符合 PR 目标。
147-156: clsx 使用合理这两处
clsx调用都用于组合多个类名,使用方式正确。
232-235: 条件类名组合正确使用
clsx处理带条件的类名组合,逻辑清晰。
904-912: 主容器类名组合正确使用
clsx组合多个类名并处理 RTL 方向条件,实现合理。packages/x/components/think/Think.tsx (2)
2-6: 依赖迁移完整正确迁移了所有依赖:
rc-motion→@rc-component/motionrc-util→@rc-component/utilclassnames→clsx
92-103: clsx 类名组合实现正确所有
clsx调用都用于组合多个类名或处理条件类名,符合最佳实践。Also applies to: 132-142, 148-158
packages/x/.dumi/components/SemanticPreview.tsx (1)
204-208: 多条件类名组合使用正确此处
clsx用于组合多个类名并处理条件逻辑,使用恰当。packages/x/components/actions/index.tsx (2)
1-4: 依赖迁移正确正确迁移了
CSSMotion、pickAttrs、composeRef到@rc-component包,并引入clsx替代classnames。
57-69: clsx 用法正确所有
clsx调用都用于组合多个类名,包括:
- 根容器的多类名组合与 RTL 条件
- Context 中的类名合并
- 列表容器的 variant 和 motion 类名组合
Also applies to: 99-103, 112-116
packages/x-markdown/.jest.js (1)
1-14: Jest 配置更新正确添加
@rc-component到compileModules数组是必要的,确保 Jest 能正确转换@rc-component/*包的 ESM 模块。packages/x-sdk/package.json (1)
46-48: 依赖从 rc-util 迁移到 @rc-component/util 看起来合理这里直接用
@rc-component/util作为 runtime 依赖,和本仓库其它包的迁移方向一致,没有额外风险点可见。建议同时确认 lockfile 与实际源码中的 import(如@rc-component/util/lib/*/es/*)已经全部对齐,避免构建时出现版本或路径不一致的问题。packages/x/.jest.js (1)
1-35: 在 Jest 中编译 @rc-component 模块的设置是必要且正确的把
'@rc-component'加入compileModules,可以让@rc-component/*相关依赖不被transformIgnorePatterns排除,从而通过codePreprocessor正确转译,解决 ES Module 下export报错的问题,同时与 SDK 等其它配置保持一致,整体配置是合理的。建议本次改动完成后在
packages/x下跑一遍 Jest,以确认所有@rc-component/*相关测试都能正常通过(尤其是之前报过Unexpected token 'export'的用例)。packages/x/.dumi/theme/slots/Header/Actions.tsx (1)
4-5: HeaderActions 从 classnames 迁移到 clsx 实现正常
className合并仅使用字符串和简单的布尔条件(如props.isMini && styles.mini),在 clsx 下语义与原先 classnames 保持一致,整体渲染行为不会变化,改动符合本 PR 的重构目标。Also applies to: 153-160
packages/x-sdk/.jest.js (1)
1-26: 在 x-sdk 的 Jest 配置中加入 @rc-component 也是必要的这里与
packages/x/.jest.js保持了同样的compileModules策略,使得 SDK 中使用的@rc-component/*依赖同样会被 Jest 转译,避免 ESM 语法在测试中出错,改动方向正确。建议在
packages/x-sdk下单独执行一次 Jest,确认 SDK 相关用例在新的 @rc-component 依赖下也能全部通过。packages/x/.dumi/theme/slots/Header/SwitchBtn.tsx (1)
1-5: LangBtn 中 omit 与 clsx 的迁移保持了原有行为
omit(rest, ['className'])仍然只剔除className,不会影响其它透传到 Button 的属性。- 两个
<span>的className只组合labelStyle与根据value选择的样式,在 clsx 下与原先 classnames 的条件合并行为一致,不会改变渲染结果。整体来看,这是一次纯粹的依赖与工具函数替换,逻辑保持不变。
Also applies to: 75-96
packages/x/components/bubble/BubbleList.tsx (1)
1-3: BubbleList 里对 @rc-component/util 与 clsx 的迁移是等价替换
pickAttrs(restProps, { attr: true, aria: true })的用法不变,只是从@rc-component/util/es引入,符合整仓库的迁移方向。mergedClassNames及滚动容器的className只组合字符串和基于autoScroll的布尔条件,使用 clsx 能一一对应原先 classnames 的行为,不会引入样式缺失或多余的 class。整体改动属于无行为差异的重构,逻辑上是安全的。
Also applies to: 131-135, 150-160, 214-221
packages/x/components/bubble/Bubble.tsx (1)
1-3: Bubble 组件中 pickAttrs 与多个 className 迁移到 clsx 的实现是等价的
- 根节点
rootMergedCls、内容区、各个 slot(header/footer/avatar/extra/body)的类名现在统一通过 clsx 组合,仅使用字符串和布尔条件,对应到 clsx 是完全支持的常规模式,不会改变原有 class 输出。getSlotClassName抽象继续保留,只是内部改为 clsx,更便于后续维护。pickAttrs(restProps, { attr: true, aria: true, data: true })的使用方式与之前一致,只是依赖源迁移到了@rc-component/util。整体来看,这些改动是 API 等价、行为不变的重构,符合本 PR 目标。
Also applies to: 72-93, 150-169, 195-201, 233-243
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/x/components/bubble/hooks/useCompatibleScroll.ts (1)
55-62: 清理逻辑使用可选链是安全的,但可以顺手收紧一下实现这块改成可选链后语义与原来基本一致,没有功能性问题。不过既然已经在动这段代码,可以考虑顺便把引用的清理做得更彻底一些:即使
parentNode已被外部移除,也把sentinelRef.current置为null,避免遗留一个失效的 DOM 引用,同时减少重复访问sentinelRef.current,例如:- if (sentinelRef.current?.parentNode) { - sentinelRef.current.parentNode.removeChild(sentinelRef.current); - sentinelRef.current = null; - } + const sentinel = sentinelRef.current; + if (sentinel?.parentNode) { + sentinel.parentNode.removeChild(sentinel); + } + sentinelRef.current = null;纯属可选的小优化,不影响现有行为。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/x-sdk/src/x-chat/store.ts(2 hunks)packages/x/components/bubble/hooks/useCompatibleScroll.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/x-sdk/src/x-chat/store.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时,需要用中文回复中文评论。该项目的文档支持中英双语。
Learnt from: afc163
Repo: ant-design/x PR: 0
File: :0-0
Timestamp: 2025-04-11T14:47:09.527Z
Learning: 当评审 ant-design/x 仓库中的 PR 时,需要用中文回复中文评论。该项目的文档支持中英双语。
⏰ 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). (4)
- GitHub Check: Socket Security: Pull Request Alerts
- GitHub Check: build preview
- GitHub Check: size
- GitHub Check: test

中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit
发布说明
升级
优化
✏️ Tip: You can customize this high-level summary in your review settings.