Sfoglia il codice sorgente

style(ui): 优化设备详情页样式与交互体验

统一 DataGrid 及文本样式,增加阴影与圆角细节,支持链路状态颜色区分。
yangkaixiang 1 mese fa
parent
commit
b6025b61f3

+ 133 - 61
windows/NetworkTool.Client/DeviceDetailsWindow.xaml

@@ -8,6 +8,64 @@
         MinWidth="900"
         ShowInTaskbar="False"
         WindowStartupLocation="CenterOwner">
+    <Window.Resources>
+        <Style x:Key="ConfigDataGridStyle" TargetType="DataGrid">
+            <Setter Property="MinHeight" Value="88" />
+            <Setter Property="Background" Value="White" />
+            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="BorderThickness" Value="1" />
+            <Setter Property="GridLinesVisibility" Value="None" />
+            <Setter Property="HeadersVisibility" Value="Column" />
+            <Setter Property="RowHeight" Value="36" />
+            <Setter Property="ColumnHeaderHeight" Value="36" />
+            <Setter Property="AlternatingRowBackground" Value="#F9FAFB" />
+            <Setter Property="HorizontalGridLinesBrush" Value="#EEF2F7" />
+            <Setter Property="VerticalGridLinesBrush" Value="#EEF2F7" />
+            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        </Style>
+
+        <Style TargetType="DataGridColumnHeader">
+            <Setter Property="Padding" Value="12,0" />
+            <Setter Property="HorizontalContentAlignment" Value="Center" />
+            <Setter Property="Background" Value="#F3F4F6" />
+            <Setter Property="Foreground" Value="#374151" />
+            <Setter Property="FontWeight" Value="SemiBold" />
+            <Setter Property="BorderBrush" Value="#E5E7EB" />
+            <Setter Property="BorderThickness" Value="0,0,1,1" />
+        </Style>
+
+        <Style TargetType="DataGridCell">
+            <Setter Property="Padding" Value="10,0" />
+            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="BorderBrush" Value="#EEF2F7" />
+            <Setter Property="BorderThickness" Value="0,0,1,1" />
+            <Style.Triggers>
+                <Trigger Property="IsSelected" Value="True">
+                    <Setter Property="Background" Value="#DBEAFE" />
+                    <Setter Property="Foreground" Value="#111827" />
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+
+        <Style x:Key="SectionTitleStyle" TargetType="TextBlock">
+            <Setter Property="FontSize" Value="13" />
+            <Setter Property="FontWeight" Value="SemiBold" />
+            <Setter Property="Foreground" Value="#111827" />
+        </Style>
+
+        <Style x:Key="ConfigDataGridTextStyle" TargetType="TextBlock">
+            <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="Padding" Value="2,0" />
+        </Style>
+
+        <Style x:Key="ConfigDataGridEditingTextStyle" TargetType="TextBox">
+            <Setter Property="VerticalContentAlignment" Value="Center" />
+            <Setter Property="Padding" Value="2,0" />
+            <Setter Property="BorderThickness" Value="0" />
+        </Style>
+    </Window.Resources>
     <Grid Background="#F5F7FB">
         <ScrollViewer x:Name="ContentScrollViewer"
                       Margin="20"
@@ -20,7 +78,10 @@
                 <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
 
-            <Border Grid.Row="0" Padding="14" Background="White" CornerRadius="10">
+            <Border Grid.Row="0" Padding="16" Background="White" BorderBrush="#E5E7EB" BorderThickness="1" CornerRadius="12">
+                <Border.Effect>
+                    <DropShadowEffect BlurRadius="18" Direction="270" Opacity="0.08" ShadowDepth="6" Color="#111827" />
+                </Border.Effect>
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
@@ -34,9 +95,9 @@
                         <ColumnDefinition Width="Auto" />
                     </Grid.ColumnDefinitions>
 
-                    <TextBlock FontSize="13"
+                    <TextBlock FontSize="16"
                                FontWeight="SemiBold"
-                               Foreground="#111827"
+                               Foreground="#0F172A"
                                Text="网络配置" />
 
                     <Button x:Name="ReloadInterfaceConfigButton"
@@ -50,11 +111,22 @@
                     <ItemsControl x:Name="InterfacesItemsControl" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,12,0,0">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <Border Margin="0,0,0,12" Padding="14" Background="#F9FAFB" BorderBrush="#D1D5DB" BorderThickness="1" CornerRadius="10">
