feat(webui): server side downloader

packages/plugin-webui/client/index.ts

@@ -5,7 +5,7 @@
 import { ref, watch, reactive, Ref, Component } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import type { User } from 'koishi-core'
-import type { Registry, Profile, Meta, Statistics } from '~/server'
+import type { Registry, Profile, Meta, Statistics, Awesome } from '~/server'
 import * as client from '~/client'
 
 export const views: Component[] = []
@@ -74,7 +74,8 @@ export const user = storage.create<User>('user')
 export const config = storage.create<Config>('config', { authType: 0 }, true)
 export const meta = ref<Meta.Payload>(null)
 export const profile = ref<Profile.Payload>(null)
-export const registry = ref<Registry.Payload>(null)
+export const awesome = ref<Awesome.PackageData[]>(null)
+export const registry = ref<Registry.PluginData[]>(null)
 export const stats = ref<Statistics.Payload>(null)
 export const socket = ref<WebSocket>(null)
 

packages/plugin-webui/client/main.ts

@@ -43,10 +43,10 @@ router.addRoute({
 })
 
 router.addRoute({
-  path: '/dependencies',
+  path: '/awesome',
   name: '依赖',
-  meta: { icon: 'puzzle-piece', authority: 4, require: ['registry'] },
-  component: () => import('./views/dependencies/index.vue'),
+  meta: { icon: 'puzzle-piece', authority: 4, require: ['awesome'] },
+  component: () => import('./views/awesome/index.vue'),
 })
 
 router.addRoute({
@@ -91,6 +91,7 @@ router.afterEach((route) => {
 })
 
 receive('meta', data => client.meta.value = data)
+receive('awesome', data => client.awesome.value = data)
 receive('profile', data => client.profile.value = data)
 receive('registry', data => client.registry.value = data)
 receive('stats', data => client.stats.value = data)

packages/plugin-webui/client/views/awesome/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <k-card class="page-awesome" title="依赖管理">
+    <table>
+      <tr>
+        <th>模块名称</th>
+        <th>当前版本</th>
+        <th>最新版本</th>
+        <th>总体积</th>
+        <th>综合评分</th>
+        <th class="operation">操作</th>
+      </tr>
+      <package-view v-for="data in awesome" :data="data"/>
+    </table>
+  </k-card>
+</template>
+
+<script setup lang="ts">
+
+import PackageView from './package.vue'
+import { awesome } from '~/client'
+
+</script>

packages/plugin-webui/client/views/awesome/package.vue

@@ -0,0 +1,106 @@
+<template>
+  <tr :class="{ workspace: data.local?.isWorkspace }">
+    <td class="package" :class="data.local ? data.local.isInstalled ? 'active' : 'local' : 'remote'">
+      <div>
+        <a
+          :href="'http://npmjs.com/package/' + data.name"
+          target="blank" rel="noopener noreferrer"
+        >{{ data.name.replace('koishi-plugin-', '') }}</a>
+        <k-badge type="success" v-if="data.official">官方</k-badge>
+        <k-badge type="warning" v-if="hasUpdate">可更新</k-badge>
+      </div>
+      <div class="description">
+        {{ data.description }}
+      </div>
+    </td>
+    <td class="version">{{ data.local ? data.local.version : '-' }}</td>
+    <td class="latest">{{ data.version }}</td>
+    <td class="size">{{ formatSize(data.size) }}</td>
+    <td class="score">{{ +data.score.final.toFixed(2) }}</td>
+    <td class="operation">
+      <k-button frameless v-if="hasUpdate || !data.local"
+      >{{ data.local ? '更新' : '下载' }}</k-button>
+    </td>
+  </tr>
+</template>
+
+<script lang="ts" setup>
+
+import type { Awesome } from '~/server'
+import { defineProps, computed } from 'vue'
+
+const props = defineProps<{ data: Awesome.PackageData }>()
+
+const hasUpdate = computed(() => {
+  const { local, version } = props.data
+  return local && !local.isWorkspace && local.version !== 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">
+
+@import '~/variables';
+
+.package {
+  text-align: left;
+  padding-left: 3rem;
+  position: relative;
+
+  a {
+    font-weight: bold;
+    transition: 0.3s ease;
+    color: rgba(244, 244, 245, 0.75);
+  }
+
+  a:hover {
+    color: rgba(244, 244, 245);
+  }
+
+  .description {
+    margin-top: 0.15rem;
+    font-size: 0.9rem;
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    border-radius: 100%;
+    width: 0.5rem;
+    height: 0.5rem;
+    top: 50%;
+    left: 1.25rem;
+    transform: translateY(-50%);
+    box-shadow: 1px 1px 2px #3333;
+  }
+
+  &.active::before {
+    background: $success;
+  }
+  &.local::before {
+    background: $warning;
+  }
+  &.remote::before {
+    background: #eeeeee5f;
+  }
+}
+
+.page-awesome td:not(.package) {
+  min-width: 4rem;
+}
+
+tr.workspace {
+  .latest, .size {
+    color: rgba(244, 244, 245, .25);
+  }
+}
+
+</style>

packages/plugin-webui/client/views/plugins/index.vue

@@ -6,14 +6,14 @@
       <span class="operation">操作</span>
     </div>
     <div class="plugin-list root">
-      <plugin-view :data="data" v-for="(data) in registry.plugins"/>
+      <plugin-view :data="data" v-for="data in registry"/>
     </div>
   </k-card>
 </template>
 
 <script setup lang="ts">
 
-import PluginView from './plugin-view.vue'
+import PluginView from './plugin.vue'
 import { registry, user } from '~/client'
 
 </script>

packages/plugin-webui/client/views/plugins/plugin-view.vue → packages/plugin-webui/client/views/plugins/plugin.vue

@@ -22,12 +22,12 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 
 import type { Registry } from '~/server'
 import { send, user } from '~/client'
 import { ref, defineProps } from 'vue'
-import PluginView from './plugin-view.vue'
+import PluginView from './plugin.vue'
 
 const show = ref(false)
 

packages/plugin-webui/src/mongo.ts → packages/plugin-webui/src/database/mongo.ts

@@ -1,6 +1,6 @@
 import { Database, Logger, Time } from 'koishi-core'
+import { RECENT_LENGTH, StatRecord, Synchronizer } from '../payload/stats'
 import type MongoDatabase from 'koishi-plugin-mongo'
-import { RECENT_LENGTH, StatRecord, Synchronizer } from './stats'
 
 const logger = new Logger('status')