snack-mall/admin-snack

Admin Snack — 零食商城管理后台

基于 Vue 3 + Vite 6 + TypeScript 5 + Element Plus 的现代化电商管理后台。

技术栈

类别	技术
框架	Vue 3.5 (Composition API + <script setup>)
语言	TypeScript 5
构建	Vite 6
路由	Vue Router 4
状态	Pinia 2 + 持久化
UI 库	Element Plus 2.9
工具类	UnoCSS（辅助）
图表	ECharts 5 + vue-echarts
HTTP	Axios
工具	dayjs、lodash-es、mitt、nprogress、VueUse
代码规范	ESLint 9 + Prettier 3
Node 要求	≥ 20

快速开始

# 1. 安装依赖
npm install

# 2. 启动开发服务器
npm run dev
# 访问 http://localhost:5173

# 3. 生产构建
npm run build:prod

# 4. 类型检查
npm run type-check

# 5. 代码格式化
npm run format

默认账号

用户名：admin
密  码：123456

目录结构

admin-snack/
├── public/                      # 不经 vite 处理的静态资源
│   └── favicon.svg
├── src/
│   ├── api/                     # 接口请求层（按业务模块划分）
│   │   ├── auth.ts
│   │   ├── dashboard.ts
│   │   ├── product.ts
│   │   ├── order.ts
│   │   └── ...
│   ├── assets/                  # 静态资源
│   ├── components/              # 公共组件
│   │   ├── common/
│   │   └── business/
│   ├── hooks/                   # 组合式函数
│   ├── layouts/                 # 布局
│   │   ├── BasicLayout.vue      # 主框架（侧边栏+顶栏+内容区）
│   │   └── components/
│   │       ├── SideMenu.vue
│   │       └── NavBreadcrumb.vue
│   ├── permission.ts            # 路由守卫
│   ├── router/                  # 路由
│   │   ├── index.ts             # 基础路由
│   │   └── async-routes.ts      # 业务路由（按权限动态挂载）
│   ├── stores/                  # Pinia
│   │   ├── index.ts
│   │   └── modules/
│   │       ├── user.ts          # 用户/管理员
│   │       └── app.ts           # 应用全局
│   ├── styles/                  # 全局样式
│   │   ├── variables.scss       # 设计系统令牌
│   │   ├── reset.scss
│   │   ├── element.scss         # Element Plus 主题覆盖
│   │   ├── transitions.scss
│   │   └── index.scss
│   ├── types/                   # TS 类型
│   │   ├── api.ts
│   │   └── auth.ts
│   ├── utils/                   # 工具
│   │   ├── request.ts           # axios 封装
│   │   ├── date.ts              # dayjs 封装
│   │   ├── dict.ts              # 业务字典
│   │   └── bus.ts               # mitt 事件总线
│   ├── views/                   # 页面
│   │   ├── login/index.vue
│   │   ├── dashboard/index.vue
│   │   ├── product/
│   │   ├── order/
│   │   ├── user/
│   │   ├── coupon/
│   │   ├── seckill/
│   │   ├── notice/
│   │   ├── chat/
│   │   └── error/404.vue
│   ├── App.vue
│   └── main.ts
├── .env.development             # 开发环境变量
├── .env.test                    # 测试环境变量
├── .env.production              # 生产环境变量
├── eslint.config.js
├── .prettierrc.json
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.node.json
├── uno.config.ts
└── vite.config.ts

设计系统

项	值
风格	Minimalism · Data-Dense Dashboard
主色	#1E40AF（深蓝）/ #3B82F6（亮蓝）
辅色	#60A5FA
状态色	success #10B981 / warning #F59E0B / danger #EF4444
字体	系统字体栈（PingFang SC / Microsoft YaHei）
圆角	卡片 10px、按钮 6px、输入框 10px
阴影	三档（sm / md / lg）
背景	页面 #F8FAFC、卡片 #FFFFFF

后端联调

.env.development 中配置：

VITE_API_BASE_URL=http://localhost:8080

vite.config.ts 已配置 /api 与 /uploads 路径代理到后端 server-snack 项目。

浏览器支持

现代浏览器 + ES2020（Chrome 90+, Edge 90+, Firefox 90+, Safari 14+）