# nano_studio

**Repository Path**: jerrylau213/nano_studio

## Basic Information

- **Project Name**: nano_studio
- **Description**: 一个基于 AI 的知识管理平台，支持 PDF 文档解析、网页内容抓取、RAG 智能问答、思维导图生成等功能。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-30
- **Last Updated**: 2025-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nano Studio

> 现代化的知识管理和智能笔记系统

一个基于 AI 的知识管理平台，支持 PDF 文档解析、网页内容抓取、RAG 智能问答、思维导图生成等功能。

## 🌟 项目概览

Nano Studio 是一个完整的全栈应用，包含前端、多个后端环境以及技术验证项目。

## 📸 功能展示

### 🏠 首页与认证

![首页导航](./docs/images/01-home-page.png)
*首页 - 功能模块导航*

![登录注册](./docs/images/02-login-page.png)
*用户认证 - 登录与注册*

---

### 📚 Notebook LM - 智能知识管理

#### 主界面

![笔记本主界面](./docs/images/03-notebook-main.png)
*三栏布局 - 知识源、对话、笔记*

#### 多源知识导入

<table>
  <tr>
    <td width="33%">
      <img src="./docs/images/04-pdf-upload.png" alt="PDF上传">
      <p align="center"><em>PDF 文档上传</em></p>
    </td>
    <td width="33%">
      <img src="./docs/images/17-web-capture.png" alt="网页抓取">
      <p align="center"><em>网页内容抓取</em></p>
    </td>
    <td width="33%">
      <img src="./docs/images/18-text-source.png" alt="文本知识源">
      <p align="center"><em>纯文本导入</em></p>
    </td>
  </tr>
</table>

#### RAG 智能对话 & AI 笔记

<table>
  <tr>
    <td width="50%">
      <img src="./docs/images/05-chat-rag.png" alt="RAG对话">
      <p align="center"><em>基于文档的智能问答</em></p>
    </td>
    <td width="50%">
      <img src="./docs/images/06-mindmap.png" alt="思维导图">
      <p align="center"><em>AI 自动生成思维导图</em></p>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <img src="./docs/images/07-summary-note.png" alt="总结笔记">
      <p align="center"><em>智能总结重点简报</em></p>
    </td>
  </tr>
</table>

---

### 🔍 Code Archaeologist - 代码分析工具

![代码分析主界面](./docs/images/08-code-main.png)
*项目结构可视化 - 文件树 + 编辑器 + 可视化面板*

<table>
  <tr>
    <td width="33%">
      <p align="center"><em>依赖关系可视化</em></p>
    </td>
    <td width="33%">
      <p align="center"><em>单元测试</em></p>
    </td>
    <td width="33%">
      <p align="center"><em>API 文档生成</em></p>
    </td>
  </tr>
</table>


---

### 🎮 Cyber - 禅意工具箱

![Cyber工具箱](./docs/images/10-cyber-home.png)
*禅意工具箱首页 - 电子木鱼、求签、2048、深呼吸*




---

### 👤 个人中心 - 用户系统




---

### 🛠️ 开发环境

<table>
  <tr>
    <td width="33%">
      <p align="center"><em>Prisma Studio - 数据库管理</em></p>
    </td>
    <td width="33%">
      <p align="center"><em>REST Client - API 测试</em></p>
    </td>
    <td width="33%">
      <p align="center"><em>Cloudflare Workers 部署</em></p>
    </td>
  </tr>
</table>

### 架构图

```
┌─────────────────────────────────────────────────────┐
│                  Nano Studio                        │
│                                                      │
│  ┌──────────────┐                                   │
│  │   Frontend   │  (Vue 3 + TypeScript)             │
│  │              │                                    │
│  └──────┬───────┘                                   │
│         │                                            │
│         │  API 调用                                  │
│         │                                            │
│    ┌────┴────────────────────┐                      │
│    │                          │                      │
│    ▼                          ▼                      │
│  ┌─────────────────┐   ┌──────────────┐            │
│  │ nano-back-      │   │   backend    │            │
│  │ cloudfare       │   │ (Express.js) │            │
│  │ (Workers)       │   │              │            │
│  │ 🌐 生产环境     │   │ 💻 开发环境   │            │
│  └─────────────────┘   └──────────────┘            │
│                                                      │
│  Database: MySQL + Hyperdrive/Direct                │
│  Storage:  MinIO (S3-compatible)                    │
│  Vector:   Qdrant                                   │
│                                                      │
└─────────────────────────────────────────────────────┘
```

## 📦 项目结构

### 主要项目

| 项目 | 技术栈 | 用途 | 文档 |
|------|--------|------|------|
| **[frontend](./frontend)** | Vue 3 + TypeScript + Arco Design | 前端应用 | [📖 README](./frontend/README.md) |
| **[nano-back-cloudfare](./nano-back-cloudfare)** | Hono + Cloudflare Workers + Drizzle | 生产环境后端 | [📖 README](./nano-back-cloudfare/README.md) · [🔌 API](./nano-back-cloudfare/api-tests.http) |
| **[backend](./backend)** | Express.js + Prisma + MySQL | 开发环境 + 私有部署 | [📖 README](./backend/README.md) · [🔌 API](./backend/api-tests.http) |
| **[backend-cloudflare-poc](./backend-cloudflare-poc)** | Hono + Workers (POC) | 技术验证 | [📖 README](./backend-cloudflare-poc/README.md) |

