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>
This commit is contained in:
浅念
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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": {
|
||||
|
||||
@@ -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": {
|
||||
|
||||
Vendored
+13
@@ -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
|
||||
}
|
||||
|
||||
/** 管理照片列表响应（游标分页） */
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user