# 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 |

## 快速开始

```bash
# 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+）