feat(front): add AboutVersionView component and enhance AboutBaseInfo with object-fit styling

front/components/About/AboutBaseInfo.vue

@@ -48,7 +48,7 @@ const genUserAvatar = (email: string) => {
         </div>
     </template>
     <template v-else>
-        <NuxtImg v-if="data?.bg_url" :src="data?.bg_url" class="aspect-[3/1] w-full rounded-xl" fit="cover" />
+        <NuxtImg v-if="data?.bg_url" :src="data?.bg_url" class="aspect-[3/1] w-full rounded-xl object-cover" />
         <div class="flex flex-col gap-2 items-center">
             <div class="text-xl">{{ renderI18n(appConfig?.site_title ?? {}, 'en', locale) }}</div>
             <div class="text-sm opacity-75 text-center px-5">

front/components/About/AboutVersionView.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import useMyAppConfig from '@/composables/useMyAppConfig'
+import dayjs from 'dayjs'
+
+const appConfig = useMyAppConfig()
+</script>
+
+<template>
+    <div class="flex flex-row flex-wrap gap-4 items-center text-sm opacity-60">
+        <div class="flex flex-row gap-1 opacity-100">
+            <NuxtLink href="https://github.com/keven1024/015" target="_blank" class="text-primary hover:underline">015</NuxtLink>
+            {{ appConfig?.version ?? 'dev' }}
+        </div>
+
+        <div v-if="appConfig?.build_time">
+            {{ `Build at ${dayjs(appConfig?.build_time * 1000).format('YYYY-MM-DD')}` }}
+        </div>
+        <div>Designed by <NuxtLink href="https://fudaoyuan.icu" target="_blank" class="text-primary hover:underline">keven1024</NuxtLink></div>
+    </div>
+</template>

front/composables/useMyAppConfig.ts

@@ -6,6 +6,8 @@ const useMyAppConfig = () => {
             site_url: string
             site_icon: string
             site_bg_url: string
+            version: string
+            build_time: number
         }
     }>('/api/config')
     return computed(() => data?.value?.data)

front/pages/about.vue

@@ -1,19 +1,7 @@
 <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 getFileSize from '~/lib/getFileSize'
-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'
 import AboutBaseInfo from '@/components/About/AboutBaseInfo.vue'
+import AboutVersionView from '@/components/About/AboutVersionView.vue'
 
-dayjs.extend(relativeTime)
 const { t } = useI18n()
 </script>
 
@@ -22,5 +10,6 @@ const { t } = useI18n()
         <div class="text-xl font-normal">{{ t('about.title') }}</div>
         <AboutBaseInfo />
         <AboutChartView />
+        <AboutVersionView />
     </div>
 </template>