lumen-plus 0.0.1

package/dist/components/Menu/Menu.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import { ChevronRight, ChevronDown } from 'lucide'
+    import { onMount, onDestroy } from 'svelte'
+    import { slide, fade, scale } from 'svelte/transition'
+    import type { MenuItem, MenuProps } from './types'
+
+    type Props = MenuProps
+
+    let {
+        items = [],
+        activeId,
+        mode = 'vertical',
+        collapsed = false,
+        accordion = false,
+        class: cls = '',
+        onselect,
+        ...attrs
+    }: Props = $props()
+
+    // 展开的子菜单 ID 集合
+    let openIds = $state(new Set<string | number>())
+    // 悬停的菜单项 ID 集合（用于水平模式和折叠模式的弹出菜单）
+    let hoverIds = $state(new Set<string | number>())
+    // 悬停关闭定时器
+    const closeTimers = new Map<string | number, ReturnType<typeof setTimeout>>()
+    // 菜单根元素引用
+    let menuRef: HTMLElement | null = $state(null)
+
+    // 获取菜单项 ID
+    const getItemId = (item: MenuItem): string | number => item.id ?? item.label
+
+    // 构建父级映射表
+    const buildParentMap = (list: MenuItem[]): Map<string | number, string | number> => {
+        const map = new Map<string | number, string | number>()
+        const walk = (items: MenuItem[], parentId?: string | number): void => {
+            for (const item of items) {
+                const id = getItemId(item)
+                if (parentId !== undefined) map.set(id, parentId)
+                if (item.children?.length) walk(item.children, id)
+            }
+        }
+        walk(list)
+        return map
+    }
+
+    // 获取祖先 ID 列表
+    const getAncestorIds = (id: string | number, parentMap: Map<string | number, string | number>): (string | number)[] => {
+        const result: (string | number)[] = []
+        let current: string | number | undefined = id
+        while (current !== undefined) {
+            const parent = parentMap.get(current)
+            if (parent === undefined) break
+            result.push(parent)
+            current = parent
+        }
+        return result
+    }
+
+    // 判断是否选中
+    const isActive = (item: MenuItem): boolean => activeId === getItemId(item)
+
+    // 判断是否展开（垂直模式）
+    const isOpen = (item: MenuItem): boolean => openIds.has(getItemId(item))
+
+    // 判断是否悬停（水平/折叠模式）
+    const isHover = (item: MenuItem): boolean => hoverIds.has(getItemId(item))
+
+    // 判断子级是否有选中项
+    const hasActiveChild = (item: MenuItem): boolean => {
+        if (!item.children) return false
+        return item.children.some((child) => isActive(child) || hasActiveChild(child))
+    }
+
+    // 判断是否应该显示子菜单
+    const shouldShowSubmenu = (item: MenuItem): boolean => {
+        if (!item.children?.length) return false
+        if (mode === 'horizontal' || collapsed) return isHover(item)
+        return isOpen(item)
+    }
+
+    // 切换子菜单展开/收起
+    const toggleSubmenu = (id: string | number): void => {
+        const next = new Set(openIds)
+        if (next.has(id)) {
+            next.delete(id)
+        } else {
+            if (accordion) next.clear()
+            next.add(id)
+        }
+        openIds = next
+    }
+
+    // 处理菜单项点击
+    const handleItemClick = (item: MenuItem, e: MouseEvent | KeyboardEvent): void => {
+        e.stopPropagation()
+        if (item.disabled) return
+
+        const id = getItemId(item)
+
+        if (item.children?.length) {
+            // 有子菜单：垂直非折叠模式下切换展开
+            if (mode === 'vertical' && !collapsed) {
+                toggleSubmenu(id)
+            }
+        } else {
+            // 无子菜单：触发回调，由外部控制选中状态
+            onselect?.(id, item)
+            // 水平或折叠模式下关闭弹出菜单
+            if (mode === 'horizontal' || collapsed) {
+                hoverIds = new Set()
+            }
+        }
+    }
+
+    // 处理箭头点击
+    const handleArrowClick = (item: MenuItem, e: MouseEvent | KeyboardEvent): void => {
+        e.stopPropagation()
+        if (item.disabled || !item.children?.length) return
+        if (mode !== 'vertical' || collapsed) return
+        toggleSubmenu(getItemId(item))
+    }
+
+    // 处理鼠标进入
+    const handleMouseEnter = (item: MenuItem): void => {
+        if (!(mode === 'horizontal' || collapsed) || !item.children?.length) return
+        const id = getItemId(item)
+        const timer = closeTimers.get(id)
+        if (timer) {
+            clearTimeout(timer)
+            closeTimers.delete(id)
+        }
+        hoverIds = new Set(hoverIds).add(id)
+    }
+
+    // 处理鼠标离开
+    const handleMouseLeave = (item: MenuItem): void => {
+        if (!(mode === 'horizontal' || collapsed) || !item.children?.length) return
+        const id = getItemId(item)
+        const timer = setTimeout(() => {
+            const next = new Set(hoverIds)
+            next.delete(id)
+            hoverIds = next
+            closeTimers.delete(id)
+        }, 150)
+        closeTimers.set(id, timer)
+    }
+
+    // 处理键盘事件
+    const handleKeydown = (item: MenuItem, e: KeyboardEvent): void => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            handleItemClick(item, e)
+        }
+    }
+
+    // 处理点击外部
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (mode === 'vertical' && !collapsed) return
+        if (menuRef && !menuRef.contains(e.target as Node)) {
+            hoverIds = new Set()
+        }
+    }
+
+    // 用于追踪上一次处理过的 activeId，避免重复处理
+    let lastProcessedActiveId: string | number | undefined = undefined
+
+    // 初始化展开状态
+    const expandToActive = () => {
+        if (mode !== 'vertical' || collapsed || activeId === undefined) return
+        if (activeId === lastProcessedActiveId) return
+        lastProcessedActiveId = activeId
+        
+        const parentMap = buildParentMap(items)
+        const ancestors = getAncestorIds(activeId, parentMap)
+        if (ancestors.length > 0) {
+            // 合并现有展开项和新的祖先项
+            const next = accordion ? new Set(ancestors) : new Set([...openIds, ...ancestors])
+            openIds = next
+        }
+    }
+
+    onMount(() => {
+        expandToActive()
+        document.addEventListener('click', handleClickOutside)
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('click', handleClickOutside)
+        closeTimers.forEach((t) => clearTimeout(t))
+    })
+
+    // CSS 类
+    const classes = $derived(
+        `lm-menu lm-menu--${mode}${collapsed ? ' is-collapsed' : ''}${cls ? ` ${cls}` : ''}`
+    )
+
+    // 箭头图标
+    const ArrowIcon = $derived(mode === 'horizontal' ? ChevronDown : ChevronRight)
+</script>
+
+{#snippet menuItem(item: MenuItem, depth: number = 0)}
+    {@const hasChildren = !!item.children?.length}
+    {@const showSubmenu = shouldShowSubmenu(item)}
+    {@const iconSize = depth === 0 ? 18 : 16}
+    <li
+        class="lm-menu__item"
+        class:is-active={isActive(item)}
+        class:has-active-child={hasActiveChild(item)}
+        class:is-disabled={item.disabled}
+        class:has-submenu={hasChildren}
+        class:is-open={isOpen(item) || isHover(item)}
+        onmouseenter={() => handleMouseEnter(item)}
+        onmouseleave={() => handleMouseLeave(item)}
+    >
+        <div
+            class="lm-menu__item-content"
+            role="menuitem"
+            tabindex={item.disabled ? -1 : 0}
+            aria-haspopup={hasChildren ? 'true' : undefined}
+            aria-expanded={hasChildren ? showSubmenu : undefined}
+            onclick={(e: MouseEvent) => handleItemClick(item, e)}
+            onkeydown={(e: KeyboardEvent) => handleKeydown(item, e)}
+        >
+            {#if item.icon}
+                <span class="lm-menu__item-icon">
+                    <Icon icon={item.icon} size={iconSize} />
+                </span>
+            {/if}
+            <span class="lm-menu__item-label">{item.label}</span>
+            {#if hasChildren}
+                <button
+                    type="button"
+                    class="lm-menu__item-arrow"
+                    class:is-open={showSubmenu}
+                    tabindex={mode === 'vertical' && !collapsed ? 0 : -1}
+                    aria-label="Toggle submenu"
+                    onclick={(e: MouseEvent) => handleArrowClick(item, e)}
+                >
+                    <Icon icon={ArrowIcon} size={14} />
+                </button>
+            {/if}
+        </div>
+
+        {#if hasChildren && showSubmenu}
+            {#if mode === 'horizontal' || collapsed}
+                <ul
+                    class="lm-menu__popup{depth > 0 ? ' lm-menu__popup--nested' : ''}"
+                    role="menu"
+                    transition:scale|global={{ duration: 150, start: 0.95, opacity: 0 }}
+                >
+                    {#each item.children as child (getItemId(child))}
+                        {@render menuItem(child, depth + 1)}
+                    {/each}
+                </ul>
+            {:else}
+                <ul
+                    class="lm-menu__submenu"
+                    role="menu"
+                    transition:slide|global={{ duration: 200 }}
+                >
+                    {#each item.children as child (getItemId(child))}
+                        {@render menuItem(child, depth + 1)}
+                    {/each}
+                </ul>
+            {/if}
+        {/if}
+    </li>
+{/snippet}
+
+<nav bind:this={menuRef} class={classes} role="menu" {...attrs}>
+    <ul class="lm-menu__list" role="menubar">
+        {#each items as item (getItemId(item))}
+            {#if item.group && (items.indexOf(item) === 0 || items[items.indexOf(item) - 1]?.group !== item.group)}
+                <li class="lm-menu__group" role="presentation">
+                    {#if !collapsed}{item.group}{/if}
+                </li>
+            {/if}
+            {@render menuItem(item, 0)}
+        {/each}
+    </ul>
+</nav>
+

package/dist/components/Menu/Menu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { MenuProps } from './types';
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,4 @@
+import Menu from './Menu.svelte';
+export { Menu };
+export type { MenuProps, MenuItem } from './types';
+export default Menu;

package/dist/components/Menu/index.js

@@ -0,0 +1,3 @@
+import Menu from './Menu.svelte';
+export { Menu };
+export default Menu;

package/dist/components/Menu/types.d.ts

@@ -0,0 +1,18 @@
+import type { IconNode } from 'lucide';
+export interface MenuItem {
+    id?: string | number;
+    label: string;
+    icon?: IconNode;
+    children?: MenuItem[];
+    disabled?: boolean;
+    group?: string;
+}
+export interface MenuProps {
+    items?: MenuItem[];
+    activeId?: string | number;
+    mode?: 'vertical' | 'horizontal';
+    collapsed?: boolean;
+    accordion?: boolean;
+    class?: string;
+    onselect?: (id: string | number, item: MenuItem) => void;
+}

package/dist/components/Menu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Message/MessageBox.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import Icon from '../Icon'
+    import { CheckCircle, AlertTriangle, XCircle, Info, X } from 'lucide'
+    import type { IconNode } from 'lucide'
+    import type { MessageItem, MessageType, CloseMessageFn } from './types'
+
+    interface Props {
+        messages: MessageItem[]
+        onClose: CloseMessageFn
+    }
+
+    let { messages = $bindable([]), onClose }: Props = $props()
+
+    export const setMessages = (next: MessageItem[]): void => {
+        messages = next
+    }
+
+    /** 图标映射（静态，避免重复创建） */
+    const ICON_MAP: Record<MessageType, IconNode> = {
+        success: CheckCircle,
+        warning: AlertTriangle,
+        error: XCircle,
+        info: Info,
+    }
+
+    /** 根据消息类型获取对应图标 */
+    const getIcon = (type?: MessageType): IconNode => ICON_MAP[type || 'info']
+
+    /** 计算每个消息的偏移量 */
+    const getOffset = (index: number): number => {
+        const baseOffset = messages[0]?.offset ?? 20
+        let offset = baseOffset
+        for (let i = 0; i < index; i++) {
+            if (messages[i]?.visible) {
+                offset += 60
+            }
+        }
+        return offset
+    }
+</script>
+
+{#each messages as message, index (message.id)}
+    {#if message.visible}
+        <div class="lm-message lm-message--{message.type}" class:is-center={message.center} class:is-closable={message.showClose} style="top: {getOffset(index)}px;">
+            <Icon icon={getIcon(message.type)} size={16} class="lm-message__icon" />
+            <div class="lm-message__content">
+                {message.message}
+            </div>
+            {#if message.showClose}
+                <button type="button" class="lm-message__close" onclick={() => onClose(message.id)} aria-label="Close">
+                    <Icon icon={X} size={14} />
+                </button>
+            {/if}
+        </div>
+    {/if}
+{/each}

package/dist/components/Message/MessageBox.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MessageItem, CloseMessageFn } from './types';
+interface Props {
+    messages: MessageItem[];
+    onClose: CloseMessageFn;
+}
+declare const MessageBox: import("svelte").Component<Props, {
+    setMessages: (next: MessageItem[]) => void;
+}, "messages">;
+type MessageBox = ReturnType<typeof MessageBox>;
+export default MessageBox;

package/dist/components/Message/index.d.ts

@@ -0,0 +1,15 @@
+import type { MessageOptions, MessageItem, MessageType, CloseMessageFn } from './types';
+/** 移除消息 */
+declare const removeMessage: CloseMessageFn;
+/** Message 主函数 */
+declare const Message: {
+    (options: MessageOptions | string): void;
+    success(message: string, options?: Omit<MessageOptions, "message" | "type">): void;
+    warning(message: string, options?: Omit<MessageOptions, "message" | "type">): void;
+    error(message: string, options?: Omit<MessageOptions, "message" | "type">): void;
+    info(message: string, options?: Omit<MessageOptions, "message" | "type">): void;
+    closeAll(): void;
+};
+export { Message, removeMessage };
+export type { MessageOptions, MessageItem, MessageType, CloseMessageFn };
+export default Message;

package/dist/components/Message/index.js

@@ -0,0 +1,102 @@
+import { mount, unmount } from 'svelte';
+import MessageBox from './MessageBox.svelte';
+/** 消息队列 */
+let messages = [];
+/** 消息容器 DOM 元素 */
+let messageContainer = null;
+/** MessageBox 组件实例（mount() 返回 exports） */
+let messageBoxInstance = null;
+/** 消息 ID 计数器 */
+let idCounter = 0;
+/** 更新消息列表 */
+const updateMessages = (newMessages) => {
+    messages = newMessages;
+    if (messageBoxInstance) {
+        messageBoxInstance.setMessages?.(messages);
+    }
+};
+/** 移除消息 */
+const removeMessage = (id) => {
+    const index = messages.findIndex((m) => m.id === id);
+    if (index > -1) {
+        const message = messages[index];
+        message.visible = false;
+        updateMessages([...messages]);
+        setTimeout(() => {
+            updateMessages(messages.filter((m) => m.id !== id));
+            message.onClose?.();
+            // 如果没有消息了，清理实例
+            if (messages.length === 0 && messageBoxInstance && messageContainer) {
+                unmount(messageBoxInstance);
+                document.body.removeChild(messageContainer);
+                messageContainer = null;
+                messageBoxInstance = null;
+            }
+        }, 300);
+    }
+};
+/** 创建容器和实例 */
+const ensureInstance = () => {
+    if (!messageContainer) {
+        messageContainer = document.createElement('div');
+        messageContainer.className = 'lm-message-container';
+        document.body.appendChild(messageContainer);
+        messageBoxInstance = mount(MessageBox, {
+            target: messageContainer,
+            props: {
+                messages,
+                onClose: removeMessage,
+            },
+        });
+    }
+};
+/** 添加消息 */
+const addMessage = (options) => {
+    ensureInstance();
+    const id = ++idCounter;
+    const item = {
+        id,
+        type: 'info',
+        duration: 3000,
+        showClose: false,
+        center: false,
+        offset: 20,
+        visible: true,
+        ...options,
+    };
+    updateMessages([...messages, item]);
+    // 自动关闭
+    if (item.duration && item.duration > 0) {
+        setTimeout(() => {
+            removeMessage(id);
+        }, item.duration);
+    }
+};
+/** Message 主函数 */
+const Message = (options) => {
+    const opts = typeof options === 'string' ? { message: options } : options;
+    addMessage(opts);
+};
+/** 显示成功消息 */
+Message.success = (message, options) => {
+    addMessage({ ...options, message, type: 'success' });
+};
+/** 显示警告消息 */
+Message.warning = (message, options) => {
+    addMessage({ ...options, message, type: 'warning' });
+};
+/** 显示错误消息 */
+Message.error = (message, options) => {
+    addMessage({ ...options, message, type: 'error' });
+};
+/** 显示信息消息 */
+Message.info = (message, options) => {
+    addMessage({ ...options, message, type: 'info' });
+};
+/** 关闭所有消息 */
+Message.closeAll = () => {
+    messages.forEach((m) => removeMessage(m.id));
+};
+// 导出
+export { Message, removeMessage };
+export default Message;

package/dist/components/Message/types.d.ts

@@ -0,0 +1,28 @@
+/** 消息类型 */
+export type MessageType = 'success' | 'warning' | 'error' | 'info';
+/** 消息配置选项 */
+export interface MessageOptions {
+    /** 消息内容 */
+    message: string;
+    /** 消息类型 */
+    type?: MessageType;
+    /** 显示时间（毫秒），设为 0 则不会自动关闭 */
+    duration?: number;
+    /** 是否显示关闭按钮 */
+    showClose?: boolean;
+    /** 文字是否居中 */
+    center?: boolean;
+    /** 距离顶部的偏移量 */
+    offset?: number;
+    /** 关闭时的回调函数 */
+    onClose?: () => void;
+}
+/** 消息项（内部使用） */
+export interface MessageItem extends MessageOptions {
+    /** 消息唯一标识 */
+    id: number;
+    /** 是否可见 */
+    visible: boolean;
+}
+/** 关闭消息的回调函数类型 */
+export type CloseMessageFn = (id: number) => void;

package/dist/components/Message/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/MessageBox/MessageBox.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import Dialog from '../../Dialog/src'
+    import Icon from '../Icon'
+    import { CheckCircle, AlertTriangle, XCircle, Info, X } from 'lucide'
+    import type { IconNode } from 'lucide'
+    import type { MessageBoxOptions, MessageBoxType } from './types'
+
+    interface Props {
+        zIndex?: number
+        showClose?: boolean
+    }
+
+    let { zIndex = 1000, showClose = false }: Props = $props()
+
+    let visible = $state(false)
+    let options = $state<MessageBoxOptions | null>(null)
+
+    const ICON_MAP: Record<MessageBoxType, IconNode> = {
+        success: CheckCircle,
+        warning: AlertTriangle,
+        error: XCircle,
+        info: Info,
+    }
+
+    const getIcon = (type?: MessageBoxType): IconNode => ICON_MAP[type || 'info']
+
+    const show = (opts: MessageBoxOptions): void => {
+        options = opts
+        visible = true
+    }
+
+    const hide = (): void => {
+        visible = false
+        options = null
+    }
+
+    const handleOk = (): void => {
+        options?.onOk?.()
+        hide()
+    }
+
+    const handleCancel = (): void => {
+        options?.onCancel?.()
+        hide()
+    }
+
+    $effect(() => {
+        const handler = (event: CustomEvent<MessageBoxOptions>): void => {
+            show(event.detail)
+        }
+        window.addEventListener('lumen-messagebox', handler as EventListener)
+        return () => window.removeEventListener('lumen-messagebox', handler as EventListener)
+    })
+</script>
+
+{#if visible && options}
+    <div class="lm-messagebox__wrapper" style="z-index: {zIndex};">
+        <Dialog bind:visible class="lm-messagebox" {showClose}>
+            <div class="lm-messagebox__header">
+                {#if options.type}
+                    <Icon icon={getIcon(options.type)} class="lm-messagebox__icon" />
+                {/if}
+                {#if options.title}
+                    <h3 class="lm-messagebox__title">{options.title}</h3>
+                {/if}
+                <button type="button" class="lm-messagebox__close" onclick={hide} aria-label="Close">
+                    <Icon icon={X} size={18} />
+                </button>
+            </div>
+            <div class="lm-messagebox__body">
+                {options.content}
+            </div>
+            <div class="lm-messagebox__footer">
+                {#if options.cancelText !== undefined}
+                    <button class="lm-button lm-button--default" onclick={handleCancel}>
+                        {options.cancelText || 'Cancel'}
+                    </button>
+                {/if}
+                <button class="lm-button lm-button--primary" onclick={handleOk}>
+                    {options.okText || 'OK'}
+                </button>
+            </div>
+        </Dialog>
+    </div>
+{/if}

package/dist/components/MessageBox/MessageBox.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    zIndex?: number;
+    showClose?: boolean;
+}
+declare const MessageBox: import("svelte").Component<Props, {}, "">;
+type MessageBox = ReturnType<typeof MessageBox>;
+export default MessageBox;

package/dist/components/MessageBox/index.d.ts

@@ -0,0 +1,4 @@
+import MessageBox from './MessageBox.svelte';
+export { MessageBox };
+export type { MessageBoxOptions, MessageBoxType, CloseMessageBoxFn } from './types';
+export default MessageBox;

package/dist/components/MessageBox/index.js

@@ -0,0 +1,3 @@
+import MessageBox from './MessageBox.svelte';
+export { MessageBox };
+export default MessageBox;

package/dist/components/MessageBox/types.d.ts

@@ -0,0 +1,21 @@
+/** 消息框类型 */
+export type MessageBoxType = 'info' | 'success' | 'warning' | 'error';
+/** 消息框配置选项 */
+export interface MessageBoxOptions {
+    /** 标题 */
+    title?: string;
+    /** 内容 */
+    content: string;
+    /** 类型 */
+    type?: MessageBoxType;
+    /** 确认按钮文字 */
+    okText?: string;
+    /** 取消按钮文字 */
+    cancelText?: string;
+    /** 确认回调 */
+    onOk?: () => void;
+    /** 取消回调 */
+    onCancel?: () => void;
+}
+/** 关闭消息框的回调函数类型 */
+export type CloseMessageBoxFn = () => void;

package/dist/components/MessageBox/types.js

@@ -0,0 +1 @@
+export {};