@oceanbase/ui 0.2.0

package/lib/BasicLayout/Header.js

@@ -0,0 +1,177 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/BasicLayout/Header.tsx
+var Header_exports = {};
+__export(Header_exports, {
+  default: () => Header_default
+});
+module.exports = __toCommonJS(Header_exports);
+var import_icons = require("@ant-design/icons");
+var import_design = require("@oceanbase/design");
+var import_classnames = __toESM(require("classnames"));
+var import_moment = __toESM(require("moment"));
+var import_react = __toESM(require("react"));
+var import_constant = require("../constant");
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_util = require("../_util");
+var import_useHistory = __toESM(require("../_util/useHistory"));
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_oceanbase_logo = __toESM(require("../assets/logo/oceanbase_logo.svg"));
+var import_user = __toESM(require("../assets/user.svg"));
+var import_LocaleDropdown = __toESM(require("../LocaleDropdown"));
+var import_Header = require("./Header.less");
+var prefix = (0, import_util.getPrefix)("layout-header");
+var Header = ({
+  showLabel = true,
+  title,
+  extra,
+  pathname,
+  welcomePath,
+  docsPath,
+  pdfPath,
+  iconUrl,
+  logoUrl,
+  simpleLogoUrl,
+  username,
+  userMenu,
+  appData = {},
+  locale = {},
+  showHelp = true,
+  // 是否展示国际化切换入口，默认为 false
+  showLocale = false,
+  locales,
+  langs,
+  ...restProps
+}) => {
+  const history = (0, import_useHistory.default)();
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const isWelcome = pathname === welcomePath;
+  const helpMenu = /* @__PURE__ */ import_react.default.createElement(
+    import_design.Menu,
+    {
+      onClick: ({ key }) => {
+        var _a;
+        if (key === "welcome") {
+          history.push(welcomePath);
+        } else if (key === "viewDocs") {
+          (0, import_util.directTo)(docsPath);
+        } else if (key === "downloadDocs") {
+          const ele = document.createElement("a");
+          ele.setAttribute("href", pdfPath);
+          ele.setAttribute("download", ((_a = pdfPath == null ? void 0 : pdfPath.split("/")) == null ? void 0 : _a.pop()) || "Docs.pdf");
+          ele.click();
+          ele.remove();
+        } else if (key === "about") {
+          setVisible(true);
+        }
+      }
+    },
+    welcomePath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "welcome" }, locale.welcome),
+    pdfPath && /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "downloadDocs" }, locale.downloadDocs),
+    /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: "about" }, `${locale.about}${appData.shortName ? ` ${appData.shortName}` : ""}`)
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ...restProps,
+      className: (0, import_classnames.default)(`${prefix}`, {
+        [`${prefix}-welcome`]: isWelcome
+      })
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: simpleLogoUrl,
+        alt: "",
+        onClick: () => {
+          history.push("/");
+        },
+        className: `${prefix}-logo`
+      }
+    ), title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-title` }, title), showLabel ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-extra ${prefix}-extra-with-label` }, extra, showHelp && /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", { "data-testid": "help" }, locale.help))), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username)))) : (
+      // userMenu username 都不存在时，不展示该项
+      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, username ? /* @__PURE__ */ import_react.default.createElement(import_design.Button, { shape: "round", size: "small" }, /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, null), /* @__PURE__ */ import_react.default.createElement("span", null, username))) : null)
+    )) : /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-extra` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: helpMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.BulbFilled, null)))), docsPath && /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { title: locale.viewDocs }, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: `${prefix}-extra-item`,
+        onClick: () => {
+          (0, import_util.directTo)(docsPath);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-icon-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_icons.ReadFilled, null))
+    )), showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { showLabel: true, locales: locales || langs })), userMenu ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_design.Dropdown, { overlay: userMenu }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: import_user.default,
+        alt: "",
+        className: `${prefix}-extra-user-icon`,
+        style: { height: 12 }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-username` }, username)))) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-extra-user-wrapper` }, /* @__PURE__ */ import_react.default.createElement(
+      "img",
+      {
+        src: import_user.default,
+        alt: "",
+        className: `${prefix}-extra-user-icon`,
+        style: { height: 12 }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("span", null, username))))),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.Modal,
+      {
+        visible,
+        open: visible,
+        destroyOnClose: true,
+        footer: false,
+        onCancel: () => {
+          setVisible(false);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-about-wrapper` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-about` }, /* @__PURE__ */ import_react.default.createElement("img", { src: logoUrl, alt: "", className: `${prefix}-logo` }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-release-info` }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-version` }, locale.version, ": ", appData.version), appData.releaseTime && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `${prefix}-date`
+        },
+        `${locale.releaseTime}: ${appData.releaseTime}`
+      )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("a", { href: import_constant.OB_SITE_LINK, target: "_blank", rel: "noopener noreferrer" }, import_constant.OB_SITE_LINK)), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: { display: "flex", justifyContent: "space-between", alignItems: "center" }
+        },
+        /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-copyright` }, locale.right, " ", /* @__PURE__ */ import_react.default.createElement(import_icons.CopyrightOutlined, null), " ", (0, import_moment.default)().year(), " ", locale.company),
+        /* @__PURE__ */ import_react.default.createElement("img", { src: import_oceanbase_logo.default, alt: "", style: { height: 12 } })
+      ))))
+    )
+  );
+};
+var Header_default = (0, import_LocaleWrapper.default)({
+  componentName: "BasicLayout",
+  defaultLocale: import_zh_CN.default
+})(Header);

