reference in bubble #917
reference in bubble #917
Conversation
📝 Walkthrough""" Walkthrough本次更改为 Bubble 组件引入了“参考资料”功能。当传入 references 属性时，气泡将展示一个可点击的参考资料按钮与弹窗，支持标题、链接和可选描述。相关类型声明、演示用例及中英文文档均已同步更新。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Bubble
participant ReferencesOverlay
participant Modal
User->>Bubble: 渲染并传入 references 属性
Bubble->>ReferencesOverlay: 检查 references，渲染参考按钮
User->>ReferencesOverlay: 点击参考按钮
ReferencesOverlay->>Modal: 打开参考资料弹窗
User->>Modal: 查看/点击参考内容
Assessment against linked issues
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
dosubot
bot
added
documentation
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (9)
components/bubble/interface.ts (2)
19-23: 应补充字段注释与可扩展性考虑
ChatReference作为对外暴露的新接口，建议为三个字段写入 JSDoc 注释，说明期望格式及使用示例，便于组件消费者调用。同时可以预留icon?: ReactNode等扩展字段，减少未来破坏性改动。
47-48:references建议加入默认值防御虽然类型上是可选，但在运行期仍可能出现
undefined，组件内部频繁解构读取长度。如果在BubbleProps默认参数中提供references: []，可避免多处判空逻辑。components/bubble/Bubble.tsx (3)
44-45: 属性未在文档 API 表格中体现
references新增后，英文/中文 API 表格尚未同步，仅在 demo 中展示，易导致使用者遗漏。建议在两份文档的属性表中补充。
164-173: 无障碍与 i18n
Button未设置aria-label，读屏软件无法描述用途。- 文案硬编码英文（
reference(s) used、References），不符合 Ant Design 国际化策略。可引入locale或通过context提供文案。
196-211: List item 使用数组索引作为 key当
references发生增删改排序时，索引 key 会导致不必要的重新渲染。若后端数据缺少唯一 id，可使用url作为 key。components/bubble/demo/reference.tsx (2)
26-46: 演示数据重复且 URL 非唯一示例中两条 GitHub 链接 URL 相同，演示效果有限。建议替换为不同链接或删除重复项，确保用户快速理解多条引用的意义。
51-53:avatar={{}}会生成空 Avatar 组件当仅想隐藏头像时，传入空对象会仍然渲染一个宽高为 32 的透明块。可以直接传
avatar={null}或在组件内部判空优化，减少不必要 DOM。components/bubble/index.zh-CN.md (1)
34-35: API 表格遗漏references示例链接已添加，但属性文档未同步更新，建议补充：
| references | 参考资料列表 | {title, url, description?}[] | - | |components/bubble/index.en-US.md (1)
33-34: Missing API entry forreferencesSame as Chinese version, please add the new prop to the English API table to keep docs consistent.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/bubble/Bubble.tsx(4 hunks)components/bubble/demo/reference.tsx(1 hunks)components/bubble/index.en-US.md(1 hunks)components/bubble/index.zh-CN.md(1 hunks)components/bubble/interface.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (1)
components/bubble/Bubble.tsx (1)
4-5: 新依赖需同步到打包体积与 peerDependencies
@ant-design/icons与antd的Button/Popover/Modal/List都会被打进最终 bundle，请评估 tree-shaking 后的体积以及是否需要在 package.json peerDependencies 中声明版本范围。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
components/bubble/demo/reference.tsx (2)
26-158: 大量重复的引用对象可读性与维护成本较高
示例中连续硬编码了二十多条结构几乎相同的GitHub - Maifee Ul Asad引用，既拉长文件，也削弱了示例的核心意图。可考虑：- references={[ - { title: 'GitHub - Maifee Ul Asad', url: 'https://github.com' }, - { title: 'GitHub - Maifee Ul Asad', url: 'https://github.com' }, - ... - ]} + const githubRefs = Array.from({ length: 15 }).map(() => ({ + title: 'GitHub - Maifee Ul Asad', + url: 'https://github.com', + })); + ... + references={[ + { title: 'Ant Design', url: 'https://ant.design', description: 'Ant Design official website' }, + { title: 'React', url: 'https://react.dev', description: 'React official documentation' }, + ...githubRefs, + ]}这样既凸显了
referencesAPI 的用法，又避免冗余。
6-18: 命名可读性小优化
fooAvatar/barAvatar没有语义信息，改为orangeAvatarStyle/greenAvatarStyle等更易理解。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
components/bubble/Bubble.tsx(4 hunks)components/bubble/demo/reference.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- components/bubble/Bubble.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Socket Security: Pull Request Alerts
🔇 Additional comments (1)
components/bubble/demo/reference.tsx (1)
164-165:styles={{ avatar: hideAvatar }}与avatar={{}}二选一即可
styles.avatar已将头像隐藏，再传空对象给avatar多余且可能掩盖组件内部默认逻辑。请确认组件优先级并保留一种写法即可。
Signed-off-by: Maifee Ul Asad <[email protected]>
Bundle ReportBundle size has no change ✅ |
|
Any additional comments? Any idea when this will be merged? pinging: @afc163 |
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
Summary by CodeRabbit