npm - @pisell/materials - Versions diffs - 1.8.38 → 1.8.41 - Mend

@pisell/materials 1.8.38 → 1.8.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (758) hide show

package/lib/components/PisellCards/components/GraphicTextCard/docs/GraphicTextCard.$tab-test.md CHANGED Viewed

@@ -9,7 +9,6 @@ category: atom
 ## 一、测试概述
 ### 测试范围
 - 组件基础功能
 - 4 种样式变体
 - 3 种尺寸
@@ -25,7 +24,6 @@ category: atom
 - 自适应规则
 ### 测试方法
 - 人工测试（UI 交互、视觉验证）
 - 自动化测试（单元测试、快照测试）
@@ -35,24 +33,24 @@ category: atom
 ### 2.1 组件渲染
-| 测试点          | 测试步骤                                     | 预期结果             | 测试类型 |
-|--------------|------------------------------------------|------------------|------|
-| 基础渲染         | 使用必填 prop `text` 和 `image` 或 `icon` 渲染组件 | 组件正常渲染，显示图形和文本内容 | 自动化  |
-| 空文本渲染        | text 设置为空字符串                             | 组件正常渲染，不显示文本     | 自动化  |
-| ReactNode 文本 | text 传入 JSX 元素                           | 正确渲染 JSX 内容      | 自动化  |
-| 仅图片          | 只传 image，不传 icon                         | 显示图片，不显示图标       | 自动化  |
-| 仅图标          | 只传 icon，不传 image                         | 显示图标，不显示图片       | 自动化  |
-| 图片优先         | 同时传 image 和 icon                         | 优先显示图片，不显示图标     | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 基础渲染 | 使用必填 prop `text` 和 `image` 或 `icon` 渲染组件 | 组件正常渲染，显示图形和文本内容 | 自动化 |
+| 空文本渲染 | text 设置为空字符串 | 组件正常渲染，不显示文本 | 自动化 |
+| ReactNode 文本 | text 传入 JSX 元素 | 正确渲染 JSX 内容 | 自动化 |
+| 仅图片 | 只传 image，不传 icon | 显示图片，不显示图标 | 自动化 |
+| 仅图标 | 只传 icon，不传 image | 显示图标，不显示图片 | 自动化 |
+| 图片优先 | 同时传 image 和 icon | 优先显示图片，不显示图标 | 自动化 |
 ### 2.2 文本内容
-| 测试点       | 测试步骤                            | 预期结果          | 测试类型 |
-|-----------|---------------------------------|---------------|------|
-| 文本显示      | 设置 text="Tab title"             | 正确显示文本内容      | 人工   |
-| 长文本省略（单行） | 设置超长文本，maxLines=1，ellipsis=true | 文本超出显示省略号     | 人工   |
-| 长文本省略（多行） | 设置超长文本，maxLines=2，ellipsis=true | 文本超出 2 行显示省略号 | 人工   |
-| 禁用省略      | ellipsis=false                  | 文本不显示省略号，完整显示 | 人工   |
-| 文本对齐      | textConfig.textAlign='center'   | 文本居中对齐        | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 文本显示 | 设置 text="Tab title" | 正确显示文本内容 | 人工 |
+| 长文本省略（单行） | 设置超长文本，maxLines=1，ellipsis=true | 文本超出显示省略号 | 人工 |
+| 长文本省略（多行） | 设置超长文本，maxLines=2，ellipsis=true | 文本超出 2 行显示省略号 | 人工 |
+| 禁用省略 | ellipsis=false | 文本不显示省略号，完整显示 | 人工 |
+| 文本对齐 | textConfig.textAlign='center' | 文本居中对齐 | 人工 |
 ---
@@ -60,51 +58,51 @@ category: atom
 ### 3.1 样式 1 - 垂直布局-图片 (vertical-image)
-| 测试点         | 测试步骤                                           | 预期结果           | 测试类型 |
-|-------------|------------------------------------------------|----------------|------|
-| 默认样式        | variant="vertical-image" + image               | 图片在上，文本在下，垂直布局 | 人工   |
-| Active 状态   | variant="vertical-image" + active.value=true   | 文本颜色变为主题色      | 人工   |
-| Hover 状态    | variant="vertical-image" + 鼠标悬停                | 有悬停效果          | 人工   |
-| Disabled 状态 | variant="vertical-image" + disabled.value=true | 图形和文本半透明       | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="vertical-image" + image | 图片在上，文本在下，垂直布局 | 人工 |
+| Active 状态 | variant="vertical-image" + active.value=true | 文本颜色变为主题色 | 人工 |
+| Hover 状态 | variant="vertical-image" + 鼠标悬停 | 有悬停效果 | 人工 |
+| Disabled 状态 | variant="vertical-image" + disabled.value=true | 图形和文本半透明 | 人工 |
 ### 3.2 样式 2 - 垂直布局-图标 (vertical-icon)
