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>

.env.example

@@ -0,0 +1,8 @@
+# Dev proxy target — the backend API server
+VITE_DEV_PROXY=http://47.110.225.76:3600
+
+# Key server URL for auth/profile endpoints
+VITE_KEY_SERVER_URL=
+
+# Main API base URL (used when not served from omniai.net.cn)
+VITE_API_BASE_URL=

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 ? (
+                <AnimatedPanel open={session ? profileOpen : false} className="profile-popover panel-surface">
-                  <div 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>
+                  </AnimatedPanel>
-                ) : null}
               </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 && (
+      <AnimatedPanel open={open} className="notification-center__panel" exitDuration={140}>
-        <div className="notification-center__panel">
           <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>
   );

src/features/ecommerce/EcommercePage.tsx

@@ -2819,7 +2819,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
         <aside
           id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
-          className="product-clone-panel"
+          className={`product-clone-panel tool-panel-enter`}
+          key={activeTool}
           aria-label={`${pageLabel}参数`}
           aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
         >

src/features/home/HomePage.tsx

@@ -266,6 +266,7 @@ function HomePage({ onOpenGenerate, onOpenEcommerce, onOpenScriptReview, onOpenT
                       }}
                     >
                       <img src={slide.imageUrl} alt={slide.title} />
+                      {isActive ? <span className="omni-home__carousel-card-label slide-up-in-260">{slide.title}</span> : null}
                     </button>
                   );
                 })}

src/styles/components/legacy-components.css

@@ -49,8 +49,6 @@
   box-shadow: var(--shadow-elevated);
   backdrop-filter: none;
   transform-origin: top right;
-  animation: scale-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both,
-             slide-up-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
 .profile-popover__head {

src/styles/components/motion.css

@@ -34,6 +34,11 @@
   }
 }
 
