From 50187bdc5d7e746d1d73958cd405c235f1c6db65 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 8 May 2022 03:03:14 +0800
Subject: [PATCH] feat(manager): support npm package version notation

---
 .../client/components/common/button.vue       | 19 +-----
 .../client/client/components/style.scss       | 24 +++++++
 plugins/frontend/console/src/http.ts          |  1 +
 .../frontend/manager/client/deps/index.vue    |  2 +-
 .../frontend/manager/client/deps/package.vue  | 62 ++++++++++++++-----
 plugins/frontend/manager/src/installer.ts     |  2 +-
 6 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/plugins/frontend/client/client/components/common/button.vue b/plugins/frontend/client/client/components/common/button.vue
index bdf93844bd..afd5522ca7 100644
--- a/plugins/frontend/client/client/components/common/button.vue
+++ b/plugins/frontend/client/client/components/common/button.vue
@@ -54,7 +54,7 @@ function onClick(event: MouseEvent) {
   border-radius: 0.4em;
   cursor: pointer;
   padding: 0.4em 1em;
-  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
+  transition: var(--color-transition);
   display: inline-block;
   &.round {
     border-radius: 50%;
@@ -116,22 +116,7 @@ function onClick(event: MouseEvent) {
     }
   }
 
-  .k-button-group > &:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  .k-button-group > &:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    &:not(:hover) {
-      border-right-width: 0;
-    }
-  }
-  .k-button-group > &:hover + & {
-    border-left-width: 0;
-  }
-
-  *:not(.k-button-group) > & + & {
+  & + & {
     margin: 0 1rem;
   }
 }
diff --git a/plugins/frontend/client/client/components/style.scss b/plugins/frontend/client/client/components/style.scss
index 4fd94de9e3..d1a520c785 100644
--- a/plugins/frontend/client/client/components/style.scss
+++ b/plugins/frontend/client/client/components/style.scss
@@ -131,6 +131,30 @@ html.dark .el-switch {
   --el-switch-off-color: #72767d;
 }
 
