Flarum 社区软件的设计语言投喂 ai，让它给你设计～

页面类型

Flarum 2.0 Admin SPA（Mithril 框架，hash 路由 #/...）

设计语言

Flat Design + Minimalism + Progressive Disclosure + Content-first

布局层级（DOM 锚点）

App (.App.affix)
├─ a.sr-only-focusable-custom # skip link
├─ #app-navigation .App-navigation # 移动端抽屉开关
├─ #drawer .App-drawer
│ └─ header#header .App-header.navbar-fixed-top
│ ├─ .Header-navigation (返回按钮)
│ ├─ .Header-title (chatPT)
│ ├─ #header-primary .Header-primary (空 ul)
│ └─ #header-secondary .Header-secondary
│ ├─ li.item-search → .Search (搜索按钮)
│ ├─ li.item-help → 获取帮助 (外链)
│ └─ li.item-session → .SessionDropdown (admin + 退出)
└─ main.App-content
└─ .container
├─ #admin-navigation .App-nav.sideNav
│ └─ .AdminNav.Dropdown--select (itemCount36)
│ ├─ 核心设置: 仪表盘/常规/邮箱/权限/外观/用户
│ ├─ li.item-search → .SearchBar (搜索扩展)
│ ├─ 功能: 各扩展项 (图标方块+名称+状态点)
│ └─ 语言包: English / 简体中文
└─ #content.sideNavOffset
└─ .AdminPage.DashboardPage
├─ .AdminHeader (h2 仪表盘 + 描述)
└─ .container
├─ .StatusWidget (Flarum/PHP/MySQL/调度/队列/会话 + 工具下拉)
├─ .AnnouncementsWidget (公告列表, 外链)
├─ .StatisticsWidget--mini (用户/讨论/回复)
└─ .ExtensionsWidget (需关注/建议/已禁用)

关键 UI 模式

• Sticky/Fixed Header: navbar-fixed-top
• Drawer Navigation: #drawer / Navigation-drawer
• Dropdown-select Navigation: AdminNav + Dropdown--select（progressive disclosure）
• Button Group: .ButtonGroup
• Icon Button: .Button--icon + FontAwesome
• Card/Widget: .DashboardWidget.Widget
• Status Indicator Dot: .ExtensionListItem-Dot.enabled/.disabled
• Search Input with Clear: .Input.SearchBar.Input--withClear
• Session Dropdown: .SessionDropdown
• Extension Tile: .ExtensionIcon + 内联 SVG data-URI

组件体系

自研 Flarum UI Kit，类名 BEM-ish：Block + Modifier
（Button / Button--icon / Button--flat / Button--link；
Dropdown / Dropdown-menu / Dropdown-menu--right；
Widget / DashboardWidget / ExtensionsWidget）

无障碍 (a11y)

sr-only skip link；aria-label、aria-haspopup="menu"、
aria-current="true"、role="search"；图标 aria-hidden="true"

交互/数据

hash 路由切换不刷新；扩展列表可搜索过滤；
工具菜单含 清除缓存/系统信息/显示隐藏高级设置；
公告来自 discuss.flarum.org（外链 target=_blank）