feat: enhance FileIcon and FileUpload components to support size prop and multi-file uploads, improving user experience and flexibility

front/components/Field/FileUploadField.vue

@@ -28,9 +28,9 @@ useEventListener(document, 'paste', (evt: ClipboardEvent) => {
 <template>
     <FileUpload
         @onChange="
-            (file) => {
+            (files) => {
                 // 这里没hash，我们姑且认为name和size,type都一样的为同一个文件
-                setValue([...filterOutSameFile(value, [file]), file])
+                setValue([...filterOutSameFile(value, files), ...files])
             }
         "
         v-slot="{ isOverDropZone }"

front/components/FileIcon.vue

@@ -7,10 +7,16 @@ export type filePreview = {
 }
 
 import { LucideFileAudio, LucideFileVideo, LucideFile, LucideFileCode, LucideFileArchive, LucideFileText } from 'lucide-vue-next'
-const props = defineProps<{
-    file: File | filePreview
-    class?: string
-}>()
+const props = withDefaults(
+    defineProps<{
+        file: File | filePreview
+        class?: string
+        size?: 'sm' | 'md' | 'lg'
+    }>(),
+    {
+        size: 'md',
+    }
+)
 const imageUrl = computed(() => {
     if (props?.file?.type?.startsWith('image/') && props?.file instanceof File) {
         return URL.createObjectURL(props?.file)
@@ -56,12 +62,20 @@ const fileIcon = computed(() => {
 </script>
 
 <template>
-    <div v-if="!!imageUrl" class="flex max-w-30 max-h-20">
-        <div class="object-contain m-auto h-full">
-            <img :src="imageUrl" class="w-full h-full border border-black/20 rounded" />
-        </div>
+    <div v-if="!!imageUrl" :class="cx('flex overflow-hidden', size === 'sm' && 'max-w-20 max-h-16', size === 'md' && 'max-w-30 max-h-20')">
+        <img :src="imageUrl" class="block max-w-full max-h-full object-contain border border-black/20 rounded" />
     </div>
-    <div v-if="!imageUrl" :class="cx('flex justify-center items-center rounded-xl bg-white/80 size-16', props?.class)">
+    <div
+        v-if="!imageUrl"
+        :class="
+            cx(
+                'flex justify-center items-center bg-white/80',
+                size === 'sm' && 'size-7 rounded-md',
+                size === 'md' && 'size-16 rounded-xl',
+                props?.class
+            )
+        "
+    >
         <component :is="fileIcon" class="size-[62.5%]" />
     </div>
 </template>

front/components/FileUpload.vue

@@ -3,63 +3,63 @@ import { useDropZone } from '@vueuse/core'
 const dropZoneRef = ref()
 
 const props = defineProps<{
-  accept?: string[]
+    accept?: string[]
 }>()
 
 const accept = computed(() => (props?.accept || ['*'])?.join(','))
 
 const emit = defineEmits<{
-  (e: 'onChange', file: File): void
+    (e: 'onChange', file: File[]): void
 }>()
 
 const { isOverDropZone } = useDropZone(dropZoneRef, {
-  onDrop: (file) => {
-    if (file?.[0]) {
-      emit('onChange', file?.[0])
-    }
-  },
-  // 指定要接收的数据类型
-  dataTypes: (types) => {
-    for (const type of types) {
-      for (const acceptType of accept.value.split(',')) {
-        if (acceptType === '*') {
-          return true
+    onDrop: (file) => {
+        if (!!file && file?.length > 0) {
+            emit('onChange', file)
         }
-        if (acceptType?.endsWith('*')) {
-          const [acceptTypePrefix,] = acceptType?.split('/')
-          if (!acceptTypePrefix) {
-            return true
-          }
-          if (type?.startsWith(acceptTypePrefix)) {
-            return true
-          }
+    },
+    // 指定要接收的数据类型
+    dataTypes: (types) => {
+        for (const type of types) {
+            for (const acceptType of accept.value.split(',')) {
+                if (acceptType === '*') {
+                    return true
+                }
+                if (acceptType?.endsWith('*')) {
+                    const [acceptTypePrefix] = acceptType?.split('/')
+                    if (!acceptTypePrefix) {
+                        return true
+                    }
+                    if (type?.startsWith(acceptTypePrefix)) {
+                        return true
+                    }
+                }
+                if (acceptType === type) {
+                    return true
+                }
+            }
         }
-        if (acceptType === type) {
-          return true
-        }
-      }
-    }
-    return false
-  },
-  // 控制多文件拖放
-  multiple: false,
-  // 是否阻止未处理事件的默认行为
-  preventDefaultForUnhandled: false,
+        return false
+    },
+    // 控制多文件拖放
+    multiple: true,
+    // 是否阻止未处理事件的默认行为
+    preventDefaultForUnhandled: false,
 })
 
 const { open, onChange } = useFileDialog({
-  accept: accept.value, // Set to accept only image files
-  directory: false,
+    accept: accept.value, // Set to accept only image files
+    directory: false,
 })
 onChange((files) => {
-  if (files?.[0]) {
-    emit('onChange', files?.[0])
-  }
+    if (!!files && files?.length > 0) {
+        emit('onChange', Array.from(files))
+    }
 })
 </script>
 
 <template>
-  <div ref="dropZoneRef" @click="open">
-    <slot :isOverDropZone="isOverDropZone" />
-  </div>
-</template>
+    <div ref="dropZoneRef" @click="open">
+        <slot :isOverDropZone="isOverDropZone" />
+    </div>
+</template>

front/components/Result/FileShareResult.vue

@@ -2,7 +2,7 @@
 import { Button } from '@/components/ui/button'
 import FilePreviewView from '@/components/FilePreviewView.vue'
 import { Input } from '@/components/ui/input'
-import { useClipboard } from '@vueuse/core'
+import { useClipboard, useShare } from '@vueuse/core'
 import { toast } from 'vue-sonner'
 import { useQuery } from '@tanstack/vue-query'
 import useMyAppShare from '@/composables/useMyAppShare'
@@ -44,16 +44,30 @@ watchEffect(() => {
     }
 })
 
-watchEffect(() => {
-    console.log('data', data?.value)
-})
-
 const appConfig = useMyAppConfig()
 const getShareUrl = (id: string) => {
     return `${appConfig?.value?.site_url}/s/${id}`
 }
 
 const { copy } = useClipboard()
+const { share, isSupported: isShareSupported } = useShare()
+
+const handleShare = async (id: string, fileName?: string) => {
+    await share({
+        title: fileName || 'File Share',
+        url: getShareUrl(id),
+    })
+}
+
+const handleShowQrCode = (id: string) => {
+    showDrawer({
+        render: ({ ...rest }) =>
+            h(QrCoreDrawer, {
+                ...rest,
+                data: getShareUrl(id),
+            }),
+    })
+}
 </script>
 
 <template>
@@ -77,16 +91,26 @@ const { copy } = useClipboard()
                     <div class="flex flex-row items-center gap-2 flex-1 min-w-0">
                         <FileIcon
                             :file="props?.data?.files?.[data?.findIndex((i) => i?.id === file?.id) as number]?.file as File"
-                            :class="cx('!size-7 !rounded-md shrink-0', selectedFile === file?.id && '!bg-white/50')"
+                            size="sm"
+                            :class="cx('shrink-0', selectedFile === file?.id && 'bg-white/50!')"
                         />
                         <div class="text-sm flex-1 truncate">{{ file?.file_name }}</div>
                     </div>
                     <div class="flex flex-row items-center gap-2 shrink-0">
                         <Button
+                            v-if="isShareSupported"
                             variant="outline"
                             :class="cx('bg-white/70', selectedFile === file?.id && '!bg-white/30 border-none hover:text-white/80')"
                             size="icon"
-                            @click="
+                            @click.stop="handleShare(file?.id as string, file?.file_name)"
+                        >
+                            <LucideShare />
+                        </Button>
+                        <Button
+                            variant="outline"
+                            :class="cx('bg-white/70', selectedFile === file?.id && '!bg-white/30 border-none hover:text-white/80')"
+                            size="icon"
+                            @click.stop="
                                 () => {
                                     copy(getShareUrl(file?.id as string))
                                     toast.success(t('page.result.file.copySuccess'))
@@ -99,17 +123,7 @@ const { copy } = useClipboard()
                             variant="outline"
                             :class="cx('bg-white/70', selectedFile === file?.id && '!bg-white/30 border-none hover:text-white/80')"
                             size="icon"
-                            @click="
-                                () => {
-                                    showDrawer({
-                                        render: ({ ...rest }) =>
-                                            h(QrCoreDrawer, {
-                                                ...rest,
-                                                data: getShareUrl(file?.id as string),
-                                            }),
-                                    })
-                                }
-                            "
+                            @click.stop="handleShowQrCode(file?.id as string)"
                         >
                             <LucideQrCode />
                         </Button>
@@ -159,6 +173,20 @@ const { copy } = useClipboard()
                     <div class="text-sm font-semibold">{{ t('page.result.file.link') }}</div>
                     <div class="flex flex-row gap-2">
                         <Input :model-value="getShareUrl(selectedFileShare?.id as string)" class="bg-white/70" readonly />
+                        <Button
+                            v-if="isShareSupported"
+                            variant="outline"
+                            class="bg-white/70"
+                            size="icon"
+                            @click="
+                                handleShare(
+                                    selectedFileShare?.id as string,
+                                    props?.data?.files?.[data?.findIndex((item) => item?.id === selectedFileShare?.id) as number]?.file?.name
+                                )
+                            "
+                        >
+                            <LucideShare />
+                        </Button>
                         <Button
                             variant="outline"
                             class="bg-white/70"
@@ -173,22 +201,7 @@ const { copy } = useClipboard()
                             <LucideCopy />
                         </Button>
 
-                        <Button
-                            variant="outline"
-                            class="bg-white/70"
-                            size="icon"
-                            @click="
-                                () => {
-                                    showDrawer({
-                                        render: ({ ...rest }) =>
-                                            h(QrCoreDrawer, {
-                                                ...rest,
-                                                data: getShareUrl(selectedFileShare?.id as string),
-                                            }),
-                                    })
-                                }
-                            "
-                        >
+                        <Button variant="outline" class="bg-white/70" size="icon" @click="handleShowQrCode(selectedFileShare?.id as string)">
                             <LucideQrCode />
                         </Button>
                     </div>