1000 lines
31 KiB
HTML
1000 lines
31 KiB
HTML
<!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="首页">«</button>
|
|
<button id="prev-btn" class="btn icon-btn" aria-label="上一页">‹</button>
|
|
<button id="next-btn" class="btn icon-btn" aria-label="下一页">›</button>
|
|
<button id="last-btn" class="btn icon-btn" aria-label="末页">»</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>→</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>
|