gallery(BorderBeam): 补齐多光束与自定义容器示例

2026-10-17 05:31:01 +08:00 · 2026-09-08 19:36:22 +08:00
parent 074dee428c
commit e2b76319bd
15 changed files with 290 additions and 107 deletions
@@ -12,6 +12,9 @@ public enum BorderBeamShowCaseLangResourceKind
    PageDescription,
    BasicTitle,
    BasicDescription,
+    CustomContainerTitle,
+    CustomContainerDescription,
+    CustomContainerContent,
    ShowOnHoverTitle,
    ShowOnHoverDescription,
    ShowOnHoverCardTitle,
@@ -21,6 +21,21 @@
        <source>v6.0.5</source>
      </segment>
    </unit>
+    <unit id="CustomContainerContent">
+      <segment>
+        <source>Review task status, deployment health, and recent automation activity in one custom container.</source>
+      </segment>
+    </unit>
+    <unit id="CustomContainerDescription">
+      <segment>
+        <source>BorderBeam can decorate any Avalonia container. When the content does not implement IBorderBeamAwareControl, set matching BorderThickness and CornerRadius on BorderBeam.</source>
+      </segment>
+    </unit>
+    <unit id="CustomContainerTitle">
+      <segment>
+        <source>Custom container</source>
+      </segment>
+    </unit>
    <unit id="CustomizedColorCardDescription">
      <segment>
        <source>The segmented selector switches the color stop collection used by the beam.</source>
@@ -38,7 +53,7 @@
    </unit>
    <unit id="MultipleBeamsCardDescription">
      <segment>
-        <source>Three beams share one animation cycle and remain evenly spaced around the card.</source>
+        <source>Set Count to distribute multiple beams evenly around the container border.</source>
      </segment>
    </unit>
    <unit id="MultipleBeamsCardTitle">
@@ -25,6 +25,24 @@
        <target state="translated">v6.0.5</target>
      </segment>
    </unit>
+    <unit id="CustomContainerContent">
+      <segment>
+        <source>Review task status, deployment health, and recent automation activity in one custom container.</source>
+        <target state="translated">Revise o status das tarefas, a integridade das implantações e as atividades recentes de automação em um contêiner personalizado.</target>
+      </segment>
+    </unit>
+    <unit id="CustomContainerDescription">
+      <segment>
+        <source>BorderBeam can decorate any Avalonia container. When the content does not implement IBorderBeamAwareControl, set matching BorderThickness and CornerRadius on BorderBeam.</source>
+        <target state="translated">BorderBeam pode decorar qualquer contêiner Avalonia. Quando o conteúdo não implementar IBorderBeamAwareControl, defina BorderThickness e CornerRadius correspondentes no BorderBeam.</target>
+      </segment>
+    </unit>
+    <unit id="CustomContainerTitle">
+      <segment>
+        <source>Custom container</source>
+        <target state="translated">Contêiner personalizado</target>
+      </segment>
+    </unit>
    <unit id="CustomizedColorCardDescription">
      <segment>
        <source>The segmented selector switches the color stop collection used by the beam.</source>
@@ -45,8 +63,8 @@
    </unit>
    <unit id="MultipleBeamsCardDescription">
      <segment>
-        <source>Three beams share one animation cycle and remain evenly spaced around the card.</source>
-        <target state="translated">Três feixes compartilham um ciclo de animação e permanecem uniformemente espaçados ao redor do cartão.</target>
+        <source>Set Count to distribute multiple beams evenly around the container border.</source>
+        <target state="translated">Defina Count para distribuir vários feixes uniformemente ao redor da borda do contêiner.</target>
      </segment>
    </unit>
    <unit id="MultipleBeamsCardTitle">
@@ -25,6 +25,24 @@
        <target state="translated">v6.0.5</target>
      </segment>
    </unit>
+    <unit id="CustomContainerContent">
+      <segment>
+        <source>Review task status, deployment health, and recent automation activity in one custom container.</source>
+        <target state="translated">在一个自定义容器中查看任务状态、部署健康度和最近的自动化活动。</target>
+      </segment>
+    </unit>
+    <unit id="CustomContainerDescription">
+      <segment>
+        <source>BorderBeam can decorate any Avalonia container. When the content does not implement IBorderBeamAwareControl, set matching BorderThickness and CornerRadius on BorderBeam.</source>
+        <target state="translated">BorderBeam 可以装饰任意 Avalonia 容器。当内容未实现 IBorderBeamAwareControl 时，请在 BorderBeam 上设置与容器一致的 BorderThickness 和 CornerRadius。</target>
+      </segment>
+    </unit>
+    <unit id="CustomContainerTitle">
+      <segment>
+        <source>Custom container</source>
+        <target state="translated">自定义容器</target>
+      </segment>
+    </unit>
    <unit id="CustomizedColorCardDescription">
      <segment>
        <source>The segmented selector switches the color stop collection used by the beam.</source>
@@ -45,8 +63,8 @@
    </unit>
    <unit id="MultipleBeamsCardDescription">
      <segment>
