工业风格全面优化 - 设计系统/语义Token/交互反馈/全页面统一

src/YZWater.Avalonia/App.axaml

@@ -1,11 +1,19 @@
 <Application xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="YZWater.Avalonia.App"
-             RequestedThemeVariant="Default">
-    <!-- "Default" ThemeVariant follows system theme, "Light" or "Dark" are other options -->
+             RequestedThemeVariant="Dark">
 
     <Application.Styles>
         <FluentTheme />
+        <StyleInclude Source="Themes/IndustrialStyles.axaml"/>
     </Application.Styles>
 
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceInclude Source="Themes/IndustrialTheme.axaml"/>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </Application.Resources>
+
 </Application>

src/YZWater.Avalonia/Themes/IndustrialStyles.axaml

@@ -0,0 +1,96 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- ═══════════════════════════════════════════════════════════════
+         YZWater3 工业风格控件样式
+         ═══════════════════════════════════════════════════════════════ -->
+
+    <!-- ─── 按钮: Success ─── -->
+    <Style Selector="Button.btn-success">
+        <Setter Property="Background" Value="#00897B"/>
+        <Setter Property="Foreground" Value="#E6EDF3"/>
+        <Setter Property="BorderBrush" Value="#00897B"/>
+        <Setter Property="FontFamily" Value="Consolas, monospace"/>
+        <Setter Property="FontSize" Value="11"/>
+        <Setter Property="Padding" Value="12,6"/>
+        <Setter Property="CornerRadius" Value="2"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="MinHeight" Value="32"/>
+    </Style>
+    <Style Selector="Button.btn-success:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="#009688"/>
+    </Style>
+    <Style Selector="Button.btn-success:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="#00796B"/>
+    </Style>
+    <Style Selector="Button.btn-success:disabled">
+        <Setter Property="Opacity" Value="0.4"/>
+    </Style>
+
+    <!-- ─── 按钮: Danger ─── -->
+    <Style Selector="Button.btn-danger">
+        <Setter Property="Background" Value="#1C2333"/>
+        <Setter Property="Foreground" Value="#EF4444"/>
+        <Setter Property="BorderBrush" Value="#EF4444"/>
+        <Setter Property="FontFamily" Value="Consolas, monospace"/>
+        <Setter Property="FontSize" Value="11"/>
+        <Setter Property="Padding" Value="12,6"/>
+        <Setter Property="CornerRadius" Value="2"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="MinHeight" Value="32"/>
+    </Style>
+    <Style Selector="Button.btn-danger:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="#2D0000"/>
+    </Style>
+    <Style Selector="Button.btn-danger:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="#3D0000"/>
+    </Style>
+    <Style Selector="Button.btn-danger:disabled">
+        <Setter Property="Opacity" Value="0.4"/>
+    </Style>
+
+    <!-- ─── 按钮: Info ─── -->
+    <Style Selector="Button.btn-info">
+        <Setter Property="Background" Value="#1C2333"/>
+        <Setter Property="Foreground" Value="#3B82F6"/>
+        <Setter Property="BorderBrush" Value="#3B82F6"/>
+        <Setter Property="FontFamily" Value="Consolas, monospace"/>
+        <Setter Property="FontSize" Value="11"/>
+        <Setter Property="Padding" Value="12,6"/>
+        <Setter Property="CornerRadius" Value="2"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="MinHeight" Value="32"/>
+    </Style>
+    <Style Selector="Button.btn-info:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="#1A2744"/>
+    </Style>
+    <Style Selector="Button.btn-info:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="#1E3050"/>
+    </Style>
+    <Style Selector="Button.btn-info:disabled">
+        <Setter Property="Opacity" Value="0.4"/>
+    </Style>
+
+    <!-- ─── 按钮: Warning ─── -->
+    <Style Selector="Button.btn-warning">
+        <Setter Property="Background" Value="#1C2333"/>
+        <Setter Property="Foreground" Value="#F59E0B"/>
+        <Setter Property="BorderBrush" Value="#F59E0B"/>
+        <Setter Property="FontFamily" Value="Consolas, monospace"/>
+        <Setter Property="FontSize" Value="11"/>
+        <Setter Property="Padding" Value="12,6"/>
+        <Setter Property="CornerRadius" Value="2"/>
+        <Setter Property="Cursor" Value="Hand"/>
+        <Setter Property="MinHeight" Value="32"/>
+    </Style>
+    <Style Selector="Button.btn-warning:pointerover /template/ ContentPresenter">
+        <Setter Property="Background" Value="#2D2000"/>
+    </Style>
+    <Style Selector="Button.btn-warning:pressed /template/ ContentPresenter">
+        <Setter Property="Background" Value="#3D2A00"/>
+    </Style>
+    <Style Selector="Button.btn-warning:disabled">
+        <Setter Property="Opacity" Value="0.4"/>
+    </Style>
+
+</Styles>

src/YZWater.Avalonia/Themes/IndustrialTheme.axaml

