feat(config): support context menu, fix #70

plugins/config/client/components/index.vue

@@ -38,11 +38,18 @@
       <plugin-settings v-else :current="current" v-model="config"></plugin-settings>
     </k-content>
 
-    <el-dialog v-model="showRemove" title="确认移除" destroy-on-close>
-      确定要移除{{ current.children ? `分组 ${current.alias}` : `插件 ${current.label}` }} 吗？此操作不可撤销！
+    <el-dialog
+      v-model="showRemove"
+      title="确认移除"
+      destroy-on-close
+      @closed="remove = null"
+    >
+      <template v-if="remove">
+        确定要移除{{ remove.children ? `分组 ${remove.alias}` : `插件 ${remove.label}` }} 吗？此操作不可撤销！
+      </template>
       <template #footer>
         <el-button @click="showRemove = false">取消</el-button>
-        <el-button type="danger" @click="(showRemove = false, removeItem(current.path))">确定</el-button>
+        <el-button type="danger" @click="(showRemove = false, removeItem(remove.path))">确定</el-button>
       </template>
     </el-dialog>
   </k-layout>
@@ -53,7 +60,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { clone, store, useContext } from '@koishijs/client'
-import { addItem, current, plugins, removeItem, showSelect } from './utils'
+import { Tree, addItem, current, plugins, removeItem, select } from './utils'
 import GlobalSettings from './global.vue'
 import GroupSettings from './group.vue'
 import TreeView from './tree.vue'
