feat: 电商创作场景支持带货视频时长、移动端隐藏设置按钮、优化平台选择器样式
- 新增带货视频时长选项（5/10/15秒）及时长选择 popover - 创作标签在移动端（<=640px）隐藏平台/语种/比例/设置/时长按钮行，仅保留文本输入框 - 重构平台选择器为单列滚动列表，移除平台 logo，统一比例/语种/平台 active 高亮样式 - 优化 composer 整体布局节奏（素材紧凑、工具栏底部固定、响应式高度） - 调整 AI 帮写提交按钮为青色系渐变样式
This commit is contained in:
@@ -1429,6 +1429,7 @@ const maxCloneProductImages = 20;
|
||||
const maxCloneReferenceImages = 20;
|
||||
const cloneVideoDurationMin = 5;
|
||||
const cloneVideoDurationMax = 45;
|
||||
const composerDurationOptions = [5, 10, 15];
|
||||
const defaultEcommercePlatform = "淘宝/天猫";
|
||||
const defaultProductSetOutput: ProductSetOutputKey = "set";
|
||||
const defaultCloneOutput: CloneOutputKey = "set";
|
||||
@@ -2411,13 +2412,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
const cloneRatioOptions = baseCloneRatioOptions;
|
||||
const composerRatioOptions = useMemo(
|
||||
() => [
|
||||
"1000×1000px 1:1",
|
||||
"800×1200px 2:3",
|
||||
"1200×800px 3:2",
|
||||
"1200×900px 4:3",
|
||||
"900×1200px 3:4",
|
||||
"1080×1920px 9:16",
|
||||
"1920×1080px 16:9",
|
||||
"1000×1000px\u00a0\u00a0\u00a01:1",
|
||||
"800×1200px\u00a0\u00a0\u00a02:3",
|
||||
"1200×800px\u00a0\u00a0\u00a03:2",
|
||||
"1200×900px\u00a0\u00a0\u00a04:3",
|
||||
"900×1200px\u00a0\u00a0\u00a03:4",
|
||||
"1080×1920px\u00a0\u00a0\u00a09:16",
|
||||
"1920×1080px\u00a0\u00a0\u00a016:9",
|
||||
],
|
||||
[],
|
||||
);
|
||||
@@ -5975,11 +5976,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
}
|
||||
if (menuToRender === "platform") {
|
||||
return (
|
||||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--ratio ecom-command-popover--platform${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--platforms${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||
{platformOptions.map((option) => (
|
||||
<button key={option} type="button" className={platform === option ? "is-active" : ""} onClick={() => { handleClonePlatformChange(option); setComposerMenu(null); }}>
|
||||
{renderPlatformLogo(option)}
|
||||
<span className="ecom-platform-name">{option}</span>
|
||||
{option}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -6010,6 +6010,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (menuToRender === "settings" && activeCommerceScenario === "salesVideo") {
|
||||
return (
|
||||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--duration${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||
{composerDurationOptions.map((option) => (
|
||||
<button key={option} type="button" className={cloneVideoDuration === option ? "is-active" : ""} onClick={() => { setCloneVideoDuration(option); setComposerMenu(null); }}>
|
||||
{option}秒
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--settings ecom-command-popover--settings-${cloneOutput}${popoverClosingClass}`} style={composerPopoverStyle}>
|
||||
{cloneOutput === "set" ? (
|
||||
@@ -6599,14 +6610,18 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
) : null}
|
||||
{shouldShowScenarioSettings ? (
|
||||
<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>
|
||||
{activeCommerceScenario !== "salesVideo" && activeCommerceScenario !== "poster" ? (
|
||||
<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>
|
||||
) : null}
|
||||
{activeCommerceScenario !== "salesVideo" ? (
|
||||
<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>
|
||||
) : null}
|
||||
<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>{getRatioDisplayParts(ratio).aspect}
|
||||
@@ -6614,7 +6629,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
|
||||
{scenarioAdvancedSettingsKeys.includes(activeCommerceScenario) ? (
|
||||
<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}
|
||||
<span>{activeCommerceScenario === "salesVideo" ? "时长" : "设置"}</span>
|
||||
{activeCommerceScenario === "salesVideo" ? `${cloneVideoDuration}秒` : composerSettingLabel}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user