feat: support VSCode API TreeView.badge #4185
Conversation
|
|
|
@zhiyudangchu 感谢贡献 ~ 麻烦先签署一下 CLA 协议 #4185 (comment) |
Walkthrough此拉取请求引入了对多个接口和类的更改，以支持新的 Changes
Suggested reviewers
Possibly related PRs
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
warning eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![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
🧹 Outside diff range and nitpick comments (24)
packages/file-tree-next/src/browser/services/file-tree-event.service.ts (1)
14-17: 事件处理方法实现简洁有效
onFilesChangeEvent方法使用@OnEvent装饰器正确订阅了文件变更事件，并通过发射空事件通知相关订阅者。这种实现方式简单且有效。不过建议添加方法的返回值类型声明以提高代码的可维护性：
- onFilesChangeEvent() { + onFilesChangeEvent(): void {packages/core-browser/src/layout/layout.interface.ts (3)
31-36: 接口设计合理，建议补充文档注释新增的
BadgeWidget接口设计完整，包含了徽章数值、提示文本以及相关的变更事件。建议为接口及其属性添加 JSDoc 文档注释，以提供更好的开发体验。建议添加如下文档注释：
+/** + * 表示视图徽章的配置接口 + */ export interface BadgeWidget { + /** 徽章显示的数值 */ badge?: number; + /** 徽章的悬停提示文本 */ badgeTooltip?: string; + /** 徽章数值变更事件 */ onDidChangeBadge?: Event<void>; + /** 徽章提示文本变更事件 */ onDidChangeBadgeTooltip?: Event<void>; }
46-46: 简化类型声明，移除冗余的 undefined由于使用了可选属性操作符
?，类型中的| undefined是多余的。建议简化类型声明：
- badge?: BadgeWidget | undefined; + badge?: BadgeWidget;
70-70: 简化类型声明，保持一致性同样地，这里的类型声明也可以移除冗余的 undefined。
建议应用相同的简化：
- badge?: BadgeWidget | undefined; + badge?: BadgeWidget;packages/main-layout/src/browser/tabbar-handler.ts (2)
4-4: 建议优化导入路径当前导入路径使用了多层相对路径（
../../../），这种方式可能会导致代码的脆弱性。建议考虑以下改进方案：
- 使用别名导入（alias imports）
- 创建统一的导出文件（barrel exports）
示例改进：
-import { BadgeWidget } from '../../../core-browser/src/layout'; +import { BadgeWidget } from '@opensumi/core-browser';
112-114: 方法签名更新符合预期
setBadge方法的参数类型从string更新为BadgeWidget | undefined是一个很好的改进：
- ✅ 支持了更丰富的徽章展示功能
- ✅ 与 VSCode API 的 TreeView.badge 特性保持一致
建议添加 JSDoc 注释来说明新的参数类型及其用法。
/** + * 设置视图tab的徽章 + * @param badge - 徽章配置对象，可包含徽章内容、提示文本等 + * @example + * setBadge({ + * badge: '99+', + * badgeTooltip: '未读消息数量' + * }); + */ setBadge(badge: BadgeWidget | undefined) {packages/main-layout/src/browser/accordion/section.view.tsx (3)
20-21: 建议优化导入路径当前使用多层相对路径（../../../../）导入 BadgeWidget 不利于代码维护。建议使用包导入方式替代。
-import { BadgeWidget } from '../../../../core-browser/src/layout'; +import { BadgeWidget } from '@opensumi/ide-core-browser/lib/layout';
64-64: 建议完善属性文档注释当前的注释 "Panel Badge" 过于简单。建议添加更详细的说明，包括 BadgeWidget 的用途和可能的值。
建议更新注释为：
- // Panel Badge + // 面板徽章，用于显示状态或计数信息 + // 类型：BadgeWidget 包含徽章的文本、样式等属性
191-191: 建议增强徽章渲染功能当前实现只使用了 BadgeWidget 的 badge 属性。考虑以下建议：
- 可以利用 BadgeWidget 的其他属性来支持更丰富的徽章展示
- 建议添加徽章的悬停提示（tooltip）
- 考虑添加徽章的可访问性支持（ARIA 属性）
- {metadata.badge && <div className={styles_section_badge}>{metadata.badge.badge}</div>} + {metadata.badge && ( + <div + className={cls(styles_section_badge, metadata.badge.className)} + title={metadata.badge.tooltip} + aria-label={metadata.badge.ariaLabel || metadata.badge.tooltip} + > + {metadata.badge.badge} + </div> + )}packages/extension/src/common/vscode/treeview.ts (2)
144-148: 建议补充 badge 属性的使用示例badge 属性的文档注释虽然说明了如何移除徽章，但建议添加一个使用示例来展示如何正确设置徽章。
建议在注释中添加如下示例：
/** * TreeView 要显示的徽标 * 要删除徽标，请设置为undefined + * + * @example + * ```typescript + * treeView.badge = { + * tooltip: '未读消息', + * value: 3 + * }; + * ``` */
161-174: ViewBadge 接口设计合理，建议增加值的范围约束接口定义简洁明确，包含了必要的 tooltip 和 value 属性。但建议考虑添加对 value 属性的范围限制说明。
建议在注释中补充 value 的有效范围说明：
/** * 徽标中显示的值 + * @remarks + * - 值应为正整数 + * - 建议限制在合理范围内（如 0-99）以确保显示效果 */ readonly value: number;packages/main-layout/src/browser/tabbar/bar.view.tsx (3)
231-234: 优化徽章属性的条件检查逻辑当前的条件检查存在冗余：
badge && badge?.badge。可以简化为单个可选链操作符。建议应用以下更改：
- component.options?.badge && - component.options.badge?.badge && ( + component.options?.badge?.badge && (
257-257: 简化徽章值的条件渲染当前的三元运算符使用方式不够简洁，
undefined作为备选值是多余的。建议应用以下更改：
- {component.options.badge ? component.options.badge.badge : undefined} + {component.options.badge?.badge}
徽章结构变更需要进一步统一
代码分析显示徽章（badge）的使用模式存在不一致：
packages/main-layout/src/browser/tabbar/bar.view.tsx中使用了新的嵌套结构badge?.badge- 其他组件（如 search、scm、markers 等）仍在直接访问
badge属性需要注意的关键位置：
packages/scm/src/browser/components/scm-resource-tree/scm-tree-node.view.tsxpackages/search/src/browser/tree/search-node.tsxpackages/markers/src/browser/tree/marker-node.tsxpackages/opened-editor/src/browser/opened-editor-node.tsx建议统一更新这些组件以使用新的徽章结构，确保整个代码库的一致性。
🔗 Analysis chain
Line range hint
231-257: 验证徽章结构的一致性使用代码改动显示徽章属性已更改为使用新的
BadgeWidget接口。需要确保整个代码库中的徽章处理逻辑都已更新。运行以下脚本来验证徽章属性的使用情况：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：检查代码库中徽章属性的使用模式 # 搜索所有直接访问 badge 属性的实例 echo "检查直接访问 badge 属性的实例：" rg -t typescript -t tsx "\.badge\s*[^?.]" # 搜索使用新的嵌套结构的实例 echo "检查使用新的嵌套结构的实例：" rg -t typescript -t tsx "\.badge\?.badge"Length of output: 400
Script:
#!/bin/bash # 修正：使用正确的文件类型标识 echo "检查直接访问 badge 属性的实例：" rg --type-add 'ts:*.{ts,tsx}' -t ts "\.badge\s*[^?.]" echo "检查使用新的嵌套结构的实例：" rg --type-add 'ts:*.{ts,tsx}' -t ts "\.badge\?.badge" # 补充：检查所有包含 badge 的代码 echo "检查所有包含 badge 的代码（带上下文）：" rg --type-add 'ts:*.{ts,tsx}' -t ts -A 2 -B 2 "\.badge"Length of output: 26650
packages/opened-editor/src/browser/services/opened-editor-model.service.ts (1)
474-476: 徽章对象结构优化代码改动将简单的徽章字符串更新为结构化的对象，这样的改动更加符合 VSCode API TreeView.badge 的规范。实现方式清晰且具有良好的扩展性。
建议考虑以下优化点：
- 为徽章对象定义专门的接口类型，提高代码的可维护性
- 考虑将徽章相关的字符串常量提取到配置文件中
+interface BadgeInfo { + badge: number; + badgeTooltip: string; +} -const badge = dirtyCount > 0 ? { badge: dirtyCount, badgeTooltip: dirtyMsg } : undefined; +const badge: BadgeInfo | undefined = dirtyCount > 0 + ? { badge: dirtyCount, badgeTooltip: dirtyMsg } + : undefined;packages/extension/src/browser/vscode/api/main.thread.treeview.ts (1)
271-276: 建议增强错误处理机制建议添加以下改进：
- 对无效的 treeViewId 进行错误处理
- 为 badge 对象的转换添加类型安全检查
async $setBadge(treeViewId: string, badge: ViewBadge | undefined) { + if (!treeViewId) { + throw new Error('TreeView ID is required'); + } const handler = this.mainLayoutService.getTabbarHandler(treeViewId); if (handler) { + const badgeData = badge && { + badge: badge.value, + badgeTooltip: badge.tooltip + }; - handler.setBadge(badge ? { badge: badge.value, badgeTooltip: badge.tooltip } : undefined); + handler.setBadge(badgeData); } }packages/main-layout/src/browser/accordion/accordion.service.ts (1)
Line range hint
220-227: 方法实现良好，建议改进错误消息！updateViewBadge 方法的实现遵循了现有的更新方法模式，但错误日志消息可以更具体。
建议修改错误消息以更准确地反映操作类型：
- this.logger.error(`No target view \`${viewId}\` found, unable to update accordion message`); + this.logger.error(`No target view \`${viewId}\` found, unable to update accordion badge`);packages/extension/src/hosted/api/vscode/ext.host.treeview.ts (1)
326-326: 建议优化徽章相关的代码实现当前实现可以进行以下优化：
- 私有属性
_badge的初始化和类型声明可以合并- 在 setter 中可以添加值相等性检查，避免不必要的更新
建议按照以下方式重构代码：
- private _badge?: ViewBadge = undefined; + private _badge?: ViewBadge; set badge(badge: ViewBadge | undefined) { + if (this._badge?.value === badge?.value && this._badge?.tooltip === badge?.tooltip) { + return; + } this._badge = badge; this.proxy.$setBadge(this.treeViewId, badge ? { value: badge.value, tooltip: badge.tooltip } : undefined); }Also applies to: 503-509
packages/file-tree-next/src/browser/file-tree.service.ts (2)
854-859: 建议添加方法说明文档这是一个公共方法，建议添加 JSDoc 注释说明其用途、返回值含义以及可能的副作用。
建议添加如下文档：
+ /** + * 计算文件树中的节点总数（不包括目录和 .sumi 文件） + * @returns {number} 符合条件的节点数量 + */ public calcNodeCount = () => { if (this._root) { return this.recursionCalcNodeCount(this._root); } return 0; };
854-879: 性能优化建议对于大型文件树，递归遍历可能会导致性能问题。建议考虑以下优化：
- 添加缓存机制，避免重复计算
- 考虑使用迭代方式代替递归
- 实现增量更新机制，仅在文件树变化时更新计数
packages/main-layout/src/browser/tabbar/tabbar.service.ts (2)
46-46: 导入语句位置需要调整建议将
BadgeWidget的导入语句移动到其他@opensumi相关导入的分组中，以保持导入语句的组织一致性。- import { BadgeWidget } from '../../../../core-browser/src/layout'; + import { + CommandRegistry, + ComponentRegistryInfo, + ComponentRegistryProvider, + Deferred, + DisposableCollection, + Emitter, + Event, + IContextKey, + IContextKeyService, + IScopedContextKeyService, + KeybindingRegistry, + ResizeEvent, + SlotLocation, + ViewContextKeyRegistry, + WithEventBus, + createFormatLocalizedStr, + fastdom, + formatLocalize, + getTabbarCtxKey, + isDefined, + isUndefined, + localize, + toDisposable, + BadgeWidget, + } from '@opensumi/ide-core-browser';
Line range hint
197-202: 更新徽章方法的实现看起来不错方法实现正确地处理了新的
BadgeWidget类型，并保持了与现有组件更新逻辑的一致性。建议添加以下改进：
- 添加参数类型注释以提高代码可读性
- 添加空值检查以提高代码健壮性
- updateBadge(containerId: string, value: BadgeWidget | undefined) { + updateBadge(containerId: string, value: BadgeWidget | undefined): void { + if (!containerId) { + return; + } const component = this.getContainer(containerId); if (component && component.options) { component.options.badge = value; } component?.fireChange(component); }🧰 Tools
🪛 Biome (1.9.4)
[error] 199-200: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
packages/file-tree-next/src/browser/file-tree-contribution.ts (2)
175-183: 建议添加错误处理机制事件监听器的实现逻辑正确，但建议添加错误处理来提高代码的健壮性。
建议按如下方式重构:
this._disposables.add( Event.any<any>(this.fileTreeEventService.onDidChange)(() => { + try { const dirtyCount = this.fileTreeService.calcNodeCount(); const accordionService = this.mainLayoutService.getAccordionService(EXPLORER_CONTAINER_ID); const badge = dirtyCount > 0 ? { badge: dirtyCount, badgeTooltip: dirtyCount + '' } : undefined; accordionService.updateViewBadge('file-explorer', badge); + } catch (error) { + console.error('更新文件树徽章时发生错误:', error); + } }), );
1281-1282: 空方法需要实现或移除
setExplorerTabBarBadge方法目前为空，且在代码中没有被调用。建议:
- 如果计划在后续实现，请添加 TODO 注释说明用途
- 如果不需要，建议移除这个空方法
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (15)
packages/core-browser/src/layout/layout.interface.ts(3 hunks)packages/extension/src/browser/vscode/api/main.thread.treeview.ts(2 hunks)packages/extension/src/common/vscode/treeview.ts(3 hunks)packages/extension/src/hosted/api/vscode/ext.host.treeview.ts(4 hunks)packages/file-tree-next/src/browser/file-tree-contribution.ts(5 hunks)packages/file-tree-next/src/browser/file-tree.service.ts(1 hunks)packages/file-tree-next/src/browser/services/file-tree-event.service.ts(1 hunks)packages/main-layout/src/browser/accordion/accordion.service.ts(3 hunks)packages/main-layout/src/browser/accordion/section.view.tsx(3 hunks)packages/main-layout/src/browser/tabbar-handler.ts(2 hunks)packages/main-layout/src/browser/tabbar/bar.view.tsx(2 hunks)packages/main-layout/src/browser/tabbar/tabbar.service.ts(2 hunks)packages/opened-editor/src/browser/services/opened-editor-model.service.ts(1 hunks)packages/types/vscode/typings/vscode.d.ts(2 hunks)packages/types/vscode/typings/vscode.window.d.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
packages/file-tree-next/src/browser/services/file-tree-event.service.ts
[error] 10-12: This constructor is unnecessary.
Unsafe fix: Remove the unnecessary constructor.
(lint/complexity/noUselessConstructor)
🔇 Additional comments (14)
packages/file-tree-next/src/browser/services/file-tree-event.service.ts (2)
1-5: 类的设计和继承结构合理
类的设计遵循了依赖注入模式，并正确继承了 WithEventBus 以支持事件处理功能。
6-8: 事件发射器实现规范
事件发射器的实现遵循了标准模式，通过私有的 _onDidChange 发射器和公开的 onDidChange 事件提供了良好的封装。
packages/extension/src/common/vscode/treeview.ts (2)
24-24: 新增的 $setBadge 方法签名正确且符合预期
方法签名清晰地定义了所需参数，包括树视图ID和徽章对象。参数类型的使用恰当，特别是将 badge 参数设置为可选（undefined）以支持徽章的移除功能。
161-174: 验证实现是否与 VSCode API 规范一致
请确保 ViewBadge 接口的实现与 VSCode API 的规范保持一致。
✅ Verification successful
ViewBadge 接口实现与 VSCode API 完全一致
从 VSCode 类型定义文件中可以看到，当前实现的 ViewBadge 接口与 VSCode 的原生定义完全匹配：
- tooltip 属性：用于在徽标工具提示中显示的标签
- value 属性：用于在徽标中显示的数值
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索 VSCode 相关的类型定义文件，确认接口实现的一致性
rg -t ts "interface.*Badge"
rg -t ts "TreeView.*badge"
Length of output: 292
Script:
#!/bin/bash
# 查看 VSCode 类型定义中的 ViewBadge 接口具体实现
cat packages/types/vscode/typings/vscode.d.ts | grep -A 10 "interface ViewBadge"
# 查找是否有其他相关的 badge 定义
rg -t ts "badge.*:" -A 2
Length of output: 17138
packages/extension/src/browser/vscode/api/main.thread.treeview.ts (2)
45-45: 导入声明看起来没有问题！
ViewBadge 类型的导入位置正确，与相关类型放在一起，符合代码组织结构。
271-276: 实现逻辑正确，符合预期！
方法实现遵循了 RPC 方法的命名约定，并正确处理了 badge 的转换逻辑。
packages/main-layout/src/browser/accordion/accordion.service.ts (2)
46-46: 导入声明看起来不错！
BadgeWidget 的导入位置正确，并且遵循了项目的导入约定。
61-61: 接口更新符合预期！
AccordionViewChangeEvent 接口中 badge 属性类型的更新与 VSCode API 的 TreeView.badge 保持一致。
packages/extension/src/hosted/api/vscode/ext.host.treeview.ts (2)
28-28: 导入 ViewBadge 类型
导入了必要的 ViewBadge 类型以支持树视图徽章功能。
126-131: TreeView 接口中的徽章属性实现正确
徽章属性的 getter 和 setter 实现符合预期：
- getter 返回当前徽章状态
- setter 更新徽章并同步到主线程
packages/types/vscode/typings/vscode.window.d.ts (1)
872-876: 代码变更看起来不错！
badge 属性的类型定义和文档注释都很清晰。属性被正确标记为可选，并且注释中说明了如何移除徽章。
让我们验证一下 ViewBadge 接口的定义：
✅ Verification successful
ViewBadge 接口已正确定义，代码变更完全符合预期！
在 packages/types/vscode/typings/vscode.d.ts 中找到了 ViewBadge 接口的定义，它包含了所有必需的属性：
tooltip: 用于显示徽章的工具提示文本value: 用于显示徽章的数值
这个接口定义与 WebviewView 中新增的 badge 属性完全匹配，确保了类型安全性。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：查找 ViewBadge 接口的定义
# 在代码库中搜索 ViewBadge 接口定义
ast-grep --pattern 'interface ViewBadge {
$$$
}'
Length of output: 1544
packages/file-tree-next/src/browser/file-tree-contribution.ts (1)
132-134: 依赖注入看起来没有问题！
FileTreeEventService 的注入遵循了类中既有的依赖注入模式。
packages/types/vscode/typings/vscode.d.ts (2)
1875-1879: 代码实现正确且符合规范！
TreeView 接口中新增的 badge 属性实现合理，类型定义清晰，文档注释完整。
1897-1912: 接口设计合理且完整！
ViewBadge 接口的设计考虑周全：
- tooltip 属性支持无障碍访问和提示文本
- value 属性使用 number 类型适合显示徽章计数
packages/file-tree-next/src/browser/services/file-tree-event.service.ts
Outdated
Show resolved
Hide resolved
packages/file-tree-next/src/browser/services/file-tree-event.service.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (5)
packages/extension/src/common/sumi/layout.ts (1)
Line range hint
1-35: 建议补充类型定义文档为了提高代码的可维护性，建议为 ViewBadge 的使用添加相关文档说明，特别是在接口方法中说明参数的具体用途和可能的取值。
建议添加如下注释：
export interface ITabbarHandler { + /** + * 设置标签栏的徽章 + * @param badge ViewBadge 对象，用于显示徽章。undefined 表示移除徽章 + */ setBadge(badge: ViewBadge | undefined): void;packages/extension/src/hosted/api/sumi/ext.host.layout.ts (1)
41-43: 建议添加类型文档注释为了提高代码的可维护性，建议为
setBadge方法添加 JSDoc 注释，说明ViewBadge的用法和示例。建议添加如下注释：
+ /** + * 设置视图的徽章 + * @param badge - 徽章对象，可以包含数字、文本或自定义样式 + * @example + * ```ts + * // 设置数字徽章 + * handler.setBadge({ value: 5 }); + * // 清除徽章 + * handler.setBadge(undefined); + * ``` + */ setBadge(badge: ViewBadge | undefined) { this.proxy.$setBadge(this.id, badge); }packages/main-layout/src/browser/accordion/section.view.tsx (1)
Line range hint
124-133: 需要修复 useEffect 的依赖项useEffect 的依赖数组为空，这可能导致以下问题：
- metadata 状态更新可能不及时
- 组件重渲染时可能使用过时的值
建议修改为：
}, []); + }, [metadata, viewId]);packages/extension/src/common/vscode/webview.ts (1)
317-321: 属性定义完整且文档清晰属性定义和注释文档都很完整：
- 类型定义正确
- 注释清晰说明了如何移除徽章
- 与 VSCode API 的类型定义保持一致
建议在注释中补充一些使用示例，以帮助开发者更好地理解如何使用这个新属性。
建议添加如下示例注释：
/** * The badge to display for this webview view. * To remove the badge, set to undefined. + * + * Example: + * ```ts + * // 设置数字徽章 + * webviewView.badge = { value: 3 }; + * + * // 设置带提示的徽章 + * webviewView.badge = { + * value: 3, + * tooltip: '3个未读通知' + * }; + * + * // 移除徽章 + * webviewView.badge = undefined; + * ``` */packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts (1)
503-513: 建议添加属性文档注释为了提高代码可维护性，建议为 badge 属性添加 JSDoc 文档注释，说明其用途和可能的值。
建议添加如下文档：
+/** + * 获取或设置视图的徽章 + * @remarks + * 徽章可用于显示视图的状态或通知信息 + */ public get badge(): ViewBadge | undefined { return this.#badge; } +/** + * @param badge - 新的徽章值，undefined 表示移除徽章 + */ public set badge(badge: ViewBadge | undefined) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (14)
packages/core-browser/src/layout/layout.interface.ts(3 hunks)packages/extension/src/browser/sumi/main.thread.layout.ts(2 hunks)packages/extension/src/browser/vscode/api/main.thread.api.webview.ts(3 hunks)packages/extension/src/browser/vscode/api/main.thread.treeview.ts(2 hunks)packages/extension/src/common/sumi/layout.ts(3 hunks)packages/extension/src/common/vscode/webview.ts(2 hunks)packages/extension/src/hosted/api/sumi/ext.host.layout.ts(2 hunks)packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts(3 hunks)packages/main-layout/src/browser/accordion/accordion.service.ts(3 hunks)packages/main-layout/src/browser/accordion/section.view.tsx(4 hunks)packages/main-layout/src/browser/tabbar-handler.ts(2 hunks)packages/main-layout/src/browser/tabbar/bar.view.tsx(2 hunks)packages/main-layout/src/browser/tabbar/tabbar.service.ts(2 hunks)packages/types/vscode/typings/vscode.window.d.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
- packages/core-browser/src/layout/layout.interface.ts
- packages/extension/src/browser/vscode/api/main.thread.treeview.ts
- packages/main-layout/src/browser/accordion/accordion.service.ts
- packages/main-layout/src/browser/tabbar-handler.ts
- packages/main-layout/src/browser/tabbar/bar.view.tsx
- packages/main-layout/src/browser/tabbar/tabbar.service.ts
- packages/types/vscode/typings/vscode.window.d.ts
🔇 Additional comments (13)
packages/extension/src/common/sumi/layout.ts (2)
1-1: 导入 ViewBadge 类型符合 VSCode API 规范
从 vscode 模块导入 ViewBadge 类型是正确的做法，这确保了与 VSCode API 的类型兼容性。
28-28: IMainThreadLayout 接口的 $setBadge 方法签名更新完善
方法签名的更新与 ITabbarHandler 保持一致，维护了整体接口的一致性。建议确认相关的 ExtHost 端代码是否也需要相应更新。
packages/extension/src/browser/sumi/main.thread.layout.ts (2)
1-1: 导入声明看起来没有问题！
从 'vscode' 导入 ViewBadge 类型的方式符合项目规范，且与实现 VSCode API TreeView.badge 功能的目标一致。
57-59: 请验证 TabBarHandler 是否正确实现了 setBadge 方法
实现逻辑简洁明了，但需要确保：
- TabBarHandler 类中已实现了相应的 setBadge 方法
- 该方法支持 ViewBadge | undefined 类型的参数
运行以下脚本来验证 TabBarHandler 的实现：
✅ Verification successful
TabBarHandler 已正确实现了 setBadge 方法，验证通过
从代码分析结果可以看到：
- TabBarHandler 类中已实现了 setBadge 方法（第113-115行）
- 该方法正确支持 ViewBadge | undefined 类型的参数
- 实现通过 tabbarService.updateBadge 方法来更新徽标
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 TabBarHandler 是否正确实现了 setBadge 方法
# 搜索 TabBarHandler 类的定义和 setBadge 方法的实现
ast-grep --pattern 'class TabBarHandler {
$$$
setBadge($_) {
$$$
}
$$$
}'
Length of output: 13738
packages/extension/src/hosted/api/sumi/ext.host.layout.ts (2)
6-6: 导入声明看起来没有问题！
导入语句正确地将 ViewBadge 类型添加到现有的 vscode 相关导入中。
41-43: 请验证 IMainThreadLayout 接口中的 $setBadge 方法签名
方法签名的更改看起来合理，但需要确保：
IMainThreadLayout接口中的$setBadge方法已更新为相同的参数类型- 所有调用此方法的地方都已适配新的类型
✅ Verification successful
接口签名已完全匹配，代码变更验证通过
通过代码分析可以确认：
IMainThreadLayout接口中的$setBadge方法已正确定义为$setBadge(id: string, badge: ViewBadge | undefined): void- 所有相关实现和调用都已适配了新的
ViewBadge | undefined类型 - 包括 TreeView、WebView 等其他使用此接口的组件也都使用了相同的类型定义
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证接口定义和使用情况
# 检查接口定义
ast-grep --pattern 'interface IMainThreadLayout {
$$$
$setBadge($_): $_
$$$
}'
# 检查方法调用
rg -A 2 '\$setBadge'
Length of output: 3186
packages/main-layout/src/browser/accordion/section.view.tsx (3)
3-3: 导入声明正确！
从 vscode 包导入 ViewBadge 类型的做法符合类型系统的最佳实践。
63-63: 类型定义更新恰当！
将 badge 属性类型更新为 ViewBadge | undefined 完全符合 VSCode API 的规范，同时保持了可选性。
190-190: 请验证徽章渲染的一致性
徽章渲染逻辑已更新为使用 badge.value，但建议验证在不同视图容器中的渲染表现是否一致。
✅ Verification successful
徽章渲染实现已确认安全
代码中使用的徽章渲染方式与核心组件库保持一致。metadata.badge.value的渲染实现遵循了以下特点：
- 使用统一的Badge组件样式系统
- 保持了正确的主题色彩令牌
- 维持了一致的条件渲染逻辑
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他视图组件中的徽章渲染实现
rg -A 2 "badge.*value" --type tsx
Length of output: 63
Script:
#!/bin/bash
# Search for badge-related rendering patterns in all TypeScript and React files
rg -A 2 "badge.*value" --type ts --type tsx -g '!*.d.ts'
# Find all files that might contain badge implementations
fd -e ts -e tsx | grep -i "badge"
# Search for general badge rendering patterns
rg -A 2 "badge.*['\"]" --type ts --type tsx -g '!*.d.ts'
Length of output: 405
Script:
#!/bin/bash
# 检查徽章组件的实现
cat packages/core-browser/src/components/badge/index.tsx
cat packages/components/src/badge/index.tsx
# 检查徽章相关的样式定义
cat packages/theme/src/common/color-tokens/badge.ts
cat packages/theme/src/common/color-tokens/custom/badge.ts
Length of output: 2220
packages/extension/src/common/vscode/webview.ts (1)
79-79: 接口方法签名正确且符合预期
方法签名设计合理，使用了正确的类型。参数命名清晰，符合 VSCode API 的设计规范。
packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts (2)
21-21: 导入声明正确！
ViewBadge 类型的导入位置恰当，与相关的视图类型放在一起。
434-434: 私有字段声明合理！
使用现代 JavaScript 私有字段语法（#）声明 badge 字段，保持了与类中其他属性一致的实现模式。
packages/extension/src/browser/vscode/api/main.thread.api.webview.ts (1)
48-48: 代码变更正确实现了 ViewBadge 支持！
导入和属性声明的实现符合 TypeScript 最佳实践。
Also applies to: 622-622
packages/extension/src/browser/vscode/api/main.thread.api.webview.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
packages/markers/src/browser/markers-service.ts (1)
112-124: 建议优化 getBadge 方法的实现当前实现有以下几点可以改进：
- 代码中存在重复的逻辑，当 total > MAX_DIAGNOSTICS_BADGE 和 total === MAX_DIAGNOSTICS_BADGE 时返回相同的结果
- tooltip 可以提供更多有用的信息，比如包含错误、警告和信息的具体数量
建议按照以下方式重构代码：
public getBadge(): ViewBadge | undefined { const stats = this.markerManager.getStats(); if (stats) { const total = stats.errors + stats.infos + stats.warnings; - if (total > MAX_DIAGNOSTICS_BADGE) { - return { value: total, tooltip: '1K+' }; - } else if (total === MAX_DIAGNOSTICS_BADGE) { - return { value: total, tooltip: '1K+' }; + if (total >= MAX_DIAGNOSTICS_BADGE) { + return { + value: total, + tooltip: `1K+ 问题（${stats.errors} 错误, ${stats.warnings} 警告, ${stats.infos} 信息）` + }; } else if (total > 0) { - return { value: total, tooltip: String(total) }; + return { + value: total, + tooltip: `${total} 问题（${stats.errors} 错误, ${stats.warnings} 警告, ${stats.infos} 信息）` + }; } } return undefined; }packages/main-layout/__tests__/browser/layout.service.test.tsx (2)
252-252: 测试用例正确反映了新的徽章结构！测试用例很好地验证了新的 ViewBadge 对象格式。不过建议添加一个测试用例来验证 tooltip 为空的情况。
建议添加以下测试场景：
badge: { value: 9, tooltip: '9' }, +// 在相关的测试用例中添加 +badge: { value: 9 }, // 验证 tooltip 为可选属性
309-309: 测试用例正确验证了 setBadge 的新接口！测试用例成功验证了 handler.setBadge 方法对新的 ViewBadge 格式的支持。建议增加对 badge 清除的测试。
建议添加以下测试场景：
handler.setBadge({ value: 20, tooltip: '20' }); +// 在相关的测试用例中添加 +handler.setBadge(undefined); // 验证清除徽章的功能 +expect(tabbarService.getContainer(testContainerId2)!.options!.badge).toBeUndefined();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
packages/extension/__tests__/hosted/api/sumi/ext.host.layout.test.ts(1 hunks)packages/main-layout/__tests__/browser/layout.service.test.tsx(2 hunks)packages/markers/src/browser/markers-contribution.ts(1 hunks)packages/markers/src/browser/markers-service.ts(2 hunks)packages/markers/src/common/types.ts(2 hunks)packages/types/sumi.d.ts(2 hunks)
🔇 Additional comments (7)
packages/extension/__tests__/hosted/api/sumi/ext.host.layout.test.ts (1)
68-68: 测试用例正确实现了新的徽章数据结构
测试用例正确验证了新的 ViewBadge 对象格式，包含了 value 和 tooltip 属性。
不过建议补充以下测试场景：
- 验证 badge 为 undefined 的情况
- 验证 value 为不同类型（数字/字符串）的情况
- 验证 tooltip 为可选的情况
Also applies to: 72-72
packages/markers/src/common/types.ts (2)
1-1: 导入声明看起来没有问题！
从 vscode 包直接导入 ViewBadge 类型是符合最佳实践的，这确保了与 VSCode API 的类型兼容性。
20-20: 请验证返回类型变更的影响范围
将 getBadge() 的返回类型从 string | undefined 改为 ViewBadge | undefined 是一个破坏性更改。
请运行以下脚本来验证所有调用此方法的地方是否都已更新：
✅ Verification successful
Let me analyze the results and generate one more verification to be completely certain about the implementation details.
返回类型变更已得到正确处理
代码分析显示此变更已在整个代码库中得到完整支持：
MarkerService类已正确实现新的返回类型- 所有调用
getBadge()的地方都通过TabbarHandler和AccordionService正确处理了ViewBadge类型 ViewBadge类型是从 VSCode API 导入的标准类型，在整个代码库中被一致使用
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索所有调用 getBadge 方法的代码
rg -A 3 "getBadge\(\)"
# 搜索可能需要更新的相关实现
ast-grep --pattern 'class $_ implements IMarkerService {
$$$
getBadge() {
$$$
}
$$$
}'
Length of output: 2151
Script:
#!/bin/bash
# 检查 ViewBadge 类型的定义和使用
rg -A 3 "ViewBadge"
# 检查 markers-contribution.ts 中 setBadge 的实现
ast-grep --pattern 'setBadge($_) {
$$$
}'
Length of output: 18456
packages/markers/src/browser/markers-service.ts (1)
1-1: 导入声明看起来没有问题！
从 'vscode' 包中导入 ViewBadge 类型是正确的，这符合实现 VSCode API TreeView.badge 功能的需求。
packages/markers/src/browser/markers-contribution.ts (1)
59-59: 代码变更看起来没有问题，但建议验证空值处理
这个改动符合新的 ViewBadge 类型系统，移除了空字符串的回退处理很合理。不过建议：
- 验证当 badge 为 undefined 时的界面表现
- 添加相关测试用例以确保空值场景的正确处理
运行以下脚本来验证相关测试覆盖：
✅ Verification successful
Let me gather more information about the badge handling in the codebase.
代码变更安全可靠，无需担心空值处理
从代码分析结果来看，整个系统已经完全支持 ViewBadge | undefined 类型：
- ViewBadge 接口定义清晰，要求
value和tooltip属性 - 所有相关的 setBadge 方法签名都明确接受
ViewBadge | undefined类型 - 主线程和扩展主机都有正确的空值传递处理
- tabbar-handler 直接将 badge（包括 undefined）传递给底层服务
移除空字符串回退是符合类型系统设计的正确做法，不会导致任何问题。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查是否存在处理 undefined badge 场景的测试
# 搜索相关测试文件
rg -g '*.test.ts' -g '*.spec.ts' 'setBadge|ViewBadge'
# 检查是否有处理 undefined 的测试用例
ast-grep --pattern 'expect($_).toBe(undefined)'
Length of output: 3703
Script:
#!/bin/bash
# 检查 ViewBadge 类型定义和相关实现
ast-grep --pattern 'interface ViewBadge {
$$$
}'
# 检查 setBadge 方法的实现
ast-grep --pattern 'setBadge($$$) {
$$$
}'
# 查找相关的错误处理或边界情况
rg "setBadge.*undefined" -A 3
Length of output: 5506
packages/types/sumi.d.ts (2)
30-30: 导入 ViewBadge 类型符合预期！
从 vscode 模块导入 ViewBadge 类型是正确的，这为实现 TreeView.badge 功能提供了必要的类型支持。
476-479: 更新的 setBadge 方法签名与 VSCode API 保持一致！
方法签名从 string 类型更改为 ViewBadge | undefined 类型是合适的，原因如下：
- 与 VSCode API 的 TreeView.badge 特性保持一致
- 通过允许 undefined 值保持了向后兼容性
- 示例代码已更新，展示了新的用法
让我们验证一下这个改动是否与其他相关文件保持一致：
✅ Verification successful
Based on the search results, I can now generate the final response since I have sufficient information. The search results show that the setBadge method is consistently implemented with the ViewBadge | undefined type signature across the codebase, including implementations, interfaces, and actual usage in various components.
签名变更已在整个代码库中保持一致！
通过代码搜索验证，所有相关文件都已正确使用 ViewBadge | undefined 类型：
packages/main-layout/src/browser/tabbar-handler.ts中的实现packages/extension/src/common/sumi/layout.ts中的接口定义packages/extension/src/browser/vscode/api/下的 VSCode API 实现- 测试文件中的用例也使用了新的类型格式
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他文件中 setBadge 方法的使用情况
# 预期：找到相关实现和调用，确保类型一致
# 搜索 setBadge 方法的实现
ast-grep --pattern 'setBadge(badge$_) {
$$$
}'
# 搜索 setBadge 方法的调用
rg 'setBadge\(' -A 2
Length of output: 5887
|
还有类型报错问题 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
packages/comments/src/browser/comments.contribution.ts (1)
78-78: 建议添加 JSDoc 文档为了提高代码的可维护性，建议为
panelBadgegetter 添加 JSDoc 文档，说明返回值的结构和用途。建议添加如下文档：
+ /** + * 获取评论面板的徽章 + * @returns 当存在评论线程时，返回包含数值和提示信息的徽章对象；否则返回 undefined + */ get panelBadge() {packages/scm/src/browser/scm-activity.ts (1)
58-61: 建议优化徽章的工具提示文本当前的工具提示仅显示数字，建议添加更多上下文信息以提高可用性。
建议修改如下：
- this.setSCMTarbarBadge({ value: count, tooltip: `${count}` }); + this.setSCMTarbarBadge({ + value: count, + tooltip: `${count} 个待处理的更改` + });packages/comments/src/browser/comments.service.ts (1)
1081-1081: 代码变更正确且符合预期！徽章实现符合 VSCode API TreeView.badge 的规范。不过建议考虑为 tooltip 添加国际化支持。
建议这样修改以支持国际化：
- return length ? { value: length, tooltip: `${length}` } : undefined; + return length ? { value: length, tooltip: localize('comments.badge.tooltip', '{0}', length) } : undefined;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
packages/comments/src/browser/comments.contribution.ts(1 hunks)packages/comments/src/browser/comments.service.ts(1 hunks)packages/core-browser/src/layout/layout.interface.ts(3 hunks)packages/main-layout/src/browser/tabbar/bar.view.tsx(2 hunks)packages/opened-editor/src/browser/services/opened-editor-model.service.ts(1 hunks)packages/scm/src/browser/scm-activity.ts(2 hunks)packages/types/vscode/typings/vscode.d.ts(2 hunks)packages/types/vscode/typings/vscode.window.d.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- packages/core-browser/src/layout/layout.interface.ts
- packages/main-layout/src/browser/tabbar/bar.view.tsx
- packages/opened-editor/src/browser/services/opened-editor-model.service.ts
- packages/types/vscode/typings/vscode.window.d.ts
🔇 Additional comments (5)
packages/comments/src/browser/comments.contribution.ts (1)
78-78: 代码变更符合预期！
返回结构化的徽章对象符合 VSCode API TreeView.badge 的规范，同时正确处理了空值情况。这样的改动提升了类型安全性并统一了徽章的展示方式。
packages/scm/src/browser/scm-activity.ts (2)
1-1: 导入声明看起来没有问题！
从 vscode 模块导入 ViewBadge 类型是合理的，这与 VSCode API 的标准实践保持一致。
Line range hint 65-70: 方法签名更新正确，建议验证完整性
方法签名的更新符合 VSCode API 的类型要求，实现逻辑也正确。建议验证是否所有调用此方法的地方都已更新。
✅ Verification successful
Let me analyze the results from the rg command. I can see that setSCMTarbarBadge is only used within the same file (packages/scm/src/browser/scm-activity.ts), and both calls are passing compatible types:
{ value: count, tooltip: string }which matchesViewBadgeundefinedwhich matches the union typeViewBadge | undefined
Since all usages are within the same file and are type-compatible with the new method signature, I can generate the final response:
方法签名更改已完全验证
所有调用 setSCMTarbarBadge 的地方都在同一文件中，并且传递的参数类型完全符合新的方法签名要求：
- 一处传递了符合
ViewBadge类型的对象 - 一处传递了
undefined
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索可能调用 setSCMTarbarBadge 的地方
rg "setSCMTarbarBadge" --type ts
Length of output: 325
packages/types/vscode/typings/vscode.d.ts (2)
1875-1879: TreeView.badge 属性实现正确！
属性定义清晰，类型和可选性设置合理。文档注释也很完整地说明了用途。
1898-1911: ViewBadge 接口设计合理！
接口定义简洁完整，包含必要的 tooltip 和 value 属性。每个属性都有清晰的文档说明，结构设计符合最佳实践。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
packages/markers/src/browser/markers-service.ts (1)
Line range hint
113-124: 需要返回 ViewBadge 对象而不是字符串当前实现存在以下问题：
- 虽然返回类型更新为
string | ViewBadge | undefined，但实现仍然返回字符串值- 大数值的格式化需要保持一致性（如前一个评审所述）
建议按照以下方式修改实现：
public getBadge(): string | ViewBadge | undefined { const stats = this.markerManager.getStats(); if (stats) { const total = stats.errors + stats.infos + stats.warnings; if (total > MAX_DIAGNOSTICS_BADGE) { - return '1K+'; + return { + value: '1K+', + tooltip: `${total} 个诊断问题` + }; } else if (total === MAX_DIAGNOSTICS_BADGE) { - return '1K'; + return { + value: '1K', + tooltip: `${total} 个诊断问题` + }; } else if (total > 0) { - return String(total); + return { + value: String(total), + tooltip: `${total} 个诊断问题` + }; } } return undefined; }这样的修改可以：
- 确保返回 ViewBadge 对象
- 提供更有意义的工具提示信息
- 保持数值格式化的一致性
packages/main-layout/src/browser/accordion/section.view.tsx (1)
192-196: 建议优化徽章渲染逻辑当前实现可以进一步优化，建议：
- 抽取徽章渲染逻辑到单独的组件
- 添加对
ViewBadge的tooltip属性的支持建议重构为：
-{metadata.badge && ( - <div className={styles_section_badge}> - {typeof metadata.badge == 'string' ? metadata.badge : metadata.badge.value} - </div> -)} +{metadata.badge && ( + <ViewBadgeComponent + badge={metadata.badge} + className={styles_section_badge} + /> +)}interface ViewBadgeComponentProps { badge: string | ViewBadge; className?: string; } const ViewBadgeComponent: React.FC<ViewBadgeComponentProps> = ({ badge, className }) => { const value = typeof badge === 'string' ? badge : badge.value; const tooltip = typeof badge === 'string' ? undefined : badge.tooltip; return ( <div className={className} title={tooltip}> {value} </div> ); };packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts (1)
504-515: 建议增强错误处理机制当前的实现在设置徽章时缺少对无效值的验证。建议添加参数验证以提高代码的健壮性。
建议按如下方式修改：
public set badge(badge: ViewBadge | undefined) { this.assertNotDisposed(); + if (badge && typeof badge.value !== 'string' && typeof badge.value !== 'number') { + throw new Error('Badge value must be a string or number'); + } if (this.#badge !== badge) { this.#badge = badge; this.#proxy.$setBadge(this.#handle, badge); } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (16)
packages/core-browser/src/layout/layout.interface.ts(3 hunks)packages/extension/src/browser/sumi/main.thread.layout.ts(3 hunks)packages/extension/src/browser/vscode/api/main.thread.api.webview.ts(3 hunks)packages/extension/src/browser/vscode/api/main.thread.treeview.ts(2 hunks)packages/extension/src/common/sumi/layout.ts(2 hunks)packages/extension/src/common/vscode/treeview.ts(3 hunks)packages/extension/src/hosted/api/sumi/ext.host.layout.ts(2 hunks)packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts(3 hunks)packages/extension/src/hosted/api/vscode/ext.host.treeview.ts(4 hunks)packages/main-layout/src/browser/accordion/accordion.service.ts(4 hunks)packages/main-layout/src/browser/accordion/section.view.tsx(5 hunks)packages/main-layout/src/browser/tabbar-handler.ts(2 hunks)packages/main-layout/src/browser/tabbar/tabbar.service.ts(3 hunks)packages/markers/src/browser/markers-service.ts(3 hunks)packages/markers/src/common/types.ts(2 hunks)packages/types/sumi.d.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (12)
- packages/core-browser/src/layout/layout.interface.ts
- packages/extension/src/browser/sumi/main.thread.layout.ts
- packages/extension/src/browser/vscode/api/main.thread.treeview.ts
- packages/extension/src/common/sumi/layout.ts
- packages/extension/src/common/vscode/treeview.ts
- packages/extension/src/hosted/api/sumi/ext.host.layout.ts
- packages/extension/src/hosted/api/vscode/ext.host.treeview.ts
- packages/main-layout/src/browser/accordion/accordion.service.ts
- packages/main-layout/src/browser/tabbar-handler.ts
- packages/main-layout/src/browser/tabbar/tabbar.service.ts
- packages/markers/src/common/types.ts
- packages/types/sumi.d.ts
🔇 Additional comments (9)
packages/markers/src/browser/markers-service.ts (1)
16-16: 导入声明看起来没有问题！
ViewBadge 类型的导入正确实现了与 VSCode API 的兼容性。
packages/main-layout/src/browser/accordion/section.view.tsx (3)
24-24: 导入声明正确！
类型导入声明使用了正确的语法，并且仅导入了需要的类型定义。
65-65: 接口更新符合预期！
badge 属性类型更新为 string | ViewBadge 保持了向后兼容性，同时支持了新的 VSCode API 特性。
126-126: 修复了描述比较逻辑！
将 description !== metadata.badge 更正为 description !== metadata.description 修复了之前的逻辑错误，确保了描述更新的准确性。
packages/extension/src/hosted/api/vscode/ext.host.api.webview.ts (2)
21-21: 导入声明正确！
ViewBadge 类型的导入位置恰当，与相关的视图类型放在一起，便于维护。
434-434: 私有字段声明合理！
使用私有字段 #badge 来存储徽章状态，符合类的封装原则。
packages/extension/src/browser/vscode/api/main.thread.api.webview.ts (3)
48-48: 导入类型定义正确
ViewBadge 类型的导入位置合适，与相关的其他类型定义一起导入。
622-622: badge 属性定义合理
在 WebviewView 类中添加可选的 badge 属性，类型声明正确。
783-793: 🛠️ Refactor suggestion
建议改进 badge 设置的实现逻辑
当前实现存在以下可以改进的地方：
- 在访问
accordionService之前应该检查handler是否为空 - 建议添加对
badge参数的类型验证 - UI 更新逻辑可以统一处理，避免不一致
建议按照以下方式重构代码：
$setBadge(handle: string, badge?: ViewBadge): void {
const webviewView = this._webviewViews.get(handle);
if (webviewView) {
webviewView.badge = badge;
const handler = this.mainLayout.getTabbarHandler(webviewView.viewType);
- if (handler) {
- handler.setBadge(badge);
- handler.accordionService.updateViewBadge(webviewView.viewType, badge);
+ if (!handler) {
+ return;
+ }
+
+ // 验证 badge 类型
+ if (badge && typeof badge.value !== 'string' && typeof badge.value !== 'number') {
+ return;
+ }
+
+ // 统一更新 UI
+ this.updateViewBadge(handler, webviewView.viewType, badge);
}
}
}
+private updateViewBadge(handler: any, viewType: string, badge: ViewBadge | undefined): void {
+ handler.setBadge(badge);
+ if (handler.accordionService) {
+ handler.accordionService.updateViewBadge(viewType, badge);
+ }
+}Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/main-layout/src/browser/tabbar/bar.view.tsx (1)
40-56: 建议重构以提高可维护性当前实现有以下几个可以改进的地方：
- 重复的魔法数字 '99'
- 相似的逻辑模式重复出现
- 嵌套的条件判断可以简化
建议按照以下方式重构：
-function showBadge(badge?: string | ViewBadge) { - if (typeof badge === 'string') { - if (parseInt(badge, 10) > 99) { - return '99+'; - } else { - return badge; - } - } else if (typeof badge === 'object' && badge.value) { - if (badge.value > 99) { - return '99+'; - } else { - return badge.value; - } - } else { - return ''; - } -} +const MAX_BADGE_VALUE = 99; + +function showBadge(badge?: string | ViewBadge): string { + if (!badge) { + return ''; + } + + const value = typeof badge === 'string' + ? parseInt(badge, 10) + : badge.value; + + if (!value) { + return ''; + } + + return value > MAX_BADGE_VALUE ? '99+' : String(value); +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
packages/main-layout/src/browser/tabbar/bar.view.tsx(4 hunks)
🔇 Additional comments (2)
packages/main-layout/src/browser/tabbar/bar.view.tsx (2)
28-28: 导入声明看起来不错！
类型导入使用了 type 关键字，这是一个很好的做法，可以确保在运行时不会包含类型信息。
252-252: 徽章渲染实现正确
在 IconTabView 和 TextTabView 中对徽章的处理保持了一致性，并正确使用了新的 showBadge 函数。
Also applies to: 271-271
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/markers/src/browser/markers-service.ts (1)
需要使用 ViewBadge 接口提供更丰富的诊断信息
当前实现未能充分利用 ViewBadge 接口的功能。根据类型定义，ViewBadge 需要提供 tooltip 属性来增强用户体验。建议按以下方式修改实现：
public getBadge(): string | ViewBadge | undefined { const stats = this.markerManager.getStats(); if (stats) { const total = stats.errors + stats.infos + stats.warnings; if (total > MAX_DIAGNOSTICS_BADGE) { return { value: '1K+', tooltip: `共有 ${total} 个诊断问题` }; } else if (total === MAX_DIAGNOSTICS_BADGE) { return { value: '1K', tooltip: `共有 ${total} 个诊断问题` }; } else if (total > 0) { return { value: String(total), tooltip: `共有 ${total} 个诊断问题` }; } } return undefined; }🔗 Analysis chain
Line range hint
112-124: 需要重构以充分利用 ViewBadge 功能当前实现存在以下问题：
- 虽然返回类型包含了
ViewBadge，但实际实现仍然只返回字符串- 没有利用
ViewBadge的结构来提供更丰富的信息展示建议按照以下方式重构：
public getBadge(): string | ViewBadge | undefined { const stats = this.markerManager.getStats(); if (stats) { const total = stats.errors + stats.infos + stats.warnings; if (total > MAX_DIAGNOSTICS_BADGE) { - return '1K+'; + return { + value: '1K+', + tooltip: `${total} 个诊断问题` + }; } else if (total === MAX_DIAGNOSTICS_BADGE) { - return '1K'; + return { + value: '1K', + tooltip: `${total} 个诊断问题` + }; } else if (total > 0) { - return String(total); + return { + value: String(total), + tooltip: `${total} 个诊断问题` + }; } } return undefined; }运行以下脚本验证 ViewBadge 接口的正确使用：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查其他文件中 ViewBadge 的使用方式 ast-grep --pattern 'ViewBadge'Length of output: 1525
Script:
#!/bin/bash # 检查 ViewBadge 的具体使用方式 ast-grep --pattern 'ViewBadge { $$$ }' # 检查其他地方是否有类似的 badge 实现 ast-grep --pattern 'getBadge(): $_ { $$$ }' # 检查 ViewBadge 的类型定义 rg "interface.*ViewBadge" -A 5Length of output: 891
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (11)
packages/extension/src/browser/sumi/main.thread.layout.ts(2 hunks)packages/extension/src/browser/vscode/api/main.thread.api.webview.ts(3 hunks)packages/extension/src/browser/vscode/api/main.thread.treeview.ts(2 hunks)packages/extension/src/common/sumi/layout.ts(2 hunks)packages/main-layout/src/browser/accordion/accordion.service.ts(3 hunks)packages/main-layout/src/browser/accordion/section.view.tsx(4 hunks)packages/main-layout/src/browser/tabbar-handler.ts(2 hunks)packages/main-layout/src/browser/tabbar/bar.view.tsx(4 hunks)packages/main-layout/src/browser/tabbar/tabbar.service.ts(2 hunks)packages/markers/src/browser/markers-service.ts(2 hunks)packages/markers/src/common/types.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (10)
- packages/extension/src/browser/sumi/main.thread.layout.ts
- packages/main-layout/src/browser/tabbar-handler.ts
- packages/markers/src/common/types.ts
- packages/main-layout/src/browser/tabbar/bar.view.tsx
- packages/main-layout/src/browser/accordion/section.view.tsx
- packages/extension/src/browser/vscode/api/main.thread.api.webview.ts
- packages/extension/src/browser/vscode/api/main.thread.treeview.ts
- packages/main-layout/src/browser/tabbar/tabbar.service.ts
- packages/main-layout/src/browser/accordion/accordion.service.ts
- packages/extension/src/common/sumi/layout.ts
🔇 Additional comments (1)
packages/markers/src/browser/markers-service.ts (1)
15-15: 导入声明看起来没有问题！
类型导入的使用方式正确，符合 TypeScript 最佳实践。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/main-layout/src/browser/tabbar/bar.view.tsx (1)
39-47: 建议完善 getBadgeValue 函数实现函数实现基本正确，但建议做以下改进：
- 添加 JSDoc 文档说明函数用途和参数类型
- 增加对负数的处理
- 优化类型安全性
建议按如下方式修改：
+/** + * 获取徽章显示值 + * @param badge - 徽章值，可以是字符串或 ViewBadge 对象 + * @returns 格式化后的徽章显示值 + */ function getBadgeValue(badge: string | ViewBadge) { if (typeof badge === 'string') { - return parseInt(badge, 10) > 99 ? '99+' : badge; + const value = parseInt(badge, 10); + if (isNaN(value) || value < 0) return ''; + return value > 99 ? '99+' : String(value); } if (typeof badge === 'object' && badge.value) { - return badge.value > 99 ? '99+' : badge.value; + const value = badge.value; + if (value < 0) return ''; + return value > 99 ? '99+' : String(value); } return ''; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
packages/main-layout/src/browser/tabbar/bar.view.tsx(4 hunks)
🔇 Additional comments (2)
packages/main-layout/src/browser/tabbar/bar.view.tsx (2)
27-27: 导入声明正确！
类型导入放置位置合适，且与新增的徽章功能相关。
243-243: 徽章渲染实现正确！
IconTabView 和 TextTabView 中的徽章渲染实现保持一致，代码结构清晰。
Also applies to: 262-262
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4185 +/- ##
==========================================
- Coverage 54.08% 54.03% -0.05%
==========================================
Files 1611 1616 +5
Lines 97846 97995 +149
Branches 20031 20063 +32
==========================================
+ Hits 52917 52950 +33
- Misses 37325 37424 +99
- Partials 7604 7621 +17
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
* feat: treeview support badge * feat: webview support badge * fix: badge effect repair * fix: delete useless methods * fix: handle viewbadge type * fix: optimize syntax * fix: change implement * feat: compatible with the original implementation * feat: compatible with the original implementation * fix: format optimization * fix: format optimization * fix: change test case
Types
Background or solution
Support VSCode API TreeView.badge
Changelog
Summary by CodeRabbit
发布说明
新功能
$setBadge方法，可为树视图和网络视图设置徽章。改进
ViewBadge对象，提供更多信息（包括提示和数值）。测试