LJWX Admin - Modern Dashboard Template
一个基于 Vite + Vue3 + Tailwind CSS + ECharts 的现代化管理后台模板，配套 ljwx-fastapi 后端使用。
技术栈
- 框架: Vue 3 (Composition API +
<script setup>) - 构建工具: Vite 7
- 路由: Vue Router 4 (history 模式)
- 样式: Tailwind CSS 3
- 图表: ECharts 5
- 代码风格: ESM + 单文件组件
项目结构
ljwx-admin/
├── src/
│ ├── assets/ # 静态资源
│ │ └── styles.css # Tailwind CSS 主样式文件
│ ├── components/ # 组件
│ │ ├── layout/ # 布局组件
│ │ │ ├── Sidebar.vue # 侧边导航栏
│ │ │ └── Topbar.vue # 顶部导航栏
│ │ └── charts/ # 图表组件
│ │ ├── BaseChart.vue # ECharts 基础组件
│ │ ├── TeamsBarChart.vue # 团队柱状图
│ │ ├── EmployeesCircleChart.vue # 员工分布饼图
│ │ └── ProjectLineChart.vue # 项目折线图
│ ├── layouts/ # 页面布局
│ │ └── AppLayout.vue # 主布局（侧边栏 + 顶栏 + 内容区）
│ ├── views/ # 页面视图
│ │ ├── Dashboard.vue # 仪表盘（主页）
│ │ ├── Teams.vue # 团队管理
│ │ ├── Employees.vue # 员工管理
│ │ ├── Projects.vue # 项目管理
│ │ └── Settings.vue # 系统设置
│ ├── router/ # 路由配置
│ │ └── index.js # 路由定义
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共静态资源
├── index.html # HTML 模板
├── vite.config.js # Vite 配置
├── tailwind.config.js # Tailwind 配置
├── postcss.config.js # PostCSS 配置
└── package.json # 依赖配置
功能特性
1. 响应式布局
- 左侧固定导航栏（260px）
- 顶部工具栏（搜索、通知、用户信息）
- 自适应内容区域
2. 路由页面
/dashboard- 数据仪表盘（带统计卡片、多种图表）/teams- 团队管理（表格视图）/employees- 员工管理（卡片网格）/projects- 项目管理（项目卡片）/settings- 系统设置（多标签页表单）
3. 图表组件
- 封装通用 BaseChart 组件，自动处理初始化、resize、销毁
- 提供三种示例图表：柱状图、饼图、折线图
- 所有图表使用自定义主题色，与整体设计风格统一
4. 设计规范
- 主色:
#6366F1(Indigo) - 辅色:
#F97316(Orange)、#22C55E(Green) - 背景:
#F5F5FB(浅灰) - 卡片: 白色底 +
rounded-3xl+ 柔和阴影 - 按钮:
rounded-xl
快速开始
安装依赖
npm install
启动开发服务器
npm run dev
访问 http://localhost:6115 或 http://YOUR_SERVER_IP:6115 (支持远程访问)
构建生产版本
npm run build
预览生产构建
npm run preview
与后端集成
本模板设计为配套 ljwx-fastapi 后端使用。
API 集成步骤
- 在
src/下创建api/目录 - 使用
axios或fetch封装 API 调用 - 在各个页面组件中调用 API 获取真实数据
示例：
// src/api/dashboard.js
export async function fetchDashboardStats() {
const response = await fetch('http://localhost:8000/api/dashboard/stats')
return response.json()
}
自定义主题
在 tailwind.config.js 中修改主题色：
theme: {
extend: {
colors: {
primary: '#YOUR_COLOR', // 修改主色
secondary: '#YOUR_COLOR',
success: '#YOUR_COLOR',
}
}
}
添加新页面
- 在
src/views/创建新的.vue文件 - 在
src/router/index.js添加路由配置 - 在
src/components/layout/Sidebar.vue添加导航菜单项
浏览器支持
- Chrome (推荐)
- Firefox
- Safari
- Edge
开发建议
- 使用 VSCode + Volar 插件获得最佳开发体验
- 启用 Tailwind CSS IntelliSense 插件
- 确保安装 ESLint 和 Prettier 保持代码风格一致
License
MIT