cgx/petwash

Fork 0

Files

GukSang.Jin 9c66b6cd82

2026-03-03 16:55:02 +08:00

5.2 KiB

Raw Blame History

UI界面快速启动指南

编译成功 ✅

新的UI界面已经成功编译，可以立即运行测试。

启动步骤

1. 启动后端API服务

cd PetWash.Api
dotnet run

后端服务将在 http://localhost:5000 启动

2. 启动WPF客户端

cd PetWashControl
dotnet run

或者直接运行编译好的程序：

PetWashControl\bin\Debug\net8.0-windows\PetWashControl.exe

界面功能测试

首页（待机界面）

查看大号宠物图标和欢迎文字
点击"点击开始"按钮进入套餐选择
点击底部导航栏的按钮：
- 📖 使用说明
- 📦 套餐详情（进入套餐选择）
- 📞 联系客服
- ⚙ 设置（进入设置界面）

套餐选择界面

查看3个套餐卡片（深橙色背景）
点击任意套餐卡片进入支付界面
点击左上角"←"返回首页

支付二维码界面

查看选中的套餐信息和支付金额
查看二维码（模拟）
点击"模拟支付成功"按钮完成支付
支付成功后自动返回首页，门打开

首页（门打开状态）

查看橙色提示框"设备门已打开"
点击"关闭门并开始洗护"按钮
自动进入洗护流程界面

洗护流程界面

左侧查看9个洗护步骤的3x3网格
观察步骤状态变化：
- 灰色：等待中
- 橙色：进行中
- 绿色：已完成
右上方查看温湿度指示器
中间查看可爱宠物图片
下方查看当前步骤提示
右下方查看倒计时和进度条
洗护完成后自动返回首页

设置界面

查看硬件状态（5个指示灯）
查看系统参数（4个参数）
点击左上角"←"返回首页

界面特色

视觉效果

✨ 清新的绿色渐变背景
✨ 柔和的阴影效果
✨ 发光效果（标题、按钮、进度条）
✨ 圆角设计
✨ 装饰性圆圈

颜色方案

主背景：绿色渐变（#A8E6CF → #DCEDC8 → #B2DFDB）
主标题：深绿色（#2E7D32）
按钮：黄色（#FFD54F）
套餐卡片：深橙色（#D84315）
价格：橙色（#FF6F00）
进行中步骤：橙色（#FFB74D）
已完成步骤：绿色（#66BB6A）

尺寸规格

窗口：1280x800px
宠物图标：350x350px（首页）
按钮：320x90px（大按钮）
套餐卡片：自适应，3列布局
二维码：280x280px

可选优化建议

1. 添加真实宠物图片

下载可爱的宠物图片并替换表情符号：

<!-- 替换前 -->
<TextBlock Text="🐕" FontSize="250"/>

<!-- 替换后 -->
<Image Source="/Resources/Images/cute-dog.png" 
       Stretch="Uniform"/>

推荐图片来源：

Unsplash: https://unsplash.com/s/photos/cute-dog
Pexels: https://www.pexels.com/search/cute%20dog/
Pixabay: https://pixabay.com/images/search/cute%20dog/

2. 添加真实二维码

集成二维码生成库：

dotnet add package QRCoder

using QRCoder;

// 生成二维码
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(paymentUrl, QRCodeGenerator.ECCLevel.Q);
BitmapByteQRCode qrCode = new BitmapByteQRCode(qrCodeData);
byte[] qrCodeImage = qrCode.GetGraphic(20);

3. 添加页面切换动画

<Grid.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                               From="0" To="1" Duration="0:0:0.5"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Grid.Triggers>

4. 添加音效

using System.Media;

// 播放按钮点击音效
SoundPlayer player = new SoundPlayer("click.wav");
player.Play();

故障排除

问题1：界面显示不完整

确保窗口分辨率至少为1280x800
检查显示缩放设置

问题2：套餐不显示

确保后端API服务已启动
检查API地址配置（appsettings.json）

问题3：MQTT连接失败

确保MQTT服务器已启动
检查MQTT配置（appsettings.json）

问题4：编译错误

清理项目：dotnet clean
重新编译：dotnet build
删除bin和obj文件夹后重新编译

性能优化

内存优化

使用虚拟化列表（VirtualizingStackPanel）
及时释放不用的资源
使用弱引用处理事件

渲染优化

使用CacheMode缓存复杂视觉元素
减少不必要的动画
使用RenderOptions优化渲染

<Border RenderOptions.BitmapScalingMode="HighQuality"
        RenderOptions.EdgeMode="Aliased">

部署建议

发布版本

dotnet publish -c Release -r win-x64 --self-contained

创建安装包

使用WiX Toolset或Inno Setup创建安装程序

配置文件

确保appsettings.json包含正确的生产环境配置

技术支持

如有问题，请检查：

日志文件（Logs文件夹）
错误提示信息
后端API状态
MQTT连接状态

总结

新的UI界面已经完全实现并可以投入使用。界面美观、功能完整、用户体验良好。根据实际需求，可以进一步添加真实图片、二维码生成、动画效果等功能。

5.2 KiB Raw Blame History Unescape Escape