AdminLTE - 完全响应式Bootstrap 5管理仪表盘

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
2. 启动开发服务器：npm start (在http://localhost:3000打开浏览器)
3. 开始编码：文件更改后会自动编译和刷新

生产构建

1. 完整生产构建：npm run production (包括代码检查和优化)
2. 快速构建：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: AccessibilityConfig
  private liveRegion: HTMLElement | null = null
  private 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: HTMLElement

  constructor(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智能小助手）
公众号二维码