# note_craft

**Repository Path**: torres_c/note_craft

## Basic Information

- **Project Name**: note_craft
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-25
- **Last Updated**: 2025-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📚 NoteCraft v1.0

一个功能强大的 Jupyter 笔记本编辑器，用于将笔记本文件转换为精美的、可编辑的 PDF 文档。专为教师整理课程笔记而设计。

## ✨ 核心功能

### 📂 文件管理
- ✅ 上传 .ipynb 文件并自动解析所有内容
- ✅ 保存为 .ipynb 文件（保留原始格式和数据）
- ✅ 导出为精美的 PDF 文档
- ✅ 无需上传文件，直接创建新文档

### ✏️ 内容编辑
- ✅ 编辑 Markdown 单元格（支持完整 Markdown 语法）
- ✅ 编辑 Python 代码单元格
- ✅ 自动清理多余空行
- ✅ 拖拽调整内容顺序
- ✅ 在文本框/代码框内自由选择文本（不会误触发拖拽）
- ✅ 编辑模式下禁用块拖拽，防止误操作

### ➕ 内容插入
- ✅ 在任意位置插入 Markdown 文本
- ✅ 在任意位置插入 Python 代码块
- ✅ 在任意位置插入图片（支持调整大小）
- ✅ 在任意位置插入双栏布局（支持文本/代码模式）
- ✅ 空白页面也能直接添加内容

### 🎨 精美排版
- ✅ Python 代码语法高亮（Prism.js）
- ✅ 渐变标题样式（H1-H6）
- ✅ 精美的列表样式（有序/无序）
- ✅ 行内代码高亮
- ✅ 代码块和输出结果分离显示
- ✅ 响应式双栏布局

## 🚀 快速开始

### 1. 安装依赖
```bash
npm install
```

### 2. 启动服务器
```bash
npm start
```

### 3. 打开浏览器
访问 http://localhost:3000

## 📖 使用指南

### 基础操作

1. **开始编辑**
   - **方式一**：点击"📂 上传 .ipynb 文件"按钮上传现有笔记本
   - **方式二**：直接在空白页面点击"📝 文本"、"💻 代码"等按钮创建新内容
   - 内容会自动解析并显示

2. **编辑内容**
   - 悬停在内容块上会显示"✏️ 编辑"按钮
   - 点击编辑按钮进入编辑模式
   - 在文本框/代码框内可以自由拖拽鼠标选择文本
   - 修改完成后点击"💾 保存"
   - 或点击"❌ 取消"放弃更改

3. **插入内容**
   - 悬停在内容块之间会显示插入区域
   - 选择要插入的内容类型：
     - � 文本（（Markdown）
     - � 代码（Python）
     - �️ 图片局
     - 📊 双栏布局

4. **调整顺序**
   - 直接拖拽内容块到目标位置
   - 松开鼠标完成移动
   - 拖拽结束后插入区域会自动更新

5. **删除内容**
   - 悬停在内容块上会显示"删除"按钮
   - 点击即可删除该内容块

### 高级功能

#### 双栏布局
- 点击"📊 双栏"插入双栏布局
- 每个栏可以独立编辑标题
- 点击"💻"按钮切换为代码模式
- 点击"📝"按钮切换回文本模式
- 适合代码对比、概念对比等场景

#### 图片管理
- 插入图片后可以拖动右下角调整大小
- 图片会以 base64 格式嵌入，确保 PDF 包含所有内容

#### 保存和导出
- **保存为 .ipynb**：保留所有原始数据和格式，可重新导入继续编辑
- **下载为 PDF**：使用浏览器打印功能，生成精美的 PDF 文档

### PDF 导出技巧

1. 点击"📄 下载为 PDF"按钮
2. 在打印预览中：
   - 点击"更多设置"
   - 取消勾选"页眉和页脚"（去除日期、标题等）
   - 选择"另存为 PDF"
3. 点击"保存"

## 🎨 支持的 Markdown 语法

### 标题
```markdown
# H1 标题
## H2 标题
### H3 标题
#### H4 标题
##### H5 标题
###### H6 标题
```

### 文本格式
```markdown
**加粗文字**
*斜体文字*
`行内代码`
```

### 列表
```markdown
- 无序列表项 1
- 无序列表项 2

1. 有序列表项 1
2. 有序列表项 2
```

### 代码块
````markdown
```python
print("Hello, World!")
```
````

## 🛠️ 技术栈

- **前端**：原生 JavaScript（无框架依赖）
- **样式**：CSS3（渐变、动画、响应式）
- **代码高亮**：Prism.js
- **拖拽**：HTML5 Drag and Drop API
- **后端**：Express.js（本地服务器）

## 📁 项目结构

```
├── index.html          # 主页面
├── style.css           # 样式文件
├── app.js              # 核心逻辑
├── server.js           # Express 服务器
├── package.json        # 依赖配置
├── README.md           # 项目文档
└── .gitignore          # Git 忽略文件
```

