Merge pull request 'feat: localize ecommerce quick tool pages' (#32) from codex/ecommerce-ui-latest-responsive-20260618 into main

Reviewed-on: #32

src/features/ecommerce/EcommercePage.tsx

@@ -65,8 +65,10 @@ import {
   getPlatformDefaultRatio,
   getPlatformLanguageOptions,
   getPlatformRatioOptions,
+  languageOptions,
   marketLanguageOptions,
   marketOptions,
+  normalizeLanguage,
   normalizeLanguageForPlatform,
   normalizeMarket,
   normalizePlatform,
@@ -167,6 +169,20 @@ type SmartCutoutImageItem = { src: string; name: string; originalSrc?: string };
 const ecommerceInspirationTabs = ["最近打开", "一键同款", "海报模板", "热门", "商品图", "模特穿戴"];
 const ecommerceInspirationAssets = ossAssets.ecommerce.inspiration;
 
+const getMarketsForLanguage = (languageValue: string) => {
+  const normalizedLanguage = normalizeLanguage(languageValue);
+  const matches = marketLanguageOptions
+    .filter((option) => option.languages.some((item) => normalizeLanguage(item) === normalizedLanguage))
+    .map((option) => option.country);
+  return matches.length ? matches : marketOptions;
+};
+
+const normalizeMarketForLanguage = (marketValue: string, languageValue: string) => {
+  const normalizedMarket = normalizeMarket(marketValue);
+  const languageMarkets = getMarketsForLanguage(languageValue);
+  return languageMarkets.includes(normalizedMarket) ? normalizedMarket : (languageMarkets[0] ?? marketOptions[0] ?? normalizedMarket);
+};
+
 const ecommerceInspirationRows = [
   {
     title: "作品记录",
@@ -341,9 +357,6 @@ interface EcommerceImagePromptOptions {
 }
 
 const sideTools: Array<{ key: ProductKitToolKey; label: string; icon: ReactNode }> = [
-  { key: "set", label: "商品套图", icon: <AppstoreOutlined /> },
-  { key: "detail", label: "A+详情", icon: <FileImageOutlined /> },
-  { key: "wear", label: "服饰穿搭", icon: <SkinOutlined /> },
   { key: "clone", label: "电商AI作图", icon: <AppstoreOutlined /> },
 ];
 
@@ -1185,6 +1198,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const skipInitialCloneAutoSaveRef = useRef(true);
   const skipNextCloneAutoSaveRef = useRef(false);
   const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
+  useEffect(() => {
+    if (activeTool === "set") {
+      setActiveTool("clone");
+      setActiveQuickTool("quick-set");
+    } else if (activeTool === "detail") {
+      setActiveTool("clone");
+      setActiveQuickTool("detail");
+    } else if (activeTool === "wear") {
+      setActiveTool("clone");
+      setActiveQuickTool(null);
+    }
+  }, [activeTool]);
   useEffect(() => {
     setPreviewZoom(1);
     setIsCommandComposerCompact(false);
@@ -1730,7 +1755,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const [detailProgress, setDetailProgress] = useState(0);
   const [hotRequirement, setHotRequirement] = useState("");
   const [isHotMaterialDragging, setIsHotMaterialDragging] = useState(false);
-  const [hotMaterialHoverZoom, setHotMaterialHoverZoom] = useState<{ src: string; x: number; y: number; placement: "above" | "below" } | null>(null);
+  const [hotMaterialHoverZoom, setHotMaterialHoverZoom] = useState<{ src: string; x: number; y: number; placement: "right" | "left" } | null>(null);
   const [hotPlatform, setHotPlatform] = useState(platformOptions[0]);
   const [hotMarket, setHotMarket] = useState(marketOptions[0]);
   const [hotLanguage, setHotLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
@@ -1793,6 +1818,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     () => getPlatformLanguageOptions(hotPlatform, hotMarket),
     [hotMarket, hotPlatform],
   );
+  const languageMarketOptions = languageOptions;
+  const cloneMarketOptions = useMemo(() => getMarketsForLanguage(language), [language]);
+  const detailMarketOptions = useMemo(() => getMarketsForLanguage(detailLanguage), [detailLanguage]);
+  const hotMarketOptions = useMemo(() => getMarketsForLanguage(hotLanguage), [hotLanguage]);
   const ecommerceMentionImages: MentionImageOption[] = [
     ...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })),
     ...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })),
@@ -1807,6 +1836,33 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     [productImages],
   );
 
