Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,103 @@
+# Episode Dropdown Simplification
+
+## Changes Made
+
+Simplified the episode dropdown in the shot management interface to use basic episode names instead of complex displays with progress bars, badges, and icons.
+
+## Before
+The dropdown items showed:
+- Status icons (Clock, Play, Pause, CheckCircle, XCircle)
+- Episode name
+- Progress bar with percentage
+- Shot count badge with status-based styling
+- Complex layout with multiple visual elements
+
+The "All Episodes" option showed:
+- Layers icon
+- Overall progress bar
+- Episode count badge
+- Total shot count badge
+
+## After
+The dropdown items now show:
+- Simple episode name only
+- Clean, minimal design
+- Easier to scan and select
+
+The "All Episodes" option now shows:
+- Just the text "All Episodes"
+
+## Benefits
+
+1. **Cleaner UI**: Less visual clutter in the dropdown
+2. **Faster Loading**: No need to calculate progress or render complex components
+3. **Better Performance**: Simpler rendering with fewer DOM elements
+4. **Easier to Read**: Episode names are the primary focus
+5. **Consistent with Standard Dropdowns**: Follows common UI patterns
+
+## Files Modified
+
+- `frontend/src/components/episode/EpisodeDropdown.vue`
+  - Simplified SelectItem templates
+  - Removed unused icon imports (Film, Layers, Clock, Play, Pause, CheckCircle, XCircle)
+  - Removed unused Badge component import
+  - Removed computed properties: `totalShotCount`, `overallProgress`
+  - Simplified `sortedEpisodes` computed property
+  - Removed methods: `getEpisodeStatusVariant()`, `getEpisodeStatusIcon()`
+
+## Functionality Preserved
+
+All core functionality remains intact:
+- ✅ Episode selection
+- ✅ "All Episodes" option
+- ✅ Episode sorting (by episode number or name)
+- ✅ Loading state
+- ✅ Error state
+- ✅ Create episode option (for coordinators/admins)
+- ✅ Refresh button
+- ✅ Episode filtering in shot browser
+
+## Usage
+
+The component works exactly the same way from a parent component perspective:
+
+```vue
+<EpisodeDropdown
+  :project-id="projectId"
+  :selected-episode-id="selectedEpisodeId"
+  @episode-selected="handleEpisodeSelected"
+  @create-episode="handleCreateEpisode"
+/>
+```
+
+## Visual Comparison
+
+### Before:
+```
+┌─────────────────────────────────────────┐
+│ 📚 All Episodes  [▓▓▓░░] 75%  3 eps 12 shots │
+├─────────────────────────────────────────┤
+│ ⏰ Episode 1  [▓▓░░░] 40%  4 shots      │
+│ ▶️ Episode 2  [▓▓▓▓░] 80%  5 shots      │
+│ ✅ Episode 3  [▓▓▓▓▓] 100%  3 shots     │
+└─────────────────────────────────────────┘
+```
+
+### After:
+```
+┌─────────────────────┐
+│ All Episodes        │
+├─────────────────────┤
+│ Episode 1           │
+│ Episode 2           │
+│ Episode 3           │
+└─────────────────────┘
+```
+
+## Future Enhancements
+
+If detailed episode information is needed, consider:
+1. Adding a tooltip on hover showing episode details
+2. Creating a separate episode info panel
+3. Adding episode details to the shot browser header
+4. Creating an episode management page with full details