面向本地使用的 画布笔记 / 待办 桌面客户端（Windows EXE）。
节点外观参考 Upload Labs 窗口式卡片，连线方式参考 ComfyUI（仅连接点之间、贝塞尔曲线）。无边框独立窗口，双击即可运行，无需浏览器；数据保存在本机。
| 功能 | 说明 |
|---|---|
| Windows 独立客户端 | 打包为 .exe，安装版 / 绿色便携版均可 |
| 便签 / 记事本 | 标题 + 正文，适合会议纪要与短备忘 |
| Markdown | 支持 Markdown 正文；自动将首个一级标题 # 识别为组件标题；编辑 / 预览切换 |
| 开始 / 截止日期 | 日程名称 + 起止日期 |
| 信息列表 | 可增减条目的清单节点 |
| 文本框缩放 | 便签与其他文本输入框支持四向拖动调整大小 |
| 分组遮罩 | 半透明分组叠在控件上方；标题栏可拖动，组内控件可穿透点击 |
| 分组跟随 | 拖动分组时仅「开始拖动时」已在组内的控件跟随移动 |
| 自定义连接点 | 左右侧端口：通用 / 相关事件 / 日期 / 相关信息 |
| 节点管理 | 单选节点时可管理连接点名称、类型与顺序 |
| 通用互通 | 红色通用可与任意类型连接；其他类型需同色匹配 |
| 多连线 | 同一连接点可接到多个其他连接点 |
| 方向约束 | 仅允许不同卡片的左 ↔ 右；禁止自连与同侧连线 |
| 框选 | 底部「框选」模式拖拽矩形批量选中控件 |
| 底部工具栏 | Upload Labs 风格悬浮菜单；窄窗口自动收拢为「鼠标 / 新建 / 控件操作 / 工作区」 |
| 工作区 | 新建 / 切换 / 重命名 / 导入导出本地工作区 |
| 画布右键菜单 | 空白处右键可快速新建便签、日期、清单、Markdown、分组 |
| 设置 · 关于 | 底部「设置」打开浮窗；关于页展示版本信息，并可对照 GitHub Release 检查更新 |
| 画布操控 | 左键拖空白平移、滚轮缩放、适应视图 |
| 无边框窗口 | 自绘标题栏（最小化 / 最大化 / 关闭） |
| 本地持久化 | 自动写入本机存储 |
选中节点后，底部 dock 出现 删除、复制、+左、+右 等上下文操作。
通过 +左 / +右 打开对话框；默认类型为 通用（红色）。
- 前往 Releases 下载最新 Windows 包
- 推荐便携版（免安装）：
CanvasNotes-*-portable.exe— 双击即可运行
若使用安装版：CanvasNotes-*-Setup.exe— 一键安装到当前用户目录 - 启动后即可在独立客户端窗口中编辑画布（无需打开浏览器）
首次如被 SmartScreen 拦截，选择「仍要运行」（开源自建包常见提示）。
便携版首次启动会解压运行时，可能等待数秒，属正常现象。
git clone https://github.com/kamuxiy/CanvasNotes.git
cd CanvasNotes
npm install
npm run dev:desktop会启动 Vite 渲染进程与 Electron 桌面窗口（不是用浏览器当主界面）。
在 Windows 上：
npm install
npm run dist:win产物输出到 release/：
| 文件 | 说明 |
|---|---|
CanvasNotes-*-portable.exe |
绿色便携版，双击即用（推荐） |
CanvasNotes-*-Setup.exe |
一键安装包（当前用户目录） |
也可在仓库 Actions 中手动触发 Build Windows Client，或推送 v* 标签自动构建并发布 Release。
| 项目 | 要求 | 说明 |
|---|---|---|
| 操作系统 | Windows 10 / 11（64 位） | 正式客户端目标平台 |
| 运行方式 | 下载 EXE | Release 已内置运行时，无需预装 Node / 浏览器 |
| Node.js | 20+ | 仅源码开发或自行打包时需要 |
| npm | 随 Node 附带 | 安装依赖与执行打包脚本 |
| 库 | 作用 |
|---|---|
| Electron | 桌面壳与无边框窗口 |
| React | 界面 |
| Vite | 渲染进程构建 |
| TypeScript | 类型与构建 |
| Tailwind CSS | 样式工具链 |
| electron-builder | 打包 Windows EXE |
| uuid | 节点 / 连接点 ID |
CanvasNotes/
├── electron/
│ ├── main.cjs # Electron 主进程（独立窗口、单实例）
│ └── preload.cjs # 预加载：窗口控制桥
├── src/ # 渲染进程 UI
│ ├── App.tsx
│ ├── appMeta.ts # 关于页元数据（版本由 Vite 从 package.json 注入）
│ ├── components/
│ │ ├── BottomDock.tsx
│ │ ├── CanvasBoard.tsx
│ │ ├── GroupFrame.tsx
│ │ ├── NodeCard.tsx
│ │ ├── SettingsModal.tsx # 设置浮窗（侧栏分类 + 关于）
│ │ ├── SocketDialog.tsx
│ │ ├── SocketManagerPanel.tsx
│ │ ├── SocketPort.tsx
│ │ ├── TitleBar.tsx
│ │ └── WorkspaceSwitcher.tsx
│ ├── hooks/useCanvasStore.ts
│ ├── utils/checkUpdate.ts # 对照 GitHub Release 检查更新
│ ├── store.ts
│ └── types.ts
├── scripts/
│ └── bump-version.mjs # 升版本（patch/minor/major）
├── build/ # electron-builder 资源（图标等）
├── .github/workflows/
│ └── build-windows.yml # 自动打包 Windows EXE
├── docs/images/ # README 配图
├── package.json # 版本唯一来源（UI / 打包 / Release 共用）
└── release/ # 本地打包输出（不入库）
新增功能并推送到 GitHub 时，请同步更新本 README（功能表、结构与使用说明）。 每次更新 GitHub 仓库文件前，先执行
npm run version:patch（或version:minor/version:major）升版本；package.json是唯一版本源，Vite 编译时注入到关于页与更新检查，electron-builder 产物名也会带上该版本。
| 操作 | 说明 |
|---|---|
| 底部「便签 / 日期 / 清单 / Markdown / 分组」 | 在视口中心附近添加控件 |
| 画布空白右键 | 打开新建菜单 |
| 底部「设置」 | 打开设置浮窗（关于 / 检查更新） |
| 左键拖空白处 | 平移画布 |
| 滚轮 | 缩放 |
| 拖节点标题栏 | 移动节点 |
| 拖分组标题栏 | 移动分组及开始拖动时已在组内的控件 |
| 从连接点拖出 | 拉线到另一侧连接点 |
| 双击连接点 | 重命名 |
| 右键连接点 | 删除该连接点 |
| 点击连线 | 删除连线 |
| Delete / Backspace | 删除选中节点 |
| 适应 | 将全部节点适配进视口 |
| 规则 | 说明 |
|---|---|
| 方向 | 仅 左 ↔ 右（输入 ↔ 输出），跨不同卡片 |
| 自连 | 同一卡片不允许自连 |
| 同侧 | 左连左、右连右不允许 |
| 通用（红） | 可与任意颜色类型互连 |
| 其他类型 | 仅同类型互连 |
| 多连 | 一个连接点可接到多个目标；不会挤掉已有连线 |
- 点击卡片标题栏选中（Shift 可多选）
- 底部出现 删除 / 复制；单选时另有 +左 / +右
- +左 / +右 打开「新建连接点」对话框（默认类型为通用）
立项以来的对话、需求碎片与版本变更已归档：
| 文档 | 说明 |
|---|---|
| docs/history | 对话索引 |
| PROMPT.md | 需求按主题整理 |
| CONVERSATION.md | 完整阶段时间线 |
| CHANGELOG.md | 按版本变更日志 |
根目录 Prompt.txt 仍保留原始累计粘贴，供对照。
| 项目 | 用途 |
|---|---|
| Upload Labs | 窗口式模块卡片、边缘端口与底部工具栏观感参考 |
| ComfyUI | 仅端口连线、贝塞尔曲线交互参考 |
- 感谢 Upload Labs 的模块化节点与底部 dock 交互启发
- 感谢 ComfyUI 社区的节点连线范式
- 感谢 Electron / React / Vite / electron-builder 等开源工具链维护者
本项目使用 MIT License：
- 允许个人与商业使用、修改、分发
- 分发须保留版权声明与许可文本
- 软件按「原样」提供，不附带担保
Made by kamuXiY
画布笔记 · Windows 桌面客户端 · Electron + React