优化样式
This commit is contained in:
Azmat@qq.com
@@ -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