背景:v1.9.0 把界面迁到 Bootstrap 5 时保留了旧自研 CSS,v1.9.2 又叠加了一层 「墨绿渐变」覆盖层,形成三套令牌(--paper/--ink、prefers-color-scheme、 data-bs-theme)并存。系统偏好与 Cookie 不一致时,页面会出现半亮半暗、表单 标签/抽屉标题/订阅页签不可见、输入框变黑块等问题。 本次改动: - 样式加载顺序改为 bootstrap → app.css;删除旧纸墨令牌与 v1.9.2 覆盖层, app.css 重写为单一主题层(:root/[data-bs-theme=light] 与 [data-bs-theme=dark] 两套语义令牌)。组件只读 --app-*,解决 --ink-2 同时被当作「次级文字色」和 「卡片底色」的语义冲突。 - 主题只认 <html data-bs-theme>:服务端按 Cookie 直出;没有 Cookie 时由 <head> 内联脚本在首屏按系统偏好补齐,修好「跟随系统」并避免闪白。大屏同理。 - 修复 Bootstrap 覆盖自研设计的问题:正文 14px + 中文字体栈、22/16/14px 标题、 按钮/输入框/焦点环/卡片回到设计值;普通按钮新增 .btn-soft,不再变透明文字。 - 布局修复:客户/套餐表单的 .grid-2 不再塞 3 个字段;包详情页把筛选独立成 GET 表单(在搜索框回车不再误触批量开通);客户详情操作区与 meta 重排; 抽屉时钟改为固定 46px 并用它对齐抽屉头的 sticky 偏移;追加面板在抽屉里 两列月历、不再 1100px 竖排;手机端日历数字不再换行溢出,移动端表格隐藏 低优先级列,不再被裁切。 - 大屏:KPI/面板去掉 Bootstrap utility,统一由 screen.css 控制;TOP/今日待打 改为固定列宽 + grid-column 对齐;浅色主题的链接、热力、图例对比度补齐; 热力格不再整体降透明度;当日浮层可滚动并支持点击/键盘打开。 - 配色与可读性:普通文本对比度全部达标(截图 lint 由 65 处降到 0);日历 外月日期改为浅底深字,不再整格 opacity;archived 行改为中性底色而非降透明。 - 缓存:新增内嵌静态资源内容指纹 AssetVersion(12 位 sha256),所有 /static 链接带 ?v=;带指纹的响应 public, max-age=31536000, immutable,不带指纹的 回源 no-cache;HTML 继续 no-store。改样式重新编译即自动破缓存,不再依赖 手改版本号(仍保留 v1.10.0 作为产品版本)。 - 认证页重做:登录/初始化页改用 .auth 卡片(品牌、主题切换、绿色焦点环), 去掉 min-height:100vh 叠加 main padding 造成的 40px 纵向滚动。 - JS:修 toISOString 计算自然日差一天的时区 bug;主题切换读 data-bs-theme 并同步 aria-pressed;全选支持半选;大屏切主题同时更新 data-bs-theme; 提示条改为固定定位、淡出不再顶动页面。 - README 更新主题与缓存说明;版本号 1.9.5 → 1.10.0。 验证:gofmt / go vet / go test 全绿;1440、1100、390 三档,明暗两套,工作台/ 客户/套餐/订阅/设置/日志/大屏/登录全部截图走查,无横向溢出与控制台错误。
This commit is contained in:
+79
-45
@@ -2,15 +2,22 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* 提示条自动淡出 */
|
||||
/* ---------- 工具:本地日期,禁止用 toISOString 做“自然日”计算 ---------- */
|
||||
function pad2(n) { return n < 10 ? '0' + n : '' + n; }
|
||||
function parseDay(s) { return new Date(s + 'T00:00:00'); }
|
||||
function fmtDay(d) { return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()); }
|
||||
function addDays(s, n) { var d = parseDay(s); d.setDate(d.getDate() + n); return fmtDay(d); }
|
||||
function diffDays(a, b) { return Math.round((b.getTime() - a.getTime()) / 86400000); }
|
||||
|
||||
/* ---------- 提示条:自动淡出(.flash 固定定位,不会顶动页面) ---------- */
|
||||
document.querySelectorAll('[data-flash]').forEach(function (el) {
|
||||
setTimeout(function () {
|
||||
el.classList.add('hide');
|
||||
setTimeout(function () { el.remove(); }, 450);
|
||||
setTimeout(function () { el.remove(); }, 400);
|
||||
}, 4200);
|
||||
});
|
||||
|
||||
/* 按 / 聚焦搜索框 */
|
||||
/* ---------- 按 / 聚焦搜索框 ---------- */
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
var tag = (document.activeElement && document.activeElement.tagName) || '';
|
||||
@@ -19,17 +26,14 @@
|
||||
if (s) { e.preventDefault(); s.focus(); s.select(); }
|
||||
});
|
||||
|
||||
/* 危险操作确认 */
|
||||
/* ---------- 危险操作确认 ---------- */
|
||||
document.querySelectorAll('form[data-confirm]').forEach(function (f) {
|
||||
f.addEventListener('submit', function (e) {
|
||||
if (!window.confirm(f.getAttribute('data-confirm'))) e.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
/* 追加时长面板:点日历挑终止日 + 实时反算 */
|
||||
function parseDay(s) { return new Date(s + 'T00:00:00'); }
|
||||
function diffDays(a, b) { return Math.round((b.getTime() - a.getTime()) / 86400000); }
|
||||
|
||||
/* ---------- 追加时长面板:点日历挑终止日 + 实时反算 ---------- */
|
||||
document.querySelectorAll('form[data-extend]').forEach(function (form) {
|
||||
var base = parseDay(form.getAttribute('data-base'));
|
||||
var today = parseDay(form.getAttribute('data-today'));
|
||||
@@ -63,7 +67,7 @@
|
||||
if (input.value) paint(input.value);
|
||||
});
|
||||
|
||||
/* 新订阅表单:按套餐类型切换「天数 / 次数 / 终止日」 */
|
||||
/* ---------- 新订阅表单:按套餐类型切换「天数 / 次数 / 终止日」 ---------- */
|
||||
document.querySelectorAll('form[data-sub-form]').forEach(function (form) {
|
||||
var sel = form.querySelector('[data-pkg-select]');
|
||||
var daysWrap = form.querySelector('[data-days-wrap]');
|
||||
@@ -71,14 +75,23 @@
|
||||
var endWrap = form.querySelector('[data-end-wrap]');
|
||||
var startWrap = form.querySelector('[data-start-wrap]');
|
||||
var startInput = form.querySelector('input[name="start_date"]');
|
||||
var endInput = endWrap && endWrap.querySelector('input');
|
||||
if (!sel) return;
|
||||
|
||||
/* 只覆盖“上一次自动填的”终止日,不碰用户手填的值 */
|
||||
function setAutoEnd(v) {
|
||||
if (!endInput || !v) return;
|
||||
if (!endInput.value || endInput.dataset.auto === endInput.value) {
|
||||
endInput.value = v;
|
||||
endInput.dataset.auto = v;
|
||||
}
|
||||
}
|
||||
|
||||
function sync() {
|
||||
var opt = sel.options[sel.selectedIndex];
|
||||
var unit = opt && opt.getAttribute('data-unit');
|
||||
var amount = opt && opt.getAttribute('data-amount');
|
||||
var validity = opt && parseInt(opt.getAttribute('data-validity') || '0', 10);
|
||||
var endInput = endWrap && endWrap.querySelector('input');
|
||||
|
||||
if (unit === 'season') {
|
||||
if (daysWrap) daysWrap.hidden = true;
|
||||
@@ -96,11 +109,7 @@
|
||||
if (daysWrap) daysWrap.hidden = true;
|
||||
if (countWrap) { countWrap.hidden = false; if (amount) countWrap.querySelector('input').value = amount; }
|
||||
if (endWrap) endWrap.hidden = false;
|
||||
if (validity > 0 && endInput && !endInput.value && startInput && startInput.value) {
|
||||
var d = new Date(startInput.value + 'T00:00:00');
|
||||
d.setDate(d.getDate() + validity - 1);
|
||||
endInput.value = d.toISOString().slice(0, 10);
|
||||
}
|
||||
if (validity > 0 && startInput && startInput.value) setAutoEnd(addDays(startInput.value, validity - 1));
|
||||
} else if (unit === 'day') {
|
||||
if (daysWrap) { daysWrap.hidden = false; if (amount) daysWrap.querySelector('input').value = amount; }
|
||||
if (countWrap) countWrap.hidden = true;
|
||||
@@ -111,11 +120,21 @@
|
||||
if (endWrap) endWrap.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
sel.addEventListener('change', sync);
|
||||
if (startInput) {
|
||||
startInput.addEventListener('change', function () {
|
||||
var opt = sel.options[sel.selectedIndex];
|
||||
var validity = opt && parseInt(opt.getAttribute('data-validity') || '0', 10);
|
||||
if (opt && opt.getAttribute('data-unit') === 'count' && validity > 0 && startInput.value) {
|
||||
setAutoEnd(addDays(startInput.value, validity - 1));
|
||||
}
|
||||
});
|
||||
}
|
||||
sync();
|
||||
});
|
||||
|
||||
/* 套餐表单:切换默认量单位文案 */
|
||||
/* ---------- 套餐表单:切换默认量单位文案 ---------- */
|
||||
document.querySelectorAll('form[data-package-form]').forEach(function (form) {
|
||||
var label = form.querySelector('[data-unit-label]');
|
||||
var radios = form.querySelectorAll('input[name="unit"]');
|
||||
@@ -134,31 +153,59 @@
|
||||
radios.forEach(function (r) { r.addEventListener('change', sync); });
|
||||
sync();
|
||||
});
|
||||
|
||||
/* ---------- 批量开通:表头全选 + 半选状态 ---------- */
|
||||
document.querySelectorAll('[data-select-all]').forEach(function (box) {
|
||||
var form = box.closest('form') || document;
|
||||
var boxes = form.querySelectorAll('input[name="customer_ids"]');
|
||||
|
||||
function refresh() {
|
||||
var total = 0, checked = 0;
|
||||
boxes.forEach(function (c) {
|
||||
if (c.disabled) return;
|
||||
total++;
|
||||
if (c.checked) checked++;
|
||||
});
|
||||
box.checked = total > 0 && checked === total;
|
||||
box.indeterminate = checked > 0 && checked < total;
|
||||
}
|
||||
|
||||
box.addEventListener('change', function () {
|
||||
boxes.forEach(function (c) { if (!c.disabled) c.checked = box.checked; });
|
||||
box.indeterminate = false;
|
||||
});
|
||||
boxes.forEach(function (c) { c.addEventListener('change', refresh); });
|
||||
refresh();
|
||||
});
|
||||
})();
|
||||
|
||||
/* ---------- 亮色 / 暗色切换 ----------
|
||||
偏好写 cookie,服务端首屏直接带 data-theme,不闪。
|
||||
没有 cookie 时跟随系统(由 CSS 的 prefers-color-scheme 决定)。 */
|
||||
唯一状态源是 <html data-bs-theme>:服务端按 Cookie 直出,
|
||||
没有 Cookie 时由 <head> 里的内联脚本按系统偏好补上。 */
|
||||
(function () {
|
||||
'use strict';
|
||||
var KEY = 'daili_theme';
|
||||
var root = document.documentElement;
|
||||
var btns = document.querySelectorAll('[data-theme-toggle]');
|
||||
if (!btns.length) return;
|
||||
|
||||
function effective() {
|
||||
var attr = document.documentElement.getAttribute('data-theme');
|
||||
if (attr === 'light' || attr === 'dark') return attr;
|
||||
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
function current() {
|
||||
return root.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
|
||||
}
|
||||
function paint() {
|
||||
var dark = current() === 'dark';
|
||||
btns.forEach(function (b) { b.setAttribute('aria-pressed', dark ? 'true' : 'false'); });
|
||||
}
|
||||
|
||||
Array.prototype.forEach.call(btns, function (btn) {
|
||||
btns.forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var next = effective() === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
document.documentElement.setAttribute('data-bs-theme', next);
|
||||
var next = current() === 'dark' ? 'light' : 'dark';
|
||||
root.setAttribute('data-bs-theme', next);
|
||||
document.cookie = KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax';
|
||||
paint();
|
||||
});
|
||||
});
|
||||
paint();
|
||||
})();
|
||||
|
||||
/* ---------- 触摸小键盘 + 抽屉时钟 + 更多菜单 ---------- */
|
||||
@@ -171,14 +218,14 @@
|
||||
var d = new Date();
|
||||
var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
|
||||
var t = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds());
|
||||
Array.prototype.forEach.call(clocks, function (el) { el.textContent = t; });
|
||||
clocks.forEach(function (el) { el.textContent = t; });
|
||||
}
|
||||
if (clocks.length) { tick(); setInterval(tick, 1000); }
|
||||
|
||||
/* 小键盘:输入手机尾号
|
||||
关键点:鼠标按下时阻止默认行为,否则按钮会先抢走输入框焦点;
|
||||
每次按键后再把焦点和光标送回输入框末尾。 */
|
||||
Array.prototype.forEach.call(document.querySelectorAll('[data-keypad]'), function (pad) {
|
||||
document.querySelectorAll('[data-keypad]').forEach(function (pad) {
|
||||
// 键盘是表单的兄弟节点(不在 <form> 内),所以先找输入框,再用 input.form 反查表单
|
||||
var scope = pad.closest('.drawer-block') || pad.parentElement || document;
|
||||
var input = scope.querySelector('input[name="tail"]');
|
||||
@@ -222,33 +269,20 @@
|
||||
|
||||
/* 更多菜单:点开一个时收起其它,点空白处关闭 */
|
||||
document.addEventListener('click', function (e) {
|
||||
var opened = document.querySelectorAll('.more-actions[open]');
|
||||
Array.prototype.forEach.call(opened, function (d) {
|
||||
document.querySelectorAll('.more-actions[open]').forEach(function (d) {
|
||||
if (!d.contains(e.target)) { d.removeAttribute('open'); }
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
|
||||
/* ---------- 全选 + 触控/PC 小键盘模式 ---------- */
|
||||
/* ---------- 触控/PC 小键盘模式 ---------- */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* 批量开通:表头全选 */
|
||||
Array.prototype.forEach.call(document.querySelectorAll('[data-select-all]'), function (box) {
|
||||
box.addEventListener('change', function () {
|
||||
var form = box.closest('form') || document;
|
||||
Array.prototype.forEach.call(form.querySelectorAll('input[name="customer_ids"]'), function (c) {
|
||||
if (!c.disabled) { c.checked = box.checked; }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/* 触控 / PC 模式:触控时显示键盘并禁用输入框(不唤起系统输入法) */
|
||||
var KEY = 'daili_keypad_mode';
|
||||
|
||||
function applyMode(touch) {
|
||||
Array.prototype.forEach.call(document.querySelectorAll('[data-keypad]'), function (pad) {
|
||||
document.querySelectorAll('[data-keypad]').forEach(function (pad) {
|
||||
pad.hidden = !touch;
|
||||
var block = pad.closest('.drawer-block') || document;
|
||||
var input = block.querySelector('input[name="tail"]');
|
||||
@@ -270,7 +304,7 @@
|
||||
try { touchMode = localStorage.getItem(KEY) === 'touch'; } catch (err) { }
|
||||
applyMode(touchMode);
|
||||
|
||||
Array.prototype.forEach.call(document.querySelectorAll('[data-keypad-toggle]'), function (btn) {
|
||||
document.querySelectorAll('[data-keypad-toggle]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
touchMode = !touchMode;
|
||||
try { localStorage.setItem(KEY, touchMode ? 'touch' : 'pc'); } catch (err) { }
|
||||
|
||||
Reference in New Issue
Block a user