新增壁纸

2024-09-30 18:31:24 +08:00 · 2024-09-30 18:31:24 +08:00 · 20d34cbb12
parent 68ab5c9a4e
commit 20d34cbb12
7 changed files with 254 additions and 27 deletions
--- a/package.json
+++ b/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",
--- a/public/bg/gameModel.png
+++ b/public/bg/gameModel.png
--- a/src/GlobalModal.tsx
+++ b/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)
--- a/src/layout/background/BackgroundPage.tsx
+++ b/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')
            
          }}>
            更换壁纸
--- a/src/layout/background/BackgroundSwtich.tsx
+++ b/src/layout/background/BackgroundSwtich.tsx
@ -1,11 +1,112 @@
-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';
+addIcons(BiChevronLeft, BiChevronDown)

-export default defineComponent({
-    setup() {
-        return (
-            <div class={"w-full h-full bg-red-300"}>
-                background
+
+const typeList = [
+    '热门',
+    'COSPALY',
+    '二次元',
+    '风景',
+    '插画',
+    '热门',
+    'COSPALY',
+    '二次元',
+    '风景',
+    '插画',
+    '热门',
+    'COSPALY',
+    '二次元',
+    '风景',
+    '插画'
+]
+export type BackgroundType = {
+    id: string
+    oridinal: number
+    type: string
+}
+export default defineComponent(() => {
+    const layout = useLayoutStore()
+    const isGame = computed(() => layout.state.current === 0)
+    const selectType = ref('')
+    const addTo = ref(layout.state.currentPage)
+    const typeList = ref<BackgroundType[]>([])
+    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) => {
+        request("GET", `/api/backgrounds?typeId=${e}&sort=${sortBy.value}`).then(res => {
+            console.log(res);
+
+        })
+    }, {
+        immediate: true
+    })
+    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-white'
+        )}
+            style={{
+                backgroundImage: `url('/bg/gameModel.png')`,
+                backgroundSize: '100% 100%',
+            }}>
+            <div class="flex w-full justify-between items-center border-b-[1px] border-solid border-white/[.2] pb-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 justify-between items-center ">
+                    <div class="flex-1 w-0">
+                        <CategoryTab list={typeList.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 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>
+
+            </div>
        </div>
    )
-    }
 })
--- a/src/main.css
+++ b/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;
+  }
+}
--- a/src/utils/CategoryTab.tsx
+++ b/src/utils/CategoryTab.tsx
@ -0,0 +1,93 @@
+import type { BackgroundType } from "@/layout/background/BackgroundSwtich";
+import clsx from "clsx";
+import gsap from "gsap";
+import { defineComponent, reactive, ref, watch } from "vue";
+
+export default defineComponent({
+    props: {
+        list: {
+            type: Array<BackgroundType>,
+            required: true
+        },
+        selectType: {
+            type: String,
+            required: true,
+
+        }
+    },
+    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) => (
+                            <button
+                                key={item.id}
+                                ref={(el: any) => {
+                                    if (el) {
+                                        tabRefs.value[index] = (el)
+
+                                    }
+
+                                }}
+                                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]',
+                                    props.selectType === item.id ? 'bg-white/30 text-white' : 'text-[#81848a]')}>
+                                {item.type}
+                            </button>
+                        ))
+                    }
+                </div >
+            </div>
+        )
+    },
+})