feat(front): enhance About page with SEO descriptions and improve chart tooltip translations

front/components/AboutChartTooltip.vue

@@ -5,12 +5,23 @@ const props = defineProps<{
   data: { name: string; value: string; color: string }[];
   title: string;
 }>();
-const { t } = useI18n();
 const dataKeyMap = {
-  file_size: t("about.fileSize"),
-  file_num: t("about.fileNum"),
-  processed: t("about.processed"),
-  failed: t("about.failed"),
+  file_size: {
+    "zh-CN": "文件大小",
+    en: "File Size",
+  },
+  file_num: {
+    "zh-CN": "文件数量",
+    en: "File Num",
+  },
+  processed: {
+    "zh-CN": "处理数量",
+    en: "Processed",
+  },
+  failed: {
+    "zh-CN": "失败数量",
+    en: "Failed",
+  },
 };
 </script>
 
@@ -24,7 +35,10 @@ const dataKeyMap = {
           :style="{ backgroundColor: item.color ?? '#222' }"
         ></div>
         <div class="text-xs font-medium">
-          {{ dataKeyMap?.[item.name as keyof typeof dataKeyMap] ?? item.name }}
+          {{
+            dataKeyMap?.[item.name as keyof typeof dataKeyMap]?.["en"] ??
+            item.name
+          }}
         </div>
         <div class="text-sm">
           {{

front/i18n/locales/en.json

@@ -6,6 +6,9 @@
   "i18n": {
     "switchLocale": "Switch Language"
   },
+  "seo": {
+    "desc": "015 is a temporary file sharing platform project, supporting temporary large file slicing upload, temporary text upload, download and share"
+  },
   "about": {
     "file": "File",
     "task": "Task",

front/i18n/locales/zh-CN.json

@@ -6,6 +6,9 @@
   "i18n": {
     "switchLocale": "切换语言"
   },
+  "seo": {
+    "desc": "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
+  },
   "about": {
     "file": "文件",
     "task": "任务",

front/pages/about.vue

@@ -123,11 +123,8 @@ const users = computed(() => {
     <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">
-        {{
-          site_desc ??
-          "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
-        }}
+      <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>
@@ -202,6 +199,8 @@ const users = computed(() => {
           :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"