StudyNote

基于 Vite + React + TypeScript 构建的现代化 AI 笔记应用，提供富文本编辑、灵活的文件夹组织，以及由 Claude API 驱动的 AI 写作辅助能力。

技术栈

层次	选型
构建工具	Vite 5
前端框架	React 19 + TypeScript
编辑器	TipTap v3
样式	Tailwind CSS v4
状态管理	Zustand v5
本地存储	IndexedDB（Dexie.js）
AI 接入	Anthropic SDK（claude-sonnet-4-6）
后端代理	Hono（Node.js，端口 3001）
动画	Framer Motion
拖拽	@dnd-kit

快速开始

# 1. 克隆仓库
git clone https://git.muchen.fan/MikiVL/studynote.git
cd studynote

# 2. 安装依赖
npm install

# 3. 配置 API Key
cp .env.example .env
# 编辑 .env，填入你的 ANTHROPIC_API_KEY 和 ANTHROPIC_BASE_URL

# 4. 启动开发服务器（同时启动前端 + AI 代理）
npm run dev

浏览器访问 http://localhost:5173

功能一览

富文本编辑

• 标题（H1–H4）、段落、引用块、代码块（含语法高亮）
• 粗体、斜体、下划线、删除线、行内代码、高亮
• 有序/无序列表、任务列表（Checkbox）
• 表格、图片插入
• / 斜杠命令菜单快速插入内容块
• 浮动工具栏（选中文字后出现）
• 自动保存（防抖 1s）

笔记组织

• 多级文件夹嵌套
• 笔记标签（多标签、按标签过滤）
• 收藏标记
• 全文搜索（标题 + 正文 + 标签）
• 排序：按修改时间、创建时间、标题
• 拖拽移动笔记到文件夹
• 笔记/文件夹重命名、删除

AI 功能

• AI 续写：点击 ⚡ 按钮，基于当前内容流式续写
• AI 润色：选中文字 → 浮动工具栏 → 润色，预览后替换
• AI 摘要：选中段落或全文生成摘要
• 翻译成英文：选中文字 → 浮动工具栏 → 翻译
• AI 问答：可拖拽/缩放浮窗，针对当前笔记自由提问
• 模型管理：支持添加多个 OpenAI 兼容模型，一键切换

界面体验

• 亮色 / 暗色主题切换
• 专注模式（隐藏侧边栏，全屏写作）
• 弹窗缩放动画（Framer Motion）

键盘快捷键

快捷键	功能
Cmd/Ctrl + N	新建笔记
Cmd/Ctrl + \	切换专注模式
Cmd/Ctrl + Shift + J	打开 AI 助手
Cmd/Ctrl + B	粗体
Cmd/Ctrl + I	斜体
Cmd/Ctrl + Z	撤销
Cmd/Ctrl + Shift + Z	重做
/	命令菜单
Esc	退出专注模式

项目结构

studynote/
├── src/
│   ├── components/
│   │   ├── editor/        # TipTap 编辑器、浮动工具栏、欢迎页
│   │   ├── sidebar/       # 左侧导航栏
│   │   └── ai/            # AI 面板、模型管理弹窗
│   ├── stores/            # Zustand store
│   ├── db/                # Dexie.js IndexedDB 封装
│   ├── lib/               # 工具函数、AI 流式请求
│   └── test/              # Vitest 单元测试
├── server/                # Hono AI 代理服务
├── .env.example           # 环境变量模板
└── vite.config.ts

环境变量

复制 .env.example 为 .env 并填写：

ANTHROPIC_API_KEY=sk-ant-...
ANTHROPIC_BASE_URL=https://api.anthropic.com

.env 和运行时生成的 models.json 已加入 .gitignore，不会被提交。

构建

npm run build      # 生产构建，输出到 dist/
npm run preview    # 本地预览生产构建