LanMountainDesktop/LanMountainDesktop/Views/FusedDesktopComponentLibraryControl.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:LanMountainDesktop.ViewModels"
             xmlns:fi="using:FluentIcons.Avalonia"
             xmlns:converters="using:Avalonia.Data.Converters"
             x:Class="LanMountainDesktop.Views.FusedDesktopComponentLibraryControl"
             x:DataType="vm:ComponentLibraryWindowViewModel">
    <UserControl.Styles>
        <Style Selector="ListBoxItem.category-item">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0,3"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusSm}"/>
            <Setter Property="MinHeight" Value="44"/>
        </Style>
        <Style Selector="ListBoxItem.category-item:pointerover /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource AdaptiveButtonHoverBackgroundBrush}"/>
        </Style>
        <Style Selector="ListBoxItem.category-item:selected /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource AdaptiveNavItemSelectedBackgroundBrush}"/>
        </Style>
        <Style Selector="ListBoxItem.category-item Border.category-selection-indicator">
            <Setter Property="Opacity" Value="0"/>
        </Style>
        <Style Selector="ListBoxItem.category-item:selected Border.category-selection-indicator">
            <Setter Property="Opacity" Value="1"/>
        </Style>
        <Style Selector="ListBoxItem.category-item TextBlock.category-text">
            <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}"/>
        </Style>
        <Style Selector="ListBoxItem.category-item:selected TextBlock.category-text">
            <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextPrimaryBrush}"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
        </Style>
        <Style Selector="Button.fused-library-link">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="6,4"/>
            <Setter Property="MinHeight" Value="28"/>
            <Setter Property="Foreground" Value="{DynamicResource AdaptiveTextSecondaryBrush}"/>
        </Style>
        <Style Selector="Button.fused-library-link:pointerover">
            <Setter Property="Background" Value="{DynamicResource AdaptiveButtonHoverBackgroundBrush}"/>
        </Style>
        <Style Selector="Button.fused-library-add-button">
            <Setter Property="Background" Value="{DynamicResource AdaptiveAccentBrush}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource AdaptiveAccentBrush}"/>
            <Setter Property="Foreground" Value="{DynamicResource AdaptiveOnAccentBrush}"/>
            <Setter Property="CornerRadius" Value="{DynamicResource DesignCornerRadiusSm}"/>
            <Setter Property="MinHeight" Value="38"/>
            <Setter Property="Padding" Value="22,8"/>
        </Style>
        <Style Selector="Button.fused-library-add-button:pointerover">
            <Setter Property="Background" Value="{DynamicResource AdaptiveAccentLightBrush}"/>
        </Style>
        <Style Selector="Button.fused-library-add-button TextBlock">
            <Setter Property="Foreground" Value="{DynamicResource AdaptiveOnAccentBrush}"/>
        </Style>
        <Style Selector="Button.fused-library-add-button fi|FluentIcon">
            <Setter Property="Foreground" Value="{DynamicResource AdaptiveOnAccentBrush}"/>
        </Style>
    </UserControl.Styles>

    <Grid ColumnDefinitions="190,*">
        <Border Background="Transparent">
            <Grid RowDefinitions="*,Auto">
                <ListBox x:Name="CategoryListBox"
                         Grid.Row="0"
                         Background="Transparent"
                         BorderThickness="0"
                         Margin="0,0,14,0"
                         SelectionChanged="OnCategorySelectionChanged"
                         ItemsSource="{Binding Categories}">
                    <ListBox.ItemTemplate>
                        <DataTemplate x:DataType="vm:ComponentLibraryCategoryViewModel">
                            <Grid ColumnDefinitions="Auto,Auto,*"
                                  ColumnSpacing="10"
                                  Margin="0,2,8,2">
                                <Border Classes="category-selection-indicator"
                                        Width="3"
                                        Height="22"
                                        CornerRadius="{DynamicResource DesignCornerRadiusMicro}"
                                        Background="{DynamicResource AdaptiveAccentBrush}"
                                        VerticalAlignment="Center"/>
                                <fi:FluentIcon Icon="{Binding Icon}"
                                               Grid.Column="1"
                                               IconVariant="Regular"
                                               FontSize="16"
                                               VerticalAlignment="Center"/>
                                <TextBlock Grid.Column="2"
                                           VerticalAlignment="Center"
                                           FontSize="14"
                                           TextTrimming="CharacterEllipsis"
                                           Classes="category-text"
                                           Text="{Binding Title}"/>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

                <StackPanel Grid.Row="1" Margin="0,8,14,4">
                    <Border Height="1"
                            Background="{DynamicResource AdaptiveGlassPanelBorderBrush}"
                            Opacity="0.4"
                            Margin="0,0,0,8"/>
                    <Button Classes="fused-library-link"
                            HorizontalAlignment="Left"
                            Click="OnFindMoreComponentsClick">
                        <StackPanel Orientation="Horizontal" Spacing="6">
                            <fi:FluentIcon Icon="Globe" IconVariant="Regular" FontSize="14"/>
                            <TextBlock Text="查找更多小组件" FontSize="12"/>
                        </StackPanel>
                    </Button>
                </StackPanel>
            </Grid>
        </Border>

        <Border Grid.Column="1"
                Width="1"
                HorizontalAlignment="Left"
                Background="{DynamicResource AdaptiveGlassPanelBorderBrush}"
                Opacity="0.35"/>

        <ScrollViewer Grid.Column="1"
                      VerticalScrollBarVisibility="Auto"
                      HorizontalScrollBarVisibility="Disabled">
            <StackPanel Margin="28,8,8,10">
                <Panel IsVisible="{Binding SelectedComponent, Converter={x:Static converters:ObjectConverters.IsNotNull}}">
                    <Grid RowDefinitions="Auto,Auto,*,Auto"
                          MinHeight="330">
                        <TextBlock FontSize="24"
                                   FontWeight="SemiBold"
                                   Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                   Text="{Binding SelectedComponent.DisplayName}"
                                   HorizontalAlignment="Center"
                                   TextTrimming="CharacterEllipsis"/>

                        <TextBlock Grid.Row="1"
                                   Margin="0,6,0,14"
                                   MaxHeight="44"
                                   FontSize="13"
                                   Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                   Opacity="0.82"
                                   Text="{Binding SelectedComponent.Description}"
                                   HorizontalAlignment="Center"
                                   TextWrapping="Wrap"
                                   TextTrimming="CharacterEllipsis"/>

                        <Border x:Name="PreviewInteractionHost"
                                Grid.Row="2"
                                CornerRadius="{DynamicResource DesignCornerRadiusLg}"
                                Background="{DynamicResource AdaptiveSurfaceOverlayBrush}"
                                BorderBrush="{DynamicResource AdaptiveGlassPanelBorderBrush}"
                                BorderThickness="1"
                                Width="390"
                                Height="230"
                                Focusable="True"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                PointerPressed="OnPreviewPointerPressed"
                                PointerReleased="OnPreviewPointerReleased"
                                PointerCaptureLost="OnPreviewPointerCaptureLost"
                                PointerWheelChanged="OnPreviewPointerWheelChanged"
                                KeyDown="OnPreviewKeyDown">
                            <Border CornerRadius="{DynamicResource DesignCornerRadiusSm}"
                                    Background="{DynamicResource AdaptiveGlassPanelBackgroundBrush}"
                                    BorderBrush="{DynamicResource AdaptiveGlassPanelBorderBrush}"
                                    BorderThickness="1"
                                    Padding="12"
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center">
                                <ContentControl x:Name="SelectedComponentPreviewHost"
                                                HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                IsHitTestVisible="False"
                                                Focusable="False"/>
                            </Border>
                        </Border>

                        <Button Grid.Row="3"
                                HorizontalAlignment="Center"
                                Margin="0,18,0,0"
                                Classes="fused-library-add-button"
                                Tag="{Binding SelectedComponent.ComponentId}"
                                Click="OnAddComponentClick">
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <fi:FluentIcon Icon="Add" IconVariant="Regular" FontSize="16"/>
                                <TextBlock Text="添加小组件" FontWeight="SemiBold"/>
                            </StackPanel>
                        </Button>
                    </Grid>
                </Panel>

                <Grid IsVisible="{Binding SelectedComponent, Converter={x:Static converters:ObjectConverters.IsNull}}"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      MinHeight="330">
                    <StackPanel Spacing="16"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center">
                        <fi:FluentIcon Icon="Apps"
                                       IconVariant="Regular"
                                       FontSize="64"
                                       Opacity="0.3"
                                       Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"/>
                        <TextBlock HorizontalAlignment="Center"
                                   FontSize="16"
                                   Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                   Text="选择一个分类以查看可添加组件。"/>
                    </StackPanel>
                </Grid>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</UserControl>