@zjpcy/simple-design 1.2.11 → 1.3.0

package/dist/types/components/Spin/types.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode, CSSProperties } from 'react';
+export type SpinSize = 'small' | 'default' | 'large';
+export interface SpinProps {
+    /**
+     * 是否为加载状态
+     * @default true
+     */
+    spinning?: boolean;
+    /**
+     * 加载指示符
+     */
+    indicator?: ReactNode;
+    /**
+     * 当作为包裹元素时，可以自定义描述文案
+     */
+    tip?: ReactNode;
+    /**
+     * 组件大小
+     * @default 'default'
+     */
+    size?: SpinSize;
+    /**
+     * 延迟显示加载效果的时间（防止闪烁）
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * 包裹的子元素
+     */
+    children?: ReactNode;
+    /**
+     * 是否全屏显示
+     * @default false
+     */
+    fullscreen?: boolean;
+}

package/dist/types/components/Splitter/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './Splitter.css';
+import { SplitterProps } from './types';
+/**
+ * Splitter 主组件 - 自由切分指定区域为多部分
+ * 支持水平和垂直分隔，可拖拽调整各区域大小，支持多面板
+ */
+export declare const Splitter: React.FC<SplitterProps>;
+export default Splitter;

package/dist/types/components/Splitter/styles.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Splitter 组件样式工具函数
+ * 使用 CSS 变量与现代化设计系统保持一致
+ */
+import { CSSProperties } from 'react';
+/**
+ * 获取容器样式
+ */
+export declare const getContainerStyle: (layout: "horizontal" | "vertical", customStyle?: CSSProperties) => CSSProperties;
+/**
+ * 获取面板样式
+ * @param size - 面板尺寸（像素）
+ * @param layout - 布局方向
+ * @param index - 面板索引
+ * @param totalPanels - 面板总数
+ */
+export declare const getPanelStyle: (size: number, layout: "horizontal" | "vertical", index?: number, totalPanels?: number) => CSSProperties;
+/**
+ * 获取分割条样式
+ * 使用 CSS 变量实现现代化渐变和阴影效果
+ * @param layout - 布局方向
+ * @param splitterSize - 分割条大小
+ * @param disabled - 是否禁用
+ * @param index - 分割条索引
+ */
+export declare const getSplitterBarStyle: (layout: "horizontal" | "vertical", splitterSize: number | undefined, disabled: boolean, index?: number) => CSSProperties;
+/**
+ * 获取分割线样式
+ * 支持自定义颜色和拖拽状态
+ * @param layout - 布局方向
+ * @param lineColor - 线条颜色
+ * @param lineHoverColor - 悬停颜色
+ * @param isDragging - 是否正在拖拽
+ * @param isActive - 是否激活状态（当前拖拽的分割条）
+ */
+export declare const getSplitterLineStyle: (layout: "horizontal" | "vertical", lineColor: string | undefined, lineHoverColor: string | undefined, isDragging: boolean, isActive?: boolean) => CSSProperties;
+/**
+ * 获取拖拽遮罩层样式
+ * 用于拖拽时覆盖整个页面防止事件穿透
+ */
+export declare const getDragOverlayStyle: () => CSSProperties;
+/**
+ * 解析尺寸配置为数组
+ * @param size - 尺寸配置（单值或数组）
+ * @param count - 面板数量
+ * @param defaultValue - 默认值
+ */
+export declare const parseSizeConfig: (size: number | string | (number | string)[] | undefined, count: number, defaultValue?: number | string) => (number | string)[];
+/**
+ * 解析数字配置为数组
+ * @param value - 数值配置（单值或数组）
+ * @param count - 面板数量
+ * @param defaultValue - 默认值
+ */
+export declare const parseNumberConfig: (value: number | number[] | undefined, count: number, defaultValue: number) => number[];
+/**
+ * 将尺寸值转换为像素
+ * @param size - 尺寸值（数字或百分比字符串）
+ * @param availableSpace - 可用空间
+ */
+export declare const parseSizeToPixels: (size: number | string, availableSpace: number) => number;

