CN-JS-HuiBai/PromdataPanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

优化数据库查询布局

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-12 17:48:43 +08:00
parent b79cb09987
commit e60fa2b982
5 changed files with 136 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
public/css/style.css
View File

@@ -2803,3 +2803,101 @@ input:checked+.slider:before {
justify-content: center;
}
}
/* ---- Source Settings Toggles ---- */
.source-options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
background: rgba(255, 255, 255, 0.03);
padding: 16px;
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
margin-top: 8px;
}
.source-option-item {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
padding: 4px 8px;
border-radius: var(--radius-sm);
}
.source-option-item:hover {
background: rgba(255, 255, 255, 0.03);
}
.source-option-item:hover .source-option-label {
color: var(--text-primary);
}
.source-option-label {
font-size: 0.88rem;
color: var(--text-secondary);
font-weight: 500;
}
.switch-wrapper {
position: relative;
width: 38px;
height: 20px;
flex-shrink: 0;
}
.switch-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.switch-label {
position: absolute;
cursor: pointer;
inset: 0;
background-color: var(--bg-input);
transition: .35s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid var(--border-color);
border-radius: 34px;
}
.switch-label:before {
position: absolute;
content: '';
height: 14px;
width: 14px;
left: 2px;
bottom: 2px;
background-color: var(--text-muted);
transition: .35s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 50%;
}
.switch-input:checked + .switch-label {
background-color: rgba(99, 102, 241, 0.15);
border-color: var(--accent-indigo);
}
.switch-input:checked + .switch-label:before {
transform: translateX(18px);
background-color: var(--accent-indigo);
box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}
/* Light theme support */
:root.light-theme .source-options-grid {
background: rgba(0, 0, 0, 0.02);
}
:root.light-theme .source-option-item:hover {
background: rgba(0, 0, 0, 0.03);
}
:root.light-theme .switch-label:before {
background-color: #94a3b8;
}

43
public/index.html
View File

@@ -476,23 +476,25 @@
<label for="sourceDesc">描述 (可选)</label>
<input type="text" id="sourceDesc" placeholder="数据源描述" autocomplete="off">
</div>
<div class="form-group" id="serverSourceOption"
style="display: flex; align-items: flex-end; padding-bottom: 8px; flex-wrap: wrap; gap: 12px; margin-top: 4px;">
<label
style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
<input type="checkbox" id="isOverviewSource" checked
style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
<span>加入总览统计</span>
</label>
<label
style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap;">
<input type="checkbox" id="isDetailSource" checked
style="width: 16px; height: 16px; accent-color: var(--accent-indigo);">
<span>加入详情展示</span>
</label>
<label id="isServerSourceContainer" style="display: none;">
<input type="checkbox" id="isServerSource" checked disabled>
</label>
<div class="form-group form-group-wide" id="serverSourceOption">
<label style="margin-bottom: 8px;">数据源偏好设置</label>
<div class="source-options-grid">
<label class="source-option-item" title="将此数据源的服务器指标聚合到首页总览中">
<div class="switch-wrapper">
<input type="checkbox" id="isOverviewSource" checked class="switch-input">
<div class="switch-label"></div>
</div>
<span class="source-option-label">加入总览统计</span>
</label>
<label class="source-option-item" title="在服务器详情列表中显示此数据源的服务器">
<div class="switch-wrapper">
<input type="checkbox" id="isDetailSource" checked class="switch-input">
<div class="switch-label"></div>
</div>
<span class="source-option-label">加入详情展示</span>
</label>
<input type="checkbox" id="isServerSource" checked disabled style="display: none;">
</div>
</div>
<div class="form-actions">
<button class="btn btn-test" id="btnTest">测试连接</button>
@@ -582,13 +584,6 @@
<label for="icpFilingInput">ICP 备案号 (如：京ICP备12345678号)</label>
<input type="text" id="icpFilingInput" placeholder="请输入 ICP 备案号">
</div>
<div class="form-group" style="margin-top: 15px;">
<label>网络流量趋势 (24h) 统计数据源</label>
<div id="network-source-selector" class="network-source-list" style="margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; background: var(--bg-input); padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color);">
<div class="loading-inline" style="color: var(--text-muted); font-size: 0.9rem;">加载数据源中...</div>
</div>
<small style="display: block; margin-top: 6px; color: var(--text-muted);">选择参与 24 小时网络流量统计的 Prometheus 数据源。如果不勾选任何项，则统计所有数据源。</small>
</div>
<div class="form-actions" style="margin-top: 25px; display: flex; justify-content: flex-end;">
<button class="btn btn-add" id="btnSaveSiteSettings">保存基础设置</button>
</div>

51
public/js/app.js
View File

