MainWindow.axaml

<Window 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:local="clr-namespace:LabelAva"
        xmlns:models="clr-namespace:LabelAva.Models"
        xmlns:views="clr-namespace:LabelAva.Views"
        xmlns:vm="using:LabelAva.ViewModels"
        xmlns:flua="clr-namespace:FluentIcons.Avalonia;assembly=FluentIcons.Avalonia"
        x:DataType="vm:MainWindowViewModel"
        
        mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800"
        x:Class="LabelAva.MainWindow"
        Title="{Binding Document.WindowTitle}"
        Icon="/Assets/128px.ico"
        Width="1200" Height="800"
        Background="{DynamicResource SystemChromeMediumLowBrush}"
        Opacity="0"
        TransparencyLevelHint="None"
        WindowStartupLocation="CenterScreen">

    <Window.Resources>
        <local:SubtractConverter x:Key="SubtractConverter"/>
        <!-- 默认分组颜色资源 -->
        <SolidColorBrush x:Key="Group0ColorBrush" Color="#FFE6E6"/>
        <SolidColorBrush x:Key="Group1ColorBrush" Color="#E6E6FF"/>
        <SolidColorBrush x:Key="Group0ColorHoverBrush" Color="#FFEEEE"/>
        <SolidColorBrush x:Key="Group1ColorHoverBrush" Color="#EEEEFF"/>
        <SolidColorBrush x:Key="Group0ColorPressedBrush" Color="#FFCCCC"/>
        <SolidColorBrush x:Key="Group1ColorPressedBrush" Color="#CCCCFF"/>
    </Window.Resources>

    <DockPanel>
        <!-- 菜单栏 -->
        <Menu DockPanel.Dock="Top" BorderBrush="{DynamicResource SystemControlForegroundChromeMediumBrush}" BorderThickness="0,0,0,1">
            <MenuItem Header="文件(_F)">
                <MenuItem Header="新建翻译" Command="{Binding Document.NewCommand}"/>
                <MenuItem Header="打开翻译" Command="{Binding Document.OpenCommand}"/>
                <MenuItem Header="保存(_S)" Command="{Binding Document.SaveCommand}" InputGesture="Ctrl+S"/>
                <MenuItem Header="另存为(_A)" Command="{Binding Document.SaveAsCommand}" InputGesture="Ctrl+Shift+S"/>
                <MenuItem Header="关闭翻译" Command="{Binding Document.CloseCommand}"/>
                <Separator/>
                <MenuItem Header="文件关联管理器" Click="OnImageAssociationManager" IsEnabled="{Binding Document.HasDocument}"/>
                <Separator/>
                <MenuItem Header="退出" Click="OnExit"/>
            </MenuItem>
            <MenuItem Header="编辑(_E)">
                <MenuItem Header="{Binding History.UndoHeader}" Command="{Binding History.UndoCommand}" InputGesture="Ctrl+Z"/>
                <MenuItem Header="{Binding History.RedoHeader}" Command="{Binding History.RedoCommand}" InputGesture="Ctrl+Y"/>
                <Separator/>
                <MenuItem Header="编辑模式" ToggleType="CheckBox" IsChecked="{Binding Edit.IsEditMode, Mode=TwoWay}" IsEnabled="{Binding Edit.CanToggleEditMode}"/>
                <Separator/>
                <MenuItem Header="首选项" Click="OnPreferences"/>
            </MenuItem>
            <MenuItem Header="视图(_V)">
                <MenuItem Header="放大" Command="{Binding CanvasWorkspace.ZoomInCommand}"/>
                <MenuItem Header="缩小" Command="{Binding CanvasWorkspace.ZoomOutCommand}"/>
                <MenuItem Header="重置缩放" Command="{Binding CanvasWorkspace.ResetZoomCommand}"/>
            </MenuItem>
            <MenuItem Header="帮助(_H)">
                <MenuItem Header="关于" Click="OnAbout"/>
            </MenuItem>
        </Menu>
        
        <!-- 状态栏 -->
        <Border DockPanel.Dock="Bottom" Classes="statusbar" Padding="4" DataContext="{Binding StatusBar}">
            <Grid x:Name="StatusBarGrid" ColumnDefinitions="2*,Auto,*">
                <Border x:Name="_StatusBar"
                        Classes="status-bar"
                        Classes.status-info="{Binding IsInfo}"
                        Classes.status-success="{Binding IsSuccess}"
                        Classes.status-warn="{Binding IsWarn}"
                        Classes.status-error="{Binding IsError}"
                        HorizontalAlignment="Left" CornerRadius="4" Padding="8,2"
                        MaxWidth="{Binding Bounds.Width, ElementName=StatusBarGrid, Converter={StaticResource SubtractConverter}, ConverterParameter=300}"
                        ClipToBounds="True">
                     <TextBlock Text="{Binding StatusText}"
                                Classes="status-text"
                                Classes.status-info="{Binding IsInfo}"
                                Classes.status-success="{Binding IsSuccess}"
                                Classes.status-warn="{Binding IsWarn}"
                                Classes.status-error="{Binding IsError}"
                                TextTrimming="CharacterEllipsis"
                                FontFamily="Sarasa Mono SC"/>
                </Border>
                <Grid x:Name="PageNavGrid" Grid.Column="1" ColumnDefinitions="Auto,Auto,Auto,Auto,Auto" VerticalAlignment="Center" Margin="0,0,77,0" IsVisible="False">
                    <!-- <StackPanel Grid.Column="1" Orientation="Horizontal"> -->
                        <TextBlock Grid.Column="0" x:Name="_ZoomText" Text="{Binding ZoomText}" Classes="zoom-text" Width="72" TextAlignment="Center" Margin="0"/>
                        <Border Grid.Column="1" Width="1" HorizontalAlignment="Left"
                        Background="{DynamicResource SystemControlForegroundChromeHighBrush}"
                        Margin="12,4,12,4"/>
                        <Button Grid.Column="2" x:Name="PageUpButton" Padding="4,2" Margin="0,0,2,0" Click="OnPageUpButtonClick">
                            <flua:FluentIcon Icon="ArrowLeft" FontSize="14"/>
                        </Button>
                        <Button Grid.Column="3" x:Name="PageDownButton" Padding="4,2" Margin="2,0,0,0" Click="OnPageDownButtonClick">
                            <flua:FluentIcon Icon="ArrowRight" FontSize="14"/>
                        </Button>
                        <Border Grid.Column="4" Width="1" HorizontalAlignment="Left"
                        Background="{DynamicResource SystemControlForegroundChromeHighBrush}"
                        Margin="12,4,0,4"/>
                    <!-- </StackPanel> -->
                </Grid>
            </Grid>
        </Border>
        
        <!-- 内容区域：欢迎屏幕或主界面 -->
        <Grid>
            <!-- 欢迎屏幕 -->
            <views:WelcomeView x:Name="WelcomeViewControl" IsVisible="True"
                                Background="Transparent"
                                OpenTranslationRequested="OnOpenTranslationRequested"
                                NewTranslationRequested="OnNewTranslationRequested"/>
            
            <!-- 主界面：左右两个 Panel（默认隐藏） -->
            <Grid x:Name="MainContentPanel" ColumnDefinitions="2*,*" IsVisible="False">
                <!-- 左侧 Panel：画布区域 -->
                <Border Grid.Column="0" Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}">
                    <views:AnnotationCanvas x:Name="AnnotationCanvasControl" DataContext="{Binding CanvasWorkspace}" />
                </Border>
                
                <!-- 右侧 Panel：属性面板 -->
                <Border Grid.Column="1" Background="{DynamicResource SystemControlPageBackgroundMediumAltMediumBrush}">
                    <Grid RowDefinitions="*,Auto">
                        <!-- 上半部分：树状视图 -->
                        <DockPanel Grid.Row="0">
                            <!-- 工具栏：标题 + 模式切换 + 分组选择 -->
                            <Border DockPanel.Dock="Top" Background="Transparent" Padding="12,4" Height="48">
                                <DockPanel>
                                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Spacing="8">
                                        <Button x:Name="EditModeToggleButton"
                                                Content="{Binding Edit.EditModeButtonText}"
                                                FontSize="12"
                                                Command="{Binding Edit.ToggleEditModeCommand}"
                                                Classes="mode-toggle"
                                                VerticalAlignment="Center"/>
                                        <RadioButton x:Name="Group0RadioButton"
                                                     Classes="no-dot group0"
                                                     Content="框内"
                                                     GroupName="GroupSelection"
                                                     IsChecked="True"
                                                     Click="OnGroupSelectionChanged"
                                                     IsVisible="{Binding Edit.AreGroupButtonsVisible}"
                                                     VerticalAlignment="Center"
                                                     MinHeight="30"/>
                                        <RadioButton x:Name="Group1RadioButton"
                                                     Classes="no-dot group1"
                                                     Content="框外"
                                                     GroupName="GroupSelection"
                                                     Click="OnGroupSelectionChanged"
                                                     IsVisible="{Binding Edit.AreGroupButtonsVisible}"
                                                     VerticalAlignment="Center"
                                                     MinHeight="30"/>
                                    </StackPanel>
                                </DockPanel>
                            </Border>
                            <Panel>
                                <TreeView x:Name="ImageTreeView"
                                          ItemsSource="{Binding Navigation.TreeItems}"
                                          SelectionChanged="OnTreeViewSelectionChanged"
                                          KeyDown="OnTreeViewKeyDown"
                                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                          Classes="primary">
                                    <TreeView.Styles>
                                        <Style Selector="TreeViewItem" x:DataType="models:ImageTreeItem">
                                            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
                                        </Style>
                                    </TreeView.Styles>
                                    <TreeView.DataTemplates>
                                        <TreeDataTemplate x:DataType="models:TranslationTreeItem" ItemsSource="{x:Null}">
                                            <Grid ColumnDefinitions="Auto,*" Margin="4,4,4,4" Background="Transparent"
                                                  PointerPressed="OnTreeViewItemPointerPressed"
                                                  PointerMoved="OnTreeViewItemPointerMoved"
                                                  PointerReleased="OnTreeViewItemPointerReleased">
                                                <Grid.ContextMenu>
                                                    <ContextMenu>
                                                        <MenuItem Header="复制文本" Click="OnCopySelectedText"/>
                                                        <MenuItem Header="删除此标记" Click="OnDeleteSelectedLabel"/>
                                                        <Separator/>
                                                        <MenuItem Header="切换分组" Click="OnToggleGroup"/>
                                                    </ContextMenu>
                                                </Grid.ContextMenu>
                                                <Border Grid.Column="0" CornerRadius="4" Padding="8,4" Margin="0,0,4,0"
                                                        Background="{Binding GroupIndex, Converter={x:Static local:GroupIndexToBrushConverter.Instance}}"
                                                        VerticalAlignment="Center">
                                                    <TextBlock 
                                                        Text="{Binding Index}" 
                                                        FontFamily="Sarasa Mono SC"
                                                        Foreground="White"
                                                        VerticalAlignment="Center" />
                                                </Border>
                                                <TextBlock Grid.Column="1" 
                                                        Text="{Binding Text}" 
                                                        TextWrapping="Wrap" 
                                                        LineHeight="20" 
                                                        Margin="4,0,4,0"
                                                        FontFamily="{DynamicResource DligFontFamily}"
                                                        FontFeatures="{DynamicResource DligFontFeatures}"
                                                        VerticalAlignment="Center" />
                                            </Grid>
                                        </TreeDataTemplate>
                                        <TreeDataTemplate x:DataType="models:ImageTreeItem" ItemsSource="{Binding Translations}">
                                            <TextBlock Text="{Binding ImageName}" FontWeight="Bold" FontFamily="Sarasa Mono SC" />
                                        </TreeDataTemplate>
                                    </TreeView.DataTemplates>
                                </TreeView>

                                <Canvas x:Name="TreeDropIndicatorCanvas" IsHitTestVisible="False">
                                    <Rectangle x:Name="TreeDropLine" Height="2" Fill="DodgerBlue" IsVisible="False"/>
                                </Canvas>

                                <Canvas x:Name="TreeDragPreviewCanvas" IsHitTestVisible="False">
                                    <Border x:Name="TreeDragPreview" IsVisible="False" Opacity="0.7"
                                            Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}"
                                            BorderBrush="{DynamicResource SystemControlForegroundChromeHighBrush}"
                                            BorderThickness="1" CornerRadius="2" Padding="4,2">
                                        <TextBlock x:Name="TreeDragPreviewText" FontSize="14"/>
                                    </Border>
                                </Canvas>
                            </Panel>
                        </DockPanel>

                        <!-- 下半部分：文本编辑区域 (默认隐藏) -->
                        <Border x:Name="EditPanel" Grid.Row="1" Background="{DynamicResource SystemControlPageBackgroundAltHighBrush}" BorderBrush="{DynamicResource SystemControlForegroundChromeMediumBrush}" BorderThickness="0,1,0,0" Padding="10" IsVisible="{Binding Edit.IsEditPanelVisible}">
                            <DockPanel>
                                <!-- 工具栏：快捷输入按钮 -->
                                <Border x:Name="QuickInputToolbar" DockPanel.Dock="Top" Margin="0,0,0,8">
                                    <ScrollViewer x:Name="ToolbarScrollViewer" 
                                                  HorizontalScrollBarVisibility="Hidden"
                                                  PointerWheelChanged="OnToolbarScrollWheel">
                                        <ItemsControl x:Name="QuickInputItemsControl"
                                                      ItemsSource="{Binding Edit.QuickInputSlots}"
                                                      FontFamily="{Binding Edit.ActiveDligFontFamily}"
                                                      FontFeatures="{Binding Edit.ActiveDligFontFeatures}">
                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <StackPanel Orientation="Horizontal" Spacing="4"/>
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>
                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate x:DataType="models:QuickInputSlot">
                                                    <Button Content="{Binding DisplayLabel}" 
                                                            Click="OnQuickInputButtonClick"
                                                            Classes="toolbar-button"/>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </ScrollViewer>
                                </Border>
                                <TextBox x:Name="TranslationTextBox" 
                                         AcceptsReturn="True" 
                                         TextWrapping="Wrap" 
                                         MinHeight="120"
                                         MaxHeight="300"
                                         IsEnabled="{Binding IsTextEditable}"
                                         FontFamily="{Binding Edit.ActiveDligFontFamily}"
                                         FontFeatures="{Binding Edit.ActiveDligFontFeatures}"
                                         PlaceholderText="选中文本节点以编辑"
                                         Text="{Binding Navigation.SelectedTranslationItem.Text,
                                                        Mode=TwoWay,
                                                        UpdateSourceTrigger=PropertyChanged}"
                                         />
                            </DockPanel>
                        </Border>
                    </Grid>
                </Border>
            </Grid>
        </Grid>
    </DockPanel>
    
    <Window.Styles>
        <!-- 主按钮样式 -->
        <Style Selector="Button.primary">
            <Setter Property="Background" Value="{DynamicResource SystemAccentColor}"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="CornerRadius" Value="4"/>
        </Style>
        <Style Selector="Button.primary:pointerover /template/ ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource SystemAccentColorLight1}"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style Selector="Button.primary:pressed /template/ ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource SystemAccentColorDark1}"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        
        <!-- 模式切换按钮样式 -->
        <Style Selector="Button.mode-toggle">
            <Setter Property="Background" Value="{DynamicResource SystemControlPageBackgroundAltHighBrush}"/>
            <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="Padding" Value="12,6"/>
            <Setter Property="CornerRadius" Value="4"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="MinHeight" Value="30"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightChromeHighBrush}"/>
        </Style>
        <Style Selector="Button.mode-toggle:pointerover /template/ ContentPresenter">
            <Setter Property="Background" Value="{DynamicResource SystemControlPageBackgroundAltHighBrush}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}"/>
        </Style>
        <Style Selector="Button.mode-toggle.active">
            <Setter Property="BorderBrush" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}"/>
        </Style>
        <Style Selector="Button.mode-toggle.active:pointerover /template/ ContentPresenter">
            <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}"/>
        </Style>
        
        <!-- 主 TreeView 样式 -->
        <Style Selector="TreeView.primary">
            <Setter Property="Background" Value="Transparent"/>
        </Style>
        
        <!-- TreeView 子项样式 -->
        <Style Selector="TreeViewItem.primary">
            <Setter Property="Background" Value="Transparent"/>
        </Style>

        <!-- 标签标注的悬停样式 -->
        <Style Selector="Border.label-marker">
            <Setter Property="Background" Value="Coral"/>
            <Setter Property="Opacity" Value="0.8"/>
        </Style>
        <Style Selector="Border.label-marker:pointerover">
            <Setter Property="Background" Value="Orange"/>
            <Setter Property="Opacity" Value="1.0"/>
            <Setter Property="Cursor" Value="Hand"/>
        </Style>

        <!-- 工具栏按钮样式 -->
        <Style Selector="Button.toolbar-button">
            <Setter Property="Background" Value="{DynamicResource SystemControlPageBackgroundAltHighBrush}"/>
            <Setter Property="Foreground" Value="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="Padding" Value="8,4"/>
            <Setter Property="CornerRadius" Value="3"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="{DynamicResource SystemControlForegroundChromeMediumBrush}"/>
        </Style>
        <Style Selector="Button.toolbar-button:pointerover /template/ ContentPresenter">
            <Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColor}"/>
            <Setter Property="Background" Value="{DynamicResource SystemControlPageBackgroundAltHighBrush}"/>
        </Style>
        <Style Selector="Button.toolbar-button:pressed /template/ ContentPresenter">
        </Style>
    </Window.Styles>
</Window>