1789 lines
53 KiB
TypeScript
1789 lines
53 KiB
TypeScript
import React, { lazy, Suspense, useEffect, useRef, useState } from "react";
|
||
import { createRoot } from "react-dom/client";
|
||
import {
|
||
BrowserRouter,
|
||
Link,
|
||
Navigate,
|
||
Route,
|
||
Routes,
|
||
useLocation,
|
||
useNavigate,
|
||
} from "react-router-dom";
|
||
import {
|
||
Activity,
|
||
Bell,
|
||
ChevronDown,
|
||
Clock,
|
||
Coins,
|
||
Github,
|
||
Gauge,
|
||
LogIn,
|
||
Mail,
|
||
LogOut,
|
||
Moon,
|
||
MoreHorizontal,
|
||
Settings,
|
||
Sun,
|
||
Ticket,
|
||
Trash2,
|
||
TrendingUp,
|
||
Zap,
|
||
Wifi,
|
||
WifiOff,
|
||
} from "lucide-react";
|
||
import { api, del, get, post, put, toErrorMessage } from "./api";
|
||
import { AuthProvider, useAuth } from "./auth";
|
||
import { ThemeProvider, useTheme } from "./theme";
|
||
import {
|
||
decodeAccounts,
|
||
decodeAction,
|
||
decodeCode,
|
||
decodeDashboard,
|
||
decodeGeneral,
|
||
decodeOK,
|
||
decodeSMTP,
|
||
decodeTelegram,
|
||
type Account,
|
||
type Dashboard as Dash,
|
||
type GeneralSettings,
|
||
type Limit,
|
||
type SMTPSettingsForm,
|
||
type TelegramSettingsForm,
|
||
} from "./types";
|
||
import "./styles.css";
|
||
|
||
const UsageChart = lazy(() => import("./usage-chart"));
|
||
const repositoryURL = "https://github.com/zhoujun0601/codex-helper";
|
||
|
||
function GitHubLink({ className = "" }: { className?: string }) {
|
||
return (
|
||
<a
|
||
className={`github-link ${className}`.trim()}
|
||
href={repositoryURL}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
aria-label="在 GitHub 上查看 Codex Helper"
|
||
title="GitHub"
|
||
>
|
||
<Github />
|
||
<span>GitHub</span>
|
||
</a>
|
||
);
|
||
}
|
||
|
||
function App() {
|
||
const { status, authenticated } = useAuth();
|
||
if (!status.initialized) return <Setup version={status.version} />;
|
||
return (
|
||
<BrowserRouter>
|
||
<Routes>
|
||
{authenticated ? (
|
||
<Route path="*" element={<Shell version={status.version} />} />
|
||
) : (
|
||
<>
|
||
<Route path="/login" element={<Login version={status.version} />} />
|
||
<Route
|
||
path="*"
|
||
element={<PublicShell version={status.version} />}
|
||
/>
|
||
</>
|
||
)}
|
||
</Routes>
|
||
</BrowserRouter>
|
||
);
|
||
}
|
||
const Splash = () => (
|
||
<main className="center">
|
||
<div className="logo">
|
||
<Zap /> Codex Helper
|
||
</div>
|
||
<div className="spinner" />
|
||
</main>
|
||
);
|
||
function Brand({ version }: { version?: string }) {
|
||
return (
|
||
<div className="logo">
|
||
<Zap /> <span className="brand-name">Codex Helper</span>
|
||
{version && <span className="version-badge">v{version}</span>}
|
||
</div>
|
||
);
|
||
}
|
||
function Setup({ version }: { version: string }) {
|
||
const { setup } = useAuth();
|
||
const [form, set] = useState({
|
||
username: "admin",
|
||
password: "",
|
||
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||
});
|
||
const [err, setErr] = useState("");
|
||
async function submit(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
try {
|
||
await setup(form.username, form.password, form.timezone);
|
||
} catch (x) {
|
||
setErr(toErrorMessage(x));
|
||
}
|
||
}
|
||
return (
|
||
<main className="setup">
|
||
<section className="hero">
|
||
<Brand version={version} />
|
||
<h1>
|
||
连接你的 Codex
|
||
<br />
|
||
<span>看见每一次增长</span>
|
||
</h1>
|
||
<p>一个容器内完成用量洞察、重置提醒与账户管理。</p>
|
||
</section>
|
||
<form className="panel form" onSubmit={submit}>
|
||
<div className="setup-mobile-brand">
|
||
<Brand version={version} />
|
||
</div>
|
||
<small>首次初始化 · 1 / 1</small>
|
||
<h2>创建管理员</h2>
|
||
<label>
|
||
用户名
|
||
<input
|
||
value={form.username}
|
||
onChange={(e) => set({ ...form, username: e.target.value })}
|
||
/>
|
||
</label>
|
||
<label>
|
||
密码
|
||
<input
|
||
type="password"
|
||
minLength={10}
|
||
value={form.password}
|
||
onChange={(e) => set({ ...form, password: e.target.value })}
|
||
placeholder="至少 10 位"
|
||
/>
|
||
</label>
|
||
<label>
|
||
时区
|
||
<input
|
||
value={form.timezone}
|
||
onChange={(e) => set({ ...form, timezone: e.target.value })}
|
||
/>
|
||
</label>
|
||
{err && <p className="error">{err}</p>}
|
||
<button>完成初始化</button>
|
||
<p className="hint">
|
||
Codex、Telegram 与 SMTP 可在进入系统后通过设置中心完成。
|
||
</p>
|
||
</form>
|
||
</main>
|
||
);
|
||
}
|
||
function Login({ version }: { version: string }) {
|
||
const { login } = useAuth();
|
||
const [u, setU] = useState("admin"),
|
||
[p, setP] = useState(""),
|
||
[e, setE] = useState("");
|
||
return (
|
||
<main className="center">
|
||
<form
|
||
className="panel form login"
|
||
onSubmit={async (x) => {
|
||
x.preventDefault();
|
||
try {
|
||
await login(u, p);
|
||
} catch (q) {
|
||
setE(toErrorMessage(q));
|
||
}
|
||
}}
|
||
>
|
||
<GitHubLink className="login-github" />
|
||
<Brand version={version} />
|
||
<h2>欢迎回来</h2>
|
||
<label>
|
||
用户名
|
||
<input value={u} onChange={(x) => setU(x.target.value)} />
|
||
</label>
|
||
<label>
|
||
密码
|
||
<input
|
||
type="password"
|
||
value={p}
|
||
onChange={(x) => setP(x.target.value)}
|
||
/>
|
||
</label>
|
||
{e && <p className="error">{e}</p>}
|
||
<button>登录</button>
|
||
<p className="hint public-login-link">
|
||
<Link to="/">查看公开总览</Link>
|
||
</p>
|
||
</form>
|
||
</main>
|
||
);
|
||
}
|
||
function PublicShell({ version }: { version: string }) {
|
||
const nav = useNavigate();
|
||
return (
|
||
<div className="public-app">
|
||
<header className="public-header">
|
||
<Brand version={version} />
|
||
<button className="secondary" onClick={() => nav("/login")}>
|
||
<LogIn /> 登录后配置
|
||
</button>
|
||
</header>
|
||
<main className="public-content">
|
||
<Routes>
|
||
<Route path="/" element={<Dashboard publicView />} />
|
||
<Route path="*" element={<Navigate to="/" replace />} />
|
||
</Routes>
|
||
</main>
|
||
</div>
|
||
);
|
||
}
|
||
function Shell({ version }: { version: string }) {
|
||
const { logout } = useAuth();
|
||
const nav = useNavigate();
|
||
const location = useLocation();
|
||
const { theme, saveTheme, error: themeError } = useTheme();
|
||
const [shellError, setShellError] = useState("");
|
||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
||
const mobileMenuButtonRef = useRef<HTMLButtonElement>(null);
|
||
useEffect(() => setMobileMenuOpen(false), [location.pathname]);
|
||
useEffect(() => {
|
||
if (!mobileMenuOpen) return;
|
||
const close = (event: PointerEvent) => {
|
||
if (!mobileMenuRef.current?.contains(event.target as Node))
|
||
setMobileMenuOpen(false);
|
||
};
|
||
const escape = (event: KeyboardEvent) => {
|
||
if (event.key !== "Escape") return;
|
||
setMobileMenuOpen(false);
|
||
mobileMenuButtonRef.current?.focus();
|
||
};
|
||
document.addEventListener("pointerdown", close);
|
||
document.addEventListener("keydown", escape);
|
||
return () => {
|
||
document.removeEventListener("pointerdown", close);
|
||
document.removeEventListener("keydown", escape);
|
||
};
|
||
}, [mobileMenuOpen]);
|
||
const changeTheme = () =>
|
||
void saveTheme(theme === "dark" ? "light" : "dark").catch(() => undefined);
|
||
const signOut = async () => {
|
||
if (!confirm("确定要退出 Codex Helper 管理后台吗？")) return;
|
||
try {
|
||
setShellError("");
|
||
await logout();
|
||
} catch (error) {
|
||
setShellError(toErrorMessage(error));
|
||
}
|
||
};
|
||
return (
|
||
<div className="app">
|
||
<aside>
|
||
<Brand version={version} />
|
||
<nav>
|
||
<button
|
||
className={location.pathname === "/" ? "active" : ""}
|
||
aria-current={location.pathname === "/" ? "page" : undefined}
|
||
onClick={() => nav("/")}
|
||
>
|
||
<Activity />
|
||
总览
|
||
</button>
|
||
<button
|
||
className={location.pathname === "/settings" ? "active" : ""}
|
||
aria-current={
|
||
location.pathname === "/settings" ? "page" : undefined
|
||
}
|
||
onClick={() => nav("/settings")}
|
||
>
|
||
<Settings />
|
||
设置中心
|
||
</button>
|
||
</nav>
|
||
<div className="aside-bottom">
|
||
<GitHubLink />
|
||
<button onClick={changeTheme}>
|
||
{theme === "dark" ? <Sun /> : <Moon />}切换主题
|
||
</button>
|
||
{themeError && <small className="error">{themeError}</small>}
|
||
<button onClick={signOut}>
|
||
<LogOut />
|
||
退出
|
||
</button>
|
||
{shellError && <small className="error">{shellError}</small>}
|
||
</div>
|
||
</aside>
|
||
<div className="mobile-topbar">
|
||
<Brand version={version} />
|
||
<div className="mobile-menu" ref={mobileMenuRef}>
|
||
<button
|
||
ref={mobileMenuButtonRef}
|
||
className="mobile-menu-trigger secondary"
|
||
aria-label="打开更多操作"
|
||
aria-expanded={mobileMenuOpen}
|
||
aria-controls="mobile-actions"
|
||
onClick={() => setMobileMenuOpen((open) => !open)}
|
||
>
|
||
<MoreHorizontal />
|
||
</button>
|
||
{mobileMenuOpen && (
|
||
<div id="mobile-actions" className="mobile-menu-popover">
|
||
<GitHubLink />
|
||
<button onClick={changeTheme}>
|
||
{theme === "dark" ? <Sun /> : <Moon />}切换主题
|
||
</button>
|
||
<button onClick={signOut}>
|
||
<LogOut />
|
||
退出
|
||
</button>
|
||
{(themeError || shellError) && (
|
||
<small className="error">{themeError || shellError}</small>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<section className="content">
|
||
<Routes>
|
||
<Route path="/" element={<Dashboard />} />
|
||
<Route path="/settings" element={<SettingsPage />} />
|
||
<Route path="*" element={<Navigate to="/" />} />
|
||
</Routes>
|
||
</section>
|
||
<nav className="mobile-bottom-nav" aria-label="主导航">
|
||
<button
|
||
className={location.pathname === "/" ? "active" : ""}
|
||
aria-current={location.pathname === "/" ? "page" : undefined}
|
||
onClick={() => nav("/")}
|
||
>
|
||
<Activity />
|
||
<span>总览</span>
|
||
</button>
|
||
<button
|
||
className={location.pathname === "/settings" ? "active" : ""}
|
||
aria-current={location.pathname === "/settings" ? "page" : undefined}
|
||
onClick={() => nav("/settings")}
|
||
>
|
||
<Settings />
|
||
<span>设置</span>
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
);
|
||
}
|
||
type DashboardCardState = {
|
||
dashboard: Dash | null;
|
||
loading: boolean;
|
||
error: string;
|
||
};
|
||
|
||
const emptyDashboardCardState = (): DashboardCardState => ({
|
||
dashboard: null,
|
||
loading: false,
|
||
error: "",
|
||
});
|
||
|
||
function Dashboard({ publicView = false }: { publicView?: boolean }) {
|
||
const [accounts, setAccounts] = useState<Account[] | null>(null),
|
||
[cards, setCards] = useState<Record<number, DashboardCardState>>({}),
|
||
[expanded, setExpanded] = useState<Record<number, boolean>>({}),
|
||
[error, setError] = useState("");
|
||
const requestRef = useRef(new Map<number, number>()),
|
||
activeControllersRef = useRef(new Map<number, AbortController>());
|
||
|
||
const updateCard = (
|
||
accountId: number,
|
||
patch: Partial<DashboardCardState>,
|
||
) => {
|
||
setCards((current) => ({
|
||
...current,
|
||
[accountId]: {
|
||
...(current[accountId] || emptyDashboardCardState()),
|
||
...patch,
|
||
},
|
||
}));
|
||
};
|
||
|
||
const loadDashboard = async (accountId: number, signal?: AbortSignal) => {
|
||
const request = (requestRef.current.get(accountId) || 0) + 1;
|
||
requestRef.current.set(accountId, request);
|
||
let ownController: AbortController | undefined;
|
||
if (!signal) {
|
||
activeControllersRef.current.get(accountId)?.abort();
|
||
ownController = new AbortController();
|
||
activeControllersRef.current.set(accountId, ownController);
|
||
signal = ownController.signal;
|
||
}
|
||
updateCard(accountId, {
|
||
loading: true,
|
||
error: "",
|
||
});
|
||
try {
|
||
const dashboard = await get(
|
||
"dashboard?accountId=" + accountId,
|
||
decodeDashboard,
|
||
signal,
|
||
);
|
||
if (
|
||
requestRef.current.get(accountId) !== request ||
|
||
dashboard.accountId !== accountId
|
||
)
|
||
return;
|
||
updateCard(accountId, {
|
||
dashboard,
|
||
loading: false,
|
||
error: "",
|
||
});
|
||
} catch (value) {
|
||
if (signal.aborted || requestRef.current.get(accountId) !== request)
|
||
return;
|
||
updateCard(accountId, {
|
||
loading: false,
|
||
error: toErrorMessage(value),
|
||
});
|
||
} finally {
|
||
if (
|
||
ownController &&
|
||
activeControllersRef.current.get(accountId) === ownController
|
||
)
|
||
activeControllersRef.current.delete(accountId);
|
||
}
|
||
};
|
||
|
||
const loadAccounts = async () => {
|
||
try {
|
||
const values = await get("accounts", decodeAccounts);
|
||
setAccounts(values);
|
||
setError("");
|
||
setExpanded((current) => {
|
||
const valid = new Set(values.map((account) => account.id));
|
||
return Object.fromEntries(
|
||
Object.entries(current).filter(([id]) => valid.has(+id)),
|
||
);
|
||
});
|
||
} catch (value) {
|
||
setError(toErrorMessage(value));
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
void loadAccounts();
|
||
}, []);
|
||
useEffect(() => {
|
||
if (!accounts?.length) return;
|
||
const controller = new AbortController();
|
||
let timer = 0;
|
||
const poll = async () => {
|
||
await Promise.allSettled(
|
||
accounts.map((account) => loadDashboard(account.id, controller.signal)),
|
||
);
|
||
if (!controller.signal.aborted) timer = window.setTimeout(poll, 30_000);
|
||
};
|
||
void poll();
|
||
return () => {
|
||
controller.abort();
|
||
window.clearTimeout(timer);
|
||
};
|
||
}, [accounts]);
|
||
useEffect(
|
||
() => () => {
|
||
activeControllersRef.current.forEach((controller) => controller.abort());
|
||
},
|
||
[],
|
||
);
|
||
|
||
if (accounts === null)
|
||
return (
|
||
<>
|
||
<Header title="用量总览" />
|
||
{error ? (
|
||
<div className="panel empty">
|
||
<p className="error">{error}</p>
|
||
<button onClick={() => void loadAccounts()}>重试</button>
|
||
</div>
|
||
) : (
|
||
<Splash />
|
||
)}
|
||
</>
|
||
);
|
||
if (!accounts.length)
|
||
return (
|
||
<>
|
||
<Header
|
||
title="用量总览"
|
||
sub={
|
||
publicView ? "当前还没有可公开展示的账号" : "请先在设置中心添加账号"
|
||
}
|
||
/>
|
||
<div className="panel empty">尚未添加 Codex 账号</div>
|
||
</>
|
||
);
|
||
return (
|
||
<>
|
||
<Header
|
||
title="用量总览"
|
||
sub={`${publicView ? "公开只读 · " : ""}共 ${accounts.length} 个账号，服务器每 5 分钟自动同步`}
|
||
/>
|
||
{error && <div className="banner">{error}</div>}
|
||
<div className="account-overview-list">
|
||
{accounts.map((account) => (
|
||
<AccountOverviewCard
|
||
key={account.id}
|
||
account={account}
|
||
state={cards[account.id] || emptyDashboardCardState()}
|
||
publicView={publicView}
|
||
expanded={Boolean(expanded[account.id])}
|
||
onToggle={() =>
|
||
setExpanded((current) => ({
|
||
...current,
|
||
[account.id]: !current[account.id],
|
||
}))
|
||
}
|
||
/>
|
||
))}
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function AccountOverviewCard({
|
||
account,
|
||
state,
|
||
publicView,
|
||
expanded,
|
||
onToggle,
|
||
}: {
|
||
account: Account;
|
||
state: DashboardCardState;
|
||
publicView: boolean;
|
||
expanded: boolean;
|
||
onToggle: () => void;
|
||
}) {
|
||
const dashboard = state.dashboard;
|
||
const email = dashboard?.account.email ?? account.email;
|
||
const plan = dashboard?.account.planType ?? account.planType;
|
||
const connected = dashboard?.account.connected ?? account.connected;
|
||
const title = dashboard?.displayName || account.displayName;
|
||
return (
|
||
<section
|
||
className={`panel account-overview${expanded ? " expanded" : ""}`}
|
||
data-account-id={account.id}
|
||
>
|
||
<button
|
||
type="button"
|
||
className="account-summary-toggle"
|
||
aria-expanded={expanded}
|
||
aria-controls={`account-detail-${account.id}`}
|
||
aria-label={`${expanded ? "收起" : "展开"}${title}详情`}
|
||
onClick={onToggle}
|
||
>
|
||
<span className={`dot ${connected ? "ok" : ""}`} />
|
||
<span className="account-summary-identity">
|
||
<strong>{title}</strong>
|
||
<span>
|
||
{publicView ? "公开只读" : email ? maskEmail(email) : "尚未登录"} ·{" "}
|
||
{connected ? "已连接" : "未连接"}
|
||
</span>
|
||
</span>
|
||
<span className="badge account-summary-plan">{planLabel(plan)}</span>
|
||
<AccountQuickSummary dashboard={dashboard} state={state} />
|
||
<ChevronDown className="account-chevron" aria-hidden="true" />
|
||
</button>
|
||
{expanded && (
|
||
<div
|
||
className="account-detail"
|
||
id={`account-detail-${account.id}`}
|
||
aria-label={`${title}完整详情`}
|
||
>
|
||
{dashboard ? (
|
||
<AccountDashboardDetails
|
||
dashboard={dashboard}
|
||
state={state}
|
||
publicView={publicView}
|
||
/>
|
||
) : (
|
||
<div className="account-detail-state">
|
||
{state.loading && <div className="spinner" />}
|
||
<p className={state.error ? "error" : ""}>
|
||
{state.error || "正在读取账号用量…"}
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function AccountQuickSummary({
|
||
dashboard,
|
||
state,
|
||
}: {
|
||
dashboard: Dash | null;
|
||
state: DashboardCardState;
|
||
}) {
|
||
if (!dashboard)
|
||
return (
|
||
<span className={`account-summary-metrics ${state.error ? "error" : ""}`}>
|
||
{state.loading
|
||
? "读取中…"
|
||
: state.error
|
||
? "读取失败，展开查看"
|
||
: "等待数据"}
|
||
</span>
|
||
);
|
||
const limits = quickSummaryLimits(dashboard.limits);
|
||
if (!limits.length)
|
||
return <span className="account-summary-metrics">限额暂无</span>;
|
||
return (
|
||
<span
|
||
className={`account-summary-metrics account-summary-limits${limits.length === 1 ? " single" : ""}`}
|
||
>
|
||
{limits.map(({ kind, limit }) => {
|
||
const remaining = Math.round(remainingPercent(limit));
|
||
return (
|
||
<span
|
||
className="account-summary-limit"
|
||
data-window-kind={kind}
|
||
key={`${kind}-${limit.limitId}-${limit.windowType}`}
|
||
aria-label={`${quickLimitLabel(kind, limit)}，剩余 ${remaining}%，${limit.resetsAt ? `${relative(limit.resetsAt)}重置` : "重置时间暂无"}`}
|
||
>
|
||
<span className="account-summary-limit-name">
|
||
{quickLimitLabel(kind, limit)}
|
||
</span>
|
||
<strong style={{ color: `hsl(${remaining * 1.2} 70% 45%)` }}>
|
||
{remaining}%
|
||
</strong>
|
||
<span className="account-summary-limit-remaining">剩余</span>
|
||
<span
|
||
className="account-summary-limit-reset"
|
||
title={
|
||
limit.resetsAt
|
||
? new Date(limit.resetsAt * 1000).toLocaleString()
|
||
: undefined
|
||
}
|
||
>
|
||
{limit.resetsAt
|
||
? `${relative(limit.resetsAt)}重置`
|
||
: "重置时间暂无"}
|
||
</span>
|
||
</span>
|
||
);
|
||
})}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function AccountDashboardDetails({
|
||
dashboard,
|
||
state,
|
||
publicView,
|
||
}: {
|
||
dashboard: Dash;
|
||
state: DashboardCardState;
|
||
publicView: boolean;
|
||
}) {
|
||
return (
|
||
<>
|
||
<div className="account-detail-heading">
|
||
<div className="account-detail-title">
|
||
{dashboard.account.connected ? <Wifi /> : <WifiOff />}
|
||
<div>
|
||
<small>Codex Account</small>
|
||
<h2>{dashboard.displayName}</h2>
|
||
</div>
|
||
</div>
|
||
<div className="account-detail-actions">
|
||
<span className="fresh">
|
||
更新于{" "}
|
||
{dashboard.fetchedAt
|
||
? new Date(dashboard.fetchedAt * 1000).toLocaleString()
|
||
: "尚未同步"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{(state.error || dashboard.lastError) && (
|
||
<div className="account-detail-alert error">
|
||
{state.error || dashboard.lastError}
|
||
</div>
|
||
)}
|
||
<div className="account-info-grid">
|
||
<AccountInfo
|
||
icon={<Mail />}
|
||
label="登录邮箱"
|
||
value={
|
||
publicView
|
||
? "登录后查看"
|
||
: dashboard.account.email
|
||
? maskEmail(dashboard.account.email)
|
||
: "尚未连接"
|
||
}
|
||
/>
|
||
<AccountInfo
|
||
icon={dashboard.account.connected ? <Wifi /> : <WifiOff />}
|
||
label="连接状态"
|
||
value={dashboard.account.connected ? "已连接" : "未连接"}
|
||
/>
|
||
<AccountInfo
|
||
icon={<Gauge />}
|
||
label="套餐"
|
||
value={planLabel(dashboard.account.planType)}
|
||
/>
|
||
<AccountInfo
|
||
icon={<Clock />}
|
||
label="数据状态"
|
||
value={dashboard.stale ? "数据可能已过期" : "数据已更新"}
|
||
/>
|
||
</div>
|
||
{dashboard.resetCredits && dashboard.resetCredits.availableCount > 0 && (
|
||
<div className="reset-credits" data-testid="reset-credits">
|
||
<Ticket />
|
||
<div className="reset-credits-main">
|
||
<small>重置卡</small>
|
||
<b>可用 {dashboard.resetCredits.availableCount} 张</b>
|
||
</div>
|
||
<div className="reset-credits-expiry">
|
||
<small>到期时间</small>
|
||
<b>{formatResetCreditExpiry(dashboard.resetCredits.expiresAt)}</b>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="limits">
|
||
{dashboard.limits.map((limit, index) => (
|
||
<LimitCard
|
||
key={`${limit.limitId}-${limit.windowType}-${index}`}
|
||
x={limit}
|
||
/>
|
||
))}
|
||
</div>
|
||
{!dashboard.limits.length && (
|
||
<div className="panel empty">
|
||
{publicView
|
||
? "该连接暂无限额数据"
|
||
: "该连接暂无限额数据，服务器会自动同步。"}
|
||
</div>
|
||
)}
|
||
{dashboard.currentCycle && (
|
||
<div className="cycle-note">
|
||
<Clock />
|
||
<span>
|
||
本周期：{cycleTimestamp(dashboard.currentCycle.startedAt)} 至{" "}
|
||
{cycleTimestamp(dashboard.currentCycle.resetsAt)}（
|
||
{cycleDuration(dashboard.currentCycle.windowDurationMinutes)}
|
||
，按每日数据汇总）
|
||
</span>
|
||
</div>
|
||
)}
|
||
<div className="stats">
|
||
<Stat
|
||
icon={<Coins />}
|
||
label="本周期 Tokens"
|
||
v={num(dashboard.currentCycle?.totalTokens)}
|
||
/>
|
||
<Stat
|
||
icon={<TrendingUp />}
|
||
label="本周期单日峰值"
|
||
v={num(dashboard.summary.peakDailyTokens)}
|
||
/>
|
||
</div>
|
||
<Suspense fallback={<SettingsLoading />}>
|
||
<UsageChart data={dashboard.usage} accountId={dashboard.accountId} />
|
||
</Suspense>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function AccountInfo({
|
||
icon,
|
||
label,
|
||
value,
|
||
}: {
|
||
icon: React.ReactNode;
|
||
label: string;
|
||
value: string;
|
||
}) {
|
||
return (
|
||
<div className="account-info-item">
|
||
{icon}
|
||
<div>
|
||
<small>{label}</small>
|
||
<b>{value}</b>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function LimitCard({ x }: { x: Limit }) {
|
||
const used = Math.min(100, Math.max(0, x.usedPercent)),
|
||
left = 100 - used,
|
||
usedLabel = Math.round(used),
|
||
leftLabel = Math.round(left),
|
||
leftColor = `hsl(${left * 1.2} 70% 45%)`;
|
||
return (
|
||
<div className="panel limit">
|
||
<div className="limit-heading">
|
||
<Gauge />
|
||
<small>{limitLabel(x)}</small>
|
||
</div>
|
||
<div className="remaining">
|
||
<strong style={{ color: leftColor }}>
|
||
{leftLabel}
|
||
<i>%</i>
|
||
</strong>
|
||
<span>剩余</span>
|
||
</div>
|
||
<div className="reset">
|
||
<div className="limit-heading">
|
||
<Clock />
|
||
<small>下次重置</small>
|
||
</div>
|
||
<b>
|
||
{x.resetsAt
|
||
? new Date(x.resetsAt * 1000).toLocaleString()
|
||
: "暂未提供"}
|
||
</b>
|
||
<span>{x.resetsAt ? relative(x.resetsAt) : ""}</span>
|
||
</div>
|
||
<div
|
||
className="bar"
|
||
aria-label={`${x.windowType}：已使用 ${usedLabel}%，剩余 ${leftLabel}%`}
|
||
>
|
||
<em style={{ width: left + "%", background: leftColor }} />
|
||
<i style={{ width: used + "%" }} />
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
const Stat = ({
|
||
icon,
|
||
label,
|
||
v,
|
||
muted = false,
|
||
}: {
|
||
icon?: React.ReactNode;
|
||
label: string;
|
||
v: string;
|
||
muted?: boolean;
|
||
}) => (
|
||
<div className="panel stat">
|
||
<div className="stat-label">
|
||
{icon}
|
||
<small>{label}</small>
|
||
</div>
|
||
<b className={muted ? "muted" : ""}>{v}</b>
|
||
</div>
|
||
);
|
||
type SettingsTab = "general" | "codex" | "telegram" | "smtp";
|
||
|
||
const settingsTabs: Array<{
|
||
id: SettingsTab;
|
||
label: string;
|
||
icon: React.ReactNode;
|
||
content: React.ReactNode;
|
||
}> = [
|
||
{ id: "general", label: "通用", icon: <Settings />, content: <General /> },
|
||
{ id: "codex", label: "Codex", icon: <Zap />, content: <CodexSettings /> },
|
||
{
|
||
id: "telegram",
|
||
label: "Telegram",
|
||
icon: <Bell />,
|
||
content: <Telegram />,
|
||
},
|
||
{ id: "smtp", label: "SMTP 邮件", icon: <Bell />, content: <SMTP /> },
|
||
];
|
||
|
||
function SettingsPage() {
|
||
const [tab, setTab] = useState<SettingsTab>("general");
|
||
const selectAdjacentTab = (
|
||
event: React.KeyboardEvent<HTMLButtonElement>,
|
||
currentIndex: number,
|
||
) => {
|
||
let nextIndex: number | undefined;
|
||
if (event.key === "ArrowRight" || event.key === "ArrowDown")
|
||
nextIndex = (currentIndex + 1) % settingsTabs.length;
|
||
if (event.key === "ArrowLeft" || event.key === "ArrowUp")
|
||
nextIndex =
|
||
(currentIndex - 1 + settingsTabs.length) % settingsTabs.length;
|
||
if (event.key === "Home") nextIndex = 0;
|
||
if (event.key === "End") nextIndex = settingsTabs.length - 1;
|
||
if (nextIndex === undefined) return;
|
||
|
||
event.preventDefault();
|
||
const nextTab = settingsTabs[nextIndex].id;
|
||
setTab(nextTab);
|
||
document.getElementById(`settings-tab-${nextTab}`)?.focus();
|
||
};
|
||
return (
|
||
<>
|
||
<Header title="设置中心" />
|
||
<div className="settings">
|
||
<div className="tabs" role="tablist" aria-label="设置分类">
|
||
{settingsTabs.map((item, index) => (
|
||
<button
|
||
key={item.id}
|
||
id={`settings-tab-${item.id}`}
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={tab === item.id}
|
||
aria-controls={`settings-panel-${item.id}`}
|
||
tabIndex={tab === item.id ? 0 : -1}
|
||
className={tab === item.id ? "active" : ""}
|
||
onClick={() => setTab(item.id)}
|
||
onKeyDown={(event) => selectAdjacentTab(event, index)}
|
||
>
|
||
{item.icon}
|
||
{item.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="settings-content">
|
||
{settingsTabs.map((item) => {
|
||
const active = tab === item.id;
|
||
return (
|
||
<section
|
||
key={item.id}
|
||
id={`settings-panel-${item.id}`}
|
||
className={`settings-panel${active ? " active" : ""}`}
|
||
role="tabpanel"
|
||
aria-labelledby={`settings-tab-${item.id}`}
|
||
aria-hidden={!active}
|
||
inert={!active}
|
||
>
|
||
{item.content}
|
||
</section>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|
||
const SettingsLoading = () => (
|
||
<div
|
||
className="panel wide settings-loading"
|
||
role="status"
|
||
aria-label="正在加载设置"
|
||
>
|
||
<div className="spinner" />
|
||
</div>
|
||
);
|
||
function General() {
|
||
const [v, setV] = useState<GeneralSettings | null>(null),
|
||
[msg, setMsg] = useState(""),
|
||
[loadError, setLoadError] = useState("");
|
||
const { applyTheme } = useTheme();
|
||
const loadGeneral = async () => {
|
||
try {
|
||
setLoadError("");
|
||
const value = await get("settings/general", decodeGeneral);
|
||
setV(value);
|
||
applyTheme(value.theme);
|
||
} catch (error) {
|
||
setLoadError(toErrorMessage(error));
|
||
}
|
||
};
|
||
useEffect(() => {
|
||
void loadGeneral();
|
||
}, []);
|
||
if (!v)
|
||
return loadError ? (
|
||
<div className="panel wide">
|
||
<p className="error">{loadError}</p>
|
||
<button onClick={() => void loadGeneral()}>重试</button>
|
||
</div>
|
||
) : (
|
||
<SettingsLoading />
|
||
);
|
||
return (
|
||
<form
|
||
className="panel form wide"
|
||
onSubmit={async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
const saved = await api("settings/general", decodeGeneral, {
|
||
method: "PUT",
|
||
body: JSON.stringify(v),
|
||
});
|
||
setV(saved);
|
||
applyTheme(saved.theme);
|
||
setMsg("设置已保存");
|
||
} catch (x) {
|
||
setMsg(toErrorMessage(x));
|
||
}
|
||
}}
|
||
>
|
||
<h2>通用设置</h2>
|
||
<div className="grid2">
|
||
<label>
|
||
时区
|
||
<input
|
||
value={v.timezone}
|
||
onChange={(e) => setV({ ...v, timezone: e.target.value })}
|
||
/>
|
||
</label>
|
||
<label>
|
||
主题
|
||
<select
|
||
value={v.theme}
|
||
onChange={(e) => {
|
||
const theme = e.target.value;
|
||
if (theme === "system" || theme === "dark" || theme === "light")
|
||
setV({ ...v, theme });
|
||
}}
|
||
>
|
||
<option value="system">跟随系统</option>
|
||
<option value="dark">深色</option>
|
||
<option value="light">浅色</option>
|
||
</select>
|
||
</label>
|
||
<div className="fixed-setting">
|
||
<span>自动同步</span>
|
||
<b>服务器每 5 分钟自动刷新所有账号</b>
|
||
</div>
|
||
<label>
|
||
历史保留（天）
|
||
<select
|
||
value={v.retentionDays}
|
||
onChange={(e) => setV({ ...v, retentionDays: +e.target.value })}
|
||
>
|
||
{[30, 60, 90, 180, 365].map((x) => (
|
||
<option key={x}>{x}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label>
|
||
提前提醒（分钟）
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
max="1440"
|
||
value={v.beforeMinutes}
|
||
onChange={(e) => setV({ ...v, beforeMinutes: +e.target.value })}
|
||
/>
|
||
</label>
|
||
<label className="checks">
|
||
<input
|
||
type="checkbox"
|
||
checked={v.notifyBefore}
|
||
onChange={(e) => setV({ ...v, notifyBefore: e.target.checked })}
|
||
/>
|
||
重置前提醒{" "}
|
||
<input
|
||
type="checkbox"
|
||
checked={v.notifyAfter}
|
||
onChange={(e) => setV({ ...v, notifyAfter: e.target.checked })}
|
||
/>
|
||
重置后确认
|
||
</label>
|
||
</div>
|
||
<button>保存设置</button>
|
||
{msg && <p className="hint">{msg}</p>}
|
||
</form>
|
||
);
|
||
}
|
||
function CodexSettings() {
|
||
const [xs, setXs] = useState<Account[]>([]),
|
||
[active, setActive] = useState(0),
|
||
[newAuthIndex, setNewAuthIndex] = useState(""),
|
||
[newKind, setNewKind] = useState<"personal" | "team">("team"),
|
||
[newPublicVisible, setNewPublicVisible] = useState(false),
|
||
[busy, setBusy] = useState(false),
|
||
[err, setErr] = useState("");
|
||
const load = async (signal?: AbortSignal) => {
|
||
const accounts = await get("accounts", decodeAccounts, signal);
|
||
setXs(accounts);
|
||
return accounts;
|
||
};
|
||
useEffect(() => {
|
||
void load().catch((error) => setErr(toErrorMessage(error)));
|
||
}, []);
|
||
const updateAccount = async (
|
||
account: Account,
|
||
changes: Partial<
|
||
Pick<
|
||
Account,
|
||
"displayName" | "authIndex" | "expectedKind" | "publicVisible"
|
||
>
|
||
>,
|
||
) => {
|
||
try {
|
||
setErr("");
|
||
await put(
|
||
`accounts/${account.id}`,
|
||
decodeOK,
|
||
{
|
||
displayName: changes.displayName ?? account.displayName,
|
||
authIndex: changes.authIndex ?? account.authIndex,
|
||
expectedKind: changes.expectedKind ?? account.expectedKind,
|
||
publicVisible: changes.publicVisible ?? account.publicVisible,
|
||
},
|
||
changes.authIndex === undefined ? 30_000 : 60_000,
|
||
);
|
||
await load();
|
||
return true;
|
||
} catch (error) {
|
||
setErr(toErrorMessage(error));
|
||
return false;
|
||
}
|
||
};
|
||
const add = async () => {
|
||
const authIndex = newAuthIndex.trim();
|
||
if (!authIndex) {
|
||
setErr("请输入 CPA authIndex");
|
||
return;
|
||
}
|
||
try {
|
||
setBusy(true);
|
||
setActive(0);
|
||
setErr("");
|
||
const account = await post(
|
||
"accounts",
|
||
(value) => decodeAccounts([value])[0],
|
||
{
|
||
displayName: "",
|
||
authIndex,
|
||
expectedKind: newKind,
|
||
publicVisible: newPublicVisible,
|
||
},
|
||
undefined,
|
||
60_000,
|
||
);
|
||
setNewAuthIndex("");
|
||
await load();
|
||
setActive(account.id);
|
||
} catch (error) {
|
||
setErr(toErrorMessage(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
};
|
||
return (
|
||
<div className="codex-settings wide">
|
||
<div className="codex-heading">
|
||
<h2>Codex 账户与工作区</h2>
|
||
<p>
|
||
账号凭据和 OAuth 刷新由 CLIProxyAPI 管理；这里通过 CPA authIndex
|
||
绑定需要展示的 Codex 账号。
|
||
</p>
|
||
</div>
|
||
<section className="panel add-account-card">
|
||
<div>
|
||
<h3>添加 CPA 账号</h3>
|
||
<p>authIndex 可从 CLIProxyAPI 的认证文件列表中取得。</p>
|
||
</div>
|
||
<div className="add-account-controls">
|
||
<label>
|
||
CPA authIndex
|
||
<input
|
||
aria-label="CPA authIndex"
|
||
autoComplete="off"
|
||
placeholder="例如 6c4894e0cb312814"
|
||
value={newAuthIndex}
|
||
onChange={(event) => setNewAuthIndex(event.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
预期连接类型
|
||
<select
|
||
value={newKind}
|
||
onChange={(event) =>
|
||
setNewKind(event.target.value as "personal" | "team")
|
||
}
|
||
>
|
||
<option value="team">Team / Business 工作区</option>
|
||
<option value="personal">个人订阅</option>
|
||
</select>
|
||
</label>
|
||
<label className="checks">
|
||
<input
|
||
type="checkbox"
|
||
checked={newPublicVisible}
|
||
onChange={(event) => setNewPublicVisible(event.target.checked)}
|
||
/>
|
||
公开显示到未登录总览
|
||
</label>
|
||
<button disabled={busy} onClick={add}>
|
||
{busy && active === 0 ? "正在验证并添加…" : "添加账号"}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
<div className="account-list">
|
||
{xs.length === 0 && (
|
||
<div className="panel empty account-empty">
|
||
尚未绑定 CPA Codex 账号，请在上方输入 authIndex。
|
||
</div>
|
||
)}
|
||
{xs.map((account) => (
|
||
<section className="panel account-card" key={account.id}>
|
||
<div className="account-card-main">
|
||
<span className={"dot " + (account.connected ? "ok" : "")} />
|
||
<div className="account-details">
|
||
<input
|
||
aria-label="连接名称"
|
||
defaultValue={account.displayName}
|
||
onBlur={async (event) => {
|
||
const input = event.currentTarget;
|
||
const displayName = input.value.trim();
|
||
if (
|
||
displayName &&
|
||
displayName !== account.displayName &&
|
||
!(await updateAccount(account, { displayName }))
|
||
)
|
||
input.value = account.displayName;
|
||
}}
|
||
/>
|
||
<div className="account-meta">
|
||
<span>
|
||
{account.email
|
||
? maskEmail(account.email)
|
||
: "账号信息暂不可用"}
|
||
</span>
|
||
<span>{planLabel(account.planType)}</span>
|
||
<span
|
||
className={
|
||
account.validationStatus === "mismatch" ? "error" : ""
|
||
}
|
||
>
|
||
{validationLabel(account)}
|
||
</span>
|
||
</div>
|
||
{account.possibleDuplicate && (
|
||
<small className="hint">
|
||
同一邮箱已有相同类型绑定，请确认 authIndex 没有指向重复凭据
|
||
</small>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div className="account-card-actions">
|
||
<label>
|
||
CPA authIndex
|
||
<input
|
||
aria-label={`“${account.displayName}”的 CPA authIndex`}
|
||
autoComplete="off"
|
||
defaultValue={account.authIndex}
|
||
onBlur={async (event) => {
|
||
const input = event.currentTarget;
|
||
const authIndex = input.value.trim();
|
||
if (!authIndex || authIndex === account.authIndex) return;
|
||
if (
|
||
!confirm(
|
||
`更换“${account.displayName}”的 authIndex 会清除该本地账号已有的 Token 历史、限额快照和提醒记录。继续吗？`,
|
||
)
|
||
) {
|
||
input.value = account.authIndex;
|
||
return;
|
||
}
|
||
if (!(await updateAccount(account, { authIndex })))
|
||
input.value = account.authIndex;
|
||
}}
|
||
/>
|
||
</label>
|
||
<label>
|
||
预期连接类型
|
||
<select
|
||
aria-label="预期连接类型"
|
||
value={account.expectedKind}
|
||
onChange={(event) =>
|
||
void updateAccount(account, {
|
||
expectedKind: event.target
|
||
.value as Account["expectedKind"],
|
||
})
|
||
}
|
||
>
|
||
<option value="any">不校验</option>
|
||
<option value="personal">个人订阅</option>
|
||
<option value="team">Team / Business</option>
|
||
</select>
|
||
</label>
|
||
<label className="checks">
|
||
<input
|
||
type="checkbox"
|
||
checked={account.publicVisible}
|
||
onChange={(event) =>
|
||
void updateAccount(account, {
|
||
publicVisible: event.target.checked,
|
||
})
|
||
}
|
||
/>
|
||
公开显示到未登录总览
|
||
</label>
|
||
<div className="account-buttons">
|
||
<button
|
||
className="secondary"
|
||
disabled={busy}
|
||
onClick={async () => {
|
||
try {
|
||
setBusy(true);
|
||
setActive(account.id);
|
||
setErr("");
|
||
await post(
|
||
`accounts/${account.id}/sync`,
|
||
decodeOK,
|
||
{},
|
||
undefined,
|
||
60_000,
|
||
);
|
||
await load();
|
||
} catch (error) {
|
||
setErr(toErrorMessage(error));
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}}
|
||
>
|
||
{busy && active === account.id ? "同步中…" : "立即同步"}
|
||
</button>
|
||
<button
|
||
className="icon danger"
|
||
disabled={busy}
|
||
title="删除本地绑定"
|
||
aria-label={`删除“${account.displayName}”`}
|
||
onClick={async () => {
|
||
if (
|
||
!confirm(
|
||
`删除“${account.displayName}”的本地绑定及全部历史数据？此操作不会删除 CLIProxyAPI 中的凭据，且无法撤销。`,
|
||
)
|
||
)
|
||
return;
|
||
try {
|
||
setErr("");
|
||
await del(`accounts/${account.id}`, decodeOK);
|
||
if (active === account.id) setActive(0);
|
||
if (+localStorage.accountId === account.id)
|
||
localStorage.removeItem("accountId");
|
||
await load();
|
||
} catch (error) {
|
||
setErr(toErrorMessage(error));
|
||
}
|
||
}}
|
||
>
|
||
<Trash2 />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
))}
|
||
</div>
|
||
{err && <p className="error">{err}</p>}
|
||
</div>
|
||
);
|
||
}
|
||
function Telegram() {
|
||
const [v, setV] = useState<TelegramSettingsForm | null>(null),
|
||
[msg, setMsg] = useState(""),
|
||
[code, setCode] = useState(""),
|
||
[loadError, setLoadError] = useState("");
|
||
const loadTelegram = async () => {
|
||
try {
|
||
setLoadError("");
|
||
const value = await get("settings/telegram", decodeTelegram);
|
||
setV({ ...value, token: "" });
|
||
} catch (error) {
|
||
setLoadError(toErrorMessage(error));
|
||
}
|
||
};
|
||
useEffect(() => {
|
||
void loadTelegram();
|
||
}, []);
|
||
if (!v)
|
||
return loadError ? (
|
||
<div className="panel wide">
|
||
<p className="error">{loadError}</p>
|
||
<button onClick={() => void loadTelegram()}>重试</button>
|
||
</div>
|
||
) : (
|
||
<SettingsLoading />
|
||
);
|
||
return (
|
||
<form
|
||
className="panel form wide"
|
||
onSubmit={async (e) => {
|
||
e.preventDefault();
|
||
try {
|
||
const x = await api("settings/telegram", decodeTelegram, {
|
||
method: "PUT",
|
||
body: JSON.stringify(v),
|
||
});
|
||
setV({ ...x, token: "" });
|
||
setMsg(x.warning || "Bot 已验证并保存");
|
||
} catch (x) {
|
||
setMsg(toErrorMessage(x));
|
||
}
|
||
}}
|
||
>
|
||
<h2>Telegram Bot</h2>
|
||
<label>
|
||
Bot Token
|
||
<input
|
||
type="password"
|
||
value={v.token || ""}
|
||
onChange={(e) => setV({ ...v, token: e.target.value })}
|
||
placeholder={
|
||
v.configured ? "已配置，留空表示不修改" : "从 BotFather 获取"
|
||
}
|
||
/>
|
||
</label>
|
||
<p className="hint">Bot 绑定后会自动启用额度提醒和查询菜单。</p>
|
||
<button>验证并保存</button>
|
||
<div className="actions">
|
||
<button
|
||
type="button"
|
||
className="secondary"
|
||
onClick={async () => {
|
||
try {
|
||
const x = await post("settings/telegram/bind", decodeCode);
|
||
setCode(x.code);
|
||
} catch (error) {
|
||
setMsg(toErrorMessage(error));
|
||
}
|
||
}}
|
||
>
|
||
生成绑定码
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="secondary"
|
||
onClick={async () => {
|
||
try {
|
||
await post("settings/telegram/test", decodeOK);
|
||
setMsg("测试消息已发送");
|
||
} catch (x) {
|
||
setMsg(toErrorMessage(x));
|
||
}
|
||
}}
|
||
>
|
||
发送测试
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="danger"
|
||
disabled={!v.configured}
|
||
onClick={async () => {
|
||
if (
|
||
!confirm(
|
||
"确定要解除 Telegram Bot 绑定吗？这会删除 Bot Token、Chat ID 和未使用的绑定码。",
|
||
)
|
||
)
|
||
return;
|
||
try {
|
||
const x = await del("settings/telegram", decodeAction);
|
||
setV({
|
||
chatId: 0,
|
||
enabled: false,
|
||
menuEnabled: false,
|
||
configured: false,
|
||
token: "",
|
||
});
|
||
setCode("");
|
||
setMsg(x.warning || "Telegram Bot 配置已删除");
|
||
} catch (error) {
|
||
setMsg(toErrorMessage(error));
|
||
}
|
||
}}
|
||
>
|
||
<Trash2 />
|
||
解除绑定
|
||
</button>
|
||
</div>
|
||
{code && (
|
||
<div className="codebox">
|
||
<span>向 Bot 发送</span>
|
||
<strong>/bind {code}</strong>
|
||
</div>
|
||
)}
|
||
{msg && <p className="hint">{msg}</p>}
|
||
</form>
|
||
);
|
||
}
|
||
function SMTP() {
|
||
const [v, setV] = useState<SMTPSettingsForm | null>(null),
|
||
[msg, setMsg] = useState(""),
|
||
[loadError, setLoadError] = useState("");
|
||
const loadSMTP = async () => {
|
||
try {
|
||
setLoadError("");
|
||
const value = await get("settings/smtp", decodeSMTP);
|
||
setV({ ...value, password: "" });
|
||
} catch (error) {
|
||
setLoadError(toErrorMessage(error));
|
||
}
|
||
};
|
||
useEffect(() => {
|
||
void loadSMTP();
|
||
}, []);
|
||
if (!v)
|
||
return loadError ? (
|
||
<div className="panel wide">
|
||
<p className="error">{loadError}</p>
|
||
<button onClick={() => void loadSMTP()}>重试</button>
|
||
</div>
|
||
) : (
|
||
<SettingsLoading />
|
||
);
|
||
const save = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
try {
|
||
const saved = await api("settings/smtp", decodeSMTP, {
|
||
method: "PUT",
|
||
body: JSON.stringify(v),
|
||
});
|
||
setV({ ...saved, password: "" });
|
||
setMsg("SMTP 设置已保存");
|
||
} catch (x) {
|
||
setMsg(toErrorMessage(x));
|
||
}
|
||
};
|
||
return (
|
||
<form className="panel form wide" onSubmit={save}>
|
||
<h2>SMTP 邮件</h2>
|
||
<div className="grid2">
|
||
<label>
|
||
服务器
|
||
<input
|
||
value={v.host}
|
||
onChange={(e) => setV({ ...v, host: e.target.value })}
|
||
placeholder="smtp.example.com"
|
||
/>
|
||
</label>
|
||
<label>
|
||
端口
|
||
<input
|
||
type="number"
|
||
value={v.port}
|
||
onChange={(e) => setV({ ...v, port: +e.target.value })}
|
||
/>
|
||
</label>
|
||
<label>
|
||
用户名
|
||
<input
|
||
value={v.username}
|
||
onChange={(e) => setV({ ...v, username: e.target.value })}
|
||
/>
|
||
</label>
|
||
<label>
|
||
密码
|
||
<input
|
||
type="password"
|
||
value={v.password || ""}
|
||
onChange={(e) => setV({ ...v, password: e.target.value })}
|
||
placeholder={v.configured ? "已配置，留空不修改" : ""}
|
||
/>
|
||
</label>
|
||
<label>
|
||
加密
|
||
<select
|
||
value={v.security}
|
||
onChange={(e) => {
|
||
const security = e.target.value;
|
||
if (
|
||
security === "starttls" ||
|
||
security === "tls" ||
|
||
security === "none"
|
||
)
|
||
setV({ ...v, security });
|
||
}}
|
||
>
|
||
<option value="starttls">STARTTLS</option>
|
||
<option value="tls">隐式 TLS</option>
|
||
<option value="none">无加密</option>
|
||
</select>
|
||
</label>
|
||
<label>
|
||
发件名称
|
||
<input
|
||
value={v.fromName}
|
||
onChange={(e) => setV({ ...v, fromName: e.target.value })}
|
||
/>
|
||
</label>
|
||
<label>
|
||
发件地址
|
||
<input
|
||
type="email"
|
||
value={v.from}
|
||
onChange={(e) => setV({ ...v, from: e.target.value })}
|
||
/>
|
||
</label>
|
||
<label>
|
||
收件地址
|
||
<input
|
||
type="email"
|
||
value={v.to}
|
||
onChange={(e) => setV({ ...v, to: e.target.value })}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<label className="checks">
|
||
<input
|
||
type="checkbox"
|
||
checked={v.enabled}
|
||
onChange={(e) => setV({ ...v, enabled: e.target.checked })}
|
||
/>
|
||
启用邮件提醒
|
||
</label>
|
||
<div className="actions">
|
||
<button>保存</button>
|
||
<button
|
||
type="button"
|
||
className="secondary"
|
||
onClick={async () => {
|
||
try {
|
||
await post("settings/smtp/test", decodeOK);
|
||
setMsg("测试邮件已发送");
|
||
} catch (x) {
|
||
setMsg(toErrorMessage(x));
|
||
}
|
||
}}
|
||
>
|
||
发送测试邮件
|
||
</button>
|
||
</div>
|
||
{msg && <p className="hint">{msg}</p>}
|
||
</form>
|
||
);
|
||
}
|
||
function Header({
|
||
title,
|
||
sub,
|
||
children,
|
||
}: {
|
||
title: string;
|
||
sub?: string;
|
||
children?: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<header>
|
||
<div>
|
||
<h1>{title}</h1>
|
||
{sub && <p>{sub}</p>}
|
||
</div>
|
||
{children}
|
||
</header>
|
||
);
|
||
}
|
||
const num = (v?: number | null) =>
|
||
v == null
|
||
? "暂无"
|
||
: new Intl.NumberFormat("en", {
|
||
notation: "compact",
|
||
maximumFractionDigits: 1,
|
||
}).format(v);
|
||
const cycleTimestamp = (value: number) =>
|
||
new Date(value * 1000).toLocaleString();
|
||
const formatResetCreditExpiry = (values: number[]) =>
|
||
values.length ? values.map(cycleTimestamp).join("、") : "服务端未提供";
|
||
const cycleDuration = (minutes: number) =>
|
||
minutes % (24 * 60) === 0
|
||
? `${minutes / (24 * 60)} 天窗口`
|
||
: minutes % 60 === 0
|
||
? `${minutes / 60} 小时窗口`
|
||
: `${minutes} 分钟窗口`;
|
||
const remainingPercent = (limit: Limit) =>
|
||
100 - Math.min(100, Math.max(0, limit.usedPercent));
|
||
type QuickLimitKind = "hour" | "week" | "other";
|
||
const quickSummaryLimits = (
|
||
limits: Limit[],
|
||
): Array<{ kind: QuickLimitKind; limit: Limit }> => {
|
||
const sorted = [...limits].sort(
|
||
(a, b) => a.windowDurationMinutes - b.windowDurationMinutes,
|
||
);
|
||
const hour = sorted.find(
|
||
(limit) =>
|
||
limit.windowDurationMinutes > 0 && limit.windowDurationMinutes < 24 * 60,
|
||
);
|
||
const week =
|
||
sorted.find(
|
||
(limit) =>
|
||
limit.limitId.toLowerCase() === "codex" &&
|
||
limit.windowDurationMinutes === 168 * 60,
|
||
) ??
|
||
sorted.find(
|
||
(limit) =>
|
||
limit.limitName == null && limit.windowDurationMinutes === 168 * 60,
|
||
);
|
||
const selected: Array<{ kind: QuickLimitKind; limit: Limit }> = [];
|
||
if (hour) selected.push({ kind: "hour", limit: hour });
|
||
if (week && week !== hour) selected.push({ kind: "week", limit: week });
|
||
if (selected.length) return selected;
|
||
return sorted.slice(0, 2).map((limit) => ({ kind: "other", limit }));
|
||
};
|
||
const quickLimitLabel = (kind: QuickLimitKind, limit: Limit) => {
|
||
if (kind === "week") return "周额度";
|
||
if (kind === "hour") {
|
||
const hours = limit.windowDurationMinutes / 60;
|
||
return `${Number.isInteger(hours) ? hours : hours.toFixed(1)} 小时额度`;
|
||
}
|
||
return limitLabel(limit).replace(/限额$/, "额度");
|
||
};
|
||
const limitLabel = (limit: Limit) => {
|
||
if (limit.limitName) return limit.limitName;
|
||
if (limit.windowDurationMinutes >= 60) {
|
||
const hours = limit.windowDurationMinutes / 60;
|
||
return `${Number.isInteger(hours) ? hours : hours.toFixed(1)} 小时限额`;
|
||
}
|
||
if (limit.windowDurationMinutes > 0)
|
||
return `${limit.windowDurationMinutes} 分钟限额`;
|
||
return limit.windowType || "额度窗口";
|
||
};
|
||
const maskEmailPart = (part: string) => {
|
||
if (part.length <= 1) return "*";
|
||
if (part.length === 2) return part[0] + "*";
|
||
return part[0] + "*".repeat(part.length - 2) + part.at(-1);
|
||
};
|
||
const maskEmail = (email: string) => {
|
||
const at = email.lastIndexOf("@");
|
||
if (at < 1 || at === email.length - 1) return maskEmailPart(email);
|
||
const local = email.slice(0, at);
|
||
const domain = email.slice(at + 1).split(".");
|
||
return `${maskEmailPart(local)}@${domain
|
||
.map((part, index) =>
|
||
index === domain.length - 1 ? part : maskEmailPart(part),
|
||
)
|
||
.join(".")}`;
|
||
};
|
||
const planLabel = (plan?: string | null) => {
|
||
if (!plan) return "未识别套餐";
|
||
const labels: Record<string, string> = {
|
||
free: "Free",
|
||
go: "Go",
|
||
plus: "Plus",
|
||
pro: "Pro",
|
||
prolite: "Pro Lite",
|
||
team: "Team",
|
||
business: "Business",
|
||
self_serve_business_prolite: "Business Pro Lite",
|
||
self_serve_business_usage_based: "Business（按量）",
|
||
enterprise: "Enterprise",
|
||
edu: "Edu",
|
||
};
|
||
return labels[plan.toLowerCase()] || plan;
|
||
};
|
||
const validationLabel = (account: Account) => {
|
||
if (account.expectedKind === "any") return "未启用套餐类型校验";
|
||
if (account.validationStatus === "pending")
|
||
return `等待验证${account.expectedKind === "team" ? " Team / Business" : "个人订阅"}`;
|
||
if (account.validationStatus === "matched")
|
||
return account.actualKind === "team"
|
||
? "已连接 Team / Business 工作区"
|
||
: "已连接个人订阅";
|
||
if (account.validationStatus === "mismatch")
|
||
return `类型不匹配：实际为 ${planLabel(account.planType)}，请退出后重新授权`;
|
||
return `无法验证工作区类型：${planLabel(account.planType)}`;
|
||
};
|
||
const relative = (ts: number) => {
|
||
const s = Math.max(0, ts - Math.floor(Date.now() / 1000));
|
||
if (!s) return "即将重置";
|
||
const d = Math.floor(s / 86400),
|
||
h = Math.floor((s % 86400) / 3600),
|
||
m = Math.floor((s % 3600) / 60);
|
||
return d ? `${d} 天 ${h} 小时后` : h ? `${h} 小时 ${m} 分后` : `${m} 分钟后`;
|
||
};
|
||
const root = document.getElementById("root");
|
||
if (!root) throw new Error("缺少 #root 挂载节点");
|
||
createRoot(root).render(
|
||
<React.StrictMode>
|
||
<AuthProvider>
|
||
<ThemeProvider>
|
||
<App />
|
||
</ThemeProvider>
|
||
</AuthProvider>
|
||
</React.StrictMode>,
|
||
);
|