refactor(admin): 把单文件 admin.html (1075 行) 拆成多页 SPA,URL 路由切换

原 admin.html 是 1075 行的单文件 SPA:登录/仪表盘/音色/设置 4 个面板
挤在一个 Vue 实例里 tab 切换(login -> app shell -> 3 个 section)。
文件太大,样式 + script + template 混在一起,改一个面板要 scroll 整页找位置。

拆分后:
  router/admin.html         5.4 KB  Dashboard (重定向目标,默认页)
  router/admin-login.html   2.1 KB  登录页 (无 sidebar)
  router/admin-voices.html  13.3 KB 音色管理 + Add modal
  router/admin-settings.html 14.1 KB 系统设置
  router/admin.css          19.8 KB 共享样式 (4 个页面 + admin-shell.js 共用)
  router/admin-shell.js     6.9 KB  共享:http client (401 自动清 key)、toast 系统、
                                login helper、sidebar 渲染、format helpers

最大的页面 14 KB,平均 10 KB,各页只负责自己逻辑。

技术细节:
- 栈保持: Vue 3 + Axios 走 CDN,纯静态 HTML,零构建
- URL 路由: /admin /admin/login /admin/voices /admin/settings,
  router.go 加 4 条 ServeFile 路由 + 2 条静态资源路由
  (/admin/admin.css /admin/admin-shell.js)
- 抽 serveAdmin(body []byte) http.HandlerFunc helper 避免 4 段重复
- 鉴权: 各页 onMounted 检 sessionStorage.ttsAdminKey,无则 location.href
  跳 /admin/login;http client 401 响应拦截器清 key,下个请求被跳到 login
- Sidebar 一致: shell.js mountShell({activeNav, overview, voiceCount, ...})
  渲染 <aside> + 高亮 active 项,各页只传 activeNav 不重复维护 DOM
- 静态资源 Content-Type 显式设置:text/css / application/javascript

未变更:
- 不动 /api/* 后端接口
- 不动 /setup /dashboard /health /v1/audio/speech 路由
- 鉴权语义: HTML 公开 / API 鉴权 (与原版一致)
- 不引入构建工具 / 不引入新依赖

验证 (PowerShell 起真 server + setup API + curl):
  /admin                          200  5433 bytes  text/html
  /admin/login                    200  2082 bytes  text/html
  /admin/voices                   200 13282 bytes  text/html
  /admin/settings                 200 14110 bytes  text/html
  /admin/admin.css                200 19815 bytes  text/css
  /admin/admin-shell.js           200  6887 bytes  application/javascript
  /api/admin/overview (无 auth)   401
  /api/admin/overview (有 auth)   200
  各页内容 marker 命中 (filteredVoices / corsForm / voice_count / login-card)
This commit is contained in:
sun
2026-09-21 23:20:59 +08:00
parent e738fc8e23
commit 9245c1339a
7 changed files with 1275 additions and 1037 deletions
+39 -3
View File
@@ -21,6 +21,21 @@ var setupHTML []byte
//go:embed admin.html
var adminHTML []byte
//go:embed admin-login.html
var adminLoginHTML []byte
//go:embed admin-voices.html
var adminVoicesHTML []byte
//go:embed admin-settings.html
var adminSettingsHTML []byte
//go:embed admin.css
var adminCSS []byte
//go:embed admin-shell.js
var adminShellJS []byte
// Setup 返回主路由。
// 中间件顺序(由外向内):
// SecurityHeaders → InstallGuard → RateLimit → ConcurrencyLimit → Logger → handler
@@ -64,9 +79,21 @@ func Setup() *mux.Router {
// /admin 管理后台(M2);HTML 本身公开,鉴权由前端 JS 拦截
// (sessionStorage 没 key 就显示登录页;有 key 调 /api/admin/overview 触发 401 跳登录)
// API 端点(/api/admin/* /api/voices*)才需要 RequireAdmin。
r.HandleFunc("/admin", func(w http.ResponseWriter, req *http.Request) {
w.Header().Set("Content-Type", "text/html; charset=utf-8")
_, _ = w.Write(adminHTML)
//
// 拆分后 admin.html / admin-login.html / admin-voices.html / admin-settings.html
// 各自独立,URL 路由切换;共享 admin.css + admin-shell.js 由 adminStatic 提供。
r.HandleFunc("/admin", serveAdmin(adminHTML)).Methods("GET")
r.HandleFunc("/admin/login", serveAdmin(adminLoginHTML)).Methods("GET")
r.HandleFunc("/admin/voices", serveAdmin(adminVoicesHTML)).Methods("GET")
r.HandleFunc("/admin/settings", serveAdmin(adminSettingsHTML)).Methods("GET")
// admin 静态资源
r.HandleFunc("/admin/admin.css", func(w http.ResponseWriter, _ *http.Request) {
w.Header().Set("Content-Type", "text/css; charset=utf-8")
_, _ = w.Write(adminCSS)
}).Methods("GET")
r.HandleFunc("/admin/admin-shell.js", func(w http.ResponseWriter, _ *http.Request) {
w.Header().Set("Content-Type", "application/javascript; charset=utf-8")
_, _ = w.Write(adminShellJS)
}).Methods("GET")
// /api/admin/overview (鉴权)
@@ -132,3 +159,12 @@ func acceptsHTML(accept string) bool {
}
return false
}
// serveAdmin 返回一个把 embed 的 HTML bytes 以 text/html 写出的 handler。
// 抽出来只为让 /admin/voices 等多条路由的注册保持单行,避免重复 4 段。
func serveAdmin(body []byte) http.HandlerFunc {
return func(w http.ResponseWriter, _ *http.Request) {
w.Header().Set("Content-Type", "text/html; charset=utf-8")
_, _ = w.Write(body)
}
}