自定义上传（本地）

src/layout/background/BackgroundSwtich.tsx

@@ -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,6 +108,7 @@ 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">
+        {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">
@@ -163,12 +168,15 @@ export default defineComponent(() => {
                 />
               </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={() => {}}
+                      onClick={() => {
+                        layout.changeBackground(item.url)
+                      }}
                       class="h-[156px] relative cursor-pointer group w-full  flex-grow-0 rounded-xl overflow-hidden"
                     >
                       <img
@@ -178,7 +186,8 @@ export default defineComponent(() => {
                       <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%)'
+                          background:
+                            'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
                         }}
                       />
                     </div>
@@ -186,17 +195,27 @@ export default defineComponent(() => {
                 </div>
               </div>
             </div>
+
+            {/* 自定义 */}
+          </div>
+        ) : (
+          <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(
@@ -212,6 +231,5 @@ export default defineComponent(() => {
         </div>
       </div>
     </div>
-    </div>
   )
 })

src/layout/background/CustomWallpaper.tsx

@@ -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>
+  )
+})

src/layout/background/index.tsx

@@ -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,8 +6,20 @@ 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">
+        <Transition name="background">
+          {
+            trriger.value &&
+            <>
               {layout.background.video ? (
                 <video src={layout.background.video} class="w-full h-full" />
               ) : (
@@ -18,6 +30,11 @@ export default defineComponent({
                   }}
                 ></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>
+
+
+
     )
   }
 })

src/main.css

@@ -184,3 +184,21 @@ body {
     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);
+
+  }
+}

src/utils/upload.ts

@@ -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
+}