工具条「引用」不再渲染成「@ @引用」:@ 只留图标,文案去掉重复的 @

- index.tsx 选中工具条的引用按钮:title 由「@引用」改为「引用」,可见文案 <span>@引用</span> 改为 <span>引用</span>。图标 AtSign 本身就是 `@`,文案再写一次就渲染成「@ @引用」。
- label={`引用资源 ${selectedResource.label}`} 保持不变:无障碍名仍要能读出「引用资源 <素材名>」,本次只去掉可见文案与 title 里的 `@`。
- 断言(appSurface/project-development.suite.ts):静态形状用例改判 title="引用" / <span>引用</span>,并新增 not.toContain('@引用') 反向守卫;键盘通路用例改判 title === '引用'、可见标签 .genarrative-image-canvas__chrome-button-label 文本为「引用」,并新增 aria-label === '引用资源 hero.png',钉住无障碍名没有被一起去掉。
- 变异验证(提交前已跑):把 index.tsx 的 title 与可见文案一起改回「@引用」→ appSurface 两条用例变红(资源卡的 @ 引用入口只留在选中工具条里 / 工具条里的「引用」用键盘也能插进聊天输入框),还原后复跑 412 passed。
- 门禁:`npx vitest run apps/ai-game-creator-shell/tests/appSurface.test.ts` 412 passed(改动前后同一时刻对照,均为 412 passed)。
This commit is contained in:
2026-09-11 21:25:14 +08:00
parent dd7cf401a9
commit 4175d82fa1
2 changed files with 22 additions and 9 deletions
@@ -6204,7 +6204,7 @@ export default function ProjectDevelopmentView({
<CanvasChromeButton
className="image-canvas-editor__floating-toolbar-text-button"
label={`引用资源 ${selectedResource.label}`}
title="@引用"
title="引用"
icon={<AtSign className="h-4 w-4" />}
onClick={() =>
dispatchResourceReferenceInsert({
@@ -6225,7 +6225,7 @@ export default function ProjectDevelopmentView({
})
}
>
<span>@引用</span>
<span></span>
</CanvasChromeButton>
) : null}
{selectedResource ? (
@@ -3154,8 +3154,11 @@ export function registerProjectWorkbenchFoundationTests() {
expect(extraActions).toContain(
'label={`引用资源 ${selectedResource.label}`}',
);
expect(extraActions).toContain('title="@引用"');
expect(extraActions).toContain('<span>@引用</span>');
// 可见文案不再自带 `@`:图标本身就是 `@`(`AtSign`),文案再写一次会渲染成「@ @引用」。
// 无障碍名(`label`)保留完整说法,读屏仍能读出「引用资源 <素材名>」。
expect(extraActions).toContain('title="引用"');
expect(extraActions).toContain('<span>引用</span>');
expect(extraActions).not.toContain('@引用');
expect(extraActions).toMatch(
/<CanvasChromeButton[\s\S]*?label=\{` \$\{selectedResource\.label\}`\}[\s\S]*?dispatchResourceReferenceInsert\(\{/u,
);
@@ -3169,7 +3172,7 @@ export function registerProjectWorkbenchFoundationTests() {
);
});
it('工具条里的 @引用 用键盘也能插进聊天输入框', async () => {
it('工具条里的引用用键盘也能插进聊天输入框', async () => {
const manifest = createGameCreationAppManifest(
'workbench-resource-reference',
'引用入口测试',
@@ -3247,10 +3250,20 @@ export function registerProjectWorkbenchFoundationTests() {
const referenceButton = within(toolbar).getByRole('button', {
name: '引用资源 hero.png',
});
// 原生按钮 = 天生进 Tab 序;标题沿用「@引用」,与卡片入口时期的说法一致。
// 原生按钮 = 天生进 Tab 序;标题与可见文案一致,且都不再自带 `@`
// —— 那个 `@` 由 `AtSign` 图标承担,文案里重复写会渲染成「@ @引用」。
expect(referenceButton.tagName).toBe('BUTTON');
expect(referenceButton.getAttribute('type')).toBe('button');
expect(referenceButton.getAttribute('title')).toBe('@引用');
expect(referenceButton.getAttribute('title')).toBe('引用');
expect(
referenceButton.querySelector(
'.genarrative-image-canvas__chrome-button-label',
)?.textContent,
).toBe('引用');
// 无障碍名保留完整说法:图标不带语义,读屏只能靠它知道引用的是哪张素材。
expect(referenceButton.getAttribute('aria-label')).toBe(
'引用资源 hero.png',
);
const inserted: unknown[] = [];
const onInsert = (event: Event) => {
@@ -3396,7 +3409,7 @@ export function registerProjectWorkbenchFoundationTests() {
.getAllByRole('button')
.map((button) => button.getAttribute('aria-label') ?? '');
const infoButton = within(toolbar).getByRole('button', { name: '信息' });
// 位置固定在「@引用」之后、「编辑标签」之前:工具条上的顺序即功能顺序。
// 位置固定在「引用」之后、「编辑标签」之前:工具条上的顺序即功能顺序。
expect(toolbarLabels.indexOf('信息')).toBeGreaterThan(
toolbarLabels.indexOf('引用资源 hero.png'),
);
@@ -3648,7 +3661,7 @@ export function registerProjectWorkbenchFoundationTests() {
),
).toBe(false);
// 音频资源的选中工具条复用美术画布的音频分支(aria-label「素材工具栏」),
// 并且只渲染宿主编排层真实接通的动作:「@引用」(从卡片挪进工具条的引用入口,
// 并且只渲染宿主编排层真实接通的动作:「引用」(从卡片挪进工具条的引用入口,
// 资源卡上的圆钮已删除)「信息」(只读信息浮层)「编辑标签」(面板只编辑 manifest
// `assets[].tags`,分类不再有手动入口)「重命名」已接面板,「下载按钮」复用资源
// 面板同一条落盘链路,「改造」在宿主编排层仍是空回调,不能再渲染成点了没反应的按钮。