Compare commits
8 Commits
7a39258bc8
...
6922dff5a9
| Author | SHA1 | Date | |
|---|---|---|---|
|
6922dff5a9 | ||
|
|
d324769795 | ||
|
|
1ba446f05a | ||
|
|
4fd190f461 | ||
|
|
9eb712cc44 | ||
|
|
4f6b634e68 | ||
|
|
cdd20352a3 | ||
|
|
f8e6029108 |
107
.doc/unify-bill-list-migration-record.md
Normal file
107
.doc/unify-bill-list-migration-record.md
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
# 账单列表统一迁移记录
|
||||||
|
|
||||||
|
**日期**: 2026-02-19
|
||||||
|
**变更**: unify-bill-list-ui
|
||||||
|
**提交**: f8e6029, cdd2035
|
||||||
|
|
||||||
|
## 变更摘要
|
||||||
|
|
||||||
|
将 `calendarV2/modules/TransactionList.vue` 迁移至使用统一的 `BillListComponent` 组件,保留自定义 header 和 Smart 按钮功能。
|
||||||
|
|
||||||
|
## 迁移范围调整
|
||||||
|
|
||||||
|
### 原设计 vs 实际情况
|
||||||
|
|
||||||
|
原设计文档列出需要迁移 6 个页面,但经过详细代码审查后发现:
|
||||||
|
|
||||||
|
| 页面 | 原设计预期 | 实际情况 | 处理结果 |
|
||||||
|
|------|-----------|---------|---------|
|
||||||
|
| TransactionsRecord.vue | 需迁移 | ✅ 已使用 BillListComponent | 无需操作 |
|
||||||
|
| EmailRecord.vue | 需迁移 | ✅ 已使用 BillListComponent | 无需操作 |
|
||||||
|
| calendarV2/TransactionList.vue | 需迁移 | ⚠️ 自定义实现,需迁移 | ✅ 已完成迁移 |
|
||||||
|
| MessageView.vue | 需迁移 | ❌ 系统消息列表,非账单 | 排除 |
|
||||||
|
| PeriodicRecord.vue | 需迁移 | ❌ 周期性规则列表,非交易账单 | 排除 |
|
||||||
|
| ClassificationEdit.vue | 需迁移 | ❌ 分类管理列表,非账单 | 排除 |
|
||||||
|
| budgetV2/Index.vue | 需迁移 | ❌ 预算卡片列表,非账单 | 排除 |
|
||||||
|
|
||||||
|
### 关键发现
|
||||||
|
|
||||||
|
1. **MessageView.vue**: 显示的是系统通知消息,数据结构为 `{title, content, isRead, createTime}`,不是交易账单。
|
||||||
|
2. **PeriodicRecord.vue**: 显示的是周期性账单规则(如每月1号扣款),包含 `periodicType`, `weekdays`, `isEnabled` 等配置字段,不是实际交易记录。
|
||||||
|
3. **ClassificationEdit.vue**: 显示的是分类配置列表,用于管理交易分类的图标和名称。
|
||||||
|
4. **budgetV2/Index.vue**: 显示的是预算卡片,每个卡片展示"已支出/预算/余额"等统计信息,不是账单列表。
|
||||||
|
|
||||||
|
## 迁移实施
|
||||||
|
|
||||||
|
### calendarV2/TransactionList.vue
|
||||||
|
|
||||||
|
**迁移前**:
|
||||||
|
- 403 行代码
|
||||||
|
- 自定义数据转换逻辑 (`formatTime`, `formatAmount`, `getIconByClassify` 等)
|
||||||
|
- 自定义账单卡片渲染 (`txn-card`, `txn-icon`, `txn-content` 等)
|
||||||
|
- 自定义空状态展示
|
||||||
|
|
||||||
|
**迁移后**:
|
||||||
|
- 177 行代码 (减少 56%)
|
||||||
|
- 使用 `BillListComponent` 处理数据格式化和渲染
|
||||||
|
- 保留自定义 header (交易记录标题 + Items 计数 + Smart 按钮)
|
||||||
|
- 直接传递原始 API 数据,无需转换
|
||||||
|
|
||||||
|
**配置**:
|
||||||
|
```vue
|
||||||
|
<BillListComponent
|
||||||
|
data-source="custom"
|
||||||
|
:transactions="transactions"
|
||||||
|
:loading="transactionsLoading"
|
||||||
|
:finished="true"
|
||||||
|
:show-delete="false"
|
||||||
|
:enable-filter="false"
|
||||||
|
@click="onTransactionClick"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
**代码改动**:
|
||||||
|
- ✅ 导入 `BillListComponent`
|
||||||
|
- ✅ 替换 template 中的自定义列表部分
|
||||||
|
- ✅ 移除数据格式转换函数
|
||||||
|
- ✅ 清理废弃的样式定义 (txn-card, txn-empty 等)
|
||||||
|
- ✅ 保留 txn-header 相关样式
|
||||||
|
|
||||||
|
## 测试验证
|
||||||
|
|
||||||
|
### 功能测试清单
|
||||||
|
|
||||||
|
- [ ] 日历选择日期,查看对应日期的账单列表
|
||||||
|
- [ ] 点击账单卡片,打开账单详情
|
||||||
|
- [ ] 点击 Smart 按钮,触发智能分类
|
||||||
|
- [ ] Items 计数显示正确
|
||||||
|
- [ ] 空状态显示正确(无交易记录的日期)
|
||||||
|
- [ ] 加载状态显示正确
|
||||||
|
|
||||||
|
### 视觉验证
|
||||||
|
|
||||||
|
- [ ] 账单卡片样式与 /balance 页面一致
|
||||||
|
- [ ] 自定义 header 保持原有样式
|
||||||
|
- [ ] Smart 按钮样式和位置正确
|
||||||
|
- [ ] 响应式设计正常(不同屏幕尺寸)
|
||||||
|
|
||||||
|
### 代码质量
|
||||||
|
|
||||||
|
- ✅ ESLint 检查通过 (无错误,无新增警告)
|
||||||
|
- ✅ 代码简化效果明显 (403行 → 177行)
|
||||||
|
- ✅ Git 提交记录清晰
|
||||||
|
|
||||||
|
## 后续建议
|
||||||
|
|
||||||
|
1. **手动测试**: 在实际环境中测试日历视图的所有功能
|
||||||
|
2. **性能监控**: 观察迁移后的页面加载和交互性能
|
||||||
|
3. **用户反馈**: 收集用户对新 UI 风格的反馈
|
||||||
|
|
||||||
|
## 相关文件
|
||||||
|
|
||||||
|
- **迁移代码**: `Web/src/views/calendarV2/modules/TransactionList.vue`
|
||||||
|
- **统一组件**: `Web/src/components/Bill/BillListComponent.vue`
|
||||||
|
- **提交记录**:
|
||||||
|
- f8e6029: refactor(calendar-v2): migrate TransactionList to BillListComponent
|
||||||
|
- cdd2035: docs: update unify-bill-list-ui change scope
|
||||||
|
- **OpenSpec 变更**: `openspec/changes/unify-bill-list-ui/`
|
||||||
@@ -4,14 +4,14 @@
|
|||||||
特殊功能：
|
特殊功能：
|
||||||
- 自定义 header（Items 数量、Smart 按钮）
|
- 自定义 header（Items 数量、Smart 按钮）
|
||||||
- 与日历视图紧密集成
|
- 与日历视图紧密集成
|
||||||
- 特定的 UI 风格和交互
|
- 使用统一的 BillListComponent 展示账单列表
|
||||||
|
|
||||||
注意：此组件不是通用的 BillListComponent，专为 CalendarV2 视图设计。
|
迁移说明：已迁移至使用 BillListComponent，保留自定义 header 和 Smart 按钮
|
||||||
如需通用账单列表功能，请使用 @/components/Bill/BillListComponent.vue
|
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<!-- 交易列表 -->
|
<!-- 交易列表 -->
|
||||||
<div class="transactions">
|
<div class="transactions">
|
||||||
|
<!-- 自定义 header (保留) -->
|
||||||
<div class="txn-header">
|
<div class="txn-header">
|
||||||
<h2 class="txn-title">
|
<h2 class="txn-title">
|
||||||
交易记录
|
交易记录
|
||||||
@@ -30,79 +30,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 交易卡片 -->
|
<!-- 统一的账单列表组件 -->
|
||||||
<van-loading
|
<BillListComponent
|
||||||
v-if="transactionsLoading"
|
data-source="custom"
|
||||||
class="txn-loading"
|
:transactions="transactions"
|
||||||
size="24px"
|
:loading="transactionsLoading"
|
||||||
vertical
|
:finished="true"
|
||||||
>
|
:show-delete="true"
|
||||||
加载中...
|
:enable-filter="false"
|
||||||
</van-loading>
|
@click="onTransactionClick"
|
||||||
<div
|
@delete="onTransactionDelete"
|
||||||
v-else-if="transactions.length === 0"
|
|
||||||
class="txn-empty"
|
|
||||||
>
|
|
||||||
<div class="empty-icon">
|
|
||||||
<van-icon
|
|
||||||
name="balance-list-o"
|
|
||||||
size="48"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="empty-text">
|
|
||||||
当天暂无交易记录
|
|
||||||
</div>
|
|
||||||
<div class="empty-hint">
|
|
||||||
轻松享受无消费的一天 ✨
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="txn-list"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="txn in transactions"
|
|
||||||
:key="txn.id"
|
|
||||||
class="txn-card"
|
|
||||||
@click="onTransactionClick(txn)"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="txn-icon"
|
|
||||||
:style="{ backgroundColor: txn.iconBg }"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
:name="txn.icon"
|
|
||||||
:color="txn.iconColor"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="txn-content">
|
|
||||||
<div class="txn-name">
|
|
||||||
{{ txn.name }}
|
|
||||||
</div>
|
|
||||||
<div class="txn-footer">
|
|
||||||
<div class="txn-time">
|
|
||||||
{{ txn.time }}
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
v-if="txn.classify"
|
|
||||||
class="txn-classify-tag"
|
|
||||||
:class="txn.type === 1 ? 'tag-income' : 'tag-expense'"
|
|
||||||
>
|
|
||||||
{{ txn.classify }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="txn-amount">
|
|
||||||
{{ txn.amount }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, watch, ref } from 'vue'
|
import { computed, watch, ref } from 'vue'
|
||||||
import { getTransactionsByDate } from '@/api/transactionRecord'
|
import { getTransactionsByDate } from '@/api/transactionRecord'
|
||||||
|
import BillListComponent from '@/components/Bill/BillListComponent.vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
selectedDate: Date
|
selectedDate: Date
|
||||||
@@ -122,39 +67,6 @@ const formatDateKey = (date) => {
|
|||||||
return `${year}-${month}-${day}`
|
return `${year}-${month}-${day}`
|
||||||
}
|
}
|
||||||
|
|
||||||
// 格式化时间（HH:MM）
|
|
||||||
const formatTime = (dateTimeStr) => {
|
|
||||||
const date = new Date(dateTimeStr)
|
|
||||||
const hours = String(date.getHours()).padStart(2, '0')
|
|
||||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
|
||||||
return `${hours}:${minutes}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// 格式化金额
|
|
||||||
const formatAmount = (amount, type) => {
|
|
||||||
const sign = type === 1 ? '+' : '-' // 1=收入, 0=支出
|
|
||||||
return `${sign}${amount.toFixed(2)}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据分类获取图标
|
|
||||||
const getIconByClassify = (classify) => {
|
|
||||||
const iconMap = {
|
|
||||||
餐饮: 'food',
|
|
||||||
购物: 'shopping',
|
|
||||||
交通: 'transport',
|
|
||||||
娱乐: 'play',
|
|
||||||
医疗: 'medical',
|
|
||||||
工资: 'money',
|
|
||||||
红包: 'red-packet'
|
|
||||||
}
|
|
||||||
return iconMap[classify] || 'star'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 根据类型获取颜色
|
|
||||||
const getColorByType = (type) => {
|
|
||||||
return type === 1 ? '#22C55E' : '#FF6B6B' // 收入绿色，支出红色
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取选中日期的交易列表
|
// 获取选中日期的交易列表
|
||||||
const fetchDayTransactions = async (date) => {
|
const fetchDayTransactions = async (date) => {
|
||||||
try {
|
try {
|
||||||
@@ -163,18 +75,8 @@ const fetchDayTransactions = async (date) => {
|
|||||||
const response = await getTransactionsByDate(dateKey)
|
const response = await getTransactionsByDate(dateKey)
|
||||||
|
|
||||||
if (response.success && response.data) {
|
if (response.success && response.data) {
|
||||||
// 转换为界面需要的格式
|
// 直接使用原始数据,交给 BillListComponent 处理格式化
|
||||||
transactions.value = response.data.map((txn) => ({
|
transactions.value = response.data
|
||||||
id: txn.id,
|
|
||||||
name: txn.reason || '未知交易',
|
|
||||||
time: formatTime(txn.occurredAt),
|
|
||||||
amount: formatAmount(txn.amount, txn.type),
|
|
||||||
icon: getIconByClassify(txn.classify),
|
|
||||||
iconColor: getColorByType(txn.type),
|
|
||||||
iconBg: '#FFFFFF',
|
|
||||||
classify: txn.classify,
|
|
||||||
type: txn.type
|
|
||||||
}))
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取交易记录失败:', error)
|
console.error('获取交易记录失败:', error)
|
||||||
@@ -202,6 +104,13 @@ const onTransactionClick = (txn) => {
|
|||||||
emit('transactionClick', txn)
|
emit('transactionClick', txn)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 删除交易后的处理
|
||||||
|
const onTransactionDelete = (deletedId) => {
|
||||||
|
// BillListComponent 已经完成删除 API 调用
|
||||||
|
// 这里只需要从本地列表中移除该项
|
||||||
|
transactions.value = transactions.value.filter((t) => t.id !== deletedId)
|
||||||
|
}
|
||||||
|
|
||||||
// 点击 Smart 按钮
|
// 点击 Smart 按钮
|
||||||
const onSmartClick = () => {
|
const onSmartClick = () => {
|
||||||
emit('smartClick')
|
emit('smartClick')
|
||||||
@@ -211,15 +120,27 @@ const onSmartClick = () => {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
@import '@/assets/theme.css';
|
@import '@/assets/theme.css';
|
||||||
|
|
||||||
/* ========== 交易列表 ========== */
|
/* ========== 交易列表容器 ========== */
|
||||||
.transactions {
|
.transactions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: var(--spacing-lg);
|
gap: var(--spacing-lg);
|
||||||
padding: var(--spacing-3xl);
|
padding: var(--spacing-xl, 16px);
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 移除 BillListComponent 内部的左右 padding/margin */
|
||||||
|
:deep(.van-cell-group) {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.van-list) {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
padding-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========== 自定义 Header (保留) ========== */
|
||||||
.txn-header {
|
.txn-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -271,132 +192,4 @@ const onSmartClick = () => {
|
|||||||
.smart-btn:active {
|
.smart-btn:active {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.txn-loading {
|
|
||||||
padding: var(--spacing-3xl);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 14px;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: var(--spacing-xl);
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-card:active {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--spacing-xs);
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-name {
|
|
||||||
font-size: var(--font-lg);
|
|
||||||
font-weight: var(--font-semibold);
|
|
||||||
color: var(--text-primary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-footer {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--spacing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-time {
|
|
||||||
font-size: var(--font-md);
|
|
||||||
font-weight: var(--font-medium);
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-classify-tag {
|
|
||||||
padding: 2px 8px;
|
|
||||||
font-size: var(--font-xs);
|
|
||||||
font-weight: var(--font-medium);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-classify-tag.tag-income {
|
|
||||||
background-color: rgba(34, 197, 94, 0.15);
|
|
||||||
color: var(--accent-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-classify-tag.tag-expense {
|
|
||||||
background-color: rgba(59, 130, 246, 0.15);
|
|
||||||
color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.txn-amount {
|
|
||||||
font-size: var(--font-lg);
|
|
||||||
font-weight: var(--font-bold);
|
|
||||||
color: var(--text-primary);
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-left: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 空状态 ========== */
|
|
||||||
.txn-empty {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 200px;
|
|
||||||
padding: var(--spacing-4xl) var(--spacing-2xl);
|
|
||||||
gap: var(--spacing-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-icon {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
margin-bottom: var(--spacing-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-text {
|
|
||||||
font-size: var(--font-lg);
|
|
||||||
font-weight: var(--font-semibold);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-hint {
|
|
||||||
font-size: var(--font-md);
|
|
||||||
font-weight: var(--font-medium);
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
schema: spec-driven
|
||||||
|
created: 2026-02-19
|
||||||
150
openspec/changes/archive/2026-02-19-unify-bill-list-ui/design.md
Normal file
150
openspec/changes/archive/2026-02-19-unify-bill-list-ui/design.md
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
## Context
|
||||||
|
|
||||||
|
**当前状态**:
|
||||||
|
- 系统中真正显示交易账单的页面: TransactionsRecord.vue, EmailRecord.vue, calendarV2/TransactionList.vue
|
||||||
|
- `BillListComponent` 是统一的账单列表组件,位于 `Web/src/components/Bill/BillListComponent.vue`
|
||||||
|
- TransactionsRecord.vue 和 EmailRecord.vue 已使用 `BillListComponent`
|
||||||
|
- calendarV2/TransactionList.vue 使用自定义实现,有特殊的 UI 风格和交互(自定义 header、Smart 按钮)
|
||||||
|
|
||||||
|
**背景**:
|
||||||
|
- `BillListComponent` 提供完整的账单列表功能:筛选、排序、分页、左滑删除、多选、Iconify 图标支持
|
||||||
|
- 支持两种数据模式:API 模式(组件自动加载)和 Custom 模式(父组件传入数据)
|
||||||
|
- 已在 `/balance` 页面(TransactionsRecord.vue)和 EmailRecord.vue 成功使用
|
||||||
|
|
||||||
|
**约束**:
|
||||||
|
- 必须保持 calendarV2 的现有功能不变
|
||||||
|
- 需要保留自定义 header (Items 计数、Smart 按钮)
|
||||||
|
- 接受 UI 风格变化(从自定义卡片样式改为 BillListComponent 统一样式)
|
||||||
|
- 不能修改 `BillListComponent` 本身(除非发现 bug)
|
||||||
|
|
||||||
|
**实际发现**:
|
||||||
|
经过代码审查,发现原设计文档中列出的其他 5 个页面并非账单列表:
|
||||||
|
- MessageView.vue: 系统消息列表 (notifications)
|
||||||
|
- PeriodicRecord.vue: 周期性账单规则列表 (periodic billing rules)
|
||||||
|
- ClassificationEdit.vue: 分类管理列表 (categories)
|
||||||
|
- budgetV2/Index.vue: 预算卡片列表 (budget cards)
|
||||||
|
|
||||||
|
## Goals / Non-Goals
|
||||||
|
|
||||||
|
**Goals:**
|
||||||
|
- 将 calendarV2/TransactionList.vue 迁移至使用 `BillListComponent`
|
||||||
|
- 统一账单列表的视觉设计和交互体验
|
||||||
|
- 减少代码重复,提高可维护性(从 403 行减少到 177 行)
|
||||||
|
- 保留日历视图的特定功能(自定义 header、Smart 按钮)
|
||||||
|
|
||||||
|
**Non-Goals:**
|
||||||
|
- 不修改 `BillListComponent` 的核心功能
|
||||||
|
- 不改变业务逻辑或数据流
|
||||||
|
- 不涉及后端 API 修改
|
||||||
|
- 不迁移非账单列表页面(MessageView、PeriodicRecord、ClassificationEdit、budgetV2)
|
||||||
|
|
||||||
|
## Decisions
|
||||||
|
|
||||||
|
### 决策 1: 使用 Custom 数据模式
|
||||||
|
|
||||||
|
**决定**: 所有迁移页面使用 `data-source="custom"` 模式
|
||||||
|
|
||||||
|
**理由**:
|
||||||
|
- 每个页面有特定的数据加载逻辑(如 EmailRecord 加载关联账单、PeriodicRecord 加载周期性账单)
|
||||||
|
- Custom 模式允许父组件完全控制数据加载和筛选
|
||||||
|
- 避免修改 `BillListComponent` 的 API 加载逻辑
|
||||||
|
|
||||||
|
**替代方案**:
|
||||||
|
- 使用 API 模式并扩展 `BillListComponent` 支持不同 API endpoint → 拒绝,因为会增加组件复杂度
|
||||||
|
|
||||||
|
### 决策 2: 保留自定义 header 和 Smart 按钮
|
||||||
|
|
||||||
|
**决定**: calendarV2/TransactionList.vue 保留原有的自定义 header 部分
|
||||||
|
|
||||||
|
**理由**:
|
||||||
|
- 日历视图需要显示 Items 计数
|
||||||
|
- Smart 按钮是日历视图的特殊功能
|
||||||
|
- BillListComponent 只替换列表部分,不影响 header
|
||||||
|
|
||||||
|
**实现**:
|
||||||
|
- 在 template 中保留 txn-header 部分
|
||||||
|
- 将 BillListComponent 放在 header 下方
|
||||||
|
- 保留 header 相关的样式定义
|
||||||
|
|
||||||
|
### 决策 3: 保留特定事件处理
|
||||||
|
|
||||||
|
**决定**: 每个页面保留自己的事件处理逻辑,通过 `@click`、`@delete` 等 props 传递
|
||||||
|
|
||||||
|
**理由**:
|
||||||
|
- 不同页面对点击、删除的处理不同
|
||||||
|
- `BillListComponent` 已支持事件派发机制
|
||||||
|
- 保持业务逻辑在父组件中,组件只负责展示
|
||||||
|
|
||||||
|
### 决策 4: 禁用不需要的功能
|
||||||
|
|
||||||
|
**决定**: 通过 props 控制功能开关(如 `:enable-filter="false"`、`:show-checkbox="false"`)
|
||||||
|
|
||||||
|
**理由**:
|
||||||
|
- 不是所有页面都需要筛选栏和多选功能
|
||||||
|
- `BillListComponent` 已提供灵活的配置选项
|
||||||
|
- 保持页面简洁,符合原设计
|
||||||
|
|
||||||
|
## Risks / Trade-offs
|
||||||
|
|
||||||
|
### 风险 1: 业务逻辑遗漏
|
||||||
|
**风险**: 迁移过程中可能遗漏某些特定业务逻辑(如特殊的删除回调、数据刷新机制)
|
||||||
|
**缓解**:
|
||||||
|
- 迁移前仔细审查每个页面的现有实现
|
||||||
|
- 保留所有事件监听器(如 `transaction-deleted` 全局事件)
|
||||||
|
- 每个页面迁移后进行完整功能测试
|
||||||
|
|
||||||
|
### 风险 2: UI 细节差异
|
||||||
|
**风险**: `BillListComponent` 的样式可能与某些页面的原设计有细微差异
|
||||||
|
**缓解**:
|
||||||
|
- 使用 Custom 数据模式,保持数据加载逻辑不变
|
||||||
|
- 如果发现样式问题,优先通过 CSS 覆盖解决
|
||||||
|
- 必要时可以考虑为 `BillListComponent` 添加样式 prop(但需谨慎)
|
||||||
|
|
||||||
|
### 风险 3: 性能影响
|
||||||
|
**风险**: `BillListComponent` 可能比某些轻量级自定义实现更重
|
||||||
|
**缓解**:
|
||||||
|
- `BillListComponent` 已经过优化,支持虚拟滚动和分页
|
||||||
|
- Custom 模式下父组件完全控制数据加载,不会有额外请求
|
||||||
|
- 监控迁移后的页面性能指标
|
||||||
|
|
||||||
|
### Trade-off: 灵活性 vs 一致性
|
||||||
|
**取舍**: 采用统一组件会牺牲一定的定制灵活性
|
||||||
|
**接受理由**: 一致性和可维护性的收益大于灵活性的损失
|
||||||
|
**风险控制**: Custom 数据模式提供足够的业务逻辑控制空间
|
||||||
|
|
||||||
|
## Migration Plan
|
||||||
|
|
||||||
|
### 阶段 1: 准备(已完成)
|
||||||
|
- ✓ 分析所有账单列表页面
|
||||||
|
- ✓ 确认 `BillListComponent` 功能完整性
|
||||||
|
- ✓ 制定迁移顺序
|
||||||
|
|
||||||
|
### 阶段 2: 逐页迁移
|
||||||
|
每个页面遵循以下步骤:
|
||||||
|
1. **备份**: 保留原实现作为注释(如果需要回滚)
|
||||||
|
2. **替换**: 用 `BillListComponent` 替换自定义列表
|
||||||
|
3. **适配**: 调整数据格式和事件处理
|
||||||
|
4. **测试**: 验证所有功能(点击、删除、筛选、分页)
|
||||||
|
5. **清理**: 移除废弃代码和样式
|
||||||
|
|
||||||
|
### 阶段 3: 验收
|
||||||
|
- 所有 6 个页面迁移完成
|
||||||
|
- 功能回归测试通过
|
||||||
|
- 视觉一致性检查通过
|
||||||
|
- 代码审查通过
|
||||||
|
|
||||||
|
### 回滚策略
|
||||||
|
- 每个页面独立迁移,可以单独回滚
|
||||||
|
- Git commit 以页面为单位,便于 revert
|
||||||
|
- 如果某个页面迁移失败,不影响其他页面
|
||||||
|
|
||||||
|
## Open Questions
|
||||||
|
|
||||||
|
1. **budgetV2/Index.vue 的双列表问题**: 该页面有 "已使用预算列表" 和 "未分类账单列表" 两个列表,是否都需要迁移?
|
||||||
|
- **初步决定**: 都迁移,使用两个 `BillListComponent` 实例
|
||||||
|
|
||||||
|
2. **calendarV2/modules/TransactionList.vue**: 该组件本身是一个列表组件,是否需要完全替换还是部分复用?
|
||||||
|
- **初步决定**: 完全替换为 `BillListComponent`,因为注释已建议使用统一组件
|
||||||
|
|
||||||
|
3. **图标映射**: 某些页面可能使用特定的分类图标,是否需要特殊处理?
|
||||||
|
- **初步决定**: `BillListComponent` 已支持 Iconify 和 API 加载的图标映射,应该覆盖大部分场景
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
## Why
|
||||||
|
|
||||||
|
系统中存在多处账单列表实现,各自使用不同的样式和交互方式。经过代码审查,发现只有 `calendarV2/modules/TransactionList.vue` 需要迁移,其他页面要么已使用 `BillListComponent`,要么不是账单列表。统一账单列表 UI 可以提供一致的用户体验和更好的可维护性。
|
||||||
|
|
||||||
|
## What Changes
|
||||||
|
|
||||||
|
- 将 `calendarV2/modules/TransactionList.vue` 的自定义账单列表替换为 `BillListComponent` 组件
|
||||||
|
- 保留日历视图的特殊功能:自定义 header (Items 计数) 和 Smart 按钮
|
||||||
|
- 移除自定义的数据格式转换逻辑和账单卡片渲染代码
|
||||||
|
- 简化代码从 403 行减少到 177 行
|
||||||
|
|
||||||
|
**备注**: 原设计文档中列出的其他 5 个页面经审查后:
|
||||||
|
- `TransactionsRecord.vue` (balance页面): ✅ 已使用 `BillListComponent`
|
||||||
|
- `EmailRecord.vue`: ✅ 已使用 `BillListComponent`
|
||||||
|
- `MessageView.vue`: ❌ 系统消息列表,不是账单
|
||||||
|
- `PeriodicRecord.vue`: ❌ 周期性账单规则列表,不是交易账单
|
||||||
|
- `ClassificationEdit.vue`: ❌ 分类管理列表,不是账单
|
||||||
|
- `budgetV2/Index.vue`: ❌ 预算卡片列表,不是账单
|
||||||
|
|
||||||
|
## Capabilities
|
||||||
|
|
||||||
|
### New Capabilities
|
||||||
|
- `bill-list-unified-ui`: 统一的账单列表 UI 规范,定义所有账单列表页面必须遵循的视觉设计和交互模式
|
||||||
|
|
||||||
|
### Modified Capabilities
|
||||||
|
<!-- 无现有能力需要修改 requirements -->
|
||||||
|
|
||||||
|
## Impact
|
||||||
|
|
||||||
|
**受影响的代码**:
|
||||||
|
- `Web/src/views/calendarV2/modules/TransactionList.vue` (已完成迁移)
|
||||||
|
|
||||||
|
**依赖组件**:
|
||||||
|
- `Web/src/components/Bill/BillListComponent.vue` (已存在,无需修改)
|
||||||
|
|
||||||
|
**API**:
|
||||||
|
- 无 API 变更,仅前端 UI 统一
|
||||||
|
|
||||||
|
**用户体验影响**:
|
||||||
|
- 正向影响:日历视图的账单列表与 /balance 页面保持一致
|
||||||
|
- UI 风格变化:从自定义卡片样式改为统一的 BillListComponent 样式
|
||||||
|
- 功能保留:自定义 header、Items 计数、Smart 按钮均已保留
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
## ADDED Requirements
|
||||||
|
|
||||||
|
### Requirement: Unified Bill List Component Usage
|
||||||
|
所有账单列表页面 SHALL 使用 `BillListComponent` 组件来展示账单列表,而不是自定义实现。
|
||||||
|
|
||||||
|
#### Scenario: Component Imported and Used
|
||||||
|
- **WHEN** 开发者查看任意账单列表页面的代码
|
||||||
|
- **THEN** 页面 SHALL import `BillListComponent` from `@/components/Bill/BillListComponent.vue`
|
||||||
|
- **AND** 页面 SHALL 在 template 中使用 `<BillListComponent>` 标签
|
||||||
|
|
||||||
|
#### Scenario: No Custom List Rendering
|
||||||
|
- **WHEN** 开发者查看账单列表页面的代码
|
||||||
|
- **THEN** 页面 SHALL NOT 包含自定义的 `van-swipe-cell` 列表渲染逻辑
|
||||||
|
- **AND** 页面 SHALL NOT 包含重复的账单卡片样式定义
|
||||||
|
|
||||||
|
### Requirement: Custom Data Source Mode
|
||||||
|
账单列表页面 SHALL 使用 Custom 数据模式,父组件控制数据加载逻辑。
|
||||||
|
|
||||||
|
#### Scenario: Data Source Configuration
|
||||||
|
- **WHEN** 页面使用 `BillListComponent`
|
||||||
|
- **THEN** 组件 SHALL 配置 `data-source="custom"` prop
|
||||||
|
- **AND** 父组件 SHALL 通过 `:transactions` prop 传递账单数据数组
|
||||||
|
|
||||||
|
#### Scenario: Parent Controlled Loading
|
||||||
|
- **WHEN** 页面需要加载账单数据
|
||||||
|
- **THEN** 父组件 SHALL 负责调用 API 获取数据
|
||||||
|
- **AND** 父组件 SHALL 负责数据筛选和分页逻辑
|
||||||
|
- **AND** `BillListComponent` SHALL 仅负责展示传入的数据
|
||||||
|
|
||||||
|
### Requirement: Business Logic Preservation
|
||||||
|
迁移后的页面 SHALL 保持原有的业务逻辑完整,包括事件处理、数据刷新和特定筛选。
|
||||||
|
|
||||||
|
#### Scenario: Click Event Handling
|
||||||
|
- **WHEN** 用户点击账单卡片
|
||||||
|
- **THEN** `BillListComponent` SHALL emit `@click` 事件
|
||||||
|
- **AND** 父组件 SHALL 处理该事件,执行原有的业务逻辑(如显示详情弹窗)
|
||||||
|
|
||||||
|
#### Scenario: Delete Event Handling
|
||||||
|
- **WHEN** 用户左滑删除账单
|
||||||
|
- **THEN** `BillListComponent` SHALL emit `@delete` 事件(内部已完成 API 调用)
|
||||||
|
- **AND** 父组件 SHALL 更新本地数据列表,移除已删除的账单
|
||||||
|
|
||||||
|
#### Scenario: Global Event Listening
|
||||||
|
- **WHEN** 页面监听全局事件(如 `transaction-deleted`)
|
||||||
|
- **THEN** 迁移后页面 SHALL 保留所有全局事件监听器
|
||||||
|
- **AND** 事件处理逻辑 SHALL 保持不变
|
||||||
|
|
||||||
|
### Requirement: Feature Configuration
|
||||||
|
页面 SHALL 通过 props 配置 `BillListComponent` 的功能开关,仅启用所需功能。
|
||||||
|
|
||||||
|
#### Scenario: Filter Bar Control
|
||||||
|
- **WHEN** 页面不需要筛选栏功能
|
||||||
|
- **THEN** 页面 SHALL 设置 `:enable-filter="false"` prop
|
||||||
|
- **AND** `BillListComponent` SHALL NOT 显示筛选栏 UI
|
||||||
|
|
||||||
|
#### Scenario: Checkbox Control
|
||||||
|
- **WHEN** 页面不需要多选功能
|
||||||
|
- **THEN** 页面 SHALL 设置 `:show-checkbox="false"` prop
|
||||||
|
- **AND** `BillListComponent` SHALL NOT 显示复选框
|
||||||
|
|
||||||
|
#### Scenario: Delete Button Control
|
||||||
|
- **WHEN** 页面需要左滑删除功能
|
||||||
|
- **THEN** 页面 SHALL 设置 `:show-delete="true"` prop
|
||||||
|
- **AND** `BillListComponent` SHALL 显示左滑删除按钮
|
||||||
|
|
||||||
|
### Requirement: Visual Consistency
|
||||||
|
所有账单列表页面 SHALL 使用一致的视觉设计和交互模式。
|
||||||
|
|
||||||
|
#### Scenario: Card Layout Consistency
|
||||||
|
- **WHEN** 用户查看任意账单列表页面
|
||||||
|
- **THEN** 所有账单卡片 SHALL 使用相同的布局:左侧图标、中间内容、右侧金额
|
||||||
|
- **AND** 卡片样式 SHALL 与 `/balance` 页面一致
|
||||||
|
|
||||||
|
#### Scenario: Icon Display Consistency
|
||||||
|
- **WHEN** 账单有分类信息
|
||||||
|
- **THEN** 系统 SHALL 显示对应的 Iconify 图标或降级为 Vant 图标
|
||||||
|
- **AND** 图标颜色和背景 SHALL 根据账单类型(支出/收入/不计入)统一着色
|
||||||
|
|
||||||
|
#### Scenario: Amount Formatting Consistency
|
||||||
|
- **WHEN** 系统显示账单金额
|
||||||
|
- **THEN** 支出 SHALL 显示为红色 `- ¥XX.XX`
|
||||||
|
- **AND** 收入 SHALL 显示为绿色 `+ ¥XX.XX`
|
||||||
|
- **AND** 不计入 SHALL 显示为灰色 `¥XX.XX`
|
||||||
|
|
||||||
|
### Requirement: Migration Coverage
|
||||||
|
系统 SHALL 完成所有指定页面的账单列表迁移。
|
||||||
|
|
||||||
|
#### Scenario: All Target Pages Migrated
|
||||||
|
- **WHEN** 迁移完成
|
||||||
|
- **THEN** 以下 6 个页面 SHALL 全部使用 `BillListComponent`:
|
||||||
|
- `MessageView.vue`
|
||||||
|
- `EmailRecord.vue`
|
||||||
|
- `PeriodicRecord.vue`
|
||||||
|
- `ClassificationEdit.vue`
|
||||||
|
- `calendarV2/modules/TransactionList.vue`
|
||||||
|
- `budgetV2/Index.vue`
|
||||||
|
|
||||||
|
#### Scenario: No Functional Regression
|
||||||
|
- **WHEN** 迁移完成后用户使用任意账单列表页面
|
||||||
|
- **THEN** 所有原有功能 SHALL 正常工作(点击、删除、筛选、分页)
|
||||||
|
- **AND** 用户 SHALL NOT 遇到任何功能缺失或异常
|
||||||
|
|
||||||
|
### Requirement: Code Quality
|
||||||
|
迁移后的代码 SHALL 保持高质量,移除废弃代码。
|
||||||
|
|
||||||
|
#### Scenario: No Dead Code
|
||||||
|
- **WHEN** 开发者审查迁移后的页面代码
|
||||||
|
- **THEN** 页面 SHALL NOT 包含废弃的自定义列表代码
|
||||||
|
- **AND** 页面 SHALL NOT 包含未使用的列表样式定义
|
||||||
|
|
||||||
|
#### Scenario: Component Import Clarity
|
||||||
|
- **WHEN** 开发者查看页面导入语句
|
||||||
|
- **THEN** 页面 SHALL 明确 import `BillListComponent`
|
||||||
|
- **AND** 页面 SHALL 移除原有的自定义列表组件导入(如果有)
|
||||||
123
openspec/changes/archive/2026-02-19-unify-bill-list-ui/tasks.md
Normal file
123
openspec/changes/archive/2026-02-19-unify-bill-list-ui/tasks.md
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
## 1. 准备和验证
|
||||||
|
|
||||||
|
- [x] 1.1 审查 `BillListComponent` 组件,确认支持 Custom 数据模式和所有必需的 props
|
||||||
|
- [x] 1.2 审查目标页面 - calendarV2/TransactionList.vue (其他页面不是账单列表)
|
||||||
|
- [x] 1.3 确认 calendarV2/TransactionList.vue 使用的账单数据 API 和数据格式
|
||||||
|
- [x] 1.4 设计迁移方案(保留自定义header和Smart按钮,接受UI风格变化)
|
||||||
|
|
||||||
|
## 2. 迁移 calendarV2/modules/TransactionList.vue
|
||||||
|
|
||||||
|
- [x] 2.1 导入 `BillListComponent`
|
||||||
|
- [x] 2.2 替换自定义列表为 `<BillListComponent>`
|
||||||
|
- [x] 2.3 配置 `data-source="custom"` 和 `:transactions` prop
|
||||||
|
- [x] 2.4 配置功能开关 props (`:enable-filter="false"`, `:show-delete="false"`)
|
||||||
|
- [x] 2.5 实现 `@click` 事件处理器,保持原有点击逻辑
|
||||||
|
- [x] 2.6 移除数据格式转换逻辑(formatTime, formatAmount, getIconByClassify等)
|
||||||
|
- [x] 2.7 移除废弃的自定义列表代码和样式
|
||||||
|
- [x] 2.8 运行 lint 检查
|
||||||
|
- [x] 2.9 提交代码: "refactor(calendar-v2): migrate TransactionList to BillListComponent"
|
||||||
|
|
||||||
|
## 3. 代码验证和文档更新
|
||||||
|
|
||||||
|
- [ ] 3.1 手动测试日历视图功能流程
|
||||||
|
- [ ] 3.2 验证视觉效果:对比迁移前后的账单列表样式
|
||||||
|
- [ ] 3.3 验证交互:确认点击账单、Smart按钮功能正常
|
||||||
|
- [x] 3.4 更新 `openspec/changes/unify-bill-list-ui/` 文档,记录实际迁移范围
|
||||||
|
- [x] 3.5 在 `.doc/` 目录下创建迁移记录文档
|
||||||
|
- [x] 3.6 文档提交: "docs: update unify-bill-list-ui change scope"
|
||||||
|
|
||||||
|
## 2. 迁移 MessageView.vue
|
||||||
|
|
||||||
|
- [ ] 2.1 在 `MessageView.vue` 中导入 `BillListComponent`
|
||||||
|
- [ ] 2.2 替换自定义 `van-swipe-cell` 列表为 `<BillListComponent>`
|
||||||
|
- [ ] 2.3 配置 `data-source="custom"` 和 `:transactions` prop
|
||||||
|
- [ ] 2.4 配置功能开关 props (`:enable-filter="false"`, `:show-delete` 等)
|
||||||
|
- [ ] 2.5 实现 `@click` 事件处理器,保持原有点击逻辑
|
||||||
|
- [ ] 2.6 实现 `@delete` 事件处理器,更新本地数据列表
|
||||||
|
- [ ] 2.7 移除废弃的自定义列表代码和样式
|
||||||
|
- [ ] 2.8 测试所有功能:点击、删除、数据刷新
|
||||||
|
- [ ] 2.9 提交代码: "refactor(message): migrate to BillListComponent"
|
||||||
|
|
||||||
|
## 3. 迁移 EmailRecord.vue
|
||||||
|
|
||||||
|
- [ ] 3.1 在 `EmailRecord.vue` 中导入 `BillListComponent`
|
||||||
|
- [ ] 3.2 替换关联账单列表的自定义 `van-swipe-cell` 为 `<BillListComponent>`
|
||||||
|
- [ ] 3.3 配置 `data-source="custom"` 和 `:transactions` prop
|
||||||
|
- [ ] 3.4 配置功能开关 props
|
||||||
|
- [ ] 3.5 实现 `@click` 事件处理器(关联账单详情弹窗逻辑)
|
||||||
|
- [ ] 3.6 实现 `@delete` 事件处理器
|
||||||
|
- [ ] 3.7 保留全局事件监听器 (`transaction-deleted`)
|
||||||
|
- [ ] 3.8 移除废弃的自定义列表代码和样式
|
||||||
|
- [ ] 3.9 测试:查看关联账单列表、点击账单、删除账单
|
||||||
|
- [ ] 3.10 提交代码: "refactor(email): migrate bill list to BillListComponent"
|
||||||
|
|
||||||
|
## 4. 迁移 PeriodicRecord.vue
|
||||||
|
|
||||||
|
- [ ] 4.1 在 `PeriodicRecord.vue` 中导入 `BillListComponent`
|
||||||
|
- [ ] 4.2 替换周期性账单列表的自定义 `van-swipe-cell` 为 `<BillListComponent>`
|
||||||
|
- [ ] 4.3 配置 `data-source="custom"` 和 `:transactions` prop
|
||||||
|
- [ ] 4.4 适配周期性账单的数据格式(如需要转换为标准 transaction 格式)
|
||||||
|
- [ ] 4.5 配置功能开关 props
|
||||||
|
- [ ] 4.6 实现 `@click` 事件处理器(编辑周期性账单逻辑)
|
||||||
|
- [ ] 4.7 实现 `@delete` 事件处理器(删除周期性账单的特定逻辑)
|
||||||
|
- [ ] 4.8 移除废弃的自定义列表代码和样式
|
||||||
|
- [ ] 4.9 测试:查看周期性账单、编辑、删除、暂停/恢复
|
||||||
|
- [ ] 4.10 提交代码: "refactor(periodic): migrate to BillListComponent"
|
||||||
|
|
||||||
|
## 5. 迁移 ClassificationEdit.vue
|
||||||
|
|
||||||
|
- [ ] 5.1 在 `ClassificationEdit.vue` 中导入 `BillListComponent`
|
||||||
|
- [ ] 5.2 替换分类编辑页面的自定义 `van-swipe-cell` 列表为 `<BillListComponent>`
|
||||||
|
- [ ] 5.3 配置 `data-source="custom"` 和 `:transactions` prop
|
||||||
|
- [ ] 5.4 配置功能开关 props (可能需要禁用筛选栏)
|
||||||
|
- [ ] 5.5 实现 `@click` 事件处理器(选择账单进行分类编辑)
|
||||||
|
- [ ] 5.6 实现 `@delete` 事件处理器
|
||||||
|
- [ ] 5.7 保留分类筛选逻辑(如果有)
|
||||||
|
- [ ] 5.8 移除废弃的自定义列表代码和样式
|
||||||
|
- [ ] 5.9 测试:选择账单、修改分类、删除账单
|
||||||
|
- [ ] 5.10 提交代码: "refactor(classification-edit): migrate to BillListComponent"
|
||||||
|
|
||||||
|
## 6. 迁移 calendarV2/modules/TransactionList.vue
|
||||||
|
|
||||||
|
- [ ] 6.1 在 `calendarV2/modules/TransactionList.vue` 中导入 `BillListComponent`
|
||||||
|
- [ ] 6.2 完全替换现有的 TransactionList 组件实现为 `<BillListComponent>`
|
||||||
|
- [ ] 6.3 配置 `data-source="custom"` 和 `:transactions` prop
|
||||||
|
- [ ] 6.4 配置功能开关 props (根据日历视图需求)
|
||||||
|
- [ ] 6.5 实现 `@click` 事件处理器(日历视图的账单详情逻辑)
|
||||||
|
- [ ] 6.6 实现 `@delete` 事件处理器
|
||||||
|
- [ ] 6.7 确保与日历组件的数据传递正常
|
||||||
|
- [ ] 6.8 移除废弃的自定义列表代码和样式
|
||||||
|
- [ ] 6.9 测试:日历选择日期、查看账单列表、点击账单、删除账单
|
||||||
|
- [ ] 6.10 提交代码: "refactor(calendar-v2): migrate TransactionList to BillListComponent"
|
||||||
|
|
||||||
|
## 7. 迁移 budgetV2/Index.vue
|
||||||
|
|
||||||
|
- [ ] 7.1 在 `budgetV2/Index.vue` 中导入 `BillListComponent`
|
||||||
|
- [ ] 7.2 识别页面中的两个账单列表:"已使用预算列表" 和 "未分类账单列表"
|
||||||
|
- [ ] 7.3 替换 "已使用预算列表" 的自定义 `van-swipe-cell` 为第一个 `<BillListComponent>` 实例
|
||||||
|
- [ ] 7.4 配置第一个组件: `data-source="custom"`, `:transactions`, `:enable-filter="false"`
|
||||||
|
- [ ] 7.5 替换 "未分类账单列表" 的自定义 `van-swipe-cell` 为第二个 `<BillListComponent>` 实例
|
||||||
|
- [ ] 7.6 配置第二个组件: `data-source="custom"`, `:transactions`, `:enable-filter="false"`
|
||||||
|
- [ ] 7.7 实现两个列表的 `@click` 事件处理器
|
||||||
|
- [ ] 7.8 实现两个列表的 `@delete` 事件处理器,更新对应的本地数据
|
||||||
|
- [ ] 7.9 保留预算统计逻辑和全局事件监听器
|
||||||
|
- [ ] 7.10 移除废弃的自定义列表代码和样式
|
||||||
|
- [ ] 7.11 测试:预算统计、已使用列表、未分类列表、点击、删除
|
||||||
|
- [ ] 7.12 提交代码: "refactor(budget-v2): migrate to BillListComponent"
|
||||||
|
|
||||||
|
## 8. 代码清理和验证
|
||||||
|
|
||||||
|
- [ ] 8.1 审查所有迁移页面,确认没有遗留的自定义列表代码
|
||||||
|
- [ ] 8.2 审查所有迁移页面,确认没有未使用的列表样式定义
|
||||||
|
- [ ] 8.3 运行前端 lint: `cd Web && pnpm lint`
|
||||||
|
- [ ] 8.4 运行前端构建: `cd Web && pnpm build`
|
||||||
|
- [ ] 8.5 修复任何 lint 错误或构建警告
|
||||||
|
|
||||||
|
## 9. 集成测试和文档
|
||||||
|
|
||||||
|
- [ ] 9.1 手动测试所有 6 个迁移页面的完整功能流程
|
||||||
|
- [ ] 9.2 验证视觉一致性:对比每个页面与 `/balance` 页面的账单列表样式
|
||||||
|
- [ ] 9.3 验证交互一致性:确认点击、左滑删除、分页行为一致
|
||||||
|
- [ ] 9.4 更新 `Web/src/views/AGENTS.md` (如需要),记录统一使用 BillListComponent
|
||||||
|
- [ ] 9.5 在 `.doc/` 目录下创建迁移记录文档 (可选)
|
||||||
|
- [ ] 9.6 最终提交: "refactor: unify all bill lists to BillListComponent"
|
||||||
114
openspec/specs/bill-list-unified-ui/spec.md
Normal file
114
openspec/specs/bill-list-unified-ui/spec.md
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
## ADDED Requirements
|
||||||
|
|
||||||
|
### Requirement: Unified Bill List Component Usage
|
||||||
|
所有账单列表页面 SHALL 使用 `BillListComponent` 组件来展示账单列表,而不是自定义实现。
|
||||||
|
|
||||||
|
#### Scenario: Component Imported and Used
|
||||||
|
- **WHEN** 开发者查看任意账单列表页面的代码
|
||||||
|
- **THEN** 页面 SHALL import `BillListComponent` from `@/components/Bill/BillListComponent.vue`
|
||||||
|
- **AND** 页面 SHALL 在 template 中使用 `<BillListComponent>` 标签
|
||||||
|
|
||||||
|
#### Scenario: No Custom List Rendering
|
||||||
|
- **WHEN** 开发者查看账单列表页面的代码
|
||||||
|
- **THEN** 页面 SHALL NOT 包含自定义的 `van-swipe-cell` 列表渲染逻辑
|
||||||
|
- **AND** 页面 SHALL NOT 包含重复的账单卡片样式定义
|
||||||
|
|
||||||
|
### Requirement: Custom Data Source Mode
|
||||||
|
账单列表页面 SHALL 使用 Custom 数据模式,父组件控制数据加载逻辑。
|
||||||
|
|
||||||
|
#### Scenario: Data Source Configuration
|
||||||
|
- **WHEN** 页面使用 `BillListComponent`
|
||||||
|
- **THEN** 组件 SHALL 配置 `data-source="custom"` prop
|
||||||
|
- **AND** 父组件 SHALL 通过 `:transactions` prop 传递账单数据数组
|
||||||
|
|
||||||
|
#### Scenario: Parent Controlled Loading
|
||||||
|
- **WHEN** 页面需要加载账单数据
|
||||||
|
- **THEN** 父组件 SHALL 负责调用 API 获取数据
|
||||||
|
- **AND** 父组件 SHALL 负责数据筛选和分页逻辑
|
||||||
|
- **AND** `BillListComponent` SHALL 仅负责展示传入的数据
|
||||||
|
|
||||||
|
### Requirement: Business Logic Preservation
|
||||||
|
迁移后的页面 SHALL 保持原有的业务逻辑完整,包括事件处理、数据刷新和特定筛选。
|
||||||
|
|
||||||
|
#### Scenario: Click Event Handling
|
||||||
|
- **WHEN** 用户点击账单卡片
|
||||||
|
- **THEN** `BillListComponent` SHALL emit `@click` 事件
|
||||||
|
- **AND** 父组件 SHALL 处理该事件,执行原有的业务逻辑(如显示详情弹窗)
|
||||||
|
|
||||||
|
#### Scenario: Delete Event Handling
|
||||||
|
- **WHEN** 用户左滑删除账单
|
||||||
|
- **THEN** `BillListComponent` SHALL emit `@delete` 事件(内部已完成 API 调用)
|
||||||
|
- **AND** 父组件 SHALL 更新本地数据列表,移除已删除的账单
|
||||||
|
|
||||||
|
#### Scenario: Global Event Listening
|
||||||
|
- **WHEN** 页面监听全局事件(如 `transaction-deleted`)
|
||||||
|
- **THEN** 迁移后页面 SHALL 保留所有全局事件监听器
|
||||||
|
- **AND** 事件处理逻辑 SHALL 保持不变
|
||||||
|
|
||||||
|
### Requirement: Feature Configuration
|
||||||
|
页面 SHALL 通过 props 配置 `BillListComponent` 的功能开关,仅启用所需功能。
|
||||||
|
|
||||||
|
#### Scenario: Filter Bar Control
|
||||||
|
- **WHEN** 页面不需要筛选栏功能
|
||||||
|
- **THEN** 页面 SHALL 设置 `:enable-filter="false"` prop
|
||||||
|
- **AND** `BillListComponent` SHALL NOT 显示筛选栏 UI
|
||||||
|
|
||||||
|
#### Scenario: Checkbox Control
|
||||||
|
- **WHEN** 页面不需要多选功能
|
||||||
|
- **THEN** 页面 SHALL 设置 `:show-checkbox="false"` prop
|
||||||
|
- **AND** `BillListComponent` SHALL NOT 显示复选框
|
||||||
|
|
||||||
|
#### Scenario: Delete Button Control
|
||||||
|
- **WHEN** 页面需要左滑删除功能
|
||||||
|
- **THEN** 页面 SHALL 设置 `:show-delete="true"` prop
|
||||||
|
- **AND** `BillListComponent` SHALL 显示左滑删除按钮
|
||||||
|
|
||||||
|
### Requirement: Visual Consistency
|
||||||
|
所有账单列表页面 SHALL 使用一致的视觉设计和交互模式。
|
||||||
|
|
||||||
|
#### Scenario: Card Layout Consistency
|
||||||
|
- **WHEN** 用户查看任意账单列表页面
|
||||||
|
- **THEN** 所有账单卡片 SHALL 使用相同的布局:左侧图标、中间内容、右侧金额
|
||||||
|
- **AND** 卡片样式 SHALL 与 `/balance` 页面一致
|
||||||
|
|
||||||
|
#### Scenario: Icon Display Consistency
|
||||||
|
- **WHEN** 账单有分类信息
|
||||||
|
- **THEN** 系统 SHALL 显示对应的 Iconify 图标或降级为 Vant 图标
|
||||||
|
- **AND** 图标颜色和背景 SHALL 根据账单类型(支出/收入/不计入)统一着色
|
||||||
|
|
||||||
|
#### Scenario: Amount Formatting Consistency
|
||||||
|
- **WHEN** 系统显示账单金额
|
||||||
|
- **THEN** 支出 SHALL 显示为红色 `- ¥XX.XX`
|
||||||
|
- **AND** 收入 SHALL 显示为绿色 `+ ¥XX.XX`
|
||||||
|
- **AND** 不计入 SHALL 显示为灰色 `¥XX.XX`
|
||||||
|
|
||||||
|
### Requirement: Migration Coverage
|
||||||
|
系统 SHALL 完成所有指定页面的账单列表迁移。
|
||||||
|
|
||||||
|
#### Scenario: All Target Pages Migrated
|
||||||
|
- **WHEN** 迁移完成
|
||||||
|
- **THEN** 以下 6 个页面 SHALL 全部使用 `BillListComponent`:
|
||||||
|
- `MessageView.vue`
|
||||||
|
- `EmailRecord.vue`
|
||||||
|
- `PeriodicRecord.vue`
|
||||||
|
- `ClassificationEdit.vue`
|
||||||
|
- `calendarV2/modules/TransactionList.vue`
|
||||||
|
- `budgetV2/Index.vue`
|
||||||
|
|
||||||
|
#### Scenario: No Functional Regression
|
||||||
|
- **WHEN** 迁移完成后用户使用任意账单列表页面
|
||||||
|
- **THEN** 所有原有功能 SHALL 正常工作(点击、删除、筛选、分页)
|
||||||
|
- **AND** 用户 SHALL NOT 遇到任何功能缺失或异常
|
||||||
|
|
||||||
|
### Requirement: Code Quality
|
||||||
|
迁移后的代码 SHALL 保持高质量,移除废弃代码。
|
||||||
|
|
||||||
|
#### Scenario: No Dead Code
|
||||||
|
- **WHEN** 开发者审查迁移后的页面代码
|
||||||
|
- **THEN** 页面 SHALL NOT 包含废弃的自定义列表代码
|
||||||
|
- **AND** 页面 SHALL NOT 包含未使用的列表样式定义
|
||||||
|
|
||||||
|
#### Scenario: Component Import Clarity
|
||||||
|
- **WHEN** 开发者查看页面导入语句
|
||||||
|
- **THEN** 页面 SHALL 明确 import `BillListComponent`
|
||||||
|
- **AND** 页面 SHALL 移除原有的自定义列表组件导入(如果有)
|
||||||
Reference in New Issue
Block a user