本项目是一个跨平台的 Redmine 客户端,旨在提供流畅、美观且高效的任务管理体验。本项目由旧版的 Swift/SwiftUI 版本迁移至目前的 Electron + React + Vite 架构。
- 核心: Electron, React (Functional Components + Hooks)
- 状态管理: 自定义
useAppViewModel(响应式状态管理) - 构建工具: Vite, TypeScript
- 打包: electron-builder
- 样式: Vanilla CSS (注重性能与 GPU 加速)
- 核心逻辑迁移: 从原生 Swift 逻辑完整迁移至 TypeScript 驱动的服务层。
- 性能优化:
- 引入
content-visibility: auto优化长列表渲染。 - 使用
transform替代top/left实现选择指示器的 GPU 加速动画。 - 实现
AuthenticatedImage缓存机制,减少冗余 API 请求。
- 引入
- UI 增强:
- 实现侧边栏项目/版本列表的平滑滑动指示器。
- 支持可调节宽度的响应式面板(Sidebar & Issue List Ratio)。
- 增加顶部标题栏拖动区域。
- 任务分组: 增加“按状态”和“按人员”分组切换功能。
- 动态过滤器: 过滤器选项根据分组模式动态调整(如:按状态分组时显示指派人过滤器)。
- 同步指示器: 修复了窗口缩放时选择指示器位置不更新的 Bug。
- macOS Vibrancy: 引入原生毛玻璃效果 (
vibrancy: 'under-window')。 - 玻璃态 UI: 优化透明模式下的
issue-item背景,使其呈现更通透的 Glassmorphism 效果。 - Light 模式优化: 针对浅色模式的透明效果进行深度调优,降低灰蒙蒙的感官,提升通透度。
- 策略调整: 考虑到浅色模式毛玻璃效果的局限性,决定在 Light 模式下自动禁用透明效果,保持稳定一致的纯色背景。
- 工程化: 完善
.gitignore文件,过滤不必要的二进制与构建产物。
- 核心功能: 基于 GitHub Releases 的自动更新系统,使用
electron-updater实现。 - 更新检查: 应用启动后 3 秒自动检查更新(仅生产环境)。
- 更新 UI: 新增
UpdaterModal组件,提供美观的更新界面:- 显示当前版本和新版本信息
- 下载进度条(实时显示速度和进度)
- 支持手动检查、下载、安装更新
- 一键打开 GitHub Releases 页面
- 集成入口: 设置面板新增"检查更新"按钮。
- 日志系统: 使用
electron-log记录更新过程。
由于窗口缩放、文字折行会导致元素高度瞬间跳变,指示器的更新采用了多帧同步策略:
const sync = () => {
update(); // 计算元素位置并 setStyle
if (count < 15) { // 持续同步 15 帧确保稳定
count++;
rafId = requestAnimationFrame(sync);
}
};所有业务逻辑封装在 src/renderer/hooks/useAppViewModel.ts。UI 通过 vm 访问数据和方法。
- 关键状态:
selectedProjectId,selectedVersionId,groupedIssues(带缓存)。
透明模式依赖 localStorage.getItem('enableTransparency') 和 isMac 环境。
CSS 类名控制:.transparency-enabled (仅在 Dark 模式有效)。
- 主进程模块:
src/main/updater.ts- 处理 GitHub Release 检查、下载、安装。 - Preload 桥接:
src/main/preload.ts- 暴露window.updaterAPI。 - 渲染进程 UI:
src/renderer/components/UpdaterModal.tsx- 更新界面组件。 - 配置:
package.jsonbuild.publish 配置 GitHub provider。
- 增加更多自定义过滤条件。
- 优化离线存储机制。
- Windows 平台的 Acrylic/Mica 特效探索 (类似 macOS 的模糊效果)。