135 lines
4.6 KiB
TypeScript
135 lines
4.6 KiB
TypeScript
import upload, { localPrefix, uploadLocal } from '@/utils/upload'
|
|
import clsx from 'clsx'
|
|
import { computed, defineComponent, ref, toRef } from 'vue'
|
|
import useBackgroundStore from './useBackgroundStore'
|
|
import useResource from './useResource'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
import { message } from 'ant-design-vue'
|
|
import { BgContent } from '.'
|
|
|
|
export default defineComponent(() => {
|
|
const dragging = ref(false)
|
|
const fileInput = ref<HTMLInputElement | null>(null)
|
|
const backgroundStore = useBackgroundStore()
|
|
const tempFile = ref<File | null>(null)
|
|
const layout = useLayoutStore()
|
|
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
|
|
}
|
|
const showImg = computed(() => {
|
|
if (tempBackground.value) {
|
|
return tempBackground.value
|
|
}
|
|
if (backgroundStore.state.isCustom) {
|
|
return layout.background.video? layout.background.video: layout.background.image
|
|
}
|
|
return ''
|
|
})
|
|
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'
|
|
// }
|
|
// : backgroundStore.state.isCustom
|
|
// ? {
|
|
// backgroundImage: `url(${backgroundStore.tag})`,
|
|
// backgroundSize: 'cover',
|
|
// backgroundRepeat: 'no-repeat'
|
|
// }
|
|
// : null
|
|
// }
|
|
>
|
|
<div class={'absolute top-0 left-0 w-full h-full'}>
|
|
<BgContent
|
|
image={showImg.value}
|
|
video={showImg.value.split('.').pop() === 'mp4' ? tempBackground.value : undefined}
|
|
></BgContent>
|
|
</div>
|
|
<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={'/tab/icons/uploadImg.png'}></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)
|
|
backgroundStore.state.isCustom = true
|
|
tempFile.value = null
|
|
tempBackground.value = ''
|
|
message.success('应用成功')
|
|
})
|
|
}
|
|
}}
|
|
>
|
|
确定
|
|
</button>
|
|
</div>
|
|
)
|
|
})
|