+.right-adjacent {
+  &.k-button, &.el-select .el-input__wrapper {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:hover {
+    z-index: 100;
+  }
+  &:hover + .left-adjacent {
+    border-left-color: transparent;
+  }
+}
+
+.left-adjacent {
+  z-index: 0;
+  margin-left: -1px;
+
+  &.k-button, &.el-select .el-input__wrapper {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
 .el-table__body-wrapper,
 .el-table__footer-wrapper,
 .el-table__header-wrapper {
diff --git a/plugins/frontend/console/src/http.ts b/plugins/frontend/console/src/http.ts
index f460ca6f49..351fd2ae85 100644
--- a/plugins/frontend/console/src/http.ts
+++ b/plugins/frontend/console/src/http.ts
@@ -135,6 +135,7 @@ class HttpService extends DataService<string[]> {
       },
       optimizeDeps: {
         include: [
+          'schemastery',
           'element-plus',
         ],
       },
diff --git a/plugins/frontend/manager/client/deps/index.vue b/plugins/frontend/manager/client/deps/index.vue
index 3e6c6142ed..f63b136f8c 100644
--- a/plugins/frontend/manager/client/deps/index.vue
+++ b/plugins/frontend/manager/client/deps/index.vue
@@ -1,7 +1,7 @@
 <template>
   <k-card class="page-deps">
     <div class="controls">
-      <el-checkbox v-model="config.hideWorkspace">忽略工作区依赖{{ config.override }}</el-checkbox>
+      <el-checkbox v-model="config.hideWorkspace">忽略工作区依赖</el-checkbox>
       <span class="float-right" v-if="!overrideCount">当前没有变更的依赖</span>
       <template v-else>
         <k-button class="float-right" solid @click="install">更新依赖</k-button>
diff --git a/plugins/frontend/manager/client/deps/package.vue b/plugins/frontend/manager/client/deps/package.vue
index 3e1ce1b7dc..db7240af9f 100644
--- a/plugins/frontend/manager/client/deps/package.vue
+++ b/plugins/frontend/manager/client/deps/package.vue
@@ -11,15 +11,15 @@
     </td>
     <td class="target">
       <template v-if="local?.workspace">
-        <k-button @click="send('market/patch', name, null)">移除依赖</k-button>
+        <k-button class="action" @click="send('market/patch', name, null)">移除依赖</k-button>
+      </template>
+      <template v-else>
+        <k-button class="prefix right-adjacent" @click="prefix = matrix[prefix]">{{ prefix || '=' }}</k-button>
+        <el-select class="left-adjacent" v-model="value">
+          <el-option value="">移除依赖</el-option>
+          <el-option v-for="({ version }) in remote?.versions || []" :key="version" :value="version"></el-option>
+        </el-select>
       </template>
-      <el-select v-else v-model="value">
-        <el-option value="">移除依赖</el-option>
-        <el-option
-          v-for="({ version }) in remote?.versions || []"
-          :key="version" :value="version"
-        >{{ version }}{{ version === local?.resolved ? ' (当前)' : '' }}</el-option>
-      </el-select>
     </td>
   </tr>
 </template>
@@ -37,17 +37,34 @@ const props = defineProps({
 const value = computed({
   get() {
     const target = config.override[props.name]
-    return target === '' ? '移除依赖' : target
+    return target === '' ? '移除依赖' : target?.replace(/^[\^~]/, '')
   },
   set(target: string) {
-    if (target === '' && !local.value || target === local.value?.resolved) {
+    if (target === '' && !local.value) {
       delete config.override[props.name]
     } else {
-      config.override[props.name] = target
+      config.override[props.name] = prefix.value + target
+      if (config.override[props.name] === local.value?.request) {
+        delete config.override[props.name]
+      }
     }
   },
 })
 
+const prefix = computed({
+  get() {
+    return /^[\^~]?/.exec(config.override[props.name] || local.value.request)[0]
+  },
+  set(prefix: string) {
+    config.override[props.name] = prefix + (config.override[props.name] || local.value.request).replace(/^[\^~]/, '')
+    if (config.override[props.name] === local.value?.request) {
+      delete config.override[props.name]
+    }
+  },
+})
+
+const matrix = { '': '^', '^': '~', '~': '' }
+
 const state = computed(() => {
   if (!props.name.includes('koishi-plugin-') && !props.name.startsWith('@koishijs/plugin-')) {
     return 'disabled'
@@ -67,7 +84,7 @@ const remote = computed(() => {
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 
 .dep-package-view {
   height: 3rem;
@@ -75,7 +92,7 @@ const remote = computed(() => {
 
   td.name {
     text-align: left;
-    padding-left: 4rem;
+    padding-left: 3.6rem;
 
     &::before {
       content: '';
@@ -84,8 +101,8 @@ const remote = computed(() => {
       width: 0.5rem;
       height: 0.5rem;
       top: 50%;
-      left: 2rem;
-      transform: translateY(-50%);
+      left: 1.8rem;
+      transform: translate(-50%, -50%);
       transition: background-color 0.3s ease;
       box-shadow: 1px 1px 2px #3333;
     }
@@ -108,8 +125,19 @@ const remote = computed(() => {
     }
   }
 
-  .el-select, .k-button {
-    width: 10rem;
+  .k-button.action {
+    width: 9rem;
+  }
+
+  .el-select {
+    width: 7rem;
+  }
+
+  .k-button.prefix {
+    width: 2rem;
+    height: 2rem;
+    vertical-align: bottom;
+    padding: 0;
   }
 }
 
diff --git a/plugins/frontend/manager/src/installer.ts b/plugins/frontend/manager/src/installer.ts
index 05d675c2a0..ffa49b2dfc 100644
--- a/plugins/frontend/manager/src/installer.ts
+++ b/plugins/frontend/manager/src/installer.ts
@@ -81,7 +81,7 @@ class Installer extends DataService<Dict<Dependency>> {
     const filename = resolve(this.cwd, 'package.json')
     for (const key in deps) {
       if (deps[key]) {
-        this.meta.dependencies[key] = '^' + deps[key]
+        this.meta.dependencies[key] = deps[key]
       } else {
         delete this.meta.dependencies[key]
       }