root
/
MyAvaloniaDemo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
22 Commits
2 Branches
0 Tags
99 MiB
 
 
 
 
Tree: 8d1cacaa3e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '8d1cacaa3e'
${ noResults }
MyAvaloniaDemo/modify.md

39 KiB
Raw Blame History

修改记录

2025年修改记录

修复附件圆数量变化未刷新画布的问题

  • 日期: 2025年11月6日
  • 问题: 在右侧属性面板调整附件圆数量后，画布上的节点圆点数量不更新。
  • 原因: Node.ConnectionPoints 集合增删元素时未触发属性变更通知，导致绑定使用的转换器不会重新计算结果。
  • 修复内容:
    1. 为 Node 新增构造函数，订阅 ConnectionPoints.CollectionChanged 事件。
    2. 集合变化时显式调用 RaisePropertyChanged(nameof(ConnectionPoints))，确保 UI 绑定重新求值。
    3. 在替换 ConnectionPoints 集合时正确注销/注册事件，避免内存泄漏。
  • 涉及文件:
    • AuroraDesk.Core/Entities/Node.cs
  • 效果: 调整左右附件圆数量后，画布节点立即刷新圆点数量，属性面板与画布保持一致。

调整左右附件圆属性布局为纵向卡片

  • 日期: 2025年11月6日
  • 调整内容:
    1. 将左、右侧圆属性卡片改为纵向排列，避免同列并排导致内容拥挤。
    2. 每个圆的属性表单重构为与“组件属性”一致的双列表格布局，字段包含序号、直径、颜色、定位。
    3. 精简卡片内边距与边框样式，统一视觉层级与留白。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 左右附件圆配置区域上下排列，阅读顺序更自然。
    • ✅ 单个圆属性表单与基础属性风格一致，输入焦点和字段对齐更整洁。

为左右附件圆卡片添加折叠交互

  • 日期: 2025年11月6日
  • 修改内容:
    1. 使用 Expander 包裹左、右侧圆配置区域，提供可折叠的标题栏。
    2. 保留原有卡片边框与间距，使内容在展开时维持一致的视觉风格。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 用户可根据需要折叠左右圆配置，保持属性面板简洁。
    • ✅ 展开后内容布局与原先保持一致，无额外视觉跳变。

精简附件圆卡片内边距与行距

  • 日期: 2025年11月6日
  • 调整内容:
    1. 将左右圆 Expander 的内容区 Padding 调整为 6，并取消区块间额外间距。
    2. 附件圆列表使用 StackPanel Spacing="0"，紧凑呈现多个圆的属性表格。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 属性面板整体占用更少垂直空间，避免上下留白。
    • ✅ 多个圆的配置无额外间距，信息密度更高。

将显示位置与数量配置改为表格布局

  • 日期: 2025年11月6日
  • 调整内容:
    1. 用带边框的双列表格承载“显示位置”“左侧数量”“右侧数量”三项配置。
    2. 统一标签与输入控件的对齐方式，与其他属性表格保持视觉一致。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 显示位置与数量编辑区域风格与其他属性卡片一致。
    • ✅ 输入控件列宽固定，阅读与操作更清晰。

移除显示位置选项

  • 日期: 2025年11月6日
  • 调整内容:
    1. 删除“显示位置”下拉框，仅保留左右数量配置，由数量是否为零决定显示侧。
    2. 表格结构调整为两行（左/右数量），边框与间距同步更新。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 属性面板更精简，避免重复配置。
    • ✅ 左右数量保持原有样式，操作习惯不变。

默认附件圆定位改为外侧，并修正偏移

  • 日期: 2025年11月6日
  • 修改内容:
    1. 将 Node、NodeTemplate、ConnectionPoint 的默认 ConnectorPlacementMode 调整为 Outside，并同步更新模板/新增节点逻辑。
    2. ConnectorPlacementMarginConverter 外侧偏移量调整为直径长度，确保圆点完全位于节点外。
    3. ConnectorColumnPanel 新增 Side 属性，支持根据左右方向贴边排列，并在节点模板中分别指定 Side="Left"/"Right"。
  • 涉及文件:
    • AuroraDesk.Core/Entities/Node.cs
    • AuroraDesk.Core/Entities/NodeTemplate.cs
    • AuroraDesk.Core/Entities/ConnectionPoint.cs
    • AuroraDesk.Presentation/ViewModels/Pages/NodeCanvasPageViewModel.cs
    • AuroraDesk.Presentation/Converters/NodeCanvasConverters.cs
    • AuroraDesk.Presentation/Controls/ConnectorColumnPanel.cs
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 新增节点与模板默认渲染为外侧圆点，减少手动修改。
    • ✅ 选择“外侧”后圆点完全贴在节点外部，视觉符合预期。

附件圆颜色编辑改用 ColorPicker

  • 日期: 2025年11月6日
  • 修改内容:
    1. 引入 av:ColorPicker 替换原有颜色文本框，支持直接选色，禁用 Alpha 频道。
    2. 新增 ColorHexToColorConverter 实现十六进制字符串与 Color 互转，配合 ColorPicker 双向绑定。
    3. 为 ColorPicker 提供统一样式（圆角、边框、高度），保持与其他输入控件一致的视觉风格。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
    • AuroraDesk.Presentation/Converters/NodeCanvasConverters.cs
  • 效果:
    • ✅ 颜色编辑更直观，避免手动输入 Hex。
    • ✅ 色值仍以 #RRGGBB 字符串形式写回实体，兼容现有数据结构。

