suzmii
b8849b8c01
- 顶栏去掉两侧 flex-wrap、工具条改 overflow: hidden，空间不足按 data-layout 三档降级而不是换行 - 新增 workbenchToolbarModel（档位顺序与 1px 判据）与 useWorkbenchToolbarLayout（ResizeObserver 管宽度、MutationObserver 管内容，实测内容宽度写档位） - 版本入口 margin-left: auto 钉在动作区最右，标识改「版本 N（原因 · 时间）」，窄档只留「版本 N」（序号复用资源画布版本卡编号口径） - 新增 WorkbenchMoreActionsMenu：「打开项目目录 / 资源面板 / 整理画布」在 collapsed-actions 档收进「更多」下拉 - 删除独立「播放」按钮，运行页签前加 ▶ 图标，点页签即切视图并载入游戏资源 - 运行画面右下角新增「刷新运行画面」，LocalGamePreviewFrame 新增 reloadNonce 换 iframe 元素身份重新载入页面 - 用例：新增 workbenchToolbarLayout / runPreviewRefresh；改写 appSurface 顶栏与播放/刷新断言、版本标识断言与顶栏样式断言
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import { describe, expect, test } from 'vitest';
|
|
|
|
import {
|
|
resolveWorkbenchToolbarLayout,
|
|
type WorkbenchToolbarLayout,
|
|
} from '../src/view/project-development/workbenchToolbarModel';
|
|
|
|
/**
|
|
* 工作台顶栏降级阶梯的判据：顺序、余量与「都放不下」的兜底。
|
|
*
|
|
* 每一档的真实宽度由 DOM 量（`useWorkbenchToolbarLayout` 把候选档位写上去再读 `scrollWidth`），
|
|
* 所以这里只喂一个假的量宽函数；真机几何由浏览器实测确认，这一条钉的是**顺序**。
|
|
*/
|
|
function ladder(
|
|
availableWidth: number,
|
|
widths: Record<WorkbenchToolbarLayout, number>,
|
|
) {
|
|
const measured: WorkbenchToolbarLayout[] = [];
|
|
const layout = resolveWorkbenchToolbarLayout(availableWidth, (candidate) => {
|
|
measured.push(candidate);
|
|
return widths[candidate];
|
|
});
|
|
return { layout, measured };
|
|
}
|
|
|
|
describe('工作台顶栏降级阶梯', () => {
|
|
test('放得下就停在 full，不去量后面的档位', () => {
|
|
const { layout, measured } = ladder(1000, {
|
|
full: 900,
|
|
'compact-version': 800,
|
|
'collapsed-actions': 400,
|
|
});
|
|
expect(layout).toBe('full');
|
|
expect(measured).toEqual(['full']);
|
|
});
|
|
|
|
test('full 放不下先收版本名的括号段，动作一枚都不动', () => {
|
|
const { layout, measured } = ladder(1000, {
|
|
full: 1100,
|
|
'compact-version': 900,
|
|
'collapsed-actions': 500,
|
|
});
|
|
expect(layout).toBe('compact-version');
|
|
expect(measured).toEqual(['full', 'compact-version']);
|
|
});
|
|
|
|
test('收掉括号段还不够，才把「打开项目目录 / 资源面板 / 整理画布」收进「更多」', () => {
|
|
const { layout, measured } = ladder(1000, {
|
|
full: 1400,
|
|
'compact-version': 1100,
|
|
'collapsed-actions': 700,
|
|
});
|
|
expect(layout).toBe('collapsed-actions');
|
|
expect(measured).toEqual(['full', 'compact-version', 'collapsed-actions']);
|
|
});
|
|
|
|
test('三档都放不下时停在最后一档，不回到前面已经试过的档位', () => {
|
|
const { layout, measured } = ladder(500, {
|
|
full: 1400,
|
|
'compact-version': 1100,
|
|
'collapsed-actions': 700,
|
|
});
|
|
expect(layout).toBe('collapsed-actions');
|
|
expect(measured).toEqual(['full', 'compact-version', 'collapsed-actions']);
|
|
});
|
|
|
|
test('临界宽度留 1px 余量：正好贴边算放得下，多出 2px 才降档', () => {
|
|
expect(
|
|
ladder(1000, {
|
|
full: 1001,
|
|
'compact-version': 900,
|
|
'collapsed-actions': 500,
|
|
}).layout,
|
|
).toBe('full');
|
|
expect(
|
|
ladder(1000, {
|
|
full: 1002,
|
|
'compact-version': 900,
|
|
'collapsed-actions': 500,
|
|
}).layout,
|
|
).toBe('compact-version');
|
|
});
|
|
});
|