From 3795a1d0dba5e76e40dd92011f5393235d17eb7f Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 10 Feb 2022 19:00:26 +0800
Subject: [PATCH] feat(manager): support market cards

---
 .../frontend/components/client/icons/index.ts |   8 ++
 .../components/client/icons/svg/balance.vue   |   5 +
 .../client/icons/svg/file-archive.vue         |   5 +
 .../components/client/icons/svg/tag.vue       |   5 +
 .../components/client/icons/svg/user.vue      |   5 +
 .../components/client/layout/card.vue         |   5 +-
 plugins/frontend/components/client/style.scss |   7 ++
 .../console/client/components/markdown.vue    |  13 ++-
 plugins/frontend/console/client/index.scss    |   2 -
 .../frontend/console/client/layout/index.vue  |   2 +-
 .../client/{dependencies => deps}/index.vue   |   0
 .../client/{dependencies => deps}/package.vue |   0
 plugins/frontend/manager/client/index.ts      |  20 ++--
 .../frontend/manager/client/market/index.vue  | 104 ++++++++++--------
 .../manager/client/settings/dep-link.vue      |   7 +-
 plugins/frontend/manager/src/market.ts        |   9 +-
 plugins/frontend/manager/src/utils.ts         |  14 +++
 17 files changed, 148 insertions(+), 63 deletions(-)
 create mode 100644 plugins/frontend/components/client/icons/svg/balance.vue
 create mode 100644 plugins/frontend/components/client/icons/svg/file-archive.vue
 create mode 100644 plugins/frontend/components/client/icons/svg/tag.vue
 create mode 100644 plugins/frontend/components/client/icons/svg/user.vue
 rename plugins/frontend/manager/client/{dependencies => deps}/index.vue (100%)
 rename plugins/frontend/manager/client/{dependencies => deps}/package.vue (100%)

diff --git a/plugins/frontend/components/client/icons/index.ts b/plugins/frontend/components/client/icons/index.ts
index 90ca19d0d6..78f1034f6d 100644
--- a/plugins/frontend/components/client/icons/index.ts
+++ b/plugins/frontend/components/client/icons/index.ts
@@ -4,6 +4,7 @@ import ArrowDown from './svg/arrow-down.vue'
 import ArrowLeft from './svg/arrow-left.vue'
 import ArrowRight from './svg/arrow-right.vue'
 import ArrowUp from './svg/arrow-up.vue'
+import Balance from './svg/balance.vue'
 import Book from './svg/book.vue'
 import BoxOpen from './svg/box-open.vue'
 import CheckFull from './svg/check-full.vue'
@@ -21,6 +22,7 @@ import Expand from './svg/expand.vue'
 import External from './svg/external.vue'
 import EyeSlash from './svg/eye-slash.vue'
 import Eye from './svg/eye.vue'
+import FileArchive from './svg/file-archive.vue'
 import Filter from './svg/filter.vue'
 import Flask from './svg/flask.vue'
 import Hdd from './svg/hdd.vue'
@@ -44,10 +46,12 @@ import StarEmpty from './svg/star-empty.vue'
 import StarFull from './svg/star-full.vue'
 import Sun from './svg/sun.vue'
 import Tachometer from './svg/tachometer.vue'
+import Tag from './svg/tag.vue'
 import TimesFull from './svg/times-full.vue'
 import Tools from './svg/tools.vue'
 import Undo from './svg/undo.vue'
 import Users from './svg/users.vue'
+import User from './svg/user.vue'
 
 import './style.scss'
 
@@ -58,6 +62,7 @@ registerIcon('arrow-down', ArrowDown)
 registerIcon('arrow-left', ArrowLeft)
 registerIcon('arrow-right', ArrowRight)
 registerIcon('arrow-up', ArrowUp)
+registerIcon('balance', Balance)
 registerIcon('book', Book)
 registerIcon('box-open', BoxOpen)
 registerIcon('check-full', CheckFull)
@@ -75,6 +80,7 @@ registerIcon('expand', Expand)
 registerIcon('external', External)
 registerIcon('eye-slash', EyeSlash)
 registerIcon('eye', Eye)
