feat(ui): Dashboard 基礎表格化重構，實裝行展開狀態管理

2026-04-28 23:58:25 +08:00 · 2026-04-28 23:58:25 +08:00 · 1c6c36b147
commit 1c6c36b147
parent cdea2ce608
3 changed files with 262 additions and 82 deletions
--- a/Memory.md
+++ b/Memory.md
@ -79,6 +79,15 @@
 - 新增累計盈虧指標：`cumulativePnlNative = floatingPnlNative + realizedPnlNative + accumulatedDividendsNative`、`cumulativePnlPercent = cumulativePnlNative / totalBuyCostNative * 100`。
 - SELL 交易的已實現盈虧計算從 CNY 基準改為 Native 基準，CNY 計算保留用於前端兼容展示。

+## Dashboard 表格化基礎重構 (Task 41)
+- Dashboard 完成表格化基礎重構，徹底移除原有的卡片網格佈局，改用 shadcn/ui Table 組件構建高密度專業券商風格主表。
+- 實裝了基於 ID 的行展開狀態管理邏輯：`useState<Record<string, boolean>>` 控制每行的展開/收起狀態，點擊行或展開按鈕觸發 `toggleExpand`。
+- 表頭嚴格對齊專業標準：名稱/代碼 | 現價 | 市值 | 持倉 | 攤薄/成本 | 浮動盈虧 | 累計盈虧 | 操作。
+- 操作列包含展開/收起指示器與「添加」按鈕，點擊打開 `AddTransactionDialog` 並預選對應資產。
+- 展開行內嵌交易記錄子表格，展示每筆交易的類型、數量、價格、手續費、幣種與日期。
+- 重構 `AddTransactionDialog` 組件支持外部控制開關（`open`/`onOpenChange`/`defaultAssetId` props），同時保持向後兼容內部狀態管理模式。
+- Dashboard 頁面轉換為客戶端組件，使用 `useEffect` 在客戶端加載組合數據。
+
 ## 全面重構資產展示 UI (Task 39)
 - UI 全面升級，復刻專業券商級數據排版，合併攤薄/成本，引入原生幣種盈虧百分比展示。
 - 徹底清理所有帶 (CNY) 和 (USD) 混雜的舊布局，所有 Native 金額根據 `baseCurrency` 渲染正確貨幣符號（USD→$、CNY/HKD→HK$、JPY→¥）。
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@ -1,14 +1,31 @@
+'use client';
+
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Button } from '@/components/ui/button';
 import { getPortfolioSummary } from '@/actions/portfolio';
+import { getAssets } from '@/actions/asset';
 import { formatQuantity, formatAmount } from '@/lib/formatters';
 import AllocationChart from '@/components/dashboard/allocation-chart';
 import { SyncButton } from '@/components/assets/sync-button';