修正 ColorPicker 属性名以适配新版控件

  • 日期: 2025年11月6日
  • 修改内容:
    1. 将 ShowPreview、PaletteVisible 替换为 Avalonia 11 新增的 IsColorPreviewVisible、IsColorPaletteVisible 属性。
    2. 保留 IsAlphaEnabled="False" 设置，持续禁用 Alpha 通道输入。
    3. 重新启用颜色预览与调色板，便于观察和选择颜色。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 解决构建时 AVLN2000 属性解析错误，ColorPicker 正常渲染。
    • ✅ 色彩预览与调色板恢复显示，调整颜色更直观。

确保外侧连接点可见

  • 日期: 2025年11月6日
  • 修改内容:
    1. 为节点模板中的根 Border 设置 ClipToBounds="False"，允许连接点超出节点边界时仍然渲染。
    2. 保持现有圆角与阴影效果不变。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 选择“外侧”定位后，左右连接点完整显示在节点外侧。

调整外侧连接点偏移使视觉对齐

  • 日期: 2025年11月6日
  • 修改内容:
    1. 将外侧模式下的偏移量由“直径”改为“直径的一半”，使圆点一半在边外、一半在边内。
    2. 保持内侧定位逻辑不变。
  • 涉及文件:
    • AuroraDesk.Presentation/Converters/NodeCanvasConverters.cs
  • 效果:
    • ✅ 外侧圆点与内侧视觉保持一致，贴边但不会完全漂出。

修正 ConnectorColumnPanel 右侧排列的外侧偏移

  • 日期: 2025年11月6日
  • 修改内容:
    1. 调整 ConnectorColumnPanel 中 Right 分支的排布公式，允许负 Margin.Right 将圆点推到节点外侧。
    2. 维持正向 margin 的内缩行为不变。
  • 涉及文件:
    • AuroraDesk.Presentation/Controls/ConnectorColumnPanel.cs
  • 效果:
    • ✅ 右侧外侧圆点将按照设置偏移正确露出外部，视觉与左侧一致。

优化特性面板表格与附件圆横向编辑体验

  • 日期: 2025年11月6日
  • 调整内容:
    1. 组件基础属性改为表格式布局，使用带边框的双列表格展示名称、宽度、高度，列宽收紧至 110，信息更集中。
    2. 左右附件圆编辑面板改为卡片顶部标题+横向三列（直径/颜色/定位）布局，字段一行内即可填写。
    3. 附件圆列表改回纵向 StackPanel，每个圆独占一行，卡片随列宽拉伸；保留单卡片分栏布局并统一边距，确保各项独立且排版整洁。
  • 涉及文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
  • 效果:
    • ✅ 特性信息以带边框表格呈现，阅读更清晰。
    • ✅ 左右附件圆参数可横向填写，减少垂直空间占用。

节点附件圆重构：逐个圆配置半径与定位

  • 日期: 2025年11月6日
  • 修改内容:
    1. 核心实体扩展: 在 ConnectionPoint 中新增直径、颜色、定位属性，配合模板初始化默认值，支持每个附件圆独立配置。
    2. 数量与模式逻辑: NodeCanvasPageViewModel 将附件圆数量限制调整为 0~4，引入默认数量常量，并基于连接点数量计算显示模式；新增创建连接点的辅助方法，保障新增圆继承默认样式。
    3. 数量同步修复: 新增 _selectedLeftConnectorCount / _selectedRightConnectorCount 字段及 RefreshSelectedConnectorCounts() 辅助方法，确保左右数量下拉选择立刻反映最新连接点数量，切换模式后不再固定为 3 个。
    4. 属性面板重构: 右侧面板改为“组件属性”“附件圆属性”双卡片，基础属性采用表格布局，附件圆属性以垂直卡片形式呈现（移除表格式排版），支持逐个圆的直径、颜色、定位编辑。
    5. 画布渲染更新: 节点模板左右侧的 ItemsControl 直接使用连接点自身的直径与定位数据，外侧/内侧偏移基于单个圆计算。
    6. 辅助转换器: 新增 IndexToDisplayTextConverter 用于在界面上以「圆 1/圆 2」方式展示序号。
  • 涉及文件:
    • AuroraDesk.Core/Entities/ConnectionPoint.cs
    • AuroraDesk.Core/Entities/NodeTemplate.cs
    • AuroraDesk.Presentation/ViewModels/Pages/NodeCanvasPageViewModel.cs
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
    • AuroraDesk.Presentation/Converters/NodeCanvasConverters.cs
  • 效果:
    • ✅ 左右两侧附件圆完全独立设置数量、半径、颜色与内外侧定位。
    • ✅ 新增连接点自动采用侧边默认样式，减少重复输入。
    • ✅ 属性面板交互更直观，每个圆的设置清晰可见。

