wok-ui-ext 0.1.0

package/dist/list/list-item.js

@@ -0,0 +1,51 @@
+import { DivModule } from 'wok-ui';
+/**
+ * 列表项
+ *
+ * 配合 List 使用的标准列表项，包含标题、描述和额外操作区。
+ *
+ * @example
+ * ```ts
+ * new ListItem({
+ *   title: '用户名称',
+ *   description: 'user@example.com',
+ *   extra: new Tag({ text: '管理员' })
+ * })
+ * ```
+ */
+export class ListItem extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-list-item');
+        this.opts = opts;
+        // 左侧内容区
+        const body = document.createElement('div');
+        body.style.cssText = 'flex:1;min-width:0';
+        // 标题
+        const titleDiv = document.createElement('div');
+        titleDiv.style.cssText =
+            'font-size:var(--font-size-normal);color:var(--text-primary);font-weight:500';
+        if (typeof opts.title === 'string') {
+            titleDiv.textContent = opts.title;
+        }
+        body.appendChild(titleDiv);
+        // 描述
+        if (opts.description) {
+            const descDiv = document.createElement('div');
+            descDiv.style.cssText =
+                'font-size:var(--font-size-small);color:var(--text-tertiary);margin-top:2px';
+            if (typeof opts.description === 'string') {
+                descDiv.textContent = opts.description;
+            }
+            body.appendChild(descDiv);
+        }
+        this.addChild({
+            children: body
+        });
+        // 右侧额外内容
+        if (opts.extra) {
+            this.addChild({
+                children: opts.extra
+            });
+        }
+    }
+}

package/dist/list/style.css

@@ -0,0 +1,20 @@
+.wok-ui-ext-list.bordered {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm);
+}
+.wok-ui-ext-list.small .wok-ui-ext-list-item {
+  padding: 8px 12px;
+}
+.wok-ui-ext-list.large .wok-ui-ext-list-item {
+  padding: 16px 20px;
+}
+.wok-ui-ext-list .wok-ui-ext-list-item {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-light);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.wok-ui-ext-list .wok-ui-ext-list-item:last-child {
+  border-bottom: none;
+}

package/dist/loading/index.d.ts

@@ -0,0 +1,10 @@
+import './style.less';
+/**
+ * 显示全屏 loading
+ *
+ */
+export declare function showLoading(msg?: string): void;
+/**
+ * 关闭全屏 loading
+ */
+export declare function hideLoading(): void;

package/dist/loading/index.js

@@ -0,0 +1,46 @@
+import { DivModule } from 'wok-ui';
+import { getWokUiExtI18n } from '../i18n';
+import { IconCircleNotch } from '../icons';
+import './style.css';
+/**
+ * <div class="wok-ui-ext-fullscreen-loading">
+ * <span class="wok-ui-ext-loading-spinner"></span>
+ * <span>Loading...</span>
+ * </div>
+ */
+class FullscreenLoading extends DivModule {
+    constructor(text) {
+        super('wok-ui-ext-fullscreen-loading');
+        this.addChild({
+            classNames: 'wok-ui-ext-loading-spinner',
+            children: new IconCircleNotch()
+        });
+        if (text) {
+            this.addChild({
+                tag: 'span',
+                innerText: text
+            });
+        }
+    }
+}
+let fullscreenLoadingInstance;
+/**
+ * 显示全屏 loading
+ *
+ */
+export function showLoading(msg) {
+    if (fullscreenLoadingInstance) {
+        hideLoading();
+    }
+    fullscreenLoadingInstance = new FullscreenLoading(msg || getWokUiExtI18n().buildMsg('loading-text'));
+    fullscreenLoadingInstance.mount(document.body);
+}
+/**
+ * 关闭全屏 loading
+ */
+export function hideLoading() {
+    if (fullscreenLoadingInstance) {
+        fullscreenLoadingInstance.destroy();
+        fullscreenLoadingInstance = undefined;
+    }
+}

package/dist/loading/style.css

