@titaui/pc 1.11.4-0 → 1.11.4-11

package/lib/components/form/form-fields/input/index.js

@@ -43,7 +43,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var preCls = "form-field-input";
+var preCls = 'form-field-input';
 
 function OverlayInner(_ref) {
   var hasError = _ref.hasError,
@@ -52,12 +52,12 @@ function OverlayInner(_ref) {
       activeTips = _ref.activeTips;
   if (hasActive) return /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      color: "#3F4755"
+      color: '#3F4755'
     }
   }, activeTips);
   if (hasError) return /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      color: "#F05E5E"
+      color: '#F05E5E'
     }
   }, tip);
   return /*#__PURE__*/_react["default"].createElement("span", null);
@@ -79,7 +79,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       layout = props.layout,
       onCheckSuccess = props.onCheckSuccess,
       _props$className = props.className,
-      className = _props$className === void 0 ? "" : _props$className,
+      className = _props$className === void 0 ? '' : _props$className,
       tail = props.tail,
       restProps = _objectWithoutProperties(props, _excluded);
 
@@ -95,12 +95,12 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       hasActive = _useState4[0],
       setHasActive = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(""),
+  var _useState5 = (0, _react.useState)(''),
       _useState6 = _slicedToArray(_useState5, 2),
       tip = _useState6[0],
       setTip = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(props.value || ""),
+  var _useState7 = (0, _react.useState)(props.value || ''),
       _useState8 = _slicedToArray(_useState7, 2),
       value = _useState8[0],
       setValue = _useState8[1];
@@ -133,7 +133,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onInputFocusHandler = function onInputFocusHandler() {
     setHasActive(true);
-    if (type && type == "number") return;
+    if (type && type == 'number') return;
     inputRef.current.setSelectionRange(9999999, 9999999);
   };
 
@@ -147,7 +147,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setTip(errors[0].tip);
     } else {
       setHasError(false);
-      setTip("");
+      setTip('');
     }
   };
 
@@ -196,7 +196,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     };
   });
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(preCls, _defineProperty({}, "".concat(preCls, "-row"), layout === "row"), className)
+    className: (0, _classnames["default"])(preCls, _defineProperty({}, "".concat(preCls, "-row"), layout === 'row'), className)
   }, !!label && /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(preCls, "__label"))
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -227,7 +227,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onBlur: onBlurHandler,
     onChange: onChangeHandler,
     autoComplete: "off"
-  }, restProps))), typeof tail === "string" ? /*#__PURE__*/_react["default"].createElement("span", {
+  }, restProps))), typeof tail === 'string' ? /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(preCls, "__tail"))
   }, tail) : tail));
 });

package/lib/components/form/form-fields/user/index.css

@@ -17,7 +17,7 @@
 
 .form-field-user__border {
   padding: 6px 12px;
-  border-radius: 3px;
+  border-radius: 8px;
   transition: all 0.2s;
   border: 1px solid #e9ecf0;
   box-sizing: border-box;
@@ -42,6 +42,7 @@
   font-weight: 400;
   color: #3f4755;
   cursor: pointer;
+  display: flex;
   position: relative;
 }
 
@@ -49,8 +50,21 @@
   display: block;
 }
 
