2026-01-28 10:58:15 +08:00
|
|
|
# FRONTEND VIEWS KNOWLEDGE BASE
|
|
|
|
|
|
|
|
|
|
**Generated:** 2026-01-28
|
|
|
|
|
**Parent:** EmailBill/AGENTS.md
|
|
|
|
|
|
|
|
|
|
## OVERVIEW
|
2026-02-15 10:08:14 +08:00
|
|
|
|
2026-01-28 10:58:15 +08:00
|
|
|
Vue 3 views using Composition API with Vant UI components for mobile-first budget tracking.
|
|
|
|
|
|
|
|
|
|
## STRUCTURE
|
2026-02-15 10:08:14 +08:00
|
|
|
|
2026-01-28 10:58:15 +08:00
|
|
|
```
|
|
|
|
|
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
|
2026-02-15 10:08:14 +08:00
|
|
|
|
|
|
|
|
| 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 |
|
2026-01-28 10:58:15 +08:00
|
|
|
|
|
|
|
|
## CONVENTIONS
|
2026-02-15 10:08:14 +08:00
|
|
|
|
|
|
|
|
- Vue 3 Composition API with `<script setup>` (JavaScript)
|
2026-01-28 10:58:15 +08:00
|
|
|
- Vant UI components: `<van-*>`
|
|
|
|
|
- Mobile-first responsive design
|
|
|
|
|
- SCSS with BEM naming convention
|
|
|
|
|
- Pinia for state management
|
|
|
|
|
- Vue Router for navigation
|
|
|
|
|
|
2026-02-15 10:08:14 +08:00
|
|
|
## REUSABLE COMPONENTS
|
|
|
|
|
|
|
|
|
|
**BillListComponent** (`@/components/Bill/BillListComponent.vue`)
|
|
|
|
|
- **用途**: 统一的账单列表组件，替代旧版 TransactionList
|
|
|
|
|
- **特性**: 支持筛选、排序、分页、左滑删除、多选
|
|
|
|
|
- **数据模式**: API 模式（自动加载）或 Custom 模式（父组件传入数据）
|
|
|
|
|
- **文档**: 参见 `.doc/BillListComponent-usage.md`
|
|
|
|
|
|
2026-01-28 10:58:15 +08:00
|
|
|
## ANTI-PATTERNS (THIS LAYER)
|
2026-02-15 10:08:14 +08:00
|
|
|
|
2026-01-28 10:58:15 +08:00
|
|
|
- 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
|
2026-02-15 10:08:14 +08:00
|
|
|
|
2026-01-28 10:58:15 +08:00
|
|
|
- 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
|
2026-02-15 10:08:14 +08:00
|
|
|
- Gesture interactions for mobile users
|
