273 lines
9.6 KiB
Vue
273 lines
9.6 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
summary: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
pending: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['refresh'])
|
|
|
|
/**
|
|
* 사이트 용량 숫자를 쉼표 포함 문자열로 변환한다.
|
|
* @param {number} value - 숫자 값
|
|
* @returns {string} 숫자 라벨
|
|
*/
|
|
const formatBackupNumber = (value) => Number(value || 0).toLocaleString()
|
|
|
|
/**
|
|
* 사이트 용량 바이트를 읽기 쉬운 문자열로 변환한다.
|
|
* @param {number} value - 바이트 값
|
|
* @returns {string} 용량 라벨
|
|
*/
|
|
const formatBackupSize = (value) => {
|
|
const bytes = Number(value || 0)
|
|
|
|
if (!bytes) {
|
|
return '0 B'
|
|
}
|
|
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB']
|
|
let size = bytes
|
|
let unitIndex = 0
|
|
|
|
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
size /= 1024
|
|
unitIndex += 1
|
|
}
|
|
|
|
return `${size.toFixed(size >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`
|
|
}
|
|
|
|
/**
|
|
* 사이트 용량 기준 시각을 표시한다.
|
|
* @param {string} value - ISO 날짜 문자열
|
|
* @returns {string} 날짜 라벨
|
|
*/
|
|
const formatBackupGeneratedAt = (value) => {
|
|
if (!value) {
|
|
return '집계 대기'
|
|
}
|
|
|
|
return new Intl.DateTimeFormat('ko-KR', {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short'
|
|
}).format(new Date(value))
|
|
}
|
|
|
|
/**
|
|
* 사이트 용량 콘텐츠 지표 목록
|
|
* @returns {Array<{ label: string, value: string, helper: string }>} 콘텐츠 지표
|
|
*/
|
|
const contentMetrics = computed(() => {
|
|
const content = props.summary?.content || {}
|
|
const posts = content.posts || {}
|
|
const pages = content.pages || {}
|
|
const tags = content.tags || {}
|
|
const comments = content.comments || {}
|
|
const members = content.members || {}
|
|
|
|
return [
|
|
{
|
|
label: '게시글',
|
|
value: `${formatBackupNumber(posts.total)}개`,
|
|
helper: `공개 ${formatBackupNumber(posts.published)} · 비공개 ${formatBackupNumber(posts.private)} · 초안 ${formatBackupNumber(posts.draft)} · 회원 ${formatBackupNumber(posts.members)}`
|
|
},
|
|
{
|
|
label: '페이지',
|
|
value: `${formatBackupNumber(pages.total)}개`,
|
|
helper: `공개 ${formatBackupNumber(pages.published)} · 목록 ${formatBackupNumber(pages.listed)} · 추천 ${formatBackupNumber(pages.featured)}`
|
|
},
|
|
{
|
|
label: '태그',
|
|
value: `${formatBackupNumber(tags.total)}개`,
|
|
helper: `사용 중 ${formatBackupNumber(tags.used)} · 관리 ${formatBackupNumber(tags.managed)} · 일반 ${formatBackupNumber(tags.general)}`
|
|
},
|
|
{
|
|
label: '댓글',
|
|
value: `${formatBackupNumber(comments.total)}개`,
|
|
helper: `공개 ${formatBackupNumber(comments.published)} · 대기 ${formatBackupNumber(comments.pending)} · 차단 ${formatBackupNumber(comments.blocked)}`
|
|
},
|
|
{
|
|
label: '회원',
|
|
value: `${formatBackupNumber(members.total)}명`,
|
|
helper: `소유자 ${formatBackupNumber(members.owner)} · 관리자 ${formatBackupNumber(members.admin)} · 회원 ${formatBackupNumber(members.member)}`
|
|
}
|
|
]
|
|
})
|
|
|
|
/**
|
|
* 사이트 용량 저장소 행 값을 포맷한다.
|
|
* @param {number} count - 파일 개수
|
|
* @param {number} sizeBytes - 파일 용량
|
|
* @returns {string} 개수·용량 라벨
|
|
*/
|
|
const formatBackupStatValue = (count, sizeBytes) => `${formatBackupNumber(count)}개 · ${formatBackupSize(sizeBytes)}`
|
|
|
|
/**
|
|
* 사이트 용량 저장소 섹션 목록
|
|
* @returns {{ imageRows: Array<{ label: string, value: string, child?: boolean }>, mainRows: Array<{ label: string, value: string }>, totalRow: { label: string, value: string } }} 저장소 섹션
|
|
*/
|
|
const storageSections = computed(() => {
|
|
const storage = props.summary?.storage || {}
|
|
const derivatives = storage.derivatives || {}
|
|
const profiles = storage.profiles || {}
|
|
const exports = storage.exports || {}
|
|
const byKind = storage.byKind || {}
|
|
const images = byKind.images || {}
|
|
const videos = byKind.videos || {}
|
|
const audio = byKind.audio || {}
|
|
const files = byKind.files || {}
|
|
const otherCount = Number(audio.count || 0) + Number(files.count || 0)
|
|
const otherSize = Number(audio.sizeBytes || 0) + Number(files.sizeBytes || 0)
|
|
const imageOriginalCount = Math.max(0, Number(images.count || 0) - Number(derivatives.count || 0) - Number(profiles.count || 0))
|
|
const imageOriginalSize = Math.max(0, Number(images.sizeBytes || 0) - Number(derivatives.sizeBytes || 0) - Number(profiles.sizeBytes || 0))
|
|
const totalCount = Number(images.count || 0) + Number(videos.count || 0) + otherCount + Number(exports.count || 0)
|
|
const totalSize = Number(images.sizeBytes || 0) + Number(videos.sizeBytes || 0) + otherSize + Number(exports.sizeBytes || 0)
|
|
const mainRows = [
|
|
{
|
|
label: '영상',
|
|
value: formatBackupStatValue(videos.count, videos.sizeBytes)
|
|
},
|
|
{
|
|
label: '보내기',
|
|
value: formatBackupStatValue(exports.count, exports.sizeBytes)
|
|
}
|
|
]
|
|
|
|
if (Number(audio.count || 0) > 0) {
|
|
mainRows.push({
|
|
label: '오디오',
|
|
value: formatBackupStatValue(audio.count, audio.sizeBytes)
|
|
})
|
|
}
|
|
|
|
if (Number(files.count || 0) > 0) {
|
|
mainRows.push({
|
|
label: '첨부 파일',
|
|
value: formatBackupStatValue(files.count, files.sizeBytes)
|
|
})
|
|
}
|
|
|
|
return {
|
|
imageRows: [
|
|
{
|
|
label: '이미지',
|
|
value: formatBackupStatValue(imageOriginalCount, imageOriginalSize)
|
|
},
|
|
{
|
|
label: '자동생성',
|
|
value: formatBackupStatValue(derivatives.count, derivatives.sizeBytes),
|
|
child: true
|
|
},
|
|
{
|
|
label: '프로필',
|
|
value: formatBackupStatValue(profiles.count, profiles.sizeBytes),
|
|
child: true
|
|
}
|
|
],
|
|
mainRows,
|
|
totalRow: {
|
|
label: '합계',
|
|
value: formatBackupStatValue(totalCount, totalSize)
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
id="admin-settings-section-backup-summary"
|
|
class="admin-backup-summary-card admin-settings-screen__card admin-settings-screen__card--backup-summary rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
|
|
>
|
|
<div class="admin-settings-screen__card-head flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-semibold text-[#15171a]">
|
|
사이트 용량
|
|
</h2>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
콘텐츠 수량과 업로드 파일 용량을 한눈에 확인합니다.
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="inline-flex h-10 shrink-0 cursor-pointer items-center justify-center rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition hover:bg-[#f4f6f8] disabled:cursor-wait disabled:opacity-60"
|
|
type="button"
|
|
:disabled="pending"
|
|
@click="emit('refresh')"
|
|
>
|
|
{{ pending ? '집계 중' : '새로고침' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-5 flex flex-wrap items-center gap-2 text-xs text-[#657080]">
|
|
<span class="rounded-full bg-[#f4f6f8] px-3 py-1">
|
|
기준 {{ formatBackupGeneratedAt(summary?.generatedAt) }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">콘텐츠</span>
|
|
<span class="text-xs text-[#657080]">DB 기준</span>
|
|
</div>
|
|
<div class="grid gap-2 text-xs text-[#657080] sm:grid-cols-2">
|
|
<div
|
|
v-for="metric in contentMetrics"
|
|
:key="`backup-content-${metric.label}`"
|
|
class="rounded-md border border-[#edf0f2] px-3 py-2"
|
|
:class="metric.span ? 'sm:col-span-2' : ''"
|
|
>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span>{{ metric.label }}</span>
|
|
<strong class="font-mono text-[#15171a]">{{ metric.value }}</strong>
|
|
</div>
|
|
<p
|
|
v-if="metric.helper"
|
|
class="mt-1 text-[11px] leading-relaxed text-[#657080]"
|
|
>
|
|
{{ metric.helper }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 grid gap-3 border-t border-[#eceff2] pt-5">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span class="font-bold text-[#15171a]">파일·용량</span>
|
|
<span class="text-xs text-[#657080]">public/uploads 기준</span>
|
|
</div>
|
|
<div class="grid gap-2 text-xs text-[#657080]">
|
|
<div class="admin-backup-summary-card__image-group admin-settings-screen__backup-image-group grid gap-2">
|
|
<div
|
|
v-for="row in storageSections.imageRows"
|
|
:key="`backup-storage-image-${row.label}`"
|
|
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
|
:class="row.child ? 'border-dashed' : ''"
|
|
>
|
|
<span>{{ row.label }}</span>
|
|
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="grid gap-2 sm:grid-cols-2">
|
|
<div
|
|
v-for="row in storageSections.mainRows"
|
|
:key="`backup-storage-main-${row.label}`"
|
|
class="flex items-center justify-between gap-3 rounded-md border border-[#edf0f2] px-3 py-2"
|
|
>
|
|
<span>{{ row.label }}</span>
|
|
<strong class="font-mono text-[#15171a]">{{ row.value }}</strong>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3 rounded-md border border-[#dce0e5] bg-[#fbfcfd] px-3 py-2">
|
|
<span class="font-bold text-[#15171a]">{{ storageSections.totalRow.label }}</span>
|
|
<strong class="font-mono font-bold text-[#15171a]">{{ storageSections.totalRow.value }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|