犀牛鸟专属-Badge 演示代码拆分

[Luozf12345]

问题：Badge的“组件类型”下面，多个演示组件使用同一份演示代码，演示代码太长，可读性不高。
任务：请参考Button“组件类型”的示例代码，拆分成每个组件对应一段演示代码。
验收标准：向主项目提pr，并附上代码的简单介绍或思考；演示代码拆分合理、可读性高、必要时添加合理注释。

windows系统暂不支持演示代码的脚本，按照规则写好代码即可，无需本地生成演示代码资源。

参考界面：

本issue为2024犀牛鸟开源人才培养活动专属issue，仅供在校大学生参与领取
【认领issue】在研学基地"issue营地"对应issue行的M~R列抢滩报名，即视为认领成功。
【完成issue】已认领issue的同学，请同步在本issue评论区回复“已成功领取本issue”； 如7天内无提交任何进展包括不限于comment \ commit \ Pull Request，则将视为同学主动放弃issue，组委会将释放issue给下一位等候者。
https://docs.qq.com/sheet/DTk9YV3pXSklZZ29D?tab=BB08J2

[github-actions]

👋 @Luozf12345，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[chendingya]

已成功领取本issue

[github-actions]

这个 Issue 被标记为了过时 stale ，因为它已经持续 30 天没有任何活动了。删除 stale 标签或评论，否则将在 7 天内关闭。

[github-actions]

这个 Issue 被标记为了过时 stale ，因为它已经持续 30 天没有任何活动了。删除 stale 标签或评论，否则将在 7 天内关闭。

[github-actions]

这个 Issue 被标记为了过时 stale ，因为它已经持续 30 天没有任何活动了。删除 stale 标签或评论，否则将在 7 天内关闭。