Merge remote-tracking branch 'origin/weather'

package.json

@@ -20,6 +20,7 @@
     "ant-design-vue": "4.x",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
+    "gsap": "^3.12.5",
     "localforage": "^1.10.0",
     "lunar-typescript": "^1.7.5",
     "oh-vue-icons": "^1.0.0-rc3",

src/GlobalModal.tsx

@@ -7,8 +7,9 @@ import widgetList from '@/widgets'
 addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
 const SearchPage = asyncLoader(() => import('@/layout/header/search/SearchPage'))
 const AdderPage = asyncLoader(() => import('@/layout/adder/AdderPage'))
+const BackgroundSwtich = asyncLoader(() => import('@/layout/background/BackgroundSwtich'))
 
-const noFullList: RouteStr[] = ['global-search', 'global-adder']
+const noFullList: RouteStr[] = ['global-search', 'global-adder', 'global-background']
 
 export default defineComponent(() => {
   const router = useRouterStore()
@@ -16,7 +17,8 @@ export default defineComponent(() => {
     () =>
       router.path.startsWith('widget-') ||
       router.path === 'global-search' ||
-      router.path === 'global-adder'
+      router.path === 'global-adder' ||
+      router.path === 'global-background'
   )
   const full = ref(false)
   watch(router, () => {
@@ -80,7 +82,10 @@ export default defineComponent(() => {
                   <SearchPage />
                 ) : router.path === 'global-adder' ? (
                   <AdderPage />
-                ) : router.path.startsWith('widget-') ? (
+                ) : router.path === 'global-background' ? (
+                  <BackgroundSwtich/>
+                ) :
+                  router.path.startsWith('widget-') ? (
                     (() => {
                       const name = router.path.split('-')[1]
                       const selected = widgetList.find((el) => el.name === name)

src/layout/background/BackgroundPage.tsx

@@ -60,7 +60,7 @@ export default defineComponent(() => {
         <div class="flex justify-between items-center py-4">
           <Button type="primary" icon={<SwapOutlined />}
           onClick={()=> {
-            router.go ('')
+            router.go('global-background')
             
           }}>
             更换壁纸

src/layout/background/BackgroundSwtich.tsx

@@ -1,11 +1,194 @@
-import  { defineComponent } 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 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)
 
-export default defineComponent({
+
-    setup() {
+const typeList = [
-        return (
+    '热门',
-            <div class={"w-full h-full bg-red-300"}>
+    'COSPALY',
-                background
+    '二次元',
+    '风景',
+    '插画',
+    '热门',
+    'COSPALY',
+    '二次元',
+    '风景',
+    '插画',
+    '热门',
+    'COSPALY',
+    '二次元',
+    '风景',
+    '插画'
+]
+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 => {
+            console.log(res);
+            typeList.value = res
+            selectType.value = res[0].id
+        })
+    })
+    watch(() => [selectType.value, sortBy.value], (e) => {
+        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'
+        )}
+            style={isGame.value ? {
+                backgroundImage: `url('/bg/gameModel.png')`,
+                backgroundSize: '100% 100%',
+            } : 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]"
+            )}>
+                <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">
+                <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 v-slots={{
+                                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>
+                </div>
+
+            </div>
         </div>
     )
-    }
 })

src/main.css

@@ -157,3 +157,30 @@ body {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
+@layer utilities {
+  .scrollbar-transparent::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
+  }
+  .scrollbar-transparent::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .scrollbar-transparent::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  .scrollbar-transparent {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+}

src/utils/CategoryTab.tsx

@@ -0,0 +1,94 @@
+import type { BackgroundType } from "@/layout/background/BackgroundSwtich";
+import clsx from "clsx";
+import gsap from "gsap";
+import { defineComponent, reactive, ref, watch, type SlotsType, type VNode } from "vue";
+
+export default defineComponent({
+    props: {
+        list: {
+            type: Array<BackgroundType>,
+            required: true
+        },
+        selectType: {
+            type: String,
+            required: true,
+        },
+
+    },
+    slots: {} as SlotsType<{
+        select?: (text: string) => VNode[]
+        unSelect?: (text: string) => VNode[]
+    }>,
+    emits: ['update:type'],
+    setup(props, ctx) {
+        const tabRefs = ref<(Element | null)[]>([])
+        const parentRef = ref<Element | null>(null)
+        const number = ref(0)
+        const tweened = reactive({
+            number: 0
+        })
+
+
+        watch(number, (n) => {
+            gsap.to(tweened, {
+                number: n,
+                duration: .5,
+                onUpdate: () => {
+                    if (parentRef.value)
+                        parentRef.value.scrollLeft = tweened.number
+                },
+            });
+        })
+
+        watch(() => [props.selectType], () => {
+            const idx = props.list.findIndex((item) => item.id === props.selectType)
+            if (idx === -1) return
+            if (tabRefs.value[idx]) {
+                const childRef = tabRefs.value[idx]
+                if (!childRef) return
+                if (!childRef.parentElement) return
+                const parentRect = childRef.parentElement.getBoundingClientRect()
+                const childRect = childRef.getBoundingClientRect()
+                const distance = childRect.left - parentRect.left
+                if (!parentRef.value) return
+                if (idx > 3) {
+                    number.value = distance - 350
+                } else {
+                    number.value = 0
+
+                }
+            } else {
+                number.value = 0
+
+            }
+        }
+        )
+        return () => (
+            <div
+                ref={parentRef}
+                class="w-full overflow-x-scroll scrollbar-hide" onWheel={(e) => {
+                    e.preventDefault()
+                    if (parentRef.value)
+                        parentRef.value.scrollLeft += e.deltaY
+
+                }}>
+                < div class="w-full  flex gap-x-2 " >
+                    {
+
+                        props.list.map((item, index) => (
+                            item.id === props.selectType ?
+                                <div >
+                                    {ctx.slots.select?.(item.type) || <button>loading</button>}
+                                </div>
+                                : <div onClick={()=> {
+                                    ctx.emit('update:type', item.id)
+                                }}>
+                                    {ctx.slots.unSelect?.(item.type) || <button>loading</button>}
+                                </div>
+                        ))
+                    }
+                </div >
+            </div>
+        )
+    },
+})