@pisell/materials 1.8.38 → 1.8.41

package/lib/components/PisellCards/components/TextCard/docs/TextCard.$tab-test.md

@@ -6,378 +6,2554 @@ category: atom
 
 # TextCard 测试用例文档
 
-## 一、测试概述
+## 1. 测试概述
 
-### 测试范围
-- 组件基础功能
-- 6 种样式变体
-- 3 种尺寸
-- 4 种状态
-- 图标、标签、角标功能
-- 插槽功能
-- 文本配置
-- 宽度模式
-- 事件处理
-- 状态管理
-- 可访问性
+### 1.1 测试目标
 
-### 测试方法
-- 人工测试（UI 交互、视觉验证）
-- 自动化测试（单元测试、快照测试）
+- 验证 TextCard 组件的所有功能正常运行
+- 确保组件在各种场景下的表现符合预期
+- 保证组件的稳定性和可靠性
+- 验证组件在不同样式、尺寸、状态下的正确渲染
+
+### 1.2 测试范围
+
+- 基础功能测试
+- 6 种样式变体测试（text、filled、light、outlined、gradient、dashed）
+- 3 种尺寸测试（small、default、large）
+- 4 种状态测试（default、hover、active、disabled）
+- 图标、标签、角标功能测试
+- 插槽功能测试
+- 文本配置测试
+- 宽度模式测试
+- 交互行为测试
+- 自适应规则测试
+- 边界条件测试
+- 兼容性测试
+- 性能测试
+
+### 1.3 测试环境
+
+- React 版本：18.x
+- TypeScript 版本：5.x
+- Ant Design 版本：5.x
+- 测试框架：Vitest + React Testing Library
+- 测试工具：@testing-library/react, @testing-library/user-event, @testing-library/jest-dom
+
+## 2. 功能测试用例
+
+### 2.1 基础渲染测试
+
+#### 测试用例 2.1.1：默认渲染
+
+**测试目的：** 验证组件能够正常渲染  
+**测试步骤：**
+
+1. 渲染 TextCard 组件，传入必填 prop `text="Tab title"`
+2. 检查组件是否成功挂载
+3. 检查文本内容是否正确显示
+
+**期望结果：**
+
+- 组件成功渲染
+- 显示文本内容 "Tab title"
+- 使用默认样式变体（text）
+- 使用默认尺寸（default）
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.1.2：ReactNode 文本渲染
+
+**测试目的：** 验证传入 ReactNode 作为文本内容  
+**测试步骤：**
+
+1. 传入 `text={<span className="custom-text">Custom</span>}`
+2. 检查是否渲染了 ReactNode 内容
+
+**期望结果：**
+
+- 正确渲染 ReactNode 内容
+- 自定义类名生效
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.1.3：空文本处理
+
+**测试目的：** 验证空文本时的表现  
+**测试步骤：**
+
+1. 传入 `text=""`
+2. 检查渲染
+
+**期望结果：**
+
+- 不报错
+- 组件正常渲染，不显示文本内容
+
+**测试类型：** 自动化测试
+
+---
+
+### 2.2 样式变体测试
+
+#### 测试用例 2.2.1：样式 1 - 纯文本（text）
+
+**测试目的：** 验证 text 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="text"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+5. 设置 `disabled={{ value: true }}`，检查禁用状态
+
+**期望结果：**
+
+- 默认状态：无背景，无边框，无 padding，文本颜色为默认色
+- Active 状态：文本颜色变为主题色（`var(--theme-color)`），字体加粗（font-weight: 600）
+- Hover 状态：文本颜色变为浅紫色（`var(--theme-color-light)`）
+- Disabled 状态：文本半透明（opacity: 0.4），颜色变灰
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.2：样式 2 - 圆角背景（filled）
+
+**测试目的：** 验证 filled 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="filled"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：无背景，有 padding，圆角 40px（胶囊形）
+- Active 状态：主题色背景（`var(--theme-color)`），白色文字
+- Hover 状态：灰色背景（#F2F4F7）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.3：样式 3 - 浅色背景（light）
+
+**测试目的：** 验证 light 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="light"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：无背景，深灰文字（#475467）
+- Active 状态：浅紫背景（`var(--theme-color-bg)`），主题色文字，字体加粗
+- Hover 状态：灰色背景（#F2F4F7）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.4：样式 4 - 描边（outlined）
+
+**测试目的：** 验证 outlined 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="outlined"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：透明背景，灰色文字（#475467）
+- Active 状态：灰色背景（#F2F4F7），黑色文字
+- Hover 状态：浅灰背景（#F9FAFB），黑色文字
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.5：样式 5 - 渐变（gradient）
+
+**测试目的：** 验证 gradient 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="gradient"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：透明背景，灰色文字（#667085）
+- Active 状态：白色背景，阴影效果，黑色文字（#101828）
+- Hover 状态：文字颜色变为黑色
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.6：样式 6 - 虚线（dashed）
+
+**测试目的：** 验证 dashed 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="dashed"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：透明背景，灰色文字（#475467）
+- Active 状态：白色背景，上左右三边有边框，主题色文字，圆角 8px 8px 0 0
+- Hover 状态：文字颜色变为黑色
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.3 尺寸测试
+
+#### 测试用例 2.3.1：Small 尺寸
+
+**测试目的：** 验证 small 尺寸的渲染  
+**测试步骤：**
+
+1. 设置 `size="small"`
+2. 检查 padding、fontSize、gap、borderRadius
+
+**期望结果：**
+
+- padding: 8px 12px
+- fontSize: 14px
+- lineHeight: 22px
+- gap: 8px
+- borderRadius: 4px
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.3.2：Default 尺寸
+
+**测试目的：** 验证 default 尺寸的渲染  
+**测试步骤：**
+
+1. 设置 `size="default"` 或不设置 size（默认值）
+2. 检查 padding、fontSize、gap、borderRadius
+
+**期望结果：**
+
+- padding: 12px 16px
+- fontSize: 14px
+- lineHeight: 22px
+- gap: 12px
+- borderRadius: 6px
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.3.3：Large 尺寸
+
+**测试目的：** 验证 large 尺寸的渲染  
+**测试步骤：**
+
+1. 设置 `size="large"`
+2. 检查 padding、fontSize、gap、borderRadius
+
+**期望结果：**
+
+- padding: 16px 20px
+- fontSize: 16px
+- lineHeight: 24px
+- gap: 16px
+- borderRadius: 8px
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.4 状态测试
+
+#### 测试用例 2.4.1：Active 状态
+
+**测试目的：** 验证 active 状态的渲染和交互  
+**测试步骤：**
+
+1. 设置 `active={{ value: true }}`
+2. 检查样式、类名、data 属性
+3. 设置 `active={{ value: true, style: { color: 'red' }, className: 'custom-active' }}`
+4. 检查自定义样式和类名是否生效
+5. 设置 `active={{ value: true, extra: <div>Extra</div> }}`
+6. 检查 extra 内容是否渲染
+
+**期望结果：**
+
+- 应用 active 样式（根据 variant 不同）
+- 添加 `text-card--active` 类名
+- 设置 `data-active="true"` 属性
+- 自定义样式和类名生效
+- extra 内容正确渲染
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.4.2：Disabled 状态
+
+**测试目的：** 验证 disabled 状态的渲染和交互  
+**测试步骤：**
+
+1. 设置 `disabled={{ value: true }}`
+2. 检查样式、类名、aria 属性
+3. 尝试点击组件
+4. 检查 tabIndex 属性
+
+**期望结果：**
+
+- 透明度 0.4，颜色变灰，cursor: not-allowed
+- 添加 `text-card--disabled` 类名
+- 设置 `data-disabled="true"` 和 `aria-disabled="true"` 属性
+- tabIndex 为 -1，无法键盘聚焦
+- 点击事件不触发
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.4.3：Loading 状态
+
+**测试目的：** 验证 loading 状态的渲染和交互  
+**测试步骤：**
+
+1. 设置 `loading={{ value: true }}`
+2. 检查样式、类名
+3. 尝试点击组件
+4. 设置 `loading={{ value: true, extra: <Spin /> }}`
+5. 检查 extra 内容是否渲染
+
+**期望结果：**
+
+- 透明度 0.6，cursor: wait
+- 添加 `text-card--loading` 类名
+- 设置 `data-loading="true"` 属性
+- 点击事件不触发
+- extra 内容正确渲染
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.4.4：状态优先级
+
+**测试目的：** 验证状态优先级规则（loading > disabled > active）  
+**测试步骤：**
+
+1. 同时设置 `loading={{ value: true, extra: <div>Loading</div> }}`、`disabled={{ value: true, extra: <div>Disabled</div> }}`、`active={{ value: true, extra: <div>Active</div> }}`
+2. 检查显示哪个状态的 extra 内容
+3. 移除 loading，检查显示哪个状态
+4. 移除 disabled，检查显示哪个状态
+
+**期望结果：**
+
+- 同时存在时，显示 loading 的 extra
+- 只有 disabled 和 active 时，显示 disabled 的 extra
+- 只有 active 时，显示 active 的 extra
+
+**测试类型：** 自动化测试
+
+---
+
+### 2.5 图标功能测试
+
+#### 测试用例 2.5.1：前置图标
+
+**测试目的：** 验证前置图标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `prefixIcon={<BellOutlined />}`
+2. 检查图标是否显示在文本前面
+3. 设置 `iconConfig={{ size: 20, color: '#ff0000' }}`
+4. 检查图标大小和颜色是否生效
+
+**期望结果：**
+
+- 图标显示在文本前面
+- 图标大小为 20px
+- 图标颜色为红色
+- 图标容器有正确的类名 `text-card__icon--prefix`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.5.2：后置图标
+
+**测试目的：** 验证后置图标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `suffixIcon={<DownOutlined />}`
+2. 检查图标是否显示在文本后面
+3. 设置 `iconConfig={{ size: 16 }}`
+4. 检查图标大小是否生效
+
+**期望结果：**
+
+- 图标显示在文本后面
+- 图标大小为 16px
+- 图标容器有正确的类名 `text-card__icon--suffix`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.5.3：前后图标组合
+
+**测试目的：** 验证同时显示前后图标  
+**测试步骤：**
+
+1. 同时设置 `prefixIcon` 和 `suffixIcon`
+2. 检查两个图标是否都正常显示
+3. 检查间距是否正确
+
+**期望结果：**
+
+- 前后图标都正常显示
+- 间距根据 size 正确设置（gap 属性）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.6 标签功能测试
+
+#### 测试用例 2.6.1：后置标签
+
+**测试目的：** 验证后置标签的渲染和配置  
+**测试步骤：**
+
+1. 设置 `tag={<Tag color="blue">2</Tag>}`
+2. 检查标签是否显示在后置位置
+3. 设置 `tagConfig={{ style: { marginLeft: 8 } }}`
+4. 检查自定义样式是否生效
+
+**期望结果：**
+
+- 标签显示在后置位置（文本后面）
+- 自定义样式生效
+- 标签容器有正确的类名 `text-card__tag`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.6.2：标签与后置图标组合
+
+**测试目的：** 验证标签和后置图标同时显示时的顺序  
+**测试步骤：**
+
+1. 同时设置 `tag` 和 `suffixIcon`
+2. 检查显示顺序
+
+**期望结果：**
+
+- 标签在前，图标在后
+- 顺序：文本 -> 标签 -> 后置图标
+
+**测试类型：** 人工测试
+
+---
+
+### 2.7 角标功能测试
+
+#### 测试用例 2.7.1：红点角标
+
+**测试目的：** 验证红点角标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'dot' }}`
+2. 检查是否显示红点角标
+3. 设置 `badge={{ type: 'dot', color: 'blue', offset: [-10, 0], size: 'small' }}`
+4. 检查位置、颜色、偏移是否生效
+
+**期望结果：**
+
+- 显示红点角标
+- 通过 offset 控制位置（向左偏移）
+- 颜色为蓝色
+- 大小为 small
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.7.2：数字角标
+
+**测试目的：** 验证数字角标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'number', content: 99 }}`
+2. 检查是否显示数字 99
+3. 设置 `badge={{ type: 'number', content: 999 }}`
+4. 检查大数字是否正确显示
+5. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
+6. 检查 0 是否不显示
+7. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
+8. 检查 0 是否显示
+
+**期望结果：**
+
+- 显示数字 99
+- 大数字正确显示
+- showZero=false 时，0 不显示
+- showZero=true 时，0 显示
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.7.3：文本角标
+
+**测试目的：** 验证文本角标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'text', content: 'New' }}`
+2. 检查是否显示文本 "New"
+3. 设置 `badge={{ type: 'text', content: 'Very Long Text' }}`
+4. 检查长文本是否正确显示
+
+**期望结果：**
+
+- 显示文本 "New"
+- 长文本正常显示
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.7.4：角标位置（通过 offset 控制）
+
+**测试目的：** 验证角标的不同位置（通过 offset 控制）  
+**测试步骤：**
+
+1. 不设置 offset，检查默认位置（右上角）
+2. 设置 `offset: [-10, 0]`，检查是否向左偏移
+3. 设置 `offset: [0, 10]`，检查是否向下偏移
+4. 设置 `offset: [-10, 10]`，检查是否向左下偏移
+
+**期望结果：**
+
+- 不设置 offset 时，角标在右上角（默认位置）
+- offset 正数向右/下偏移，负数向左/上偏移
+- 角标位置正确对应设置的 offset 值
+
+**测试类型：** 人工测试
+
+---
+
+#### 测试用例 2.7.5：角标大小
+
+**测试目的：** 验证角标大小控制  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'number', content: 99, size: 'small' }}`
+2. 检查角标大小是否为 small
+3. 设置 `badge={{ type: 'number', content: 99, size: 'default' }}`
+4. 检查角标大小是否为 default
+5. 设置 `badge={{ type: 'number', content: 99 }}`（不设置 size）
+6. 检查角标是否使用默认大小
+7. 设置 `badge={{ type: 'dot', size: 'small' }}`
+8. 检查红点角标大小是否生效
+
+**期望结果：**
+
+- 角标大小正确对应设置的 size 值
+- size='small' 时显示小尺寸角标
+- size='default' 时显示默认尺寸角标
+- 不设置 size 时使用默认尺寸
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.7.6：角标显示零值
+
+**测试目的：** 验证角标 showZero 配置  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
+2. 检查角标是否不显示
+3. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
+4. 检查角标是否显示 0
+5. 设置 `badge={{ type: 'number', content: 0 }}`（不设置 showZero）
+6. 检查角标是否不显示（默认 showZero=false）
+7. 设置 `badge={{ type: 'number', content: 1, showZero: false }}`
+8. 检查非零值是否正常显示
+
+**期望结果：**
+
+- showZero=false 时，content 为 0 不显示角标
+- showZero=true 时，content 为 0 显示角标
+- 不设置 showZero 时，默认不显示零值
+- 非零值不受 showZero 影响，正常显示
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.8 插槽功能测试
+
+#### 测试用例 2.8.1：前置插槽
+
+**测试目的：** 验证前置插槽的渲染和优先级  
+**测试步骤：**
+
+1. 同时设置 `prefixSlot={<div>Custom</div>}` 和 `prefixIcon={<BellOutlined />}`
+2. 检查显示哪个内容
+
+**期望结果：**
+
+- 显示前置插槽内容
+- 不显示前置图标
+- 插槽优先级高于图标
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.8.2：后置插槽
+
+**测试目的：** 验证后置插槽的渲染和优先级  
+**测试步骤：**
+
+1. 同时设置 `suffixSlot={<div>Custom</div>}`、`tag={<Tag>Tag</Tag>}` 和 `suffixIcon={<DownOutlined />}`
+2. 检查显示哪个内容
+
+**期望结果：**
+
+- 显示后置插槽内容
+- 不显示标签和后置图标
+- 插槽优先级高于标签和图标
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.9 文本配置测试
+
+#### 测试用例 2.9.1：字体样式配置
+
+**测试目的：** 验证文本字体样式配置  
+**测试步骤：**
+
+1. 设置 `textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#ff0000' }}`
+2. 检查字体大小、粗细、颜色是否生效
+
+**期望结果：**
+
+- 字体大小为 18px
+- 字体加粗
+- 文本颜色为红色
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.9.2：文本省略（单行）
+
+**测试目的：** 验证单行文本省略功能  
+**测试步骤：**
+
+1. 设置超长文本和 `textConfig={{ maxLines: 1, ellipsis: true }}`
+2. 检查是否显示省略号
+
+**期望结果：**
+
+- 文本超出部分显示省略号
+- 使用 `text-overflow: ellipsis` 和 `white-space: nowrap`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.9.3：文本省略（多行）
+
+**测试目的：** 验证多行文本省略功能  
+**测试步骤：**
+
+1. 设置超长文本和 `textConfig={{ maxLines: 2, ellipsis: true }}`
+2. 检查是否显示省略号
+
+**期望结果：**
+
+- 文本超出 2 行后显示省略号
+- 使用 `-webkit-line-clamp: 2` 和 `-webkit-box-orient: vertical`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.9.4：文本对齐
+
+**测试目的：** 验证文本对齐配置  
+**测试步骤：**
+
+1. 分别设置 `textConfig={{ textAlign: 'left' }}`、`'center'`、`'right'`
+2. 检查文本对齐方式
+
+**期望结果：**
+
+- 文本对齐方式正确对应设置的值
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.10 宽度模式测试
+
+#### 测试用例 2.10.1：自动宽度（auto）
+
+**测试目的：** 验证自动宽度模式  
+**测试步骤：**
+
+1. 设置 `widthMode="auto"` 和 `maxWidth={300}`
+2. 检查宽度设置
+
+**期望结果：**
+
+- width 为 'auto'
+- maxWidth 为 300px
+- 内容超出最大宽度时显示省略号
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.10.2：固定宽度（fixed）
+
+**测试目的：** 验证固定宽度模式  
+**测试步骤：**
+
+1. 设置 `widthMode="fixed"` 和 `width={200}`
+2. 检查宽度设置
+
+**期望结果：**
+
+- width 为 200px
+- 宽度固定不变
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.10.3：撑满容器（full）
+
+**测试目的：** 验证撑满容器宽度模式  
+**测试步骤：**
+
+1. 设置 `widthMode="full"`
+2. 检查宽度设置
+
+**期望结果：**
+
+- width 为 '100%'
+- minWidth 为 28px
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.11 自适应规则测试
+
+#### 测试用例 2.11.1：宽度自适应规则
+
+**测试目的：** 验证宽度自适应规则  
+**测试步骤：**
+
+1. 默认宽度模式（auto），检查最大宽度限制
+2. 设置超长文本，检查是否显示省略号
+3. 设置 `widthMode="full"`，检查最小宽度限制
+
+**期望结果：**
+
+- 默认最大宽度为 400px
+- 超过最大宽度时，文本区域显示省略号
+- full 模式下最小宽度为 28px
+
+**测试类型：** 人工测试
+
+---
+
+#### 测试用例 2.11.2：水平对齐规则
+
+**测试目的：** 验证水平排列时的对齐规则  
+**测试步骤：**
+
+1. 多个 TextCard 水平排列
+2. 检查内容对齐方式
+
+**期望结果：**
+
+- 水平排列时，内容默认居中对齐
+
+**测试类型：** 人工测试
+
+---
+
+#### 测试用例 2.11.3：垂直对齐规则
+
+**测试目的：** 验证垂直排列时的对齐规则  
+**测试步骤：**
+
+1. 多个 TextCard 垂直排列
+2. 检查内容对齐方式
+
+**期望结果：**
+
+- 垂直排列时，内容默认左对齐
+
+**测试类型：** 人工测试
+
+---
+
+### 2.12 交互行为测试
+
+#### 测试用例 2.12.1：悬停交互
+
+**测试目的：** 验证悬停状态的交互  
+**测试步骤：**
+
+1. 鼠标悬停在组件上
+2. 检查样式变化
+3. 检查指针样式
+
+**期望结果：**
+
+- 展示悬停状态样式（根据 variant 不同）
+- 指针变为手型（cursor: pointer）
+- 可点击状态下才显示手型
+
+**测试类型：** 人工测试
+
+---
+
+#### 测试用例 2.12.2：点击交互
+
+**测试目的：** 验证点击事件的交互  
+**测试步骤：**
+
+1. 点击组件
+2. 检查 onClick 回调是否触发
+3. 检查 active.onChange 是否触发（如果提供）
+4. 检查选中状态是否切换
+
+**期望结果：**
+
+- 触发点击事件（onClick 回调被调用）
+- 如果提供了 active.onChange 且未激活，触发 onChange(true)
+- 切换选中状态（如果使用受控模式）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.12.3：选中状态交互
+
+**测试目的：** 验证选中状态的样式应用  
+**测试步骤：**
+
+1. 设置 `active={{ value: true }}`
+2. 检查是否应用选中样式
+
+**期望结果：**
+
+- 应用选中样式（如边框高亮、背景色变化等，根据 variant 不同）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.12.4：禁用状态下的交互
+
+**测试目的：** 验证禁用状态下的交互限制  
+**测试步骤：**
+
+1. 设置 `disabled={{ value: true }}`
+2. 尝试点击组件
+3. 尝试键盘导航
+
+**期望结果：**
+
+- 点击事件不触发
+- 无法键盘聚焦（tabIndex=-1）
+- 指针变为 not-allowed
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.12.5：加载状态下的交互
+
+**测试目的：** 验证加载状态下的交互限制  
+**测试步骤：**
+
+1. 设置 `loading={{ value: true }}`
+2. 尝试点击组件
+
+**期望结果：**
+
+- 点击事件不触发
+- 指针变为 wait
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.12.6：不可点击状态
+
+**测试目的：** 验证 clickable=false 时的交互  
+**测试步骤：**
+
+1. 设置 `clickable={false}`
+2. 尝试点击组件
+3. 检查指针样式
+
+**期望结果：**
+
+- 点击事件不触发
+- 指针为默认样式（不是手型）
+- 不添加 `text-card--clickable` 类名
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.13 自定义渲染测试
+
+#### 测试用例 2.13.1：自定义渲染函数
+
+**测试目的：** 验证自定义渲染函数功能  
+**测试步骤：**
+
+1. 设置 `render={(props) => <div className="custom-render">{props.text}</div>}`
+2. 检查是否使用自定义渲染
+
+**期望结果：**
+
+- 使用自定义渲染函数
+- 忽略其他内容配置（图标、标签等）
+- 正确传递 props
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.14 可访问性测试
+
+#### 测试用例 2.14.1：role 属性
+
+**测试目的：** 验证 role 属性设置  
+**测试步骤：**
+
+1. 检查 DOM 元素的 role 属性
+
+**期望结果：**
+
+- role="button"
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.14.2：aria-disabled 属性
+
+**测试目的：** 验证 aria-disabled 属性设置  
+**测试步骤：**
+
+1. 设置 `disabled={{ value: true }}`
+2. 检查 aria-disabled 属性
+
+**期望结果：**
+
+- aria-disabled="true"
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.14.3：tabIndex 属性
+
+**测试目的：** 验证 tabIndex 属性设置  
+**测试步骤：**
+
+1. 正常状态下检查 tabIndex
+2. disabled 状态下检查 tabIndex
+
+**期望结果：**
+
+- 正常状态：tabIndex=0
+- disabled 状态：tabIndex=-1
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.14.4：键盘导航
+
+**测试目的：** 验证键盘导航功能  
+**测试步骤：**
+
+1. 使用 Tab 键聚焦组件
+2. 使用 Enter/Space 键触发点击
+
+**期望结果：**
+
+- 可以通过键盘导航
+- 焦点状态清晰
+- 可以键盘触发点击
+
+**测试类型：** 人工测试
+
+---
+
+## 3. 边界条件测试
+
+### 测试用例 3.1：空文本
+
+**测试目的：** 验证空文本时的表现  
+**测试步骤：**
+
+1. 传入 `text=""`
+2. 检查渲染
+
+**期望结果：**
+
+- 不报错
+- 组件正常渲染
+
+**测试类型：** 自动化测试
+
+---
+
+### 测试用例 3.2：超长文本
+
+**测试目的：** 验证超长文本时的表现  
+**测试步骤：**
+
+1. 传入超长文本（超过 400px 宽度）
+2. 检查是否显示省略号
+
+**期望结果：**
+
+- 正确显示省略号
+- 不出现布局问题
+
+**测试类型：** 人工测试
+
+---
+
+### 测试用例 3.3：特殊字符
+
+**测试目的：** 验证特殊字符的处理  
+**测试步骤：**
+
+1. 传入包含特殊字符的文本：`text="<>&\"'"`
+2. 检查是否正确转义显示
+
+**期望结果：**
+
+- 特殊字符正确转义显示
+- 不出现 XSS 问题
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 测试用例 3.4：所有 Props 组合
+
+**测试目的：** 验证所有 props 同时使用时的表现  
+**测试步骤：**
+
+1. 传入所有可能的 props
+2. 检查是否正常渲染，不冲突
+
+**期望结果：**
+
+- 正常渲染
+- 各功能不冲突
+- 优先级正确（插槽 > 图标/标签，loading > disabled > active）
+
+**测试类型：** 人工测试
+
+---
+
+### 测试用例 3.5：快速切换状态
+
+**测试目的：** 验证快速切换状态时的表现  
+**测试步骤：**
+
+1. 快速切换 active、disabled、loading 状态
+2. 检查状态更新是否正确
+
+**期望结果：**
+
+- 状态正确更新
+- 不出现竞态条件
+- 样式正确应用
+
+**测试类型：** 自动化测试
+
+---
+
+## 4. 兼容性测试
+
+### 测试用例 4.1：不同浏览器测试
+
+**测试目的：** 验证在不同浏览器中的兼容性  
+**测试范围：**
+
+- Chrome（最新版本）
+- Firefox（最新版本）
+- Safari（最新版本）
+- Edge（最新版本）
+
+**期望结果：**
+
+- 所有浏览器中显示一致
+- 功能正常
+- 样式正确
+
+**测试类型：** 人工测试
+
+---
+
+### 测试用例 4.2：不同设备测试
+
+**测试目的：** 验证在不同设备上的表现  
+**测试范围：**
+
+- 桌面设备（1920x1080）
+- 笔记本（1366x768）
+- 平板（768x1024）
+- 手机（375x667）
+
+**期望结果：**
+
+- 响应式布局正常
+- 触摸交互流畅
+- 布局在不同尺寸下正确显示
+
+**测试类型：** 人工测试
+
+---
+
+## 5. 性能测试
+
+### 测试用例 5.1：渲染性能
+
+**测试目的：** 验证组件渲染性能  
+**测试步骤：**
+
+1. 渲染包含 100 个 TextCard 的列表
+2. 测量首次渲染时间
+3. 测量重新渲染时间
+
+**期望结果：**
+
+- 首次渲染时间 < 200ms
+- 重新渲染时间 < 100ms
+
+**测试类型：** 性能测试
+
+---
+
+### 测试用例 5.2：内存占用
+
+**测试目的：** 验证组件内存占用  
+**测试步骤：**
+
+1. 渲染和销毁组件多次
+2. 监测内存变化
+
+**期望结果：**
+
+- 无明显内存泄漏
+- 销毁后内存释放
+
+**测试类型：** 性能测试
+
+---
+
+### 测试用例 5.3：大量实例性能
+
+**测试目的：** 验证大量实例时的性能  
+**测试步骤：**
+
+1. 渲染 1000 个 TextCard 实例
+2. 检查页面是否卡顿
+3. 检查交互是否流畅
+
+**期望结果：**
+
+- 页面不卡顿
+- 交互流畅
+- 无性能问题
+
+**测试类型：** 性能测试
+
+---
+
+## 6. 测试总结
+
+### 6.1 测试用例统计
+
+- **总用例数**：150+
+- **自动化测试**：80+
+- **人工测试**：70+
+- **性能测试**：3
+- **兼容性测试**：2
+
+### 6.2 测试优先级
+
+- **P0（高优先级）**：基础渲染、样式变体、尺寸、状态、交互行为、自适应规则
+- **P1（中优先级）**：图标、标签、角标、插槽、文本配置、宽度模式
+- **P2（低优先级）**：边界条件、性能测试、可访问性、自定义渲染
+
+### 6.3 测试覆盖率目标
+
+- 代码覆盖率：≥ 85%
+- 分支覆盖率：≥ 80%
+- 函数覆盖率：≥ 85%
+- 行覆盖率：≥ 85%
+- 功能覆盖率：100%
+
+## 7. 测试执行计划
+
+### 7.1 自动化测试
+
+- 使用 Vitest + React Testing Library
+- 每次代码提交前自动运行
+- CI/CD 集成
+
+### 7.2 人工测试
+
+- 新功能开发完成后进行
+- 重大版本发布前全面测试
+- 定期回归测试
+
+### 7.3 测试报告
+
+- 记录测试结果
+- 标注未通过的用例
+- 提供修复建议
+
+## 8. Bug 汇总
+
+**说明**：此部分由测试人员填写发现的 Bug
+
+### Bug 列表
+
+| Bug ID | 发现时间 | Bug 描述 | 优先级 | 状态 | 修复时间 | 备注 |
+|--------|---------|---------|--------|------|---------|------|
+| - | - | - | - | - | - | - |
+
+### Bug 模板
+
+```
+Bug ID: #001
+发现时间: 2024-01-01
+Bug 描述: [详细描述问题]
+复现步骤:
+  1. [步骤1]
+  2. [步骤2]
+  3. [步骤3]
+预期结果: [应该显示什么]
+实际结果: [实际显示什么]
+优先级: P0/P1/P2/P3
+状态: 待修复/修复中/已修复/已验证
+修复时间: 
+修复说明: 
+```
+
+## 9. 测试结论
+
+测试完成后填写：
+
+- [ ] 所有测试用例通过
+- [ ] 发现 Bug 已修复
+- [ ] 组件可以发布
+
+### 测试签名
+
+- 测试人员: ___________
+- 测试时间: ___________
+- 审核人员: ___________
+- 审核时间: ___________
+---
+title: 测试用例
+order: 4
+category: atom
+---
+
+# TextCard 组件测试用例文档
+
+## 1. 测试概述
+
+### 1.1 测试目标
+
+- 验证 TextCard 组件的所有功能正常运行
+- 确保组件在各种场景下的表现符合预期
+- 保证组件的稳定性和可靠性
+- 验证组件在不同样式、尺寸、状态下的正确渲染
+
+### 1.2 测试范围
+
+- 基础功能测试
+- 6 种样式变体测试（text、filled、light、outlined、gradient、dashed）
+- 3 种尺寸测试（small、default、large）
+- 4 种状态测试（default、hover、active、disabled）
+- 图标、标签、角标功能测试
+- 插槽功能测试
+- 文本配置测试
+- 宽度模式测试
+- 交互行为测试
+- 自适应规则测试
+- 边界条件测试
+- 兼容性测试
+- 性能测试
+
+### 1.3 测试环境
+
+- React 版本：18.x
+- TypeScript 版本：5.x
+- Ant Design 版本：5.x
+- 测试框架：Vitest + React Testing Library
+- 测试工具：@testing-library/react, @testing-library/user-event, @testing-library/jest-dom
+
+## 2. 功能测试用例
+
+### 2.1 基础渲染测试
+
+#### 测试用例 2.1.1：默认渲染
+
+**测试目的：** 验证组件能够正常渲染  
+**测试步骤：**
+
+1. 渲染 TextCard 组件，传入必填 prop `text="Tab title"`
+2. 检查组件是否成功挂载
+3. 检查文本内容是否正确显示
+
+**期望结果：**
+
+- 组件成功渲染
+- 显示文本内容 "Tab title"
+- 使用默认样式变体（text）
+- 使用默认尺寸（default）
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.1.2：ReactNode 文本渲染
+
+**测试目的：** 验证传入 ReactNode 作为文本内容  
+**测试步骤：**
+
+1. 传入 `text={<span className="custom-text">Custom</span>}`
+2. 检查是否渲染了 ReactNode 内容
+
+**期望结果：**
+
+- 正确渲染 ReactNode 内容
+- 自定义类名生效
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.1.3：空文本处理
+
+**测试目的：** 验证空文本时的表现  
+**测试步骤：**
+
+1. 传入 `text=""`
+2. 检查渲染
+
+**期望结果：**
+
+- 不报错
+- 组件正常渲染，不显示文本内容
+
+**测试类型：** 自动化测试
+
+---
+
+### 2.2 样式变体测试
+
+#### 测试用例 2.2.1：样式 1 - 纯文本（text）
+
+**测试目的：** 验证 text 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="text"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+5. 设置 `disabled={{ value: true }}`，检查禁用状态
+
+**期望结果：**
+
+- 默认状态：无背景，无边框，无 padding，文本颜色为默认色
+- Active 状态：文本颜色变为主题色（`var(--theme-color)`），字体加粗（font-weight: 600）
+- Hover 状态：文本颜色变为浅紫色（`var(--theme-color-light)`）
+- Disabled 状态：文本半透明（opacity: 0.4），颜色变灰
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.2：样式 2 - 圆角背景（filled）
+
+**测试目的：** 验证 filled 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="filled"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：无背景，有 padding，圆角 40px（胶囊形）
+- Active 状态：主题色背景（`var(--theme-color)`），白色文字
+- Hover 状态：灰色背景（#F2F4F7）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.3：样式 3 - 浅色背景（light）
+
+**测试目的：** 验证 light 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="light"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：无背景，深灰文字（#475467）
+- Active 状态：浅紫背景（`var(--theme-color-bg)`），主题色文字，字体加粗
+- Hover 状态：灰色背景（#F2F4F7）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.4：样式 4 - 描边（outlined）
+
+**测试目的：** 验证 outlined 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="outlined"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：透明背景，灰色文字（#475467）
+- Active 状态：灰色背景（#F2F4F7），黑色文字
+- Hover 状态：浅灰背景（#F9FAFB），黑色文字
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.5：样式 5 - 渐变（gradient）
+
+**测试目的：** 验证 gradient 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="gradient"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：透明背景，灰色文字（#667085）
+- Active 状态：白色背景，阴影效果，黑色文字（#101828）
+- Hover 状态：文字颜色变为黑色
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.2.6：样式 6 - 虚线（dashed）
+
+**测试目的：** 验证 dashed 样式变体的渲染和交互  
+**测试步骤：**
+
+1. 设置 `variant="dashed"`
+2. 检查默认状态样式
+3. 设置 `active={{ value: true }}`，检查激活状态
+4. 鼠标悬停，检查 hover 状态
+
+**期望结果：**
+
+- 默认状态：透明背景，灰色文字（#475467）
+- Active 状态：白色背景，上左右三边有边框，主题色文字，圆角 8px 8px 0 0
+- Hover 状态：文字颜色变为黑色
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.3 尺寸测试
+
+#### 测试用例 2.3.1：Small 尺寸
+
+**测试目的：** 验证 small 尺寸的渲染  
+**测试步骤：**
+
+1. 设置 `size="small"`
+2. 检查 padding、fontSize、gap、borderRadius
+
+**期望结果：**
+
+- padding: 8px 12px
+- fontSize: 14px
+- lineHeight: 22px
+- gap: 8px
+- borderRadius: 4px
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.3.2：Default 尺寸
+
+**测试目的：** 验证 default 尺寸的渲染  
+**测试步骤：**
+
+1. 设置 `size="default"` 或不设置 size（默认值）
+2. 检查 padding、fontSize、gap、borderRadius
+
+**期望结果：**
+
+- padding: 12px 16px
+- fontSize: 14px
+- lineHeight: 22px
+- gap: 12px
+- borderRadius: 6px
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.3.3：Large 尺寸
+
+**测试目的：** 验证 large 尺寸的渲染  
+**测试步骤：**
+
+1. 设置 `size="large"`
+2. 检查 padding、fontSize、gap、borderRadius
+
+**期望结果：**
+
+- padding: 16px 20px
+- fontSize: 16px
+- lineHeight: 24px
+- gap: 16px
+- borderRadius: 8px
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.4 状态测试
+
+#### 测试用例 2.4.1：Active 状态
+
+**测试目的：** 验证 active 状态的渲染和交互  
+**测试步骤：**
+
+1. 设置 `active={{ value: true }}`
+2. 检查样式、类名、data 属性
+3. 设置 `active={{ value: true, style: { color: 'red' }, className: 'custom-active' }}`
+4. 检查自定义样式和类名是否生效
+5. 设置 `active={{ value: true, extra: <div>Extra</div> }}`
+6. 检查 extra 内容是否渲染
+
+**期望结果：**
+
+- 应用 active 样式（根据 variant 不同）
+- 添加 `text-card--active` 类名
+- 设置 `data-active="true"` 属性
+- 自定义样式和类名生效
+- extra 内容正确渲染
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.4.2：Disabled 状态
+
+**测试目的：** 验证 disabled 状态的渲染和交互  
+**测试步骤：**
+
+1. 设置 `disabled={{ value: true }}`
+2. 检查样式、类名、aria 属性
+3. 尝试点击组件
+4. 检查 tabIndex 属性
+
+**期望结果：**
+
+- 透明度 0.4，颜色变灰，cursor: not-allowed
+- 添加 `text-card--disabled` 类名
+- 设置 `data-disabled="true"` 和 `aria-disabled="true"` 属性
+- tabIndex 为 -1，无法键盘聚焦
+- 点击事件不触发
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.4.3：Loading 状态
+
+**测试目的：** 验证 loading 状态的渲染和交互  
+**测试步骤：**
+
+1. 设置 `loading={{ value: true }}`
+2. 检查样式、类名
+3. 尝试点击组件
+4. 设置 `loading={{ value: true, extra: <Spin /> }}`
+5. 检查 extra 内容是否渲染
+
+**期望结果：**
+
+- 透明度 0.6，cursor: wait
+- 添加 `text-card--loading` 类名
+- 设置 `data-loading="true"` 属性
+- 点击事件不触发
+- extra 内容正确渲染
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.4.4：状态优先级
+
+**测试目的：** 验证状态优先级规则（loading > disabled > active）  
+**测试步骤：**
+
+1. 同时设置 `loading={{ value: true, extra: <div>Loading</div> }}`、`disabled={{ value: true, extra: <div>Disabled</div> }}`、`active={{ value: true, extra: <div>Active</div> }}`
+2. 检查显示哪个状态的 extra 内容
+3. 移除 loading，检查显示哪个状态
+4. 移除 disabled，检查显示哪个状态
+
+**期望结果：**
+
+- 同时存在时，显示 loading 的 extra
+- 只有 disabled 和 active 时，显示 disabled 的 extra
+- 只有 active 时，显示 active 的 extra
+
+**测试类型：** 自动化测试
+
+---
+
+### 2.5 图标功能测试
+
+#### 测试用例 2.5.1：前置图标
+
+**测试目的：** 验证前置图标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `prefixIcon={<BellOutlined />}`
+2. 检查图标是否显示在文本前面
+3. 设置 `iconConfig={{ size: 20, color: '#ff0000' }}`
+4. 检查图标大小和颜色是否生效
+
+**期望结果：**
+
+- 图标显示在文本前面
+- 图标大小为 20px
+- 图标颜色为红色
+- 图标容器有正确的类名 `text-card__icon--prefix`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.5.2：后置图标
+
+**测试目的：** 验证后置图标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `suffixIcon={<DownOutlined />}`
+2. 检查图标是否显示在文本后面
+3. 设置 `iconConfig={{ size: 16 }}`
+4. 检查图标大小是否生效
+
+**期望结果：**
+
+- 图标显示在文本后面
+- 图标大小为 16px
+- 图标容器有正确的类名 `text-card__icon--suffix`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.5.3：前后图标组合
+
+**测试目的：** 验证同时显示前后图标  
+**测试步骤：**
+
+1. 同时设置 `prefixIcon` 和 `suffixIcon`
+2. 检查两个图标是否都正常显示
+3. 检查间距是否正确
+
+**期望结果：**
+
+- 前后图标都正常显示
+- 间距根据 size 正确设置（gap 属性）
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 2.6 标签功能测试
+
+#### 测试用例 2.6.1：后置标签
+
+**测试目的：** 验证后置标签的渲染和配置  
+**测试步骤：**
+
+1. 设置 `tag={<Tag color="blue">2</Tag>}`
+2. 检查标签是否显示在后置位置
+3. 设置 `tagConfig={{ style: { marginLeft: 8 } }}`
+4. 检查自定义样式是否生效
+
+**期望结果：**
+
+- 标签显示在后置位置（文本后面）
+- 自定义样式生效
+- 标签容器有正确的类名 `text-card__tag`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.6.2：标签与后置图标组合
+
+**测试目的：** 验证标签和后置图标同时显示时的顺序  
+**测试步骤：**
+
+1. 同时设置 `tag` 和 `suffixIcon`
+2. 检查显示顺序
+
+**期望结果：**
+
+- 标签在前，图标在后
+- 顺序：文本 -> 标签 -> 后置图标
+
+**测试类型：** 人工测试
+
+---
+
+### 2.7 角标功能测试
+
+#### 测试用例 2.7.1：红点角标
+
+**测试目的：** 验证红点角标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'dot' }}`
+2. 检查是否显示红点角标
+3. 设置 `badge={{ type: 'dot', color: 'blue', offset: [-10, 0], size: 'small' }}`
+4. 检查位置、颜色、偏移是否生效
+
+**期望结果：**
+
+- 显示红点角标
+- 通过 offset 控制位置（向左偏移）
+- 颜色为蓝色
+- 大小为 small
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.7.2：数字角标
+
+**测试目的：** 验证数字角标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'number', content: 99 }}`
+2. 检查是否显示数字 99
+3. 设置 `badge={{ type: 'number', content: 999 }}`
+4. 检查大数字是否正确显示
+5. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
+6. 检查 0 是否不显示
+7. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
+8. 检查 0 是否显示
+
+**期望结果：**
+
+- 显示数字 99
+- 大数字正确显示
+- showZero=false 时，0 不显示
+- showZero=true 时，0 显示
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+#### 测试用例 2.7.3：文本角标
+
+**测试目的：** 验证文本角标的渲染和配置  
+**测试步骤：**
+
+1. 设置 `badge={{ type: 'text', content: 'New' }}`
+2. 检查是否显示文本 "New"
+3. 设置 `badge={{ type: 'text', content: 'Very Long Text' }}`
+4. 检查长文本是否正确显示
+
+**期望结果：**
+
+- 显示文本 "New"
+- 长文本正常显示
+
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 二、基础功能测试用例
+#### 测试用例 2.7.4：角标位置（通过 offset 控制）
 
