src/layout/background/BackgroundSwtich.tsx

@@ -9,8 +9,6 @@ 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)
 
@@ -54,7 +52,6 @@ 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) => {
@@ -66,7 +63,6 @@ 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) => {
@@ -80,7 +76,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
@@ -108,7 +104,6 @@ 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">
@@ -168,15 +163,12 @@ 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
@@ -186,8 +178,7 @@ export default defineComponent(() => {
                     <div
                       class="absolute top-0 left-0 right-0 bottom-0 "
                       style={{
-                          background:
+                        background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
-                            'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
                       }}
                     />
                   </div>
@@ -195,27 +186,17 @@ 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(
@@ -231,5 +212,6 @@ export default defineComponent(() => {
           </div>
         </div>
       </div>
+    </div>
   )
 })

src/layout/background/CustomWallpaper.tsx

@@ -1,112 +0,0 @@
-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, ref, Transition, watch } from 'vue'
+import { defineComponent } from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import useSettingsStore from '@/settings/useSettingsStore'
 
@@ -6,20 +6,8 @@ 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" />
         ) : (
@@ -30,11 +18,6 @@ export default defineComponent({
             }}
           ></div>
         )}
-            </>
-
-          }
-
-        </Transition>
         <div
           class="absolute left-0 top-0 w-full h-full bg-black"
           style={{
@@ -44,9 +27,6 @@ export default defineComponent({
           }}
         ></div>
       </div>
-
-
-
     )
   }
 })

src/main.css

@@ -184,21 +184,3 @@ 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,9 +2,6 @@ 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) {
@@ -35,14 +32,3 @@ 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
-}