zpd-ui 1.0.0

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

@@ -0,0 +1,44 @@
+import { type FC } from 'react';
+export interface AudioEffectProps {
+    /** 音频文件路径 */
+    audioUrl: string;
+    /** 音量 (0-1)，默认 1 */
+    volume?: number;
+    /** 是否自动播放，默认 true */
+    autoPlay?: boolean;
+    /** 播放完成回调 */
+    onEnded?: () => void;
+    /** 播放失败回调 */
+    onError?: (error: Error) => void;
+    /** 播放开始回调 */
+    onPlay?: () => void;
+}
+/**
+ * 音效组件
+ * - 无 UI，纯逻辑
+ * - 基于 AudioManager 实现
+ * - 适用于状态音效、提示音等短音频
+ * - 支持快速切换和并发播放
+ */
+declare const AudioEffect: FC<AudioEffectProps>;
+export default AudioEffect;
+/**
+ * 使用示例
+ *
+ * @example
+ * ```tsx
+ * // 场景1: 根据状态播放不同音效
+ * <AudioEffect
+ *   audioUrl={status === 'success' ? '/sounds/success.mp3' : '/sounds/error.mp3'}
+ *   volume={0.8}
+ *   onEnded={() => console.log('播放完成')}
+ * />
+ *
+ * // 场景2: 手动控制播放
+ * <AudioEffect
+ *   audioUrl="/sounds/notification.mp3"
+ *   autoPlay={false}
+ *   onPlay={() => console.log('开始播放')}
+ * />
+ * ```
+ */

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

@@ -0,0 +1,77 @@
+import type { CSSProperties } from 'react';
+import React from 'react';
+import './index.scss';
+export interface BarrageBullet {
+    text: string;
+    userInfo?: any;
+    id?: string;
+    line?: number;
+}
+export interface BarrageProps {
+    list: BarrageBullet[];
+    intervalTime?: number;
+    className?: string;
+    tabClassName?: string;
+    tabClassNameStyle?: CSSProperties;
+    renderItem: (item: BarrageBullet, index?: number) => React.ReactNode;
+    lines?: number;
+    lineHeight?: number;
+}
+export interface BarrageRef {
+    showNextBullet: () => void;
+}
+/**
+ * 弹幕组件
+ * 支持多行弹幕、自定义间隔时间、自定义渲染等功能
+ *
+ * @example
+ * // 基础用法 - 双行弹幕
+ * <Barrage
+ *   list={barrageList}
+ *   intervalTime={1300}
+ *   lines={2}
+ *   lineHeight={25}
+ *   className="h-200"
+ *   renderItem={(item) => (
+ *     <span>{item.text}</span>
+ *   )}
+ * />
+ *
+ * @example
+ * // 自定义样式和内容
+ * <Barrage
+ *   list={messages}
+ *   intervalTime={1500}
+ *   lines={3}
+ *   lineHeight={40}
+ *   className="h-300 w-full"
+ *   tabClassName="px-16 py-8 bg-black/50 backdrop-blur-sm rounded-20"
+ *   tabClassNameStyle={{ fontSize: '28px' }}
+ *   renderItem={(item) => (
+ *     <div className="flex items-center gap-10">
+ *       <img src={item.userInfo?.avatar} className="w-32 h-32 rounded-full" />
+ *       <span className="text-white">{item.text}</span>
+ *     </div>
+ *   )}
+ * />
+ *
+ * @example
+ * // 使用 ref 手动控制弹幕
+ * const barrageRef = useRef<BarrageRef>(null)
+ *
+ * <Barrage
+ *   ref={barrageRef}
+ *   list={comments}
+ *   intervalTime={2000}
+ *   lines={2}
+ *   lineHeight={30}
+ *   className="h-150"
+ *   renderItem={(item) => <span>{item.text}</span>}
+ * />
+ *
+ * <button onClick={() => barrageRef.current?.showNextBullet()}>
+ *   发送下一条弹幕
+ * </button>
+ */
+declare const Barrage: React.ForwardRefExoticComponent<BarrageProps & React.RefAttributes<BarrageRef>>;
+export default Barrage;

package/dist/components/CountDown/CountDown.d.ts

