优化样式

core/frontend/src/admin-page.css

@@ -539,7 +539,17 @@
 }
 
 .admin-anomaly-chip { height: 28px; padding: 0 14px; font-size: 12.5px; cursor: pointer; }
-.admin-drawer { width: 620px; max-width: 92vw; }
+.admin-drawer {
+  --klein: #002fa7;
+  --st-muted: #6f747c;
+  --st-text: #17181a;
+  --st-line: rgba(34, 42, 54, 0.10);
+  --st-wash: rgba(34, 42, 54, 0.045);
+  width: 620px;
+  max-width: 92vw;
+  z-index: 1800;
+}
+.drawer-bg:has(+ .admin-drawer) { z-index: 1790; }
 .admin-json {
   background: var(--st-wash);
   border: 1px solid var(--st-line);
@@ -551,7 +561,8 @@
   line-height: 1.6;
   color: var(--black-alpha-72, var(--accent-black));
   white-space: pre-wrap;
-  word-break: break-all;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   max-height: 260px;
   overflow: auto;
 }

core/frontend/src/components/overlays.tsx

@@ -181,7 +181,7 @@ export function SuccessModal({ open, title, detail, actions, close }: {
   );
 }
 
-export function Drawer({ title, open, close, children }: { title: string; open: boolean; close: () => void; children: ReactNode }) {
+export function Drawer({ title, open, close, children, className }: { title: string; open: boolean; close: () => void; children: ReactNode; className?: string }) {
   useBodyScrollLock(open);
   const { mounted, show } = useOverlayTransition(open, close);
   if (!mounted) return null;
@@ -189,7 +189,7 @@ export function Drawer({ title, open, close, children }: { title: string; open:
   return createPortal(
     <>
       <div className={`drawer-bg${show ? " show" : ""}`} onClick={close} />
-      <aside className={`drawer${show ? " show" : ""}`}>
+      <aside className={`drawer${className ? ` ${className}` : ""}${show ? " show" : ""}`}>
         <div className="drawer-h"><h3>{title}</h3><button className="x" type="button" onClick={close} aria-label="关闭"><X size={14} /></button></div>
         <div className="drawer-b">{children}</div>
       </aside>

core/frontend/src/routes/admin/admin-tasks.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
-import { Activity, RefreshCw, X } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { adminApi } from "../../api";
 import { Pager } from "../../components/pager";
 import { IconKitSvg } from "../../components/IconKitSvg";
 import { SystemLoading } from "../../components/loading";
+import { Drawer } from "../../components/overlays";
 import type { AdminTask, AdminTaskDetail } from "../../types";
 import { pts } from "../stage-config";
 
@@ -185,14 +186,12 @@ export function AdminTasksPage({ notify }: { notify: Notify }) {
         </div>
       )}
 
-      {(detail || detailLoading) && (
-        <div className="drawer-bg show" onClick={(e) => { if (e.target === e.currentTarget) setDetail(null); }}>
-          <div className="drawer admin-drawer show" role="dialog" aria-modal="true" aria-label="任务详情">
-            <div className="drawer-h">
-              <h3><Activity size={15} style={{ verticalAlign: "-2px", marginRight: 6 }} />任务详情</h3>
-              <button className="x" type="button" aria-label="关闭" onClick={() => setDetail(null)}><X size={14} /></button>
-            </div>
-            <div className="drawer-b">
+      <Drawer
+        title="任务详情"
+        open={!!(detail || detailLoading)}
+        close={() => { setDetail(null); setDetailLoading(false); }}
+        className="admin-drawer"
+      >
         {detailLoading || !detail ? (
           <SystemLoading variant="inline" title="正在加载详情" />
         ) : (
@@ -258,10 +257,7 @@ export function AdminTasksPage({ notify }: { notify: Notify }) {
             <pre className="admin-json">{JSON.stringify(detail.response_payload, null, 2)}</pre>
           </>
         )}
-            </div>
-          </div>
-        </div>
-      )}
+      </Drawer>
     </>
   );
 }