+/* 260ms variant for carousel labels */
+.slide-up-in-260 {
+  animation: slide-up-in 260ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 @keyframes backdrop-in {
   from { opacity: 0; }
   to { opacity: 1; }
@@ -111,6 +116,36 @@
   animation: chat-message-in 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
+/* AnimatedPanel: CSS transition-based enter/exit for popovers */
+.animated-panel {
+  opacity: 0;
+  transform: scale(0.95) translateY(8px);
+  transition:
+    opacity 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+    transform 140ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
+  pointer-events: none;
+}
+
+.animated-panel.is-visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+
+/* Ecommerce tool panel crossfade on tool switch */
+@keyframes tool-panel-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.tool-panel-enter {
+  animation: tool-panel-fade-in 180ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 /* Stagger utility: apply to parent, children get delayed entrance */
 .motion-stagger > * {
   animation: list-item-in 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;

src/styles/components/page-transition.css

@@ -15,3 +15,56 @@
     transform: translateY(0);
   }
 }
+
+/* Directional page transitions */
+.page-motion--enter.is-forward {
+  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.page-motion--enter.is-backward {
+  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.page-motion--exit.is-forward {
+  animation: page-slide-out-forward 180ms ease both;
+}
+
+.page-motion--exit.is-backward {
+  animation: page-slide-out-backward 180ms ease both;
+}
+
+@keyframes page-slide-in-forward {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes page-slide-in-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes page-slide-out-forward {
+  to {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+}
+
+@keyframes page-slide-out-backward {
+  to {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}

src/styles/pages/home.css

@@ -405,6 +405,21 @@
   transform: translateZ(20px) scale(1.02);
 }
 
+.omni-home__carousel-card-label {
+  position: absolute;
+  bottom: 12px;
+  left: 14px;
+  z-index: 2;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: rgba(var(--accent-rgb, 0, 255, 136), 0.16);
+  border: 1px solid rgba(var(--accent-rgb, 0, 255, 136), 0.24);
+  color: var(--fg-body, #f3f5f2);
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
 .omni-home__carousel-card:hover {
   box-shadow:
     0 28px 58px rgb(0 0 0 / 34%),
@@ -570,6 +585,13 @@
   object-position: center;
   transform: none;
   transform-origin: center;
+  transition: transform 280ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              filter 280ms ease;
+}
+
+.omni-home__feature-visual:hover img {
+  transform: scale(1.03);
+  filter: saturate(1.1) contrast(1.06) brightness(1.04);
 }
 
 .omni-home__feature-stats {
@@ -721,6 +743,14 @@
   padding: 16px 18px;
   box-shadow: 0 20px 46px rgb(0 0 0 / 26%);
   backdrop-filter: blur(12px);
+  cursor: pointer;
+  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              box-shadow 200ms ease;
+}
+
+.omni-home__experience-route:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 24px 52px rgb(0 0 0 / 32%);
 }
 
 .omni-home__experience-route b {

src/styles/pages/legacy-pages.css

@@ -14852,8 +14852,6 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  animation: scale-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both,
-             slide-up-in 150ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
 .notification-center__header {

src/styles/shell/app-shell.css

@@ -495,6 +495,15 @@
   box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34);
 }
 
+@keyframes nav-activate-pulse {
+  0% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34), 0 0 8px rgba(var(--accent-rgb), 0.25); }
+  100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.34); }
+}
+
+.floating-nav__button.nav-just-activated {
+  animation: nav-activate-pulse 320ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 .floating-nav__button:hover .floating-nav__label,
 .floating-nav__button:focus-visible .floating-nav__label,
 .floating-nav__button.is-active .floating-nav__label {

src/styles/themes/dark-green.css

@@ -3990,6 +3990,13 @@
   isolation: isolate;
   break-inside: avoid;
   aspect-ratio: 4 / 5;
+  transition: transform 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
+              box-shadow 200ms ease;
+}
+
+.web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--mosaic:hover {
+  transform: scale(1.02);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
 }
 
 .web-shell[data-ui-theme="dark-green"] .community-page .community-case-card--tile-0,

vite.config.ts

@@ -1,45 +1,49 @@
 import react from "@vitejs/plugin-react";
 import { compression } from "vite-plugin-compression2";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [
+  const env = loadEnv(mode, process.cwd(), "");
-    react(),
+
-    compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
+  return {
-  ],
+    plugins: [
-  server: {
+      react(),
-    port: 5174,
+      compression({ algorithms: ["gzip", "brotliCompress"], threshold: 1024 }),
-    host: "127.0.0.1",
+    ],
-    proxy: {
+    server: {
-      "/api": {
+      port: 5174,
-        target: "http://47.110.225.76:3600",
+      host: "127.0.0.1",
-        changeOrigin: true,
+      proxy: {
-      },
+        "/api": {
-    },
+          target: env.VITE_DEV_PROXY || "http://47.110.225.76:3600",
-  },
+          changeOrigin: true,
-  preview: {
-    port: 4174,
-    host: "127.0.0.1",
-  },
-  esbuild: {
-    drop: ["debugger"],
-  },
-  build: {
-    sourcemap: "hidden",
-    rollupOptions: {
-      output: {
-        manualChunks(id: string) {
-          if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
-            return "vendor-react";
-          }
-          if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
-            return "vendor-antd";
-          }
-          if (id.includes("node_modules/@xyflow")) {
-            return "vendor-xyflow";
-          }
         },
       },
     },
-  },
+    preview: {
-});
+      port: 4174,
+      host: "127.0.0.1",
+    },
+    esbuild: {
+      drop: ["console", "debugger"],
+    },
+    build: {
+      sourcemap: "hidden",
+      rollupOptions: {
+        output: {
+          manualChunks(id: string) {
+            if (id.includes("node_modules/react") || id.includes("node_modules/react-dom") || id.includes("node_modules/scheduler")) {
+              return "vendor-react";
+            }
+            if (id.includes("node_modules/@ant-design") || id.includes("node_modules/antd") || id.includes("node_modules/rc-")) {
+              return "vendor-antd";
+            }
+            if (id.includes("node_modules/@xyflow")) {
+              return "vendor-xyflow";
+            }
+          },
+        },
+      },
+    },
+  };
+});