@@ -0,0 +1,100 @@
+import { type FC } from 'react';
+type ICountDownProps = {
+    /**
+     * 目标时间戳（毫秒）
+     * 支持: number, string, null, undefined
+     * 异常值会自动处理为00:00:00显示
+     */
+    targetTime: number | string | null | undefined;
+    /**
+     * 服务器当前时间戳（毫秒）
+     * 如果传入此参数，将使用服务器时间作为当前时间进行倒计时计算
+     * 用于修正本地时间偏差，防止用户修改本地时间导致倒计时不准确
+     * 如果不传入，则使用本地时间
+     */
+    serverTime?: number;
+    /**
+     * 格式化字符串
+     * dd: 天数(01-99), d: 天数(1-99)
+     * HH: 小时(00-23), H: 小时(0-23)
+     * mm: 分钟(00-59), m: 分钟(0-59)
+     * ss: 秒(00-59), s: 秒(0-59)
+     * [text]: 方括号内的文本会被原样显示，不会被解析
+     * 'text': 单引号内的文本会被原样显示，不会被解析
+     * 示例: "dd:HH:mm:ss" -> "01:03:25:30"
+     * 示例: "dd [days] HH:mm:ss" -> "01 days 03:25:30"
+     * 示例: "dd 'days' HH:mm:ss" -> "01 days 03:25:30"
+     */
+    format?: string;
+    /**
+     * 卡片样式
+     */
+    className?: string;
+    /**
+     * 倒计时结束的回调函数
+     */
+    refreshData?: () => void;
+    /**
+     * 倒计时结束的回调函数
+     */
+    onEnd?: () => void;
+    /**
+     * 卡片样式
+     */
+    backgroundClassName?: string;
+    /**
+     * 文本部分的样式（包括分隔符如冒号、空格等）
+     * 示例: format="dd:HH:mm:ss" 中的 ":" 会应用此样式
+     */
+    partClassName?: string;
+    /**
+     * 转义文本的样式（仅用于 [text] 或 'text' 格式的文本）
+     * 示例: format="dd [days] HH:mm:ss" 中的 "days" 会应用此样式，而空格和冒号不会
+     */
+    escapedTextClassName?: string;
+};
+/**
+ * 倒计时组件
+ * 使用 dayjs 进行时间计算，提供更精确和可读的时间处理，结束后会触发回调函数
+ *
+ * @example
+ * // 基础用法 - 简单的时分秒倒计时
+ * <CountDown
+ *   targetTime={Date.now() + 3600000}
+ *   format="HH:mm:ss"
+ *   onEnd={() => console.log('倒计时结束')}
+ * />
+ *
+ * @example
+ * // 带天数的倒计时
+ * <CountDown
+ *   targetTime={newer_end_ts * 1000}
+ *   format="dd'天'HH:mm:ss"
+ *   className="text-32 font-bold"
+ *   backgroundClassName="w-50 h-60 bg-black/50 rounded-8"
+ *   refreshData={() => handleCountDownEnd()}
+ * />
+ *
+ * @example
+ * // 服务器时间修正 - 防止用户修改本地时间
+ * <CountDown
+ *   targetTime={endTime * 1000}
+ *   serverTime={serverCurrentTime * 1000}
+ *   format="dd [Days] HH:mm:ss"
+ *   onEnd={() => refreshActivityData()}
+ * />
+ *
+ * @example
+ * // 自定义样式 - 分隔符和转义文本样式
+ * <CountDown
+ *   targetTime={targetTimestamp}
+ *   format="dd'天'HH:mm:ss"
+ *   className="flex gap-10"
+ *   backgroundClassName="w-60 h-60 bg-gradient-to-b from-#FFD700 to-#FFA500 rounded-12"
+ *   partClassName="text-white text-24"
+ *   escapedTextClassName="text-yellow-400 text-28 font-bold"
+ *   onEnd={() => console.log('活动结束')}
+ * />
+ */
+declare const CountDown: FC<ICountDownProps>;
+export default CountDown;

package/dist/components/CountDown/CountDownNumbers.d.ts

@@ -0,0 +1,21 @@
+import { type FC } from 'react';
+type ICountDownNumberProps = {
+    /**
+     * 卡片背景
+     */
+    background?: string;
+    /**
+     * 卡片宽度
+     */
+    width?: number;
+    /**
+     * 卡片高度
+     */
+    height?: number;
+    /**
+     * 时间数字
+     */
+    time: number;
+};
+declare const CountDownNumbers: FC<ICountDownNumberProps>;
+export default CountDownNumbers;

package/dist/components/List/List.d.ts

