taro-uno-ui 0.9.0-beta

package/src/components/feedback/Loading/Loading.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef } from 'react';
+import { View, Text } from '@tarojs/components';
+import { cn } from '../../../utils';
+import { LoadingStyles } from './Loading.styles';
+import type { LoadingProps, LoadingRef } from './Loading.types';
+
+export const Loading = forwardRef<LoadingRef, LoadingProps>((props, ref) => {
+  const { type = 'spinner', size = 'default', text, delay = 0, style, ...rest } = props;
+
+  const [visible, setVisible] = React.useState(delay === 0);
+  const elementRef = React.useRef<any>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    getElement: () => elementRef.current,
+    show: () => {
+      setVisible(true);
+    },
+    hide: () => {
+      setVisible(false);
+    },
+  }));
+
+  React.useEffect(() => {
+    if (delay > 0) {
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, delay);
+      return () => clearTimeout(timer);
+    }
+    setVisible(true);
+    return undefined;
+  }, [delay]);
+
+  const renderSpinner = () => {
+    const baseSpinnerStyle = LoadingStyles['spinner'] as React.CSSProperties;
+    const sizeStyle = (LoadingStyles['spinnerSize'] as any)[size] as React.CSSProperties;
+    const spinnerStyle = { ...baseSpinnerStyle, ...sizeStyle };
+
+    return (
+      <View style={spinnerStyle}>
+        <View style={LoadingStyles['spinnerInner'] as React.CSSProperties} />
+      </View>
+    );
+  };
+
+  const renderDots = () => {
+    const baseDotStyle = LoadingStyles['dot'] as React.CSSProperties;
+    const sizeStyle = (LoadingStyles['dotSize'] as any)[size] as React.CSSProperties;
+    const dotStyle = { ...baseDotStyle, ...sizeStyle };
+
+    return (
+      <View style={LoadingStyles['dots'] as React.CSSProperties}>
+        {[0, 1, 2].map((index) => (
+          <View
+            key={index}
+            style={{
+              ...dotStyle,
+              animationDelay: `${index * 0.2}s`,
+            }}
+          />
+        ))}
+      </View>
+    );
+  };
+
+  const renderPulse = () => {
+    const basePulseStyle = LoadingStyles['pulse'] as React.CSSProperties;
+    const sizeStyle = (LoadingStyles['pulseSize'] as any)[size] as React.CSSProperties;
+    const pulseStyle = { ...basePulseStyle, ...sizeStyle };
+
+    return (
+      <View style={LoadingStyles['pulseContainer'] as React.CSSProperties}>
+        <View style={pulseStyle} />
+      </View>
+    );
+  };
+
+  const renderBars = () => {
+    const baseBarStyle = LoadingStyles['bar'] as React.CSSProperties;
+    const sizeStyle = (LoadingStyles['barSize'] as any)[size] as React.CSSProperties;
+    const barStyle = { ...baseBarStyle, ...sizeStyle };
+
+    return (
+      <View style={LoadingStyles['bars'] as React.CSSProperties}>
+        {[0, 1, 2, 3].map((index) => (
+          <View
+            key={index}
+            style={{
+              ...barStyle,
+              animationDelay: `${index * 0.1}s`,
+            }}
+          />
+        ))}
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    switch (type) {
+      case 'spinner':
+        return renderSpinner();
+      case 'dots':
+        return renderDots();
+      case 'pulse':
+        return renderPulse();
+      case 'bars':
+        return renderBars();
+      default:
+        return renderSpinner();
+    }
+  };
+
+  const loadingClasses = cn('taro-uno-loading', `taro-uno-loading--${size}`, rest.className);
+
+  if (!visible) return null;
+
+  return (
+    <View ref={elementRef} className={loadingClasses} style={{...LoadingStyles['base'] as React.CSSProperties, ...style}} {...rest}>
+      {renderContent()}
+      {text && <Text style={LoadingStyles['text'] as React.CSSProperties}>{text}</Text>}
+    </View>
+  );
+});
+
+Loading.displayName = 'Loading';
+
+export default Loading;