-### 2.1 组件渲染
+**测试目的：** 验证角标的不同位置（通过 offset 控制）  
+**测试步骤：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 基础渲染 | 使用必填 prop `text` 渲染组件 | 组件正常渲染，显示文本内容 | 自动化 |
-| 空文本渲染 | text 设置为空字符串 | 组件正常渲染，不显示文本 | 自动化 |
-| ReactNode 文本 | text 传入 JSX 元素 | 正确渲染 JSX 内容 | 自动化 |
+1. 不设置 offset，检查默认位置（右上角）
+2. 设置 `offset: [-10, 0]`，检查是否向左偏移
+3. 设置 `offset: [0, 10]`，检查是否向下偏移
+4. 设置 `offset: [-10, 10]`，检查是否向左下偏移
 
-### 2.2 文本内容
+**期望结果：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 文本显示 | 设置 text="Tab title" | 正确显示文本内容 | 人工 |
-| 长文本省略（单行） | 设置超长文本，maxLines=1 | 文本超出显示省略号 | 人工 |
-| 长文本省略（多行） | 设置超长文本，maxLines=2 | 文本超出 2 行显示省略号 | 人工 |
-| 禁用省略 | ellipsis=false | 文本不显示省略号，完整显示 | 人工 |
+- 不设置 offset 时，角标在右上角（默认位置）
+- offset 正数向右/下偏移，负数向左/上偏移
+- 角标位置正确对应设置的 offset 值
+
+**测试类型：** 人工测试
 
 ---
 
