docs: add HandyControl UI beautification design spec
Design aligns AxiOmron.PcbCheck visuals with the reference program using HandyControl 3.5.1.
This commit is contained in:
68
docs/superpowers/specs/2026-04-16-axi-omron-ui-design.md
Normal file
68
docs/superpowers/specs/2026-04-16-axi-omron-ui-design.md
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
# Axi Omron PCB Check - UI 美化设计文档
|
||||||
|
|
||||||
|
## 目标
|
||||||
|
将 `AxiOmron.PcbCheck` 的 WPF 界面引入 HandyControl (3.5.1) 进行美化,视觉风格与参考程序(`Daimler_PCB_Check_Client`)保持一致,降低后续维护成本。
|
||||||
|
|
||||||
|
## 当前状态
|
||||||
|
- 项目为 .NET 8 WPF 应用,当前无第三方 UI 库。
|
||||||
|
- 主要界面文件:
|
||||||
|
- `MainWindow.xaml`:顶部标题栏 + 两个导航按钮 + Frame 容器。
|
||||||
|
- `Views/Pages/DashboardPage.xaml`:状态卡片、操作按钮、日志表格、最近处理记录。
|
||||||
|
- `Views/Pages/SystemSettingsPage.xaml`:TabControl 配置表单。
|
||||||
|
- 参考程序已使用 `HandyControl` 3.5.1,并采用 `SkinDefault` 主题 + `PrimaryBrush` 等内置资源。
|
||||||
|
|
||||||
|
## 设计细节
|
||||||
|
|
||||||
|
### 1. 引入 HandyControl 包
|
||||||
|
- 在 `AxiOmron.PcbCheck.csproj` 中添加 `PackageReference Include="HandyControl" Version="3.5.1"`。
|
||||||
|
- 在 `App.xaml` 的 `Application.Resources` 中合并两个资源字典:
|
||||||
|
- `pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml`
|
||||||
|
- `pack://application:,,,/HandyControl;component/Themes/Theme.xaml`
|
||||||
|
- 引入 HandyControl 命名空间 `xmlns:hc="https://handyorg.github.io/handycontrol"` 到需要使用高级控件的页面(如主窗口)。
|
||||||
|
|
||||||
|
### 2. MainWindow.xaml
|
||||||
|
- **标题栏**:背景改用 `DynamicResource {x:Static hc:ResourceToken.PrimaryBrush}`(与参考程序一致)。
|
||||||
|
- **标题文字**:字号 20、白色、加粗、左边距 20。
|
||||||
|
- **导航按钮**:使用 `Style="{StaticResource ButtonPrimary}"`(参考程序样式),字号 18、加粗、适当内边距,保持“首页 / 系统设置”两个按钮。
|
||||||
|
- **窗口尺寸**:保持现有 Width=1600 / Height=950 / MinWidth=1400 / MinHeight=860,居中启动。
|
||||||
|
- **Frame 容器**:不变,继续承载 `DashboardPage` 与 `SystemSettingsPage`。
|
||||||
|
|
||||||
|
### 3. DashboardPage.xaml
|
||||||
|
- **页面背景**:移除硬编码 `#0F172A`,改由外层窗口/页面背景统一,或显式设为 `{DynamicResource {x:Static hc:ResourceToken.BackgroundBrush}}`。
|
||||||
|
- **操作按钮**:将现有自定义 `PrimaryButtonStyle` 替换为 HandyControl 的 `ButtonPrimary`,保持命令绑定不变。
|
||||||
|
- **状态卡片**:
|
||||||
|
- 将现有 `Border` 卡片样式替换为 HandyControl 的 `Card`(`hc:Card`)或保留 `Border` 但统一使用主题色。
|
||||||
|
- 推荐做法:使用 `hc:Card`,设置 `BorderThickness="0"`,内部保持 `StackPanel` + `TextBlock` 结构。
|
||||||
|
- 标题字体:16-18,加粗;数值字体:14-16。
|
||||||
|
- **数据表格**:
|
||||||
|
- 日志 `DataGrid` 与最近处理记录 `DataGrid` 保留,但移除硬编码行背景色、前景色、边框色,使用系统默认或浅色主题下的 DataGrid 样式。
|
||||||
|
- 列宽与绑定不变。
|
||||||
|
- **流程状态区**:将“流程状态”卡片改为 `hc:Card` 高亮展示,错误信息使用红色文字(不变)。
|
||||||
|
|
||||||
|
### 4. SystemSettingsPage.xaml
|
||||||
|
- **TabControl**:使用 HandyControl 的 `TabControl` 样式(默认已覆盖),或显式使用 `hc:TabControl`。
|
||||||
|
- **表单项**:
|
||||||
|
- 将大量 `Label + TextBox` 组合替换为 `hc:TextBoxExtend`,设置 `hc:InfoElement.Title="标题"` 和 `hc:InfoElement.TitlePlacement="Left"`。
|
||||||
|
- 这样可以去掉自定义 `FieldLabelStyle` 和 `FieldTextBoxStyle`,减少代码量。
|
||||||
|
- 每个 Tab 内部保持 `ScrollViewer` + `Grid` 两列布局(标题列 + 输入列)。
|
||||||
|
- **复选框**:使用 `CheckBox` 即可,HandyControl 已提供默认样式。
|
||||||
|
- **底部操作栏**:保留“重新加载 / 保存配置”两个按钮,样式改为 `ButtonPrimary` 和 `ButtonDefault`(或保持默认),与参考程序一致。
|
||||||
|
|
||||||
|
### 5. 数据绑定与代码影响
|
||||||
|
- 所有 ViewModel 命令、属性绑定保持不变。
|
||||||
|
- 不需要修改 `.cs` 文件,除非控件类型变更导致需要调整命名引用(如 `Border` -> `hc:Card` 不影响后台代码)。
|
||||||
|
- 自定义 `BooleanToBrushConverter` 继续保留并在 `DashboardPage` 使用。
|
||||||
|
|
||||||
|
### 6. 构建与验证
|
||||||
|
- 添加包后执行 `dotnet restore`。
|
||||||
|
- 编译项目,确认无 XAML 资源加载异常。
|
||||||
|
- 启动应用,检查:
|
||||||
|
1. 主窗口标题栏颜色与按钮样式正常。
|
||||||
|
2. Dashboard 卡片、表格显示正常,无布局错位。
|
||||||
|
3. SystemSettings 各 Tab 表单输入框带有 HandyControl 样式(圆角、焦点效果)。
|
||||||
|
4. 各页面切换无异常。
|
||||||
|
|
||||||
|
## 排除项(本次不做)
|
||||||
|
- 不改写业务逻辑、ViewModel、服务层。
|
||||||
|
- 不引入 HandyControl 的高级控件(Growl、Timeline、Pagination 等),避免过度设计。
|
||||||
|
- 不替换为其他 UI 库(MahApps、MaterialDesign、WPFUI 等)。
|
||||||
Reference in New Issue
Block a user