taro-uno-ui 0.9.0-beta

package/src/components/navigation/Menu/Menu.utils.ts

@@ -0,0 +1,187 @@
+import type { MenuItem } from './Menu.types';
+
+/**
+ * 菜单工具函数
+ */
+export class MenuUtils {
+  /**
+   * 查找菜单项
+   */
+  static findItem(items: MenuItem[], key: string): MenuItem | null {
+    for (const item of items) {
+      if (item.key === key) {
+        return item;
+      }
+      if (item.children) {
+        const found = this.findItem(item.children, key);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 查找父级菜单项
+   */
+  static findParentItem(items: MenuItem[], key: string): MenuItem | null {
+    for (const item of items) {
+      if (item.children) {
+        if (item.children.some(child => child.key === key)) {
+          return item;
+        }
+        const found = this.findParentItem(item.children, key);
+        if (found) {
+          return found;
+        }
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 获取菜单项路径
+   */
+  static getItemPath(items: MenuItem[], key: string): MenuItem[] {
+    const path: MenuItem[] = [];
+    
+    const findPath = (currentItems: MenuItem[], targetKey: string, currentPath: MenuItem[]): boolean => {
+      for (const item of currentItems) {
+        const newPath = [...currentPath, item];
+        
+        if (item.key === targetKey) {
+          path.push(...newPath);
+          return true;
+        }
+        
+        if (item.children) {
+          if (findPath(item.children, targetKey, newPath)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+    
+    findPath(items, key, []);
+    return path;
+  }
+
+  /**
+   * 展开菜单项的所有父级
+   */
+  static expandParents(items: MenuItem[], key: string): string[] {
+    const path = this.getItemPath(items, key);
+    return path.slice(0, -1).map(item => item.key);
+  }
+
+  /**
+   * 扁平化菜单项
+   */
+  static flattenItems(items: MenuItem[], parentKey?: string): MenuItem[] {
+    const result: MenuItem[] = [];
+    
+    items.forEach(item => {
+      const flatItem = { ...item, parentKey };
+      result.push(flatItem);
+      
+      if (item.children) {
+        result.push(...this.flattenItems(item.children, item.key));
+      }
+    });
+    
+    return result;
+  }
+
+  /**
+   * 过滤菜单项
+   */
+  static filterItems(items: MenuItem[], keyword: string): MenuItem[] {
+    return items.filter(item => {
+      const label = String(item.label).toLowerCase();
+      const search = keyword.toLowerCase();
+      
+      if (label.includes(search)) {
+        return true;
+      }
+      
+      if (item.children) {
+        const filteredChildren = this.filterItems(item.children, keyword);
+        if (filteredChildren.length > 0) {
+          item.children = filteredChildren;
+          return true;
+        }
+      }
+      
+      return false;
+    });
+  }
+
+  /**
+   * 排序菜单项
+   */
+  static sortItems(items: MenuItem[], sortBy: string = 'label'): MenuItem[] {
+    return [...items].sort((a, b) => {
+      const aValue = String((a as any)[sortBy] || a.label).toLowerCase();
+      const bValue = String((b as any)[sortBy] || b.label).toLowerCase();
+      return aValue.localeCompare(bValue);
+    });
+  }
+
+  /**
+   * 验证菜单项
+   */
+  static validateItem(item: MenuItem): boolean {
+    return !!item.key && !!item.label;
+  }
+
+  /**
+   * 生成唯一键
+   */
+  static generateKey(item: MenuItem): string {
+    return item.key || `menu-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  /**
+   * 格式化菜单数据
+   */
+  static formatMenuData(data: any[]): MenuItem[] {
+    return data.map(item => ({
+      key: item.key || item.id,
+      label: item.label || item.name || item.title,
+      icon: item.icon,
+      disabled: item.disabled,
+      children: item.children ? this.formatMenuData(item.children) : undefined,
+      path: item.path,
+      href: item.href,
+      target: item.target,
+      danger: item.danger,
+      tooltip: item.tooltip,
+      extra: item.extra,
+      badge: item.badge,
+    }));
+  }
+
+  /**
+   * 处理菜单项点击 - 适配Taro环境
+   */
+  static handleItemClick(
+    item: MenuItem,
+    event: any,
+    onClick?: (key: string, item: MenuItem, event: any) => void
+  ): void {
+    onClick?.(item.key, item, event);
+  }
+
+  /**
+   * 安全地处理外部链接跳转 - 适配Taro环境
+   */
+  static handleExternalLink(item: MenuItem): void {
+    if (item.href) {
+      // 在Taro环境中，使用Taro的导航方法
+      // 这里只是示例，实际使用时需要根据项目配置调整
+      console.log('Navigate to:', item.href, 'target:', item.target);
+    }
+  }
+}

package/src/components/navigation/Menu/MenuItem.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import type { ITouchEvent } from '@tarojs/components';
+import type { MenuItem } from './Menu.types';
+import { menuStyles } from './Menu.styles';
+
+interface MenuItemProps {
+  /** 菜单项数据 */
+  item: MenuItem;
+  /** 菜单项层级 */
+  level: number;
+  /** 菜单模式 */
+  mode: 'vertical' | 'horizontal' | 'inline';
+  /** 菜单主题 */
+  theme: 'light' | 'dark';
+  /** 菜单尺寸 */
+  size: 'small' | 'medium' | 'large';
+  /** 是否选中 */
+  selected: boolean;
+  /** 触发方式 */
+  trigger: 'hover' | 'click';
+  /** 是否折叠 */
+  collapsed: boolean;
+  /** 内联缩进 */
+  inlineIndent: number;
+  /** 点击事件 */
+  onItemClick: (key: string, event: ITouchEvent) => void;
+  /** 自定义渲染 */
+  itemRender?: (item: MenuItem) => React.ReactNode;
+}
+
+/**
+ * 菜单项组件
+ */
+export const MenuItemComponent: React.FC<MenuItemProps> = ({
+  item,
+  level,
+  mode,
+  theme,
+  size,
+  selected,
+  // trigger,
+  // collapsed,
+  // inlineIndent,
+  onItemClick,
+  itemRender,
+}) => {
+  const handleClick = useCallback(
+    (event: ITouchEvent) => {
+      if (item.disabled) return;
+      onItemClick(item.key, event);
+    },
+    [item.disabled, item.key, onItemClick],
+  );
+
+  // 处理分组标题
+  if (item.isGroup) {
+    return (
+      <View
+        style={menuStyles.getItemStyle({
+          size,
+          theme,
+          mode,
+          selected,
+          disabled: item.disabled,
+          danger: item.danger,
+          isGroup: true,
+          level,
+          // collapsed,
+        })}
+        className={item.className}
+      >
+        {itemRender ? itemRender(item) : (
+          <Text style={menuStyles.getLabelStyle({ size, selected, disabled: item.disabled, danger: item.danger })}>
+            {item.label}
+          </Text>
+        )}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={menuStyles.getItemStyle({
+        size,
+        theme,
+        mode,
+        selected,
+        disabled: item.disabled,
+        danger: item.danger,
+        level,
+        // collapsed,
+      })}
+      className={item.className}
+      onClick={handleClick}
+    >
+      {/* 图标 */}
+      {item.icon && (
+        <View style={menuStyles.getIconStyle({ size, selected, disabled: item.disabled })}>
+          {item.icon}
+        </View>
+      )}
+
+      {/* 标签 */}
+      {itemRender ? itemRender(item) : (
+        <Text style={menuStyles.getLabelStyle({ size, selected, disabled: item.disabled, danger: item.danger })}>
+          {item.label}
+        </Text>
+      )}
+
+      {/* 额外信息 */}
+      {item.extra && (
+        <View style={menuStyles.extra}>
+          {item.extra}
+        </View>
+      )}
+
+      {/* 徽章 */}
+      {item.badge && (
+        <View style={menuStyles.getBadgeStyle({ size, theme })}>
+          <Text>{item.badge}</Text>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/components/navigation/Menu/SubMenu.tsx

@@ -0,0 +1,148 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { View, Text } from '@tarojs/components';
+import type { ITouchEvent } from '@tarojs/components';
+import type { MenuItem } from './Menu.types';
+import { menuStyles } from './Menu.styles';
+import { MenuItemComponent } from './MenuItem';
+
+interface SubMenuProps {
+  /** 子菜单项数据 */
+  item: MenuItem;
+  /** 菜单项层级 */
+  level: number;
+  /** 菜单模式 */
+  mode: 'vertical' | 'horizontal' | 'inline';
+  /** 菜单主题 */
+  theme: 'light' | 'dark';
+  /** 菜单尺寸 */
+  size: 'small' | 'medium' | 'large';
+  /** 是否展开 */
+  open: boolean;
+  /** 触发方式 */
+  trigger: 'hover' | 'click';
+  /** 是否折叠 */
+  collapsed: boolean;
+  /** 内联缩进 */
+  inlineIndent: number;
+  /** 切换展开状态 */
+  onToggle: (key: string) => void;
+  /** 点击事件 */
+  onItemClick: (key: string, event: ITouchEvent) => void;
+  /** 展开图标 */
+  expandIcon?: React.ReactNode | ((props: { isOpen: boolean; isSubMenu: boolean }) => React.ReactNode);
+  /** 自定义渲染子菜单标题 */
+  subMenuTitleRender?: (item: MenuItem) => React.ReactNode;
+  /** 自定义渲染菜单项 */
+  itemRender?: (item: MenuItem) => React.ReactNode;
+}
+
+/** 默认展开图标 */
+const DEFAULT_EXPAND_ICON = '▶';
+
+/**
+ * 子菜单组件
+ */
+export const SubMenuComponent: React.FC<SubMenuProps> = ({
+  item,
+  level,
+  mode,
+  theme,
+  size,
+  open,
+  trigger,
+  collapsed,
+  inlineIndent,
+  onToggle,
+  onItemClick,
+  expandIcon,
+  subMenuTitleRender,
+  itemRender,
+}) => {
+  const [localOpen, setLocalOpen] = useState(open);
+
+  useEffect(() => {
+    setLocalOpen(open);
+  }, [open]);
+
+  const handleToggle = useCallback(
+    (event: ITouchEvent) => {
+      event.stopPropagation();
+      if (item.disabled) return;
+      onToggle(item.key);
+    },
+    [item.disabled, item.key, onToggle],
+  );
+
+  const renderExpandIcon = () => {
+    if (typeof expandIcon === 'function') {
+      return expandIcon({ isOpen: localOpen, isSubMenu: true });
+    }
+    return expandIcon || DEFAULT_EXPAND_ICON;
+  };
+
+  return (
+    <View style={menuStyles.subMenu}>
+      {/* 子菜单标题 */}
+      <View
+        style={menuStyles.getItemStyle({
+          size,
+          theme,
+          mode,
+          selected: false,
+          disabled: item.disabled,
+          danger: item.danger,
+          isSubMenu: true,
+          level,
+          collapsed,
+        })}
+        onClick={handleToggle}
+      >
+        {/* 图标 */}
+        {item.icon && (
+          <View style={menuStyles.getIconStyle({ size, selected: false, disabled: item.disabled })}>
+            {item.icon}
+          </View>
+        )}
+
+        {/* 标签 */}
+        {subMenuTitleRender ? subMenuTitleRender(item) : (
+          <Text style={menuStyles.getLabelStyle({ size, selected: false, disabled: item.disabled, danger: item.danger })}>
+            {item.label}
+          </Text>
+        )}
+
+        {/* 展开图标 */}
+        <View
+          style={{
+            ...menuStyles.expandIcon,
+            ...(localOpen ? menuStyles.expandIconOpen : {}),
+          }}
+        >
+          {renderExpandIcon()}
+        </View>
+      </View>
+
+      {/* 子菜单内容 */}
+      {localOpen && (
+        <View style={menuStyles.getSubMenuStyle({ size, theme, mode, open: localOpen, level, collapsed })}>
+          {item.children?.map((child) => (
+            <MenuItemComponent
+              key={child.key}
+              item={child}
+              level={level + 1}
+              mode={mode}
+              theme={theme}
+              size={size}
+              selected={child.selected || false}
+              trigger={trigger}
+              collapsed={collapsed}
+              inlineIndent={inlineIndent}
+              onItemClick={onItemClick}
+              itemRender={itemRender}
+            />
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};