style(ui): 规范红涨绿跌视觉习惯,并移除盈亏数值多余的正号

This commit is contained in:
kennethcheng 2026-04-29 01:16:51 +08:00
parent 579b09841f
commit 1b947d563a
2 changed files with 11 additions and 6 deletions

View File

@ -78,6 +78,12 @@
- 利用 `Big.js` 剥离了流水明细中无意义的尾随零,提升了高精度数据的可读性。 - 利用 `Big.js` 剥离了流水明细中无意义的尾随零,提升了高精度数据的可读性。
- 在 `app/dashboard/page.tsx` 的流水明細子表格中,将 `tx.quantity`、`tx.price`、`tx.fee` 的渲染逻辑改为 `new Big(value).toString()`,安全剥离因数据库 `numeric(36,18)` 配置导致的如 `0.041000000000000000` 这类冗余尾随零。 - 在 `app/dashboard/page.tsx` 的流水明細子表格中,将 `tx.quantity`、`tx.price`、`tx.fee` 的渲染逻辑改为 `new Big(value).toString()`,安全剥离因数据库 `numeric(36,18)` 配置导致的如 `0.041000000000000000` 这类冗余尾随零。
## 盈亏红绿视觉规范 (Task 42c)
- 依据中文金融习惯(红涨绿跌),规范了盈亏数值的颜色与正负号显示。
- 移除了 `formatPnl()` 函数及概览行内硬编码拼接的 `+` 号前缀,正收益直接展示数值,负收益保留原生 `-` 号。
- 统一颜色逻辑:值 `> 0` 应用 `text-red-500`(红色),值 `< 0` 应用 `text-green-500`(绿色),值 `=== 0` 使用默认文字颜色。
- 括号内的百分比同步遵循相同逻辑,格式如 `$2447.48 (114.20%)`
## 持倉引擎 Native 幣種算法重構 (Task 38) ## 持倉引擎 Native 幣種算法重構 (Task 38)
- 重構底層盈虧引擎,全面轉向 Native 原生幣種計算,新增浮動/累計盈虧及百分比指標。 - 重構底層盈虧引擎,全面轉向 Native 原生幣種計算,新增浮動/累計盈虧及百分比指標。
- 徹底分離 Native 與 CNY 計算:單隻股票的成本與盈虧全部改用 Native (原幣種) 進行計算。 - 徹底分離 Native 與 CNY 計算:單隻股票的成本與盈虧全部改用 Native (原幣種) 進行計算。

View File

@ -57,8 +57,7 @@ function formatPnl(value: string, percent: string, baseCurrency: string): { text
const symbol = getCurrencySymbol(baseCurrency); const symbol = getCurrencySymbol(baseCurrency);
const absValue = new Big(value).abs().toFixed(2); const absValue = new Big(value).abs().toFixed(2);
const absPercent = new Big(percent).abs().toFixed(2); const absPercent = new Big(percent).abs().toFixed(2);
const sign = isPositive ? '+' : ''; const text = `${symbol}${absValue} (${absPercent}%)`;
const text = `${sign}${symbol}${absValue} (${sign}${absPercent}%)`;
const className = isPositive ? 'text-red-500' : 'text-green-500'; const className = isPositive ? 'text-red-500' : 'text-green-500';
return { text, className }; return { text, className };
} }
@ -157,14 +156,14 @@ export default function DashboardPage() {
<div className="mt-3 flex flex-wrap gap-4"> <div className="mt-3 flex flex-wrap gap-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">:</span> <span className="text-sm text-muted-foreground">:</span>
<span className={`text-lg font-semibold ${unrealizedIsPositive ? 'text-green-500' : 'text-red-500'}`}> <span className={`text-lg font-semibold ${unrealizedIsPositive ? 'text-red-500' : 'text-green-500'}`}>
{unrealizedIsPositive ? '+' : ''}{formattedUnrealized} {formattedUnrealized}
</span> </span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">:</span> <span className="text-sm text-muted-foreground">:</span>
<span className={`text-lg font-semibold ${totalPnlIsPositive ? 'text-green-500' : 'text-red-500'}`}> <span className={`text-lg font-semibold ${totalPnlIsPositive ? 'text-red-500' : 'text-green-500'}`}>
{totalPnlIsPositive ? '+' : ''}{formattedTotalPnl} {formattedTotalPnl}
</span> </span>
</div> </div>
</div> </div>