Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,130 @@
+# Login Page Design - shadcn-vue Login01 Style
+
+This document describes the new login and registration page design based on the shadcn-vue Login01 block pattern.
+
+## Design Overview
+
+The new login and registration pages are **standalone pages** that appear without any sidebar or header layout. They feature a modern split-screen layout that provides both functionality and visual appeal:
+
+### Layout Structure
+
+1. **Left Side - Form Area**
+   - Clean, centered form with proper spacing
+   - Consistent with shadcn-vue design patterns
+   - Responsive design that stacks on mobile
+
+2. **Right Side - Branding/Information Area**
+   - VFX Project Management branding
+   - Feature highlights with icons
+   - Hidden on mobile devices (lg:block)
+
+## Key Features
+
+### Login Page (`/login`)
+
+- **Split Layout**: Form on left, branding on right
+- **Google OAuth Ready**: Placeholder button for future Google integration
+- **Forgot Password**: Link placeholder for future implementation
+- **Responsive**: Mobile-first design that adapts to screen size
+- **Accessibility**: Proper labels, focus states, and keyboard navigation
+
+### Register Page (`/register`)
+
+- **Consistent Design**: Matches login page layout
+- **Form Validation**: Password confirmation and form validation
+- **Success Messaging**: Clear feedback for successful registration
+- **Admin Approval Notice**: Informs users about approval process
+
+## Visual Elements
+
+### Branding Section
+
+- **Logo**: VFX-themed icon in primary color
+- **Title**: "VFX Project Management"
+- **Tagline**: Descriptive subtitle
+- **Feature List**: Key benefits with icons
+
+### Feature Icons
+
+- **Project Management**: Checklist icon
+- **Team Collaboration**: Users icon  
+- **Progress Tracking**: Bar chart icon
+- **File Security**: Lock icon
+- **Fast Workflow**: Lightning icon
+- **Professional Tools**: Clipboard icon
+- **Creative Community**: Heart icon
+
+## Technical Implementation
+
+### Layout Logic
+
+The application uses conditional rendering in `App.vue` to determine when to show the main layout:
+
+- **Authentication Pages**: Login and register pages are shown standalone without sidebar/header
+- **Protected Pages**: Dashboard and other pages show the full layout with sidebar and header
+- **Route Detection**: Uses `route.meta.requiresGuest` and route names to identify auth pages
+
+### Components Used
+
+- `Button` - Primary and outline variants
+- `Input` - Email and password fields
+- `Label` - Form field labels
+- `Loader2` - Loading spinner from lucide-vue-next
+
+### Responsive Breakpoints
+
+- **Mobile**: Single column, form only, full screen height
+- **Large (lg)**: Two-column grid layout, full screen height
+- **Full Screen**: Uses `min-h-screen` for complete viewport coverage
+
+### Color Scheme
+
+- Uses CSS custom properties for theming
+- `bg-muted` for right panel background
+- `text-muted-foreground` for secondary text
+- `text-primary` for accent elements
+
+## Future Enhancements
+
+### Planned Features
+
+1. **Google OAuth Integration**
+   - Complete OAuth flow implementation
+   - Social login buttons functionality
+
+2. **Forgot Password**
+   - Password reset email flow
+   - Reset password form
+
+3. **Enhanced Validation**
+   - Real-time form validation
+   - Password strength indicator
+
+4. **Animations**
+   - Smooth transitions
+   - Loading states
+   - Form submission feedback
+
+### Accessibility Improvements
+
+- Screen reader optimization
+- High contrast mode support
+- Keyboard navigation enhancements
+- Focus management
+
+## Usage
+
+The new login pages are automatically used when users navigate to:
+
+- `/login` - Main login page
+- `/register` - User registration page
+
+Both pages integrate seamlessly with the existing authentication system and maintain all current functionality while providing an improved user experience.
+
+## Browser Support
+
+- Modern browsers with CSS Grid support
+- Responsive design for mobile devices
+- Progressive enhancement for older browsers
+
+The design follows modern web standards and provides a professional, trustworthy appearance that reflects the quality of the VFX Project Management System.