@fonixtree/magic-design 0.0.17 → 0.0.18

package/dist/src/components/core/Designer/CompListPanel/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_list_panel__Ik0VD {\n  position: fixed;\n  left: -354px;\n  top: 0;\n  bottom: 0;\n  width: 354px;\n  background: #FFFFFF;\n  box-shadow: inset -1px 0px 0px #EDF0F4;\n  transition: all 0.3s ease;\n  z-index: 200;\n}\n.index_list_panel__Ik0VD .index_header__cvSCP {\n  height: 80px;\n  display: flex;\n  padding: 16px 24px;\n}\n.index_list_panel__Ik0VD .index_title__bRU59 {\n  padding: 12px 24px;\n  font-family: 'OpenSans-Bold';\n  font-size: 26px;\n  line-height: 32px;\n  color: #232F46;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm {\n  height: calc(100vh - 136px);\n  overflow-y: auto;\n  padding: 0 24px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm::-webkit-scrollbar {\n  width: 8px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm::-webkit-scrollbar-thumb {\n  background-color: #C1C9D7;\n  background-clip: padding-box;\n  border-radius: 100px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm .index_cat-list__C15zF {\n  padding-bottom: 24px;\n}\n.index_list_panel__Ik0VD .index_component-list__08Lqm .index_cat-list__C15zF .index_cat-name__iMsCL {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  color: #8493AF;\n}\n@keyframes index_onListOpen__saD1n {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes index_onListClose__MhlFI {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n";
-styleInject(css_248z);

package/dist/src/components/core/Designer/ConfigPanel/index.js

@@ -1,246 +0,0 @@
-import { __extends } from '../../../../../my_my_node_modules/tslib/tslib.es6.js';
-import React__default, { Component } from 'react';
-import { isPc } from '../../../utils/coreUtil.js';
-import { ensure } from '../../../utils/commonUtil.js';
-import Button from '../../../common/Button/index.js';
-import { compInfoMap, deviceTypeMap } from '../../../constants/index.js';
-import { configPanelMap, secondConfigPanelMap } from '../../../constants/component-types.js';
-import { store } from '../../../mobx/index.js';
-import './index.less.js';
-import { autorun } from 'mobx';
-
-var ConfigPanel =
-/** @class */
-function (_super) {
-  __extends(ConfigPanel, _super);
-
-  function ConfigPanel() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-
-    _this.preClickedGroup = null; // 以及面板展开状态
-
-    _this.configOpen = false;
-    _this.state = {
-      selectedNode: {}
-    };
-
-    _this.animation = function (type) {
-      document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:".concat(type, ";animation-duration: 0.3s;animation-fill-mode:both"));
-    };
-
-    _this.openPcConfig = function () {
-      _this.animation('openPcConfig');
-    };
-
-    _this.closePcConfig = function () {
-      _this.animation('closePcConfig');
-    };
-
-    _this.openMobileConfig = function () {
-      _this.animation('openMobileConfig');
-    };
-
-    _this.closeMobileConfig = function () {
-      _this.animation('closeMobileConfig');
-    };
-
-    _this.openConfig = function () {
-      if (_this.configOpen) {
-        return;
-      }
-
-      if (window.magicDesign.device === 'pc') {
-        _this.openPcConfig();
-      } else {
-        _this.openMobileConfig();
-      }
-
-      _this.configOpen = true;
-    };
-
-    _this.closeConfig = function () {
-      if (!_this.configOpen) {
-        return;
-      }
-
-      if (window.magicDesign.device === 'pc') {
-        _this.closePcConfig();
-      } else {
-        _this.closeMobileConfig();
-      }
-
-      _this.configOpen = false;
-    };
-
-    _this.openSecConfig = function () {
-      var _a;
-
-      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:openSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
-    };
-
-    _this.closeSecConfig = function () {
-      var _a;
-
-      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:closeSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
-      store.setState({
-        clickedMeta: ''
-      });
-    };
-
-    _this.onDoneClick = function () {
-      var _a = _this.props,
-          device = _a.device,
-          onClose = _a.onClose;
-
-      if (device === deviceTypeMap.PC) {
-        _this.closePcConfig();
-      }
-
-      onClose();
-    };
-
-    _this.getConfigPanelInstance = function () {
-      var device = _this.props.device;
-      var selectedNode = _this.state.selectedNode;
-      var Clazz = configPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
-      var panelProps = {
-        data: selectedNode,
-        device: device
-      };
-      var instance = Clazz ? /*#__PURE__*/React__default.createElement(Clazz, panelProps) : null;
-      return instance;
-    };
-
-    _this.getSecondConfigInstance = function () {
-      var selectedNode = _this.state.selectedNode;
-      var Clazz = secondConfigPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
-      var panelProps = ensure(function () {
-        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
-          return src.id === _this.state.clickedGroup;
-        });
-      }, null);
-
-      if (panelProps) {
-        var instance = Clazz ? /*#__PURE__*/React__default.createElement(Clazz, {
-          panelProps: panelProps
-        }) : null;
-        return instance;
-      }
-
-      return null;
-    };
-
-    _this.getSecondConfigName = function () {
-      var _a, _b, _c, _d, _e;
-
-      var selectedNode = _this.state.selectedNode;
-
-      if (!selectedNode || !selectedNode.groupSource) {
-        return;
-      }
-
-      var panelProps = selectedNode.groupSource.find(function (src) {
-        return src.id === _this.state.clickedGroup;
-      });
-
-      if (!panelProps) {
-        return;
-      }
-
-      var groupName = '';
-
-      switch (selectedNode.type) {
-        case 'BANNER':
-          groupName = (_a = panelProps.title) === null || _a === void 0 ? void 0 : _a.text;
-
-          if (!groupName) {
-            groupName = isPc() ? (_c = (_b = panelProps.image) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcName : (_e = (_d = panelProps.image) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.h5Name;
-          }
-
-          break;
-
-        case 'RECOMMEND':
-          groupName = panelProps.groupName.text;
-      }
-
-      return groupName || 'Group Name';
-    };
-
-    _this.onSecConfigBack = function () {
-      store.setState({
-        clickedGroup: null
-      });
-    };
-
-    return _this;
-  }
-
-  ConfigPanel.prototype.componentDidMount = function () {
-    var _this = this;
-
-    this.distroy = autorun(function () {
-      var selectedNode = store.getFloorInfo();
-
-      _this.setState({
-        clickedGroup: store.clickedGroup,
-        selectedNode: selectedNode
-      }); // 展开以及面板
-
-
-      if (selectedNode) {
-        _this.openConfig();
-      } else {
-        _this.closeConfig();
-      } // 展开首期二级面板
-
-
-      if (!store.clickedGroup) {
-        _this.closeSecConfig();
-      } else if (store.clickedGroup !== _this.preClickedGroup) {
-        _this.openSecConfig();
-      }
-
-      _this.preClickedGroup = store.clickedGroup;
-    });
-  };
-
-  ConfigPanel.prototype.componentWillUnmount = function () {
-    this.distroy();
-  };
-
-  ConfigPanel.prototype.render = function () {
-    var _a, _b;
-
-    var device = this.props.device;
-    var selectedNode = this.state.selectedNode;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "config_wrap"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "first_config_wrap"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "config_header"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "title",
-      title: (_a = compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _a === void 0 ? void 0 : _a.name
-    }, (_b = compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), device === deviceTypeMap.PC && /*#__PURE__*/React__default.createElement(Button, {
-      onClick: this.onDoneClick,
-      type: "light"
-    }, "Done")), this.getConfigPanelInstance()), /*#__PURE__*/React__default.createElement("div", {
-      className: "sec_config_wrap"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "config_header"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "button_wrap"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      icon: "icon-left",
-      onClick: this.onSecConfigBack,
-      type: "icon"
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "title"
-    }, this.getSecondConfigName())), this.getSecondConfigInstance()));
-  };
-
-  return ConfigPanel;
-}(Component);
-
-export { ConfigPanel as default };

