@lemon-fe/kits 0.1.136 → 1.0.0-0

package/es/layouts/BasicLayout/components/MainFramework/components/TabBar/index.less

@@ -0,0 +1,155 @@
+.@{prefixCls}-nav-tabs-layout {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  overflow-x: hidden;
+
+  &-icon {
+    align-self: center;
+  }
+}
+
+.@{prefixCls}-nav-tabs {
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+  padding: 7px 16px 0;
+  overflow-x: hidden;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 4;
+    display: block;
+    width: 16px;
+    height: 100%;
+    background-color: #fff;
+    border-bottom-right-radius: 10px;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 4;
+    display: block;
+    width: 16px;
+    height: 100%;
+    background-color: #fff;
+    border-bottom-left-radius: 10px;
+    content: '';
+  }
+}
+
+.@{prefixCls}-nav-tab {
+  position: relative;
+  box-sizing: content-box;
+  min-width: 66px;
+  max-width: 120px;
+  height: 43px;
+  cursor: pointer;
+
+  &::before {
+    position: absolute;
+    top: 15px;
+    left: 0;
+    z-index: 5;
+    display: block;
+    width: 1px;
+    height: 12px;
+    background-color: #c4c4c4;
+    opacity: 0.2;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    right: -10px;
+    bottom: 0;
+    left: -10px;
+    z-index: 1;
+    display: block;
+    height: 10px;
+    background-color: #fff;
+    transition: background-color 0.2s;
+    content: '';
+  }
+
+  &-title {
+    position: relative;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    padding: 7px 12px 14px;
+    background-color: #fff;
+    border-radius: 10px;
+    transition: background-color 0.2s;
+  }
+
+  &:hover:not(&-active) &-title,
+  &:hover:not(&-active)::after {
+    background-color: #f9f9f9;
+  }
+
+  &-active &-title,
+  &-active::after {
+    background-color: #f2f2f2;
+  }
+
+  &:hover::after {
+    z-index: 2;
+  }
+
+  &-active::after {
+    z-index: 3;
+  }
+
+  &-active::before,
+  &-active + &::before,
+  &:hover::before,
+  &:hover + &::before {
+    opacity: 0;
+  }
+
+  &-active &-inner {
+    opacity: 1;
+  }
+
+  &-inner {
+    flex: 1;
+    min-width: 28px;
+    overflow: hidden;
+    color: #333;
+    font-size: 14px;
+    line-height: 22px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 0.7;
+
+    &::after {
+      display: inline-block;
+      width: 16px;
+      content: ' ';
+    }
+  }
+
+  &-close {
+    width: 14px;
+    height: 14px;
+    color: #c4c4c4;
+    line-height: 14px;
+    text-align: center;
+    border-radius: 50%;
+
+    &:hover {
+      color: #f2f2f2;
+      background-color: #c1c1c1;
+    }
+  }
+}

package/es/layouts/BasicLayout/components/MainFramework/components/WaterMark/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface Props {
+    waterMark: string;
+}
+export default function WaterMark(props: Props): JSX.Element;
+export {};

package/es/layouts/BasicLayout/components/MainFramework/components/WaterMark/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+function createImgBase(options) {
+  var canvas = document.createElement('canvas');
+  var ratio = window.devicePixelRatio;
+  canvas.width = options.width * ratio;
+  canvas.height = options.height * ratio;
+  var ctx = canvas.getContext('2d');
+
+  if (ctx) {
+    ctx.font = "".concat(options.fontSize * ratio, "px ").concat(options.fontFamily);
+    ctx.fillStyle = options.color;
+    ctx.rotate(options.rotateDegree);
+    ctx.textAlign = 'center';
+    ctx.fillText(options.content, canvas.width / 2, canvas.height / 2);
+  }
+
+  return canvas.toDataURL('image/png');
+}
+
+function genWaterMark(_ref) {
+  var className = _ref.className,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 225 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 225 : _ref$height,
+      _ref$content = _ref.content,
+      content = _ref$content === void 0 ? '水印' : _ref$content,
+      _ref$fontFamily = _ref.fontFamily,
+      fontFamily = _ref$fontFamily === void 0 ? '"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, Arial, sans-serif' : _ref$fontFamily,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'rgba(156, 162, 169, 0.1)' : _ref$color,
+      _ref$rotate = _ref.rotate,
+      rotate = _ref$rotate === void 0 ? -24 : _ref$rotate;
+  var option = {
+    width: width,
+    height: height,
+    content: content,
+    fontSize: fontSize,
+    fontFamily: fontFamily,
+    color: color,
+    rotateDegree: rotate * Math.PI / 180
+  }; // 为了实现交错水印的效果，此处生成两张位置不同的水印 固定相对位置
+
+  var dataUri = createImgBase(option);
+  return ".".concat(className, " {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 10000;\n    background-repeat: repeat;\n    background-image: url(").concat(dataUri, "), url(").concat(dataUri, ");\n    background-size: ").concat(option.width, "px ").concat(option.height, "px;\n    background-position: ").concat(width / 2, "px ").concat(height / 2, "px, 0 0;\n    pointer-events: none;\n  }");
+}
+
+export default function WaterMark(props) {
+  var waterMark = props.waterMark;
+  var ref = useRef(null);
+  var name = 'EVudqS';
+  useEffect(function () {
+    if (waterMark && ref.current !== null) {
+      ref.current.innerHTML = genWaterMark({
+        className: name,
+        content: waterMark
+      });
+    }
+  }, [waterMark]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("style", {
+    ref: ref
+  }), document.head), /*#__PURE__*/React.createElement("div", {
+    className: name
+  }));
+}