package/dist/types/components/Splitter/types.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Splitter 组件类型定义
+ * 用于自由切分指定区域，支持水平和垂直分隔，支持多面板
+ */
+import React from 'react';
+/**
+ * 单个面板配置
+ */
+export interface SplitterPanel {
+    /** 面板内容 */
+    content: React.ReactNode;
+    /** 面板默认大小（像素或百分比） */
+    defaultSize?: number | string;
+    /** 面板最小尺寸 */
+    minSize?: number;
+    /** 面板最大尺寸 */
+    maxSize?: number;
+    /** 是否禁用该面板相邻的分割条拖拽 */
+    disabled?: boolean;
+}
+/**
+ * Splitter 组件 Props
+ */
+export interface SplitterProps {
+    /** 布局方向 */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * 面板数组，支持多面板配置
+     * 当提供 panels 时，优先使用 panels，忽略 left/right/top/bottom/children
+     */
+    panels?: SplitterPanel[];
+    /**
+     * 默认大小配置（像素或百分比）
+     * 可以是单个值（用于2面板模式）或数组（用于多面板模式）
+     * 默认为 '50%' 或 ['33%', '33%', '33%']
+     */
+    defaultSize?: number | string | (number | string)[];
+    /**
+     * 最小尺寸配置
+     * 可以是单个值或数组
+     */
+    minSize?: number | number[];
+    /**
+     * 最大尺寸配置
+     * 可以是单个值或数组
+     */
+    maxSize?: number | number[];
+    /** 分割条大小（像素），默认为 10 */
+    splitterSize?: number;
+    /** 拖拽线颜色 */
+    lineColor?: string;
+    /** 拖拽线悬停/拖拽时的颜色 */
+    lineHoverColor?: string;
+    /** 是否禁用所有拖拽 */
+    disabled?: boolean;
+    /**
+     * 拖拽时的回调
+     * @param sizes - 所有面板的当前尺寸数组
+     * @param index - 正在拖拽的分割条索引
+     */
+    onResize?: (sizes: number[], index: number) => void;
+    /**
+     * 拖拽结束后的回调
+     * @param sizes - 所有面板的最终尺寸数组
+     */
+    onResizeEnd?: (sizes: number[]) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** @deprecated 请使用 panels 或 children */
+    left?: React.ReactNode;
+    /** @deprecated 请使用 panels 或 children */
+    right?: React.ReactNode;
+    /** @deprecated 请使用 panels 或 children */
+    top?: React.ReactNode;
+    /** @deprecated 请使用 panels 或 children */
+    bottom?: React.ReactNode;
+    /**
+     * 子元素数组
+     * 用于2面板模式时传入 [面板1, 面板2]
+     * 用于多面板模式时传入任意数量的面板
+     */
+    children?: React.ReactNode[];
+}
+/**
+ * 单个拖拽状态
+ */
+export interface DragState {
+    /** 是否正在拖拽 */
+    isDragging: boolean;
+    /** 拖拽开始时的鼠标/触摸位置 */
+    startPosition: number;
+    /** 拖拽开始时的各面板尺寸 */
+    startSizes: number[];
+    /** 容器尺寸 */
+    containerSize: number;
+    /** 正在拖拽的分割条索引 */
+    splitterIndex: number;
+}
+/**
+ * 面板尺寸信息
+ */
+export interface PanelSizeInfo {
+    /** 面板索引 */
+    index: number;
+    /** 面板当前尺寸 */
+    size: number;
+    /** 面板最小尺寸 */
+    minSize: number;
+    /** 面板最大尺寸 */
+    maxSize: number;
+    /** 默认尺寸 */
+    defaultSize: number | string;
+}

package/dist/types/components/Upload/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { UploadProps, UploadFile, UploadRequestOptions } from './types';
+import './Upload.css';
+declare const Upload: React.FC<UploadProps>;
+export default Upload;
+export type { UploadFile, UploadProps, UploadRequestOptions };

package/dist/types/components/Upload/styles.d.ts