-.form-field-user__input-avatar {
+.form-field-user__input-user-info {
   margin-right: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.form-field-user__input-user-info .titaui-pc-avator-container {
+  display: flex;
+}
+
+.form-field-user__input-user-info__name {
+  margin-left: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .form-field-user__input--placeholder {
@@ -72,10 +86,16 @@
 }
 
 .form-field-user__input--down {
-  color: #c2cbd1;
+  font-size: 16px;
+  color: #3f4755;
   position: absolute;
   right: -32px;
   top: 50%;
   transform: translate(0, -50%);
   cursor: pointer;
 }
+
+.form-field-user__input--down::before {
+  transform: scale(0.5);
+  display: inline-block;
+}

package/lib/components/form/form-fields/user/index.js

@@ -19,12 +19,16 @@ var _userInput = _interopRequireDefault(require("./user-input"));
 
 require("./index.css");
 
+var _excluded = ["name", "label", "placeholder", "value", "onChange", "require", "maxSize", "multiple", "getContainer"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -39,7 +43,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var preCls = "form-field-user";
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var preCls = 'form-field-user';
 
 function OverlayInner(_ref) {
   var hasError = _ref.hasError,
@@ -47,12 +55,12 @@ function OverlayInner(_ref) {
       tip = _ref.tip;
   if (hasError) return /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      color: "#F05E5E"
+      color: '#F05E5E'
     }
   }, tip);
   if (hasActive) return /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      color: "#3F4755"
+      color: '#3F4755'
     }
   }, tip);
   return /*#__PURE__*/_react["default"].createElement("span", null);
@@ -69,9 +77,10 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       require = props.require,
       maxSize = props.maxSize,
       multiple = props.multiple,
-      getContainer = props.getContainer;
+      getContainer = props.getContainer,
+      restProps = _objectWithoutProperties(props, _excluded);
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
       tip = _useState2[0],
       setTip = _useState2[1];
@@ -119,7 +128,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var onUserSelectHandler = function onUserSelectHandler(data) {
     setHasActive(false);
     setHasError(false);
-    setTip("");
+    setTip('');
     var users = [];
 
     if (multiple) {
@@ -211,7 +220,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tip: tip
     }),
     getTooltipContainer: getContainer
-  }, /*#__PURE__*/_react["default"].createElement(_userSelector["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_userSelector["default"], _extends({
     multiple: multiple,
     selectNodes: selectNodes,
     position: "centerRight",
@@ -229,7 +238,8 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       group: false
     },
     onPopupVisibleChange: onPopupVisibleChangeHandler
-  }, /*#__PURE__*/_react["default"].createElement(_userInput["default"], {
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_userInput["default"], {
+    multiple: multiple,
     users: selectNodes.users,
     onClear: onClearHandler,
     placeholder: placeholder

package/lib/components/form/form-fields/user/user-input.js

@@ -15,21 +15,25 @@ var _tooltip = _interopRequireDefault(require("../../../tooltip"));
 
 var _getLocale = require("../../../../utils/getLocale");
 
+var _openData = require("../../../../utils/open-data");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var preCls = "form-field-user";
+var preCls = 'form-field-user';
 
 function _default(props) {
-  var users = props.users,
+  var _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? false : _props$multiple,
+      users = props.users,
       _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? (0, _getLocale.getLocale)("Mod_Pleaseselect") : _props$placeholder,
+      placeholder = _props$placeholder === void 0 ? (0, _getLocale.getLocale)('Mod_Pleaseselect') : _props$placeholder,
       onClear = props.onClear;
   var userNames = [];
   (users || []).forEach(function (user) {
-    userNames.push( /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _classnames["default"])("".concat(preCls, "__input-avatar"))
+    userNames.push( /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(preCls, "__input-user-info"))
     }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
       overlay: user.name,
       placement: "top"
@@ -38,6 +42,11 @@ function _default(props) {
       src: user.avatar.small,
       color: user.avatar.color,
       userId: user.userId
+    })), !multiple && /*#__PURE__*/_react["default"].createElement("p", {
+      className: (0, _classnames["default"])("".concat(preCls, "__input-user-info__name"))
+    }, /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+      id: user.userId,
+      name: user.name
     }))));
   });
 
@@ -55,6 +64,6 @@ function _default(props) {
     className: (0, _classnames["default"])("tu-icon-cross ".concat(preCls, "__input--clear")),
     onClick: onHandleClear
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(preCls, "__input--down tu-icon-sort-down"))
+    className: (0, _classnames["default"])("".concat(preCls, "__input--down tu-icon-caret-down"))
   }));
 }

package/lib/components/form/index.js