@@ -0,0 +1,48 @@
+/* 全屏加载 */
+.wok-ui-ext-fullscreen-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* 初始完全透明、无模糊，动画结束后停留在最终状态 */
+  background: transparent;
+  backdrop-filter: blur(0);
+  /* 动画：持续 2 秒，结束时保持最终状态 */
+  animation: loading-bg-fade 2s forwards;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  flex-direction: column;
+  color: white;
+  gap: 16px;
+  display: flex;
+  cursor: wait;
+}
+.wok-ui-ext-fullscreen-loading .wok-ui-ext-loading-spinner {
+  display: flex;
+  font-size: 3rem;
+  color: var(--color-primary);
+  animation: spin 1s linear infinite;
+  filter: drop-shadow(0 0 10px var(--color-primary));
+}
+.wok-ui-ext-fullscreen-loading span {
+  font-size: var(--font-size-title);
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+/* 背景与模糊渐变动画 */
+@keyframes loading-bg-fade {
+  to {
+    background: rgba(8, 20, 40, 0.7);
+    backdrop-filter: blur(5px);
+  }
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/dist/menu/index.d.ts

@@ -0,0 +1,38 @@
+import { DivModule } from 'wok-ui';
+import { MenuOptions } from './types';
+import './style.less';
+export type { MenuItemData, MenuOptions } from './types';
+/**
+ * 导航菜单。
+ *
+ * 垂直菜单，支持多级嵌套、图标、折叠模式。
+ * 适用于侧边栏导航。
+ *
+ * @example
+ * ```ts
+ * const menu = new Menu({
+ *   items: [
+ *     { key: 'dashboard', icon: new SvgIcon({ svgHtml: '...' }), label: '仪表盘' },
+ *     {
+ *       key: 'system', label: '系统设置',
+ *       children: [
+ *         { key: 'system-basic', label: '基本设置' },
+ *         { key: 'system-security', label: '安全设置' },
+ *       ]
+ *     },
+ *   ],
+ *   selectedKey: 'dashboard',
+ *   onClick: key => router.push(key)
+ * })
+ * ```
+ */
+export declare class Menu extends DivModule {
+    private nodes;
+    constructor(opts: MenuOptions);
+    /** 设置选中项 */
+    setSelectedKey(key: string): void;
+    /** 设置折叠模式 */
+    setCollapsed(collapsed: boolean): void;
+    /** 获取当前选中 key */
+    getSelectedKey(): string | undefined;
+}

package/dist/menu/index.js

@@ -0,0 +1,62 @@
+import { DivModule } from 'wok-ui';
+import { createItemModule } from './sub-menu';
+import './style.css';
+/**
+ * 导航菜单。
+ *
+ * 垂直菜单，支持多级嵌套、图标、折叠模式。
+ * 适用于侧边栏导航。
+ *
+ * @example
+ * ```ts
+ * const menu = new Menu({
+ *   items: [
+ *     { key: 'dashboard', icon: new SvgIcon({ svgHtml: '...' }), label: '仪表盘' },
+ *     {
+ *       key: 'system', label: '系统设置',
+ *       children: [
+ *         { key: 'system-basic', label: '基本设置' },
+ *         { key: 'system-security', label: '安全设置' },
+ *       ]
+ *     },
+ *   ],
+ *   selectedKey: 'dashboard',
+ *   onClick: key => router.push(key)
+ * })
+ * ```
+ */
+export class Menu extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-menu');
+        this.nodes = [];
+        if (opts.collapsed)
+            this.el.classList.add('wok-ui-ext-menu-collapsed');
+        const ctx = {
+            selectedKey: opts.selectedKey,
+            collapsed: opts.collapsed ?? false,
+            onClick: opts.onClick,
+            setSelectedKey: (key) => {
+                ctx.selectedKey = key;
+                this.nodes.forEach(n => n.setSelected(key));
+            }
+        };
+        opts.items.forEach(item => {
+            const node = createItemModule(item, 0, ctx);
+            this.nodes.push(node);
+            this.addChild(node);
+        });
+    }
+    /** 设置选中项 */
+    setSelectedKey(key) {
+        this.nodes.forEach(n => n.setSelected(key));
+    }
+    /** 设置折叠模式 */
+    setCollapsed(collapsed) {
+        this.el.classList.toggle('wok-ui-ext-menu-collapsed', collapsed);
+    }
+    /** 获取当前选中 key */
+    getSelectedKey() {
+        const el = this.el.querySelector('.wok-ui-ext-menu-item.selected');
+        return el?.dataset.key;
+    }
+}