@@ -76,32 +83,52 @@ const path = computed<string>({
 
 const config = ref()
 
+const remove = ref<Tree>()
 const showRemove = ref(false)
 
+watch(remove, (value) => {
+  if (value) showRemove.value = true
+})
+
 watch(() => plugins.value.paths[path.value], (value) => {
   current.value = value
   config.value = clone(value.config)
 }, { immediate: true })
 
 const ctx = useContext()
 
-ctx.define('config.tree', current)
+ctx.define('config.current', current)
 
 ctx.action('config.remove', {
   disabled: () => !current.value.path,
-  action: () => showRemove.value = true,
+  action: () => remove.value = current.value,
 })
 
 ctx.action('config.add-plugin', {
   disabled: () => current.value.path && !current.value.children,
-  action: () => showSelect.value = true,
+  action: () => select.value = current.value,
 })
 
 ctx.action('config.add-group', {
   disabled: () => current.value.path && !current.value.children,
   action: () => addItem(current.value.path, 'group', 'group'),
 })
 
+ctx.action('config.tree.remove', {
+  disabled: ({ config }) => !config.tree.path,
+  action: ({ config }) => remove.value = config.tree,
+})
+
+ctx.action('config.tree.add-plugin', {
+  disabled: ({ config }) => config.tree.path && !config.tree.children,
+  action: ({ config }) => select.value = config.tree,
+})
+
+ctx.action('config.tree.add-group', {
+  disabled: ({ config }) => config.tree.path && !config.tree.children,
+  action: ({ config }) => addItem(config.tree.path, 'group', 'group'),
+})
+
 </script>
 
 <style lang="scss">

plugins/config/client/components/select.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-dialog v-if="store.packages" v-model="showSelect" class="plugin-select">
+  <el-dialog
+    v-if="store.packages"
+    :modelValue="!!select"
+    @update:modelValue="select = null"
+    class="plugin-select"
+  >
     <template #header>
       <slot name="title" :packages="packages">
         <span class="title">选择插件</span>
@@ -24,33 +29,30 @@
 
 import { router, send, store, useI18nText } from '@koishijs/client'
 import { computed, inject, nextTick, ref, watch } from 'vue'
-import { showSelect } from './utils'
-import { useRoute } from 'vue-router'
 import { PackageProvider } from '@koishijs/plugin-config'
+import { select } from './utils'
 
 const tt = useI18nText()
 
 const keyword = ref('')
 const input = ref()
 
-const route = useRoute()
-
 const filter = inject('plugin-select-filter', (data: PackageProvider.Data) => true)
 
 const packages = computed(() => Object.values(store.packages).filter(({ name, shortname }) => {
   return name && shortname.includes(keyword.value.toLowerCase()) && filter(store.packages[name])
 }))
 
 function configure(shortname: string) {
-  showSelect.value = false
-  let path = route.path.slice(9)
+  let path = select.value.path
+  select.value = null
   if (path) path += '/'
   path += shortname + ':' + Math.random().toString(36).slice(2, 8)
   send('manager/unload', path, {})
   router.push('/plugins/' + path)
 }
 
-watch(showSelect, async (value, oldValue) => {
+watch(select, async (value) => {
   if (!value) return
   await nextTick()
   await input.value.focus()

plugins/config/client/components/tree.vue

@@ -18,6 +18,7 @@
       :allow-drag="allowDrag"
       :allow-drop="allowDrop"
       @node-click="handleClick"
+      @node-contextmenu="trigger"
       @node-drop="handleDrop"
       @node-expand="handleExpand"
       @node-collapse="handleCollapse"
@@ -33,13 +34,15 @@
 <script lang="ts" setup>
 
 import { ref, computed, onActivated, nextTick, watch } from 'vue'
-import { send } from '@koishijs/client'
+import { send, useMenu } from '@koishijs/client'
 import { Tree, plugins, setPath, splitPath } from './utils'
 
 const props = defineProps<{
   modelValue: string
 }>()
 
+const trigger = useMenu('config.tree')
+
 const emits = defineEmits(['update:modelValue'])
 
 const model = computed({

plugins/config/client/components/utils.ts

@@ -27,7 +27,7 @@ export interface EnvInfo {
   warning?: boolean
 }
 
-export const showSelect = ref(false)
+export const select = ref<Tree>()
 
 export const coreDeps = [
   '@koishijs/plugin-console',
@@ -93,6 +93,7 @@ export const envMap = computed(() => {
 
 declare module '@koishijs/client' {
   interface ActionContext {
+    'config.current': Tree
     'config.tree': Tree
   }
 }

plugins/config/client/index.ts

@@ -40,18 +40,18 @@ export default (ctx: Context) => {
 
   ctx.menu('config', [{
     id: 'config.toggle',
-    type: ({ config }) => config.tree?.disabled ? '' : type.value,
-    icon: ({ config }) => config.tree?.disabled ? 'play' : 'stop',
-    label: ({ config }) => config.tree?.disabled ? '启用插件' : '停用插件',
+    type: ({ config }) => config.current?.disabled ? '' : type.value,
+    icon: ({ config }) => config.current?.disabled ? 'play' : 'stop',
+    label: ({ config }) => config.current?.disabled ? '启用插件' : '停用插件',
   }, {
     id: 'config.save',
-    icon: ({ config }) => config.tree?.disabled ? 'save' : 'check',
-    label: ({ config }) => config.tree?.disabled ? '保存配置' : '重载配置',
+    icon: ({ config }) => config.current?.disabled ? 'save' : 'check',
+    label: ({ config }) => config.current?.disabled ? '保存配置' : '重载配置',
   }, {
     id: 'config.remove',
     type: 'danger',
     icon: 'trash-can',
-    label: ({ config }) => config.tree?.children ? '移除分组' : '移除插件',
+    label: ({ config }) => config.current?.children ? '移除分组' : '移除插件',
   }, {
     id: 'config.add-plugin',
     icon: 'add-plugin',
@@ -61,4 +61,18 @@ export default (ctx: Context) => {
     icon: 'add-group',
     label: '添加分组',
   }])
+
+  ctx.menu('config.tree', [{
+    id: '.add-plugin',
+    label: '添加插件',
+  }, {
+    id: '.add-group',
+    label: '添加分组',
+  }, {
+    id: '@separator',
+  }, {
+    id: '.remove',
+    type: 'danger',
+    label: ({ config }) => config.tree?.children ? '移除分组' : '移除插件',
+  }])
 }