# FRONTEND VIEWS KNOWLEDGE BASE

**Generated:** 2026-01-28
**Parent:** EmailBill/AGENTS.md

## OVERVIEW
Vue 3 views using Composition API with Vant UI components for mobile-first budget tracking.

## STRUCTURE
```
Web/src/views/
├── BudgetView.vue              # Main budget management
├── TransactionsRecord.vue     # Transaction list and CRUD
├── StatisticsView.vue         # Charts and analytics
├── LoginView.vue              # Authentication
├── CalendarView.vue           # Calendar-based viewing
├── Classification*            # Transaction classification views
│   ├── ClassificationSmart.vue # AI-powered classification
│   ├── ClassificationEdit.vue  # Manual classification
│   ├── ClassificationBatch.vue # Batch operations
│   └── ClassificationNLP.vue   # NLP classification
├── BillAnalysisView.vue       # Bill analysis
├── SettingView.vue            # App settings
├── MessageView.vue            # Message management
├── EmailRecord.vue            # Email records
└── PeriodicRecord.vue         # Periodic transactions
```

## WHERE TO LOOK
| Task | Location | Notes |
|------|----------|-------|
| Budget management | BudgetView.vue | Main budget interface |
| Transactions | TransactionsRecord.vue | CRUD operations |
| Statistics | StatisticsView.vue | Charts, analytics |
| Classification | Classification* | Transaction categorization |
| Authentication | LoginView.vue | User login flow |
| Settings | SettingView.vue | App configuration |
| Email features | EmailRecord.vue | Email integration |

## CONVENTIONS
- Vue 3 Composition API with `<script setup lang="ts">`
- Vant UI components: `<van-*>`
- Mobile-first responsive design
- SCSS with BEM naming convention
- Pinia for state management
- Vue Router for navigation

## ANTI-PATTERNS (THIS LAYER)
- Never use Options API (always Composition API)
- Don't access APIs directly (use api/ modules)
- Avoid inline styles (use SCSS modules)
- No synchronous API calls
- Don't mutate props directly

## UNIQUE STYLES
- Chinese interface labels for business concepts
- Mobile-optimized layouts with Vant components
- Integration with backend API via api/ modules
- Real-time data updates via Pinia stores
- Gesture interactions for mobile users