package/dist/menu/leaf-item.d.ts

@@ -0,0 +1,12 @@
+import { DivModule } from 'wok-ui';
+import { MenuItemData, ItemContext } from './types';
+/**
+ * 叶子菜单项模块。
+ * @internal
+ */
+export declare class LeafItem extends DivModule {
+    private key;
+    constructor(item: MenuItemData, level: number, ctx: ItemContext);
+    /** 更新选中态 */
+    setSelected(sk?: string): void;
+}

package/dist/menu/leaf-item.js

@@ -0,0 +1,41 @@
+import { DivModule } from 'wok-ui';
+/**
+ * 叶子菜单项模块。
+ * @internal
+ */
+export class LeafItem extends DivModule {
+    constructor(item, level, ctx) {
+        const classes = ['wok-ui-ext-menu-item'];
+        if (item.disabled)
+            classes.push('disabled');
+        if (ctx.selectedKey === item.key)
+            classes.push('selected');
+        super(...classes);
+        this.key = item.key;
+        this.el.dataset.key = item.key;
+        if (level > 0)
+            this.el.dataset.level = String(level);
+        // 图标
+        this.addChild({
+            classNames: 'wok-ui-ext-menu-item-icon',
+            children: item.icon ?? []
+        });
+        // 标签
+        this.addChild({
+            classNames: 'wok-ui-ext-menu-item-label',
+            innerText: item.label
+        });
+        // 点击
+        if (!item.disabled) {
+            this.el.addEventListener('click', (e) => {
+                e.stopPropagation();
+                ctx.setSelectedKey(item.key);
+                ctx.onClick?.(item.key);
+            });
+        }
+    }
+    /** 更新选中态 */
+    setSelected(sk) {
+        this.el.classList.toggle('selected', sk === this.key);
+    }
+}

package/dist/menu/style.css

