From cc095a76206a5d0dbcb3c5757f9ee725f31ce716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= Date: Thu, 24 Sep 2026 14:30:34 +0800 Subject: [PATCH] =?UTF-8?q?=E7=94=BB=E5=B8=83=E5=BA=95=E9=83=A8=E5=B7=A5?= =?UTF-8?q?=E5=85=B7=E6=A0=8F=E4=B8=8D=E5=86=8D=E6=A8=AA=E5=90=91=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=EF=BC=8C=E5=B7=A5=E5=85=B7=E6=94=BE=E4=B8=8D=E4=B8=8B?= =?UTF-8?q?=E5=B0=B1=E6=8D=A2=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - packages/image-canvas-react：共享工具栏去掉 overflow-x/scrollbar-width 的「滚动容器」语义与滚动条隐藏，改为 flex-wrap 换行，尾部工具不再被裁掉 - src/index.css：画布底部工具栏宽度上限 34rem 提到 42rem，13 个工具在桌面宽度下回到一行，窄屏按共享能力换行并居中 - apps/ai-game-creator-shell：资源画布底部工具栏删掉与共享默认重复的 overflow/flex-wrap 覆盖，只保留限宽 --- .../features/resource-canvas/resourceCanvasChrome.css | 3 +-- packages/image-canvas-react/src/CanvasChrome.tsx | 6 +++++- packages/image-canvas-react/src/styles.css | 10 ++++++---- src/index.css | 8 +++++++- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css index 99e0417d3..b30a4b3ca 100644 --- a/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css +++ b/apps/ai-game-creator-shell/src/features/resource-canvas/resourceCanvasChrome.css @@ -1269,10 +1269,9 @@ /* 共享 chrome 的 `.genarrative-image-canvas__toolbar` 是横向滚动条（`overflow-x:auto`）， 会把它自己弹出的二级菜单（`bottom:100%+6px`）裁掉。这里改成换行、不裁切： 「生成规范」的二级菜单必须可见，窄屏用换行兜底而不是横向滚动。 */ +/* 换行与不裁剪已由共享工具栏保证（`@genarrative/image-canvas-react`），这里只限宽。 */ .game-resource-bottom-toolbar-strip { max-width: 100%; - overflow: visible; - flex-wrap: wrap; } .game-resource-bottom-toolbar-action { diff --git a/packages/image-canvas-react/src/CanvasChrome.tsx b/packages/image-canvas-react/src/CanvasChrome.tsx index cfec8a54c..808ab5bde 100644 --- a/packages/image-canvas-react/src/CanvasChrome.tsx +++ b/packages/image-canvas-react/src/CanvasChrome.tsx @@ -80,7 +80,11 @@ export type CanvasToolbarProps = Omit< surface?: 'plain' | 'floating'; }; -/** 画布宿主共享的横向工具栏容器。 */ +/** + * 画布宿主共享的工具栏容器。 + * + * 放不下时换行，不做横向滚动：工具栏是导航，任何被滚出视野的工具都等于不存在。 + */ export const CanvasToolbar = forwardRef( function CanvasToolbar( { label, children, surface = 'plain', className, ...toolbarProps }, diff --git a/packages/image-canvas-react/src/styles.css b/packages/image-canvas-react/src/styles.css index e9c0cbbd8..7d26714fe 100644 --- a/packages/image-canvas-react/src/styles.css +++ b/packages/image-canvas-react/src/styles.css @@ -152,16 +152,18 @@ transform: none; } +/* + * 工具栏是「工具导航」不是内容区：放不下时必须换行让所有工具继续可见。 + * 曾经的 `overflow-x: auto` + `scrollbar-width: thin` 会把尾部工具裁掉且几乎看不出 + * 可滚动，用户看到的是「工具少了一个」而不是「这里能滚」。 + */ .genarrative-image-canvas__toolbar { display: inline-flex; min-width: 0; + flex-wrap: wrap; align-items: center; gap: 0.35rem; box-sizing: border-box; - overflow-x: auto; - overflow-y: hidden; - overscroll-behavior-x: contain; - scrollbar-width: thin; } .genarrative-image-canvas__toolbar--floating { diff --git a/src/index.css b/src/index.css index 9ed7bd75f..e6f9aa29f 100644 --- a/src/index.css +++ b/src/index.css @@ -6695,12 +6695,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { ); } +/* + * 画布底部工具栏：13 个工具 + 3 个分隔符在 34rem 上限下会溢出，溢出后的横向滚动 + * 会把尾部工具整段裁掉（滚动条按设计不可见）。这里给足一行放得下的宽度，并在窄屏 + * 交给共享工具栏的换行能力，取「换行」不取「滚动」。 + */ .image-canvas-editor__bottom-toolbar { position: absolute; left: 50%; bottom: 0.85rem; z-index: 18; - max-width: min(calc(100% - 6.6rem), 34rem); + max-width: min(calc(100% - 6.6rem), 42rem); + justify-content: center; transform: translateX(-50%); }