139 lines
5.1 KiB
Markdown
139 lines
5.1 KiB
Markdown
# Processing Flow + UI/UX Enhancement Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development to implement this plan task-by-task.
|
|
|
|
**Goal:** Enhance task processing flow (retry, multi-task, logs) and add responsive mobile UI.
|
|
|
|
**Architecture:** Frontend-only changes for most tasks. One backend endpoint for task retry. Processing store refactored from single-task to multi-task model.
|
|
|
|
**Tech Stack:** Vue 3.4+, TypeScript, Element Plus, Pinia
|
|
|
|
---
|
|
|
|
## Phase 2: Processing Flow Enhancement
|
|
|
|
### Task 1: Multi-task monitoring in processing store
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/stores/processing.ts`
|
|
|
|
**Description:** Refactor the store from single `currentTask` to a `Map<taskId, TaskInfo>` supporting multiple concurrent tasks. Keep backward compatibility by exposing `currentTask` as the most recent task.
|
|
|
|
- [ ] Add `activeTasks: ref<Map<string, TaskInfo>>()` state
|
|
- [ ] Refactor `connectWebSocket` to register tasks in `activeTasks`
|
|
- [ ] Expose `activeTasks` computed (array of active tasks sorted by start time)
|
|
- [ ] Keep `currentTask` as computed getter of the latest task
|
|
- [ ] Add `removeTask(taskId)` action to dismiss completed/failed tasks
|
|
- [ ] Add `retryTask(taskId)` action that calls `POST /api/tasks/{id}/retry`
|
|
|
|
### Task 2: Backend task retry endpoint
|
|
|
|
**Files:**
|
|
- Modify: `web/backend/routers/tasks.py`
|
|
- Modify: `web/backend/services/task_manager.py`
|
|
|
|
**Description:** Add `POST /api/tasks/{id}/retry` endpoint that reads the original task's stored parameters and re-creates it.
|
|
|
|
- [ ] Add `metadata: Optional[dict]` field to `Task` dataclass (stores original request params)
|
|
- [ ] Store endpoint + body in task metadata when creating tasks in `processing.py`
|
|
- [ ] Add `retry_task` method to `TaskManager` that creates a new task from stored metadata
|
|
- [ ] Add `POST /api/tasks/{id}/retry` endpoint in `tasks.py`
|
|
|
|
### Task 3: Dashboard multi-task cards
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/Dashboard.vue`
|
|
|
|
**Description:** Replace the single progress card with a card list showing all active tasks. Each card shows: task name, progress bar, status tag, error message (if failed), retry button (if failed), dismiss button (if completed/failed).
|
|
|
|
- [ ] Replace single progress card with `v-for` over `activeTasks`
|
|
- [ ] Each card: name, progress bar, status tag, message
|
|
- [ ] Failed cards: red error panel + "重试" button
|
|
- [ ] Completed cards: green success + "查看结果" + dismiss button
|
|
- [ ] Show "无活跃任务" placeholder when empty
|
|
|
|
### Task 4: Expand Dashboard log panel
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/Dashboard.vue`
|
|
|
|
**Description:** Increase log display from 10 to 50 lines. Add "查看全部日志" link to Tasks page.
|
|
|
|
- [ ] Change `slice(-10)` to `slice(-50)` for log lines
|
|
- [ ] Add "查看全部日志" button linking to `/tasks`
|
|
- [ ] Increase log panel max-height from 200px to 350px
|
|
|
|
### Task 5: Error details in Dashboard
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/Dashboard.vue`
|
|
|
|
**Description:** When a task fails, show the error message prominently in the task card.
|
|
|
|
- [ ] In the task card template, show `task.error` in an `el-alert` with type="error" when status is "failed"
|
|
- [ ] Error message should be selectable/copyable
|
|
|
|
---
|
|
|
|
## Phase 3: UI/UX Optimization
|
|
|
|
### Task 6: Mobile sidebar drawer
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/Layout.vue`
|
|
|
|
**Description:** Convert the fixed sidebar to an `el-drawer` on screens < 768px. Add hamburger menu button in topbar.
|
|
|
|
- [ ] Add `isMobile` ref + resize listener with 768px breakpoint
|
|
- [ ] On mobile: hide `el-aside`, show hamburger button in topbar
|
|
- [ ] Use `el-drawer` for sidebar navigation on mobile
|
|
- [ ] Close drawer on route change
|
|
- [ ] Clean up resize listener on unmount
|
|
|
|
### Task 7: Layout responsive styles
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/Layout.vue`
|
|
|
|
**Description:** Add @media queries for the layout content area.
|
|
|
|
- [ ] `@media (max-width: 768px)`: reduce content padding, adjust topbar
|
|
- [ ] `@media (max-width: 480px)`: further reduce spacing
|
|
- [ ] Ensure content doesn't overflow on small screens
|
|
|
|
### Task 8: Tasks page responsive
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/Tasks.vue`
|
|
|
|
**Description:** Make the Tasks page work on mobile.
|
|
|
|
- [ ] `@media (max-width: 768px)`: stat cards go 2x2 grid
|
|
- [ ] `@media (max-width: 640px)`: stat cards go single column
|
|
- [ ] `@media (max-width: 768px)`: table columns hide non-essential ones
|
|
- [ ] Filters stack vertically on mobile
|
|
|
|
### Task 9: Logs page responsive
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/Logs.vue`
|
|
|
|
**Description:** Make the Logs page work on mobile.
|
|
|
|
- [ ] Same stat card responsive pattern as Tasks
|
|
- [ ] `@media (max-width: 768px)`: table columns hide non-essential ones
|
|
- [ ] Filters stack vertically on mobile
|
|
|
|
### Task 10: File views responsive
|
|
|
|
**Files:**
|
|
- Modify: `web/frontend/src/views/files/Images.vue`
|
|
- Modify: `web/frontend/src/views/files/Tables.vue`
|
|
- Modify: `web/frontend/src/views/files/Orders.vue`
|
|
|
|
**Description:** Make file list pages work on mobile.
|
|
|
|
- [ ] `@media (max-width: 768px)`: header-actions wrap to multiple lines
|
|
- [ ] Table hides non-essential columns on small screens
|
|
- [ ] Action buttons collapse into a dropdown on mobile
|