package/es/layouts/BasicLayout/components/MainFramework/index.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement, ReactNode, CSSProperties } from 'react';
+import type { MenuFavorites, MenuItem } from './typings';
+interface Props<T> {
+    title: string | ReactNode;
+    logo?: string | false | ReactElement;
+    active: number;
+    tabs: T[];
+    onTabClick: (index: number) => void;
+    onTabClose: (index: number) => void;
+    onRefresh: () => void;
+    onCloseOther: () => void;
+    onCloseAll: () => void;
+    menus?: MenuItem[];
+    onMenuClick?: (menu: MenuItem) => void;
+    renderMenu?: () => ReactNode;
+    favorites?: MenuFavorites;
+    onFavoritesChange?: (value: MenuFavorites) => void;
+    right?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    waterMark?: string;
+}
+export default function MainFramework<TabType extends {
+    title: string;
+    closable?: boolean;
+}>(props: Props<TabType>): JSX.Element;
+export {};

package/es/layouts/BasicLayout/components/MainFramework/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import classNames from 'classnames';
+import TabBar from "./components/TabBar";
+import Menu from "./components/Menu";
+import { PREFIX_CLS as prefixCls } from "../../../../constants";
+import RefreshButton from "./components/RefreshButton";
+import WaterMark from "./components/WaterMark";
+export default function MainFramework(props) {
+  var className = props.className,
+      tabs = props.tabs,
+      active = props.active,
+      children = props.children,
+      right = props.right,
+      _props$menus = props.menus,
+      menus = _props$menus === void 0 ? [] : _props$menus,
+      onTabClick = props.onTabClick,
+      onMenuClick = props.onMenuClick,
+      onTabClose = props.onTabClose,
+      onRefresh = props.onRefresh,
+      onCloseOther = props.onCloseOther,
+      onCloseAll = props.onCloseAll,
+      logo = props.logo,
+      title = props.title,
+      favorites = props.favorites,
+      onFavoritesChange = props.onFavoritesChange,
+      renderMenu = props.renderMenu,
+      style = props.style,
+      waterMark = props.waterMark;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-main"), className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-left")
+  }, logo !== false && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-logo")
+  }, typeof logo === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: logo
+  }) : logo || /*#__PURE__*/React.createElement("svg", {
+    width: "15",
+    height: "22",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M3.403 10.313c.194-.163.393-.324.6-.481 1.47-1.123 2.592-2.339 3.333-3.622a7.805 7.805 0 0 0 1.101-4.036L8.427.966C8.159.657 7.906.335 7.67 0c-.26.384-.544.752-.849 1.103a15.52 15.52 0 0 1-2.336 2.165C2.853 4.514 1.67 5.858.938 7.28c.563 1.06 1.391 2.073 2.461 3.027M3.602 12.008a17.318 17.318 0 0 1-.835-.711C1.782 10.4.99 9.44.402 8.437a8.004 8.004 0 0 0 .362 5.91c.677 1.448 1.812 2.814 3.375 4.053.502.398.981.828 1.434 1.288v-.264a8.913 8.913 0 0 1 .99-4.146c-.687-1.157-1.683-2.256-2.96-3.276M11.025 12.036c-1.482 1.092-2.611 2.27-3.355 3.51a7.355 7.355 0 0 0-1.107 3.91l.008 1.173c.272.298.528.61.764.933.263-.372.549-.73.856-1.07a15.398 15.398 0 0 1 2.346-2.098c2.984-2.196 4.486-4.693 4.463-7.42a7.134 7.134 0 0 0-.489-2.537c-.802 1.278-1.971 2.484-3.486 3.597M11.353 9.828c.186.156.371.317.553.485.945-.983 1.668-2.02 2.156-3.096-.675-1.429-1.765-2.778-3.239-4.01-.496-.411-.968-.856-1.414-1.332v.268a9.617 9.617 0 0 1-.972 4.298c.68 1.201 1.661 2.34 2.917 3.387"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-title")
+  }, title, waterMark && /*#__PURE__*/React.createElement(WaterMark, {
+    waterMark: waterMark
+  }))), /*#__PURE__*/React.createElement(TabBar, {
+    tabs: tabs,
+    active: active,
+    onClick: onTabClick,
+    onClose: onTabClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-right")
+  }, /*#__PURE__*/React.createElement(RefreshButton, {
+    onRefresh: onRefresh,
+    onCloseAll: onCloseAll,
+    onCloseOther: onCloseOther
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-nav-divider")
+  }), right)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body")
+  }, renderMenu ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-menu")
+  }, renderMenu()) : /*#__PURE__*/React.createElement(Menu, {
+    data: menus,
+    onClick: onMenuClick,
+    favorites: favorites,
+    onFavoritesChange: onFavoritesChange
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, children)));
+}

