🤖 AI 智能笔记 (Web AI Note)

一个微型的、AI 驱动的现代笔记应用，旨在实现双端可用的实时、流畅且对用户友好的交互体验。

✨ 核心亮点

本项目严格遵循现代前端工程标准，不仅实现了基础的 CRUD 笔记管理，更深度集成了流式 AI 交互，让灵感记录与润色无缝衔接。

📝 智能笔记管理

• 多维度组织：支持笔记分类（Category）与多标签（Tags）管理，通过 Zustand 实现高效的状态管理。
• 持久化存储：集成 SQLite + Prisma 后端数据库，替代 LocalStorage，实现更安全可靠的数据存储与 API 交互。
• 实时搜索：支持通过 #标签、分类或全文内容进行毫秒级快速检索。
• 所见即所得：极简主义的编辑器设计，专注于写作体验。

🧠 沉浸式 AI 助手

• 上下文感知：
  • 选区处理：高亮选中部分文本，AI 仅对选区进行润色或重写。
  • 全文优化：未选中时，AI 自动处理整篇笔记内容。
• 流式交互 (Streaming)：采用 Server-Sent Events (SSE) 技术，实现 AI 响应的逐字流式输出，拒绝枯燥等待。
• 非侵入式设计：
  • 悬浮窗交互：AI 响应在可拖拽的悬浮窗 (AIPopover) 中展示，不直接修改原文。
  • 决策权在你：提供“接受”与“丢弃”选项，用户确认后才会应用更改。
  • 智能边界：悬浮窗具备自动边界检测与回弹功能，确保永远不会被拖出屏幕可视区域。

📱 极致的响应式体验

• 移动端优先：完美适配 375px ~ 420px 主流移动设备。
• 自适应布局：
  • 侧边栏自动切换为抽屉 (Drawer) 模式。
  • 工具栏自动精简，隐藏非必要文字。
  • AI 悬浮窗智能调整宽度与位置，防止遮挡。

---

🚀 快速开始

1. 环境准备

确保您的本地环境已安装 Node.js (v16+)。

2. 安装依赖

npm install

3. 启动开发服务器

npm run dev

访问 http://localhost:5173 即可开始体验。

4. Windows 用户快捷方式

如果您在 Windows 环境下，可以直接双击运行根目录下的脚本：

• start_Windows.bat：一键安装依赖并启动应用。

---

🧪 自动化测试与质量保证

本项目集成了 Vitest + React Testing Library，构建了完备的测试体系，确保核心逻辑的健壮性。

✅ 核心测试覆盖

• 流式 AI 引擎 (llmService):
  • 验证 SSE 数据流解析的准确性。
  • 模拟网络中断、API 401/500 错误及非法 JSON 数据的容错处理。
• UI 交互组件 (AIPopover):
  • 边界约束测试：模拟内容高度动态增长，验证悬浮窗自动上移以防止底部溢出的逻辑。
  • 交互逻辑测试：验证“采用”按钮的内容回填功能。

🛠️ 运行测试

我们提供了开箱即用的测试引导脚本：

方式一：一键引导（推荐） Windows 用户直接运行 test_guide.bat，即可看到可视化的测试进度与结果汇总。

方式二：命令行运行

# 运行所有测试
npm run test:all

# 启动测试 UI 界面
npm run test:ui

# 完整性检查（测试 + 构建）
npm run check:all

---

⚙️ 工程标准与技术栈

• 语言规范：全量使用 TypeScript，严格类型定义，拒绝 any。
• 样式隔离：采用 Tailwind CSS 原子化类名，彻底解决全局样式污染问题。
• 全栈架构：
  • 前端：React + Zustand + Axios
  • 后端：Node.js + Express + Prisma + SQLite
• 构建工具：基于 Vite 的极速构建体验。
• 代码质量：集成 ESLint + Prettier 代码规范检查。

📁 目录结构

src/
├── components/      # UI 组件 (编辑器、悬浮窗、工具栏、TagEditor)
├── hooks/           # 自定义 Hooks (useLLM 等)
├── services/        # 核心业务逻辑 (LLM API 调用与流处理)
├── store/           # Zustand 状态管理 (笔记、分类、标签)
├── utils/           # 工具函数 (光标坐标计算等)
└── App.tsx          # 应用入口与路由布局

📝 License

MIT