taro-uno-ui 0.9.0-beta

package/src/components/display/Card/Card.styles.ts

@@ -0,0 +1,89 @@
+import { createStyles } from '@/theme/styles';
+
+export const CardStyles = createStyles({
+  base: 'bg-white dark:bg-gray-800 rounded-lg overflow-hidden transition-all duration-200',
+
+  shadow: {
+    none: '',
+    small: 'shadow-sm',
+    default: 'shadow-md',
+    large: 'shadow-lg'
+  },
+
+  bordered: `
+    border border-gray-200 dark:border-gray-700
+  `,
+
+  hoverable: `
+    hover:shadow-lg
+    hover:scale-[1.02]
+    cursor-pointer
+  `,
+
+  loading: `
+    opacity-70
+    pointer-events-none
+  `,
+
+  cover: `
+    w-full
+    h-48
+    overflow-hidden
+  `,
+
+  header: `
+    flex
+    items-center
+    justify-between
+    p-4
+    border-b border-gray-200 dark:border-gray-700
+  `,
+
+  headerContent: `
+    flex-1
+  `,
+
+  title: `
+    text-lg
+    font-semibold
+    text-gray-900 dark:text-white
+  `,
+
+  subtitle: `
+    text-sm
+    text-gray-500 dark:text-gray-400
+    mt-1
+  `,
+
+  extra: `
+    flex-shrink-0
+  `,
+
+  content: `
+    p-4
+  `,
+
+  loadingContent: `
+    space-y-3
+  `,
+
+  loadingSkeleton: `
+    h-4
+    bg-gray-200 dark:bg-gray-700
+    rounded
+    animate-pulse
+  `,
+
+  actions: `
+    flex
+    items-center
+    justify-end
+    p-4
+    border-t border-gray-200 dark:border-gray-700
+    space-x-2
+  `,
+
+  action: `
+    flex-shrink-0
+  `
+});

package/src/components/display/Card/Card.test.tsx

