1.7 KiB
1.7 KiB
业务外部接口日志前端实施计划
目标
在“系统管理 > 日志管理”下新增“接口日志”页面，以紧凑列表和独立详情展示业务外部接口调用情况及完整请求响应。
实施内容
- 新增
src/api/monitor/apilog.js，封装分页列表和详情接口。 - 新增
src/views/monitor/apilog/index.vue，支持接口地址、HTTP方法、HTTP调用状态和调用时间筛选。 - 列表展示日志编号、调用账号、接口地址、HTTP方法、HTTP状态、HTTP调用状态、耗时和调用时间。
- 详情按需二次加载，展示调用账号和用户ID、URL、Content-Type、请求头、请求参数、响应头、原始返回正文和异常。
- 请求响应长文本使用等宽字体和固定最大高度；可解析的JSON基于原始字符串进行无损结构美化并按2空格缩进展示，不将数值反序列化后再输出，普通文本保留原始换行，长字段按容器自动折行；使用文本插值，禁止
v-html。 - 页面只提供查询和详情，不增加删除、清空或导出操作。
- 详情弹窗使用响应式宽度和桌面最大宽度，长URL和长文本不得撑破页面。
验证标准
- 使用项目
.nvmrc切换Node版本后，生产构建通过。 - 管理员可从真实系统菜单进入接口日志页，列表、筛选、分页和详情正常。
- 成功、失败、空响应和超长响应均能稳定展示，JSON缩进、超大整数原值、中文、原始换行和长字段自动折行正确。
- 外部响应中的HTML只作为文本显示，不产生脚本或页面节点。
- 未授权用户看不到详情入口且直接请求详情接口被拒绝。