@zjpcy/simple-design 1.2.10 → 1.2.11

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

@@ -0,0 +1,202 @@
+import * as React from 'react';
+/** Tooltip 配置 */
+export interface TreeNodeTooltip {
+    /** Tooltip 内容 */
+    title?: React.ReactNode;
+    /** 位置 */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** 触发方式 */
+    trigger?: 'hover' | 'click';
+    /** 延迟显示时间（毫秒） */
+    delay?: number;
+    /** 自定义背景色 */
+    backgroundColor?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 自定义类名 */
+    className?: string;
+}
+export interface TreeNode {
+    /** 节点唯一标识 */
+    key: string | number;
+    /** 节点标题 */
+    title: React.ReactNode;
+    /** 节点图标 */
+    icon?: React.ReactNode;
+    /** 子节点 */
+    children?: TreeNode[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否禁用复选框 */
+    disableCheckbox?: boolean;
+    /** 是否选中 */
+    checked?: boolean;
+    /** 是否半选 */
+    halfChecked?: boolean;
+    /** 是否展开 */
+    expanded?: boolean;
+    /** 是否叶子节点 */
+    isLeaf?: boolean;
+    /** 加载中 */
+    loading?: boolean;
+    /** 节点类名 */
+    className?: string;
+    /** 节点样式 */
+    style?: React.CSSProperties;
+    /** 自定义渲染 */
+    render?: (node: TreeNode) => React.ReactNode;
+    /** 节点拖拽相关 */
+    draggable?: boolean;
+    /** Tooltip 配置，默认不启用 */
+    tooltip?: TreeNodeTooltip | boolean;
+}
+export interface TreeProps {
+    /** 树数据 */
+    treeData?: TreeNode[];
+    /** 默认展开的键 */
+    defaultExpandedKeys?: (string | number)[];
+    /** 展开的键（受控） */
+    expandedKeys?: (string | number)[];
+    /** 展开/收起回调 */
+    onExpand?: (expandedKeys: (string | number)[], { expanded, node, nativeEvent }: {
+        expanded: boolean;
+        node: TreeNode;
+        nativeEvent: MouseEvent;
+    }) => void;
+    /** 默认选中的键 */
+    defaultSelectedKeys?: (string | number)[];
+    /** 选中的键（受控） */
+    selectedKeys?: (string | number)[];
+    /** 选中回调 */
+    onSelect?: (selectedKeys: (string | number)[], { selected, node, nativeEvent }: {
+        selected: boolean;
+        node: TreeNode;
+        nativeEvent: MouseEvent;
+    }) => void;
+    /** 默认勾选的键 */
+    defaultCheckedKeys?: (string | number)[];
+    /** 勾选的键（受控） */
+    checkedKeys?: (string | number)[];
+    /** 勾选回调 */
+    onCheck?: (checkedKeys: (string | number)[], { checked, node, nativeEvent }: {
+        checked: boolean;
+        node: TreeNode;
+        nativeEvent: MouseEvent;
+    }) => void;
+    /** 是否显示复选框 */
+    checkable?: boolean;
+    /** 是否父子关联 */
+    checkStrictly?: boolean;
+    /** 是否支持多选 */
+    multiple?: boolean;
+    /** 是否支持搜索 */
+    showSearch?: boolean;
+    /** 搜索匹配高亮 */
+    filterOption?: (search: string, node: TreeNode) => boolean;
+    /** 自定义搜索匹配渲染 */
+    renderSearch?: (search: string, node: TreeNode) => React.ReactNode;
+    /** 是否显示连接线 */
+    showLine?: boolean;
+    /** 是否显示缩进标识 */
+    showIndent?: boolean;
+    /** 是否显示图标 */
+    showIcon?: boolean;
+    /** 是否异步加载数据 */
+    loadData?: (node: TreeNode) => Promise<void>;
+    /** 动画时长（毫秒） */
+    motionDuration?: number;
+    /** 是否支持拖拽 */
+    draggable?: boolean;
+    /** 拖拽开始回调 */
+    onDragStart?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+    }) => void;
+    /** 拖拽进入回调 */
+    onDragEnter?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+    }) => void;
+    /** 拖拽放置回调 */
+    onDrop?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+        dragNode: TreeNode;
+        dragPosition: 'before' | 'after' | 'inside';
+    }) => void;
+    /** 拖拽结束回调 */
+    onDragEnd?: (params: {
+        event: MouseEvent;
+        node: TreeNode;
+    }) => void;
+    /** 是否支持动态添加节点 */
+    addable?: boolean;
+    /** 是否支持删除节点 */
+    removable?: boolean;
+    /** 是否支持编辑节点 */
+    editable?: boolean;
+    /** 操作按钮显示模式：'inline' 行内显示 | 'dropdown' 下拉菜单 */
+    actionDisplayMode?: 'inline' | 'dropdown';
+    /** 添加节点回调 - 返回新节点的初始数据 */
+    onAddNode?: (parentNode: TreeNode) => TreeNode | TreeNode[] | void;
+    /** 删除节点回调 - 返回 false 可阻止删除 */
+    onRemoveNode?: (node: TreeNode) => boolean | void;
+    /** 编辑节点回调 - 返回编辑后的标题 */
+    onEditNode?: (node: TreeNode, newTitle: string) => string | void;
+    /** 自定义节点渲染 */
+    renderNode?: (node: TreeNode) => React.ReactNode;
+    /** 节点前渲染 */
+    prefixCls?: string;
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否自动展开父节点 */
+    autoExpandParent?: boolean;
+    /** 默认展开所有 */
+    defaultExpandAll?: boolean;
+    /** 展开动画 */
+    motion?: React.CSSProperties | ((node: TreeNode, isExpanded: boolean) => React.CSSProperties);
+    /** 全局 Tooltip 配置，默认关闭 */
+    tooltip?: TreeNodeTooltip | boolean;
+}
+export interface TreeNodeProps {
+    /** 节点数据 */
+    node: TreeNode;
+    /** 层级深度 */
+    level: number;
+    /** 是否展开 */
+    expanded: boolean;
+    /** 是否选中 */
+    selected: boolean;
+    /** 是否勾选 */
+    checked: boolean;
+    /** 是否半选 */
+    halfChecked: boolean;
+    /** 是否加载中 */
+    loading: boolean;
+    /** 是否叶子节点 */
+    isLeaf: boolean;
+    /** 父节点是否展开 */
+    parentExpanded: boolean;
+    /** 树组件属性 */
+    treeProps: TreeProps;
+    /** 展开节点 */
+    onExpand: (node: TreeNode, e: React.MouseEvent) => void;
+    /** 选择节点 */
+    onSelect: (node: TreeNode, e: React.MouseEvent) => void;
+    /** 勾选节点 */
+    onCheck: (node: TreeNode, e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+export interface TreeState {
+    /** 展开的键集合 */
+    expandedKeys: (string | number)[];
+    /** 选中的键集合 */
+    selectedKeys: (string | number)[];
+    /** 勾选的键集合 */
+    checkedKeys: (string | number)[];
+    /** 加载中的键集合 */
+    loadingKeys: (string | number)[];
+}

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

@@ -1,4 +1,5 @@
 export { default as Button } from './Button';
+export { default as Carousel } from './Carousel';
 export { default as Cascader } from './Cascader';
 export { default as TreeSelect } from './TreeSelect';
 export { default as ColorPicker } from './ColorPicker';
@@ -12,6 +13,7 @@ export { default as Marquee } from './Marquee';
 export { default as Message, MessageProvider, useMessage, message } from './Message';
 export { default as Modal } from './Modal';
 export { default as Notice } from './Notice/Notice';
+export type { NoticeProps, NoticeType } from './Notice/Notice';
 export { default as Notification } from './Notification/Notification';
 export { default as Radio } from './Radio';
 export { default as Select } from './Select';
@@ -47,3 +49,9 @@ export { default as Popconfirm } from './Popconfirm';
 export type { PopconfirmProps, PopconfirmPlacement } from './Popconfirm';
 export { default as Progress } from './Progress';
 export type { ProgressProps, ProgressType, ProgressStatus } from './Progress';
+export { default as TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker';
+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';

package/dist/variables.css

@@ -3,6 +3,7 @@
   /* 主色调 - 主要用于强调和突出显示 */
   --idp-primary-color: #1890ff; /* 主色调基础色 - 用于按钮、链接等主要交互元素 */
   --idp-primary-hover-color: #40a9ff; /* 主色调悬停色 - 用于鼠标悬停状态 */
+  --idp-primary-light-color: rgba(24, 100, 240, 0.1); /* 主色调浅色 - 用于多选选中背景等 */
   
   /* 辅助色 - 用于不同状态和场景 */
   --idp-success-color: #52c41a; /* 成功色 - 用于成功状态、确认操作等 */
@@ -152,4 +153,42 @@
   --idp-modal-container-bg: var(--idp-bg-color-white); /* 模态框容器背景色 */
   --idp-modal-header-bg: var(--idp-bg-color); /* 模态框头部背景色 */
   --idp-modal-footer-bg: var(--idp-bg-color); /* 模态框底部背景色 */
+  
+  /* Progress 组件 - 进度条相关样式变量 */
+  --idp-progress-default-bg: var(--idp-primary-color); /* 进度条默认背景色 */
+  --idp-progress-default-bg-gradient: var(--idp-primary-hover-color); /* 进度条默认渐变色 */
+  --idp-progress-success-bg: var(--idp-success-color); /* 进度条成功背景色 */
+  --idp-progress-success-bg-gradient: #73d13d; /* 进度条成功渐变色 */
+  --idp-progress-exception-bg: var(--idp-error-color); /* 进度条异常背景色 */
+  --idp-progress-exception-bg-gradient: #ff7875; /* 进度条异常渐变色 */
+  --idp-progress-trail-bg: linear-gradient(135deg, var(--idp-bg-color-light) 0%, var(--idp-bg-color) 100%); /* 进度条轨道背景 */
+  --idp-progress-text-color: var(--idp-text-color); /* 进度条文字颜色 */
+  --idp-progress-shadow: 0 2px 8px rgba(24, 144, 255, 0.25); /* 进度条默认阴影 */
+  --idp-progress-shadow-success: 0 2px 8px rgba(82, 196, 26, 0.35); /* 进度条成功阴影 */
+  --idp-progress-shadow-exception: 0 2px 8px rgba(245, 34, 45, 0.35); /* 进度条异常阴影 */
+  
+  /* Slider 组件 - 滑块相关样式变量 */
+  --idp-slider-track-height: 6px; /* 滑块轨道高度 */
+  --idp-slider-track-bg: linear-gradient(135deg, var(--idp-bg-color-light) 0%, var(--idp-border-color) 100%); /* 滑块轨道背景 */
+  --idp-slider-track-filled-bg: linear-gradient(135deg, var(--idp-primary-color) 0%, var(--idp-primary-hover-color) 100%); /* 滑块已填充轨道背景 */
+  --idp-slider-track-border-radius: var(--idp-border-radius-sm); /* 滑块轨道圆角 */
+  
+  --idp-slider-handle-size: 18px; /* 滑块手柄大小 */
+  --idp-slider-handle-bg: var(--idp-bg-color-white); /* 滑块手柄背景 */
+  --idp-slider-handle-border: 2px solid var(--idp-primary-color); /* 滑块手柄边框 */
+  --idp-slider-handle-shadow: var(--idp-shadow-sm); /* 滑块手柄阴影 */
+  --idp-slider-handle-shadow-hover: var(--idp-shadow-md); /* 滑块手柄悬停阴影 */
+  --idp-slider-handle-shadow-active: 0 2px 8px rgba(24, 144, 255, 0.4); /* 滑块手柄激活阴影 */
+  
+  --idp-slider-disabled-track-bg: linear-gradient(135deg, var(--idp-bg-color) 0%, var(--idp-border-color-light) 100%); /* 滑块禁用轨道背景 */
+  --idp-slider-disabled-filled-bg: linear-gradient(135deg, var(--idp-text-color-light) 0%, #d9d9d9 100%); /* 滑块禁用已填充背景 */
+  --idp-slider-disabled-handle-border: var(--idp-text-color-light); /* 滑块禁用手柄边框 */
+  
+  --idp-slider-mark-color: var(--idp-text-color-tertiary); /* 滑块标记文字颜色 */
+  --idp-slider-mark-line-bg: var(--idp-border-color); /* 滑块标记线颜色 */
+  --idp-slider-value-color: var(--idp-text-color); /* 滑块值显示颜色 */
+  
+  --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); /* 滑块工具提示阴影 */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zjpcy/simple-design",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "description": "IDP Studio Design System - React Component Library",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -80,6 +80,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.3.0",
+    "lunar-typescript": "^1.8.6",
     "prismjs": "^1.30.0",
     "react-color": "^2.19.3",
     "react-syntax-highlighter": "^16.1.0",