英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

Adminator — 2026 管理仪表板模板

Adminator 4 是一个基于原生 JS 的管理仪表板模板，具有基于令牌的 CSS 变量设计系统、暗模式，并且无需任何框架依赖。没有 jQuery。没有 Bootstrap。 仅使用干净的 HTML、现代 CSS，以及整个 18 页模板约 700 KB 的生产 JS。

注意 — v4.0.0 是从零开始重写的。 新的设计系统、新的外壳架构，已移除 Bootstrap。如果你更喜欢之前的设计，v3 代码库仍在 legacy-v3 分支，并将继续接收安全更新。

adminator.colorlib.com → · 在线演示 → · 文档 → · 寻找高级模板？访问 DashboardPack →

预览

明亮模式

暗黑模式

18 页中的几页

升级到高级仪表板

需要高级功能、专属支持和可生产使用的代码吗？在 DashboardPack 探索我们精心挑选的专业管理模板集合。

查看所有高级模板

v4.0.0 新功能

从头开始重新设计和重写。整个模板围绕单一 CSS 变量令牌系统构建，JS 外壳一次性渲染 18 个页面的侧边栏、顶部栏和页脚。Bootstrap 已移除。生产环境 JS 从约 4.5 MB 降至约 700 KB —— 减少 85%。

亮点

• 令牌驱动的设计系统。所有颜色、排版、间距和阴影都存放在 _tokens.scss 中作为 CSS 变量，提供浅色和深色版本。编辑一个变量，所有组件都会更新。
• 真正的深色模式。通过 <html> 上的单一 data-theme 属性切换整个 UI —— 包括 Chart.js、FullCalendar 和 jsvectormap，它们都通过 MutationObserver 读取新的令牌值并重新渲染。
• 零框架 CSS。没有 Bootstrap。没有工具类混乱。每个 UI 原语（按钮、下拉菜单、提示、徽章、模态框、标签、手风琴、切换、进度条）都是定制构建并支持主题。
• 单一 JS 外壳。侧边栏/顶部栏/页脚从 Shell.js 中的单一 NAV 清单渲染。页面声明 <body data-active="..." data-crumbs="..."> 和三个占位符。添加导航项只需编辑一个数组。
• 真正的主题库集成。Chart.js（6 种图表类型）、FullCalendar（四种视图，24 个初始事件）、jsvectormap（带 10 个标记的世界地图）。所有库都读取 CSS 变量并在主题切换时重新渲染。
• 全部 18 个页面重新设计：仪表板、电子邮件、日历、聊天、撰写、图表、表单、UI 元素、按钮、基础表格、数据表、谷歌地图、矢量地图、空白、登录、注册、404、500。

包大小

自 v4.2.0 起，三个大型库为懒加载，因此页面成本取决于实际渲染内容。

查看 CHANGELOG.md 获取完整的发行说明，包括迁移指南。

快速开始

前提条件

• Node.js 22.22.2 或更高版本（推荐 24 LTS — 请参见 .nvmrc）
• npm 10 或更高版本（随 Node.js 一起提供）

安装并运行

# Clone the repo
git clone https://github.com/puikinsh/Adminator-admin-dashboard.git adminator
cd adminator

# Install dependencies
npm install

# Start the dev server (http://localhost:4000)
npm start

构建命令

# Development server with HMR
npm start

# Production build (extracted CSS, minified)
npm run release:minified

# Default build (extracted CSS, unminified — useful for debugging)
npm run build

# Lint everything (JS + SCSS) — must be 0/0 to ship
npm run lint

# Bundle size analyzer
npm run build:analyze

# Wipe dist/
npm run clean

通过 npm 安装

当前的 v4 版本在 npm 上以 adminator-admin-dashboard 发布：

npm install adminator-admin-dashboard

该包同时发布 src/ 和预构建的 dist/。直接使用它：

// In your bundler / app
import 'adminator-admin-dashboard/dist/style.css';
// dist/index.html + 17 other prebuilt pages are also in node_modules

或者将预构建文件从 node_modules/adminator-admin-dashboard/dist/ 中复制出来并进行静态服务。

⚠️ 不要固定到 @^2 或 @^3。 npm 上的旧版本（2.7.x – 2.9.0）指向 2026 年重设计之前的旧代码 —— 它们早于基于 token 的设计系统、暗模式和新 shell 架构。最新的 4.x 对应此仓库。

