docs: 更新项目文档并移除中文README

- 删除过时的中文README文件
- 更新英文README内容为智柜宝商城项目文档
- 添加项目概述、核心功能、技术栈等信息
- 优化项目结构说明和快速开始指南
This commit is contained in:
dzq 2025-12-23 15:32:23 +08:00
parent 03e7fc5640
commit 8abfd0d094
2 changed files with 75 additions and 334 deletions

227
README.md
View File

@ -1,182 +1,105 @@
<div align="center">
<img alt="logo" width="120" height="120" src="./public/favicon.ico">
<h1>Mobile + Vue = MobVue</h1>
<h1>智柜宝商城 H5</h1>
</div>
[![github release](https://img.shields.io/github/v/release/un-pany/mobvue?style=flat)](https://github.com/un-pany/mobvue/releases)
[![github stars](https://img.shields.io/github/stars/un-pany/mobvue?style=flat)](https://github.com/un-pany/mobvue/stargazers)
[![gitee stars](https://gitee.com/un-pany/mobvue/badge/star.svg)](https://gitee.com/un-pany/mobvue/stargazers)
## 项目概述
<b>English | <a href="./README.zh-CN.md">中文</a></b>
智柜宝商城是一个基于 Vue3 技术栈开发的移动端 H5 应用,主要用于智能柜机的管理、商品销售、订单处理和审批流程等功能。
## Introduction
## 核心功能
MobVue is a well-crafted mobile web app template, built with popular technologies such as Vue3, Vite, TypeScript, and Vant
- **商品管理**:商品列表、新增/编辑商品、商品详情查看
- **订单管理**:订单列表、订单详情、订单结算、订单成功页
- **柜机管理**:柜机列表、暂存柜管理(支持横屏模式)
- **审批中心**:审批提交、审批处理、审批列表、耗材核销
- **租赁管理**:我的柜子、租柜动态
- **用户中心**:个人信息、登录/注册
## Notifications
## 技术栈
> [!NOTE]
> Powered by love! All source code is free and open-source. If you find it helpful, feel free to give a star to support!
| 技术 | 版本 | 说明 |
| --- | --- | --- |
| 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 | 工具函数库 |
> [!TIP]
> Paid services are officially launched! If you dont want to do it yourself but want to remove TS or other modules, try the lazy package! [Click to check it out](https://github.com/un-pany/mobvue/issues/2)
## 快速开始
## Usage
### 环境要求
<details>
<summary>Recommended Environment</summary>
- Node.js 20.x 或 22+
- pnpm 9.x 或 10+
- 新版 Visual Studio Code
- 安装 `.vscode/extensions.json` 中推荐的插件
<br>
- Latest version of `Visual Studio Code`
- Install the recommended plugins in the `.vscode/extensions.json` file
- `node` 20.x or 22+
- `pnpm` 9.x or 10+
</details>
<details>
<summary>Local Development</summary>
<br>
### 安装依赖
```bash
# Install dependencies
pnpm i
```
# Start the development server
### 本地开发
```bash
pnpm dev
```
</details>
<details>
<summary>Build</summary>
<br>
### 打包构建
```bash
# Build for the staging environment
# 构建生产环境
pnpm build
# 构建预发布环境
pnpm build:staging
# Build for the production environment
pnpm build
```
</details>
<details>
<summary>Local Preview</summary>
<br>
```bash
# Execute the build command first to generate the dist directory, then run the preview command
# 本地预览构建产物
pnpm preview
```
</details>
## 项目结构
<details>
<summary>Code Check</summary>
```
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 # 入口文件
```
<br>
## 浏览器支持
</details>
<details>
<summary>Commit Guidelines</summary>
<br>
`feat` New feature
`fix` Bug fix
`perf` Performance improvement
`refactor` Code refactoring
`docs` Documentation and comments
`types` Type-related changes
`test` Unit tests related
`ci` Continuous integration, workflows
`revert` Revert changes
`chore` Chores (update dependencies, modify configurations, etc)
</details>
## Links
**Online Preview**[github-pages](https://un-pany.github.io/mobvue)
**Documentation and Tutorials**[link](https://juejin.cn/column/7472609448201666599)
**Chinese Repository**[gitee](https://gitee.com/un-pany/mobvue)
**Chat Group**[check how to join](https://github.com/un-pany/mobvue/issues/3)
**Donations**[buy a coffee for the author](https://github.com/un-pany/mobvue/issues/1)
**Releases & Changelog**[releases](https://github.com/un-pany/mobvue/releases)
## Features
🔥 Latest [Syntax](https://vuejs.org/api/sfc-script-setup.html), [Configuration](./vite.config.ts), [Dependencies](./package.json)
📍 [Pure Level 1 Route Design](./src/router/index.ts) - Clear and Cache-Friendly
📱 Mobile Adaptation [px2vw](./postcss.config.ts) - Also Wide-Screen Friendly
🌐 Browser Compatibility [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) + [autoprefixer](https://github.com/postcss/autoprefixer) + [browserslist](https://github.com/browserslist/browserslist) - Compatible with multiple browsers and lower versions
🧩 [Layout System](./src/layout) - Configurable
🔒 Permission Control [Page Level](./src/router/guard.ts), [Button Level](./src/pages/demo/permission.vue)
🌗 Theme Mode [Dark Mode](./src/common/assets/styles/variables.css)
🫧 [Embrace Atomic CSS](./uno.config.ts)
🔧 [Components](https://github.com/unplugin/unplugin-vue-components) and [API](https://github.com/unplugin/unplugin-auto-import) Auto Import on Demand
🔎 [Husky](./.husky/pre-commit) + [lint-staged](./package.json) + [ESLint](./eslint.config.js) - Code Standardization
💪🏻 Still [TypeScript](./tsconfig.json) - Strict Mode with No `any`
👀 More Features - [Route Cache](./src/pinia/stores/keep-alive.ts), [Defensive Watermark](./src/common/composables/useWatermark.ts), [Grayscale and Colorblind Mode](./src/common/composables/useGrayscaleAndColorblind.ts), [SVG Loader](https://github.com/jpkleemans/vite-svg-loader), [VConsole](./src/plugins/console.ts), [White Screen Loading Animation](./public/app-loading.css), [Unit Tests](./tests)
## Tech Stack
**Vue3**: Vue3 + script setup with the latest Vue3 Composition API
**Vant**A lightweight, customizable Vue UI library for mobile web apps
**Pinia**: The legendary Vuex5
**Vite**: Really fast
**Vue Router**The routing system
**TypeScript**A superset of JavaScript
**pnpm**A faster, disk-space-saving package manager
**ESlint**Code linting and formatting
**Axios**Sends network requests
**UnoCSS**A high-performance, flexible atomic CSS engine
## Project Preview Image
![preview](./src/common/assets/images/preview.png)
## License
[MIT](./LICENSE) License © 2025-PRESENT [pany](https://github.com/pany-ang)
- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)
- 支持 iOS 12+ 和 Android 6+ 的移动端浏览器

View File

@ -1,182 +0,0 @@
<div align="center">
<img alt="logo" width="120" height="120" src="./public/favicon.ico">
<h1>Mobile + Vue = MobVue</h1>
</div>
[![github release](https://img.shields.io/github/v/release/un-pany/mobvue?style=flat)](https://github.com/un-pany/mobvue/releases)
[![github stars](https://img.shields.io/github/stars/un-pany/mobvue?style=flat)](https://github.com/un-pany/mobvue/stargazers)
[![gitee stars](https://gitee.com/un-pany/mobvue/badge/star.svg)](https://gitee.com/un-pany/mobvue/stargazers)
<b><a href="./README.md">English</a> | 中文</b>
## 简介
MobVue 是一个精心制作的移动端 H5 模板,基于 Vue3、Vite、TypeScript、Vant 等主流技术
## 通知
> [!NOTE]
> 为爱发电!所有源码均免费开源,如果对你有帮助,欢迎点个 Star 支持一下!
> [!TIP]
> 正式推出付费服务,如果不想自己动手,但想移除 TS 或其他模块?试试懒人套餐![点击看看](https://github.com/un-pany/mobvue/issues/2)
## 使用
<details>
<summary>推荐环境</summary>
<br>
- 新版 `Visual Studio Code`
- 安装 `.vscode/extensions.json` 文件中推荐的插件
- `node` 20.x 或 22+
- `pnpm` 9.x 或 10+
</details>
<details>
<summary>本地开发</summary>
<br>
```bash
# 安装依赖
pnpm i
# 启动服务
pnpm dev
```
</details>
<details>
<summary>打包构建</summary>
<br>
```bash
# 打包构建预发布环境
pnpm build:staging
# 打包构建生产环境
pnpm build
```
</details>
<details>
<summary>本地预览</summary>
<br>
```bash
# 先执行打包构建命令生成 dist 目录后再执行以下预览命令
pnpm preview
```
</details>
<details>
<summary>代码检查</summary>
<br>
</details>
<details>
<summary>代码提交规范</summary>
<br>
`feat` 新功能
`fix` 修复错误
`perf` 性能优化
`refactor` 重构代码
`docs` 文档和注释
`types` 类型相关
`test` 单测相关
`ci` 持续集成、工作流
`revert` 撤销更改
`chore` 琐事(更新依赖、修改配置等)
</details>
## 链接
**在线预览**[github-pages](https://un-pany.github.io/mobvue)
**文档教程**[链接](https://juejin.cn/column/7472609448201666599)
**国内仓库**[gitee](https://gitee.com/un-pany/mobvue)
**交流群**[查看进群方式](https://github.com/un-pany/mobvue/issues/3)
**捐赠**[请作者喝咖啡](https://github.com/un-pany/mobvue/issues/1)
**发行版 & 更新日志**[releases](https://github.com/un-pany/mobvue/releases)
## 特性
🔥 最新的 [语法](https://vuejs.org/api/sfc-script-setup.html)、[配置](./vite.config.ts)、[依赖](./package.json)
📍 [纯一级路由设计](./src/router/index.ts) - 清晰且缓存友好
📱 移动端适配 [px2vw](./postcss.config.ts) - 并且宽屏友好
🌐 浏览器适配 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) + [autoprefixer](https://github.com/postcss/autoprefixer) + [browserslist](https://github.com/browserslist/browserslist) - 兼容多种浏览器和低版本浏览器
🧩 [布局系统](./src/layout) - 配置化的
🔒 权限控制 [页面级](./src/router/guard.ts)、[按钮级](./src/pages/demo/permission.vue)
🌗 主题模式 [Dark Mode](./src/common/assets/styles/variables.css)
🫧 [拥抱原子化 CSS](./uno.config.ts)
🔧 [组件](https://github.com/unplugin/unplugin-vue-components) 和 [API](https://github.com/unplugin/unplugin-auto-import) 自动按需导入
🔎 [Husky](./.husky/pre-commit) + [lint-staged](./package.json) + [ESLint](./eslint.config.js) - 规范代码
💪🏻 依然 [TypeScript](./tsconfig.json) - 严格模式且无 `any`
👀 更多功能 - [路由缓存](./src/pinia/stores/keep-alive.ts)、[带防御的水印](./src/common/composables/useWatermark.ts)、[灰色模式, 色弱模式](./src/common/composables/useGrayscaleAndColorblind.ts)、[SVG Loader](https://github.com/jpkleemans/vite-svg-loader)、[VConsole](./src/plugins/console.ts)、[白屏加载动画](./public/app-loading.css)、[单元测试](./tests)
## 技术栈
**Vue3**:采用 Vue3 + script setup 最新的 Vue3 组合式 API
**Vant**:轻量、可定制的移动端 Vue 组件库
**Pinia**: 传说中的 Vuex5
**Vite**:真的很快
**Vue Router**:路由路由
**TypeScript**JavaScript 语言的超集
**pnpm**:更快速的,节省磁盘空间的包管理工具
**ESlint**:代码校验与格式化
**Axios**:发送网络请求(已封装好)
**UnoCSS**:具有高性能且极具灵活性的即时原子化 CSS 引擎
## 项目预览图
![preview](./src/common/assets/images/preview.png)
## License
[MIT](./LICENSE) License © 2025-PRESENT [pany](https://github.com/pany-ang)