@oceanbase/ui 0.2.24 → 0.2.26

package/lib/BasicLayout/style/Header.js

@@ -0,0 +1,139 @@
+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/style/Header.ts
+var Header_exports = {};
+__export(Header_exports, {
+  default: () => Header_default,
+  genHeaderStyle: () => genHeaderStyle
+});
+module.exports = __toCommonJS(Header_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genHeaderStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {
+      position: "fixed",
+      zIndex: 10,
+      width: "100%",
+      height: 48,
+      padding: "10px 24px",
+      lineHeight: "48px",
+      backgroundColor: token.colorBgLayout,
+      boxShadow: `inset 0 -1px 0 0 ${token.colorBorderSecondary}`,
+      [`${componentCls}-content`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        maxWidth: token.maxWidth,
+        height: "100%",
+        margin: "0 auto"
+      },
+      [`${componentCls}-logo`]: {
+        height: 24,
+        cursor: "pointer"
+      },
+      [`${componentCls}-icon`]: {
+        width: 52,
+        height: 48,
+        lineHeight: "48px",
+        textAlign: "center",
+        borderRight: `1px solid ${token.colorBorderSecondary}`,
+        borderBottom: `1px solid ${token.colorBorderSecondary}`,
+        cursor: "pointer",
+        img: {
+          height: 32,
+          marginTop: 8
+        }
+      },
+      [`${componentCls}-title`]: {
+        /* 占据剩余的全部空间 */
+        flex: 1,
+        margin: "0 16px"
+      },
+      [`${componentCls}-extra`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        [`${componentCls}-extra-item`]: {
+          display: "inline-flex",
+          fontSize: 12,
+          cursor: "pointer",
+          "&:not(:last-child)": {
+            marginRight: 24
+          },
+          [`${componentCls}-extra-icon-wrapper`]: {
+            width: 28,
+            height: 28,
+            lineHeight: "28px",
+            textAlign: "center",
+            border: "0.88px solid #ced4e1",
+            borderRadius: 14
+          },
+          [`${componentCls}-extra-user-wrapper`]: {
+            height: 28,
+            padding: "0 10px",
+            lineHeight: "28px",
+            border: "0.88px solid #ced4e1",
+            borderRadius: 14,
+            [`${componentCls}-extra-user-icon`]: {
+              marginRight: 6
+            }
+          }
+        }
+      },
+      [`${componentCls}-extra-with-label`]: {
+        [`${componentCls}-extra-item`]: {
+          "&:not(:last-child)": {
+            marginRight: "24px !important"
+          }
+        }
+      }
+    },
+    [`${componentCls}-about-wrapper`]: {
+      [`${componentCls}-about`]: {
+        marginTop: 12
+      },
+      [`${componentCls}-logo`]: {
+        height: 72
+      },
+      [`${componentCls}-release-info`]: {
+        marginTop: 20,
+        marginBottom: 50,
+        [`${componentCls}-date`]: {
+          fontSize: 12,
+          color: token.colorTextTertiary
+        }
+      },
+      [`${componentCls}-copyright`]: {
+        fontSize: 12,
+        color: token.colorTextTertiary
+      }
+    }
+  };
+};
+var Header_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Header", (token) => {
+    return [genHeaderStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genHeaderStyle
+});

package/lib/BasicLayout/style/index.js