@@ -0,0 +1,56 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
+    <!-- ═══════════════════════════════════════════════════════════════
+         YZWater3 工业风格设计系统 - 语义化颜色 Token
+         ═══════════════════════════════════════════════════════════════ -->
+
+    <!-- 背景层级: AppBg → SurfaceBg → PanelBg → CardBg -->
+    <Color x:Key="AppBgColor">#0A0E14</Color>
+    <Color x:Key="SurfaceBgColor">#111820</Color>
+    <Color x:Key="PanelBgColor">#0D1117</Color>
+    <Color x:Key="CardBgColor">#161B22</Color>
+
+    <!-- 边框/分隔线 -->
+    <Color x:Key="BorderColor">#1C2333</Color>
+    <Color x:Key="DividerColor">#21262D</Color>
+
+    <!-- 文字层级 -->
+    <Color x:Key="TextPrimaryColor">#E6EDF3</Color>
+    <Color x:Key="TextSecondaryColor">#9CA3AF</Color>
+    <Color x:Key="TextTertiaryColor">#6B7280</Color>
+    <Color x:Key="TextDisabledColor">#4B5563</Color>
+
+    <!-- 语义状态色 -->
+    <Color x:Key="SuccessColor">#00897B</Color>
+    <Color x:Key="WarningColor">#F59E0B</Color>
+    <Color x:Key="DangerColor">#EF4444</Color>
+    <Color x:Key="InfoColor">#3B82F6</Color>
+    <Color x:Key="WaterColor">#0288D1</Color>
+
+    <!-- 设备状态色 -->
+    <Color x:Key="DeviceRunningColor">#00897B</Color>
+    <Color x:Key="DeviceStoppedColor">#4B5563</Color>
+
+    <!-- 画刷 -->
+    <SolidColorBrush x:Key="AppBgBrush" Color="{StaticResource AppBgColor}"/>
+    <SolidColorBrush x:Key="SurfaceBgBrush" Color="{StaticResource SurfaceBgColor}"/>
+    <SolidColorBrush x:Key="PanelBgBrush" Color="{StaticResource PanelBgColor}"/>
+    <SolidColorBrush x:Key="CardBgBrush" Color="{StaticResource CardBgColor}"/>
+    <SolidColorBrush x:Key="BorderBrush" Color="{StaticResource BorderColor}"/>
+    <SolidColorBrush x:Key="DividerBrush" Color="{StaticResource DividerColor}"/>
+    <SolidColorBrush x:Key="TextPrimaryBrush" Color="{StaticResource TextPrimaryColor}"/>
+    <SolidColorBrush x:Key="TextSecondaryBrush" Color="{StaticResource TextSecondaryColor}"/>
+    <SolidColorBrush x:Key="TextTertiaryBrush" Color="{StaticResource TextTertiaryColor}"/>
+    <SolidColorBrush x:Key="TextDisabledBrush" Color="{StaticResource TextDisabledColor}"/>
+    <SolidColorBrush x:Key="SuccessBrush" Color="{StaticResource SuccessColor}"/>
+    <SolidColorBrush x:Key="WarningBrush" Color="{StaticResource WarningColor}"/>
+    <SolidColorBrush x:Key="DangerBrush" Color="{StaticResource DangerColor}"/>
+    <SolidColorBrush x:Key="InfoBrush" Color="{StaticResource InfoColor}"/>
+    <SolidColorBrush x:Key="WaterBrush" Color="{StaticResource WaterColor}"/>
+
+    <!-- 字体 -->
+    <FontFamily x:Key="MonoFont">Consolas, Courier New, monospace</FontFamily>
+    <FontFamily x:Key="UIFont">Microsoft YaHei, Segoe UI, sans-serif</FontFamily>
+
+</ResourceDictionary>

src/YZWater.Avalonia/Views/ViewBView.axaml

@@ -8,70 +8,115 @@
         <vm:ViewBViewModel/>
     </UserControl.DataContext>
 
-    <Border Background="#0A0E14">
-        <ScrollViewer>
-            <Grid RowDefinitions="Auto,Auto,Auto" Margin="20">
-                <!-- PLC 连接设置 -->
-                <Border Grid.Row="0" Background="#2d2d44" CornerRadius="8" Padding="15" Margin="0,0,0,15">
-                    <StackPanel>
-                        <TextBlock Text="PLC 连接设置" FontWeight="Bold" FontSize="18" Foreground="White" Margin="0,0,0,15"/>
-                        <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto" Margin="10">
-                            <!-- IP 地址 -->
-                            <TextBlock Grid.Row="0" Grid.Column="0" Text="IP 地址:" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                            <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding PlcIp}" Margin="5"/>
+    <Border Background="{DynamicResource AppBgBrush}">
+        <Grid RowDefinitions="48,*,32">
+            <!-- 顶部 -->
+            <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,0,1">
+                <Grid Margin="16,0">
+                    <StackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
+                        <Border Background="{DynamicResource InfoBrush}" Width="3" Height="20" CornerRadius="1"/>
+                        <TextBlock Text="PARAMETERS" FontFamily="{DynamicResource MonoFont}" FontSize="16" FontWeight="Bold"
+                                   Foreground="{DynamicResource TextPrimaryBrush}" VerticalAlignment="Center"/>
+                        <TextBlock Text="系统参数配置" FontSize="12" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                    </StackPanel>
+                </Grid>
+            </Border>
+
+            <!-- 内容 -->
+            <ScrollViewer Grid.Row="1" Margin="8,4">
+                <Grid ColumnDefinitions="*,*" RowDefinitions="Auto,Auto">
+
+                    <!-- PLC 连接设置 -->
+                    <Border Grid.Row="0" Grid.Column="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,0,4,4">
+                        <StackPanel>
+                            <StackPanel Orientation="Horizontal" Spacing="6" Margin="0,0,0,12">
+                                <Border Background="{DynamicResource InfoBrush}" Width="3" Height="14" CornerRadius="1"/>
+                                <TextBlock Text="PLC CONNECTION" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
+                                           Foreground="{DynamicResource TextSecondaryBrush}"/>
+                            </StackPanel>
+                            <Grid ColumnDefinitions="100,*" RowDefinitions="Auto,Auto,Auto,Auto" Margin="4,0">
+                                <TextBlock Grid.Row="0" Grid.Column="0" Text="IP ADDRESS" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding PlcIp}" Margin="0,4"/>
+
+                                <TextBlock Grid.Row="1" Grid.Column="0" Text="PORT" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <NumericUpDown Grid.Row="1" Grid.Column="1" Value="{Binding PlcPort}" Minimum="1" Maximum="65535" Margin="0,4"/>
 
