# 业务外部接口日志前端实施计划

## 目标

在“系统管理 > 日志管理”下新增“接口日志”页面，以紧凑列表和独立详情展示业务外部接口调用情况及完整请求响应。

## 实施内容

1. 新增`src/api/monitor/apilog.js`，封装分页列表和详情接口。
2. 新增`src/views/monitor/apilog/index.vue`，支持接口地址、HTTP方法、HTTP调用状态和调用时间筛选。
3. 列表展示日志编号、调用账号、接口地址、HTTP方法、HTTP状态、HTTP调用状态、耗时和调用时间。
4. 详情按需二次加载，展示调用账号和用户ID、URL、Content-Type、请求头、请求参数、响应头、原始返回正文和异常。
5. 请求响应长文本使用等宽字体和固定最大高度；可解析的JSON基于原始字符串进行无损结构美化并按2空格缩进展示，不将数值反序列化后再输出，普通文本保留原始换行，长字段按容器自动折行；使用文本插值，禁止`v-html`。
6. 页面只提供查询和详情，不增加删除、清空或导出操作。
7. 详情弹窗使用响应式宽度和桌面最大宽度，长URL和长文本不得撑破页面。

## 验证标准

- 使用项目`.nvmrc`切换Node版本后，生产构建通过。
- 管理员可从真实系统菜单进入接口日志页，列表、筛选、分页和详情正常。
- 成功、失败、空响应和超长响应均能稳定展示，JSON缩进、超大整数原值、中文、原始换行和长字段自动折行正确。
- 外部响应中的HTML只作为文本显示，不产生脚本或页面节点。
- 未授权用户看不到详情入口且直接请求详情接口被拒绝。