-        <source>Three beams share one animation cycle and remain evenly spaced around the card.</source>
-        <target state="translated">三个光束共享同一个动画周期，并沿卡片边界保持等距。</target>
+        <source>Set Count to distribute multiple beams evenly around the container border.</source>
+        <target state="translated">设置 Count 可沿容器边界均匀分布多个光束。</target>
      </segment>
    </unit>
    <unit id="MultipleBeamsCardTitle">
@@ -25,6 +25,24 @@
        <target state="translated">v6.0.5</target>
      </segment>
    </unit>
+    <unit id="CustomContainerContent">
+      <segment>
+        <source>Review task status, deployment health, and recent automation activity in one custom container.</source>
+        <target state="translated">在一個自訂容器中檢視任務狀態、部署健康度和最近的自動化活動。</target>
+      </segment>
+    </unit>
+    <unit id="CustomContainerDescription">
+      <segment>
+        <source>BorderBeam can decorate any Avalonia container. When the content does not implement IBorderBeamAwareControl, set matching BorderThickness and CornerRadius on BorderBeam.</source>
+        <target state="translated">BorderBeam 可以裝飾任意 Avalonia 容器。當內容未實作 IBorderBeamAwareControl 時，請在 BorderBeam 上設定與容器一致的 BorderThickness 和 CornerRadius。</target>
+      </segment>
+    </unit>
+    <unit id="CustomContainerTitle">
+      <segment>
+        <source>Custom container</source>
+        <target state="translated">自訂容器</target>
+      </segment>
+    </unit>
    <unit id="CustomizedColorCardDescription">
      <segment>
        <source>The segmented selector switches the color stop collection used by the beam.</source>
@@ -45,8 +63,8 @@
    </unit>
    <unit id="MultipleBeamsCardDescription">
      <segment>
-        <source>Three beams share one animation cycle and remain evenly spaced around the card.</source>
-        <target state="translated">三個光束共用同一個動畫週期，並沿卡片邊界保持等距。</target>
+        <source>Set Count to distribute multiple beams evenly around the container border.</source>
+        <target state="translated">設定 Count 可沿容器邊界均勻分布多個光束。</target>
      </segment>
    </unit>
    <unit id="MultipleBeamsCardTitle">
@@ -84,6 +84,7 @@

                <gallery:ShowCaseItem
                    SourceKey="border-beam-show-on-hover"
+                    BadgeText="v6.1.8"
                    Title="{gallery:BorderBeamShowCaseLangResource ShowOnHoverTitle}"
                    Description="{gallery:BorderBeamShowCaseLangResource ShowOnHoverDescription}"
                    IsDeferredContentEnabled="True">
@@ -106,21 +107,64 @@

                <gallery:ShowCaseItem
                    SourceKey="border-beam-multiple-beams"
+                    BadgeText="v6.1.8"
                    Title="{gallery:BorderBeamShowCaseLangResource MultipleBeamsTitle}"
                    Description="{gallery:BorderBeamShowCaseLangResource MultipleBeamsDescription}"
                    IsDeferredContentEnabled="True">
                    <gallery:ShowCaseItem.DeferredContentTemplate>
                        <DataTemplate x:DataType="vm:BorderBeamViewModel">
-                            <atom:BorderBeam Width="360"
-                                             Count="3"
+                            <StackPanel Orientation="Vertical"
+                                        Spacing="12"
+                                        HorizontalAlignment="Left">
+                                <atom:BorderBeam Width="360"
+                                                 Count="3"
+                                                 HorizontalAlignment="Left">
+                                    <atom:Card Header="{gallery:BorderBeamShowCaseLangResource MultipleBeamsCardTitle}"
+                                               BorderThickness="1"
+                                               CornerRadius="8">
+                                        <atom:TextBlock Text="{gallery:BorderBeamShowCaseLangResource MultipleBeamsCardDescription}"
+                                                        TextWrapping="Wrap"
+                                                        Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
+                                    </atom:Card>
+                                </atom:BorderBeam>
+                                <atom:BorderBeam Width="360"
+                                                 Count="2"
+                                                 HorizontalAlignment="Left">
+                                    <atom:Card Header="{gallery:BorderBeamShowCaseLangResource MultipleBeamsCardTitle}"
+                                               BorderThickness="1"
+                                               CornerRadius="8">
+                                        <atom:TextBlock Text="{gallery:BorderBeamShowCaseLangResource MultipleBeamsCardDescription}"
+                                                        TextWrapping="Wrap"
+                                                        Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
+                                    </atom:Card>
+                                </atom:BorderBeam>
+                            </StackPanel>
+                        </DataTemplate>
+                    </gallery:ShowCaseItem.DeferredContentTemplate>
+                </gallery:ShowCaseItem>
+
+                <gallery:ShowCaseItem
+                    SourceKey="border-beam-custom-container"
+                    BadgeText="v6.1.8"
+                    Title="{gallery:BorderBeamShowCaseLangResource CustomContainerTitle}"
+                    Description="{gallery:BorderBeamShowCaseLangResource CustomContainerDescription}"
+                    IsDeferredContentEnabled="True">
+                    <gallery:ShowCaseItem.DeferredContentTemplate>
+                        <DataTemplate x:DataType="vm:BorderBeamViewModel">
+                            <atom:BorderBeam Width="420"
+                                             BorderThickness="1"
+                                             CornerRadius="8"
                                             HorizontalAlignment="Left">
