📚 智能绘本管理系统

一款功能强大的电子绘本制作与阅读平台支持翻书动画、语音合成、视频录制等特色功能

一、项目背景与概述

在数字化教育蓬勃发展的今天，电子绘本已成为儿童启蒙教育和知识传播的重要载体。然而，市面上大多数绘本工具要么功能单一，要么操作复杂，难以满足个性化创作需求。

基于此，我开发了这款「智能绘本管理系统」——一个集绘本创作、管理、播放、录制于一体的综合性平台。无论是家长为孩子制作专属故事书，还是教育工作者制作教学课件，都能轻松上手，快速产出高质量作品。

💡 核心理念：让每个人都能成为绘本创作者！无需专业技术背景，只需简单的图片上传和文字编辑，就能打造出媲美专业出版物的互动式电子绘本。

二、技术架构与选型

本项目采用现代化的前后端分离架构，确保系统的高性能、可扩展性和易维护性。技术栈经过精心选型，兼顾开发效率与用户体验：

🎨 前端技术栈

• React 18 + TypeScript
  
  ：采用最新的React特性（Hooks、并发模式），配合TypeScript的强类型约束，确保代码质量和开发效率
• Vite
  
  ：新一代构建工具，极速的热更新体验，生产环境优化出色
• CSS3 高级动画
  
  ：利用3D transforms、perspective实现逼真的翻书效果
• MediaRecorder API
  
  ：浏览器原生录制能力，无需依赖第三方插件

⚙️ 后端技术栈

• Express.js
  
  ：轻量级Node.js框架，API开发高效便捷
• SQLite + better-sqlite3
  
  ：轻量级数据库，零配置部署，适合中小型应用
• Multer
  
  ：文件上传中间件，支持图片/音频多类型处理
• OmniVoice / Edge-TTS
  
  ：多引擎语音合成方案，确保TTS功能的可靠性

数据存储设计

三、核心功能深度解析

📖 功能一：书架管理

直观的卡片式书架界面，支持创建、预览、删除绘本。每个绘本卡片展示封面图、标题、页数等信息，悬停时有优雅的上浮动画效果。

✨ 特色亮点

• 一键创建新绘本，自动生成唯一分享码
• 实时预览缩略图，快速定位目标绘本
• 响应式布局，完美适配PC和移动设备

功能二：内容编辑

强大的可视化编辑器，支持对每一页进行精细调整：

• 图片管理
  
  ：拖拽或点击上传，支持JPG/PNG/GIF/WebP格式
• 配文编辑
  
  ：为每页添加文字描述，支持多行文本
• 时长控制
  
  ：自定义每页显示时长（毫秒级精度）
• 排序调整
  
  ：上下移动页面顺序，灵活组织内容

功能三：音频系统（三大亮点）

本系统的音频功能堪称业界良心，提供三种音频来源，满足不同场景需求：

🎙️ 1. TTS语音合成（AI自动配音）

内置三级备选方案，确保在任何环境下都能生成语音：

1. OmniVoice
   
   ：本地GPU推理，高质量多音色（需显卡支持）
2. Edge-TTS
   
   ：微软免费TTS服务，无需GPU，质量优秀
3. 占位音频
   
   ：前两者都不可用时的保底方案（自己录音或者使用AI生成配音之后导入）

✅ 使用建议：推荐优先使用Edge-TTS方案，速度快、音质好、完全免费！

 2. 音频上传（自定义配音）

支持两种粒度的音频上传：

• 分页音频
  
  ：为每一页单独上传音频文件（MP3/WAV/OGG/M4A），翻到指定页之后播放对应页面的音频内容，画面与音频同步
• 整体音频
  
  ：为整个绘本上传一个完整的音频文件（优先级最高），整体播放完整故事，需要自己手动翻页配合

🎵 3. 播放优先级机制

📱 功能四：沉浸式阅读体验

🔄 逼真的翻书动画

采用CSS 3D Transform技术，模拟真实物理翻书效果：

• 向后翻页
  
  ：以左边缘为轴，右侧抬起旋转至90°消失
• 向前翻页
  
  ：以右边缘为轴，左侧抬起旋转至90°消失
• 配合阴影动态变化和透明度渐变，视觉冲击力强

📝 智能配文盒子

创新的半透明悬浮配文系统，完美融合于画面之中：

设计理念

将配文以”半透明盒子”形式覆盖在图片底部，既不遮挡主要内容，又能清晰呈现文字。类似电影字幕的效果，但更加精致美观。

• 毛玻璃效果
  
  ：backdrop-filter: blur(8px) 背景虚化
• 渐变透明度
  
  ：从底部72%不透明到顶部完全透明
• 自适应高度
  
  ：默认显示5行，超出部分可展开查看
• 联动翻页
  
  ：随页面一起参与3D翻转动画
• 关于播放
   ：有自动播放和手动播放两种模式，自动播放会根据设置的播放时间进行一页一页的播放，播放时间可以手动设置，也可以根据音频时长自动生成，保证播放完音频之后再翻页，翻到哪一页就读哪一页的内容。

四、开发历程回顾

本项目从零到一的完整开发过程，经历了多次迭代优化，逐步完善了各项功能，都是通过与AI对话实现：

📅 第一阶段：基础框架搭建

• 搭建 React + Express 全栈项目结构
• 实现 SQLite 数据库设计与迁移策略
• 完成基础的 CRUD 接口开发
• 实现图片上传与静态资源服务

📅 第二阶段：核心功能开发

• 开发书架展示与管理界面
• 实现页面编辑器（图片、配文、排序）
• 集成 TTS 语音合成功能（OmniVoice + Edge-TTS）
• 添加分页音频上传能力

📅 第三阶段：体验优化

• 重新设计翻书动画（从简单fade改为3D边缘轴旋转）
• 实现半透明配文盒子组件
• 添加整体音频上传功能
• 优化播放逻辑（整体音频优先机制）