yc-pro-components 0.0.1

package/es/components/yc-plus-tree/src/treeDataUtils.d.ts

@@ -0,0 +1,126 @@
+import { TreeNodeData } from './type';
+
+/**
+ * 查找节点在树中的详细位置信息
+ * 返回节点的父节点、同级节点列表、索引和路径
+ *
+ * @param treeData 树数据
+ * @param nodeId 要查找的节点ID
+ * @returns 位置信息对象，包含 parent, siblings, index, path；未找到返回 null
+ *
+ * @example
+ * ```ts
+ * const position = findNodePosition(treeData, 'node-123');
+ * if (position) {
+ *   console.log('父节点:', position.parent);
+ *   console.log('在同级中的索引:', position.index);
+ * }
+ * ```
+ */
+export declare function findNodePosition<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], nodeId: string | number): {
+    parent: TreeNodeData<T> | null;
+    siblings: TreeNodeData<T>[];
+    index: number;
+    path: (string | number)[];
+} | null;
+/**
+ * 从树中移除节点
+ * @param treeData 树数据
+ * @param nodeId 要移除的节点 ID
+ * @param childrenKey 子节点的字段名，默认 'children'
+ * @returns 包含更新后的树数据和被移除的节点
+ */
+export declare function removeNode<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], nodeId: string | number, childrenKey?: string): {
+    updatedTree: TreeNodeData<T>[];
+    removedNode: TreeNodeData<T> | null;
+};
+/**
+ * 在指定位置插入节点
+ * 可以插入到根层级或指定父节点下的某个位置
+ *
+ * @param treeData 树数据
+ * @param node 要插入的节点
+ * @param targetParentId 目标父节点ID，null 表示插入到根层级
+ * @param insertIndex 插入位置索引
+ * @returns 更新后的树数据
+ *
+ * @example
+ * ```ts
+ * // 插入到根层级的第1个位置
+ * const newTree = insertNodeAtPosition(treeData, newNode, null, 0);
+ *
+ * // 插入到指定父节点下的第2个位置
+ * const newTree = insertNodeAtPosition(treeData, newNode, 'parent-1', 1);
+ * ```
+ */
+export declare function insertNodeAtPosition<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], node: TreeNodeData<T>, targetParentId: string | number | null, insertIndex: number): TreeNodeData<T>[];
+/**
+ * 在同级数组中重新排序节点
+ * 用于根层级或同一父节点下的节点重排
+ *
+ * @param treeData 原始树数据
+ * @param oldIndex 原索引
+ * @param newIndex 新索引
+ * @returns 更新后的树数据
+ *
+ * @example
+ * ```ts
+ * // 将索引0的节点移动到索引2
+ * const newTreeData = reorderSiblingNodes(treeData, 0, 2);
+ * ```
+ */
+export declare function reorderSiblingNodes<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], oldIndex: number, newIndex: number): TreeNodeData<T>[];
+/**
+ * 在指定路径的节点中重新排序子节点
+ * @param treeData 原始树数据
+ * @param nodePath 节点路径（节点 ID 数组）
+ * @param oldIndex 原索引
+ * @param newIndex 新索引
+ * @param childrenKey 子节点的字段名，默认 'children'
+ * @returns 更新后的树数据
+ *
+ * @example
+ * ```ts
+ * // 在 ID 为 'project-1' 的节点的子节点中，将索引 0 的节点移动到索引 2
+ * const newTreeData = reorderNodeChildren(treeData, ['project-1'], 0, 2);
+ * ```
+ */
+export declare function reorderNodeChildren<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], nodePath: (string | number)[], oldIndex: number, newIndex: number, childrenKey?: string): TreeNodeData<T>[];
+/**
+ * 根据路径查找节点
+ * @param treeData 树数据
+ * @param nodePath 节点路径（节点 ID 数组）
+ * @param childrenKey 子节点的字段名，默认 'children'
+ * @returns 找到的节点，未找到返回 null
+ */
+export declare function findNodeByPath<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], nodePath: (string | number)[], childrenKey?: string): TreeNodeData<T> | null;
+/**
+ * 根据节点 ID 查找节点
+ * @param treeData 树数据
+ * @param nodeId 节点 ID
+ * @param childrenKey 子节点的字段名，默认 'children'
+ * @returns 找到的节点和其路径，未找到返回 null
+ */
+export declare function findNodeById<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], nodeId: string | number, childrenKey?: string): {
+    node: TreeNodeData<T>;
+    path: (string | number)[];
+} | null;
+/**
+ * 将节点插入为指定节点的子节点
+ * @param treeData 树数据
+ * @param parentId 父节点 ID
+ * @param node 要插入的节点
+ * @param childrenKey 子节点的字段名，默认 'children'
+ * @returns 更新后的树数据
+ */
+export declare function insertAsChild<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], parentId: string | number, node: TreeNodeData<T>, childrenKey?: string): TreeNodeData<T>[];
+/**
+ * 将节点插入为指定节点的同级节点
+ * @param treeData 树数据
+ * @param siblingId 同级节点 ID
+ * @param node 要插入的节点
+ * @param position 插入位置：'before' 或 'after'
+ * @param childrenKey 子节点的字段名，默认 'children'
+ * @returns 更新后的树数据
+ */
+export declare function insertAsSibling<T = Record<string, unknown>>(treeData: TreeNodeData<T>[], siblingId: string | number, node: TreeNodeData<T>, position: 'before' | 'after', childrenKey?: string): TreeNodeData<T>[];

