feat: 统一USDC金额格式化,添加formatUSDC工具函数

- 新增 formatUSDC 函数:最多显示4位小数,自动去除尾随零(截断,不四舍五入)
- 统一导出所有工具函数到 utils/index.ts
- 替换所有页面中的USDC显示为 formatUSDC 函数
  - TemplateList.tsx
  - CopyTradingAdd.tsx
  - PositionList.tsx
  - AccountList.tsx
  - AccountDetail.tsx
  - OrderList.tsx
  - Statistics.tsx
- 更新前端开发规范,添加USDC格式化规范说明
- 统一工具函数导入方式(从 ../utils 导入)
This commit is contained in:
WrBug
2025-12-01 23:22:18 +08:00
parent fd10a31780
commit 4d322424c1
10 changed files with 156 additions and 40 deletions
+74
View File
@@ -176,6 +176,80 @@ export const useMarketStore = create<MarketStore>((set) => ({
}));
```
### USDC 金额格式化规范
- **必须**使用 `formatUSDC` 函数格式化所有 USDC 金额显示
- **禁止**直接使用 `toFixed()` 或 `parseFloat().toFixed()` 格式化 USDC
- **禁止**硬编码小数位数格式化 USDC
- 所有 USDC 金额显示必须统一使用 `formatUSDC` 函数
#### formatUSDC 函数说明
- **位置**: `src/utils/index.ts`
- **功能**: 格式化 USDC 金额,最多显示 4 位小数,自动去除尾随零(截断,不四舍五入)
- **参数**: `value: string | number | undefined | null`
- **返回值**: 格式化后的字符串,如果值为空或无效则返回 `'-'`
#### 使用示例
```typescript
// ✅ 正确:使用 formatUSDC 格式化 USDC 金额
import { formatUSDC } from '../utils'
const BalanceDisplay: React.FC<{ balance: string }> = ({ balance }) => {
return <span>{formatUSDC(balance)} USDC</span>
}
// ✅ 正确:在表格列中使用
const columns = [
{
title: '余额',
dataIndex: 'balance',
render: (balance: string) => `${formatUSDC(balance)} USDC`
}
]
// ✅ 正确:在统计组件中使用
<Statistic
title="总盈亏"
value={formatUSDC(stats?.totalPnl || '0')}
suffix="USDC"
/>
// ❌ 错误:直接使用 toFixed
const balance = parseFloat(value).toFixed(4) // 禁止
// ❌ 错误:硬编码格式化
const balance = `${parseFloat(value).toFixed(2)} USDC` // 禁止
// ❌ 错误:使用自定义格式化函数
const formatBalance = (value: string) => parseFloat(value).toFixed(4) // 禁止
```
#### 格式化规则
- **最多显示 4 位小数**:如果金额超过 4 位小数,截断到 4 位(不四舍五入)
- **自动去除尾随零**:去除不必要的尾随零和小数点
- **示例**
- `formatUSDC(1.23)` => `"1.23"`
- `formatUSDC(1.23456)` => `"1.2345"`(截断,不四舍五入)
- `formatUSDC(1.2)` => `"1.2"`
- `formatUSDC(1)` => `"1"`
- `formatUSDC(1.23459)` => `"1.2345"`(截断,不四舍五入)
- `formatUSDC(null)` => `"-"`
- `formatUSDC(undefined)` => `"-"`
#### 工具函数统一导出
- 所有工具函数统一从 `src/utils/index.ts` 导出
- **必须**从 `../utils` 导入工具函数,而不是从具体文件导入
- `ethers.ts` 中的函数也会在 `index.ts` 中统一导出
```typescript
// ✅ 正确:从 utils 统一导入
import { formatUSDC, getAddressFromPrivateKey, isValidWalletAddress } from '../utils'
// ❌ 错误:从具体文件导入
import { formatUSDC } from '../utils/index'
import { getAddressFromPrivateKey } from '../utils/ethers'
```
## 移动端适配示例
### 响应式布局