From e1aec6c2c39d12fc89c17126f311c07c08eeb46e Mon Sep 17 00:00:00 2001 From: hailin Date: Tue, 6 Jan 2026 22:58:30 -0800 Subject: [PATCH] =?UTF-8?q?refactor(admin-web):=20=E5=9B=BA=E5=AE=9A?= =?UTF-8?q?=E8=B4=A6=E6=88=B7=E6=98=8E=E7=BB=86=E6=94=B9=E4=B8=BA=E5=9C=A8?= =?UTF-8?q?=E5=85=AC=E5=85=B1=E5=8C=BA=E5=9F=9F=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将固定系统账户的分类账明细从每个卡片内部展开改为在卡片网格下方 的公共区域显示。点击任一账户的"查看明细"按钮，明细表格在下方 完整展示，提供更好的阅读体验。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../SystemAccountsTab.module.scss | 58 ++++++++ .../SystemAccountsTab.tsx | 127 ++++++++++-------- 2 files changed, 131 insertions(+), 54 deletions(-) diff --git a/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.module.scss b/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.module.scss index 91bbf9cd..b9716605 100644 --- a/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.module.scss +++ b/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.module.scss @@ -620,6 +620,64 @@ opacity: 0.6; cursor: not-allowed; } + + &Active { + background-color: #3b82f6; + color: #fff; + border-color: #3b82f6; + + &:hover:not(:disabled) { + background-color: #2563eb; + border-color: #2563eb; + } + } +} + +/* [2026-01-07] 新增：选中卡片样式 */ +.accountCardSelected { + border-color: #3b82f6; + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); +} + +/* [2026-01-07] 更新：公共明细区域样式 */ +.sharedLedgerSection { + margin-top: 24px; + padding: 20px; + background-color: #f9fafb; + border: 1px solid #e5e7eb; + border-radius: 8px; +} + +.sharedLedgerHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; + padding-bottom: 12px; + border-bottom: 1px solid #e5e7eb; +} + +.sharedLedgerTitle { + margin: 0; + font-size: 16px; + font-weight: 600; + color: #1f2937; +} + +.closeLedgerButton { + padding: 6px 14px; + background-color: #fff; + color: #6b7280; + border: 1px solid #d1d5db; + border-radius: 6px; + cursor: pointer; + font-size: 13px; + transition: all 0.2s ease; + + &:hover { + background-color: #f3f4f6; + color: #374151; + } } .accountLedgerSection { diff --git a/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.tsx b/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.tsx index a4463e24..43e9b4eb 100644 --- a/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.tsx +++ b/frontend/admin-web/src/components/features/system-account-report/SystemAccountsTab.tsx @@ -296,7 +296,7 @@ export default function SystemAccountsTab() { /** * 固定系统账户区域 * [2026-01-05] 更新：根据业务需求调整显示名称，USDT改为绿积分 - * [2026-01-07] 更新：添加查看分类账明细按钮 + * [2026-01-07] 更新：添加查看分类账明细按钮，在卡片下方公共区域显示明细 */ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fixedAccounts'] }) { // [2026-01-07] 更新：使用 SYSTEM_ACCOUNT_NAMES 映射获取正式名称 @@ -308,8 +308,8 @@ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fix { key: 'platformFee', sequence: 'S0000000005', data: data.platformFee }, ]; - // [2026-01-07] 新增：展开状态管理和分类账数据 - const [expandedAccount, setExpandedAccount] = useState(null); + // [2026-01-07] 新增：选中账户和分类账数据 + const [selectedAccount, setSelectedAccount] = useState(null); const [allLedgerData, setAllLedgerData] = useState(null); const [ledgerLoading, setLedgerLoading] = useState(false); @@ -319,7 +319,7 @@ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fix setLedgerLoading(true); try { - const response = await systemAccountReportService.getAllLedger({ pageSize: 50 }); + const response = await systemAccountReportService.getAllLedger({ pageSize: 100 }); if (response.data) { setAllLedgerData(response.data); } @@ -330,10 +330,10 @@ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fix } }, [allLedgerData]); - // 切换显示某个账户的明细 - const handleToggleLedger = async (accountSequence: string) => { - if (expandedAccount === accountSequence) { - setExpandedAccount(null); + // 选择账户查看明细 + const handleSelectAccount = async (accountSequence: string) => { + if (selectedAccount === accountSequence) { + setSelectedAccount(null); return; } @@ -341,7 +341,7 @@ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fix if (!allLedgerData) { await loadAllLedger(); } - setExpandedAccount(accountSequence); + setSelectedAccount(accountSequence); }; // 获取指定账户的分类账数据 @@ -353,16 +353,18 @@ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fix return accountLedger?.ledger || []; }; + // 当前选中账户的明细数据 + const currentLedger = selectedAccount ? getAccountLedger(selectedAccount) : []; + return (

固定系统账户

{accounts.map(({ key, sequence, data: accountData }) => { - const isExpanded = expandedAccount === sequence; - const ledger = isExpanded ? getAccountLedger(sequence) : []; + const isSelected = selectedAccount === sequence; return ( -
+
{getAccountDisplayName(sequence)}
@@ -389,56 +391,73 @@ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fix {/* [2026-01-07] 新增：查看明细按钮 */}
- {/* [2026-01-07] 新增：展开的分类账明细 */} - {isExpanded && ( -
- {ledger.length > 0 ? ( -
- - - - - - - - - - - - {ledger.map((entry) => ( - - - - - - - - ))} - -
时间类型金额余额备注
{new Date(entry.createdAt).toLocaleString('zh-CN')} - - {ENTRY_TYPE_LABELS[entry.entryType] || entry.entryType} - - = 0 ? styles.amountPositive : styles.amountNegative}> - {entry.amount >= 0 ? '+' : ''}{formatAmount(entry.amount)} {getAssetTypeLabel(entry.assetType)} - {entry.balanceAfter !== null ? formatAmount(entry.balanceAfter) : '-'}{entry.memo || entry.allocationType || '-'}
-
- ) : ( -
暂无流水记录
- )} -
- )}
); })}
+ + {/* [2026-01-07] 新增：在卡片下方的公共区域显示选中账户的完整明细 */} + {selectedAccount && ( +
+
+

+ {getAccountDisplayName(selectedAccount)} - 分类账明细 +

+ +
+ {ledgerLoading ? ( +
+
+ 加载明细中... +
+ ) : currentLedger.length > 0 ? ( +
+ + + + + + + + + + + + {currentLedger.map((entry) => ( + + + + + + + + ))} + +
时间类型金额余额备注
{new Date(entry.createdAt).toLocaleString('zh-CN')} + + {ENTRY_TYPE_LABELS[entry.entryType] || entry.entryType} + + = 0 ? styles.amountPositive : styles.amountNegative}> + {entry.amount >= 0 ? '+' : ''}{formatAmount(entry.amount)} {getAssetTypeLabel(entry.assetType)} + {entry.balanceAfter !== null ? formatAmount(entry.balanceAfter) : '-'}{entry.memo || entry.allocationType || '-'}
+
+ ) : ( +
暂无流水记录
+ )} +
+ )}
); }