MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:HtmlEditor.Models"
             xmlns:shapes="clr-namespace:Microsoft.Maui.Controls.Shapes;assembly=Microsoft.Maui.Controls"
             x:Class="HtmlEditor.MainPage">

    <ContentPage.Resources>
        <Style x:Key="TopCommandButton" TargetType="Button">
            <Setter Property="HeightRequest" Value="26" />
            <Setter Property="MinimumHeightRequest" Value="0" />
            <Setter Property="Padding" Value="8,0" />
            <Setter Property="CornerRadius" Value="6" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="BackgroundColor" Value="#EAF3F2" />
            <Setter Property="TextColor" Value="#173B3F" />
            <Setter Property="BorderColor" Value="#B8D8D5" />
            <Setter Property="BorderWidth" Value="1" />
        </Style>
        <Style x:Key="CommandButton" TargetType="Button">
            <Setter Property="HeightRequest" Value="26" />
            <Setter Property="MinimumHeightRequest" Value="0" />
            <Setter Property="Padding" Value="8,0" />
            <Setter Property="CornerRadius" Value="6" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="BackgroundColor" Value="#FFFFFF" />
            <Setter Property="TextColor" Value="#263238" />
            <Setter Property="BorderColor" Value="#D0D7DE" />
            <Setter Property="BorderWidth" Value="1" />
        </Style>
        <Style x:Key="PrimaryCommandButton" TargetType="Button">
            <Setter Property="HeightRequest" Value="26" />
            <Setter Property="MinimumHeightRequest" Value="0" />
            <Setter Property="Padding" Value="10,0" />
            <Setter Property="CornerRadius" Value="6" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="BackgroundColor" Value="#1F6F78" />
            <Setter Property="TextColor" Value="#FFFFFF" />
            <Setter Property="BorderColor" Value="#1F6F78" />
            <Setter Property="BorderWidth" Value="1" />
        </Style>
        <Style x:Key="ToolButton" TargetType="Button">
            <Setter Property="HeightRequest" Value="24" />
            <Setter Property="MinimumHeightRequest" Value="0" />
            <Setter Property="Padding" Value="7,0" />
            <Setter Property="CornerRadius" Value="4" />
            <Setter Property="FontSize" Value="11" />
            <Setter Property="BackgroundColor" Value="#FFFFFF" />
            <Setter Property="TextColor" Value="#263238" />
            <Setter Property="BorderColor" Value="#D0D7DE" />
            <Setter Property="BorderWidth" Value="1" />
        </Style>
        <Style x:Key="TreeToggleButton" TargetType="Button">
            <Setter Property="WidthRequest" Value="22" />
            <Setter Property="HeightRequest" Value="20" />
            <Setter Property="MinimumHeightRequest" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="CornerRadius" Value="4" />
            <Setter Property="FontSize" Value="11" />
            <Setter Property="BackgroundColor" Value="Transparent" />
            <Setter Property="TextColor" Value="#667085" />
            <Setter Property="BorderWidth" Value="0" />
        </Style>
    </ContentPage.Resources>

    <ContentPage.MenuBarItems>
        <MenuBarItem Text="文件">
            <MenuFlyoutItem Text="打开文件夹" Clicked="OnOpenFolderClicked" />
            <MenuFlyoutItem Text="新建HTML" Clicked="OnNewFileClicked" />
            <MenuFlyoutSeparator />
            <MenuFlyoutItem Text="保存" Clicked="OnSaveClicked" />
            <MenuFlyoutItem Text="另存为" Clicked="OnSaveAsClicked" />
            <MenuFlyoutItem Text="还原备份" Clicked="OnRestoreBackupClicked" />
            <MenuFlyoutItem Text="重新加载" Clicked="OnReloadClicked" />
        </MenuBarItem>
        <MenuBarItem Text="编辑">
            <MenuFlyoutItem Text="撤销" Clicked="OnUndoClicked" />
            <MenuFlyoutItem Text="重做" Clicked="OnRedoClicked" />
        </MenuBarItem>
        <MenuBarItem Text="Git">
            <MenuFlyoutItem Text="初始化仓库" Clicked="OnInitGitClicked" />
        </MenuBarItem>
        <MenuBarItem Text="帮助">
            <MenuFlyoutItem Text="检查更新" Clicked="OnCheckUpdateClicked" />
        </MenuBarItem>
    </ContentPage.MenuBarItems>

    <Grid BackgroundColor="#EEF2F6">
        <Grid x:Name="MainLayoutGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="SidebarColumn" Width="320" />
                <ColumnDefinition x:Name="SidebarSeparatorColumn" Width="1" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0"
                  x:Name="SidebarPanel"
                  RowDefinitions="Auto,Auto,*"
                  BackgroundColor="#F8FAFC"
                  Padding="12"
                  RowSpacing="10">
                <VerticalStackLayout Spacing="8">
                    <Grid ColumnDefinitions="*,*"
                          ColumnSpacing="8">
                        <Button Text="打开文件夹"
                                Style="{StaticResource TopCommandButton}"
                                Clicked="OnOpenFolderClicked"
                                SemanticProperties.Hint="选择 HTML 工作目录" />
                        <Button Grid.Column="1"
                                Text="新建HTML"
                                Style="{StaticResource TopCommandButton}"
                                Clicked="OnNewFileClicked" />
                    </Grid>
                    <Grid ColumnDefinitions="*,*"
                          ColumnSpacing="8">
                        <Button Text="Git初始化"
                                Style="{StaticResource TopCommandButton}"
                                Clicked="OnInitGitClicked" />
                        <Picker Grid.Column="1"
                                x:Name="EditorModePicker"
                                SelectedIndex="2"
                                HeightRequest="34"
                                MinimumHeightRequest="34"
                                MinimumWidthRequest="132"
                                FontSize="12"
                                BackgroundColor="#FFFFFF"
                                TextColor="#173B3F"
                                VerticalOptions="Center"
                                SelectedIndexChanged="OnEditorModeChanged">
                            <Picker.Items>
                                <x:String>GrapesJS</x:String>
                                <x:String>ContentTools</x:String>
                                <x:String>ContentEditable</x:String>
                            </Picker.Items>
                        </Picker>
                    </Grid>
                </VerticalStackLayout>

                <Grid Grid.Row="1"
                      ColumnDefinitions="*,Auto"
                      ColumnSpacing="8">
                    <Label x:Name="WorkspaceLabel"
                           Text="未打开文件夹"
                           FontSize="13"
                           FontAttributes="Bold"
                           TextColor="#20242A"
                           VerticalOptions="Center"
                           LineBreakMode="TailTruncation" />
                    <Button Grid.Column="1"
                            Text="刷新"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnRefreshTreeClicked" />
                </Grid>

                <CollectionView Grid.Row="2"
                                x:Name="FileTreeView"
                                ItemsSource="{Binding VisibleTreeItems}"
                                SelectionMode="Single"
                                SelectionChanged="OnFileTreeSelectionChanged">
                    <CollectionView.EmptyView>
                        <Grid Padding="8">
                            <Label Text="请选择包含 HTML 文件的文件夹"
                                   TextColor="#667085"
                                   LineBreakMode="WordWrap" />
                        </Grid>
                    </CollectionView.EmptyView>
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:FileTreeNode">
                            <Grid Padding="0,1"
                                  ColumnDefinitions="Auto,22,*"
                                  ColumnSpacing="6"
                                  HeightRequest="30"
                                  VerticalOptions="Center">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup Name="CommonStates">
                                        <VisualState Name="Normal">
                                            <VisualState.Setters>
                                                <Setter Property="BackgroundColor" Value="Transparent" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState Name="Selected">
                                            <VisualState.Setters>
                                                <Setter Property="BackgroundColor" Value="#DCEBFF" />
                                            </VisualState.Setters>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <BoxView WidthRequest="{Binding Indent}"
                                         BackgroundColor="Transparent" />
                                <Grid Grid.Column="1"
                                      WidthRequest="22"
                                      HeightRequest="22"
                                      VerticalOptions="Center">
                                    <shapes:Path Data="M2,5 L7,5 L8.5,7 L18,7 L18,16 L2,16 Z"
                                                 Fill="#E8C15A"
                                                 Aspect="Uniform"
                                                 WidthRequest="16"
                                                 HeightRequest="16"
                                                 HorizontalOptions="Start"
                                                 VerticalOptions="Center"
                                                 IsVisible="{Binding IsClosedDirectory}" />
                                    <shapes:Path Data="M2,6 L7,6 L8.5,8 L18,8 L16,16 L2,16 Z"
                                                 Fill="#E8C15A"
                                                 Aspect="Uniform"
                                                 WidthRequest="16"
                                                 HeightRequest="16"
                                                 HorizontalOptions="Start"
                                                 VerticalOptions="Center"
                                                 IsVisible="{Binding IsOpenDirectory}" />
                                    <shapes:Path Data="M4,2 L11,2 L15,6 L15,16 L4,16 Z M11,2 L11,6 L15,6"
                                                 Fill="Transparent"
                                                 Stroke="#6B7280"
                                                 StrokeThickness="1.4"
                                                 Aspect="Uniform"
                                                 WidthRequest="16"
                                                 HeightRequest="16"
                                                 HorizontalOptions="Start"
                                                 VerticalOptions="Center"
                                                 IsVisible="{Binding IsFile}" />
                                </Grid>
                                <Label Grid.Column="2"
                                       Text="{Binding DisplayName}"
                                       FontSize="13"
                                       TextColor="{Binding TextColor}"
                                       VerticalTextAlignment="Center"
                                       VerticalOptions="Center"
                                       LineBreakMode="TailTruncation" />
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </Grid>

            <BoxView Grid.Column="1"
                     x:Name="SidebarSeparator"
                     Color="#D7DEE5" />

            <Grid Grid.Column="2"
                  RowDefinitions="Auto,Auto,*"
                  BackgroundColor="#E9EEF3">
                <Grid Padding="10,8"
                      ColumnDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"
                      ColumnSpacing="8"
                      BackgroundColor="#FAFBFC">
                    <Button Text="隐藏左侧"
                            x:Name="ToggleSidebarButton"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnToggleSidebarClicked" />
                    <Button Grid.Column="1"
                            Text="撤销"
                            x:Name="UndoButton"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnUndoClicked" />
                    <Button Grid.Column="2"
                            Text="重做"
                            x:Name="RedoButton"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnRedoClicked" />
                    <Button Grid.Column="3"
                            Text="删除"
                            x:Name="DeleteButton"
                            Style="{StaticResource CommandButton}"
                            CommandParameter="remove"
                            Clicked="OnContentToolClicked" />
                    <Button Grid.Column="4"
                            Text="保存"
                            x:Name="SaveButton"
                            Style="{StaticResource PrimaryCommandButton}"
                            Clicked="OnSaveClicked" />
                    <Button Grid.Column="5"
                            Text="另存为"
                            x:Name="SaveAsButton"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnSaveAsClicked" />
                    <Button Grid.Column="6"
                            Text="还原备份"
                            x:Name="RestoreBackupButton"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnRestoreBackupClicked" />
                    <Button Grid.Column="7"
                            Text="修改对比"
                            x:Name="DiffButton"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnShowDiffClicked" />
                    <HorizontalStackLayout Grid.Column="8"
                                           Spacing="0"
                                           VerticalOptions="Center">
                        <CheckBox x:Name="BackupCheckBox"
                                  WidthRequest="22"
                                  HeightRequest="22"
                                  IsChecked="True"
                                  Scale="0.82"
                                  VerticalOptions="Center" />
                        <Label Text="备份"
                               Margin="-2,0,0,0"
                               VerticalOptions="Center"
                               VerticalTextAlignment="Center"
                               TextColor="#333942" />
                    </HorizontalStackLayout>
                    <HorizontalStackLayout Grid.Column="9"
                                           Spacing="0"
                                           VerticalOptions="Center">
                        <CheckBox x:Name="PreviewCheckBox"
                                  WidthRequest="22"
                                  HeightRequest="22"
                                  IsChecked="False"
                                  Scale="0.82"
                                  VerticalOptions="Center"
                                  CheckedChanged="OnPreviewChanged" />
                        <Label Text="预览"
                               Margin="-2,0,0,0"
                               VerticalOptions="Center"
                               VerticalTextAlignment="Center"
                               TextColor="#333942" />
                    </HorizontalStackLayout>
                    <Button Grid.Column="10"
                            Text="重新加载"
                            x:Name="ReloadButton"
                            Style="{StaticResource CommandButton}"
                            Clicked="OnReloadClicked" />
                </Grid>

                <ScrollView Grid.Row="1"
                            x:Name="ContentToolsToolbar"
                            Orientation="Horizontal"
                            HorizontalScrollBarVisibility="Never"
                            BackgroundColor="#F6F8FA">
                    <HorizontalStackLayout Padding="10,6"
                                           Spacing="6"
                                           VerticalOptions="Center">
                        <Button Text="加粗" Style="{StaticResource ToolButton}" CommandParameter="bold" Clicked="OnContentToolClicked" />
                        <Button Text="斜体" Style="{StaticResource ToolButton}" CommandParameter="italic" Clicked="OnContentToolClicked" />
                        <Button Text="链接" Style="{StaticResource ToolButton}" CommandParameter="link" Clicked="OnContentToolClicked" />
                        <Button Text="左对齐" Style="{StaticResource ToolButton}" CommandParameter="align-left" Clicked="OnContentToolClicked" />
                        <Button Text="居中" Style="{StaticResource ToolButton}" CommandParameter="align-center" Clicked="OnContentToolClicked" />
                        <Button Text="右对齐" Style="{StaticResource ToolButton}" CommandParameter="align-right" Clicked="OnContentToolClicked" />
                        <BoxView WidthRequest="1" HeightRequest="22" Color="#D0D7DE" VerticalOptions="Center" />
                        <Button Text="标题" Style="{StaticResource ToolButton}" CommandParameter="heading" Clicked="OnContentToolClicked" />
                        <Button Text="副标题" Style="{StaticResource ToolButton}" CommandParameter="subheading" Clicked="OnContentToolClicked" />
                        <Button Text="段落" Style="{StaticResource ToolButton}" CommandParameter="paragraph" Clicked="OnContentToolClicked" />
                        <Button Text="无序列表" Style="{StaticResource ToolButton}" CommandParameter="unordered-list" Clicked="OnContentToolClicked" />
                        <Button Text="有序列表" Style="{StaticResource ToolButton}" CommandParameter="ordered-list" Clicked="OnContentToolClicked" />
                        <Button Text="表格" Style="{StaticResource ToolButton}" CommandParameter="table" Clicked="OnContentToolClicked" />
                        <Button Text="缩进" Style="{StaticResource ToolButton}" CommandParameter="indent" Clicked="OnContentToolClicked" />
                        <Button Text="减少缩进" Style="{StaticResource ToolButton}" CommandParameter="unindent" Clicked="OnContentToolClicked" />
                        <Button Text="换行" Style="{StaticResource ToolButton}" CommandParameter="line-break" Clicked="OnContentToolClicked" />
                        <BoxView WidthRequest="1" HeightRequest="22" Color="#D0D7DE" VerticalOptions="Center" />
                        <Button Text="图片" Style="{StaticResource ToolButton}" CommandParameter="image" Clicked="OnContentToolClicked" />
                        <Button Text="视频" Style="{StaticResource ToolButton}" CommandParameter="video" Clicked="OnContentToolClicked" />
                        <Button Text="预格式" Style="{StaticResource ToolButton}" CommandParameter="preformatted" Clicked="OnContentToolClicked" />
                    </HorizontalStackLayout>
                </ScrollView>

                <Label Grid.Row="2"
                       x:Name="StatusLabel"
                       IsVisible="False"
                       Padding="12,5"
                       Text="准备就绪"
                       FontSize="12"
                       BackgroundColor="#F2F5F8"
                       TextColor="#52616B"
                       LineBreakMode="TailTruncation" />

                <WebView Grid.Row="2"
                         x:Name="EditorWebView"
                         Navigated="OnEditorNavigated" />

                <Grid Grid.Row="2"
                      x:Name="DiffPanel"
                      IsVisible="False"
                      RowDefinitions="Auto,*"
                      BackgroundColor="#FFFFFF">
                    <Grid Padding="10,8"
                          ColumnDefinitions="*,Auto,Auto"
                          ColumnSpacing="10"
                          BackgroundColor="#F6F8FA">
                        <Label x:Name="DiffSummaryLabel"
                               Text="修改对比"
                               FontSize="12"
                               TextColor="#333942"
                               VerticalOptions="Center"
                               LineBreakMode="TailTruncation" />
                        <HorizontalStackLayout Grid.Column="1"
                                               Spacing="0"
                                               VerticalOptions="Center">
                            <CheckBox x:Name="ShowFullDiffCheckBox"
                                      WidthRequest="22"
                                      HeightRequest="22"
                                      Scale="0.82"
                                      VerticalOptions="Center"
                                      CheckedChanged="OnShowFullDiffChanged" />
                            <Label Text="显示全部"
                                   Margin="-2,0,0,0"
                                   VerticalOptions="Center"
                                   VerticalTextAlignment="Center"
                                   TextColor="#333942" />
                        </HorizontalStackLayout>
                        <Button Grid.Column="2"
                                Text="关闭"
                                Style="{StaticResource CommandButton}"
                                Clicked="OnCloseDiffClicked" />
                    </Grid>

                    <CollectionView Grid.Row="1"
                                    x:Name="DiffCollectionView"
                                    ItemsSource="{Binding DiffLines}">
                        <CollectionView.EmptyView>
                            <Grid Padding="16">
                                <Label Text="没有差异"
                                       TextColor="#667085"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center" />
                            </Grid>
                        </CollectionView.EmptyView>
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <Grid Padding="6,4"
                                      ColumnDefinitions="28,58,58,*,*"
                                      ColumnSpacing="8"
                                      BackgroundColor="{Binding BackgroundColor}">
                                    <Label Text="{Binding Symbol}"
                                           FontFamily="Consolas"
                                           FontSize="12"
                                           TextColor="{Binding TextColor}"
                                           HorizontalTextAlignment="Center" />
                                    <Label Grid.Column="1"
                                           Text="{Binding OldLineNumber}"
                                           FontFamily="Consolas"
                                           FontSize="12"
                                           TextColor="#667085"
                                           HorizontalTextAlignment="End" />
                                    <Label Grid.Column="2"
                                           Text="{Binding NewLineNumber}"
                                           FontFamily="Consolas"
                                           FontSize="12"
                                           TextColor="#667085"
                                           HorizontalTextAlignment="End" />
                                    <Label Grid.Column="3"
                                           Text="{Binding OldText}"
                                           FontFamily="Consolas"
                                           FontSize="12"
                                           TextColor="{Binding TextColor}"
                                           LineBreakMode="TailTruncation" />
                                    <Label Grid.Column="4"
                                           Text="{Binding NewText}"
                                           FontFamily="Consolas"
                                           FontSize="12"
                                           TextColor="{Binding TextColor}"
                                           LineBreakMode="TailTruncation" />
                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </Grid>
            </Grid>
        </Grid>
    </Grid>

</ContentPage>