hy2-panel/app/admin/users/page.tsx

import { getRequestOrigin } from "@/lib/request-origin";
import {
  buildSubscriptionUrl,
  describeRemainingTraffic,
} from "@/lib/subscription";
import {
  formatBytes,
  listUsers,
  toDatetimeLocalValue,
} from "@/lib/store";

import {
  createUserAction,
  deleteUserAction,
  resetUserPasswordAction,
  updateUserAction,
} from "./actions";

function getUserPills(user: {
  enabled: number;
  is_admin: number;
  expires_at: string | null;
}) {
  return [
    {
      label: user.enabled ? "已启用" : "已禁用",
      className: `status-pill ${user.enabled ? "status-pill--ok" : "status-pill--danger"}`,
    },
    user.is_admin
      ? { label: "管理员", className: "status-pill status-pill--ink" }
      : null,
    user.expires_at
      ? { label: 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));
}

export default async function UsersPage() {
  const [users, origin] = await Promise.all([listUsers(), getRequestOrigin()]);

  return (
    <main className="page-stack">
      <section className="hero-panel">
        <div className="hero-copy">
          <span className="eyebrow">USERS</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>
          </div>
        </div>
        <div className="hero-aside">
          <div className="stat-tile">
            <span>用户数</span>
            <strong>{users.length}</strong>
          </div>
          <div className="stat-tile">
            <span>启用中</span>
            <strong>{users.filter((user) => user.enabled).length}</strong>
          </div>
        </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>

      <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>
                  ))}
                </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>
        ))}
      </section>
    </main>
  );
}