refactor(mcp): redesign MCP management panel UI

- Redesign MCP panel to match main interface style
- Add toggle switch for each MCP server to enable/disable
- Use emerald theme color consistent with MCP button
- Create card-based layout with one MCP per row
- Add dedicated form modal for add/edit operations
- Implement proper empty state with friendly prompts
- Add comprehensive i18n support (zh/en)
- Extend McpServer type to support enabled field
- Backend already supports enabled field via serde_json::Value

Components:
- McpPanel: Main panel container with header and list
- McpListItem: Card-based list item with toggle and actions
- McpFormModal: Independent modal for add/edit forms
- McpToggle: Emerald-themed toggle switch component

All changes passed TypeScript type checking and production build.
This commit is contained in:
Jason
2025-10-09 11:04:36 +08:00
parent 96a4b4fe95
commit 59c13c3366
9 changed files with 566 additions and 301 deletions

View File

@@ -8,6 +8,7 @@
"edit": "Edit",
"delete": "Delete",
"save": "Save",
"saving": "Saving...",
"cancel": "Cancel",
"confirm": "Confirm",
"close": "Close",
@@ -255,9 +256,12 @@
"serverList": "Servers",
"loading": "Loading...",
"empty": "No MCP servers",
"add": "Add Server",
"emptyDescription": "Click the button in the top right to add your first MCP server",
"add": "Add MCP",
"addServer": "Add Server",
"editServer": "Edit Server",
"configPath": "Config Path",
"serverCount": "{{count}} MCP server(s) configured",
"template": {
"fetch": "Quick Template: mcp-fetch"
},
@@ -277,6 +281,8 @@
"msg": {
"saved": "Saved",
"deleted": "Deleted",
"enabled": "Enabled",
"disabled": "Disabled",
"templateAdded": "Template added"
},
"error": {
@@ -288,6 +294,10 @@
"validation": {
"ok": "Command available",
"fail": "Command not found"
},
"confirm": {
"deleteTitle": "Delete MCP Server",
"deleteMessage": "Are you sure you want to delete MCP server \"{{id}}\"? This action cannot be undone."
}
}
}