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

feat: 工具子页面隐藏Topbar、限制素材上传数量、修复移动端布局
CI / verify (pull_request) Has been cancelled
Details

Browse Source 
本次修改主要包含以下变更：

一、工具子页面隐藏Topbar（App.tsx / EcommercePage.tsx）：
- 新增 onWorkspaceChromeChange 回调，EcommercePage 向 App 层通知当前是否为工具子页面
- 工具子页面（智能抠图/快速详情/水印移除/翻译/图片编辑/一键套图/文案/一键视频等）自动隐藏顶部导航栏
- 组件卸载时重置 isToolPage 状态，避免切换页面时残留

二、素材上传数量限制（EcommercePage.tsx）：
- maxCloneProductImages 从 20 张调整为 10 张
- 上传超限时 toast 提示用户「最多上传 10 张素材」
- 新增 AppstoreAddOutlined、HighlightOutlined、TranslationOutlined、PlayCircleOutlined 等图标导入

三、移动端布局修复（ecommerce.css + ecommerce-standalone.css）：
- 指令栏容器宽度限制为 calc(100vw - 24px)，防止溢出
- 素材缩略图区域改为横向滚动，隐藏滚动条
- 缩略图固定 flex-shrink: 0 防止被压缩（58px / 54px）
- 工具栏宽度 100%，box-sizing 修复
- 新增工具页面相关样式规则

