204 lines
5.4 KiB
Markdown
204 lines
5.4 KiB
Markdown
# 无人自动洗宠机 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/秒）。
|
||
|
||
## 许可证
|
||
|
||
本项目遵循技术设计文档规范，用于无人自动洗宠机智能控制系统。
|