feat(webui): auto-adapted size

koishijs · Apr 13, 2021 · 4ee40b7 · 4ee40b7
1 parent 2818e32
commit 4ee40b7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/packages/plugin-teach/client/teach.vue b/packages/plugin-teach/client/teach.vue
@@ -2,7 +2,7 @@
   <div class="card-grid profile-grid">
     <k-numeric title="总问题数量" icon="quote-left">{{ meta.questions }}</k-numeric>
     <k-numeric title="总问答数量" icon="quote-right">{{ meta.dialogues }}</k-numeric>
-    <k-numeric title="图片服务器" icon="hdd">{{ assetSize }}</k-numeric>
+    <k-numeric title="图片服务器" icon="hdd" type="size" :value="meta.assetSize"/>
   </div>
   <div class="card-grid chart-grid">
     <word-cloud/>
@@ -12,14 +12,8 @@
 <script lang="ts" setup>
 
 import { meta } from '~/client'
-import { computed } from 'vue'
 import WordCloud from './word-cloud.vue'
 
-const assetSize = computed(() => {
-  if (!meta.value.assetSize) return '暂无数据'
-  return (meta.value.assetSize / 1048576).toFixed(1) + ' MB'
-})
-
 </script>
 
 <style lang="scss">

diff --git a/packages/plugin-webui/client/components/numeric.vue b/packages/plugin-webui/client/components/numeric.vue
@@ -3,21 +3,35 @@
     <i :class="`fas fa-${icon}`"/>
     <div class="content">
       <p class="title">{{ title }}</p>
-      <p class="value"><slot/></p>
+      <p class="value"><slot>{{ text }}</slot></p>
     </div>
   </k-card>
 </template>
 
 <script lang="ts" setup>
 
-import { defineProps } from 'vue'
+import { defineProps, computed } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   title: string
   icon: string
-  to?: string
+  type?: 'size'
+  value?: number
 }>()
 
+const text = computed(() => {
+  if (!props.value) return '暂无数据'
+  if (props.type === 'size') {
+    if (props.value >= (1 << 20) * 1000) {
+      return +(props.value / (1 << 30)).toFixed(1) + ' GB'
+    } else if (props.value >= (1 << 10) * 1000) {
+      return +(props.value / (1 << 20)).toFixed(1) + ' MB'
+    } else {
+      return +(props.value / (1 << 10)).toFixed(1) + ' KB'
+    }
+  }
+})
+
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/plugin-webui/client/views/home/home.vue b/packages/plugin-webui/client/views/home/home.vue
@@ -3,7 +3,7 @@
     <k-numeric title="当前消息频率" icon="paper-plane">{{ currentRate }} / min</k-numeric>
     <k-numeric title="近期消息频率" icon="history">{{ recentRate }} / d</k-numeric>
     <k-numeric title="命名插件数量" icon="plug">{{ registry.pluginCount }}</k-numeric>
-    <k-numeric title="数据库体积" icon="database">{{ (meta.storageSize / 1048576).toFixed(1) }} MB</k-numeric>
+    <k-numeric title="数据库体积" icon="database" type="size" :value="meta.storageSize"/>
     <k-numeric title="活跃用户数量" icon="heart">{{ meta.activeUsers }}</k-numeric>
     <k-numeric title="活跃群数量" icon="users">{{ meta.activeGroups }}</k-numeric>
   </div>