Browse Source

refactor(ui): 重构设备详情弹窗布局,优化配置展示

将当前与新配置并排显示,移除冗余标题,提升信息密度与可读性。
yangkaixiang 1 month ago
parent
commit
1cb3da25e1
1 changed files with 127 additions and 92 deletions
  1. 127 92
      windows/QuickIP.Client/DeviceDetailsWindow.xaml

+ 127 - 92
windows/QuickIP.Client/DeviceDetailsWindow.xaml

@@ -8,22 +8,16 @@
         MinWidth="1000"
         ShowInTaskbar="False"
         WindowStartupLocation="CenterOwner">
-    <Grid Background="#F5F7FB" Margin="20">
-        <Grid>
+    <Grid Background="#F5F7FB">
+        <Grid Margin="20">
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
 
-            <TextBlock FontSize="22"
-                       FontWeight="SemiBold"
-                       Foreground="#111827"
-                       Text="设备信息与 Linux 接口" />
-
-            <UniformGrid Grid.Row="1" Margin="0,12,0,0" Columns="4">
+            <UniformGrid Grid.Row="0" Columns="4">
             <Border Margin="0,0,12,0" Padding="14" Background="White" CornerRadius="10">
                 <StackPanel>
                     <TextBlock FontSize="12" Foreground="#6B7280" Text="设备 ID" />
@@ -50,85 +44,81 @@
             </Border>
             </UniformGrid>
 
-            <Border Grid.Row="2" Margin="0,12,0,0" Padding="14" Background="White" CornerRadius="10">
-            <StackPanel>
-                <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="目标接口" />
-                <ComboBox x:Name="RemoteTargetInterfaceComboBox"
-                          Margin="0,10,0,0"
-                          MinHeight="36"
-                          VerticalContentAlignment="Center"
-                          DisplayMemberPath="DisplayName"
-                          SelectionChanged="RemoteTargetInterfaceComboBox_OnSelectionChanged" />
-            </StackPanel>
-            </Border>
+            <Border Grid.Row="1" Margin="0,12,0,0" Padding="14" Background="White" CornerRadius="10">
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
 
-            <Border Grid.Row="3" Margin="0,12,0,0" Padding="14" Background="White" CornerRadius="10">
-            <UniformGrid Columns="4">
-                <Border Margin="0,0,12,0" Padding="12" Background="#EEF2FF" CornerRadius="10">
-                    <StackPanel>
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="接口名" />
-                        <TextBlock x:Name="RemoteConfigInterfaceTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
-                    </StackPanel>
-                </Border>
-                <Border Margin="0,0,12,0" Padding="12" Background="#EEF2FF" CornerRadius="10">
-                    <StackPanel>
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="当前 IP" />
-                        <TextBlock x:Name="RemoteConfigIpTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
-                    </StackPanel>
-                </Border>
-                <Border Margin="0,0,12,0" Padding="12" Background="#EEF2FF" CornerRadius="10">
                     <StackPanel>
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="当前网关" />
-                        <TextBlock x:Name="RemoteConfigGatewayTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
+                        <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="目标接口" />
+                        <ComboBox x:Name="RemoteTargetInterfaceComboBox"
+                                  Margin="0,10,0,0"
+                                  MinHeight="36"
+                                  VerticalContentAlignment="Center"
+                                  DisplayMemberPath="DisplayName"
+                                  SelectionChanged="RemoteTargetInterfaceComboBox_OnSelectionChanged" />
                     </StackPanel>
-                </Border>
-                <Border Padding="12" Background="#EEF2FF" CornerRadius="10">
-                    <StackPanel>
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="当前 DNS" />
-                        <TextBlock x:Name="RemoteConfigDnsTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
-                    </StackPanel>
-                </Border>
-            </UniformGrid>
+
+                    <Button x:Name="ReloadInterfaceConfigButton"
+                            Grid.Column="1"
+                            Margin="14,22,0,0"
+                            MinHeight="36"
+                            Padding="14,0"
+                            VerticalAlignment="Top"
+                            Click="ReloadInterfaceConfigButton_OnClick"
+                            Content="1. 读取当前配置" />
+                </Grid>
             </Border>
 
-            <Border Grid.Row="4" Margin="0,12,0,0" Padding="14" Background="White" CornerRadius="10">
-            <Grid>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="Auto" />
-                </Grid.RowDefinitions>
-
-                <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="新配置" />
-
-                <StackPanel Grid.Row="1" Margin="0,12,0,0" Orientation="Horizontal">
-                    <Button x:Name="ReloadInterfaceConfigButton" MinHeight="36" Padding="14,0" Click="ReloadInterfaceConfigButton_OnClick" Content="1. 读取当前配置" />
-                    <Button x:Name="ValidateConfigButton" Margin="10,0,0,0" MinHeight="36" Padding="14,0" Click="ValidateConfigButton_OnClick" Content="2. 校验配置" />
-                    <Button x:Name="ApplyConfigButton" Margin="10,0,0,0" MinHeight="36" Padding="14,0" Click="ApplyConfigButton_OnClick" Content="3. 应用配置" />
-                </StackPanel>
+            <Border Grid.Row="2" Margin="0,12,0,0" Padding="14" Background="White" CornerRadius="10">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
 
