📚 多级导航文档浏览器
一个现代化的文档阅读和导航工具
---
## ✨ 项目简介
这是一个基于 **React** 和 **Next.js** 构建的现代化文档浏览应用。它能够智能解析文档结构，自动生成多级导航目录，让您能够快速定位和浏览文档中的任意章节。
## 🚀 核心功能
### 📖 智能导航
- **🔍 自动解析**: 智能识别文档标题结构，生成层级化导航目录
- **⚡ 快速跳转**: 点击导航项即可快速跳转到对应章节
- **🎯 实时定位**: 滚动阅读时自动高亮当前查看的章节
### 🎨 用户体验
- **📱 响应式设计**: 完美适配桌面、平板和手机等各种设备
- **🌙 主题切换**: 支持亮色/暗色模式切换，保护您的眼睛
- **📁 文件上传**: 支持拖拽上传本地文档文件
- **🔄 实时预览**: 文档内容实时渲染和显示
## 🛠️ 技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| **React** | 18.2.0 | 前端框架 |
| **Next.js** | 12.3.4 | 全栈框架 |
| **Chakra UI** | 2.4.9 | UI 组件库 |
| **Marked** | 4.2.12 | Markdown 解析 |
| **Framer Motion** | 9.0.2 | 动画效果 |
## 🚀 快速开始
### 📋 环境要求
- **Node.js** >= 18.0.0
- **npm** >= 8.0.0 或 **yarn** >= 1.22.0
### 💻 本地开发
```bash
# 1. 克隆项目
git clone https://gitee.com/into-the-desert/document-navigator-v2.git
cd document-navigator-v2
# 2. 安装依赖
npm install
# 或者使用 yarn
yarn install
# 3. 启动开发服务器
npm run dev
# 或者使用 yarn
yarn dev
# 4. 打开浏览器访问
# http://localhost:3000
```
### 🏗️ 生产部署
```bash
# 构建生产版本
npm run build
# 启动生产服务器
npm start
```
### 📦 静态导出
如果您需要将项目导出为静态网站文件（无需 Node.js 服务器）：
```bash
npm run export
```
> 💡 **提示**: 导出的静态文件将位于 `out` 目录中，可直接部署到任何静态网站托管服务。
## 📖 使用指南
### 🎯 基本操作
#### 📁 文档上传
- **拖拽上传**: 将文档文件直接拖拽到上传区域
- **点击上传**: 点击上传区域选择本地文件
- **示例文档**: 点击"加载示例文档"体验功能
#### 🧭 导航使用
- **📋 目录树**: 左侧自动生成的多级导航目录
- **🔗 快速跳转**: 点击任意导航项快速定位到对应章节
- **🎯 实时高亮**: 滚动时自动高亮当前阅读的章节
#### ⚙️ 功能控制
- **🔙 返回首页**: 点击右上角"返回上传"按钮
- **🌓 主题切换**: 点击"切换模式"在亮色/暗色模式间切换
- **📱 响应式**: 自动适配不同屏幕尺寸
## 📄 支持格式
| 格式 | 扩展名 | 说明 |
|------|--------|---------|
| **Markdown** | `.md` | 完整支持 Markdown 语法 |
| **纯文本** | `.txt` | 基础文本显示 |
| **HTML** | `.html` | 渲染 HTML 内容 |
## 🤝 贡献指南
我们欢迎任何形式的贡献！如果您想为项目做出贡献，请：
1. **🍴 Fork** 本仓库
2. **🌿 创建** 您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. **💾 提交** 您的更改 (`git commit -m 'Add some AmazingFeature'`)
4. **📤 推送** 到分支 (`git push origin feature/AmazingFeature`)
5. **🔄 打开** 一个 Pull Request
## 📝 许可证
本项目采用 **MIT** 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
## 🙏 致谢
感谢所有为这个项目做出贡献的开发者和用户！
---