重构画布属性面板聚焦节点基础属性

  • 日期: 2025年11月6日
  • 修改内容:
    1. 属性面板布局: 重新组织 NodeCanvasPageView 右侧属性面板，保留节点名称与宽高编辑项，调整排版与间距，使信息层级更清晰。
    2. 附件圆模式: 新增 ConnectorAttachmentMode 枚举并在 ViewModel 中提供 SelectedConnectorMode、SelectedNodeHasLeftConnector 等属性，通过下拉框控制附件圆的显示位置（无/仅左/仅右/两侧），并自动隐藏无效直径输入框。
    3. 状态提示: 当未选中节点时展示提示卡片，已选中节点时显示 “已选中对象” 状态文字，便于理解当前编辑上下文。
  • 修改文件:
    • AuroraDesk.Core/Entities/ConnectorAttachmentMode.cs
    • AuroraDesk.Presentation/ViewModels/Pages/NodeCanvasPageViewModel.cs
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
    • AuroraDesk.Presentation/Converters/NodeCanvasConverters.cs

优化节点多连接点显示与文本换行能力

  • 日期: 2025年11月6日
  • 调整内容:
    1. 多连接点支持: 为节点数据模板引入左右 ItemsControl，通过转换器动态过滤输入/输出连接点，默认为每侧生成至少3个连接点，满足复杂组件需求。
    2. 连接点样式: 左右圆点紧贴节点边框、默认直径设置为3，批量使用节点颜色配置；左侧圆点不再留出额外内边距。
    3. 文本换行: 将节点中心内容改为堆叠布局，标题与正文均支持自动换行，提升长文本展示效果。
  • 修改文件:
    • AuroraDesk.Core/Entities/Node.cs
    • AuroraDesk.Core/Entities/NodeTemplate.cs
    • AuroraDesk.Presentation/ViewModels/Pages/NodeCanvasPageViewModel.cs
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
    • AuroraDesk.Presentation/Converters/NodeCanvasConverters.cs

组件库重构：提供竖向/横向矩形模板

  • 日期: 2025年11月6日
  • 需求: 组件库只需提供两个基础组件——竖向矩形与横向矩形
  • 实现内容:
    1. 节点模板:
      • 清空并重建 NodeTemplates，新增 rectangle-vertical 与 rectangle-horizontal
      • 设置宽高比：竖向 (80×160)、横向 (180×80)
      • 取消默认输入/输出连接点，Content 为空
    2. 画布节点展示:
      • 简化画布中的节点模板，直接根据宽高绘制矩形并显示标题
      • 节点选中时仍沿用边框高亮、粗细转换器
    3. 组件库预览:
      • 重构左侧模板展示 UI，通过 Viewbox 按比例缩放矩形预览
      • 显示名称、描述以及宽/高信息，便于快速辨识
    4. 属性面板编辑能力:
      • 可直接编辑标题、正文文字
      • 宽度/高度支持即时数字输入（双向绑定）
      • 左右附件圆支持调整直径与颜色
    5. 新增节点命令:
      • AddNode 默认创建横向矩形，移除旧的连接点初始化逻辑
  • 修改文件:
    • AuroraDesk.Presentation/ViewModels/Pages/NodeCanvasPageViewModel.cs
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml

优化 NodeCanvasPageView 属性面板与节点尺寸约束

  • 日期: 2025年11月6日
  • 优化内容:
    1. 属性面板视觉清晰度:
    • 在 NodeCanvasPageView.axaml 顶层启用 UseLayoutRounding，并为属性面板容器设置局部 Styles（强制使用微软雅黑字体、统一内边距与圆角），缓解 Windows 下输入框及标签发虚问题
    • ScrollViewer、Border、StackPanel 同步启用 UseLayoutRounding，细化布局像素对齐
    1. 全局字体一致性:
    • 在 App.axaml 中为 TextBlock/TextBox 设置默认字体族为 Microsoft YaHei 优先，保障中文界面清晰可读
    1. 节点尺寸与附件圆限制:
      • 在 Node 实体中为宽度/高度及左右附件圆直径增加 Math.Clamp 约束，防止输入异常数值导致渲染异常
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml
    • AuroraDesk/App.axaml
    • AuroraDesk.Core/Entities/Node.cs

代码优化：清理 NodeCanvasPageView 和移除默认测试节点

  • 日期: 2025年11月6日
  • 修改内容:
    1. 移除默认测试节点:
      • 删除 InitializeTestNode() 方法及其调用
      • 清理构造函数中的调试输出
    2. 代码优化:
      • 移除 NodeCanvasPageView.axaml.cs 中大量调试输出（System.Diagnostics.Debug.WriteLine）
      • 简化 OnTemplateButtonDoubleTapped 方法
      • 优化 UpdateNodePositions 和 UpdateSingleNodePosition 方法，移除冗余日志
      • 简化异常处理，使用空 catch 块（位置更新主要依赖数据绑定）
      • 清理 UpdateNodesOnCanvas 方法（已不再使用）
    3. 代码结构:
      • 保持核心功能不变
      • 代码更简洁易读
      • 保留必要的注释和文档
  • 技术改进:
    • 位置更新主要依赖 XAML 数据绑定（Canvas.Left="{Binding X}" 和 Canvas.Top="{Binding Y}"）
    • 代码后台的位置更新作为备用方案保留
    • 移除了调试阶段的临时代码
  • 修改文件:
    • AuroraDesk.Presentation/ViewModels/Pages/NodeCanvasPageViewModel.cs - 移除测试节点初始化
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 代码优化和清理

