一个基于Vue 3的PDF文档智能阅读组件演示项目。支持PDF查看、Markdown渲染、悬停联动和AI智能问答功能，专为MineRU处理结果设计。

• 🎯 自包含组件 - ChatPDF组件完全独立，可直接复制到任何Vue 3项目
• 📄 PDF + Markdown - 双栏布局，PDF与Markdown内容实时联动
• 🤖 AI智能问答 - 基于选中内容的上下文AI对话
• 🔄 MineRU集成 - 直接使用MineRU的layout.json，自动转换数据格式
• ⚡ 流式输出 - AI回答实时生成，提升交互体验
• 🎨 现代UI - 基于Tailwind CSS的美观界面

# 使用 bun (推荐)
bun install

# 或使用 npm
npm install

# 或使用 pnpm
pnpm install

bun dev

将 ChatPDF 目录复制到你的项目中：

# 无需安装依赖，直接使用！
bun dev  # bun会自动检测并安装所有需要的依赖

# 安装ChatPDF所需依赖 (在项目根目录执行)
npm install vue @tato30/vue-pdf markdown-it markdown-it-katex katex openai

# 安装 Tailwind CSS 4 (必需，用于组件样式)
npm install tailwindcss @tailwindcss/vite

⚠️ 重要: ChatPDF组件依赖 Tailwind CSS 4 进行样式渲染，请务必按照下面的 Tailwind CSS 4 配置 部分进行配置。

<script setup>
import ChatPDF from '@/components/ChatPDF/index.vue'

// 提供 MineRU 处理结果的具体文件路径
const layoutUrl = '/path/to/layout.json' // MineRU生成的布局文件
const pdfUrl = '/path/to/document.pdf' // 原始PDF文件
</script>

<template>
  <div class="h-screen">
    <ChatPDF :layout-url="layoutUrl" :pdf-url="pdfUrl" />
  </div>
</template>

mineru-vis-vue/
├── ChatPDF/                 # 🎯 核心组件 (可直接复制使用)
│   ├── index.vue           # 主入口组件
│   ├── components/         # 子组件
│   ├── composables/        # 组合式函数
│   ├── utils/              # 工具函数 (包含MineRU转换器)
│   ├── types/              # 类型定义
│   └── README.md           # 详细使用文档
├── src/
│   ├── views/
│   │   └── HomeView.vue    # 演示页面
│   └── ...
├── public/
│   └── sample-pdf/         # 演示数据
│       ├── layout.json     # MineRU生成的布局文件
│       ├── images/         # 提取的图片
│       └── *.pdf           # PDF文件
└── ...

详见 MineRU

MineRU 会生成：

• layout.json - 布局和内容数据
• images/ - 提取的图片
• 原始PDF文件

<ChatPDF :layout-url="/path/to/layout.json" :pdf-url="/path/to/document.pdf" />

创建 .env 文件配置AI服务：

VITE_AI_API_KEY=api-key
VITE_AI_BASE_URL=api-endpoint
VITE_AI_MODEL=model-name

• ChatPDF组件文档 - 完整的组件使用指南

ChatPDF组件使用 Tailwind CSS 4 进行样式设计。如果您的项目尚未配置 Tailwind CSS，请按以下步骤设置：

npm install tailwindcss @tailwindcss/vite

在您的 vite.config.ts 中添加 Tailwind CSS 插件：

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    // ... 其他插件
  ],
})

在您的主 CSS 文件中添加导入：

@import 'tailwindcss';

📖 详细配置指南: 请参考 Tailwind CSS 官方文档 获取完整的安装和配置说明。

# 开发服务器 (热重载)
bun dev

# 类型检查 + 构建 + 压缩
bun run build

# 单元测试
bun test:unit

# 代码检查
bun lint

# 类型检查 (不输出文件)
bun run type-check

• 学术论文阅读 - PDF + AI问答，提升阅读效率
• 技术文档分析 - 结构化内容展示，快速定位信息
• 研究资料整理 - 基于内容的智能对话和摘要
• 教育培训 - 交互式文档阅读体验

MIT License - 详见 LICENSE 文件

💡 提示: ChatPDF组件完全自包含，可以轻松集成到任何Vue 3项目中。只需复制 ChatPDF 目录并提供MineRU生成的文件路径即可开始使用。