# cabinet_front

**Repository Path**: mcxia/cabinet_front

## Basic Information

- **Project Name**: cabinet_front
- **Description**: 文件柜中文
- **Primary Language**: Java
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-03
- **Last Updated**: 2025-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 页面组件说明

## 项目结构

```
src/pages/
├── WelcomePage.vue    # 欢迎页面 - 主屏幕，提供存件和取件选项
├── DepositPage.vue    # 存件页面 - 处理文件存件流程
├── PickupPage.vue     # 取件页面 - 处理文件取件流程
└── CompletePage.vue   # 完成页面 - 显示操作完成信息
```

## 页面功能

### WelcomePage.vue
- 显示欢迎界面
- 提供存件和取件两个主要功能入口
- 显示系统状态信息（空闲格子、有效期、服务时间）

### DepositPage.vue
- 存件码输入和验证
- 二维码扫描功能（UI已准备，待接入实际扫描功能）
- 存件成功后的柜门动画
- 30秒倒计时功能
- 完成存件操作

### PickupPage.vue
- 取件码输入和验证
- 二维码扫描功能（UI已准备，待接入实际扫描功能）
- 取件成功后的柜门动画
- 30秒倒计时功能
- 完成取件操作

### CompletePage.vue
- 显示操作完成信息
- 支持动态消息内容（通过路由参数传递）
- 返回主屏幕功能

## 样式特点

- 完全还原了原HTML原型的样式和布局
- 使用CSS变量统一管理颜色主题
- 响应式设计，支持移动端适配
- 流畅的动画效果（按钮悬停、门开关动画等）

## 技术栈

- Vue 3 + TypeScript
- Vue Router 4
- Font Awesome 图标库
- 原生CSS（无UI框架依赖）