AdminLTE - Bootstrap 5管理仪表盘

项目概述

AdminLTE是一个完全响应式的管理模板，基于**Bootstrap 5**框架和JavaScript插件。高度可定制且易于使用，适合从小型移动设备到大型桌面等多种屏幕分辨率。

功能特性

WCAG 2.1 AA合规性功能

原则1：可感知性
  • 所有装饰性图标都有aria-hidden="true"
    • 有意义图像有适当的alt文本
    • 使用屏幕阅读器友好的图标字体方法
    • 语义化的HTML结构和适当的地标
    • 表单标签与输入正确关联
    • 表格标题有正确的scope属性
    • 标题层次遵循逻辑顺序(h1 → h2 → h3)
    • 颜色对比度满足4.5:1(普通文本)和3:1(大文本)的最低要求
原则2：可操作性
  • 所有交互元素都支持键盘操作
    • 标签顺序合理且可预测
    • 无键盘陷阱
    • 跳过重复内容的链接
    • 菜单支持箭头键导航
    • ESC键关闭模态框和下拉菜单
    • 尊重用户prefers-reduced-motion偏好设置

核心组件

  • 卡片小部件(Card Widget)
    • 树形视图(Treeview)
    • 直接聊天(Direct Chat)
    • 全屏功能(Full Screen)
    • 推送菜单(Push Menu)
    • 布局控制(Layout)

安装指南

开发环境

  1. 安装依赖：npm install
    1. 启动开发服务器：npm start (在http://localhost:3000打开浏览器)
    1. 开始编码：文件更改后会自动编译和刷新

生产构建

  1. 完整生产构建：npm run production (包括代码检查和优化)
    1. 快速构建：npm run build (适合开发/测试)

可用脚本

  • npm start - 启动开发服务器并监视文件更改
    • npm run build - 构建开发环境的所有资源
    • npm run production - 完整生产构建，包括代码检查和bundlewatch
    • npm run lint - 运行所有代码检查(JS, CSS, 文档, lockfile)
    • npm run css - 仅构建CSS
    • npm run js - 仅构建JavaScript

使用说明

基本初始化

import { onDOMContentLoaded } from './util/index.js'
import Layout from './layout.js'
import { initAccessibility } from './accessibility.js'onDOMContentLoaded(() => {// 初始化布局const layout = new Layout(document.body)layout.holdTransition()// 初始化无障碍功能const accessibilityManager = initAccessibility({announcements: true,skipLinks: true,focusManagement: true,keyboardNavigation: true,reducedMotion: true})// 添加语义地标accessibilityManager.addLandmarks()// 标记应用已加载setTimeout(() => {document.body.classList.add('app-loaded')}, 400)
})

卡片小部件使用示例

import CardWidget from './card-widget.js'// 初始化卡片小部件
const card = document.querySelector('.card')
if (card) {const cardWidget = new CardWidget(card, {animationSpeed: 500,collapseTrigger: '[data-lte-toggle="card-collapse"]',removeTrigger: '[data-lte-toggle="card-remove"]',maximizeTrigger: '[data-lte-toggle="card-maximize"]'})// 程序化控制cardWidget.collapse()  // 折叠卡片cardWidget.expand()    // 展开卡片cardWidget.toggle()    // 切换卡片状态
}

核心代码

无障碍管理器核心

/*** AdminLTE无障碍模块* WCAG 2.1 AA合规功能*/
export class AccessibilityManager {private config: AccessibilityConfigprivate liveRegion: HTMLElement | null = nullprivate focusHistory: HTMLElement[] = []constructor(config: Partial<AccessibilityConfig> = {}) {this.config = {announcements: true,skipLinks: true,focusManagement: true,keyboardNavigation: true,reducedMotion: true,...config}this.init()}private init(): void {if (this.config.announcements) {this.createLiveRegion()}if (this.config.skipLinks) {this.addSkipLinks()}// 其他初始化...}// WCAG 4.1.3: 状态消息private createLiveRegion(): void {this.liveRegion = document.createElement('div')this.liveRegion.id = 'live-region'this.liveRegion.className = 'live-region'this.liveRegion.setAttribute('aria-live', 'polite')this.liveRegion.setAttribute('aria-atomic', 'true')this.liveRegion.setAttribute('role', 'status')document.body.append(this.liveRegion)}// WCAG 2.4.1: 绕过块private addSkipLinks(): void {const skipLinksContainer = document.createElement('div')skipLinksContainer.className = 'skip-links'// 添加跳过链接...document.body.prepend(skipLinksContainer)}
}

布局控制核心

/*** AdminLTE布局控制*/
class Layout {_element: HTMLElementconstructor(element: HTMLElement) {this._element = element}holdTransition(): void {let resizeTimer: ReturnType<typeof setTimeout>window.addEventListener('resize', () => {document.body.classList.add('hold-transition')clearTimeout(resizeTimer)resizeTimer = setTimeout(() => {document.body.classList.remove('hold-transition')}, 400)})}
}

更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）