# 萝卜打印 - 微信小程序

付费打印服务微信小程序前端项目，基于 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`）