Opatix - Tailwind CSS 3 管理布局和 UI 工具包模板

# 项目简介 Opatix 是一套基于 Tailwind CSS 3 的后台管理模板与 UI 组件库，包含仪表盘、表单、图表、表格、地图等完整页面示例，适合快速搭建企业级管理后台或 SaaS 产品界面。模板使用 Gulp 进行构建自动化，支持 SCSS 和 PostCSS。 ## 技术栈 - Tailwind CSS 3.4.x - Gulp 4.x（构建工具） - SCSS / PostCSS - Chart.js、ApexCharts、Morris.js（图表） - DataTables（表格） - FullCalendar（日历） - Google Maps / JSVectorMap（地图） - Quill（富文本编辑器） - Dropzone（文件上传） - SweetAlert2、Preline UI（交互组件） ## 项目结构 ``` Admin/ gulpfile.js # Gulp 构建配置 package.json # 依赖声明 tailwind.config.js # Tailwind CSS 配置 yarn.lock src/ # 页面源文件 index.html # 仪表盘首页 starter-page.html # 空白起始页 app-calendar.html # 日历页面 app-contacts.html # 联系人管理 app-gallery.html # 图库页面 app-plans.html # 套餐管理 charts-apex.html # Apex 图表 tables-basic.html # 基础表格 forms-*.html # 各类表单页面（8 个） ui-*.html # UI 组件示例（18 个） icons.html # 图标展示 maps-vector.html # 矢量地图 Documentation/ index.html # 在线文档入口 ``` ## 核心文件说明 - `src/index.html` — 仪表盘首页，展示统计卡片、收入图表与团队活动 - `src/starter-page.html` — 空白起始页，可作为新页面的模板基础 - `gulpfile.js` — Gulp 任务定义，包含编译、压缩、热更新等流程 - `tailwind.config.js` — Tailwind CSS 主题配置与插件扩展 - `package.json` — 完整依赖清单，涵盖 UI 组件、图表库与构建工具 - `Documentation/index.html` — 模板使用文档，附有截图与步骤说明 ## 快速开始 ```bash # 安装 Node.js（建议 v18+） # 全局安装 Gulp CLI npm install gulp -g # 进入 Admin 目录安装依赖 cd Admin yarn install # 启动开发服务器（编译 + 热更新） gulp # 仅构建生产版本 gulp build ``` ## 使用建议 建议在 `src` 目录下基于 `starter-page.html` 复制新建页面，通过修改 `partials` 中的模块文件（侧边栏、顶栏、页脚）来实现全局布局统一。生产部署时使用 `gulp build` 生成压缩资源。