+  const quickPageSidebarItems: Array<{ key: NonNullable<typeof activeQuickTool>; label: string; icon: ReactNode }> = [
+    { key: "quick-set", label: "商品套图", icon: <AppstoreAddOutlined /> },
+    { key: "detail", label: "A+详情", icon: <LayoutOutlined /> },
+    { key: "hot", label: "爆款复刻", icon: <FireOutlined /> },
+    { key: "oneClickVideo", label: "一键视频", icon: <PlayCircleOutlined /> },
+    { key: "image-edit", label: "图片修改", icon: <HighlightOutlined /> },
+    { key: "watermark", label: "去除水印", icon: <ClearOutlined /> },
+    { key: "copywriting", label: "一键文案", icon: <FileTextOutlined /> },
+    { key: "translate", label: "图片翻译", icon: <TranslationOutlined /> },
+  ];
+
+  const renderQuickPageSidebar = (activeKey: NonNullable<typeof activeQuickTool>) => (
+    <nav className="ecom-quick-page-sidebar" aria-label="快捷工具切换">
+      {quickPageSidebarItems.map((item) => (
+        <button
+          key={item.key}
+          type="button"
+          className={item.key === activeKey ? "is-active" : ""}
+          onClick={() => setActiveQuickTool(item.key)}
+        >
+          {item.icon}
+          <span>{item.label}</span>
+        </button>
+      ))}
+    </nav>
+  );
+
   const selectedProductSetOutput =
     productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
   const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
@@ -2209,8 +2265,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   const openImageTranslatePage = () => {
     clearSmartCutoutTransition();
+    setActiveQuickTool("translate");
     setComposerMenu(null);
-    toast.info("功能正在优化中");
   };
 
   const closeImageTranslatePage = () => {
@@ -3255,7 +3311,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setRatio((current) =>
       normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput),
     );
-    setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
   };
 
   const handleCloneOutputChange = (nextOutput: CloneOutputKey) => {
@@ -3305,10 +3360,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setLanguage(getPlatformDefaultLanguage(platform, normalizedMarket));
   };
 
+  const handleCloneLanguageChange = (nextLanguage: string) => {
+    const normalizedLanguage = normalizeLanguage(nextLanguage);
+    setLanguage(normalizedLanguage);
+    setMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage));
+  };
+
   const handleDetailPlatformChange = (nextPlatform: string) => {
     const normalizedPlatform = normalizePlatform(nextPlatform);
     setDetailPlatform(normalizedPlatform);
-    setDetailLanguage(getPlatformDefaultLanguage(normalizedPlatform, detailMarket));
     setDetailRatio((current) => getQuickSetRatioValue(current));
   };
 
@@ -3318,6 +3378,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setDetailLanguage(getPlatformDefaultLanguage(detailPlatform, normalizedMarket));
   };
 
