Files
subtrack/internal/web/templates/pages/customers.html
T
chun_qiu 8b9c347649
build / build-and-test (push) Successful in 3m38s
feat(v1.10.0): 重建 Bootstrap 主题层,修复迁移遗留的明暗/缓存/布局问题
背景: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 三档,明暗两套,工作台/
客户/套餐/订阅/设置/日志/大屏/登录全部截图走查,无横向溢出与控制台错误。
2026-10-20 01:46:11 +08:00

62 lines
2.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{define "content"}}
<div class="page">
<header class="page-head">
<div>
<h1>客户</h1>
<p>共 {{.D.Total}} 位 · 输入手机尾号可快速定位</p>
</div>
<div class="page-actions">
{{if .D.ShowArchived}}
<a class="btn btn-ghost" href="/customers?q={{.D.Q}}">隐藏已停用</a>
{{else}}
<a class="btn btn-ghost" href="/customers?q={{.D.Q}}&archived=1">显示已停用{{if gt .D.ArchivedCount 0}} ({{.D.ArchivedCount}}){{end}}</a>
{{end}}
<a class="btn btn-primary" href="/customers/new">+ 新建客户</a>
</div>
</header>
<form class="filterbar" method="get" action="/customers">
<input type="search" name="q" value="{{.D.Q}}" placeholder="手机尾号 / 姓名 / 游戏名 / 联系方式" autocomplete="off" aria-label="搜索客户">
<button class="btn btn-soft" type="submit">搜索</button>
{{if .D.Q}}<a class="btn btn-ghost" href="/customers">清除</a>{{end}}
</form>
{{if .D.List}}
<div class="table-wrap">
<table class="table table-customers">
<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"><span class="visually-hidden">操作</span></th></tr>
</thead>
<tbody>
{{range .D.List}}
<tr{{if .Archived}} class="archived"{{end}}>
<td><a class="tail" href="/customers/{{.ID}}">{{.Tail}}</a></td>
<td>
<a class="name" href="/customers/{{.ID}}">{{.Name}}</a>{{if .Archived}} <span class="chip chip-closed">已停用</span>{{end}}
{{if .GameName}}<div class="muted small">{{.GameName}}{{if .GameServer}} · {{.GameServer}}{{end}}</div>{{end}}
</td>
<td class="muted small">{{if .Contact}}{{.Contact}}{{else}}—{{end}}</td>
<td><span class="summary due-{{.Level}}">{{.Summary}}</span></td>
<td>{{range .TagList}}<span class="tagchip">{{.}}</span>{{end}}</td>
<td class="right"><a class="btn btn-soft btn-sm" href="/customers/{{.ID}}">详情</a></td>
</tr>
{{end}}
</tbody>
</table>
</div>
{{template "pager" .D.Pager}}
{{else}}
<div class="empty">
<div class="empty-mark">票</div>
{{if .D.Q}}
<p>没有匹配「{{.D.Q}}」的客户。</p>
<a class="btn btn-soft" href="/customers">看全部客户</a>
{{else}}
<p>还没有客户。先建一位,再给他开套餐。</p>
<a class="btn btn-primary" href="/customers/new">+ 新建客户</a>
{{end}}
</div>
{{end}}
</div>
{{end}}