init

2026-04-14 18:05:32 +08:00
parent 68457c9fbd
commit 6378ab4994
40 changed files with 10488 additions and 113 deletions
@@ -0,0 +1,75 @@
+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>
+  );
+}