123 lines
5.1 KiB
Markdown
123 lines
5.1 KiB
Markdown
# ThinkFlow AI
|
||
|
||
中文 | [English](./README.en.md)
|
||
|
||
**ThinkFlow AI** 是一款基于 Vue 3 和 VueFlow 构建的次世代、本地优先（Local-first）AI 驱动思维导图工具。它不仅仅是一个绘图软件，更是一个能够与你共同思考的“脑力增幅器”。通过将 LLM（大语言模型）的发散性能力与结构化可视化相结合，ThinkFlow AI 能将模糊的想法迅速转化为清晰、深度的知识体系。
|
||
|
||
本项目通过 Vibe Coding 完成（需求驱动 + AI 协作迭代）。
|
||
|
||
---
|
||
|
||
## 🔗 在线预览
|
||
|
||
立即体验：[https://thinkflow-ai.lz-t.top/](https://thinkflow-ai.lz-t.top/)
|
||
|
||
---
|
||
|
||
## 🌟 为什么选择 ThinkFlow AI？
|
||
|
||
传统的思维导图工具往往需要手动录入每一个分支，这在灵感爆发时往往会成为阻碍。ThinkFlow AI 重新定义了这一过程：
|
||
|
||
1. **AI 驱动的自动化发散**：输入一个核心词，AI 会基于逻辑链路自动向外扩展，帮助你打破“白纸焦虑”。
|
||
2. **上下文感知的深度对话**：每一个节点都带有其在思维树中的完整路径上下文，这意味着 AI 能够理解你为什么从 A 想到 B，从而生成更精准的后续建议。
|
||
3. **多维度的感官呈现**：通过深度“回答（Answer）”获取文本知识，通过 AI 生图获取视觉意象，通过“全篇总结”获取宏观洞察。
|
||
4. **极致的隐私与自由**：采用本地优先架构，配置存储在浏览器本地，支持任何 OpenAI 兼容接口，不锁定任何平台。
|
||
|
||
---
|
||
|
||
## 🚀 核心功能架构
|
||
|
||
### 1. 智能扩展系统
|
||
|
||
- **核心想法激活**：一键生成思维树根基。
|
||
- **路径上下文追问**：对节点进行 Follow-up，AI 将结合从根节点到当前节点的完整逻辑路径进行推理。
|
||
- **节点折叠与管理**：支持大规模图谱的子树折叠，保持视野清爽。
|
||
|
||
### 2. 内容深挖与总结
|
||
|
||
- **深度回答 (Deep Dive)**：针对特定概念生成 300-500 字的专业解析，支持 Markdown 丰富格式。
|
||
- **视觉生成 (Image Gen)**：利用 CogView 或 DALL-E 为节点生成写实风格配图，强化视觉记忆。
|
||
- **全局摘要 (Summary)**：自动分析全图逻辑，提取核心洞察与结论。
|
||
|
||
### 3. 画布交互与排版
|
||
|
||
- **智能树形布局**：内置基于子树高度动态计算的算法，解决节点展开后的重叠问题。
|
||
- **联动拖拽**：父节点移动时，子节点保持相对位置同步移动。
|
||
- **多样化导出**：完美支持导出为结构化 Markdown，保留所有深度回答内容。
|
||
|
||
---
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
| 维度 | 技术选型 |
|
||
| :----------- | :---------------------------------- |
|
||
| **前端框架** | Vue 3 (Composition API) |
|
||
| **构建工具** | Vite 5 + TypeScript |
|
||
| **画布引擎** | @vue-flow/core (高性能、高度定制化) |
|
||
| **UI/样式** | Tailwind CSS + Lucide Icons |
|
||
| **国际化** | Vue-I18n (中英双语无缝切换) |
|
||
| **Markdown** | Markdown-it (支持节点内容渲染) |
|
||
|
||
---
|
||
|
||
## 📂 源码结构
|
||
|
||
```text
|
||
src/
|
||
├── components/ # UI 组件层
|
||
│ ├── WindowNode.vue # 核心逻辑载体：自定义节点，集成生图/回答/追问能力
|
||
│ ├── TopNav.vue # 全局控制：布局算法触发、导出、总结、全屏等
|
||
│ ├── SideNav.vue # 视图配置：小地图、连线样式、背景切换、设置入口
|
||
│ ├── BottomBar.vue # 想法入口：灵感触发点
|
||
│ └── ...Modals # 弹窗逻辑：设置、预览、重置确认等
|
||
├── composables/ # 领域逻辑层
|
||
│ └── useThinkFlow.ts # 业务心脏：响应式状态管理、API 调度、排版算法实现
|
||
├── i18n/ # 语言资产
|
||
│ └── locales/ # zh.json / en.json 翻译文件
|
||
├── App.vue # 应用骨架：VueFlow 容器配置与组件组装
|
||
└── main.ts # 入口文件
|
||
```
|
||
|
||
---
|
||
|
||
## ⚙️ API 服务说明 (重要)
|
||
|
||
为了让用户能够开箱即用，本项目提供了一套默认的演示接口。
|
||
|
||
### 1. 演示接口说明
|
||
|
||
- **服务转发**：默认请求通过 **Cloudflare Workers & Pages** 进行转发与控制。
|
||
- **模型支持**：目前后端对接了智谱 Bigmodel (glm-4-flash / cogview-3-flash) 的免费额度。
|
||
- **限制**：由于是公共演示接口，可能会存在请求频率限制或额度耗尽的情况。
|
||
|
||
### 2. 进阶使用建议 (自定义接口)
|
||
|
||
为了获得更稳定、更高质量的生成效果（例如使用 GPT-4o, Claude 3.5 Sonnet 等），强烈建议在 **设置 (Settings)** 中配置您自己的 API 端点：
|
||
|
||
- **Base URL**: 您的 API 代理地址 (需支持 CORS)。
|
||
- **Model**: 目标模型名称。
|
||
- **API Key**: 您的私有密钥。
|
||
|
||
_注：自定义模式下，请求将直接从您的浏览器发往目标端点，不经过任何中转，更加安全高效。_
|
||
|
||
---
|
||
|
||
## 📦 快速部署
|
||
|
||
```bash
|
||
# 克隆仓库
|
||
git clone https://github.com/your-repo/ThinkFlowAI.git
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发
|
||
npm run dev
|
||
|
||
# 生产构建
|
||
npm run build
|
||
```
|
||
|
||
---
|
||
|