feat: UI interaction polish — exit animations, hover effects, directional transitions
- Add AnimatedPanel component with CSS transition-based enter/exit for Profile popover and Notification panel (140ms scale+fade) - Add nav-activate-pulse animation for floating-nav active indicator (320ms glow) - Add tool-panel-fade-in crossfade when switching ecommerce tools - Add carousel-card-label slide-up-in 260ms on active carousel card - Add feature-visual img hover scale(1.03)+brightness, experience-route hover translateY(-2px) - Add community-case-card--mosaic hover scale(1.02)+shadow lift - Add directional PageTransition: forward→slideX(20px), backward→slideX(-20px) - Move vite proxy target from hardcoded IP to VITE_DEV_PROXY env variable - Add .env.example for developer onboarding Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,7 @@ import {
|
||||
} from "@ant-design/icons";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { WebNotification, WebNotificationType, WebViewKey } from "../types";
|
||||
import { AnimatedPanel } from "./AnimatedPanel";
|
||||
|
||||
const NOTIFICATION_ICONS: Record<WebNotificationType, React.ReactNode> = {
|
||||
task_completed: <CheckCircleOutlined style={{ color: "#10b981" }} />,
|
||||
@@ -115,8 +116,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
|
||||
<span className="notification-center__badge">{unreadCount > 99 ? "99+" : unreadCount}</span>
|
||||
)}
|
||||
</button>
|
||||
{open && (
|
||||
<div className="notification-center__panel">
|
||||
<AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
|
||||
<div className="notification-center__header">
|
||||
<span className="notification-center__title">通知中心</span>
|
||||
<div className="notification-center__header-actions">
|
||||
@@ -158,8 +158,7 @@ function NotificationCenter({ items, onNavigate, onMarkRead, onMarkAllRead, onCl
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatedPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user