✌️

src/web/app/desktop/views/components/settings.drive.vue

+<template>
+<div class="root">
+	<template v-if="!fetching">
+		<el-progress :text-inside="true" :stroke-width="18" :percentage="Math.floor((usage / capacity) * 100)"/>
+		<p><b>{{ capacity | bytes }}</b>中<b>{{ usage | bytes }}</b>使用中</p>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			usage: null,
+			capacity: null
+		};
+	},
+	mounted() {
+		(this as any).api('drive').then(info => {
+			this.capacity = info.capacity;
+			this.usage = info.usage;
+			this.fetching = false;
+		});
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.root
+	> p
+		> b
+			margin 0 8px
+</style>

src/web/app/desktop/views/components/settings.vue

@@ -71,7 +71,7 @@
 
 		<section class="drive" v-show="page == 'drive'">
 			<h1>%i18n:desktop.tags.mk-settings.drive%</h1>
-			<mk-drive-setting/>
+			<x-drive/>
 		</section>
 
 		<section class="mute" v-show="page == 'mute'">
@@ -163,6 +163,7 @@ import X2fa from './settings.2fa.vue';
 import XApi from './settings.api.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
+import XDrive from './settings.drive.vue';
 import { docsUrl, license, lang, version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
 
@@ -174,7 +175,8 @@ export default Vue.extend({
 		X2fa,
 		XApi,
 		XApps,
-		XSignins
+		XSignins,
+		XDrive
 	},
 	data() {
 		return {