From d7e6f03157853976ebe35240cebc8a981981f780 Mon Sep 17 00:00:00 2001 From: Codex Date: Thu, 18 Jun 2026 16:19:59 +0800 Subject: [PATCH 1/3] feat: localize ecommerce quick tool pages --- src/features/ecommerce/EcommercePage.tsx | 176 ++++++++++++++---- .../panels/EcommerceOneClickVideoPanel.tsx | 44 ++++- .../ecommerce/panels/WatermarkToolPage.tsx | 4 + src/styles/ecommerce-standalone.css | 132 +++++++++++++ 4 files changed, 313 insertions(+), 43 deletions(-) diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index b2378a9..ee4e795 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/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: "作品记录", @@ -333,9 +349,6 @@ interface EcommerceImagePromptOptions { } const sideTools: Array<{ key: ProductKitToolKey; label: string; icon: ReactNode }> = [ - { key: "set", label: "商品套图", icon: }, - { key: "detail", label: "A+详情", icon: }, - { key: "wear", label: "服饰穿搭", icon: }, { key: "clone", label: "电商AI作图", icon: }, ]; @@ -1131,6 +1144,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const skipInitialCloneAutoSaveRef = useRef(true); const skipNextCloneAutoSaveRef = useRef(false); const [activeTool, setActiveTool] = useState("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); @@ -1675,7 +1700,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])); @@ -1720,6 +1745,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}` })), @@ -1734,6 +1763,33 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { [productImages], ); + const quickPageSidebarItems: Array<{ key: NonNullable; label: string; icon: ReactNode }> = [ + { key: "quick-set", label: "商品套图", icon: }, + { key: "detail", label: "A+详情", icon: }, + { key: "hot", label: "爆款复刻", icon: }, + { key: "oneClickVideo", label: "一键视频", icon: }, + { key: "image-edit", label: "图片修改", icon: }, + { key: "watermark", label: "去除水印", icon: }, + { key: "copywriting", label: "一键文案", icon: }, + { key: "translate", label: "图片翻译", icon: }, + ]; + + const renderQuickPageSidebar = (activeKey: NonNullable) => ( + + ); + const selectedProductSetOutput = productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!; const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!; @@ -2125,8 +2181,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const openImageTranslatePage = () => { clearSmartCutoutTransition(); + setActiveQuickTool("translate"); setComposerMenu(null); - toast.info("功能正在优化中"); }; const closeImageTranslatePage = () => { @@ -3171,7 +3227,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { setRatio((current) => normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput), ); - setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market)); }; const handleCloneOutputChange = (nextOutput: CloneOutputKey) => { @@ -3221,10 +3276,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)); }; @@ -3234,6 +3294,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, @@ -4378,7 +4444,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const handleHotPlatformChange = (nextPlatform: string) => { const normalizedPlatform = normalizePlatform(nextPlatform); setHotPlatform(normalizedPlatform); - setHotLanguage(getPlatformDefaultLanguage(normalizedPlatform, hotMarket)); setHotRatio((current) => getQuickSetRatioValue(current)); }; @@ -4388,6 +4453,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", @@ -4503,20 +4574,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { const handleHotMaterialMouseEnter = (src: string, event: ReactMouseEvent) => { 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); @@ -4540,13 +4610,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { onRemove(item.id); }} > - + 脳 ))} @@ -5173,8 +5237,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<{ @@ -5185,8 +5249,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 }, ]; @@ -5198,8 +5262,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 }, ]; @@ -5211,8 +5275,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 }, ]; @@ -7003,6 +7067,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
+
+

图片修改

+

上传图片后涂抹需要调整的区域，AI 将根据提示完成局部重绘。

