linkmore-design 1.1.9 → 1.1.11

package/lib/FullScreen/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/Grid/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/Icon/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/Image/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/ImageViewer/components/Operate.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _linkmoreDesign = require("linkmore-design");
 
+var _icons = require("@ant-design/icons");
+
 var Operate = function Operate(_ref) {
   var instance = _ref.instance;
   var setTransform = instance.setTransform;
@@ -29,10 +31,12 @@ var Operate = function Operate(_ref) {
     onClick: function onClick(e) {
       return handleTranform(e, 'zoomIn');
     }
-  }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
-    type: "lmweb-a-icon_m_search1",
+  }), /*#__PURE__*/_react.default.createElement(_icons.ZoomOutOutlined, {
     onClick: function onClick(e) {
       return handleTranform(e, 'zoomOut');
+    },
+    style: {
+      fontSize: 22
     }
   }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: "lmweb-undo",

package/lib/Input/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/InputNumber/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/Layout/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/LeftTable/index.js

@@ -160,7 +160,9 @@ var LeftSide = function LeftSide(props) {
     className: useToggle ? "lm_grid_tree ".concat(modeTypeCls) : "lm_grid_tree grid_toggle ".concat(modeTypeCls)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "grid_tree_title",
-    onClick: onHeaderClick
+    onClick: function onClick(e) {
+      onHeaderClick && onHeaderClick(e);
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "grid_tree_title_left"
   }, /*#__PURE__*/_react.default.createElement("span", null, useTree.title)), treeType && /*#__PURE__*/_react.default.createElement(_Popover.default, {

package/lib/LeftTable/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/List/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/LmEditTable/EditTable.js

@@ -29,6 +29,8 @@ var _lodash = require("lodash");
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _ahooks = require("ahooks");
+
 var _immer = require("immer");
 
 var _DndContainer = _interopRequireDefault(require("./DndContainer"));
@@ -273,7 +275,8 @@ var Opetate = function Opetate(_ref) {
     style: {
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'flex-start',
+      marginLeft: '-4px'
     }
   }, options.includes('delete') && /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Button, {
     type: "link",
@@ -715,35 +718,39 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       recordCreatorProps = props.recordCreatorProps,
       _props$shouldUpdate = props.shouldUpdate,
       shouldUpdate = _props$shouldUpdate === void 0 ? false : _props$shouldUpdate,
-      resetProps = __rest(props, ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "quickOpetateClearAll", "rowSelection", "sortOpen", "colSortOpen", "filterChange", "size", "recordCreatorProps", "shouldUpdate"]);
+      resetProps = __rest(props, ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "quickOpetateClearAll", "rowSelection", "sortOpen", "colSortOpen", "filterChange", "size", "recordCreatorProps", "shouldUpdate"]); // const [dataSource, setDataSource] = useState([]);
 
-  var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      dataSource = _useState6[0],
-      setDataSource = _useState6[1]; // const [count, setCount] = useState(0);
+
+  var _useControllableValue = (0, _ahooks.useControllableValue)({
+    value: (0, _util.checkRowKeyByDataSource)(props.value, _rowKey),
+    onChange: props.onChange
+  }),
+      _useControllableValue2 = (0, _slicedToArray2.default)(_useControllableValue, 2),
+      dataSource = _useControllableValue2[0],
+      setDataSource = _useControllableValue2[1]; // const [count, setCount] = useState(0);
 
 
-  var _useState7 = (0, _react.useState)({}),
+  var _useState5 = (0, _react.useState)({}),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      _valid = _useState6[0],
+      setValid = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([]),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      _valid = _useState8[0],
-      setValid = _useState8[1];
+      localRowSelectList = _useState8[0],
+      setLocalRowSelectList = _useState8[1];
 
   var _useState9 = (0, _react.useState)([]),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      localRowSelectList = _useState10[0],
-      setLocalRowSelectList = _useState10[1];
-
-  var _useState11 = (0, _react.useState)([]),
-      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      sortEditTable = _useState12[0],
-      setCallBackFalg = _useState12[1];
+      sortEditTable = _useState10[0],
+      setCallBackFalg = _useState10[1];
   /** 当前展开的列 */
 
 
-  var _useState13 = (0, _react.useState)([]),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      expandedRowKeys = _useState14[0],
-      setExpandedRowKeys = _useState14[1];
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      expandedRowKeys = _useState12[0],
+      setExpandedRowKeys = _useState12[1];
 
   var dataSourceRef = (0, _react.useRef)([]);
   var sortDataSorceRef = (0, _react.useRef)([]);
@@ -757,12 +764,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var newIndex = cloneArr.findIndex(function (v) {
       return v[_rowKey] === over;
     });
-
-    if (onChange) {
-      onChange === null || onChange === void 0 ? void 0 : onChange((0, _sortable.arrayMove)(cloneArr, oldIndex, newIndex));
-    } else {
-      setDataSource((0, _sortable.arrayMove)(cloneArr, oldIndex, newIndex));
-    }
+    setDataSource((0, _sortable.arrayMove)(cloneArr, oldIndex, newIndex));
   };
 
   var onColSortEnd = function onColSortEnd(active, over) {
@@ -785,8 +787,9 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var handleDelete = function handleDelete(key) {
     var nValue = dataSource.filter(function (item) {
       return item[_rowKey] !== key;
-    });
-    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+    }); // onChange?.(nValue)
+
+    setDataSource(nValue);
   };
   /** 点击添加按钮添加 */
 