-                <UniformGrid Grid.Row="2" Margin="0,12,0,0" Columns="2">
-                    <StackPanel Margin="0,0,12,12">
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="IP 地址" />
-                        <TextBox x:Name="NewIpTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
-                    </StackPanel>
-                    <StackPanel Margin="0,0,0,12">
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="子网掩码" />
-                        <TextBox x:Name="NewMaskTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
-                    </StackPanel>
-                    <StackPanel Margin="0,0,12,0">
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="网关" />
-                        <TextBox x:Name="NewGatewayTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
-                    </StackPanel>
-                    <StackPanel Margin="0,0,0,0">
-                        <TextBlock FontSize="12" Foreground="#6B7280" Text="首选 DNS" />
-                        <TextBox x:Name="NewDnsTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
-                    </StackPanel>
-                </UniformGrid>
+                    <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="配置调整" />
 
-                <Border Grid.Row="3" Margin="0,12,0,0" Padding="12" Background="#FEF2F2" CornerRadius="10">
-                    <Grid>
+                    <Grid Grid.Row="1" Margin="0,12,0,0">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+
+                        <Border Margin="0,0,8,0" Padding="14" Background="#F9FAFB" CornerRadius="10">
+                            <StackPanel>
+                                <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="当前配置" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="接口名" />
+                                <TextBlock x:Name="RemoteConfigInterfaceTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="当前 IP" />
+                                <TextBlock x:Name="RemoteConfigIpTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="当前网关" />
+                                <TextBlock x:Name="RemoteConfigGatewayTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="当前 DNS" />
+                                <TextBlock x:Name="RemoteConfigDnsTextBlock" Margin="0,8,0,0" FontSize="14" FontWeight="SemiBold" Foreground="#111827" Text="-" />
+                            </StackPanel>
+                        </Border>
+
+                        <Border Grid.Column="1" Margin="8,0,0,0" Padding="14" Background="#F9FAFB" CornerRadius="10">
+                            <StackPanel>
+                                <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="新配置" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="IP 地址" />
+                                <TextBox x:Name="NewIpTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="子网掩码" />
+                                <TextBox x:Name="NewMaskTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="网关" />
+                                <TextBox x:Name="NewGatewayTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
+                                <TextBlock Margin="0,12,0,0" FontSize="12" Foreground="#6B7280" Text="首选 DNS" />
+                                <TextBox x:Name="NewDnsTextBox" Margin="0,8,0,0" MinHeight="32" VerticalContentAlignment="Center" TextChanged="ConfigInputChanged_OnChanged" />
+                            </StackPanel>
+                        </Border>
+                    </Grid>
+
+                    <Grid Grid.Row="2" Margin="0,12,0,0">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
@@ -136,26 +126,71 @@
 
                         <TextBlock VerticalAlignment="Center"
                                    FontSize="12"
-                                   Foreground="#991B1B"
-                                   TextWrapping="Wrap"
-                                   Text="系统动作会立即影响远端设备。重启或关机后,当前连接可能马上断开。" />
+                                   Foreground="#6B7280"
+                                   Text="先确认当前配置,再校验新配置,最后再应用到目标接口。" />
 
                         <StackPanel Grid.Column="1" Margin="12,0,0,0" Orientation="Horizontal">
-                            <Button x:Name="RebootButton"
+                            <Button x:Name="ValidateConfigButton"
                                     MinHeight="36"
                                     Padding="14,0"
-                                    Click="RebootButton_OnClick"
-                                    Content="重启设备" />
-                            <Button x:Name="ShutdownButton"
+                                    Click="ValidateConfigButton_OnClick"
+                                    Content="2. 校验配置" />
+                            <Button x:Name="ApplyConfigButton"
                                     Margin="10,0,0,0"
                                     MinHeight="36"
                                     Padding="14,0"
-                                    Click="ShutdownButton_OnClick"
-                                    Content="关闭设备" />
+                                    FontWeight="SemiBold"
+                                    Background="#2563EB"
+                                    Foreground="White"
+                                    BorderBrush="#2563EB"
+                                    Click="ApplyConfigButton_OnClick"
+                                    Content="3. 应用配置" />
                         </StackPanel>
                     </Grid>
-                </Border>
-            </Grid>
+
+                    <Border Grid.Row="3" Margin="0,12,0,0" Padding="14" Background="#FEF2F2" CornerRadius="10">
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+
+                            <TextBlock FontSize="13"
+                                       FontWeight="SemiBold"
+                                       Foreground="#991B1B"
+                                       Text="高级操作" />
+
+                            <StackPanel Grid.Row="1" Margin="0,12,0,0">
+                                <TextBlock FontSize="12"
+                                           Foreground="#991B1B"
+                                           TextWrapping="Wrap"
+                                           Text="重启或关闭设备会立即影响远端设备。执行后,当前连接可能马上断开。" />
+
+                                <StackPanel Margin="0,12,0,0" Orientation="Horizontal">
+                                    <Button x:Name="RebootButton"
+                                            MinHeight="36"
+                                            Padding="14,0"
+                                            FontWeight="SemiBold"
+                                            Background="#FFF7ED"
+                                            Foreground="#9A3412"
+                                            BorderBrush="#FDBA74"
+                                            Click="RebootButton_OnClick"
+                                            Content="重启设备" />
+                                    <Button x:Name="ShutdownButton"
+                                            Margin="10,0,0,0"
+                                            MinHeight="36"
+                                            Padding="14,0"
+                                            FontWeight="SemiBold"
+                                            Background="#DC2626"
+                                            Foreground="White"
+                                            BorderBrush="#DC2626"
+                                            Click="ShutdownButton_OnClick"
+                                            Content="关闭设备" />
+                                </StackPanel>
+                            </StackPanel>
+                        </Grid>
+                    </Border>
+                </Grid>
             </Border>
         </Grid>