@yueglobal/ui 1.0.0

package/dist/yue-page-header/second-menus/index.js

@@ -0,0 +1,132 @@
+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 { ConfigProvider, Menu } from 'antd';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import Breadcrumb from "../breadcrumb";
+import { flattenMenuList, flattenTreeList } from "../helper";
+import "./index.less";
+var Index = function Index(_ref) {
+  var width = _ref.width,
+    pageTitle = _ref.pageTitle,
+    pageIcon = _ref.pageIcon,
+    breadcrumbs = _ref.breadcrumbs,
+    routes = _ref.routes,
+    menuItems = _ref.menuItems,
+    pathname = _ref.pathname,
+    visible = _ref.visible,
+    onRouteChange = _ref.onRouteChange;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKeys = _useState2[0],
+    setSelectedKeys = _useState2[1];
+  useEffect(function () {
+    if (pathname) setSelectedKeys([pathname]);
+  }, [pathname]);
+
+  // 应用数据
+  var moduleData = useMemo(function () {
+    var title = pageTitle;
+    var icon = pageIcon;
+    if (!title || !icon) {
+      var menuList = flattenMenuList(true);
+      var _window$location = window.location,
+        origin = _window$location.origin,
+        _pathname = _window$location.pathname;
+      var url = origin + _pathname;
+      var current = menuList.find(function (m) {
+        return !!(m !== null && m !== void 0 && m.key) && url.startsWith("".concat(m.key));
+      });
+      if (!current && pageTitle) {
+        current = menuList.find(function (m) {
+          return (m === null || m === void 0 ? void 0 : m.label) === pageTitle;
+        });
+      }
+      if (current) {
+        if (!title) {
+          title = current.label;
+        }
+        if (!icon) {
+          icon = current.icon;
+        }
+      }
+    }
+    return {
+      title: title,
+      icon: icon
+    };
+  }, [pageTitle, pageIcon]);
+  var onMenuClick = function onMenuClick(_ref2) {
+    var key = _ref2.key,
+      selectedKeys = _ref2.selectedKeys;
+    setSelectedKeys(selectedKeys);
+    if (onRouteChange && menuItems !== null && menuItems !== void 0 && menuItems.length) {
+      var menuList = flattenTreeList(menuItems);
+      var current = menuList.find(function (m) {
+        return m.key === key;
+      });
+      var value = {
+        key: key
+      };
+      if (current !== null && current !== void 0 && current.label) {
+        value.label = current.label;
+      }
+      onRouteChange === null || onRouteChange === void 0 || onRouteChange(value);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'yue-page-header-second-menu' + (visible ? ' hidden' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yue-flex wrapper",
+    style: {
+      width: width
+    }
+  }, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Menu: {
+          activeBarHeight: 0,
+          itemPaddingInline: 0,
+          itemColor: '#fff',
+          dropdownWidth: '100%',
+          horizontalItemSelectedColor: '#17D8B0',
+          subMenuItemSelectedColor: '#17D8B0',
+          itemHoverColor: '#fff'
+        },
+        Breadcrumb: {
+          itemColor: '#fff',
+          lastItemColor: 'rgba(255,255,255,0.9)',
+          separatorColor: 'rgba(255,255,255,0.65)',
+          separatorMargin: 6
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yue-flex left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "yue-flex module-info"
+  }, !!moduleData.icon && /*#__PURE__*/React.createElement("span", {
+    className: "module-icon"
+  }, moduleData.icon), !!moduleData.title && /*#__PURE__*/React.createElement("span", {
+    className: "module-title"
+  }, moduleData.title)), /*#__PURE__*/React.createElement("div", {
+    className: "vr"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "menus"
+  }, /*#__PURE__*/React.createElement(Menu, {
+    items: menuItems,
+    mode: "horizontal",
+    rootClassName: "yue-second-menu-bar",
+    onSelect: onMenuClick,
+    selectedKeys: selectedKeys
+  }))), /*#__PURE__*/React.createElement(Breadcrumb, {
+    breadcrumbs: breadcrumbs,
+    routes: routes,
+    pathname: pathname,
+    onRouteChange: onRouteChange
+  }))));
+};
+export default /*#__PURE__*/memo(Index);

package/dist/yue-page-header/second-menus/index.less

@@ -0,0 +1,161 @@
+.yue-page-header-second-menu {
+  height: 60px;
+  background: linear-gradient(90deg, #17f1a1, #1a4bff);
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+
+  &.hidden {
+    //opacity: 0;
+  }
+
+  .wrapper {
+    margin: 0 auto;
+    justify-content: space-between;
+    height: 100%;
+    color: #fff;
+    max-width: 100%;
+  }
+
+  .left {
+    gap: 20px;
+    height: 100%;
+  }
+
+  .module-info {
+    gap: 14px;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
+
+  .module-icon {
+    font-size: 27px;
+    line-height: 0;
+  }
+
+  .module-title {
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .vr {
+    width: 1px;
+    height: 28px;
+    background-color: rgba(255, 255, 255, 85%);
+    flex-shrink: 0;
+  }
+
+  .menus {
+    //max-width: 82%;
+    height: 100%;
+    padding-block: 1px;
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+
+  .breadcrumb {
+    gap: 12px;
+    flex-shrink: 0;
+
+    a {
+      height: max-content;
+      color: #fff;
+
+      &:hover {
+        color: #fff;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.yue-second-menu-bar {
+  &.ant-menu-root {
+    background-color: transparent;
+    font-size: 18px;
+    height: 100%;
+    border-bottom: none;
+    gap: 4px;
+
+    & > li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-submenu-title {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .ant-menu-title-content {
+      height: 34px;
+      line-height: 32px;
+      border-radius: 16px;
+      padding-inline: 16px;
+    }
+
+    .ant-menu-submenu-active,
+    .ant-menu-item-active {
+      .ant-menu-title-content {
+        background-color: rgba(255, 255, 255, 20%);
+      }
+    }
+
+    .ant-menu-submenu-selected,
+    .ant-menu-item-selected {
+      .ant-menu-title-content {
+        background-color: #fff;
+      }
+    }
+  }
+
+  &.ant-menu-submenu-popup {
+    left: 0 !important;
+    padding: 0;
+    font-size: 18px;
+    background-color: rgba(0, 0, 0, 45%);
+    border-radius: 0;
+    width: 100%;
+
+    .ant-menu-sub {
+      display: flex;
+      justify-content: center;
+      background-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .ant-menu-item {
+      width: max-content;
+      flex: unset;
+      color: #fff;
+      margin: 0;
+      border-radius: 0;
+      height: 60px;
+      line-height: 30px;
+      display: flex;
+      align-items: center;
+      padding-inline: 25px 18px;
+      flex-shrink: 0;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 85%);
+      }
+    }
+
+    .ant-menu-item-selected {
+      background-color: rgba(0, 0, 0, 40%);
+    }
+  }
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@yueglobal/ui",
+  "version": "1.0.0",
+  "description": "粤链全球组件库",
+  "license": "MIT",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "father build",
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "father doctor && npm run build",
+    "start": "dumi dev"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{css,less}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/lint": "^4.0.0",
+    "antd": "^5.11.2",
+    "dumi": "^2.4.13",
+    "eslint": "^8.23.0",
+    "father": "^4.1.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.0.0",
+    "prettier-plugin-packagejson": "^2.2.18",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "stylelint": "^14.9.1"
+  },
+  "peerDependencies": {
+    "antd": ">=4.23.0 || >=5.0.0",
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": []
+}