Complete platform management workflows

platform_web/components/OperationControls.tsx

@@ -1,3 +1,4 @@
+import { X } from "lucide-react";
 import type { ReactNode } from "react";
 
 interface ConfirmDialogProps {
@@ -35,6 +36,36 @@ export function ConfirmDialog({ open, title, description, confirmLabel, danger,
   );
 }
 
+interface ManagementDialogProps {
+  open: boolean;
+  title: string;
+  description?: ReactNode;
+  wide?: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export function ManagementDialog({ open, title, description, wide, onClose, children }: ManagementDialogProps) {
+  if (!open) {
+    return null;
+  }
+  return (
+    <div className="confirm-backdrop management-dialog-backdrop" role="presentation" onClick={onClose}>
+      <div className={`drawer-panel management-dialog-panel${wide ? " management-dialog-wide" : ""}`} role="dialog" aria-modal="true" aria-label={title} onClick={(event) => event.stopPropagation()}>
+        <div className="panel-header">
+          <h2>{title}</h2>
+          <button type="button" className="theme-upload drawer-close" onClick={onClose}>
+            <X size={14} />
+            <span>关闭</span>
+          </button>
+        </div>
+        {description && <p className="dialog-description">{description}</p>}
+        {children}
+      </div>
+    </div>
+  );
+}
+
 interface UsageMeterProps {
   label: string;
   percent?: number;