-                            <!-- 端口 -->
-                            <TextBlock Grid.Row="1" Grid.Column="0" Text="端口:" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                            <NumericUpDown Grid.Row="1" Grid.Column="1" Value="{Binding PlcPort}"
-                                           Minimum="1" Maximum="65535" Margin="5"/>
+                                <TextBlock Grid.Row="2" Grid.Column="0" Text="AUTO CONN" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <CheckBox Grid.Row="2" Grid.Column="1" IsChecked="{Binding AutoConnect}" Margin="0,4"/>
 
-                            <!-- 自动连接 -->
-                            <TextBlock Grid.Row="2" Grid.Column="0" Text="自动连接:" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                            <CheckBox Grid.Row="2" Grid.Column="1" IsChecked="{Binding AutoConnect}" Margin="5"/>
+                                <TextBlock Grid.Row="3" Grid.Column="0" Text="STATUS" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Spacing="10" Margin="0,4">
+                                    <TextBlock Text="{Binding ConnectionStatus}" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextSecondaryBrush}" VerticalAlignment="Center"/>
+                                    <Button Content="TEST" Command="{Binding TestConnectionCommand}" Classes="btn-info"
+                                            IsEnabled="{Binding !IsConnecting}"/>
+                                </StackPanel>
+                            </Grid>
+                        </StackPanel>
+                    </Border>
 
-                            <!-- 连接状态 -->
-                            <TextBlock Grid.Row="3" Grid.Column="0" Text="状态:" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                            <StackPanel Grid.Row="3" Grid.Column="1" Orientation="Horizontal" Spacing="10" Margin="5">
-                                <TextBlock Text="{Binding ConnectionStatus}" VerticalAlignment="Center" Foreground="White"/>
-                                <Button Content="测试连接" Command="{Binding TestConnectionCommand}"
-                                        IsEnabled="{Binding !IsConnecting}"/>
+                    <!-- 报警阈值设置 -->
+                    <Border Grid.Row="0" Grid.Column="1" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="4,0,0,4">
+                        <StackPanel>
+                            <StackPanel Orientation="Horizontal" Spacing="6" Margin="0,0,0,12">
+                                <Border Background="{DynamicResource WarningBrush}" Width="3" Height="14" CornerRadius="1"/>
+                                <TextBlock Text="ALARM THRESHOLDS" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
+                                           Foreground="{DynamicResource TextSecondaryBrush}"/>
                             </StackPanel>
-                        </Grid>
-                    </StackPanel>
-                </Border>
+                            <Grid ColumnDefinitions="120,*,60" RowDefinitions="Auto,Auto,Auto" Margin="4,0">
+                                <TextBlock Grid.Row="0" Grid.Column="0" Text="LEVEL HIGH" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <NumericUpDown Grid.Row="0" Grid.Column="1" Value="{Binding LevelHighAlarm}" Minimum="0" Maximum="100" FormatString="F1" Margin="0,4"/>
+                                <TextBlock Grid.Row="0" Grid.Column="2" Text="%" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
 
-                <!-- 报警阈值设置 -->
-                <Border Grid.Row="1" Background="#2d2d44" CornerRadius="8" Padding="15" Margin="0,0,0,15">
-                    <StackPanel>
-                        <TextBlock Text="报警阈值设置" FontWeight="Bold" FontSize="18" Foreground="White" Margin="0,0,0,15"/>
-                        <Grid ColumnDefinitions="Auto,*,Auto,*" RowDefinitions="Auto,Auto,Auto" Margin="10">
-                            <!-- 液位高报警 -->
-                            <TextBlock Grid.Row="0" Grid.Column="0" Text="液位高报警:" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                            <NumericUpDown Grid.Row="0" Grid.Column="1" Value="{Binding LevelHighAlarm}"
-                                           Minimum="0" Maximum="100" FormatString="F1" Margin="5"/>
-                            <TextBlock Grid.Row="0" Grid.Column="2" Text="%" VerticalAlignment="Center" Margin="5" Foreground="White"/>
+                                <TextBlock Grid.Row="1" Grid.Column="0" Text="LEVEL LOW" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <NumericUpDown Grid.Row="1" Grid.Column="1" Value="{Binding LevelLowAlarm}" Minimum="0" Maximum="100" FormatString="F1" Margin="0,4"/>
+                                <TextBlock Grid.Row="1" Grid.Column="2" Text="%" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
 
-                            <!-- 液位低报警 -->
-                            <TextBlock Grid.Row="1" Grid.Column="0" Text="液位低报警:" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                            <NumericUpDown Grid.Row="1" Grid.Column="1" Value="{Binding LevelLowAlarm}"
-                                           Minimum="0" Maximum="100" FormatString="F1" Margin="5"/>
-                            <TextBlock Grid.Row="1" Grid.Column="2" Text="%" VerticalAlignment="Center" Margin="5" Foreground="White"/>
+                                <TextBlock Grid.Row="2" Grid.Column="0" Text="FLOW HIGH" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <NumericUpDown Grid.Row="2" Grid.Column="1" Value="{Binding FlowHighAlarm}" Minimum="0" Maximum="1000" FormatString="F1" Margin="0,4"/>
+                                <TextBlock Grid.Row="2" Grid.Column="2" Text="m³/h" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                            </Grid>
+                        </StackPanel>
+                    </Border>
 
