自定义上传（本地）
This commit is contained in:
expdsn
parent
12119322b7
commit
3df6f6fba0
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -9,6 +9,8 @@ import request from '@/utils/request'
|
|||
import useUserStore from '@/user/useUserStore'
|
||||
import useRouterStore from '@/useRouterStore'
|
||||
import useBackgroundStore from './useBackgroundStore'
|
||||
import { Button } from 'ant-design-vue'
|
||||
import CustomWallpaper from './CustomWallpaper'
|
||||
|
||||
addIcons(BiChevronLeft, BiChevronDown)
|
||||
|
||||
|
|
@ -52,6 +54,7 @@ export default defineComponent(() => {
|
|||
const wallpaperList = ref<WallpaperItem[]>([])
|
||||
const selectAttr = ref(0)
|
||||
const userStore = useUserStore()
|
||||
|
||||
const sortBy = ref<'hotNum' | 'time'>('hotNum')
|
||||
onMounted(() => {
|
||||
request<BackgroundType[]>('GET', '/api/backgroundTypes').then((res) => {
|
||||
|
|
@ -63,6 +66,7 @@ export default defineComponent(() => {
|
|||
watch(
|
||||
() => [selectType.value, sortBy.value],
|
||||
(e) => {
|
||||
if (!e[0]) return
|
||||
wallpaperList.value = []
|
||||
request<WallpaperItem[]>('GET', `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(
|
||||
(res) => {
|
||||
|
|
@ -76,7 +80,7 @@ export default defineComponent(() => {
|
|||
}
|
||||
)
|
||||
watch(selectAttr, (e) => {
|
||||
selectType.value = typeList.value.filter((val) => val.attr === e)[0].id || ''
|
||||
selectType.value = typeList.value.filter((val) => val.attr === e)[0]?.id || ''
|
||||
})
|
||||
return () => (
|
||||
<div
|
||||
|
|
@ -104,112 +108,126 @@ export default defineComponent(() => {
|
|||
<button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
|
||||
</div>
|
||||
<div class="flex-1 h-0 relative">
|
||||
<div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
|
||||
<div class="flex justify-between items-center ">
|
||||
<div class="flex-1 w-0">
|
||||
<CategoryTab
|
||||
v-slots={{
|
||||
select: (text: string) => (
|
||||
<button
|
||||
class={clsx(
|
||||
'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
||||
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]'
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
),
|
||||
unSelect: (text: string) => (
|
||||
<button
|
||||
class={clsx(
|
||||
'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
||||
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]'
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
)
|
||||
}}
|
||||
list={typeList.value.filter((val) => val.attr === selectAttr.value)}
|
||||
selectType={selectType.value}
|
||||
onUpdate:type={(e) => {
|
||||
selectType.value = e
|
||||
}}
|
||||
></CategoryTab>
|
||||
{selectAttr.value !== 2 ? (
|
||||
<div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
|
||||
<div class="flex justify-between items-center ">
|
||||
<div class="flex-1 w-0">
|
||||
<CategoryTab
|
||||
v-slots={{
|
||||
select: (text: string) => (
|
||||
<button
|
||||
class={clsx(
|
||||
'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
||||
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]'
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
),
|
||||
unSelect: (text: string) => (
|
||||
<button
|
||||
class={clsx(
|
||||
'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
||||
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]'
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
)
|
||||
}}
|
||||
list={typeList.value.filter((val) => val.attr === selectAttr.value)}
|
||||
selectType={selectType.value}
|
||||
onUpdate:type={(e) => {
|
||||
selectType.value = e
|
||||
}}
|
||||
></CategoryTab>
|
||||
</div>
|
||||
|
||||
<div class="relative w-[100px]">
|
||||
<select
|
||||
onChange={(e: any) => {
|
||||
sortBy.value = e.target.value
|
||||
}}
|
||||
value={sortBy.value}
|
||||
class={clsx(
|
||||
' block w-full appearance-none rounded-lg border-none py-1.5 px-3 text-sm/6 ',
|
||||
'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
|
||||
// Make the text of each option black on Windows
|
||||
'*:text-black',
|
||||
isGame.value ? 'text-white bg-white/5' : 'text-[#333] bg-black/5'
|
||||
)}
|
||||
>
|
||||
<option value="hotNum">按热度</option>
|
||||
<option value="time">按最新</option>
|
||||
</select>
|
||||
<OhVueIcon
|
||||
fill={isGame.value ? 'white' : 'black'}
|
||||
name={BiChevronDown.name}
|
||||
class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative w-[100px]">
|
||||
<select
|
||||
onChange={(e: any) => {
|
||||
sortBy.value = e.target.value
|
||||
}}
|
||||
value={sortBy.value}
|
||||
class={clsx(
|
||||
' block w-full appearance-none rounded-lg border-none py-1.5 px-3 text-sm/6 ',
|
||||
'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
|
||||
// Make the text of each option black on Windows
|
||||
'*:text-black',
|
||||
isGame.value ? 'text-white bg-white/5' : 'text-[#333] bg-black/5'
|
||||
)}
|
||||
>
|
||||
<option value="hotNum">按热度</option>
|
||||
<option value="time">按最新</option>
|
||||
</select>
|
||||
<OhVueIcon
|
||||
fill={isGame.value ? 'white' : 'black'}
|
||||
name={BiChevronDown.name}
|
||||
class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 w-full h-0 flex relative">
|
||||
<div class="w-full h-full overflow-y-scroll">
|
||||
<div class="w-full grid grid-cols-3 gap-4 ">
|
||||
{wallpaperList.value.map((item) => (
|
||||
<div
|
||||
onClick={() => {}}
|
||||
class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={item.url + '?x-oss-process=image/resize,w_300'}
|
||||
class=" duration-150 absolute w-full h-full object-cover flex-grow-0 rounded-xl group-hover:scale-[1.2]"
|
||||
/>
|
||||
<div class="flex-1 w-full h-0 flex relative">
|
||||
<div class="w-full h-full overflow-y-scroll">
|
||||
<div class="w-full grid grid-cols-3 gap-4 ">
|
||||
{wallpaperList.value.map((item) => (
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 bottom-0 "
|
||||
style={{
|
||||
background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
|
||||
onClick={() => {
|
||||
layout.changeBackground(item.url)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={item.url + '?x-oss-process=image/resize,w_300'}
|
||||
class=" duration-150 absolute w-full h-full object-cover flex-grow-0 rounded-xl group-hover:scale-[1.2]"
|
||||
/>
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 bottom-0 "
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 自定义 */}
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
|
||||
{wallpaperAttrList.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => {
|
||||
if (index === 2) {
|
||||
if (!userStore.isLogin) {
|
||||
router.go('global-login')
|
||||
}
|
||||
) : (
|
||||
<CustomWallpaper></CustomWallpaper>
|
||||
)}
|
||||
|
||||
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
|
||||
{wallpaperAttrList.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => {
|
||||
console.log(index)
|
||||
|
||||
if (index === 2) {
|
||||
if (!userStore.isLogin) {
|
||||
router.go('global-login')
|
||||
return
|
||||
}
|
||||
selectAttr.value = index
|
||||
}}
|
||||
class={clsx(
|
||||
'px-8 py-2 rounded-[8px]',
|
||||
index === selectAttr.value
|
||||
? 'bg-white text-[#333]'
|
||||
: 'cursor-pointer text-white hover:bg-white/[.4]'
|
||||
)}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
||||
selectAttr.value = index
|
||||
}}
|
||||
class={clsx(
|
||||
'px-8 py-2 rounded-[8px]',
|
||||
index === selectAttr.value
|
||||
? 'bg-white text-[#333]'
|
||||
: 'cursor-pointer text-white hover:bg-white/[.4]'
|
||||
)}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
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>
|
||||
)
|
||||
})
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { defineComponent } from 'vue'
|
||||
import { defineComponent, ref, Transition, watch } from 'vue'
|
||||
import useLayoutStore from '../useLayoutStore'
|
||||
import useSettingsStore from '@/settings/useSettingsStore'
|
||||
|
||||
|
|
@ -6,18 +6,35 @@ export default defineComponent({
|
|||
setup() {
|
||||
const layout = useLayoutStore()
|
||||
const settings = useSettingsStore()
|
||||
const trriger = ref(true)
|
||||
watch(layout.background, () => {
|
||||
trriger.value = false
|
||||
setTimeout(() => {
|
||||
trriger.value = true
|
||||
},0)
|
||||
})
|
||||
return () => (
|
||||
|
||||
<div class="absolute left-0 top-0 w-full h-screen z-0">
|
||||
{layout.background.video ? (
|
||||
<video src={layout.background.video} class="w-full h-full" />
|
||||
) : (
|
||||
<div
|
||||
class="w-full h-full bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${layout.background.image}')`
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
<Transition name="background">
|
||||
{
|
||||
trriger.value &&
|
||||
<>
|
||||
{layout.background.video ? (
|
||||
<video src={layout.background.video} class="w-full h-full" />
|
||||
) : (
|
||||
<div
|
||||
class="w-full h-full bg-center bg-cover bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url('${layout.background.image}')`
|
||||
}}
|
||||
></div>
|
||||
)}
|
||||
</>
|
||||
|
||||
}
|
||||
|
||||
</Transition>
|
||||
<div
|
||||
class="absolute left-0 top-0 w-full h-full bg-black"
|
||||
style={{
|
||||
|
|
@ -27,6 +44,9 @@ export default defineComponent({
|
|||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
18
src/main.css
18
src/main.css
|
|
@ -183,4 +183,22 @@ body {
|
|||
scrollbar-width: thin;
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.background-enter-active {
|
||||
animation: bounce-in .8s;
|
||||
}
|
||||
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,9 @@ import { ossBase } from './../config'
|
|||
import OSS from 'ali-oss'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import request from './request'
|
||||
import db from '@/db'
|
||||
export const localPrefix = '__local_resource_'
|
||||
|
||||
export default async function upload(file: File, root: string) {
|
||||
const token = localStorage.getItem('token')
|
||||
if (!token) {
|
||||
|
|
@ -32,3 +35,14 @@ export default async function upload(file: File, root: string) {
|
|||
})
|
||||
return ossBase + '/' + name
|
||||
}
|
||||
export async function uploadLocal(file: File) {
|
||||
const id = uuid()
|
||||
const list = await db.getItem<{ tag: string; file: Blob; type: 'image' | 'video' }[]>('localList') || []
|
||||
list.push({
|
||||
tag: id,
|
||||
file: file,
|
||||
type: 'image'
|
||||
})
|
||||
await db.setItem('localList', list)
|
||||
return id
|
||||
}
|
||||
Loading…
Reference in New Issue