feat: add ghost state to admin song list

Signed-off-by: ZTL-UwU <[email protected]>
SMS-COSMO · Feb 25, 2025 · 869c4bc · 869c4bc
1 parent acf8341
commit 869c4bc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/app/components/song/SongCard.vue b/app/components/song/SongCard.vue
@@ -113,7 +113,7 @@
         留言: {{ song.message }}
       </p>
 
-      <div v-if="song.state !== 'used' && song.state !== 'dropped'" class="flex gap-1">
+      <div v-if="song.state !== 'used' && song.state !== 'dropped' && song.state !== 'ghost'" class="flex gap-1">
         <Button
           v-if="song.state !== 'approved' && song.id"
           variant="outline"

diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
@@ -52,7 +52,7 @@
           v-if="data?.chart"
           index="date"
           :data="data.chart"
-          :categories="['approved', 'dropped', 'pending', 'rejected', 'used']"
+          :categories="['approved', 'dropped', 'pending', 'rejected', 'used', 'ghost']"
           :rounded-corners="4"
         />
       </CardContent>

diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
@@ -21,13 +21,16 @@
       <ScrollArea class="h-[calc(100svh-4rem)]">
         <div class="sticky top-0 flex h-16 items-center border-b bg-background px-4">
           <Tabs v-model="selectedTab" class="w-full" default-value="used">
-            <TabsList class="grid grid-cols-2">
+            <TabsList class="grid grid-cols-3">
               <TabsTrigger value="used">
                 入选
               </TabsTrigger>
               <TabsTrigger value="dropped">
                 落选
               </TabsTrigger>
+              <TabsTrigger value="ghost">
+                幽灵
+              </TabsTrigger>
             </TabsList>
           </Tabs>
         </div>
@@ -42,6 +45,11 @@
             <SongCard :song type="songs" />
           </li>
         </TransitionGroup>
+        <TransitionGroup v-if="selectedTab === 'ghost'" name="list" tag="ul" class="flex flex-col gap-3 p-4">
+          <li v-for="song in songList?.filter((x) => x.state === 'ghost')" :key="song.id">
+            <SongCard :song type="songs" />
+          </li>
+        </TransitionGroup>
       </ScrollArea>
     </ResizablePanel>
   </ResizablePanelGroup>
@@ -81,5 +89,5 @@ const panels = ref([
   },
 ]);
 
-const selectedTab = ref<'used' | 'dropped'>('used');
+const selectedTab = ref<'used' | 'dropped' | 'ghost'>('used');
 </script>