diff --git a/apps/ai-game-creator-shell/src/styles.css b/apps/ai-game-creator-shell/src/styles.css index defe6cf17..be246cb0e 100644 --- a/apps/ai-game-creator-shell/src/styles.css +++ b/apps/ai-game-creator-shell/src/styles.css @@ -5552,6 +5552,14 @@ iframe.preview-frame { overflow: hidden; } +/* 「依赖 / 类型」内部用 0 间距(共享边界的连通分段),但与同一行其他按钮之间必须跟行的间距 + * 一致:这一行是 `gap: 7px` 的 flex 容器,分段控件曾在它里面自带 `padding: 3px`,靠那 3px + * 把自己和前一枚按钮顶开,于是「整理画布 → 生成任务 → 依赖」的视觉间距只有 10px, + * 而其余按钮之间是 24px——一行里两套间距。这里把它补到 24px,整行只剩一套间距。 */ +.game-workbench-tabs.game-resource-sort-tabs { + margin-left: 17px; +} + .game-workbench-tabs.game-resource-sort-tabs button { min-height: 36px; border: 0; diff --git a/apps/ai-game-creator-shell/tests/resourceCanvasGenerationTasksSidebarDismiss.test.tsx b/apps/ai-game-creator-shell/tests/resourceCanvasGenerationTasksSidebarDismiss.test.tsx index 2d7a47d2f..6d2d598d2 100644 --- a/apps/ai-game-creator-shell/tests/resourceCanvasGenerationTasksSidebarDismiss.test.tsx +++ b/apps/ai-game-creator-shell/tests/resourceCanvasGenerationTasksSidebarDismiss.test.tsx @@ -1,5 +1,8 @@ /** @vitest-environment jsdom */ +import { readFileSync } from 'node:fs'; +import { resolve } from 'node:path'; + import { afterEach, describe, expect, it, vi } from 'vitest'; import ProjectDevelopmentView from '../src/view/project-development'; @@ -13,12 +16,13 @@ import { } from './appSurface/harness'; /** - * 「生成任务」侧栏的两条交互口径: + * 「生成任务」侧栏与工具条入口的三条口径: * * 1. **失去焦点即收起**:点画布、点别的工具栏按钮、点侧栏外部都算失去焦点;点侧栏内部 * (含任务卡与「定位到素材」)与点那枚开合按钮不算——后者自己负责 toggle,否则会先被 * 收起再被 toggle 打开,表现为按钮失灵。 * 2. **入口顺序**:「生成任务」排在「依赖 / 类型」排列方式之前(动作在前、排列方式收行尾)。 + * 3. **行内间距只有一套**:「依赖 / 类型」与前一按钮之间不能只剩分段控件自带的那点间隙。 */ function resourceGraphFor(resources: unknown) { @@ -137,4 +141,17 @@ describe('「生成任务」侧栏的开合与入口位置', () => { expect(tasksIndex).toBeLessThan(sortIndex); expect(sortIndex).toBe(buttons.length - 2); }); + + it('「依赖 / 类型」与前一按钮之间的间距跟行内其他按钮一致', () => { + const styles = readFileSync( + resolve(process.cwd(), 'apps/ai-game-creator-shell/src/styles.css'), + 'utf8', + ); + // 这一行是 gap: 7px 的 flex 容器;分段控件曾靠自带 padding: 3px 与前一按钮只隔 10px, + // 而其余按钮之间是 24px。margin-left 把它补回 24px,整行只剩一套间距。 + expect(styles).toMatch( + /\.game-workbench-tabs\.game-resource-sort-tabs\s*\{[^}]*margin-left:\s*17px/s, + ); + expect(styles).toMatch(/\.game-resource-sort-tabs\s*\{[^}]*padding:\s*0/s); + }); });