修复选中资源工具条出现两条相邻分隔线

- 成因:共享工具条在 showQuickEdit 分支于「快速编辑」后输出一条分隔线,同时为 extraActions 自动生成前置分隔线(extraActionDivider);AGC 资源卡是「快速编辑可用 + 中间动作未接通不渲染」的组合,两条因此相邻
- 修法:样式层去重(相邻的两条只显示一条),不改 JSX 结构,对美术画布与资源画布两端都成立,也不会隐藏任何真正起分隔作用的那一条
- 新增契约用例 selectedLayerToolbarDividerDedupe.test.ts 钉住去重规则与它的成因两端
- 验证:该用例 3 passed;变异验证(删掉去重规则)→ 1 failed,还原后 3 passed
This commit is contained in:
2026-09-12 18:23:02 +08:00
parent 4c180ac29a
commit bb91e8909d
2 changed files with 68 additions and 0 deletions
@@ -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',
);
});
});
+12
View File
@@ -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;
}