优化ui

2026-05-06 00:10:45 +08:00
parent 2e3eb4b8f8
commit 916a4f5ffc
19 changed files with 2431 additions and 723 deletions
@@ -6,7 +6,6 @@ import { usePathname } from "next/navigation";
 type NavItem = {
  href: string;
  label: string;
-  meta: string;
 };

 export function AdminNav({ items }: { items: NavItem[] }) {
@@ -24,7 +23,6 @@ export function AdminNav({ items }: { items: NavItem[] }) {
            className={`nav-link ${active ? "is-active" : ""}`}
          >
            <span className="nav-link__label">{item.label}</span>
-            <span className="nav-link__meta">{item.meta}</span>
          </Link>
        );
      })}
@@ -1,15 +1,15 @@
+import { formatLocalDateTime } from "@/lib/datetime";
 import { formatBytes, listAudits } from "@/lib/store";

 export default async function AuditsPage() {
  const audits = await listAudits();

  return (
-    <main className="page-stack">
+    <main className="page-stack management-page">
      <section className="hero-panel hero-panel--compact">
        <div className="hero-copy">
-          <span className="eyebrow">AUDIT</span>
+          <span className="eyebrow">审计</span>
          <h2>鉴权审计</h2>
-          <p className="page-lede">记录最近的 HTTP 鉴权回调结果、失败原因和请求来源。</p>
        </div>
        <div className="hero-aside">
          <div className="stat-tile">
@@ -19,33 +19,38 @@ export default async function AuditsPage() {
        </div>
      </section>

-      <section className="panel-card">
-        <div className="stack-md">
+      <section className="panel-card dense-panel">
+        <div className="entity-table entity-table--audits">
+          <div className="entity-table__head audit-row-grid">
+            <span>结果</span>
+            <span>节点 / 用户</span>
+            <span>来源</span>
+            <span>请求速率</span>
+            <span>原因</span>
+            <span>时间</span>
+          </div>
          {audits.map((audit) => (
-            <div key={audit.id} className="list-row list-row--card">
-              <div>
-                <div className="badge-row">
-                  <span className={`status-pill ${audit.ok ? "status-pill--ok" : "status-pill--danger"}`}>
-                    {audit.ok ? "允许" : "拒绝"}
-                  </span>
-                </div>
-                <p className="muted">
-                  {audit.node_name ?? "未知节点"} / {audit.username ?? audit.auth_id ?? "-"}
-                </p>
-                <p className="muted mono">{audit.addr ?? "-"}</p>
-              </div>
-              <div className="align-right">
-                <p>{audit.reason}</p>
-                <p className="muted">
-                  请求速率 {audit.requested_tx != null ? formatBytes(audit.requested_tx) : "-"}
-                  /s
-                </p>
-                <p className="muted">{audit.created_at}</p>
-              </div>
+            <div key={audit.id} className="entity-table__summary audit-row-grid">
+              <span>
+                <span className={`status-pill ${audit.ok ? "status-pill--ok" : "status-pill--danger"}`}>
+                  {audit.ok ? "允许" : "拒绝"}
+                </span>
+              </span>
+              <span className="entity-main-cell">
+                <strong>{audit.node_name ?? "未知节点"}</strong>
+                <span className="muted mono break-all">{audit.username ?? audit.auth_id ?? "-"}</span>
+              </span>
+              <span className="entity-code-cell break-all">{audit.addr ?? "-"}</span>
+              <span className="entity-number-cell">
+                <strong>{audit.requested_tx != null ? formatBytes(audit.requested_tx) : "-"}</strong>
+                <span>/s</span>
+              </span>
+              <span>{audit.reason}</span>
+              <span className="entity-muted-cell">{formatLocalDateTime(audit.created_at)}</span>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
-}
+}
@@ -0,0 +1,676 @@
+"use client";
+
+import { startTransition, useId, useState } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type NodeHealth = {
+  id: number;
+  name: string;
+  slug: string;
+  enabled: number;
+  last_error_message: string | null;
+};
+
+type TrafficTrendRow = {
+  bucket_start: string;
+  node_id: number;
+  auth_id: string;
+  tx_bytes: number;
+  rx_bytes: number;
+  total_bytes: number;
+};
+
+type TrafficUserOption = {
+  auth_id: string;
+  username: string;
+  total_bytes: number;
+};
+
+type LoadTrendRow = {
+  bucket_start: string;
+  node_id: number;
+  online_users: number;
+  stream_count: number;
+};
+
+type FailureTrendRow = {
+  bucket_start: string;
+  node_id: number;
+  failed_count: number;
+};
+
+type TopConsumerRow = {
+  node_id: number;
+  auth_id: string;
+  username: string;
+  tx_bytes: number;
+  rx_bytes: number;
+  total_bytes: number;
+};
+
+type DashboardChartsProps = {
+  nodeHealth: NodeHealth[];
+  trafficTrend: TrafficTrendRow[];
+  trafficBuckets: string[];
+  trafficUserOptions: TrafficUserOption[];
+  loadTrend: LoadTrendRow[];
+  failureTrend: FailureTrendRow[];
+  topConsumerRows: TopConsumerRow[];
+};
+
+type TrafficPoint = {
+  bucketStart: string;
+  label: string;
+  [key: string]: string | number;
+};
+
+const nodePalette = [
+  "#c96233",
+  "#2b6c80",
+  "#5d7b63",
+  "#7a3116",
+  "#6f5aa8",
+  "#9c6b12",
+  "#2f5d52",
+  "#8a3f55",
+];
+
+const axisTick = {
+  fill: "#3f4b57",
+  fontSize: 11,
+};
+
+const tooltipStyle = {
+  borderRadius: 12,
+  border: "1px solid rgba(24, 34, 44, 0.12)",
+  backgroundColor: "rgba(255, 251, 245, 0.96)",
+  boxShadow: "0 12px 34px rgba(51, 35, 18, 0.1)",
+};
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+
+  const units = ["KB", "MB", "GB", "TB", "PB"];
+  let value = bytes / 1024;
+  let unit = units[0];
+
+  for (let index = 1; index < units.length && value >= 1024; index += 1) {
+    value /= 1024;
+    unit = units[index];
+  }
+
+  return `${value.toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)} ${unit}`;
+}
+
+function formatCompactBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes}B`;
+
+  const units = ["KB", "MB", "GB", "TB", "PB"];
+  let value = bytes / 1024;
+  let unit = units[0];
+
+  for (let index = 1; index < units.length && value >= 1024; index += 1) {
+    value /= 1024;
+    unit = units[index];
+  }
+
+  return `${value.toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)}${unit}`;
+}
+
+function formatBucketLabel(value: string, mode: "hour" | "day") {
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat("zh-CN", {
+    month: "2-digit",
+    day: "2-digit",
+    ...(mode === "hour"
+      ? { hour: "2-digit", minute: "2-digit", hourCycle: "h23" }
+      : {}),
+  }).format(date);
+}
+
+function truncateLabel(value: string, maxLength = 12) {
+  if (value.length <= maxLength) {
+    return value;
+  }
+
+  return `${value.slice(0, maxLength)}…`;
+}
+
+function getNodeColor(index: number) {
+  return nodePalette[index % nodePalette.length];
+}
+
+function getNodeDataKey(nodeId: number) {
+  return `node_${nodeId}`;
+}
+
+function matchesUser(row: { auth_id: string }, selectedAuthId: string) {
+  return selectedAuthId === "all" || row.auth_id === selectedAuthId;
+}
+
+function buildNodeTrafficSeries(
+  rows: TrafficTrendRow[],
+  buckets: string[],
+  nodes: NodeHealth[],
+  selectedAuthId: string,
+) {
+  const series = buckets.map((bucketStart) => {
+    const point: TrafficPoint = {
+      bucketStart,
+      label: formatBucketLabel(bucketStart, "hour"),
+    };
+
+    for (const node of nodes) {
+      point[getNodeDataKey(node.id)] = 0;
+    }
+
+    return point;
+  });
+  const pointMap = new Map(series.map((point) => [point.bucketStart, point]));
+
+  for (const row of rows) {
+    if (!matchesUser(row, selectedAuthId)) {
+      continue;
+    }
+
+    const point = pointMap.get(row.bucket_start);
+
+    if (!point) {
+      continue;
+    }
+
+    const key = getNodeDataKey(row.node_id);
+    point[key] = Number(point[key] ?? 0) + row.total_bytes;
+  }
+
+  return series;
+}
+
+function aggregateTrafficTotals(rows: TrafficTrendRow[], selectedAuthId: string) {
+  return rows.reduce(
+    (accumulator, row) => {
+      if (!matchesUser(row, selectedAuthId)) {
+        return accumulator;
+      }
+
+      return {
+        txBytes: accumulator.txBytes + row.tx_bytes,
+        rxBytes: accumulator.rxBytes + row.rx_bytes,
+        totalBytes: accumulator.totalBytes + row.total_bytes,
+      };
+    },
+    { txBytes: 0, rxBytes: 0, totalBytes: 0 },
+  );
+}
+
+function aggregateNodeTrafficTotals(rows: TrafficTrendRow[], selectedAuthId: string) {
+  const totals = new Map<number, number>();
+
+  for (const row of rows) {
+    if (!matchesUser(row, selectedAuthId)) {
+      continue;
+    }
+
+    totals.set(row.node_id, (totals.get(row.node_id) ?? 0) + row.total_bytes);
+  }
+
+  return totals;
+}
+
+function aggregateLoadSeries(rows: LoadTrendRow[]) {
+  const map = new Map<string, {
+    bucketStart: string;
+    onlineUsers: number;
+    streamCount: number;
+  }>();
+
+  for (const row of rows) {
+    const existing = map.get(row.bucket_start) ?? {
+      bucketStart: row.bucket_start,
+      onlineUsers: 0,
+      streamCount: 0,
+    };
+
+    existing.onlineUsers += row.online_users;
+    existing.streamCount += row.stream_count;
+    map.set(row.bucket_start, existing);
+  }
+
+  return Array.from(map.values())
+    .sort((left, right) => left.bucketStart.localeCompare(right.bucketStart))
+    .map((item) => ({
+      ...item,
+      label: formatBucketLabel(item.bucketStart, "hour"),
+    }));
+}
+
+function aggregateFailureSeries(rows: FailureTrendRow[]) {
+  const map = new Map<string, { bucketStart: string; failedCount: number }>();
+
+  for (const row of rows) {
+    const existing = map.get(row.bucket_start) ?? {
+      bucketStart: row.bucket_start,
+      failedCount: 0,
+    };
+
+    existing.failedCount += row.failed_count;
+    map.set(row.bucket_start, existing);
+  }
+
+  return Array.from(map.values())
+    .sort((left, right) => left.bucketStart.localeCompare(right.bucketStart))
+    .map((item) => ({
+      ...item,
+      label: formatBucketLabel(item.bucketStart, "day"),
+    }));
+}
+
+function aggregateTopConsumers(rows: TopConsumerRow[], selectedAuthId: string) {
+  const map = new Map<string, {
+    authId: string;
+    username: string;
+    txBytes: number;
+    rxBytes: number;
+    totalBytes: number;
+  }>();
+
+  for (const row of rows) {
+    if (!matchesUser(row, selectedAuthId)) {
+      continue;
+    }
+
+    const existing = map.get(row.auth_id) ?? {
+      authId: row.auth_id,
+      username: row.username,
+      txBytes: 0,
+      rxBytes: 0,
+      totalBytes: 0,
+    };
+
+    existing.txBytes += row.tx_bytes;
+    existing.rxBytes += row.rx_bytes;
+    existing.totalBytes += row.total_bytes;
+    map.set(row.auth_id, existing);
+  }
+
+  return Array.from(map.values())
+    .sort((left, right) => right.totalBytes - left.totalBytes)
+    .slice(0, 6)
+    .map((item) => ({
+      ...item,
+      label: truncateLabel(item.username),
+    }));
+}
+
+export function DashboardCharts({
+  nodeHealth,
+  trafficTrend,
+  trafficBuckets,
+  trafficUserOptions,
+  loadTrend,
+  failureTrend,
+  topConsumerRows,
+}: DashboardChartsProps) {
+  const userSelectId = useId();
+  const [selectedAuthId, setSelectedAuthId] = useState("all");
+  const [hiddenNodeIds, setHiddenNodeIds] = useState<Set<number>>(() => new Set());
+  const selectedUser = selectedAuthId === "all"
+    ? null
+    : trafficUserOptions.find((user) => user.auth_id === selectedAuthId) ?? null;
+  const selectedUserLabel = selectedUser?.username ?? "全部用户";
+
+  const trafficSeries = buildNodeTrafficSeries(
+    trafficTrend,
+    trafficBuckets,
+    nodeHealth,
+    selectedAuthId,
+  );
+  const trafficTotals = aggregateTrafficTotals(trafficTrend, selectedAuthId);
+  const nodeTrafficTotals = aggregateNodeTrafficTotals(trafficTrend, selectedAuthId);
+  const loadSeries = aggregateLoadSeries(loadTrend);
+  const failureSeries = aggregateFailureSeries(failureTrend);
+  const consumerSeries = aggregateTopConsumers(topConsumerRows, selectedAuthId);
+  const visibleNodes = nodeHealth.filter((node) => !hiddenNodeIds.has(node.id));
+
+  const peakLoad = loadSeries.reduce(
+    (accumulator, item) => ({
+      onlineUsers: Math.max(accumulator.onlineUsers, item.onlineUsers),
+      streamCount: Math.max(accumulator.streamCount, item.streamCount),
+    }),
+    { onlineUsers: 0, streamCount: 0 },
+  );
+  const totalFailures = failureSeries.reduce(
+    (accumulator, item) => accumulator + item.failedCount,
+    0,
+  );
+  const healthyNodes = nodeHealth.filter(
+    (node) => node.enabled && !node.last_error_message,
+  ).length;
+  const disabledNodes = nodeHealth.filter((node) => !node.enabled).length;
+  const degradedNodes = nodeHealth.length - healthyNodes - disabledNodes;
+  const statusTone = degradedNodes > 0 ? "danger" : disabledNodes > 0 ? "warm" : "ok";
+  const statusLabel = `${healthyNodes}/${nodeHealth.length} 节点健康`;
+  const hasTrafficData = trafficTotals.totalBytes > 0;
+  const hasVisibleTrafficData = visibleNodes.some((node) => {
+    const key = getNodeDataKey(node.id);
+    return trafficSeries.some((point) => Number(point[key] ?? 0) > 0);
+  });
+  const hasLoadData = loadSeries.some(
+    (item) => item.onlineUsers > 0 || item.streamCount > 0,
+  );
+  const hasFailureData = failureSeries.some((item) => item.failedCount > 0);
+  const hasConsumerData = consumerSeries.length > 0;
+
+  function toggleNodeLine(nodeId: number) {
+    startTransition(() => {
+      setHiddenNodeIds((current) => {
+        const next = new Set(current);
+
+        if (next.has(nodeId)) {
+          next.delete(nodeId);
+        } else {
+          next.add(nodeId);
+        }
+
+        return next;
+      });
+    });
+  }
+
+  return (
+    <section className="panel-card dashboard-analytics">
+      <div className="dashboard-toolbar">
+        <div className="stack-tight">
+          <div className="section-title section-title--top">
+            <div>
+              <h3>流量与节点趋势</h3>
+            </div>
+          </div>
+          <div className="badge-row">
+            <span className="status-pill status-pill--warm">{selectedUserLabel}</span>
+            <span className={`status-pill status-pill--${statusTone}`}>{statusLabel}</span>
+          </div>
+        </div>
+        <div className="chart-filter">
+          <label htmlFor={userSelectId}>用户</label>
+          <select
+            id={userSelectId}
+            value={selectedAuthId}
+            onChange={(event) => {
+              const nextValue = event.target.value;
+              startTransition(() => {
+                setSelectedAuthId(nextValue);
+              });
+            }}
+          >
+            <option value="all">全部用户</option>
+            {trafficUserOptions.map((user) => (
+              <option key={user.auth_id} value={user.auth_id}>
+                {user.username} / {formatCompactBytes(user.total_bytes)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="dashboard-glance-grid">
+        <article className="dashboard-glance-card dashboard-glance-card--warm">
+          <span>24h 总流量</span>
+          <strong>{formatBytes(trafficTotals.totalBytes)}</strong>
+          <small>TX {formatBytes(trafficTotals.txBytes)} / RX {formatBytes(trafficTotals.rxBytes)}</small>
+        </article>
+        <article className="dashboard-glance-card dashboard-glance-card--ink">
+          <span>24h 峰值在线</span>
+          <strong>{peakLoad.onlineUsers}</strong>
+          <small>峰值流数 {peakLoad.streamCount}</small>
+        </article>
+        <article className="dashboard-glance-card dashboard-glance-card--sage">
+          <span>14d 鉴权失败</span>
+          <strong>{totalFailures}</strong>
+          <small>失败请求数</small>
+        </article>
+        <article className="dashboard-glance-card dashboard-glance-card--paper">
+          <span>节点状态</span>
+          <strong>{statusLabel}</strong>
+          <small>异常 {degradedNodes} / 已禁用 {disabledNodes}</small>
+        </article>
+      </div>
+
+      <div className="dashboard-chart-grid">
+        <article className="dashboard-chart-card dashboard-chart-card--wide">
+          <div className="dashboard-chart-card__head">
+            <div className="section-title">
+              <h4>节点流量</h4>
+              <span className="status-pill status-pill--warm">最近 24 小时</span>
+            </div>
+            <div className="node-line-toggles">
+              {nodeHealth.map((node, index) => {
+                const hidden = hiddenNodeIds.has(node.id);
+                const color = getNodeColor(index);
+
+                return (
+                  <button
+                    key={node.id}
+                    type="button"
+                    className={`node-line-toggle ${hidden ? "is-hidden" : ""}`}
+                    aria-pressed={!hidden}
+                    onClick={() => toggleNodeLine(node.id)}
+                  >
+                    <span
+                      className="node-line-toggle__swatch"
+                      style={{ backgroundColor: color }}
+                    />
+                    <span>{node.name}</span>
+                    <small>{formatCompactBytes(nodeTrafficTotals.get(node.id) ?? 0)}</small>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          {hasTrafficData && hasVisibleTrafficData ? (
+            <div className="chart-shell chart-shell--wide">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={trafficSeries} margin={{ top: 6, right: 12, left: 0, bottom: 0 }}>
+                  <CartesianGrid stroke="rgba(24, 34, 44, 0.08)" strokeDasharray="3 3" />
+                  <XAxis
+                    dataKey="label"
+                    minTickGap={22}
+                    tick={axisTick}
+                    tickLine={false}
+                    axisLine={false}
+                  />
+                  <YAxis
+                    tickFormatter={formatCompactBytes}
+                    tick={axisTick}
+                    tickLine={false}
+                    axisLine={false}
+                    width={58}
+                  />
+                  <Tooltip
+                    contentStyle={tooltipStyle}
+                    formatter={(value, name) => [
+                      formatBytes(Number(value ?? 0)),
+                      String(name),
+                    ]}
+                    labelFormatter={(label) => `时间 ${label}`}
+                  />
+                  {visibleNodes.map((node, index) => (
+                    <Line
+                      key={node.id}
+                      type="monotone"
+                      dataKey={getNodeDataKey(node.id)}
+                      name={node.name}
+                      stroke={getNodeColor(index)}
+                      strokeWidth={2.2}
+                      dot={false}
+                      isAnimationActive={false}
+                    />
+                  ))}
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          ) : (
+            <div className="chart-empty">暂无可见节点流量。</div>
+          )}
+        </article>
+
+        <article className="dashboard-chart-card">
+          <div className="section-title">
+            <h4>在线负载</h4>
+            <span className="status-pill status-pill--ink">24h</span>
+          </div>
+          {hasLoadData ? (
+            <div className="chart-shell">
+              <ResponsiveContainer width="100%" height="100%">
+                <LineChart data={loadSeries} margin={{ top: 6, right: 12, left: 0, bottom: 0 }}>
+                  <CartesianGrid stroke="rgba(24, 34, 44, 0.08)" strokeDasharray="3 3" />
+                  <XAxis
+                    dataKey="label"
+                    minTickGap={22}
+                    tick={axisTick}
+                    tickLine={false}
+                    axisLine={false}
+                  />
+                  <YAxis tick={axisTick} tickLine={false} axisLine={false} width={36} />
+                  <Tooltip
+                    contentStyle={tooltipStyle}
+                    formatter={(value, name) => [
+                      `${Number(value ?? 0)}`,
+                      String(name) === "onlineUsers" ? "在线用户" : "流数量",
+                    ]}
+                    labelFormatter={(label) => `时间 ${label}`}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="onlineUsers"
+                    name="在线用户"
+                    stroke="#18222c"
+                    strokeWidth={2.2}
+                    dot={false}
+                    isAnimationActive={false}
+                  />
+                  <Line
+                    type="monotone"
+                    dataKey="streamCount"
+                    name="流数量"
+                    stroke="#5d7b63"
+                    strokeWidth={2.2}
+                    dot={false}
+                    isAnimationActive={false}
+                  />
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          ) : (
+            <div className="chart-empty">暂无同步快照。</div>
+          )}
+        </article>
+
+        <article className="dashboard-chart-card">
+          <div className="section-title">
+            <h4>鉴权失败</h4>
+            <span className="status-pill status-pill--danger">14d</span>
+          </div>
+          {hasFailureData ? (
+            <div className="chart-shell">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={failureSeries} margin={{ top: 6, right: 12, left: 0, bottom: 0 }}>
+                  <CartesianGrid stroke="rgba(24, 34, 44, 0.08)" strokeDasharray="3 3" />
+                  <XAxis dataKey="label" tick={axisTick} tickLine={false} axisLine={false} />
+                  <YAxis tick={axisTick} tickLine={false} axisLine={false} width={36} />
+                  <Tooltip
+                    contentStyle={tooltipStyle}
+                    formatter={(value) => [`${Number(value ?? 0)} 次`, "失败次数"]}
+                    labelFormatter={(label) => `日期 ${label}`}
+                  />
+                  <Bar
+                    dataKey="failedCount"
+                    name="失败次数"
+                    fill="#af2d21"
+                    radius={[6, 6, 0, 0]}
+                    isAnimationActive={false}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          ) : (
+            <div className="chart-empty">暂无鉴权失败。</div>
+          )}
+        </article>
+
+        <article className="dashboard-chart-card">
+          <div className="section-title">
+            <h4>用户流量排行</h4>
+            <span className="status-pill status-pill--sage">7d</span>
+          </div>
+          {hasConsumerData ? (
+            <div className="chart-shell">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart
+                  data={consumerSeries}
+                  layout="vertical"
+                  margin={{ top: 6, right: 14, left: 0, bottom: 0 }}
+                >
+                  <CartesianGrid stroke="rgba(24, 34, 44, 0.08)" strokeDasharray="3 3" />
+                  <XAxis
+                    type="number"
+                    tickFormatter={formatCompactBytes}
+                    tick={axisTick}
+                    tickLine={false}
+                    axisLine={false}
+                  />
+                  <YAxis
+                    type="category"
+                    dataKey="label"
+                    tick={axisTick}
+                    tickLine={false}
+                    axisLine={false}
+                    width={86}
+                  />
+                  <Tooltip
+                    contentStyle={tooltipStyle}
+                    formatter={(value, name, item) => {
+                      const payload = item?.payload as { username?: string } | undefined;
+
+                      return [
+                        formatBytes(Number(value ?? 0)),
+                        String(name) === "totalBytes"
+                          ? payload?.username ?? "累计流量"
+                          : String(name),
+                      ];
+                    }}
+                    labelFormatter={() => "用户"}
+                  />
+                  <Bar
+                    dataKey="totalBytes"
+                    name="totalBytes"
+                    fill="#7a3116"
+                    radius={[0, 6, 6, 0]}
+                    isAnimationActive={false}
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          ) : (
+            <div className="chart-empty">暂无用户流量。</div>
+          )}
+        </article>
+      </div>
+    </section>
+  );
+}
@@ -1,5 +1,8 @@
+import { formatLocalDateTime } from "@/lib/datetime";
 import { formatBytes, getDashboardMetrics } from "@/lib/store";

+import { DashboardCharts } from "./dashboard-charts";
+
 function getNodePill(node: {
  enabled: number;
  last_error_message: string | null;
@@ -19,17 +22,13 @@ export default async function DashboardPage() {
  const data = await getDashboardMetrics();

  return (
-    <main className="page-stack">
+    <main className="page-stack dashboard-page">
      <section className="hero-panel">
        <div className="hero-copy">
-          <span className="eyebrow">OVERVIEW</span>
+          <span className="eyebrow">概览</span>
          <h2>仪表盘</h2>
-          <p className="page-lede">
-            汇总多节点在线、鉴权失败、同步错误和用户用量，作为当前运行态的统一入口。
-          </p>
          <div className="badge-row">
-            <span className="status-pill status-pill--ok">HTTP 鉴权在线</span>
-            <span className="status-pill status-pill--neutral">轮询聚合已启用</span>
+            <span className="status-pill status-pill--ok">在线 {data.totals.total_online_connections}</span>
            <span className="status-pill status-pill--warm">节点 {data.totals.enabled_nodes}</span>
          </div>
        </div>
@@ -59,15 +58,25 @@ export default async function DashboardPage() {
        <article className="metric-card metric-card--sage">
          <span>启用节点</span>
          <strong>{data.totals.enabled_nodes}</strong>
-          <small>轮询与 kick 生效范围</small>
+          <small>当前可用</small>
        </article>
        <article className="metric-card metric-card--paper">
          <span>累计流量</span>
          <strong>{formatBytes(data.totals.total_traffic)}</strong>
-          <small>已聚合到 SQLite</small>
+          <small>全量累计</small>
        </article>
      </section>

+      <DashboardCharts
+        nodeHealth={data.nodeHealth}
+        trafficTrend={data.trafficTrend}
+        trafficBuckets={data.trafficBuckets}
+        trafficUserOptions={data.trafficUserOptions}
+        loadTrend={data.loadTrend}
+        failureTrend={data.failureTrend}
+        topConsumerRows={data.topConsumerRows}
+      />
+
      <section className="panel-grid">
        <article className="panel-card">
          <div className="section-title">
@@ -90,7 +99,7 @@ export default async function DashboardPage() {
                    在线 {node.last_online_users} / 流 {node.last_stream_count}
                  </p>
                  <p className="muted">
-                    最近成功 {node.last_sync_ok_at ?? "无"}
+                    最近成功 {formatLocalDateTime(node.last_sync_ok_at)}
                  </p>
                  {node.last_error_message ? (
                    <p className="error-text">{node.last_error_message}</p>
@@ -138,7 +147,7 @@ export default async function DashboardPage() {
                </div>
                <div className="align-right">
                  <p className="muted mono">{item.addr ?? "-"}</p>
-                  <p className="muted">{item.created_at}</p>
+                  <p className="muted">{formatLocalDateTime(item.created_at)}</p>
                </div>
              </div>
            ))}
@@ -160,7 +169,7 @@ export default async function DashboardPage() {
                  <p>
                    +{formatBytes(item.tx_bytes + item.rx_bytes)}
                  </p>
-                  <p className="muted">{item.created_at}</p>
+                  <p className="muted">{formatLocalDateTime(item.created_at)}</p>
                </div>
              </div>
            ))}
@@ -181,7 +190,7 @@ export default async function DashboardPage() {
                    <strong>{item.node_name}</strong>
                    <p className="error-text">{item.error_message ?? "unknown error"}</p>
                  </div>
-                  <p className="muted">{item.created_at}</p>
+                  <p className="muted">{formatLocalDateTime(item.created_at)}</p>
                </div>
              ))
            )}
@@ -3,11 +3,11 @@ import { requireAdminAccess } from "@/lib/session";
 import { AdminNav } from "./admin-nav";

 const navItems = [
-  { href: "/admin/dashboard", label: "仪表盘", meta: "运行态与健康度" },
-  { href: "/admin/users", label: "用户管理", meta: "凭证、额度与订阅" },
-  { href: "/admin/nodes", label: "节点管理", meta: "接入、鉴权与导出" },
-  { href: "/admin/subscriptions", label: "订阅配置", meta: "模板与代理分组" },
-  { href: "/admin/audits", label: "审计日志", meta: "鉴权失败与追踪" },
+  { href: "/admin/dashboard", label: "仪表盘" },
+  { href: "/admin/users", label: "用户管理" },
+  { href: "/admin/nodes", label: "节点管理" },
+  { href: "/admin/subscriptions", label: "订阅配置" },
+  { href: "/admin/audits", label: "审计日志" },
 ];

 export default async function AdminLayout({
@@ -23,9 +23,9 @@ export default async function AdminLayout({
        <div className="brand-block">
          <span className="eyebrow">HY2 PANEL</span>
          <h1>鹅梯控制台</h1>
-          <p className="muted">
-            管理员 {session.username} 已登录
-          </p>
+          <div className="badge-row">
+            <span className="status-pill status-pill--ink">{session.username}</span>
+          </div>
        </div>
        <AdminNav items={navItems} />
        <form action="/logout" method="post">
@@ -1,4 +1,5 @@
 import { getRequestOrigin } from "@/lib/request-origin";
+import { formatLocalDateTime } from "@/lib/datetime";
 import { buildNodeHy2Config } from "@/lib/subscription";
 import { buildNodeAuthUrl, buildTrafficStatsUrl, listNodes } from "@/lib/store";

@@ -23,17 +24,14 @@ export default async function NodesPage() {
  const [nodes, origin] = await Promise.all([listNodes(), getRequestOrigin()]);

  return (
-    <main className="page-stack">
+    <main className="page-stack management-page">
      <section className="hero-panel">
        <div className="hero-copy">
-          <span className="eyebrow">NODES</span>
+          <span className="eyebrow">节点</span>
          <h2>节点管理</h2>
-          <p className="page-lede">
-            统一维护 hy2 节点监听参数、鉴权 URL、trafficStats 接入和客户端导出配置。
-          </p>
          <div className="badge-row">
-            <span className="status-pill status-pill--neutral">URL 自动推导</span>
-            <span className="status-pill status-pill--warm">Secret 自动生成</span>
+            <span className="status-pill status-pill--ok">启用 {nodes.filter((node) => node.enabled).length}</span>
+            <span className="status-pill status-pill--neutral">总数 {nodes.length}</span>
          </div>
        </div>
        <div className="hero-aside">
@@ -48,300 +46,251 @@ export default async function NodesPage() {
        </div>
      </section>

-      <section className="panel-card">
-        <div className="section-title">
-          <h3>新增节点</h3>
-        </div>
-        <form action={createNodeAction} className="form-grid">
-          <label className="field">
-            <span>Slug</span>
-            <input name="slug" placeholder="tokyo-01" required />
-          </label>
-          <label className="field">
-            <span>显示名</span>
-            <input name="name" placeholder="Tokyo 01" required />
-          </label>
-          <label className="field">
-            <span>客户端地址</span>
-            <input name="server_host" placeholder="jp1.example.com" required />
-          </label>
-          <label className="field">
-            <span>hy2 监听地址</span>
-            <input name="hy2_listen" defaultValue=":443" placeholder=":443 或 0.0.0.0:443" />
-          </label>
-          <label className="field">
-            <span>对外端口</span>
-            <input
-              name="server_port"
-              type="number"
-              min="1"
-              max="65535"
-              defaultValue={443}
-              required
-            />
-          </label>
-          <label className="field">
-            <span>Clash 节点名</span>
-            <input name="client_name" placeholder="JP1 - 30M - hy2" />
-          </label>
-          <label className="field">
-            <span>鉴权 Token</span>
-            <input name="auth_token" placeholder="留空自动生成" />
-          </label>
-          <label className="field">
-            <span>上行带宽 Mbps</span>
-            <input name="bandwidth_up_mbps" type="number" min="1" defaultValue={30} required />
-          </label>
-          <label className="field">
-            <span>下行带宽 Mbps</span>
-            <input name="bandwidth_down_mbps" type="number" min="1" defaultValue={30} required />
-          </label>
-          <label className="field">
-            <span>SNI</span>
-            <input name="sni" placeholder="留空使用默认" />
-          </label>
-          <label className="checkbox">
-            <input name="skip_cert_verify" type="checkbox" />
-            <span>客户端跳过证书校验</span>
-          </label>
-          <label className="field">
-            <span>trafficStats 监听</span>
-            <input name="traffic_stats_listen" defaultValue=":9999" required />
-          </label>
-          <label className="field">
-            <span>trafficStats URL</span>
-            <input
-              name="traffic_stats_url"
-              placeholder="留空自动按客户端地址 + 监听端口生成"
-            />
-          </label>
-          <label className="field">
-            <span>trafficStats Secret</span>
-            <input name="traffic_stats_secret" placeholder="留空自动生成" />
-          </label>
-          <label className="field">
-            <span>轮询间隔（秒）</span>
-            <input
-              name="poll_interval_seconds"
-              type="number"
-              min="10"
-              max="30"
-              defaultValue={15}
-              required
-            />
-          </label>
-          <label className="checkbox">
-            <input name="enabled" type="checkbox" defaultChecked />
-            <span>启用节点</span>
-          </label>
-          <button className="primary-button" type="submit">
-            创建节点
-          </button>
-        </form>
+      <section className="panel-card compact-create-panel">
+        <details>
+          <summary className="compact-create-summary">
+            <div>
+              <h3>新增节点</h3>
+            </div>
+            <span className="status-pill status-pill--warm">展开</span>
+          </summary>
+          <form action={createNodeAction} className="dense-form-grid dense-form-grid--nodes">
+            <label className="field">
+              <span>Slug</span>
+              <input name="slug" placeholder="tokyo-01" required />
+            </label>
+            <label className="field">
+              <span>显示名</span>
+              <input name="name" placeholder="Tokyo 01" required />
+            </label>
+            <label className="field">
+              <span>客户端地址</span>
+              <input name="server_host" placeholder="jp1.example.com" required />
+            </label>
+            <label className="field">
+              <span>hy2 监听地址</span>
+              <input name="hy2_listen" defaultValue=":443" placeholder=":443 或 0.0.0.0:443" />
+            </label>
+            <label className="field">
+              <span>对外端口</span>
+              <input name="server_port" type="number" min="1" max="65535" defaultValue={443} required />
+            </label>
+            <label className="field">
+              <span>Clash 节点名</span>
+              <input name="client_name" placeholder="JP1 - 30M - hy2" />
+            </label>
+            <label className="field">
+              <span>鉴权 Token</span>
+              <input name="auth_token" placeholder="留空自动生成" />
+            </label>
+            <label className="field">
+              <span>上行带宽 Mbps</span>
+              <input name="bandwidth_up_mbps" type="number" min="1" defaultValue={30} required />
+            </label>
+            <label className="field">
+              <span>下行带宽 Mbps</span>
+              <input name="bandwidth_down_mbps" type="number" min="1" defaultValue={30} required />
+            </label>
+            <label className="field">
+              <span>SNI</span>
+              <input name="sni" placeholder="留空使用默认" />
+            </label>
+            <label className="checkbox">
+              <input name="skip_cert_verify" type="checkbox" />
+              <span>跳过证书校验</span>
+            </label>
+            <label className="field">
+              <span>trafficStats 监听</span>
+              <input name="traffic_stats_listen" defaultValue=":9999" required />
+            </label>
+            <label className="field">
+              <span>trafficStats URL</span>
+              <input name="traffic_stats_url" placeholder="留空自动推导" />
+            </label>
+            <label className="field">
+              <span>trafficStats Secret</span>
+              <input name="traffic_stats_secret" placeholder="留空自动生成" />
+            </label>
+            <label className="field">
+              <span>轮询间隔（秒）</span>
+              <input name="poll_interval_seconds" type="number" min="10" max="30" defaultValue={15} required />
+            </label>
+            <label className="checkbox">
+              <input name="enabled" type="checkbox" defaultChecked />
+              <span>启用节点</span>
+            </label>
+            <button className="primary-button" type="submit">
+              创建节点
+            </button>
+          </form>
+        </details>
      </section>

-      <section className="stack-lg">
-        {nodes.map((node) => {
-          const authUrl = buildNodeAuthUrl(node.slug, node.auth_token, origin);
-          const suggestedTrafficStatsUrl = buildTrafficStatsUrl(
-            node.server_host,
-            node.traffic_stats_listen,
-          );
+      <section className="panel-card dense-panel">
+        <div className="section-title">
+          <h3>节点列表</h3>
+          <span className="status-pill status-pill--neutral">{nodes.length} 个节点</span>
+        </div>
+        <div className="entity-table entity-table--nodes">
+          <div className="entity-table__head node-row-grid">
+            <span>节点</span>
+            <span>状态</span>
+            <span>对外地址</span>
+            <span>trafficStats</span>
+            <span>在线/流</span>
+            <span>最近同步</span>
+            <span>操作</span>
+          </div>
+          {nodes.map((node) => {
+            const authUrl = buildNodeAuthUrl(node.slug, node.auth_token, origin);
+            const suggestedTrafficStatsUrl = buildTrafficStatsUrl(
+              node.server_host,
+              node.traffic_stats_listen,
+            );

-          return (
-            <article key={node.id} className="panel-card entity-card">
-              <div className="section-title section-title--top">
-                <div>
-                  <h3>{node.name}</h3>
-                  <p className="muted mono">/{node.slug}</p>
-                </div>
-                <div className="align-right stack-tight">
-                  <div className="badge-row badge-row--end">
+            return (
+              <details key={node.id} className="entity-table__item">
+                <summary className="entity-table__summary node-row-grid">
+                  <span className="entity-main-cell">
+                    <strong>{node.name}</strong>
+                    <span className="muted mono">/{node.slug}</span>
+                  </span>
+                  <span className="badge-row entity-status-cell">
                    {getNodePills(node).map((pill) => (
                      <span key={pill.label} className={pill.className}>
                        {pill.label}
                      </span>
                    ))}
+                  </span>
+                  <span className="entity-code-cell">
+                    {node.server_host}:{node.server_port}
+                    <small>hy2 {node.hy2_listen}</small>
+                  </span>
+                  <span className="entity-code-cell break-all">
+                    {node.traffic_stats_url}
+                    <small>{node.traffic_stats_listen}</small>
+                  </span>
+                  <span className="entity-number-cell">
+                    <strong>{node.last_online_users} / {node.last_stream_count}</strong>
+                    <span>用户 / 流</span>
+                  </span>
+                  <span className="entity-muted-cell">
+                    {formatLocalDateTime(node.last_sync_ok_at)}
+                    {node.last_error_at ? <small>错误 {formatLocalDateTime(node.last_error_at)}</small> : null}
+                  </span>
+                  <span className="entity-expand-label">编辑</span>
+                </summary>
+                <div className="entity-table__details">
+                  <div className="dense-code-grid">
+                    <div className="dense-code-line">
+                      <span>鉴权 URL</span>
+                      <code>{authUrl}</code>
+                    </div>
+                    <div className="dense-code-line">
+                      <span>自动推导 trafficStats</span>
+                      <code>{suggestedTrafficStatsUrl}</code>
+                    </div>
                  </div>
-                  <p className="muted">
-                    最近同步 {node.last_sync_ok_at ?? "无"} / 错误{" "}
-                    {node.last_error_at ?? "无"}
-                  </p>
-                </div>
-              </div>
-              <div className="summary-grid">
-                <div className="metric-inline">
-                  <span>hy2 监听</span>
-                  <strong className="mono">{node.hy2_listen}</strong>
-                </div>
-                <div className="metric-inline">
-                  <span>对外地址</span>
-                  <strong className="mono">{node.server_host}:{node.server_port}</strong>
-                </div>
-                <div className="metric-inline">
-                  <span>trafficStats</span>
-                  <strong className="mono break-all">{node.traffic_stats_url}</strong>
-                </div>
-              </div>

-              <form action={updateNodeAction} className="form-grid compact">
-                <input name="id" type="hidden" value={node.id} />
-                <label className="field">
-                  <span>Slug</span>
-                  <input name="slug" defaultValue={node.slug} required />
-                </label>
-                <label className="field">
-                  <span>显示名</span>
-                  <input name="name" defaultValue={node.name} required />
-                </label>
-                <label className="field">
-                  <span>客户端地址</span>
-                  <input name="server_host" defaultValue={node.server_host} required />
-                </label>
-                <label className="field">
-                  <span>hy2 监听地址</span>
-                  <input
-                    name="hy2_listen"
-                    defaultValue={node.hy2_listen}
-                    placeholder=":443 或 0.0.0.0:443"
-                  />
-                </label>
-                <label className="field">
-                  <span>对外端口</span>
-                  <input
-                    name="server_port"
-                    type="number"
-                    min="1"
-                    max="65535"
-                    defaultValue={node.server_port}
-                    required
-                  />
-                </label>
-                <label className="field">
-                  <span>Clash 节点名</span>
-                  <input name="client_name" defaultValue={node.client_name} />
-                </label>
-                <label className="field">
-                  <span>鉴权 Token</span>
-                  <input name="auth_token" defaultValue={node.auth_token} required />
-                </label>
-                <label className="field">
-                  <span>上行带宽 Mbps</span>
-                  <input
-                    name="bandwidth_up_mbps"
-                    type="number"
-                    min="1"
-                    defaultValue={node.bandwidth_up_mbps}
-                    required
-                  />
-                </label>
-                <label className="field">
-                  <span>下行带宽 Mbps</span>
-                  <input
-                    name="bandwidth_down_mbps"
-                    type="number"
-                    min="1"
-                    defaultValue={node.bandwidth_down_mbps}
-                    required
-                  />
-                </label>
-                <label className="field">
-                  <span>SNI</span>
-                  <input name="sni" defaultValue={node.sni ?? ""} />
-                </label>
-                <label className="checkbox">
-                  <input
-                    name="skip_cert_verify"
-                    type="checkbox"
-                    defaultChecked={Boolean(node.skip_cert_verify)}
-                  />
-                  <span>客户端跳过证书校验</span>
-                </label>
-                <label className="field">
-                  <span>trafficStats 监听</span>
-                  <input
-                    name="traffic_stats_listen"
-                    defaultValue={node.traffic_stats_listen}
-                    required
-                  />
-                </label>
-                <label className="field">
-                  <span>trafficStats URL</span>
-                  <input
-                    name="traffic_stats_url"
-                    defaultValue={node.traffic_stats_url}
-                  />
-                </label>
-                <label className="field">
-                  <span>trafficStats Secret</span>
-                  <input
-                    name="traffic_stats_secret"
-                    defaultValue={node.traffic_stats_secret}
-                    placeholder="留空保持当前值"
-                  />
-                </label>
-                <label className="field">
-                  <span>轮询间隔（秒）</span>
-                  <input
-                    name="poll_interval_seconds"
-                    type="number"
-                    min="10"
-                    max="30"
-                    defaultValue={node.poll_interval_seconds}
-                    required
-                  />
-                </label>
-                <label className="checkbox">
-                  <input
-                    name="enabled"
-                    type="checkbox"
-                    defaultChecked={Boolean(node.enabled)}
-                  />
-                  <span>启用节点</span>
-                </label>
-                <button className="ghost-button" type="submit">
-                  保存节点
-                </button>
-              </form>
+                  <form action={updateNodeAction} className="dense-form-grid dense-form-grid--nodes">
+                    <input name="id" type="hidden" value={node.id} />
+                    <label className="field">
+                      <span>Slug</span>
+                      <input name="slug" defaultValue={node.slug} required />
+                    </label>
+                    <label className="field">
+                      <span>显示名</span>
+                      <input name="name" defaultValue={node.name} required />
+                    </label>
+                    <label className="field">
+                      <span>客户端地址</span>
+                      <input name="server_host" defaultValue={node.server_host} required />
+                    </label>
+                    <label className="field">
+                      <span>hy2 监听地址</span>
+                      <input name="hy2_listen" defaultValue={node.hy2_listen} placeholder=":443 或 0.0.0.0:443" />
+                    </label>
+                    <label className="field">
+                      <span>对外端口</span>
+                      <input name="server_port" type="number" min="1" max="65535" defaultValue={node.server_port} required />
+                    </label>
+                    <label className="field">
+                      <span>Clash 节点名</span>
+                      <input name="client_name" defaultValue={node.client_name} />
+                    </label>
+                    <label className="field">
+                      <span>鉴权 Token</span>
+                      <input name="auth_token" defaultValue={node.auth_token} required />
+                    </label>
+                    <label className="field">
+                      <span>上行带宽 Mbps</span>
+                      <input name="bandwidth_up_mbps" type="number" min="1" defaultValue={node.bandwidth_up_mbps} required />
+                    </label>
+                    <label className="field">
+                      <span>下行带宽 Mbps</span>
+                      <input name="bandwidth_down_mbps" type="number" min="1" defaultValue={node.bandwidth_down_mbps} required />
+                    </label>
+                    <label className="field">
+                      <span>SNI</span>
+                      <input name="sni" defaultValue={node.sni ?? ""} />
+                    </label>
+                    <label className="checkbox">
+                      <input name="skip_cert_verify" type="checkbox" defaultChecked={Boolean(node.skip_cert_verify)} />
+                      <span>跳过证书校验</span>
+                    </label>
+                    <label className="field">
+                      <span>trafficStats 监听</span>
+                      <input name="traffic_stats_listen" defaultValue={node.traffic_stats_listen} required />
+                    </label>
+                    <label className="field">
+                      <span>trafficStats URL</span>
+                      <input name="traffic_stats_url" defaultValue={node.traffic_stats_url} />
+                    </label>
+                    <label className="field">
+                      <span>trafficStats Secret</span>
+                      <input name="traffic_stats_secret" defaultValue={node.traffic_stats_secret} placeholder="留空保持当前值" />
+                    </label>
+                    <label className="field">
+                      <span>轮询间隔（秒）</span>
+                      <input name="poll_interval_seconds" type="number" min="10" max="30" defaultValue={node.poll_interval_seconds} required />
+                    </label>
+                    <label className="checkbox">
+                      <input name="enabled" type="checkbox" defaultChecked={Boolean(node.enabled)} />
+                      <span>启用节点</span>
+                    </label>
+                    <button className="ghost-button" type="submit">
+                      保存节点
+                    </button>
+                  </form>

-              <div className="instruction-block">
-                <strong>节点接入说明</strong>
-                <p className="muted">
-                  hy2 HTTP 鉴权 URL 必须独立配置到本节点。面板通过路径识别节点来源，不依赖请求体。
-                </p>
-                <pre>
+                  <details className="config-collapse">
+                    <summary>查看 hy2 config.yaml</summary>
+                    <pre>
 {buildNodeHy2Config(node, origin)}
-                </pre>
-                <p className="muted">
-                  面板轮询地址：<span className="mono">{node.traffic_stats_url}</span>
-                </p>
-                <p className="muted">
-                  自动推导地址：<span className="mono">{suggestedTrafficStatsUrl}</span>
-                </p>
-                <p className="muted">
-                  鉴权 URL：<span className="mono">{authUrl}</span>
-                </p>
-                <a
-                  className="ghost-button inline-button"
-                  href={`/api/admin/nodes/${node.slug}/config`}
-                >
-                  下载 hy2 config.yaml
-                </a>
-                {node.last_error_message ? (
-                  <p className="error-text">{node.last_error_message}</p>
-                ) : null}
-              </div>
+                    </pre>
+                    <a className="ghost-button inline-button" href={`/api/admin/nodes/${node.slug}/config`}>
+                      下载 hy2 config.yaml
+                    </a>
+                  </details>

-              <form action={deleteNodeAction}>
-                <input name="id" type="hidden" value={node.id} />
-                <button className="danger-button" type="submit">
-                  删除节点
-                </button>
-              </form>
-            </article>
-          );
-        })}
+                  {node.last_error_message ? (
+                    <p className="error-text">{node.last_error_message}</p>
+                  ) : null}
+
+                  <div className="entity-action-strip">
+                    <form action={deleteNodeAction}>
+                      <input name="id" type="hidden" value={node.id} />
+                      <button className="danger-button" type="submit">
+                        删除节点
+                      </button>
+                    </form>
+                  </div>
+                </div>
+              </details>
+            );
+          })}
+        </div>
      </section>
    </main>
  );
-}
+}
@@ -6,10 +6,25 @@ import { createStableId } from "@/lib/password";
 import { requireAdminAccess } from "@/lib/session";
 import {
  getSubscriptionSettings,
+  saveMainProxyGroupMemberSlugs,
  saveProxyGroups,
  saveSubscriptionSettings,
 } from "@/lib/store";

+function readUniqueMemberSlugs(formData: FormData) {
+  const seen = new Set<string>();
+
+  return formData.getAll("member_slugs").flatMap((value) => {
+    const slug = String(value).trim();
+    if (!slug || seen.has(slug)) {
+      return [];
+    }
+
+    seen.add(slug);
+    return [slug];
+  });
+}
+
 export async function saveSubscriptionSettingsAction(formData: FormData) {
  await requireAdminAccess();

@@ -28,16 +43,7 @@ export async function saveProxyGroupAction(formData: FormData) {
  const settings = await getSubscriptionSettings();
  const id = String(formData.get("id") ?? "").trim() || createStableId();
  const name = String(formData.get("name") ?? "").trim();
-  const seen = new Set<string>();
-  const memberSlugs = formData.getAll("member_slugs").flatMap((value) => {
-    const slug = String(value).trim();
-    if (!slug || seen.has(slug)) {
-      return [];
-    }
-
-    seen.add(slug);
-    return [slug];
-  });
+  const memberSlugs = readUniqueMemberSlugs(formData);

  if (!name) {
    return;
@@ -62,6 +68,13 @@ export async function saveProxyGroupAction(formData: FormData) {
  revalidatePath("/admin/subscriptions");
 }

+export async function saveMainProxyGroupAction(formData: FormData) {
+  await requireAdminAccess();
+
+  await saveMainProxyGroupMemberSlugs(readUniqueMemberSlugs(formData));
+  revalidatePath("/admin/subscriptions");
+}
+
 export async function deleteProxyGroupAction(formData: FormData) {
  await requireAdminAccess();

@@ -29,13 +29,10 @@ export default async function AdminSubscriptionsPage() {
    <main className="page-stack">
      <section className="hero-panel">
        <div className="hero-copy">
-          <span className="eyebrow">SUBSCRIPTIONS</span>
+          <span className="eyebrow">订阅</span>
          <h2>订阅与模板</h2>
-          <p className="page-lede">
-            管理 Clash 基础模板、订阅文件名、代理分组以及管理员默认不限量订阅链接。
-          </p>
          <div className="badge-row">
-            <span className="status-pill status-pill--ok">动态 proxies</span>
+            <span className="status-pill status-pill--ok">节点 {nodes.length}</span>
            <span className="status-pill status-pill--ink">分组 {settings.proxyGroups.length}</span>
          </div>
        </div>
@@ -69,11 +66,20 @@ export default async function AdminSubscriptionsPage() {
      <section className="panel-card">
        <div className="section-title section-title--top">
          <div className="stack-tight">
-            <h3>Proxy Groups</h3>
-            <p className="muted">已选列表从上到下的顺序，就是写入 Clash 配置时的节点顺序。</p>
+            <h3>代理分组</h3>
          </div>
        </div>
        <div className="stack-lg">
+          <ProxyGroupEditor
+            mode="main"
+            group={{
+              id: "main",
+              name: settings.profileName,
+              memberSlugs: settings.mainProxyGroupMemberSlugs,
+            }}
+            nodes={proxyGroupNodes}
+          />
+
          {settings.proxyGroups.map((group) => (
            <ProxyGroupEditor key={group.id} group={group} nodes={proxyGroupNodes} />
          ))}
@@ -84,7 +90,7 @@ export default async function AdminSubscriptionsPage() {

      <section className="panel-card">
        <div className="section-title">
-          <h3>Clash 模板</h3>
+          <h3>订阅模板</h3>
        </div>
        <form action={saveSubscriptionSettingsAction} className="stack-lg">
          <label className="field">
@@ -3,7 +3,11 @@
 import { useDeferredValue, useState } from "react";
 import { useFormStatus } from "react-dom";

-import { deleteProxyGroupAction, saveProxyGroupAction } from "./actions";
+import {
+  deleteProxyGroupAction,
+  saveMainProxyGroupAction,
+  saveProxyGroupAction,
+} from "./actions";

 type ProxyGroupNodeOption = {
  slug: string;
@@ -12,6 +16,7 @@ type ProxyGroupNodeOption = {
 };

 type ProxyGroupEditorProps = {
+  mode?: "custom" | "main";
  group?: {
    id: string;
    name: string;
@@ -20,11 +25,14 @@ type ProxyGroupEditorProps = {
  nodes: ProxyGroupNodeOption[];
 };

-function normalizeSelectedSlugs(initialSlugs: string[], nodes: ProxyGroupNodeOption[]) {
+function normalizeSelectedSlugs(
+  initialSlugs: string[],
+  nodes: ProxyGroupNodeOption[],
+  includeMissingNodes = false,
+) {
  const availableSlugs = new Set(nodes.map((node) => node.slug));
  const seen = new Set<string>();
-
-  return initialSlugs.filter((slug) => {
+  const selectedSlugs = initialSlugs.filter((slug) => {
    if (!availableSlugs.has(slug) || seen.has(slug)) {
      return false;
    }
@@ -32,14 +40,33 @@ function normalizeSelectedSlugs(initialSlugs: string[], nodes: ProxyGroupNodeOpt
    seen.add(slug);
    return true;
  });
+
+  if (!includeMissingNodes) {
+    return selectedSlugs;
+  }
+
+  for (const node of nodes) {
+    if (!seen.has(node.slug)) {
+      selectedSlugs.push(node.slug);
+      seen.add(node.slug);
+    }
+  }
+
+  return selectedSlugs;
 }

-function SaveButton({ isEditing }: { isEditing: boolean }) {
+function SaveButton({ isEditing, isMainGroup }: { isEditing: boolean; isMainGroup: boolean }) {
  const { pending } = useFormStatus();
+  const label = isMainGroup ? "保存主组顺序" : isEditing ? "保存分组" : "新建分组";
+  const pendingLabel = isMainGroup ? "保存中..." : isEditing ? "保存中..." : "创建中...";

  return (
-    <button className={isEditing ? "ghost-button" : "primary-button"} type="submit" disabled={pending}>
-      {pending ? (isEditing ? "保存中..." : "创建中...") : isEditing ? "保存分组" : "新建分组"}
+    <button
+      className={isEditing && !isMainGroup ? "ghost-button" : "primary-button"}
+      type="submit"
+      disabled={pending}
+    >
+      {pending ? pendingLabel : label}
    </button>
  );
 }
@@ -54,12 +81,13 @@ function DeleteButton() {
  );
 }

-export function ProxyGroupEditor({ group, nodes }: ProxyGroupEditorProps) {
-  const isEditing = Boolean(group);
+export function ProxyGroupEditor({ mode = "custom", group, nodes }: ProxyGroupEditorProps) {
+  const isMainGroup = mode === "main";
+  const isEditing = Boolean(group) && !isMainGroup;
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);
  const [selectedSlugs, setSelectedSlugs] = useState(() =>
-    normalizeSelectedSlugs(group?.memberSlugs ?? [], nodes),
+    normalizeSelectedSlugs(group?.memberSlugs ?? [], nodes, isMainGroup),
  );
  const selectedSlugSet = new Set(selectedSlugs);
  const nodesBySlug = new Map(nodes.map((node) => [node.slug, node]));
@@ -135,96 +163,103 @@ export function ProxyGroupEditor({ group, nodes }: ProxyGroupEditorProps) {

  return (
    <article className="instruction-block proxy-group-card">
-      <form action={saveProxyGroupAction} className="stack-md">
-        {group ? <input type="hidden" name="id" value={group.id} /> : null}
+      <form action={isMainGroup ? saveMainProxyGroupAction : saveProxyGroupAction} className="stack-md">
+        {group && !isMainGroup ? <input type="hidden" name="id" value={group.id} /> : null}
        <div className="section-title section-title--top">
          <div className="stack-tight">
-            <h4 className="proxy-group-title">{isEditing ? group?.name : "新建分组"}</h4>
-            <p className="muted proxy-group-caption">右侧顺序就是最终写入 Clash 的节点顺序。</p>
+            <h4 className="proxy-group-title">
+              {isMainGroup ? `默认主分组：${group?.name ?? "FeieProxy"}` : isEditing ? group?.name : "新建分组"}
+            </h4>
          </div>
          <div className="badge-row badge-row--end">
            <span className="status-pill status-pill--ink">已选 {selectedNodes.length}</span>
-            <span className="status-pill status-pill--warm">未加入 {remainingCount}</span>
+            {!isMainGroup ? (
+              <span className="status-pill status-pill--warm">未加入 {remainingCount}</span>
+            ) : null}
          </div>
        </div>

-        <label className="field">
-          <span>{isEditing ? "组名" : "新建分组名"}</span>
-          <input name="name" defaultValue={group?.name ?? ""} placeholder="ChatGPT" required />
-        </label>
+        {!isMainGroup ? (
+          <label className="field">
+            <span>{isEditing ? "组名" : "新建分组名"}</span>
+            <input name="name" defaultValue={group?.name ?? ""} placeholder="ChatGPT" required />
+          </label>
+        ) : null}

-        <div className="proxy-group-builder">
-          <section className="proxy-group-panel">
-            <div className="proxy-group-panel__header">
-              <div className="stack-tight">
-                <strong>候选节点</strong>
-                <span className="muted">筛选后点击添加，新节点会追加到分组末尾。</span>
-              </div>
-              <div className="proxy-group-toolbar">
-                <label className="proxy-group-search">
-                  <input
-                    type="search"
-                    value={query}
-                    onChange={(event) => setQuery(event.target.value)}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter") {
-                        event.preventDefault();
-                      }
-                    }}
-                    placeholder="搜索节点名称 / slug"
-                  />
-                </label>
-                <button
-                  className="ghost-button proxy-toolbar-button"
-                  type="button"
-                  onClick={addAllVisibleNodes}
-                  disabled={availableNodes.length === 0}
-                >
-                  {normalizedQuery ? "添加筛选结果" : "全部添加"}
-                </button>
-              </div>
-            </div>
-
-            {availableNodes.length > 0 ? (
-              <div className="proxy-node-grid">
-                {availableNodes.map((node) => (
+        <div className={`proxy-group-builder${isMainGroup ? " proxy-group-builder--main" : ""}`}>
+          {!isMainGroup ? (
+            <section className="proxy-group-panel">
+              <div className="proxy-group-panel__header">
+                <div className="stack-tight">
+                  <strong>候选节点</strong>
+                </div>
+                <div className="proxy-group-toolbar">
+                  <label className="proxy-group-search">
+                    <input
+                      type="search"
+                      value={query}
+                      onChange={(event) => setQuery(event.target.value)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          event.preventDefault();
+                        }
+                      }}
+                      placeholder="搜索节点名称 / slug"
+                    />
+                  </label>
                  <button
-                    key={node.slug}
-                    className="proxy-node-chip"
+                    className="ghost-button proxy-toolbar-button"
                    type="button"
-                    onClick={() => addNode(node.slug)}
+                    onClick={addAllVisibleNodes}
+                    disabled={availableNodes.length === 0}
                  >
-                    <span className="proxy-node-chip__copy">
-                      <strong>{node.label}</strong>
-                      <span>{node.meta}</span>
-                    </span>
-                    <span className="proxy-node-chip__action">添加</span>
+                    {normalizedQuery ? "添加筛选结果" : "全部添加"}
                  </button>
-                ))}
+                </div>
              </div>
-            ) : (
-              <p className="muted proxy-group-empty">
-                {remainingCount === 0
-                  ? "所有可用节点都已加入当前分组。"
-                  : "没有匹配当前筛选条件的节点。"}
-              </p>
-            )}
-          </section>
+
+              {availableNodes.length > 0 ? (
+                <div className="proxy-node-grid">
+                  {availableNodes.map((node) => (
+                    <button
+                      key={node.slug}
+                      className="proxy-node-chip"
+                      type="button"
+                      onClick={() => addNode(node.slug)}
+                    >
+                      <span className="proxy-node-chip__copy">
+                        <strong>{node.label}</strong>
+                        <span>{node.meta}</span>
+                      </span>
+                      <span className="proxy-node-chip__action">添加</span>
+                    </button>
+                  ))}
+                </div>
+              ) : (
+                <p className="muted proxy-group-empty">
+                  {remainingCount === 0
+                    ? "所有可用节点都已加入当前分组。"
+                    : "没有匹配当前筛选条件的节点。"}
+                </p>
+              )}
+            </section>
+          ) : null}

          <section className="proxy-group-panel proxy-group-panel--selected">
            <div className="proxy-group-panel__header">
              <div className="stack-tight">
-                <strong>已选顺序</strong>
-                <span className="muted">上移和下移会直接改变最终输出顺序。</span>
+                <strong>{isMainGroup ? "节点顺序" : "已选顺序"}</strong>
              </div>
-              <button
-                className="ghost-button proxy-toolbar-button"
-                type="button"
-                onClick={clearSelection}
-                disabled={selectedNodes.length === 0}
-              >
-                清空已选
-              </button>
+              {!isMainGroup ? (
+                <button
+                  className="ghost-button proxy-toolbar-button"
+                  type="button"
+                  onClick={clearSelection}
+                  disabled={selectedNodes.length === 0}
+                >
+                  清空已选
+                </button>
+              ) : null}
            </div>

            {selectedNodes.length > 0 ? (
@@ -255,13 +290,15 @@ export function ProxyGroupEditor({ group, nodes }: ProxyGroupEditorProps) {
                      >
                        下移
                      </button>
-                      <button
-                        className="danger-button proxy-sort-button"
-                        type="button"
-                        onClick={() => removeNode(node.slug)}
-                      >
-                        移除
-                      </button>
+                      {!isMainGroup ? (
+                        <button
+                          className="danger-button proxy-sort-button"
+                          type="button"
+                          onClick={() => removeNode(node.slug)}
+                        >
+                          移除
+                        </button>
+                      ) : null}
                    </div>
                    <input type="hidden" name="member_slugs" value={node.slug} />
                  </li>
@@ -269,19 +306,18 @@ export function ProxyGroupEditor({ group, nodes }: ProxyGroupEditorProps) {
              </ol>
            ) : (
              <p className="muted proxy-group-empty">
-                还没有选择节点。先从左侧添加，再在这里调整最终顺序。
+                {isMainGroup ? "暂无可用节点。" : "还没有选择节点。先从左侧添加，再在这里调整最终顺序。"}
              </p>
            )}
          </section>
        </div>

-        <div className="action-row">
-          <span className="muted">保存后会立即更新订阅模板里的 proxy-groups。</span>
-          <SaveButton isEditing={isEditing} />
+        <div className="action-row action-row--end">
+          <SaveButton isEditing={isEditing} isMainGroup={isMainGroup} />
        </div>
      </form>

-      {group ? (
+      {group && !isMainGroup ? (
        <form action={deleteProxyGroupAction}>
          <input type="hidden" name="id" value={group.id} />
          <DeleteButton />
@@ -1,4 +1,5 @@
 import { getRequestOrigin } from "@/lib/request-origin";
+import { formatLocalDateTime } from "@/lib/datetime";
 import {
  buildSubscriptionUrl,
  describeRemainingTraffic,
@@ -30,7 +31,7 @@ function getUserPills(user: {
      ? { label: "管理员", className: "status-pill status-pill--ink" }
      : null,
    user.expires_at
-      ? { label: user.expires_at, className: "status-pill status-pill--neutral" }
+      ? { label: formatLocalDateTime(user.expires_at), className: "status-pill status-pill--neutral" }
      : { label: "长期有效", className: "status-pill status-pill--warm" },
  ].filter((pill): pill is { label: string; className: string } => Boolean(pill));
 }
@@ -39,17 +40,14 @@ export default async function UsersPage() {
  const [users, origin] = await Promise.all([listUsers(), getRequestOrigin()]);

  return (
-    <main className="page-stack">
+    <main className="page-stack management-page">
      <section className="hero-panel">
        <div className="hero-copy">
-          <span className="eyebrow">USERS</span>
+          <span className="eyebrow">用户</span>
          <h2>用户管理</h2>
-          <p className="page-lede">
-            管理用户名:密码、`auth_id`、到期时间、额度、订阅名和用户自助链接。
-          </p>
          <div className="badge-row">
-            <span className="status-pill status-pill--ok">自助登录</span>
-            <span className="status-pill status-pill--neutral">订阅链接按用户独立生成</span>
+            <span className="status-pill status-pill--ok">启用 {users.filter((user) => user.enabled).length}</span>
+            <span className="status-pill status-pill--neutral">总数 {users.length}</span>
          </div>
        </div>
        <div className="hero-aside">
@@ -64,157 +62,174 @@ export default async function UsersPage() {
        </div>
      </section>

-      <section className="panel-card">
-        <div className="section-title">
-          <h3>新建用户</h3>
-        </div>
-        <form action={createUserAction} className="form-grid">
-          <label className="field">
-            <span>用户名</span>
-            <input name="username" required />
-          </label>
-          <label className="field">
-            <span>密码</span>
-            <input name="password" type="password" required />
-          </label>
-          <label className="field">
-            <span>到期时间</span>
-            <input name="expires_at" type="datetime-local" />
-          </label>
-          <label className="field">
-            <span>总流量上限 GiB</span>
-            <input name="traffic_limit_gib" type="number" min="0" step="0.1" />
-          </label>
-          <label className="field full-span">
-            <span>备注</span>
-            <textarea name="notes" rows={3} />
-          </label>
-          <label className="checkbox">
-            <input name="enabled" type="checkbox" defaultChecked />
-            <span>立即启用</span>
-          </label>
-          <button className="primary-button" type="submit">
-            创建用户
-          </button>
-        </form>
+      <section className="panel-card compact-create-panel">
+        <details>
+          <summary className="compact-create-summary">
+            <div>
+              <h3>新建用户</h3>
+            </div>
+            <span className="status-pill status-pill--warm">展开</span>
+          </summary>
+          <form action={createUserAction} className="dense-form-grid dense-form-grid--users">
+            <label className="field">
+              <span>用户名</span>
+              <input name="username" required />
+            </label>
+            <label className="field">
+              <span>密码</span>
+              <input name="password" type="password" required />
+            </label>
+            <label className="field">
+              <span>到期时间</span>
+              <input name="expires_at" type="datetime-local" />
+            </label>
+            <label className="field">
+              <span>总流量上限 GiB</span>
+              <input name="traffic_limit_gib" type="number" min="0" step="0.1" />
+            </label>
+            <label className="field dense-field-wide">
+              <span>备注</span>
+              <textarea name="notes" rows={2} />
+            </label>
+            <label className="checkbox">
+              <input name="enabled" type="checkbox" defaultChecked />
+              <span>立即启用</span>
+            </label>
+            <button className="primary-button" type="submit">
+              创建用户
+            </button>
+          </form>
+        </details>
      </section>

-      <section className="stack-lg">
-        {users.map((user) => (
-          <article key={user.id} className="panel-card entity-card">
-            <div className="section-title section-title--top">
-              <div>
-                <h3>{user.username}</h3>
-                <p className="muted mono">auth_id: {user.auth_id}</p>
-              </div>
-              <div className="align-right stack-tight">
-                <div className="badge-row badge-row--end">
-                  {getUserPills(user).map((pill) => (
-                    <span key={pill.label} className={pill.className}>
-                      {pill.label}
-                    </span>
-                  ))}
+      <section className="panel-card dense-panel">
+        <div className="section-title">
+          <h3>用户列表</h3>
+          <span className="status-pill status-pill--neutral">{users.length} 个账户</span>
+        </div>
+        <div className="entity-table entity-table--users">
+          <div className="entity-table__head user-row-grid">
+            <span>用户</span>
+            <span>状态</span>
+            <span>用量</span>
+            <span>剩余额度</span>
+            <span>在线</span>
+            <span>操作</span>
+          </div>
+          {users.map((user) => {
+            const usedBytes = user.used_tx_bytes + user.used_rx_bytes;
+            const subscriptionUrl = user.subscription_token
+              ? buildSubscriptionUrl(user.subscription_token, origin)
+              : "暂不可用";
+
+            return (
+              <details key={user.id} className="entity-table__item">
+                <summary className="entity-table__summary user-row-grid">
+                  <span className="entity-main-cell">
+                    <strong>{user.username}</strong>
+                    <span className="muted mono break-all">{user.auth_id}</span>
+                  </span>
+                  <span className="badge-row entity-status-cell">
+                    {getUserPills(user).map((pill) => (
+                      <span key={pill.label} className={pill.className}>
+                        {pill.label}
+                      </span>
+                    ))}
+                  </span>
+                  <span className="entity-number-cell">
+                    <strong>{formatBytes(usedBytes)}</strong>
+                    <span>TX {formatBytes(user.used_tx_bytes)} / RX {formatBytes(user.used_rx_bytes)}</span>
+                  </span>
+                  <span className="entity-number-cell">
+                    <strong>{describeRemainingTraffic(user)}</strong>
+                    <span>{user.traffic_limit_bytes ? "有额度" : "不限量"}</span>
+                  </span>
+                  <span className="entity-number-cell">
+                    <strong>{user.online_connections}</strong>
+                    <span>连接</span>
+                  </span>
+                  <span className="entity-expand-label">编辑</span>
+                </summary>
+                <div className="entity-table__details">
+                  <div className="dense-code-line">
+                    <span>订阅链接</span>
+                    <code>{subscriptionUrl}</code>
+                  </div>
+                  <form action={updateUserAction} className="dense-form-grid dense-form-grid--users">
+                    <input name="id" type="hidden" value={user.id} />
+                    <label className="field">
+                      <span>用户名</span>
+                      <input name="username" defaultValue={user.username} required />
+                    </label>
+                    <label className="field">
+                      <span>到期时间</span>
+                      <input
+                        name="expires_at"
+                        type="datetime-local"
+                        defaultValue={toDatetimeLocalValue(user.expires_at)}
+                      />
+                    </label>
+                    <label className="field">
+                      <span>总流量上限 GiB</span>
+                      <input
+                        name="traffic_limit_gib"
+                        type="number"
+                        min="0"
+                        step="0.1"
+                        defaultValue={
+                          user.traffic_limit_bytes && !user.is_admin
+                            ? (user.traffic_limit_bytes / 1024 / 1024 / 1024).toFixed(2)
+                            : ""
+                        }
+                        disabled={Boolean(user.is_admin)}
+                      />
+                    </label>
+                    <label className="field">
+                      <span>订阅名称</span>
+                      <input
+                        name="subscription_label"
+                        defaultValue={user.subscription_label || user.username}
+                      />
+                    </label>
+                    <label className="field dense-field-wide">
+                      <span>备注</span>
+                      <textarea name="notes" rows={2} defaultValue={user.notes} />
+                    </label>
+                    <label className="checkbox">
+                      <input
+                        name="enabled"
+                        type="checkbox"
+                        defaultChecked={Boolean(user.enabled)}
+                      />
+                      <span>启用用户</span>
+                    </label>
+                    <button className="ghost-button" type="submit">
+                      保存修改
+                    </button>
+                  </form>
+                  <div className="entity-action-strip">
+                    <form action={resetUserPasswordAction} className="inline-form inline-form--compact">
+                      <input name="id" type="hidden" value={user.id} />
+                      <input name="password" type="password" placeholder="新密码" required />
+                      <button className="ghost-button" type="submit">
+                        重置密码
+                      </button>
+                    </form>
+                    {user.is_admin ? null : (
+                      <form action={deleteUserAction}>
+                        <input name="id" type="hidden" value={user.id} />
+                        <button className="danger-button" type="submit">
+                          删除用户
+                        </button>
+                      </form>
+                    )}
+                  </div>
                </div>
-                <p className="muted">
-                  累计 {formatBytes(user.used_tx_bytes + user.used_rx_bytes)} / 在线{" "}
-                  {user.online_connections}
-                </p>
-              </div>
-            </div>
-            <div className="summary-grid">
-              <div className="metric-inline">
-                <span>总用量</span>
-                <strong>{formatBytes(user.used_tx_bytes + user.used_rx_bytes)}</strong>
-              </div>
-              <div className="metric-inline">
-                <span>剩余额度</span>
-                <strong>{describeRemainingTraffic(user)}</strong>
-              </div>
-              <div className="metric-inline">
-                <span>在线连接</span>
-                <strong>{user.online_connections}</strong>
-              </div>
-            </div>
-            <form action={updateUserAction} className="form-grid compact">
-              <input name="id" type="hidden" value={user.id} />
-              <label className="field">
-                <span>用户名</span>
-                <input name="username" defaultValue={user.username} required />
-              </label>
-              <label className="field">
-                <span>到期时间</span>
-                <input
-                  name="expires_at"
-                  type="datetime-local"
-                  defaultValue={toDatetimeLocalValue(user.expires_at)}
-                />
-              </label>
-              <label className="field">
-                <span>总流量上限 GiB</span>
-                <input
-                  name="traffic_limit_gib"
-                  type="number"
-                  min="0"
-                  step="0.1"
-                  defaultValue={
-                    user.traffic_limit_bytes && !user.is_admin
-                      ? (user.traffic_limit_bytes / 1024 / 1024 / 1024).toFixed(2)
-                      : ""
-                  }
-                  disabled={Boolean(user.is_admin)}
-                />
-              </label>
-              <label className="field">
-                <span>订阅名称</span>
-                <input
-                  name="subscription_label"
-                  defaultValue={user.subscription_label || user.username}
-                />
-              </label>
-              <label className="field full-span">
-                <span>备注</span>
-                <textarea name="notes" rows={3} defaultValue={user.notes} />
-              </label>
-              <label className="checkbox">
-                <input
-                  name="enabled"
-                  type="checkbox"
-                  defaultChecked={Boolean(user.enabled)}
-                />
-                <span>启用用户</span>
-              </label>
-              <button className="ghost-button" type="submit">
-                保存修改
-              </button>
-            </form>
-            <div className="instruction-block">
-              <strong>订阅链接</strong>
-              <p className="muted mono break-all">
-                {user.subscription_token
-                  ? buildSubscriptionUrl(user.subscription_token, origin)
-                  : "暂不可用"}
-              </p>
-            </div>
-            <div className="action-row">
-              <form action={resetUserPasswordAction} className="inline-form">
-                <input name="id" type="hidden" value={user.id} />
-                <input name="password" type="password" placeholder="新密码" required />
-                <button className="ghost-button" type="submit">
-                  重置密码
-                </button>
-              </form>
-              {user.is_admin ? null : (
-                <form action={deleteUserAction}>
-                  <input name="id" type="hidden" value={user.id} />
-                  <button className="danger-button" type="submit">
-                    删除用户
-                  </button>
-                </form>
-              )}
-            </div>
-          </article>
-        ))}
+              </details>
+            );
+          })}
+        </div>
      </section>
    </main>
  );
-}
+}
@@ -1,13 +1,13 @@
@import "tailwindcss";

 :root {
-  --background: #efe5d4;
-  --foreground: #18222c;
-  --panel: rgba(255, 251, 245, 0.76);
-  --panel-strong: rgba(255, 251, 245, 0.92);
+  --background: #f1e7d8;
+  --foreground: #121a22;
+  --panel: rgba(255, 251, 245, 0.9);
+  --panel-strong: rgba(255, 251, 245, 0.98);
  --panel-tint: rgba(255, 244, 230, 0.62);
-  --border: rgba(24, 34, 44, 0.12);
-  --border-strong: rgba(24, 34, 44, 0.22);
+  --border: rgba(18, 26, 34, 0.18);
+  --border-strong: rgba(18, 26, 34, 0.32);
  --accent: #c96233;
  --accent-deep: #7a3116;
  --accent-soft: rgba(201, 98, 51, 0.14);
@@ -15,7 +15,7 @@
  --success: #1f7a4f;
  --danger: #af2d21;
  --warn: #8e5c10;
-  --muted: #5e6670;
+  --muted: #3f4b57;
  --shadow: 0 26px 90px rgba(51, 35, 18, 0.12);
  --shadow-soft: 0 10px 30px rgba(51, 35, 18, 0.06);
 }
@@ -24,7 +24,7 @@
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: "Avenir Next", "PingFang SC", "Segoe UI", sans-serif;
-  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;
+  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
 }

 * {
@@ -71,12 +71,14 @@ a {

 input,
 textarea,
+select,
 button {
  font: inherit;
 }

 input,
-textarea {
+textarea,
+select {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
@@ -88,7 +90,8 @@ textarea {
 }

 input:focus,
-textarea:focus {
+textarea:focus,
+select:focus {
  outline: none;
  border-color: rgba(201, 98, 51, 0.55);
  box-shadow:
@@ -263,7 +266,7 @@ button:disabled {

 .login-card--brand h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
-  letter-spacing: -0.06em;
+  letter-spacing: 0;
 }

 .login-form {
@@ -293,12 +296,6 @@ button:disabled {
  line-height: 1.35;
 }

-.login-note {
-  margin: 0;
-  color: var(--muted);
-  font-size: 0.92rem;
-}
-
 .me-shell {
  position: relative;
  min-height: 100vh;
@@ -377,7 +374,6 @@ button:disabled {

 .me-grid,
 .me-side-stack,
-.me-tip-grid,
 .me-metrics-grid,
 .me-hero-copy,
 .me-identity-card {
@@ -435,7 +431,7 @@ button:disabled {

 .me-hero-copy h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
-  letter-spacing: -0.06em;
+  letter-spacing: 0;
 }

 .me-identity-card {
@@ -493,29 +489,6 @@ button:disabled {
  line-height: 1.65;
 }

-.me-tip-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.9rem;
-}
-
-.me-tip-card {
-  display: grid;
-  gap: 0.45rem;
-  padding: 1rem;
-  border-radius: 22px;
-  border: 1px solid rgba(24, 34, 44, 0.08);
-  background: rgba(255, 255, 255, 0.38);
-}
-
-.me-tip-card strong {
-  font-size: 1rem;
-}
-
-.me-tip-card p {
-  margin: 0;
-  line-height: 1.6;
-}
-
 .me-metrics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
@@ -533,12 +506,13 @@ button:disabled {
 .me-metric-card span {
  color: var(--muted);
  font-size: 0.9rem;
+  font-weight: 700;
 }

 .me-metric-card strong {
  font-size: 1.4rem;
  line-height: 1.15;
-  letter-spacing: -0.04em;
+  letter-spacing: 0;
 }

 .me-metric-card--paper {
@@ -563,15 +537,6 @@ button:disabled {
  align-content: start;
 }

-.me-note-list {
-  margin: 0;
-  padding-left: 1.15rem;
-  display: grid;
-  gap: 0.75rem;
-  color: var(--muted);
-  line-height: 1.6;
-}
-
 .wide-card {
  width: min(56rem, 100%);
 }
@@ -618,10 +583,11 @@ button:disabled {
 }

 .eyebrow {
-  font-family: var(--font-mono);
+  font-family: var(--font-sans);
  font-size: 0.77rem;
-  letter-spacing: 0.18em;
+  letter-spacing: 0;
  color: var(--accent-deep);
+  font-weight: 800;
 }

 .page-lede {
@@ -636,7 +602,9 @@ button:disabled {
 }

 .mono {
-  font-family: var(--font-mono);
+  font-family: var(--font-sans);
+  color: #202b35;
+  font-weight: 650;
 }

 .sidebar-note {
@@ -704,16 +672,11 @@ button:disabled {

 .nav-link {
  display: grid;
-  gap: 0.18rem;
+  gap: 0;
 }

 .nav-link__label {
-  font-weight: 700;
-}
-
-.nav-link__meta {
-  color: var(--muted);
-  font-size: 0.83rem;
+  font-weight: 800;
 }

 .nav-link.is-active {
@@ -736,12 +699,19 @@ button:disabled {
 .primary-button {
  background: var(--accent);
  color: #fff8f2;
+  font-weight: 800;
  box-shadow: 0 12px 24px rgba(201, 98, 51, 0.24);
 }

 .danger-button {
  background: rgba(175, 45, 33, 0.14);
  color: var(--danger);
+  font-weight: 800;
+}
+
+.ghost-button {
+  color: var(--foreground);
+  font-weight: 800;
 }

 .full-width {
@@ -778,6 +748,10 @@ button:disabled {
  gap: 1rem;
 }

+.action-row--end {
+  justify-content: flex-end;
+}
+
 .section-title--top {
  align-items: start;
 }
@@ -831,11 +805,12 @@ button:disabled {

 .metric-card strong {
  font-size: 1.9rem;
-  letter-spacing: -0.04em;
+  letter-spacing: 0;
 }

 .metric-card small {
  color: var(--muted);
+  font-weight: 650;
 }

 .metric-card--warm {
@@ -898,7 +873,7 @@ button:disabled {
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem;
-  font-weight: 700;
+  font-weight: 800;
  border: 1px solid transparent;
 }

@@ -952,6 +927,7 @@ button:disabled {
 .field span {
  font-size: 0.92rem;
  color: var(--muted);
+  font-weight: 700;
 }

 .form-grid.compact {
@@ -999,6 +975,7 @@ button:disabled {
 .stat-tile span {
  color: var(--muted);
  font-size: 0.88rem;
+  font-weight: 700;
 }

 .metric-inline strong,
@@ -1026,10 +1003,11 @@ button:disabled {
 }

 .feature-kicker {
-  font-family: var(--font-mono);
+  font-family: var(--font-sans);
  color: var(--accent-deep);
  font-size: 0.76rem;
-  letter-spacing: 0.16em;
+  letter-spacing: 0;
+  font-weight: 800;
 }

 .break-all {
@@ -1080,6 +1058,10 @@ button:disabled {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
 }

+.proxy-group-builder--main {
+  grid-template-columns: minmax(0, 1fr);
+}
+
 .proxy-group-panel {
  display: grid;
  gap: 0.9rem;
@@ -1237,6 +1219,593 @@ button:disabled {
  gap: 1rem;
 }

+.management-page {
+  gap: 0.85rem;
+}
+
+.management-page .hero-panel {
+  gap: 0.85rem;
+  padding: 0.95rem 1rem;
+  border-radius: 20px;
+}
+
+.management-page .hero-copy,
+.management-page .hero-aside {
+  gap: 0.55rem;
+}
+
+.management-page .hero-copy h2 {
+  font-size: 1.55rem;
+}
+
+.management-page .page-lede {
+  font-size: 0.94rem;
+  line-height: 1.45;
+}
+
+.management-page .stat-tile {
+  min-height: 4.6rem;
+  padding: 0.7rem;
+  border-radius: 14px;
+}
+
+.management-page .panel-card {
+  padding: 0.8rem 0.9rem;
+  border-radius: 16px;
+}
+
+.management-page .status-pill {
+  padding: 0.24rem 0.52rem;
+  font-size: 0.75rem;
+}
+
+.management-page input,
+.management-page textarea,
+.management-page select {
+  border-radius: 10px;
+  padding: 0.5rem 0.65rem;
+  font-size: 0.9rem;
+}
+
+.management-page textarea {
+  min-height: 4.4rem;
+}
+
+.management-page .primary-button,
+.management-page .ghost-button,
+.management-page .danger-button {
+  border-radius: 10px;
+  padding: 0.55rem 0.72rem;
+}
+
+.compact-create-panel {
+  padding: 0;
+}
+
+.compact-create-panel details {
+  display: grid;
+}
+
+.compact-create-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.78rem 0.9rem;
+  cursor: pointer;
+  list-style: none;
+}
+
+.compact-create-summary::-webkit-details-marker,
+.entity-table__summary::-webkit-details-marker,
+.config-collapse summary::-webkit-details-marker {
+  display: none;
+}
+
+.compact-create-summary h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.compact-create-summary p {
+  margin: 0.18rem 0 0;
+  font-size: 0.85rem;
+}
+
+.dense-form-grid {
+  display: grid;
+  gap: 0.55rem;
+  padding: 0.75rem 0.9rem 0.9rem;
+  border-top: 1px solid var(--border);
+}
+
+.dense-form-grid--users {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.dense-form-grid--nodes {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.dense-form-grid .field {
+  gap: 0.25rem;
+}
+
+.dense-form-grid .field span {
+  font-size: 0.78rem;
+}
+
+.dense-field-wide {
+  grid-column: span 2;
+}
+
+.dense-panel {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.entity-table {
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.28);
+}
+
+.entity-table__head,
+.entity-table__summary {
+  display: grid;
+  align-items: center;
+  gap: 0.7rem;
+  min-width: 56rem;
+}
+
+.entity-table__head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 0.52rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--panel-strong);
+  color: var(--foreground);
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.entity-table__item {
+  border-bottom: 1px solid var(--border);
+}
+
+.entity-table__item:last-child {
+  border-bottom: 0;
+}
+
+.entity-table__summary {
+  padding: 0.62rem 0.75rem;
+  cursor: pointer;
+  list-style: none;
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.entity-table__summary:hover {
+  background: rgba(255, 255, 255, 0.34);
+}
+
+.entity-table__details {
+  min-width: 56rem;
+  padding: 0 0.75rem 0.75rem;
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.user-row-grid {
+  grid-template-columns: minmax(12rem, 1.25fr) minmax(11rem, 1.1fr) minmax(8.5rem, 0.85fr) minmax(8rem, 0.8fr) minmax(4.5rem, 0.45fr) minmax(4rem, 0.35fr);
+}
+
+.node-row-grid {
+  grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 0.75fr) minmax(10rem, 0.95fr) minmax(12rem, 1.15fr) minmax(5.5rem, 0.55fr) minmax(9rem, 0.9fr) minmax(4rem, 0.35fr);
+}
+
+.audit-row-grid {
+  grid-template-columns: minmax(4.5rem, 0.45fr) minmax(11rem, 1fr) minmax(10rem, 0.95fr) minmax(6.5rem, 0.65fr) minmax(10rem, 1fr) minmax(10rem, 0.8fr);
+}
+
+.entity-main-cell,
+.entity-number-cell,
+.entity-code-cell,
+.entity-muted-cell {
+  display: grid;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.entity-main-cell strong,
+.entity-number-cell strong {
+  font-size: 0.94rem;
+  color: var(--foreground);
+}
+
+.entity-main-cell span,
+.entity-number-cell span,
+.entity-number-cell small,
+.entity-code-cell small,
+.entity-muted-cell,
+.entity-muted-cell small {
+  color: var(--muted);
+  font-size: 0.79rem;
+  font-weight: 650;
+}
+
+.entity-code-cell {
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: #202b35;
+  font-weight: 650;
+}
+
+.entity-status-cell {
+  gap: 0.28rem;
+}
+
+.entity-expand-label {
+  justify-self: end;
+  color: var(--accent-deep);
+  font-size: 0.8rem;
+  font-weight: 800;
+}
+
+.entity-table__item[open] .entity-expand-label {
+  color: var(--muted);
+}
+
+.dense-code-grid {
+  display: grid;
+  gap: 0.45rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding-top: 0.65rem;
+}
+
+.dense-code-line {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.36);
+}
+
+.dense-code-line span {
+  color: var(--muted);
+  font-size: 0.76rem;
+  font-weight: 700;
+}
+
+.dense-code-line code {
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  color: #202b35;
+  font-weight: 650;
+}
+
+.entity-action-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+  padding-top: 0.65rem;
+}
+
+.inline-form--compact {
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.inline-form--compact input:not([type="hidden"]) {
+  width: min(16rem, 100%);
+}
+
+.config-collapse {
+  margin-top: 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.config-collapse summary {
+  padding: 0.58rem 0.65rem;
+  cursor: pointer;
+  color: var(--accent-deep);
+  font-weight: 800;
+  list-style: none;
+}
+
+.config-collapse pre {
+  overflow: auto;
+  margin: 0;
+  padding: 0.75rem;
+  border-top: 1px solid var(--border);
+  background: #1a1f25;
+  color: #f7eadf;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+}
+
+.config-collapse .inline-button {
+  margin: 0.65rem;
+}
+
+.dashboard-page {
+  gap: 0.75rem;
+}
+
+.dashboard-page .hero-panel {
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  border-radius: 18px;
+}
+
+.dashboard-page .hero-copy,
+.dashboard-page .hero-aside {
+  gap: 0.5rem;
+}
+
+.dashboard-page .hero-copy h2 {
+  font-size: 1.45rem;
+}
+
+.dashboard-page .page-lede {
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+
+.dashboard-page .badge-row {
+  gap: 0.35rem;
+}
+
+.dashboard-page .status-pill {
+  padding: 0.25rem 0.55rem;
+  font-size: 0.76rem;
+}
+
+.dashboard-page .metrics-grid,
+.dashboard-page .panel-grid {
+  gap: 0.65rem;
+}
+
+.dashboard-page .metric-card,
+.dashboard-page .panel-card {
+  border-radius: 16px;
+  padding: 0.75rem 0.85rem;
+}
+
+.dashboard-page .metric-card {
+  gap: 0.25rem;
+  min-height: 5.8rem;
+}
+
+.dashboard-page .metric-card strong {
+  font-size: 1.45rem;
+}
+
+.dashboard-page .metric-card small,
+.dashboard-page .muted,
+.dashboard-page .list-row p {
+  font-size: 0.84rem;
+}
+
+.dashboard-page .section-title {
+  gap: 0.55rem;
+}
+
+.dashboard-page .section-title h3 {
+  font-size: 1rem;
+}
+
+.dashboard-page .stack-md {
+  gap: 0;
+}
+
+.dashboard-page .list-row--card {
+  padding: 0.55rem 0;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+}
+
+.dashboard-page .list-row--card:last-child {
+  border-bottom: 0;
+}
+
+.dashboard-page .list-row p {
+  margin: 0.12rem 0 0;
+}
+
+.dashboard-page .stat-tile {
+  min-height: 4.4rem;
+  padding: 0.65rem;
+  border-radius: 14px;
+}
+
+.dashboard-page select {
+  min-height: 2.25rem;
+  border-radius: 10px;
+  padding: 0.45rem 0.65rem;
+  font-size: 0.9rem;
+}
+
+.dashboard-analytics {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.dashboard-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem;
+  flex-wrap: wrap;
+}
+
+.chart-filter {
+  display: grid;
+  gap: 0.25rem;
+  min-width: min(100%, 15rem);
+}
+
+.chart-filter label {
+  color: var(--muted);
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.dashboard-glance-grid,
+.dashboard-chart-grid {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.dashboard-glance-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.dashboard-chart-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.dashboard-glance-card,
+.dashboard-chart-card {
+  display: grid;
+  gap: 0.5rem;
+  padding: 0.68rem 0.75rem;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+}
+
+.dashboard-glance-card {
+  min-height: 5.6rem;
+}
+
+.dashboard-glance-card span {
+  color: var(--muted);
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.dashboard-glance-card strong {
+  font-size: 1.28rem;
+  line-height: 1.1;
+}
+
+.dashboard-glance-card small {
+  color: var(--muted);
+  font-size: 0.8rem;
+  font-weight: 650;
+}
+
+.dashboard-glance-card--warm {
+  background: linear-gradient(180deg, rgba(247, 225, 203, 0.86), rgba(255, 250, 242, 0.64));
+}
+
+.dashboard-glance-card--ink {
+  background: linear-gradient(180deg, rgba(223, 231, 236, 0.88), rgba(255, 250, 242, 0.66));
+}
+
+.dashboard-glance-card--sage {
+  background: linear-gradient(180deg, rgba(224, 236, 228, 0.88), rgba(255, 250, 242, 0.66));
+}
+
+.dashboard-glance-card--paper {
+  background: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(255, 250, 242, 0.68));
+}
+
+.dashboard-chart-card {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28));
+}
+
+.dashboard-chart-card--wide {
+  grid-column: 1 / -1;
+}
+
+.dashboard-chart-card__head {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.dashboard-chart-card h4 {
+  margin: 0;
+  font-size: 0.95rem;
+}
+
+.chart-note {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.chart-shell,
+.chart-empty {
+  height: 14rem;
+}
+
+.chart-shell--wide {
+  height: 17rem;
+}
+
+.chart-empty {
+  display: grid;
+  place-items: center;
+  padding: 0.75rem;
+  border-radius: 12px;
+  border: 1px dashed var(--border-strong);
+  background: rgba(255, 255, 255, 0.34);
+  color: var(--muted);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.node-line-toggles {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.node-line-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 1.7rem;
+  padding: 0.22rem 0.45rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.42);
+  color: var(--foreground);
+  font-size: 0.78rem;
+}
+
+.node-line-toggle small {
+  color: var(--muted);
+  font-size: 0.72rem;
+}
+
+.node-line-toggle.is-hidden {
+  opacity: 0.45;
+  background: transparent;
+}
+
+.node-line-toggle__swatch {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 999px;
+  flex: none;
+}
+
 .error-banner,
 .error-text {
  color: var(--danger);
@@ -1269,7 +1838,6 @@ button:disabled {
  .login-layout,
  .me-grid,
  .me-hero,
-  .me-tip-grid,
  .me-metrics-grid,
  .hero-panel,
  .hero-panel--compact,
@@ -1318,6 +1886,15 @@ button:disabled {
  .proxy-group-toolbar {
    align-items: stretch;
  }
+
+  .dashboard-toolbar {
+    align-items: stretch;
+  }
+
+  .dashboard-glance-grid,
+  .dashboard-chart-grid {
+    grid-template-columns: 1fr;
+  }
 }

@media (max-width: 640px) {
@@ -29,23 +29,15 @@ export default async function LoginPage({

  return (
    <main className="login-shell login-shell--immersive">
-      <div aria-hidden="true" className="login-backdrop">
-        <span className="login-orb login-orb--one" />
-        <span className="login-orb login-orb--two" />
-        <span className="login-orb login-orb--three" />
-      </div>
      <section className="login-stage">
        <article className="login-card login-card--form login-card--brand">
          <div className="section-title">
            <div>
-              <span className="eyebrow">FEIEPROXY ACCESS</span>
+              <span className="eyebrow">安全登录</span>
              <h1>鹅梯 FeieProxy</h1>
            </div>
            <span className="status-pill status-pill--neutral">家宽节点</span>
          </div>
-          <p className="page-lede">
-            统一管理多节点鉴权、流量同步与 Clash 订阅。管理员进入控制台，普通用户进入自助页查看剩余流量并生成订阅链接。
-          </p>
          <form action={loginAction} className="stack-lg login-form">
            <label className="field">
              <span>用户名</span>
@@ -59,10 +51,9 @@ export default async function LoginPage({
              <p className="error-banner">用户名或密码错误。</p>
            ) : null}
            <button className="primary-button" type="submit">
-              登录控制台
+              登录
            </button>
          </form>
-          <p className="login-note">管理员与普通用户共用入口，系统会自动跳转到对应面板。</p>
        </article>
      </section>
    </main>
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";

+import { formatLocalDateTime } from "@/lib/datetime";
 import { getRequestOrigin } from "@/lib/request-origin";
 import { buildSubscriptionUrl, describeRemainingTraffic } from "@/lib/subscription";
 import { requireUserSession } from "@/lib/session";
@@ -31,20 +32,11 @@ export default async function MePage() {

  return (
    <main className="me-shell">
-      <div aria-hidden="true" className="me-backdrop">
-        <span className="me-glow me-glow--warm" />
-        <span className="me-glow me-glow--cool" />
-        <span className="me-glow me-glow--light" />
-      </div>
      <section className="me-stage">
        <article className="me-panel me-hero">
          <div className="me-hero-copy">
-            <span className="eyebrow">FEIEPROXY SELF SERVICE</span>
+            <span className="eyebrow">账户中心</span>
            <h1>{user.username}</h1>
-            <p className="page-lede">
-              鹅梯 FeieProxy 用户面板。这里可以查看配额状态、获取订阅链接，并通过
-              Clash URL Scheme 一键导入当前配置。
-            </p>
            <div className="badge-row">
              <span
                className={`status-pill ${
@@ -54,7 +46,7 @@ export default async function MePage() {
                {user.enabled ? "账号已启用" : "账号已禁用"}
              </span>
              <span className="status-pill status-pill--neutral">
-                {user.expires_at ?? "长期有效"}
+                {formatLocalDateTime(user.expires_at, "长期有效")}
              </span>
              <span className="status-pill status-pill--warm">
                {describeRemainingTraffic(user)}
@@ -62,7 +54,7 @@ export default async function MePage() {
            </div>
          </div>
          <div className="me-identity-card">
-            <span className="feature-kicker">ACCOUNT SNAPSHOT</span>
+            <span className="feature-kicker">用户 ID</span>
            <strong className="mono break-all">{user.auth_id}</strong>
            <p className="muted">
              订阅名称：{user.subscription_label || user.username}
@@ -74,18 +66,15 @@ export default async function MePage() {
          <article className="me-panel me-subscription-card">
            <div className="section-title section-title--top">
              <div>
-                <span className="feature-kicker">SUBSCRIPTION</span>
-                <h2>一键导入配置</h2>
+                <span className="feature-kicker">订阅</span>
+                <h2>订阅</h2>
              </div>
              <span className="status-pill status-pill--ink">Clash / Mihomo</span>
            </div>
-            <p className="muted">
-              推荐直接通过按钮唤起支持 `clash://` 的客户端导入。若浏览器拦截了自定义协议，允许一次即可。
-            </p>
            <div className="me-action-row">
              {clashImportUrl ? (
                <a className="primary-button me-action-button" href={clashImportUrl}>
-                  一键导入 Clash
+                  一键导入
                </a>
              ) : (
                <span className="status-pill status-pill--off">订阅暂不可用</span>
@@ -102,21 +91,9 @@ export default async function MePage() {
              ) : null}
            </div>
            <div className="me-link-card">
-              <span className="feature-kicker">SUBSCRIPTION URL</span>
+              <span className="feature-kicker">订阅链接</span>
              <p className="mono break-all">{subscriptionUrl ?? "暂不可用"}</p>
            </div>
-            <div className="me-tip-grid">
-              <div className="me-tip-card">
-                <span className="feature-kicker">TIP 01</span>
-                <strong>客户端未唤起时</strong>
-                <p className="muted">确认已安装支持 `clash://` 的客户端，并允许浏览器打开外部应用。</p>
-              </div>
-              <div className="me-tip-card">
-                <span className="feature-kicker">TIP 02</span>
-                <strong>手动导入也可用</strong>
-                <p className="muted">复制上方订阅链接，在 Clash / Mihomo 客户端中粘贴导入即可。</p>
-              </div>
-            </div>
          </article>

          <div className="me-side-stack">
@@ -145,13 +122,8 @@ export default async function MePage() {
            </article>

            <article className="me-panel me-support-card">
-              <span className="feature-kicker">ACCESS</span>
-              <h2>使用说明</h2>
-              <ul className="me-note-list">
-                <li>域名入口适合网页登录与获取订阅。</li>
-                <li>现有节点鉴权仍可继续使用原来的 `IP:3000` 直连地址。</li>
-                <li>如果订阅内容更新，重新点击导入按钮即可刷新客户端配置。</li>
-              </ul>
+              <span className="feature-kicker">账户</span>
+              <h2>账户</h2>
              <form action="/logout" method="post">
                <button className="ghost-button me-action-button me-action-button--full" type="submit">
                  退出登录