Agroxa v2.3.0 - Material Design 管理和仪表板模板

# 项目简介 Agroxa 是一套基于 Bootstrap 5 构建的多用途管理后台模板，提供垂直/水平等多种布局、丰富的数据可视化图表、完整表单与表格组件，适合快速搭建企业级后台系统或 SaaS 产品。 ## 技术栈 - Bootstrap 5.3.3（核心 UI 框架） - Gulp 4（自动化构建） - jQuery 3.7.1 - Chart.js / C3 / Morris.js / Chartist / Flot（图表库） - DataTables（数据表格，含 Buttons/Responsive/Select 等扩展） - Metismenu（侧边栏菜单） - TinyMCE 5（富文本编辑器） - SweetAlert2 / Bootstrap-SweetAlert（弹窗提示） ## 项目结构 ``` Agroxa-HTML_v2.3.0/ Admin/ gulpfile.js # Gulp 构建配置 package.json # 依赖声明 src/ index.html # 主仪表盘页面 partials/ body.html # 页面 body 标签及属性 menu.html # 顶部导航 + 侧边栏组合 head-css.html # CSS 引入片段 layouts-*.html # 12 种布局变体 charts-*.html # 6 种图表页面 tables-*.html # 4 种表格页面 forms-*.html # 7 种表单页面 ui-*.html # 20+ UI 组件页面 email-*.html # 邮件模块页面 pages-*.html # 认证/错误/工具页面 assets/ # 源码资源（SCSS/JS） Documentation/ index.html # 官方文档入口 ``` ## 核心文件说明 - `Admin/gulpfile.js` — 定义 SCSS 编译、CSS/JS 压缩、RTLCSS 转换等构建流程 - `Admin/src/partials/body.html` — 通过 `data-topbar` 属性控制顶部栏配色主题 - `Admin/src/partials/menu.html` — 组合顶部栏与侧边栏，支持水平布局切换 - `Admin/src/index.html` — 使用 `@@include` 指令拼接模块化片段 - `Admin/src/layouts-*.html` — 提供 boxed、compact、dark、horizontal 等 12 种布局变体 - `Admin/src/charts-*.html` — 分别集成 Chart.js、C3、Morris、Chartist、Flot、Knob 六种图表库 ## 快速开始 ```bash cd Admin npm install # 安装 gulp 及全部依赖（含 node-sass） npm install -g gulp # 如 gulp 未全局安装 gulp # 启动构建，输出到 dist/ 目录 ``` 构建完成后在浏览器打开 `dist/index.html` 即可预览。 ## 使用建议 模板通过 `data-topbar`、`data-layout` 属性切换主题配色和布局模式，无需改动 SCSS 源码即可快速适配项目风格；若需新增页面，建议参考 `src/` 中的 `@@include` 结构，拆分为可复用片段以保持代码整洁。