@openseecomponent/log-sse-viewer

SSE日志查看组件 - 支持Vue2和Vue3，兼容Element UI和Element Plus

安装

npm install @openseecomponent/log-sse-viewer

特性

• ✅ 支持 Vue2 和 Vue3（使用 vue-demi）
• ✅ 支持 Element UI 和 Element Plus
• ✅ SSE 实时日志流
• ✅ Victoria Logs 历史日志查询
• ✅ 支持有/无 hostIp 模式
• ✅ 自动重连和错误处理
• ✅ 日志过滤和格式化
• ✅ 自动滚动

基本使用

Vue3 + Element Plus

<template>
  <LogSseViewer
    :task-id="taskId"
    :task-time="taskTime"
    :task-status="taskStatus"
    :host-ip="hostIp"
    :api-config="logSseApiConfig"
    :message-handler="ElMessage"
    :victoria-logs-url="victoriaLogsUrl"
    :stream-name="streamName"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import LogSseViewer, { createLogSseApi } from '@openseecomponent/log-sse-viewer'
import request from '@/utils/request'

// 配置 API
const logSseApiConfig = createLogSseApi({
  baseUrl: import.meta.env.VITE_APP_BASE_API,
  request: request
})

// 从配置文件或环境变量读取敏感配置
const victoriaLogsUrl = import.meta.env.VITE_VICTORIA_LOGS_URL || 'https://your-victoria-logs-url.com/select/logsql/query'
const streamName = import.meta.env.VITE_STREAM_NAME || 'YOUR_STREAM_NAME'

const taskId = ref('your-task-id')
const taskTime = ref(new Date())
const taskStatus = ref('RUNNING')
const hostIp = ref(null) // 可选
</script>

Vue2 + Element UI

<template>
  <LogSseViewer
    :task-id="taskId"
    :task-time="taskTime"
    :task-status="taskStatus"
    :host-ip="hostIp"
    :api-config="logSseApiConfig"
    :message-handler="$message"
    :victoria-logs-url="victoriaLogsUrl"
    :stream-name="streamName"
  />
</template>

<script>
import LogSseViewer, { createLogSseApi } from '@openseecomponent/log-sse-viewer'
import request from '@/utils/request'

export default {
  components: {
    LogSseViewer
  },
  data() {
    return {
      logSseApiConfig: createLogSseApi({
        baseUrl: process.env.VUE_APP_BASE_API,
        request: request
      }),
      // 从配置文件或环境变量读取敏感配置
      victoriaLogsUrl: process.env.VUE_APP_VICTORIA_LOGS_URL || 'https://your-victoria-logs-url.com/select/logsql/query',
      streamName: process.env.VUE_APP_STREAM_NAME || 'YOUR_STREAM_NAME',
      taskId: 'your-task-id',
      taskTime: new Date(),
      taskStatus: 'RUNNING',
      hostIp: null // 可选
    }
  }
}
</script>

Props

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | taskId | String | 是 | - | 任务ID | | taskTime | String/Date | 是 | - | 任务时间 | | taskStatus | String | 否 | null | 任务状态（RUNNING/running/CI_RUNNING/CD_RUNNING/PENDING 等） | | hostIp | String | 否 | null | 主机IP（支持有/无hostIp模式） | | autoStart | Boolean | 否 | false | 是否自动启动连接 | | apiConfig | Object | 是 | - | API配置对象（通过 createLogSseApi 创建） | | messageHandler | Object | 是 | - | 消息提示处理器（ElMessage 或 $message） | | victoriaLogsUrl | String | 是 | - | Victoria日志查询URL（必须从配置文件读取） | | streamName | String | 是 | - | 日志流名称（必须从配置文件读取） |

配置说明

⚠️ 重要：敏感信息配置

victoriaLogsUrl 和 streamName 必须从配置文件或环境变量中读取，不要硬编码在代码中！

推荐配置方式

方式1：使用环境变量（推荐）

Vue3 项目（Vite）

创建 .env 文件：

VITE_VICTORIA_LOGS_URL=https://your-victoria-logs-url.com/select/logsql/query
VITE_STREAM_NAME=YOUR_STREAM_NAME

在组件中使用：

const victoriaLogsUrl = import.meta.env.VITE_VICTORIA_LOGS_URL
const streamName = import.meta.env.VITE_STREAM_NAME

Vue2 项目（Vue CLI）

创建 .env 文件：

VUE_APP_VICTORIA_LOGS_URL=https://your-victoria-logs-url.com/select/logsql/query
VUE_APP_STREAM_NAME=YOUR_STREAM_NAME

在组件中使用：

const victoriaLogsUrl = process.env.VUE_APP_VICTORIA_LOGS_URL
const streamName = process.env.VUE_APP_STREAM_NAME

方式2：使用配置文件

创建 src/config/log-config.js：

export const logConfig = {
  victoriaLogsUrl: 'https://your-victoria-logs-url.com/select/logsql/query',
  streamName: 'YOUR_STREAM_NAME'
}

在组件中导入：

import { logConfig } from '@/config/log-config'

const victoriaLogsUrl = logConfig.victoriaLogsUrl
const streamName = logConfig.streamName

API 配置

使用 createLogSseApi 创建 API 配置对象：

import { createLogSseApi } from '@openseecomponent/log-sse-viewer'
import request from '@/utils/request' // 你的请求库（axios等）

const logSseApiConfig = createLogSseApi({
  baseUrl: 'http://your-api-base-url', // API基础URL
  request: request // 请求函数（需要支持 axios 风格的调用）
})

消息处理器

Vue3 + Element Plus

import { ElMessage } from 'element-plus'
// 使用 ElMessage 作为 messageHandler

Vue2 + Element UI

// 在组件中使用 this.$message
// 或
import { Message } from 'element-ui'
const messageHandler = Message

更新日志

v1.1.0

• ⚠️ 破坏性变更：victoriaLogsUrl 和 streamName 改为必填参数，不再提供默认值
• 🔒 移除硬编码的敏感信息，提高安全性
• 📝 更新文档，说明如何从配置文件读取敏感信息

v1.0.0

• 初始版本
• 支持 Vue2 和 Vue3
• 支持 SSE 实时日志和历史日志查询

发布到公共 npm 仓库

1. 登录 npm

npm login

输入你的 npm 账号、密码和邮箱。

2. 构建包

npm run build

3. 发布到公共仓库

npm publish --access public

注意：由于包名是 @openseecomponent/log-sse-viewer（scoped package），需要使用 --access public 参数才能发布到公共仓库。

4. 更新版本

如果需要更新版本：

# 更新补丁版本（1.1.0 -> 1.1.1）
npm version patch

# 更新次要版本（1.1.0 -> 1.2.0）
npm version minor

# 更新主要版本（1.1.0 -> 2.0.0）
npm version major

# 然后发布
npm publish --access public

在其他项目中使用

安装

npm install @openseecomponent/log-sse-viewer

使用示例

参考上面的"基本使用"部分。

License

MIT