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

Memory.md

@@ -64,4 +64,21 @@
 ## 升級 Dashboard 資產卡片 UI (Task 36)
 - 升級了 Dashboard 資產卡片 UI，新增累計分紅展示，並優化了成本數據的格式化判斷邏輯。
 - 修復了 `avgCostFormatted` 的判空邏輯，將 `Big.eq(0)` 修正為 `Big.eq('0')`，確保當 `pos.avgCost` 存在且不為 0 時能正確格式化，不再顯示 `¥-`。
-- 在資產卡片中新增「累計分紅」行，展示 `accumulatedDividendsCny` 數據，保持與其它 CNY 數據一致的 `opacity-50` 樣式。
+- 在資產卡片中新增「累計分紅」行，展示 `accumulatedDividendsCny` 數據，保持與其它 CNY 數據一致的 `opacity-50` 樣式。
+
+## 持倉引擎 Native 幣種算法重構 (Task 38)
+- 重構底層盈虧引擎，全面轉向 Native 原生幣種計算，新增浮動/累計盈虧及百分比指標。
+- 徹底分離 Native 與 CNY 計算：單隻股票的成本與盈虧全部改用 Native (原幣種) 進行計算。
+- 新增 Native 成本指標：`totalBuyCostNative` (總買入成本)、`realizedPnlNative` (已實現盈虧)、`accumulatedDividendsNative` (累計分紅)。
+- 新增 Native 成本均價：`avgCostNative = totalBuyCostNative / totalBuyQuantity`、`dilutedCostNative = (totalBuyCostNative - realizedPnlNative - accumulatedDividendsNative) / currentQuantity`。
+- 新增浮動盈虧指標：`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,90 +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>
-                    <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>

src/actions/portfolio.ts

@@ -26,6 +26,17 @@ interface Position {
   holdingDays: number;
   exchange: string;
   accumulatedDividendsCny: string;
+  accumulatedDividendsNative: string;
+  // Native 原生币种盈亏指标
+  totalBuyCostNative: string;
+  realizedPnlNative: string;
+  avgCostNative: string;
+  dilutedCostNative: string;
+  marketValueNative: string;
+  floatingPnlNative: string;
+  floatingPnlPercent: string;
+  cumulativePnlNative: string;
+  cumulativePnlPercent: string;
 }
 
 interface RawRate {
@@ -158,7 +169,9 @@ export async function getPortfolioPositions(): Promise<Position[]> {
     totalBuyQuantity: Big;
     // 已实现盈亏
     realizedPnlCny: Big;
+    realizedPnlNative: Big;
     accumulatedDividendsCny: Big;
+    accumulatedDividendsNative: Big;
     // 首次买入日期
     firstBuyDate: Date | null;
   }>();
@@ -181,7 +194,9 @@ export async function getPortfolioPositions(): Promise<Position[]> {
         totalBuyCostNative: new Big('0'),
         totalBuyQuantity: new Big('0'),
         realizedPnlCny: new Big('0'),
+        realizedPnlNative: new Big('0'),
         accumulatedDividendsCny: new Big('0'),
+        accumulatedDividendsNative: new Big('0'),
         firstBuyDate: null,
       });
     }
@@ -208,14 +223,19 @@ export async function getPortfolioPositions(): Promise<Position[]> {
         holding.firstBuyDate = new Date(tx.executedAt);
       }
     } else if (tx.txType === 'SELL') {
-      // 计算卖出时的平均成本
-      let avgCostPerUnit = new Big('0');
+      // 计算卖出时的平均成本 (Native)
+      let avgCostPerUnitNative = new Big('0');
       if (holding.totalBuyQuantity.gt(0)) {
-        avgCostPerUnit = holding.totalBuyCostCny.div(holding.totalBuyQuantity);
+        avgCostPerUnitNative = holding.totalBuyCostNative.div(holding.totalBuyQuantity);
       }
 
-      // 已实现盈亏 = (卖出价 - 平均成本) * 卖出数量 * 汇率
-      const sellRevenueCny = new Big(tx.quantity).times(new Big(tx.price));
+      // 已实现盈亏 = (卖出价 - 平均成本) * 卖出数量 (Native)
+      const sellRevenueNative = new Big(tx.quantity).times(new Big(tx.price));
+      const costBasisNative = avgCostPerUnitNative.times(new Big(tx.quantity));
+      const realizedPnlNative = sellRevenueNative.minus(costBasisNative);
+      holding.realizedPnlNative = holding.realizedPnlNative.plus(realizedPnlNative);
+
+      // 已实现盈亏 (CNY) 保留兼容
       let appliedRate = tx.exchangeRate;
       if ((!appliedRate || appliedRate === '1' || appliedRate === '1.00000000') && tx.txCurrency !== 'CNY') {
         const fallbackRate = getRate(rateMap, tx.txCurrency, 'CNY');
@@ -223,10 +243,14 @@ export async function getPortfolioPositions(): Promise<Position[]> {
           appliedRate = fallbackRate;
         }
       }
-      const sellRevenueCnyAdjusted = sellRevenueCny.times(new Big(appliedRate || '1'));
-      const costBasisCny = avgCostPerUnit.times(new Big(tx.quantity));
-      const realizedPnl = sellRevenueCnyAdjusted.minus(costBasisCny);
-      holding.realizedPnlCny = holding.realizedPnlCny.plus(realizedPnl);
+      const sellRevenueCny = new Big(tx.quantity).times(new Big(tx.price)).times(new Big(appliedRate || '1'));
+      let avgCostPerUnitCny = new Big('0');
+      if (holding.totalBuyQuantity.gt(0)) {
+        avgCostPerUnitCny = holding.totalBuyCostCny.div(holding.totalBuyQuantity);
+      }
+      const costBasisCny = avgCostPerUnitCny.times(new Big(tx.quantity));
+      const realizedPnlCny = sellRevenueCny.minus(costBasisCny);
+      holding.realizedPnlCny = holding.realizedPnlCny.plus(realizedPnlCny);
 
       holding.quantity = holding.quantity.minus(new Big(tx.quantity));
     } else if (tx.txType === 'AIRDROP') {
@@ -235,6 +259,7 @@ export async function getPortfolioPositions(): Promise<Position[]> {
       const dividendAmountNative = new Big(tx.quantity).times(new Big(tx.price));
       const dividendCny = dividendAmountNative.times(new Big(tx.exchangeRate || '1'));
       holding.accumulatedDividendsCny = holding.accumulatedDividendsCny.plus(dividendCny);
+      holding.accumulatedDividendsNative = holding.accumulatedDividendsNative.plus(dividendAmountNative);
     }
 
     if (tx.assetLatestPrice) {
@@ -255,21 +280,53 @@ export async function getPortfolioPositions(): Promise<Position[]> {
       rateMap
     );
 
-    // 未实现盈亏 = 当前市值 - 总买入成本
+    // 未实现盈亏 (CNY)
     const unrealizedPnlCny = cnyValue.minus(holding.totalBuyCostCny);
-    // 总盈亏 = 当前市值 - 总买入成本 + 已实现盈亏 + 累计分红
+    // 总盈亏 (CNY)
     const totalPnlCny = unrealizedPnlCny.plus(holding.realizedPnlCny).plus(holding.accumulatedDividendsCny);
 
-    const currentNativeValue = new Big(holding.latestPrice).times(holding.quantity);
-    const pnlNative = currentNativeValue.minus(holding.totalBuyCostNative);
+    // Native 原生币种计算
+    const marketValueNative = new Big(holding.latestPrice).times(holding.quantity);
+    const currentNativeValue = marketValueNative;
 
-    // 平均成本 = 总买入成本 / 总买入数量
+    // 平均成本 (Native) = 总买入成本 (Native) / 总买入数量
+    let avgCostNative = new Big('0');
+    if (holding.totalBuyQuantity.gt(0)) {
+      avgCostNative = holding.totalBuyCostNative.div(holding.totalBuyQuantity);
+    }
+
+    // 摊薄成本 (Native) = (总买入成本 - 已实现盈亏 - 累计分红) / 当前持仓数量
+    let dilutedCostNative = new Big('0');
+    if (holding.quantity.gt(0)) {
+      dilutedCostNative = holding.totalBuyCostNative.minus(holding.realizedPnlNative).minus(holding.accumulatedDividendsNative).div(holding.quantity);
+    }
+
+    // 浮动盈亏 (Native) = 市值 - (平均成本 * 当前持仓数量)
+    const floatingPnlNative = marketValueNative.minus(avgCostNative.times(holding.quantity));
+
+    // 浮动盈亏百分比 (Native)
+    let floatingPnlPercent = new Big('0');
+    const avgCostBasisNative = avgCostNative.times(holding.quantity);
+    if (avgCostBasisNative.gt(0)) {
+      floatingPnlPercent = floatingPnlNative.div(avgCostBasisNative).times(new Big('100'));
+    }
+
+    // 累计盈亏 (Native) = 浮动盈亏 + 已实现盈亏 + 累计分红
+    const cumulativePnlNative = floatingPnlNative.plus(holding.realizedPnlNative).plus(holding.accumulatedDividendsNative);
+
+    // 累计盈亏百分比 (Native) = 累计盈亏 / 总买入成本 * 100
+    let cumulativePnlPercent = new Big('0');
+    if (holding.totalBuyCostNative.gt(0)) {
+      cumulativePnlPercent = cumulativePnlNative.div(holding.totalBuyCostNative).times(new Big('100'));
+    }
+
+    // 平均成本 (CNY) 保留兼容
     let avgCost = new Big('0');
     if (holding.totalBuyQuantity.gt(0)) {
       avgCost = holding.totalBuyCostCny.div(holding.totalBuyQuantity);
     }
 
-    // 摊薄成本 = (总买入成本 - 已实现盈亏 - 总分红) / 当前持仓数量
+    // 摊薄成本 (CNY) 保留兼容
     let dilutedCost = new Big('0');
     if (holding.quantity.gt(0)) {
       dilutedCost = holding.totalBuyCostCny.minus(holding.realizedPnlCny).minus(holding.accumulatedDividendsCny).div(holding.quantity);
@@ -282,6 +339,9 @@ export async function getPortfolioPositions(): Promise<Position[]> {
       holdingDays = Math.max(0, Math.floor(diffMs / (1000 * 60 * 60 * 24)));
     }
 
+  // Native 原生币种总盈亏 (保留兼容)
+    const pnlNative = marketValueNative.minus(holding.totalBuyCostNative).plus(holding.accumulatedDividendsNative);
+
     result.push({
       assetId: holding.assetId,
       symbol: holding.symbol,
@@ -302,6 +362,17 @@ export async function getPortfolioPositions(): Promise<Position[]> {
       holdingDays,
       exchange: holding.exchange,
       accumulatedDividendsCny: holding.accumulatedDividendsCny.toString(),
+      accumulatedDividendsNative: holding.accumulatedDividendsNative.toString(),
+      // Native 原生币种盈亏指标
+      totalBuyCostNative: holding.totalBuyCostNative.toString(),
+      realizedPnlNative: holding.realizedPnlNative.toString(),
+      avgCostNative: avgCostNative.toString(),
+      dilutedCostNative: dilutedCostNative.toString(),
+      marketValueNative: marketValueNative.toString(),
+      floatingPnlNative: floatingPnlNative.toString(),
+      floatingPnlPercent: floatingPnlPercent.toString(),
+      cumulativePnlNative: cumulativePnlNative.toString(),
+      cumulativePnlPercent: cumulativePnlPercent.toString(),
     });
   }