From a83bfbb2b3971ed7fade0392a0eada0ba6ff6229 Mon Sep 17 00:00:00 2001
From: subtrack <dev@subtrack.local>
Date: Mon, 19 Oct 2026 22:15:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(v1.9.0):=20Bootstrap=205=20=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB=E7=AC=AC=202/4=20=E8=BD=AE=EF=BC=88=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?/=E5=88=9D=E5=A7=8B=E5=8C=96=E9=A1=B5=20+=20=E5=9F=BA=E7=A1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

本轮全部为前端改动，版本号保持 1.9.0：
- CSS 加载顺序调整为 app.css → bootstrap，让 Bootstrap 覆盖表格/按钮/表单/卡片等基础组件，日历/热屏等自定义组件类不受影响
- 主题切换同时写 data-theme 与 data-bs-theme，Bootstrap 组件跟随亮/暗
- 登录页、初始化页重写为 Bootstrap card + form-control + btn-primary，垂直居中
- 客户列表搜索框加 form-control

验证：
- 无头 Chrome 实拍登录、客户列表、套餐、设置四页（shots/bs2-*.png）
- 数据库与业务逻辑零改动

后续：第 3 轮日历抽屉/追加面板/客户月历，第 4 轮大屏内部与收尾
---
 internal/web/static/app.js                  |  1 +
 internal/web/templates/_layout.html         |  2 +-
 internal/web/templates/pages/customers.html |  2 +-
 internal/web/templates/pages/login.html     | 38 +++++++++-------
 internal/web/templates/pages/setup.html     | 50 ++++++++++++---------
 5 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/internal/web/static/app.js b/internal/web/static/app.js
index 9af8fba..a244ec5 100644
--- a/internal/web/static/app.js
+++ b/internal/web/static/app.js
@@ -155,6 +155,7 @@
     btn.addEventListener('click', function () {
       var next = effective() === 'dark' ? 'light' : 'dark';
       document.documentElement.setAttribute('data-theme', next);
+      document.documentElement.setAttribute('data-bs-theme', next);
       document.cookie = KEY + '=' + next + '; path=/; max-age=31536000; SameSite=Lax';
     });
   });
diff --git a/internal/web/templates/_layout.html b/internal/web/templates/_layout.html
index 84bc3e4..4de65a7 100644
--- a/internal/web/templates/_layout.html
+++ b/internal/web/templates/_layout.html
@@ -5,8 +5,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{{.Title}} · 代打台</title>
 <link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
-<link rel="stylesheet" href="/static/vendor/bootstrap.min.css?v={{.Version}}">
 <link rel="stylesheet" href="/static/app.css?v={{.Version}}">
+<link rel="stylesheet" href="/static/vendor/bootstrap.min.css?v={{.Version}}">
 </head>
 <body class="bg-body-tertiary">
 {{if .User}}
diff --git a/internal/web/templates/pages/customers.html b/internal/web/templates/pages/customers.html
index 39cf5d5..6e0ca29 100644
--- a/internal/web/templates/pages/customers.html
+++ b/internal/web/templates/pages/customers.html
@@ -16,7 +16,7 @@
   </header>
 
   <form class="filterbar" method="get" action="/customers">
-    <input type="search" name="q" value="{{.D.Q}}" placeholder="手机尾号 / 姓名 / 游戏名 / 联系方式" autocomplete="off">
+    <input class="form-control" type="search" name="q" value="{{.D.Q}}" placeholder="手机尾号 / 姓名 / 游戏名 / 联系方式" autocomplete="off">
     <button class="btn" type="submit">搜索</button>
     {{if .D.Q}}<a class="btn btn-ghost" href="/customers">清除</a>{{end}}
   </form>
diff --git a/internal/web/templates/pages/login.html b/internal/web/templates/pages/login.html
index 31ba2bf..aed8a55 100644
--- a/internal/web/templates/pages/login.html
+++ b/internal/web/templates/pages/login.html
@@ -1,20 +1,26 @@
 {{define "content"}}
