@titaui/pc 1.5.82 → 1.5.83

package/lib/components/file-list/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleFile = exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _singleFile = _interopRequireDefault(require("./components/single-file"));
+
+var _imgViewer = _interopRequireDefault(require("../img-viewer"));
+
+var _util = require("./util");
+
+require("./index.css");
+
+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; }
+
+var prefix = "titaui-new-file-list";
+
+var FileList = function FileList(_ref) {
+  var data = _ref.data,
+      _ref$showDownload = _ref.showDownload,
+      showDownload = _ref$showDownload === void 0 ? true : _ref$showDownload;
+  var imgViewerRef = (0, _react.useRef)();
+
+  var handleImgPreview = function handleImgPreview(index) {
+    // @ts-ignore
+    imgViewerRef.current && imgViewerRef.current.show(index);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefix
+  }, data.map(function (file, index) {
+    return /*#__PURE__*/_react["default"].createElement(_singleFile["default"], {
+      key: file.documentSource + index,
+      data: file,
+      index: index,
+      showDownload: showDownload,
+      onPreview: handleImgPreview
+    });
+  }), /*#__PURE__*/_react["default"].createElement(_imgViewer["default"], {
+    showDownload: showDownload,
+    data: data.filter(function (file) {
+      return (0, _util.isImg)(file.fileType);
+    }),
+    ref: imgViewerRef
+  }));
+};
+
+var _default = FileList;
+exports["default"] = _default;
+var SingleFile = _singleFile["default"];
+exports.SingleFile = SingleFile;

package/lib/components/file-list/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/file-list/util.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isImg = exports.getFileTypeMapIcon = void 0;
+
+var _newFileListDoc = _interopRequireDefault(require("./img/new-file-list-doc.svg"));
+
+var _newFileListOther = _interopRequireDefault(require("./img/new-file-list-other.svg"));
+
+var _newFileListPdf = _interopRequireDefault(require("./img/new-file-list-pdf.svg"));
+
+var _newFileListPpt = _interopRequireDefault(require("./img/new-file-list-ppt.svg"));
+
+var _newFileListRadio = _interopRequireDefault(require("./img/new-file-list-radio.svg"));
+
+var _newFileListVideo = _interopRequireDefault(require("./img/new-file-list-video.svg"));
+
+var _newFileListXls = _interopRequireDefault(require("./img/new-file-list-xls.svg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var getFileTypeMapIcon = function getFileTypeMapIcon(fileType) {
+  var isImg = false;
+  var backGroundColor = '';
+  var fileImg;
+  var canPreview = false;
+
+  if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
+    isImg = true;
+    canPreview = true;
+  } else if (/^(mp3|ogg|ape|flac)$/.test(fileType.toLowerCase())) {
+    fileImg = _newFileListRadio["default"];
+    backGroundColor = '#FFE6FC';
+  } else if (/^(avi|wmv|mov|mp4|rmvb)$/.test(fileType.toLowerCase())) {
+    fileImg = _newFileListVideo["default"];
+    backGroundColor = '#F5E6FF';
+  } else if (/^(pptx|ppt)$/.test(fileType.toLowerCase())) {
+    fileImg = _newFileListPpt["default"];
+    backGroundColor = '#FFF5E6';
+    canPreview = true;
+  } else if (/^(doc|docx)$/.test(fileType.toLowerCase())) {
+    fileImg = _newFileListDoc["default"];
+    backGroundColor = '#E6F0FF';
+    canPreview = true;
+  } else if (/^(xls|xlsx)$/.test(fileType.toLowerCase())) {
+    fileImg = _newFileListXls["default"];
+    backGroundColor = '#E6FFF5';
+    canPreview = true;
+  } else if (/^(pdf)$/.test(fileType.toLowerCase())) {
+    fileImg = _newFileListPdf["default"];
+    backGroundColor = '#FFE7E6';
+    canPreview = true;
+  } else {
+    fileImg = _newFileListOther["default"];
+    backGroundColor = '#E6FCFF';
+  }
+
+  return {
+    isImg: isImg,
+    fileImg: fileImg,
+    backGroundColor: backGroundColor,
+    canPreview: canPreview
+  };
+};
+
+exports.getFileTypeMapIcon = getFileTypeMapIcon;
+
+var isImg = function isImg(fileType) {
+  if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
+    return true;
+  }
+
+  return false;
+};
+
+exports.isImg = isImg;

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

