From 9282e6c0d8215bca78d42dd6f82b9aa8058cf337 Mon Sep 17 00:00:00 2001
From: ludan <251918489@qq.com>
Date: Wed, 3 Jun 2026 16:42:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=B5=E5=95=86=E9=A1=B5=E9=9D=A2?=
=?UTF-8?q?=E8=A7=86=E8=A7=89=E7=B2=BE=E4=BF=AE=EF=BC=8C=E5=85=A8=E5=B1=80?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=BB=9A=E5=8A=A8=E6=8C=89=E9=92=AE=E4=BA=A4?=
=?UTF-8?q?=E4=BA=92=E7=AE=80=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
AppShell.tsx：
- 全局页面滚动操作按钮（floating-page-scroll-actions）暂时关闭
- 后续将通过页面级滚动交互替代全局滚动按钮
EcommercePage.tsx（电商生成页功能增强）：
- 预览区header下方新增生成配置摘要条(clone-ai-preview-summary)
- 展示当前选择的输出类型、平台、市场、语言、比例参数
- 方便用户快速确认当前生成配置无误
ecommerce.css（电商页面视觉精修）：
- 新增CSS自定义属性体系(ecm-*)，统一电商页面颜色/间距/阴影
- 页面背景增加accent径向光晕和半透明渐变叠加
- 设置面板/预览区域卡片增加毛玻璃质感和微阴影
- 文本颜色层级化（ecm-text/ecm-muted/ecm-soft）
- 保持现有布局结构不变，仅提升视觉效果
dark-green.css（暗绿主题电商按钮状态精修）：
- 电商页面各工具模块按钮active态增加相对定位和overflow控制
- clone/set/detail/wear工具中is-active按钮状态一致性增强
- 限定在[data-view="ecommerce"]作用域内，避免全局污染
---
src/components/AppShell.tsx | 2 +-
src/features/ecommerce/EcommercePage.tsx | 7 +
src/styles/pages/ecommerce.css | 774 +++++++++++++++++++++++
src/styles/themes/dark-green.css | 64 ++
4 files changed, 846 insertions(+), 1 deletion(-)
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 3457460..9c344fd 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -88,7 +88,7 @@ function AppShell({
"avatarConsole",
"characterMix",
] as WebViewKey[];
- const showPageScrollActions = showFloatingNav && !toolSurfaceViews.includes(activeView);
+ const showPageScrollActions = false;
const visibleNavItems = useMemo(
() => {
diff --git a/src/features/ecommerce/EcommercePage.tsx b/src/features/ecommerce/EcommercePage.tsx
index ca17235..6f9a3ab 100644
--- a/src/features/ecommerce/EcommercePage.tsx
+++ b/src/features/ecommerce/EcommercePage.tsx
@@ -2873,6 +2873,13 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
上传商品图，AI 即刻生成 符合多电商平台规范 的高转化率商品素材。
+
+ {selectedCloneOutput.label}
+ {platform}
+ {market}
+ {language}
+ {formatRatioDisplayValue(ratio)}
+
{status === "done" ? (
diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css
index 417d3d6..635ab75 100644
--- a/src/styles/pages/ecommerce.css
+++ b/src/styles/pages/ecommerce.css
@@ -7933,3 +7933,777 @@
.clone-ai-adwizard__risk.is-medium { color: #faad14; }
.clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
.clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
+
+/* Ecommerce generation page SaaS polish: visual-only refinement for the product creation workspace. */
+.product-clone-page {
+ --ecm-page: #0e1012;
+ --ecm-panel: rgba(20, 23, 25, 0.96);
+ --ecm-panel-strong: rgba(24, 28, 30, 0.98);
+ --ecm-inset: rgba(255, 255, 255, 0.035);
+ --ecm-inset-hover: rgba(255, 255, 255, 0.06);
+ --ecm-line: rgba(255, 255, 255, 0.095);
+ --ecm-line-strong: rgba(255, 255, 255, 0.14);
+ --ecm-text: #eef4f0;
+ --ecm-muted: rgba(232, 240, 235, 0.62);
+ --ecm-soft: rgba(232, 240, 235, 0.42);
+ --ecm-accent: var(--accent, #00ff88);
+ --ecm-accent-rgb: var(--accent-rgb, 0, 255, 136);
+ --ecm-radius-sm: 10px;
+ --ecm-radius-md: 14px;
+ --ecm-radius-lg: 18px;
+ --ecm-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.2);
+ --ecm-shadow-panel: 0 18px 54px rgba(0, 0, 0, 0.28);
+ background:
+ radial-gradient(circle at 26% 0%, rgba(var(--ecm-accent-rgb), 0.055), transparent 34%),
+ linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 150px),
+ var(--ecm-page);
+ color: var(--ecm-text);
+ font-family: var(--font-sans, Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif);
+}
+
+.product-clone-page > .product-clone-shell {
+ background:
+ linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 22%, transparent 76%, rgba(255, 255, 255, 0.014)),
+ transparent;
+}
+
+.product-clone-page :is(button, select, textarea, input) {
+ font-family: inherit;
+ letter-spacing: 0;
+}
+
+.product-clone-page :is(button, select, textarea):focus-visible {
+ outline: 2px solid rgba(var(--ecm-accent-rgb), 0.48);
+ outline-offset: 2px;
+}
+
+.product-clone-page :is(button, select, textarea):disabled {
+ box-shadow: none;
+}
+
+.product-clone-page[data-tool="clone"] {
+ --clone-settings-panel-width: clamp(420px, 36vw, 540px);
+ background:
+ radial-gradient(circle at 72% 12%, rgba(var(--ecm-accent-rgb), 0.045), transparent 31%),
+ linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px),
+ var(--ecm-page);
+}
+
+.product-clone-page[data-tool="clone"] > .product-clone-shell,
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+ background: transparent;
+}
+
+.product-clone-page[data-tool="clone"] .product-clone-panel {
+ border-right-color: var(--ecm-line);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 150px),
+ var(--ecm-panel);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-panel {
+ gap: 12px;
+ padding: 18px;
+ scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.035);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo {
+ position: sticky;
+ top: 0;
+ z-index: 3;
+ margin: -18px -18px 2px;
+ padding: 16px 18px 14px;
+ border-bottom-color: var(--ecm-line);
+ background:
+ linear-gradient(180deg, rgba(21, 24, 26, 0.98), rgba(21, 24, 26, 0.9));
+ backdrop-filter: blur(16px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo__mark {
+ border-radius: 9px;
+ box-shadow: 0 0 0 1px rgba(var(--ecm-accent-rgb), 0.18), 0 10px 24px rgba(var(--ecm-accent-rgb), 0.14);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo strong {
+ font-size: 15px;
+ line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-logo em {
+ border-color: var(--ecm-line);
+ background: var(--ecm-inset);
+ color: var(--ecm-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+ .clone-ai-card,
+ .clone-ai-platform-spec,
+ .clone-ai-count-panel,
+ .clone-ai-replicate-panel,
+ .clone-ai-module-panel,
+ .clone-ai-model-panel,
+ .clone-ai-video-panel
+) {
+ border-color: var(--ecm-line);
+ border-radius: var(--ecm-radius-md);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%),
+ var(--ecm-panel-strong);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-card {
+ padding: 13px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-card h2 {
+ margin-bottom: 10px;
+ color: var(--ecm-muted);
+ font-size: 11px;
+ line-height: 1.2;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
+ min-height: 140px;
+ border-color: rgba(255, 255, 255, 0.16);
+ border-radius: var(--ecm-radius-md);
+ background:
+ radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.09), transparent 58%),
+ var(--ecm-inset);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-dragging {
+ border-color: rgba(var(--ecm-accent-rgb), 0.55);
+ background:
+ radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.14), transparent 60%),
+ rgba(var(--ecm-accent-rgb), 0.055);
+ transform: translateY(-1px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-upload-icon {
+ background: rgba(var(--ecm-accent-rgb), 0.09);
+ color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+ .clone-ai-tag-group button,
+ .clone-ai-basic-select > button,
+ .clone-ai-basic-select__menu,
+ .clone-ai-basic-select__menu button,
+ .clone-ai-replicate-tabs button,
+ .clone-ai-replicate-upload,
+ .clone-ai-replicate-levels button,
+ .clone-ai-count-row,
+ .clone-ai-count-stepper button,
+ .clone-ai-module-list button,
+ .clone-ai-model-tabs button,
+ .clone-ai-model-scene-grid button,
+ .clone-ai-model-select,
+ .clone-ai-model-select > button,
+ .clone-ai-model-select__menu,
+ .clone-ai-model-select__menu button,
+ .clone-ai-video-options button,
+ .clone-ai-video-smart
+) {
+ border-color: var(--ecm-line);
+ background: var(--ecm-inset);
+ color: var(--ecm-muted);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+ .clone-ai-tag-group button:hover,
+ .clone-ai-basic-select > button:hover,
+ .clone-ai-basic-select > button.is-open,
+ .clone-ai-basic-select__menu button:hover,
+ .clone-ai-replicate-tabs button:hover,
+ .clone-ai-replicate-upload:hover,
+ .clone-ai-replicate-levels button:hover,
+ .clone-ai-count-stepper button:hover:not(:disabled),
+ .clone-ai-module-list button:hover,
+ .clone-ai-model-tabs button:hover,
+ .clone-ai-model-scene-grid button:hover,
+ .clone-ai-model-select > button:hover,
+ .clone-ai-model-select > button.is-open,
+ .clone-ai-model-select__menu button:hover,
+ .clone-ai-video-options button:hover,
+ .clone-ai-video-smart:hover
+) {
+ border-color: var(--ecm-line-strong);
+ background: var(--ecm-inset-hover);
+ color: var(--ecm-text);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+ .clone-ai-tag-group button.is-active,
+ .clone-ai-basic-select__menu button.is-active,
+ .clone-ai-replicate-tabs button.is-active,
+ .clone-ai-replicate-levels button.is-active,
+ .clone-ai-module-list button.is-active,
+ .clone-ai-model-tabs button.is-active,
+ .clone-ai-model-scene-grid button.is-active,
+ .clone-ai-model-select__menu button.is-active,
+ .clone-ai-video-options button.is-active,
+ .clone-ai-video-smart.is-on
+) {
+ border-color: rgba(var(--ecm-accent-rgb), 0.48);
+ background:
+ linear-gradient(180deg, rgba(var(--ecm-accent-rgb), 0.16), rgba(var(--ecm-accent-rgb), 0.07));
+ color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-generate, .clone-ai-send-button, .clone-ai-upload-zone strong) {
+ background: var(--ecm-accent);
+ color: var(--dg-button-text, #061014);
+ box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:hover:not(:disabled), .clone-ai-send-button:hover:not(:disabled)) {
+ filter: brightness(1.03);
+ transform: translateY(-1px);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:disabled, .clone-ai-send-button:disabled) {
+ border-color: var(--ecm-line);
+ background: var(--ecm-inset);
+ color: var(--ecm-soft);
+ filter: none;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle {
+ border-color: var(--ecm-line-strong);
+ background: rgba(20, 23, 25, 0.86);
+ color: var(--ecm-muted);
+ box-shadow: var(--ecm-shadow-soft);
+ backdrop-filter: blur(14px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover,
+.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible {
+ border-color: rgba(var(--ecm-accent-rgb), 0.5);
+ background: rgba(var(--ecm-accent-rgb), 0.09);
+ color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+ align-content: center;
+ gap: 20px;
+ padding: 90px clamp(22px, 4vw, 46px) 134px;
+ background:
+ radial-gradient(circle at 50% 42%, rgba(var(--ecm-accent-rgb), 0.035), transparent 38%),
+ linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 160px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+ top: 28px;
+ right: clamp(22px, 4vw, 46px);
+ left: clamp(22px, 4vw, 46px);
+ max-width: none;
+ padding-bottom: 16px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.055);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header strong {
+ font-size: clamp(18px, 1.6vw, 22px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header span {
+ max-width: 620px;
+ color: var(--ecm-muted);
+ font-size: 13px;
+ line-height: 1.55;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+ width: min(100%, 580px);
+ min-height: 260px;
+ padding: 28px;
+ border: 1px solid rgba(255, 255, 255, 0.055);
+ border-radius: 22px;
+ background: rgba(255, 255, 255, 0.014);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-empty-state .anticon {
+ width: 84px;
+ height: 84px;
+ border-color: var(--ecm-line);
+ background:
+ radial-gradient(circle at 50% 16%, rgba(var(--ecm-accent-rgb), 0.12), transparent 62%),
+ var(--ecm-panel-strong);
+ color: rgba(var(--ecm-accent-rgb), 0.46);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-showcase {
+ gap: 18px;
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-main-result, .clone-ai-result-grid button) {
+ border-color: var(--ecm-line);
+ background: var(--ecm-panel-strong);
+ box-shadow: var(--ecm-shadow-soft);
+}
+
+.product-clone-page[data-tool="clone"] :is(.clone-ai-main-result:hover, .clone-ai-result-grid button:hover) {
+ border-color: rgba(var(--ecm-accent-rgb), 0.38);
+ box-shadow: var(--ecm-shadow-panel);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+ right: clamp(18px, 4vw, 46px);
+ bottom: 20px;
+ left: clamp(18px, 4vw, 46px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper {
+ border-color: var(--ecm-line);
+ border-radius: 18px;
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
+ rgba(20, 24, 23, 0.92);
+ box-shadow: var(--ecm-shadow-panel);
+ backdrop-filter: blur(18px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper:focus-within {
+ border-color: rgba(var(--ecm-accent-rgb), 0.42);
+ box-shadow:
+ 0 20px 58px rgba(0, 0, 0, 0.34),
+ 0 0 0 1px rgba(var(--ecm-accent-rgb), 0.08);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea {
+ color: var(--ecm-text);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-char-count {
+ color: var(--ecm-soft);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) {
+ background: var(--ecm-page);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-panel,
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-rail {
+ border-color: var(--ecm-line);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 160px),
+ var(--ecm-panel);
+}
+
+.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button {
+ border-radius: var(--ecm-radius-sm);
+ color: var(--ecm-muted);
+}
+
+.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button:hover,
+.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button.is-active {
+ background: rgba(var(--ecm-accent-rgb), 0.1);
+ color: var(--ecm-accent);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-clone-field,
+ .product-set-upload-section,
+ .product-set-settings-section,
+ .product-set-detail-section
+) {
+ border-color: var(--ecm-line);
+ border-radius: var(--ecm-radius-lg);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.034), transparent 54%),
+ var(--ecm-panel-strong);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-clone-field h2,
+ .product-set-upload-section h2,
+ .product-set-settings-section h2,
+ .product-set-detail-section h2
+) {
+ color: var(--ecm-text);
+ font-size: 15px;
+ font-weight: 820;
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ select,
+ textarea,
+ .product-clone-upload-zone,
+ .product-set-upload,
+ .product-set-output-grid button,
+ .product-set-structure-grid button,
+ .product-detail-module-grid button,
+ .product-clone-scene-grid button,
+ .product-clone-ratio-row button,
+ .product-clone-segment button,
+ .product-clone-model-button,
+ .product-clone-switch-row,
+ .product-set-style-toggle
+) {
+ border-color: var(--ecm-line);
+ border-radius: var(--ecm-radius-sm);
+ background: var(--ecm-inset);
+ color: var(--ecm-muted);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ select:hover,
+ textarea:hover,
+ .product-clone-upload-zone:hover,
+ .product-set-upload:hover,
+ .product-set-output-grid button:hover,
+ .product-set-structure-grid button:hover,
+ .product-detail-module-grid button:hover,
+ .product-clone-scene-grid button:hover,
+ .product-clone-ratio-row button:hover,
+ .product-clone-segment button:hover,
+ .product-clone-model-button:hover,
+ .product-clone-switch-row:hover,
+ .product-set-style-toggle:hover
+) {
+ border-color: var(--ecm-line-strong);
+ background: var(--ecm-inset-hover);
+ color: var(--ecm-text);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-output-grid button.is-active,
+ .product-set-structure-grid button.is-active,
+ .product-detail-module-grid button.is-active,
+ .product-clone-scene-grid button.is-active,
+ .product-clone-ratio-row button.is-active,
+ .product-clone-segment button.is-active,
+ .product-set-style-toggle.is-active
+) {
+ border-color: rgba(var(--ecm-accent-rgb), 0.48);
+ background: rgba(var(--ecm-accent-rgb), 0.12);
+ color: var(--ecm-accent);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(.product-clone-primary, .product-set-floating-submit) {
+ border: 0;
+ background: var(--ecm-accent);
+ color: var(--dg-button-text, #061014);
+ box-shadow: 0 12px 30px rgba(var(--ecm-accent-rgb), 0.18);
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(.product-clone-primary, .product-set-floating-submit):disabled {
+ background: var(--ecm-inset);
+ color: var(--ecm-soft);
+ box-shadow: none;
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-preview {
+ background:
+ radial-gradient(circle at 50% 40%, rgba(var(--ecm-accent-rgb), 0.032), transparent 40%),
+ transparent;
+}
+
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-empty-preview,
+ .product-clone-empty-panel
+) {
+ border-color: rgba(255, 255, 255, 0.055);
+ border-radius: 22px;
+ background: rgba(255, 255, 255, 0.014);
+}
+
+.product-clone-page[data-tool="set"] .product-set-floating-detail {
+ border-color: var(--ecm-line);
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
+ rgba(20, 24, 23, 0.92);
+ box-shadow: var(--ecm-shadow-panel);
+ backdrop-filter: blur(18px);
+}
+
+.ecommerce-progress-bar {
+ border-color: rgba(var(--ecm-accent-rgb), 0.22);
+ background: rgba(var(--ecm-accent-rgb), 0.07);
+}
+
+.ecommerce-progress-bar__fill {
+ box-shadow: 0 0 18px rgba(var(--ecm-accent-rgb), 0.36);
+}
+
+@media (max-width: 1180px) {
+ .product-clone-page[data-tool="clone"] {
+ --clone-settings-panel-width: clamp(390px, 45vw, 440px);
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-preview {
+ padding-right: 28px;
+ padding-left: 28px;
+ }
+}
+
+@media (max-width: 860px) {
+ .product-clone-page[data-tool="clone"] {
+ height: auto;
+ min-height: 100%;
+ overflow: auto;
+ }
+
+ .product-clone-page[data-tool="clone"] > .product-clone-shell,
+ .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+ grid-template-columns: 1fr;
+ grid-template-rows: auto minmax(620px, 1fr);
+ height: auto;
+ min-height: 100%;
+ }
+
+ .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell {
+ grid-template-rows: 0 minmax(620px, 1fr);
+ }
+
+ .product-clone-page[data-tool="clone"] .product-clone-panel {
+ border-right: 0;
+ border-bottom: 1px solid var(--ecm-line);
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-panel {
+ width: 100%;
+ max-width: none;
+ max-height: none;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle,
+ .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-settings-toggle {
+ top: 14px;
+ right: 14px;
+ left: auto;
+ transform: none;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:active {
+ transform: scale(0.94);
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-preview {
+ min-height: 620px;
+ padding: 92px 18px 134px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+ top: 24px;
+ right: 18px;
+ left: 18px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-preview-showcase {
+ grid-template-columns: 1fr;
+ width: min(100%, 520px);
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
+ display: none;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-main-result {
+ height: 260px;
+ }
+}
+
+@media (max-width: 620px) {
+ .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-panel__scroll,
+ .product-clone-page[data-tool="clone"] .clone-ai-panel {
+ padding: 14px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-logo {
+ margin: -14px -14px 0;
+ padding: 14px 54px 12px 14px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-card,
+ .product-clone-page[data-tool="clone"] :is(.clone-ai-platform-spec, .clone-ai-count-panel, .clone-ai-replicate-panel, .clone-ai-module-panel, .clone-ai-model-panel, .clone-ai-video-panel) {
+ padding: 11px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
+ min-height: 120px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-tag-group,
+ .product-clone-page[data-tool="clone"] .clone-ai-basic-select-grid,
+ .product-clone-page[data-tool="clone"] .clone-ai-model-select-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-preview {
+ min-height: 560px;
+ padding: 86px 12px 128px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-empty-state {
+ min-height: 220px;
+ padding: 22px 16px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-bottom-input {
+ right: 10px;
+ bottom: 12px;
+ left: 10px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper {
+ grid-template-columns: minmax(0, 1fr) 36px;
+ gap: 8px;
+ padding: 10px;
+ border-radius: 16px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-send-button {
+ width: 36px;
+ height: 36px;
+ }
+}
+
+@media (max-width: 900px) {
+ .product-clone-page {
+ box-sizing: border-box;
+ padding-top: 58px;
+ }
+
+ .product-clone-page > .product-clone-shell {
+ min-height: calc(100% - 58px);
+ }
+}
+
+@media (max-width: 480px) {
+ .product-clone-page {
+ padding-top: 56px;
+ }
+
+ .product-clone-page > .product-clone-shell {
+ min-height: calc(100% - 56px);
+ }
+}
+
+/* Ecommerce refinement pass: make the preview state more informative and selected controls quieter. */
+.product-clone-page[data-tool="clone"] .clone-ai-preview {
+ padding-top: 138px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-header {
+ gap: 9px;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-summary {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 7px;
+ max-width: min(100%, 720px);
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-summary span {
+ display: inline-flex;
+ align-items: center;
+ max-width: 180px;
+ min-height: 26px;
+ padding: 0 10px;
+ overflow: hidden;
+ border: 1px solid rgba(255, 255, 255, 0.095);
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.035);
+ color: rgba(232, 240, 235, 0.68);
+ font-size: 11px;
+ font-weight: 780;
+ line-height: 1;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-preview-summary span:first-child {
+ border-color: rgba(var(--ecm-accent-rgb), 0.28);
+ background: rgba(var(--ecm-accent-rgb), 0.08);
+ color: var(--ecm-accent);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+ .clone-ai-module-list button,
+ .clone-ai-model-scene-grid button,
+ .clone-ai-replicate-levels button,
+ .clone-ai-video-options button
+),
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button,
+ .product-detail-module-grid button,
+ .product-clone-scene-grid button,
+ .product-clone-ratio-row button
+) {
+ position: relative;
+ overflow: hidden;
+}
+
+.product-clone-page[data-tool="clone"] :is(
+ .clone-ai-module-list button.is-active,
+ .clone-ai-model-scene-grid button.is-active,
+ .clone-ai-replicate-levels button.is-active,
+ .clone-ai-video-options button.is-active
+),
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button.is-active,
+ .product-detail-module-grid button.is-active,
+ .product-clone-scene-grid button.is-active,
+ .product-clone-ratio-row button.is-active
+) {
+ border-color: rgba(var(--ecm-accent-rgb), 0.5);
+ background:
+ linear-gradient(90deg, rgba(var(--ecm-accent-rgb), 0.13), rgba(var(--ecm-accent-rgb), 0.035)),
+ rgba(255, 255, 255, 0.035);
+ color: var(--ecm-text);
+}
+
+.product-clone-page[data-tool="clone"] :is(
+ .clone-ai-module-list button.is-active,
+ .clone-ai-model-scene-grid button.is-active,
+ .clone-ai-replicate-levels button.is-active,
+ .clone-ai-video-options button.is-active
+)::before,
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button.is-active,
+ .product-detail-module-grid button.is-active,
+ .product-clone-scene-grid button.is-active,
+ .product-clone-ratio-row button.is-active
+)::before {
+ position: absolute;
+ inset: 8px auto 8px 0;
+ width: 3px;
+ border-radius: 999px;
+ background: var(--ecm-accent);
+ content: "";
+}
+
+.product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active span,
+.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button.is-active em,
+ .product-detail-module-grid button.is-active span
+) {
+ color: rgba(232, 240, 235, 0.62);
+}
+
+@media (max-width: 860px) {
+ .product-clone-page[data-tool="clone"] .clone-ai-preview {
+ padding-top: 148px;
+ }
+}
+
+@media (max-width: 620px) {
+ .product-clone-page[data-tool="clone"] .clone-ai-preview {
+ padding-top: 158px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-preview-summary {
+ gap: 6px;
+ }
+
+ .product-clone-page[data-tool="clone"] .clone-ai-preview-summary span {
+ max-width: 138px;
+ min-height: 24px;
+ padding: 0 8px;
+ font-size: 10px;
+ }
+}
diff --git a/src/styles/themes/dark-green.css b/src/styles/themes/dark-green.css
index a1b0b17..7d97531 100644
--- a/src/styles/themes/dark-green.css
+++ b/src/styles/themes/dark-green.css
@@ -8881,3 +8881,67 @@
padding-top: 6px;
}
}
+
+/* Ecommerce final polish: keep selected option states refined in the dark-green theme. */
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is(
+ .clone-ai-module-list button,
+ .clone-ai-model-scene-grid button,
+ .clone-ai-replicate-levels button,
+ .clone-ai-video-options button
+),
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button,
+ .product-detail-module-grid button,
+ .product-clone-scene-grid button,
+ .product-clone-ratio-row button
+) {
+ position: relative;
+ overflow: hidden;
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is(
+ .clone-ai-module-list button.is-active,
+ .clone-ai-model-scene-grid button.is-active,
+ .clone-ai-replicate-levels button.is-active,
+ .clone-ai-video-options button.is-active
+),
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button.is-active,
+ .product-detail-module-grid button.is-active,
+ .product-clone-scene-grid button.is-active,
+ .product-clone-ratio-row button.is-active
+) {
+ border-color: rgba(var(--accent-rgb), 0.48);
+ background:
+ linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.035)),
+ rgba(255, 255, 255, 0.032);
+ color: var(--fg-body);
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is(
+ .clone-ai-module-list button.is-active,
+ .clone-ai-model-scene-grid button.is-active,
+ .clone-ai-replicate-levels button.is-active,
+ .clone-ai-video-options button.is-active
+)::before,
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button.is-active,
+ .product-detail-module-grid button.is-active,
+ .product-clone-scene-grid button.is-active,
+ .product-clone-ratio-row button.is-active
+)::before {
+ position: absolute;
+ inset: 8px auto 8px 0;
+ width: 3px;
+ border-radius: 999px;
+ background: var(--accent);
+ content: "";
+}
+
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active span,
+.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(
+ .product-set-structure-grid button.is-active em,
+ .product-detail-module-grid button.is-active span
+) {
+ color: rgba(232, 240, 235, 0.62);
+}