<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{.Title}}</title>
    <style>
      :root {
        --bg: #ffffff;
        --panel: #ffffff;
        --line: #e5e7eb;
        --text: #111827;
        --muted: #6b7280;
        --muted-soft: #f8fafc;
        --primary: #2563eb;
        --primary-dark: #1d4ed8;
        --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
        --success-bg: #dcfce7;
        --success-text: #15803d;
        --warn-bg: #fef3c7;
        --warn-text: #b45309;
        --danger-bg: #fee2e2;
        --danger-text: #b91c1c;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
        color: var(--text);
        background: transparent;
      }

      button,
      input {
        font: inherit;
      }

      .wrap {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 44px;
      }

      .topbar-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .search-trigger {
        position: relative;
        width: min(100%, 360px);
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        color: var(--muted);
        box-shadow: var(--shadow-soft);
        cursor: pointer;
      }

      .search-trigger:hover {
        border-color: #d1d5db;
        background: #fbfdff;
      }

      .search-trigger kbd {
        margin-left: auto;
        padding: 2px 6px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--muted-soft);
        color: var(--muted);
        font-size: 12px;
      }

      .avatar-card {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .avatar {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        object-fit: cover;
        border: 1px solid var(--line);
        background: #f3f4f6;
      }

      .avatar-fallback {
        width: 32px;
        height: 32px;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--muted-soft);
        color: var(--text);
        font-size: 12px;
        font-weight: 700;
      }

      .avatar-meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }

      .avatar-name,
      .avatar-email {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .avatar-name {
        font-size: 13px;
        font-weight: 600;
      }

      .avatar-email {
        color: var(--muted);
        font-size: 12px;
      }

      .panel {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: var(--shadow-soft);
      }

      .toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px;
        border-bottom: 1px solid var(--line);
      }

      .toolbar-left,
      .toolbar-right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
      }

      .field,
      .btn {
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: #fff;
        font-size: 14px;
      }

      .field {
        min-width: 260px;
        padding: 0 12px;
        color: var(--text);
        outline: none;
      }

      .field:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
      }

      .btn {
        padding: 0 14px;
        color: var(--text);
        font-weight: 600;
        cursor: pointer;
      }

      .btn:hover:not(:disabled) {
        background: #f9fafb;
      }

      .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }

      .btn-primary {
        border-color: var(--primary);
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #fff;
      }

      .btn-primary:hover:not(:disabled) {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary-dark));
      }

      .btn-warn {
        background: var(--warn-bg);
        color: var(--warn-text);
      }

      .table-wrap {
        flex: 1;
        min-height: 0;
        overflow: auto;
      }

      table {
        width: 100%;
        border-collapse: collapse;
        background: var(--panel);
      }

      thead th {
        height: 44px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        background: var(--panel);
      }

      tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
        font-size: 14px;
      }

      tbody tr:hover {
        background: var(--muted-soft);
      }

      .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }

      .badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
      }

      .badge.ok {
        background: var(--success-bg);
        color: var(--success-text);
      }

      .badge.warn {
        background: var(--warn-bg);
        color: var(--warn-text);
      }

      .badge.danger {
        background: var(--danger-bg);
        color: var(--danger-text);
      }

      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .relation {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #f8fafc;
        white-space: nowrap;
      }

      .empty {
        padding: 40px 16px;
        text-align: center;
        color: var(--muted);
      }

      .pager {
        margin-top: auto;
        display: flex;
        flex-direction: column-reverse;
        gap: 12px;
        padding: 16px;
        border-top: 1px solid var(--line);
        background: var(--panel);
      }

      .pager-summary {
        flex: 1;
        color: var(--muted);
        font-size: 14px;
      }

      .pager-controls {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 12px;
      }

      .pager-page {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text);
        font-size: 14px;
        font-weight: 600;
      }

      .page-input {
        width: 56px;
        min-width: 56px;
        text-align: center;
        font-weight: 600;
      }

      .pager-buttons {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .icon-btn {
        width: 36px;
        min-width: 36px;
        padding: 0;
        font-size: 16px;
        line-height: 1;
      }

      .dialog-mask {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(15, 23, 42, 0.35);
        z-index: 999;
      }

      .dialog-mask.is-open {
        display: flex;
      }

      .dialog {
        width: min(680px, 100%);
        max-height: min(78vh, 720px);
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
        box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
      }

      .dialog-head {
        padding: 14px;
        border-bottom: 1px solid var(--line);
      }

      .dialog-search {
        width: 100%;
        min-width: 0;
      }

      .dialog-list {
        max-height: 56vh;
        overflow: auto;
        padding: 8px;
      }

      .dialog-empty {
        padding: 28px 14px;
        text-align: center;
        color: var(--muted);
      }

      .menu-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        text-align: left;
      }

      .menu-item:hover {
        background: var(--muted-soft);
      }

      .menu-title {
        font-size: 14px;
        font-weight: 600;
      }

      .menu-path {
        color: var(--muted);
        font-size: 12px;
      }

      @media (min-width: 640px) {
        .pager {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
        }

        .pager-controls {
          flex-direction: row;
          gap: 24px;
        }
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="topbar">
        <button id="open-menu-search" class="search-trigger" type="button">
          <span>搜索菜单和功能</span>
          <kbd>Ctrl K</kbd>
        </button>
        <div class="topbar-right">
          <div class="avatar-card">
            <img id="user-avatar" class="avatar" alt="avatar" />
            <div id="avatar-fallback" class="avatar-fallback">AD</div>
            <div class="avatar-meta">
              <div id="user-name" class="avatar-name">Admin</div>
              <div id="user-email" class="avatar-email">加载中...</div>
            </div>
          </div>
        </div>
      </div>

      <div class="panel">
        <div class="toolbar">
          <div class="toolbar-left">
            <input id="keyword" class="field" placeholder="搜索用户 ID / 邮箱" />
          </div>
          <div class="toolbar-right" id="toolbar-actions"></div>
        </div>

        <div class="table-wrap">
          <table>
            <thead id="thead"></thead>
            <tbody id="tbody"></tbody>
          </table>
        </div>

        <div class="pager">
          <div class="pager-summary" id="summary">加载中...</div>
          <div class="pager-controls">
            <div class="pager-page">
              <span>第</span>
              <input id="page-input" class="field page-input" inputmode="numeric" />
              <span id="page-total">/ 1 页</span>
            </div>
            <div class="pager-buttons">
              <button id="first-btn" class="btn icon-btn" aria-label="首页">&laquo;</button>
              <button id="prev-btn" class="btn icon-btn" aria-label="上一页">&lsaquo;</button>
              <button id="next-btn" class="btn icon-btn" aria-label="下一页">&rsaquo;</button>
              <button id="last-btn" class="btn icon-btn" aria-label="末页">&raquo;</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="menu-dialog" class="dialog-mask" aria-hidden="true">
      <div class="dialog">
        <div class="dialog-head">
          <input id="menu-search-input" class="field dialog-search" placeholder="搜索菜单和功能" />
        </div>
        <div id="menu-list" class="dialog-list"></div>
      </div>
    </div>

    <script>
      const kind = "{{.Kind}}";
      const securePath = "{{.SecurePath}}";
      const apiV1Base = "/api/v1";
      const apiV2Base = "/api/v2";
      const apiBase = `${apiV2Base}/${securePath}`;
      const state = { page: 1, lastPage: 1, total: 0, user: null };
      const menuItems = [
        { title: "系统配置", path: "/config/system" },
        { title: "公告管理", path: "/config/notice" },
        { title: "知识库管理", path: "/config/knowledge" },
        { title: "节点管理", path: "/server/manage" },
        { title: "权限组管理", path: "/server/group" },
        { title: "路由管理", path: "/server/route" },
        { title: "套餐管理", path: "/finance/plan" },
        { title: "订单管理", path: "/finance/order" },
        { title: "用户管理", path: "/user/manage" },
        { title: "工单管理", path: "/user/ticket" },
        { title: "实名认证", path: "/user/realname" },
        { title: "在线设备", path: "/user/online-devices" },
        { title: "IPv6 子账号", path: "/user/ipv6-subscription" },
      ];

      function parseToken(rawValue) {
        if (!rawValue || typeof rawValue !== "string") return "";
        const trimmed = rawValue.trim();
        if (!trimmed) return "";
        if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
          try {
            const parsed = JSON.parse(trimmed);
            const nested = parsed && (parsed.value || parsed.token || parsed.access_token || parsed.accessToken);
            if (nested) return String(nested).startsWith("Bearer ") ? nested : `Bearer ${nested}`;
          } catch (error) {}
        }
        return trimmed.startsWith("Bearer ") ? trimmed : `Bearer ${trimmed}`;
      }

      function getAdminToken() {
        const keys = [
          "XBOARD_ACCESS_TOKEN",
          "Xboard_access_token",
          "XBOARD_ADMIN_ACCESS_TOKEN",
          "xboard_access_token",
          "__gopanel_admin_auth__",
        ];
        for (const storage of [window.localStorage, window.sessionStorage]) {
          if (!storage) continue;
          for (const key of keys) {
            const token = parseToken(storage.getItem(key));
            if (token) return token;
          }
        }
        return "";
      }

      async function request(url, method = "GET", body) {
        const token = getAdminToken();
        const response = await fetch(url, {
          method,
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: token,
            "X-Requested-With": "XMLHttpRequest",
          },
          body: body ? JSON.stringify(body) : undefined,
        });
        const payload = await response.json().catch(() => null);
        if (!response.ok) {
          throw new Error((payload && (payload.message || payload.msg)) || `HTTP ${response.status}`);
        }
        return payload && typeof payload.data !== "undefined" ? payload.data : payload;
      }

      async function loadCurrentUser() {
        try {
          const user = await request(`${apiV2Base}/user/info`);
          state.user = user || {};
          const email = state.user.email || "admin@example.com";
          const name = email.includes("@") ? email.split("@")[0] : email;
          const initials = (name || "AD").slice(0, 2).toUpperCase();
          document.getElementById("user-name").textContent = name || "Admin";
          document.getElementById("user-email").textContent = email;
          document.getElementById("avatar-fallback").textContent = initials;

          const avatar = document.getElementById("user-avatar");
          if (state.user.avatar_url) {
            avatar.src = state.user.avatar_url;
            avatar.style.display = "block";
          } else {
            avatar.style.display = "none";
            document.getElementById("avatar-fallback").style.display = "inline-flex";
          }
          avatar.onerror = () => {
            avatar.style.display = "none";
            document.getElementById("avatar-fallback").style.display = "inline-flex";
          };
          avatar.onload = () => {
            avatar.style.display = "block";
            document.getElementById("avatar-fallback").style.display = "none";
          };
        } catch (error) {
          document.getElementById("user-email").textContent = "管理员";
          document.getElementById("avatar-fallback").style.display = "inline-flex";
        }
      }

      function statusBadge(text) {
        const normalized = String(text || "-").toLowerCase();
        let cls = "danger";
        if (/(approved|active|enabled|ready)/.test(normalized)) cls = "ok";
        else if (/(pending|eligible|unverified)/.test(normalized)) cls = "warn";
        return `<span class="badge ${cls}">${text || "-"}</span>`;
      }

      function relationChip(left, right) {
        return `<span class="relation mono">${left}<span>&rarr;</span>${right}</span>`;
      }

      function setPagination(pagination) {
        state.page = pagination.current || 1;
        state.lastPage = pagination.last_page || 1;
        state.total = pagination.total || 0;
        document.getElementById("summary").textContent = `共 ${state.total} 条数据`;
        document.getElementById("page-input").value = String(state.page);
        document.getElementById("page-total").textContent = `/ ${state.lastPage} 页`;
        document.getElementById("first-btn").disabled = state.page <= 1;
        document.getElementById("prev-btn").disabled = state.page <= 1;
        document.getElementById("next-btn").disabled = state.page >= state.lastPage;
        document.getElementById("last-btn").disabled = state.page >= state.lastPage;
      }

      function jumpToPage(value) {
        const nextPage = Number.parseInt(String(value || "").trim(), 10);
        if (Number.isNaN(nextPage)) {
          document.getElementById("page-input").value = String(state.page);
          return;
        }
        const targetPage = Math.min(Math.max(nextPage, 1), Math.max(state.lastPage, 1));
        loadData(targetPage);
      }

      function setupToolbar() {
        const toolbar = document.getElementById("toolbar-actions");
        if (kind === "realname") {
          toolbar.innerHTML = `
            <button class="btn btn-warn" id="sync-all-btn">同步全部</button>
            <button class="btn btn-primary" id="approve-all-btn">全部通过</button>
          `;
          document.getElementById("sync-all-btn").onclick = async () => {
            await request(`${apiBase}/realname/sync-all`, "POST", {});
            await loadData(state.page);
          };
          document.getElementById("approve-all-btn").onclick = async () => {
            await request(`${apiBase}/realname/approve-all`, "POST", {});
            await loadData(state.page);
          };
        } else {
          toolbar.innerHTML = `<button class="btn" id="refresh-btn">刷新</button>`;
          document.getElementById("refresh-btn").onclick = () => loadData(state.page);
        }
      }

      function endpoint(page) {
        const keyword = encodeURIComponent(document.getElementById("keyword").value.trim());
        if (kind === "realname") return `${apiBase}/realname/records?page=${page}&per_page=20&keyword=${keyword}`;
        if (kind === "online-devices") return `${apiBase}/user-online-devices/users?page=${page}&per_page=20&keyword=${keyword}`;
        return `${apiBase}/user-add-ipv6-subscription/users?page=${page}&per_page=20&keyword=${keyword}`;
      }

      function renderRealname(payload) {
        const list = payload.data || [];
        document.getElementById("thead").innerHTML = `
          <tr>
            <th>用户 ID</th>
            <th>邮箱</th>
            <th>姓名</th>
            <th>证件号</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        `;
        document.getElementById("tbody").innerHTML = list.length
          ? list
              .map(
                (item) => `
          <tr>
            <td class="mono">${item.id}</td>
            <td>${item.email || "-"}</td>
            <td>${item.real_name || "-"}</td>
            <td class="mono">${item.identity_no_masked || "-"}</td>
            <td>${statusBadge(item.status_label || item.status)}</td>
            <td>
              <div class="actions">
                <button class="btn btn-primary" onclick="realnameReview(${item.id}, 'approved')">通过</button>
                <button class="btn" onclick="realnameReview(${item.id}, 'rejected')">驳回</button>
                <button class="btn" onclick="realnameReset(${item.id})">重置</button>
              </div>
            </td>
          </tr>`,
              )
              .join("")
          : `<tr><td colspan="6" class="empty">暂无数据</td></tr>`;
        return payload.pagination || { current: 1, last_page: 1, total: list.length };
      }

      function renderOnlineDevices(payload) {
        const list = payload.list || [];
        document.getElementById("thead").innerHTML = `
          <tr>
            <th>用户 ID</th>
            <th>邮箱</th>
            <th>套餐</th>
            <th>在线 IP</th>
            <th>数量</th>
            <th>最后在线</th>
          </tr>
        `;
        document.getElementById("tbody").innerHTML = list.length
          ? list
              .map(
                (item) => `
          <tr>
            <td class="mono">${item.id}</td>
            <td>${item.email || "-"}</td>
            <td>${item.subscription_name || "-"}</td>
            <td>${(item.online_devices || []).join("<br>") || "-"}</td>
            <td class="mono">${item.online_count || 0}</td>
            <td>${item.last_online_text || "-"}</td>
          </tr>`,
              )
              .join("")
          : `<tr><td colspan="6" class="empty">暂无数据</td></tr>`;
        return payload.pagination || { current: 1, last_page: 1, total: list.length };
      }

      function renderIPv6(payload) {
        const list = payload.list || [];
        document.getElementById("thead").innerHTML = `
          <tr>
            <th>用户 ID</th>
            <th>主账号</th>
            <th>IPv6 套餐</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        `;
        document.getElementById("tbody").innerHTML = list.length
          ? list
              .map(
                (item) => {
                  const isActive = item.is_active || item.status === "active";
                  const isDisabled = item.status === "disabled";
                  let actionButtons = "";
                  if (isActive) {
                    actionButtons = `
                      <button class="btn" onclick="ipv6Disable(${item.id})">关闭</button>
                      <button class="btn" onclick="ipv6SyncPassword(${item.id})">同步密码</button>
                    `;
                  } else {
                    actionButtons = `
                      <button class="btn btn-primary" onclick="ipv6ShowEnableDialog(${item.id}, '${(item.email || '').replace(/'/g, "\\'")}')">开通</button>
                    `;
                  }
                  if (isDisabled) {
                    actionButtons = `
                      <button class="btn btn-primary" onclick="ipv6ShowEnableDialog(${item.id}, '${(item.email || '').replace(/'/g, "\\'")}')">重新开通</button>
                    ` + actionButtons;
                  }
                  return `
          <tr>
            <td class="mono">${item.id}</td>
            <td>${item.email || "-"}</td>
            <td>${item.plan_name || "-"}</td>
            <td>${statusBadge(item.status_label || item.status)}</td>
            <td>
              <div class="actions">
                ${actionButtons}
              </div>
            </td>
          </tr>`;
                },
              )
              .join("")
          : `<tr><td colspan="5" class="empty">暂无数据</td></tr>`;
        return payload.pagination || { current: 1, last_page: 1, total: list.length };
      }

      let ipv6Plans = [];
      async function loadIpv6Plans() {
        if (ipv6Plans.length > 0) return;
        try {
          const data = await request(`${apiBase}/plan/fetch`);
          ipv6Plans = Array.isArray(data) ? data : (data && data.data ? data.data : []);
        } catch (e) {
          ipv6Plans = [];
        }
      }

      function ipv6ShowEnableDialog(userId, email) {
        loadIpv6Plans().then(() => {
          const options = ipv6Plans.map(p => `<option value="${p.id}">${p.name || p.id}</option>`).join("");
          const dialogHtml = `
            <div id="ipv6-enable-dialog" class="dialog-mask is-open" style="z-index:1000">
              <div class="dialog" style="width:min(420px,100%);max-height:none">
                <div style="padding:20px">
                  <h3 style="margin:0 0 8px">开通 IPv6 子账号</h3>
                  <p style="margin:0 0 16px;color:var(--muted);font-size:14px">用户: <strong>${email || userId}</strong></p>
                  <label style="display:block;margin-bottom:6px;font-size:13px;font-weight:600">选择 IPv6 套餐</label>
                  <select id="ipv6-plan-select" class="field" style="width:100%;margin-bottom:20px">
                    <option value="0">使用默认套餐</option>
                    ${options}
                  </select>
                  <div style="display:flex;gap:10px;justify-content:flex-end">
                    <button class="btn" onclick="ipv6CloseEnableDialog()">取消</button>
                    <button class="btn btn-primary" onclick="ipv6ConfirmEnable(${userId})">确认开通</button>
                  </div>
                </div>
              </div>
            </div>
          `;
          document.body.insertAdjacentHTML("beforeend", dialogHtml);
        });
      }

      function ipv6CloseEnableDialog() {
        const dialog = document.getElementById("ipv6-enable-dialog");
        if (dialog) dialog.remove();
      }

      async function ipv6ConfirmEnable(userId) {
        const select = document.getElementById("ipv6-plan-select");
        const planId = select ? Number(select.value) || 0 : 0;
        ipv6CloseEnableDialog();
        await request(`${apiBase}/user-add-ipv6-subscription/enable/${userId}`, "POST", { plan_id: planId });
        await loadData(state.page);
      }

      async function ipv6Enable(id) {
        await request(`${apiBase}/user-add-ipv6-subscription/enable/${id}`, "POST", {});
        await loadData(state.page);
      }

      async function ipv6Disable(id) {
        if (!confirm("确认关闭该用户的 IPv6 子账号？（软禁用，可恢复）")) return;
        await request(`${apiBase}/user-add-ipv6-subscription/disable/${id}`, "POST", {});
        await loadData(state.page);
      }

      async function ipv6SyncPassword(id) {
        await request(`${apiBase}/user-add-ipv6-subscription/sync-password/${id}`, "POST", {});
        await loadData(state.page);
      }

      async function loadData(page = 1) {
        const payload = await request(endpoint(page));
        const pagination =
          kind === "realname"
            ? renderRealname(payload)
            : kind === "online-devices"
              ? renderOnlineDevices(payload)
              : renderIPv6(payload);
        setPagination(pagination);
      }

      async function realnameReview(id, status) {
        const reason = status === "rejected" ? window.prompt("请输入驳回原因", "") || "" : "";
        await request(`${apiBase}/realname/review/${id}`, "POST", { status, reason });
        await loadData(state.page);
      }

      async function realnameReset(id) {
        await request(`${apiBase}/realname/reset/${id}`, "POST", {});
        await loadData(state.page);
      }

      function openMenuDialog() {
        document.getElementById("menu-dialog").classList.add("is-open");
        document.getElementById("menu-dialog").setAttribute("aria-hidden", "false");
        document.getElementById("menu-search-input").focus();
        renderMenuList(document.getElementById("menu-search-input").value);
      }

      function closeMenuDialog() {
        document.getElementById("menu-dialog").classList.remove("is-open");
        document.getElementById("menu-dialog").setAttribute("aria-hidden", "true");
      }

      function navigateTo(path) {
        const target = `/${securePath}${path}`;
        if (window.top && window.top !== window) {
          window.top.location.assign(target);
        } else {
          window.location.assign(target);
        }
      }

      function renderMenuList(keyword = "") {
        const list = document.getElementById("menu-list");
        const normalized = String(keyword || "").trim().toLowerCase();
        const filtered = menuItems.filter((item) => {
          const haystack = `${item.title} ${item.path}`.toLowerCase();
          return !normalized || haystack.includes(normalized);
        });
        list.innerHTML = filtered.length
          ? filtered
              .map(
                (item) => `
            <button class="menu-item" type="button" data-path="${item.path}">
              <div>
                <div class="menu-title">${item.title}</div>
                <div class="menu-path">${item.path}</div>
              </div>
              <span class="menu-path">进入</span>
            </button>`,
              )
              .join("")
          : `<div class="dialog-empty">没有匹配的菜单或功能</div>`;
      }

      document.getElementById("open-menu-search").addEventListener("click", openMenuDialog);
      document.getElementById("menu-dialog").addEventListener("click", (event) => {
        if (event.target.id === "menu-dialog") {
          closeMenuDialog();
        }
      });
      document.getElementById("menu-search-input").addEventListener("input", (event) => {
        renderMenuList(event.target.value);
      });
      document.getElementById("menu-list").addEventListener("click", (event) => {
        const button = event.target.closest("[data-path]");
        if (!button) return;
        closeMenuDialog();
        navigateTo(button.getAttribute("data-path"));
      });
      document.addEventListener("keydown", (event) => {
        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
          event.preventDefault();
          openMenuDialog();
        }
        if (event.key === "Escape") {
          closeMenuDialog();
        }
      });

      document.getElementById("keyword").addEventListener("keydown", (event) => {
        if (event.key === "Enter") {
          event.preventDefault();
          loadData(1);
        }
      });
      document.getElementById("page-input").addEventListener("keydown", (event) => {
        if (event.key === "Enter") {
          event.preventDefault();
          jumpToPage(event.target.value);
        }
      });
      document.getElementById("page-input").addEventListener("blur", (event) => {
        jumpToPage(event.target.value);
      });
      document.getElementById("first-btn").onclick = () => state.page > 1 && loadData(1);
      document.getElementById("prev-btn").onclick = () => state.page > 1 && loadData(state.page - 1);
      document.getElementById("next-btn").onclick = () => state.page < state.lastPage && loadData(state.page + 1);
      document.getElementById("last-btn").onclick = () => state.page < state.lastPage && loadData(state.lastPage);

      setupToolbar();
      loadCurrentUser();
      loadData().catch((error) => {
        document.getElementById("summary").textContent = error.message || "加载失败";
        document.getElementById("page-input").value = "1";
        document.getElementById("page-total").textContent = "/ 1 页";
        document.getElementById("tbody").innerHTML = `<tr><td colspan="6" class="empty">${error.message || "加载失败"}</td></tr>`;
      });
    </script>
  </body>
</html>
