feat(client): support context menu API

packages/client/app/layout/layout.vue

@@ -13,7 +13,7 @@
         <template #right>
           <slot name="menu">
             <template v-if="typeof menu === 'string'">
-              <layout-menu-item v-for="item in ctx.internal.menus[menu]" v-bind="{ ...item, ...ctx.internal.actions[item.id]?.[0] }"></layout-menu-item>
+              <layout-menu-item v-for="item in ctx.internal.menus[menu]" v-bind="{ ...item, ...ctx.internal.actions[item.id] }"></layout-menu-item>
             </template>
             <template v-else>
               <layout-menu-item v-for="item in menu" v-bind="item" />

packages/client/app/styles/index.scss

@@ -21,6 +21,8 @@ $white: #ffffff;
 
   --k-card-bg: var(--bg0);
   --k-card-border: var(--k-card-bg);
+  --k-card-shadow: 0 4px 8px -4px rgb(0 0 0 / 15%);
+  --k-menu-bg: var(--bg0);
   --k-main-bg: var(--bg0);
   --k-side-bg: var(--bg1);
   --k-page-bg: var(--bg0);
@@ -36,7 +38,6 @@ $white: #ffffff;
   --k-text-light: var(--fg3);
   --k-text-active: var(--k-color-primary);
 
