015/front/pages/about.vue

<script setup lang="ts">
import { CurveType } from '@unovis/ts'
import { AreaChart } from '@/components/ui/chart-area'
import { cx } from 'class-variance-authority'
import { useQuery } from '@tanstack/vue-query'
import { Skeleton } from '@/components/ui/skeleton'
import AboutChartTooltip from '@/components/AboutChartTooltip.vue'
import { filesize } from 'filesize'
import SparkMD5 from 'spark-md5'
import useMyAppConfig from '@/composables/useMyAppConfig'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import Progress from '~/components/ui/progress/Progress.vue'

dayjs.extend(relativeTime)

const appConfig = useMyAppConfig()
const { site_title, site_desc } = appConfig.value || {}

const { data, isLoading } = useQuery({
    queryKey: ['stat'],
    queryFn: async () => {
        const data = await $fetch<{ data: any }>('/api/stat')
        return data.data
    },
})

const { t } = useI18n()

const chartTabs = computed(() => {
    return [
        {
            label: t('about.file'),
            value: 'storage',
            total: data.value?.chart?.storage?.reduce((acc: number, curr: { file_size: number; file_num: number }) => acc + curr.file_num, 0) ?? 0,
        },
        {
            label: t('about.task'),
            value: 'queue',
            total:
                data.value?.chart?.queue?.reduce(
                    (acc: number, curr: { processed: number; failed: number }) => acc + curr.processed + curr.failed,
                    0
                ) ?? 0,
        },
    ]
})

const currentFileSize = computed(() => {
    return data.value?.chart?.storage?.reduce((acc: number, curr: { file_size: number; file_num: number }) => acc + curr.file_size, 0) ?? 0
})

const currentChartTab = ref<'storage' | 'queue'>('storage')
const currentChartData = computed(() => {
    const { storage, queue } = data.value?.chart || {}
    if (currentChartTab.value === 'storage') {
        return {
            data: storage,
            index: 'date',
            categories: ['file_size', 'file_num'],
            colors: ['#22d3ee', '#c084fc'],
        }
    }
    return {
        data: queue,
        index: 'date',
        categories: ['processed', 'failed'],
        colors: ['#4ade80', '#f87171'],
    }
})

const genUserAvatar = ({ email }: { email: string }) => {
    if (!email) {
        return '/logo.png'
    }
    return `https://www.gravatar.com/avatar/${SparkMD5.hash(email)}?d=retro`
}

const handleUserClick = ({ url, email }: { url: string; email: string }) => {
    if (url) {
        return navigateTo(url, { external: true })
    }
    if (email) {
        return navigateTo(`mailto:${email}`, { external: true })
    }
    return null
}

const users = computed(() => {
    const { email, name, url } = data.value?.admin || {}
    return [
        ...(!!name
            ? [
                  {
                      title: t('about.admin'),
                      email,
                      name,
                      url: url ?? (email ? `mailto:${email}` : null),
                  },
              ]
            : []),
        {
            title: t('about.author'),
            name: 'keven1024',
            email: 'keven@fudaoyuan.icu',
            url: 'https://github.com/keven1024',
        },
    ]
})
</script>

<template>
    <div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 my-5 flex flex-col gap-5">
        <div class="text-xl font-normal">{{ t('about.title') }}</div>
        <div class="flex flex-col gap-2 items-center">
            <NuxtImg src="/logo.png" class="size-20 rounded-xl" />
            <div class="text-xl">{{ site_title ?? '015' }}</div>
            <div class="text-sm opacity-75 text-center px-5">
                {{ site_desc ?? t('seo.desc') }}
            </div>
        </div>
        <div class="font-semibold">{{ t('about.systemInfo') }}</div>
        <template v-if="isLoading">
            <div class="flex flex-row gap-2">
                <Skeleton class="w-full h-20 rounded-xl" v-for="i in 2" :key="i" />
            </div>
        </template>
        <template v-else>
            <div class="grid grid-cols-2 gap-2">
                <div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
                    <div class="opacity-75 text-xs">{{ t('about.systemVersion') }}</div>
                    <div class="text-xl font-semibold flex items-center gap-1">
                        {{ data?.version ?? 'dev' }}
                        <span class="text-xs px-2 py-0.5 rounded bg-primary/20 text-primary">{{ dayjs(data?.build_time * 1000).fromNow() }}</span>
                    </div>
                </div>
                <div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
                    <div class="opacity-75 text-xs">{{ t('about.storage') }}</div>
                    <div class="text-right flex flex-row items-baseline">
                        <span class="text-lg font-semibold">{{ filesize(currentFileSize ?? 0) }}</span>
                        <span class="text-md opacity-75">/ {{ filesize(data?.max_limit?.file_size ?? 0) }}</span>
                    </div>
                    <Progress class="h-1" :model-value="(currentFileSize / (data?.max_limit?.file_size ?? 0)) * 100" />
                </div>
            </div>
        </template>
        <div class="font-semibold">{{ t('about.analysis') }}</div>
        <template v-if="isLoading">
            <div class="flex flex-row gap-2">
                <Skeleton class="w-full h-96 rounded-xl" />
            </div>
        </template>
        <template v-else>
            <div class="flex flex-col gap-2 bg-white/50 w-full rounded-xl py-5">
                <div class="flex flex-row gap-2 px-5">
                    <div
                        :class="cx('rounded-md min-w-30 flex flex-col px-3 py-1.5 cursor-pointer', currentChartTab === tab.value && 'bg-black/10')"
                        v-for="tab in chartTabs"
                        :key="tab.value"
                        @click="
                            () => {
                                currentChartTab = tab.value as 'storage' | 'queue'
                            }
                        "
                    >
                        <div class="opacity-75 text-xs">{{ tab.label }}</div>
                        <div class="text-lg font-semibold">{{ tab.total }}</div>
                    </div>
                </div>
                <AreaChart
                    v-if="currentChartData"
                    class="h-64 w-full"
                    :key="currentChartTab"
                    :index="currentChartData.index"
                    :data="currentChartData.data"
                    :categories="currentChartData.categories"
                    :show-grid-line="false"
                    :show-legend="false"
                    :show-y-axis="true"
                    :show-x-axis="true"
                    :colors="currentChartData.colors"
                    :custom-tooltip="AboutChartTooltip"
                    :curve-type="CurveType.CatmullRom"
                />
            </div>
        </template>
        <template v-if="isLoading">
            <div class="flex flex-row gap-2">
                <Skeleton class="w-full h-20 rounded-xl" v-for="i in 2" :key="i" />
            </div>
        </template>
        <template v-else>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                <div class="flex flex-col gap-3" v-for="user in users" :key="user.name">
                    <div class="font-semibold">{{ user.title }}</div>
                    <div
                        class="rounded-xl bg-white/50 hover:bg-white/40 flex-1 flex flex-row items-center gap-2 p-3 cursor-pointer"
                        @click="
                            () => {
                                handleUserClick(user)
                            }
                        "
                    >
                        <div class="size-10 rounded-full bg-white/50">
                            <NuxtImg :src="genUserAvatar(user)" class="size-full rounded-full" />
                        </div>
                        <div class="text-md font-semibold">{{ user.name }}</div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>