jianf/HomeDash
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): 登录页页脚被当纯文本显示（html/template 转义）+ 三处页脚统一

Browse Source 
用户发现登录页出现 `<div class="navi-footer">…` 这串标记文字。

① 根因：auth.go 把 beianFooter() 的字符串塞进 Go html/template（map[string]string），
   模板自动转义整段 HTML → 页面上直接显示标记源码。
   修法：改用 map[string]any + template.HTML（beianFooter 内部已对备案号做 html.EscapeString，
   注入合法）。
② 登录页与门户页此前**都无视**后台的「页脚」自定义字段（后台提示语写的是"填写后以这里为准"）。
   新增统一入口 siteFooter(info)：自定义 footer 优先，否则按 icp/gongan/座右铭生成；
   pages.go（门户页）与 auth.go（登录页）都改走它。
③ 页脚座右铭此前只由 navi.js 在 Dashy 页客户端注入 → 登录页/门户页永远没有。
   新增 pageInfo 字段 motto（换行或 | 分行，留空用内置默认），
   footerMarkup() 生成时一并输出 .navi-quote 两行；navi.js 已有幂等判断不会重复注入。
   后台「站点信息」新增座右铭输入框，并登记进 /api/schema。
④ 登录页 / 门户页补页脚样式：左列两行备案号、右列两行座右铭；窄屏退化为居中单列。
This commit is contained in:
HomeDash Bot
2026-09-13 07:56:38 +08:00
parent ba22d3a1de
commit 3d18fb59ce
6 changed files with 341 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
admin-server/auth.go
View File