@@ -0,0 +1,36 @@
+import './index.scss';
+interface ApiResponse {
+    data: {
+        has_next?: boolean;
+        [key: string]: unknown;
+    };
+}
+interface ListProps<T = unknown> {
+    url: string;
+    params?: Record<string, unknown>;
+    method?: 'GET' | 'POST';
+    pageSize?: number;
+    dataKey?: string;
+    className?: string;
+    height?: number;
+    finishRender?: () => React.ReactNode;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    onDataLoaded?: (data: unknown, list: T[], myRank: T) => void;
+    noDataRender?: () => React.ReactNode;
+    cursorKey?: string;
+    hasNextKey?: string;
+    myRankKey?: string;
+    children?: React.ReactNode;
+    request?: (options: any) => Promise<ApiResponse>;
+    enablePadding?: boolean;
+    paddingThreshold?: number;
+    paddingPlaceholder?: T;
+}
+interface ListRef<T = unknown> {
+    refresh: () => void;
+    clear: () => void;
+    getList: () => T[];
+}
+declare const List: import("react").ForwardRefExoticComponent<ListProps<unknown> & import("react").RefAttributes<ListRef<unknown>>>;
+export default List;
+export type { ListProps, ListRef };

package/dist/components/List/components/Infinite/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface InfiniteContainerProps {
+    height?: number;
+    handleMore?: () => void;
+    hasMore?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 无限滚动容器
+ * @param param0 height 容器高度，只能是固定的数字，默认 400
+ * @param param1 handleMore 加载更多的回调函数，返回一个 Promise，可以控制 loading 的状态
+ * @param param2 hasMore 是否结束了
+ * @returns
+ */
+declare const InfiniteContainer: React.FC<InfiniteContainerProps>;
+export default InfiniteContainer;

package/dist/components/List/components/error/index.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from "react";
+interface ErrorProps {
+    onRetry: () => void;
+}
+declare const Error: FC<ErrorProps>;
+export default Error;

package/dist/components/List/components/load-more/index.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from "react";
+declare const LoadMore: FC;
+export default LoadMore;

package/dist/components/List/components/loading/index.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from "react";
+declare const Loading: FC;
+export default Loading;

package/dist/components/List/components/no-data/index.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from "react";
+declare const NoData: FC;
+export default NoData;

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

@@ -0,0 +1,77 @@
+/**
+ * 列表组件
+ * 支持分页加载、自动加载更多、游标分页、数据填充等功能
+ *
+ * @example
+ * // 基础用法 - 页码分页
+ * <List
+ *   url="/api/users"
+ *   dataKey="items"
+ *   params={{ status: 'active' }}
+ *   request={request}
+ *   pageSize={10}
+ *   renderItem={(item, index) => (
+ *     <div className="user-item">{item.name}</div>
+ *   )}
+ *   onDataLoaded={(data, list) => {
+ *     console.log('数据加载完成', list.length)
+ *   }}
+ * />
+ *
+ * @example
+ * // 使用 ref 控制和自定义完成提示
+ * const listRef = useRef<ListRef>(null)
+ *
+ * <List
+ *   ref={listRef}
+ *   url="/api/products"
+ *   dataKey="products"
+ *   request={request}
+ *   renderItem={(item, index) => <ProductCard data={item} />}
+ *   finishRender={() => <div className="text-center">没有更多了</div>}
+ *   noDataRender={() => <div className="empty">暂无数据</div>}
+ * />
+ *
+ * <button onClick={() => listRef.current?.refresh()}>刷新</button>
+ *
+ * @example
+ * // 游标分页 - 高性能场景
+ * <List
+ *   url="/api/messages"
+ *   dataKey="messages"
+ *   request={request}
+ *   cursorKey="last_id"
+ *   pageSize={20}
+ *   renderItem={(item, index) => <MessageItem data={item} />}
+ * />
+ *
+ * @example
+ * // 数据填充功能 - 不足指定数量时自动填充占位数据
+ * <List
+ *   url="/api/ranks"
+ *   dataKey="ranks"
+ *   request={request}
+ *   pageSize={10}
+ *   enablePadding={true}
+ *   paddingThreshold={10}
+ *   paddingPlaceholder={{ name: '虚位以待', score: 0 }}
+ *   renderItem={(item, index) => (
+ *     <div className="rank-item">
+ *       #{index + 1} {item.name} - {item.score}
+ *     </div>
+ *   )}
+ * />
+ *
+ * @example
+ * // POST 请求
+ * <List
+ *   url="/api/search"
+ *   method="POST"
+ *   params={{ keyword: 'react', filter: 'latest' }}
+ *   dataKey="results"
+ *   request={request}
+ *   renderItem={(item, index) => <SearchResult data={item} />}
+ * />
+ */
+export { default as List } from './List';
+export type { ListProps, ListRef } from './List';

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

@@ -0,0 +1,23 @@
+import { type FC } from 'react';
+export interface MusicPlayerProps {
+    /** 音乐文件 URL */
+    musicUrl: string;
+    /** 播放状态的图标 className */
+    playIconClass: string;
+    /** 暂停状态的图标 className */
+    pauseIconClass: string;
+    /** 额外的容器 className */
+    className?: string;
+    /** 是否循环播放，默认 true */
+    loop?: boolean;
+    /** 是否自动播放，默认 true */
+    autoPlay?: boolean;
+    /** 动画类名，默认 animate-spin-slow */
+    animationClassName?: string;
+}
+/**
+ * 音乐播放器组件
+ * 支持自动播放（三层策略：直接播放 -> 静音播放 -> 等待用户交互）
+ */
+declare const MusicPlayer: FC<MusicPlayerProps>;
+export default MusicPlayer;

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

@@ -0,0 +1,60 @@
+import { type FC } from 'react';
+/**
+ * 导航栏组件
+ * 支持标题、左右图标、滚动变色等功能
+ *
+ * @example
+ * // 基础用法 - 返回按钮和标题
+ * <NavBar
+ *   title="页面标题"
+ *   leftIcon="i-custom-back"
+ *   type="back"
+ *   onLeftClick={() => console.log('返回')}
+ * />
+ *
+ * @example
+ * // 带右侧按钮
+ * <NavBar
+ *   title="设置"
+ *   leftIcon="i-custom-close"
+ *   rightIcon="i-custom-more"
+ *   type="close"
+ *   onLeftClick={() => console.log('关闭')}
+ *   onRightClick={() => console.log('更多操作')}
+ * />
+ *
+ * @example
+ * // 滚动变色效果
+ * <NavBar
+ *   title="动态导航栏"
+ *   leftIcon="i-custom-back"
+ *   enableScrollBg={true}
+ *   scrollBgClassName="bg-gradient-to-b from-#000/80 to-#000/60 backdrop-blur-md"
+ * />
+ *
+ * @example
+ * // 自定义内容
+ * <NavBar
+ *   leftIcon="i-custom-back"
+ *   rightIcon="i-custom-share"
+ *   onRightClick={() => handleShare()}
+ * >
+ *   <div className="flex-1 text-center">
+ *     <span className="text-28">自定义标题区域</span>
+ *   </div>
+ * </NavBar>
+ */
+export interface NavbarProps {
+    title?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    onRightClick?: () => void;
+    onLeftClick?: () => void;
+    type?: 'back' | 'close';
+    className?: string;
+    children?: React.ReactNode;
+    enableScrollBg?: boolean;
+    scrollBgClassName?: string;
+}
+declare const Navbar: FC<NavbarProps>;
+export default Navbar;

package/dist/components/NoticeBar/NoticeBar.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import './index.scss';
+export interface NoticeBarProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * 子元素内容（优先使用）
+     */
+    children?: React.ReactNode;
+    /**
+     * 文本数组（当没有 children 时使用）
+     */
+    text?: string[] | string;
+    /**
+     * 文本内容的类名（仅在使用 text 参数时有效）
+     */
+    textClassName?: string;
+    /**
+     * 滚动速度（像素/秒），优先级高于 speed
+     * @default 80
+     */
+    pixelsPerSecond?: number;
+    /**
+     * 动画持续时间（单位：秒），当不使用 pixelsPerSecond 时生效
+     * @default 8
+     */
+    speed?: number;
+    /**
+     * 是否悬停暂停
+     * @default false
+     */
+    pauseOnHover?: boolean;
+    /**
+     * 两段滚动内容之间的间距（UnoCSS 类名，如 w-100、w-[50px] 等）
+     * 如果不设置，将自动使用隐藏节点方式创建间隔
+     */
+    gap?: string;
+}
+declare const NoticeBar: React.FC<NoticeBarProps>;
+export default NoticeBar;

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

