## Development Guidelines

### Framework and Language
> This project uses Vue 3 with TypeScript, focusing on modern development practices and type safety.

**Framework Considerations:**
- Version Compatibility: Ensure all dependencies are compatible with Vue 3.4+ and TypeScript 5.3+
- Feature Usage: Leverage Vue 3 Composition API and TypeScript features
- Performance Patterns: Follow Vue 3 best practices for optimal performance
- Upgrade Strategy: Keep dependencies up to date while maintaining compatibility
- Importance Notes for Framework:
	* Use Composition API for better code organization and reusability
	* Implement proper TypeScript types for better development experience
	* Follow Vue 3's reactivity system best practices

**Language Best Practices:**
- Type Safety: Use TypeScript's type system to prevent runtime errors
- Modern Features: Utilize TypeScript's latest features while maintaining compatibility
- Consistency: Apply consistent coding patterns throughout the codebase
- Documentation: Document complex TypeScript implementations and workarounds

### Code Abstraction and Reusability
> The project follows a modular architecture with clear separation of concerns. Key reusable components and utilities are organized in specific directories.

**Modular Design Principles:**
- Single Responsibility: Each module is responsible for only one functionality
- High Cohesion, Low Coupling: Related functions are centralized, reducing dependencies between modules
- Stable Interfaces: Expose stable interfaces externally while internal implementations can vary

**Reusable Component Library:**
```
root
- src
    - components        // Reusable Vue components
        - advanced     // Advanced UI components
        - common       // Common UI components
        - custom       // Custom business components
    - hooks            // Reusable Vue composition functions
        - business     // Business-specific hooks
        - common       // Common utility hooks
    - utils            // Utility functions
        - common.ts    // Common utility functions
        - crypto.ts    // Cryptographic utilities
        - format.ts    // Formatting utilities
        - storage.ts   // Storage utilities
```

### Coding Standards and Tools
**Code Formatting Tools:**
- ESLint: JavaScript/TypeScript code checking
- Prettier: Code formatting
- StyleLint: CSS/SCSS code checking

**Naming and Structure Conventions:**
- Semantic Naming: Variable/function names should clearly express their purpose
- Consistent Naming Style:
  * Vue components: PascalCase (e.g., UserProfile.vue)
  * TypeScript files: camelCase (e.g., userService.ts)
  * CSS/SCSS: kebab-case (e.g., user-profile.scss)
- Directory Structure follows functional responsibility division

### Frontend-Backend Collaboration Standards
**API Design and Documentation:**
- RESTful design principles
	* Use HTTP methods (GET, POST, PUT, DELETE) to represent operations
	* Follow RESTful resource naming conventions
- Timely interface documentation updates
	* Document API endpoints, parameters, and responses
	* Keep API documentation in sync with implementation
- Unified error handling specifications
	* Implement consistent error handling across the application
	* Use appropriate HTTP status codes

**Data Flow:**
- Clear frontend state management
	* Use Pinia for state management
	* Implement proper state persistence strategies
- Data validation on both frontend and backend
	* Validate data types and constraints
	* Implement proper error handling
- Standardized asynchronous operation handling
	* Use consistent API call patterns
	* Implement proper loading and error states

### Performance and Security
**Performance Optimization Focus:**
- Resource loading optimization
	* Use code splitting and lazy loading
	* Implement proper caching strategies
- Rendering performance optimization
	* Use virtualization for large lists
	* Implement proper pagination
- Appropriate use of caching
	* Implement caching strategies for API responses
	* Use browser storage effectively

**Security Measures:**
- Input validation and filtering
	* Validate user inputs and sanitize data
	* Implement proper XSS protection
- Protection of sensitive information
	* Use secure authentication and authorization mechanisms
	* Implement proper token management
- Access control mechanisms
	* Implement role-based access control
	* Use proper permission checking