+  const handleDetailLanguageChange = (nextLanguage: string) => {
+    const normalizedLanguage = normalizeLanguage(nextLanguage);
+    setDetailLanguage(normalizedLanguage);
+    setDetailMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage));
+  };
+
   const createCloneSettingSnapshot = (name: string, id = `clone-setting-${Date.now()}`): CloneSavedSetting => ({
     id,
     name,
@@ -4462,7 +4528,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const handleHotPlatformChange = (nextPlatform: string) => {
     const normalizedPlatform = normalizePlatform(nextPlatform);
     setHotPlatform(normalizedPlatform);
-    setHotLanguage(getPlatformDefaultLanguage(normalizedPlatform, hotMarket));
     setHotRatio((current) => getQuickSetRatioValue(current));
   };
 
@@ -4472,6 +4537,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     setHotLanguage(getPlatformDefaultLanguage(hotPlatform, normalizedMarket));
   };
 
+  const handleHotLanguageChange = (nextLanguage: string) => {
+    const normalizedLanguage = normalizeLanguage(nextLanguage);
+    setHotLanguage(normalizedLanguage);
+    setHotMarket((current) => normalizeMarketForLanguage(current, normalizedLanguage));
+  };
+
   const handleHotAiWrite = () => {
     setHotRequirement(
       "1.产品名称：便携式咖啡保温杯\n2.核心卖点：316不锈钢内胆、12小时长效保温、防漏便携、大容量\n3.参考风格：极简日系、暖光氛围、生活场景\n4.期望场景：办公桌面、户外通勤、运动健身\n5.具体参数：容量500ml、口径4.5cm、高度22cm",
@@ -4587,20 +4658,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
 
   const handleHotMaterialMouseEnter = (src: string, event: ReactMouseEvent<HTMLElement>) => {
     const rect = event.currentTarget.getBoundingClientRect();
-    const previewHalfWidth = 150;
-    const previewHeight = 360;
+    const previewWidth = 300;
+    const previewHeight = 190;
     const gap = 12;
     const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
     const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-    const x = Math.min(
-      Math.max(rect.left + rect.width / 2, previewHalfWidth + gap),
-      Math.max(previewHalfWidth + gap, viewportWidth - previewHalfWidth - gap),
+    const canShowRight = rect.right + gap + previewWidth <= viewportWidth - gap;
+    const placement: "right" | "left" = canShowRight ? "right" : "left";
+    const x = placement === "right" ? rect.right + gap : Math.max(gap, rect.left - gap);
+    const y = Math.min(
+      Math.max(rect.top + rect.height / 2, previewHeight / 2 + gap),
+      Math.max(previewHeight / 2 + gap, viewportHeight - previewHeight / 2 - gap),
     );
-    const showAbove = rect.top > previewHeight + gap;
-    const y = showAbove
-      ? rect.top - gap
-      : Math.min(rect.bottom + gap, viewportHeight - gap);
-    setHotMaterialHoverZoom({ src, x, y, placement: showAbove ? "above" : "below" });
+    setHotMaterialHoverZoom({ src, x, y, placement });
   };
   const handleHotMaterialMouseLeave = () => setHotMaterialHoverZoom(null);
 
@@ -4624,13 +4694,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               onRemove(item.id);
             }}
           >
-            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-              <path d="M9 6V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1" />
-              <path d="M5 6h14" />
-              <path d="M8 6l1 14h6l1-14" />
-              <path d="M10.5 10v6" />
-              <path d="M13.5 10v6" />
-            </svg>
+            脳
           </button>
         </figure>
       ))}
@@ -5257,8 +5321,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: handleClonePlatformChange },
-    { key: "market", label: "国家", value: market, options: marketOptions, onChange: handleCloneMarketChange },
-    { key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage },
+    { key: "market", label: "国家", value: market, options: cloneMarketOptions, onChange: handleCloneMarketChange },
+    { key: "language", label: "语种", value: language, options: languageMarketOptions, onChange: handleCloneLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: ratio, options: cloneRatioOptions, onChange: setRatio },
   ];
   const quickDetailBasicSelects: Array<{
@@ -5269,8 +5333,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: detailPlatform, options: platformOptions, onChange: handleDetailPlatformChange },
-    { key: "market", label: "国家", value: detailMarket, options: marketOptions, onChange: handleDetailMarketChange },
-    { key: "language", label: "语种", value: detailLanguage, options: detailLanguageOptions, onChange: setDetailLanguage },
+    { key: "market", label: "国家", value: detailMarket, options: detailMarketOptions, onChange: handleDetailMarketChange },
+    { key: "language", label: "语种", value: detailLanguage, options: languageMarketOptions, onChange: handleDetailLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(detailRatio), options: quickSetRatioOptions, onChange: setDetailRatio },
   ];
 
