@gingkoo/pandora-explorer 0.0.1-alpha.51 → 0.0.1-alpha.52

package/lib/es/index.js

@@ -1,13 +1,13 @@
 /**
- * @gingkoo/pandora-explorer v0.0.1-alpha.51
+ * @gingkoo/pandora-explorer v0.0.1-alpha.52
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx$1 from 'classnames';
 import * as React from 'react';
 import React__default, { createContext, useRef, useState, useImperativeHandle, useEffect, useMemo, useLayoutEffect, useContext, createElement, forwardRef } from 'react';
+import { createRoot } from 'react-dom/client';
 import createEmotion from '@emotion/css/create-instance';
 import { cx as cx$2 } from '@emotion/css';
-import { createRoot } from 'react-dom/client';
 import { cloneDeep, truncate } from 'lodash';
 import KeyCode from 'rc-util/lib/KeyCode';
 import pickAttrs from 'rc-util/lib/pickAttrs';
@@ -1585,30 +1585,9 @@ const ExplorerHead = props => {
   const pathInputRef = useRef(null);
   const [path, setPath] = useState('');
   const [pathFocus, setFocus] = useState(false);
-  useLayoutEffect(() => {
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [path, pathFocus]);
   useEffect(() => {
     setPath(store?.curInfo?.pathDisplay || '');
   }, [store?.curInfo?.pathDisplay]);
-  const handleKeyDown = e => {
-    if (e.altKey && e.key === '3') {
-      store?.setMenutype('column');
-    }
-    if (e.altKey && e.key === '2') {
-      store?.setMenutype('table');
-    }
-    if (e.altKey && e.key === '1') {
-      store?.setMenutype('tile');
-    }
-    if (pathFocus && (e.key === 'Enter' || e.keyCode === 13)) {
-      loadData?.(path);
-      setFocus(false);
-    }
-  };
   const Breadcrumb = useMemo(() => {
     let arr = [];
     let path = store?.curInfo?.pathDisplay || '';
@@ -1731,6 +1710,12 @@ const ExplorerHead = props => {
             },
             className: 'path',
             spellCheck: 'false',
+            onKeyDown: e => {
+              if (pathFocus && (e.key === 'Enter' || e.keyCode === 13)) {
+                loadData?.(path);
+                setFocus(false);
+              }
+            },
             onBlur: v => {
               loadData?.(v.target.value);
               setFocus(false);
@@ -5229,17 +5214,17 @@ function TableItem(props) {
     loadMenu,
     ...param
   } = props;
-  return jsx(Dropdown, {
-    trigger: 'contextMenu',
-    style: {
-      height: '100%'
-    },
+  return jsx("div", {
+    className: cx$1('explorer-tree-row'),
+    "data-id": id,
+    "data-type": props.type,
     onContextMenu: e => {
       e.stopPropagation();
-    },
-    dropdownRender: ({
-      onClone
-    }) => {
+      e.preventDefault();
+      let x = 0;
+      let y = 0;
+      x = e.nativeEvent.clientX + 5;
+      y = e.nativeEvent.clientY + 5;
       if (!props.isOpenMenu) return;
       let menudata = [];
       if (getMenu(props.id)) {
@@ -5249,133 +5234,134 @@ function TableItem(props) {
       } else {
         menudata = getMenu('');
       }
-      return jsx(Menu, {
-        menu: menudata,
-        loadMenu: loadMenu,
-        onChange: async v => {
-          onClone && onClone();
-          onMenuClick && onMenuClick(v);
-        }
+      props?.openMenu({
+        x,
+        y,
+        content: jsx(Menu, {
+          menu: menudata,
+          loadMenu: loadMenu,
+          onChange: async v => {
+            onMenuClick && onMenuClick(v);
+            props?.closeMenu?.();
+          }
+        })
+      }, {
+        key: props.id
       });
     },
-    children: jsx("div", {
-      className: cx$1('explorer-tree-row'),
-      "data-id": id,
-      "data-type": props.type,
-      children: columns.map((v, i) => {
-        let x = width[i] - (i ? 0 : 58 + 8) + (i ? 10 : 0);
-        if (i == 0 && typeof param.level === 'number') {
-          x = x - param.level * 16;
-        }
-        if (typeof v?.render === 'function') {
-          return jsxs("div", {
-            className: cx$1('row-item'),
-            style: width[i] ? {
-              flex: `0 0 ${x}px`,
-              width: x + 'px'
-            } : {},
-            children: [jsxs("div", {
-              className: 'row-item-content',
-              children: [" ", v.render?.(param, v.key)]
-            }), !i && jsx("div", {
-              children: jsx("div", {
-                className: cx$1('row-item-check', {
-                  active: active
-                }),
-                onMouseDown: e => {
-                  e.stopPropagation();
-                },
-                onClick: e => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  onCheck?.();
-                },
-                children: jsx("span", {
-                  className: 'btn-check',
-                  children: jsx(CircleCheckSvg, {})
-                })
-              })
-            })]
-          }, i);
-        }
-        if (rename && v.key == 'title') {
-          return jsx("div", {
-            className: cx$1('row-item'),
-            style: width[i] ? {
-              flex: `0 0 ${x}px`,
-              width: x + 'px'
-            } : {},
-            children: jsx("div", {
-              className: 'row-item-content',
-              children: jsx("input", {
-                className: 'node-input',
-                autoFocus: true,
-                defaultValue: param[v?.key],
-                placeholder: '\u8BF7\u8F93\u5165',
-                onKeyDown: e => {
-                  if (e.key === 'Enter' || e.keyCode === 13) {
-                    if (props.create_file) {
-                      onRename?.(e.target?.value);
-                      return;
-                    }
-                    if (e.target?.value === param[v?.key]) {
-                      onRename?.(false);
-                      return;
-                    }
-                    onRename?.(e.target?.value);
-                  }
-                },
-                onFocus: e => {
-                  let i = param[v?.key]?.lastIndexOf('.');
-                  if (props?.suffix == 'folder') {
-                    e.target.setSelectionRange(0, param[v?.key]?.length);
-                  } else if (i !== -1) {
-                    e.target.setSelectionRange(0, i);
-                  }
-                },
-                onBlur: e => {
-                  if (props.create_file) {
-                    onRename?.(e.target.value);
-                    return;
-                  }
-                  if (e.target.value === param[v?.key]) {
-                    onRename?.(false);
-                    return;
-                  }
-                  onRename?.(e.target.value);
-                }
-              })
-            })
-          }, i);
-        }
+    children: columns.map((v, i) => {
+      let x = width[i] - (i ? 0 : 58 + 8) + (i ? 10 : 0);
+      if (i == 0 && typeof param.level === 'number') {
+        x = x - param.level * 16;
+      }
+      if (typeof v?.render === 'function') {
         return jsxs("div", {
           className: cx$1('row-item'),
           style: width[i] ? {
             flex: `0 0 ${x}px`,
             width: x + 'px'
           } : {},
-          children: [jsx("div", {
+          children: [jsxs("div", {
             className: 'row-item-content',
-            children: param[v?.key] || ''
+            children: [" ", v.render?.(param, v.key)]
           }), !i && jsx("div", {
-            className: cx$1('row-item-check', {
-              active: active
-            }),
-            onMouseDown: e => {
-              e.stopPropagation();
-            },
-            onClick: e => {
-              e.stopPropagation();
-              e.preventDefault();
-              onCheck?.();
-            },
-            children: jsx("span", {
-              className: 'btn-check',
-              children: jsx(CircleCheckSvg, {})
+            children: jsx("div", {
+              className: cx$1('row-item-check', {
+                active: active
+              }),
+              onMouseDown: e => {
+                e.stopPropagation();
+              },
+              onClick: e => {
+                e.stopPropagation();
+                e.preventDefault();
+                onCheck?.();
+              },
+              children: jsx("span", {
+                className: 'btn-check',
+                children: jsx(CircleCheckSvg, {})
+              })
             })
           })]
         }, i);
-      })
+      }
+      if (rename && v.key == 'title') {
+        return jsx("div", {
+          className: cx$1('row-item'),
+          style: width[i] ? {
+            flex: `0 0 ${x}px`,
+            width: x + 'px'
+          } : {},
+          children: jsx("div", {
+            className: 'row-item-content',
+            children: jsx("input", {
+              className: 'node-input',
+              autoFocus: true,
+              defaultValue: param[v?.key],
+              placeholder: '\u8BF7\u8F93\u5165',
+              onKeyDown: e => {
+                if (e.key === 'Enter' || e.keyCode === 13) {
+                  if (props.create_file) {
+                    onRename?.(e.target?.value);
+                    return;
+                  }
+                  if (e.target?.value === param[v?.key]) {
+                    onRename?.(false);
+                    return;
+                  }
+                  onRename?.(e.target?.value);
+                }
+              },
+              onFocus: e => {
+                let i = param[v?.key]?.lastIndexOf('.');
+                if (props?.suffix == 'folder') {
+                  e.target.setSelectionRange(0, param[v?.key]?.length);
+                } else if (i !== -1) {
+                  e.target.setSelectionRange(0, i);
+                }
+              },
+              onBlur: e => {
+                if (props.create_file) {
+                  onRename?.(e.target.value);
+                  return;
+                }
+                if (e.target.value === param[v?.key]) {
+                  onRename?.(false);
+                  return;
+                }
+                onRename?.(e.target.value);
+              }
+            })
+          })
+        }, i);
+      }
+      return jsxs("div", {
+        className: cx$1('row-item'),
+        style: width[i] ? {
+          flex: `0 0 ${x}px`,
+          width: x + 'px'
+        } : {},
+        children: [jsx("div", {
+          className: 'row-item-content',
+          children: param[v?.key] || ''
+        }), !i && jsx("div", {
+          className: cx$1('row-item-check', {
+            active: active
+          }),
+          onMouseDown: e => {
+            e.stopPropagation();
+          },
+          onClick: e => {
+            e.stopPropagation();
+            e.preventDefault();
+            onCheck?.();
+          },
+          children: jsx("span", {
+            className: 'btn-check',
+            children: jsx(CircleCheckSvg, {})
+          })
+        })]
+      }, i);
     })
   });
 }
@@ -5398,22 +5384,26 @@ var TreeItem = (props => {
   } else {
     menudata = getMenu('');
   }
-  return jsx(Dropdown, {
-    trigger: 'contextMenu',
-    style: {
-      height: '100%'
-    },
-    dropdownRender: ({
-      onClone
-    }) => {
-      if (props?.menu === false) return;
-      return jsx(Menu, {
-        menu: menudata,
-        loadMenu: loadMenu,
-        onChange: async v => {
-          onClone && onClone();
-          onMenuClick && onMenuClick(v);
-        }
+  return jsx("div", {
+    onContextMenu: e => {
+      e.preventDefault();
+      let x = 0;
+      let y = 0;
+      x = e.nativeEvent.clientX + 5;
+      y = e.nativeEvent.clientY + 5;
+      props?.openMenu({
+        x,
+        y,
+        content: jsx(Menu, {
+          menu: menudata,
+          loadMenu: loadMenu,
+          onChange: async v => {
+            onMenuClick && onMenuClick(v);
+            props?.closeMenu?.();
+          }
+        })
+      }, {
+        key: props.id
       });
     },
     children: props.rename ? jsx("div", {
@@ -5883,6 +5873,7 @@ var Tree = (props => {
           },
           onClick: e => {
             e.stopPropagation();
+            props?.closeMenu();
           },
           onLoad: v => {
             if (v.length == loadedKeys?.length) return;
@@ -5999,6 +5990,10 @@ const ExplorerMenu = props => {
   function onMenuClick(key, data) {
     _onMenuClick(key, data, 'menu');
   }
+  const openMenu = (props, param) => {
+    setSelect(param.key);
+    store.openMenu(props);
+  };
   return jsx("div", {
     className: 'frame-left',
     onContextMenu: e => {
@@ -6020,6 +6015,8 @@ const ExplorerMenu = props => {
       loadMenu: loadMenu,
       onChange: onChange,
       onRename: onRename,
+      openMenu: openMenu,
+      closeMenu: store.closeMenu,
       onSelect: v => {
         if (v.key === store.curInfo?.key) return;
         store.setPathDisplay(v?.pathDisplay);
@@ -6176,7 +6173,7 @@ function Tile(props) {
               menudata = getMenu('');
             }
             let isname = rekey == v.key || v?.create_file;
-            return jsx("div", {
+            return jsxs("div", {
               "data-id": v.key,
               "data-type": v.type,
               className: cx$1('file', {
@@ -6199,79 +6196,68 @@ function Tile(props) {
               onDoubleClick: () => {
                 onDblclick?.(v.key, v);
               },
-              children: jsxs(Dropdown, {
-                trigger: 'contextMenu',
-                onContextMenu: e => {
-                  e.stopPropagation();
-                },
-                dropdownRender: ({
-                  onClone
-                }) => {
-                  return jsx(Menu, {
+              onContextMenu: e => {
+                e.preventDefault();
+                e.stopPropagation();
+                let x = 0;
+                let y = 0;
+                x = e.nativeEvent.clientX + 5;
+                y = e.nativeEvent.clientY + 5;
+                props.openMenu({
+                  x: x,
+                  y: y,
+                  content: jsx(Menu, {
                     menu: menudata,
                     loadMenu: loadMenu,
                     onChange: key => {
                       if (key == 'rename') {
                         setRekey(v.key);
-                        onClone();
                         return;
                       }
                       onMenuClick?.(key, v);
-                      onClone();
+                      props.closeMenu();
                     }
-                  });
+                  })
+                }, v);
+              },
+              children: [jsx("i", {
+                className: cx$1('path-ico'),
+                style: {
+                  width: w + 'px',
+                  height: w - w / 10 + 'px'
                 },
-                children: [jsx("i", {
-                  className: cx$1('path-ico'),
+                children: v.type === 'folder' || !v?.pic ? icons(v, 'x-item-icon', {
+                  width: w + 'px',
+                  height: w + 'px',
+                  lineHeight: w + 'px'
+                }) : jsx("img", {
+                  className: 'picture-show',
+                  draggable: 'false',
+                  src: v.pic,
                   style: {
                     width: w + 'px',
-                    height: w - w / 10 + 'px'
-                  },
-                  children: v.type === 'folder' || !v?.pic ? icons(v, 'x-item-icon', {
-                    width: w + 'px',
-                    height: w + 'px',
-                    lineHeight: w + 'px'
-                  }) : jsx("img", {
-                    className: 'picture-show',
-                    draggable: 'false',
-                    src: v.pic,
-                    style: {
-                      width: w + 'px',
-                      height: w + 'px'
+                    height: w + 'px'
+                  }
+                })
+              }), jsx("div", {
+                className: 'title-type-name',
+                style: {
+                  width: w + 'px'
+                },
+                children: isname ? jsx("textarea", {
+                  autoFocus: true,
+                  rows: 3,
+                  defaultValue: v.title,
+                  onFocus: e => {
+                    let i = v.title.lastIndexOf('.');
+                    if (props?.suffix == 'folder') {
+                      e.target.setSelectionRange(0, v.title.length);
+                    } else if (i !== -1) {
+                      e.target.setSelectionRange(0, i);
                     }
-                  })
-                }), jsx("div", {
-                  className: 'title-type-name',
-                  style: {
-                    width: w + 'px'
                   },
-                  children: isname ? jsx("textarea", {
-                    autoFocus: true,
-                    rows: 3,
-                    defaultValue: v.title,
-                    onFocus: e => {
-                      let i = v.title.lastIndexOf('.');
-                      if (props?.suffix == 'folder') {
-                        e.target.setSelectionRange(0, v.title.length);
-                      } else if (i !== -1) {
-                        e.target.setSelectionRange(0, i);
-                      }
-                    },
-                    onKeyDown: e => {
-                      if (e.key === 'Enter' || e.keyCode === 13) {
-                        if (props.create_file) {
-                          onRename?.(v.key, e.target?.value, v);
-                          return;
-                        }
-                        if (e.target?.value === v.title) {
-                          setRekey(null);
-                          return;
-                        }
-                        onRename?.(v.key, e.target.value, v);
-                        setRekey(null);
-                      }
-                    },
-                    onBlur: e => {
+                  onKeyDown: e => {
+                    if (e.key === 'Enter' || e.keyCode === 13) {
                       if (props.create_file) {
                         onRename?.(v.key, e.target?.value, v);
                         return;
@@ -6282,16 +6268,28 @@ function Tile(props) {
                       }
                       onRename?.(v.key, e.target.value, v);
                       setRekey(null);
-                    },
-                    onMouseDown: e => {
-                      e.stopPropagation();
                     }
-                  }) : jsx("span", {
-                    className: 'title',
-                    children: v.title
-                  })
-                })]
-              })
+                  },
+                  onBlur: e => {
+                    if (props.create_file) {
+                      onRename?.(v.key, e.target?.value, v);
+                      return;
+                    }
+                    if (e.target?.value === v.title) {
+                      setRekey(null);
+                      return;
+                    }
+                    onRename?.(v.key, e.target.value, v);
+                    setRekey(null);
+                  },
+                  onMouseDown: e => {
+                    e.stopPropagation();
+                  }
+                }) : jsx("span", {
+                  className: 'title',
+                  children: v.title
+                })
+              })]
             }, v.key);
           })
         }, index);
@@ -6431,10 +6429,11 @@ const SelectBox = props => {
       clientX: x,
       clientY: y
     } = e;
+    //动画
     if (!time && cur?.current?.length && isDrag) {
       cur.current?.map((v, i) => {
         v.style.cssText = `
-        position: absolute; 
+        position: absolute;
         transition: 0.3s;
         top:${y + i * 3}px;
         left:${x + i * 3}px;
@@ -6445,23 +6444,22 @@ const SelectBox = props => {
         cur.current = [];
       }, 200);
     }
+    //移动
     if (isDrag && selects.length) {
       if (target.current) {
         target.current.style.cssText = `
-        position: absolute; 
-         top:${y}px;
-         left:${x}px;
-        `;
+          position: absolute;
+           top:${y}px;
+           left:${x}px;
+          `;
       }
     } else {
+      //选框
       createBox(e);
     }
   }
   //鼠标松开
   function handleBodyMouseup() {
-    if (isDclick.current) {
-      clearTimeout(isDclick.current);
-    }
     if (target.current) {
       empty();
     } else {
@@ -6486,7 +6484,7 @@ const SelectBox = props => {
       }, 300);
     }
   }
-  //拖动时
+  //拖动文件
   const handleDragOver = e => {
     e.preventDefault();
     const {
@@ -6848,109 +6846,104 @@ const SelectBox = props => {
       })
     });
   }
-  return jsx(Dropdown, {
-    style: {
-      height: '100%'
+  return jsxs("div", {
+    ref: ref,
+    className: cx$1(`file-select-box ${className}`),
+    onDragLeave: e => {
+      e.preventDefault();
     },
-    trigger: 'contextMenu',
-    dropdownRender: ({
-      onClone
-    }) => {
-      return jsx(Menu, {
-        menu: menudata,
-        loadMenu: v => {
-          let menu = loadMenu(v);
-          if (menu?.key == 'rename') return undefined;
-          if (menu?.key == 'copy') return undefined;
-          return menu;
-        },
-        onChange: key => {
-          if (key == 'update') {
-            if (store?.curInfo) {
-              loadData(store?.curInfo?.key);
-            }
-            onClone();
-            return;
-          }
-          if (key == 'file-upload') {
-            store.uploadFile();
-            onClone();
-            return;
-          }
-          if (key == 'create') {
-            store.createFolder();
-            onClone();
-            return;
+    onDoubleClick: () => {
+      clearTimeout(isDclick.current);
+    },
+    onMouseDown: e => {
+      let type = isSelectTarget(e, checkType);
+      if (checks.includes(type?.[0])) {
+        //右键不能今天拖动
+        if (e.button === 2) return;
+        if (!isDrag && checkMode == 'check') {
+          isDclick.current = setTimeout(() => {
+            let arr = checks.filter(v => v !== type?.[0]);
+            setSelect(arr);
+            onChange(arr);
+          }, 200);
+        }
+        time = null;
+        isDrag && createVDom(e);
+        return;
+      }
+      //在区域未选中
+      if (Array.isArray(type)) {
+        if (checkMode == 'check') {
+          if (!checks.includes(type?.[0])) {
+            let arr = [...selects, ...type];
+            setSelect(arr);
+            onChange(arr);
           }
-          onMenuClick?.(key, store.curInfo);
-          onClone();
+        } else {
+          setSelect(type);
+          onChange(type);
         }
+      }
+      isDclick.current = null;
+      if (type) return;
+      if (selects.length) {
+        if (checkMode !== 'check') {
+          setSelect([]);
+          onChange([]);
+          empty();
+        }
+      }
+      //创建选取
+      clickRef.current = false;
+      isSelectBoxes && setStageClickInfo({
+        show: true,
+        x: e.clientX,
+        y: e.clientY
       });
     },
-    children: jsxs("div", {
-      ref: ref,
-      className: cx$1(`file-select-box ${className}`),
-      onDragLeave: e => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onMouseDown: e => {
-        // if (e.button === 2) return;
-        if (isDclick.current) {
-          clearTimeout(isDclick.current);
-          isDclick.current = null;
-        } else {
-          let type = isSelectTarget(e, checkType);
-          isDclick.current = setTimeout(() => {
-            //选中
-            if (checks.includes(type?.[0])) {
-              //右键不能今天拖动
-              if (e.button === 2) return;
-              if (!isDrag && checkMode == 'check') {
-                let arr = checks.filter(v => v !== type?.[0]);
-                setSelect(arr);
-                onChange(arr);
+    onContextMenu: e => {
+      let x = 0;
+      let y = 0;
+      x = e.nativeEvent.clientX + 5;
+      y = e.nativeEvent.clientY + 5;
+      store.openMenu({
+        x: x,
+        y: y,
+        content: jsx(Menu, {
+          menu: menudata,
+          loadMenu: v => {
+            let menu = loadMenu(v);
+            if (menu?.key == 'rename') return undefined;
+            if (menu?.key == 'copy') return undefined;
+            return menu;
+          },
+          onChange: key => {
+            if (key == 'update') {
+              if (store?.curInfo) {
+                loadData(store?.curInfo?.key);
               }
-              time = null;
-              isDrag && createVDom(e);
+              store.closeMenu();
               return;
             }
-            //在区域未选中
-            if (Array.isArray(type)) {
-              if (checkMode == 'check') {
-                if (!checks.includes(type?.[0])) {
-                  let arr = [...selects, ...type];
-                  setSelect(arr);
-                  onChange(arr);
-                }
-              } else {
-                setSelect(type);
-                onChange(type);
-              }
+            if (key == 'file-upload') {
+              store.uploadFile();
+              store.closeMenu();
+              return;
             }
-            isDclick.current = null;
-          }, 200);
-          if (type) return;
-          if (selects.length) {
-            if (checkMode !== 'check') {
-              setSelect([]);
-              onChange([]);
-              empty();
+            if (key == 'create') {
+              store.createFolder();
+              store.closeMenu();
+              return;
             }
+            onMenuClick?.(key, store.curInfo);
+            store.closeMenu();
           }
-          //创建选取
-          clickRef.current = false;
-          isSelectBoxes && setStageClickInfo({
-            show: true,
-            x: e.clientX,
-            y: e.clientY
-          });
-        }
-      },
-      children: [props.children, /*#__PURE__*/ReactDOM.createPortal(jsx("div", {
-        ref: selectionRef
-      }), document.body)]
-    })
+        })
+      }, store?.curInfo);
+    },
+    children: [props.children, /*#__PURE__*/ReactDOM.createPortal(jsx("div", {
+      ref: selectionRef
+    }), document.body)]
   });
 };
 