-                                    <StackPanel>
+                                 <Border Margin="0,0,0,14" Padding="14" Background="#F8FAFC" BorderBrush="#D8DEE9" BorderThickness="1" CornerRadius="12">
+                                     <StackPanel>
                                         <StackPanel Orientation="Horizontal">
-                                            <TextBlock FontSize="15" FontWeight="SemiBold" Foreground="#111827" Text="{Binding SystemName}" />
-                                            <TextBlock Margin="10,2,0,0" FontSize="12" Foreground="#6B7280" Text="{Binding StatusSummary}" />
+                                             <TextBlock FontSize="15" FontWeight="SemiBold" Foreground="#0F172A" Text="{Binding SystemName}" />
+                                            <TextBlock Margin="10,2,0,0" FontSize="12" Text="{Binding StatusSummary}">
+                                                <TextBlock.Style>
+                                                    <Style TargetType="TextBlock">
+                                                        <Setter Property="Foreground" Value="#6B7280" />
+                                                        <Style.Triggers>
+                                                            <DataTrigger Binding="{Binding LinkUp}" Value="True">
+                                                                <Setter Property="Foreground" Value="#16A34A" />
+                                                            </DataTrigger>
+                                                        </Style.Triggers>
+                                                    </Style>
+                                                </TextBlock.Style>
+                                            </TextBlock>
                                         </StackPanel>
                                         <CheckBox Margin="0,12,0,0" VerticalContentAlignment="Center" IsChecked="{Binding Dhcp4, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Checked="ConfigModeChanged_OnChanged" Unchecked="ConfigModeChanged_OnChanged" Content="使用 DHCP 自动获取 IPv4 配置" />
                                         <Grid Margin="0,12,0,0">
@@ -64,38 +136,38 @@
                                                 <RowDefinition Height="Auto" />
                                             </Grid.RowDefinitions>
 
-                                            <Border Padding="10" Background="White" BorderBrush="#E5E7EB" BorderThickness="1" CornerRadius="8">
-                                                <Grid>
+                                             <Border Padding="12" Background="White" BorderBrush="#E2E8F0" BorderThickness="1" CornerRadius="10">
+                                                 <Grid>
                                                     <Grid.RowDefinitions>
                                                         <RowDefinition Height="Auto" />
                                                         <RowDefinition Height="*" />
                                                         <RowDefinition Height="Auto" />
                                                     </Grid.RowDefinitions>
-                                                    <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="IP 地址" />
-                                                    <DataGrid Grid.Row="1" Margin="0,8,0,0" ItemsSource="{Binding Addresses}" AutoGenerateColumns="False" CanUserAddRows="False" HeadersVisibility="Column" CellEditEnding="ConfigGrid_OnCellEditEnding" PreviewMouseWheel="DataGrid_OnPreviewMouseWheel">
-                                                        <DataGrid.Style>
-                                                            <Style TargetType="DataGrid">
-                                                                <Setter Property="IsEnabled" Value="True" />
+                                                     <TextBlock Style="{StaticResource SectionTitleStyle}" Text="IP 地址" />
+                                                     <DataGrid Grid.Row="1" Margin="18,10,0,0" ItemsSource="{Binding Addresses}" AutoGenerateColumns="False" CanUserAddRows="False" HeadersVisibility="Column" CellEditEnding="ConfigGrid_OnCellEditEnding" PreviewMouseWheel="DataGrid_OnPreviewMouseWheel">
+                                                         <DataGrid.Style>
+                                                             <Style TargetType="DataGrid" BasedOn="{StaticResource ConfigDataGridStyle}">
+                                                                 <Setter Property="IsEnabled" Value="True" />
                                                                 <Style.Triggers>
                                                                     <DataTrigger Binding="{Binding Dhcp4}" Value="True">
                                                                         <Setter Property="IsEnabled" Value="False" />
                                                                     </DataTrigger>
                                                                 </Style.Triggers>
                                                             </Style>