package/dist/src/components/core/Designer/ConfigPanel/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_config_wrap__ZFRcU {\n  width: 354px;\n  background: #ffffff;\n  height: 100vh;\n  overflow: scroll;\n  transition-property: transform;\n  transition-duration: 0.3s;\n  transition-timing-function: ease;\n  left: -354px;\n  z-index: 200;\n  position: absolute;\n  flex-shrink: 0;\n}\n.index_config_wrap__ZFRcU.index_show_config__vn9GX {\n  position: fixed;\n  transform: translateX(354px);\n}\n.index_config_wrap__ZFRcU .index_first_config_wrap__bNQvD {\n  height: 100%;\n  padding: 24px;\n}\n.index_config_wrap__ZFRcU .index_first_config_wrap__bNQvD .index_config_header__t6JNr {\n  font-size: 26px;\n  line-height: 36px;\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n}\n.index_config_wrap__ZFRcU .index_first_config_wrap__bNQvD .index_config_header__t6JNr .index_title__kHwtD {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 32px;\n  color: #232F46;\n}\n.index_config_wrap__ZFRcU .index_sec_config_wrap__Jb4MT {\n  position: absolute;\n  width: 354px;\n  left: -354px;\n  bottom: 0;\n  top: 0;\n  background-color: #FFF;\n  padding: 24px;\n}\n.index_config_wrap__ZFRcU .index_sec_config_wrap__Jb4MT .index_config_header__t6JNr .index_button_wrap__6Lv2T {\n  display: flex;\n}\n.index_config_wrap__ZFRcU .index_sec_config_wrap__Jb4MT .index_config_header__t6JNr .index_title__kHwtD {\n  margin-top: 20px;\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 32px;\n  color: #232F46;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n@keyframes index_openPcConfig__7z4O4 {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes index_closePcConfig__-h55I {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n@keyframes index_openMobileConfig__amVYY {\n  from {\n    left: 0px;\n    z-index: 50;\n  }\n  to {\n    left: 355px;\n    z-index: 50;\n  }\n}\n@keyframes index_closeMobileConfig__FMac7 {\n  from {\n    left: 355px;\n    z-index: 50;\n  }\n  to {\n    left: 0px;\n    z-index: 50;\n  }\n}\n@keyframes index_openSecConfig__vl7hj {\n  from {\n    left: -354px;\n  }\n  to {\n    left: 0px;\n  }\n}\n@keyframes index_closeSecConfig__W2NxA {\n  from {\n    left: 0px;\n  }\n  to {\n    left: -354px;\n  }\n}\n";
-styleInject(css_248z);

package/dist/src/components/core/Designer/History/index.js

@@ -1,82 +0,0 @@
-import cloneDeep_1 from '../../../../../my_my_node_modules/lodash/cloneDeep.js';
-
-/**
- * 历史队列，使用数组存放
- * 有新的操作时存入数组的0位置，游标设置为0
- *
- */
-
-var debug = require('debug')('worker:History');
-
-var History =
-/** @class */
-function () {
-  function History(hist) {
-    var _this = this;
-    /**
-     * 游标位置
-     */
-
-
-    this.cursor = 0;
-    /**
-     * 历史数据
-     */
-
-    this.list = [];
-
-    this.redoAble = function () {
-      return _this.cursor !== 0;
-    };
-
-    this.undoAble = function () {
-      return _this.cursor !== _this.list.length - 1;
-    };
-    /**
-     * 清空0～cursor之间的数据，将data插入 位置0
-     */
-
-
-    this.push = function (data) {
-      debug('push data', data);
-      var cloneData = cloneDeep_1(data);
-
-      _this.list.splice(0, _this.cursor, cloneData);
-
-      return data;
-    };
-    /**
-     * redu操作只修改当前游标-1
-     * 并且返回后一步的json对象
-     */
-
-
-    this.redo = function () {
-      debug('redo click');
-      var newCursor = _this.cursor - 1;
-      _this.cursor = newCursor;
-      var newData = _this.list[newCursor];
-      return newData;
-    };
-    /**
-     * undo操作只修改当前的游标+1
-     * 并且返回前一步的json对象
-     */
-
-
-    this.undo = function () {
-      debug('undo click');
-      var newCursor = _this.cursor + 1;
-      _this.cursor = newCursor;
-      var newData = _this.list[newCursor];
-      return newData;
-    };
-
-    this.cursor = 0;
-    this.list = [hist];
-  }
-
-  return History;
-}();
-
-export { History as default };

package/dist/src/components/core/Designer/PageCompList/index.js

@@ -1,248 +0,0 @@
-import { __spreadArray } from '../../../../../my_my_node_modules/tslib/tslib.es6.js';
-import { Menu, Dropdown } from 'antd';
-import classNames from '../../../../../my_my_node_modules/classnames/index.js';
-import update from 'immutability-helper';
-import React__default, { useState, useRef, useEffect, useCallback } from 'react';
-import '../../../common/LayoutSelector/index.js';
-import '../../../common/Field/index.js';
-import '../../../common/UrlPicker/index.js';
-import Iconfont from '../../../common/Iconfont/index.js';
-import Button from '../../../common/Button/index.js';
-import '../../../common/AlignSelector/index.js';
-import '../../../common/Collapse/index.js';
-import '../../../common/ColorPickerInput/index.js';
-import '../../../common/ImagePicker/index.js';
-import '../../../common/IconPicker/index.js';
-import '../../../common/SwitchCollapse/index.js';
-import '../../../common/Slider/index.js';
-import '../../../common/FontStyles/index.js';
-import '../../../common/ButtonIconLayout/index.js';
-import 'axios';
-import '../../../../../my_my_node_modules/qs/lib/stringify.js';
-import '../../../../../my_my_node_modules/qs/lib/utils.js';
-import '../../../common/ProductModal/index.js';
-import '../../../common/ProductSource/index.less.js';
-import { copyNode } from '../../../utils/coreUtil.js';
-import './index.less.js';
-import { compInfoMap } from '../../../constants/index.js';
-import { store } from '../../../mobx/index.js';
-import { autorun } from 'mobx';
-
-var operTypeMap = {
-  MOVE_UP: '1',
-  MOVE_DOWN: '2',
-  COPY: '3',
-  DELETE: '4'
-};
-function PageCompList(_a) {
-  var setPageData = _a.setPageData,
-      pageData = _a.pageData,
-      onAdd = _a.onAdd,
-      renderPagesManage = _a.renderPagesManage,
-      pageName = _a.pageName;
-
-  var _b = useState(pageData || []),
-      components = _b[0],
-      setComponents = _b[1];
-
-  var _c = useState(''),
-      dragId = _c[0],
-      setDragId = _c[1];
-
-  var _d = useState(''),
-      clickedFloor = _d[0],
-      setClickedFloor = _d[1];
-
-  var ref = useRef();
-  useEffect(function () {
-    setComponents(pageData || []);
-  }, [pageData]);
-  useEffect(function () {
-    var distroy = autorun(function () {
-      setClickedFloor(store.clickedFloor);
-    });
-    return distroy;
-  }, []);
-  var moveCard = useCallback(function (dragNodeId, hoverNodeId) {
-    var dragIndex = components.findIndex(function (comp) {
-      return comp.id === dragNodeId;
-    });
-    var hoverIndex = components.findIndex(function (comp) {
-      return comp.id === hoverNodeId;
-    });
-    setComponents(function (prevCards) {
-      var newComps = update(prevCards, {
-        $splice: [[dragIndex, 1], [hoverIndex, 0, prevCards[dragIndex]]]
-      });
-      ref.current = newComps;
-      return newComps;
-    });
-  }, [components]);
-
-  var onDragStart = function (e) {
-    setDragId(e.currentTarget.dataset.nodeid);
-  };
-
-  var onDragEnter = function (e) {
-    var hoverNodeId = e.currentTarget.dataset.nodeid;
-
-    if (dragId === hoverNodeId) {
-      return;
-    }
-
-    moveCard(dragId, hoverNodeId);
-  };
-
-  var onDragEnd = function () {
-    setDragId('');
-
-    if (ref.current) {
-      setPageData(ref.current);
-    }
-  };
-
-  var onMenuClick = function (index, operType) {
-    var newComponents = __spreadArray([], components, true);
-
-    if (operType === operTypeMap.MOVE_UP) {
-      var temp = newComponents[index - 1];
-      newComponents[index - 1] = newComponents[index];
-      newComponents[index] = temp;
-    } else if (operType === operTypeMap.MOVE_DOWN) {
-      var temp = newComponents[index + 1];
-      newComponents[index + 1] = newComponents[index];
-      newComponents[index] = temp;
-    } else if (operType === operTypeMap.COPY) {
-      var copyComponent = copyNode(newComponents[index]);
-      newComponents.splice(index + 1, 0, copyComponent);
-    } else if (operType === operTypeMap.DELETE) {
-      if (newComponents[index].id === clickedFloor) {
-        store.setState({
-          clickedFloor: null
-        });
-      }
-
-      newComponents.splice(index, 1);
-    } // setComponents(newComponents);
-
-
-    setPageData(newComponents);
-  };
-
-  var componentScrollTop = function (data) {
-    if (document.getElementById("view".concat(data.id))) {
-      document.getElementById("view".concat(data.id)).scrollIntoView({
-        behavior: 'smooth'
-      });
-    }
-  };
-
-  var onCardClick = function (event, data) {
-    componentScrollTop(data); // 这里必须阻止事件冒泡，然后再触发自定义的事件
-
-    event.preventDefault();
-    event.stopPropagation();
-    var evt = new Event('component-click', {
-      bubbles: false
-    });
-    evt.data = data;
-    window.document.dispatchEvent(evt);
-    if (clickedFloor === data.id) return;
-    store.setState({
-      clickedFloor: data.id
-    });
-  };
-
-  var renderCard = function (comp, index) {
-    var menu = /*#__PURE__*/React__default.createElement(Menu, {
-      onClick: function (_a) {
-        var item = _a.item;
-        return onMenuClick(index, item.props.value);
-      }
-    }, index !== 0 && /*#__PURE__*/React__default.createElement(Menu.Item, {
-      className: "menu_item",
-      value: "1"
-    }, "Move Up"), index !== components.length - 1 && /*#__PURE__*/React__default.createElement(Menu.Item, {
-      className: "menu_item",
-      value: "2"
-    }, "Move Down"), /*#__PURE__*/React__default.createElement(Menu.Item, {
-      className: "menu_item",
-      value: "3"
-    }, "Copy"), /*#__PURE__*/React__default.createElement(Menu.Item, {
-      className: "menu_item",
-      value: "4"
-    }, "Delete"));
-    var dragging = dragId === String(comp.id);
-    var active = clickedFloor === String(comp.id);
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: "card".concat(comp.id),
-      className: classNames('card-wrap', {
-        active: active
-      }),
-      "data-nodeid": comp.id,
-      draggable: "true",
-      id: "card".concat(comp.id),
-      onDragEnd: onDragEnd,
-      onDragEnter: onDragEnter,
-      onDragOver: function (e) {
-        e.preventDefault();
-      },
-      onDragStart: onDragStart,
-      style: {
-        opacity: dragging ? '0.4' : '1'
-      }
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "left",
-      onClick: function (e) {
-        return onCardClick(e, comp);
-      }
-    }, /*#__PURE__*/React__default.createElement(Iconfont, {
-      className: "comp-icon",
-      color: active ? '#2F54EB' : '',
-      size: "20px",
-      type: compInfoMap[comp.type].icon
-    }), /*#__PURE__*/React__default.createElement(Iconfont, {
-      className: "drag-icon",
-      color: "#2F54EB",
-      size: "20px",
-      type: "icon-drag"
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "card-title ml16"
-    }, index + 1, ". ", compInfoMap[comp.type].name)), /*#__PURE__*/React__default.createElement(Dropdown, {
-      overlay: menu,
-      placement: "bottomRight",
-      trigger: ['click']
-    }, /*#__PURE__*/React__default.createElement(Iconfont, {
-      className: "more-btn",
-      color: "#2F54EB",
-      size: "20px",
-      style: {
-        height: '40px'
-      },
-      type: "icon-more"
-    })));
-  };
-
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "page-comp-wrap"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "page-comp-head"
-  }, renderPagesManage), /*#__PURE__*/React__default.createElement("div", {
-    className: "page-comp-list"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "title mb16"
-  }, pageName), /*#__PURE__*/React__default.createElement(Button, {
-    icon: "icon-add",
-    onClick: onAdd,
-    size: "large",
-    type: "light"
-  }, "Add Component"), /*#__PURE__*/React__default.createElement("div", {
-    className: "list mt16"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "inner-list"
-  }, /*#__PURE__*/React__default.createElement("div", null, components.length > 0 && components.map(function (comp, i) {
-    return renderCard(comp, i);
-  }))))));
-}
-
-export { PageCompList as default };

