feat: improve banner style in Earn module & fix webpack building on Desktop & add webviewDebuggingEnabled into Dev Settings. #6386
Conversation
huhuanming
requested review from
ezailWang,
loatheb,
sidmorizon and
originalix
as code owners
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
概述浏览此次更改涉及多个文件，主要包括桌面应用程序的焦点状态检查、WebView调试设置、开发者设置以及一些组件的样式和布局调整。新增了应用程序焦点状态的IPC处理、开发设置中的WebView调试选项，并对一些组件的渲染和交互进行了细微优化。 变更
序列图sequenceDiagram
participant App as 应用程序
participant IPC as IPC通道
participant Window as 主窗口
App->>IPC: 请求窗口焦点状态
IPC->>Window: 检查焦点状态
Window-->>IPC: 返回焦点状态
IPC-->>App: 响应焦点状态
这个序列图展示了应用程序如何通过IPC通道查询主窗口的焦点状态。 Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
huhuanming
changed the title
huhuanming
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (18)
apps/desktop/src-electron/app.ts(1 hunks)apps/desktop/src-electron/config.ts(1 hunks)apps/desktop/src-electron/preload.ts(2 hunks)development/webpack/utils.js(1 hunks)development/webpack/webpack.ext.config.js(2 hunks)development/webpack/webpack.prod.config.js(2 hunks)packages/components/src/composite/Banner/index.tsx(2 hunks)packages/components/src/hooks/useVisibilityChange.ts(2 hunks)packages/kit-bg/src/states/jotai/atoms/devSettings.ts(2 hunks)packages/kit/src/components/WebView/InpageProviderWebView.native.tsx(2 hunks)packages/kit/src/components/WebView/NativeWebView.tsx(4 hunks)packages/kit/src/components/WebView/index.tsx(3 hunks)packages/kit/src/components/WebView/types.ts(1 hunks)packages/kit/src/provider/Container/NetworkReachabilityTracker.tsx(1 hunks)packages/kit/src/views/Earn/EarnHome.tsx(1 hunks)packages/kit/src/views/Setting/pages/FloatingIcon/index.tsx(2 hunks)packages/kit/src/views/Setting/pages/List/DevSettingsSection/index.tsx(1 hunks)packages/shared/src/logger/scopes/discovery/scenes/dapp.ts(1 hunks)
🔇 Additional comments (13)
packages/kit/src/views/Setting/pages/FloatingIcon/index.tsx (1)
14-14: 代码变更看起来不错！
添加日志记录有助于跟踪浮动图标状态的变化，实现方式简洁明了。
Also applies to: 39-41
development/webpack/utils.js (1)
44-48: 代码实现清晰简洁！
函数实现符合以下要点：
- 使用解构赋值获取参数
- 使用模板字符串处理字符串拼接
- 使用三元运算符简化条件判断
development/webpack/webpack.prod.config.js (1)
5-5: 重构改动合理！
- 从utils模块导入函数，提高了代码的模块化
- 正确使用了新的getOutputFolder函数生成输出路径
Also applies to: 16-16
development/webpack/webpack.ext.config.js (1)
18-18: 重构改动正确，建议验证构建配置！
代码变更：
- 正确导入了utils模块
- 使用新的getOutputFolder函数替换了原有实现
建议验证不同构建配置（V2/V3）下的输出路径是否正确。
Also applies to: 47-47
✅ Verification successful
构建配置变更已验证，无需担心！
getOutputFolder函数已正确实现V2/V3版本的输出路径逻辑：
- 根据isManifestV3()自动选择正确的输出目录
- V3版本输出到
{browser}_v3目录 - V2版本输出到
{browser}目录
webpack.ext.config.js中的输出路径配置也已正确使用此函数。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证不同配置下的输出路径生成
# 检查构建输出目录结构
fd -t d -d 1 . build/
Length of output: 117
Script:
#!/bin/bash
# 检查utils模块中的getOutputFolder函数实现
ast-grep --pattern 'function getOutputFolder($$$) { $$$ }'
# 检查webpack配置文件中的输出路径配置
rg -A 3 'output:' development/webpack/
Length of output: 2641
packages/components/src/composite/Banner/index.tsx (1)
145-145: IconButton 定位调整需要验证
将 IconButton 从 top 调整为 bottom 定位可能会影响按钮的视觉表现。建议在不同屏幕尺寸下进行测试。
Also applies to: 166-166
✅ Verification successful
Let me analyze the positioning changes with these broader search patterns to better understand the impact.
让我们查看完整的Banner组件代码和相关样式文件，以便更好地理解这个定位变更的上下文。
IconButton 定位调整是安全的
查看完整代码后，可以确认这个定位变更是安全的：
- IconButton 使用了
transform: translateY(-50%)配合bottom: 50%实现垂直居中 - 这种定位方式是标准的垂直居中实现方式，在各种屏幕尺寸下都能正常工作
- 组件内部已经处理了移动端适配（通过 platformEnv.isNative 判断）
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他使用 IconButton 的组件是否会受到影响
rg -A 2 'IconButton.*position.*top'
Length of output: 37
Script:
#!/bin/bash
# Search for IconButton positioning patterns in the Banner component
rg -A 5 'IconButton.*position' packages/components/src/composite/Banner/
# Search for any IconButton style props in the codebase
rg -A 5 'IconButton.*(?:bottom|top|position)' packages/components/
# Find all IconButton imports and usages
ast-grep --pattern 'import { IconButton }'
Length of output: 188
Script:
#!/bin/bash
# 查找Banner组件文件的内容
cat packages/components/src/composite/Banner/index.tsx
# 查找相关样式文件
fd -e css -e scss -e less Banner packages/components/src/composite/Banner/
Length of output: 6417
packages/kit/src/provider/Container/NetworkReachabilityTracker.tsx (1)
22-23: 需要注意性能影响
将 reachabilityShouldRun 设置为始终返回 true 可能会增加设备的电池消耗，特别是在移动设备上。建议实现 TODO 中提到的周期性检查机制，以平衡网络可达性检测和设备性能。
packages/components/src/hooks/useVisibilityChange.ts (1)
13-15: 桌面端实现逻辑清晰
为桌面端添加的可见性状态检查逻辑实现得很好，使用 globalThis.desktopApi.isFocused() 保持了代码的一致性。
apps/desktop/src-electron/config.ts (1)
59-59: IPC 消息键命名规范
新增的 APP_IS_FOCUSED 消息键遵循了现有的命名规范，并且正确地放置在了 app 相关的配置区域中。
apps/desktop/src-electron/preload.ts (2)
57-57: 接口定义清晰简洁！
isFocused 方法的类型定义符合接口设计规范。
281-281: 实现逻辑正确！
使用同步 IPC 通信获取窗口焦点状态是合适的选择，因为这是一个需要立即响应的操作。
apps/desktop/src-electron/app.ts (1)
640-644: IPC 处理程序实现安全可靠！
代码特点：
- 使用
getSafelyBrowserWindow确保窗口引用安全 - 使用可选链操作符处理潜在的空值情况
- 正确返回窗口焦点状态
packages/kit-bg/src/states/jotai/atoms/devSettings.ts (1)
24-24: 开发设置集成合理
将调试开关添加到开发设置中是个好选择，默认关闭也符合安全性要求。
Also applies to: 47-47
packages/kit/src/components/WebView/InpageProviderWebView.native.tsx (1)
36-36: 代码实现正确！
webviewDebuggingEnabled 属性的添加和传递符合 React 组件最佳实践。
Also applies to: 124-124
|
@coderabbitai resolve |
✅ Actions performedComments resolved. |
Summary by CodeRabbit
新功能
Banner组件中添加了可选的size属性，支持小型和大型显示。样式
EarnHome页面中组件的布局和样式，优化了视觉呈现。文档
修复