自定义上传（本地）

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,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">
+        {selectAttr.value !== 2 ? (
-          <div class="flex justify-between items-center ">
+          <div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
-            <div class="flex-1 w-0">
+            <div class="flex justify-between items-center ">
-              <CategoryTab
+              <div class="flex-1 w-0">
-                v-slots={{
+                <CategoryTab
-                  select: (text: string) => (
+                  v-slots={{
-                    <button
+                    select: (text: string) => (
-                      class={clsx(
+                      <button
-                        'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
+                        class={clsx(
-                        isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]'
+                          '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>
+                        {text}
-                  ),
+                      </button>
-                  unSelect: (text: string) => (
+                    ),
-                    <button
+                    unSelect: (text: string) => (
-                      class={clsx(
+                      <button
-                        'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
+                        class={clsx(
-                        isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]'
+                          '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>
+                        {text}
-                  )
+                      </button>
-                }}
+                    )
-                list={typeList.value.filter((val) => val.attr === selectAttr.value)}
+                  }}
-                selectType={selectType.value}
+                  list={typeList.value.filter((val) => val.attr === selectAttr.value)}
-                onUpdate:type={(e) => {
+                  selectType={selectType.value}
-                  selectType.value = e
+                  onUpdate:type={(e) => {
-                }}
+                    selectType.value = e
-              ></CategoryTab>
+                  }}
+                ></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]">
+            <div class="flex-1  w-full h-0 flex relative">
-              <select
+              <div class="w-full h-full  overflow-y-scroll">
-                onChange={(e: any) => {
+                <div class="w-full  grid grid-cols-3 gap-4   ">
-                  sortBy.value = e.target.value
+                  {wallpaperList.value.map((item) => (
-                }}
-                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="absolute top-0 left-0 right-0 bottom-0 "
+                      onClick={() => {
-                      style={{
+                        layout.changeBackground(item.url)
-                        background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
                       }}
-                    />
+                      class="h-[156px] relative cursor-pointer group w-full  flex-grow-0 rounded-xl overflow-hidden"
-                  </div>
+                    >
-                ))}
+                      <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) => (
+          <CustomWallpaper></CustomWallpaper>
-              <div
+        )}
-                key={index}
+
-                onClick={() => {
+        <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">
-                  if (index === 2) {
+          {wallpaperAttrList.map((item, index) => (
-                    if (!userStore.isLogin) {
+            <div
-                      router.go('global-login')
+              key={index}
-                    }
+              onClick={() => {
+                console.log(index)
+
+                if (index === 2) {
+                  if (!userStore.isLogin) {
+                    router.go('global-login')
                     return
                   }
-                  selectAttr.value = index
+                }
-                }}
+
-                class={clsx(
+                selectAttr.value = index
-                  'px-8 py-2 rounded-[8px]',
+              }}
-                  index === selectAttr.value
+              class={clsx(
-                    ? 'bg-white text-[#333]'
+                'px-8 py-2 rounded-[8px]',
-                    : 'cursor-pointer text-white hover:bg-white/[.4]'
+                index === selectAttr.value
-                )}
+                  ? 'bg-white text-[#333]'
-              >
+                  : 'cursor-pointer text-white hover:bg-white/[.4]'
-                {item}
+              )}
-              </div>
+            >
-            ))}
+              {item}
-          </div>
+            </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,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 ? (
+        <Transition name="background">
-          <video src={layout.background.video} class="w-full h-full" />
+          {
-        ) : (
+            trriger.value &&
-          <div
+            <>
-            class="w-full h-full bg-center bg-cover bg-no-repeat"
+              {layout.background.video ? (
-            style={{
+                <video src={layout.background.video} class="w-full h-full" />
-              backgroundImage: `url('${layout.background.image}')`
+              ) : (
-            }}
+                <div
-          ></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>
+
+
+
     )
   }
 })

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