@@ -5282,8 +5346,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: hotPlatform, options: platformOptions, onChange: handleHotPlatformChange },
-    { key: "market", label: "国家", value: hotMarket, options: marketOptions, onChange: handleHotMarketChange },
-    { key: "language", label: "语种", value: hotLanguage, options: hotLanguageOptions, onChange: setHotLanguage },
+    { key: "market", label: "国家", value: hotMarket, options: hotMarketOptions, onChange: handleHotMarketChange },
+    { key: "language", label: "语种", value: hotLanguage, options: languageMarketOptions, onChange: handleHotLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(hotRatio), options: quickSetRatioOptions, onChange: setHotRatio },
   ];
 
@@ -5295,8 +5359,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     onChange: (value: string) => void;
   }> = [
     { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: setPlatform },
-    { key: "market", label: "国家", value: market, options: marketOptions, onChange: setMarket },
-    { key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage },
+    { key: "market", label: "国家", value: market, options: cloneMarketOptions, onChange: handleCloneMarketChange },
+    { key: "language", label: "语种", value: language, options: languageMarketOptions, onChange: handleCloneLanguageChange },
     { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(ratio), options: quickSetRatioOptions, onChange: setRatio },
   ];
 
@@ -7127,6 +7191,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </aside>
 
       <section className="ecom-image-workbench-stage">
