feat(front): implement internationalization for share options in FileShareHandle and TextShareHandle components, update layout in GlobalDrawer, and enhance FileUploadField with localized text

front/components/Field/FileUploadField.vue

@@ -56,13 +56,13 @@ const { t } = useI18n()
                         <div class="size-16 flex justify-center items-center rounded-xl bg-white/80">
                             <PlusIcon class="size-7" />
                         </div>
-                        <div class="mb-3">添加更多</div>
+                        <div class="mb-3">{{ t('file.addMore') }}</div>
                     </div>
                 </div>
             </template>
             <template v-else>
                 <LucideUpload class="size-10" />
-                <div class="text-sm">
+                <div class="text-sm select-none">
                     {{ t('file.uploadFilePlaceholder') }}
                 </div>
             </template>

front/components/GlobalDrawer.vue

@@ -28,7 +28,7 @@ const Children = () =>
         "
     >
         <DrawerContent>
-            <div class="mx-auto w-full max-w-sm pb-10 px-3">
+            <div class="mx-auto w-full max-w-lg pb-10 px-3">
                 <Children />
             </div>
         </DrawerContent>

front/components/Preprocessing/FileShareHandle.vue

@@ -4,6 +4,7 @@ import InputField from '../Field/InputField.vue'
 import SelectField from '../Field/SelectField.vue'
 import FormButton from '../Field/FormButton.vue'
 import type { FileShareHandleProps } from './types'
+const { t } = useI18n()
 const props = defineProps<{
     hide: () => void
     file: File[]
@@ -14,37 +15,37 @@ const props = defineProps<{
 <template>
     <VeeForm v-slot="{ values, setFieldValue }" :initialValues="{ download_nums: 1, expire_time: 1440 }">
         <div class="flex flex-col gap-3">
-            <h2 class="text-lg font-bold">分享选项</h2>
+            <h2 class="text-lg font-bold">{{ t('fileshare.title') }}</h2>
             <div class="flex flex-row items-center gap-2 text-sm">
                 <SelectField
                     name="download_nums"
-                    label="下载次数"
+                    :label="t('fileshare.downloadNums')"
                     :options="[
-                        { label: '1次下载', value: 1 },
-                        { label: '2次下载', value: 2 },
-                        { label: '3次下载', value: 3 },
-                        { label: '5次下载', value: 5 },
-                        { label: '10次下载', value: 10 },
+                        { label: t('fileshare.downloadOptions.1time'), value: 1 },
+                        { label: t('fileshare.downloadOptions.2times'), value: 2 },
+                        { label: t('fileshare.downloadOptions.3times'), value: 3 },
+                        { label: t('fileshare.downloadOptions.5times'), value: 5 },
+                        { label: t('fileshare.downloadOptions.10times'), value: 10 },
                     ]"
                 />
-                或
+                {{ t('fileshare.or') }}
                 <SelectField
                     name="expire_time"
-                    label="过期时间"
+                    :label="t('fileshare.expireTime')"
                     :options="[
-                        { label: '5分钟', value: 5 },
-                        { label: '1小时', value: 60 },
-                        { label: '1天', value: 1440 },
-                        { label: '3天', value: 4320 },
+                        { label: t('fileshare.expireOptions.5min'), value: 5 },
+                        { label: t('fileshare.expireOptions.1hour'), value: 60 },
+                        { label: t('fileshare.expireOptions.1day'), value: 1440 },
+                        { label: t('fileshare.expireOptions.3days'), value: 4320 },
                     ]"
                 />
-                后过期
+                {{ t('fileshare.expireAfter') }}
             </div>
             <div class="flex flex-col gap-1">
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_pickup_code"
-                        label="取件码"
+                        :label="t('fileshare.pickupCode')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -58,7 +59,7 @@ const props = defineProps<{
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_password"
-                        label="密码保护"
+                        :label="t('fileshare.passwordProtection')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -68,11 +69,11 @@ const props = defineProps<{
                             }
                         "
                     />
-                    <InputField v-if="!!values.has_password" name="password" placeholder="请输入密码" rules="required" />
+                    <InputField v-if="!!values.has_password" name="password" :placeholder="t('fileshare.passwordPlaceholder')" rules="required" />
                 </div>
                 <div class="flex flex-row gap-3 min-h-9">