修复节点在画布上不显示的问题

  • 日期: 2025年11月6日
  • 问题: InitializeTestNode 执行后节点已添加到服务，位置也设置成功，但画布上不显示节点
  • 原因分析:
    • 在 Avalonia 中，当使用 ItemsControl 和 Canvas 作为 ItemsPanel 时，需要在 ItemTemplate 的根元素上绑定 Canvas.Left 和 Canvas.Top 属性
    • 之前的代码只有代码后台手动设置位置，但缺少 XAML 绑定，导致节点位置无法正确设置
    • 关键问题：ItemsControl 使用的 Canvas（作为 ItemsPanel）大小为 0x0，导致节点虽然位置正确但不可见
  • 修复内容:
    1. XAML 绑定位置:
      • 在 ItemTemplate 的 Border 元素上添加 Canvas.Left="{Binding X}" 和 Canvas.Top="{Binding Y}" 绑定
    2. Canvas 大小设置:
      • 在 ItemsPanelTemplate 的 Canvas 上设置 Width="2000"、Height="2000"、MinWidth="2000"、MinHeight="2000"
      • 确保 Canvas 有明确的大小，与 CanvasContainer 保持一致
    3. ItemsControl 布局:
      • 为 ItemsControl 添加 HorizontalAlignment="Stretch" 和 VerticalAlignment="Stretch"
    4. 调试信息增强:
      • 添加更详细的调试日志，包括：
        • ItemsControl 的直接视觉子元素数量
        • Canvas 面板的大小和子元素数量
        • 每个子元素的位置、可见性和大小
        • 节点容器的可见性状态
  • 技术细节:
    • 在 Avalonia 中，ItemsControl 使用 Canvas 作为 ItemsPanel 时：
      • 位置绑定应该在 ItemTemplate 的根元素上
      • Canvas 必须设置明确的大小（不能依赖自动计算）
      • 数据绑定会自动处理位置更新，代码后台的手动设置作为备用方案保留
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 添加 Canvas.Left/Top 绑定，设置 Canvas 大小，添加 ItemsControl 对齐属性
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 添加更详细的调试信息

修复 SelectedNode 绑定 null 值错误

  • 日期: 2025年11月6日
  • 问题: 当 SelectedNode 为 null 时，绑定到 SelectedNode.Title、SelectedNode.X、SelectedNode.Y、SelectedNode.Width、SelectedNode.Height 的属性会出现绑定错误
  • 错误日志: 
    [Binding]An error occurred binding 'Text' to 'SelectedNode.Title' at 'SelectedNode': 'Value is null.'
[Binding]An error occurred binding 'Text' to 'SelectedNode.X' at 'SelectedNode': 'Value is null.'
[Binding]An error occurred binding 'Text' to 'SelectedNode.Y' at 'SelectedNode': 'Value is null.'
[Binding]An error occurred binding 'Text' to 'SelectedNode.Width' at 'SelectedNode': 'Value is null.'
[Binding]An error occurred binding 'Text' to 'SelectedNode.Height' at 'SelectedNode': 'Value is null.'
  • 修复内容:
    • 为所有 SelectedNode.Property 绑定添加 TargetNullValue 和 FallbackValue 属性
    • SelectedNode.Title 绑定：添加 TargetNullValue='' 和 FallbackValue=''
    • SelectedNode.X、SelectedNode.Y、SelectedNode.Width、SelectedNode.Height 绑定：添加 TargetNullValue='0.00' 和 FallbackValue='0.00'
  • 技术细节:
    • TargetNullValue: 当绑定的值为 null 时使用的默认值
    • FallbackValue: 当绑定失败时使用的默认值
    • 字符串属性使用空字符串作为默认值
    • 数值属性使用 '0.00' 作为默认值（与 StringFormat 的格式保持一致）
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 修复所有 SelectedNode 属性绑定，添加 null 值处理

