feat: 电商页面视觉精修,全局页面滚动按钮交互简化

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"]作用域内,避免全局污染
This commit is contained in:
2026-06-03 16:42:57 +08:00
parent f0f6f66d60
commit 9282e6c0d8
4 changed files with 846 additions and 1 deletions
+64
View File
@@ -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);
}