-                            <!-- 流量高报警 -->
-                            <TextBlock Grid.Row="2" Grid.Column="0" Text="流量高报警:" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                            <NumericUpDown Grid.Row="2" Grid.Column="1" Value="{Binding FlowHighAlarm}"
-                                           Minimum="0" Maximum="1000" FormatString="F1" Margin="5"/>
-                            <TextBlock Grid.Row="2" Grid.Column="2" Text="m³/h" VerticalAlignment="Center" Margin="5" Foreground="White"/>
-                        </Grid>
-                    </StackPanel>
-                </Border>
+                    <!-- 泵频率设置 -->
+                    <Border Grid.Row="1" Grid.Column="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,4,4,0">
+                        <StackPanel>
+                            <StackPanel Orientation="Horizontal" Spacing="6" Margin="0,0,0,12">
+                                <Border Background="{DynamicResource SuccessBrush}" Width="3" Height="14" CornerRadius="1"/>
+                                <TextBlock Text="PUMP SETTINGS" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
+                                           Foreground="{DynamicResource TextSecondaryBrush}"/>
+                            </StackPanel>
+                            <Grid ColumnDefinitions="120,*,60" Margin="4,0">
+                                <TextBlock Grid.Column="0" Text="FREQUENCY" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                                <NumericUpDown Grid.Column="1" Value="{Binding PumpFrequency}" Minimum="0" Maximum="100" FormatString="F1" Margin="0,4"/>
+                                <TextBlock Grid.Column="2" Text="Hz" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                            </Grid>
+                        </StackPanel>
+                    </Border>
+
+                    <!-- 操作按钮 -->
+                    <Border Grid.Row="1" Grid.Column="1" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="4,4,0,0">
+                        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="12">
+                            <TextBlock Text="ACTIONS" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
+                                       Foreground="{DynamicResource TextSecondaryBrush}" HorizontalAlignment="Center"/>
+                            <StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Center">
+                                <Button Content="SAVE CONFIG" Command="{Binding SaveConfigCommand}" Classes="btn-success"/>
+                                <Button Content="RESET DEFAULT" Command="{Binding ResetToDefaultCommand}" Classes="btn-warning"/>
+                            </StackPanel>
+                        </StackPanel>
+                    </Border>
+                </Grid>
+            </ScrollViewer>
 
-                <!-- 操作按钮 -->
-                <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center" Spacing="20">
-                    <Button Content="保存设置" Command="{Binding SaveConfigCommand}" Width="120" Height="35"/>
-                    <Button Content="恢复默认" Command="{Binding ResetToDefaultCommand}" Width="120" Height="35"/>
-                </StackPanel>
-            </Grid>
-        </ScrollViewer>
+            <!-- 底部状态栏 -->
+            <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
+                <TextBlock Text="CONFIG v1.0" FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                           Foreground="{DynamicResource TextDisabledBrush}" VerticalAlignment="Center" Margin="16,0"/>
+            </Border>
+        </Grid>
     </Border>
 </UserControl>

src/YZWater.Avalonia/Views/ViewCView.axaml

@@ -9,63 +9,80 @@
         <vm:ViewCViewModel/>
     </UserControl.DataContext>
 
-    <Border Background="#0A0E14">
-        <Grid RowDefinitions="Auto,*,Auto" Margin="20">
-            <!-- 日期筛选 -->
-            <Border Grid.Row="0" Background="#2d2d44" CornerRadius="8" Padding="15" Margin="0,0,0,15">
-                <StackPanel>
-                    <TextBlock Text="流量记录查询" FontWeight="Bold" FontSize="18" Foreground="White" Margin="0,0,0,15"/>
-                    <StackPanel Orientation="Horizontal" Spacing="20">
-                        <StackPanel Orientation="Horizontal" Spacing="5">
-                            <TextBlock Text="开始日期:" VerticalAlignment="Center" Foreground="White"/>
+    <Border Background="{DynamicResource AppBgBrush}">
+        <Grid RowDefinitions="48,*,32">
+            <!-- 顶部 -->
+            <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,0,1">
+                <Grid Margin="16,0">
+                    <StackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
+                        <Border Background="#4CAF50" Width="3" Height="20" CornerRadius="1"/>
+                        <TextBlock Text="FLOW RECORDS" FontFamily="{DynamicResource MonoFont}" FontSize="16" FontWeight="Bold"
+                                   Foreground="{DynamicResource TextPrimaryBrush}" VerticalAlignment="Center"/>
+                        <TextBlock Text="流量历史数据" FontSize="12" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                    </StackPanel>
+                </Grid>
+            </Border>
+
+            <!-- 内容 -->
+            <Grid Grid.Row="1" RowDefinitions="Auto,*,Auto" Margin="8,4">
+
+                <!-- 查询条件 -->
+                <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,0,0,4">
+                    <StackPanel Orientation="Horizontal" Spacing="16">
+                        <StackPanel Orientation="Horizontal" Spacing="6">
+                            <TextBlock Text="FROM" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                             <DatePicker SelectedDate="{Binding StartDate}" Width="150"/>
                         </StackPanel>
-                        <StackPanel Orientation="Horizontal" Spacing="5">
-                            <TextBlock Text="结束日期:" VerticalAlignment="Center" Foreground="White"/>
+                        <StackPanel Orientation="Horizontal" Spacing="6">
+                            <TextBlock Text="TO" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                             <DatePicker SelectedDate="{Binding EndDate}" Width="150"/>
                         </StackPanel>
-                        <Button Content="查询" Command="{Binding LoadFlowRecordsCommand}"/>
-                        <Button Content="导出数据" Command="{Binding ExportDataCommand}"/>
-                        <Button Content="清除旧数据" Command="{Binding ClearOldDataCommand}"/>
+                        <Button Content="QUERY" Command="{Binding LoadFlowRecordsCommand}" Classes="btn-info"/>
+                        <Button Content="EXPORT CSV" Command="{Binding ExportDataCommand}" Classes="btn-success"/>
+                        <Button Content="PURGE OLD" Command="{Binding ClearOldDataCommand}" Classes="btn-danger"/>
                     </StackPanel>
-                </StackPanel>
-            </Border>
+                </Border>
 