package/dist/src/components/core/Designer/PageCompList/index.less.js

@@ -1,4 +0,0 @@
-import styleInject from '../../../../../my_my_node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = ".index_page-comp-wrap__hAT7M {\n  z-index: 100;\n  background-color: #FFF;\n  width: 354px;\n  flex-shrink: 0;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-head__rt3Bk {\n  height: 81px;\n  box-shadow: inset 0px -1px 0px #EDF0F4;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 {\n  padding: 24px;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_title__1DebN {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  font-size: 26px;\n  line-height: 36px;\n  color: #232F46;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV {\n  margin-right: -21px;\n  overflow-y: auto;\n  width: 100%;\n  padding: 8px 0px 8px 0;\n  height: calc(100vh - 260px);\n  background: #F5F6F7;\n  border-radius: 8px;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV::-webkit-scrollbar {\n  width: 8px;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV::-webkit-scrollbar-track-piece {\n  background-color: #fff;\n}\n.index_page-comp-wrap__hAT7M .index_page-comp-list__msp13 .index_list__hxWna .index_inner-list__G1GvV::-webkit-scrollbar-thumb {\n  background-color: #C1C9D7;\n  background-clip: padding-box;\n  border-radius: 100px;\n}\n.index_card-wrap__l74jT {\n  display: flex;\n  justify-content: space-between;\n  cursor: move;\n  height: 64px;\n  line-height: 64px;\n  padding: 0 20px;\n  color: #232F46;\n}\n.index_card-wrap__l74jT .index_left__pBraq {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.index_card-wrap__l74jT .index_left__pBraq .index_comp-icon__YbnCQ {\n  display: block;\n}\n.index_card-wrap__l74jT .index_left__pBraq .index_drag-icon__8anEd {\n  display: none;\n}\n.index_card-wrap__l74jT .index_left__pBraq .index_card-title__A3MdO {\n  line-height: 24px;\n  font-family: 'Open Sans';\n  font-weight: 400;\n  font-size: 16px;\n  font-style: normal;\n}\n.index_card-wrap__l74jT .index_more-btn__lWkrz {\n  display: none;\n  cursor: pointer;\n}\n.index_card-wrap__l74jT:hover {\n  background: #E9F0FF;\n  color: #2F54EB;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 24px;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq .index_comp-icon__YbnCQ {\n  display: none;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq .index_drag-icon__8anEd {\n  display: block;\n}\n.index_card-wrap__l74jT:hover .index_left__pBraq .index_card-title__A3MdO {\n  font-weight: 600;\n}\n.index_card-wrap__l74jT:hover .index_more-btn__lWkrz {\n  display: block;\n}\n.index_active__dMPSq {\n  background: #E9F0FF;\n  color: #2F54EB;\n}\n.index_active__dMPSq .index_left__pBraq .index_card-title__A3MdO {\n  font-weight: 600;\n}\n.index_active__dMPSq .index_more-btn__lWkrz {\n  display: block;\n}\n";
-styleInject(css_248z);