CDN（jsDelivr）

npm 包自带预构建的 dist/，因此无需安装即可通过 jsDelivr 访问完整静态模板。每个演示 HTML 都通过相对路径引用它的 CSS/JS，所以每个页面都可以直接从 CDN 完整渲染所有资源：

https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/index.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/email.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/calendar.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/charts.html
https://cdn.jsdelivr.net/npm/adminator-admin-dashboard@4/dist/datatable.html

适用于设计系统检查、快速原型制作或在沙箱中嵌入单个页面。将其钉在 @4 以获取最新的 4.x 版本，或钉在 @4.1.5 以获取特定版本。

关于哈希的提示。 Webpack 会生成内容哈希的资源文件名（例如 style.ee7b6e3f.css、2026.f17e3cec.js），因此这些单独文件的 CDN 直接 URL 在每次发布时都会改变。若需单文件 <script src> 方式并保持 URL 稳定，请通过 npm 安装并通过自己的构建流程打包。CDN 的优势在于提供即用型演示页面。

包括的页面

所有 18 个页面共用相同的框架（侧边栏 顶部栏 页脚）和主题系统。独立页面（认证、错误）不会使用框架。

架构

完整架构记录于 CLAUDE.md。简短版本:

src/
├── *.html                       # 18 pages, ~500 lines each
└── assets/
    ├── scripts/2026/            # The only JS — 6 modules
    │   ├── index.js             # entry: imports SCSS, mounts shell, runs init
    │   ├── Shell.js             # NAV manifest + sidebar/topbar/footer renderers
    │   ├── init.js              # theme toggle, dropdowns, accordions, tabs, etc.
    │   ├── charts.js            # Chart.js seeds, theme-aware
    │   ├── calendar.js          # FullCalendar 7, theme-aware
    │   └── maps.js              # jsvectormap, theme-aware
    └── styles/2026/             # The only SCSS — 18 partials
        ├── index.scss           # entry, @use's everything below
        ├── _tokens.scss         # CSS variables (light + dark)
        ├── _shell.scss          # sidebar, topbar, footer chrome
        ├── _components.scss     # buttons, cards, hero, table, tag
        ├── _ui.scss             # alerts, badges, progress, tabs, modal
        ├── _forms.scss          # inputs, select, switch, check, radio
        ├── _auth.scss / _error.scss / _chat.scss / _data.scss / _charts.scss
        ├── _dashboard.scss / _email.scss / _calendar.scss
        ├── _fullcalendar.scss   # FullCalendar 7 token bridge
        └── _responsive.scss     # all media queries in one place

每个 shell 页面都有相同的结构：

<body data-active="dashboard" data-crumbs="Workspace | Dashboard">
  <div class="shell">
    <div data-shell-sidebar></div>      <!-- rendered by Shell.js -->
    <div class="main">
      <div data-shell-topbar></div>     <!-- rendered by Shell.js -->
      <main class="content">
        <!-- page-specific content -->
      </main>
      <div data-shell-footer></div>     <!-- rendered by Shell.js -->
    </div>
  </div>
</body>

data-active 与 Shell.js 的 NAV 清单中的 key 对应。data-crumbs 是用 | 分隔的面包屑（最后一段作为当前页面高亮显示）。

添加新页面

1. 使用上面的主体结构创建 src/foo.html。
2. 在 webpack/plugins/htmlPlugin.js 的 titles 映射中添加 'foo': 'Adminator · Foo'。
3. 在 src/assets/scripts/2026/Shell.js 的 NAV 中添加侧边栏条目。
4. 重启开发服务器。

主题设置

每一个视觉决策都是 src/assets/styles/2026/_tokens.scss 中的一个 CSS 变量。修改其中一个，整个模板都会更新。

:root[data-theme="light"] {
  --primary:       #2563EB;
  --primary-light: #3B82F6;
  --primary-dark:  #1D4ED8;
  --primary-soft:  #EFF6FF;

  --bg-body:    #F0F4F8;
  --bg-card:    #FFFFFF;
  --bg-hover:   #F8FAFC;

  --t-base:     #1E293B;   /* primary text */
  --t-muted:    #64748B;
  --t-light:    #94A3B8;

  /* ... plus success / warning / danger / info / purple / pink / teal / orange */
}

