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;

platform_web/components/PageFrame.tsx

@@ -23,14 +23,16 @@ export function PageFrame({ kicker, title, status, metrics }: PageFrameProps) {
         </div>
         <span className="page-status">{status}</span>
       </header>
-      <div className="metric-grid">
-        {metrics.map((metric) => (
-          <article key={metric.label} className={cx("metric-card", `metric-tone-${metric.tone}`)}>
-            <span className="metric-label">{metric.label}</span>
-            <strong className="metric-value">{metric.value}</strong>
-          </article>
-        ))}
-      </div>
+      {metrics.length > 0 && (
+        <dl className="page-summary-strip" aria-label={`${title} 快速状态`}>
+          {metrics.map((metric) => (
+            <div key={metric.label} className={cx("page-summary-chip", `summary-tone-${metric.tone}`)}>
+              <dt>{metric.label}</dt>
+              <dd>{metric.value}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
     </section>
   );
 }