1 feat: 改进MQTT服务器详情页面UI和功能

2
   3 - 将MQTT服务器详情页面的文本框改为只读模式，使用TextBlock显示
   4 - 为MQTT服务器详情区域添加图标和优化间距，提升视觉效果
   5 - 实现顶部导航栏和CommandBar功能，支持返回列表、刷新等操作
   6 - 添加Reload和NavigateToMqtts命令，增强页面功能
   7 - 重构ViewModel，添加MQTT管理、数据存储和导航服务依赖
   8 - 实现页面导航参数处理，根据ID加载对应的MQTT服务器信息
   9 - 使用DockPanel和ScrollViewer优化页面布局，提升用户体验

DMS.WPF/ViewModels/MqttServerDetailViewModel.cs

@@ -1,13 +1,11 @@
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
+using DMS.Application.Interfaces.Management;
+using DMS.Core.Models;
+using DMS.WPF.Interfaces;
+using DMS.WPF.ViewModels.Items;
 using Microsoft.Extensions.Logging;
 using System.Collections.ObjectModel;
-using DMS.Core.Models;
-using DMS.Services;
-using DMS.WPF.Interfaces;
-using DMS.WPF.Services;
-using DMS.WPF.ViewModels;
-using DMS.WPF.ViewModels.Items;
 
 namespace DMS.WPF.ViewModels
 {
@@ -20,6 +18,9 @@ namespace DMS.WPF.ViewModels
         private readonly ILogger<MqttServerDetailViewModel> _logger;
         private readonly IDialogService _dialogService;
         private readonly INotificationService _notificationService;
+        private readonly IMqttManagementService _mqttManagementService;
+        private readonly IDataStorageService _dataStorageService;
+        private readonly INavigationService _navigationService;
 
         /// <summary>
         /// 当前正在编辑的MQTT服务器对象。
@@ -41,112 +42,74 @@ namespace DMS.WPF.ViewModels
         /// <param name="dataServices">数据服务。</param>
         /// <param name="dialogService">对话框服务。</param>
         /// <param name="notificationService">通知服务。</param>
+        /// <param name="mqttManagementService">MQTT管理服务</param>
+        /// <param name="navigationService">导航服务</param>
         public MqttServerDetailViewModel(ILogger<MqttServerDetailViewModel> logger,
-                                         IDialogService dialogService, INotificationService notificationService)
+                                         IDialogService dialogService,
+                                         INotificationService notificationService,
+                                         IMqttManagementService mqttManagementService,
+                                         IDataStorageService dataStorageService,
+                                         INavigationService navigationService)
         {
             _logger = logger;
             _dialogService = dialogService;
             _notificationService = notificationService;
+            _mqttManagementService = mqttManagementService;
+            this._dataStorageService = dataStorageService;
+            _navigationService = navigationService;
         }
 
-        public override void OnLoaded()
-        {
-            // if (CurrentMqtt.VariableMqtts != null)
-            // {
-            //     AssociatedVariables =new ObservableCollection<VariableMqtt>(CurrentMqtt.VariableMqtts) ;
-            // }
-        }
       
 
         /// <summary>
-        /// 保存MQTT服务器及其关联变量的更改。
+        /// 重新加载当前MQTT服务器数据
         /// </summary>
         [RelayCommand]
