一个智能的文件路径保存和展示工具 - 将本地任意位置的文件拖入白板，自动保存文件路径，下次打开直接定位！
✨ 支持 Windows / macOS / Linux
串串白板是一个本地文件路径保存和展示工具，帮你解决这些问题：
- 📁 散落各处的文件 - 桌面、文档、项目文件夹的文件无法统一管理
- 🔗 项目关联复杂 - 一个项目涉及多个路径下的文件，记不住在哪
- 📍 路径丢失烦恼 - 导出配置后，下次打开文件就找不到了
- 🎯 快速定位需求 - 需要快速打开特定项目的特定文件
核心亮点：串串白板会自动保存每个文件在你电脑上的路径，下次打开配置，直接点击就能定位到源文件！
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 📂 第一步：拖入文件 │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 桌面\图片\bg.png 📁 文档\报告.pdf 📂 项目\代码 │ │
│ │ │ │ │ │ │
│ │ └──────────────────┼──────────────────┘ │ │
│ │ ▼ │ │
│ │ ┌─────────────────┐ │ │
│ │ │ 串串白板 │ │ │
│ │ │ │ │ │
│ │ │ 保存文件路径 │ │ │
│ │ └─────────────────┘ │ │
│ │ │ │ │
│ └────────────────────────────┼────────────────────────────┘ │
│ ▼ │
│ 💾 第二步：导出配置（JSON文件，包含所有文件路径信息） │
│ │ │
│ ▼ │
│ 📂 第三步：下次打开，直接定位源文件 │
│ │
└─────────────────────────────────────────────────────────────────┘
| 特性 | 串串白板 | 传统方式 |
|---|---|---|
| 📍 路径保存 | ✅ 自动保存本地完整路径 | ❌ 不保存路径 |
| 🎯 快速定位 | ✅ 点击节点直接打开文件夹 | ❌ 手动在资源管理器搜索 |
| 📦 导出配置 | ✅ 导出包含路径的配置文件 | ❌ 只能复制文件本身 |
| 🔄 跨会话 | ✅ 路径配置持久保存 | ❌ 每次都要重新绑定 |
| 🔗 文件关联 | ✅ 可视化连线展示关系 | ❌ 散落在不同文件夹 |
直接双击根目录下的 启动.bat 文件即可运行。
- 双击
构建.bat生成安装程序 - 构建完成后在
dist\目录找到串串白板 Setup 1.0.0.exe - 将这个安装程序分享给任何人，他们都能直接安装使用
直接用浏览器打开 index.html 即可（Chrome、Edge、Firefox、Safari都支持）
┌─────────────────────────────────────────────────────────────────┐
│ 串串白板 │
│ ┌──────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 新建 │ │添加文件│ │文本节点│ │导入配置│ │导出配置│ │
│ └──────┘ └────────┘ └────────┘ └────────┘ └────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📂 拖入任意文件到这里 │ │
│ │ │ │
│ │ [空状态提示区域] │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ 💡 提示: 拖入任意文件 | 连线 | 框选 | 平移 | 缩放 │
│ │
└─────────────────────────────────────────────────────────────────┘
操作说明：
- 从文件资源管理器直接拖入文件到白板区域
- 支持拖入多个文件
- 支持图片、PDF、视频、音频、Office文档等任意格式
- 自动保存文件路径，无需手动配置
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │
│ │ [图片预览] │ │ [PDF预览] │ │ [Excel预览] │ │
│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│ │
│ ├────────────────┤ ├────────────────┤ ├────────────────┤ │
│ │ 📄 report.pdf │ │ 📊 data.xlsx │ │ 📄 文档.docx │ │
│ │ PDF · 2.4MB │ │ XLS · 856KB │ │ DOCX · 123KB │ │
│ │ C:\文档\ │ │ D:\数据\ │ │ E:\项目\ │ │
│ │ [+] │ │ [+] │ │ [+] │ │
│ └────────────────┘ └────────────────┘ └────────────────┘ │
│ │
│ ↓ (连线) │
│ │
│ ┌────────────────┐ │
│ │ ✍️ 文本节点 │ │
│ │ │ │
│ │ 项目说明... │ │
│ │ [+] │ │
│ └────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
节点特性：
- 📁 文件节点显示完整本地路径（见第三行）
- 🖼️ 图片直接预览，支持各种常见格式
- 📄 PDF 内嵌预览，可翻页缩放
- 📊 Office 文档提取内容预览
- 🔗 拖动右下角
[+]按钮可创建连线
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────┐ │
│ │ 📄 设计稿 │───────────────连线────────────────┐ │
│ │ PNG │ │ │
│ │ C:\设计\ │ │ │
│ └──────────────┘ │ │
│ ▼ │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ 📄 需求文档 │◄──────────────────────│ 📄 开发文档 │ │
│ │ DOCX │ 连线 │ MD │ │
│ │ D:\需求\ │ │ E:\项目\ │ │
│ └──────────────┘ └──────────────┘ │
│ │
│ [点击连线可编辑标签和颜色] │
│ │
└─────────────────────────────────────────────────────────────────┘
连线功能：
- 拖动节点右下角
[+]按钮到另一个节点 - 支持添加文字标签说明关系
- 支持自定义连线颜色
- 适合制作流程图、关系图
┌─────────────────────────────────────────────────────────────────┐
│ ┌─────────┐│
│ │ Preview ││
│ │ 预览开 ││
│ └─────────┘│
├──────────────────────────────────────────────────────┬──────────┤
│ │ │
│ ┌─ 文件预览 ──────────────────────────────────────┐ │ ┌──────┐ │
│ │ │ │ │ │ │
│ │ [图片预览区域] │ │ │ 预览 │ │
│ │ │ │ │ │ │
│ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ └──────┘ │
│ │ │替换文件│ │尝试恢复│ │打开文件│ │ │ │
│ └─────────────────────────────────────────────────┘ │ │
│ │ │
│ ┌─ 文件信息 ──────────────────────────────────────┐ │ │
│ │ 文件名：screenshot.png │ │ │
│ │ 格式：PNG │ │ │
│ │ 大小：2.4 MB │ │ │
│ │ 修改时间：2024-01-15 14:30 │ │ │
│ │ 预览能力：图片预览 │ │ │
│ │ 绑定状态：✅ 已连接本地文件 │ │ │
│ └─────────────────────────────────────────────────┘ │ │
│ │ │
│ ┌─ 本地路径 ──────────────────────────────────────┐ │ │
│ │ ┌──────────────────────────────────────────┐ │ │ │
│ │ │ C:\Users\Desktop\项目\screenshot.png │ │ │ │
│ │ └──────────────────────────────────────────┘ │ │ │
│ │ 完整本地路径 │ │ │
│ │ │ │ │
│ │ [打开所在文件夹] [复制路径] [定位节点] │ │ │
│ └─────────────────────────────────────────────────┘ │ │
│ │ │
│ ┌─ 备注 ──────────────────────────────────────────┐ │ │
│ │ ┌──────────────────────────────────────────┐ │ │ │
│ │ │ 界面设计第一版... │ │ │ │
│ │ └──────────────────────────────────────────┘ │ │ │
│ └─────────────────────────────────────────────────┘ │ │
│ │ │
└──────────────────────────────────────────────────────┴──────────┘
属性面板功能：
- 📺 文件预览（图片、视频、PDF、音频等）
- 📁 文件信息（元数据）
- 🔗 打开所在文件夹 - 直接在资源管理器定位文件
- 📋 复制完整路径 - 一键复制本地路径
- 📝 文件备注
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌──────────────────────────────────────────┐ ┌───────────┐│
│ │ │ │ 小地图 ││
│ │ [主画布区域] │ │ 3 节点 ││
│ │ │ │ ┌─────┐ ││
│ │ ┌────┐ │ │ │░░░░░│ ││
│ │ │节点│ │ │ │░ ▪ ░│ ││
│ │ └────┘ │ │ │░░░░░│ ││
│ │ ┌────┐ │ │ └─────┘ ││
│ │ │节点│ │ │ ~~~ ││
│ │ └────┘ │ │ (视口) ││
│ │ │ └───────────┘│
│ └──────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
小地图功能：
- 显示所有节点分布
- 显示当前视口位置
- 点击小地图快速跳转
- 拖动视口框平移画布
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 🎭 演示模式 │
│ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ 📄 项目汇报演示 │ │
│ │ │ │
│ │ ┌────────┐ │ │
│ │ │图片A │───────┐ │ │
│ │ └────────┘ │ │ │
│ │ ▼ │ │
│ │ ┌────────────┐ │ │
│ │ │ 文本说明 │ │ │
│ │ └────────────┘ │ │
│ │ │ │ │
│ │ ▼ │ │
│ │ ┌────────────┐ │ │
│ │ │ 结果展示 │ │ │
│ │ └────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
│ [ 退出演示 ] 按 ESC 也可退出 │
│ │
└─────────────────────────────────────────────────────────────────┘
演示模式：
- 全屏沉浸式展示
- 隐藏所有 UI 元素
- 只显示画布内容
- 按
Esc或点击按钮退出
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─ 白板总览 ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ 节点总数：5 连线总数：3 文件节点：4 缺失文件：2 │ │
│ │ │ │
│ │ [继续加文件] [新建文本] [批量恢复] [重置视图] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌─ 缺失文件 ─────────────────────────────────────────────┐ │
│ │ │ │
│ │ ⚠️ report.pdf PDF · 2.4MB [定位] │ │
│ │ ⚠️ data.xlsx XLS · 856KB [定位] │ │
│ │ │ │
│ │ 点击「批量恢复」重新选择文件夹，系统会自动匹配文件 │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
批量恢复功能：
- 自动检测缺失文件
- 一键批量重新绑定
- 智能匹配文件名和大小
| 功能 | 说明 |
|---|---|
| 📂 文件拖入 | 从资源管理器直接拖入任意文件 |
| 📍 路径保存 | 自动保存文件在电脑上的完整路径 |
| 🖼️ 文件预览 | 支持图片、PDF、视频、音频、Office文档 |
| ✍️ 文本节点 | 添加说明文字、脚本、结论 |
| 🔗 节点连线 | 建立文件之间的关系图谱 |
| 🗺️ 小地图 | 快速导航和定位 |
| 💾 自动保存 | 布局和路径配置自动保存 |
| 📦 导入导出 | 分享配置文件，下次打开自动定位 |
| 🎭 演示模式 | 沉浸式全屏展示 |
| 🌙 暗色主题 | 护眼专业配色 |
| 按键 | 功能 |
|---|---|
T |
创建文本节点 |
Space + 拖动 |
平移画布 |
滚轮 |
缩放画布 |
Delete |
删除选中节点/连线 |
Esc |
取消选择 / 退出演示 / 取消连线 |
L |
切换到连线模式 |
V |
切换到编辑模式 |
- 双击
构建.bat - 等待构建完成（几分钟）
- 在
dist\目录找到串串白板 Setup 1.0.0.exe
| 方式 | 说明 |
|---|---|
| 💿 安装程序 | 分享 dist\串串白板 Setup 1.0.0.exe，双击安装 |
| 📁 绿色版 | 分享 dist\win-unpacked\ 文件夹，解压即用 |
| 技术 | 说明 |
|---|---|
| Electron 28 | 跨平台桌面应用框架 |
| Vanilla JS | 无框架依赖，原生性能 |
| CSS3 | 现代样式和动画 |
| IndexedDB | 文件句柄持久化 |
| LocalStorage | 配置自动保存 |
串串白板/
├── index.html # 主页面
├── app.js # 应用逻辑
├── styles.css # 样式文件
├── package.json # 项目配置
├── electron/
│ ├── main.js # Electron 主进程
│ └── preload.js # 预加载脚本
├── dist/ # 构建输出目录
├── 启动.bat # 启动应用
└── 构建.bat # 构建安装包
- ✅ 路径自动保存 - 拖入文件后，完整路径会自动保存
- ✅ 跨会话持久化 - 关闭后再打开，文件路径配置依然有效
- ✅ Electron版更稳定 - 桌面版文件路径权限更可靠
⚠️ 浏览器版限制 - 由于安全机制，刷新后需要重新授权文件访问⚠️ 文件移动后 - 如果源文件被移动或删除，需要重新定位
欢迎提交 Issue 和 Pull Request！
📋 串串白板 - 保存文件路径，下次直接定位
Made with ❤️