github/new-api
1
0
Fork 0
mirror of https://github.com/QuantumNous/new-api.git synced 2026-04-23 20:28:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ style(Account UX): resilient binding layout, copyable popovers, pastel header, and custom pay colors

Browse Source 
- AccountManagement.js
  - Prevent action button from shifting when account IDs are long by adding gap, min-w-0, and flex-shrink-0; keep buttons in a fixed position.
  - Add copyable Popover for account identifiers (email/GitHub/OIDC/Telegram/LinuxDO) using Typography.Paragraph with copyable; reveal full text on hover.
  - Ensure ellipsis works by rendering the popover trigger as `block max-w-full truncate`.
  - Import Popover and wire up `renderAccountInfo` across all binding rows.

- UserInfoHeader.js
  - Apply unified `with-pastel-balls` background to match PricingVendorIntro.
  - Remove legacy absolute-positioned circles and top gradient bar to avoid visual overlap.

- RechargeCard.jsx
  - Colorize non-Alipay/WeChat/Stripe payment icons using backend `pay_methods[].color`; fallback to `var(--semi-color-text-2)`.
  - Add `showClear` to the redemption code input for quicker clearing.

Notes:
- No linter errors introduced.
- i18n strings and behavior remain unchanged except for improved UX and visual consistency.
This commit is contained in:
t0ng7u
2025-08-17 11:45:55 +08:00
parent a6ad49dba0
commit c123ea3179
8 changed files with 208 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/topup/modals/PaymentConfirmModal.jsx
View File

@@ -24,7 +24,7 @@ import {
Card,
Skeleton,
} from '@douyinfe/semi-ui';
import { SiAlipay, SiWechat } from 'react-icons/si';
import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
import { CreditCard } from 'lucide-react';
const { Text } = Typography;
@@ -86,11 +86,13 @@ const PaymentConfirmModal = ({
return (
<>
{payMethod.type === 'zfb' ? (
<SiAlipay className='mr-2' size={16} />
<SiAlipay className='mr-2' size={16} color="#1677FF" />
) : payMethod.type === 'wx' ? (
<SiWechat className='mr-2' size={16} />
<SiWechat className='mr-2' size={16} color="#07C160" />
) : payMethod.type === 'stripe' ? (
<SiStripe className='mr-2' size={16} color="#635BFF" />
) : (
<CreditCard className='mr-2' size={16} />
<CreditCard className='mr-2' size={16} color={payMethod.color || 'var(--semi-color-text-2)'} />
)}
<Text className='text-slate-900 dark:text-slate-100'>{payMethod.name}</Text>
</>
@@ -100,21 +102,21 @@ const PaymentConfirmModal = ({
if (payWay === 'zfb') {
return (
<>
<SiAlipay className='mr-2' size={16} />
<SiAlipay className='mr-2' size={16} color="#1677FF" />
<Text className='text-slate-900 dark:text-slate-100'>{t('支付宝')}</Text>
</>
);
} else if (payWay === 'stripe') {
return (
<>
<CreditCard className='mr-2' size={16} />
<SiStripe className='mr-2' size={16} color="#635BFF" />
<Text className='text-slate-900 dark:text-slate-100'>Stripe</Text>
</>
);
} else {
return (
<>
<SiWechat className='mr-2' size={16} />
<SiWechat className='mr-2' size={16} color="#07C160" />
<Text className='text-slate-900 dark:text-slate-100'>{t('微信')}</Text>
</>
);