# 报告查看器 - 独立 Vue3 项目

这是一个独立的 Vue3 项目，用于展示报告组件。项目使用本地 JSON 文件（`example.json`）作为数据源，不依赖网络请求。

## 📋 已包含的组件

1. **DWBG6A2C** - 司南报告（包含所有子模块）
2. **FLXG0V4B** - 司法涉诉
3. **QYGL3F8E** - 人企关系加强版（包含所有子模块）
4. **JRZQ4B6C** - 信贷表现
5. **JRZQ09J8** - 收入评估
6. **QCXG9P1C** - 名下车辆
7. **DWBG8B4D** - 谛听多维报告（包含所有子模块）

## 🚀 快速开始

### 1. 安装依赖

```bash
cd report-viewer
npm install
# 或
pnpm install
# 或
yarn install
```

### 2. 启动开发服务器

```bash
npm run dev
```

访问：`http://localhost:3000`

### 3. 构建生产版本

```bash
npm run build
```

## 📁 项目结构

```
report-viewer/
├── public/
│   └── example.json          # 示例数据文件
├── src/
│   ├── components/           # 基础组件
│   │   ├── BaseReport.vue   # ⭐ 核心组件
│   │   ├── GaugeChart.vue
│   │   ├── ShareReportButton.vue
│   │   └── ...
│   ├── views/
│   │   └── Report.vue        # ⭐ 报告页面
│   ├── ui/                  # ⭐ 业务组件
│   │   ├── DWBG6A2C/       # 司南报告
│   │   ├── CFLXG0V4B/      # 司法涉诉
│   │   ├── CQYGL3F8E/       # 人企关系加强版
│   │   ├── JRZQ4B6C/        # 信贷表现
│   │   ├── JRZQ09J8/        # 收入评估
│   │   ├── CQCXG9P1C.vue    # 名下车辆
│   │   └── CDWBG8B4D/       # 谛听多维报告
│   ├── assets/              # 样式和图片
│   └── composables/          # 工具函数（已移除网络请求）
├── package.json
├── vite.config.js
└── tailwind.config.js
```

## ⚙️ 配置说明

### 数据源

项目从 `public/example.json` 加载示例数据。可以直接修改该文件来更新显示的内容。

### 已移除的功能

- ✅ 产品背景图片（已移除背景图显示）
- ✅ 网络请求（改为从本地 JSON 文件加载）
- ✅ API 调用（ShareReportButton 在示例模式下不进行网络请求）

## 📝 使用说明

1. 启动项目后，会自动加载 `public/example.json` 中的数据
2. 数据会自动排序并显示在报告页面中
3. 所有组件都会根据数据进行渲染

## 🔧 注意事项

1. **图片资源**：确保所有必要的图片文件已复制到 `src/assets/images/` 目录
2. **样式依赖**：项目依赖 Tailwind CSS 和 Vant UI，确保正确引入
3. **浏览器兼容**：需要现代浏览器支持（ES2015+）
4. **数据格式**：`example.json` 必须符合组件期望的数据结构

## 📦 依赖说明

### 核心依赖

- **vue** ^3.5.12 - Vue 框架
- **vue-router** ^4.4.5 - 路由管理
- **vant** ^4.9.9 - UI 组件库
- **echarts** ^5.5.1 - 图表库
- **vue-echarts** ^7.0.3 - Vue ECharts 封装
- **@vueuse/core** ^11.3.0 - Vue 工具库
- **lodash** ^4.17.21 - 工具函数库

### 开发依赖

- **vite** ^5.4.10 - 构建工具
- **tailwindcss** ^3.4.15 - CSS 框架
- **@vitejs/plugin-vue** - Vite Vue 插件
- **unplugin-auto-import** - 自动导入插件
- **unplugin-vue-components** - 自动组件导入插件

## 🐛 常见问题

### Q: 图片加载失败？
A: 确保图片文件已复制到 `src/assets/images/report/` 目录

### Q: 样式不生效？
A: 确保 `tailwind.config.js` 中包含了正确的 content 路径

### Q: 数据不显示？
A: 检查 `public/example.json` 文件格式是否正确，确保数据符合组件期望的结构

## 📞 技术支持

如有问题，请检查：
1. 控制台错误信息
2. `public/example.json` 文件是否存在且格式正确
3. 依赖是否正确安装
4. 文件路径是否正确

---

**提示**：这是一个独立的 Vue3 项目，使用本地 JSON 文件作为数据源，无需后端 API 支持。