package/es/components/yc-plus-tree/src/treeDataUtils.mjs

@@ -0,0 +1,213 @@
+import { cloneDeep } from 'lodash-es';
+
+function findNodePosition(treeData, nodeId) {
+  const nodeIdStr = String(nodeId);
+  const rootIndex = treeData.findIndex((node) => String(node.id) === nodeIdStr);
+  if (rootIndex !== -1) {
+    return {
+      parent: null,
+      siblings: treeData,
+      index: rootIndex,
+      path: []
+    };
+  }
+  function searchChildren(nodes, parent, currentPath) {
+    for (const node of nodes) {
+      if (node.children && node.children.length > 0) {
+        const childIndex = node.children.findIndex(
+          (child) => String(child.id) === nodeIdStr
+        );
+        if (childIndex !== -1) {
+          return {
+            parent: node,
+            siblings: node.children,
+            index: childIndex,
+            path: [...currentPath, node.id]
+          };
+        }
+        const result = searchChildren(node.children, node, [
+          ...currentPath,
+          node.id
+        ]);
+        if (result) return result;
+      }
+    }
+    return null;
+  }
+  return searchChildren(treeData, null, []);
+}
+function removeNode(treeData, nodeId, childrenKey = "children") {
+  const clonedData = cloneDeep(treeData);
+  const remove = (nodes) => {
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].id === nodeId) {
+        const [removedNode2] = nodes.splice(i, 1);
+        return removedNode2;
+      }
+      if (nodes[i][childrenKey] && Array.isArray(nodes[i][childrenKey])) {
+        const removed = remove(nodes[i][childrenKey]);
+        if (removed) {
+          return removed;
+        }
+      }
+    }
+    return null;
+  };
+  const removedNode = remove(clonedData);
+  return {
+    updatedTree: clonedData,
+    removedNode
+  };
+}
+function insertNodeAtPosition(treeData, node, targetParentId, insertIndex) {
+  const clonedData = cloneDeep(treeData);
+  const nodeToInsert = cloneDeep(node);
+  if (targetParentId === null) {
+    clonedData.splice(insertIndex, 0, nodeToInsert);
+    return clonedData;
+  }
+  function insertIntoParent(nodes) {
+    for (const currentNode of nodes) {
+      if (currentNode.id === targetParentId) {
+        if (!currentNode.children) {
+          currentNode.children = [];
+        }
+        currentNode.children.splice(insertIndex, 0, nodeToInsert);
+        return true;
+      }
+      if (currentNode.children && currentNode.children.length > 0) {
+        if (insertIntoParent(currentNode.children)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  insertIntoParent(clonedData);
+  return clonedData;
+}
+function reorderSiblingNodes(treeData, oldIndex, newIndex) {
+  const clonedData = cloneDeep(treeData);
+  if (oldIndex === newIndex) {
+    return clonedData;
+  }
+  if (oldIndex < 0 || oldIndex >= clonedData.length || newIndex < 0 || newIndex >= clonedData.length) {
+    console.warn(
+      `[reorderSiblingNodes] \u7D22\u5F15\u8D8A\u754C: oldIndex=${oldIndex}, newIndex=${newIndex}, length=${clonedData.length}`
+    );
+    return clonedData;
+  }
+  let adjustedNewIndex = newIndex;
+  if (oldIndex < newIndex) {
+    adjustedNewIndex = newIndex - 1;
+  }
+  const [movedNode] = clonedData.splice(oldIndex, 1);
+  clonedData.splice(adjustedNewIndex, 0, movedNode);
+  return clonedData;
+}
+function reorderNodeChildren(treeData, nodePath, oldIndex, newIndex, childrenKey = "children") {
+  const clonedData = cloneDeep(treeData);
+  if (nodePath.length === 0) {
+    return reorderSiblingNodes(clonedData, oldIndex, newIndex);
+  }
+  const targetNode = findNodeByPath(clonedData, nodePath, childrenKey);
+  if (!targetNode) {
+    console.warn(`[reorderNodeChildren] \u672A\u627E\u5230\u8282\u70B9\uFF0C\u8DEF\u5F84:`, nodePath);
+    return clonedData;
+  }
+  if (!targetNode[childrenKey] || !Array.isArray(targetNode[childrenKey])) {
+    console.warn(`[reorderNodeChildren] \u76EE\u6807\u8282\u70B9\u6CA1\u6709\u5B50\u8282\u70B9\u6570\u7EC4:`, targetNode);
+    return clonedData;
+  }
+  const children = targetNode[childrenKey];
+  if (oldIndex < 0 || oldIndex >= children.length || newIndex < 0 || newIndex >= children.length) {
+    console.warn(
+      `[reorderNodeChildren] \u7D22\u5F15\u8D8A\u754C: oldIndex=${oldIndex}, newIndex=${newIndex}, length=${children.length}`
+    );
+    return clonedData;
+  }
+  const [movedNode] = children.splice(oldIndex, 1);
+  children.splice(newIndex, 0, movedNode);
+  return clonedData;
+}
+function findNodeByPath(treeData, nodePath, childrenKey = "children") {
+  if (nodePath.length === 0) {
+    return null;
+  }
+  let currentNodes = treeData;
+  let targetNode = null;
+  for (const nodeId of nodePath) {
+    targetNode = currentNodes.find((node) => node.id === nodeId) || null;
+    if (!targetNode) {
+      return null;
+    }
+    if (targetNode[childrenKey] && Array.isArray(targetNode[childrenKey])) {
+      currentNodes = targetNode[childrenKey];
+    }
+  }
+  return targetNode;
+}
+function findNodeById(treeData, nodeId, childrenKey = "children") {
+  const search = (nodes, currentPath = []) => {
+    for (const node of nodes) {
+      if (node.id === nodeId) {
+        return { node, path: currentPath };
+      }
+      if (node[childrenKey] && Array.isArray(node[childrenKey])) {
+        const result = search(node[childrenKey], [
+          ...currentPath,
+          node.id
+        ]);
+        if (result) {
+          return result;
+        }
+      }
+    }
+    return null;
+  };
+  return search(treeData);
+}
+function insertAsChild(treeData, parentId, node, childrenKey = "children") {
+  const clonedData = cloneDeep(treeData);
+  const insert = (nodes) => {
+    for (const n of nodes) {
+      if (n.id === parentId) {
+        if (!n[childrenKey]) {
+          n[childrenKey] = [];
+        }
+        n[childrenKey].push(node);
+        return true;
+      }
+      if (n[childrenKey] && Array.isArray(n[childrenKey])) {
+        if (insert(n[childrenKey])) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  insert(clonedData);
+  return clonedData;
+}
+function insertAsSibling(treeData, siblingId, node, position, childrenKey = "children") {
+  const clonedData = cloneDeep(treeData);
+  const insert = (nodes) => {
+    for (let i = 0; i < nodes.length; i++) {
+      if (nodes[i].id === siblingId) {
+        const insertIndex = position === "before" ? i : i + 1;
+        nodes.splice(insertIndex, 0, node);
+        return true;
+      }
+      if (nodes[i][childrenKey] && Array.isArray(nodes[i][childrenKey])) {
+        if (insert(nodes[i][childrenKey])) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  insert(clonedData);
+  return clonedData;
+}
+
+export { findNodeById, findNodeByPath, findNodePosition, insertAsChild, insertAsSibling, insertNodeAtPosition, removeNode, reorderNodeChildren, reorderSiblingNodes };

package/es/components/yc-plus-tree/src/type.d.ts

@@ -0,0 +1,292 @@
+import { TreeNode, TreeData } from 'element-plus/es/components/tree-v2/src/types';
+
+export type { TreeNode, TreeData };
+/**
+ * 树节点基础字段
+ */
+export interface TreeNodeBase {
+    /** 节点唯一标识 */
+    id: string | number;
+    /** 节点显示文本 */
+    label: string;
+    /** 节点数量（可选，用于显示统计） */
+    count?: number;
+    /** 节点关联名称（可选，如业主姓名） */
+    name?: string;
+    /** 是否禁用节点 */
+    disabled?: boolean;
+    /** 是否为叶子节点 */
+    isLeaf?: boolean;
+}
+/**
+ * 树节点数据结构（支持泛型扩展）
+ * @template T - 自定义数据类型，默认为空对象
+ * @example
+ * ```typescript
+ * interface MyNodeData {
+ *   type: 'project' | 'building';
+ *   code: string;
+ * }
+ *
+ * const treeData: TreeNodeData<MyNodeData>[] = [
+ *   { id: 1, label: '项目', type: 'project', code: 'P001' }
+ * ];
+ * ```
+ */
+export type TreeNodeData<T = Record<string, unknown>> = TreeNodeBase & T & {
+    /** 子节点列表 */
+    children?: TreeNodeData<T>[];
+};
+/**
+ * 内联输入框模式
+ */
+export type InlineInputMode = 'add' | 'edit';
+/**
+ * 内联输入框参数
+ */
+export interface InlineInputOptions {
+    mode?: InlineInputMode;
+    targetNodeKey?: string | number | null;
+    initialValue?: string;
+}
+/**
+ * 节点重排序事件详情
+ * @template T - 自定义数据类型
+ */
+export interface NodeReorderEvent<T = Record<string, unknown>> {
+    /** 被拖拽的节点数据 */
+    draggedNode: TreeNodeData<T>;
+    /** 原始位置信息 */
+    from: {
+        /** 父节点ID（null表示根层级） */
+        parentId: string | number | null;
+        /** 原始索引位置 */
+        index: number;
+        /** 同级的所有兄弟节点（包含被拖拽节点） */
+        siblings: TreeNodeData<T>[];
+    };
+    /** 目标位置信息 */
+    to: {
+        /** 父节点ID（null表示根层级） */
+        parentId: string | number | null;
+        /** 新的索引位置 */
+        index: number;
+        /** 同级的所有兄弟节点（拖拽后的顺序） */
+        siblings: TreeNodeData<T>[];
+    };
+    /** 是否为同级拖拽 */
+    isSameLevel: boolean;
+    /** 更新后的完整树数据 */
+    updatedTreeData: TreeNodeData<T>[];
+}
+/**
+ * 节点操作项类型（联合类型）
+ */
+export type NodeAction = {
+    /** 操作类型：普通操作项 */
+    type: 'action';
+    /** 操作显示文本 */
+    label: string;
+    /** 操作代码（唯一标识） */
+    code: string;
+    /** 是否禁用该操作 */
+    disabled?: boolean;
+    /** 是否危险操作（如删除） */
+    danger?: boolean;
+    /** 图标（预留扩展） */
+    icon?: string;
+    /** 是否显示该操作（可选，用于根据节点数据动态控制显示） */
+    visible?: <T = Record<string, unknown>>(data: TreeNodeData<T>) => boolean;
+} | {
+    /** 操作类型：分割线 */
+    type: 'divider';
+    /** 是否显示该分割线（可选，用于根据节点数据动态控制显示） */
+    visible?: <T = Record<string, unknown>>(data: TreeNodeData<T>) => boolean;
+};
+/**
+ * 节点操作按钮显示控制类型
+ * - boolean: 全局控制所有节点是否显示
+ * - function: 根据节点数据和节点对象动态判断是否显示
+ *
+ * @example
+ * // 所有节点显示
+ * showNodeActions: true
+ *
+ * @example
+ * // 只在第一层显示
+ * showNodeActions: (data, node) => node.level === 1
+ *
+ * @example
+ * // 根据节点类型显示
+ * showNodeActions: (data, node) => data.type === 'project'
+ */
+export type ShowNodeActionsType<T = Record<string, unknown>> = boolean | ((data: TreeNodeData<T>, node: TreeNode) => boolean);
+/**
+ * YcPlusTree 组件 Props（支持泛型）
+ * @template T - 树节点自定义数据类型
+ */
+export interface YcPlusTreeProps<T = Record<string, unknown>> {
+    /** 树形数据 */
+    treeData?: TreeNodeData<T>[];
+    /** 默认展开的节点 key 列表 */
+    expandedKeys?: (string | number)[];
+    /** 搜索框占位符 */
+    placeholder?: string;
+    /** 节点唯一标识字段名 */
+    nodeKey?: string;
+    /** 是否显示节点数量统计 */
+    showCount?: boolean;
+    /** 是否显示节点操作按钮（支持函数动态判断） */
+    showNodeActions?: ShowNodeActionsType<T>;
+    /** 节点操作菜单配置（点击操作按钮时显示的下拉菜单） */
+    nodeActions?: NodeAction[];
+    /** 是否高亮当前选中节点 */
+    highlightCurrent?: boolean;
+    /** 自定义过滤方法 */
+    filterMethod?: (value: string, data: TreeNodeData<T>, node: TreeNode) => boolean;
+    /** 是否显示卡片边框和圆角 */
+    showCardStyle?: boolean;
+    /** 是否显示复选框 */
+    showCheckbox?: boolean;
+    /** 默认选中的节点 key 列表 */
+    defaultCheckedKeys?: (string | number)[];
+    /** el-tree-v2 的 props 配置（label、children 等字段映射） */
+    treeProps?: TreePropsConfig;
+    /** 是否启用拖拽功能（使用 SortableJS 实现） */
+    draggable?: boolean;
+    /** SortableJS 拖拽配置选项 */
+    sortableDragOptions?: Partial<SortableDragOptions>;
+    /** 是否只允许同级拖拽（true=只能在同一层级内拖拽，false=允许跨层级拖拽） */
+    sameLevelDragOnly?: boolean;
+    /** 搜索模式：local(静态搜索) | remote(远程搜索) */
+    searchMode?: 'local' | 'remote';
+    /** 远程搜索的分页加载函数（searchMode 为 remote 时使用） */
+    searchLoadMore?: TreeSearchLoadMoreFunction;
+    /** 远程搜索的每页数量 */
+    searchPageSize?: number;
+    /** 远程搜索选中的值变化回调 */
+    onSearchChange?: (value: string | number) => void;
+    /** 卡片内边距，支持字符串（如 '20px'）或数字（会自动添加 px），默认 16 */
+    padding?: string | number;
+}
+/**
+ * el-tree-v2 的 props 配置类型
+ */
+export interface TreePropsConfig {
+    label?: string;
+    children?: string;
+    disabled?: string;
+    isLeaf?: string;
+    class?: (data: TreeNodeData, node: TreeNode) => string | {
+        [key: string]: boolean;
+    };
+    [key: string]: unknown;
+}
+/**
+ * 节点点击事件参数（支持泛型）
+ * @template T - 树节点自定义数据类型
+ */
+export interface NodeClickEventParams<T = Record<string, unknown>> {
+    /** 节点数据 */
+    data: TreeNodeData<T>;
+    /** 节点对象 */
+    node: TreeNode;
+}
+/**
+ * 操作点击事件参数（支持泛型）
+ * @template T - 树节点自定义数据类型
+ */
+export interface ActionClickEventParams<T = Record<string, unknown>> {
+    /** 操作代码 */
+    actionCode: string;
+    /** 节点数据 */
+    data: TreeNodeData<T>;
+    /** 节点对象 */
+    node: TreeNode;
+}
+/**
+ * 拖拽位置类型
+ * - before: 放置在目标节点之前（同级）
+ * - after: 放置在目标节点之后（同级）
+ * - inner: 放置为目标节点的子节点（跨层级）
+ */
+export type DropType = 'before' | 'after' | 'inner';
+/**
+ * 拖拽节点信息
+ */
+export interface DragNodeInfo<T = Record<string, unknown>> {
+    /** 节点对象 */
+    node: TreeNode;
+    /** 节点数据 */
+    data: TreeNodeData<T>;
+}
+/**
+ * 拖拽配置选项
+ */
+export interface DragOptions {
+    /** 是否启用拖拽功能 */
+    draggable?: boolean;
+    /** 判断节点是否可拖拽（返回 false 则不可拖拽） */
+    allowDrag?: (node: TreeNode) => boolean;
+    /** 判断拖拽节点是否可放置到目标位置（返回 false 则不可放置） */
+    allowDrop?: (draggingNode: TreeNode, dropNode: TreeNode, type: DropType) => boolean;
+}
+/**
+ * 拖拽事件回调类型
+ */
+export interface DragEvents {
+    /** 节点开始拖拽 */
+    onDragStart?: (node: TreeNode, event: DragEvent) => void;
+    /** 拖拽进入其他节点 */
+    onDragEnter?: (draggingNode: TreeNode, dropNode: TreeNode, event: DragEvent) => void;
+    /** 拖拽离开节点 */
+    onDragLeave?: (draggingNode: TreeNode, dropNode: TreeNode, event: DragEvent) => void;
+    /** 拖拽在节点上移动 */
+    onDragOver?: (draggingNode: TreeNode, dropNode: TreeNode, event: DragEvent) => void;
+    /** 拖拽结束 */
+    onDragEnd?: (draggingNode: TreeNode, dropNode: TreeNode, dropType: DropType, event: DragEvent) => void;
+    /** 节点放置完成 */
+    onDrop?: (draggingNode: TreeNode, dropNode: TreeNode, dropType: DropType, event: DragEvent) => void;
+}
+/**
+ * SortableJS 拖拽配置选项
+ */
+export interface SortableDragOptions {
+    /** 是否启用拖拽 */
+    enabled?: boolean;
+    /** 拖拽动画时长（毫秒） */
+    animation?: number;
+    /** 拖拽手柄选择器（如果指定，只有点击手柄才能拖拽） */
+    handle?: string;
+    /** 分组名称（相同分组的元素可以互相拖拽） */
+    group?: string | {
+        name: string;
+        pull?: boolean;
+        put?: boolean;
+    };
+    /** 是否允许拖拽到其他位置 */
+    sort?: boolean;
+    /** 幽灵元素的 CSS 类名 */
+    ghostClass?: string;
+    /** 选中元素的 CSS 类名 */
+    chosenClass?: string;
+    /** 拖拽中元素的 CSS 类名 */
+    dragClass?: string;
+    /** 判断元素是否可拖拽的函数 */
+    filter?: string | ((evt: Event, target: HTMLElement) => boolean);
+    /** 阻止拖拽的选择器 */
+    preventOnFilter?: boolean;
+}
+/**
+ * 远程搜索分页加载函数类型
+ * 用于 YcPlusTree 组件的远程搜索功能
+ */
+export type TreeSearchLoadMoreFunction = (keyword: string, page: number, pageSize: number) => Promise<{
+    data: Array<{
+        label: string;
+        value: string | number;
+        [key: string]: unknown;
+    }>;
+    total: number;
+}>;
+export type RePlusTreeProps<T = Record<string, unknown>> = YcPlusTreeProps<T>;

package/es/components/yc-plus-tree/src/type.mjs

@@ -0,0 +1 @@
+