taro-uno-ui 0.9.0-beta

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

@@ -0,0 +1,231 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import { navBarStyles } from './NavBar.styles';
+import type { NavBarProps, NavBarRef } from './NavBar.types';
+
+/** NavBar组件 */
+export const NavBarComponent = forwardRef<NavBarRef, NavBarProps>((props, ref) => {
+  const {
+    title,
+    left,
+    right,
+    backArrow = false,
+    backIcon,
+    onBack,
+    position = 'fixed',
+    theme = 'light',
+    backgroundColor,
+    transparent = false,
+    border = true,
+    placeholder = true,
+    safeAreaInsetTop = true,
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const [internalTitle, setInternalTitle] = useState(title);
+  const [internalLeft, setInternalLeft] = useState(left);
+  const [internalRight, setInternalRight] = useState(right);
+  const [internalBackArrow, setInternalBackArrow] = useState(backArrow);
+
+  const navBarRef = useRef<any>(null);
+
+  // 同步外部状态
+  useEffect(() => {
+    setInternalTitle(title);
+  }, [title]);
+
+  useEffect(() => {
+    setInternalLeft(left);
+  }, [left]);
+
+  useEffect(() => {
+    setInternalRight(right);
+  }, [right]);
+
+  useEffect(() => {
+    setInternalBackArrow(backArrow);
+  }, [backArrow]);
+
+  // 处理返回按钮点击
+  const handleBack = useCallback(() => {
+    onBack?.();
+    // 如果没有提供onBack，默认执行页面返回
+    if (!onBack && typeof window !== 'undefined' && window.history) {
+      window.history.back();
+    }
+  }, [onBack]);
+
+  // 渲染返回按钮
+  const renderBackArrow = () => {
+    if (!internalBackArrow) return null;
+
+    return (
+      <View
+        className="taro-uno-navbar__back-arrow"
+        onClick={handleBack}
+        style={{
+          padding: '8px 12px',
+          backgroundColor: 'transparent',
+          border: 'none',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'background-color 0.3s ease',
+        }}
+      >
+        <Text
+          className="taro-uno-navbar__back-icon"
+          style={{
+            fontSize: '16px',
+            color: theme === 'dark' ? '#ffffff' : '#000000',
+          }}
+        >
+          {backIcon || '←'}
+        </Text>
+      </View>
+    );
+  };
+
+  // 计算容器样式
+  const getContainerStyle = () => {
+    const baseStyle = {
+      ...navBarStyles.container,
+      backgroundColor: backgroundColor || (transparent ? 'transparent' : (theme === 'dark' ? '#1a1a1a' : '#ffffff')),
+      ...(border && !transparent ? navBarStyles.border : {}),
+      ...(position === 'fixed' ? navBarStyles.fixed : {}),
+      ...style,
+    };
+
+    if (position === 'fixed' && safeAreaInsetTop) {
+      return {
+        ...baseStyle,
+        paddingTop: '44px',
+      };
+    }
+
+    return baseStyle;
+  };
+
+  // 计算内容区域样式
+  const getContentStyle = () => {
+    const baseStyle = {
+      height: '44px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '0 16px',
+      boxSizing: 'border-box' as const,
+    };
+
+    if (position === 'fixed' && safeAreaInsetTop) {
+      return {
+        ...baseStyle,
+        height: '88px',
+        paddingTop: '44px',
+      };
+    }
+
+    return baseStyle;
+  };
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: navBarRef.current,
+      setTitle: (newTitle) => {
+        setInternalTitle(newTitle);
+      },
+      setLeft: (newLeft) => {
+        setInternalLeft(newLeft);
+      },
+      setRight: (newRight) => {
+        setInternalRight(newRight);
+      },
+      showBackArrow: () => {
+        setInternalBackArrow(true);
+      },
+      hideBackArrow: () => {
+        setInternalBackArrow(false);
+      },
+    }),
+    []
+  );
+
+  // 计算类名
+  const containerClassName = [
+    'taro-uno-navbar',
+    `taro-uno-navbar--${position}`,
+    `taro-uno-navbar--${theme}`,
+    transparent ? 'taro-uno-navbar--transparent' : '',
+    border ? 'taro-uno-navbar--border' : '',
+    className || '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <>
+      {/* 固定定位时的占位元素 */}
+      {position === 'fixed' && placeholder && (
+        <View
+          className="taro-uno-navbar__placeholder"
+          style={{
+            height: safeAreaInsetTop ? '88px' : '44px',
+            backgroundColor: 'transparent',
+          }}
+        />
+      )}
+
+      {/* NavBar容器 */}
+      <View
+        ref={navBarRef}
+        className={containerClassName}
+        style={getContainerStyle()}
+        {...restProps}
+      >
+        {/* 内容区域 */}
+        <View className="taro-uno-navbar__content" style={getContentStyle()}>
+          {/* 左侧区域 */}
+          <View className="taro-uno-navbar__left" style={navBarStyles.left}>
+            {internalLeft}
+            {!internalLeft && renderBackArrow()}
+          </View>
+
+          {/* 中间区域 */}
+          <View className="taro-uno-navbar__center" style={navBarStyles.center}>
+            <Text
+              className="taro-uno-navbar__title"
+              style={{
+                fontSize: '17px',
+                fontWeight: '600',
+                color: theme === 'dark' ? '#ffffff' : '#000000',
+                textAlign: 'center',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+              numberOfLines={1}
+            >
+              {internalTitle}
+            </Text>
+          </View>
+
+          {/* 右侧区域 */}
+          <View className="taro-uno-navbar__right" style={navBarStyles.right}>
+            {internalRight}
+          </View>
+        </View>
+      </View>
+    </>
+  );
+});
+
+/** NavBar组件显示名称 */
+NavBarComponent.displayName = 'NavBar';
+
+/** 导出NavBar组件 */
+export const NavBar = NavBarComponent;
+export default NavBarComponent;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { BaseComponentProps } from '../../../types';
+
+/** NavBar位置 */
+export type NavBarPosition = 'top' | 'fixed' | 'static';
+
+/** NavBar主题 */
+export type NavBarTheme = 'light' | 'dark';
+
+/** NavBar引用 */
+export interface NavBarRef {
+  /** 获取元素引用 */
+  element: any | null;
+  /** 设置标题 */
+  setTitle: (_title: React.ReactNode) => void;
+  /** 设置左侧内容 */
+  setLeft: (_left: React.ReactNode) => void;
+  /** 设置右侧内容 */
+  setRight: (_right: React.ReactNode) => void;
+  /** 显示返回按钮 */
+  showBackArrow: () => void;
+  /** 隐藏返回按钮 */
+  hideBackArrow: () => void;
+}
+
+/** NavBar组件属性 */
+export interface NavBarProps extends BaseComponentProps {
+  /** 标题 */
+  title?: React.ReactNode;
+  /** 左侧内容 */
+  left?: React.ReactNode;
+  /** 右侧内容 */
+  right?: React.ReactNode;
+  /** 是否显示返回按钮 */
+  backArrow?: boolean;
+  /** 自定义返回按钮 */
+  backIcon?: React.ReactNode;
+  /** 返回按钮点击事件 */
+  onBack?: () => void;
+  /** 位置 */
+  position?: NavBarPosition;
+  /** 主题 */
+  theme?: NavBarTheme;
+  /** 背景色 */
+  backgroundColor?: string;
+  /** 是否透明背景 */
+  transparent?: boolean;
+  /** 是否显示边框 */
+  border?: boolean;
+  /** 固定定位时的占位高度 */
+  placeholder?: boolean;
+  /** 安全区域适配 */
+  safeAreaInsetTop?: boolean;
+}

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

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

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

