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:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user