## 💡 使用场景

- 📚 教师整理课程笔记给学生复习
- 📝 将 Jupyter 笔记本转换为演示文档
- 🎓 制作技术教程和学习资料
- 📊 创建数据分析报告
- 💼 准备技术分享材料

## ⚠️ 注意事项

- 支持 Jupyter Notebook 的 code、markdown 和 raw 单元格
- 建议使用现代浏览器（Chrome、Firefox、Edge）
- 首次编辑会自动清理多余空行
- 代码块和输出结果会自动保留
- PDF 导出时所有交互按钮会自动隐藏

## 🔮 产品路线图

### v1.1 计划（优先级 P0-P1）

#### 用户体验优化
- [ ] **操作反馈系统** - Toast 提示（保存成功、删除成功等）
- [ ] **删除确认对话框** - 防止误删除
- [ ] **自动保存功能** - 每 30 秒自动保存到 localStorage
- [ ] **撤销/重做功能** - Ctrl+Z / Ctrl+Y 支持
- [ ] **首次使用引导** - 欢迎页面和功能介绍
- [ ] **编辑状态指示** - 明确显示当前编辑状态

#### 功能增强
- [ ] **键盘快捷键** - Ctrl+S 保存、Ctrl+P 导出等
- [ ] **大纲导航** - 左侧边栏显示文档结构
- [ ] **搜索功能** - Ctrl+F 快速定位内容
- [ ] **工具栏优化** - 显示文档名、最后保存时间

### v1.2 计划（优先级 P2）

#### 视觉和交互
- [ ] **暗色模式** - 支持主题切换
- [ ] **拖拽优化** - 显示插入位置指示线
- [ ] **内容块图标** - 显示类型标识（📝💻🖼️）
- [ ] **响应式设计** - 适配平板和手机

#### 高级功能
- [ ] **批量操作** - 多选、批量删除/移动
- [ ] **模板系统** - 课程笔记、技术文档模板
- [ ] **导出格式扩展** - HTML、Markdown、Word
- [ ] **更多 Markdown 语法** - 表格、引用、任务列表

### v2.0 愿景（长期规划）

#### 性能优化
- [ ] **虚拟滚动** - 优化大文件性能
- [ ] **懒加载** - 图片和代码高亮异步处理
- [ ] **PDF 分页导出** - 避免大文档卡顿

#### 协作功能
- [ ] **分享链接** - 生成只读分享链接
- [ ] **评论批注** - 支持内容评论
- [ ] **版本历史** - 查看和恢复历史版本

#### 高级特性
- [ ] **代码执行** - 浏览器中运行 Python 代码
- [ ] **自定义主题** - PDF 样式自定义
- [ ] **批量处理** - 同时处理多个 .ipynb 文件
- [ ] **插件系统** - 支持第三方扩展

---

## 📊 优化建议详情

### 用户体验（UX）改进

**操作反馈不足**
- 现状：操作后没有明确提示
- 影响：用户不确定操作是否成功
- 方案：添加 Toast 通知系统

**编辑状态不明显**
- 现状：编辑和查看模式切换不直观
- 影响：用户可能误操作
- 方案：添加状态栏和视觉提示

**缺少撤销功能**
- 现状：误操作无法恢复
- 影响：用户操作时心理压力大
- 方案：实现操作历史栈

### 功能增强建议

**搜索和定位**
- 需求：长文档中快速找到内容
- 方案：Ctrl+F 搜索 + 大纲导航

**批量操作**
- 需求：提高整理效率
- 方案：支持多选和批量操作

**自动保存**
- 需求：防止工作丢失
- 方案：定时保存 + 页面关闭提示

### 性能优化方向

**大文件处理**
- 问题：100+ 单元格时可能卡顿
- 方案：虚拟滚动 + 懒加载

**PDF 导出优化**
- 问题：大文档导出时浏览器卡死
- 方案：分页导出 + 进度提示

---

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

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

### 优先级说明
- **P0**：必须做 - 影响核心体验
- **P1**：应该做 - 显著提升体验
- **P2**：可以做 - 锦上添花
- **P3**：未来做 - 长期规划

## 📄 许可证

MIT License

## 🙏 致谢

- [Prism.js](https://prismjs.com/) - 代码语法高亮
- [Express.js](https://expressjs.com/) - Web 服务器框架

---

## 📝 更新日志

### v1.0.1 (2025-11-25)
- ✨ 新增：支持直接创建新文档，无需先上传 .ipynb 文件
- 🐛 修复：拖拽内容块后插入区域重复的问题
- 🐛 修复：在文本框/代码框内拖拽选择文本时误触发块拖拽的问题
- 🎨 优化：编辑模式下禁用块拖拽，防止误操作

### v1.0 (2025-11-24)
- 🎉 首次发布
- 核心功能：上传、编辑、插入、拖拽、导出

---

**当前版本**：v1.0.1  
**更新日期**：2025-11-25  
**作者**：为教育而生 ❤️