-  --k-card-shadow: 0 4px 8px -4px rgb(0 0 0 / 15%);
   --loading-mask-bg: #f2f3f5bf;
 
   @mixin apply-color($name, $base) {
@@ -67,6 +68,8 @@ html.dark, .theme-root.dark {
 
   --k-card-bg: var(--bg2);
   --k-card-border: var(--k-color-divider);
+  --k-card-shadow: 0 4px 8px -4px rgb(0 0 0 / 15%);
+  --k-menu-bg: var(--bg0);
   --k-main-bg: var(--bg3);
   --k-side-bg: var(--bg2);
   --k-page-bg: var(--bg2);
@@ -107,6 +110,9 @@ html.dark, .theme-root.dark {
   --font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
   --font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 
+  // layout
+  --k-menu-padding-vertical: 0.375rem;
+
   // fallback
   --k-color-border-dark: var(--k-color-border);
   --k-color-border-light: var(--k-color-divider);
@@ -116,6 +122,8 @@ html.dark, .theme-root.dark {
   --k-fill-normal: var(--k-color-primary);
   --k-fill-disabled: var(--k-color-disabled);
 
+  --k-menu-shadow: var(--k-card-shadow);
+
   // compatibility
   --border: var(--k-color-border);
   --divider: var(--k-color-divider);

packages/client/app/styles/layout.scss

@@ -63,7 +63,7 @@
   }
 }
 
-.k-menu-item {
+.k-tab-menu-item {
   display: block;
   position: relative;
   cursor: pointer;

packages/client/app/theme/index.vue

@@ -7,6 +7,7 @@
   </router-view>
   <div class="loading" v-else v-loading="true" element-loading-text="正在加载数据……"></div>
   <status-bar></status-bar>
+  <menu-list></menu-list>
   <k-slot name="global"></k-slot>
 </template>
 
@@ -17,6 +18,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import ActivityBar from './activity/index.vue'
 import StatusBar from './status.vue'
+import MenuList from './menu/index.vue'
 
 const route = useRoute()
 

packages/client/app/theme/menu/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <template v-for="{ id, styles } of ctx.internal.activeMenus" :key="id">
+    <k-menu
+      :id="id"
+      :style="styles"
+      :ref="el => elements[id] = (el as ComponentPublicInstance)"
+    ></k-menu>
+  </template>
+</template>
+
+<script lang="ts" setup>
+
+import { Dict, useContext } from '@koishijs/client'
+import { ComponentPublicInstance, shallowReactive } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import KMenu from './menu.vue'
+
+const ctx = useContext()
+
+const elements = shallowReactive<Dict<ComponentPublicInstance>>({})
+
+useEventListener('click', () => {
+  ctx.internal.activeMenus.splice(0)
+})
+
+useEventListener('contextmenu', () => {
+  ctx.internal.activeMenus.splice(0)
+})
+
+</script>

packages/client/app/theme/menu/menu-item.vue

@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="k-menu-item"
+    v-if="forced || !disabled"
+    :class="{ disabled }"
+    @click.prevent="action?.action(ctx.internal.createScope())"
+  >
+    {{ toValue(label) }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { MaybeGetter, MenuItem, useContext } from '@koishijs/client'
+import { computed } from 'vue'
+
+const props = defineProps<MenuItem & { prefix: string }>()
+
+const ctx = useContext()
+
+const forced = computed(() => props.id.startsWith('!'))
+
+const action = computed(() => {
+  let id = props.id.replace(/^!/, '')
+  if (id.startsWith('.')) id = props.prefix + id
+  return ctx.internal.actions[id]
+})
+
+const disabled = computed(() => {
+  if (!action.value) return true
+  if (!action.value.disabled) return false
+  return toValue(action.value.disabled)
+})
+
+function toValue<T>(getter: MaybeGetter<T>): T {
+  if (typeof getter !== 'function') return getter
+  return (getter as any)(ctx.internal.createScope())
+}
+
+</script>
+
+<style lang="scss">
+
+.k-menu-item {
+  user-select: none;
+  padding: 0.25rem 1.5rem;
+  cursor: pointer;
+  transition: var(--color-transition);
+
+  &.disabled {
+    color: var(--k-text-light);
+    pointer-events: none;
+  }
+
+  &:not(.disabled):hover {
+    background-color: var(--k-hover-bg);
+  }
+}
+
+</style>

packages/client/app/theme/menu/menu.vue

@@ -0,0 +1,50 @@
+<template>
+  <div ref="menu" class="k-menu">
+    <template v-for="item of ctx.internal.menus[id]">
+      <div class="k-menu-separator" v-if="item.id === '@separator'"></div>
+      <menu-item v-else v-bind="{ prefix: id, ...item }"></menu-item>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { useContext } from '@koishijs/client'
+import MenuItem from './menu-item.vue'
+
+defineProps<{
+  id: string
+}>()
+
+const ctx = useContext()
+
+</script>
+
+<style lang="scss">
+
+.k-menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 12rem;
+  padding: var(--k-menu-padding-vertical) 0;
+  border-radius: 6px;
+  background-color: var(--k-menu-bg);
+  box-shadow: var(--k-menu-shadow);
+  transition: var(--color-transition);
+  font-size: 14px;
+
+  .k-menu-separator {
+    margin: var(--k-menu-padding-vertical) 0;
+    border-top: 1px solid var(--k-color-border);
+
+    &:first-child, &:last-child {
+      display: none;
+    }
+
+    & + & {
+      display: none;
+    }
+  }
+}
+
+</style>

packages/client/client/components/layout/tab-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="k-tab-item k-menu-item"
+  <div class="k-tab-item k-tab-menu-item"
     :class="{ active: label === modelValue }"
     @click="$emit('update:modelValue', label)">
     <slot>{{ label }}</slot>

packages/client/client/context.ts

@@ -47,8 +47,8 @@ export type LegacyMenuItem = Partial<ActionOptions> & Omit<MenuItem, 'id'>
 
 export interface MenuItem {
   id: string
+  label?: MaybeGetter<string>
   type?: MaybeGetter<string>
-  label: MaybeGetter<string>
   icon?: MaybeGetter<string>
   order?: number
 }
@@ -86,10 +86,11 @@ type Flatten<S extends {}> = Intersect<{
 class Internal {
   scope = shallowReactive<Store<ActionContext>>({})
   menus = reactive<Dict<MenuItem[]>>({})
-  actions = reactive<Dict<ActionOptions[]>>({})
+  actions = reactive<Dict<ActionOptions>>({})
   views = reactive<Dict<SlotOptions[]>>({})
   themes = reactive<Dict<ThemeOptions>>({})
   settings = reactive<Dict<SettingOptions[]>>({})
+  activeMenus = reactive<{ id: string; styles: Partial<CSSStyleDeclaration> }[]>([])
 
   createScope(prefix = '') {
     return new Proxy({}, {
@@ -106,6 +107,16 @@ class Internal {
   }
 }
 
+export function useMenu<K extends keyof ActionContext>(id: K) {
+  const ctx = useContext()
+  return (event: MouseEvent, value: MaybeRefOrGetter<ActionContext[K]>) => {
+    ctx.define(id, value)
+    event.preventDefault()
+    const { clientX, clientY } = event
+    ctx.internal.activeMenus.splice(0, Infinity, { id, styles: { left: clientX + 'px', top: clientY + 'px' } })
+  }
+}
+
 export class Context extends cordis.Context {
   app: App
   internal = new Internal()
@@ -163,10 +174,9 @@ export class Context extends cordis.Context {
   }
 
   action(id: string, options: ActionOptions) {
-    const list = this.internal.actions[id] ||= []
     markRaw(options)
-    list.push(options)
-    return this.scope.collect('actions', () => remove(list, options))
+    this.internal.actions[id] = options
+    return this.scope.collect('actions', () => delete this.internal.actions[id])
   }
 
   menu(id: string, items: MenuItem[]) {

packages/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@koishijs/client",
   "description": "Koishi Console Client",
-  "version": "5.10.0",
+  "version": "5.10.1",
   "main": "client/index.ts",
   "files": [
     "app",

plugins/config/client/components/plugin.vue

@@ -125,16 +125,18 @@ const ctx = useContext()
 ctx.action('config.save', {
   disabled: () => !name.value,
   action: async () => {
-    await execute(props.current.disabled ? 'unload' : 'reload')
-    message.success(props.current.disabled ? '配置已保存。' : '配置已重载。')
+    const { disabled } = props.current
+    await execute(disabled ? 'unload' : 'reload')
+    message.success(disabled ? '配置已保存。' : '配置已重载。')
   },
 })
 
 ctx.action('config.toggle', {
   disabled: () => !name.value || coreDeps.includes(name.value),
   action: async () => {
-    await execute(props.current.disabled ? 'reload' : 'unload')
-    message.success(props.current.disabled ? '插件已启用。' : '插件已停用。')
+    const { disabled } = props.current
+    await execute(disabled ? 'reload' : 'unload')
+    message.success(disabled ? '插件已启用。' : '插件已停用。')
   },
 })
 

plugins/sandbox/client/layout.vue

@@ -1,7 +1,7 @@
 <template>
   <k-layout class="page-sandbox">
     <template #left>
-      <div class="card-header k-menu-item" @click="createUser">添加用户</div>
+      <div class="card-header k-tab-menu-item" @click="createUser">添加用户</div>
       <div class="user-container">
         <el-scrollbar>
           <k-tab-group :data="userMap" v-model="config.user" #="{ name }">