feat: add songlist panel in user center

src/components/Tabs.vue

@@ -50,7 +50,8 @@ async function onTabClick(tab: T) {
             v-show="currentTab.name === tab.name"
             :key="tab.name"
             :class="[
-                'h-full',
+                'flex-1',
+                'min-h-0',
                 'w-full',
                 tabPaneClass,
                 { 'content-hidden': currentTab.name !== tab.name }

src/pages/Album/components/List.vue

@@ -40,7 +40,7 @@ async function onCollectClick() {
                     class="btn-secondary btn-outline btn-xs mr-2"
                     @click="onCollectClick"
                 >
-                    {{ extraInfo?.isSub ? '取消收藏' : '收藏' }}
+                    {{ extraInfo?.isSub ? '已收藏' : '收藏' }}
                 </Button>
                 <Button
                     class="btn-secondary btn-outline btn-xs"

src/pages/Songlist/components/Info.vue

@@ -77,7 +77,9 @@ const lessThan1280 = useMediaQuery('(max-width: 1279px)')
             </div>
             <Collapsible
                 :collapsible="
-                    (info?.description.length || 0) > (lessThan768 ? 150 : lessThan1280 ? 300 : 400)
+                    // prettier-ignore
+                    (info?.description?.length || 0) >
+                        (lessThan768 ? 150 : lessThan1280 ? 300 : 400)
                 "
                 :collapse-height="lessThan768 ? 97 : 110"
                 :possible-max-height="lessThan1280 ? 500 : 1000"

src/pages/UserCenter/UserCenter.vue

@@ -6,7 +6,7 @@ import { useLoginService } from 'services'
 import { useProfileStore } from 'stores'
 import { Image } from 'components'
 import { post } from '../../utils/request'
-import { AlbumList, FavoriteSongs, RecentSongs, UserInfo } from './components'
+import { AlbumList, FavoriteSongs, RecentSongs, SonglistsList, UserInfo } from './components'
 
 const { profile } = storeToRefs(useProfileStore())
 const { onProfileLoaded } = useLoginService()
@@ -45,6 +45,9 @@ onProfileLoaded((p) => {
                     <RecentSongs />
                 </div>
             </div>
+            <div class="px-4 lg:flex">
+                <SonglistsList />
+            </div>
         </div>
     </div>
 </template>

src/pages/UserCenter/components/FavoriteSongs.vue

@@ -50,6 +50,6 @@ watch(props, async (val) => {
 
 <style lang="scss">
 .my-favorite-songs {
-    height: 900px;
+    height: 500px;
 }
 </style>

src/pages/UserCenter/components/RecentSongs.vue

@@ -91,7 +91,7 @@ onProfileLoaded(() => {
             <span>最近播放</span>
         </h2>
         <Tabs
-            class="mt-3 h-full"
+            class="mt-3 min-h-0 flex-1"
             :tabs="tabs"
             :onTabChange="onTabChange"
             :disabled="loading"
@@ -121,6 +121,6 @@ onProfileLoaded(() => {
 
 <style lang="scss">
 .recent-songs {
-    height: 900px;
+    height: 500px;
 }
 </style>

src/pages/UserCenter/components/SonglistsList/SonglistsList.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSonglistsStore } from 'stores'
+import ListItem from 'src/pages/Search/components/ListItem.vue'
+
+const currentTab = ref<'created-list' | 'collected-list'>('created-list')
+const { createdSonglists, collectedSonglists } = storeToRefs(useSonglistsStore())
+
+const songlistArr = computed(() => {
+    const list =
+        currentTab.value === 'created-list' ? createdSonglists.value : collectedSonglists.value
+    return list.map((item) => {
+        return {
+            name: item.name,
+            creator: item.creator.nickname,
+            cover: item.coverImgUrl,
+            id: item.id
+        }
+    })
+})
+
+async function onTabChange() {
+    currentTab.value = currentTab.value === 'created-list' ? 'collected-list' : 'created-list'
+}
+</script>
+
+<template>
+    <div
+        id="songlists-list"
+        class="mt-8 flex w-full flex-col rounded-lg bg-base-100 bg-gradient-to-b from-primary/5 to-30% p-4"
+    >
+        <div class="mb-4 flex w-full items-center">
+            <template v-if="currentTab === 'created-list'">
+                <h2 class="border-l-4 border-primary px-2 text-lg/5 font-bold">我创建的歌单</h2>
+                <div class="h-4 w-px bg-base-content/10"></div>
+                <button
+                    class="ml-2 text-sm"
+                    @click="onTabChange"
+                >
+                    我收藏的歌单
+                </button>
+            </template>
+            <template v-else>
+                <h2 class="border-l-4 border-primary px-2 text-lg/5 font-bold">我收藏的歌单</h2>
+                <div class="h-4 w-px bg-base-content/10"></div>
+                <button
+                    class="ml-2 text-sm"
+                    @click="onTabChange"
+                >
+                    我创建的歌单
+                </button>
+            </template>
+        </div>
+
+        <ul
+            class="songlists-list relative flex h-[800px] w-full flex-wrap overflow-y-auto overflow-x-visible"
+        >
+            <ListItem
+                v-for="songlist in songlistArr"
+                :key="songlist.id"
+                :list-item="songlist"
+                type="songlist"
+                class="flex items-center"
+            />
+        </ul>
+    </div>
+</template>
+
+<style lang="scss"></style>

src/pages/UserCenter/components/index.ts

@@ -1,4 +1,5 @@
 export { default as AlbumList } from './AlbumList/AlbumList.vue'
 export { default as FavoriteSongs } from './FavoriteSongs.vue'
 export { default as RecentSongs } from './RecentSongs.vue'
+export { default as SonglistsList } from './SonglistsList/SonglistsList.vue'
 export { default as UserInfo } from './UserInfo.vue'