-| 测试点         | 测试步骤                                          | 预期结果           | 测试类型 |
-|-------------|-----------------------------------------------|----------------|------|
-| 默认样式        | variant="vertical-icon" + icon                | 图标在上，文本在下，垂直布局 | 人工   |
-| Active 状态   | variant="vertical-icon" + active.value=true   | 图标和文本颜色变为主题色   | 人工   |
-| Hover 状态    | variant="vertical-icon" + 鼠标悬停                | 有悬停效果          | 人工   |
-| Disabled 状态 | variant="vertical-icon" + disabled.value=true | 图标和文本半透明       | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="vertical-icon" + icon | 图标在上，文本在下，垂直布局 | 人工 |
+| Active 状态 | variant="vertical-icon" + active.value=true | 图标和文本颜色变为主题色 | 人工 |
+| Hover 状态 | variant="vertical-icon" + 鼠标悬停 | 有悬停效果 | 人工 |
+| Disabled 状态 | variant="vertical-icon" + disabled.value=true | 图标和文本半透明 | 人工 |
 ### 3.3 样式 3 - 横向布局 (horizontal)
-| 测试点         | 测试步骤                                       | 预期结果                  | 测试类型 |
-|-------------|--------------------------------------------|-----------------------|------|
-| 默认样式        | variant="horizontal" + image/icon          | 图形在左，文本在右，横向布局，上下居中对齐 | 人工   |
-| Active 状态   | variant="horizontal" + active.value=true   | 背景为主题色，文字为白色          | 人工   |
-| Hover 状态    | variant="horizontal" + 鼠标悬停                | 背景变深                  | 人工   |
-| Disabled 状态 | variant="horizontal" + disabled.value=true | 图形和文本半透明              | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="horizontal" + image/icon | 图形在左，文本在右，横向布局，上下居中对齐 | 人工 |
+| Active 状态 | variant="horizontal" + active.value=true | 背景为主题色，文字为白色 | 人工 |
+| Hover 状态 | variant="horizontal" + 鼠标悬停 | 背景变深 | 人工 |
+| Disabled 状态 | variant="horizontal" + disabled.value=true | 图形和文本半透明 | 人工 |
 ### 3.4 样式 4 - 卡片式 (card)
-| 测试点         | 测试步骤                                 | 预期结果             | 测试类型 |
-|-------------|--------------------------------------|------------------|------|
-| 默认样式        | variant="card" + image               | 图片在上，文本在下，带边框和背景 | 人工   |
-| Active 状态   | variant="card" + active.value=true   | 边框色为主题色          | 人工   |
-| Hover 状态    | variant="card" + 鼠标悬停                | 有悬停效果            | 人工   |
-| Disabled 状态 | variant="card" + disabled.value=true | 图形和文本半透明         | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认样式 | variant="card" + image | 图片在上，文本在下，带边框和背景 | 人工 |
+| Active 状态 | variant="card" + active.value=true | 边框色为主题色 | 人工 |
+| Hover 状态 | variant="card" + 鼠标悬停 | 有悬停效果 | 人工 |
+| Disabled 状态 | variant="card" + disabled.value=true | 图形和文本半透明 | 人工 |
 ---
 ## 四、尺寸测试用例
-| 测试点        | 测试步骤                           | 预期结果                       | 测试类型 |
-|------------|--------------------------------|----------------------------|------|
-| Small 尺寸   | size="small"                   | 图形区域和文本尺寸较小                | 人工   |
-| Default 尺寸 | size="default"                 | 图形区域和文本尺寸默认                | 人工   |
-| Large 尺寸   | size="large"                   | 图形区域和文本尺寸较大                | 人工   |
-| 尺寸切换       | 动态切换 size                      | 样式平滑过渡                     | 人工   |
-| 图形尺寸计算     | 不设置 graphicConfig.width/height | 根据 variant 和 size 自动计算图形尺寸 | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Small 尺寸 | size="small" | 图形区域和文本尺寸较小 | 人工 |
+| Default 尺寸 | size="default" | 图形区域和文本尺寸默认 | 人工 |
+| Large 尺寸 | size="large" | 图形区域和文本尺寸较大 | 人工 |
+| 尺寸切换 | 动态切换 size | 样式平滑过渡 | 人工 |
+| 图形尺寸计算 | 不设置 graphicConfig.width/height | 根据 variant 和 size 自动计算图形尺寸 | 自动化 |
 ---
