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