@@ -25,7 +25,18 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genBasicLayoutStyle = (token) => {
-  const { componentCls, proComponentsCls, motionDurationSlow } = token;
+  const {
+    antCls,
+    componentCls,
+    proComponentsCls,
+    colorBgLayout,
+    colorText,
+    colorBorder,
+    colorPrimaryBorder,
+    colorPrimary,
+    motionDurationSlow
+  } = token;
+  const maxWidth = "8192px";
   const siderWidthList = [0, 52, 52 * 2, 192, 208];
   const footerBarStyle = {};
   siderWidthList.forEach((width) => {
@@ -38,14 +49,400 @@ var genBasicLayoutStyle = (token) => {
     };
   });
   return {
+    [`${componentCls}-banner-wrapper`]: {
+      position: "fixed",
+      top: 0,
+      zIndex: 20,
+      width: "100%"
+    },
+    // 对于 Alert 类型的 banner，自动增加上间距
+    // 对于其他类型的 banner，需要业务侧自行设置上间距
+    [`${componentCls}-with-banner`]: {
+      marginTop: "38px"
+    },
+    ...footerBarStyle,
     [`${componentCls}`]: {
+      height: "100%",
+      backgroundColor: colorBgLayout,
+      transition: "all 0.1s",
       // Set style of PageContainer in BasicLayout
       [`${proComponentsCls}-page-container`]: {
         // 48px is the height of BasicLayout header
         minHeight: "calc(100vh - 48px)"
+      },
+      [`${componentCls}-content-layout`]: {
+        maxWidth,
+        // 居中对齐
+        margin: "0 auto",
+        [`${componentCls}-sider`]: {
+          position: "fixed",
+          zIndex: 10,
+          padding: "16px 0 16px 16px",
+          backgroundColor: colorBgLayout,
+          transition: "all 0.3s",
+          [`${componentCls}-sider-border`]: {
+            position: "relative",
+            top: "-16px",
+            width: 1,
+            height: "100%",
+            backgroundColor: "#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",
+              [`${componentCls}-sider-collapse`]: {
+                opacity: 1,
+                transition: "opacity 0.3s"
+              }
+            },
+            [`${componentCls}-sider-collapse`]: {
+              position: "relative",
+              top: "245px",
+              right: 10,
+              // 需要设置 z-index 以便叠加在分隔线上，否则点击的是分隔线的热区，无法触发 collapse 的点击事件
+              zIndex: 1,
+              width: "20px",
+              height: "42px",
+              lineHeight: "42px",
+              textAlign: "center",
+              backgroundColor: "#fff",
+              border: `1px solid ${colorBorder}`,
+              borderRadius: "10px",
+              cursor: "pointer",
+              opacity: 0,
+              // 设置展开/收起按钮中的图标大小
+              [".anticon"]: {
+                fontSize: "px",
+                display: "block",
+                lineHeight: "42px"
+              }
+            }
+          },
+          [`${componentCls}-sider-wrapper`]: {
+            display: "flex",
+            height: "calc(100vh - 48px)",
+            // 菜单通用样式
+            [`${antCls}-menu`]: {
+              backgroundColor: "transparent",
+              borderRight: "none",
+              [`${antCls}-menu-item`]: {
+                width: "100%",
+                marginTop: 0,
+                marginRight: "auto",
+                marginLeft: "auto",
+                color: colorText,
+                backgroundColor: "transparent",
+                [`.anticon`]: {
+                  // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
+                  width: "18px",
+                  height: "18px",
+                  fontSize: "18px"
+                }
+              },
+              [`${antCls}-menu-submenu`]: {
+                width: "100%",
+                marginTop: 0,
+                marginRight: "auto",
+                marginLeft: "auto",
+                color: colorText,
+                backgroundColor: "transparent",
+                [`.anticon`]: {
+                  // 图标尺寸设为 18px，因为设计侧给到的图标内侧有间距，需要适当加大尺寸
+                  width: "18px",
+                  height: "18px",
+                  fontSize: "18px"
+                }
+              },
+              [`${antCls}-menu-submenu > ${antCls}-menu-submenu-title`]: {
+                width: "100%",
+                marginBottom: "4px !important",
+                marginInline: 0,
+                marginBlock: 0
+              }
+            },
+            // 内嵌菜单样式
+            [`${antCls}-menu-inline`]: {
+              // 菜单项间距
+              [`${antCls}-menu-item, ${antCls}-menu-submenu`]: {
+                "&:not(:last-child)": {
+                  marginBottom: "16px",
+                  // 子菜单展开时 marginBottom 会变小，为了避免效果突兀，增加过渡效果
+                  transition: "marginBottom 0.2s"
+                }
+              },
+              [`${antCls}-menu-submenu-open`]: {
+                "&:not(:last-childantCls)": {
+                  // 子菜单展开时，减小 marginBottom
+                  marginBottom: 4
+                }
+              },
+              // 子菜单项间距
+              [`${antCls}-menu-submenu`]: {
+                [`${antCls}-menu-item:not(:last-child)`]: {
+                  marginBottom: 4
+                }
+              },
+              // 菜单项缩进
+              [`${antCls}-menu-item, ${antCls}-menu-submenu > ${antCls}-menu-submenu-title`]: {
+                paddingLeft: "16px !important",
+                [`${antCls}-menu-title-content`]: {
+                  width: "108px"
+                }
+              },
+              // 子菜单项缩进
+              [`${antCls}-menu-sub`]: {
+                [`${antCls}-menu-item`]: {
+                  marginLeft: "16px",
+                  paddingLeft: "28px !important"
+                }
+              },
+              // 菜单项激活样式
+              [`${antCls}-menu-item-active, ${antCls}-menu-submenu-active > ${antCls}-menu-submenu-title`]: {
+                color: `${colorText} !important`,
+                fontWeight: 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),
+                backgroundImage: `linear-gradient(to right,#E9EDF6, ${colorBgLayout}),linear-gradient(90deg,#C6CDD9,${colorBgLayout})`,
+                backgroundClip: "padding-box,border-box",
+                backgroundOrigin: "padding-box,border-box",
+                border: ".5px solid transparent",
+                borderRadius: "8px 0 0 8px",
+                transition: "border-width .3s"
+              },
+              // 菜单项选中样式
+              [`${antCls}-menu-item-selected`]: {
+                color: `${colorPrimary} !important`,
+                fontWeight: 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),
+                backgroundImage: `linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,${colorPrimaryBorder},${colorBgLayout})`,
+                backgroundClip: "padding-box,border-box",
+                backgroundOrigin: "padding-box,border-box",
+                border: ".5px solid transparent",
+                borderRadius: "8px 0 0 8px",
+                transition: "border-width .3s",
+                "&::after": {
+                  // content: '""',
+                  // 去掉菜单项的选中标记
+                  display: "none"
+                }
+              },
+              [`${antCls}-menu-submenu-selected > ${antCls}-menu-submenu-title`]: {
+                color: `${colorPrimary} !important`
+              },
+              [`${antCls}-divider`]: {
+                margin: "0 0 16px 0"
+              }
+            },
+            // 垂直菜单样式
+            [`${antCls}-menu-vertical`]: {
+              overflowX: "hidden",
+              overflowY: "auto",
+              borderRight: "none",
+              [`${antCls}-menu-item, ${antCls}-menu-submenu`]: {
+                "&:not(:last-child)": {
+                  marginBottom: 4
+                }
+              },
+              [`${antCls}-menu-item, ${antCls}-menu-submenu > ${antCls}-menu-submenu-title`]: {
+                width: "52px",
+                height: "52px",
+                padding: 0,
+                lineHeight: "52px",
+                textAlign: "center",
+                [`${antCls}-menu-title-content`]: {
+                  display: "inline-block",
+                  width: "40px",
+                  height: "40px",
+                  lineHeight: "40px",
+                  borderRadius: "8px"
+                },
+                [`${antCls}-menu-submenu-arrow`]: {
+                  display: "none"
+                }
+              },
+              [`${antCls}-menu-item-active, ${antCls}-menu-submenu-active > ${antCls}-menu-submenu-title`]: {
+                [`${antCls}-menu-title-content`]: {
+                  backgroundColor: "#e9edf6",
+                  border: "0.5px solid #c6cdd9"
+                }
+              },
+              [`${antCls}-menu-item-selected, ${antCls}-menu-submenu-selected > ${antCls}-menu-submenu-title`]: {
+                [`${antCls}-menu-title-content`]: {
+                  backgroundColor: "#e5eeff",
+                  border: `0.5px solid ${colorPrimaryBorder}`
+                }
+              }
+            },
+            [`${componentCls}-sub-sider`]: {
+              borderRight: "1px solid #e2e8f3",
+              [`${antCls}-divider`]: {
+                margin: "0 0 4px 0"
+              }
+            },
+            [`${componentCls}-sub-sider, ${componentCls}-menu-collapsed`]: {
+              width: "52px",
+              [`${antCls}-divider`]: {
+                margin: "0 0 4px 0"
+              }
+            },
+            [`${componentCls}-sider-content`]: {
+              display: "flex",
+              flex: 1,
+              // 纵向排列
+              flexDirection: "column",
+              // 纵向两端对齐
+              justifyContent: "space-between",
+              height: "100%",
+              [`${componentCls}-sider-header`]: {
+                paddingTop: "16px"
+              },
+              [`${componentCls}-menu-wrapper`]: {
+                display: "flex",
+                flexDirection: "column",
+                // 保证垂直方向超出高度出现滚动
+                flexGrow: 1,
+                justifyContent: "space-between",
+                overflowX: "hidden",
+                overflowY: "auto",
+                [`${componentCls}-menu`]: {
+                  backgroundColor: "transparent",
+                  borderRight: "none",
+                  marginBottom: "32px"
+                }
+              }
+            }
+          }
+        },
+        [`${componentCls}-sider-collapsed`]: {
+          paddingLeft: 0
+        },
+        [`${componentCls}-sider-has-sub-sider`]: {
+          padding: 0,
+          // 包含子侧边栏的菜单不支持收起，直接隐藏侧边栏 border 和 collapse
+          [`${componentCls}-sider-border`]: {
+            display: "none",
+            [`${componentCls}-sider-collapse`]: {
+              display: "none"
+            }
+          },
+          [`${antCls}-menu-inline`]: {
+            paddingTop: "16px",
+            [`${antCls}-menu-item, ${antCls}-menu-submenu`]: {
+              "&:not(:last-child)": {
+                marginBottom: "16px !important"
+              }
+            },
+            [`${antCls}-divider`]: {
+              width: "60%",
+              minWidth: "60%",
+              margin: "-8px 0 8px 16px !important"
+            }
+          },
+          [`${antCls}-menu-vertical`]: {
+            paddingTop: "10px"
+          },
+          [`${componentCls}-sider-content`]: {
+            paddingLeft: "6px"
+          }
+        },
+        [`${componentCls}-content`]: {
+          backgroundColor: colorBgLayout,
+          transition: "all 0.3s"
+        }
+      }
+    },
+    [`@media (min-width: ${maxWidth})`]: {
+      [`${componentCls}`]: {
+        [`${componentCls}-content-layout`]: {
+          [`${componentCls}-sider`]: {
+            paddingLeft: 0
+          }
+        }
+      },
+      [`${proComponentsCls}-footer-bar`]: {
+        right: `calc((100% - ${maxWidth}) / 2 + 24px)`,
+        width: `calc(${maxWidth} - 192px - 24px - 24px)`,
+        maxWidth: `calc(${maxWidth} - 192px - 24px - 24px)`
       }
     },