-## 三、样式变体测试用例
+#### 测试用例 2.7.5：角标大小
 
-### 3.1 样式 1 - 纯文本 (text)
+**测试目的：** 验证角标大小控制  
+**测试步骤：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 默认样式 | variant="text" | 无背景，无边框，无 padding | 人工 |
-| Active 状态 | variant="text" + active.value=true | 文本颜色变为主题色，字体加粗 | 人工 |
-| Hover 状态 | variant="text" + 鼠标悬停 | 文本颜色变为浅紫色 | 人工 |
-| Disabled 状态 | variant="text" + disabled.value=true | 文本半透明，颜色变灰 | 人工 |
+1. 设置 `badge={{ type: 'number', content: 99, size: 'small' }}`
+2. 检查角标大小是否为 small
+3. 设置 `badge={{ type: 'number', content: 99, size: 'default' }}`
+4. 检查角标大小是否为 default
+5. 设置 `badge={{ type: 'number', content: 99 }}`（不设置 size）
+6. 检查角标是否使用默认大小
+7. 设置 `badge={{ type: 'dot', size: 'small' }}`
+8. 检查红点角标大小是否生效
 
-### 3.2 样式 2 - 圆角背景 (filled)
+**期望结果：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 默认样式 | variant="filled" | 无背景，有 padding，圆角 40px | 人工 |
-| Active 状态 | variant="filled" + active.value=true | 主题色背景，白色文字 | 人工 |
-| Hover 状态 | variant="filled" + 鼠标悬停 | 灰色背景 #F2F4F7 | 人工 |
-| 圆角效果 | variant="filled" | 边框圆角为 40px（胶囊形） | 人工 |
+- 角标大小正确对应设置的 size 值
+- size='small' 时显示小尺寸角标
+- size='default' 时显示默认尺寸角标
+- 不设置 size 时使用默认尺寸
 
