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

front/components/Drawer/FileShareDrawer.vue

@@ -15,7 +15,7 @@ import { cx } from "class-variance-authority";
 import { isObject } from "lodash-es";
 import showDrawer from "@/lib/showDrawer";
 import FileShareHandle from "@/components/Preprocessing/FileShareHandle.vue";
-
+const { t } = useI18n();
 const props = defineProps<{
   hide: () => void;
   file: File;
@@ -40,7 +40,7 @@ const isDocument = computed(
 );
 const actions = [
   {
-    label: "分享文件",
+    label: t("file.handleType.file-share"),
     icon: LucideShare,
     className: "bg-green-300",
     onClick: () => {
@@ -50,7 +50,7 @@ const actions = [
     },
   },
   isImage.value && {
-    label: "图片压缩",
+    label: t("file.handleType.file-image-compress"),
     icon: LucideImageMinus,
     className: "bg-red-300",
     onClick: () => {
@@ -91,11 +91,11 @@ const actions = [
 </script>
 <template>
   <div class="flex flex-col gap-5 p-5">
-    <div class="flex flex-row gap-5">
+    <div class="flex flex-row gap-2">
       <div
         v-for="item in actions"
         :key="item.label"
-        class="flex flex-col items-center gap-2"
+        class="flex flex-col items-center gap-2 max-w-20"
         @click="
           () => {
             props?.hide();
@@ -106,14 +106,14 @@ const actions = [
         <div
           :class="
             cx(
-              'size-14 flex justify-center items-center rounded-full',
+              'size-14 flex justify-center items-center rounded-full mx-3',
               item?.className,
             )
           "
         >
           <component :is="item?.icon" />
         </div>
-        <div class="text-sm">{{ item?.label }}</div>
+        <div class="text-xs truncate w-full text-center">{{ item?.label }}</div>
       </div>
     </div>
   </div>

front/components/Drawer/TextShareDrawer.vue

@@ -14,9 +14,10 @@ const props = defineProps<{
   text: string;
   onTextHandle: ({ type, config }: { type: string; config: any }) => void;
 }>();
+const { t } = useI18n();
 const actions = [
   {
-    label: "分享文本",
+    label: t("text.handleType.text-share"),
     icon: LucideShare,
     className: "bg-green-300",
     onClick: () => {
@@ -44,11 +45,11 @@ const actions = [
 </script>
 <template>
   <div class="flex flex-col gap-5 p-5">
-    <div class="flex flex-row gap-5">
+    <div class="flex flex-row gap-2">
       <div
         v-for="item in actions"
         :key="item.label"
-        class="flex flex-col items-center gap-2"
+        class="flex flex-col items-center gap-2 max-w-20"
         @click="
           () => {
             props?.hide();
@@ -59,14 +60,14 @@ const actions = [
         <div
           :class="
             cx(
-              'size-14 flex justify-center items-center rounded-full',
+              'size-14 flex justify-center items-center rounded-full mx-3',
               item?.className,
             )
           "
         >
           <component :is="item?.icon" />
         </div>
-        <div class="text-sm">{{ item?.label }}</div>
+        <div class="text-xs truncate w-full text-center">{{ item?.label }}</div>
       </div>
     </div>
   </div>

front/components/Field/FileUploadField.vue

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

front/components/Home/File/FileUploadInputFileView.vue

@@ -1,38 +1,42 @@
 <script lang="ts" setup>
-import showDrawer from '@/lib/showDrawer'
-import FileShareDrawer from '@/components/Drawer/FileShareDrawer.vue'
-import FileUploadField from '@/components/Field/FileUploadField.vue'
-import FormButton from '@/components/Field/FormButton.vue'
-import PickupShareBtn from '@/components/PickupShareBtn.vue'
+import showDrawer from "@/lib/showDrawer";
+import FileShareDrawer from "@/components/Drawer/FileShareDrawer.vue";
+import FileUploadField from "@/components/Field/FileUploadField.vue";
+import FormButton from "@/components/Field/FormButton.vue";
+import PickupShareBtn from "@/components/PickupShareBtn.vue";
 
 const emit = defineEmits<{
-    (e: 'change', key: string): void
-}>()
+  (e: "change", key: string): void;
+}>();
+
+const { t } = useI18n();
 
 const handleFormSubmit = async (form: any) => {
-  const { file } = form?.values || {}
+  const { file } = form?.values || {};
   showDrawer({
-    render: ({ hide }) => h(FileShareDrawer, {
-      hide, file, onFileHandle: ({ type, config }) => {
-        form.setFieldValue('handle_type', type)
-        form.setFieldValue('config', config)
-        emit('change', 'progress')
-      }
-    })
-  })
-}
+    render: ({ hide }) =>
+      h(FileShareDrawer, {
+        hide,
+        file,
+        onFileHandle: ({ type, config }) => {
+          form.setFieldValue("handle_type", type);
+          form.setFieldValue("config", config);
+          emit("change", "progress");
+        },
+      }),
+  });
+};
 </script>
 
-
 <template>
-    <div class="gap-5 flex flex-col">
-        <div class="text-xl font-normal">上传文件</div>
-        <FileUploadField name="file" rules="required" />
-        <div class="flex flex-row gap-3">
-            <FormButton @click="handleFormSubmit">
-                <LucideShare class="size-4" />提交
-            </FormButton>
-            <PickupShareBtn />
-        </div>
+  <div class="gap-5 flex flex-col">
+    <div class="text-xl font-normal">{{ t("file.uploadFile") }}</div>
+    <FileUploadField name="file" rules="required" />
+    <div class="flex flex-row gap-3">
+      <FormButton @click="handleFormSubmit">
+        <LucideShare class="size-4" />{{ t("btn.submit") }}
+      </FormButton>
+      <PickupShareBtn />
     </div>
-</template>
+  </div>
+</template>

front/components/Home/Text/TextUploadInputTextView.vue

@@ -1,46 +1,74 @@
 <script lang="ts" setup>
-import MarkdownInputField from '@/components/Field/MarkdownInputField.vue'
-import FormButton from '@/components/Field/FormButton.vue'
-import Button from '@/components/ui/button/Button.vue'
-import showDrawer from '@/lib/showDrawer'
-import { h } from 'vue'
-import TextShareDrawer from '@/components/Drawer/TextShareDrawer.vue'
-import { cx } from 'class-variance-authority'
-import PickupShareBtn from '@/components/PickupShareBtn.vue'
-const form = useFormContext()
+import MarkdownInputField from "@/components/Field/MarkdownInputField.vue";
+import FormButton from "@/components/Field/FormButton.vue";
+import Button from "@/components/ui/button/Button.vue";
+import showDrawer from "@/lib/showDrawer";
+import { h } from "vue";
+import TextShareDrawer from "@/components/Drawer/TextShareDrawer.vue";
+import { cx } from "class-variance-authority";
+import PickupShareBtn from "@/components/PickupShareBtn.vue";
+const form = useFormContext();
+const { t } = useI18n();
 
 const emit = defineEmits<{
-    (e: 'change', key: string): void
-}>()
+  (e: "change", key: string): void;
+}>();
 
-const handleTextShare = ({ type, config }: { type: string, config: any }) => {
-    form?.setFieldValue('handle_type', type)
-    form?.setFieldValue('config', config)
-    emit('change', 'result')
-}
+const handleTextShare = ({ type, config }: { type: string; config: any }) => {
+  form?.setFieldValue("handle_type", type);
+  form?.setFieldValue("config", config);
+  emit("change", "result");
+};
 </script>
 <template>
-    <div class="gap-5 flex flex-col">
-        <div class="text-xl font-normal">输入文本</div>
-        <div class="relative">
-            <MarkdownInputField name="text" placeholder="使用我们的文本处理器轻松分享，翻译，总结，生成图片，询问大模型"
-                class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10" rules="required" />
-            <Button variant="ghost" size="icon" :class="cx('absolute right-2 top-2 hover:bg-black/10 transition-all duration-300',
-                form?.values.text?.length > 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'
-            )" @click="() => {
-                form?.setValues({ text: '' })
-            }">
-                <LucideX />
-            </Button>
-        </div>
-        <div class="flex flex-row gap-3">
-            <FormButton @click="async (form) => {
-                const { text } = form?.values || {}
-                showDrawer({ render: ({ hide }) => h(TextShareDrawer, { hide, text, onTextHandle: handleTextShare }) })
-            }">
-                <LucideShare class="size-4" />提交
-            </FormButton>
-            <PickupShareBtn />
-        </div>
+  <div class="gap-5 flex flex-col">
+    <div class="text-xl font-normal">{{ t("text.uploadText") }}</div>
+    <div class="relative">
+      <MarkdownInputField
+        name="text"
+        :placeholder="t('text.uploadTextPlaceholder')"
+        class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10"
+        rules="required"
+      />
+      <Button
+        variant="ghost"
+        size="icon"
+        :class="
+          cx(
+            'absolute right-2 top-2 hover:bg-black/10 transition-all duration-300',
+            form?.values.text?.length > 0
+              ? 'opacity-100'
+              : 'opacity-0 pointer-events-none',
+          )
+        "
+        @click="
+          () => {
+            form?.setValues({ text: '' });
+          }
+        "
+      >
+        <LucideX />
+      </Button>
     </div>
-</template>
+    <div class="flex flex-row gap-3">
+      <FormButton
+        @click="
+          async (form) => {
+            const { text } = form?.values || {};
+            showDrawer({
+              render: ({ hide }) =>
+                h(TextShareDrawer, {
+                  hide,
+                  text,
+                  onTextHandle: handleTextShare,
+                }),
+            });
+          }
+        "
+      >
+        <LucideShare class="size-4" />{{ t("btn.submit") }}
+      </FormButton>
+      <PickupShareBtn />
+    </div>
+  </div>
+</template>

front/i18n/locales/en.json

@@ -9,6 +9,24 @@
   "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"
+  },
+  "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"
+    }
+  },
   "about": {
     "file": "File",
     "task": "Task",

front/i18n/locales/zh-CN.json

@@ -9,6 +9,24 @@
   "seo": {
     "desc": "015 是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享"
   },
+  "btn": {
+    "submit": "提交"
+  },
+  "file": {
+    "uploadFile": "上传文件",
+    "uploadFilePlaceholder": "拖拽文件 或 点击上传",
+    "handleType": {
+      "file-share": "文件分享",
+      "file-image-compress": "图片压缩"
+    }
+  },
+  "text": {
+    "uploadText": "上传文本",
+    "uploadTextPlaceholder": "使用我们的文本处理器轻松分享，翻译，总结，生成图片，询问大模型",
+    "handleType": {
+      "text-share": "文本分享"
+    }
+  },
   "about": {
     "file": "文件",
     "task": "任务",