package/es/layouts/BasicLayout/components/MainFramework/index.less

@@ -0,0 +1,97 @@
+@import './components/Menu/index.less';
+@import './components/TabBar/index.less';
+@import './components/DropMenu/index.less';
+@import './components/RefreshButton/index.less';
+
+.@{prefixCls}-main {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  min-width: 768px;
+  height: 100vh;
+  background: #f2f2f2;
+}
+
+.@{prefixCls}-nav {
+  position: relative;
+  z-index: 4;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 50px;
+  padding: 0 16px;
+  background: #ffff;
+
+  &-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    margin-right: 8px;
+    color: .primary(1) [];
+
+    & > img {
+      display: block;
+      height: 24px;
+      margin: 0 auto;
+    }
+  }
+
+  &-title {
+    color: #000;
+    font-weight: 500;
+    font-size: 16px;
+  }
+
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+  }
+
+  &-left {
+    flex: 0 0 184px;
+    box-sizing: border-box;
+  }
+
+  &-right {
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+  }
+
+  &-divider {
+    width: 1px;
+    height: 14px;
+    margin: 0 9px;
+    background: #c4c4c4;
+  }
+}
+
+.@{prefixCls}-body {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.@{prefixCls}-content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  min-width: 0;
+
+  &-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  & > div {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
+}

package/es/layouts/BasicLayout/components/MainFramework/typings.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+
+export type MenuItem = {
+  name: string;
+  path?: string;
+  icon?: string | ReactElement;
+  children?: MenuItem[];
+};
+
+export type MenuFavorites = { name: string; path?: string }[];

package/es/layouts/BasicLayout/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { BasicLayoutProps } from './typings';
+export default function BasicLayout<AuthResponse>(props: BasicLayoutProps<AuthResponse>): JSX.Element;

package/es/layouts/BasicLayout/index.js

@@ -0,0 +1,98 @@
+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, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useRequest } from '@lemon-fe/hooks';
+import PageLoading from "../../components/PageLoading";
+import Main from "./components/Main";
+export default function BasicLayout(props) {
+  var title = props.title,
+      logo = props.logo,
+      menus = props.menus,
+      routes = props.routes,
+      right = props.right,
+      auth = props.auth,
+      authorities = props.authorities,
+      topTabs = props.topTabs,
+      waterMark = props.waterMark;
+
+  var _useState = useState(!!auth),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var history = useHistory();
+
+  var _useRequest = useRequest(function () {
+    if (auth) {
+      return auth.check();
+    }
+
+    return Promise.resolve();
+  }, {
+    onSuccess: function onSuccess(res) {
+      if ((auth === null || auth === void 0 ? void 0 : auth.onSuccess) !== undefined) {
+        auth.onSuccess(res);
+      }
+
+      setLoading(false);
+    },
+    onError: function onError(err) {
+      if ((auth === null || auth === void 0 ? void 0 : auth.onFail) !== undefined) {
+        auth.onFail(err);
+      } else if ((auth === null || auth === void 0 ? void 0 : auth.redirectURL) !== undefined) {
+        if (/^(?:http|https):\/\//.test(auth.redirectURL)) {
+          var url = new URL(auth.redirectURL);
+          var search = new URLSearchParams(url.search);
+          search.set('redirect', encodeURIComponent(window.location.href));
+          url.search = search.toString();
+          window.location.href = url.toString();
+        } else {
+          var result = /([^?]*)(\?.*)?/.exec(auth.redirectURL);
+
+          if (result !== null) {
+            var pathname = result[1];
+
+            var _search = new URLSearchParams(result[2]);
+
+            _search.set('redirect', encodeURIComponent(window.location.href));
+
+            history.replace("".concat(pathname, "?").concat(_search.toString()));
+          }
+        }
+      }
+    }
+  }),
+      request = _useRequest.run;
+
+  useEffect(function () {
+    if (auth) {
+      request();
+    }
+  }, []);
+
+  if (loading) {
+    return /*#__PURE__*/React.createElement(PageLoading, null);
+  }
+
+  return /*#__PURE__*/React.createElement(Main, {
+    waterMark: waterMark,
+    logo: logo,
+    authorities: authorities,
+    routes: routes,
+    title: title,
+    menus: menus,
+    right: right,
+    topTabs: topTabs
+  });
+}

