improve(ui): oceanbase logo adapt dark theme

.dumirc.ts

@@ -145,6 +145,7 @@ export default defineConfig({
           children: [
             { title: 'BasicLayout 导航和布局', link: '/biz-components/basic-layout' },
             { title: 'PageContainer 页容器', link: '/biz-components/page-container' },
+            { title: 'Login 登录页', link: '/biz-components/login' },
             // { title: 'NavMenu', link: '/biz-components/nav-menu' },
             { title: 'Welcome 欢迎页', link: '/biz-components/welcome' },
           ],

packages/design/src/config-provider/index.tsx

@@ -28,6 +28,8 @@ export type SpinConfig = ComponentStyleConfig & {
 };
 
 export interface ConfigConsumerProps extends AntConfigConsumerProps {
+  theme?: ThemeConfig;
+  navigate?: NavigateFunction;
   spin?: SpinConfig;
 }
 

packages/ui/src/BasicLayout/Header.tsx

@@ -5,10 +5,10 @@ import {
   ReadFilled,
   UserOutlined,
 } from '@oceanbase/icons';
-import { Button, Dropdown, Menu, Modal, Space, Tooltip } from '@oceanbase/design';
+import { ConfigProvider, Button, Dropdown, Menu, Modal, Space, Tooltip } from '@oceanbase/design';
 import classNames from 'classnames';
 import moment from 'moment';
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import { OB_SITE_LINK } from '../constant';
 import type { Locale } from '../interface';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
@@ -19,6 +19,8 @@ import zhCN from './locale/zh-CN';
 // @ts-ignore
 import logoImg from '../assets/logo/oceanbase_logo.svg';
 // @ts-ignore
+import logoImgDark from '../assets/logo/oceanbase_logo_dark.svg';
+// @ts-ignore
 // 自定义 SVG 图标需要将其导入为图片，而不能是 ReactComponent，因为需要依赖 webpack 插件
 // 虽然本地开发可以生效，但构建后的产物在上层项目中不会生效，导致 SVG 展示为空
 import UserSvg from '../assets/user.svg';
@@ -100,6 +102,7 @@ const Header: React.FC<HeaderProps> = ({
   langs,
   ...restProps
 }) => {
+  const { theme } = useContext(ConfigProvider.ConfigContext);
   const navigate = useNavigate();
   const [visible, setVisible] = useState(false);
   // 是否为欢迎页
@@ -281,7 +284,7 @@ const Header: React.FC<HeaderProps> = ({
                 <span className={`${prefix}-copyright`}>
                   {locale.right} <CopyrightOutlined /> {moment().year()} {locale.company}
                 </span>
-                <img src={logoImg} alt="" style={{ height: 12 }} />
+                <img src={theme.isDark ? logoImgDark : logoImg} alt="" style={{ height: 12 }} />
               </div>
             </div>
           </div>

packages/ui/src/Login/index.tsx

@@ -1,10 +1,10 @@
 import { useControllableValue } from 'ahooks';
-import { App, Button, Divider, Menu, Typography } from '@oceanbase/design';
+import { App, ConfigProvider, Button, Divider, Menu, Typography } from '@oceanbase/design';
 import type { AlertProps } from '@oceanbase/design/es/alert';
 import type { FormProps } from '@oceanbase/design/es/form';
 import { message } from '@oceanbase/design';
 import classNames from 'classnames';
-import React, { useCallback } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { LOCALE_LIST } from '../constant';
 import LocaleWrapper from '../locale/LocaleWrapper';
 import { getPrefix, setLocale } from '../_util';
@@ -17,6 +17,8 @@ import type { IRegisterFormProps } from './RegisterForm';
 import RegisterForm from './RegisterForm';
 // @ts-ignore
 import logoImg from '../assets/logo/oceanbase_logo.svg';
+// @ts-ignore
+import logoImgDark from '../assets/logo/oceanbase_logo_dark.svg';
 import type { Locale } from '../interface';
 import LocaleDropdown from '../LocaleDropdown';
 import './index.less';
@@ -119,6 +121,8 @@ const Login: React.FC<LoginProps> = props => {
 
   const isLoading = loginProps?.loading || registerProps?.loading || otherLoginProps?.loading;
 
+  const { theme } = useContext(ConfigProvider.ConfigContext);
+
   const switchForm = useCallback(() => {
     if (isLoading) {
       message.warning(locale.isLoadingWarn);
@@ -234,7 +238,11 @@ const Login: React.FC<LoginProps> = props => {
                 className={`${prefix}-watermark-wrapper`}
                 style={{ paddingLeft: showAuthCode ? 96 : 0 }}
               >
-                <img src={logoImg} alt="" className={`${prefix}-watermark`} />
+                <img
+                  src={theme.isDark ? logoImgDark : logoImg}
+                  alt=""
+                  className={`${prefix}-watermark`}
+                />
               </div>
             ) : null}
           </div>