智柜宝商城 H5

<div align="center">
  <img alt="logo" width="120" height="120" src="./public/favicon.ico">
  <h1>智柜宝商城 H5</h1>
</div>

## 项目概述

智柜宝商城是一个基于 Vue3 技术栈开发的移动端 H5 应用，主要用于智能柜机的管理、商品销售、订单处理和审批流程等功能。

## 核心功能

- **商品管理**：商品列表、新增/编辑商品、商品详情查看
- **订单管理**：订单列表、订单详情、订单结算、订单成功页
- **柜机管理**：柜机列表、暂存柜管理（支持横屏模式）
- **审批中心**：审批提交、审批处理、审批列表、耗材核销
- **租赁管理**：我的柜子、租柜动态
- **用户中心**：个人信息、登录/注册

## 技术栈

| 技术 | 版本 | 说明 |
| --- | --- | --- |
| Vue | 3.5.13 | 前端框架 |
| TypeScript | 5.7.3 | 类型系统 |
| Vite | 6.1.1 | 构建工具 |
| Vue Router | 4.5.0 | 路由管理 |
| Pinia | 3.0.1 | 状态管理 |
| Vant | 4.9.17 | 移动端 UI 组件库 |
| Axios | 1.7.9 | HTTP 客户端 |
| UnoCSS | 66.0.0 | 原子化 CSS 引擎 |
| dayjs | 1.11.13 | 日期处理库 |
| lodash-es | 4.17.21 | 工具函数库 |

## 快速开始

### 环境要求

- Node.js 20.x 或 22+
- pnpm 9.x 或 10+
- 新版 Visual Studio Code
- 安装 `.vscode/extensions.json` 中推荐的插件

### 安装依赖

```bash
pnpm i
```

### 本地开发

```bash
pnpm dev
```

### 打包构建

```bash
# 构建生产环境
pnpm build

# 构建预发布环境
pnpm build:staging

# 本地预览构建产物
pnpm preview
```

## 项目结构

```
src/
├── common/           # 公共资源
│   ├── apis/         # API 接口定义
│   ├── assets/       # 静态资源
│   ├── components/   # 公共组件
│   ├── composables/  # 组合式函数
│   ├── constants/    # 常量定义
│   └── utils/        # 工具函数
├── http/             # HTTP 请求配置
├── layout/           # 布局组件
├── pages/            # 页面组件
│   ├── approval/     # 审批中心
│   ├── cabinet/      # 柜机管理
│   ├── error/        # 错误页面
│   ├── home/         # 首页
│   ├── login/        # 登录页面
│   ├── manage/       # 管理页面
│   ├── me/           # 个人中心
│   ├── order/        # 订单管理
│   ├── product/      # 商品管理
│   └── rental/       # 租赁管理
├── pinia/            # Pinia 状态管理
├── plugins/          # 插件配置
├── router/           # 路由配置
├── App.vue           # 根组件
└── main.ts           # 入口文件
```

## 浏览器支持

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)
- 支持 iOS 12+ 和 Android 6+ 的移动端浏览器