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:
2026-06-02 18:31:39 +08:00
parent 93a538d51d
commit 6b9953625e
15 changed files with 304 additions and 55 deletions
+3 -4
View File
@@ -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>
);
}