-                                                        </DataGrid.Style>
-                                                        <DataGrid.Columns>
-                                                            <DataGridTextColumn Header="IP 地址" Binding="{Binding IP, UpdateSourceTrigger=PropertyChanged}" Width="*" />
-                                                            <DataGridTextColumn Header="子网掩码" Binding="{Binding Mask, UpdateSourceTrigger=PropertyChanged}" Width="120" />
-                                                            <DataGridTemplateColumn Header="操作" Width="58">
-                                                                <DataGridTemplateColumn.CellTemplate>
-                                                                    <DataTemplate>
-                                                                        <Button Padding="8,0" Click="DeleteAddressButton_OnClick" Content="删除" />
-                                                                    </DataTemplate>
-                                                                </DataGridTemplateColumn.CellTemplate>
-                                                            </DataGridTemplateColumn>
+                                                         </DataGrid.Style>
+                                                         <DataGrid.Columns>
+                                                             <DataGridTextColumn Header="IP 地址" Binding="{Binding IP, UpdateSourceTrigger=PropertyChanged}" ElementStyle="{StaticResource ConfigDataGridTextStyle}" EditingElementStyle="{StaticResource ConfigDataGridEditingTextStyle}" Width="*" />
+                                                             <DataGridTextColumn Header="子网掩码" Binding="{Binding Mask, UpdateSourceTrigger=PropertyChanged}" ElementStyle="{StaticResource ConfigDataGridTextStyle}" EditingElementStyle="{StaticResource ConfigDataGridEditingTextStyle}" Width="*" />
+                                                             <DataGridTemplateColumn Header="操作" Width="72">
+                                                                 <DataGridTemplateColumn.CellTemplate>
+                                                                     <DataTemplate>
+                                                                         <Button HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="24" Padding="10,0" Click="DeleteAddressButton_OnClick" Content="删除" />
+                                                                     </DataTemplate>
+                                                                 </DataGridTemplateColumn.CellTemplate>
+                                                             </DataGridTemplateColumn>
                                                         </DataGrid.Columns>
                                                     </DataGrid>
-                                                    <Button Grid.Row="2" Margin="0,10,0,0" HorizontalAlignment="Left" MinHeight="30" Padding="12,0" Click="AddAddressButton_OnClick" Content="+ 添加 IP">
+                                                    <Button Grid.Row="2" Margin="18,10,0,0" HorizontalAlignment="Left" MinHeight="30" Padding="12,0" Click="AddAddressButton_OnClick" Content="+ 添加 IP">
                                                         <Button.Style>
                                                             <Style TargetType="Button">
                                                                 <Setter Property="IsEnabled" Value="True" />
@@ -110,8 +182,8 @@
                                                 </Grid>
                                             </Border>
 
-                                            <Border Grid.Row="1" Margin="0,12,0,0" Padding="10" Background="White" BorderBrush="#E5E7EB" BorderThickness="1" CornerRadius="8">
-                                                <Grid>
+                                             <Border Grid.Row="1" Margin="0,12,0,0" Padding="12" Background="White" BorderBrush="#E2E8F0" BorderThickness="1" CornerRadius="10">
+                                                 <Grid>
                                                     <Grid.RowDefinitions>
                                                         <RowDefinition Height="Auto" />
                                                         <RowDefinition Height="Auto" />
@@ -119,8 +191,8 @@
                                                         <RowDefinition Height="Auto" />
                                                     </Grid.RowDefinitions>
                                                     <StackPanel>
-                                                        <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="网关" />
-                                                        <StackPanel Margin="0,8,0,12" Orientation="Horizontal">
+                                                         <TextBlock Style="{StaticResource SectionTitleStyle}" Text="网关" />
+                                                        <StackPanel Margin="18,8,0,12" Orientation="Horizontal">
                                                             <TextBlock VerticalAlignment="Center" FontSize="12" Foreground="#6B7280" Text="默认网关:" />
                                                             <CheckBox Margin="8,0,0,0" VerticalContentAlignment="Center" IsChecked="{Binding DefaultGatewayEnabled, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Checked="GatewayOrRouteModeChanged_OnChanged" Unchecked="GatewayOrRouteModeChanged_OnChanged" Content="启用" />
                                                             <TextBox Margin="12,0,0,0" MinWidth="220" MinHeight="30" VerticalContentAlignment="Center" Text="{Binding DefaultGateway, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" TextChanged="ConfigInputChanged_OnChanged">
@@ -140,14 +212,14 @@
                                                             </TextBox>
                                                         </StackPanel>
                                                     </StackPanel>
-                                                    <StackPanel Grid.Row="1" Margin="0,0,0,8" Orientation="Horizontal">
+                                                    <StackPanel Grid.Row="1" Margin="18,0,0,8" Orientation="Horizontal">
                                                         <TextBlock VerticalAlignment="Center" FontSize="12" Foreground="#6B7280" Text="自定义路由:" />
                                                         <CheckBox Margin="8,0,0,0" VerticalContentAlignment="Center" IsChecked="{Binding CustomRoutesEnabled, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Checked="GatewayOrRouteModeChanged_OnChanged" Unchecked="GatewayOrRouteModeChanged_OnChanged" Content="启用" />
                                                     </StackPanel>
