一个基于 Vue 3 和 Bootstrap 5 构建的现代化后台管理系统模板。
- 🚀 Vue 3 - 使用最新的 Vue 3 Composition API
- 🎨 Bootstrap 5 - 现代化的 UI 组件库
- 🌙 深色/浅色主题 - 支持主题切换和系统主题跟随
- 📦 pnpm - 快速的包管理器
- 🛣️ Vue Router - 单页面应用路由
- 🗃️ Pinia - 状态管理
- 📱 响应式设计 - 支持多设备访问
- 🎯 TypeScript 支持 - 可选的类型安全
- 🔧 Vite - 快速的构建工具
- 📊 仪表盘 - 数据概览和统计
- 👥 用户管理 - 用户账户和权限管理
- 📦 产品管理 - 产品信息和库存管理
- 🛒 订单管理 - 订单处理和状态跟踪
- 📊 产品报表 - 多条件查询和数据分析
- 🚨 报警中心 - 库存报警和配送评价监控
- ⚙️ 系统设置 - 系统配置和用户偏好
- Node.js >= 16.0.0
- pnpm >= 7.0.0
# 使用 pnpm 安装依赖
pnpm install# 启动开发服务器
pnpm dev访问 http://localhost:3000 查看应用。
# 构建生产版本
pnpm build# 预览构建结果
pnpm previewvue-admin/
├── public/ # 静态资源
├── src/ # 源代码
│ ├── assets/ # 资源文件
│ │ └── css/ # 样式文件
│ ├── components/ # 可复用组件
│ ├── layout/ # 布局组件
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia 状态管理
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # HTML 模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置
└── README.md # 项目说明
- 前端框架: Vue 3
- UI 框架: Bootstrap 5
- 路由: Vue Router 4
- 状态管理: Pinia
- 构建工具: Vite
- 包管理器: pnpm
- 图标: Bootstrap Icons
- HTTP 客户端: Axios
- 用户登录界面
- 演示账户:
admin/123456 - 响应式设计，支持移动端
- 数据统计卡片
- 销售趋势图表（预留接口）
- 最近活动列表
- 最新订单表格
- 用户列表展示
- 搜索和筛选功能
- 添加/编辑/删除用户
- 批量操作支持
- 产品网格展示
- 产品分类筛选
- 产品信息管理
- 库存状态显示
- 订单列表和统计
- 订单状态管理
- 订单搜索和筛选
- 订单详情查看
- 多条件查询（名称、分类、价格、库存等）
- 表格和卡片两种视图模式
- 数据统计和分析
- 数据导出功能
- 分页和批量操作
- 库存报警监控（紧急/警告级别）
- 配送评价报警（低评价/延迟/投诉）
- 报警阈值设置和配置
- 报警历史统计和趋势分析
- 实时报警处理和响应
- 常规设置
- 个人资料管理
- 安全设置
- 通知设置
- 外观设置（包含主题切换）
系统支持深色/浅色主题切换，主题设置会自动保存到本地存储。
- 顶部导航栏切换按钮 - 快速在浅色/深色主题间切换
- 系统设置页面 - 在外观设置中选择主题模式：
- 浅色主题
- 深色主题
- 跟随系统（自动检测系统主题）
在 src/assets/css/main.css 中修改 CSS 变量来自定义主题：
:root {
--primary-color: #0d6efd;
--secondary-color: #6c757d;
--success-color: #198754;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #0dcaf0;
/* 浅色主题变量 */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #212529;
--text-secondary: #6c757d;
--border-color: #dee2e6;
}
.theme-dark {
/* 深色主题变量 */
--bg-primary: #1a1a1a;
--bg-secondary: #2d2d2d;
--text-primary: #ffffff;
--text-secondary: #b3b3b3;
--border-color: #404040;
}在 src/router/index.js 中添加新的路由：
{
path: '/new-page',
name: 'NewPage',
component: () => import('@/views/NewPage.vue'),
meta: { title: '新页面', icon: 'bi-new-icon' }
}在 src/stores/ 目录下创建新的 store：
import { defineStore } from 'pinia'
export const useNewStore = defineStore('new', () => {
const data = ref([])
const addData = (item) => {
data.value.push(item)
}
return { data, addData }
})- 在
src/views/目录下创建新的 Vue 组件 - 在
src/router/index.js中添加路由配置 - 在
src/layout/index.vue中添加菜单项（如需要）
- 在
src/components/目录下创建组件 - 在需要的地方导入并使用
- 使用 Bootstrap 5 的 CSS 类
- 自定义样式写在
src/assets/css/main.css - 组件特定样式使用
<style scoped>
pnpm build构建完成后，dist 目录包含所有静态文件。
将 dist 目录的内容上传到 Web 服务器即可。
server {
listen 80;
server_name your-domain.com;
root /path/to/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88
MIT License
欢迎提交 Issue 和 Pull Request！
- ✨ 新增报警中心页面
- ✨ 库存报警监控功能
- ✨ 配送评价报警系统
- ✨ 报警阈值配置
- ✨ 报警历史统计
- 🎨 优化报警页面样式
- ✨ 新增产品报表页面
- ✨ 多条件查询功能
- ✨ 表格和卡片双视图模式
- ✨ 数据统计和分析
- ✨ 分页和批量操作
- 🎨 优化报表页面样式
- ✨ 新增深色/浅色主题切换功能
- ✨ 支持系统主题自动跟随
- ✨ 主题设置持久化存储
- 🎨 优化深色主题样式
- 🎨 添加主题切换动画效果
- 初始版本发布
- 基础功能模块完成
- Vue 3 + Bootstrap 5 集成