@@ -7233,7 +7226,7 @@ const Layout$1 = props => {
   const [expandkey, setExpandkey] = useState([]);
   useEffect(() => {
     setExpandkey([]);
-  }, [store.curInfo?.key]);
+  }, [store?.curInfo?.key]);
   function Loading() {
     return jsx("div", {
       className: 'explorer-columns-loading',
@@ -7342,6 +7335,8 @@ const Layout$1 = props => {
         showLine: false,
         isOpenMenu: isOpenMenu,
         icon: store.getIcons,
+        openMenu: store.openMenu,
+        closeMenu: store.closeMenu,
         isload: true,
         ischeck: truncate,
         onChecks: arr => {
@@ -7382,6 +7377,8 @@ const Layout$1 = props => {
         data: store.curlist,
         icons: store.getIcons,
         checks: checks,
+        openMenu: store.openMenu,
+        closeMenu: store.closeMenu,
         onSelect: (key, v) => {
           store.setCurSelect(v.key);
         },
@@ -7650,6 +7647,9 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
   const [menutype, setMenutype] = useState('tile');
   const [infoshow, setInfoShow] = useState(false);
   const [loading, setLoading] = useState(ApiStatusEnum.READY);
+  const box = useRef(null);
+  const boxMenu = useRef(null);
+  const menu = useRef(null);
   useImperativeHandle(ref, () => ({
     removeLog: () => {
       //清空日志
@@ -7674,6 +7674,52 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
       }
     }
   }));
+  /* ************ 挂载监听  **************** */
+  useEffect(() => {
+    window.addEventListener('click', closeMenu);
+    window.addEventListener('click', closeMenu);
+    return () => {
+      window.removeEventListener('click', closeMenu, false);
+      window.removeEventListener('contextmenu', closeMenu, true);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [curSelect, dataMap]);
+  const handleKeyDown = e => {
+    if (e.altKey && e.key === '3') {
+      setMenutype('column');
+    }
+    if (e.altKey && e.key === '2') {
+      setMenutype('table');
+    }
+    if (e.altKey && e.key === '1') {
+      setMenutype('tile');
+    }
+    if (e.altKey && e.key === 'c') {
+      if (curSelect && dataMap?.[curSelect]) {
+        onCopy?.(dataMap?.[curSelect]);
+      }
+    }
+    if (e.altKey && e.key === 'x') {
+      if (curSelect && dataMap?.[curSelect]) {
+        onCopy?.(dataMap?.[curSelect]);
+      }
+    }
+    if (e.altKey && e.key === 'v') {
+      if (curSelect && dataMap?.[curSelect]) {
+        onCopy?.(dataMap?.[curSelect]);
+      }
+    }
+  };
+  const closeMenu = () => {
+    boxMenu.current?.remove?.();
+    boxMenu.current = null;
+    menu.current = null;
+  };
   const Icons = (v, className, style) => {
     const IconMap = new Map([['favorite', jsx(FavoriteSvg, {})], ['space', jsx(SpaceSvg, {})], ['netdisk', jsx(NetdiskSvg, {})], ['album', jsx(AlbumSvg, {})], ['recycle', jsx(RecycleSvg, {})], ['recently', jsx(RecentlySvg, {})], ['coordination', jsx(LinkSvg, {})], ['text', jsx(TextSvg, {})], ['share', jsx(ShareLinkSvg, {})]]);
     if (v?.label) {
@@ -7737,6 +7783,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     let map = addLevel(curlist, {});
     setDataMap(map);
   }, [curlist]);
+  /* ************  加载更新数据   **************** */
   async function loadData(key, param) {
     setLoading(ApiStatusEnum.LOADING);
     let data = (await props.loadData?.(key, param)) || {};
@@ -7760,6 +7807,51 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     let data = await props.loadData?.(key);
     return data?.fileList || [];
   }
+  const reloadNode = key => {
+    setNavLoadKey(nav_loadKey.filter(v => v !== key));
+    const addData = (data, key) => {
+      let arr = data;
+      let i = 0;
+      while (i < arr.length) {
+        let item = arr[i];
+        if (item.key == key) {
+          item.api = true;
+          item.isLeaf = false;
+          item.children = [];
+        }
+        if (Array.isArray(item.children)) {
+          item.children = addData(item.children, key);
+        }
+        i++;
+      }
+      return arr || [];
+    };
+    let arr = addData(data || [], key);
+    onChange?.(arr);
+  };
+  function updata(id, param) {
+    const fixData = (data, id, param) => {
+      let arr = data;
+      let i = 0;
+      while (i < arr.length) {
+        let item = arr[i];
+        if (item.key == id) {
+          let _arr = Object.keys(param);
+          _arr.map(v => {
+            item[v] = param[v];
+          });
+        }
+        if (Array.isArray(item.children)) {
+          item.children = fixData(item.children, id, param);
+        }
+        i++;
+      }
+      return arr || [];
+    };
+    let arr = fixData(data || [], id, param);
+    onChange?.(arr);
+  }
+  /* ************  功能方法   **************** */
   //创建和重名
   async function onRename(key, value, info, type) {
     if (info.create_file) {
@@ -7868,50 +7960,6 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     });
     setCurList(list);
   }
-  function updata(id, param) {
-    const fixData = (data, id, param) => {
-      let arr = data;
-      let i = 0;
-      while (i < arr.length) {
-        let item = arr[i];
-        if (item.key == id) {
-          let _arr = Object.keys(param);
-          _arr.map(v => {
-            item[v] = param[v];
-          });
-        }
-        if (Array.isArray(item.children)) {
-          item.children = fixData(item.children, id, param);
-        }
-        i++;
-      }
-      return arr || [];
-    };
-    let arr = fixData(data || [], id, param);
-    onChange?.(arr);
-  }
-  const reloadNode = key => {
-    setNavLoadKey(nav_loadKey.filter(v => v !== key));
-    const addData = (data, key) => {
-      let arr = data;
-      let i = 0;
-      while (i < arr.length) {
-        let item = arr[i];
-        if (item.key == key) {
-          item.api = true;
-          item.isLeaf = false;
-          item.children = [];
-        }
-        if (Array.isArray(item.children)) {
-          item.children = addData(item.children, key);
-        }
-        i++;
-      }
-      return arr || [];
-    };
-    let arr = addData(data || [], key);
-    onChange?.(arr);
-  };
   async function onMenuClick(key, param, type) {
     if (key == 'remove') {
       await onDelect?.(param);
@@ -7937,7 +7985,64 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
       return;
     }
     _onMenuClick?.(key, param);
-    console.log('运行');
+  }
+  function openMenu(props, param) {
+    if (param?.key) ;
+    closeMenu();
+    let {
+      x = 0,
+      y = 0,
+      className = '',
+      placement,
+      content
+    } = props;
+    let _menu = null;
+    _menu = document.createElement('div');
+    menu.current = createRoot(_menu);
+    if (boxMenu.current) {
+      boxMenu.current?.appendChild(menu);
+    } else {
+      let body = document.querySelector('body');
+      let _body = document.createElement('div');
+      _body.className = `_explorer-menu ${className}`;
+      _body.style.cssText = `
+        position:absolute;
+        top: 0px;
+        left: 0px;
+        widht:0px;
+        height: 0px;
+        z-index:110;
+      `;
+      boxMenu.current = _body;
+      _body?.appendChild(_menu);
+      body?.appendChild(_body);
+    }
+    let _box = box.current.getBoundingClientRect();
+    _menu.style.cssText = `
+      position:absolute;
+      top:  -100px;
+      left: -100px;
+      background: #fff;
+      opacity: 0;
+  `;
+    _box.bottom;
+    _box.top;
+    menu.current.render(content);
+    setTimeout(() => {
+      let cur = _menu.getBoundingClientRect();
+      if (cur.height + y > _box.bottom) {
+        y = y - cur.height - 10;
+      }
+      if (cur.width + x > _box.right) {
+        x = x - cur.width - 10;
+      }
+      _menu.style.cssText = `
+      position:absolute;
+      top: ${y}px;
+      left:${x}px;
+      background: #fff;
+    `;
+    }, 100);
   }
   return jsx(ExampleContext.Provider, {
     value: {
@@ -7967,6 +8072,8 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
       uploadFile,
       createFolder,
       reloadNode,
+      openMenu,
+      closeMenu,
       //set
       setLog,
       setLogIndex,
@@ -7985,6 +8092,7 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
     },
     children: jsx("div", {
       className: 'explorer-container',
+      ref: box,
       children: jsx(Layout, {
         ...props,
         loadData: loadData,