灯月书语～
“灯月书语”是一款以诗句“吹灭读书灯，一身都是月”为核心意象的文档知识库应用。用户可上传PDF/Word文档并按主题分类，通过RAG技术实现智能问答，同时支持电子书在线预览，启动时将通过动画还原诗句意境，营造沉浸式进入体验。
- 核心效果：加载应用时自动播放“吹灭读书灯，一身都是月”主题动画，文字分阶段显示。
- 动画细节：
- 初始画面：一盏暖黄色“读书灯”（可交互或自动）亮着，背景为深色调模拟夜晚。
- 触发阶段：灯芯缓缓熄灭，光晕逐渐减弱。
- 过渡阶段：熄灭瞬间，背景渐变为“月光”质感（淡蓝/银白色调），星星点点的“月光”元素（如光斑、星点）扩散。
- 文字显示：诗句“吹灭读书灯，一身都是月”分两句依次浮现（前句随灯灭出现，后句随月光扩散出现），字体选用书法或雅致 serif 风格。
- 收尾交互：动画结束后，点击屏幕或等待3秒自动进入应用主页，动画可跳过（右下角设“跳过”按钮）。
- 适配要求：动画适配不同屏幕尺寸，加载失败时显示静态主题图+文字兜底。
- 支持PDF、Word文档拖拽/点击上传，显示上传进度与格式校验（如提示“不支持的文件类型”）。
- 主题分类支持自定义（如用户可新增“职场心理”“古典文学”等子分类），分类图标与“灯月”主题呼应（如心理类用“暖灯”图标，文学类用“月光”图标）。
- 文档列表显示缩略图、标题、作者、上传时间、主题标签，支持按“最近上传”“主题”筛选。
- 问答时显示“正在检索[XX主题]知识库”的加载提示，回答内容标注引用文档的章节/页码，点击可跳转至预览页对应位置。
- 新增“问答收藏”功能，用户可保存高频问题与回答，支持按主题归类。
- 预览页顶部显示“月光进度条”（替代传统进度条，随页面滚动，月光覆盖范围增加），支持目录导航、字号调整、夜间/日间模式切换（切换时同步改变“灯”“月”元素样式）。
light-moon-knowledge/
├── public/ # 静态资源
│ ├── index.html
│ ├── favicon.ico
│ ├── assets/ # 图片、字体等资源
│ │ ├── animation/ # 启动动画资源（新增）
│ │ │ ├── lamp-sprite.png # 灯动画序列图
│ │ │ ├── moonlight-bg.mp4 # 月光背景视频（可选）
│ │ │ └── calligraphy-font.ttf # 诗句字体
├── src/
│ ├── api/ # API调用相关（不变）
│ ├── components/ # 通用组件（新增动画组件）
│ │ ├── common/ # 基础组件（不变）
│ │ ├── animation/ # 启动动画组件（新增）
│ │ │ ├── LaunchAnimation.jsx # 动画主组件
│ │ │ ├── LampElement.jsx # 灯元素组件
│ │ │ ├── MoonlightEffect.jsx # 月光效果组件
│ │ │ └── PoemText.jsx # 诗句文字组件
│ │ ├── document/ # 文档相关组件（不变）
│ │ ├── reader/ # 阅读器组件（不变）
│ │ └── chat/ # 问答组件（不变）
│ ├── contexts/ # React上下文（不变）
│ ├── hooks/ # 自定义Hooks（新增动画Hooks）
│ │ ├── useLaunchAnimation.js # 控制动画进度、跳转（新增）
│ │ ├── useDocument.js # 原有Hooks（不变）
│ ├── pages/ # 页面组件（新增启动页）
│ │ ├── LaunchPage.jsx # 启动动画页（新增）
│ │ ├── Home.jsx # 原有页面（不变）
│ │ └── ...
│ ├── services/ # 业务逻辑服务（不变）
│ ├── utils/ # 工具函数（新增动画工具）
│ │ ├── animationUtils.js # 动画帧控制、样式计算（新增）
│ │ └── ...
│ ├── App.jsx # 应用入口组件（新增路由判断：首次进入显示LaunchPage）
│ └── ...
├── server/ # 后端服务（不变）
└── ...
| 模块 | 技术选型 | 说明 |
|---|---|---|
| 启动动画 | Framer Motion + CSS 关键帧 | Framer Motion控制动画时序，CSS实现灯、月光的渐变/扩散效果 |
| 诗句文字渲染 | 自定义字体 + Canvas（可选） | 加载书法字体，Canvas实现文字“浮现”时的透明度过渡 |
| 动画状态管理 | 自定义Hook（useLaunchAnimation） | 控制动画进度、跳过逻辑、页面跳转状态 |
| 原有模块 | React 18 + React Router v6 等 | 保持不变 |
- 加载判断：用户首次进入应用时，
App.jsx路由重定向至LaunchPage；非首次进入（通过localStorage记录“已看过动画”）直接进入HomePage。 - 资源加载：
LaunchAnimation.jsx初始化时加载字体、图片资源，加载中显示“月光加载中”提示（圆形进度条，模拟月亮渐圆）。 - 动画执行：
- 阶段1（0-2s）：
LampElement渲染亮灯状态，背景渐变暗，“吹灭读书灯”文字从透明渐显。 - 阶段2（2-4s）：灯芯CSS关键帧动画“熄灭”，光晕逐渐消失，
MoonlightEffect开始扩散（淡蓝色光斑从中心向外蔓延）。 - 阶段3（4-6s）：“一身都是月”文字浮现，背景完全切换为月光质感，右下角显示“跳过”按钮。
- 阶段1（0-2s）：
- 跳转逻辑：动画结束（6s后）自动跳转至
HomePage，或用户点击“跳过”按钮立即跳转，同时在localStorage存入hasSeenLaunchAnimation: true。
- RAG系统：新增“主题向量池”，不同主题的文档向量分开存储，点击专栏时仅检索对应主题的向量池，提升问答精准度。
- 文档预览：PDF预览使用
pdf.js自定义渲染，添加“月光批注”功能（用户标注时，批注框样式为“月光边距”）。
- 启动动画与主页衔接：动画结束时，“月光”元素平滑过渡为主页背景，主页导航栏的“灯”图标保持与动画中一致的设计风格（暖黄色，hover时亮一下）。
- 交互反馈：所有按钮点击时，添加“月光涟漪”效果（点击处扩散淡蓝色波纹）；文档上传成功时，显示“灯芯闪烁”提示（替代传统“√”提示）。
- 主题一致性：夜间模式下，所有文字颜色变为“月光白”，背景为“夜空蓝”；日间模式下，背景为“米白”，文字为“深灰”，保持“灯暖、月冷”的色彩对比。
- 动画兼容性：低版本浏览器不支持Framer Motion时，降级为“静态图+文字渐显”效果，通过
@supports检测CSS特性实现适配。 - 动画资源加载速度：将动画图片压缩为WebP格式，字体使用字体子集（仅包含诗句所需文字），减少资源体积；加载超时（5s）时，直接显示静态主题图跳转。
- 多设备适配：使用
vw单位和媒体查询，确保手机端“灯”“月”元素比例合适，诗句文字不溢出屏幕。