### 项目定位

#### 🌐 生产环境：nano-back-cloudfare
- 部署在 Cloudflare Workers 边缘网络
- 全球低延迟访问
- 无服务器架构
- 使用 Hyperdrive 数据库连接池

#### 💻 开发环境：backend
- 本地开发调试
- 完整的调试支持
- 直连数据库
- 可部署到私有服务器

#### 🎨 前端：frontend
- 现代化 UI 界面
- 响应式设计
- 支持多种部署方式

## ✨ 核心功能

### 📚 知识管理系统

#### 1. Notebook LM（笔记本）
> 智能知识管理和 AI 对话系统

- � **多源知识导入**
  - PDF 文档自动解析和文本提取
  - 网页内容一键抓取（基于 Jina Reader API）
  - 纯文本知识源添加
  - 支持多个知识源同时管理

- 💬 **RAG 智能对话**
  - 基于上传文档的智能问答
  - 向量检索增强生成（Qdrant）
  - 流式输出，实时显示回答
  - 支持多轮对话上下文

- 🧠 **AI 笔记生成**
  - 自动生成思维导图（Mermaid 渲染）
  - 智能总结重点简报
  - Markdown 格式笔记
  - 可视化知识结构

- � **会话管理**
  - 多会话支持
  - 会话重命名和删除
  - 自动保存对话历史
  - 会话列表查看

#### 2. Code Archaeologist（代码考古学家）
> 代码分析和文档生成工具

- 🔍 **代码分析**
  - 项目结构可视化
  - 代码依赖关系分析
  - 函数调用链追踪
  - 代码复杂度评估

- � **文档生成**
  - 自动生成 API 文档
  - 代码注释智能提取
  - 函数说明自动补全
  - Markdown 格式导出

- 🎯 **智能搜索**
  - 跨文件代码搜索
  - 语义化搜索
  - 快速定位功能实现
  - 相似代码片段查找

#### 3. Cyber（网络空间）
> 隐藏的彩蛋功能区

- 🎮 **特殊功能区**
  - 需要特定钥匙访问（`?key=cyber_zen_master`）
  - 实验性功能测试
  - 开发者工具
  - 未来功能预览

### 👤 用户系统

#### 4. 个人中心（Profile Center）

- 📊 **签到系统**
  - 每日签到打卡
  - 连续签到统计
  - 累计签到天数
  - 签到奖励记录

- ⚙️ **系统配置**
  - OpenAI API Key 配置
  - 自定义 API Base URL
  - AI 模型选择（支持多家提供商）
  - 自动获取可用模型列表

- 👥 **用户资料**
  - 个人信息编辑
  - 用户名修改
  - 头像显示
  - 账户安全设置

### 🎨 界面功能

#### 5. 首页（Home）
- 🚀 **快速入口**
  - 功能模块导航
  - 最近使用记录
  - 快捷操作入口
  - 项目介绍

#### 6. 认证系统（Auth）
- 🔐 **用户认证**
  - 注册新账户
  - 登录验证
  - JWT Token 管理
  - 自动跳转保护路由

## 🎨 技术特色

### 前端技术亮点
- ✅ **PDF 解析** - 完整的 PDF 文本提取（PDF.js）
- ✅ **流式输出** - SSE 实时显示 AI 回答
- ✅ **思维导图** - Mermaid 自动渲染
- ✅ **向量检索** - Qdrant 向量数据库集成
- ✅ **多模型支持** - 动态获取 OpenAI 兼容模型
- ✅ **响应式设计** - 全设备适配
- ✅ **热重载开发** - Vite 极速开发体验

### 后端技术亮点
- ✅ **边缘计算** - Cloudflare Workers 全球部署
- ✅ **本地调试** - Express.js 开发环境
- ✅ **数据库连接池** - Hyperdrive 优化（生产）
- ✅ **对象存储** - MinIO S3 兼容存储
- ✅ **网页抓取** - Jina Reader API 集成
- ✅ **双后端架构** - 开发/生产环境分离

## 🚀 快速开始

### 前端开发

```bash
cd frontend
npm install
npm run dev
```

访问：`http://localhost:5173`

详细说明：[frontend/README.md](./frontend/README.md)

### 后端开发（本地调试）

```bash
cd backend
npm install

# 配置数据库
cp .env.example .env
# 编辑 .env 配置数据库连接

# 初始化数据库
npm run db:push

# 启动服务
npm run dev
```

访问：`http://localhost:3000`

详细说明：[backend/README.md](./backend/README.md)

### 生产环境部署（Cloudflare Workers）

