收口推荐卡与作品卡图标动作按钮

推荐运行态点赞分享改造按钮复用 PlatformIconButton 并保留拖拽隔离
创作中心公开作品卡分享快按钮复用 PlatformIconButton
补充回归测试并更新 PlatformUiKit 收口文档与共享决策

docs/technical/【前端架构】PlatformUiKit弹窗组件收口计划-2026-06-08.md

@@ -231,6 +231,8 @@
 19.3.7. 个人中心“玩过作品”面板迁移到 `UnifiedModal` 的 headerless 模式；共享壳层承接 `dialog` 语义、层级与关闭策略，面板继续保留 `PLAYED` kicker、总时长 badge、浮动关闭按钮、`可继续 / 玩过` 双分区、作品卡与空态布局，以及 `closeOnBackdrop={false}`、`closeOnEscape={false}` 的原有交互。存档入口仍留在同一个“玩过”面板内，不再回退成独立的 `SAVE ARCHIVE` / `ARCHIVE` 壳层。
 19.3.8. 个人中心邀请相关弹层中的 live 分支迁移到 `UnifiedModal` 的 headerless 模式；玩家社区与填邀请码继续保留浮动关闭按钮、居中标题、二维码卡片、邀请码表单 / 已填写空态和成功 / 失败提示，但 `dialog` 语义、层级与关闭策略统一由共享壳层承接。`community / redeem` 两条真实入口继续显式保持 `closeOnBackdrop={false}`、`closeOnEscape={false}`；历史 `invite` 分支暂不扩张能力面，只随同一壳层复用现状内容。
 19.3.9. 个人中心昵称旁的铅笔入口迁移到 `PlatformIconButton`；页面继续保留 `.platform-profile-edit-button` 局部 class 控制 1.45rem 紧凑尺寸、边框与浅色底，但按钮语义、默认 `type="button"` 和共享 icon chrome 统一由公共组件承接，不再在 `RpgEntryHomeView` 里手写原生图标按钮。
+19.3.10. RPG 首页推荐运行态卡片底部的点赞 / 分享 / 改造入口迁移到 `PlatformIconButton`；推荐卡继续保留 `.platform-recommend-work-meta__action*` 局部 class 控制透明圆角按钮尺寸、间距和玩法主题色，同时显式保留 `onPointerDown` / `onClick` 里的 `stopPropagation`，避免图标动作把推荐卡纵向拖拽切换误触发。后续任何耦合 swipe / drag 手势的图标动作都沿用“共享按钮承接语义，本地 class 保留视觉与手势隔离”的策略。验证命令：`npm run test -- src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx -t "logged in recommend runtime preloads adjacent work previews and drag switches like video feed"`。
+19.3.11. 创作中心公开作品卡右上角的分享快按钮迁移到 `PlatformIconButton`；作品卡继续保留 `.creation-work-card__quick-action-button` 局部 class 承接卡片角落定位和尺寸，并显式保留 `stopPropagation`、关闭 swipe action、清理 `suppressOpenRef` 与分享回调顺序，避免右上角分享入口误触整卡打开或遗留左滑状态。验证命令：`npm run test -- src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx`。
 19.3. creative-agent 首页的侧边栏菜单、账号入口、开启新对话、我的创作、首页激励 CTA 和 prompt suggestion 按钮迁移到 `PlatformIconButton` / `PlatformActionButton`；首页继续保留 `creative-agent-home__*` 本地 class 承接透明顶栏、抽屉和品牌化胶囊视觉，不把视觉回收和语义收口绑成一次大改。`Beta` 徽标和历史记录纯文本行暂保留本地实现，等出现更多同构轻量列表行后再评估是否抽新的共享 row primitive。
 19.4. 大鱼吃小鱼结果页 hero 的返回入口迁移到 `PlatformIconButton variant="darkMini"`，测试 / 发布动作迁移到 `PlatformActionButton surface="editorDark"`；结果页只保留测试运行、发布提交和文案状态语义，不再手写 hero 顶栏按钮壳。
 20. 平台方形上传入口和紧凑虚线新增入口迁移到 `PlatformUploadTile`，上传后的图片预览迁移到 `PlatformUploadPreviewCard`；反馈页上传凭证入口 / 预览、敲木鱼工作台新增功德词条入口、通用创作图片面板的提示词参考图缩略图、抓大鹅封面编辑参考图缩略图、通用输入 Composer 已选参考图条、creation-agent 已选参考图条和拼图结果页关卡引用图横条已先迁移。方形缩略图使用默认 `layout="square"`，横向“已选择参考图 / 文件名 / 素材名 / 移除”条使用 `layout="inline"`；只读引用图条不传 `onRemove`，避免公共组件额外渲染删除入口。后续继续收口结果页素材上传、工作台参考图上传、紧凑虚线新增入口等上传 / 动作块时，业务页只保留文件选择、预览数组、预览回调、删除回调、校验逻辑或新增回调，上传方块外观、主副文案、缩略图壳、预览按钮、标题行、横向已选条、移除按钮和禁用态统一由 Module 承接；工具栏中的小图标上传仍继续使用 `PlatformIconButton asChild="label"`。

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

@@ -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();
 });
 

src/components/custom-world-home/CustomWorldWorkCard.tsx

@@ -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>

src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx

@@ -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 });

src/components/rpg-entry/RpgEntryHomeView.tsx

@@ -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>