收口推荐卡与作品卡图标动作按钮

推荐运行态点赞分享改造按钮复用 PlatformIconButton 并保留拖拽隔离
创作中心公开作品卡分享快按钮复用 PlatformIconButton
补充回归测试并更新 PlatformUiKit 收口文档与共享决策
This commit is contained in:
2026-06-10 18:15:58 +08:00
parent 1841eac0e1
commit 17cf65a1a3
6 changed files with 55 additions and 28 deletions

View File

@@ -1139,7 +1139,13 @@ test('creation hub published share icon is shown directly on the card header', (
/>,
);
expect(screen.getByRole('button', { name: '分享' })).toBeTruthy();
const shareButton = screen.getByRole('button', { name: '分享' });
expect(shareButton).toBeTruthy();
expect(shareButton.className).toContain('platform-icon-button');
expect(shareButton.className).toContain(
'creation-work-card__quick-action-button',
);
expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
});

View File

@@ -19,6 +19,7 @@ import {
} from 'react';
import { PlatformActionButton } from '../common/PlatformActionButton';
import { PlatformIconButton } from '../common/PlatformIconButton';
import { PlatformPillBadge } from '../common/PlatformPillBadge';
import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork';
import {
@@ -651,8 +652,9 @@ export function CustomWorldWorkCard({
</div>
{canUseShareAction ? (
<div className="creation-work-card__quick-actions">
<button
type="button"
<PlatformIconButton
label="分享"
icon={<Share2 aria-hidden="true" className="h-4 w-4" />}
onClick={(event) => {
event.stopPropagation();
suppressOpenRef.current = false;
@@ -669,11 +671,8 @@ export function CustomWorldWorkCard({
event.stopPropagation();
}}
title="分享作品"
aria-label="分享"
className="creation-work-card__quick-action-button"
>
<Share2 aria-hidden="true" className="h-4 w-4" />
</button>
/>
</div>
) : null}
</div>

View File

@@ -4842,13 +4842,25 @@ test('logged in recommend runtime preloads adjacent work previews and drag switc
name: '点赞 12',
});
expect(likeButton).toBeTruthy();
expect(likeButton.className).toContain('platform-icon-button');
expect(likeButton.className).toContain(
'platform-recommend-work-meta__action--like',
);
expect(activeRecommendCard.getByLabelText('12 个赞')).toBeTruthy();
const shareButton = activeRecommendCard.getByRole('button', { name: '分享' });
expect(shareButton.className).toContain('platform-icon-button');
expect(shareButton.className).toContain(
'platform-recommend-work-meta__action--icon',
);
const remixButton = activeRecommendCard.getByRole('button', {
name: '改造 5',
});
expect(shareButton).toBeTruthy();
expect(remixButton).toBeTruthy();
expect(remixButton.className).toContain('platform-icon-button');
expect(remixButton.className).toContain(
'platform-recommend-work-meta__action--remix',
);
fireEvent.click(likeButton);
fireEvent.click(shareButton);
@@ -4861,6 +4873,19 @@ test('logged in recommend runtime preloads adjacent work previews and drag switc
activeRecommendCard.getByRole('button', { name: '分享' }),
).toBeTruthy();
act(() => {
dispatchPointerEvent(likeButton, 'pointerdown', {
pointerId: 1,
clientY: 300,
});
dispatchPointerEvent(meta, 'pointermove', { pointerId: 1, clientY: 210 });
dispatchPointerEvent(meta, 'pointerup', { pointerId: 1, clientY: 210 });
vi.advanceTimersByTime(180);
});
expect(onSelectNextRecommendEntry).not.toHaveBeenCalled();
expect(onSelectPreviousRecommendEntry).not.toHaveBeenCalled();
act(() => {
dispatchPointerEvent(meta, 'pointerdown', { pointerId: 1, clientY: 300 });
dispatchPointerEvent(meta, 'pointermove', { pointerId: 1, clientY: 210 });

View File

@@ -1871,54 +1871,48 @@ function RecommendRuntimeMeta({
</span>
</div>
<div className="platform-recommend-work-meta__actions">
<button
type="button"
<PlatformIconButton
className="platform-recommend-work-meta__action platform-recommend-work-meta__action--icon platform-recommend-work-meta__action--like"
label={`点赞 ${formatPlatformCompactCount(likeCount)}`}
title="点赞"
icon={<ThumbsUp className="h-5 w-5" aria-hidden="true" />}
onPointerDown={stopActionPointer}
onClick={(event) => {
event.stopPropagation();
onLike?.();
}}
disabled={!isActive || !onLike}
aria-label={`点赞 ${formatPlatformCompactCount(likeCount)}`}
title="点赞"
>
<ThumbsUp className="h-5 w-5" aria-hidden="true" />
</button>
/>
<span
className="platform-recommend-work-meta__like-count"
aria-label={`${formatPlatformCompactCount(likeCount)} 个赞`}
>
{formatPlatformCompactCount(likeCount)}
</span>
<button
type="button"
<PlatformIconButton
className="platform-recommend-work-meta__action platform-recommend-work-meta__action--icon"
label="分享"
title="分享"
icon={<Share2 className="h-5 w-5" aria-hidden="true" />}
onPointerDown={stopActionPointer}
onClick={(event) => {
event.stopPropagation();
onShare?.();
}}
disabled={!isActive || !onShare}
aria-label="分享"
title="分享"
>
<Share2 className="h-5 w-5" aria-hidden="true" />
</button>
<button
type="button"
/>
<PlatformIconButton
className="platform-recommend-work-meta__action platform-recommend-work-meta__action--icon platform-recommend-work-meta__action--remix"
label={`改造 ${formatPlatformCompactCount(remixCount)}`}
title="改造"
icon={<GitFork className="h-5 w-5" aria-hidden="true" />}
onPointerDown={stopActionPointer}
onClick={(event) => {
event.stopPropagation();
onRemix?.();
}}
disabled={!isActive || !onRemix}
aria-label={`改造 ${formatPlatformCompactCount(remixCount)}`}
title="改造"
>
<GitFork className="h-5 w-5" aria-hidden="true" />
</button>
/>
</div>
</div>
</section>