diff --git a/apps/admin/e2e/albums-governance.spec.ts b/apps/admin/e2e/albums-governance.spec.ts
index ccf6c17..977a9fc 100644
--- a/apps/admin/e2e/albums-governance.spec.ts
+++ b/apps/admin/e2e/albums-governance.spec.ts
@@ -26,6 +26,8 @@ async function createAlbumViaUi(page: Page): Promise<string> {
   await page.keyboard.press('Enter')
   await page.getByTestId('album-form-submit').click()
   await expect(page.getByTestId('album-form-dialog')).toBeHidden()
+  // UI06：列表默认封面卡片网格；表格断言前先切换
+  await page.getByTestId('album-view-table').click()
   await expect(
     page.getByTestId('album-list-table').getByText(`E2E治理相册 ${suffix}`)
   ).toBeVisible()
@@ -78,6 +80,8 @@ test('批量隐藏：多选 2 → 汇总 toast + 行原位已隐藏 + 公开列
 
   seedFixture('gov-photos', albumId, adminCredentials().account, '3')
   await page.reload()
+  // UI06：照片默认网格视图；表格断言前先切换
+  await page.getByTestId('photo-view-table').click()
   await expect(page.getByTestId('photo-list-table')).toBeVisible()
   const rows = page.getByTestId('photo-list-table').locator('tbody tr')
   await expect(rows).toHaveCount(3)
diff --git a/apps/admin/e2e/albums.spec.ts b/apps/admin/e2e/albums.spec.ts
index 62c5a83..f896b46 100644
--- a/apps/admin/e2e/albums.spec.ts
+++ b/apps/admin/e2e/albums.spec.ts
@@ -26,6 +26,8 @@ async function createAlbumViaUi(page: Page): Promise<string> {
   await page.keyboard.press('Enter')
   await page.getByTestId('album-form-submit').click()
   await expect(page.getByTestId('album-form-dialog')).toBeHidden()
+  // UI06：列表默认封面卡片网格；表格断言前先切换
+  await page.getByTestId('album-view-table').click()
   await expect(page.getByTestId('album-list-table').getByText(`E2E相册 ${suffix}`)).toBeVisible()
   return suffix
 }
@@ -99,6 +101,8 @@ test('详情：邀请成员 → 建分类 → 传 banner → 照片管理（隐
   // ── 照片管理：直种两种状态 → 列表可见 → 隐藏已发布照片 ──
   seedFixture('photos', albumId, adminCredentials().account)
   await page.reload()
+  // UI06：照片默认网格视图；表格断言前先切换
+  await page.getByTestId('photo-view-table').click()
   await expect(page.getByTestId('photo-list-table')).toBeVisible()
 
   // 用处理状态标签（就绪）锚定行：隐藏后行的可见性文案变化，锚点保持稳定
diff --git a/apps/admin/src/components/business/albums/AlbumCoverCard.vue b/apps/admin/src/components/business/albums/AlbumCoverCard.vue
new file mode 100644
index 0000000..c791b50
--- /dev/null
+++ b/apps/admin/src/components/business/albums/AlbumCoverCard.vue
@@ -0,0 +1,206 @@
+<!-- 相册封面卡片（UI06：admin-preview 示例 02 .album 结构）
+     封面 16:9 区域 + 状态 pill + 标题/日期地点 + 底部状态行。
+     契约约束：不显示 owner 显示名（无投影、避免 N+1）；无封面用中性占位。 -->
+<template>
+  <article class="ui06-album-card" :data-test="'album-card-' + album.id">
+    <button
+      type="button"
+      class="album-cover"
+      :data-test="'album-cover-' + album.id"
+      :aria-label="titleOf(album)"
+      @click="$emit('open', album)"
+    >
+      <img v-if="album.cover?.url" :src="album.cover.url" alt="" loading="lazy" />
+      <span v-else class="cover-placeholder">
+        <ElIcon :size="26"><Picture /></ElIcon>
+      </span>
+      <span
+        class="pill"
+        :class="album.publicEnabled ? 'green' : 'gray'"
+        data-test="album-pill-public"
+      >
+        {{ album.publicEnabled ? t('albumsManage.card.public') : t('albumsManage.card.private') }}
+      </span>
+    </button>
+
+    <div class="album-info">
+      <h2>
+        <button type="button" class="title-btn" @click="$emit('open', album)">
+          {{ titleOf(album) }}
+        </button>
+      </h2>
+      <p class="meta">{{ metaLine(album) }}</p>
+      <div class="album-footer">
+        <span
+          class="pill"
+          :class="album.status === 'active' ? 'green' : 'gray'"
+          :data-test="'album-pill-status-' + album.id"
+        >
+          {{
+            album.status === 'active'
+              ? t('albumsManage.card.active')
+              : t('albumsManage.card.offline')
+          }}
+        </span>
+        <span
+          class="pill"
+          :class="album.uploadEnabled ? '' : 'gray'"
+          :data-test="'album-pill-upload-' + album.id"
+        >
+          {{
+            album.uploadEnabled
+              ? t('albumsManage.card.uploadsOn')
+              : t('albumsManage.card.uploadsOff')
+          }}
+        </span>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+  import { Picture } from '@element-plus/icons-vue'
+  import { useI18n } from 'vue-i18n'
+
+  defineOptions({ name: 'AlbumCoverCard' })
+
+  const props = defineProps<{
+    album: Api.Album.Summary
+    /** 标题解析（defaultLocale 优先，回退首条翻译） */
+    titleOf: (album: Api.Album.Summary) => string
+    /** 日期 · 地点行 */
+    metaOf?: (album: Api.Album.Summary) => string
+  }>()
+
+  defineEmits<{
+    (e: 'open', album: Api.Album.Summary): void
+  }>()
+
+  const { t } = useI18n()
+
+  function metaLine(album: Api.Album.Summary): string {
+    if (props.metaOf) return props.metaOf(album)
+    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(' · ')
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 对齐示例 .album / .album-cover / .album-info / .album-footer */
+  .ui06-album-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: #ffffff;
+    border: 1px solid #e5eaf1;
+    border-radius: 12px;
+    transition: box-shadow 0.2s;
+
+    &:hover {
+      box-shadow: 0 10px 25px #243e6710;
+    }
+  }
+
+  .album-cover {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 188px;
+    padding: 0;
+    overflow: hidden;
+    cursor: pointer;
+    background: #dce5ef; /* 示例 .art 占位底 */
+    border: 0;
+
+    img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .cover-placeholder {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: #9fb0c4;
+  }
+
+  .pill {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 8px;
+    font-size: 10px;
+    color: #5676a5;
+    letter-spacing: 0.2px;
+    background: #edf3fd;
+    border-radius: 6px;
+    white-space: nowrap;
+
+    &.green {
+      color: #188761;
+      background: #e9f7f1;
+    }
+
+    &.gray {
+      color: #8b96a7;
+      background: #f0f2f6;
+    }
+  }
+
+  .album-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    padding: 18px;
+
+    h2 {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.4;
+
+      .title-btn {
+        padding: 0;
+        font: inherit;
+        color: inherit;
+        text-align: left;
+        cursor: pointer;
+        background: none;
+        border: 0;
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    .meta {
+      margin-top: 7px;
+      margin-bottom: 14px;
+      font-size: 11px;
+      color: #7b899f;
+    }
+  }
+
+  .album-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding-top: 13px;
+    margin-top: auto;
+    border-top: 1px solid #edf1f5;
+
+    .pill {
+      position: static;
+    }
+  }
+</style>
diff --git a/apps/admin/src/components/business/albums/AlbumSummaryHeader.vue b/apps/admin/src/components/business/albums/AlbumSummaryHeader.vue
new file mode 100644
index 0000000..c1767ff
--- /dev/null
+++ b/apps/admin/src/components/business/albums/AlbumSummaryHeader.vue
@@ -0,0 +1,306 @@
+<!-- 相册详情摘要头（UI06：示例 03 .album-banner——封面 + 两列紧凑资料 + 固定主操作）
+     契约约束：不显示 owner 显示名；内部 ID / 统计时间等收进「高级信息」折叠。 -->
+<template>
+  <div class="ui06-summary card">
+    <!-- 封面 300×144（无封面中性占位） -->
+    <div class="cover" data-test="album-summary-cover">
+      <img v-if="album.cover?.url" :src="album.cover.url" alt="" />
+      <span v-else class="cover-placeholder">
+        <ElIcon :size="26"><Picture /></ElIcon>
+      </span>
+    </div>
+
+    <!-- 两列紧凑资料（示例 .info-columns .meta-item） -->
+    <div class="info-columns">
+      <div class="meta-item">
+        <ElIcon><Calendar /></ElIcon>
+        <div>
+          <strong>{{ dateRange }}</strong>
+          <p>{{ $t('albumsManage.summary.eventTimezone', { tz: album.timezone }) }}</p>
+        </div>
+      </div>
+      <div class="meta-item">
+        <ElIcon><Location /></ElIcon>
+        <div>
+          <strong>{{ venue || $t('albumsManage.summary.venueUnset') }}</strong>
+          <p>{{ $t('albumsManage.summary.venueLabel') }}</p>
+        </div>
+      </div>
+      <div class="meta-item">
+        <ElIcon><Promotion /></ElIcon>
+        <div>
+          <strong>
+            {{
+              album.publicEnabled
+                ? $t('albumsManage.summary.publicOn')
+                : $t('albumsManage.summary.publicOff')
+            }}
+          </strong>
+          <p>
+            {{
+              album.uploadEnabled
+                ? $t('albumsManage.summary.uploadOn')
+                : $t('albumsManage.summary.uploadOff')
+            }}
+          </p>
+        </div>
+      </div>
+      <div class="meta-item">
+        <ElIcon><Link /></ElIcon>
+        <div>
+          <strong>
+            <span class="token" data-test="album-detail-token">{{ album.publicToken }}</span>
+            <ElButton link type="primary" size="small" @click="copyToken">
+              <ElIcon><CopyDocument /></ElIcon>
+            </ElButton>
+          </strong>
+          <p>
+            <ElTag size="small" :type="album.status === 'active' ? 'success' : 'info'">
+              {{
+                album.status === 'active'
+                  ? $t('albumsManage.card.active')
+                  : $t('albumsManage.card.offline')
+              }}
+            </ElTag>
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 高级信息折叠（内部 ID / 同步统计；默认收起） -->
+  <ElCollapse class="ui06-advanced">
+    <ElCollapseItem :title="$t('albumsManage.summary.advanced')" name="advanced">
+      <div class="advanced-grid">
+        <span
+          >{{ $t('albumsManage.detail.fieldOwnerId') }}：<span data-test="album-detail-owner-id">{{
+            album.ownerId
+          }}</span></span
+        >
+        <span>
+          {{ $t('albumsManage.detail.fieldStatsSyncedAt') }}：
+          <span data-test="album-detail-stats-synced-at">{{
+            album.statsSyncedAt
+              ? formatDateTime(album.statsSyncedAt)
+              : $t('albumsManage.detail.statsNotSynced')
+          }}</span>
+        </span>
+        <span
+          >{{ $t('albumsManage.detail.fieldCreatedAt') }}：{{
+            formatDateTime(album.createdAt)
+          }}</span
+        >
+        <span
+          >{{ $t('albumsManage.detail.fieldUpdatedAt') }}：{{
+            formatDateTime(album.updatedAt)
+          }}</span
+        >
+        <span>
+          {{ $t('albumsManage.detail.fieldSwitches') }}：
+          <ElTag
+            v-for="sw in switchTags"
+            :key="sw.key"
+            size="small"
+            :type="sw.on ? 'success' : 'info'"
+            :effect="sw.on ? 'light' : 'plain'"
+          >
+            {{ sw.label }} {{ sw.on ? onLabel : offLabel }}
+          </ElTag>
+        </span>
+      </div>
+    </ElCollapseItem>
+  </ElCollapse>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import {
+    Calendar,
+    Location,
+    Promotion,
+    Link,
+    CopyDocument,
+    Picture
+  } from '@element-plus/icons-vue'
+  import { ElMessage } from 'element-plus'
+  import { formatDateTime } from '@/utils/albums/format'
+
+  defineOptions({ name: 'AlbumSummaryHeader' })
+
+  const props = defineProps<{
+    album: Api.Album.Summary
+  }>()
+
+  const { t } = useI18n()
+
+  const dateRange = computed(() => {
+    const start = props.album.startAt?.slice(0, 10) ?? ''
+    const end = props.album.endAt?.slice(0, 10)
+    return end ? `${start} – ${end}` : start
+  })
+
+  const venue = computed(
+    () => props.album.translations.find((x) => x.locale === props.album.defaultLocale)?.venue ?? ''
+  )
+
+  const onLabel = computed(() => t('albumsManage.list.on'))
+  const offLabel = computed(() => t('albumsManage.list.off'))
+
+  const switchTags = computed(() => [
+    { key: 'upload', on: props.album.uploadEnabled, label: t('albumsManage.list.switchUpload') },
+    { key: 'public', on: props.album.publicEnabled, label: t('albumsManage.list.switchPublic') },
+    {
+      key: 'download',
+      on: props.album.downloadEnabled,
+      label: t('albumsManage.list.switchDownload')
+    },
+    {
+      key: 'original',
+      on: props.album.originalDownloadEnabled,
+      label: t('albumsManage.list.switchOriginal')
+    }
+  ])
+
+  async function copyToken() {
+    await navigator.clipboard.writeText(props.album.publicToken)
+    ElMessage.success(t('albumsManage.list.copied'))
+  }
+</script>
+
+<style lang="scss" scoped>
+  @reference '@styles/core/tailwind.css';
+
+  /* 对齐示例 .album-banner / .info-columns / .meta-item */
+  .ui06-summary {
+    display: flex;
+    gap: 26px;
+    align-items: center;
+    padding: 14px;
+  }
+
+  .card {
+    background: #ffffff;
+    border: 1px solid #e5eaf1;
+    border-radius: 12px;
+  }
+
+  .cover {
+    position: relative;
+    flex: none;
+    width: 300px;
+    height: 144px;
+    overflow: hidden;
+    background: #dce5ef;
+    border-radius: 8px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .cover-placeholder {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: #9fb0c4;
+  }
+
+  .info-columns {
+    display: grid;
+    flex: 1;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px 20px;
+  }
+
+  .meta-item {
+    display: flex;
+    gap: 11px;
+    align-items: flex-start;
+    color: #7e8fa7;
+
+    .el-icon {
+      margin-top: 2px;
+      color: #9fb0c4;
+    }
+
+    strong {
+      display: block;
+      margin-bottom: 3px;
+      font-size: 12px;
+      font-weight: 550;
+      color: #35455e;
+
+      .token {
+        font-family: ui-monospace, Consolas, monospace;
+        font-size: 11px;
+      }
+    }
+
+    p {
+      font-size: 11px;
+    }
+  }
+
+  .ui06-advanced {
+    margin-top: 14px;
+    border: 0;
+
+    :deep(.el-collapse-item__header) {
+      font-size: 12px;
+      color: #7b899f;
+      background: transparent;
+      border: 0;
+    }
+
+    :deep(.el-collapse-item__wrap) {
+      background: transparent;
+      border: 0;
+    }
+
+    .advanced-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      font-size: 12px;
+      color: #52617a;
+    }
+  }
+
+  @media (max-width: 900px) {
+    .ui06-summary {
+      align-items: flex-start;
+      gap: 15px;
+    }
+
+    .cover {
+      width: 180px;
+      height: 150px;
+    }
+
+    .info-columns {
+      grid-template-columns: 1fr;
+      gap: 14px;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .ui06-summary {
+      display: block;
+    }
+
+    .cover {
+      width: 100%;
+      height: 140px;
+      margin-bottom: 15px;
+    }
+
+    .info-columns {
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+  }
+</style>
diff --git a/apps/admin/src/components/business/albums/PhotoGrid.vue b/apps/admin/src/components/business/albums/PhotoGrid.vue
new file mode 100644
index 0000000..acd25d8
--- /dev/null
+++ b/apps/admin/src/components/business/albums/PhotoGrid.vue
@@ -0,0 +1,271 @@
+<!-- 照片网格（UI06：示例 03 .photo-grid——四列、缩略图、选择框、状态角标、说明行）
+     契约：缩略图用 AdminPhoto.preview.thumb 签名 URL（可空=无预览占位）；
+     仅 published 可勾选（批量隐藏前置）；无原文件名字段，回退显示 photoId 短码。 -->
+<template>
+  <div class="ui06-photo-grid" data-test="photo-grid">
+    <article v-for="photo in photos" :key="photo.photoId" class="photo-item">
+      <div class="photo-image" :class="{ selected: selectedIds.has(photo.photoId) }">
+        <button
+          type="button"
+          class="photo-open"
+          :aria-label="t('albumsManage.photosGrid.openAria')"
+          @click="$emit('open', photo)"
+        >
+          <img
+            v-if="photo.preview?.thumb?.url"
+            :src="photo.preview.thumb.url"
+            alt=""
+            loading="lazy"
+          />
+          <span v-else class="thumb-placeholder">
+            <ElIcon :size="22"><Picture /></ElIcon>
+            <span>{{ noPreviewLabel(photo) }}</span>
+          </span>
+        </button>
+        <input
+          class="photo-check"
+          type="checkbox"
+          :checked="selectedIds.has(photo.photoId)"
+          :disabled="photo.visibility !== 'published'"
+          :aria-label="t('albumsManage.photosGrid.selectAria')"
+          :data-test="`photo-check-${photo.photoId}`"
+          @change="$emit('toggle', photo.photoId)"
+        />
+        <span class="pill" :class="pillClass(photo.visibility)">
+          {{ t(`albumsManage.photos.visibility${pascal(photo.visibility)}`) }}
+        </span>
+      </div>
+      <div class="photo-caption">
+        <div class="caption-text">
+          <strong class="mono">{{ photo.photoId.slice(-8) }}</strong>
+          <p>{{ uploaderOf(photo) }} · {{ formatDate(photo.uploadedAt) }}</p>
+        </div>
+        <button
+          type="button"
+          class="caption-more"
+          :aria-label="t('albumsManage.photosGrid.openAria')"
+          @click="$emit('open', photo)"
+        >
+          <ElIcon><MoreFilled /></ElIcon>
+        </button>
+      </div>
+    </article>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n'
+  import { Picture, MoreFilled } from '@element-plus/icons-vue'
+
+  defineOptions({ name: 'PhotoGrid' })
+
+  defineProps<{
+    photos: Api.Album.AdminPhoto[]
+    selectedIds: Set<string>
+  }>()
+
+  defineEmits<{
+    (e: 'open', photo: Api.Album.AdminPhoto): void
+    (e: 'toggle', photoId: string): void
+  }>()
+
+  const { t } = useI18n()
+
+  function pascal(value: string): string {
+    return value
+      .split('_')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('')
+  }
+
+  function pillClass(visibility: Api.Album.PhotoVisibility): string {
+    switch (visibility) {
+      case 'published':
+        return 'green'
+      case 'hidden':
+        return 'amber'
+      case 'deleted':
+        return 'red'
+      default:
+        return 'gray'
+    }
+  }
+
+  function uploaderOf(photo: Api.Album.AdminPhoto): string {
+    return photo.uploader.displayName || photo.uploader.account
+  }
+
+  function formatDate(value: string): string {
+    return value.slice(0, 10)
+  }
+
+  function noPreviewLabel(photo: Api.Album.AdminPhoto): string {
+    if (photo.processingState === 'processing' || photo.processingState === 'pending_upload') {
+      return t('albumsManage.photos.stateProcessing')
+    }
+    if (photo.processingState === 'processing_failed') {
+      return t('albumsManage.photos.stateProcessingFailed')
+    }
+    return t('albumsManage.photosGrid.noPreview')
+  }
+</script>
+
+<style lang="scss" scoped>
+  /* 对齐示例 .photo-grid / .photo-item / .photo-image / .photo-caption */
+  .ui06-photo-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 20px 16px;
+  }
+
+  .photo-item {
+    min-width: 0;
+  }
+
+  .photo-image {
+    position: relative;
+    aspect-ratio: 1.65;
+    overflow: hidden;
+    background: #dce6ef;
+    border: 2px solid transparent;
+    border-radius: 8px;
+  }
+
+  .photo-open {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    cursor: pointer;
+    background: none;
+    border: 0;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .thumb-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: #7e93ab;
+  }
+
+  .photo-image.selected {
+    border-color: var(--el-color-primary);
+  }
+
+  .photo-check {
+    position: absolute;
+    top: 9px;
+    left: 9px;
+    z-index: 2;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--el-color-primary);
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.35;
+    }
+  }
+
+  .pill {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    padding: 3px 7px;
+    font-size: 10px;
+    color: #5676a5;
+    background: #edf3fdcc;
+    border-radius: 6px;
+    backdrop-filter: blur(2px);
+
+    &.green {
+      color: #188761;
+      background: #e9f7f1dd;
+    }
+
+    &.amber {
+      color: #ae7c27;
+      background: #fff5e5dd;
+    }
+
+    &.red {
+      color: #d75168;
+      background: #fceef1dd;
+    }
+
+    &.gray {
+      color: #8b96a7;
+      background: #f0f2f6dd;
+    }
+  }
+
+  .photo-caption {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 9px 2px 0;
+
+    .caption-text {
+      min-width: 0;
+
+      strong {
+        font-size: 11px;
+        font-weight: 550;
+      }
+
+      p {
+        margin-top: 3px;
+        font-size: 10px;
+        color: #8a97ac;
+      }
+    }
+
+    .caption-more {
+      flex: none;
+      padding: 4px;
+      cursor: pointer;
+      color: #8a97ac;
+      background: none;
+      border: 0;
+      border-radius: 6px;
+
+      &:hover {
+        color: var(--el-color-primary);
+        background: #edf3fd;
+      }
+    }
+  }
+
+  .mono {
+    font-family: ui-monospace, Consolas, monospace;
+  }
+
+  @media (max-width: 1200px) {
+    .ui06-photo-grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 640px) {
+    .ui06-photo-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 14px 8px;
+    }
+
+    .photo-image {
+      aspect-ratio: 1.2;
+    }
+  }
+</style>
diff --git a/apps/admin/src/components/business/albums/PhotoPreviewDialog.vue b/apps/admin/src/components/business/albums/PhotoPreviewDialog.vue
new file mode 100644
index 0000000..daab848
--- /dev/null
+++ b/apps/admin/src/components/business/albums/PhotoPreviewDialog.vue
@@ -0,0 +1,293 @@
+<!-- 管理照片大图（UI06：示例 16 .viewer-dialog——深色舞台 + 右侧信息栏 + 行内动作）
+     契约：browse 签名 URL 可空（无预览/处理中/无权限真实空态）；动作语义与表格一致。 -->
+<template>
+  <ElDialog
+    :model-value="visible"
+    :show-close="false"
+    width="1050px"
+    class="ui06-viewer-dialog"
+    data-test="photo-viewer-dialog"
+    @update:model-value="$emit('close')"
+  >
+    <div v-if="photo" class="viewer-body">
+      <!-- 深色舞台 -->
+      <div class="viewer-main">
+        <img v-if="photo.preview?.browse?.url" :src="photo.preview.browse.url" alt="" />
+        <div v-else class="viewer-empty">
+          <ElIcon :size="34"><Picture /></ElIcon>
+          <span>{{ emptyLabel }}</span>
+        </div>
+        <button
+          type="button"
+          class="viewer-close"
+          :aria-label="t('common.close')"
+          @click="$emit('close')"
+        >
+          <ElIcon :size="20"><Close /></ElIcon>
+        </button>
+      </div>
+
+      <!-- 信息栏 -->
+      <div class="viewer-info">
+        <div class="info-row">
+          <span class="label">{{ t('albumsManage.photos.colVisibility') }}</span>
+          <ElTag size="small" :type="visibilityTagType" effect="light">
+            {{ t(`albumsManage.photos.visibility${pascal(photo.visibility)}`) }}
+          </ElTag>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ t('albumsManage.photos.colState') }}</span>
+          <ElTag size="small" :type="stateTagType" effect="light">
+            {{ t(`albumsManage.photos.state${pascal(photo.processingState)}`) }}
+          </ElTag>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ t('albumsManage.photosGrid.uploader') }}</span>
+          <span>{{ photo.uploader.displayName || photo.uploader.account }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ t('albumsManage.photos.colUploadedAt') }}</span>
+          <span>{{ formatDateTime(photo.uploadedAt) }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ t('albumsManage.photos.colSize') }}</span>
+          <span>
+            {{ photo.width && photo.height ? `${photo.width}×${photo.height}` : '—' }}
+            · {{ formatBytes(photo.bytes) }}
+          </span>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ t('albumsManage.photos.colLikeCount') }}</span>
+          <span>{{ photo.likeCount }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">ID</span>
+          <span class="mono break-all">{{ photo.photoId }}</span>
+        </div>
+
+        <div class="actions">
+          <ElButton
+            v-if="photo.visibility === 'published'"
+            class="action-btn"
+            data-test="viewer-hide-btn"
+            @click="$emit('hide', photo)"
+          >
+            {{ t('albumsManage.photos.hide') }}
+          </ElButton>
+          <ElButton
+            v-if="photo.visibility === 'hidden'"
+            class="action-btn"
+            data-test="viewer-restore-btn"
+            @click="$emit('restore', photo)"
+          >
+            {{ t('albumsManage.photos.restore') }}
+          </ElButton>
+          <ElButton
+            v-if="photo.visibility !== 'deleted'"
+            class="action-btn danger"
+            data-test="viewer-delete-btn"
+            @click="$emit('remove', photo)"
+          >
+            {{ t('albumsManage.photos.delete') }}
+          </ElButton>
+        </div>
+      </div>
+    </div>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { Picture, Close } from '@element-plus/icons-vue'
+  import { formatBytes, formatDateTime } from '@/utils/albums/format'
+
+  defineOptions({ name: 'PhotoPreviewDialog' })
+
+  const props = defineProps<{
+    visible: boolean
+    photo: Api.Album.AdminPhoto | null
+  }>()
+
+  defineEmits<{
+    (e: 'close'): void
+    (e: 'hide', photo: Api.Album.AdminPhoto): void
+    (e: 'restore', photo: Api.Album.AdminPhoto): void
+    (e: 'remove', photo: Api.Album.AdminPhoto): void
+  }>()
+
+  const { t } = useI18n()
+
+  function pascal(value: string): string {
+    return value
+      .split('_')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('')
+  }
+
+  const visibilityTagType = computed(() => {
+    switch (props.photo?.visibility) {
+      case 'published':
+        return 'success'
+      case 'hidden':
+        return 'warning'
+      case 'deleted':
+        return 'danger'
+      default:
+        return 'info'
+    }
+  })
+
+  const stateTagType = computed(() => {
+    switch (props.photo?.processingState) {
+      case 'ready':
+        return 'success'
+      case 'processing':
+        return 'warning'
+      case 'processing_failed':
+        return 'danger'
+      default:
+        return 'info'
+    }
+  })
+
+  const emptyLabel = computed(() => {
+    if (!props.photo) return ''
+    if (
+      props.photo.processingState === 'processing' ||
+      props.photo.processingState === 'pending_upload'
+    ) {
+      return t('albumsManage.photos.stateProcessing')
+    }
+    if (props.photo.processingState === 'processing_failed') {
+      return t('albumsManage.photos.stateProcessingFailed')
+    }
+    return t('albumsManage.photosGrid.noPreview')
+  })
+</script>
+
+<style lang="scss" scoped>
+  /* 对齐示例 .viewer-dialog / .viewer-main / .viewer-info */
+  .viewer-body {
+    display: flex;
+    overflow: hidden;
+    background: #111925;
+    border-radius: 16px;
+  }
+
+  .viewer-main {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: 520px;
+
+    img {
+      width: 85%;
+      max-height: 640px;
+      object-fit: contain;
+    }
+  }
+
+  .viewer-empty {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    color: #5c6c80;
+  }
+
+  .viewer-close {
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 3;
+    padding: 8px;
+    cursor: pointer;
+    color: #ffffff;
+    background: #ffffff1a;
+    border: 0;
+    border-radius: 50%;
+
+    &:hover {
+      background: #ffffff33;
+    }
+  }
+
+  .viewer-info {
+    flex: none;
+    width: 270px;
+    padding: 25px;
+    background: #17212f;
+
+    .info-row {
+      display: flex;
+      gap: 10px;
+      align-items: baseline;
+      justify-content: space-between;
+      margin-bottom: 13px;
+      font-size: 12px;
+      color: #d5dcea;
+
+      .label {
+        flex: none;
+        color: #a2afc1;
+      }
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-top: 18px;
+      padding-top: 16px;
+      border-top: 1px solid #263243;
+
+      .action-btn {
+        width: 100%;
+        color: #d5dcea;
+        background: transparent;
+        border: 1px solid #3a4a61;
+
+        &:hover {
+          color: #ffffff;
+          background: #223145;
+          border-color: #4a5d7a;
+        }
+
+        &.danger {
+          color: #ff9aa5;
+
+          &:hover {
+            color: #ffb3bb;
+            background: #3a2230;
+            border-color: #7a3a4a;
+          }
+        }
+      }
+    }
+  }
+
+  .mono {
+    font-family: ui-monospace, Consolas, monospace;
+    font-size: 11px;
+  }
+
+  @media (max-width: 640px) {
+    .viewer-body {
+      flex-direction: column;
+      max-height: 90vh;
+      overflow: auto;
+    }
+
+    .viewer-main {
+      min-height: 250px;
+    }
+
+    .viewer-info {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/apps/admin/src/locales/langs/en.json b/apps/admin/src/locales/langs/en.json
index 68f84d5..2045a58 100644
--- a/apps/admin/src/locales/langs/en.json
+++ b/apps/admin/src/locales/langs/en.json
@@ -304,7 +304,17 @@
       "actionEdit": "Edit",
       "actionMembers": "Members",
       "actionDetail": "Detail",
-      "endAtUndecided": "TBD"
+      "endAtUndecided": "TBD",
+      "subtitle": "A clear view of every event and the team behind it.",
+      "searchPlaceholder": "Search loaded albums",
+      "statusAll": "All access states",
+      "statusPublicOnly": "Public",
+      "statusPrivateOnly": "Private",
+      "viewGrid": "Card view",
+      "viewTable": "Table view",
+      "loadedCount": "{n} albums loaded",
+      "cursorNote": "Sorted by creation time · cursor-based loading",
+      "emptyFiltered": "No albums match these filters"
     },
     "form": {
       "createTitle": "New Album",
@@ -359,7 +369,9 @@
       "fieldUpdatedAt": "Updated",
       "fieldStatsSyncedAt": "Stats Synced At",
       "statsNotSynced": "Not synced yet",
-      "fieldOwnerId": "Owner"
+      "fieldOwnerId": "Owner",
+      "subtitle": "Album workspace · Manage the moments that matter",
+      "share": "Share album"
     },
     "banner": {
       "kind": "Asset Kind",
@@ -457,7 +469,10 @@
       "batchResultAllOk": "Batch hide finished: {ok} succeeded",
       "batchFailuresTitle": "Failures (per item)",
       "batchColPhoto": "Photo ID",
-      "batchColReason": "Reason"
+      "batchColReason": "Reason",
+      "view": "Details",
+      "selectedCount": "{n} selected",
+      "onlyPublicSelectable": "Only published photos can be selected"
     },
     "transfer": {
       "entry": "Transfer Owner",
@@ -514,6 +529,31 @@
       "hint": "Guests open the public album page via this link; it stops working when \"Publicly visible\" is off.",
       "qrTitle": "Scan to open",
       "publicOffHint": "\"Publicly visible\" is off for this album — the viewer link is currently unreachable"
+    },
+    "card": {
+      "public": "Public",
+      "private": "Private",
+      "active": "Active",
+      "offline": "Offline",
+      "uploadsOn": "Uploads on",
+      "uploadsOff": "Uploads off"
+    },
+    "summary": {
+      "eventTimezone": "Event time · {tz}",
+      "venueUnset": "Venue unset",
+      "venueLabel": "Event venue",
+      "publicOn": "Public access on",
+      "publicOff": "Public access off",
+      "uploadOn": "Staff uploads enabled",
+      "uploadOff": "Staff uploads disabled",
+      "advanced": "Advanced info"
+    },
+    "photosGrid": {
+      "openAria": "View photo",
+      "selectAria": "Select photo",
+      "noPreview": "No preview",
+      "uploader": "Uploader",
+      "filterAll": "All photos"
     }
   },
   "usage": {
diff --git a/apps/admin/src/locales/langs/zh.json b/apps/admin/src/locales/langs/zh.json
index eae1b1e..a0ad549 100644
--- a/apps/admin/src/locales/langs/zh.json
+++ b/apps/admin/src/locales/langs/zh.json
@@ -304,7 +304,17 @@
       "actionEdit": "编辑",
       "actionMembers": "成员",
       "actionDetail": "详情",
-      "endAtUndecided": "未定"
+      "endAtUndecided": "未定",
+      "subtitle": "以活动为中心，管理相册、团队和每一张照片。",
+      "searchPlaceholder": "搜索当前已加载相册",
+      "statusAll": "全部公开状态",
+      "statusPublicOnly": "公开",
+      "statusPrivateOnly": "未公开",
+      "viewGrid": "卡片视图",
+      "viewTable": "表格视图",
+      "loadedCount": "已加载 {n} 个相册",
+      "cursorNote": "按创建时间排序 · 游标加载",
+      "emptyFiltered": "没有符合筛选条件的相册"
     },
     "form": {
       "createTitle": "新建相册",
@@ -359,7 +369,9 @@
       "fieldUpdatedAt": "更新时间",
       "fieldStatsSyncedAt": "统计同步时间",
       "statsNotSynced": "尚无回传",
-      "fieldOwnerId": "负责人"
+      "fieldOwnerId": "负责人",
+      "subtitle": "相册工作区 · 管理活动中的精彩瞬间",
+      "share": "分享相册"
     },
     "banner": {
       "kind": "资产类型",
@@ -457,7 +469,10 @@
       "batchResultAllOk": "批量隐藏完成：成功 {ok} 张",
       "batchFailuresTitle": "失败明细（逐项原因）",
       "batchColPhoto": "照片 ID",
-      "batchColReason": "原因"
+      "batchColReason": "原因",
+      "view": "详情",
+      "selectedCount": "{n} 张已选",
+      "onlyPublicSelectable": "仅已公开照片可批量选择"
     },
     "transfer": {
       "entry": "负责人交接",
@@ -514,6 +529,31 @@
       "hint": "观众经此链接访问相册公开页；关闭「公开可见」开关后链接失效。",
       "qrTitle": "扫码打开",
       "publicOffHint": "该相册已关闭「公开可见」，观众端链接当前不可访问"
+    },
+    "card": {
+      "public": "公开",
+      "private": "未公开",
+      "active": "进行中",
+      "offline": "已下线",
+      "uploadsOn": "可上传",
+      "uploadsOff": "上传关闭"
+    },
+    "summary": {
+      "eventTimezone": "活动时间 · {tz}",
+      "venueUnset": "未设置地点",
+      "venueLabel": "活动地点",
+      "publicOn": "允许公开访问",
+      "publicOff": "公开访问关闭",
+      "uploadOn": "工作人员上传已开启",
+      "uploadOff": "工作人员上传已关闭",
+      "advanced": "高级信息"
+    },
+    "photosGrid": {
+      "openAria": "查看照片",
+      "selectAria": "选择照片",
+      "noPreview": "无预览",
+      "uploader": "上传者",
+      "filterAll": "全部照片"
     }
   },
   "usage": {
diff --git a/apps/admin/src/types/api/album.d.ts b/apps/admin/src/types/api/album.d.ts
index 6f69714..74e8a26 100644
--- a/apps/admin/src/types/api/album.d.ts
+++ b/apps/admin/src/types/api/album.d.ts
@@ -26,6 +26,12 @@ declare namespace Api {
       address?: string | null
     }
 
+    /** 短期签名 URL 摘要（900s 量级过期；过期经受控重取） */
+    interface SignedUrl {
+      url: string
+      expiresAt: string
+    }
+
     /** 相册列表条目（完整开关与多语言标题） */
     interface Summary {
       id: string
@@ -46,6 +52,8 @@ declare namespace Api {
       updatedAt: string
       /** 统计副本最近同步时间（P2 A27 ov→cn 快照应用时刻；null=尚无回传） */
       statsSyncedAt: string | null
+      /** 封面签名 URL 摘要（UI06；契约已有、服务端已返回；可空=无封面，用中性占位） */
+      cover: SignedUrl | null
     }
 
     /** 分类（相册详情内嵌，按 sortOrder 升序） */
@@ -203,6 +211,11 @@ declare namespace Api {
         account: string
         displayName: string
       }
+      /** 管理预览签名 URL（UI06；契约 AdminPhoto.preview，服务端已返回；隐藏照仅 admin/owner 签发；可空=无预览/处理中） */
+      preview: {
+        thumb: SignedUrl | null
+        browse: SignedUrl | null
+      } | null
     }
 
     /** 管理照片列表响应（游标分页） */
diff --git a/apps/admin/src/utils/albums/batchHide.spec.ts b/apps/admin/src/utils/albums/batchHide.spec.ts
index 1bb31b5..c39a01b 100644
--- a/apps/admin/src/utils/albums/batchHide.spec.ts
+++ b/apps/admin/src/utils/albums/batchHide.spec.ts
@@ -17,7 +17,8 @@ function photoOf(photoId: string): Api.Album.AdminPhoto {
     uploadedAt: '2026-09-01T00:00:00.000Z',
     publishedAt: '2026-09-01T00:00:00.000Z',
     likeCount: 0,
-    uploader: { userId: 'u1', account: 'staff', displayName: 'Staff' }
+    uploader: { userId: 'u1', account: 'staff', displayName: 'Staff' },
+    preview: null
   }
 }
 
diff --git a/apps/admin/src/views/albums/detail/AlbumPhotos.vue b/apps/admin/src/views/albums/detail/AlbumPhotos.vue
index 85f913e..7607938 100644
--- a/apps/admin/src/views/albums/detail/AlbumPhotos.vue
+++ b/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>
diff --git a/apps/admin/src/views/albums/detail/index.vue b/apps/admin/src/views/albums/detail/index.vue
index d6053ec..df34d87 100644
--- a/apps/admin/src/views/albums/detail/index.vue
+++ b/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>
diff --git a/apps/admin/src/views/albums/manage/index.vue b/apps/admin/src/views/albums/manage/index.vue
index 380c753..4ed5766 100644
--- a/apps/admin/src/views/albums/manage/index.vue
+++ b/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>