feat(admin): album management pages with members and categories
Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -0,0 +1,206 @@
|
||||
<!-- 相册详情：基础信息 + banner 上传 + 照片/成员/分类管理页签（P1b Task 10）。
|
||||
路由 /albums/detail/:albumId（isHide，不进菜单）。 -->
|
||||
<template>
|
||||
<div class="p-5">
|
||||
<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>
|
||||
<ElButton size="small" data-test="album-detail-retry" @click="load">
|
||||
{{ $t('albumsManage.detail.retry') }}
|
||||
</ElButton>
|
||||
</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">
|
||||
<ElIcon><ArrowLeft /></ElIcon>
|
||||
</ElButton>
|
||||
<span class="font-medium">{{ titleOf(album) }}</span>
|
||||
<ElTag size="small" type="info">{{ album?.defaultLocale }}</ElTag>
|
||||
</div>
|
||||
<ElButton type="primary" plain data-test="album-detail-edit" @click="editVisible = true">
|
||||
{{ $t('albumsManage.detail.edit') }}
|
||||
</ElButton>
|
||||
</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>
|
||||
</ElDescriptions>
|
||||
|
||||
<div v-if="album" class="mt-5">
|
||||
<AlbumBannerUpload :album-id="albumId" />
|
||||
</div>
|
||||
|
||||
<ElTabs v-if="album" v-model="activeTab" class="mt-4" data-test="album-detail-tabs">
|
||||
<!-- 页签头由 ElTabs 自动生成（pane 上的 attr 只落在隐藏面板上）：
|
||||
data-test 经 #label 插槽挂到头部文案，供 e2e 点击 -->
|
||||
<ElTabPane name="photos">
|
||||
<template #label>
|
||||
<span data-test="album-photos-tab">{{ $t('albumsManage.detail.tabPhotos') }}</span>
|
||||
</template>
|
||||
<AlbumPhotos :album="album" />
|
||||
</ElTabPane>
|
||||
<ElTabPane name="members">
|
||||
<template #label>
|
||||
<span data-test="album-members-tab">{{ $t('albumsManage.detail.tabMembers') }}</span>
|
||||
</template>
|
||||
<AlbumMembers :album="album" />
|
||||
</ElTabPane>
|
||||
<ElTabPane name="categories">
|
||||
<template #label>
|
||||
<span data-test="album-categories-tab">
|
||||
{{ $t('albumsManage.detail.tabCategories') }}
|
||||
</span>
|
||||
</template>
|
||||
<AlbumCategories :album="album" @changed="load" />
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</ElCard>
|
||||
|
||||
<AlbumFormDialog v-if="album" v-model="editVisible" :album="album" @saved="onAlbumSaved" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 AlbumFormDialog from '@/views/albums/manage/AlbumFormDialog.vue'
|
||||
import AlbumBannerUpload from './AlbumBannerUpload.vue'
|
||||
import AlbumMembers from './AlbumMembers.vue'
|
||||
import AlbumCategories from './AlbumCategories.vue'
|
||||
import AlbumPhotos from './AlbumPhotos.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 ?? ''))
|
||||
|
||||
const album = ref<Api.Album.Detail | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref<Error | null>(null)
|
||||
const editVisible = ref(false)
|
||||
const activeTab = ref('photos')
|
||||
|
||||
async function load() {
|
||||
if (!albumId.value) return
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
album.value = await fetchAlbum(albumId.value)
|
||||
} catch (e) {
|
||||
error.value = e as Error
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onAlbumSaved(saved: Api.Album.Detail) {
|
||||
album.value = saved
|
||||
}
|
||||
|
||||
function titleOf(target: Api.Album.Detail | null): string {
|
||||
if (!target) return ''
|
||||
const preferred = target.translations.find((item) => item.locale === target.defaultLocale)
|
||||
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,
|
||||
(hash) => {
|
||||
if (hash === '#members') activeTab.value = 'members'
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(albumId, () => {
|
||||
if (route.name === 'AlbumsDetail') load()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user