feat: Add topup billing history with admin manual completion

Implement comprehensive topup billing system with user history viewing and admin management capabilities.

## Features Added

### Frontend
- Add topup history modal with paginated billing records
- Display order details: trade number, payment method, amount, money, status, create time
- Implement empty state with proper illustrations
- Add payment method column with localized display (Stripe, Alipay, WeChat)
- Add admin manual completion feature for pending orders
- Add Coins icon for recharge amount display
- Integrate "Bills" button in RechargeCard header
- Optimize code quality by using shared utility functions (isAdmin)
- Extract constants for status and payment method mappings
- Use React.useMemo for performance optimization

### Backend
- Create GET `/api/user/topup/self` endpoint for user topup history with pagination
- Create POST `/api/user/topup/complete` endpoint for admin manual order completion
- Add `payment_method` field to TopUp model for tracking payment types
- Implement `GetUserTopUps` method with proper pagination and ordering
- Implement `ManualCompleteTopUp` with transaction safety and row-level locking
- Add application-level mutex locks to prevent concurrent order processing
- Record payment method in Epay and Stripe payment flows
- Ensure idempotency and data consistency with proper error handling

### Internationalization
- Add i18n keys for Chinese (zh), English (en), and French (fr)
- Support for billing-related UI text and status messages

## Technical Improvements
- Use database transactions with FOR UPDATE row-level locking
- Implement sync.Map-based mutex for order-level concurrency control
- Proper error handling and user-friendly toast notifications
- Follow existing codebase patterns for empty states and modals
- Maintain code quality with extracted render functions and constants

## Files Changed
- Backend: controller/topup.go, controller/topup_stripe.go, model/topup.go, router/api-router.go
- Frontend: web/src/components/topup/modals/TopupHistoryModal.jsx (new), web/src/components/topup/RechargeCard.jsx, web/src/components/topup/index.jsx
- i18n: web/src/i18n/locales/{zh,en,fr}.json
This commit is contained in:
Apple\Apple
2025-10-07 00:22:45 +08:00
parent 5640cfa44e
commit dec3a32397
34 changed files with 2354 additions and 1571 deletions

View File

@@ -18,7 +18,16 @@ For commercial licensing, please contact support@quantumnous.com
*/
import React, { useEffect, useState, useRef } from 'react';
import { Button, Col, Form, Row, Spin, DatePicker, Typography, Modal } from '@douyinfe/semi-ui';
import {
Button,
Col,
Form,
Row,
Spin,
DatePicker,
Typography,
Modal,
} from '@douyinfe/semi-ui';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import {
@@ -90,40 +99,58 @@ export default function SettingsLog(props) {
const targetTime = targetDate.format('YYYY-MM-DD HH:mm:ss');
const currentTime = now.format('YYYY-MM-DD HH:mm:ss');
const daysDiff = now.diff(targetDate, 'day');
Modal.confirm({
title: t('确认清除历史日志'),
content: (
<div style={{ lineHeight: '1.8' }}>
<p>
<Text>{t('当前时间')}</Text>
<Text strong style={{ color: '#52c41a' }}>{currentTime}</Text>
<Text strong style={{ color: '#52c41a' }}>
{currentTime}
</Text>
</p>
<p>
<Text>{t('选择时间')}</Text>
<Text strong type="danger">{targetTime}</Text>
<Text strong type='danger'>
{targetTime}
</Text>
{daysDiff > 0 && (
<Text type="tertiary"> ({t('约')} {daysDiff} {t('天前')})</Text>
<Text type='tertiary'>
{' '}
({t('约')} {daysDiff} {t('天前')})
</Text>
)}
</p>
<div style={{
background: '#fff7e6',
border: '1px solid #ffd591',
padding: '12px',
borderRadius: '4px',
marginTop: '12px',
color: '#333'
}}>
<Text strong style={{ color: '#d46b08' }}> {t('注意')}</Text>
<div
style={{
background: '#fff7e6',
border: '1px solid #ffd591',
padding: '12px',
borderRadius: '4px',
marginTop: '12px',
color: '#333',
}}
>
<Text strong style={{ color: '#d46b08' }}>
{t('注意')}
</Text>
<Text style={{ color: '#333' }}>{t('将删除')} </Text>
<Text strong style={{ color: '#cf1322' }}>{targetTime}</Text>
<Text strong style={{ color: '#cf1322' }}>
{targetTime}
</Text>
{daysDiff > 0 && (
<Text style={{ color: '#8c8c8c' }}> ({t('约')} {daysDiff} {t('天前')})</Text>
<Text style={{ color: '#8c8c8c' }}>
{' '}
({t('约')} {daysDiff} {t('天前')})
</Text>
)}
<Text style={{ color: '#333' }}> {t('之前的所有日志')}</Text>
</div>
<p style={{ marginTop: '12px' }}>
<Text type="danger">{t('此操作不可恢复,请仔细确认时间后再操作!')}</Text>
<Text type='danger'>
{t('此操作不可恢复,请仔细确认时间后再操作!')}
</Text>
</p>
</div>
),
@@ -203,10 +230,18 @@ export default function SettingsLog(props) {
});
}}
/>
<Text type="tertiary" size="small" style={{ display: 'block', marginTop: 4, marginBottom: 8 }}>
<Text
type='tertiary'
size='small'
style={{ display: 'block', marginTop: 4, marginBottom: 8 }}
>
{t('将清除选定时间之前的所有日志')}
</Text>
<Button size='default' type='danger' onClick={onCleanHistoryLog}>
<Button
size='default'
type='danger'
onClick={onCleanHistoryLog}
>
{t('清除历史日志')}
</Button>
</Spin>