feat(Switch): 支持 shape 属性（圆角矩形与线性形态）

packages/components/switch/Switch.tsx

@@ -26,6 +26,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((originalProps,
     defaultValue,
     disabled,
     loading,
+    shape,
     size,
     label,
     customValue,
@@ -40,13 +41,15 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((originalProps,
   const [innerChecked, setInnerChecked] = useState(initChecked);
 
   const contentNode = React.useMemo<React.ReactNode>(() => {
+    // line 形态不展示开关内容
+    if (shape === 'line') return null;
     if (Array.isArray(label)) {
       const [activeContent = '', inactiveContent = ''] = label;
       const content = innerChecked ? activeContent : inactiveContent;
       return parseTNode(content, { value });
     }
     return parseTNode(label, { value });
-  }, [label, innerChecked, value]);
+  }, [label, innerChecked, shape, value]);
 
   const handleChange = (e: React.MouseEvent) => {
     !isControlled && setInnerChecked(!innerChecked);
@@ -84,6 +87,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((originalProps,
   const { SIZE, STATUS } = useCommonClassName();
   const switchClassName = classNames(
     `${classPrefix}-switch`,
+    `${classPrefix}-switch--shape-${shape}`,
     className,
     {
       [STATUS.checked]: innerChecked,
@@ -104,7 +108,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>((originalProps,
       onClick={onInternalClick}
     >
       <span className={`${classPrefix}-switch__handle`}>{loading && <Loading loading size="small" />}</span>
-      <div className={`${classPrefix}-switch__content`}>{contentNode}</div>
+      {shape !== 'line' && <div className={`${classPrefix}-switch__content`}>{contentNode}</div>}
     </button>
   );
 });

packages/components/switch/__tests__/switch.test.tsx

@@ -27,6 +27,31 @@ describe('Switch 组件测试', () => {
     expect(container.children[0].classList.contains('t-size-s')).toBeTruthy();
   });
 
+  test('shape default is circle', async () => {
+    const { container } = render(<Switch />);
+    expect(container.firstChild.classList.contains('t-switch--shape-circle')).toBeTruthy();
+  });
+
+  test('shape round', async () => {
+    const { container } = render(<Switch shape="round" />);
+    expect(container.firstChild.classList.contains('t-switch--shape-round')).toBeTruthy();
+  });
+
+  test('shape line does not render content', async () => {
+    const { container, queryByText } = render(<Switch shape="line" label={['开', '关']} />);
+    expect(container.firstChild.classList.contains('t-switch--shape-line')).toBeTruthy();
+    expect(container.firstChild.querySelector('.t-switch__content')).toBeNull();
+    expect(queryByText('关')).not.toBeInTheDocument();
+  });
+
+  test('shape line onChange still works', async () => {
+    const clickFn = vi.fn();
+    const { container } = render(<Switch shape="line" onChange={clickFn} />);
+    fireEvent.click(container.firstChild);
+    expect(clickFn).toBeCalledTimes(1);
+    expect(container.firstChild.classList.contains('t-is-checked')).toBeTruthy();
+  });
+
   test('disabled', async () => {
     const clickFn = vi.fn();
     const { container } = render(<Switch disabled />);

packages/components/switch/_example/shape.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Space, Switch } from 'tdesign-react';
+
+export default function SwitchShape() {
+  return (
+    <Space direction="vertical" size="large">
+      <Space align="center">
+        <span style={{ width: 160 }}>circle（默认胶囊形态）</span>
+        <Switch shape="circle" defaultValue label={['开', '关']} />
+      </Space>
+      <Space align="center">
+        <span style={{ width: 160 }}>round（圆角矩形形态）</span>
+        <Switch shape="round" defaultValue label={['开', '关']} />
+      </Space>
+      <Space align="center">
+        <span style={{ width: 160 }}>line（线性形态）</span>
+        <Switch shape="line" defaultValue />
+      </Space>
+    </Space>
+  );
+}

packages/components/switch/defaultProps.ts

@@ -4,4 +4,9 @@
 
 import type { TdSwitchProps } from './type';
 
-export const switchDefaultProps: TdSwitchProps = { label: [], loading: false, size: 'medium' };
+export const switchDefaultProps: TdSwitchProps = {
+  label: [],
+  loading: false,
+  shape: 'circle',
+  size: 'medium',
+};

packages/components/switch/switch.en-US.md

@@ -12,6 +12,7 @@ customValue | Array | - | Typescript: `Array<SwitchValue>` | N
 disabled | Boolean | - | \- | N
 label | TNode | [] | Typescript: `Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | \- | N
+shape | String | circle | shape of switch。`line` shape does not render switch content `label`。options: circle/round/line | N
 size | String | medium | options：small/medium/large | N
 value | String / Number / Boolean | - | Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript: `T` `type SwitchValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N

packages/components/switch/switch.md

@@ -12,6 +12,7 @@ customValue | Array | - | 用于自定义开关的值，[打开时的值，关
 disabled | Boolean | - | 是否禁用组件，默认为 false | N
 label | TNode | [] | 开关内容，[开启时内容，关闭时内容]。示例：['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型：`Array<string \| TNode> \| TNode<{ value: SwitchValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
 loading | Boolean | false | 是否处于加载中状态 | N
+shape | String | circle | 开关形状。`line` 形态不展示开关内容 `label`。可选项：circle/round/line | N
 size | String | medium | 开关尺寸。可选项：small/medium/large | N
 value | String / Number / Boolean | - | 开关值。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N
 defaultValue | String / Number / Boolean | - | 开关值。非受控属性。TS 类型：`T` `type SwitchValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/switch/type.ts) | N

packages/components/switch/type.ts

@@ -29,6 +29,11 @@ export interface TdSwitchProps<T = SwitchValue> {
    * @default false
    */
   loading?: boolean;
+  /**
+   * 开关形状。`line` 形态不展示开关内容 `label`
+   * @default circle
+   */
+  shape?: 'circle' | 'round' | 'line';
   /**
    * 开关尺寸
    * @default medium