@@ -31,6 +31,8 @@ var _inputVerificationCode = _interopRequireDefault(require("./form-fields/input
 
 var _password = _interopRequireDefault(require("./form-fields/password"));
 
+var _date = _interopRequireDefault(require("./form-fields/date"));
+
 var _layout = require("./layout");
 
 require("./index.css");
@@ -61,7 +63,7 @@ var Form = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onFieldChangeHandler = function onFieldChangeHandler(name, value) {
     fieldsValue.current[name] = value;
-    onFieldsChange && onFieldsChange(fieldsValue.current);
+    onFieldsChange === null || onFieldsChange === void 0 ? void 0 : onFieldsChange(fieldsValue.current);
   };
 
   var initFieldsValue = function initFieldsValue(name, value) {
@@ -86,7 +88,7 @@ var Form = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         var errors = [];
         var fieldsKeys = Object.keys(fieldRefs.current);
 
-        for (var i = 0; i < fieldsKeys.length; i++) {
+        for (var i = 0; i < fieldsKeys.length; i += 1) {
           var fieldRef = fieldRefs.current[fieldsKeys[i]];
           var fieldErrors = fieldRef.verifing();
 
@@ -133,9 +135,14 @@ var FormFields = {
   DropDown: _dropdown["default"],
   GroupFields: _group["default"],
   VerificationInput: _inputVerificationCode["default"],
-  Password: _password["default"]
+  Password: _password["default"],
+  Date: _date["default"]
 }; // @ts-ignore
 
 Form.Fields = FormFields;
+Form.defaultProps = {
+  className: "",
+  direction: "vertical"
+};
 var _default = Form;
 exports["default"] = _default;

package/lib/components/icon-button-list/index.css

@@ -16,7 +16,7 @@
   height: 30px;
   margin-left: 10px;
   border: 1px solid #e6eaef;
-  border-radius: 4px;
+  border-radius: 50%;
   box-sizing: border-box;
   cursor: pointer;
 }
@@ -33,63 +33,8 @@
   border-color: #2879ff;
 }
 
-.titaui-icon-button-list__btn:hover .titaui-icon-button-list__btn-icon--export {
-  background-position: 0 -287px;
-}
-
-.titaui-icon-button-list__btn:hover .titaui-icon-button-list__btn-icon--share {
-  background-position: 0 -26px;
-}
-
-.titaui-icon-button-list__btn:hover .titaui-icon-button-list__btn-icon--fullscreen {
-  background-position: 0 -78px;
-}
-
-.titaui-icon-button-list__btn:hover .titaui-icon-button-list__btn-icon--quit-fullscreen {
-  background-position: 0 -130px;
-}
-
-.titaui-icon-button-list__btn:hover .titaui-icon-button-list__btn-icon--horizontal {
-  background-position: 0 -182px;
-}
-
-.titaui-icon-button-list__btn:hover .titaui-icon-button-list__btn-icon--vertical {
-  background-position: 0 -234px;
-}
-
 .titaui-icon-button-list__btn-icon {
   display: inline-block;
   box-sizing: border-box;
-}
-
-.titaui-icon-button-list__btn-icon--base {
-  width: 16px;
-  height: 16px;
-  background: url("./images/icons-2.png") no-repeat;
-  background-size: cover;
-}
-
-.titaui-icon-button-list__btn-icon--export {
-  background-position: 0 -261px;
-}
-
-.titaui-icon-button-list__btn-icon--share {
-  background-position: 0 0;
-}
-
-.titaui-icon-button-list__btn-icon--fullscreen {
-  background-position: 0 -52px;
-}
-
-.titaui-icon-button-list__btn-icon--quit-fullscreen {
-  background-position: 0 -104px;
-}
-
-.titaui-icon-button-list__btn-icon--horizontal {
-  background-position: 0 -156px;
-}
-
-.titaui-icon-button-list__btn-icon--vertical {
-  height: 17px;
-  background-position: 0 -208px;
+  font-size: 16px;
 }

package/lib/components/icon-button-list/index.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var preCls = "titaui-icon-button-list";
+var preCls = 'titaui-icon-button-list';
 
 function _default(props) {
   var items = props.items,
@@ -32,22 +32,25 @@ function _default(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(preCls, "__inner"))
   }, items.map(function (it) {
-    var _classNames;
-
     var icon = it.icon,
+        type = it.type,
         overlay = it.overlay,
         _it$placement = it.placement,
-        placement = _it$placement === void 0 ? "top" : _it$placement,
+        placement = _it$placement === void 0 ? 'top' : _it$placement,
         _it$trigger = it.trigger,
-        trigger = _it$trigger === void 0 ? ["hover"] : _it$trigger;
+        trigger = _it$trigger === void 0 ? ['hover'] : _it$trigger,
+        rotate = it.rotate;
 
     var content = /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])("".concat(preCls, "__btn")),
       onClick: function onClick(e) {
-        return _onClick(e, icon);
+        return _onClick(e, type);
       }
     }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _classnames["default"])("".concat(preCls, "__btn-icon"), (_classNames = {}, _defineProperty(_classNames, "".concat(preCls, "__btn-icon--base"), true), _defineProperty(_classNames, "".concat(preCls, "__btn-icon--").concat(icon), true), _classNames))
+      className: (0, _classnames["default"])("".concat(preCls, "__btn-icon"), _defineProperty({}, "tu-icon-".concat(icon), true)),
+      style: rotate ? {
+        transform: "rotate(".concat(rotate, "deg)")
+      } : {}
     }));
 
     if (overlay) {

package/lib/components/img-viewer/index.css

@@ -46,7 +46,7 @@
 }
 
 .titaui-img-viewer__header-download::after {
-  content: "";
+  content: '';
   display: inline-block;
   width: 1px;
   height: 22px;
@@ -80,6 +80,13 @@
 
 .titaui-img-viewer__body-img {
   max-width: 800px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: move;
 }
 
 .titaui-img-viewer__body-operate-btn {
@@ -110,12 +117,12 @@
 }
 
 .titaui-img-viewer__body-operate-btn--disable {
-  color: #BFC7D5;
+  color: #bfc7d5;
 }
 
 .titaui-img-viewer__body-operate-btn--disable:hover {
   cursor: not-allowed;
-  color: #BFC7D5;
+  color: #bfc7d5;
 }
 
 .titaui-img-viewer__body--loading {

package/lib/components/img-viewer/index.js

@@ -49,7 +49,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var prefix = "titaui-img-viewer";
+var prefix = 'titaui-img-viewer';
 var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var data = _ref.data,
       _ref$showDownload = _ref.showDownload,
@@ -85,7 +85,18 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isLoading = _useState12[0],
       setIsLoading = _useState12[1];
 
-  var imgRef = (0, _react.useRef)(document.createElement("img"));
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      moveX = _useState14[0],
+      setMoveX = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(0),
+      _useState16 = _slicedToArray(_useState15, 2),
+      moveY = _useState16[0],
+      setMoveY = _useState16[1];
+
+  var imgRef = (0, _react.useRef)(document.createElement('img'));
+  var DragRef = (0, _react.useRef)(document.createElement('div'));
 
   var showPreview = function showPreview() {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -120,6 +131,31 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setCurrentRotateDeg(currentRotateDeg - 90);
   };
 
+  var handleMouseDownImg = function handleMouseDownImg(e) {
+    e.preventDefault();
+    var downX = e.clientX;
+    var downY = e.clientY; // 因为这个moveX不闭包的话在拖动的时候他就 一直累加
+
+    var beforeX = moveX;
+    var beforeY = moveY;
+
+    DragRef.current.onmousemove = function (e1) {
+      //获取x和y
+      var nx = e1.clientX;
+      var ny = e1.clientY; // //计算移动后的左偏移量和顶部的偏移量
+
+      var nl = nx - downX + beforeX;
+      var nt = ny - downY + beforeY;
+      setMoveX(nl);
+      setMoveY(nt);
+    };
+  };
+
+  var handleMouseUpImg = function handleMouseUpImg(e) {
+    e.preventDefault();
+    DragRef.current.onmousemove = null;
+  };
+
   var handleRightRotate = function handleRightRotate() {
     setCurrentRotateDeg(currentRotateDeg + 90);
   };
@@ -152,25 +188,28 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var renderPreviewer = function renderPreviewer() {
     if (!visible) return null;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])(prefix, "document-mouse-event-ignore")
+      className: (0, _classnames["default"])(prefix, 'document-mouse-event-ignore')
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "".concat(prefix, "__header")
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "".concat(prefix, "__header-file-name")
     }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Text, {
-      text: currentImgData && currentImgData.fileName || "",
+      text: currentImgData && currentImgData.fileName || '',
       isPercent: true,
       minusWidth: 60
     })), /*#__PURE__*/_react["default"].createElement("span", null, showDownload && currentImgData && currentImgData.downloadUrl && /*#__PURE__*/_react["default"].createElement("a", {
       className: "".concat(prefix, "__header-download"),
-      href: (currentImgData === null || currentImgData === void 0 ? void 0 : currentImgData.downloadUrl) || "javascript:;"
+      href: (currentImgData === null || currentImgData === void 0 ? void 0 : currentImgData.downloadUrl) || 'javascript:;'
     }, /*#__PURE__*/_react["default"].createElement("i", {
-      className: (0, _classnames["default"])("tu-icon-APP-xiazai", "".concat(prefix, "__header-download-icon"))
-    }), (0, _getLocale.getLocale)("Mod_Download")), /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _classnames["default"])("tu-icon-close", "".concat(prefix, "__header-close")),
+      className: (0, _classnames["default"])('tu-icon-APP-xiazai', "".concat(prefix, "__header-download-icon"))
+    }), (0, _getLocale.getLocale)('Mod_Download')), /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])('tu-icon-close', "".concat(prefix, "__header-close")),
       onClick: hidePreview
     }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefix, "__body")