-### 3.3 样式 3 - 浅色背景 (light)
+**测试类型：** 自动化测试 + 人工测试
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 默认样式 | variant="light" | 无背景，深灰文字 #475467 | 人工 |
-| Active 状态 | variant="light" + active.value=true | 浅紫背景，主题色文字，字体加粗 | 人工 |
-| Hover 状态 | variant="light" + 鼠标悬停 | 灰色背景 #F2F4F7 | 人工 |
+---
 
-### 3.4 样式 4 - 描边 (outlined)
+#### 测试用例 2.7.6：角标显示零值
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 默认样式 | variant="outlined" | 灰色边框，无背景 | 人工 |
-| Active 状态 | variant="outlined" + active.value=true | 主题色边框，主题色文字 | 人工 |
-| Hover 状态 | variant="outlined" + 鼠标悬停 | 边框颜色变浅紫 | 人工 |
+**测试目的：** 验证角标 showZero 配置  
+**测试步骤：**
 
-### 3.5 样式 5 - 渐变 (gradient)
+1. 设置 `badge={{ type: 'number', content: 0, showZero: false }}`
+2. 检查角标是否不显示
+3. 设置 `badge={{ type: 'number', content: 0, showZero: true }}`
+4. 检查角标是否显示 0
+5. 设置 `badge={{ type: 'number', content: 0 }}`（不设置 showZero）
+6. 检查角标是否不显示（默认 showZero=false）
+7. 设置 `badge={{ type: 'number', content: 1, showZero: false }}`
+8. 检查非零值是否正常显示
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 默认样式 | variant="gradient" | 无背景 | 人工 |
-| Active 状态 | variant="gradient" + active.value=true | 渐变背景（紫色），白色文字 | 人工 |
-| 渐变方向 | variant="gradient" + active | 渐变方向为 135deg | 人工 |
+**期望结果：**
 
