c8966477b9
Complete implementation of the production line incident response system (生產線異常即時反應系統) including: Backend (FastAPI): - User authentication with AD integration and session management - Chat room management (create, list, update, members, roles) - Real-time messaging via WebSocket (typing indicators, reactions) - File storage with MinIO (upload, download, image preview) Frontend (React + Vite): - Authentication flow with token management - Room list with filtering, search, and pagination - Real-time chat interface with WebSocket - File upload with drag-and-drop and image preview - Member management and room settings - Breadcrumb navigation - 53 unit tests (Vitest) Specifications: - authentication: AD auth, sessions, JWT tokens - chat-room: rooms, members, templates - realtime-messaging: WebSocket, messages, reactions - file-storage: MinIO integration, file management - frontend-core: React SPA structure 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
135 lines
5.4 KiB
Markdown
135 lines
5.4 KiB
Markdown
# Implementation Tasks
|
|
|
|
## 1. Project Setup
|
|
- [x] 1.1 Initialize Vite + React + TypeScript project in `frontend/`
|
|
- [x] 1.2 Install dependencies (react-router, zustand, @tanstack/react-query, axios)
|
|
- [x] 1.3 Configure Tailwind CSS
|
|
- [x] 1.4 Set up ESLint + Prettier
|
|
- [x] 1.5 Create directory structure (components, pages, hooks, stores, services)
|
|
- [x] 1.6 Configure Vite proxy for API calls to localhost:8000
|
|
|
|
## 2. API Client Layer
|
|
- [x] 2.1 Create Axios instance with base URL and interceptors
|
|
- [x] 2.2 Implement auth service (login, logout, token refresh)
|
|
- [x] 2.3 Implement rooms service (CRUD, members, templates)
|
|
- [x] 2.4 Implement messages service (list, create, search)
|
|
- [x] 2.5 Implement files service (upload, list, download, delete)
|
|
- [x] 2.6 Add TypeScript types matching backend schemas
|
|
|
|
## 3. State Management
|
|
- [x] 3.1 Create auth store (user, token, login state)
|
|
- [x] 3.2 Create chat store (messages, typing users, online users)
|
|
- [x] 3.3 Set up React Query provider and default options
|
|
- [x] 3.4 Create custom hooks (useAuth, useRooms, useMessages, useFiles)
|
|
|
|
## 4. Authentication Pages
|
|
- [x] 4.1 Create Login page with form validation
|
|
- [x] 4.2 Implement login flow with error handling
|
|
- [x] 4.3 Create protected route wrapper
|
|
- [x] 4.4 Add logout functionality
|
|
- [x] 4.5 Handle token storage and auto-login
|
|
|
|
## 5. Room List Page
|
|
- [x] 5.1 Create RoomList page layout
|
|
- [x] 5.2 Implement room cards with status indicators
|
|
- [x] 5.3 Add filtering by status
|
|
- [x] 5.4 Add search functionality
|
|
- [x] 5.5 Create "New Room" modal
|
|
- [x] 5.6 Add pagination with Previous/Next controls
|
|
|
|
## 6. Room Detail Page
|
|
- [x] 6.1 Create room header (title, status, severity badge)
|
|
- [x] 6.2 Implement member sidebar
|
|
- [x] 6.3 Create room settings panel (for owners) - status change buttons
|
|
- [x] 6.4 Add status change functionality (resolve, archive)
|
|
- [x] 6.5 Implement member management (add, remove, change role)
|
|
|
|
## 7. Real-time Chat
|
|
- [x] 7.1 Create WebSocket connection hook with auto-reconnect
|
|
- [x] 7.2 Implement message list component
|
|
- [x] 7.3 Create message input with submit handling
|
|
- [x] 7.4 Add typing indicator display
|
|
- [x] 7.5 Implement message edit functionality
|
|
- [x] 7.6 Implement message delete functionality
|
|
- [x] 7.7 Add reaction support with quick emoji picker
|
|
- [x] 7.8 Show online user indicators
|
|
|
|
## 8. File Management
|
|
- [x] 8.1 Create file upload button with drag-and-drop
|
|
- [x] 8.2 Implement upload progress indicator
|
|
- [x] 8.3 Create file list view
|
|
- [x] 8.4 Add image preview modal
|
|
- [x] 8.5 Implement file download functionality
|
|
- [x] 8.6 Add file delete with confirmation
|
|
|
|
## 9. Common Components
|
|
- [x] 9.1-9.7 Using Tailwind utility classes inline (no separate component library)
|
|
|
|
## 10. Routing and Layout
|
|
- [x] 10.1 Set up React Router with routes
|
|
- [x] 10.2 Create main layout with navigation
|
|
- [x] 10.3 Create 404 Not Found page
|
|
- [x] 10.4 Add breadcrumb navigation component
|
|
- [x] 10.5 Implement responsive sidebar
|
|
|
|
## 11. Testing
|
|
- [x] 11.1 Set up Vitest for unit testing
|
|
- [x] 11.2 Write tests for API services (mocked)
|
|
- [x] 11.3 Write tests for Zustand stores
|
|
- [x] 11.4 Write tests for custom hooks (useAuth, useRooms)
|
|
- [x] 11.5 Add component tests for critical paths (Login, Breadcrumb)
|
|
|
|
## 12. Build and Integration
|
|
- [x] 12.1 Configure production build settings
|
|
- [x] 12.2 Set up FastAPI to serve static files
|
|
- [x] 12.3 CORS already configured (allow all in development)
|
|
- [x] 12.4 Build script: `cd frontend && npm run build`
|
|
- [x] 12.5 Test full integration with backend
|
|
|
|
## Summary
|
|
|
|
**Completed:** All sections 1-12 (all features and tests)
|
|
**Note:** Section 9 uses inline Tailwind classes instead of separate component library
|
|
|
|
### Files Created
|
|
|
|
```
|
|
frontend/
|
|
├── src/
|
|
│ ├── types/index.ts # TypeScript types
|
|
│ ├── services/
|
|
│ │ ├── api.ts # Axios instance
|
|
│ │ ├── auth.ts # Auth service
|
|
│ │ ├── rooms.ts # Rooms service
|
|
│ │ ├── messages.ts # Messages service
|
|
│ │ ├── files.ts # Files service
|
|
│ │ └── index.ts
|
|
│ ├── stores/
|
|
│ │ ├── authStore.ts # Zustand auth store
|
|
│ │ └── chatStore.ts # Zustand chat store
|
|
│ ├── hooks/
|
|
│ │ ├── useAuth.ts # Auth hook
|
|
│ │ ├── useRooms.ts # Room queries/mutations
|
|
│ │ ├── useMessages.ts # Message queries/mutations
|
|
│ │ ├── useFiles.ts # File queries/mutations
|
|
│ │ ├── useWebSocket.ts # WebSocket hook
|
|
│ │ └── index.ts
|
|
│ ├── pages/
|
|
│ │ ├── Login.tsx # Login page
|
|
│ │ ├── RoomList.tsx # Room list page
|
|
│ │ ├── RoomDetail.tsx # Room detail with chat
|
|
│ │ ├── NotFound.tsx # 404 page
|
|
│ │ └── index.ts
|
|
│ ├── App.tsx # Root component with routes
|
|
│ ├── main.tsx # Entry point
|
|
│ └── index.css # Tailwind imports
|
|
├── vite.config.ts # Vite configuration
|
|
├── tailwind.config.js # Tailwind configuration
|
|
├── tsconfig.json # TypeScript config
|
|
└── package.json # Dependencies
|
|
```
|
|
|
|
### Backend Integration
|
|
- `app/main.py` updated to serve frontend static files from `frontend/dist/`
|
|
- SPA routing support via catch-all route
|