taro-uno-ui 0.9.0-beta

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

@@ -0,0 +1,355 @@
+/**
+ * Taro-Uno Menu Component
+ * 导航菜单组件，支持多种模式、主题和交互功能
+ */
+
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import type { ITouchEvent } from '@tarojs/components';
+import { menuStyles } from './Menu.styles';
+import { MenuUtils } from './Menu.utils';
+import { MenuItemComponent } from './MenuItem';
+import { SubMenuComponent } from './SubMenu';
+import type { MenuProps, MenuRef, MenuItem } from './Menu.types';
+
+/** Menu导航菜单组件 */
+export const MenuComponent = forwardRef<MenuRef, MenuProps>((props, ref) => {
+  const {
+    items = [],
+    selectedKeys: controlledSelectedKeys,
+    defaultSelectedKeys = [],
+    openKeys: controlledOpenKeys,
+    defaultOpenKeys = [],
+    mode = 'vertical',
+    theme = 'light',
+    size = 'medium',
+    trigger = 'click',
+    accordion = false,
+    inlineIndent = 24,
+    collapsible = false,
+    collapsed: controlledCollapsed = false,
+    collapsedIcon,
+    expandIcon,
+    contextMenu = false,
+    onClick,
+    onSelect,
+    onOpenChange,
+    onCollapse,
+    onContextMenu,
+    itemRender,
+    subMenuTitleRender,
+    className,
+    style,
+    accessible = true,
+    accessibilityLabel,
+    accessibilityRole = 'navigation',
+    accessibilityState,
+    ...restProps
+  } = props;
+
+  const menuRef = useRef<any>(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = useState<string[]>(defaultOpenKeys);
+  const [internalCollapsed, setInternalCollapsed] = useState(controlledCollapsed);
+
+  // 处理受控模式
+  const selectedKeys = controlledSelectedKeys !== undefined ? controlledSelectedKeys : internalSelectedKeys;
+  const openKeys = controlledOpenKeys !== undefined ? controlledOpenKeys : internalOpenKeys;
+  const collapsed = controlledCollapsed !== undefined ? controlledCollapsed : internalCollapsed;
+
+  // 更新内部状态
+  useEffect(() => {
+    if (controlledSelectedKeys !== undefined) {
+      setInternalSelectedKeys(controlledSelectedKeys);
+    }
+  }, [controlledSelectedKeys]);
+
+  useEffect(() => {
+    if (controlledOpenKeys !== undefined) {
+      setInternalOpenKeys(controlledOpenKeys);
+    }
+  }, [controlledOpenKeys]);
+
+  useEffect(() => {
+    if (controlledCollapsed !== undefined) {
+      setInternalCollapsed(controlledCollapsed);
+    }
+  }, [controlledCollapsed]);
+
+  // 处理菜单项点击
+  const handleItemClick = useCallback(
+    (key: string, event: ITouchEvent) => {
+      const item = MenuUtils.findItem(items, key);
+      if (!item) return;
+
+      onClick?.(key, item, event);
+
+      // 如果是外部链接，使用Taro兼容的方式处理
+      if (item.href) {
+        MenuUtils.handleExternalLink(item);
+        return;
+      }
+
+      // 更新选中状态
+      const newSelectedKeys = [key];
+      if (controlledSelectedKeys === undefined) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      onSelect?.(newSelectedKeys, item);
+    },
+    [items, onClick, onSelect, controlledSelectedKeys],
+  );
+
+  // 处理子菜单展开/收起
+  const handleSubMenuToggle = useCallback(
+    (key: string) => {
+      if (accordion) {
+        // 手风琴模式：关闭其他展开的子菜单
+        const parentItem = MenuUtils.findParentItem(items, key);
+        if (parentItem) {
+          const siblings = parentItem.children?.filter((child) => child.key !== key && child.children) || [];
+          const siblingKeys = siblings.map((sibling) => sibling.key);
+          const newOpenKeys = openKeys.filter((k) => !siblingKeys.includes(k));
+
+          if (openKeys.includes(key)) {
+            const finalOpenKeys = newOpenKeys.filter((k) => k !== key);
+            if (controlledOpenKeys === undefined) {
+              setInternalOpenKeys(finalOpenKeys);
+            }
+            onOpenChange?.(finalOpenKeys);
+          } else {
+            const finalOpenKeys = [...newOpenKeys, key];
+            if (controlledOpenKeys === undefined) {
+              setInternalOpenKeys(finalOpenKeys);
+            }
+            onOpenChange?.(finalOpenKeys);
+          }
+        }
+      } else {
+        // 普通模式：切换当前子菜单
+        if (openKeys.includes(key)) {
+          const newOpenKeys = openKeys.filter((k) => k !== key);
+          if (controlledOpenKeys === undefined) {
+            setInternalOpenKeys(newOpenKeys);
+          }
+          onOpenChange?.(newOpenKeys);
+        } else {
+          const newOpenKeys = [...openKeys, key];
+          if (controlledOpenKeys === undefined) {
+            setInternalOpenKeys(newOpenKeys);
+          }
+          onOpenChange?.(newOpenKeys);
+        }
+      }
+    },
+    [items, openKeys, accordion, controlledOpenKeys, onOpenChange],
+  );
+
+  // 处理折叠
+  const handleCollapse = useCallback(() => {
+    const newCollapsed = !collapsed;
+    if (controlledCollapsed === undefined) {
+      setInternalCollapsed(newCollapsed);
+    }
+    onCollapse?.(newCollapsed);
+  }, [collapsed, controlledCollapsed, onCollapse]);
+
+  // 处理右键菜单
+  const handleContextMenu = useCallback(
+    (event: ITouchEvent) => {
+      if (!contextMenu) return;
+      // 在Taro环境中，event.preventDefault()可能不可用
+      // 这里可以根据实际需求处理
+
+      // 简化的右键菜单逻辑
+      onContextMenu?.('', undefined as any, event);
+    },
+    [contextMenu, onContextMenu],
+  );
+
+  // 渲染菜单项
+  const renderMenuItem = (item: MenuItem, level: number = 0) => {
+    const isSelected = selectedKeys.includes(item.key);
+    const isOpen = openKeys.includes(item.key);
+
+    if (item.children && item.children.length > 0) {
+      return (
+        <SubMenuComponent
+          key={item.key}
+          item={item}
+          level={level}
+          mode={mode}
+          theme={theme}
+          size={size}
+          open={isOpen}
+          trigger={trigger}
+          collapsed={collapsed}
+          inlineIndent={inlineIndent}
+          onToggle={handleSubMenuToggle}
+          onItemClick={handleItemClick}
+          expandIcon={expandIcon}
+          subMenuTitleRender={subMenuTitleRender}
+          itemRender={itemRender}
+        />
+      );
+    }
+
+    return (
+      <MenuItemComponent
+        key={item.key}
+        item={item}
+        level={level}
+        mode={mode}
+        theme={theme}
+        size={size}
+        selected={isSelected}
+        trigger={trigger}
+        collapsed={collapsed}
+        inlineIndent={inlineIndent}
+        onItemClick={handleItemClick}
+        itemRender={itemRender}
+      />
+    );
+  };
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: menuRef.current,
+      getSelectedKeys: () => selectedKeys,
+      setSelectedKeys: (keys: string[]) => {
+        if (controlledSelectedKeys === undefined) {
+          setInternalSelectedKeys(keys);
+        }
+        onSelect?.(keys, MenuUtils.findItem(items, keys[0] || ''));
+      },
+      getOpenKeys: () => openKeys,
+      setOpenKeys: (keys: string[]) => {
+        if (controlledOpenKeys === undefined) {
+          setInternalOpenKeys(keys);
+        }
+        onOpenChange?.(keys);
+      },
+      setCollapsed: (newCollapsed: boolean) => {
+        if (controlledCollapsed === undefined) {
+          setInternalCollapsed(newCollapsed);
+        }
+        onCollapse?.(newCollapsed);
+      },
+      getItem: (key: string) => MenuUtils.findItem(items, key),
+      addItem: (item: MenuItem, parentKey?: string) => {
+        // 静态方法，暂不实现
+        console.log('Add item:', item, 'to parent:', parentKey);
+      },
+      removeItem: (key: string) => {
+        // 静态方法，暂不实现
+        console.log('Remove item:', key);
+      },
+      updateItem: (key: string, newItem: Partial<MenuItem>) => {
+        // 静态方法，暂不实现
+        console.log('Update item:', key, newItem);
+      },
+      expandAll: () => {
+        const allKeys = MenuUtils.flattenItems(items)
+          .filter((item) => item.children && item.children.length > 0)
+          .map((item) => item.key);
+        if (controlledOpenKeys === undefined) {
+          setInternalOpenKeys(allKeys);
+        }
+        onOpenChange?.(allKeys);
+      },
+      collapseAll: () => {
+        if (controlledOpenKeys === undefined) {
+          setInternalOpenKeys([]);
+        }
+        onOpenChange?.([]);
+      },
+      focus: () => {
+        // 在Taro环境中，focus方法可能不可用
+        if (menuRef.current) {
+          // 这里可以根据实际需求实现
+        }
+      },
+      blur: () => {
+        // 在Taro环境中，blur方法可能不可用
+        if (menuRef.current) {
+          // 这里可以根据实际需求实现
+        }
+      },
+    }),
+    [
+      selectedKeys,
+      openKeys,
+      collapsed,
+      items,
+      controlledSelectedKeys,
+      controlledOpenKeys,
+      controlledCollapsed,
+      onSelect,
+      onOpenChange,
+      onCollapse,
+    ],
+  );
+
+  // 无障碍状态
+  const finalAccessibilityState = {
+    expanded: !collapsed,
+    ...accessibilityState,
+  };
+
+  // 生成类名
+  const classNames = [
+    'taro-uno-h5-menu',
+    `taro-uno-h5-menu--${mode}`,
+    `taro-uno-h5-menu--${theme}`,
+    `taro-uno-h5-menu--${size}`,
+    collapsed ? 'taro-uno-h5-menu--collapsed' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  // 处理无障碍状态序列化
+  const serializedAccessibilityState = finalAccessibilityState
+    ? JSON.stringify(finalAccessibilityState)
+    : undefined;
+
+  return (
+    <View
+      ref={menuRef}
+      style={menuStyles.getContainerStyle({
+        mode,
+        theme,
+        size,
+        collapsed,
+        style,
+      })}
+      className={classNames}
+      accessible={accessible}
+      aria-label={accessibilityLabel}
+      aria-role={accessibilityRole}
+      aria-state={serializedAccessibilityState}
+      onLongPress={contextMenu ? handleContextMenu : undefined}
+      {...restProps}
+    >
+      {/* 折叠按钮 */}
+      {collapsible && (
+        <View
+          style={menuStyles.getCollapseButtonStyle({ size, theme, collapsed })}
+          onClick={handleCollapse}
+          data-testid="collapse-button"
+        >
+          <Text>{collapsed ? '»' : '«'}</Text>
+        </View>
+      )}
+
+      {/* 菜单项 */}
+      {items.map((item) => renderMenuItem(item))}
+    </View>
+  );
+});
+
+/** Menu组件显示名称 */
+MenuComponent.displayName = 'Menu';
+
+/** 导出Menu组件 */
+export const Menu = MenuComponent;

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

