Files

SunCheng e51a3edd50 refactor: 统一账单列表组件，封装 BillListComponent

- 创建 BillListComponent 组件（基于 v2 风格，紧凑布局）
  - 支持筛选（类型、分类、日期范围）和排序（金额、时间）
  - 支持分页加载、左滑删除、点击详情、多选模式
  - 支持 API 自动加载和 Custom 自定义数据两种模式
- 迁移 6 个页面/组件到新组件：
  - TransactionsRecord.vue
  - EmailRecord.vue
  - ClassificationNLP.vue
  - UnconfirmedClassification.vue
  - BudgetCard.vue
  - ReasonGroupList.vue
- 删除旧版 TransactionList 组件
- 保留 CalendarV2 的特殊版本（有专用功能）
- 添加完整的使用文档和 JSDoc 注释

2026-02-15 10:08:14 +08:00

2.9 KiB

Raw Blame History

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> (JavaScript)
Vant UI components: <van-*>
Mobile-first responsive design
SCSS with BEM naming convention
Pinia for state management
Vue Router for navigation

REUSABLE COMPONENTS

BillListComponent (@/components/Bill/BillListComponent.vue)

用途: 统一的账单列表组件，替代旧版 TransactionList
特性: 支持筛选、排序、分页、左滑删除、多选
数据模式: API 模式（自动加载）或 Custom 模式（父组件传入数据）
文档: 参见 .doc/BillListComponent-usage.md

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

2.9 KiB Raw Blame History