修复节点添加后画布不显示问题

  • 日期: 2025年11月6日
  • 问题: 从日志看节点已成功添加到服务，但画布上不显示节点
  • 原因分析:
    • WhenAnyValue(x => x.Nodes) 只监听属性引用变化，不会响应 ObservableCollection 的内容变化
    • 需要直接监听集合的 CollectionChanged 事件来确保 UI 更新
    • Avalonia 的 ItemsControl 不支持 ItemContainerStyle 属性（与 WPF 不同）
  • 修复内容:
    1. View Code-Behind (NodeCanvasPageView.axaml.cs):
      • 使用 WhenAnyValue(x => x.Nodes) 监听属性变化，并在订阅中直接订阅 CollectionChanged 事件
      • 当集合变化时，强制刷新 ItemsControl 的布局（调用 InvalidateMeasure() 和 InvalidateArrange()）
      • 添加了详细的调试日志，方便追踪节点添加过程
    2. View XAML (NodeCanvasPageView.axaml):
      • 在 ItemTemplate 中使用 ContentControl 包装 Border，并在 ContentControl 上设置 Canvas.Left 和 Canvas.Top 绑定
      • 这是 Avalonia 中设置 Canvas 位置的正确方式（因为 Avalonia 不支持 ItemContainerStyle）
    3. 简化代码:
      • 简化了 UpdateNodesOnCanvas 方法，移除了手动设置位置的代码（现在由数据绑定自动处理）
  • 技术细节:
    • ObservableCollection 实现了 INotifyCollectionChanged 接口，可以直接订阅 CollectionChanged 事件
    • 在 Avalonia 中，当使用 ItemsControl 与 Canvas 作为 ItemsPanel 时，需要在 ItemTemplate 中的控件上直接设置 Canvas.Left 和 Canvas.Top 附加属性
    • 使用 Dispatcher.UIThread.Post 确保 UI 更新在 UI 线程上执行
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 添加集合变化监听和强制刷新逻辑
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 修复 Canvas 位置绑定方式（使用 ContentControl 包装）

修复双击组件添加功能，改用PointerPressed检测双击

  • 日期: 2025年11月6日
  • 问题: XAML中的DoubleTapped事件在DataTemplate中无法正确触发
  • 修复内容:
    • 移除了XAML中的DoubleTapped="OnTemplateItemDoubleTapped"绑定
    • 改用PointerPressed事件手动检测双击（通过时间间隔判断）
    • 添加了双击检测相关字段：_lastTemplateClickTime、_lastTemplateClickBorder、DoubleClickDelayMs（500ms）
    • 实现了OnTemplateItemPointerPressed方法来检测双击
    • 将双击处理逻辑提取到HandleTemplateDoubleClick方法中
    • 添加了详细的日志输出，方便追踪双击事件和节点添加过程
  • 技术细节:
    • 双击检测：同一个Border在500ms内连续点击两次即判定为双击
    • 使用DateTime.Now记录点击时间
    • 使用延迟任务自动清除超时的点击记录
    • 保持了原有的位置计算逻辑（考虑缩放和平移）
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 移除DoubleTapped绑定
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 改用PointerPressed检测双击

清理拖拽逻辑并添加双击添加组件功能

  • 日期: 2025年1月10日
  • 修改内容: 清理不生效的拖拽逻辑，改为双击组件库中的组件即可添加到画布
  • 清理内容:
    • 移除了 SetupTemplateDragAndDrop() 方法
    • 移除了 SetupTemplateItems() 方法
    • 移除了 SetupTemplateItemDrag() 方法
    • 移除了 OnCanvasDragOver() 方法
    • 移除了 OnCanvasDrop() 方法
    • 移除了 Canvas 和 ScrollViewer 上的拖拽事件绑定
  • 新增功能:
    • 添加了 SetupTemplateDoubleClick() 方法
    • 添加了 SetupTemplateItemsDoubleClick() 方法
    • 添加了 SetupTemplateItemDoubleClick() 方法
    • 双击组件库中的组件时，会在画布中心位置添加节点
    • 如果画布还没有尺寸，使用默认位置 (200, 200)
  • 用户体验:
    • 双击组件即可快速添加到画布，操作更简单
    • 节点默认添加到画布中心，便于查看和编辑
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 清理拖拽逻辑，添加双击功能

优化 NodeCanvasPageView 缩放控件使用 HeroIcons 图标

  • 日期: 2025年1月10日
  • 修改内容: 将缩放控件的文本符号（+、−、重置）替换为 HeroIcons.Avalonia 图标，提升视觉效果
  • 实现方式:
    • 添加 HeroIcons 命名空间引用：xmlns:heroicons="clr-namespace:HeroIconsAvalonia.Controls;assembly=HeroIconsAvalonia"
    • 缩小按钮：使用 HeroIcon Type="Minus" 图标（16x16像素）
    • 放大按钮：使用 HeroIcon Type="Plus" 图标（16x16像素）
    • 重置按钮：使用 HeroIcon Type="ArrowsPointingOut" 图标配合文字"重置"（14x14像素）
  • 视觉效果:
    • 图标使用统一的文本主色（TextPrimary）
    • 图标居中对齐，大小适中
    • 按钮间距调整为6px，整体更紧凑
    • 重置按钮使用图标+文字的组合方式，更直观
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 使用 HeroIcons 替换文本符号

