wssf-kage-ui 0.1.0 → 0.1.1

package/dist/esm/Grid/index.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import './style.less';
+type Gutter = number | [number, number];
+type JustifyContent = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+type AlignItems = 'top' | 'middle' | 'bottom' | 'stretch';
+export interface RowProps {
+    /** 栅格间隔，可以是数字或数组 [水平间距, 垂直间距] */
+    gutter?: Gutter;
+    /** 水平排列方式 */
+    justify?: JustifyContent;
+    /** 垂直对齐方式 */
+    align?: AlignItems;
+    /** 是否自动换行 */
+    wrap?: boolean;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Row: React.FC<RowProps>;
+type ColSpan = number;
+interface ColSize {
+    span?: ColSpan;
+    offset?: number;
+    order?: number;
+    pull?: number;
+    push?: number;
+}
+export interface ColProps {
+    /** 栅格占位格数，为 0 时相当于 display: none */
+    span?: ColSpan;
+    /** 栅格左侧偏移格数 */
+    offset?: number;
+    /** 栅格顺序 */
+    order?: number;
+    /** 栅格向左移动格数 */
+    pull?: number;
+    /** 栅格向右移动格数 */
+    push?: number;
+    /** flex 布局属性 */
+    flex?: string | number;
+    /** <576px 响应式栅格 */
+    xs?: ColSpan | ColSize;
+    /** ≥576px 响应式栅格 */
+    sm?: ColSpan | ColSize;
+    /** ≥768px 响应式栅格 */
+    md?: ColSpan | ColSize;
+    /** ≥992px 响应式栅格 */
+    lg?: ColSpan | ColSize;
+    /** ≥1200px 响应式栅格 */
+    xl?: ColSpan | ColSize;
+    /** ≥1600px 响应式栅格 */
+    xxl?: ColSpan | ColSize;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Col: React.FC<ColProps>;
+type GridType = {
+    Row: typeof Row;
+    Col: typeof Col;
+};
+declare const Grid: GridType;
+export default Grid;

package/dist/esm/Grid/index.js

@@ -0,0 +1,165 @@
+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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { createContext, useContext } from 'react';
+import "./style.less";
+
+// ============ Row Context ============
+import { jsx as _jsx } from "react/jsx-runtime";
+var RowContext = /*#__PURE__*/createContext({
+  gutter: [0, 0]
+});
+
+// ============ Row 行组件 ============
+
+export var Row = function Row(_ref) {
+  var _ref$gutter = _ref.gutter,
+    gutter = _ref$gutter === void 0 ? 0 : _ref$gutter,
+    justify = _ref.justify,
+    align = _ref.align,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? true : _ref$wrap,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  // 处理 gutter
+  var gutterValue = Array.isArray(gutter) ? gutter : [gutter, 0];
+  var _gutterValue = _slicedToArray(gutterValue, 2),
+    horizontalGutter = _gutterValue[0],
+    verticalGutter = _gutterValue[1];
+
+  // justify 映射
+  var justifyMap = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    'space-around': 'space-around',
+    'space-between': 'space-between',
+    'space-evenly': 'space-evenly'
+  };
+
+  // align 映射
+  var alignMap = {
+    top: 'flex-start',
+    middle: 'center',
+    bottom: 'flex-end',
+    stretch: 'stretch'
+  };
+  var classNames = ['kage-row', className].filter(Boolean).join(' ');
+  var rowStyle = _objectSpread({
+    marginLeft: horizontalGutter ? -horizontalGutter / 2 : undefined,
+    marginRight: horizontalGutter ? -horizontalGutter / 2 : undefined,
+    rowGap: verticalGutter || undefined,
+    justifyContent: justify ? justifyMap[justify] : undefined,
+    alignItems: align ? alignMap[align] : undefined,
+    flexWrap: wrap ? 'wrap' : 'nowrap'
+  }, style);
+  return /*#__PURE__*/_jsx(RowContext.Provider, {
+    value: {
+      gutter: gutterValue
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames,
+      style: rowStyle,
+      children: children
+    })
+  });
+};
+
+// ============ Col 列组件 ============
+
+export var Col = function Col(_ref2) {
+  var span = _ref2.span,
+    offset = _ref2.offset,
+    order = _ref2.order,
+    pull = _ref2.pull,
+    push = _ref2.push,
+    flex = _ref2.flex,
+    xs = _ref2.xs,
+    sm = _ref2.sm,
+    md = _ref2.md,
+    lg = _ref2.lg,
+    xl = _ref2.xl,
+    xxl = _ref2.xxl,
+    children = _ref2.children,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style;
+  var _useContext = useContext(RowContext),
+    gutter = _useContext.gutter;
+  var _gutter = _slicedToArray(gutter, 1),
+    horizontalGutter = _gutter[0];
+
+  // 构建响应式类名
+  var getResponsiveClasses = function getResponsiveClasses() {
+    var classes = [];
+    var sizes = {
+      xs: xs,
+      sm: sm,
+      md: md,
+      lg: lg,
+      xl: xl,
+      xxl: xxl
+    };
+    Object.entries(sizes).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        size = _ref4[0],
+        value = _ref4[1];
+      if (value !== undefined) {
+        if (typeof value === 'number') {
+          classes.push("kage-col-".concat(size, "-").concat(value));
+        } else if (_typeof(value) === 'object') {
+          if (value.span !== undefined) {
+            classes.push("kage-col-".concat(size, "-").concat(value.span));
+          }
+          if (value.offset !== undefined) {
+            classes.push("kage-col-".concat(size, "-offset-").concat(value.offset));
+          }
+          if (value.order !== undefined) {
+            classes.push("kage-col-".concat(size, "-order-").concat(value.order));
+          }
+          if (value.pull !== undefined) {
+            classes.push("kage-col-".concat(size, "-pull-").concat(value.pull));
+          }
+          if (value.push !== undefined) {
+            classes.push("kage-col-".concat(size, "-push-").concat(value.push));
+          }
+        }
+      }
+    });
+    return classes;
+  };
+  var classNames = ['kage-col', span !== undefined && "kage-col-".concat(span), offset !== undefined && "kage-col-offset-".concat(offset), order !== undefined && "kage-col-order-".concat(order), pull !== undefined && "kage-col-pull-".concat(pull), push !== undefined && "kage-col-push-".concat(push)].concat(_toConsumableArray(getResponsiveClasses()), [className]).filter(Boolean).join(' ');
+  var colStyle = _objectSpread({
+    paddingLeft: horizontalGutter ? horizontalGutter / 2 : undefined,
+    paddingRight: horizontalGutter ? horizontalGutter / 2 : undefined,
+    flex: flex !== undefined ? typeof flex === 'number' ? "".concat(flex, " ").concat(flex, " auto") : flex : undefined
+  }, style);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    style: colStyle,
+    children: children
+  });
+};
+
+// ============ Grid 命名空间导出 ============
+
+var Grid = {
+  Row: Row,
+  Col: Col
+};
+export default Grid;

