faet: init new component connect-panel #1482
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthrough本次变更为 Web3 包新增了 ConnectPanel 组件及其样式和中英文文档。ConnectPanel 提供卡片式钱包连接面板，支持自定义钱包列表和点击事件。相关样式通过 useStyle 钩子实现，组件和样式已在包入口文件中导出。 Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant ConnectPanel
participant WalletCard
App->>ConnectPanel: 传入 wallets, className, style 等 props
ConnectPanel->>ConnectPanel: 使用 useStyle 生成样式
loop 遍历 wallets
ConnectPanel->>WalletCard: 渲染卡片（icon, name, actionText）
WalletCard-->>ConnectPanel: 用户点击卡片，触发 onClick
end
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes（未发现超出 #1456 需求范围的代码变更） Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/web3/src/connect-panel/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/web3/src/connect-panel/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/web3/src/connect-panel/style/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs[email protected][email protected]/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
✨ 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 (
|
|
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
packages/web3/src/connect-panel/style/index.ts (1)
20-21: 考虑响应式设计固定的宽高（240x260）可能在不同屏幕尺寸下表现不佳，建议考虑响应式设计或使用相对单位。
packages/web3/src/connect-panel/index.tsx (2)
2-2: 未使用的导入导入了
Wallet类型但未使用，建议移除或考虑重用现有类型定义。-import type { Wallet } from '@ant-design/web3-common';
7-17: 考虑重用现有的 Wallet 类型当前的钱包接口定义与现有的
Wallet类型有重叠，建议考虑扩展现有类型以保持一致性。packages/web3/src/connect-panel/index.md (2)
15-18: 为<img>标签添加alt属性以提升可访问性
示例代码中的三处<img>标签均缺少alt描述，这会降低屏幕阅读器的可读性并影响 SEO。建议补充相应的替代文本。- icon: <img src="/path/to/metamask.svg" width={64} height={64} />, + icon: <img src="/path/to/metamask.svg" width={64} height={64} alt="MetaMask logo" />,同理，请为 OKX Wallet 与 Add Address 的图标也补充
alt。Also applies to: 24-27, 33-37
45-50: API 表中类型标注过于宽泛
目前wallets、className、style的类型写成了array/string/object，不够精确，容易误导使用者。建议改为更贴近实际的 TypeScript 类型：
wallets:WalletItem[]className:stringstyle:React.CSSProperties这样既能体现组件的类型安全，也与代码实现保持一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
packages/web3/src/connect-panel/index.md(1 hunks)packages/web3/src/connect-panel/index.ts(1 hunks)packages/web3/src/connect-panel/index.tsx(1 hunks)packages/web3/src/connect-panel/index.zh-CN.md(1 hunks)packages/web3/src/connect-panel/style/index.ts(1 hunks)packages/web3/src/index.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
packages/web3/src/connect-panel/index.tsx (1)
Learnt from: CR
PR: ant-design/ant-design-web3#0
File: .cursor/rules/basic.mdc:0-0
Timestamp: 2025-06-25T00:35:57.367Z
Learning: This project is a React component library built on Ant Design, designed to provide Web3 wallet connection capabilities and common DApp UI components.
🧬 Code Graph Analysis (1)
packages/web3/src/connect-panel/style/index.ts (1)
packages/web3/src/theme/useStyle/index.ts (3)
Web3AliasToken(45-64)GenerateStyle(35-38)UseStyleResult(40-43)
🪛 Biome (1.9.4)
packages/web3/src/connect-panel/index.tsx
[error] 26-30: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: ci
- GitHub Check: prepare preview
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: ci
🔇 Additional comments (4)
packages/web3/src/connect-panel/index.ts (1)
1-1: 代码结构良好遵循了项目的标准重导出模式。
packages/web3/src/index.ts (1)
16-16: 正确集成了新组件新的 connect-panel 导出遵循了现有的模式，集成方式正确。
packages/web3/src/connect-panel/index.zh-CN.md (1)
1-60: 文档编写完整中文文档结构清晰，包含了完整的使用示例和 API 说明，有助于开发者理解和使用组件。
packages/web3/src/connect-panel/index.md (1)
53-60: 补充缺失或可选字段说明，保证文档完整
若组件支持更多卡片配置（如disabled、tag、description等），应在此表格中同步列出；若没有，也建议明确actionText与onClick是否必填，以避免使用者困惑。
| [`${token.componentCls}-card`]: { | ||
| width: 240, | ||
| height: 260, | ||
| background: '#fafaff', |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用设计令牌而不是硬编码颜色
建议使用设计令牌中的颜色值而不是硬编码的 #fafaff，以保持设计系统的一致性。
- background: '#fafaff',
+ background: token.colorBgLayout,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| background: '#fafaff', | |
| background: token.colorBgLayout, |
🤖 Prompt for AI Agents
In packages/web3/src/connect-panel/style/index.ts at line 22, replace the
hardcoded color value '#fafaff' with the corresponding design token color from
the design system to ensure consistency. Identify the appropriate color token
that matches '#fafaff' and use it instead of the literal hex code.
| marginBottom: 12, | ||
| }, | ||
| [`${token.componentCls}-action`]: { | ||
| color: '#666', |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用设计令牌中的文本颜色
建议使用设计令牌中的文本颜色而不是硬编码的 #666。
- color: '#666',
+ color: token.colorTextSecondary,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| color: '#666', | |
| - color: '#666', | |
| + color: token.colorTextSecondary, |
🤖 Prompt for AI Agents
In packages/web3/src/connect-panel/style/index.ts at line 44, replace the
hardcoded color value '#666' with the corresponding text color from the design
tokens. Locate the appropriate design token for text color in the project's
style or theme files and use that token instead of the fixed hex code to ensure
consistency with the design system.
| <div | ||
| key={wallet.key} | ||
| className={classNames(`${prefixCls}-card`, hashId)} | ||
| onClick={wallet.onClick} | ||
| > |
There was a problem hiding this comment.
修复无障碍访问问题
卡片元素缺少键盘事件支持，这会影响键盘导航用户的体验。根据静态分析工具的建议，需要添加键盘事件处理。
<div
key={wallet.key}
className={classNames(`${prefixCls}-card`, hashId)}
onClick={wallet.onClick}
+ onKeyDown={(e) => {
+ if ((e.key === 'Enter' || e.key === ' ') && wallet.onClick) {
+ e.preventDefault();
+ wallet.onClick();
+ }
+ }}
+ tabIndex={0}
+ role="button"
+ aria-label={`${wallet.actionText} ${wallet.name}`}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div | |
| key={wallet.key} | |
| className={classNames(`${prefixCls}-card`, hashId)} | |
| onClick={wallet.onClick} | |
| > | |
| <div | |
| key={wallet.key} | |
| className={classNames(`${prefixCls}-card`, hashId)} | |
| onClick={wallet.onClick} | |
| onKeyDown={(e) => { | |
| if ((e.key === 'Enter' || e.key === ' ') && wallet.onClick) { | |
| e.preventDefault(); | |
| wallet.onClick(); | |
| } | |
| }} | |
| tabIndex={0} | |
| role="button" | |
| aria-label={`${wallet.actionText} ${wallet.name}`} | |
| > |
🧰 Tools
🪛 Biome (1.9.4)
[error] 26-30: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
🤖 Prompt for AI Agents
In packages/web3/src/connect-panel/index.tsx around lines 26 to 30, the div
element acting as a clickable card lacks keyboard event handlers, which impairs
accessibility for keyboard users. Add appropriate keyboard event handlers such
as onKeyDown or onKeyPress to handle Enter and Space keys, enabling keyboard
navigation and activation of the card. Also, ensure the div has a tabIndex
attribute to make it focusable.
1 participant
close #1456
Summary by CodeRabbit