a424d06731
- Added Redux store configuration in `src/store/index.ts`. - Created slices for user, order, file, and printer with respective reducers and actions. - Implemented custom hooks `useAppDispatch` and `useAppSelector` for typed Redux usage. - Defined types for file, order, printer, and user in `src/types`. - Added utility functions for formatting prices, file sizes, and dates in `src/utils`. - Created common styles and animations in `src/styles` for consistent UI design. - Integrated API request handling with token management in `src/utils/request.ts`. - Implemented local storage management for user token and info in `src/utils/storage.ts`.
157 lines
4.3 KiB
Markdown
157 lines
4.3 KiB
Markdown
# 萝卜打印 - 微信小程序
|
||
|
||
付费打印服务微信小程序前端项目，基于 Taro + React + TypeScript。
|
||
|
||
## 技术栈
|
||
|
||
| 技术 | 说明 |
|
||
|------|------|
|
||
| 框架 | Taro 4.x + React |
|
||
| 语言 | TypeScript |
|
||
| 状态管理 | Redux Toolkit |
|
||
| 编译工具 | Vite |
|
||
| UI | 自定义组件 |
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── api/ # API 接口层
|
||
│ ├── auth.ts # 认证服务
|
||
│ ├── file.ts # 文件服务
|
||
│ ├── order.ts # 订单服务
|
||
│ ├── printer.ts # 打印机服务
|
||
│ ├── price.ts # 价目服务
|
||
│ └── pay.ts # 支付服务
|
||
├── config/ # 配置文件
|
||
│ └── api.ts # API 地址配置
|
||
├── store/ # Redux 状态管理
|
||
│ ├── index.ts # Store 入口
|
||
│ ├── hooks.ts # Hooks
|
||
│ └── slices/ # Slice 模块
|
||
│ ├── userSlice.ts
|
||
│ ├── orderSlice.ts
|
||
│ ├── fileSlice.ts
|
||
│ └── printerSlice.ts
|
||
├── pages/ # 页面
|
||
│ ├── index/ # 首页
|
||
│ ├── login/ # 登录页
|
||
│ ├── user/ # 用户中心
|
||
│ ├── file/ # 文件管理
|
||
│ └── order/ # 订单管理
|
||
├── components/ # 公共组件
|
||
│ ├── OrderCard/ # 订单卡片
|
||
│ └── PriceTable/ # 价目表
|
||
├── types/ # TypeScript 类型
|
||
│ ├── user.ts
|
||
│ ├── order.ts
|
||
│ ├── file.ts
|
||
│ ├── printer.ts
|
||
│ └── price.ts
|
||
├── utils/ # 工具函数
|
||
│ ├── format.ts # 格式化工具
|
||
│ └── storage.ts # 本地存储
|
||
└── hooks/ # 自定义 Hooks
|
||
└── useAuth.ts # 认证 Hook
|
||
```
|
||
|
||
## 环境配置
|
||
|
||
API 地址配置：`src/config/api.ts`
|
||
|
||
```typescript
|
||
const DEV_API_URL = 'http://localhost:8080';
|
||
const PROD_API_URL = 'http://localhost:8080';
|
||
|
||
export const API_BASE_URL = process.env.NODE_ENV === 'development' ? DEV_API_URL : PROD_API_URL;
|
||
```
|
||
|
||
## 开发命令
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 开发模式（微信小程序）
|
||
npm run dev:weapp
|
||
|
||
# 生产构建
|
||
npm run build:weapp
|
||
```
|
||
|
||
## 微信开发者工具配置
|
||
|
||
1. 导入项目目录：`dist/miniprogram`
|
||
2. AppID：使用 `touristappid` 或自己申请的
|
||
3. 启动开发服务器后点击刷新
|
||
|
||
## 主要功能
|
||
|
||
### 用户模块
|
||
- 手机号 + 验证码登录
|
||
- 微信一键登录
|
||
- 用户信息管理
|
||
- 退出登录
|
||
|
||
### 文件模块
|
||
- 文件上传
|
||
- 文件列表
|
||
- 文件删除
|
||
- 打印功能
|
||
|
||
### 订单模块
|
||
- 创建订单
|
||
- 订单列表
|
||
- 订单详情
|
||
- 取消订单
|
||
|
||
### 打印模块
|
||
- 选择打印规格（A4/A3/照片）
|
||
- 选择打印颜色（黑白/彩色）
|
||
- 选择份数
|
||
- 选择打印机
|
||
|
||
## 页面说明
|
||
|
||
| 页面 | 路径 | 说明 |
|
||
|------|------|------|
|
||
| 首页 | `/pages/index/index` | 主入口，显示快捷操作和价目表 |
|
||
| 登录 | `/pages/login/index` | 手机号登录/微信登录 |
|
||
| 用户中心 | `/pages/user/index` | 用户信息、余额、菜单 |
|
||
| 我的文件 | `/pages/file/index` | 文件列表管理 |
|
||
| 上传文件 | `/pages/file/upload/index` | 文件上传 |
|
||
| 我的订单 | `/pages/order/index` | 订单列表 |
|
||
| 订单详情 | `/pages/order/detail/index` | 订单详情 |
|
||
|
||
## 代码规范
|
||
|
||
### 导入规范
|
||
- Redux 类型从 `@reduxjs/toolkit` 导入
|
||
- API_BASE_URL 从 `../config/api` 导入
|
||
|
||
### 函数缓存
|
||
- 使用 `useCallback` 缓存事件处理函数
|
||
- 使用 `useMemo` 缓存计算结果
|
||
|
||
### 命名规范
|
||
- 组件使用 PascalCase（如 `OrderCard`）
|
||
- 样式类使用小写 + 连字符（如 `.order-card`）
|
||
- 常量使用全大写（如 `BASE_URL`）
|
||
|
||
## 更新日志
|
||
|
||
### 2026-03-30
|
||
- 项目初始化
|
||
- 完成首页、登录页、用户中心、文件管理、订单管理页面开发
|
||
- 实现 Redux Toolkit 状态管理
|
||
- 实现 API 接口层统一管理
|
||
- 优化手机号输入验证
|
||
- 美化界面样式（淡雅配色）
|
||
|
||
### 技术优化
|
||
- 使用 `useCallback` 缓存函数减少重复创建
|
||
- 使用 `useMemo` 缓存计算结果
|
||
- API URL 统一配置文件管理
|
||
- Redux 导入路径修正为 `@reduxjs/toolkit`
|
||
- 提取共享 request 函数消除代码重复（`src/utils/request.ts`）
|