From fa170096957b5818ac38456eea5e9511ff3e50ed Mon Sep 17 00:00:00 2001
From: keven <keven@fudaoyuan.icu>
Date: Sat, 18 Oct 2025 10:43:57 +0800
Subject: [PATCH] feat(front): enhance FileShareResult and FileUploadField
 components with internationalization support, adding localized text for file
 sharing success and related UI elements

---
 front/components/Field/FileUploadField.vue  |  2 +-
 front/components/Result/FileShareResult.vue | 32 +++++++++------------
 front/i18n/locales/en.json                  | 10 +++++++
 front/i18n/locales/zh-CN.json               | 10 +++++++
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/front/components/Field/FileUploadField.vue b/front/components/Field/FileUploadField.vue
index 429c528..0c2ec5e 100644
--- a/front/components/Field/FileUploadField.vue
+++ b/front/components/Field/FileUploadField.vue
@@ -39,7 +39,7 @@ const { t } = useI18n()
                             <Button
                                 class="size-5 p-0 bg-red-500/20 hover:bg-red-500/60 text-red-500 hover:text-white"
                                 @click="
-                                    (e) => {
+                                    (e: any) => {
                                         e.stopPropagation()
                                         setValue(
                                             value?.filter((r) => r?.name !== item?.name || r?.type !== item?.type || r?.size !== item?.size) || []
diff --git a/front/components/Result/FileShareResult.vue b/front/components/Result/FileShareResult.vue
index a47f747..9a543ef 100644
--- a/front/components/Result/FileShareResult.vue
+++ b/front/components/Result/FileShareResult.vue
@@ -8,15 +8,11 @@ import { useQuery } from '@tanstack/vue-query'
 import useMyAppShare from '@/composables/useMyAppShare'
 import useMyAppConfig from '@/composables/useMyAppConfig'
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import 'dayjs/locale/zh-cn' // 导入中文语言包
 import showDrawer from '@/lib/showDrawer'
 import QrCoreDrawer from '@/components/Drawer/QrCoreDrawer.vue'
 import { h } from 'vue'
 import { cx } from 'class-variance-authority'
 import type { FileHandleKey } from '../Preprocessing/types'
-dayjs.extend(relativeTime) // 扩展 relativeTime 插件
-dayjs.locale('zh-cn') // 设置语言为中文
 
 const props = defineProps<{
     data: { files: { id: string; file: File }[]; config: Record<string, any>; handle_type: FileHandleKey }
@@ -24,6 +20,7 @@ const props = defineProps<{
 const emit = defineEmits<{
     (e: 'change', key: string): void
 }>()
+const { t } = useI18n()
 const { createFileShare } = useMyAppShare()
 const { data } = useQuery({
     queryKey: ['create-share', ...props?.data?.files?.map((item) => item.id)],
@@ -39,7 +36,6 @@ const { data } = useQuery({
         return data?.map((item) => item?.data)
     },
 })
-
 const selectedFile = ref<string | undefined>()
 const selectedFileShare = computed(() => {
     return data?.value?.find((item) => item?.id === selectedFile.value)
@@ -64,13 +60,13 @@ const { copy } = useClipboard()
 
 <template>
     <div class="flex flex-col gap-3">
-        <h2 class="text-lg">上传成功</h2>
+        <h2 class="text-lg">{{ t('fileshareresult.title') }}</h2>
         <div class="flex flex-col gap-3 items-center">
             <div v-if="data?.length === 1" class="flex flex-col h-30 items-center">
-                <FilePreviewView :value="props?.data?.files?.[0]?.file" />
+                <FilePreviewView :value="props?.data?.files?.[0]?.file as File" />
             </div>
             <div v-else class="flex flex-col gap-2 w-full p-5 bg-white/20 backdrop-blur-xl rounded-md">
-                <div class="text-sm font-semibold">文件列表</div>
+                <div class="text-sm font-semibold">{{ t('fileshareresult.fileList') }}</div>
                 <div
                     v-for="file in data"
                     :class="
@@ -83,7 +79,7 @@ const { copy } = useClipboard()
                 >
                     <div class="flex flex-row items-center gap-2 flex-1 min-w-0">
                         <FileIcon
-                            :file="props?.data?.files?.[data?.findIndex((i) => i?.id === file?.id) as number]?.file"
+                            :file="props?.data?.files?.[data?.findIndex((i) => i?.id === file?.id) as number]?.file as File"
                             :class="cx('!size-7 !rounded-md shrink-0', selectedFile === file?.id && '!bg-white/50')"
                         />
                         <div class="text-sm flex-1 truncate">{{ file?.file_name }}</div>
@@ -96,7 +92,7 @@ const { copy } = useClipboard()
                             @click="
                                 () => {
                                     copy(getShareUrl(file?.id as string))
-                                    toast.success('复制成功')
+                                    toast.success(t('fileshareresult.copySuccess'))
                                 }
                             "
                         >
@@ -125,21 +121,21 @@ const { copy } = useClipboard()
             </div>
             <div v-if="!!selectedFileShare" class="flex flex-col md:flex-row gap-5 rounded-md p-5 bg-white/20 backdrop-blur-xl w-full">
                 <div class="flex flex-col gap-2 flex-1">
-                    <div class="text-sm font-semibold">信息</div>
+                    <div class="text-sm font-semibold">{{ t('fileshareresult.info') }}</div>
                     <div class="grid grid-cols-2 gap-2">
                         <div class="rounded-xl flex flex-col bg-black/10 px-3 py-2 gap-1">
-                            <div class="text-xs font-semibold">下载次数</div>
+                            <div class="text-xs font-semibold">{{ t('fileshareresult.downloadNums') }}</div>
                             <div class="text-3xl font-light">{{ selectedFileShare?.download_nums }}</div>
                         </div>
                         <div class="rounded-xl flex flex-col bg-black/10 px-3 py-2 gap-1">
-                            <div class="text-xs font-semibold">过期时间</div>
+                            <div class="text-xs font-semibold">{{ t('fileshareresult.expireTime') }}</div>
                             <div class="text-md font-light">
                                 {{ dayjs((selectedFileShare?.expire_at || 0) * 1000).format('YYYY-MM-DD HH:mm:ss') }}
                             </div>
                         </div>
                         <div class="rounded-xl flex flex-col bg-black/10 px-3 py-2 gap-1" v-if="selectedFileShare?.pickup_code">
                             <div class="flex flex-row justify-between w-full items-center">
-                                <div class="text-xs font-semibold">提取码</div>
+                                <div class="text-xs font-semibold">{{ t('fileshareresult.pickupCode') }}</div>
                                 <Button
                                     variant="outline"
                                     class="bg-white/70 p-0 size-6"
@@ -147,7 +143,7 @@ const { copy } = useClipboard()
                                     @click="
                                         () => {
                                             copy(selectedFileShare?.pickup_code as string)
-                                            toast.success('复制成功')
+                                            toast.success(t('fileshareresult.copySuccess'))
                                         }
                                     "
                                 >
@@ -163,7 +159,7 @@ const { copy } = useClipboard()
                     </div>
                 </div>
                 <div class="flex flex-col gap-5 flex-1">
-                    <div class="text-sm font-semibold">链接</div>
+                    <div class="text-sm font-semibold">{{ t('fileshareresult.link') }}</div>
                     <div class="flex flex-row gap-2">
                         <Input :model-value="getShareUrl(selectedFileShare?.id as string)" class="bg-white/70" readonly />
                         <Button
@@ -173,7 +169,7 @@ const { copy } = useClipboard()
                             @click="
                                 () => {
                                     copy(getShareUrl(selectedFileShare?.id as string))
-                                    toast.success('复制成功')
+                                    toast.success(t('fileshareresult.copySuccess'))
                                 }
                             "
                         >
@@ -209,7 +205,7 @@ const { copy } = useClipboard()
                     }
                 "
             >
-                返回首页
+                {{ t('btn.backToHome') }}
             </Button>
         </div>
     </div>
diff --git a/front/i18n/locales/en.json b/front/i18n/locales/en.json
index 956b139..28ce728 100644
--- a/front/i18n/locales/en.json
+++ b/front/i18n/locales/en.json
@@ -84,6 +84,16 @@
             "3days": "3 days"
         }
     },
+    "fileshareresult": {
+        "title": "Upload Successful",
+        "fileList": "File List",
+        "info": "Info",
+        "downloadNums": "Download Count",
+        "expireTime": "Expire Time",
+        "pickupCode": "Pickup Code",
+        "link": "Link",
+        "copySuccess": "Copy Success"
+    },
     "about": {
         "file": "File",
         "task": "Task",
diff --git a/front/i18n/locales/zh-CN.json b/front/i18n/locales/zh-CN.json
index 5f6bc52..14aa5f7 100644
--- a/front/i18n/locales/zh-CN.json
+++ b/front/i18n/locales/zh-CN.json
@@ -84,6 +84,16 @@
             "3days": "3天"
         }
     },
+    "fileshareresult": {
+        "title": "上传成功",
+        "fileList": "文件列表",
+        "info": "信息",
+        "downloadNums": "下载次数",
+        "expireTime": "过期时间",
+        "pickupCode": "提取码",
+        "link": "链接",
+        "copySuccess": "复制成功"
+    },
     "about": {
         "file": "文件",
         "task": "任务",