package/dist/esm/Grid/style.less

@@ -0,0 +1,273 @@
+// Grid 栅格组件样式
+
+@prefix-row: kage-row;
+@prefix-col: kage-col;
+
+// 响应式断点
+@screen-xs: 576px;
+@screen-sm: 576px;
+@screen-md: 768px;
+@screen-lg: 992px;
+@screen-xl: 1200px;
+@screen-xxl: 1600px;
+
+// ============ Row 样式 ============
+.@{prefix-row} {
+  display: flex;
+  flex-flow: row wrap;
+  min-width: 0;
+
+  &::before,
+  &::after {
+    display: flex;
+  }
+}
+
+// ============ Col 样式 ============
+.@{prefix-col} {
+  position: relative;
+  max-width: 100%;
+  min-height: 1px;
+  box-sizing: border-box;
+}
+
+// ============ 生成基础栅格 ============
+.@{prefix-col}-0 { display: none; }
+.@{prefix-col}-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+.@{prefix-col}-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+.@{prefix-col}-3 { flex: 0 0 12.5%; max-width: 12.5%; }
+.@{prefix-col}-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+.@{prefix-col}-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+.@{prefix-col}-6 { flex: 0 0 25%; max-width: 25%; }
+.@{prefix-col}-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+.@{prefix-col}-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+.@{prefix-col}-9 { flex: 0 0 37.5%; max-width: 37.5%; }
+.@{prefix-col}-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+.@{prefix-col}-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+.@{prefix-col}-12 { flex: 0 0 50%; max-width: 50%; }
+.@{prefix-col}-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+.@{prefix-col}-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+.@{prefix-col}-15 { flex: 0 0 62.5%; max-width: 62.5%; }
+.@{prefix-col}-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+.@{prefix-col}-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+.@{prefix-col}-18 { flex: 0 0 75%; max-width: 75%; }
+.@{prefix-col}-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+.@{prefix-col}-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+.@{prefix-col}-21 { flex: 0 0 87.5%; max-width: 87.5%; }
+.@{prefix-col}-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+.@{prefix-col}-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+.@{prefix-col}-24 { flex: 0 0 100%; max-width: 100%; }
+
+// ============ Offset ============
+.@{prefix-col}-offset-0 { margin-left: 0; }
+.@{prefix-col}-offset-1 { margin-left: 4.16666667%; }
+.@{prefix-col}-offset-2 { margin-left: 8.33333333%; }
+.@{prefix-col}-offset-3 { margin-left: 12.5%; }
+.@{prefix-col}-offset-4 { margin-left: 16.66666667%; }
+.@{prefix-col}-offset-5 { margin-left: 20.83333333%; }
+.@{prefix-col}-offset-6 { margin-left: 25%; }
+.@{prefix-col}-offset-7 { margin-left: 29.16666667%; }
+.@{prefix-col}-offset-8 { margin-left: 33.33333333%; }
+.@{prefix-col}-offset-9 { margin-left: 37.5%; }
+.@{prefix-col}-offset-10 { margin-left: 41.66666667%; }
+.@{prefix-col}-offset-11 { margin-left: 45.83333333%; }
+.@{prefix-col}-offset-12 { margin-left: 50%; }
+.@{prefix-col}-offset-13 { margin-left: 54.16666667%; }
+.@{prefix-col}-offset-14 { margin-left: 58.33333333%; }
+.@{prefix-col}-offset-15 { margin-left: 62.5%; }
+.@{prefix-col}-offset-16 { margin-left: 66.66666667%; }
+.@{prefix-col}-offset-17 { margin-left: 70.83333333%; }
+.@{prefix-col}-offset-18 { margin-left: 75%; }
+.@{prefix-col}-offset-19 { margin-left: 79.16666667%; }
+.@{prefix-col}-offset-20 { margin-left: 83.33333333%; }
+.@{prefix-col}-offset-21 { margin-left: 87.5%; }
+.@{prefix-col}-offset-22 { margin-left: 91.66666667%; }
+.@{prefix-col}-offset-23 { margin-left: 95.83333333%; }
+.@{prefix-col}-offset-24 { margin-left: 100%; }
+
+// ============ Order ============
+.@{prefix-col}-order-0 { order: 0; }
+.@{prefix-col}-order-1 { order: 1; }
+.@{prefix-col}-order-2 { order: 2; }
+.@{prefix-col}-order-3 { order: 3; }
+.@{prefix-col}-order-4 { order: 4; }
+.@{prefix-col}-order-5 { order: 5; }
+.@{prefix-col}-order-6 { order: 6; }
+.@{prefix-col}-order-7 { order: 7; }
+.@{prefix-col}-order-8 { order: 8; }
+.@{prefix-col}-order-9 { order: 9; }
+.@{prefix-col}-order-10 { order: 10; }
+.@{prefix-col}-order-11 { order: 11; }
+.@{prefix-col}-order-12 { order: 12; }
+
+// ============ 响应式 xs ============
+.@{prefix-col}-xs-0 { display: none; }
+.@{prefix-col}-xs-1 { flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+.@{prefix-col}-xs-2 { flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+.@{prefix-col}-xs-3 { flex: 0 0 12.5%; max-width: 12.5%; }
+.@{prefix-col}-xs-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+.@{prefix-col}-xs-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+.@{prefix-col}-xs-6 { flex: 0 0 25%; max-width: 25%; }
+.@{prefix-col}-xs-7 { flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+.@{prefix-col}-xs-8 { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+.@{prefix-col}-xs-9 { flex: 0 0 37.5%; max-width: 37.5%; }
+.@{prefix-col}-xs-10 { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+.@{prefix-col}-xs-11 { flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+.@{prefix-col}-xs-12 { flex: 0 0 50%; max-width: 50%; }
+.@{prefix-col}-xs-13 { flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+.@{prefix-col}-xs-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+.@{prefix-col}-xs-15 { flex: 0 0 62.5%; max-width: 62.5%; }
+.@{prefix-col}-xs-16 { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+.@{prefix-col}-xs-17 { flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+.@{prefix-col}-xs-18 { flex: 0 0 75%; max-width: 75%; }
+.@{prefix-col}-xs-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+.@{prefix-col}-xs-20 { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+.@{prefix-col}-xs-21 { flex: 0 0 87.5%; max-width: 87.5%; }
+.@{prefix-col}-xs-22 { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+.@{prefix-col}-xs-23 { flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+.@{prefix-col}-xs-24 { flex: 0 0 100%; max-width: 100%; }
+
+// ============ 响应式 sm ============
+@media (min-width: @screen-sm) {
+  .@{prefix-col}-sm-0 { display: none; }
+  .@{prefix-col}-sm-1 { display: block; flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+  .@{prefix-col}-sm-2 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+  .@{prefix-col}-sm-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
+  .@{prefix-col}-sm-4 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+  .@{prefix-col}-sm-5 { display: block; flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+  .@{prefix-col}-sm-6 { display: block; flex: 0 0 25%; max-width: 25%; }
+  .@{prefix-col}-sm-7 { display: block; flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+  .@{prefix-col}-sm-8 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+  .@{prefix-col}-sm-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
+  .@{prefix-col}-sm-10 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+  .@{prefix-col}-sm-11 { display: block; flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+  .@{prefix-col}-sm-12 { display: block; flex: 0 0 50%; max-width: 50%; }
+  .@{prefix-col}-sm-13 { display: block; flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+  .@{prefix-col}-sm-14 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+  .@{prefix-col}-sm-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
+  .@{prefix-col}-sm-16 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+  .@{prefix-col}-sm-17 { display: block; flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+  .@{prefix-col}-sm-18 { display: block; flex: 0 0 75%; max-width: 75%; }
+  .@{prefix-col}-sm-19 { display: block; flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+  .@{prefix-col}-sm-20 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+  .@{prefix-col}-sm-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
+  .@{prefix-col}-sm-22 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+  .@{prefix-col}-sm-23 { display: block; flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+  .@{prefix-col}-sm-24 { display: block; flex: 0 0 100%; max-width: 100%; }
+}
+
+// ============ 响应式 md ============
+@media (min-width: @screen-md) {
+  .@{prefix-col}-md-0 { display: none; }
+  .@{prefix-col}-md-1 { display: block; flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+  .@{prefix-col}-md-2 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+  .@{prefix-col}-md-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
+  .@{prefix-col}-md-4 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+  .@{prefix-col}-md-5 { display: block; flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+  .@{prefix-col}-md-6 { display: block; flex: 0 0 25%; max-width: 25%; }
+  .@{prefix-col}-md-7 { display: block; flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+  .@{prefix-col}-md-8 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+  .@{prefix-col}-md-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
+  .@{prefix-col}-md-10 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+  .@{prefix-col}-md-11 { display: block; flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+  .@{prefix-col}-md-12 { display: block; flex: 0 0 50%; max-width: 50%; }
+  .@{prefix-col}-md-13 { display: block; flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+  .@{prefix-col}-md-14 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+  .@{prefix-col}-md-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
+  .@{prefix-col}-md-16 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+  .@{prefix-col}-md-17 { display: block; flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+  .@{prefix-col}-md-18 { display: block; flex: 0 0 75%; max-width: 75%; }
+  .@{prefix-col}-md-19 { display: block; flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+  .@{prefix-col}-md-20 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+  .@{prefix-col}-md-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
+  .@{prefix-col}-md-22 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+  .@{prefix-col}-md-23 { display: block; flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+  .@{prefix-col}-md-24 { display: block; flex: 0 0 100%; max-width: 100%; }
+}
+
+// ============ 响应式 lg ============
+@media (min-width: @screen-lg) {
+  .@{prefix-col}-lg-0 { display: none; }
+  .@{prefix-col}-lg-1 { display: block; flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+  .@{prefix-col}-lg-2 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+  .@{prefix-col}-lg-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
+  .@{prefix-col}-lg-4 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+  .@{prefix-col}-lg-5 { display: block; flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+  .@{prefix-col}-lg-6 { display: block; flex: 0 0 25%; max-width: 25%; }
+  .@{prefix-col}-lg-7 { display: block; flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+  .@{prefix-col}-lg-8 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+  .@{prefix-col}-lg-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
+  .@{prefix-col}-lg-10 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+  .@{prefix-col}-lg-11 { display: block; flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+  .@{prefix-col}-lg-12 { display: block; flex: 0 0 50%; max-width: 50%; }
+  .@{prefix-col}-lg-13 { display: block; flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+  .@{prefix-col}-lg-14 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+  .@{prefix-col}-lg-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
+  .@{prefix-col}-lg-16 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+  .@{prefix-col}-lg-17 { display: block; flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+  .@{prefix-col}-lg-18 { display: block; flex: 0 0 75%; max-width: 75%; }
+  .@{prefix-col}-lg-19 { display: block; flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+  .@{prefix-col}-lg-20 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+  .@{prefix-col}-lg-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
+  .@{prefix-col}-lg-22 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+  .@{prefix-col}-lg-23 { display: block; flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+  .@{prefix-col}-lg-24 { display: block; flex: 0 0 100%; max-width: 100%; }
+}
+
+// ============ 响应式 xl ============
+@media (min-width: @screen-xl) {
+  .@{prefix-col}-xl-0 { display: none; }
+  .@{prefix-col}-xl-1 { display: block; flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+  .@{prefix-col}-xl-2 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+  .@{prefix-col}-xl-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
+  .@{prefix-col}-xl-4 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+  .@{prefix-col}-xl-5 { display: block; flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+  .@{prefix-col}-xl-6 { display: block; flex: 0 0 25%; max-width: 25%; }
+  .@{prefix-col}-xl-7 { display: block; flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+  .@{prefix-col}-xl-8 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+  .@{prefix-col}-xl-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
+  .@{prefix-col}-xl-10 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+  .@{prefix-col}-xl-11 { display: block; flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+  .@{prefix-col}-xl-12 { display: block; flex: 0 0 50%; max-width: 50%; }
+  .@{prefix-col}-xl-13 { display: block; flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+  .@{prefix-col}-xl-14 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+  .@{prefix-col}-xl-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
+  .@{prefix-col}-xl-16 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+  .@{prefix-col}-xl-17 { display: block; flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+  .@{prefix-col}-xl-18 { display: block; flex: 0 0 75%; max-width: 75%; }
+  .@{prefix-col}-xl-19 { display: block; flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+  .@{prefix-col}-xl-20 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+  .@{prefix-col}-xl-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
+  .@{prefix-col}-xl-22 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+  .@{prefix-col}-xl-23 { display: block; flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+  .@{prefix-col}-xl-24 { display: block; flex: 0 0 100%; max-width: 100%; }
+}
+
+// ============ 响应式 xxl ============
+@media (min-width: @screen-xxl) {
+  .@{prefix-col}-xxl-0 { display: none; }
+  .@{prefix-col}-xxl-1 { display: block; flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+  .@{prefix-col}-xxl-2 { display: block; flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+  .@{prefix-col}-xxl-3 { display: block; flex: 0 0 12.5%; max-width: 12.5%; }
+  .@{prefix-col}-xxl-4 { display: block; flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+  .@{prefix-col}-xxl-5 { display: block; flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+  .@{prefix-col}-xxl-6 { display: block; flex: 0 0 25%; max-width: 25%; }
+  .@{prefix-col}-xxl-7 { display: block; flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+  .@{prefix-col}-xxl-8 { display: block; flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+  .@{prefix-col}-xxl-9 { display: block; flex: 0 0 37.5%; max-width: 37.5%; }
+  .@{prefix-col}-xxl-10 { display: block; flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+  .@{prefix-col}-xxl-11 { display: block; flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+  .@{prefix-col}-xxl-12 { display: block; flex: 0 0 50%; max-width: 50%; }
+  .@{prefix-col}-xxl-13 { display: block; flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+  .@{prefix-col}-xxl-14 { display: block; flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+  .@{prefix-col}-xxl-15 { display: block; flex: 0 0 62.5%; max-width: 62.5%; }
+  .@{prefix-col}-xxl-16 { display: block; flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+  .@{prefix-col}-xxl-17 { display: block; flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+  .@{prefix-col}-xxl-18 { display: block; flex: 0 0 75%; max-width: 75%; }
+  .@{prefix-col}-xxl-19 { display: block; flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+  .@{prefix-col}-xxl-20 { display: block; flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+  .@{prefix-col}-xxl-21 { display: block; flex: 0 0 87.5%; max-width: 87.5%; }
+  .@{prefix-col}-xxl-22 { display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+  .@{prefix-col}-xxl-23 { display: block; flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+  .@{prefix-col}-xxl-24 { display: block; flex: 0 0 100%; max-width: 100%; }
+}

package/dist/esm/Layout/index.d.ts

@@ -0,0 +1,74 @@
+import React from 'react';
+import './style.less';
+export interface LayoutProps {
+    /** 是否有侧边栏（自动检测子组件） */
+    hasSider?: boolean;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+interface LayoutComponent extends React.FC<LayoutProps> {
+    Header: typeof Header;
+    Sider: typeof Sider;
+    Content: typeof Content;
+    Footer: typeof Footer;
+}
+export interface HeaderProps {
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Header: React.FC<HeaderProps>;
+export interface SiderProps {
+    /** 宽度 */
+    width?: number | string;
+    /** 收缩后的宽度 */
+    collapsedWidth?: number | string;
+    /** 是否可收起 */
+    collapsible?: boolean;
+    /** 是否收起状态 */
+    collapsed?: boolean;
+    /** 默认收起状态 */
+    defaultCollapsed?: boolean;
+    /** 收起时触发 */
+    onCollapse?: (collapsed: boolean) => void;
+    /** 触发器位置 */
+    trigger?: React.ReactNode | null;
+    /** 主题颜色 */
+    theme?: 'light' | 'dark';
+    /** 断点，触发响应式布局 */
+    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Sider: React.FC<SiderProps>;
+export interface ContentProps {
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Content: React.FC<ContentProps>;
+export interface FooterProps {
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Footer: React.FC<FooterProps>;
+declare const Layout: LayoutComponent;
+export default Layout;