-                                                    <DataGrid Grid.Row="2" Margin="0,8,0,0" ItemsSource="{Binding Routes}" AutoGenerateColumns="False" CanUserAddRows="False" HeadersVisibility="Column" CellEditEnding="ConfigGrid_OnCellEditEnding" PreviewMouseWheel="DataGrid_OnPreviewMouseWheel">
-                                                        <DataGrid.Style>
-                                                            <Style TargetType="DataGrid">
-                                                                <Setter Property="Visibility" Value="Collapsed" />
+                                                     <DataGrid Grid.Row="2" Margin="18,8,0,0" ItemsSource="{Binding Routes}" AutoGenerateColumns="False" CanUserAddRows="False" HeadersVisibility="Column" CellEditEnding="ConfigGrid_OnCellEditEnding" PreviewMouseWheel="DataGrid_OnPreviewMouseWheel">
+                                                         <DataGrid.Style>
+                                                             <Style TargetType="DataGrid" BasedOn="{StaticResource ConfigDataGridStyle}">
+                                                                 <Setter Property="Visibility" Value="Collapsed" />
                                                                 <Style.Triggers>
                                                                     <DataTrigger Binding="{Binding CustomRoutesEnabled}" Value="True">
                                                                         <Setter Property="Visibility" Value="Visible" />
@@ -155,20 +227,20 @@
                                                                 </Style.Triggers>
                                                             </Style>
                                                         </DataGrid.Style>
-                                                        <DataGrid.Columns>
-                                                            <DataGridTextColumn Header="目标网段" Binding="{Binding To, UpdateSourceTrigger=PropertyChanged}" Width="*" />
-                                                            <DataGridTextColumn Header="子网掩码" Binding="{Binding Mask, UpdateSourceTrigger=PropertyChanged}" Width="120" />
-                                                            <DataGridTextColumn Header="网关地址" Binding="{Binding Via, UpdateSourceTrigger=PropertyChanged}" Width="*" />
-                                                            <DataGridTemplateColumn Header="操作" Width="58">
-                                                                <DataGridTemplateColumn.CellTemplate>
-                                                                    <DataTemplate>
-                                                                        <Button Padding="8,0" Click="DeleteRouteButton_OnClick" Content="删除" />
-                                                                    </DataTemplate>
-                                                                </DataGridTemplateColumn.CellTemplate>
-                                                            </DataGridTemplateColumn>
+                                                         <DataGrid.Columns>
+                                                             <DataGridTextColumn Header="目标网段" Binding="{Binding To, UpdateSourceTrigger=PropertyChanged}" ElementStyle="{StaticResource ConfigDataGridTextStyle}" EditingElementStyle="{StaticResource ConfigDataGridEditingTextStyle}" Width="*" />
+                                                             <DataGridTextColumn Header="子网掩码" Binding="{Binding Mask, UpdateSourceTrigger=PropertyChanged}" ElementStyle="{StaticResource ConfigDataGridTextStyle}" EditingElementStyle="{StaticResource ConfigDataGridEditingTextStyle}" Width="*" />
+                                                             <DataGridTextColumn Header="网关地址" Binding="{Binding Via, UpdateSourceTrigger=PropertyChanged}" ElementStyle="{StaticResource ConfigDataGridTextStyle}" EditingElementStyle="{StaticResource ConfigDataGridEditingTextStyle}" Width="*" />
+                                                             <DataGridTemplateColumn Header="操作" Width="72">
+                                                                 <DataGridTemplateColumn.CellTemplate>
+                                                                     <DataTemplate>
+                                                                         <Button HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="24" Padding="10,0" Click="DeleteRouteButton_OnClick" Content="删除" />
+                                                                     </DataTemplate>
+                                                                 </DataGridTemplateColumn.CellTemplate>
+                                                             </DataGridTemplateColumn>
                                                         </DataGrid.Columns>
                                                     </DataGrid>
-                                                    <Button Grid.Row="3" Margin="0,10,0,0" HorizontalAlignment="Left" MinHeight="30" Padding="12,0" Click="AddRouteButton_OnClick" Content="+ 添加路由">
+                                                    <Button Grid.Row="3" Margin="18,10,0,0" HorizontalAlignment="Left" MinHeight="30" Padding="12,0" Click="AddRouteButton_OnClick" Content="+ 添加路由">
                                                         <Button.Style>
                                                             <Style TargetType="Button">
                                                                 <Setter Property="Visibility" Value="Collapsed" />
