taro-uno-ui 0.9.0 → 1.0.0

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

@@ -70,7 +70,9 @@ export const MenuItemComponent: React.FC<MenuItemProps> = ({
         })}
         className={item.className}
       >
-        {itemRender ? itemRender(item) : (
+        {itemRender ? (
+          itemRender(item)
+        ) : (
           <Text style={menuStyles.getLabelStyle({ size, selected, disabled: item.disabled, danger: item.danger })}>
             {item.label}
           </Text>
@@ -96,24 +98,20 @@ export const MenuItemComponent: React.FC<MenuItemProps> = ({
     >
       {/* 图标 */}
       {item.icon && (
-        <View style={menuStyles.getIconStyle({ size, selected, disabled: item.disabled })}>
-          {item.icon}
-        </View>
+        <View style={menuStyles.getIconStyle({ size, selected, disabled: item.disabled })}>{item.icon}</View>
       )}
 
       {/* 标签 */}
-      {itemRender ? itemRender(item) : (
+      {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.extra && <View style={menuStyles.extra}>{item.extra}</View>}
 
       {/* 徽章 */}
       {item.badge && (
@@ -123,4 +121,4 @@ export const MenuItemComponent: React.FC<MenuItemProps> = ({
       )}
     </View>
   );
-};
+};

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

@@ -99,14 +99,16 @@ export const SubMenuComponent: React.FC<SubMenuProps> = ({
       >
         {/* 图标 */}
         {item.icon && (
-          <View style={menuStyles.getIconStyle({ size, selected: false, disabled: item.disabled })}>
-            {item.icon}
-          </View>
+          <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 })}>
+        {subMenuTitleRender ? (
+          subMenuTitleRender(item)
+        ) : (
+          <Text
+            style={menuStyles.getLabelStyle({ size, selected: false, disabled: item.disabled, danger: item.danger })}
+          >
             {item.label}
           </Text>
         )}
@@ -145,4 +147,4 @@ export const SubMenuComponent: React.FC<SubMenuProps> = ({
       )}
     </View>
   );
-};
+};

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

@@ -4,9 +4,8 @@
  */
 
 // 导入工具类和类型
-import { MenuUtils } from './Menu.utils';
-import type { MenuItem } from './Menu.types';
 import { menuStyles as menuStylesExport } from './Menu.styles';
+import { MENU_VERSION, MENU_CONFIG, MenuLibraryUtils } from './Menu.constants';
 
 // 导出菜单组件
 export { Menu } from './Menu';
@@ -40,72 +39,8 @@ 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 { MENU_VERSION, MENU_CONFIG, MenuLibraryUtils } from './Menu.constants';
 
 // 默认导出
 export default {
@@ -121,4 +56,4 @@ export default {
   // 配置
   CONFIG: MENU_CONFIG,
   VERSION: MENU_VERSION,
-};
+};

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

@@ -126,4 +126,4 @@ export const navBarStyles = {
       borderBottomColor: '#333333',
     },
   },
-} as const;
+} as const;

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

@@ -94,7 +94,7 @@ export const NavBarComponent = forwardRef<NavBarRef, NavBarProps>((props, ref) =
   const getContainerStyle = () => {
     const baseStyle = {
       ...navBarStyles.container,
-      backgroundColor: backgroundColor || (transparent ? 'transparent' : (theme === 'dark' ? '#1a1a1a' : '#ffffff')),
+      backgroundColor: backgroundColor || (transparent ? 'transparent' : theme === 'dark' ? '#1a1a1a' : '#ffffff'),
       ...(border && !transparent ? navBarStyles.border : {}),
       ...(position === 'fixed' ? navBarStyles.fixed : {}),
       ...style,
@@ -153,7 +153,7 @@ export const NavBarComponent = forwardRef<NavBarRef, NavBarProps>((props, ref) =
         setInternalBackArrow(false);
       },
     }),
-    []
+    [],
   );
 
   // 计算类名
@@ -164,7 +164,9 @@ export const NavBarComponent = forwardRef<NavBarRef, NavBarProps>((props, ref) =
     transparent ? 'taro-uno-navbar--transparent' : '',
     border ? 'taro-uno-navbar--border' : '',
     className || '',
-  ].filter(Boolean).join(' ');
+  ]
+    .filter(Boolean)
+    .join(' ');
 
   return (
     <>
@@ -180,12 +182,7 @@ export const NavBarComponent = forwardRef<NavBarRef, NavBarProps>((props, ref) =
       )}
 
       {/* NavBar容器 */}
-      <View
-        ref={navBarRef}
-        className={containerClassName}
-        style={getContainerStyle()}
-        {...restProps}
-      >
+      <View ref={navBarRef} className={containerClassName} style={getContainerStyle()} {...restProps}>
         {/* 内容区域 */}
         <View className="taro-uno-navbar__content" style={getContentStyle()}>
           {/* 左侧区域 */}
@@ -228,4 +225,4 @@ NavBarComponent.displayName = 'NavBar';
 
 /** 导出NavBar组件 */
 export const NavBar = NavBarComponent;
-export default NavBarComponent;
+export default NavBarComponent;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseComponentProps } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
 
 /** NavBar位置 */
 export type NavBarPosition = 'top' | 'fixed' | 'static';