package/src/components/feedback/Loading/Loading.types.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/** 加载类型 */
+export type LoadingType = 'spinner' | 'dots' | 'pulse' | 'bars';
+
+/** 加载尺寸 */
+export type LoadingSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';
+
+export interface LoadingProps {
+  /** 加载类型 */
+  type?: LoadingType;
+  /** 尺寸 */
+  size?: LoadingSize;
+  /** 颜色 */
+  color?: string;
+  /** 文本内容 */
+  text?: string;
+  /** 延迟显示时间 */
+  delay?: number;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+export interface LoadingRef {
+  /** 获取元素 */
+  getElement: () => HTMLElement | null;
+  /** 显示加载 */
+  show: () => void;
+  /** 隐藏加载 */
+  hide: () => void;
+}

package/src/components/feedback/Loading/index.ts

@@ -0,0 +1,9 @@
+import LoadingComponent from './Loading';
+
+export { LoadingComponent as Loading };
+export type {
+  LoadingProps,
+  LoadingRef,
+} from './Loading.types';
+
+export default LoadingComponent;

package/src/components/feedback/Message/Message.styles.ts

@@ -0,0 +1,41 @@
+/**
+ * Message 组件样式
+ */
+
+export const messageStyles = {
+  container: 'p-3 rounded-lg mb-2 flex flex-row items-center justify-between',
+  content: 'flex-1 flex flex-row items-center',
+  text: 'text-sm leading-5 ml-2',
+  icon: 'text-base',
+  close: 'text-base ml-2',
+
+  // 类型样式
+  success: 'bg-blue-50 border border-blue-200',
+  error: 'bg-red-50 border border-red-200',
+  warning: 'bg-yellow-50 border border-yellow-200',
+  info: 'bg-blue-50 border border-blue-200',
+
+  // 文本颜色
+  textSuccess: 'text-green-800',
+  textError: 'text-red-800',
+  textWarning: 'text-yellow-800',
+  textInfo: 'text-blue-800',
+
+  // 新增缺失的样式属性
+  base: 'p-3 rounded-lg mb-2 flex flex-row items-center justify-between',
+  type: {
+    success: 'bg-blue-50 border border-blue-200',
+    error: 'bg-red-50 border border-red-200',
+    warning: 'bg-yellow-50 border border-yellow-200',
+    info: 'bg-blue-50 border border-blue-200'
+  },
+  iconType: {
+    success: 'text-green-600',
+    error: 'text-red-600',
+    warning: 'text-yellow-600',
+    info: 'text-blue-600'
+  },
+  iconText: 'text-base',
+  title: 'text-sm font-medium text-gray-900 mb-1',
+  closeText: 'text-gray-400 hover:text-gray-600'
+};

package/src/components/feedback/Message/Message.test.tsx

@@ -0,0 +1,234 @@
+/**
+ * Message 组件测试
+ * 测试消息提示组件的各种功能
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { Message } from './Message';
+
+describe('Message Component', () => {
+  const mockOnClose = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe('基础渲染', () => {
+    it('应该正确渲染消息内容', () => {
+      render(<Message content="Test message" />);
+      expect(screen.getByText('Test message')).toBeInTheDocument();
+    });
+
+    it('应该渲染标题和内容', () => {
+      render(
+        <Message
+          title="Success"
+          content="Operation completed successfully"
+          type="success"
+        />
+      );
+      expect(screen.getByText('Success')).toBeInTheDocument();
+      expect(screen.getByText('Operation completed successfully')).toBeInTheDocument();
+    });
+
+    it('应该支持空内容', () => {
+      render(<Message content="" />);
+      const message = screen.getByTestId('message-component');
+      expect(message).toBeInTheDocument();
+    });
+  });
+
+  describe('消息类型', () => {
+    it('应该渲染成功类型的消息', () => {
+      const { container } = render(
+        <Message content="Success message" type="success" />
+      );
+      expect(container.firstChild).toHaveClass('message-success');
+    });
+
+    it('应该渲染错误类型的消息', () => {
+      const { container } = render(
+        <Message content="Error message" type="error" />
+      );
+      expect(container.firstChild).toHaveClass('message-error');
+    });
+
+    it('应该渲染警告类型的消息', () => {
+      const { container } = render(
+        <Message content="Warning message" type="warning" />
+      );
+      expect(container.firstChild).toHaveClass('message-warning');
+    });
+
+    it('应该渲染信息类型的消息', () => {
+      const { container } = render(
+        <Message content="Info message" type="info" />
+      );
+      expect(container.firstChild).toHaveClass('message-info');
+    });
+  });
+
+  describe('自动关闭功能', () => {
+    it('应该在指定时间后自动关闭', () => {
+      render(
+        <Message
+          content="Auto-close message"
+          duration={3000}
+          onClose={mockOnClose}
+        />
+      );
+
+      act(() => {
+        vi.advanceTimersByTime(3000);
+      });
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('不应该自动关闭当duration为0', () => {
+      render(
+        <Message
+          content="Persistent message"
+          duration={0}
+          onClose={mockOnClose}
+        />
+      );
+
+      act(() => {
+        vi.advanceTimersByTime(5000);
+      });
+
+      expect(mockOnClose).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('关闭功能', () => {
+    it('应该支持手动关闭', () => {
+      render(
+        <Message
+          content="Closable message"
+          closable
+          onClose={mockOnClose}
+        />
+      );
+
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      fireEvent.click(closeButton);
+
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+
+    it('不应该显示关闭按钮当closable为false', () => {
+      render(
+        <Message
+          content="Non-closable message"
+          closable={false}
+        />
+      );
+
+      const closeButton = screen.queryByRole('button', { name: /close/i });
+      expect(closeButton).not.toBeInTheDocument();
+    });
+  });
+
+  describe('图标功能', () => {
+    it('应该显示默认图标', () => {
+      render(
+        <Message
+          content="Message with icon"
+          type="success"
+        />
+      );
+
+      const icon = screen.getByTestId('message-icon');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('应该支持自定义图标', () => {
+      render(
+        <Message
+          content="Message with custom icon"
+          icon="🎉"
+        />
+      );
+
+      expect(screen.getByText('🎉')).toBeInTheDocument();
+    });
+  });
+
+  describe('Ref API', () => {
+    it('应该暴露正确的ref方法', () => {
+      const ref = React.createRef<any>();
+      render(
+        <Message
+          content="Test message"
+          ref={ref}
+          onClose={mockOnClose}
+        />
+      );
+
+      expect(ref.current).toBeTruthy();
+      expect(typeof ref.current.hide).toBe('function');
+      expect(typeof ref.current.show).toBe('function');
+      expect(typeof ref.current.update).toBe('function');
+    });
+
+    it('应该通过ref隐藏消息', () => {
+      const ref = React.createRef<any>();
+      render(
+        <Message
+          content="Test message"
+          ref={ref}
+          onClose={mockOnClose}
+        />
+      );
+
+      act(() => {
+        ref.current.hide();
+      });
+      expect(mockOnClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('无障碍性', () => {
+    it('应该有正确的ARIA角色', () => {
+      render(<Message content="Test message" type="info" />);
+      const message = screen.getByTestId('message-component');
+      expect(message).toHaveAttribute('role', 'alert');
+    });
+  });
+
+  describe('边缘情况', () => {
+    it('应该处理极长的消息内容', () => {
+      const longMessage = 'A'.repeat(1000);
+      render(<Message content={longMessage} />);
+      expect(screen.getByText(/A+/)).toBeInTheDocument();
+    });
+
+    it('应该处理特殊字符', () => {
+      render(<Message content="Special: @#$%^&*()" />);
+      expect(screen.getByText('Special: @#$%^&*()')).toBeInTheDocument();
+    });
+  });
+
+  describe('类型安全', () => {
+    it('应该接受正确的props类型', () => {
+      const props = {
+        type: 'success' as const,
+        content: 'Typed message',
+        duration: 5000,
+        closable: true,
+        onClose: mockOnClose,
+      };
+
+      expect(() => render(<Message {...props} />)).not.toThrow();
+    });
+  });
+});

package/src/components/feedback/Message/Message.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef } from 'react';
+import { View, Text } from '@tarojs/components';
+import { MessageProps, MessageRef } from './Message.types';
+import { cn } from '../../../utils';
+import { messageStyles } from './Message.styles';
+
+export const Message = forwardRef<MessageRef, MessageProps>((props, ref) => {
+  const {
+    type = 'info',
+    title,
+    content,
+    icon,
+    closable = false,
+    duration = 3000,
+    className,
+    style,
+    onClose,
+    ...rest
+  } = props;
+  const [visible, setVisible] = React.useState(true);
+
+  React.useImperativeHandle(ref, () => ({
+    hide: () => {
+      setVisible(false);
+      onClose?.();
+      return true;
+    },
+    show: () => {
+      setVisible(true);
+      return true;
+    },
+    update: (newProps: Partial<MessageProps>) => {
+      // 这里可以实现更新消息内容的逻辑
+      console.log('Update message:', newProps);
+      return true;
+    },
+  }));
+
+  React.useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        setVisible(false);
+        onClose?.();
+      }, duration);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [duration, onClose]);
+
+  const handleClose = () => {
+    setVisible(false);
+    onClose?.();
+  };
+
+  const renderIcon = () => {
+    if (icon) {
+      return <View className={messageStyles['icon']}>{icon}</View>;
+    }
+
+    const defaultIcons = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ',
+    };
+
+    return (
+      <View className={cn(messageStyles['icon'], messageStyles['iconType'][type])}>
+        <Text className={messageStyles['iconText']}>{defaultIcons[type]}</Text>
+      </View>
+    );
+  };
+
+  const messageClasses = cn(messageStyles['base'], messageStyles['type'][type], className);
+
+  if (!visible) return null;
+
+  return (
+    <View ref={ref} className={messageClasses} style={style} {...rest}>
+      {renderIcon()}
+      <View className={messageStyles['content']}>
+        {title && <Text className={messageStyles['title']}>{title}</Text>}
+        {content && <Text className={messageStyles['text']}>{content}</Text>}
+      </View>
+      {closable && (
+        <View className={messageStyles['close']} onClick={handleClose}>
+          <Text className={messageStyles['closeText']}>✕</Text>
+        </View>
+      )}
+    </View>
+  );
+});
+
+Message.displayName = 'Message';
+
+export default Message;

package/src/components/feedback/Message/Message.types.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+
+/** 消息类型 */
+export type MessageType = 'success' | 'error' | 'warning' | 'info';
+
+/** 消息位置 */
+export type MessagePosition = 'top' | 'bottom' | 'center' | 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
+
+export interface MessageProps {
+  /** 消息类型 */
+  type?: MessageType;
+  /** 消息标题 */
+  title?: React.ReactNode;
+  /** 消息内容 */
+  content?: React.ReactNode;
+  /** 自定义图标 */
+  icon?: React.ReactNode;
+  /** 是否可关闭 */
+  closable?: boolean;
+  /** 显示时长（毫秒） */
+  duration?: number;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 关闭回调 */
+  onClose?: () => void;
+}
+
+export interface MessageRef {
+  /** 显示消息 */
+  show: () => void;
+  /** 隐藏消息 */
+  hide: () => void;
+  /** 更新消息内容 */
+  update: (_props: Partial<MessageProps>) => void;
+}

package/src/components/feedback/Message/index.ts

@@ -0,0 +1,9 @@
+import MessageComponent from './Message';
+
+export { MessageComponent as Message };
+export type {
+  MessageProps,
+  MessageRef,
+} from './Message.types';
+
+export default MessageComponent;

package/src/components/feedback/Modal/Modal.styles.ts

@@ -0,0 +1,21 @@
+/**
+ * Modal 组件样式
+ */
+
+export const modalStyles = {
+  container: 'fixed inset-0 flex items-center justify-center bg-black/50 z-50',
+  content: 'bg-white rounded-xl p-6 min-w-[320px] max-w-[80%]',
+  header: 'flex flex-row justify-between items-center mb-4',
+  title: 'text-lg font-semibold text-gray-900',
+  close: 'text-xl text-gray-500',
+  body: 'mb-6',
+  text: 'text-sm leading-5 text-gray-600',
+  footer: 'flex flex-row justify-end gap-3',
+  button: 'px-4 py-2 rounded-lg min-w-[80px]',
+  buttonText: 'text-sm font-medium text-center',
+
+  // 按钮类型
+  primary: 'bg-blue-500 text-white hover:bg-blue-600',
+  secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
+  danger: 'bg-red-500 text-white hover:bg-red-600'
+};

package/src/components/feedback/Modal/Modal.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { Modal } from './Modal'
+
+describe('Modal', () => {
+  it('renders with title and content', () => {
+    render(<Modal visible title="标题">内容</Modal>)
+    expect(screen.getByText('标题')).toBeInTheDocument()
+    expect(screen.getByText('内容')).toBeInTheDocument()
+  })
+})