Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,156 @@
+# Project Switcher Component
+
+The ProjectSwitcher component provides a dropdown interface in the sidebar header that allows users to switch between different projects and navigate to project-specific views.
+
+## Features
+
+### 1. Project Selection
+- **Dropdown Interface**: Click the project header to see all available projects
+- **Visual Icons**: Each project has a unique icon for easy identification
+- **Status Display**: Shows current project status (In Progress, Pre-Production, etc.)
+- **Keyboard Shortcuts**: Use ⌘1, ⌘2, etc. to quickly switch projects
+
+### 2. Project Views
+- **All Projects**: Overview of all projects (default view)
+- **Specific Projects**: Individual project dashboards
+- **Automatic Navigation**: Switches routes when project is selected
+
+### 3. Role-Based Features
+- **Create Project**: Admins and coordinators can create new projects
+- **Project Access**: Users see projects based on their permissions
+- **Developer Mode**: Developers see a static header instead of project switcher
+
+## Implementation
+
+### Components Structure
+```
+ProjectSwitcher.vue
+├── DropdownMenu (from shadcn-vue)
+├── SidebarMenuButton
+└── Project Icons (from lucide-vue-next)
+```
+
+### State Management
+Uses `useProjectsStore()` for:
+- Managing available projects
+- Tracking active project
+- Handling project switching
+- Persisting project state
+
+### Integration Points
+- **AppSidebar**: Conditionally shows ProjectSwitcher for non-developer users
+- **Router**: Automatically navigates to project-specific routes
+- **Projects Store**: Manages project data and active state
+
+## Usage Examples
+
+### Basic Project Switching
+1. Click the project header in the sidebar
+2. Select a project from the dropdown
+3. Automatically navigates to project view
+
+### Creating New Projects
+1. Click the project header dropdown
+2. Select "Create project" (admins/coordinators only)
+3. Navigates to project creation form
+
+### Keyboard Navigation
+- `⌘1` - Switch to first project
+- `⌘2` - Switch to second project
+- etc.
+
+## Project Data Structure
+
+```typescript
+interface Project {
+  id: number
+  name: string
+  status: string
+  icon: Component
+  description?: string
+  member_count?: number
+}
+```
+
+### Default Projects
+- **Project Alpha**: Feature film (In Progress)
+- **Project Beta**: Animated series (Pre-Production)  
+- **Project Gamma**: Commercial campaign (Post-Production)
+- **All Projects**: Overview view
+
+## Responsive Behavior
+
+### Desktop
+- Dropdown opens to the right of the trigger
+- Full project information displayed
+- Keyboard shortcuts available
+
+### Mobile
+- Dropdown opens below the trigger
+- Optimized for touch interaction
+- Simplified layout for smaller screens
+
+## Customization
+
+### Adding New Projects
+```typescript
+const projectsStore = useProjectsStore()
+projectsStore.addProject({
+  name: 'New Project',
+  status: 'Planning',
+  icon: NewIcon,
+  description: 'Project description'
+})
+```
+
+### Custom Icons
+Import from lucide-vue-next or use custom SVG components:
+```typescript
+import { CustomIcon } from '@/components/icons'
+```
+
+### Status Types
+Common project statuses:
+- `Planning`
+- `Pre-Production`
+- `In Progress`
+- `Post-Production`
+- `Completed`
+- `On Hold`
+
+## Integration with Routes
+
+### Route Mapping
+- `/projects` → All Projects view
+- `/projects/1` → Project Alpha
+- `/projects/2` → Project Beta
+- `/projects/new` → Create new project
+
+### Route Synchronization
+The component automatically:
+- Updates active project based on current route
+- Navigates to appropriate route when project is selected
+- Maintains project state across navigation
+
+## Accessibility
+
+### Features
+- **Keyboard Navigation**: Full keyboard support
+- **Screen Readers**: Proper ARIA labels and descriptions
+- **Focus Management**: Logical tab order
+- **High Contrast**: Works with system themes
+
+### ARIA Labels
+- Project buttons have descriptive labels
+- Dropdown has proper role attributes
+- Status information is announced
+
+## Performance
+
+### Optimizations
+- **Computed Properties**: Reactive project filtering
+- **Lazy Loading**: Projects loaded on demand
+- **Minimal Re-renders**: Efficient Vue reactivity
+- **Store Caching**: Project data cached in store
+
+The ProjectSwitcher provides an intuitive way for users to navigate between projects while maintaining context and state throughout the application.