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

Codex/ecommerce hot video responsive #7

Merged
stringadmin merged 4 commits from codex/ecommerce-hot-video-responsive into main 2026-06-11 16:06:38 +00:00
Conversation 0 Commits 4 Files Changed 3
+113 -9
2 changed files with 113 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 13a7c3ba5a - Show all commits
src/features/ecommerce/EcommercePage.tsx
+8 -8
View File
@@ -4675,7 +4675,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
);
const smartCutoutPreview = (
<main className={`ecom-smart-cutout-page${smartCutoutImage ? " is-editor" : " is-upload"}${isSmartCutoutTransitioning ? " is-transitioning" : ""}`} aria-label="智能抠图">
<main key={`smart-cutout-${smartCutoutImage ? "editor" : "upload"}`} className={`ecom-smart-cutout-page ecom-tool-page-enter${smartCutoutImage ? " is-editor" : " is-upload"}${isSmartCutoutTransitioning ? " is-transitioning" : ""}`} aria-label="智能抠图">
<input
ref={smartCutoutInputRef}
type="file"
@@ -4950,7 +4950,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
);
const imageWorkbenchPreview = (
<main className="ecom-image-workbench-page" aria-label="图片修改局部重绘">
<main key="image-workbench" className="ecom-image-workbench-page ecom-tool-page-enter" aria-label="图片修改局部重绘">
<input
ref={imageWorkbenchInputRef}
type="file"
@@ -5155,7 +5155,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
);
const watermarkPreview = (
<main className="ecom-watermark-page" aria-label="去水印">
<main key="watermark" className="ecom-watermark-page ecom-tool-page-enter" aria-label="去水印">
<input
ref={watermarkInputRef}
type="file"
@@ -5350,7 +5350,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
);
const hotVideoPreview = (
<main className="ecom-quick-set-page ecom-hot-video-page" aria-label="广告视频">
<main key="hot-video" className="ecom-quick-set-page ecom-hot-video-page ecom-tool-page-enter" aria-label="广告视频">
<div className="ecom-quick-set-body">
<aside className="ecom-quick-set-panel" aria-label="广告视频设置">
<header className="ecom-quick-set-panel-head">
@@ -5475,7 +5475,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
);
const quickProductSetPreview = (
<main className={`ecom-quick-set-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="AI商品套图">
<main key="quick-set" className={`ecom-quick-set-page ecom-tool-page-enter${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="AI商品套图">
<div className="ecom-quick-set-body">
<aside className="ecom-quick-set-panel" aria-label="商品套图设置" onWheel={handleQuickPanelWheel}>
<header className="ecom-quick-set-panel-head">
@@ -5628,7 +5628,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
const quickDetailVisibleSelect = quickDetailBasicSelects.find((item) => item.key === visibleQuickSetSelect) ?? null;
const quickDetailPreview = (
<main className={`ecom-quick-set-page ecom-quick-detail-page${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="A+详情页生成">
<main key="quick-detail" className={`ecom-quick-set-page ecom-quick-detail-page ecom-tool-page-enter${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="A+详情页生成">
<div className="ecom-quick-set-body">
<aside className="ecom-quick-set-panel" aria-label="A+详情页设置" onWheel={handleQuickPanelWheel}>
<header className="ecom-quick-set-panel-head">
@@ -5914,7 +5914,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
? smartCutoutPreview
: isQuickSetTool || isQuickDetailTool || isHotVideoTool
? (
<div className="ecom-quick-page-wrap">
<div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
{quickPageSidebar}
{isQuickSetTool ? quickProductSetPreview : isQuickDetailTool ? quickDetailPreview : hotVideoPreview}
</div>
@@ -5932,7 +5932,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" : ""}${isQuickSetTool || isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotVideoTool ? " is-hot-video-page" : ""}`}
className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickSetTool || isQuickDetailTool || isHotVideoTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotVideoTool ? " is-hot-video-page" : ""}`}
data-tool={activeTool}
aria-label={pageLabel}
>
src/styles/ecommerce-standalone.css
+105 -1
View File
@@ -2394,7 +2394,21 @@
.ecommerce-standalone .ecommerce-auth-modal__scrim,
.ecommerce-standalone .ecommerce-profile-popover__backdrop,
.ecommerce-standalone .product-set-preview-backdrop,
.ecommerce-standalone .ecom-command-asset-popover {
.ecommerce-standalone .ecom-command-asset-popover,
.ecommerce-standalone .ecom-tool-page-enter,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel {
animation: none !important;
}
@@ -8819,6 +8833,96 @@
}
}
@keyframes ecom-tool-page-enter {
from {
opacity: 0;
transform: translateY(14px) scale(0.992);
filter: saturate(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: saturate(1);
}
}
@keyframes ecom-tool-panel-enter {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ecom-tool-side-enter {
from {
opacity: 0;
transform: translateX(-14px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes ecom-tool-stage-enter {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ecommerce-standalone .ecom-tool-page-enter {
animation: ecom-tool-page-enter 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
will-change: opacity, transform;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav {
animation: ecom-tool-side-enter 430ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor {
animation: ecom-tool-stage-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel {
animation: ecom-tool-panel-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(1),
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(1),
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(1) {
animation-delay: 80ms !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(2),
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(2),
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(2) {
animation-delay: 130ms !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(3),
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(3) {
animation-delay: 180ms !important;
}
@keyframes ecom-smart-upload-enter {
from {
opacity: 0;