From 7a3d03c41f1a72e3167064d7748babdd67f09fcf Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Sun, 22 Jun 2025 01:07:09 +0800
Subject: [PATCH] feat: update primary color in CSS and enhance about page with
 relative time display and progress component

---
 front/assets/css/main.css |   2 +-
 front/pages/about.vue     | 405 ++++++++++++++++++--------------------
 2 files changed, 190 insertions(+), 217 deletions(-)

diff --git a/front/assets/css/main.css b/front/assets/css/main.css
index df7bdd6..c16b81a 100644
--- a/front/assets/css/main.css
+++ b/front/assets/css/main.css
@@ -50,7 +50,7 @@
   --card-foreground: oklch(0.129 0.042 264.695);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
+  --primary: oklch(0.4349 0.0673 257.47);
   --primary-foreground: oklch(0.984 0.003 247.858);
   --secondary: oklch(0.968 0.007 247.896);
   --secondary-foreground: oklch(0.208 0.042 265.755);
diff --git a/front/pages/about.vue b/front/pages/about.vue
index 7cda861..bd0b03a 100644
--- a/front/pages/about.vue
+++ b/front/pages/about.vue
@@ -1,240 +1,213 @@
 <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 { 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'
 
-const appConfig = useMyAppConfig();
-const { site_title, site_desc } = appConfig.value || {};
+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;
-  },
-});
+    queryKey: ['stat'],
+    queryFn: async () => {
+        const data = await $fetch<{ data: any }>('/api/stat')
+        return data.data
+    },
+})
 
-const { t } = useI18n();
+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,
-    },
-  ];
-});
+    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
-  );
-});
+    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 currentChartTab = ref<'storage' | 'queue'>('storage')
 const currentChartData = computed(() => {
-  const { storage, queue } = data.value?.chart || {};
-  if (currentChartTab.value === "storage") {
+    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: storage,
-      index: "date",
-      categories: ["file_size", "file_num"],
-      colors: ["#22d3ee", "#c084fc"],
-    };
-  }
-  return {
-    data: queue,
-    index: "date",
-    categories: ["processed", "failed"],
-    colors: ["#4ade80", "#f87171"],
-  };
-});
+        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`;
-};
+    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;
-};
+    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",
-    },
-  ];
-});
+    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">
-            {{ data?.version ?? "dev" }}
-          </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>
-          <div class="rounded-full w-full h-1 bg-black/10">
-            <div
-              class="rounded-full h-full bg-blue-500"
-              :style="{
-                width: `${(currentFileSize / (data?.max_limit?.file_size ?? 0)) * 100}%`,
-              }"
-            ></div>
-          </div>
-        </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 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 class="text-md font-semibold">{{ user.name }}</div>
-          </div>
         </div>
-      </div>
-    </template>
-  </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>