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

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>