feat(manager): add deps page

plugins/frontend/console/client/components/form/button.vue

@@ -65,13 +65,12 @@ function onClick(event: MouseEvent) {
     cursor: default;
   }
   // default: transparent & framed
-  color: var(--default);
+  color: var(--fg2);
   border: 1px solid var(--border);
-  background-color: transparent;
+  background-color: var(--bg0);
   &.disabled {
     color: var(--disabled);
     border-color: var(--border);
-    background-color: transparent;
   }
   &:hover:not(.disabled) {
     color: var(--fg1);
@@ -82,18 +81,15 @@ function onClick(event: MouseEvent) {
   &.solid {
     color: #ffffff !important;
     border-color: transparent !important;
-  }
-
-  &.solid.disabled {
-    background-color: var(--disabled) !important;
-  }
-
-  &.solid:not(.disabled) {
-
-    @include apply-color(default);
-    @include apply-color(warning);
-    @include apply-color(success);
-    @include apply-color(error);
+    &.disabled {
+      background-color: var(--disabled) !important;
+    }
+    &:not(.disabled) {
+      @include apply-color(default);
+      @include apply-color(warning);
+      @include apply-color(success);
+      @include apply-color(error);
+    }
   }
 
   // frameless
@@ -116,7 +112,15 @@ function onClick(event: MouseEvent) {
     }
   }
 
-  & + & {
+  .k-group > &:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .k-group > &:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  *:not(.k-group) > & + & {
     margin: 0 1rem;
   }
 }

plugins/frontend/console/client/index.scss

@@ -103,3 +103,7 @@ html.dark {
     color: var(--primary);
   }
 }
+
+.k-group {
+  display: inline-block;
+}

plugins/frontend/console/client/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <sidebar v-if="!sidebarHidden"/>
-  <main class="layout-main" :class="{ 'sidebar-hidden': sidebarHidden }">
+  <main :class="mainClasses">
     <router-view v-if="loaded" #="{ Component }">
       <keep-alive>
         <component :is="Component"/>
@@ -25,6 +25,13 @@ const loaded = computed(() => {
   return route.meta.fields.every((key) => store[key])
 })
 
+const mainClasses = computed(() => {
+  const result = ['layout-main']
+  result.push('route-' + route.path.slice(1).split('/', 1)[0])
+  if (sidebarHidden.value) result.push('sidebar-hidden')
+  return result
+})
+
 const sidebarHidden = computed(() => {
   return route.meta.position === 'hidden'
 })

plugins/frontend/icons/src/index.ts

@@ -4,6 +4,7 @@ import ArrowLeft from './svg/arrow-left.vue'
 import ArrowRight from './svg/arrow-right.vue'
 import ArrowUp from './svg/arrow-up.vue'
 import Book from './svg/book.vue'
+import BoxOpen from './svg/box-open.vue'
 import CheckFull from './svg/check-full.vue'
 import ChevronDown from './svg/chevron-down.vue'
 import ChevronLeft from './svg/chevron-left.vue'
@@ -55,6 +56,7 @@ register('arrow-left', ArrowLeft)
 register('arrow-right', ArrowRight)
 register('arrow-up', ArrowUp)
 register('book', Book)
+register('box-open', BoxOpen)
 register('check-full', CheckFull)
 register('chevron-down', ChevronDown)
 register('chevron-left', ChevronLeft)

plugins/frontend/icons/src/svg/box-open.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path fill="currentColor" d="M425.7 256c-16.9 0-32.8-9-41.4-23.4L320 126l-64.2 106.6c-8.7 14.5-24.6 23.5-41.5 23.5-4.5 0-9-.6-13.3-1.9L64 215v178c0 14.7 10 27.5 24.2 31l216.2 54.1c10.2 2.5 20.9 2.5 31 0L551.8 424c14.2-3.6 24.2-16.4 24.2-31V215l-137 39.1c-4.3 1.3-8.8 1.9-13.3 1.9zm212.6-112.2L586.8 41c-3.1-6.2-9.8-9.8-16.7-8.9L320 64l91.7 152.1c3.8 6.3 11.4 9.3 18.5 7.3l197.9-56.5c9.9-2.9 14.7-13.9 10.2-23.1zM53.2 41L1.7 143.8c-4.6 9.2.3 20.2 10.1 23l197.9 56.5c7.1 2 14.7-1 18.5-7.3L320 64 69.8 32.1c-6.9-.8-13.5 2.7-16.6 8.9z"/>
+  </svg>
+</template>