变更文件：
- src/App.tsx (+26)
- src/features/ecommerce/EcommercePage.tsx (+66)
- src/styles/ecommerce-standalone.css (+209)
- src/styles/pages/ecommerce.css (+198)
This commit is contained in:
ludan
2026-06-18 13:23:55 +08:00
parent cf88bc05e4
commit 2a2ab701e3
4 changed files with 450 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/pages/ecommerce.css
+171 -27
View File
@@ -11281,50 +11281,155 @@
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
border: 1px solid rgba(30, 189, 219, 0.12) !important;
border-radius: 22px !important;
background: #feffff !important;
box-shadow: 0 22px 58px rgba(16, 115, 204, 0.08) !important;
gap: 10px !important;
padding: 12px !important;
border: 1px solid rgba(30, 189, 219, 0.14) !important;
border-radius: 18px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 252, 253, 0.58)) !important;
box-shadow:
0 18px 46px rgba(16, 115, 204, 0.07),
inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
border: 1px solid rgba(30, 189, 219, 0.1) !important;
border-radius: 18px !important;
--quick-accent: #1073cc;
--quick-tint: rgba(16, 115, 204, 0.1);
--quick-line: rgba(16, 115, 204, 0.14);
min-height: 58px !important;
gap: 10px !important;
justify-content: flex-start !important;
padding: 12px 14px !important;
border: 1px solid var(--quick-line) !important;
border-radius: 14px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 253, 0.88)) !important;
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 253, 254, 0.78)) !important;
color: var(--ecom-entry-text) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.86),
0 12px 28px rgba(16, 115, 204, 0.06) !important;
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 8px 22px rgba(16, 115, 204, 0.045) !important;
transition:
border-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease,
transform 180ms ease,
background 180ms ease !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover {
border-color: rgba(30, 189, 219, 0.32) !important;
border-color: color-mix(in srgb, var(--quick-accent) 34%, transparent) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 251, 254, 0.94)) !important;
box-shadow: 0 18px 34px rgba(16, 115, 204, 0.12) !important;
transform: translateY(-2px);
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 253, 0.92)) !important;
color: #0f2533 !important;
box-shadow:
0 14px 30px rgba(16, 115, 204, 0.09),
inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
transform: translateY(-1px);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:active {
transform: translateY(0);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--detail {
--quick-accent: #4f70d9;
--quick-tint: rgba(79, 112, 217, 0.12);
--quick-line: rgba(79, 112, 217, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--hot {
--quick-accent: #c66b1f;
--quick-tint: rgba(198, 107, 31, 0.12);
--quick-line: rgba(198, 107, 31, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--edit {
--quick-accent: #8d6cdb;
--quick-tint: rgba(141, 108, 219, 0.12);
--quick-line: rgba(141, 108, 219, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--cutout {
--quick-accent: #0a7ca8;
--quick-tint: rgba(10, 124, 168, 0.12);
--quick-line: rgba(10, 124, 168, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--watermark {
--quick-accent: #b14f6f;
--quick-tint: rgba(177, 79, 111, 0.12);
--quick-line: rgba(177, 79, 111, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--translate {
--quick-accent: #0a8a8a;
--quick-tint: rgba(10, 138, 138, 0.12);
--quick-line: rgba(10, 138, 138, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--product {
--quick-accent: #19856d;
--quick-tint: rgba(25, 133, 109, 0.12);
--quick-line: rgba(25, 133, 109, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--copywriting {
--quick-accent: #3f64cf;
--quick-tint: rgba(63, 100, 207, 0.12);
--quick-line: rgba(63, 100, 207, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--video {
--quick-accent: #2878a8;
--quick-tint: rgba(40, 120, 168, 0.12);
--quick-line: rgba(40, 120, 168, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-card--more {
--quick-accent: #778894;
--quick-tint: rgba(119, 136, 148, 0.12);
--quick-line: rgba(119, 136, 148, 0.16);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
color: var(--ecom-entry-text) !important;
font-size: 15px !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
color: var(--ecom-entry-muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
display: grid !important;
place-items: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border: 1px solid color-mix(in srgb, var(--quick-accent) 18%, transparent) !important;
border-radius: 10px !important;
color: var(--quick-accent) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.66), var(--quick-tint)) !important;
font-size: 14px !important;
line-height: 1 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
transition:
background 180ms ease,
border-color 180ms ease,
transform 180ms ease !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover span {
border-color: color-mix(in srgb, var(--quick-accent) 30%, transparent) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), color-mix(in srgb, var(--quick-accent) 17%, white)) !important;
transform: scale(1.04);
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span svg {
width: 14px !important;
height: 14px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
@@ -11361,7 +11466,7 @@
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 72px !important;
min-height: 58px !important;
}
}
@@ -11427,22 +11532,28 @@
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board {
border-radius: 20px !important;
padding: 10px !important;
gap: 8px !important;
border-radius: 16px !important;
padding: 8px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 62px !important;
padding: 12px !important;
border-radius: 16px !important;
min-height: 54px !important;
gap: 8px !important;
padding: 10px !important;
border-radius: 13px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board strong {
font-size: 14px !important;
font-size: 13px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board span {
font-size: 11px !important;
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
border-radius: 9px !important;
font-size: 13px !important;
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover,
@@ -11484,7 +11595,8 @@
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 58px !important;
min-height: 52px !important;
padding-inline: 9px !important;
}
}
@@ -11498,7 +11610,7 @@
}
.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button {
min-height: 64px !important;
min-height: 54px !important;
}
}
@@ -12782,10 +12894,22 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
@media (max-width: 640px) {
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap {
width: min(100%, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
min-width: 0 !important;
overflow: visible !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
gap: 12px !important;
min-height: 318px !important;
padding: 18px 16px 16px !important;
overflow: hidden !important;
box-sizing: border-box !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) {
@@ -12794,17 +12918,33 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
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 {
align-self: stretch !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 58px !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
overscroll-behavior-inline: contain !important;
scrollbar-width: none !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::-webkit-scrollbar,
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::-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-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: 0 0 58px !important;
flex-basis: 58px !important;
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
min-height: 58px !important;
border-radius: 14px !important;
}
@@ -12823,6 +12963,8 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar {
width: 100% !important;
min-width: 0 !important;
min-height: 58px !important;
padding-top: 12px !important;
}
@@ -12842,9 +12984,11 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
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: 0 0 54px !important;
flex-basis: 54px !important;
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
min-height: 54px !important;
}
}