一个现代化的智能笔记应用，集成了AI辅助功能，支持Markdown编辑和实时预览。采用四栏布局设计，提供文件夹管理、智能编辑、AI对话等全方位的笔记体验。

• 层级文件夹：支持多级文件夹嵌套组织
• 拖拽操作：直观的拖拽移动笔记到文件夹
• 文件夹统计：实时显示每个文件夹的笔记数量
• 快速导航：一键切换全部笔记和未归类笔记
• 颜色标识：自定义文件夹颜色便于区分

• Monaco编辑器：专业级代码编辑体验
• 分栏预览模式：左侧编辑，右侧实时预览
• 纯编辑模式：专注写作的全屏编辑体验
• 语法高亮：完整的Markdown语法支持
• 自动保存：实时保存，永不丢失内容
• 智能提示：AI驱动的编辑建议和补全

• 智能补全：Tab键触发AI内容补全
• 智能操作：选中文本后的AI辅助操作
  • 翻译、总结、扩写、润色
  • 代码解释、优化建议
  • 自定义AI指令
• 标题生成：基于内容自动生成合适的标题
• AI对话：与笔记内容进行智能对话
• 多模型支持：支持DeepSeek、火山引擎、SiliconFlow等多个AI提供商

• 四栏布局：文件夹面板 + 笔记列表 + 编辑器 + AI面板
• 可调节布局：支持面板宽度调整和折叠
• 响应式设计：适配不同屏幕尺寸
• 暗色模式：护眼的深色主题
• 可调字体：自定义编辑器字体大小
• 现代化UI：基于Tailwind CSS的精美界面

• 本地存储：基于IndexedDB的离线数据存储
• 数据导出：支持Markdown、JSON、ZIP格式导出
• Flomo导出：一键导出到Flomo笔记平台
• 备份恢复：完整的数据备份和恢复功能
• 笔记搜索：快速查找笔记内容
• 布局状态：自动保存和恢复界面布局设置

• 多提供商支持：支持OpenAI、DeepSeek、豆包等多个AI服务
• 场景化配置：为不同使用场景配置专用模型
• 模型管理：灵活的AI模型增删改查
• API密钥管理：安全的密钥存储和管理

• React 18 - 现代化的用户界面框架
• TypeScript - 类型安全的JavaScript超集
• Vite - 快速的构建工具和开发服务器
• Tailwind CSS - 实用优先的CSS框架
• Zustand - 轻量级状态管理库

• @monaco-editor/react - 专业代码编辑器
• marked - Markdown解析和渲染
• react-markdown - React Markdown渲染组件
• lucide-react - 现代化图标库
• jszip - ZIP文件生成和处理
• sonner - 优雅的通知提示组件
• dexie - IndexedDB数据库操作库
• React Router DOM - 客户端路由

• Dexie - 基于IndexedDB的现代数据库操作
• localStorage - 配置和设置存储
• 实时同步 - 多组件间的数据状态同步

• Node.js 20+
• pnpm (推荐) 或 npm

# 使用 pnpm (推荐)
pnpm install

# 或使用 npm
npm install

# 使用 pnpm
pnpm run dev

# 或使用 npm
npm run dev

# 使用 pnpm
pnpm run build

# 或使用 npm
npm run build

# 使用 pnpm
pnpm run preview

# 或使用 npm
npm run preview

1. 创建文件夹：在文件夹面板点击"新建文件夹"按钮
2. 创建笔记：点击笔记列表面板的"新建笔记"按钮
3. 编辑笔记：在Monaco编辑器中输入Markdown内容
4. 预览模式：点击预览按钮切换到分栏预览模式
5. 保存笔记：内容会自动保存，也可使用Ctrl+S手动保存
6. 移动笔记：拖拽笔记到目标文件夹进行分类

1. 智能补全：在编辑时按Tab键触发AI补全
2. 智能操作：选中文本后会出现AI操作面板
3. 生成标题：点击标题栏的标题生成按钮
4. AI对话：使用右侧AI面板与笔记内容对话
5. 导出到Flomo：点击导出按钮一键发送到Flomo平台

1. 打开设置面板（右上角齿轮图标）
2. 在"AI配置"标签页中配置API密钥和模型
3. 在"提供商"标签页中管理AI服务提供商
4. 在"场景配置"标签页中为不同场景选择模型

应用支持多个AI服务提供商：

• DeepSeek：DeepSeek Chat、DeepSeek Coder系列模型
• 火山引擎：豆包系列模型、Kimi、DeepSeek V3等
• SiliconFlow：GLM-4.5、Qwen3系列、Kimi K2等
• 自定义提供商：支持添加其他兼容OpenAI API的服务

可以为不同使用场景配置专用模型：

• 智能补全：用于文本补全的模型
• AI操作：用于文本处理的模型
• 标题生成：用于生成标题的模型
• 内容对话：用于对话交互的模型

• 自动备份：应用会自动保存所有数据到本地
• 手动导出：可导出为JSON或ZIP格式
• 数据恢复：支持从备份文件恢复数据

项目已配置Vercel部署，推送到GitHub后会自动部署。

1. 构建项目：pnpm run build
2. 将dist目录部署到任何静态文件服务器

src/
├── components/          # React组件
│   ├── MarkdownEditor.tsx    # Monaco Markdown编辑器
│   ├── NoteList.tsx         # 笔记列表
│   ├── FolderPanel.tsx      # 文件夹管理面板
│   ├── AIChatPanel.tsx      # AI对话面板
│   ├── SettingsPanel.tsx    # 设置面板
│   ├── SmartActionPanel.tsx # 智能操作面板
│   ├── AboutPanel.tsx       # 关于面板
│   ├── ResizeHandle.tsx     # 布局调整组件
│   └── EnhancedMarkdownRenderer.tsx # 增强Markdown渲染
├── hooks/              # React Hooks
│   ├── useFolders.ts       # 文件夹管理Hook
│   ├── useLayoutState.ts   # 布局状态Hook
│   └── useTheme.ts         # 主题管理Hook
├── store/              # 状态管理
│   └── index.ts            # Zustand store
├── lib/                # 核心库
│   ├── ai-service.ts       # AI服务封装
│   ├── database.ts         # 数据库操作
│   └── utils.ts            # 工具函数
├── types/              # TypeScript类型定义
│   └── index.ts
├── utils/              # 工具函数
│   └── export.ts           # 导出功能
└── pages/              # 页面组件
    └── Home.tsx            # 主页面

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

1. Fork 项目
2. 创建功能分支：git checkout -b feature/new-feature
3. 提交更改：git commit -am 'Add new feature'
4. 推送分支：git push origin feature/new-feature
5. 提交Pull Request

• 使用TypeScript编写代码
• 遵循ESLint规则
• 组件大小控制在300行以内
• 添加适当的注释和类型定义

MIT License - 详见 LICENSE 文件

• 在线演示
• 问题反馈
• 功能建议

• ✨ 新增文件夹管理功能，支持多级嵌套
• ✨ 升级为四栏布局，增加文件夹面板
• ✨ 集成Monaco编辑器，提供专业编辑体验
• ✨ 新增导出到Flomo功能
• ✨ 优化AI服务配置，支持更多提供商
• ✨ 改进布局状态管理，支持面板调整
• 🐛 修复数据库schema兼容性问题
• 🐛 优化拖拽操作的用户体验

智能笔记本 - 让AI成为你的写作伙伴 ✨