AGC 资源工作台工具条:统一行内间距,「依赖 / 类型」不再与前一按钮贴得过近
Project CI / AI game creator shell Rust shard 1/4 (pull_request) Successful in 4m53s
Project CI / AI game creator shell Rust shard 2/4 (pull_request) Successful in 4m42s
Project CI / AI game creator shell Rust shard 3/4 (pull_request) Successful in 4m29s
Project CI / Native shell tests (pull_request) Has been cancelled
Project CI / Frontend tests (pull_request) Has been cancelled
Project CI / Repository checks (pull_request) Has been cancelled
Project CI / AI game creator shell web tests (pull_request) Has been cancelled
Project CI / AI game creator shell Rust crates (pull_request) Has been cancelled
Project CI / AI game creator shell Rust smoke (pull_request) Has been cancelled
Project CI / Backend tests (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 4/4 (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 1/4 (pull_request) Successful in 4m53s
Project CI / AI game creator shell Rust shard 2/4 (pull_request) Successful in 4m42s
Project CI / AI game creator shell Rust shard 3/4 (pull_request) Successful in 4m29s
Project CI / Native shell tests (pull_request) Has been cancelled
Project CI / Frontend tests (pull_request) Has been cancelled
Project CI / Repository checks (pull_request) Has been cancelled
Project CI / AI game creator shell web tests (pull_request) Has been cancelled
Project CI / AI game creator shell Rust crates (pull_request) Has been cancelled
Project CI / AI game creator shell Rust smoke (pull_request) Has been cancelled
Project CI / Backend tests (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 4/4 (pull_request) Has been cancelled
- 现象:工具条动作行里「资源面板 / 生成素材 / 整理画布 / 生成任务」之间是 gap 7px + 两侧 padding 11px = 视觉 24px,而「整理画布 → 生成任务 → 依赖」这一段只有 gap 7px + 分段控件自带 padding 3px = 10~13px,一行里两套间距;截图量出来的词间距是 64/65/65px,换算后正好差在这一段落上 - 根因:`.game-workbench-tabs.game-resource-sort-tabs` 把分段控件的 `padding: 3px` 归零后,它和同容器兄弟之间就只剩行本身的 7px gap,而其余按钮靠自身左右 padding 各撑出 11px - 修法:给分段控件补 `margin-left: 17px`(7 + 17 = 24px),整行只剩一套间距;分段控件内部仍是 0 间距的连通分段(依赖 / 类型 共享边界不变),高度 36px 与其余按钮对齐的既有口径不变 - 用例:`resourceCanvasGenerationTasksSidebarDismiss.test.tsx` 新增「依赖 / 类型 与前一按钮之间的间距跟行内其他按钮一致」,钉住 `margin-left: 17px` 与 `padding: 0` 两条声明 验证:tsc --noEmit 通过;appSurface 全量 441 条通过;侧栏开合与入口 4 条、画布手动布局 9 条通过;变异验证:把 `margin-left` 改回 0,新用例变红
This commit is contained in:
@@ -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;
|
||||
|
||||
+18
-1
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user