feat: add ui
This commit is contained in:
GukSang.Jin
@@ -1,153 +1,601 @@
|
||||
<Window x:Class="PetWashControl.Views.MainWindow"
|
||||
<Window x:Class="PetWashControl.Views.MainWindow"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
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:local="clr-namespace:PetWashControl.Views"
|
||||
mc:Ignorable="d"
|
||||
Title="无人自助洗宠机控制系统" Height="600" Width="900"
|
||||
WindowStartupLocation="CenterScreen">
|
||||
<Grid Margin="20" Background="{StaticResource BackgroundBrush}">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
</Grid.RowDefinitions>
|
||||
Title="无人自动洗宠机智能控制系统"
|
||||
Height="800" Width="1024"
|
||||
WindowStyle="None"
|
||||
ResizeMode="NoResize"
|
||||
WindowStartupLocation="CenterScreen"
|
||||
Background="{StaticResource BackgroundGradient}">
|
||||
|
||||
<Grid>
|
||||
<!-- 主内容区域 -->
|
||||
<Grid x:Name="MainContent">
|
||||
<!-- 待机界面 -->
|
||||
<Grid x:Name="IdleView" Visibility="Visible">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 标题 -->
|
||||
<TextBlock Grid.Row="0" Text="无人自助洗宠机"
|
||||
Style="{StaticResource TitleTextBlock}"
|
||||
HorizontalAlignment="Center" Margin="0,0,0,20"/>
|
||||
<!-- 标题 -->
|
||||
<TextBlock Grid.Row="0"
|
||||
Text="无人自动洗宠机"
|
||||
Style="{StaticResource TitleTextBlock}"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,40,0,30"/>
|
||||
|
||||
<!-- 套餐选择 -->
|
||||
<GroupBox Grid.Row="1" Header="选择套餐" Padding="10">
|
||||
<ListBox ItemsSource="{Binding Packages}" SelectedItem="{Binding SelectedPackage}"
|
||||
HorizontalContentAlignment="Stretch">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<Border BorderBrush="{StaticResource BorderBrush}"
|
||||
BorderThickness="1"
|
||||
Padding="15"
|
||||
Margin="5"
|
||||
Background="{StaticResource SurfaceBrush}"
|
||||
CornerRadius="8">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#CCCCCC"
|
||||
Direction="270"
|
||||
ShadowDepth="2"
|
||||
BlurRadius="8"
|
||||
Opacity="0.3"/>
|
||||
</Border.Effect>
|
||||
<Grid>
|
||||
<!-- 中间状态区域 -->
|
||||
<Grid Grid.Row="1" Margin="40,0">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 系统状态面板 -->
|
||||
<Border Grid.Row="0" Style="{StaticResource TechPanel}" Margin="0,0,0,20">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<!-- 左侧：硬件状态 -->
|
||||
<StackPanel Grid.Column="0">
|
||||
<TextBlock Text="硬件状态"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
Margin="0,0,0,15"/>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="0,8">
|
||||
<Ellipse Style="{StaticResource LEDIndicator}"/>
|
||||
<TextBlock Text="水泵系统"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
Margin="10,0,0,0"/>
|
||||
<TextBlock Text="正常"
|
||||
Foreground="{StaticResource SuccessBrush}"
|
||||
FontWeight="Bold"
|
||||
Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="0,8">
|
||||
<Ellipse Style="{StaticResource LEDIndicator}"/>
|
||||
<TextBlock Text="加热系统"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
Margin="10,0,0,0"/>
|
||||
<TextBlock Text="正常"
|
||||
Foreground="{StaticResource SuccessBrush}"
|
||||
FontWeight="Bold"
|
||||
Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="0,8">
|
||||
<Ellipse Style="{StaticResource LEDIndicator}"/>
|
||||
<TextBlock Text="风干系统"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
Margin="10,0,0,0"/>
|
||||
<TextBlock Text="正常"
|
||||
Foreground="{StaticResource SuccessBrush}"
|
||||
FontWeight="Bold"
|
||||
Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="0,8">
|
||||
<Ellipse Style="{StaticResource LEDIndicator}"/>
|
||||
<TextBlock Text="门锁系统"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
Margin="10,0,0,0"/>
|
||||
<TextBlock Text="{Binding IsDoorOpen, Converter={StaticResource BoolToStatusConverter}}"
|
||||
Foreground="{StaticResource SuccessBrush}"
|
||||
FontWeight="Bold"
|
||||
Margin="10,0,0,0"/>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<!-- 右侧：实时数据 -->
|
||||
<StackPanel Grid.Column="1">
|
||||
<TextBlock Text="实时数据"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
Margin="0,0,0,15"/>
|
||||
|
||||
<Grid Margin="0,8">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<TextBlock Grid.Column="0"
|
||||
Text="水温："
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="40.0°C"
|
||||
Style="{StaticResource DataTextBlock}"
|
||||
HorizontalAlignment="Right"/>
|
||||
</Grid>
|
||||
|
||||
<Grid Margin="0,8">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<TextBlock Grid.Column="0"
|
||||
Text="水位："
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="85%"
|
||||
Style="{StaticResource DataTextBlock}"
|
||||
HorizontalAlignment="Right"/>
|
||||
</Grid>
|
||||
|
||||
<Grid Margin="0,8">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<TextBlock Grid.Column="0"
|
||||
Text="运行时间："
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="1250h"
|
||||
Style="{StaticResource DataTextBlock}"
|
||||
HorizontalAlignment="Right"/>
|
||||
</Grid>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- 开始按钮或关门按钮 -->
|
||||
<StackPanel Grid.Row="1"
|
||||
VerticalAlignment="Center"
|
||||
HorizontalAlignment="Center">
|
||||
<!-- 正常开始按钮 -->
|
||||
<Button Content="点击开始"
|
||||
Style="{StaticResource TechButton}"
|
||||
Width="300"
|
||||
Height="80"
|
||||
FontSize="32"
|
||||
Visibility="{Binding IsDoorOpen, Converter={StaticResource InverseBoolToVisibilityConverter}}"
|
||||
Command="{Binding ShowPaymentCommand}"/>
|
||||
|
||||
<!-- 门已打开，显示关门按钮 -->
|
||||
<StackPanel Visibility="{Binding IsDoorOpen, Converter={StaticResource BoolToVisibilityConverter}}">
|
||||
<Border Background="{StaticResource WarningBrush}"
|
||||
CornerRadius="10"
|
||||
Padding="20"
|
||||
Margin="0,0,0,20">
|
||||
<StackPanel>
|
||||
<TextBlock Text="⚠ 设备门已打开"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="White"/>
|
||||
<TextBlock Text="请将宠物放入设备后点击下方按钮关门"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
HorizontalAlignment="Center"
|
||||
Foreground="White"
|
||||
Margin="0,10,0,0"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<Button Content="关闭门并开始洗护"
|
||||
Style="{StaticResource TechButton}"
|
||||
Width="300"
|
||||
Height="80"
|
||||
FontSize="28"
|
||||
Command="{Binding CloseDoorCommand}"/>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
|
||||
<!-- 底部状态栏 -->
|
||||
<Border Grid.Row="2"
|
||||
Background="{StaticResource PanelBrush}"
|
||||
BorderBrush="{StaticResource BorderBrush}"
|
||||
BorderThickness="0,2,0,0"
|
||||
Padding="20,15">
|
||||
<Grid>
|
||||
<TextBlock Text="{Binding StatusMessage}"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
HorizontalAlignment="Left"/>
|
||||
<TextBlock HorizontalAlignment="Right">
|
||||
<Run Text="系统版本: "
|
||||
Foreground="{StaticResource TextSecondaryBrush}"/>
|
||||
<Run Text="v1.0.0"
|
||||
Foreground="{StaticResource AccentBrush}"
|
||||
FontWeight="Bold"/>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<!-- 支付界面 -->
|
||||
<Grid x:Name="PaymentView" Visibility="Collapsed">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 标题 -->
|
||||
<StackPanel Grid.Row="0" Margin="0,40,0,30">
|
||||
<TextBlock Text="选择套餐"
|
||||
Style="{StaticResource TitleTextBlock}"
|
||||
HorizontalAlignment="Center"/>
|
||||
<TextBlock Text="请选择您需要的洗护套餐"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,10,0,0"/>
|
||||
</StackPanel>
|
||||
|
||||
<!-- 套餐列表 -->
|
||||
<ScrollViewer Grid.Row="1"
|
||||
VerticalScrollBarVisibility="Auto"
|
||||
Margin="40,0">
|
||||
<ItemsControl ItemsSource="{Binding Packages}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<Border Style="{StaticResource TechPanel}"
|
||||
Margin="0,0,0,20"
|
||||
Cursor="Hand"
|
||||
MouseLeftButtonDown="Package_Click">
|
||||
<Grid>
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<StackPanel Grid.Column="0">
|
||||
<TextBlock Text="{Binding Name}"
|
||||
Style="{StaticResource SubtitleTextBlock}"/>
|
||||
<TextBlock Text="{Binding Description}"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
Margin="0,8,0,0"
|
||||
TextWrapping="Wrap"/>
|
||||
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
|
||||
<TextBlock Text="时长: "
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
<TextBlock Text="{Binding DurationMinutes}"
|
||||
Foreground="{StaticResource AccentBrush}"
|
||||
FontWeight="Bold"/>
|
||||
<TextBlock Text=" 分钟"
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
|
||||
<TextBlock Grid.Column="1"
|
||||
VerticalAlignment="Center"
|
||||
Margin="30,0,0,0"
|
||||
FontFamily="Consolas"
|
||||
Foreground="#00D4FF">
|
||||
<Run Text="¥"
|
||||
FontSize="36"/>
|
||||
<Run Text="{Binding Price}"
|
||||
FontSize="48"
|
||||
FontWeight="Bold"/>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</ScrollViewer>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<StackPanel Grid.Row="2"
|
||||
Orientation="Horizontal"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,30">
|
||||
<Button Content="返回"
|
||||
Style="{StaticResource SecondaryTechButton}"
|
||||
Width="150"
|
||||
Height="50"
|
||||
Command="{Binding BackToIdleCommand}"/>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
|
||||
<!-- 二维码支付界面 -->
|
||||
<Grid x:Name="QRCodeView" Visibility="Collapsed">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 标题 -->
|
||||
<StackPanel Grid.Row="0" Margin="0,40,0,30">
|
||||
<TextBlock Text="扫码支付"
|
||||
Style="{StaticResource TitleTextBlock}"
|
||||
HorizontalAlignment="Center"/>
|
||||
<TextBlock Text="请使用微信或支付宝扫描二维码完成支付"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,10,0,0"/>
|
||||
</StackPanel>
|
||||
|
||||
<!-- 支付内容 -->
|
||||
<ScrollViewer Grid.Row="1"
|
||||
VerticalScrollBarVisibility="Auto"
|
||||
Margin="40,0,40,20">
|
||||
<Border Style="{StaticResource TechPanel}"
|
||||
MaxWidth="600"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,20,0,20">
|
||||
<StackPanel Margin="20">
|
||||
<!-- 订单信息 -->
|
||||
<Grid Margin="0,0,0,30">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<StackPanel Grid.Column="0">
|
||||
<TextBlock Text="{Binding Name}"
|
||||
FontSize="18"
|
||||
FontWeight="Bold"
|
||||
Foreground="{StaticResource TextPrimaryBrush}"/>
|
||||
<TextBlock Text="{Binding Description}"
|
||||
FontSize="12"
|
||||
Foreground="{StaticResource TextSecondaryBrush}"
|
||||
Margin="0,5,0,0"
|
||||
TextWrapping="Wrap"/>
|
||||
<TextBlock FontSize="12"
|
||||
Foreground="{StaticResource TextSecondaryBrush}"
|
||||
Margin="0,5,0,0">
|
||||
<Run Text="时长: "/>
|
||||
<Run Text="{Binding DurationMinutes}" FontWeight="SemiBold"/>
|
||||
<Run Text=" 分钟"/>
|
||||
<TextBlock Text="套餐名称"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
Foreground="{StaticResource TextSecondaryBrush}"/>
|
||||
<TextBlock Text="{Binding SelectedPackage.Name}"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
Margin="0,5,0,0"/>
|
||||
</StackPanel>
|
||||
|
||||
<StackPanel Grid.Column="1" HorizontalAlignment="Right">
|
||||
<TextBlock Text="支付金额"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
Foreground="{StaticResource TextSecondaryBrush}"
|
||||
HorizontalAlignment="Right"/>
|
||||
<TextBlock HorizontalAlignment="Right" Margin="0,5,0,0">
|
||||
<Run Text="¥"
|
||||
Foreground="{StaticResource ErrorBrush}"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"/>
|
||||
<Run Text="{Binding SelectedPackage.Price}"
|
||||
Foreground="{StaticResource ErrorBrush}"
|
||||
FontSize="36"
|
||||
FontWeight="Bold"/>
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
<TextBlock Grid.Column="1"
|
||||
VerticalAlignment="Center"
|
||||
FontSize="24"
|
||||
FontWeight="Bold"
|
||||
Foreground="{StaticResource PrimaryBrush}"
|
||||
Margin="20,0,0,0">
|
||||
<Run Text="¥"/>
|
||||
<Run Text="{Binding Price}"/>
|
||||
</Grid>
|
||||
|
||||
<!-- 模拟二维码 -->
|
||||
<Border Background="White"
|
||||
Width="280"
|
||||
Height="280"
|
||||
CornerRadius="10"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,20">
|
||||
<Grid>
|
||||
<!-- 简单的二维码模拟 -->
|
||||
<Viewbox Width="240" Height="240">
|
||||
<Canvas Width="240" Height="240">
|
||||
<!-- 模拟二维码图案 -->
|
||||
<Rectangle Canvas.Left="0" Canvas.Top="0" Width="60" Height="60" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="180" Canvas.Top="0" Width="60" Height="60" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="0" Canvas.Top="180" Width="60" Height="60" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="20" Canvas.Top="20" Width="20" Height="20" Fill="White"/>
|
||||
<Rectangle Canvas.Left="200" Canvas.Top="20" Width="20" Height="20" Fill="White"/>
|
||||
<Rectangle Canvas.Left="20" Canvas.Top="200" Width="20" Height="20" Fill="White"/>
|
||||
|
||||
<!-- 中间区域随机方块 -->
|
||||
<Rectangle Canvas.Left="80" Canvas.Top="40" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="120" Canvas.Top="40" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="160" Canvas.Top="60" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="100" Canvas.Top="80" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="140" Canvas.Top="100" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="80" Canvas.Top="120" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="160" Canvas.Top="120" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="100" Canvas.Top="140" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="140" Canvas.Top="160" Width="20" Height="20" Fill="Black"/>
|
||||
<Rectangle Canvas.Left="80" Canvas.Top="180" Width="20" Height="20" Fill="Black"/>
|
||||
</Canvas>
|
||||
</Viewbox>
|
||||
</Grid>
|
||||
</Border>
|
||||
|
||||
<!-- 支付提示 -->
|
||||
<TextBlock HorizontalAlignment="Center"
|
||||
Foreground="{StaticResource TextSecondaryBrush}"
|
||||
FontSize="16"
|
||||
Margin="0,0,0,20">
|
||||
<Run Text="订单号: "/>
|
||||
<Run Text="{Binding CurrentOrder.Id}"
|
||||
Foreground="{StaticResource AccentBrush}"
|
||||
FontFamily="Consolas"/>
|
||||
</TextBlock>
|
||||
|
||||
<!-- 按钮组 -->
|
||||
<StackPanel>
|
||||
<Button Content="模拟支付成功"
|
||||
Style="{StaticResource TechButton}"
|
||||
Width="250"
|
||||
Height="50"
|
||||
Margin="0,0,0,15"
|
||||
Command="{Binding SimulatePaymentCommand}"/>
|
||||
|
||||
<Button Content="取消支付"
|
||||
Style="{StaticResource SecondaryTechButton}"
|
||||
Width="250"
|
||||
Height="50"
|
||||
Command="{Binding CancelPaymentCommand}"/>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
</ScrollViewer>
|
||||
</Grid>
|
||||
|
||||
<!-- 洗护进度界面 -->
|
||||
<Grid x:Name="WashingView" Visibility="Collapsed">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 标题 -->
|
||||
<TextBlock Grid.Row="0"
|
||||
Text="洗护进行中"
|
||||
Style="{StaticResource TitleTextBlock}"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,40,0,30"/>
|
||||
|
||||
<!-- 进度内容 -->
|
||||
<Grid Grid.Row="1" Margin="40,0">
|
||||
<Grid.RowDefinitions>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="Auto"/>
|
||||
<RowDefinition Height="*"/>
|
||||
</Grid.RowDefinitions>
|
||||
|
||||
<!-- 当前步骤 -->
|
||||
<Border Grid.Row="0" Style="{StaticResource TechPanel}" Margin="0,0,0,20">
|
||||
<StackPanel>
|
||||
<TextBlock Text="当前步骤"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,0,0,15"/>
|
||||
<TextBlock Text="{Binding CurrentStep}"
|
||||
Style="{StaticResource DigitalDisplay}"
|
||||
HorizontalAlignment="Center"
|
||||
FontSize="42"/>
|
||||
<TextBlock HorizontalAlignment="Center" Margin="0,10,0,0">
|
||||
<Run Text="剩余时间: "
|
||||
Foreground="#B0C4DE"
|
||||
FontSize="16"/>
|
||||
<Run Text="{Binding RemainingTime}"
|
||||
Foreground="#00D4FF"
|
||||
FontWeight="Bold"
|
||||
FontFamily="Consolas"
|
||||
FontSize="32"/>
|
||||
</TextBlock>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<Border Grid.Row="1" Style="{StaticResource TechPanel}" Margin="0,0,0,20">
|
||||
<StackPanel>
|
||||
<Grid Margin="0,0,0,10">
|
||||
<TextBlock Text="总体进度"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
HorizontalAlignment="Left"/>
|
||||
<TextBlock HorizontalAlignment="Right"
|
||||
FontFamily="Consolas"
|
||||
FontSize="28"
|
||||
Foreground="#00D4FF"
|
||||
FontWeight="Bold">
|
||||
<Run Text="{Binding WashProgress}"/>
|
||||
<Run Text="%"/>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
</Border>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
</GroupBox>
|
||||
<ProgressBar Value="{Binding WashProgress}"
|
||||
Maximum="100"
|
||||
Style="{StaticResource TechProgressBar}"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<StackPanel Grid.Row="2"
|
||||
Orientation="Horizontal"
|
||||
HorizontalAlignment="Center"
|
||||
Margin="0,20,0,10">
|
||||
<Button Content="创建订单"
|
||||
Command="{Binding CreateOrderCommand}"
|
||||
Style="{StaticResource PrimaryButton}"
|
||||
Width="120"
|
||||
Height="40"
|
||||
Margin="5"/>
|
||||
<Button Content="模拟支付"
|
||||
Command="{Binding SimulatePaymentCommand}"
|
||||
Style="{StaticResource SecondaryButton}"
|
||||
Width="120"
|
||||
Height="40"
|
||||
Margin="5"/>
|
||||
<Button Content="关门开始"
|
||||
Command="{Binding CloseDoorCommand}"
|
||||
Style="{StaticResource PrimaryButton}"
|
||||
Width="120"
|
||||
Height="40"
|
||||
Margin="5"
|
||||
IsEnabled="{Binding IsDoorOpen}"/>
|
||||
</StackPanel>
|
||||
<!-- 流程可视化 -->
|
||||
<Border Grid.Row="2" Style="{StaticResource TechPanel}">
|
||||
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
||||
<StackPanel>
|
||||
<TextBlock Text="洗护流程"
|
||||
Style="{StaticResource SubtitleTextBlock}"
|
||||
Margin="0,0,0,15"/>
|
||||
|
||||
<!-- 流程步骤列表 -->
|
||||
<ItemsControl ItemsSource="{Binding WashSteps}">
|
||||
<ItemsControl.ItemTemplate>
|
||||
<DataTemplate>
|
||||
<Grid Margin="0,5">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="40"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<Ellipse Grid.Column="0"
|
||||
Width="20" Height="20">
|
||||
<Ellipse.Style>
|
||||
<Style TargetType="Ellipse">
|
||||
<Setter Property="Fill" Value="{StaticResource BorderBrush}"/>
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Status}" Value="进行中">
|
||||
<Setter Property="Fill" Value="{StaticResource AccentBrush}"/>
|
||||
</DataTrigger>
|
||||
<DataTrigger Binding="{Binding Status}" Value="已完成">
|
||||
<Setter Property="Fill" Value="#4CAF50"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</Ellipse.Style>
|
||||
</Ellipse>
|
||||
<TextBlock Grid.Column="1"
|
||||
Text="{Binding Name}"
|
||||
Style="{StaticResource BodyTextBlock}"
|
||||
VerticalAlignment="Center"
|
||||
Margin="10,0"/>
|
||||
<TextBlock Grid.Column="2"
|
||||
Text="{Binding Status}">
|
||||
<TextBlock.Style>
|
||||
<Style TargetType="TextBlock">
|
||||
<Setter Property="Foreground" Value="{StaticResource TextSecondaryBrush}"/>
|
||||
<Style.Triggers>
|
||||
<DataTrigger Binding="{Binding Status}" Value="进行中">
|
||||
<Setter Property="Foreground" Value="{StaticResource AccentBrush}"/>
|
||||
<Setter Property="FontWeight" Value="Bold"/>
|
||||
</DataTrigger>
|
||||
<DataTrigger Binding="{Binding Status}" Value="已完成">
|
||||
<Setter Property="Foreground" Value="#4CAF50"/>
|
||||
<Setter Property="FontWeight" Value="Bold"/>
|
||||
</DataTrigger>
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
</TextBlock.Style>
|
||||
</TextBlock>
|
||||
</Grid>
|
||||
</DataTemplate>
|
||||
</ItemsControl.ItemTemplate>
|
||||
</ItemsControl>
|
||||
</StackPanel>
|
||||
</ScrollViewer>
|
||||
</Border>
|
||||
</Grid>
|
||||
|
||||
<!-- 状态显示 -->
|
||||
<Border Grid.Row="3"
|
||||
Background="{StaticResource SurfaceBrush}"
|
||||
Padding="15"
|
||||
CornerRadius="8"
|
||||
BorderBrush="{StaticResource BorderBrush}"
|
||||
BorderThickness="1">
|
||||
<Border.Effect>
|
||||
<DropShadowEffect Color="#CCCCCC"
|
||||
Direction="270"
|
||||
ShadowDepth="2"
|
||||
BlurRadius="8"
|
||||
Opacity="0.3"/>
|
||||
</Border.Effect>
|
||||
<StackPanel>
|
||||
<TextBlock Text="系统状态"
|
||||
FontSize="14"
|
||||
FontWeight="Bold"
|
||||
Foreground="{StaticResource TextPrimaryBrush}"
|
||||
Margin="0,0,0,5"/>
|
||||
<TextBlock Text="{Binding StatusMessage}"
|
||||
FontSize="16"
|
||||
TextWrapping="Wrap"
|
||||
Foreground="{StaticResource TextPrimaryBrush}"/>
|
||||
|
||||
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
|
||||
<TextBlock Text="门状态: "
|
||||
FontSize="14"
|
||||
Foreground="{StaticResource TextSecondaryBrush}"/>
|
||||
<TextBlock Text="{Binding IsDoorOpen, Converter={StaticResource BoolToStatusConverter}}"
|
||||
FontSize="14"
|
||||
FontWeight="Bold"
|
||||
Foreground="{StaticResource AccentBrush}"/>
|
||||
|
||||
<TextBlock Text=" | 清洗状态: "
|
||||
FontSize="14"
|
||||
Margin="20,0,0,0"
|
||||
Foreground="{StaticResource TextSecondaryBrush}"/>
|
||||
<TextBlock Text="{Binding IsWashing, Converter={StaticResource BoolToWashingConverter}}"
|
||||
FontSize="14"
|
||||
FontWeight="Bold"
|
||||
Foreground="{StaticResource AccentBrush}"/>
|
||||
</StackPanel>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
<!-- 底部状态 -->
|
||||
<Border Grid.Row="2"
|
||||
Background="{StaticResource PanelBrush}"
|
||||
BorderBrush="{StaticResource BorderBrush}"
|
||||
BorderThickness="0,2,0,0"
|
||||
Padding="20,15">
|
||||
<Grid>
|
||||
<StackPanel Orientation="Horizontal">
|
||||
<TextBlock Text="水温: "
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
<TextBlock Text="40.0°C"
|
||||
Foreground="{StaticResource AccentBrush}"
|
||||
FontWeight="Bold"
|
||||
Margin="5,0,20,0"/>
|
||||
<TextBlock Text="水位: "
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
<TextBlock Text="85%"
|
||||
Foreground="{StaticResource AccentBrush}"
|
||||
FontWeight="Bold"
|
||||
Margin="5,0,20,0"/>
|
||||
<TextBlock Text="门状态: "
|
||||
Style="{StaticResource BodyTextBlock}"/>
|
||||
<TextBlock Text="已锁定"
|
||||
Foreground="{StaticResource SuccessBrush}"
|
||||
FontWeight="Bold"
|
||||
Margin="5,0"/>
|
||||
</StackPanel>
|
||||
<Button Content="紧急停止"
|
||||
Style="{StaticResource TechButton}"
|
||||
Background="{StaticResource ErrorBrush}"
|
||||
BorderBrush="{StaticResource ErrorBrush}"
|
||||
Width="120"
|
||||
Height="35"
|
||||
FontSize="16"
|
||||
HorizontalAlignment="Right"/>
|
||||
</Grid>
|
||||
</Border>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Window>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
using PetWashControl.ViewModels;
|
||||
using PetWashControl.Models;
|
||||
using System.Windows;
|
||||
using System.Windows.Input;
|
||||
|
||||
namespace PetWashControl.Views;
|
||||
|
||||
@@ -11,6 +13,7 @@ public partial class MainWindow : Window
|
||||
{
|
||||
InitializeComponent();
|
||||
_viewModel = new MainViewModel();
|
||||
_viewModel.ViewChanged += OnViewChanged;
|
||||
DataContext = _viewModel;
|
||||
Loaded += MainWindow_Loaded;
|
||||
}
|
||||
@@ -19,4 +22,38 @@ public partial class MainWindow : Window
|
||||
{
|
||||
await _viewModel.InitializeAsync();
|
||||
}
|
||||
|
||||
private void OnViewChanged(string viewName)
|
||||
{
|
||||
// 隐藏所有视图
|
||||
IdleView.Visibility = Visibility.Collapsed;
|
||||
PaymentView.Visibility = Visibility.Collapsed;
|
||||
QRCodeView.Visibility = Visibility.Collapsed;
|
||||
WashingView.Visibility = Visibility.Collapsed;
|
||||
|
||||
// 显示指定视图
|
||||
switch (viewName)
|
||||
{
|
||||
case "Idle":
|
||||
IdleView.Visibility = Visibility.Visible;
|
||||
break;
|
||||
case "Payment":
|
||||
PaymentView.Visibility = Visibility.Visible;
|
||||
break;
|
||||
case "QRCode":
|
||||
QRCodeView.Visibility = Visibility.Visible;
|
||||
break;
|
||||
case "Washing":
|
||||
WashingView.Visibility = Visibility.Visible;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
private void Package_Click(object sender, MouseButtonEventArgs e)
|
||||
{
|
||||
if (sender is FrameworkElement element && element.DataContext is Package package)
|
||||
{
|
||||
_viewModel.SelectPackageCommand.Execute(package);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user