feat: add download/remove actions in product set preview and history detail compact composer
- EcommercePage.tsx: Add DownloadOutlined icon and downloadResultAsset import; introduce ProductSetPreviewSelection interface (extends preview with nodeId/cardId/removable); enhance openProductSetPreview to accept nodeId and removable options; implement handleDownloadCanvasResult (triggers image download via downloadResultAsset), removeCanvasResult (filters canvas nodes and results by cardId), and removeSelectedProductSetPreview (removes card then closes preview); remove legacy canvas centering requestAnimationFrame block; add is-history-detail CSS class when viewing a history record; wire download/remove action buttons in product set preview modal footer; update canvas node result buttons to pass nodeId and removable options - ecommerce-standalone.css (+382 lines): - Product set preview modal: enhanced layered shadows and frosted border; footer flex layout with label truncation; pill-shaped action buttons with gradient backgrounds, hover lift and glow transitions; danger variant for remove action in red tones; mobile ≤640px column layout with stretched full-width buttons - History detail mode (.is-history-detail): compact floating composer pill bar — fixed centered at workspace top with backdrop blur, pill-shaped container (border-radius 999px), single-line textarea, inline asset thumbnails, circular gradient send button, hidden option row; canvas nodes centered layout with max-width constraint; history item delete button repositioned absolute right with hover red state; responsive adjustments at ≤900px for full-width workspace
This commit is contained in:
@@ -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