-            <!-- 图表区域 -->
-            <Border Grid.Row="1" Background="#2d2d44" CornerRadius="8" Padding="15" Margin="0,0,0,15">
-                <ScrollViewer>
-                    <StackPanel>
-                        <TextBlock Text="进水流量趋势" FontWeight="Bold" Foreground="White" Margin="0,0,0,10"/>
-                        <lvc:CartesianChart Series="{Binding InflowSeries}"
-                                            XAxes="{Binding XAxes}"
-                                            YAxes="{Binding YAxes}"
-                                            Height="200"/>
+                <!-- 图表 -->
+                <Border Grid.Row="1" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,0,0,4">
+                    <ScrollViewer>
+                        <StackPanel>
+                            <StackPanel Orientation="Horizontal" Spacing="6" Margin="0,0,0,8">
+                                <Border Background="#4CAF50" Width="3" Height="14" CornerRadius="1"/>
+                                <TextBlock Text="INFLOW TREND" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextSecondaryBrush}"/>
+                            </StackPanel>
+                            <lvc:CartesianChart Series="{Binding InflowSeries}" XAxes="{Binding XAxes}" YAxes="{Binding YAxes}" Height="200"/>
 
-                        <TextBlock Text="出水流量趋势" FontWeight="Bold" Foreground="White" Margin="0,15,0,10"/>
-                        <lvc:CartesianChart Series="{Binding OutflowSeries}"
-                                            XAxes="{Binding XAxes}"
-                                            YAxes="{Binding YAxes}"
-                                            Height="200"/>
-                    </StackPanel>
-                </ScrollViewer>
-            </Border>
+                            <StackPanel Orientation="Horizontal" Spacing="6" Margin="0,16,0,8">
+                                <Border Background="#2196F3" Width="3" Height="14" CornerRadius="1"/>
+                                <TextBlock Text="OUTFLOW TREND" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextSecondaryBrush}"/>
+                            </StackPanel>
+                            <lvc:CartesianChart Series="{Binding OutflowSeries}" XAxes="{Binding XAxes}" YAxes="{Binding YAxes}" Height="200"/>
+                        </StackPanel>
+                    </ScrollViewer>
+                </Border>
+
+                <!-- 数据表格 -->
+                <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="8">
+                    <DataGrid ItemsSource="{Binding FlowRecords}" AutoGenerateColumns="False" IsReadOnly="True" Height="150">
+                        <DataGrid.Columns>
+                            <DataGridTextColumn Header="TIME" Binding="{Binding RecordTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="160"/>
+                            <DataGridTextColumn Header="IN (m³/h)" Binding="{Binding InflowRate, StringFormat='{}{0:F1}'}" Width="100"/>
+                            <DataGridTextColumn Header="OUT (m³/h)" Binding="{Binding OutflowRate, StringFormat='{}{0:F1}'}" Width="100"/>
+                            <DataGridTextColumn Header="TOTAL IN (m³)" Binding="{Binding TotalInflow, StringFormat='{}{0:F1}'}" Width="120"/>
+                            <DataGridTextColumn Header="TOTAL OUT (m³)" Binding="{Binding TotalOutflow, StringFormat='{}{0:F1}'}" Width="120"/>
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </Border>
+            </Grid>
 
-            <!-- 数据表格 -->
-            <Border Grid.Row="2" Background="#2d2d44" CornerRadius="8" Padding="15">
-                <DataGrid ItemsSource="{Binding FlowRecords}"
-                          AutoGenerateColumns="False"
-                          IsReadOnly="True"
-                          Height="150"
-                          Background="#1a1a2e"
-                          Foreground="White">
-                    <DataGrid.Columns>
-                        <DataGridTextColumn Header="时间" Binding="{Binding RecordTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="150"/>
-                        <DataGridTextColumn Header="进水流量(m³/h)" Binding="{Binding InflowRate, StringFormat='{}{0:F1}'}" Width="120"/>
-                        <DataGridTextColumn Header="出水流量(m³/h)" Binding="{Binding OutflowRate, StringFormat='{}{0:F1}'}" Width="120"/>
-                        <DataGridTextColumn Header="累计进水量(m³)" Binding="{Binding TotalInflow, StringFormat='{}{0:F1}'}" Width="120"/>
-                        <DataGridTextColumn Header="累计出水量(m³)" Binding="{Binding TotalOutflow, StringFormat='{}{0:F1}'}" Width="120"/>
-                    </DataGrid.Columns>
-                </DataGrid>
+            <!-- 底部 -->
+            <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
+                <TextBlock Text="FLOW DATA v1.0" FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                           Foreground="{DynamicResource TextDisabledBrush}" VerticalAlignment="Center" Margin="16,0"/>
             </Border>
         </Grid>
     </Border>

src/YZWater.Avalonia/Views/ViewDView.axaml

@@ -8,85 +8,92 @@
         <vm:ViewDViewModel/>
     </UserControl.DataContext>
 
-    <Border Background="#0A0E14">
-        <Grid RowDefinitions="Auto,*,Auto" Margin="20">
-            <!-- 查询条件 -->
-            <Border Grid.Row="0" Background="#2d2d44" CornerRadius="8" Padding="15" Margin="0,0,0,15">
-                <StackPanel>
-                    <TextBlock Text="报警记录查询" FontWeight="Bold" FontSize="18" Foreground="White" Margin="0,0,0,15"/>
-                    <StackPanel Orientation="Horizontal" Spacing="20">
-                        <StackPanel Orientation="Horizontal" Spacing="5">
-                            <TextBlock Text="开始日期:" VerticalAlignment="Center" Foreground="White"/>
+    <Border Background="{DynamicResource AppBgBrush}">
+        <Grid RowDefinitions="48,*,32">
+            <!-- 顶部 -->
+            <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,0,1">
+                <Grid Margin="16,0">
+                    <StackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
+                        <Border Background="{DynamicResource DangerBrush}" Width="3" Height="20" CornerRadius="1"/>
+                        <TextBlock Text="ALARM LOG" FontFamily="{DynamicResource MonoFont}" FontSize="16" FontWeight="Bold"
+                                   Foreground="{DynamicResource TextPrimaryBrush}" VerticalAlignment="Center"/>
+                        <TextBlock Text="报警历史记录" FontSize="12" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
+                        <Border Background="{DynamicResource DangerBrush}" CornerRadius="10" Padding="8,2" Margin="8,0,0,0">
+                            <TextBlock Text="{Binding UnconfirmedCount, StringFormat='{}{0}'}" FontFamily="{DynamicResource MonoFont}" FontSize="11"
+                                       Foreground="White"/>
+                        </Border>
+                    </StackPanel>
+                </Grid>
+            </Border>
+
+            <!-- 内容 -->
+            <Grid Grid.Row="1" RowDefinitions="Auto,*,Auto" Margin="8,4">
+
+                <!-- 查询条件 -->
+                <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12" Margin="0,0,0,4">
+                    <StackPanel Orientation="Horizontal" Spacing="16">
+                        <StackPanel Orientation="Horizontal" Spacing="6">
+                            <TextBlock Text="FROM" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                             <DatePicker SelectedDate="{Binding StartDate}" Width="150"/>
                         </StackPanel>
