feat: 为所有数值显示添加千分位分隔符
- 重构 formatNumber 和 formatUSDC 函数,默认添加千分位分隔符 - 更新 Statistics.tsx、CopyTradingStatistics.tsx 等统计页面 - 更新 PositionList.tsx 持仓列表的数值显示 - 更新 AccountList.tsx 账户列表的余额显示 - 所有数值(金额、数量、价格等)现在默认显示千分位 - 示例:1234567.89 显示为 1,234,567.89 影响范围: - 工具函数:utils/index.ts - 统计页面:Statistics.tsx, CopyTradingStatistics.tsx - 业务页面:PositionList.tsx, AccountList.tsx Changes: - Refactored formatNumber and formatUSDC to include thousand separators by default - Updated statistics pages to display numbers with commas - Updated position list and account list for better readability - Example: 1234567.89 now displays as 1,234,567.89
This commit is contained in:
+35
-26
@@ -1,61 +1,70 @@
|
||||
/**
|
||||
* 格式化数字,自动去除尾随零
|
||||
* 格式化数字,添加千分位分隔符,自动去除尾随零
|
||||
* @param value - 数字值(字符串或数字)
|
||||
* @param maxDecimals - 最大小数位数(默认不限制)
|
||||
* @returns 格式化后的字符串,如果值为空或无效则返回 ''
|
||||
* @returns 格式化后的字符串,如 "123,456.78",如果值为空或无效则返回 ''
|
||||
* @example
|
||||
* formatNumber(1234567.89) => "1,234,567.89"
|
||||
* formatNumber(1234567.00) => "1,234,567"
|
||||
* formatNumber(1234.5678, 2) => "1,234.56"
|
||||
* formatNumber(100.00) => "100"
|
||||
* formatNumber(100.50) => "100.5"
|
||||
* formatNumber(100.55) => "100.55"
|
||||
*/
|
||||
export const formatNumber = (value: string | number | undefined | null, maxDecimals?: number): string => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return ''
|
||||
}
|
||||
|
||||
|
||||
const num = typeof value === 'string' ? parseFloat(value) : value
|
||||
if (isNaN(num)) {
|
||||
return ''
|
||||
}
|
||||
|
||||
// 如果有最大小数位数限制,先截断
|
||||
|
||||
// 处理小数位数
|
||||
let numStr: string
|
||||
if (maxDecimals !== undefined) {
|
||||
const multiplier = Math.pow(10, maxDecimals)
|
||||
const truncated = Math.floor(num * multiplier) / multiplier
|
||||
return truncated.toFixed(maxDecimals).replace(/\.?0+$/, '')
|
||||
numStr = truncated.toFixed(maxDecimals).replace(/\.?0+$/, '')
|
||||
} else {
|
||||
numStr = num.toString().replace(/\.?0+$/, '')
|
||||
}
|
||||
|
||||
// 直接转换为字符串,然后去除尾随零
|
||||
return num.toString().replace(/\.?0+$/, '')
|
||||
|
||||
// 分离整数和小数部分
|
||||
const parts = numStr.split('.')
|
||||
const integerPart = parts[0]
|
||||
const decimalPart = parts[1]
|
||||
|
||||
// 为整数部分添加千分位分隔符
|
||||
const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
|
||||
// 组合结果
|
||||
return decimalPart ? `${formattedInteger}.${decimalPart}` : formattedInteger
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化 USDC 金额
|
||||
* 格式化 USDC 金额,带千分位分隔符
|
||||
* 最多显示 4 位小数,自动去除尾随零(截断,不四舍五入)
|
||||
* @param value - 金额值(字符串或数字)
|
||||
* @returns 格式化后的字符串,如果值为空或无效则返回 '-'
|
||||
* @returns 格式化后的字符串,如 "1,234.56",如果值为空或无效则返回 '-'
|
||||
* @example
|
||||
* formatUSDC(1234.56) => "1,234.56"
|
||||
* formatUSDC(1234567.8901) => "1,234,567.8901"
|
||||
* formatUSDC(1234.00) => "1,234"
|
||||
* formatUSDC(1.23) => "1.23"
|
||||
* formatUSDC(1.23456) => "1.2345"
|
||||
* formatUSDC(1.2) => "1.2"
|
||||
* formatUSDC(1) => "1"
|
||||
*/
|
||||
export const formatUSDC = (value: string | number | undefined | null): string => {
|
||||
if (value === undefined || value === null || value === '') {
|
||||
return '-'
|
||||
}
|
||||
|
||||
|
||||
const num = typeof value === 'string' ? parseFloat(value) : value
|
||||
if (isNaN(num)) {
|
||||
return '-'
|
||||
}
|
||||
|
||||
// 使用 Math.floor 截断到4位小数(不四舍五入)
|
||||
const multiplier = Math.pow(10, 4)
|
||||
const truncated = Math.floor(num * multiplier) / multiplier
|
||||
|
||||
// 使用 toFixed(4) 确保格式一致,然后去除尾随零和小数点
|
||||
return truncated.toFixed(4).replace(/\.?0+$/, '')
|
||||
|
||||
return formatNumber(num, 4)
|
||||
}
|
||||
|
||||
// 统一导出 ethers 相关工具函数
|
||||
@@ -97,7 +106,7 @@ export const isAutoGeneratedOrderId = (orderId: string | undefined | null): bool
|
||||
/**
|
||||
* 构建 Polymarket 市场 URL
|
||||
* 对于 moneyline 市场,跳转到 moneyline 页面
|
||||
* 注意:目前无法自动判断市场是否为 moneyline,需要后端提供标识
|
||||
* 注意:目前无法自动判断市场是否为 moneyline,需要后端提供标识
|
||||
* @param marketSlug - 市场 slug(用于显示)
|
||||
* @param eventSlug - 跳转用的 slug(从 events[0].slug 获取,优先使用)
|
||||
* @param marketCategory - 市场分类(sports, crypto 等)
|
||||
@@ -114,7 +123,7 @@ export const getPolymarketUrl = (
|
||||
): string | null => {
|
||||
// 优先使用 eventSlug(跳转用的 slug)
|
||||
const slug = eventSlug || marketSlug
|
||||
|
||||
|
||||
if (slug) {
|
||||
// 如果是 moneyline 市场,跳转到 moneyline 页面
|
||||
if (isMoneyline === true) {
|
||||
@@ -123,12 +132,12 @@ export const getPolymarketUrl = (
|
||||
// 其他市场跳转到普通市场页面
|
||||
return `https://polymarket.com/event/${slug}`
|
||||
}
|
||||
|
||||
|
||||
// 如果没有 slug,使用 marketId(作为后备)
|
||||
if (marketId && marketId.startsWith('0x')) {
|
||||
return `https://polymarket.com/condition/${marketId}`
|
||||
}
|
||||
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user