-        private async Task SaveChanges()
+        private async Task Reload()
         {
-            if (CurrentMqtt == null) return;
+            if (CurrentMqtt?.Id > 0)
-
+            {
-            // TODO: 实现保存逻辑。这可能涉及到更新Mqtt对象和更新VariableData对象。
+                // 重新加载当前MQTT服务器数据
-            // 由于Mqtt和VariableData之间的关联可能在数据库中通过中间表维护，
+                var updatedMqtt = await _mqttManagementService.GetMqttServerByIdAsync(CurrentMqtt.Id);
-            // 这里需要根据实际的数据库操作来调整。
+                if (updatedMqtt != null)
-            // 例如，如果Mqtt对象本身包含关联的VariableData列表，则直接保存Mqtt对象即可。
+                {
-            // 如果是多对多关系，可能需要更新中间表。
+                    // 更新CurrentMqtt的属性
-
+                    CurrentMqtt.ServerName = updatedMqtt.ServerName;
-            // 示例：假设Mqtt对象需要更新
+                    CurrentMqtt.ServerUrl = updatedMqtt.ServerUrl;
-            // await _dataServices.UpdateMqttAsync(CurrentMqtt); 
+                    CurrentMqtt.Port = updatedMqtt.Port;
-
+                    CurrentMqtt.ClientId = updatedMqtt.ClientId;
-            // 示例：假设变量数据也需要保存
+                    CurrentMqtt.Username = updatedMqtt.Username;
-            // foreach (var variable in AssociatedVariables.Where(v => v.IsModified))
+                    CurrentMqtt.Password = updatedMqtt.Password;
-            // {
+                    CurrentMqtt.PublishTopic = updatedMqtt.PublishTopic;
-            //     await _dataServices.UpdateVariableAsync(variable);
+                    CurrentMqtt.SubscribeTopic = updatedMqtt.SubscribeTopic;
-            // }
+                    CurrentMqtt.MessageHeader = updatedMqtt.MessageHeader;
-
+                    CurrentMqtt.MessageContent = updatedMqtt.MessageContent;
-            _notificationService.ShowInfo("MQTT服务器详情保存功能待实现。");
+                    CurrentMqtt.MessageFooter = updatedMqtt.MessageFooter;
-            _logger.LogInformation("Save changes for MQTT server detail initiated.");
+                }
+            }
         }
 
         /// <summary>
-        /// 从当前MQTT服务器中移除选定的变量。
+        /// 导航回MQTT服务器列表页面
         /// </summary>
-        /// <param name="variablesToRemove">要移除的变量列表。</param>
         [RelayCommand]
-        private async Task RemoveVariables(System.Collections.IList variablesToRemove)
+        private async Task NavigateToMqtts()
         {
-            // if (CurrentMqtt == null || variablesToRemove == null || variablesToRemove.Count == 0)
+            await _navigationService.NavigateToAsync(this, new NavigationParameter(nameof(MqttsViewModel)));
-            // {
-            //     NotificationHelper.ShowInfo("请选择要移除的变量。");
-            //     return;
-            // }
-            //
-            // var variablesList = variablesToRemove.Cast<Variable>()
-            //                                      .ToList();
-            //
-            // var result = await _dialogService.ShowConfrimeDialog(
-            //     "确认移除", $"确定要从MQTT服务器 '{CurrentMqtt.ServerName}' 中移除选定的 {variablesList.Count} 个变量吗？");
-            // if (result != true) return;
-            //
-            // foreach (var variable in variablesList) // 使用ToList()避免在迭代时修改集合
-            // {
-            //     // 移除变量与当前MQTT服务器的关联
-            //     // variable.Mqtts?.Remove(CurrentMqtt);
-            //     // // 标记变量为已修改，以便保存时更新数据库
-            //     // variable.IsModified = true;
-            //     // AssociatedVariables.Remove(variable);
-            //     // _logger.LogInformation($"Removed variable {variable.Name} from MQTT server {CurrentMqtt.Name}.");
-            // }
-            //
-            // // 
-            // // 例如：await _dataServices.UpdateVariableDataAssociationsAsync(variablesToRemove);
-            // NotificationHelper.ShowSuccess("变量移除成功，请记得保存更改。");
         }
 
-        /// <summary>
+        public override Task OnNavigatedToAsync(NavigationParameter parameter)
-        /// 添加变量到当前MQTT服务器。
-        /// </summary>
-        [RelayCommand]
-        private async Task AddVariables()
         {
-            if (CurrentMqtt == null) return;
+            if (parameter == null) return Task.CompletedTask;
 
-            // TODO: 实现选择变量的对话框，让用户选择要添加的变量
+            if (_dataStorageService.MqttServers.TryGetValue(parameter.TargetId, out var mqttServerItem))
-            // 例如：var selectedVariables = await _dialogService.ShowVariableSelectionDialogAsync();
+            {
-            // 这里只是一个占位符，实际需要一个UI来选择变量
+                CurrentMqtt = mqttServerItem;
-            _notificationService.ShowInfo("添加变量功能待实现，需要一个变量选择对话框。");
-            _logger.LogInformation("AddAsync variables to MQTT server initiated.");
 
-            // 假设我们已经通过对话框获取到了一些要添加的变量
+            }
-            // List<Variable> newVariables = ...; 
+
-            // foreach (var variable in newVariables)
+
-            // {
+            return Task.CompletedTask;
-            //     if (variable.Mqtts == null) variable.Mqtts = new List<Mqtt>();
-            //     if (!variable.Mqtts.Any(m => m.Id == CurrentMqtt.Id))
-            //     {
-            //         variable.Mqtts.AddAsync(CurrentMqtt);
-            //         variable.IsModified = true; // 标记为已修改
-            //         AssociatedVariables.AddAsync(variable);
-            //     }
-            // }
-            // NotificationHelper.ShowMessage("变量添加成功，请记得保存更改。", NotificationType.Success);
         }
     }
 }

