npm - @kine-design/core - Versions diffs - 0.0.1-beta.11 → 0.0.1-beta.13 - Mend

@kine-design/core 0.0.1-beta.11 → 0.0.1-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (67) hide show

package/components/base/image/__tests__/useImage.test.ts +61 -0
package/components/base/image/api.ts +2 -2
package/components/base/image/index.ts +2 -2
package/components/base/image/props.d.ts +15 -4
package/components/base/image/useImage.ts +27 -16
package/components/base/tooltip/api.ts +3 -2
package/components/base/tooltip/index.ts +3 -2
package/components/base/tooltip/props.d.ts +12 -6
package/components/base/tooltip/useTooltip.ts +175 -56
package/compositions/commandPalette/index.ts +11 -0
package/compositions/commandPalette/types.ts +29 -0
package/compositions/commandPalette/useCommandPalette.ts +135 -0
package/compositions/contextMenu/index.ts +10 -0
package/compositions/contextMenu/types.ts +21 -0
package/compositions/contextMenu/useContextMenu.ts +101 -0
package/compositions/editor/index.ts +18 -0
package/compositions/editor/types.ts +147 -0
package/compositions/editor/useEditor.ts +224 -0
package/compositions/index.ts +15 -0
package/compositions/overlay/index.ts +14 -0
package/compositions/overlay/useOverlayStack.ts +146 -0
package/compositions/peekView/index.ts +10 -0
package/compositions/peekView/usePeekView.ts +99 -0
package/compositions/theme/index.ts +17 -0
package/compositions/theme/presets/compact.ts +117 -0
package/compositions/theme/presets/dark.ts +113 -0
package/compositions/theme/presets/index.ts +11 -0
package/compositions/theme/presets/light.ts +113 -0
package/compositions/theme/types.ts +46 -0
package/compositions/theme/useTheme.ts +269 -0
package/compositions/toast/index.ts +10 -0
package/compositions/toast/useToast.ts +176 -0
package/compositions/tooltip/index.ts +9 -0
package/compositions/tooltip/useTooltip.ts +10 -0
package/dist/components/base/image/index.d.ts +2 -2
package/dist/components/base/image/useImage.d.ts +7 -0
package/dist/components/base/tooltip/index.d.ts +1 -0
package/dist/components/base/tooltip/useTooltip.d.ts +20 -17
package/dist/compositions/commandPalette/index.d.ts +11 -0
package/dist/compositions/commandPalette/types.d.ts +20 -0
package/dist/compositions/commandPalette/useCommandPalette.d.ts +32 -0
package/dist/compositions/contextMenu/index.d.ts +10 -0
package/dist/compositions/contextMenu/types.d.ts +12 -0
package/dist/compositions/contextMenu/useContextMenu.d.ts +52 -0
package/dist/compositions/editor/index.d.ts +10 -0
package/dist/compositions/editor/types.d.ts +132 -0
package/dist/compositions/editor/useEditor.d.ts +13 -0
package/dist/compositions/index.d.ts +15 -0
package/dist/compositions/overlay/index.d.ts +10 -0
package/dist/compositions/overlay/useOverlayStack.d.ts +188 -0
package/dist/compositions/peekView/index.d.ts +10 -0
package/dist/compositions/peekView/usePeekView.d.ts +16 -0
package/dist/compositions/theme/index.d.ts +11 -0
package/dist/compositions/theme/presets/compact.d.ts +6 -0
package/dist/compositions/theme/presets/dark.d.ts +2 -0
package/dist/compositions/theme/presets/index.d.ts +11 -0
package/dist/compositions/theme/presets/light.d.ts +2 -0
package/dist/compositions/theme/types.d.ts +41 -0
package/dist/compositions/theme/useTheme.d.ts +167 -0
package/dist/compositions/toast/index.d.ts +10 -0
package/dist/compositions/toast/useToast.d.ts +71 -0
package/dist/compositions/tooltip/index.d.ts +9 -0
package/dist/compositions/tooltip/useTooltip.d.ts +10 -0
package/dist/core.js +836 -56
package/dist/index.d.ts +1 -0
package/index.ts +2 -0
package/package.json +13 -2

package/compositions/theme/useTheme.ts ADDED Viewed

