taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,221 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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 ResultUtilsType {
-  /** 获取状态对应的颜色 */
-  getStatusColor: (_status: ResultStatus) => string;
-  /** 获取状态对应的图标 */
-  getStatusIcon: (_status: ResultStatus) => React.ReactNode;
-  /** 获取状态对应的默认标题 */
-  getStatusTitle: (_status: ResultStatus) => string;
-  /** 格式化结果数据 */
-  formatResultData: (_data: any) => any;
-  /** 验证状态是否有效 */
-  validateStatus: (_status: string) => boolean;
-}
-
-export const ResultUtils: ResultUtilsType = {
-  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

@@ -1,3 +0,0 @@
-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

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,10 +0,0 @@
-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()
-  })
-})