b71eadd4f9
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 26s
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 2s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s
2.3 KiB
2.3 KiB
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