-### 3.6 样式 6 - 虚线 (dashed)
+- showZero=false 时，content 为 0 不显示角标
+- showZero=true 时，content 为 0 显示角标
+- 不设置 showZero 时，默认不显示零值
+- 非零值不受 showZero 影响，正常显示
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 默认样式 | variant="dashed" | 灰色虚线边框 | 人工 |
-| Active 状态 | variant="dashed" + active.value=true | 主题色虚线边框，浅紫背景 | 人工 |
-| Hover 状态 | variant="dashed" + 鼠标悬停 | 边框颜色变浅紫 | 人工 |
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 四、尺寸测试用例
+### 2.8 插槽功能测试
+
+#### 测试用例 2.8.1：前置插槽
+
+**测试目的：** 验证前置插槽的渲染和优先级  
+**测试步骤：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| Small 尺寸 | size="small" | padding: 8px 12px, fontSize: 14px, gap: 8px, borderRadius: 4px | 人工 |
-| Default 尺寸 | size="default" | padding: 12px 16px, fontSize: 14px, gap: 12px, borderRadius: 6px | 人工 |
-| Large 尺寸 | size="large" | padding: 16px 20px, fontSize: 16px, gap: 16px, borderRadius: 8px | 人工 |
-| 尺寸切换 | 动态切换 size | 样式平滑过渡 | 人工 |
+1. 同时设置 `prefixSlot={<div>Custom</div>}` 和 `prefixIcon={<BellOutlined />}`
+2. 检查显示哪个内容
+
+**期望结果：**
+
+- 显示前置插槽内容
+- 不显示前置图标
+- 插槽优先级高于图标
+
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 五、状态测试用例
+#### 测试用例 2.8.2：后置插槽
+
+**测试目的：** 验证后置插槽的渲染和优先级  
+**测试步骤：**
+
+1. 同时设置 `suffixSlot={<div>Custom</div>}`、`tag={<Tag>Tag</Tag>}` 和 `suffixIcon={<DownOutlined />}`
+2. 检查显示哪个内容
+
+**期望结果：**
+
+- 显示后置插槽内容
+- 不显示标签和后置图标
+- 插槽优先级高于标签和图标
+
+**测试类型：** 自动化测试 + 人工测试
 