-                        <StackPanel Orientation="Horizontal" Spacing="5">
-                            <TextBlock Text="结束日期:" VerticalAlignment="Center" Foreground="White"/>
+                        <StackPanel Orientation="Horizontal" Spacing="6">
+                            <TextBlock Text="TO" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                             <DatePicker SelectedDate="{Binding EndDate}" Width="150"/>
                         </StackPanel>
-                        <Button Content="查询" Command="{Binding LoadAlarmRecordsCommand}"/>
-                        <Button Content="导出记录" Command="{Binding ExportAlarmsCommand}"/>
-                        <Button Content="清除历史" Command="{Binding ClearHistoryCommand}"/>
+                        <Button Content="QUERY" Command="{Binding LoadAlarmRecordsCommand}" Classes="btn-info"/>
+                        <Button Content="EXPORT" Command="{Binding ExportAlarmsCommand}" Classes="btn-success"/>
+                        <Button Content="ACK ALL" Command="{Binding ConfirmAllAlarmsCommand}" Classes="btn-warning"/>
+                        <Button Content="PURGE" Command="{Binding ClearHistoryCommand}" Classes="btn-danger"/>
                     </StackPanel>
+                </Border>
 
-                    <!-- 未确认报警数 -->
-                    <Border Background="#F44336" CornerRadius="5" Padding="10" Margin="0,10,0,0"
-                            IsVisible="{Binding UnconfirmedCount}">
-                        <StackPanel Orientation="Horizontal" Spacing="10">
-                            <TextBlock Text="⚠️" FontSize="16"/>
-                            <TextBlock Text="{Binding UnconfirmedCount, StringFormat='未确认报警: {0} 条'}"
-                                       Foreground="White" FontWeight="Bold"/>
-                            <Button Content="全部确认" Command="{Binding ConfirmAllAlarmsCommand}"
-                                    Margin="20,0,0,0"/>
-                        </StackPanel>
-                    </Border>
-                </StackPanel>
-            </Border>
-
-            <!-- 报警列表 -->
-            <Border Grid.Row="1" Background="#2d2d44" CornerRadius="8" Padding="15" Margin="0,0,0,15">
-                <DataGrid ItemsSource="{Binding AlarmRecords}"
-                          AutoGenerateColumns="False"
-                          IsReadOnly="True"
-                          SelectedItem="{Binding SelectedRecord}"
-                          Background="#1a1a2e"
-                          Foreground="White">
-                    <DataGrid.Columns>
-                        <DataGridTextColumn Header="时间" Binding="{Binding AlarmTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="150"/>
-                        <DataGridTextColumn Header="类型" Binding="{Binding AlarmType}" Width="100"/>
-                        <DataGridTextColumn Header="内容" Binding="{Binding AlarmMessage}" Width="200"/>
-                        <DataGridTextColumn Header="报警值" Binding="{Binding AlarmValue, StringFormat='{}{0:F1}'}" Width="80"/>
-                        <DataGridTextColumn Header="级别" Binding="{Binding AlarmLevel}" Width="60"/>
-                        <DataGridCheckBoxColumn Header="已确认" Binding="{Binding IsConfirmed}" Width="80"/>
-                        <DataGridTextColumn Header="确认时间" Binding="{Binding ConfirmedTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="150"/>
-                        <DataGridTextColumn Header="确认人" Binding="{Binding ConfirmedBy}" Width="80"/>
-                    </DataGrid.Columns>
-                </DataGrid>
-            </Border>
+                <!-- 报警列表 -->
+                <Border Grid.Row="1" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="8" Margin="0,0,0,4">
+                    <DataGrid ItemsSource="{Binding AlarmRecords}" AutoGenerateColumns="False" IsReadOnly="True"
+                              SelectedItem="{Binding SelectedRecord}">
+                        <DataGrid.Columns>
+                            <DataGridTextColumn Header="TIME" Binding="{Binding AlarmTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="160"/>
+                            <DataGridTextColumn Header="TYPE" Binding="{Binding AlarmType}" Width="100"/>
+                            <DataGridTextColumn Header="MESSAGE" Binding="{Binding AlarmMessage}" Width="250"/>
+                            <DataGridTextColumn Header="VALUE" Binding="{Binding AlarmValue, StringFormat='{}{0:F1}'}" Width="80"/>
+                            <DataGridTextColumn Header="LEVEL" Binding="{Binding AlarmLevel}" Width="60"/>
+                            <DataGridCheckBoxColumn Header="ACK" Binding="{Binding IsConfirmed}" Width="60"/>
+                            <DataGridTextColumn Header="ACK TIME" Binding="{Binding ConfirmedTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}" Width="160"/>
+                            <DataGridTextColumn Header="ACK BY" Binding="{Binding ConfirmedBy}" Width="80"/>
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </Border>
 
