修复作品架已发布卡片分享入口

为作品架分享按钮补充可见底色与回归测试
将已发布作品卡分享动作接入统一发布分享弹窗
同步玩法链路文档中的作品架分享口径
This commit is contained in:
2026-06-08 01:54:11 +08:00
parent ff2ed5a59d
commit 49e4d085b3
7 changed files with 97 additions and 70 deletions

View File

@@ -52,7 +52,7 @@
1. 草稿页作品卡对齐发现页列表卡风格:左侧信息,右侧封面图,移动端单列,桌面两到三列。 1. 草稿页作品卡对齐发现页列表卡风格:左侧信息,右侧封面图,移动端单列,桌面两到三列。
2. 草稿页顶部 `全部 / 草稿 / 已发布` 筛选与发现页 `推荐 / 今日 / 分类 / 排行` 频道标签复用同一选中 / 未选中视觉,即 `platform-mobile-home-channel``platform-mobile-home-channel--active`,不再使用旧 `platform-tab` 胶囊样式。 2. 草稿页顶部 `全部 / 草稿 / 已发布` 筛选与发现页 `推荐 / 今日 / 分类 / 排行` 频道标签复用同一选中 / 未选中视觉,即 `platform-mobile-home-channel``platform-mobile-home-channel--active`,不再使用旧 `platform-tab` 胶囊样式。
3. 草稿页与底部导航的未读提示点统一使用平台暖棕色点和暖棕光晕,不再使用红点或红色 glow草稿 Tab 作品架卡片无论草稿 / 已发布都不外露作者信息;已发布作品卡右上角直接显示无边框分享 icon。删除等破坏性动作在作品卡上也要直接开放统一 `actions.delete` 入口,左滑、长按和键盘左箭头仅作为打开同一操作层的辅助交互;所有玩法草稿和已发布列表项都必须通过该统一接口接入删除确认、删除中状态和列表刷新,不允许只给拼图保留专属滑动删除分支。 3. 草稿页与底部导航的未读提示点统一使用平台暖棕色点和暖棕光晕,不再使用红点或红色 glow草稿 Tab 作品架卡片无论草稿 / 已发布都不外露作者信息;已发布作品卡右上角直接显示带底色的分享 icon,并统一唤起发布分享弹窗 `PublishShareModal`,不在卡片内部单独复制分享文案。删除等破坏性动作在作品卡上也要直接开放统一 `actions.delete` 入口,左滑、长按和键盘左箭头仅作为打开同一操作层的辅助交互;所有玩法草稿和已发布列表项都必须通过该统一接口接入删除确认、删除中状态和列表刷新,不允许只给拼图保留专属滑动删除分支。
4. 生成中作品在整卡上加等待遮罩,但不移除作品基础信息。 4. 生成中作品在整卡上加等待遮罩,但不移除作品基础信息。
5. 生成中状态不能只存在前端内存 notice。后端作品摘要必须下发可恢复的 `generationStatus`;前端刷新或退出产品后,作品架优先用摘要状态恢复等待遮罩,本轮内存 notice 只作为即时反馈。 5. 生成中状态不能只存在前端内存 notice。后端作品摘要必须下发可恢复的 `generationStatus`;前端刷新或退出产品后,作品架优先用摘要状态恢复等待遮罩,本轮内存 notice 只作为即时反馈。
6. 点击 `generationStatus=generating` 的草稿卡必须恢复对应玩法的生成进度页,不能进入空白结果页或普通工作区;恢复生成页的 `startedAtMs` 优先使用后端 session 的 `updatedAt`,没有 session 时再使用作品摘要 `updatedAt`,不得因重新进入页面从 0 秒重新计时。 6. 点击 `generationStatus=generating` 的草稿卡必须恢复对应玩法的生成进度页,不能进入空白结果页或普通工作区;恢复生成页的 `startedAtMs` 优先使用后端 session 的 `updatedAt`,没有 session 时再使用作品摘要 `updatedAt`,不得因重新进入页面从 0 秒重新计时。

View File