@ -160,7 +160,15 @@ input{width:100%;padding:11px 13px;border:1px solid var(--inbd);border-radius:10
input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
button[type=submit]{width:100%;margin-top:18px;padding:11px;border:0;border-radius:10px;background:var(--ac);color:#fff;font:inherit;font-weight:750;cursor:pointer}
.err{padding:9px 11px;border-radius:9px;background:var(--errbg);color:var(--errtx);font-size:13px;margin-bottom:14px}
.foot{text-align:center;margin-top:22px;font-size:11px;color:var(--tx2)}.foot a{color:inherit;text-decoration:none}
.foot{margin-top:22px;font-size:11px;color:var(--tx2)}
.foot a{color:inherit;text-decoration:none}
/* 页脚：左列两行备案号 / 右列两行座右铭（与主站一致）。
登录卡片只有 400px，窄到放不下两列时退化为居中单列，避免挤压换行。 */
.foot .navi-footer{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;grid-auto-flow:column;gap:2px 12px;justify-content:space-between;align-items:center;text-align:left}
.foot .navi-footer-sep{display:none}
.foot .navi-quote{grid-column:2;justify-self:end;opacity:.85}
@media(max-width:430px){.foot .navi-footer{grid-template-columns:auto;grid-auto-flow:row;justify-content:center;text-align:center;gap:2px}
.foot .navi-quote{grid-column:1;justify-self:center}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
</style></head><body><main class="card">
<button class="theme" type="button" onclick="(function(){var n=document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',n);localStorage.setItem('theme',n)})()" title="切换深浅色" aria-label="切换深浅色">◐</button>
@ -172,11 +180,14 @@ button[type=submit]{width:100%;margin-top:18px;padding:11px;border:0;border-radi
func renderPortalLogin(w http.ResponseWriter, redirect, errText string) {
w.Header().Set("Content-Type", "text/html; charset=utf-8")
w.Header().Set("Cache-Control", "no-store")
title, subtitle, logo, icp, gongan := authPageInfo()
_ = portalLoginTemplate.Execute(w, map[string]string{
title, subtitle, logo, _, _ := authPageInfo()
// 关键：页脚是一段 HTML，必须用 template.HTML 交给模板。
// 此前用 map[string]string，html/template 会把整段标记转义成文本，
// 页面直接显示 <div class="navi-footer">… 源码（线上实测）。
_ = portalLoginTemplate.Execute(w, map[string]any{
"Redirect": url.QueryEscape(redirect), "Error": errText,
"Title": title, "Subtitle": subtitle, "Logo": logo,
"Footer": beianFooter(icp, gongan),
"Footer": template.HTML(siteFooter(pageInfoMap())),
})
}

63
admin-server/main.go
View File

@ -826,7 +826,35 @@ func handleSyncInfo(w http.ResponseWriter, r *http.Request) {
// 备案号在 /admin/ 里就是两个普通输入框，模板统一由服务端生成，
// 用户不必写 HTML；类名与 web/navi.css 里的 .navi-footer 对应。
// footer 字段本身仍然保留：传了自定义 HTML 就以它为准（高级用法）。
// defaultMotto 是页脚座右铭的内置默认（每行一句）。
// 可用后台「站点信息 → 页脚座右铭」或 POST /admin/api/pageinfo {"motto":"…"} 覆盖（换行或 | 分行）。
const defaultMotto = "不念往昔之繁华\n无谓前路之沧桑"
// mottoLines 解析座右铭为多行；空值回落内置默认。
func mottoLines(info map[string]any) []string {
raw := strings.TrimSpace(mapString(info, "motto"))
if raw == "" {
raw = defaultMotto
}
parts := strings.FieldsFunc(raw, func(r rune) bool { return r == '\n' || r == '|' })
out := make([]string, 0, len(parts))
for _, p := range parts {
if t := strings.TrimSpace(p); t != "" {
out = append(out, t)
}
}
return out
}
// beianFooter 保留旧签名（不含座右铭），供既有调用与测试使用。
func beianFooter(icp, gongan string) string {
return footerMarkup(icp, gongan, nil)
}
// footerMarkup 生成页脚 HTML：备案号两项 + 座右铭若干行（.navi-quote）。
// 结构契约：.navi-footer > (a 备案 ×2, span.navi-footer-sep ×2, span.navi-quote ×N)。
// 分隔符保留在标记里（Dashy/登录页靠 CSS 隐藏并排成两列），这样旧样式也不会串行。
func footerMarkup(icp, gongan string, motto []string) string {
icp = strings.TrimSpace(icp)
gongan = strings.TrimSpace(gongan)
parts := make([]string, 0, 2)
@ -836,10 +864,27 @@ func beianFooter(icp, gongan string) string {
if gongan != "" {
parts = append(parts, `<a href="https://beian.mps.gov.cn" target="_blank" rel="noopener noreferrer">`+html.EscapeString(gongan)+`</a>`)
}
if len(parts) == 0 {
if len(parts) == 0 && len(motto) == 0 {
return ""
}
return `<div class="navi-footer">` + strings.Join(parts, `<span class="navi-footer-sep">·</span>`) + `</div>`
inner := strings.Join(parts, `<span class="navi-footer-sep">·</span>`)
for i, line := range motto {
cls := "navi-quote"
if i == 1 {
cls += " navi-quote-2"
}
inner += `<span class="` + cls + `">` + html.EscapeString(line) + `</span>`
}
return `<div class="navi-footer">` + inner + `</div>`
}
// siteFooter 是页脚的唯一入口：后台自定义 footer 优先，否则按备案号 + 座右铭生成。
// 登录页 / 门户页 / Dashy 三处都必须走它，避免"某一页漏掉座右铭、或整段被转义"。
func siteFooter(info map[string]any) string {
if s := strings.TrimSpace(mapString(info, "footer")); s != "" {
return s
}
return footerMarkup(mapString(info, "icp"), mapString(info, "gongan"), mottoLines(info))
}
// mapString 读取 map 里的字符串字段，缺失或类型不符时返回空串。
@ -876,6 +921,7 @@ func handlePageInfo(w http.ResponseWriter, r *http.Request) {
Footer *string `json:"footer"`
ICP *string `json:"icp"`
Gongan *string `json:"gongan"`
Motto *string `json:"motto"`
NavLinks *[]map[string]any `json:"navLinks"`
// 认证页与门户页的可配置文案（原先写死在代码/镜像里）
AuthTitle *string `json:"authTitle"`
@ -905,9 +951,18 @@ func handlePageInfo(w http.ResponseWriter, r *http.Request) {
if body.Gongan != nil {
cfg.PageInfo["gongan"] = *body.Gongan
}
// 页脚为空（留空 = 交给模板）时，按备案号重新生成。
// 座右铭：留空回落内置默认；必须在下面"重新生成页脚"之前写入
if body.Motto != nil {
if strings.TrimSpace(*body.Motto) == "" {
delete(cfg.PageInfo, "motto")
} else {
cfg.PageInfo["motto"] = strings.TrimSpace(*body.Motto)
}
}
// 页脚为空（留空 = 交给模板）时，按备案号 + 座右铭重新生成。
if strings.TrimSpace(mapString(cfg.PageInfo, "footer")) == "" {
cfg.PageInfo["footer"] = beianFooter(mapString(cfg.PageInfo, "icp"), mapString(cfg.PageInfo, "gongan"))
cfg.PageInfo["footer"] = footerMarkup(mapString(cfg.PageInfo, "icp"),
mapString(cfg.PageInfo, "gongan"), mottoLines(cfg.PageInfo))
} // 认证页 / 门户页文案：空串表示回落到内置默认值
setPageStr := func(k string, v *string) {
if v != nil {

11
admin-server/pages.go
View File

@ -62,7 +62,7 @@ func renderPortalPage() []byte {
"<!--PAGE_TITLE-->", html.EscapeString(pageStr(info, "portalTitle", defaultPortalTitle)),
"<!--HERO_TITLE-->", html.EscapeString(pageStr(info, "heroTitle", defaultPortalHero)),
"<!--HERO_SUBTITLE-->", html.EscapeString(pageStr(info, "heroSubtitle", defaultPortalHeroSub)),
"<!--FOOTER-->", beianFooter(mapString(info, "icp"), mapString(info, "gongan")),
"<!--FOOTER-->", siteFooter(info),
)
out := rep.Replace(string(builtin))
// 服务卡片区可覆盖：数据卷 portal/cards.html 存在时替换标记之间的内容，
@ -144,6 +144,15 @@ func handlePortalPage(w http.ResponseWriter, r *http.Request) {
_, _ = w.Write(renderPortalPage())
}
// pageInfoMap 读取数据卷里的站点信息（供 siteFooter 等统一入口使用）。
func pageInfoMap() map[string]any {
cfg, err := loadConfig()
if err != nil || cfg == nil || cfg.PageInfo == nil {
return map[string]any{}
}
return cfg.PageInfo
}
// authPageInfo 返回登录页所需字段（供 auth.go 渲染）。
func authPageInfo() (title, subtitle, logo, icp, gongan string) {
cfg, err := loadConfig()

3
admin-server/schema.go
View File

@ -28,7 +28,8 @@ var pageInfoFields = []struct{ Key, Label, Hint string }{
{"heroSubtitle", "门户页副标题", "留空回落内置默认"},
{"icp", "ICP 备案号", "显示于各页页脚；被代理页面也会注入"},
{"gongan", "公安备案号", "可选，显示于页脚"},
{"footer", "自定义页脚 HTML", "高级：整段替换页脚内容"},
{"motto", "页脚座右铭", "每行一句（换行或 | 分隔）；留空用内置默认"},
{"footer", "自定义页脚 HTML", "高级：整段替换页脚内容（登录页/门户页同样生效）"},
{"navLinks", "页脚导航链接数组", "数组，元素形如 {name,url}"},
}

3
admin/index.html
View File

@ -168,6 +168,7 @@ html[data-theme="dark"] .toast{ box-shadow:0 10px 30px rgba(0,0,0,.5) }
<div class="fg"><label>ICP 备案号</label><input id="p-icp" placeholder="京ICP备00000000号-1"></div>
<div class="fg"><label>公安备案号（可选）</label><input id="p-gongan" placeholder="京公网安备00000000000000号"></div>
</div>
<div class="fg"><label>页脚座右铭（每行一句，留空用内置默认）</label><textarea id="p-motto" rows="2" placeholder="不念往昔之繁华&#10;无谓前路之沧桑"></textarea></div>
<details style="margin:12px 0">
<summary style="cursor:pointer;font-size:13px;color:#475569">认证页与门户页文案（留空=用内置默认）</summary>
<div class="row" style="margin-top:8px">
@ -503,6 +504,7 @@ async function loadPageInfo() {
document.getElementById('p-gongan').value = gongan;
// 能从备案号字段还原时，高级 HTML 留空，保存时按模板重新生成
document.getElementById('p-footer').value = (icp || gongan) ? '' : (PAGE.footer || '');
document.getElementById('p-motto').value = PAGE.motto || '';
if (!PAGE.navLinks && PAGE.navLinks !== null) PAGE.navLinks = [];
renderNavLinks();
}
@ -521,6 +523,7 @@ document.getElementById('save-info').addEventListener('click', async () => {
gongan: document.getElementById('p-gongan').value,
// 留空 = 交给服务端按备案号生成模板；填写则整段覆盖
footer: document.getElementById('p-footer').value,
motto: document.getElementById('p-motto').value,
authTitle: document.getElementById('p-auth-title').value.trim(),
authSubtitle: document.getElementById('p-auth-sub').value.trim(),

490
portal/css/portal.css
View File

@ -1,241 +1,255 @@
:root,
[data-theme="light"] {
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--bg-input: #f1f5f9;
--bg-hover: rgba(241,245,249,0.8);
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
--accent: #2563eb;
--accent-bg: #dbeafe;
--accent-hover: #1d4ed8;
--danger: #dc2626;
--danger-bg: #fef2f2;
--success: #16a34a;
--success-bg: #f0fdf4;
--warning: #d97706;
--warning-bg: #fffbeb;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
--radius: 10px;
--radius-sm: 6px;
--font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
[data-theme="dark"] {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: #1e293b;
--bg-input: #334155;
--bg-hover: rgba(51,65,85,0.8);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border-color: #334155;
--accent: #60a5fa;
--accent-bg: #1e3a5f;
--accent-hover: #93bbfd;
--danger: #f87171;
--danger-bg: #3b1a1a;
--success: #4ade80;
--success-bg: #1a3b1a;
--warning: #fbbf24;
--warning-bg: #3b2f1a;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.25);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.2);
}
* { margin:0; padding:0; box-sizing:border-box }
html { height:100% }
body {
font-family:var(--font);
background:var(--bg-primary);
color:var(--text-primary);
min-height:100%;
line-height:1.5;
-webkit-font-smoothing:antialiased;
display:flex;
flex-direction:column;
}
nav {
background:var(--bg-secondary);
border-bottom:1px solid var(--border-color);
height:52px;
display:flex;
align-items:center;
padding:0 24px;
position:sticky;
top:0;
z-index:100;
gap:4px;
}
nav .brand {
font-size:16px;
font-weight:700;
color:var(--accent);
margin-right:24px;
text-decoration:none;
white-space:nowrap;
display:flex;
align-items:center;
gap:8px;
}
nav .brand svg { width:20px; height:20px }
nav a {
padding:14px 16px;
color:var(--text-secondary);
text-decoration:none;
font-size:13px;
font-weight:500;
border-bottom:2px solid transparent;
transition:all .12s;
}
nav a:hover { color:var(--text-primary) }
nav a.active { color:var(--accent); border-bottom-color:var(--accent) }
nav .spacer { margin-left:auto }
nav .nav-btn {
background:none;
border:1px solid var(--border-color);
color:var(--text-secondary);
cursor:pointer;
padding:6px 12px;
border-radius:var(--radius-sm);
font-size:13px;
transition:all .15s;
text-decoration:none;
display:flex;
align-items:center;
gap:6px;
}
nav .nav-btn:hover { color:var(--accent); border-color:var(--accent) }
.container { padding:32px 24px; max-width:1200px; margin:0 auto; flex:1; width:100% }
.card {
background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:var(--radius);
padding:20px;
transition:box-shadow .2s,border-color .2s;
box-shadow:var(--shadow-sm);
}
.btn {
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 16px;
border-radius:var(--radius-sm);
border:none;
font-size:13px;
font-weight:500;
cursor:pointer;
text-decoration:none;
transition:all .15s;
font-family:var(--font);
line-height:1.4;
}
.btn:active { transform:scale(.97) }
.btn-primary { background:var(--accent); color:#fff }
.btn-primary:hover { background:var(--accent-hover) }
.btn-ghost {
background:transparent;
border:1px solid var(--border-color);
color:var(--text-secondary);
}
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary) }
.btn-sm { padding:5px 10px; font-size:12px }
.btn-lg { padding:10px 24px; font-size:15px }
input,textarea,select {
background:var(--bg-input);
border:1px solid var(--border-color);
border-radius:var(--radius-sm);
padding:10px 14px;
color:var(--text-primary);
font-size:14px;
width:100%;
outline:none;
transition:border-color .15s,box-shadow .15s;
font-family:var(--font);
}
input:focus,textarea:focus,select:focus {
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-bg);
}
label {
display:block;
font-size:13px;
font-weight:500;
color:var(--text-secondary);
margin-bottom:4px;
}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.badge {
display:inline-flex;
align-items:center;
gap:4px;
padding:2px 8px;
border-radius:4px;
font-size:11px;
font-weight:500;
}
.badge-blue { background:var(--accent-bg); color:var(--accent) }
.badge-green { background:var(--success-bg); color:var(--success) }
.badge-red { background:var(--danger-bg); color:var(--danger) }
.badge-warning { background:var(--warning-bg); color:var(--warning) }
.error { color:var(--danger); font-size:13px; text-align:center; margin-bottom:12px }
.success { color:var(--success); font-size:13px; text-align:center; margin-bottom:12px }
.footer {
text-align:center;
padding:20px;
color:var(--text-muted);
font-size:12px;
border-top:1px solid var(--border-color);
background:var(--bg-secondary);
margin-top:auto;
}
.theme-btn {
background:none;
border:1px solid var(--border-color);
color:var(--text-secondary);
cursor:pointer;
padding:6px 10px;
border-radius:var(--radius-sm);
font-size:13px;
display:flex;
align-items:center;
gap:6px;
transition:all .15s;
}
.theme-btn:hover { color:var(--accent); border-color:var(--accent) }
.theme-btn svg { width:16px; height:16px }
.footer a { color:var(--text-muted); text-decoration:none }
.footer a:hover { color:var(--accent) }
@media(max-width:768px) {
nav { padding:0 12px; gap:2px }
nav .brand { font-size:14px; margin-right:12px }
nav a { padding:16px 8px; font-size:12px }
.container { padding:16px }
.card { padding:14px }
.grid-2,.grid-3,.grid-4 { grid-template-columns:1fr }
}
:root,
[data-theme="light"] {
--bg-primary: #f8fafc;
--bg-secondary: #ffffff;
--bg-card: #ffffff;
--bg-input: #f1f5f9;
--bg-hover: rgba(241,245,249,0.8);
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
--accent: #2563eb;
--accent-bg: #dbeafe;
--accent-hover: #1d4ed8;
--danger: #dc2626;
--danger-bg: #fef2f2;
--success: #16a34a;
--success-bg: #f0fdf4;
--warning: #d97706;
--warning-bg: #fffbeb;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
--radius: 10px;
--radius-sm: 6px;
--font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--mono: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}
[data-theme="dark"] {
--bg-primary: #0f172a;
--bg-secondary: #1e293b;
--bg-card: #1e293b;
--bg-input: #334155;
--bg-hover: rgba(51,65,85,0.8);
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-muted: #64748b;
--border-color: #334155;
--accent: #60a5fa;
--accent-bg: #1e3a5f;
--accent-hover: #93bbfd;
--danger: #f87171;
--danger-bg: #3b1a1a;
--success: #4ade80;
--success-bg: #1a3b1a;
--warning: #fbbf24;
--warning-bg: #3b2f1a;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.25);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.2);
}
* { margin:0; padding:0; box-sizing:border-box }
html { height:100% }
body {
font-family:var(--font);
background:var(--bg-primary);
color:var(--text-primary);
min-height:100%;
line-height:1.5;
-webkit-font-smoothing:antialiased;
display:flex;
flex-direction:column;
}
nav {
background:var(--bg-secondary);
border-bottom:1px solid var(--border-color);
height:52px;
display:flex;
align-items:center;
padding:0 24px;
position:sticky;
top:0;
z-index:100;
gap:4px;
}
nav .brand {
font-size:16px;
font-weight:700;
color:var(--accent);
margin-right:24px;
text-decoration:none;
white-space:nowrap;
display:flex;
align-items:center;
gap:8px;
}
nav .brand svg { width:20px; height:20px }
nav a {
padding:14px 16px;
color:var(--text-secondary);
text-decoration:none;
font-size:13px;
font-weight:500;
border-bottom:2px solid transparent;
transition:all .12s;
}
nav a:hover { color:var(--text-primary) }
nav a.active { color:var(--accent); border-bottom-color:var(--accent) }
nav .spacer { margin-left:auto }
nav .nav-btn {
background:none;
border:1px solid var(--border-color);
color:var(--text-secondary);
cursor:pointer;
padding:6px 12px;
border-radius:var(--radius-sm);
font-size:13px;
transition:all .15s;
text-decoration:none;
display:flex;
align-items:center;
gap:6px;
}
nav .nav-btn:hover { color:var(--accent); border-color:var(--accent) }
.container { padding:32px 24px; max-width:1200px; margin:0 auto; flex:1; width:100% }
.card {
background:var(--bg-card);
border:1px solid var(--border-color);
border-radius:var(--radius);
padding:20px;
transition:box-shadow .2s,border-color .2s;
box-shadow:var(--shadow-sm);
}
.btn {
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 16px;
border-radius:var(--radius-sm);
border:none;
font-size:13px;
font-weight:500;
cursor:pointer;
text-decoration:none;
transition:all .15s;
font-family:var(--font);
line-height:1.4;
}
.btn:active { transform:scale(.97) }
.btn-primary { background:var(--accent); color:#fff }
.btn-primary:hover { background:var(--accent-hover) }
.btn-ghost {
background:transparent;
border:1px solid var(--border-color);
color:var(--text-secondary);
}
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary) }
.btn-sm { padding:5px 10px; font-size:12px }
.btn-lg { padding:10px 24px; font-size:15px }
input,textarea,select {
background:var(--bg-input);
border:1px solid var(--border-color);
border-radius:var(--radius-sm);
padding:10px 14px;
color:var(--text-primary);
font-size:14px;
width:100%;
outline:none;
transition:border-color .15s,box-shadow .15s;
font-family:var(--font);
}
input:focus,textarea:focus,select:focus {
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-bg);
}
label {
display:block;
font-size:13px;
font-weight:500;
color:var(--text-secondary);
margin-bottom:4px;
}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.badge {
display:inline-flex;
align-items:center;
gap:4px;
padding:2px 8px;
border-radius:4px;
font-size:11px;
font-weight:500;
}
.badge-blue { background:var(--accent-bg); color:var(--accent) }
.badge-green { background:var(--success-bg); color:var(--success) }
.badge-red { background:var(--danger-bg); color:var(--danger) }
.badge-warning { background:var(--warning-bg); color:var(--warning) }
.error { color:var(--danger); font-size:13px; text-align:center; margin-bottom:12px }
.success { color:var(--success); font-size:13px; text-align:center; margin-bottom:12px }
.footer {
text-align:center;
padding:20px;
color:var(--text-muted);
font-size:12px;
border-top:1px solid var(--border-color);
background:var(--bg-secondary);
margin-top:auto;
}
.theme-btn {
background:none;
border:1px solid var(--border-color);
color:var(--text-secondary);
cursor:pointer;
padding:6px 10px;
border-radius:var(--radius-sm);
font-size:13px;
display:flex;
align-items:center;
gap:6px;
transition:all .15s;
}
.theme-btn:hover { color:var(--accent); border-color:var(--accent) }
.theme-btn svg { width:16px; height:16px }
.footer a { color:var(--text-muted); text-decoration:none }
.footer a:hover { color:var(--accent) }
/* 页脚内容：左列两行备案号 / 右列两行座右铭（与主站、登录页一致）。
分隔符保留在标记里但隐藏 —— 两列本身已经分开了。 */
.footer .navi-footer {
display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto;
grid-auto-flow:column; gap:2px 14px; justify-content:space-between;
align-items:center; text-align:left; max-width:1100px; margin:0 auto;
}
.footer .navi-footer-sep { display:none }
.footer .navi-quote { grid-column:2; justify-self:end; opacity:.85 }
@media(max-width:520px) {
.footer .navi-footer { grid-template-columns:auto; grid-auto-flow:row; justify-content:center; text-align:center; gap:2px }
.footer .navi-quote { grid-column:1; justify-self:center }
}
@media(max-width:768px) {
nav { padding:0 12px; gap:2px }
nav .brand { font-size:14px; margin-right:12px }
nav a { padding:16px 8px; font-size:12px }
.container { padding:16px }
.card { padding:14px }
.grid-2,.grid-3,.grid-4 { grid-template-columns:1fr }
}
/* ===== enhanced decorative & hero styles (added 2026-08-13) ===== */
body { position:relative }