-<div class="auth">
-  <div class="auth-card">
-    <div class="auth-brand"><span class="brand-mark">代</span><span>代打台</span></div>
-    <h1>登录</h1>
-    <p class="muted">所有账户均为管理员，任何操作都会留痕。</p>
-    <form method="post" action="/login" class="form">
-      <input type="hidden" name="next" value="{{.Next}}">
-      <label class="field"><span>用户名</span>
-        <input type="text" name="username" required autofocus autocomplete="username">
-      </label>
-      <label class="field"><span>密码</span>
-        <input type="password" name="password" required autocomplete="current-password">
-      </label>
-      <button type="submit" class="btn btn-primary btn-block">登录</button>
-    </form>
-    <p class="auth-foot muted">代打台 · 单文件部署 · 数据只在本机</p>
+<div class="d-flex align-items-center justify-content-center" style="min-height:100vh">
+  <div class="card shadow-sm" style="width:100%;max-width:400px">
+    <div class="card-body p-4">
+      <div class="d-flex align-items-center gap-2 mb-3">
+        <span class="badge text-bg-success fs-6">代</span><span class="fw-bold">代打台</span>
+      </div>
+      <h1 class="h4 mb-1">登录</h1>
+      <p class="text-secondary small mb-4">所有账户均为管理员，任何操作都会留痕。</p>
+      <form method="post" action="/login" class="vstack gap-3">
+        <input type="hidden" name="next" value="{{.Next}}">
+        <div>
+          <label class="form-label" for="username">用户名</label>
+          <input class="form-control" id="username" type="text" name="username" required autofocus autocomplete="username">
+        </div>
+        <div>
+          <label class="form-label" for="password">密码</label>
+          <input class="form-control" id="password" type="password" name="password" required autocomplete="current-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>
 {{end}}
diff --git a/internal/web/templates/pages/setup.html b/internal/web/templates/pages/setup.html
index 7f67716..65c0ce9 100644
--- a/internal/web/templates/pages/setup.html
+++ b/internal/web/templates/pages/setup.html
@@ -1,25 +1,33 @@
 {{define "content"}}
-<div class="auth">
-  <div class="auth-card">
-    <div class="auth-brand"><span class="brand-mark">代</span><span>代打台</span></div>
-    <h1>创建第一个管理员</h1>
-    <p class="muted">数据库里还没有账户。设置好账号后即可开始录入套餐与客户。</p>
-    <form method="post" action="/setup" class="form">
-      <label class="field"><span>用户名</span>
-        <input type="text" name="username" required minlength="3" maxlength="32" autocomplete="username" placeholder="建议用拼音或英文名">
-      </label>
-      <label class="field"><span>显示名称</span>
-        <input type="text" name="display_name" maxlength="32" placeholder="例如：老王（可留空）">
-      </label>
-      <label class="field"><span>密码（至少 6 位）</span>
-        <input type="password" name="password" required minlength="6" autocomplete="new-password">
-      </label>
-      <label class="field"><span>再输一次密码</span>
-        <input type="password" name="password2" required minlength="6" autocomplete="new-password">
-      </label>
-      <button type="submit" class="btn btn-primary btn-block">创建并登录</button>
-    </form>
-    <p class="auth-foot muted">忘记密码只能手动改数据库，请妥善保管。</p>
+<div class="d-flex align-items-center justify-content-center" style="min-height:100vh">
+  <div class="card shadow-sm" style="width:100%;max-width:440px">
+    <div class="card-body p-4">
+      <div class="d-flex align-items-center gap-2 mb-3">
+        <span class="badge text-bg-success fs-6">代</span><span class="fw-bold">代打台</span>
+      </div>
+      <h1 class="h4 mb-1">创建第一个管理员</h1>
+      <p class="text-secondary small mb-4">数据库里还没有账户。设置好账号后即可开始录入套餐与客户。</p>
+      <form method="post" action="/setup" class="vstack gap-3">
+        <div>
+          <label class="form-label" for="username">用户名</label>
+          <input class="form-control" id="username" type="text" name="username" required minlength="3" maxlength="32" autocomplete="username" placeholder="建议用拼音或英文名">
+        </div>
+        <div>
+          <label class="form-label" for="display_name">显示名称</label>
+          <input class="form-control" id="display_name" type="text" name="display_name" maxlength="32" placeholder="例如：老王（可留空）">
+        </div>
+        <div>
+          <label class="form-label" for="password">密码（至少 6 位）</label>
+          <input class="form-control" id="password" type="password" name="password" required minlength="6" autocomplete="new-password">
+        </div>
+        <div>
+          <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>
 {{end}}