本文由 FlintHub 开发文档归档发布。原始文档日期见标题前缀，来源：暂存20260913/docs/后台设置页美化统一计划_20260819 (2).md。

后台设置页美化统一计划（2026-08-19）

范围：仅后台设置相关页面，风格统一化 + 适度美化。

状态：分析完成，待指令再动手（本会话仅分析 + 出计划，不改代码）。

红线（沿用既有规范）：❌ 不动前台（modern.css/组件）、❌ 不动插件 plugins/、❌ 不动动态数据色；后台 admin.css 与 app/Views/admin/* 为本次可改范围，但仅收样式、改 class，不改任何 PHP 逻辑。

一、现状盘点：后台"设置页"清单

侧边栏「站点设置」分组属纯设置页，加上 SplitDB / 备份 / 维护等操作类页面：

二、分析：风格不统一点（按"可统一"到"较难动"排序）

A. 分节标题层级/类名混乱（最高优先，最容易统一）

后台分节标题出现多种写法，admin-section-title 类在 CSS 中没有定义（grep 无匹配），是"幽灵类"，实际渲染靠 h2/h3 默认样式 + 各页残留浏览器默认样式：

→ 建议：统一为 h3.admin-section-title（或统一 h2），并在 admin.css 补齐 .admin-section-title 实际定义（.admin-section h3.admin-section-title），实现一致的区块副标题字号/字重/间距。

B. 表单容器宽度不统一

操作类页面（database 等）因含表格需整宽可保留；纯表单页统一用 admin-form-lg。mail 用 md 与其它表单页不一致，建议统一 lg。

C. 警示/说明框三套 DIY 工具，风格不一

1. alert alert-warning（通用）+ 各页叠加内联 style="border-left:4px solid #e67e22; margin:10px 0; padding:8px 12px; font-size:12px" —— database/settings 每区块都重复这段内联；
2. rebuild-box（灰底 #f8f9fa，search/queue/system 用）；
3. maintenance-box（浅橙底 warning 色，system/basic 模式用，system/settings_mode 用）；
4. alert-warning-custom / alert-info-custom（CSS 已定义但视图里几乎没用，属"D 上定义、待用"的备件）。

→ 建议：把「操作注意事项」警示统一成一条语义清晰的类（如 admin-warn-box 或直接复用 alert-warning-custom），删除 database/settings 与 overview 里重复的内联 style；说明/提示框统一用 rebuild-box。收敛 "orange 左竖条" 这类重复内联。

D. 图标体验不一致

• 区块标题 icon：大部分有（icon('settings') 等），但 settings_basic / settings_display / database.php 的 h1/分节标题有时无 icon；
• 部分 icon 键可能是占位问号（如 icon('verify')、icon('archive')、icon('history')、icon('database')）——需核对图标映射，避免渲染成问号。

E. 内联 style 散落（可收进 CSS）

• style="max-width:220px"（database/settings 多个 select，重复 5 处）→ 建 .select-narrow/.form-input-sm 类；
• style="float:right"（overview 刷新按钮）→ .admin-section h2 .pull-right 类；
• style="display:none/inline-block" 条件显隐（custom 归档天数）→ 保留（动态逻辑，但可改用已有 .hidden 工具类）；
• 若干 style="margin:...;padding:...;font-size:12px" 合并进警示/说明类。

F. 按钮语义色不全一致

• 既有：btn-primary / btn-secondary / btn-warning / btn-danger / btn-del / btn-sm；
• 搜索设置「停止」用 btn-del、数据库「优化」用 btn-primary、备份「导入」用 btn-warning——破坏性/谨慎操作与普通操作色语义不统一。
• → 建议：统一"确认型=primary / 次要=secondary / 谨慎危险=del(描边红) / 警示=warning"的色阶约定；操作列表内的小按钮统一 btn-sm。

G. 卡片/选择区样式

• 站点模式用 mode-card（每选项一个浅灰卡片，较为精致）；
• 队列模式用 queue-mode-card（Alpine 切换）；
• 搜索/系统/队列的说明区用 rebuild-box；
• 三套".card"类并存，视觉密度不一致。建议弱化差异：为辅选择区统一一套 "option-card" 基类（白底/浅灰底、圆角 8px、内边距一致），或至少让 mode-card / queue-mode-card 共用同一底色/圆角/内边距变量。

H. 页面脚手重复（跨页一致，非问题）

所有设置页都遵循 admin-container > include(_sidebar) > admin-content > admin-header > admin-section，骨架已统一，只需做"内层组件"对齐。这点是既有的优点，保留。

三、改造方案（按优先级分阶段，每个都是低风险纯样式/class 改动）

阶段 1：区块标题统一 + 补齐 CSS 定义

• admin.css 新增 .admin-section-title（h3 语义：15px、600、下间距 12px，沿用现有变量）；
• 各视图分节标题统一为 h3.admin-section-title（queue/search/database/overview/maintenance 的 h2/裸标题对齐）；
• 后台 h1 页标题统一保留 icon（补 basic/display/database.php 缺的 icon）。

阶段 2：表单容器 + 说明/警示框收敛

• 纯表单页统一 admin-form-lg（mail 从 md 对齐）；
• CSS 新增一个统一"操作警示"类（复用/合并 alert-warning-custom），删除 database/settings + overview 中重复内联 style="border-left..."；
• 说明提示统一用 rebuild-box 视觉（或统一为 admin-note）。

阶段 3：内联收类

• 新增 .select-narrow { max-width: 220px; }、.section-action { float: right; } 等；
• 替换 database/settings 5 处 max-width:220px、overview 的 float:right、custom 显隐等静态内联。

阶段 4：按钮语义色阶 + 卡片统一

• 统一按钮语义（见 F）；
• 弱化 mode-card / queue-mode-card / rebuild-box 视觉差异（共用圆角/底色/内边距变量）。

阶段 5：验证

• php -l 所有改动视图；
• 浏览器逐页回归（12 个设置/操作页），确认无排版错乱、无问号图标；
• 每处改动只动 class / 收内联，不触碰 PHP 逻辑与文案 key。

四、风险与注意

• 零逻辑风险：全部是视图 HTML class / admin.css 样式改动，不动控制器、不增删业务、不碰语言包。
• 图标 key 需先核对（避免问号），属低风险但需逐个确认映射存在。
• database/settings 等操作页整宽布局为刻意（含表格），阶段 2 不改它的宽度，只收内部警示/内联。
• 沿用既有规范：不动前台、不动插件、不动动态数据色。

五、待确认（动手前请指示）

1. 范围是否就限定在上述 12 个设置/操作页面？还是把全部后台页面（分类/用户/级别/日志等）一并纳入统一？
2. 分节标题统一为 h3.admin-section-title 可否？
3. 是否愿意一并清理 admin-section-title 等"幽灵 class"并补 CSS 定义？
4. 我建议只做样式 class 对齐 + 收内联，不做激进视觉重设计——符合你"风格统一"的要求，风险最低。可否按此方向？

（确认方向后再动手，未动任何代码。）

交接人：AtomCode（deepseek-v4-flash），2026-08-19。