package/lib/BasicLayout/Header.less

@@ -0,0 +1,134 @@
+@import '../variable.less';
+
+@prefix: ob-layout-header;
+
+.@{prefix} {
+  position: fixed;
+  z-index: 10;
+  width: 100%;
+  height: 48px;
+  padding: 10px 24px;
+  line-height: 48px;
+  background-color: @colorBgLayout;
+  box-shadow: inset 0 -1px 0 0 #e2e8f3;
+
+  .@{prefix}-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: @maxWidth;
+    height: 100%;
+    margin: 0 auto;
+  }
+
+  .@{prefix}-logo {
+    height: 24px;
+    cursor: pointer;
+  }
+
+  .@{prefix}-icon {
+    width: 52px;
+    height: 48px;
+    line-height: 48px;
+    text-align: center;
+    border-right: 1px solid #e2e8f3;
+    border-bottom: 1px solid #e2e8f3;
+    cursor: pointer;
+    img {
+      height: 32px;
+      margin-top: 8px;
+    }
+  }
+
+  .@{prefix}-title {
+    /* 占据剩余的全部空间 */
+    flex: 1;
+    margin: 0 16px;
+  }
+
+  .@{prefix}-extra {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .@{prefix}-extra-item {
+      display: inline-flex;
+      font-size: 12px;
+      cursor: pointer;
+      &:not(:last-child) {
+        margin-right: 24px;
+      }
+      .@{prefix}-extra-icon-wrapper {
+        width: 28px;
+        height: 28px;
+        line-height: 28px;
+        text-align: center;
+        border: 0.88px solid #ced4e1;
+        border-radius: 14px;
+      }
+      .@{prefix}-extra-user-wrapper {
+        height: 28px;
+        padding: 0 10px;
+        line-height: 28px;
+        border: 0.88px solid #ced4e1;
+        border-radius: 14px;
+        .@{prefix}-extra-user-icon {
+          margin-right: 6px;
+          margin-bottom: -2px;
+        }
+      }
+    }
+  }
+  .@{prefix}-extra-with-label {
+    .@{prefix}-extra-item {
+      &:not(:last-child) {
+        margin-right: 24px !important;
+      }
+    }
+  }
+}
+
+.@{prefix}-welcome {
+  color: #fff;
+  background-color: transparent;
+  border-bottom: none;
+
+  .@{prefix}-extra {
+    .@{prefixCls}-btn {
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.25);
+      border: 0.5px solid rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+.@{prefix}-about-wrapper {
+  .@{prefix}-about {
+    margin-top: 12px;
+
+    .@{prefix}-logo {
+      height: 72px;
+    }
+
+    .@{prefix}-release-info {
+      margin-top: 20px;
+      margin-bottom: 50px;
+
+      .@{prefix}-version {
+        color: #000;
+      }
+
+      .@{prefix}-date {
+        color: #000;
+        font-size: 12px;
+        font-family: Helvetica;
+        opacity: 0.45;
+      }
+    }
+
+    .@{prefix}-copyright {
+      color: #000;
+      font-size: 12px;
+      opacity: 0.45;
+    }
+  }
+}

package/lib/BasicLayout/index.d.ts

@@ -0,0 +1,45 @@
+import type { BadgeProps } from 'antd/es/badge';
+import type { MenuProps } from 'antd/es/menu';
+import React from 'react';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+import type { HeaderProps } from './Header';
+import './index.less';
+export interface SiderHeaderProps {
+    backUrl: string;
+    backupUrl?: string;
+    backTitle: string;
+    name: string;
+    id: number;
+    badgeProps?: BadgeProps;
+}
+export interface MenuItem {
+    link: string;
+    title: string;
+    icon?: React.ReactNode;
+    selectedIcon?: React.ReactNode;
+    accessible?: boolean;
+    divider?: boolean;
+    children?: MenuItem[];
+}
+export interface BasicLayoutProps extends LocaleWrapperProps {
+    location?: {
+        pathname: string;
+    };
+    children?: React.ReactNode;
+    banner?: React.ReactNode;
+    iconUrl?: string;
+    logoUrl: string;
+    simpleLogoUrl?: string;
+    className?: string;
+    topHeader: HeaderProps;
+    menus: MenuItem[];
+    defaultCollapsed?: boolean;
+    defaultSelectedKeys?: string[];
+    defaultOpenKeys?: string[];
+    sideHeader?: React.ReactNode;
+    subSideMenus?: MenuItem[];
+    subSideMenuProps?: MenuProps;
+    style?: React.CSSProperties;
+}
+declare const _default: any;
+export default _default;