为 NodeCanvasPageView 中间画布添加拖动和缩放功能

  • 日期: 2025年1月10日
  • 修改内容: 为节点编辑器页面的中间画布添加拖动（平移）功能，与缩放功能配合使用
  • 实现方式:
    • XAML层面:
      • 使用 TransformGroup 组合 TranslateTransform 和 ScaleTransform
      • 平移和缩放都绑定到 ViewModel 的 CanvasOffsetX、CanvasOffsetY 和 CanvasZoom 属性
      • 先应用平移，再应用缩放，确保正确的变换顺序
    • 代码后台:
      • 添加画布拖动状态跟踪：_isDraggingCanvas、_canvasDragStartPoint、_canvasDragStartOffsetX、_canvasDragStartOffsetY
      • 支持两种拖动方式：
        • 鼠标中键拖动
        • 空格键+鼠标左键拖动
      • 在 OnCanvasPointerPressed、OnCanvasPointerMoved、OnCanvasPointerReleased 中处理画布拖动
      • 在 OnScrollViewerPointerPressed、OnScrollViewerPointerMoved、OnScrollViewerPointerReleased 中处理 ScrollViewer 上的拖动
      • 添加键盘事件处理（OnKeyDown、OnKeyUp）来检测空格键状态
      • 拖动时考虑缩放因子，确保拖动距离正确
      • 拖动时改变光标为手型（Hand）
  • 交互功能:
    • 鼠标中键拖动：按住鼠标中键拖动即可平移画布
    • 空格键+左键拖动：按住空格键，然后按住鼠标左键拖动即可平移画布
    • 拖动时光标变为手型，松开后恢复
    • 拖动距离会根据当前缩放比例自动调整
  • 技术细节:
    • 拖动偏移量计算：deltaX / zoomFactor 和 deltaY / zoomFactor
    • 确保节点拖动和画布拖动不会冲突
    • 拖动时更新 ViewModel 的 CanvasOffsetX 和 CanvasOffsetY 属性
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 添加 TransformGroup 支持平移和缩放
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 添加画布拖动逻辑

为 NodeCanvasPageView 中间画布添加缩放功能

  • 日期: 2025年1月10日
  • 修改内容: 为节点编辑器页面的中间画布添加缩放功能，支持按钮缩放和鼠标滚轮缩放
  • 实现方式:
    • ViewModel层面:
      • 添加缩放命令：ZoomInCommand（放大）、ZoomOutCommand（缩小）、ResetZoomCommand（重置缩放）、SetZoomCommand（设置缩放）
      • 缩放范围限制在0.1倍到3.0倍之间
      • 每次缩放步进为1.2倍（放大）或1/1.2倍（缩小）
    • View层面:
      • 为CanvasContainer和GridBackgroundLayer添加ScaleTransform，绑定到ViewModel的CanvasZoom属性
      • 在画布右上角添加缩放控件，包含：缩小按钮（−）、缩放比例显示、放大按钮（+）、重置按钮
      • 缩放控件使用白色背景、圆角边框，悬浮在画布上方（ZIndex=100）
    • 交互功能:
      • 支持鼠标滚轮缩放：按住Ctrl键并滚动鼠标滚轮进行缩放
      • 向上滚动放大，向下滚动缩小
  • 视觉效果:
    • 缩放控件显示当前缩放比例（百分比格式）
    • 缩放时画布内容和网格背景同步缩放
    • 缩放控件始终显示在画布右上角，不影响画布内容
  • 修改文件:
    • AuroraDesk.Presentation/ViewModels/Pages/NodeCanvasPageViewModel.cs - 添加缩放命令和逻辑
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 添加缩放控件和Transform
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 添加鼠标滚轮缩放支持

为 NodeCanvasPageView 三列添加类似 GroupBox 效果

  • 日期: 2025年1月10日
  • 修改内容: 为节点编辑器页面的三列（左侧组件库、中间画布、右侧属性面板）添加类似GroupBox的边框效果
  • 实现方式:
    • 保持3列Grid布局不变，为最外层Grid添加Margin="12"来创建整体边距
    • 左侧Border：添加完整边框（BorderThickness="1"）、圆角（CornerRadius="8"）、右边距（Margin="0,0,12,0"）
    • 中间画布：用Border包裹Grid，添加完整边框（BorderThickness="1"）、圆角（CornerRadius="8"）、右边距（Margin="0,0,12,0"）
    • 右侧Border：添加完整边框（BorderThickness="1"）、圆角（CornerRadius="8"）
    • 所有边框使用BorderLight颜色（#E0E0E0），背景使用白色或浅灰色
  • 视觉效果:
    • 三列现在都有完整的圆角边框，类似GroupBox效果
    • 列与列之间有12px的间距，视觉上更加清晰分离
    • 所有边框使用统一的浅灰色（BorderLight），与整体设计风格一致
    • 圆角半径为8px，提供现代化的视觉效果
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 为三列添加GroupBox样式的边框和间距

修复 NodeCanvasPageView 中的编译错误

  • 日期: 2025年1月10日
  • 问题:
    • ItemContainerGenerator 未包含 ContainerFromItem 的定义
    • DispatcherPriority 未包含 Layout 的定义
  • 修复内容:
    1. 移除了不存在的 ItemContainerGenerator.ContainerFromItem() 方法调用
    2. 改用 GetVisualDescendants() 方法遍历视觉树来查找对应的 ContentControl 容器
    3. 将 DispatcherPriority.Layout 改为 DispatcherPriority.Normal（Avalonia 中不存在 Layout 枚举值）
  • 技术说明:
    • 在 Avalonia 中，ItemContainerGenerator 没有 ContainerFromItem 方法
    • 通过遍历视觉树（GetVisualDescendants()）来查找对应的容器是更可靠的方法
    • DispatcherPriority 枚举在 Avalonia 中可用的值包括：Invalid, Inactive, SystemIdle, ApplicationIdle, ContextIdle, Background, Input, Loaded, Render, Normal, Send
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml.cs - 修复容器查找方法和 DispatcherPriority 枚举值