+import { AddTransactionDialog } from '@/components/transactions/add-transaction-dialog';
+import { ChevronDown, ChevronUp, Plus, Edit3 } from 'lucide-react';
 import Big from 'big.js';

 function getCurrencySymbol(currency: string): string {
  if (currency === 'USD') return '$';
  if (currency === 'HKD') return 'HK$';
-  return '¥';
+  if (currency === 'CNY') return '¥';
+  if (currency === 'JPY') return '¥';
+  return currency + ' ';
 }

 function formatNative(value: string, baseCurrency: string): string {
@ -28,8 +45,48 @@ function formatPnl(value: string, percent: string, baseCurrency: string): { text
  return { text, className };
 }

-export default async function DashboardPage() {
-  const { positions, totalCnyValue, chartData, totalPnlCny, unrealizedPnlCny, marketAllocation } = await getPortfolioSummary();
+interface Asset {
+  id: string;
+  symbol: string;
+  name: string | null;
+  type: string;
+  baseCurrency: string;
+  exchange: string | null;
+}
+
+export default function DashboardPage() {
+  const [positions, setPositions] = useState<any[]>([]);
+  const [totalCnyValue, setTotalCnyValue] = useState('0');
+  const [totalPnlCny, setTotalPnlCny] = useState('0');
+  const [unrealizedPnlCny, setUnrealizedPnlCny] = useState('0');
+  const [marketAllocation, setMarketAllocation] = useState<any[]>([]);
+  const [assets, setAssets] = useState<Asset[]>([]);
+  const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedAssetId, setSelectedAssetId] = useState<string>('');
+
+  useEffect(() => {
+    async function loadData() {
+      const summary = await getPortfolioSummary();
+      const allAssets = await getAssets();
+      setPositions(summary.positions);
+      setTotalCnyValue(summary.totalCnyValue);
+      setTotalPnlCny(summary.totalPnlCny);
+      setUnrealizedPnlCny(summary.unrealizedPnlCny);
+      setMarketAllocation(summary.marketAllocation);
+      setAssets(allAssets as Asset[]);
+    }
+    loadData();
+  }, []);
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const handleOpenDialog = (assetId: string) => {
+    setSelectedAssetId(assetId);
+    setDialogOpen(true);
+  };

  const formattedTotal = formatAmount(totalCnyValue);
  const formattedTotalPnl = formatAmount(totalPnlCny);
@ -37,15 +94,6 @@ export default async function DashboardPage() {
  const totalPnlIsPositive = new Big(totalPnlCny).gte(0);
  const unrealizedIsPositive = new Big(unrealizedPnlCny).gte(0);

-  function DataRow({ label, value, valueClass = 'font-medium' }: { label: string; value: string; valueClass?: string }) {
-    return (
-      <div className="flex justify-between items-center">
-        <span className="text-sm text-muted-foreground">{label}</span>
-        <span className={valueClass}>{value}</span>
-      </div>
-    );
-  }
-
  return (
    <div className="space-y-6">
      <div>
@ -81,15 +129,31 @@ export default async function DashboardPage() {
        </CardContent>
      </Card>

-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {positions.length === 0 ? (
      <Card>
-            <CardContent className="pt-6">
-              <p className="text-muted-foreground">暂无持仓，请先添加资产和交易记录。</p>
-            </CardContent>
-          </Card>
+        <CardHeader>
+          <CardTitle>持仓明细</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {positions.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              暂无持仓，请先添加资产和交易记录。
+            </div>
          ) : (
-          positions.map((pos) => {
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[200px]">名称/代码</TableHead>
+                  <TableHead className="text-right">现價</TableHead>
+                  <TableHead className="text-right">市值</TableHead>
+                  <TableHead className="text-right">持倉</TableHead>
+                  <TableHead className="text-right">攤薄/成本</TableHead>
+                  <TableHead className="text-right">浮動盈虧</TableHead>
+                  <TableHead className="text-right">累計盈虧</TableHead>
+                  <TableHead className="text-right w-[120px]">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {positions.map((pos) => {
                  const symbol = getCurrencySymbol(pos.baseCurrency);
                  const latestPriceFormatted = `${symbol}${new Big(pos.latestPrice || '0').toFixed(2)}`;
                  const marketValueFormatted = formatNative(pos.marketValueNative, pos.baseCurrency);
@ -97,61 +161,146 @@ export default async function DashboardPage() {

                  const dilutedCostStr = new Big(pos.dilutedCostNative).toFixed(2);
                  const avgCostStr = new Big(pos.avgCostNative).toFixed(2);
-            const costCombined = `${dilutedCostStr} / ${avgCostStr}`;
+
+                  let costDisplay = '-';
+                  if (!new Big(pos.dilutedCostNative).eq('0') || !new Big(pos.avgCostNative).eq('0')) {
+                    costDisplay = `${dilutedCostStr} / ${avgCostStr}`;
+                  }

                  const floatingPnl = formatPnl(pos.floatingPnlNative, pos.floatingPnlPercent, pos.baseCurrency);
                  const cumulativePnl = formatPnl(pos.cumulativePnlNative, pos.cumulativePnlPercent, pos.baseCurrency);

+                  const isExpanded = !!expandedIds[pos.assetId];
+
                  return (
-              <Card key={pos.assetId} className="flex flex-col">
-                <CardHeader className="pb-3">
-                  <CardTitle className="flex items-center justify-between">
+                    <>
+                      <TableRow key={pos.assetId} className="cursor-pointer" onClick={() => toggleExpand(pos.assetId)}>
+                        <TableCell>
                          <div className="flex flex-col">
-                      <span className="text-base font-semibold">{pos.name || pos.symbol}</span>
-                      <span className="text-sm font-normal text-muted-foreground">{pos.symbol}</span>
+                            <span className="font-semibold">{pos.name || pos.symbol}</span>
+                            <span className="text-xs text-muted-foreground">{pos.symbol}</span>
                          </div>
-                    <span className="text-xs font-normal text-muted-foreground bg-muted px-2 py-0.5 rounded">
-                      {pos.baseCurrency}
+                        </TableCell>
+                        <TableCell className="text-right">{latestPriceFormatted}</TableCell>
+                        <TableCell className="text-right">{marketValueFormatted}</TableCell>
+                        <TableCell className="text-right">{quantityFormatted}</TableCell>
+                        <TableCell className="text-right">{costDisplay}</TableCell>
+                        <TableCell className={`text-right ${floatingPnl.className}`}>{floatingPnl.text}</TableCell>
+                        <TableCell className={`text-right ${cumulativePnl.className}`}>{cumulativePnl.text}</TableCell>
+                        <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+                          <div className="flex items-center justify-end gap-2">
+                            <span className="text-xs text-muted-foreground">
+                              {isExpanded ? '收起' : '展开'}
                            </span>
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="pt-2 flex-1">
-                  <div className="space-y-3">
-                    <DataRow label="现价" value={latestPriceFormatted} />
-                    <DataRow label="市值" value={marketValueFormatted} />
-                    <DataRow label="持仓" value={quantityFormatted} />
-                    <DataRow label="摊薄 / 成本" value={costCombined} />
-                    <DataRow
-                      label="浮动盈亏"
-                      value={floatingPnl.text}
-                      valueClass={`text-sm font-semibold ${floatingPnl.className}`}
-                    />
-                    <DataRow
-                      label="累计盈亏"
-                      value={cumulativePnl.text}
-                      valueClass={`text-sm font-semibold ${cumulativePnl.className}`}
-                    />
-                    <DataRow
-                      label="持仓天数"
-                      value={`${pos.holdingDays} 天`}
-                      valueClass="text-sm text-muted-foreground"
-                    />
+                            {isExpanded ? (
+                              <ChevronUp className="h-4 w-4" />
+                            ) : (
+                              <ChevronDown className="h-4 w-4" />
+                            )}
+                            <Button
+                              size="sm"
+                              variant="ghost"
+                              className="h-7 px-2 text-xs"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleOpenDialog(pos.assetId);
+                              }}
+                            >
+                              <Plus className="h-3 w-3 mr-1" />
+                              添加
+                            </Button>
                          </div>
-                </CardContent>
-              </Card>
+                        </TableCell>
+                      </TableRow>
+                      {isExpanded && (
+                        <TableRow>
+                          <TableCell colSpan={8} className="bg-muted/30 p-4">
+                            <div className="space-y-2">
+                              <div className="flex items-center justify-between">
+                                <span className="text-sm font-medium text-muted-foreground">交易記錄</span>
+                                <Button
+                                  size="sm"
+                                  variant="outline"
+                                  className="h-7 px-2 text-xs"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handleOpenDialog(pos.assetId);
+                                  }}
+                                >
+                                  <Plus className="h-3 w-3 mr-1" />
+                                  新增記錄
+                                </Button>
+                              </div>
+                              {pos.transactions && pos.transactions.length > 0 ? (
+                                <Table>
+                                  <TableHeader>
+                                    <TableRow>
+                                      <TableHead>類型</TableHead>
+                                      <TableHead className="text-right">數量</TableHead>
+                                      <TableHead className="text-right">價格</TableHead>
+                                      <TableHead className="text-right">手續費</TableHead>
+                                      <TableHead className="text-right">幣種</TableHead>
+                                      <TableHead className="text-right">日期</TableHead>
+                                    </TableRow>
+                                  </TableHeader>
+                                  <TableBody>
+                                    {pos.transactions.map((tx: any, idx: number) => {
+                                      const txDate = tx.executedAt
+                                        ? new Date(tx.executedAt).toLocaleString('zh-TW')
+                                        : '-';
+                                      return (
+                                        <TableRow key={idx}>
+                                          <TableCell>
+                                            <span className={`text-xs font-medium px-1.5 py-0.5 rounded ${
+                                              tx.txType === 'BUY' ? 'bg-red-100 text-red-700' :
+                                              tx.txType === 'SELL' ? 'bg-green-100 text-green-700' :
+                                              tx.txType === 'DIVIDEND' ? 'bg-blue-100 text-blue-700' :
+                                              'bg-gray-100 text-gray-700'
+                                            }`}>
+                                              {tx.txType}
+                                            </span>
+                                          </TableCell>
+                                          <TableCell className="text-right">{tx.quantity}</TableCell>
+                                          <TableCell className="text-right">{tx.price}</TableCell>
+                                          <TableCell className="text-right">{tx.fee || '0'}</TableCell>
+                                          <TableCell className="text-right">{tx.txCurrency}</TableCell>
+                                          <TableCell className="text-right text-xs text-muted-foreground">{txDate}</TableCell>
+                                        </TableRow>
                                      );
-          })
+                                    })}
+                                  </TableBody>
+                                </Table>
+                              ) : (
+                                <p className="text-sm text-muted-foreground">暫無交易記錄</p>
                              )}
                            </div>
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>

      <Card>
        <CardHeader>
-          <CardTitle>资产分布</CardTitle>
+          <CardTitle>資產分布</CardTitle>
        </CardHeader>
        <CardContent>
          <AllocationChart data={marketAllocation} />
        </CardContent>
      </Card>
+
+      <AddTransactionDialog
+        assets={assets}
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        defaultAssetId={selectedAssetId}
+      />
    </div>
  );
 }
--- a/src/components/transactions/add-transaction-dialog.tsx
+++ b/src/components/transactions/add-transaction-dialog.tsx
@ -32,6 +32,7 @@ import {
  SelectTrigger,
  SelectValue,
 } from '@/components/ui/select';
+
 import { Plus } from 'lucide-react';
 import { toast } from 'sonner';
 import { createTransaction } from '@/actions/transaction';
@ -60,6 +61,9 @@ interface Asset {

 interface AddTransactionDialogProps {
  assets: Asset[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultAssetId?: string;
 }

 const txTypeLabels: Record<string, string> = {
@ -77,15 +81,23 @@ const exchangeToCurrencyMap: Record<string, string> = {
  'SZSE': 'CNY',
 };

-export function AddTransactionDialog({ assets }: AddTransactionDialogProps) {
-  const [open, setOpen] = useState(false);
+export function AddTransactionDialog({ assets, open: openProp, onOpenChange, defaultAssetId }: AddTransactionDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const router = useRouter();

+  const open = openProp !== undefined ? openProp : internalOpen;
+  const setOpen = (value: boolean) => {
+    if (openProp === undefined) {
+      setInternalOpen(value);
+    }
+    onOpenChange?.(value);
+  };
+
  const form = useForm<AddTransactionForm>({
    resolver: zodResolver(addTransactionSchema),
    defaultValues: {
-      assetId: '',
+      assetId: defaultAssetId || '',
      txType: 'BUY' as const,
      quantity: '',
      price: '',
@ -97,6 +109,12 @@ export function AddTransactionDialog({ assets }: AddTransactionDialogProps) {

  const selectedAssetId = useWatch({ control: form.control, name: 'assetId' });

+  useEffect(() => {
+    if (defaultAssetId) {
+      form.setValue('assetId', defaultAssetId, { shouldValidate: true });
+    }
+  }, [defaultAssetId, form]);
+
  useEffect(() => {
    if (!selectedAssetId) return;
    const selectedAsset = assets.find((a) => a.id === selectedAssetId);
@ -128,13 +146,16 @@ export function AddTransactionDialog({ assets }: AddTransactionDialogProps) {
  }

  return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <>
+      {!openProp && (
        <DialogTrigger asChild>
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            添加流水
          </Button>
        </DialogTrigger>
+      )}
+      <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>添加交易流水</DialogTitle>
@ -322,5 +343,6 @@ export function AddTransactionDialog({ assets }: AddTransactionDialogProps) {
        </Form>
      </DialogContent>
    </Dialog>
+    </>
  );
 }