zs_library 0.1.1 → 0.2.0

package/dist/Desktop/ContextMenu/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const ContextMenu: FC;
+export default ContextMenu;

package/dist/Desktop/ContextMenu/index.js

@@ -0,0 +1,182 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { css, cx } from '@emotion/css';
+import { RiCloseCircleLine, RiInformationLine, RiPencilRuler2Line, RiShareLine } from '@remixicon/react';
+import { AnimatePresence, motion } from 'framer-motion';
+import React from 'react';
+import { configMap } from "../config";
+import { useSortable } from "../hook";
+import SortableUtils from "../utils";
+var itemVariants = {
+  menuShow: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring',
+      stiffness: 300,
+      damping: 24
+    }
+  },
+  menuHide: {
+    opacity: 0,
+    y: 20,
+    transition: {
+      duration: 0.2
+    }
+  }
+};
+var ContextButton = function ContextButton(props) {
+  var icon = props.icon,
+    title = props.title,
+    _onClick = props.onClick;
+  var _useSortable = useSortable(),
+    theme = _useSortable.theme;
+  var _SortableUtils$getThe = SortableUtils.getTheme(theme),
+    light = _SortableUtils$getThe.light,
+    dark = _SortableUtils$getThe.dark;
+  return /*#__PURE__*/React.createElement(motion.div, {
+    className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        &:hover {\n          background-color: ", ";\n          @media (prefers-color-scheme: dark) {\n            background-color: ", ";\n          }\n        }\n        @media (prefers-color-scheme: dark) {\n          color: black;\n        }\n        font-size: 0.75rem;\n        line-height: 1rem;\n        cursor: pointer;\n        transition: all 0.3s;\n        user-select: none;\n        border-radius: 0.5rem;\n      "])), light.contextMenuActiveColor, dark.contextMenuActiveColor),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      _onClick === null || _onClick === void 0 || _onClick();
+    },
+    variants: itemVariants
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    className: cx('py-1.5 px-3 rounded-lg', css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            padding-top: 0.375rem;\n            padding-bottom: 0.375rem;\n            padding-left: 0.75rem;\n            padding-right: 0.75rem;\n            border-radius: 0.5rem;\n          "])))),
+    whileTap: {
+      scale: 0.9
+    }
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    className: cx(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              margin-bottom: 0.375rem;\n              display: flex;\n              justify-content: center;\n            "]))))
+  }, icon), /*#__PURE__*/React.createElement(motion.div, null, title)));
+};
+var ContextMenu = function ContextMenu() {
+  var _useSortable2 = useSortable(),
+    contextMenu = _useSortable2.contextMenu,
+    setContextMenu = _useSortable2.setContextMenu,
+    hideContextMenu = _useSortable2.hideContextMenu,
+    setShowInfoItemData = _useSortable2.setShowInfoItemData,
+    removeItem = _useSortable2.removeItem,
+    updateItemConfig = _useSortable2.updateItemConfig,
+    theme = _useSortable2.theme;
+  var _SortableUtils$getThe2 = SortableUtils.getTheme(theme),
+    light = _SortableUtils$getThe2.light,
+    dark = _SortableUtils$getThe2.dark;
+  var _ref = contextMenu !== null && contextMenu !== void 0 ? contextMenu : {},
+    data = _ref.data;
+  var _ref2 = data !== null && data !== void 0 ? data : {},
+    _ref2$config = _ref2.config,
+    config = _ref2$config === void 0 ? {} : _ref2$config;
+  var getAllSizes = function getAllSizes() {
+    var _contextMenu$data;
+    var config = configMap[contextMenu === null || contextMenu === void 0 || (_contextMenu$data = contextMenu.data) === null || _contextMenu$data === void 0 ? void 0 : _contextMenu$data.type];
+    var dimensions = [];
+    for (var row = 1; row <= ((_config$maxRow = config === null || config === void 0 ? void 0 : config.maxRow) !== null && _config$maxRow !== void 0 ? _config$maxRow : 2); row++) {
+      var _config$maxRow;
+      for (var col = 1; col <= ((_config$maxCol = config === null || config === void 0 ? void 0 : config.maxCol) !== null && _config$maxCol !== void 0 ? _config$maxCol : 2); col++) {
+        var _config$maxCol;
+        dimensions.push("".concat(row, "x").concat(col));
+      }
+    }
+    return dimensions;
+  };
+  return /*#__PURE__*/React.createElement(AnimatePresence, null, contextMenu && /*#__PURE__*/React.createElement(motion.div, {
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    onMouseDown: function onMouseDown(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    className: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                border-radius: 0.5rem;\n                overflow: hidden;\n                background-color: ", ";\n                box-shadow: 0 0 0.5rem ", ";\n                @media (prefers-color-scheme: dark) {\n                  background-color: ", ";\n                  box-shadow: 0 0 0.5rem ", ";\n                }\n              "])), light.contextMenuBackgroundColor, light.contextMenuShadowColor, dark.contextMenuBackgroundColor, dark.contextMenuShadowColor))
+  }, config.allowResize !== false && /*#__PURE__*/React.createElement(motion.ul, {
+    className: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                  background-color: white;\n                  padding: 0.25rem;\n                  margin: 0;\n                "])))
+  }, [{
+    label: '修改大小',
+    key: 'size',
+    icon: /*#__PURE__*/React.createElement(RiPencilRuler2Line, {
+      size: 14
+    }),
+    items: getAllSizes().map(function (size) {
+      return {
+        label: size,
+        key: size,
+        onClick: function onClick() {
+          var _size$split$map = size.split('x').map(Number),
+            _size$split$map2 = _slicedToArray(_size$split$map, 2),
+            row = _size$split$map2[0],
+            col = _size$split$map2[1];
+          updateItemConfig(contextMenu.data.id, {
+            row: row,
+            col: col
+          });
+        }
+      };
+    })
+  }].map(function (i) {
+    return /*#__PURE__*/React.createElement(motion.li, {
+      className: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                      padding-top: 0.5rem;\n                      padding-bottom: 0.5rem;\n                      padding-left: 0.75rem;\n                      padding-right: 0.75rem;\n                    "]))),
+      key: i.key
+    }, /*#__PURE__*/React.createElement(motion.p, {
+      className: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                        display: flex;\n                        align-items: center;\n                        font-size: 0.875rem;\n                        line-height: 1.25rem;\n                        gap: 0.5rem;\n                        padding-bottom: 0.5rem;\n                        margin: 0;\n                      "])))
+    }, i.icon, " ", i.label), /*#__PURE__*/React.createElement(motion.div, {
+      className: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n                        display: grid;\n                        grid-template-columns: repeat(2, minmax(0, 1fr));\n                        gap: 0.25rem;\n                      "])))
+    }, i.items.map(function (it) {
+      return /*#__PURE__*/React.createElement(motion.div, {
+        className: cx('py-1 px-2 hover:bg-gray-100 rounded transition-all cursor-pointer text-center text-sm', css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                              padding-top: 0.25rem;\n                              padding-bottom: 0.25rem;\n                              padding-left: 0.5rem;\n                              padding-right: 0.5rem;\n                              border-radius: 0.25rem;\n                              transition: all 0.3s;\n                              font-size: 0.875rem;\n                              line-height: 1.25rem;\n                              cursor: pointer;\n                              text-align: center;\n                              color: ", ";\n                              @media (prefers-color-scheme: dark) {\n                                color: ", ";\n                              }\n                              &:hover {\n                                background-color: ", ";\n                                @media (prefers-color-scheme: dark) {\n                                  background-color: ", ";\n                                }\n                              }\n                            "])), light.contextMenuTextColor, dark.contextMenuTextColor, light.contextMenuActiveColor, dark.contextMenuActiveColor), "".concat(config.row, "x").concat(config.col) === it.key && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n                                background-color: ", ";\n                                @media (prefers-color-scheme: dark) {\n                                  background-color: ", ";\n                                }\n                              "])), light.contextMenuActiveColor, dark.contextMenuActiveColor)),
+        key: it.key,
+        onClick: it.onClick
+      }, it.label);
+    })));
+  }))), /*#__PURE__*/React.createElement(motion.div, {
+    className: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n                background-color: ", ";\n                box-shadow: 0 0 0.5rem ", ";\n                @media (prefers-color-scheme: dark) {\n                  background-color: ", ";\n                  box-shadow: 0 0 0.5rem ", ";\n                }\n                display: flex;\n                margin-top: 0.5rem;\n                border-radius: 0.5rem;\n                overflow: hidden;\n                padding: 0.25rem;\n              "])), light.contextMenuBackgroundColor, light.contextMenuShadowColor, dark.contextMenuBackgroundColor, dark.contextMenuShadowColor))
+  }, /*#__PURE__*/React.createElement(ContextButton, {
+    icon: /*#__PURE__*/React.createElement(RiShareLine, {
+      size: 20
+    }),
+    title: "\u5206\u4EAB"
+  }), /*#__PURE__*/React.createElement(ContextButton, {
+    icon: /*#__PURE__*/React.createElement(RiInformationLine, {
+      size: 20
+    }),
+    title: "\u4FE1\u606F",
+    onClick: function onClick() {
+      setShowInfoItemData(_objectSpread(_objectSpread({}, contextMenu.data), {}, {
+        pageX: contextMenu.pageX,
+        pageY: contextMenu.pageY
+      }));
+      hideContextMenu();
+    }
+  }), /*#__PURE__*/React.createElement(ContextButton, {
+    icon: /*#__PURE__*/React.createElement(RiCloseCircleLine, {
+      size: 20
+    }),
+    title: "\u79FB\u9664",
+    onClick: function onClick() {
+      setContextMenu(null);
+      removeItem(contextMenu.data.id);
+    }
+  }))));
+};
+export default ContextMenu;