@@ -0,0 +1,117 @@
+.wok-ui-ext-menu {
+  background: var(--bg-card);
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.25s ease;
+  overflow: hidden;
+  user-select: none;
+  border-right: 1px solid var(--border-medium);
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  padding: 0 16px;
+  cursor: pointer;
+  transition: background var(--transition-speed), color var(--transition-speed);
+  color: var(--text-secondary);
+  gap: 12px;
+  white-space: nowrap;
+  position: relative;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item.selected {
+  color: var(--color-primary);
+  background: var(--bg-hover);
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item.selected::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 6px;
+  bottom: 6px;
+  width: 3px;
+  background: var(--color-primary);
+  border-radius: 0 3px 3px 0;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item.sub-active {
+  color: var(--text-primary);
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item.disabled:hover {
+  background: transparent;
+  color: var(--text-secondary);
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  font-size: 18px;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item-label {
+  flex: 1;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--text-placeholder);
+  transition: transform 0.2s ease;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item[data-level='1'] {
+  padding-left: 48px;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-item[data-level='2'] {
+  padding-left: 64px;
+}
+.wok-ui-ext-menu .wok-ui-ext-menu-submenu[data-level='1'] .wok-ui-ext-menu-item {
+  padding-left: 48px;
+}
+.wok-ui-ext-menu.wok-ui-ext-menu-collapsed {
+  width: 56px;
+}
+.wok-ui-ext-menu.wok-ui-ext-menu-collapsed .wok-ui-ext-menu-item {
+  justify-content: center;
+  padding: 0 8px;
+}
+.wok-ui-ext-menu.wok-ui-ext-menu-collapsed .wok-ui-ext-menu-item-label,
+.wok-ui-ext-menu.wok-ui-ext-menu-collapsed .wok-ui-ext-menu-item-arrow {
+  display: none;
+}
+.wok-ui-ext-menu.wok-ui-ext-menu-collapsed .wok-ui-ext-menu-submenu-children {
+  display: none !important;
+}
+.wok-ui-ext-menu.wok-ui-ext-menu-collapsed .wok-ui-ext-menu-item.selected::before {
+  left: auto;
+  right: 0;
+  width: 3px;
+}
+.wok-ui-ext-menu-submenu {
+  display: flex;
+  flex-direction: column;
+}
+.wok-ui-ext-menu-submenu .wok-ui-ext-menu-submenu-children {
+  overflow: hidden;
+  transition: display 0.2s ease;
+}
+.wok-ui-ext-menu-submenu + .wok-ui-ext-menu-submenu .wok-ui-ext-menu-item {
+  border-top: none;
+}

package/dist/menu/sub-menu.d.ts

@@ -0,0 +1,21 @@
+import { DivModule } from 'wok-ui';
+import { MenuItemData, ItemContext } from './types';
+import { LeafItem } from './leaf-item';
+/**
+ * 子菜单模块。
+ * @internal
+ */
+export declare class SubMenuComp extends DivModule {
+    private open;
+    private childNodes;
+    private headerEl;
+    private childrenContainerEl;
+    constructor(item: MenuItemData, level: number, ctx: ItemContext);
+    /** 更新选中态 */
+    setSelected(sk?: string): void;
+}
+/**
+ * 根据菜单项数据创建对应的菜单模块实例。
+ * @internal
+ */
+export declare function createItemModule(item: MenuItemData, level: number, ctx: ItemContext): LeafItem | SubMenuComp;

package/dist/menu/sub-menu.js

@@ -0,0 +1,85 @@
+import { DivModule } from 'wok-ui';
+import { getArrowSvg, hasSelectedDescendant } from './utils';
+import { LeafItem } from './leaf-item';
+/**
+ * 子菜单模块。
+ * @internal
+ */
+export class SubMenuComp extends DivModule {
+    constructor(item, level, ctx) {
+        super('wok-ui-ext-menu-submenu');
+        this.childNodes = [];
+        if (level > 0)
+            this.el.dataset.level = String(level);
+        this.open = hasSelectedDescendant(item, ctx.selectedKey);
+        // 头部
+        const headerClasses = ['wok-ui-ext-menu-item'];
+        if (this.open)
+            headerClasses.push('sub-active');
+        if (item.disabled)
+            headerClasses.push('disabled');
+        this.addChild({
+            classNames: headerClasses,
+            children: add => {
+                // 图标
+                add({
+                    classNames: 'wok-ui-ext-menu-item-icon',
+                    children: item.icon ?? []
+                });
+                // 标签
+                add({
+                    classNames: 'wok-ui-ext-menu-item-label',
+                    innerText: item.label
+                });
+                // 展开箭头
+                add({
+                    classNames: 'wok-ui-ext-menu-item-arrow',
+                    innerHTML: getArrowSvg(this.open)
+                });
+            }
+        });
+        // 子节点容器
+        this.addChild({
+            classNames: 'wok-ui-ext-menu-submenu-children',
+            style: { display: this.open ? '' : 'none' },
+            children: add => {
+                ;
+                (item.children || []).forEach(child => {
+                    const node = createItemModule(child, level + 1, ctx);
+                    this.childNodes.push(node);
+                    add(node);
+                });
+            }
+        });
+        // 通过 DOM 查找获取引用，用于后续操作
+        this.headerEl = this.el.querySelector('.wok-ui-ext-menu-item');
+        this.childrenContainerEl = this.el.querySelector('.wok-ui-ext-menu-submenu-children');
+        // 切换展开/收起
+        if (!item.disabled) {
+            this.headerEl.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.open = !this.open;
+                this.childrenContainerEl.style.display = this.open ? '' : 'none';
+                const arrow = this.headerEl.querySelector('.wok-ui-ext-menu-item-arrow');
+                if (arrow)
+                    arrow.innerHTML = getArrowSvg(this.open);
+            });
+        }
+    }
+    /** 更新选中态 */
+    setSelected(sk) {
+        this.childNodes.forEach(n => n.setSelected(sk));
+        const hasSelected = !!this.childrenContainerEl.querySelector('.wok-ui-ext-menu-item.selected');
+        this.headerEl.classList.toggle('sub-active', hasSelected);
+    }
+}
+/**
+ * 根据菜单项数据创建对应的菜单模块实例。
+ * @internal
+ */
+export function createItemModule(item, level, ctx) {
+    if (!item.children || item.children.length === 0) {
+        return new LeafItem(item, level, ctx);
+    }
+    return new SubMenuComp(item, level, ctx);
+}

package/dist/menu/types.d.ts

@@ -0,0 +1,36 @@
+import { Module } from 'wok-ui';
+/**
+ * 菜单项数据。
+ */
+export interface MenuItemData {
+    /** 唯一标识 */
+    key: string;
+    /** 图标模块（可选，传入 SvgIcon / RemoteSvgIcon 等 Module 实例） */
+    icon?: Module;
+    /** 显示文本 */
+    label: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子菜单项 */
+    children?: MenuItemData[];
+}
+/**
+ * 菜单配置选项。
+ */
+export interface MenuOptions {
+    /** 菜单数据 */
+    items: MenuItemData[];
+    /** 当前选中项 key */
+    selectedKey?: string;
+    /** 是否折叠（仅显示图标） */
+    collapsed?: boolean;
+    /** 点击菜单项回调 */
+    onClick?: (key: string) => void;
+}
+/** @internal 菜单内部上下文 */
+export interface ItemContext {
+    selectedKey?: string;
+    collapsed: boolean;
+    onClick?: (key: string) => void;
+    setSelectedKey: (key: string) => void;
+}

package/dist/menu/types.js

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

package/dist/menu/utils.d.ts

@@ -0,0 +1,11 @@
+import { MenuItemData } from './types';
+/**
+ * 子菜单箭头 SVG。
+ * @internal
+ */
+export declare function getArrowSvg(open: boolean): string;
+/**
+ * 检查指定菜单项是否有子节点被选中。
+ * @internal
+ */
+export declare function hasSelectedDescendant(item: MenuItemData, selectedKey?: string): boolean;

package/dist/menu/utils.js

@@ -0,0 +1,24 @@
+/**
+ * 子菜单箭头 SVG。
+ * @internal
+ */
+export function getArrowSvg(open) {
+    return open
+        ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><polyline points="6 9 12 15 18 9"></polyline></svg>`
+        : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+}
+/**
+ * 检查指定菜单项是否有子节点被选中。
+ * @internal
+ */
+export function hasSelectedDescendant(item, selectedKey) {
+    if (!selectedKey || !item.children)
+        return false;
+    return item.children.some(child => {
+        if (child.key === selectedKey)
+            return true;
+        if (child.children)
+            return hasSelectedDescendant(child, selectedKey);
+        return false;
+    });
+}

package/dist/modal/index.d.ts

@@ -0,0 +1,23 @@
+import { ModalOptions } from './modal';
+import './style.less';
+export * from './modal';
+export interface ModalHandle {
+    close: () => void;
+}
+/**
+ * 显示模态框
+ * @param opts 模态框选项
+ * @returns 模态框句柄
+ */
+export declare function showModal(opts: ModalOptions): ModalHandle;
+export declare function showAlert(msg: string): Promise<void>;
+export declare function showAlert(opts: {
+    msg: string;
+    onConfirm?: () => void;
+}): void;
+export declare function showConfirm(msg: string): Promise<boolean>;
+export declare function showConfirm(opts: {
+    msg: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}): void;