feat(ui06): B2 shared components + B3a core pages — album cards, photo grid, viewer, summary header

- 类型补齐契约字段：Summary.cover / AdminPhoto.preview（SignedUrl；服务端已返回，B0 核对）
- AlbumCoverCard：封面卡（公开/状态/上传 pill，无封面中性占位，不显示 owner 名）
- 相册列表：默认封面卡片网格（3列/1700+4列）+ 表格切换 + 已加载内搜索 + 公开状态筛选 + 摘要行
- AlbumSummaryHeader：300×144 封面 + 两列紧凑资料 + 高级折叠（ownerId/统计时间收敛）
- 详情页壳：页头（编辑/分享固定主操作）替换 ElDescriptions 大区；banner 区 B3c 收纳
- PhotoGrid + PhotoPreviewDialog：照片网格默认（preview.thumb 签名 URL）+ 深色大图（browse URL、
  行内隐藏/恢复/软删除复用表格状态机）；网格勾选与表格 selection 合并批量目标
- e2e 适配默认网格视图（albums/governance 断言前切表格）；batchHide fixture 补 preview
- typecheck/lint/vitest 87 项全绿

Co-Authored-By: Claude Code <noreply@anthropic.com>

apps/admin/src/views/albums/detail/index.vue

@@ -1,7 +1,7 @@
-<!-- 相册详情：基础信息 + banner 上传 + 照片/成员/分类管理页签（P1b Task 10）。
+<!-- 相册详情（UI06 对齐示例 03：页头 + 摘要头 + 页签；banner 上传区待 B3c 收进资产页签）。
      路由 /albums/detail/:albumId（isHide，不进菜单）。 -->
 <template>
-  <div class="p-5">
+  <div class="ui06-detail-page">
     <ElAlert v-if="error" type="error" :closable="false" data-test="album-detail-error">
       <div class="flex items-center gap-2">
         <span>{{ $t('albumsManage.detail.loadFailed') }}：{{ error.message }}</span>
@@ -11,20 +11,26 @@
       </div>
     </ElAlert>
 
-    <ElCard v-else v-loading="loading" :data-test="'album-detail-card'">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <ElButton link @click="router.back()" data-test="album-detail-back">
+    <template v-else>
+      <div v-loading="loading">
+        <!-- 页头：返回 + 标题 + 固定主操作（编辑 outline / 分享 primary / 交接次级） -->
+        <div class="page-heading">
+          <div class="heading-left">
+            <ElButton link data-test="album-detail-back" @click="router.back()">
               <ElIcon><ArrowLeft /></ElIcon>
             </ElButton>
-            <span class="font-medium">{{ titleOf(album) }}</span>
-            <ElTag size="small" type="info">{{ album?.defaultLocale }}</ElTag>
+            <div>
+              <h1>{{ titleOf(album) }}</h1>
+              <p>{{ $t('albumsManage.detail.subtitle') }}</p>
+            </div>
           </div>
-          <div class="flex items-center gap-2">
+          <div class="actions">
             <ElButton plain data-test="album-detail-transfer" @click="transferVisible = true">
               {{ $t('albumsManage.transfer.entry') }}
             </ElButton>
+            <ElButton data-test="album-detail-share-shortcut" @click="activeTab = 'share'">
+              {{ $t('albumsManage.detail.share') }}
+            </ElButton>
             <ElButton
               type="primary"
               plain
@@ -35,79 +41,14 @@
             </ElButton>
           </div>
         </div>
-      </template>
 
