feat(front): add FilePreviewView and FileShareHandle components for improved file preview and sharing options

front/components/Field/FileUploadField.vue

@@ -1,21 +1,13 @@
 <script setup lang="ts">
 import FileUpload from '~/components/FileUpload.vue'
 import { cx } from 'class-variance-authority'
-import { filesize } from 'filesize'
+
 
 const props = defineProps<{
     name: string
     rules?: string
 }>()
 const { value, setValue } = useField<File>(props?.name, props?.rules)
-watch(value, (v) => {
-    console.log('value', v)
-})
-
-const fileInfo = computed(() => {
-    const [, name, ext] = value?.value?.name?.match(/^(.+)\.(.+)$/) || []
-    return { name, ext }
-})
 
 </script>
 
@@ -27,14 +19,7 @@ const fileInfo = computed(() => {
             isOverDropZone && '!bg-green-100/50 '
         )">
             <template v-if="!!value">
-                <FileIcon :file="value" />
-                <div class="flex flex-col gap-0.5 items-center">
-                    <div class="flex max-w-30 w-full">
-                        <div class="truncate">{{ fileInfo?.name }}</div>
-                        <div>{{ `.${fileInfo?.ext}` }}</div>
-                    </div>
-                    <div class="text-xs opacity-50">{{ filesize(value?.size) }}</div>
-                </div>
+                <FilePreviewView :value="value" />
             </template>
             <template v-else>
                 <LucideUpload class="size-10" />

front/components/FilePreviewView.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { filesize } from 'filesize'
+const props = defineProps<{
+    value: File
+}>()
+const fileInfo = computed(() => {
+    const [, name, ext] = props?.value?.name?.match(/^(.+)\.(.+)$/) || []
+    return { name, ext }
+})
+</script>
+
+<template>
+    <FileIcon :file="value" />
+    <div class="flex flex-col gap-0.5 items-center">
+        <div class="flex max-w-30 w-full">
+            <div class="truncate">{{ fileInfo?.name }}</div>
+            <div>{{ `.${fileInfo?.ext}` }}</div>
+        </div>
+        <div class="text-xs opacity-50">{{ filesize(value?.size) }}</div>
+    </div>
+</template>

front/components/Preprocessing/FileShareHandle.vue

@@ -6,7 +6,9 @@ import FormButton from '../Field/FormButton.vue';
 const props = defineProps<{
     hide: () => void
     file: File
+    onFileHandle: ({ data, type }: { data: any, type: string }) => void
 }>()
+
 </script>
 
 <template>
@@ -40,7 +42,8 @@ const props = defineProps<{
                 <InputField v-if="!!values.has_download_notify" name="download_notify_email" placeholder="请输入邮箱" />
             </div>
             <FormButton @click="(form) => {
-                console.log(form.values)
+                onFileHandle({ data: form?.values?.value, type: 'file-share' })
+                hide()
             }">提交</FormButton>
         </div>
     </VeeForm>