feat(index): add animation for lists

SMS-COSMO · Dec 6, 2023 · f7bd215 · f7bd215
1 parent 63ed269
commit f7bd215
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/pages/index.vue b/pages/index.vue
@@ -204,9 +204,11 @@ onMounted(async () => {
               >
                 <template v-if="!isSongListLoading">
                   <UiInput v-model="searchContent" placeholder="搜索歌曲" class="text-md mb-2" />
-                  <div v-for="song in processedListData.slice(0, showLength)" :key="song.id">
-                    <MusicCard :song="song" show-mine />
-                  </div>
+                  <TransitionGroup name="list" tag="ul">
+                    <li v-for="song in processedListData.slice(0, showLength)" :key="song.id">
+                      <MusicCard :song="song" show-mine />
+                    </li>
+                  </TransitionGroup>
                   <UiAlert v-if="showLength < processedListData.length">
                     <UiAlertDescription class="flex flex-row">
                       <span class="self-center">
@@ -230,9 +232,11 @@ onMounted(async () => {
                     v-model="selectedDate" mode="date" view="weekly" expanded title-position="left" locale="zh"
                     borderless :attributes="calendarAttr" class="mb-2" is-required
                   />
-                  <div v-for="song in arrangement" :key="song.id">
-                    <MusicCard :song="song" show-mine />
-                  </div>
+                  <TransitionGroup name="list" tag="ul">
+                    <li v-for="song in arrangement" :key="song.id">
+                      <MusicCard :song="song" show-mine />
+                    </li>
+                  </TransitionGroup>
                   <p v-if="!arrangement" class="text-sm text-center">
                     今日无排歌哦~
                   </p>
@@ -252,9 +256,11 @@ onMounted(async () => {
           <UiCardContent>
             <UiScrollArea class="h-[calc(100svh-29rem)]">
               <template v-if="!isSongListLoading">
-                <div v-for="song in processedListData.slice(0, showLength)" :key="song.id">
-                  <MusicCard :song="song" show-mine />
-                </div>
+                <TransitionGroup name="list" tag="ul">
+                  <li v-for="song in processedListData.slice(0, showLength)" :key="song.id">
+                    <MusicCard :song="song" show-mine />
+                  </li>
+                </TransitionGroup>
                 <UiAlert v-if="showLength < processedListData.length">
                   <UiAlertDescription class="flex flex-row">
                     <span class="self-center">
@@ -284,9 +290,11 @@ onMounted(async () => {
               borderless :attributes="calendarAttr" class="mb-2" is-required
             />
             <UiScrollArea class="h-[calc(100svh-19rem)]">
-              <div v-for="song in arrangement" :key="song.id">
-                <MusicCard :song="song" show-mine />
-              </div>
+              <TransitionGroup name="list" tag="ul">
+                <li v-for="song in arrangement" :key="song.id">
+                  <MusicCard :song="song" show-mine />
+                </li>
+              </TransitionGroup>
               <p v-if="!arrangement" class="text-sm text-center">
                 今日无排歌哦~
               </p>

diff --git a/server/trpc/controllers/song.ts b/server/trpc/controllers/song.ts
@@ -86,7 +86,7 @@ export class SongController {
       const res = await db.select().from(songs).where(gt(songs.createdAt, new Date(Date.now() - 4 * 24 * 60 * 60 * 1000)));
       return { success: true, res, message: '获取成功' };
     } catch (err) {
-      return { success: false, message: '歌曲不存在' };
+      return { success: false, message: '服务器内部错误' };
     }
   }
 }
diff --git a/server/trpc/routers/song.ts b/server/trpc/routers/song.ts
@@ -112,8 +112,7 @@ export const songRouter = router({
       if (!res.success || !res.res) {
         throw new TRPCError({ code: 'BAD_REQUEST', message: res.message });
       } else {
-        const allSongs = res.res.length;
-        return allSongs;
+        return res.res.length;
       }
     }),
 });