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/AlbumPhotos.vue

@@ -7,20 +7,24 @@
        信息卡展示，照片行无单行同步时间）。 -->
 <template>
   <div data-test="photos-panel">
-    <div class="flex flex-wrap items-center gap-3 mb-4">
-      <ElSelect
-        v-model="visibilityFilter"
-        clearable
-        :placeholder="t('albumsManage.photos.filterVisibility')"
-        style="width: 160px"
-        data-test="photo-visibility-filter"
-        @change="reload"
-      >
-        <ElOption value="unpublished" :label="t('albumsManage.photos.visibilityUnpublished')" />
-        <ElOption value="published" :label="t('albumsManage.photos.visibilityPublished')" />
-        <ElOption value="hidden" :label="t('albumsManage.photos.visibilityHidden')" />
-        <ElOption value="deleted" :label="t('albumsManage.photos.visibilityDeleted')" />
-      </ElSelect>
+    <!-- 工具栏（示例 03 .toolbar：可见性分段 + 分类筛选 + 视图切换） -->
+    <div class="ui06-toolbar">
+      <div class="seg" data-test="photo-visibility-filter">
+        <button
+          v-for="opt in visibilityOptions"
+          :key="opt.value"
+          type="button"
+          class="seg-btn"
+          :class="{ active: visibilityFilter === opt.value }"
+          :data-test="`photo-filter-${opt.value || 'all'}`"
+          @click="
+            visibilityFilter = opt.value
+            reload()
+          "
+        >
+          {{ opt.label }}
+        </button>
+      </div>
       <ElSelect
         v-model="categoryFilter"
         clearable
@@ -36,23 +40,64 @@
           :label="categoryLabel(category)"
         />
       </ElSelect>
+      <div class="seg push">
+        <ElTooltip :content="t('albumsManage.list.viewGrid')" placement="top">
+          <button
+            type="button"
+            class="seg-btn"
+            :class="{ active: viewMode === 'grid' }"
+            data-test="photo-view-grid"
+            @click="switchView('grid')"
+          >
+            <ElIcon><Menu /></ElIcon>
+          </button>
+        </ElTooltip>
+        <ElTooltip :content="t('albumsManage.list.viewTable')" placement="top">
+          <button
+            type="button"
+            class="seg-btn"
+            :class="{ active: viewMode === 'table' }"
+            data-test="photo-view-table"
+            @click="switchView('table')"
+          >
+            <ElIcon><Grid /></ElIcon>
+          </button>
+        </ElTooltip>
+      </div>
+    </div>
+
+    <!-- 已选条（示例 .selection-bar：N 张已选 + 批量隐藏 + 仅公开可选说明） -->
+    <div v-if="batchTargets.length" class="selection-bar" data-test="photo-selection-bar">
+      <span>{{ t('albumsManage.photos.selectedCount', { n: batchTargets.length }) }}</span>
       <ElButton
-        type="warning"
+        size="small"
+        type="primary"
         plain
-        :disabled="selectedPublished.length === 0"
         :loading="batchHiding"
         data-test="photo-batch-hide-btn"
         @click="batchHide"
       >
-        {{ t('albumsManage.photos.batchHide') }}
-        <span v-if="selectedPublished.length" class="ml-1">({{ selectedPublished.length }})</span>
+        {{ t('albumsManage.photos.batchHide') }} ({{ batchTargets.length }})
       </ElButton>
+      <span class="hint">{{ t('albumsManage.photos.onlyPublicSelectable') }}</span>
     </div>
 
     <ElAlert v-if="error && !items.length" type="error" :closable="false">
       {{ error.message }}
     </ElAlert>
 
+    <!-- 照片网格（默认；缩略图走 preview.thumb 签名 URL） -->
+    <div v-else-if="viewMode === 'grid'" v-loading="loading">
+      <PhotoGrid
+        :photos="items"
+        :selected-ids="gridSelected"
+        @open="openViewer"
+        @toggle="toggleGridSelect"
+      />
+      <ElEmpty v-if="!loading && !items.length" :description="$t('albumsManage.photos.empty')" />
+    </div>
+
+    <!-- 表格模式（原列保留 + 详情入口开大图） -->
     <ElTable
       v-else
       v-loading="loading"
