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"
             x:Class="LanMountainDesktop.Views.FusedDesktopComponentLibraryControl"
             x:DataType="vm:ComponentLibraryWindowViewModel">
    
    <Grid ColumnDefinitions="240,*"
          ColumnSpacing="12"
          Margin="0">
        <!-- 分类列表 (左侧) -->
        <Border Classes="surface-translucent-panel"
                CornerRadius="{DynamicResource DesignCornerRadiusLg}"
                Padding="10">
            <Grid RowDefinitions="Auto,*">
                <TextBox x:Name="SearchBox"
                         Watermark="搜索组件..."
                         Margin="0,0,0,12"
                         Classes="clear"
                         Background="{DynamicResource AdaptiveSurfaceLowBrush}"
                         CornerRadius="12"
                         Padding="12,8">
                    <TextBox.InnerLeftContent>
                        <fi:SymbolIcon Symbol="Search" FontSize="16" Margin="10,0,0,0" Opacity="0.5" />
                    </TextBox.InnerLeftContent>
                </TextBox>
                
                <ListBox x:Name="CategoryListBox"
                         Grid.Row="1"
                         Background="Transparent"
                         BorderThickness="0"
                         SelectionChanged="OnCategorySelectionChanged"
                         ItemsSource="{Binding Categories}">
                    <ListBox.ItemTemplate>
                        <DataTemplate x:DataType="vm:ComponentLibraryCategoryViewModel">
                            <Border Padding="10"
                                    Margin="0,0,0,6"
                                    CornerRadius="{DynamicResource DesignCornerRadiusSm}"
                                    Background="{DynamicResource AdaptiveNavItemBackgroundBrush}">
                                <Grid ColumnDefinitions="Auto,*"
                                      ColumnSpacing="8">
                                    <fi:SymbolIcon Symbol="{Binding Icon}"
                                                   IconVariant="Regular"
                                                   FontSize="16" />
                                    <TextBlock Grid.Column="1"
                                               VerticalAlignment="Center"
                                               FontWeight="SemiBold"
                                               Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                               Text="{Binding Title}" />
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </Border>

        <!-- 组件网格 (右侧) -->
        <Border Grid.Column="1"
                Classes="surface-translucent-strong"
                CornerRadius="{DynamicResource DesignCornerRadiusLg}"
                Padding="10">
            <ScrollViewer VerticalScrollBarVisibility="Auto"
                          HorizontalScrollBarVisibility="Disabled">
                <ItemsControl x:Name="ComponentItemsControl"
                              ItemsSource="{Binding Components}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="vm:ComponentLibraryItemViewModel">
                            <Border Width="240"
                                    Height="220"
                                    Margin="6"
                                    CornerRadius="{DynamicResource DesignCornerRadiusComponent}"
                                    Padding="10"
                                    Background="{DynamicResource AdaptiveSurfaceRaisedBrush}"
                                    BorderBrush="{DynamicResource AdaptiveButtonBorderBrush}"
                                    BorderThickness="1">
                                <Grid RowDefinitions="*,Auto,Auto"
                                      RowSpacing="8">
                                    <!-- 预览区域 -->
                                    <Border CornerRadius="{DynamicResource DesignCornerRadiusSm}"
                                            Background="{DynamicResource AdaptiveGlassPanelBackgroundBrush}"
                                            BorderThickness="1"
                                            BorderBrush="{DynamicResource AdaptiveGlassPanelBorderBrush}"
                                            Padding="8">
                                        <Grid>
                                            <Image Source="{Binding PreviewBitmap}"
                                                   Stretch="Uniform"
                                                   HorizontalAlignment="Stretch"
                                                   VerticalAlignment="Stretch"
                                                   RenderOptions.BitmapInterpolationMode="HighQuality"
                                                   IsVisible="{Binding IsPreviewReady}" />

                                            <!-- 加载中状态 -->
                                            <Border IsVisible="{Binding IsPreviewPending}"
                                                    Background="{DynamicResource AdaptiveSurfaceBaseBrush}">
                                                <StackPanel HorizontalAlignment="Center"
                                                            VerticalAlignment="Center"
                                                            Spacing="8">
                                                    <ProgressBar Width="96"
                                                                 IsIndeterminate="True" />
                                                    <TextBlock HorizontalAlignment="Center"
                                                               TextAlignment="Center"
                                                               FontSize="12"
                                                               Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                                               Text="{Binding PreviewStatusText}" />
                                                </StackPanel>
                                            </Border>

                                            <!-- 失败状态 -->
                                            <Border IsVisible="{Binding IsPreviewFailed}"
                                                    Background="{DynamicResource AdaptiveSurfaceBaseBrush}">
                                                <StackPanel HorizontalAlignment="Center"
                                                            VerticalAlignment="Center"
                                                            Spacing="8">
                                                    <TextBlock HorizontalAlignment="Center"
                                                               TextAlignment="Center"
                                                               FontWeight="SemiBold"
                                                               Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                                               Text="{Binding PreviewStatusText}" />
                                                    <TextBlock HorizontalAlignment="Center"
                                                               TextAlignment="Center"
                                                               FontSize="12"
                                                               TextWrapping="Wrap"
                                                               Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                                               Text="{Binding PreviewErrorMessage}" />
                                                </StackPanel>
                                            </Border>
                                        </Grid>
                                    </Border>

                                    <!-- 组件名称 -->
                                    <TextBlock Grid.Row="1"
                                               HorizontalAlignment="Center"
                                               FontWeight="SemiBold"
                                               Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                               Text="{Binding DisplayName}" />

                                    <!-- 添加按钮 -->
                                    <Button Grid.Row="2"
                                            HorizontalAlignment="Center"
                                            Padding="12,6"
                                            Tag="{Binding ComponentId}"
                                            Click="OnAddComponentClick">
                                        <TextBlock Text="添加到桌面" />
                                    </Button>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Border>
    </Grid>
</UserControl>