sdno-log-view v0.0.5

log-component

一个基于 Vue 3 的日志组件库,提供了北向日志、南向日志、操作日志、流程日志等功能组件。

功能特性

• 北向日志组件 - 支持分页、搜索、列表、流程图、详情等功能
• 南向日志组件 - 支持分页、搜索等功能
• 操作日志组件 - 支持分页、搜索等功能
• 流程日志组件 - 支持分页、搜索等功能
• 日志详情弹窗 - 展示日志详细信息
• 流程图弹窗 - 展示日志流程图

安装

# 1. 如果Saber框架Vue 3项目中使用，其中 @smallwei/avue 和element-plus 已经安装，则不需要安装。
# 2. 如果其他项目中使用，则需要安装element-plus、@smallwei/avue、vue-json-viewer、@antv/x6、x2js(如果项目中已经安装，则不需要安装)。

# 安装依赖
npm install element-plus
npm install @smallwei/avue
npm install vue-json-viewer@3.0.4
npm install @antv/x6@2.18.1
npm install x2js@3.4.4

# 安装 日志组件 最新版本
npm install sdno-log-view@latest

使用方法

全局注册

1. main.js文件中 注册依赖组件

import { createApp } from 'vue'
const app = createApp(App)

// 引入 ElementPlus 、 Avue 组件 、相关样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'; 
import Avue from '@smallwei/avue'
import '@smallwei/avue/lib/index.css';

// 引入 sdno-log-view 日志 组件
import SdnoLogView from 'sdno-log-view'

// 注册
app.use(JsonViewer);  
app.use(ElementPlus)
app.use(Avue)
app.use(SdnoLogView)

组件说明与使用

1.北向日志组件 - NorthModule

用于展示北向接口调用日志,支持分页、搜索等功能。

<template>
  <NorthModule :request="request" :prefix="prefix" :xmlJs="xmlJs" />
</template>

<script setup>
// 引入x2js库，用于解析xml数据
import xmlJs from 'x2js';
const request = { /* axios实例 */ }
const prefix = '/api' // API前缀
</script>

Props

2.南向日志组件 - SouthModule

用于展示北向接口调用日志,支持分页、搜索等功能。

<template>
  <SouthModule :request="request" :prefix="prefix" :xmlJs="xmlJs" />
</template>

<script setup>
// 引入x2js库，用于解析xml数据
import xmlJs from 'x2js';
const request = { /* axios实例 */ }
const prefix = '/api' // API前缀
</script>

Props

依赖说明

本组件库依赖以下第三方库:

{
  "element-plus": "^2.3.0",
  "@smallwei/avue": "^3.6.2", 
  "vue-json-viewer": "^3.0.4",
  "@antv/x6": "^2.18.1",
  "vue": "^3.2.47",
  "x2js": "^3.4.4",
}

请确保项目中已安装并正确注册这些依赖。

组件示例