最近完成了一个 AI 多模态应用项目，包含聊天、笔记、图像生成等功能。技术栈，前端采用 Vue3.5 ，后端采用 Node.js 的 Express 框架开发过程中，我发现很多功能模块在其他项目中也会用到。于是我开始思考：能否将这些功能封装成可复用的 Skills，让未来的项目开发更高效？经过实践和总结，我整理出了一套完整的模块化封装方案。今天分享给大家，希望能帮助到有类似需求的开发者。
❓ 为什么需要封装 Skills？
在开发 AI 应用时，我发现很多功能需要重新实现：用户认证、文件上传、流式响应处理... 这些功能在第一个项目中已经做过了，但代码散落在各处，难以复用。⚠️ 痛点：
- 重复造轮子，开发效率低
- 代码质量参差不齐，维护成本高
- 前后端接口不统一，协作困难
- 最佳实践难以沉淀和复用
✅ 解决方案：将功能按业务模块封装成 Skills，包含完整的前后端实现，开箱即用。
💡 我们的封装思路
📜 核心原则
- 业务完整性：按业务功能模块拆分，包含完整的前后端实现
- 技术独立性：功能可独立使用，不依赖特定业务逻辑
- 接口一致性：前后端接口规范保持一致，便于协作
- 配置驱动：通过配置对象控制行为，而非硬编码
🗂️ 模块划分策略
我们将项目拆分为 10 个核心模块，每个模块都是完整的功能单元，可以独立使用，也可以组合使用。
🔍 核心模块详解
🔐 Module 1: 用户认证与授权 - 每个应用的基础
📖 场景
几乎每个 Web 应用都需要用户系统，但每次都要从零开始实现认证逻辑。
📝 我们的方案
⚙️ 后端实现：
- JWT 认证系统：使用 JWT 生成 Token，存储在 HttpOnly Cookie 中，防止 XSS 攻击。支持 Token 刷新机制，用户无需频繁重新登录。
- 密码加密：使用 bcryptjs 加密密码，支持可配置的盐值轮数，确保密码安全。
- 智能提取：优先从 Cookie 获取 Token，其次从 Authorization Header，兼容多种场景。
- 统一响应：扩展 Express Response 对象，添加() 方法，统一响应格式为 {status, message, data}。
🖥️ 前端实现：
- 状态管理：使用 Pinia 管理用户信息和认证状态，登录后自动更新全局状态。
- 请求拦截：在 axios 请求拦截器中自动添加 Token，检测到 401 错误时自动刷新 Token。
- 路由守卫：未登录用户自动跳转到登录页，登录后自动跳转到原访问页面。
- 记住登录：支持 "记住我" 功能，延长登录有效期，提升用户体验。
📈 实际效果
新项目集成认证模块只需 1 天，而不是 1 周统一的接口规范，前后端协作更顺畅安全机制完善，经过生产环境验证
💬 Module 2: AI 对话与流式响应 - 让 AI 对话更流畅
📖 场景
AI 对话应用需要实时显示 AI 回复，传统的请求 - 响应模式体验差，用户需要等待完整回复。
📝 我们的方案
⚙️ 后端实现：
- SSE 流式响应：使用 Server-Sent Events 技术，实时推送 AI 回复给前端。配置正确的响应头，禁用 Nginx 缓冲，确保数据实时传输。
- 缓冲区机制：解决流式数据分割导致的 JSON 解析问题，确保数据完整性。
- 多模型支持：支持快速模型和深度思考模型，根据场景动态切换。深度思考模型支持思维链展示，让用户了解 AI 的思考过程。
- 错误处理：网络错误、解析错误等情况通过 SSE 推送错误信息，前端可以实时处理。
🖥️ 前端实现：
- 流式数据处理：使用 fetch API 建立 SSE 连接，解析流式数据，实现打字机效果。
- 多轮对话：自动构建包含完整对话历史的 messages 数组，最多保留最近 20 条消息，平衡上下文长度和性能。
- Markdown 渲染：使用 MarkdownIt 解析 Markdown 语法，Prism.js 高亮代码块，支持一键复制。
- 虚拟滚动：使用虚拟滚动技术，仅渲染可视区域的消息，支持动态高度和分页加载。
📈 实际效果
AI 回复实时显示，用户体验大幅提升支持数万条消息的流畅滚动，性能优异代码高亮、表格优化等细节完善，专业感强
📤 Module 3: 文件上传与管理 - 安全可靠的文件处理
📖 场景
用户上传头像、图片、文档是常见需求，但文件验证、存储管理、安全防护等细节容易出错。
📝 我们的方案
⚙️ 后端实现：
- 文件验证：使用 Multer 中间件，配置文件类型白名单、大小限制，防止恶意文件上传。
- 唯一文件名：时间戳 + 随机数 + 原始扩展名，确保文件名唯一，避免覆盖。
- 旧文件清理：上传新文件时自动删除旧文件，避免存储浪费。
- 路径管理：统一管理上传文件路径，按类型分类存储（avatars、images、documents），便于后续迁移。
🖥️ 前端实现：
- 文件预览：上传前预览图片，支持裁剪和旋转，提升用户体验。
- 上传进度：显示上传进度条，支持取消功能，让用户了解上传状态。
- 多文件上传：支持批量上传，显示每个文件的上传状态，便于管理。
- 图片懒加载：使用 Intersection Observer 实现图片懒加载，优化首屏加载性能。
📈 实际效果
文件上传安全可靠，经过生产环境验证用户体验友好，支持预览、进度显示等功能存储管理规范，便于后续维护和迁移
📋 Module 4: 会话管理系统 - 多场景会话管理
📖 场景
聊天、笔记、图像生成等不同场景都需要会话管理，但每个场景的实现方式不同，难以统一。
📝 我们的方案
⚙️ 后端实现：
- 多类型支持：使用 ENUM 类型定义会话类型（chat、note、image），统一管理不同场景的会话。
- 级联删除：删除会话时自动删除关联的消息、笔记、图片等数据，保证数据一致性。
- 分页查询：支持按类型筛选、分页查询，按时间倒序排列，提升查询效率。
- 会话统计：统计会话数量、消息数量等，支持数据分析。
🖥️ 前端实现：
- 多模块支持：支持聊天、笔记、绘画三个模块，监听路由自动切换。
- 独立缓存：每个模块的会话列表独立缓存，互不干扰，提升切换速度。
- 智能选中：切换模块时优先使用缓存的选中 ID，缓存为空时选中第一个，提升用户体验。
- 状态持久化：当前会话 ID 持久化到 localStorage，页面刷新后恢复，保持用户操作连续性。
📈 实际效果
统一管理不同场景的会话，代码更简洁用户体验流畅，切换模块无卡顿状态管理完善，页面刷新后状态恢复
⭐ Module 5: 收藏系统 - 让用户轻松管理内容
📖 场景
用户需要收藏重要的聊天记录、图片等内容，但收藏功能涉及批量操作、分组展示等复杂逻辑。
📝 我们的方案
⚙️ 后端实现：
- 批量收藏：支持批量标记收藏，生成统一的批次 ID（UUID），便于后续管理和统计。
- 批次管理：使用批次 ID 关联同一批收藏的内容，支持按批次查询和删除。
- 统一接口：提供统一的收藏接口，支持不同类型的内容（消息、图片等）。
- 收藏统计：统计收藏数量、批次数量等，支持热门内容推荐。
🖥️ 前端实现：
- 批量选择：点击收藏按钮进入选择模式，显示复选框，支持多选。
- 分组展示：按收藏批次分组，使用折叠面板展示，便于用户管理。
- 搜索过滤：支持按内容搜索，实时过滤展示，提升查找效率。
- 状态同步：收藏状态变更时同步更新 UI 和全局状态，保证数据一致性。
📈 实际效果
收藏功能完善，支持批量操作和分组展示用户体验友好，查找和管理收藏内容便捷数据统计完善，支持热门内容推荐
✍️ Module 6: 提示词管理系统 - AI 应用的效率工具
📖 场景
AI 应用需要频繁使用提示词，但每次都要手动输入，效率低。用户希望有提示词库，快速复用常用提示词。
📝 我们的方案
⚙️ 后端实现：
- 分类管理：支持创建、删除、查询提示词分类，便于用户组织提示词。
- 批量操作：支持批量添加、更新、删除提示词，提升管理效率。
- 使用统计：记录提示词使用次数、最后使用时间，支持热门推荐。
- 搜索功能：支持按标题和内容搜索提示词，支持模糊匹配。
🖥️ 前端实现：
- 提示词面板：监听输入框输入，检测斜杠字符（/）触发面板，展示提示词列表。
- 实时搜索：支持按标题和内容搜索，实时过滤，提升查找效率。
- 键盘导航：支持上下箭头键导航，回车键选择，提升操作效率。
- 快速插入：选择提示词后自动插入到输入框，删除斜杠，无缝体验。
📈 实际效果
提示词使用效率大幅提升，用户满意度高支持分类管理和搜索，便于组织大量提示词使用统计完善，支持热门推荐，提升用户体验
📓 Module 7: 笔记管理系统 - 完整的写作工具
📖 场景
用户需要写笔记，但传统的文本编辑器功能单一，缺乏 AI 辅助、语音输入等现代功能。
📝 我们的方案
⚙️ 后端实现：
- 笔记管理：支持创建、查询、更新、删除笔记，关联笔记会话，支持软删除。
- AI 辅助写作：支持润色、摘要、翻译、续写四种操作类型，使用 SSE 流式返回 AI 生成内容。
- 语音识别：使用 WebSocket 连接语音识别服务，支持实时语音转文字，插入到笔记中。
🖥️ 前端实现：
- 富文本编辑器：集成 WangEditor，支持丰富的文本编辑功能，自定义菜单扩展 AI 功能。
- AI 写作助手：支持快捷键触发（Ctrl+Alt），根据选中文本、光标位置准备 AI 输入，流式插入生成内容。
- 语音识别：使用 AudioWorklet 处理音频，实时转换为 PCM 格式，通过 WebSocket 传输，识别结果插入编辑器。
- 自动保存：监听编辑器内容变化，2 秒后自动保存，避免数据丢失。
📈 实际效果
笔记功能完善，支持 AI 辅助和语音输入用户体验流畅，自动保存、流式插入等功能完善编辑器功能丰富，满足专业写作需求
🎨 Module 8: AI 图像生成 - 让创作更简单
📖 场景
用户需要生成 AI 图片，但参数配置复杂，生成的图片需要管理和分享。
📝 我们的方案
⚙️ 后端实现：
- 图像生成：集成豆包 Seedream 4.0 图像生成 API，支持多种尺寸和风格参数。
- 图片管理：下载生成的图片到本地，记录图像信息到数据库，关联会话和用户。
- 收藏功能：支持收藏和取消收藏图像，支持按用户查询收藏的图像。
🖥️ 前端实现：
- 对话式交互：使用对话界面展示用户输入和 AI 回复，生成过程可视化。
- 参数配置：支持选择图片尺寸（1:1、3:4、16:9、4:3）和风格（写实、科幻、现代、幻想），配置简单直观。
- 图片展示：展示生成的图片，支持放大查看，图片懒加载优化性能。
- 分享功能：生成分享卡片，包含图片、提示词、风格、时间等信息，支持复制到剪贴板。
📈 实际效果
图像生成流程顺畅，用户体验友好参数配置简单，支持多种尺寸和风格图片管理和分享功能完善，满足用户需求
🔊 Module 9: 语音功能 - 让交互更自然
📖 场景
用户需要语音输入和语音朗读功能，但音频处理复杂，需要处理格式转换、流式传输等问题。
📝 我们的方案
⚙️ 后端实现：
- 语音合成（TTS）：使用 WebSocket 连接火山引擎 TTS，实时音频数据流式写入响应，不缓存，O (1) 内存。
- 语音识别（ASR）：使用适配器模式，作为客户端和服务端的桥梁，处理协议转换，支持实时语音识别。
🖥️ 前端实现：
- 语音朗读：Audio src 指向流式接口，浏览器自动流式加载，支持播放 / 暂停 / 恢复。使用文本 Hash 作为缓存 key，缓存最近 10 个音频，同样内容秒级播放。
- 语音识别：使用 AudioWorklet 处理音频，实时转换为 PCM 格式，通过 WebSocket 传输，识别结果实时显示，插入到输入框或编辑器。
📈 实际效果
语音功能完善，支持实时识别和流式播放智能缓存机制，提升用户体验音频处理高效，性能优异
📤 Module 10: 内容导出与分享 - 让内容传播更便捷
📖 场景
用户需要导出聊天记录、笔记等内容，但导出功能复杂，需要支持多种格式和水印保护。
📝 我们的方案
⚙️ 后端实现：
- 内容导出：支持导出为文本、Markdown、HTML 等格式，支持批量导出。
- 分享链接：生成分享链接，支持设置有效期和访问权限。
🖥️ 前端实现：
- 批量导出：支持多选聊天记录，预览后导出为图片或文档。
- 防篡改水印：使用 Canvas 生成水印，MutationObserver 监听 DOM 变化，检测到删除或修改时 100ms 内自动恢复。
- 分享卡片：生成分享卡片，使用 html2canvas 转换为图片，支持复制到剪贴板。
📈 实际效果
导出功能完善，支持多种格式水印保护机制完善，防止内容被删除分享功能便捷，支持一键复制
