mz/video-gen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

“爆款复刻/拆镜复刻积分不足提示”

Browse Source
This commit is contained in:
sjy
2026-07-15 13:38:33 +08:00
parent 4ade6bb347
commit b1a8c3ed5a
5 changed files with 464 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
video-gen-app/src/components/Layout/AppLayout.tsx
+101 -11
View File
@@ -31,6 +31,7 @@ import {
HeartOutlined,
CameraOutlined,
CalculatorOutlined,
CaretDownOutlined,
DollarOutlined,
FireOutlined,
CloudOutlined,
@@ -126,6 +127,7 @@ const StorageCard: React.FC<{ data: ResourceCapacityData | null }> = ({ data })
<div
style={{
// marginTop: 12,
marginBottom: 12,
padding: '0 12px',
paddingTop: 6,
borderRadius: 10,
@@ -906,33 +908,59 @@ const AppLayout: React.FC = () => {
<div style={{ padding: '16px 16px', flexShrink: 0, paddingTop: 0 }}>
<Dropdown menu={{ items: userMenuItems, onClick: handleUserMenuClick }} placement="topRight" arrow>
<div style={{
<div className="user-card-container" style={{
padding: '10px 14px',
display: 'flex', alignItems: 'center',
justifyContent: 'flex-start',
gap: 12,
// padding: '10px 14px',
borderRadius: 14, cursor: 'pointer',
transition: 'all 0.25s ease',
background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.04)',
transition: 'all 0.35s cubic-bezier(0.4,0,0.2,1)',
background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%)',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.8)',
position: 'relative',
border: '1px solid rgba(99, 102, 241, 0.15)',
animation: 'cardBreath 3s ease-in-out infinite',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)';
e.currentTarget.style.boxShadow = '0 4px 16px rgba(0, 0, 0, 0.08)';
e.currentTarget.style.boxShadow = '0 8px 24px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255,255,255,0.9)';
e.currentTarget.style.transform = 'translateY(-3px) scale(1.01)';
e.currentTarget.style.borderColor = 'rgba(99, 102, 241, 0.4)';
e.currentTarget.style.animation = 'none';
e.currentTarget.querySelector('.user-card-arrow')?.classList.add('arrow-hover');
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)';
e.currentTarget.style.boxShadow = '0 2px 12px rgba(0, 0, 0, 0.04)';
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%)';
e.currentTarget.style.boxShadow = '0 2px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.8)';
e.currentTarget.style.transform = 'translateY(0) scale(1)';
e.currentTarget.style.borderColor = 'rgba(99, 102, 241, 0.15)';
e.currentTarget.style.animation = 'cardBreath 3s ease-in-out infinite';
e.currentTarget.querySelector('.user-card-arrow')?.classList.remove('arrow-hover');
}}
>
<div className="user-card-glow" style={{
position: 'absolute',
inset: -4,
borderRadius: 18,
background: 'linear-gradient(90deg, transparent 0%, rgba(99,102,241,0.15) 25%, rgba(139,92,246,0.15) 50%, rgba(99,102,241,0.15) 75%, transparent 100%)',
backgroundSize: '200% 100%',
opacity: 0.8,
animation: 'borderShimmer 2.5s linear infinite',
pointerEvents: 'none',
}} />
<Avatar size={36} icon={<UserOutlined />}
style={{
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
flexShrink: 0,
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
transition: 'all 0.35s cubic-bezier(0.4,0,0.2,1)',
position: 'relative',
zIndex: 1,
animation: 'avatarPulse 2s ease-in-out infinite',
}} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ flex: 1, minWidth: 0, position: 'relative', zIndex: 1 }}>
<div style={{ color: '#1e293b', fontSize: 16, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', letterSpacing: -0.01 }}>
{user?.username}
</div>
@@ -941,12 +969,74 @@ const AppLayout: React.FC = () => {
fontSize: 16,
fontWeight: 500,
letterSpacing: 0,
// background: 'rgba(99, 102, 241, 0.08)',
// padding: '2px 8px',
borderRadius: 6,
display: 'inline-block',
animation: 'creditGlow 1.5s ease-in-out infinite',
}}>积分: {user?.credits || 0}</div>
</div>
<div className="user-card-arrow" style={{
fontSize: 12,
color: '#6366f1',
flexShrink: 0,
position: 'relative',
zIndex: 1,
}}>
<MenuOutlined />
</div>
<style>{`
@keyframes arrowFlash {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.6;
filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.4));
}
50% {
transform: translateY(4px) scale(1.1);
opacity: 1;
filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.7));
}
}
@keyframes creditGlow {
0%, 100% {
text-shadow: 0 0 0 transparent;
}
50% {
text-shadow: 0 0 15px rgba(99, 102, 241, 0.6), 0 0 30px rgba(99, 102, 241, 0.3);
}
}
@keyframes borderShimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
@keyframes cardBreath {
0%, 100% {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255,255,255,0.8);
border-color: rgba(99, 102, 241, 0.15);
}
50% {
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.1), inset 0 1px 0 rgba(255,255,255,0.8);
border-color: rgba(99, 102, 241, 0.25);
}
}
@keyframes avatarPulse {
0%, 100% {
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
transform: scale(1);
}
50% {
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
transform: scale(1.02);
}
}
.user-card-arrow.arrow-hover {
color: #8b5cf6 !important;
transform: rotate(180deg) scale(1.15) !important;
animation: none !important;
filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.8)) !important;
}
`}</style>
</div>
</Dropdown>