新增壁纸

src/GlobalModal.tsx

@@ -43,7 +43,7 @@ export default defineComponent(() => {
           <div
             class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
             style={{
-              width: full.value ? '100%' : '900px',
+              width: full.value ? '100%' :  '900px',
               height: full.value ? '100vh' : '540px',
               borderRadius: full.value ? '0' : '1rem'
             }}

src/layout/background/BackgroundSwtich.tsx

@@ -12,6 +12,9 @@ import { BiChevronLeft } from "oh-vue-icons/icons";
 import CategoryTab from '@/utils/CategoryTab';
 import { BiChevronDown } from "oh-vue-icons/icons";
 import request from '@/utils/request';
+import useUserStore from '@/user/useUserStore';
+import useRouterStore from '@/useRouterStore';
+import useBackgroundStore from './useBackgroundStore';
 addIcons(BiChevronLeft, BiChevronDown)
 
 
@@ -32,17 +35,35 @@ const typeList = [
     '风景',
     '插画'
 ]
+const wallpaperAttrList = [
+    '动态壁纸',
+    '静态壁纸',
+    '自定义壁纸'
+]
 export type BackgroundType = {
     id: string
     oridinal: number
     type: string
+    attr: number
+}
+export type WallpaperItem = {
+    id: string
+    hotNum: number
+    time: number
+    typeId: string
+    url: string
 }
 export default defineComponent(() => {
     const layout = useLayoutStore()
+    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 => {
@@ -52,13 +73,18 @@ export default defineComponent(() => {
         })
     })
     watch(() => [selectType.value, sortBy.value], (e) => {
-        request("GET", `/api/backgrounds?typeId=${e}&sort=${sortBy.value}`).then(res => {
+        wallpaperList.value = []
+        request<WallpaperItem[]>("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => {
             console.log(res);
-
+            wallpaperList.value = res
         })
     }, {
         immediate: true
     })
+    watch(selectAttr, (e) => {
+
+        selectType.value = typeList.value.filter(val => val.attr === e)[0].id || ''
+    })
     return () => (
         <div class={clsx('w-full flex-col h-full relative flex px-7 py-7 text-[14px]', isGame.value ? 'bg-[#2c2e3e] text-white'
             : 'text-[#333] bg-white'
@@ -67,42 +93,98 @@ export default defineComponent(() => {
                 backgroundImage: `url('/bg/gameModel.png')`,
                 backgroundSize: '100% 100%',
             } : null}>
-            <div class="flex w-full justify-between items-center border-b-[1px] border-solid border-white/[.2] pb-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 flex-col py-3">
+            <div class="flex-1 h-0  relative">
-                <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  list={typeList.value} selectType={selectType.value} onUpdate:type={(e) => {
+                        <div class="flex-1 w-0">
-                            selectType.value = e
+                            <CategoryTab v-slots={{
-                        }}></CategoryTab>
+                                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="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={() => {
+                                            backgroundStore.setBackground(item.url)
+                                        }}
+                                        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 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')
+                                            }
+                                            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 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 bg-white/5 py-1.5 px-3 text-sm/6 text-white',
-                                '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'
-                            )}
-                        >
-                            <option value="hotNum">按热度</option>
-                            <option value="time">按最新</option>
-                        </select>
-                        <OhVueIcon
-                            fill='white'
-                            name={BiChevronDown.name}
-                            class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 fill-white/60"
-                            aria-hidden="true"
-                        />
                     </div>
                 </div>
 

src/utils/CategoryTab.tsx

@@ -1,7 +1,7 @@
 import type { BackgroundType } from "@/layout/background/BackgroundSwtich";
 import clsx from "clsx";
 import gsap from "gsap";
-import { defineComponent, reactive, ref, watch } from "vue";
+import { defineComponent, reactive, ref, watch, type SlotsType, type VNode } from "vue";
 
 export default defineComponent({
     props: {
@@ -13,15 +13,12 @@ export default defineComponent({
             type: String,
             required: true,
         },
-        selectNode: {
+
-            type: Node,
-            required: true,
-        },
-        unSelectNode: {
-            type: Object,
-            required: true,
-        }
     },
+    slots: {} as SlotsType<{
+        select?: (text: string) => VNode[]
+        unSelect?: (text: string) => VNode[]
+    }>,
     emits: ['update:type'],
     setup(props, ctx) {
         const tabRefs = ref<(Element | null)[]>([])
@@ -30,6 +27,8 @@ export default defineComponent({
         const tweened = reactive({
             number: 0
         })
+
+
         watch(number, (n) => {
             gsap.to(tweened, {
                 number: n,
@@ -77,22 +76,15 @@ export default defineComponent({
                     {
 
                         props.list.map((item, index) => (
-                            <button
+                            item.id === props.selectType ?
-                                key={item.id}
+                                <div >
-                                ref={(el: any) => {
+                                    {ctx.slots.select?.(item.type) || <button>loading</button>}
-                                    if (el) {
+                                </div>
-                                        tabRefs.value[index] = (el)
+                                : <div onClick={()=> {
-
-                                    }
-
-                                }}
-                                onClick={() => {
                                     ctx.emit('update:type', item.id)
-                                }}
+                                }}>
-                                class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl text-white/[.9]',
+                                    {ctx.slots.unSelect?.(item.type) || <button>loading</button>}
-                                    props.selectType === item.id ? 'bg-white/30 text-white' : 'text-[#81848a]')}>
+                                </div>
-                                {item.type}
-                            </button>
                         ))
                     }
                 </div >