113 lines
3.7 KiB
TypeScript
113 lines
3.7 KiB
TypeScript
|
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="/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)
|
||
|
|
|
||
|
|
tempFile.value = null
|
||
|
|
tempBackground.value = ''
|
||
|
|
message.success('应用成功')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
确定
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})
|