+registerIcon('file-archive', FileArchive)
 registerIcon('filter', Filter)
 registerIcon('flask', Flask)
 registerIcon('hdd', Hdd)
@@ -98,10 +104,12 @@ registerIcon('star-empty', StarEmpty)
 registerIcon('star-full', StarFull)
 registerIcon('sun', Sun)
 registerIcon('tachometer', Tachometer)
+registerIcon('tag', Tag)
 registerIcon('times-full', TimesFull)
 registerIcon('tools', Tools)
 registerIcon('undo', Undo)
 registerIcon('users', Users)
+registerIcon('user', User)
 
 export function registerIcon(name: string, component: Component) {
   icons[name] = component
diff --git a/plugins/frontend/components/client/icons/svg/balance.vue b/plugins/frontend/components/client/icons/svg/balance.vue
new file mode 100644
index 0000000000..5562c6bf7e
--- /dev/null
+++ b/plugins/frontend/components/client/icons/svg/balance.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="M256 336h-.02c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0C-2.06 328.75.02 320.33.02 336H0c0 44.18 57.31 80 128 80s128-35.82 128-80zM128 176l72 144H56l72-144zm511.98 160c0-16.18 1.34-8.73-85.05-181.51-17.65-35.29-68.19-35.36-85.87 0-87.12 174.26-85.04 165.84-85.04 181.51H384c0 44.18 57.31 80 128 80s128-35.82 128-80h-.02zM440 320l72-144 72 144H440zm88 128H352V153.25c23.51-10.29 41.16-31.48 46.39-57.25H528c8.84 0 16-7.16 16-16V48c0-8.84-7.16-16-16-16H383.64C369.04 12.68 346.09 0 320 0s-49.04 12.68-63.64 32H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h129.61c5.23 25.76 22.87 46.96 46.39 57.25V448H112c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h416c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/frontend/components/client/icons/svg/file-archive.vue b/plugins/frontend/components/client/icons/svg/file-archive.vue
new file mode 100644
index 0000000000..485ab43e29
--- /dev/null
+++ b/plugins/frontend/components/client/icons/svg/file-archive.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path fill="currentColor" d="M377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zM128.4 336c-17.9 0-32.4 12.1-32.4 27 0 15 14.6 27 32.5 27s32.4-12.1 32.4-27-14.6-27-32.5-27zM224 136V0h-63.6v32h-32V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zM95.9 32h32v32h-32zm32.3 384c-33.2 0-58-30.4-51.4-62.9L96.4 256v-32h32v-32h-32v-32h32v-32h-32V96h32V64h32v32h-32v32h32v32h-32v32h32v32h-32v32h22.1c5.7 0 10.7 4.1 11.8 9.7l17.3 87.7c6.4 32.4-18.4 62.6-51.4 62.6z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/frontend/components/client/icons/svg/tag.vue b/plugins/frontend/components/client/icons/svg/tag.vue
new file mode 100644
index 0000000000..17812f96e0
--- /dev/null
+++ b/plugins/frontend/components/client/icons/svg/tag.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M0 252.118V48C0 21.49 21.49 0 48 0h204.118a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.745 18.745-49.137 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118zM112 64c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/frontend/components/client/icons/svg/user.vue b/plugins/frontend/components/client/icons/svg/user.vue
new file mode 100644
index 0000000000..1cd8b598ea
--- /dev/null
+++ b/plugins/frontend/components/client/icons/svg/user.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/>
+  </svg>
+</template>
\ No newline at end of file
diff --git a/plugins/frontend/components/client/layout/card.vue b/plugins/frontend/components/client/layout/card.vue
index d121632b9f..bde255a71a 100644
--- a/plugins/frontend/components/client/layout/card.vue
+++ b/plugins/frontend/components/client/layout/card.vue
@@ -32,10 +32,12 @@ $paddingY: 1.5rem;
   border-radius: 8px;
   overflow: hidden;
   background-color: var(--card-bg);
+  border: 1px solid var(--card-border);
   box-shadow: var(--card-shadow);
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
 
   header {
+    position: relative;
     font-size: 1.25rem;
     font-weight: bolder;
     margin: $paddingX 0;
@@ -44,6 +46,7 @@ $paddingY: 1.5rem;
   }
 
   footer {
+    position: relative;
     margin: $paddingX 0;
     padding: 0 $paddingY;
   }
diff --git a/plugins/frontend/components/client/style.scss b/plugins/frontend/components/client/style.scss
index 5d08b51b44..1b1ef236d6 100644
--- a/plugins/frontend/components/client/style.scss
+++ b/plugins/frontend/components/client/style.scss
@@ -9,6 +9,8 @@ $white: #ffffff;
   --border-dark: #c8c9cc;
   --card-bg: #ffffff;
   --page-bg: #f2f3f5;
+  --card-border: var(--card-bg);
+  --card-shadow: 0 6px 10px -4px rgb(0 0 0 / 15%);
   --loading-mask-bg: #f2f3f5bf;
 
   @mixin apply-color($name, $base) {
@@ -30,6 +32,7 @@ html.dark {
   --border: #4f515cbf;
   --card-bg: #2f3034;
   --page-bg: #202225;
+  --card-border: var(--border);
   --loading-mask-bg: #202225bf;
 
   @mixin apply-color($name, $base) {
@@ -64,6 +67,10 @@ html.dark {
   --el-input-bg-color: transparent;
 }
 
+.el-input__prefix-inner, .el-input__suffix-inner {
+  align-items: center;
+}
+
 .el-loading-mask {
   background-color: var(--loading-mask-bg);
   transition: 0.3s ease;
diff --git a/plugins/frontend/console/client/components/markdown.vue b/plugins/frontend/console/client/components/markdown.vue
index d73dde081c..88e111fd51 100644
--- a/plugins/frontend/console/client/components/markdown.vue
+++ b/plugins/frontend/console/client/components/markdown.vue
@@ -1,19 +1,28 @@
 <template>
-  <component :is="tag" class="k-markdown" v-html="marked(source)"></component>
+  <component :is="tag" class="k-markdown" v-html="render()"></component>
 </template>
 
 <script lang="ts" setup>
 
 import { marked } from 'marked'
 
-defineProps({
+const props = defineProps({
   source: String,
+  inline: Boolean,
   tag: {
     type: String,
     default: 'div'
   },
 })
 
+function render() {
+  if (props.inline) {
+    return marked.parseInline(props.source)
+  } else {
+    return marked(props.source)
+  }
+}
+
 </script>
 
 <style lang="scss">
diff --git a/plugins/frontend/console/client/index.scss b/plugins/frontend/console/client/index.scss
index d77273b0de..f618d9a568 100644
--- a/plugins/frontend/console/client/index.scss
+++ b/plugins/frontend/console/client/index.scss
@@ -18,8 +18,6 @@ $white: #ffffff;
 
   --hover-inset: 0 0 2px inset #0002;
 
-  --card-shadow: 0 6px 10px -4px rgb(0 0 0 / 15%);
-
   --menu-fg: var(--fg1);
   --hover-bg: var(--bg2);
 
diff --git a/plugins/frontend/console/client/layout/index.vue b/plugins/frontend/console/client/layout/index.vue
index 653463b274..ed436a3c43 100644
--- a/plugins/frontend/console/client/layout/index.vue
+++ b/plugins/frontend/console/client/layout/index.vue
@@ -53,7 +53,7 @@ body {
 }
 
 a {
-  color: var(--primary);
+  color: var(--active);
   text-decoration: none;
   transition: color 0.3s ease;
 }
diff --git a/plugins/frontend/manager/client/dependencies/index.vue b/plugins/frontend/manager/client/deps/index.vue
similarity index 100%
rename from plugins/frontend/manager/client/dependencies/index.vue
rename to plugins/frontend/manager/client/deps/index.vue
diff --git a/plugins/frontend/manager/client/dependencies/package.vue b/plugins/frontend/manager/client/deps/package.vue
similarity index 100%
rename from plugins/frontend/manager/client/dependencies/package.vue
rename to plugins/frontend/manager/client/deps/package.vue
diff --git a/plugins/frontend/manager/client/index.ts b/plugins/frontend/manager/client/index.ts
index 3336bae755..f5b0dfcd53 100644
--- a/plugins/frontend/manager/client/index.ts
+++ b/plugins/frontend/manager/client/index.ts
@@ -2,7 +2,7 @@ import { Card, Context } from '~/client'
 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 Dependencies from './deps/index.vue'
 import Market from './market/index.vue'
 import { overrideCount } from './utils'
 
@@ -39,21 +39,21 @@ export default (ctx: Context) => {
   })
 
   ctx.addPage({
-    path: '/dependencies',
-    name: '依赖管理',
-    icon: 'box-open',
+    path: '/market',
+    name: '插件市场',
+    icon: 'puzzle-piece',
     order: 620,
     fields: ['market', 'packages'],
-    component: Dependencies,
-    badge: () => overrideCount.value,
+    component: Market,
   })
 
   ctx.addPage({
-    path: '/market',
-    name: '插件市场',
-    icon: 'puzzle-piece',
+    path: '/dependencies',
+    name: '依赖管理',
+    icon: 'box-open',
     order: 610,
     fields: ['market', 'packages'],
-    component: Market,
+    component: Dependencies,
+    badge: () => overrideCount.value,
   })
 }
diff --git a/plugins/frontend/manager/client/market/index.vue b/plugins/frontend/manager/client/market/index.vue
index c4ed739afe..2fbdc33404 100644
--- a/plugins/frontend/manager/client/market/index.vue
+++ b/plugins/frontend/manager/client/market/index.vue
@@ -1,37 +1,35 @@
 <template>
-  <k-card-aside class="page-market">
-    <template #aside>
-      <div class="search">
-        <k-input v-model="keyword" #suffix>
-          <k-icon name="search"></k-icon>
-        </k-input>
-      </div>
-      <el-scrollbar>
-        <div class="content">
-          <div
-            v-for="data in packages" :key="data.name"
-            :class="['k-menu-item', { active: data.name === current }]"
-            @click="current = data.name">
-            {{ data.shortname }}
-            <k-icon v-if="data.official" name="check-full"></k-icon>
-          </div>
+  <div class="market-search">
+    <el-input v-model="keyword" #suffix>
+      <k-icon name="search"></k-icon>
+    </el-input>
+  </div>
+  <div class="market-container">
+    <k-card class="market-view" v-for="data in packages" :key="data.name">
+      <template #header>
+        {{ data.shortname }}<k-icon v-if="data.official" name="check-full"></k-icon>
+        <k-button v-if="!config.override[data.name]" solid class="right" @click="addFavorite(data.name)">添加</k-button>
+        <k-button v-else solid type="warning" class="right" @click="removeFavorite(data.name)">取消</k-button>
+      </template>
+      <k-markdown inline tag="p" class="desc" :source="data.description"></k-markdown>
+      <template #footer>
+        <div class="info">
+          <span><k-icon name="user"></k-icon>{{ data.author }}</span>
+          <span><k-icon name="balance"></k-icon>{{ data.license }}</span>
+          <span><k-icon name="tag"></k-icon>{{ data.version }}</span>
+          <span><k-icon name="file-archive"></k-icon>{{ Math.ceil(data.size / 1000) }} KB</span>
         </div>
-      </el-scrollbar>
-    </template>
-    <k-content v-if="current">
-      <k-button solid @click="addFavorite(current)">添加插件</k-button>
-      <k-markdown :source="store.market[current].readme"></k-markdown>
-    </k-content>
-  </k-card-aside>
+      </template>
+    </k-card>
+  </div>
 </template>
 
 <script setup lang="ts">
 
 import { store } from '~/client'
 import { ref, computed } from 'vue'
-import { addFavorite } from '../utils'
+import { addFavorite, removeFavorite, config } from '../utils'
 
-const current = ref<string>(null)
 const keyword = ref('')
 
 const packages = computed(() => {
@@ -46,38 +44,56 @@ const packages = computed(() => {
 
 <style lang="scss">
 
-.page-market {
-  height: calc(100vh - 4rem);
+.market-search {
+  margin: 2rem;
+}
+
+.market-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 2rem;
+  margin: 2rem;
+  justify-items: center;
+}
+
+.market-view {
+  width: 100%;
+  height: 200px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
 
   .k-card-body {
+    margin: 0;
     height: 100%;
-    display: flex;
-    flex-direction: column;
   }
 
-  aside {
-    display: flex;
-    flex-direction: column;
+  .desc {
+    margin: -0.5rem 0;
   }
 
-  .search {
-    padding: 1rem 2rem;
+  header, footer {
+    flex-shrink: 0;
   }
 
-  .content {
-    padding: 0 0 1rem;
-    line-height: 2.25rem;
+  .right {
+    position: absolute;
+    right: 1rem;
+    top: -4px;
   }
 
-  .k-menu-item {
-    padding: 0 2rem;
-    white-space: nowrap;
-    overflow: auto;
-    text-overflow: ellipsis;
+  .info {
+    font-size: 14px;
+    color: var(--el-text-color-regular);
 
     .k-icon {
-      color: var(--success);
-      vertical-align: -2px;
+      height: 12px;
+      margin-right: 8px;
+      vertical-align: -1px;
+    }
+
+    span + span {
+      margin-left: 1.5rem;
     }
   }
 }
diff --git a/plugins/frontend/manager/client/settings/dep-link.vue b/plugins/frontend/manager/client/settings/dep-link.vue
index fd945459cd..e62405f513 100644
--- a/plugins/frontend/manager/client/settings/dep-link.vue
+++ b/plugins/frontend/manager/client/settings/dep-link.vue
@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 
 import { useRouter } from 'vue-router'
+import { store } from '~/client'
 import { addFavorite } from '../utils'
 
 defineProps<{
@@ -17,7 +18,11 @@ const router = useRouter()
 
 function configurate(name: string) {
   addFavorite(name)
-  router.push('/market')
+  if (store.packages[name]) {
+    router.push('/settings/' + name)
+  } else {
+    router.push('/market?keyword=' + name)
+  }
 }
 
 </script>
diff --git a/plugins/frontend/manager/src/market.ts b/plugins/frontend/manager/src/market.ts
index 656249de1f..2fcd6f7bff 100644
--- a/plugins/frontend/manager/src/market.ts
+++ b/plugins/frontend/manager/src/market.ts
@@ -57,6 +57,7 @@ class MarketProvider extends DataService<Dict<MarketProvider.Data>> {
     if (!versions.length) return
 
     const shortname = official ? name.slice(17) : name.slice(14)
+    const latest = registry.versions[versions[0].version]
     this.tempCache[name] = this.fullCache[name] = {
       ...item,
       shortname,
@@ -64,7 +65,9 @@ class MarketProvider extends DataService<Dict<MarketProvider.Data>> {
       score: score.detail.popularity * 100,
       description,
       versions,
-      readme: registry.readme,
+      author: latest.author.name,
+      size: latest.dist.unpackedSize,
+      license: latest.license,
     }
     this.flushData()
   }
@@ -96,7 +99,9 @@ namespace MarketProvider {
     shortname: string
     official: boolean
     score: number
-    readme: string
+    author: string
+    size: number
+    license: string
   }
 }
 
diff --git a/plugins/frontend/manager/src/utils.ts b/plugins/frontend/manager/src/utils.ts
index 80ac51bb08..a5e884b8de 100644
--- a/plugins/frontend/manager/src/utils.ts
+++ b/plugins/frontend/manager/src/utils.ts
@@ -41,11 +41,25 @@ export namespace Package {
     private?: boolean
   }
 
+  export interface User {
+    name: string
+    email: string
+  }
+
   export interface Remote extends Json {
     deprecated?: string
+    author: User
+    maintainers: User[]
+    license: string
     dist: {
+      shasum: string
+      integrity: string
+      tarball: string
+      fileCount: number
       unpackedSize: number
+      'npm-signature': string
     }
+    _npmUser: User
   }
 
   export interface Registry extends Base {