015/front/components/Drawer/FileShareDrawer.vue

<script setup lang="ts">
import {
    LucideShare,
    LucideImage,
    LucideBot,
    LucideLanguages,
    LucideFileText,
    LucideImageMinus,
    LucideArrowRightLeft,
    LucideImagePlus,
    LucideAudioLines,
    LucideListMusic,
} from 'lucide-vue-next'
import { cx } from 'class-variance-authority'
import { isObject } from 'lodash-es'
import showDrawer from '@/lib/showDrawer'
import FileShareHandle from '@/components/Preprocessing/FileShareHandle.vue'
import ImageConvertHandle from '@/components/Preprocessing/ImageConvertHandle.vue'
import type { FileShareHandleProps } from '../Preprocessing/types'
const { t } = useI18n()
const props = defineProps<{
    hide: () => void
    file: File[]
    onFileHandle: (props: FileShareHandleProps) => void
}>()

const isImage = computed(() => props.file.every((r) => r?.type?.startsWith('image/')))
const isVideo = computed(() => props.file.every((r) => r?.type?.startsWith('video/')))
const isAudio = computed(() => props.file.every((r) => r?.type?.startsWith('audio/')))
const isMedia = computed(() => isImage.value || isVideo.value || isAudio.value)

const isPDF = computed(() => props.file.every((r) => r?.type?.startsWith('application/pdf')))
const isDOC = computed(() => props.file.every((r) => r?.type?.startsWith('application/msword')))
const isXLS = computed(() => props.file.every((r) => r?.type?.startsWith('application/vnd.ms-excel')))
const isPPT = computed(() => props.file.every((r) => r?.type?.startsWith('application/vnd.ms-powerpoint')))
const isDocument = computed(() => isPDF.value || isDOC.value || isXLS.value || isPPT.value)
const actions = [
    {
        label: t('page.upload.file.handleType.file-share'),
        icon: LucideShare,
        className: 'bg-green-300',
        onClick: () => {
            showDrawer({
                render: ({ hide }) => h(FileShareHandle, { ...props, hide }),
            })
        },
    },
    isImage.value && {
        label: t('page.upload.file.handleType.file-image-compress'),
        icon: LucideImageMinus,
        className: 'bg-red-300',
        onClick: () => {
            props.onFileHandle({ type: 'file-image-compress', config: {} })
        },
    },
    isImage.value && {
        label: t('page.upload.file.handleType.file-image-convert'),
        icon: LucideArrowRightLeft,
        className: 'bg-purple-300',
        onClick: () => {
            showDrawer({
                render: ({ hide }) => h(ImageConvertHandle, { ...props, hide }),
            })
        },
    },
    // isImage.value && {
    //     label: '图片翻译', icon: LucideLanguages, className: 'bg-orange-300', onClick: () => {
    //         console.log('复制链接')
    //     }
    // },
    // isImage.value && {
    //     label: '图片超分', icon: LucideImagePlus, className: 'bg-cyan-300', onClick: () => {
    //         console.log('复制链接')
    //     }
    // },
    // (isAudio.value || isVideo.value) && {
    //     label: '转文本', icon: LucideListMusic, className: 'bg-cyan-300', onClick: () => {
    //         console.log('复制链接')
    //     }
    // },
    // isAudio.value && {
    //     label: '语音克隆', icon: LucideAudioLines, className: 'bg-cyan-300', onClick: () => {
    //         console.log('复制链接')
    //     }
    // },
    // (isDocument.value || isMedia.value) && {
    //     label: '格式转换', icon: LucideArrowRightLeft, className: 'bg-purple-300', onClick: () => {
    //         console.log('复制链接')
    //     }
    // },
]?.filter(isObject) as {
    label: string
    icon: any
    className: string
    onClick: () => void
}[]
</script>
<template>
    <div class="flex flex-col gap-5 p-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 max-w-20"
                @click="
                    () => {
                        props?.hide()
                        item?.onClick()
                    }
                "
            >
                <div :class="cx('size-14 flex justify-center items-center rounded-full mx-3', item?.className)">
                    <component :is="item?.icon" />
                </div>
                <div class="text-xs truncate w-full text-center">{{ item?.label }}</div>
            </div>
        </div>
    </div>
</template>