@@ -0,0 +1,28 @@
+import { UploadFile } from './types';
+export declare const UploadWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+}>> & string;
+export declare const UploadInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const UploadTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadDragArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isDragOver?: boolean;
+    disabled?: boolean;
+}>> & string;
+export declare const UploadDragIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadDragText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadDragHint: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadListWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    status?: UploadFile["status"];
+}>> & string;
+export declare const UploadListItemInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadListItemName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const UploadListItemIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const UploadListItemActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const UploadListItemAction: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const UploadProgress: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const UploadProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    percent: number;
+    status?: UploadFile["status"];
+}>> & string;
+export declare const UploadListItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/components/Upload/types.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+export interface UploadFile {
+    uid: string;
+    name: string;
+    size: number;
+    type: string;
+    status?: 'ready' | 'uploading' | 'success' | 'error';
+    percent?: number;
+    response?: any;
+    error?: Error;
+    raw?: File;
+}
+export interface UploadProps {
+    /** 上传地址 */
+    action?: string;
+    /** 默认已经上传的文件列表 */
+    defaultFileList?: UploadFile[];
+    /** 已经上传的文件列表（受控） */
+    fileList?: UploadFile[];
+    /** 上传文件改变时的状态 */
+    onChange?: (fileList: UploadFile[]) => void;
+    /** 上传文件之前的钩子，参数为上传的文件 */
+    beforeUpload?: (file: File, fileList: File[]) => boolean | Promise<File>;
+    /** 文件上传时的钩子 */
+    onProgress?: (percent: number, file: UploadFile) => void;
+    /** 文件上传成功时的钩子 */
+    onSuccess?: (response: any, file: UploadFile) => void;
+    /** 文件上传失败时的钩子 */
+    onError?: (error: Error, file: UploadFile) => void;
+    /** 文件移除时的钩子 */
+    onRemove?: (file: UploadFile) => void | boolean | Promise<boolean>;
+    /** 设置上传的请求头部 */
+    headers?: Record<string, string>;
+    /** 上传的文件字段名 */
+    name?: string;
+    /** 上传时附带的额外参数 */
+    data?: Record<string, any> | ((file: File) => Record<string, any>);
+    /** 支持发送 cookie 凭证信息 */
+    withCredentials?: boolean;
+    /** 接受上传的文件类型 */
+    accept?: string;
+    /** 是否支持多选文件 */
+    multiple?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否支持拖拽上传 */
+    drag?: boolean;
+    /** 上传组件的样式 */
+    style?: React.CSSProperties;
+    /** 上传组件的类名 */
+    className?: string;
+    /** 自定义上传方法 */
+    customRequest?: (options: UploadRequestOptions) => void;
+    /** 文件列表渲染 */
+    itemRender?: (file: UploadFile, fileList: UploadFile[]) => React.ReactNode;
+    /** 是否显示文件列表 */
+    showUploadList?: boolean | ShowUploadListType;
+    /** 自定义请求方法 */
+    method?: 'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch';
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 最大上传文件数量 */
+    maxCount?: number;
+}
+export interface ShowUploadListType {
+    showRemoveIcon?: boolean;
+    showPreviewIcon?: boolean;
+    showDownloadIcon?: boolean;
+}
+export interface UploadRequestOptions {
+    action: string;
+    filename: string;
+    file: File;
+    data?: Record<string, any>;
+    headers?: Record<string, string>;
+    withCredentials?: boolean;
+    onProgress: (percent: number) => void;
+    onSuccess: (response: any) => void;
+    onError: (error: Error) => void;
+    method: string;
+}
+export interface UploadListProps {
+    fileList: UploadFile[];
+    onRemove: (file: UploadFile) => void;
+    showUploadList?: boolean | ShowUploadListType;
+    itemRender?: (file: UploadFile, fileList: UploadFile[]) => React.ReactNode;
+}
+export interface UploadDragProps extends Omit<UploadProps, 'drag'> {
+    children?: React.ReactNode;
+}

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

@@ -1,4 +1,6 @@
 export { default as Button } from './Button';
+export { default as Spin } from './Spin';
+export type { SpinProps, SpinSize } from './Spin';
 export { default as Carousel } from './Carousel';
 export { default as Cascader } from './Cascader';
 export { default as TreeSelect } from './TreeSelect';
