npm package: @openseecomponent/log-sse-viewer
Description: SSE日志查看组件 - 支持Vue2和Vue3
Author: securio
Latest version: 1.1.0

# @openseecomponent/log-sse-viewer

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

## 安装

```bash
npm install @openseecomponent/log-sse-viewer
```

## 特性

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

## 基本使用

### Vue3 + Element Plus

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

```vue
<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` 文件：
```env
VITE_VICTORIA_LOGS_URL=https://your-victoria-logs-url.com/select/logsql/query
VITE_STREAM_NAME=YOUR_STREAM_NAME
```

在组件中使用：
```javascript
const victoriaLogsUrl = import.meta.env.VITE_VICTORIA_LOGS_URL
const streamName = import.meta.env.VITE_STREAM_NAME
```

**Vue2 项目（Vue CLI）**

创建 `.env` 文件：
```env
VUE_APP_VICTORIA_LOGS_URL=https://your-victoria-logs-url.com/select/logsql/query
VUE_APP_STREAM_NAME=YOUR_STREAM_NAME
```

在组件中使用：
```javascript
const victoriaLogsUrl = process.env.VUE_APP_VICTORIA_LOGS_URL
const streamName = process.env.VUE_APP_STREAM_NAME
```

#### 方式2：使用配置文件

创建 `src/config/log-config.js`：
```javascript
export const logConfig = {
  victoriaLogsUrl: 'https://your-victoria-logs-url.com/select/logsql/query',
  streamName: 'YOUR_STREAM_NAME'
}
```

在组件中导入：
```javascript
import { logConfig } from '@/config/log-config'

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

## API 配置

使用 `createLogSseApi` 创建 API 配置对象：

```javascript
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
```javascript
import { ElMessage } from 'element-plus'
// 使用 ElMessage 作为 messageHandler
```

### Vue2 + Element UI
```javascript
// 在组件中使用 this.$message
// 或
import { Message } from 'element-ui'
const messageHandler = Message
```

## 更新日志

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

### v1.0.0
- 初始版本
- 支持 Vue2 和 Vue3
- 支持 SSE 实时日志和历史日志查询

## 发布到公共 npm 仓库

### 1. 登录 npm

```bash
npm login
```

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

### 2. 构建包

```bash
npm run build
```

### 3. 发布到公共仓库

```bash
npm publish --access public
```

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

### 4. 更新版本

如果需要更新版本：

```bash
# 更新补丁版本（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
```

## 在其他项目中使用

### 安装

```bash
npm install @openseecomponent/log-sse-viewer
```

### 使用示例

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

## License

MIT