@pisell/materials 1.8.41 → 1.8.42

package/lib/components/PisellCards/components/GraphicTextCard/docs/GraphicTextCard.$tab-dev.md

@@ -53,7 +53,7 @@ GraphicTextCard 是一个图文卡片组件，结合图标/图片、文本和状
 1. ✅ 支持自定义背景、圆角、边框、阴影、padding、gap
 2. ✅ 支持自定义文本大小、粗细、颜色、显示行数
 3. ✅ 支持自定义图形区域大小、圆角、背景
-4. ✅ 支持自定义角标位置（通过 offset）和大小（通过 size）
+4. ✅ 支持自定义角标位置和样式
 5. ✅ 支持主题色 CSS 变量（`var(--theme-color)`）
 6. ✅ 文本超出显示省略号
 7. ✅ 图形区域尺寸可配置
@@ -122,12 +122,10 @@ export interface GraphicTextCardProps extends PisellBasicCardProps {
   badge?: {
     type?: 'dot' | 'number' | 'text';
     content?: ReactNode;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     offset?: [number, number];
-    size?: 'small' | 'default';
     color?: string;
     style?: CSSProperties;
-    showZero?: boolean;
-    [key: string]: any;
   };
 
   // ========== 插槽配置 ==========
@@ -780,7 +778,6 @@ export default Provider;
 
 1. **BadgeWrapper** - 来自 `TextCard/components/BadgeWrapper`
    - 功能：角标渲染和定位
-   - 位置通过 `offset` 控制，大小通过 `size` 控制，零值显示通过 `showZero` 控制
    - 基于：Ant Design Badge 组件
 
 2. **PisellBasicCardProps** - 来自 `PisellCards/types`

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

@@ -9,6 +9,7 @@ category: atom
 ## 一、测试概述
 
 ### 测试范围
+
 - 组件基础功能
 - 4 种样式变体
 - 3 种尺寸
@@ -24,6 +25,7 @@ category: atom
 - 自适应规则
 
 ### 测试方法
+
 - 人工测试（UI 交互、视觉验证）
 - 自动化测试（单元测试、快照测试）
 
@@ -33,24 +35,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'   | 文本居中对齐        | 人工   |
 
 ---
 
@@ -58,51 +60,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 自动计算图形尺寸 | 自动化  |
 
 ---
 
@@ -110,38 +112,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 状态 | 自动化  |
 
 ---
 
@@ -149,30 +151,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> | 显示自定义内容          | 人工   |
 
 ---
 
@@ -329,17 +331,17 @@ category: atom
 
 ### 8.1 前置插槽
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 前置插槽渲染 | prefixSlot=<div>前置</div> | 显示在图形区域前 | 人工 |
-| 无前置插槽 | 不传 prefixSlot | 不显示前置插槽 | 自动化 |
+| 测试点    | 测试步骤                     | 预期结果     | 测试类型 |
+|--------|--------------------------|----------|------|
+| 前置插槽渲染 | prefixSlot=<div>前置</div> | 显示在图形区域前 | 人工   |
+| 无前置插槽  | 不传 prefixSlot            | 不显示前置插槽  | 自动化  |
 
 ### 8.2 后置插槽
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 后置插槽渲染 | suffixSlot=<div>后置</div> | 显示在文本内容后 | 人工 |
-| 无后置插槽 | 不传 suffixSlot | 不显示后置插槽 | 自动化 |
+| 测试点    | 测试步骤                     | 预期结果     | 测试类型 |
+|--------|--------------------------|----------|------|
+| 后置插槽渲染 | suffixSlot=<div>后置</div> | 显示在文本内容后 | 人工   |
+| 无后置插槽  | 不传 suffixSlot            | 不显示后置插槽  | 自动化  |
 
 ---
 
@@ -347,27 +349,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                       | 不显示省略号      | 人工   |
 
 ---
 
@@ -375,24 +377,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" + 长文本 | 文本超出显示省略号 | 人工   |
 
 ---
 
@@ -400,17 +402,17 @@ category: atom
 
 ### 11.1 宽度自适应
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 默认固定宽度 | 不设置 widthMode | 宽度默认为固定宽度 | 人工 |
-| 文本省略 | 文本超出宽度 | 文本区域显示省略号 | 人工 |
+| 测试点    | 测试步骤          | 预期结果      | 测试类型 |
+|--------|---------------|-----------|------|
+| 默认固定宽度 | 不设置 widthMode | 宽度默认为固定宽度 | 人工   |
+| 文本省略   | 文本超出宽度        | 文本区域显示省略号 | 人工   |
 
 ### 11.2 布局对齐
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 横向布局对齐 | variant="horizontal" | 内容上下居中对齐 | 人工 |
-| 竖向布局对齐 | variant="vertical-image" 或 "vertical-icon" | 内容左右居中对齐 | 人工 |
+| 测试点    | 测试步骤                                       | 预期结果     | 测试类型 |
+|--------|--------------------------------------------|----------|------|
+| 横向布局对齐 | variant="horizontal"                       | 内容上下居中对齐 | 人工   |
+| 竖向布局对齐 | variant="vertical-image" 或 "vertical-icon" | 内容左右居中对齐 | 人工   |
 
 ---
 
@@ -418,12 +420,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 事件不触发 | 自动化  |
 
 ---
 
@@ -431,12 +433,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           | 自动化  |
 
 ---
 
@@ -444,19 +446,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 | 图形区域正常渲染 | 人工   |
 
 ---
 
@@ -464,10 +466,10 @@ category: atom
 
 ### 15.1 渲染性能
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| 大量组件渲染 | 渲染 100 个组件 | 渲染时间 < 1s | 自动化 |
-| 状态切换性能 | 频繁切换 active 状态 | 无卡顿 | 人工 |
+| 测试点    | 测试步骤           | 预期结果      | 测试类型 |
+|--------|----------------|-----------|------|
+| 大量组件渲染 | 渲染 100 个组件     | 渲染时间 < 1s | 自动化  |
+| 状态切换性能 | 频繁切换 active 状态 | 无卡顿       | 人工   |
 
 ---
 
@@ -475,12 +477,12 @@ category: atom
 
 ### 16.1 浏览器兼容性
 
-| 测试点 | 测试步骤 | 预期结果 | 测试类型 |
-|--------|---------|---------|---------|
-| Chrome | 在 Chrome 中测试 | 功能正常 | 人工 |
-| Firefox | 在 Firefox 中测试 | 功能正常 | 人工 |
-| Safari | 在 Safari 中测试 | 功能正常 | 人工 |
-| Edge | 在 Edge 中测试 | 功能正常 | 人工 |
+| 测试点     | 测试步骤          | 预期结果 | 测试类型 |
+|---------|---------------|------|------|
+| Chrome  | 在 Chrome 中测试  | 功能正常 | 人工   |
+| Firefox | 在 Firefox 中测试 | 功能正常 | 人工   |
+| Safari  | 在 Safari 中测试  | 功能正常 | 人工   |
+| Edge    | 在 Edge 中测试    | 功能正常 | 人工   |
 
 ---
 
@@ -492,13 +494,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. 检查所有配置是否生效