@@ -23,6 +23,17 @@
   box-sizing: border-box;
 }
 
+.form-field-input__border--disabled {
+  background-color: #fafafa;
+  cursor: not-allowed;
+}
+
+.form-field-input__border--disabled input:disabled {
+  background-color: #fafafa;
+  cursor: not-allowed;
+  color: #3f475594;
+}
+
 .form-field-input__border--error {
   box-shadow: inset 0px 0px 4px 0px rgba(240, 94, 94, 0.3) !important;
   border: 1px solid #f05e5e !important;

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

@@ -64,6 +64,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       require = props.require,
       type = props.type,
       name = props.name,
+      disabled = props.disabled,
       getContainer = props.getContainer;
   var inputRef = (0, _react.useRef)();
 
@@ -162,7 +163,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, label), require && /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(preCls, "__label-require"))
   }, "*")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(preCls, "__border"), (_classNames = {}, _defineProperty(_classNames, "".concat(preCls, "__border--error"), hasError), _defineProperty(_classNames, "".concat(preCls, "__border--active"), hasActive), _classNames))
+    className: (0, _classnames["default"])("".concat(preCls, "__border"), (_classNames = {}, _defineProperty(_classNames, "".concat(preCls, "__border--error"), hasError), _defineProperty(_classNames, "".concat(preCls, "__border--active"), hasActive), _defineProperty(_classNames, "".concat(preCls, "__border--disabled"), disabled), _classNames))
   }, /*#__PURE__*/_react["default"].createElement(_errorTip["default"], {
     placement: 'topLeft',
     destroyTooltipOnHide: true,
@@ -176,6 +177,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, /*#__PURE__*/_react["default"].createElement("input", {
     ref: inputRef,
     type: type,
+    disabled: disabled,
     className: (0, _classnames["default"])("".concat(preCls, "__input")),
     value: value,
     placeholder: placeholder,

package/lib/components/grid-page/personal-info/index.js

@@ -106,16 +106,16 @@ function PersonalInfoComponent() {
     for (var item in loginUserInfo) {
       switch (item) {
         case 'IsBoss':
-          loginUserInfo['IsBoss'] && userRoleList.push('Boss');
+          loginUserInfo['IsBoss'] && userRoleList.push('boss');
           break;
 
         case 'Role':
           loginUserInfo['Role'] === 2 && userRoleList.push('super');
-          loginUserInfo['Role'] === 4 && userRoleList.push('UserManager');
+          loginUserInfo['Role'] === 4 && userRoleList.push('userManager');
           break;
 
         case 'IsTitaFeedSystemManager':
-          loginUserInfo['IsTitaFeedSystemManager'] && userRoleList.push('Assistant');
+          loginUserInfo['IsTitaFeedSystemManager'] && userRoleList.push('assistant');
           break;
       }
     }
@@ -181,7 +181,7 @@ function PersonalInfoComponent() {
     style: {
       filter: avatarUrl ? 'blur(10px)' : 'blur(6px)'
     },
-    src: avatarUrl || require("../image/Default-background.png")
+    src: avatarUrl || require("../image/default-background.png")
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "PersonalInfoComponent-PersonalInfo__personInfo",
     ref: toolTipRef
@@ -230,7 +230,7 @@ function PersonalInfoComponent() {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "PersonalInfoComponent-PersonalInfo__fansinfo__attention"
   }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: require("../image/Visits.png")
+    src: require("../image/visits.png")
   }), " ", /*#__PURE__*/_react["default"].createElement("b", null, fansNum), "\u4EBA\u5173\u6CE8"), /*#__PURE__*/_react["default"].createElement("span", {
     className: "PersonalInfoComponent-PersonalInfo__fansinfo__like"
   }, /*#__PURE__*/_react["default"].createElement("img", {

package/lib/components/img-viewer/icon/enlarge.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "18px",
+    height: "18px",
+    viewBox: "0 0 18 18"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    id: "APPgengduo",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 Z M9,1.4 C4.8026359,1.4 1.4,4.8026359 1.4,9 C1.4,13.1973641 4.8026359,16.6 9,16.6 C13.1973641,16.6 16.6,13.1973641 16.6,9 C16.6,4.8026359 13.1973641,1.4 9,1.4 Z M9,5 C9.38659932,5 9.7,5.31340068 9.7,5.7 L9.7,8.3 L12.3,8.3 C12.6865993,8.3 13,8.61340068 13,9 C13,9.38659932 12.6865993,9.7 12.3,9.7 L9.7,9.7 L9.7,12.3 C9.7,12.6865993 9.38659932,13 9,13 C8.61340068,13 8.3,12.6865993 8.3,12.3 L8.3,9.7 L5.7,9.7 C5.31340068,9.7 5,9.38659932 5,9 C5,8.61340068 5.31340068,8.3 5.7,8.3 L8.3,8.3 L8.3,5.7 C8.3,5.31340068 8.61340068,5 9,5 Z",
+    fill: "currentColor",
+    "fill-rule": "nonzero"
+  })));
+};
+
+exports["default"] = _default;

package/lib/components/img-viewer/icon/left-rotate.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "18px",
+    height: "18px",
+    viewBox: "0 0 18 18"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    id: "xuanzhan-ni",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    id: "\u77E9\u5F62",
+    fill: "#000000",
+    opacity: "0",
+    x: "0",
+    y: "0",
+    width: "18",
+    height: "18"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M15.9866683,5.44069564 C17.0912378,5.44069564 17.9866683,6.33612614 17.9866683,7.44069564 L17.9866683,15.3872174 C17.9866683,16.4917869 17.0912378,17.3872174 15.9866683,17.3872174 L5.19536392,17.3872174 C4.09079442,17.3872174 3.19536392,16.4917869 3.19536392,15.3872174 L3.19536392,7.44069564 C3.19536392,6.33612614 4.09079442,5.44069564 5.19536392,5.44069564 L15.9866683,5.44069564 Z M15.9866683,6.84069564 L5.19536392,6.84069564 C4.89713016,6.84069564 4.64971717,7.05828526 4.60321691,7.34337253 L4.59536392,7.44069564 L4.59536392,15.3872174 C4.59536392,15.6854512 4.81295353,15.9328641 5.0980408,15.9793644 L5.19536392,15.9872174 L15.9866683,15.9872174 C16.284902,15.9872174 16.532315,15.7696278 16.5788153,15.4845405 L16.5866683,15.3872174 L16.5866683,7.44069564 C16.5866683,7.14246188 16.3690786,6.89504889 16.0839914,6.84854863 L15.9866683,6.84069564 Z",
+    id: "\u8DEF\u5F84",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M9.39323348,1.18095652 C9.57194871,1.18896141 9.74286623,1.25644698 9.87884218,1.37269564 L9.91797261,1.39930436 C9.93910305,1.41886956 9.9520161,1.44 9.96101608,1.45565218 C9.98253782,1.47365218 10.020103,1.52608697 10.0549291,1.58947826 C10.0846683,1.64269564 10.1077552,1.7021739 10.1265378,1.77339131 C10.1785546,1.97564758 10.146065,2.1903618 10.0365378,2.36817392 C10.0242234,2.39020742 10.0106351,2.4115044 9.99584218,2.43195652 C9.98341528,2.45870356 9.96676797,2.48327816 9.94653782,2.50473913 L8.48066498,4.05831999 C8.19044727,4.36590239 7.70619862,4.38104544 7.3973298,4.0921972 C7.0967167,3.81106957 7.06509502,3.34518596 7.32497982,3.02602946 C7.48131917,2.83401343 7.55062013,2.71605909 7.53288269,2.67216644 C4.05222321,3.26455307 2.08014652,5.19691305 1.54992913,7.77326087 C1.46131722,8.19573767 1.04834146,8.46750123 0.625276951,8.38173913 C0.202435134,8.29387903 -0.0697751816,7.88066517 0.0164073867,7.45747826 C0.858103049,3.37304348 4.36732044,1.02834782 9.39323348,1.18095652 Z",
+    id: "\u8DEF\u5F84",
+    fill: "currentColor"
+  })))));
+};
+
+exports["default"] = _default;