-                                <atom:Card Header="{gallery:BorderBeamShowCaseLangResource MultipleBeamsCardTitle}"
-                                           BorderThickness="1"
-                                           CornerRadius="8">
-                                    <atom:TextBlock Text="{gallery:BorderBeamShowCaseLangResource MultipleBeamsCardDescription}"
+                                <Border MinHeight="160"
+                                        Padding="24"
+                                        BorderThickness="1"
+                                        CornerRadius="8"
+                                        BorderBrush="{atom:SharedTokenResource ColorBorderSecondary}"
+                                        Background="{atom:SharedTokenResource ColorBgContainer}">
+                                    <atom:TextBlock Text="{gallery:BorderBeamShowCaseLangResource CustomContainerContent}"
                                                    TextWrapping="Wrap"
                                                    Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
-                                </atom:Card>
+                                </Border>
                            </atom:BorderBeam>
                        </DataTemplate>
                    </gallery:ShowCaseItem.DeferredContentTemplate>
@@ -133,7 +133,7 @@ SourceKey：`border-beam-basic`

 ### 悬停显示

-来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:92`
+来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:93`

 SourceKey：`border-beam-show-on-hover`

@@ -153,50 +153,60 @@ SourceKey：`border-beam-show-on-hover`

 ### 多光束

-来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:114`
+来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:116`

 SourceKey：`border-beam-multiple-beams`

 ```axaml
-<atom:BorderBeam Width="360"
-                 Count="3"
-                 HorizontalAlignment="Left">
-    <atom:Card Header="多光束"
-               BorderThickness="1"
-               CornerRadius="8">
-        <atom:TextBlock Text="三个光束共享同一个动画周期，并沿卡片边界保持等距。"
-                        TextWrapping="Wrap"
-                        Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
-    </atom:Card>
-</atom:BorderBeam>
-```
-
-### 非统一圆角
-
-来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:136`
-
-SourceKey：`border-beam-non-uniform-radius`
-
-```axaml
-<atom:BorderBeam Width="360"
-                 Outset="0"
-                 BorderThickness="1"
-                 CornerRadius="20,20,0,0"
-                 HorizontalAlignment="Left">
-    <atom:PixelAlignedBorder ClipToBounds="True"
-                             CornerRadius="20,20,0,0"
-                             BorderThickness="1"
-                             BorderBrush="{atom:SharedTokenResource ColorBorderSecondary}"
-                             Background="{atom:SharedTokenResource ColorBgContainer}"
-                             Padding="24">
-        <StackPanel Spacing="8">
-            <atom:TextBlock Text="Non-uniform radius"
-                            FontWeight="Bold" />
-            <atom:TextBlock Text="顶部圆角保持较大半径，底部角保持直角。"
+<StackPanel Orientation="Vertical"
+            Spacing="12"
+            HorizontalAlignment="Left">
+    <atom:BorderBeam Width="360"
+                     Count="3"
+                     HorizontalAlignment="Left">
+        <atom:Card Header="多光束"
+                   BorderThickness="1"
+                   CornerRadius="8">
+            <atom:TextBlock Text="设置 Count 可沿容器边界均匀分布多个光束。"
                            TextWrapping="Wrap"
                            Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
-        </StackPanel>
-    </atom:PixelAlignedBorder>
+        </atom:Card>
+    </atom:BorderBeam>
+    <atom:BorderBeam Width="360"
+                     Count="2"
+                     HorizontalAlignment="Left">
+        <atom:Card Header="多光束"
+                   BorderThickness="1"
+                   CornerRadius="8">
+            <atom:TextBlock Text="设置 Count 可沿容器边界均匀分布多个光束。"
+                            TextWrapping="Wrap"
+                            Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
+        </atom:Card>
+    </atom:BorderBeam>
+</StackPanel>
+```
+
+### 自定义容器
+
+来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:154`
+
+SourceKey：`border-beam-custom-container`
+
+```axaml
+<atom:BorderBeam Width="420"
+                 BorderThickness="1"
+                 CornerRadius="8"
+                 HorizontalAlignment="Left">
+    <Border MinHeight="160"
+            Padding="24"
+            BorderThickness="1"
+            CornerRadius="8"
+            BorderBrush="{atom:SharedTokenResource ColorBorderSecondary}"
+            Background="{atom:SharedTokenResource ColorBgContainer}">
+        <atom:TextBlock Text="在一个自定义容器中查看任务状态、部署健康度和最近的自动化活动。"
+                        TextWrapping="Wrap"
+                        Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
+    </Border>
 </atom:BorderBeam>
 ```

@@ -22674,7 +22674,7 @@ SourceKey：`border-beam-basic`

 ### 悬停显示

-来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:92`
+来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:93`

 SourceKey：`border-beam-show-on-hover`