@@ -0,0 +1,269 @@
+/**
+ * @description theme store — runtime design token engine with CSS variable injection
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { defineStore } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import type {
+  ThemeDefinition,
+  ThemeTokenCategory,
+  ThemeOverrides,
+  PersistedThemeState,
+  ThemeTokens,
+} from './types';
+import { lightTheme, darkTheme, compactTheme } from './presets';
+const STORAGE_KEY = 'kine-theme';
+const TRANSITION_CLASS = 'kine-theme-transitioning';
+/**
+ * Detect OS-level dark mode preference.
+ * Returns 'dark' if the user prefers dark color scheme, 'light' otherwise.
+ */
+function detectColorScheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+/**
+ * Load persisted theme state from localStorage.
+ */
+function loadPersistedState(): PersistedThemeState | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw) as PersistedThemeState;
+  } catch {
+    return null;
+  }
+}
+/**
+ * Save theme state to localStorage.
+ */
+function persistState(state: PersistedThemeState): void {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {
+    // storage full or unavailable — silently ignore
+  }
+}
+/**
+ * Apply a flat map of CSS variables to document.documentElement.style.
+ * Variables follow the naming convention `--kine-{category}-{key}`.
+ */
+function applyCSSVariables(tokens: Partial<ThemeTokens>): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  const categories = Object.keys(tokens) as ThemeTokenCategory[];
+  for (const category of categories) {
+    const entries = tokens[category];
+    if (!entries) continue;
+    for (const [key, value] of Object.entries(entries)) {
+      root.style.setProperty(`--kine-${category}-${key}`, value);
+    }
+  }
+}
+/**
+ * Add a brief transition to body so theme switch feels smooth.
+ */
+function enableTransition(): void {
+  if (typeof document === 'undefined') return;
+  const el = document.documentElement;
+  el.classList.add(TRANSITION_CLASS);
+  // inject the transition style once
+  let styleEl = document.getElementById('kine-theme-transition');
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = 'kine-theme-transition';
+    styleEl.textContent = `
+      .${TRANSITION_CLASS},
+      .${TRANSITION_CLASS} *,
+      .${TRANSITION_CLASS} *::before,
+      .${TRANSITION_CLASS} *::after {
+        transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s !important;
+      }
+    `;
+    document.head.appendChild(styleEl);
+  }
+  // remove transition class after animation completes to avoid perf overhead
+  setTimeout(() => {
+    el.classList.remove(TRANSITION_CLASS);
+  }, 350);
+}
+/**
+ * Toggle the `dark` attribute on <html> to coordinate with base.css html[dark] selectors.
+ */
+function toggleDarkAttribute(isDark: boolean): void {
+  if (typeof document === 'undefined') return;
+  if (isDark) {
+    document.documentElement.setAttribute('dark', '');
+  } else {
+    document.documentElement.removeAttribute('dark');
+  }
+}
+/**
+ * Merge base theme tokens with user overrides (overrides win).
+ */
+function mergeTokens(base: Partial<ThemeTokens>, overrides: ThemeOverrides): Partial<ThemeTokens> {
+  const merged: Partial<ThemeTokens> = {};
+  const allCategories = new Set<ThemeTokenCategory>([
+    ...Object.keys(base) as ThemeTokenCategory[],
+    ...Object.keys(overrides) as ThemeTokenCategory[],
+  ]);
+  for (const cat of allCategories) {
+    merged[cat] = {
+      ...(base[cat] ?? {}),
+      ...(overrides[cat] ?? {}),
+    };
+  }
+  return merged;
+}
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+export const useThemeStore = defineStore('kine-theme', () => {
+  // --- state ---
+  const themes = ref<Map<string, ThemeDefinition>>(new Map());
+  const currentThemeId = ref<string>('light');
+  const overrides = ref<ThemeOverrides>({});
+  // --- getters ---
+  const currentTheme = computed<ThemeDefinition | undefined>(
+    () => themes.value.get(currentThemeId.value),
+  );
+  const resolvedTokens = computed<Partial<ThemeTokens>>(() => {
+    const base = currentTheme.value?.tokens ?? {};
+    return mergeTokens(base, overrides.value);
+  });
+  const isDark = computed(() => currentThemeId.value === 'dark');
+  const themeList = computed<ThemeDefinition[]>(() => Array.from(themes.value.values()));
+  // --- actions ---
+  /**
+   * Register a theme preset. If a theme with the same id exists, it is replaced.
+   */
+  function registerTheme(definition: ThemeDefinition): void {
+    // use a new Map so Vue detects the change
+    const next = new Map(themes.value);
+    next.set(definition.id, definition);
+    themes.value = next;
+  }
+  /**
+   * Switch to a registered theme by id.
+   */
+  function setTheme(id: string): void {
+    if (!themes.value.has(id)) {
+      console.warn(`[kine-theme] theme "${id}" is not registered`);
+      return;
+    }
+    enableTransition();
+    currentThemeId.value = id;
+  }
+  /**
+   * Set a single token override (survives theme switches).
+   */
+  function setTokenOverride(category: ThemeTokenCategory, key: string, value: string): void {
+    const prev = overrides.value[category] ?? {};
+    overrides.value = {
+      ...overrides.value,
+      [category]: { ...prev, [key]: value },
+    };
+  }
+  /**
+   * Clear all user-level token overrides.
+   */
+  function resetOverrides(): void {
+    overrides.value = {};
+  }
+  /**
+   * Initialize the theme system: register built-in presets, restore persisted
+   * state (or detect OS preference), and apply CSS variables.
+   * Called automatically by KThemeProvider or can be called manually.
+   */
+  function init(): void {
+    // register built-in presets
+    registerTheme(lightTheme);
+    registerTheme(darkTheme);
+    registerTheme(compactTheme);
+    // restore persisted state
+    const persisted = loadPersistedState();
+    if (persisted && themes.value.has(persisted.currentTheme)) {
+      currentThemeId.value = persisted.currentTheme;
+      overrides.value = persisted.overrides ?? {};
+    } else {
+      // no saved preference — use OS color scheme
+      currentThemeId.value = detectColorScheme();
+    }
+    // apply immediately (no transition on first paint)
+    applyCurrentTheme();
+  }
+  /**
+   * Apply the resolved tokens as CSS variables and sync dark attribute.
+   */
+  function applyCurrentTheme(): void {
+    applyCSSVariables(resolvedTokens.value);
+    toggleDarkAttribute(isDark.value);
+  }
+  // --- persistence & side-effect watchers ---
+  watch(
+    [currentThemeId, overrides],
+    () => {
+      applyCurrentTheme();
+      persistState({
+        currentTheme: currentThemeId.value,
+        overrides: overrides.value,
+      });
+    },
+    { deep: true },
+  );
+  return {
+    // state
+    currentThemeId,
+    themes,
+    overrides,
+    // getters
+    currentTheme,
+    resolvedTokens,
+    isDark,
+    themeList,
+    // actions
+    registerTheme,
+    setTheme,
+    setTokenOverride,
+    resetOverrides,
+    init,
+  };
+});

