chun_qiu/subtrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(v1.11.0): 通行证/深渊模式、淡蓝配色与触控小键盘修复

Browse Source 
- 触控小键盘补回 3×4 网格样式：上一版重写 CSS 时漏掉了 .keypad/.key，
  按钮退化成行内小方块；现在恢复 46px 圆角键、⌫/✓ 功能键和「触控」开关态。
- 通行证（原「包赛季」）：整段有效期在独立日历上按套餐色连续着色（18% 透明度），
  每一格显示同一个「已完成 / 总单数」（0/1 或 1/1）；完成后色块保留并显示 1/1。
  沿用 season_done 记录完成日期，交互动线不变。
- 新增深渊模式：套餐设置周期天数 N 与周期数 X；开通时从开始日排出 X 个 N 天周期，
  结束日 = 开始日 + N×X − 1。周期内任意一天完成即算该周期完成；同一周期重复完成
  不重复计数；撤销该周期最后一条完成打卡会回退计数。独立日历连续着色，每格显示
  同一个「已完成周期 / 总周期数」。
- 全量把「包赛季」改名为「通行证」；套餐表单新增通行证 / 深渊选项，深渊显示 N/X 字段；
  客户开通表单、套餐批量开通、订阅列表、客户订阅卡片、日历待办行同步适配，
  通行证 / 深渊不再显示「追加时长」（提交也会被服务端拒绝）。
- 快速完成 / 批量完成对通行证改为整段完成，对深渊走周期打卡，不再错误地按日写打卡。
- 配色改为淡蓝 / 暗蓝：亮色用暗蓝主色 + 淡蓝纸底，暗色用海军蓝底 + 淡蓝强调；
  默认套餐色改为 #3B6EA5；大屏同步蓝调并修正热力图例与今日数字的对比度。
- 大屏页签排除通行证 / 深渊（它们不计每日热力，避免点开是空日历）；「今日待打」
  仍会列出待处理的通行证 / 深渊。
- 数据迁移：packages.abyss / packages.cycle_days / subscriptions.abyss /
  subscriptions.cycle_days，老库启动自动补列。
- 修复手机端整段色块把 7 列日历撑出屏幕：日历改成 minmax(0,1fr)，小屏色块缩小。
- 版本号 1.10.0 → 1.11.0。