@@ -0,0 +1,231 @@
+import type { ReactNode } from 'react';
+import type { ITouchEvent } from '@tarojs/components';
+
+/** 菜单项类型 */
+export interface MenuItem {
+  /** 菜单项唯一标识 */
+  key: string;
+  /** 菜单项标题 */
+  label: ReactNode;
+  /** 菜单项图标 */
+  icon?: ReactNode;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 子菜单 */
+  children?: MenuItem[];
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+  /** 路由路径 */
+  path?: string;
+  /** 外部链接 */
+  href?: string;
+  /** 目标窗口 */
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  /** 是否危险操作 */
+  danger?: boolean;
+  /** 是否分组标题 */
+  isGroup?: boolean;
+  /** 工具提示 */
+  tooltip?: string;
+  /** 额外信息 */
+  extra?: ReactNode;
+  /** 徽章 */
+  badge?: number | string;
+  /** 是否选中 */
+  selected?: boolean;
+  /** 是否展开 */
+  expanded?: boolean;
+}
+
+/** 菜单模式 */
+export type MenuMode = 'vertical' | 'horizontal' | 'inline';
+
+/** 菜单主题 */
+export type MenuTheme = 'light' | 'dark';
+
+/** 菜单尺寸 */
+export type MenuSize = 'small' | 'medium' | 'large';
+
+/** 触发方式 */
+export type MenuTrigger = 'hover' | 'click';
+
+/** 菜单组件属性 */
+export interface MenuProps {
+  /** 菜单项数据 */
+  items: MenuItem[];
+  /** 当前选中的菜单项 */
+  selectedKeys?: string[];
+  /** 默认选中的菜单项 */
+  defaultSelectedKeys?: string[];
+  /** 展开的子菜单 */
+  openKeys?: string[];
+  /** 默认展开的子菜单 */
+  defaultOpenKeys?: string[];
+  /** 菜单模式 */
+  mode?: MenuMode;
+  /** 菜单主题 */
+  theme?: MenuTheme;
+  /** 菜单尺寸 */
+  size?: MenuSize;
+  /** 子菜单触发方式 */
+  trigger?: MenuTrigger;
+  /** 是否只展开一个父级菜单 */
+  accordion?: boolean;
+  /** 是否内联缩进 */
+  inlineIndent?: number;
+  /** 是否可折叠 */
+  collapsible?: boolean;
+  /** 是否折叠 */
+  collapsed?: boolean;
+  /** 折叠图标 */
+  collapsedIcon?: ReactNode;
+  /** 展开图标 */
+  expandIcon?: ReactNode | ((_props: { isOpen: boolean; isSubMenu: boolean }) => ReactNode);
+  /** 是否显示右键菜单 */
+  contextMenu?: boolean;
+  /** 菜单项点击事件 */
+  onClick?: (_key: string, item: MenuItem, event: ITouchEvent) => void;
+  /** 菜单项选中变化事件 */
+  onSelect?: (_selectedKeys: string[], item: MenuItem | null) => void;
+  /** 子菜单展开/收起事件 */
+  onOpenChange?: (_openKeys: string[]) => void;
+  /** 折叠状态变化事件 */
+  onCollapse?: (_collapsed: boolean) => void;
+  /** 右键菜单事件 */
+  onContextMenu?: (_key: string, item: MenuItem, event: ITouchEvent) => void;
+  /** 自定义渲染菜单项 */
+  itemRender?: (_item: MenuItem) => ReactNode;
+  /** 自定义渲染子菜单标题 */
+  subMenuTitleRender?: (_item: MenuItem) => ReactNode;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+  /** 无障碍支持 */
+  accessible?: boolean;
+  /** 无障碍标签 */
+  accessibilityLabel?: string;
+  /** 无障碍角色 */
+  accessibilityRole?: 'navigation' | 'menu' | 'menubar';
+  /** 无障碍状态 */
+  accessibilityState?: {
+    disabled?: boolean;
+    selected?: boolean;
+    expanded?: boolean;
+    busy?: boolean;
+    checked?: boolean;
+  };
+}
+
+/** 菜单引用接口 */
+export interface MenuRef {
+  /** 获取当前选中的菜单项 */
+  getSelectedKeys: () => string[];
+  /** 设置选中的菜单项 */
+  setSelectedKeys: (_keys: string[]) => void;
+  /** 获取展开的子菜单 */
+  getOpenKeys: () => string[];
+  /** 设置展开的子菜单 */
+  setOpenKeys: (_keys: string[]) => void;
+  /** 折叠/展开菜单 */
+  setCollapsed: (_collapsed: boolean) => void;
+  /** 获取菜单项数据 */
+  getItem: (_key: string) => MenuItem | null;
+  /** 添加菜单项 */
+  addItem: (_item: MenuItem, parentKey?: string) => void;
+  /** 删除菜单项 */
+  removeItem: (_key: string) => void;
+  /** 更新菜单项 */
+  updateItem: (_key: string, newItem: Partial<MenuItem>) => void;
+  /** 展开所有 */
+  expandAll: () => void;
+  /** 折叠所有 */
+  collapseAll: () => void;
+  /** 获取菜单元素 */
+  element: any;
+  /** 聚焦菜单 */
+  focus: () => void;
+  /** 失焦菜单 */
+  blur: () => void;
+}
+
+/** 菜单配置接口 */
+export interface MenuConfig {
+  /** 默认菜单模式 */
+  defaultMode?: MenuMode;
+  /** 默认菜单主题 */
+  defaultTheme?: MenuTheme;
+  /** 默认菜单尺寸 */
+  defaultSize?: MenuSize;
+  /** 默认触发方式 */
+  defaultTrigger?: MenuTrigger;
+  /** 默认内联缩进 */
+  defaultInlineIndent?: number;
+  /** 是否默认可折叠 */
+  defaultCollapsible?: boolean;
+  /** 是否默认手风琴模式 */
+  defaultAccordion?: boolean;
+  /** 动画持续时间 */
+  animationDuration?: number;
+  /** 响应式断点 */
+  responsiveBreakpoint?: number;
+  /** 最大展开深度 */
+  maxExpandDepth?: number;
+}
+
+/** 默认菜单配置 */
+export const DEFAULT_MENU_CONFIG: MenuConfig = {
+  defaultMode: 'vertical',
+  defaultTheme: 'light',
+  defaultSize: 'medium',
+  defaultTrigger: 'click',
+  defaultInlineIndent: 24,
+  defaultCollapsible: false,
+  defaultAccordion: false,
+  animationDuration: 300,
+  responsiveBreakpoint: 768,
+  maxExpandDepth: 3,
+};
+
+/** 菜单项样式类型 */
+export interface MenuItemStyles {
+  /** 容器样式 */
+  container: React.CSSProperties;
+  /** 菜单项样式 */
+  item: React.CSSProperties;
+  /** 选中样式 */
+  selected: React.CSSProperties;
+  /** 禁用样式 */
+  disabled: React.CSSProperties;
+  /** 悬停样式 */
+  hover: React.CSSProperties;
+  /** 危险样式 */
+  danger: React.CSSProperties;
+  /** 子菜单样式 */
+  subMenu: React.CSSProperties;
+  /** 分组标题样式 */
+  groupTitle: React.CSSProperties;
+  /** 图标样式 */
+  icon: React.CSSProperties;
+  /** 标签样式 */
+  label: React.CSSProperties;
+  /** 额外信息样式 */
+  extra: React.CSSProperties;
+  /** 徽章样式 */
+  badge: React.CSSProperties;
+  /** 折叠按钮样式 */
+  collapseButton: React.CSSProperties;
+  /** 响应式样式 */
+  responsive: React.CSSProperties;
+}
+
+/** 菜单尺寸样式映射 */
+export type MenuSizeStyles = Record<MenuSize, Partial<MenuItemStyles>>;
+
+/** 菜单主题样式映射 */
+export type MenuThemeStyles = Record<MenuTheme, Partial<MenuItemStyles>>;
+
+/** 菜单模式样式映射 */
+export type MenuModeStyles = Record<MenuMode, Partial<MenuItemStyles>>;