feat(Checkbox): 支持按钮风格多选按钮组

[Grant-ccc]

🤔 这个 PR 的性质是？

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

🔗 相关 Issue

closes #2562

💡 需求背景和解决方案

问题背景：
Issue #2562 要求 Checkbox 多选框组支持按钮风格。当前 Checkbox 仅支持传统复选框样式，缺少类似 Radio.Button 的按钮风格支持，无法满足部分业务场景的需求。

解决方案：
参考 Radio.Button 的实现方式，为 Checkbox.Group 新增按钮风格支持。

最终 API 实现：

// 新增属性
interface TdCheckboxGroupProps {
  theme?: 'checkbox' | 'button';  // 主题风格
  variant?: 'outline' | 'primary-filled' | 'default-filled';  // 按钮变体
  direction?: 'horizontal' | 'vertical';  // 排列方向
}

// 新增子组件
<Checkbox.Button value="bj">北京</Checkbox.Button>

用法示例：

import { Checkbox } from 'tdesign-react';

// 1. 边框型（outline）
<Checkbox.Group theme="button" variant="outline" value={['bj']}>
  <Checkbox.Button value="bj">北京</Checkbox.Button>
  <Checkbox.Button value="sh">上海</Checkbox.Button>
</Checkbox.Group>

// 2. 填充型 - 白色高亮（default-filled）
<Checkbox.Group theme="button" variant="default-filled" value={['gz']}>
  <Checkbox.Button value="gz">广州</Checkbox.Button>
  <Checkbox.Button value="sz">深圳</Checkbox.Button>
</Checkbox.Group>

// 3. 填充型 - 蓝色高亮（primary-filled）
<Checkbox.Group theme="button" variant="primary-filled" value={['sh']}>
  <Checkbox.Button value="sh">上海</Checkbox.Button>
</Checkbox.Group>

// 4. 纵向排列
<Checkbox.Group theme="button" variant="outline" direction="vertical">
  <Checkbox.Button value="bj">北京</Checkbox.Button>
  <Checkbox.Button value="sh">上海</Checkbox.Button>
</Checkbox.Group>

UI/交互改进：

修复前：边框型按钮存在间隙和错位，选中态边框断裂
修复后：

• ✅ 所有按钮无缝拼接成一整条
• ✅ 仅首尾保留圆角
• ✅ 选中态边框完整连续
• ✅ 支持 3 种样式变体

Design Token 对齐（Figma 规范）：

类型	属性	值
边框型	未选中文字	#4E5969
边框型	选中边框/文字	#1664FF
填充型容器	背景	#E5E6EB
填充型容器	圆角	6px
填充型默认	选中背景	#FFFFFF
填充型默认	选中文字	#1D2129
填充型默认	阴影	0 2px 4px rgba(0,0,0,0.08)
填充型主题色	选中背景	#1664FF
填充型主题色	选中文字	#FFFFFF

📝 更新日志

• 本条 PR 不需要纳入 Changelog

tdesign-react

• feat(Checkbox): 新增按钮风格支持
  • 支持 theme="button" 开启按钮风格
  • 支持 variant 属性：outline（边框型）、default-filled（填充型-白色）、primary-filled（填充型-蓝色）
  • 支持 direction="vertical" 纵向排列
  • 新增 Checkbox.Button 子组件
  • 新增 8 个单元测试用例
  • 修复边框型样式问题（无缝拼接、边框连续）

@tdesign-react/chat

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

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

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

🧪 技术实现细节

CSS 变量（_var.less）：
新增 25+ 按钮风格专用变量：

// 颜色
@checkbox-button-border-color-checked: @brand-color;
@checkbox-button-color-outline-checked: @brand-color;
@checkbox-button-group-bg-filled: #E5E6EB;
@checkbox-button-bg-white-checked: #FFFFFF;
@checkbox-button-bg-primary-checked: @brand-color;

// 尺寸
@checkbox-button-border-radius: 4px;
@checkbox-button-group-border-radius: 6px;
@checkbox-button-group-padding: 3px;

样式实现技巧：

边框型无缝拼接：

.@{checkbox-button-cls} {
  border-right: 0;  // 去掉右边框
  
  &.@{prefix}-is-checked {
    z-index: 1;      // 选中项在上层
    + .@{checkbox-button-cls} {
      border-left: 0;  // 让相邻项左边框消失
    }
  }
}

纵向排列：

&.@{checkbox-cls}-group--vertical {
  &.@{checkbox-cls}-group__outline {
    row-gap: 0;
    .@{checkbox-button-cls} {
      margin-top: -1px;  // 边框重叠
    }
  }
}

✅ 测试覆盖

新增 8 个单元测试用例：

• ✅ 边框型样式测试
• ✅ 填充型样式测试（default-filled、primary-filled）
• ✅ 纵向排列测试
• ✅ 禁用状态测试
• ✅ 交互事件测试
• ✅ 多选功能测试

📦 文件变更

核心实现：

• packages/components/checkbox/Checkbox.tsx - 新增 Checkbox.Button 导出
• packages/components/checkbox/CheckboxGroup.tsx - 支持 theme/variant/direction
• packages/components/checkbox/type.ts - 新增类型定义
• packages/components/checkbox/defaultProps.ts - 新增默认值

样式文件：

• packages/common/style/web/components/checkbox/_var.less - 新增按钮风格变量
• packages/common/style/web/components/checkbox/_checkbox-button.less - 重构样式

测试文件：

• packages/components/checkbox/__tests__/checkbox.test.tsx - 新增 8 个测试用例

文档与 Demo：

• packages/components/checkbox/_example/button.tsx - 新增按钮风格 Demo
• packages/components/checkbox/checkbox.md - 更新文档

🎯 Breaking Changes

无破坏性变更，完全向后兼容