TeamAAS-2.5/TeamAAS/Views/ProductView.xaml

<UserControl x:Class="TeamAAS.Views.ProductView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:hc="https://handyorg.github.io/handycontrol" xmlns:loc="clr-namespace:TeamAAS.Localization"
             xmlns:fe="clr-namespace:TeamAAS.FlowEditor;assembly=TeamAAS.FlowEngine"
             xmlns:conv="clr-namespace:TeamAAS.Converters">
    <UserControl.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
        <conv:BoolToArrowConverter x:Key="BoolToArrowConverter"/>
        <conv:BoolToWidthConverter x:Key="BoolToWidthConverter"/>
        <conv:InvertBoolToVisibilityConverter x:Key="InvertBoolToVisConverter"/>
        <conv:RunDotConverter x:Key="RunDotConverter"/>

        <!-- Expanded: Product list item style -->
        <Style x:Key="ProductListItem" TargetType="ListBoxItem">
            <Setter Property="Padding" Value="12,8"/>
            <Setter Property="Margin" Value="4,2"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="itemBd" Background="Transparent" CornerRadius="6" Padding="{TemplateBinding Padding}">
                            <ContentPresenter/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="itemBd" Property="Background" Value="{DynamicResource BorderBrush}"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="itemBd" Property="Background" Value="{DynamicResource PrimaryBrush}"/>
                                <Setter Property="Foreground" Value="White"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Collapsed: compact icon-only style -->
        <Style x:Key="ProductListItemCompact" TargetType="ListBoxItem">
            <Setter Property="Width" Value="40"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Margin" Value="2,3"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="itemBd" Background="Transparent" CornerRadius="6"
                                Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="itemBd" Property="Background" Value="{DynamicResource BorderBrush}"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="itemBd" Property="Background" Value="{DynamicResource PrimaryBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Expanded sidebar action button style -->
        <Style x:Key="ActionBtn" TargetType="Button">
            <Setter Property="Height" Value="38"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Margin" Value="2,3"/>
        </Style>

        <!-- Collapsed sidebar action button style -->
        <Style x:Key="ActionBtnIcon" TargetType="Button">
            <Setter Property="Width" Value="36"/>
            <Setter Property="Height" Value="36"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Margin" Value="2,3"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="bd" Background="{DynamicResource SecondaryRegionBrush}"
                                BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1"
                                CornerRadius="6">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="bd" Property="Background" Value="{DynamicResource BorderBrush}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Opacity" Value="0.4"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Toggle button style -->
        <Style x:Key="ToggleBtn" TargetType="Button">
            <Setter Property="Width" Value="32"/>
            <Setter Property="Height" Value="32"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="bd" Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="6">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="bd" Property="Background" Value="{DynamicResource BorderBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid>
        <!-- Main content -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- Sidebar -->
            <Border x:Name="SidebarPanel" Grid.Column="0" Width="280"
                    ClipToBounds="True"
                    Background="{DynamicResource RegionBrush}"
                    BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,1,0">
                <Grid>
                    <!-- EXPANDED sidebar（宽视图，文字+图标） -->
                    <Grid x:Name="SidebarExpanded" Opacity="1.0">
                    <DockPanel>
                        <!-- 顶部标题 + 折叠按钮 -->
                            <Grid DockPanel.Dock="Top" Margin="12,8,8,8">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{loc:Translate '产品管理'}" FontSize="20" FontWeight="Bold"
                                       Foreground="{DynamicResource PrimaryTextBrush}" VerticalAlignment="Center"/>
                                <Button Grid.Column="1" Style="{StaticResource ToggleBtn}"
                                    Command="{Binding ToggleSidebarCommand}"
                                    Content="◀" ToolTip="{loc:Translate '折叠产品面板'}"/>
                            </Grid>
                            <DockPanel Margin="14,0,14,12">
                            <UniformGrid DockPanel.Dock="Top" Columns="2" Margin="0,0,0,10">
                                <Button Width="auto" MinWidth="90" Height="35" Margin="5" Content="{loc:Translate '➕ 新建'}" Command="{Binding NewProductCommand}"/>
                                    <Button Width="auto" MinWidth="90" Height="35" Margin="5" Content="{loc:Translate '✏ 重命名'}" Command="{Binding RenameProductCommand}"
                                        IsEnabled="{Binding IsProductSelected}"/>
                                    <Button Width="auto" MinWidth="90" Height="35" Margin="5" Content="{loc:Translate '🗑 删除'}" Command="{Binding DeleteProductCommand}"
                                        IsEnabled="{Binding IsProductSelected}"/>
                                    <Button Width="auto" MinWidth="90" Height="35" Margin="5" Content="{loc:Translate '💾 保存全部'}" Command="{Binding SaveProductCommand}"
                                        IsEnabled="{Binding IsProductSelected}"/>
                            </UniformGrid>

                            <Border DockPanel.Dock="Top" Height="1" Background="{DynamicResource BorderBrush}" Margin="0,2,0,10"/>

                            <ListBox ItemsSource="{Binding Products}" SelectedItem="{Binding SelectedProduct}"
                                     Background="{DynamicResource SecondaryRegionBrush}"
                                     BorderBrush="{DynamicResource BorderBrush}"
                                     BorderThickness="1"
                                     ScrollViewer.HorizontalScrollBarVisibility="Disabled">
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Background="Transparent">
                                            <Grid.ContextMenu>
                                                <ContextMenu>
                                                    <MenuItem Header="{loc:Translate '🖼 属性'}" Click="ProductProperties_Click"/>
                                                    <MenuItem Header="{loc:Translate '📊 全局变量'}" Click="ProductGlobalVars_Click"/>
                                                </ContextMenu>
                                            </Grid.ContextMenu>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="📦" Margin="0,0,10,0" VerticalAlignment="Center" FontSize="16"/>
                                                <TextBlock Text="{Binding}" VerticalAlignment="Center" FontSize="14"/>
                                            </StackPanel>
                                        </Grid>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                                <ListBox.ItemContainerStyle>
                                    <Style TargetType="ListBoxItem" BasedOn="{StaticResource ProductListItem}"/>
                                </ListBox.ItemContainerStyle>
                            </ListBox>
                        </DockPanel>
                    </DockPanel>
                </Grid>

                <!-- COLLAPSED sidebar（窄条，仅图标） -->
                <Grid x:Name="SidebarCollapsed" Opacity="0" Visibility="Hidden">
                    <DockPanel>
                        <!-- 展开按钮 -->
                        <Border DockPanel.Dock="Top" Margin="0,4,0,4">
                            <Button Style="{StaticResource ToggleBtn}"
                                    Command="{Binding ToggleSidebarCommand}"
                                    Content="▶" ToolTip="{loc:Translate '展开产品面板'}"
                                    HorizontalAlignment="Center"/>
                        </Border>
                        <Separator DockPanel.Dock="Top" Background="{DynamicResource BorderBrush}"/>

                        <ScrollViewer VerticalScrollBarVisibility="Auto" Margin="2">
                            <StackPanel>
                                <hc:UniformSpacingPanel ChildWrapping="Wrap" Orientation="Vertical" HorizontalAlignment="Center" Spacing="5">
                                    <Button Height="36" Width="40"
                                            Command="{Binding NewProductCommand}"
                                            Content="➕" ToolTip="{loc:Translate '新建产品'}"/>
                                    <Button Height="36" Width="40"
                                            Command="{Binding RenameProductCommand}"
                                            Content="✏" ToolTip="{loc:Translate '重命名'}"
                                            IsEnabled="{Binding IsProductSelected}"/>
                                    <Button Height="36" Width="40"
                                            Command="{Binding DeleteProductCommand}"
                                            Content="🗑" ToolTip="{loc:Translate '删除产品'}"
                                            IsEnabled="{Binding IsProductSelected}"/>
                                    <Button Height="36" Width="40"
                                            Command="{Binding SaveProductCommand}"
                                            Content="💾" ToolTip="{loc:Translate '保存所有流程'}"
                                            IsEnabled="{Binding IsProductSelected}"/>
                                </hc:UniformSpacingPanel>

                                <Separator Margin="0,6,0,6" Background="{DynamicResource BorderBrush}"/>

                                <ListBox ItemsSource="{Binding Products}" SelectedItem="{Binding SelectedProduct}"
                                         Background="Transparent"
                                         BorderThickness="0"
                                         ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                         ItemContainerStyle="{StaticResource ProductListItemCompact}">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="📦" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center"
                                                       ToolTip="{Binding}"/>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </StackPanel>
                        </ScrollViewer>
                    </DockPanel>
                </Grid>
                </Grid>
            </Border>

            <!-- Right: Flow Editor -->
            <Grid Grid.Column="1">
                <!-- Flow Editor Shell（运行产品运行中 → 画布只读监控，可选中节点查看结果） -->
                <Grid>
                    <ContentControl Content="{Binding ShellVm}">
                        <ContentControl.ContentTemplate>
                            <DataTemplate DataType="{x:Type fe:FlowEditorShellViewModel}">
                                <fe:FlowEditorShellView/>
                            </DataTemplate>
                        </ContentControl.ContentTemplate>
                    </ContentControl>

                </Grid>
            </Grid>
        </Grid>

        <!-- Loading Overlay -->
        <Border Background="#66000000"
                Visibility="{Binding IsProductLoading, Converter={StaticResource BoolToVisConverter}}"
                Panel.ZIndex="1000">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <ProgressBar IsIndeterminate="True" Width="140" Height="10"/>
                <TextBlock Text="{loc:Translate '加载产品中...'}" FontSize="14" Foreground="{DynamicResource SecondaryTextBrush}"
                           HorizontalAlignment="Center" Margin="0,12,0,0"/>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>