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. 视图切换
使用事件机制实现多页面切换：
```csharp
public event Action<string>? ViewChanged;
```

三个主要视图：
- Idle（待机）
- Payment（支付）
- Washing（洗护中）

### 3. 数据绑定
所有UI元素通过数据绑定连接到ViewModel：
- `Packages` - 套餐列表
- `StatusMessage` - 状态消息
- `IsDoorOpen` - 门状态
- `IsWashing` - 洗护状态
- `WashProgress` - 洗护进度
- `CurrentStep` - 当前步骤
- `RemainingTime` - 剩余时间

### 4. 洗护流程模拟
```csharp
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/秒）。

## 许可证

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