@lemon-fe/components 0.1.11 → 0.1.14

package/es/BaseTable/index.js

@@ -34,7 +34,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /// <reference path="../../typings.d.ts" />
-import React, { useMemo, useState, useEffect, useRef } from 'react';
+import React, { useMemo, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import { Table as AntdTable } from 'antd';
 import { get } from 'lodash';
 import ResizeObserver from 'rc-resize-observer';
@@ -190,9 +190,17 @@ function BaseTable(props) {
     }
 
     memoHeight.current = height;
+
+    if (memoHeight.current === 0) {
+      return;
+    }
+
     setScrollY(calcScrollY() || undefined);
   };
 
+  useLayoutEffect(function () {
+    setScrollY(calcScrollY() || undefined);
+  }, [paginationProp !== false && !!(paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.total)]);
   useEffect(function () {
     if (scrollYProp !== true) {
       setScrollY(scrollYProp);

package/es/BaseTable/index.less

@@ -2,47 +2,6 @@
 @font-size-base: 14px;
 @resize-indicator-color: #333;
 
-.ant-table-thead > tr > th {
-  border-bottom: none;
-
-  &::before {
-    display: none;
-  }
-}
-
-.ant-table-body {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #ddd;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: #fff;
-  }
-}
-
-.ant-table-cell {
-  .ant-checkbox-checked .ant-checkbox-inner::after {
-    transition: none !important;
-  }
-
-  .ant-checkbox-inner {
-    transition: none !important;
-  }
-
-  .ant-checkbox-checked::after {
-    animation: none !important;
-  }
-}
-
-.ant-table-pagination.ant-pagination {
-  margin-bottom: 0;
-}
-
 .@{tablePrefixCls} {
   position: relative;
   box-sizing: border-box;

package/es/Filter/index.js

@@ -395,18 +395,24 @@ function Filter(props) {
     };
   };
 
-  var cols = useMemo(function () {
-    if (!width || !collapsed) {
-      return data;
+  var _useMemo = useMemo(function () {
+    var result = data.filter(function (item) {
+      if (activeKeys.has(item.key) && compMap.has(item.type)) {
+        return true;
+      }
+
+      return false;
+    });
+
+    if (!width) {
+      return [result, false];
     }
 
     var rows = [];
     var currRow = [];
     var value = 0;
-    data.forEach(function (item) {
-      var _compMap$get;
-
-      var itemWidth = getColStyle(item.colSpan || ((_compMap$get = compMap.get(item.type)) === null || _compMap$get === void 0 ? void 0 : _compMap$get.colSpan)).width;
+    result.forEach(function (item) {
+      var itemWidth = getColStyle(item.colSpan || compMap.get(item.type).colSpan).width;
 
       if (value + itemWidth > width) {
         if (currRow.length > 0) {
@@ -420,20 +426,32 @@ function Filter(props) {
         value += itemWidth;
       }
     });
+    rows.push(currRow);
+    value += simple ? 180 : 220;
 
-    if (currRow.length > 0) {
-      rows.push(currRow);
+    if (currRow.length > 0 && value > width) {
+      rows.push([]);
     }
 
-    console.log(rows);
+    var visible = rows.length > 2;
 
-    if (rows.length <= 2) {
-      return data;
+    if (!collapsed || !visible) {
+      return [result, visible];
     }
 
-    return [rows[0], rows[rows.length - 1]].flat();
-  }, [data, width, collapsed]);
-  var content = /*#__PURE__*/React.createElement("div", {
+    return [[rows[0], rows[rows.length - 1]].flat(), visible];
+  }, [data, width, collapsed, simple, activeKeys]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      cols = _useMemo2[0],
+      showCollapse = _useMemo2[1];
+
+  return /*#__PURE__*/React.createElement(ResizeObserver, {
+    onResize: function onResize(size) {
+      if (size.width) {
+        setWidth(size.width + 16);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: classNames(prefixCls, _defineProperty({}, "".concat(prefixCls, "-simple"), simple)),
     style: style
   }, /*#__PURE__*/React.createElement(Modal, {
@@ -473,13 +491,7 @@ function Filter(props) {
   }), /*#__PURE__*/React.createElement(FormLayout, {
     direction: "row"
   }, cols.map(function (item) {
-    var visible = activeKeys.has(item.key);
     var target = compMap.get(item.type);
-
-    if (!visible || !target) {
-      return null;
-    }
-
     return /*#__PURE__*/React.createElement("div", {
       style: getColStyle(item.colSpan || target.colSpan),
       key: item.key
@@ -495,7 +507,7 @@ function Filter(props) {
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     htmlType: "submit"
-  }, "\u67E5\u8BE2")), simple ? /*#__PURE__*/React.createElement(Button, {
+  }, "\u67E5\u8BE2")), /*#__PURE__*/React.createElement(Space, null, simple ? /*#__PURE__*/React.createElement(Button, {
     className: "".concat(prefixCls, "-btn"),
     onClick: handleReset
   }, /*#__PURE__*/React.createElement("svg", {
@@ -511,7 +523,7 @@ function Filter(props) {
     strokeLinejoin: "round",
     fill: "none",
     fillRule: "evenodd"
-  }))) : /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Dropdown, {
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
     actions: [{
       text: '重置',
       onClick: handleReset
@@ -558,7 +570,10 @@ function Filter(props) {
       setKeywords('');
     },
     icon: /*#__PURE__*/React.createElement(Icons.LookUp, null)
-  })), /*#__PURE__*/React.createElement(Button, {
+  }))), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      visibility: showCollapse ? 'visible' : 'hidden'
+    },
     className: "".concat(prefixCls, "-btn"),
     onClick: function onClick() {
       return setCollapsed(function (prev) {
@@ -570,17 +585,7 @@ function Filter(props) {
         transform: collapsed ? 'rotateX(180deg)' : undefined
       }
     })
-  }))))));
-
-  if (simple) {
-    return content;
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
-    onResize: function onResize(size) {
-      return setWidth(size.width + 16);
-    }
-  }, content));
+  })))))));
 }
 
 Filter.setComponents = setComponents;

