renderer: migrate off deprecated router-link props

src/renderer/components/AlbumDetail.vue

@@ -7,8 +7,7 @@
                 <div class="info">
                     <div class="name">{{ album.name }}</div>
                     <div class="creation-info">
-                        <router-link tag="div"
-                            class="creator"
+                        <router-link class="creator"
                             :to="{ name: 'artist', params: { id: album.artist.id } }">
                             <mu-avatar class="avatar">
                                 <img :src="creatorAvatarSrc">
@@ -27,13 +26,17 @@
                             :value="dynamicDetail.isSub ? 'star' : 'star_border'"></mu-icon>
                         <span>{{btnSubscribeText}}</span>
                     </mu-button>
-                    <mu-button flat
-                        small
-                        :to="{ name: 'comment', params: { type: 'album', id: album.id } }">
-                        <mu-icon left
-                            value="comment"></mu-icon>
-                        <span>{{btnCommentText}}</span>
-                    </mu-button>
+                    <router-link :to="{ name: 'comment', params: { type: 'album', id: album.id } }"
+                        v-slot="{ navigate }"
+                        custom>
+                        <mu-button flat
+                            small
+                            @click="navigate">
+                            <mu-icon left
+                                value="comment"></mu-icon>
+                            <span>{{btnCommentText}}</span>
+                        </mu-button>
+                    </router-link>
                 </div>
                 <div class="intro">
                     <mu-list dense
