零重力画布应用

一个基于Electron和HTML的无限画布应用，支持添加Web内容节点，拖拽移动和缩放。

功能特点

• 无限画布，支持平移和缩放
• 添加包含Web内容的节点
• 节点支持拖拽移动
• 实时同步WebContentsView位置
• 自定义窗口控制
• 无边框窗口设计
• 多会话管理，支持多账号登录同一网站
• 节点历史记录，记录浏览历史
• 节点复制粘贴，快速复制节点
• 节点导入导出，方便备份和共享

节点功能

• 节点标题区域支持拖拽移动
• 节点内容区域加载Web内容
• 节点控制按钮：刷新和删除
• 节点内容与画布位置同步
• 历史记录浏览，可以查看和导航到历史页面
• 前进后退功能，类似于浏览器的前进后退操作
• 会话选择，可以为每个节点选择不同的会话

多会话支持

• 支持多个独立会话，可同时登录同一网站的不同账号
• 会话数据隔离，确保账号之间安全分离
• 会话数据持久化，重启应用后保留登录状态
• 会话管理功能，可以创建、删除和清理会话数据

技术实现

• 使用Electron框架，结合HTML/CSS/JavaScript构建
• 利用Electron的WebContentsView显示网页内容
• 响应式设计，实时更新视图
• 使用CSS变换实现平滑的缩放和平移
• 为每个节点创建独立的会话，确保安全性
• 实现节点历史记录和状态管理

安装依赖

pnpm install

运行应用

pnpm start

构建应用

pnpm run build

使用方法

1. 左侧菜单栏点击"添加节点"按钮创建新节点
2. 输入节点标题和要加载的URL
3. 通过拖动节点头部区域移动节点
4. 拖动画布背景可以平移整个视图
5. 使用鼠标滚轮可以缩放画布
6. 节点右上角按钮可以刷新或删除节点
7. 右键节点可以显示更多选项（复制、历史记录、导出等）
8. Ctrl+C / Ctrl+V 复制和粘贴选中的节点
9. Ctrl+E / Ctrl+I 导出和导入节点
10. Alt+左箭头 / Alt+右箭头 节点内容后退和前进
11. 右键节点选择"查看历史记录"可以查看和导航到历史URL

键盘快捷键

快捷键	功能
Ctrl+C	复制选中的节点
Ctrl+V	粘贴之前复制的节点
Ctrl+上箭头	对齐节点 节点向上排列
Ctrl+右箭头	对齐节点 节点向右排列
Ctrl+下箭头	对齐节点 节点向下排列
Ctrl+左箭头	对齐节点 节点向左排列
Tab	切换工具（操作/手势）
空格	重置视图

项目目录结构

electron-app/
├── src/                # 源代码目录
│   ├── main.js         # 主进程代码
│   ├── index.html      # 主窗口HTML
│   ├── renderer.js     # 渲染进程代码
│   ├── style.css       # 样式表
│   ├── models/         # 数据模型
│   │   ├── Application.js       # 应用程序主类
│   │   ├── CanvasManager.js     # 画布管理器
│   │   ├── Node.js              # 节点数据模型
│   │   ├── NodeManager.js       # 节点管理器
│   │   └── SettingsManager.js   # 设置管理器
├── node_modules/       # 依赖模块
├── package.json        # 项目配置
└── README.md           # 项目说明

许可证

MIT