LanMountainDesktop/docs/archive/ZHIJIAO_HUB_COMPONENT_FINAL.md

智教Hub组件 - 最终实现总结

功能特性

核心功能

• ✅ 最小尺寸 2×2 - 符合要求
• ✅ 自由缩放 - ResizeMode.Free，允许任意调整大小
• ✅ 双数据源 - ClassIsland Hub 和 SECTL Hub
• ✅ 上下滑动切换 - 像短视频一样的交互体验
• ✅ 鼠标滚轮支持 - 滚轮上下滚动切换图片
• ✅ 图片名称显示 - 左下角显示当前图片名称
• ✅ 自动刷新 - 可配置间隔，可开启/关闭
• ✅ 设置面板 - 数据源切换、自动刷新配置

交互方式

1. 触摸/鼠标拖动: 上下拖动超过50px切换图片
2. 鼠标滚轮: 滚轮上下滚动切换图片
3. 自动刷新: 定时刷新图片列表

技术实现

文件清单

文件	说明
Models/ComponentSettingsSnapshot.cs	配置字段 + ZhiJiaoHubSources常量
Services/IRecommendationDataService.cs	数据接口和类型定义
Services/RecommendationDataService.cs	GitHub API数据获取实现
Views/Components/ZhiJiaoHubWidget.axaml	组件UI布局
Views/Components/ZhiJiaoHubWidget.axaml.cs	组件逻辑（滑动交互）
Views/ComponentEditors/ZhiJiaoHubComponentEditor.axaml	设置编辑器UI
Views/ComponentEditors/ZhiJiaoHubComponentEditor.axaml.cs	设置编辑器逻辑
ComponentSystem/BuiltInComponentIds.cs	组件ID常量
ComponentSystem/ComponentRegistry.cs	组件注册
Views/Components/DesktopComponentRuntimeRegistry.cs	运行时注册
Services/DesktopComponentEditorRegistryFactory.cs	编辑器注册
Views/MainWindow.ComponentSystem.cs	比例约束

滑动交互实现

// 核心滑动逻辑
private void OnPointerPressed(object? sender, PointerPressedEventArgs e)
{
    _isDragging = true;
    _dragStartPoint = e.GetPosition(this);
}

private void OnPointerMoved(object? sender, PointerEventArgs e)
{
    if (!_isDragging) return;
    var currentPoint = e.GetPosition(this);
    _dragOffset = currentPoint.Y - _dragStartPoint.Y;
}

private void OnPointerReleased(object? sender, PointerReleasedEventArgs e)
{
    if (!_isDragging) return;
    _isDragging = false;
    
    // 超过阈值切换图片
    if (Math.Abs(_dragOffset) > SwipeThreshold)
    {
        if (_dragOffset > 0) SwitchToPrevImage();  // 向下滑动
        else SwitchToNextImage();                   // 向上滑动
    }
}

数据源

源	API地址	图片数量
ClassIsland Hub	api.github.com/repos/ClassIsland/classisland-hub/contents/images	~70张
SECTL Hub	api.github.com/repos/SECTL/SECTL-hub/contents/docs/.vuepress/public/images	~78张

缓存策略

• 图片列表缓存：1小时
• 图片缓存：最多5张（当前+前后各1张）
• 预加载：自动加载相邻图片

设置选项

数据源选择

• ClassIsland Hub（默认）
• SECTL Hub

自动刷新

• 开关：开启/关闭
• 间隔：5-1440分钟（默认30分钟）

构建状态

✅ 构建成功 - 无错误

23 个警告（与本次修改无关）
0 个错误

使用说明

添加组件

1. 进入桌面编辑模式
2. 从组件库选择 "ZhiJiao Hub"
3. 最小2×2，可自由调整大小

浏览图片

• 上下滑动：像短视频一样切换图片
• 鼠标滚轮：滚动切换
• 指示器：右侧显示当前位置

切换数据源

1. 选中组件，点击设置按钮
2. 选择 "Image Source"
3. 选择 ClassIsland 或 SECTL

配置自动刷新

1. 在设置面板中开关 "Auto Refresh"
2. 设置刷新间隔（分钟）

后续优化建议

1. 动画效果: 添加滑动时的图片过渡动画
2. 本地缓存: 持久化图片到本地磁盘
3. 收藏功能: 允许用户收藏喜欢的图片
4. 分享功能: 分享图片链接
5. 更多源: 添加更多教育技术社区图片源