GenarrativeAI/Genarrative
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并分享链路重构到主分支

Browse Source 
合入通用作品分享卡片与小程序直达路径
合入推荐页当前作品系统分享参数同步
合入小程序九宫切图与相关测试

# Conflicts:
#	.hermes/shared-memory/decision-log.md
#	docs/【开发运维】本地开发验证与生产运维-2026-05-15.md
#	docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
#	src/components/custom-world-home/CustomWorldCreationHub.tsx
#	src/components/platform-entry/PlatformEntryFlowShellImpl.test.ts
#	src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
#	src/components/rpg-entry/RpgEntryHomeView.tsx
This commit is contained in:
kdletters
2026-06-11 22:50:32 +08:00
parent f8a80cd795 d78c11d5b7
commit 1dd58a3d66
35 changed files with 2185 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/common/PublishShareModal.test.tsx
View File

@@ -10,24 +10,39 @@ import {
import { afterEach, describe, expect, test, vi } from 'vitest';
import * as clipboardService from '../../services/clipboard';
import * as shareGridService from '../../services/wechatMiniProgramShareGrid';
import { PublishShareModal } from './PublishShareModal';
import {
buildMiniProgramPublishSharePath,
buildPublishShareCardFileName,
buildPublishShareCopyUrl,
buildPublishShareText,
buildPublishShareUrl,
type PublishShareModalPayload,
} from './publishShareModalModel';
vi.mock('../../services/clipboard', () => ({
copyTextToClipboard: vi.fn(),
}));
vi.mock('../../services/wechatMiniProgramShareGrid', () => ({
canUseWechatMiniProgramShareGrid: vi.fn(() => false),
openWechatMiniProgramShareGridPage: vi.fn(),
}));
const payload: PublishShareModalPayload = {
title: '暖灯猫街',
publicWorkCode: 'PZ-00000001',
stage: 'puzzle-gallery-detail',
workTypeLabel: '拼图',
coverImageSrc: '/cover.png',
};
afterEach(() => {
vi.clearAllMocks();
vi.mocked(shareGridService.canUseWechatMiniProgramShareGrid).mockReturnValue(
false,
);
window.history.replaceState(null, '', '/');
});
describe('PublishShareModal', () => {
@@ -39,7 +54,40 @@ describe('PublishShareModal', () => {
expect(text).toContain('/gallery/puzzle/detail?work=PZ-00000001');
});
test('renders share text and channel icons, then copies from main button', async () => {
test('builds the card file name without unsafe path characters', () => {
expect(
buildPublishShareCardFileName({
title: '暖灯:猫街',
publicWorkCode: 'PZ-00000001',
}),
).toBe('暖灯猫街-PZ-00000001.png');
});
test('builds a mini program share path with public work detail params', () => {
const sharePath = buildMiniProgramPublishSharePath(payload);
const url = new URL(sharePath, 'https://mini.test');
expect(url.pathname).toBe('/pages/web-view/index');
expect(url.searchParams.get('targetPath')).toBe('/works/detail');
expect(url.searchParams.get('work')).toBe('PZ-00000001');
expect(buildPublishShareCopyUrl(payload, { miniProgramRuntime: true })).toBe(
sharePath,
);
});
test('keeps existing mini program share params and fills missing detail params', () => {
const sharePath = buildMiniProgramPublishSharePath(
payload,
'/pages/web-view/index?scene=poster',
);
const url = new URL(sharePath, 'https://mini.test');
expect(url.searchParams.get('scene')).toBe('poster');
expect(url.searchParams.get('targetPath')).toBe('/works/detail');
expect(url.searchParams.get('work')).toBe('PZ-00000001');
});
test('renders the share card and copies the public link', async () => {
vi.mocked(clipboardService.copyTextToClipboard).mockResolvedValue(true);
render(
@@ -52,26 +100,55 @@ describe('PublishShareModal', () => {
expect(dialog.className).toContain('platform-modal-shell');
expect(dialog.className).toContain('rounded-[1.75rem]');
expect(dialog.getAttribute('style')).toBeNull();
expect(within(dialog).getByText(/邀请你来玩《暖灯猫街》/u)).toBeTruthy();
expect(within(dialog).getByRole('button', { name: '分享' })).toBeTruthy();
expect(within(dialog).getByRole('button', { name: '分享到微信' })).toBeTruthy();
expect(within(dialog).getByRole('button', { name: '分享到QQ' })).toBeTruthy();
expect(within(dialog).getByRole('button', { name: '分享到抖音' })).toBeTruthy();
expect(
within(dialog).getByTestId('share-channel-logo-wechat'),
).toBeTruthy();
expect(within(dialog).getByTestId('share-channel-logo-qq')).toBeTruthy();
expect(
within(dialog).getByTestId('share-channel-logo-douyin'),
).toBeTruthy();
expect(within(dialog).getByRole('region', { name: '分享卡片' })).toBeTruthy();
expect(within(dialog).getByText('拼图')).toBeTruthy();
expect(within(dialog).getByText('暖灯猫街')).toBeTruthy();
expect(within(dialog).getByRole('button', { name: '复制链接' })).toBeTruthy();
expect(within(dialog).getByRole('button', { name: '下载卡片' })).toBeTruthy();
expect(within(dialog).queryByRole('button', { name: '九宫切图' })).toBeNull();
fireEvent.click(within(dialog).getByRole('button', { name: '分享' }));
fireEvent.click(within(dialog).getByRole('button', { name: '复制链接' }));
expect(clipboardService.copyTextToClipboard).toHaveBeenCalledWith(
expect.stringContaining('作品号：PZ-00000001'),
buildPublishShareUrl(payload),
);
await waitFor(() => {
expect(within(dialog).getByRole('button', { name: '已复制' })).toBeTruthy();
});
});
test('copies the mini program link inside mini program web-view', async () => {
vi.mocked(clipboardService.copyTextToClipboard).mockResolvedValue(true);
window.history.replaceState(
null,
'',
'/?clientRuntime=wechat_mini_program',
);
render(
<PublishShareModal open payload={payload} onClose={() => {}} />,
);
const dialog = screen.getByRole('dialog', { name: '分享给朋友' });
fireEvent.click(within(dialog).getByRole('button', { name: '复制链接' }));
expect(clipboardService.copyTextToClipboard).toHaveBeenCalledWith(
buildMiniProgramPublishSharePath(payload),
);
await waitFor(() => {
expect(within(dialog).getByRole('button', { name: '已复制' })).toBeTruthy();
});
});
test('shows the mini program grid action only inside mini program runtime', () => {
vi.mocked(shareGridService.canUseWechatMiniProgramShareGrid).mockReturnValue(
true,
);
render(
<PublishShareModal open payload={payload} onClose={() => {}} />,
);
expect(screen.getByRole('button', { name: '九宫切图' })).toBeTruthy();
});
});

331
src/components/common/PublishShareModal.tsx
View File

@@ -1,10 +1,18 @@
import { Check, Copy } from 'lucide-react';
import { Check, Copy, Download, Grid3X3, Link2 } from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { resolveAssetReadUrl } from '../../services/assetReadUrlService';
import { isWechatMiniProgramWebViewRuntime } from '../../services/authService';
import { copyTextToClipboard } from '../../services/clipboard';
import { useAuthUi } from '../auth/AuthUiContext';
import {
buildPublishShareText,
canUseWechatMiniProgramShareGrid,
openWechatMiniProgramShareGridPage,
} from '../../services/wechatMiniProgramShareGrid';
import { useAuthUi } from '../auth/AuthUiContext';
import { ResolvedAssetImage } from '../ResolvedAssetImage';
import { downloadPublishShareCardImage } from './publishShareCardImage';
import {
buildPublishShareCopyUrl,
type PublishShareModalPayload,
} from './publishShareModalModel';
import { UnifiedModal } from './UnifiedModal';
@@ -15,78 +23,27 @@ type PublishShareModalProps = {
onClose: () => void;
};
type ShareChannelId = 'wechat' | 'qq' | 'douyin';
type ActionState = 'idle' | 'success' | 'failed';
type ShareChannel = {
id: ShareChannelId;
label: string;
iconClassName: string;
};
// 中文注释：渠道图标只承载品牌轮廓，不复用社群二维码或通用聊天图标。
const SHARE_CHANNEL_ICON_PATHS: Record<ShareChannelId, string> = {
wechat:
'M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z',
qq: 'M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673',
douyin:
'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z',
};
const SHARE_CHANNELS = [
{
id: 'wechat',
label: '微信',
iconClassName: 'bg-[#07c160] text-white',
},
{
id: 'qq',
label: 'QQ',
iconClassName: 'bg-[#12b7f5] text-white',
},
{
id: 'douyin',
label: '抖音',
iconClassName: 'bg-black text-white',
},
] as const satisfies readonly ShareChannel[];
function ShareChannelLogo({ channel }: { channel: ShareChannel }) {
const iconPath = SHARE_CHANNEL_ICON_PATHS[channel.id];
if (channel.id === 'douyin') {
return (
<svg
viewBox="-1 -1 26 26"
aria-hidden="true"
focusable="false"
className="h-6 w-6 overflow-visible"
data-share-channel-logo={channel.id}
data-testid={`share-channel-logo-${channel.id}`}
>
<path d={iconPath} fill="#25f4ee" transform="translate(-0.75 0.45)" />
<path d={iconPath} fill="#fe2c55" transform="translate(0.75 -0.45)" />
<path d={iconPath} fill="currentColor" />
</svg>
);
}
function normalizePayloadTitle(payload: PublishShareModalPayload | null) {
return payload?.title.trim() || '我的作品';
}
function resolvePayloadCoverImageSrc(payload: PublishShareModalPayload | null) {
return (
<svg
viewBox="0 0 24 24"
aria-hidden="true"
focusable="false"
className="h-6 w-6"
data-share-channel-logo={channel.id}
data-testid={`share-channel-logo-${channel.id}`}
>
<path d={iconPath} fill="currentColor" />
</svg>
payload?.coverImageSrc?.trim() ||
payload?.fallbackCoverImageSrc?.trim() ||
''
);
}
function resolvePayloadWorkTypeLabel(payload: PublishShareModalPayload | null) {
return payload?.workTypeLabel?.trim() || '互动作品';
}
/**
* 发布完成后的分享弹窗。
* 目前各渠道先统一复制分享文本，后续如接入微信/QQ/抖音 SDK，可以只替换这里的渠道点击逻辑。
* 发布完成后的通用分享弹窗。
* 分享事实仍来自公开作品号与 stage；弹窗只负责把它表现成可复制、可下载的分享卡。
*/
export function PublishShareModal({
open,
@@ -94,14 +51,24 @@ export function PublishShareModal({
onClose,
}: PublishShareModalProps) {
const platformTheme = useAuthUi()?.platformTheme ?? 'light';
const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>(
'idle',
);
const [copyState, setCopyState] = useState<ActionState>('idle');
const [downloadState, setDownloadState] = useState<ActionState>('idle');
const [gridState, setGridState] = useState<ActionState>('idle');
const resetTimerRef = useRef<number | null>(null);
const shareText = useMemo(
() => (payload ? buildPublishShareText(payload) : ''),
const shareCopyUrl = useMemo(
() =>
payload
? buildPublishShareCopyUrl(payload, {
miniProgramRuntime: isWechatMiniProgramWebViewRuntime(),
})
: '',
[payload],
);
const title = normalizePayloadTitle(payload);
const coverImageSrc = resolvePayloadCoverImageSrc(payload);
const workTypeLabel = resolvePayloadWorkTypeLabel(payload);
const showMiniProgramGridButton =
canUseWechatMiniProgramShareGrid() && Boolean(coverImageSrc);
useEffect(
() => () => {
@@ -114,25 +81,92 @@ export function PublishShareModal({
useEffect(() => {
setCopyState('idle');
setDownloadState('idle');
setGridState('idle');
}, [payload?.publicWorkCode]);
const copyShareText = () => {
if (!shareText) {
const scheduleStateReset = () => {
if (resetTimerRef.current !== null) {
window.clearTimeout(resetTimerRef.current);
}
resetTimerRef.current = window.setTimeout(() => {
resetTimerRef.current = null;
setCopyState('idle');
setDownloadState('idle');
setGridState('idle');
}, 1400);
};
const copyShareLink = () => {
if (!shareCopyUrl) {
return;
}
void copyTextToClipboard(shareText).then((copied) => {
setCopyState(copied ? 'copied' : 'failed');
if (resetTimerRef.current !== null) {
window.clearTimeout(resetTimerRef.current);
}
resetTimerRef.current = window.setTimeout(() => {
resetTimerRef.current = null;
setCopyState('idle');
}, 1400);
void copyTextToClipboard(shareCopyUrl).then((copied) => {
setCopyState(copied ? 'success' : 'failed');
scheduleStateReset();
});
};
const resolveMiniProgramGridCover = async () => {
if (!coverImageSrc) {
return '';
}
return await resolveAssetReadUrl(coverImageSrc, {
expireSeconds: 600,
}).catch(() => coverImageSrc);
};
const downloadShareCard = () => {
if (!payload) {
return;
}
setDownloadState('idle');
void downloadPublishShareCardImage(
{
...payload,
title,
workTypeLabel,
coverImageSrc,
},
coverImageSrc,
)
.then((downloaded) => {
setDownloadState(downloaded ? 'success' : 'failed');
scheduleStateReset();
})
.catch(() => {
setDownloadState('failed');
scheduleStateReset();
});
};
const openMiniProgramGridDownload = () => {
if (!payload || !coverImageSrc) {
return;
}
setGridState('idle');
void resolveMiniProgramGridCover()
.then((resolvedCoverImageSrc) =>
openWechatMiniProgramShareGridPage({
imageUrl: resolvedCoverImageSrc,
title,
publicWorkCode: payload.publicWorkCode,
}),
)
.then((opened) => {
setGridState(opened ? 'success' : 'failed');
scheduleStateReset();
})
.catch(() => {
setGridState('failed');
scheduleStateReset();
});
};
return (
<UnifiedModal
open={open && Boolean(payload)}
@@ -142,53 +176,98 @@ export function PublishShareModal({
overlayClassName={`platform-theme platform-theme--${platformTheme} !items-center`}
panelClassName="platform-remap-surface rounded-[1.75rem]"
bodyClassName="space-y-4 px-4 py-4 sm:px-5 sm:py-5"
footerClassName="justify-center border-t-0 px-4 pb-5 pt-0 sm:px-5"
footerClassName="border-t-0 px-4 pb-5 pt-0 sm:px-5"
footer={
<div className="grid w-full grid-cols-3 gap-3">
{SHARE_CHANNELS.map((channel) => {
return (
<button
key={channel.id}
type="button"
onClick={copyShareText}
className="flex min-w-0 flex-col items-center gap-2 rounded-[1rem] px-2 py-2.5 text-xs font-bold text-[var(--platform-text-base)] transition hover:bg-white/62"
aria-label={`分享到${channel.label}`}
title={channel.label}
>
<span
className={`inline-flex h-11 w-11 items-center justify-center rounded-full shadow-sm ${channel.iconClassName}`}
>
<ShareChannelLogo channel={channel} />
</span>
<span>{channel.label}</span>
</button>
);
})}
<div
className={`grid w-full gap-3 ${
showMiniProgramGridButton ? 'grid-cols-1 sm:grid-cols-3' : 'grid-cols-2'
}`}
>
<button
type="button"
onClick={copyShareLink}
disabled={!shareCopyUrl}
className="platform-button platform-button--primary min-h-11 justify-center gap-2 text-sm disabled:cursor-not-allowed disabled:opacity-55"
>
{copyState === 'success' ? (
<Check className="h-4 w-4" />
) : (
<Link2 className="h-4 w-4" />
)}
{copyState === 'success'
? '已复制'
: copyState === 'failed'
? '复制失败'
: '复制链接'}
</button>
<button
type="button"
onClick={downloadShareCard}
disabled={!payload}
className="platform-button platform-button--secondary min-h-11 justify-center gap-2 text-sm disabled:cursor-not-allowed disabled:opacity-55"
>
{downloadState === 'success' ? (
<Check className="h-4 w-4" />
) : (
<Download className="h-4 w-4" />
)}
{downloadState === 'success'
? '已下载'
: downloadState === 'failed'
? '下载失败'
: '下载卡片'}
</button>
{showMiniProgramGridButton ? (
<button
type="button"
onClick={openMiniProgramGridDownload}
className="platform-button platform-button--secondary min-h-11 justify-center gap-2 text-sm"
>
{gridState === 'success' ? (
<Check className="h-4 w-4" />
) : (
<Grid3X3 className="h-4 w-4" />
)}
{gridState === 'success'
? '已打开'
: gridState === 'failed'
? '打开失败'
: '九宫切图'}
</button>
) : null}
</div>
}
>
<div className="rounded-[1.25rem] border border-[var(--platform-subpanel-border)] bg-white/72 p-4">
<div className="whitespace-pre-wrap break-words text-sm leading-6 text-[var(--platform-text-strong)]">
{shareText}
</div>
</div>
<button
type="button"
onClick={copyShareText}
disabled={!shareText}
className="platform-button platform-button--primary w-full justify-center gap-2 disabled:cursor-not-allowed disabled:opacity-55"
<section
className="overflow-hidden rounded-lg border border-[var(--platform-subpanel-border)] bg-white/78 shadow-[0_18px_42px_rgba(127,85,57,0.12)]"
aria-label="分享卡片"
>
{copyState === 'copied' ? (
<Check className="h-4 w-4" />
) : (
<Copy className="h-4 w-4" />
)}
{copyState === 'copied'
? '已复制'
: copyState === 'failed'
? '复制失败'
: '分享'}
</button>
<div className="relative aspect-square overflow-hidden bg-[linear-gradient(135deg,#f4c38b,#e7b5b7_48%,#9bbfd1)]">
{coverImageSrc ? (
<ResolvedAssetImage
src={coverImageSrc}
alt={title}
className="h-full w-full object-cover"
/>
) : (
<div className="flex h-full w-full items-center justify-center text-6xl font-black text-white/84">
{Array.from(title)[0] ?? '陶'}
</div>
)}
</div>
<div className="space-y-3 px-4 py-4">
<div className="inline-flex max-w-full items-center rounded-full bg-[var(--platform-neutral-bg)] px-3 py-1 text-xs font-black text-[var(--platform-accent-text)]">
<span className="truncate">{workTypeLabel}</span>
</div>
<h3 className="line-clamp-2 text-lg font-black leading-snug text-[var(--platform-text-strong)]">
{title}
</h3>
<div className="flex min-w-0 items-center gap-2 text-xs font-bold text-[var(--platform-text-muted)]">
<Copy className="h-3.5 w-3.5 shrink-0" />
<span className="truncate">{payload?.publicWorkCode}</span>
</div>
</div>
</section>
</UnifiedModal>
);
}

146
src/components/common/publishShareCardImage.test.ts Normal file
View File

@@ -0,0 +1,146 @@
/* @vitest-environment jsdom */
import { afterEach, describe, expect, test, vi } from 'vitest';
import { readAssetBytes } from '../../services/assetReadUrlService';
import {
downloadPublishShareCardImage,
resolvePublishShareCardCanvasImageSource,
} from './publishShareCardImage';
vi.mock('../../services/assetReadUrlService', async () => {
const actual =
await vi.importActual<typeof import('../../services/assetReadUrlService')>(
'../../services/assetReadUrlService',
);
return {
...actual,
readAssetBytes: vi.fn(),
};
});
const createObjectUrl = vi.fn(() => 'blob:share-card-cover');
const revokeObjectUrl = vi.fn();
const fillTextCalls: string[] = [];
function installObjectUrlMocks() {
Object.defineProperty(URL, 'createObjectURL', {
configurable: true,
value: createObjectUrl,
});
Object.defineProperty(URL, 'revokeObjectURL', {
configurable: true,
value: revokeObjectUrl,
});
}
function installCanvasMocks() {
class MockImage {
crossOrigin = '';
onload: (() => void) | null = null;
onerror: (() => void) | null = null;
naturalWidth = 900;
naturalHeight = 900;
width = 900;
height = 900;
set src(_value: string) {
this.onload?.();
}
}
vi.stubGlobal('Image', MockImage);
vi.spyOn(document.body, 'appendChild').mockImplementation((node) => node);
vi.spyOn(document.body, 'removeChild').mockImplementation((node) => node);
vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {});
vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
beginPath: vi.fn(),
clearRect: vi.fn(),
clip: vi.fn(),
closePath: vi.fn(),
createLinearGradient: vi.fn(() => ({
addColorStop: vi.fn(),
})),
drawImage: vi.fn(),
fill: vi.fn(),
fillRect: vi.fn(),
fillText: vi.fn((text: string) => {
fillTextCalls.push(text);
}),
lineTo: vi.fn(),
measureText: vi.fn((text: string) => ({
width: Array.from(text).length * 32,
})),
moveTo: vi.fn(),
quadraticCurveTo: vi.fn(),
restore: vi.fn(),
save: vi.fn(),
stroke: vi.fn(),
} as unknown as CanvasRenderingContext2D);
vi.spyOn(HTMLCanvasElement.prototype, 'toBlob').mockImplementation(
(callback: BlobCallback) => {
callback(new Blob(['share-card'], { type: 'image/png' }));
},
);
}
afterEach(() => {
vi.clearAllMocks();
vi.unstubAllGlobals();
fillTextCalls.length = 0;
});
describe('publishShareCardImage', () => {
test('loads generated covers through same-origin bytes before drawing to canvas', async () => {
installObjectUrlMocks();
vi.mocked(readAssetBytes).mockResolvedValue(
new Response(new Blob(['cover-bytes'], { type: 'image/png' })),
);
const imageSource = await resolvePublishShareCardCanvasImageSource(
'/generated-puzzle-assets/session/profile/covers/main.png',
);
expect(readAssetBytes).toHaveBeenCalledWith(
'/generated-puzzle-assets/session/profile/covers/main.png',
{ expireSeconds: 600 },
);
expect(imageSource.src).toBe('blob:share-card-cover');
imageSource.release();
expect(revokeObjectUrl).toHaveBeenCalledWith('blob:share-card-cover');
});
test('keeps ordinary public covers as their original source', async () => {
const imageSource = await resolvePublishShareCardCanvasImageSource(
'/creation-type-references/puzzle.webp',
);
expect(readAssetBytes).not.toHaveBeenCalled();
expect(imageSource.src).toBe('/creation-type-references/puzzle.webp');
});
test('exports the same card content as the modal instead of adding extra branding', async () => {
installObjectUrlMocks();
installCanvasMocks();
await expect(
downloadPublishShareCardImage(
{
title: '三叶草',
publicWorkCode: 'PZ-BE68CC73',
stage: 'puzzle-gallery-detail',
workTypeLabel: '拼图',
coverImageSrc: '/cover.png',
},
'/cover.png',
),
).resolves.toBe(true);
expect(fillTextCalls).toContain('拼图');
expect(fillTextCalls).toContain('三叶草');
expect(fillTextCalls).toContain('PZ-BE68CC73');
expect(fillTextCalls).not.toContain('陶泥儿');
});
});

403
src/components/common/publishShareCardImage.ts Normal file
View File

@@ -0,0 +1,403 @@
import {
readAssetBytes,
shouldResolveAssetReadUrl,
} from '../../services/assetReadUrlService';
import {
buildPublishShareCardFileName,
type PublishShareModalPayload,
} from './publishShareModalModel';
const CARD_WIDTH = 1080;
const CARD_HEIGHT = 1440;
const CARD_RADIUS = 24;
const COVER_X = 0;
const COVER_Y = 0;
const COVER_SIZE = CARD_WIDTH;
const CONTENT_PADDING_X = 48;
const CONTENT_TOP = COVER_Y + COVER_SIZE + 48;
const TYPE_PILL_HEIGHT = 64;
type PublishShareCardTheme = {
background: string;
border: string;
neutralBackground: string;
accentText: string;
titleText: string;
mutedText: string;
};
function resolveCssColor(variableName: string, fallback: string) {
if (typeof document === 'undefined') {
return fallback;
}
const value = getComputedStyle(document.documentElement)
.getPropertyValue(variableName)
.trim();
return value || fallback;
}
function resolvePublishShareCardTheme(): PublishShareCardTheme {
return {
background: '#fffaf4',
border: resolveCssColor('--platform-subpanel-border', '#ead9c7'),
neutralBackground: resolveCssColor('--platform-neutral-bg', '#f2e3d5'),
accentText: resolveCssColor('--platform-accent-text', '#7f5539'),
titleText: resolveCssColor('--platform-text-strong', '#332820'),
mutedText: resolveCssColor('--platform-text-muted', '#a88e7c'),
};
}
function drawRoundedRect(
context: CanvasRenderingContext2D,
x: number,
y: number,
width: number,
height: number,
radius: number,
) {
context.beginPath();
context.moveTo(x + radius, y);
context.lineTo(x + width - radius, y);
context.quadraticCurveTo(x + width, y, x + width, y + radius);
context.lineTo(x + width, y + height - radius);
context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
context.lineTo(x + radius, y + height);
context.quadraticCurveTo(x, y + height, x, y + height - radius);
context.lineTo(x, y + radius);
context.quadraticCurveTo(x, y, x + radius, y);
context.closePath();
}
function drawWrappedText(
context: CanvasRenderingContext2D,
text: string,
x: number,
y: number,
maxWidth: number,
lineHeight: number,
maxLines: number,
) {
const chars = Array.from(text.trim() || '我的作品');
const lines: string[] = [];
let currentLine = '';
for (const char of chars) {
const nextLine = `${currentLine}${char}`;
if (currentLine && context.measureText(nextLine).width > maxWidth) {
lines.push(currentLine);
currentLine = char;
if (lines.length >= maxLines) {
break;
}
} else {
currentLine = nextLine;
}
}
if (lines.length < maxLines && currentLine) {
lines.push(currentLine);
}
lines.slice(0, maxLines).forEach((line, index) => {
const isLast = index === maxLines - 1 && lines.length >= maxLines;
let displayLine = line;
while (
isLast &&
displayLine.length > 1 &&
context.measureText(`${displayLine}...`).width > maxWidth
) {
displayLine = displayLine.slice(0, -1);
}
context.fillText(isLast ? `${displayLine}...` : displayLine, x, y + index * lineHeight);
});
}
function shouldLoadImageWithAnonymousCors(src: string) {
if (
src.startsWith('data:') ||
src.startsWith('blob:') ||
typeof window === 'undefined'
) {
return false;
}
try {
const parsedUrl = new URL(src, window.location.origin);
return (
/^https?:$/u.test(parsedUrl.protocol) &&
parsedUrl.origin !== window.location.origin
);
} catch {
return false;
}
}
export async function resolvePublishShareCardCanvasImageSource(src: string) {
const normalizedSrc = src.trim();
if (!normalizedSrc) {
return {
src: '',
release() {},
};
}
if (!shouldResolveAssetReadUrl(normalizedSrc)) {
return {
src: normalizedSrc,
release() {},
};
}
const response = await readAssetBytes(normalizedSrc, {
expireSeconds: 600,
});
const blob = await response.blob();
const objectUrl = URL.createObjectURL(blob);
return {
src: objectUrl,
release() {
URL.revokeObjectURL(objectUrl);
},
};
}
function loadCanvasImage(src: string) {
return new Promise<HTMLImageElement>((resolve, reject) => {
const image = new Image();
if (shouldLoadImageWithAnonymousCors(src)) {
image.crossOrigin = 'anonymous';
}
image.onload = () => resolve(image);
image.onerror = () => reject(new Error('分享卡封面加载失败'));
image.src = src;
});
}
function drawImageCover(
context: CanvasRenderingContext2D,
image: HTMLImageElement,
x: number,
y: number,
width: number,
height: number,
) {
const sourceWidth = image.naturalWidth || image.width;
const sourceHeight = image.naturalHeight || image.height;
const sourceRatio = sourceWidth / Math.max(1, sourceHeight);
const targetRatio = width / Math.max(1, height);
const cropWidth = sourceRatio > targetRatio ? sourceHeight * targetRatio : sourceWidth;
const cropHeight = sourceRatio > targetRatio ? sourceHeight : sourceWidth / targetRatio;
const cropX = (sourceWidth - cropWidth) / 2;
const cropY = (sourceHeight - cropHeight) / 2;
context.drawImage(
image,
cropX,
cropY,
cropWidth,
cropHeight,
x,
y,
width,
height,
);
}
function drawCoverFallback(
context: CanvasRenderingContext2D,
payload: PublishShareModalPayload,
) {
const gradient = context.createLinearGradient(
COVER_X,
COVER_Y,
COVER_X + COVER_SIZE,
COVER_Y + COVER_SIZE,
);
gradient.addColorStop(0, '#f6c58d');
gradient.addColorStop(0.48, '#e7b7b7');
gradient.addColorStop(1, '#9bbfd1');
context.fillStyle = gradient;
context.fillRect(COVER_X, COVER_Y, COVER_SIZE, COVER_SIZE);
context.fillStyle = 'rgba(255, 255, 255, 0.82)';
context.font = '900 156px sans-serif';
context.textAlign = 'center';
context.textBaseline = 'middle';
const initial = Array.from(payload.title.trim() || '陶')[0] ?? '陶';
context.fillText(initial, CARD_WIDTH / 2, COVER_Y + COVER_SIZE / 2);
}
function drawCopyIcon(
context: CanvasRenderingContext2D,
x: number,
y: number,
color: string,
) {
context.strokeStyle = color;
context.lineWidth = 4;
drawRoundedRect(context, x + 10, y, 24, 30, 4);
context.stroke();
drawRoundedRect(context, x, y + 10, 24, 30, 4);
context.stroke();
}
async function drawShareCard(
context: CanvasRenderingContext2D,
payload: PublishShareModalPayload,
coverImageSrc: string,
) {
const theme = resolvePublishShareCardTheme();
context.clearRect(0, 0, CARD_WIDTH, CARD_HEIGHT);
context.save();
drawRoundedRect(context, 0, 0, CARD_WIDTH, CARD_HEIGHT, CARD_RADIUS);
context.clip();
context.fillStyle = theme.background;
context.fillRect(0, 0, CARD_WIDTH, CARD_HEIGHT);
if (coverImageSrc) {
const canvasImageSource =
await resolvePublishShareCardCanvasImageSource(coverImageSrc);
try {
const image = await loadCanvasImage(canvasImageSource.src);
drawImageCover(context, image, COVER_X, COVER_Y, COVER_SIZE, COVER_SIZE);
} finally {
canvasImageSource.release();
}
} else {
drawCoverFallback(context, payload);
}
const typeLabel = payload.workTypeLabel?.trim() || '互动作品';
context.font = '800 36px sans-serif';
const pillWidth = Math.min(
CARD_WIDTH - CONTENT_PADDING_X * 2,
Math.max(180, context.measureText(typeLabel).width + 72),
);
const pillY = CONTENT_TOP;
context.fillStyle = theme.neutralBackground;
drawRoundedRect(
context,
CONTENT_PADDING_X,
pillY,
pillWidth,
TYPE_PILL_HEIGHT,
TYPE_PILL_HEIGHT / 2,
);
context.fill();
context.fillStyle = theme.accentText;
context.textAlign = 'left';
context.textBaseline = 'middle';
context.fillText(typeLabel, CONTENT_PADDING_X + 36, pillY + TYPE_PILL_HEIGHT / 2);
context.fillStyle = theme.titleText;
context.font = '900 72px sans-serif';
context.textBaseline = 'top';
drawWrappedText(
context,
payload.title,
CONTENT_PADDING_X,
pillY + 92,
CARD_WIDTH - CONTENT_PADDING_X * 2,
84,
2,
);
const code = payload.publicWorkCode.trim();
if (code) {
const codeY = CARD_HEIGHT - 74;
context.fillStyle = theme.mutedText;
context.font = '700 34px sans-serif';
context.textBaseline = 'middle';
drawCopyIcon(context, CONTENT_PADDING_X, codeY - 20, theme.mutedText);
context.fillText(code, CONTENT_PADDING_X + 54, codeY);
}
context.restore();
context.strokeStyle = theme.border;
context.lineWidth = 3;
drawRoundedRect(context, 1.5, 1.5, CARD_WIDTH - 3, CARD_HEIGHT - 3, CARD_RADIUS);
context.stroke();
}
function canvasToBlob(canvas: HTMLCanvasElement) {
return new Promise<Blob>((resolve, reject) => {
if (typeof canvas.toBlob !== 'function') {
try {
const dataUrl = canvas.toDataURL('image/png');
const binary = atob(dataUrl.split(',')[1] ?? '');
const bytes = new Uint8Array(binary.length);
for (let index = 0; index < binary.length; index += 1) {
bytes[index] = binary.charCodeAt(index);
}
resolve(new Blob([bytes], { type: 'image/png' }));
} catch (error) {
reject(error);
}
return;
}
canvas.toBlob((blob) => {
if (blob) {
resolve(blob);
} else {
reject(new Error('分享卡导出失败'));
}
}, 'image/png');
});
}
function triggerDownload(blob: Blob, fileName: string) {
const objectUrl = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = objectUrl;
anchor.download = fileName;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
window.setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
}
export async function downloadPublishShareCardImage(
payload: PublishShareModalPayload,
coverImageSrc: string,
) {
if (typeof document === 'undefined') {
return false;
}
const canvas = document.createElement('canvas');
canvas.width = CARD_WIDTH;
canvas.height = CARD_HEIGHT;
const context = canvas.getContext('2d');
if (!context) {
return false;
}
try {
await drawShareCard(context, payload, coverImageSrc);
triggerDownload(
await canvasToBlob(canvas),
buildPublishShareCardFileName(payload),
);
return true;
} catch {
const fallbackCanvas = document.createElement('canvas');
fallbackCanvas.width = CARD_WIDTH;
fallbackCanvas.height = CARD_HEIGHT;
const fallbackContext = fallbackCanvas.getContext('2d');
if (!fallbackContext) {
return false;
}
await drawShareCard(fallbackContext, payload, '');
triggerDownload(
await canvasToBlob(fallbackCanvas),
buildPublishShareCardFileName(payload),
);
return true;
}
}

53
src/components/common/publishShareModalModel.ts
View File

@@ -1,13 +1,19 @@
import { buildPublicWorkStagePath } from '../../routing/appPageRoutes';
import type { SelectionStage } from '../platform-entry/platformEntryTypes';
const MINI_PROGRAM_WEB_VIEW_PAGE_PATH = '/pages/web-view/index';
const MINI_PROGRAM_PUBLIC_WORK_DETAIL_PATH = '/works/detail';
export type PublishShareModalPayload = {
title: string;
publicWorkCode: string;
stage: SelectionStage;
workTypeLabel?: string | null;
coverImageSrc?: string | null;
fallbackCoverImageSrc?: string | null;
};
function buildShareUrl(payload: PublishShareModalPayload) {
export function buildPublishShareUrl(payload: PublishShareModalPayload) {
const sharePath = buildPublicWorkStagePath(
payload.stage,
payload.publicWorkCode,
@@ -18,13 +24,56 @@ function buildShareUrl(payload: PublishShareModalPayload) {
: new URL(sharePath, window.location.origin).href;
}
export function buildMiniProgramPublishSharePath(
payload: PublishShareModalPayload,
basePath = MINI_PROGRAM_WEB_VIEW_PAGE_PATH,
) {
const [path = MINI_PROGRAM_WEB_VIEW_PAGE_PATH, rawSearch = ''] =
basePath.split('?');
const params = new URLSearchParams(rawSearch);
const publicWorkCode = payload.publicWorkCode.trim();
if (!params.has('targetPath')) {
params.set('targetPath', MINI_PROGRAM_PUBLIC_WORK_DETAIL_PATH);
}
if (publicWorkCode && !params.has('work')) {
params.set('work', publicWorkCode);
}
const queryString = params.toString();
return queryString ? `${path}?${queryString}` : path;
}
export function buildPublishShareCopyUrl(
payload: PublishShareModalPayload,
options: { miniProgramRuntime?: boolean } = {},
) {
return options.miniProgramRuntime
? buildMiniProgramPublishSharePath(payload)
: buildPublishShareUrl(payload);
}
export function buildPublishShareText(payload: PublishShareModalPayload) {
const publicWorkCode = payload.publicWorkCode.trim();
const title = payload.title.trim() || '我的作品';
return `邀请你来玩《${title}》\n作品号：${publicWorkCode}\n${buildShareUrl({
return `邀请你来玩《${title}》\n作品号：${publicWorkCode}\n${buildPublishShareUrl({
...payload,
publicWorkCode,
title,
})}`;
}
export function buildPublishShareCardFileName(
payload: Pick<PublishShareModalPayload, 'title' | 'publicWorkCode'>,
) {
const title = payload.title.trim() || '我的作品';
const publicWorkCode = payload.publicWorkCode.trim() || 'share';
const safeTitle = Array.from(title)
.filter((char) => !/[\\/:*?"<>|]/u.test(char))
.join('')
.replace(/\s+/gu, '-')
.slice(0, 28)
.trim();
return `${safeTitle || '我的作品'}-${publicWorkCode}.png`;
}

3
src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
View File

@@ -1093,6 +1093,9 @@ test('creation hub published share icon opens unified share payload without open
title: '沉钟拼图',
publicWorkCode: 'PZ-PROFILE1',
stage: 'puzzle-gallery-detail',
workTypeLabel: '拼图',
coverImageSrc: null,
fallbackCoverImageSrc: '/creation-type-references/puzzle.webp',
});
expect(onOpenPuzzleDetail).not.toHaveBeenCalled();
});

19
src/components/custom-world-home/CustomWorldWorkCard.tsx
View File

@@ -7,8 +7,8 @@ import {
Trash2,
} from 'lucide-react';
import {
default as React,
type CSSProperties,
default as React,
type KeyboardEvent as ReactKeyboardEvent,
type PointerEvent as ReactPointerEvent,
type TouchEvent as ReactTouchEvent,
@@ -24,9 +24,9 @@ import {
formatPlatformWorkDisplayTag,
} from '../rpg-entry/rpgEntryWorldPresentation';
import {
CREATION_WORK_KIND_FALLBACK_COVER,
type CreationWorkShelfBadgeTone,
type CreationWorkShelfItem,
type CreationWorkShelfKind,
type CreationWorkShelfMetric,
type CreationWorkShelfMetricId,
formatCreationMetricCount,
@@ -55,21 +55,6 @@ const SWIPE_ACTION_WIDTH_PX = 76;
const SWIPE_REVEAL_THRESHOLD_PX = 42;
const SWIPE_DIRECTION_LOCK_PX = 8;
const EMPTY_PUBLISHED_METRICS: CreationWorkShelfMetric[] = [];
const CREATION_WORK_KIND_FALLBACK_COVER: Record<CreationWorkShelfKind, string> =
{
rpg: '/creation-type-references/rpg.webp',
'big-fish': '/creation-type-references/big-fish.webp',
match3d: '/creation-type-references/match3d.webp',
'square-hole': '/creation-type-references/square-hole.webp',
'jump-hop': '/creation-type-references/jump-hop.webp',
'wooden-fish': '/wooden-fish/default-hit-object.png',
'puzzle-clear': '/creation-type-references/puzzle.webp',
puzzle: '/creation-type-references/puzzle.webp',
'baby-object-match': '/creation-type-references/creative-agent.webp',
'bark-battle': '/creation-type-references/bark-battle.webp',
'visual-novel': '/creation-type-references/visual-novel.webp',
};
function easeOutCubic(progress: number) {
return 1 - (1 - progress) ** 3;
}

44
src/components/custom-world-home/creationWorkShelf.ts
View File

@@ -44,6 +44,50 @@ export type CreationWorkShelfKind =
| 'baby-object-match'
| 'bark-battle'
| 'visual-novel';
export const CREATION_WORK_KIND_FALLBACK_COVER: Record<
CreationWorkShelfKind,
string
> = {
rpg: '/creation-type-references/rpg.webp',
'big-fish': '/creation-type-references/big-fish.webp',
match3d: '/creation-type-references/match3d.webp',
'square-hole': '/creation-type-references/square-hole.webp',
'jump-hop': '/creation-type-references/jump-hop.webp',
'wooden-fish': '/wooden-fish/default-hit-object.png',
'puzzle-clear': '/creation-type-references/puzzle.webp',
puzzle: '/creation-type-references/puzzle.webp',
'baby-object-match': '/creation-type-references/creative-agent.webp',
'bark-battle': '/creation-type-references/bark-battle.webp',
'visual-novel': '/creation-type-references/visual-novel.webp',
};
export function describeCreationWorkShelfKind(kind: CreationWorkShelfKind) {
switch (kind) {
case 'rpg':
return 'RPG世界';
case 'big-fish':
return '大鱼吃小鱼';
case 'match3d':
return '抓大鹅';
case 'square-hole':
return '方洞挑战';
case 'jump-hop':
return '跳一跳';
case 'wooden-fish':
return '敲木鱼';
case 'puzzle-clear':
return '拼消消';
case 'puzzle':
return '拼图';
case 'baby-object-match':
return '宝贝识物';
case 'bark-battle':
return '汪汪声浪';
case 'visual-novel':
return '视觉小说';
}
}
export type CreationWorkShelfStatus = 'draft' | 'published';
export type CreationWorkShelfBadgeTone = 'warm' | 'success' | 'neutral';

43
src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
View File

@@ -353,6 +353,7 @@ import {
updateVisualNovelWork,
} from '../../services/visual-novel-works';
import { requestGenerationResultSubscribePermission } from '../../services/wechatMiniProgramSubscribe';
import { postWechatMiniProgramShareTarget } from '../../services/wechatMiniProgramShareTarget';
import {
woodenFishClient,
type WoodenFishGalleryCardResponse,
@@ -378,6 +379,7 @@ import {
selectAdjacentPlatformRecommendEntry,
} from '../rpg-entry/rpgEntryPublicGalleryViewModel';
import {
describePublicGalleryCardKind,
isBigFishGalleryEntry,
isEdutainmentGalleryEntry,
isJumpHopGalleryEntry,
@@ -387,6 +389,8 @@ import {
mapPuzzleWorkToPlatformGalleryCard,
type PlatformPublicGalleryCard,
resolvePlatformPublicWorkCode,
resolvePlatformWorldCoverImage,
resolvePlatformWorldFallbackCoverImage,
} from '../rpg-entry/rpgEntryWorldPresentation';
import { useRpgCreationAgentOperationPolling } from '../rpg-entry/useRpgCreationAgentOperationPolling';
import { useRpgCreationEnterWorld } from '../rpg-entry/useRpgCreationEnterWorld';
@@ -844,6 +848,25 @@ function resolveRecommendEntryShareStage(
return 'work-detail';
}
function postRecommendEntryMiniProgramShareTarget(
entry: PlatformPublicGalleryCard | null | undefined,
) {
if (!entry) {
return false;
}
const publicWorkCode = resolvePlatformPublicWorkCode(entry)?.trim();
if (!publicWorkCode) {
return false;
}
return postWechatMiniProgramShareTarget({
targetPath: '/works/detail',
work: publicWorkCode,
title: entry.worldName,
});
}
function pushPuzzleResultHistoryEntry(
session: PuzzleAgentSessionSnapshot | null,
) {
@@ -2858,10 +2881,14 @@ export function PlatformEntryFlowShellImpl({
return;
}
postRecommendEntryMiniProgramShareTarget(entry);
openPublishShareModal({
title: entry.worldName,
publicWorkCode,
stage: resolveRecommendEntryShareStage(entry),
workTypeLabel: describePublicGalleryCardKind(entry),
coverImageSrc: resolvePlatformWorldCoverImage(entry),
fallbackCoverImageSrc: resolvePlatformWorldFallbackCoverImage(entry),
});
},
[openPublishShareModal],
@@ -13455,6 +13482,22 @@ export function PlatformEntryFlowShellImpl({
puzzleRun?.currentLevel?.profileId ?? null,
});
useEffect(() => {
if (
selectionStage !== 'platform' ||
platformBootstrap.platformTab !== 'home' ||
!activeRecommendEntry
) {
return;
}
postRecommendEntryMiniProgramShareTarget(activeRecommendEntry);
}, [
activeRecommendEntry,
platformBootstrap.platformTab,
selectionStage,
]);
useEffect(() => {
const decision = resolvePlatformRecommendRuntimeAutoStartDecision({
isDesktopLayout,

30
src/components/platform-entry/platformGenerationProgressTickState.ts Normal file
View File

@@ -0,0 +1,30 @@
import type {
MiniGameDraftGenerationKind,
MiniGameDraftGenerationState,
} from '../../services/miniGameDraftGenerationProgress';
import type { SelectionStage } from './platformEntryTypes';
type MiniGameGenerationProgressTickStateMap = Partial<
Record<MiniGameDraftGenerationKind, MiniGameDraftGenerationState | null>
>;
export function resolveMiniGameGenerationProgressTickState(
selectionStage: SelectionStage,
states: MiniGameGenerationProgressTickStateMap,
) {
const stageKindMap: Partial<
Record<SelectionStage, MiniGameDraftGenerationKind>
> = {
'puzzle-generating': 'puzzle',
'big-fish-generating': 'big-fish',
'square-hole-generating': 'square-hole',
'match3d-generating': 'match3d',
'baby-object-match-generating': 'baby-object-match',
'jump-hop-generating': 'jump-hop',
'puzzle-clear-generating': 'puzzle-clear',
'wooden-fish-generating': 'wooden-fish',
};
const kind = stageKindMap[selectionStage];
return kind ? (states[kind] ?? null) : null;
}

48
src/components/rpg-entry/rpgEntryWorldPresentation.ts
View File

@@ -7,23 +7,23 @@ import type {
JumpHopGalleryCardResponse,
JumpHopWorkProfileResponse,
} from '../../../packages/shared/src/contracts/jumpHop';
import type {
PuzzleClearGalleryCardResponse,
PuzzleClearWorkProfileResponse,
PuzzleClearWorkSummaryResponse,
} from '../../../packages/shared/src/contracts/puzzleClear';
import type {
Match3DGeneratedBackgroundAsset,
Match3DGeneratedItemAsset,
Match3DWorkSummary,
} from '../../../packages/shared/src/contracts/match3dWorks';
import type { PublicWorkSourceType } from '../../../packages/shared/src/contracts/playTypes';
import type { PuzzleDraftLevel } from '../../../packages/shared/src/contracts/puzzleAgentDraft';
import type {
PuzzleClearGalleryCardResponse,
PuzzleClearWorkProfileResponse,
PuzzleClearWorkSummaryResponse,
} from '../../../packages/shared/src/contracts/puzzleClear';
import type { PuzzleWorkSummary } from '../../../packages/shared/src/contracts/puzzleWorkSummary';
import type {
CustomWorldGalleryCard,
CustomWorldLibraryEntry,
} from '../../../packages/shared/src/contracts/runtime';
import type { PublicWorkSourceType } from '../../../packages/shared/src/contracts/playTypes';
import type {
SquareHoleHoleOption,
SquareHoleShapeOption,
@@ -1162,6 +1162,42 @@ export function buildPlatformWorldDisplayTags(
return formatPlatformWorkDisplayTags(buildPlatformWorldTags(entry), limit);
}
export function describePublicGalleryCardKind(
entry: PlatformPublicGalleryCard,
) {
if (isBigFishGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('大鱼吃小鱼');
}
if (isPuzzleGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('拼图');
}
if (isPuzzleClearGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('拼消消');
}
if (isMatch3DGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('抓大鹅');
}
if (isSquareHoleGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('方洞挑战');
}
if (isJumpHopGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('跳一跳');
}
if (isWoodenFishGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('敲木鱼');
}
if (isVisualNovelGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('视觉小说');
}
if (isBarkBattleGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag('汪汪声浪');
}
if (isEdutainmentGalleryEntry(entry)) {
return formatPlatformWorkDisplayTag(entry.templateName);
}
return formatPlatformWorkDisplayTag(describePlatformThemeLabel(entry.themeMode));
}
export function buildPlatformWorldTags(entry: PlatformWorldCardLike) {
if (isBigFishGalleryEntry(entry)) {
return entry.themeTags.length > 0 ? entry.themeTags.slice(0, 3) : ['大鱼'];