taro-uno-ui 0.9.0-beta

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

@@ -0,0 +1,124 @@
+/**
+ * Taro-Uno Menu Component
+ * 导航菜单组件统一导出文件
+ */
+
+// 导入工具类和类型
+import { MenuUtils } from './Menu.utils';
+import type { MenuItem } from './Menu.types';
+import { menuStyles as menuStylesExport } from './Menu.styles';
+
+// 导出菜单组件
+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 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);
+  },
+};
+
+// 默认导出
+export default {
+  // 组件
+  Menu: () => null, // Placeholder
+
+  // 工具函数
+  Utils: MenuLibraryUtils,
+
+  // 样式
+  Styles: menuStylesExport,
+
+  // 配置
+  CONFIG: MENU_CONFIG,
+  VERSION: MENU_VERSION,
+};

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

@@ -0,0 +1,129 @@
+/**
+ * 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;

package/src/components/navigation/NavBar/NavBar.test.tsx

@@ -0,0 +1,287 @@
+import React from 'react'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import { vi } from 'vitest'
+import { NavBar } from './NavBar'
+import type { NavBarProps, NavBarRef } from './NavBar.types'
+
+describe('NavBar Component', () => {
+  const defaultProps: NavBarProps = {
+    title: '页面标题',
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('renders navbar with default props', () => {
+      render(<NavBar {...defaultProps} />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+
+    it('renders navbar with custom title as React node', () => {
+      const customTitle = <span>自定义标题</span>
+      render(<NavBar {...defaultProps} title={customTitle} />)
+
+      expect(screen.getByText('自定义标题')).toBeInTheDocument()
+    })
+
+    it('renders navbar with left content', () => {
+      render(<NavBar {...defaultProps} left={<span>左侧</span>} />)
+
+      expect(screen.getByText('左侧')).toBeInTheDocument()
+    })
+
+    it('renders navbar with right content', () => {
+      render(<NavBar {...defaultProps} right={<span>右侧</span>} />)
+
+      expect(screen.getByText('右侧')).toBeInTheDocument()
+    })
+
+    it('renders navbar with back arrow', () => {
+      render(<NavBar {...defaultProps} backArrow={true} />)
+
+      expect(screen.getByText('←')).toBeInTheDocument()
+    })
+
+    it('renders navbar with custom back icon', () => {
+      const customBackIcon = <span>返回</span>
+      render(<NavBar {...defaultProps} backArrow={true} backIcon={customBackIcon} />)
+
+      expect(screen.getByText('返回')).toBeInTheDocument()
+    })
+
+    it('renders navbar without border', () => {
+      render(<NavBar {...defaultProps} border={false} />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+
+    it('renders navbar with transparent background', () => {
+      render(<NavBar {...defaultProps} transparent={true} />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+
+    it('renders navbar with dark theme', () => {
+      render(<NavBar {...defaultProps} theme="dark" />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+
+    it('renders navbar without placeholder', () => {
+      render(<NavBar {...defaultProps} placeholder={false} />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+  })
+
+  describe('User Interactions', () => {
+    it('handles back button click with custom handler', () => {
+      const onBack = vi.fn()
+      render(<NavBar {...defaultProps} backArrow={true} onBack={onBack} />)
+
+      fireEvent.click(screen.getByText('←'))
+
+      expect(onBack).toHaveBeenCalled()
+    })
+
+    it('handles left content click', () => {
+      const LeftComponent = () => <button onClick={() => {}}>左侧按钮</button>
+      render(<NavBar {...defaultProps} left={<LeftComponent />} />)
+
+      fireEvent.click(screen.getByText('左侧按钮'))
+    })
+
+    it('handles right content click', () => {
+      const RightComponent = () => <button onClick={() => {}}>右侧按钮</button>
+      render(<NavBar {...defaultProps} right={<RightComponent />} />)
+
+      fireEvent.click(screen.getByText('右侧按钮'))
+    })
+  })
+
+  describe('Ref Methods', () => {
+    it('provides ref methods', () => {
+      const ref = React.createRef<NavBarRef>()
+      render(<NavBar {...defaultProps} ref={ref} />)
+
+      expect(ref.current).toBeTruthy()
+      expect(ref.current?.setTitle).toBeDefined()
+      expect(ref.current?.setLeft).toBeDefined()
+      expect(ref.current?.setRight).toBeDefined()
+      expect(ref.current?.showBackArrow).toBeDefined()
+      expect(ref.current?.hideBackArrow).toBeDefined()
+    })
+
+    it('setTitle updates the title', () => {
+      const ref = React.createRef<NavBarRef>()
+      render(<NavBar {...defaultProps} ref={ref} />)
+
+      act(() => {
+        ref.current?.setTitle('新标题')
+      })
+
+      expect(screen.getByText('新标题')).toBeInTheDocument()
+    })
+
+    it('setLeft updates the left content', () => {
+      const ref = React.createRef<NavBarRef>()
+      render(<NavBar {...defaultProps} ref={ref} />)
+
+      act(() => {
+        ref.current?.setLeft(<span>新的左侧</span>)
+      })
+
+      expect(screen.getByText('新的左侧')).toBeInTheDocument()
+    })
+
+    it('setRight updates the right content', () => {
+      const ref = React.createRef<NavBarRef>()
+      render(<NavBar {...defaultProps} ref={ref} />)
+
+      act(() => {
+        ref.current?.setRight(<span>新的右侧</span>)
+      })
+
+      expect(screen.getByText('新的右侧')).toBeInTheDocument()
+    })
+
+    it('showBackArrow displays back arrow', () => {
+      const ref = React.createRef<NavBarRef>()
+      render(<NavBar {...defaultProps} ref={ref} />)
+
+      act(() => {
+        ref.current?.showBackArrow()
+      })
+
+      expect(screen.getByText('←')).toBeInTheDocument()
+    })
+
+    it('hideBackArrow hides back arrow', () => {
+      const ref = React.createRef<NavBarRef>()
+      render(<NavBar {...defaultProps} backArrow={true} ref={ref} />)
+
+      expect(screen.getByText('←')).toBeInTheDocument()
+
+      act(() => {
+        ref.current?.hideBackArrow()
+      })
+
+      expect(screen.queryByText('←')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Responsive Design', () => {
+    it('handles safe area inset top', () => {
+      render(<NavBar {...defaultProps} safeAreaInsetTop={true} />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+
+    it('handles fixed positioning', () => {
+      render(<NavBar {...defaultProps} position="fixed" />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+
+    it('handles static positioning', () => {
+      render(<NavBar {...defaultProps} position="static" />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+
+    it('handles different themes', () => {
+      const { rerender } = render(<NavBar {...defaultProps} theme="light" />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+
+      rerender(<NavBar {...defaultProps} theme="dark" />)
+
+      expect(screen.getByText('页面标题')).toBeInTheDocument()
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('handles empty title', () => {
+      render(<NavBar title={undefined} />)
+
+      const navbar = screen.queryByText('页面标题')
+      expect(navbar).not.toBeInTheDocument()
+    })
+
+    it('handles very long title', () => {
+      const longTitle = '这是一个非常非常长的页面标题，用于测试标题截断功能'
+      render(<NavBar title={longTitle} />)
+
+      expect(screen.getByText(longTitle)).toBeInTheDocument()
+    })
+
+    it('handles complex left content', () => {
+      const complexLeft = (
+        <div>
+          <span>图标</span>
+          <span>文字</span>
+          <button>按钮</button>
+        </div>
+      )
+      render(<NavBar {...defaultProps} left={complexLeft} />)
+
+      expect(screen.getByText('图标')).toBeInTheDocument()
+      expect(screen.getByText('文字')).toBeInTheDocument()
+      expect(screen.getByText('按钮')).toBeInTheDocument()
+    })
+
+    it('handles complex right content', () => {
+      const complexRight = (
+        <div>
+          <button>设置</button>
+          <button>分享</button>
+        </div>
+      )
+      render(<NavBar {...defaultProps} right={complexRight} />)
+
+      expect(screen.getByText('设置')).toBeInTheDocument()
+      expect(screen.getByText('分享')).toBeInTheDocument()
+    })
+  })
+
+  describe('Performance', () => {
+    it('renders efficiently with multiple navbars', () => {
+      const { rerender } = render(
+        <div>
+          {[1, 2, 3].map(i => (
+            <NavBar key={i} title={`页面${i}`} />
+          ))}
+        </div>
+      )
+
+      expect(screen.getAllByText(/页面\d/)).toHaveLength(3)
+
+      rerender(
+        <div>
+          {[1, 2, 3, 4].map(i => (
+            <NavBar key={i} title={`页面${i}`} />
+          ))}
+        </div>
+      )
+
+      expect(screen.getAllByText(/页面\d/)).toHaveLength(4)
+    })
+
+    it('handles rapid state changes efficiently', () => {
+      const ref = React.createRef<NavBarRef>()
+      render(<NavBar {...defaultProps} ref={ref} />)
+
+      // 快速更改标题
+      act(() => {
+        for (let i = 0; i < 10; i++) {
+          ref.current?.setTitle(`标题${i}`)
+        }
+      })
+
+      expect(screen.getByText('标题9')).toBeInTheDocument()
+    })
+  })
+})