报告查看器（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版本）
安装与运行
# 安装依赖（推荐）
pnpm install
# 如果使用 npm / yarn，也可以：
# npm install
# 或
# yarn install
本地开发
pnpm dev
启动后，按终端提示在浏览器中访问对应地址（通常为 http://localhost:5173）。
打包构建
pnpm build
构建产物会输出到 dist 目录，可部署到任意静态资源服务器。
预览构建结果
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 中，避免在视图中直接写大量配置。