feat(design): ConfigProvider add theme.isAliyun prop (#602)

* feat(design): ConfigProvider add theme.isAliyun prop
oceanbase · Jun 20, 2024 · 7352759 · 7352759
1 parent 5d69b82
commit 7352759
Show file tree

Hide file tree

Showing 12 changed files with 6,721 additions and 13,868 deletions.
diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx
@@ -1,11 +1,12 @@
 import { FloatButton } from '@oceanbase/design';
+import Icon, { CloudOutlined } from '@ant-design/icons';
 import { CompactTheme, DarkTheme, Motion } from 'antd-token-previewer/es/icons';
 import { FormattedMessage } from 'dumi';
 import React from 'react';
 import ThemeIcon from './ThemeIcon';
 import { FontColorsOutlined } from '@ant-design/icons';
 
-export type ThemeName = 'light' | 'dark' | 'compact' | 'motion-off' | 'custom-font';
+export type ThemeName = 'light' | 'dark' | 'compact' | 'aliyun' | 'motion-off' | 'custom-font';
 
 export type ThemeSwitchProps = {
   value?: ThemeName[];
@@ -26,7 +27,7 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props: ThemeSwitchProps) => {
           if (value.includes('dark')) {
             onChange(value.filter(theme => theme !== 'dark'));
           } else {
-            onChange([...value, 'dark']);
+            onChange([...value.filter(theme => !['light', 'aliyun'].includes(theme)), 'dark']);
           }
         }}
         tooltip={<FormattedMessage id="app.theme.switch.dark" />}
@@ -38,11 +39,26 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = (props: ThemeSwitchProps) => {
           if (value.includes('compact')) {
             onChange(value.filter(theme => theme !== 'compact'));
           } else {
-            onChange([...value, 'compact']);
+            onChange([...value.filter(theme => !['aliyun'].includes(theme)), 'compact']);
           }
         }}
         tooltip={<FormattedMessage id="app.theme.switch.compact" />}
       />
+      <FloatButton
+        icon={<CloudOutlined />}
+        type={value.includes('aliyun') ? 'primary' : 'default'}
+        onClick={() => {
+          if (value.includes('aliyun')) {
+            onChange(value.filter(theme => theme !== 'aliyun'));
+          } else {
+            onChange([
+              ...value.filter(theme => !['light', 'dark', 'compact'].includes(theme)),
+              'aliyun',
+            ]);
+          }
+        }}
+        tooltip={<FormattedMessage id="app.theme.switch.aliyun" />}
+      />
       <FloatButton
         icon={<Motion />}
         type={!isMotionOff ? 'primary' : 'default'}

diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -124,6 +124,7 @@ const GlobalLayout: React.FC = () => {
           theme={{
             algorithm: getAlgorithm(theme),
             isDark: theme.includes('dark'),
+            isAliyun: theme.includes('aliyun'),
             customFont: theme.includes('custom-font'),
             token: {
               motion: !theme.includes('motion-off'),

diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json
@@ -1,6 +1,7 @@
 {
   "app.theme.switch.dark": "Dark theme",
   "app.theme.switch.compact": "Compact theme",
+  "app.theme.switch.aliyun": "Aliyun theme",
   "app.theme.switch.motion.on": "Motion On",
   "app.theme.switch.motion.off": "Motion Off",
   "app.theme.switch.font.default": "Default Font",

diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json
@@ -1,6 +1,7 @@
 {
   "app.theme.switch.dark": "暗黑主题",
   "app.theme.switch.compact": "紧凑主题",
+  "app.theme.switch.aliyun": "阿里云主题",
   "app.theme.switch.motion.on": "动画开启",
   "app.theme.switch.motion.off": "动画关闭",
   "app.theme.switch.font.default": "默认字体",

diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx
@@ -18,6 +18,7 @@ const useStyle = () => {
   return {
     nav: css`
       height: 100%;
+      line-height: 100%;
       font-size: 14px;
       font-family: Avenir, ${fontFamily}, sans-serif;
       border: 0;

diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
+    "@oceanbase/aliyun-theme": "^0.1.2",
     "@qixian.cs/github-contributors-list": "^2.0.1",
     "@rc-component/trigger": "^2.0.0",
     "@stackblitz/sdk": "^1.9.0",

diff --git a/packages/design/package.json b/packages/design/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.19.1",
+    "@oceanbase/aliyun-theme": "^0.1.2",
     "@oceanbase/icons": "workspace:^",
     "@oceanbase/util": "workspace:^",
     "ahooks": "^2.10.14",

diff --git a/packages/design/src/button/index.tsx b/packages/design/src/button/index.tsx
@@ -11,9 +11,9 @@ export type ButtonProps = AntButtonProps;
 
 const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
   ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
-    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const { theme, getPrefixCls } = useContext(ConfigProvider.ConfigContext);
     const prefixCls = getPrefixCls('btn', customizePrefixCls);
-    const { wrapSSR } = useStyle(prefixCls);
+    const { wrapSSR } = useStyle(prefixCls, theme?.isAliyun);
     const buttonCls = classNames(className);
     return wrapSSR(
       <AntButton ref={ref} prefixCls={customizePrefixCls} className={buttonCls} {...restProps} />

diff --git a/packages/design/src/button/style/index.ts b/packages/design/src/button/style/index.ts
@@ -24,9 +24,9 @@ export const genButtonStyle: GenerateStyle<ButtonToken> = (token: ButtonToken) =
   };
 };
 
-export default (prefixCls: string) => {
+export default (prefixCls: string, isAliyun: boolean) => {
   const useStyle = genComponentStyleHook('Button', token => {
-    return [genButtonStyle(token as ButtonToken)];
+    return isAliyun ? [] : [genButtonStyle(token as ButtonToken)];
   });
   return useStyle(prefixCls);
 };
diff --git a/packages/design/src/config-provider/index.md b/packages/design/src/config-provider/index.md
@@ -8,6 +8,7 @@ nav:
 - 🔥 完全继承 antd [ConfigProvider](https://ant.design/components/config-provider-cn) 的能力和 API，可无缝切换。
 - 🌈 定制全局主题和空状态，以符合 OceanBase Design 设计规范。
 - 🆕 默认内嵌 [App 包裹组件](https://ant.design/components/app-cn)，支持 message, notification 和 Modal 等静态方法消费 ConfigProvider 配置。
+- 🆕 新增 `theme.isAliyun` 属性，用于开启阿里云主题。
 - 🆕 新增 `theme.customFont` 属性，用于开启 `Source Sans Pro` 定制字体以提升展示效果，仅支持线上应用和英文环境。
 - 🆕 新增 `locale.Input.placeholder` 属性，用于配置 Input 的默认 `placeholder`。
 - 🆕 新增 `table.selectionColumnWidth` 属性，用于配置表格的展开列宽度。
@@ -49,6 +50,7 @@ export default App;
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | :-- | :-- | :-- | :-- | :-- |
+| theme.isAliyun | 用于开启阿里云主题 | boolean | - | 0.3.5 |
 | theme.customFont | 用于开启 `Source Sans Pro` 定制字体以提升展示效果，仅支持线上应用和英文环境 | boolean | - | 0.3.1 |
 | locale.Input.placeholder | 用于配置 Input 的默认 `placeholder` | string | - | 0.3.2 |
 | spin | Spin 全局配置 | `{ indicator?: ReactNode; className?: string; style?: React.CSSProperties; }` | - | - |

diff --git a/packages/design/src/config-provider/index.tsx b/packages/design/src/config-provider/index.tsx
@@ -17,6 +17,7 @@ import StaticFunction, { injectedStaticFunction } from '../static-function';
 import themeConfig from '../theme';
 import defaultTheme from '../theme/default';
 import darkTheme from '../theme/dark';
+import aliyunTheme from '@oceanbase/aliyun-theme';
 import DefaultRenderEmpty from './DefaultRenderEmpty';
 import type { NavigateFunction } from './navigate';
 import type { Locale } from '../locale';
@@ -29,6 +30,7 @@ export * from 'antd/es/config-provider';
 
 export interface ThemeConfig extends AntThemeConfig {
   isDark?: boolean;
+  isAliyun?: boolean;
   /* use custom font or not */
   customFont?: boolean;
 }
@@ -105,36 +107,45 @@ const ConfigProvider: ConfigProviderType = ({
   const parentContext = React.useContext<ConfigConsumerProps>(AntConfigProvider.ConfigContext);
   const parentExtendedContext =
     React.useContext<ExtendedConfigConsumerProps>(ExtendedConfigContext);
-  const mergedTheme = merge(parentContext.theme, theme);
-  const currentTheme = mergedTheme?.isDark ? darkTheme : defaultTheme;
+  const { isDark, isAliyun } = merge({}, parentContext.theme, theme);
+  const currentTheme = isAliyun
+    ? aliyunTheme
+    : isDark
+      ? darkTheme
+      : parentContext.theme
+        ? {}
+        : defaultTheme;
+  const mergedTheme = merge({}, parentContext.theme, currentTheme, theme);
+
   const { token } = themeConfig.useToken();
   const fontFamily = mergedTheme.token?.fontFamily || token.fontFamily;
   const customFont = mergedTheme.customFont;
 
   // inherit from parent StyleProvider
   const parentStyleContext = React.useContext<StyleContextProps>(StyleContext);
-  const mergedStyleProviderProps = merge(parentStyleContext, styleProviderProps);
+  const mergedStyleProviderProps = merge({}, parentStyleContext, styleProviderProps);
 
   return (
     <AntConfigProvider
-      locale={merge(parentContext.locale, locale)}
+      locale={merge({}, parentContext.locale, locale)}
       form={merge(
+        {},
         {
           requiredMark: 'optional',
         },
         parentContext.form,
         form
       )}
-      spin={merge(parentContext.spin, spin)}
-      table={merge(parentContext.table, table)}
+      spin={merge({}, parentContext.spin, spin)}
+      table={merge({}, parentContext.table, table)}
       tabs={merge(
         {
           indicatorSize: origin => (origin >= 24 ? origin - 16 : origin),
         },
         parentContext.tabs,
         tabs
       )}
-      theme={merge(currentTheme, mergedTheme, {
+      theme={merge({}, mergedTheme, {
         token: {
           fontFamily:
             customFont && !fontFamily.startsWith(`'Source Sans Pro'`)