-            <!-- 报警详情 -->
-            <Border Grid.Row="2" Background="#2d2d44" CornerRadius="8" Padding="15"
-                    IsVisible="{Binding SelectedRecord, Converter={x:Static ObjectConverters.IsNotNull}}">
-                <StackPanel>
-                    <TextBlock Text="报警详情" FontWeight="Bold" FontSize="16" Foreground="White" Margin="0,0,0,10"/>
-                    <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto,Auto">
-                        <TextBlock Grid.Row="0" Grid.Column="0" Text="时间:" Margin="5" Foreground="White"/>
-                        <TextBlock Grid.Row="0" Grid.Column="1"
-                                   Text="{Binding SelectedRecord.AlarmTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}"
-                                   Margin="5" Foreground="White"/>
+                <!-- 报警详情 -->
+                <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                        BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="12"
+                        IsVisible="{Binding SelectedRecord, Converter={x:Static ObjectConverters.IsNotNull}}">
+                    <Grid ColumnDefinitions="80,*" RowDefinitions="Auto,Auto,Auto,Auto">
+                        <TextBlock Grid.Row="0" Grid.Column="0" Text="TIME" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding SelectedRecord.AlarmTime, StringFormat='{}{0:yyyy-MM-dd HH:mm:ss}'}"
+                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>
 
-                        <TextBlock Grid.Row="1" Grid.Column="0" Text="类型:" Margin="5" Foreground="White"/>
-                        <TextBlock Grid.Row="1" Grid.Column="1"
-                                   Text="{Binding SelectedRecord.AlarmType}" Margin="5" Foreground="White"/>
+                        <TextBlock Grid.Row="1" Grid.Column="0" Text="TYPE" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding SelectedRecord.AlarmType}"
+                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource WarningBrush}"/>
 
-                        <TextBlock Grid.Row="2" Grid.Column="0" Text="内容:" Margin="5" Foreground="White"/>
-                        <TextBlock Grid.Row="2" Grid.Column="1"
-                                   Text="{Binding SelectedRecord.AlarmMessage}" Margin="5" Foreground="White"/>
+                        <TextBlock Grid.Row="2" Grid.Column="0" Text="MESSAGE" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding SelectedRecord.AlarmMessage}"
+                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource DangerBrush}"/>
 
-                        <TextBlock Grid.Row="3" Grid.Column="0" Text="级别:" Margin="5" Foreground="White"/>
-                        <TextBlock Grid.Row="3" Grid.Column="1"
-                                   Text="{Binding SelectedRecord.AlarmLevel, StringFormat='{}Level {0}'}" Margin="5" Foreground="White"/>
+                        <TextBlock Grid.Row="3" Grid.Column="0" Text="LEVEL" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                        <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding SelectedRecord.AlarmLevel, StringFormat='{}Level {0}'}"
+                                   FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>
                     </Grid>
-                </StackPanel>
+                </Border>
+            </Grid>
+
+            <!-- 底部 -->
+            <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
+                <TextBlock Text="ALARM SYSTEM v1.0" FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                           Foreground="{DynamicResource TextDisabledBrush}" VerticalAlignment="Center" Margin="16,0"/>
             </Border>
         </Grid>
     </Border>

src/YZWater.Avalonia/Views/ViewEView.axaml

@@ -8,58 +8,95 @@
         <vm:ViewEViewModel/>
     </UserControl.DataContext>
 
-    <Border Background="#0A0E14">
-        <ScrollViewer>
-            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="30" Margin="50">
-                <!-- Logo 和系统名称 -->
-                <StackPanel HorizontalAlignment="Center" Spacing="15">
-                    <TextBlock Text="🏭" FontSize="64" HorizontalAlignment="Center"/>
-                    <TextBlock Text="{Binding SystemName}"
-                               FontSize="32" FontWeight="Bold"
-                               HorizontalAlignment="Center"
-                               Foreground="White"/>
-                    <TextBlock Text="{Binding Version, StringFormat='Version {0}'}"
-                               FontSize="16" Foreground="Gray"
-                               HorizontalAlignment="Center"/>
-                </StackPanel>
-
-                <!-- 系统描述 -->
-                <Border Background="#2d2d44" CornerRadius="10" Padding="20" MaxWidth="500">
-                    <StackPanel Spacing="10">
-                        <TextBlock Text="系统简介" FontWeight="Bold" FontSize="16" Foreground="White"/>
-                        <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Foreground="#cccccc"/>
-                        <TextBlock Text="{Binding TechStack}" Foreground="Gray"/>
+    <Border Background="{DynamicResource AppBgBrush}">
+        <Grid RowDefinitions="48,*,32">
+            <!-- 顶部 -->
+            <Border Grid.Row="0" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,0,1">
+                <Grid Margin="16,0">
+                    <StackPanel Orientation="Horizontal" Spacing="12" VerticalAlignment="Center">
+                        <Border Background="{DynamicResource TextSecondaryBrush}" Width="3" Height="20" CornerRadius="1"/>
+                        <TextBlock Text="ABOUT" FontFamily="{DynamicResource MonoFont}" FontSize="16" FontWeight="Bold"
+                                   Foreground="{DynamicResource TextPrimaryBrush}" VerticalAlignment="Center"/>
+                        <TextBlock Text="系统信息" FontSize="12" Foreground="{DynamicResource TextTertiaryBrush}" VerticalAlignment="Center"/>
                     </StackPanel>
