HBnote - 简洁的桌面记录应用 v1.1.1

HBnote 是一个使用 Electron+React 开发的轻量级桌面应用，提供笔记记录、待办事项管理、截止日期提醒和日程管理功能。

功能特点

• 笔记管理

  • 快速创建带标题和内容的笔记
  • 编辑和删除已有笔记
  • 支持拖拽重新排序，方便调整笔记顺序
  • 使用时间戳记录创建/修改时间
  • 删除确认对话框防止误操作

• 待办事项

  • 简洁的待办事项添加界面
  • 支持优先级设置（高、中、低），默认优先级为中，帮助重要任务优先处理
  • 灵活的排序方式：可选择按优先级排序或按创建时间排序
  • 按优先级排序时，相同优先级的按创建时间排序
  • 支持拖拽重新排序，方便调整任务顺序
  • 支持编辑现有待办事项，无需删除重建
  • 标记完成/未完成状态
  • 一键删除功能（带确认框）
  • 显示创建日期

• 截止日期提醒 (DDL)

  • 创建带标题和内容的截止事项
  • 精确设置截止日期和时间
  • 可选的提前提醒功能（5 分钟至 1 天）
  • 实时显示剩余时间倒计时
  • 基于截止时间的状态显示（正常/即将截止/已过期）
  • 桌面通知提醒功能

• 日程管理

  • 创建详细的日程安排，包含标题、描述、日期和时间段
  • 支持优先级设置（高、中、低）和分类管理（工作、学习、健康、娱乐、其他）
  • 按日期分组显示，支持"今天"、"明天"等友好日期显示
  • 时间冲突检测，确保结束时间晚于开始时间
  • 编辑和删除功能，带确认对话框防止误操作
  • 彩色标签显示优先级和分类，便于快速识别

• 悬浮窗功能

  • 丝滑淡入淡出切换悬浮小窗
  • 悬浮窗口可切换显示当前最近 DDL 或今日日程
  • 再次点击按钮恢复窗口
  • 支持透明度调节（5%-100%），点击透明度按钮显示滑块
  • 智能文字增强：低透明度时自动添加文字阴影确保可读性

• 界面设计

  • 无边框透明窗口
  • Material UI 界面组件
  • 自定义标题栏控制按钮
  • 支持窗口拖动、最小化、最大化和关闭
  • 日间/夜间主题切换 - 点击标题栏的日月图标即可切换
  • 拖拽动画效果 - 流畅的拖拽排序动画和放置反馈
  • 自定义背景图片 - 支持选择本地图片作为背景，可调节透明度、位置和尺寸

• 数据管理

  • 本地数据持久化存储
  • 自动保存机制

技术栈

• 前端: React 19, Material UI
• 后端: Electron 36
• 构建工具: Vite 6
• 包管理: npm/yarn
• 数据存储: Electron Store
• 日期处理: date-fns
• 图标: 自定义 SVG 图标组件

开发环境设置

1. 确保已安装 Node.js (v16+) 和 npm 或 yarn

2. 克隆仓库并安装依赖：

   git clone <仓库地址>
   cd hbnote
   npm install/ yarn install

3. 开发模式启动：

   # 启动前端开发服务器
   npm run dev/ yarn dev
   
   # 另一个终端启动Electron应用
   npm start/ yarn start

构建应用

构建生产版本：

# 完整构建（推荐）
npm run dist

# 只构建前端资源
npm run build

# 只打包为目录
npm run pack

也可以直接下载安装包开盖即用。

项目结构（未更新至 1.1.1）

hbnote/
├── main.js           # Electron主进程
├── preload.js        # 预加载脚本（上下文桥接）
├── index.html        # HTML入口
├── src/              # React源代码
│   ├── index.jsx     # React入口
│   ├── App.jsx       # 主应用组件
│   └── components/   # 组件目录
│       ├── Notes.jsx           # 笔记组件
│       ├── NoteItem.jsx        # 笔记项组件
│       ├── TodoList.jsx        # 待办事项组件
│       ├── TodoItem.jsx        # 待办事项项组件
│       ├── DDL.jsx             # 截止日期组件
│       ├── DDLItem.jsx         # 截止日期项组件
│       ├── Schedule.jsx        # 日程管理组件
│       ├── FloatWindow.jsx     # 悬浮窗组件
│       └── mui_local_icons/    # 本地图标组件
│
├── dist/             # 构建输出目录
├── build/            # Electron构建输出目录
└── package.json      # 项目依赖和脚本

数据存储

应用数据使用 Electron Store 保存在用户目录，默认位置：

• Windows: C:\Users\<Username>\AppData\Roaming\hbnote\hbnote-data.json

开发计划

• 支持 markdown
• 页面可置于最前
• 若未开启 DDL 提醒权限，主界面提醒用户未开启
• 悬浮窗可切换显示日程信息
• 能进行文件夹分类
• 可切换昼夜模式（点击日月按钮）
• 可点击图标切换颜色优先级，可按优先级排列
• 可拖动文本块
• todolist 可编辑
• 单列一个 DDL 模式
• 有动画地变小成一个悬浮窗，只显示当前最紧急的 DDL（点击悬浮窗按钮）
• 需要改进淡入淡出的平滑度
• 添加日程规划功能

注意事项

1. 首次运行需要安装全部依赖
2. 所有删除操作均有确认对话框防止误操作
3. DDL 提醒功能需要应用处于运行状态才能触发，首次使用时需授予浏览器通知权限
4. 项目使用自定义的本地图标组件替代外部图标库，降低依赖复杂度
5. 主题设置会自动保存，下次启动时恢复

P.S. 这是本笨鸟开发者的第一个成型的小应用，虽然是重复造轮子的工作，但对本人有不一样的意义。希望这个不起眼的工作能成为我技术生涯的良好开端！

如果该工作给你带来一点便利，本人不胜荣幸。