```bash
cd nano-back-cloudfare
npm install

# 配置 wrangler.toml
# 设置环境变量和 Hyperdrive

# 部署
npm run deploy
```

详细说明：[nano-back-cloudfare/README.md](./nano-back-cloudfare/README.md)

## 🛠️ 技术栈总览

### 前端
- Vue 3.5+ - 渐进式框架
- TypeScript - 类型安全
- Arco Design - UI 组件库
- Pinia - 状态管理
- PDF.js - PDF 解析
- Mermaid - 思维导图

### 后端（开发）
- Express.js - Web 框架
- Prisma - TypeScript ORM
- MySQL - 关系型数据库
- bcrypt - 密码加密
- JWT - 身份认证

### 后端（生产）
- Hono - 边缘计算框架
- Drizzle ORM - 轻量级 ORM
- Cloudflare Workers - 边缘运行时
- Hyperdrive - 数据库连接池

### 共享服务
- MinIO - 对象存储
- Qdrant - 向量数据库
- MySQL - 数据持久化

## 📚 文档导航

### 新手入门
1. [前端快速开始](./frontend/README.md#🚀-快速开始)
2. [后端环境搭建](./backend/README.md#🚀-快速开始完整流程)
3. [API 接口文档](./nano-back-cloudfare/api-tests.http)

### 开发指南
- [前端开发指南](./frontend/README.md#📝-开发指南)
- [后端 API 开发](./backend/README.md#🔧-开发指南)
- [生产环境部署](./nano-back-cloudfare/README.md#🚀-部署流程)

### 架构文档
- [项目架构说明](./nano-back-cloudfare/README.md#🏗️-架构设计)
- [数据库 Schema](./backend/README.md#📊-数据库schema)
- [技术选型说明](#🤔-为什么选择这个架构)

## 🤔 为什么选择这个架构？

### 双后端策略

#### 为什么需要两个后端？

1. **开发效率** 🔧
   - Cloudflare Workers 本地调试受限
   - Express.js 提供完整的开发体验
   - 支持断点调试、热重载

2. **灵活部署** 🚀
   - 生产：Cloudflare Workers（边缘计算）
   - 私有：Express.js（自建服务器）
   - 满足不同场景需求

3. **技术解耦** 🔄
   - API 接口保持一致
   - 可独立升级优化
   - 降低技术风险

### 技术选型对比

| 特性 | backend (开发) | nano-back-cloudfare (生产) |
|------|----------------|----------------------------|
| 本地调试 | ✅ 完整支持 | ⚠️ 受限 |
| 部署成本 | 💰 需要服务器 | 🆓 按需计费 |
| 全球延迟 | 📍 单点部署 | 🌐 边缘网络 |
| 冷启动 | ✅ 无 | ⚠️ 有（毫秒级） |
| 数据控制 | ✅ 完全自主 | ⚠️ 依赖平台 |

## 🔐 环境配置

### 前端 `.env`

```env
VITE_API_URL=http://localhost:3000/api  # 开发环境
# VITE_API_URL=https://your-worker.workers.dev/api  # 生产环境
```

### 后端（开发）`.env`

```env
PORT=3000
DATABASE_URL=mysql://user:password@localhost:3306/nano_studio
JWT_SECRET=your-secret-key
MINIO_ENDPOINT=localhost
```

详见 [backend/.env.example](./backend/.env.example)

### 后端（生产）`wrangler.toml`

```toml
[vars]
JWT_SECRET = "production-secret"
MINIO_ENDPOINT = "minio.yourdomain.com"
```

详见 [nano-back-cloudfare/wrangler.toml](./nano-back-cloudfare/wrangler.toml)

## 🧪 测试

### 前端

```bash
cd frontend
npm run build  # 验证构建
```

### 后端 API 测试

使用 VS Code 的 REST Client 插件：
- [backend/api-tests.http](./backend/api-tests.http) - 开发环境
- [nano-back-cloudfare/api-tests.http](./nano-back-cloudfare/api-tests.http) - 生产环境

## 📊 项目状态

| 项目 | 状态 | 最后更新 |
|------|------|----------|
| frontend | ✅ 活跃开发 | 2025-12 |
| nano-back-cloudfare | ✅ 生产运行 | 2025-12 |
| backend | ✅ 开发环境 | 2025-12 |
| backend-cloudflare-poc | ⚠️ POC 完成 | 2025-12 |

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 详见各子项目的 LICENSE 文件

## 🔗 相关链接

- 📧 Email: support@example.com
- 💬 Issues: [GitHub Issues](https://github.com/yourusername/nano-studio/issues)
- 📝 Changelog: [CHANGELOG.md](./CHANGELOG.md)

## ⭐ Star History

如果这个项目对你有帮助，请给它一个 ⭐️！

---

**开发者**: JerryLau  
**创建时间**: 2025  
**版本**: 1.0.0  

**技术栈**: Vue 3 · Express.js · Cloudflare Workers · Hono · Prisma · Drizzle ORM · MySQL · MinIO · Qdrant