From 226893a825bc861292b5e4a982e75a18ef568a86 Mon Sep 17 00:00:00 2001
From: Rocka <i@rocka.me>
Date: Thu, 13 Jul 2023 14:00:24 +0800
Subject: [PATCH] renderer: improve tab animation

---
 .../components/ArtistDetail/ArtistDetail.vue  | 48 +++++++++-------
 src/renderer/components/UserDetail/Event.vue  |  2 +-
 src/renderer/components/UserDetail/Record.vue |  8 +--
 .../components/UserDetail/UserDetail.vue      | 57 ++++++++++---------
 src/renderer/page/Favorite/Favorite.vue       |  4 +-
 src/renderer/page/Favorite/SearchFavrites.vue |  1 +
 src/renderer/transition.css                   |  8 ++-
 7 files changed, 75 insertions(+), 53 deletions(-)

diff --git a/src/renderer/components/ArtistDetail/ArtistDetail.vue b/src/renderer/components/ArtistDetail/ArtistDetail.vue
index c93cfda4..51844364 100644
--- a/src/renderer/components/ArtistDetail/ArtistDetail.vue
+++ b/src/renderer/components/ArtistDetail/ArtistDetail.vue
@@ -39,22 +39,23 @@
             :value="tab"
             @change="handelTabChange">
             <mu-tab v-for="tab of DetailTabs"
-                :key="tab[0]"
-                :value="tab[0]">{{tab[1]}}</mu-tab>
+                :key="tab.key"
+                :value="tab.key">{{ tab.title }}</mu-tab>
         </mu-tabs>
-        <transition mode="out-in"
-            :name="transitionName">
-            <keep-alive>
-                <component :is="detailCompo"
-                    :artist="artist"
-                    @scroll="handleScroll"></component>
-            </keep-alive>
-        </transition>
+        <div class="slide-anim-container">
+            <transition :name="transitionName">
+                <keep-alive>
+                    <component :is="detailCompo"
+                        :artist="artist"
+                        @scroll="handleScroll"></component>
+                </keep-alive>
+            </transition>
+        </div>
     </div>
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 
 import Api from '@/api/ipc';
 import { bkgImg, sizeImg } from '@/util/image';
