feat: add download/remove actions in product set preview and history detail compact composer #9
@@ -4,6 +4,7 @@
|
||||
CloudUploadOutlined,
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
DownloadOutlined,
|
||||
EditOutlined,
|
||||
FireOutlined,
|
||||
FileImageOutlined,
|
||||
@@ -38,6 +39,7 @@ import EcommerceSetPanel from "./panels/EcommerceSetPanel";
|
||||
import EcommerceTryOnPanel from "./panels/EcommerceTryOnPanel";
|
||||
import EcommerceClonePanel from "./panels/EcommerceClonePanel";
|
||||
import { ecommerceOssScopes, saveUnifiedEcommerceGenerationRecord, deleteEcommerceGenerationRecord } from "./ecommerceGenerationPersistence";
|
||||
import { downloadResultAsset } from "../workbench/workbenchDownload";
|
||||
|
||||
const smartCutoutColorPresets = [
|
||||
"#ffffff",
|
||||
@@ -349,6 +351,14 @@ interface EcommerceHistoryRecord {
|
||||
replicateLevel: CloneReplicateLevelKey;
|
||||
}
|
||||
|
||||
interface ProductSetPreviewSelection {
|
||||
src: string;
|
||||
label: string;
|
||||
nodeId?: string;
|
||||
cardId?: string;
|
||||
removable?: boolean;
|
||||
}
|
||||
|
||||
interface EcommerceImagePromptOptions {
|
||||
gender?: string;
|
||||
age?: string;
|
||||
@@ -1372,7 +1382,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
|
||||
const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
|
||||
const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
|
||||
const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
|
||||
const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<ProductSetPreviewSelection | null>(null);
|
||||
const [showHostingModal, setShowHostingModal] = useState(false);
|
||||
const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
|
||||
const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "detail" | "watermark" | "image-edit" | null>(null);
|
||||
@@ -3556,8 +3566,39 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
lastFailedActionRef.current = () => handleSetGenerate();
|
||||
};
|
||||
|
||||
const openProductSetPreview = (card: { src: string; label: string }) => {
|
||||
setSelectedProductSetPreview(card);
|
||||
const openProductSetPreview = (card: { id?: string; src: string; label: string }, options?: { nodeId?: string; removable?: boolean }) => {
|
||||
setSelectedProductSetPreview({
|
||||
src: card.src,
|
||||
label: card.label,
|
||||
cardId: card.id,
|
||||
nodeId: options?.nodeId,
|
||||
removable: Boolean(options?.removable && options.nodeId && card.id),
|
||||
});
|
||||
};
|
||||
|
||||
const handleDownloadCanvasResult = async (card: { src: string; label: string }) => {
|
||||
try {
|
||||
await downloadResultAsset(card.src, card.label || "generated-image", false);
|
||||
toast.success("已开始下载图片");
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "下载图片失败");
|
||||
}
|
||||
};
|
||||
|
||||
const removeCanvasResult = (nodeId: string, cardId: string) => {
|
||||
setCanvasNodes((current) =>
|
||||
current
|
||||
.map((node) => (node.id === nodeId ? { ...node, results: node.results.filter((card) => card.id !== cardId) } : node))
|
||||
.filter((node) => node.sourceImage || node.results.length > 0),
|
||||
);
|
||||
setResults((current) => current.filter((card) => card.id !== cardId));
|
||||
toast.success("已从当前视图移除");
|
||||
};
|
||||
|
||||
const removeSelectedProductSetPreview = (preview: ProductSetPreviewSelection) => {
|
||||
if (!preview.nodeId || !preview.cardId) return;
|
||||
removeCanvasResult(preview.nodeId, preview.cardId);
|
||||
setSelectedProductSetPreview(null);
|
||||
};
|
||||
|
||||
const handleDetailAiWrite = () => {
|
||||
@@ -3829,24 +3870,6 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
|
||||
setPreviewOffset({ x: 0, y: 0 });
|
||||
previewOffsetRef.current = { x: 0, y: 0 };
|
||||
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => {
|
||||
const container = previewSurfaceRef.current;
|
||||
if (!container) return;
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const node = container.querySelector(".clone-ai-canvas-node") as HTMLElement | null;
|
||||
if (!node) return;
|
||||
const nodeRect = node.getBoundingClientRect();
|
||||
const nodeCenterY = nodeRect.top + nodeRect.height / 2 - containerRect.top;
|
||||
const visibleCenterY = containerRect.height / 2;
|
||||
const offsetY = visibleCenterY - nodeCenterY;
|
||||
const nodeCenterX = nodeRect.left + nodeRect.width / 2 - containerRect.left;
|
||||
const visibleCenterX = containerRect.width / 2;
|
||||
const offsetX = visibleCenterX - nodeCenterX;
|
||||
const finalOffset = { x: offsetX, y: offsetY };
|
||||
setPreviewOffset(finalOffset);
|
||||
previewOffsetRef.current = finalOffset;
|
||||
}));
|
||||
};
|
||||
|
||||
const handleNewEcommerceConversation = () => {
|
||||
@@ -4670,7 +4693,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<div className="clone-ai-flow-arrow" aria-hidden="true" />
|
||||
<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)}>
|
||||
<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>
|
||||
@@ -5893,7 +5916,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
|
||||
return (
|
||||
<section
|
||||
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
|
||||
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isCloneTool && activeHistoryRecordId ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}`}
|
||||
data-tool={activeTool}
|
||||
aria-label={pageLabel}
|
||||
>
|
||||
@@ -6017,7 +6040,31 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
<CloseOutlined />
|
||||
</button>
|
||||
<img src={selectedProductSetPreview.src} alt={selectedProductSetPreview.label} />
|
||||
<strong>{selectedProductSetPreview.label}</strong>
|
||||
<div className="product-set-preview-footer">
|
||||
<strong>{selectedProductSetPreview.label}</strong>
|
||||
<div className="product-set-preview-actions" aria-label="图片操作">
|
||||
<button
|
||||
type="button"
|
||||
className="product-set-preview-action"
|
||||
onClick={() => {
|
||||
void handleDownloadCanvasResult(selectedProductSetPreview);
|
||||
}}
|
||||
>
|
||||
<DownloadOutlined />
|
||||
<span>下载</span>
|
||||
</button>
|
||||
{selectedProductSetPreview.removable ? (
|
||||
<button
|
||||
type="button"
|
||||
className="product-set-preview-action product-set-preview-action--danger"
|
||||
onClick={() => removeSelectedProductSetPreview(selectedProductSetPreview)}
|
||||
>
|
||||
<DeleteOutlined />
|
||||
<span>移除</span>
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -11889,3 +11889,382 @@ html body #root .ecommerce-standalone.web-shell .ecom-watermark-workspace {
|
||||
--ecommerce-topbar-height: 62px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Preview modal actions stay inside the deliberate image inspection moment. */
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-modal {
|
||||
gap: 14px !important;
|
||||
border-color: rgba(30, 189, 219, 0.16) !important;
|
||||
box-shadow:
|
||||
0 26px 72px rgba(16, 32, 44, 0.18),
|
||||
0 8px 24px rgba(16, 115, 204, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
gap: 16px !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer strong {
|
||||
min-width: 0 !important;
|
||||
overflow: hidden !important;
|
||||
color: #10202c !important;
|
||||
font-size: 15px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1.4 !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-end !important;
|
||||
gap: 10px !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 7px !important;
|
||||
height: 38px !important;
|
||||
min-height: 38px !important;
|
||||
padding: 0 14px !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.2) !important;
|
||||
border-radius: 999px !important;
|
||||
color: #1073cc !important;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 251, 253, 0.92)) !important;
|
||||
box-shadow:
|
||||
0 8px 18px rgba(16, 115, 204, 0.08),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 750 !important;
|
||||
cursor: pointer !important;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
color 160ms ease,
|
||||
background 160ms ease,
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:hover,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:focus-visible {
|
||||
border-color: rgba(30, 189, 219, 0.42) !important;
|
||||
background: #ffffff !important;
|
||||
outline: none !important;
|
||||
transform: translateY(-1px) !important;
|
||||
box-shadow:
|
||||
0 12px 24px rgba(16, 115, 204, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger {
|
||||
border-color: rgba(255, 77, 79, 0.16) !important;
|
||||
color: #d84a4d !important;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 246, 0.94)) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:hover,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:focus-visible {
|
||||
border-color: rgba(255, 77, 79, 0.28) !important;
|
||||
color: #c93639 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer {
|
||||
align-items: stretch !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions {
|
||||
justify-content: stretch !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action {
|
||||
flex: 1 1 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* History record detail: compact composer becomes a stable summary bar, then expands on click. */
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail {
|
||||
--history-detail-workspace-width: calc(100vw - var(--ecom-history-panel-width, 292px));
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact {
|
||||
position: fixed !important;
|
||||
top: calc(var(--ecommerce-topbar-height, 66px) + clamp(0px, 0.6vh, 6px)) !important;
|
||||
left: calc(var(--history-detail-workspace-width) / 2) !important;
|
||||
width: min(760px, calc(var(--history-detail-workspace-width) - clamp(48px, 8vw, 96px))) !important;
|
||||
gap: 0 !important;
|
||||
transform: translateX(-50%) !important;
|
||||
z-index: 72 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-title {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
|
||||
display: grid !important;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto !important;
|
||||
grid-template-rows: minmax(64px, auto) !important;
|
||||
align-items: center !important;
|
||||
column-gap: 16px !important;
|
||||
min-height: clamp(68px, 8.8vh, 82px) !important;
|
||||
max-height: 86px !important;
|
||||
padding: clamp(8px, 1.2vh, 10px) 12px clamp(8px, 1.2vh, 10px) 16px !important;
|
||||
overflow: hidden !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.16) !important;
|
||||
border-radius: 999px !important;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 254, 0.94)),
|
||||
#feffff !important;
|
||||
box-shadow:
|
||||
0 18px 46px rgba(16, 115, 204, 0.1),
|
||||
0 4px 14px rgba(30, 189, 219, 0.055),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
|
||||
cursor: text !important;
|
||||
backdrop-filter: blur(18px) saturate(1.08) !important;
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:hover,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:focus-within {
|
||||
border-color: rgba(30, 189, 219, 0.32) !important;
|
||||
box-shadow:
|
||||
0 22px 54px rgba(16, 115, 204, 0.12),
|
||||
0 0 0 4px rgba(30, 189, 219, 0.055),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-reference:not(.ecom-command-reference--inline) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 1 !important;
|
||||
align-self: center !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
width: auto !important;
|
||||
min-width: 52px !important;
|
||||
max-width: 160px !important;
|
||||
min-height: 56px !important;
|
||||
max-height: 56px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
|
||||
flex: 0 0 54px !important;
|
||||
width: 54px !important;
|
||||
height: 54px !important;
|
||||
border-radius: 18px !important;
|
||||
box-shadow: 0 8px 18px rgba(16, 115, 204, 0.12) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb img,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb video {
|
||||
border-radius: 18px !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb > button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-add {
|
||||
flex: 0 0 46px !important;
|
||||
width: 46px !important;
|
||||
height: 46px !important;
|
||||
min-height: 46px !important;
|
||||
margin: 0 !important;
|
||||
border-radius: 50% !important;
|
||||
color: #10202c !important;
|
||||
background: rgba(16, 32, 44, 0.045) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 1 !important;
|
||||
align-self: center !important;
|
||||
min-height: 34px !important;
|
||||
max-height: 38px !important;
|
||||
height: 38px !important;
|
||||
padding: 4px 0 0 !important;
|
||||
overflow: hidden !important;
|
||||
color: rgba(16, 32, 44, 0.72) !important;
|
||||
background: transparent !important;
|
||||
font-size: clamp(17px, 1.35vw, 22px) !important;
|
||||
font-weight: 650 !important;
|
||||
line-height: 32px !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
resize: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea::placeholder {
|
||||
color: rgba(16, 32, 44, 0.48) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-toolbar,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-toolbar {
|
||||
grid-column: 3 !important;
|
||||
grid-row: 1 !important;
|
||||
align-self: center !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
min-height: 56px !important;
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-option-row {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-submit-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send {
|
||||
width: 58px !important;
|
||||
height: 58px !important;
|
||||
min-height: 58px !important;
|
||||
border-radius: 50% !important;
|
||||
background: linear-gradient(135deg, #1073cc 0%, #1ebddb 100%) !important;
|
||||
box-shadow:
|
||||
0 14px 28px rgba(16, 115, 204, 0.22),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send:hover:not(:disabled) {
|
||||
transform: translateY(-1px) scale(1.02) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"] {
|
||||
padding-top: clamp(132px, 18vh, 160px) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"]:has(.ecom-command-composer-wrap:not(.is-compact)) {
|
||||
padding-top: 380px !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview-zoom-wrap {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
transform-origin: center top !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-nodes {
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
box-sizing: border-box !important;
|
||||
width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
min-height: 260px !important;
|
||||
padding: 22px clamp(20px, 4vw, 48px) 44px !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) {
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
max-width: min(860px, calc(var(--history-detail-workspace-width) - 80px)) !important;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-result-grid {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item {
|
||||
isolation: isolate !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
right: 14px !important;
|
||||
z-index: 4 !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
min-height: 34px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid rgba(30, 189, 219, 0.16) !important;
|
||||
border-radius: 12px !important;
|
||||
color: rgba(16, 32, 44, 0.46) !important;
|
||||
background: rgba(255, 255, 255, 0.86) !important;
|
||||
box-shadow:
|
||||
0 8px 18px rgba(16, 115, 204, 0.075),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 1 !important;
|
||||
transform: translateY(-50%) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:hover,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:focus-visible {
|
||||
color: #ff4d4f !important;
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
border-color: rgba(255, 77, 79, 0.2) !important;
|
||||
outline: none !important;
|
||||
transform: translateY(-50%) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail {
|
||||
--history-detail-workspace-width: 100vw;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact {
|
||||
left: 50vw !important;
|
||||
top: calc(var(--ecommerce-topbar-height, 62px) + 2px) !important;
|
||||
width: min(720px, calc(100vw - 36px)) !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer,
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) {
|
||||
column-gap: 10px !important;
|
||||
padding-inline: 12px 10px !important;
|
||||
min-height: 70px !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover {
|
||||
max-width: 116px !important;
|
||||
}
|
||||
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) {
|
||||
max-width: calc(100vw - 32px) !important;
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user