feat(front): implement ImageConvertHandle component for image format selection and conversion

front/components/Preprocessing/ImageConvertHandle.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import SelectField from '../Field/SelectField.vue'
+import FormButton from '../Field/FormButton.vue'
+import type { FileShareHandleProps } from './types'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const props = defineProps<{
+    hide: () => void
+    file: File[]
+    onFileHandle: (props: FileShareHandleProps) => void
+}>()
+</script>
+
+<template>
+    <VeeForm v-slot="{ values }" :initialValues="{ target_ext: 'jpg' }">
+        <div class="flex flex-col gap-3">
+            <h2 class="text-lg font-bold">{{ t('page.shareOptions.imageConvert.title') }}</h2>
+            <div class="flex flex-row gap-2 items-center">
+                <Label>{{ t('page.shareOptions.imageConvert.targetFormat') }}</Label>
+                <SelectField
+                    name="target_ext"
+                    :label="t('page.shareOptions.imageConvert.targetFormat')"
+                    :options="[
+                        { label: 'JPG', value: 'jpg' },
+                        { label: 'PNG', value: 'png' },
+                        { label: 'WEBP', value: 'webp' },
+                    ]"
+                    rules="required"
+                />
+            </div>
+            <FormButton
+                @click="
+                    async (form) => {
+                        onFileHandle({ type: 'file-image-convert', config: values })
+                        hide()
+                    }
+                "
+                >{{ t('btn.submit') }}</FormButton
+            >
+        </div>
+    </VeeForm>
+</template>

front/i18n/locales/en.json

@@ -59,6 +59,10 @@
                     "3days": "3 days"
                 }
             },
+            "imageConvert": {
+                "title": "Image Convert",
+                "targetFormat": "Target Format"
+            },
             "text": {
                 "title": "Share Options",
                 "viewNums": "View Count",

front/i18n/locales/zh-CN.json

@@ -59,6 +59,10 @@
                     "3days": "3天"
                 }
             },
+            "imageConvert": {
+                "title": "图片转换",
+                "targetFormat": "目标格式"
+            },
             "text": {
                 "title": "分享选项",
                 "viewNums": "浏览次数",