修复选中资源工具条出现两条相邻分隔线
- 成因:共享工具条在 showQuickEdit 分支于「快速编辑」后输出一条分隔线,同时为 extraActions 自动生成前置分隔线(extraActionDivider);AGC 资源卡是「快速编辑可用 + 中间动作未接通不渲染」的组合,两条因此相邻 - 修法:样式层去重(相邻的两条只显示一条),不改 JSX 结构,对美术画布与资源画布两端都成立,也不会隐藏任何真正起分隔作用的那一条 - 新增契约用例 selectedLayerToolbarDividerDedupe.test.ts 钉住去重规则与它的成因两端 - 验证:该用例 3 passed;变异验证(删掉去重规则)→ 1 failed,还原后 3 passed
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
import { readFileSync } from 'node:fs';
|
||||
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
/**
|
||||
* 选中资源工具条上的「两条分隔线」回归钉子。
|
||||
*
|
||||
* 成因:共享工具条 `ImageCanvasSelectedLayerToolbarView.tsx` 会在 `showQuickEdit` 时于
|
||||
* 「快速编辑」之后输出一条分隔线,同时为 `extraActions` 自动生成一条前置分隔线
|
||||
* (`const extraActionDivider = extraActions ? … : null`)。AGC 资源卡是"快速编辑可用 +
|
||||
* 中间那些动作未接通不渲染"的组合,两条于是直接相邻,用户看到两条竖线。
|
||||
*
|
||||
* 修法是样式层去重(相邻的两条只显示一条)。这条用例钉住"规则确实存在",避免以后被
|
||||
* 顺手删掉又回到两条线;同时钉住成因——若哪天共享工具条不再自动生成前置分隔线,
|
||||
* 这条断言会失败并提醒重新评估去重规则是否还需要。
|
||||
*/
|
||||
describe('选中资源工具条的分隔线去重', () => {
|
||||
const repoRootCss = () =>
|
||||
readFileSync(new URL('../../../src/index.css', import.meta.url), 'utf8');
|
||||
|
||||
const sharedToolbarSource = () =>
|
||||
readFileSync(
|
||||
new URL(
|
||||
'../../../src/components/image-editor/ImageCanvasSelectedLayerToolbarView.tsx',
|
||||
import.meta.url,
|
||||
),
|
||||
'utf8',
|
||||
);
|
||||
|
||||
it('相邻的两条分隔线只显示一条', () => {
|
||||
const css = repoRootCss().replace(/\s+/g, ' ');
|
||||
expect(css).toContain(
|
||||
'.image-canvas-editor__floating-toolbar-divider + .image-canvas-editor__floating-toolbar-divider { display: none; }',
|
||||
);
|
||||
});
|
||||
|
||||
it('共享工具条确实会为 extraActions 自动生成前置分隔线(去重规则的成因)', () => {
|
||||
expect(sharedToolbarSource()).toContain(
|
||||
'const extraActionDivider = extraActions ?',
|
||||
);
|
||||
});
|
||||
|
||||
it('「快速编辑」之后那条分隔线仍由共享工具条自己输出(去重的另一端)', () => {
|
||||
const source = sharedToolbarSource();
|
||||
expect(source).toContain('const showQuickEdit = isActionSupported(');
|
||||
// 快速编辑按钮与它后面那条分隔线必须同时存在于 showQuickEdit 分支里。
|
||||
const quickEditBlock = source.slice(
|
||||
source.indexOf('{showQuickEdit ? ('),
|
||||
source.indexOf('{canRasterEdit && isActionSupported('),
|
||||
);
|
||||
expect(quickEditBlock).toContain('label="快速编辑"');
|
||||
expect(quickEditBlock).toContain(
|
||||
'image-canvas-editor__floating-toolbar-divider',
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -5090,6 +5090,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
height: 1.125rem;
|
||||
}
|
||||
|
||||
/* 紧挨着的两条分隔线只保留一条。
|
||||
共享工具条会在「快速编辑」之后输出一条(`ImageCanvasSelectedLayerToolbarView.tsx`
|
||||
的 showQuickEdit 分支),并为 `extraActions` 再自动生成一条前置分隔线
|
||||
(同文件 `extraActionDivider`)。AGC 资源卡恰好是"快速编辑可用 + 中间那些动作未接通
|
||||
不渲染"的组合,于是这两条直接相邻,用户看到两条竖线。两条相邻的分隔线在视觉上
|
||||
本来就没有意义,所以在样式层去重:不改任何 JSX 结构,对两端(美术画布与资源画布)
|
||||
都成立,也不会隐藏任何真正起分隔作用的那一条。 */
|
||||
.image-canvas-editor__floating-toolbar-divider
|
||||
+ .image-canvas-editor__floating-toolbar-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-canvas-editor__bottom-toolbar-option-wrap {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user