report_viewer/README.md

## 报告查看器（report-viewer）

一个基于 **Vue 3 + Vite + Tailwind CSS + Vant** 的移动端报告查看器，用于展示各类风控 / 报告数据（如司法涉诉、消费交易特征等），支持图表可视化和多页报告浏览。

---

## 功能概览

- **报告展示**：按模块展示多种报告内容与字段说明  
- **图表可视化**：基于 `ECharts` 和 `vue-echarts` 渲染图表  
- **移动端 UI**：使用 `Vant 4` 组件库，适配手机端浏览体验  
- **组合式 API**：使用 Vue 3 组合式写法封装业务逻辑（如风险提示 hook 等）

---

## 技术栈

- **框架**：Vue 3
- **构建工具**：Vite
- **UI 组件库**：Vant 4
- **样式**：Tailwind CSS、Sass
- **数据请求**：Axios
- **图表**：ECharts、vue-echarts

---

## 环境要求

- **Node.js**：建议 >= 18
- **包管理器**：推荐使用 `pnpm`（项目中已指定 `pnpm` 版本）

---

## 安装与运行

```bash
# 安装依赖（推荐）
pnpm install

# 如果使用 npm / yarn，也可以：
# npm install
# 或
# yarn install
```

### 本地开发

```bash
pnpm dev
```

启动后，按终端提示在浏览器中访问对应地址（通常为 `http://localhost:5173`）。

### 打包构建

```bash
pnpm build
```

构建产物会输出到 `dist` 目录，可部署到任意静态资源服务器。

### 预览构建结果

```bash
pnpm preview
```

---

## 目录结构（简要）

以下仅列出与前端页面关系最紧密的部分：

- `src/main.js`：应用入口文件，挂载 Vue 应用
- `src/views/Report.vue`：报告主页面
- `src/ui/`：报告相关的 UI 组件（如 `CIVYZ9A2B.vue` 等）
- `src/composables/`：组合式函数（如 `useRiskNotifier` 等）
- `tailwind.config.js`：Tailwind CSS 配置

---

## 开发说明

- 若需新增报告模块，建议：
  - 在 `src/ui/` 下新增对应的 Vue 组件
  - 在 `Report.vue` 中注册或路由中引用新组件
  - 如需共享逻辑，可在 `src/composables/` 中抽离成 hook
- 图表相关逻辑优先封装在单独组件或 composable 中，避免在视图中直接写大量配置。