@@ -112,38 +110,38 @@ category: atom
 ### 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 内容                 | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 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 内容 | 人工 |
 ### 5.2 Disabled 状态
-| 测试点               | 测试步骤                           | 预期结果                             | 测试类型 |
-|-------------------|--------------------------------|----------------------------------|------|
-| 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 内容                      | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 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 状态
-| 测试点           | 测试步骤                    | 预期结果                 | 测试类型 |
-|---------------|-------------------------|----------------------|------|
-| Loading 样式    | loading.value=true      | 透明度 0.6，cursor: wait | 人工   |
-| Loading 点击    | loading.value=true + 点击 | 点击事件不触发              | 自动化  |
-| Loading extra | loading.extra=<Spin />  | 渲染加载图标               | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Loading 样式 | loading.value=true | 透明度 0.6，cursor: wait | 人工 |
+| Loading 点击 | loading.value=true + 点击 | 点击事件不触发 | 自动化 |
+| Loading extra | loading.extra=<Spin /> | 渲染加载图标 | 人工 |
 ### 5.4 状态优先级
-| 测试点                | 测试步骤                         | 预期结果           | 测试类型 |
-|--------------------|------------------------------|----------------|------|
-| Loading > Disabled | loading=true + disabled=true | 显示 loading 状态  | 自动化  |
-| Loading > Active   | loading=true + active=true   | 显示 loading 状态  | 自动化  |
-| Disabled > Active  | disabled=true + active=true  | 显示 disabled 状态 | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Loading > Disabled | loading=true + disabled=true | 显示 loading 状态 | 自动化 |
+| Loading > Active | loading=true + active=true | 显示 loading 状态 | 自动化 |
+| Disabled > Active | disabled=true + active=true | 显示 disabled 状态 | 自动化 |
 ---
@@ -151,30 +149,30 @@ category: atom
 ### 6.1 图片显示
-| 测试点  | 测试步骤                                  | 预期结果          | 测试类型 |
-|------|---------------------------------------|---------------|------|
-| 图片渲染 | image="https://example.com/image.png" | 显示图片          | 人工   |
-| 图片尺寸 | graphicConfig.width=100, height=100   | 图片尺寸为 100x100 | 人工   |
-| 图片圆角 | graphicConfig.borderRadius=8          | 图片圆角为 8px     | 人工   |
-| 图片背景 | graphicConfig.background="#f0f0f0"    | 图片区域有背景色      | 人工   |
-| 图片边框 | graphicConfig.border="1px solid #ccc" | 图片区域有边框       | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 图片渲染 | image="https://example.com/image.png" | 显示图片 | 人工 |
+| 图片尺寸 | graphicConfig.width=100, height=100 | 图片尺寸为 100x100 | 人工 |
+| 图片圆角 | graphicConfig.borderRadius=8 | 图片圆角为 8px | 人工 |
+| 图片背景 | graphicConfig.background="#f0f0f0" | 图片区域有背景色 | 人工 |
+| 图片边框 | graphicConfig.border="1px solid #ccc" | 图片区域有边框 | 人工 |
 ### 6.2 图标显示
-| 测试点          | 测试步骤                                | 预期结果            | 测试类型 |
-|--------------|-------------------------------------|-----------------|------|
-| ReactNode 图标 | icon=<HomeOutlined />               | 显示 ReactNode 图标 | 人工   |
-| 图标 URL       | icon="https://example.com/icon.png" | 显示图标图片          | 人工   |
-| 图标大小         | graphicConfig.iconSize=32           | 图标大小为 32px      | 人工   |
-| 图标颜色         | graphicConfig.iconColor="#1890ff"   | 图标颜色为蓝色         | 人工   |
-| 图标背景         | graphicConfig.background="#f0f0f0"  | 图标区域有背景色        | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| ReactNode 图标 | icon=<HomeOutlined /> | 显示 ReactNode 图标 | 人工 |
+| 图标 URL | icon="https://example.com/icon.png" | 显示图标图片 | 人工 |
+| 图标大小 | graphicConfig.iconSize=32 | 图标大小为 32px | 人工 |
+| 图标颜色 | graphicConfig.iconColor="#1890ff" | 图标颜色为蓝色 | 人工 |
+| 图标背景 | graphicConfig.background="#f0f0f0" | 图标区域有背景色 | 人工 |
 ### 6.3 图形区域插槽