package/es/Popup/index.d.ts

@@ -1,12 +1,12 @@
-import { ComponentType, ReactElement } from 'react';
-import { ModalProps } from 'antd/lib/modal';
+import { ReactElement } from 'react';
+import type { ModalProps } from 'antd/lib/modal';
 export interface PopupProps<ValueType> extends ModalProps {
     value?: ValueType;
     onChange?: (value?: ValueType) => void;
-    component: ComponentType<{
+    component: (params: {
         value?: ValueType;
         onChange: (value: ValueType) => void;
-    }>;
+    }) => ReactElement | null;
     formatLabel?: (value: ValueType) => string;
     beforeOk?: (value: ValueType) => ValueType | PromiseLike<ValueType>;
     children?: ReactElement;

package/es/Popup/index.js

@@ -26,7 +26,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { useState, createElement, cloneElement, useRef } from 'react';
+import React, { useState, cloneElement, useRef } from 'react';
 import { Modal, Input, message } from 'antd';
 import { CloseCircleFilled } from '@ant-design/icons';
 import { PREFIX_CLS } from '../constants';
@@ -176,16 +176,15 @@ function Popup(props) {
   }, trigger), /*#__PURE__*/React.createElement(Modal, _objectSpread({
     destroyOnClose: true,
     visible: visible,
-    width: 896,
+    width: 994,
     centered: true,
     onCancel: handleCancel,
     onOk: handleOk,
     bodyStyle: {
       height: '549px',
-      padding: 0,
-      backgroundColor: '#f9f9f9'
+      padding: 0
     }
-  }, restProps), /*#__PURE__*/createElement(component, {
+  }, restProps), component({
     value: value,
     onChange: setValue
   })));

package/es/Section/index.less

@@ -66,12 +66,16 @@
     & > .ant-tabs-content-holder {
       flex: 1;
 
-      .ant-tabs-content {
+      & > .ant-tabs-content {
         height: 100%;
       }
     }
   }
 
