taro-uno-ui 0.9.0 → 1.0.0

package/dist/components/basic/Video/Video.types.d.ts

@@ -0,0 +1,447 @@
+/**
+ * Taro-Uno Video Component Types
+ * 视频组件类型定义
+ */
+import type { ReactNode } from 'react';
+/**
+ * 视频尺寸
+ */
+export declare enum VideoSize {
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    FULL = "full"
+}
+/**
+ * 视频变体
+ */
+export declare enum VideoVariant {
+    DEFAULT = "default",
+    ROUNDED = "rounded",
+    BORDERED = "bordered",
+    SHADOW = "shadow"
+}
+/**
+ * 视频状态
+ */
+export declare enum VideoStatus {
+    IDLE = "idle",
+    PLAYING = "playing",
+    PAUSED = "paused",
+    ENDED = "ended",
+    ERROR = "error",
+    LOADING = "loading"
+}
+/**
+ * 播放模式
+ */
+export declare enum PlayMode {
+    INLINE = "inline",
+    FULLSCREEN = "fullscreen",
+    PICTURE_IN_PICTURE = "picture-in-picture"
+}
+/**
+ * 循环模式
+ */
+export declare enum LoopMode {
+    OFF = "off",
+    ALL = "all",
+    ONE = "one"
+}
+/**
+ * 播放速率
+ */
+export declare enum PlaybackRate {
+    SLOWEST = 0.5,
+    SLOW = 0.75,
+    NORMAL = 1,
+    FAST = 1.25,
+    FASTER = 1.5,
+    FASTEST = 2
+}
+/**
+ * 控制栏位置
+ */
+export declare enum ControlsPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    BOTH = "both"
+}
+/**
+ * 音量类型
+ */
+export declare enum VolumeType {
+    MUTE = "mute",
+    LOW = "low",
+    MEDIUM = "medium",
+    HIGH = "high",
+    MAX = "max"
+}
+/**
+ * 错误代码
+ */
+export declare enum VideoErrorCode {
+    NETWORK_ERROR = "network_error",
+    DECODE_ERROR = "decode_error",
+    NOT_SUPPORTED = "not_supported",
+    PERMISSION_DENIED = "permission_denied",
+    UNKNOWN = "unknown"
+}
+/**
+ * 视频源
+ */
+export interface VideoSource {
+    /** 视频URL */
+    src: string;
+    /** 视频类型 */
+    type?: string;
+    /** 视频标题 */
+    title?: string;
+    /** 视频描述 */
+    description?: string;
+    /** 视频封面 */
+    poster?: string;
+}
+/**
+ * 视频章节
+ */
+export interface VideoChapter {
+    /** 章节ID */
+    id: string;
+    /** 章节标题 */
+    title: string;
+    /** 章节开始时间（秒） */
+    startTime: number;
+    /** 章节结束时间（秒） */
+    endTime: number;
+    /** 章节描述 */
+    description?: string;
+    /** 章节图标 */
+    icon?: ReactNode;
+}
+/**
+ * 水印配置
+ */
+export interface WatermarkConfig {
+    /** 水印内容 */
+    content: string;
+    /** 水印位置 */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+    /** 水印样式 */
+    style?: React.CSSProperties;
+    /** 水印透明度 */
+    opacity?: number;
+    /** 水印字体大小 */
+    fontSize?: number;
+    /** 水印旋转角度 */
+    rotate?: number;
+}
+/**
+ * 广告配置
+ */
+export interface AdConfig {
+    /** 广告ID */
+    id: string;
+    /** 广告视频URL */
+    src: string;
+    /** 广告时长（秒） */
+    duration: number;
+    /** 广告标题 */
+    title?: string;
+    /** 广告描述 */
+    description?: string;
+    /** 广告封面 */
+    poster?: string;
+    /** 可跳过时间（秒） */
+    skipAfter?: number;
+    /** 广告链接 */
+    link?: string;
+    /** 广告点击事件 */
+    onClick?: (ad: AdConfig) => void;
+}
+/**
+ * 视频控制配置
+ */
+export interface VideoControlsConfig {
+    /** 是否显示控制栏 */
+    show?: boolean;
+    /** 控制栏位置 */
+    position?: ControlsPosition;
+    /** 控制栏高度 */
+    height?: number;
+    /** 控制栏透明度 */
+    opacity?: number;
+    /** 控制栏显示延迟（毫秒） */
+    hideDelay?: number;
+    /** 自定义控制栏样式 */
+    style?: React.CSSProperties;
+    /** 自定义控制栏内容 */
+    render?: (props: VideoProps, state: VideoState) => ReactNode;
+    /** 是否显示播放按钮 */
+    showPlayButton?: boolean;
+    /** 是否显示进度条 */
+    showProgressBar?: boolean;
+    /** 是否显示时间 */
+    showTime?: boolean;
+    /** 是否显示音量控制 */
+    showVolume?: boolean;
+    /** 是否显示全屏按钮 */
+    showFullscreen?: boolean;
+    /** 是否显示播放速率按钮 */
+    showPlaybackRate?: boolean;
+    /** 是否显示画中画按钮 */
+    showPictureInPicture?: boolean;
+    /** 是否显示设置按钮 */
+    showSettings?: boolean;
+    /** 是否显示章节标记 */
+    showChapters?: boolean;
+}
+/**
+ * 视频状态
+ */
+export interface VideoState {
+    /** 播放状态 */
+    status: VideoStatus;
+    /** 播放模式 */
+    mode: PlayMode;
+    /** 当前时间（秒） */
+    currentTime: number;
+    /** 总时长（秒） */
+    duration: number;
+    /** 缓冲进度 */
+    buffered: number;
+    /** 音量（0-1） */
+    volume: number;
+    /** 是否静音 */
+    muted: boolean;
+    /** 播放速率 */
+    playbackRate: PlaybackRate;
+    /** 是否全屏 */
+    isFullscreen: boolean;
+    /** 是否画中画 */
+    isPictureInPicture: boolean;
+    /** 视频尺寸 */
+    videoWidth: number;
+    /** 视频高度 */
+    videoHeight: number;
+    /** 加载进度 */
+    loaded: number;
+    /** 错误信息 */
+    error?: VideoError;
+    /** 当前播放的源 */
+    currentSource?: VideoSource;
+    /** 当前章节 */
+    currentChapter?: VideoChapter;
+    /** 是否正在拖动进度条 */
+    isDragging: boolean;
+    /** 是否显示控制栏 */
+    isControlsVisible: boolean;
+    /** 是否显示选项菜单 */
+    isOptionsMenuVisible: boolean;
+}
+/**
+ * 视频错误信息
+ */
+export interface VideoError {
+    /** 错误代码 */
+    code: VideoErrorCode;
+    /** 错误信息 */
+    message: string;
+    /** 原始错误对象 */
+    originalError?: unknown;
+}
+/**
+ * 视频事件
+ */
+export interface VideoEvents {
+    /** 播放事件 */
+    onPlay?: (state: VideoState) => void;
+    /** 暂停事件 */
+    onPause?: (state: VideoState) => void;
+    /** 播放结束事件 */
+    onEnded?: (state: VideoState) => void;
+    /** 时间更新事件 */
+    onTimeUpdate?: (state: VideoState) => void;
+    /** 缓冲事件 */
+    onBuffering?: (state: VideoState) => void;
+    /** 缓冲结束事件 */
+    onBuffered?: (state: VideoState) => void;
+    /** 音量变化事件 */
+    onVolumeChange?: (state: VideoState) => void;
+    /** 播放速率变化事件 */
+    onPlaybackRateChange?: (state: VideoState) => void;
+    /** 全屏变化事件 */
+    onFullscreenChange?: (isFullscreen: boolean, state: VideoState) => void;
+    /** 画中画变化事件 */
+    onPictureInPictureChange?: (isPictureInPicture: boolean, state: VideoState) => void;
+    /** 加载开始事件 */
+    onLoadStart?: (state: VideoState) => void;
+    /** 加载完成事件 */
+    onLoaded?: (state: VideoState) => void;
+    /** 错误事件 */
+    onError?: (error: VideoError, state: VideoState) => void;
+    /** 章节变化事件 */
+    onChapterChange?: (chapter: VideoChapter, state: VideoState) => void;
+    /** 广告开始事件 */
+    onAdStart?: (ad: AdConfig, state: VideoState) => void;
+    /** 广告结束事件 */
+    onAdEnd?: (ad: AdConfig, state: VideoState) => void;
+    /** 广告跳过事件 */
+    onAdSkip?: (ad: AdConfig, state: VideoState) => void;
+    /** 点击事件 */
+    onClick?: (state: VideoState) => void;
+    /** 双击事件 */
+    onDoubleClick?: (state: VideoState) => void;
+    /** 控制栏显示事件 */
+    onControlsShow?: (state: VideoState) => void;
+    /** 控制栏隐藏事件 */
+    onControlsHide?: (state: VideoState) => void;
+}
+/**
+ * 视频组件属性
+ */
+export interface VideoProps extends VideoEvents {
+    /** 视频源，可以是单个URL或VideoSource数组 */
+    src: string | VideoSource | VideoSource[];
+    /** 视频尺寸 */
+    size?: VideoSize;
+    /** 视频变体 */
+    variant?: VideoVariant;
+    /** 视频封面 */
+    poster?: string;
+    /** 是否自动播放 */
+    autoPlay?: boolean;
+    /** 是否静音 */
+    muted?: boolean;
+    /** 音量（0-1） */
+    volume?: number;
+    /** 初始播放时间（秒） */
+    initialTime?: number;
+    /** 播放速率 */
+    playbackRate?: PlaybackRate;
+    /** 循环模式 */
+    loop?: LoopMode;
+    /** 预加载 */
+    preload?: 'none' | 'metadata' | 'auto';
+    /** 视频类型 */
+    type?: string;
+    /** 视频标题 */
+    title?: string;
+    /** 视频描述 */
+    description?: string;
+    /** 控制栏配置 */
+    controls?: boolean | VideoControlsConfig;
+    /** 是否显示中心播放按钮 */
+    showCenterPlayButton?: boolean;
+    /** 是否允许全屏 */
+    allowFullscreen?: boolean;
+    /** 是否允许画中画 */
+    allowPictureInPicture?: boolean;
+    /** 是否允许下载 */
+    allowDownload?: boolean;
+    /** 是否允许截图 */
+    allowScreenshot?: boolean;
+    /** 视频章节 */
+    chapters?: VideoChapter[];
+    /** 水印配置 */
+    watermark?: WatermarkConfig;
+    /** 广告配置 */
+    ads?: AdConfig[];
+    /** 自定义视频样式 */
+    videoStyle?: React.CSSProperties;
+    /** 自定义容器样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义视频类名 */
+    videoClassName?: string;
+    /** 自定义控制栏类名 */
+    controlsClassName?: string;
+    /** 自定义加载组件 */
+    renderLoading?: () => ReactNode;
+    /** 自定义错误组件 */
+    renderError?: (error: VideoError) => ReactNode;
+    /** 自定义结束组件 */
+    renderEnded?: () => ReactNode;
+    /** 自定义封面组件 */
+    renderPoster?: () => ReactNode;
+    /** 自定义章节组件 */
+    renderChapter?: (chapter: VideoChapter, active: boolean) => ReactNode;
+}
+/**
+ * 视频方法
+ */
+export interface VideoMethods {
+    /** 播放视频 */
+    play: () => Promise<void>;
+    /** 暂停视频 */
+    pause: () => void;
+    /** 停止视频 */
+    stop: () => void;
+    /** 跳转指定时间 */
+    seek: (time: number) => void;
+    /** 进入全屏 */
+    enterFullscreen: () => Promise<void>;
+    /** 退出全屏 */
+    exitFullscreen: () => Promise<void>;
+    /** 切换全屏 */
+    toggleFullscreen: () => Promise<void>;
+    /** 进入画中画 */
+    enterPictureInPicture: () => Promise<void>;
+    /** 退出画中画 */
+    exitPictureInPicture: () => Promise<void>;
+    /** 切换画中画 */
+    togglePictureInPicture: () => Promise<void>;
+    /** 设置音量 */
+    setVolume: (volume: number) => void;
+    /** 切换静音 */
+    toggleMute: () => void;
+    /** 设置播放速率 */
+    setPlaybackRate: (rate: PlaybackRate) => void;
+    /** 切换播放状态 */
+    togglePlay: () => void;
+    /** 重新加载视频 */
+    reload: () => void;
+    /** 获取当前视频状态 */
+    getState: () => VideoState;
+    /** 设置视频源 */
+    setSource: (src: string | VideoSource | VideoSource[]) => void;
+    /** 获取视频截图 */
+    getScreenshot: () => Promise<string | null>;
+    /** 下载视频 */
+    download: () => void;
+    /** 显示控制栏 */
+    showControls: () => void;
+    /** 隐藏控制栏 */
+    hideControls: () => void;
+}
+/**
+ * 格式化时间工具
+ * @param seconds 秒数
+ * @returns 格式化后的时间字符串 (HH:MM:SS 或 MM:SS)
+ */
+export declare const formatTime: (seconds: number) => string;
+/**
+ * 格式化文件大小工具
+ * @param bytes 字节数
+ * @returns 格式化后的文件大小字符串
+ */
+export declare const formatFileSize: (bytes: number) => string;
+/**
+ * 生成唯一ID工具
+ * @returns 唯一ID字符串
+ */
+export declare const generateId: () => string;
+/**
+ * 获取音量类型
+ * @param volume 音量值（0-1）
+ * @returns 音量类型
+ */
+export declare const getVolumeType: (volume: number) => VolumeType;
+/**
+ * 获取播放速率文本
+ * @param rate 播放速率
+ * @returns 播放速率文本
+ */
+export declare const getPlaybackRateText: (rate: PlaybackRate) => string;

