feat(client): support action.hidden

packages/client/app/layout/layout.vue

@@ -16,13 +16,13 @@
               <template v-for="item in ctx.internal.menus[menu]" :key="menu">
                 <layout-menu-item
                   v-if="item.id !== '@separator'"
-                  v-bind="{ ...item, ...ctx.internal.actions[item.id.startsWith('.') ? menu + item.id : item.id] }"
+                  :item="{ ...item, ...ctx.internal.actions[item.id.startsWith('.') ? menu + item.id : item.id] }"
                   :menu-key="menu" :menu-data="menuData"
                 />
               </template>
             </template>
             <template v-else>
-              <layout-menu-item v-for="item in menu" v-bind="item" />
+              <layout-menu-item v-for="item in menu" :item="item" />
             </template>
           </slot>
         </template>

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

@@ -1,7 +1,7 @@
 <template>
-  <el-tooltip :disabled="disabled" :content="toValue(label)" placement="bottom">
-    <span class="menu-item" :class="[toValue(type), { disabled }]" @click="trigger">
-      <k-icon class="menu-icon" :name="toValue(icon)"></k-icon>
+  <el-tooltip v-if="!hidden" :disabled="disabled" :content="toValue(item.label)" placement="bottom">
+    <span class="menu-item" :class="[toValue(item.type), { disabled }]" @click="trigger">
+      <k-icon class="menu-icon" :name="toValue(item.icon)"></k-icon>
     </span>
   </el-tooltip>
 </template>
@@ -11,17 +11,23 @@
 import { LegacyMenuItem, MaybeGetter, useContext } from '@koishijs/client'
 import { computed } from 'vue'
 
-const props = defineProps<LegacyMenuItem & {
+const props = defineProps<{
+  item: LegacyMenuItem
   menuKey?: string
   menuData?: any
 }>()
 
 const ctx = useContext()
 
+const hidden = computed(() => {
+  if (!props.item.hidden) return false
+  return toValue(props.item.hidden)
+})
+
 const disabled = computed(() => {
-  if (!props.action) return true
-  if (!props.disabled) return false
-  return toValue(props.disabled)
+  if (!props.item.action) return true
+  if (!props.item.disabled) return false
+  return toValue(props.item.disabled)
 })
 
 function toValue<T>(getter: MaybeGetter<T>): T {
@@ -30,7 +36,7 @@ function toValue<T>(getter: MaybeGetter<T>): T {
 }
 
 function trigger() {
-  return props.action(ctx.internal.createScope({
+  return props.item.action(ctx.internal.createScope({
     [props.menuKey]: props.menuData,
   }))
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="menu of ctx.internal.activeMenus" :key="id">
+  <template v-for="menu of ctx.internal.activeMenus" :key="menu.id">
     <k-menu v-bind="menu"></k-menu>
   </template>
 </template>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     class="k-menu-item"
-    v-if="forced || !disabled"
+    v-if="!hidden"
     :class="[toValue(type), { disabled }]"
     @click.prevent="item?.action(ctx.internal.createScope())"
   >
@@ -19,14 +19,18 @@ const props = defineProps<MenuItem & { prefix: string }>()
 
 const ctx = useContext()
 
-const forced = computed(() => props.id.startsWith('!'))
-
 const item = computed(() => {
   let id = props.id.replace(/^!/, '')
   if (id.startsWith('.')) id = props.prefix + id
   return ctx.internal.actions[id]
 })
 
+const hidden = computed(() => {
+  if (!item.value) return true
+  if (!item.value.hidden) return false
+  return toValue(item.value.hidden)
+})
+
 const disabled = computed(() => {
   if (!item.value) return true
   if (!item.value.disabled) return false

packages/client/client/components/slot.ts

@@ -28,7 +28,7 @@ export const KSlot = defineComponent({
       const external = [...ctx.internal.views[props.name] || []]
         .filter(item => !item.disabled?.())
         .map(item => ({
-          node: h(item.component, { data: props.data, ...props.data }, slots),
+          node: h(item.component, { ...props.data }, slots),
           order: item.order,
           layer: 1,
         }))

packages/client/client/context.ts

@@ -43,6 +43,7 @@ export function useContext() {
 
 export interface ActionOptions {
   shortcut?: string
+  hidden?: (scope: Flatten<ActionContext>) => boolean
   disabled?: (scope: Flatten<ActionContext>) => boolean
   action: (scope: Flatten<ActionContext>) => any
 }

plugins/config/client/components/index.vue

@@ -108,17 +108,17 @@ const ctx = useContext()
 ctx.define('config.tree', current)
 
 ctx.action('config.tree.add-plugin', {
-  disabled: ({ config }) => config.tree.path && !config.tree.children,
+  hidden: ({ config }) => config.tree.path && !config.tree.children,
   action: ({ config }) => dialogSelect.value = config.tree,
 })
 
 ctx.action('config.tree.add-group', {
-  disabled: ({ config }) => config.tree.path && !config.tree.children,
+  hidden: ({ config }) => config.tree.path && !config.tree.children,
   action: ({ config }) => addItem(config.tree.path, 'reload', 'group'),
 })
 
 ctx.action('config.tree.clone', {
-  disabled: ({ config }) => !config.tree.path || !!config.tree.children,
+  hidden: ({ config }) => !config.tree.path || !!config.tree.children,
   action: async ({ config }) => {
     const ident = Math.random().toString(36).slice(2, 8)
     send('manager/unload', config.tree.parent?.path ?? '', `${config.tree.name}:${ident}`, config.tree.config)
@@ -127,7 +127,7 @@ ctx.action('config.tree.clone', {
 })
 
 ctx.action('config.tree.manage', {
-  disabled: ({ config }) => !config.tree.path || !!config.tree.children,
+  hidden: ({ config }) => !config.tree.path || !!config.tree.children,
   action: async ({ config }) => {
     dialogFork.value = config.tree.name
   },
@@ -142,7 +142,7 @@ ctx.action('config.tree.rename', {
 })
 
 ctx.action('config.tree.remove', {
-  disabled: ({ config }) => !config.tree.path,
+  disabled: ({ config }) => !config.tree.path || hasCoreDeps(config.tree),
   action: ({ config }) => remove.value = config.tree,
 })
 

plugins/config/client/index.ts

@@ -68,7 +68,7 @@ export default (ctx: Context) => {
   })
 
   ctx.menu('config.tree', [{
-    id: '!config.tree.toggle',
+    id: 'config.tree.toggle',
     type: ({ config }) => config.tree?.disabled ? '' : type.value,
     icon: ({ config }) => config.tree?.disabled ? 'play' : 'stop',
     label: ({ config }) => (config.tree?.disabled ? '启用' : '停用')