petwash/PetWashControl/UI_IMPLEMENTATION.md

无人自动洗宠机 WPF 界面实现说明

概述

本项目实现了符合技术设计文档要求的深蓝科技风格WPF界面，包含完整的用户交互流程和视觉设计。

设计特点

1. 深蓝科技风格

• 背景色: #0F3A7D (深蓝色渐变)
• 文字色: #E8F0FF (浅灰白色，高对比度)
• 强调色: #00D4FF (青蓝色，用于按钮和数据显示)
• 成功色: #00FF88 (绿色，用于正常状态)
• 警告色: #FFB800 (橙色)
• 错误色: #FF4444 (红色)

2. 视觉效果

• LED指示灯效果（带发光阴影）
• 科技感按钮（带青蓝色光晕）
• 数字显示采用等宽字体（Consolas）
• 所有面板带有微光边框效果

3. 界面布局

待机界面 (IdleView)

• 显示系统标题
• 硬件状态指示（水泵、加热、风干、门锁）
• 实时数据显示（水温、水位、运行时间）
• 大型"点击开始"按钮
• 底部状态栏

支付界面 (PaymentView)

• 套餐列表展示
• 每个套餐显示：名称、描述、时长、价格
• 点击套餐卡片即可选择
• 返回按钮

洗护进度界面 (WashingView)

• 当前步骤大字显示
• 剩余时间倒计时
• 总体进度条（带发光效果）
• 流程步骤列表（显示当前进行到哪一步）
• 底部实时数据（水温、水位、门状态）
• 紧急停止按钮

技术实现

1. MVVM架构

• View: MainWindow.xaml
• ViewModel: MainViewModel.cs
• Model: Package, Order

2. 视图切换

使用事件机制实现多页面切换：

public event Action<string>? ViewChanged;

三个主要视图：

• Idle（待机）
• Payment（支付）
• Washing（洗护中）

3. 数据绑定

所有UI元素通过数据绑定连接到ViewModel：

• Packages - 套餐列表
• StatusMessage - 状态消息
• IsDoorOpen - 门状态
• IsWashing - 洗护状态
• WashProgress - 洗护进度
• CurrentStep - 当前步骤
• RemainingTime - 剩余时间

4. 洗护流程模拟

private async Task SimulateWashingProcessAsync()
{
    var steps = new[]
    {
        ("第一次冲水", 120),
        ("沐浴露喷洒", 30),
        ("第二次冲水", 180),
        ("香波喷洒", 30),
        ("第三次冲水", 180),
        ("热风吹毛", 300),
        ("冷热风混合", 120)
    };
    // ... 执行流程
}

使用流程

用户操作流程

1. 待机界面 → 点击"点击开始"
2. 支付界面 → 选择套餐 → 确认支付
3. 返回待机 → 放入宠物 → 系统提示门已打开
4. 关门 → 自动切换到洗护界面
5. 洗护进度 → 显示实时进度和步骤
6. 完成 → 提示取出宠物 → 返回待机

开发者操作

1. 启动后端API服务（PetWash.Api）
2. 启动MQTT服务器（可选）
3. 运行WPF应用程序
4. 系统自动初始化并连接服务

样式资源

所有样式定义在 Resources/Styles.xaml：

按钮样式

• TechButton - 主要按钮（带发光效果）
• SecondaryTechButton - 次要按钮（透明背景）

面板样式

• TechPanel - 科技风面板（带边框和阴影）

文本样式

• TitleTextBlock - 标题（36pt，带发光）
• SubtitleTextBlock - 副标题（22pt）
• BodyTextBlock - 正文（16pt）
• DataTextBlock - 数据显示（28pt，等宽字体）
• DigitalDisplay - 数字显示（48pt，带发光）

其他样式

• LEDIndicator - LED指示灯
• TechProgressBar - 进度条

响应式设计

屏幕尺寸

• 默认: 1024x800 (适合7-10寸工控屏)
• 全屏无边框模式
• 所有触摸元素 ≥ 60x60px

字体大小

• 标题: 36pt
• 副标题: 22pt
• 正文: 16pt
• 数据: 28-48pt

扩展功能

待实现功能

1. 参数设置界面 - 配置洗护参数
2. 故障诊断界面 - 显示故障日志和诊断信息
3. 二维码支付 - 集成真实支付系统
4. 实时传感器数据 - 连接真实硬件传感器
5. 远程监控 - 云端数据上传

建议改进

1. 添加动画效果（页面切换、进度条）
2. 添加声音提示
3. 多语言支持
4. 用户偏好设置
5. 历史订单查询

文件结构

PetWashControl/
├── Views/
│   ├── MainWindow.xaml          # 主界面
│   └── MainWindow.xaml.cs       # 主界面代码
├── ViewModels/
│   └── MainViewModel.cs         # 主视图模型
├── Models/
│   ├── Package.cs               # 套餐模型
│   └── Order.cs                 # 订单模型
├── Services/
│   ├── ApiService.cs            # API服务
│   ├── MqttClientService.cs     # MQTT服务
│   ├── ConfigurationService.cs  # 配置服务
│   └── LogService.cs            # 日志服务
├── Resources/
│   └── Styles.xaml              # 样式资源
├── Converters/
│   └── BoolToStatusConverter.cs # 值转换器
└── App.xaml                     # 应用程序入口

依赖项

• .NET 8.0
• CommunityToolkit.Mvvm
• MQTTnet
• System.Text.Json

运行要求

• Windows 10/11
• .NET 8.0 Runtime
• 分辨率: 1024x800 或更高
• 触摸屏支持（可选）

调试模式

在开发模式下，支付流程会弹出确认对话框而不是显示二维码，洗护流程会加速执行（100ms/秒而不是1000ms/秒）。

许可证

本项目遵循技术设计文档规范，用于无人自动洗宠机智能控制系统。