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

为作品架分享按钮补充可见底色与回归测试将已发布作品卡分享动作接入统一发布分享弹窗同步玩法链路文档中的作品架分享口径
2026-06-08 01:54:11 +08:00
parent ff2ed5a59d
commit 49e4d085b3
7 changed files with 97 additions and 70 deletions
--- a/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
+++ b/docs/【玩法创作】平台入口与玩法链路-2026-05-15.md
@@ -52,7 +52,7 @@

 1. 草稿页作品卡对齐发现页列表卡风格：左侧信息，右侧封面图，移动端单列，桌面两到三列。
 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. 生成中作品在整卡上加等待遮罩，但不移除作品基础信息。
 5. 生成中状态不能只存在前端内存 notice。后端作品摘要必须下发可恢复的 `generationStatus`；前端刷新或退出产品后，作品架优先用摘要状态恢复等待遮罩，本轮内存 notice 只作为即时反馈。
 6. 点击 `generationStatus=generating` 的草稿卡必须恢复对应玩法的生成进度页，不能进入空白结果页或普通工作区；恢复生成页的 `startedAtMs` 优先使用后端 session 的 `updatedAt`，没有 session 时再使用作品摘要 `updatedAt`，不得因重新进入页面从 0 秒重新计时。
--- a/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
@@ -1043,14 +1043,10 @@ test('creation hub opens persisted rpg drafts by card click', async () => {
  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 writeText = vi.fn(async () => undefined);
  const onOpenPuzzleDetail = vi.fn();
-  Object.defineProperty(navigator, 'clipboard', {
-    configurable: true,
-    value: { writeText },
-  });
+  const onShareWork = vi.fn();

  render(
    <CustomWorldCreationHub
@@ -1081,6 +1077,7 @@ test('creation hub published share icon copies share text without opening the ca
      onOpenDraft={() => {}}
      onEnterPublished={() => {}}
      onOpenPuzzleDetail={onOpenPuzzleDetail}
+      onShareWork={onShareWork}
      entryConfig={testEntryConfig}
      creationTypes={testCreationTypes}
    />,
@@ -1092,19 +1089,12 @@ test('creation hub published share icon copies share text without opening the ca

  await user.click(shareButton);

-  expect(writeText).toHaveBeenCalledWith(
-    expect.stringContaining('邀请你来玩《沉钟拼图》'),
-  );
-  expect(writeText).toHaveBeenCalledWith(
-    expect.stringContaining('作品号：PZ-PROFILE1'),
-  );
-  expect(writeText).toHaveBeenCalledWith(
-    expect.stringContaining('/gallery/puzzle/detail?work=PZ-PROFILE1'),
-  );
+  expect(onShareWork).toHaveBeenCalledWith({
+    title: '沉钟拼图',
+    publicWorkCode: 'PZ-PROFILE1',
+    stage: 'puzzle-gallery-detail',
+  });
  expect(onOpenPuzzleDetail).not.toHaveBeenCalled();
-  expect(
-    await screen.findByRole('button', { name: '分享内容已复制' }),
-  ).toBeTruthy();
 });

 test('creation hub published share icon is shown directly on the card header', () => {
--- a/src/components/custom-world-home/CustomWorldCreationHub.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.tsx
@@ -12,8 +12,10 @@ import type { WoodenFishWorkSummaryResponse } from '../../../packages/shared/src
 import type { CustomWorldLibraryEntry } from '../../../packages/shared/src/contracts/runtime';
 import type { SquareHoleWorkSummary } from '../../../packages/shared/src/contracts/squareHoleWorks';
 import type { VisualNovelWorkSummary } from '../../../packages/shared/src/contracts/visualNovel';
+import { resolveSelectionStageFromPath } from '../../routing/appPageRoutes';
 import type { CreationEntryConfig } from '../../services/creationEntryConfigService';
 import type { CustomWorldProfile } from '../../types';
+import type { PublishShareModalPayload } from '../common/publishShareModalModel';
 import type {
  PlatformCreationTypeCard,
  PlatformCreationTypeId,
@@ -99,6 +101,7 @@ type CustomWorldCreationHubProps = {
    item: CreationWorkShelfItem,
  ) => CreationWorkShelfRuntimeState | null;
  onOpenShelfItem?: (item: CreationWorkShelfItem) => void;
+  onShareWork?: ((payload: PublishShareModalPayload) => void) | null;
  // 中文注释：底部加号入口可传入后端作品架摘要，用于推导最近使用过的模板。
  recentWorkItems?: CreationWorkShelfItem[];
  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({
  items,
@@ -216,6 +254,7 @@ export function CustomWorldCreationHub({
  onDeleteVisualNovel = null,
  getWorkState,
  onOpenShelfItem,
+  onShareWork = null,
  recentWorkItems: recentWorkSourceItems,
  mode = 'full',
 }: CustomWorldCreationHubProps) {
@@ -406,6 +445,17 @@ export function CustomWorldCreationHub({
    return item.actions.delete ?? null;
  }

+  function buildShareAction(item: CreationWorkShelfItem) {
+    const payload = buildCreationWorkShelfSharePayload(item);
+    if (!payload) {
+      return null;
+    }
+
+    return () => {
+      onShareWork?.(payload);
+    };
+  }
+
  function buildPointIncentiveAction(item: CreationWorkShelfItem) {
    return item.actions.claimPointIncentive ?? null;
  }
@@ -481,6 +531,7 @@ export function CustomWorldCreationHub({
                  }}
                  onDelete={buildDeleteAction(item)}
                  deleteBusy={deletingWorkId === item.id}
+                  onShare={buildShareAction(item)}
                  onClaimPointIncentive={buildPointIncentiveAction(item)}
                  pointIncentiveBusy={
                    item.source.kind === 'puzzle' &&
--- a/src/components/custom-world-home/CustomWorldWorkCard.tsx
+++ b/src/components/custom-world-home/CustomWorldWorkCard.tsx
@@ -18,7 +18,6 @@ import {
  useState,
 } from 'react';

-import { copyTextToClipboard } from '../../services/clipboard';
 import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork';
 import {
  formatPlatformWorkDisplayName,
@@ -40,6 +39,7 @@ type CustomWorldWorkCardProps = {
  onOpen: () => void;
  onDelete?: (() => void) | null;
  deleteBusy?: boolean;
+  onShare?: (() => void) | null;
  onClaimPointIncentive?: (() => void) | null;
  pointIncentiveBusy?: boolean;
 };
@@ -231,13 +231,10 @@ export function CustomWorldWorkCard({
  onOpen,
  onDelete = null,
  deleteBusy = false,
+  onShare = null,
  onClaimPointIncentive = null,
  pointIncentiveBusy = false,
 }: CustomWorldWorkCardProps) {
-  const [shareState, setShareState] = useState<'idle' | 'copied' | 'failed'>(
-    'idle',
-  );
-  const shareResetTimerRef = useRef<number | null>(null);
  const suppressOpenResetTimerRef = useRef<number | null>(null);
  const suppressOpenRef = useRef(false);
  const swipeGestureRef = useRef<{
@@ -253,7 +250,7 @@ export function CustomWorldWorkCard({
  const [swipeOffset, setSwipeOffset] = useState(0);
  const isPublished = item.status === 'published';
  const canUseShareAction =
-    isPublished && item.canShare && Boolean(item.sharePath);
+    isPublished && item.canShare && Boolean(item.sharePath) && Boolean(onShare);
  const swipeActionCount = onDelete ? 1 : 0;
  const swipeRevealWidth = swipeActionCount * SWIPE_ACTION_WIDTH_PX;
  const canClaimPointIncentive =
@@ -289,34 +286,8 @@ export function CustomWorldWorkCard({
    }`,
  } 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(() => {
    return () => {
-      if (shareResetTimerRef.current !== null) {
-        window.clearTimeout(shareResetTimerRef.current);
-      }
      if (suppressOpenResetTimerRef.current !== null) {
        window.clearTimeout(suppressOpenResetTimerRef.current);
      }
@@ -677,7 +648,7 @@ export function CustomWorldWorkCard({
                    event.stopPropagation();
                    suppressOpenRef.current = false;
                    closeSwipeActions();
-                    copyShareText();
+                    onShare?.();
                  }}
                  onKeyDown={(event) => {
                    event.stopPropagation();
@@ -688,20 +659,8 @@ export function CustomWorldWorkCard({
                  onTouchStart={(event) => {
                    event.stopPropagation();
                  }}
-                  title={
-                    shareState === 'copied'
-                      ? '已复制'
-                      : shareState === 'failed'
-                        ? '复制失败'
-                        : '分享作品'
-                  }
-                  aria-label={
-                    shareState === 'copied'
-                      ? '分享内容已复制'
-                      : shareState === 'failed'
-                        ? '分享内容复制失败'
-                        : '分享'
-                  }
+                  title="分享作品"
+                  aria-label="分享"
                  className="creation-work-card__quick-action-button"
                >
                  <Share2 aria-hidden="true" className="h-4 w-4" />
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
@@ -17681,6 +17681,9 @@ export function PlatformEntryFlowShellImpl({
          onOpenShelfItem={(item) => {
            markDraftNoticeSeen(getGenerationNoticeShelfKeys(item));
          }}
+          onShareWork={(payload) => {
+            openPublishShareModal(payload);
+          }}
          onOpenDraft={(item) => {
            runProtectedAction(() => {
              markCreationFlowReturnToDraftShelf();
--- a/src/index.css
+++ b/src/index.css
@@ -2528,19 +2528,32 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
-  border: 0;
+  border: 1px solid color-mix(in srgb, var(--platform-cool-border) 58%, transparent);
  border-radius: 9999px;
-  background: transparent;
-  color: var(--platform-text-soft);
+  background: color-mix(
+    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:
    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
 }

 .creation-work-card__quick-action-button:hover {
  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);
 }

--- a/src/index.test.ts
+++ b/src/index.test.ts
@@ -103,6 +103,17 @@ describe('index stylesheet unread dots', () => {
      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', () => {