@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.11

package/lib/Welcome/style/index.js

@@ -0,0 +1,176 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genWelcomeStyle = exports.default = void 0;
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genWelcomeStyle = token => {
+  const {
+    componentCls,
+    antCls,
+    colorBgContainer,
+    colorText,
+    colorTextSecondary,
+    colorTextTertiary,
+    colorTextQuaternary,
+    colorPrimary
+  } = token;
+  return {
+    [`${componentCls}-container`]: {
+      height: '100%',
+      paddingBottom: '0 !important',
+      backgroundColor: colorBgContainer,
+      '.tech-page-container-content': {
+        padding: '0 !important'
+      },
+      [`${componentCls}-page-header`]: {
+        height: 272,
+        paddingTop: 72,
+        paddingLeft: 100,
+        color: colorBgContainer,
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 100%',
+        p: {
+          textAlign: 'justify'
+        },
+        img: {
+          width: 80
+        },
+        [`${componentCls}-title`]: {
+          fontSize: 32,
+          fontFamily: 'SFProText-Medium'
+        },
+        [`${componentCls}-description`]: {
+          marginTop: 16,
+          marginBottom: 32,
+          fontFamily: 'SFProText-Regular',
+          opacity: 0.85
+        }
+      },
+      [`${componentCls}-introduce`]: {
+        margin: '0 32px',
+        marginTop: -48,
+        marginBottom: 40,
+        [`${antCls}-card-body`]: {
+          padding: '48px 68px',
+          boxShadow: '0 1px 40px 2px rgba(28, 116, 230, 0.1)'
+        },
+        [`${componentCls}-item`]: {
+          display: 'flex',
+          img: {
+            marginRight: 12
+          },
+          '.title': {
+            color: colorText,
+            fontSize: 16,
+            fontFamily: 'PingFangSC-Medium'
+          },
+          '.description': {
+            marginTop: 4,
+            color: colorTextSecondary,
+            fontFamily: 'SFProText-Regular'
+          }
+        }
+      },
+      [`${componentCls}-content`]: {
+        padding: '0 32px',
+        paddingBottom: 90,
+        [`${componentCls}-left`]: {
+          padding: '0 36px',
+          borderRight: '1px solid #e8e8e8',
+          [`${componentCls}-item`]: {
+            display: 'flex',
+            padding: '24px 24px',
+            [`${componentCls}-order-wrapper`]: {
+              [`${componentCls}-order`]: {
+                width: 24,
+                height: 24,
+                marginRight: 12,
+                color: colorTextQuaternary,
+                textAlign: 'center',
+                border: `1px solid ${colorTextQuaternary}`,
+                borderRadius: 24
+              }
+            },
+            [`${componentCls}-title`]: {
+              marginTop: 0,
+              color: colorText,
+              fontSize: 16
+            },
+            [`${componentCls}-description`]: {
+              marginTop: 8,
+              color: colorTextTertiary
+            }
+          },
+          [`${componentCls}-btn-wrapper`]: {
+            marginRight: 24,
+            marginLeft: 60
+          }
+        },
+        [`${componentCls}-right`]: {
+          padding: '24px 64px',
+          [`${componentCls}-title`]: {
+            marginBottom: 16,
+            color: colorText,
+            fontSize: 16,
+            fontFamily: 'PingFangSC-Medium'
+          },
+          [`${antCls}-btn`]: {
+            marginRight: 12,
+            marginBottom: 12,
+            background: 'rgba(24, 144, 255, 0.06)',
+            border: 'none'
+          },
+          [`${componentCls}-more`]: {
+            background: 'rgba(0, 0, 0, 0.04)'
+          }
+        }
+      }
+    },
+    [`${componentCls}-step`]: {
+      display: 'flex',
+      marginBottom: 30,
+      padding: '20px 30px 20px 0',
+      background: colorBgContainer,
+      border: '1px solid rgba(0, 0, 0, 0.06)',
+      borderRadius: 2,
+      '&:hover': {
+        boxShadow: '0 4px 16px 0',
+        cursor: 'pointer'
+      },
+      '&:nth-child(even)': {
+        marginRight: 0
+      },
+      [`${componentCls}-step-left`]: {
+        padding: '0 20px'
+      },
+      [`${componentCls}-step-right`]: {
+        [`${componentCls}-step-title`]: {
+          color: colorText,
+          fontSize: 16,
+          lineHeight: 24
+        },
+        [`${componentCls}-step-description`]: {
+          color: colorTextTertiary
+        }
+      },
+      [`${componentCls}-step-operations`]: {
+        color: colorPrimary,
+        fontSize: 14,
+        lineHeight: 22
+      }
+    },
+    '.borderRight': {
+      borderRight: '1px solid #e8e8e8'
+    }
+  };
+};
+exports.genWelcomeStyle = genWelcomeStyle;
+var _default = prefixCls => {
+  const useStyle = (0, _genComponentStyleHook.genComponentStyleHook)('Welcome', token => {
+    return [genWelcomeStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+exports.default = _default;

package/lib/_util/genComponentStyleHook.d.ts

@@ -1,7 +1,8 @@
-import type { ProAliasToken } from '@ant-design/pro-components';
-import type { GenerateStyle } from '@oceanbase/design/es/theme';
 import React from 'react';
-export interface OBToken extends ProAliasToken {
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { AliasToken } from '@oceanbase/design/es/theme/interface';
+import type { ProAliasToken } from '@ant-design/pro-components';
+export interface OBToken extends ProAliasToken, AliasToken {
     /** Wrap component class with `.` prefix */
     componentCls: string;
     /** Origin prefix which do not have `.` prefix */

package/lib/_util/genComponentStyleHook.js

@@ -1,46 +1,22 @@
-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);
+"use strict";
 
-// src/_util/genComponentStyleHook.ts
-var genComponentStyleHook_exports = {};
-__export(genComponentStyleHook_exports, {
-  genComponentStyleHook: () => genComponentStyleHook
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(genComponentStyleHook_exports);
-var import_pro_components = require("@ant-design/pro-components");
-var import_react = __toESM(require("react"));
-var import_design = require("@oceanbase/design");
+exports.genComponentStyleHook = genComponentStyleHook;
+var _react = _interopRequireDefault(require("react"));
+var _design = require("@oceanbase/design");
+var _proComponents = require("@ant-design/pro-components");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function genComponentStyleHook(componentName, styleFn) {
-  return (prefixCls) => {
-    const { getPrefixCls, iconPrefixCls } = import_react.default.useContext(import_design.ConfigProvider.ConfigContext);
+  return prefixCls => {
+    const {
+      getPrefixCls,
+      iconPrefixCls
+    } = _react.default.useContext(_design.ConfigProvider.ConfigContext);
     const rootPrefixCls = getPrefixCls();
     const componentCls = `.${prefixCls}`;
-    return (0, import_pro_components.useStyle)(`OB-${componentName}`, (token) => {
+    return (0, _proComponents.useStyle)(`OB-${componentName}`, token => {
       const mergedToken = {
         ...token,
         componentCls,
@@ -51,8 +27,4 @@ function genComponentStyleHook(componentName, styleFn) {
       return [styleFn(mergedToken)];
     });
   };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  genComponentStyleHook
-});
+}

package/lib/_util/index.js

@@ -1,67 +1,62 @@
-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);
+"use strict";
 
-// src/_util/index.ts
-var util_exports = {};
-__export(util_exports, {
-  directTo: () => directTo,
-  getLocale: () => getLocale,
-  getPrefix: () => getPrefix,
-  isEnglish: () => isEnglish,
-  setLocale: () => setLocale,
-  urlToList: () => urlToList
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(util_exports);
+exports.directTo = directTo;
+exports.getLocale = getLocale;
+exports.getPrefix = void 0;
+exports.isEnglish = isEnglish;
+exports.setLocale = setLocale;
+exports.urlToList = urlToList;
+"use client";
+/**
+ * 获取基于 Umi 框架应用的语言
+ * @returns string
+ */
 function getLocale() {
-  return window.localStorage.getItem("umi_locale") || navigator.language;
+  return window.localStorage.getItem('umi_locale') || navigator.language;
 }
+
+/**
+ * 设置基于 Umi 框架应用的语言
+ * @param locale 语言的 key
+ */
 function setLocale(locale) {
-  window.localStorage.setItem("umi_locale", locale);
+  window.localStorage.setItem('umi_locale', locale);
+  // 设置完 locale 后需要 reload，以使页面生效
   window.location.reload();
 }
+
+// 非单页应用内部跳转，使用 directTo 方法
 function directTo(url, blank = true) {
   if (blank) {
-    const blankWindow = window.open("about:blank");
+    // 在新的标签页中打开
+    const blankWindow = window.open('about:blank');
     if (blankWindow) {
       blankWindow.location.href = url;
     } else {
+      // 兜底逻辑，在当前标签页打开
       window.location.href = url;
     }
   } else {
+    // 在当前标签页打开
     window.location.href = url;
   }
 }
+
+/**
+ * 将 path 拆分成多个匹配路径
+ * 例如: /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id']
+ * */
 function urlToList(url) {
-  const urlList = (url == null ? void 0 : url.split("/").filter((i) => i)) || [];
+  const urlList = url?.split('/').filter(i => i) || [];
   return urlList.map((urlItem, index) => {
-    return `/${urlList.slice(0, index + 1).join("/")}`;
+    return `/${urlList.slice(0, index + 1).join('/')}`;
   });
 }
 function isEnglish() {
-  return getLocale() === "en-US";
+  return getLocale() === 'en-US';
 }
-var getPrefix = (cls) => `ob-${cls}`;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  directTo,
-  getLocale,
-  getPrefix,
-  isEnglish,
-  setLocale,
-  urlToList
-});
+const getPrefix = cls => `ob-${cls}`;
+exports.getPrefix = getPrefix;

package/lib/_util/useNavigate.js

@@ -1,30 +1,15 @@
-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);
+"use strict";
 
-// src/_util/useNavigate.ts
-var useNavigate_exports = {};
-__export(useNavigate_exports, {
-  default: () => useNavigate_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(useNavigate_exports);
-var import_react = require("react");
-var import_design = require("@oceanbase/design");
-var useNavigate_default = () => {
-  const { navigate } = (0, import_react.useContext)(import_design.ConfigProvider.ExtendedConfigContext);
+exports.default = void 0;
+var _react = require("react");
+var _design = require("@oceanbase/design");
+var _default = () => {
+  const {
+    navigate
+  } = (0, _react.useContext)(_design.ConfigProvider.ExtendedConfigContext);
   return navigate;
 };
+exports.default = _default;

package/lib/constant/index.js

@@ -1,51 +1,25 @@
-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);
+"use strict";
 
-// src/constant/index.ts
-var constant_exports = {};
-__export(constant_exports, {
-  LOCALE_LIST: () => LOCALE_LIST,
-  OB_SITE_LINK: () => OB_SITE_LINK
-});
-module.exports = __toCommonJS(constant_exports);
-var OB_SITE_LINK = "https://www.oceanbase.com";
-var LOCALE_LIST = [
-  {
-    value: "en-US",
-    label: "English",
-    shortLabel: "English",
-    minLabel: "EN"
-  },
-  {
-    value: "zh-CN",
-    label: "简体中文",
-    shortLabel: "中文",
-    minLabel: "中"
-  },
-  {
-    value: "zh-TW",
-    label: "繁体中文",
-    shortLabel: "繁体",
-    minLabel: "繁"
-  }
-];
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  LOCALE_LIST,
-  OB_SITE_LINK
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.OB_SITE_LINK = exports.LOCALE_LIST = void 0;
+"use client";
+// OB 官网链接
+const OB_SITE_LINK = exports.OB_SITE_LINK = 'https://www.oceanbase.com';
+const LOCALE_LIST = exports.LOCALE_LIST = [{
+  value: 'en-US',
+  label: 'English',
+  shortLabel: 'English',
+  minLabel: 'EN'
+}, {
+  value: 'zh-CN',
+  label: '简体中文',
+  shortLabel: '中文',
+  minLabel: '中'
+}, {
+  value: 'zh-TW',
+  label: '繁体中文',
+  shortLabel: '繁体',
+  minLabel: '繁'
+}];

package/lib/index.d.ts

@@ -1,4 +1,3 @@
-import './index.less';
 export * from '@ant-design/pro-components';
 export { version } from '../package.json';
 export * from './constant';
@@ -20,8 +19,6 @@ export { default as DocDialog } from './DocDialog';
 export type { DocDialogProps } from './DocDialog';
 export { default as FullscreenBox } from './FullscreenBox';
 export type { FullscreenBoxProps } from './FullscreenBox';
-export { default as GraphToolbar } from './GraphToolbar';
-export type { GraphToolbarProps } from './GraphToolbar';
 export { default as Highlight } from './Highlight';
 export type { HighlightProps } from './Highlight';
 export { default as IconFont } from './IconFont';
@@ -52,8 +49,6 @@ export { default as DateRanger } from './DateRanger';
 export type { DateRangerProps } from './DateRanger';
 export { default as SideTip } from './SideTip';
 export type { SideTipProps } from './SideTip';
-export { default as TaskGraph } from './TaskGraph';
-export type { TaskGraphProps } from './TaskGraph';
 export { default as TreeSearch } from './TreeSearch';
 export type { TreeSearchProps, TreeSearchRef } from './TreeSearch';
 export { default as Welcome } from './Welcome';