diff --git a/docs/superpowers/plans/2026-05-13-processing-ux-enhancement.md b/docs/superpowers/plans/2026-05-13-processing-ux-enhancement.md new file mode 100644 index 0000000..e028517 --- /dev/null +++ b/docs/superpowers/plans/2026-05-13-processing-ux-enhancement.md @@ -0,0 +1,138 @@ +# 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` supporting multiple concurrent tasks. Keep backward compatibility by exposing `currentTask` as the most recent task. + +- [ ] Add `activeTasks: ref>()` 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