package/compositions/toast/index.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * @description toast composition 导出
+ * @author 阿怪
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useToast } from './useToast';
+export type { ToastType, ToastItem, ToastShowOptions, ToastPromiseOptions } from './useToast';

package/compositions/toast/useToast.ts ADDED Viewed

@@ -0,0 +1,176 @@
+/**
+ * @description toast 队列 composable — Promise-based 通知系统
+ * @author 阿怪
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref } from 'vue';
+/**
+ * Toast 类型
+ */
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
+/**
+ * Toast 队列中每一条 toast 的内部结构
+ */
+export interface ToastItem {
+  id: number;
+  type: ToastType;
+  title: string;
+  message?: string;
+  duration: number;
+  createdAt: number;
+}
+/**
+ * 创建 toast 时的配置参数
+ */
+export interface ToastShowOptions {
+  type?: ToastType;
+  title: string;
+  message?: string;
+  duration?: number;
+}
+/**
+ * promise() 方法的三阶段配置
+ */
+export interface ToastPromiseOptions<T> {
+  loading: string | { title: string; message?: string };
+  success: string | { title: string; message?: string } | ((data: T) => string | { title: string; message?: string });
+  error: string | { title: string; message?: string } | ((err: unknown) => string | { title: string; message?: string });
+}
+/** 各类型默认自动关闭时间（毫秒） */
+const DEFAULT_DURATIONS: Record<ToastType, number> = {
+  success: 3000,
+  error: 5000,
+  warning: 4000,
+  info: 3000,
+  loading: 0, // loading never auto-dismiss
+};
+/** 最大可见 toast 数量 */
+const MAX_VISIBLE = 3;
+let nextId = 0;
+/**
+ * Toast 队列 composable
+ * 管理 toast 的增删、自动关闭定时器与 Promise 模式
+ */
+export function useToast() {
+  const toasts = ref<ToastItem[]>([]);
+  const timers = new Map<number, ReturnType<typeof setTimeout>>();
+  /**
+   * 展示一条 toast，返回 id
+   */
+  const show = (options: ToastShowOptions): number => {
+    const id = nextId++;
+    const type = options.type ?? 'info';
+    const duration = options.duration ?? DEFAULT_DURATIONS[type];
+    const item: ToastItem = {
+      id,
+      type,
+      title: options.title,
+      message: options.message,
+      duration,
+      createdAt: Date.now(),
+    };
+    toasts.value.push(item);
+    // enforce max visible — remove oldest (non-loading) if exceeding limit
+    while (toasts.value.length > MAX_VISIBLE) {
+      const oldest = toasts.value.find(t => t.type !== 'loading');
+      if (oldest) {
+        dismiss(oldest.id);
+      } else {
+        // all are loading, remove the very first
+        dismiss(toasts.value[0].id);
+      }
+    }
+    if (duration > 0) {
+      const timer = setTimeout(() => dismiss(id), duration);
+      timers.set(id, timer);
+    }
+    return id;
+  };
+  /**
+   * 按 id 移除一条 toast
+   */
+  const dismiss = (id: number): void => {
+    const idx = toasts.value.findIndex(t => t.id === id);
+    if (idx !== -1) {
+      toasts.value.splice(idx, 1);
+    }
+    const timer = timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.delete(id);
+    }
+  };
+  /**
+   * 将 stage 配置标准化为 { title, message }
+   */
+  function normalizeStage(stage: string | { title: string; message?: string }): { title: string; message?: string } {
+    if (typeof stage === 'string') {
+      return { title: stage };
+    }
+    return stage;
+  }
+  /**
+   * Promise toast pattern:
+   *   - 立即展示 loading toast
+   *   - resolve → 替换为 success toast
+   *   - reject → 替换为 error toast
+   */
+  const promise = <T>(
+    p: Promise<T>,
+    options: ToastPromiseOptions<T>,
+  ): Promise<T> => {
+    const loadingStage = normalizeStage(options.loading);
+    const loadingId = show({
+      type: 'loading',
+      title: loadingStage.title,
+      message: loadingStage.message,
+    });
+    return p.then(
+      (data) => {
+        dismiss(loadingId);
+        const raw = typeof options.success === 'function' ? options.success(data) : options.success;
+        const successStage = normalizeStage(raw);
+        show({
+          type: 'success',
+          title: successStage.title,
+          message: successStage.message,
+        });
+        return data;
+      },
+      (err: unknown) => {
+        dismiss(loadingId);
+        const raw = typeof options.error === 'function' ? options.error(err) : options.error;
+        const errorStage = normalizeStage(raw);
+        show({
+          type: 'error',
+          title: errorStage.title,
+          message: errorStage.message,
+        });
+        throw err;
+      },
+    );
+  };
+  return { toasts, show, dismiss, promise };
+}