package/lib/components/img-viewer/icon/right-rotate.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "18px",
+    height: "18px",
+    viewBox: "0 0 18 18"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    id: "xuanzhan-sh",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    "fill-rule": "nonzero"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    id: "\u77E9\u5F62",
+    fill: "#000000",
+    opacity: "0",
+    x: "0",
+    y: "0",
+    width: "18",
+    height: "18"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M15.9866683,5.44069564 C17.0912378,5.44069564 17.9866683,6.33612614 17.9866683,7.44069564 L17.9866683,15.3872174 C17.9866683,16.4917869 17.0912378,17.3872174 15.9866683,17.3872174 L5.19536392,17.3872174 C4.09079442,17.3872174 3.19536392,16.4917869 3.19536392,15.3872174 L3.19536392,7.44069564 C3.19536392,6.33612614 4.09079442,5.44069564 5.19536392,5.44069564 L15.9866683,5.44069564 Z M15.9866683,6.84069564 L5.19536392,6.84069564 C4.89713016,6.84069564 4.64971717,7.05828526 4.60321691,7.34337253 L4.59536392,7.44069564 L4.59536392,15.3872174 C4.59536392,15.6854512 4.81295353,15.9328641 5.0980408,15.9793644 L5.19536392,15.9872174 L15.9866683,15.9872174 C16.284902,15.9872174 16.532315,15.7696278 16.5788153,15.4845405 L16.5866683,15.3872174 L16.5866683,7.44069564 C16.5866683,7.14246188 16.3690786,6.89504889 16.0839914,6.84854863 L15.9866683,6.84069564 Z",
+    id: "\u8DEF\u5F84",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M9.39323348,1.18095652 C9.57194871,1.18896141 9.74286623,1.25644698 9.87884218,1.37269564 L9.91797261,1.39930436 C9.93910305,1.41886956 9.9520161,1.44 9.96101608,1.45565218 C9.98253782,1.47365218 10.020103,1.52608697 10.0549291,1.58947826 C10.0846683,1.64269564 10.1077552,1.7021739 10.1265378,1.77339131 C10.1785546,1.97564758 10.146065,2.1903618 10.0365378,2.36817392 C10.0242234,2.39020742 10.0106351,2.4115044 9.99584218,2.43195652 C9.98341528,2.45870356 9.96676797,2.48327816 9.94653782,2.50473913 L8.48066498,4.05831999 C8.19044727,4.36590239 7.70619862,4.38104544 7.3973298,4.0921972 C7.0967167,3.81106957 7.06509502,3.34518596 7.32497982,3.02602946 C7.48131917,2.83401343 7.55062013,2.71605909 7.53288269,2.67216644 C4.05222321,3.26455307 2.08014652,5.19691305 1.54992913,7.77326087 C1.46131722,8.19573767 1.04834146,8.46750123 0.625276951,8.38173913 C0.202435134,8.29387903 -0.0697751816,7.88066517 0.0164073867,7.45747826 C0.858103049,3.37304348 4.36732044,1.02834782 9.39323348,1.18095652 Z",
+    id: "\u8DEF\u5F84",
+    fill: "currentColor"
+  }))));
+};
+
+exports["default"] = _default;