-| 测试点   | 测试步骤                       | 预期结果             | 测试类型 |
-|-------|----------------------------|------------------|------|
-| 插槽优先级 | graphicSlot + image + icon | 优先显示 graphicSlot | 自动化  |
-| 自定义图形 | graphicSlot=<div>自定义</div> | 显示自定义内容          | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 插槽优先级 | graphicSlot + image + icon | 优先显示 graphicSlot | 自动化 |
+| 自定义图形 | graphicSlot=<div>自定义</div> | 显示自定义内容 | 人工 |
 ---
@@ -331,17 +329,17 @@ category: atom
 ### 8.1 前置插槽
-| 测试点    | 测试步骤                     | 预期结果     | 测试类型 |
-|--------|--------------------------|----------|------|
-| 前置插槽渲染 | prefixSlot=<div>前置</div> | 显示在图形区域前 | 人工   |
-| 无前置插槽  | 不传 prefixSlot            | 不显示前置插槽  | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 前置插槽渲染 | prefixSlot=<div>前置</div> | 显示在图形区域前 | 人工 |
+| 无前置插槽 | 不传 prefixSlot | 不显示前置插槽 | 自动化 |
 ### 8.2 后置插槽
-| 测试点    | 测试步骤                     | 预期结果     | 测试类型 |
-|--------|--------------------------|----------|------|
-| 后置插槽渲染 | suffixSlot=<div>后置</div> | 显示在文本内容后 | 人工   |
-| 无后置插槽  | 不传 suffixSlot            | 不显示后置插槽  | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 后置插槽渲染 | suffixSlot=<div>后置</div> | 显示在文本内容后 | 人工 |
+| 无后置插槽 | 不传 suffixSlot | 不显示后置插槽 | 自动化 |
 ---
@@ -349,27 +347,27 @@ category: atom
 ### 9.1 字体样式
-| 测试点  | 测试步骤                         | 预期结果         | 测试类型 |
-|------|------------------------------|--------------|------|
-| 字体大小 | textConfig.fontSize=18       | 文本字体大小为 18px | 人工   |
-| 字体粗细 | textConfig.fontWeight='bold' | 文本字体加粗       | 人工   |
-| 文本颜色 | textConfig.color="#ff0000"   | 文本颜色为红色      | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 字体大小 | textConfig.fontSize=18 | 文本字体大小为 18px | 人工 |
+| 字体粗细 | textConfig.fontWeight='bold' | 文本字体加粗 | 人工 |
+| 文本颜色 | textConfig.color="#ff0000" | 文本颜色为红色 | 人工 |
 ### 9.2 文本对齐
-| 测试点  | 测试步骤                          | 预期结果   | 测试类型 |
-|------|-------------------------------|--------|------|
-| 左对齐  | textConfig.textAlign='left'   | 文本左对齐  | 人工   |
-| 居中对齐 | textConfig.textAlign='center' | 文本居中对齐 | 人工   |
-| 右对齐  | textConfig.textAlign='right'  | 文本右对齐  | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 左对齐 | textConfig.textAlign='left' | 文本左对齐 | 人工 |
+| 居中对齐 | textConfig.textAlign='center' | 文本居中对齐 | 人工 |
+| 右对齐 | textConfig.textAlign='right' | 文本右对齐 | 人工 |
 ### 9.3 文本省略
-| 测试点  | 测试步骤                                 | 预期结果        | 测试类型 |
-|------|--------------------------------------|-------------|------|
-| 单行省略 | textConfig.maxLines=1, ellipsis=true | 超出 1 行显示省略号 | 人工   |
-| 多行省略 | textConfig.maxLines=2, ellipsis=true | 超出 2 行显示省略号 | 人工   |
-| 禁用省略 | ellipsis=false                       | 不显示省略号      | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 单行省略 | textConfig.maxLines=1, ellipsis=true | 超出 1 行显示省略号 | 人工 |
+| 多行省略 | textConfig.maxLines=2, ellipsis=true | 超出 2 行显示省略号 | 人工 |
+| 禁用省略 | ellipsis=false | 不显示省略号 | 人工 |
 ---
