You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

590 lines
33 KiB

<reactive:ReactiveUserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:AuroraDesk.Presentation.ViewModels.Pages"
xmlns:reactive="using:ReactiveUI.Avalonia"
xmlns:heroicons="clr-namespace:HeroIconsAvalonia.Controls;assembly=HeroIconsAvalonia"
xmlns:converters="using:AuroraDesk.Presentation.Converters"
mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800"
x:Class="AuroraDesk.Presentation.Views.Pages.UdpClientPageView"
x:DataType="vm:UdpClientPageViewModel">
<reactive:ReactiveUserControl.Resources>
<converters:InvertedBoolConverter x:Key="InvertedBoolConverter"/>
</reactive:ReactiveUserControl.Resources>
<Design.DataContext>
<vm:UdpClientPageViewModel />
</Design.DataContext>
<Grid Margin="16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- 状态卡片行 -->
<Grid Grid.Row="0" Margin="0,0,0,16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- 连接状态 -->
<Border Grid.Column="0"
Background="#3498DB"
CornerRadius="12"
Margin="0,0,8,0"
Padding="20">
<StackPanel>
<heroicons:HeroIcon Type="Link"
Width="28" Height="28"
Foreground="White"
HorizontalAlignment="Center"
Margin="0,0,0,8"/>
<TextBlock Text="{Binding StatusMessage}"
FontSize="13"
FontWeight="SemiBold"
Foreground="White"
HorizontalAlignment="Center"
TextWrapping="Wrap"
TextAlignment="Center"
Margin="0,0,0,6"/>
<Border Background="White"
CornerRadius="12"
Padding="6,3"
HorizontalAlignment="Center"
IsVisible="{Binding IsConnected}">
<TextBlock Text="已连接"
FontSize="10"
FontWeight="Bold"
Foreground="#3498DB"/>
</Border>
<Border Background="White"
CornerRadius="12"
Padding="6,3"
HorizontalAlignment="Center"
IsVisible="{Binding IsConnected, Converter={StaticResource InvertedBoolConverter}}">
<TextBlock Text="未连接"
FontSize="10"
FontWeight="Bold"
Foreground="#E74C3C"/>
</Border>
</StackPanel>
</Border>
<!-- 已发送 -->
<Border Grid.Column="1"
Background="#27AE60"
CornerRadius="12"
Margin="4,0,4,0"
Padding="20">
<StackPanel>
<heroicons:HeroIcon Type="ArrowUpTray"
Width="28" Height="28"
Foreground="White"
HorizontalAlignment="Center"
Margin="0,0,0,8"/>
<TextBlock Text="{Binding SentMessages.Count}"
FontSize="28"
FontWeight="Bold"
Foreground="White"
HorizontalAlignment="Center"/>
<TextBlock Text="已发送"
FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
Opacity="0.9"
Margin="0,4,0,0"/>
</StackPanel>
</Border>
<!-- 接收消息 -->
<Border Grid.Column="2"
Background="#F39C12"
CornerRadius="12"
Margin="8,0,0,0"
Padding="20">
<StackPanel>
<heroicons:HeroIcon Type="ArrowDownTray"
Width="28" Height="28"
Foreground="White"
HorizontalAlignment="Center"
Margin="0,0,0,8"/>
<TextBlock Text="{Binding ReceivedMessages.Count}"
FontSize="28"
FontWeight="Bold"
Foreground="White"
HorizontalAlignment="Center"/>
<TextBlock Text="接收消息"
FontSize="12"
Foreground="White"
HorizontalAlignment="Center"
Opacity="0.9"
Margin="0,4,0,0"/>
</StackPanel>
</Border>
</Grid>
<!-- 主要内容 -->
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- 第一行:连接配置 -->
<Border Grid.Row="0"
Background="White"
BorderBrush="#E5E7EB"
BorderThickness="1"
CornerRadius="10"
Padding="0"
Margin="0,0,0,12"
HorizontalAlignment="Stretch">
<Expander Header="连接配置"
IsExpanded="True"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Expander.HeaderTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Spacing="8" Margin="16,12">
<heroicons:HeroIcon Type="Cog6Tooth"
Width="18" Height="18"
Foreground="#1F2937"
VerticalAlignment="Center"/>
<TextBlock Text="连接配置"
FontSize="14"
FontWeight="SemiBold"
Foreground="#1F2937"
VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</DataTemplate>
</Expander.HeaderTemplate>
<StackPanel Spacing="10" Margin="16,0,16,16">
<!-- 配置行 -->
<Grid ColumnDefinitions="Auto,200,Auto,200,Auto,200,Auto,*" ColumnSpacing="12">
<TextBlock Grid.Column="0"
Text="IP"
FontSize="12"
Foreground="#6B7280"
VerticalAlignment="Center"/>
<TextBox Grid.Column="1"
Text="{Binding ServerIp}"
Watermark="127.0.0.1"
FontSize="12"
Padding="8,6"
CornerRadius="6"
BorderBrush="#D1D5DB"
Background="#FAFAFA"/>
<TextBlock Grid.Column="2"
Text="端口"
FontSize="12"
Foreground="#6B7280"
VerticalAlignment="Center"
Margin="12,0,0,0"/>
<NumericUpDown Grid.Column="3"
Value="{Binding ServerPort}"
Minimum="1" Maximum="65535"
FontSize="12"
Padding="8,6"
CornerRadius="6"
BorderBrush="#D1D5DB"
Background="#FAFAFA"/>
<TextBlock Grid.Column="4"
Text="本地端口"
FontSize="12"
Foreground="#6B7280"
VerticalAlignment="Center"
Margin="12,0,0,0"/>
<Border Grid.Column="5"
Background="#F3F4F6"
CornerRadius="6"
Padding="8,6">
<TextBlock Text="{Binding LocalPort, StringFormat='{}{0}'}"
FontSize="12"
Foreground="#6B7280"
VerticalAlignment="Center"/>
</Border>
<!-- 按钮 -->
<StackPanel Grid.Column="7"
Orientation="Horizontal"
HorizontalAlignment="Right"
Spacing="8">
<Button Command="{Binding ConnectCommand}"
Background="#3498DB"
Foreground="White"
BorderThickness="0"
CornerRadius="8"
Padding="20,9"
FontSize="13"
FontWeight="SemiBold"
Cursor="Hand"
IsEnabled="{Binding IsConnected, Converter={StaticResource InvertedBoolConverter}}">
<Button.Content>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Spacing="6">
<heroicons:HeroIcon Type="CheckCircle"
Width="16" Height="16"
Foreground="White"
VerticalAlignment="Center"/>
<TextBlock Text="连接"
FontSize="13"
FontWeight="SemiBold"
Foreground="White"
VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
<Button.Styles>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#2980B9"/>
</Style>
<Style Selector="Button:disabled">
<Setter Property="Background" Value="#E5E7EB"/>
<Setter Property="Foreground" Value="#9CA3AF"/>
</Style>
</Button.Styles>
</Button>
<Button Command="{Binding DisconnectCommand}"
Background="#E74C3C"
Foreground="White"
BorderThickness="0"
CornerRadius="8"
Padding="20,9"
FontSize="13"
FontWeight="SemiBold"
Cursor="Hand"
IsEnabled="{Binding IsConnected}">
<Button.Content>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Spacing="6">
<heroicons:HeroIcon Type="XCircle"
Width="16" Height="16"
Foreground="White"
VerticalAlignment="Center"/>
<TextBlock Text="断开"
FontSize="13"
FontWeight="SemiBold"
Foreground="White"
VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
<Button.Styles>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#C0392B"/>
</Style>
<Style Selector="Button:disabled">
<Setter Property="Background" Value="#E5E7EB"/>
<Setter Property="Foreground" Value="#9CA3AF"/>
</Style>
</Button.Styles>
</Button>
</StackPanel>
</Grid>
</StackPanel>
</Expander>
</Border>
<!-- 第二行:左右分栏 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!-- 左边:已发送消息 -->
<Border Grid.Column="0"
Background="White"
BorderBrush="#E5E7EB"
BorderThickness="1"
CornerRadius="10"
Padding="0"
Margin="0,0,12,0"
HorizontalAlignment="Stretch">
<Grid RowDefinitions="Auto,*">
<Border Grid.Row="0"
Background="#F9FAFB"
BorderBrush="#E5E7EB"
BorderThickness="0,0,0,1"
CornerRadius="10,10,0,0"
Padding="16,12">
<Grid>
<StackPanel Orientation="Horizontal" Spacing="8">
<heroicons:HeroIcon Type="ArrowUpTray"
Width="18" Height="18"
Foreground="#1F2937"
VerticalAlignment="Center"/>
<TextBlock Text="已发送消息"
FontSize="14"
FontWeight="SemiBold"
Foreground="#1F2937"
VerticalAlignment="Center"/>
<Border Background="#3498DB"
CornerRadius="8"
Padding="4,2"
VerticalAlignment="Center">
<TextBlock Text="{Binding SentMessages.Count}"
FontSize="10"
FontWeight="Bold"
Foreground="White"/>
</Border>
</StackPanel>
<Button Command="{Binding ClearMessagesCommand}"
HorizontalAlignment="Right"
Background="Transparent"
Foreground="#6B7280"
BorderThickness="0"
CornerRadius="6"
Padding="8,4"
FontSize="12"
Cursor="Hand">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="4">
<heroicons:HeroIcon Type="Trash"
Width="14" Height="14"
Foreground="#6B7280"
VerticalAlignment="Center"/>
<TextBlock Text="清空"
FontSize="12"
Foreground="#6B7280"
VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
<Button.Styles>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#F3F4F6"/>
<Setter Property="Foreground" Value="#1F2937"/>
</Style>
</Button.Styles>
</Button>
</Grid>
</Border>
<Grid Grid.Row="1"
RowDefinitions="*,Auto"
Margin="16">
<ScrollViewer Grid.Row="0"
VerticalScrollBarVisibility="Auto"
Margin="0,0,0,12">
<ItemsControl ItemsSource="{Binding SentMessages}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="#FAFAFA"
Padding="14,10"
Margin="0,0,0,1"
BorderBrush="#E5E7EB"
BorderThickness="0,0,0,1">
<TextBlock Text="{Binding}"
TextWrapping="Wrap"
FontSize="12"
Foreground="#1F2937"
LineHeight="18"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<Grid Grid.Row="1"
ColumnDefinitions="*,Auto"
ColumnSpacing="8">
<TextBox Grid.Column="0"
Text="{Binding Message}"
Watermark="输入消息..."
AcceptsReturn="True"
TextWrapping="Wrap"
MinHeight="60"
FontSize="12"
Padding="10,8"
CornerRadius="8"
BorderBrush="#D1D5DB"
Background="#FAFAFA"/>
<Button Grid.Column="1"
Command="{Binding SendMessageCommand}"
Background="#27AE60"
Foreground="White"
BorderThickness="0"
CornerRadius="8"
Padding="20,12"
FontSize="13"
FontWeight="SemiBold"
MinWidth="100"
Cursor="Hand"
IsEnabled="{Binding IsConnected}">
<Button.Content>
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
Spacing="6">
<heroicons:HeroIcon Type="PaperAirplane"
Width="16" Height="16"
Foreground="White"
VerticalAlignment="Center"/>
<TextBlock Text="发送"
FontSize="13"
FontWeight="SemiBold"
Foreground="White"
VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
<Button.Styles>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#229954"/>
</Style>
<Style Selector="Button:disabled">
<Setter Property="Background" Value="#E5E7EB"/>
<Setter Property="Foreground" Value="#9CA3AF"/>
</Style>
</Button.Styles>
</Button>
</Grid>
</Grid>
</Grid>
</Border>
<!-- 右边:接收消息(占2/3) -->
<Border Grid.Column="1"
Background="White"
BorderBrush="#E5E7EB"
BorderThickness="1"
CornerRadius="10"
Padding="0"
HorizontalAlignment="Stretch">
<Grid RowDefinitions="Auto,*">
<Border Grid.Row="0"
Background="#F9FAFB"
BorderBrush="#E5E7EB"
BorderThickness="0,0,0,1"
CornerRadius="10,10,0,0"
Padding="16,12">
1 month ago
<Grid ColumnDefinitions="*,Auto,Auto">
<StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="8">
<heroicons:HeroIcon Type="ArrowDownTray"
Width="18" Height="18"
Foreground="#1F2937"
VerticalAlignment="Center"/>
<TextBlock Text="接收消息"
FontSize="14"
FontWeight="SemiBold"
Foreground="#1F2937"
VerticalAlignment="Center"/>
<Border Background="#F39C12"
CornerRadius="8"
Padding="4,2"
VerticalAlignment="Center">
<TextBlock Text="{Binding ReceivedMessages.Count}"
FontSize="10"
FontWeight="Bold"
Foreground="White"/>
</Border>
</StackPanel>
1 month ago
<CheckBox Grid.Column="1"
Content="自动置底"
IsChecked="{Binding IsAutoScrollToBottom}"
VerticalAlignment="Center"
Margin="12,0"
FontSize="12"
Foreground="#1F2937"/>
<Button Command="{Binding ClearMessagesCommand}"
1 month ago
Grid.Column="2"
HorizontalAlignment="Right"
Background="Transparent"
Foreground="#6B7280"
BorderThickness="0"
CornerRadius="6"
Padding="8,4"
FontSize="12"
Cursor="Hand">
<Button.Content>
<StackPanel Orientation="Horizontal" Spacing="4">
<heroicons:HeroIcon Type="Trash"
Width="14" Height="14"
Foreground="#6B7280"
VerticalAlignment="Center"/>
<TextBlock Text="清空"
FontSize="12"
Foreground="#6B7280"
VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
<Button.Styles>
<Style Selector="Button:pointerover">
<Setter Property="Background" Value="#F3F4F6"/>
<Setter Property="Foreground" Value="#1F2937"/>
</Style>
</Button.Styles>
</Button>
</Grid>
</Border>
1 month ago
<ListBox Grid.Row="1"
x:Name="ReceivedMessagesListBox"
ItemsSource="{Binding ReceivedMessages}"
BorderThickness="0"
Background="Transparent"
Padding="0"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Styles>
<Style Selector="ListBoxItem">
<Setter Property="FocusAdorner" Value="{x:Null}"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Background" Value="Transparent"/>
</Style>
<Style Selector="ListBoxItem:pointerover">
<Setter Property="Background" Value="Transparent"/>
</Style>
<Style Selector="ListBoxItem:selected">
<Setter Property="Background" Value="Transparent"/>
</Style>
</ListBox.Styles>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#F0FDF4"
Padding="14,10"
Margin="0,0,0,1"
BorderBrush="#D1FAE5"
BorderThickness="0,0,0,1">
<Grid ColumnDefinitions="Auto,*"
ColumnSpacing="12">
<Border Background="#DCFCE7"
CornerRadius="6"
Padding="8,3"
VerticalAlignment="Top">
<TextBlock Text="{Binding Index}"
FontSize="12"
FontWeight="Bold"
Foreground="#047857"/>
</Border>
<TextBlock Grid.Column="1"
Text="{Binding DisplayText}"
TextWrapping="Wrap"
FontSize="12"
Foreground="#1F2937"
LineHeight="18"/>
1 month ago
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Border>
</Grid>
</Grid>
</Grid>
</reactive:ReactiveUserControl>