feat(ui): 依据参考图全面重构资产展示 UI，实现纯净的原生币种数据面板

Memory.md

@@ -74,3 +74,11 @@
 - 新增浮動盈虧指標：`marketValueNative = latestPrice * currentQuantity`、`floatingPnlNative = marketValueNative - (avgCostNative * currentQuantity)`、`floatingPnlPercent = floatingPnlNative / (avgCostNative * currentQuantity) * 100`。
 - 新增累計盈虧指標：`cumulativePnlNative = floatingPnlNative + realizedPnlNative + accumulatedDividendsNative`、`cumulativePnlPercent = cumulativePnlNative / totalBuyCostNative * 100`。
 - SELL 交易的已實現盈虧計算從 CNY 基準改為 Native 基準，CNY 計算保留用於前端兼容展示。
+
+## 全面重構資產展示 UI (Task 39)
+- UI 全面升級，復刻專業券商級數據排版，合併攤薄/成本，引入原生幣種盈虧百分比展示。
+- 徹底清理所有帶 (CNY) 和 (USD) 混雜的舊布局，所有 Native 金額根據 `baseCurrency` 渲染正確貨幣符號（USD→$、CNY/HKD→HK$、JPY→¥）。
+- 資產卡片全新字段：現價、市值、持倉、攤薄/成本（合併為 `[dilutedCostNative] / [avgCostNative]` 格式）、浮動盈虧（帶百分比）、累計盈虧（帶百分比）、持倉天數。
+- 盈虧顏色遵循中國市場慣例：大於 0 顯示紅色，小於 0 顯示綠色。
+- 所有百分比保留 2 位小數，0 值正常顯示 `0.00`。
+- 卡片佈局優化為響應式 `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`。

app/dashboard/page.tsx

@@ -5,6 +5,33 @@ import AllocationChart from '@/components/dashboard/allocation-chart';
 import { SyncButton } from '@/components/assets/sync-button';
 import Big from 'big.js';
 