package/dist/components/basic/Video/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Taro-Uno Video Component
+ * 视频组件入口文件
+ */
+import Video from './Video';
+import type { VideoProps, VideoMethods, VideoState, VideoSource, VideoChapter, VideoError } from './Video.types';
+import { VideoSize, VideoVariant, VideoStatus, PlayMode, LoopMode, PlaybackRate, ControlsPosition, VideoErrorCode } from './Video.types';
+export default Video;
+export type { VideoProps, VideoMethods, VideoState, VideoSource, VideoChapter, VideoError };
+export { VideoSize, VideoVariant, VideoStatus, PlayMode, LoopMode, PlaybackRate, ControlsPosition, VideoErrorCode };

package/dist/components/basic/index.d.ts

@@ -0,0 +1,217 @@
+/**
+ * Taro-Uno 基础组件库
+ * 提供最基础的 UI 组件，包括按钮、图标、文本和分割线
+ */
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Text } from './Text';
+import { Divider } from './Divider';
+import { Typography } from './Typography';
+export { Button } from './Button';
+export type { ButtonProps, ButtonRef } from './Button/Button.types';
+export { buttonStyles } from './Button/Button.styles';
+export { Icon } from './Icon';
+export type { IconProps, IconRef, IconGroupProps, IconUtils, IconType, IconSource, IconSize, IconColor, IconRotation, IconStatus, IconTheme, IconNativeProps, IconSet, IconLibraryConfig, } from './Icon/Icon.types';
+export { iconStyles } from './Icon/Icon.styles';
+export { Text } from './Text';
+export type { TextProps, TextRef, TextUtils, TextSize, TextWeight, TextAlign, TextDecoration, TextTransform, TextOverflow, TextDirection, TextStyle, TextVariant, LetterSpacing, LineHeight, TextColor, TextStatus, TextType, TextNativeProps, TypewriterProps, TextGradientProps, } from './Text/Text.types';
+export { textStyles } from './Text/Text.styles';
+export { Divider } from './Divider';
+export type { DividerProps, DividerRef, DividerGroupProps, DividerUtils, DividerOrientation, DividerType, DividerPosition, DividerSize, DividerColor, DividerVariant, DividerNativeProps, VerticalDividerProps, TextDividerProps, AnimatedDividerProps, DividerPreset, } from './Divider/Divider.types';
+export { Typography } from './Typography';
+export type { TypographyProps, TypographyRef, TypographySize, TypographyColor, TypographyWeight, TypographyUtils, TypographyNativeProps, TitleProps, ParagraphProps, TypographyTextProps, LinkProps, } from './Typography/Typography.types';
+export { calculateTypographyStyles, typographyStyles } from './Typography/Typography.styles';
+export interface BasicComponents {
+    Button: typeof Button;
+    Icon: typeof Icon;
+    Text: typeof Text;
+    Divider: typeof Divider;
+    Typography: typeof Typography;
+}
+export type BasicComponentProps = import('./Button/Button.types').ButtonProps | import('./Icon/Icon.types').IconProps | import('./Text/Text.types').TextProps | import('./Divider/Divider.types').DividerProps | import('./Typography/Typography.types').TypographyProps;
+export type BasicComponentRef = import('./Button/Button.types').ButtonRef | import('./Icon/Icon.types').IconRef | import('./Text/Text.types').TextRef | import('./Divider/Divider.types').DividerRef | import('./Typography/Typography.types').TypographyRef;
+export declare const BasicComponentsUtils: {
+    /**
+     * 判断是否为基础组件属性
+     */
+    isBasicComponentProps: (props: any) => props is BasicComponentProps;
+    /**
+     * 获取组件类型
+     */
+    getComponentType: (props: BasicComponentProps) => string;
+    /**
+     * 获取组件默认样式
+     */
+    getDefaultStyles: (componentType: string) => React.CSSProperties;
+    /**
+     * 组件尺寸映射
+     */
+    sizeMapping: {
+        Button: {
+            xs: {
+                fontSize: number;
+                padding: string;
+                height: number;
+            };
+            sm: {
+                fontSize: number;
+                padding: string;
+                height: number;
+            };
+            md: {
+                fontSize: number;
+                padding: string;
+                height: number;
+            };
+            lg: {
+                fontSize: number;
+                padding: string;
+                height: number;
+            };
+            xl: {
+                fontSize: number;
+                padding: string;
+                height: number;
+            };
+        };
+        Icon: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+        Text: {
+            xs: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            sm: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            md: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            lg: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            xl: {
+                fontSize: number;
+                lineHeight: number;
+            };
+        };
+        Divider: {
+            xs: {
+                height: number;
+                margin: number;
+            };
+            sm: {
+                height: number;
+                margin: number;
+            };
+            md: {
+                height: number;
+                margin: number;
+            };
+            lg: {
+                height: number;
+                margin: number;
+            };
+            xl: {
+                height: number;
+                margin: number;
+            };
+        };
+        Typography: {
+            xs: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            sm: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            md: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            lg: {
+                fontSize: number;
+                lineHeight: number;
+            };
+            xl: {
+                fontSize: number;
+                lineHeight: number;
+            };
+        };
+    };
+    /**
+     * 组件颜色映射
+     */
+    colorMapping: {
+        Button: {
+            primary: {
+                background: string;
+                color: string;
+                border: string;
+            };
+            secondary: {
+                background: string;
+                color: string;
+                border: string;
+            };
+            success: {
+                background: string;
+                color: string;
+                border: string;
+            };
+            warning: {
+                background: string;
+                color: string;
+                border: string;
+            };
+            error: {
+                background: string;
+                color: string;
+                border: string;
+            };
+        };
+        Icon: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        Text: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            error: string;
+            disabled: string;
+        };
+        Divider: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            error: string;
+            border: string;
+        };
+        Typography: {
+            primary: string;
+            secondary: string;
+            success: string;
+            warning: string;
+            error: string;
+            disabled: string;
+            inherit: string;
+        };
+    };
+};
+declare const _default: BasicComponents;
+export default _default;

package/dist/components/common/ErrorBoundary.d.ts

@@ -0,0 +1,19 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    handleReset: () => void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export default ErrorBoundary;