package/dist/Desktop/Items/GroupItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SortItem } from '../types';
+import { SortableItemProps } from './SortableItem';
+interface SortableGroupItemProps<D, C> extends SortableItemProps<D, C> {
+    data: SortItem<D, C>;
+}
+declare const SortableGroupItem: <D, C>(props: SortableGroupItemProps<D, C>) => React.JSX.Element;
+export default SortableGroupItem;

package/dist/Desktop/Items/GroupItem.js

@@ -0,0 +1,176 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { css, cx } from '@emotion/css';
+import { motion } from 'framer-motion';
+import React, { useMemo } from 'react';
+import { ReactSortable } from 'react-sortablejs';
+import { useSortable } from "../hook";
+import SortableUtils from "../utils";
+import SortableItem from "./SortableItem";
+var SortableGroupItem = function SortableGroupItem(props) {
+  var _children$length, _ref2, _name;
+  var data = props.data,
+    className = props.className,
+    parentIds = props.parentIds,
+    itemIndex = props.itemIndex,
+    _onClick = props.onClick,
+    _props$noLetters = props.noLetters,
+    noLetters = _props$noLetters === void 0 ? false : _props$noLetters,
+    itemIconBuilder = props.itemIconBuilder;
+  var _useSortable = useSortable(),
+    contextMenuFuns = _useSortable.contextMenuFuns,
+    _setList = _useSortable.setList,
+    setOpenGroupItemData = _useSortable.setOpenGroupItemData,
+    longPressTriggered = _useSortable.longPressTriggered,
+    moveItemId = _useSortable.moveItemId,
+    moveTargetId = _useSortable.moveTargetId,
+    setMoveTargetId = _useSortable.setMoveTargetId,
+    theme = _useSortable.theme,
+    listStatus = _useSortable.listStatus;
+  var _SortableUtils$getThe = SortableUtils.getTheme(theme),
+    light = _SortableUtils$getThe.light,
+    dark = _SortableUtils$getThe.dark;
+  var children = data.children,
+    itemData = data.data,
+    itemConfig = data.config;
+  var _ref = itemConfig !== null && itemConfig !== void 0 ? itemConfig : {},
+    _ref$row = _ref.row,
+    row = _ref$row === void 0 ? 1 : _ref$row,
+    _ref$col = _ref.col,
+    col = _ref$col === void 0 ? 1 : _ref$col;
+  var variants = {
+    visible: {
+      opacity: 1,
+      scale: 1
+    },
+    hidden: {
+      opacity: 0,
+      scale: 0.95
+    }
+  };
+
+  // 是否为空
+  var childrenEmpty = ((_children$length = children === null || children === void 0 ? void 0 : children.length) !== null && _children$length !== void 0 ? _children$length : 0) === 0;
+
+  // 截取前 9 个
+  var _children = !childrenEmpty ? (_ref2 = _toConsumableArray(children !== null && children !== void 0 ? children : [])) === null || _ref2 === void 0 ? void 0 : _ref2.slice(0, 9) : [data];
+  var isMove = useMemo(function () {
+    return moveItemId === data.id.toString();
+  }, [data.id, moveItemId]);
+  var isMoveTarget = useMemo(function () {
+    return moveTargetId === data.id;
+  }, [data.id, moveTargetId]);
+  var childrenIconCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    cursor: pointer;\n    background-color: ", ";\n    box-shadow: 0 0 0.5rem ", ";\n    @media (prefers-color-scheme: dark) {\n      background-color: ", ";\n      box-shadow: 0 0 0.5rem ", ";\n    }\n  "])), light.itemIconBackgroundColor, light.itemIconShadowColor, dark.itemIconBackgroundColor, dark.itemIconShadowColor);
+  var sizedContent = function sizedContent() {
+    /** type app */
+    if (childrenEmpty) {
+      return /*#__PURE__*/React.createElement(motion.div, {
+        className: cx('sortable-group-item', css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              overflow: hidden;\n              cursor: pointer;\n              width: 100%;\n              height: 100%;\n              background-color: ", ";\n              position: absolute;\n              left: 0;\n              top: 0;\n              border-radius: 0.75rem;\n              @media (prefers-color-scheme: dark) {\n                background-color: ", ";\n              }\n            "])), light.itemIconBackgroundColor, dark.itemIconBackgroundColor)),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          _onClick === null || _onClick === void 0 || _onClick(data);
+        }
+      }, itemIconBuilder === null || itemIconBuilder === void 0 ? void 0 : itemIconBuilder(data));
+    }
+    if (row === 1 && col === 1 || row === 2 && col === 2) {
+      return /*#__PURE__*/React.createElement(motion.div, {
+        className: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            display: grid;\n            width: 100%;\n            height: 100%;\n            grid-template-columns: repeat(3, minmax(0, 1fr));\n            grid-template-rows: repeat(3, minmax(0, 1fr));\n            padding: ", ";\n            gap: ", ";\n            place-items: center;\n          "])), col === 1 ? '0.125rem' : '0.25rem', col === 1 ? '0.125rem' : '0.5rem')
+      }, _children === null || _children === void 0 ? void 0 : _children.slice(0, 9).map(function (i) {
+        return /*#__PURE__*/React.createElement(motion.div, {
+          key: i.id,
+          className: cx(childrenIconCss, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  border-radius: ", ";\n                  width: 100%;\n                  height: 100%;\n                "])), col === 1 ? '0.25rem' : '0.5rem')),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            _onClick === null || _onClick === void 0 || _onClick(i);
+          }
+        }, itemIconBuilder === null || itemIconBuilder === void 0 ? void 0 : itemIconBuilder(i));
+      }));
+    }
+    if (row === 1 && col === 2) {
+      return /*#__PURE__*/React.createElement(motion.div, {
+        className: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            display: grid;\n            grid-template-columns: repeat(10, minmax(0, 1fr));\n            grid-template-rows: repeat(4, minmax(0, 1fr));\n            column-gap: 0.5rem;\n            row-gap: 0.25rem;\n            width: 144px;\n            height: 52px;\n            place-items: center;\n          "])))
+      }, _children === null || _children === void 0 ? void 0 : _children.slice(0, 4).map(function (i, j) {
+        return /*#__PURE__*/React.createElement(motion.div, {
+          key: i.id,
+          className: cx(childrenIconCss, j < 2 ? css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                      width: 52px;\n                      height: 52px;\n                      border-radius: 0.5rem;\n                      grid-column: span 4 / span 4;\n                      grid-row: span 4 / span 4;\n                    "]))) : css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n                      width: 1.5rem;\n                      height: 1.5rem;\n                      border-radius: 0.375rem;\n                      grid-column: span 2 / span 2;\n                      grid-row: span 2 / span 2;\n                    "])))),
+          onClick: function onClick(e) {
+            if (j > 2) return;
+            e.stopPropagation();
+            _onClick === null || _onClick === void 0 || _onClick(i);
+          }
+        }, itemIconBuilder === null || itemIconBuilder === void 0 ? void 0 : itemIconBuilder(i));
+      }));
+    }
+    if (row === 2 && col === 1) {
+      return /*#__PURE__*/React.createElement(motion.div, {
+        className: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n            display: grid;\n            grid-template-columns: repeat(4, minmax(0, 1fr));\n            grid-template-rows: repeat(10, minmax(0, 1fr));\n            column-gap: 0.25rem;\n            row-gap: 0.5rem;\n            width: 52px;\n            height: 144px;\n            place-items: center;\n          "])))
+      }, _children === null || _children === void 0 ? void 0 : _children.slice(0, 4).map(function (i, j) {
+        return /*#__PURE__*/React.createElement(motion.div, {
+          key: i.id,
+          className: cx(childrenIconCss, j < 2 ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n                      width: 52px;\n                      height: 52px;\n                      border-radius: 0.5rem;\n                      grid-column: span 4 / span 4;\n                      grid-row: span 4 / span 4;\n                    "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n                      width: 1.5rem;\n                      height: 1.5rem;\n                      grid-column: span 2 / span 2;\n                      grid-row: span 2 / span 2;\n                    "])))),
+          onClick: function onClick(e) {
+            if (j > 2) return;
+            e.stopPropagation();
+            _onClick === null || _onClick === void 0 || _onClick(i);
+          }
+        }, itemIconBuilder === null || itemIconBuilder === void 0 ? void 0 : itemIconBuilder(i));
+      }));
+    }
+  };
+  return /*#__PURE__*/React.createElement(SortableItem, {
+    data: data,
+    itemIndex: itemIndex,
+    parentIds: parentIds,
+    childrenLength: children === null || children === void 0 ? void 0 : children.length,
+    className: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          grid-row: span ", ";\n          grid-column: span ", ";\n        "])), row, col), className)
+  }, /*#__PURE__*/React.createElement(motion.div, _extends({
+    whileTap: {
+      scale: 0.9
+    },
+    className: cx(isMoveTarget ? '!scale-110' : '', css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            cursor: pointer;\n            position: relative;\n            border-radius: 0.75rem;\n            background-color: ", ";\n            box-shadow: 0 0 0.5rem ", ";\n            @media (prefers-color-scheme: dark) {\n              background-color: ", ";\n              box-shadow: 0 0 0.5rem ", ";\n            }\n            /* overflow: hidden; */\n            transition: all 0.3s;\n            margin: 0 auto;\n            width: ", "px;\n            height: ", "px;\n          "])), light.groupItemIconBackgroundColor, light.groupItemIconShadowColor, dark.groupItemIconBackgroundColor, dark.groupItemIconShadowColor, col * 64 + 32 * (col - 1), row * 64 + 32 * (row - 1))),
+    onClick: function onClick(e) {
+      if (!childrenEmpty && !longPressTriggered) {
+        data.parentIds = parentIds;
+        data.pageX = e.pageX;
+        data.pageY = e.pageY;
+        setOpenGroupItemData(data);
+      }
+    }
+  }, contextMenuFuns(data)), /*#__PURE__*/React.createElement(motion.div, {
+    className: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n            position: relative;\n            width: 100%;\n            height: 100%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 0.375rem;\n          "])))
+  }, sizedContent(), /*#__PURE__*/React.createElement(ReactSortable, {
+    className: cx('sortable-group-item', css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n                position: absolute;\n                cursor: pointer;\n                left: 0.375rem;\n                top: 0.375rem;\n                width: calc(100% - 0.75rem);\n                height: calc(100% - 0.75rem);\n                pointer-events: ", ";\n                > * {\n                  opacity: 0;\n                }\n              "])), listStatus === null ? 'none' : 'auto')),
+    group: {
+      name: 'nested',
+      pull: false,
+      put: true
+    },
+    animation: 150,
+    fallbackOnBody: true,
+    list: children !== null && children !== void 0 ? children : [],
+    setList: function setList(x) {
+      return _setList(x, parentIds);
+    }
+    // 只能移入，文件夹中的不能响应拖拽事件
+    ,
+    filter: function filter() {
+      return true;
+    },
+    "data-id": data.id,
+    onChange: function onChange() {
+      setMoveTargetId(data.id);
+    }
+  }))), /*#__PURE__*/React.createElement(motion.p, {
+    className: cx(css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n            text-align: center;\n            margin-top: 0.25rem;\n            margin-bottom: 0;\n            color: ", ";\n            @media (prefers-color-scheme: dark) {\n              color: ", ";\n            }\n          "])), light.itemNameColor, dark.itemNameColor), noLetters && css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n              color: transparent;\n            "])))),
+    variants: variants,
+    animate: isMove ? 'hidden' : 'visible'
+  }, (_name = itemData === null || itemData === void 0 ? void 0 : itemData.name) !== null && _name !== void 0 ? _name : '文件夹'));
+};
+export default SortableGroupItem;

