From 9a133e82e9fc419a30c8d8ca9b44fb52e28e7495 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=85=9C?= <1871263099@qq.com>
Date: Sat, 3 Oct 2026 17:12:04 +0800
Subject: [PATCH] feat: drag account groups and separate grouped card rows
---
apps/api/test/update.test.ts | 11 ++
apps/web/src/App.tsx | 161 +++++++++++++-------------
apps/web/src/GroupOrderList.tsx | 147 +++++++++++++++++++++++
apps/web/src/group-order.ts | 9 ++
apps/web/src/locales/en.json | 6 +-
apps/web/src/locales/zh-Hant.json | 6 +-
apps/web/src/style.css | 78 +++++++++++--
docs/acceptance.md | 4 +
docs/account-group-rows-preview.png | Bin 0 -> 62880 bytes
docs/group-drag-preview.png | Bin 0 -> 34068 bytes
docs/update-group-drag-2026-10-03.md | 26 +++++
docs/update-group-order-2026-10-03.md | 2 +
update.md | 4 +
13 files changed, 360 insertions(+), 94 deletions(-)
create mode 100644 apps/web/src/GroupOrderList.tsx
create mode 100644 docs/account-group-rows-preview.png
create mode 100644 docs/group-drag-preview.png
create mode 100644 docs/update-group-drag-2026-10-03.md
diff --git a/apps/api/test/update.test.ts b/apps/api/test/update.test.ts
index 8ebd59b..77bb8ad 100644
--- a/apps/api/test/update.test.ts
+++ b/apps/api/test/update.test.ts
@@ -432,3 +432,14 @@ test('group order keeps visible subsets stable and distinguishes unnamed and nam
assert.deepEqual(orderedGroups(['日常'], ['理财', '', '日常']), ['日常']);
assert.deepEqual(mergeGroupOrder(['日常', '理财'], ['理财', '隐藏']), ['日常', '理财', '隐藏']);
});
+
+test('drag insertion moves groups without swapping neighbours, mutating input or crossing bounds', async () => {
+ const { moveGroup } = await import('../../web/src/group-order');
+ const original = ['日常', '', '消费', '理财'];
+ assert.deepEqual(moveGroup(original, 3, 0), ['理财', '日常', '', '消费']);
+ assert.deepEqual(moveGroup(original, 0, 3), ['', '消费', '理财', '日常']);
+ assert.deepEqual(original, ['日常', '', '消费', '理财']);
+ assert.equal(moveGroup(original, 0, -1), original);
+ assert.equal(moveGroup(original, 3, 4), original);
+ assert.equal(moveGroup(original, 2, 2), original);
+});
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index d74022a..2b3a8c6 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,5 +1,13 @@
import { t as tr, useLocale, LanguagePicker } from './i18n';
-import { useState, useEffect, useRef, createElement, type FormEvent, type ReactNode } from 'react';
+import {
+ useState,
+ useEffect,
+ useRef,
+ createElement,
+ Fragment,
+ type FormEvent,
+ type ReactNode,
+} from 'react';
import {
LayoutDashboard,
CalendarDays,
@@ -39,6 +47,7 @@ import {
} from './api';
import './style.css';
import { GroupOrderContext } from './GroupOrderContext';
+import { GroupOrderList } from './GroupOrderList';
import { orderedGroups, mergeGroupOrder } from './group-order';
import { Calendar } from './Calendar';
import { SchedulePanel } from './SchedulePanel';
@@ -1357,59 +1366,67 @@ export default function App() {
(groupRanks.get(b.groupName || '') || 0)
: 0,
)
- .map((p) => (
-
+
+
+ {p.iconId ? (
+ })
+ ) : p.kind === 'asset' ? (
+
+ ) : p.kind === 'debt' ? (
+
+ ) : (
+
+ )}
+
+
+
{p.name}
+ {p.groupName && {p.groupName}}
+
+ {categoryLabel(p)} ·{' '}
+ {p.kind === 'debt'
+ ? tr(p.side === 'asset' ? '借款（待收）' : '欠款（待还）')
+ : p.side === 'asset'
+ ? tr('资产')
+ : tr(
+ p.kind === 'account' && p.amount.startsWith('-')
+ ? '溢缴存款'
+ : '负债',
+ )}
+ {p.archived ? tr(' · 已归档') : ''}
+
+
+ {money(positionAmount(p), p.currency)}
+
+
+ {tr('折合')}{' '}
+ {p.converted === null
+ ? tr('缺少汇率')
+ : money(positionAmount(p, p.converted || '0'), user.baseCurrency)}
+
+
+
))}
) : (
@@ -2072,37 +2089,15 @@ export default function App() {
)}
{modal?.kind === 'group-order' && modal.groups && (
!busy && setModal(null)}>
- {tr('调整账户分组顺序，账户页和选择弹窗会同步使用。')}
-
- {modal.groups.map((g, index) => (
- -
- {g || tr('未分组')}
-
- {[-1, 1].map((offset) => (
-
- ))}
-
-
- ))}
-
+
+ setModal((current) =>
+ current?.kind === 'group-order' ? { ...current, groups } : current,
+ )
+ }
+ />