基本功能已初步完善
This commit is contained in:
CN-JS-HuiBai
@@ -7,14 +7,14 @@
|
||||
<script>
|
||||
window.settings = {{.SettingsJS}};
|
||||
</script>
|
||||
<script src="/admin-assets/locales/zh-CN.js"></script>
|
||||
<script src="/admin-assets/locales/en-US.js"></script>
|
||||
<script src="/admin-assets/locales/ru-RU.js"></script>
|
||||
<script src="/admin-assets/locales/ko-KR.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/admin-assets/assets/index-DTPKq_WI.css">
|
||||
<script src="/admin-assets/locales/zh-CN.js?v={{.AssetNonce}}"></script>
|
||||
<script src="/admin-assets/locales/en-US.js?v={{.AssetNonce}}"></script>
|
||||
<script src="/admin-assets/locales/ru-RU.js?v={{.AssetNonce}}"></script>
|
||||
<script src="/admin-assets/locales/ko-KR.js?v={{.AssetNonce}}"></script>
|
||||
<link rel="stylesheet" crossorigin href="/admin-assets/assets/index-DTPKq_WI.css?v={{.AssetNonce}}">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" crossorigin src="/admin-assets/reverse/output/index-CO3BwsT2.pretty.js"></script>
|
||||
<script type="module" crossorigin src="/admin-assets/reverse/output/index-CO3BwsT2.pretty.js?v={{.AssetNonce}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
926
frontend/templates/admin_plugin_panel.html
Normal file
926
frontend/templates/admin_plugin_panel.html
Normal file
@@ -0,0 +1,926 @@
|
||||
<!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>主从关系</th>
|
||||
<th>主账号</th>
|
||||
<th>IPv6 账号</th>
|
||||
<th>套餐</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
`;
|
||||
document.getElementById("tbody").innerHTML = list.length
|
||||
? list
|
||||
.map(
|
||||
(item) => `
|
||||
<tr>
|
||||
<td>${relationChip(item.id, item.shadow_user_id || "-")}</td>
|
||||
<td>${item.email || "-"}</td>
|
||||
<td class="mono">${item.ipv6_email || "-"}</td>
|
||||
<td>${item.plan_name || "-"}</td>
|
||||
<td>${statusBadge(item.status_label || item.status)}</td>
|
||||
<td>
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary" onclick="ipv6Enable(${item.id})">开通并同步</button>
|
||||
<button class="btn" onclick="ipv6SyncPassword(${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 };
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
async function ipv6Enable(id) {
|
||||
await request(`${apiBase}/user-add-ipv6-subscription/enable/${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);
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user