59c13c3366
- 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.
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import React from "react";
|
|
|
|
interface McpToggleProps {
|
|
enabled: boolean;
|
|
onChange: (enabled: boolean) => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Toggle 开关组件
|
|
* 启用时为淡绿色，禁用时为灰色
|
|
*/
|
|
const McpToggle: React.FC<McpToggleProps> = ({
|
|
enabled,
|
|
onChange,
|
|
disabled = false,
|
|
}) => {
|
|
return (
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={enabled}
|
|
disabled={disabled}
|
|
onClick={() => onChange(!enabled)}
|
|
className={`
|
|
relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500/20
|
|
${enabled ? "bg-emerald-500 dark:bg-emerald-600" : "bg-gray-300 dark:bg-gray-600"}
|
|
${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
|
|
`}
|
|
>
|
|
<span
|
|
className={`
|
|
inline-block h-4 w-4 transform rounded-full bg-white transition-transform
|
|
${enabled ? "translate-x-6" : "translate-x-1"}
|
|
`}
|
|
/>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default McpToggle;
|