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

feat: 电商创作场景支持带货视频时长、移动端隐藏设置按钮、优化平台选择器样式

Browse Source 
- 新增带货视频时长选项（5/10/15秒）及时长选择 popover

- 创作标签在移动端（<=640px）隐藏平台/语种/比例/设置/时长按钮行，仅保留文本输入框

- 重构平台选择器为单列滚动列表，移除平台 logo，统一比例/语种/平台 active 高亮样式

- 优化 composer 整体布局节奏（素材紧凑、工具栏底部固定、响应式高度）

- 调整 AI 帮写提交按钮为青色系渐变样式
This commit is contained in:
ludan
2026-06-17 17:02:10 +08:00
parent 2cd76ec3a5
commit 6dd2a107fd
4 changed files with 617 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/pages/ecommerce.css
+185 -2
View File
@@ -12522,9 +12522,16 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
border: 0 !important;
border-radius: 14px !important;
color: #ffffff !important;
background: #181b1f !important;
box-shadow: 0 12px 28px rgba(16, 32, 44, 0.14) !important;
background: linear-gradient(135deg, #1ebddb 0%, #0f829b 100%) !important;
box-shadow: 0 12px 28px rgba(15, 130, 155, 0.22) !important;
text-align: center !important;
transition: transform 160ms ease, box-shadow 160ms ease !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ai-submit:hover {
background: linear-gradient(135deg, #21c8e3 0%, #1194ad 100%) !important;
box-shadow: 0 14px 32px rgba(15, 130, 155, 0.28) !important;
transform: translateY(-1px) !important;
}
@media (max-width: 640px) {
@@ -12639,3 +12646,179 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
overflow-y: auto !important;
}
}
/* Final composer rhythm: keep attachments compact and pin the toolbelt to the card bottom. */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
gap: clamp(12px, 1.6vw, 18px) !important;
min-height: clamp(250px, 31vh, 316px) !important;
padding: clamp(18px, 2.05vw, 24px) clamp(18px, 2.3vw, 26px) clamp(16px, 1.9vw, 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:has(.ecom-command-asset-popover) {
min-height: clamp(286px, 35vh, 340px) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
align-self: start !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 64px !important;
margin: 0 !important;
padding: 0 2px 2px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover::-webkit-scrollbar {
display: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
min-height: 64px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 15px !important;
background: rgba(30, 189, 219, 0.1) !important;
color: #0b8fb2 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span {
font-size: 24px !important;
line-height: 1 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small {
margin-top: 4px !important;
color: #0f7f9e !important;
font-size: 14px !important;
font-weight: 600 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
min-height: 64px !important;
border-radius: 15px !important;
box-shadow: 0 12px 28px rgba(16, 115, 204, 0.12) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-option-row--settings {
align-self: start !important;
margin: 0 !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea {
flex: 1 1 auto !important;
align-self: stretch !important;
width: 100% !important;
min-height: 86px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.58 !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: 78px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
flex: 0 0 auto !important;
align-self: end !important;
width: 100% !important;
margin: auto 0 0 !important;
padding-top: clamp(12px, 1.45vw, 16px) !important;
border-top: 1px solid rgba(30, 189, 219, 0.12) !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions {
min-width: 0 !important;
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
gap: 12px !important;
min-height: 318px !important;
padding: 18px 16px 16px !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: 336px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-asset-popover,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover {
gap: 10px !important;
min-height: 58px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
flex-basis: 58px !important;
width: 58px !important;
height: 58px !important;
min-height: 58px !important;
border-radius: 14px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add span {
font-size: 22px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add small {
font-size: 13px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > textarea,
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: 96px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
min-height: 58px !important;
padding-top: 12px !important;
}
}
@media (max-width: 390px) {
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: 306px !important;
padding-inline: 14px !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: 326px !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb {
flex-basis: 54px !important;
width: 54px !important;
height: 54px !important;
min-height: 54px !important;
}
}