+function getCurrencySymbol(currency: string): string {
+  switch (currency) {
+    case 'USD': return '$';
+    case 'CNY':
+    case 'HKD': return 'HK$';
+    case 'JPY': return '¥';
+    default: return currency + ' ';
+  }
+}
+
+function formatNative(value: string, baseCurrency: string): string {
+  const symbol = getCurrencySymbol(baseCurrency);
+  const formatted = new Big(value).toFixed(2);
+  return `${symbol}${formatted}`;
+}
+
+function formatPnl(value: string, percent: string, baseCurrency: string): { text: string; className: string } {
+  const isPositive = new Big(value).gte(0);
+  const symbol = getCurrencySymbol(baseCurrency);
+  const absValue = new Big(value).abs().toFixed(2);
+  const absPercent = new Big(percent).abs().toFixed(2);
+  const sign = isPositive ? '+' : '';
+  const text = `${sign}${symbol}${absValue} (${sign}${absPercent}%)`;
+  const className = isPositive ? 'text-red-500' : 'text-green-500';
+  return { text, className };
+}
+
 export default async function DashboardPage() {
   const { positions, totalCnyValue, chartData, totalPnlCny, unrealizedPnlCny, marketAllocation } = await getPortfolioSummary();
 
@@ -14,6 +41,15 @@ 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>
@@ -28,15 +64,9 @@ export default async function DashboardPage() {
         </CardHeader>
         <CardContent className="pt-6 pb-6">
           <div className="flex items-center gap-3">
-            <span className="text-2xl font-semibold text-muted-foreground">
-              ¥
-            </span>
-            <span className="text-5xl font-bold">
-              {formattedTotal}
-            </span>
-            <span className="text-xl text-muted-foreground ml-2">
-              总资产 (CNY)
-            </span>
+            <span className="text-2xl font-semibold text-muted-foreground">¥</span>
+            <span className="text-5xl font-bold">{formattedTotal}</span>
+            <span className="text-xl text-muted-foreground ml-2">总资产 (CNY)</span>
           </div>
           <div className="mt-3 flex flex-wrap gap-4">
             <div className="flex items-center gap-2">
@@ -55,7 +85,7 @@ export default async function DashboardPage() {
         </CardContent>
       </Card>
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {positions.length === 0 ? (
           <Card>
             <CardContent className="pt-6">
@@ -64,94 +94,52 @@ export default async function DashboardPage() {
           </Card>
         ) : (
           positions.map((pos) => {
-            const posPnl = new Big(pos.pnlCny);
-            const posPnlPositive = posPnl.gte(0);
-            const formattedPosPnl = formatAmount(pos.pnlCny);
-            const formattedDividends = formatAmount(pos.accumulatedDividendsCny);
+            const symbol = getCurrencySymbol(pos.baseCurrency);
+            const latestPriceFormatted = `${symbol}${new Big(pos.latestPrice || '0').toFixed(2)}`;
+            const marketValueFormatted = formatNative(pos.marketValueNative, pos.baseCurrency);
+            const quantityFormatted = formatQuantity(pos.quantity, pos.type);
 
-            const posPnlNative = new Big(pos.pnlNative);
-            const posPnlNativePositive = posPnlNative.gte(0);
+            const dilutedCostStr = new Big(pos.dilutedCostNative).toFixed(2);
+            const avgCostStr = new Big(pos.avgCostNative).toFixed(2);
+            const costCombined = `${dilutedCostStr} / ${avgCostStr}`;
 
-            const avgCostFormatted = !new Big(pos.avgCost).eq('0') ? formatAmount(pos.avgCost) : '-';
-            const dilutedCostFormatted = !new Big(pos.dilutedCost).eq(0) && pos.dilutedCost !== '0' ? formatAmount(pos.dilutedCost) : '-';
+            const floatingPnl = formatPnl(pos.floatingPnlNative, pos.floatingPnlPercent, pos.baseCurrency);
+            const cumulativePnl = formatPnl(pos.cumulativePnlNative, pos.cumulativePnlPercent, pos.baseCurrency);
 
             return (
-              <Card key={pos.assetId}>
-                <CardHeader>
+              <Card key={pos.assetId} className="flex flex-col">
+                <CardHeader className="pb-3">
                   <CardTitle className="flex items-center justify-between">
                     <div className="flex flex-col">
-                      <span>{pos.name || pos.symbol}</span>
+                      <span className="text-base font-semibold">{pos.name || pos.symbol}</span>
                       <span className="text-sm font-normal text-muted-foreground">{pos.symbol}</span>
                     </div>
-                    <span className="text-sm font-normal text-muted-foreground">
-                      {pos.type}
+                    <span className="text-xs font-normal text-muted-foreground bg-muted px-2 py-0.5 rounded">
+                      {pos.baseCurrency}
                     </span>
                   </CardTitle>
                 </CardHeader>
-                <CardContent>
-                  <div className="space-y-2">
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">持仓数量</span>
-                      <span className="font-medium">
-                        {formatQuantity(pos.quantity, pos.type)}
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">结算币种</span>
-                      <span className="font-medium">{pos.baseCurrency}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">平均成本</span>
-                      <span className="font-medium">
-                        ¥{avgCostFormatted}
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">摊薄成本</span>
-                      <span className="font-medium">
-                        ¥{dilutedCostFormatted}
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">持仓天数</span>
-                      <span className="font-medium">
-                        {pos.holdingDays} 天
-                      </span>
-                    </div>
-                    {pos.baseCurrency !== 'CNY' && (
-                      <>
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">持仓成本 ({pos.baseCurrency})</span>
-                          <span className="font-medium">
-                            {formatAmount(pos.totalCostNative)}
-                          </span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-muted-foreground">当前盈亏 ({pos.baseCurrency})</span>
-                          <span className={`font-semibold ${posPnlNativePositive ? 'text-green-500' : 'text-red-500'}`}>
-                            {posPnlNativePositive ? '+' : ''}{formatAmount(pos.pnlNative)}
-                          </span>
-                        </div>
-                      </>
-                    )}
-                    <div className="flex justify-between opacity-50">
-                      <span className="text-muted-foreground">投入本金 (CNY)</span>
-                      <span className="font-medium">
-                        ¥{formatAmount(pos.totalCostCny)}
-                      </span>
-                    </div>
-                    <div className="flex justify-between opacity-50">
-                      <span className="text-muted-foreground">综合总盈亏 (CNY)</span>
-                      <span className={`font-semibold ${posPnlPositive ? 'text-green-500' : 'text-red-500'}`}>
-                        {posPnlPositive ? '+' : ''}{formattedPosPnl}
-                      </span>
-                    </div>
-                    <div className="flex justify-between opacity-50">
-                      <span className="text-muted-foreground">累計分紅</span>
-                      <span className="font-medium">
-                        {formattedDividends}
-                      </span>
-                    </div>
+                <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"
+                    />
                   </div>
                 </CardContent>
               </Card>