@@ -377,24 +375,24 @@ category: atom
 ### 10.1 自动宽度（auto）
-| 测试点    | 测试步骤                           | 预期结果              | 测试类型 |
-|--------|--------------------------------|-------------------|------|
-| 自动宽度   | widthMode="auto"               | 内容撑满，不超过 maxWidth | 人工   |
-| 最大宽度限制 | widthMode="auto", maxWidth=300 | 最大宽度为 300px       | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 自动宽度 | widthMode="auto" | 内容撑满，不超过 maxWidth | 人工 |
+| 最大宽度限制 | widthMode="auto", maxWidth=300 | 最大宽度为 300px | 人工 |
 ### 10.2 固定宽度（fixed）
-| 测试点  | 测试步骤                               | 预期结果        | 测试类型 |
-|------|------------------------------------|-------------|------|
-| 固定宽度 | widthMode="fixed", width=200       | 宽度固定为 200px | 人工   |
-| 文本省略 | widthMode="fixed", width=100 + 长文本 | 文本超出显示省略号   | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 固定宽度 | widthMode="fixed", width=200 | 宽度固定为 200px | 人工 |
+| 文本省略 | widthMode="fixed", width=100 + 长文本 | 文本超出显示省略号 | 人工 |
 ### 10.3 撑满容器（full）
-| 测试点  | 测试步骤                   | 预期结果      | 测试类型 |
-|------|------------------------|-----------|------|
-| 撑满容器 | widthMode="full"       | 宽度为 100%  | 人工   |
-| 文本省略 | widthMode="full" + 长文本 | 文本超出显示省略号 | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 撑满容器 | widthMode="full" | 宽度为 100% | 人工 |
+| 文本省略 | widthMode="full" + 长文本 | 文本超出显示省略号 | 人工 |
 ---
@@ -402,17 +400,17 @@ category: atom
 ### 11.1 宽度自适应
-| 测试点    | 测试步骤          | 预期结果      | 测试类型 |
-|--------|---------------|-----------|------|
-| 默认固定宽度 | 不设置 widthMode | 宽度默认为固定宽度 | 人工   |
-| 文本省略   | 文本超出宽度        | 文本区域显示省略号 | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 默认固定宽度 | 不设置 widthMode | 宽度默认为固定宽度 | 人工 |
+| 文本省略 | 文本超出宽度 | 文本区域显示省略号 | 人工 |
 ### 11.2 布局对齐
-| 测试点    | 测试步骤                                       | 预期结果     | 测试类型 |
-|--------|--------------------------------------------|----------|------|
-| 横向布局对齐 | variant="horizontal"                       | 内容上下居中对齐 | 人工   |
-| 竖向布局对齐 | variant="vertical-image" 或 "vertical-icon" | 内容左右居中对齐 | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 横向布局对齐 | variant="horizontal" | 内容上下居中对齐 | 人工 |
+| 竖向布局对齐 | variant="vertical-image" 或 "vertical-icon" | 内容左右居中对齐 | 人工 |
 ---
@@ -420,12 +418,12 @@ category: atom
 ### 12.1 点击事件
-| 测试点           | 测试步骤                     | 预期结果          | 测试类型 |
-|---------------|--------------------------|---------------|------|
-| 正常点击          | clickable=true, 点击组件     | onClick 事件触发  | 自动化  |
-| 禁用点击          | clickable=false          | onClick 事件不触发 | 自动化  |
-| Disabled 状态点击 | disabled.value=true + 点击 | onClick 事件不触发 | 自动化  |
-| Loading 状态点击  | loading.value=true + 点击  | onClick 事件不触发 | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 正常点击 | clickable=true, 点击组件 | onClick 事件触发 | 自动化 |
+| 禁用点击 | clickable=false | onClick 事件不触发 | 自动化 |
+| Disabled 状态点击 | disabled.value=true + 点击 | onClick 事件不触发 | 自动化 |
+| Loading 状态点击 | loading.value=true + 点击 | onClick 事件不触发 | 自动化 |
 ---
@@ -433,12 +431,12 @@ category: atom
 ### 13.1 ARIA 属性