@@ -1043,14 +1043,10 @@ test('creation hub opens persisted rpg drafts by card click', async () => {
expect(openedItems).toEqual([persistedDraft]); expect(openedItems).toEqual([persistedDraft]);
}); });
test('creation hub published share icon copies share text without opening the card', async () => { test('creation hub published share icon opens unified share payload without opening the card', async () => {
const user = userEvent.setup(); const user = userEvent.setup();
const writeText = vi.fn(async () => undefined);
const onOpenPuzzleDetail = vi.fn(); const onOpenPuzzleDetail = vi.fn();
Object.defineProperty(navigator, 'clipboard', { const onShareWork = vi.fn();
configurable: true,
value: { writeText },
});
render( render(
<CustomWorldCreationHub <CustomWorldCreationHub
@@ -1081,6 +1077,7 @@ test('creation hub published share icon copies share text without opening the ca
onOpenDraft={() => {}} onOpenDraft={() => {}}
onEnterPublished={() => {}} onEnterPublished={() => {}}
onOpenPuzzleDetail={onOpenPuzzleDetail} onOpenPuzzleDetail={onOpenPuzzleDetail}
onShareWork={onShareWork}
entryConfig={testEntryConfig} entryConfig={testEntryConfig}
creationTypes={testCreationTypes} creationTypes={testCreationTypes}
/>, />,
@@ -1092,19 +1089,12 @@ test('creation hub published share icon copies share text without opening the ca
await user.click(shareButton); await user.click(shareButton);
expect(writeText).toHaveBeenCalledWith( expect(onShareWork).toHaveBeenCalledWith({
expect.stringContaining('邀请你来玩《沉钟拼图》'), title: '沉钟拼图',
); publicWorkCode: 'PZ-PROFILE1',
expect(writeText).toHaveBeenCalledWith( stage: 'puzzle-gallery-detail',
expect.stringContaining('作品号PZ-PROFILE1'), });
);
expect(writeText).toHaveBeenCalledWith(
expect.stringContaining('/gallery/puzzle/detail?work=PZ-PROFILE1'),
);
expect(onOpenPuzzleDetail).not.toHaveBeenCalled(); expect(onOpenPuzzleDetail).not.toHaveBeenCalled();
expect(
await screen.findByRole('button', { name: '分享内容已复制' }),
).toBeTruthy();
}); });
test('creation hub published share icon is shown directly on the card header', () => { test('creation hub published share icon is shown directly on the card header', () => {

View File

@@ -12,8 +12,10 @@ import type { WoodenFishWorkSummaryResponse } from '../../../packages/shared/src
import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime'; import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime';
import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks'; import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
import type { VisualNovelWorkSummary } from '../../../packages/shared/src/contracts/visualNovel'; import type { VisualNovelWorkSummary } from '../../../packages/shared/src/contracts/visualNovel';
import { resolveSelectionStageFromPath } from '../../routing/appPageRoutes';
import type { CreationEntryConfig } from '../../services/creationEntryConfigService'; import type { CreationEntryConfig } from '../../services/creationEntryConfigService';
import type { CustomWorldProfile } from '../../types'; import type { CustomWorldProfile } from '../../types';
import type { PublishShareModalPayload } from '../common/publishShareModalModel';
import type { import type {
PlatformCreationTypeCard, PlatformCreationTypeCard,
PlatformCreationTypeId, PlatformCreationTypeId,
@@ -99,6 +101,7 @@ type CustomWorldCreationHubProps = {
item: CreationWorkShelfItem, item: CreationWorkShelfItem,
) => CreationWorkShelfRuntimeState | null; ) => CreationWorkShelfRuntimeState | null;
onOpenShelfItem?: (item: CreationWorkShelfItem) => void; onOpenShelfItem?: (item: CreationWorkShelfItem) => void;
onShareWork?: ((payload: PublishShareModalPayload) => void) | null;
// 中文注释:底部加号入口可传入后端作品架摘要,用于推导最近使用过的模板。 // 中文注释:底部加号入口可传入后端作品架摘要,用于推导最近使用过的模板。
recentWorkItems?: CreationWorkShelfItem[]; recentWorkItems?: CreationWorkShelfItem[];
mode?: 'full' | 'start-only' | 'works-only'; mode?: 'full' | 'start-only' | 'works-only';
@@ -167,6 +170,41 @@ function writeWorkMetricSnapshot(items: CreationWorkShelfItem[]) {
} }
} }
function resolveShelfShareStage(
sharePath: string,
): PublishShareModalPayload['stage'] | null {
let pathname = '';
try {
pathname = new URL(sharePath, 'https://genarrative.local').pathname;
} catch {
pathname = sharePath.split(/[?#]/u)[0] ?? '';
}
const stage = resolveSelectionStageFromPath(pathname);
return stage === 'platform' ? null : stage;
}
function buildCreationWorkShelfSharePayload(
item: CreationWorkShelfItem,
): PublishShareModalPayload | null {
const publicWorkCode = item.publicWorkCode?.trim();
const sharePath = item.sharePath?.trim();
if (!publicWorkCode || !sharePath) {
return null;
}
const stage = resolveShelfShareStage(sharePath);
if (!stage) {
return null;
}
return {
title: item.title,
publicWorkCode,
stage,
};
}
/** 渲染底部加号创作入口页与草稿作品架,最近创作复用最近使用过的模板入口。 */ /** 渲染底部加号创作入口页与草稿作品架,最近创作复用最近使用过的模板入口。 */
export function CustomWorldCreationHub({ export function CustomWorldCreationHub({
items, items,
@@ -216,6 +254,7 @@ export function CustomWorldCreationHub({
onDeleteVisualNovel = null, onDeleteVisualNovel = null,
getWorkState, getWorkState,
onOpenShelfItem, onOpenShelfItem,
onShareWork = null,
recentWorkItems: recentWorkSourceItems, recentWorkItems: recentWorkSourceItems,
mode = 'full', mode = 'full',
}: CustomWorldCreationHubProps) { }: CustomWorldCreationHubProps) {
@@ -406,6 +445,17 @@ export function CustomWorldCreationHub({
return item.actions.delete ?? null; return item.actions.delete ?? null;
} }
function buildShareAction(item: CreationWorkShelfItem) {
const payload = buildCreationWorkShelfSharePayload(item);
if (!payload) {
return null;
}
return () => {
onShareWork?.(payload);
};
}
function buildPointIncentiveAction(item: CreationWorkShelfItem) { function buildPointIncentiveAction(item: CreationWorkShelfItem) {
return item.actions.claimPointIncentive ?? null; return item.actions.claimPointIncentive ?? null;
} }
@@ -481,6 +531,7 @@ export function CustomWorldCreationHub({
}} }}
onDelete={buildDeleteAction(item)} onDelete={buildDeleteAction(item)}
deleteBusy={deletingWorkId === item.id} deleteBusy={deletingWorkId === item.id}
onShare={buildShareAction(item)}
onClaimPointIncentive={buildPointIncentiveAction(item)} onClaimPointIncentive={buildPointIncentiveAction(item)}
pointIncentiveBusy={ pointIncentiveBusy={
item.source.kind === 'puzzle' && item.source.kind === 'puzzle' &&

View File

@@ -18,7 +18,6 @@ import {
useState, useState,
} from 'react'; } from 'react';
import { copyTextToClipboard } from '../../services/clipboard';
import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork'; import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork';
import { import {
formatPlatformWorkDisplayName, formatPlatformWorkDisplayName,
@@ -40,6 +39,7 @@ type CustomWorldWorkCardProps = {
onOpen: () => void; onOpen: () => void;
onDelete?: (() => void) | null; onDelete?: (() => void) | null;
deleteBusy?: boolean; deleteBusy?: boolean;
onShare?: (() => void) | null;
onClaimPointIncentive?: (() => void) | null; onClaimPointIncentive?: (() => void) | null;
pointIncentiveBusy?: boolean; pointIncentiveBusy?: boolean;
}; };
@@ -231,13 +231,10 @@ export function CustomWorldWorkCard({
onOpen, onOpen,
onDelete = null, onDelete = null,
deleteBusy = false, deleteBusy = false,
onShare = null,
onClaimPointIncentive = null, onClaimPointIncentive = null,
pointIncentiveBusy = false, pointIncentiveBusy = false,
}: CustomWorldWorkCardProps) { }: CustomWorldWorkCardProps) {
const [shareState, setShareState] = useState<'idle' | 'copied' | 'failed'>(
'idle',
);
const shareResetTimerRef = useRef<number | null>(null);
const suppressOpenResetTimerRef = useRef<number | null>(null); const suppressOpenResetTimerRef = useRef<number | null>(null);
const suppressOpenRef = useRef(false); const suppressOpenRef = useRef(false);
const swipeGestureRef = useRef<{ const swipeGestureRef = useRef<{
@@ -253,7 +250,7 @@ export function CustomWorldWorkCard({
const [swipeOffset, setSwipeOffset] = useState(0); const [swipeOffset, setSwipeOffset] = useState(0);
const isPublished = item.status === 'published'; const isPublished = item.status === 'published';
const canUseShareAction = const canUseShareAction =
isPublished && item.canShare && Boolean(item.sharePath); isPublished && item.canShare && Boolean(item.sharePath) && Boolean(onShare);
const swipeActionCount = onDelete ? 1 : 0; const swipeActionCount = onDelete ? 1 : 0;
const swipeRevealWidth = swipeActionCount * SWIPE_ACTION_WIDTH_PX; const swipeRevealWidth = swipeActionCount * SWIPE_ACTION_WIDTH_PX;
const canClaimPointIncentive = const canClaimPointIncentive =
@@ -289,34 +286,8 @@ export function CustomWorldWorkCard({
}`, }`,
} as CSSProperties; } as CSSProperties;
const copyShareText = () => {
const publicWorkCode = item.publicWorkCode?.trim();
const sharePath = item.sharePath?.trim();
if (!publicWorkCode || !sharePath) {
return;
}
const shareUrl =
typeof window === 'undefined'
? sharePath
: new URL(sharePath, window.location.origin).href;
const shareText = `邀请你来玩《${item.title}\n作品号${publicWorkCode}\n${shareUrl}`;
void copyTextToClipboard(shareText).then((copied) => {
setShareState(copied ? 'copied' : 'failed');
if (shareResetTimerRef.current !== null) {
window.clearTimeout(shareResetTimerRef.current);
}
shareResetTimerRef.current = window.setTimeout(() => {
shareResetTimerRef.current = null;
setShareState('idle');
}, 1400);
});
};
useEffect(() => { useEffect(() => {
return () => { return () => {
if (shareResetTimerRef.current !== null) {
window.clearTimeout(shareResetTimerRef.current);
}
if (suppressOpenResetTimerRef.current !== null) { if (suppressOpenResetTimerRef.current !== null) {
window.clearTimeout(suppressOpenResetTimerRef.current); window.clearTimeout(suppressOpenResetTimerRef.current);
} }
@@ -677,7 +648,7 @@ export function CustomWorldWorkCard({
event.stopPropagation(); event.stopPropagation();
suppressOpenRef.current = false; suppressOpenRef.current = false;
closeSwipeActions(); closeSwipeActions();
copyShareText(); onShare?.();
}} }}
onKeyDown={(event) => { onKeyDown={(event) => {
event.stopPropagation(); event.stopPropagation();
@@ -688,20 +659,8 @@ export function CustomWorldWorkCard({
onTouchStart={(event) => { onTouchStart={(event) => {
event.stopPropagation(); event.stopPropagation();
}} }}
title={ title="分享作品"
shareState === 'copied' aria-label="分享"
? '已复制'
: shareState === 'failed'
? '复制失败'
: '分享作品'
}
aria-label={
shareState === 'copied'
? '分享内容已复制'
: shareState === 'failed'
? '分享内容复制失败'
: '分享'
}
className="creation-work-card__quick-action-button" className="creation-work-card__quick-action-button"
> >
<Share2 aria-hidden="true" className="h-4 w-4" /> <Share2 aria-hidden="true" className="h-4 w-4" />

View File

@@ -17681,6 +17681,9 @@ export function PlatformEntryFlowShellImpl({
onOpenShelfItem={(item) => { onOpenShelfItem={(item) => {
markDraftNoticeSeen(getGenerationNoticeShelfKeys(item)); markDraftNoticeSeen(getGenerationNoticeShelfKeys(item));
}} }}
onShareWork={(payload) => {
openPublishShareModal(payload);
}}
onOpenDraft={(item) => { onOpenDraft={(item) => {
runProtectedAction(() => { runProtectedAction(() => {
markCreationFlowReturnToDraftShelf(); markCreationFlowReturnToDraftShelf();

View File

@@ -2528,19 +2528,32 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
flex: 0 0 auto; flex: 0 0 auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 0; border: 1px solid color-mix(in srgb, var(--platform-cool-border) 58%, transparent);
border-radius: 9999px; border-radius: 9999px;
background: transparent; background: color-mix(
color: var(--platform-text-soft); in srgb,
var(--platform-neutral-bg) 84%,
var(--platform-cool-bg) 16%
);
box-shadow: 0 8px 18px rgba(91, 64, 42, 0.13);
color: var(--platform-cool-text);
transition: transition:
background-color 160ms ease, background-color 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
color 160ms ease, color 160ms ease,
transform 160ms ease; transform 160ms ease;
} }
.creation-work-card__quick-action-button:hover { .creation-work-card__quick-action-button:hover {
transform: translateY(-1px); transform: translateY(-1px);
background: color-mix(in srgb, var(--platform-cool-bg) 24%, transparent); border-color: color-mix(in srgb, var(--platform-cool-border) 78%, transparent);
background: color-mix(
in srgb,
var(--platform-neutral-bg) 72%,
var(--platform-cool-bg) 28%
);
box-shadow: 0 10px 22px rgba(91, 64, 42, 0.18);
color: var(--platform-cool-text); color: var(--platform-cool-text);
} }

View File

@@ -103,6 +103,17 @@ describe('index stylesheet unread dots', () => {
expect(block).not.toContain('rgba(239, 68, 68'); expect(block).not.toContain('rgba(239, 68, 68');
} }
}); });
it('keeps the creation shelf share button on a visible surface', () => {
const css = readIndexCss();
const block = getCssBlock(css, '.creation-work-card__quick-action-button');
expect(block).toContain('border: 1px solid');
expect(block).toContain('background: color-mix(');
expect(block).toContain('var(--platform-neutral-bg)');
expect(block).toContain('var(--platform-cool-bg)');
expect(block).not.toContain('background: transparent;');
});
}); });
describe('index stylesheet draft mobile cards', () => { describe('index stylesheet draft mobile cards', () => {