taro-uno-ui 0.9.0-beta

package/src/components/feedback/Result/Result.tsx

@@ -0,0 +1,233 @@
+import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text } from '@tarojs/components';
+import type { ResultProps, ResultRef, ResultStatus } from './Result.types';
+
+/** 结果组件 */
+export const ResultComponent = forwardRef<ResultRef, ResultProps>((props, ref) => {
+  const {
+    status = 'info',
+    title: propTitle,
+    subTitle: propSubTitle,
+    icon,
+    extra,
+    children,
+    size = 'medium',
+    className,
+    style,
+    ...restProps
+  } = props;
+
+  const containerRef = useRef<any>(null);
+  const [internalStatus, setInternalStatus] = useState<ResultStatus>(status);
+  const [internalTitle, setInternalTitle] = useState(propTitle);
+  const [internalSubTitle, setInternalSubTitle] = useState(propSubTitle);
+
+  // 更新内部状态
+  useEffect(() => {
+    setInternalStatus(status);
+  }, [status]);
+
+  useEffect(() => {
+    setInternalTitle(propTitle);
+  }, [propTitle]);
+
+  useEffect(() => {
+    setInternalSubTitle(propSubTitle);
+  }, [propSubTitle]);
+
+  // 获取状态图标
+  const getStatusIcon = useCallback(() => {
+    if (icon) {
+      return icon;
+    }
+
+    const iconMap: Record<ResultStatus, string> = {
+      success: '✓',
+      error: '✗',
+      info: 'ℹ',
+      warning: '⚠',
+      loading: '⏳',
+      '404': '404',
+      '403': '403',
+      '500': '500',
+    };
+
+    return iconMap[internalStatus] || '';
+  }, [icon, internalStatus]);
+
+  // 获取状态颜色
+  const getStatusColor = useCallback(() => {
+    const colorMap: Record<ResultStatus, string> = {
+      success: '#22c55e',
+      error: '#ef4444',
+      info: '#0ea5e9',
+      warning: '#f59e0b',
+      loading: '#6b7280',
+      '404': '#6b7280',
+      '403': '#6b7280',
+      '500': '#6b7280',
+    };
+
+    return colorMap[internalStatus] || '#6b7280';
+  }, [internalStatus]);
+
+  // 获取状态文本
+  const getStatusText = useCallback(() => {
+    const textMap: Record<ResultStatus, string> = {
+      success: '成功',
+      error: '失败',
+      info: '信息',
+      warning: '警告',
+      loading: '加载中',
+      '404': '页面不存在',
+      '403': '无权访问',
+      '500': '服务器错误',
+    };
+
+    return textMap[internalStatus] || internalStatus;
+  }, [internalStatus]);
+
+  // 暴露给外部的引用方法
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      element: containerRef.current,
+      getStatus: () => internalStatus,
+      setStatus: (newStatus: ResultStatus) => {
+        setInternalStatus(newStatus);
+      },
+      setTitle: (newTitle: React.ReactNode) => {
+        setInternalTitle(newTitle);
+      },
+      setSubTitle: (newSubTitle: React.ReactNode) => {
+        setInternalSubTitle(newSubTitle);
+      },
+      reset: () => {
+        setInternalStatus(status);
+        setInternalTitle(propTitle);
+        setInternalSubTitle(propSubTitle);
+      },
+    }),
+    [internalStatus, status, propTitle, propSubTitle],
+  );
+
+  // 生成容器样式
+  const containerStyle = {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: size === 'small' ? '16px' : size === 'large' ? '48px' : '32px',
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    ...style,
+  };
+
+  // 生成图标容器样式
+  const iconContainerStyle = {
+    marginBottom: '16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  // 生成图标样式
+  const iconStyle = {
+    fontSize: size === 'small' ? '24px' : size === 'large' ? '48px' : '36px',
+    color: getStatusColor(),
+    fontWeight: 'bold' as const,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: size === 'small' ? '40px' : size === 'large' ? '80px' : '60px',
+    height: size === 'small' ? '40px' : size === 'large' ? '80px' : '60px',
+    borderRadius: '50%',
+    backgroundColor: `${getStatusColor()}20`,
+    border: `2px solid ${getStatusColor()}`,
+  };
+
+  // 生成内容容器样式
+  const contentStyle = {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center' as const,
+    gap: '8px',
+  };
+
+  // 生成标题样式
+  const titleStyle = {
+    fontSize: size === 'small' ? '16px' : size === 'large' ? '24px' : '20px',
+    fontWeight: 'bold' as const,
+    color: '#1f2937',
+    margin: 0,
+  };
+
+  // 生成副标题样式
+  const subTitleStyle = {
+    fontSize: size === 'small' ? '12px' : size === 'large' ? '16px' : '14px',
+    color: '#6b7280',
+    margin: 0,
+    lineHeight: 1.5,
+  };
+
+  // 生成子内容样式
+  const childrenStyle = {
+    marginTop: '16px',
+    width: '100%',
+  };
+
+  // 生成额外内容样式
+  const extraStyle = {
+    marginTop: '16px',
+    display: 'flex',
+    gap: '8px',
+  };
+
+  return (
+    <View
+      ref={containerRef}
+      style={containerStyle}
+      {...restProps}
+    >
+      <View style={iconContainerStyle}>
+        <View style={iconStyle}>
+          <Text>{getStatusIcon()}</Text>
+        </View>
+      </View>
+      
+      <View style={contentStyle}>
+        <View style={titleStyle}>
+          <Text>{internalTitle || getStatusText()}</Text>
+        </View>
+        
+        {internalSubTitle && (
+          <View style={subTitleStyle}>
+            <Text>{internalSubTitle}</Text>
+          </View>
+        )}
+        
+        {children && (
+          <View style={childrenStyle}>
+            {children}
+          </View>
+        )}
+        
+        {extra && (
+          <View style={extraStyle}>
+            {extra}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+});
+
+/** 结果组件显示名称 */
+ResultComponent.displayName = 'Result';
+
+/** 导出结果组件 */
+export const Result = ResultComponent;
+export default Result;

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

@@ -0,0 +1,128 @@
+import React from 'react';
+
+export type ResultStatus = 'success' | 'error' | 'info' | 'warning' | 'loading' | '404' | '403' | '500';
+
+export interface ResultProps {
+  /** 结果状态 */
+  status?: ResultStatus;
+  /** 标题文字 */
+  title?: React.ReactNode;
+  /** 副标题文字 */
+  subTitle?: React.ReactNode;
+  /** 自定义图标 */
+  icon?: React.ReactNode;
+  /** 操作区域 */
+  extra?: React.ReactNode;
+  /** 子组件 */
+  children?: React.ReactNode;
+  /** 结果尺寸 */
+  size?: ResultSize;
+  /** 自定义样式类名 */
+  className?: string;
+  /** 自定义样式 */
+  style?: React.CSSProperties;
+}
+
+export interface ResultRef {
+  /** 获取当前状态 */
+  getStatus: () => ResultStatus;
+  /** 设置状态 */
+  setStatus: (_status: ResultStatus) => void;
+  /** 设置标题 */
+  setTitle: (_title: React.ReactNode) => void;
+  /** 设置副标题 */
+  setSubTitle: (_subTitle: React.ReactNode) => void;
+}
+
+export type ResultSize = 'small' | 'medium' | 'large';
+
+export interface ResultConfig {
+  /** 默认状态 */
+  defaultStatus?: ResultStatus;
+  /** 默认尺寸 */
+  defaultSize?: ResultSize;
+  /** 是否显示图标 */
+  showIcon?: boolean;
+  /** 图标尺寸 */
+  iconSize?: number;
+  /** 图标颜色 */
+  iconColor?: string;
+  /** 标题文字样式 */
+  titleStyle?: React.CSSProperties;
+  /** 副标题文字样式 */
+  subTitleStyle?: React.CSSProperties;
+  /** 内容区域样式 */
+  contentStyle?: React.CSSProperties;
+  /** 操作区域样式 */
+  extraStyle?: React.CSSProperties;
+}
+
+export interface ResultUtils {
+  /** 获取状态对应的颜色 */
+  getStatusColor: (_status: ResultStatus) => string;
+  /** 获取状态对应的图标 */
+  getStatusIcon: (_status: ResultStatus) => React.ReactNode;
+  /** 获取状态对应的默认标题 */
+  getStatusTitle: (_status: ResultStatus) => string;
+  /** 格式化结果数据 */
+  formatResultData: (_data: any) => any;
+  /** 验证状态是否有效 */
+  validateStatus: (_status: string) => boolean;
+}
+
+export const ResultUtils: ResultUtils = {
+  getStatusColor: (status: ResultStatus) => {
+    const colorMap = {
+      success: '#22c55e',
+      error: '#ef4444',
+      info: '#0ea5e9',
+      warning: '#f59e0b',
+      loading: '#6b7280',
+      404: '#6b7280',
+      403: '#6b7280',
+      500: '#6b7280',
+    };
+    return colorMap[status] || '#6b7280';
+  },
+  
+  getStatusIcon: (status: ResultStatus) => {
+    const iconMap = {
+      success: '✓',
+      error: '✗',
+      info: 'ℹ',
+      warning: '⚠',
+      loading: '⏳',
+      404: '404',
+      403: '403',
+      500: '500',
+    };
+    return iconMap[status] || '';
+  },
+  
+  getStatusTitle: (status: ResultStatus) => {
+    const titleMap = {
+      success: '成功',
+      error: '失败',
+      info: '信息',
+      warning: '警告',
+      loading: '加载中',
+      404: '页面不存在',
+      403: '无权访问',
+      500: '服务器错误',
+    };
+    return titleMap[status] || status;
+  },
+  
+  formatResultData: (data: any) => {
+    return {
+      ...data,
+      timestamp: new Date().toISOString(),
+      formattedTime: new Date().toLocaleString(),
+    };
+  },
+  
+  validateStatus: (status: string) => {
+    const validStatuses = ['success', 'error', 'info', 'warning', 'loading', '404', '403', '500'];
+    return validStatuses.includes(status);
+  },
+};

package/src/components/feedback/Result/index.tsx

@@ -0,0 +1,3 @@
+export { Result } from './Result';
+export type { ResultProps, ResultRef, ResultStatus } from './Result.types';
+export { resultStyles } from './Result.styles';

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

@@ -0,0 +1,17 @@
+/**
+ * Toast 组件样式
+ */
+
+export const toastStyles = {
+  container: 'fixed bottom-12 left-0 right-0 flex items-center z-[1000]',
+  content: 'bg-black/80 rounded-lg px-4 py-3 flex flex-row items-center min-w-[200px] max-w-[80%]',
+  text: 'text-sm text-white ml-2 flex-1',
+  icon: 'text-base text-white',
+
+  // 类型样式
+  success: 'bg-green-500/90',
+  error: 'bg-red-500/90',
+  warning: 'bg-yellow-500/90',
+  info: 'bg-blue-500/90',
+  loading: 'bg-gray-500/90'
+};

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

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { Toast } from './Toast'
+
+describe('Toast', () => {
+  it('shows message when visible', () => {
+    render(<Toast visible message="提示信息" />)
+    expect(screen.getByText('提示信息')).toBeInTheDocument()
+  })
+})