package/compositions/tooltip/index.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * @description tooltip compositions barrel export
+ * @author 阿怪
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useTooltip, type TooltipPlacement, type TooltipPositionData } from './useTooltip';

package/compositions/tooltip/useTooltip.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * @description tooltip composable re-export from component layer
+ * @author 阿怪
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useTooltip } from '../../components/base/tooltip/useTooltip';
+export type { TooltipPlacement, TooltipPositionData } from '../../components/base/tooltip/useTooltip';

package/dist/components/base/image/index.d.ts CHANGED Viewed

@@ -3,5 +3,5 @@ export declare const ImageCore: {
     props: import('../../types/props').MCOPO<import('./props').ImageProps>;
     useImage: typeof useImage;
 };
-export type { ImageProps, ImageEvents } from './props';
-export type { ImageLoadStatus } from './useImage';
+export type { ImageProps, ImageEvents, PreviewItem, PreviewSrcListItem } from './props';
+export type { ImageLoadStatus, NormalizedPreviewItem } from './useImage';

package/dist/components/base/image/useImage.d.ts CHANGED Viewed

@@ -1,12 +1,19 @@
 import { ImageProps } from './props';
 /** 图片加载状态 */
 export type ImageLoadStatus = 'loading' | 'loaded' | 'error';
+/** 正规化后的预览项 */
+export type NormalizedPreviewItem = {
+    src: string;
+    type: 'image' | 'video';
+};
 export declare function useImage(props: Required<ImageProps>, emit: (event: 'load' | 'error' | 'switch', payload: Event | number) => void): {
     status: import('vue').Ref<ImageLoadStatus, ImageLoadStatus>;
     previewVisible: import('vue').Ref<boolean, boolean>;
     previewIndex: import('vue').Ref<number, number>;
     previewScale: import('vue').Ref<number, number>;
     previewRotate: import('vue').Ref<number, number>;
+    currentPreviewItem: import('vue').ComputedRef<NormalizedPreviewItem>;
+    currentPreviewIsVideo: import('vue').ComputedRef<boolean>;
     handleLoad: (e: Event) => void;
     handleError: (e: Event) => void;
     openPreview: () => void;

package/dist/components/base/tooltip/index.d.ts CHANGED Viewed

@@ -4,3 +4,4 @@ export declare const TooltipCore: {
     useTooltip: typeof useTooltip;
 };
 export type { TooltipProps } from './props';
+export type { TooltipPlacement, TooltipPositionData } from './useTooltip';

package/dist/components/base/tooltip/useTooltip.d.ts CHANGED Viewed

@@ -1,25 +1,28 @@
+import { Placement } from '../../../compositions/popper/usePopper';
 import { TooltipProps } from './props';
-export type TooltipStyle = {
-    position: string;
-    left: string;
-    top: string;
-    zIndex: string;
+export type TooltipPlacement = Placement;
+export type TooltipPositionData = {
+    style: Record<string, string>;
+    arrowStyle: Record<string, string>;
+    placement: Placement;
 };
 export declare function useTooltip(props: Required<TooltipProps>): {
     visible: import('vue').Ref<boolean, boolean>;
-    tooltipStyle: import('vue').Ref<Record<string, never> | {
-        position: string;
-        left: string;
-        top: string;
-        zIndex: string;
-    }, TooltipStyle | Record<string, never> | {
-        position: string;
-        left: string;
-        top: string;
-        zIndex: string;
-    }>;
+    positionData: import('vue').Ref<{
+        style: Record<string, string>;
+        arrowStyle: Record<string, string>;
+        placement: Placement;
+    } | null, TooltipPositionData | {
+        style: Record<string, string>;
+        arrowStyle: Record<string, string>;
+        placement: Placement;
+    } | null>;
     triggerRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     tooltipRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
-    show: () => Promise<void>;
+    arrowRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    tooltipId: string;
+    show: () => void;
     hide: () => void;
+    hideImmediate: () => void;
+    initPopper: () => void;
 };

package/dist/compositions/commandPalette/index.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * @description commandPalette composition barrel export
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useCommandPalette } from './useCommandPalette';
+export type { UseCommandPaletteReturn } from './useCommandPalette';
+export type { Command } from './types';

package/dist/compositions/commandPalette/types.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { VNode } from 'vue';
+/**
+ * A single command registered in the palette.
+ */
+export interface Command {
+    /** Unique identifier */
+    id: string;
+    /** Display label (also used for search) */
+    label: string;
+    /** Optional icon render function */
+    icon?: () => VNode;
+    /** Additional search terms beyond the label */
+    keywords?: string[];
+    /** Grouping category (e.g. "Navigation", "Actions") */
+    group?: string;
+    /** Shortcut hint text displayed on the right side of the item */
+    shortcut?: string;
+    /** Callback executed when the command is selected */
+    action: () => void;
+}

package/dist/compositions/commandPalette/useCommandPalette.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import { Ref, ComputedRef } from 'vue';
+import { Command } from './types';
+export interface UseCommandPaletteReturn {
+    /** Whether the palette is open */
+    isOpen: Ref<boolean>;
+    /** Current search query */
+    query: Ref<string>;
+    /** Index of the currently highlighted item */
+    activeIndex: Ref<number>;
+    /** All registered commands */
+    commands: Ref<Command[]>;
+    /** Filtered commands based on query */
+    filtered: ComputedRef<Command[]>;
+    /** Open the palette */
+    open: () => void;
+    /** Close the palette */
+    close: () => void;
+    /** Toggle open/close */
+    toggle: () => void;
+    /** Register a command */
+    registerCommand: (cmd: Command) => void;
+    /** Unregister a command by id */
+    unregisterCommand: (id: string) => void;
+    /** Execute the command at a given index in the filtered list, then close */
+    execute: (index: number) => void;
+}
+/**
+ * CommandPalette composable
+ *
+ * Provides reactive state for opening, searching, and executing commands.
+ */
+export declare function useCommandPalette(): UseCommandPaletteReturn;

package/dist/compositions/contextMenu/index.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/**
+ * @description context menu composables barrel export
+ * @author kine-design
+ * @date 2026/5/22
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+export { useContextMenu } from './useContextMenu';
+export type { MenuItem } from './types';

package/dist/compositions/contextMenu/types.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { VNode } from 'vue';
+export interface MenuItem {
+    key: string;
+    label: string;
+    icon?: () => VNode;
+    action: () => void;
+    visible?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+    children?: MenuItem[];
+    separator?: boolean;
+}