YZWater3/src/YZWater.Avalonia/Views/ViewEView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:YZWater.Core.ViewModels"
             x:Class="YZWater.Avalonia.Views.ViewEView"
             x:DataType="vm:ViewEViewModel">

    <UserControl.DataContext>
        <vm:ViewEViewModel/>
    </UserControl.DataContext>

    <Border Background="{DynamicResource AppBgBrush}">
        <Grid RowDefinitions="48,*,32">
            <!-- 顶部 -->
            <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,0,1">
                <Grid Margin="16,0">
                    <StackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
                        <Border Background="{DynamicResource TextSecondaryBrush}" Width="3" Height="20" CornerRadius="1"/>
                        <TextBlock Text="ABOUT" FontFamily="{DynamicResource MonoFont}" FontSize="16" FontWeight="Bold"
                                   Foreground="{DynamicResource TextPrimaryBrush}" VerticalAlignment="Center"/>
                        <TextBlock Text="系统信息" FontSize="12" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                    </StackPanel>
                </Grid>
            </Border>

            <!-- 内容 -->
            <ScrollViewer Grid.Row="1" Margin="8,4">
                <StackPanel HorizontalAlignment="Center" MaxWidth="600" Spacing="16">

                    <!-- Logo -->
                    <Border Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="24" Margin="0,0,0,4">
                        <StackPanel HorizontalAlignment="Center" Spacing="12">
                            <Border Background="{DynamicResource SuccessBrush}" Width="64" Height="64" CornerRadius="8">
                                <TextBlock Text="YZ" FontSize="28" FontWeight="Bold"
                                           Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                            <TextBlock Text="{Binding SystemName}" FontSize="24" FontWeight="Bold"
                                       Foreground="{DynamicResource TextPrimaryBrush}" HorizontalAlignment="Center"/>
                            <TextBlock Text="{Binding Version, StringFormat='VERSION {0}'}"
                                       FontFamily="{DynamicResource MonoFont}" FontSize="12"
                                       Foreground="{DynamicResource TextTertiaryBrush}" HorizontalAlignment="Center"/>
                        </StackPanel>
                    </Border>

                    <!-- 系统描述 -->
                    <Border Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="16">
                        <StackPanel Spacing="8">
                            <StackPanel Orientation="Horizontal" Spacing="6">
                                <Border Background="{DynamicResource InfoBrush}" Width="3" Height="14" CornerRadius="1"/>
                                <TextBlock Text="SYSTEM INFO" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
                                           Foreground="{DynamicResource TextSecondaryBrush}"/>
                            </StackPanel>
                            <TextBlock Text="{Binding Description}" TextWrapping="Wrap"
                                       Foreground="{DynamicResource TextSecondaryBrush}" FontSize="13"/>
                            <Separator Margin="0,4"/>
                            <Grid ColumnDefinitions="100,*" RowDefinitions="Auto,Auto">
                                <TextBlock Grid.Row="0" Grid.Column="0" Text="TECH STACK" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
                                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TechStack}" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextSecondaryBrush}"/>
                            </Grid>
                        </StackPanel>
                    </Border>

                    <!-- 公司信息 -->
                    <Border Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="16">
                        <StackPanel Spacing="8">
                            <StackPanel Orientation="Horizontal" Spacing="6">
                                <Border Background="{DynamicResource SuccessBrush}" Width="3" Height="14" CornerRadius="1"/>
                                <TextBlock Text="COMPANY" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
                                           Foreground="{DynamicResource TextSecondaryBrush}"/>
                            </StackPanel>
                            <Grid ColumnDefinitions="100,*" RowDefinitions="Auto,Auto,Auto">
                                <TextBlock Grid.Row="0" Grid.Column="0" Text="NAME" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}"/>
                                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CompanyName}" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>

                                <TextBlock Grid.Row="1" Grid.Column="0" Text="CONTACT" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}"/>
                                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ContactPerson}" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>

                                <TextBlock Grid.Row="2" Grid.Column="0" Text="PHONE" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}"/>
                                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ContactPhone}" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>
                            </Grid>
                        </StackPanel>
                    </Border>

                    <!-- 操作 -->
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="12">
                        <Button Content="VISIT WEBSITE" Command="{Binding OpenWebsiteCommand}" Classes="btn-info"/>
                        <Button Content="CHECK UPDATE" Command="{Binding CheckUpdateCommand}" Classes="btn-success"/>
                    </StackPanel>

                    <!-- 版权 -->
                    <TextBlock Text="{Binding Copyright}" FontFamily="{DynamicResource MonoFont}" FontSize="10"
                               Foreground="{DynamicResource TextDisabledBrush}" HorizontalAlignment="Center" Margin="0,16,0,0"/>
                </StackPanel>
            </ScrollViewer>

            <!-- 底部 -->
            <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
                <TextBlock Text="ABOUT v1.0" FontFamily="{DynamicResource MonoFont}" FontSize="10"
                           Foreground="{DynamicResource TextDisabledBrush}" VerticalAlignment="Center" Margin="16,0"/>
            </Border>
        </Grid>
    </Border>
</UserControl>