调整 UdpServerPageView 客户端列表折叠按钮位置到左侧

  • 日期: 2025年1月10日
  • 修改内容: 将客户端列表的折叠按钮从标题栏中间移到最左侧，使用三列 Grid 布局
  • 布局改进:
    • 使用 Grid 三列布局：ColumnDefinitions="Auto,*,Auto"
    • 第一列：折叠按钮（左侧，固定宽度 40px，左侧内边距 16px）
    • 第二列：标题内容（中间，自适应宽度，包含图标、文字和徽章）
    • 第三列：清空按钮（右侧，固定宽度）
  • 视觉效果: 折叠按钮现在独立显示在左侧，布局更加清晰，符合常见的折叠面板设计模式
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 调整折叠按钮布局位置

优化 UdpServerPageView 布局，使客户端列表和接收消息区域铺满剩余空间

  • 日期: 2025年1月10日
  • 修改内容: 为客户端列表和接收消息区域的 Border、Grid、Expander 和 ScrollViewer 添加 VerticalAlignment="Stretch" 属性，使它们能够铺满剩余的垂直空间
  • 改进点:
    • 客户端列表 Border 添加了 VerticalAlignment="Stretch"
    • 客户端列表内部 Grid 添加了 VerticalAlignment="Stretch"
    • 客户端列表 Expander 添加了 VerticalAlignment="Stretch"
    • 客户端列表 ScrollViewer 添加了 VerticalAlignment="Stretch"
    • 接收消息区域 Border 添加了 VerticalAlignment="Stretch"
    • 接收消息区域内部 Grid 添加了 VerticalAlignment="Stretch"
    • 接收消息区域 ScrollViewer 添加了 VerticalAlignment="Stretch"
  • 效果: 两个区域现在能够充分利用可用的垂直空间，提供更好的用户体验
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 添加垂直对齐属性

修复 UdpServerPageView 中 Border 控件无效属性错误

  • 日期: 2025年1月10日
  • 问题: Border 控件不支持 HorizontalContentAlignment 属性，导致编译错误 AVLN2000
  • 修复内容: 移除了第 285 行 Border 控件上的无效属性 HorizontalContentAlignment="Stretch"
  • 说明:
    • Border 控件在 Avalonia 中不支持 HorizontalContentAlignment 属性
    • 使用 HorizontalAlignment="Stretch" 即可实现 Border 本身的对齐
    • 内容对齐可以通过内部容器（如 Grid）的 HorizontalAlignment 属性控制
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 移除无效属性

重构 UdpServerPageView 布局为两行结构并支持折叠

  • 日期: 2025年1月10日
  • 修改内容: 重构 UDP 服务端页面视图为两行布局，客户端列表支持折叠功能
  • 布局结构:
    • 第一行：服务器控制（监听端口、启动/停止按钮，横向排列）
    • 第二行：左右分栏布局
      • 左边（1/3）：客户端列表区域（使用 Expander 支持折叠，显示连接的客户端信息）
      • 右边（2/3）：接收消息区域（显示接收到的消息列表）
  • 改进点:
    • 配置区域改为横向布局，端口输入和启动/停止按钮在同一行
    • 客户端列表和接收消息区域采用左右分栏，右边接收消息区域占据 2/3 宽度
    • 客户端列表使用 Expander 控件，支持折叠/展开功能
    • 所有 Border 和 Expander 添加了 HorizontalAlignment="Stretch" 确保占满宽度
    • 保持了原有的功能和样式风格
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - 重构为两行布局，客户端列表支持折叠

重构 UdpClientPageView 布局为两行结构

  • 日期: 2025年1月10日
  • 修改内容: 重构 UDP 客户端页面视图，将主要内容区域改为两行布局
  • 布局结构:
    • 第一行：连接配置（IP、端口、本地端口、连接/断开按钮，横向排列）
    • 第二行：左右分栏布局
      • 左边（1/3）：已发送消息区域（包含消息列表和输入框）
      • 右边（2/3）：接收消息区域（显示接收到的消息列表）
  • 改进点:
    • 配置区域保持横向布局，所有配置项和按钮在同一行
    • 已发送消息和接收消息区域采用左右分栏，右边接收消息区域占据 2/3 宽度
    • 已发送消息区域整合了消息列表和输入框，布局更紧凑
    • 保持了原有的功能和样式风格
  • 修改文件:
    • AuroraDesk.Presentation/Views/Pages/UdpClientPageView.axaml - 重构为两行布局，左右分栏

