style: improve MCP configuration page style #4475
Conversation
Walkthrough本次 PR 主要涉及 MCP 组件及其样式的调整和改进。包括 LESS 样式文件的更新，调整了服务器项目的背景色、按钮交互和状态图标；修改了 MCPConfigView 和 MCPServerForm 组件的 UI 交互方式，引入了 Popover、Button 以及 Badge 组件；同时更新了相关接口和类型，增强了服务器数据结构（如新增 MCPTool 信息）；此外，本次更新还对中英文国际化语言包中的键值做出了相应调整。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant V as MCPConfigView
participant T as 组件库 (Button, Popover, Badge)
participant B as 后台接口
U->>V: 点击服务器操作按钮
V->>T: 触发 Popover 显示操作提示
V->>B: 请求服务器状态及工具信息
B-->>V: 返回更新后的数据
V->>T: 更新界面显示 (状态图标及 Badge)
Possibly related PRs
Suggested labels
Suggested reviewers
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
yarn install v1.22.22 Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
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:
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: 0
🧹 Nitpick comments (1)
packages/ai-native/src/browser/mcp/config/components/mcp-config.module.less (1)
51-84: 检查 .serverHeader 命名与样式设计
在.serverItem内部新增了.serverHeader及其嵌套规则，定义了按钮区域（包括.iconButton与.serverActionButton）的交互样式。根据 PR 描述，建议确认是否需要将.serverHeader重命名统一为.serverTitleRow，或两者需明确区分用途，确保组件调用时名称一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
packages/ai-native/src/browser/mcp/config/components/mcp-config.module.less(2 hunks)packages/ai-native/src/browser/mcp/config/components/mcp-config.view.tsx(3 hunks)packages/ai-native/src/browser/mcp/config/components/mcp-server-form.module.less(1 hunks)packages/ai-native/src/browser/mcp/config/components/mcp-server-form.tsx(1 hunks)packages/ai-native/src/common/index.ts(2 hunks)packages/ai-native/src/common/types.ts(1 hunks)packages/ai-native/src/node/mcp/sumi-mcp-server.ts(4 hunks)packages/i18n/src/common/en-US.lang.ts(1 hunks)packages/i18n/src/common/zh-CN.lang.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: ubuntu-latest, Node.js 20.x
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: build-windows
🔇 Additional comments (20)
packages/ai-native/src/browser/mcp/config/components/mcp-server-form.module.less (1)
49-51: 样式改进：二级按钮的透明度设置新增的
.secondaryButton类通过设置透明度为 0.6，使得取消按钮的视觉权重降低，与主按钮形成层次对比，提升了用户界面的视觉层次感。packages/ai-native/src/common/types.ts (1)
49-49: 接口增强：工具数据结构优化将
tools属性从简单的字符串数组升级为MCPTool对象数组，使得工具信息更加结构化和丰富，可以包含更多元数据如描述、输入模式等。这种更改有利于提供更丰富的 UI 展示和更好的用户体验。packages/ai-native/src/browser/mcp/config/components/mcp-server-form.tsx (1)
266-267: UI 交互改进：取消按钮样式优化将取消按钮的类型从
ghost变更为primary并应用secondaryButton样式，使得取消按钮与确认按钮形成视觉上的层次关系，同时保持一致的按钮风格。这种变更提升了界面的一致性和专业感。packages/i18n/src/common/zh-CN.lang.ts (1)
1387-1390: 术语优化：状态描述更清晰将服务状态描述从"运行/停止"更改为"启用/禁用"，并新增了相应的操作提示文本。这种表述更加贴近用户理解，使界面交互逻辑更加清晰，提升了用户体验。
packages/i18n/src/common/en-US.lang.ts (1)
1624-1627: 语言包键值更新更好地反映了服务状态这个更改将"running/stopped"的状态描述改为了"enabled/disabled"，并添加了操作提示，更准确地反映了服务的状态概念，使界面语言更加一致和专业。
packages/ai-native/src/node/mcp/sumi-mcp-server.ts (2)
139-149: 工具表示方式的增强，提供更丰富的元数据将简单的工具名称数组改为包含更多元数据（描述、输入模式和提供者名称）的对象数组，使客户端能够展示更丰富的工具信息，提升了用户体验。
157-158: 统一使用增强的工具数据结构在所有服务器类型的返回对象中，统一使用增强后的
tools数组，保持了数据结构的一致性。Also applies to: 168-169, 176-177, 185-186
packages/ai-native/src/common/index.ts (2)
40-40: 改进内置服务器的显示名称将内置服务器的名称从"builtin"更改为"Builtin"，使其在UI中显示更加专业，与其他首字母大写的服务器名称风格保持一致。
137-137: 更新接口定义以支持增强的工具数据结构更新了
getServers()方法的返回类型，添加了tools: MCPTool[]属性，使其与实现保持一致，确保类型安全。packages/ai-native/src/browser/mcp/config/components/mcp-config.view.tsx (5)
4-4: 引入增强UI组件添加了
Button、Popover和PopoverTriggerType组件的导入，为UI提供了更丰富的交互和视觉效果。
181-186: 添加服务器状态可视化指示器为服务器名称旁添加了状态图标，通过不同的样式直观地显示服务器是否处于活动状态，提升了用户体验。
189-212: 改进服务器操作按钮的交互和可视化效果使用
Popover组件为按钮添加了悬停提示，显示操作的具体含义。同时使用Button组件替换原有按钮，添加图标和反映服务器状态的文本，使操作更加直观。
214-231: 统一编辑和删除按钮的样式将编辑和删除按钮替换为带有图标的
Button组件，保持了UI的一致性和现代感。
248-250: 使用Badge组件美化工具标签将简单的span标签替换为
Badge组件来显示工具名称，同时添加了工具描述的提示，使界面更加美观且信息更加丰富。packages/ai-native/src/browser/mcp/config/components/mcp-config.module.less (6)
48-48: 更新背景色变量确认
此处将.serverItem的背景色修改为var(--editor-background)，符合新的视觉风格。请确认全局主题中该变量的定义是否符合预期。
91-96: 新增 .serverTitleRow 样式
新增的.serverTitleRow通过display: flex布局，并设置了gap: 8px及text-indent: 12px，有助于排版调整。建议在各种屏幕尺寸中测试其响应效果，确保间距符合设计预期。
98-103: .serverActions 布局优化
新增的.serverActions样式为服务器操作按钮提供了横向对齐与右对齐支持，通过flex: 1和justify-content: flex-end实现。这提升了整体交互体验，请在不同分辨率下确认布局效果。
105-112: 更新 .serverName 样式
为.serverName新增了display: flex、align-items: center和justify-content: center属性，使服务器名称能够水平垂直居中显示。建议验证在长名称或多语言场景下，文本显示不会出现意外截断或排版问题。
113-128: 新增 .serverStatusIcon 样式
添加了.serverStatusIcon用于显示服务器状态，设置了圆形（border-radius: 50%）、固定尺寸、左右间距及根据状态变化的背景色和边框阴影。此举能有效增强状态反馈的视觉效果，请在不同浏览器下测试其呈现效果。
221-221: 增强交互提示
在.toolTag内新增了cursor: pointer;样式，使得该元素在悬浮时显示为可点击状态，提升用户体验。确认此交互行为与其它类似组件保持一致。
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4475 +/- ##
==========================================
- Coverage 53.24% 53.23% -0.01%
==========================================
Files 1663 1663
Lines 102619 102619
Branches 22201 22202 +1
==========================================
- Hits 54639 54633 -6
- Misses 39920 39925 +5
- Partials 8060 8061 +1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Types
Background or solution
Changelog
improve MCP configuration page style
Summary by CodeRabbit
样式改进
界面优化
国际化更新