@@ -183,27 +255,27 @@
                                                 </Grid>
                                             </Border>
 
-                                            <Border Grid.Row="2" Margin="0,12,0,0" Padding="10" Background="White" BorderBrush="#E5E7EB" BorderThickness="1" CornerRadius="8">
-                                                <Grid>
+                                             <Border Grid.Row="2" Margin="0,12,0,0" Padding="12" Background="White" BorderBrush="#E2E8F0" BorderThickness="1" CornerRadius="10">
+                                                 <Grid>
                                                     <Grid.RowDefinitions>
                                                         <RowDefinition Height="Auto" />
                                                         <RowDefinition Height="*" />
                                                         <RowDefinition Height="Auto" />
                                                     </Grid.RowDefinitions>
-                                                    <TextBlock FontSize="13" FontWeight="SemiBold" Foreground="#111827" Text="DNS" />
-                                                    <DataGrid Grid.Row="1" Margin="0,8,0,0" ItemsSource="{Binding Dns}" AutoGenerateColumns="False" CanUserAddRows="False" HeadersVisibility="Column" CellEditEnding="ConfigGrid_OnCellEditEnding" PreviewMouseWheel="DataGrid_OnPreviewMouseWheel">
-                                                        <DataGrid.Columns>
-                                                            <DataGridTextColumn Header="DNS 地址" Binding="{Binding Address, UpdateSourceTrigger=PropertyChanged}" Width="*" />
-                                                            <DataGridTemplateColumn Header="操作" Width="58">
-                                                                <DataGridTemplateColumn.CellTemplate>
-                                                                    <DataTemplate>
-                                                                        <Button Padding="8,0" Click="DeleteDnsButton_OnClick" Content="删除" />
-                                                                    </DataTemplate>
-                                                                </DataGridTemplateColumn.CellTemplate>
-                                                            </DataGridTemplateColumn>
+                                                     <TextBlock Style="{StaticResource SectionTitleStyle}" Text="DNS" />
+                                                     <DataGrid Grid.Row="1" Margin="18,10,0,0" Style="{StaticResource ConfigDataGridStyle}" ItemsSource="{Binding Dns}" AutoGenerateColumns="False" CanUserAddRows="False" HeadersVisibility="Column" CellEditEnding="ConfigGrid_OnCellEditEnding" PreviewMouseWheel="DataGrid_OnPreviewMouseWheel">
+                                                         <DataGrid.Columns>
+                                                             <DataGridTextColumn Header="DNS 地址" Binding="{Binding Address, UpdateSourceTrigger=PropertyChanged}" ElementStyle="{StaticResource ConfigDataGridTextStyle}" EditingElementStyle="{StaticResource ConfigDataGridEditingTextStyle}" Width="*" />
+                                                             <DataGridTemplateColumn Header="操作" Width="72">
+                                                                 <DataGridTemplateColumn.CellTemplate>
+                                                                     <DataTemplate>
+                                                                         <Button HorizontalAlignment="Center" VerticalAlignment="Center" MinHeight="24" Padding="10,0" Click="DeleteDnsButton_OnClick" Content="删除" />
+                                                                     </DataTemplate>
+                                                                 </DataGridTemplateColumn.CellTemplate>
+                                                             </DataGridTemplateColumn>
                                                         </DataGrid.Columns>
                                                     </DataGrid>
-                                                    <Button Grid.Row="2" Margin="0,10,0,0" HorizontalAlignment="Left" MinHeight="30" Padding="12,0" Click="AddDnsButton_OnClick" Content="+ 添加 DNS" />
+                                                    <Button Grid.Row="2" Margin="18,10,0,0" HorizontalAlignment="Left" MinHeight="30" Padding="12,0" Click="AddDnsButton_OnClick" Content="+ 添加 DNS" />
                                                 </Grid>
                                             </Border>
                                         </Grid>

+ 2 - 0
windows/NetworkTool.Client/DeviceDetailsWindow.xaml.cs

@@ -1114,10 +1114,12 @@ public partial class DeviceDetailsWindow : Window
         {
             SystemName = info.SystemName;
             StatusSummary = info.StatusSummary;
+            LinkUp = info.LinkUp;
         }
 
         public string SystemName { get; }
         public string StatusSummary { get; }
+        public bool LinkUp { get; }
         public ObservableCollection<EditableAddress> Addresses { get; } = [];
         public ObservableCollection<EditableRoute> Routes { get; } = [];
         public ObservableCollection<EditableDns> Dns { get; } = [];