t0ng7u
2ab2edec7b
- 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)
67 lines
2.1 KiB
React
67 lines
2.1 KiB
React
/*
|
|
Copyright (C) 2025 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Skeleton, Typography } from '@douyinfe/semi-ui';
|
|
import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
|
|
import { IconEyeOpened } from '@douyinfe/semi-icons';
|
|
import CompactModeToggle from '../../common/ui/CompactModeToggle';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const MjLogsActions = ({
|
|
loading,
|
|
showBanner,
|
|
isAdminUser,
|
|
compactMode,
|
|
setCompactMode,
|
|
t,
|
|
}) => {
|
|
const showSkeleton = useMinimumLoadingTime(loading);
|
|
|
|
const placeholder = (
|
|
<div className="flex items-center mb-2 md:mb-0">
|
|
<IconEyeOpened className="mr-2" />
|
|
<Skeleton.Title style={{ width: 300, height: 21, borderRadius: 6 }} />
|
|
</div>
|
|
);
|
|
|
|
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 mb-2 md:mb-0">
|
|
<IconEyeOpened className="mr-2" />
|
|
<Text>
|
|
{isAdminUser && showBanner
|
|
? t('当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。')
|
|
: t('Midjourney 任务记录')}
|
|
</Text>
|
|
</div>
|
|
</Skeleton>
|
|
|
|
<CompactModeToggle
|
|
compactMode={compactMode}
|
|
setCompactMode={setCompactMode}
|
|
t={t}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MjLogsActions; |