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>

src/components/AnimatedPanel.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+
+interface AnimatedPanelProps {
+  open: boolean;
+  children: ReactNode;
+  className?: string;
+  /** Duration in ms for the exit animation before unmounting. */
+  exitDuration?: number;
+}
+
+export function AnimatedPanel({ open, children, className, exitDuration = 140 }: AnimatedPanelProps) {
+  const [mounted, setMounted] = useState(open);
+  const [visible, setVisible] = useState(open);
+  const timerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setVisible(true);
+        });
+      });
+    } else {
+      setVisible(false);
+      timerRef.current = window.setTimeout(() => {
+        setMounted(false);
+        timerRef.current = null;
+      }, exitDuration);
+    }
+  }, [open, exitDuration]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div
+      className={`${className ?? ""} animated-panel${visible ? " is-visible" : ""}`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/AppShell.tsx

@@ -16,6 +16,7 @@ import { canManageCommunityCases, canReviewCommunity } from "../features/communi
 import type { WebNavItem, WebNotification, WebUsageSummary, WebUserSession, WebViewKey } from "../types";
 import NotificationCenter from "./NotificationCenter";
 import { RechargeModal } from "./RechargeModal/RechargeModal";
+import { AnimatedPanel } from "./AnimatedPanel";
 
 interface AppShellProps {
   activeView: WebViewKey;
@@ -61,6 +62,8 @@ function AppShell({
   const [profileOpen, setProfileOpen] = useState(false);
   const [rechargeOpen, setRechargeOpen] = useState(false);
   const [openSubmenuKey, setOpenSubmenuKey] = useState<WebViewKey | null>(null);
+  const prevActiveViewRef = useRef<WebViewKey>(activeView);
+  const [navJustActivated, setNavJustActivated] = useState<WebViewKey | null>(null);
   const isAuthView = activeView === "login";
   const isImmersiveView = activeView === "agent" || activeView === "avatarConsole";
   const showFloatingNav = !isAuthView && !isImmersiveView && activeView !== "home";
@@ -100,6 +103,15 @@ function AppShell({
     [navItems],
   );
 
+  useEffect(() => {
+    if (activeView !== prevActiveViewRef.current) {
+      setNavJustActivated(activeView);
+      prevActiveViewRef.current = activeView;
+      const timer = window.setTimeout(() => setNavJustActivated(null), 320);
+      return () => window.clearTimeout(timer);
+    }
+  }, [activeView]);
+
   useEffect(() => {
     if (typeof document === "undefined") {
       return;
@@ -223,8 +235,8 @@ function AppShell({
                   <button
                     type="button"
                     className={`floating-nav__button${isActive ? " is-active" : ""}${
-                      workspaceExpanded && index === 3 ? " has-divider" : ""
-                    }`}
+                      navJustActivated === item.key ? " nav-just-activated" : ""
+                    }${workspaceExpanded && index === 3 ? " has-divider" : ""}`}
                     title={`${item.label} / ${item.hint}`}
                     aria-label={item.label}
                     onClick={() => onSelectView(item.children?.[0]?.key ?? item.key)}
@@ -330,8 +342,7 @@ function AppShell({
                     </>
                   )}
                 </button>
-                {session && profileOpen ? (
-                  <div className="profile-popover panel-surface">
+                <AnimatedPanel open={session ? profileOpen : false} className="profile-popover panel-surface">
                     <div className="profile-popover__head">
                       <span className="profile-popover__avatar">
                         {avatarUrl ? <img src={avatarUrl} alt={displayName} /> : avatarLabel}
@@ -410,8 +421,7 @@ function AppShell({
                         </button>
                       </>
                     ) : null}
-                  </div>
-                ) : null}
+                  </AnimatedPanel>
               </div>
             </div>
             </header>

src/components/NotificationCenter.tsx

@@ -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>
   );
 }

src/components/PageTransition.tsx

@@ -7,9 +7,40 @@ interface PageTransitionProps {
 
 const EXIT_DURATION_MS = 180;
 
+const NAV_ORDER: string[] = [
+  "home",
+  "workbench",
+  "ecommerce",
+  "ecommerceTemplates",
+  "sizeTemplate",
+  "canvas",
+  "scriptTokens",
+  "tokenUsage",
+  "community",
+  "assets",
+  "more",
+  "imageWorkbench",
+  "resolutionUpscale",
+  "watermarkRemoval",
+  "subtitleRemoval",
+  "digitalHuman",
+  "avatarConsole",
+  "characterMix",
+  "agent",
+  "settings",
+  "login",
+  "profile",
+  "report",
+];
+
+function getNavIndex(key: string): number {
+  return NAV_ORDER.indexOf(key);
+}
+
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
+  const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -18,6 +49,15 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
       setDisplayedChildren(children);
       return;
     }
+    const prevIndex = getNavIndex(prevKeyRef.current);
+    const nextIndex = getNavIndex(viewKey);
+    if (prevIndex < nextIndex) {
+      setDirection("forward");
+    } else if (prevIndex > nextIndex) {
+      setDirection("backward");
+    } else {
+      setDirection("neutral");
+    }
     prevKeyRef.current = viewKey;
     setPhase("exit");
     timerRef.current = setTimeout(() => {
@@ -27,8 +67,10 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
+  const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
+
   return (
-    <div className={phase === "exit" ? "page-transition-wrap page-motion--exit" : "page-transition-wrap"}>
+    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
       {displayedChildren}
     </div>
   );