:root[data-theme="dark"] {
  /* dark variants of the same tokens */
}

以编程方式切换主题：

// Set
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('dash26-theme', 'dark');

图表/地图会自动重新渲染 — 它们会观察 data-theme 属性。

技术栈

构建与工具

• Webpack 5 — 打包工具
• Sass（现代 @use 语法）— 预处理器
• PostCSS — 自动添加前缀，未来 CSS
• ESLint 10（扁平配置） Stylelint 17 — 代码检查
• Vitest 4 — jsdom 单元测试
• 没有使用转译器。Webpack 5 原生解析 ES 模块，且浏览器目标（Chrome/Firefox 90，Safari/iOS 15）无需降级，因此在 v4.2.0 移除了 Babel，经 A/B 构建验证后发现没有变化。

运行时库

• Chart.js 4.5 — 折线/柱状/环形/雷达/面积/堆叠图
• FullCalendar 7 — 日/周/月/议程视图
• jsvectormap 1.7 — 交互式世界地图

字体

• Inter — 正文字体
• Inter Tight — 标题字体
• JetBrains Mono — 数字、代码、眉毛字符

所有字体通过 Google Fonts 从 _base.scss 顶部的单个 @import 加载。

在 v4.0 中移除

以下依赖被移除 — 新设计中未使用任何这些依赖:

• bootstrap、@popperjs/core — 已被自定义 UI 基元替代
• dayjs — 已被原生 Intl.DateTimeFormat 替代
• perfect-scrollbar — 通过 CSS 样式化的原生滚动条
• masonry-layout、load-google-maps-api、skycons、brand-colors — 未使用

从 v3 迁移

v4 是重写，而不是升级。类名、文件路径和 JS API 都发生了变化。如果你有带自定义内容的 v3 项目：

1. 将 v4 作为全新模板处理。 不要尝试合并 — 将你的自定义内容复制到新的框架中。
2. 将主题覆盖 从 Bootstrap 变量移动到 _tokens.scss。
3. 采用页面结构（data-active、data-crumbs、三个占位 div）。
4. 迁移自定义 JS 从 AdminatorApp / Sidebar / ChartComponent 类到 init.js 中的 data-attribute 模式。

为了更顺利的路径，继续使用 v3 — 见下文。

继续使用 v3

如果你已经在 v3 基础上构建且更喜欢旧设计，v3 代码库仍存在于 legacy-v3 分支，并将在至少 12 个月内继续获得 安全更新。

# Get v3 from the legacy-v3 git branch
git clone -b legacy-v3 https://github.com/puikinsh/Adminator-admin-dashboard.git adminator-v3

关于 npm 和 v3 的说明。 v3 从未发布到 npm。已发布的版本是 2.7.x–2.9.0（旧版本线）和 4.1.5（2026 年重设计 — 当前 latest）。如果你特别需要 v3，请克隆上面的分支。如果你也需要 v3 之前的旧版遗留代码，npm install adminator-admin-dashboard@^2 会安装到 2.9.0。

浏览器支持

现代常更新的浏览器 — Chrome、Firefox、Safari、Edge（最近 2 个版本）。该模板使用 color-mix()、CSS 自定义属性、aspect-ratio，暂未使用容器查询。不支持 IE11。

更新日志

完整版本历史请参见 CHANGELOG.md。

最新发布

• v4.0.0 (2026-04-27) — 2026 年重设计。新设计系统，移除 Bootstrap，捆绑包减小约 85%。详情。
• v3.0.0 (2026-01-13) — 架构发布。新的工具模块、Vitest、代码分割、捆绑分析。
• v2.7.1 — Completely no jQuery.
• v2.6.0 — 暗黑模式系统。

其他平台的 Adminator

• Adminator RTL — 从右至左语言（阿拉伯语、希伯来语、波斯语）

作者

Colorlib

Colorlib 的更多资源

• 免费 Bootstrap 管理仪表板
• HTML5 和 CSS3 登录表单
• Bootstrap 注册表单
• CSS 表格模板
• Bootstrap 侧边栏示例
• Bootstrap 5 模板
• HTML 网站模板
• 免费 CSS 模板

许可证

Adminator 根据 MIT 许可证 许可。可以使用、复制、修改、合并、发布、分发、再许可和销售副本——但始终注明 Colorlib 为原作者。