@@ -102,8 +147,11 @@
           <span>{{ formatDateTime(row.uploadedAt) }}</span>
         </template>
       </ElTableColumn>
-      <ElTableColumn :label="t('albumsManage.photos.colActions')" width="200" fixed="right">
+      <ElTableColumn :label="t('albumsManage.photos.colActions')" width="230" fixed="right">
         <template #default="{ row, $index }">
+          <ElButton link type="primary" data-test="photo-view-btn" @click="openViewer(row)">
+            {{ t('albumsManage.photos.view') }}
+          </ElButton>
           <ElButton
             v-if="row.visibility === 'published'"
             link
@@ -144,6 +192,16 @@
       </ElButton>
     </div>
 
+    <!-- 管理大图（示例 16：深色舞台 + 信息 + 行内动作） -->
+    <PhotoPreviewDialog
+      :visible="viewerVisible"
+      :photo="viewerPhoto"
+      @close="viewerVisible = false"
+      @hide="(p) => viewerAction(p, 'hidden')"
+      @restore="(p) => viewerAction(p, 'published')"
+      @remove="viewerDelete"
+    />
+
     <!-- 批量隐藏失败详情（逐条错误码本地化；成功行已原位回显） -->
     <ElDialog
       v-model="failuresVisible"
@@ -181,6 +239,7 @@
 <script setup lang="ts">
   import { computed, onMounted, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
+  import { Menu, Grid } from '@element-plus/icons-vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
   import {
     fetchAlbumPhotos,
@@ -196,6 +255,8 @@
     summarizeBatchHideResults,
     type BatchHideSummary
   } from '@/utils/albums/batchHide'
+  import PhotoGrid from '@/components/business/albums/PhotoGrid.vue'
+  import PhotoPreviewDialog from '@/components/business/albums/PhotoPreviewDialog.vue'
 
   const props = defineProps<{
     album: Api.Album.Detail
@@ -206,6 +267,56 @@
   const visibilityFilter = ref<Api.Album.PhotoVisibility | ''>('')
   const categoryFilter = ref('')
 
+  // ── UI06 视图与选择（网格默认；网格勾选与表格 selection 并存、切换清空） ──
+  const viewMode = ref<'grid' | 'table'>('grid')
+  const gridSelected = ref(new Set<string>())
+
+  const visibilityOptions = computed(() => [
+    { value: '' as const, label: t('albumsManage.photosGrid.filterAll') },
+    { value: 'published' as const, label: t('albumsManage.photos.visibilityPublished') },
+    { value: 'hidden' as const, label: t('albumsManage.photos.visibilityHidden') },
+    { value: 'unpublished' as const, label: t('albumsManage.photos.visibilityUnpublished') },
+    { value: 'deleted' as const, label: t('albumsManage.photos.visibilityDeleted') }
+  ])
+
+  function switchView(mode: 'grid' | 'table') {
+    viewMode.value = mode
+    gridSelected.value = new Set()
+    selection.value = []
+  }
+
+  function toggleGridSelect(photoId: string) {
+    const next = new Set(gridSelected.value)
+    if (next.has(photoId)) next.delete(photoId)
+    else next.add(photoId)
+    gridSelected.value = next
+  }
+
+  // ── 管理大图（示例 16） ──
+  const viewerVisible = ref(false)
+  const viewerPhoto = ref<Api.Album.AdminPhoto | null>(null)
+
+  function openViewer(photo: Api.Album.AdminPhoto) {
+    viewerPhoto.value = photo
+    viewerVisible.value = true
+  }
+
+  /** 大图内隐藏/恢复：定位行 index 后复用表格同一状态机 */
+  function viewerAction(photo: Api.Album.AdminPhoto, target: 'hidden' | 'published') {
+    const index = indexOfPhotoId(items.value, photo.photoId)
+    if (index >= 0) {
+      void setVisibility(photo, index, target)
+    }
+  }
+
+  /** 大图内软删除 */
+  function viewerDelete(photo: Api.Album.AdminPhoto) {
+    const index = indexOfPhotoId(items.value, photo.photoId)
+    if (index >= 0) {
+      void softDelete(photo, index)
+    }
+  }
+
   const list = useCursorList<Api.Album.AdminPhoto>(
     (cursor?: string) =>
       fetchAlbumPhotos(props.album.id, {
@@ -329,17 +440,23 @@
     selection.value = rows
   }
 
-  /** selection 经 selectable 约束本就全为 published；过滤一层兜底 */
-  const selectedPublished = computed(() =>
-    selection.value.filter((row) => row.visibility === 'published')
-  )
+  /** selection 经 selectable 约束本就全为 published；过滤一层兜底。
+   *  UI06：网格模式勾选（gridSelected）与表格 selection 合并为统一批量目标。 */
+  const batchTargets = computed(() => {
+    if (viewMode.value === 'grid') {
+      return items.value.filter(
+        (row) => gridSelected.value.has(row.photoId) && row.visibility === 'published'
+      )
+    }
+    return selection.value.filter((row) => row.visibility === 'published')
+  })
 
   const batchHiding = ref(false)
   const failuresVisible = ref(false)
   const batchSummary = ref<BatchHideSummary | null>(null)
 
   async function batchHide() {
-    const targets = selectedPublished.value
+    const targets = batchTargets.value
     if (targets.length === 0) return
     if (!(await confirmBox(t('albumsManage.photos.batchHideConfirm', { count: targets.length })))) {
       return
@@ -381,3 +498,75 @@
     }
   }
 </script>
+
+<style lang="scss" scoped>
+  @reference '@styles/core/tailwind.css';
+
+  /* UI06：工具栏/分段/已选条（示例 .toolbar / .seg / .selection-bar） */
+  .ui06-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .push {
+      margin-left: auto;
+    }
+  }
+
+  .seg {
+    display: flex;
+    gap: 2px;
+    padding: 3px;
+    background: #edf1f7;
+    border-radius: 8px;
+  }
+
+  .seg-btn {
+    display: grid;
+    place-items: center;
+    min-height: 32px;
+    padding: 7px 13px;
+    font-size: 11px;
+    color: #697d9b;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+
+    &.active {
+      color: var(--el-color-primary);
+      background: #ffffff;
+      box-shadow: 0 1px 4px #18385810;
+    }
+  }
+
+  .selection-bar {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    padding: 10px 15px;
+    margin-bottom: 16px;
+    font-size: 12px;
+    color: var(--el-color-primary);
+    background: #e6f0ff;
+    border-radius: 8px;
+
+    .hint {
+      font-size: 11px;
+      color: #6480a8;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .ui06-toolbar .push {
+      margin-left: 0;
+    }
+
+    .selection-bar {
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+  }
+</style>

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>

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

@@ -1,68 +1,133 @@
-<!-- 相册列表（P1b Task 10）：游标分页「页内累积 + 加载更多」（模板 useTable 按
-     offset 建模，与契约 nextCursor 键集分页不兼容，见 composables/useCursorList） -->
+<!-- 相册列表（UI06 对齐示例 02：封面卡片默认 + 表格切换 + 搜索/状态筛选）
+     数据层不变：useCursorList 游标累积；搜索按当前已加载过滤（契约无全局搜索） -->
 <template>
-  <div class="p-5">
-    <ElCard data-test="album-list-card">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <span>{{ $t('albumsManage.list.title') }}</span>
-          <ElButton type="primary" data-test="album-create-btn" @click="openCreate">
-            {{ $t('albumsManage.list.create') }}
-          </ElButton>
-        </div>
-      </template>
+  <div class="ui06-page">
+    <!-- 页头（示例 .page-heading） -->
+    <div class="page-heading">
+      <div>
+        <h1>{{ $t('albumsManage.list.title') }}</h1>
+        <p>{{ $t('albumsManage.list.subtitle') }}</p>
+      </div>
+      <div class="actions">
+        <ElButton type="primary" data-test="album-create-btn" @click="openCreate">
+          {{ $t('albumsManage.list.create') }}
+        </ElButton>
+      </div>
+    </div>
 
-      <ElAlert
-        v-if="error && !items.length"
-        type="error"
-        :closable="false"
-        data-test="album-list-error"
-      >
-        <div class="flex items-center gap-2">
-          <span>{{ $t('albumsManage.list.loadFailed') }}：{{ error.message }}</span>
-          <ElButton size="small" data-test="album-list-retry" @click="loadFirst()">
-            {{ $t('albumsManage.list.retry') }}
-          </ElButton>
-        </div>
-      </ElAlert>
+    <!-- 工具栏：搜索 + 状态筛选 + 视图切换 -->
+    <div class="toolbar">
+      <ElInput
+        v-model="search"
+        class="search"
+        :prefix-icon="Search"
+        clearable
+        :placeholder="$t('albumsManage.list.searchPlaceholder')"
+        data-test="album-search"
+      />
+      <ElSelect v-model="statusFilter" class="status-filter" data-test="album-status-filter">
+        <ElOption value="all" :label="$t('albumsManage.list.statusAll')" />
+        <ElOption value="public" :label="$t('albumsManage.list.statusPublicOnly')" />
+        <ElOption value="private" :label="$t('albumsManage.list.statusPrivateOnly')" />
+      </ElSelect>
+      <div class="push view-seg">
+        <ElTooltip :content="$t('albumsManage.list.viewGrid')" placement="top">
+          <button
+            type="button"
+            class="seg-btn"
+            :class="{ active: viewMode === 'grid' }"
+            data-test="album-view-grid"
+            @click="viewMode = 'grid'"
+          >
+            <ElIcon><Menu /></ElIcon>
+          </button>
+        </ElTooltip>
+        <ElTooltip :content="$t('albumsManage.list.viewTable')" placement="top">
+          <button
+            type="button"
+            class="seg-btn"
+            :class="{ active: viewMode === 'table' }"
+            data-test="album-view-table"
+            @click="viewMode = 'table'"
+          >
+            <ElIcon><Grid /></ElIcon>
+          </button>
+        </ElTooltip>
+      </div>
+    </div>
 
-      <ElTable v-else v-loading="loading" :data="items" data-test="album-list-table">
-        <ElTableColumn :label="$t('albumsManage.list.colTitle')" min-width="220">
+    <!-- 摘要行（示例 .summary-line：不做全局统计，仅描述已加载范围） -->
+    <div class="summary-line">
+      <span>
+        {{ $t('albumsManage.list.loadedCount', { n: filtered.length }) }}
+      </span>
+      <span>{{ $t('albumsManage.list.cursorNote') }}</span>
+    </div>
+
+    <ElAlert
+      v-if="error && !items.length"
+      type="error"
+      :closable="false"
+      data-test="album-list-error"
+    >
+      <div class="flex items-center gap-2">
+        <span>{{ $t('albumsManage.list.loadFailed') }}：{{ error.message }}</span>
+        <ElButton size="small" data-test="album-list-retry" @click="loadFirst()">
+          {{ $t('albumsManage.list.retry') }}
+        </ElButton>
+      </div>
+    </ElAlert>
+
+    <!-- 封面卡片网格（默认） -->
+    <div v-else-if="viewMode === 'grid'" class="album-grid" data-test="album-grid">
+      <AlbumCoverCard
+        v-for="album in filtered"
+        :key="album.id"
+        :album="album"
+        :title-of="titleOf"
+        :meta-of="metaOf"
+        @open="gotoDetail"
+      />
+      <div v-if="!loading && !filtered.length" class="empty-load-more">
+        {{ $t('albumsManage.list.emptyFiltered') }}
+      </div>
+    </div>
+
+    <!-- 表格模式（token 与开关收敛进相册列；保留关键 data-test） -->
+    <ElCard v-else v-loading="loading" class="table-card" data-test="album-list-card">
+      <ElTable :data="filtered" data-test="album-list-table">
+        <ElTableColumn :label="$t('albumsManage.list.colTitle')" min-width="240">
           <template #default="{ row }">
             <div class="flex items-center gap-2">
               <span class="font-medium">{{ titleOf(row) }}</span>
               <ElTag size="small" type="info">{{ row.defaultLocale }}</ElTag>
-            </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn :label="$t('albumsManage.list.colToken')" min-width="200">
-          <template #default="{ row }">
-            <div class="flex items-center gap-1">
-              <span class="text-gray-500" data-test="album-token">{{ row.publicToken }}</span>
-              <ElButton
-                link
-                type="primary"
+              <ElTag
                 size="small"
-                :title="$t('albumsManage.list.copyToken')"
-                @click="copyToken(row.publicToken)"
+                :type="row.publicEnabled ? 'success' : 'info'"
+                :effect="row.publicEnabled ? 'light' : 'plain'"
               >
-                <ElIcon><CopyDocument /></ElIcon>
-              </ElButton>
+                {{
+                  row.publicEnabled
+                    ? $t('albumsManage.card.public')
+                    : $t('albumsManage.card.private')
+                }}
+              </ElTag>
             </div>
           </template>
         </ElTableColumn>
-        <ElTableColumn :label="$t('albumsManage.list.colStatus')" width="90">
+        <ElTableColumn :label="$t('albumsManage.list.colStartAt')" width="170">
           <template #default="{ row }">
-            <ElTag :type="row.status === 'active' ? 'success' : 'info'">
-              {{
-                row.status === 'active'
-                  ? $t('albumsManage.list.statusActive')
-                  : $t('albumsManage.list.statusOffline')
-              }}
-            </ElTag>
+            <span>{{ formatDateTime(row.startAt) }}</span>
           </template>
         </ElTableColumn>
-        <ElTableColumn :label="$t('albumsManage.list.colSwitches')" width="240">
+        <ElTableColumn :label="$t('albumsManage.list.colEndAt')" width="170">
+          <template #default="{ row }">
+            <span>{{
+              row.endAt ? formatDateTime(row.endAt) : $t('albumsManage.list.endAtUndecided')
+            }}</span>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn :label="$t('albumsManage.list.colSwitches')" width="230">
           <template #default="{ row }">
             <div class="flex flex-wrap gap-1" data-test="album-switch-tags">
               <ElTag
@@ -79,19 +144,7 @@
             </div>
           </template>
         </ElTableColumn>
-        <ElTableColumn :label="$t('albumsManage.list.colStartAt')" width="160">
-          <template #default="{ row }">
-            <span>{{ formatDateTime(row.startAt) }}</span>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn :label="$t('albumsManage.list.colEndAt')" width="160">
-          <template #default="{ row }">
-            <span>{{
-              row.endAt ? formatDateTime(row.endAt) : $t('albumsManage.list.endAtUndecided')
-            }}</span>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn :label="$t('albumsManage.list.colActions')" width="200" fixed="right">
+        <ElTableColumn :label="$t('albumsManage.list.colActions')" width="220" fixed="right">
           <template #default="{ row }">
             <ElButton link type="primary" data-test="album-edit-btn" @click="openEdit(row)">
               {{ $t('albumsManage.list.actionEdit') }}
@@ -109,26 +162,26 @@
           <ElEmpty v-if="!loading" :description="$t('albumsManage.list.empty')" />
         </template>
       </ElTable>
-
-      <div v-if="items.length" class="mt-4 text-center">
-        <ElButton v-if="hasMore" :loading="loading" data-test="album-load-more" @click="loadMore()">
-          {{ $t('albumsManage.list.loadMore') }}
-        </ElButton>
-        <span v-else class="text-gray-400 text-sm">{{ $t('albumsManage.list.noMore') }}</span>
-      </div>
     </ElCard>
 
+    <div v-if="items.length" class="load-more">
+      <ElButton v-if="hasMore" :loading="loading" data-test="album-load-more" @click="loadMore()">
+        {{ $t('albumsManage.list.loadMore') }}
+      </ElButton>
+      <span v-else>{{ $t('albumsManage.list.noMore') }}</span>
+    </div>
+
     <AlbumFormDialog v-model="formVisible" :album="editing" @saved="onSaved" />
   </div>
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue'
+  import { computed, onMounted, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { useI18n } from 'vue-i18n'
-  import { CopyDocument } from '@element-plus/icons-vue'
-  import { ElMessage } from 'element-plus'
+  import { Search, Menu, Grid } from '@element-plus/icons-vue'
   import AlbumFormDialog from './AlbumFormDialog.vue'
+  import AlbumCoverCard from '@/components/business/albums/AlbumCoverCard.vue'
   import { fetchAlbumList } from '@/api/albums'
   import { useCursorList } from '@/views/albums/composables/useCursorList'
   import { formatDateTime } from '@/utils/albums/format'
@@ -145,13 +198,38 @@
     (item) => item.id
   )
 
+  // ── 视图与筛选（UI06：默认封面卡；搜索仅过滤当前已加载——契约无全局搜索） ──
+  const viewMode = ref<'grid' | 'table'>('grid')
+  const search = ref('')
+  const statusFilter = ref<'all' | 'public' | 'private'>('all')
+
+  const filtered = computed(() => {
+    const q = search.value.trim().toLowerCase()
+    return items.value.filter((album) => {
+      if (statusFilter.value === 'public' && !album.publicEnabled) return false
+      if (statusFilter.value === 'private' && album.publicEnabled) return false
+      if (!q) return true
+      return (
+        album.translations.some((tr) => tr.title.toLowerCase().includes(q)) ||
+        album.publicToken.toLowerCase().includes(q)
+      )
+    })
+  })
+
   /** 列表标题按 defaultLocale 解析（回退第一条翻译） */
   function titleOf(album: Api.Album.Summary): string {
     const preferred = album.translations.find((t) => t.locale === album.defaultLocale)
     return preferred?.title ?? album.translations[0]?.title ?? album.id
   }
 
-  /** 四开关 → 标签展示（开=success、关=plain info） */
+  /** 日期 · 地点（venue 走 defaultLocale 翻译） */
+  function metaOf(album: Api.Album.Summary): string {
+    const venue = album.translations.find((x) => x.locale === album.defaultLocale)?.venue
+    const date = album.startAt ? album.startAt.slice(0, 10) : ''
+    return [date, venue].filter(Boolean).join(' · ')
+  }
+
+  /** 表格开关标签（开=success、关=plain info） */
   function switchTags(album: Api.Album.Summary) {
     return [
       { key: 'upload', on: album.uploadEnabled, label: t('albumsManage.list.switchUpload') },
@@ -165,11 +243,6 @@
     ]
   }
 
-  async function copyToken(token: string) {
-    await navigator.clipboard.writeText(token)
-    ElMessage.success(t('albumsManage.list.copied'))
-  }
-
   // ── 创建 / 编辑 ──
   const formVisible = ref(false)
   const editing = ref<Api.Album.Summary | null>(null)
@@ -201,3 +274,145 @@
     loadFirst()
   })
 </script>
+
+<style lang="scss" scoped>
+  @reference '@styles/core/tailwind.css';
+
+  /* 对齐示例 .workspace / .page-heading / .toolbar / .summary-line / .album-grid / .load-more */
+  .ui06-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;
+
+    h1 {
+      font-size: 27px;
+      letter-spacing: -0.7px;
+      line-height: 1.4;
+    }
+
+    p {
+      margin-top: 6px;
+      font-size: 12px;
+      color: #7b899f;
+    }
+  }
+
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 14px;
+
+    .search {
+      width: 240px;
+    }
+
+    .status-filter {
+      width: 160px;
+    }
+
+    .push {
+      margin-left: auto;
+    }
+  }
+
+  .view-seg {
+    display: flex;
+    gap: 2px;
+    padding: 3px;
+    background: #edf1f7;
+    border-radius: 8px;
+
+    .seg-btn {
+      display: grid;
+      place-items: center;
+      min-height: 32px;
+      min-width: 38px;
+      padding: 7px 10px;
+      font-size: 11px;
+      color: #697d9b;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      border-radius: 6px;
+
+      &.active {
+        color: var(--el-color-primary);
+        background: #ffffff;
+        box-shadow: 0 1px 4px #18385810;
+      }
+    }
+  }
+
+  .summary-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14px;
+    font-size: 11px;
+    color: #8d9bb0;
+  }
+
+  .album-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 22px;
+  }
+
+  .table-card {
+    border: 0;
+  }
+
+  .load-more {
+    margin-top: 24px;
+    font-size: 11px;
+    color: #8b98ac;
+    text-align: center;
+  }
+
+  .empty-load-more {
+    grid-column: 1 / -1;
+    padding: 50px 0;
+    font-size: 12px;
+    color: #7b899f;
+    text-align: center;
+  }
+
+  @media (min-width: 1700px) {
+    .album-grid {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  @media (max-width: 1200px) {
+    .album-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 640px) {
+    .album-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .toolbar {
+      .search,
+      .status-filter {
+        width: 100%;
+      }
+
+      .push {
+        margin-left: 0;
+      }
+    }
+  }
+</style>