@@ -24,7 +24,7 @@ export interface NavBarRef {
 }
 
 /** NavBar组件属性 */
-export interface NavBarProps extends BaseComponentProps {
+export interface NavBarProps extends StandardBaseComponentProps {
   /** 标题 */
   title?: React.ReactNode;
   /** 左侧内容 */
@@ -51,4 +51,4 @@ export interface NavBarProps extends BaseComponentProps {
   placeholder?: boolean;
   /** 安全区域适配 */
   safeAreaInsetTop?: boolean;
-}
+}

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

@@ -1,3 +1,3 @@
 export { NavBar } from './NavBar';
 export type { NavBarProps, NavBarRef, NavBarPosition, NavBarTheme } from './NavBar.types';
-export { default } from './NavBar';
+export { default } from './NavBar';

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import { render, screen, fireEvent, act } from '@testing-library/react'
+import { render, fireEvent, screen, act } from '@testing-library/react'
 import { Pagination } from '../Pagination'
 import type { PaginationProps, PaginationRef } from './Pagination.types'
-import { vi } from 'vitest'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
 
 // Mock Taro components
 vi.mock('@tarojs/components', () => ({
@@ -14,7 +14,6 @@ vi.mock('@tarojs/components', () => ({
     return (
       <select {...props} role="combobox" onChange={(e) => {
         const selectedIndex = parseInt(e.target.value);
-        const selectedValue = range ? range[selectedIndex] : selectedIndex;
         onChange && onChange({ detail: { value: selectedIndex } });
       }}>
         {range?.map((value, index) => (

package/src/components/navigation/Pagination/Pagination.tsx

@@ -19,8 +19,8 @@ export const PaginationComponent = forwardRef<PaginationRef, PaginationProps>((p
     pageSizeOptions = [10, 20, 50, 100],
     disabled = false,
     simple = false,
-    showMore = true,
-    showLessItems = false,
+    showMore: _showMore = true,
+    showLessItems: _showLessItems = false,
     position = 'bottom',
     align = 'right',
     itemRender,
@@ -274,7 +274,7 @@ export const PaginationComponent = forwardRef<PaginationRef, PaginationProps>((p
   const renderSizeChanger = () => {
     if (!showSizeChanger) return null;
 
-    const sizeIndex = pageSizeOptions.findIndex(size => size === internalPageSize);
+    const sizeIndex = pageSizeOptions.findIndex((size) => size === internalPageSize);
 
     return (
       <View className="taro-uno-pagination__size-changer">

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 // import { View } from '@tarojs/components'; // Commented out - unused
-import { BaseComponentProps, Size } from '../../../types';
+import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
+import { Size } from '../../../types';
 
 /** 分页尺寸 */
 export type PaginationSize = Size | 'small' | 'medium' | 'large';
@@ -40,7 +41,7 @@ export interface PaginationRef {
 }
 
 /** 分页组件属性 */
-export interface PaginationProps extends BaseComponentProps {
+export interface PaginationProps extends StandardBaseComponentProps {
   /** 当前页码 */
   current?: number;
   /** 默认当前页码 */

package/src/components/navigation/Pagination/index.ts

@@ -1,6 +1,6 @@
 /**
  * Pagination 分页组件
- * 
+ *
  * 企业级分页组件，支持：
  * - 多种尺寸和样式配置
  * - 简单模式和完整模式
@@ -11,8 +11,14 @@
  */
 
 export { Pagination, PaginationComponent } from './Pagination';
-export type { PaginationProps, PaginationRef, PaginationSize, PaginationPosition, PaginationAlign } from './Pagination.types';
+export type {
+  PaginationProps,
+  PaginationRef,
+  PaginationSize,
+  PaginationPosition,
+  PaginationAlign,
+} from './Pagination.types';
 export { paginationStyles } from './Pagination.styles';
 
 // 默认导出
-export { Pagination as default } from './Pagination';
+export { Pagination as default } from './Pagination';

package/src/components/navigation/Steps/Step.tsx

@@ -1,56 +1,36 @@
-import React, { forwardRef, useImperativeHandle } from 'react'
-import { View, Text } from '@tarojs/components'
-import { StepProps, StepRef } from './Steps.types'
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { View, Text } from '@tarojs/components';
+import { StepProps, StepRef } from './Steps.types';
 import {
   getStepItemStyle,
   getStepIconStyle,
   getStepContentStyle,
   getStepTitleStyle,
-  getStepDescriptionStyle
-} from './Steps.styles'
+  getStepDescriptionStyle,
+} from './Steps.styles';
 
-export const Step = forwardRef<StepRef, StepProps>(({
-  className,
-  style,
-  title,
-  description,
-  status = 'wait',
-  icon,
-  disabled,
-  stepNumber,
-  ...props
-}, ref) => {
-  const stepRef = React.useRef<any>(null)
+export const Step = forwardRef<StepRef, StepProps>(
+  ({ className, style, title, description, status = 'wait', icon, disabled: _disabled, stepNumber, ...props }, ref) => {
+    const stepRef = React.useRef<any>(null);
 
-  useImperativeHandle(ref, () => ({
-    getStep: () => stepRef.current,
-  }))
+    useImperativeHandle(ref, () => ({
+      getStep: () => stepRef.current,
+    }));
 
-  return (
-    <View
-      className={className}
-      style={style}
-      {...props}
-    >
-      <View style={getStepItemStyle()}>
-        <View style={getStepIconStyle(status)}>
-          {icon || stepNumber}
-        </View>
-        <View style={getStepContentStyle()}>
-          <Text style={getStepTitleStyle(status)}>
-            {title}
-          </Text>
-          {description && (
-            <Text style={getStepDescriptionStyle()}>
-              {description}
-            </Text>
-          )}
+    return (
+      <View className={className} style={style} {...props}>
+        <View style={getStepItemStyle()}>
+          <View style={getStepIconStyle(status)}>{icon || stepNumber}</View>
+          <View style={getStepContentStyle()}>
+            <Text style={getStepTitleStyle(status)}>{title}</Text>
+            {description && <Text style={getStepDescriptionStyle()}>{description}</Text>}
+          </View>
         </View>
       </View>
-    </View>
-  )
-})
+    );
+  },
+);
 
-Step.displayName = 'Step'
+Step.displayName = 'Step';
 
-export default Step
+export default Step;

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

@@ -97,58 +97,73 @@ export const stepsStyles = {
     width: 1,
     height: '100%',
   },
-}
+};
 
 export const getStepsStyle = (direction?: 'horizontal' | 'vertical', customStyle?: React.CSSProperties) => ({
   ...stepsStyles.steps,
   ...(direction === 'horizontal' && stepsStyles.stepsHorizontal),
   ...(direction === 'vertical' && stepsStyles.stepsVertical),
   ...customStyle,
-})
+});
 
-export const getStepStyle = (direction?: 'horizontal' | 'vertical', isLast?: boolean, customStyle?: React.CSSProperties) => ({
+export const getStepStyle = (
+  direction?: 'horizontal' | 'vertical',
+  isLast?: boolean,
+  customStyle?: React.CSSProperties,
+) => ({
   ...stepsStyles.step,
   ...(direction === 'horizontal' && stepsStyles.stepHorizontal),
   ...(direction === 'vertical' && stepsStyles.stepVertical),
   ...(isLast && stepsStyles.stepLast),
   ...customStyle,
-})
+});
 
 export const getStepItemStyle = (customStyle?: React.CSSProperties) => ({
   ...stepsStyles.stepItem,
   ...customStyle,
-})
+});
 
-export const getStepIconStyle = (status?: 'wait' | 'process' | 'finish' | 'error', size?: 'default' | 'small', customStyle?: React.CSSProperties) => ({
+export const getStepIconStyle = (
+  status?: 'wait' | 'process' | 'finish' | 'error',
+  size?: 'default' | 'small',
+  customStyle?: React.CSSProperties,
+) => ({
   ...stepsStyles.stepIcon,
   ...(status === 'process' && stepsStyles.stepIconProcess),
   ...(status === 'finish' && stepsStyles.stepIconFinish),
   ...(status === 'error' && stepsStyles.stepIconError),
   ...(size === 'small' && stepsStyles.stepIconSmall),
   ...customStyle,
-})
+});
 
 export const getStepContentStyle = (customStyle?: React.CSSProperties) => ({
   ...stepsStyles.stepContent,
   ...customStyle,
-})
+});
 
-export const getStepTitleStyle = (status?: 'wait' | 'process' | 'finish' | 'error', customStyle?: React.CSSProperties) => ({
+export const getStepTitleStyle = (
+  status?: 'wait' | 'process' | 'finish' | 'error',
+  customStyle?: React.CSSProperties,
+) => ({
   ...stepsStyles.stepTitle,
   ...(status === 'process' && stepsStyles.stepTitleProcess),
   ...(status === 'finish' && stepsStyles.stepTitleFinish),
   ...(status === 'error' && stepsStyles.stepTitleError),
   ...customStyle,
-})
+});
 
 export const getStepDescriptionStyle = (customStyle?: React.CSSProperties) => ({
   ...stepsStyles.stepDescription,
   ...customStyle,
-})
+});
 
-export const getStepTailStyle = (direction?: 'horizontal' | 'vertical', isFinish?: boolean, customStyle?: React.CSSProperties) => ({
+export const getStepTailStyle = (
+  direction?: 'horizontal' | 'vertical',
+  isFinish?: boolean,
+  customStyle?: React.CSSProperties,
+) => ({
   ...stepsStyles.stepTail,
   ...(isFinish && stepsStyles.stepTailFinish),
   ...(direction === 'vertical' && stepsStyles.stepVerticalTail),
   ...customStyle,
-})
+});

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

@@ -1,6 +1,8 @@
 import { render, screen } from '@testing-library/react'
 import React from 'react'
 import { Steps } from './Steps'
+import { describe, it, expect } from 'vitest'
+import '@testing-library/jest-dom'
 
 describe('Steps', () => {
   it('renders step items', () => {