+      className: "".concat(prefix, "__body"),
+      ref: DragRef,
+      onMouseDown: handleMouseDownImg,
+      onMouseUp: handleMouseUpImg
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])("".concat(prefix, "__body-operate-btn"), "".concat(prefix, "__body-operate-btn--left"), _defineProperty({}, "".concat(prefix, "__body-operate-btn--disable"), currentIndex === 0)),
       onClick: handlePreImgClick
@@ -184,28 +223,28 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     })), isLoading && /*#__PURE__*/_react["default"].createElement("div", {
       className: "".concat(prefix, "__body--loading")
     }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: _loading["default"]
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        transform: "rotate(".concat(currentRotateDeg, "deg)")
-      }
-    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _loading["default"],
+      alt: ""
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
       className: "".concat(prefix, "__body-img"),
       ref: imgRef,
+      alt: "",
       src: (currentImgData === null || currentImgData === void 0 ? void 0 : currentImgData.previewUrl) || (currentImgData === null || currentImgData === void 0 ? void 0 : currentImgData.bigImageUrl),
       style: {
-        transform: "scale(".concat(currentScale, ")")
+        transform: "scale(".concat(currentScale, ") rotate(").concat(currentRotateDeg, "deg) "),
+        left: "".concat(moveX, "px"),
+        top: "".concat(moveY, "px")
       }
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "".concat(prefix, "__footer")
     }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-      overlay: (0, _getLocale.getLocale)("OKR_Ali_Butt_Narrow"),
+      overlay: (0, _getLocale.getLocale)('OKR_Ali_Butt_Narrow'),
       placement: "top"
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "".concat(prefix, "__footer-btn"),
       onClick: handleShrink
     }, /*#__PURE__*/_react["default"].createElement(_shrink["default"], null))), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-      overlay: (0, _getLocale.getLocale)("OKR_Ali_Butt_Enlarge"),
+      overlay: (0, _getLocale.getLocale)('OKR_Ali_Butt_Enlarge'),
       placement: "top"
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "".concat(prefix, "__footer-btn"),