用一张无限画布，组织电脑上的所有项目。
Project Atlas 是一款工作空间可视化工具，它不管理文件、不修改目录、不同步任何数据——它仅维护一张属于你自己的工作空间地图（Workspace Map），让你能够将分散在文件系统各处的项目，以符合自己思维方式的形式组织起来。
| ✅ 添加项目 | 🔗 自由连线 | 📦 分组管理 |
| 🏷️ 标签系统 | ⭐ 收藏项目 | 🔍 搜索筛选 |
现代操作系统只能表达「文件属于哪个目录」，却不能表达：
- 哪几个项目属于同一个主题？
- 哪几个项目互相依赖？
- 当前正在进行哪些工作？
Project Atlas 建立在文件系统之上，作为一层认知层（Cognitive Layer），帮助你将电脑中的项目从孤立的目录，转变为一张能够表达思路、目标和工作流程的可视化地图。
不是文件管理器，不是 IDE，不是知识图谱——而是你的 Project Workspace。
| 功能 | 说明 |
|---|---|
| ✅ 添加项目 | 输入名称 + 本地路径 + 颜色标识 + 标签 |
| ✅ 删除项目 | 节点上直接删除 / 属性面板删除 |
| ✅ 无限画布 | 基于 React Flow，支持缩放、平移、拖拽 |
| ✅ 拖拽节点 | 自由摆放，位置自动保存到 IndexedDB |
| ✅ 连线（Edge） | 从节点底部拖拽到另一节点顶部，建立自定义关系 |
| ✅ 群组（Group） | 用矩形区域组织项目，视觉分组 |
| ✅ 标签系统 | 创建/管理标签，点击标签筛选项目 |
| ✅ 收藏项目 | 星标标记，左侧栏快速访问收藏列表 |
| ✅ 搜索项目 | 按名称/路径/标签模糊搜索，实时过滤 |
| ✅ 属性面板 | 编辑名称、路径、备注、颜色、标签 |
| ✅ 复制路径 | 一键复制项目路径到剪贴板 |
| ✅ 空状态引导 | 无项目时显示欢迎页面引导操作 |
| ✅ 数据持久化 | IndexedDB 自动保存，刷新不丢失 |
| 功能 | 阶段 |
|---|---|
| 📌 分组创建 UI | Phase 2 |
| 📌 连线标签编辑 | Phase 2 |
| 📌 右键上下文菜单 | Phase 2 |
| 📌 Git 信息展示 | Phase 3 |
| 📌 多 Workspace | Phase 3 |
| 📌 AI 辅助整理 | Phase 4 |
| 📌 Electron 桌面集成 | 后续 |
| 层级 | 技术选型 |
|---|---|
| 前端框架 | React 18 + TypeScript |
| 构建工具 | Vite 6 |
| Canvas 画布 | React Flow v11 |
| 状态管理 | Zustand |
| UI 组件 | shadcn/ui + TailwindCSS v3 |
| 图标 | Lucide React |
| 数据持久化 | Dexie.js (IndexedDB) |
| ID 生成 | nanoid |
- Node.js 18+
- npm 9+
# 安装依赖
npm install
# 启动开发服务器
npm run dev浏览器访问 http://localhost:5173
npm run build
npm run previewpatlas/ # 项目根目录
├── .aidocs/ # 项目文档
│ └── ai-execute.md # 执行记录与开发日志
├── plans/
│ └── project-atlas-architecture.md # 架构设计文档
├── public/
│ └── vite.svg # Favicon
├── src/
│ ├── App.tsx # 根组件（三栏布局 + 空状态）
│ ├── main.tsx # 应用入口
│ ├── index.css # TailwindCSS + CSS 变量
│ ├── components/
│ │ ├── canvas/
│ │ │ ├── CanvasView.tsx # React Flow 画布容器
│ │ │ ├── ProjectNode.tsx # 自定义项目节点
│ │ │ └── GroupNode.tsx # 自定义分组节点
│ │ ├── sidebar/
│ │ │ ├── LeftSidebar.tsx # 左侧导航栏
│ │ │ └── RightPanel.tsx # 右侧属性面板
│ │ ├── dialogs/
│ │ │ ├── AddProjectDialog.tsx # 添加项目对话框
│ │ │ └── TagManager.tsx # 标签管理对话框
│ │ └── ui/ # shadcn/ui 基础组件
│ ├── stores/
│ │ ├── projectStore.ts # 项目状态管理
│ │ ├── canvasStore.ts # 画布状态（边、分组、布局）
│ │ ├── tagStore.ts # 标签状态
│ │ └── uiStore.ts # UI 状态（搜索、筛选）
│ ├── db/
│ │ └── index.ts # Dexie.js IndexedDB 定义
│ ├── types/
│ │ └── index.ts # TypeScript 类型定义
│ └── lib/
│ └── utils.ts # cn() 工具函数
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── postcss.config.js
├── tsconfig.json / tsconfig.app.json / tsconfig.node.json
└── components.json # shadcn/ui 配置
- 点击左侧栏 「添加项目」 按钮
- 输入项目名称（如：
DeepWiki） - 输入本地路径（如：
D:\Projects\DeepWiki） - 选择颜色标识
- 关联标签
- 点击 「添加」，项目节点即出现在画布上
- 移动：拖拽节点自由摆放
- 连线：从节点底部圆点拖拽到另一节点顶部圆点
- 分组：（即将支持）创建矩形区域将项目归组
- 标签筛选：点击左侧标签列表，筛选对应项目
- 编辑属性：点击节点 → 右侧面板编辑名称、路径、备注、颜色、标签
- 收藏：点击节点上的星标图标
- 删除：点击节点上的删除图标，或在属性面板中删除
- 复制路径：点击节点底部的「复制路径」按钮
在左侧栏搜索框中输入关键词，画布实时过滤匹配的项目（按名称、路径、标签搜索）。
- 不替代文件系统 — 所有文件仍在原处
- 不解构项目 — 不扫描代码，不分析内容
- 用户驱动 — 所有关系和分组由用户定义
- 视觉优先 — 借鉴 Miro + Figma，Group 是一等公民
- 本地优先 — 无需账号，无需网络，数据本地保存
Project Atlas 并不是传统意义上的知识图谱。连线只是辅助，Group（分组）才是组织项目的核心方式。整体更像一个项目工作台（Project Workspace），用户可以自由摆放节点，把画布当作自己的工作白板。
Phase 1 ✅ Bug 修复
├── 修复 useState import 位置错误
├── 修复"打开目录"为复制路径
└── 添加空状态引导
Phase 2 🔜 分组与连线优化
├── 分组创建 UI（对话框 + 画布操作）
├── 连线标签编辑
├── 右键上下文菜单
└── 节点自动布局
Phase 3 📋 Git 集成与 Workspace
├── Git 仓库信息展示
├── 多 Workspace 支持
└── 导出/导入工作空间
Phase 4 🤖 AI 辅助
├── AI 自动建议分组
└── AI 辅助布局整理
MIT
Made with ❤️ for developers who organize the world.