feat(webui): add dep management page

packages/plugin-webui/client/index.ts

@@ -63,7 +63,6 @@ export namespace storage {
 
 interface Config {
   authType: 0 | 1
-  pluginTab: 0 | 1
   username?: string
   password?: string
   platform?: string
@@ -72,7 +71,7 @@ interface Config {
 }
 
 export const user = storage.create<User>('user')
-export const config = storage.create<Config>('config', { authType: 0, pluginTab: 0 }, true)
+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)

packages/plugin-webui/client/main.ts

@@ -39,7 +39,14 @@ router.addRoute({
   path: '/plugins',
   name: '插件',
   meta: { icon: 'plug', require: ['registry'] },
-  component: () => import('./views/plugins/plugins.vue'),
+  component: () => import('./views/plugins/index.vue'),
+})
+
+router.addRoute({
+  path: '/dependencies',
+  name: '依赖',
+  meta: { icon: 'puzzle-piece', require: ['registry'] },
+  component: () => import('./views/dependencies/index.vue'),
 })
 
 router.addRoute({

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

@@ -7,12 +7,15 @@
         :title="remote.description"
       >{{ remote.name }}</a>
       <k-badge type="success" v-if="current.isOfficial">官方</k-badge>
-      <k-badge type="default" v-if="current.isLocal">本地</k-badge>
-      <k-badge type="warning" v-else-if="current.version && remote.version !== current.version">可更新</k-badge>
+      <k-badge type="warning" v-if="hasUpdate">可更新</k-badge>
     </td>
     <td>{{ current.version || '-' }}</td>
     <td>{{ current.isLocal ? '-' : remote.version }}</td>
     <td>{{ +remote.score.final.toFixed(2) }}</td>
+    <td>
+      <k-button frameless v-if="hasUpdate || !current.version"
+      >{{ current.version ? '更新' : '下载' }}</k-button>
+    </td>
   </tr>
 </template>
 
@@ -28,4 +31,25 @@ const current = computed(() => {
   return registry.value.packages[props.remote.name] || {}
 })
 
+const hasUpdate = computed(() => {
+  return !current.value.isLocal && current.value.version && props.remote.version !== current.value.version
+})
+
 </script>
+
+<style lang="scss">
+
+.package-name {
+  text-align: left;
+
+  a {
+    font-weight: bold;
+    transition: 0.3s ease;
+    color: rgba(244, 244, 245, 0.6);
+  }
+  a:hover {
+    color: rgba(244, 244, 245);
+  }
+}
+
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <k-card class="page-deps" :class="{ authorized: user?.authority >= 4 }" title="依赖管理">
+    <table v-if="manager.packages.length">
+      <tr>
+        <th>模块名称</th>
+        <th>当前版本</th>
+        <th>最新版本</th>
+        <th>综合评分</th>
+        <th>操作</th>
+      </tr>
+      <dep-view v-for="remote in manager.packages" :remote="remote"/>
+    </table>
+    <p v-else>正在加载……</p>
+  </k-card>
+</template>
+
+<script setup lang="ts">
+
+import DepView from '../dependencies/dep-view.vue'
+import { manager } from '../dependencies/manager'
+import { user } from '~/client'
+
+</script>

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

@@ -0,0 +1,59 @@
+<template>
+  <k-card class="page-plugins" :class="{ authorized: user?.authority >= 4 }" title="插件列表">
+    <div class="table-header plugin-item">
+      <span class="title">插件名</span>
+      <span class="complexity">复杂度</span>
+      <span class="operation">操作</span>
+    </div>
+    <div class="plugin-list root">
+      <plugin-view :data="data" v-for="(data) in registry.plugins"/>
+    </div>
+  </k-card>
+</template>
+
+<script setup lang="ts">
+
+import PluginView from './plugin-view.vue'
+import { registry, user } from '~/client'
+
+</script>
+
+<style lang="scss">
+
+@import '~/variables';
+
+.page-plugins {
+  header {
+    color: rgba(244, 244, 245, .6);
+
+    span {
+      transition: 0.3s ease;
+    }
+
+    span.inactive:hover {
+      cursor: pointer;
+      color: rgba(244, 244, 245, .8);
+    }
+
+    span:not(.inactive) {
+      color: rgba(244, 244, 245);
+    }
+  }
+}
+
+.table-header {
+  font-weight: bold;
+  border-top: $borderColor 1px solid;
+
+  .title {
+    margin-left: 3rem;
+  }
+}
+
+.page-plugins:not(.authorized) {
+  .complexity, .operation {
+    display: none;
+  }
+}
+
+</style>