add badge in flow

2026-04-24 23:05:05 +00:00 · 2025-12-21 22:06:06 +08:00
parent 7f20fe850f
commit 7bc2b0dcdc
7 changed files with 56 additions and 40 deletions
--- a/apps/web/src/modules/gallery/MasonryPhotoItem.tsx
+++ b/apps/web/src/modules/gallery/MasonryPhotoItem.tsx
@@ -97,6 +97,7 @@ export const MasonryPhotoItem = memo(({ data, width }: { data: PhotoManifest; wi

  // 检查是否有视频内容（Live Photo 或 Motion Photo）
  const hasVideo = data.video !== undefined
+  const hasThreeDScene = Boolean(data.threeDScene && data.threeDScene.mode === 'sog')

  // Live Photo/Motion Photo 视频加载逻辑
  useEffect(() => {
@@ -255,36 +256,51 @@ export const MasonryPhotoItem = memo(({ data, width }: { data: PhotoManifest; wi
        </div>
      )}

-      {/* Live Photo/Motion Photo 标识 */}
-      {hasVideo && (
-        <div
-          className={clsx(
-            'absolute z-20 flex items-center space-x-1 rounded-xl bg-black/50 px-1 py-1 text-xs text-white transition-all duration-200 hover:bg-black/70',
-            'top-2 left-2',
-            'flex-wrap gap-y-1',
-          )}
-          title={isMobileDevice ? t('photo.live.tooltip.mobile.main') : t('photo.live.tooltip.desktop.main')}
-        >
-          {isConvertingVideo ? (
-            <div className="flex items-center gap-1 px-1">
-              <i className="i-mingcute-loading-line animate-spin" />
-              <span>{t('loading.converting')}</span>
+      {/* Live Photo/Motion Photo & Spatial 标识 */}
+      {(hasVideo || hasThreeDScene) && (
+        <div className="absolute top-2 left-2 z-20 flex flex-col gap-1">
+          {hasVideo && (
+            <div
+              className={clsx(
+                'flex items-center space-x-1 rounded-xl bg-black/50 px-1 py-1 text-xs text-white transition-all duration-200 hover:bg-black/70',
+                'flex-wrap gap-y-1',
+              )}
+              title={isMobileDevice ? t('photo.live.tooltip.mobile.main') : t('photo.live.tooltip.desktop.main')}
+            >
+              {isConvertingVideo ? (
+                <div className="flex items-center gap-1 px-1">
+                  <i className="i-mingcute-loading-line animate-spin" />
+                  <span>{t('loading.converting')}</span>
+                </div>
+              ) : (
+                <Fragment>
+                  <i className="i-mingcute-live-photo-line size-4 shrink-0" />
+                  <span className="mr-1 shrink-0">{t('photo.live.badge')}</span>
+                  {videoConvertionError ? (
+                    <span className={'bg-warning/20 ml-0.5 rounded px-1 text-xs'}>
+                      <div
+                        className="text-yellow w-3 text-center font-bold"
+                        title={(videoConvertionError as Error).message}
+                      >
+                        !
+                      </div>
+                    </span>
+                  ) : null}
+                </Fragment>
+              )}
+            </div>
+          )}
+          {hasThreeDScene && (
+            <div
+              className={clsx(
+                'flex items-center space-x-1 rounded-xl bg-black/50 px-1 py-1 text-xs text-white transition-all duration-200 hover:bg-black/70',
+                'flex-wrap gap-y-1',
+              )}
+              title={t('photo.3d.tooltip.enable')}
+            >
+              <i className="i-lucide-rotate-3d size-4 shrink-0" />
+              <span className="mr-1 shrink-0">{t('photo.3d.badge')}</span>
            </div>
-          ) : (
-            <Fragment>
-              <i className="i-mingcute-live-photo-line size-4 shrink-0" />
-              <span className="mr-1 shrink-0">{t('photo.live.badge')}</span>
-              {videoConvertionError ? (
-                <span className={'bg-warning/20 ml-0.5 rounded px-1 text-xs'}>
-                  <div
-                    className="text-yellow w-3 text-center font-bold"
-                    title={(videoConvertionError as Error).message}
-                  >
-                    !
-                  </div>
-                </span>
-              ) : null}
-            </Fragment>
          )}
        </div>
      )}
--- a/locales/app/en.json
+++ b/locales/app/en.json
@@ -359,7 +359,7 @@
  "minimap.loading": "Loading map...",
  "minimap.view.in.map": "View location in map",
  "photo.3d.badge": "Spatial",
-  "photo.3d.error": "Unable to load the 3D scene",
+  "photo.3d.error": "Unable to load the spatial scene",
  "photo.3d.fetching": "Fetching spatial scene…",
  "photo.3d.fetchingDetail": "Downloading from network…",
  "photo.3d.hint": "Move your cursor to explore depth",
--- a/locales/app/jp.json
+++ b/locales/app/jp.json
@@ -328,8 +328,8 @@
  "loading.webgl.main": "WebGL テクスチャの読み込み",
  "minimap.loading": "地図を読み込み中...",
  "minimap.view.in.map": "地図で位置を表示",
-  "photo.3d.badge": "Spatial",
-  "photo.3d.error": "3D シーンを読み込めませんでした",
+  "photo.3d.badge": "空間",
+  "photo.3d.error": "空間シーンを読み込めませんでした",
  "photo.3d.fetching": "空間シーンを取得中...",
  "photo.3d.fetchingDetail": "ネットワークからダウンロード中...",
  "photo.3d.hint": "カーソルを動かして奥行きを体験しましょう",
--- a/locales/app/ko.json
+++ b/locales/app/ko.json
@@ -328,8 +328,8 @@
  "loading.webgl.main": "WebGL 텍스처 로딩",
  "minimap.loading": "지도 로딩 중...",
  "minimap.view.in.map": "지도에서 위치 보기",
-  "photo.3d.badge": "Spatial",
-  "photo.3d.error": "3D 장면을 불러오지 못했습니다",
+  "photo.3d.badge": "공간",
+  "photo.3d.error": "공간 씬을 불러오지 못했습니다",
  "photo.3d.fetching": "공간 씬을 가져오는 중...",
  "photo.3d.fetchingDetail": "네트워크에서 다운로드 중...",
  "photo.3d.hint": "마우스를 움직여 깊이를 느껴보세요",
--- a/locales/app/zh-CN.json
+++ b/locales/app/zh-CN.json
@@ -355,8 +355,8 @@
  "loading.webgl.main": "WebGL 纹理加载",
  "minimap.loading": "加载地图中...",
  "minimap.view.in.map": "在地图中查看位置",
-  "photo.3d.badge": "Spatial",
-  "photo.3d.error": "3D 场景加载失败",
+  "photo.3d.badge": "空间",
+  "photo.3d.error": "空间场景加载失败",
  "photo.3d.fetching": "正在获取空间场景...",
  "photo.3d.fetchingDetail": "从网络下载中...",
  "photo.3d.hint": "移动鼠标即可查看视差效果",
--- a/locales/app/zh-HK.json
+++ b/locales/app/zh-HK.json
@@ -328,8 +328,8 @@
  "loading.webgl.main": "WebGL 紋理載入",
  "minimap.loading": "載入地圖中...",
  "minimap.view.in.map": "在地圖中查看位置",
-  "photo.3d.badge": "Spatial",
-  "photo.3d.error": "3D 場景載入失敗",
+  "photo.3d.badge": "空間",
+  "photo.3d.error": "空間場景載入失敗",
  "photo.3d.fetching": "正在取得空間場景...",
  "photo.3d.fetchingDetail": "從網路下載中...",
  "photo.3d.hint": "移動滑鼠即可體驗視差效果",
--- a/locales/app/zh-TW.json
+++ b/locales/app/zh-TW.json
@@ -327,8 +327,8 @@
  "loading.webgl.main": "WebGL 紋理載入",
  "minimap.loading": "載入地圖中...",
  "minimap.view.in.map": "在地圖中查看位置",
-  "photo.3d.badge": "Spatial",
-  "photo.3d.error": "3D 場景載入失敗",
+  "photo.3d.badge": "空間",
+  "photo.3d.error": "空間場景載入失敗",
  "photo.3d.fetching": "正在取得空間場景...",
  "photo.3d.fetchingDetail": "從網路下載中...",
  "photo.3d.hint": "移動滑鼠即可體驗視差效果",