@@ -0,0 +1,23 @@
+import type { NoticeBarProps } from './NoticeBar';
+import NoticeBar from './NoticeBar';
+export { NoticeBar };
+export type { NoticeBarProps };
+/**
+ * 容器宽度由外层容器决定 使用时需外部套一个div
+ * <div className="w-150">
+ *  <NoticeBar
+ *  key={item?.name}
+ *  gap={'w-150'}
+ *  text={item?.name}
+ *  textClassName="text-nowrap text-24 text-#E3E3E4 font-bold"
+ *  />
+ * </div>
+ *
+ * <div className="w-100">
+ *  <NoticeBar gap={'w-100'}>
+ *      <span className="text-nowrap text-28 text-#141C2F font-bold">
+ *      {userInfo?.nickname || ''}
+ *      </span>
+ *  </NoticeBar>
+ * </div>
+ */

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

@@ -0,0 +1,58 @@
+import React from 'react';
+export type ProgressProps = {
+    value: number;
+    showPercent?: boolean;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    draggable?: boolean;
+    innerClassName?: string;
+    innerImageClassName?: string;
+    outerImageClassName?: string;
+    pointClassName?: string;
+    pointOffsetPercent?: number;
+    maxCount?: number;
+    decreaseButtonClassName?: string;
+    increaseButtonClassName?: string;
+    onDecrease?: () => void;
+    onIncrease?: () => void;
+    buttonSpacing?: string;
+    step?: number;
+    minValue?: number;
+} & Common.DefaultProps;
+declare const Progress: React.FC<ProgressProps>;
+export default Progress;
+/**
+ * 支持触摸和鼠标拖拽
+ * <Progress
+ * value={count} //当前数值
+ * maxCount={maxExchangeCount} //最大数量
+ * innerImageClassName={BackgroundImages.shop_inner_bg_png} //内层进度条背景图片类名
+ * outerImageClassName={BackgroundImages.shop_process_out_bg_png} //外层轨道背景图片类名
+ * pointClassName={BackgroundImages.shop_point_png} //进度条末端的指示点  没有就不写
+ * decreaseButtonClassName={BackgroundImages.shop_reduce_png} //减少按钮的类名
+ * increaseButtonClassName={BackgroundImages.shop_add_png} //增加按钮的类名
+ * step={1} //步长，默认 1
+ * onChange={setCount} //改变回调
+ * />
+ *
+ * 静态普通的进度条
+ *
+ * <ProcessTouch
+ * value={currentLevelInfo?.cumulative_points || 0} //当前数值
+ * maxCount={currentLevelInfo?.level_up_points} //最大数量
+ * innerImageClassName={clsx(
+ *   'rounded-20 bg-[linear-gradient(270deg,#FF499E_0%,#FFA271_100%)] h-40 shadow-[inset_0px_6px_9px_0px_rgba(255,255,255,0.25)]'
+ * )} //内层进度条背景图片类名
+ * outerImageClassName={clsx('rounded-20 w-500 h-40 bg-[rgba(0,0,0,0.5)] text-#fff')} //外层轨道背景图片类名
+ * draggable={false}
+ * step={1}
+ * // onChange={setCount}
+ * showPercent={false}
+ * >
+ * <div className="absolute left-50% top-50% text-28 text-#fff font-500 -translate-x-50% -translate-y-50%">
+ *   <span>{currentLevelInfo?.cumulative_points || 0}</span>
+ *   <span className="mx-4">/</span>
+ *   <span className="text-#C0C0C1">{currentLevelInfo?.level_up_points}</span>
+ * </div>
+ * </ProcessTouch>
+ */

package/dist/components/RankList/RankList.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties } from 'react';
+import { type ListProps } from '../List';
+interface RankListProps<T = unknown> extends Omit<ListProps<T>, 'renderItem' | 'className'> {
+    topRender?: (topList: T[]) => React.ReactNode;
+    topCount?: number;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    className?: string;
+    listClassName?: string;
+    listStyle?: CSSProperties;
+    classNameStyle?: CSSProperties;
+    myRankRender?: (myRank: T) => React.ReactNode;
+}
+interface RankListRef<T = unknown> {
+    refresh: () => void;
+    clear: () => void;
+    getList: () => T[];
+    getRestList: () => T[];
+    getTopList: () => T[];
+}
+declare const RankList: import("react").ForwardRefExoticComponent<RankListProps<unknown> & import("react").RefAttributes<RankListRef<unknown>>>;
+export default RankList;
+export type { RankListProps, RankListRef };