@@ -22694,50 +22694,60 @@ SourceKey：`border-beam-show-on-hover`

 ### 多光束

-来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:114`
+来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:116`

 SourceKey：`border-beam-multiple-beams`

 ```axaml
-<atom:BorderBeam Width="360"
-                 Count="3"
-                 HorizontalAlignment="Left">
-    <atom:Card Header="多光束"
-               BorderThickness="1"
-               CornerRadius="8">
-        <atom:TextBlock Text="三个光束共享同一个动画周期，并沿卡片边界保持等距。"
-                        TextWrapping="Wrap"
-                        Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
-    </atom:Card>
-</atom:BorderBeam>
-```
-
-### 非统一圆角
-
-来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:136`
-
-SourceKey：`border-beam-non-uniform-radius`
-
-```axaml
-<atom:BorderBeam Width="360"
-                 Outset="0"
-                 BorderThickness="1"
-                 CornerRadius="20,20,0,0"
-                 HorizontalAlignment="Left">
-    <atom:PixelAlignedBorder ClipToBounds="True"
-                             CornerRadius="20,20,0,0"
-                             BorderThickness="1"
-                             BorderBrush="{atom:SharedTokenResource ColorBorderSecondary}"
-                             Background="{atom:SharedTokenResource ColorBgContainer}"
-                             Padding="24">
-        <StackPanel Spacing="8">
-            <atom:TextBlock Text="Non-uniform radius"
-                            FontWeight="Bold" />
-            <atom:TextBlock Text="顶部圆角保持较大半径，底部角保持直角。"
+<StackPanel Orientation="Vertical"
+            Spacing="12"
+            HorizontalAlignment="Left">
+    <atom:BorderBeam Width="360"
+                     Count="3"
+                     HorizontalAlignment="Left">
+        <atom:Card Header="多光束"
+                   BorderThickness="1"
+                   CornerRadius="8">
+            <atom:TextBlock Text="设置 Count 可沿容器边界均匀分布多个光束。"
                            TextWrapping="Wrap"
                            Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
