添加网址导航-缺少搜索功能

2024-11-15 16:19:01 +08:00 · 2024-11-15 16:19:01 +08:00 · ade0c79a3c
parent e8d0a236dd
commit ade0c79a3c
5 changed files with 213 additions and 147 deletions
--- a/src/layout/adder/AdderPage.tsx
+++ b/src/layout/adder/AdderPage.tsx
@ -81,6 +81,7 @@ export default defineComponent(() => {
  const isGame = computed(() => layout.state.current === 0)
  const store = useAdderPageStore()
  const addTo = ref(layout.state.currentPage)
+
  provide(AddToToken, addTo)
  onUnmounted(() => {
    store.type = 1
@ -145,7 +146,27 @@ export default defineComponent(() => {
              />
            </Form.Item>
            <Form.Item>
-              <Input.Search class="w-[200px]" placeholder="搜索组件或网站" />
+              <Input.Search
+                onSearch={(e) => {
+                  if (store.type === 1) {
+                    store.search(e)
+                  } else if (store.type === 0) {
+                    store.widgetSearchWords = e
+                  } else if (store.type === 3) {
+                    store.gameSearch = e
+                  }
+                }}
+                class="w-[220px]"
+                placeholder={
+                  store.type === 0
+                    ? '搜索想要添加的组件'
+                    : store.type === 1
+                      ? '搜索想要添加的网址导航'
+                      : store.type === 2
+                        ? ''
+                        : '搜索想要添加的游戏'
+                }
+              />
            </Form.Item>
          </Form>
          <div class="w-full h-0 flex-grow p-6">
--- a/src/layout/adder/GameAdder.tsx
+++ b/src/layout/adder/GameAdder.tsx
@ -9,6 +9,7 @@ import { frontAddress, ossBase } from '@/config'
 import dayjs from 'dayjs'
 import { generateRandomString } from '@/utils/tool'
 import MD5 from 'crypto-js/md5'
+import useAdderPageStore from './useAdderPageStore'
 export const SECRET = 'A1Cv12olxT12dOE3xA1vPA=='
 export const URL_ADDRESS = 'http://newfatfox.oss-cn-beijing.aliyuncs.com'
 export interface GameType {
@ -159,6 +160,7 @@ export default defineComponent(() => {
  const isGame = computed(() => layout.state.current === 0)
  const appList = ref<GameType[]>([])
  const selectType = ref('fc')
+  const store = useAdderPageStore()
  const fetchGame = async (page: number) => {
    const parems = `nonce=${generateRandomString(8)}&pid=PIDc8uT24mpo&timestamp=${dayjs().unix()}`
    const sign = MD5(parems + SECRET).toString()
@ -169,11 +171,11 @@ export default defineComponent(() => {
    return res.data.items
  }
  watch(
-    selectType,
+    [selectType, () => store.gameSearch],
    (val) => {
      loading.value = true
-      if (val !== 'yiqiyoo') {
-        request<GameType[]>('GET', `/api/games?type=${val}`)
+      if (val[0] !== 'yiqiyoo') {
+        request<GameType[]>('GET', `/api/games?type=${val[0]}&keyword=${val[1]}`)
          .then((res) => {
            appList.value = res
          })
@ -212,6 +214,7 @@ export default defineComponent(() => {
  )
  return () => (
    <div class={'w-full h-full  flex flex-col gap-y-4'}>
+      {!store.gameSearch && (
        <div class={'w-full '}>
          <CategoryTab
            list={DefautGameTypeList}
@ -247,6 +250,8 @@ export default defineComponent(() => {
            }}
          ></CategoryTab>
        </div>
+      )}
+
      <div class={'h-0 flex-1 w-full'}>
        <div class={'w-full h-full overflow-y-scroll scrollbar-hide'}>
          {!loading.value ? (
--- a/src/layout/adder/HotAdder.tsx
+++ b/src/layout/adder/HotAdder.tsx
@ -1,26 +1,11 @@
 import CategoryTab from '@/utils/CategoryTab'
-import request from '@/utils/request'
-import { computed, defineComponent, inject, onMounted, ref, watch } from 'vue'
-import type { BackgroundType } from '../background/BackgroundSwtich'
+import { computed, defineComponent, inject } from 'vue'
 import clsx from 'clsx'
 import useLayoutStore from '../useLayoutStore'
 import { AddToToken } from './AdderPage'
 import { v4 as uuid } from 'uuid'
+import useAdderPageStore, { type HotAppType } from './useAdderPageStore'

-interface HotAppCategoryType {
-  id: string
-  name: string
-  ordinal: number
-}
-interface HotAppType {
-  id: string
-  name: string
-  url: string
-  ordinal: number
-  desc: string
-  icon: string
-  background: string
-}
 export const LinkItem = defineComponent({
  props: {
    content: {
@ -34,10 +19,13 @@ export const LinkItem = defineComponent({
    const addTo = inject(AddToToken)
    return () => (
      <div
-        class={clsx(' w-full h-full rounded-lg relative flex flex-col justify-between overflow-hidden shadow p-4', {
+        class={clsx(
+          ' w-full h-full rounded-lg relative flex flex-col justify-between overflow-hidden shadow p-4',
+          {
            'bg-white/20': isGame.value,
            'bg-white/80': !isGame.value
-        })}
+          }
+        )}
        key={props.content.name}
      >
        <div
@ -110,6 +98,9 @@ export const LinkItem = defineComponent({
                },
                addTo?.value
              )
+              if (addTo?.value) {
+                layout.state.currentPage = addTo?.value
+              }
            }}
          >
            添加
@ -122,44 +113,19 @@ export const LinkItem = defineComponent({

 export default defineComponent(() => {
  const layout = useLayoutStore()
-  const loading = ref(false)
  const isGame = computed(() => layout.state.current === 0)
-  const appList = ref<HotAppType[]>([])
-  const categoryList = ref<BackgroundType[]>([])
-  const selectType = ref('')
-  onMounted(() => {
-    request<HotAppCategoryType[]>('GET', '/api/app/hotAppTypes').then((res) => {
-      categoryList.value = res.map((el) => ({
-        id: el.id,
-        oridinal: el.ordinal,
-        type: el.name,
-        attr: 0
-      }))

-      selectType.value = res[0].id
-    })
-  })
-  watch(selectType, (val) => {
-    loading.value = true
+  const store = useAdderPageStore()

-    request<HotAppType[]>('GET', `/api/app/hotApps?hotAppsId=${val}`)
-      .then((res) => {
-        appList.value = res
-      })
-      .finally(() => {
-        setTimeout(() => {
-          loading.value = false
-        }, 200)
-      })
-  })
  return () => (
    <div class={'w-full h-full  flex flex-col gap-y-4'}>
+      {!store.isSearch && (
        <div class={'w-full '}>
          <CategoryTab
-          list={categoryList.value}
-          selectType={selectType.value}
+            list={store.categoryList}
+            selectType={store.selectType}
            onUpdate:type={(e) => {
-            selectType.value = e
+              store.selectType = e
            }}
            v-slots={{
              select: (text: string) => (
@ -189,11 +155,13 @@ export default defineComponent(() => {
            }}
          ></CategoryTab>
        </div>
+      )}
+
      <div class={'h-0 flex-1 w-full'}>
        <div class={'w-full h-full overflow-y-scroll scrollbar-hide'}>
-          {!loading.value ? (
+          {!store.loading ? (
            <div class={'w-full grid grid-cols-3 gap-4 '} style="grid-auto-rows: 120px">
-              {appList.value.map((el) => (
+              {store.appList.map((el) => (
                <LinkItem content={el}></LinkItem>
              ))}
            </div>
--- a/src/layout/adder/WidgetAdder.tsx
+++ b/src/layout/adder/WidgetAdder.tsx
@ -4,6 +4,7 @@ import widgetList, { type Widget } from '@/widgets'
 import clsx from 'clsx'
 import { AddToToken } from './AdderPage'
 import { v4 as uuid } from 'uuid'
+import useAdderPageStore from './useAdderPageStore'

 export const WidgetItem = defineComponent({
  props: {
@ -32,10 +33,7 @@ export const WidgetItem = defineComponent({
        key={props.content.name}
      >
        <div class="flex">
-          <img
-            src={props.content.icon}
-            class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg"
-          />
+          <img src={props.content.icon} class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg" />
          <div class="px-2 w-0 flex-grow ">
            <div
              class={clsx('text text-sm mb-[2px]', {
@ -120,18 +118,18 @@ export const WidgetItem = defineComponent({

 export default defineComponent(() => {
  const layout = useLayoutStore()
+  const store = useAdderPageStore()
  return () => (
    <div class="absolute left-0 top-0 w-full h-full overflow-y-auto scrollbar-hide gap-4">
      <div class="w-full grid grid-cols-3 grid-flow-row-dense  gap-4" style="grid-auto-rows: 120px">
-        {
-          layout.state.current !== 1 ?
-            widgetList.filter(val => val.name !== 'tomato_work').map((el) => (
-              <WidgetItem content={el} key={el.name} />
-            )) :
-            widgetList.map((el) => (
-              <WidgetItem content={el} key={el.name} />
-            ))
-        }
+        {layout.state.current !== 1
+          ? widgetList
+              .filter((val) => val.name !== 'tomato_work')
+              .filter((val) => val.label.includes(store.widgetSearchWords))
+              .map((el) => <WidgetItem content={el} key={el.name} />)
+          : widgetList
+              .filter((val) => val.label.includes(store.widgetSearchWords))
+              .map((el) => <WidgetItem content={el} key={el.name} />)}
      </div>
    </div>
  )
--- a/src/layout/adder/useAdderPageStore.tsx
+++ b/src/layout/adder/useAdderPageStore.tsx
@ -1,9 +1,83 @@
-import { defineStore } from "pinia";
-import { ref } from "vue";
-
-export default defineStore("adderPage", () => {
+import request from '@/utils/request'
+import { defineStore } from 'pinia'
+import { watch } from 'vue'
+import { ref } from 'vue'
+import type { BackgroundType } from '../background/BackgroundSwtich'
+export interface HotAppType {
+  id: string
+  name: string
+  url: string
+  ordinal: number
+  desc: string
+  icon: string
+  background: string
+}
+export interface HotAppCategoryType {
+  id: string
+  name: string
+  ordinal: number
+}
+export default defineStore('adderPage', () => {
  const type = ref(1)
+  const selectType = ref('')
+  const loading = ref(false)
+  const appList = ref<HotAppType[]>([])
+  const categoryList = ref<BackgroundType[]>([])
+  const isSearch = ref(false)
+  const widgetSearchWords = ref('')
+  const gameSearch = ref('')
+  request<HotAppCategoryType[]>('GET', '/api/app/hotAppTypes').then((res) => {
+    categoryList.value = res.map((el) => ({
+      id: el.id,
+      oridinal: el.ordinal,
+      type: el.name,
+      attr: 0
+    }))
+
+    selectType.value = res[0].id
+  })
+  watch(selectType, (val) => {
+    getApps(val)
+  })
+  const getApps = (_selectType: string) => {
+    loading.value = true
+    request<HotAppType[]>('GET', `/api/app/hotApps?hotAppsId=${_selectType}`)
+      .then((res) => {
+        appList.value = res
+      })
+      .finally(() => {
+        setTimeout(() => {
+          loading.value = false
+        }, 200)
+      })
+  }
+
+  const search = (keywords: string) => {
+    if (keywords === '') {
+      isSearch.value = false
+      getApps(selectType.value)
+      return
+    }
+    isSearch.value = true
+    request<HotAppType[]>('GET', `/api/app/hotApp/search?keyword=${keywords}`)
+      .then((res) => {
+        appList.value = res
+      })
+      .finally(() => {
+        setTimeout(() => {
+          loading.value = false
+        }, 200)
+      })
+  }
  return {
-        type
+    type,
+    widgetSearchWords,
+    categoryList,
+    appList,
+    loading,
+    selectType,
+    search,
+    isSearch,
+    gameSearch
  }
 })