@@ -0,0 +1,180 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { vi } from 'vitest'
+import { Card } from './Card'
+
+// Mock Taro components
+vi.mock('@tarojs/components', () => ({
+  View: ({ children, ...props }) => {
+    const { className, style, id, role, hidden, onClick, ...rest } = props as any
+    const allowed: Record<string, any> = { className, style, id, role, hidden, onClick }
+    Object.keys(rest).forEach((key) => {
+      if (key.startsWith('aria-') || key.startsWith('data-')) {
+        allowed[key] = rest[key]
+      }
+    })
+    return <div {...allowed}>{children}</div>
+  },
+}))
+
+// Mock @/utils
+vi.mock('@/utils', () => ({
+  cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
+  PlatformDetector: {
+    getPlatform: () => 'h5',
+  },
+}))
+
+describe('Card Component', () => {
+  const mockOnPress = vi.fn()
+
+  beforeEach(() => {
+    mockOnPress.mockClear()
+  })
+
+  test('renders basic card', () => {
+    render(<Card>Card Content</Card>)
+    expect(screen.getByText('Card Content')).toBeInTheDocument()
+  })
+
+  test('renders card with title', () => {
+    render(<Card title="Card Title">Content</Card>)
+    expect(screen.getByText('Card Title')).toBeInTheDocument()
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  test('renders card with title and subtitle', () => {
+    render(
+      <Card title="Card Title" subtitle="Card Subtitle">
+        Content
+      </Card>
+    )
+    expect(screen.getByText('Card Title')).toBeInTheDocument()
+    expect(screen.getByText('Card Subtitle')).toBeInTheDocument()
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  test('renders card with extra content', () => {
+    render(
+      <Card title="Card Title" extra={<button>Extra</button>}>
+        Content
+      </Card>
+    )
+    expect(screen.getByText('Card Title')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Extra' })).toBeInTheDocument()
+  })
+
+  test('renders card with cover', () => {
+    render(
+      <Card cover={<div data-testid="cover">Cover</div>}>
+        Content
+      </Card>
+    )
+    expect(screen.getByTestId('cover')).toBeInTheDocument()
+  })
+
+  test('renders card with actions', () => {
+    const actions = [
+      <button key="1">Action 1</button>,
+      <button key="2">Action 2</button>
+    ]
+    render(
+      <Card actions={actions}>
+        Content
+      </Card>
+    )
+    expect(screen.getByText('Action 1')).toBeInTheDocument()
+    expect(screen.getByText('Action 2')).toBeInTheDocument()
+  })
+
+  test('handles press event when hoverable', () => {
+    render(
+      <Card hoverable onPress={mockOnPress}>
+        Content
+      </Card>
+    )
+    const card = screen.getByTestId('card')
+    fireEvent.click(card)
+    expect(mockOnPress).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not handle press event when not hoverable', () => {
+    render(
+      <Card onPress={mockOnPress}>
+        Content
+      </Card>
+    )
+    const card = screen.getByTestId('card')
+    fireEvent.click(card)
+    expect(mockOnPress).not.toHaveBeenCalled()
+  })
+
+  test('shows loading state', () => {
+    render(<Card loading>Content</Card>)
+    const card = screen.getByTestId('card')
+    expect(card).toHaveClass('opacity-70')
+    expect(card).toHaveClass('pointer-events-none')
+    expect(card).toHaveClass('taro-uno-h5-card--loading')
+    expect(screen.getByTestId('card-loading-content')).toBeInTheDocument()
+  })
+
+  test('applies border when bordered', () => {
+    render(<Card bordered>Content</Card>)
+    const card = screen.getByTestId('card')
+    expect(card).toHaveClass('taro-uno-h5-card--bordered')
+    expect(card).toHaveAttribute('data-bordered', 'true')
+  })
+
+  test('does not apply border when not bordered', () => {
+    render(<Card bordered={false}>Content</Card>)
+    const card = screen.getByTestId('card')
+    expect(card).not.toHaveClass('taro-uno-h5-card--bordered')
+    expect(card).toHaveAttribute('data-bordered', 'false')
+  })
+
+  test('applies shadow based on shadow prop', () => {
+    const { rerender } = render(<Card shadow="none">Content</Card>)
+    let card = screen.getByTestId('card')
+    expect(card).not.toHaveClass('taro-uno-h5-card--shadow-small')
+    expect(card).not.toHaveClass('taro-uno-h5-card--shadow-default')
+    expect(card).not.toHaveClass('taro-uno-h5-card--shadow-large')
+    expect(card).toHaveAttribute('data-shadow', 'none')
+
+    rerender(<Card shadow="small">Content</Card>)
+    card = screen.getByTestId('card')
+    expect(card).toHaveClass('taro-uno-h5-card--shadow-small')
+    expect(card).toHaveAttribute('data-shadow', 'small')
+
+    rerender(<Card shadow="default">Content</Card>)
+    card = screen.getByTestId('card')
+    expect(card).toHaveClass('taro-uno-h5-card--shadow-default')
+    expect(card).toHaveAttribute('data-shadow', 'default')
+
+    rerender(<Card shadow="large">Content</Card>)
+    card = screen.getByTestId('card')
+    expect(card).toHaveClass('taro-uno-h5-card--shadow-large')
+    expect(card).toHaveAttribute('data-shadow', 'large')
+  })
+
+  test('applies custom className', () => {
+    render(<Card className="custom-class">Content</Card>)
+    const card = screen.getByTestId('card')
+    expect(card).toHaveClass('custom-class')
+  })
+
+  test('applies custom style', () => {
+    const customStyle = { backgroundColor: 'red' }
+    render(<Card style={customStyle}>Content</Card>)
+    const card = screen.getByTestId('card')
+    const styleAttr = card.getAttribute('style')
+    expect(styleAttr).toContain('background-color: red')
+  })
+
+  test('forwards ref correctly', () => {
+    const ref = React.createRef<any>()
+    render(<Card ref={ref}>Content</Card>)
+    expect(ref.current).toBeTruthy()
+    expect(ref.current.getElement).toBeTruthy()
+    expect(screen.getByTestId('card')).toBe(ref.current.getElement())
+  })
+})

package/src/components/display/Card/Card.tsx

@@ -0,0 +1,135 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { View } from '@tarojs/components';
+import { CardProps, CardRef } from './Card.types';
+import { cn } from '@/utils/index';
+import { CardStyles } from './Card.styles';
+
+export const Card = forwardRef<CardRef, CardProps>((props, ref) => {
+  const {
+    children,
+    title,
+    subtitle,
+    extra,
+    cover,
+    actions,
+    hoverable = false,
+    bordered = true,
+    shadow = 'default',
+    loading = false,
+    className,
+    style,
+    onPress,
+    onLongPress,
+    ...rest
+  } = props;
+
+  // Create ref for DOM element access
+  const innerRef = React.useRef<any>(null);
+
+  // Handle ref forwarding
+  useImperativeHandle(ref, () => ({
+    getElement: () => innerRef.current,
+    getTitle: () => title?.toString() || null,
+    getContent: () => innerRef.current?.querySelector('[data-testid="card-content"]'),
+  }));
+
+  const handlePress = (e: any) => {
+    if (hoverable && onPress) {
+      onPress(e);
+    }
+  };
+
+  const renderCover = () => {
+    if (!cover) return null;
+    return (
+      <View className={CardStyles['cover']} data-testid="card-cover">
+        {cover}
+      </View>
+    );
+  };
+
+  const renderHeader = () => {
+    if (!title && !subtitle && !extra) return null;
+    return (
+      <View className={CardStyles['header']} data-testid="card-header">
+        <View className={CardStyles['headerContent']}>
+          {title && (
+            <View className={CardStyles['title']} data-testid="card-title">
+              {title}
+            </View>
+          )}
+          {subtitle && (
+            <View className={CardStyles['subtitle']} data-testid="card-subtitle">
+              {subtitle}
+            </View>
+          )}
+        </View>
+        {extra && (
+          <View className={CardStyles['extra']} data-testid="card-extra">
+            {extra}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const renderActions = () => {
+    if (!actions || actions.length === 0) return null;
+    return (
+      <View className={CardStyles['actions']} data-testid="card-actions">
+        {actions.map((action, index) => (
+          <View key={index} className={CardStyles['action']} data-testid={`card-action-${index}`}>
+            {action}
+          </View>
+        ))}
+      </View>
+    );
+  };
+
+  const cardClasses = cn(
+    'taro-uno-h5-card',
+    CardStyles['base'],
+    CardStyles['shadow'][shadow],
+    bordered && CardStyles['bordered'],
+    bordered && 'taro-uno-h5-card--bordered',
+    shadow && `taro-uno-h5-card--shadow-${shadow}`,
+    hoverable && CardStyles['hoverable'],
+    hoverable && 'taro-uno-h5-card--hoverable',
+    loading && CardStyles['loading'],
+    loading && 'taro-uno-h5-card--loading',
+    className,
+  );
+
+  return (
+    <View
+      ref={innerRef}
+      className={cardClasses}
+      style={style}
+      onClick={handlePress}
+      onLongPress={onLongPress}
+            data-testid="card"
+      data-shadow={shadow}
+      data-bordered={bordered}
+      data-hoverable={hoverable}
+      data-loading={loading}
+      {...rest}
+    >
+      {renderCover()}
+      {renderHeader()}
+      <View className={CardStyles['content']} data-testid="card-content">
+        {loading ? (
+          <View className={CardStyles['loadingContent']} data-testid="card-loading-content">
+            <View className={CardStyles['loadingSkeleton']} data-testid="card-loading-skeleton" />
+            <View className={CardStyles['loadingSkeleton']} data-testid="card-loading-skeleton" />
+            <View className={CardStyles['loadingSkeleton']} data-testid="card-loading-skeleton" />
+          </View>
+        ) : (
+          children
+        )}
+      </View>
+      {renderActions()}
+    </View>
+  );
+});
+
+Card.displayName = 'Card';

package/src/components/display/Card/Card.types.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { BaseComponentProps } from '../../../types';
+
+export interface CardProps extends BaseComponentProps {
+  /** 卡片内容 */
+  children: React.ReactNode;
+  /** 卡片标题 */
+  title?: React.ReactNode;
+  /** 卡片副标题 */
+  subtitle?: React.ReactNode;
+  /** 卡片操作区域 */
+  extra?: React.ReactNode;
+  /** 卡片封面 */
+  cover?: React.ReactNode;
+  /** 卡片操作按钮 */
+  actions?: React.ReactNode[];
+  /** 是否可点击 */
+  hoverable?: boolean;
+  /** 是否显示边框 */
+  bordered?: boolean;
+  /** 阴影级别 */
+  shadow?: 'none' | 'small' | 'default' | 'large';
+  /** 加载状态 */
+  loading?: boolean;
+  /** 自定义类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+  /** 点击事件 */
+  onPress?: (_event: any) => void;
+  /** 长按事件 */
+  onLongPress?: (_event: any) => void;
+}
+
+export interface CardRef {
+  /** 获取卡片元素 */
+  getElement: () => HTMLElement | null;
+  /** 获取卡片标题 */
+  getTitle: () => string | null;
+  /** 获取卡片内容 */
+  getContent: () => HTMLElement | null;
+}
+
+export interface CardStyleProps {
+  /** 平台类型 */
+  platform: string;
+  /** 阴影级别 */
+  shadow: CardProps['shadow'];
+  /** 是否可点击 */
+  hoverable: boolean;
+  /** 是否显示边框 */
+  bordered: boolean;
+  /** 加载状态 */
+  loading: boolean;
+}

package/src/components/display/Card/index.ts

@@ -0,0 +1,3 @@
+export { Card } from './Card';
+export { CardStyles as cardStyles } from './Card.styles';
+export type { CardProps, CardRef } from './Card.types';

package/src/components/display/Carousel/Carousel.styles.ts

@@ -0,0 +1,206 @@
+import type { CSSProperties } from 'react';
+
+export const carouselStyles: Record<string, CSSProperties> = {
+  base: {
+    position: 'relative',
+    overflow: 'hidden',
+    width: '100%',
+    height: '200px',
+  },
+  
+  vertical: {
+    height: '300px',
+  },
+  
+  // 容器
+  container: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+  },
+  
+  // 轮播项包装器
+  wrapper: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    transition: 'transform 0.3s ease-in-out',
+  },
+  
+  wrapperVertical: {
+    flexDirection: 'column',
+  },
+  
+  wrapperNoTransition: {
+    transition: 'none',
+  },
+  
+  // 轮播项
+  slide: {
+    position: 'relative',
+    flexShrink: 0,
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+  },
+  
+  slideMultiple: {
+    width: 'calc(100% / var(--slides-to-show))',
+  },
+  
+  slideVertical: {
+    width: '100%',
+    height: 'calc(100% / var(--slides-to-show))',
+  },
+  
+  // 淡入淡出效果
+  slideFade: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    opacity: 0,
+    transition: 'opacity 0.3s ease-in-out',
+  },
+  
+  slideFadeActive: {
+    opacity: 1,
+  },
+  
+  // 指示器
+  dots: {
+    position: 'absolute',
+    display: 'flex',
+    gap: '8px',
+    padding: '8px',
+    zIndex: 1,
+  },
+  
+  dotsBottom: {
+    bottom: '12px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  
+  dotsTop: {
+    top: '12px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  
+  dotsLeft: {
+    left: '12px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    flexDirection: 'column',
+  },
+  
+  dotsRight: {
+    right: '12px',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    flexDirection: 'column',
+  },
+  
+  dot: {
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    cursor: 'pointer',
+    transition: 'all 0.3s ease',
+    border: '1px solid rgba(255, 255, 255, 0.3)',
+  },
+  
+  dotActive: {
+    backgroundColor: '#ffffff',
+    transform: 'scale(1.2)',
+  },
+  
+  dotHover: {
+    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  },
+  
+  // 箭头
+  arrows: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 1,
+  },
+  
+  arrowPrev: {
+    left: '12px',
+  },
+  
+  arrowNext: {
+    right: '12px',
+  },
+  
+  arrowButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '32px',
+    height: '32px',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    color: '#ffffff',
+    border: 'none',
+    borderRadius: '50%',
+    cursor: 'pointer',
+    fontSize: '16px',
+    transition: 'all 0.3s ease',
+    userSelect: 'none',
+  },
+  
+  arrowButtonHover: {
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    transform: 'translateY(-50%) scale(1.1)',
+  },
+  
+  arrowButtonDisabled: {
+    opacity: 0.3,
+    cursor: 'not-allowed',
+  },
+  
+  // 垂直模式箭头
+  arrowVertical: {
+    left: '50%',
+    transform: 'translateX(-50%)',
+  },
+  
+  arrowVerticalPrev: {
+    top: '12px',
+  },
+  
+  arrowVerticalNext: {
+    bottom: '12px',
+  },
+  
+  arrowVerticalButtonHover: {
+    transform: 'translateX(-50%) scale(1.1)',
+  },
+  
+  // 加载状态
+  loading: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#f5f5f5',
+    color: '#8c8c8c',
+  },
+  
+  loadingIcon: {
+    width: '20px',
+    height: '20px',
+    border: '2px solid #f0f0f0',
+    borderTop: '2px solid #1890ff',
+    borderRadius: '50%',
+    animation: 'spin 1s linear infinite',
+    marginRight: '8px',
+  },
+};