Merge branch 'main' into codex/ecommerce-history-sync

src/App.tsx

@@ -347,6 +347,8 @@ function App() {
     toast.info("Bug 反馈入口已保留，后续可接入反馈页面。");
   };
 
+  const shouldShowEcommerceTopbar = currentPage === "workspace" && !workspaceChrome.isToolPage;
+
   return (
     <div
       className="ecommerce-standalone web-shell"
@@ -355,17 +357,19 @@ function App() {
       data-view="ecommerce"
       data-workspace-tool-page={workspaceChrome.isToolPage ? "true" : "false"}
     >
-      <Topbar
-        session={session}
-        usage={usage}
-        profileMenuOpen={profileMenuOpen}
-        onProfileMenuOpenChange={setProfileMenuOpen}
-        onOpenWorkspace={handleOpenWorkspace}
-        onOpenProfile={handleOpenProfile}
-        onOpenAuth={openAuth}
-        onLogout={handleLogout}
-        onBugFeedback={handleBugFeedback}
-      />
+      {shouldShowEcommerceTopbar ? (
+        <Topbar
+          session={session}
+          usage={usage}
+          profileMenuOpen={profileMenuOpen}
+          onProfileMenuOpenChange={setProfileMenuOpen}
+          onOpenWorkspace={handleOpenWorkspace}
+          onOpenProfile={handleOpenProfile}
+          onOpenAuth={openAuth}
+          onLogout={handleLogout}
+          onBugFeedback={handleBugFeedback}
+        />
+      ) : null}
 
       <main className="ecommerce-standalone__content">
         {session ? (

src/features/ecommerce/EcommercePage.tsx

@@ -1,5 +1,7 @@
 import {
   AppstoreOutlined,
+  AppstoreAddOutlined,
+  BorderOuterOutlined,
   ClearOutlined,
   CloudUploadOutlined,
   CloseOutlined,
@@ -7,14 +9,17 @@ import {
   EditOutlined,
   FireOutlined,
   FileImageOutlined,
+  FileTextOutlined,
   FolderOpenOutlined,
   FrownOutlined,
   GlobalOutlined,
+  HighlightOutlined,
   LayoutOutlined,
   LoadingOutlined,
   MenuFoldOutlined,
   MenuUnfoldOutlined,
   PaperClipOutlined,
+  PlayCircleOutlined,
   PlusOutlined,
   QuestionCircleOutlined,
   ReloadOutlined,
@@ -22,6 +27,7 @@ import {
   SettingOutlined,
   SkinOutlined,
   TableOutlined,
+  TranslationOutlined,
   VideoCameraOutlined,
 } from "@ant-design/icons";
 import {
@@ -257,6 +263,7 @@ import {
 
 
 interface ProductClonePageProps {
+  onWorkspaceChromeChange?: (state: { isToolPage: boolean }) => void;
   [key: string]: unknown;
 }
 
@@ -865,7 +872,7 @@ const cloneSetCountOptions: Array<{
 const cloneSetCountKeys = cloneSetCountOptions.map((option) => option.key);
 const minCloneSetTotal = 1;
 const maxCloneSetTotal = 16;
-const maxCloneProductImages = 20;
+const maxCloneProductImages = 10;
 const maxCloneReferenceImages = 20;
 const cloneVideoDurationMin = 5;
 const cloneVideoDurationMax = 45;
@@ -1138,6 +1145,7 @@ function mergeEcommerceHistoryRecords(...recordGroups: EcommerceHistoryRecord[][
 }
 
 function ProductClonePage(_props: ProductClonePageProps = {}) {
+  const { onWorkspaceChromeChange } = _props;
   const setInputRef = useRef<HTMLInputElement>(null);
   const productInputRef = useRef<HTMLInputElement>(null);
   const cloneReferenceInputRef = useRef<HTMLInputElement>(null);
@@ -3023,7 +3031,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     const imageFiles = notifyRejectedImages(files);
     if (!imageFiles.length) return;
     const remainingSlots = maxCloneProductImages - productImages.length;
-    if (remainingSlots <= 0) return;
+    if (remainingSlots <= 0) {
+      toast.info(`最多上传 ${maxCloneProductImages} 张素材`);
+      return;
+    }
+    if (imageFiles.length > remainingSlots) {
+      toast.info(`最多上传 ${maxCloneProductImages} 张素材，已自动保留前 ${remainingSlots} 张`);
+    }
 
     const localItems = createLocalImageItems(imageFiles, remainingSlots, "product");
     setProductImages((current) => [...current, ...localItems].slice(0, maxCloneProductImages));
@@ -4752,6 +4766,29 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   const isQuickSetTool = isCloneTool && activeQuickTool === "quick-set";
   const isCopywritingTool = isCloneTool && activeQuickTool === "copywriting";
   const isOneClickVideoTool = isCloneTool && activeQuickTool === "oneClickVideo";
+  const isWorkspaceToolPage =
+    !isCloneTool ||
+    isSmartCutoutTool ||
+    isQuickDetailTool ||
+    isWatermarkTool ||
+    isTranslateTool ||
+    isImageEditTool ||
+    isHotCloneTool ||
+    isQuickSetTool ||
+    isCopywritingTool ||
+    isOneClickVideoTool ||
+    isVideoWorkspaceVisible ||
+    Boolean(activeHistoryRecordId);
+
+  useEffect(() => {
+    onWorkspaceChromeChange?.({ isToolPage: isWorkspaceToolPage });
+  }, [isWorkspaceToolPage, onWorkspaceChromeChange]);
+
+  useEffect(() => {
+    return () => {
+      onWorkspaceChromeChange?.({ isToolPage: false });
+    };
+  }, [onWorkspaceChromeChange]);
   const pageLabel = isSetTool ? "商品套图" : isDetail ? "A+/详情页" : isTryOn ? "AI服饰穿戴" : activeToolMeta?.label || "商品工具";
   const setPrimaryLabel =
     setImages.length === 0
@@ -6445,7 +6482,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
               <button
                 type="button"
                 className={`ecom-command-reference ecom-command-reference--bottom ecom-command-tool ecom-command-tool--upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
-                onClick={() => productInputRef.current?.click()}
+                onClick={() => {
+                  if (productImages.length >= maxCloneProductImages) {
+                    toast.info(`最多上传 ${maxCloneProductImages} 张素材`);
+                    return;
+                  }
+                  productInputRef.current?.click();
+                }}
                 onDragEnter={(event) => {
                   event.preventDefault();
                   setIsProductUploadDragging(true);
@@ -6458,8 +6501,9 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
                   const files = Array.from(event.dataTransfer.files);
                   if (files.length) addComposerAssets(files);
                 }}
-                aria-label="上传素材"
-                title="上传素材"
+                aria-disabled={productImages.length >= maxCloneProductImages}
+                aria-label={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : "上传素材"}
+                title={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : "上传素材"}
               >
                 <span aria-hidden="true"><PaperClipOutlined /></span>
                 <strong>上传素材</strong>
@@ -6582,15 +6626,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
         {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
           <section className="ecom-command-quick-board" aria-label="快捷功能">
             {[
-              { label: "A+/详情页", tone: "detail", icon: <LayoutOutlined />, onClick: openQuickDetailPage },
+              { label: "A+/详情页", tone: "detail", icon: <BorderOuterOutlined />, onClick: openQuickDetailPage },
               { label: "爆款复刻", tone: "hot", icon: <FireOutlined />, onClick: openHotClonePage },
-              { label: "图片修改", tone: "edit", icon: <EditOutlined />, onClick: openImageWorkbenchPage },
+              { label: "图片修改", tone: "edit", icon: <HighlightOutlined />, onClick: openImageWorkbenchPage },
               { label: "智能抠图", tone: "cutout", icon: <ScissorOutlined />, onClick: openSmartCutoutUpload },
               { label: "去除水印", tone: "watermark", icon: <ClearOutlined />, onClick: openWatermarkRemovalPage },
-              { label: "图片翻译", tone: "translate", icon: <GlobalOutlined />, onClick: openImageTranslatePage },
-              { label: "商品套图", tone: "product", icon: <AppstoreOutlined />, onClick: openQuickSetPage },
-              { label: "一键文案", tone: "copywriting", icon: <EditOutlined />, onClick: openCopywritingPage },
-              { label: "一键视频", tone: "video", icon: <VideoCameraOutlined />, onClick: openOneClickVideoPage },
+              { label: "图片翻译", tone: "translate", icon: <TranslationOutlined />, onClick: openImageTranslatePage },
+              { label: "商品套图", tone: "product", icon: <AppstoreAddOutlined />, onClick: openQuickSetPage },
+              { label: "一键文案", tone: "copywriting", icon: <FileTextOutlined />, onClick: openCopywritingPage },
+              { label: "一键视频", tone: "video", icon: <PlayCircleOutlined />, onClick: openOneClickVideoPage },
               { label: "更多功能", tone: "more", icon: <SettingOutlined />, disabled: true },
             ].map((item) => (
               <button

src/styles/ecommerce-standalone.css

@@ -20922,3 +20922,212 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
     grid-template-rows: auto minmax(0, 1fr) !important;
   }
 }
+
+/* Ecommerce home quick tools: match the soft product-card background language. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board {
+  gap: 10px !important;
+  padding: 8px !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--detail {
+  --quick-card-glow: rgba(198, 213, 255, 0.56) !important;
+  --quick-card-glow-hover: rgba(177, 196, 252, 0.72) !important;
+  --quick-card-icon: #4967c8 !important;
+  --quick-card-text: #142133 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--hot {
+  --quick-card-glow: rgba(255, 226, 184, 0.54) !important;
+  --quick-card-glow-hover: rgba(255, 211, 151, 0.72) !important;
+  --quick-card-icon: #b56a1f !important;
+  --quick-card-text: #1f2630 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit {
+  --quick-card-glow: rgba(244, 204, 234, 0.54) !important;
+  --quick-card-glow-hover: rgba(237, 181, 222, 0.7) !important;
+  --quick-card-icon: #a44986 !important;
+  --quick-card-text: #1d2330 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout {
+  --quick-card-glow: rgba(188, 234, 255, 0.56) !important;
+  --quick-card-glow-hover: rgba(161, 222, 250, 0.72) !important;
+  --quick-card-icon: #2479a7 !important;
+  --quick-card-text: #122431 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark {
+  --quick-card-glow: rgba(250, 210, 199, 0.52) !important;
+  --quick-card-glow-hover: rgba(243, 188, 174, 0.7) !important;
+  --quick-card-icon: #b64e3c !important;
+  --quick-card-text: #20242c !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--translate {
+  --quick-card-glow: rgba(181, 230, 219, 0.55) !important;
+  --quick-card-glow-hover: rgba(154, 217, 202, 0.72) !important;
+  --quick-card-icon: #167667 !important;
+  --quick-card-text: #13272a !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--product {
+  --quick-card-glow: rgba(207, 237, 194, 0.56) !important;
+  --quick-card-glow-hover: rgba(185, 226, 169, 0.72) !important;
+  --quick-card-icon: #3f7d3d !important;
+  --quick-card-text: #17252a !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--copywriting {
+  --quick-card-glow: rgba(205, 218, 236, 0.54) !important;
+  --quick-card-glow-hover: rgba(185, 203, 226, 0.7) !important;
+  --quick-card-icon: #3e587f !important;
+  --quick-card-text: #162231 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--video {
+  --quick-card-glow: rgba(214, 204, 250, 0.56) !important;
+  --quick-card-glow-hover: rgba(196, 182, 244, 0.72) !important;
+  --quick-card-icon: #6b50b6 !important;
+  --quick-card-text: #1b2132 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--more {
+  --quick-card-glow: rgba(219, 226, 232, 0.56) !important;
+  --quick-card-glow-hover: rgba(201, 211, 220, 0.72) !important;
+  --quick-card-icon: #52606f !important;
+  --quick-card-text: #17212c !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card {
+  --quick-card-glow: rgba(205, 231, 238, 0.5);
+  --quick-card-glow-hover: rgba(181, 221, 231, 0.68);
+  --quick-card-icon: #1073cc;
+  --quick-card-text: #10202c;
+  min-height: 58px !important;
+  gap: 10px !important;
+  justify-content: flex-start !important;
+  padding: 12px 14px !important;
+  border: 1px solid rgba(16, 32, 44, 0.08) !important;
+  border-radius: 15px !important;
+  background:
+    radial-gradient(circle at 18% 12%, var(--quick-card-glow), transparent 54%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.86)) !important;
+  color: var(--quick-card-text) !important;
+  box-shadow: none !important;
+  transform: none !important;
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    color 180ms ease,
+    transform 180ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible {
+  border-color: rgba(16, 32, 44, 0.1) !important;
+  background:
+    radial-gradient(circle at 18% 12%, var(--quick-card-glow-hover), transparent 58%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.9)) !important;
+  color: var(--quick-card-icon) !important;
+  box-shadow: 0 10px 24px rgba(16, 32, 44, 0.045) !important;
+  transform: translateY(-1px) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span {
+  position: relative !important;
+  display: grid !important;
+  place-items: center !important;
+  width: 30px !important;
+  height: 30px !important;
+  flex: 0 0 30px !important;
+  border: 0 !important;
+  border-radius: 10px !important;
+  background: transparent !important;
+  color: var(--quick-card-icon) !important;
+  box-shadow: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span::after {
+  content: "→";
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--quick-card-icon);
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 1;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span .anticon,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span svg {
+  width: 17px !important;
+  height: 17px !important;
+  color: inherit !important;
+  fill: currentColor !important;
+  transition: opacity 160ms ease, transform 160ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover > span .anticon,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover > span svg,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible > span .anticon,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible > span svg {
+  opacity: 0 !important;
+  transform: translateX(4px) scale(0.92) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:hover > span::after,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card:focus-visible > span::after {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card strong {
+  color: var(--quick-card-text) !important;
+  font-size: 14px !important;
+  font-weight: 750 !important;
+}
+
+@media (max-width: 760px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board {
+    gap: 8px !important;
+    padding: 6px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card {
+    min-height: 54px !important;
+    gap: 8px !important;
+    padding: 10px !important;
+    border-radius: 14px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card > span {
+    width: 26px !important;
+    height: 26px !important;
+    flex-basis: 26px !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button.ecom-command-quick-card strong {
+    font-size: 13px !important;
+  }
+}
+
+/* Ecommerce home hero rhythm: bring the command area closer to the topbar. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate:has(.ecom-inspiration-lab) {
+  top: -18px !important;
+}
+
+@media (max-width: 760px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate:has(.ecom-inspiration-lab) {
+    top: -10px !important;
+  }
+}

src/styles/pages/ecommerce.css

@@ -11281,50 +11281,155 @@
 }
 
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
-  border: 1px solid rgba(30, 189, 219, 0.12) !important;
-  border-radius: 22px !important;
-  background: #feffff !important;
-  box-shadow: 0 22px 58px rgba(16, 115, 204, 0.08) !important;
+  gap: 10px !important;
+  padding: 12px !important;
+  border: 1px solid rgba(30, 189, 219, 0.14) !important;
+  border-radius: 18px !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 252, 253, 0.58)) !important;
+  box-shadow:
+    0 18px 46px rgba(16, 115, 204, 0.07),
+    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
 }
 
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
-  border: 1px solid rgba(30, 189, 219, 0.1) !important;
-  border-radius: 18px !important;
+  --quick-accent: #1073cc;
+  --quick-tint: rgba(16, 115, 204, 0.1);
+  --quick-line: rgba(16, 115, 204, 0.14);
+  min-height: 58px !important;
+  gap: 10px !important;
+  justify-content: flex-start !important;
+  padding: 12px 14px !important;
+  border: 1px solid var(--quick-line) !important;
+  border-radius: 14px !important;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.88)) !important;
+    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 254, 0.78)) !important;
   color: var(--ecom-entry-text) !important;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.86),
-    0 12px 28px rgba(16, 115, 204, 0.06) !important;
+    inset 0 1px 0 rgba(255, 255, 255, 0.9),
+    0 8px 22px rgba(16, 115, 204, 0.045) !important;
   transition:
     border-color 180ms ease,
+    color 180ms ease,
     box-shadow 180ms ease,
     transform 180ms ease,
     background 180ms ease !important;
 }
 
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover {
-  border-color: rgba(30, 189, 219, 0.32) !important;
+  border-color: color-mix(in srgb, var(--quick-accent) 34%, transparent) !important;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 251, 254, 0.94)) !important;
-  box-shadow: 0 18px 34px rgba(16, 115, 204, 0.12) !important;
-  transform: translateY(-2px);
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.92)) !important;
+  color: #0f2533 !important;
+  box-shadow:
+    0 14px 30px rgba(16, 115, 204, 0.09),
+    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
+  transform: translateY(-1px);
 }
 
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:active {
   transform: translateY(0);
 }
 
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--detail {
+  --quick-accent: #4f70d9;
+  --quick-tint: rgba(79, 112, 217, 0.12);
+  --quick-line: rgba(79, 112, 217, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--hot {
+  --quick-accent: #c66b1f;
+  --quick-tint: rgba(198, 107, 31, 0.12);
+  --quick-line: rgba(198, 107, 31, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--edit {
+  --quick-accent: #8d6cdb;
+  --quick-tint: rgba(141, 108, 219, 0.12);
+  --quick-line: rgba(141, 108, 219, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--cutout {
+  --quick-accent: #0a7ca8;
+  --quick-tint: rgba(10, 124, 168, 0.12);
+  --quick-line: rgba(10, 124, 168, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--watermark {
+  --quick-accent: #b14f6f;
+  --quick-tint: rgba(177, 79, 111, 0.12);
+  --quick-line: rgba(177, 79, 111, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--translate {
+  --quick-accent: #0a8a8a;
+  --quick-tint: rgba(10, 138, 138, 0.12);
+  --quick-line: rgba(10, 138, 138, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--product {
+  --quick-accent: #19856d;
+  --quick-tint: rgba(25, 133, 109, 0.12);
+  --quick-line: rgba(25, 133, 109, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--copywriting {
+  --quick-accent: #3f64cf;
+  --quick-tint: rgba(63, 100, 207, 0.12);
+  --quick-line: rgba(63, 100, 207, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--video {
+  --quick-accent: #2878a8;
+  --quick-tint: rgba(40, 120, 168, 0.12);
+  --quick-line: rgba(40, 120, 168, 0.16);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--more {
+  --quick-accent: #778894;
+  --quick-tint: rgba(119, 136, 148, 0.12);
+  --quick-line: rgba(119, 136, 148, 0.16);
+}
+
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
   color: var(--ecom-entry-text) !important;
-  font-size: 15px !important;
+  font-size: 14px !important;
+  font-weight: 800 !important;
   line-height: 1.35 !important;
 }
 
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
-  color: var(--ecom-entry-muted) !important;
-  font-size: 12px !important;
-  line-height: 1.45 !important;
+  display: grid !important;
+  place-items: center !important;
+  width: 28px !important;
+  height: 28px !important;
+  min-width: 28px !important;
+  border: 1px solid color-mix(in srgb, var(--quick-accent) 18%, transparent) !important;
+  border-radius: 10px !important;
+  color: var(--quick-accent) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.66), var(--quick-tint)) !important;
+  font-size: 14px !important;
+  line-height: 1 !important;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    transform 180ms ease !important;
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover span {
+  border-color: color-mix(in srgb, var(--quick-accent) 30%, transparent) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.82), color-mix(in srgb, var(--quick-accent) 17%, white)) !important;
+  transform: scale(1.04);
+}
+
+.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span svg {
+  width: 14px !important;
+  height: 14px !important;
 }
 
 .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
@@ -11361,7 +11466,7 @@
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
-    min-height: 72px !important;
+    min-height: 58px !important;
   }
 }
 
@@ -11427,22 +11532,28 @@
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
-    border-radius: 20px !important;
-    padding: 10px !important;
+    gap: 8px !important;
+    border-radius: 16px !important;
+    padding: 8px !important;
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
-    min-height: 62px !important;
-    padding: 12px !important;
-    border-radius: 16px !important;
+    min-height: 54px !important;
+    gap: 8px !important;
+    padding: 10px !important;
+    border-radius: 13px !important;
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
-    font-size: 14px !important;
+    font-size: 13px !important;
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
-    font-size: 11px !important;
+    width: 26px !important;
+    height: 26px !important;
+    min-width: 26px !important;
+    border-radius: 9px !important;
+    font-size: 13px !important;
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
@@ -11484,7 +11595,8 @@
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
-    min-height: 58px !important;
+    min-height: 52px !important;
+    padding-inline: 9px !important;
   }
 }
 
@@ -11498,7 +11610,7 @@
   }
 
   .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
-    min-height: 64px !important;
+    min-height: 54px !important;
   }
 }
 
@@ -12782,10 +12894,22 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
 }
 
 @media (max-width: 640px) {
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap {
+    width: min(100%, calc(100vw - 24px)) !important;
+    max-width: calc(100vw - 24px) !important;
+    min-width: 0 !important;
+    overflow: visible !important;
+  }
+
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
     gap: 12px !important;
     min-height: 318px !important;
     padding: 18px 16px 16px !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
   }
 
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
@@ -12794,17 +12918,33 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
 
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover,
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
+    align-self: stretch !important;
     gap: 10px !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
     min-height: 58px !important;
+    flex-wrap: nowrap !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    overscroll-behavior-inline: contain !important;
+    scrollbar-width: none !important;
+  }
+
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover::-webkit-scrollbar,
+  html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover::-webkit-scrollbar {
+    display: none !important;
   }
 
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+    flex: 0 0 58px !important;
     flex-basis: 58px !important;
     width: 58px !important;
     height: 58px !important;
+    min-width: 58px !important;
     min-height: 58px !important;
     border-radius: 14px !important;
   }
@@ -12823,6 +12963,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
   }
 
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
+    width: 100% !important;
+    min-width: 0 !important;
     min-height: 58px !important;
     padding-top: 12px !important;
   }
@@ -12842,9 +12984,11 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
   html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
+    flex: 0 0 54px !important;
     flex-basis: 54px !important;
     width: 54px !important;
     height: 54px !important;
+    min-width: 54px !important;
     min-height: 54px !important;
   }
 }