@gingkoo/pandora-explorer 0.0.1-alpha.23 → 0.0.1-alpha.25

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-explorer v0.0.1-alpha.23
+ * @gingkoo/pandora-explorer v0.0.1-alpha.25
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import cx$1 from 'classnames';
@@ -877,6 +877,17 @@ function SuffixIcon({
     })
   });
 }
+function UploadSvg() {
+  return jsx("svg", {
+    className: 'icon',
+    viewBox: '0 0 1024 1024',
+    version: '1.1',
+    xmlns: 'http://www.w3.org/2000/svg',
+    children: jsx("path", {
+      d: 'M768 640v128H256V640h-85.333v128c0 46.933 38.4 85.333 85.333 85.333h512c46.933 0 85.333-38.4 85.333-85.333V640H768zM298.667 384l60.16 60.16 110.506-110.08v348.587h85.334V334.08l110.506 110.08 60.16-60.16L512 170.667 298.667 384z'
+    })
+  });
+}
 
 var css_248z$b = ".app-wrapper {\n  height: 100%;\n}\n.frame-explorer-main {\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.frame-left {\n  position: relative;\n  border-right: 1px solid rgba(100, 100, 100, 0.1);\n  height: 100%;\n}\n.frame-left::after {\n  position: absolute;\n  content: ' ';\n  top: 50%;\n  right: 1px;\n  width: 1px;\n  height: 18px;\n  margin-left: -1px;\n  margin-top: -9px;\n  border: 1px solid #ddd;\n  border-top: none;\n  border-bottom: none;\n  backdrop-filter: none;\n  border-radius: 0;\n  background: transparent;\n  box-sizing: content-box;\n  -webkit-backdrop-filter: blur(10px);\n  z-index: 2;\n}\n.frame-right {\n  border-right: 1px solid #f5f5f5;\n  height: 100%;\n}\n.frame-right .frame-header {\n  width: 100%;\n  height: 85px;\n  min-width: 400px;\n  position: relative;\n  background: #fff;\n}\n.frame-right .frame-main {\n  position: relative;\n  height: 100%;\n}\n.box {\n  display: flex;\n}\n.box .item {\n  position: relative;\n  width: 100px;\n  height: 100px;\n  background: red;\n  margin-left: 20px;\n  transition: 0.3s;\n  top: 0;\n  left: 0;\n}\n.explorer-label-icon {\n  display: inline-block;\n  position: relative;\n  box-sizing: border-box !important;\n}\n.explorer-label-icon > div {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border-radius: 50% !important;\n}\n.explorer-label-icon > div::after {\n  width: 40%;\n  height: 40%;\n  border-radius: 50%;\n  content: ' ';\n  background: linear-gradient(45deg, #ffffff7d, #ffffff00);\n  margin-top: 4px;\n  position: absolute;\n  right: 15%;\n  top: 15%;\n}\n";
 styleInject(css_248z$b);