-                </Border>
+                </Grid>
+            </Border>
+
+            <!-- 内容 -->
+            <ScrollViewer Grid.Row="1" Margin="8,4">
+                <StackPanel HorizontalAlignment="Center" MaxWidth="600" Spacing="16">
+
+                    <!-- Logo -->
+                    <Border Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="24" Margin="0,0,0,4">
+                        <StackPanel HorizontalAlignment="Center" Spacing="12">
+                            <TextBlock Text="🏭" FontSize="48" HorizontalAlignment="Center"/>
+                            <TextBlock Text="{Binding SystemName}" FontSize="24" FontWeight="Bold"
+                                       Foreground="{DynamicResource TextPrimaryBrush}" HorizontalAlignment="Center"/>
+                            <TextBlock Text="{Binding Version, StringFormat='VERSION {0}'}"
+                                       FontFamily="{DynamicResource MonoFont}" FontSize="12"
+                                       Foreground="{DynamicResource TextTertiaryBrush}" HorizontalAlignment="Center"/>
+                        </StackPanel>
+                    </Border>
+
+                    <!-- 系统描述 -->
+                    <Border Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="16">
+                        <StackPanel Spacing="8">
+                            <StackPanel Orientation="Horizontal" Spacing="6">
+                                <Border Background="{DynamicResource InfoBrush}" Width="3" Height="14" CornerRadius="1"/>
+                                <TextBlock Text="SYSTEM INFO" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
+                                           Foreground="{DynamicResource TextSecondaryBrush}"/>
+                            </StackPanel>
+                            <TextBlock Text="{Binding Description}" TextWrapping="Wrap"
+                                       Foreground="{DynamicResource TextSecondaryBrush}" FontSize="13"/>
+                            <Separator Margin="0,4"/>
+                            <Grid ColumnDefinitions="100,*" RowDefinitions="Auto,Auto">
+                                <TextBlock Grid.Row="0" Grid.Column="0" Text="TECH STACK" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TechStack}" FontFamily="{DynamicResource MonoFont}" FontSize="10" Foreground="{DynamicResource TextSecondaryBrush}"/>
+                            </Grid>
+                        </StackPanel>
+                    </Border>
+
+                    <!-- 公司信息 -->
+                    <Border Background="{DynamicResource SurfaceBgBrush}" CornerRadius="2"
+                            BorderBrush="{DynamicResource BorderBrush}" BorderThickness="1" Padding="16">
+                        <StackPanel Spacing="8">
+                            <StackPanel Orientation="Horizontal" Spacing="6">
+                                <Border Background="{DynamicResource SuccessBrush}" Width="3" Height="14" CornerRadius="1"/>
+                                <TextBlock Text="COMPANY" FontFamily="{DynamicResource MonoFont}" FontSize="12" FontWeight="Bold"
+                                           Foreground="{DynamicResource TextSecondaryBrush}"/>
+                            </StackPanel>
+                            <Grid ColumnDefinitions="100,*" RowDefinitions="Auto,Auto,Auto">
+                                <TextBlock Grid.Row="0" Grid.Column="0" Text="NAME" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                                <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CompanyName}" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>
 
-                <!-- 公司信息 -->
-                <Border Background="#2d2d44" CornerRadius="10" Padding="20" MaxWidth="500">
-                    <StackPanel Spacing="15">
-                        <TextBlock Text="公司信息" FontWeight="Bold" FontSize="16" Foreground="White"/>
-                        <Grid ColumnDefinitions="Auto,*" RowDefinitions="Auto,Auto,Auto">
-                            <TextBlock Grid.Row="0" Grid.Column="0" Text="公司名称:" Margin="0,0,10,0" Foreground="White"/>
-                            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CompanyName}" Foreground="#cccccc"/>
+                                <TextBlock Grid.Row="1" Grid.Column="0" Text="CONTACT" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                                <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ContactPerson}" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>
 
-                            <TextBlock Grid.Row="1" Grid.Column="0" Text="联系人:" Margin="0,0,10,0" Foreground="White"/>
-                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ContactPerson}" Foreground="#cccccc"/>
+                                <TextBlock Grid.Row="2" Grid.Column="0" Text="PHONE" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextTertiaryBrush}"/>
+                                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ContactPhone}" FontFamily="{DynamicResource MonoFont}" FontSize="11" Foreground="{DynamicResource TextPrimaryBrush}"/>
+                            </Grid>
+                        </StackPanel>
+                    </Border>
 
-                            <TextBlock Grid.Row="2" Grid.Column="0" Text="联系电话:" Margin="0,0,10,0" Foreground="White"/>
-                            <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ContactPhone}" Foreground="#cccccc"/>
-                        </Grid>
+                    <!-- 操作 -->
+                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="12">
+                        <Button Content="VISIT WEBSITE" Command="{Binding OpenWebsiteCommand}" Classes="btn-info"/>
+                        <Button Content="CHECK UPDATE" Command="{Binding CheckUpdateCommand}" Classes="btn-success"/>
                     </StackPanel>
-                </Border>
 
-                <!-- 操作按钮 -->
-                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="20">
-                    <Button Content="访问官网" Command="{Binding OpenWebsiteCommand}" Width="120" Height="35"/>
-                    <Button Content="检查更新" Command="{Binding CheckUpdateCommand}" Width="120" Height="35"/>
+                    <!-- 版权 -->
+                    <TextBlock Text="{Binding Copyright}" FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                               Foreground="{DynamicResource TextDisabledBrush}" HorizontalAlignment="Center" Margin="0,16,0,0"/>
                 </StackPanel>
+            </ScrollViewer>
 
-                <!-- 版权信息 -->
-                <TextBlock Text="{Binding Copyright}"
-                           Foreground="Gray" FontSize="12"
-                           HorizontalAlignment="Center" Margin="0,20,0,0"/>
-            </StackPanel>
-        </ScrollViewer>
+            <!-- 底部 -->
+            <Border Grid.Row="2" Background="{DynamicResource SurfaceBgBrush}" BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,1,0,0">
+                <TextBlock Text="ABOUT v1.0" FontFamily="{DynamicResource MonoFont}" FontSize="10"
+                           Foreground="{DynamicResource TextDisabledBrush}" VerticalAlignment="Center" Margin="16,0"/>
+            </Border>
+        </Grid>
     </Border>
 </UserControl>