-    ...footerBarStyle
+    // 弹出菜单样式
+    [`${antCls}-menu-submenu-popup`]: {
+      [`${antCls}-menu`]: {
+        paddingLeft: "6px !important",
+        backgroundColor: `${colorBgLayout} !important`,
+        [`${antCls}-menu-item`]: {
+          width: "100%",
+          backgroundColor: "transparent",
+          border: "none",
+          marginInline: 0,
+          "&:not(:last-child):": {
+            marginBottom: "8px !important"
+          }
+        },
+        [`${antCls}-menu-submenu`]: {
+          width: "100%",
+          backgroundColor: "transparent",
+          border: "none",
+          marginInline: 0,
+          "&:not(:last-child):": {
+            marginBottom: "8px !important"
+          }
+        },
+        [`${antCls}-menu-item-active`]: {
+          color: "colorText !important",
+          fontWeight: 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),
+          backgroundImage: `linear-gradient(to right, #E9EDF6, ${colorBgLayout}), linear-gradient(90deg, #C6CDD9, ${colorBgLayout})`,
+          backgroundClip: "padding-box,border-box",
+          backgroundOrigin: "padding-box,border-box",
+          border: ".5px solid transparent",
+          borderRadius: "8px 0 0 8px",
+          transition: "border-width .3s"
+        },
+        [`${antCls}-menu-submenu-active > & ${antCls}-menu-submenu-title`]: {
+          color: "colorText !important",
+          fontWeight: 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),
+          backgroundImage: `linear-gradient(to right, #E9EDF6, ${colorBgLayout}), linear-gradient(90deg, #C6CDD9, ${colorBgLayout})`,
+          backgroundClip: "padding-box,border-box",
+          backgroundOrigin: "padding-box,border-box",
+          border: ".5px solid transparent",
+          borderRadius: "8px 0 0 8px",
+          transition: "border-width .3s"
+        },
+        [`${antCls}-menu-item-selected`]: {
+          color: `${colorPrimary} !important`,
+          fontWeight: 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),
+          backgroundImage: `linear-gradient(to right,#E5EEFF,#F4F8FF),linear-gradient(90deg,${colorPrimaryBorder},${colorBgLayout})`,
+          backgroundClip: "padding-box,border-box",
+          backgroundOrigin: "padding-box,border-box",
+          border: ".5px solid transparent",
+          borderRadius: "8px 0 0 8px",
+          transition: "border-width .3s"
+        },
+        [`${antCls}-divider`]: {
+          width: "'60%'",
+          minWidth: "60%",
+          margin: "0 0 8px 16px !important"
+        }
+      }
+    }
   };
 };
 var style_default = (prefixCls) => {

package/lib/ContentWithQuestion/index.less

@@ -14,6 +14,5 @@
   }
   .@{prefix}-color {
     color: red;
-
   }
