Compare commits

...

2 Commits

Author SHA1 Message Date
stringadmin 9945008b94 Merge pull request 'feat: ecommerce quick tool UI responsive polish' (#34) from feat/ecommerce-ui-responsive-polish-20260618 into main
CI / verify (push) Waiting to run
Reviewed-on: #34
2026-06-18 10:36:28 +00:00
Codex 426e670934 feat: ecommerce quick tool UI responsive polish
CI / verify (pull_request) Waiting to run
2026-06-18 18:35:48 +08:00
2 changed files with 742 additions and 15 deletions
+60 -15
View File
@@ -1861,9 +1861,19 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
{ key: "translate", label: "图片翻译", icon: <TranslationOutlined /> },
];
const renderQuickPageSidebar = (activeKey: NonNullable<typeof activeQuickTool>) => (
const commerceQuickPageSidebarItems = quickPageSidebarItems.filter((item) =>
["quick-set", "detail", "hot", "oneClickVideo"].includes(item.key),
);
const visualQuickPageSidebarItems = quickPageSidebarItems.filter((item) =>
["image-edit", "watermark", "copywriting", "translate"].includes(item.key),
);
const renderQuickPageSidebar = (
activeKey: NonNullable<typeof activeQuickTool>,
group: "commerce" | "visual" = "commerce",
) => (
<nav className="ecom-quick-page-sidebar" aria-label="快捷工具切换">
{quickPageSidebarItems.map((item) => (
{(group === "visual" ? visualQuickPageSidebarItems : commerceQuickPageSidebarItems).map((item) => (
<button
key={item.key}
type="button"
@@ -7835,7 +7845,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<div
role="button"
tabIndex={0}
className={`ecom-quick-set-upload${detailProductImages.length ? " has-images" : ""}`}
className={`ecom-quick-set-upload ecom-quick-hot-material${detailProductImages.length ? " has-images" : ""}`}
onClick={() => detailInputRef.current?.click()}
onKeyDown={(event) => openQuickUploadWithKeyboard(event, detailInputRef)}
onDragOver={(event) => event.preventDefault()}
@@ -7845,7 +7855,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<span></span>
<em> 3 </em>
<b>+ </b>
{detailProductImages.length ? renderQuickUploadThumbs(detailProductImages, removeDetailImage) : null}
{detailProductImages.length ? (
<>
{renderHotMaterialThumbs(detailProductImages, removeDetailImage)}
{detailProductImages.length < 3 ? (
<button
type="button"
className="ecom-quick-hot-add-btn"
aria-label="Add more detail images"
onClick={(event) => {
event.stopPropagation();
detailInputRef.current?.click();
}}
>
<PlusOutlined />
</button>
) : null}
</>
) : null}
</div>
<input
ref={detailInputRef}
@@ -7931,6 +7958,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<button type="button" className="ecom-quick-set-primary ecom-quick-set-primary--cancel" onClick={handleCancelGenerate}></button>
) : null}
</aside>
{hotMaterialHoverZoom && typeof document !== "undefined"
? createPortal(
<div
className={`ecom-hot-material-zoom-portal is-${hotMaterialHoverZoom.placement}`}
style={{ left: hotMaterialHoverZoom.x, top: hotMaterialHoverZoom.y }}
>
<img src={hotMaterialHoverZoom.src} alt="" />
</div>,
document.body,
)
: null}
<section className="ecom-quick-set-stage">
<header className="ecom-quick-set-preview-head">
<h1></h1>
@@ -8299,7 +8337,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsProductUploadDragging(false); }}
onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsProductUploadDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addProductImages(files); }}
>
{renderQuickUploadThumbs(productImages, removeProductImage)}
{renderHotMaterialThumbs(productImages, removeProductImage)}
<button
type="button"
className="ecom-quick-hot-add-btn"
@@ -8458,6 +8496,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
</button>
</div>
</aside>
{hotMaterialHoverZoom && typeof document !== "undefined"
? createPortal(
<div
className={`ecom-hot-material-zoom-portal is-${hotMaterialHoverZoom.placement}`}
style={{ left: hotMaterialHoverZoom.x, top: hotMaterialHoverZoom.y }}
>
<img src={hotMaterialHoverZoom.src} alt="" />
</div>,
document.body,
)
: null}
<section className="ecom-quick-set-stage">
<header className="ecom-quick-set-preview-head">
<h1></h1>
@@ -8632,11 +8681,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
</main>
);
const copywritingPreview = (
<div key="copywriting" className="ecom-quick-page-wrap ecom-tool-page-enter">
<EcommerceCopywritingPanel onClose={closeCopywritingPage} />
</div>
);
const copywritingPreview = <EcommerceCopywritingPanel onClose={closeCopywritingPage} />;
const oneClickVideoPreview = (
<div key="oneClickVideo" className="ecom-quick-page-wrap ecom-tool-page-enter">
@@ -8684,21 +8729,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
? isWatermarkTool
? (
<div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
{renderQuickPageSidebar("watermark")}
{renderQuickPageSidebar("watermark", "visual")}
{watermarkPreview}
</div>
)
: isTranslateTool
? (
<div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
{renderQuickPageSidebar("translate")}
{renderQuickPageSidebar("translate", "visual")}
{translatePreview}
</div>
)
: isImageEditTool
? (
<div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
{renderQuickPageSidebar("image-edit")}
{renderQuickPageSidebar("image-edit", "visual")}
{imageWorkbenchPreview}
</div>
)
@@ -8728,13 +8773,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
: isCopywritingTool
? (
<div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
{renderQuickPageSidebar("copywriting")}
{renderQuickPageSidebar("copywriting", "visual")}
{copywritingPreview}
</div>
)
: isOneClickVideoTool
? (
<div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
<div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-one-click-video-wrap ecom-tool-page-enter">
{renderQuickPageSidebar("oneClickVideo")}
{oneClickVideoPreview}
</div>
+682
View File
@@ -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;
}
}