+ );
}
if (activeTab === "channels") {
return (
@@ -780,13 +1348,14 @@ const App = () => {
lastRun={checkinLastRun}
siteSearch={siteSearch}
siteSort={siteSort}
+ isActionPending={isActionPending}
onCreate={openSiteCreate}
onCloseModal={closeSiteModal}
onEdit={startSiteEdit}
onSubmit={handleSiteSubmit}
onTest={handleSiteTest}
onToggle={handleSiteToggle}
- onDelete={handleSiteDelete}
+ onDelete={requestSiteDelete}
onPageChange={handleSitePageChange}
onPageSizeChange={handleSitePageSizeChange}
onSearchChange={handleSiteSearchChange}
@@ -809,25 +1378,50 @@ const App = () => {
tokenTotal={tokenTotal}
tokenTotalPages={tokenTotalPages}
isTokenModalOpen={isTokenModalOpen}
+ isActionPending={isActionPending}
+ sites={data.sites}
onCreate={openTokenCreate}
onCloseModal={closeTokenModal}
onPageChange={handleTokenPageChange}
onPageSizeChange={handleTokenPageSizeChange}
+ tokenForm={tokenForm}
+ editingToken={editingToken}
onSubmit={handleTokenSubmit}
+ onFormChange={handleTokenFormChange}
+ onEdit={openTokenEdit}
onReveal={handleTokenReveal}
onToggle={handleTokenToggle}
- onDelete={handleTokenDelete}
+ onDelete={requestTokenDelete}
/>
);
}
if (activeTab === "usage") {
- return
+
+
{token ? (
{
activeLabel={activeLabel}
token={token}
notice={notice}
+ onDismissNotice={dismissNotice}
onTabChange={handleTabChange}
onLogout={handleLogout}
>
{renderContent()}
) : (
-
+
+ )}
+ {confirmState && (
+
+
event.stopPropagation()}
+ >
+
+
+
+ {confirmState.title}
+
+
+ {confirmState.message}
+
+
+
+
+
+
+
+
+
+
)}
);
diff --git a/apps/ui/src/core/constants.ts b/apps/ui/src/core/constants.ts
index eb2e266..5ec9456 100644
--- a/apps/ui/src/core/constants.ts
+++ b/apps/ui/src/core/constants.ts
@@ -1,4 +1,10 @@
-import type { AdminData, SettingsForm, SiteForm, TabItem } from "./types";
+import type {
+ AdminData,
+ SettingsForm,
+ SiteForm,
+ TabItem,
+ TokenForm,
+} from "./types";
export const apiBase = import.meta.env.VITE_API_BASE ?? "";
@@ -43,4 +49,13 @@ export const initialSettingsForm: SettingsForm = {
session_ttl_hours: "12",
admin_password: "",
checkin_schedule_time: "00:10",
+ model_failure_cooldown_minutes: "10",
+};
+
+export const initialTokenForm: TokenForm = {
+ name: "",
+ quota_total: "",
+ status: "active",
+ expires_at: "",
+ allowed_channels: [],
};
diff --git a/apps/ui/src/core/types.ts b/apps/ui/src/core/types.ts
index 5c56672..61ad85a 100644
--- a/apps/ui/src/core/types.ts
+++ b/apps/ui/src/core/types.ts
@@ -41,6 +41,8 @@ export type Token = {
quota_total: number | null;
quota_used: number;
status: string;
+ allowed_channels?: string[] | null;
+ expires_at?: string | null;
created_at?: string | null;
updated_at?: string | null;
};
@@ -66,6 +68,20 @@ export type UsageLog = {
created_at: string;
};
+export type UsageQuery = {
+ channel: string;
+ token: string;
+ model: string;
+ status: string;
+};
+
+export type UsageResponse = {
+ logs: UsageLog[];
+ total: number;
+ limit: number;
+ offset: number;
+};
+
export type DashboardData = {
summary: {
total_requests: number;
@@ -84,6 +100,7 @@ export type Settings = {
session_ttl_hours: number;
admin_password_set?: boolean;
checkin_schedule_time?: string;
+ model_failure_cooldown_minutes?: number;
};
export type ModelChannel = {
@@ -142,6 +159,15 @@ export type SettingsForm = {
session_ttl_hours: string;
admin_password: string;
checkin_schedule_time: string;
+ model_failure_cooldown_minutes: string;
+};
+
+export type TokenForm = {
+ name: string;
+ quota_total: string;
+ status: string;
+ expires_at: string;
+ allowed_channels: string[];
};
export type CheckinResultItem = {
@@ -158,3 +184,11 @@ export type CheckinSummary = {
failed: number;
skipped: number;
};
+
+export type NoticeTone = "success" | "warning" | "error" | "info";
+
+export type NoticeMessage = {
+ tone: NoticeTone;
+ message: string;
+ id: number;
+};
diff --git a/apps/ui/src/core/utils.ts b/apps/ui/src/core/utils.ts
index eb32591..82bb899 100644
--- a/apps/ui/src/core/utils.ts
+++ b/apps/ui/src/core/utils.ts
@@ -26,6 +26,87 @@ export const formatDateTime = (value?: string | null) => {
)}`;
};
+const formatInTimeZone = (
+ value: string | null | undefined,
+ timeZone: string,
+ parts: Array<"year" | "month" | "day" | "hour" | "minute" | "second">,
+ separator: { date: string },
+): string => {
+ if (!value) {
+ return "-";
+ }
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) {
+ return "-";
+ }
+ const formatter = new Intl.DateTimeFormat("en-CA", {
+ timeZone,
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ hour: "2-digit",
+ minute: "2-digit",
+ second: "2-digit",
+ hour12: false,
+ });
+ const dateParts = formatter.formatToParts(date);
+ const pick = (type: string) =>
+ dateParts.find((part) => part.type === type)?.value ?? "00";
+ const dateText = `${pick("year")}-${pick("month")}-${pick("day")}`;
+ const timeText = parts.includes("second")
+ ? `${pick("hour")}:${pick("minute")}:${pick("second")}`
+ : `${pick("hour")}:${pick("minute")}`;
+ return `${dateText}${separator.date}${timeText}`.trim();
+};
+
+export const formatChinaDateTime = (value?: string | null) =>
+ formatInTimeZone(
+ value,
+ "Asia/Shanghai",
+ ["year", "month", "day", "hour", "minute", "second"],
+ { date: " " },
+ );
+
+export const toChinaDateTimeInput = (value?: string | null) => {
+ if (!value) {
+ return "";
+ }
+ const formatted = formatInTimeZone(
+ value,
+ "Asia/Shanghai",
+ ["year", "month", "day", "hour", "minute"],
+ { date: "T" },
+ );
+ return formatted === "-" ? "" : formatted;
+};
+
+export const toChinaIsoFromInput = (value?: string | null) => {
+ if (!value) {
+ return null;
+ }
+ const raw = value.trim();
+ if (!raw) {
+ return null;
+ }
+ const [datePart, timePart] = raw.split("T");
+ if (!datePart || !timePart) {
+ return null;
+ }
+ const [year, month, day] = datePart.split("-").map(Number);
+ const [hour, minute] = timePart.split(":").map(Number);
+ if (
+ Number.isNaN(year) ||
+ Number.isNaN(month) ||
+ Number.isNaN(day) ||
+ Number.isNaN(hour) ||
+ Number.isNaN(minute)
+ ) {
+ return null;
+ }
+ const utcMillis = Date.UTC(year, month - 1, day, hour - 8, minute);
+ return new Date(utcMillis).toISOString();
+};
+
/**
* Toggles channel or token status between active and disabled.
*
@@ -79,63 +160,20 @@ export const buildPageItems = (current: number, total: number): PageItem[] => {
});
};
-const truncateText = (value: string | null | undefined, max = 80) => {
- if (!value) {
- return null;
- }
- const trimmed = value.trim();
- if (!trimmed) {
- return null;
- }
- return trimmed.length > max ? `${trimmed.slice(0, max)}...` : trimmed;
-};
-
-const describeError = (status?: number | null, code?: string | null) => {
- const normalized = (code ?? "").toLowerCase();
- if (status === 401 || status === 403) {
- return "鉴权失败";
- }
- if (status === 429 || normalized.includes("rate")) {
- return "触发限流";
- }
- if (
- normalized.includes("insufficient") ||
- normalized.includes("quota") ||
- normalized.includes("balance")
- ) {
- return "余额不足";
- }
- if (normalized.includes("model")) {
- return "模型不可用";
- }
- return null;
-};
-
export type UsageStatusDetail = {
label: string;
- message: string | null;
tone: "success" | "error";
};
export const buildUsageStatusDetail = (log: UsageLog): UsageStatusDetail => {
- if (log.status === "ok") {
- return { label: "成功", message: null, tone: "success" };
- }
- const parts: string[] = [];
- if (log.upstream_status !== null && log.upstream_status !== undefined) {
- parts.push(String(log.upstream_status));
- }
- if (log.error_code) {
- parts.push(log.error_code);
- }
- const hint = describeError(log.upstream_status, log.error_code ?? null);
- if (hint) {
- parts.push(hint);
- }
- const suffix = parts.length > 0 ? ` (${parts.join(" / ")})` : "";
+ const statusCode = log.upstream_status ?? null;
+ const isOk = log.status === "ok";
+ const label =
+ statusCode !== null && statusCode !== undefined
+ ? String(statusCode)
+ : "-";
return {
- label: `失败${suffix}`,
- message: truncateText(log.error_message),
- tone: "error",
+ label,
+ tone: isOk ? "success" : "error",
};
};
diff --git a/apps/ui/src/features/AppLayout.tsx b/apps/ui/src/features/AppLayout.tsx
index f290a5f..b5b77ed 100644
--- a/apps/ui/src/features/AppLayout.tsx
+++ b/apps/ui/src/features/AppLayout.tsx
@@ -1,11 +1,12 @@
-import type { TabId, TabItem } from "../core/types";
+import type { NoticeMessage, TabId, TabItem } from "../core/types";
type AppLayoutProps = {
tabs: TabItem[];
activeTab: TabId;
activeLabel: string;
token: string | null;
- notice: string;
+ notice: NoticeMessage | null;
+ onDismissNotice: () => void;
onTabChange: (tabId: TabId) => void;
onLogout: () => void;
children?: unknown;
@@ -26,10 +27,23 @@ export const AppLayout = ({
activeLabel,
token,
notice,
+ onDismissNotice,
onTabChange,
onLogout,
children,
}: AppLayoutProps) => {
+ const noticeToneStyles: Record
= {
+ success: "border-emerald-200 bg-emerald-50 text-emerald-800",
+ warning: "border-amber-200 bg-amber-50 text-amber-800",
+ error: "border-rose-200 bg-rose-50 text-rose-700",
+ info: "border-sky-200 bg-sky-50 text-sky-800",
+ };
+ const noticeToneLabel: Record = {
+ success: "成功",
+ warning: "提示",
+ error: "错误",
+ info: "信息",
+ };
const closeMobileNav = () => {
const toggle = document.querySelector("#app-nav-toggle");
if (toggle) {
@@ -153,8 +167,26 @@ export const AppLayout = ({