-| 测试点           | 测试步骤                 | 预期结果                 | 测试类型 |
-|---------------|----------------------|----------------------|------|
-| role 属性       | clickable=true       | role="button"        | 自动化  |
-| aria-disabled | disabled.value=true  | aria-disabled="true" | 自动化  |
-| tabIndex      | disabled.value=true  | tabIndex=-1          | 自动化  |
-| tabIndex      | disabled.value=false | tabIndex=0           | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| role 属性 | clickable=true | role="button" | 自动化 |
+| aria-disabled | disabled.value=true | aria-disabled="true" | 自动化 |
+| tabIndex | disabled.value=true | tabIndex=-1 | 自动化 |
+| tabIndex | disabled.value=false | tabIndex=0 | 自动化 |
 ---
@@ -446,19 +444,19 @@ category: atom
 ### 14.1 空值处理
-| 测试点 | 测试步骤            | 预期结果         | 测试类型 |
-|-----|-----------------|--------------|------|
-| 空文本 | text=""         | 组件正常渲染，不显示文本 | 自动化  |
-| 无图形 | 不传 image 和 icon | 图形区域不显示      | 自动化  |
-| 无角标 | 不传 badge        | 不显示角标        | 自动化  |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 空文本 | text="" | 组件正常渲染，不显示文本 | 自动化 |
+| 无图形 | 不传 image 和 icon | 图形区域不显示 | 自动化 |
+| 无角标 | 不传 badge | 不显示角标 | 自动化 |
 ### 14.2 极端值
-| 测试点    | 测试步骤                                  | 预期结果     | 测试类型 |
-|--------|---------------------------------------|----------|------|
-| 极大数字角标 | badge.content=99999                   | 角标正常显示   | 人工   |
-| 极小图形尺寸 | graphicConfig.width=1, height=1       | 图形区域正常渲染 | 人工   |
-| 极大图形尺寸 | graphicConfig.width=1000, height=1000 | 图形区域正常渲染 | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 极大数字角标 | badge.content=99999 | 角标正常显示 | 人工 |
+| 极小图形尺寸 | graphicConfig.width=1, height=1 | 图形区域正常渲染 | 人工 |
+| 极大图形尺寸 | graphicConfig.width=1000, height=1000 | 图形区域正常渲染 | 人工 |
 ---
@@ -466,10 +464,10 @@ category: atom
 ### 15.1 渲染性能
-| 测试点    | 测试步骤           | 预期结果      | 测试类型 |
-|--------|----------------|-----------|------|
-| 大量组件渲染 | 渲染 100 个组件     | 渲染时间 < 1s | 自动化  |
-| 状态切换性能 | 频繁切换 active 状态 | 无卡顿       | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| 大量组件渲染 | 渲染 100 个组件 | 渲染时间 < 1s | 自动化 |
+| 状态切换性能 | 频繁切换 active 状态 | 无卡顿 | 人工 |
 ---
@@ -477,12 +475,12 @@ category: atom
 ### 16.1 浏览器兼容性
-| 测试点     | 测试步骤          | 预期结果 | 测试类型 |
-|---------|---------------|------|------|
-| Chrome  | 在 Chrome 中测试  | 功能正常 | 人工   |
-| Firefox | 在 Firefox 中测试 | 功能正常 | 人工   |
-| Safari  | 在 Safari 中测试  | 功能正常 | 人工   |
-| Edge    | 在 Edge 中测试    | 功能正常 | 人工   |
+| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
+|--------|---------|---------|---------|
+| Chrome | 在 Chrome 中测试 | 功能正常 | 人工 |
+| Firefox | 在 Firefox 中测试 | 功能正常 | 人工 |
+| Safari | 在 Safari 中测试 | 功能正常 | 人工 |
+| Edge | 在 Edge 中测试 | 功能正常 | 人工 |
 ---
@@ -494,13 +492,13 @@ category: atom
 **测试步骤：**
 1. 设置所有配置项：
-  - variant="vertical-icon"
-  - size="large"
-  - image="https://example.com/image.png"
-  - badge={{ type: 'number', content: 99, size: 'small', offset: [5, 5] }}
-  - textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#1890ff' }}
-  - active={{ value: true }}
-  - onClick={() => console.log('clicked')}
+   - variant="vertical-icon"
+   - size="large"
+   - image="https://example.com/image.png"
+   - badge={{ type: 'number', content: 99, size: 'small', offset: [5, 5] }}
+   - textConfig={{ fontSize: 18, fontWeight: 'bold', color: '#1890ff' }}
+   - active={{ value: true }}
+   - onClick={() => console.log('clicked')}
 2. 检查所有配置是否生效