From 54bd7633884736ce6eadfd7ff899f53e9050407a Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 13 May 2021 12:37:19 +0800
Subject: [PATCH] feat(webui): show dist size

---
 packages/plugin-webui/client/main.ts          |  2 +-
 .../client/views/dependencies/dep-view.vue    | 54 ++++++++++++++-----
 .../client/views/dependencies/index.vue       |  6 +--
 .../client/views/dependencies/manager.ts      | 22 ++++----
 4 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/packages/plugin-webui/client/main.ts b/packages/plugin-webui/client/main.ts
index 78cb7b297e..ad0879154e 100644
--- a/packages/plugin-webui/client/main.ts
+++ b/packages/plugin-webui/client/main.ts
@@ -45,7 +45,7 @@ router.addRoute({
 router.addRoute({
   path: '/dependencies',
   name: '依赖',
-  meta: { icon: 'puzzle-piece', require: ['registry'] },
+  meta: { icon: 'puzzle-piece', authority: 4, require: ['registry'] },
   component: () => import('./views/dependencies/index.vue'),
 })
 
diff --git a/packages/plugin-webui/client/views/dependencies/dep-view.vue b/packages/plugin-webui/client/views/dependencies/dep-view.vue
index 9da2d9f4f5..c7a7b1f992 100644
--- a/packages/plugin-webui/client/views/dependencies/dep-view.vue
+++ b/packages/plugin-webui/client/views/dependencies/dep-view.vue
@@ -1,18 +1,23 @@
 <template>
-  <tr>
-    <td class="package-name">
-      <a
-        :href="'http://npmjs.com/package/' + remote.name"
-        target="blank" rel="noopener noreferrer"
-        :title="remote.description"
-      >{{ remote.name }}</a>
-      <k-badge type="success" v-if="current.isOfficial">官方</k-badge>
-      <k-badge type="warning" v-if="hasUpdate">可更新</k-badge>
+  <tr :class="{ local: current.isLocal }">
+    <td class="package">
+      <div>
+        <a
+          :href="'http://npmjs.com/package/' + remote.name"
+          target="blank" rel="noopener noreferrer"
+        >{{ remote.name.replace('koishi-plugin-', '') }}</a>
+        <k-badge type="success" v-if="current.isOfficial">官方</k-badge>
+        <k-badge type="warning" v-if="hasUpdate">可更新</k-badge>
+      </div>
+      <div class="description">
+        {{ remote.description }}
+      </div>
     </td>
-    <td>{{ current.version || '-' }}</td>
-    <td>{{ current.isLocal ? '-' : remote.version }}</td>
-    <td>{{ +remote.score.final.toFixed(2) }}</td>
-    <td>
+    <td class="version">{{ current.version || '-' }}</td>
+    <td class="latest">{{ remote.version }}</td>
+    <td class="size">{{ !remote.distSize ? '-' : formatSize(remote.distSize) }}</td>
+    <td class="score">{{ +remote.score.final.toFixed(2) }}</td>
+    <td class="operation">
       <k-button frameless v-if="hasUpdate || !current.version"
       >{{ current.version ? '更新' : '下载' }}</k-button>
     </td>
@@ -35,21 +40,42 @@ const hasUpdate = computed(() => {
   return !current.value.isLocal && current.value.version && props.remote.version !== current.value.version
 })
 
+function formatSize(size: number) {
+  if (size >= 1024000) {
+    return Math.round(size / 1048576) + ' MB'
+  } else {
+    return Math.round(size / 1024) + ' KB'
+  }
+}
+
 </script>
 
 <style lang="scss">
 
-.package-name {
+.package {
   text-align: left;
+  width: 50%;
 
   a {
     font-weight: bold;
     transition: 0.3s ease;
     color: rgba(244, 244, 245, 0.6);
   }
+
   a:hover {
     color: rgba(244, 244, 245);
   }
+
+  .description {
+    margin-top: 0.15rem;
+    font-size: 0.9rem;
+  }
+}
+
+tr.local {
+  .latest, .size {
+    color: rgba(244, 244, 245, .25);
+  }
 }
 
 </style>
diff --git a/packages/plugin-webui/client/views/dependencies/index.vue b/packages/plugin-webui/client/views/dependencies/index.vue
index f2bc8208c6..13956f9466 100644
--- a/packages/plugin-webui/client/views/dependencies/index.vue
+++ b/packages/plugin-webui/client/views/dependencies/index.vue
@@ -1,12 +1,13 @@
 <template>
-  <k-card class="page-deps" :class="{ authorized: user?.authority >= 4 }" title="依赖管理">
+  <k-card class="page-deps" title="依赖管理">
     <table v-if="manager.packages.length">
       <tr>
         <th>模块名称</th>
         <th>当前版本</th>
         <th>最新版本</th>
+        <th>总体积</th>
         <th>综合评分</th>
-        <th>操作</th>
+        <th class="operation">操作</th>
       </tr>
       <dep-view v-for="remote in manager.packages" :remote="remote"/>
     </table>
@@ -18,6 +19,5 @@
 
 import DepView from '../dependencies/dep-view.vue'
 import { manager } from '../dependencies/manager'
-import { user } from '~/client'
 
 </script>
diff --git a/packages/plugin-webui/client/views/dependencies/manager.ts b/packages/plugin-webui/client/views/dependencies/manager.ts
index d5296fcc5e..8da4f0e2ee 100644
--- a/packages/plugin-webui/client/views/dependencies/manager.ts
+++ b/packages/plugin-webui/client/views/dependencies/manager.ts
@@ -9,6 +9,9 @@ interface PackageBase {
 }
 
 interface PackageJson {
+  dist: {
+    unpackedSize: number
+  }
   dependencies: Record<string, string>
   devDependencies: Record<string, string>
   peerDependencies: Record<string, string>
@@ -17,7 +20,7 @@ interface PackageJson {
 
 export interface PackageMeta extends PackageBase {
   versions: Record<string, PackageJson>
-  'dist-tags': Record<string, string>
+  distSize: number
   score: {
     final: number
     quality: number
@@ -47,11 +50,11 @@ if (KOISHI_CONFIG.devMode || data.timestamp + timeout < timestamp) {
 export const manager = reactive(data)
 
 export async function update() {
-  const res = await fetch('https://api.npms.io/v2/search?q=koishi-plugin&size=250', { mode: 'cors' })
+  const res = await fetch('https://api.npms.io/v2/search?q=koishi-plugin+not:deprecated&size=250', { mode: 'cors' })
   const json = await res.json()
-  data.version = version
-  data.timestamp = Date.now()
-  data.packages = json.results.map((data) => ({
+  manager.version = version
+  manager.timestamp = Date.now()
+  manager.packages = json.results.map((data) => ({
     ...data.package,
     score: {
       final: data.score.final,
@@ -59,18 +62,19 @@ export async function update() {
     },
   })).sort((a, b) => b.score.final - a.score.final)
 
-  await Promise.all(json.results.map(async ({ package: meta }) => {
+  await Promise.all(manager.packages.map(async (meta) => {
     const res = await fetch(KOISHI_CONFIG.endpoint + '/registry/' + meta.name, { mode: 'cors' })
     const json: PackageMeta = await res.json()
     const { dependencies = {}, peerDependencies = {} } = json.versions[meta.version]
     const core = { ...dependencies, ...peerDependencies }['koishi-core']
     if (core && satisfies(registry.value.version, core)) {
+      json.distSize = json.versions[meta.version].dist.unpackedSize
       Object.assign(meta, json)
     } else {
-      const index = data.packages.findIndex(pkg => pkg.name === meta.name)
-      data.packages.splice(index, 1)
+      const index = manager.packages.findIndex(pkg => pkg.name === meta.name)
+      manager.packages.splice(index, 1)
     }
   }))
 
-  storage.set('packages', data)
+  storage.set('packages', manager)
 }