+        <header className="ecom-visual-workspace-head ecom-copywriting-preview-head">
+          <h1>图片修改</h1>
+          <p>上传图片后涂抹需要调整的区域，<span>AI</span> 将根据提示完成局部重绘。</p>
+        </header>
         {!imageWorkbenchImage ? (
           <div
             className={`ecom-watermark-dropzone${isImageWorkbenchDragging ? " is-dragging" : ""}`}
@@ -7385,6 +7453,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
       </aside>
 
       <section className="ecom-watermark-workspace">
+        <header className="ecom-visual-workspace-head ecom-copywriting-preview-head">
+          <h1>图片翻译</h1>
+          <p>上传含文字的图片并选择目标语种，<span>AI</span> 将识别文字并保持原图排版。</p>
+        </header>
         {!translateImage ? (
           <div
             className={`ecom-watermark-dropzone${isTranslateDragging ? " is-dragging" : ""}`}
@@ -8361,35 +8433,63 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         ? tryOnPreview
         : isCloneTool
           ? isWatermarkTool
-            ? watermarkPreview
+            ? (
+              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                {renderQuickPageSidebar("watermark")}
+                {watermarkPreview}
+              </div>
+            )
             : isTranslateTool
-              ? translatePreview
+              ? (
+                <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                  {renderQuickPageSidebar("translate")}
+                  {translatePreview}
+                </div>
+              )
               : isImageEditTool
-                ? imageWorkbenchPreview
+                ? (
+                  <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                    {renderQuickPageSidebar("image-edit")}
+                    {imageWorkbenchPreview}
+                  </div>
+                )
                 : isSmartCutoutTool
                   ? smartCutoutPreview
                   : isQuickDetailTool
                     ? (
                       <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                        {renderQuickPageSidebar("detail")}
                         {quickDetailPreview}
                       </div>
                     )
                     : isHotCloneTool
                       ? (
                         <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                          {renderQuickPageSidebar("hot")}
                           {hotClonePreview}
                         </div>
                       )
                       : isQuickSetTool
                         ? (
                           <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                            {renderQuickPageSidebar("quick-set")}
                             {quickSetGenPreview}
                           </div>
                         )
                         : isCopywritingTool
-                          ? copywritingPreview
+                          ? (
+                            <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                              {renderQuickPageSidebar("copywriting")}
+                              {copywritingPreview}
+                            </div>
+                          )
                           : isOneClickVideoTool
-                            ? oneClickVideoPreview
+                            ? (
+                              <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
+                                {renderQuickPageSidebar("oneClickVideo")}
+                                {oneClickVideoPreview}
+                              </div>
+                            )
                             : clonePreview
           : placeholderPreview;
   const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool;

src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx

@@ -4,7 +4,8 @@ import {
   ThunderboltOutlined,
   VideoCameraOutlined,
 } from "@ant-design/icons";
-import { useMemo, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent, type RefObject } from "react";
+import { useMemo, useRef, useState, type ChangeEvent, type DragEvent, type KeyboardEvent, type MouseEvent as ReactMouseEvent, type RefObject } from "react";
+import { createPortal } from "react-dom";
 import EcommerceVideoWorkspace from "../EcommerceVideoWorkspace";
 
 interface CloneImageItem {
@@ -97,6 +98,7 @@ export default function EcommerceOneClickVideoPanel({
 }: EcommerceOneClickVideoPanelProps) {
   const [openSelect, setOpenSelect] = useState<"platform" | "ratio" | null>(null);
   const [planTrigger, setPlanTrigger] = useState(0);
+  const [hoverZoom, setHoverZoom] = useState<{ src: string; x: number; y: number; placement: "right" | "left" } | null>(null);
   const selectAnchorRef = useRef<HTMLDivElement>(null);
 
   const productImageDataUrls = useMemo(() => productImages.map((img) => img.src), [productImages]);
@@ -126,19 +128,40 @@ export default function EcommerceOneClickVideoPanel({
     setOpenSelect((current) => (current === key ? null : key));
   };
 
+  const handleThumbMouseEnter = (src: string, event: ReactMouseEvent<HTMLElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const previewWidth = 300;
+    const previewHeight = 190;
+    const gap = 12;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    const canShowRight = rect.right + gap + previewWidth <= viewportWidth - gap;
+    const placement: "right" | "left" = canShowRight ? "right" : "left";
+    const x = placement === "right" ? rect.right + gap : Math.max(gap, rect.left - gap);
+    const y = Math.min(
+      Math.max(rect.top + rect.height / 2, previewHeight / 2 + gap),
+      Math.max(previewHeight / 2 + gap, viewportHeight - previewHeight / 2 - gap),
+    );
+    setHoverZoom({ src, x, y, placement });
+  };
+
   const renderThumbs = () => (
     <div className="ecom-quick-upload-thumbs" aria-label="已上传商品原图">
       {productImages.map((item) => (
-        <figure key={item.id} className="ecom-command-asset-thumb ecom-quick-upload-thumb">
+        <figure
+          key={item.id}
+          className="ecom-command-asset-thumb ecom-quick-upload-thumb"
+          onMouseEnter={(event) => handleThumbMouseEnter(item.src, event)}
+          onMouseLeave={() => setHoverZoom(null)}
+        >
           <img src={item.src} alt={item.name} />
-          <span className="ecom-command-asset-zoom" aria-hidden="true">
-            <img src={item.src} alt="" />
-          </span>
           <button
             type="button"
+            className="ecom-hot-material-delete"
             aria-label="删除图片"
             onClick={(event) => {
               event.stopPropagation();
+              setHoverZoom(null);
               removeProductImage(item.id);
             }}
           >
@@ -386,6 +409,17 @@ export default function EcommerceOneClickVideoPanel({
             </button>
           </div>
         </aside>
+        {hoverZoom && typeof document !== "undefined"
+          ? createPortal(
+              <div
+                className={`ecom-hot-material-zoom-portal is-${hoverZoom.placement}`}
+                style={{ left: hoverZoom.x, top: hoverZoom.y }}
+              >
+                <img src={hoverZoom.src} alt="" />
+              </div>,
+              document.body,
+            )
+          : null}
 
         <section className="ecom-quick-set-stage">
           <EcommerceVideoWorkspace

src/features/ecommerce/panels/WatermarkToolPage.tsx

@@ -155,6 +155,10 @@ export default function WatermarkToolPage({
       </aside>
 
       <section className="ecom-watermark-workspace">
+        <header className="ecom-visual-workspace-head ecom-copywriting-preview-head">
+          <h1>去除水印</h1>
+          <p>上传含水印或文字遮挡的图片，<span>AI</span> 将清理画面并保留商品细节。</p>
+        </header>
         {!image ? (
           <div
             className={`ecom-watermark-dropzone${isDragging ? " is-dragging" : ""}`}

src/styles/ecommerce-standalone.css

@@ -21131,3 +21131,135 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
     top: -10px !important;
   }
 }
+
+/* Responsive coverage for the recently localized quick/visual tool pages. */
+.ecom-hot-material-zoom-portal.is-right {
+  transform: translateY(-50%) !important;
+}
+
+.ecom-hot-material-zoom-portal.is-left {
+  transform: translate(-100%, -50%) !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-hot-material-zoom-portal.is-above,
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-hot-material-zoom-portal.is-below {
+  transform: translateY(-50%) !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete {
+  position: absolute !important;
+  top: -8px !important;
+  right: -8px !important;
+  z-index: 20 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  min-height: 24px !important;
+  padding: 0 !important;
+  border: 1px solid rgba(239, 68, 68, 0.62) !important;
+  border-radius: 999px !important;
+  color: #ef4444 !important;
+  background: #ffffff !important;
+  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16) !important;
+  font-size: 16px !important;
+  font-weight: 700 !important;
+  line-height: 1 !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete:hover {
+  border-color: #dc2626 !important;
+  color: #dc2626 !important;
+  background: #fff1f2 !important;
+  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.24) !important;
+  transform: scale(1.04) !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete svg {
+  display: none !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-add-btn,
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-hot-add-btn:hover {
+  color: #1073cc !important;
+  background: #ffffff !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head {
+  display: grid !important;
+  gap: 6px !important;
+  margin-bottom: 16px !important;
+  padding: 0 !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head h1 {
+  margin: 0 !important;
+  color: #172636 !important;
+  font-size: 21px !important;
+  font-weight: 950 !important;
+  line-height: 1.25 !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head p {
+  margin: 0 !important;
+  color: #657686 !important;
+  font-size: 13px !important;
+  font-weight: 750 !important;
+  line-height: 1.5 !important;
+}
+
+.ecommerce-standalone .ecom-quick-page-wrap .ecom-visual-workspace-head.ecom-copywriting-preview-head p span {
+  color: #1073cc !important;
+  font-weight: 800 !important;
+}
+
+@media (max-width: 960px) {
+  .ecommerce-standalone .ecom-quick-page-wrap {
+    flex-direction: column !important;
+    overflow: hidden !important;
+  }
+
+  .ecommerce-standalone .ecom-quick-page-sidebar {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+    min-height: 68px !important;
+    flex-direction: row !important;
+    justify-content: flex-start !important;
+    gap: 6px !important;
+    padding: 8px 10px !important;
+    border-right: 0 !important;
+    border-bottom: 1px solid rgba(30, 189, 219, 0.1) !important;
+    overflow-x: auto !important;
+  }
+
+  .ecommerce-standalone .ecom-quick-page-sidebar button {
+    flex: 0 0 76px !important;
+    width: 76px !important;
+    min-height: 52px !important;
+    padding: 7px 6px !important;
+  }
+
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-set-body,
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-copywriting-body,
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-image-workbench-page,
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-watermark-page {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: auto minmax(0, 1fr) !important;
+  }
+
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-quick-set-panel,
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-copywriting-panel,
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-image-workbench-side,
+  .ecommerce-standalone .ecom-quick-page-wrap .ecom-watermark-side {
+    max-height: 46vh !important;
+    overflow-y: auto !important;
+  }
+}
+
+@media (max-width: 640px), (hover: none) {
+  .ecom-hot-material-zoom-portal {
+    display: none !important;
+  }
+}