forked from 77media/video-flow
109 lines
2.7 KiB
TypeScript
109 lines
2.7 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 = () => {
|
||
notification.warning({
|
||
message: null,
|
||
description: (
|
||
<div data-alt="insufficient-points-notification" style={{ minWidth: '280px' }}>
|
||
<h3 style={messageStyle}>
|
||
积分不足提醒
|
||
</h3>
|
||
<p style={descriptionStyle}>您的积分余额不足，无法继续使用该功能</p>
|
||
<button
|
||
onClick={() => window.location.href = '/pricing'}
|
||
style={btnStyle}
|
||
data-alt="recharge-button"
|
||
>
|
||
立即充值/升级会员 →
|
||
</button>
|
||
</div>
|
||
),
|
||
duration: 5,
|
||
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个通知
|
||
});
|