-                    <SwitchField name="has_notify" label="下载通知" />
-                    <InputField v-if="!!values.has_notify" name="notify_email" placeholder="请输入邮箱" rules="required" />
+                    <SwitchField name="has_notify" :label="t('fileshare.downloadNotify')" />
+                    <InputField v-if="!!values.has_notify" name="notify_email" :placeholder="t('fileshare.emailPlaceholder')" rules="required" />
                 </div>
             </div>
             <FormButton
@@ -82,7 +83,7 @@ const props = defineProps<{
                         hide()
                     }
                 "
-                >提交</FormButton
+                >{{ t('btn.submit') }}</FormButton
             >
         </div>
     </VeeForm>

front/components/Preprocessing/TextShareHandle.vue

@@ -4,6 +4,7 @@ import InputField from '../Field/InputField.vue'
 import SelectField from '../Field/SelectField.vue'
 import FormButton from '../Field/FormButton.vue'
 import type { TextShareHandleProps } from './types'
+const { t } = useI18n()
 const props = defineProps<{
     hide: () => void
     text: string
@@ -14,37 +15,37 @@ const props = defineProps<{
 <template>
     <VeeForm v-slot="{ values, setFieldValue }" :initialValues="{ download_nums: 1, expire_time: 1440 }">
         <div class="flex flex-col gap-3">
-            <h2 class="text-lg font-bold">分享选项</h2>
+            <h2 class="text-lg font-bold">{{ t('textshare.title') }}</h2>
             <div class="flex flex-row items-center gap-2 text-sm">
                 <SelectField
                     name="download_nums"
-                    label="浏览次数"
+                    :label="t('textshare.viewNums')"
                     :options="[
-                        { label: '1次浏览', value: 1 },
-                        { label: '2次浏览', value: 2 },
-                        { label: '3次浏览', value: 3 },
-                        { label: '5次浏览', value: 5 },
-                        { label: '10次浏览', value: 10 },
+                        { label: t('textshare.viewOptions.1time'), value: 1 },
+                        { label: t('textshare.viewOptions.2times'), value: 2 },
+                        { label: t('textshare.viewOptions.3times'), value: 3 },
+                        { label: t('textshare.viewOptions.5times'), value: 5 },
+                        { label: t('textshare.viewOptions.10times'), value: 10 },
                     ]"
                 />
-                或
+                {{ t('textshare.or') }}
                 <SelectField
                     name="expire_time"
-                    label="过期时间"
+                    :label="t('textshare.expireTime')"
                     :options="[
-                        { label: '5分钟', value: 5 },
-                        { label: '1小时', value: 60 },
-                        { label: '1天', value: 1440 },
-                        { label: '3天', value: 4320 },
+                        { label: t('textshare.expireOptions.5min'), value: 5 },
+                        { label: t('textshare.expireOptions.1hour'), value: 60 },
+                        { label: t('textshare.expireOptions.1day'), value: 1440 },
+                        { label: t('textshare.expireOptions.3days'), value: 4320 },
                     ]"
                 />
-                后过期
+                {{ t('textshare.expireAfter') }}
             </div>
             <div class="flex flex-col gap-1">
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_pickup_code"
-                        label="取件码"
+                        :label="t('textshare.pickupCode')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -58,7 +59,7 @@ const props = defineProps<{
                 <div class="flex flex-row gap-3 min-h-9">
                     <SwitchField
                         name="has_password"