@@ -798,14 +801,14 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var res = (0, _immer.produce)(dataSourceRef.current, function (draft) {
       draft.push(Object.assign((0, _defineProperty2.default)({}, _rowKey, "".concat(Date.now())), addDataInfo || {}));
     });
-    setDataSource(res);
-    onChange === null || onChange === void 0 ? void 0 : onChange(res);
+    setDataSource(res); // onChange?.(res)
   };
 
   (0, _react.useEffect)(function () {
     var _a;
 
     dataSourceRef.current = dataSource;
+    deepDataSourceRef.current = (0, _util.deepDataSourcePreKeys)(dataSource, _rowKey);
 
     if (sortOpen) {
       var dataSourceKeys = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
@@ -910,12 +913,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
       }
     });
-
-    if (onChange) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(res);
-    } else {
-      setDataSource(res);
-    }
+    setDataSource(res);
   };
 
   var reWriteOriginSource = function reWriteOriginSource(rowKey, rowValue, dataIndex, nextValue) {
@@ -956,12 +954,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       };
 
       var res = filter(dataSource, key);
-
-      if (onChange) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(res);
-      } else {
-        setDataSource(res);
-      }
+      setDataSource(res);
     } else {
       if (((_c = dataSourceRef.current) === null || _c === void 0 ? void 0 : _c.length) === 1 && !quickOpetateClearAll) {
         return false;
@@ -977,11 +970,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
       });
 
-      if (onChange) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(_res);
-      } else {
-        setDataSource(_res);
-      }
+      setDataSource(_res);
     }
   };
   /** 快捷添加 */
@@ -1016,12 +1005,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }
       }
     });
-
-    if (onChange) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(res);
-    } else {
-      setDataSource(res);
-    }
+    setDataSource(res);
   };
 
   var handleCopy = function handleCopy(key, value) {
@@ -1030,12 +1014,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         return item[key] = value;
       });
     });
-
-    if (onChange) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(res);
-    } else {
-      setDataSource(res);
-    }
+    setDataSource(res);
   };
   /** 判断columne中有没有带optionOnly参数  */
 
@@ -1108,6 +1087,7 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       width: 68,
       fixed: 'right',
       editable: 'lm_edit_opetate',
+      className: 'lm_edit_opetate',
       componentProps: {
         options: Array.isArray(useQuickOpetate) ? useQuickOpetate : ['add', 'delete']
       }
@@ -1255,34 +1235,6 @@ var EditTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       components: component
     }, resetProps);
   }, [resultColumns, dataSource, sortOpen, colSortOpen, size]);
