@oceanbase/ui 0.2.0

package/lib/Login/index.less

@@ -0,0 +1,325 @@
+@import '../variable.less';
+
+@prefix: ob-login;
+
+.@{prefix}-container {
+  display: flex;
+  justify-content: space-between;
+  min-width: 768px;
+  height: 100vh;
+  min-height: 600px;
+  overflow: auto;
+
+  .@{prefix}-bg {
+    width: 540px;
+    min-width: 400px;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    .@{prefix}-info {
+      margin: 185px 90px 0 90px;
+      color: #fff;
+      font-weight: 600;
+      font-size: 56px;
+      font-family: PingFangSC;
+
+      .@{prefix}-start {
+        margin-top: 22px;
+        color: #f4f4f4;
+        font-weight: 500;
+        font-size: 32px;
+        letter-spacing: 0;
+      }
+    }
+  }
+  .@{prefix}-card {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 600px;
+    background-color: #fff;
+
+    .@{prefix}-locale {
+      position: fixed;
+      top: 24px;
+      right: 24px;
+      color: @colorTextTertiary;
+      font-family: PingFangSC-Regular;
+      cursor: pointer;
+    }
+
+    .@{prefix}-board {
+      position: absolute;
+      top: 48px;
+    }
+
+    .@{prefix}-content {
+      margin-top: -60px;
+      .@{prefix}-logo {
+        display: block;
+        height: 68px;
+        margin: 0 auto;
+        margin-bottom: 40px;
+      }
+
+      .@{prefix}-activate-logo,
+      .@{prefix}-reigster-logo {
+        display: block;
+        height: 68px;
+        margin: 0 auto;
+      }
+
+      .@{prefix}-register,
+      .@{prefix}-activate {
+        .@{prefixCls}-form-item-with-help {
+          margin-bottom: 24px;
+        }
+      }
+
+      .@{prefix}-form {
+        width: 100%;
+
+        input::placeholder {
+          font-size: 14px;
+        }
+
+        .@{prefixCls}-form-item {
+          width: 404px;
+          margin-bottom: 24px;
+          padding-bottom: 0;
+        }
+
+        .@{prefixCls}-input-affix-wrapper {
+          width: 404px;
+          height: 40px;
+          border-radius: 8px;
+
+          .@{prefixCls}-input-prefix {
+            .@{iconPrefixCls} {
+              font-size: 20px;
+            }
+          }
+
+          // 覆盖 input:-internal-autofill-selected 自带背景色样式问题
+          .@{prefixCls}-input {
+            box-shadow: inset 0 0 0 1000px white !important;
+          }
+
+          .@{prefixCls}-input:-internal-autofill-selected {
+            box-shadow: inset 0 0 0 1000px white !important;
+          }
+          .@{prefixCls}-input:focus:-internal-autofill-selected {
+            box-shadow: inset 0 0 0 1000px white !important;
+          }
+        }
+
+        .@{prefixCls}-input-affix-wrapper .@{prefixCls}-input:not(:first-child) {
+          padding-left: 8px;
+        }
+
+        .@{prefixCls}-input-affix-wrapper-focused {
+          border-color: @colorPrimary;
+        }
+
+        .@{prefix}-form-focus-input {
+          .@{prefixCls}-input-prefix {
+            .@{iconPrefixCls} {
+              color: @colorPrimary;
+            }
+          }
+        }
+      }
+
+      .@{prefix}-auth-code {
+        display: flex;
+        align-items: start;
+        width: 100%;
+        margin-bottom: 24px;
+        padding-bottom: 0;
+        & > .@{prefixCls}-space-item:first-child {
+          flex: 1;
+        }
+        .@{prefixCls}-form-item {
+          margin-bottom: 0;
+        }
+        .@{prefix}-code-btn {
+          position: relative;
+          height: 38px;
+          border: 1px solid @colorBorder;
+          border-radius: 8px;
+          cursor: pointer;
+          img {
+            height: 38px;
+            border-radius: 8px;
+          }
+          .@{prefix}-code-mask {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 38px;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 8px;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.3s;
+            inset: 0;
+          }
+          &.@{prefix}-error,
+          &:hover {
+            .@{prefix}-code-mask {
+              opacity: 1;
+            }
+          }
+        }
+      }
+      .@{prefix}-submit-btn {
+        width: 404px;
+        height: 40px;
+        border-radius: 8px;
+      }
+
+      .@{prefix}-switch-btn {
+        margin-top: 24px;
+        text-align: center;
+        cursor: pointer;
+      }
+
+      .@{prefix}-watermark-wrapper {
+        position: absolute;
+        bottom: 40px;
+        width: 404px;
+        text-align: center;
+
+        .@{prefix}-watermark {
+          height: 16px;
+        }
+      }
+
+      .@{prefix}-alert {
+        width: 404px;
+        margin-bottom: 24px;
+        border-radius: 8px;
+      }
+    }
+  }
+}
+
+@media (max-width: 2048px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 800px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 72px;
+        .@{prefix}-start {
+          font-size: 48px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1800px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 700px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 64px;
+        .@{prefix}-start {
+          font-size: 40px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1600px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 600px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 56px;
+        .@{prefix}-start {
+          font-size: 32px;
+        }
+      }
+    }
+  }
+}
+
+// 设置的登录页最小高度，防止 logo 偏移位置偏移遮住输入框
+@media (max-height: 650px) {
+  .@{prefix}-container {
+    .@{prefix}-watermark-wrapper {
+      position: absolute;
+      top: 600px;
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 500px;
+
+      .@{prefix}-info {
+        margin: 185px 48px 0 48px;
+        font-size: 48px;
+        .@{prefix}-start {
+          font-size: 28px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 400px;
+
+      .@{prefix}-info {
+        margin: 185px 32px 0 32px;
+        font-size: 40px;
+        .@{prefix}-start {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .@{prefix}-container {
+    .@{prefix}-bg {
+      width: 250px;
+
+      .@{prefix}-info {
+        margin: 185px 24px 0 24px;
+        font-size: 32px;
+
+        .@{prefix}-start {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+
+.@{prefix}-container-with-board {
+  .@{prefix}-card {
+    .@{prefix}-content {
+      margin-top: 0;
+    }
+  }
+}

package/lib/Login/locale/en-US.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/locale/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  default: () => en_US_default
+});
+module.exports = __toCommonJS(en_US_exports);
+var en_US_default = {
+  usernamePlaceholder: "Please input username",
+  usernameMessage: "Username is required",
+  passwordPlaceholder: "Please input password",
+  passwordMessage: "Password is required",
+  loginText: "Login",
+  isLoadingWarn: "In progress",
+  usernameLabel: "Username",
+  switchLoginLabel: "Already have an account",
+  switchRegisterLabel: "Register",
+  userExistMessage: "Username already exists",
+  usernameFormatMessage: "Incorrect username format",
+  samePasswordMessage: "The two passwords are inconsistent",
+  usernameHelp: "Support English, numbers, underscores and special characters (._+@#$%), length 4~48 characters",
+  usernameLengthMessage: "User name supports 4~48 characters in length",
+  passwordLabel: "Password",
+  passwordHelp: "Contain at least 2 digits, 2 uppercase letters, 2 lowercase letters and 2 special characters (._+@#$%), with a length of 8~32 characters",
+  confirmPwdLabel: "Confirm password",
+  confirmPwdMessage: "Please enter the password again",
+  registerBtn: "Sign up",
+  registerTitle: "Sign up",
+  activeTitle: "Set password to activate account",
+  activeTitleDescrition: "For account security, you need to set a password to activate the account",
+  activeSubmitBtn: "Activation",
+  activeBackBtn: "Go back to the previous step"
+};

package/lib/Login/locale/zh-CN.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/locale/zh-CN.ts
+var zh_CN_exports = {};
+__export(zh_CN_exports, {
+  default: () => zh_CN_default
+});
+module.exports = __toCommonJS(zh_CN_exports);
+var zh_CN_default = {
+  usernamePlaceholder: "请输入账号",
+  usernameMessage: "请输入账号",
+  passwordPlaceholder: "请输入密码",
+  passwordMessage: "请输入密码",
+  loginText: "登录",
+  otherLoginText: "第三方登录",
+  isLoadingWarn: "正在执行中",
+  usernameLabel: "用户名",
+  switchLoginLabel: "登录已有账号",
+  switchRegisterLabel: "注册账号",
+  userExistMessage: "用户名已存在",
+  usernameFormatMessage: "用户名格式不符合要求",
+  samePasswordMessage: "确认密码不一致",
+  usernameHelp: "支持英文、数字、下划线和特殊字符 (._+@#$%)，长度 4~48 位字符",
+  usernameLengthMessage: "用户名长度 4~48 位字符",
+  passwordLabel: "密码",
+  passwordHelp: "至少包含 2 位数字、2 位大写字母、2 位小写字母和 2 位特殊字符 (._+@#$%)，长度 8~32 位字符",
+  confirmPwdLabel: "确认密码",
+  confirmPwdMessage: "请再次输入密码",
+  registerBtn: "立即注册",
+  registerTitle: "注册账号",
+  activeTitle: "设置密码激活账号",
+  activeTitleDescrition: "为了账号安全，需要设置密码激活账号",
+  activeSubmitBtn: "激活",
+  activeBackBtn: "返回上一步"
+};

package/lib/Login/locale/zh-TW.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/locale/zh-TW.ts
+var zh_TW_exports = {};
+__export(zh_TW_exports, {
+  default: () => zh_TW_default
+});
+module.exports = __toCommonJS(zh_TW_exports);
+var zh_TW_default = {
+  usernamePlaceholder: "請輸入用戶名",
+  usernameMessage: "用戶名不能為空",
+  passwordPlaceholder: "請輸入密碼",
+  passwordMessage: "密碼不能為空",
+  loginText: "登錄",
+  isLoadingWarn: "正在執行中",
+  usernameLabel: "用戶名",
+  switchLoginLabel: "登錄已有帳號",
+  switchRegisterLabel: "註冊帳號",
+  userExistMessage: "用戶名已存在",
+  usernameFormatMessage: "用戶名格式不符合要求",
+  samePasswordMessage: "確認密碼不一致",
+  usernameHelp: "支持英文、數字、下劃線和特殊字符（._+@#$%），長度 4~48 位字符",
+  usernameLengthMessage: "用戶名長度 4~48 位字符",
+  passwordLabel: "密碼",
+  passwordHelp: "至少包含 2 位字符、2 位大寫字母、2 位小寫字母和 2 位特殊字符（._+@#$%），長度 8~32 位字符",
+  confirmPwdLabel: "確認密碼",
+  confirmPwdMessage: "請再次輸入密碼",
+  registerBtn: "立即注册",
+  registerTitle: "註冊帳號",
+  activeTitle: "設置密碼激活帳號",
+  activeTitleDescrition: "為了帳號安全，需要設置密碼激活帳號",
+  activeSubmitBtn: "激活",
+  activeBackBtn: "返回上一步"
+};

package/lib/Lottie/index.js

@@ -0,0 +1,62 @@
+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/Lottie/index.tsx
+var Lottie_exports = {};
+__export(Lottie_exports, {
+  default: () => Lottie_default
+});
+module.exports = __toCommonJS(Lottie_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_lottie_web = __toESM(require("lottie-web"));
+var import_react = __toESM(require("react"));
+var Lottie = ({ mode, speed = 1, style, ...restProps }) => {
+  const ref = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    const animation = import_lottie_web.default.loadAnimation({
+      container: ref.current,
+      renderer: "svg",
+      loop: false,
+      autoplay: true,
+      ...restProps
+    });
+    animation.setSpeed(speed);
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      ref,
+      className: (0, import_classnames.default)("ob-lottie", {
+        // 图标展示模式，则追加 anticon 类名，这样可共享相关样式
+        ["anticon"]: mode === "icon"
+      }),
+      style
+    }
+  );
+};
+var Lottie_default = Lottie;

package/lib/NavMenu/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './index.less';
+export interface IMenu {
+    key: string;
+    title: string;
+    link: string;
+    disabled?: boolean;
+    openNewTab?: boolean;
+    href?: boolean;
+    id?: string;
+    children?: IMenu[];
+}
+interface MenuProps {
+    menuList: IMenu[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const _default: (props: MenuProps) => React.JSX.Element;
+export default _default;

package/lib/NavMenu/index.js

@@ -0,0 +1,104 @@
+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/NavMenu/index.tsx
+var NavMenu_exports = {};
+__export(NavMenu_exports, {
+  default: () => NavMenu_default
+});
+module.exports = __toCommonJS(NavMenu_exports);
+var import_design = require("@oceanbase/design");
+var import_lodash = require("lodash");
+var import_path_to_regexp = require("path-to-regexp");
+var import_react = __toESM(require("react"));
+var import_react_router_dom = require("react-router-dom");
+var import_util = require("../_util");
+var import_useHistory = __toESM(require("../_util/useHistory"));
+var import_index = require("./index.less");
+var prefix = (0, import_util.getPrefix)("menu");
+var NavMenu_default = (props) => {
+  const { menuList, className, style } = props;
+  const [selectedKeys, setSelectedKeys] = (0, import_react.useState)(["0"]);
+  const [menus, setMenus] = (0, import_react.useState)([]);
+  const location = (0, import_react_router_dom.useLocation)();
+  const history = (0, import_useHistory.default)();
+  const preProcess = (0, import_react.useCallback)(
+    (list) => {
+      const { pathname } = location;
+      for (let i = 0; i < list.length; i++) {
+        const { link, openNewTab, href, key, children } = list[i];
+        if (openNewTab || href)
+          return false;
+        const linkList = (0, import_lodash.isArray)(link) ? link : [link];
+        const match = linkList.some((lk) => (0, import_path_to_regexp.pathToRegexp)(lk).test(pathname));
+        if (match) {
+          setSelectedKeys([key]);
+          setMenus(list);
+          return;
+        }
+        if (!!(children == null ? void 0 : children.length)) {
+          preProcess(children);
+        }
+      }
+    },
+    [location]
+  );
+  (0, import_react.useEffect)(() => {
+    preProcess(menuList);
+  }, [menuList, preProcess]);
+  const onMenuItemSelect = (0, import_react.useCallback)(
+    (payload) => {
+      const { selectedKeys: newSelectedKeys } = payload;
+      if (menus.some((i) => i.key === newSelectedKeys[0] && i.openNewTab))
+        return;
+      setSelectedKeys(newSelectedKeys);
+    },
+    [setSelectedKeys, menus]
+  );
+  const onMenuClick = (0, import_react.useCallback)(
+    (link) => {
+      const linkList = (0, import_lodash.isArray)(link) ? link : [link];
+      history.push(linkList[0]);
+    },
+    [history]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-container ${className}`, style }, /* @__PURE__ */ import_react.default.createElement(
+    import_design.Menu,
+    {
+      style: { height: "100%", borderRight: 0 },
+      defaultSelectedKeys: ["0"],
+      selectedKeys,
+      onSelect: onMenuItemSelect,
+      mode: "inline",
+      theme: "light"
+    },
+    menus.map((config) => {
+      return /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: config.key, disabled: config.disabled ?? false }, config.openNewTab ? /* @__PURE__ */ import_react.default.createElement("a", { id: config.id, href: config.link, target: "_blank", rel: "noreferrer" }, config.title) : /* @__PURE__ */ import_react.default.createElement("a", { id: config.id, onClick: () => onMenuClick(config.link) }, config.title));
+    })
+  ));
+};