@@ -0,0 +1,187 @@
+import type { PaginationProps, PaginationSize } from './Pagination.types';
+
+/** Pagination组件样式管理器 */
+export const paginationStyles = {
+  /** 尺寸映射表 */
+  SIZE_MAP: {
+    small: 24,
+    medium: 32,
+    large: 40,
+    default: 32,
+  } as const,
+
+  /**
+   * 获取基础样式
+   */
+  getBaseStyle: (props: PaginationProps): React.CSSProperties => {
+    const { align = 'right', style = {} } = props;
+
+    // 计算对齐方式
+    const justifyContent = align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end';
+
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent,
+      gap: '8px',
+      padding: '16px 0',
+      ...style,
+    };
+  },
+
+  /**
+   * 获取类名
+   */
+  getClassName: (props: PaginationProps): string => {
+    const {
+      size = 'default',
+      position = 'bottom',
+      align = 'right',
+      disabled = false,
+      simple = false,
+      className = '',
+    } = props;
+
+    const baseClass = 'taro-uno-pagination';
+    const sizeClass = `${baseClass}--${size}`;
+    const positionClass = `${baseClass}--${position}`;
+    const alignClass = `${baseClass}--${align}`;
+    const disabledClass = disabled ? `${baseClass}--disabled` : '';
+    const simpleClass = simple ? `${baseClass}--simple` : '';
+
+    return [baseClass, sizeClass, positionClass, alignClass, disabledClass, simpleClass, className]
+      .filter(Boolean)
+      .join(' ');
+  },
+
+  /**
+   * 获取按钮样式
+   */
+  getButtonStyle: (props: { active?: boolean; disabled?: boolean; size: PaginationSize }): React.CSSProperties => {
+    const { active = false, disabled = false, size } = props;
+
+    const height = paginationStyles.SIZE_MAP[size as keyof typeof paginationStyles.SIZE_MAP];
+
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: `${height}px`,
+      height: `${height}px`,
+      padding: '0 8px',
+      border: '1px solid var(--border-color)',
+      borderRadius: '4px',
+      backgroundColor: active ? 'var(--primary-color)' : 'var(--background-color)',
+      color: active ? 'var(--primary-foreground)' : 'var(--text-color)',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.5 : 1,
+      transition: 'all 0.3s ease',
+      fontSize: '14px',
+      boxSizing: 'border-box',
+    };
+  },
+
+  /**
+   * 获取页码按钮样式
+   */
+  getPageButtonStyle: (props: { active?: boolean; disabled?: boolean; size: PaginationSize }): React.CSSProperties => {
+    const { active = false, disabled = false, size } = props;
+
+    const height = paginationStyles.SIZE_MAP[size as keyof typeof paginationStyles.SIZE_MAP];
+
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: `${height}px`,
+      height: `${height}px`,
+      padding: '0 8px',
+      border: active ? '1px solid var(--primary-color)' : '1px solid var(--border-color)',
+      borderRadius: '4px',
+      backgroundColor: active ? 'var(--primary-color)' : 'var(--background-color)',
+      color: active ? 'var(--primary-foreground)' : 'var(--text-color)',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      opacity: disabled ? 0.5 : 1,
+      transition: 'all 0.3s ease',
+      fontSize: '14px',
+      boxSizing: 'border-box',
+    };
+  },
+
+  /**
+   * 获取跳转按钮样式
+   */
+  getJumpButtonStyle: (size: PaginationSize): React.CSSProperties => {
+    const height = paginationStyles.SIZE_MAP[size as keyof typeof paginationStyles.SIZE_MAP];
+
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: `${height}px`,
+      height: `${height}px`,
+      padding: '0 8px',
+      border: '1px solid var(--border-color)',
+      borderRadius: '4px',
+      backgroundColor: 'var(--background-color)',
+      color: 'var(--text-color)',
+      cursor: 'pointer',
+      transition: 'all 0.3s ease',
+      fontSize: '14px',
+      boxSizing: 'border-box',
+    };
+  },
+
+  /**
+   * 获取总数样式
+   */
+  getTotalStyle: (): React.CSSProperties => {
+    return {
+      color: 'var(--text-color-secondary)',
+      fontSize: '14px',
+      marginRight: '16px',
+    };
+  },
+
+  /**
+   * 获取快速跳转样式
+   */
+  getQuickJumperStyle: (): React.CSSProperties => {
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      marginLeft: '16px',
+    };
+  },
+
+  /**
+   * 获取输入框样式
+   */
+  getInputStyle: (): React.CSSProperties => {
+    return {
+      width: '50px',
+      height: '32px',
+      padding: '0 8px',
+      border: '1px solid var(--border-color)',
+      borderRadius: '4px',
+      fontSize: '14px',
+      textAlign: 'center',
+      boxSizing: 'border-box',
+    };
+  },
+
+  /**
+   * 获取选择器样式
+   */
+  getSelectStyle: (): React.CSSProperties => {
+    return {
+      height: '32px',
+      padding: '0 8px',
+      border: '1px solid var(--border-color)',
+      borderRadius: '4px',
+      fontSize: '14px',
+      boxSizing: 'border-box',
+    };
+  },
+};