426 lines
13 KiB
TypeScript
426 lines
13 KiB
TypeScript
import {
|
|
ArrowLeft,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Clock3,
|
|
Copy,
|
|
Gamepad2,
|
|
GitFork,
|
|
Heart,
|
|
Play,
|
|
Share2,
|
|
} from 'lucide-react';
|
|
import { useEffect, useMemo, useState } from 'react';
|
|
|
|
import { buildPublicWorkDetailUrl } from '../../routing/appPageRoutes';
|
|
import { copyTextToClipboard } from '../../services/clipboard';
|
|
import { ResolvedAssetImage } from '../ResolvedAssetImage';
|
|
import {
|
|
buildPlatformWorldDisplayTags,
|
|
formatPlatformWorkDisplayName,
|
|
formatPlatformWorkDisplayTags,
|
|
formatPlatformWorldTime,
|
|
type PlatformPublicGalleryCard,
|
|
resolvePlatformPublicWorkCode,
|
|
resolvePlatformWorldCoverSlides,
|
|
resolvePlatformWorldStats,
|
|
} from '../rpg-entry/rpgEntryWorldPresentation';
|
|
|
|
export interface PlatformWorkDetailViewProps {
|
|
entry: PlatformPublicGalleryCard;
|
|
authorAvatarUrl?: string | null;
|
|
authorDisplayName?: string | null;
|
|
isBusy: boolean;
|
|
error: string | null;
|
|
onBack: () => void;
|
|
onLike: () => void;
|
|
onStart: () => void;
|
|
onRemix: () => void;
|
|
}
|
|
|
|
function formatCompactCount(value: number) {
|
|
if (value >= 10000) {
|
|
const normalized = value / 10000;
|
|
return `${Number.isInteger(normalized) ? normalized.toFixed(0) : normalized.toFixed(1)}万`;
|
|
}
|
|
return `${value}`;
|
|
}
|
|
|
|
function getSourceLabel(entry: PlatformPublicGalleryCard) {
|
|
if ('sourceType' in entry && entry.sourceType === 'puzzle') {
|
|
return '拼图';
|
|
}
|
|
if ('sourceType' in entry && entry.sourceType === 'big-fish') {
|
|
return '大鱼吃小鱼';
|
|
}
|
|
if ('sourceType' in entry && entry.sourceType === 'match3d') {
|
|
return '抓大鹅';
|
|
}
|
|
return 'RPG';
|
|
}
|
|
|
|
function getAuthorAvatarLabel(authorDisplayName: string) {
|
|
return Array.from(authorDisplayName.trim() || '作')[0] ?? '作';
|
|
}
|
|
|
|
const PLATFORM_WORK_COVER_CAROUSEL_INTERVAL_MS = 4200;
|
|
|
|
export function PlatformWorkDetailView({
|
|
entry,
|
|
authorAvatarUrl,
|
|
authorDisplayName,
|
|
isBusy,
|
|
error,
|
|
onBack,
|
|
onLike,
|
|
onStart,
|
|
onRemix,
|
|
}: PlatformWorkDetailViewProps) {
|
|
const coverSlides = useMemo(
|
|
() => resolvePlatformWorldCoverSlides(entry),
|
|
[entry],
|
|
);
|
|
const [activeCoverIndex, setActiveCoverIndex] = useState(0);
|
|
const activeCoverSlide =
|
|
coverSlides[activeCoverIndex] ?? coverSlides[0] ?? null;
|
|
const coverImage = activeCoverSlide?.imageSrc ?? '';
|
|
const hasCoverCarousel = coverSlides.length > 1;
|
|
const publicWorkCode = resolvePlatformPublicWorkCode(entry);
|
|
const normalizedAuthorAvatarUrl = authorAvatarUrl?.trim() ?? '';
|
|
const resolvedAuthorDisplayName =
|
|
authorDisplayName?.trim() || entry.authorDisplayName;
|
|
const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>(
|
|
'idle',
|
|
);
|
|
const [shareState, setShareState] = useState<'idle' | 'copied' | 'failed'>(
|
|
'idle',
|
|
);
|
|
const displayName = formatPlatformWorkDisplayName(entry.worldName);
|
|
const tags = useMemo(
|
|
() =>
|
|
formatPlatformWorkDisplayTags(
|
|
[getSourceLabel(entry), ...buildPlatformWorldDisplayTags(entry, 3)],
|
|
4,
|
|
),
|
|
[entry],
|
|
);
|
|
const stats = resolvePlatformWorldStats(entry);
|
|
const statItems = [
|
|
{
|
|
label: '游玩',
|
|
value: formatCompactCount(stats.playCount),
|
|
unit: '次',
|
|
icon: Gamepad2,
|
|
tone: 'play',
|
|
},
|
|
{
|
|
label: '改造',
|
|
value: formatCompactCount(stats.remixCount),
|
|
unit: '次',
|
|
icon: GitFork,
|
|
tone: 'remix',
|
|
},
|
|
{
|
|
label: '点赞',
|
|
value: formatCompactCount(stats.likeCount),
|
|
unit: '赞',
|
|
icon: Heart,
|
|
tone: 'like',
|
|
},
|
|
{
|
|
label: '日期',
|
|
value: formatPlatformWorldTime(stats.updatedAt ?? stats.publishedAt),
|
|
icon: Clock3,
|
|
tone: 'time',
|
|
isTime: true,
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
setActiveCoverIndex(0);
|
|
}, [entry.profileId, coverSlides.length]);
|
|
|
|
useEffect(() => {
|
|
setActiveCoverIndex((current) =>
|
|
coverSlides.length > 0 ? Math.min(current, coverSlides.length - 1) : 0,
|
|
);
|
|
}, [coverSlides.length]);
|
|
|
|
useEffect(() => {
|
|
if (!hasCoverCarousel) {
|
|
return undefined;
|
|
}
|
|
|
|
const timerId = window.setInterval(() => {
|
|
setActiveCoverIndex((current) => (current + 1) % coverSlides.length);
|
|
}, PLATFORM_WORK_COVER_CAROUSEL_INTERVAL_MS);
|
|
|
|
return () => {
|
|
window.clearInterval(timerId);
|
|
};
|
|
}, [coverSlides.length, hasCoverCarousel]);
|
|
|
|
const showPreviousCover = () => {
|
|
if (!hasCoverCarousel) {
|
|
return;
|
|
}
|
|
setActiveCoverIndex(
|
|
(current) => (current - 1 + coverSlides.length) % coverSlides.length,
|
|
);
|
|
};
|
|
|
|
const showNextCover = () => {
|
|
if (!hasCoverCarousel) {
|
|
return;
|
|
}
|
|
setActiveCoverIndex((current) => (current + 1) % coverSlides.length);
|
|
};
|
|
|
|
const copyPublicWorkCode = () => {
|
|
if (!publicWorkCode) {
|
|
return;
|
|
}
|
|
|
|
void copyTextToClipboard(publicWorkCode).then((copied) => {
|
|
setCopyState(copied ? 'copied' : 'failed');
|
|
window.setTimeout(() => setCopyState('idle'), 1400);
|
|
});
|
|
};
|
|
|
|
const sharePublicWork = () => {
|
|
if (!publicWorkCode) {
|
|
return;
|
|
}
|
|
|
|
const shareText = `邀请你来玩《${entry.worldName}》\n作品号：${publicWorkCode}\n${buildPublicWorkDetailUrl(publicWorkCode)}`;
|
|
void copyTextToClipboard(shareText).then((copied) => {
|
|
setShareState(copied ? 'copied' : 'failed');
|
|
window.setTimeout(() => setShareState('idle'), 1400);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="platform-work-detail">
|
|
<div className="platform-work-detail__topbar">
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__icon-button"
|
|
onClick={onBack}
|
|
aria-label="返回"
|
|
title="返回"
|
|
>
|
|
<ArrowLeft className="h-6 w-6" />
|
|
</button>
|
|
<div className="platform-work-detail__title">详情</div>
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__icon-button"
|
|
onClick={sharePublicWork}
|
|
disabled={!publicWorkCode}
|
|
aria-label="分享"
|
|
title="分享"
|
|
>
|
|
<Share2 className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="platform-work-detail__scroll">
|
|
<section className="platform-work-detail__cover">
|
|
{coverImage ? (
|
|
<>
|
|
<ResolvedAssetImage
|
|
src={coverImage}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="platform-work-detail__cover-blur"
|
|
/>
|
|
<ResolvedAssetImage
|
|
src={coverImage}
|
|
alt={entry.worldName}
|
|
className="platform-work-detail__cover-image"
|
|
/>
|
|
{hasCoverCarousel ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__cover-nav platform-work-detail__cover-nav--prev"
|
|
onClick={showPreviousCover}
|
|
aria-label="上一张关卡图"
|
|
title="上一张关卡图"
|
|
>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__cover-nav platform-work-detail__cover-nav--next"
|
|
onClick={showNextCover}
|
|
aria-label="下一张关卡图"
|
|
title="下一张关卡图"
|
|
>
|
|
<ChevronRight className="h-5 w-5" />
|
|
</button>
|
|
<div className="platform-work-detail__cover-dots">
|
|
{coverSlides.map((slide, index) => (
|
|
<button
|
|
key={slide.id}
|
|
type="button"
|
|
className={`platform-work-detail__cover-dot${
|
|
index === activeCoverIndex
|
|
? ' platform-work-detail__cover-dot--active'
|
|
: ''
|
|
}`}
|
|
onClick={() => setActiveCoverIndex(index)}
|
|
aria-label={`查看${slide.label || `第 ${index + 1} 关`}`}
|
|
aria-current={
|
|
index === activeCoverIndex ? 'true' : undefined
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
) : null}
|
|
</>
|
|
) : (
|
|
<div className="platform-work-detail__cover-fallback" />
|
|
)}
|
|
</section>
|
|
|
|
<section className="platform-work-detail__summary">
|
|
<div className="platform-work-detail__meta-row">
|
|
<div className="platform-work-detail__app-icon">
|
|
{coverImage ? (
|
|
<ResolvedAssetImage
|
|
src={coverImage}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
entry.worldName.slice(0, 1)
|
|
)}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="platform-work-detail__name">{displayName}</div>
|
|
<div className="platform-work-detail__author">
|
|
<span className="platform-work-detail__author-avatar">
|
|
{normalizedAuthorAvatarUrl ? (
|
|
<ResolvedAssetImage
|
|
src={normalizedAuthorAvatarUrl}
|
|
alt=""
|
|
aria-hidden="true"
|
|
className="platform-work-detail__author-avatar-image"
|
|
/>
|
|
) : (
|
|
<span className="platform-work-detail__author-avatar-label">
|
|
{getAuthorAvatarLabel(resolvedAuthorDisplayName)}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="platform-work-detail__author-name">
|
|
{resolvedAuthorDisplayName}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__like"
|
|
onClick={onLike}
|
|
disabled={isBusy}
|
|
aria-label={`点赞 ${formatCompactCount(stats.likeCount)}赞`}
|
|
title="点赞"
|
|
>
|
|
<Heart className="h-5 w-5 fill-current" />
|
|
点赞
|
|
</button>
|
|
</div>
|
|
|
|
<div className="platform-work-detail__stats">
|
|
{statItems.map((item) => (
|
|
<div
|
|
key={item.label}
|
|
className={`platform-work-detail__stat platform-work-detail__stat--${item.tone}`}
|
|
>
|
|
<div className="platform-work-detail__stat-head">
|
|
<span className="platform-work-detail__stat-icon">
|
|
<item.icon className="h-3.5 w-3.5" />
|
|
</span>
|
|
<span className="platform-work-detail__stat-label">
|
|
{item.label}
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`platform-work-detail__stat-value${
|
|
item.isTime ? ' platform-work-detail__stat-value--time' : ''
|
|
}`}
|
|
>
|
|
<span className="platform-work-detail__stat-number">
|
|
{item.value}
|
|
</span>
|
|
{item.unit ? (
|
|
<span className="platform-work-detail__stat-unit">
|
|
{item.unit}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="platform-work-detail__body">
|
|
<div className="platform-work-detail__chips">
|
|
{tags.map((tag) => (
|
|
<span key={tag} className="platform-work-detail__chip">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<p className="platform-work-detail__copy">{entry.summaryText}</p>
|
|
{publicWorkCode ? (
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__code"
|
|
onClick={copyPublicWorkCode}
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
<span>{publicWorkCode}</span>
|
|
{copyState !== 'idle' ? (
|
|
<span>{copyState === 'copied' ? '已复制' : '复制失败'}</span>
|
|
) : null}
|
|
</button>
|
|
) : null}
|
|
{shareState !== 'idle' ? (
|
|
<div className="platform-work-detail__toast">
|
|
{shareState === 'copied' ? '分享内容已复制' : '分享失败'}
|
|
</div>
|
|
) : null}
|
|
{error ? (
|
|
<div className="platform-work-detail__error">{error}</div>
|
|
) : null}
|
|
</section>
|
|
</div>
|
|
|
|
<div className="platform-work-detail__bottom">
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__remix"
|
|
onClick={onRemix}
|
|
disabled={isBusy}
|
|
>
|
|
<GitFork className="h-5 w-5" />
|
|
作品改造
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="platform-work-detail__start"
|
|
onClick={onStart}
|
|
disabled={isBusy}
|
|
>
|
|
<Play className="h-5 w-5 fill-current" />
|
|
启动
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|