From da58c53909b6df29335e4d712fcf91fa1ba2ad77 Mon Sep 17 00:00:00 2001
From: keven <keven@fudaoyuan.icu>
Date: Sun, 19 Oct 2025 18:38:00 +0800
Subject: [PATCH] feat(front): add AboutVersionView component and enhance
 AboutBaseInfo with object-fit styling

---
 front/components/About/AboutBaseInfo.vue    |  2 +-
 front/components/About/AboutVersionView.vue | 20 ++++++++++++++++++++
 front/composables/useMyAppConfig.ts         |  2 ++
 front/pages/about.vue                       | 15 ++-------------
 4 files changed, 25 insertions(+), 14 deletions(-)
 create mode 100644 front/components/About/AboutVersionView.vue

diff --git a/front/components/About/AboutBaseInfo.vue b/front/components/About/AboutBaseInfo.vue
index 15762b7..fd5c514 100644
--- a/front/components/About/AboutBaseInfo.vue
+++ b/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">
diff --git a/front/components/About/AboutVersionView.vue b/front/components/About/AboutVersionView.vue
new file mode 100644
index 0000000..88ffc10
--- /dev/null
+++ b/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>
diff --git a/front/composables/useMyAppConfig.ts b/front/composables/useMyAppConfig.ts
index d062dd6..e6a4b72 100644
--- a/front/composables/useMyAppConfig.ts
+++ b/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)
diff --git a/front/pages/about.vue b/front/pages/about.vue
index 07fecfa..29fbe6b 100644
--- a/front/pages/about.vue
+++ b/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>