OmniAI/omniai-ds-code-package
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 重构电商指令栏布局，模式标签外置、精简结果标签、优化生成记录交互 #13

Merged
stringadmin merged 2 commits from feat/ecommerce-composer-redesign into main 2026-06-13 11:29:36 +00:00
Conversation 0 Commits 2 Files Changed 2
+515 -100
2 changed files with 515 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/ecommerce/EcommercePage.tsx
+59 -100
View File
@@ -106,8 +106,8 @@ const ecommerceInspirationAssets = ossAssets.ecommerce.inspiration;
const ecommerceInspirationRows = [
{
title: "社区集锦",
desc: "不止作图，更懂转化。",
title: "作品记录",
desc: "沉淀最近生成的高转化素材，随时回看与复用。",
variant: "team",
cards: [
{ title: "指定ASIN，优化listing", meta: "竞品拆解 · 卖点重排 · 图文建议", mediaUrl: ecommerceInspirationAssets.asinListing, mediaType: "image" },
@@ -3295,8 +3295,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
}, [openCloneBasicSelect]);
useEffect(() => {
const shouldAutoCompactComposer = (status === "generating" || status === "done") && !isCommandComposerCompact;
if (!composerMenu && !shouldAutoCompactComposer) return undefined;
if (!composerMenu && !(status === "done" && !isCommandComposerCompact)) return undefined;
const handlePointerDown = (event: PointerEvent) => {
const target = event.target;
@@ -3305,19 +3304,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
if (composer?.contains(target)) return;
if (composerMenu && composerMenu !== "settings") setComposerMenu(null);
if (shouldAutoCompactComposer) setIsCommandComposerCompact(true);
if (status === "done" && !isCommandComposerCompact) setIsCommandComposerCompact(true);
};
document.addEventListener("pointerdown", handlePointerDown);
return () => document.removeEventListener("pointerdown", handlePointerDown);
}, [composerMenu, isCommandComposerCompact, status]);
useEffect(() => {
if ((status === "generating" || status === "done") && !isCommandComposerCompact) {
setIsCommandComposerCompact(true);
}
}, [isCommandComposerCompact, status]);
useEffect(() => {
if (composerMenuCloseTimeoutRef.current !== null) {
window.clearTimeout(composerMenuCloseTimeoutRef.current);
@@ -4494,14 +4487,12 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
onClick={() => openProductSetPreview(setPreviewCards[0] ?? productSetPreviewCards[0])}
>
<img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
<span>原图素材</span>
</button>
<div className="product-set-flow-arrow" aria-hidden="true" />
<div className="product-set-card-grid result-reveal">
{setPreviewCards.map((card) => (
<button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
<img src={card.src} alt={card.label} />
<span>{card.label}</span>
</button>
))}
</div>
@@ -4773,12 +4764,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
};
const showMainVideoWorkspace = cloneOutput === "video" && isVideoWorkspaceVisible;
const hasGenerationSurface = status === "generating" || status === "done" || canvasNodes.length > 0;
const showPreGenerationGuides =
(status === "idle" || status === "ready") &&
!showMainVideoWorkspace &&
!activeHistoryRecordId &&
canvasNodes.length === 0;
const scrollInspirationRow = (event: ReactMouseEvent<HTMLButtonElement>, direction: -1 | 1) => {
const row = event.currentTarget.closest(".ecom-inspiration-row");
@@ -4998,38 +4983,23 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
e.currentTarget.releasePointerCapture(e.pointerId);
}
}}
>
<span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
</div>
/>
{node.sourceImage ? (
<div className="clone-ai-source-stack">
<button
type="button"
className="clone-ai-source-corner-action"
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
>
原图素材
</button>
<button
type="button"
className="clone-ai-main-result"
aria-label="预览原图素材"
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
>
<img src={node.sourceImage} alt="原图素材" />
</button>
</div>
<button
type="button"
className="clone-ai-main-result"
onClick={() => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" })}
>
<img src={node.sourceImage} alt="原图素材" />
</button>
) : null}
<div className="clone-ai-flow-arrow" aria-hidden="true" />
<div className="clone-ai-result-stack">
<div className="clone-ai-result-grid result-reveal">
{node.results.map((card) => (
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
<img src={card.src} alt={card.label} />
<span>{card.label}</span>
</button>
))}
</div>
<div className="clone-ai-result-grid result-reveal">
{node.results.map((card) => (
<button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
<img src={card.src} alt={card.label} />
</button>
))}
</div>
</article>
))}
@@ -5065,18 +5035,16 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<section
ref={commandComposerWrapRef}
className={`clone-ai-bottom-input ecom-command-composer-wrap${hasGenerationSurface ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && hasGenerationSurface ? " is-compact" : ""}`}
className={`clone-ai-bottom-input ecom-command-composer-wrap${status === "done" || canvasNodes.length > 0 ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && (status === "done" || canvasNodes.length > 0) ? " is-compact" : ""}`}
aria-label="生成指令"
onClick={() => {
if (isCommandComposerCompact && status !== "generating") setIsCommandComposerCompact(false);
if (isCommandComposerCompact) setIsCommandComposerCompact(false);
}}
>
{!hasGenerationSurface ? (
<h1 className="ecom-command-title">
{typewriterText}
<span className="typewriter-cursor" aria-hidden="true">|</span>
</h1>
) : null}
<h1 className={`ecom-command-title${status === "done" || canvasNodes.length > 0 ? " is-after-generate" : ""}`}>
{typewriterText}
<span className="typewriter-cursor" aria-hidden="true">|</span>
</h1>
<input
ref={cloneReferenceInputRef}
type="file"
@@ -5104,27 +5072,20 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
onChange={handleSmartCutoutUpload}
aria-label="上传智能抠图素材"
/>
<div className="ecom-command-mode-tabs" aria-label="生成模式">
{cloneOutputOptions.map((option) => (
<button
key={option.key}
type="button"
className={cloneOutput === option.key ? "is-active" : ""}
onClick={() => handleCloneOutputChange(option.key)}
>
<span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
<strong>{option.label}</strong>
</button>
))}
</div>
<div className="clone-ai-input-wrapper ecom-command-composer">
<button
type="button"
className={`ecom-command-reference${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
onClick={() => productInputRef.current?.click()}
onDragEnter={(event) => {
event.preventDefault();
setIsProductUploadDragging(true);
}}
onDragOver={(event) => event.preventDefault()}
onDragLeave={() => setIsProductUploadDragging(false)}
onDrop={(event) => {
event.preventDefault();
setIsProductUploadDragging(false);
const files = Array.from(event.dataTransfer.files);
if (files.length) addComposerAssets(files);
}}
>
<span aria-hidden="true"><CloudUploadOutlined /></span>
<strong>上传商品图</strong>
</button>
{productImages.length ? (
<div className="ecom-command-asset-popover" aria-label="已上传素材">
{productImages.map((image) => (
@@ -5141,6 +5102,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<button type="button" className="ecom-command-asset-add" onClick={() => productInputRef.current?.click()} aria-label="继续上传">+</button>
</div>
) : null}
<div className="ecom-command-option-row ecom-command-option-row--settings">
<button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
<span>平台</span>{platform}
</button>
<button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
<span>语种</span>{language}
</button>
<button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
<span>比例</span>{formatRatioDisplayValue(ratio)}
</button>
<button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
<span>设置</span>{composerSettingLabel}
</button>
</div>
<textarea
ref={requirementTextareaRef}
value={requirement}
@@ -5161,10 +5140,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
) : null}
<div className="ecom-command-toolbar" aria-label="生成设置">
<div className="ecom-command-option-row">
<div className="ecom-command-composer-actions">
<button
type="button"
className={`ecom-command-reference ecom-command-reference--inline${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
className={`ecom-command-reference ecom-command-reference--bottom${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
onClick={() => productInputRef.current?.click()}
onDragEnter={(event) => {
event.preventDefault();
@@ -5182,26 +5161,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
<span aria-hidden="true"><PaperClipOutlined /></span>
<strong>上传素材</strong>
</button>
<button type="button" className={composerMenu === "mode" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("mode", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><AppstoreOutlined /></span>
{selectedCloneOutput.label}<span>模式</span>
</button>
<button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
<span>平台</span>{platform}
</button>
<button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
<span>语种</span>{language}
</button>
<button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
<span>比例</span>{formatRatioDisplayValue(ratio)}
</button>
<button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
<span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
<span>设置</span>{composerSettingLabel}
</button>
</div>
<div className="ecom-command-submit-row">
<button type="button" className="clone-ai-send-button ecom-command-send" disabled={commandGenerateDisabled} onClick={handleCommandGenerate} aria-label={clonePrimaryLabel}>
@@ -5211,7 +5170,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
</div>
{renderComposerMenu()}
</div>
{showPreGenerationGuides ? (
{(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
<section className="ecom-command-quick-board" aria-label="快捷功能">
{[
{ label: "A+/详情页", tone: "detail", icon: <LayoutOutlined />, onClick: openQuickDetailPage },
@@ -5236,7 +5195,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
))}
</section>
) : null}
{showPreGenerationGuides ? (
{(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
<section className="ecom-inspiration-lab" aria-label="电商灵感案例">
<div className="ecom-inspiration-rows">
{ecommerceInspirationRows.map((row) => (
src/styles/ecommerce-standalone.css
+456
View File
@@ -13017,3 +13017,459 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
color: inherit !important;
fill: currentColor !important;
}
/* #/imageWorkbench generated results: remove all visual labels and their reserved space. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-node-label,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-main-result > span,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid button > span {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) {
padding-top: 20px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) .clone-ai-node-drag-handle {
height: 100% !important;
background: transparent !important;
}
/* #/imageWorkbench history records: keep hover delete icon centered in the row. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item {
position: relative !important;
display: block !important;
isolation: isolate !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-main {
width: 100% !important;
padding-right: 46px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item:hover .ecom-command-history__item-delete,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item.is-active .ecom-command-history__item-delete {
grid-column: auto !important;
grid-row: auto !important;
align-self: auto !important;
position: absolute !important;
top: 50% !important;
right: 10px !important;
z-index: 4 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
transform: translateY(-50%) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete .anticon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete svg {
display: block !important;
line-height: 1 !important;
}
/* #/imageWorkbench composer redesign: mode tabs outside, settings and assets inside. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 8px !important;
width: min(100%, 760px) !important;
margin: 0 auto 12px !important;
padding: 4px !important;
border: 1px solid rgba(30, 189, 219, 0.11) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.64) !important;
box-shadow:
0 14px 34px rgba(16, 115, 204, 0.055),
inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
backdrop-filter: blur(14px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button {
--mode-accent: #1073cc;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
min-width: 0 !important;
min-height: 42px !important;
padding: 0 11px !important;
border: 0 !important;
border-radius: 14px !important;
background: transparent !important;
color: rgba(16, 32, 44, 0.66) !important;
box-shadow: none !important;
cursor: pointer !important;
transition:
background 180ms ease,
color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--set) {
--mode-accent: #0f8f72;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--detail) {
--mode-accent: #7a5af8;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--model) {
--mode-accent: #1073cc;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--video) {
--mode-accent: #cc6b14;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--hot) {
--mode-accent: #c04468;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button.is-active {
background:
radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 58%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 254, 0.9)) !important;
color: rgba(16, 32, 44, 0.9) !important;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--mode-accent) 18%, transparent),
0 10px 22px color-mix(in srgb, var(--mode-accent) 10%, transparent) !important;
transform: translateY(-1px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon {
display: inline-grid !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
place-items: center !important;
border: 0 !important;
border-radius: 9px !important;
background: color-mix(in srgb, var(--mode-accent) 11%, #ffffff) !important;
color: var(--mode-accent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
font-size: 13px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs strong {
min-width: 0 !important;
overflow: hidden !important;
font-size: 13px !important;
font-weight: 760 !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: auto !important;
grid-template-rows: none !important;
align-content: start !important;
row-gap: 12px !important;
min-height: clamp(214px, 17vh, 236px) !important;
padding: 18px 22px 16px !important;
overflow: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
min-height: clamp(256px, 22vh, 286px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
grid-column: 1 !important;
grid-row: auto !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
padding: 0 0 2px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
min-width: 0 !important;
min-height: 36px !important;
padding: 0 11px !important;
border: 1px solid rgba(30, 189, 219, 0.12) !important;
border-radius: 13px !important;
background: rgba(248, 253, 255, 0.72) !important;
color: rgba(16, 32, 44, 0.72) !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button.is-active {
border-color: rgba(30, 189, 219, 0.28) !important;
background: rgba(241, 251, 254, 0.92) !important;
box-shadow: 0 8px 18px rgba(16, 115, 204, 0.055) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon {
width: 20px !important;
height: 20px !important;
border: 0 !important;
background: rgba(232, 249, 253, 0.78) !important;
color: #0f829b !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover {
position: static !important;
grid-column: 1 !important;
grid-row: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 62px !important;
max-height: 72px !important;
padding: 8px 2px 10px !important;
overflow-x: auto !important;
overflow-y: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(16, 115, 204, 0.18) transparent !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb {
flex: 0 0 58px !important;
width: 58px !important;
height: 58px !important;
border: 1px solid rgba(30, 189, 219, 0.12) !important;
border-radius: 14px !important;
background: rgba(246, 251, 253, 0.9) !important;
box-shadow: 0 8px 18px rgba(16, 115, 204, 0.06) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb img,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb video {
border-radius: 13px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add {
flex: 0 0 38px !important;
width: 38px !important;
height: 38px !important;
min-height: 38px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 12px !important;
background: rgba(232, 249, 253, 0.72) !important;
color: #0f829b !important;
font-size: 24px !important;
box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea {
grid-column: 1 !important;
grid-row: auto !important;
min-height: clamp(82px, 9vh, 106px) !important;
padding: 2px 0 4px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea {
min-height: clamp(68px, 7vh, 92px) !important;
max-height: 112px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
grid-column: 1 !important;
grid-row: auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
width: 100% !important;
padding: 10px 0 0 !important;
border-top: 1px solid rgba(30, 189, 219, 0.085) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-width: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
width: auto !important;
min-width: 0 !important;
height: 38px !important;
min-height: 38px !important;
margin: 0 !important;
padding: 0 12px !important;
border: 0 !important;
border-radius: 13px !important;
background: rgba(248, 253, 255, 0.78) !important;
color: rgba(16, 32, 44, 0.68) !important;
box-shadow: none !important;
transform: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom:hover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom.is-dragging {
background: rgba(232, 249, 253, 0.9) !important;
color: #0f829b !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom > span {
display: inline-flex !important;
width: 20px !important;
min-width: 20px !important;
height: 20px !important;
place-items: center !important;
margin: 0 !important;
font-size: 17px !important;
line-height: 1 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong {
display: inline !important;
font-size: 13px !important;
font-weight: 720 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
min-width: 0 !important;
}
@media (max-width: 900px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
grid-template-columns: repeat(5, minmax(94px, 1fr)) !important;
width: 100% !important;
overflow-x: auto !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs::-webkit-scrollbar {
display: none !important;
}
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs {
grid-template-columns: repeat(5, minmax(88px, 1fr)) !important;
margin-bottom: 10px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button {
min-height: 38px !important;
padding-inline: 8px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
min-height: 230px !important;
padding: 15px !important;
row-gap: 10px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
flex: 1 1 calc(50% - 5px) !important;
justify-content: flex-start !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
align-items: center !important;
}
}
@media (max-width: 420px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 7px !important;
justify-content: stretch !important;
overflow: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button {
display: inline-flex !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
justify-content: center !important;
font-size: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon {
display: inline-grid !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
margin: 0 !important;
font-size: 14px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 58px !important;
height: auto !important;
padding-top: 10px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row {
width: auto !important;
min-width: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
height: 38px !important;
min-height: 38px !important;
padding: 0 12px !important;
font-size: 13px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong {
display: inline !important;
}
}