项目简介link

Arclon 是一套基于 Bootstrap 5.3 的响应式后台管理模板，集成图表、表单、数据表格、地图等丰富 UI 组件，适合快速构建 CRM、CMS 或管理后台系统。模板提供 gulp 自动化构建流程，支持 RTL 布局切换和深色/浅色主题。

技术栈link

• 框架: Bootstrap 5.3.3
• 构建工具: Gulp 4 + Sass
• 图表: ApexCharts 4
• 数据表格: DataTables 2 (含 FixedColumns、FixedHeader、Responsive、Select 等扩展)
• 富文本编辑器: Quill 2
• 日期选择: Flatpickr、Daterangepicker、Moment.js
• 其他: jQuery 3.7、Select2、Leaflet、Dragula、SweetAlert2、SimpleBar 等

项目结构link

Arclon_v1.0/
├── Admin/
│   ├── src/                    # 模板源码（含 @@include 片段）
│   │   ├── index.html          # 仪表盘示例
│   │   ├── pages-starter.html  # 空白页模板
│   │   └── *.html              # 各功能页面
│   ├── gulpfile.js             # Gulp 构建配置
│   ├── package.json
│   └── yarn.lock
├── Documentation/              # 离线文档
│   ├── index.html
│   └── assets/
└── (其他辅助文件)

核心文件说明link

• Admin/src/index.html — 仪表盘首页示例，展示卡片、进度条等组件
• Admin/src/pages-starter.html — 空白页面模板，可直接复制开发新页面
• Admin/gulpfile.js — 自动化构建脚本，负责编译 Sass、压缩资源、启动本地服务
• Admin/package.json — 项目依赖配置，包含所有 npm 依赖和构建脚本
• Admin/src/partials/ — HTML 公共片段（导航、页脚、头部资源引用等），通过 gulp-file-include 注入

快速开始link

# 安装 Node.js 后全局安装 Gulp
npm install gulp -g

# 进入 Admin 目录安装依赖
yarn install

# 启动开发服务器（编译并监听文件变化）
yarn start

构建产物默认输出到 dist 目录。如只需打包不启动服务，运行 yarn build。

使用建议link

• 开发新页面时建议以 pages-starter.html 为基础，按左侧菜单结构组织文件
• 该模板依赖 jQuery，如需 Vue/React 集成需额外改造 DOM 层
• 文档目录可直接在浏览器打开查看定制化说明