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

This commit is contained in:
keven
2025-10-18 09:41:45 +08:00
parent 836a3c866a
commit 8fad0a4163
6 changed files with 147 additions and 43 deletions

View File

@@ -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>

View File

@@ -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>