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.
546 lines
30 KiB
546 lines
30 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">
|
|
<Grid>
|
|
<StackPanel 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>
|
|
<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>
|
|
|
|
<ScrollViewer Grid.Row="1"
|
|
VerticalScrollBarVisibility="Auto">
|
|
<ItemsControl ItemsSource="{Binding ReceivedMessages}">
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Border Background="#F0FDF4"
|
|
Padding="14,10"
|
|
Margin="0,0,0,1"
|
|
BorderBrush="#D1FAE5"
|
|
BorderThickness="0,0,0,1">
|
|
<TextBlock Text="{Binding}"
|
|
TextWrapping="Wrap"
|
|
FontSize="12"
|
|
Foreground="#1F2937"
|
|
LineHeight="18"/>
|
|
</Border>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</ScrollViewer>
|
|
</Grid>
|
|
</Border>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</reactive:ReactiveUserControl>
|
|
|