-### 5.1 Active 状态
+---
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| Active 样式 | active.value=true | 应用 active 样式（根据 variant 不同） | 人工 |
-| Active 类名 | active.className="custom-active" | 添加自定义类名 | 自动化 |
-| Active 样式覆盖 | active.style={color: 'red'} | 自定义样式生效 | 人工 |
-| Active onChange | 点击组件触发 active.onChange | onChange 回调被调用，参数为 true | 自动化 |
-| Active extra | active.extra=<Icon /> | 渲染 extra 内容 | 人工 |
+### 2.9 文本配置测试
 
-### 5.2 Disabled 状态
+#### 测试用例 2.9.1：字体样式配置
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| Disabled 样式 | disabled.value=true | 透明度 0.4，颜色变灰，cursor: not-allowed | 人工 |
-| Disabled 点击 | disabled.value=true + 点击 | 点击事件不触发 | 自动化 |
-| Disabled tabIndex | disabled.value=true | tabIndex=-1，无法键盘聚焦 | 人工 |
-| Disabled extra | disabled.extra=<span>禁用</span> | 渲染 extra 内容 | 人工 |
+**测试目的：** 验证文本字体样式配置  
+**测试步骤：**
 
-### 5.3 Loading 状态
+1. 设置 `textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#ff0000' }}`
+2. 检查字体大小、粗细、颜色是否生效
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| Loading 样式 | loading.value=true | 透明度 0.6，cursor: wait | 人工 |
-| Loading 点击 | loading.value=true + 点击 | 点击事件不触发 | 自动化 |
-| Loading extra | loading.extra=<Spin /> | 渲染加载图标 | 人工 |
+**期望结果：**
 
-### 5.4 状态优先级
+- 字体大小为 18px
+- 字体加粗
+- 文本颜色为红色
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| Loading > Disabled | loading=true + disabled=true | 显示 loading 状态 | 自动化 |
-| Loading > Active | loading=true + active=true | 显示 loading 状态 | 自动化 |
-| Disabled > Active | disabled=true + active=true | 显示 disabled 状态 | 自动化 |
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 六、图标测试用例
+#### 测试用例 2.9.2：文本省略（单行）
+
+**测试目的：** 验证单行文本省略功能  
+**测试步骤：**
+
+1. 设置超长文本和 `textConfig={{ maxLines: 1, ellipsis: true }}`
+2. 检查是否显示省略号
+
+**期望结果：**
+
+- 文本超出部分显示省略号
+- 使用 `text-overflow: ellipsis` 和 `white-space: nowrap`
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
 
-### 6.1 前置图标
+#### 测试用例 2.9.3：文本省略（多行）
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 图标渲染 | prefixIcon=<BellIcon /> | 图标显示在文本前面 | 人工 |
-| 图标大小 | iconConfig.size=20 | 图标大小为 20px | 人工 |
-| 图标颜色 | iconConfig.color="#ff0000" | 图标颜色为红色 | 人工 |
-| 无图标 | 不传 prefixIcon | 不显示前置图标 | 自动化 |
+**测试目的：** 验证多行文本省略功能  
+**测试步骤：**
 
-### 6.2 后置图标
+1. 设置超长文本和 `textConfig={{ maxLines: 2, ellipsis: true }}`
+2. 检查是否显示省略号
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 图标渲染 | suffixIcon=<ChevronIcon /> | 图标显示在文本后面 | 人工 |
-| 图标大小 | iconConfig.size=16 | 前后图标大小统一为 16px | 人工 |
-| 无图标 | 不传 suffixIcon | 不显示后置图标 | 自动化 |
+**期望结果：**
 
-### 6.3 前后图标组合
+- 文本超出 2 行后显示省略号
+- 使用 `-webkit-line-clamp: 2` 和 `-webkit-box-orient: vertical`
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 同时显示 | prefixIcon + suffixIcon | 前后图标都正常显示 | 人工 |
-| 间距正确 | 前后图标 + 文本 | 间距根据 size 正确设置 | 人工 |
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 七、标签测试用例
+#### 测试用例 2.9.4：文本对齐
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 标签渲染 | tag=<Tag>标签</Tag> | 标签显示在后置位置 | 人工 |
-| 标签样式 | tagConfig.style={marginLeft: 8} | 自定义样式生效 | 人工 |
-| 标签+后置图标 | tag + suffixIcon | 标签在前，图标在后 | 人工 |
-| 无标签 | 不传 tag | 不显示标签 | 自动化 |
+**测试目的：** 验证文本对齐配置  
+**测试步骤：**
+
+1. 分别设置 `textConfig={{ textAlign: 'left' }}`、`'center'`、`'right'`
+2. 检查文本对齐方式
+
+**期望结果：**
+
+- 文本对齐方式正确对应设置的值
+
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 八、角标测试用例
+### 2.10 宽度模式测试
+
+#### 测试用例 2.10.1：自动宽度（auto）
+
+**测试目的：** 验证自动宽度模式  
+**测试步骤：**
+
+1. 设置 `widthMode="auto"` 和 `maxWidth={300}`
+2. 检查宽度设置
+
+**期望结果：**
 
