feat(front): enhance PickupShareBtn and PickupShareDrawer components with internationalization support and improved user feedback for pickup code submission

2026-05-26 07:08:02 +00:00 · 2025-10-18 09:22:14 +08:00
parent 045031dd3c
commit 836a3c866a
4 changed files with 160 additions and 144 deletions
--- a/front/components/Drawer/PickupShareDrawer.vue
+++ b/front/components/Drawer/PickupShareDrawer.vue
@@ -1,57 +1,56 @@
 <script setup lang="ts">
-import VeeForm from "@/components/VeeForm.vue";
-import FormButton from "@/components/Field/FormButton.vue";
-import PinInputField from "@/components/Field/PinInputField.vue";
-import type { FormContext, GenericObject } from "vee-validate";
-import { toast } from "vue-sonner";
-const router = useRouter();
+import VeeForm from '@/components/VeeForm.vue'
+import FormButton from '@/components/Field/FormButton.vue'
+import PinInputField from '@/components/Field/PinInputField.vue'
+import type { FormContext, GenericObject } from 'vee-validate'
+import { toast } from 'vue-sonner'
+const router = useRouter()
+const { t } = useI18n()
 const props = defineProps<{
-  hide: () => void;
-}>();
-const handleSubmit = async (
-  form: FormContext<GenericObject, GenericObject>,
-) => {
-  try {
-    const code = form.values.code;
-    const data = await $fetch<{
-      data: {
-        share_id: string;
-      };
-    }>(`/api/share/pickup/${code}`);
-    if (!data.data.share_id) {
-      toast.error("取件码错误");
-      form.resetForm();
-      return;
+    hide: () => void
+}>()
+const handleSubmit = async (form: FormContext<GenericObject, GenericObject>) => {
+    try {
+        const code = form.values.code
+        const data = await $fetch<{
+            data: {
+                share_id: string
+            }
+        }>(`/api/share/pickup/${code}`)
+        if (!data.data.share_id) {
+            toast.error(t('pickup.codeError'))
+            form.resetForm()
+            return
+        }
+        const { share_id } = data.data
+        props.hide()
+        router.push({
+            path: `/s/${share_id}`,
+        })
+        return
+    } catch (error) {
+        toast.error(t('pickup.codeError'))
+        form.resetForm()
    }
-    const { share_id } = data.data;
-    props.hide();
-    router.push({
-      path: `/s/${share_id}`,
-    });
-    return;
-  } catch (error) {
-    toast.error("取件码错误");
-    form.resetForm();
-  }
-};
+}
 </script>

 <template>
-  <VeeForm>
-    <div class="flex flex-col gap-5">
-      <div class="text-xl font-bold">输入取件码</div>
-      <PinInputField
-        name="code"
-        :rules="
-          (value) => {
-            if (value?.length !== 4) {
-              return false;
-            }
-            return true;
-          }
-        "
-      />
-      <FormButton @click="handleSubmit">提交</FormButton>
-    </div>
-  </VeeForm>
+    <VeeForm>
+        <div class="flex flex-col gap-5">
+            <div class="text-xl font-bold">{{ t('pickup.title') }}</div>
+            <PinInputField
+                name="code"
+                :rules="
+                    (value) => {
+                        if (value?.length !== 4) {
+                            return false
+                        }
+                        return true
+                    }
+                "
+            />
+            <FormButton @click="handleSubmit">{{ t('btn.submit') }}</FormButton>
+        </div>
+    </VeeForm>
 </template>
--- a/front/components/PickupShareBtn.vue
+++ b/front/components/PickupShareBtn.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import AsyncButton from '@/components/ui/button/AsyncButton.vue';
-import showDrawer from '@/lib/showDrawer';
-import PickupShareDrawer from './Drawer/PickupShareDrawer.vue';
+import AsyncButton from '@/components/ui/button/AsyncButton.vue'
+import showDrawer from '@/lib/showDrawer'
+import PickupShareDrawer from './Drawer/PickupShareDrawer.vue'
+const { t } = useI18n()
 </script>

 <template>
-    <AsyncButton variant="outline" class="gap-2" @click="async()=>{
-        showDrawer({ render: ({ hide }) => h(PickupShareDrawer, { hide }) })
-    }">
+    <AsyncButton
+        variant="outline"
+        class="gap-2"
+        @click="
+            async () => {
+                showDrawer({ render: ({ hide }) => h(PickupShareDrawer, { hide }) })
+            }
+        "
+    >
        <LucideArchive class="size-4" />
-        取件
+        {{ t('pickup.btn') }}
    </AsyncButton>
