feat(ui): 修复流水页 404，实现高精度交易录入表单与列表展示

2026-04-27 22:03:31 +08:00
parent 19e23dc933
commit 7dbfd24cb1
2 changed files with 351 additions and 0 deletions
@@ -0,0 +1,88 @@
+import { getAssets } from '@/actions/asset';
+import { getTransactions } from '@/actions/transaction';
+import { AddTransactionDialog } from '@/components/transactions/add-transaction-dialog';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+
+export default async function TransactionsPage() {
+  const [assets, transactions] = await Promise.all([
+    getAssets(),
+    getTransactions(),
+  ]);
+
+  const typeLabels: Record<string, string> = {
+    BUY: '买入',
+    SELL: '卖出',
+    DIVIDEND: '分红',
+    AIRDROP: '空投',
+    FEE: '手续费',
+  };
+
+  const assetMap = new Map(assets.map((a) => [a.id, a.symbol]));
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">交易流水</h1>
+        <AddTransactionDialog assets={assets} />
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableCaption>
+            共 {transactions.length} 条交易记录
+          </TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>标的</TableHead>
+              <TableHead>类型</TableHead>
+              <TableHead>数量</TableHead>
+              <TableHead>价格</TableHead>
+              <TableHead>手续费</TableHead>
+              <TableHead>币种</TableHead>
+              <TableHead>执行时间</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {transactions.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={7}
+                  className="text-center text-muted-foreground"
+                >
+                  暂无流水，点击"添加流水"按钮录入第一笔交易
+                </TableCell>
+              </TableRow>
+            ) : (
+              transactions.map((tx) => {
+                const symbol = assetMap.get(tx.assetId) || tx.assetId;
+                return (
+                  <TableRow key={tx.id}>
+                    <TableCell className="font-medium">{symbol}</TableCell>
+                    <TableCell>{typeLabels[tx.txType] || tx.txType}</TableCell>
+                    <TableCell>{tx.quantity}</TableCell>
+                    <TableCell>{tx.price}</TableCell>
+                    <TableCell>{tx.fee}</TableCell>
+                    <TableCell>{tx.txCurrency}</TableCell>
+                    <TableCell>
+                      {tx.executedAt
+                        ? new Date(tx.executedAt).toLocaleString('zh-CN')
+                        : '-'}
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}