在交易列表页面顶部显示账户信息：新增账户图标、名称和余额信息卡片，优化单账户筛选时的显示逻辑

2026-04-05 18:51:27 +08:00
parent c7c84c74d3
commit ba85852543
3 changed files with 72 additions and 15 deletions
@@ -33,14 +33,15 @@
 - 移动端 ListPage：账户列表显示「可用额度」（= `creditLimit + balance`，因信用卡余额为负值）
 - 语言包：中英文均已添加 "Credit Limit" / "Available"

-### 3. ⚠️ 账户交易列表顶部显示账户信息
-**描述：** 在按账户筛选的交易列表页面顶部，显示账户名称、余额（或信用卡欠款+额度）等信息卡片。
+### 3. 🟢 账户交易列表顶部显示账户信息
+**描述：** 在按单个账户筛选的交易列表页面顶部，显示账户图标、名称和余额信息卡片。

-**实现思路：**
- 检测当前是否为单账户筛选状态
- 顶部插入账户信息卡片组件
- 若多账户筛选则显示多张卡片
- 涉及文件：`src/views/mobile/transactions/ListPage.vue`
+**已完成：**
+- 仅单账户筛选时（`queryAllFilterAccountIdsCount === 1`）显示，多账户/全部时不显示
+- 信用卡账户显示「欠款 · 可用 xxx」，普通账户显示余额
+- 移动端：toolbar 下方插入 `f7-card`
+- 桌面端：日期范围行下方插入 `v-card`（tonal 样式）
+- 涉及文件：`src/views/mobile/transactions/ListPage.vue`、`src/views/desktop/transactions/ListPage.vue`

 ### 4. 🟢 允许直接修改账户余额（自动插入调整记录）
 **描述：** 在账户编辑页直接修改余额字段，保存时自动计算差值并插入一条「余额调整」类型交易记录。
@@ -132,12 +133,10 @@
 - Tab 切换动画保持原样（设置中已有开关可控制）
 - 涉及文件：`src/styles/mobile/global.scss`

-### 11. 🟢 点击响应卡顿优化
+### 11. 🔍 点击响应卡顿优化（暂调查）
 **描述：** 点击按钮有延迟感，点不上的问题。

-**已完成：**
- `tapHoldDelay` 从默认 750ms 降至 500ms，减少长按判定等待
- 涉及文件：`src/MobileApp.vue`
+**初步判断：** 可能是接口响应慢导致，非前端交互延迟问题。等离线缓存（#12）完成后再评估是否仍需处理。

 ---

@@ -163,7 +162,7 @@
 |---|------|------|
 | 1 | 自选主题色 | ⚠️ 待做 |
 | 2 | 信用卡额度 | 🟢 已完成 |
-| 3 | 账户信息卡片 | ⚠️ 待做 |
+| 3 | 账户信息卡片 | 🟢 已完成 |
 | 4 | 调整余额入口 | 🟢 已完成 |
 | 5 | 记账页显示余额 | 🟢 已完成 |
 | 6 | 记住上次账户 | ❓ 待定 |
@@ -171,5 +170,5 @@
 | 8 | 详情编辑/删除 | 🟢 已完成 |
 | 9 | 分类默认展开 | ❓ 待定 |
 | 10 | 全局动画加速 | 🟢 已完成 |
-| 11 | 点击卡顿优化 | 🟢 已完成 |
+| 11 | 点击卡顿优化 | 🔍 暂调查 |
 | 12 | 离线缓存 | ❌ 暂缓 |