-                        label="密码保护"
+                        :label="t('textshare.passwordProtection')"
                         :rules="
                             (value: boolean) => {
                                 if (!!value) {
@@ -68,11 +69,11 @@ const props = defineProps<{
                             }
                         "
                     />
-                    <InputField v-if="!!values.has_password" name="password" placeholder="请输入密码" rules="required" />
+                    <InputField v-if="!!values.has_password" name="password" :placeholder="t('textshare.passwordPlaceholder')" rules="required" />
                 </div>
                 <div class="flex flex-row gap-3 min-h-9">
-                    <SwitchField name="has_notify" label="已读通知" />
-                    <InputField v-if="!!values.has_notify" name="notify_email" placeholder="请输入邮箱" rules="required" />
+                    <SwitchField name="has_notify" :label="t('textshare.readNotify')" />
+                    <InputField v-if="!!values.has_notify" name="notify_email" :placeholder="t('textshare.emailPlaceholder')" rules="required" />
                 </div>
             </div>
             <FormButton
@@ -82,7 +83,7 @@ const props = defineProps<{
                         hide()
                     }
                 "
-                >提交</FormButton
+                >{{ t('btn.submit') }}</FormButton
             >
         </div>
     </VeeForm>

front/i18n/locales/en.json

@@ -16,6 +16,7 @@
     "file": {
         "uploadFile": "Upload File",
         "uploadFilePlaceholder": "Drag and drop files or click to upload",
+        "addMore": "Add More",
         "handleType": {
             "file-share": "File Share",
             "file-image-compress": "Image Compress"
@@ -33,6 +34,56 @@
         "codeError": "Invalid pickup code",
         "btn": "Pickup"
     },
+    "fileshare": {
+        "title": "Share Options",
+        "downloadNums": "Download Count",
+        "expireTime": "Expire Time",
+        "or": "or",
+        "expireAfter": "expire",
+        "pickupCode": "Pickup Code",
+        "passwordProtection": "Password Protection",
+        "downloadNotify": "Download Notification",
+        "passwordPlaceholder": "Enter password",
+        "emailPlaceholder": "Enter email",
+        "downloadOptions": {
+            "1time": "1 download",
+            "2times": "2 downloads",
+            "3times": "3 downloads",
+            "5times": "5 downloads",
+            "10times": "10 downloads"
+        },
+        "expireOptions": {
+            "5min": "5 minutes",
+            "1hour": "1 hour",
+            "1day": "1 day",
+            "3days": "3 days"
+        }
+    },
+    "textshare": {
+        "title": "Share Options",
+        "viewNums": "View Count",
+        "expireTime": "Expire Time",
+        "or": "or",
+        "expireAfter": "expire",
+        "pickupCode": "Pickup Code",
+        "passwordProtection": "Password Protection",
+        "readNotify": "Read Notification",
+        "passwordPlaceholder": "Enter password",
+        "emailPlaceholder": "Enter email",
+        "viewOptions": {
+            "1time": "1 view",
+            "2times": "2 views",
+            "3times": "3 views",
+            "5times": "5 views",
+            "10times": "10 views"
+        },
+        "expireOptions": {
+            "5min": "5 minutes",
+            "1hour": "1 hour",
+            "1day": "1 day",
+            "3days": "3 days"
+        }
+    },
     "about": {
         "file": "File",
         "task": "Task",

front/i18n/locales/zh-CN.json

@@ -16,6 +16,7 @@
     "file": {
         "uploadFile": "上传文件",
         "uploadFilePlaceholder": "拖拽文件 或 点击上传",
+        "addMore": "添加更多",
         "handleType": {
             "file-share": "文件分享",
             "file-image-compress": "图片压缩"
@@ -33,6 +34,56 @@
         "codeError": "取件码错误",
         "btn": "取件"
     },
+    "fileshare": {
+        "title": "分享选项",
+        "downloadNums": "下载次数",
+        "expireTime": "过期时间",
+        "or": "或",
+        "expireAfter": "后过期",
+        "pickupCode": "取件码",
+        "passwordProtection": "密码保护",
+        "downloadNotify": "下载通知",
+        "passwordPlaceholder": "请输入密码",
+        "emailPlaceholder": "请输入邮箱",
+        "downloadOptions": {
+            "1time": "1次下载",
+            "2times": "2次下载",
+            "3times": "3次下载",
+            "5times": "5次下载",
+            "10times": "10次下载"
+        },
+        "expireOptions": {
+            "5min": "5分钟",
+            "1hour": "1小时",
+            "1day": "1天",
+            "3days": "3天"
+        }
+    },
+    "textshare": {
+        "title": "分享选项",
+        "viewNums": "浏览次数",
+        "expireTime": "过期时间",
+        "or": "或",
+        "expireAfter": "后过期",
+        "pickupCode": "取件码",
+        "passwordProtection": "密码保护",
+        "readNotify": "已读通知",
+        "passwordPlaceholder": "请输入密码",
+        "emailPlaceholder": "请输入邮箱",
+        "viewOptions": {
+            "1time": "1次浏览",
+            "2times": "2次浏览",
+            "3times": "3次浏览",
+            "5times": "5次浏览",
+            "10times": "10次浏览"
+        },
+        "expireOptions": {
+            "5min": "5分钟",
+            "1hour": "1小时",
+            "1day": "1天",
+            "3days": "3天"
+        }
+    },
     "about": {
         "file": "文件",
         "task": "任务",