xyyd-fatfox/src/layout/background/CustomWallpaper.tsx

import upload, { localPrefix, uploadLocal } from '@/utils/upload'
import clsx from 'clsx'
import { defineComponent, ref, toRef } from 'vue'
import useBackgroundStore from './useBackgroundStore'
import useResource from './useResource'
import useLayoutStore from '../useLayoutStore'
import { message } from 'ant-design-vue'

export default defineComponent(() => {
  const dragging = ref(false)
  const fileInput = ref<HTMLInputElement | null>(null)
  const backgroundStore = useBackgroundStore()
  const tempFile = ref<File | null>(null)
  const tempBackground = ref('')
  const handleDrop = (e: DragEvent) => {
    e.preventDefault()
    e.stopPropagation()

    const file = e.dataTransfer?.files?.[0]
    if (!file) return
    tempBackground.value = URL.createObjectURL(file)
    tempFile.value = file
  }
  return () => (
    <div class={'w-full h-full flex flex-col items-center pt-5 pb-10 gap-y-4'}>
      <div class="flex flex-col text-center gap-y-1">
        <span class="text-[14px] text-[#333]">您可以使用图片或视频作为您的自定义壁纸</span>
        <span class="text-[12px] text-[#666]">自定义壁纸不会同步到您的账号数据</span>
      </div>
      <div
        onDragover={(e) => {
          dragging.value = true
          e.stopPropagation()
          e.preventDefault()
        }}
        onDragleave={(e) => {
          dragging.value = false
          e.stopPropagation()
          e.preventDefault()
        }}
        onDrop={handleDrop}
        onClick={() => {
          fileInput.value?.click()
        }}
        class={clsx(
          'w-[440px] h-[250px] relative  items-center cursor-pointer justify-center  border-dashed border-[1px] hover:bg-[#6b9dff1a] hover:border-[#3f80ff]  rounded-lg',

          dragging.value ? 'border-[#3f80ff] bg-[#6b9dff1a]' : 'border-transparent bg-[#ebebeb]'
        )}
        style={
          tempBackground.value
            ? {
                backgroundImage: `url(${tempBackground.value})`,
                backgroundSize: 'cover',
                backgroundRepeat: 'no-repeat'
              }
            : {}
        }
      >
        <div class={'w-full h-full absolute left-0 top-0 bottom-0 right-0 group'}>
          <div
            class={clsx(
              'w-full h-[100%] justify-center items-center  flex flex-col gap-y-1',
              tempBackground.value ? 'bg-black/50 hidden group-hover:flex' : 'flex'
            )}
          >
            <img alt="123" src={new URL('/tab/icons/uploadImg.png', import.meta.url).href}></img>
            <span
              class={clsx('text-[15px]  ', tempBackground.value ? 'text-[#fff]' : 'text-[#333]')}
            >
              点击或拖拽文件到此区域进行上传
            </span>
            <span class={clsx('text-[12px]', tempBackground.value ? 'text-[#fff]' : 'text-[#888')}>
              支持jpg/png/svg/gif/mp4等格式
            </span>
            <input
              type="file"
              ref={fileInput}
              hidden
              onChange={(e: any) => {
                const file = e.target?.files?.[0]
                if (!file) return
                tempFile.value = file
                tempBackground.value = URL.createObjectURL(file)
              }}
            />
          </div>
        </div>
      </div>
      <button
        class={clsx(
          ' px-6 py-2 rounded-lg text-white',
          tempBackground.value ? 'bg-[#ffa93d]' : 'bg-[#000]/[.1]'
        )}
        onClick={() => {
          if (tempFile.value) {
            uploadLocal(tempFile.value).then((res) => {
              useLayoutStore().changeBackground(res)

              tempFile.value = null
              tempBackground.value = ''
              message.success('应用成功')
            })
          }
        }}
      >
        确定
      </button>
    </div>
  )
})