@gingkoo/pandora-explorer 0.0.1-alpha.34 → 0.0.1-alpha.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/es/components/Dropdown/index.d.ts +1 -0
  2. package/lib/es/index.js +33 -5
  3. package/lib/es/index.js.map +1 -1
  4. package/package.json +1 -1
package/lib/es/components/Dropdown/index.d.ts CHANGED
@@ -15,6 +15,7 @@ interface DropdownProps {
15
15
  y?: number;
16
16
  };
17
17
  style?: any;
18
+ onContextMenu?: any;
18
19
  }
19
20
  export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;
20
21
  export {};
package/lib/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @gingkoo/pandora-explorer v0.0.1-alpha.34
2
+ * @gingkoo/pandora-explorer v0.0.1-alpha.35
3
3
  */
4
4
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
5
5
  import cx$1 from 'classnames';
@@ -1262,7 +1262,8 @@ function Dropdown(props) {
1262
1262
  destroyPopupOnHide = false,
1263
1263
  capture,
1264
1264
  position,
1265
- style
1265
+ style,
1266
+ onContextMenu
1266
1267
  } = props;
1267
1268
  const [expand, setExpand] = useState(false);
1268
1269
  const [newDiv, setNewDiv] = useState(null);
@@ -1520,7 +1521,7 @@ function Dropdown(props) {
1520
1521
  },
1521
1522
  onContextMenu: e => {
1522
1523
  e.preventDefault();
1523
- e.stopPropagation();
1524
+ onContextMenu?.(e);
1524
1525
  if (trigger == 'contextMenu') {
1525
1526
  let x = 0;
1526
1527
  let y = 0;
@@ -1898,7 +1899,7 @@ function Slider(props) {
1898
1899
  var css_248z$7 = ".explorer-menu {\n height: 100%;\n}\n";
1899
1900
  styleInject(css_248z$7);
1900
1901
 
1901
- 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";
1902
+ 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.rc-tree-treenode-selected {\n background: #4581a60d !important;\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 user-select: none;\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";
1902
1903
  styleInject(css_248z$6);
1903
1904
 
1904
1905
  /**
@@ -5191,6 +5192,9 @@ function TableItem(props) {
5191
5192
  style: {
5192
5193
  height: '100%'
5193
5194
  },
5195
+ onContextMenu: e => {
5196
+ e.stopPropagation();
5197
+ },
5194
5198
  dropdownRender: ({
5195
5199
  onClone
5196
5200
  }) => {
@@ -5900,6 +5904,9 @@ const ExplorerMenu = props => {
5900
5904
  const [loadKey, setLoadKey] = useState([]);
5901
5905
  return jsx("div", {
5902
5906
  className: 'frame-left',
5907
+ onContextMenu: e => {
5908
+ e.preventDefault();
5909
+ },
5903
5910
  children: jsx(Tree, {
5904
5911
  isload: true,
5905
5912
  treeData: data,
@@ -7363,7 +7370,7 @@ const Layout = props => {
7363
7370
  children: jsxs(Draggable, {
7364
7371
  placement: 'horizontal',
7365
7372
  poi: isNavtab ? [200] : [0, 'max'],
7366
- fix: [false, true],
7373
+ fix: [true, false],
7367
7374
  rang: [10, 350],
7368
7375
  children: [jsx(ExplorerMenu, {
7369
7376
  ...props
@@ -7495,12 +7502,33 @@ const Explorer = /*#__PURE__*/forwardRef((props, ref) => {
7495
7502
  });
7496
7503
  }
7497
7504
  let _file = ['folder', 'xls', 'xlsx', 'doc', 'docx', 'pptx', 'md', 'txt', 'js', 'css', 'pdf', 'html', 'json'];
7505
+ let css = ['css', 'less'];
7506
+ let js = ['js', 'jsx'];
7507
+ let ts = ['ts', 'tsx'];
7498
7508
  if (v?.pic && typeof v?.pic == 'string') {
7499
7509
  return jsx("img", {
7500
7510
  className: cx$1(`${className || ''}`),
7501
7511
  src: v.pic
7502
7512
  });
7503
7513
  }
7514
+ if (css.includes(v?.suffix)) {
7515
+ return jsx(SuffixIcon, {
7516
+ className: cx$1(`${className || ''}`),
7517
+ suffix: 'css'
7518
+ });
7519
+ }
7520
+ if (js.includes(v.suffix)) {
7521
+ return jsx(SuffixIcon, {
7522
+ className: cx$1(`${className || ''}`),
7523
+ suffix: 'js'
7524
+ });
7525
+ }
7526
+ if (ts.includes(v.suffix)) {
7527
+ return jsx(SuffixIcon, {
7528
+ className: cx$1(`${className || ''}`),
7529
+ suffix: 'txt'
7530
+ });
7531
+ }
7504
7532
  if (_file.includes(v?.suffix)) {
7505
7533
  return jsx(SuffixIcon, {
7506
7534
  className: cx$1(`${className || ''}`),