seeder-st2110-components 1.2.4 → 1.2.5

package/dist/index.esm.js

@@ -1,8 +1,8 @@
-import { useState, useCallback, useEffect, memo, useMemo, useRef } from 'react';
+import { useState, useCallback, useEffect, memo, useMemo, useRef, forwardRef, useContext, createContext } from 'react';
 import { useWebSocket, useInterval } from 'ahooks';
-import { Tooltip, Space, Flex, Divider, App, Modal, Form, Input, Alert, message, Dropdown, Spin, InputNumber, ConfigProvider, Badge, Switch, Select, Typography } from 'antd';
+import { Tooltip, Space, Flex, Divider, App, Modal, Form, Input, Alert, message, Dropdown, Spin, Popover, Button, Popconfirm, Typography, Empty, ConfigProvider, Tree, InputNumber, Badge, Switch, Select } from 'antd';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { LoadingOutlined, ExclamationCircleFilled } from '@ant-design/icons';
+import { LoadingOutlined, ExclamationCircleFilled, FolderOpenOutlined, FolderOutlined } from '@ant-design/icons';
 import axios from 'axios';
 
 const useHardwareWebSocket = socketUrl => {
@@ -666,6 +666,571 @@ const useSystemOperations = function () {
   };
 };
 
+const PopoverContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onClose,
+    onConfirm
+  } = _ref;
+  const [value, setValue] = useState('');
+  const handleConfirm = useCallback(() => {
+    onConfirm(value, () => setValue(''));
+  }, [confirm, value]);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === 'Enter') {
+      handleConfirm();
+    }
+  }, [handleConfirm]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Form.Item, {
+      label: "Folder Name",
+      style: {
+        marginBottom: 8
+      },
+      children: /*#__PURE__*/jsx(Input, {
+        ref: ref,
+        value: value,
+        onChange: e => setValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        size: "small",
+        style: {
+          width: 120
+        },
+        autoFocus: true
+      })
+    }), /*#__PURE__*/jsxs(Flex, {
+      justify: "flex-end",
+      gap: "small",
+      children: [/*#__PURE__*/jsx(Button, {
+        type: "default",
+        size: "small",
+        onClick: onClose,
+        children: "Close"
+      }), /*#__PURE__*/jsx(Button, {
+        type: "primary",
+        size: "small",
+        onClick: handleConfirm,
+        children: "OK"
+      })]
+    })]
+  });
+});
+const EditablePopover = _ref2 => {
+  let {
+    children,
+    add
+  } = _ref2;
+  const inputRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (open && inputRef.current) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  // 使用 open 属性控制浮层显示
+  const hide = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const handleConfirm = useCallback((newTitle, callback) => {
+    add(newTitle);
+    callback?.();
+    hide();
+  }, [add, hide]);
+  const handleOpenChange = useCallback(newOpen => {
+    setOpen(newOpen);
+  }, []);
+  return /*#__PURE__*/jsx(Popover, {
+    content: /*#__PURE__*/jsx(PopoverContent, {
+      ref: inputRef,
+      onClose: hide,
+      onConfirm: handleConfirm
+    }),
+    trigger: "click",
+    open: open,
+    onOpenChange: handleOpenChange,
+    destroyOnHidden: true,
+    children: children
+  });
+};
+var EditablePopover$1 = /*#__PURE__*/memo(EditablePopover);
+
+const EditableContext = /*#__PURE__*/createContext(null);
+const TreeTitle = _ref => {
+  let {
+    ...props
+  } = _ref;
+  const [form] = Form.useForm();
+  return /*#__PURE__*/jsx(Form, {
+    form: form,
+    component: false,
+    children: /*#__PURE__*/jsx(EditableContext.Provider, {
+      value: form,
+      children: /*#__PURE__*/jsx(TreeTitleNode, {
+        ...props
+      })
+    })
+  });
+};
+const TreeTitleNode = _ref2 => {
+  let {
+    title,
+    nodeData,
+    handleSave,
+    handleDel,
+    handleAdd
+  } = _ref2;
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef(null);
+  const form = useContext(EditableContext);
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+    }
+  }, [editing]);
+  const toggleEdit = useCallback(() => {
+    setEditing(prev => !prev);
+    form.setFieldsValue({
+      [nodeData.title]: nodeData.title
+    });
+  }, [form, nodeData.title]);
+  const save = useCallback(async () => {
+    try {
+      const values = await form.validateFields();
+      toggleEdit();
+      handleSave({
+        ...nodeData,
+        title: values[nodeData.title]
+      });
+    } catch (errInfo) {
+      console.error('Save failed:', errInfo);
+    }
+  }, [form, toggleEdit, handleSave, nodeData]);
+
+  // 新建文件夹 
+  // 修改文件/文件夹
+  // 删除文件/文件夹
+  const renderIconNode = useCallback(() => {
+    return /*#__PURE__*/jsxs("span", {
+      className: "icon-node",
+      onClick: e => e.stopPropagation(),
+      children: [/*#__PURE__*/jsx(EditablePopover$1, {
+        add: newTitle => handleAdd(nodeData, newTitle),
+        children: /*#__PURE__*/jsx("div", {
+          className: "px-1",
+          title: "create",
+          children: /*#__PURE__*/jsx("i", {
+            className: "iconfont icon-jia"
+          })
+        })
+      }), !nodeData.isRoot && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: "px-1",
+          onClick: toggleEdit,
+          title: "edit",
+          children: /*#__PURE__*/jsx("i", {
+            className: "iconfont icon-bianji"
+          })
+        }), /*#__PURE__*/jsx(Popconfirm, {
+          title: "Confirm to delete?",
+          onConfirm: () => handleDel(nodeData),
+          okText: "Yes",
+          cancelText: "No",
+          children: /*#__PURE__*/jsx("div", {
+            className: "px-1",
+            title: "delete",
+            children: /*#__PURE__*/jsx("i", {
+              className: "iconfont icon-jian"
+            })
+          })
+        })]
+      })]
+    });
+  }, [handleAdd, nodeData, title, toggleEdit, handleDel]);
+  const renderChildNode = useCallback(() => {
+    return editing ? /*#__PURE__*/jsx(Form.Item, {
+      style: {
+        margin: 0,
+        width: "100%"
+      },
+      name: nodeData.title,
+      children: /*#__PURE__*/jsx(Input, {
+        ref: inputRef,
+        onPressEnter: save,
+        onBlur: save,
+        autoComplete: "off",
+        size: "small"
+      })
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Typography.Text, {
+        ellipsis: true,
+        style: {
+          width: "75%"
+        },
+        children: title
+      }), renderIconNode()]
+    });
+  }, [editing, nodeData.title, save, title, renderIconNode]);
+  return /*#__PURE__*/jsx("div", {
+    className: "tree-title",
+    children: renderChildNode()
+  });
+};
+var TreeTitle$1 = /*#__PURE__*/memo(TreeTitle);
+
+const replaceRootPath = path => {
+  if (typeof path !== 'string') return '';
+  return path.startsWith('root/') ? path.slice(5) : path;
+};
+
+/**
+ * 递归转换目录结构为树形结构
+ * @param {Array} data - 原始数据
+ * @param {string} [basePath='0'] - 基础路径
+ * @param {string} [parentRoute] - 父级路由路径
+ * @returns {Array} 转换后的树形结构
+ */
+const buildDirectoryTree = function (data) {
+  let basePath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '0';
+  let parentRoute = arguments.length > 2 ? arguments[2] : undefined;
+  if (!Array.isArray(data)) return [];
+  return data.reduce((acc, item, index) => {
+    // 跳过文件类型，只处理目录
+    if (item.type === 'file') return acc;
+    const title = parentRoute ? item.name : item.sd_index || item.name;
+    const key = `${basePath}-${index}`;
+    const currentPath = parentRoute ? `${parentRoute}/${title}` : item.path || title;
+    const treeNode = {
+      title,
+      // 文件/文件夹名称
+      key,
+      icon: _ref => {
+        let {
+          expanded
+        } = _ref;
+        return expanded ? /*#__PURE__*/jsx(FolderOpenOutlined, {}) : /*#__PURE__*/jsx(FolderOutlined, {});
+      },
+      children: [],
+      isLeaf: false,
+      isRoot: Boolean(item.sd_index),
+      path: currentPath,
+      contents: (item.contents || []).filter(content => content.type === 'file'),
+      rawData: item // 保留原始数据
+    };
+
+    // 递归处理子目录
+    if (Array.isArray(item.contents) && item.contents.length > 0) {
+      treeNode.children = buildDirectoryTree(item.contents.filter(content => content.type !== 'file'), key, currentPath);
+    }
+    acc.push(treeNode);
+    return acc;
+  }, []);
+};
+
+/**
+ * 查找树中指定key的节点
+ * @param {Array} treeData - 树数据
+ * @param {string} targetKey - 要查找的key
+ * @returns {Array} 包含匹配节点的数组
+ */
+const findTreeNode = (treeData, targetKey) => {
+  if (!Array.isArray(treeData) || typeof targetKey !== 'string') return [];
+  const result = [];
+  const stack = [...treeData];
+  while (stack.length) {
+    const node = stack.pop();
+    if (node.key === targetKey) {
+      result.push(node);
+      // 如果只需要第一个匹配项，可以在这里break
+    }
+    if (Array.isArray(node.children)) {
+      stack.push(...node.children);
+    }
+  }
+  return result;
+};
+
+/**
+ * 获取树中所有节点的keys
+ * @param {Array} treeData - 树数据
+ * @returns {Array} 包含所有节点keys的数组
+ */
+const getAllNodeKeys = treeData => {
+  if (!Array.isArray(treeData)) return [];
+  const keys = [];
+  const stack = [...treeData];
+  while (stack.length) {
+    const node = stack.pop();
+    if (node.key != null) {
+      keys.push(node.key);
+    }
+    if (Array.isArray(node.children)) {
+      stack.push(...node.children);
+    }
+  }
+  return keys;
+};
+
+const useDirectoryTree = _ref => {
+  let {
+    getFolderData,
+    createFolder,
+    removeFolderFile,
+    renameFolderFile,
+    height = 760,
+    theme = {
+      components: {
+        Tree: {
+          titleHeight: 30
+        }
+      }
+    }
+  } = _ref;
+  const [treeState, setTreeState] = useState({
+    data: [],
+    selectedKeys: [],
+    expandedKeys: [],
+    currentPath: "",
+    contents: [],
+    loading: false
+  });
+  const [originTreeData, setOriginTreeData] = useState([]);
+  const updateTreeState = partialState => {
+    setTreeState(prev => ({
+      ...prev,
+      ...partialState
+    }));
+  };
+
+  // 错误处理
+  const handleError = (error, operation) => {
+    console.error(`${operation} ERROR`, error);
+    // 可以添加通知等统一错误处理
+  };
+
+  // 路径处理工具
+  const pathUtils = {
+    replaceRoot: path => replaceRootPath(path),
+    getNewPath: (node, newTitle) => {
+      const arr = node.path.split('/');
+      arr[arr.length - 1] = newTitle;
+      return arr.join('/');
+    },
+    isSamePath: (path1, path2) => {
+      return pathUtils.replaceRoot(path1) === pathUtils.replaceRoot(path2);
+    }
+  };
+
+  // 节点查找工具
+  const nodeUtils = {
+    findNode: (treeData, key) => {
+      return findTreeNode(treeData, key);
+    }
+  };
+
+  // 获取文件夹数据 文件夹名称为空时返回根目录数据
+  const fetchFolderData = useCallback(async function () {
+    let initialization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    try {
+      const data = await getFolderData({
+        folder: ""
+      });
+      if (!data?.directoryTree) {
+        return null;
+      }
+      setOriginTreeData(data.directoryTree);
+
+      // 构建根节点并生成树结构
+      const rootNode = {
+        name: 'root',
+        type: 'directory',
+        contents: data.directoryTree
+      };
+      // 递归生成treenodes
+      const treeNodes = buildDirectoryTree([rootNode]);
+      const rootChildren = treeNodes[0]?.children || [];
+      if (!rootChildren.length) {
+        return null;
+      }
+      const firstChild = rootChildren[0];
+      const newState = {
+        data: rootChildren,
+        ...(initialization && {
+          selectedKeys: [firstChild?.key],
+          expandedKeys: getAllNodeKeys(rootChildren),
+          currentPath: firstChild?.path,
+          contents: firstChild?.contents || []
+        })
+      };
+      updateTreeState(newState);
+      return rootChildren;
+    } catch (error) {
+      handleError(error, 'GET FOLDER DATA');
+    }
+  }, []);
+
+  // 初始化数据
+  useEffect(() => {
+    fetchFolderData(true);
+  }, [fetchFolderData]);
+
+  // 创建文件夹
+  const handleCreate = useCallback(async (node, newTitle) => {
+    if (!newTitle?.trim()) return false;
+    try {
+      const path = pathUtils.replaceRoot(`${node.path}/${newTitle}`);
+      await createFolder({
+        path
+      });
+      const newTreeData = await fetchFolderData();
+
+      // 找到新增节点的父节点
+      const parentNode = nodeUtils.findNode(newTreeData, node.key);
+      if (parentNode?.[0]?.children) {
+        // 通过 path 找到新增节点，得到新增节点的key
+        const addedNode = parentNode[0].children.find(ch => pathUtils.isSamePath(ch.path, `root/${newTitle}`));
+        if (addedNode) {
+          updateTreeState({
+            expandedKeys: [...treeState.expandedKeys, addedNode.key, parentNode[0].key]
+          });
+        }
+      }
+    } catch (error) {
+      handleError(error, 'CREATE FOLDER');
+    }
+  }, [fetchFolderData, treeState.expandedKeys]);
+
+  // 删除文件/文件夹
+  const handleRemove = useCallback(async node => {
+    if (!node.path) return;
+    try {
+      await removeFolderFile({
+        paths: [{
+          path: pathUtils.replaceRoot(node.path)
+        }]
+      });
+      // 如果删除的是当前选中节点，则重新初始化
+      const shouldReinitialize = treeState.selectedKeys[0] === node.key;
+      await fetchFolderData(shouldReinitialize);
+    } catch (error) {
+      handleError(error, 'REMOVE FOLDER/FILE');
+    }
+  }, [fetchFolderData, treeState.selectedKeys]);
+
+  // 修改文件/文件夹
+  const handleRename = useCallback(async node => {
+    const newPath = pathUtils.getNewPath(node, node.title);
+    if (pathUtils.isSamePath(node.path, newPath)) return false;
+    try {
+      await renameFolderFile({
+        old_path: pathUtils.replaceRoot(node.path),
+        new_path: pathUtils.replaceRoot(newPath)
+      });
+      await fetchFolderData();
+    } catch (error) {
+      handleError(error, 'RENAME FOLDER/FILE');
+    }
+  }, [fetchFolderData]);
+
+  // 选择节点
+  const onSelect = useCallback(async (keys, info) => {
+    if (!keys.length || keys[0] === treeState.selectedKeys[0] && pathUtils.isSamePath(info.node.path, treeState.currentPath)) return;
+    updateTreeState({
+      selectedKeys: keys,
+      currentPath: info.node.path,
+      loading: true
+    });
+    try {
+      // 模拟延迟加载
+      // eslint-disable-next-line no-promise-executor-return
+      await new Promise(resolve => setTimeout(resolve, 300));
+      updateTreeState({
+        contents: info.node.contents,
+        loading: false
+      });
+    } catch (error) {
+      handleError(error, 'SELECT NODE');
+      updateTreeState({
+        loading: false
+      });
+    }
+  }, [treeState.selectedKeys, treeState.currentPath]);
+
+  // 展开节点
+  const onExpand = useCallback(keys => {
+    updateTreeState({
+      expandedKeys: keys
+    });
+  }, []);
+
+  // 上传右侧文件或删除右侧文件 成功后的回调函数
+  const updateFileContents = useCallback(async () => {
+    // 找到当前选中的节点，更新当前节点的 contents
+    const newTreeData = await fetchFolderData();
+    const selectedNode = nodeUtils.findNode(newTreeData, treeState.selectedKeys[0]);
+    if (selectedNode?.[0]) {
+      updateTreeState({
+        contents: selectedNode[0].contents
+      });
+    }
+  }, [fetchFolderData, treeState.selectedKeys]);
+
+  // 删除文件
+  const removeFile = useCallback(async url => {
+    try {
+      await removeFolderFile({
+        path: url
+      });
+      await updateFileContents();
+    } catch (error) {
+      handleError(error, 'REMOVE FILE');
+    }
+  }, [updateFileContents]);
+  const MemoizedTree = useMemo(() => {
+    if (!treeState.data?.length) {
+      return /*#__PURE__*/jsx(Empty, {
+        image: Empty.PRESENTED_IMAGE_SIMPLE
+      });
+    }
+    return /*#__PURE__*/jsx("div", {
+      style: {
+        paddingTop: 16
+      },
+      children: /*#__PURE__*/jsx(ConfigProvider, {
+        theme: theme,
+        children: /*#__PURE__*/jsx(Tree, {
+          blockNode: true,
+          showIcon: true,
+          selectedKeys: treeState.selectedKeys,
+          expandedKeys: treeState.expandedKeys,
+          onSelect: onSelect,
+          onExpand: onExpand,
+          treeData: treeState.data,
+          titleRender: nodeData => /*#__PURE__*/jsx(TreeTitle$1, {
+            title: nodeData.title,
+            nodeData: nodeData,
+            handleSave: handleRename,
+            handleDel: handleRemove,
+            handleAdd: handleCreate
+          }),
+          height: height
+        })
+      })
+    }, "folder-directory");
+  }, [treeState.data, treeState.selectedKeys, treeState.expandedKeys]);
+  return {
+    directoryTree: MemoizedTree,
+    contents,
+    currentPath,
+    updateFileContents,
+    removeFile,
+    loading,
+    originTreeData
+  };
+};
+
 const UpgradeManager = _ref => {
   let {
     menuItems = [],
@@ -2610,5 +3175,5 @@ const NetworkSettingsModal = _ref2 => {
 };
 var NetworkSettingsModal$1 = /*#__PURE__*/memo(NetworkSettingsModal);
 
-export { AuthorizationModal, NetworkSettingsModal$1 as NetworkSettingsModal, PtpModal$1 as PtpModal, SystemOperations, UpgradeManager, useAuth, useHardwareUsage, useHardwareWebSocket, useSystemOperations, useUpgrade };
+export { AuthorizationModal, NetworkSettingsModal$1 as NetworkSettingsModal, PtpModal$1 as PtpModal, SystemOperations, UpgradeManager, useAuth, useDirectoryTree, useHardwareUsage, useHardwareWebSocket, useSystemOperations, useUpgrade };
 //# sourceMappingURL=index.esm.js.map