feat: 登录门认证 + 每套试卷独立满分等增强
- 登录门：进入页面先输入系统网址/API路由/账号/密码，测试连接通过后才显示登录按钮，登录后才进入主界面；密码每次需输入，防止依赖一次配置直接查看数据 - 每套试卷独立满分配置（设置中按当前试卷单独设置，合格率按 ≥60% 满分计算） - 班级联动统计与面板计数（成绩明细/缺考名单标题计数随班级过滤） - 移除最高/最低分获得者显示 - 平均用时不换行（避免“秒”字换行） - 卷王地址默认 https://exam.nxxy335.top，默认勾选校验 HTTPS 证书 - 统计卡片含合格率（≥60% 满分） - .gitignore 排除 data/（账号密码/令牌/学生名单，禁止入库）
This commit is contained in:
+692
@@ -0,0 +1,692 @@
|
||||
/* NY 问卷考试系统数据平台 - 前端逻辑 */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const $ = (s, r) => (r || document).querySelector(s);
|
||||
const $$ = (s, r) => Array.prototype.slice.call((r || document).querySelectorAll(s));
|
||||
|
||||
const state = {
|
||||
projects: [],
|
||||
questions: [],
|
||||
rows: [],
|
||||
absent: [],
|
||||
unmatched: [],
|
||||
roster: [], // 完整名单（含班级），用于按班级重算统计
|
||||
prevMap: {}, // sid -> 摘要，用于高亮变化
|
||||
prevSids: new Set(), // 上一次刷新出现的 sid
|
||||
newSids: new Set(), // 本次刷新新增的 sid（绿色底纹）
|
||||
hasPrev: false,
|
||||
fullScore: 100,
|
||||
sortKey: 'submit_ts',
|
||||
sortAsc: false,
|
||||
timer: null,
|
||||
loading: false,
|
||||
lastSig: ''
|
||||
};
|
||||
|
||||
/* ---------------- 通用 ---------------- */
|
||||
async function api(action, opts) {
|
||||
opts = opts || {};
|
||||
const init = { method: opts.method || 'GET' };
|
||||
if (opts.body) {
|
||||
init.headers = { 'Content-Type': 'application/json' };
|
||||
init.body = JSON.stringify(opts.body);
|
||||
}
|
||||
if (opts.form) {
|
||||
init.method = 'POST';
|
||||
init.body = opts.form;
|
||||
}
|
||||
let url = 'api.php?action=' + encodeURIComponent(action);
|
||||
if (opts.params) {
|
||||
for (const k in opts.params) {
|
||||
if (opts.params[k] !== '' && opts.params[k] != null) {
|
||||
url += '&' + k + '=' + encodeURIComponent(opts.params[k]);
|
||||
}
|
||||
}
|
||||
}
|
||||
const res = await fetch(url, init);
|
||||
const text = await res.text();
|
||||
let json;
|
||||
try { json = JSON.parse(text); } catch (e) {
|
||||
throw new Error('服务端返回异常（可能 PHP 报错）：' + text.slice(0, 300));
|
||||
}
|
||||
if (!json.ok) throw new Error(json.msg || '请求失败');
|
||||
return json.data;
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
|
||||
({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||||
}
|
||||
|
||||
function setConn(cls, text) {
|
||||
const el = $('#conn');
|
||||
el.className = 'conn ' + cls;
|
||||
el.innerHTML = '<i></i><span>' + esc(text) + '</span>';
|
||||
}
|
||||
|
||||
function showAlert(msg, type) {
|
||||
const el = $('#alert');
|
||||
if (!msg) { el.classList.add('hidden'); return; }
|
||||
el.textContent = msg;
|
||||
el.className = 'alert' + (type === 'info' ? ' info' : '');
|
||||
}
|
||||
|
||||
/* ---------------- 问卷列表 ---------------- */
|
||||
async function loadProjects() {
|
||||
setConn('conn-load', '连接中…');
|
||||
try {
|
||||
const list = await api('projects');
|
||||
state.projects = list || [];
|
||||
const sel = $('#projectSel');
|
||||
const keep = sel.value;
|
||||
sel.innerHTML = '';
|
||||
if (!state.projects.length) {
|
||||
sel.innerHTML = '<option value="">（没有获取到问卷，请检查设置）</option>';
|
||||
} else {
|
||||
const ph = document.createElement('option');
|
||||
ph.value = ''; ph.textContent = '请选择问卷 / 考试';
|
||||
sel.appendChild(ph);
|
||||
state.projects.forEach(p => {
|
||||
const o = document.createElement('option');
|
||||
o.value = p.id;
|
||||
o.textContent = (p.mode ? '[' + p.mode + '] ' : '') + p.name + '（' + (p.total || 0) + '份）';
|
||||
sel.appendChild(o);
|
||||
});
|
||||
}
|
||||
if (keep && state.projects.some(p => p.id === keep)) sel.value = keep;
|
||||
else if (state.deeplinkProject && state.projects.some(p => p.id === state.deeplinkProject)) sel.value = state.deeplinkProject;
|
||||
setConn('conn-on', '已连接 · ' + state.projects.length + ' 个问卷');
|
||||
showAlert('');
|
||||
if (sel.value) refresh();
|
||||
} catch (e) {
|
||||
setConn('conn-err', '连接失败');
|
||||
showAlert('无法连接卷王系统：' + e.message + '\n请点击右上角【设置】检查系统地址、接口前缀与账号密码。');
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------- 数据刷新 ---------------- */
|
||||
async function refresh(silent) {
|
||||
const pid = $('#projectSel').value;
|
||||
if (!pid) return;
|
||||
if (state.loading) return;
|
||||
state.loading = true;
|
||||
if (!silent) setConn('conn-load', '拉取数据…');
|
||||
try {
|
||||
const d = await api('data', { params: { projectId: pid, nameQid: $('#nameFieldSel').value } });
|
||||
state.questions = d.questions || [];
|
||||
state.rows = d.rows || [];
|
||||
state.absent = d.absent || [];
|
||||
state.unmatched = d.unmatched || [];
|
||||
state.roster = d.roster || [];
|
||||
state.fullScore = (d.config && d.config.full_score) ? (parseInt(d.config.full_score, 10) || 100) : 100;
|
||||
|
||||
// 计算本次刷新新增的 sid（用于绿色底纹）；首次加载不标记
|
||||
const cur = new Set(state.rows.map(r => r.sid).filter(Boolean));
|
||||
if (state.hasPrev) state.newSids = new Set(Array.from(cur).filter(s => !state.prevSids.has(s)));
|
||||
else state.newSids = new Set();
|
||||
state.hasPrev = true;
|
||||
|
||||
renderNameFields(d);
|
||||
renderStats();
|
||||
renderTable();
|
||||
state.prevSids = cur;
|
||||
populateClasses();
|
||||
renderAbsent();
|
||||
renderUnmatched();
|
||||
renderHints();
|
||||
|
||||
$('#lastUpdate').textContent = d.updated_at;
|
||||
setConn('conn-on', '实时 · ' + d.project.name);
|
||||
showAlert('');
|
||||
} catch (e) {
|
||||
if (!silent) setConn('conn-err', '数据获取失败');
|
||||
showAlert(e.message);
|
||||
} finally {
|
||||
state.loading = false;
|
||||
$('#liveDot').classList.add('on');
|
||||
setTimeout(() => $('#liveDot').classList.remove('on'), 900);
|
||||
}
|
||||
}
|
||||
|
||||
function renderNameFields(d) {
|
||||
const sel = $('#nameFieldSel');
|
||||
const keep = sel.value;
|
||||
sel.innerHTML = '<option value="">自动识别</option>';
|
||||
const cands = d.name_candidates || [];
|
||||
cands.forEach(q => {
|
||||
const o = document.createElement('option');
|
||||
o.value = q.id;
|
||||
o.textContent = '姓名题：' + (q.title || q.id);
|
||||
sel.appendChild(o);
|
||||
});
|
||||
(d.questions || []).forEach(q => {
|
||||
if (cands.some(c => c.id === q.id)) return;
|
||||
const o = document.createElement('option');
|
||||
o.value = q.id;
|
||||
o.textContent = (q.title || q.id) + '（' + (q.type || '') + '）';
|
||||
sel.appendChild(o);
|
||||
});
|
||||
if (keep) sel.value = keep;
|
||||
else if (state.deeplinkQid) sel.value = state.deeplinkQid;
|
||||
else if (d.name_qid) sel.value = d.name_qid;
|
||||
}
|
||||
|
||||
function populateClasses() {
|
||||
const sel = $('#clsSel');
|
||||
const cur = sel.value;
|
||||
const set = new Set();
|
||||
(state.roster || []).forEach(s => { if (s.cls) set.add(s.cls); });
|
||||
const vals = Array.from(set).sort((a, b) => a.localeCompare(b, 'zh', { numeric: true }));
|
||||
sel.innerHTML = '<option value="">全部班级</option>' +
|
||||
vals.map(v => '<option value="' + esc(v) + '">' + esc(v) + '</option>').join('');
|
||||
if (vals.indexOf(cur) >= 0) sel.value = cur;
|
||||
else sel.value = '';
|
||||
}
|
||||
|
||||
// 按当前所选班级（或无）客户端重算统计卡片
|
||||
function computeDisplayStats(cls) {
|
||||
const allStudents = state.roster || [];
|
||||
const rows = cls ? state.rows.filter(r => (r.cls || '') === cls) : state.rows;
|
||||
const students = cls ? allStudents.filter(s => (s.cls || '') === cls) : allStudents;
|
||||
const total = students.length;
|
||||
const submitted = rows.length;
|
||||
const absent = Math.max(0, total - submitted);
|
||||
const rate = total > 0 ? Math.round(submitted / total * 1000) / 10 : 0;
|
||||
|
||||
const scores = rows.map(r => r.score).filter(v => v !== null && v !== undefined);
|
||||
const avg = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length * 100) / 100 : null;
|
||||
|
||||
const full = state.fullScore || 100;
|
||||
const passCount = rows.filter(r => r.score !== null && r.score !== undefined && r.score >= 0.6 * full).length;
|
||||
const passRate = submitted > 0 ? Math.round(passCount / submitted * 1000) / 10 : 0;
|
||||
|
||||
let maxScore = null, minScore = null;
|
||||
const maxNames = [], minNames = [];
|
||||
rows.forEach(r => {
|
||||
if (r.score === null || r.score === undefined) return;
|
||||
if (maxScore === null || r.score > maxScore) { maxScore = r.score; maxNames.length = 0; maxNames.push(r.name); }
|
||||
else if (r.score === maxScore) maxNames.push(r.name);
|
||||
if (minScore === null || r.score < minScore) { minScore = r.score; minNames.length = 0; minNames.push(r.name); }
|
||||
else if (r.score === minScore) minNames.push(r.name);
|
||||
});
|
||||
|
||||
const durs = rows.map(r => r.duration).filter(v => v !== null && v !== undefined);
|
||||
const avgDur = durs.length ? Math.round(durs.reduce((a, b) => a + b, 0) / durs.length) : null;
|
||||
|
||||
return {
|
||||
total, submitted, absent, rate, avg, passRate,
|
||||
maxScore, minScore, maxNames, minNames, avgDur
|
||||
};
|
||||
}
|
||||
|
||||
function renderStats() {
|
||||
const cls = $('#clsSel').value;
|
||||
const st = computeDisplayStats(cls);
|
||||
const set = (id, v) => { $(id).textContent = v; };
|
||||
set('#sTotal', st.total);
|
||||
set('#sSubmit', st.submitted);
|
||||
set('#sAbsent', st.absent);
|
||||
set('#sRate', st.rate + '%');
|
||||
set('#sAvg', st.avg == null ? '-' : st.avg);
|
||||
set('#sMax', st.maxScore == null ? '-' : st.maxScore);
|
||||
set('#sMin', st.minScore == null ? '-' : st.minScore);
|
||||
set('#sPass', st.passRate + '%');
|
||||
set('#sDur', st.avgDur == null ? '-' : fmtDur(st.avgDur));
|
||||
}
|
||||
|
||||
// 各面板计数文字按所选班级过滤（成绩明细 / 缺考名单）
|
||||
function renderHints() {
|
||||
const cls = $('#clsSel').value;
|
||||
const rowsForCls = cls ? state.rows.filter(r => (r.cls || '') === cls) : state.rows;
|
||||
const rosterForCls = cls ? (state.roster || []).filter(s => (s.cls || '') === cls) : (state.roster || []);
|
||||
const absentForCls = cls ? state.absent.filter(a => (a.cls || '') === cls) : state.absent;
|
||||
$('#tableHint').textContent = '共 ' + rowsForCls.length + ' 人已提交 · 名单 ' + rosterForCls.length + ' 人';
|
||||
$('#absentHint').textContent = absentForCls.length ? '共 ' + absentForCls.length + ' 人' : '';
|
||||
}
|
||||
|
||||
function fmtDur(sec) {
|
||||
if (sec == null) return '-';
|
||||
if (sec < 60) return sec + ' 秒';
|
||||
const m = Math.floor(sec / 60), s = sec % 60;
|
||||
if (m < 60) return m + ' 分 ' + String(s).padStart(2, '0') + ' 秒';
|
||||
const h = Math.floor(m / 60);
|
||||
return h + ' 小时 ' + String(m % 60).padStart(2, '0') + ' 分';
|
||||
}
|
||||
|
||||
function scoreClass(v) {
|
||||
if (v == null) return '';
|
||||
if (v >= 90) return 'score-high';
|
||||
if (v >= 60) return 'score-mid';
|
||||
return 'score-low';
|
||||
}
|
||||
|
||||
function renderTable() {
|
||||
const kw = $('#kw').value.trim().toLowerCase();
|
||||
const clsFilter = $('#clsSel').value;
|
||||
let rows = state.rows.slice();
|
||||
|
||||
if (clsFilter) rows = rows.filter(r => (r.cls || '') === clsFilter);
|
||||
if (kw) rows = rows.filter(r =>
|
||||
String(r.sid).toLowerCase().includes(kw) || String(r.name).toLowerCase().includes(kw));
|
||||
|
||||
const k = state.sortKey, dir = state.sortAsc ? 1 : -1;
|
||||
rows.sort((a, b) => {
|
||||
let x = a[k], y = b[k];
|
||||
if (k === 'sid' || k === 'cls') {
|
||||
const na = parseFloat(x), nb = parseFloat(y);
|
||||
if (!isNaN(na) && !isNaN(nb)) return (na - nb) * dir;
|
||||
return String(x == null ? '' : x).localeCompare(String(y == null ? '' : y), 'zh', { numeric: true }) * dir;
|
||||
}
|
||||
if (x == null) x = -1;
|
||||
if (y == null) y = -1;
|
||||
if (typeof x === 'string') return x.localeCompare(String(y), 'zh', { numeric: true }) * dir;
|
||||
return (x - y) * dir;
|
||||
});
|
||||
|
||||
const tb = $('#tbody');
|
||||
if (!rows.length) {
|
||||
tb.innerHTML = '<tr><td colspan="6" class="empty">' +
|
||||
(state.rows.length ? '没有匹配的记录' : '暂无提交记录') + '</td></tr>';
|
||||
return;
|
||||
}
|
||||
tb.innerHTML = rows.map(r => {
|
||||
const sig = r.sid + '|' + r.score + '|' + r.submit_at;
|
||||
const changed = state.prevMap[r.sid] && state.prevMap[r.sid] !== sig;
|
||||
const isNew = r.sid && state.newSids.has(r.sid);
|
||||
const clsName = (changed ? 'diff ' : '') + (isNew ? 'new' : '');
|
||||
return '<tr class="' + clsName.trim() + '">' +
|
||||
'<td class="sid">' + esc(r.sid) + '</td>' +
|
||||
'<td class="name">' + esc(r.name) + '</td>' +
|
||||
'<td>' + esc(r.cls || '') + '</td>' +
|
||||
'<td class="score num ' + scoreClass(r.score) + '">' + (r.score == null ? '-' : r.score) + '</td>' +
|
||||
'<td class="num">' + esc(r.submit_at) + '</td>' +
|
||||
'<td class="num">' + esc(r.duration_txt) + '</td>' +
|
||||
'</tr>';
|
||||
}).join('');
|
||||
|
||||
const map = {};
|
||||
state.rows.forEach(r => { map[r.sid] = r.sid + '|' + r.score + '|' + r.submit_at; });
|
||||
state.prevMap = map;
|
||||
|
||||
$$('#dataTable th.sortable').forEach(th => {
|
||||
const isCur = th.dataset.k === state.sortKey;
|
||||
th.innerHTML = th.textContent.replace(/[\s↑↓]+$/, '') + (isCur ? ' <span class="arrow">' + (state.sortAsc ? '↑' : '↓') + '</span>' : '');
|
||||
});
|
||||
}
|
||||
|
||||
function renderAbsent() {
|
||||
const clsFilter = $('#clsSel').value;
|
||||
const list = clsFilter ? state.absent.filter(a => (a.cls || '') === clsFilter) : state.absent;
|
||||
const tb = $('#absentBody');
|
||||
if (!list.length) {
|
||||
tb.innerHTML = '<tr><td colspan="3" class="empty">' + (clsFilter ? '本班全部已提交 🎉' : '全部已提交 🎉') + '</td></tr>';
|
||||
return;
|
||||
}
|
||||
tb.innerHTML = list.map(a =>
|
||||
'<tr><td class="sid">' + esc(a.sid) + '</td><td>' + esc(a.name) + '</td><td>' + esc(a.cls || '') + '</td></tr>').join('');
|
||||
}
|
||||
|
||||
function renderUnmatched() {
|
||||
const tb = $('#unmatchedBody');
|
||||
if (!state.unmatched.length) {
|
||||
tb.innerHTML = '<tr><td colspan="3" class="empty">无</td></tr>';
|
||||
return;
|
||||
}
|
||||
tb.innerHTML = state.unmatched.map(u =>
|
||||
'<tr><td>' + esc(u.name) + '</td><td class="num">' + (u.score == null ? '-' : u.score) +
|
||||
'</td><td class="num">' + esc(u.submit_at) + '</td></tr>').join('');
|
||||
}
|
||||
|
||||
/* ---------------- 自动刷新 ---------------- */
|
||||
function schedule() {
|
||||
if (state.timer) clearInterval(state.timer);
|
||||
if (!$('#autoRefresh').checked) return;
|
||||
const sec = parseInt($('#intervalSel').value, 10) || 15;
|
||||
state.timer = setInterval(() => refresh(true), sec * 1000);
|
||||
}
|
||||
|
||||
/* ---------------- 全屏 ---------------- */
|
||||
function toggleFullscreen() {
|
||||
const el = document.documentElement;
|
||||
if (!document.fullscreenElement && !document.webkitFullscreenElement) {
|
||||
const req = el.requestFullscreen || el.webkitRequestFullscreen;
|
||||
if (req) req.call(el);
|
||||
} else {
|
||||
const exit = document.exitFullscreen || document.webkitExitFullscreen;
|
||||
if (exit) exit.call(document);
|
||||
}
|
||||
}
|
||||
function onFsChange() {
|
||||
const on = !!(document.fullscreenElement || document.webkitFullscreenElement);
|
||||
document.body.classList.toggle('fs-on', on);
|
||||
const btn = $('#btnFullscreen');
|
||||
if (btn) btn.textContent = on ? '⛶ 退出全屏' : '⛶ 全屏';
|
||||
}
|
||||
|
||||
/* ---------------- 设置 ---------------- */
|
||||
async function openSettings() {
|
||||
try {
|
||||
const c = await api('config_get');
|
||||
$('#cfgBase').value = c.base_url || '';
|
||||
$('#cfgPrefix').value = c.api_prefix || '/api';
|
||||
$('#cfgUser').value = c.username || '';
|
||||
$('#cfgPwd').value = '';
|
||||
$('#cfgPageSize').value = c.page_size || 200;
|
||||
$('#cfgInterval').value = c.refresh_interval || 15;
|
||||
$('#cfgTimeout').value = c.timeout || 20;
|
||||
$('#cfgKeywords').value = c.name_keywords || '姓名';
|
||||
$('#cfgDedupe').checked = !!c.dedupe;
|
||||
$('#cfgTemp').checked = !!c.include_temp_save;
|
||||
$('#cfgSsl').checked = !!c.verify_ssl;
|
||||
const pid = $('#projectSel').value;
|
||||
const scores = (c.full_scores && typeof c.full_scores === 'object') ? c.full_scores : {};
|
||||
$('#cfgFull').value = (pid && scores[pid] != null) ? scores[pid] : (c.full_score || 100);
|
||||
const pObj = state.projects.find(p => p.id === pid);
|
||||
$('#cfgFullHint').textContent = pid
|
||||
? ('应用于当前试卷：' + (pObj ? pObj.name : pid))
|
||||
: '未选择试卷时，作为所有试卷的默认值';
|
||||
} catch (e) { showAlert(e.message); }
|
||||
$('#pingResult').classList.add('hidden');
|
||||
$('#settingsModal').classList.add('open');
|
||||
}
|
||||
|
||||
/* ---------------- 名单 ---------------- */
|
||||
let rosterDraft = [];
|
||||
|
||||
async function openRoster() {
|
||||
try {
|
||||
const d = await api('roster');
|
||||
rosterDraft = d.students || [];
|
||||
renderRoster();
|
||||
$('#rosterMeta').textContent = '共 ' + rosterDraft.length + ' 人' +
|
||||
(d.meta && d.meta.updated_at ? ' · 更新于 ' + d.meta.updated_at : '');
|
||||
} catch (e) { showAlert(e.message); }
|
||||
$('#rosterModal').classList.add('open');
|
||||
}
|
||||
|
||||
function renderRoster() {
|
||||
const kw = $('#rosterSearch').value.trim().toLowerCase();
|
||||
const rows = rosterDraft.filter(r => !kw ||
|
||||
String(r.sid).toLowerCase().includes(kw) || String(r.name).toLowerCase().includes(kw));
|
||||
const tb = $('#rosterBody');
|
||||
if (!rows.length) {
|
||||
tb.innerHTML = '<tr><td colspan="4" class="empty">暂无名单，请上传文件</td></tr>';
|
||||
return;
|
||||
}
|
||||
tb.innerHTML = rows.map((r, i) => {
|
||||
const gi = rosterDraft.indexOf(r);
|
||||
return '<tr data-i="' + gi + '">' +
|
||||
'<td><input value="' + esc(r.sid) + '" data-f="sid"></td>' +
|
||||
'<td><input value="' + esc(r.name) + '" data-f="name"></td>' +
|
||||
'<td><input value="' + esc(r.cls || '') + '" data-f="cls" placeholder="可选"></td>' +
|
||||
'<td><span class="link-del" data-del="' + gi + '">删除</span></td></tr>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
/* ---------------- 登录门 ---------------- */
|
||||
async function showLoginGate() {
|
||||
const gate = $('#loginGate');
|
||||
if (gate) gate.classList.remove('hidden');
|
||||
try {
|
||||
const c = await api('config_get');
|
||||
$('#lgBase').value = c.base_url || '';
|
||||
$('#lgPrefix').value = c.api_prefix || '/api';
|
||||
$('#lgUser').value = c.username || '';
|
||||
} catch (e) { /* 取不到配置也可继续，手动填写 */ }
|
||||
$('#lgPwd').value = '';
|
||||
$('#lgLogin').disabled = true;
|
||||
const msg = $('#lgMsg');
|
||||
msg.textContent = '';
|
||||
msg.className = 'login-msg';
|
||||
}
|
||||
|
||||
async function loginTest() {
|
||||
const base = $('#lgBase').value.trim();
|
||||
const prefix = $('#lgPrefix').value.trim();
|
||||
const user = $('#lgUser').value.trim();
|
||||
const pwd = $('#lgPwd').value;
|
||||
const msg = $('#lgMsg');
|
||||
if (!base || !prefix || !user || !pwd) {
|
||||
msg.textContent = '请填写系统网址、API 路由、账号与密码';
|
||||
msg.className = 'login-msg err';
|
||||
return;
|
||||
}
|
||||
msg.textContent = '正在测试连接…';
|
||||
msg.className = 'login-msg';
|
||||
try {
|
||||
await api('config_save', { method: 'POST', body: { base_url: base, api_prefix: prefix, username: user, password: pwd } });
|
||||
const r = await api('ping');
|
||||
msg.textContent = '连接成功！读取到 ' + r.projects + ' 个问卷/考试，可登录';
|
||||
msg.className = 'login-msg ok';
|
||||
$('#lgLogin').disabled = false;
|
||||
} catch (e) {
|
||||
msg.textContent = '连接失败：' + e.message;
|
||||
msg.className = 'login-msg err';
|
||||
$('#lgLogin').disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function loginEnter() {
|
||||
const gate = $('#loginGate');
|
||||
if (gate) gate.classList.add('hidden');
|
||||
schedule();
|
||||
loadProjects();
|
||||
}
|
||||
|
||||
/* ---------------- 事件绑定 ---------------- */
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
$('#projectSel').addEventListener('change', () => { state.prevMap = {}; refresh(); });
|
||||
$('#nameFieldSel').addEventListener('change', () => { state.prevMap = {}; refresh(); });
|
||||
$('#btnRefresh').addEventListener('click', () => refresh(false));
|
||||
$('#btnSettings').addEventListener('click', openSettings);
|
||||
$('#btnRoster').addEventListener('click', openRoster);
|
||||
$('#btnFullscreen').addEventListener('click', toggleFullscreen);
|
||||
document.addEventListener('fullscreenchange', onFsChange);
|
||||
if (document.webkitFullscreenEnabled === undefined && !document.documentElement.requestFullscreen && !document.documentElement.webkitRequestFullscreen) {
|
||||
$('#btnFullscreen').style.display = 'none';
|
||||
}
|
||||
$('#kw').addEventListener('input', renderTable);
|
||||
$('#clsSel').addEventListener('change', () => {
|
||||
renderStats();
|
||||
renderTable();
|
||||
renderAbsent();
|
||||
renderHints();
|
||||
});
|
||||
$('#intervalSel').addEventListener('change', schedule);
|
||||
$('#autoRefresh').addEventListener('change', e => {
|
||||
if (e.target.checked) { schedule(); refresh(true); }
|
||||
else if (state.timer) clearInterval(state.timer);
|
||||
});
|
||||
|
||||
$$('#dataTable th.sortable').forEach(th => {
|
||||
th.addEventListener('click', () => {
|
||||
if (state.sortKey === th.dataset.k) state.sortAsc = !state.sortAsc;
|
||||
else { state.sortKey = th.dataset.k; state.sortAsc = true; }
|
||||
renderTable();
|
||||
});
|
||||
});
|
||||
|
||||
$('#btnExport').addEventListener('click', () => {
|
||||
const pid = $('#projectSel').value;
|
||||
if (!pid) return showAlert('请先选择问卷 / 考试');
|
||||
location.href = 'api.php?action=export&projectId=' + encodeURIComponent(pid) +
|
||||
'&nameQid=' + encodeURIComponent($('#nameFieldSel').value);
|
||||
});
|
||||
$('#btnExportAbsent').addEventListener('click', () => {
|
||||
const pid = $('#projectSel').value;
|
||||
if (!pid) return showAlert('请先选择问卷 / 考试');
|
||||
location.href = 'api.php?action=export_absent&projectId=' + encodeURIComponent(pid) +
|
||||
'&nameQid=' + encodeURIComponent($('#nameFieldSel').value);
|
||||
});
|
||||
|
||||
/* 弹窗关闭 */
|
||||
document.addEventListener('click', e => {
|
||||
if (e.target.matches('[data-close]') || e.target.classList.contains('modal')) {
|
||||
$$('.modal').forEach(m => m.classList.remove('open'));
|
||||
}
|
||||
});
|
||||
|
||||
/* 设置保存 */
|
||||
$('#btnSaveCfg').addEventListener('click', async () => {
|
||||
const payload = {
|
||||
base_url: $('#cfgBase').value.trim(),
|
||||
api_prefix: $('#cfgPrefix').value.trim(),
|
||||
username: $('#cfgUser').value.trim(),
|
||||
password: $('#cfgPwd').value,
|
||||
page_size: parseInt($('#cfgPageSize').value, 10) || 200,
|
||||
refresh_interval: parseInt($('#cfgInterval').value, 10) || 15,
|
||||
timeout: parseInt($('#cfgTimeout').value, 10) || 20,
|
||||
name_keywords: $('#cfgKeywords').value.trim(),
|
||||
dedupe: $('#cfgDedupe').checked,
|
||||
include_temp_save: $('#cfgTemp').checked,
|
||||
verify_ssl: $('#cfgSsl').checked,
|
||||
full_score: parseInt($('#cfgFull').value, 10) || 100,
|
||||
project_id: $('#projectSel').value
|
||||
};
|
||||
try {
|
||||
await api('config_save', { method: 'POST', body: payload });
|
||||
$('#settingsModal').classList.remove('open');
|
||||
const iv = payload.refresh_interval;
|
||||
const opts = $$('#intervalSel option').map(o => parseInt(o.value, 10));
|
||||
let best = opts[0];
|
||||
opts.forEach(v => { if (Math.abs(v - iv) < Math.abs(best - iv)) best = v; });
|
||||
$('#intervalSel').value = String(best);
|
||||
schedule();
|
||||
loadProjects();
|
||||
} catch (e) { showAlert(e.message); }
|
||||
});
|
||||
|
||||
$('#btnPing').addEventListener('click', async () => {
|
||||
const el = $('#pingResult');
|
||||
el.classList.remove('hidden', 'err');
|
||||
el.textContent = '正在测试…';
|
||||
try {
|
||||
const payload = {
|
||||
base_url: $('#cfgBase').value.trim(),
|
||||
api_prefix: $('#cfgPrefix').value.trim(),
|
||||
username: $('#cfgUser').value.trim(),
|
||||
password: $('#cfgPwd').value,
|
||||
timeout: parseInt($('#cfgTimeout').value, 10) || 20,
|
||||
verify_ssl: $('#cfgSsl').checked
|
||||
};
|
||||
await api('config_save', { method: 'POST', body: payload });
|
||||
const r = await api('ping');
|
||||
el.textContent = '连接成功！读取到 ' + r.projects + ' 个问卷/考试，耗时 ' + r.elapsed + ' ms';
|
||||
} catch (e) {
|
||||
el.classList.add('err');
|
||||
el.textContent = '连接失败：' + e.message;
|
||||
}
|
||||
});
|
||||
|
||||
$('#btnDiag').addEventListener('click', async () => {
|
||||
const el = $('#pingResult');
|
||||
el.classList.remove('hidden', 'err');
|
||||
el.textContent = '诊断中…';
|
||||
try {
|
||||
const payload = {
|
||||
base_url: $('#cfgBase').value.trim(),
|
||||
api_prefix: $('#cfgPrefix').value.trim(),
|
||||
username: $('#cfgUser').value.trim(),
|
||||
password: $('#cfgPwd').value,
|
||||
timeout: parseInt($('#cfgTimeout').value, 10) || 20,
|
||||
verify_ssl: $('#cfgSsl').checked
|
||||
};
|
||||
await api('config_save', { method: 'POST', body: payload });
|
||||
const d = await api('diag');
|
||||
const lines = (d.steps || []).map(s => (s.ok ? '✅ ' : '❌ ') + s.step + '\n ' + s.detail);
|
||||
const failed = (d.steps || []).some(s => !s.ok);
|
||||
el.classList.toggle('err', failed);
|
||||
el.textContent = lines.join('\n');
|
||||
} catch (e) {
|
||||
el.classList.add('err');
|
||||
el.textContent = '诊断失败：' + e.message;
|
||||
}
|
||||
});
|
||||
|
||||
/* 名单上传 */
|
||||
const zone = $('#dropZone'), fileInput = $('#rosterFile');
|
||||
zone.addEventListener('click', () => fileInput.click());
|
||||
zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('over'); });
|
||||
zone.addEventListener('dragleave', () => zone.classList.remove('over'));
|
||||
zone.addEventListener('drop', e => {
|
||||
e.preventDefault(); zone.classList.remove('over');
|
||||
if (e.dataTransfer.files.length) uploadRoster(e.dataTransfer.files[0]);
|
||||
});
|
||||
fileInput.addEventListener('change', () => {
|
||||
if (fileInput.files.length) uploadRoster(fileInput.files[0]);
|
||||
fileInput.value = '';
|
||||
});
|
||||
|
||||
async function uploadRoster(file) {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
const mode = (document.querySelector('input[name=impMode]:checked') || {}).value || 'replace';
|
||||
fd.append('mode', mode);
|
||||
try {
|
||||
const d = await api('roster_import', { form: fd });
|
||||
rosterDraft = d.students || [];
|
||||
renderRoster();
|
||||
$('#rosterMeta').textContent = '共 ' + rosterDraft.length + ' 人 · 导入完成';
|
||||
$('#rosterBadge').textContent = rosterDraft.length;
|
||||
} catch (e) { showAlert(e.message); }
|
||||
}
|
||||
|
||||
$('#rosterSearch').addEventListener('input', renderRoster);
|
||||
$('#btnAddRow').addEventListener('click', () => {
|
||||
rosterDraft.push({ sid: '', name: '', cls: '' });
|
||||
renderRoster();
|
||||
});
|
||||
$('#btnClearRoster').addEventListener('click', async () => {
|
||||
if (!confirm('确定清空全部名单？')) return;
|
||||
try {
|
||||
const d = await api('roster_clear', { method: 'POST' });
|
||||
rosterDraft = [];
|
||||
renderRoster();
|
||||
$('#rosterBadge').textContent = '0';
|
||||
$('#rosterMeta').textContent = '共 0 人';
|
||||
} catch (e) { showAlert(e.message); }
|
||||
});
|
||||
|
||||
$('#rosterBody').addEventListener('input', e => {
|
||||
const tr = e.target.closest('tr');
|
||||
if (!tr) return;
|
||||
const i = parseInt(tr.dataset.i, 10);
|
||||
if (isNaN(i)) return;
|
||||
rosterDraft[i][e.target.dataset.f] = e.target.value;
|
||||
});
|
||||
$('#rosterBody').addEventListener('click', e => {
|
||||
const id = e.target.getAttribute && e.target.getAttribute('data-del');
|
||||
if (id == null) return;
|
||||
rosterDraft.splice(parseInt(id, 10), 1);
|
||||
renderRoster();
|
||||
});
|
||||
|
||||
$('#btnSaveRoster').addEventListener('click', async () => {
|
||||
try {
|
||||
const d = await api('roster_save', { method: 'POST', body: { students: rosterDraft } });
|
||||
rosterDraft = d.students || [];
|
||||
renderRoster();
|
||||
$('#rosterBadge').textContent = rosterDraft.length;
|
||||
$('#rosterMeta').textContent = '共 ' + rosterDraft.length + ' 人 · 已保存';
|
||||
if ($('#projectSel').value) refresh(true);
|
||||
} catch (e) { showAlert(e.message); }
|
||||
});
|
||||
|
||||
/* 启动 */
|
||||
// 支持 ?projectId=xxx&nameQid=yyy 直接打开某份问卷
|
||||
const qs = new URLSearchParams(location.search);
|
||||
if (qs.get('interval')) $('#intervalSel').value = qs.get('interval');
|
||||
state.deeplinkProject = qs.get('projectId') || '';
|
||||
state.deeplinkQid = qs.get('nameQid') || '';
|
||||
|
||||
// 登录门
|
||||
$('#lgTest').addEventListener('click', loginTest);
|
||||
$('#lgLogin').addEventListener('click', loginEnter);
|
||||
$('#lgPwd').addEventListener('keydown', e => { if (e.key === 'Enter') loginTest(); });
|
||||
|
||||
// 启动：先显示登录门，不直接拉取数据（防止依赖一次配置直接查看数据）
|
||||
showLoginGate();
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,364 @@
|
||||
:root {
|
||||
--bg: #f4f6fa;
|
||||
--panel: #ffffff;
|
||||
--border: #e4e8f0;
|
||||
--border-2: #eef1f6;
|
||||
--text: #1d2433;
|
||||
--text-2: #5b6577;
|
||||
--text-3: #8b95a7;
|
||||
--primary: #2f6bff;
|
||||
--primary-weak: #eaf0ff;
|
||||
--ok: #12a86a;
|
||||
--ok-weak: #e7f7ef;
|
||||
--warn: #e08c1a;
|
||||
--warn-weak: #fdf3e2;
|
||||
--danger: #e0483d;
|
||||
--danger-weak: #fdecea;
|
||||
--shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 8px 24px rgba(20, 30, 60, .06);
|
||||
--radius: 12px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 14px/1.55 "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* ---------- 顶栏 ---------- */
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 24px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 12px; }
|
||||
.logo {
|
||||
width: 38px; height: 38px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #2f6bff, #6a4bff);
|
||||
color: #fff; font-weight: 800; font-size: 15px;
|
||||
display: grid; place-items: center;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.brand-text { display: flex; flex-direction: column; }
|
||||
.brand-text strong { font-size: 16px; letter-spacing: .3px; }
|
||||
.brand-text small { color: var(--text-3); font-size: 12px; }
|
||||
.top-right { display: flex; align-items: center; gap: 10px; }
|
||||
|
||||
.conn {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 5px 12px; border-radius: 999px;
|
||||
font-size: 12px; font-weight: 600;
|
||||
background: var(--border-2); color: var(--text-2);
|
||||
}
|
||||
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
|
||||
.conn-on { background: var(--ok-weak); color: var(--ok); }
|
||||
.conn-on i { background: var(--ok); box-shadow: 0 0 0 3px rgba(18,168,106,.15); }
|
||||
.conn-off { background: var(--border-2); color: var(--text-2); }
|
||||
.conn-err { background: var(--danger-weak); color: var(--danger); }
|
||||
.conn-err i { background: var(--danger); }
|
||||
.conn-load i { background: var(--warn); animation: blink 1s infinite; }
|
||||
@keyframes blink { 50% { opacity: .25; } }
|
||||
|
||||
/* ---------- 按钮 ---------- */
|
||||
.btn {
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
padding: 7px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: .15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn:hover { border-color: #c9d2e3; background: #fafbfe; }
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||||
.btn-primary:hover { background: #2559db; border-color: #2559db; }
|
||||
.btn.sm { padding: 5px 10px; font-size: 12px; }
|
||||
.btn.danger { color: var(--danger); border-color: #f3cfcb; }
|
||||
.btn.danger:hover { background: var(--danger-weak); }
|
||||
.btn b {
|
||||
display: inline-block; margin-left: 4px; padding: 0 6px;
|
||||
background: var(--primary-weak); color: var(--primary);
|
||||
border-radius: 999px; font-size: 11px;
|
||||
}
|
||||
|
||||
/* ---------- 布局 ---------- */
|
||||
.wrap { max-width: 1440px; margin: 0 auto; padding: 20px 24px 48px; }
|
||||
|
||||
.toolbar {
|
||||
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
|
||||
background: var(--panel); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
|
||||
}
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.field.grow { flex: 1 1 260px; min-width: 220px; }
|
||||
.field.grow-2 { flex: 1 1 200px; min-width: 180px; }
|
||||
.field.btns { flex-direction: row; gap: 8px; align-items: center; }
|
||||
.field label { font-size: 12px; color: var(--text-2); font-weight: 600; }
|
||||
.inline { display: flex; align-items: center; gap: 10px; }
|
||||
|
||||
select, input[type=text], input[type=number], input[type=password] {
|
||||
height: 36px; padding: 0 10px;
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
background: #fff; color: var(--text); font-size: 13px;
|
||||
font-family: inherit; outline: none; width: 100%;
|
||||
}
|
||||
select:focus, input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,107,255,.12); }
|
||||
.field.btns select { width: 100px; }
|
||||
|
||||
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; }
|
||||
.switch input { opacity: 0; width: 0; height: 0; }
|
||||
.switch span {
|
||||
position: absolute; inset: 0; cursor: pointer;
|
||||
background: #d3d9e6; border-radius: 999px; transition: .2s;
|
||||
}
|
||||
.switch span::before {
|
||||
content: ''; position: absolute; width: 18px; height: 18px;
|
||||
left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s;
|
||||
}
|
||||
.switch input:checked + span { background: var(--primary); }
|
||||
.switch input:checked + span::before { transform: translateX(18px); }
|
||||
|
||||
/* ---------- 提示 ---------- */
|
||||
.alert {
|
||||
margin-top: 14px; padding: 12px 16px; border-radius: 10px;
|
||||
background: var(--danger-weak); color: #a3342c; border: 1px solid #f5d3cf;
|
||||
font-size: 13px; white-space: pre-wrap;
|
||||
}
|
||||
.alert.info { background: var(--primary-weak); color: #1a45ad; border-color: #ccdaff; }
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ---------- 卡片 ---------- */
|
||||
.cards {
|
||||
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||||
gap: 12px; margin-top: 16px;
|
||||
}
|
||||
.card {
|
||||
background: var(--panel); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
}
|
||||
.card span { font-size: 12px; color: var(--text-3); }
|
||||
.card b { font-size: 24px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
|
||||
.card.ok b { color: var(--ok); }
|
||||
.card.warn b { color: var(--warn); }
|
||||
|
||||
/* ---------- 面板 ---------- */
|
||||
.panel {
|
||||
margin-top: 16px; background: var(--panel);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
box-shadow: var(--shadow); overflow: hidden;
|
||||
}
|
||||
.panel-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 16px; border-bottom: 1px solid var(--border-2);
|
||||
}
|
||||
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
|
||||
.panel-head h2 small { font-weight: 500; color: var(--text-3); font-size: 12px; margin-left: 8px; }
|
||||
.updated { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
|
||||
.dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd3e2; display: inline-block; }
|
||||
.dot.on { background: var(--ok); animation: pulse 1.6s infinite; }
|
||||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
|
||||
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ---------- 表格 ---------- */
|
||||
.table-scroll { overflow: auto; max-height: 62vh; }
|
||||
.table-scroll.short { max-height: 320px; }
|
||||
.table-scroll.mid { max-height: 380px; }
|
||||
|
||||
table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
table.grid th {
|
||||
position: sticky; top: 0; z-index: 2;
|
||||
background: #fafbfe; color: var(--text-2);
|
||||
text-align: left; font-weight: 600; font-size: 12px;
|
||||
padding: 10px 14px; border-bottom: 1px solid var(--border);
|
||||
white-space: nowrap;
|
||||
}
|
||||
table.grid th.sortable { cursor: pointer; user-select: none; }
|
||||
table.grid th.sortable:hover { color: var(--primary); }
|
||||
table.grid th .arrow { color: var(--primary); margin-left: 3px; }
|
||||
table.grid td { padding: 9px 14px; border-bottom: 1px solid var(--border-2); }
|
||||
table.grid tbody tr:hover td { background: #fafbfe; }
|
||||
table.grid.compact td, table.grid.compact th { padding: 7px 12px; }
|
||||
td.empty { text-align: center; color: var(--text-3); padding: 32px 0; }
|
||||
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
td.sid { font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
|
||||
td.name { font-weight: 600; }
|
||||
td.score { font-weight: 700; font-variant-numeric: tabular-nums; }
|
||||
.score-high { color: var(--ok); }
|
||||
.score-mid { color: var(--warn); }
|
||||
.score-low { color: var(--danger); }
|
||||
.diff { animation: flash 1.6s ease-out; }
|
||||
@keyframes flash { from { background: #fff6d9; } to { background: transparent; } }
|
||||
|
||||
/* 新增数据绿色底纹（每次刷新后标记，下一轮刷新前持续显示） */
|
||||
table.grid tbody tr.new td { background: #e7f7ee; }
|
||||
table.grid tbody tr.new:hover td { background: #d6f2e2; }
|
||||
|
||||
.tag {
|
||||
display: inline-block; padding: 1px 8px; border-radius: 999px;
|
||||
font-size: 11px; font-weight: 600;
|
||||
}
|
||||
.tag-ok { background: var(--ok-weak); color: var(--ok); }
|
||||
.tag-warn { background: var(--warn-weak); color: var(--warn); }
|
||||
.tag-gray { background: var(--border-2); color: var(--text-3); }
|
||||
|
||||
/* ---------- 弹窗 ---------- */
|
||||
.modal {
|
||||
position: fixed; inset: 0; z-index: 100;
|
||||
background: rgba(20, 28, 48, .45);
|
||||
display: none; align-items: center; justify-content: center;
|
||||
padding: 24px; backdrop-filter: blur(2px);
|
||||
}
|
||||
.modal.open { display: flex; }
|
||||
.modal-box {
|
||||
background: #fff; border-radius: 14px; width: 640px; max-width: 100%;
|
||||
max-height: 90vh; display: flex; flex-direction: column;
|
||||
box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
|
||||
}
|
||||
.modal-box.wide { width: 820px; }
|
||||
.modal-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 18px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.modal-head h3 { margin: 0; font-size: 15px; }
|
||||
.x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-3); }
|
||||
.x:hover { color: var(--text); }
|
||||
.modal-body { padding: 18px; overflow: auto; }
|
||||
.modal-foot {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 12px 18px; border-top: 1px solid var(--border); background: #fbfcfe;
|
||||
border-radius: 0 0 14px 14px;
|
||||
}
|
||||
.spacer { flex: 1; }
|
||||
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.fi { display: flex; flex-direction: column; gap: 6px; }
|
||||
.fi.full { grid-column: 1 / -1; }
|
||||
.fi label { font-size: 12px; font-weight: 600; color: var(--text-2); }
|
||||
.hint { margin: 0; font-size: 11px; color: var(--text-3); }
|
||||
.fi.checks { flex-direction: row; flex-wrap: wrap; gap: 18px; }
|
||||
.fi.checks label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13px; color: var(--text); }
|
||||
.ping-result {
|
||||
margin-top: 14px; padding: 10px 12px; border-radius: 8px;
|
||||
font-size: 12px; white-space: pre-wrap;
|
||||
background: var(--ok-weak); color: #0d7a4d; border: 1px solid #c8ecda;
|
||||
}
|
||||
.ping-result.err { background: var(--danger-weak); color: #a3342c; border-color: #f5d3cf; }
|
||||
|
||||
/* ---------- 名单 ---------- */
|
||||
.upload-zone {
|
||||
border: 2px dashed #cfd8ea; border-radius: 10px; padding: 22px;
|
||||
text-align: center; cursor: pointer; transition: .15s; background: #fbfcfe;
|
||||
}
|
||||
.upload-zone:hover, .upload-zone.over { border-color: var(--primary); background: var(--primary-weak); }
|
||||
.uz-inner { display: flex; flex-direction: column; gap: 4px; }
|
||||
.uz-inner strong { font-size: 13px; }
|
||||
.uz-inner span { font-size: 12px; color: var(--text-3); }
|
||||
.roster-bar {
|
||||
display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; flex-wrap: wrap;
|
||||
}
|
||||
.roster-bar input[type=text] { width: 180px; }
|
||||
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
|
||||
#rosterBody input {
|
||||
width: 100%; border: 1px solid transparent; background: transparent;
|
||||
padding: 4px 6px; border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text);
|
||||
}
|
||||
#rosterBody input:focus { border-color: var(--primary); background: #fff; outline: none; }
|
||||
.link-del { color: var(--danger); cursor: pointer; font-size: 12px; }
|
||||
|
||||
/* ---------- 登录门 ---------- */
|
||||
.login-gate {
|
||||
position: fixed; inset: 0; z-index: 200;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 24px; background: linear-gradient(135deg, #1b2440, #2f6bff);
|
||||
}
|
||||
.login-gate.hidden { display: none; }
|
||||
.login-box {
|
||||
width: 420px; max-width: 100%;
|
||||
background: #fff; border-radius: 16px; padding: 28px 26px;
|
||||
box-shadow: 0 24px 64px rgba(15, 23, 42, .35);
|
||||
}
|
||||
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
|
||||
.login-tip { margin: 0 0 18px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
|
||||
.login-box .fi { margin-bottom: 14px; }
|
||||
.login-actions { display: flex; gap: 10px; margin-top: 4px; }
|
||||
.login-actions .btn { flex: 1; }
|
||||
.login-msg { margin-top: 12px; font-size: 12px; min-height: 18px; white-space: pre-wrap; }
|
||||
.login-msg.ok { color: var(--ok); }
|
||||
.login-msg.err { color: var(--danger); }
|
||||
|
||||
/* ---------- 全屏适配 ---------- */
|
||||
body.fs-on .wrap { max-width: none; padding-top: 8px; }
|
||||
body.fs-on .table-scroll { max-height: calc(100vh - 230px); }
|
||||
body.fs-on .table-scroll.short { max-height: 40vh; }
|
||||
body.fs-on .cards { gap: 14px; }
|
||||
body.fs-on .card b { font-size: 28px; }
|
||||
body.fs-on .topbar { padding-top: 8px; padding-bottom: 8px; }
|
||||
|
||||
/* ---------- 三端自适应（桌面 / 平板 / 手机） ---------- */
|
||||
@media (max-width: 1180px) {
|
||||
.wrap { padding: 16px 16px 40px; }
|
||||
.topbar { padding: 10px 16px; }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
.field.grow, .field.grow-2 { flex: 1 1 100%; min-width: 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body { font-size: 13px; }
|
||||
.topbar { flex-wrap: wrap; gap: 10px; }
|
||||
.brand-text small { display: none; }
|
||||
.top-right { flex-wrap: wrap; gap: 8px; }
|
||||
.top-right .btn { padding: 6px 10px; font-size: 12px; }
|
||||
.btn b { font-size: 10px; }
|
||||
.wrap { padding: 12px 12px 36px; }
|
||||
.toolbar { padding: 12px; gap: 10px; }
|
||||
.field { flex: 1 1 100%; min-width: 0; }
|
||||
.field.btns { flex: 1 1 100%; }
|
||||
.field.btns select { width: 100%; }
|
||||
.cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
||||
.card { padding: 10px 12px; }
|
||||
.card b { font-size: 20px; }
|
||||
.panel-head { flex-direction: column; align-items: flex-start; gap: 6px; }
|
||||
.table-scroll { max-height: 56vh; }
|
||||
table.grid { font-size: 12px; }
|
||||
table.grid th { padding: 8px 10px; white-space: nowrap; }
|
||||
table.grid td { padding: 7px 10px; }
|
||||
.modal { padding: 10px; }
|
||||
.modal-box, .modal-box.wide { width: 100%; max-height: 92vh; }
|
||||
.form-grid { grid-template-columns: 1fr; }
|
||||
.modal-body { padding: 14px; }
|
||||
.roster-bar .chk { font-size: 11px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.cards { grid-template-columns: repeat(2, 1fr); }
|
||||
.brand-text strong { font-size: 14px; }
|
||||
.topbar .logo { width: 32px; height: 32px; font-size: 13px; }
|
||||
.btn { padding: 6px 9px; font-size: 12px; }
|
||||
.field label { font-size: 11px; }
|
||||
.roster-bar { gap: 8px; }
|
||||
.roster-bar input[type=text] { width: 120px; }
|
||||
.panel-head h2 { font-size: 14px; }
|
||||
#rosterBody input { font-size: 12px; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user