taro-uno-ui 0.9.0 → 1.0.0

package/src/components/layout/Row/Row.tsx

@@ -5,18 +5,7 @@ import type { RowProps, RowRef, RowAlign, RowJustify, RowGutter } from './Row.ty
 
 /** Row组件 */
 export const RowComponent = forwardRef<RowRef, RowProps>((props, ref) => {
-  const {
-    children,
-    gutter = 0,
-    align = 'top',
-    justify = 'start',
-    wrap = true,
-    className,
-    style,
-    onClick,
-    responsive,
-    ...restProps
-  } = props;
+  const { children, gutter = 0, align = 'top', justify = 'start', wrap = true, className, style, onClick } = props;
 
   const rowRef = useRef<any>(null);
   const [internalAlign, setInternalAlign] = useState<RowAlign>(align);
@@ -43,31 +32,12 @@ export const RowComponent = forwardRef<RowRef, RowProps>((props, ref) => {
 
   // 处理点击事件
   const handleClick = useCallback(
-    (event: React.MouseEvent) => {
+    (event: any) => {
       onClick?.(event);
     },
     [onClick],
   );
 
-  // 渲染子元素
-  const renderChildren = () => {
-    if (!children) return null;
-
-    const childrenArray = React.Children.toArray(children);
-
-    return childrenArray.map((child, index) => {
-      // 为每个Col组件传递gutter属性
-      if (React.isValidElement(child) && (child.type as any)?.displayName === 'Col') {
-        return React.cloneElement(child, {
-          key: index,
-          gutter: internalGutter,
-        } as any);
-      }
-
-      return child;
-    });
-  };
-
   // 计算样式
   const rowStyle = rowStyles['getBaseStyle']({
     gutter: internalGutter,
@@ -77,9 +47,6 @@ export const RowComponent = forwardRef<RowRef, RowProps>((props, ref) => {
     style: style || {},
   });
 
-  // 计算响应式样式
-  const responsiveStyle = responsive ? rowStyles['getResponsiveStyle'](responsive) : {};
-
   // 计算类名
   const rowClassName = rowStyles['getClassName']({
     align: internalAlign,
@@ -119,15 +86,20 @@ export const RowComponent = forwardRef<RowRef, RowProps>((props, ref) => {
     [internalAlign, internalJustify, internalGutter],
   );
 
+  // 渲染子元素，为每个Col组件传递gutter属性
+  const renderedChildren = React.Children.map(children, (child, index) => {
+    if (React.isValidElement(child) && (child.type as any)?.displayName === 'Col') {
+      return React.cloneElement(child, {
+        key: index,
+        gutter: internalGutter,
+      } as any);
+    }
+    return child;
+  });
+
   return (
-    <View
-      ref={rowRef}
-      className={rowClassName}
-      style={{ ...rowStyle, ...responsiveStyle }}
-      onClick={handleClick}
-      {...restProps}
-    >
-      {renderChildren()}
+    <View ref={rowRef} className={rowClassName} style={{ ...rowStyle, ...style }} onClick={handleClick}>
+      {renderedChildren}
     </View>
   );
 });

package/src/components/layout/Space/Space.tsx

@@ -22,10 +22,8 @@ export const SpaceComponent = forwardRef<SpaceRef, SpaceProps>((props, ref) => {
     className,
     style,
     onClick,
-    onItemHover,
     onItemClick,
     responsive,
-    ...restProps
   } = props;
 
   const spaceRef = useRef<any>(null);
@@ -65,7 +63,7 @@ export const SpaceComponent = forwardRef<SpaceRef, SpaceProps>((props, ref) => {
 
   // 处理点击事件
   const handleClick = useCallback(
-    (event: React.MouseEvent) => {
+    (event: any) => {
       onClick?.(event);
     },
     [onClick],
@@ -80,7 +78,7 @@ export const SpaceComponent = forwardRef<SpaceRef, SpaceProps>((props, ref) => {
   );
 
   // 处理子元素悬停事件
-  
+
   // 渲染子元素
   const renderChildren = () => {
     if (!children) return null;
@@ -191,13 +189,7 @@ export const SpaceComponent = forwardRef<SpaceRef, SpaceProps>((props, ref) => {
   );
 
   return (
-    <View
-      ref={spaceRef}
-      className={spaceClassName}
-      style={{ ...spaceStyle, ...responsiveStyle }}
-      onClick={handleClick}
-      {...restProps}
-    >
+    <View ref={spaceRef} className={spaceClassName} style={{ ...spaceStyle, ...responsiveStyle }} onClick={handleClick}>
       {renderChildren()}
       {renderEllipsis()}
     </View>

package/src/components/layout/Space/Space.types.ts

@@ -77,7 +77,7 @@ export interface SpaceProps extends BaseComponentProps {
   /** 点击事件 */
   onClick?: (_event: React.MouseEvent) => void;
   /** 子元素点击事件 */
-  onItemHover?: (_index: number, event: React.MouseEvent) => void;
+  _onItemHover?: (_index: number, event: React.MouseEvent) => void;
   /** 子元素点击事件 */
   onItemClick?: (_index: number, event: ITouchEvent) => void;
   /** 响应式断点 */

package/src/components/layout/index.tsx

@@ -1,21 +1,20 @@
-// 导出布局组件
-export * from './Grid';
-export * from './Layout';
-export * from './Space';
-export * from './Affix';
-export * from './Row';
-export * from './Col';
-export * from './Container';
+/**
+ * Taro-Uno 布局组件库
+ * 提供用于页面布局的 UI 组件，包括网格、行列、容器、间距等
+ */
 
-// 导出类型
+// 导出 Grid 组件
+export { Grid } from './Grid';
 export type { GridProps, GridRef, GridAlign, GridJustify, GridGap, GridCols } from './Grid/Grid.types';
+export { gridStyles } from './Grid/Grid.styles';
 
-export type { ContainerProps, ContainerRef, ContainerSize, ContainerAlign } from './Container/Container.types';
-
-export type { RowProps, RowRef, RowAlign, RowJustify, RowGutter } from './Row/Row.types';
-
-export type { ColProps, ColRef, ColSpan, ColOffset, ColOrder } from './Col/Col.types';
+// 导出 Layout 组件
+export { Layout } from './Layout';
+export type { LayoutProps, LayoutRef } from './Layout/Layout.types';
+export { layoutStyles } from './Layout/Layout.styles';
 
+// 导出 Space 组件
+export { Space } from './Space';
 export type {
   SpaceProps,
   SpaceRef,
@@ -26,16 +25,27 @@ export type {
   SpaceGap,
   SpaceSeparator,
 } from './Space/Space.types';
+export { spaceStyles } from './Space/Space.styles';
 
+// 导出 Affix 组件
+export { Affix } from './Affix';
 export type { AffixProps, AffixRef, AffixOffset, AffixTarget } from './Affix/Affix.types';
+export { affixStyles } from './Affix/Affix.styles';
 
-// 导出样式
-export { gridStyles } from './Grid/Grid.styles';
-export { containerStyles } from './Container/Container.styles';
+// 导出 Row 组件
+export { Row } from './Row';
+export type { RowProps, RowRef, RowAlign, RowJustify, RowGutter } from './Row/Row.types';
 export { rowStyles } from './Row/Row.styles';
+
+// 导出 Col 组件
+export { Col } from './Col';
+export type { ColProps, ColRef, ColSpan, ColOffset, ColOrder } from './Col/Col.types';
 export { colStyles } from './Col/Col.styles';
-export { spaceStyles } from './Space/Space.styles';
-export { affixStyles } from './Affix/Affix.styles';
+
+// 导出 Container 组件
+export { Container } from './Container';
+export type { ContainerProps, ContainerRef, ContainerSize, ContainerAlign } from './Container/Container.types';
+export { containerStyles } from './Container/Container.styles';
 
 // 布局组件工具函数
 export const LayoutUtils = {

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

@@ -0,0 +1,69 @@
+import { MenuUtils } from './Menu.utils';
+import type { MenuItem } from './Menu.types';
+
+// 菜单组件版本
+export const MENU_VERSION = '1.0.0';
+
+// 菜单组件配置
+export const MENU_CONFIG = {
+  version: MENU_VERSION,
+  platform: 'taro',
+  features: {
+    multiple: true,
+    accordion: true,
+    collapsible: true,
+    contextMenu: true,
+    accessibility: true,
+    theme: true,
+    responsive: true,
+    typescript: true,
+  },
+};
+
+// 菜单组件工具函数
+export const MenuLibraryUtils = {
+  /**
+   * 获取菜单组件版本
+   */
+  getVersion: (): string => MENU_VERSION,
+
+  /**
+   * 获取菜单组件配置
+   */
+  getConfig: () => MENU_CONFIG,
+
+  /**
+   * 格式化菜单数据
+   */
+  formatMenuData: (data: any[]) => {
+    return MenuUtils.formatMenuData(data);
+  },
+
+  /**
+   * 查找菜单项
+   */
+  findMenuItem: (items: MenuItem[], key: string) => {
+    return MenuUtils.findItem(items, key);
+  },
+
+  /**
+   * 获取菜单项路径
+   */
+  getMenuItemPath: (items: MenuItem[], key: string) => {
+    return MenuUtils.getItemPath(items, key);
+  },
+
+  /**
+   * 展开菜单项的所有父级
+   */
+  expandParentKeys: (items: MenuItem[], key: string) => {
+    return MenuUtils.expandParents(items, key);
+  },
+
+  /**
+   * 验证菜单项
+   */
+  validateMenuItem: (item: MenuItem) => {
+    return MenuUtils.validateItem(item);
+  },
+};

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

@@ -0,0 +1,107 @@
+import { Menu } from './Menu';
+
+export default {
+  title: 'Navigation/Menu',
+  component: Menu,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Menu 组件是一个功能强大的导航菜单组件，支持多种模式、主题和交互功能。',
+      },
+    },
+  },
+  argTypes: {
+    mode: {
+      control: 'select',
+      options: ['vertical', 'horizontal', 'inline'],
+    },
+    theme: {
+      control: 'select',
+      options: ['light', 'dark'],
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+    trigger: {
+      control: 'select',
+      options: ['hover', 'click'],
+    },
+    accordion: {
+      control: 'boolean',
+    },
+    collapsible: {
+      control: 'boolean',
+    },
+    collapsed: {
+      control: 'boolean',
+    },
+  },
+};
+
+const menuItems = [
+  { key: '1', title: '首页', icon: 'home', path: '/home' },
+  {
+    key: '2',
+    title: '产品',
+    icon: 'product',
+    children: [
+      { key: '2-1', title: '产品列表', path: '/products/list' },
+      { key: '2-2', title: '产品详情', path: '/products/detail' },
+      { key: '2-3', title: '新增产品', path: '/products/add' },
+    ],
+  },
+  {
+    key: '3',
+    title: '服务',
+    icon: 'service',
+    children: [
+      { key: '3-1', title: '服务1', path: '/services/1' },
+      { key: '3-2', title: '服务2', path: '/services/2' },
+    ],
+  },
+  { key: '4', title: '关于我们', icon: 'about', path: '/about' },
+];
+
+export const Basic = {
+  args: {
+    items: menuItems,
+    defaultActiveKey: '1',
+    defaultOpenKeys: ['2'],
+  },
+};
+
+export const Horizontal = {
+  args: {
+    items: menuItems,
+    mode: 'horizontal',
+    defaultActiveKey: '1',
+  },
+};
+
+export const DarkTheme = {
+  args: {
+    items: menuItems,
+    theme: 'dark',
+    defaultActiveKey: '1',
+    defaultOpenKeys: ['2'],
+  },
+};
+
+export const Collapsible = {
+  args: {
+    items: menuItems,
+    collapsible: true,
+    defaultActiveKey: '1',
+    defaultOpenKeys: ['2'],
+  },
+};
+
+export const Accordion = {
+  args: {
+    items: menuItems,
+    accordion: true,
+    defaultActiveKey: '1',
+    defaultOpenKeys: ['2'],
+  },
+};

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

@@ -1,7 +1,5 @@
 import type { CSSProperties } from 'react';
-import type {
-  MenuItemStyles
-} from './Menu.types';
+import type { MenuItemStyles } from './Menu.types';
 
 /** Menu组件样式配置接口 */
 interface MenuStyleConfig {
@@ -131,10 +129,7 @@ interface MenuStyleFunctions {
     danger?: boolean;
   }) => CSSProperties;
   /** 获取徽章样式 */
-  getBadgeStyle: (props: {
-    size?: 'small' | 'medium' | 'large';
-    theme?: 'light' | 'dark';
-  }) => CSSProperties;
+  getBadgeStyle: (props: { size?: 'small' | 'medium' | 'large'; theme?: 'light' | 'dark' }) => CSSProperties;
   /** 获取折叠按钮样式 */
   getCollapseButtonStyle: (props: {
     size?: 'small' | 'medium' | 'large';
@@ -507,23 +502,25 @@ export const menuStyles: MenuStyleConfig & MenuStyleFunctions = {
         responsive: {},
       },
     };
-    
-    return modeStyles[mode] || {
-      container: {},
-      item: {},
-      selected: {},
-      disabled: {},
-      hover: {},
-      danger: {},
-      subMenu: {},
-      groupTitle: {},
-      icon: {},
-      label: {},
-      extra: {},
-      badge: {},
-      collapseButton: {},
-      responsive: {},
-    };
+
+    return (
+      modeStyles[mode] || {
+        container: {},
+        item: {},
+        selected: {},
+        disabled: {},
+        hover: {},
+        danger: {},
+        subMenu: {},
+        groupTitle: {},
+        icon: {},
+        label: {},
+        extra: {},
+        badge: {},
+        collapseButton: {},
+        responsive: {},
+      }
+    );
   },
 
   // 获取菜单项样式
@@ -632,7 +629,7 @@ export const menuStyles: MenuStyleConfig & MenuStyleFunctions = {
     } = props;
 
     // const themeStyles = menuStyles.getThemeStyles(theme); // Commented out - unused
-    
+
     let style: CSSProperties = {
       ...menuStyles['subMenu'],
     };
@@ -670,13 +667,7 @@ export const menuStyles: MenuStyleConfig & MenuStyleFunctions = {
     collapsed?: boolean;
     style?: CSSProperties;
   }): CSSProperties => {
-    const {
-      mode = 'vertical',
-      theme = 'light',
-      size = 'medium',
-      collapsed = false,
-      style = {},
-    } = props;
+    const { mode = 'vertical', theme = 'light', size = 'medium', collapsed = false, style = {} } = props;
 
     const sizeStyles = menuStyles.getSizeStyles(size);
     const themeStyles = menuStyles.getThemeStyles(theme);
@@ -749,10 +740,7 @@ export const menuStyles: MenuStyleConfig & MenuStyleFunctions = {
   },
 
   // 获取徽章样式
-  getBadgeStyle: (props: {
-    size?: 'small' | 'medium' | 'large';
-    theme?: 'light' | 'dark';
-  }): CSSProperties => {
+  getBadgeStyle: (props: { size?: 'small' | 'medium' | 'large'; theme?: 'light' | 'dark' }): CSSProperties => {
     const { size = 'medium' } = props;
     const sizeStyles = menuStyles.getSizeStyles(size);
 
@@ -776,4 +764,4 @@ export const menuStyles: MenuStyleConfig & MenuStyleFunctions = {
       ...sizeStyles['collapseButton'],
     };
   },
-};
+};

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

@@ -28,7 +28,7 @@ export const MenuComponent = forwardRef<MenuRef, MenuProps>((props, ref) => {
     inlineIndent = 24,
     collapsible = false,
     collapsed: controlledCollapsed = false,
-    collapsedIcon,
+    _collapsedIcon,
     expandIcon,
     contextMenu = false,
     onClick,
@@ -238,17 +238,14 @@ export const MenuComponent = forwardRef<MenuRef, MenuProps>((props, ref) => {
         onCollapse?.(newCollapsed);
       },
       getItem: (key: string) => MenuUtils.findItem(items, key),
-      addItem: (item: MenuItem, parentKey?: string) => {
+      addItem: (_item: MenuItem, _parentKey?: string) => {
         // 静态方法，暂不实现
-        console.log('Add item:', item, 'to parent:', parentKey);
       },
-      removeItem: (key: string) => {
+      removeItem: (_key: string) => {
         // 静态方法，暂不实现
-        console.log('Remove item:', key);
       },
-      updateItem: (key: string, newItem: Partial<MenuItem>) => {
+      updateItem: (_key: string, _newItem: Partial<MenuItem>) => {
         // 静态方法，暂不实现
-        console.log('Update item:', key, newItem);
       },
       expandAll: () => {
         const allKeys = MenuUtils.flattenItems(items)
@@ -306,12 +303,12 @@ export const MenuComponent = forwardRef<MenuRef, MenuProps>((props, ref) => {
     `taro-uno-h5-menu--${size}`,
     collapsed ? 'taro-uno-h5-menu--collapsed' : '',
     className,
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   // 处理无障碍状态序列化
-  const serializedAccessibilityState = finalAccessibilityState
-    ? JSON.stringify(finalAccessibilityState)
-    : undefined;
+  const serializedAccessibilityState = finalAccessibilityState ? JSON.stringify(finalAccessibilityState) : undefined;
 
   return (
     <View

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

@@ -80,7 +80,7 @@ export interface MenuProps {
   /** 是否折叠 */
   collapsed?: boolean;
   /** 折叠图标 */
-  collapsedIcon?: ReactNode;
+  _collapsedIcon?: ReactNode;
   /** 展开图标 */
   expandIcon?: ReactNode | ((_props: { isOpen: boolean; isSubMenu: boolean }) => ReactNode);
   /** 是否显示右键菜单 */
@@ -228,4 +228,4 @@ export type MenuSizeStyles = Record<MenuSize, Partial<MenuItemStyles>>;
 export type MenuThemeStyles = Record<MenuTheme, Partial<MenuItemStyles>>;
 
 /** 菜单模式样式映射 */
-export type MenuModeStyles = Record<MenuMode, Partial<MenuItemStyles>>;
+export type MenuModeStyles = Record<MenuMode, Partial<MenuItemStyles>>;

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

@@ -28,7 +28,7 @@ export class MenuUtils {
   static findParentItem(items: MenuItem[], key: string): MenuItem | null {
     for (const item of items) {
       if (item.children) {
-        if (item.children.some(child => child.key === key)) {
+        if (item.children.some((child) => child.key === key)) {
           return item;
         }
         const found = this.findParentItem(item.children, key);
@@ -45,16 +45,16 @@ export class MenuUtils {
    */
   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;
@@ -63,7 +63,7 @@ export class MenuUtils {
       }
       return false;
     };
-    
+
     findPath(items, key, []);
     return path;
   }
@@ -73,7 +73,7 @@ export class MenuUtils {
    */
   static expandParents(items: MenuItem[], key: string): string[] {
     const path = this.getItemPath(items, key);
-    return path.slice(0, -1).map(item => item.key);
+    return path.slice(0, -1).map((item) => item.key);
   }
 
   /**
@@ -81,16 +81,16 @@ export class MenuUtils {
    */
   static flattenItems(items: MenuItem[], parentKey?: string): MenuItem[] {
     const result: MenuItem[] = [];
-    
-    items.forEach(item => {
+
+    items.forEach((item) => {
       const flatItem = { ...item, parentKey };
       result.push(flatItem);
-      
+
       if (item.children) {
         result.push(...this.flattenItems(item.children, item.key));
       }
     });
-    
+
     return result;
   }
 
@@ -98,14 +98,14 @@ export class MenuUtils {
    * 过滤菜单项
    */
   static filterItems(items: MenuItem[], keyword: string): MenuItem[] {
-    return items.filter(item => {
+    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) {
@@ -113,7 +113,7 @@ export class MenuUtils {
           return true;
         }
       }
-      
+
       return false;
     });
   }
@@ -147,7 +147,7 @@ export class MenuUtils {
    * 格式化菜单数据
    */
   static formatMenuData(data: any[]): MenuItem[] {
-    return data.map(item => ({
+    return data.map((item) => ({
       key: item.key || item.id,
       label: item.label || item.name || item.title,
       icon: item.icon,
@@ -169,7 +169,7 @@ export class MenuUtils {
   static handleItemClick(
     item: MenuItem,
     event: any,
-    onClick?: (key: string, item: MenuItem, event: any) => void
+    onClick?: (key: string, item: MenuItem, event: any) => void,
   ): void {
     onClick?.(item.key, item, event);
   }
@@ -184,4 +184,4 @@ export class MenuUtils {
       console.log('Navigate to:', item.href, 'target:', item.target);
     }
   }
-}
+}