taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,187 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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>
-  );
-};

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

@@ -1,59 +0,0 @@
-/**
- * Taro-Uno Menu Component
- * 导航菜单组件统一导出文件
- */
-
-// 导入工具类和类型
-import { menuStyles as menuStylesExport } from './Menu.styles';
-import { MENU_VERSION, MENU_CONFIG, MenuLibraryUtils } from './Menu.constants';
-
-// 导出菜单组件
-export { Menu } from './Menu';
-
-// 导出子组件
-export { MenuItemComponent } from './MenuItem';
-export { SubMenuComponent } from './SubMenu';
-
-// 导出工具类
-export { MenuUtils } from './Menu.utils';
-
-// 导出类型定义
-export type {
-  MenuProps,
-  MenuRef,
-  MenuItem,
-  MenuMode,
-  MenuTheme,
-  MenuSize,
-  MenuTrigger,
-  MenuConfig,
-  MenuItemStyles,
-  MenuSizeStyles,
-  MenuThemeStyles,
-  MenuModeStyles,
-} from './Menu.types';
-
-// 导出样式
-export { menuStyles } from './Menu.styles';
-
-// 导出默认配置
-export { DEFAULT_MENU_CONFIG } from './Menu.types';
-
-// 导出常量和工具库
-export { MENU_VERSION, MENU_CONFIG, MenuLibraryUtils } from './Menu.constants';
-
-// 默认导出
-export default {
-  // 组件
-  Menu: () => null, // Placeholder
-
-  // 工具函数
-  Utils: MenuLibraryUtils,
-
-  // 样式
-  Styles: menuStylesExport,
-
-  // 配置
-  CONFIG: MENU_CONFIG,
-  VERSION: MENU_VERSION,
-};

package/src/components/navigation/NavBar/NavBar.styles.ts

@@ -1,129 +0,0 @@
-/**
- * NavBar样式工具
- */
-
-export const navBarStyles = {
-  /** 容器样式 */
-  container: {
-    position: 'relative',
-    width: '100%',
-    backgroundColor: '#ffffff',
-    transition: 'all 0.3s ease',
-  },
-
-  /** 固定定位样式 */
-  fixed: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 100,
-  },
-
-  /** 透明背景样式 */
-  transparent: {
-    backgroundColor: 'transparent',
-  },
-
-  /** 边框样式 */
-  border: {
-    borderBottom: '1px solid #f0f0f0',
-  },
-
-  /** 占位元素样式 */
-  placeholder: {
-    height: '44px',
-    backgroundColor: 'transparent',
-  },
-
-  /** 内容区域样式 */
-  content: {
-    height: '44px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '0 16px',
-    boxSizing: 'border-box',
-  },
-
-  /** 安全区域适配样式 */
-  safeArea: {
-    paddingTop: '44px',
-  },
-
-  /** 左侧区域样式 */
-  left: {
-    display: 'flex',
-    alignItems: 'center',
-    minWidth: '60px',
-    maxWidth: '120px',
-  },
-
-  /** 右侧区域样式 */
-  right: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    minWidth: '60px',
-    maxWidth: '120px',
-  },
-
-  /** 中间区域样式 */
-  center: {
-    flex: 1,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: '0 16px',
-    overflow: 'hidden',
-  },
-
-  /** 标题样式 */
-  title: {
-    fontSize: '17px',
-    fontWeight: '600',
-    color: '#000000',
-    textAlign: 'center',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-  },
-
-  /** 返回按钮样式 */
-  backArrow: {
-    padding: '8px 12px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    transition: 'background-color 0.3s ease',
-  },
-
-  /** 返回按钮悬停样式 */
-  backArrowHover: {
-    backgroundColor: 'rgba(0, 0, 0, 0.05)',
-  },
-
-  /** 返回图标样式 */
-  backIcon: {
-    fontSize: '16px',
-    color: '#000000',
-  },
-
-  /** 暗色主题样式 */
-  dark: {
-    backgroundColor: '#1a1a1a',
-    '& .taro-uno-navbar__title': {
-      color: '#ffffff',
-    },
-    '& .taro-uno-navbar__back-icon': {
-      color: '#ffffff',
-    },
-    '&.taro-uno-navbar--border': {
-      borderBottomColor: '#333333',
-    },
-  },
-} as const;