feat: UI animation enhancements across all major pages
P1 - Critical UX feedback: - Add scale-in + slide-up-in entrance animations to profile popover and notification panel - Port SmoothedProgressBar to EcommercePage (4 generation tools: clone, detail, tryOn, productSet) - Add result-reveal stagger animation to ecommerce result grids - Add heart-pop spring animation to CommunityPage favorite toggle P2 - Visual polish: - Add scroll-entrance IntersectionObserver animations for HomePage feature sections and experience section - Add chat-message-in entrance animation to WorkbenchPage message rows - Fix prefers-reduced-motion accessibility in WelcomeSplash canvas (skip animation, instant entry) P3 - CSS consolidation: - Remove conflicting .page-motion definition from legacy-pages.css (keep translateY version from legacy-components.css) - Consolidate skeleton-shimmer: remove opacity-pulse keyframe from primitives.css, unify with gradient sweep - Wire up --ease-spring token for heart-pop animation - Add :active press states (scale 0.97) to topbar buttons, brand lockup Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import { useSmoothedProgress } from "../../hooks/useSmoothedProgress";
|
||||
|
||||
interface EcommerceProgressBarProps {
|
||||
status: "idle" | "generating" | "done" | "failed" | string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
function mapStatus(status: string): "running" | "completed" | "failed" {
|
||||
if (status === "done") return "completed";
|
||||
if (status === "failed") return "failed";
|
||||
if (status === "generating" || status === "modeling") return "running";
|
||||
return "running";
|
||||
}
|
||||
|
||||
export function EcommerceProgressBar({ status, label }: EcommerceProgressBarProps) {
|
||||
const progress = mapStatus(status) === "running" ? 50 : 100;
|
||||
const smoothed = useSmoothedProgress(progress, mapStatus(status));
|
||||
|
||||
if (status === "idle") return null;
|
||||
|
||||
return (
|
||||
<div className="ecommerce-progress-bar">
|
||||
<span className="ecommerce-progress-bar__label">{label || "AI 正在生成"}</span>
|
||||
<div className="ecommerce-progress-bar__track">
|
||||
<div className="ecommerce-progress-bar__fill" style={{ width: `${smoothed}%` }} />
|
||||
</div>
|
||||
<span className="ecommerce-progress-bar__value">{smoothed}%</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user