feat: ecommerce quick tool UI responsive polish

src/features/ecommerce/EcommercePage.tsx

@@ -1861,9 +1861,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     { key: "translate", label: "图片翻译", icon: <TranslationOutlined /> },
   ];
 
-  const renderQuickPageSidebar = (activeKey: NonNullable<typeof activeQuickTool>) => (
+  const commerceQuickPageSidebarItems = quickPageSidebarItems.filter((item) =>
+    ["quick-set", "detail", "hot", "oneClickVideo"].includes(item.key),
+  );
+  const visualQuickPageSidebarItems = quickPageSidebarItems.filter((item) =>
+    ["image-edit", "watermark", "copywriting", "translate"].includes(item.key),
+  );
+
+  const renderQuickPageSidebar = (
+    activeKey: NonNullable<typeof activeQuickTool>,
+    group: "commerce" | "visual" = "commerce",
+  ) => (
     <nav className="ecom-quick-page-sidebar" aria-label="快捷工具切换">
-      {quickPageSidebarItems.map((item) => (
+      {(group === "visual" ? visualQuickPageSidebarItems : commerceQuickPageSidebarItems).map((item) => (
         <button
           key={item.key}
           type="button"
@@ -7835,7 +7845,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <div
               role="button"
               tabIndex={0}
-              className={`ecom-quick-set-upload${detailProductImages.length ? " has-images" : ""}`}
+              className={`ecom-quick-set-upload ecom-quick-hot-material${detailProductImages.length ? " has-images" : ""}`}
               onClick={() => detailInputRef.current?.click()}
               onKeyDown={(event) => openQuickUploadWithKeyboard(event, detailInputRef)}
               onDragOver={(event) => event.preventDefault()}
@@ -7845,7 +7855,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               <span>拖拽或点击上传</span>
               <em>同一产品，最多 3 张</em>
               <b>+ 上传图片</b>
-              {detailProductImages.length ? renderQuickUploadThumbs(detailProductImages, removeDetailImage) : null}
+              {detailProductImages.length ? (
+                <>
+                  {renderHotMaterialThumbs(detailProductImages, removeDetailImage)}
+                  {detailProductImages.length < 3 ? (
+                    <button
+                      type="button"
+                      className="ecom-quick-hot-add-btn"
+                      aria-label="Add more detail images"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        detailInputRef.current?.click();
+                      }}
+                    >
+                      <PlusOutlined />
+                    </button>
+                  ) : null}
+                </>
+              ) : null}
             </div>
             <input
               ref={detailInputRef}
@@ -7931,6 +7958,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             <button type="button" className="ecom-quick-set-primary ecom-quick-set-primary--cancel" onClick={handleCancelGenerate}>取消生成</button>
           ) : null}
         </aside>
+        {hotMaterialHoverZoom && typeof document !== "undefined"
+          ? createPortal(
+              <div
+                className={`ecom-hot-material-zoom-portal is-${hotMaterialHoverZoom.placement}`}
+                style={{ left: hotMaterialHoverZoom.x, top: hotMaterialHoverZoom.y }}
+              >
+                <img src={hotMaterialHoverZoom.src} alt="" />
+              </div>,
+              document.body,
+            )
+          : null}
         <section className="ecom-quick-set-stage">
           <header className="ecom-quick-set-preview-head">
             <h1>预览</h1>
@@ -8299,7 +8337,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                 onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsProductUploadDragging(false); }}
                 onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsProductUploadDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addProductImages(files); }}
               >
-                {renderQuickUploadThumbs(productImages, removeProductImage)}
+                {renderHotMaterialThumbs(productImages, removeProductImage)}
                 <button
                   type="button"
                   className="ecom-quick-hot-add-btn"
@@ -8458,6 +8496,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
             </button>
           </div>
         </aside>
+        {hotMaterialHoverZoom && typeof document !== "undefined"
+          ? createPortal(
+              <div
+                className={`ecom-hot-material-zoom-portal is-${hotMaterialHoverZoom.placement}`}
+                style={{ left: hotMaterialHoverZoom.x, top: hotMaterialHoverZoom.y }}
+              >
+                <img src={hotMaterialHoverZoom.src} alt="" />
+              </div>,
+              document.body,
+            )
+          : null}
         <section className="ecom-quick-set-stage">
           <header className="ecom-quick-set-preview-head">
             <h1>预览</h1>
@@ -8632,11 +8681,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     </main>
   );
 
-  const copywritingPreview = (
-    <div key="copywriting" className="ecom-quick-page-wrap ecom-tool-page-enter">
-      <EcommerceCopywritingPanel onClose={closeCopywritingPage} />
-    </div>
-  );
+  const copywritingPreview = <EcommerceCopywritingPanel onClose={closeCopywritingPage} />;
 
   const oneClickVideoPreview = (
     <div key="oneClickVideo" className="ecom-quick-page-wrap ecom-tool-page-enter">
@@ -8684,21 +8729,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
           ? isWatermarkTool
             ? (
               <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                {renderQuickPageSidebar("watermark")}
+                {renderQuickPageSidebar("watermark", "visual")}
                 {watermarkPreview}
               </div>
             )
             : isTranslateTool
               ? (
                 <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                  {renderQuickPageSidebar("translate")}
+                  {renderQuickPageSidebar("translate", "visual")}
                   {translatePreview}
                 </div>
               )
               : isImageEditTool
                 ? (
                   <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                    {renderQuickPageSidebar("image-edit")}
+                    {renderQuickPageSidebar("image-edit", "visual")}
                     {imageWorkbenchPreview}
                   </div>
                 )
@@ -8728,13 +8773,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                         : isCopywritingTool
                           ? (
                             <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
-                              {renderQuickPageSidebar("copywriting")}
+                              {renderQuickPageSidebar("copywriting", "visual")}
                               {copywritingPreview}
                             </div>
                           )
                           : isOneClickVideoTool
                             ? (
-                              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-one-click-video-wrap ecom-tool-page-enter">
                                 {renderQuickPageSidebar("oneClickVideo")}
                                 {oneClickVideoPreview}
                               </div>