package/dist/Desktop/Items/Modal/GroupItemModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortItem } from '../../types';
+interface GroupItemModalProps<D, C> {
+    data: SortItem | null;
+    onClose: () => void;
+    onItemClick?: (item: SortItem<D, C>) => void;
+    itemIconBuilder?: (item: SortItem<D, C>) => React.ReactNode;
+}
+declare const GroupItemModal: <D, C>(props: GroupItemModalProps<D, C>) => React.JSX.Element;
+export default GroupItemModal;

package/dist/Desktop/Items/Modal/GroupItemModal.js

@@ -0,0 +1,159 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { css, cx } from '@emotion/css';
+import Dialog from 'rc-dialog';
+import React, { useEffect, useState } from 'react';
+import { ReactSortable } from 'react-sortablejs';
+import { useSortable } from "../../hook";
+import { ghostClass } from "../../style";
+import SortableUtils from "../../utils";
+import SortableItem from "../SortableItem";
+var GroupItemModal = function GroupItemModal(props) {
+  var _data$children, _data$children2;
+  var data = props.data,
+    _onClose = props.onClose,
+    onItemClick = props.onItemClick,
+    itemIconBuilder = props.itemIconBuilder;
+  var _useSortable = useSortable(),
+    list = _useSortable.list,
+    _setList = _useSortable.setList,
+    setListStatus = _useSortable.setListStatus,
+    setMoveItemId = _useSortable.setMoveItemId,
+    setMoveTargetId = _useSortable.setMoveTargetId,
+    updateItem = _useSortable.updateItem,
+    theme = _useSortable.theme;
+  var _SortableUtils$getThe = SortableUtils.getTheme(theme),
+    light = _SortableUtils$getThe.light,
+    dark = _SortableUtils$getThe.dark;
+  var _useState = useState('文件夹'),
+    _useState2 = _slicedToArray(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
+  var _children = _toConsumableArray((_data$children = data === null || data === void 0 ? void 0 : data.children) !== null && _data$children !== void 0 ? _data$children : []);
+  useEffect(function () {
+    var _data$data;
+    if (!data) return;
+    setName((_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.name);
+  }, [data]);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    visible: !!data,
+    onClose: function onClose() {
+      _onClose();
+    },
+    animation: "zoom",
+    maskAnimation: "fade",
+    mousePosition: data !== null && data !== void 0 && data.pageX && data !== null && data !== void 0 && data.pageY ? {
+      x: data === null || data === void 0 ? void 0 : data.pageX,
+      y: data === null || data === void 0 ? void 0 : data.pageY
+    } : null,
+    title: /*#__PURE__*/React.createElement("input", {
+      className: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            background-color: transparent;\n            border-style: none;\n            text-align: center;\n            font-size: 1.25rem;\n            line-height: 1.75rem;\n            color: white;\n            @media (prefers-color-scheme: dark) {\n              color: black;\n            }\n            &:focus {\n              outline: none;\n            }\n          "]))),
+      value: name,
+      onChange: function onChange(e) {
+        setName(e.target.value);
+      },
+      onBlur: function onBlur() {
+        if (!data) return;
+        updateItem(data.id, _objectSpread(_objectSpread({}, data.data), {}, {
+          name: name
+        }));
+      }
+    }),
+    footer: null,
+    closable: false,
+    className: cx('group-item-modal', css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          .rc-dialog-content {\n            background-color: transparent;\n            box-shadow: none;\n            padding: 0;\n            .rc-dialog-header {\n              text-align: center;\n              background-color: transparent;\n              margin-bottom: 1rem;\n              border-bottom: none;\n              .ant-modal-name {\n                color: #fff;\n              }\n            }\n            .rc-dialog-body {\n              background-color: ", ";\n              @media (prefers-color-scheme: dark) {\n                background-color: ", ";\n              }\n              border-radius: 0.5rem;\n              overflow: hidden;\n            }\n          }\n        "])), light.groupItemModalBackgroundColor, dark.groupItemModalBackgroundColor)),
+    width: 600,
+    destroyOnClose: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          overflow-y: auto;\n          max-height: 60vh;\n          padding: 1.25rem 0;\n        "]))),
+    onDragLeave: function onDragLeave(e) {
+      // 获取鼠标指针进入的元素
+      var relatedTarget = e.relatedTarget;
+      if (!relatedTarget) return;
+      if (!e.currentTarget.contains(relatedTarget)) {
+        // 鼠标确实离开了当前元素
+        setTimeout(function () {
+          _onClose();
+        }, 500);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(ReactSortable, {
+    className: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n            display: grid;\n            gap: 1rem;\n            place-items: center;\n            grid-template-columns: repeat(auto-fill, 96px);\n            grid-auto-flow: dense;\n            grid-auto-rows: 96px;\n          "]))),
+    group: {
+      name: 'nested',
+      pull: true,
+      put: false
+    },
+    animation: 150,
+    fallbackOnBody: true,
+    list: (_data$children2 = data === null || data === void 0 ? void 0 : data.children) !== null && _data$children2 !== void 0 ? _data$children2 : [],
+    setList: function setList(x) {
+      var _list$find, _parentChildrenIds$le, _data$parentIds;
+      var xIds = x.map(function (item) {
+        return item.id;
+      });
+      var parentChildrenIds = (_list$find = list.find(function (item) {
+        return item.id === (data === null || data === void 0 ? void 0 : data.id);
+      })) === null || _list$find === void 0 || (_list$find = _list$find.children) === null || _list$find === void 0 ? void 0 : _list$find.map(function (item) {
+        return item.id;
+      });
+      // ! 如果ids个数相同，顺序相同 return，优化性能
+      if (xIds.length === (parentChildrenIds === null || parentChildrenIds === void 0 ? void 0 : parentChildrenIds.length) && xIds.every(function (id, index) {
+        return id === parentChildrenIds[index];
+      })) {
+        return;
+      }
+
+      // ! 解决文件夹中移出再移入会触发setList导致元素丢失bug
+      if (xIds.length < ((_parentChildrenIds$le = parentChildrenIds === null || parentChildrenIds === void 0 ? void 0 : parentChildrenIds.length) !== null && _parentChildrenIds$le !== void 0 ? _parentChildrenIds$le : 0)) {
+        return;
+      }
+      _setList(x, [].concat(_toConsumableArray((_data$parentIds = data === null || data === void 0 ? void 0 : data.parentIds) !== null && _data$parentIds !== void 0 ? _data$parentIds : []), [data === null || data === void 0 ? void 0 : data.id]));
+    },
+    onMove: function onMove() {
+      setMoveTargetId(null);
+      setListStatus('onMove');
+      return true;
+    },
+    onStart: function onStart(e) {
+      var dataset = e.item.dataset;
+      if (dataset !== null && dataset !== void 0 && dataset.id) {
+        setMoveItemId(dataset.id);
+      }
+      setListStatus('onMove');
+    },
+    onEnd: function onEnd() {
+      setMoveItemId(null);
+      setMoveTargetId(null);
+      setListStatus(null);
+    },
+    ghostClass: ghostClass
+  }, _children.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(SortableItem, {
+      key: item.id,
+      data: item,
+      itemIndex: index,
+      onClick: onItemClick,
+      itemIconBuilder: itemIconBuilder
+    });
+  }))));
+};
+export default GroupItemModal;

package/dist/Desktop/Items/Modal/InfoModal.d.ts

@@ -0,0 +1,12 @@
+import 'rc-dialog/assets/index.css';
+import { FC } from 'react';
+import { SortItem } from '../../types';
+export interface ItemInfoModalProps {
+    data: SortItem | null;
+    onClose: () => void;
+}
+/**
+ * 查看当前项的详细信息，开发模式下会额外显示原始数据
+ */
+declare const ItemInfoModal: FC<ItemInfoModalProps>;
+export default ItemInfoModal;

package/dist/Desktop/Items/Modal/InfoModal.js

@@ -0,0 +1,34 @@
+import Dialog from 'rc-dialog';
+import 'rc-dialog/assets/index.css';
+import React from 'react';
+import ReactJson from 'react-json-view';
+/**
+ * 查看当前项的详细信息，开发模式下会额外显示原始数据
+ */
+var ItemInfoModal = function ItemInfoModal(props) {
+  var _data$data$name, _data$data;
+  var data = props.data,
+    _onClose = props.onClose;
+  return /*#__PURE__*/React.createElement(Dialog, {
+    visible: !!data,
+    onClose: function onClose() {
+      _onClose();
+    },
+    animation: "zoom",
+    maskAnimation: "fade",
+    mousePosition: data !== null && data !== void 0 && data.pageX && data !== null && data !== void 0 && data.pageY ? {
+      x: data === null || data === void 0 ? void 0 : data.pageX,
+      y: data === null || data === void 0 ? void 0 : data.pageY
+    } : null,
+    footer: null,
+    title: (_data$data$name = data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.name) !== null && _data$data$name !== void 0 ? _data$data$name : '信息'
+  }, data && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "mb-2"
+  }, "\u5F00\u53D1\u8005\u4FE1\u606F"), /*#__PURE__*/React.createElement("div", {
+    className: "p-2 rounded-md bg-[#272822]"
+  }, /*#__PURE__*/React.createElement(ReactJson, {
+    src: data,
+    theme: "monokai"
+  }))));
+};
+export default ItemInfoModal;

package/dist/Desktop/Items/SortableItem.d.ts

@@ -0,0 +1,18 @@
+import 'rc-tooltip/assets/bootstrap_white.css';
+import React from 'react';
+import { SortItem } from '../types';
+export interface SortableItemProps<D, C> {
+    data: SortItem<D, C>;
+    className?: string;
+    itemIndex: number;
+    noLetters?: boolean;
+    onClick?: (item: SortItem<D, C>) => void;
+    disabledDrag?: boolean;
+    children?: React.ReactNode;
+    parentIds?: (string | number)[];
+    childrenLength?: number;
+    itemIconBuilder?: (item: SortItem<D, C>) => React.ReactNode;
+}
+export declare const SortableItemDefaultContent: <D, C>(props: SortableItemProps<D, C>) => React.JSX.Element;
+declare const SortableItem: <D, C>(props: SortableItemProps<D, C>) => React.JSX.Element;
+export default SortableItem;