feat(v1.10.0): 重建 Bootstrap 主题层,修复迁移遗留的明暗/缓存/布局问题
build / build-and-test (push) Successful in 3m38s

背景: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:
2026-10-20 01:46:11 +08:00
parent d76c5e3a54
commit 8b9c347649
24 changed files with 1733 additions and 1985 deletions
+3 -3
View File
@@ -19,7 +19,7 @@
┌───────────────────────────────────────────────┐ ┌───────────────────────────────────────────────┐
│ 代 打 台 · 代打管理平台 │ │ 代 打 台 · 代打管理平台 │
└───────────────────────────────────────────────┘ └───────────────────────────────────────────────┘
版本 1.1.0 配置文件 daili.ini 版本 1.10.0 配置文件 daili.ini
数据库 D:\代打台\daili.db 数据库 D:\代打台\daili.db
访问地址: 访问地址:
本机 http://127.0.0.1:17777 本机 http://127.0.0.1:17777
@@ -149,8 +149,8 @@
- 日历格左侧竖条 = 当天涉及的所有打手颜色(几种人几条,等分显示); - 日历格左侧竖条 = 当天涉及的所有打手颜色(几种人几条,等分显示);
- 「当日待完成」每条前面有打手色条 + 名字,未指派的显示灰色「未指派」; - 「当日待完成」每条前面有打手色条 + 名字,未指派的显示灰色「未指派」;
- 大屏的今日待打、悬停浮层、热力格竖条同样带颜色。 - 大屏的今日待打、悬停浮层、热力格竖条同样带颜色。
- **主题**:顶栏右上角 ☾ / ☀ 切换亮 / 暗,偏好记在浏览器里;不选时跟随系统。 - **主题**:顶栏右上角 ☾ / ☀ 切换亮 / 暗,偏好记在浏览器里;没选过时由页面在首屏按系统偏好自动决定。整套界面只认 `<html data-bs-theme>` 一个开关,不会出现「半亮半暗」。
- **升级不缓存旧界面**:CSS/JS 链接带版本号(`app.css?v=1.6.0`),换新版程序后浏览器会自动取新文件,不用手动清缓存。 - **升级不缓存旧界面**:CSS/JS 链接带**内容指纹**(`app.css?v=<12 位哈希>`)。资源可以长缓存(一年、immutable),但样式或脚本一改、重新编译,URL 就会变,浏览器自动取新文件,不用手动清缓存;HTML 仍然 `no-store`。
--- ---
+28 -26
View File
@@ -30,20 +30,21 @@ type screenTask struct {
} }
type screenData struct { type screenData struct {
Stats *store.Stats Stats *store.Stats
MonthTitle string MonthTitle string
Year, Month int Year, Month int
Weeks [][]screenDay Weeks [][]screenDay
Weekdays []string Weekdays []string
Top []SubView Top []SubView
DueToday []SubView DueToday []SubView
TodayList []screenTask TodayList []screenTask
Recent []store.Adjustment Recent []store.Adjustment
TodayTasks int TodayTasks int
TodayDone int TodayDone int
TodayUrgent int TodayUrgent int
Refresh int Refresh int
Version string Version string
AssetVersion string
HeatMode string // task = 每日待完成;due = 到期 HeatMode string // task = 每日待完成;due = 到期
Tag string Tag string
@@ -91,18 +92,19 @@ func (s *Server) handleScreen(w http.ResponseWriter, r *http.Request) {
return return
} }
data := &screenData{ data := &screenData{
Stats: stats, Stats: stats,
MonthTitle: fmt.Sprintf("%d 年 %d 月", today.Year(), int(today.Month())), MonthTitle: fmt.Sprintf("%d 年 %d 月", today.Year(), int(today.Month())),
Year: today.Year(), Year: today.Year(),
Month: int(today.Month()), Month: int(today.Month()),
Weekdays: []string{"一", "二", "三", "四", "五", "六", "日"}, Weekdays: []string{"一", "二", "三", "四", "五", "六", "日"},
Top: subViews(stats.Top, today, warn), Top: subViews(stats.Top, today, warn),
Refresh: s.screenRefresh(), Refresh: s.screenRefresh(),
Version: s.cfg.Version, Version: s.cfg.Version,
HeatMode: heatMode, AssetVersion: s.assetVersion,
PkgID: pkgID, HeatMode: heatMode,
Tag: tag, PkgID: pkgID,
FilterQuery: "pkg=" + itoa(pkgID), Tag: tag,
FilterQuery: "pkg=" + itoa(pkgID),
} }
// 今日到期(可按套餐过滤) // 今日到期(可按套餐过滤)
+55 -20
View File
@@ -5,6 +5,7 @@ import (
"bytes" "bytes"
"context" "context"
"crypto/rand" "crypto/rand"
"crypto/sha256"
"embed" "embed"
"encoding/hex" "encoding/hex"
"fmt" "fmt"
@@ -50,11 +51,12 @@ type Config struct {
// Server 是应用服务。 // Server 是应用服务。
type Server struct { type Server struct {
db *store.DB db *store.DB
cfg Config cfg Config
tpl *renderer tpl *renderer
handler http.Handler handler http.Handler
started time.Time started time.Time
assetVersion string
} }
type ctxKey int type ctxKey int
@@ -67,11 +69,33 @@ func New(db *store.DB, cfg Config) (*Server, error) {
if err != nil { if err != nil {
return nil, err return nil, err
} }
s := &Server{db: db, cfg: cfg, tpl: r, started: time.Now()} s := &Server{db: db, cfg: cfg, tpl: r, started: time.Now(), assetVersion: staticAssetVersion()}
s.handler = s.routes() s.handler = s.routes()
return s, nil return s, nil
} }
// staticAssetVersion 计算内嵌静态资源的内容指纹。
// 资源 URL 带上它之后可以放心长缓存;改了 CSS/JS 重新编译就会自动换 URL。
func staticAssetVersion() string {
h := sha256.New()
if err := fs.WalkDir(staticFS, "static", func(path string, d fs.DirEntry, err error) error {
if err != nil || d.IsDir() {
return nil
}
data, rerr := fs.ReadFile(staticFS, path)
if rerr != nil {
return nil
}
h.Write([]byte(path))
h.Write([]byte{0})
h.Write(data)
return nil
}); err != nil {
return "dev"
}
return hex.EncodeToString(h.Sum(nil))[:12]
}
// Handler 返回 HTTP 处理器。 // Handler 返回 HTTP 处理器。
func (s *Server) Handler() http.Handler { return s.handler } func (s *Server) Handler() http.Handler { return s.handler }
@@ -82,7 +106,7 @@ func (s *Server) routes() http.Handler {
if err != nil { if err != nil {
panic(err) panic(err)
} }
mux.Handle("GET /static/", cacheControl(http.StripPrefix("/static/", http.FileServerFS(sub)))) mux.Handle("GET /static/", s.staticFiles(http.StripPrefix("/static/", http.FileServerFS(sub))))
mux.HandleFunc("GET /healthz", func(w http.ResponseWriter, r *http.Request) { mux.HandleFunc("GET /healthz", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "text/plain; charset=utf-8") w.Header().Set("Content-Type", "text/plain; charset=utf-8")
_, _ = w.Write([]byte("ok")) _, _ = w.Write([]byte("ok"))
@@ -153,9 +177,16 @@ func (s *Server) routes() http.Handler {
return s.noCacheHTML(mux) return s.noCacheHTML(mux)
} }
func cacheControl(h http.Handler) http.Handler { // staticFiles 给内嵌静态资源加缓存策略:
// 只有带当前内容指纹(?v=)的 URL 才允许一年不可变缓存,其它一律回源。
func (s *Server) staticFiles(h http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) { return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Cache-Control", "public, max-age=300") w.Header().Set("X-Content-Type-Options", "nosniff")
if r.URL.Query().Get("v") == s.assetVersion {
w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
} else {
w.Header().Set("Cache-Control", "no-cache")
}
h.ServeHTTP(w, r) h.ServeHTTP(w, r)
}) })
} }
@@ -337,14 +368,16 @@ type page struct {
TodayStr string TodayStr string
WarnDays int WarnDays int
Version string Version string
Query string // AssetVersion 是内嵌静态资源的内容指纹,用于 /static/*.css?v=... 的长缓存
Next string AssetVersion string
DueToday int Query string
Due3 int Next string
Due7 int DueToday int
Addr string Due3 int
Theme string // "" = 跟随系统;light / dark Due7 int
D any Addr string
Theme string // "" = 跟随系统;light / dark
D any
} }
func (s *Server) warnDays() int { func (s *Server) warnDays() int {
@@ -374,9 +407,11 @@ func (s *Server) newPage(r *http.Request, title, nav string) *page {
TodayStr: domain.Date(today), TodayStr: domain.Date(today),
WarnDays: s.warnDays(), WarnDays: s.warnDays(),
Version: s.cfg.Version, Version: s.cfg.Version,
Query: r.URL.Query().Get("q"),
Next: r.URL.Query().Get("next"), AssetVersion: s.assetVersion,
Theme: themeFromRequest(r), Query: r.URL.Query().Get("q"),
Next: r.URL.Query().Get("next"),
Theme: themeFromRequest(r),
} }
if u != nil { if u != nil {
if due, due3, due7, err := s.db.Badges(today); err == nil { if due, due3, due7, err := s.db.Badges(today); err == nil {
+1052 -1285
View File
File diff suppressed because it is too large Load Diff
+79 -45
View File
@@ -2,15 +2,22 @@
(function () { (function () {
'use strict'; '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) { document.querySelectorAll('[data-flash]').forEach(function (el) {
setTimeout(function () { setTimeout(function () {
el.classList.add('hide'); el.classList.add('hide');
setTimeout(function () { el.remove(); }, 450); setTimeout(function () { el.remove(); }, 400);
}, 4200); }, 4200);
}); });
/* 按 / 聚焦搜索框 */ /* ---------- 按 / 聚焦搜索框 ---------- */
document.addEventListener('keydown', function (e) { document.addEventListener('keydown', function (e) {
if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return; if (e.key !== '/' || e.metaKey || e.ctrlKey || e.altKey) return;
var tag = (document.activeElement && document.activeElement.tagName) || ''; var tag = (document.activeElement && document.activeElement.tagName) || '';
@@ -19,17 +26,14 @@
if (s) { e.preventDefault(); s.focus(); s.select(); } if (s) { e.preventDefault(); s.focus(); s.select(); }
}); });
/* 危险操作确认 */ /* ---------- 危险操作确认 ---------- */
document.querySelectorAll('form[data-confirm]').forEach(function (f) { document.querySelectorAll('form[data-confirm]').forEach(function (f) {
f.addEventListener('submit', function (e) { f.addEventListener('submit', function (e) {
if (!window.confirm(f.getAttribute('data-confirm'))) e.preventDefault(); 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) { document.querySelectorAll('form[data-extend]').forEach(function (form) {
var base = parseDay(form.getAttribute('data-base')); var base = parseDay(form.getAttribute('data-base'));
var today = parseDay(form.getAttribute('data-today')); var today = parseDay(form.getAttribute('data-today'));
@@ -63,7 +67,7 @@
if (input.value) paint(input.value); if (input.value) paint(input.value);
}); });
/* 新订阅表单:按套餐类型切换「天数 / 次数 / 终止日」 */ /* ---------- 新订阅表单:按套餐类型切换「天数 / 次数 / 终止日」 ---------- */
document.querySelectorAll('form[data-sub-form]').forEach(function (form) { document.querySelectorAll('form[data-sub-form]').forEach(function (form) {
var sel = form.querySelector('[data-pkg-select]'); var sel = form.querySelector('[data-pkg-select]');
var daysWrap = form.querySelector('[data-days-wrap]'); var daysWrap = form.querySelector('[data-days-wrap]');
@@ -71,14 +75,23 @@
var endWrap = form.querySelector('[data-end-wrap]'); var endWrap = form.querySelector('[data-end-wrap]');
var startWrap = form.querySelector('[data-start-wrap]'); var startWrap = form.querySelector('[data-start-wrap]');
var startInput = form.querySelector('input[name="start_date"]'); var startInput = form.querySelector('input[name="start_date"]');
var endInput = endWrap && endWrap.querySelector('input');
if (!sel) return; 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() { function sync() {
var opt = sel.options[sel.selectedIndex]; var opt = sel.options[sel.selectedIndex];
var unit = opt && opt.getAttribute('data-unit'); var unit = opt && opt.getAttribute('data-unit');
var amount = opt && opt.getAttribute('data-amount'); var amount = opt && opt.getAttribute('data-amount');
var validity = opt && parseInt(opt.getAttribute('data-validity') || '0', 10); var validity = opt && parseInt(opt.getAttribute('data-validity') || '0', 10);
var endInput = endWrap && endWrap.querySelector('input');
if (unit === 'season') { if (unit === 'season') {
if (daysWrap) daysWrap.hidden = true; if (daysWrap) daysWrap.hidden = true;
@@ -96,11 +109,7 @@
if (daysWrap) daysWrap.hidden = true; if (daysWrap) daysWrap.hidden = true;
if (countWrap) { countWrap.hidden = false; if (amount) countWrap.querySelector('input').value = amount; } if (countWrap) { countWrap.hidden = false; if (amount) countWrap.querySelector('input').value = amount; }
if (endWrap) endWrap.hidden = false; if (endWrap) endWrap.hidden = false;
if (validity > 0 && endInput && !endInput.value && startInput && startInput.value) { if (validity > 0 && startInput && startInput.value) setAutoEnd(addDays(startInput.value, validity - 1));
var d = new Date(startInput.value + 'T00:00:00');
d.setDate(d.getDate() + validity - 1);
endInput.value = d.toISOString().slice(0, 10);
}
} else if (unit === 'day') { } else if (unit === 'day') {
if (daysWrap) { daysWrap.hidden = false; if (amount) daysWrap.querySelector('input').value = amount; } if (daysWrap) { daysWrap.hidden = false; if (amount) daysWrap.querySelector('input').value = amount; }
if (countWrap) countWrap.hidden = true; if (countWrap) countWrap.hidden = true;
@@ -111,11 +120,21 @@
if (endWrap) endWrap.hidden = true; if (endWrap) endWrap.hidden = true;
} }
} }
sel.addEventListener('change', sync); 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(); sync();
}); });
/* 套餐表单:切换默认量单位文案 */ /* ---------- 套餐表单:切换默认量单位文案 ---------- */
document.querySelectorAll('form[data-package-form]').forEach(function (form) { document.querySelectorAll('form[data-package-form]').forEach(function (form) {
var label = form.querySelector('[data-unit-label]'); var label = form.querySelector('[data-unit-label]');
var radios = form.querySelectorAll('input[name="unit"]'); var radios = form.querySelectorAll('input[name="unit"]');
@@ -134,31 +153,59 @@
radios.forEach(function (r) { r.addEventListener('change', sync); }); radios.forEach(function (r) { r.addEventListener('change', sync); });
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,不闪。 唯一状态源是 <html data-bs-theme>:服务端按 Cookie 直出,
没有 cookie 时跟随系统(由 CSS 的 prefers-color-scheme 决定)。 */ 没有 Cookie 时由 <head> 里的内联脚本按系统偏好补上。 */
(function () { (function () {
'use strict'; 'use strict';
var KEY = 'daili_theme'; var KEY = 'daili_theme';
var root = document.documentElement;
var btns = document.querySelectorAll('[data-theme-toggle]'); var btns = document.querySelectorAll('[data-theme-toggle]');
if (!btns.length) return; if (!btns.length) return;
function effective() { function current() {
var attr = document.documentElement.getAttribute('data-theme'); return root.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light';
if (attr === 'light' || attr === 'dark') return attr; }
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? '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 () { btn.addEventListener('click', function () {
var next = effective() === 'dark' ? 'light' : 'dark'; var next = current() === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next); root.setAttribute('data-bs-theme', next);
document.documentElement.setAttribute('data-bs-theme', next);
document.cookie = KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax'; document.cookie = KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax';
paint();
}); });
}); });
paint();
})(); })();
/* ---------- 触摸小键盘 + 抽屉时钟 + 更多菜单 ---------- */ /* ---------- 触摸小键盘 + 抽屉时钟 + 更多菜单 ---------- */
@@ -171,14 +218,14 @@
var d = new Date(); var d = new Date();
var pad = function (n) { return n < 10 ? '0' + n : '' + n; }; var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
var t = pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()); 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); } 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 反查表单 // 键盘是表单的兄弟节点(不在 <form> 内),所以先找输入框,再用 input.form 反查表单
var scope = pad.closest('.drawer-block') || pad.parentElement || document; var scope = pad.closest('.drawer-block') || pad.parentElement || document;
var input = scope.querySelector('input[name="tail"]'); var input = scope.querySelector('input[name="tail"]');
@@ -222,33 +269,20 @@
/* 更多菜单:点开一个时收起其它,点空白处关闭 */ /* 更多菜单:点开一个时收起其它,点空白处关闭 */
document.addEventListener('click', function (e) { document.addEventListener('click', function (e) {
var opened = document.querySelectorAll('.more-actions[open]'); document.querySelectorAll('.more-actions[open]').forEach(function (d) {
Array.prototype.forEach.call(opened, function (d) {
if (!d.contains(e.target)) { d.removeAttribute('open'); } if (!d.contains(e.target)) { d.removeAttribute('open'); }
}); });
}); });
})(); })();
/* ---------- 触控/PC 小键盘模式 ---------- */
/* ---------- 全选 + 触控/PC 小键盘模式 ---------- */
(function () { (function () {
'use strict'; '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'; var KEY = 'daili_keypad_mode';
function applyMode(touch) { function applyMode(touch) {
Array.prototype.forEach.call(document.querySelectorAll('[data-keypad]'), function (pad) { document.querySelectorAll('[data-keypad]').forEach(function (pad) {
pad.hidden = !touch; pad.hidden = !touch;
var block = pad.closest('.drawer-block') || document; var block = pad.closest('.drawer-block') || document;
var input = block.querySelector('input[name="tail"]'); var input = block.querySelector('input[name="tail"]');
@@ -270,7 +304,7 @@
try { touchMode = localStorage.getItem(KEY) === 'touch'; } catch (err) { } try { touchMode = localStorage.getItem(KEY) === 'touch'; } catch (err) { }
applyMode(touchMode); 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 () { btn.addEventListener('click', function () {
touchMode = !touchMode; touchMode = !touchMode;
try { localStorage.setItem(KEY, touchMode ? 'touch' : 'pc'); } catch (err) { } try { localStorage.setItem(KEY, touchMode ? 'touch' : 'pc'); } catch (err) { }
+232 -355
View File
@@ -1,82 +1,70 @@
/* ============================================================ /* ============================================================
代打台 · 可视化大屏(记分板) 代打台 · 可视化大屏(v1.10)
默认深色;亮色由系统偏好或 [data-theme="light"] 覆盖 ------------------------------------------------------------
只认 <html data-bs-theme="light|dark">;默认由模板给 dark。
Bootstrap 只用于重置与栅格,视觉全部在本文件内闭环。
============================================================ */ ============================================================ */
:root { :root,
--bg: #0c0f12; [data-bs-theme="light"] {
--panel: #12161b; --scr-bg: #eef3ee;
--panel-2: #171c22; --scr-panel: #ffffff;
--line: #232a32; --scr-panel-2: #f7faf7;
--ink: #e9edf1; --scr-line: #dbe5dc;
--ink-2: #aab4bf; --scr-text: #0f241d;
--muted: #6f7b87; --scr-text-2: #33493f;
--accent: #58c1a3; --scr-muted: #5f7468;
--accent-2: #8bd9c4; --scr-accent: #1f6b52;
--danger: #ef6b62; --scr-accent-2: #2f8a69;
--warn: #e6ac55; --scr-accent-solid: #1f6b52;
--ok: #58c1a3; --scr-danger: #b3261e;
--glow: 0 0 24px rgba(88, 193, 163, 0.18); --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);
} }
@media (prefers-color-scheme: light) { [data-bs-theme="dark"] {
:root:not([data-theme="dark"]) { --scr-bg: #0a120f;
--bg: #f4f2ec; --scr-panel: #111a16;
--panel: #ffffff; --scr-panel-2: #16211c;
--panel-2: #faf9f5; --scr-line: #24352d;
--line: #e0ddd2; --scr-text: #e8f2ec;
--ink: #1b1e23; --scr-text-2: #b5c9bd;
--ink-2: #4a4f57; --scr-muted: #87a094;
--muted: #8a8f97; --scr-accent: #5cc4a3;
--accent: #2f7d68; --scr-accent-2: #7bd7b8;
--accent-2: #245c4d; --scr-accent-solid: #2b7d61;
--danger: #b3302a; --scr-danger: #f08a82;
--warn: #a0600f; --scr-warn: #e0b072;
--ok: #2f7d68; --scr-glow: 0 0 24px rgba(92, 196, 163, 0.16);
--glow: 0 0 18px rgba(47, 125, 104, 0.12); --scr-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
}
:root[data-theme="light"] {
--bg: #f4f2ec;
--panel: #ffffff;
--panel-2: #faf9f5;
--line: #e0ddd2;
--ink: #1b1e23;
--ink-2: #4a4f57;
--muted: #8a8f97;
--accent: #2f7d68;
--accent-2: #245c4d;
--danger: #b3302a;
--warn: #a0600f;
--ok: #2f7d68;
--glow: 0 0 18px rgba(47, 125, 104, 0.12);
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html, body { height: 100%; margin: 0; } html, body { height: 100%; margin: 0; }
body { body.screen-body {
background: background:
radial-gradient(1200px 600px at 15% -10%, rgba(47,163,122,.18), transparent 60%), radial-gradient(1200px 600px at 12% -10%, color-mix(in srgb, var(--scr-accent) 14%, transparent), transparent 60%),
radial-gradient(900px 500px at 100% 0%, rgba(22,84,63,.22), transparent 55%), radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--scr-accent) 8%, transparent), transparent 55%),
var(--bg); var(--scr-bg);
color: var(--ink); color: var(--scr-text);
font-family: "Bahnschrift", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; font-family: "Microsoft YaHei UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.45;
overflow: hidden; overflow: hidden;
-webkit-font-smoothing: antialiased;
} }
/* 背景:极淡的网格与光晕 */ body.screen-body::before {
body::before {
content: ""; content: "";
position: fixed; inset: 0; z-index: 0; pointer-events: none; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: background:
radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), linear-gradient(var(--scr-line) 1px, transparent 1px) 0 0 / 100% 44px,
linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 40px, linear-gradient(90deg, var(--scr-line) 1px, transparent 1px) 0 0 / 44px 100%;
linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 100%; opacity: 0.35;
opacity: 0.5;
} }
.scr { .scr {
@@ -85,69 +73,65 @@ body::before {
grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
gap: 10px; gap: 10px;
height: 100vh; height: 100vh;
height: 100dvh;
padding: 12px 16px 8px; padding: 12px 16px 8px;
} }
/* ---------- 头部 ---------- */ /* ---------- 头部 ---------- */
.scr-head { display: flex; align-items: center; gap: 16px; min-height: 40px; } .scr-head { display: flex; align-items: center; gap: 14px; min-height: 40px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--scr-line); }
.scr-brand { display: flex; align-items: baseline; gap: 6px; font-size: 17px; font-weight: 700; letter-spacing: 0.08em; } .scr-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: 0.06em; color: var(--scr-text); }
.scr-brand .mark { .scr-brand .mark {
display: inline-grid; place-items: center; display: inline-grid; place-items: center;
width: 24px; height: 24px; margin-right: 4px; width: 26px; height: 26px;
background: var(--accent); color: var(--bg); background: var(--scr-accent-solid); color: #fff;
font-size: 13px; border-radius: 2px; font-size: 13px; font-weight: 800; border-radius: 8px;
align-self: center;
} }
.scr-brand em { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: 0.2em; } .scr-brand em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--scr-muted); letter-spacing: 0.16em; }
.scr-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .scr-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.scr-tabs a { .scr-tabs a {
display: inline-flex; align-items: center; gap: 5px; display: inline-flex; align-items: center; gap: 5px;
height: 28px; padding: 0 11px; height: 28px; padding: 0 11px;
font-size: 12px; color: var(--ink-2); text-decoration: none; font-size: 12px; color: var(--scr-text-2); text-decoration: none;
border: 1px solid var(--line); border-radius: 999px; border: 1px solid var(--scr-line); border-radius: 999px;
background: var(--panel); background: var(--scr-panel);
} }
.scr-tabs a::before { .scr-tabs a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tab, var(--scr-accent)); }
content: ""; width: 6px; height: 6px; border-radius: 50%; .scr-tabs a:hover { border-color: var(--scr-accent); color: var(--scr-text); text-decoration: none; }
background: var(--tab, var(--accent)); .scr-tabs a.on { background: var(--scr-accent-solid); border-color: var(--scr-accent-solid); color: #fff; }
} .scr-tabs a.on::before { background: #fff; }
.scr-tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.scr-tabs a.on::before { background: var(--bg); }
.scr-tools { display: flex; align-items: center; gap: 8px; } .scr-tools { display: flex; align-items: center; gap: 8px; }
.scr-switch { .scr-switch {
height: 28px; padding: 0 10px; height: 28px; padding: 0 10px;
display: inline-flex; align-items: center; display: inline-flex; align-items: center;
font-size: 12px; color: var(--accent); text-decoration: none; font-size: 12px; color: var(--scr-accent); text-decoration: none;
border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); border: 1px solid color-mix(in srgb, var(--scr-accent) 40%, var(--scr-line));
border-radius: 999px; background: var(--panel); border-radius: 999px; background: var(--scr-panel);
} }
.scr-switch:hover { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); } .scr-switch:hover { background: color-mix(in srgb, var(--scr-accent) 12%, var(--scr-panel)); text-decoration: none; }
.scr-theme { .scr-theme {
width: 28px; height: 28px; padding: 0; width: 28px; height: 28px; padding: 0;
display: inline-grid; place-items: center; display: inline-grid; place-items: center;
border: 1px solid var(--line); border-radius: 999px; border: 1px solid var(--scr-line); border-radius: 999px;
background: var(--panel); color: var(--ink-2); background: var(--scr-panel); color: var(--scr-text-2);
font-size: 13px; cursor: pointer; font-size: 13px; cursor: pointer;
} }
.scr-theme:hover { border-color: var(--scr-accent); color: var(--scr-accent); }
.scr-theme .ic-sun { display: none; } .scr-theme .ic-sun { display: none; }
:root[data-theme="light"] .scr-theme .ic-sun { display: inline; } [data-bs-theme="dark"] .scr-theme .ic-sun { display: inline; }
:root[data-theme="light"] .scr-theme .ic-moon { display: none; } [data-bs-theme="dark"] .scr-theme .ic-moon { display: none; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .scr-theme .ic-sun { display: inline; }
:root:not([data-theme="dark"]) .scr-theme .ic-moon { display: none; }
}
.scr-clock { margin-left: auto; text-align: right; line-height: 1.1; } .scr-clock { margin-left: auto; text-align: right; line-height: 1.1; }
.scr-clock b { font-family: var(--mono, "Bahnschrift", monospace); font-size: 22px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .scr-clock b { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 22px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--scr-text); }
.scr-clock span { display: block; font-size: 11px; color: var(--muted); } .scr-clock span { display: block; font-size: 11px; color: var(--scr-muted); }
.scr-links { font-size: 11px; color: var(--muted); } .scr-links { font-size: 11px; color: var(--scr-muted); }
.scr-links a { color: var(--accent); text-decoration: none; } .scr-links a { color: var(--scr-accent); text-decoration: none; }
.scr-links a:hover { text-decoration: underline; }
/* ---------- KPI ---------- */ /* ---------- KPI ---------- */
@@ -155,23 +139,24 @@ body::before {
.kpi { .kpi {
position: relative; position: relative;
display: flex; align-items: baseline; gap: 6px; display: flex; align-items: baseline; gap: 6px;
padding: 10px 14px; padding: 10px 14px 10px 18px;
background: var(--panel); background: var(--scr-panel);
border: 1px solid var(--line); border: 1px solid var(--scr-line);
border-radius: 3px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: var(--scr-shadow);
} }
.kpi::after { .kpi::after {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--accent); background: var(--scr-accent);
} }
.kpi span { font-size: 12px; color: var(--muted); margin-right: auto; } .kpi span { font-size: 12px; color: var(--scr-muted); margin-right: auto; }
.kpi b { font-family: "Bahnschrift", monospace; font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .kpi b { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--scr-text); }
.kpi i { font-style: normal; font-size: 11px; color: var(--muted); } .kpi i { font-style: normal; font-size: 11px; color: var(--scr-muted); }
.kpi-hot::after { background: var(--danger); } .kpi-hot::after { background: var(--scr-danger); }
.kpi-hot b { color: var(--danger); } .kpi-hot b { color: var(--scr-danger); }
.kpi-warm::after { background: var(--warn); } .kpi-warm::after { background: var(--scr-warn); }
.kpi-warm b { color: var(--warn); } .kpi-warm b { color: var(--scr-warn); }
/* ---------- 主区 ---------- */ /* ---------- 主区 ---------- */
@@ -179,140 +164,146 @@ body::before {
.panel { .panel {
display: flex; flex-direction: column; min-height: 0; display: flex; flex-direction: column; min-height: 0;
background: var(--panel); background: var(--scr-panel);
border: 1px solid var(--line); border: 1px solid var(--scr-line);
border-radius: 3px; border-radius: 10px;
overflow: hidden; overflow: hidden;
box-shadow: var(--scr-shadow);
} }
.panel-head { .panel-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 9px 14px; padding: 9px 14px;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--scr-line);
background: var(--panel-2); background: var(--scr-panel-2);
} }
.panel-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.08em; font-weight: 700; } .panel-head h2 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--scr-text); }
.panel-head span { font-size: 11px; color: var(--muted); } .panel-head span { font-size: 11px; color: var(--scr-muted); }
/* 热力 */ /* 热力 */
.heat-grid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; min-height: 0; } .heat-grid { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; min-height: 0; min-width: 0; overflow: hidden; }
.heat-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .heat-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.heat-dow span { text-align: center; font-size: 10px; color: var(--muted); } .heat-dow span { text-align: center; font-size: 10px; color: var(--scr-muted); }
.heat-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .heat-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; align-items: stretch; }
.heat-cell { .heat-cell {
position: relative; position: relative;
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;
min-height: 0; aspect-ratio: 2.05 / 1; min-height: 34px; min-width: 0;
padding: 4px 7px; padding: 3px 7px 3px 9px;
border: 1px solid var(--line); border: 1px solid var(--scr-line); border-radius: 6px;
border-radius: 2px; background: var(--scr-panel-2);
background: var(--panel-2); font-size: 11px; color: var(--scr-muted);
font-size: 11px; color: var(--muted); overflow: hidden;
transition: transform 0.1s ease, border-color 0.1s ease; transition: transform 0.1s ease, border-color 0.1s ease;
} }
.heat-cell span { font-family: "Bahnschrift", monospace; font-size: 11px; } .heat-cell span { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 11px; color: var(--scr-text-2); }
.heat-cell b { font-family: "Bahnschrift", monospace; font-size: 12px; color: var(--ink-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 { opacity: 0.28; } .heat-cell.out { background: var(--scr-panel-2); border-color: var(--scr-line); }
.heat-cell.past { opacity: 0.66; } .heat-cell.out span, .heat-cell.out b { color: var(--scr-muted); }
.heat-cell.today { outline: 1px solid var(--accent); outline-offset: -1px; } .heat-cell.past { opacity: 1; }
.heat-cell.today span { color: var(--accent); font-weight: 700; } .heat-cell.today { outline: 1px solid var(--scr-accent); outline-offset: -1px; }
.heat-cell:hover { transform: translateY(-1px); border-color: var(--accent); z-index: 3; } .heat-cell.today span { color: var(--scr-accent); 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(--accent) 12%, var(--panel-2)); border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); } .heat-cell.h1 { background: color-mix(in srgb, var(--scr-accent) 10%, var(--scr-panel-2)); }
.heat-cell.h2 { background: color-mix(in srgb, var(--accent) 24%, var(--panel-2)); } .heat-cell.h2 { background: color-mix(in srgb, var(--scr-accent) 22%, var(--scr-panel-2)); }
.heat-cell.h3 { background: color-mix(in srgb, var(--accent) 38%, var(--panel-2)); } .heat-cell.h3 { background: color-mix(in srgb, var(--scr-accent) 36%, var(--scr-panel-2)); }
.heat-cell.h4 { background: color-mix(in srgb, var(--accent) 56%, var(--panel-2)); } .heat-cell.h4 { background: color-mix(in srgb, var(--scr-accent) 52%, var(--scr-panel-2)); }
.heat-cell.h3 b, .heat-cell.h4 b { color: var(--bg); } .heat-cell.h3 span, .heat-cell.h4 span { color: var(--scr-text); }
.heat-cell.h3 span, .heat-cell.h4 span { color: color-mix(in srgb, var(--bg) 75%, var(--accent)); } .heat-cell.h3 b, .heat-cell.h4 b { color: var(--scr-text); }
.cell-urgent { .cell-urgent {
position: absolute; top: 3px; right: 3px; position: absolute; top: 3px; right: 3px;
width: 5px; height: 5px; border-radius: 50%; width: 5px; height: 5px; border-radius: 50%;
background: var(--danger); background: var(--scr-danger);
box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 70%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--scr-danger) 70%, transparent);
} }
.heat-legend { .heat-legend { display: flex; align-items: center; gap: 4px; padding: 6px 14px 10px; font-size: 10px; color: var(--scr-muted); }
display: flex; align-items: center; gap: 4px;
padding: 6px 14px 10px;
font-size: 10px; color: var(--muted);
}
.heat-legend span { margin-right: 6px; } .heat-legend span { margin-right: 6px; }
.heat-legend i { .heat-legend i { width: 14px; height: 9px; border-radius: 2px; border: 1px solid var(--scr-line); display: inline-block; }
width: 14px; height: 9px; border-radius: 1px; .heat-legend i.h0 { background: var(--scr-panel-2); }
border: 1px solid var(--line); .heat-legend i.h1 { background: color-mix(in srgb, var(--scr-accent) 10%, var(--scr-panel-2)); }
display: inline-block; .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.h0 { background: var(--panel-2); } .heat-legend i.h4 { background: color-mix(in srgb, var(--scr-accent) 52%, var(--scr-panel-2)); }
.heat-legend i.h1 { background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); } .heat-legend .legend-hint { margin-left: auto; font-style: normal; opacity: 0.8; }
.heat-legend i.h2 { background: color-mix(in srgb, var(--accent) 24%, var(--panel-2)); }
.heat-legend i.h3 { background: color-mix(in srgb, var(--accent) 38%, var(--panel-2)); }
.heat-legend i.h4 { background: color-mix(in srgb, var(--accent) 56%, var(--panel-2)); }
.heat-legend .legend-hint { margin-left: auto; font-style: normal; opacity: 0.7; }
/* TOP 10 */ /* TOP 10 */
.top-list { list-style: none; margin: 0; padding: 6px 10px; overflow: hidden; flex: 1 1 auto; } .top-list { list-style: none; margin: 0; padding: 6px 10px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.top-item { .top-item {
display: grid; display: grid;
grid-template-columns: 22px 54px minmax(0, 1fr) auto auto 56px; grid-template-columns: 24px 56px minmax(0, 1fr) minmax(0, 118px) 78px 64px;
gap: 8px; align-items: center; gap: 8px; align-items: center;
padding: 5px 4px; padding: 5px 4px;
border-bottom: 1px dashed var(--line); border-bottom: 1px dashed var(--scr-line);
font-size: 12px; font-size: 12px;
} }
.top-item:last-child { border-bottom: 0; } .top-item:last-child { border-bottom: 0; }
.top-item .rank { font-family: "Bahnschrift", monospace; font-size: 11px; color: var(--muted); } .top-item .rank { grid-column: 1; font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 11px; color: var(--scr-muted); }
.top-item:nth-child(-n+3) .rank { color: var(--accent); font-weight: 700; } .top-item:nth-child(-n+3) .rank { color: var(--scr-accent); font-weight: 700; }
.top-tail { font-family: "Bahnschrift", monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; } .top-tail { grid-column: 2; font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: var(--scr-text); }
.top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .top-name { grid-column: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--scr-text-2); }
.top-pkg { .top-pkg {
font-size: 10px; padding: 1px 6px; border-radius: 2px; grid-column: 4;
border-left: 2px solid var(--tag, var(--accent)); font-size: 10px; padding: 1px 6px; border-radius: 999px;
background: color-mix(in srgb, var(--tag, var(--accent)) 14%, transparent); border-left: 2px solid var(--tag, var(--scr-accent));
color: var(--ink-2); white-space: nowrap; background: color-mix(in srgb, var(--tag, var(--scr-accent)) 14%, transparent);
color: var(--scr-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.top-remain { font-family: "Bahnschrift", monospace; font-size: 11px; white-space: nowrap; } .top-remain { grid-column: 5; font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 11px; color: var(--scr-text-2); white-space: nowrap; }
.top-item.lv-today .top-remain { color: var(--danger); font-weight: 700; } .top-bar { grid-column: 6; height: 4px; background: var(--scr-line); border-radius: 999px; overflow: hidden; }
.top-item.lv-warn .top-remain { color: var(--warn); } .top-bar i { display: block; height: 100%; background: var(--scr-accent); }
.top-bar { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; } .top-item.lv-today .top-remain { color: var(--scr-danger); font-weight: 700; }
.top-bar i { display: block; height: 100%; background: var(--accent); } .top-item.lv-warn .top-remain { color: var(--scr-warn); }
.top-item.lv-today .top-bar i { background: var(--danger); } .top-item.lv-today .top-bar i { background: var(--scr-danger); }
.top-item.lv-warn .top-bar i { background: var(--warn); } .top-item.lv-warn .top-bar i { background: var(--scr-warn); }
/* ---------- 底部两块 ---------- */ /* ---------- 底部两块 ---------- */
.scr-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 150px; max-height: 30vh; } .scr-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-height: 168px; max-height: 30vh; }
.today-list { list-style: none; margin: 0; padding: 4px 10px 8px; overflow: auto; } .today-list { list-style: none; margin: 0; padding: 4px 10px 8px; overflow: auto; min-height: 0; }
.today-list li { .today-list li {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; display: grid;
grid-template-columns: auto minmax(0, 1fr) 86px 52px 76px;
gap: 8px; align-items: center; gap: 8px; align-items: center;
padding: 5px 6px; padding: 5px 6px;
border-bottom: 1px dashed var(--line); border-bottom: 1px dashed var(--scr-line);
font-size: 12px; font-size: 12px;
} }
.today-list li:last-child { border-bottom: 0; } .today-list li:last-child { border-bottom: 0; }
.today-list li.urgent { .today-list li.urgent {
background: color-mix(in srgb, var(--danger) 9%, transparent); background: color-mix(in srgb, var(--scr-danger) 8%, transparent);
border-left: 2px solid var(--danger); border-left: 2px solid var(--scr-danger);
padding-left: 8px; padding-left: 8px;
} }
.today-list .tchip { grid-column: 1; }
.today-list .pkg { grid-column: 2; font-size: 10px; color: var(--scr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-list .asg { grid-column: 3; }
.today-list .tag-urgent { grid-column: 4; justify-self: start; }
.today-list .rem { grid-column: 5; font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 11px; color: var(--scr-text-2); white-space: nowrap; text-align: right; }
.tchip { .tchip {
display: inline-flex; align-items: baseline; gap: 3px; display: inline-flex; align-items: baseline; gap: 3px;
padding: 1px 6px; padding: 1px 6px;
border-left: 2px solid var(--tag, var(--accent)); border-left: 2px solid var(--tag, var(--scr-accent));
background: color-mix(in srgb, var(--tag, var(--accent)) 14%, transparent); background: color-mix(in srgb, var(--tag, var(--scr-accent)) 14%, transparent);
border-radius: 1px; white-space: nowrap; border-radius: 2px 6px 6px 2px; white-space: nowrap;
color: var(--scr-text-2);
} }
.tchip b { font-family: "Bahnschrift", monospace; font-size: 13px; } .tchip b { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 13px; color: var(--scr-text); }
.today-list .pkg { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-list .rem { font-family: "Bahnschrift", monospace; font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.tag-urgent { .tag-urgent {
font-size: 9px; line-height: 1; padding: 2px 4px; display: inline-flex; align-items: center;
background: var(--danger); color: #fff; border-radius: 2px; height: 18px; padding: 0 6px;
font-size: 10px; font-weight: 700; line-height: 1;
background: color-mix(in srgb, var(--scr-danger) 18%, var(--scr-panel));
color: var(--scr-danger);
border: 1px solid color-mix(in srgb, var(--scr-danger) 32%, transparent);
border-radius: 999px;
white-space: nowrap; white-space: nowrap;
} }
.scr-empty, .scr-empty-inline { color: var(--muted); font-size: 12px; padding: 16px; text-align: center; margin: 0; } .scr-empty, .scr-empty-inline { color: var(--scr-muted); font-size: 12px; padding: 16px; text-align: center; margin: 0; }
.scr-empty-inline { padding: 0; text-align: left; } .scr-empty-inline { padding: 0; text-align: left; }
/* ---------- 最近追加 ---------- */ /* ---------- 最近追加 ---------- */
@@ -320,18 +311,18 @@ body::before {
.scr-recent { .scr-recent {
display: flex; align-items: center; gap: 10px; display: flex; align-items: center; gap: 10px;
padding: 5px 12px; padding: 5px 12px;
background: var(--panel); background: var(--scr-panel);
border: 1px solid var(--line); border-radius: 3px; border: 1px solid var(--scr-line); border-radius: 10px;
font-size: 11px; color: var(--muted); font-size: 11px; color: var(--scr-muted);
overflow: hidden; overflow: hidden;
} }
.recent-label { flex: 0 0 auto; letter-spacing: 0.12em; color: var(--accent); font-size: 10px; } .recent-label { flex: 0 0 auto; letter-spacing: 0.12em; color: var(--scr-accent); font-size: 10px; }
.recent-track { display: flex; gap: 18px; overflow: hidden; white-space: nowrap; } .recent-track { display: flex; gap: 18px; overflow: hidden; white-space: nowrap; }
.recent-item { color: var(--ink-2); } .recent-item { color: var(--scr-text-2); }
.recent-item b { font-family: "Bahnschrift", monospace; font-size: 12px; color: var(--ink); margin-right: 3px; } .recent-item b { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 12px; color: var(--scr-text); margin-right: 3px; }
.recent-item em { font-style: normal; color: var(--accent); margin-left: 3px; } .recent-item em { font-style: normal; color: var(--scr-accent); margin-left: 3px; }
.scr-foot { text-align: center; font-size: 10px; color: var(--muted); letter-spacing: 0.06em; } .scr-foot { text-align: center; font-size: 10px; color: var(--scr-muted); letter-spacing: 0.06em; }
/* ---------- 当日明细浮层 ---------- */ /* ---------- 当日明细浮层 ---------- */
@@ -339,186 +330,72 @@ body::before {
position: fixed; z-index: 60; position: fixed; z-index: 60;
width: 340px; max-height: 62vh; overflow: auto; width: 340px; max-height: 62vh; overflow: auto;
padding: 10px 12px; padding: 10px 12px;
background: var(--panel); background: var(--scr-panel);
border: 1px solid var(--accent); border: 1px solid var(--scr-accent);
border-radius: 3px; border-radius: 10px;
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7), var(--glow); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55), var(--scr-glow);
font-size: 12px; font-size: 12px;
pointer-events: none; pointer-events: auto;
overscroll-behavior: contain;
} }
.day-pop[hidden] { display: none; } .day-pop[hidden] { display: none; }
.day-pop h4 { .day-pop h4 { margin: 0 0 6px; display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--scr-text); }
margin: 0 0 6px; display: flex; align-items: baseline; justify-content: space-between; .day-pop h4 small { font-weight: 400; color: var(--scr-muted); font-size: 10px; }
font-size: 12px; color: var(--ink); .day-pop .pop-meta { display: flex; gap: 10px; margin-bottom: 6px; font-size: 10px; color: var(--scr-muted); }
} .day-pop .pop-meta b { color: var(--scr-text-2); font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; }
.day-pop h4 small { font-weight: 400; color: var(--muted); font-size: 10px; }
.day-pop .pop-meta { display: flex; gap: 10px; margin-bottom: 6px; font-size: 10px; color: var(--muted); }
.day-pop .pop-meta b { color: var(--ink-2); font-family: "Bahnschrift", monospace; }
.day-pop ul { list-style: none; margin: 0; padding: 0; } .day-pop ul { list-style: none; margin: 0; padding: 0; }
.day-pop li { .day-pop li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--scr-line); }
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
gap: 6px; align-items: center;
padding: 3px 0; border-bottom: 1px dashed var(--line);
}
.day-pop li:last-child { border-bottom: 0; } .day-pop li:last-child { border-bottom: 0; }
.day-pop li.urgent { color: var(--danger); } .day-pop li.urgent { color: var(--scr-danger); }
.day-pop li.done { opacity: 0.45; text-decoration: line-through; } .day-pop li.done { opacity: 0.45; text-decoration: line-through; }
.day-pop .pop-tail { font-family: "Bahnschrift", monospace; font-size: 12px; font-weight: 700; } .day-pop .pop-tail { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.day-pop .pop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .day-pop .pop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--scr-text-2); }
.day-pop .pop-rem { font-size: 10px; color: var(--muted); white-space: nowrap; } .day-pop .pop-rem { font-size: 10px; color: var(--scr-muted); white-space: nowrap; }
.day-pop .pop-more { margin-top: 6px; font-size: 10px; color: var(--muted); text-align: right; } .day-pop .pop-more { margin-top: 6px; font-size: 10px; color: var(--scr-muted); text-align: right; }
.day-pop .pop-empty { color: var(--muted); text-align: center; padding: 8px 0; } .day-pop .pop-empty { color: var(--scr-muted); text-align: center; padding: 8px 0; }
/* ---------- 小屏适配(笔记本投屏也常见) ---------- */ /* ---------- 打手颜色 ---------- */
@media (max-width: 1200px) {
.scr-main { grid-template-columns: 1fr 1fr; }
.scr-kpis .kpi b { font-size: 24px; }
.top-item { grid-template-columns: 20px 48px minmax(0, 1fr) auto 48px; }
.top-item .top-pkg { display: none; }
}
@media (max-width: 860px) {
body { overflow: auto; }
.scr { height: auto; }
.scr-main, .scr-bottom { grid-template-columns: 1fr; }
.scr-tabs, .scr-links { display: none; }
}
/* ---------- 打手颜色(大屏) ---------- */
.asg-strip { .asg-strip {
position: absolute; left: 0; top: 0; bottom: 0; position: absolute; left: 0; top: 0; bottom: 0;
display: flex; flex-direction: column; display: flex; flex-direction: column;
width: 3px; overflow: hidden; width: 3px; overflow: hidden; border-radius: 6px 0 0 6px;
} }
.asg-strip i { display: block; flex: 1 1 0; min-height: 3px; } .asg-strip i { display: block; flex: 1 1 0; min-height: 3px; }
.asg-strip.sm { width: 3px; }
.heat-cell { padding-left: 9px; } .asg { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--scr-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asg i { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; }
.asg { .asg.none { color: var(--scr-muted); }
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; color: var(--ink-2); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.asg i { width: 7px; height: 7px; border-radius: 1px; flex: 0 0 auto; }
.asg.none { color: var(--muted); }
.asg.none i { opacity: 0.5; } .asg.none i { opacity: 0.5; }
.today-list li { grid-template-columns: auto minmax(0, 1fr) auto auto auto; } .pop-who { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
.pop-who { /* ---------- 小屏 / 投屏适配 ---------- */
display: inline-block; width: 7px; height: 7px;
border-radius: 1px; margin-right: 4px; vertical-align: 0; @media (max-width: 1200px) {
.scr-main { grid-template-columns: 1fr 1fr; }
.scr-kpis .kpi b { font-size: 24px; }
.top-item { grid-template-columns: 24px 52px minmax(0, 1fr) 78px 56px; }
.top-item .top-pkg { display: none; }
.top-remain { grid-column: 4; }
.top-bar { grid-column: 5; }
.today-list li { grid-template-columns: auto minmax(0, 1fr) 52px 76px; }
.today-list .asg { display: none; }
.today-list .tag-urgent { grid-column: 3; }
.today-list .rem { grid-column: 4; }
} }
@media (max-width: 860px) {
body.screen-body { overflow: auto; }
.scr { height: auto; }
.scr-main, .scr-bottom { grid-template-columns: 1fr; }
.scr-bottom { max-height: none; }
.scr-tabs, .scr-links { display: none; }
.scr-clock { margin-left: 0; }
.scr-kpis { grid-template-columns: 1fr 1fr; }
}
/* ---------- v1.9.1:大屏对齐 Bootstrap ---------- */ @media (prefers-reduced-motion: reduce) {
.heat-cell { border-color: var(--bs-border-color); } .heat-cell { transition: none; }
.heat-cell.h1 { background: rgba(var(--bs-success-rgb), 0.14); }
.heat-cell.h2 { background: rgba(var(--bs-success-rgb), 0.26); }
.heat-cell.h3 { background: rgba(var(--bs-success-rgb), 0.40); }
.heat-cell.h4 { background: rgba(var(--bs-success-rgb), 0.58); }
.scr-kpis .kpi { --bs-card-border-color: var(--bs-border-color); }
/* v1.9.2 ink */
.scr-tabs a.on { background: linear-gradient(135deg,#16543f,#2fa37a); border-color: transparent; }
/* v1.9.4:大屏弱化文字提亮,提升可读性 */
.scr { --muted: #9fb8ab; --ink-2: #b9d2c6; }
.scr-links, .scr-foot, .scr-head .sub, .scr-head em,
.kpi small, .kpi .unit, .panel-sub,
.top-item .meta, .top-item .sub, .due-item .sub,
.heat-cell .lbl, .scr-note { color: #a9c3b6 !important; }
.scr a { color: #8fe0bf !important; }
.cal-dow span, .scr-cal .dow { color: #a9c3b6 !important; }
.kpi b, .kpi strong { color: #eafff6 !important; }
.heat-cell.h1 { color: #dff5ea; }
/* v1.9.4:非本月日期再提亮一档 */
.heat-cell.out, .scr-cal .out { color: #a9c3b6 !important; opacity: .85; }
/* v1.9.5:热力日历对齐修复 + 文字反色 */
.panel-head { position: relative; z-index: 2; }
.heat-grid { overflow: hidden; min-width: 0; }
.heat-dow, .heat-row {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
grid-auto-flow: row;
gap: 4px;
width: 100%;
min-width: 0;
} }
.heat-row { align-items: stretch; }
.heat-cell {
width: 100% !important;
min-width: 0;
aspect-ratio: auto !important;
min-height: 34px;
padding: 2px 6px;
overflow: hidden;
}
.heat-cell span, .heat-cell b, .heat-cell em {
color: var(--ink-ink) !important;
font-family: "Bahnschrift", monospace;
white-space: nowrap;
}
.heat-cell b { color: #63d6ad !important; font-weight: 700; }
.heat-cell.out { opacity: .45 !important; }
.heat-cell.past { opacity: .75 !important; }
.heat-legend { margin-top: 6px; color: var(--muted); }
/* ---------- v1.9.5:大屏浅色主题配色修复 ---------- */
:root[data-theme="light"] .scr,
:root[data-bs-theme="light"] .scr {
--bg: #f2f7f4;
--surface: #ffffff;
--surface-2: #eaf1ed;
--line: #d7e3dc;
--line-2: #c6d8cf;
--muted: #55705f;
--ink: #0f241d;
--ink-2: #27453a;
--accent: #16543f;
--accent-2: #1d7a58;
color: #0f241d;
}
:root[data-theme="light"] .scr a,
:root[data-bs-theme="light"] .scr a { color: #16543f; }
:root[data-theme="light"] .scr em,
:root[data-theme="light"] .scr small,
:root[data-theme="light"] .scr .sub,
:root[data-theme="light"] .scr .meta,
:root[data-theme="light"] .scr .unit,
:root[data-theme="light"] .scr .panel-sub,
:root[data-theme="light"] .scr .scr-links,
:root[data-theme="light"] .scr .scr-foot { color: #55705f !important; }
:root[data-theme="light"] .scr-tags a,
:root[data-theme="light"] .scr-tabs a,
:root[data-theme="light"] .scr-switch,
:root[data-theme="light"] .scr-head .sub { color: #27453a !important; background: #ffffff; border: 1px solid #d7e3dc; }
:root[data-theme="light"] .scr-tags a.on,
:root[data-theme="light"] .scr-tabs a.on { color: #ffffff !important; background: linear-gradient(135deg,#16543f,#2fa37a); border-color: transparent; }
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .kpi b,
:root[data-theme="light"] .kpi strong,
:root[data-theme="light"] .kpi small,
:root[data-theme="light"] .kpi .unit { color: #0f241d !important; }
:root[data-theme="light"] .kpi b,
:root[data-theme="light"] .kpi strong { color: #16543f !important; }
:root[data-theme="light"] .heat-cell,
:root[data-theme="light"] .heat-cell span,
:root[data-theme="light"] .heat-cell b { color: #0f241d !important; }
:root[data-theme="light"] .heat-cell b { color: #16543f !important; }
:root[data-theme="light"] .heat-cell.out { opacity: .55 !important; }
:root[data-theme="light"] .heat-cell .note,
:root[data-theme="light"] .heat-legend { color: #55705f !important; }
:root[data-theme="light"] .top-item,
:root[data-theme="light"] .top-item span,
:root[data-theme="light"] .top-item b,
:root[data-theme="light"] .due-item,
:root[data-theme="light"] .today-item { color: #0f241d !important; }
:root[data-theme="light"] .top-item .pkg-tag,
:root[data-theme="light"] .top-item em,
:root[data-theme="light"] .today-item em { color: #1d7a58 !important; }
:root[data-theme="light"] .panel-head h2 { color: #0f241d; }
:root[data-theme="light"] .heat-dow span { color: #55705f !important; }
:root[data-theme="light"] .scr-note { color: #55705f !important; }
+47 -17
View File
@@ -1,4 +1,4 @@
/* 大屏:时钟 + 全屏 + 主题 + 日历悬停明细 */ /* 大屏:时钟 + 全屏 + 主题 + 日历悬停/点按明细 */
(function () { (function () {
'use strict'; 'use strict';
@@ -25,32 +25,42 @@
document.documentElement.requestFullscreen(); document.documentElement.requestFullscreen();
} }
} }
if (e.key === 'Escape') { hide(); }
}); });
/* ---------- 主题切换 ---------- */ /* ---------- 主题切换:唯一状态源 data-bs-theme ---------- */
var THEME_KEY = 'daili_theme'; var THEME_KEY = 'daili_theme';
function effectiveTheme() { var root = document.documentElement;
var attr = document.documentElement.getAttribute('data-theme'); var themeBtns = document.querySelectorAll('[data-theme-toggle]');
if (attr === 'light' || attr === 'dark') return attr;
return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'; function currentTheme() {
return root.getAttribute('data-bs-theme') === 'light' ? 'light' : 'dark';
} }
document.querySelectorAll('[data-theme-toggle]').forEach(function (btn) { function paintTheme() {
var dark = currentTheme() === 'dark';
themeBtns.forEach(function (b) { b.setAttribute('aria-pressed', dark ? 'true' : 'false'); });
}
themeBtns.forEach(function (btn) {
btn.addEventListener('click', function () { btn.addEventListener('click', function () {
var next = effectiveTheme() === 'dark' ? 'light' : 'dark'; var next = currentTheme() === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next); root.setAttribute('data-bs-theme', next);
document.cookie = THEME_KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax'; document.cookie = THEME_KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax';
paintTheme();
}); });
}); });
paintTheme();
/* ---------- 日历格子悬停明细 ---------- */ /* ---------- 日历格子明细 ---------- */
var root = document.querySelector('.scr'); var scr = document.querySelector('.scr');
var pop = document.getElementById('day-pop'); var pop = document.getElementById('day-pop');
if (!root || !pop) return; if (!scr || !pop) return;
var api = root.getAttribute('data-api') || '/api/screen/day'; var api = scr.getAttribute('data-api') || '/api/screen/day';
var pkg = root.getAttribute('data-pkg') || '0'; var pkg = scr.getAttribute('data-pkg') || '0';
var cache = {}; var cache = {};
var hideTimer = null; var hideTimer = null;
var pinned = false;
function esc(s) { function esc(s) {
return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
@@ -77,7 +87,7 @@
var d = new Date(data.date + 'T00:00:00'); var d = new Date(data.date + 'T00:00:00');
var label = data.date + ' 周' + '日一二三四五六'.charAt(d.getDay()); var label = data.date + ' 周' + '日一二三四五六'.charAt(d.getDay());
var html = '<h4>' + esc(label) + '<small>' + data.total + ' 单 · 已完成 ' + data.done + var html = '<h4>' + esc(label) + '<small>' + data.total + ' 单 · 已完成 ' + data.done +
(data.urgent ? ' · <span style="color:var(--danger)">加急 ' + data.urgent + '</span>' : '') + '</small></h4>'; (data.urgent ? ' · <span style="color:var(--scr-danger)">加急 ' + data.urgent + '</span>' : '') + '</small></h4>';
if (!data.items || !data.items.length) { if (!data.items || !data.items.length) {
html += '<div class="pop-empty">这天没有排单</div>'; html += '<div class="pop-empty">这天没有排单</div>';
} else { } else {
@@ -121,12 +131,32 @@
}); });
} }
function hideSoon() { function hide() {
hideTimer = setTimeout(function () { pop.hidden = true; }, 160); clearTimeout(hideTimer);
pinned = false;
pop.hidden = true;
} }
function hideSoon() {
if (pinned) return;
clearTimeout(hideTimer);
hideTimer = setTimeout(function () { pop.hidden = true; }, 260);
}
function keepOpen() { clearTimeout(hideTimer); }
document.querySelectorAll('.heat-cell[data-date]').forEach(function (cell) { document.querySelectorAll('.heat-cell[data-date]').forEach(function (cell) {
cell.addEventListener('mouseenter', function () { show(cell); }); cell.addEventListener('mouseenter', function () { show(cell); });
cell.addEventListener('mouseleave', hideSoon); cell.addEventListener('mouseleave', hideSoon);
cell.addEventListener('focus', function () { show(cell); });
cell.addEventListener('click', function (e) {
e.preventDefault();
var openForCell = !pop.hidden && pop.dataset.date === cell.getAttribute('data-date');
if (openForCell) { hide(); return; }
pinned = true;
show(cell);
pop.dataset.date = cell.getAttribute('data-date');
});
}); });
pop.addEventListener('mouseenter', keepOpen);
pop.addEventListener('mouseleave', function () { if (!pinned) hideSoon(); });
})(); })();
+38 -22
View File
@@ -1,37 +1,48 @@
{{define "layout"}}<!doctype html> {{define "layout"}}<!doctype html>
<html lang="zh-CN" data-bs-theme="{{if eq .Theme "dark"}}dark{{else}}light{{end}}"> <html lang="zh-CN"{{if .Theme}} data-bs-theme="{{.Theme}}"{{end}}>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>{{.Title}} · 代打台</title> <title>{{.Title}} · 代打台</title>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/static/favicon.svg?v={{.AssetVersion}}" type="image/svg+xml">
<link rel="stylesheet" href="/static/app.css?v={{.Version}}"> <script>
<link rel="stylesheet" href="/static/vendor/bootstrap.min.css?v={{.Version}}"> /* 首屏主题:服务端没有写 data-bs-theme 时(还没选过主题)跟随系统,避免闪白 */
(function () {
var d = document.documentElement;
if (d.hasAttribute('data-bs-theme')) return;
var dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
d.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
})();
</script>
<link rel="stylesheet" href="/static/vendor/bootstrap.min.css?v={{.AssetVersion}}">
<link rel="stylesheet" href="/static/app.css?v={{.AssetVersion}}">
</head> </head>
<body class="bg-body-tertiary"> <body>
{{if .User}} {{if .User}}
<nav class="navbar navbar-expand-lg bg-body border-bottom sticky-top"> <nav class="navbar navbar-expand-xl app-navbar sticky-top">
<div class="container-fluid"> <div class="container-fluid">
<a class="navbar-brand fw-bold text-success" href="/calendar">代打台</a> <a class="navbar-brand" href="/calendar"><span class="brand-mark" aria-hidden="true">代</span><span>代打台</span></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"><span class="navbar-toggler-icon"></span></button> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="展开导航"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="mainNav"> <div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link{{if eq .Nav "calendar"}} active{{end}}" href="/calendar">日历</a></li> <li class="nav-item"><a class="nav-link{{if eq .Nav "calendar"}} active{{end}}" href="/calendar">日历</a></li>
<li class="nav-item"><a class="nav-link{{if eq .Nav "customers"}} active{{end}}" href="/customers">客户</a></li> <li class="nav-item"><a class="nav-link{{if eq .Nav "customers"}} active{{end}}" href="/customers">客户</a></li>
<li class="nav-item"><a class="nav-link{{if eq .Nav "subscriptions"}} active{{end}}" href="/subscriptions">订阅</a></li> <li class="nav-item"><a class="nav-link{{if eq .Nav "subscriptions"}} active{{end}}" href="/subscriptions">订阅</a></li>
<li class="nav-item"><a class="nav-link{{if eq .Nav "packages"}} active{{end}}" href="/packages">套餐</a></li> <li class="nav-item"><a class="nav-link{{if eq .Nav "packages"}} active{{end}}" href="/packages">套餐</a></li>
<li class="nav-item"><a class="nav-link" href="/screen" target="_blank" rel="noopener">大屏 ↗</a></li> <li class="nav-item"><a class="nav-link nav-screen" href="/screen" target="_blank" rel="noopener">大屏 ↗</a></li>
</ul> </ul>
<form class="d-flex me-2" role="search" action="/customers" method="get"> <form class="nav-search" role="search" action="/customers" method="get">
<input class="form-control form-control-sm" type="search" name="q" value="{{.Query}}" placeholder="手机尾号 / 姓名 / 游戏名" aria-label="搜索客户" data-search> <input class="form-control form-control-sm" type="search" name="q" value="{{.Query}}" placeholder="手机尾号 / 姓名 / 游戏名" aria-label="搜索客户" data-search>
<kbd aria-hidden="true">/</kbd>
</form> </form>
<div class="d-flex align-items-center gap-2"> <div class="nav-side">
<a class="badge text-bg-danger text-decoration-none" href="/subscriptions?state=due_today">今日到期 {{.DueToday}}</a> <a class="badge-due" href="/subscriptions?state=due_today" title="今天到期">今日到期 <b>{{.DueToday}}</b></a>
<a class="badge text-bg-warning text-decoration-none" href="/subscriptions?state=due3">3 天内 {{.Due3}}</a> <a class="badge-warn" href="/subscriptions?state=due3" title="3 天内到期">3 天内 <b>{{.Due3}}</b></a>
<a class="badge text-bg-secondary text-decoration-none" href="/subscriptions?state=due7">7 天内 {{.Due7}}</a> <a class="badge-muted" href="/subscriptions?state=due7" title="7 天内到期">7 天内 <b>{{.Due7}}</b></a>
<button class="btn btn-sm btn-outline-secondary" type="button" data-theme-toggle aria-label="切换亮色/暗色"><span class="ic-moon">☾</span><span class="ic-sun">☀</span></button> <button class="theme-toggle" type="button" data-theme-toggle aria-label="切换亮色/暗色" aria-pressed="false"><span class="ic-moon" aria-hidden="true">☾</span><span class="ic-sun" aria-hidden="true">☀</span></button>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">{{if .User.DisplayName}}{{.User.DisplayName}}{{else}}{{.User.Username}}{{end}}</button> <button class="btn btn-soft btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">{{if .User.DisplayName}}{{.User.DisplayName}}{{else}}{{.User.Username}}{{end}}</button>
<ul class="dropdown-menu dropdown-menu-end"> <ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="/settings">设置</a></li> <li><a class="dropdown-item" href="/settings">设置</a></li>
<li><a class="dropdown-item" href="/logs">操作日志</a></li> <li><a class="dropdown-item" href="/logs">操作日志</a></li>
@@ -44,11 +55,16 @@
</div> </div>
</nav> </nav>
{{end}} {{end}}
{{if .Flash}}<div class="alert alert-success alert-dismissible fade show m-3" role="alert" data-flash>{{.Flash}}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>{{end}} {{if .Flash}}<div class="flash" role="status" data-flash>{{.Flash}}</div>{{end}}
{{if .Error}}<div class="alert alert-danger m-3" role="alert">{{.Error}}</div>{{end}} {{if .Error}}<div class="notice notice-danger" role="alert">{{.Error}}</div>{{end}}
<main class="{{if .User}}container-fluid py-3{{end}}">{{template "content" .}}</main> <main class="{{if .User}}app-main{{else}}auth-main{{end}}">{{template "content" .}}</main>
{{if .User}}<footer class="container-fluid text-secondary small border-top py-3 mt-4">代打台 v{{.Version}} · <a href="/logs">操作日志</a> · <a href="/settings">设置</a> · <a href="/screen" target="_blank" rel="noopener">大屏</a></footer>{{end}} {{if .User}}<footer class="app-foot">
<script src="/static/vendor/bootstrap.bundle.min.js?v={{.Version}}" defer></script> <span>代打台 <span class="foot-version">v{{.Version}}</span></span>
<script src="/static/app.js?v={{.Version}}" defer></script> <a href="/logs">操作日志</a>
<a href="/settings">设置</a>
<a href="/screen" target="_blank" rel="noopener">大屏</a>
</footer>{{end}}
<script src="/static/vendor/bootstrap.bundle.min.js?v={{.AssetVersion}}" defer></script>
<script src="/static/app.js?v={{.AssetVersion}}" defer></script>
</body> </body>
</html>{{end}} </html>{{end}}
+12 -12
View File
@@ -3,9 +3,9 @@
{{define "pager"}} {{define "pager"}}
{{if gt .Pages 1}} {{if gt .Pages 1}}
<nav class="pager"> <nav class="pager">
{{if .Prev}}<a class="btn btn-sm" href="{{.Prev}}">← 上一页</a>{{else}}<span class="btn btn-sm disabled">← 上一页</span>{{end}} {{if .Prev}}<a class="btn btn-soft btn-sm" href="{{.Prev}}">← 上一页</a>{{else}}<span class="btn btn-soft btn-sm disabled">← 上一页</span>{{end}}
<span class="pager-info">{{.Page}} / {{.Pages}} 页 · 共 {{.Total}} 条</span> <span class="pager-info">{{.Page}} / {{.Pages}} 页 · 共 {{.Total}} 条</span>
{{if .Next}}<a class="btn btn-sm" href="{{.Next}}">下一页 →</a>{{else}}<span class="btn btn-sm disabled">下一页 →</span>{{end}} {{if .Next}}<a class="btn btn-soft btn-sm" href="{{.Next}}">下一页 →</a>{{else}}<span class="btn btn-soft btn-sm disabled">下一页 →</span>{{end}}
</nav> </nav>
{{end}} {{end}}
{{end}} {{end}}
@@ -38,7 +38,7 @@
<form method="post" action="/subscriptions/{{.ID}}/checkin"> <form method="post" action="/subscriptions/{{.ID}}/checkin">
<input type="hidden" name="date" value="{{.Today}}"> <input type="hidden" name="date" value="{{.Today}}">
<input type="hidden" name="status" value="done"> <input type="hidden" name="status" value="done">
<button class="btn btn-sm">今日打卡</button> <button class="btn btn-primary btn-sm">今日打卡</button>
</form> </form>
{{end}} {{end}}
{{if .Season}} {{if .Season}}
@@ -51,27 +51,27 @@
<span class="chip chip-active">赛季已完成 {{.SeasonDone}}</span> <span class="chip chip-active">赛季已完成 {{.SeasonDone}}</span>
{{end}} {{end}}
{{else}} {{else}}
<a class="btn btn-primary btn-sm" href="?extend={{.ID}}#extend">{{if eq .Unit "day"}}追加时长{{else}}追加次数{{end}}</a> <a class="btn btn-soft btn-sm" href="?extend={{.ID}}#extend">{{if eq .Unit "day"}}追加时长{{else}}追加次数{{end}}</a>
{{end}} {{end}}
{{if eq .Status "active"}} {{if eq .Status "active"}}
<form method="post" action="/subscriptions/{{.ID}}/pause" data-confirm="暂停后剩余时长冻结,确认暂停?"> <form method="post" action="/subscriptions/{{.ID}}/pause" data-confirm="暂停后剩余时长冻结,确认暂停?">
<button class="btn btn-sm">暂停</button> <button class="btn btn-soft btn-sm">暂停</button>
</form> </form>
{{else if eq .Status "paused"}} {{else if eq .Status "paused"}}
<form method="post" action="/subscriptions/{{.ID}}/resume"> <form method="post" action="/subscriptions/{{.ID}}/resume">
<button class="btn btn-sm">恢复</button> <button class="btn btn-soft btn-sm">恢复</button>
</form> </form>
{{end}} {{end}}
<form method="post" action="/subscriptions/{{.ID}}/close" data-confirm="结束后该订阅不再出现在待打清单,确认结束?"> <form method="post" action="/subscriptions/{{.ID}}/close" data-confirm="结束后该订阅不再出现在待打清单,确认结束?">
<button class="btn btn-sm btn-ghost">结束</button> <button class="btn btn-ghost btn-sm">结束</button>
</form> </form>
{{else}} {{else}}
<form method="post" action="/subscriptions/{{.ID}}/reopen"> <form method="post" action="/subscriptions/{{.ID}}/reopen">
<button class="btn btn-sm">重新启用</button> <button class="btn btn-soft btn-sm">重新启用</button>
</form> </form>
<form method="post" action="/subscriptions/{{.ID}}/delete" data-confirm="将永久删除该订阅及其打卡/追加记录,无法恢复。确定删除?"> <form method="post" action="/subscriptions/{{.ID}}/delete" data-confirm="将永久删除该订阅及其打卡/追加记录,无法恢复。确定删除?">
<input type="hidden" name="confirm" value="delete"> <input type="hidden" name="confirm" value="delete">
<button class="btn btn-sm btn-ghost" style="color:var(--danger)">删除</button> <button class="btn btn-ghost btn-sm text-danger">删除</button>
</form> </form>
{{end}} {{end}}
</div> </div>
@@ -83,7 +83,7 @@
<header class="extend-head"> <header class="extend-head">
<div> <div>
<h3>给 {{.Sub.CustomerTail}} {{.Sub.CustomerName}} 追加{{if .IsDay}}时长{{else}}次数{{end}}</h3> <h3>给 {{.Sub.CustomerTail}} {{.Sub.CustomerName}} 追加{{if .IsDay}}时长{{else}}次数{{end}}</h3>
<p class="muted">{{.Sub.PackageName}} · {{.View.RemainText}} · {{.View.PeriodText}}</p> <p>{{.Sub.PackageName}} · {{.View.RemainText}} · {{.View.PeriodText}}</p>
</div> </div>
<a class="extend-close" href="{{.Back}}" aria-label="关闭">×</a> <a class="extend-close" href="{{.Back}}" aria-label="关闭">×</a>
</header> </header>
@@ -118,7 +118,7 @@
</label> </label>
<div class="actions"> <div class="actions">
<button type="submit" class="btn btn-primary">确认追加</button> <button type="submit" class="btn btn-primary">确认追加</button>
<a class="btn" href="{{.Back}}">取消</a> <a class="btn btn-soft" href="{{.Back}}">取消</a>
</div> </div>
</form> </form>
{{else}} {{else}}
@@ -142,7 +142,7 @@
</label> </label>
<div class="actions"> <div class="actions">
<button type="submit" class="btn btn-primary">确认追加</button> <button type="submit" class="btn btn-primary">确认追加</button>
<a class="btn" href="{{.Back}}">取消</a> <a class="btn btn-soft" href="{{.Back}}">取消</a>
</div> </div>
</form> </form>
{{end}} {{end}}
+7 -6
View File
@@ -1,17 +1,18 @@
{{define "screenlayout"}}<!doctype html> {{define "screenlayout"}}<!doctype html>
<html lang="zh-CN" data-bs-theme="{{if eq .Theme "light"}}light{{else}}dark{{end}}"{{if .Theme}} data-theme="{{.Theme}}"{{end}}> <html lang="zh-CN" data-bs-theme="{{if eq .Theme "light"}}light{{else}}dark{{end}}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="dark light">
<meta http-equiv="refresh" content="{{.D.Refresh}}"> <meta http-equiv="refresh" content="{{.D.Refresh}}">
<title>{{.Title}} · 代打台</title> <title>{{.Title}} · 代打台</title>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"> <link rel="icon" href="/static/favicon.svg?v={{.D.AssetVersion}}" type="image/svg+xml">
<link rel="stylesheet" href="/static/vendor/bootstrap.min.css?v={{.D.Version}}"> <link rel="stylesheet" href="/static/vendor/bootstrap.min.css?v={{.D.AssetVersion}}">
<link rel="stylesheet" href="/static/screen.css?v={{.D.Version}}"> <link rel="stylesheet" href="/static/screen.css?v={{.D.AssetVersion}}">
</head> </head>
<body class="screen-body"> <body class="screen-body">
{{template "content" .}} {{template "content" .}}
<script src="/static/vendor/bootstrap.bundle.min.js?v={{.D.Version}}" defer></script> <script src="/static/vendor/bootstrap.bundle.min.js?v={{.D.AssetVersion}}" defer></script>
<script src="/static/screen.js?v={{.D.Version}}" defer></script> <script src="/static/screen.js?v={{.D.AssetVersion}}" defer></script>
</body> </body>
</html>{{end}} </html>{{end}}
+18 -18
View File
@@ -5,7 +5,7 @@
<a class="btn btn-ghost btn-square" href="/calendar?y={{.D.PrevY}}&m={{.D.PrevM}}&{{.D.FilterQuery}}" aria-label="上个月">‹</a> <a class="btn btn-ghost btn-square" href="/calendar?y={{.D.PrevY}}&m={{.D.PrevM}}&{{.D.FilterQuery}}" aria-label="上个月">‹</a>
<h1>{{.D.Title}}</h1> <h1>{{.D.Title}}</h1>
<a class="btn btn-ghost btn-square" href="/calendar?y={{.D.NextY}}&m={{.D.NextM}}&{{.D.FilterQuery}}" aria-label="下个月">›</a> <a class="btn btn-ghost btn-square" href="/calendar?y={{.D.NextY}}&m={{.D.NextM}}&{{.D.FilterQuery}}" aria-label="下个月">›</a>
<a class="btn btn-sm" href="/calendar?{{.D.FilterQuery}}">回到今天</a> <a class="btn btn-soft btn-sm" href="/calendar?{{.D.FilterQuery}}">回到今天</a>
</div> </div>
<div class="cal-stats"> <div class="cal-stats">
<span><em>{{.D.MonthDue}}</em>本月到期</span> <span><em>{{.D.MonthDue}}</em>本月到期</span>
@@ -89,18 +89,18 @@
</form> </form>
<p class="muted small quick-hint">唯一匹配直接完成;同尾号多人 / 一单多服务会列出让你勾选。</p> <p class="muted small quick-hint">唯一匹配直接完成;同尾号多人 / 一单多服务会列出让你勾选。</p>
<div class="keypad" data-keypad role="group" aria-label="数字小键盘" hidden> <div class="keypad" data-keypad role="group" aria-label="数字小键盘" hidden>
<button type="button" class="key btn btn-outline-secondary" data-key="1">1</button> <button type="button" class="key" data-key="1">1</button>
<button type="button" class="key btn btn-outline-secondary" data-key="2">2</button> <button type="button" class="key" data-key="2">2</button>
<button type="button" class="key btn btn-outline-secondary" data-key="3">3</button> <button type="button" class="key" data-key="3">3</button>
<button type="button" class="key btn btn-outline-secondary" data-key="4">4</button> <button type="button" class="key" data-key="4">4</button>
<button type="button" class="key btn btn-outline-secondary" data-key="5">5</button> <button type="button" class="key" data-key="5">5</button>
<button type="button" class="key btn btn-outline-secondary" data-key="6">6</button> <button type="button" class="key" data-key="6">6</button>
<button type="button" class="key btn btn-outline-secondary" data-key="7">7</button> <button type="button" class="key" data-key="7">7</button>
<button type="button" class="key btn btn-outline-secondary" data-key="8">8</button> <button type="button" class="key" data-key="8">8</button>
<button type="button" class="key btn btn-outline-secondary" data-key="9">9</button> <button type="button" class="key" data-key="9">9</button>
<button type="button" class="key key-fn btn btn-outline-secondary" data-key="back" aria-label="退格">⌫</button> <button type="button" class="key key-fn" data-key="back" aria-label="退格">⌫</button>
<button type="button" class="key btn btn-outline-secondary" data-key="0">0</button> <button type="button" class="key" data-key="0">0</button>
<button type="button" class="key key-ok btn btn-success" data-key="ok" aria-label="确认完成">✓</button> <button type="button" class="key key-ok" data-key="ok" aria-label="确认完成">✓</button>
</div> </div>
{{if .D.PickTail}} {{if .D.PickTail}}
@@ -129,7 +129,7 @@
</ul> </ul>
<div class="actions"> <div class="actions">
<button class="btn btn-primary btn-sm" type="submit">确认完成选中项</button> <button class="btn btn-primary btn-sm" type="submit">确认完成选中项</button>
<a class="btn btn-sm" href="{{.D.Back}}">取消</a> <a class="btn btn-soft btn-sm" href="{{.D.Back}}">取消</a>
</div> </div>
</form> </form>
{{else}} {{else}}
@@ -148,7 +148,7 @@
<span class="ticket" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span> <span class="ticket" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
<span class="pkg">{{.PackageName}}</span> <span class="pkg">{{.PackageName}}</span>
<span class="chip {{if .Done}}chip-active{{else}}chip-paused{{end}}">{{if .Done}}已完成{{else}}已跳过{{end}}</span> <span class="chip {{if .Done}}chip-active{{else}}chip-paused{{end}}">{{if .Done}}已完成{{else}}已跳过{{end}}</span>
{{if .Urgent}}<span class="badge text-bg-danger tag-urgent">加急</span>{{end}} {{if .Urgent}}<span class="tag-urgent">加急</span>{{end}}
<span class="fold-caret" aria-hidden="true"></span> <span class="fold-caret" aria-hidden="true"></span>
</summary> </summary>
<div class="done-detail"> <div class="done-detail">
@@ -173,7 +173,7 @@
<input type="hidden" name="back" value="{{$.D.Back}}"> <input type="hidden" name="back" value="{{$.D.Back}}">
<button class="btn btn-sm {{if .Urgent}}btn-urgent{{else}}btn-ghost{{end}}" type="submit">{{if .Urgent}}取消加急{{else}}标记加急{{end}}</button> <button class="btn btn-sm {{if .Urgent}}btn-urgent{{else}}btn-ghost{{end}}" type="submit">{{if .Urgent}}取消加急{{else}}标记加急{{end}}</button>
</form> </form>
<a class="btn btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&{{$.D.FilterQuery}}&extend={{.ID}}#extend">追加时长</a> <a class="btn btn-soft btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&{{$.D.FilterQuery}}&extend={{.ID}}#extend">追加时长</a>
</div> </div>
</details> </details>
</div> </div>
@@ -218,7 +218,7 @@
<input type="hidden" name="back" value="{{$.D.Back}}"> <input type="hidden" name="back" value="{{$.D.Back}}">
<button class="btn btn-sm {{if .Urgent}}btn-urgent{{else}}btn-ghost{{end}}" type="submit">{{if .Urgent}}取消加急{{else}}标记加急{{end}}</button> <button class="btn btn-sm {{if .Urgent}}btn-urgent{{else}}btn-ghost{{end}}" type="submit">{{if .Urgent}}取消加急{{else}}标记加急{{end}}</button>
</form> </form>
<a class="btn btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&{{$.D.FilterQuery}}&extend={{.ID}}#extend">追加时长</a> <a class="btn btn-soft btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&{{$.D.FilterQuery}}&extend={{.ID}}#extend">追加时长</a>
</div> </div>
</details> </details>
</div> </div>
@@ -242,7 +242,7 @@
<span class="pkg">{{.PackageName}}</span> <span class="pkg">{{.PackageName}}</span>
<span class="rem">{{.RemainShort}}</span> <span class="rem">{{.RemainShort}}</span>
</a> </a>
<a class="btn btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&{{$.D.FilterQuery}}&extend={{.ID}}#extend">追加</a> <a class="btn btn-soft btn-sm" href="/calendar?y={{$.D.Year}}&m={{$.D.Month}}&d={{$.D.Selected}}&{{$.D.FilterQuery}}&extend={{.ID}}#extend">追加</a>
</li> </li>
{{end}} {{end}}
</ul> </ul>
@@ -3,13 +3,33 @@
<header class="cust-head"> <header class="cust-head">
<div class="cust-id"> <div class="cust-id">
<span class="cust-tail">{{.D.Customer.Tail}}</span> <span class="cust-tail">{{.D.Customer.Tail}}</span>
<div> <div class="cust-id-main">
<h1>{{.D.Customer.Name}}{{if .D.Customer.Archived}} <span class="chip chip-closed">已停用</span>{{end}}</h1> <h1>{{.D.Customer.Name}}{{if .D.Customer.Archived}} <span class="chip chip-closed">已停用</span>{{end}}</h1>
<div class="cust-tags"> <div class="cust-tags">
{{range .D.Customer.TagList}}<span class="tagchip">{{.}}</span>{{end}} {{range .D.Customer.TagList}}<span class="tagchip">{{.}}</span>{{end}}
</div> </div>
</div> </div>
</div> </div>
<div class="page-actions">
<form method="post" action="/customers/{{.D.Customer.ID}}/assignee" class="assign-form">
<select name="assignee_id" aria-label="归属打手">
<option value="0">未指派</option>
{{range .D.Users}}<option value="{{.ID}}"{{if eq $.D.Customer.AssigneeID .ID}} selected{{end}}>{{if .DisplayName}}{{.DisplayName}}{{else}}{{.Username}}{{end}}</option>{{end}}
</select>
<button class="btn btn-soft btn-sm" type="submit">保存打手</button>
</form>
<a class="btn btn-soft" href="/customers/{{.D.Customer.ID}}/edit">编辑资料</a>
{{if .D.Customer.Archived}}
<form method="post" action="/customers/{{.D.Customer.ID}}/restore"><button class="btn btn-soft" type="submit">恢复客户</button></form>
{{else}}
<form method="post" action="/customers/{{.D.Customer.ID}}/archive" data-confirm="停用后该客户不再出现在日历和大屏,订阅会保留。确定停用?"><button class="btn btn-ghost" type="submit">停用客户</button></form>
{{end}}
<form method="post" action="/customers/{{.D.Customer.ID}}/delete" data-confirm="将永久删除该客户及其全部订阅、打卡与追加记录,无法恢复。确定删除?">
<input type="hidden" name="confirm" value="delete">
<button class="btn btn-ghost text-danger" type="submit">彻底删除</button>
</form>
<a class="btn btn-ghost" href="/customers">返回列表</a>
</div>
<dl class="cust-meta"> <dl class="cust-meta">
{{if .D.Customer.GameName}}<div><dt>游戏</dt><dd>{{.D.Customer.GameName}}</dd></div>{{end}} {{if .D.Customer.GameName}}<div><dt>游戏</dt><dd>{{.D.Customer.GameName}}</dd></div>{{end}}
{{if .D.Customer.GameServer}}<div><dt>区服</dt><dd>{{.D.Customer.GameServer}}</dd></div>{{end}} {{if .D.Customer.GameServer}}<div><dt>区服</dt><dd>{{.D.Customer.GameServer}}</dd></div>{{end}}
@@ -17,29 +37,9 @@
{{if .D.Customer.Source}}<div><dt>来源</dt><dd>{{.D.Customer.Source}}</dd></div>{{end}} {{if .D.Customer.Source}}<div><dt>来源</dt><dd>{{.D.Customer.Source}}</dd></div>{{end}}
<div><dt>打手</dt><dd> <div><dt>打手</dt><dd>
<span class="asg{{if eq .D.Customer.AssigneeID 0}} none{{end}}"><i style="background:{{if .D.Customer.AssigneeColor}}{{.D.Customer.AssigneeColor}}{{else}}#8A8F98{{end}}"></i>{{if .D.Customer.AssigneeName}}{{.D.Customer.AssigneeName}}{{else}}未指派{{end}}</span> <span class="asg{{if eq .D.Customer.AssigneeID 0}} none{{end}}"><i style="background:{{if .D.Customer.AssigneeColor}}{{.D.Customer.AssigneeColor}}{{else}}#8A8F98{{end}}"></i>{{if .D.Customer.AssigneeName}}{{.D.Customer.AssigneeName}}{{else}}未指派{{end}}</span>
<form method="post" action="/customers/{{.D.Customer.ID}}/assignee" class="assign-form">
<select name="assignee_id">
<option value="0">未指派</option>
{{range .D.Users}}<option value="{{.ID}}"{{if eq $.D.Customer.AssigneeID .ID}} selected{{end}}>{{if .DisplayName}}{{.DisplayName}}{{else}}{{.Username}}{{end}}</option>{{end}}
</select>
<button class="btn btn-sm" type="submit">保存</button>
</form>
</dd></div> </dd></div>
<div><dt>建档</dt><dd>{{.D.Customer.CreatedAt}}</dd></div> <div><dt>建档</dt><dd>{{.D.Customer.CreatedAt}}</dd></div>
</dl> </dl>
<div class="page-actions">
<a class="btn" href="/customers/{{.D.Customer.ID}}/edit">编辑资料</a>
{{if .D.Customer.Archived}}
<form method="post" action="/customers/{{.D.Customer.ID}}/restore"><button class="btn" type="submit">恢复客户</button></form>
{{else}}
<form method="post" action="/customers/{{.D.Customer.ID}}/archive" data-confirm="停用后该客户不再出现在日历和大屏,订阅会保留。确定停用?"><button class="btn btn-ghost" type="submit">停用客户</button></form>
{{end}}
<form method="post" action="/customers/{{.D.Customer.ID}}/delete" data-confirm="将永久删除该客户及其全部订阅、打卡与追加记录,无法恢复。确定删除?">
<input type="hidden" name="confirm" value="delete">
<button class="btn btn-ghost" type="submit" style="color:var(--danger)">彻底删除</button>
</form>
<a class="btn btn-ghost" href="/customers">返回列表</a>
</div>
</header> </header>
{{if .D.Customer.Note}}<div class="notice note">{{.D.Customer.Note}}</div>{{end}} {{if .D.Customer.Note}}<div class="notice note">{{.D.Customer.Note}}</div>{{end}}
@@ -49,9 +49,9 @@
<div class="section-head"> <div class="section-head">
<h2>当月排单</h2> <h2>当月排单</h2>
<div class="minical-nav"> <div class="minical-nav">
<a class="btn btn-sm btn-ghost" href="{{.D.CustCal.Prev}}">‹</a> <a class="btn btn-ghost btn-sm btn-square" href="{{.D.CustCal.Prev}}" aria-label="上个月">‹</a>
<b>{{.D.CustCal.Title}}</b> <b>{{.D.CustCal.Title}}</b>
<a class="btn btn-sm btn-ghost" href="{{.D.CustCal.Next}}">›</a> <a class="btn btn-ghost btn-sm btn-square" href="{{.D.CustCal.Next}}" aria-label="下个月">›</a>
<span class="muted small">{{.D.CustCal.TaskDays}} 天有单 · {{.D.CustCal.TotalTasks}} 单</span> <span class="muted small">{{.D.CustCal.TaskDays}} 天有单 · {{.D.CustCal.TotalTasks}} 单</span>
</div> </div>
</div> </div>
@@ -86,7 +86,7 @@
{{if .D.Packages}} {{if .D.Packages}}
<form method="post" action="/customers/{{.D.Customer.ID}}/subscriptions" class="inline-form" data-sub-form> <form method="post" action="/customers/{{.D.Customer.ID}}/subscriptions" class="inline-form" data-sub-form>
<select class="form-select form-select-sm" name="package_id" required data-pkg-select> <select class="form-select form-select-sm" name="package_id" required data-pkg-select aria-label="选择套餐">
<option value="">选择套餐…</option> <option value="">选择套餐…</option>
{{range .D.Packages}} {{range .D.Packages}}
<option value="{{.ID}}" data-unit="{{if .Season}}season{{else}}{{.Unit}}{{end}}" data-amount="{{.DefaultAmount}}" data-validity="{{.DefaultValidityDays}}"{{if .Archived}} disabled{{end}}{{if .SeasonExpired $.TodayStr}} disabled{{end}}> <option value="{{.ID}}" data-unit="{{if .Season}}season{{else}}{{.Unit}}{{end}}" data-amount="{{.DefaultAmount}}" data-validity="{{.DefaultValidityDays}}"{{if .Archived}} disabled{{end}}{{if .SeasonExpired $.TodayStr}} disabled{{end}}>
@@ -147,9 +147,9 @@
</div> </div>
{{if .D.Adjustments}} {{if .D.Adjustments}}
<div class="table-wrap"> <div class="table-wrap">
<table class="table tight"> <table class="table tight table-adjust">
<thead> <thead>
<tr><th>时间</th><th>套餐</th><th>类型</th><th>计算起点</th><th>结束日变化</th><th>增量</th><th>备注</th><th>操作人</th></tr> <tr><th scope="col">时间</th><th scope="col">套餐</th><th scope="col">类型</th><th scope="col">计算起点</th><th scope="col">结束日变化</th><th scope="col">增量</th><th scope="col">备注</th><th scope="col">操作人</th></tr>
</thead> </thead>
<tbody> <tbody>
{{range .D.Adjustments}} {{range .D.Adjustments}}
+16 -15
View File
@@ -3,7 +3,7 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>{{if .D.IsNew}}新建客户{{else}}编辑客户{{end}}</h1> <h1>{{if .D.IsNew}}新建客户{{else}}编辑客户{{end}}</h1>
<p class="muted">手机尾号 + 客户名 唯一;尾号是日常查询的主键。</p> <p>手机尾号 + 客户名 唯一;尾号是日常查询的主键。</p>
</div> </div>
</header> </header>
@@ -11,23 +11,23 @@
action="{{if .D.IsNew}}/customers{{else}}/customers/{{.D.Customer.ID}}/edit{{end}}"> action="{{if .D.IsNew}}/customers{{else}}/customers/{{.D.Customer.ID}}/edit{{end}}">
<div class="grid-2"> <div class="grid-2">
<label class="field"><span>手机尾号 <i>*</i></span> <label class="field"><span>手机尾号 <i>*</i></span>
<input name="tail" value="{{.D.Customer.Tail}}" required maxlength="8" placeholder="例如 1234" autofocus> <input type="text" name="tail" value="{{.D.Customer.Tail}}" required maxlength="8" placeholder="例如 1234" inputmode="numeric" autofocus>
</label> </label>
<label class="field"><span>客户名 <i>*</i></span> <label class="field"><span>客户名 <i>*</i></span>
<input name="name" value="{{.D.Customer.Name}}" required maxlength="32" placeholder="例如 老张"> <input type="text" name="name" value="{{.D.Customer.Name}}" required maxlength="32" placeholder="例如 老张">
</label> </label>
</div> </div>
<div class="grid-2"> <div class="grid-2">
<label class="field"><span>游戏名</span> <label class="field"><span>游戏名</span>
<input name="game_name" value="{{.D.Customer.GameName}}" maxlength="32" placeholder="例如 王者荣耀"> <input type="text" name="game_name" value="{{.D.Customer.GameName}}" maxlength="32" placeholder="例如 王者荣耀">
</label> </label>
<label class="field"><span>区服 / UID</span> <label class="field"><span>区服 / UID</span>
<input name="game_server" value="{{.D.Customer.GameServer}}" maxlength="32" placeholder="例如 微信区 123456"> <input type="text" name="game_server" value="{{.D.Customer.GameServer}}" maxlength="32" placeholder="例如 微信区 123456">
</label> </label>
</div> </div>
<div class="grid-2"> <div class="grid-2">
<label class="field"><span>联系方式</span> <label class="field"><span>联系方式</span>
<input name="contact" value="{{.D.Customer.Contact}}" maxlength="64" placeholder="微信 / QQ"> <input type="text" name="contact" value="{{.D.Customer.Contact}}" maxlength="64" placeholder="微信 / QQ">
</label> </label>
<label class="field"><span>归属打手</span> <label class="field"><span>归属打手</span>
<select name="assignee_id"> <select name="assignee_id">
@@ -36,22 +36,23 @@
<option value="{{.ID}}"{{if eq $.D.Customer.AssigneeID .ID}} selected{{end}}>{{if .DisplayName}}{{.DisplayName}}{{else}}{{.Username}}{{end}}</option> <option value="{{.ID}}"{{if eq $.D.Customer.AssigneeID .ID}} selected{{end}}>{{if .DisplayName}}{{.DisplayName}}{{else}}{{.Username}}{{end}}</option>
{{end}} {{end}}
</select> </select>
<small class="muted">该客户之后的所有单子都记在这个打手名下</small> <small>该客户之后的所有单子都记在这个打手名下</small>
</label> </label>
</div>
<label class="field"><span>来源渠道</span> <div class="grid-2">
<input name="source" value="{{.D.Customer.Source}}" maxlength="32" placeholder="抖音 / 朋友介绍"> <label class="field"><span>来源渠道</span>
<input type="text" name="source" value="{{.D.Customer.Source}}" maxlength="32" placeholder="抖音 / 朋友介绍">
</label>
<label class="field"><span>标签</span>
<input type="text" name="tags" value="{{.D.Customer.Tags}}" maxlength="120" placeholder="老客户,包月,难缠(逗号分隔)">
</label> </label>
</div> </div>
<label class="field"><span>标签</span>
<input name="tags" value="{{.D.Customer.Tags}}" maxlength="120" placeholder="老客户,包月,难缠(逗号分隔)">
</label>
<label class="field"><span>备注</span> <label class="field"><span>备注</span>
<textarea name="note" rows="3" maxlength="500" placeholder="打法偏好、沟通记录等">{{.D.Customer.Note}}</textarea> <textarea name="note" rows="3" maxlength="500" placeholder="打法偏好、沟通记录等">{{.D.Customer.Note}}</textarea>
</label> </label>
<div class="actions"> <div class="actions">
<button class="btn btn-primary" type="submit">保存</button> <button class="btn btn-primary" type="submit">保存</button>
<a class="btn" href="{{if .D.IsNew}}/customers{{else}}/customers/{{.D.Customer.ID}}{{end}}">取消</a> <a class="btn btn-soft" href="{{if .D.IsNew}}/customers{{else}}/customers/{{.D.Customer.ID}}{{end}}">取消</a>
</div> </div>
</form> </form>
</div> </div>
+8 -10
View File
@@ -3,7 +3,7 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>客户</h1> <h1>客户</h1>
<p class="muted">共 {{.D.Total}} 位 · 输入手机尾号可快速定位</p> <p>共 {{.D.Total}} 位 · 输入手机尾号可快速定位</p>
</div> </div>
<div class="page-actions"> <div class="page-actions">
{{if .D.ShowArchived}} {{if .D.ShowArchived}}
@@ -16,16 +16,16 @@
</header> </header>
<form class="filterbar" method="get" action="/customers"> <form class="filterbar" method="get" action="/customers">
<input class="form-control" type="search" name="q" value="{{.D.Q}}" placeholder="手机尾号 / 姓名 / 游戏名 / 联系方式" autocomplete="off"> <input type="search" name="q" value="{{.D.Q}}" placeholder="手机尾号 / 姓名 / 游戏名 / 联系方式" autocomplete="off" aria-label="搜索客户">
<button class="btn" type="submit">搜索</button> <button class="btn btn-soft" type="submit">搜索</button>
{{if .D.Q}}<a class="btn btn-ghost" href="/customers">清除</a>{{end}} {{if .D.Q}}<a class="btn btn-ghost" href="/customers">清除</a>{{end}}
</form> </form>
{{if .D.List}} {{if .D.List}}
<div class="table-wrap"> <div class="table-wrap">
<table class="table"> <table class="table table-customers">
<thead> <thead>
<tr><th>尾号</th><th>客户</th><th>联系方式</th><th>订阅与剩余</th><th>标签</th><th></th></tr> <tr><th scope="col">尾号</th><th scope="col">客户</th><th scope="col">联系方式</th><th scope="col">订阅与剩余</th><th scope="col">标签</th><th scope="col"><span class="visually-hidden">操作</span></th></tr>
</thead> </thead>
<tbody> <tbody>
{{range .D.List}} {{range .D.List}}
@@ -36,11 +36,9 @@
{{if .GameName}}<div class="muted small">{{.GameName}}{{if .GameServer}} · {{.GameServer}}{{end}}</div>{{end}} {{if .GameName}}<div class="muted small">{{.GameName}}{{if .GameServer}} · {{.GameServer}}{{end}}</div>{{end}}
</td> </td>
<td class="muted small">{{if .Contact}}{{.Contact}}{{else}}—{{end}}</td> <td class="muted small">{{if .Contact}}{{.Contact}}{{else}}—{{end}}</td>
<td> <td><span class="summary due-{{.Level}}">{{.Summary}}</span></td>
<span class="summary due-{{.Level}}">{{.Summary}}</span>
</td>
<td>{{range .TagList}}<span class="tagchip">{{.}}</span>{{end}}</td> <td>{{range .TagList}}<span class="tagchip">{{.}}</span>{{end}}</td>
<td class="right"><a class="btn btn-sm" href="/customers/{{.ID}}">详情</a></td> <td class="right"><a class="btn btn-soft btn-sm" href="/customers/{{.ID}}">详情</a></td>
</tr> </tr>
{{end}} {{end}}
</tbody> </tbody>
@@ -52,7 +50,7 @@
<div class="empty-mark">票</div> <div class="empty-mark">票</div>
{{if .D.Q}} {{if .D.Q}}
<p>没有匹配「{{.D.Q}}」的客户。</p> <p>没有匹配「{{.D.Q}}」的客户。</p>
<a class="btn" href="/customers">看全部客户</a> <a class="btn btn-soft" href="/customers">看全部客户</a>
{{else}} {{else}}
<p>还没有客户。先建一位,再给他开套餐。</p> <p>还没有客户。先建一位,再给他开套餐。</p>
<a class="btn btn-primary" href="/customers/new">+ 新建客户</a> <a class="btn btn-primary" href="/customers/new">+ 新建客户</a>
+17 -22
View File
@@ -1,26 +1,21 @@
{{define "content"}} {{define "content"}}
<div class="d-flex align-items-center justify-content-center" style="min-height:100vh"> <div class="auth">
<div class="card shadow-sm" style="width:100%;max-width:400px"> <button class="theme-toggle auth-theme" type="button" data-theme-toggle aria-label="切换亮色/暗色" aria-pressed="false"><span class="ic-moon" aria-hidden="true">☾</span><span class="ic-sun" aria-hidden="true">☀</span></button>
<div class="card-body p-4"> <div class="auth-card">
<div class="d-flex align-items-center gap-2 mb-3"> <div class="auth-brand"><span class="brand-mark" aria-hidden="true">代</span><span>代打台</span></div>
<span class="badge text-bg-success fs-6">代</span><span class="fw-bold">代打台</span> <h1>登录</h1>
</div> <p>所有账户均为管理员,任何操作都会留痕。</p>
<h1 class="h4 mb-1">登录</h1> <form method="post" action="/login" class="stack">
<p class="text-secondary small mb-4">所有账户均为管理员,任何操作都会留痕。</p> <input type="hidden" name="next" value="{{.Next}}">
<form method="post" action="/login" class="vstack gap-3"> <label class="field"><span>用户名</span>
<input type="hidden" name="next" value="{{.Next}}"> <input class="form-control" id="username" type="text" name="username" required autofocus autocomplete="username">
<div> </label>
<label class="form-label" for="username">用户名</label> <label class="field"><span>密码</span>
<input class="form-control" id="username" type="text" name="username" required autofocus autocomplete="username"> <input class="form-control" id="password" type="password" name="password" required autocomplete="current-password">
</div> </label>
<div> <button type="submit" class="btn btn-primary btn-block">登录</button>
<label class="form-label" for="password">密码</label> </form>
<input class="form-control" id="password" type="password" name="password" required autocomplete="current-password"> <p class="auth-foot">代打台 · 单文件部署 · 数据只在本机</p>
</div>
<button type="submit" class="btn btn-primary w-100">登录</button>
</form>
<p class="text-secondary small text-center mt-3 mb-0">代打台 · 单文件部署 · 数据只在本机</p>
</div>
</div> </div>
</div> </div>
{{end}} {{end}}
+5 -5
View File
@@ -3,20 +3,20 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>操作日志</h1> <h1>操作日志</h1>
<p class="muted">共 {{.D.Total}} 条 · 谁在什么时候改了什么,都在这里</p> <p>共 {{.D.Total}} 条 · 谁在什么时候改了什么,都在这里</p>
</div> </div>
</header> </header>
<form class="filterbar" method="get" action="/logs"> <form class="filterbar" method="get" action="/logs">
<input type="search" name="q" value="{{.D.Q}}" placeholder="搜索摘要 / 动作 / 操作人" autocomplete="off"> <input type="search" name="q" value="{{.D.Q}}" placeholder="搜索摘要 / 动作 / 操作人" autocomplete="off" aria-label="搜索日志">
<button class="btn" type="submit">搜索</button> <button class="btn btn-soft" type="submit">搜索</button>
{{if .D.Q}}<a class="btn btn-ghost" href="/logs">清除</a>{{end}} {{if .D.Q}}<a class="btn btn-ghost" href="/logs">清除</a>{{end}}
</form> </form>
{{if .D.List}} {{if .D.List}}
<div class="table-wrap"> <div class="table-wrap">
<table class="table tight"> <table class="table tight table-logs">
<thead><tr><th>时间</th><th>操作人</th><th>动作</th><th>对象</th><th>摘要</th><th>IP</th></tr></thead> <thead><tr><th scope="col">时间</th><th scope="col">操作人</th><th scope="col">动作</th><th scope="col">对象</th><th scope="col">摘要</th><th scope="col">IP</th></tr></thead>
<tbody> <tbody>
{{range .D.List}} {{range .D.List}}
<tr> <tr>
@@ -3,7 +3,7 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>{{.D.Package.Name}}</h1> <h1>{{.D.Package.Name}}</h1>
<p class="muted"> <p>
{{if eq .D.Package.Unit "day"}}按日{{else}}按次{{end}} · {{if eq .D.Package.Unit "day"}}按日{{else}}按次{{end}} ·
默认 {{.D.Package.DefaultAmount}}{{if eq .D.Package.Unit "day"}} 天{{else}} 次{{end}} · 默认 {{.D.Package.DefaultAmount}}{{if eq .D.Package.Unit "day"}} 天{{else}} 次{{end}} ·
{{if .D.Package.Tag}}标签「{{.D.Package.Tag}}」 · {{end}}{{if .D.Package.CalendarSeparate}}独立日历 · {{end}} {{if .D.Package.Tag}}标签「{{.D.Package.Tag}}」 · {{end}}{{if .D.Package.CalendarSeparate}}独立日历 · {{end}}
@@ -12,17 +12,24 @@
</div> </div>
<div class="page-actions"> <div class="page-actions">
<a class="btn btn-ghost" href="/packages">返回套餐</a> <a class="btn btn-ghost" href="/packages">返回套餐</a>
<a class="btn" href="/packages/{{.D.Package.ID}}/edit">编辑套餐</a> <a class="btn btn-soft" href="/packages/{{.D.Package.ID}}/edit">编辑套餐</a>
</div> </div>
</header> </header>
{{if .D.Package.Note}}<div class="notice note">{{.D.Package.Note}}</div>{{end}} {{if .D.Package.Note}}<div class="notice note">{{.D.Package.Note}}</div>{{end}}
<form class="filterbar" method="get" action="/packages/{{.D.Package.ID}}">
<input type="search" name="q" value="{{.D.Q}}" placeholder="按尾号 / 姓名筛选客户" aria-label="筛选客户">
<button class="btn btn-soft" type="submit">筛选</button>
{{if .D.Q}}<a class="btn btn-ghost" href="/packages/{{.D.Package.ID}}">清除</a>{{end}}
<span class="muted small">共 {{len .D.Customers}} 位客户</span>
</form>
<form method="post" action="/packages/{{.D.Package.ID}}/subscribe" class="section card"> <form method="post" action="/packages/{{.D.Package.ID}}/subscribe" class="section card">
<h2>批量开通</h2> <h2>批量开通</h2>
<p class="muted small">勾选客户后一次开通;已经是该套餐的客户会自动跳过。开始日期默认今天,时长/次数默认取套餐设置,可改。</p> <p class="muted small">勾选客户后一次开通;已经是该套餐的客户会自动跳过。开始日期默认今天,时长/次数默认取套餐设置,可改。</p>
<div class="grid-3"> <div class="grid-auto">
<label class="field"><span>开始日期</span> <label class="field"><span>开始日期</span>
<input type="date" name="start_date" value="{{.D.Today}}" required> <input type="date" name="start_date" value="{{.D.Today}}" required>
</label> </label>
@@ -40,25 +47,19 @@
{{end}} {{end}}
</div> </div>
<div class="filterbar">
<input type="search" name="q" value="{{.D.Q}}" placeholder="按尾号 / 姓名筛选客户">
<button class="btn" type="submit" formmethod="get" formaction="/packages/{{.D.Package.ID}}">筛选</button>
<span class="muted small">共 {{len .D.Customers}} 位客户</span>
</div>
<div class="table-wrap"> <div class="table-wrap">
<table class="table tight"> <table class="table tight">
<thead> <thead>
<tr> <tr>
<th style="width:44px"><input type="checkbox" data-select-all aria-label="全选"></th> <th style="width:44px"><input type="checkbox" data-select-all aria-label="全选可开通客户"></th>
<th>尾号</th><th>客户</th><th>当前订阅</th><th>状态</th> <th scope="col">尾号</th><th scope="col">客户</th><th scope="col">当前订阅</th><th scope="col">状态</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{range .D.Customers}} {{range .D.Customers}}
{{$subscribed := index $.D.Subscribed .ID}} {{$subscribed := index $.D.Subscribed .ID}}
<tr{{if $subscribed}} class="archived"{{end}}> <tr{{if $subscribed}} class="archived"{{end}}>
<td><input type="checkbox" name="customer_ids" value="{{.ID}}"{{if $subscribed}} disabled{{else}} checked{{end}}></td> <td>{{if $subscribed}}<span class="muted small" title="已是此套餐">—</span>{{else}}<input type="checkbox" name="customer_ids" value="{{.ID}}" aria-label="选择 {{.Name}}" checked>{{end}}</td>
<td><a class="tail" href="/customers/{{.ID}}">{{.Tail}}</a></td> <td><a class="tail" href="/customers/{{.ID}}">{{.Tail}}</a></td>
<td>{{.Name}}{{if .AssigneeName}} <span class="asg"><i style="background:{{.AssigneeColor}}"></i>{{.AssigneeName}}</span>{{end}}</td> <td>{{.Name}}{{if .AssigneeName}} <span class="asg"><i style="background:{{.AssigneeColor}}"></i>{{.AssigneeName}}</span>{{end}}</td>
<td class="summary due-{{.Level}}">{{.Summary}}</td> <td class="summary due-{{.Level}}">{{.Summary}}</td>
+8 -10
View File
@@ -3,14 +3,14 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>{{if .D.IsNew}}新增套餐{{else}}编辑套餐{{end}}</h1> <h1>{{if .D.IsNew}}新增套餐{{else}}编辑套餐{{end}}</h1>
<p class="muted">按日套餐用起止日期计算剩余天数;按次套餐记录剩余次数。</p> <p>按日套餐用起止日期计算剩余天数;按次套餐记录剩余次数。</p>
</div> </div>
</header> </header>
<form method="post" class="form card" data-package-form <form method="post" class="form card" data-package-form
action="{{if .D.IsNew}}/packages{{else}}/packages/{{.D.Package.ID}}/edit{{end}}"> action="{{if .D.IsNew}}/packages{{else}}/packages/{{.D.Package.ID}}/edit{{end}}">
<label class="field"><span>套餐名称 <i>*</i></span> <label class="field"><span>套餐名称 <i>*</i></span>
<input name="name" required maxlength="32" value="{{.D.Package.Name}}" placeholder="例如 包月日常 / 赛季深渊 / 10 次副本"> <input type="text" name="name" required maxlength="32" value="{{.D.Package.Name}}" placeholder="例如 包月日常 / 赛季深渊 / 10 次副本">
</label> </label>
<fieldset class="field"> <fieldset class="field">
@@ -29,10 +29,9 @@
<label class="field"><span>赛季开始日 <i>*</i></span><input type="date" name="season_start" value="{{.D.Package.SeasonStart}}"></label> <label class="field"><span>赛季开始日 <i>*</i></span><input type="date" name="season_start" value="{{.D.Package.SeasonStart}}"></label>
<label class="field"><span>赛季结束日 <i>*</i></span><input type="date" name="season_end" value="{{.D.Package.SeasonEnd}}"></label> <label class="field"><span>赛季结束日 <i>*</i></span><input type="date" name="season_end" value="{{.D.Package.SeasonEnd}}"></label>
</div> </div>
<div class="grid-2" data-validity-wrap hidden> <div class="field field-narrow" data-validity-wrap hidden>
<label class="field"><span>按次默认有效期(天,0=不限)</span> <span>按次默认有效期(天,0 = 不限)</span>
<input type="number" name="default_validity_days" min="0" max="3650" value="{{.D.Package.DefaultValidityDays}}"> <input type="number" name="default_validity_days" min="0" max="3650" value="{{.D.Package.DefaultValidityDays}}">
</label>
</div> </div>
<div class="grid-2"> <div class="grid-2">
@@ -47,16 +46,15 @@
</label> </label>
</div> </div>
<div class="grid-2"> <div class="grid-3">
<label class="field"><span>日历色签</span> <label class="field"><span>日历色签</span>
<input type="color" name="color" value="{{.D.Package.Color}}"> <input type="color" name="color" value="{{.D.Package.Color}}">
</label> </label>
<label class="field"><span>标签(可选)</span> <label class="field"><span>标签(可选)</span>
<input type="text" name="tag" value="{{.D.Package.Tag}}" maxlength="20" list="pkg-tags" placeholder="例如:包月活动托"> <input type="text" name="tag" value="{{.D.Package.Tag}}" maxlength="20" list="pkg-tags" placeholder="例如:包月活动托">
<datalist id="pkg-tags">{{range .D.Tags}}<option value="{{.}}"></option>{{end}}</datalist> <datalist id="pkg-tags">{{range .D.Tags}}<option value="{{.}}"></option>{{end}}</datalist>
<small class="muted">相同标签的套餐在日历里会合并成同一个页签</small> <small>相同标签的套餐在日历里会合并成同一个页签</small>
</label> </label>
<label class="field"><span>排序(小的靠前)</span> <label class="field"><span>排序(小的靠前)</span>
<input type="number" name="sort_order" value="{{.D.Package.SortOrder}}"> <input type="number" name="sort_order" value="{{.D.Package.SortOrder}}">
</label> </label>
@@ -73,7 +71,7 @@
<div class="actions"> <div class="actions">
<button class="btn btn-primary" type="submit">保存</button> <button class="btn btn-primary" type="submit">保存</button>
<a class="btn" href="/packages">取消</a> <a class="btn btn-soft" href="/packages">取消</a>
</div> </div>
</form> </form>
</div> </div>
+6 -6
View File
@@ -3,16 +3,16 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>套餐</h1> <h1>套餐</h1>
<p class="muted">新增套餐只需加一行配置,不会影响任何已有客户与订阅</p> <p>新增套餐只需加一行配置,不会影响任何已有客户与订阅</p>
</div> </div>
<div class="page-actions"><a class="btn btn-primary" href="/packages/new">+ 新增套餐</a></div> <div class="page-actions"><a class="btn btn-primary" href="/packages/new">+ 新增套餐</a></div>
</header> </header>
{{if .D.List}} {{if .D.List}}
<div class="table-wrap"> <div class="table-wrap">
<table class="table"> <table class="table table-packages">
<thead> <thead>
<tr><th class="col-dot"></th><th>名称</th><th>类型</th><th>默认量</th><th>参考价</th><th>订阅中 / 总数</th><th>状态</th><th></th></tr> <tr><th class="col-dot" scope="col"><span class="visually-hidden">颜色</span></th><th scope="col">名称</th><th scope="col">类型</th><th scope="col">默认量</th><th scope="col">参考价</th><th scope="col">订阅中 / 总数</th><th scope="col">状态</th><th scope="col"><span class="visually-hidden">操作</span></th></tr>
</thead> </thead>
<tbody> <tbody>
{{range .D.List}} {{range .D.List}}
@@ -29,10 +29,10 @@
<td class="mono">{{.ActiveCount}} / {{.SubCount}}</td> <td class="mono">{{.ActiveCount}} / {{.SubCount}}</td>
<td>{{if .Archived}}<span class="chip chip-closed">已归档</span>{{else}}<span class="chip chip-active">启用中</span>{{end}}</td> <td>{{if .Archived}}<span class="chip chip-closed">已归档</span>{{else}}<span class="chip chip-active">启用中</span>{{end}}</td>
<td class="actions-cell"> <td class="actions-cell">
<a class="btn btn-sm" href="/packages/{{.ID}}">详情/批量</a> <a class="btn btn-soft btn-sm" href="/packages/{{.ID}}">详情/批量</a>
<a class="btn btn-sm btn-ghost" href="/packages/{{.ID}}/edit">编辑</a> <a class="btn btn-ghost btn-sm" href="/packages/{{.ID}}/edit">编辑</a>
<form method="post" action="/packages/{{.ID}}/archive"{{if not .Archived}} data-confirm="归档后不能再新建该套餐的订阅,已有订阅不受影响。继续?"{{end}}> <form method="post" action="/packages/{{.ID}}/archive"{{if not .Archived}} data-confirm="归档后不能再新建该套餐的订阅,已有订阅不受影响。继续?"{{end}}>
<button class="btn btn-sm btn-ghost">{{if .Archived}}恢复{{else}}归档{{end}}</button> <button class="btn btn-ghost btn-sm">{{if .Archived}}恢复{{else}}归档{{end}}</button>
</form> </form>
</td> </td>
</tr> </tr>
+14 -14
View File
@@ -1,7 +1,7 @@
{{define "content"}} {{define "content"}}
<div class="scr" data-pkg="{{.D.PkgID}}" data-heat="{{.D.HeatMode}}" data-api="/api/screen/day"> <div class="scr" data-pkg="{{.D.PkgID}}" data-heat="{{.D.HeatMode}}" data-api="/api/screen/day">
<header class="scr-head navbar bg-body-tertiary border-bottom px-3 py-2"> <header class="scr-head">
<div class="scr-brand navbar-brand mb-0"><span class="mark">代</span>代打台<em>控制台</em></div> <div class="scr-brand"><span class="mark" aria-hidden="true">代</span>代打台<em>控制台</em></div>
{{if .D.HasTabs}} {{if .D.HasTabs}}
<nav class="scr-tabs"> <nav class="scr-tabs">
@@ -16,8 +16,8 @@
title="切换热力统计口径"> title="切换热力统计口径">
{{if eq .D.HeatMode "due"}}热力:到期{{else}}热力:待完成{{end}} ⇄ {{if eq .D.HeatMode "due"}}热力:到期{{else}}热力:待完成{{end}} ⇄
</a> </a>
<button class="scr-theme" type="button" data-theme-toggle aria-label="切换亮色/暗色"> <button class="scr-theme" type="button" data-theme-toggle aria-label="切换亮色/暗色" aria-pressed="false">
<span class="ic-moon">☾</span><span class="ic-sun">☀</span> <span class="ic-moon" aria-hidden="true">☾</span><span class="ic-sun" aria-hidden="true">☀</span>
</button> </button>
</div> </div>
@@ -26,23 +26,23 @@
</header> </header>
<section class="scr-kpis"> <section class="scr-kpis">
<div class="kpi card bg-body-tertiary border-secondary-subtle"> <div class="kpi">
<span>客户</span><b>{{.D.Stats.Customers}}</b><i>位</i> <span>客户</span><b>{{.D.Stats.Customers}}</b><i>位</i>
</div> </div>
<div class="kpi"> <div class="kpi">
<span>活跃订阅</span><b>{{.D.Stats.ActiveSubs}}</b><i>条</i> <span>活跃订阅</span><b>{{.D.Stats.ActiveSubs}}</b><i>条</i>
</div> </div>
<div class="kpi kpi-hot card bg-body-tertiary border-secondary-subtle"> <div class="kpi kpi-hot">
<span>今日到期</span><b>{{.D.Stats.DueToday}}</b><i>条</i> <span>今日到期</span><b>{{.D.Stats.DueToday}}</b><i>条</i>
</div> </div>
<div class="kpi kpi-warm card bg-body-tertiary border-secondary-subtle"> <div class="kpi kpi-warm">
<span>7 天内到期</span><b>{{.D.Stats.Due7}}</b><i>条</i> <span>7 天内到期</span><b>{{.D.Stats.Due7}}</b><i>条</i>
</div> </div>
</section> </section>
<section class="scr-main"> <section class="scr-main">
<div class="panel panel-cal card bg-body-tertiary border-secondary-subtle"> <div class="panel panel-cal">
<div class="panel-head card-header bg-transparent border-secondary-subtle py-2"> <div class="panel-head">
<h2>{{if eq .D.HeatMode "due"}}到期热力{{else}}每日待完成{{end}}</h2> <h2>{{if eq .D.HeatMode "due"}}到期热力{{else}}每日待完成{{end}}</h2>
<span>{{.D.MonthTitle}} · 本月合计 {{.D.HeatTotal}} 单</span> <span>{{.D.MonthTitle}} · 本月合计 {{.D.HeatTotal}} 单</span>
</div> </div>
@@ -69,10 +69,10 @@
</div> </div>
</div> </div>
<div class="panel panel-top card bg-body-tertiary border-secondary-subtle"> <div class="panel panel-top">
<div class="panel-head"><h2>即将到期 TOP 10</h2><span>按剩余量排序</span></div> <div class="panel-head"><h2>即将到期 TOP 10</h2><span>按剩余量排序</span></div>
{{if .D.Top}} {{if .D.Top}}
<ol class="top-list list-group list-group-flush"> <ol class="top-list">
{{range $i, $s := .D.Top}} {{range $i, $s := .D.Top}}
<li class="top-item lv-{{$s.Eval.Level}}"> <li class="top-item lv-{{$s.Eval.Level}}">
<span class="rank">{{add $i 1}}</span> <span class="rank">{{add $i 1}}</span>
@@ -97,7 +97,7 @@
<span>{{len .D.DueToday}} 条</span> <span>{{len .D.DueToday}} 条</span>
</div> </div>
{{if .D.DueToday}} {{if .D.DueToday}}
<ul class="today-list list-group list-group-flush"> <ul class="today-list">
{{range .D.DueToday}} {{range .D.DueToday}}
<li class="lv-{{.Eval.Level}}"> <li class="lv-{{.Eval.Level}}">
<span class="tchip" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span> <span class="tchip" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
@@ -119,11 +119,11 @@
{{if .D.TodayList}} {{if .D.TodayList}}
<ul class="today-list"> <ul class="today-list">
{{range .D.TodayList}} {{range .D.TodayList}}
<li class="{{if .Urgent}}urgent{{end}} lv-{{.Eval.Level}}"> <li class="{{if .Urgent}}urgent {{end}}lv-{{.Eval.Level}}">
<span class="tchip" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span> <span class="tchip" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
<span class="pkg">{{.PackageName}}</span> <span class="pkg">{{.PackageName}}</span>
<span class="asg{{if .AssigneeNone}} none{{end}}"><i style="background:{{.AssigneeHex}}"></i>{{.AssigneeLabel}}</span> <span class="asg{{if .AssigneeNone}} none{{end}}"><i style="background:{{.AssigneeHex}}"></i>{{.AssigneeLabel}}</span>
{{if .Urgent}}<span class="badge text-bg-danger tag-urgent">加急</span>{{end}} {{if .Urgent}}<span class="tag-urgent">加急</span>{{end}}
<span class="rem">{{.RemainShort}}</span> <span class="rem">{{.RemainShort}}</span>
</li> </li>
{{end}} {{end}}
+13 -13
View File
@@ -3,7 +3,7 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>设置</h1> <h1>设置</h1>
<p class="muted">预警天数、备份、账户与数据导出</p> <p>预警天数、备份、账户与数据导出</p>
</div> </div>
</header> </header>
@@ -28,8 +28,8 @@
<p class="muted small">所有账户权限相同,任何操作都会记在日志里。每个管理员的颜色用于日历左侧竖条和待办标识。</p> <p class="muted small">所有账户权限相同,任何操作都会记在日志里。每个管理员的颜色用于日历左侧竖条和待办标识。</p>
<p class="muted small">{{if eq .User.ID 1}}你是初始管理员,可以点「编辑」修改其他管理员的用户名、昵称和密码。{{else}}只有初始管理员(首个账号)可以修改其他管理员的资料。{{end}}</p> <p class="muted small">{{if eq .User.ID 1}}你是初始管理员,可以点「编辑」修改其他管理员的用户名、昵称和密码。{{else}}只有初始管理员(首个账号)可以修改其他管理员的资料。{{end}}</p>
<div class="table-wrap"> <div class="table-wrap">
<table class="table tight"> <table class="table tight table-users">
<thead><tr><th>用户名</th><th>显示名称</th><th>打手颜色</th><th>状态</th><th>创建时间</th><th>最近登录</th><th></th></tr></thead> <thead><tr><th scope="col">用户名</th><th scope="col">显示名称</th><th scope="col">打手颜色</th><th scope="col">状态</th><th scope="col">创建时间</th><th scope="col">最近登录</th><th scope="col"><span class="visually-hidden">操作</span></th></tr></thead>
<tbody> <tbody>
{{$me := .User}} {{$me := .User}}
{{range .D.Users}} {{range .D.Users}}
@@ -38,8 +38,8 @@
<td>{{.DisplayName}}</td> <td>{{.DisplayName}}</td>
<td> <td>
<form method="post" action="/settings/users/{{.ID}}/color" class="color-form"> <form method="post" action="/settings/users/{{.ID}}/color" class="color-form">
<input type="color" name="color" value="{{if .Color}}{{.Color}}{{else}}#8A8F98{{end}}" title="打手颜色"> <input type="color" name="color" value="{{if .Color}}{{.Color}}{{else}}#8A8F98{{end}}" title="打手颜色" aria-label="打手颜色">
<button class="btn btn-sm btn-ghost" type="submit">保存</button> <button class="btn btn-soft btn-sm" type="submit">保存</button>
</form> </form>
</td> </td>
<td>{{if .IsActive}}<span class="chip chip-active">启用</span>{{else}}<span class="chip chip-closed">停用</span>{{end}}</td> <td>{{if .IsActive}}<span class="chip chip-active">启用</span>{{else}}<span class="chip chip-closed">停用</span>{{end}}</td>
@@ -50,10 +50,10 @@
<span class="muted small">当前账户</span> <span class="muted small">当前账户</span>
{{else}} {{else}}
{{if eq $me.ID 1}} {{if eq $me.ID 1}}
<a class="btn btn-sm" href="/settings/users/{{.ID}}/edit">编辑</a> <a class="btn btn-soft btn-sm" href="/settings/users/{{.ID}}/edit">编辑</a>
{{end}} {{end}}
<form method="post" action="/settings/users/{{.ID}}/toggle"> <form method="post" action="/settings/users/{{.ID}}/toggle">
<button class="btn btn-sm btn-ghost">{{if .IsActive}}停用{{else}}启用{{end}}</button> <button class="btn btn-ghost btn-sm">{{if .IsActive}}停用{{else}}启用{{end}}</button>
</form> </form>
{{end}} {{end}}
</td> </td>
@@ -63,8 +63,8 @@
</table> </table>
</div> </div>
<form method="post" action="/settings/users" class="inline-form"> <form method="post" action="/settings/users" class="inline-form">
<label class="inline-field">用户名 <input name="username" required minlength="3" maxlength="32" autocomplete="off"></label> <label class="inline-field">用户名 <input type="text" name="username" required minlength="3" maxlength="32" autocomplete="off"></label>
<label class="inline-field">显示名称 <input name="display_name" maxlength="32"></label> <label class="inline-field">显示名称 <input type="text" name="display_name" maxlength="32"></label>
<label class="inline-field">初始密码 <input type="password" name="password" required minlength="6" autocomplete="new-password"></label> <label class="inline-field">初始密码 <input type="password" name="password" required minlength="6" autocomplete="new-password"></label>
<button class="btn btn-primary" type="submit">新增管理员</button> <button class="btn btn-primary" type="submit">新增管理员</button>
</form> </form>
@@ -94,10 +94,10 @@
<div><dt>数据量</dt><dd>{{.D.CustomerCount}} 位客户 · {{.D.PackageCount}} 个套餐 · {{.D.LogCount}} 条日志</dd></div> <div><dt>数据量</dt><dd>{{.D.CustomerCount}} 位客户 · {{.D.PackageCount}} 个套餐 · {{.D.LogCount}} 条日志</dd></div>
</dl> </dl>
<div class="actions wrap"> <div class="actions wrap">
<form method="post" action="/settings/backup"><button class="btn" type="submit">立即备份</button></form> <form method="post" action="/settings/backup"><button class="btn btn-soft" type="submit">立即备份</button></form>
<a class="btn" href="/export/customers.csv">导出客户 CSV</a> <a class="btn btn-soft" href="/export/customers.csv">导出客户 CSV</a>
<a class="btn" href="/export/subscriptions.csv">导出订阅 CSV</a> <a class="btn btn-soft" href="/export/subscriptions.csv">导出订阅 CSV</a>
<a class="btn" href="/export/logs.csv">导出日志 CSV</a> <a class="btn btn-soft" href="/export/logs.csv">导出日志 CSV</a>
</div> </div>
{{if .D.Backups}} {{if .D.Backups}}
<details class="backups"> <details class="backups">
+22 -29
View File
@@ -1,33 +1,26 @@
{{define "content"}} {{define "content"}}
<div class="d-flex align-items-center justify-content-center" style="min-height:100vh"> <div class="auth">
<div class="card shadow-sm" style="width:100%;max-width:440px"> <button class="theme-toggle auth-theme" type="button" data-theme-toggle aria-label="切换亮色/暗色" aria-pressed="false"><span class="ic-moon" aria-hidden="true">☾</span><span class="ic-sun" aria-hidden="true">☀</span></button>
<div class="card-body p-4"> <div class="auth-card">
<div class="d-flex align-items-center gap-2 mb-3"> <div class="auth-brand"><span class="brand-mark" aria-hidden="true">代</span><span>代打台</span></div>
<span class="badge text-bg-success fs-6">代</span><span class="fw-bold">代打台</span> <h1>创建第一个管理员</h1>
</div> <p>数据库里还没有账户。设置好账号后即可开始录入套餐与客户。</p>
<h1 class="h4 mb-1">创建第一个管理员</h1> <form method="post" action="/setup" class="stack">
<p class="text-secondary small mb-4">数据库里还没有账户。设置好账号后即可开始录入套餐与客户。</p> <label class="field"><span>用户名</span>
<form method="post" action="/setup" class="vstack gap-3"> <input class="form-control" id="username" type="text" name="username" required minlength="3" maxlength="32" autocomplete="username" placeholder="建议用拼音或英文名">
<div> </label>
<label class="form-label" for="username">用户名</label> <label class="field"><span>显示名称</span>
<input class="form-control" id="username" type="text" name="username" required minlength="3" maxlength="32" autocomplete="username" placeholder="建议用拼音或英文名"> <input class="form-control" id="display_name" type="text" name="display_name" maxlength="32" placeholder="例如:老王(可留空)">
</div> </label>
<div> <label class="field"><span>密码(至少 6 位)</span>
<label class="form-label" for="display_name">显示名称</label> <input class="form-control" id="password" type="password" name="password" required minlength="6" autocomplete="new-password">
<input class="form-control" id="display_name" type="text" name="display_name" maxlength="32" placeholder="例如:老王(可留空)"> </label>
</div> <label class="field"><span>再输一次密码</span>
<div> <input class="form-control" id="password2" type="password" name="password2" required minlength="6" autocomplete="new-password">
<label class="form-label" for="password">密码(至少 6 位)</label> </label>
<input class="form-control" id="password" type="password" name="password" required minlength="6" autocomplete="new-password"> <button type="submit" class="btn btn-primary btn-block">创建并登录</button>
</div> </form>
<div> <p class="auth-foot">忘记密码只能手动改数据库,请妥善保管。</p>
<label class="form-label" for="password2">再输一次密码</label>
<input class="form-control" id="password2" type="password" name="password2" required minlength="6" autocomplete="new-password">
</div>
<button type="submit" class="btn btn-primary w-100">创建并登录</button>
</form>
<p class="text-secondary small text-center mt-3 mb-0">忘记密码只能手动改数据库,请妥善保管。</p>
</div>
</div> </div>
</div> </div>
{{end}} {{end}}
+13 -13
View File
@@ -3,11 +3,11 @@
<header class="page-head"> <header class="page-head">
<div> <div>
<h1>订阅</h1> <h1>订阅</h1>
<p class="muted">共 {{.D.Total}} 条 · 剩余时长各自独立计算</p> <p>共 {{.D.Total}} 条 · 剩余时长各自独立计算</p>
</div> </div>
</header> </header>
<div class="tabs"> <nav class="tabs" aria-label="订阅状态">
<a href="/subscriptions?state=active" class="{{if eq .D.State "active"}}on{{end}}">进行中</a> <a href="/subscriptions?state=active" class="{{if eq .D.State "active"}}on{{end}}">进行中</a>
<a href="/subscriptions?state=due7" class="{{if eq .D.State "due7"}}on{{end}}">7 天内到期</a> <a href="/subscriptions?state=due7" class="{{if eq .D.State "due7"}}on{{end}}">7 天内到期</a>
<a href="/subscriptions?state=due_today" class="{{if eq .D.State "due_today"}}on{{end}}">今天到期</a> <a href="/subscriptions?state=due_today" class="{{if eq .D.State "due_today"}}on{{end}}">今天到期</a>
@@ -15,25 +15,25 @@
<a href="/subscriptions?state=paused" class="{{if eq .D.State "paused"}}on{{end}}">暂停中</a> <a href="/subscriptions?state=paused" class="{{if eq .D.State "paused"}}on{{end}}">暂停中</a>
<a href="/subscriptions?state=closed" class="{{if eq .D.State "closed"}}on{{end}}">已结束</a> <a href="/subscriptions?state=closed" class="{{if eq .D.State "closed"}}on{{end}}">已结束</a>
<a href="/subscriptions?state=all" class="{{if eq .D.State "all"}}on{{end}}">全部</a> <a href="/subscriptions?state=all" class="{{if eq .D.State "all"}}on{{end}}">全部</a>
</div> </nav>
<form class="filterbar" method="get" action="/subscriptions"> <form class="filterbar" method="get" action="/subscriptions">
<input type="hidden" name="state" value="{{.D.State}}"> <input type="hidden" name="state" value="{{.D.State}}">
<input type="search" name="q" value="{{.D.Q}}" placeholder="尾号 / 姓名 / 套餐" autocomplete="off"> <input type="search" name="q" value="{{.D.Q}}" placeholder="尾号 / 姓名 / 套餐" autocomplete="off" aria-label="搜索订阅">
<select name="package_id"> <select name="package_id" aria-label="按套餐筛选">
<option value="0">全部套餐</option> <option value="0">全部套餐</option>
{{range .D.Packages}} {{range .D.Packages}}
<option value="{{.ID}}"{{if eq $.D.PackageID .ID}} selected{{end}}>{{.Name}}</option> <option value="{{.ID}}"{{if eq $.D.PackageID .ID}} selected{{end}}>{{.Name}}</option>
{{end}} {{end}}
</select> </select>
<button class="btn" type="submit">筛选</button> <button class="btn btn-soft" type="submit">筛选</button>
</form> </form>
{{if .D.List}} {{if .D.List}}
<div class="table-wrap"> <div class="table-wrap">
<table class="table"> <table class="table table-subs">
<thead> <thead>
<tr><th>客户</th><th>套餐</th><th>状态</th><th>剩余</th><th>时间</th><th>操作</th></tr> <tr><th scope="col">客户</th><th scope="col">套餐</th><th scope="col">状态</th><th scope="col">剩余</th><th scope="col">时间</th><th scope="col">操作</th></tr>
</thead> </thead>
<tbody> <tbody>
{{range .D.List}} {{range .D.List}}
@@ -49,14 +49,14 @@
<td class="mono small">{{.PeriodText}}</td> <td class="mono small">{{.PeriodText}}</td>
<td class="actions-cell"> <td class="actions-cell">
{{if ne .Status "closed"}} {{if ne .Status "closed"}}
<a class="btn btn-sm" href="/customers/{{.CustomerID}}?extend={{.ID}}#extend">追加</a> <a class="btn btn-soft btn-sm" href="/customers/{{.CustomerID}}?extend={{.ID}}#extend">追加</a>
{{if eq .Status "active"}} {{if eq .Status "active"}}
<form method="post" action="/subscriptions/{{.ID}}/pause"><button class="btn btn-sm btn-ghost">暂停</button></form> <form method="post" action="/subscriptions/{{.ID}}/pause"><button class="btn btn-ghost btn-sm">暂停</button></form>
{{else if eq .Status "paused"}} {{else if eq .Status "paused"}}
<form method="post" action="/subscriptions/{{.ID}}/resume"><button class="btn btn-sm">恢复</button></form> <form method="post" action="/subscriptions/{{.ID}}/resume"><button class="btn btn-soft btn-sm">恢复</button></form>
{{end}} {{end}}
{{else}} {{else}}
<form method="post" action="/subscriptions/{{.ID}}/reopen"><button class="btn btn-sm">重新启用</button></form> <form method="post" action="/subscriptions/{{.ID}}/reopen"><button class="btn btn-soft btn-sm">重新启用</button></form>
{{end}} {{end}}
</td> </td>
</tr> </tr>
@@ -69,7 +69,7 @@
<div class="empty"> <div class="empty">
<div class="empty-mark">票</div> <div class="empty-mark">票</div>
<p>这个筛选下没有订阅。</p> <p>这个筛选下没有订阅。</p>
<a class="btn" href="/subscriptions?state=all">看全部</a> <a class="btn btn-soft" href="/subscriptions?state=all">看全部</a>
</div> </div>
{{end}} {{end}}
</div> </div>
+1 -1
View File
@@ -26,7 +26,7 @@ import (
"daili/internal/web" "daili/internal/web"
) )
const version = "1.9.5" const version = "1.10.0"
func main() { func main() {
cfgFlag := flag.String("config", "", "配置文件路径(默认:exe 同级的 "+config.FileName+")") cfgFlag := flag.String("config", "", "配置文件路径(默认:exe 同级的 "+config.FileName+")")