plugins/frontend/manager/client/bots/index.vue

@@ -42,8 +42,11 @@ section.page-bots {
       text-align: center;
       padding: 1rem 0;
       font-weight: bold;
+    }
+
+    .k-menu-item {
+      transition: 0.3s ease;
       border-bottom: 1px solid var(--border);
-      transition: border-color 0.3s ease;
     }
   }
 }

plugins/frontend/manager/client/dependencies/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <nav>
+    <k-button solid>下载全部</k-button>
+  </nav>
+  <k-card class="frameless">
+    <table class="table-header">
+      <colgroup>
+        <col width="auto">
+        <col width="160px">
+        <col width="200px">
+      </colgroup>
+      <thead>
+        <tr>
+          <th>插件名称</th>
+          <th>当前版本</th>
+          <th>目标版本</th>
+        </tr>
+      </thead>
+    </table>
+    <el-scrollbar>
+      <table class="table-body">
+        <colgroup>
+          <col width="auto">
+          <col width="160px">
+          <col width="200px">
+        </colgroup>
+        <tbody>
+          <template v-for="name in names" :key="name">
+            <tr>
+              <td>{{ name }}</td>
+              <td>{{ store.packages[name]?.version || '-' }}</td>
+              <td>
+                <el-select v-model="config.override[name]">
+                  <el-option
+                    v-for="({ version }, index) in store.market[name].versions"
+                    :key="version" :label="version + (index ? '' : ' (最新)')" :value="version"
+                  ></el-option>
+                </el-select>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </el-scrollbar>
+  </k-card>
+</template>
+
+<script lang="ts" setup>
+
+import { computed } from 'vue'
+import { store } from '~/client'
+import { config } from '../utils'
+
+const names = computed(() => {
+  const data = Object.values(store.packages).filter(item => !item.workspace && store.market[item.name]).map(item => item.name)
+  for (const key in config.override) {
+    if (!data.includes(key) && store.market[key]) data.push(key)
+  }
+  return data.sort((a, b) => a > b ? 1 : -1)
+})
+
+</script>
+
+<style lang="scss">
+
+.route-versions nav {
+  margin-top: 2rem;
+  padding: 0 2rem;
+
+  .right {
+    float: right;
+  }
+}
+
+.route-versions .k-card {
+  position: absolute;
+  bottom: 0;
+  height: calc(100vh - 8rem);
+  left: var(--aside-width);
+  right: 0;
+
+  .k-card-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  table {
+    tr:first-child {
+      border-top: none;
+    }
+  }
+
+  tbody {
+    tr {
+      transition: 0.3s ease;
+    }
+
+    tr:hover {
+      background-color: var(--bg1);
+    }
+  }
+}
+
+</style>

plugins/frontend/manager/client/index.ts

@@ -1,7 +1,8 @@
 import { Card, Context } from '~/client'
-import type {} from '@koishijs/plugin-manager/src'
+import type {} from '@koishijs/plugin-manager'
 import Bots from './bots/index.vue'
 import Settings from './settings/index.vue'
+import Dependencies from './dependencies/index.vue'
 import Market from './market/index.vue'
 
 import './style.scss'
@@ -14,15 +15,15 @@ export default (ctx: Context) => {
       title: '当前消息频率',
       icon: 'paper-plane',
       fields: ['bots'],
-      content: ({ bots }) => bots.reduce((sum, bot) => sum + bot.messageSent, 0) + ' / min',
+      content: ({ bots }) => Object.values(bots).reduce((sum, bot) => sum + bot.messageSent, 0) + ' / min',
     }),
   })
 
   ctx.addPage({
     path: '/bots',
     name: '机器人',
     icon: 'robot',
-    order: 630,
+    order: 640,
     fields: ['bots', 'protocols'],
     component: Bots,
   })
@@ -31,11 +32,20 @@ export default (ctx: Context) => {
     path: '/settings',
     name: '插件配置',
     icon: 'cog',
-    order: 620,
+    order: 630,
     fields: ['packages', 'services'],
     component: Settings,
   })
 
+  ctx.addPage({
+    path: '/dependencies',
+    name: '依赖管理',
+    icon: 'box-open',
+    order: 620,
+    fields: ['market', 'packages'],
+    component: Dependencies,
+  })
+
   ctx.addPage({
     path: '/market',
     name: '插件市场',