-  (0, _react.useEffect)(function () {
-    // setDataSource(defaultData?.map((v, idx) => ({ ...v, [rowKey]: v[rowKey] || `v${idx + 1}` })))
-    var addRowKey = function addRowKey(children, pkey) {
-      return children === null || children === void 0 ? void 0 : children.map(function (item, index) {
-        if (item.children) {
-          var _Object$assign5;
-
-          var rchildren = addRowKey(item.children, "".concat(pkey, "_").concat(index + 1));
-          return Object.assign(Object.assign({}, item), (_Object$assign5 = {}, (0, _defineProperty2.default)(_Object$assign5, _rowKey, item[_rowKey] || "".concat(pkey, "_").concat(index + 1)), (0, _defineProperty2.default)(_Object$assign5, "children", rchildren), _Object$assign5));
-        }
-
-        return Object.assign(Object.assign({}, item), (0, _defineProperty2.default)({}, _rowKey, item[_rowKey] || "".concat(pkey, "_").concat(index + 1)));
-      });
-    };
-
-    var res = defaultData === null || defaultData === void 0 ? void 0 : defaultData.map(function (v, idx) {
-      if (v.children) {
-        var _Object$assign7;
-
-        var rchildren = addRowKey(v.children, v[_rowKey] || "v".concat(idx + 1));
-        return Object.assign(Object.assign({}, v), (_Object$assign7 = {}, (0, _defineProperty2.default)(_Object$assign7, _rowKey, v[_rowKey] || "v".concat(idx + 1)), (0, _defineProperty2.default)(_Object$assign7, "children", rchildren), _Object$assign7));
-      }
-
-      return Object.assign(Object.assign({}, v), (0, _defineProperty2.default)({}, _rowKey, v[_rowKey] || "v".concat(idx + 1)));
-    });
-    deepDataSourceRef.current = (0, _util.deepDataSourcePreKeys)(res, _rowKey);
-    setDataSource(res);
-  }, [defaultData]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       setRow: handleSave,

package/lib/LmEditTable/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;
@@ -579,6 +580,10 @@ p {
 .lm_editTable_warpper .ant-table .ant-table-tbody > .ant-table-measure-row > td {
   padding: 0 !important;
 }
+.lm_editTable_warpper .lm_edit_opetate {
+  padding-left: 8px;
+  padding-right: 8px;
+}
 .lm_editTable_warpper .ant-picker {
   height: 24px !important;
   padding: 2px 8px;

package/lib/LmEditTable/style/variables.css

@@ -68,6 +68,10 @@
 .lm_editTable_warpper .ant-table .ant-table-tbody > .ant-table-measure-row > td {
   padding: 0 !important;
 }
+.lm_editTable_warpper .lm_edit_opetate {
+  padding-left: 8px;
+  padding-right: 8px;
+}
 .lm_editTable_warpper .ant-picker {
   height: 24px !important;
   padding: 2px 8px;

package/lib/LmEditTable/util.d.ts

@@ -1,6 +1,7 @@
 export declare function isObjEmpty(obj: Record<string, any>): boolean;
 export declare function deepDataSourcePreKeys(dataSource: any[], rowKey: string): any;
 export declare function isExpandRow(children: any): boolean;
+export declare function checkRowKeyByDataSource(dataSource: any, rowKey: any): any;
 declare const _default: {
     isObjEmpty: typeof isObjEmpty;
 };

package/lib/LmEditTable/util.js

@@ -5,11 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.checkRowKeyByDataSource = checkRowKeyByDataSource;
 exports.deepDataSourcePreKeys = deepDataSourcePreKeys;
 exports.default = void 0;
 exports.isExpandRow = isExpandRow;
 exports.isObjEmpty = isObjEmpty;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _lodash = require("lodash");
@@ -45,6 +48,33 @@ function isExpandRow(children) {
   return ['Collapse row', 'Expand row'].includes((_e = (_d = (_c = (_b = (_a = children === null || children === void 0 ? void 0 : children[0]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e['aria-label']);
 }
 
+function checkRowKeyByDataSource(dataSource, rowKey) {
+  var addRowKey = function addRowKey(children, pkey) {
+    return children === null || children === void 0 ? void 0 : children.map(function (item, index) {
+      if (item.children) {
+        var _Object$assign;
+
+        var rchildren = addRowKey(item.children, "".concat(pkey, "_").concat(index + 1));
+        return Object.assign(Object.assign({}, item), (_Object$assign = {}, (0, _defineProperty2.default)(_Object$assign, rowKey, item[rowKey] || "".concat(pkey, "_").concat(index + 1)), (0, _defineProperty2.default)(_Object$assign, "children", rchildren), _Object$assign));
+      }
+
+      return Object.assign(Object.assign({}, item), (0, _defineProperty2.default)({}, rowKey, item[rowKey] || "".concat(pkey, "_").concat(index + 1)));
+    });
+  };
+
+  var res = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (v, idx) {
+    if (v.children) {
+      var _Object$assign3;
+
+      var rchildren = addRowKey(v.children, v[rowKey] || "v".concat(idx + 1));
+      return Object.assign(Object.assign({}, v), (_Object$assign3 = {}, (0, _defineProperty2.default)(_Object$assign3, rowKey, v[rowKey] || "v".concat(idx + 1)), (0, _defineProperty2.default)(_Object$assign3, "children", rchildren), _Object$assign3));
+    }
+
+    return Object.assign(Object.assign({}, v), (0, _defineProperty2.default)({}, rowKey, v[rowKey] || "v".concat(idx + 1)));
+  });
+  return res;
+}
+
 var _default = {
   isObjEmpty: isObjEmpty
 };

package/lib/LmSelect/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;

package/lib/LmTable/Table.js

@@ -31,8 +31,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactResizable = require("react-resizable");
 
-var _ahooks = require("ahooks");
-
 var _immer = require("immer");
 
 var _reactSortableHoc = require("react-sortable-hoc");
@@ -391,8 +389,14 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var handleResize = function handleResize(index) {
     return function (e, _ref2) {
       var size = _ref2.size;
+      var i = index;
       var nextColumns = (0, _toConsumableArray2.default)(useColumns);
-      nextColumns[index] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, nextColumns[index]), {}, {
+      nextColumns.forEach(function (item, index) {
+        if (index <= i && item.show === false) {
+          i += 1;
+        }
+      });
+      nextColumns[i] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, nextColumns[i]), {}, {
         width: size.width
       });
       setColumns(nextColumns);
@@ -996,7 +1000,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     var colIndex = 0;
 
     var traverseColumns = function traverseColumns(columns) {
-      columns === null || columns === void 0 ? void 0 : columns.forEach(function (col) {
+      columns === null || columns === void 0 ? void 0 : columns.forEach(function (col, index) {
         if (col.show === false) {
           return;
         }
@@ -1011,7 +1015,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           col.onHeaderCell = function (column) {
             return resizeable ? {
               width: column.width,
-              onResize: handleResize(col.$_colIndex),
+              onResize: handleResize(index),
               onResizeStop: endResize
             } : {
               width: column.width

package/lib/LmTable/style/index.css

@@ -198,6 +198,7 @@
   --font-size-base: 14px;
   --font-size-lg: calc(var(--font-size-base) + 2px);
   --font-size-sm: 12px;
+  --border-radius: 2px;
   --color-contrast: #fff;
   --color-100: #000;
   --color-85: #262626;
@@ -1237,6 +1238,9 @@ p {
   height: 48px;
   font-size: 12px;
 }
+#lm_protable_warp .ant-table-tbody > tr > .ant-table-selection-column {
+  text-align: left;
+}
 #lm_protable_warp .ant-table-tbody > tr.ant-table-measure-row > td {
   padding: 0 !important;
 }

package/lib/LmTable/style/variables.css

@@ -726,6 +726,9 @@
   height: 48px;
   font-size: 12px;
 }
+#lm_protable_warp .ant-table-tbody > tr > .ant-table-selection-column {
+  text-align: left;
+}
 #lm_protable_warp .ant-table-tbody > tr.ant-table-measure-row > td {
   padding: 0 !important;
 }

package/lib/LmUpload/style/index.css

@@ -1,3 +1,121 @@
+.lm_image_viewer_wrapper {
+  position: fixed;
+  z-index: 1001;
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_mask {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-flow: column;
+  gap: var(--gap);
+  align-items: center;
+  height: 100vh;
+  padding: 50px 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list {
+  flex: 1;
+  width: 51%;
+  max-height: 100%;
+  overflow: hidden;
+  touch-action: none;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list div {
+  height: 100%;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list .preview_item {
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list .preview_item img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list {
+  display: flex;
+  gap: var(--gap);
+  width: 51%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 98px;
+  height: 98px;
+  text-align: center;
+  background-color: var(--color-contrast);
+  border: 2px solid transparent;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item .thumb_item_icon {
+  color: var(--color-45);
+  font-size: 34px;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item img {
+  display: inline-block;
+  width: 94px;
+  height: 94px;
+  object-fit: cover;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item.active {
+  border-color: var(--primary-color);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action {
+  position: absolute;
+  bottom: 50px;
+  left: 50%;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 24px;
+  background-color: #fff;
+  border-radius: 100px;
+  transform: translateX(-50%);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon {
+  cursor: pointer;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon:hover {
+  color: var(--primary-color);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--color-contrast);
+  font-size: 32px;
+  background-color: var(--text-color);
+  transform: translateY(-50%);
+  cursor: pointer;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow.arrow_left {
+  left: 40px;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow.arrow_right {
+  right: 40px;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow:hover {
+  color: var(--primary-color);
+}
 .lm_upload_wrapper {
   display: flex;
   flex-wrap: wrap;