improve(design): Switch unchecked background color

packages/design/src/index.ts

@@ -69,6 +69,9 @@ export type { RadioProps } from './radio';
 export { default as Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
 
+export { default as Switch } from './switch';
+export type { SwitchProps } from './switch';
+
 export { default as Select } from './select';
 export type { SelectProps } from './select';
 

packages/design/src/radio/index.tsx

@@ -19,7 +19,7 @@ const InternalRadio = React.forwardRef<RadioRef, AntRadioProps>(
   }
 );
 
-const Radio = InternalRadio as typeof Radio;
+const Radio = InternalRadio as typeof AntRadio;
 
 Radio.Button = AntRadio.Button;
 Radio.Group = AntRadio.Group;

packages/design/src/switch/demo/text.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Space, Switch } from '@oceanbase/design';
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
+    <Switch checkedChildren="1" unCheckedChildren="0" />
+    <Switch
+      checkedChildren={<CheckOutlined />}
+      unCheckedChildren={<CloseOutlined />}
+      defaultChecked
+    />
+  </Space>
+);
+
+export default App;

packages/design/src/switch/index.md

@@ -17,6 +17,7 @@ demo:
 <code src="./demo/size.tsx" title="大小"></code>
 <code src="./demo/disabled.tsx" title="禁用"></code>
 <code src="./demo/loading.tsx" title="加载中"></code>
+<code src="./demo/text.tsx" title="文字和图标"></code>
 
 ## API
 

packages/design/src/switch/index.tsx

@@ -0,0 +1,31 @@
+import { Switch as AntSwitch } from 'antd';
+import type { SwitchProps as AntSwitchProps } from 'antd/es/switch';
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import ConfigProvider from '../config-provider';
+import useStyle from './style';
+
+export * from 'antd/es/switch';
+
+const InternalSwitch = React.forwardRef<HTMLButtonElement, AntSwitchProps>(
+  ({ prefixCls: customizePrefixCls, className, ...restProps }, ref) => {
+    const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    const prefixCls = getPrefixCls('switch', customizePrefixCls);
+    const { wrapSSR } = useStyle(prefixCls);
+    const switchCls = classNames(className);
+    return wrapSSR(
+      <AntSwitch ref={ref} prefixCls={customizePrefixCls} className={switchCls} {...restProps} />
+    );
+  }
+);
+
+const Switch = InternalSwitch as typeof AntSwitch;
+
+// @ts-ignore
+Switch.__ANT_SWITCH = AntSwitch.__ANT_SWITCH;
+
+if (process.env.NODE_ENV !== 'production') {
+  Switch.displayName = AntSwitch.displayName;
+}
+
+export default Switch;

packages/design/src/switch/style/index.ts

@@ -0,0 +1,22 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export type SwitchToken = FullToken<'Switch'>;
+
+export const genSwitchStyle: GenerateStyle<SwitchToken> = (token: SwitchToken): CSSObject => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}:not(${componentCls}-checked):not(${componentCls}-disabled):not(${componentCls}-loading)`]:
+      {
+        background: token.colorTextTertiary,
+      },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('Switch', token => {
+    return [genSwitchStyle(token as SwitchToken)];
+  });
+  return useStyle(prefixCls);
+};