From 13a7c3ba5a19e9ea4613f80b152ae68b64ae5701 Mon Sep 17 00:00:00 2001
From: Codex <codex@local>
Date: Thu, 11 Jun 2026 23:40:26 +0800
Subject: [PATCH] fix: restore ecommerce page transitions

---
 src/features/ecommerce/EcommercePage.tsx |  16 ++--
 src/styles/ecommerce-standalone.css      | 106 ++++++++++++++++++++++-
 2 files changed, 113 insertions(+), 9 deletions(-)

diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx
index e1d55f5..af4a790 100644
--- a/src/features/ecommerce/EcommercePage.tsx
+++ b/src/features/ecommerce/EcommercePage.tsx
@@ -4675,7 +4675,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const smartCutoutPreview = (
-    <main className={`ecom-smart-cutout-page${smartCutoutImage ? " is-editor" : " is-upload"}${isSmartCutoutTransitioning ? " is-transitioning" : ""}`} aria-label="智能抠图">
+    <main key={`smart-cutout-${smartCutoutImage ? "editor" : "upload"}`} className={`ecom-smart-cutout-page ecom-tool-page-enter${smartCutoutImage ? " is-editor" : " is-upload"}${isSmartCutoutTransitioning ? " is-transitioning" : ""}`} aria-label="智能抠图">
       <input
         ref={smartCutoutInputRef}
         type="file"
@@ -4950,7 +4950,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const imageWorkbenchPreview = (
-    <main className="ecom-image-workbench-page" aria-label="图片修改局部重绘">
+    <main key="image-workbench" className="ecom-image-workbench-page ecom-tool-page-enter" aria-label="图片修改局部重绘">
       <input
         ref={imageWorkbenchInputRef}
         type="file"
@@ -5155,7 +5155,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const watermarkPreview = (
-    <main className="ecom-watermark-page" aria-label="去水印">
+    <main key="watermark" className="ecom-watermark-page ecom-tool-page-enter" aria-label="去水印">
       <input
         ref={watermarkInputRef}
         type="file"
@@ -5350,7 +5350,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const hotVideoPreview = (
-    <main className="ecom-quick-set-page ecom-hot-video-page" aria-label="广告视频">
+    <main key="hot-video" className="ecom-quick-set-page ecom-hot-video-page ecom-tool-page-enter" aria-label="广告视频">
       <div className="ecom-quick-set-body">
         <aside className="ecom-quick-set-panel" aria-label="广告视频设置">
           <header className="ecom-quick-set-panel-head">
@@ -5475,7 +5475,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   );
 
   const quickProductSetPreview = (
-    <main className={`ecom-quick-set-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="AI商品套图">
+    <main key="quick-set" className={`ecom-quick-set-page ecom-tool-page-enter${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="AI商品套图">
       <div className="ecom-quick-set-body">
         <aside className="ecom-quick-set-panel" aria-label="商品套图设置" onWheel={handleQuickPanelWheel}>
           <header className="ecom-quick-set-panel-head">
@@ -5628,7 +5628,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const quickDetailVisibleSelect = quickDetailBasicSelects.find((item) => item.key === visibleQuickSetSelect) ?? null;
 
   const quickDetailPreview = (
-    <main className={`ecom-quick-set-page ecom-quick-detail-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="A+详情页生成">
+    <main key="quick-detail" className={`ecom-quick-set-page ecom-quick-detail-page ecom-tool-page-enter${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="A+详情页生成">
       <div className="ecom-quick-set-body">
         <aside className="ecom-quick-set-panel" aria-label="A+详情页设置" onWheel={handleQuickPanelWheel}>
           <header className="ecom-quick-set-panel-head">
@@ -5914,7 +5914,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                 ? smartCutoutPreview
                 : isQuickSetTool || isQuickDetailTool || isHotVideoTool
                   ? (
-                    <div className="ecom-quick-page-wrap">
+                    <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
                       {quickPageSidebar}
                       {isQuickSetTool ? quickProductSetPreview : isQuickDetailTool ? quickDetailPreview : hotVideoPreview}
                     </div>
@@ -5932,7 +5932,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   return (
     <section
-      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotVideoTool ? " is-hot-video-page" : ""}`}
+      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool || isHotVideoTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotVideoTool ? " is-hot-video-page" : ""}`}
       data-tool={activeTool}
       aria-label={pageLabel}
     >
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css
index c3c15d9..6f3b886 100644
--- a/src/styles/ecommerce-standalone.css
+++ b/src/styles/ecommerce-standalone.css
@@ -2394,7 +2394,21 @@
   .ecommerce-standalone .ecommerce-auth-modal__scrim,
   .ecommerce-standalone .ecommerce-profile-popover__backdrop,
   .ecommerce-standalone .product-set-preview-backdrop,
-  .ecommerce-standalone .ecom-command-asset-popover {
+  .ecommerce-standalone .ecom-command-asset-popover,
+  .ecommerce-standalone .ecom-tool-page-enter,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel,
+  .ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel {
     animation: none !important;
   }
 
@@ -8819,6 +8833,96 @@
   }
 }
 
+@keyframes ecom-tool-page-enter {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.992);
+    filter: saturate(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+    filter: saturate(1);
+  }
+}
+
+@keyframes ecom-tool-panel-enter {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes ecom-tool-side-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes ecom-tool-stage-enter {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.ecommerce-standalone .ecom-tool-page-enter {
+  animation: ecom-tool-page-enter 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
+  will-change: opacity, transform;
+}
+
+.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav {
+  animation: ecom-tool-side-enter 430ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both !important;
+}
+
+.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor {
+  animation: ecom-tool-stage-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both !important;
+}
+
+.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel,
+.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel {
+  animation: ecom-tool-panel-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
+}
+
+.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(1),
+.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(1),
+.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(1) {
+  animation-delay: 80ms !important;
+}
+
+.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(2),
+.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(2),
+.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(2) {
+  animation-delay: 130ms !important;
+}
+
+.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(3),
+.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(3) {
+  animation-delay: 180ms !important;
+}
+
 @keyframes ecom-smart-upload-enter {
   from {
     opacity: 0;