60 lines
2.3 KiB
Markdown
60 lines
2.3 KiB
Markdown
|
# 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
|