DMS.WPF/Views/MqttServerDetailView.xaml

@@ -3,23 +3,99 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
              xmlns:valueConverts="clr-namespace:DMS.WPF.ValueConverts"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800">
     <UserControl.Resources>
         <valueConverts:EnumDescriptionConverter x:Key="EnumDescriptionConverter"/>
     </UserControl.Resources>
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="*"/>
-            <RowDefinition Height="Auto"/>
-        </Grid.RowDefinitions>
     
+    <DockPanel>
+        <!-- 顶部导航栏 -->
+        <Border DockPanel.Dock="Top" Margin="20,10" Padding="15">
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto"/>
+                    <ColumnDefinition Width="*"/>
+                </Grid.ColumnDefinitions>
+                
+                <!-- 返回MQTT列表按钮 -->
+                <Button Grid.Column="0" 
+                        Command="{Binding NavigateToMqttsCommand}"
+                        Style="{StaticResource ButtonDefault}"
+                        ToolTip="返回MQTT服务器列表"
+                        Margin="0,0,10,0">
+                    <Button.Content>
+                        <StackPanel Orientation="Horizontal">
+                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ArrowLeft8}" />
+                        </StackPanel>
+                    </Button.Content>
+                </Button>
+                
+                <!-- 操作菜单栏 -->
+                <ui:CommandBar Grid.Column="1" 
+                               DefaultLabelPosition="Right" 
+                               IsOpen="False"
+                               HorizontalAlignment="Right">
+                    <!-- 重新加载 -->
+                    <ui:AppBarButton Command="{Binding ReloadCommand}" Label="重新加载">
+                        <ui:AppBarButton.Icon>
+                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Refresh}" />
+                        </ui:AppBarButton.Icon>
+                    </ui:AppBarButton>
+                    
+                    <ui:AppBarButton x:Name="EditButton" Label="编辑">
+                        <ui:AppBarButton.Icon>
+                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Edit}" />
+                        </ui:AppBarButton.Icon>
+                    </ui:AppBarButton>
+                    
+                    <ui:AppBarButton x:Name="ShareButton" Label="分享">
+                        <ui:AppBarButton.Icon>
+                            <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Share}" />
+                        </ui:AppBarButton.Icon>
+                    </ui:AppBarButton>
+                    
+                    <ui:CommandBar.SecondaryCommands>
+                        <ui:AppBarButton
+                            x:Name="SettingsButton"
+                            Icon="Setting"
+                            Label="设置" />
+                    </ui:CommandBar.SecondaryCommands>
+                </ui:CommandBar>
+            </Grid>
+        </Border>
+
+        <!-- 主内容区域 -->
+        <ScrollViewer DockPanel.Dock="Top" VerticalScrollBarVisibility="Auto">
+            <StackPanel Margin="20">
                 <!-- MQTT Server Details -->
-        <StackPanel Grid.Row="0" Margin="10">
+                <Border Background="White" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="8" Margin="0,0,0,10" Padding="15">
-            <TextBlock Text="MQTT 服务器详情" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,0,0,10"/>
+                    <Border.Effect>
+                        <DropShadowEffect ShadowDepth="2" BlurRadius="5" Opacity="0.1" Color="#888888"/>
+                    </Border.Effect>
+                    
+                    <StackPanel>
                         <Grid Margin="0,0,0,10">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto"/>