@@ -55,3 +57,7 @@ export { default as DatePicker } from './DatePicker';
 export type { DatePickerProps, DateRangePickerProps } from './DatePicker';
 export { default as Tree } from './Tree';
 export type { TreeProps, TreeNode, TreeRef } from './Tree';
+export { default as Upload } from './Upload';
+export type { UploadProps, UploadFile, UploadRequestOptions } from './Upload';
+export { default as Splitter } from './Splitter';
+export type { SplitterProps } from './Splitter/types';

package/dist/variables.css

@@ -191,4 +191,35 @@
   --idp-slider-tooltip-bg: rgba(0, 0, 0, 0.75); /* 滑块工具提示背景 */
   --idp-slider-tooltip-color: var(--idp-bg-color-white); /* 滑块工具提示文字颜色 */
   --idp-slider-tooltip-shadow: var(--idp-shadow-md); /* 滑块工具提示阴影 */
+  
+  /* Splitter 组件 - 分割面板相关样式变量（现代化设计） */
+  --idp-splitter-bar-size: 6px; /* 分割条大小 - 细线设计更精致 */
+  --idp-splitter-bar-bg: linear-gradient(135deg, var(--idp-bg-color-light) 0%, var(--idp-bg-color) 100%); /* 分割条渐变背景 */
+  --idp-splitter-bar-hover-bg: linear-gradient(135deg, var(--idp-bg-color) 0%, var(--idp-border-color-light) 100%); /* 分割条悬停渐变背景 */
+  --idp-splitter-bar-radius: var(--idp-border-radius-md); /* 分割条圆角 */
+  
+  /* 分割线样式 */
+  --idp-splitter-line-color: var(--idp-border-color-extra-light); /* 分割线默认颜色 */
+  --idp-splitter-line-hover-color: var(--idp-primary-color); /* 分割线悬停颜色 */
+  --idp-splitter-line-active-color: var(--idp-primary-hover-color); /* 分割线激活颜色 */
+  --idp-splitter-line-disabled-color: var(--idp-text-color-light); /* 分割线禁用颜色 */
+  --idp-splitter-line-width: 2px; /* 分割线宽度 */
+  --idp-splitter-line-length: 32px; /* 分割线长度 */
+  --idp-splitter-line-min-length: 24px; /* 分割线最小长度 */
+  --idp-splitter-line-bg: linear-gradient(180deg, var(--idp-border-color-light) 0%, var(--idp-border-color) 50%, var(--idp-border-color-light) 100%); /* 分割线渐变背景 */
+  --idp-splitter-line-hover-bg: linear-gradient(180deg, var(--idp-primary-light-color) 0%, var(--idp-primary-color) 50%, var(--idp-primary-light-color) 100%); /* 分割线悬停渐变背景 */
+  
+  /* 分割条阴影效果 */
+  --idp-splitter-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); /* 分割条轻微阴影 */
+  --idp-splitter-shadow-md: 0 2px 8px rgba(24, 144, 255, 0.25); /* 分割条悬停阴影 */
+  --idp-splitter-shadow-active: 0 0 12px rgba(24, 144, 255, 0.4); /* 分割条激活发光效果 */
+  
+  /* 面板样式 */
+  --idp-splitter-panel-bg: var(--idp-bg-color-white); /* 面板背景色 */
+  --idp-splitter-panel-border: var(--idp-border-color-light); /* 面板边框色 */
+  --idp-splitter-panel-radius: var(--idp-border-radius-md); /* 面板圆角 */
+  
+  /* 面板阴影效果 - 用于增强层次感 */
+  --idp-splitter-panel-shadow: 2px 0 8px rgba(0, 0, 0, 0.08); /* 水平布局时左侧面板右侧阴影 */
+  --idp-splitter-panel-shadow-vertical: 0 2px 8px rgba(0, 0, 0, 0.08); /* 垂直布局时上面板底部阴影 */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjpcy/simple-design",
-  "version": "1.2.11",
+  "version": "1.3.00",
   "description": "IDP Studio Design System - React Component Library",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",