feat(ui): 添加 Big.js 格式化工具,优化表格数字精度展示
This commit is contained in:
parent
eba5a68495
commit
978d8a591e
@ -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
14
package-lock.json
generated
@ -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",
|
||||||
|
|||||||
@ -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
16
src/lib/formatters.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user