src/layout/background/BackgroundSwtich.tsx

@@ -1,19 +1,23 @@
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import {
+    computed,
+    defineComponent,
+    onMounted,
+    ref,
+    watch,
+} from 'vue'
 import useLayoutStore from '../useLayoutStore'
 import { OhVueIcon, addIcons } from 'oh-vue-icons'
 import clsx from 'clsx'
-import { BiChevronLeft } from 'oh-vue-icons/icons'
+import { BiChevronLeft } from "oh-vue-icons/icons";
-import CategoryTab from '@/utils/CategoryTab'
+import CategoryTab from '@/utils/CategoryTab';
-import { BiChevronDown } from 'oh-vue-icons/icons'
+import { BiChevronDown } from "oh-vue-icons/icons";
-import request from '@/utils/request'
+import request from '@/utils/request';
-import useUserStore from '@/user/useUserStore'
+import useUserStore from '@/user/useUserStore';
-import useRouterStore from '@/useRouterStore'
+import useRouterStore from '@/useRouterStore';
-import useBackgroundStore from './useBackgroundStore'
+import useBackgroundStore from './useBackgroundStore';
-import { Button } from 'ant-design-vue'
-import CustomWallpaper from './CustomWallpaper'
-
 addIcons(BiChevronLeft, BiChevronDown)
 
+
 const typeList = [
     '热门',
     'COSPALY',
@@ -31,7 +35,11 @@ const typeList = [
     '风景',
     '插画'
 ]
-const wallpaperAttrList = ['动态壁纸', '静态壁纸', '自定义壁纸']
+const wallpaperAttrList = [
+    '动态壁纸',
+    '静态壁纸',
+    '自定义壁纸'
+]
 export type BackgroundType = {
     id: string
     oridinal: number
@@ -50,97 +58,67 @@ export default defineComponent(() => {
     const router = useRouterStore()
     const isGame = computed(() => layout.state.current === 0)
     const selectType = ref('')
+    const addTo = ref(layout.state.currentPage)
     const typeList = ref<BackgroundType[]>([])
     const wallpaperList = ref<WallpaperItem[]>([])
     const selectAttr = ref(0)
     const userStore = useUserStore()
-
+    const backgroundStore = useBackgroundStore()
     const sortBy = ref<'hotNum' | 'time'>('hotNum')
     onMounted(() => {
-    request<BackgroundType[]>('GET', '/api/backgroundTypes').then((res) => {
+        request<BackgroundType[]>("GET", "/api/backgroundTypes").then(res => {
-      console.log(res)
+            console.log(res);
             typeList.value = res
             selectType.value = res[0].id
         })
     })
-  watch(
+    watch(() => [selectType.value, sortBy.value], (e) => {
-    () => [selectType.value, sortBy.value],
-    (e) => {
-      if (!e[0]) return
         wallpaperList.value = []
-      request<WallpaperItem[]>('GET', `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(
+        request<WallpaperItem[]>("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => {
-        (res) => {
+            console.log(res);
-          console.log(res)
             wallpaperList.value = res
-        }
+        })
-      )
+    }, {
-    },
-    {
         immediate: true
-    }
+    })
-  )
     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
+        <div class={clsx('w-full flex-col h-full relative flex px-7 py-7 text-[14px]', isGame.value ? 'bg-[#2c2e3e] text-white'
-      class={clsx(
+            : 'text-[#333] bg-white'
-        'w-full flex-col h-full relative flex px-7 py-7 text-[14px]',
-        isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#333] bg-white'
         )}
-      style={
+            style={isGame.value ? {
-        isGame.value
-          ? {
                 backgroundImage: `url('/bg/gameModel.png')`,
-              backgroundSize: '100% 100%'
+                backgroundSize: '100% 100%',
-            }
+            } : null}>
-          : null
+            <div class={clsx("flex w-full justify-between items-center border-b-[1px] border-solid   pb-2",
-      }
+                isGame.value ? "border-white/[.2]" : "dark:border-black/[.2]"
-    >
+            )}>
-      <div
-        class={clsx(
-          'flex w-full justify-between items-center border-b-[1px] border-solid   pb-2',
-          isGame.value ? 'border-white/[.2]' : 'dark:border-black/[.2]'
-        )}
-      >
                 <OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
                 <span class="font-bold text-[14px]  ">壁纸库</span>
                 <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">
-                <CategoryTab
+                            <CategoryTab v-slots={{
-                  v-slots={{
+                                select: (text: string) => <button
-                    select: (text: string) => (
+                                    class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
-                      <button
+                                        isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]')}>
-                        class={clsx(
+                                    {text}
-                          'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
+                                </button>,
-                          isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]'
+                                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) => {
-                    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>
-                ></CategoryTab>
+
                         </div>
 
                         <div class="relative w-[100px]">
@@ -154,7 +132,7 @@ export default defineComponent(() => {
                                     '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'
+                                    isGame.value ? "text-white bg-white/5" : "text-[#333] bg-black/5"
                                 )}
                             >
                                 <option value="hotNum">按热度</option>
@@ -168,67 +146,47 @@ 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) => (
+                                {wallpaperList.value.map(item =>
                                     <div
                                         onClick={() => {
-                        layout.changeBackground(item.url)
                                         }}
-                      class="h-[156px] relative cursor-pointer group w-full  flex-grow-0 rounded-xl overflow-hidden"
+                                        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]" />
-                      <img
+                                        <div class="absolute top-0 left-0 right-0 bottom-0 " style={{
-                        src={item.url + '?x-oss-process=image/resize,w_300'}
+                                            background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
-                        class=" duration-150 absolute w-full h-full object-cover flex-grow-0  rounded-xl group-hover:scale-[1.2]"
+                                        }} />
-                      />
+                                    </div>)}
-                      <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>
-        ) : (
-          <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
+                            wallpaperAttrList.map((item, index) => (
-              key={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>
+                            ))
                         }
 
-                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>
     )

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/layout/layout.types.ts

@@ -30,9 +30,9 @@ export type LayoutPages = { list: Block[]; label: string; name: string }[]
 
 export interface Layout {
   content: [
-    { background: string; pages: LayoutPages },
+    { background: ''; pages: LayoutPages },
-    { background: string; pages: LayoutPages },
+    { background: ''; pages: LayoutPages },
-    { background: string; pages: LayoutPages }
+    { background: ''; pages: LayoutPages }
   ]
   current: 0 | 1 | 2 // 游戏，工作，轻娱
   currentPage: number

src/layout/useLayoutStore.ts

@@ -98,9 +98,7 @@ export default defineStore('layout', () => {
     }
     return block.label || ''
   }
-  const changeBackground = (url: string) => {
+
-    state.content[state.current].background = url 
-  }
   return {
     state,
     ready,
@@ -111,7 +109,6 @@ export default defineStore('layout', () => {
     addBlock,
     openDir,
     checkDir,
-    getLabel,
+    getLabel
-    changeBackground
   }
 })

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