收口推荐卡与作品卡图标动作按钮
推荐运行态点赞分享改造按钮复用 PlatformIconButton 并保留拖拽隔离 创作中心公开作品卡分享快按钮复用 PlatformIconButton 补充回归测试并更新 PlatformUiKit 收口文档与共享决策
This commit is contained in:
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 });
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user