MyAvaloniaDemo/AuroraDesk.Presentation/Views/Pages/BreathePageView.axaml

<reactive:ReactiveUserControl xmlns="https://github.com/avaloniaui"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:vm="using:AuroraDesk.Presentation.ViewModels.Pages"
            xmlns:reactive="using:ReactiveUI.Avalonia"
            xmlns:lottie="clr-namespace:Avalonia.Skia.Lottie;assembly=Avalonia.Skia.Lottie"
            mc:Ignorable="d"
            d:DesignWidth="1100"
            d:DesignHeight="700"
            x:Class="AuroraDesk.Presentation.Views.Pages.BreathePageView"
            x:DataType="vm:BreathePageViewModel">

    <Design.DataContext>
        <vm:BreathePageViewModel />
    </Design.DataContext>

    <Grid RowDefinitions="Auto,*"
          Margin="0,0,0,24">
        <!-- 顶部标题 -->
        <StackPanel Grid.Row="0"
                    Margin="0,0,0,24"
                    Spacing="6">
            <TextBlock Text="{Binding PageTitle}"
                       FontSize="30"
                       FontWeight="SemiBold"
                       Foreground="{StaticResource TextPrimary}" />
            <TextBlock Text="{Binding PageDescription}"
                       FontSize="15"
                       Foreground="{StaticResource SecondaryGrayDark}" />
        </StackPanel>

        <Grid Grid.Row="1"
              ColumnDefinitions="360,*"
              ColumnSpacing="24">
            <!-- 左侧控制面板 -->
            <StackPanel Grid.Column="0"
                        Spacing="16">
                <Border Background="{StaticResource BackgroundWhite}"
                        BorderBrush="{StaticResource BorderLight}"
                        BorderThickness="1"
                        CornerRadius="14"
                        Padding="20">
                    <StackPanel Spacing="18">
                        <StackPanel Spacing="4">
                            <TextBlock Text="动画选择"
                                       FontSize="16"
                                       FontWeight="SemiBold"
                                       Foreground="{StaticResource TextPrimary}" />
                            <TextBlock Text="挑选不同风格的呼吸引导动画"
                                       FontSize="13"
                                       Foreground="{StaticResource SecondaryGrayDark}" />
                        </StackPanel>

                        <ComboBox ItemsSource="{Binding AvailableAnimations}"
                                  SelectedItem="{Binding SelectedAnimation}"
                                  DisplayMemberBinding="{Binding DisplayName}"
                                  HorizontalAlignment="Stretch"
                                  HorizontalContentAlignment="Stretch"
                                  MaxDropDownHeight="220" />

                        <Border Background="{StaticResource BackgroundLight}"
                                BorderBrush="{StaticResource BorderLight}"
                                BorderThickness="1"
                                CornerRadius="10"
                                Padding="12">
                            <StackPanel Spacing="4">
                                <TextBlock Text="当前动画资源"
                                           FontSize="13"
                                           FontWeight="SemiBold"
                                           Foreground="{StaticResource TextPrimary}" />
                                <TextBlock Text="{Binding AnimationPath}"
                                           TextWrapping="Wrap"
                                           FontSize="12"
                                           Foreground="{StaticResource SecondaryGrayDark}" />
                            </StackPanel>
                        </Border>

                        <Border Background="#E6F1FF"
                                BorderBrush="#B8D9FF"
                                BorderThickness="1"
                                CornerRadius="10"
                                Padding="12">
                            <StackPanel Spacing="4">
                                <TextBlock Text="新增动画：科技律动 V3"
                                           FontSize="13"
                                           FontWeight="SemiBold"
                                           Foreground="{StaticResource AccentBlueDark}" />
                                <TextBlock Text="更明亮的霓虹效果，适合大屏展示。"
                                           FontSize="12"
                                           Foreground="{StaticResource AccentBlueDark}" />
                            </StackPanel>
                        </Border>
                    </StackPanel>
                </Border>

                <Border Background="{StaticResource BackgroundWhite}"
                        BorderBrush="{StaticResource BorderLight}"
                        BorderThickness="1"
                        CornerRadius="14"
                        Padding="18">
                    <StackPanel Spacing="12">
                        <TextBlock Text="播放设置"
                                   FontSize="15"
                                   FontWeight="SemiBold"
                                   Foreground="{StaticResource TextPrimary}" />
                        <StackPanel Orientation="Horizontal"
                                    Spacing="12"
                                    VerticalAlignment="Center">
                            <TextBlock Text="循环模式"
                                       FontSize="13"
                                       Foreground="{StaticResource SecondaryGrayDark}" />
                            <TextBlock Text="无限循环（Lottie.Infinity）"
                                       FontSize="13"
                                       FontWeight="SemiBold"
                                       Foreground="{StaticResource TextPrimary}" />
                        </StackPanel>
                    </StackPanel>
                </Border>
            </StackPanel>

            <!-- 右侧预览面板 -->
            <Border Grid.Column="1"
                    Background="{StaticResource BackgroundWhite}"
                    BorderBrush="{StaticResource BorderLight}"
                    BorderThickness="1"
                    CornerRadius="20"
                    Padding="28">
                <Grid RowDefinitions="Auto,*">
                    <Grid ColumnDefinitions="*,Auto">
                        <StackPanel Orientation="Horizontal" Spacing="8">
                            <TextBlock Text="实时预览"
                                       FontSize="16"
                                       FontWeight="SemiBold"
                                       Foreground="{StaticResource TextPrimary}" />
                            <TextBlock Text="（自动适配动画尺寸）"
                                       FontSize="12"
                                       Foreground="{StaticResource SecondaryGrayDark}" />
                        </StackPanel>
                        <Border Grid.Column="1"
                                Background="{StaticResource BackgroundLight}"
                                CornerRadius="12"
                                Padding="6,2">
                            <TextBlock Text="{Binding SelectedAnimation.DisplayName}"
                                       FontSize="12"
                                       Foreground="{StaticResource SecondaryGrayDark}" />
                        </Border>
                    </Grid>

                    <Grid Grid.Row="1"
                          Margin="0,18,0,0"
                          RowDefinitions="*,Auto">
                        <Border Background="#F7FAFF"
                                BorderBrush="#DEE7FF"
                                BorderThickness="1"
                                CornerRadius="18"
                                Padding="0"
                                ClipToBounds="False">
                            <Viewbox Stretch="Uniform"
                                     StretchDirection="Both"
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     MaxWidth="1200"
                                     MaxHeight="420"
                                     Margin="0">
                                <Border Background="Transparent"
                                        ClipToBounds="False">
                                    <lottie:Lottie Path="{Binding AnimationPath}"
                                                   RepeatCount="{Binding RepeatCount}"
                                                   Stretch="Uniform"
                                                   HorizontalAlignment="Center"
                                                   VerticalAlignment="Center"
                                                   ClipToBounds="False" />
                                </Border>
                            </Viewbox>
                        </Border>

                        <TextBlock Grid.Row="1"
                                   Margin="0,16,0,0"
                                   Text="提示：若动画仍存在裁剪，可在资源文件中调整画布尺寸或缩放参数。"
                                   FontSize="12"
                                   Foreground="{StaticResource SecondaryGrayDark}" />
                    </Grid>
                </Grid>
            </Border>
        </Grid>
    </Grid>
</reactive:ReactiveUserControl>