linkmore-design 1.1.9 → 1.1.11

package/es/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/es/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/es/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/es/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/es/ImageViewer/components/Operate.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IconFont } from 'linkmore-design';
+import { ZoomOutOutlined } from '@ant-design/icons';
 
 var Operate = function Operate(_ref) {
   var instance = _ref.instance;
@@ -19,10 +20,12 @@ var Operate = function Operate(_ref) {
     onClick: function onClick(e) {
       return handleTranform(e, 'zoomIn');
     }
-  }), /*#__PURE__*/React.createElement(IconFont, {
-    type: "lmweb-a-icon_m_search1",
+  }), /*#__PURE__*/React.createElement(ZoomOutOutlined, {
     onClick: function onClick(e) {
       return handleTranform(e, 'zoomOut');
+    },
+    style: {
+      fontSize: 22
     }
   }), /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-undo",

package/es/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/es/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/es/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/es/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/es/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/es/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/es/LmEditTable/EditTable.js

@@ -56,6 +56,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import { Button, Checkbox, IconFont, Input, InputNumber, Radio, Select, Table, Switch, DatePicker, Form } from 'linkmore-design';
 import { get, set, isFunction, omit } from 'lodash';
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, memo, useCallback } from 'react';
+import { useControllableValue } from 'ahooks';
 import { produce } from 'immer';
 import DndContainer from './DndContainer';
 import SortableBox from './sortableBox';
@@ -64,7 +65,7 @@ import SortableItem from './sortableItem';
 import ColSortableItem from './sortableItemCol';
 import DragHandle from './DragHandle';
 import UploadOss from '../UploadOss';
-import { isObjEmpty, deepDataSourcePreKeys, isExpandRow } from './util';
+import { isObjEmpty, deepDataSourcePreKeys, isExpandRow, checkRowKeyByDataSource } from './util';
 import cls from "classnames";
 var UploadBtn = UploadOss.UploadBtn;
 var EditableContext = /*#__PURE__*/React.createContext(null); // 表格行
@@ -241,7 +242,8 @@ var Opetate = function Opetate(_ref) {
     style: {
       display: 'flex',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'flex-start',
+      marginLeft: '-4px'
     }
   }, options.includes('delete') && /*#__PURE__*/React.createElement(Button, {
     type: "link",
@@ -683,35 +685,39 @@ var EditTable = /*#__PURE__*/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 _useControllableValue = useControllableValue({
+    value: checkRowKeyByDataSource(props.value, _rowKey),
+    onChange: props.onChange
+  }),
+      _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+      dataSource = _useControllableValue2[0],
+      setDataSource = _useControllableValue2[1]; // const [count, setCount] = useState(0);
 
-  var _useState5 = useState([]),
-      _useState6 = _slicedToArray(_useState5, 2),
-      dataSource = _useState6[0],
-      setDataSource = _useState6[1]; // const [count, setCount] = useState(0);
 
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      _valid = _useState6[0],
+      setValid = _useState6[1];
 
-  var _useState7 = useState({}),
+  var _useState7 = useState([]),
       _useState8 = _slicedToArray(_useState7, 2),
-      _valid = _useState8[0],
-      setValid = _useState8[1];
+      localRowSelectList = _useState8[0],
+      setLocalRowSelectList = _useState8[1];
 
   var _useState9 = useState([]),
       _useState10 = _slicedToArray(_useState9, 2),
-      localRowSelectList = _useState10[0],
-      setLocalRowSelectList = _useState10[1];
-
-  var _useState11 = useState([]),
-      _useState12 = _slicedToArray(_useState11, 2),
-      sortEditTable = _useState12[0],
-      setCallBackFalg = _useState12[1];
+      sortEditTable = _useState10[0],
+      setCallBackFalg = _useState10[1];
   /** 当前展开的列 */
 
 
-  var _useState13 = useState([]),
-      _useState14 = _slicedToArray(_useState13, 2),
-      expandedRowKeys = _useState14[0],
-      setExpandedRowKeys = _useState14[1];
+  var _useState11 = useState([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      expandedRowKeys = _useState12[0],
+      setExpandedRowKeys = _useState12[1];
 
   var dataSourceRef = useRef([]);
   var sortDataSorceRef = useRef([]);
@@ -726,12 +732,7 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
     var newIndex = cloneArr.findIndex(function (v) {
       return v[_rowKey] === over;
     });
-
-    if (onChange) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(arrayMove(cloneArr, oldIndex, newIndex));
-    } else {
-      setDataSource(arrayMove(cloneArr, oldIndex, newIndex));
-    }
+    setDataSource(arrayMove(cloneArr, oldIndex, newIndex));
   };
 
   var onColSortEnd = function onColSortEnd(active, over) {
@@ -754,8 +755,9 @@ var EditTable = /*#__PURE__*/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);
   };
   /** 点击添加按钮添加 */
 
@@ -767,14 +769,14 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
     var res = produce(dataSourceRef.current, function (draft) {
       draft.push(Object.assign(_defineProperty({}, _rowKey, "".concat(Date.now())), addDataInfo || {}));
     });
-    setDataSource(res);
-    onChange === null || onChange === void 0 ? void 0 : onChange(res);
+    setDataSource(res); // onChange?.(res)
   };
 
   useEffect(function () {
     var _a;
 
     dataSourceRef.current = dataSource;
+    deepDataSourceRef.current = deepDataSourcePreKeys(dataSource, _rowKey);
 
     if (sortOpen) {
       var dataSourceKeys = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
@@ -879,12 +881,7 @@ var EditTable = /*#__PURE__*/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) {
@@ -925,12 +922,7 @@ var EditTable = /*#__PURE__*/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;
@@ -946,11 +938,7 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       });
 
-      if (onChange) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(_res);
-      } else {
-        setDataSource(_res);
-      }
+      setDataSource(_res);
     }
   };
   /** 快捷添加 */