+                                <ColumnDefinition Width="*"/>
+                            </Grid.ColumnDefinitions>
+                            <StackPanel Grid.Column="0" Orientation="Horizontal">
+                                <ui:FontIcon FontFamily="{StaticResource MdFontIcons}"
+                                             Glyph="&#xF048B;"
+                                             FontSize="24" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,10,0"
+                                             Foreground="#2196F3"/>
+                                <TextBlock Text="MQTT 服务器详情" 
+                                           Style="{StaticResource SubtitleTextBlockStyle}" 
+                                           VerticalAlignment="Center"/>
+                            </StackPanel>
+                        </Grid>
+                        
+                        <Grid Margin="0,8,0,8">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto"/>
                                 <ColumnDefinition Width="*"/>
@@ -32,53 +108,164 @@
                                 <RowDefinition Height="Auto"/>
                                 <RowDefinition Height="Auto"/>
                                 <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
+                                <RowDefinition Height="Auto"/>
                             </Grid.RowDefinitions>
 
-                <TextBlock Grid.Row="0" Grid.Column="0" Text="名称:" Margin="0,0,5,0" VerticalAlignment="Center"/>
+                            <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
-                <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding CurrentMqtt.ServerName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,10,0"/>
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Tag}" 
-
+                                             FontSize="16" 
-                <TextBlock Grid.Row="0" Grid.Column="2" Text="主机:" Margin="0,0,5,0" VerticalAlignment="Center"/>
+                                             VerticalAlignment="Center"
-                <TextBox Grid.Row="0" Grid.Column="3" Text="{Binding CurrentMqtt.ServerUrl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
+                                             Margin="0,0,5,0"
-
+                                             Foreground="#666666"/>
-                <TextBlock Grid.Row="1" Grid.Column="0" Text="端口:" Margin="0,0,5,0" VerticalAlignment="Center"/>
+                                <TextBlock Text="名称:" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding CurrentMqtt.Port, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,10,0"/>
-
-                <TextBlock Grid.Row="1" Grid.Column="2" Text="客户端ID:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="1" Grid.Column="3" Text="{Binding CurrentMqtt.ClientId, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
-
-                <TextBlock Grid.Row="2" Grid.Column="0" Text="用户名:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding CurrentMqtt.Username, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,10,0"/>
-
-                <TextBlock Grid.Row="2" Grid.Column="2" Text="密码:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="2" Grid.Column="3" Text="{Binding CurrentMqtt.Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
-
-                <TextBlock Grid.Row="3" Grid.Column="0" Text="发布主题:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding CurrentMqtt.PublishTopic, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,10,0"/>
-
-                <TextBlock Grid.Row="3" Grid.Column="2" Text="订阅主题:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="3" Grid.Column="3" Text="{Binding CurrentMqtt.SubscribeTopic, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
-
-                <TextBlock Grid.Row="4" Grid.Column="0" Text="平台:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <!-- <ComboBox Grid.Row="4" Grid.Column="1" SelectedValue="{Binding CurrentMqtt.MqttPlatform, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" -->
-                <!--           Margin="0,0,10,0" -->
-                <!--           ItemsSource="{Binding Source={extensions:EnumBindingSourceExtension {x:Type enums:MqttPlatform}}}" -->
-                <!--           DisplayMemberPath="Description" -->
-                <!--           SelectedValuePath="Value"/> -->
-                
-                <TextBlock Grid.Row="5" Grid.Column="0" Text="消息头:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="5" Grid.Column="1" Text="{Binding CurrentMqtt.MessageHeader, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,10,0"/>
-                
-                <TextBlock Grid.Row="5" Grid.Column="2" Text="消息内容:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="5" Grid.Column="3" Text="{Binding CurrentMqtt.MessageContent, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
-                
-                <TextBlock Grid.Row="6" Grid.Column="0" Text="消息尾:" Margin="0,0,5,0" VerticalAlignment="Center"/>
-                <TextBox Grid.Row="6" Grid.Column="1" Text="{Binding CurrentMqtt.MessageFooter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="0,0,10,0"/>
-            </Grid>
-            <Button Content="保存更改" Command="{Binding SaveChangesCommand}" HorizontalAlignment="Right" Margin="0,10,0,0"/>
                             </StackPanel>
+                            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding CurrentMqtt.ServerName}" 
+                                       Margin="0,0,10,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="0" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.World}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="主机:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="0" Grid.Column="3" Text="{Binding CurrentMqtt.ServerUrl}" 
+                                       Margin="0,0,0,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ConnectApp}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="端口:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding CurrentMqtt.Port}" 
+                                       Margin="0,0,10,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="1" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.ContactInfo}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="客户端ID:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="1" Grid.Column="3" Text="{Binding CurrentMqtt.ClientId}" 
+                                       Margin="0,0,0,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="2" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.People}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="用户名:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding CurrentMqtt.Username}" 
+                                       Margin="0,0,10,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="2" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Lock}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="密码:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="2" Grid.Column="3" Text="{Binding CurrentMqtt.Password}" 
+                                       Margin="0,0,0,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="3" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon FontFamily="{StaticResource MdFontIcons}"
+                                             Glyph="&#xF06A7;" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="发布主题:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding CurrentMqtt.PublishTopic}" 
+                                       Margin="0,0,10,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="3" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon FontFamily="{StaticResource MdFontIcons}"
+                                             Glyph="&#xF009E;" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="订阅主题:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="3" Grid.Column="3" Text="{Binding CurrentMqtt.SubscribeTopic}" 
+                                       Margin="0,0,0,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+
+                            <StackPanel Grid.Row="4" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.PC1}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="平台:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <!-- <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding CurrentMqtt.MqttPlatform, Converter={StaticResource EnumDescriptionConverter}}" Margin="0,0,10,12" VerticalAlignment="Center" FontWeight="SemiBold" Foreground="#333333"/> -->
+                            
+                            <StackPanel Grid.Row="5" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.Mail}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="消息头:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="5" Grid.Column="1" Text="{Binding CurrentMqtt.MessageHeader}" 
+                                       Margin="0,0,10,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+                            
+                            <StackPanel Grid.Row="5" Grid.Column="2" Orientation="Horizontal" Margin="0,0,5,12">
+                                <ui:FontIcon  Icon="{x:Static ui:SegoeFluentIcons.Mail}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="消息内容:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="5" Grid.Column="3" Text="{Binding CurrentMqtt.MessageContent}" 
+                                       Margin="0,0,0,12" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+                            
+                            <StackPanel Grid.Row="6" Grid.Column="0" Orientation="Horizontal" Margin="0,0,5,0">
+                                <ui:FontIcon  Icon="{x:Static ui:SegoeFluentIcons.Mail}" 
+                                             FontSize="16" 
+                                             VerticalAlignment="Center"
+                                             Margin="0,0,5,0"
+                                             Foreground="#666666"/>
+                                <TextBlock Text="消息尾:" VerticalAlignment="Center"/>
+                            </StackPanel>
+                            <TextBlock Grid.Row="6" Grid.Column="1" Text="{Binding CurrentMqtt.MessageFooter}" 
+                                       Margin="0,0,10,0" VerticalAlignment="Center" 
+                                       FontWeight="SemiBold" Foreground="#333333"/>
+                        </Grid>
+                    </StackPanel>
+                </Border>
 
                 <!-- Associated Variables -->
-        <Grid Grid.Row="1" Margin="10,0,10,10">
+                <Border Background="White" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="8" Margin="0,0,0,10" Padding="15">
+                    <Border.Effect>
+                        <DropShadowEffect ShadowDepth="2" BlurRadius="5" Opacity="0.1" Color="#888888"/>
+                    </Border.Effect>
+                    
+                    <Grid>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
                             <RowDefinition Height="*"/>
@@ -102,11 +289,8 @@
                             </DataGrid.Columns>
                         </DataGrid>
                     </Grid>
-
+                </Border>
-        <!-- Actions for Associated Variables -->
-        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="10">
-            <Button Content="添加变量" Command="{Binding AddVariablesCommand}" Margin="0,0,10,0"/>
-            <Button Content="移除选中变量" Command="{Binding RemoveVariablesCommand}" CommandParameter="{Binding ElementName=AssociatedVariablesDataGrid, Path=SelectedItems}"/>
             </StackPanel>
-    </Grid>
+        </ScrollViewer>
+    </DockPanel>
 </UserControl>