76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { redirect } from "next/navigation";
|
||
|
||
import { getRequestOrigin } from "@/lib/request-origin";
|
||
import { buildSubscriptionUrl, describeRemainingTraffic } from "@/lib/subscription";
|
||
import { requireUserSession } from "@/lib/session";
|
||
import { formatBytes, getUserById } from "@/lib/store";
|
||
|
||
export default async function MePage() {
|
||
const session = await requireUserSession();
|
||
const [user, origin] = await Promise.all([
|
||
getUserById(session.user_id),
|
||
getRequestOrigin(),
|
||
]);
|
||
|
||
if (!user) {
|
||
redirect("/login");
|
||
}
|
||
|
||
return (
|
||
<main className="login-shell">
|
||
<section className="login-card wide-card">
|
||
<div className="hero-panel hero-panel--compact">
|
||
<div className="hero-copy">
|
||
<span className="eyebrow">SELF SERVICE</span>
|
||
<h1>{user.username}</h1>
|
||
<p className="page-lede">
|
||
已用 {formatBytes(user.used_tx_bytes + user.used_rx_bytes)}，{describeRemainingTraffic(user)}
|
||
</p>
|
||
<div className="badge-row">
|
||
<span className={`status-pill ${user.enabled ? "status-pill--ok" : "status-pill--danger"}`}>
|
||
{user.enabled ? "已启用" : "已禁用"}
|
||
</span>
|
||
<span className="status-pill status-pill--neutral">
|
||
{user.expires_at ?? "长期有效"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="hero-aside">
|
||
<div className="stat-tile">
|
||
<span>auth_id</span>
|
||
<strong className="mono break-all">{user.auth_id}</strong>
|
||
</div>
|
||
<div className="stat-tile">
|
||
<span>订阅链接</span>
|
||
<strong className="mono break-all">
|
||
{user.subscription_token
|
||
? buildSubscriptionUrl(user.subscription_token, origin)
|
||
: "暂不可用"}
|
||
</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="summary-grid">
|
||
<div className="metric-inline">
|
||
<span>上传</span>
|
||
<strong>{formatBytes(user.used_tx_bytes)}</strong>
|
||
</div>
|
||
<div className="metric-inline">
|
||
<span>下载</span>
|
||
<strong>{formatBytes(user.used_rx_bytes)}</strong>
|
||
</div>
|
||
<div className="metric-inline">
|
||
<span>剩余额度</span>
|
||
<strong>{describeRemainingTraffic(user)}</strong>
|
||
</div>
|
||
</div>
|
||
<form action="/logout" method="post">
|
||
<button className="ghost-button" type="submit">
|
||
退出登录
|
||
</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|