-</template>
+</template>
--- a/front/i18n/locales/en.json
+++ b/front/i18n/locales/en.json
@@ -1,46 +1,51 @@
 {
-  "navbar": {
-    "file": "File",
-    "text": "Text"
-  },
-  "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"
-  },
-  "btn": {
-    "submit": "Submit",
-    "backToHome": "Back to Home"
-  },
-  "file": {
-    "uploadFile": "Upload File",
-    "uploadFilePlaceholder": "Drag and drop files or click to upload",
-    "handleType": {
-      "file-share": "File Share",
-      "file-image-compress": "Image Compress"
+    "navbar": {
+        "file": "File",
+        "text": "Text"
+    },
+    "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"
+    },
+    "btn": {
+        "submit": "Submit",
+        "backToHome": "Back to Home"
+    },
+    "file": {
+        "uploadFile": "Upload File",
+        "uploadFilePlaceholder": "Drag and drop files or click to upload",
+        "handleType": {
+            "file-share": "File Share",
+            "file-image-compress": "Image Compress"
+        }
+    },
+    "text": {
+        "uploadText": "Upload Text",
+        "uploadTextPlaceholder": "Share, translate, summarize, generate images, and ask large models with our text processor",
+        "handleType": {
+            "text-share": "Text Share"
+        }
+    },
+    "pickup": {
+        "title": "Enter Pickup Code",
+        "codeError": "Invalid pickup code",
+        "btn": "Pickup"
+    },
+    "about": {
+        "file": "File",
+        "task": "Task",
+        "admin": "Admin",
+        "author": "Author",
+        "title": "About",
+        "systemInfo": "System Info",
+        "systemVersion": "System Version",
+        "storage": "Storage",
+        "analysis": "Analysis",
+        "fileSize": "File Size",
+        "fileNum": "File Num",
+        "processed": "Processed",
+        "failed": "Failed"
    }
-  },
-  "text": {
-    "uploadText": "Upload Text",
-    "uploadTextPlaceholder": "Share, translate, summarize, generate images, and ask large models with our text processor",
-    "handleType": {
-      "text-share": "Text Share"
-    }
-  },
-  "about": {
-    "file": "File",
-    "task": "Task",
-    "admin": "Admin",
-    "author": "Author",
-    "title": "About",
-    "systemInfo": "System Info",
-    "systemVersion": "System Version",
-    "storage": "Storage",
-    "analysis": "Analysis",
-    "fileSize": "File Size",
-    "fileNum": "File Num",
-    "processed": "Processed",
-    "failed": "Failed"
-  }
 }
--- a/front/i18n/locales/zh-CN.json
+++ b/front/i18n/locales/zh-CN.json
@@ -1,46 +1,51 @@
 {
-  "navbar": {
-    "file": "文件",
-    "text": "文本"
-  },
-  "i18n": {
-    "switchLocale": "切换语言"
-  },
-  "seo": {
-    "desc": "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
-  },
-  "btn": {
-    "submit": "提交",
-    "backToHome": "返回首页"
-  },
-  "file": {
-    "uploadFile": "上传文件",
-    "uploadFilePlaceholder": "拖拽文件 或 点击上传",
-    "handleType": {
-      "file-share": "文件分享",
-      "file-image-compress": "图片压缩"
+    "navbar": {
+        "file": "文件",
+        "text": "文本"
+    },
+    "i18n": {
+        "switchLocale": "切换语言"
+    },
+    "seo": {
+        "desc": "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
+    },
+    "btn": {
+        "submit": "提交",
+        "backToHome": "返回首页"
+    },
+    "file": {
+        "uploadFile": "上传文件",
+        "uploadFilePlaceholder": "拖拽文件 或 点击上传",
+        "handleType": {
+            "file-share": "文件分享",
+            "file-image-compress": "图片压缩"
+        }
+    },
+    "text": {
+        "uploadText": "上传文本",
+        "uploadTextPlaceholder": "使用我们的文本处理器轻松分享，翻译，总结，生成图片，询问大模型",
+        "handleType": {
+            "text-share": "文本分享"
+        }
+    },
+    "pickup": {
+        "title": "输入取件码",
+        "codeError": "取件码错误",
+        "btn": "取件"
+    },
+    "about": {
+        "file": "文件",
+        "task": "任务",
+        "admin": "站长",
+        "author": "作者",
+        "title": "关于",
+        "systemInfo": "系统信息",
+        "systemVersion": "系统版本",
+        "storage": "存储空间",
+        "analysis": "分析",
+        "fileSize": "文件大小",
+        "fileNum": "文件数量",
+        "processed": "处理数量",
+        "failed": "失败数量"
    }
-  },
-  "text": {
-    "uploadText": "上传文本",
-    "uploadTextPlaceholder": "使用我们的文本处理器轻松分享，翻译，总结，生成图片，询问大模型",
-    "handleType": {
-      "text-share": "文本分享"
-    }
-  },
-  "about": {
-    "file": "文件",
-    "task": "任务",
-    "admin": "站长",
-    "author": "作者",
-    "title": "关于",
-    "systemInfo": "系统信息",
-    "systemVersion": "系统版本",
-    "storage": "存储空间",
-    "analysis": "分析",
-    "fileSize": "文件大小",
-    "fileNum": "文件数量",
-    "processed": "处理数量",
-    "failed": "失败数量"
-  }
 }