+  &-flex > .ant-tabs {
+    min-height: 0;
+  }
+
   &-tab {
     display: inline-flex;
     align-self: flex-start;

package/es/SelectView/index.d.ts

@@ -0,0 +1,50 @@
+import { CSSProperties, Key, ReactElement } from 'react';
+import type { FilterItemType } from '../Filter/typings';
+import type { ColumnType } from '../BaseTable/typings';
+interface Props<RecordType, ParamsType> {
+    value?: RecordType[];
+    onChange?: (value: RecordType[]) => void;
+    /**
+     * @description 是否多选
+     */
+    multiple?: boolean;
+    /**
+     * @description 选择列表列设置
+     */
+    columns: ColumnType<RecordType>[];
+    /**
+     * @description 已选择列表列设置
+     */
+    selectedColumns?: ColumnType<RecordType>[];
+    /**
+     * @description 请求方法
+     */
+    fetch?: (query: {
+        current: number;
+        pageSize: number;
+        params: ParamsType;
+    }) => Promise<{
+        total: number;
+        data: RecordType[];
+    }>;
+    /**
+     * @description 数据源
+     */
+    dataSource?: RecordType[];
+    rowKey: string | ((item: RecordType) => Key);
+    /**
+     * @description 筛选器设置
+     */
+    filter?: {
+        defaultValue?: ParamsType;
+        onValuesChange?: (changedValues: Partial<ParamsType>, allValues: ParamsType) => void;
+        data: FilterItemType[];
+        sider?: (props: {
+            value: ParamsType;
+            onChange: (value: Partial<ParamsType>) => void;
+            style?: CSSProperties;
+        }) => ReactElement;
+    };
+}
+export default function SelectView<RecordType, ParamsType extends Record<string, any>>(props: Props<RecordType, ParamsType>): JSX.Element;
+export {};

package/es/SelectView/index.js

@@ -0,0 +1,252 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Tabs, Button } from 'antd';
+import { get } from 'lodash';
+import Filter from '../Filter';
+import Table from '../Table';
+import { PREFIX_CLS } from '../constants';
+export default function SelectView(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      columns = props.columns,
+      _props$selectedColumn = props.selectedColumns,
+      selectedColumns = _props$selectedColumn === void 0 ? columns : _props$selectedColumn,
+      fetch = props.fetch,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? true : _props$multiple,
+      rowKey = props.rowKey,
+      filter = props.filter,
+      dataSource = props.dataSource;
+  var prefixCls = "".concat(PREFIX_CLS, "-select-view");
+
+  var _useState = useState(value || []),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  var _useState3 = useState(data),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selected = _useState4[0],
+      setSelected = _useState4[1];
+
+  var _useState5 = useState((filter === null || filter === void 0 ? void 0 : filter.defaultValue) || {}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      params = _useState6[0],
+      setParams = _useState6[1];
+
+  var list = useRef(null);
+
+  var _useState7 = useState('list'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      tabFlag = _useState8[0],
+      setTabFlag = _useState8[1];
+
+  useEffect(function () {
+    var _list$current;
+
+    (_list$current = list.current) === null || _list$current === void 0 ? void 0 : _list$current.fetch();
+  }, [params]);
+  useEffect(function () {
+    setData(value || []);
+  }, [value]);
+
+  var getRowKey = function getRowKey(item) {
+    if (typeof rowKey === 'function') {
+      return rowKey(item);
+    }
+
+    return get(item, rowKey);
+  };
+
+  var request = fetch ? function (_ref) {
+    var current = _ref.current,
+        pageSize = _ref.pageSize;
+    return fetch({
+      current: current,
+      pageSize: pageSize,
+      params: params
+    });
+  } : undefined;
+
+  var handleClear = function handleClear() {
+    var empty = [];
+    setSelected(empty);
+    setData(empty);
+    onChange === null || onChange === void 0 ? void 0 : onChange(empty);
+  };
+
+  var handleChangeData = function handleChangeData(keys, rows) {
+    var keySet = new Set(keys);
+    var newRows = [].concat(_toConsumableArray(data), _toConsumableArray(rows)).filter(function (item) {
+      var curKey = getRowKey(item);
+
+      if (keySet.has(curKey)) {
+        keySet.delete(curKey);
+        return true;
+      }
+
+      return false;
+    });
+    setSelected(newRows);
+    setData(newRows);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newRows);
+  };
+
+  var handleChangeParams = useCallback(function (mParams) {
+    setParams(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), mParams);
+    });
+  }, []);
+
+  var handleValuesChange = function handleValuesChange(changedValues, allValues) {
+    var _filter$onValuesChang;
+
+    filter === null || filter === void 0 ? void 0 : (_filter$onValuesChang = filter.onValuesChange) === null || _filter$onValuesChang === void 0 ? void 0 : _filter$onValuesChang.call(filter, changedValues, allValues);
+  };
+
+  var headerNode = null;
+  var siderNode = null;
+
+  if (filter) {
+    if (filter.data) {
+      headerNode = /*#__PURE__*/React.createElement(Filter, {
+        simple: true,
+        data: filter.data,
+        defaultValue: filter.defaultValue,
+        onChange: handleChangeParams,
+        onValuesChange: handleValuesChange
+      });
+    }
+
+    if (filter.sider) {
+      siderNode = filter.sider({
+        value: params,
+        onChange: handleChangeParams
+      });
+    }
+  }
+
+  var dataKeys = useMemo(function () {
+    return data.map(getRowKey);
+  }, [data, rowKey]);
+  var selectedKeys = useMemo(function () {
+    return selected.map(getRowKey);
+  }, [rowKey, selected]);
+  var selectTable = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-layout")
+  }, siderNode !== null && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-sider")
+  }, siderNode), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-main")
+  }, headerNode !== null && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-head")
+  }, headerNode), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body")
+  }, /*#__PURE__*/React.createElement(Table, {
+    actionRef: list,
+    rowKey: rowKey,
+    rowSelection: {
+      type: multiple ? 'checkbox' : 'radio',
+      preserveSelectedRowKeys: true,
+      selectedRowKeys: dataKeys,
+      onChange: function onChange(keys, rows) {
+        return handleChangeData(keys, rows);
+      }
+    },
+    onRow: function onRow(row) {
+      return {
+        onClick: function onClick() {
+          var key = getRowKey(row);
+
+          var keys = _toConsumableArray(dataKeys);
+
+          var index = keys.findIndex(function (item) {
+            return item === key;
+          });
+
+          if (index > 0) {
+            keys.splice(index, 1);
+          } else {
+            keys.push(key);
+          }
+
+          handleChangeData(keys, [row]);
+        }
+      };
+    },
+    dataSource: dataSource,
+    columns: columns,
+    fetch: request
+  }))));
+  var content;
+
+  if (!multiple) {
+    content = selectTable;
+  } else {
+    content = /*#__PURE__*/React.createElement(Tabs, {
+      size: "small",
+      tabBarGutter: 20,
+      onChange: function onChange(key) {
+        setTabFlag(key);
+      },
+      tabBarExtraContent: {
+        right: tabFlag === 'selected' ? /*#__PURE__*/React.createElement(Button, {
+          type: "link",
+          onClick: handleClear
+        }, "\u6E05\u7A7A") : null
+      }
+    }, /*#__PURE__*/React.createElement(Tabs.TabPane, {
+      tab: "\u5217\u8868",
+      key: "list"
+    }, selectTable), /*#__PURE__*/React.createElement(Tabs.TabPane, {
+      tab: "\u5DF2\u9009\u62E9(".concat(data.length, ")"),
+      key: "selected"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-layout")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-main")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-body")
+    }, /*#__PURE__*/React.createElement(Table, {
+      dataSource: data,
+      columns: selectedColumns,
+      rowSelection: {
+        preserveSelectedRowKeys: true,
+        selectedRowKeys: selectedKeys,
+        onChange: function onChange(_, rows) {
+          return setSelected(rows);
+        }
+      },
+      rowKey: rowKey
+    }))))));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls
+  }, content);
+}

