Merge pull request #255 from oceanbase/dengfuping-dev

fix(ui): BasicLayout locale switch font size is too large
oceanbase · Oct 31, 2023 · 1acc573 · 1acc573
2 parents b3cbeca + af597c7
commit 1acc573
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 17 deletions.
diff --git a/packages/ui/src/BasicLayout/Header.tsx b/packages/ui/src/BasicLayout/Header.tsx
@@ -170,9 +170,7 @@ const Header: React.FC<HeaderProps> = ({
             )}
 
             {showLocale && (
-              <span className={`${prefixCls}-extra-item`}>
-                <LocaleDropdown locales={locales || langs} />
-              </span>
+              <LocaleDropdown locales={locales || langs} className={`${prefixCls}-extra-item`} />
             )}
 
             {userMenu ? (
@@ -223,9 +221,11 @@ const Header: React.FC<HeaderProps> = ({
             )}
 
             {showLocale && (
-              <span className={`${prefixCls}-extra-item`}>
-                <LocaleDropdown showLabel={true} locales={locales || langs} />
-              </span>
+              <LocaleDropdown
+                showLabel={true}
+                locales={locales || langs}
+                className={`${prefixCls}-extra-item`}
+              />
             )}
 
             {userMenu ? (

diff --git a/packages/ui/src/BasicLayout/style/Header.ts b/packages/ui/src/BasicLayout/style/Header.ts
@@ -5,7 +5,7 @@ import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
 export type HeaderToken = FullToken<any>;
 
 export const genHeaderStyle: GenerateStyle<HeaderToken> = (token: HeaderToken): CSSObject => {
-  const { antCls, componentCls } = token;
+  const { componentCls } = token;
 
   return {
     [`${componentCls}`]: {

diff --git a/packages/ui/src/LocaleDropdown/index.tsx b/packages/ui/src/LocaleDropdown/index.tsx
@@ -5,17 +5,20 @@ import type { DropdownProps } from '@oceanbase/design/es/dropdown';
 import React from 'react';
 import { LOCALE_LIST } from '../constant';
 import type { Locale } from '../interface';
-import { getLocale, getPrefix, setLocale } from '../_util';
+import { getLocale, setLocale } from '../_util';
 
 export interface LocaleDropdownProps extends DropdownProps {
   // 自定义语言列表
   locales?: Locale[];
   showLabel?: boolean;
 }
 
-const prefix = getPrefix('layout-header');
-
-const LocaleDropdown: React.FC<LocaleDropdownProps> = ({ locales, showLabel, ...restProps }) => {
+const LocaleDropdown: React.FC<LocaleDropdownProps> = ({
+  locales,
+  showLabel,
+  className,
+  ...restProps
+}) => {
   // 语言切换菜单
   const localeMenu = (
     <Menu
@@ -47,7 +50,7 @@ const LocaleDropdown: React.FC<LocaleDropdownProps> = ({ locales, showLabel, ...
           {findByValue(LOCALE_LIST, getLocale()).minLabel}
         </span>
       ) : (
-        <Space className={`${prefix}-extra-item`}>
+        <Space className={className}>
           <GlobalOutlined />
           {findByValue(LOCALE_LIST, getLocale()).shortLabel}
         </Space>

diff --git a/packages/ui/src/Login/index.tsx b/packages/ui/src/Login/index.tsx
@@ -166,11 +166,7 @@ const Login: React.FC<LoginProps> = props => {
           </div>
         </div>
         <div className={`${prefix}-card`}>
-          {showLocale && (
-            <span className={`${prefix}-locale`}>
-              <LocaleDropdown locales={locales} />
-            </span>
-          )}
+          {showLocale && <LocaleDropdown locales={locales} className={`${prefix}-locale`} />}
           {board && <div className={`${prefix}-board`}>{board}</div>}
           <div className={`${prefix}-content`}>
             {showActivate ? (