refactor(admin-web): 固定账户明细改为在公共区域显示
将固定系统账户的分类账明细从每个卡片内部展开改为在卡片网格下方 的公共区域显示。点击任一账户的"查看明细"按钮，明细表格在下方 完整展示，提供更好的阅读体验。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d6b3f04612
commit
e1aec6c2c3
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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<string | null>(null);
|
||||
// [2026-01-07] 新增：选中账户和分类账数据
|
||||
const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
|
||||
const [allLedgerData, setAllLedgerData] = useState<AllSystemAccountsLedgerResponse | null>(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 (
|
||||
<div className={styles.section}>
|
||||
<h3 className={styles.sectionTitle}>固定系统账户</h3>
|
||||
<div className={styles.cardGrid}>
|
||||
{accounts.map(({ key, sequence, data: accountData }) => {
|
||||
const isExpanded = expandedAccount === sequence;
|
||||
const ledger = isExpanded ? getAccountLedger(sequence) : [];
|
||||
const isSelected = selectedAccount === sequence;
|
||||
|
||||
return (
|
||||
<div key={key} className={styles.accountCard}>
|
||||
<div key={key} className={`${styles.accountCard} ${isSelected ? styles.accountCardSelected : ''}`}>
|
||||
<div className={styles.cardHeader}>
|
||||
<span className={styles.accountLabel}>{getAccountDisplayName(sequence)}</span>
|
||||
</div>
|
||||
|
|
@ -389,56 +391,73 @@ function FixedAccountsSection({ data }: { data: SystemAccountReportResponse['fix
|
|||
{/* [2026-01-07] 新增：查看明细按钮 */}
|
||||
<div className={styles.cardFooter}>
|
||||
<button
|
||||
className={styles.viewLedgerButton}
|
||||
onClick={() => handleToggleLedger(sequence)}
|
||||
className={`${styles.viewLedgerButton} ${isSelected ? styles.viewLedgerButtonActive : ''}`}
|
||||
onClick={() => handleSelectAccount(sequence)}
|
||||
disabled={ledgerLoading}
|
||||
>
|
||||
{ledgerLoading && !allLedgerData ? '加载中...' : isExpanded ? '收起明细' : '查看明细'}
|
||||
{ledgerLoading && !allLedgerData ? '加载中...' : isSelected ? '收起明细' : '查看明细'}
|
||||
</button>
|
||||
</div>
|
||||
{/* [2026-01-07] 新增：展开的分类账明细 */}
|
||||
{isExpanded && (
|
||||
<div className={styles.accountLedgerSection}>
|
||||
{ledger.length > 0 ? (
|
||||
<div className={styles.tableWrapper}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>类型</th>
|
||||
<th>金额</th>
|
||||
<th>余额</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ledger.map((entry) => (
|
||||
<tr key={entry.id}>
|
||||
<td>{new Date(entry.createdAt).toLocaleString('zh-CN')}</td>
|
||||
<td>
|
||||
<span className={styles.entryTypeBadge}>
|
||||
{ENTRY_TYPE_LABELS[entry.entryType] || entry.entryType}
|
||||
</span>
|
||||
</td>
|
||||
<td className={entry.amount >= 0 ? styles.amountPositive : styles.amountNegative}>
|
||||
{entry.amount >= 0 ? '+' : ''}{formatAmount(entry.amount)} {getAssetTypeLabel(entry.assetType)}
|
||||
</td>
|
||||
<td>{entry.balanceAfter !== null ? formatAmount(entry.balanceAfter) : '-'}</td>
|
||||
<td className={styles.memo}>{entry.memo || entry.allocationType || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.emptyLedger}>暂无流水记录</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* [2026-01-07] 新增：在卡片下方的公共区域显示选中账户的完整明细 */}
|
||||
{selectedAccount && (
|
||||
<div className={styles.sharedLedgerSection}>
|
||||
<div className={styles.sharedLedgerHeader}>
|
||||
<h4 className={styles.sharedLedgerTitle}>
|
||||
{getAccountDisplayName(selectedAccount)} - 分类账明细
|
||||
</h4>
|
||||
<button
|
||||
className={styles.closeLedgerButton}
|
||||
onClick={() => setSelectedAccount(null)}
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
{ledgerLoading ? (
|
||||
<div className={styles.loading}>
|
||||
<div className={styles.spinner} />
|
||||
<span>加载明细中...</span>
|
||||
</div>
|
||||
) : currentLedger.length > 0 ? (
|
||||
<div className={styles.tableWrapper}>
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>时间</th>
|
||||
<th>类型</th>
|
||||
<th>金额</th>
|
||||
<th>余额</th>
|
||||
<th>备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentLedger.map((entry) => (
|
||||
<tr key={entry.id}>
|
||||
<td>{new Date(entry.createdAt).toLocaleString('zh-CN')}</td>
|
||||
<td>
|
||||
<span className={styles.entryTypeBadge}>
|
||||
{ENTRY_TYPE_LABELS[entry.entryType] || entry.entryType}
|
||||
</span>
|
||||
</td>
|
||||
<td className={entry.amount >= 0 ? styles.amountPositive : styles.amountNegative}>
|
||||
{entry.amount >= 0 ? '+' : ''}{formatAmount(entry.amount)} {getAssetTypeLabel(entry.assetType)}
|
||||
</td>
|
||||
<td>{entry.balanceAfter !== null ? formatAmount(entry.balanceAfter) : '-'}</td>
|
||||
<td className={styles.memo}>{entry.memo || entry.allocationType || '-'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.emptyLedger}>暂无流水记录</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue