@oceanbase/design 0.1.0

package/lib/BasicLayout/index.less

@@ -0,0 +1,400 @@
+@import '../variable.less';
+
+@prefix: ob-layout;
+
+// 弹出菜单样式
+.@{prefixCls}-menu-submenu-popup {
+  .@{prefixCls}-menu {
+    padding-left: 6px !important;
+    background-color: @colorBgLayout !important;
+    .@{prefixCls}-menu-item,
+    .@{prefixCls}-menu-submenu {
+      width: 100%;
+      background-color: transparent;
+      border: none;
+      margin-inline: 0;
+      &:not(:last-child) {
+        margin-bottom: 8px !important;
+      }
+    }
+    .@{prefixCls}-menu-item-active,
+    .@{prefixCls}-menu-submenu-active > .@{prefixCls}-menu-submenu-title {
+      color: @colorText !important;
+      font-weight: 600;
+      animation: activeGradientAnimation 0.1s;
+      .border-gradient(linear-gradient(to right, #E9EDF6, @colorBgLayout), linear-gradient(90deg, #C6CDD9, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+    }
+
+    .@{prefixCls}-menu-item-selected {
+      color: @colorPrimary !important;
+      font-weight: 600;
+      animation: selectedGradientAnimation 0.1s;
+      .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+    }
+    .@{prefixCls}-divider {
+      width: 60%;
+      min-width: 60%;
+      margin: 0 0 8px 16px !important;
+    }
+  }
+}
+
+.@{prefix}-banner-wrapper {
+  position: fixed;
+  top: 0;
+  z-index: 20;
+  width: 100%;
+}
+
+.@{prefix} {
+  height: 100%;
+  background-color: @colorBgLayout;
+  transition: all 0.1s;
+
+  .@{prefix}-content-layout {
+    max-width: @maxWidth;
+    // 居中对齐
+    margin: 0 auto;
+    .@{prefix}-sider {
+      position: fixed;
+      z-index: 10;
+      padding: 16px 0 16px 16px;
+      background-color: @colorBgLayout;
+      transition: all 0.3s;
+
+      .@{prefix}-sider-border {
+        position: relative;
+        top: -16px;
+        width: 1px;
+        height: 100%;
+        background-color: #e2e8f3;
+        cursor: pointer;
+        opacity: 0;
+        // 左右两侧扩大热区
+        &::after {
+          position: absolute;
+          top: 0;
+          right: -10px;
+          bottom: 0;
+          left: -10px;
+          content: '';
+        }
+        &:hover {
+          opacity: 1;
+          // 仅在 hover 时增加过渡动画，避免展开/收起时 border 和 collapse 没有及时消失、影响整体效果
+          transition: opacity 0.3s;
+          .@{prefix}-sider-collapse {
+            opacity: 1;
+            transition: opacity 0.3s;
+          }
+        }
+
+        .@{prefix}-sider-collapse {
+          position: relative;
+          top: 245px;
+          right: 10px;
+          // 需要设置 z-index 以便叠加在分隔线上，否则点击的是分隔线的热区，无法触发 collapse 的点击事件
+          z-index: 1;
+          width: 20px;
+          height: 42px;
+          line-height: 42px;
+          text-align: center;
+          background-color: #fff;
+          border: 1px solid @colorBorder;
+          border-radius: 10px;
+          cursor: pointer;
+          opacity: 0;
+          // 设置展开/收起按钮中的图标大小
+          .@{iconPrefixCls} {
+            font-size: 12px;
+          }
+        }
+      }
+
+      .@{prefix}-sider-wrapper {
+        display: flex;
+        height: calc(100vh - 48px);
+        // 菜单通用样式
+        .@{prefixCls}-menu {
+          background-color: transparent;
+          border-right: none;
+
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu {
+            width: 100%;
+            margin-top: 0;
+            margin-right: auto;
+            margin-left: auto;
+            color: @colorText;
+            background-color: transparent;
+            .@{iconPrefixCls} {
+              // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
+              width: 18px;
+              height: 18px;
+              font-size: 18px;
+            }
+          }
+          .@{prefixCls}-menu-submenu > .@{prefixCls}-menu-submenu-title {
+            width: 100%;
+            margin-bottom: 4px !important;
+            margin-inline: 0;
+            margin-block: 0;
+          }
+        }
+        // 内嵌菜单样式
+        .@{prefixCls}-menu-inline {
+          // 菜单项间距
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu {
+            &:not(:last-child) {
+              margin-bottom: 16px;
+              // 子菜单展开时 margin-bottom 会变小，为了避免效果突兀，增加过渡效果
+              transition: margin-bottom 0.2s;
+            }
+          }
+          .@{prefixCls}-menu-submenu-open {
+            &:not(:last-child) {
+              // 子菜单展开时，减小 margin-bottom
+              margin-bottom: 4px;
+            }
+          }
+          // 子菜单项间距
+          .@{prefixCls}-menu-submenu {
+            .@{prefixCls}-menu-item:not(:last-child) {
+              margin-bottom: 4px;
+            }
+          }
+          // 菜单项缩进
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu > .@{prefixCls}-menu-submenu-title {
+            padding-left: 16px !important;
+          }
+          // 子菜单项缩进
+          .@{prefixCls}-menu-sub {
+            .@{prefixCls}-menu-item {
+              margin-left: 16px;
+              padding-left: 28px !important;
+            }
+          }
+          // 菜单项激活样式
+          .@{prefixCls}-menu-item-active,
+          .@{prefixCls}-menu-submenu-active > .@{prefixCls}-menu-submenu-title {
+            color: @colorText !important;
+            font-weight: 600;
+            animation: activeGradientAnimation 0.1s;
+            .border-gradient(linear-gradient(to right, #E9EDF6, @colorBgLayout), linear-gradient(90deg, #C6CDD9, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+          }
+          // 菜单项选中样式
+          .@{prefixCls}-menu-item-selected {
+            color: @colorPrimary !important;
+            font-weight: 600;
+            animation: selectedGradientAnimation 0.5s;
+            .border-gradient(linear-gradient(to right, #E5EEFF, #F4F8FF), linear-gradient(90deg, @colorPrimaryBorder, @colorBgLayout), 0.5px, solid, 8px 0 0 8px);
+            &::after {
+              // 去掉菜单项的选中标记
+              display: none;
+            }
+          }
+          .@{prefixCls}-menu-submenu-selected > .@{prefixCls}-menu-submenu-title {
+            color: @colorPrimary !important;
+          }
+          .@{prefixCls}-divider {
+            margin: 0 0 16px 0;
+          }
+        }
+
+        // 垂直菜单样式
+        .@{prefixCls}-menu-vertical {
+          overflow-x: hidden;
+          overflow-y: auto;
+          border-right: none;
+
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu {
+            &:not(:last-child) {
+              margin-bottom: 4px;
+            }
+          }
+
+          .@{prefixCls}-menu-item,
+          .@{prefixCls}-menu-submenu > .@{prefixCls}-menu-submenu-title {
+            width: 52px;
+            height: 52px;
+            padding: 0;
+            line-height: 52px;
+            text-align: center;
+
+            .@{prefixCls}-menu-title-content {
+              display: inline-block;
+              width: 40px;
+              height: 40px;
+              line-height: 40px;
+              border-radius: 8px;
+            }
+
+            .@{prefixCls}-menu-submenu-arrow {
+              display: none;
+            }
+          }
+          .@{prefixCls}-menu-item-active,
+          .@{prefixCls}-menu-submenu-active > .@{prefixCls}-menu-submenu-title {
+            .@{prefixCls}-menu-title-content {
+              background-color: #e9edf6;
+              border: 0.5px solid #c6cdd9;
+            }
+          }
+          .@{prefixCls}-menu-item-selected,
+          .@{prefixCls}-menu-submenu-selected > .@{prefixCls}-menu-submenu-title {
+            .@{prefixCls}-menu-title-content {
+              background-color: #e5eeff;
+              border: 0.5px solid @colorPrimaryBorder;
+            }
+          }
+        }
+
+        .@{prefix}-sub-sider {
+          border-right: 1px solid #e2e8f3;
+          .@{prefixCls}-divider {
+            margin: 0 0 4px 0;
+          }
+        }
+
+        .@{prefix}-sub-sider,
+        .@{prefix}-menu-collapsed {
+          width: 52px;
+          .@{prefixCls}-divider {
+            margin: 0 0 4px 0;
+          }
+        }
+
+        .@{prefix}-sider-content {
+          display: flex;
+          flex: 1;
+          // 纵向排列
+          flex-direction: column;
+          // 纵向两端对齐
+          justify-content: space-between;
+          height: 100%;
+
+          .@{prefix}-sider-header {
+            padding-top: 16px;
+          }
+
+          .@{prefix}-menu-wrapper {
+            display: flex;
+            flex-direction: column;
+            // 保证垂直方向超出高度出现滚动
+            flex-grow: 1;
+            justify-content: space-between;
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            .@{prefix}-menu {
+              margin-bottom: 32px;
+            }
+          }
+        }
+      }
+    }
+
+    .@{prefix}-sider-collapsed {
+      padding-left: 0;
+    }
+
+    .@{prefix}-sider-has-sub-sider {
+      padding: 0;
+      // 包含子侧边栏的菜单不支持收起，直接隐藏侧边栏 border 和 collapse
+      .@{prefix}-sider-border {
+        display: none;
+        .@{prefix}-sider-collapse {
+          display: none;
+        }
+      }
+      .@{prefixCls}-menu-inline {
+        padding-top: 16px;
+        .@{prefixCls}-menu-item,
+        .@{prefixCls}-menu-submenu {
+          &:not(:last-child) {
+            margin-bottom: 16px !important;
+          }
+        }
+        .@{prefixCls}-divider {
+          width: 60%;
+          min-width: 60%;
+          margin: -8px 0 8px 16px !important;
+        }
+      }
+      .@{prefixCls}-menu-vertical {
+        padding-top: 10px;
+      }
+      .@{prefix}-sider-content {
+        padding-left: 6px;
+      }
+    }
+
+    .@{prefix}-content {
+      background-color: @colorBgLayout;
+      transition: all 0.3s;
+    }
+
+    // .@{prefix}-content-0 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: 100%;
+    //     }
+    //   }
+    // }
+
+    // .@{prefix}-content-52 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: calc(100% - 52px - 24px);
+    //     }
+    //   }
+    // }
+
+    // .@{prefix}-content-104 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: calc(100% - 104px - 24px);
+    //     }
+    //   }
+    // }
+
+    // .@{prefix}-content-192 {
+    //   .@{prefixCls}-pro-page-container {
+    //     .@{prefixCls}-pro-footer-bar {
+    //       width: calc(100% - 192px - 24px);
+    //     }
+    //   }
+    // }
+  }
+}
+
+.@{prefixCls}-pro-footer-bar {
+  width: calc(100% - 192px - 24px);
+}
+
+@media (min-width: @maxWidth) {
+  .@{prefixCls}-pro-footer-bar {
+    right: calc((100% - @maxWidth) / 2 + 24px);
+    width: calc(@maxWidth - 192px - 24px - 24px);
+    max-width: calc(@maxWidth - 192px - 24px - 24px);
+  }
+}
+
+// 对于 Alert 类型的 banner，自动增加上间距
+// 对于其他类型的 banner，需要业务侧自行设置上间距
+.@{prefix}-with-banner {
+  margin-top: 38px;
+}
+
+@media (min-width: @maxWidth) {
+  .@{prefix} {
+    .@{prefix}-content-layout {
+      .@{prefix}-sider {
+        padding-left: 0;
+      }
+    }
+  }
+}

package/lib/BasicLayout/locale/en-US.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    help: string;
+    welcome: string;
+    viewDocs: string;
+    downloadDocs: string;
+    about: string;
+    version: string;
+    releaseTime: string;
+    company: string;
+    right: string;
+};
+export default _default;

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

@@ -0,0 +1,37 @@
+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/BasicLayout/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 = {
+  help: "Help",
+  welcome: "Welcome page",
+  viewDocs: "Check the user manual",
+  downloadDocs: "Download the user manual",
+  about: "About",
+  version: "Version",
+  releaseTime: "Release date",
+  company: "Ant Group",
+  right: "All Rights Reserved"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/BasicLayout/locale/zh-CN.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    help: string;
+    welcome: string;
+    viewDocs: string;
+    downloadDocs: string;
+    about: string;
+    version: string;
+    releaseTime: string;
+    company: string;
+    right: string;
+};
+export default _default;

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

@@ -0,0 +1,37 @@
+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/BasicLayout/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 = {
+  help: "帮助",
+  welcome: "欢迎页",
+  viewDocs: "查看用户手册",
+  downloadDocs: "下载用户手册",
+  about: "关于",
+  version: "版本号",
+  releaseTime: "发布日期",
+  company: "蚂蚁集团",
+  right: "版权所有"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/BasicLayout/locale/zh-TW.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    help: string;
+    welcome: string;
+    viewDocs: string;
+    downloadDocs: string;
+    about: string;
+    version: string;
+    releaseTime: string;
+    company: string;
+    right: string;
+};
+export default _default;

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

@@ -0,0 +1,37 @@
+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/BasicLayout/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 = {
+  help: "幫助",
+  welcome: "歡迎頁",
+  viewDocs: "查看用戶手冊",
+  downloadDocs: "下載用戶手冊",
+  about: "關於",
+  version: "版本號",
+  releaseTime: "發佈日期",
+  company: "螞蟻集團",
+  right: "版權所有"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/BatchOperationBar/index.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import './index.less';
+import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
+export interface AlertRenderParams {
+    selectedRows: any[];
+    setSelectedRows: (selectedRows: any[]) => void;
+    cleanSelectedRows: (cleanSelectdRows?: any[]) => void;
+}
+export declare type RenderFun = ((props: AlertRenderParams) => ReactNode) | false;
+export declare type Vertical = 'top' | 'bottom';
+export declare type Horizontal = 'left' | 'right';
+export interface Props extends LocaleWrapperProps {
+    width?: number | string;
+    title?: ReactNode;
+    selectedRows?: any[];
+    open?: boolean;
+    alertRender?: ((selectedRows: any[]) => ReactNode | JSX.Element) | false;
+    alertOptionRender?: RenderFun;
+    content?: ReactNode | RenderFun;
+    cancelText?: ReactNode;
+    openText?: ReactNode;
+    openIcon?: ReactNode;
+    hiddenText?: ReactNode;
+    hiddenIcon?: ReactNode;
+    showCancelBtn?: boolean;
+    showOpenBtn?: boolean;
+    className?: string;
+    position?: [Vertical, Horizontal];
+    barStyle?: React.CSSProperties;
+}
+declare const _default: any;
+export default _default;