feat(market): add security warning

koishijs · Jan 12, 2023 · f7d3cf4 · f7d3cf4
1 parent 36e7dde
commit f7d3cf4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 12 deletions.
diff --git a/packages/market/client/deps/install.vue b/packages/market/client/deps/install.vue
@@ -13,8 +13,9 @@
       </el-select>
     </template>
 
-    <div class="padding" v-if="!active || workspace || !Object.keys(data[version].peers).length"></div>
-    <el-scrollbar v-else>
+    <p class="warning" v-if="warning">{{ warning }}</p>
+
+    <el-scrollbar v-if="active && !workspace && Object.keys(data[version].peers).length">
       <table>
         <tr>
           <td>依赖名称</td>
@@ -104,9 +105,7 @@ const selectVersion = computed({
 })
 
 const unchanged = computed(() => version.value === store.dependencies[active.value]?.request)
-
 const current = computed(() => store.dependencies[active.value]?.resolved)
-
 const local = computed(() => store.packages?.[active.value])
 
 const workspace = computed(() => {
@@ -120,6 +119,12 @@ const data = computed(() => {
   return analyzeVersions(active.value)
 })
 
+const warning = computed(() => {
+  if (store.market?.data[active.value].insecure) {
+    return '警告：从此插件的最新版本中检测出含有兼容性较差的依赖。安装或升级此插件可能导致后续升级时出现严重问题。'
+  }
+})
+
 watch(() => active.value, (value) => {
   showDialog.value = !!value
   if (!value) return
@@ -168,6 +173,7 @@ function configure(path: string | true) {
     gap: 0 0.5em;
     align-items: center;
     padding-right: 36px;
+    padding-bottom: 4px;
 
     .el-dialog__title {
       font-weight: 500;
@@ -183,8 +189,8 @@ function configure(path: string | true) {
     }
   }
 
-  .padding {
-    height: 2rem;
+  .warning {
+    color: var(--danger);
   }
 
   .version-badges {

diff --git a/packages/market/client/deps/utils.ts b/packages/market/client/deps/utils.ts
@@ -18,7 +18,7 @@ export function analyzeVersions(name: string) {
         result = 'danger'
         break
       }
-      if (result === 'warning') {
+      if (peer.result === 'warning') {
         result = 'warning'
       }
     }

diff --git a/packages/market/client/icons/index.ts b/packages/market/client/icons/index.ts
@@ -14,6 +14,7 @@ import CategoryTool from './category/tool.vue'
 
 import Balance from './market/balance.vue'
 import Download from './market/download.vue'
+import Insecure from './market/insecure.vue'
 import Refresh from './market/refresh.vue'
 import StarEmpty from './market/star-empty.vue'
 import StarFull from './market/star-full.vue'
@@ -42,6 +43,7 @@ icons.register('category:tool', CategoryTool)
 
 icons.register('balance', Balance)
 icons.register('download', Download)
+icons.register('insecure', Insecure)
 icons.register('refresh', Refresh)
 icons.register('star-empty', StarEmpty)
 icons.register('star-full', StarFull)

diff --git a/packages/market/client/icons/market/insecure.vue b/packages/market/client/icons/market/insecure.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="M466.5 83.69l-192-80.01C269.6 1.656 261.3 0 256.1 0C250.8 0 242.5 1.656 237.6 3.688l-192 80.01C27.69 91.08 16 108.6 16 127.1C16 385.2 205.2 512 255.1 512C307.1 512 496 383.8 496 127.1C496 108.6 484.3 91.08 466.5 83.69zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v112C280 277.3 269.3 288 256 288S232 277.3 232 264V152zM256 384c-17.67 0-32-14.33-32-32s14.33-32 32-32s32 14.33 32 32S273.7 384 256 384z"/>
+  </svg>
+</template>
diff --git a/packages/market/client/market/package.vue b/packages/market/client/market/package.vue
@@ -8,10 +8,15 @@
         <h2>
           <a :href="data.links.homepage" target="_blank" rel="noopener noreferrer">{{ data.shortname }}</a>
           <el-tooltip v-if="data.verified" content="官方认证" placement="right">
-            <span class="verified">
+            <span class="icon verified">
               <k-icon name="verified"></k-icon>
             </span>
           </el-tooltip>
+          <el-tooltip v-else-if="data.insecure" content="含有不安全的依赖" placement="right">
+            <span class="icon insecure">
+              <k-icon name="insecure"></k-icon>
+            </span>
+          </el-tooltip>
         </h2>
         <el-tooltip :content="rating.toFixed(1)" placement="right">
           <div class="rating">
@@ -166,7 +171,7 @@ function formatSize(value: number) {
         line-height: 1.5rem;
       }
 
-      .verified {
+      .icon {
         margin-left: 0.6rem;
         height: 1.125rem;
         width: 1.125rem;
@@ -175,7 +180,6 @@ function formatSize(value: number) {
         display: inline-block;
 
         .k-icon {
-          color: var(--success);
           height: 100%;
           transition: color 0.3s ease;
           z-index: 10;
@@ -194,6 +198,14 @@ function formatSize(value: number) {
           background-color: white;
         }
       }
+
+      .verified {
+        color: var(--success);
+      }
+
+      .insecure {
+        color: var(--danger);
+      }
     }
 
     .rating {

diff --git a/packages/market/package.json b/packages/market/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@koishijs/plugin-market",
   "description": "Manage your bots and plugins with console",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "main": "lib/node/index.js",
   "typings": "lib/index.d.ts",
   "exports": {
@@ -66,7 +66,7 @@
     "@types/which-pm-runs": "^1.0.0"
   },
   "dependencies": {
-    "@koishijs/registry": "^4.2.7",
+    "@koishijs/registry": "^4.3.0",
     "execa": "^5.1.1",
     "get-registry": "^1.1.0",
     "ns-require": "^1.1.4",