@@ -985,12 +973,7 @@ var EditTable = /*#__PURE__*/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) {
@@ -999,12 +982,7 @@ var EditTable = /*#__PURE__*/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参数  */
 
@@ -1077,6 +1055,7 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       width: 68,
       fixed: 'right',
       editable: 'lm_edit_opetate',
+      className: 'lm_edit_opetate',
       componentProps: {
         options: Array.isArray(useQuickOpetate) ? useQuickOpetate : ['add', 'delete']
       }
@@ -1224,34 +1203,6 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       components: component
     }, resetProps);
   }, [resultColumns, dataSource, sortOpen, colSortOpen, size]);
-  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 = {}, _defineProperty(_Object$assign5, _rowKey, item[_rowKey] || "".concat(pkey, "_").concat(index + 1)), _defineProperty(_Object$assign5, "children", rchildren), _Object$assign5));
-        }
-
-        return Object.assign(Object.assign({}, item), _defineProperty({}, _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 = {}, _defineProperty(_Object$assign7, _rowKey, v[_rowKey] || "v".concat(idx + 1)), _defineProperty(_Object$assign7, "children", rchildren), _Object$assign7));
-      }
-
-      return Object.assign(Object.assign({}, v), _defineProperty({}, _rowKey, v[_rowKey] || "v".concat(idx + 1)));
-    });
-    deepDataSourceRef.current = deepDataSourcePreKeys(res, _rowKey);
-    setDataSource(res);
-  }, [defaultData]);
   useImperativeHandle(ref, function () {
     return {
       setRow: handleSave,

package/es/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/es/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/es/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/es/LmEditTable/util.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { keyBy } from 'lodash';
 export function isObjEmpty(obj) {
@@ -28,6 +29,32 @@ export 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']);
 }
+export 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 = {}, _defineProperty(_Object$assign, rowKey, item[rowKey] || "".concat(pkey, "_").concat(index + 1)), _defineProperty(_Object$assign, "children", rchildren), _Object$assign));
+      }
+
+      return Object.assign(Object.assign({}, item), _defineProperty({}, 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 = {}, _defineProperty(_Object$assign3, rowKey, v[rowKey] || "v".concat(idx + 1)), _defineProperty(_Object$assign3, "children", rchildren), _Object$assign3));
+    }
+
+    return Object.assign(Object.assign({}, v), _defineProperty({}, rowKey, v[rowKey] || "v".concat(idx + 1)));
+  });
+  return res;
+}
 export default {
   isObjEmpty: isObjEmpty
 };

package/es/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/es/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/es/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/es/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/es/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;