fastapi-template/frontend

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 集成步骤

1. 在 src/ 下创建 api/ 目录
2. 使用 axios 或 fetch 封装 API 调用
3. 在各个页面组件中调用 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',
    }
  }
}

添加新页面

1. 在 src/views/ 创建新的 .vue 文件
2. 在 src/router/index.js 添加路由配置
3. 在 src/components/layout/Sidebar.vue 添加导航菜单项

浏览器支持

• Chrome (推荐)
• Firefox
• Safari
• Edge

开发建议

• 使用 VSCode + Volar 插件获得最佳开发体验
• 启用 Tailwind CSS IntelliSense 插件
• 确保安装 ESLint 和 Prettier 保持代码风格一致

License

MIT