Merge remote-tracking branch 'origin/master' into codex/public-work-readmodel-smooth-transition

src/components/rpg-entry/RpgEntryHomeView.tsx

@@ -1,6 +1,5 @@
 import {
   AlertCircle,
-  Archive,
   ArrowRight,
   BookOpen,
   Camera,
@@ -79,6 +78,7 @@ import type {
   WechatMiniProgramPayParams,
   WechatNativePayment,
 } from '../../../packages/shared/src/contracts/runtime';
+import { isMatch3DDemoProfileId } from '../../data/match3dDemoGalleryCard';
 import type { HydratedSavedGameSnapshot } from '../../persistence/runtimeSnapshotTypes';
 import { buildPublicWorkDetailUrl } from '../../routing/appPageRoutes';
 import type { AuthUser } from '../../services/authService';
@@ -123,6 +123,7 @@ import {
   SquareImageCropModal,
   type SquareImageCropRect,
 } from '../common/SquareImageCropModal';
+import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork';
 import {
   canExposePublicWork,
   EDUTAINMENT_WORK_TAG,
@@ -132,7 +133,6 @@ import {
   isEdutainmentEntryEnabled,
 } from '../platform-entry/platformEdutainmentVisibility';
 import { getInitialPlatformDesktopLayout } from '../platform-entry/platformEntryResponsive';
-import { CustomWorldCoverArtwork } from '../CustomWorldCoverArtwork';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import { RpgEntryBrandLogo } from './RpgEntryBrandLogo';
 import {
@@ -227,6 +227,8 @@ const HERO_SURFACE_CLASS =
   'platform-surface platform-surface--hero platform-interactive-card min-w-0';
 const MOBILE_PAGE_STAGE_CLASS =
   'platform-page-stage platform-remap-surface min-w-0 space-y-4 overflow-hidden pb-2';
+const MOBILE_PROFILE_PAGE_STAGE_CLASS =
+  'platform-remap-surface min-w-0 space-y-4 pb-2';
 const MOBILE_RECOMMEND_PAGE_STAGE_CLASS =
   'platform-page-stage min-w-0 space-y-4 overflow-hidden pb-2';
 const MOBILE_DISCOVER_PAGE_STAGE_CLASS =
@@ -254,9 +256,36 @@ const RECOMMEND_ENTRY_DRAG_LIMIT_PX = 160;
 const WECHAT_JS_SDK_URL = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
 const WECHAT_PAY_CONFIRM_RETRY_DELAYS_MS = [800, 1600, 3000] as const;
 const WECHAT_NATIVE_PAY_QR_IMAGE_SIZE = 180;
+const PROFILE_TASK_STATUS_PRIORITY_RANK: Record<ProfileTaskItem['status'], number> = {
+  claimable: 2,
+  incomplete: 1,
+  disabled: 0,
+  claimed: -1,
+};
+const PROFILE_QR_SCAN_INTERVAL_MS = 360;
+
+function selectProfileTaskCenterTasks(tasks: ProfileTaskItem[]) {
+  return tasks
+    .map((task, index) => ({ task, index }))
+    .filter(({ task }) => task.status === 'claimable' || task.status === 'incomplete')
+    .sort(
+      (left, right) =>
+        PROFILE_TASK_STATUS_PRIORITY_RANK[right.task.status] -
+          PROFILE_TASK_STATUS_PRIORITY_RANK[left.task.status] ||
+        left.index - right.index,
+    )
+    .slice(0, 1)
+    .map(({ task }) => task);
+}
 
 type ProfileReferralPanel = 'invite' | 'redeem' | 'community';
 type ProfilePopupPanel = ProfileReferralPanel | 'saveArchives';
+type BarcodeDetectorLike = {
+  detect: (source: CanvasImageSource) => Promise<Array<{ rawValue?: string }>>;
+};
+type BarcodeDetectorConstructorLike = new (options?: {
+  formats?: string[];
+}) => BarcodeDetectorLike;
 type RechargeTab = 'points' | 'membership';
 type WechatMiniProgramPaymentStatus = 'success' | 'fail' | 'cancel';
 type WechatPayResult = {
@@ -270,6 +299,13 @@ type RechargePaymentResult = {
   title: string;
   message: string;
 };
+
+function getBarcodeDetectorConstructor(): BarcodeDetectorConstructorLike | null {
+  const maybeDetector = (globalThis as unknown as {
+    BarcodeDetector?: BarcodeDetectorConstructorLike;
+  }).BarcodeDetector;
+  return typeof maybeDetector === 'function' ? maybeDetector : null;
+}
 type NativeWechatPaymentState = WechatNativePayment & {
   orderId: string;
   isConfirming: boolean;
@@ -717,69 +753,6 @@ function WorldCard({
   );
 }
 
-function RecommendCoverOnlyCard({
-  entry,
-  authorAvatarUrl,
-  onClick,
-}: {
-  entry: PlatformPublicGalleryCard;
-  authorAvatarUrl?: string | null;
-  onClick: () => void;
-}) {
-  const coverImage = resolvePlatformWorldCoverImage(entry);
-  const fallbackCoverImage = resolvePlatformWorldFallbackCoverImage(entry);
-  const displayName = formatPlatformWorkDisplayName(entry.worldName);
-  const typeLabel = describePublicGalleryCardKind(entry);
-  const authorName = entry.authorDisplayName.trim() || '玩家';
-  const authorAvatarLabel = getPublicAuthorAvatarLabel(authorName);
-  const normalizedAuthorAvatarUrl = authorAvatarUrl?.trim() ?? '';
-
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-label={`登录后游玩 ${entry.worldName}`}
-      className="platform-recommend-cover-only"
-    >
-      {coverImage ? (
-        <PlatformWorkCoverArtwork
-          entry={entry}
-          imageSrc={coverImage}
-          fallbackSrc={fallbackCoverImage}
-          alt={entry.worldName}
-          className="absolute inset-0 h-full w-full object-cover"
-        />
-      ) : (
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_18%_16%,rgba(255,255,255,0.28),transparent_30%),linear-gradient(135deg,rgba(255,118,117,0.42),rgba(89,164,255,0.34))]" />
-      )}
-      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.04),rgba(0,0,0,0.42))]" />
-      <div className="platform-recommend-cover-only__body">
-        <span className="platform-public-work-card__kind">{typeLabel}</span>
-        <span className="platform-recommend-cover-only__title">
-          {displayName}
-        </span>
-        <span className="platform-recommend-cover-only__author">
-          <span
-            aria-hidden="true"
-            className="platform-public-work-card__author-avatar"
-          >
-            {normalizedAuthorAvatarUrl ? (
-              <img
-                src={normalizedAuthorAvatarUrl}
-                alt=""
-                className="platform-public-work-card__author-avatar-image"
-              />
-            ) : (
-              authorAvatarLabel
-            )}
-          </span>
-          <span className="truncate">{authorName}</span>
-        </span>
-      </div>
-    </button>
-  );
-}
-
 function CreationLibraryCard({
   entry,
   onClick,
@@ -3244,7 +3217,7 @@ function ProfileTaskCenterModal({
   onRetry: () => void;
   onClaim: (taskId: string) => void;
 }) {
-  const tasks = center?.tasks ?? [];
+  const tasks = selectProfileTaskCenterTasks(center?.tasks ?? []);
   const walletBalance = center?.walletBalance ?? fallbackBalance;
 
   return (
@@ -3420,6 +3393,160 @@ function RewardCodeRedeemModal({
   );
 }
 
+function ProfileQrScannerModal({
+  error,
+  result,
+  onClose,
+  onError,
+  onResult,
+}: {
+  error: string | null;
+  result: string | null;
+  onClose: () => void;
+  onError: (message: string) => void;
+  onResult: (value: string) => void;
+}) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    if (!videoElement) {
+      return;
+    }
+
+    let isMounted = true;
+    let scanTimer: number | null = null;
+    const detectorCtor = getBarcodeDetectorConstructor();
+    const detector = detectorCtor
+      ? new detectorCtor({ formats: ['qr_code'] })
+      : null;
+
+    const clearScanTimer = () => {
+      if (scanTimer !== null) {
+        window.clearTimeout(scanTimer);
+        scanTimer = null;
+      }
+    };
+    const stopCamera = () => {
+      const stream = streamRef.current;
+      streamRef.current = null;
+      if (stream) {
+        stream.getTracks().forEach((track) => track.stop());
+      }
+      videoElement.srcObject = null;
+    };
+
+    const scanVideo = async () => {
+      if (!isMounted || !detector || videoElement.readyState < 2) {
+        if (isMounted && detector) {
+          scanTimer = window.setTimeout(scanVideo, PROFILE_QR_SCAN_INTERVAL_MS);
+        }
+        return;
+      }
+
+      try {
+        const codes = await detector.detect(videoElement);
+        const rawValue = codes[0]?.rawValue?.trim();
+        if (rawValue) {
+          clearScanTimer();
+          stopCamera();
+          onResult(rawValue);
+          return;
+        }
+      } catch {
+        onError('扫码识别失败，请调整二维码位置');
+      }
+
+      if (isMounted) {
+        scanTimer = window.setTimeout(scanVideo, PROFILE_QR_SCAN_INTERVAL_MS);
+      }
+    };
+
+    const startCamera = async () => {
+      if (typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia) {
+        onError('当前浏览器不支持摄像头扫码');
+        return;
+      }
+
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: false,
+          video: { facingMode: { ideal: 'environment' } },
+        });
+
+        if (!isMounted) {
+          stream.getTracks().forEach((track) => track.stop());
+          return;
+        }
+
+        streamRef.current?.getTracks().forEach((track) => track.stop());
+        streamRef.current = stream;
+        videoElement.srcObject = stream;
+        await videoElement.play();
+        if (!detector) {
+          onError('当前浏览器暂不支持二维码识别');
+          return;
+        }
+        scanTimer = window.setTimeout(scanVideo, PROFILE_QR_SCAN_INTERVAL_MS);
+      } catch {
+        onError('无法打开摄像头，请检查权限');
+      }
+    };
+
+    void startCamera();
+
+    return () => {
+      isMounted = false;
+      clearScanTimer();
+      stopCamera();
+    };
+  }, [onError, onResult]);
+
+  return (
+    <div
+      className="platform-modal-backdrop fixed inset-0 z-[80] flex items-center justify-center px-4 py-6"
+      role="dialog"
+      aria-modal="true"
+      aria-label="扫码"
+    >
+      <div className="platform-qr-scanner-modal w-full max-w-sm overflow-hidden rounded-[1.4rem]">
+        <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
+          <div className="text-base font-black">扫码</div>
+          <button
+            type="button"
+            aria-label="关闭扫码"
+            onClick={onClose}
+            className="platform-modal-close flex h-9 w-9 items-center justify-center rounded-full"
+          >
+            ×
+          </button>
+        </div>
+        <div className="space-y-3 px-5 py-5">
+          <div className="platform-qr-scanner-modal__viewport">
+            <video
+              ref={videoRef}
+              className="h-full w-full object-cover"
+              playsInline
+              muted
+            />
+            <span className="platform-qr-scanner-modal__frame" />
+          </div>
+          {result ? (
+            <div className="platform-profile-success rounded-2xl px-3 py-2 text-xs font-semibold">
+              已识别：{result}
+            </div>
+          ) : error ? (
+            <div className="platform-profile-error rounded-2xl px-3 py-2 text-xs font-semibold">
+              {error}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function ProfileReferralModal({
   panel,
   center,
@@ -3898,6 +4025,9 @@ export function RpgEntryHomeView({
   const [isLoadingTaskCenter, setIsLoadingTaskCenter] = useState(false);
   const [claimingTaskId, setClaimingTaskId] = useState<string | null>(null);
   const [taskClaimSuccess, setTaskClaimSuccess] = useState<string | null>(null);
+  const [isQrScannerOpen, setIsQrScannerOpen] = useState(false);
+  const [qrScannerError, setQrScannerError] = useState<string | null>(null);
+  const [qrScannerResult, setQrScannerResult] = useState<string | null>(null);
   const [profilePopupPanel, setProfilePopupPanel] =
     useState<ProfilePopupPanel | null>(null);
   const [referralCenter, setReferralCenter] =
@@ -3935,6 +4065,7 @@ export function RpgEntryHomeView({
   const [mobileCenteredCardKey, setMobileCenteredCardKey] = useState<
     string | null
   >(null);
+  const hasManualCategoryTagSelectionRef = useRef(false);
   const pendingPublicAuthorKeysRef = useRef<Set<string>>(new Set());
   const [publicAuthorSummariesByKey, setPublicAuthorSummariesByKey] = useState<
     Record<string, PublicUserSummary | null>
@@ -4159,16 +4290,33 @@ export function RpgEntryHomeView({
   useEffect(() => {
     if (categoryGroups.length === 0) {
       setSelectedCategoryTag(null);
+      hasManualCategoryTagSelectionRef.current = false;
       return;
     }
 
-    const firstCategoryGroup = categoryGroups[0];
+    const firstCategoryGroup =
+      categoryGroups.find((group) =>
+        group.entries.some((entry) => !isMatch3DDemoProfileId(entry.profileId)),
+      ) ?? categoryGroups[0];
+    const selectedCategoryGroup =
+      categoryGroups.find((group) => group.tag === selectedCategoryTag) ?? null;
     if (
       firstCategoryGroup &&
-      !categoryGroups.some((group) => group.tag === selectedCategoryTag)
+      (!selectedCategoryGroup ||
+        (!hasManualCategoryTagSelectionRef.current &&
+          selectedCategoryGroup.entries.every((entry) =>
+            isMatch3DDemoProfileId(entry.profileId),
+          ) &&
+          firstCategoryGroup.tag !== selectedCategoryGroup.tag))
     ) {
       setSelectedCategoryTag(firstCategoryGroup.tag);
     }
+    if (
+      selectedCategoryTag &&
+      !categoryGroups.some((group) => group.tag === selectedCategoryTag)
+    ) {
+      hasManualCategoryTagSelectionRef.current = false;
+    }
   }, [categoryGroups, selectedCategoryTag]);
 
   useEffect(() => {
@@ -4665,6 +4813,16 @@ export function RpgEntryHomeView({
     setTaskClaimSuccess(null);
     loadTaskCenter();
   };
+  const openQrScannerPanel = () => {
+    if (!authUi?.user) {
+      authUi?.openLoginModal();
+      return;
+    }
+
+    setQrScannerError(null);
+    setQrScannerResult(null);
+    setIsQrScannerOpen(true);
+  };
   const loadReferralCenter = useCallback(() => {
     setIsLoadingReferral(true);
     setIsReferralCenterInitialized(false);
@@ -5232,23 +5390,6 @@ export function RpgEntryHomeView({
     },
     [],
   );
-  const openActiveRecommendEntry = useCallback(() => {
-    if (!activeRecommendEntry) {
-      return;
-    }
-
-    if (!isAuthenticated) {
-      authUi?.openLoginModal();
-      return;
-    }
-
-    openRecommendGalleryDetail(activeRecommendEntry);
-  }, [
-    activeRecommendEntry,
-    authUi,
-    isAuthenticated,
-    openRecommendGalleryDetail,
-  ]);
   const leadPublicEntry = featuredShelf[0] ?? generalLatestEntries[0] ?? null;
   const openLeadPublicEntry = () => {
     if (leadPublicEntry) {
@@ -5495,7 +5636,10 @@ export function RpgEntryHomeView({
                           <button
                             key={group.tag}
                             type="button"
-                            onClick={() => setSelectedCategoryTag(group.tag)}
+                            onClick={() => {
+                              hasManualCategoryTagSelectionRef.current = true;
+                              setSelectedCategoryTag(group.tag);
+                            }}
                             className={`platform-category-chip ${active ? 'platform-category-chip--active' : ''}`}
                           >
                             {group.tag}
@@ -5693,7 +5837,10 @@ export function RpgEntryHomeView({
                       <button
                         key={`${group.tag}:desktop-discover-category`}
                         type="button"
-                        onClick={() => setSelectedCategoryTag(group.tag)}
+                        onClick={() => {
+                          hasManualCategoryTagSelectionRef.current = true;
+                          setSelectedCategoryTag(group.tag);
+                        }}
                         className={`platform-category-chip shrink-0 ${active ? 'platform-category-chip--active' : ''}`}
                       >
                         {group.tag}
@@ -5892,28 +6039,10 @@ export function RpgEntryHomeView({
   const savesContent: ReactNode = draftTabContent ?? fallbackDraftContent;
 
   const profileContent: ReactNode = (
-    <div className={`${MOBILE_PAGE_STAGE_CLASS} platform-profile-page`}>
+    <div className={`${MOBILE_PROFILE_PAGE_STAGE_CLASS} platform-profile-page`}>
       {authUi?.user ? (
         <>
           <section className="platform-profile-header">
-            <div className="platform-profile-header__actions">
-              <button
-                type="button"
-                onClick={openRechargeOrRewardCodeModal}
-                className="platform-profile-header__icon-button"
-                aria-label="打开充值入口"
-              >
-                <ScanLine className="h-5 w-5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => authUi.openSettingsModal()}
-                className="platform-profile-header__icon-button"
-                aria-label="打开设置"
-              >
-                <Settings className="h-5 w-5" />
-              </button>
-            </div>
             <img
               src={profileStillLifeImage}
               alt=""
@@ -6166,36 +6295,21 @@ export function RpgEntryHomeView({
               icon={Settings}
               onClick={() => authUi.openSettingsModal()}
             />
-            <ProfileSettingsRow
-              label="存档"
-              icon={Archive}
-              onClick={() => setProfilePopupPanel('saveArchives')}
-            />
           </section>
 
-          <section
-            className="platform-profile-secondary-shortcuts"
-            aria-label="次级入口"
-          >
-            <ProfileSecondaryShortcutButton
-              label="存档"
-              subLabel={
-                saveEntries.length > 0
-                  ? `${saveEntries.length}个可继续`
-                  : '继续游玩'
-              }
-              icon={Archive}
-              onClick={() => setProfilePopupPanel('saveArchives')}
-            />
-            {canShowReferralRedeemShortcut ? (
+          {canShowReferralRedeemShortcut ? (
+            <section
+              className="platform-profile-secondary-shortcuts"
+              aria-label="次级入口"
+            >
               <ProfileSecondaryShortcutButton
                 label="填邀请码"
                 subLabel="新用户奖励"
                 icon={Ticket}
                 onClick={() => openProfilePopupPanel('redeem')}
               />
-            ) : null}
-          </section>
+            </section>
+          ) : null}
 
           <ProfileLegalSection onOpenDocument={setActiveLegalDocumentId} />
         </>
@@ -6506,7 +6620,10 @@ export function RpgEntryHomeView({
                         <button
                           key={`${group.tag}:desktop-category`}
                           type="button"
-                          onClick={() => setSelectedCategoryTag(group.tag)}
+                          onClick={() => {
+                            hasManualCategoryTagSelectionRef.current = true;
+                            setSelectedCategoryTag(group.tag);
+                          }}
                           className={`platform-category-chip shrink-0 ${active ? 'platform-category-chip--active' : ''}`}
                         >
                           {group.tag}
@@ -6660,6 +6777,22 @@ export function RpgEntryHomeView({
       onClose={() => setIsCategoryFilterPanelOpen(false)}
     />
   ) : null;
+  const qrScannerModal: ReactNode = isQrScannerOpen ? (
+    <ProfileQrScannerModal
+      error={qrScannerError}
+      result={qrScannerResult}
+      onClose={() => {
+        setIsQrScannerOpen(false);
+        setQrScannerError(null);
+        setQrScannerResult(null);
+      }}
+      onError={setQrScannerError}
+      onResult={(value) => {
+        setQrScannerError(null);
+        setQrScannerResult(value);
+      }}
+    />
+  ) : null;
 
   if (!isDesktopLayout) {
     const isMobileRecommendTab = activeTab === 'home';
@@ -6671,7 +6804,26 @@ export function RpgEntryHomeView({
         {!isMobileRecommendTab ? (
           <div className="platform-mobile-topbar mb-3 flex shrink-0 items-center justify-between gap-3 px-0.5">
             <RpgEntryBrandLogo />
-            {isAuthenticated && activeTab === 'create' ? (
+            {isAuthenticated && activeTab === 'profile' ? (
+              <div className="flex items-center gap-2.5">
+                <button
+                  type="button"
+                  onClick={openQrScannerPanel}
+                  className="platform-profile-header__icon-button"
+                  aria-label="扫码"
+                >
+                  <ScanLine className="h-5 w-5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => authUi?.openSettingsModal()}
+                  className="platform-profile-header__icon-button"
+                  aria-label="打开设置"
+                >
+                  <Settings className="h-5 w-5" />
+                </button>
+              </div>
+            ) : isAuthenticated && activeTab === 'create' ? (
               <button
                 type="button"
                 onClick={openUserSurface}
@@ -6758,6 +6910,7 @@ export function RpgEntryHomeView({
         {rewardCodeModal}
         {rechargeModal}
         {rechargePaymentResultModal}
+        {qrScannerModal}
         {categoryFilterDialog}
         {isTaskCenterOpen ? (
           <ProfileTaskCenterModal