验证：gofmt / go vet / go test 全绿；亮暗两套、1440 与 390 两档截图走查；
通行证 0/1 → 1/1、深渊 1/4 → 2/4、同周期重复完成不重复计数、撤销回退均实测通过。
This commit is contained in:
chun_qiu
2026-10-20 02:33:57 +08:00
parent 8b9c347649
commit bc5076ee41
25 changed files with 770 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+93 -46
View File
@@ -11,30 +11,30 @@
:root,
[data-bs-theme="light"] {
--app-bg: #f5f6f2;
--app-bg: #f4f7fb;
--app-surface: #ffffff;
--app-surface-2: #f8faf7;
--app-surface-3: #eef3ee;
--app-border: #e2e7df;
--app-border-strong: #cbd5cc;
--app-text: #16211c;
--app-text-2: #45564d;
--app-text-3: #55675d;
--app-accent: #1f6b52;
--app-accent-strong: #175844;
--app-accent-solid: #1f6b52;
--app-accent-solid-hover: #175844;
--app-accent-soft: #e6f1eb;
--app-accent-ink: #124434;
--app-surface-2: #f7f9fc;
--app-surface-3: #e9eff7;
--app-border: #dee6ef;
--app-border-strong: #c6d3e2;
--app-text: #14202b;
--app-text-2: #3d5064;
--app-text-3: #506478;
--app-accent: #2f5f9e;
--app-accent-strong: #244a7c;
--app-accent-solid: #2f5f9e;
--app-accent-solid-hover: #244a7c;
--app-accent-soft: #e8eff9;
--app-accent-ink: #1b3f6b;
--app-danger: #b3261e;
--app-danger-soft: #fbeae8;
--app-warn: #8a5200;
--app-warn-soft: #fdf3e3;
--app-info: #3c556e;
--app-info-soft: #eaf0f6;
--app-ring: rgba(31, 107, 82, 0.18);
--app-shadow-sm: 0 1px 2px rgba(16, 32, 24, 0.06);
--app-shadow: 0 18px 40px -28px rgba(16, 32, 24, 0.45);
--app-info: #4a5b6e;
--app-info-soft: #edf1f6;
--app-ring: rgba(47, 95, 158, 0.18);
--app-shadow-sm: 0 1px 2px rgba(20, 32, 43, 0.06);
--app-shadow: 0 18px 40px -28px rgba(20, 32, 43, 0.45);
--app-radius: 12px;
--app-radius-sm: 8px;
--app-sans: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
@@ -57,10 +57,10 @@
--bs-heading-color: var(--app-text);
--bs-link-color: var(--app-accent);
--bs-link-hover-color: var(--app-accent-strong);
--bs-primary: #1f6b52;
--bs-primary-rgb: 31, 107, 82;
--bs-success: #1f6b52;
--bs-success-rgb: 31, 107, 82;
--bs-primary: #2f5f9e;
--bs-primary-rgb: 47, 95, 158;
--bs-success: #2f5f9e;
--bs-success-rgb: 47, 95, 158;
--bs-border-radius: var(--app-radius);
--bs-border-radius-sm: var(--app-radius-sm);
--bs-border-radius-lg: 16px;
@@ -69,28 +69,28 @@
}
[data-bs-theme="dark"] {
--app-bg: #0c1310;
--app-surface: #131b17;
--app-surface-2: #17211c;
--app-surface-3: #1e2b24;
--app-border: #26362e;
--app-border-strong: #35493e;
--app-text: #e6f0ea;
--app-text-2: #b9ccc1;
--app-text-3: #8ea69a;
--app-accent: #5cc4a3;
--app-accent-strong: #7bd7b8;
--app-accent-solid: #2b7d61;
--app-accent-solid-hover: #339374;
--app-accent-soft: rgba(92, 196, 163, 0.14);
--app-accent-ink: #a9ecd6;
--app-bg: #0a111a;
--app-surface: #101a26;
--app-surface-2: #142131;
--app-surface-3: #1b2b3d;
--app-border: #223447;
--app-border-strong: #31485f;
--app-text: #e6eef7;
--app-text-2: #b4c6d8;
--app-text-3: #8aa0b6;
--app-accent: #6fa8dc;
--app-accent-strong: #93c4ee;
--app-accent-solid: #2b5d94;
--app-accent-solid-hover: #356ea9;
--app-accent-soft: rgba(111, 168, 220, 0.15);
--app-accent-ink: #b9dcfa;
--app-danger: #f08a82;
--app-danger-soft: rgba(240, 138, 130, 0.14);
--app-warn: #e0b072;
--app-warn-soft: rgba(224, 176, 114, 0.14);
--app-info: #9db4cc;
--app-info-soft: rgba(157, 180, 204, 0.14);
--app-ring: rgba(92, 196, 163, 0.24);
--app-ring: rgba(111, 168, 220, 0.24);
--app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--app-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
--app-nav-h: 58px;
@@ -109,10 +109,10 @@
--bs-heading-color: var(--app-text);
--bs-link-color: var(--app-accent);
--bs-link-hover-color: var(--app-accent-strong);
--bs-primary: #2b7d61;
--bs-primary-rgb: 43, 125, 97;
--bs-success: #2b7d61;
--bs-success-rgb: 43, 125, 97;
--bs-primary: #2b5d94;
--bs-primary-rgb: 43, 93, 148;
--bs-success: #2b5d94;
--bs-success-rgb: 43, 93, 148;
--bs-border-radius: var(--app-radius);
--bs-border-radius-sm: var(--app-radius-sm);
--bs-border-radius-lg: 16px;
@@ -762,13 +762,14 @@ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
overflow: hidden;
box-shadow: var(--app-shadow-sm);
}
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); }
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--app-surface-2); border-bottom: 1px solid var(--app-border); }
.cal-dow span { padding: 8px 0; text-align: center; font-size: 0.75rem; color: var(--app-text-3); }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell {
position: relative;
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
min-height: 112px; padding: 8px 9px 10px 12px;
border-right: 1px solid var(--app-border);
border-bottom: 1px solid var(--app-border);
@@ -795,6 +796,26 @@ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cal-cell.heat-4 { background: color-mix(in srgb, var(--app-accent) 18%, transparent); }
.cal-cell.heat-1:hover, .cal-cell.heat-2:hover, .cal-cell.heat-3:hover, .cal-cell.heat-4:hover { background: var(--app-surface-2); }
/* 通行证 / 深渊：整段连续着色，每格显示同一个「已完成/总数」 */
.cal-cell.has-block {
background: color-mix(in srgb, var(--block) 18%, var(--app-surface));
border-color: color-mix(in srgb, var(--block) 24%, var(--app-border));
}
.cal-cell.has-block:hover { background: color-mix(in srgb, var(--block) 26%, var(--app-surface)); }
.cal-cell.has-block.today .dnum { background: var(--block); color: #fff; }
.cell-block {
display: inline-flex; align-items: center; gap: 4px;
align-self: flex-start;
padding: 1px 7px; border-radius: 999px;
font-family: var(--app-mono); font-size: 0.75rem; font-weight: 700;
color: var(--app-text);
background: color-mix(in srgb, var(--block) 20%, var(--app-surface));
border: 1px solid color-mix(in srgb, var(--block) 48%, transparent);
white-space: nowrap;
}
.cell-block::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--block); }
.cal-cell > .cell-block:last-child { margin-top: auto; margin-bottom: 2px; }
.cell-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.cell-badges { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.dnum { font-family: var(--app-mono); font-size: 0.8125rem; font-weight: 700; line-height: 1.4; color: var(--app-text); }
@@ -843,7 +864,7 @@ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.pkg-tabs a em { font-family: var(--app-mono); font-style: normal; font-size: 0.6875rem; color: var(--app-text-3); background: var(--app-surface-2); border-radius: 999px; padding: 0 6px; }
.pkg-tabs a:hover { border-color: var(--app-accent); color: var(--app-text); text-decoration: none; }
.pkg-tabs a.on { background: var(--app-accent-solid); border-color: var(--app-accent-solid); color: #fff; }
.pkg-tabs a.on em { background: rgba(255, 255, 255, 0.2); color: #fff; }
.pkg-tabs a.on em { background: rgba(0, 0, 0, 0.2); color: #fff; }
.pkg-tabs a.on i { background: #fff; }
/* ---------- 12. 当日抽屉 ---------- */
@@ -905,6 +926,29 @@ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
}
.quick-hint { margin: 0 0 10px !important; font-size: 0.6875rem; line-height: 1.45; }
/* 触控小键盘：3 列 4 行，底行 ⌫ 0 ✓ */
.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 12px; }
.keypad .key {
height: 46px; padding: 0;
border: 1px solid var(--app-border); border-radius: 10px;
background: var(--app-surface); color: var(--app-text);
font-family: var(--app-mono); font-size: 1.0625rem; font-weight: 600;
cursor: pointer; user-select: none;
transition: background 0.1s ease, border-color 0.1s ease, transform 0.06s ease;
-webkit-tap-highlight-color: transparent;
}
.keypad .key:hover { border-color: var(--app-accent); color: var(--app-accent); }
.keypad .key:active { transform: translateY(1px); background: var(--app-accent-soft); }
.keypad .key-fn { font-size: 0.9375rem; color: var(--app-text-2); background: var(--app-surface-2); }
.keypad .key-ok { background: var(--app-accent-solid); border-color: var(--app-accent-solid); color: #fff; font-size: 1.125rem; }
.keypad .key-ok:hover { background: var(--app-accent-solid-hover); border-color: var(--app-accent-solid-hover); color: #fff; }
.keypad-toggle { min-width: 44px; }
.keypad-toggle.on {
background: var(--app-accent-soft);
border-color: color-mix(in srgb, var(--app-accent) 40%, transparent);
color: var(--app-accent-ink);
}
.picker { margin: 8px 0 12px; padding: 10px; border: 1px solid var(--app-accent); border-radius: var(--app-radius-sm); background: var(--app-surface-2); }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.picker-head h4 { font-size: 0.8125rem; }
@@ -1169,6 +1213,9 @@ fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cell-load { display: none; }
.cell-count b { font-size: 1rem; }
.cell-count span { font-size: 0.625rem; }
.cell-block { font-size: 0.5625rem; padding: 1px 3px; gap: 2px; }
.cell-block::before { width: 4px; height: 4px; }
.cal-cell { padding-left: 6px; }
.cal-cell.today .dnum { width: 18px; height: 18px; }
.table { min-width: 0; }
/* 手机上隐藏低优先级列，避免横向滚动 */
internal/web/static/app.js
+65 -20
View File
@@ -76,6 +76,8 @@
var startWrap = form.querySelector('[data-start-wrap]');
var startInput = form.querySelector('input[name="start_date"]');
var endInput = endWrap && endWrap.querySelector('input');
var cyclesWrap = form.querySelector('[data-cycles-wrap]');
var cyclesInput = cyclesWrap && cyclesWrap.querySelector('input');
if (!sel) return;
/* 只覆盖“上一次自动填的”终止日，不碰用户手填的值 */
@@ -87,6 +89,13 @@
}
}
/* 显示/隐藏一组字段；隐藏时一并 disable，避免同名字段重复提交 */
function setWrap(wrap, show) {
if (!wrap) return;
wrap.hidden = !show;
wrap.querySelectorAll('input, select, textarea').forEach(function (el) { el.disabled = !show; });
}
function sync() {
var opt = sel.options[sel.selectedIndex];
var unit = opt && opt.getAttribute('data-unit');
@@ -94,30 +103,48 @@
var validity = opt && parseInt(opt.getAttribute('data-validity') || '0', 10);
if (unit === 'season') {
if (daysWrap) daysWrap.hidden = true;
if (countWrap) countWrap.hidden = true;
if (endWrap) endWrap.hidden = true;
if (startWrap) startWrap.hidden = true;
setWrap(daysWrap, false);
setWrap(countWrap, false);
setWrap(endWrap, false);
setWrap(startWrap, false);
setWrap(cyclesWrap, false);
if (startInput) startInput.required = false;
return;
}
if (startWrap) startWrap.hidden = false;
setWrap(startWrap, true);
if (startInput) startInput.required = true;
if (unit === 'abyss') {
setWrap(daysWrap, false);
setWrap(countWrap, false);
setWrap(endWrap, false);
setWrap(cyclesWrap, true);
if (cyclesInput) {
cyclesInput.required = true;
if (amount) cyclesInput.value = amount;
}
return;
}
setWrap(cyclesWrap, false);
if (cyclesInput) cyclesInput.required = false;
if (unit === 'count') {
if (daysWrap) daysWrap.hidden = true;
if (countWrap) { countWrap.hidden = false; if (amount) countWrap.querySelector('input').value = amount; }
if (endWrap) endWrap.hidden = false;
setWrap(daysWrap, false);
setWrap(countWrap, true);
setWrap(endWrap, true);
if (amount) countWrap.querySelector('input').value = amount;
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;
if (endWrap) endWrap.hidden = false;
setWrap(daysWrap, true);
setWrap(countWrap, false);
setWrap(endWrap, true);
if (amount) daysWrap.querySelector('input').value = amount;
} else {
if (daysWrap) daysWrap.hidden = false;
if (countWrap) countWrap.hidden = true;
if (endWrap) endWrap.hidden = true;
setWrap(daysWrap, true);
setWrap(countWrap, false);
setWrap(endWrap, false);
}
}
@@ -134,22 +161,40 @@
sync();
});
/* ---------- 套餐表单：切换默认量单位文案 ---------- */
/* ---------- 套餐表单：切换计费方式与对应字段 ---------- */
document.querySelectorAll('form[data-package-form]').forEach(function (form) {
var label = form.querySelector('[data-unit-label]');
var amountTitle = form.querySelector('[data-amount-title]');
var radios = form.querySelectorAll('input[name="unit"]');
var seasonWrap = form.querySelector('[data-season-wrap]');
var validityWrap = form.querySelector('[data-validity-wrap]');
var abyssWrap = form.querySelector('[data-abyss-wrap]');
var amountWrap = form.querySelector('[data-amount-wrap]');
var cycleInput = form.querySelector('input[name="cycle_days"]');
function setWrap(wrap, show) {
if (!wrap) return;
wrap.hidden = !show;
wrap.querySelectorAll('input, select, textarea').forEach(function (el) { el.disabled = !show; });
}
function sync() {
var v = 'day';
radios.forEach(function (r) { if (r.checked) v = r.value; });
if (label) label.textContent = v === 'count' ? '次' : '天';
var seasonWrap = form.querySelector('[data-season-wrap]');
var validityWrap = form.querySelector('[data-validity-wrap]');
if (label) label.textContent = v === 'count' ? '次' : (v === 'abyss' ? '个' : '天');
if (amountTitle) amountTitle.textContent = v === 'abyss' ? '周期数' : '默认量';
setWrap(seasonWrap, v === 'season');
setWrap(validityWrap, v === 'count');
setWrap(abyssWrap, v === 'abyss');
setWrap(amountWrap, v !== 'season');
if (seasonWrap) {
seasonWrap.hidden = v !== 'season';
seasonWrap.querySelectorAll('input').forEach(function (i) { i.required = v === 'season'; });
}
if (validityWrap) { validityWrap.hidden = v !== 'count'; }
if (cycleInput) cycleInput.required = v === 'abyss';
}
radios.forEach(function (r) { r.addEventListener('change', sync); });
sync();
});
internal/web/static/screen.css
+25 -25
View File
@@ -7,36 +7,36 @@
:root,
[data-bs-theme="light"] {
--scr-bg: #eef3ee;
--scr-bg: #eef4fb;
--scr-panel: #ffffff;
--scr-panel-2: #f7faf7;
--scr-line: #dbe5dc;
--scr-text: #0f241d;
--scr-text-2: #33493f;
--scr-muted: #5f7468;
--scr-accent: #1f6b52;
--scr-accent-2: #2f8a69;
--scr-accent-solid: #1f6b52;
--scr-panel-2: #f7fafd;
--scr-line: #dbe6f1;
--scr-text: #0f1c29;
--scr-text-2: #354a60;
--scr-muted: #5d7186;
--scr-accent: #2f5f9e;
--scr-accent-2: #3f74b4;
--scr-accent-solid: #2f5f9e;
--scr-danger: #b3261e;
--scr-warn: #8a5200;
--scr-glow: 0 0 18px rgba(31, 107, 82, 0.12);
--scr-shadow: 0 14px 32px -22px rgba(16, 32, 24, 0.4);
--scr-glow: 0 0 18px rgba(47, 95, 158, 0.12);
--scr-shadow: 0 14px 32px -22px rgba(20, 32, 43, 0.4);
}
[data-bs-theme="dark"] {
--scr-bg: #0a120f;
--scr-panel: #111a16;
--scr-panel-2: #16211c;
--scr-line: #24352d;
--scr-text: #e8f2ec;
--scr-text-2: #b5c9bd;
--scr-muted: #87a094;
--scr-accent: #5cc4a3;
--scr-accent-2: #7bd7b8;
--scr-accent-solid: #2b7d61;
--scr-bg: #070e16;
--scr-panel: #0f1823;
--scr-panel-2: #142030;
--scr-line: #203448;
--scr-text: #e7f0f9;
--scr-text-2: #b6c9db;
--scr-muted: #87a0b8;
--scr-accent: #6fa8dc;
--scr-accent-2: #93c4ee;
--scr-accent-solid: #2b5d94;
--scr-danger: #f08a82;
--scr-warn: #e0b072;
--scr-glow: 0 0 24px rgba(92, 196, 163, 0.16);
--scr-glow: 0 0 24px rgba(111, 168, 220, 0.16);
--scr-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
@@ -198,10 +198,10 @@ body.screen-body::before {
.heat-cell span { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 11px; color: var(--scr-text-2); }
.heat-cell b { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 12px; font-weight: 700; color: var(--scr-text); white-space: nowrap; }
.heat-cell.out { background: var(--scr-panel-2); border-color: var(--scr-line); }
.heat-cell.out span, .heat-cell.out b { color: var(--scr-muted); }
.heat-cell.out span, .heat-cell.out b { color: var(--scr-text-2); }
.heat-cell.past { opacity: 1; }
.heat-cell.today { outline: 1px solid var(--scr-accent); outline-offset: -1px; }
.heat-cell.today span { color: var(--scr-accent); font-weight: 700; }
.heat-cell.today span { color: var(--scr-text); font-weight: 700; }
.heat-cell:hover { transform: translateY(-1px); border-color: var(--scr-accent); z-index: 3; }
.heat-cell.h1 { background: color-mix(in srgb, var(--scr-accent) 10%, var(--scr-panel-2)); }
@@ -226,7 +226,7 @@ body.screen-body::before {
.heat-legend i.h2 { background: color-mix(in srgb, var(--scr-accent) 22%, var(--scr-panel-2)); }
.heat-legend i.h3 { background: color-mix(in srgb, var(--scr-accent) 36%, var(--scr-panel-2)); }
.heat-legend i.h4 { background: color-mix(in srgb, var(--scr-accent) 52%, var(--scr-panel-2)); }
.heat-legend .legend-hint { margin-left: auto; font-style: normal; opacity: 0.8; }
.heat-legend .legend-hint { margin-left: auto; font-style: normal; color: var(--scr-text-2); }
/* TOP 10 */
.top-list { list-style: none; margin: 0; padding: 6px 10px; overflow: auto; flex: 1 1 auto; min-height: 0; }