优化样式
This commit is contained in:
Azmat@qq.com
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user