@@ -229,6 +232,7 @@ export default {
                             flex-shrink: 0;
                         }
                         .creator-name {
+                            color: var(--text-color);
                             margin: 0 1em;
                             white-space: nowrap;
                             overflow: hidden;

src/renderer/components/ArtistDetail/ArtistDetail.vue

@@ -10,17 +10,20 @@
                             v-for="alia in artist.detail.alias"
                             :key="alia">{{alia}}</span>
                     </span>
-                    <mu-button flat
-                        small
-                        class="shadow account"
-                        color="white"
-                        v-if="accountRoute"
+                    <router-link v-if="accountRoute"
                         :to="accountRoute"
-                        @click="handleFollow">
-                        <mu-icon left
-                            value="person_outline"></mu-icon>
-                        <span class="shaodw">个人主页</span>
-                    </mu-button>
+                        v-slot="{ navigate }"
+                        custom>
+                        <mu-button flat
+                            small
+                            class="shadow account"
+                            color="white"
+                            @click="navigate">
+                            <mu-icon left
+                                value="person_outline"></mu-icon>
+                            <span class="shaodw">个人主页</span>
+                        </mu-button>
+                    </router-link>
                     <mu-button flat
                         small
                         class="shadow"

src/renderer/components/DjRadioDetail/DjRadioDetail.vue

@@ -8,7 +8,6 @@
                     <div class="name">{{djradio.name}}</div>
                     <div class="creation-info">
                         <router-link class="creator"
-                            tag="div"
                             :to="{ name: 'user', params: { id: djradio.dj.userId } }">
                             <mu-avatar class="avatar">
                                 <img :src="creatorAvatarSrc">
@@ -62,7 +61,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 import throttle from 'lodash/throttle';
 
 import { getDjRadioProgram } from '@/api/typed';
@@ -74,6 +73,7 @@ import { shortDate } from '@/util/formatter';
 
 export default {
     props: {
+        /** @type {Vue.PropOptions<Models.DjRadio>} */
         djradio: {
             required: true
         }
@@ -89,21 +89,27 @@ export default {
         };
     },
     computed: {
-        ...mapState(['user']),
+        /** @returns {import('@/store/modules/user').State} */
+        user() { return this.$store.state.user; },
+        /** @returns {string} */
         creatorAvatarSrc() {
             return sizeImg(this.djradio.dj.avatarUrl, HiDpiPx(40));
         },
+        /** @returns {string} */
         coverSrc() {
             return sizeImg(this.djradio.picUrl, HiDpiPx(160));
         },
+        /** @returns {string} */
         createTime() {
             return shortDate(this.djradio.createTime);
         },
+        /** @returns {string} */
         btnSubscribeText() {
             const t = this.shouldSubscribed ? '已订阅' : '订阅';
             const n = this.djradio.subCount + this.subsCntOffset;
             return `${t} (${n})`;
         },
+        /** @returns {string} */
         djradioDesc() {
             return this.djradio.desc || '暂无';
         }

src/renderer/components/DjRadioDetail/DjRadioProgramList.vue

@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions } from 'vuex';
 
 import { workerExecute } from '@/worker/message';
 
@@ -84,6 +84,7 @@ export default {
             type: Number,
             required: true
         },
+        /** @type {Vue.PropOptions<Models.DjRadioProgram[]} */
         programs: {
             type: Array,
             required: true
@@ -98,10 +99,15 @@ export default {
         };
     },
     computed: {
-        ...mapState(['ui', 'playlist']),
+        /** @returns {import('@/store/modules/ui').State} */
+        ui() { return this.$store.state.ui; },
+        /** @returns {import('@/store/modules/playlist').State}*/
+        playing() { return this.$store.state.playlist; },
+        /** @returns {Models.DjRadioProgram[]} */
         programsToShow() {
             return this.filteredPrograms || this.programs;
         },
+        /** @returns {string} */
         btnPlayText() {
             return `播放全部 (${this.total})`;
         }

src/renderer/components/EventDetail/EventContent.vue

@@ -49,23 +49,29 @@ const ShareFieldNames = ['歌曲', '专辑', '歌单', ' MV', '视频', '电台'
 
 export default {
     props: {
+        /** @type {Vue.PropOptions<Types.Event>} */
         event: {
             required: true
         },
+        /** @type {Vue.PropOptions<any>} */
         json: {
             required: true
         }
     },
     computed: {
+        /** @returns {string} */
         avatar() {
             return sizeImg(this.event.user.avatarUrl, HiDpiPx(40));
         },
+        /** @returns {string} */
         time() {
             return shortDate(this.event.eventTime);
         },
+        /** @returns {string[]} */
         pics() {
             return this.event.pics.map(p => sizeImg(p.pcSquareUrl, HiDpiPx(100)));
         },
+        /** @returns {string?} */
         shareType() {
             if (this.json.event) return '转发：';
             for (let i = 0; i < ShareFields.length; i++) {
@@ -76,6 +82,7 @@ export default {
             }
             return null;
         },
+        /** @returns {boolean} */
         hasShare() {
             return ShareFields.some(f => f in this.json);
         }

src/renderer/components/EventDetail/EventItem.vue

@@ -17,14 +17,18 @@
                     value="thumb_up"></mu-icon>
                 <span>{{ event.info.likedCount }}</span>
             </mu-button>
-            <mu-button flat
-                small
-                :to="{ name: 'comment', params: { type: 'event', id: `${event.id}_${event.user.userId}` } }">
-                <mu-icon left
-                    size="16"
-                    value="comment"></mu-icon>
-                <span>{{ event.info.commentCount }}</span>
-            </mu-button>
+            <router-link :to="{ name: 'comment', params: { type: 'event', id: `${event.id}_${event.user.userId}` } }"
+                v-slot="{ navigate }"
+                custom>
+                <mu-button flat
+                    small
+                    @click="navigate">
+                    <mu-icon left
+                        size="16"
+                        value="comment"></mu-icon>
+                    <span>{{ event.info.commentCount }}</span>
+                </mu-button>
+            </router-link>
         </div>
     </div>
 </template>
@@ -34,15 +38,18 @@ import EventContent from './EventContent.vue';
 
 export default {
     props: {
+        /** @type {Vue.PropOptions<Types.Event>} */
         event: {
             type: Object,
             required: true
         }
     },
     computed: {
+        /** @return {any} */
         json() {
             return JSON.parse(this.event.json);
         },
+        /** @return {any?} */
         forwardJson() {
             if (!this.json.event) return null;
             return JSON.parse(this.json.event.json);

src/renderer/components/EventDetail/EventShare.vue

@@ -22,12 +22,13 @@ import { sizeImg, HiDpiPx } from '@/util/image';
 
 export default {
     props: {
+        /** @type {Vue.PropOptions<any>} */
         json: {
-            type: Object,
             required: true
         }
     },
     computed: {
+        /** @returns {{ img: string, title: string, subTitle: string, route?: import('vue-router').Route, author?: Models.Profile }} */
         share() {
             const j = this.json;
             if (!j) return null;

src/renderer/components/PlaylistDetail.vue

@@ -7,11 +7,11 @@
                 <div class="info">
                     <div class="name">
                         <span>{{ playlist.name }}</span>
-                        <span v-if="playlist.updateFrequency" class="small">{{ playlist.updateFrequency }}</span>
+                        <span v-if="playlist.updateFrequency"
+                            class="small">{{ playlist.updateFrequency }}</span>
                     </div>
                     <div class="creation-info">
                         <router-link class="creator"
-                            tag="div"
                             :to="{ name: 'user', params: { id: playlist.creator.id } }">
                             <mu-avatar class="avatar">
                                 <img :src="creatorAvatarSrc">
@@ -31,13 +31,17 @@
                             :value="shouldSubscribed ? 'star' : 'star_border'"></mu-icon>
                         <span>{{btnSubscribeText}}</span>
                     </mu-button>
-                    <mu-button flat
-                        small
-                        :to="{ name: 'comment', params: { type: 'playlist', id: playlist.id } }">
-                        <mu-icon left
-                            value="comment"></mu-icon>
-                        <span>{{btnCommentText}}</span>
-                    </mu-button>
+                    <router-link :to="{ name: 'comment', params: { type: 'playlist', id: playlist.id } }"
+                        v-slot="{ navigate }"
+                        custom>
+                        <mu-button flat
+                            small
+                            @click="navigate">
+                            <mu-icon left
+                                value="comment"></mu-icon>
+                            <span>{{btnCommentText}}</span>
+                        </mu-button>
+                    </router-link>
                 </div>
                 <div class="intro">
                     <mu-list dense

src/renderer/components/UserDetail/Music.vue

@@ -4,31 +4,45 @@
         <template v-else>
             <template v-if="radios.length">
                 <mu-sub-header v-if="radios.length > 0">主播电台</mu-sub-header>
-                <AvatarListItem v-for="r in radios"
+                <router-link v-for="r in radios"
+                    :to="{ name: 'djradio', params: { id: r.id } }"
                     :key="'r' + r.id"
-                    :img="r.picUrl"
-                    :title="r.name"
-                    :subTitle="r.desc"
-                    :titleTag="r.category"
-                    :to="{ name: 'djradio', params: { id: r.id } }"></AvatarListItem>
+                    v-slot="{ navigate }"
+                    custom>
+                    <AvatarListItem :img="r.picUrl"
+                        :title="r.name"
+                        :subTitle="r.desc"
+                        :titleTag="r.category"
+                        @click="navigate"></AvatarListItem>
+                </router-link>
             </template>
             <!-- <mu-sub-header>音乐专栏</mu-sub-header> -->
-            <mu-sub-header>创建的歌单</mu-sub-header>
-            <!-- TODO: 歌单分页展示，或者上 RecycleScroller -->
-            <AvatarListItem v-for="p in listCreated"
-                :key="'p' + p.id"
-                :img="p.coverImgUrl"
-                :title="p.name"
-                :subTitle="formatPlaylistSubtitle(p)"
-                :to="{ name: 'playlist', params: { id: p.id } }"></AvatarListItem>
+            <template v-if="listCreated.length">
+                <mu-sub-header>创建的歌单</mu-sub-header>
+                <!-- TODO: 歌单分页展示，或者上 RecycleScroller -->
+                <router-link v-for="p in listCreated"
+                    :key="'p' + p.id"
+                    :to="{ name: 'playlist', params: { id: p.id } }"
+                    v-slot="{ navigate }"
+                    custom>
+                    <AvatarListItem :img="p.coverImgUrl"
+                        :title="p.name"
+                        :subTitle="formatPlaylistSubtitle(p)"
+                        @click="navigate"></AvatarListItem>
+                </router-link>
+            </template>
             <template v-if="listCollected.length">
                 <mu-sub-header>收藏的歌单</mu-sub-header>
-                <AvatarListItem v-for="p in listCollected"
+                <router-link v-for="p in listCollected"
                     :key="p.id"
-                    :img="p.coverImgUrl"
-                    :title="p.name"
-                    :subTitle="formatPlaylistSubtitle(p)"
-                    :to="{ name: 'playlist', params: { id: p.id } }"></AvatarListItem>
+                    :to="{ name: 'playlist', params: { id: p.id } }"
+                    v-slot="{ navigate }"
+                    custom>
+                    <AvatarListItem :img="p.coverImgUrl"
+                        :title="p.name"
+                        :subTitle="formatPlaylistSubtitle(p)"
+                        @click="navigate"></AvatarListItem>
+                </router-link>
             </template>
         </template>
     </mu-list>