-      <ElDescriptions
-        v-if="album"
-        :column="3"
-        border
-        :title="$t('albumsManage.detail.basicInfo')"
-        data-test="album-detail-desc"
-      >
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldTitle')">
-          {{ titleOf(album) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldToken')">
-          <span class="flex items-center gap-1">
-            <span data-test="album-detail-token">{{ album.publicToken }}</span>
-            <ElButton link type="primary" size="small" @click="copyToken(album.publicToken)">
-              <ElIcon><CopyDocument /></ElIcon>
-            </ElButton>
-          </span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldStatus')">
-          <ElTag :type="album.status === 'active' ? 'success' : 'info'">
-            {{
-              album.status === 'active'
-                ? $t('albumsManage.list.statusActive')
-                : $t('albumsManage.list.statusOffline')
-            }}
-          </ElTag>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.list.colSwitches')">
-          <span class="flex flex-wrap gap-1">
-            <ElTag
-              v-for="sw in switchTags(album)"
-              :key="sw.key"
-              size="small"
-              :type="sw.on ? 'success' : 'info'"
-              :effect="sw.on ? 'light' : 'plain'"
-            >
-              {{ sw.label }} {{ sw.on ? $t('albumsManage.list.on') : $t('albumsManage.list.off') }}
-            </ElTag>
-          </span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldTimezone')">
-          {{ album.timezone }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldStartAt')">
-          {{ formatDateTime(album.startAt) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldEndAt')">
-          {{ album.endAt ? formatDateTime(album.endAt) : $t('albumsManage.list.endAtUndecided') }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldCreatedAt')">
-          {{ formatDateTime(album.createdAt) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldUpdatedAt')">
-          {{ formatDateTime(album.updatedAt) }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldStatsSyncedAt')">
-          <span data-test="album-detail-stats-synced-at">
-            {{
-              album.statsSyncedAt
-                ? formatDateTime(album.statsSyncedAt)
-                : $t('albumsManage.detail.statsNotSynced')
-            }}
-          </span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem :label="$t('albumsManage.detail.fieldOwnerId')">
-          <span data-test="album-detail-owner-id">{{ album.ownerId }}</span>
-        </ElDescriptionsItem>
-      </ElDescriptions>
+        <!-- 摘要头：封面 + 紧凑资料 + 高级折叠（替换原 ElDescriptions 大区） -->
+        <AlbumSummaryHeader v-if="album" :album="album" />
 
-      <div v-if="album" class="mt-5">
-        <AlbumBannerUpload :album-id="albumId" />
+        <!-- 品牌资产（banner 上传；B3c 收进独立页签，本批保持原位） -->
+        <div v-if="album" class="mt-5">
+          <AlbumBannerUpload :album-id="albumId" />
+        </div>
       </div>
 
       <ElTabs v-if="album" v-model="activeTab" class="mt-4" data-test="album-detail-tabs">
@@ -148,7 +89,7 @@
           <AlbumShareCard :album="album" />
         </ElTabPane>
       </ElTabs>
-    </ElCard>
+    </template>
 
     <AlbumFormDialog v-if="album" v-model="editVisible" :album="album" @saved="onAlbumSaved" />
     <AlbumTransferDialog
@@ -163,10 +104,9 @@
 <script setup lang="ts">
   import { computed, onMounted, ref, watch } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
-  import { useI18n } from 'vue-i18n'
-  import { ArrowLeft, CopyDocument } from '@element-plus/icons-vue'
-  import { ElMessage } from 'element-plus'
+  import { ArrowLeft } from '@element-plus/icons-vue'
   import AlbumFormDialog from '@/views/albums/manage/AlbumFormDialog.vue'
+  import AlbumSummaryHeader from '@/components/business/albums/AlbumSummaryHeader.vue'
   import AlbumBannerUpload from './AlbumBannerUpload.vue'
   import AlbumMembers from './AlbumMembers.vue'
   import AlbumCategories from './AlbumCategories.vue'
@@ -175,13 +115,11 @@
   import AlbumShareCard from './AlbumShareCard.vue'
   import AlbumTransferDialog from './AlbumTransferDialog.vue'
   import { fetchAlbum } from '@/api/albums'
-  import { formatDateTime } from '@/utils/albums/format'
 
   defineOptions({ name: 'AlbumsDetail' })
 
   const route = useRoute()
   const router = useRouter()
-  const { t } = useI18n()
 
   const albumId = computed(() => String(route.params.albumId ?? ''))
 
@@ -220,24 +158,6 @@
     return preferred?.title ?? target.translations[0]?.title ?? target.id
   }
 
-  function switchTags(target: Api.Album.Detail) {
-    return [
-      { key: 'upload', on: target.uploadEnabled, label: t('albumsManage.list.switchUpload') },
-      { key: 'public', on: target.publicEnabled, label: t('albumsManage.list.switchPublic') },
-      { key: 'download', on: target.downloadEnabled, label: t('albumsManage.list.switchDownload') },
-      {
-        key: 'original',
-        on: target.originalDownloadEnabled,
-        label: t('albumsManage.list.switchOriginal')
-      }
-    ]
-  }
-
-  async function copyToken(token: string) {
-    await navigator.clipboard.writeText(token)
-    ElMessage.success(t('albumsManage.list.copied'))
-  }
-
   /** 列表「成员」入口带 #members 锚点：直达成员页签 */
   watch(
     () => route.hash,
@@ -255,3 +175,53 @@
     load()
   })
 </script>
+
+<style lang="scss" scoped>
+  @reference '@styles/core/tailwind.css';
+
+  /* UI06：详情页工作区（示例 .workspace / .page-heading / .tabs） */
+  .ui06-detail-page {
+    max-width: 1660px;
+    padding: 28px 30px 44px;
+    margin: auto;
+  }
+
+  .page-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 22px;
+
+    .heading-left {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      min-width: 0;
+
+      h1 {
+        overflow: hidden;
+        font-size: 24px;
+        letter-spacing: -0.6px;
+        line-height: 1.35;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      p {
+        margin-top: 4px;
+        font-size: 12px;
+        color: #7b899f;
+      }
+    }
+  }
+
+  :deep(.el-tabs__nav-wrap::after) {
+    height: 1px;
+    background: #dfe7f2;
+  }
+
+  :deep(.el-tabs__item) {
+    font-size: 12px;
+  }
+</style>