package/es/layouts/BasicLayout/typings.d.ts

@@ -0,0 +1,82 @@
+import type { FunctionComponent, ReactElement, ReactNode, ReactText } from 'react';
+import type { match, useLocation } from 'react-router';
+import type { Location, IRoute } from '../typings';
+
+export interface MenuItem {
+  name: string;
+  path?: string;
+  children?: MenuItem[];
+  icon?: string | ReactElement;
+  authority?: ReactText[] | ReactText;
+}
+
+export type MenuFavorites = { name: string; path?: string }[];
+
+export interface BasicLayoutProps<AuthResponse = unknown> {
+  /**
+   * @description 应用左上角标题
+   */
+  title: string | ReactNode;
+  /**
+   * @description 应用左上角logo
+   */
+  logo?: string | false | ReactElement;
+  /**
+   * @description 菜单配置项，最多支持三级
+   */
+  menus: MenuItem[];
+  /**
+   * @description 不传入routes的情况下，渲染的内容
+   */
+  children?: ReactNode;
+  /**
+   * @description 左上角显示的内容
+   */
+  right?: ReactNode;
+  /**
+   * @description 路由配置
+   */
+  routes?: IRoute[];
+  /**
+   * @description 用户包含的所有权限
+   */
+  authorities?: ReactText[];
+  /**
+   * @description 自动登录校验过程， 可以在其中校验用户凭证是否有效，并且设置全局的用户信息
+   */
+  auth?: {
+    redirectURL?: string;
+    check: () => Promise<AuthResponse>;
+    onFail?: (err: Error) => void;
+    onSuccess?: (res: AuthResponse) => void;
+  };
+  /**
+   * @description 置顶得路由，一般来说是主页
+   */
+  topTabs?: {
+    title: string;
+    path: string;
+  }[];
+  /**
+   * @description 收藏夹 如果不传则内部实现
+   */
+  favorites?: MenuFavorites;
+  /**
+   * @description 收藏夹变更
+   */
+  onFavoritesChange?: (value: MenuFavorites) => void;
+  /**
+   * @description 水印文字
+   */
+   waterMark?: string;
+}
+
+export type TabType = {
+  rootPath: string;
+  route: IRoute;
+  match: match;
+  location: Location;
+  title: string;
+  closable?: boolean;
+  refreshCount?: number;
+};

package/es/layouts/BlankLayout/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare function BlankLayout(props: {
+    children?: JSX.Element;
+}): JSX.Element | null;
+export default BlankLayout;

package/es/layouts/BlankLayout/index.js

@@ -0,0 +1,5 @@
+function BlankLayout(props) {
+  return props.children || null;
+}
+
+export default BlankLayout;

package/es/layouts/Breadcrumb/index.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+interface Props {
+    children?: ReactNode;
+}
+export default function Breadcrumb(props: Props): JSX.Element;
+export {};