feat(ui): 构建资产管理页面与添加资产表单,打通 Server Action 录入链路

This commit is contained in:
2026-04-27 21:35:41 +08:00
parent f160c2bdcb
commit 19e23dc933
3 changed files with 227 additions and 12 deletions
+66
View File
@@ -0,0 +1,66 @@
import { getAssets } from '@/actions/asset';
import { AddAssetDialog } from '@/components/assets/add-asset-dialog';
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table';
export default async function AssetsPage() {
const assets = await getAssets();
const typeLabels: Record<string, string> = {
STOCK: '股票',
CRYPTO: '加密货币',
CASH: '现金',
};
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold"></h1>
<AddAssetDialog />
</div>
<div className="rounded-md border">
<Table>
<TableCaption></TableCaption>
<TableHeader>
<TableRow>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
<TableHead></TableHead>
</TableRow>
</TableHeader>
<TableBody>
{assets.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-center text-muted-foreground">
"添加资产"
</TableCell>
</TableRow>
) : (
assets.map((asset) => (
<TableRow key={asset.id}>
<TableCell className="font-medium">{asset.symbol}</TableCell>
<TableCell>{typeLabels[asset.type] || asset.type}</TableCell>
<TableCell>{asset.baseCurrency}</TableCell>
<TableCell>
{asset.createdAt
? new Date(asset.createdAt).toLocaleString('zh-CN')
: '-'}
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</div>
);
}
+18 -12
View File
@@ -1,6 +1,13 @@
import { LayoutGrid, Wallet, ArrowLeftRight } from 'lucide-react';
import { ThemeToggle } from '@/components/theme-toggle';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
const navItems = [
{ href: '/dashboard', label: '总览 (Overview)', icon: LayoutGrid },
{ href: '/dashboard/assets', label: '资产 (Assets)', icon: Wallet },
{ href: '/dashboard/transactions', label: '流水 (Transactions)', icon: ArrowLeftRight },
];
export default function DashboardLayout({
children,
@@ -15,18 +22,17 @@ export default function DashboardLayout({
</div>
<nav className="flex flex-col gap-2 flex-1">
<Button variant="ghost" className="justify-start gap-2">
<LayoutGrid className="h-4 w-4" />
(Overview)
</Button>
<Button variant="ghost" className="justify-start gap-2">
<Wallet className="h-4 w-4" />
(Assets)
</Button>
<Button variant="ghost" className="justify-start gap-2">
<ArrowLeftRight className="h-4 w-4" />
(Transactions)
</Button>
{navItems.map(({ href, label, icon: Icon }) => (
<Link key={href} href={href}>
<Button
variant="ghost"
className="justify-start gap-2 w-full"
>
<Icon className="h-4 w-4" />
{label}
</Button>
</Link>
))}
</nav>
<div className="mt-auto flex justify-end">