-}
+}

package/lib/Highlight/index.d.ts

@@ -29,7 +29,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "css" | "java" | "json" | "bash" | "javascript" | "typescript" | "groovy" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity" | "tsx" | "jsx")[];
+declare const supportedLanguages: ("ruby" | "css" | "bash" | "json" | "go" | "javascript" | "typescript" | "groovy" | "java" | "python" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "yaml" | "solidity" | "tsx" | "jsx")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

package/lib/Highlight/index.js

@@ -120,6 +120,7 @@ var Highlight = (props) => {
   const themeClass = theme === THEME_DARK ? `${prefixCls}-dark` : `${prefixCls}-light`;
   const codeRef = import_react.default.createRef();
   const [codeBlock, setCodeBlock] = import_react.default.useState();
+  const { token } = import_design.theme.useToken();
   (0, import_react.useEffect)(() => {
     if (language && languageMap[language]) {
       import_core.default.registerLanguage(language, languageMap[language]);
@@ -196,14 +197,14 @@ var Highlight = (props) => {
           disabled: copied,
           className: (0, import_classnames.default)(`${prefixCls}-copy`),
           style: {
-            background: `${theme === THEME_DARK ? `#2b303b` : import_design.token.colorBgLayout}`
+            background: `${theme === THEME_DARK ? `#2b303b` : token.colorBgLayout}`
           }
         },
         /* @__PURE__ */ import_react.default.createElement(
           import_icons.CopyOutlined,
           {
             className: (0, import_classnames.default)(`${prefixCls}-copy-icon`, { scoll: copied }),
-            style: { color: `${theme === THEME_DARK ? import_design.token.colorBgLayout : `#2b303b`}` }
+            style: { color: `${theme === THEME_DARK ? token.colorBgLayout : `#2b303b`}` }
           }
         ),
         /* @__PURE__ */ import_react.default.createElement(

package/lib/LocaleDropdown/index.js

@@ -38,8 +38,12 @@ var import_design = require("@oceanbase/design");
 var import_react = __toESM(require("react"));
 var import_constant = require("../constant");
 var import_util2 = require("../_util");
-var prefix = (0, import_util2.getPrefix)("layout-header");
-var LocaleDropdown = ({ locales, showLabel, ...restProps }) => {
+var LocaleDropdown = ({
+  locales,
+  showLabel,
+  className,
+  ...restProps
+}) => {
   const localeMenu = /* @__PURE__ */ import_react.default.createElement(
     import_design.Menu,
     {
@@ -65,6 +69,6 @@ var LocaleDropdown = ({ locales, showLabel, ...restProps }) => {
       }
     },
     (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).minLabel
-  ) : /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className: `${prefix}-extra-item` }, /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, null), (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).shortLabel));
+  ) : /* @__PURE__ */ import_react.default.createElement(import_design.Space, { className }, /* @__PURE__ */ import_react.default.createElement(import_icons.GlobalOutlined, null), (0, import_util.findByValue)(import_constant.LOCALE_LIST, (0, import_util2.getLocale)()).shortLabel));
 };
 var LocaleDropdown_default = LocaleDropdown;

package/lib/Login/LoginForm.js

@@ -51,6 +51,7 @@ var Login = ({
   onAuthCodeImgChange,
   ...restProps
 }) => {
+  const { token } = import_design2.theme.useToken();
   const [focusInput, setFocusInput] = (0, import_react.useState)("");
   return /* @__PURE__ */ import_react.default.createElement(
     import_design.Form,
@@ -77,7 +78,7 @@ var Login = ({
       /* @__PURE__ */ import_react.default.createElement(
         import_design.Input,
         {
-          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { style: { color: import_design2.token.colorIcon } }),
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { style: { color: token.colorIcon } }),
           placeholder: locale.usernamePlaceholder,
           onFocus: () => {
             setFocusInput("username");
@@ -107,7 +108,7 @@ var Login = ({
         {
           visibilityToggle: true,
           autoComplete: "current-password",
-          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, { style: { color: import_design2.token.colorIcon } }),
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, { style: { color: token.colorIcon } }),
           placeholder: locale.passwordPlaceholder,
           onFocus: () => {
             setFocusInput("password");
@@ -133,7 +134,7 @@ var Login = ({
       /* @__PURE__ */ import_react.default.createElement(
         import_design.Input,
         {
-          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SafetyCertificateOutlined, { style: { color: import_design2.token.colorIcon } }),
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SafetyCertificateOutlined, { style: { color: token.colorIcon } }),
           placeholder: "请输入验证码",
           onFocus: () => {
             setFocusInput("authCode");

package/lib/Login/index.js

@@ -114,7 +114,7 @@ var Login = (props) => {
       style
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-bg`, style: { backgroundImage: `url(${bgImage})` } }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-info` }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-welcome` }, title), description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-start` }, description))),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-card` }, showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-locale` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales })), board && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-board` }, board), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, showActivate ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("img", { src: logo, alt: "", className: `${prefix}-activate-logo` }), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-card` }, showLocale && /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales, className: `${prefix}-locale` }), board && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-board` }, board), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, showActivate ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("img", { src: logo, alt: "", className: `${prefix}-activate-logo` }), /* @__PURE__ */ import_react.default.createElement(
       import_design.Divider,
       {
         style: {