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

本次修改主要包含以下变更:

一、工具子页面隐藏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:
2026-06-18 13:23:55 +08:00
parent cf88bc05e4
commit 2a2ab701e3
4 changed files with 450 additions and 49 deletions
+15 -11
View File
@@ -347,6 +347,8 @@ function App() {
toast.info("Bug 反馈入口已保留,后续可接入反馈页面。");
};
const shouldShowEcommerceTopbar = currentPage === "workspace" && !workspaceChrome.isToolPage;
return (
<div
className="ecommerce-standalone web-shell"
@@ -355,17 +357,19 @@ function App() {
data-view="ecommerce"
data-workspace-tool-page={workspaceChrome.isToolPage ? "true" : "false"}
>
<Topbar
session={session}
usage={usage}
profileMenuOpen={profileMenuOpen}
onProfileMenuOpenChange={setProfileMenuOpen}
onOpenWorkspace={handleOpenWorkspace}
onOpenProfile={handleOpenProfile}
onOpenAuth={openAuth}
onLogout={handleLogout}
onBugFeedback={handleBugFeedback}
/>
{shouldShowEcommerceTopbar ? (
<Topbar
session={session}
usage={usage}
profileMenuOpen={profileMenuOpen}
onProfileMenuOpenChange={setProfileMenuOpen}
onOpenWorkspace={handleOpenWorkspace}
onOpenProfile={handleOpenProfile}
onOpenAuth={openAuth}
onLogout={handleLogout}
onBugFeedback={handleBugFeedback}
/>
) : null}
<main className="ecommerce-standalone__content">
{session ? (