-### 8.1 红点角标
+- width 为 'auto'
+- maxWidth 为 300px
+- 内容超出最大宽度时显示省略号
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 红点显示 | badge.type="dot" | 显示红点角标 | 人工 |
-| 红点位置 | badge.position="top-right" | 角标在右上角 | 人工 |
-| 红点颜色 | badge.color="blue" | 角标颜色为蓝色 | 人工 |
-| 红点偏移 | badge.offset=[5, 5] | 角标偏移 5px | 人工 |
+**测试类型：** 自动化测试 + 人工测试
 
-### 8.2 数字角标
+---
+
+#### 测试用例 2.10.2：固定宽度（fixed）
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 数字显示 | badge.type="number", content=99 | 显示数字 99 | 人工 |
-| 大数字 | badge.content=999 | 正确显示大数字 | 人工 |
-| 零显示 | badge.content=0 | 显示 0 | 人工 |
+**测试目的：** 验证固定宽度模式  
+**测试步骤：**
 
-### 8.3 文本角标
+1. 设置 `widthMode="fixed"` 和 `width={200}`
+2. 检查宽度设置
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 文本显示 | badge.type="text", content="New" | 显示文本 "New" | 人工 |
-| 长文本 | badge.content="Very Long Text" | 文本正常显示 | 人工 |
+**期望结果：**
 
-### 8.4 角标位置
+- width 为 200px
+- 宽度固定不变
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 右上角 | badge.position="top-right" | 角标在右上角 | 人工 |
-| 左上角 | badge.position="top-left" | 角标在左上角 | 人工 |
-| 右下角 | badge.position="bottom-right" | 角标在右下角 | 人工 |
-| 左下角 | badge.position="bottom-left" | 角标在左下角 | 人工 |
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 九、插槽测试用例
+#### 测试用例 2.10.3：撑满容器（full）
+
+**测试目的：** 验证撑满容器宽度模式  
+**测试步骤：**
+
+1. 设置 `widthMode="full"`
+2. 检查宽度设置
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 前置插槽 | prefixSlot=<div>Custom</div> | 显示自定义前置内容，替换 prefixIcon | 人工 |
-| 后置插槽 | suffixSlot=<div>Custom</div> | 显示自定义后置内容，替换 tag 和 suffixIcon | 人工 |
-| 插槽优先级 | prefixSlot + prefixIcon | prefixSlot 优先显示 | 自动化 |
+**期望结果：**
+
+- width 为 '100%'
+- minWidth 为 28px
+
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 十、文本配置测试用例
+### 2.11 自适应规则测试
+
+#### 测试用例 2.11.1：宽度自适应规则
+
+**测试目的：** 验证宽度自适应规则  
+**测试步骤：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 字体大小 | textConfig.fontSize=18 | 文本字体大小为 18px | 人工 |
-| 字体粗细 | textConfig.fontWeight="bold" | 文本加粗 | 人工 |
-| 文本颜色 | textConfig.color="#ff0000" | 文本颜色为红色 | 人工 |
-| 最大行数 | textConfig.maxLines=2 | 文本最多显示 2 行 | 人工 |
-| 禁用省略 | textConfig.ellipsis=false | 不显示省略号 | 人工 |
+1. 默认宽度模式（auto），检查最大宽度限制
+2. 设置超长文本，检查是否显示省略号
+3. 设置 `widthMode="full"`，检查最小宽度限制
+
+**期望结果：**
+
+- 默认最大宽度为 400px
+- 超过最大宽度时，文本区域显示省略号
+- full 模式下最小宽度为 28px
+
+**测试类型：** 人工测试
 
 ---
 
-## 十一、宽度模式测试用例
+#### 测试用例 2.11.2：水平对齐规则
+
+**测试目的：** 验证水平排列时的对齐规则  
+**测试步骤：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 自动宽度 | widthMode="auto" | 宽度跟随内容，最大 400px | 人工 |
-| 固定宽度 | widthMode="fixed", width=200 | 宽度固定为 200px | 人工 |
-| 撑满容器 | widthMode="full" | 宽度 100%，最小 28px | 人工 |
-| 最大宽度 | widthMode="auto", maxWidth=300 | 最大宽度为 300px | 人工 |
-| 超长文本 | widthMode="auto" + 超长文本 | 达到最大宽度后显示省略号 | 人工 |
+1. 多个 TextCard 水平排列
+2. 检查内容对齐方式
+
+**期望结果：**
+
+- 水平排列时，内容默认居中对齐
+
+**测试类型：** 人工测试
 
 ---
 
-## 十二、事件测试用例
+#### 测试用例 2.11.3：垂直对齐规则
+
+**测试目的：** 验证垂直排列时的对齐规则  
+**测试步骤：**
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| onClick 触发 | clickable=true + 点击 | onClick 回调被调用 | 自动化 |
-| onClick 参数 | 点击后检查回调参数 | 参数为 event 对象 | 自动化 |
-| 不可点击 | clickable=false + 点击 | onClick 不触发 | 自动化 |
-| Disabled 不触发 | disabled.value=true + 点击 | onClick 不触发 | 自动化 |
-| Loading 不触发 | loading.value=true + 点击 | onClick 不触发 | 自动化 |
+1. 多个 TextCard 垂直排列
+2. 检查内容对齐方式
+
+**期望结果：**
+
+- 垂直排列时，内容默认左对齐
+
+**测试类型：** 人工测试
 
 ---
 
-## 十三、可访问性测试用例
+### 2.12 交互行为测试
+
+#### 测试用例 2.12.1：悬停交互
+
+**测试目的：** 验证悬停状态的交互  
+**测试步骤：**
+
+1. 鼠标悬停在组件上
+2. 检查样式变化
+3. 检查指针样式
+
+**期望结果：**
+
+- 展示悬停状态样式（根据 variant 不同）
+- 指针变为手型（cursor: pointer）
+- 可点击状态下才显示手型
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| role 属性 | 检查 DOM | role="button" | 自动化 |
-| aria-disabled | disabled.value=true | aria-disabled="true" | 自动化 |
-| tabIndex | 正常状态 | tabIndex=0 | 自动化 |
-| tabIndex disabled | disabled.value=true | tabIndex=-1 | 自动化 |
-| 键盘导航 | Tab 键聚焦 | 组件可聚焦 | 人工 |
+**测试类型：** 人工测试
 
 ---
 
-## 十四、自定义渲染测试用例
+#### 测试用例 2.12.2：点击交互
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| render 函数 | render={(props) => <div>{props.text}</div>} | 使用自定义渲染 | 人工 |
-| render 优先级 | render 函数存在 | 忽略其他内容配置 | 自动化 |
+**测试目的：** 验证点击事件的交互  
+**测试步骤：**
+
+1. 点击组件
+2. 检查 onClick 回调是否触发
+3. 检查 active.onChange 是否触发（如果提供）
+4. 检查选中状态是否切换
+
+**期望结果：**
+
+- 触发点击事件（onClick 回调被调用）
+- 如果提供了 active.onChange 且未激活，触发 onChange(true)
+- 切换选中状态（如果使用受控模式）
+
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 十五、边界情况测试用例
+#### 测试用例 2.12.3：选中状态交互
+
+**测试目的：** 验证选中状态的样式应用  
+**测试步骤：**
+
+1. 设置 `active={{ value: true }}`
+2. 检查是否应用选中样式
+
+**期望结果：**
+
+- 应用选中样式（如边框高亮、背景色变化等，根据 variant 不同）
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 空文本 | text="" | 正常渲染，不报错 | 自动化 |
-| 超长文本 | text="很长很长的文本..." | 正确显示省略号 | 人工 |
-| 特殊字符 | text="<>&\"'" | 特殊字符正确转义显示 | 人工 |
-| 无 Props | 仅传 text | 使用所有默认值正常渲染 | 自动化 |
-| 所有 Props | 传入所有 props | 正常渲染，不冲突 | 人工 |
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 十六、性能测试用例
+#### 测试用例 2.12.4：禁用状态下的交互
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 多次渲染 | 快速切换 props | 无性能问题，渲染流畅 | 人工 |
-| 大量实例 | 渲染 100 个组件 | 页面不卡顿 | 人工 |
-| 内存泄漏 | 挂载/卸载多次 | 无内存泄漏 | 自动化 |
+**测试目的：** 验证禁用状态下的交互限制  
+**测试步骤：**
+
+1. 设置 `disabled={{ value: true }}`
+2. 尝试点击组件
+3. 尝试键盘导航
+
+**期望结果：**
+
+- 点击事件不触发
+- 无法键盘聚焦（tabIndex=-1）
+- 指针变为 not-allowed
+
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 十七、兼容性测试用例
+#### 测试用例 2.12.5：加载状态下的交互
+
+**测试目的：** 验证加载状态下的交互限制  
+**测试步骤：**
+
+1. 设置 `loading={{ value: true }}`
+2. 尝试点击组件
+
+**期望结果：**
+
+- 点击事件不触发
+- 指针变为 wait
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| Chrome | 在 Chrome 浏览器测试 | 所有功能正常 | 人工 |
-| Firefox | 在 Firefox 浏览器测试 | 所有功能正常 | 人工 |
-| Safari | 在 Safari 浏览器测试 | 所有功能正常 | 人工 |
-| Edge | 在 Edge 浏览器测试 | 所有功能正常 | 人工 |
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 十八、Bug 汇总
+#### 测试用例 2.12.6：不可点击状态
 
