sdno-log-view/README.md

A plugin with multiple components using ElementPlus

# log-component

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

## 功能特性

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

## 安装

```bash
# 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文件中 注册依赖组件

```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

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

```vue
<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
| 参数 | 说明 | 类型 | 必填 | 默认值 |
|------|------|------|------|--------|
| request | axios请求实例 | Function | 是 | - |
| prefix | 接口前缀 | String | 是 | - |
| xmlJs | 插件方法 | Function | 是 | - |


### 2.南向日志组件 - SouthModule

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

```vue
<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
| 参数 | 说明 | 类型 | 必填 | 默认值 |
|------|------|------|------|--------|
| request | axios请求实例 | Function | 是 | - |
| prefix | 接口前缀 | String | 是 | - |
| xmlJs | 插件方法 | Function | 是 | - |


## 依赖说明

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

```json
{
  "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",
}
```

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

## 组件示例

| 组件示例                |   发布日期   |
|------------------------|------------|
| [组件示例](./doc/README.md) | 2025.02.13 |