linkmore-design 1.0.3

package/lib/Filter/style/style.css

@@ -0,0 +1,420 @@
+.ant-layout-sider {
+  min-height: 100vh;
+  background-color: #022766;
+}
+.ant-menu-dark .ant-menu-inline.ant-menu-sub {
+  box-shadow: none;
+}
+.ant-menu-submenu-placement-rightTop {
+  display: none;
+}
+.ant-table .row-active .ant-table-cell {
+  background-color: #FEFFD3 !important;
+}
+.ant-dropdown-menu-item {
+  font-size: 12px;
+  height: 32px;
+}
+.ant-tabs .ant-tabs-nav .ant-tabs-tab {
+  font-size: 14px;
+}
+.ant-tabs.auto_tabs {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+.ant-tabs.auto_tabs .ant-tabs-nav {
+  height: 48px;
+}
+.ant-tabs.auto_tabs .ant-tabs-content-holder {
+  flex: 1;
+  overflow: auto;
+}
+.ant-drawer.drawer_wrapper .ant-drawer-header {
+  padding: 0 24px;
+}
+.ant-drawer.drawer_wrapper .ant-drawer-body {
+  position: relative;
+  flex: 1;
+  padding: 0 24px;
+}
+.ant-modal-wrap.plugin_modal {
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-end;
+}
+.ant-modal-wrap.plugin_modal .ant-modal {
+  left: 56px;
+  top: 0;
+  margin: 0 0 8px 8px;
+  padding: 0;
+}
+.ant-modal-wrap.lm_modal_confirm .anticon {
+  margin-top: -1px;
+  margin-right: 8px;
+}
+.ant-modal-wrap.lm_modal_confirm .ant-modal-body {
+  padding: 16px 24px;
+}
+.ant-popover.pop_img .ant-popover-inner-content {
+  line-height: 1;
+  padding: var(--gap);
+}
+@font-face {
+  font-family: 'iconfont';
+  /* Project id 2966019 */
+  src: url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.woff2?t=1641546077924') format('woff2'), url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.woff?t=1641546077924') format('woff'), url('//at.alicdn.com/t/font_2966019_i3eb1wwkoo.ttf?t=1641546077924') format('truetype');
+}
+.icon_ {
+  font-family: 'iconfont';
+  font-size: 14px;
+}
+.iconfont {
+  font-size: 12px;
+}
+.icon_home::before {
+  content: '\e7fc';
+}
+:root {
+  --them-color: #1890fc;
+  --main-color: #1890fc;
+  --primary-color: #1890fc;
+  --primary2-color: rgba(24, 144, 252, 0.08);
+  --success-color: #56C22D;
+  --warning-color: #FD9727;
+  --error-color: #FA4F53;
+  --aside-bg-color: #022766;
+  --font-color: rgba(0, 0, 0, 0.85);
+  --font2-color: rgba(0, 0, 0, 0.65);
+  --text-color: rgba(0, 0, 0, 0.45);
+  --box-shadow-color: rgba(0, 0, 0, 0.15);
+  --background-color: rgba(0, 0, 0, 0.04);
+  --background-color-hover: rgba(0, 0, 0, 0.08);
+  --border-color: #f0f0f0;
+  --stripe-color: #f5f5f5;
+  --border-hover-color: #f2f5f7;
+  --gap: 8px;
+  --basic-height: 24px;
+}
+.ant-input,
+.ant-select {
+  font-size: 12px;
+}
+.ant-select-dropdown .ant-select-item {
+  font-size: 12px;
+  align-items: center;
+}
+.react-resizable {
+  position: relative;
+  background-clip: padding-box;
+}
+.react-resizable-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  width: 3px;
+  height: 40px;
+  cursor: col-resize;
+}
+.react-resizable-handle:hover {
+  background-color: var(--primary-color);
+}
+.react-resizable-handle:active {
+  background-color: var(--primary-color);
+}
+.yf_resizable_bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  height: 0;
+}
+.resizable_line {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 1px;
+  background-color: var(--primary-color);
+  z-index: 1;
+}
+.handle_resizable {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  z-index: 2;
+}
+.lm_filter {
+  display: flex;
+  align-items: center;
+  padding-bottom: calc(var(--gap) * 2);
+}
+.lm_filter .ant-space-item,
+.lm_filter .ant-space-item > *,
+.lm_filter .ant-btn,
+.lm_filter .ant-input {
+  font-size: 12px;
+}
+.lm_filter .anticon + span,
+.lm_filter span + .anticon {
+  margin-left: calc(var(--gap) / 2);
+}
+.lm_filter .ant-input-affix-wrapper {
+  height: 24px;
+}
+.lm_filter .line {
+  display: block;
+  height: var(--basic-height);
+  border-right: 1px solid #eee;
+}
+.lm_filter .item_icon {
+  display: none;
+}
+.lm_filter .btn_active {
+  background-color: var(--ant-primary-1);
+}
+.ant-popover.list-popover {
+  min-width: 130px;
+}
+.ant-popover.list-popover .ant-popover-inner-content {
+  overflow-y: auto;
+  max-height: 260px;
+  padding: 0;
+}
+.ant-popover.list-popover .list-popover-header {
+  font-size: 12px;
+  height: 40px;
+  border-bottom: 1px solid #eee;
+  padding: 0 15px;
+}
+.ant-popover.list-popover .list-popover-header .ant-radio-button-wrapper {
+  font-size: 12px;
+}
+.ant-popover.list-popover .item_other {
+  position: relative;
+  right: -8px;
+  display: inline-flex;
+  align-items: center;
+  color: #666;
+}
+.ant-popover.list-popover .item_other .item_icon {
+  font-size: 14px;
+  text-align: center;
+  padding: 0 2px;
+  transition: 0.3s;
+}
+.ant-popover.list-popover .item_other .item_icon:hover {
+  color: var(--primary-color);
+}
+.ant-popover.list-popover .item_other .item_top {
+  opacity: 0;
+}
+.ant-popover.list-popover .ant-list .ant-list-items .ant-list-item {
+  position: relative;
+  display: flex;
+  height: 32px;
+  align-items: center;
+  font-size: 12px;
+  border: none;
+  color: #333;
+  padding: 0 15px;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.ant-popover.list-popover .ant-list .ant-list-items .ant-list-item.active {
+  background-color: var(--stripe-color);
+}
+.ant-popover.list-popover .ant-list .ant-list-items .ant-list-item:hover {
+  background-color: var(--stripe-color);
+}
+.ant-popover.list-popover .ant-list .ant-list-items .ant-list-item:hover .item_top {
+  opacity: 1;
+}
+.ant-popover.list-popover .ant-list .ant-list-item-meta-content {
+  width: auto;
+}
+.ant-popover.list-popover .filte_warp {
+  padding: 8px 15px;
+}
+.ant-popover.list-popover .filte_warp > div {
+  width: 100%;
+}
+.ant-popover.list-popover .filte_warp .ant-picker-input > input {
+  font-size: 12px;
+  height: 22px;
+}
+.ant-popover.list-popover .filte_warp .ant-input {
+  font-size: 12px;
+  height: var(--basic-height);
+}
+.ant-popover.list-popover .ant-checkbox-group {
+  width: 100%;
+}
+.ant-popover.list-popover .ant-checkbox-group .ant-checkbox-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  font-size: inherit;
+  height: 32px;
+}
+.ant-popover.list-popover .ant-checkbox-group .ant-checkbox-wrapper .ant-checkbox {
+  top: 0;
+}
+.ant-popover.list-popover .ant-tree {
+  font-size: 12px;
+  padding-right: 8px;
+}
+.ant-popover.list-popover .ant-tree .ant-tree-treenode {
+  height: 32px;
+  align-items: center;
+  padding: 0;
+}
+.ant-popover.list-popover .ant-tree .ant-tree-treenode .ant-tree-switcher {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ant-popover.list-popover .ant-tree .ant-tree-treenode .ant-tree-switcher:empty {
+  width: 12px;
+}
+.ant-drawer .ant-drawer-header {
+  height: 48px;
+  padding: 0 16px;
+}
+.ant-drawer.complex_filter .ant-drawer-body {
+  display: flex;
+  flex-flow: column;
+  padding: 16px 16px 0;
+}
+.ant-drawer.complex_filter .ant-drawer-body .ant-list {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: var(--gap);
+}
+.ant-drawer.complex_filter .ant-drawer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  height: 48px;
+}
+.ant-drawer.complex_filter .ant-drawer-footer .ant-btn {
+  font-size: 12px;
+  min-width: 56px;
+}
+.ant-drawer.complex_filter .ant-list-item {
+  height: 40px;
+  padding: 0;
+}
+.ant-drawer.complex_filter .ant-list-item:hover {
+  color: var(--primary-color);
+}
+.ant-drawer.complex_filter .item_other {
+  display: flex;
+  align-items: center;
+}
+.ant-drawer.complex_filter .item_other .itme_icon {
+  font-size: 10px;
+  cursor: pointer;
+}
+.ant-drawer.edit_filter .ant-drawer-body {
+  display: flex;
+  flex-flow: column;
+  flex: 1;
+  padding: 16px 16px 0;
+}
+.ant-drawer.edit_filter .edit_filter_title .ant-space-vertical {
+  width: 100%;
+}
+.ant-drawer.edit_filter .edit_filter_title .title_lable {
+  font-size: 12px;
+  padding-bottom: 8px;
+}
+.ant-drawer.edit_filter .edit_filter_title .title_lable span.required {
+  color: #fd4d4e;
+}
+.ant-drawer.edit_filter .edit_filter_body {
+  flex: 1;
+  overflow-y: auto;
+  margin-top: 16px;
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item {
+  border: none;
+  padding: 4px 0;
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item:first-of-type {
+  padding-top: 0;
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item .item_box {
+  background: var(--background-color);
+  padding: 12px;
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item .item_box .item_label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item .item_box .item_tags {
+  padding-top: 16px;
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item .item_box .item_tags .ant-tag {
+  color: var(--font-color);
+  background-color: var(--background-color);
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item .item_box .item_tags .ant-tag.site-tag-plus {
+  background: transparent;
+  border-style: dashed;
+  cursor: pointer;
+}
+.ant-drawer.edit_filter .edit_filter_body .ant-list-item .item_box .item_tags .tag-input {
+  width: 78px;
+  margin-right: 8px;
+  vertical-align: top;
+}
+.ant-drawer.edit_filter .edit_filter_footer {
+  position: sticky;
+  bottom: 0;
+  background-color: #fff;
+  padding-top: 4px;
+}
+.ant-select-dropdown.first_select .rc-virtual-list .ant-select-item {
+  padding: 0 12px;
+}
+.ant-select-dropdown.first_select .rc-virtual-list .ant-select-item .ant-input {
+  font-size: 12px;
+  height: var(--basic-height);
+}
+.ant-select-dropdown.first_select .rc-virtual-list .ant-select-item .item_nowarp {
+  flex-wrap: nowrap;
+}
+.ant-select-dropdown.first_select .rc-virtual-list .ant-select-item .item_label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ant-select-dropdown.first_select .rc-virtual-list .ant-select-item .item_icon {
+  opacity: 0;
+  transition: 0.3s;
+  padding-left: 3px;
+}
+.ant-select-dropdown.first_select .rc-virtual-list .ant-select-item:hover .item_icon {
+  opacity: 1;
+}
+.ant-select-dropdown.first_select .rc-virtual-list .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  color: var(--primary-color);
+}
+.ant-select-dropdown.first_select .add_more {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  font-size: 12px;
+  padding: 4px 12px;
+  cursor: pointer;
+}
+.ant-select-dropdown.first_select .add_more .ant-input {
+  font-size: 12px;
+  height: var(--basic-height);
+}

package/lib/Icon/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var Icon = function Icon(prop) {
+  var className = prop.className;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: className
+  });
+};
+
+var _default = Icon;
+exports.default = _default;

package/lib/Icon/style/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/IconFont/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _icons = require("@ant-design/icons");
+
+var IconFont = (0, _icons.createFromIconfontCN)({
+  scriptUrl: '//at.alicdn.com/t/font_2966019_oo18nfy5zb.js' // 在 iconfont.cn 上生成
+
+});
+var _default = IconFont;
+exports.default = _default;

package/lib/IconFont/style/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/LeftTable/index.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/tree/style");
+
+var _tree = _interopRequireDefault(require("antd/es/tree"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _Popover = _interopRequireDefault(require("../Filter/Popover"));
+
+var _imgTest = _interopRequireDefault(require("./assets/imgTest.jpg"));
+
+var LeftSide = function LeftSide(_ref) {
+  var useToggle = _ref.useToggle,
+      toggleTree = _ref.toggleTree,
+      treeData = _ref.treeData,
+      treeType = _ref.treeType;
+
+  var _useState = (0, _react.useState)({
+    title: '分类',
+    treeData: treeData.category
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useTree = _useState2[0],
+      setTree = _useState2[1]; // 左侧树分类变化事件
+
+
+  var getTreeTypeChange = function getTreeTypeChange(value) {
+    var title = treeType.data.find(function (v) {
+      return v.value === value.value;
+    }).label;
+    var nValue = {
+      title: title,
+      treeData: treeData[value.value]
+    };
+    setTree(nValue);
+  };
+
+  var data = new Array(50).fill().map(function (item, index) {
+    return {
+      id: index,
+      title: '物料的名称',
+      code: "MLY001Y002009".concat(index, "Y"),
+      signer: index % 4 ? ['战略备料', '预售期货', '大货齐备', '外发加工'] : ['战略备料', '样衣打版'],
+      // 标签
+      tags: [{
+        icon: /*#__PURE__*/_react.default.createElement(_icons.ExportOutlined, null),
+        label: '战略备料'
+      }, {
+        label: '战略备料'
+      }],
+      checked: false,
+      material: '物料名称',
+      materialCode: "MLY001Y002009".concat(index, "Y"),
+      img: index % 2 ? 'http://www.wuliwu.top/logo.png' : _imgTest.default,
+      imgUrl: _imgTest.default,
+      state: index % 3 ? 'ok' : index % 2 ? 'disable' : 'wait',
+      supplier: '供应商名称',
+      number: 'MLY001',
+      contactUser: '联系人',
+      phone: '13131313131',
+      category: index % 2 ? '牛仔' : '非牛仔',
+      type: index % 2 ? '面料' : '辅料',
+      money: Math.floor(Math.random() * 2000) * index,
+      remark: '这是备注这是备注这是备注这是备注这是备注这是备注这是备注这是备注'
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: useToggle ? 'lm_grid_tree' : "lm_grid_tree grid_toggle"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid_tree_title"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid_tree_title_left"
+  }, /*#__PURE__*/_react.default.createElement("span", null, useTree.title)), /*#__PURE__*/_react.default.createElement(_Popover.default, {
+    item: treeType,
+    config: {
+      placement: 'bottomRight',
+      overlayStyle: {
+        width: 168,
+        paddingTop: 0
+      }
+    },
+    getChange: function getChange(e, mode) {
+      return getTreeTypeChange(e, mode, data.field);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid_tree_title_right"
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "text"
+  }, /*#__PURE__*/_react.default.createElement(_icons.EllipsisOutlined, null))))), /*#__PURE__*/_react.default.createElement(_tree.default, {
+    treeData: useTree.treeData
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "toggle_btn",
+    onClick: toggleTree
+  }, /*#__PURE__*/_react.default.createElement(_icons.LeftOutlined, null)));
+};
+
+var _default = LeftSide;
+exports.default = _default;

package/lib/LeftTable/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style.css");