@@ -1910,7 +1921,7 @@ function Slider(props) {
 var css_248z$7 = ".explorer-menu {\n  height: 100%;\n}\n";
 styleInject(css_248z$7);
 
-var css_248z$6 = ".explorer-tree {\n  width: 100%;\n  height: 100%;\n}\n.explorer-tree-switch {\n  height: 31px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: top !important;\n  color: #aaa;\n  border-radius: 2px;\n}\n.explorer-tree-switch:hover {\n  color: #1890ff;\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.explorer-tree-switch.open {\n  color: #1890ff;\n}\n.explorer-tree-switch.open > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-switch.loading {\n  background: transparent;\n  animation: rotate 1s linear infinite;\n}\n.explorer-tree-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  margin: 6px 0px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 5px;\n  font-style: normal;\n  pointer-events: none;\n  vertical-align: top;\n}\n.explorer-tree-node {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-node .node-title {\n  flex: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-node .node-menu {\n  display: none;\n  flex-shrink: 0;\n  width: 30px;\n  justify-content: center;\n  align-items: center;\n}\n.explorer-tree-node .node-menu .node-menu-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 14px;\n  height: 14px;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  cursor: pointer;\n  z-index: 50;\n  background: #fff;\n  color: #ccc;\n  font-size: 7px;\n  transition: 0.3s;\n}\n.explorer-tree-node .node-menu .node-menu-icon > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-node .node-menu .node-menu-icon:hover {\n  border: 1px solid #1890ff;\n  color: #1890ff;\n}\n.explorer-tree-node .node-input {\n  display: inline-block;\n  width: 100%;\n  height: 24px;\n  outline: 0;\n  border: 1px solid #eee;\n  border-radius: 3px;\n  transition: 0.3s;\n  padding: 0 5px;\n}\n.explorer-tree-node .node-input:hover {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node .node-input:focus {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node:hover .node-menu {\n  display: flex;\n}\n.explorer-tree-row {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-row .row-item {\n  display: flex;\n  padding: 0 10px;\n  flex: 1 0 0;\n  user-select: none;\n}\n.explorer-tree-row .row-item .row-item-content {\n  flex: 1 0 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-row .row-item .row-item-content > input {\n  height: 24px;\n  outline: none;\n  width: 100%;\n  outline: 0;\n  border: 0;\n}\n.explorer-tree-row .row-item-check {\n  display: flex;\n  width: 19px;\n  align-items: center;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n.explorer-tree-row .row-item-check .btn-check {\n  display: inline-block;\n  height: 19px;\n  width: 19px;\n  flex-shrink: 0;\n  z-index: 11;\n  font-size: 20px;\n  text-align: center;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.05);\n  color: #fff;\n  line-height: 0;\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity 0.3s;\n  margin: 2px;\n}\n.explorer-tree-row .row-item-check .btn-check > svg {\n  position: relative;\n  width: 23px;\n  height: 23px;\n  left: -2px;\n  top: -2px;\n}\n.explorer-tree-row .row-item-check.active .btn-check {\n  opacity: 1;\n  background: #3b8cff;\n}\n.explorer-tree.table .tree-scroll-x {\n  width: 100%;\n  overflow: hidden;\n  overflow-x: auto;\n}\n.explorer-tree.table .tree-scroll-x::-webkit-scrollbar {\n  display: none;\n}\n.explorer-tree.table .tree-scroll {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 10;\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree {\n  height: calc(100% - 26px);\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree-list {\n  height: 100%;\n}\n.explorer-tree.table .rc-tree-checkbox {\n  display: none !important;\n}\n.explorer-tree.table .rc-tree-treenode {\n  border-radius: 2px;\n  width: fit-content;\n  opacity: 0.8;\n  z-index: 100;\n  pointer-events: all;\n}\n.explorer-tree.table .rc-tree-treenode:nth-child(odd) {\n  background: #4664780d;\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  padding: 8px 0 0 8px;\n}\n.explorer-tree.table .rc-tree-treenode-leaf-last:last-child {\n  height: 200px;\n  width: 1px;\n}\n.explorer-tree.table .rc-tree-treenode-checkbox-checked {\n  background: #cce8ff !important;\n  border: 1px solid #99d1ff;\n}\n.explorer-tree .rc-tree-iconEle {\n  height: 31px !important;\n  vertical-align: top !important;\n  width: auto !important;\n}\n.explorer-tree .rc-tree-treenode {\n  position: relative;\n  height: 31px;\n  line-height: 31px;\n  border: 1px solid transparent;\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-content-wrapper {\n  height: 31px !important;\n  display: flex !important;\n  flex: 1;\n  margin-left: calc(24px - 20px);\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-selected {\n  background-color: transparent;\n  box-shadow: none;\n  opacity: 1;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected {\n  background-color: #cce8ff !important;\n  border: 1px solid #1890ff;\n  opacity: 0.8;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected .node-menu {\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode:hover {\n  background: #e5f3ff !important;\n  box-shadow: 0 0 0 1px transparent;\n}\n.explorer-tree .rc-tree-switcher {\n  flex-shrink: 0;\n  width: 20px !important;\n  height: 31px !important;\n  vertical-align: top !important;\n  background-image: none !important;\n}\n.explorer-tree .rc-tree-title {\n  display: inline-block;\n  height: 31px;\n  width: 100%;\n}\n.explorer-tree.showLine .rc-tree-indent {\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-indent-unit {\n  width: 20px;\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  width: 8px;\n  top: calc(31px / 2);\n  left: 10px;\n  height: 1px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  top: 0;\n  height: calc(31px / 2);\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::before {\n  display: none;\n  content: '';\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.explorer-checks .rc-tree-treenode:hover .row-item-check .btn-check {\n  opacity: 1;\n}\n.explorer-tree .rc-tree-list-scrollbar-thumb {\n  background: #bbb !important;\n}\n.explorer-tree .rc-tree-list-scrollbar {\n  width: 5px !important;\n}\n.explorer-tree .node-motion {\n  transition: all 0.3s;\n  overflow-y: hidden;\n}\n.explorer-tree .rc-tree-child-tree {\n  display: block;\n}\n.explorer-table-header {\n  display: flex;\n  width: fit-content;\n  min-width: 100%;\n  height: 25px;\n  line-height: 25px;\n  color: #448;\n  border-bottom: 1px solid #e3e3e3;\n  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.05);\n  background: #fff;\n}\n.explorer-table-header .item {\n  padding: 0 10px 0 0;\n  flex: 1 0 0;\n  margin-left: -10px;\n  border-right: 1px solid #eee;\n  user-select: none;\n  min-width: 80px;\n}\n.explorer-table-header .item:first-child {\n  padding-left: 20px;\n}\n.explorer-table-header .resize {\n  position: relative;\n  flex: 0 0 20px;\n  width: 20px;\n  z-index: 10;\n  cursor: col-resize;\n  left: -10px;\n  transition: background 0.2s;\n}\n.explorer-table-header .resize::before {\n  content: '';\n  position: fixed;\n  width: 1px;\n  height: 2000px;\n  z-index: 10;\n  margin-left: 10px;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.2s;\n}\n.explorer-table-header .resize:hover {\n  background: #1890ff30;\n}\n.explorer-table-header .resize.resize-focus {\n  z-index: 9999;\n}\n.explorer-table-header .resize.resize-focus:before {\n  opacity: 1;\n  background: #1890ff;\n  visibility: visible;\n}\n.explorer-table-header .resize:last-child {\n  flex: 0 0 10px;\n  width: 10px;\n}\n.explorer-table-header.item-resize {\n  z-index: 10;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z$6 = ".explorer-tree {\n  width: 100%;\n  height: 100%;\n}\n.explorer-tree-switch {\n  height: 31px;\n  width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: top !important;\n  color: #aaa;\n  border-radius: 2px;\n}\n.explorer-tree-switch:hover {\n  color: #1890ff;\n  background-color: rgba(0, 0, 0, 0.03);\n}\n.explorer-tree-switch.open {\n  color: #1890ff;\n}\n.explorer-tree-switch.open > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-switch.loading {\n  background: transparent;\n  animation: rotate 1s linear infinite;\n}\n.explorer-tree-icon {\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  margin: 6px 0px;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: cover;\n  border-radius: 5px;\n  font-style: normal;\n  pointer-events: none;\n  vertical-align: top;\n}\n.explorer-tree-node {\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-node .node-title {\n  flex: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-node .node-menu {\n  display: none;\n  flex-shrink: 0;\n  width: 30px;\n  justify-content: center;\n  align-items: center;\n}\n.explorer-tree-node .node-menu .node-menu-icon {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 14px;\n  height: 14px;\n  border: 1px solid #ccc;\n  border-radius: 2px;\n  cursor: pointer;\n  z-index: 50;\n  background: #fff;\n  color: #ccc;\n  font-size: 7px;\n  transition: 0.3s;\n}\n.explorer-tree-node .node-menu .node-menu-icon > svg {\n  transform: rotate(90deg);\n}\n.explorer-tree-node .node-menu .node-menu-icon:hover {\n  border: 1px solid #1890ff;\n  color: #1890ff;\n}\n.explorer-tree-node .node-input {\n  display: inline-block;\n  width: 100%;\n  height: 24px;\n  outline: 0;\n  border: 1px solid #eee;\n  border-radius: 3px;\n  transition: 0.3s;\n  padding: 0 5px;\n}\n.explorer-tree-node .node-input:hover {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node .node-input:focus {\n  border: 1px solid #1890ff;\n}\n.explorer-tree-node:hover .node-menu {\n  display: flex;\n}\n.explorer-tree-row {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n.explorer-tree-row .row-item {\n  display: flex;\n  padding: 0 10px;\n  flex: 1 0 0;\n  user-select: none;\n}\n.explorer-tree-row .row-item .row-item-content {\n  flex: 1 0 0;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.explorer-tree-row .row-item .row-item-content > input {\n  height: 24px;\n  outline: none;\n  width: 100%;\n  outline: 0;\n  border: 0;\n}\n.explorer-tree-row .row-item-check {\n  display: flex;\n  width: 19px;\n  align-items: center;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n.explorer-tree-row .row-item-check .btn-check {\n  display: inline-block;\n  height: 19px;\n  width: 19px;\n  flex-shrink: 0;\n  z-index: 11;\n  font-size: 20px;\n  text-align: center;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.05);\n  color: #fff;\n  line-height: 0;\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity 0.3s;\n  margin: 2px;\n}\n.explorer-tree-row .row-item-check .btn-check > svg {\n  position: relative;\n  width: 23px;\n  height: 23px;\n  left: -2px;\n  top: -2px;\n}\n.explorer-tree-row .row-item-check.active .btn-check {\n  opacity: 1;\n  background: #3b8cff;\n}\n.explorer-tree.table .tree-scroll-x {\n  width: 100%;\n  overflow: hidden;\n  overflow-x: auto;\n}\n.explorer-tree.table .tree-scroll-x::-webkit-scrollbar {\n  display: none;\n}\n.explorer-tree.table .tree-scroll {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 10;\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree {\n  height: calc(100% - 26px);\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  overflow: auto;\n}\n.explorer-tree.table .rc-tree-list {\n  height: 100%;\n}\n.explorer-tree.table .rc-tree-checkbox {\n  display: none !important;\n}\n.explorer-tree.table .rc-tree-treenode {\n  border-radius: 2px;\n  width: fit-content;\n  opacity: 0.8;\n  z-index: 100;\n  pointer-events: all;\n}\n.explorer-tree.table .rc-tree-treenode:nth-child(odd) {\n  background: #4664780d;\n}\n.explorer-tree.table .rc-tree-list-holder-inner {\n  padding: 8px 0 0 8px;\n}\n.explorer-tree.table .rc-tree-treenode-leaf-last:last-child {\n  height: 200px;\n  width: 1px;\n}\n.explorer-tree.table .rc-tree-treenode-checkbox-checked {\n  background: #cce8ff !important;\n  border: 1px solid #99d1ff;\n}\n.explorer-tree .rc-tree-iconEle {\n  height: 31px !important;\n  vertical-align: top !important;\n  width: auto !important;\n}\n.explorer-tree .rc-tree-treenode {\n  position: relative;\n  height: 31px;\n  line-height: 31px;\n  border: 1px solid transparent;\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-content-wrapper {\n  height: 31px !important;\n  display: flex !important;\n  flex: 1;\n  margin-left: calc(24px - 20px);\n}\n.explorer-tree .rc-tree-treenode > .rc-tree-node-selected {\n  background-color: transparent;\n  box-shadow: none;\n  opacity: 1;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected {\n  background-color: #cce8ff !important;\n  border: 1px solid #1890ff;\n  opacity: 0.8;\n}\n.explorer-tree .rc-tree-treenode.rc-tree-treenode-selected .node-menu {\n  display: flex;\n}\n.explorer-tree .rc-tree-treenode:hover {\n  background: #e5f3ff !important;\n  box-shadow: 0 0 0 1px transparent;\n}\n.explorer-tree .rc-tree-treenode.hover {\n  background: #e5f3ff !important;\n}\n.explorer-tree .rc-tree-switcher {\n  flex-shrink: 0;\n  width: 20px !important;\n  height: 31px !important;\n  vertical-align: top !important;\n  background-image: none !important;\n}\n.explorer-tree .rc-tree-title {\n  display: inline-block;\n  height: 31px;\n  width: 100%;\n}\n.explorer-tree.showLine .rc-tree-indent {\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-indent > .rc-tree-indent-unit::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-indent-unit {\n  width: 20px;\n  height: 31px;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::before {\n  content: '';\n  display: inline-block;\n  position: absolute;\n  width: 8px;\n  top: calc(31px / 2);\n  left: 10px;\n  height: 1px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:last-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  top: 0;\n  height: calc(31px / 2);\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child {\n  position: relative;\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::before {\n  display: none;\n  content: '';\n}\n.explorer-tree.showLine .rc-tree-treenode-leaf-last .rc-tree-indent > .rc-tree-indent-unit:first-child::after {\n  display: inline-block;\n  position: absolute;\n  content: '';\n  width: 1px;\n  left: 10px;\n  height: 31px;\n  background-color: rgba(0, 0, 0, 0.075);\n}\n.explorer-tree.explorer-checks .rc-tree-treenode:hover .row-item-check .btn-check {\n  opacity: 1;\n}\n.explorer-tree .rc-tree-list-scrollbar-thumb {\n  background: #bbb !important;\n}\n.explorer-tree .rc-tree-list-scrollbar {\n  width: 5px !important;\n}\n.explorer-tree .node-motion {\n  transition: all 0.3s;\n  overflow-y: hidden;\n}\n.explorer-tree .rc-tree-child-tree {\n  display: block;\n}\n.explorer-table-header {\n  display: flex;\n  width: fit-content;\n  min-width: 100%;\n  height: 25px;\n  line-height: 25px;\n  color: #448;\n  border-bottom: 1px solid #e3e3e3;\n  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.05);\n  background: #fff;\n}\n.explorer-table-header .item {\n  padding: 0 10px 0 0;\n  flex: 1 0 0;\n  margin-left: -10px;\n  border-right: 1px solid #eee;\n  user-select: none;\n  min-width: 80px;\n}\n.explorer-table-header .item:first-child {\n  padding-left: 20px;\n}\n.explorer-table-header .resize {\n  position: relative;\n  flex: 0 0 20px;\n  width: 20px;\n  z-index: 10;\n  cursor: col-resize;\n  left: -10px;\n  transition: background 0.2s;\n}\n.explorer-table-header .resize::before {\n  content: '';\n  position: fixed;\n  width: 1px;\n  height: 2000px;\n  z-index: 10;\n  margin-left: 10px;\n  visibility: hidden;\n  opacity: 0;\n  transition: all 0.2s;\n}\n.explorer-table-header .resize:hover {\n  background: #1890ff30;\n}\n.explorer-table-header .resize.resize-focus {\n  z-index: 9999;\n}\n.explorer-table-header .resize.resize-focus:before {\n  opacity: 1;\n  background: #1890ff;\n  visibility: visible;\n}\n.explorer-table-header .resize:last-child {\n  flex: 0 0 10px;\n  width: 10px;\n}\n.explorer-table-header.item-resize {\n  z-index: 10;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
 styleInject(css_248z$6);
 
 /**
@@ -5373,6 +5384,30 @@ function NotData() {
   });
 }
 
+//添加层级
+const addLevel = (data, levelIndex = 0, filedata) => {
+  let arr = data;
+  if (filedata) {
+    arr = arr.filter(v => filedata?.(v));
+  }
+  let i = 0;
+  while (i < arr.length) {
+    let item = arr[i];
+    item['level'] = levelIndex;
+    if (!item?.api && !item?.children) {
+      item['isLeaf'] = true;
+    }
+    if (Array.isArray(item.children) && item.children.length > 0) {
+      if (filedata) {
+        item.children = addLevel(item.children, levelIndex + 1, filedata);
+      } else {
+        addLevel(item.children, levelIndex + 1, filedata);
+      }
+    }
+    i++;
+  }
+  return arr;
+};
 //下拉动画
 const motion = {
   motionName: 'node-motion',
@@ -5436,11 +5471,11 @@ var Tree = (props => {
     }, 0);
     return size > w ? size : Math.ceil(w);
   }, [width, _widht]);
-  // useEffect(() => {
-  //   let arr = cloneDeep(treeData);
-  //   arr = addLevel(arr, 0, filterData);
-  //   setData(arr);
-  // }, [treeData, type, filterData]);
+  useEffect(() => {
+    let arr = cloneDeep(treeData);
+    arr = addLevel(arr, 0, filterData);
+    setData(arr);
+  }, [treeData, type, filterData]);
   useEffect(() => {
     if (!Array.isArray(columns)) return;
     if (!ref.current) return;
@@ -5814,13 +5849,14 @@ const ExplorerMenu = props => {
   } = props;
   const store = useContext(ExampleContext);
   const [eventKey, setEventKey] = useState([]);
-  if (!store) return;
+  const [loadKey, setLoadKey] = useState([]);
   return jsx("div", {
     className: 'frame-left',
     children: jsx(Tree, {
       isload: true,
       treeData: data,
       height: height,
+      loadedKeys: loadKey,
       expandedKeys: eventKey,
       icon: (v, className) => {
         if (v.icon == false) return jsx(Fragment, {});
@@ -5831,17 +5867,16 @@ const ExplorerMenu = props => {
       onChange: onChange,
       onSelect: v => {
         store.setPathDisplay(v?.pathDisplay);
-        if (Array.isArray(v?.children)) {
-          store.setCurInfo(v);
-          store.setCurList(v?.children || []);
-        } else {
-          loadData(v.key);
-        }
+        loadData(v.key);
       },
       filterData: v => {
         if (v.type == 'file') return false;
         return true;
       },
+      onLoad: key => {
+        setLoadKey(key);
+      },
+      setLoadKey: setLoadKey,
       onExpand: v => {
         setEventKey(v);
       }
@@ -6069,6 +6104,9 @@ function Tile(props) {
   });
 }
 
+var css_248z$2 = ".explorer-drop-tip {\n  position: absolute;\n  display: inline-block;\n  padding: 3px 5px;\n  background: #00000044;\n  color: #fff;\n  border-radius: 3px;\n  white-space: nowrap;\n}\n.explorer-drop-tip.select {\n  background: #1677ff;\n}\n.explorer-drop-tip .drop-tip-content {\n  font-size: 14px;\n  margin-right: 5px;\n}\n.explorer-drop-tip .drop-tip-content .content-icon {\n  display: inline-block;\n  height: 20px;\n  width: 20px;\n  border-radius: 50%;\n  background: #52c41a;\n  color: #fff;\n  text-align: center;\n  line-height: 20px;\n  margin-right: 5px;\n}\n.explorer-drop-tip .drop-tip-title {\n  font-size: 14px;\n  display: inline-block;\n  padding: 2px;\n  background: rgba(0, 0, 0, 0.2);\n  font-weight: 500;\n  padding: 3px 5px;\n  line-height: 1;\n  border-right: 4px;\n}\n.file-select-box {\n  width: 100%;\n  border: 2px solid transparent;\n}\n";
+styleInject(css_248z$2);
+
 var time = null;
 const SelectBox = props => {
   let {
@@ -6077,12 +6115,14 @@ const SelectBox = props => {
     dataClass,
     selectClass = '',
     regionClass,
+    getContainer = '',
     isDrag = true,
     isSelectBoxes = true,
     checkType = '',
     checkMode,
     action = 'stack',
-    onChange
+    onChange,
+    onUpload
   } = props;
   const selectionRef = useRef(null);
   const clickRef = useRef(true);
@@ -6096,8 +6136,12 @@ const SelectBox = props => {
   const box = useRef(null);
   //当前
   const cur = useRef([]);
+  //文案
+  const text = useRef(null);
   //判断单机还双击
   const isDclick = useRef(null);
+  const store = useContext(ExampleContext);
+  const [isDragfile, setIsDragFile] = useState(false);
   const [selects, setSelect] = useState([]);
   const [stageClickInfo, setStageClickInfo] = useState({
     show: false
@@ -6105,6 +6149,29 @@ const SelectBox = props => {
   useEffect(() => {
     setSelect(checks);
   }, [checks]);
+  useEffect(() => {
+    if (isDragfile) {
+      createText();
+    } else {
+      box.current?.remove();
+      text.current = null;
+      box.current = null;
+    }
+  }, [isDragfile]);
+  useEffect(() => {
+    // 在这里执行需要操作 DOM 的代码
+    document.querySelector(getContainer)?.addEventListener('dragenter', bodyDragEnter);
+    document.addEventListener('dragover', handleDragOver, false);
+    document.addEventListener('dragleave', handleDragLeave, false);
+    document?.addEventListener('dragenter', handleDragEnter);
+    document?.addEventListener('drop', handleDrop);
+    return () => {
+      document.removeEventListener('dragenter', bodyDragEnter);
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document?.addEventListener('drop', handleDrop);
+    };
+  }, []);
   useEffect(() => {
     document.addEventListener('mousemove', handleBodyMousemove);
     document.addEventListener('mouseup', handleBodyMouseup);
@@ -6114,22 +6181,32 @@ const SelectBox = props => {
     };
   }, [stageClickInfo, checkMode]);
   //判断鼠标点击位置 是否为目标区域
-  function isSelectTarget(e) {
+  function isSelectTarget(e, checkType, status) {
     let idx = [];
     Array.from(document.querySelectorAll(selectClass)).filter(v => {
       if (v.contains(e.target)) {
         let dataDom = v;
         if (dataClass) {
           dataDom = v.querySelector(dataClass);
-          let id = dataDom.getAttribute('data-id');
+          let id = dataDom?.getAttribute('data-id');
           if (checkType) {
-            let type = dataDom.getAttribute('data-type');
+            let type = dataDom?.getAttribute('data-type');
             if (type !== checkType) return;
+            if (status == 'select') {
+              v.classList.add('hover');
+            }
           }
           if (id) {
             idx.push(id);
           }
         }
+      } else {
+        if (status == 'select') {
+          v.classList.remove('hover');
+        }
+      }
+      if (status == 'remove') {
+        v.classList.remove('hover');
       }
     });
     if (idx.length) {
@@ -6195,6 +6272,111 @@ const SelectBox = props => {
       }, 300);
     }
   }
+  //拖动时
+  const handleDragOver = e => {
+    e.preventDefault();
+    const {
+      clientX: x,
+      clientY: y
+    } = e;
+    if (text.current) {
+      const data = isSelectTarget(e, 'folder', 'select');
+      let param = {};
+      let is = false;
+      if (ref.current.contains(e.target)) {
+        param = store.curInfo;
+        is = true;
+      }
+      if (typeof data?.[0] == 'string' && store?.dataMap?.[data?.[0]]) {
+        param = store?.dataMap?.[data?.[0]];
+        is = false;
+      }
+      if (is) {
+        ref.current.style.cssText = `
+        border:2px solid #1677ff;
+      `;
+      } else {
+        ref.current.style.cssText = `
+        border:2px solid transparent;
+      `;
+      }
+      let element = renderDragtext({
+        x: x + 20,
+        y: y + 20,
+        ...param
+      });
+      text.current.render(element);
+    }
+  };
+  const handleDrop = e => {
+    setIsDragFile(false);
+    e.preventDefault();
+    e.stopPropagation();
+    const files = [...e.dataTransfer.files];
+    let data = isSelectTarget(e, 'folder', 'remove');
+    let key = null;
+    if (ref.current.contains(e.target)) {
+      key = store.curInfo;
+      ref.current.style.cssText = `
+      border:2px solid transparent;
+    `;
+    }
+    if (typeof data?.[0] == 'string' && store?.dataMap?.[data?.[0]]) {
+      key = store?.dataMap?.[data?.[0]];
+    }
+    if (!key) return;
+    typeof onUpload === 'function' && onUpload(files, key);
+  };
+  function handleDragEnter(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  //退出当前区域
+  function handleDragLeave(e) {
+    let cont = document.querySelector(getContainer);
+    e.preventDefault();
+    e.stopPropagation();
+    if (!cont?.contains(e.target) || e.clientX <= 0 || e.clientY <= 0) {
+      setIsDragFile(false);
+    }
+  }
+  //拖入div
+  function bodyDragEnter(e) {
+    e?.preventDefault();
+    e?.stopPropagation();
+    if (e?.dataTransfer?.types && !e?.dataTransfer?.types.includes('Files')) {
+      return;
+    }
+    setIsDragFile(true);
+  }
+  //创建文案
+  function createText() {
+    let _box = null;
+    let body = null;
+    let _text = null;
+    _text = document.createElement('div');
+    text.current = createRoot(_text);
+    if (box.current) {
+      box.current?.appendChild(text);
+    } else {
+      body = document.querySelector('body');
+      _box = document.createElement('div');
+      _box.className = `_selectbox ${className}`;
+      _box.style.cssText = `
+      position: absolute; 
+      top:1px; 
+      left: 1px;
+      width: 0px;
+      height: 0px;
+      pointer-events: none;
+      overflow: visible !important;
+      z-index: 999;
+      `;
+      box.current = _box;
+      _box?.appendChild(_text);
+      body?.appendChild(_box);
+    }
+  }
   //创建选框
   function createBox(e) {
     if (stageClickInfo.show) {
@@ -6390,17 +6572,51 @@ const SelectBox = props => {
     box.current = null;
     clickRef.current = false;
   }
+  function renderDragtext({
+    x,
+    y,
+    ...props
+  }) {
+    return jsx("div", {
+      className: cx$1('explorer-drop-tip', {
+        select: props?.title
+      }),
+      style: {
+        top: y,
+        left: x
+      },
+      children: props?.title ? jsxs(Fragment, {
+        children: [jsxs("span", {
+          className: 'drop-tip-content',
+          children: [jsx("span", {
+            className: 'content-icon',
+            children: jsx(UploadSvg, {})
+          }), jsx(Fragment, {
+            children: " \u4E0A\u4F20\u81F3:"
+          })]
+        }), jsx("span", {
+          className: 'drop-tip-title',
+          children: props?.title
+        })]
+      }) : jsx(Fragment, {
+        children: "\u62D6\u5230\u6587\u4EF6\u5939\u4E0A\u4F20"
+      })
+    });
+  }
   return jsxs("div", {
     ref: ref,
-    className: cx$1(`${className}`),
-    onClick: e => {},
+    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);
+        let type = isSelectTarget(e, checkType);
         //选中
         //在区域未选中
         isDclick.current = setTimeout(() => {
@@ -6450,8 +6666,8 @@ const SelectBox = props => {
   });
 };
 
-var css_248z$2 = ".explorer-columns {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n}\n.explorer-columns .layer {\n  position: relative;\n  flex: 1 0 0;\n  border-right: 1px solid #f5f5f5;\n}\n.explorer-columns .layer.select_col {\n  box-shadow: 0 0 20px #e9f5ff inset;\n}\n.explorer-columns .layer.select_col::after {\n  content: '';\n  position: absolute;\n  height: 4px;\n  bottom: 0px;\n  background: #50afff;\n  left: 0;\n  right: 0;\n}\n.explorer-columns .layer.list {\n  min-width: 200px;\n}\n.explorer-columns .layer.list::before {\n  position: absolute;\n  content: '';\n  top: 50%;\n  right: 1px;\n  width: 1px;\n  height: 18px;\n  margin-left: -1px;\n  margin-top: -9px;\n  border: 1px solid #ddd;\n  border-top: none;\n  border-bottom: none;\n  backdrop-filter: none;\n  border-radius: 0;\n  background: transparent;\n  box-sizing: content-box;\n  -webkit-backdrop-filter: blur(10px);\n}\n.explorer-columns .layer.list .list-main {\n  width: 100%;\n  height: 100%;\n  transition: 0.3s;\n  padding-top: 5px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar-thumb {\n  background-color: transparent;\n  border-radius: 6px;\n  transition: 0.3s;\n}\n.explorer-columns .layer.list .list-main:hover .list-scroll::-webkit-scrollbar-thumb {\n  background-color: #00000030;\n}\n.explorer-columns .layer.list .drag {\n  position: absolute;\n  width: 8px;\n  border-right: 1px solid #f5f5f5;\n  right: -3px;\n  top: 0;\n  bottom: 0;\n  cursor: col-resize;\n  z-index: 10;\n}\n.explorer-columns .layer.list .drag:hover {\n  background: #40a9ff4d;\n}\n.explorer-columns .layer.empty {\n  display: flex;\n  justify-content: center;\n  padding-top: 100px;\n}\n.explorer-columns .layer.empty .empty-is-null {\n  width: 200px;\n}\n.explorer-columns .layer.empty .empty-icon {\n  height: 140px;\n}\n.explorer-columns .layer.empty .empty-desc {\n  display: flex;\n  justify-content: center;\n}\n.explorer-columns .layer.empty .empty-desc > span {\n  display: inline-block;\n  padding: 3px 10px;\n  border-radius: 10px;\n  line-height: 1;\n  background: #a0a0a01a;\n  color: #bbb;\n  font-size: 0.9em;\n}\n.explorer-columns-list {\n  padding-left: 10px;\n  display: flex;\n  height: 30px;\n  margin-bottom: 2px;\n  margin: 0 5px 3px 5px;\n  align-items: center;\n  border: 1px solid transparent;\n  user-select: none;\n}\n.explorer-columns-list .columns-list-icon {\n  display: flex;\n  width: 18px;\n  height: 18px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.explorer-columns-list .columns-list-title {\n  flex: 1;\n  display: flex;\n}\n.explorer-columns-list .columns-list-title .title {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.explorer-columns-list .columns-list-title .edit {\n  display: inline-block;\n  width: 20px;\n  line-height: 20px;\n  font-size: 10px;\n  text-align: center;\n  border-radius: 3px;\n  margin-left: 5px;\n  color: #666;\n  opacity: 0;\n  transition: 0.3s;\n}\n.explorer-columns-list .columns-list-title .edit:hover {\n  color: #50afff;\n  background: #ffffff8a;\n  cursor: pointer;\n}\n.explorer-columns-list .columns-list-tool {\n  min-width: 30px;\n}\n.explorer-columns-list .columns-list-input {\n  flex: 1;\n  height: 100%;\n  outline: 0;\n  border: 0;\n  margin-right: 10px;\n  background: #fff;\n}\n.explorer-columns-list.acitve {\n  background: #e3f0ff;\n}\n.explorer-columns-list.last {\n  margin-bottom: 100px;\n}\n.explorer-columns-list.checks {\n  background: #cce8ff;\n  border-color: #a8d8ff !important;\n}\n.explorer-columns-list:hover {\n  background: #e3f0ff;\n  border-color: #c9e2ff;\n}\n.explorer-columns-list:hover .edit {\n  opacity: 1;\n}\n.explorer-columns-loading {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.explorer-columns-loading .loading-content {\n  width: 100px;\n  height: 106px;\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.7);\n  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.07);\n  color: #888;\n}\n.explorer-columns-loading .loading-content-icon {\n  display: flex;\n  justify-content: center;\n  margin: 25px auto 6px auto;\n  font-size: 30px;\n}\n.explorer-columns-loading .loading-content-icon > i {\n  animation: rotate 1.5s linear infinite;\n}\n.explorer-columns-loading .loading-content-title {\n  padding-top: 15px;\n  text-align: center;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
-styleInject(css_248z$2);
+var css_248z$1 = ".explorer-columns {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  position: relative;\n}\n.explorer-columns .layer {\n  position: relative;\n  flex: 1 0 0;\n  border-right: 1px solid #f5f5f5;\n}\n.explorer-columns .layer.select_col {\n  box-shadow: 0 0 20px #e9f5ff inset;\n}\n.explorer-columns .layer.select_col::after {\n  content: '';\n  position: absolute;\n  height: 4px;\n  bottom: 0px;\n  background: #50afff;\n  left: 0;\n  right: 0;\n}\n.explorer-columns .layer.list {\n  min-width: 200px;\n}\n.explorer-columns .layer.list::before {\n  position: absolute;\n  content: '';\n  top: 50%;\n  right: 1px;\n  width: 1px;\n  height: 18px;\n  margin-left: -1px;\n  margin-top: -9px;\n  border: 1px solid #ddd;\n  border-top: none;\n  border-bottom: none;\n  backdrop-filter: none;\n  border-radius: 0;\n  background: transparent;\n  box-sizing: content-box;\n  -webkit-backdrop-filter: blur(10px);\n}\n.explorer-columns .layer.list .list-main {\n  width: 100%;\n  height: 100%;\n  transition: 0.3s;\n  padding-top: 5px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n.explorer-columns .layer.list .list-main .list-scroll::-webkit-scrollbar-thumb {\n  background-color: transparent;\n  border-radius: 6px;\n  transition: 0.3s;\n}\n.explorer-columns .layer.list .list-main:hover .list-scroll::-webkit-scrollbar-thumb {\n  background-color: #00000030;\n}\n.explorer-columns .layer.list .drag {\n  position: absolute;\n  width: 8px;\n  border-right: 1px solid #f5f5f5;\n  right: -3px;\n  top: 0;\n  bottom: 0;\n  cursor: col-resize;\n  z-index: 10;\n}\n.explorer-columns .layer.list .drag:hover {\n  background: #40a9ff4d;\n}\n.explorer-columns .layer.empty {\n  display: flex;\n  justify-content: center;\n  padding-top: 100px;\n}\n.explorer-columns .layer.empty .empty-is-null {\n  width: 200px;\n}\n.explorer-columns .layer.empty .empty-icon {\n  height: 140px;\n}\n.explorer-columns .layer.empty .empty-desc {\n  display: flex;\n  justify-content: center;\n}\n.explorer-columns .layer.empty .empty-desc > span {\n  display: inline-block;\n  padding: 3px 10px;\n  border-radius: 10px;\n  line-height: 1;\n  background: #a0a0a01a;\n  color: #bbb;\n  font-size: 0.9em;\n}\n.explorer-columns-list {\n  padding-left: 10px;\n  display: flex;\n  height: 30px;\n  margin-bottom: 2px;\n  margin: 0 5px 3px 5px;\n  align-items: center;\n  border: 1px solid transparent;\n  user-select: none;\n}\n.explorer-columns-list .columns-list-icon {\n  display: flex;\n  width: 18px;\n  height: 18px;\n  margin-right: 10px;\n  flex-shrink: 0;\n}\n.explorer-columns-list .columns-list-title {\n  flex: 1;\n  display: flex;\n}\n.explorer-columns-list .columns-list-title .title {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.explorer-columns-list .columns-list-title .edit {\n  display: inline-block;\n  width: 20px;\n  line-height: 20px;\n  font-size: 10px;\n  text-align: center;\n  border-radius: 3px;\n  margin-left: 5px;\n  color: #666;\n  opacity: 0;\n  transition: 0.3s;\n}\n.explorer-columns-list .columns-list-title .edit:hover {\n  color: #50afff;\n  background: #ffffff8a;\n  cursor: pointer;\n}\n.explorer-columns-list .columns-list-tool {\n  min-width: 30px;\n}\n.explorer-columns-list .columns-list-input {\n  flex: 1;\n  height: 100%;\n  outline: 0;\n  border: 0;\n  margin-right: 10px;\n  background: #fff;\n}\n.explorer-columns-list.acitve {\n  background: #e3f0ff;\n}\n.explorer-columns-list.last {\n  margin-bottom: 100px;\n}\n.explorer-columns-list.checks {\n  background: #cce8ff;\n  border-color: #a8d8ff !important;\n}\n.explorer-columns-list:hover {\n  background: #e3f0ff;\n  border-color: #c9e2ff;\n}\n.explorer-columns-list:hover .edit {\n  opacity: 1;\n}\n.explorer-columns-loading {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n.explorer-columns-loading .loading-content {\n  width: 100px;\n  height: 106px;\n  border-radius: 6px;\n  background: rgba(255, 255, 255, 0.7);\n  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.07);\n  color: #888;\n}\n.explorer-columns-loading .loading-content-icon {\n  display: flex;\n  justify-content: center;\n  margin: 25px auto 6px auto;\n  font-size: 30px;\n}\n.explorer-columns-loading .loading-content-icon > i {\n  animation: rotate 1.5s linear infinite;\n}\n.explorer-columns-loading .loading-content-title {\n  padding-top: 15px;\n  text-align: center;\n}\n@keyframes rotate {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n";
+styleInject(css_248z$1);
 
 function Item(props) {
   const {
@@ -6689,286 +6905,6 @@ function Columns(props) {
   });
 }
 
-var css_248z$1 = "._modal {\n  position: absolute;\n  justify-content: center;\n  display: flex;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 100;\n}\n._modal-content {\n  position: absolute;\n  width: 800px;\n  height: 400px;\n  top: 100px;\n  background-color: #fff;\n  background-clip: padding-box;\n  border: 0;\n  border-radius: 8px;\n  border: 1px solid #eee;\n  transition: box-shadow 0.2s;\n  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04), 0 3px 6px -4px rgba(0, 0, 0, 0.08), 0 0 8px 8px rgba(0, 0, 0, 0.03);\n  pointer-events: auto;\n}\n._modal-content.focus {\n  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -4px rgba(0, 0, 0, 0.16), 0 9px 28px 8px rgba(0, 0, 0, 0.03);\n}\n._modal-content.maximize {\n  width: 100% !important;\n  height: 100% !important;\n  top: 0 !important;\n  left: 0 !important;\n  bottom: 0 !important;\n  right: 0 !important;\n}\n._modal-content.maximize .header-title {\n  cursor: default;\n}\n._modal-content.minimize {\n  animation: _modal_minimize 0.3s forwards;\n}\n._modal-content.minimize-out {\n  transition: 0.3s;\n}\n._modal-content.animation {\n  transition: 0.3s;\n}\n._modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: 30px;\n  padding: 0 10px;\n  border-bottom: 1px solid #f1f1f1;\n}\n._modal-header .header-title {\n  flex: 1;\n  cursor: move;\n}\n._modal-header .header-toolbar {\n  display: flex;\n}\n._modal-header .header-toolbar .tool {\n  width: 30px;\n  height: 30px;\n  vertical-align: top;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  cursor: pointer;\n}\n._modal-header .header-toolbar .tool > svg {\n  top: 0;\n}\n._modal-header .header-toolbar .tool.close {\n  font-size: 12px;\n}\n._modal-header .header-toolbar .tool.close:hover {\n  background: #ff0000d0;\n  color: #fff;\n}\n._modal-header .header-toolbar .tool:hover {\n  background: #e5e5e5;\n}\n._modal-navbar {\n  height: 30px;\n  width: 100%;\n  padding: 0px 10px;\n}\n._modal-navbar ._modal-navbar-item {\n  position: relative;\n  display: inline-block;\n  z-index: 100;\n  height: 30px;\n  line-height: 30px;\n  padding: 0 10px;\n  background-color: #fff3;\n  border: 1px solid #f1f1f1;\n  border-radius: 4px 4px 0 0;\n  transition: 0.3s;\n  margin-right: 2px;\n  cursor: pointer;\n}\n._modal-navbar ._modal-navbar-item.acitve {\n  z-index: 10;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);\n}\n._modal-navbar ._modal-navbar-item:hover {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n@keyframes _modal_minimize {\n  0% {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n  90% {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  100% {\n    opacity: 0;\n    display: none;\n  }\n}\n";
-styleInject(css_248z$1);
-
-function Modal(props) {
-  const {
-    id,
-    show,
-    title,
-    onBlur,
-    onFocus,
-    isfocus,
-    onMinimize: onMin,
-    onMaximize: onMax,
-    minimize
-  } = props;
-  const content = useRef(null);
-  const mask = useRef(null);
-  const root = useRef(null);
-  const [drag, setDrag] = useState(false);
-  const [d_value, D_value] = useState([0, 0]); //点击时的差值
-  const [win_size, setWinsize] = useState(getSize);
-  const [focus, setFocus] = useState(false);
-  const [ismax, setMax] = useState(false);
-  useLayoutEffect(() => {
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  //拖动监听
-  useLayoutEffect(() => {
-    document.addEventListener('mousemove', lie);
-    return () => {
-      document.removeEventListener('mousemove', lie);
-    };
-  }, [drag]);
-  //创建
-  useEffect(() => {
-    if (show) {
-      let box = null;
-      let body = document.querySelector('body');
-      box = document.createElement('div');
-      box.className = '_modal';
-      mask.current = box;
-      body?.appendChild(box);
-      let roots = createRoot(box);
-      roots.render( /*#__PURE__*/React__default.cloneElement(render()));
-      root.current = roots;
-    } else {
-      onClose();
-    }
-  }, [show]);
-  //重新渲染
-  useEffect(() => {
-    if (root.current) {
-      root.current.render( /*#__PURE__*/React__default.cloneElement(render()));
-    }
-  }, [root.current, ismax, minimize]);
-  useEffect(() => {
-    if (typeof minimize !== 'boolean') return;
-    onMinimize();
-  }, [minimize]);
-  //切换
-  useEffect(() => {
-    if (!mask?.current) return;
-    if (focus) {
-      mask.current.style.zIndex = 200;
-      content.current?.classList.add('focus');
-    } else {
-      mask.current.style.zIndex = '';
-      content.current?.classList.remove('focus');
-    }
-  }, [mask.current, focus]);
-  //焦点控制
-  useEffect(() => {
-    if (typeof isfocus == 'boolean') {
-      setFocus(isfocus);
-    }
-  }, [isfocus]);
-  //头
-  const header = useMemo(() => {
-    if (title === false) {
-      return jsx(Fragment, {});
-    }
-    if ( /*#__PURE__*/React__default.isValidElement(title)) {
-      return title;
-    }
-    return jsxs("div", {
-      className: '_modal-header',
-      onMouseDown: e => {
-        D_value([e.nativeEvent?.layerX || 0, e.nativeEvent?.layerY || 0]);
-        setDrag(true);
-      },
-      onMouseUp: () => {
-        setDrag(false);
-      },
-      children: [jsx("div", {
-        className: 'header-title',
-        children: title
-      }), jsxs("div", {
-        className: 'header-toolbar',
-        children: [jsx("span", {
-          className: 'tool',
-          onClick: () => {
-            onMin && onMin();
-          }
-        }), jsx("span", {
-          className: 'tool',
-          onClick: () => {
-            setMax(!ismax);
-            onMaximize();
-          }
-        }), jsx("span", {
-          className: 'tool close',
-          onClick: () => {
-            props.onClose && props.onClose();
-          }
-        })]
-      })]
-    });
-  }, [drag, title, ismax]);
-  function handleResize() {
-    setWinsize(getSize());
-  }
-  //最小化
-  function onMinimize() {
-    if (!minimize) {
-      content.current?.classList.add('animation');
-      content.current?.classList.add('minimize');
-    } else {
-      content.current?.classList.remove('minimize');
-      content.current?.classList.remove('animation');
-    }
-  }
-  //最大化
-  function onMaximize() {
-    if (!ismax) {
-      if (mask?.current) {
-        mask.current.style.bottom = '0px';
-        mask.current.style.zIndex = 300;
-      }
-      content.current?.classList.add('animation');
-      content.current?.classList.add('maximize');
-    } else {
-      content.current?.classList.remove('animation');
-      content.current?.classList.remove('maximize');
-      mask.current.style.bottom = '';
-      mask.current.style.zIndex = '';
-    }
-  }
-  function onClose() {
-    mask?.current?.remove();
-    mask.current == null;
-    content?.current?.remove();
-    content.current == null;
-  }
-  function getSize() {
-    return {
-      width: window?.innerWidth || 0,
-      height: window?.innerHeight || 0
-    };
-  }
-  const lie = e => {
-    if (ismax) return;
-    if (!drag) return;
-    let x = (e.x || 0) - d_value[0];
-    let y = (e.y || 0) - d_value[1];
-    if (!content?.current) return;
-    let c_lie = content.current.getBoundingClientRect();
-    if (x < 0) x = 0;
-    if (y < 0) y = 0;
-    if (y + c_lie.height > win_size.height) {
-      y = win_size.height - c_lie.height;
-    }
-    if (x + c_lie.width > win_size.width) {
-      x = win_size.width - c_lie.width;
-    }
-    content.current.style.top = y + 'px';
-    content.current.style.left = x + 'px';
-    return {
-      x,
-      y
-    };
-  };
-  function render() {
-    return jsxs("div", {
-      ref: content,
-      className: cx$1('_modal-content', {
-        minimize: minimize,
-        animation: minimize
-      }),
-      tabIndex: 0,
-      onFocus: () => {
-        onFocus && onFocus();
-        typeof isfocus == 'boolean' ? null : setFocus(true);
-      },
-      onBlur: () => {
-        typeof isfocus == 'boolean' ? null : setFocus(false);
-        onBlur && onBlur();
-      },
-      children: [props?.title && header, props.children]
-    });
-  }
-  return jsx(Fragment, {});
-}
-
-function ModalTab(props) {
-  const {
-    items,
-    onClone,
-    showKey,
-    className
-  } = props;
-  const shrink = useRef(null);
-  const [show, setShow] = useState([]);
-  const [select, setSelect] = useState('');
-  const [_shrink, setShink] = useState([]);
-  useEffect(() => {
-    if (typeof showKey[0] == 'string') {
-      setSelect(showKey[0]);
-    }
-  }, []);
-  useEffect(() => {
-    setShow(showKey);
-  }, [showKey]);
-  return jsxs("div", {
-    className: cx$1('_modal-navbar', {
-      [className || '']: className
-    }),
-    children: [items.map((v, index) => {
-      return jsx(React__default.Fragment, {
-        children: jsx(Modal, {
-          tabIndex: index,
-          show: show.includes(v.key),
-          title: v.title,
-          onClose: () => {
-            onClone && onClone?.(v.key, v);
-          },
-          minimize: shrink.current?.includes(v.key),
-          onMinimize: () => {
-            let arr = [...(shrink.current || []), v.key];
-            shrink.current = arr;
-            setShink(arr);
-          },
-          isfocus: v.key == select,
-          onFocus: () => {
-            setSelect(v.key);
-          },
-          children: v.content
-        }, index)
-      }, index);
-    }), items.map((v, index) => {
-      return jsx("div", {
-        className: cx$1('_modal-navbar-item', {
-          acitve: select == v.key
-        }),
-        onClick: () => {
-          if (shrink.current?.includes(v.key)) {
-            let arr = shrink.current.filter(item => item !== v.key);
-            shrink.current = arr;
-            setShink(arr);
-            setSelect(v.key);
-            return;
-          }
-          if (select == v.key) {
-            let arr = [...(shrink.current || []), v.key];
-            shrink.current = arr;
-            setShink(arr);
-            setSelect('');
-            return;
-          }
-          if (!show.includes(v.key)) {
-            setShow([...show, v.key]);
-          }
-          setSelect(v.key);
-        },
-        children: v.title
-      }, index);
-    })]
-  });
-}
-
 const template = {
   tile: {
     action: 'rotate',
@@ -7001,7 +6937,8 @@ const Layout$1 = props => {
     onCheck,
     onDblclick,
     onRename,
-    onMenuClick
+    onMenuClick,
+    onUpload
   } = props;
   const store = useContext(ExampleContext);
   const [expandkey, setExpandkey] = useState([]);
@@ -7038,6 +6975,7 @@ const Layout$1 = props => {
   return jsxs("div", {
     className: 'file-continer-main',
     children: [store?.loading == ApiStatusEnum.LOADING && jsx(Loading, {}), jsxs(SelectBox, {
+      getContainer: '.explorer-container',
       checks: checks,
       checkType: store.checkType,
       checkMode: store.checkMode,
@@ -7046,6 +6984,10 @@ const Layout$1 = props => {
       }),
       isDrag: isDrag,
       isSelectBoxes: isSelectBoxes,
+      dataClass: template?.[store.menutype]?.dataClass,
+      selectClass: template?.[store.menutype]?.selectClass,
+      action: template?.[store.menutype]?.action,
+      regionClass: template?.[store.menutype]?.regionClass,
       onChange: v => {
         let map = store.dataMap || {};
         let param = [];
@@ -7056,13 +6998,10 @@ const Layout$1 = props => {
         });
         onCheck?.(v, param);
       },
+      onUpload: onUpload,
       onDrag: () => {},
       onEndDrag: () => {},
       onStartDrag: () => {},
-      dataClass: template?.[store.menutype]?.dataClass,
-      selectClass: template?.[store.menutype]?.selectClass,
-      action: template?.[store.menutype]?.action,
-      regionClass: template?.[store.menutype]?.regionClass,
       children: [store?.menutype == 'column' && jsx(Columns, {
         icons: store.getIcons,
         data: store.curlist,
@@ -7131,9 +7070,6 @@ const Layout$1 = props => {
         onMenuClick: onMenuClick,
         loadData: loadData
       })]
-    }), jsx(ModalTab, {
-      items: [],
-      showKey: []
     })]
   });
 };
@@ -7511,14 +7447,14 @@ const Explorer = props => {
       setCurSelect,
       setLoadKey
     },
-    children: jsxs("div", {
+    children: jsx("div", {
       className: 'explorer-container',
-      children: [jsx(Layout, {
+      children: jsx(Layout, {
         ...props,
         loadData: loadData,
         loadNode: loadNode,
         onRename: onRename
-      }), ";"]
+      })
     })
   });
 };