feat(config): enhance config fork trigger, fix #135

koishijs · Dec 17, 2023 · b7790ec · b7790ec
1 parent 7e90ec4
commit b7790ec
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/plugins/config/client/components/forks.vue b/plugins/config/client/components/forks.vue
@@ -24,7 +24,17 @@
       </tr>
     </table>
     <template #footer>
-      <el-button @click.stop="configure()">添加新配置</el-button>
+      <div class="left">
+        <template v-if="plugins.forks[shortname]?.length">
+          此插件目前存在 {{ plugins.forks[shortname]?.length }} 份配置。
+        </template>
+        <template v-else>
+          此插件尚未被配置。
+        </template>
+      </div>
+      <div class="right">
+        <el-button @click.stop="configure()">添加新配置</el-button>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -36,7 +46,7 @@ import { store, send, router } from '@koishijs/client'
 import { dialogFork, plugins, getStatus, removeItem, Tree } from './utils'
 
 const shortname = computed(() => dialogFork.value?.replace(/(koishi-|^@koishijs\/)plugin-/, ''))
-const local = computed(() => store.packages[dialogFork.value])
+const local = computed(() => store.packages?.[dialogFork.value])
 
 function getLabel(tree: Tree) {
   return `${tree.label ? `${tree.label} ` : ''}[${tree.path}]`
@@ -107,7 +117,10 @@ async function configure(key?: string) {
   }
 
   .el-dialog__footer {
-    text-align: left;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.9em;
   }
 }
 

diff --git a/plugins/config/client/index.ts b/plugins/config/client/index.ts
@@ -1,7 +1,7 @@
-import { Context } from '@koishijs/client'
+import { Context, router, send } from '@koishijs/client'
 import { defineComponent, h, resolveComponent } from 'vue'
 import type {} from '@koishijs/plugin-config'
-import { type } from './components/utils'
+import { dialogFork, plugins, type } from './components/utils'
 import Settings from './components/index.vue'
 import Forks from './components/forks.vue'
 import Select from './components/select.vue'
@@ -11,6 +11,13 @@ import './icons'
 
 export * from './components/utils'
 
+declare module '@koishijs/client' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Events<C> {
+    'config/dialog-fork'(name: string): void
+  }
+}
+
 export default (ctx: Context) => {
   ctx.slot({
     type: 'global',
@@ -36,6 +43,20 @@ export default (ctx: Context) => {
     component: Forks,
   })
 
+  ctx.on('config/dialog-fork', (name) => {
+    const shortname = name.replace(/(koishi-|^@koishijs\/)plugin-/, '')
+    const forks = plugins.value.forks[shortname]
+    if (!forks.length) {
+      const key = Math.random().toString(36).slice(2, 8)
+      send('manager/unload', '', shortname + ':' + key, {})
+      router.push('/plugins/' + key)
+    } else if (forks.length === 1) {
+      router.push('/plugins/' + forks[0])
+    } else {
+      dialogFork.value = name
+    }
+  })
+
   ctx.page({
     path: '/plugins/:name*',
     name: '插件配置',

diff --git a/plugins/market/client/components/install.vue b/plugins/market/client/components/install.vue
@@ -5,8 +5,8 @@
     class="install-panel"
     destroy-on-close>
     <template v-if="active" #header="{ titleId, titleClass }">
-      <span :id="titleId" :class="[titleClass, '']">
-        {{ active.replace(/(koishi-|^@koishijs\/)plugin-/, '') + (workspace ? ' (工作区)' : '') }}
+      <span :id="titleId" :class="titleClass">
+        {{ active + (workspace ? ' (工作区)' : '') }}
       </span>
       <el-select v-if="data" :disabled="workspace" v-model="selectVersion">
         <el-option v-for="({ result }, version) in data" :key="version" :value="version">
@@ -46,28 +46,13 @@
       </table>
     </el-scrollbar>
 
-    <div v-if="local && paths.length">
-      点击以前往配置页面：
-      <ul>
-        <li v-for="([path, key, active]) of paths" :key="key">
-          <span class="link" @click.stop="configure(key)">{{ path }}</span>
-          ({{ active ? '运行中' : '闲置' }})
-        </li>
-        <li v-if="!local.runtime?.id">
-          <span class="link" @click.stop="configure(true)">添加新配置</span>
-        </li>
-      </ul>
-    </div>
-    <div v-else-if="local">
-      <span class="link" @click.stop="configure(true)">你尚未配置此插件，点击立即配置。</span>
-    </div>
-
     <template v-if="active && !global.static" #footer>
       <div class="left">
         <el-checkbox v-model="config.bulk">批量操作模式</el-checkbox>
       </div>
       <div class="right">
         <el-button @click="active = ''">取消</el-button>
+        <el-button v-if="local" type="primary" @click="configure()">配置</el-button>
         <template v-if="workspace">
           <el-button v-if="current || config.bulk && config.override[active]" @click="installDep('')">移除</el-button>
           <el-button v-else @click="installDep(version)" :disabled="unchanged">添加</el-button>
@@ -86,11 +71,13 @@
 <script lang="ts" setup>
 
 import { computed, ref, watch } from 'vue'
-import { global, router, send, store } from '@koishijs/client'
+import { global, router, send, store, useContext } from '@koishijs/client'
 import { analyzeVersions, install } from './utils'
 import { active, config } from '../utils'
 import { parse } from 'semver'
 
+const ctx = useContext()
+
 function installDep(version: string) {
   const target = shortname.value
   if (config.value.bulk) {
@@ -203,21 +190,14 @@ const shortname = computed(() => {
   return active.value.replace(pluginRegExp, '')
 })
 
-const paths = computed(() => getPaths(shortname.value))
-
 function getPaths(target: string) {
   if (!target || !store.config) return []
   return [...find(target, store.config.plugins, '')]
 }
 
-function configure(key: string | true) {
-  const target = shortname.value
-  active.value = ''
-  if (key === true) {
-    key = Math.random().toString(36).slice(2, 8)
-    send('manager/unload', '', target + ':' + key, {})
-  }
-  router.push('/plugins/' + key)
+function configure() {
+  ctx.emit('config/dialog-fork', active.value)
+  active.value = null
 }
 
 </script>