@@ -103,7 +103,6 @@
oldPasswordInput: document.getElementById('oldPassword'),
newPasswordInput: document.getElementById('newPassword'),
confirmNewPasswordInput: document.getElementById('confirmNewPassword'),
networkSourceSelector: document.getElementById('network-source-selector'),
btnChangePassword: document.getElementById('btnChangePassword'),
changePasswordMessage: document.getElementById('changePasswordMessage'),
globeContainer: document.getElementById('globeContainer'),
@@ -276,7 +275,7 @@
dom.serverSourceOption.style.display = 'none';
dom.isServerSource.checked = false;
} else {
dom.serverSourceOption.style.display = 'flex';
dom.serverSourceOption.style.display = '';
dom.isServerSource.checked = true;
}
});
@@ -618,6 +617,7 @@
checkAuthStatus();
// Start data fetching
loadSources();
fetchMetrics();
fetchNetworkHistory();
fetchLatency();
@@ -2104,21 +2104,6 @@
if (dom.showPageNameInput) dom.showPageNameInput.value = settings.show_page_name !== undefined ? settings.show_page_name.toString() : "1";
if (dom.requireLoginForServerDetailsInput) dom.requireLoginForServerDetailsInput.value = settings.require_login_for_server_details ? "1" : "0";
// Handle network data sources checkboxes
if (settings.network_data_sources) {
const selected = settings.network_data_sources.split(',').map(s => s.trim());
const checkboxes = dom.networkSourceSelector.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(cb => {
cb.checked = selected.includes(cb.value);
});
// We'll also store this in a temporary place because loadSources might run later
dom.networkSourceSelector.dataset.pendingSelected = settings.network_data_sources;
} else {
const checkboxes = dom.networkSourceSelector.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(cb => cb.checked = false);
dom.networkSourceSelector.dataset.pendingSelected = "";
}
// Handle Theme Priority: localStorage > Site Default
const savedTheme = localStorage.getItem('theme');
const themeToApply = savedTheme || settings.default_theme || 'dark';
@@ -2278,7 +2263,6 @@
p95_type: dom.p95TypeSelect ? dom.p95TypeSelect.value : 'tx',
ps_filing: dom.psFilingInput ? dom.psFilingInput.value.trim() : '',
icp_filing: dom.icpFilingInput ? dom.icpFilingInput.value.trim() : '',
network_data_sources: Array.from(dom.networkSourceSelector.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value).join(','),
show_server_ip: dom.showServerIpInput ? (dom.showServerIpInput.value === "1") : false,
ip_metric_name: dom.ipMetricNameInput ? dom.ipMetricNameInput.value.trim() : null,
ip_label_name: dom.ipLabelNameInput ? dom.ipLabelNameInput.value.trim() : 'address',
@@ -2596,8 +2580,14 @@
async function loadSources() {
try {
if (dom.sourceItems) {
dom.sourceItems.innerHTML = '<div class="source-loading"><div class="dot dot-pulse"></div><span>正在加载数据源...</span></div>';
}
const response = await fetch('/api/sources');
if (response.status === 401) {
if (dom.sourceItems) {
dom.sourceItems.innerHTML = '<div class="source-empty">请登录后管理数据源</div>';
}
promptLogin('登录后可查看和管理数据源');
return;
}
@@ -2608,7 +2598,6 @@
if (dom.totalServersLabel) dom.totalServersLabel.textContent = `服务器总数 (${promSources.length} 数据源)`;
updateSourceFilterOptions(sourcesArray);
renderSources(sourcesArray);
renderNetworkSourceSelector(sourcesArray);
} catch (err) {
console.error('Error loading sources:', err);
}
@@ -2645,26 +2634,6 @@
`).join('');
}
function renderNetworkSourceSelector(sources) {
if (!dom.networkSourceSelector) return;
// Only show Prometheus sources for filtering
const promSources = sources.filter(s => s.type !== 'blackbox');
if (promSources.length === 0) {
dom.networkSourceSelector.innerHTML = '<div style="color: var(--text-muted); font-size: 0.9rem;">暂无可用数据源</div>';
return;
}
const pendingSelected = dom.networkSourceSelector.dataset.pendingSelected ? dom.networkSourceSelector.dataset.pendingSelected.split(',').map(s => s.trim()) : [];
dom.networkSourceSelector.innerHTML = promSources.map(source => `
<label style="display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 8px; border-radius: 4px; background: rgba(255,255,255,0.05); font-size: 0.9rem;">
<input type="checkbox" value="${escapeHtml(source.name)}" ${pendingSelected.includes(source.name) ? 'checked' : ''} style="cursor: pointer;">
<span>${escapeHtml(source.name)}</span>
</label>
`).join('');
}
// ---- Test Connection ----
async function testConnection() {
@@ -2726,7 +2695,7 @@
if (source.type === 'blackbox') {
dom.serverSourceOption.style.display = 'none';
} else {
dom.serverSourceOption.style.display = 'flex';
dom.serverSourceOption.style.display = '';
}
dom.btnAdd.textContent = '保存修改';
@@ -2754,7 +2723,7 @@
dom.sourceDesc.value = '';
if (dom.isOverviewSource) dom.isOverviewSource.checked = true;
if (dom.isDetailSource) dom.isDetailSource.checked = true;
dom.serverSourceOption.style.display = 'flex';
dom.serverSourceOption.style.display = '';
dom.btnAdd.textContent = '添加';
const cancelBtn = document.getElementById('btnCancelEditSource');