+
{!imageWorkbenchImage ? (
+
+

图片翻译

+

上传含文字的图片并选择目标语种，AI 将识别文字并保持原图排版。

+
{!translateImage ? (
+ {renderQuickPageSidebar("watermark")} + {watermarkPreview} +
+ ) : isTranslateTool - ? translatePreview + ? ( +
+ {renderQuickPageSidebar("translate")} + {translatePreview} +
+ ) : isImageEditTool - ? imageWorkbenchPreview + ? ( +
+ {renderQuickPageSidebar("image-edit")} + {imageWorkbenchPreview} +
+ ) : isSmartCutoutTool ? smartCutoutPreview : isQuickDetailTool ? (
+ {renderQuickPageSidebar("detail")} {quickDetailPreview}
) : isHotCloneTool ? (
+ {renderQuickPageSidebar("hot")} {hotClonePreview}
) : isQuickSetTool ? (
+ {renderQuickPageSidebar("quick-set")} {quickSetGenPreview}
) : isCopywritingTool - ? copywritingPreview + ? ( +
+ {renderQuickPageSidebar("copywriting")} + {copywritingPreview} +
+ ) : isOneClickVideoTool - ? oneClickVideoPreview + ? ( +
+ {renderQuickPageSidebar("oneClickVideo")} + {oneClickVideoPreview} +
+ ) : clonePreview : placeholderPreview; const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool; diff --git a/src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx b/src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx index c50c0f8..791c33b 100644 --- a/src/features/ecommerce/panels/EcommerceOneClickVideoPanel.tsx +++ b/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(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) => { + 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 = () => (
{productImages.map((item) => ( -
+
handleThumbMouseEnter(item.src, event)} + onMouseLeave={() => setHoverZoom(null)} + > {item.name} -
+ {hoverZoom && typeof document !== "undefined" + ? createPortal( +
+ +
, + document.body, + ) + : null}
+
+

去除水印

+

上传含水印或文字遮挡的图片，AI 将清理画面并保留商品细节。

+
{!image ? (
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; + } +} From 7795ca3cbbf43258441d7dee45c7f6eafbe22197 Mon Sep 17 00:00:00 2001 From: ludan <251918489@qq.com> Date: Thu, 18 Jun 2026 18:28:57 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E8=AE=B0=E5=BD=95=E8=AF=A6?= =?UTF-8?q?=E6=83=85=E9=A1=B5Canvas=E6=8C=89=E8=BD=AE=E6=AC=A1=E5=88=86?= =?UTF-8?q?=E7=BB=84=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=AF=B9=E8=AF=9D=E9=9D=A2?= =?UTF-8?q?=E6=9D=BFUI=E9=87=8D=E6=9E=84=E4=B8=8E=E8=A7=86=E8=A7=89?= =?UTF-8?q?=E5=8D=87=E7=BA=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Canvas视图重构：记录详情页用 turn-groups 按生成轮次分组替代原 canvas-nodes，支持生成中/失败状态展示及拖拽定位 - 对话面板头部改为 title + actions 布局，新增首页返回按钮，移除独立 toggle - 对话收起时显示 recall 入口卡片，展示当前轮次摘要信息并支持一键展开继续对话 - 历史记录侧边栏列表项新增状态 class（is-generating/is-failed/is-done），元信息拆分为类型+状态标签结构 - CSS 新增 1772 行：记录详情页整体视觉升级（渐变背景、毛玻璃面板、胶囊卡片、状态色条），Canvas 节点响应式布局，Preview modal 底部操作栏美化 --- src/features/ecommerce/EcommercePage.tsx | 492 +++-- .../panels/CommandHistorySidebar.tsx | 20 +- src/styles/ecommerce-standalone.css | 1772 +++++++++++++++++ 3 files changed, 2150 insertions(+), 134 deletions(-) diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx index b2378a9..da97c2e 100644 --- a/src/features/ecommerce/EcommercePage.tsx +++ b/src/features/ecommerce/EcommercePage.tsx @@ -305,6 +305,20 @@ interface CanvasNode { y: number; } +interface RecordCanvasGroup { + id: string; + mode: string; + outputLabel: string; + settingLabel: string; + sourceImages: CloneImageItem[]; + results: CloneResult[]; + createdAt: number; + turnIndex: number; + status: EcommerceHistoryStatus; + x: number; + y: number; +} + interface PreviewTouchPoint { id: number; x: number; @@ -4695,6 +4709,65 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { isOneClickVideoTool || isVideoWorkspaceVisible || Boolean(activeHistoryRecordId); + const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool; + const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId); + const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null; + const activeConversationTurns = activeHistoryRecord + ? activeHistoryRecord.turns?.length + ? activeHistoryRecord.turns + : [buildHistoryTurnFromRecord(activeHistoryRecord)] + : []; + const activeRecallTurn = activeConversationTurns[activeConversationTurns.length - 1]; + const commandRecallPrompt = + requirement.trim() || + activeRecallTurn?.requirement?.trim() || + activeHistoryRecord?.requirement?.trim() || + "展开完整对话，继续补充生成需求。"; + const commandRecallAsset = productImages[0] || activeRecallTurn?.productImages?.[0] || activeHistoryRecord?.productImages?.[0]; + const commandRecallStatus = + status === "generating" + ? "生成中" + : activeRecallTurn?.status === "failed" || status === "failed" + ? "可恢复" + : "继续生成"; + const hasGeneratedCloneWork = status === "done" || canvasNodes.length > 0; + const shouldUseCompactComposer = isCommandComposerCompact && hasGeneratedCloneWork && !(isRecordDetailWorkspace && !isCloneConversationCollapsed); + const shouldShowScenarioScrollHint = !isRecordDetailWorkspace; + const getHistoryTurnSettingLabel = (turn: EcommerceHistoryTurn) => { + if (turn.settingLabel) return turn.settingLabel; + if (turn.output === "set" && turn.results?.length && !turn.setResultImages?.length) { + return `单图 ${turn.results.length}张`; + } + if (turn.output === "set") { + const total = cloneSetCountKeys.reduce((sum, key) => sum + (turn.setCounts?.[key] ?? 0), 0); + return `套图 ${total || 1}张`; + } + if (turn.output === "detail") return `详情 ${turn.detailModules?.length || 1}项`; + if (turn.output === "model") return `模特 ${turn.modelScenes?.length || 1}景`; + return cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label; + }; + const recordCanvasGroups: RecordCanvasGroup[] = isRecordDetailWorkspace + ? activeConversationTurns.reduce((groups, turn, index) => { + const turnResults = getTurnResults(turn); + if (!turnResults.length && turn.status !== "generating") return groups; + const canvasNode = canvasNodes.find((node) => node.id === turn.id); + const outputLabel = turn.modeLabel || cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label; + groups.push({ + id: turn.id, + mode: turn.output, + outputLabel, + settingLabel: getHistoryTurnSettingLabel(turn), + sourceImages: turn.productImages, + results: turnResults, + createdAt: turn.createdAt, + turnIndex: index + 1, + status: turn.status, + x: canvasNode?.x ?? groups.length * 420, + y: canvasNode?.y ?? (groups.length % 2 === 0 ? 0 : 160), + }); + return groups; + }, []) + : []; useEffect(() => { onWorkspaceChromeChange?.({ isToolPage: isWorkspaceToolPage }); @@ -6109,93 +6182,211 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { ) ) : ( <> - {status === "done" || canvasNodes.length > 0 ? ( + {status === "done" || canvasNodes.length > 0 || (isRecordDetailWorkspace && recordCanvasGroups.length > 0) ? (
-
- {canvasNodes.map((node) => ( -
startCanvasNodeDrag(event, node)} - onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)} - onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)} - onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)} - > -
{ - if (e.button !== 0) return; - e.stopPropagation(); - e.currentTarget.setPointerCapture(e.pointerId); - nodeDragRef.current = { active: true, nodeId: node.id, startX: e.clientX, startY: e.clientY, originX: node.x, originY: node.y }; - }} - onPointerMove={(e) => { - const drag = nodeDragRef.current; - if (!drag.active || drag.nodeId !== node.id) return; - const zoom = previewZoomRef.current; - const dx = (e.clientX - drag.startX) / zoom; - const dy = (e.clientY - drag.startY) / zoom; - setCanvasNodes((prev) => prev.map((n) => n.id === node.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n)); - }} - onPointerUp={(e) => { - if (nodeDragRef.current.nodeId === node.id) { - nodeDragRef.current = { ...nodeDragRef.current, active: false }; - e.currentTarget.releasePointerCapture(e.pointerId); - } - }} - /> -
- - -
-
+ ); + })} + {status === "generating" && !recordCanvasGroups.some((group) => group.status === "generating") ? ( +
+
+
+ 继续生成 + {selectedCloneOutput.label} +
+ AI 正在整理新一轮结果 +
+
+ + 正在生成{selectedCloneOutput.label}... +
+
+ ) : null} +
+ ) : ( +
+ {canvasNodes.map((node) => ( +
startCanvasNodeDrag(event, node)} + onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)} + onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)} + onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)} + > +
{ + if (e.button !== 0) return; + e.stopPropagation(); + e.currentTarget.setPointerCapture(e.pointerId); + nodeDragRef.current = { active: true, nodeId: node.id, startX: e.clientX, startY: e.clientY, originX: node.x, originY: node.y }; + }} + onPointerMove={(e) => { + const drag = nodeDragRef.current; + if (!drag.active || drag.nodeId !== node.id) return; + const zoom = previewZoomRef.current; + const dx = (e.clientX - drag.startX) / zoom; + const dy = (e.clientY - drag.startY) / zoom; + setCanvasNodes((prev) => prev.map((n) => n.id === node.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n)); + }} + onPointerUp={(e) => { + if (nodeDragRef.current.nodeId === node.id) { + nodeDragRef.current = { ...nodeDragRef.current, active: false }; + e.currentTarget.releasePointerCapture(e.pointerId); + } + }} + /> +
+ - ))} -
-
-
- ))} - {status === "generating" ? ( -
- - 正在生成{selectedCloneOutput.label}… -
- ) : null} -
+ +
+
+ )}
) : status === "idle" || status === "ready" ? null : (
@@ -6221,13 +6412,71 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
0 ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && (status === "done" || canvasNodes.length > 0) ? " is-compact" : ""}`} - aria-label="生成指令" + className={`clone-ai-bottom-input ecom-command-composer-wrap${hasGeneratedCloneWork ? " has-generated" : " is-before-generate"}${shouldUseCompactComposer ? " is-compact" : ""}${isRecordDetailWorkspace && isCloneConversationCollapsed ? " is-recall-entry" : ""}`} + aria-label={isRecordDetailWorkspace && isCloneConversationCollapsed ? "展开完整生成指令" : "生成指令"} + role={isRecordDetailWorkspace && isCloneConversationCollapsed ? "button" : undefined} + tabIndex={isRecordDetailWorkspace && isCloneConversationCollapsed ? 0 : undefined} + onClickCapture={(event) => { + if (isRecordDetailWorkspace && isCloneConversationCollapsed) { + if ((event.target as HTMLElement).closest(".ecom-command-recall__home")) return; + event.preventDefault(); + event.stopPropagation(); + setIsCloneConversationCollapsed(false); + window.setTimeout(() => requirementTextareaRef.current?.focus(), 180); + } + }} onClick={() => { + if (isRecordDetailWorkspace && isCloneConversationCollapsed) { + setIsCloneConversationCollapsed(false); + window.setTimeout(() => requirementTextareaRef.current?.focus(), 180); + return; + } if (isCommandComposerCompact) setIsCommandComposerCompact(false); }} + onKeyDown={(event) => { + if (!isRecordDetailWorkspace || !isCloneConversationCollapsed) return; + if (event.key !== "Enter" && event.key !== " ") return; + event.preventDefault(); + setIsCloneConversationCollapsed(false); + window.setTimeout(() => requirementTextareaRef.current?.focus(), 180); + }} > -

0 ? " is-after-generate" : ""}`}> + {isRecordDetailWorkspace && isCloneConversationCollapsed ? ( +
+ + + + {commandRecallStatus} + + {commandRecallPrompt} + + + +
+ ) : null} +