实现 UDP 客户端和服务端功能

  • 日期: 2025年1月10日
  • 修改内容: 实现 UDP 客户端和服务端两个视图页面，并添加到导航菜单中
  • 功能实现:
    • ✅ 创建 UDP 客户端 ViewModel (UdpClientPageViewModel.cs)
    • ✅ 创建 UDP 服务端 ViewModel (UdpServerPageViewModel.cs)
    • ✅ 创建 UDP 客户端 View (UdpClientPageView.axaml 和 .axaml.cs)
    • ✅ 创建 UDP 服务端 View (UdpServerPageView.axaml 和 .axaml.cs)
    • ✅ 在 PageViewModelFactory 中注册两个页面
    • ✅ 在 ServiceCollectionExtensions 中注册 ViewModel
    • ✅ 在 NavigationService 中添加导航项（UDP 工具分组）
  • UDP 客户端功能:
    • 配置服务器 IP 和端口
    • 连接/断开服务器
    • 发送消息到服务器
    • 接收服务器响应
    • 显示已发送和接收的消息列表
    • 清空消息列表
  • UDP 服务端功能:
    • 配置监听端口
    • 启动/停止监听
    • 接收客户端消息
    • 自动回复客户端（可选）
    • 显示接收到的消息列表
    • 显示连接的客户端列表（IP:端口、消息数、首次/最后连接时间）
    • 清空消息和客户端列表
  • 修改文件:
    • AuroraDesk.Presentation/ViewModels/Pages/UdpClientPageViewModel.cs - UDP 客户端 ViewModel
    • AuroraDesk.Presentation/ViewModels/Pages/UdpServerPageViewModel.cs - UDP 服务端 ViewModel
    • AuroraDesk.Presentation/Views/Pages/UdpClientPageView.axaml - UDP 客户端视图
    • AuroraDesk.Presentation/Views/Pages/UdpClientPageView.axaml.cs - UDP 客户端视图代码
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml - UDP 服务端视图
    • AuroraDesk.Presentation/Views/Pages/UdpServerPageView.axaml.cs - UDP 服务端视图代码
    • AuroraDesk.Presentation/Services/PageViewModelFactory.cs - 注册页面工厂方法
    • AuroraDesk.Presentation/Extensions/ServiceCollectionExtensions.cs - 注册 ViewModel 服务
    • AuroraDesk.Infrastructure/Services/NavigationService.cs - 添加导航项
  • 技术实现:
    • 遵循 ReactiveUI + MVVM 模式
    • 使用 ReactiveCommand 实现命令绑定
    • 使用 ObservableCollection 管理消息列表
    • 异步网络操作（UDP 发送/接收）
    • 后台任务处理消息接收（避免阻塞 UI）
    • 资源清理（Dispose 模式）
    • 使用 Dispatcher.UIThread 确保 UI 线程安全更新
  • 架构遵循:
    • ✅ 整洁架构（Clean Architecture）
    • ✅ ReactiveUI 响应式编程模式
    • ✅ MVVM 模式
    • ✅ 依赖注入（DI）
    • ✅ 服务层分离（ViewModel 只处理业务逻辑，View 只负责 UI 展示）
  • 导航结构:
    • UDP 工具（父级导航项，IconType.Signal）
      • UDP 客户端（IconType.ArrowRight）
      • UDP 服务端 (IconType.Server)
  • UI 特性:
    • 现代化的界面设计（圆角、阴影、颜色区分）
    • 实时状态显示
    • 消息时间戳
    • 客户端信息详细展示
    • 响应式布局
  • 测试建议:
    • 启动 UDP 服务端，监听端口 8080
    • 启动 UDP 客户端，连接到 127.0.0.1:8080
    • 发送测试消息，验证双向通信
    • 测试多客户端连接场景
    • 测试异常情况（端口占用、网络错误等）

修正节点附件圆外侧定位，确保左侧圆在边线左侧

  • 日期: 2025年11月7日
  • 问题: 左侧附件圆设置为 Outside 模式时，圆没有正确显示在组件左边线的左侧，而是显示在右侧；修正后圆圈像是被容器裁剪遮挡
  • 修复内容:
    1. 转换器逻辑重构：
      • 重构 ConnectorPlacementMarginConverter 转换器逻辑，明确区分 Inside 和 Outside 模式
      • Outside 模式：
        • 左侧圆使用负的左边距（Thickness(-size, 0, 0, 0)），向左偏移一个直径的距离
        • 右侧圆使用负的右边距（Thickness(0, 0, -size, 0)），向右偏移一个直径的距离
      • Inside 模式：不添加额外边距（Thickness(0)）
      • 添加详细的代码注释，说明 Outside 和 Inside 模式的含义
    2. 禁用容器裁剪：
      • 为节点内部的 Grid 容器添加 ClipToBounds="False"，确保外侧圆不被裁剪
      • 为左右两侧的 ItemsControl 添加 ClipToBounds="False"
      • 为左右两侧的 ConnectorColumnPanel 添加 ClipToBounds="False"
      • 确保圆圈完全显示在节点外侧，不会被任何容器裁剪
  • 涉及文件:
    • AuroraDesk.Presentation/Converters/NodeCanvasConverters.cs - 修正 ConnectorPlacementMarginConverter 逻辑
    • AuroraDesk.Presentation/Views/Pages/NodeCanvasPageView.axaml - 添加 ClipToBounds="False" 禁用容器裁剪
  • 效果:
    • ✅ 左侧外侧圆正确显示在组件左边线的左侧，完全可见不被裁剪
    • ✅ 右侧外侧圆正确显示在组件右边线的右侧，完全可见不被裁剪
    • ✅ 内侧模式保持圆在组件边界内部
    • ✅ 代码逻辑更加清晰易懂