-        </StackPanel>
-    </atom:PixelAlignedBorder>
+        </atom:Card>
+    </atom:BorderBeam>
+    <atom:BorderBeam Width="360"
+                     Count="2"
+                     HorizontalAlignment="Left">
+        <atom:Card Header="多光束"
+                   BorderThickness="1"
+                   CornerRadius="8">
+            <atom:TextBlock Text="设置 Count 可沿容器边界均匀分布多个光束。"
+                            TextWrapping="Wrap"
+                            Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
+        </atom:Card>
+    </atom:BorderBeam>
+</StackPanel>
+```
+
+### 自定义容器
+
+来源：`controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml:154`
+
+SourceKey：`border-beam-custom-container`
+
+```axaml
+<atom:BorderBeam Width="420"
+                 BorderThickness="1"
+                 CornerRadius="8"
+                 HorizontalAlignment="Left">
+    <Border MinHeight="160"
+            Padding="24"
+            BorderThickness="1"
+            CornerRadius="8"
+            BorderBrush="{atom:SharedTokenResource ColorBorderSecondary}"
+            Background="{atom:SharedTokenResource ColorBgContainer}">
+        <atom:TextBlock Text="在一个自定义容器中查看任务状态、部署健康度和最近的自动化活动。"
+                        TextWrapping="Wrap"
+                        Foreground="{atom:SharedTokenResource ColorTextSecondary}" />
+    </Border>
 </atom:BorderBeam>
 ```

@@ -18,7 +18,11 @@
 - Gallery
  - 新增 `Show on hover` 和 `Multiple beams` 延迟加载示例；hover 通过页面 Style 组合 `:pointerover` 与
    `IsMotionEnabled`，不新增公共 hover API。
-  - 为五个 BorderBeam 示例补充稳定 `SourceKey`，并同步英语、巴西葡萄牙语、简体中文和繁体中文资源。
+  - `Multiple beams` 在同一稳定示例中纵向展示 `Count=3` 与 `Count=2` 两张卡片，并使用不绑定具体数量的共享文案。
+  - 新增 `Custom container` 延迟加载示例，以标准 Avalonia `Border` 验证普通内容可通过 BorderBeam 自身的
+    `BorderThickness` 和 `CornerRadius` 显式对齐边界几何，无需新增运行时 API。
+  - Show on hover、Multiple beams 和 Custom container 使用 AtomUI 当前版本 `v6.1.8` 的 Showcase 徽标。
+  - 为六个 BorderBeam 示例补充稳定 `SourceKey`，并同步英语、巴西葡萄牙语、简体中文和繁体中文资源。
 - Tests
  - 增加 `Count` 默认值与模板转发、等距相位、非正值回退、实际绘制数量，以及 Gallery 示例和本地化契约测试。
 - Docs
@@ -221,5 +221,6 @@ N 次光束 draw call。额外持久内存保持 `O(1)`，单帧绘制成本为
 - 统一圆角和非统一圆角下流光转角连续。
 - 实例级 `IsMotionEnabled=false`、自身或祖先不可见、detached 和零尺寸不产生持续 animation tick。
 - presenter 不拦截内容点击、焦点和键盘事件。
- Gallery hover 与 `Count=3` 示例的 Style、SourceKey、延迟加载结构和四语资源。
+- Gallery hover、同一 Multiple beams 示例内 `Count=3` / `Count=2` 对照，以及标准 Avalonia `Border` 自定义容器示例的 Style、SourceKey、延迟加载结构和四语资源。
+- Show on hover、Multiple beams 和 Custom container 三个本次新增 ShowcaseItem 使用 AtomUI 当前版本 `v6.1.8` 的 `BadgeText`。
 - 文档改动运行 `git diff --check`。
@@ -227,4 +227,4 @@ LLMS 导出来源：
 | 渲染 | 默认渐变、单色、多 stop、单/多光束、统一圆角、非统一圆角、Outset、实例禁用 motion 和命中测试。 |
 | Token | Light / dark 主题下默认颜色、线宽、圆角和 motion 默认值正确。 |
 | Public API | `Count` 默认值与模板转发、普通内容、感知内容、无内容、零尺寸、不可见状态不抛异常。 |
-| Gallery | Basic、Show on hover、Multiple beams、Non-uniform radius、Customized color 的稳定 SourceKey、布局和四语资源。 |
+| Gallery | Basic、Show on hover、Multiple beams、Custom container、Non-uniform radius、Customized color 的稳定 SourceKey、布局和四语资源；Multiple beams 在同一示例中成对展示 `Count=3` 与 `Count=2`；Custom container 以标准 Avalonia `Border` 验证普通内容的显式几何契约；本次新增的 Show on hover、Multiple beams 和 Custom container 均标记 AtomUI 当前版本 `v6.1.8`。 |
@@ -1,6 +1,8 @@
 # BorderBeam 多光束与悬停展示设计

-> 状态：2026-09-08 已实现；控件与 Gallery 全量测试、Desktop Gallery 构建和 LLMS 一致性验证已通过。视觉走查未使用同名应用回退：当前 CUA 不接受构建目录中的裸 Mach-O 绝对路径，故按本地调试 Skill 的身份约束标记为受阻。
+> 状态：2026-09-08 已实现；控件与 Gallery 全量测试、Desktop Gallery 构建和 LLMS 一致性验证已通过。
+> 视觉走查由本地调试 Skill 输出的当前工作区绝对二进制身份与用户截图共同确认；CUA 不接受裸 Mach-O
+> 绝对路径，整个过程未回退到同名应用或 bundle id。
 >
 > 上游基线：Ant Design `6.6.3`，重点参考 `BorderBeam.tsx`、`BorderBeamEffect.tsx`、
 > `style/index.ts`、`util.ts` 与 `demo/hover.tsx`。
@@ -51,7 +53,8 @@ AtomUI 不复制 DOM、portal、CSS mask 或 `offset-path` 结构，只保持以
 - 将 `Count` 通过默认 ControlTheme 转发给 internal presenter。
 - 在一套 `Progress` 动画中计算并绘制多个等距 phase。
 - 复用一次 render 内的路径度量、边框环 clip 和 brush。
- 在 Gallery 增加 `Multiple beams` 与 `Show on hover` 稳定示例。
+- 在 Gallery 增加 `Multiple beams` 与 `Show on hover` 稳定示例；前者在同一示例中成对展示 `Count=3` 与
+  `Count=2`。
 - 同步控件测试、Gallery 测试、控件文档和 LLMS 来源。

 ### 3.2 非目标
@@ -230,7 +233,8 @@ Presenter 继续拥有唯一 `Animation` 和 `CancellationTokenSource`：

 Gallery 增加两个独立、可复制的稳定示例：

- `border-beam-multiple-beams`：展示 `Count` 与默认周期共享关系；
+- `border-beam-multiple-beams`：在同一纵向示例中以 `Count=3` 和 `Count=2` 两张卡片展示数量变化与默认周期
+  共享关系；
 - `border-beam-show-on-hover`：展示 class、`:pointerover` 与 `IsMotionEnabled` 的组合。

 现有文档级示例同步补稳定 `SourceKey`，但不因示例新增而改变页面滚动、延迟挂载或 Masonry 语义。
@@ -267,7 +271,8 @@ Gallery 增加两个独立、可复制的稳定示例：

 ### 12.3 Gallery、文档与产品走查

- Gallery 的多光束和 hover 示例具有稳定 `SourceKey`，四套本地化资源完整。
+- Gallery 的多光束和 hover 示例具有稳定 `SourceKey`，多光束示例同时包含 `Count=3` 与 `Count=2`，四套
+  本地化资源完整。
 - Light/Dark 与不同 render scale 下，光束数量、边框贴合和圆角连续性可辨认。
 - hover 卡片左、中、右区域都能触发根控件 `:pointerover`，卡片内容交互不受影响。
 - Gallery 页面测试、控件定向测试、主题契约检查、LLMS verify 和 `git diff --check` 通过。
@@ -16,7 +16,7 @@ AtomUIGallery.Localization.AlertShowCaseLangResourceKind|BasicTitle,BasicDescrip
 AtomUIGallery.Localization.AutoCompleteShowCaseLangResourceKind|BasicUsageTitle,BasicUsageDescription,CustomizedTitle,CustomizedDescription,CustomOptionRenderingTitle,CustomOptionRenderingDescription,LookupPatternsUncertainCategoryTitle,LookupPatternsUncertainCategoryDescription,TextAreaAutoCompletionTitle,TextAreaAutoCompletionDescription,NonCaseSensitiveTitle,NonCaseSensitiveDescription,StatusTitle,StatusDescription,VariantsTitle,VariantsDescription,CustomizeClearButtonTitle,CustomizeClearButtonDescription,SizeTypeTitle,SizeTypeDescription,P2PlaceholderTextInputHere,P2PlaceholderTextTryAOrB,P2PlaceholderSizeTypeLarge,P2PlaceholderSizeTypeMiddle,P2PlaceholderSizeTypeSmall,P2PlaceholderSizeTypeCustom,P2TextResults,P2PlaceholderTextTryToTypeB,P2PlaceholderTextOutline,P2PlaceholderTextFilled,P2PlaceholderTextBorderless,P2PlaceholderTextUnderlined,P2PlaceholderTextUnclearable,P2PlaceholderTextCustomizedClearIcon,ScenarioExamples,PageSubtitle,PageDescription,ComponentCategory,ComponentStatusStable
 AtomUIGallery.Localization.AvatarShowCaseLangResourceKind|ScenarioExamples,ComponentCategory,ComponentStatusStable,PageSubtitle,PageDescription,BasicTitle,BasicDescription,TypeTitle,TypeDescription,NetworkImageTitle,NetworkImageDescription,AutoSetFontSizeTitle,AutoSetFontSizeDescription,AvatarGroupTitle,AvatarGroupDescription,P2ContentU,P2ContentUser,P2ContentChangeuser,P2ContentChangegap,P2ContentK,P2ContentA
 AtomUIGallery.Localization.BadgeShowCaseLangResourceKind|ScenarioExamples,ComponentCategory,ComponentStatusStable,PageSubtitle,PageDescription,BasicTitle,BasicDescription,OverflowCountTitle,OverflowCountDescription,OffsetTitle,OffsetDescription,SizeTitle,SizeDescription,StandaloneTitle,StandaloneDescription,DynamicTitle,DynamicDescription,RedBadgeTitle,RedBadgeDescription,StatusTitle,StatusDescription,RibbonTitle,RibbonDescription,ColorfulBadgeTitle,ColorfulBadgeDescription,P2TextSuccess,P2TextError,P2TextDefault,P2TextProcessing,P2TextWarning,P2TextPolishExperience,P2TextJiachenPlan,P2TextAvaloniaExcellent,P2TextHippies,P2TitlePresets,P2TextPink,P2TextRed,P2TextYellow,P2TextOrange,P2TextCyan,P2TextGreen,P2TextBlue,P2TextPurple,P2TextGeekblue,P2TextMagenta,P2TextVolcano,P2TextGold,P2TextLime,P2TitleCustom,P2TextRgbN45N183N245,P2TextHslN102N53N61,P2TextRgbN15N141N230,P2ContentAdd,P2ContentSub,P2ContentRandom,P2TextPushesOpenTheWindow,P2TextAndRaisesTheSpyglass,P2ContentLinkSomething
-AtomUIGallery.Localization.BorderBeamShowCaseLangResourceKind|ScenarioExamples,ComponentCategory,ComponentIntroducedVersion,PageSubtitle,PageDescription,BasicTitle,BasicDescription,ShowOnHoverTitle,ShowOnHoverDescription,ShowOnHoverCardTitle,ShowOnHoverCardDescription,MultipleBeamsTitle,MultipleBeamsDescription,MultipleBeamsCardTitle,MultipleBeamsCardDescription,CustomizedColorTitle,CustomizedColorDescription,CustomizedColorCardDescription,NonUniformRadiusTitle,NonUniformRadiusDescription,NonUniformRadiusCardDescription
+AtomUIGallery.Localization.BorderBeamShowCaseLangResourceKind|ScenarioExamples,ComponentCategory,ComponentIntroducedVersion,PageSubtitle,PageDescription,BasicTitle,BasicDescription,CustomContainerTitle,CustomContainerDescription,CustomContainerContent,ShowOnHoverTitle,ShowOnHoverDescription,ShowOnHoverCardTitle,ShowOnHoverCardDescription,MultipleBeamsTitle,MultipleBeamsDescription,MultipleBeamsCardTitle,MultipleBeamsCardDescription,CustomizedColorTitle,CustomizedColorDescription,CustomizedColorCardDescription,NonUniformRadiusTitle,NonUniformRadiusDescription,NonUniformRadiusCardDescription
 AtomUIGallery.Localization.BreadcrumbShowCaseLangResourceKind|ScenarioExamples,ComponentCategory,ComponentStatusStable,PageSubtitle,PageDescription,BasicUsageTitle,BasicUsageDescription,WithIconTitle,WithIconDescription,WithParamsTitle,WithParamsDescription,ConfiguringSeparatorTitle,ConfiguringSeparatorDescription,ConfiguringSeparatorIndependentlyTitle,ConfiguringSeparatorIndependentlyDescription,GenerateByTemplateTitle,GenerateByTemplateDescription,P2ContentHome,P2ContentApplicationCenter,P2ContentApplicationList,P2ContentAnApplication,P2ContentApplication,P2ContentUsers,P2ContentParam,P2ContentLocation
 AtomUIGallery.Localization.ButtonShowCaseLangResourceKind|ScenarioExamples,ComponentCategory,ComponentStatusStable,PageSubtitle,PageDescription,ExampleGroupBasicTitle,ExampleGroupBasicDescription,ExampleGroupShapeTitle,ExampleGroupShapeDescription,ExampleGroupSizeTitle,ExampleGroupSizeDescription,ExampleGroupStateTitle,ExampleGroupStateDescription,TypeTitle,TypeDescription,ColorVariantTitle,ColorVariantDescription,GradientButtonTitle,GradientButtonDescription,ButtonShapeTitle,ButtonShapeDescription,SizeTitle,SizeDescription,IconTitle,IconDescription,IconPlacementTitle,IconPlacementDescription,LoadingTitle,LoadingDescription,BlockButtonTitle,BlockButtonDescription,DangerButtonsTitle,DangerButtonsDescription,GhostButtonTitle,GhostButtonDescription,DisabledTitle,DisabledDescription,P2ContentPrimaryButton,P2ContentDefaultButton,P2ContentDashed,P2ContentTextButton,P2ContentLinkButton,P2ContentPrimary,P2ContentDefault,P2ContentSolid,P2ContentOutlined,P2ContentFilled,P2ContentText,P2ContentLink,P2ContentGradient,P2ContentWarmGradient,P2ColorDefault,P2ColorPrimary,P2ColorDanger,P2ColorPink,P2ColorPurple,P2ColorCyan,P2ContentAa,P2TextExpandDirection,P2TextIconPlacement,P2ContentLarge,P2ContentSmall,P2ContentCustom,P2ContentStart,P2ContentEnd,P2ContentDownload,P2ContentSearch,P2ContentLoading,P2ContentClickMe,P2ContentDanger,P2ContentPrimaryDisabled,P2ContentDefaultDisabled,P2ContentDashedDisabled,P2ContentTextDisabled,P2ContentLinkDisabled,P2ContentDangerPrimary,P2ContentDangerPrimaryDisabled,P2ContentDangerDefault,P2ContentDangerDefaultDisabled,P2ContentDangerText,P2ContentDangerTextDisabled,P2ContentDangerLink,P2ContentDangerLinkDisabled,P2ContentGhost,P2ContentGhostDisabled
 AtomUIGallery.Localization.ButtonSpinnerShowCaseLangResourceKind|ComponentCategory,ComponentStatusStable,PageSubtitle,PageDescription,ScenarioExamples,BasicTitle,BasicDescription,ThreeSizesTitle,ThreeSizesDescription,P2LabelSizeTypeLarge,P2LabelSizeTypeMiddle,P2LabelSizeTypeSmall,P2LabelSizeTypeCustom,VariantsTitle,VariantsDescription,DisabledTitle,DisabledDescription,PrePostTabTitle,PrePostTabDescription,PrefixSuffixTitle,PrefixSuffixDescription,StatusTitle,StatusDescription
@@ -120,7 +120,7 @@ public class GalleryCatalogCoverageTests
                              .ToArray();

        sourceFiles.Length.ShouldBe(80);
-        sourceFiles.Sum(CountUnits).ShouldBe(3972);
+        sourceFiles.Sum(CountUnits).ShouldBe(3975);
        foreach (var sourcePath in sourceFiles)
        {
            var targetPath = Path.Combine(
@@ -107,8 +107,8 @@ public class BorderBeamShowCasePageTests
    {
        var source = ReadRepoFile("controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml");

-        Regex.Matches(source, @"<gallery:ShowCaseItem\s").Count.ShouldBe(5);
-        source.Split("<gallery:ShowCaseItem.DeferredContentTemplate>").Length.ShouldBe(6);
+        Regex.Matches(source, @"<gallery:ShowCaseItem\s").Count.ShouldBe(6);
+        source.Split("<gallery:ShowCaseItem.DeferredContentTemplate>").Length.ShouldBe(7);

        var basicDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource BasicTitle");
        basicDemo.ShouldContain("SourceKey=\"border-beam-basic\"");
@@ -131,10 +131,20 @@ public class BorderBeamShowCasePageTests

        var multipleBeamsDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource MultipleBeamsTitle");
        multipleBeamsDemo.ShouldContain("SourceKey=\"border-beam-multiple-beams\"");
-        multipleBeamsDemo.ShouldContain("Count=\"3\"");
+        Regex.Matches(multipleBeamsDemo, @"<atom:BorderBeam\s").Count.ShouldBe(2);
+        Regex.Matches(multipleBeamsDemo, "Count=\"3\"").Count.ShouldBe(1);
+        Regex.Matches(multipleBeamsDemo, "Count=\"2\"").Count.ShouldBe(1);
        multipleBeamsDemo.ShouldContain("BorderBeamShowCaseLangResource MultipleBeamsCardTitle");
        multipleBeamsDemo.ShouldContain("BorderBeamShowCaseLangResource MultipleBeamsCardDescription");

+        var customContainerDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource CustomContainerTitle");
+        customContainerDemo.ShouldContain("SourceKey=\"border-beam-custom-container\"");
+        customContainerDemo.ShouldContain("<atom:BorderBeam Width=\"420\"");
+        customContainerDemo.ShouldContain("BorderThickness=\"1\"");
+        customContainerDemo.ShouldContain("CornerRadius=\"8\"");
+        customContainerDemo.ShouldContain("<Border MinHeight=\"160\"");
+        customContainerDemo.ShouldContain("BorderBeamShowCaseLangResource CustomContainerContent");
+
        var customizedColorDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource CustomizedColorTitle");
        customizedColorDemo.ShouldContain("SourceKey=\"border-beam-customized-color\"");
        customizedColorDemo.ShouldContain("<atom:Segmented");
@@ -169,6 +179,9 @@ public class BorderBeamShowCasePageTests
        var multipleBeamsIndex = source.IndexOf(
            "BorderBeamShowCaseLangResource MultipleBeamsTitle",
            StringComparison.Ordinal);
+        var customContainerIndex = source.IndexOf(
+            "BorderBeamShowCaseLangResource CustomContainerTitle",
+            StringComparison.Ordinal);
        var nonUniformRadiusIndex = source.IndexOf(
            "BorderBeamShowCaseLangResource NonUniformRadiusTitle",
            StringComparison.Ordinal);
@@ -179,7 +192,8 @@ public class BorderBeamShowCasePageTests
        basicIndex.ShouldBeGreaterThanOrEqualTo(0);
        showOnHoverIndex.ShouldBeGreaterThan(basicIndex);
        multipleBeamsIndex.ShouldBeGreaterThan(showOnHoverIndex);
-        nonUniformRadiusIndex.ShouldBeGreaterThan(multipleBeamsIndex);
+        customContainerIndex.ShouldBeGreaterThan(multipleBeamsIndex);
+        nonUniformRadiusIndex.ShouldBeGreaterThan(customContainerIndex);
        customizedColorIndex.ShouldBeGreaterThan(nonUniformRadiusIndex);

        var basicDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource BasicTitle");
@@ -191,6 +205,9 @@ public class BorderBeamShowCasePageTests
        var multipleBeamsDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource MultipleBeamsTitle");
        multipleBeamsDemo.ShouldNotContain("IsOccupyEntireRow=\"True\"");

+        var customContainerDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource CustomContainerTitle");
+        customContainerDemo.ShouldNotContain("IsOccupyEntireRow=\"True\"");
+
        var nonUniformRadiusDemo = ExtractShowCaseItemMarkup(source, "BorderBeamShowCaseLangResource NonUniformRadiusTitle");
        nonUniformRadiusDemo.ShouldNotContain("IsOccupyEntireRow=\"True\"");

@@ -199,7 +216,7 @@ public class BorderBeamShowCasePageTests
    }

    [Fact]
-    public void BorderBeam_ShowCase_Localizes_Hover_And_Multiple_Beam_Examples()
+    public void BorderBeam_ShowCase_Localizes_New_Examples()
    {
        var localizationPaths = new[]
        {
@@ -217,7 +234,10 @@ public class BorderBeamShowCasePageTests
            "MultipleBeamsTitle",
            "MultipleBeamsDescription",
            "MultipleBeamsCardTitle",
-            "MultipleBeamsCardDescription"
+            "MultipleBeamsCardDescription",
+            "CustomContainerTitle",
+            "CustomContainerDescription",
+            "CustomContainerContent"
        };

        foreach (var path in localizationPaths)
@@ -230,6 +250,23 @@ public class BorderBeamShowCasePageTests
        }
    }

+    [Fact]
+    public void BorderBeam_New_ShowCases_Are_Marked_With_Current_Version()
+    {
+        var source = ReadRepoFile("controlgallery/AtomUIGallery/ShowCases/Other/BorderBeam/Views/BorderBeamShowCase.axaml");
+        var titleMarkers = new[]
+        {
+            "BorderBeamShowCaseLangResource ShowOnHoverTitle",
+            "BorderBeamShowCaseLangResource MultipleBeamsTitle",
+            "BorderBeamShowCaseLangResource CustomContainerTitle"
+        };
+
+        foreach (var titleMarker in titleMarkers)
+        {
+            ExtractShowCaseItemMarkup(source, titleMarker).ShouldContain("BadgeText=\"v6.1.8\"");
+        }
+    }
+
    [Fact]
    public void BorderBeam_ShowCase_ViewModel_Provides_Customized_Color_Presets()
    {