renderer: basic 'Private Cloud' functions

src/renderer/page/Disk.vue

@@ -0,0 +1,88 @@
+<template>
+    <ListDetailLayout class="ncm-page"
+        showBack
+        :detailLoading="detailLoading">
+        <template #list>
+            <div v-if="user.loginValid"
+                class="disk__aside">
+                <p>歌曲永久保存，随时随地多端畅听</p>
+                <p>{{ humanSize(size) }} / {{ humanSize(maxSize) }}</p>
+                <mu-linear-progress mode="determinate"
+                    :value="size / maxSize"
+                    color="secondary"></mu-linear-progress>
+            </div>
+        </template>
+        <template v-if="user.loginValid">
+            <PlayTracks :tracks="tracks"
+                :source="TrackSource"></PlayTracks>
+            <VirtualTrackList :tracks="tracks"
+                :source="TrackSource"></VirtualTrackList>
+        </template>
+        <CenteredTip v-else
+            icon="cloud_off"
+            tip="登录后查看音乐云盘"></CenteredTip>
+    </ListDetailLayout>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+import Api from '@/api/ipc';
+import { Track } from '@/util/models';
+import { humanSize } from '@/util/formatter';
+
+import ListDetailLayout from '@/components/ListDetailLayout.vue';
+import PlayTracks from '@/components/PlayTracks.vue';
+import VirtualTrackList from '@/components/TrackList/VirtualTrackList.vue';
+import CenteredTip from '@/components/CenteredTip.vue';
+
+const TrackSource = {
+    name: 'disk'
+};
+
+export default {
+    data() {
+        return {
+            size: 0,
+            maxSize: 0,
+            count: 0,
+            tracks: [],
+            detailLoading: true
+        };
+    },
+    computed: {
+        ...mapState(['user'])
+    },
+    methods: {
+        humanSize,
+        async loadTracks() {
+            const res = await Api.getPrivateCloudList(500, 0);
+            if (res.code === 200) {
+                this.tracks = res.data.map(d => new Track(d.simpleSong));
+                this.size = res.size;
+                this.maxSize = res.maxSize;
+                this.count = res.count;
+            }
+            this.detailLoading = false;
+        }
+    },
+    created() {
+        this.TrackSource = TrackSource;
+    },
+    mounted() {
+        this.loadTracks();
+    },
+    components: {
+        PlayTracks,
+        ListDetailLayout,
+        VirtualTrackList,
+        CenteredTip
+    }
+};
+</script>
+
+<style lang="less">
+.disk__aside {
+    padding: 10px 16px;
+}
+</style>

src/renderer/routes.js

@@ -13,6 +13,7 @@ import Favorite from '@/page/Favorite/Favorite.vue';
 import RecommendSongs from '@/page/RecommendSongs/RecommendSongs.vue';
 import Comment from '@/page/Comment/Comment.vue';
 import Radio from '@/page/Radio/Radio.vue';
+import Disk from '@/page/Disk.vue';
 import UnderConstruction from '@/page/UnderConstruction.vue';
 
 /**
@@ -105,6 +106,13 @@ const routes = [
         path: '/radio',
         component: Radio
     },
+    {
+        name: 'disk',
+        path: '/disk',
+        title: '音乐云盘',
+        component: Disk,
+        icon: 'cloud'
+    },
     {
         name: 'settings',
         path: '/settings',