feat(ui): 添加 Big.js 格式化工具,优化表格数字精度展示

This commit is contained in:
kennethcheng 2026-04-27 22:32:35 +08:00
parent eba5a68495
commit 978d8a591e
4 changed files with 39 additions and 5 deletions

View File

@ -1,6 +1,7 @@
import { getAssets } from '@/actions/asset'; import { getAssets } from '@/actions/asset';
import { getTransactions } from '@/actions/transaction'; import { getTransactions } from '@/actions/transaction';
import { AddTransactionDialog } from '@/components/transactions/add-transaction-dialog'; import { AddTransactionDialog } from '@/components/transactions/add-transaction-dialog';
import { formatAmount, formatQuantity } from '@/lib/formatters';
import { import {
Table, Table,
TableBody, TableBody,
@ -25,7 +26,7 @@ export default async function TransactionsPage() {
FEE: '手续费', FEE: '手续费',
}; };
const assetMap = new Map(assets.map((a) => [a.id, a.symbol])); const assetMap = new Map(assets.map((a) => [a.id, { symbol: a.symbol, type: a.type }]));
return ( return (
<div className="space-y-6"> <div className="space-y-6">
@ -62,14 +63,16 @@ export default async function TransactionsPage() {
</TableRow> </TableRow>
) : ( ) : (
transactions.map((tx) => { transactions.map((tx) => {
const symbol = assetMap.get(tx.assetId) || tx.assetId; const assetInfo = assetMap.get(tx.assetId);
const symbol = assetInfo?.symbol || tx.assetId;
const assetType = assetInfo?.type || 'CASH';
return ( return (
<TableRow key={tx.id}> <TableRow key={tx.id}>
<TableCell className="font-medium">{symbol}</TableCell> <TableCell className="font-medium">{symbol}</TableCell>
<TableCell>{typeLabels[tx.txType] || tx.txType}</TableCell> <TableCell>{typeLabels[tx.txType] || tx.txType}</TableCell>
<TableCell>{tx.quantity}</TableCell> <TableCell>{formatQuantity(tx.quantity, assetType)}</TableCell>
<TableCell>{tx.price}</TableCell> <TableCell>{formatAmount(tx.price)}</TableCell>
<TableCell>{tx.fee}</TableCell> <TableCell>{formatAmount(tx.fee)}</TableCell>
<TableCell>{tx.txCurrency}</TableCell> <TableCell>{tx.txCurrency}</TableCell>
<TableCell> <TableCell>
{tx.executedAt {tx.executedAt

14
package-lock.json generated
View File

@ -14,6 +14,7 @@
"@radix-ui/react-select": "^2.2.6", "@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-slot": "^1.2.4",
"bcryptjs": "^3.0.3", "bcryptjs": "^3.0.3",
"big.js": "^7.0.1",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dotenv": "^17.4.2", "dotenv": "^17.4.2",
@ -3913,6 +3914,19 @@
"bcrypt": "bin/bcrypt" "bcrypt": "bin/bcrypt"
} }
}, },
"node_modules/big.js": {
"version": "7.0.1",
"resolved": "https://registry.npmmirror.com/big.js/-/big.js-7.0.1.tgz",
"integrity": "sha512-iFgV784tD8kq4ccF1xtNMZnXeZzVuXWWM+ERFzKQjv+A5G9HC8CY3DuV45vgzFFcW+u2tIvmF95+AzWgs6BjCg==",
"license": "MIT",
"engines": {
"node": "*"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/bigjs"
}
},
"node_modules/binary-extensions": { "node_modules/binary-extensions": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",

View File

@ -18,6 +18,7 @@
"@radix-ui/react-select": "^2.2.6", "@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-slot": "^1.2.4", "@radix-ui/react-slot": "^1.2.4",
"bcryptjs": "^3.0.3", "bcryptjs": "^3.0.3",
"big.js": "^7.0.1",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dotenv": "^17.4.2", "dotenv": "^17.4.2",

16
src/lib/formatters.ts Normal file
View File

@ -0,0 +1,16 @@
import Big from 'big.js';
export function formatAmount(value: string): string {
return new Big(value).toFixed(2);
}
export function formatQuantity(value: string, assetType: string): string {
switch (assetType) {
case 'STOCK':
return new Big(value).round(0).toString();
case 'CRYPTO':
return new Big(value).round(8).toString();
default:
return new Big(value).toFixed(2);
}
}