package/es/SelectView/index.less

@@ -0,0 +1,59 @@
+.@{prefixCls}-select-view {
+  height: 100%;
+
+  & > .ant-tabs {
+    height: 100%;
+
+    & > .ant-tabs-nav {
+      margin-bottom: 0;
+
+      & > .ant-tabs-nav-wrap {
+        padding: 0 16px;
+
+        .ant-tabs-tab {
+          padding: 13px 0;
+        }
+      }
+    }
+
+    & > .ant-tabs-content-holder {
+      flex: 1;
+      min-height: 0;
+
+      & > .ant-tabs-content {
+        height: 100%;
+
+        & > .ant-tabs-tabpane {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  &-layout {
+    display: flex;
+    height: 100%;
+  }
+
+  &-sider {
+    width: 228px;
+    overflow: auto;
+    border-right: 1px solid #e5e5e5;
+  }
+
+  &-main {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 16px;
+  }
+
+  &-head + &-body {
+    margin-top: 16px;
+  }
+
+  &-body {
+    flex: 1;
+    min-height: 0;
+  }
+}

package/es/SiderTree/index.js

@@ -51,7 +51,10 @@ function SiderTreeTabs(props) {
     return item.key || item.title;
   };
 
-  return /*#__PURE__*/React.createElement(Tabs, _objectSpread(_objectSpread({}, restProps), {}, {
+  var prefixCls = "".concat(PREFIX_CLS, "-tree");
+  return /*#__PURE__*/React.createElement(Tabs, _objectSpread(_objectSpread({
+    className: "".concat(prefixCls, "-tabs")
+  }, restProps), {}, {
     renderTabBar: function renderTabBar(tabProps) {
       var activeKey = tabProps.activeKey,
           _onTabClick = tabProps.onTabClick;
@@ -153,7 +156,7 @@ export default function SiderTree(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-wrapper")
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !!mHeader && /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-header")
   }, mHeader), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-body")

package/es/SiderTree/index.less

@@ -3,7 +3,11 @@
 
 .@{prefixCls}-tree {
   &-wrapper {
-    padding: @space;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: @space 0;
   }
 
   &-menu-popover {
@@ -39,12 +43,35 @@
     }
   }
 
+  &-tabs {
+    height: 100%;
+
+    & > .ant-tabs-content-holder {
+      flex: 1;
+
+      & > .ant-tabs-content {
+        height: 100%;
+
+        & > .ant-tabs-tabpane {
+          height: 100%;
+        }
+      }
+    }
+  }
+
   &-tab-bar {
     margin: 0 @space;
   }
 
+  &-header {
+    padding: 0 @space;
+  }
+
   &-body {
-    overflow-x: auto;
+    flex: 1;
+    min-height: 0;
+    padding: 0 @space;
+    overflow: auto;
   }
 
   &-header + &-body {
@@ -103,6 +130,10 @@
       width: 13px;
       height: 13px;
     }
+
+    &-noop {
+      display: none;
+    }
   }
 
   &-node-content-wrapper {
@@ -184,9 +215,9 @@
 }
 
 .@{prefixCls}-layout-left .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
-  padding-right: 12px;
+  padding-right: 12px + @space;
 }
 
 .ant-tabs-tabpane .@{prefixCls}-tree-wrapper:first-child .@{prefixCls}-tree-header {
-  padding-right: 0;
+  padding-right: @space;
 }

package/es/index.d.ts

@@ -28,3 +28,4 @@ export type { FormTableColumnType, FormTableProps, FormTableRef } from './FormTa
 export { default as TabBar } from './TabBar';
 export { default as SymbolIcon } from './SymbolIcon';
 export { default as Dropdown } from './Dropdown';
+export { default as SelectView } from './SelectView';

package/es/index.js

@@ -22,4 +22,5 @@ export { default as FormInline } from './FormInline';
 export { default as FormTable } from './FormTable';
 export { default as TabBar } from './TabBar';
 export { default as SymbolIcon } from './SymbolIcon';
-export { default as Dropdown } from './Dropdown';
+export { default as Dropdown } from './Dropdown';
+export { default as SelectView } from './SelectView';

package/es/index.less

@@ -23,3 +23,4 @@
 @import './TabBar/index.less';
 @import './SymbolIcon/index.less';
 @import './Dropdown/index.less';
+@import './SelectView/index.less';

package/es/overrides.less

@@ -4,6 +4,11 @@ a[title='站长统计'] {
 
 @blue-base: #2357df;
 
+::selection {
+  color: inherit;
+  background: #d3ddf9;
+}
+
 /** basic */
 
 @height-base: 32px;
@@ -16,8 +21,50 @@ a[title='站长统计'] {
 @table-header-bg: #f0f0f0;
 @table-header-color: rgba(51, 51, 51, 0.65);
 @table-padding-vertical: 14px;
-@table-border-color: rgba(0, 0, 0, 0.04);
+@table-border-color: #e1e1e1;
 @table-border-radius-base: 4px;
+@table-row-hover-bg: #eee;
+
+.ant-table-thead > tr > th {
+  border-bottom: none;
+
+  &::before {
+    display: none;
+  }
+}
+
+.ant-table-body {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #ddd;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #fff;
+  }
+}
+
+.ant-table-cell {
+  .ant-checkbox-checked .ant-checkbox-inner::after {
+    transition: none !important;
+  }
+
+  .ant-checkbox-inner {
+    transition: none !important;
+  }
+
+  .ant-checkbox-checked::after {
+    animation: none !important;
+  }
+}
+
+.ant-table-pagination.ant-pagination {
+  margin-bottom: 0;
+}
 
 /** button */
 
@@ -29,6 +76,10 @@ a[title='站长统计'] {
   border-radius: 8px;
 }
 
+.ant-modal-header {
+  border-radius: 8px 8px 0 0;
+}
+
 .ant-modal-confirm {
   .ant-modal-body {
     padding: 0;
@@ -104,6 +155,10 @@ a[title='站长统计'] {
   }
 }
 
+.ant-pagination-options .ant-select.ant-select-in-form-item {
+  width: auto;
+}
+
 /** select */
 
 .ant-select-arrow {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemon-fe/components",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "description": "> TODO: description",
   "author": "鲁盛杰 <lusj@cnlemon.net>",
   "homepage": "",
@@ -41,5 +41,5 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "9162635a0745c3de1b02293c9b1e9d6f2ac5b2c1"
+  "gitHead": "e3890cdc2b812e3a8af162990eb1dee841f8e32c"
 }