---
description: "Lanxk.com Vue 3 Project Standards"
globs: ["**/*.{vue,ts,scss,js,jsx,tsx}"]
alwaysApply: true
---

# Project Standards

## Technology Stack Standards
- Frontend Framework: Vue 3 (v3.5.13, Composition API)
- UI Framework: Element Plus (v2.7.4)
- State Management: Pinia (v2.1.7)
- Styling: SASS (v1.75.0)
- Build Tool: Vite (v5.2.6)
- TypeScript (v5.7.x)
- Node.js (≥v18.0.0)

## Code Standards

### Component Development Standards
- Use PascalCase for naming Vue component files (e.g., `TemplateBase.vue`)
- Place components with similar functionality in the same directory
- Components must use the `<script setup>` syntax
- Props definitions must specify types and default values
- Direct modification of props is prohibited; use emit to notify the parent component to update

### Styling Standards
- Use kebab-case for naming CSS classes (e.g., `todo-list`)
- Must follow BEM naming conventions:
  - Block: `block`
  - Element: `block__element`
  - Modifier: `block--modifier`
- Component styles must use the `scoped` attribute
- Inline styles are prohibited
- Directly using Element Plus class names as selectors (e.g., `.el-input`) is prohibited

### State Management Standards
- Global state must be managed using Pinia store
- Use computed properties to derive state, avoiding method calls
- Actions in the store must use async/await for handling asynchronous operations
- Prefer using props/emit in components to avoid overusing global state

### TypeScript Standards
- Explicit type declarations are mandatory
- The use of the `any` type is prohibited
- Interfaces and type definitions should use PascalCase
- Prefer using `interface` over `type`

## Project Structure Standards
```
src/
├── api/ # API requests
├── assets/ # Static resources
├── components/ # Components
├── router/ # Routing
├── stores/ # Pinia stores
├── utils/ # Utility functions
└── views/ # Pages
```

## Prohibitions
- The use of jQuery or direct DOM manipulation is prohibited
- Complex expressions in templates are prohibited
- Direct modification of object properties in props is prohibited
- The use of global variables in components is prohibited
- Using specific framework class names as selectors is prohibited

## Special Considerations
1. Retain the original `!important` keyword in CSS
2. Retain original code comments and console.log
3. Do not change full-width quotes (“”) in text and comments to half-width quotes ("")