✨ refactor: unify layout, adopt Semi UI Forms, dynamic presets, and fix duplicate requests
- Unify TopUp into a single-page layout and remove tabs - Replace custom inputs with Semi UI Form components (Form.Input, Form.InputNumber, Form.Slot) - Move online recharge form into the stats Card content for tighter, consistent layout - Add account stats Card with blue theme (consistent with InvitationCard style) - Remove RightStatsCard and inline the stats UI directly in RechargeCard - Change preset amount UI to horizontal quick-action Buttons; swap order with payment methods - Replace payment method Cards with Semi UI Buttons - Use Button icon prop for Alipay/WeChat/Stripe with brand colors - Use built-in Button loading; remove custom “processing...” text - Replace custom spinners with Semi UI Spin and keep Skeleton for amount loading - Wrap Redeem Code in a Card; use Typography for “Looking for a code? Buy Redeem Code” link - Show info Banner when online recharge is disabled (instead of warning) TopUp data flow and logic - Generate preset amounts from min_topup using multipliers [1,5,10,30,50,100,300,500] - Deduplicate /api/user/aff using a ref guard; fetch only once on mount - Simplify user self fetch: update context only; remove unused local states and helpers - Normalize payment method keys to alipay/wxpay/stripe and assign default colors Cleanup - Delete web/src/components/topup/RightStatsCard.jsx - Remove unused helpers and local states in index.jsx (userQuota, userDataLoading, getUsername) Dev notes - No API changes; UI/UX refactor only - Lint clean (no new linter errors) Files - web/src/components/topup/RechargeCard.jsx - web/src/components/topup/index.jsx - web/src/components/topup/InvitationCard.jsx (visual parity reference) - web/src/components/topup/RightStatsCard.jsx (removed)
This commit is contained in:
@@ -36,7 +36,7 @@ const MjLogsActions = ({
|
||||
const showSkeleton = useMinimumLoadingTime(loading);
|
||||
|
||||
const placeholder = (
|
||||
<div className="flex items-center text-orange-500 mb-2 md:mb-0">
|
||||
<div className="flex items-center mb-2 md:mb-0">
|
||||
<IconEyeOpened className="mr-2" />
|
||||
<Skeleton.Title style={{ width: 300, height: 21, borderRadius: 6 }} />
|
||||
</div>
|
||||
@@ -45,7 +45,7 @@ const MjLogsActions = ({
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full">
|
||||
<Skeleton loading={showSkeleton} active placeholder={placeholder}>
|
||||
<div className="flex items-center text-orange-500 mb-2 md:mb-0">
|
||||
<div className="flex items-center mb-2 md:mb-0">
|
||||
<IconEyeOpened className="mr-2" />
|
||||
<Text>
|
||||
{isAdminUser && showBanner
|
||||
|
||||
Reference in New Issue
Block a user