# web_print_front

**Repository Path**: procedure-sweeper/web_print_front

## Basic Information

- **Project Name**: web_print_front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-07
- **Last Updated**: 2025-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文件打印应用技术文档

## 项目概述

这是一个移动端文件打印应用，用户可以上传文件、设置打印参数、填写联系信息并提交打印订单。应用包含三个主要页面：首页（文件上传和设置）、订单页（查看订单状态）和个人中心页（用户信息和设置）。

## 技术栈

### 前端技术
- **框架**: React 18+
- **语言**: TypeScript
- **路由**: React Router
- **UI组件**: 自定义组件 + Tailwind CSS
- **状态管理**: React Context API
- **工具库**: 
  - `framer-motion` - 动画效果
  - `recharts` - 数据可视化（预留）
  - `sonner` - 消息提示
  - `zod` - 数据验证（预留）
  - `clsx` 和 `tailwind-merge` - 样式工具

### 后端技术
- **框架**: Egg.js
- **数据库**: MongoDB/MySQL
- **文件存储**: 本地文件系统或云存储
- **身份验证**: JWT (JSON Web Token)
- **API**: RESTful API

## 项目结构

### 前端结构
```
src/
├── App.tsx             # 应用入口和路由配置
├── components/         # 通用组件
│   ├── BottomNavbar.tsx # 底部导航栏
│   ├── FileUpload.tsx  # 文件上传组件
│   ├── PrintSettings.tsx # 打印设置组件
│   ├── ContactForm.tsx # 联系方式表单
│   ├── OrderCard.tsx   # 订单卡片组件
│   ├── StatusBadge.tsx # 状态徽章组件
│   └── Empty.tsx       # 空状态组件
├── contexts/           # React Context
│   └── authContext.ts  # 认证上下文
├── hooks/              # 自定义钩子
│   └── useTheme.ts     # 主题切换钩子
├── pages/              # 页面组件
│   ├── HomePage.tsx    # 首页
│   ├── OrdersPage.tsx  # 订单页
│   └── ProfilePage.tsx # 个人中心页
├── types/              # TypeScript类型定义
│   └── index.ts        # 类型声明
├── lib/                # 工具函数
│   └── utils.ts        # 工具方法
├── main.tsx            # 应用挂载点
└── index.css           # 全局样式
```

### 后端结构（设计）
```
app/
├── controller/         # 控制器
│   ├── user.js         # 用户相关接口
│   ├── order.js        # 订单相关接口
│   └── file.js         # 文件处理接口
├── service/            # 业务逻辑层
│   ├── user.js         # 用户服务
│   ├── order.js        # 订单服务
│   └── file.js         # 文件服务
├── model/              # 数据模型
│   ├── User.js         # 用户模型
│   ├── Order.js        # 订单模型
│   └── File.js         # 文件模型
├── middleware/         # 中间件
│   ├── auth.js         # 认证中间件
│   └── errorHandler.js # 错误处理中间件
├── public/             # 静态资源
├── router.js           # 路由配置
└── app.js              # 应用配置
```

## 主要功能模块

### 1. 文件上传模块
- 支持拖拽上传和点击上传
- 文件类型验证（支持PDF、Word、Excel和图片）
- 文件大小显示
- 文件移除功能

### 2. 打印设置模块
- 打印份数调整
- 打印颜色选择（黑白/彩色）
- 页面方向设置（纵向/横向）
- 纸张大小选择（A4/A5/Letter）
- 双面打印开关

### 3. 联系信息模块
- 姓名输入
- 手机号码验证
- 详细地址输入

### 4. 订单管理模块
- 订单列表展示
- 订单状态显示（待处理/处理中/已完成/已取消）
- 订单详情查看
- 订单历史记录

### 5. 用户中心模块
- 用户信息展示
- 主题切换（明/暗模式）
- 功能菜单（打印历史、支付方式、收货地址等）
- 退出登录功能

## API接口设计

### 1. 用户相关接口

#### 登录
```
POST /api/user/login
Request: { username, password }
Response: { token, userInfo }
```

#### 注册
```
POST /api/user/register
Request: { username, password, email, phone }
Response: { success: boolean, message: string }
```

#### 获取用户信息
```
GET /api/user/profile
Headers: { Authorization: "Bearer token" }
Response: { id, username, email, phone, avatar }
```

### 2. 订单相关接口

#### 创建订单
```
POST /api/order
Headers: { Authorization: "Bearer token" }
Request: { fileId, printSettings, contactInfo }
Response: { id, status, totalPrice, createTime }
```

#### 获取订单列表
```
GET /api/order/list
Headers: { Authorization: "Bearer token" }
Response: [{ id, fileName, fileSize, date, status, totalPrice, ... }]
```

#### 获取订单详情
```
GET /api/order/detail/:id
Headers: { Authorization: "Bearer token" }
Response: { id, fileName, printSettings, contactInfo, status, totalPrice, ... }
```

#### 更新订单状态
```
PUT /api/order/update/:id
Headers: { Authorization: "Bearer token" }
Request: { status }
Response: { success: boolean, message: string }
```

### 3. 文件相关接口

#### 上传文件
```
POST /api/file/upload
Headers: { Authorization: "Bearer token" }
Request: FormData { file }
Response: { id, fileName, fileSize, fileType, url }
```

#### 获取文件信息
```
GET /api/file/:id
Headers: { Authorization: "Bearer token" }
Response: { id, fileName, fileSize, fileType, url }
```

## 部署说明

### 前端部署
1. 安装依赖：`pnpm install`
2. 构建项目：`pnpm build`
3. 将构建生成的`dist`目录部署到静态文件服务器

### 后端部署
1. 安装依赖：`npm install`
2. 配置数据库连接和文件存储路径
3. 启动服务：`npm start` 或使用PM2等进程管理工具

## 开发说明

### 前端开发
1. 启动开发服务器：`pnpm dev`
2. 访问：`http://localhost:3000`

### 后端开发
1. 启动开发服务器：`npm run dev`
2. API地址：`http://localhost:7001/api`

## 注意事项
- 所有接口都需要进行适当的身份验证
- 文件上传需要限制大小和类型
- 确保敏感信息（如用户密码）进行加密存储
- 实现错误处理和日志记录机制
- 考虑高并发场景下的性能优化