tasks.md 4.9 KB

Implementation Plan: Mobile Adaptation and Import Feature

Overview

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

Tasks

  • [x] 1. Configure viewport to disable user zoom

    • 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

    • 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
    • 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
    • 2.3 Update Dashboard.jsx for mobile layout
    • Use responsive Col spans for statistics cards
    • Stack cards vertically on mobile
    • Requirements: 1.8
    • 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
    • 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

    • 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
    • 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
    • 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

    • 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
    • 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

    • 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
    • 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
    • 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