89 lines
2.1 KiB
Markdown
89 lines
2.1 KiB
Markdown
## 报告查看器（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 中，避免在视图中直接写大量配置。
|