forked from 77media/video-flow
123 lines
3.2 KiB
TypeScript
123 lines
3.2 KiB
TypeScript
import { notification } from 'antd';
|
|
import { useRouter } from 'next/router';
|
|
|
|
type NotificationType = 'success' | 'info' | 'warning' | 'error';
|
|
|
|
const darkGlassStyle = {
|
|
background: 'rgba(30, 32, 40, 0.95)',
|
|
backdropFilter: 'blur(10px)',
|
|
WebkitBackdropFilter: 'blur(10px)',
|
|
border: '1px solid rgba(255, 255, 255, 0.08)',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.4)',
|
|
padding: '12px 16px',
|
|
};
|
|
|
|
const messageStyle = {
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#ffffff',
|
|
marginBottom: '6px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
};
|
|
|
|
const iconStyle = {
|
|
color: '#F6B266', // 警告图标颜色
|
|
background: 'rgba(246, 178, 102, 0.15)',
|
|
padding: '4px',
|
|
borderRadius: '6px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
const descriptionStyle = {
|
|
fontSize: '12px',
|
|
color: 'rgba(255, 255, 255, 0.65)',
|
|
marginBottom: '12px',
|
|
lineHeight: '1.5',
|
|
};
|
|
|
|
const btnStyle = {
|
|
color: 'rgb(250 173 20 / 90%)',
|
|
background: 'transparent',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
padding: 0,
|
|
fontSize: '12px',
|
|
fontWeight: 500,
|
|
textDecoration: 'underline',
|
|
textUnderlineOffset: '2px',
|
|
textDecorationColor: 'rgb(250 173 20 / 60%)',
|
|
transition: 'all 0.2s ease',
|
|
};
|
|
|
|
/**
|
|
* 显示积分不足通知
|
|
* @description 在右上角显示一个带有充值链接的积分不足提醒
|
|
*/
|
|
export const showInsufficientPointsNotification = (detail?: {
|
|
current_balance?: number;
|
|
required_tokens?: number;
|
|
message?: string;
|
|
}) => {
|
|
notification.warning({
|
|
message: null,
|
|
description: (
|
|
<div data-alt="insufficient-points-notification" style={{ minWidth: '280px' }}>
|
|
<h3 style={messageStyle}>
|
|
Insufficient credits reminder
|
|
</h3>
|
|
<p style={descriptionStyle}>
|
|
{detail?.message || 'Your credits are insufficient, please upgrade to continue.'}
|
|
{detail?.current_balance !== undefined && detail?.required_tokens !== undefined && (
|
|
<>
|
|
<br />
|
|
<span style={{ color: 'rgba(255, 255, 255, 0.85)' }}>
|
|
Current balance: {detail.current_balance} / Required: {detail.required_tokens}
|
|
</span>
|
|
</>
|
|
)}
|
|
</p>
|
|
<button
|
|
onClick={() => window.location.href = '/pricing'}
|
|
style={btnStyle}
|
|
data-alt="recharge-button"
|
|
>
|
|
Upgrade to continue →
|
|
</button>
|
|
</div>
|
|
),
|
|
duration: 0,
|
|
placement: 'topRight',
|
|
style: darkGlassStyle,
|
|
className: 'dark-glass-notification',
|
|
closeIcon: (
|
|
<button
|
|
className="hover:text-white"
|
|
style={{
|
|
background: 'transparent',
|
|
border: 'none',
|
|
padding: '2px',
|
|
cursor: 'pointer',
|
|
color: 'rgba(255, 255, 255, 0.45)',
|
|
transition: 'color 0.2s ease',
|
|
}}
|
|
>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
),
|
|
});
|
|
};
|
|
|
|
/**
|
|
* 全局配置通知样式
|
|
*/
|
|
notification.config({
|
|
maxCount: 3, // 最多同时显示3个通知
|
|
});
|