From 20d34cbb12a7ebd420fd9b67b7b6e04d9c84eedb Mon Sep 17 00:00:00 2001
From: expdsn <18111002318@163.com>
Date: Mon, 30 Sep 2024 18:31:24 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A3=81=E7=BA=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |   1 +
 public/bg/gameModel.png                    | Bin 0 -> 43665 bytes
 src/GlobalModal.tsx                        |  39 ++++---
 src/layout/background/BackgroundPage.tsx   |   2 +-
 src/layout/background/BackgroundSwtich.tsx | 119 +++++++++++++++++++--
 src/main.css                               |  27 +++++
 src/utils/CategoryTab.tsx                  |  93 ++++++++++++++++
 7 files changed, 254 insertions(+), 27 deletions(-)
 create mode 100644 public/bg/gameModel.png
 create mode 100644 src/utils/CategoryTab.tsx

diff --git a/package.json b/package.json
index 96260bd..1c1b3ae 100644
--- 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",
diff --git a/public/bg/gameModel.png b/public/bg/gameModel.png
new file mode 100644
index 0000000000000000000000000000000000000000..0261d01ff9e3223f186409a8bab26a036718ac52
GIT binary patch
literal 43665
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

literal 0
HcmV?d00001

diff --git a/src/GlobalModal.tsx b/src/GlobalModal.tsx
index 303062b..55239d6 100644
--- 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,21 +82,24 @@ export default defineComponent(() => {
                   <SearchPage />
                 ) : router.path === 'global-adder' ? (
                   <AdderPage />
-                ) : router.path.startsWith('widget-') ? (
-                  (() => {
-                    const name = router.path.split('-')[1]
-                    const selected = widgetList.find((el) => el.name === name)
-                    if (!selected)
-                      return (
-                        <div class="w-full h-full flex justify-center items-center text-black/80">
-                          组件维护中
-                        </div>
-                      )
-                    const compo = selected.modal
-                    console.log(compo)
-                    return <compo />
-                  })()
-                ) : null}
+                ) : router.path === 'global-background' ? (
+                  <BackgroundSwtich/>
+                ) :
+                  router.path.startsWith('widget-') ? (
+                    (() => {
+                      const name = router.path.split('-')[1]
+                      const selected = widgetList.find((el) => el.name === name)
+                      if (!selected)
+                        return (
+                          <div class="w-full h-full flex justify-center items-center text-black/80">
+                            组件维护中
+                          </div>
+                        )
+                      const compo = selected.modal
+                      console.log(compo)
+                      return <compo />
+                    })()
+                  ) : null}
               </Transition>
             </div>
           </div>
diff --git a/src/layout/background/BackgroundPage.tsx b/src/layout/background/BackgroundPage.tsx
index d909187..edb4cb3 100644
--- 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')
             
           }}>
             更换壁纸
diff --git a/src/layout/background/BackgroundSwtich.tsx b/src/layout/background/BackgroundSwtich.tsx
index e640811..befe532 100644
--- 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>
-        )
-    }
-})
\ No newline at end of file
+            <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>
+    )
+})
diff --git a/src/main.css b/src/main.css
index 8c3b320..869890c 100644
--- 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;
+  }
+}
\ No newline at end of file
diff --git a/src/utils/CategoryTab.tsx b/src/utils/CategoryTab.tsx
new file mode 100644
index 0000000..268a7d8
--- /dev/null
+++ 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>
+        )
+    },
+})
\ No newline at end of file

From a5b0f47e8ac6a1befd02a826fd2484482c49df55 Mon Sep 17 00:00:00 2001
From: expdsn <18111002318@163.com>
Date: Tue, 8 Oct 2024 14:29:31 +0800
Subject: [PATCH 2/3] change

---
 src/layout/background/BackgroundSwtich.tsx |  8 ++++----
 src/utils/CategoryTab.tsx                  | 11 ++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/layout/background/BackgroundSwtich.tsx b/src/layout/background/BackgroundSwtich.tsx
index befe532..1f82202 100644
--- a/src/layout/background/BackgroundSwtich.tsx
+++ b/src/layout/background/BackgroundSwtich.tsx
@@ -61,12 +61,12 @@ export default defineComponent(() => {
     })
     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'
+            : 'text-[#333] bg-white'
         )}
-            style={{
+            style={isGame.value ? {
                 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">
                 <OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
                 <span class="font-bold text-[14px]  ">壁纸库</span>
@@ -75,7 +75,7 @@ export default defineComponent(() => {
             <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) => {
+                        <CategoryTab  list={typeList.value} selectType={selectType.value} onUpdate:type={(e) => {
                             selectType.value = e
                         }}></CategoryTab>
 
diff --git a/src/utils/CategoryTab.tsx b/src/utils/CategoryTab.tsx
index 268a7d8..a279ed1 100644
--- a/src/utils/CategoryTab.tsx
+++ b/src/utils/CategoryTab.tsx
@@ -12,7 +12,14 @@ export default defineComponent({
         selectType: {
             type: String,
             required: true,
-
+        },
+        selectNode: {
+            type: Node,
+            required: true,
+        },
+        unSelectNode: {
+            type: Object,
+            required: true,
         }
     },
     emits: ['update:type'],
@@ -33,6 +40,7 @@ export default defineComponent({
                 },
             });
         })
+
         watch(() => [props.selectType], () => {
             const idx = props.list.findIndex((item) => item.id === props.selectType)
             if (idx === -1) return
@@ -67,6 +75,7 @@ export default defineComponent({
                 }}>
                 < div class="w-full  flex gap-x-2 " >
                     {
+
                         props.list.map((item, index) => (
                             <button
                                 key={item.id}

From 6c5ddb43ec19dac7cd1155e2ad750c14086c1e6f Mon Sep 17 00:00:00 2001
From: expdsn <18111002318@163.com>
Date: Tue, 8 Oct 2024 19:10:33 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A3=81=E7=BA=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/GlobalModal.tsx                        |   2 +-
 src/layout/background/BackgroundSwtich.tsx | 144 ++++++++++++++++-----
 src/utils/CategoryTab.tsx                  |  40 +++---
 3 files changed, 130 insertions(+), 56 deletions(-)

diff --git a/src/GlobalModal.tsx b/src/GlobalModal.tsx
index 55239d6..8db28a9 100644
--- a/src/GlobalModal.tsx
+++ b/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'
             }}
diff --git a/src/layout/background/BackgroundSwtich.tsx b/src/layout/background/BackgroundSwtich.tsx
index 1f82202..05f20d4 100644
--- a/src/layout/background/BackgroundSwtich.tsx
+++ b/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 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 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 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>
 
diff --git a/src/utils/CategoryTab.tsx b/src/utils/CategoryTab.tsx
index a279ed1..9317599 100644
--- a/src/utils/CategoryTab.tsx
+++ b/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
-                                key={item.id}
-                                ref={(el: any) => {
-                                    if (el) {
-                                        tabRefs.value[index] = (el)
-
-                                    }
-
-                                }}
-                                onClick={() => {
+                            item.id === props.selectType ?
+                                <div >
+                                    {ctx.slots.select?.(item.type) || <button>loading</button>}
+                                </div>
+                                : <div 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>
+                                }}>
+                                    {ctx.slots.unSelect?.(item.type) || <button>loading</button>}
+                                </div>
                         ))
                     }
                 </div >