GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-06-07 04:49:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(front): implement internationalization for file and text upload components with dynamic translations

Browse Source
This commit is contained in:
keven1024
2025-06-02 10:12:15 +08:00
parent a59285c6fb
commit da58a46e72
7 changed files with 183 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
front/components/Field/FileUploadField.vue
View File

@@ -1,33 +1,42 @@
<script setup lang="ts">
import FileUpload from '@/components/FileUpload.vue'
import { cx } from 'class-variance-authority'
import type { RuleExpression } from 'vee-validate'
import FileUpload from "@/components/FileUpload.vue";
import { cx } from "class-variance-authority";
import type { RuleExpression } from "vee-validate";
const props = defineProps<{
name: string
rules?: RuleExpression<File>
}>()
const { value, setValue } = useField<File>(props?.name, props?.rules)
name: string;
rules?: RuleExpression<File>;
}>();
const { value, setValue } = useField<File>(props?.name, props?.rules);
const { t } = useI18n();
</script>
<template>
<FileUpload @onChange="(file) => {
setValue(file)
}" v-slot="{ isOverDropZone }">
<div :class="cx('bg-white/50 rounded-md p-2 w-full h-40 flex flex-col items-center justify-center border border-dashed border-black/20 cursor-pointer text-gray-500 gap-3',
isOverDropZone && '!bg-green-100/50 '
)">
<template v-if="!!value">
<FilePreviewView :value="value" />
</template>
<template v-else>
<LucideUpload class="size-10" />
<div class="text-sm">
拖拽文件 或 点击上传
</div>
</template>
<FileUpload
@onChange="
(file) => {
setValue(file);
}
"
v-slot="{ isOverDropZone }"
>
<div
:class="
cx(
'bg-white/50 rounded-md p-2 w-full h-40 flex flex-col items-center justify-center border border-dashed border-black/20 cursor-pointer text-gray-500 gap-3',
isOverDropZone && '!bg-green-100/50 ',
)
"
>
<template v-if="!!value">
<FilePreviewView :value="value" />
</template>
<template v-else>
<LucideUpload class="size-10" />
<div class="text-sm">
{{ t("file.uploadFilePlaceholder") }}
</div>
</FileUpload>
</template>
</template>
</div>
</FileUpload>
</template>