사이트 용량 카드 분리
This commit is contained in:
272
components/admin/AdminBackupSummaryCard.vue
Normal file
272
components/admin/AdminBackupSummaryCard.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user