shop-web/README.md

智柜宝商城 H5

项目概述

智柜宝商城是一个基于 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 中推荐的插件

安装依赖

pnpm i

本地开发

pnpm dev

打包构建

# 构建生产环境
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+ 的移动端浏览器