feat(finance): 添加财务记录状态显示功能

- 在 API 类型定义中添加订单状态字段及其枚举值
- 更新桌面端财务记录表格界面,增加状态列并调整列宽布局
- 实现移动端财务记录表格的状态列显示和样式适配
- 添加财务记录状态的颜色标识和标签显示逻辑
- 在多语言文件中添加状态相关的翻译内容
- 修复充值组件中的金额字段引用错误
- 重构提现功能中的汇率计算逻辑,提高准确性
This commit is contained in:
JiaJun
2026-07-07 16:36:14 +08:00
parent 8721a47a61
commit 5cde1d8f6b
2 changed files with 72 additions and 40 deletions

View File

@@ -93,14 +93,17 @@ function DesktopFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<div className={'min-h-0 flex-1 rounded-md'}>
<div
className={
'grid grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)] gap-design-10 rounded-md border border-[#2B8CA3]/35 bg-[#031B24]/75 px-design-16 py-design-12 text-design-16 text-[#7ECAD1]'
}
className={cn(
'grid gap-design-10 rounded-md border border-[#2B8CA3]/35 bg-[#031B24]/75 px-design-16 py-design-12 text-design-16 text-[#7ECAD1]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
)}
>
<div>{vm.headers.orderNo}</div>
<div>{vm.headers.amount}</div>
<div>{vm.headers.bonusAmount}</div>
<div>{vm.headers.status}</div>
{vm.recordType === 'withdraw' ? <div>{vm.headers.status}</div> : null}
</div>
<div
@@ -138,9 +141,12 @@ function DesktopFinanceRecordsTab({ enabled }: { enabled: boolean }) {
>
{item ? (
<motion.div
className={
'grid h-[calc(var(--design-unit)*62)] grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)] items-center gap-design-10 rounded-md bg-[#0A4252] px-design-16 py-design-14 text-design-18 text-[#C4F2F7] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(108,205,207,0.05)]'
}
className={cn(
'grid h-[calc(var(--design-unit)*62)] items-center gap-design-10 rounded-md bg-[#0A4252] px-design-16 py-design-14 text-design-18 text-[#C4F2F7] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(108,205,207,0.05)]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.78fr)_minmax(0,0.78fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
)}
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
transition={{
@@ -157,20 +163,24 @@ function DesktopFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<div className={'truncate text-[#7CFFCF]'}>
{item.bonusAmountLabel}
</div>
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-7 py-design-3 text-design-13 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">{item.statusLabel}</span>
</span>
</div>
{vm.recordType === 'withdraw' ? (
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-7 py-design-3 text-design-13 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">
{item.statusLabel}
</span>
</span>
</div>
) : null}
</motion.div>
) : (
<DataLoadingIndicator

View File

@@ -98,12 +98,27 @@ function MobileFinanceRecordsTab({ enabled }: { enabled: boolean }) {
</div>
<div className="min-h-0 flex-1 overflow-x-auto rounded-md">
<div className="min-w-design-410">
<div className="grid grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)] gap-design-6 rounded-md border border-[#2B8CA3]/35 bg-[#031B24]/75 px-design-10 py-design-8 text-design-12 text-[#7ECAD1]">
<div
className={cn(
vm.recordType === 'withdraw'
? 'min-w-design-410'
: 'min-w-design-330',
)}
>
<div
className={cn(
'grid gap-design-6 rounded-md border border-[#2B8CA3]/35 bg-[#031B24]/75 px-design-10 py-design-8 text-design-12 text-[#7ECAD1]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
)}
>
<div>{vm.headers.orderNo}</div>
<div>{vm.headers.amount}</div>
<div>{vm.headers.bonusAmount}</div>
<div>{vm.headers.status}</div>
{vm.recordType === 'withdraw' ? (
<div>{vm.headers.status}</div>
) : null}
</div>
<div
@@ -139,7 +154,12 @@ function MobileFinanceRecordsTab({ enabled }: { enabled: boolean }) {
>
{item ? (
<motion.div
className="grid h-design-45 grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)] items-center gap-design-6 rounded-md bg-[#0A4252] px-design-10 py-design-8 text-design-12 text-[#C4F2F7] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(108,205,207,0.05)]"
className={cn(
'grid h-design-45 items-center gap-design-6 rounded-md bg-[#0A4252] px-design-10 py-design-8 text-design-12 text-[#C4F2F7] shadow-[inset_0_0_calc(var(--design-unit)*10)_rgba(108,205,207,0.05)]',
vm.recordType === 'withdraw'
? 'grid-cols-[minmax(0,1.45fr)_minmax(0,0.75fr)_minmax(0,0.75fr)_minmax(0,0.72fr)]'
: 'grid-cols-[minmax(0,1.55fr)_minmax(0,0.9fr)_minmax(0,0.9fr)]',
)}
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
transition={{
@@ -159,22 +179,24 @@ function MobileFinanceRecordsTab({ enabled }: { enabled: boolean }) {
<div className="truncate text-[#7CFFCF]">
{item.bonusAmountLabel}
</div>
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-5 py-design-2 text-design-9 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">
{item.statusLabel}
{vm.recordType === 'withdraw' ? (
<div>
<span
className={cn(
'inline-flex max-w-full items-center rounded-full border px-design-5 py-design-2 text-design-9 font-medium',
item.statusTone === 'approved'
? 'border-[#5BEA99]/35 bg-[#0F593A]/55 text-[#7CFFCF]'
: item.statusTone === 'rejected'
? 'border-[#F47C7C]/35 bg-[#5D1E24]/55 text-[#FF9C9C]'
: 'border-[#F0B44A]/35 bg-[#5D441E]/55 text-[#FFD583]',
)}
>
<span className="truncate">
{item.statusLabel}
</span>
</span>
</span>
</div>
</div>
) : null}
</motion.div>
) : (
<DataLoadingIndicator