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