feat(Switch): support shape prop

[Seeridia]

犀牛鸟 Issue，关联 Issue: Tencent/tdesign-common/issues/2563

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

Related issue: Tencent/tdesign-common#2563

💡 需求背景和解决方案

为 Switch 新增 shape 属性，支持 circle、round、line 三种形态：

• circle：默认胶囊形态。
• round：圆角矩形形态，样式由 tdesign-common 提供。
• line：线性形态，样式由 tdesign-common 提供。

最终 API：

shape?: 'circle' | 'round' | 'line';

默认值为 circle。

---

相关 PR：

1. tdesign-api：feat(Switch): add shape api for web TDesignOteam/tdesign-api#914
2. tdesign-common：style(Switch): support round and line shapes tdesign-common#2604
3. tdesign-vue-next：feat(Switch): support shape prop #6776
4. tdesign-react：feat(Switch): support shape prop tdesign-react#4320
5. Tdsign-vue：feat(Switch): support shape prop tdesign-vue#3855

---

设计稿：https://www.figma.com/design/r9jPY6A4EUDvEdoWQ1LVxe/TDesign-for-web--Community----Select?node-id=45757-378235&t=5X597ofKeSefwy0q-1

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-vue-next

• feat(Switch): 新增 shape 属性，支持 circle、round、line 三种形态

@tdesign-vue-next/chat

@tdesign-vue-next/nuxt

@tdesign-vue-next/auto-import-resolver

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

[Copilot]

Pull request overview

Adds a new shape prop to the Switch component to support circle (default), round, and line variants, aligning the Vue Next implementation with the desired API and common styles. The update also adjusts rendering behavior so line does not render (or evaluate) the label content, and updates docs/demos/tests accordingly.

Changes:

• Introduce shape?: 'circle' | 'round' | 'line' with default circle, including runtime prop config and usage metadata.
• Apply a shape BEM class (t-switch--shape-*) and skip rendering switch content for shape="line".
• Add demo + tests + snapshot updates covering default and line behavior.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/components/switch/type.ts	Adds shape to the public TS props interface.
packages/components/switch/switch.tsx	Adds shape class and adjusts render logic to omit content for line.
packages/components/switch/switch.md	Documents shape in CN API table.
packages/components/switch/switch.en-US.md	Documents shape in EN API table.
packages/components/switch/props.ts	Adds runtime Vue prop definition for shape (default + validator).
packages/components/switch/_usage/props.json	Exposes shape in usage metadata as an enum.
packages/components/switch/_example/shape.vue	Adds a demo showcasing the three shapes.
packages/components/switch/tests/base.test.tsx	Adds unit tests for shape default/round/line rendering behavior.
packages/components/switch/tests/snapshots/switch.test.tsx.snap	Updates snapshots to include the new default shape class.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Seeridia]

shape: 'circle' 在上游 API 变更 TDesignOteam/tdesign-api#914 中定义，后续组件库 PR 会在 common 样式合入后更新 submodule pointer 并跑快照等等

[tdesign-bot]

TDesign Component Site Preview Open

Component	Preview
tdesign-vue-next
@tdesign-vue-next/chat

[pkg-pr-new]

• tdesign-vue-next-demo

  npm i https://pkg.pr.new/@tdesign-vue-next/auto-import-resolver@6776
  

  npm i https://pkg.pr.new/tdesign-vue-next@6776
  

  npm i https://pkg.pr.new/@tdesign-vue-next/chat@6776
  

  npm i https://pkg.pr.new/@tdesign-vue-next/nuxt@6776
  

commit: 030d5d4

[uyarn]

非常赞，但是可能需要给我们一点点时间集中review一下

BTW，这个问题，马上会发布全部应用变量的版本到社区

[Seeridia]

非常赞，但是可能需要给我们一点点时间集中review一下 BTW，这个问题，马上会发布全部应用变量的版本到社区

感谢，另外也可以考虑支持一下 Slot 等等的特性（而且这边也看到自动布局的应用也不太完善，很多还都是 freedom）。对于未来的开发中，这些完善的设计是对 D2C 的相关工作的很大支持

[uyarn]

非常赞，但是可能需要给我们一点点时间集中review一下 BTW，这个问题，马上会发布全部应用变量的版本到社区

感谢，另外也可以考虑支持一下 Slot 等等的特性（而且这边也看到自动布局的应用也不太完善，很多还都是 freedom）。对于未来的开发中，这些完善的设计是对 D2C 的相关工作的很大支持

是的，Slot 是新的 feature，后面确实会跟进 Slot 的功能在设计资源的应用上；这样设计资源和开发资源的一致性会更进一步提升；

[RADWIMPS426]

非常赞，但是可能需要给我们一点点时间集中review一下 BTW，这个问题，马上会发布全部应用变量的版本到社区

感谢，另外也可以考虑支持一下 Slot 等等的特性（而且这边也看到自动布局的应用也不太完善，很多还都是 freedom）。对于未来的开发中，这些完善的设计是对 D2C 的相关工作的很大支持

关于auto layout的问题，这个组件本身比较特殊，强行加自动布局，做子组件嵌套层级变得复杂，或者加了后内部元素也是处理为绝对定位

[Seeridia]

非常赞，但是可能需要给我们一点点时间集中review一下 BTW，这个问题，马上会发布全部应用变量的版本到社区

感谢，另外也可以考虑支持一下 Slot 等等的特性（而且这边也看到自动布局的应用也不太完善，很多还都是 freedom）。对于未来的开发中，这些完善的设计是对 D2C 的相关工作的很大支持

关于auto layout的问题，这个组件本身比较特殊，强行加自动布局，做子组件嵌套层级变得复杂，或者加了后内部元素也是处理为绝对定位

确实是，对于这个组件而言，考虑 滑块的动画（Thumb 如果用 flex 推动，要靠 justify-content: flex-start/flex-end 或 margin，使得动画、文字复杂得多）、line 形态下的覆盖关系 等等的，滑块使用绝对定位也更加合适. 感谢，受教了