feat(index): search songs

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
SMS-COSMO · Dec 9, 2024 · a6a4d83 · a6a4d83
1 parent 0f325ba
commit a6a4d83
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/app/components/home/AboutUs.vue b/app/components/home/AboutUs.vue
@@ -35,6 +35,13 @@
                 <Icon name="lucide:github" />
               </Button>
             </NuxtLink>
+            <NuxtLink to="https://the1068.pictures/" target="_blank">
+              <Button variant="outline" size="icon">
+                <span class="font-serif leading-[0.6rem] text-xs font-semibold">
+                  10<br>68
+                </span>
+              </Button>
+            </NuxtLink>
           </div>
         </div>
       </DialogContent>

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -59,7 +59,7 @@
 
         <div class="ml-auto flex gap-2">
           <DarkModeToggle />
-          <Button v-if="userStore.permissions.includes('admin')" variant="outline" size="sm" @click="admin">
+          <Button v-if="userStore.permissions.includes('admin')" variant="outline" size="sm" @click="navigateTo('/admin')">
             <Icon name="lucide:user-cog" class="mr-1" />
             管理
           </Button>
@@ -88,13 +88,13 @@
         </div>
         <TabsContent value="list" class="space-y-3">
           <div class="relative w-full items-center mt-1">
-            <Input id="search" type="text" placeholder="搜索歌曲" class="pl-8" />
+            <Input id="search" v-model="searchPrompt" type="text" placeholder="搜索歌曲" class="pl-8" />
             <span class="absolute start-0 inset-y-0 flex items-center justify-center pl-3">
               <Icon name="lucide:search" class="text-muted-foreground" />
             </span>
           </div>
 
-          <SongCard v-for="song in songList" :key="song.id" :song />
+          <SongCard v-for="song in filteredList" :key="song.id" :song />
         </TabsContent>
         <TabsContent value="arrangement">
           <DatePicker
@@ -124,6 +124,8 @@
 </template>
 
 <script setup lang="ts">
+import type { RouterOutput } from '~~/types';
+import { useFuse, type UseFuseOptions } from '@vueuse/integrations/useFuse';
 import { DatePicker } from '@ztl-uwu/v-calendar';
 
 const userStore = useUserStore();
@@ -197,7 +199,20 @@ function logout() {
   navigateTo('/login');
 }
 
-function admin() {
-  navigateTo('/admin');
-}
+type TLists = RouterOutput['song']['listSafe'];
+
+const fuseOptions: UseFuseOptions<TLists[0]> = {
+  fuseOptions: {
+    keys: ['name', 'creator'],
+    shouldSort: true,
+  },
+  matchAllWhenSearchEmpty: true,
+};
+
+const searchPrompt = ref('');
+const fuse = songList.value === undefined
+  ? useFuse<TLists[0]>(searchPrompt, [], fuseOptions)
+  : useFuse<TLists[0]>(searchPrompt, songList, fuseOptions);
+
+const filteredList = computed<TLists>(() => fuse.results.value.map(e => e.item));
 </script>
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -32,10 +32,12 @@
     "@unovis/vue": "^1.4.5",
     "@vee-validate/nuxt": "^4.14.7",
     "@vee-validate/zod": "^4.14.7",
+    "@vueuse/integrations": "^12.0.0",
     "@ztl-uwu/v-calendar": "^3.1.3",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.36.4",
     "drizzle-seed": "^0.1.1",
+    "fuse.js": "^7",
     "jose": "^5.9.6",
     "nuxt": "^3.14.1592",
     "pg": "^8.13.1",