# Implementation Plan: Mobile Adaptation and Import Feature

## Overview

本实现计划将手机适配和导入功能分解为可执行的编码任务。首先实现手机适配（viewport和响应式布局），然后实现后端导入服务，最后实现前端导入界面。

## Tasks

- [x] 1. Configure viewport to disable user zoom
  - [x] 1.1 Update index.html viewport meta tag
    - Add `user-scalable=no, maximum-scale=1.0, minimum-scale=1.0` to viewport
    - _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5_

- [x] 2. Implement mobile responsive layout
  - [x] 2.1 Add mobile detection and responsive styles to Layout.jsx
    - Add window resize listener for mobile detection (< 768px)
    - Replace Sider with Drawer component on mobile
    - Add hamburger menu button in Header for mobile
    - _Requirements: 1.1, 1.3_
  - [x] 2.2 Add responsive CSS styles to index.css
    - Add media queries for mobile breakpoints
    - Style adjustments for touch targets (min 44x44px)
    - _Requirements: 1.4, 1.6_
  - [x] 2.3 Update Dashboard.jsx for mobile layout
    - Use responsive Col spans for statistics cards
    - Stack cards vertically on mobile
    - _Requirements: 1.8_
  - [x] 2.4 Update form components for mobile
    - Adjust form layouts to stack vertically on mobile
    - Update WorkRecordForm.jsx, PersonForm.jsx, ItemForm.jsx
    - _Requirements: 1.2, 1.7_
  - [x] 2.5 Update list/table components for mobile
    - Add horizontal scroll or card-based layout for tables
    - Update WorkRecordList.jsx, PersonList.jsx, ItemList.jsx
    - _Requirements: 1.5_

- [x] 3. Checkpoint - Verify mobile adaptation
  - Ensure mobile layout works correctly, ask the user if questions arise.

- [x] 4. Implement backend import service
  - [x] 4.1 Create ImportService class in backend/app/services/import_service.py
    - Implement `generate_template()` method to create XLSX template
    - Template must include headers: 人员姓名, 物品名称, 工作日期, 数量
    - Include example data rows
    - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5_
  - [ ]* 4.2 Write property test for template column completeness
    - **Property 1: Template Column Completeness**
    - **Validates: Requirements 3.2**
  - [x] 4.3 Implement `parse_and_validate()` method
    - Parse XLSX file content using openpyxl
    - Validate file format is XLSX
    - Validate required columns exist
    - Validate each row's data (person, item, date, quantity)
    - Return list of valid records and list of errors
    - _Requirements: 4.1, 4.2, 4.3, 4.4_
  - [ ]* 4.4 Write property test for validation error format
    - **Property 4: Row Validation Error Format**
    - **Validates: Requirements 4.4, 4.5, 5.1, 5.2, 5.3, 5.4, 5.5**
  - [x] 4.5 Implement `import_records()` method
    - Create WorkRecord entries for each valid record
    - Implement atomic operation (rollback on any failure)
    - Return count of imported records
    - _Requirements: 4.6, 4.7, 4.8_
  - [ ]* 4.6 Write property test for successful import count
    - **Property 5: Successful Import Record Count**
    - **Validates: Requirements 4.6, 4.7**
  - [ ]* 4.7 Write property test for atomic import operation
    - **Property 6: Atomic Import Operation**
    - **Validates: Requirements 4.8**

- [x] 5. Implement backend import routes
  - [x] 5.1 Create import routes in backend/app/routes/import_routes.py
    - GET /api/import/template - download template
    - POST /api/import/upload - upload and import file
    - Add file size validation (5MB limit)
    - _Requirements: 3.6, 4.9, 4.11, 4.12_
  - [x] 5.2 Register import blueprint in backend/app/__init__.py
    - Import and register import_bp
    - _Requirements: 4.1_
  - [ ]* 5.3 Write unit tests for import routes
    - Test template download endpoint
    - Test upload endpoint with valid/invalid files
    - Test file size limit
    - _Requirements: 3.6, 4.11, 4.12_

- [x] 6. Checkpoint - Verify backend import functionality
  - Ensure all backend tests pass, ask the user if questions arise.

- [x] 7. Implement frontend import component
  - [x] 7.1 Add import API methods to frontend/src/services/api.js
    - Add `importApi.downloadTemplate()` method
    - Add `importApi.upload(file)` method
    - _Requirements: 3.6, 4.9_
  - [x] 7.2 Create Import.jsx component
    - Add template download button
    - Add file upload component with .xlsx filter
    - Display upload progress and results
    - Display validation errors in scrollable list
    - _Requirements: 3.7, 4.9, 4.10, 5.6, 5.7_
  - [x] 7.3 Add Import route and navigation
    - Add route in App.jsx
    - Add menu item in Layout.jsx
    - _Requirements: 3.7_

- [x] 8. Final checkpoint - Integration testing
  - Ensure all features work together, ask the user if questions arise.

## Notes

- Tasks marked with `*` are optional property-based tests
- Mobile adaptation tasks (1-2) should be completed before import tasks (4-7)
- Backend import service (4) must be completed before frontend import component (7)
- Property tests use pytest + hypothesis library