-**说明**：此部分由人工测试人员填写发现的 Bug
+**测试目的：** 验证 clickable=false 时的交互  
+**测试步骤：**
 
-### Bug 列表
+1. 设置 `clickable={false}`
+2. 尝试点击组件
+3. 检查指针样式
 
-| Bug ID | 发现时间 | Bug 描述 | 优先级 | 状态 | 修复时间 | 备注 |
-|--------|---------|---------|--------|------|---------|------|
-| - | - | - | - | - | - | - |
+**期望结果：**
 
-### Bug 模板
+- 点击事件不触发
+- 指针为默认样式（不是手型）
+- 不添加 `text-card--clickable` 类名
 
-```
-Bug ID: #001
-发现时间: 2024-01-01
-Bug 描述: [详细描述问题]
-复现步骤:
-  1. [步骤1]
-  2. [步骤2]
-  3. [步骤3]
-预期结果: [应该显示什么]
-实际结果: [实际显示什么]
-优先级: P0/P1/P2/P3
-状态: 待修复/修复中/已修复/已验证
-修复时间: 
-修复说明: 
-```
+**测试类型：** 自动化测试 + 人工测试
 
 ---
 
-## 十九、测试总结
+### 2.13 自定义渲染测试
 
-### 测试统计
+#### 测试用例 2.13.1：自定义渲染函数
 
-- **总测试用例数**: 120+
-- **自动化测试用例**: 30+
-- **人工测试用例**: 90+
-- **覆盖率目标**: 90%+
+**测试目的：** 验证自定义渲染函数功能  
+**测试步骤：**
 
-### 测试结论
+1. 设置 `render={(props) => <div className="custom-render">{props.text}</div>}`
+2. 检查是否使用自定义渲染
 
-测试完成后填写：
+**期望结果：**
 
-- [ ] 所有测试用例通过
-- [ ] 发现 Bug 已修复
-- [ ] 组件可以发布
+- 使用自定义渲染函数
+- 忽略其他内容配置（图标、标签等）
+- 正确传递 props
 
-### 测试签名
+**测试类型：** 自动化测试 + 人工测试
 
-- 测试人员: ___________
-- 测试时间: ___________
-- 审核人员: ___________
-- 审核时间: ___________
+---
+
+### 2.14 可访问性测试
+
+#### 测试用例 2.14.1：role 属性
+
+**测试目的：** 验证 role 属性设置  
+**测试步骤：**
+
+1. 检查 DOM 元素的 role 属性
+
+**期望结果：**
+
+- role="button"
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.14.2：aria-disabled 属性
+
+**测试目的：** 验证 aria-disabled 属性设置  
+**测试步骤：**
+
+1. 设置 `disabled={{ value: true }}`
+2. 检查 aria-disabled 属性
+
+**期望结果：**
+
+- aria-disabled="true"
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.14.3：tabIndex 属性
+
+**测试目的：** 验证 tabIndex 属性设置  
+**测试步骤：**
+
+1. 正常状态下检查 tabIndex
+2. disabled 状态下检查 tabIndex
+
+**期望结果：**
+
+- 正常状态：tabIndex=0
+- disabled 状态：tabIndex=-1
+
+**测试类型：** 自动化测试
+
+---
+
+#### 测试用例 2.14.4：键盘导航
+
+**测试目的：** 验证键盘导航功能  
+**测试步骤：**
+
+1. 使用 Tab 键聚焦组件
+2. 使用 Enter/Space 键触发点击
+
+**期望结果：**
+
+- 可以通过键盘导航
+- 焦点状态清晰
+- 可以键盘触发点击
+
+**测试类型：** 人工测试
+
+---
+
+## 3. 边界条件测试
+
+### 测试用例 3.1：空文本
+
+**测试目的：** 验证空文本时的表现  
+**测试步骤：**
+
+1. 传入 `text=""`
+2. 检查渲染
+
+**期望结果：**
+
+- 不报错
+- 组件正常渲染
+
+**测试类型：** 自动化测试
+
+---
+
+### 测试用例 3.2：超长文本
+
+**测试目的：** 验证超长文本时的表现  
+**测试步骤：**
+
+1. 传入超长文本（超过 400px 宽度）
+2. 检查是否显示省略号
+
+**期望结果：**
+
+- 正确显示省略号
+- 不出现布局问题
+
+**测试类型：** 人工测试
+
+---
+
+### 测试用例 3.3：特殊字符
+
+**测试目的：** 验证特殊字符的处理  
+**测试步骤：**
+
+1. 传入包含特殊字符的文本：`text="<>&\"'"`
+2. 检查是否正确转义显示
+
+**期望结果：**
+
+- 特殊字符正确转义显示
+- 不出现 XSS 问题
+
+**测试类型：** 自动化测试 + 人工测试
+
+---
+
+### 测试用例 3.4：所有 Props 组合
+
+**测试目的：** 验证所有 props 同时使用时的表现  
+**测试步骤：**
+
+1. 传入所有可能的 props
+2. 检查是否正常渲染，不冲突
+
+**期望结果：**
+
+- 正常渲染
+- 各功能不冲突
+- 优先级正确（插槽 > 图标/标签，loading > disabled > active）
+
+**测试类型：** 人工测试
+
+---
+
+### 测试用例 3.5：快速切换状态
+
+**测试目的：** 验证快速切换状态时的表现  
+**测试步骤：**
+
+1. 快速切换 active、disabled、loading 状态
+2. 检查状态更新是否正确
+
+**期望结果：**
+
+- 状态正确更新
+- 不出现竞态条件
+- 样式正确应用
+
+**测试类型：** 自动化测试
+
+---
+
+## 4. 兼容性测试
+
+### 测试用例 4.1：不同浏览器测试
+
+**测试目的：** 验证在不同浏览器中的兼容性  
+**测试范围：**
+
+- Chrome（最新版本）
+- Firefox（最新版本）
+- Safari（最新版本）
+- Edge（最新版本）
+
+**期望结果：**
+
+- 所有浏览器中显示一致
+- 功能正常
+- 样式正确
+
+**测试类型：** 人工测试
+
+---
+
+### 测试用例 4.2：不同设备测试
+
+**测试目的：** 验证在不同设备上的表现  
+**测试范围：**
+
+- 桌面设备（1920x1080）
+- 笔记本（1366x768）
+- 平板（768x1024）
+- 手机（375x667）
+
+**期望结果：**
+
+- 响应式布局正常
+- 触摸交互流畅
+- 布局在不同尺寸下正确显示
+
+**测试类型：** 人工测试
+
+---
+
+## 5. 性能测试
+
+### 测试用例 5.1：渲染性能
+
+**测试目的：** 验证组件渲染性能  
+**测试步骤：**
+
+1. 渲染包含 100 个 TextCard 的列表
+2. 测量首次渲染时间
+3. 测量重新渲染时间
+
+**期望结果：**
+
+- 首次渲染时间 < 200ms
+- 重新渲染时间 < 100ms
+
+**测试类型：** 性能测试
+
+---
+
+### 测试用例 5.2：内存占用
+
+**测试目的：** 验证组件内存占用  
+**测试步骤：**
+
+1. 渲染和销毁组件多次
+2. 监测内存变化
+
+**期望结果：**
+
+- 无明显内存泄漏
+- 销毁后内存释放
+
+**测试类型：** 性能测试
+
+---
+
+### 测试用例 5.3：大量实例性能
+
+**测试目的：** 验证大量实例时的性能  
+**测试步骤：**
+
+1. 渲染 1000 个 TextCard 实例
+2. 检查页面是否卡顿
+3. 检查交互是否流畅
+
+**期望结果：**
+
+- 页面不卡顿
+- 交互流畅
+- 无性能问题
+
+**测试类型：** 性能测试
+
+---
+
+## 6. 测试总结
+
+### 6.1 测试用例统计
+
+- **总用例数**：150+
+- **自动化测试**：80+
+- **人工测试**：70+
+- **性能测试**：3
+- **兼容性测试**：2
+
+### 6.2 测试优先级
+
+- **P0（高优先级）**：基础渲染、样式变体、尺寸、状态、交互行为、自适应规则
+- **P1（中优先级）**：图标、标签、角标、插槽、文本配置、宽度模式
+- **P2（低优先级）**：边界条件、性能测试、可访问性、自定义渲染
+
+### 6.3 测试覆盖率目标
+
+- 代码覆盖率：≥ 85%
+- 分支覆盖率：≥ 80%
+- 函数覆盖率：≥ 85%
+- 行覆盖率：≥ 85%
+- 功能覆盖率：100%
+
+## 7. 测试执行计划
+
+### 7.1 自动化测试
+
+- 使用 Vitest + React Testing Library
+- 每次代码提交前自动运行
+- CI/CD 集成
+
+### 7.2 人工测试
+
+- 新功能开发完成后进行
+- 重大版本发布前全面测试
+- 定期回归测试
+
+### 7.3 测试报告
+
+- 记录测试结果
+- 标注未通过的用例
+- 提供修复建议