package/lib/components/img-viewer/icon/shrink.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react["default"].createElement("svg", {
+    width: "18px",
+    height: "18px",
+    viewBox: "0 0 18 18"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    id: "weikaishi",
+    stroke: "none",
+    "stroke-width": "1",
+    fill: "none",
+    "fill-rule": "evenodd"
+  }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
+    id: "Rectangle-3",
+    x: "0",
+    y: "0",
+    width: "18",
+    height: "18"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 Z M9,1.4 C4.8026359,1.4 1.4,4.8026359 1.4,9 C1.4,13.1973641 4.8026359,16.6 9,16.6 C13.1973641,16.6 16.6,13.1973641 16.6,9 C16.6,4.8026359 13.1973641,1.4 9,1.4 Z M12.3,8.3 C12.6865993,8.3 13,8.61340068 13,9 C13,9.38659932 12.6865993,9.7 12.3,9.7 L5.7,9.7 C5.31340068,9.7 5,9.38659932 5,9 C5,8.61340068 5.31340068,8.3 5.7,8.3 L12.3,8.3 Z",
+    id: "\u5F62\u72B6\u7ED3\u5408",
+    fill: "currentColor",
+    "fill-rule": "nonzero"
+  }))));
+};
+
+exports["default"] = _default;

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

@@ -0,0 +1,155 @@
+.titaui-img-viewer {
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  user-select: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1300;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+}
+
+.titaui-img-viewer__header {
+  width: 100%;
+  height: 58px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  word-break: keep-all;
+  white-space: nowrap;
+}
+
+.titaui-img-viewer__header-file-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #141c28;
+  line-height: 26px;
+  margin-left: 20px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.titaui-img-viewer__header-download {
+  display: inline-flex;
+  align-items: center;
+  color: #141c28;
+  font-size: 16px;
+}
+
+.titaui-img-viewer__header-download:hover {
+  color: #2879ff;
+}
+
+.titaui-img-viewer__header-download::after {
+  content: "";
+  display: inline-block;
+  width: 1px;
+  height: 22px;
+  background: linear-gradient(180deg, rgba(191, 199, 213, 0) 0%, #bfc7d5 51%, rgba(191, 199, 213, 0) 100%);
+  border-radius: 1px;
+  margin-left: 20px;
+}
+
+.titaui-img-viewer__header-download-icon {
+  margin-right: 4px;
+}
+
+.titaui-img-viewer__header-close {
+  color: #141c28;
+  font-weight: 600;
+  font-size: 16px;
+  margin: 0 16px;
+  cursor: pointer;
+}
+
+.titaui-img-viewer__body {
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background: #f7f9fb;
+}
+
+.titaui-img-viewer__body-operate-btn {
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  background: #ffffff;
+  box-shadow: 0px 4px 8px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 24px;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #141c28;
+}
+
+.titaui-img-viewer__body-operate-btn:hover {
+  cursor: pointer;
+  color: #2879ff;
+}
+
+.titaui-img-viewer__body-operate-btn--left {
+  left: 60px;
+}
+
+.titaui-img-viewer__body-operate-btn--right {
+  right: 60px;
+}
+
+.titaui-img-viewer__body-operate-btn--disable {
+  color: #BFC7D5;
+}
+
+.titaui-img-viewer__body-operate-btn--disable:hover {
+  cursor: not-allowed;
+  color: #BFC7D5;
+}
+
+.titaui-img-viewer__body--loading {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f7f9fb;
+}
+
+.titaui-img-viewer__footer {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 24px;
+  width: 216px;
+  height: 48px;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.titaui-img-viewer__footer-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  color: #141c28;
+}
+
+.titaui-img-viewer__footer-btn:hover {
+  cursor: pointer;
+  color: #2879ff;
+}