From 368586d33ea76dc5b1919789ee2a59ed87d2f06e Mon Sep 17 00:00:00 2001
From: "Azmat@qq.com" <Azmat@qq.com>
Date: Fri, 21 Aug 2026 18:41:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/frontend/src/admin-page.css              |  15 +-
 core/frontend/src/components/overlays.tsx     |   4 +-
 .../frontend/src/routes/admin/admin-tasks.tsx | 148 +++++++++---------
 3 files changed, 87 insertions(+), 80 deletions(-)

diff --git a/core/frontend/src/admin-page.css b/core/frontend/src/admin-page.css
index 2e3aa53..3de20be 100644
--- a/core/frontend/src/admin-page.css
+++ b/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;
 }
diff --git a/core/frontend/src/components/overlays.tsx b/core/frontend/src/components/overlays.tsx
index 0889b1d..a880fa7 100644
--- a/core/frontend/src/components/overlays.tsx
+++ b/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>
diff --git a/core/frontend/src/routes/admin/admin-tasks.tsx b/core/frontend/src/routes/admin/admin-tasks.tsx
index ecad162..2d4596f 100644
--- a/core/frontend/src/routes/admin/admin-tasks.tsx
+++ b/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,83 +186,78 @@ 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>
+      <Drawer
+        title="任务详情"
+        open={!!(detail || detailLoading)}
+        close={() => { setDetail(null); setDetailLoading(false); }}
+        className="admin-drawer"
+      >
+        {detailLoading || !detail ? (
+          <SystemLoading variant="inline" title="正在加载详情" />
+        ) : (
+          <>
+            {(() => {
+              const attempts = detail.attempts || [];
+              const finalAttempt = [...attempts].reverse().find((attempt) => attempt.status === "succeeded");
+              const fallbackUsed = attempts.some((attempt) => attempt.is_fallback);
+              return (
+            <div className="admin-detail-meta">
+              <div><span className="k">状态</span><span className="v">{statusPill(detail.status)}</span></div>
+              <div><span className="k">团队</span><span className="v">{detail.team_name || "—"}</span></div>
+              <div><span className="k">模型</span><span className="v">{detail.model_name || "—"}</span></div>
+              <div><span className="k">计价</span><span className="v mono">{pts(detail.estimated_cost)} → {pts(detail.actual_cost)} 积分{detail.cost_anomaly ? " ⚠" : ""}</span></div>
+              <div><span className="k">平台成本</span><span className="v mono">{Number(detail.base_cost || 0) > 0 ? `¥${detail.base_cost} · 毛利 ${detail.margin_yuan != null ? `¥${detail.margin_yuan}` : "—"}` : "未知"}</span></div>
+              <div><span className="k">模型调用</span><span className="v mono">{attempts.length ? `${attempts.length} 次 · ${fallbackUsed ? "发生 Fallback" : "未切换"}` : "旧任务 · 无尝试链"}</span></div>
+              {finalAttempt && <div><span className="k">最终成功模型</span><span className="v">{finalAttempt.provider_display_name || finalAttempt.provider_name} / {finalAttempt.model_display_name || finalAttempt.model_name}</span></div>}
             </div>
-            <div className="drawer-b">
-              {detailLoading || !detail ? (
-                <SystemLoading variant="inline" title="正在加载详情" />
-              ) : (
-                <>
-                  {(() => {
-                    const attempts = detail.attempts || [];
-                    const finalAttempt = [...attempts].reverse().find((attempt) => attempt.status === "succeeded");
-                    const fallbackUsed = attempts.some((attempt) => attempt.is_fallback);
-                    return (
-                  <div className="admin-detail-meta">
-                    <div><span className="k">状态</span><span className="v">{statusPill(detail.status)}</span></div>
-                    <div><span className="k">团队</span><span className="v">{detail.team_name || "—"}</span></div>
-                    <div><span className="k">模型</span><span className="v">{detail.model_name || "—"}</span></div>
-                    <div><span className="k">计价</span><span className="v mono">{pts(detail.estimated_cost)} → {pts(detail.actual_cost)} 积分{detail.cost_anomaly ? " ⚠" : ""}</span></div>
-                    <div><span className="k">平台成本</span><span className="v mono">{Number(detail.base_cost || 0) > 0 ? `¥${detail.base_cost} · 毛利 ${detail.margin_yuan != null ? `¥${detail.margin_yuan}` : "—"}` : "未知"}</span></div>
-                    <div><span className="k">模型调用</span><span className="v mono">{attempts.length ? `${attempts.length} 次 · ${fallbackUsed ? "发生 Fallback" : "未切换"}` : "旧任务 · 无尝试链"}</span></div>
-                    {finalAttempt && <div><span className="k">最终成功模型</span><span className="v">{finalAttempt.provider_display_name || finalAttempt.provider_name} / {finalAttempt.model_display_name || finalAttempt.model_name}</span></div>}
-                  </div>
-                    );
-                  })()}
-                  {detail.attempts?.length > 0 && (
-                    <>
-                      <div className="admin-detail-subhead">模型调用链 · {detail.attempts.length} 次</div>
-                      <div className="admin-attempt-list">
-                        {detail.attempts.map((attempt) => (
-                          <div className="admin-attempt" key={attempt.id}>
-                            <div className="admin-attempt-head">
-                              <span className="admin-attempt-seq mono">{String(attempt.sequence).padStart(2, "0")}</span>
-                              {statusPill(attempt.status)}
-                              <span className="admin-attempt-kind mono">{attemptKind(attempt)}</span>
-                            </div>
-                            <div className="admin-attempt-model">
-                              <span>{attempt.provider_display_name || attempt.provider_name}</span>
-                              <span className="admin-attempt-sep">/</span>
-                              <strong>{attempt.model_display_name || attempt.model_name}</strong>
-                            </div>
-                            <div className="admin-attempt-meta mono">
-                              <span>{attempt.operation}</span>
-                              <span>{attempt.duration_ms == null ? "耗时 —" : `耗时 ${attempt.duration_ms} ms`}</span>
-                              <span>{Number(attempt.platform_cost || 0) > 0 ? `平台成本 ¥${attempt.platform_cost}` : "平台成本未知"}</span>
-                              {attempt.provider_task_id && <span>Provider ID {attempt.provider_task_id}</span>}
-                            </div>
-                            {(attempt.error_type || attempt.raw_error) && (
-                              <div className="admin-attempt-error">
-                                <span className="mono">[{attempt.error_type || "unknown"}{attempt.provider_error_code ? ` · ${attempt.provider_error_code}` : ""}]</span>
-                                <span>{attempt.raw_error || attempt.safe_error_summary}</span>
-                              </div>
-                            )}
-                          </div>
-                        ))}
+              );
+            })()}
+            {detail.attempts?.length > 0 && (
+              <>
+                <div className="admin-detail-subhead">模型调用链 · {detail.attempts.length} 次</div>
+                <div className="admin-attempt-list">
+                  {detail.attempts.map((attempt) => (
+                    <div className="admin-attempt" key={attempt.id}>
+                      <div className="admin-attempt-head">
+                        <span className="admin-attempt-seq mono">{String(attempt.sequence).padStart(2, "0")}</span>
+                        {statusPill(attempt.status)}
+                        <span className="admin-attempt-kind mono">{attemptKind(attempt)}</span>
                       </div>
-                    </>
-                  )}
-                  {detail.error_message && (
-                    <>
-                      <div className="admin-detail-subhead">错误</div>
-                      <pre className="admin-json admin-json-err">{detail.error_message}</pre>
-                    </>
-                  )}
-                  <div className="admin-detail-subhead">请求 payload</div>
-                  <pre className="admin-json">{JSON.stringify(detail.request_payload, null, 2)}</pre>
-                  <div className="admin-detail-subhead">响应 payload</div>
-                  <pre className="admin-json">{JSON.stringify(detail.response_payload, null, 2)}</pre>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
+                      <div className="admin-attempt-model">
+                        <span>{attempt.provider_display_name || attempt.provider_name}</span>
+                        <span className="admin-attempt-sep">/</span>
+                        <strong>{attempt.model_display_name || attempt.model_name}</strong>
+                      </div>
+                      <div className="admin-attempt-meta mono">
+                        <span>{attempt.operation}</span>
+                        <span>{attempt.duration_ms == null ? "耗时 —" : `耗时 ${attempt.duration_ms} ms`}</span>
+                        <span>{Number(attempt.platform_cost || 0) > 0 ? `平台成本 ¥${attempt.platform_cost}` : "平台成本未知"}</span>
+                        {attempt.provider_task_id && <span>Provider ID {attempt.provider_task_id}</span>}
+                      </div>
+                      {(attempt.error_type || attempt.raw_error) && (
+                        <div className="admin-attempt-error">
+                          <span className="mono">[{attempt.error_type || "unknown"}{attempt.provider_error_code ? ` · ${attempt.provider_error_code}` : ""}]</span>
+                          <span>{attempt.raw_error || attempt.safe_error_summary}</span>
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+            {detail.error_message && (
+              <>
+                <div className="admin-detail-subhead">错误</div>
+                <pre className="admin-json admin-json-err">{detail.error_message}</pre>
+              </>
+            )}
+            <div className="admin-detail-subhead">请求 payload</div>
+            <pre className="admin-json">{JSON.stringify(detail.request_payload, null, 2)}</pre>
+            <div className="admin-detail-subhead">响应 payload</div>
+            <pre className="admin-json">{JSON.stringify(detail.response_payload, null, 2)}</pre>
+          </>
+        )}
+      </Drawer>
     </>
   );
 }