@@ -64,10 +65,10 @@ import RelatedMVs from './RelatedMVs.vue';
 import Introduction from './Introduction.vue';
 
 const DetailTabs = [
-    ['hotSongs', '热门单曲'],
-    ['albums', '所有专辑'],
-    ['mvs', '相关 MV'],
-    ['intro', '艺人介绍']
+    { key: 'hotSongs', title: '热门单曲' },
+    { key: 'albums', title: '所有专辑' },
+    { key: 'mvs', title: '相关 MV' },
+    { key: 'intro', title: '艺人介绍' }
 ];
 
 const DetailCompo = {
@@ -77,8 +78,11 @@ const DetailCompo = {
     intro: 'Introduction'
 };
 
+/** @typedef {{ detail: Models.Artist, hotSongs: Models.Track[] }} ArtistDetails */
+
 export default {
     props: {
+        /** @type {Vue.PropOptions<ArtistDetails>} */
         artist: {
             required: true
         }
@@ -91,14 +95,20 @@ export default {
         };
     },
     computed: {
-        ...mapState(['user']),
+        /** @returns {{ key: string, title: string }[]} */
+        DetailTabs() { return DetailTabs; },
+        /** @returns {import('@/store/modules/user').State} */
+        user() { return this.$store.state.user; },
+        /** @returns {string} */
         bkgImgStyle() {
             return bkgImg(sizeImg(this.artist.detail.picUrl, 640, 300));
         },
+        /** @returns {import('vue-router').Route} */
         accountRoute() {
             const id = this.artist.detail.accountId;
             return id ? { name: 'user', params: { id } } : null;
         },
+        /** @returns {string} */
         detailCompo() {
             return DetailCompo[this.tab];
         }
@@ -135,8 +145,8 @@ export default {
         handelTabChange(val) {
             let oldIndex, newIndex;
             DetailTabs.forEach((tab, index) => {
-                if (tab[0] === this.tab) oldIndex = index;
-                if (tab[0] === val) newIndex = index;
+                if (tab.key === this.tab) oldIndex = index;
+                if (tab.key === val) newIndex = index;
             });
             if (newIndex < oldIndex) {
                 this.transitionName = 'slide-right';
@@ -153,7 +163,6 @@ export default {
         }
     },
     created() {
-        this.DetailTabs = DetailTabs;
         this.updateDynamicDetail();
     },
     components: {
@@ -167,6 +176,7 @@ export default {
 
 <style lang="less">
 .artist-detail {
+    height: 100%;
     overflow-x: hidden;
     .header {
         width: 100%;
diff --git a/src/renderer/components/UserDetail/Event.vue b/src/renderer/components/UserDetail/Event.vue
index d5c1476d..35f5eb8a 100644
--- a/src/renderer/components/UserDetail/Event.vue
+++ b/src/renderer/components/UserDetail/Event.vue
@@ -121,7 +121,7 @@ export default {
 
 <style lang="less">
 .user-event {
-    margin: 8px 24px;
+    padding: 8px 24px;
     .event-item:not(:first-child) {
         border-top: 1px solid rgba(0, 0, 0, 0.1);
     }
diff --git a/src/renderer/components/UserDetail/Record.vue b/src/renderer/components/UserDetail/Record.vue
index 43b0bc26..cf9a0a2e 100644
--- a/src/renderer/components/UserDetail/Record.vue
+++ b/src/renderer/components/UserDetail/Record.vue
@@ -11,8 +11,8 @@
                 <span class="statistics">累计听歌 {{ user.listenSongs }} 首</span>
             </mu-sub-header>
             <CenteredLoading v-if="loading"></CenteredLoading>
-            <VirtualTrackList v-else
-                :tracks="tracks"></VirtualTrackList>
+            <TrackList v-else
+                :tracks="tracks"></TrackList>
         </template>
         <CenteredTip v-else
             icon="cloud_off"
@@ -24,7 +24,7 @@
 import Api from '@/api/ipc';
 import { Track } from '@/util/models';
 
-import VirtualTrackList from '@/components/TrackList/VirtualTrackList.vue';
+import TrackList from '@/components/TrackList/TrackList.vue';
 import CenteredLoading from '@/components/CenteredLoading.vue';
 import CenteredTip from '@/components/CenteredTip.vue';
 
@@ -86,7 +86,7 @@ export default {
         this.getPlayRecord();
     },
     components: {
-        VirtualTrackList,
+        TrackList,
         CenteredLoading,
         CenteredTip
     }
diff --git a/src/renderer/components/UserDetail/UserDetail.vue b/src/renderer/components/UserDetail/UserDetail.vue
index 1e2fb81e..c32801ff 100644
--- a/src/renderer/components/UserDetail/UserDetail.vue
+++ b/src/renderer/components/UserDetail/UserDetail.vue
@@ -52,23 +52,22 @@
             :value="tab"
             @change="handleTabChange">
             <mu-tab v-for="tab of Tabs"
-                :key="tab[0]"
-                :value="tab[0]">{{tab[1]}}</mu-tab>
+                :key="tab.key"
+                :value="tab.key">{{ tab.title }}</mu-tab>
         </mu-tabs>
-        <transition mode="out-in"
-            :name="transitionName">
-            <keep-alive>
-                <component :is="detailCompo"
-                    :user="user"
-                    :isSelf="isSelf"></component>
-            </keep-alive>
-        </transition>
+        <div class="slide-anim-container">
+            <transition :name="transitionName">
+                <keep-alive>
+                    <component :is="detailCompo"
+                        :user="user"
+                        :isSelf="isSelf"></component>
+                </keep-alive>
+            </transition>
+        </div>
     </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 import Api from '@/api/ipc';
 import { sizeImg, HiDpiPx } from '@/util/image';
 
@@ -80,10 +79,10 @@ import Event from './Event.vue';
 import About from './About.vue';
 
 const Tabs = [
-    ['music', '音乐'],
-    ['record', '排行'],
-    ['event', '动态'],
-    ['about', '关于']
+    { key: 'music', title: '音乐' },
+    { key: 'record', title: '排行' },
+    { key: 'event', title: '动态' },
+    { key: 'about', title: '关于' }
 ];
 
 const DetailCompo = {
@@ -95,6 +94,7 @@ const DetailCompo = {
 
 export default {
     props: {
+        /** @type {Vue.PropOptions<Types.UserInfoRes>} */
         user: {
             required: true
         }
@@ -110,19 +110,24 @@ export default {
         };
     },
     computed: {
-        ...mapState({
-            userState: 'user'
-        }),
+        /** @returns {{ key: string, title: string }[]} */
+        Tabs() { return Tabs; },
+        /** @returns {import('@/store/modules/user').State} */
+        userState() { return this.$store.state.user; },
+        /** @returns {boolean} */
         isSelf() {
             if (!this.userState.loginValid) return false;
             return this.userState.info.id === this.user.profile.userId;
         },
+        /** @returns {string} */
         bkgImgStyle() {
             return `background-image:url(${sizeImg(this.user.profile.backgroundUrl, HiDpiPx(640), HiDpiPx(300))})`;
         },
+        /** @returns {string} */
         avatarUrl() {
             return sizeImg(this.user.profile.avatarUrl, HiDpiPx(75));
         },
+        /** @returns {string} */
         description() {
             const i = this.user.identify;
             if (i && i.imageDesc) return i.imageDesc;
@@ -130,17 +135,20 @@ export default {
             if (!p.userType) return null;
             return p.description || (UserType[p.userType] || DefaultUserType).name;
         },
+        /** @returns {string} */
         follows() {
             const p = this.user.profile;
             const follows = typeof p.follows === 'number' ? p.follows : '...';
             const followeds = typeof this.dynamicFollows.followeds === 'number' ? this.dynamicFollows.followeds : '...';
             return `关注 ${follows} ｜ 粉丝 ${followeds}`;
         },
+        /** @returns {{ icon: string, text: string }} */
         followBtn() {
             return this.dynamicFollows.followed
                 ? { icon: 'done', text: '已关注' }
                 : { icon: 'add', text: '关注' };
         },
+        /** @returns {string} */
         detailCompo() {
             return DetailCompo[this.tab];
         }
@@ -181,8 +189,8 @@ export default {
         handleTabChange(val) {
             let oldIndex, newIndex;
             Tabs.forEach((tab, index) => {
-                if (tab[0] === this.tab) oldIndex = index;
-                if (tab[0] === val) newIndex = index;
+                if (tab.key === this.tab) oldIndex = index;
+                if (tab.key === val) newIndex = index;
             });
             if (newIndex < oldIndex) {
                 this.transitionName = 'slide-right';
@@ -198,7 +206,6 @@ export default {
         }
     },
     created() {
-        this.Tabs = Tabs;
         this.updateDynamicFollows();
     },
     components: {
@@ -214,10 +221,8 @@ export default {
 
 <style lang="less">
 .user-detail {
-    // a hack to make RecyclerScroller work
-    // https://github.com/Akryum/vue-virtual-scroller/blob/v1.0.0-rc.2/src/components/RecycleScroller.vue#L462
-    // https://github.com/olahol/scrollparent.js/blob/2.0.1/scrollparent.js#L18-L28
-    overflow: hidden overlay;
+    height: 100%;
+    overflow-x: hidden;
     .user-bkg {
         position: relative;
         height: 300px;
diff --git a/src/renderer/page/Favorite/Favorite.vue b/src/renderer/page/Favorite/Favorite.vue
index ccff5d37..e0d41a5a 100644
--- a/src/renderer/page/Favorite/Favorite.vue
+++ b/src/renderer/page/Favorite/Favorite.vue
@@ -13,8 +13,8 @@
                     v-text="tab.title"></span>
             </mu-tab>
         </mu-tabs>
-        <div class="fav-content">
-            <transition mode="out-in"
+        <div class="fav-content slide-anim-container">
+            <transition
                 :name="transitionName"
                 @after-enter="handleTabPageEnter">
                 <component ref="tabPage"
diff --git a/src/renderer/page/Favorite/SearchFavrites.vue b/src/renderer/page/Favorite/SearchFavrites.vue
index 8905c738..2b13b2f3 100644
--- a/src/renderer/page/Favorite/SearchFavrites.vue
+++ b/src/renderer/page/Favorite/SearchFavrites.vue
@@ -103,6 +103,7 @@ export default {
             ]).then(() => this.loading = false);
         },
         tabActivated() {
+            if (!this.user.loginValid) return;
             this.fetchData();
             this.focusSearchInput();
         },
diff --git a/src/renderer/transition.css b/src/renderer/transition.css
index 01523a59..dca05da1 100644
--- a/src/renderer/transition.css
+++ b/src/renderer/transition.css
@@ -1,10 +1,16 @@
 /* tab slide */
 
+.slide-anim-container {
+    position: relative;
+}
+
 .slide-left-enter-active,
 .slide-left-leave-active,
 .slide-right-enter-active,
 .slide-right-leave-active {
-    transition-duration: 0.15s;
+    position: absolute;
+    width: 100%;
+    transition-duration: 0.3s;
     transition-property: transform, opacity;
     transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
 }