Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,75 @@
+# Task Detail Panel Tabs Refactor
+
+## Overview
+Restructured the TaskDetailPanel component to match the ShotDetailPanel layout with a tabbed interface.
+
+## Changes Made
+
+### 1. Header Simplification
+- **Before**: Header showed "Task Details" title with task name and description in the content area
+- **After**: Header shows task name and status badge, with close button on the right
+- Task description moved to the Infos tab content
+
+### 2. Tab Layout
+- **Before**: Nested tabs for Notes/Attachments/Submissions at the bottom of a scrolling content area
+- **After**: Top-level tabs (Infos | Notes | Attachments | Submissions) similar to ShotDetailPanel
+- Tabs are positioned at the top with rounded-none and border-b styling
+- Each tab shows badge counts for Notes, Attachments, and Submissions
+
+### 3. Infos Tab Content
+The Infos tab now contains all task information in organized sections:
+
+- **Description**: Task description (if available)
+- **Quick Actions**: Start Task, Submit Work, Reassign buttons
+- **Status**: Status dropdown selector
+- **Task Information**: 
+  - Type (with badge)
+  - Deadline (with calendar icon and color coding)
+  - Assigned user (with avatar)
+  - Created/Updated timestamps
+- **Context**: Project, Episode, Shot, Asset information
+
+### 4. Other Tabs
+- **Notes Tab**: Full-page TaskNotes component
+- **Attachments Tab**: Full-page TaskAttachments component
+- **Submissions Tab**: Full-page TaskSubmissions component
+
+## Visual Structure
+
+```
+┌─────────────────────────────────────────┐
+│ [Task Name] [Status Badge]         [X] │ ← Header
+├─────────────────────────────────────────┤
+│ Infos | Notes (2) | Attachments | Sub. │ ← Tabs
+├─────────────────────────────────────────┤
+│                                         │
+│  Tab Content (scrollable)               │
+│                                         │
+│  - Description                          │
+│  - Quick Actions                        │
+│  - Status                               │
+│  - Task Information                     │
+│  - Context                              │
+│                                         │
+└─────────────────────────────────────────┘
+```
+
+## Benefits
+
+1. **Consistency**: Matches ShotDetailPanel design pattern
+2. **Better Organization**: Information is grouped logically in sections
+3. **Improved UX**: Tabs are always visible at the top, making navigation easier
+4. **Cleaner Header**: Simplified header focuses on task identity
+5. **More Space**: Each tab gets full panel space for its content
+
+## Technical Details
+
+- Removed `Separator` component (no longer needed with tab layout)
+- Added `Label` component for form labels
+- Fixed TypeScript errors related to avatar properties
+- Maintained all existing functionality (status updates, assignments, quick actions)
+- Preserved loading and error states
+
+## Files Modified
+
+- `frontend/src/components/task/TaskDetailPanel.vue`