{typewriterText}

@@ -6287,9 +6536,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { - + {shouldShowScenarioScrollHint ? ( + + ) : null}
{productImages.length ? (
@@ -8268,28 +8519,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { ? oneClickVideoPreview : clonePreview : placeholderPreview; - const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool; - const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId); const currentResultCount = canvasNodes.reduce((count, node) => count + node.results.length, 0); - const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null; - const activeConversationTurns = activeHistoryRecord - ? activeHistoryRecord.turns?.length - ? activeHistoryRecord.turns - : [buildHistoryTurnFromRecord(activeHistoryRecord)] - : []; - const getHistoryTurnSettingLabel = (turn: EcommerceHistoryTurn) => { - if (turn.settingLabel) return turn.settingLabel; - if (turn.output === "set" && turn.results?.length && !turn.setResultImages?.length) { - return `单图 ${turn.results.length}张`; - } - if (turn.output === "set") { - const total = cloneSetCountKeys.reduce((sum, key) => sum + (turn.setCounts?.[key] ?? 0), 0); - return `套图 ${total || 1}张`; - } - if (turn.output === "detail") return `详情 ${turn.detailModules?.length || 1}项`; - if (turn.output === "model") return `模特 ${turn.modelScenes?.length || 1}景`; - return cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label; - }; const restoreHistoryTurnInputs = (turn: EcommerceHistoryTurn) => { setCloneOutput(turn.output); setPlatform(turn.platform); @@ -8350,18 +8580,30 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { <> - ) : null} diff --git a/src/features/ecommerce/panels/CommandHistorySidebar.tsx b/src/features/ecommerce/panels/CommandHistorySidebar.tsx index 03c341d..ed0a2eb 100644 --- a/src/features/ecommerce/panels/CommandHistorySidebar.tsx +++ b/src/features/ecommerce/panels/CommandHistorySidebar.tsx @@ -75,7 +75,7 @@ export default function CommandHistorySidebar({
生成记录 - {records.length} 条 + {records.length} 条
{refreshMessage ? (

@@ -86,13 +86,25 @@ export default function CommandHistorySidebar({ {records.length ? ( records.map((record) => { const outputLabel = outputLabels.find((option) => option.key === record.output)?.label || "生成记录"; + const statusKey = record.status === "generating" ? "generating" : record.status === "failed" ? "failed" : "done"; const statusLabel = record.status === "generating" ? "生成中" : record.status === "failed" ? "失败" : formatHistoryTime(record.createdAt); return ( -

- + ) : null} + + ) : null}
取消生成 ) : null} + {hotMaterialHoverZoom && typeof document !== "undefined" + ? createPortal( +
+ +
, + document.body, + ) + : null}

预览

@@ -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)}
+ {hotMaterialHoverZoom && typeof document !== "undefined" + ? createPortal( +
+ +
, + document.body, + ) + : null}

预览

@@ -8632,11 +8681,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { ); - const copywritingPreview = ( -
- -
- ); + const copywritingPreview = ; const oneClickVideoPreview = (
@@ -8684,21 +8729,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { ? isWatermarkTool ? (
- {renderQuickPageSidebar("watermark")} + {renderQuickPageSidebar("watermark", "visual")} {watermarkPreview}
) : isTranslateTool ? (
- {renderQuickPageSidebar("translate")} + {renderQuickPageSidebar("translate", "visual")} {translatePreview}
) : isImageEditTool ? (
- {renderQuickPageSidebar("image-edit")} + {renderQuickPageSidebar("image-edit", "visual")} {imageWorkbenchPreview}
) @@ -8728,13 +8773,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) { : isCopywritingTool ? (
- {renderQuickPageSidebar("copywriting")} + {renderQuickPageSidebar("copywriting", "visual")} {copywritingPreview}
) : isOneClickVideoTool ? ( -
+
{renderQuickPageSidebar("oneClickVideo")} {oneClickVideoPreview}
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css index fdf8a3b..540900c 100644 --- a/src/styles/ecommerce-standalone.css +++ b/src/styles/ecommerce-standalone.css @@ -5022,6 +5022,35 @@ min-height: 0 !important; } +.ecommerce-standalone .ecom-one-click-video-wrap { + display: flex !important; + align-items: stretch !important; +} + +.ecommerce-standalone .ecom-one-click-video-wrap > .ecom-quick-page-sidebar { + position: relative !important; + z-index: 5 !important; + flex: 0 0 76px !important; + width: 76px !important; + min-width: 76px !important; +} + +.ecommerce-standalone .ecom-one-click-video-wrap > .ecom-one-click-video-page { + position: relative !important; + inset: auto !important; + flex: 1 1 0% !important; + width: auto !important; + min-width: 0 !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap > .ecom-one-click-video-page { + position: relative !important; + inset: auto !important; + flex: 1 1 0% !important; + width: auto !important; + min-width: 0 !important; +} + .ecommerce-standalone .ecom-image-workbench-page { position: relative !important; @@ -10170,6 +10199,105 @@ cursor: not-allowed !important; } +.ecommerce-standalone .ecom-quick-set-count-section { + background: #f8fcff !important; + border-color: rgba(16, 115, 204, 0.12) !important; +} + +.ecommerce-standalone .ecom-quick-set-count-section .ecom-quick-set-hint { + margin: 4px 0 12px !important; + color: #60768a !important; + font-size: 12px !important; + font-weight: 700 !important; + line-height: 1.5 !important; +} + +.ecommerce-standalone .ecom-quick-set-counts { + display: grid !important; + gap: 10px !important; +} + +.ecommerce-standalone .ecom-quick-set-count-row { + display: grid !important; + grid-template-columns: minmax(0, 1fr) auto !important; + align-items: center !important; + gap: 12px !important; + min-height: 62px !important; + padding: 10px 12px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 10px !important; + background: #ffffff !important; + box-shadow: 0 6px 18px rgba(16, 115, 204, 0.045) !important; + transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-count-row:hover { + border-color: rgba(16, 115, 204, 0.24) !important; + box-shadow: 0 10px 22px rgba(16, 115, 204, 0.07) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-quick-set-count-info { + display: grid !important; + gap: 4px !important; + min-width: 0 !important; +} + +.ecommerce-standalone .ecom-quick-set-count-info strong { + color: #123047 !important; + font-size: 13px !important; + font-weight: 950 !important; + line-height: 1.25 !important; +} + +.ecommerce-standalone .ecom-quick-set-count-info span { + color: #6b8193 !important; + font-size: 11px !important; + font-weight: 700 !important; + line-height: 1.35 !important; +} + +.ecommerce-standalone .ecom-quick-set-count-row .clone-ai-count-stepper { + display: inline-grid !important; + grid-template-columns: 28px 32px 28px !important; + align-items: center !important; + overflow: hidden !important; + border: 1px solid rgba(16, 115, 204, 0.16) !important; + border-radius: 9px !important; + background: #eef8ff !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; +} + +.ecommerce-standalone .ecom-quick-set-count-row .clone-ai-count-stepper button, +.ecommerce-standalone .ecom-quick-set-count-row .clone-ai-count-stepper b { + display: inline-grid !important; + place-items: center !important; + min-width: 0 !important; + min-height: 30px !important; + margin: 0 !important; + border: 0 !important; + color: #1073cc !important; + background: transparent !important; + font-size: 13px !important; + font-weight: 950 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .ecom-quick-set-count-row .clone-ai-count-stepper b { + color: #10202c !important; + background: rgba(255, 255, 255, 0.82) !important; +} + +.ecommerce-standalone .ecom-quick-set-count-row .clone-ai-count-stepper button:hover:not(:disabled) { + color: #ffffff !important; + background: #1073cc !important; +} + +.ecommerce-standalone .ecom-quick-set-count-row .clone-ai-count-stepper button:disabled { + color: #b3c1ca !important; + cursor: not-allowed !important; +} + .ecommerce-standalone .ecom-quick-set-primary, .ecommerce-standalone .ecom-watermark-primary, .ecommerce-standalone .ecom-image-workbench-primary { @@ -23034,3 +23162,557 @@ html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"] .ecomm display: none !important; } } + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-set-count-row .clone-ai-count-stepper { + border-color: rgba(16, 115, 204, 0.2) !important; + background: #f1f8ff !important; + color: #1073cc !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-set-count-row .clone-ai-count-stepper button { + color: #1073cc !important; + background: transparent !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-set-count-row .clone-ai-count-stepper button:hover:not(:disabled) { + color: #075ea8 !important; + background: #dff2ff !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-set-count-row .clone-ai-count-stepper b { + color: #10202c !important; + background: #f1f8ff !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material:not(.has-images) { + min-height: 94px !important; + padding: 12px 14px !important; + gap: 6px !important; + border: 1px dashed rgba(30, 189, 219, 0.28) !important; + border-radius: 8px !important; + background: #ffffff !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material:not(.has-images):hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material:not(.has-images):focus-visible { + border-color: rgba(30, 189, 219, 0.36) !important; + background: #ffffff !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.06) !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material:not(.has-images) > .anticon { + color: #1ebddb !important; + font-size: 22px !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material:not(.has-images) > span { + color: #253544 !important; + font-size: 14px !important; + font-weight: 950 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material:not(.has-images) > em { + color: #71818e !important; + font-size: 12px !important; + font-weight: 850 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material:not(.has-images) > b { + min-height: 36px !important; + padding: 0 20px !important; + border: 1px solid rgba(30, 189, 219, 0.28) !important; + border-radius: 8px !important; + color: #1073cc !important; + background: #ffffff !important; + box-shadow: none !important; + font-size: 14px !important; + font-weight: 950 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images { + display: flex !important; + flex-wrap: wrap !important; + align-items: flex-start !important; + justify-content: flex-start !important; + gap: 10px !important; + min-height: 0 !important; + height: auto !important; + padding: 10px !important; + overflow: visible !important; + border: 1px solid #e8edf0 !important; + border-radius: 8px !important; + background: #ffffff !important; + box-shadow: none !important; + transform: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images:focus-visible, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images:focus-visible, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images:focus-visible, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images:focus-visible, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images.is-dragging, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images.is-dragging, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images.is-dragging, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images.is-dragging { + border-color: rgba(30, 189, 219, 0.32) !important; + background: #ffffff !important; + box-shadow: 0 8px 20px rgba(16, 115, 204, 0.06) !important; + transform: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-quick-upload-thumbs, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-upload-thumbs { + display: contents !important; + width: auto !important; + max-width: none !important; + padding: 0 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images > .anticon, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images > span, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images > em, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images > b, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-set-upload.has-images > .anticon, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-set-upload.has-images > span, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-set-upload.has-images > em, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-set-upload.has-images > b { + display: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb { + position: relative !important; + flex: 0 0 64px !important; + width: 64px !important; + height: 64px !important; + min-width: 64px !important; + min-height: 64px !important; + margin: 0 !important; + overflow: visible !important; + border: 1px solid #e8edf0 !important; + border-radius: 8px !important; + background: #f6f8fa !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb .ecom-command-asset-zoom { + display: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > img, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > img, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > img, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > img { + display: block !important; + width: 100% !important; + height: 100% !important; + overflow: hidden !important; + border-radius: 8px !important; + object-fit: cover !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button { + 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; + opacity: 1 !important; + pointer-events: auto !important; + visibility: visible !important; + transform: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button: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; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-quick-hot-add-btn, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn { + display: inline-flex !important; + flex: 0 0 64px !important; + width: 64px !important; + height: 64px !important; + min-width: 64px !important; + min-height: 64px !important; + margin: 0 !important; + border: 1px solid #e8edf0 !important; + border-radius: 8px !important; + color: #1073cc !important; + background: #ffffff !important; + box-shadow: none !important; + font-size: 22px !important; + transform: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-set-upload.has-images .ecom-quick-hot-add-btn:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-quick-hot-add-btn:hover { + border-color: rgba(30, 189, 219, 0.32) !important; + color: #1073cc !important; + background: #ffffff !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.06) !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-page-wrap > main.ecom-one-click-video-page { + position: absolute !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + left: 76px !important; + width: calc(100% - 76px) !important; + max-width: calc(100% - 76px) !important; + min-width: 0 !important; + z-index: 1 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-page-wrap > .ecom-quick-page-sidebar { + position: relative !important; + z-index: 3 !important; +} + +@media (max-width: 960px) { + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-one-click-video-page .ecom-quick-page-wrap > main.ecom-one-click-video-page { + position: absolute !important; + top: 68px !important; + right: 0 !important; + bottom: 0 !important; + left: 0 !important; + width: 100% !important; + max-width: 100% !important; + } +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .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: 30 !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; + overflow: visible !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; + cursor: pointer !important; + font-size: 0 !important; + font-weight: 700 !important; + line-height: 1 !important; + opacity: 1 !important; + pointer-events: auto !important; + transform: none !important; + visibility: visible !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete::before, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete::before, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete::before, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete::before { + content: "×" !important; + display: block !important; + color: currentColor !important; + font-size: 18px !important; + font-weight: 700 !important; + line-height: 20px !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete > *, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete > *, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete > *, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete > * { + display: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-quick-page-wrap .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-hot-clone-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-hot-page .ecom-quick-hot-material.has-images .ecom-command-asset-thumb.ecom-quick-upload-thumb > button.ecom-hot-material-delete:hover, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-quick-detail-page .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; +} + +/* Visual quick tools: restore the localized side-panel/workspace layout. */ +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-quick-page-wrap, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-quick-page-wrap, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-quick-page-wrap, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-quick-page-wrap { + display: flex !important; + align-items: stretch !important; + width: 100% !important; + height: 100% !important; + min-width: 0 !important; + min-height: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-page, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-page, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-page, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-translate-page { + flex: 1 1 0% !important; + width: auto !important; + min-width: 0 !important; + min-height: 0 !important; + height: 100% !important; + background: #f3f5f8 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-page, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-page, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-translate-page { + display: grid !important; + grid-template-columns: 360px minmax(0, 1fr) !important; + align-items: stretch !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-page { + grid-template-columns: 360px minmax(0, 1fr) !important; + gap: 0 !important; + padding: 0 !important; + background: #eef3f7 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-body { + grid-template-columns: 360px minmax(0, 1fr) !important; + height: 100% !important; + min-height: 0 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-side, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-side, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-panel, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-side { + width: 360px !important; + min-width: 0 !important; + max-width: none !important; + background: #ffffff !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-side { + gap: 10px !important; + height: 100% !important; + padding: 18px 16px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-right: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 0 !important; + background: #ffffff !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-primary { + margin-top: 2px !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-stage, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-workspace, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-stage, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-workspace { + display: grid !important; + grid-template-rows: auto minmax(0, 1fr) !important; + align-content: stretch !important; + min-width: 0 !important; + min-height: 0 !important; + padding: 20px 24px 24px !important; + overflow: auto !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-visual-workspace-head.ecom-copywriting-preview-head, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-visual-workspace-head.ecom-copywriting-preview-head, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-visual-workspace-head.ecom-copywriting-preview-head, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-preview-head { + display: grid !important; + gap: 6px !important; + margin: 0 0 16px !important; + padding: 0 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-visual-workspace-head.ecom-copywriting-preview-head h1, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-visual-workspace-head.ecom-copywriting-preview-head h1, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-visual-workspace-head.ecom-copywriting-preview-head h1, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-preview-head h1 { + margin: 0 !important; + color: #172636 !important; + font-size: 21px !important; + font-weight: 950 !important; + line-height: 1.25 !important; + letter-spacing: 0 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-visual-workspace-head.ecom-copywriting-preview-head p, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-visual-workspace-head.ecom-copywriting-preview-head p, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-visual-workspace-head.ecom-copywriting-preview-head p, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-preview-head p { + margin: 0 !important; + color: #657686 !important; + font-size: 13px !important; + font-weight: 750 !important; + line-height: 1.5 !important; + letter-spacing: 0 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-watermark-dropzone, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-dropzone, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-dropzone { + align-self: stretch !important; + min-height: 320px !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-type-card { + align-items: center !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-type-icon, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-type-icon .anticon, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-type-icon svg { + display: inline-grid !important; + place-items: center !important; + align-items: center !important; + justify-content: center !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-type-icon svg { + width: 16px !important; + height: 16px !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-side { + display: flex !important; + flex-direction: column !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-panel-head { + order: 0 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-intro { + order: 1 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-side > section.ecom-watermark-panel:nth-of-type(2) { + order: 2 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-translate-lang-panel { + order: 3 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-side > section.ecom-watermark-panel:nth-of-type(3) { + order: 4 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-primary { + order: 5 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-quick-set-panel-head .ecom-quick-set-page-title, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-quick-set-panel-head .ecom-quick-set-page-title, +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-quick-set-panel-head .ecom-quick-set-page-title { + margin-right: auto !important; + color: #10202c !important; + font-size: 17px !important; + font-weight: 950 !important; + line-height: 1.25 !important; + letter-spacing: 0 !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-intro { + display: none !important; +} + +html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-page:not(.ecom-translate-page) .ecom-watermark-intro { + display: none !important; +} + +@media (max-width: 1180px) { + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-page, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-page, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-translate-page, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-body { + grid-template-columns: 320px minmax(0, 1fr) !important; + } + + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-side, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-side, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-panel, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-side { + width: 320px !important; + } +} + +@media (max-width: 960px) { + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-quick-page-wrap, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-quick-page-wrap, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-quick-page-wrap, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-quick-page-wrap { + flex-direction: column !important; + } + + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-page, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-page, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-translate-page, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-body { + grid-template-columns: 1fr !important; + grid-template-rows: auto minmax(0, 1fr) !important; + } + + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-image-workbench-side, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-watermark-side, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-copywriting-page .ecom-copywriting-panel, + html body #root .ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-watermark-side { + width: 100% !important; + max-height: 46vh !important; + } +}