# Seqlog Web UI 示例

这个示例展示了如何使用 seqlog 的内置 Web UI 功能。

## 特性

- **零编译前端**：使用 Vue 3 和 Tailwind CSS CDN，无需前端构建步骤
- **实时日志查看**：查看多个 topic 的日志记录
- **统计信息**：实时显示每个 topic 的统计数据
- **日志查询**：支持查询最早、最新的日志记录
- **状态追踪**：显示日志的处理状态（待处理、处理中、已处理）
- **灵活集成**：可以集成到现有的 HTTP 服务器或其他框架

## 运行示例

```bash
cd example/webui
go run main.go
```

然后在浏览器中访问 http://localhost:8080

## API 端点

Web UI 提供以下 API 端点：

- `GET /api/topics` - 获取所有 topic 列表
- `GET /api/logs?topic=xxx&count=N` - 查询最新的 N 条日志（从最后一条向前查询）
- `GET /api/logs/first?topic=xxx&count=N` - 查询从第一条开始的 N 条日志（从索引 0 向后查询）
- `GET /api/logs/last?topic=xxx&count=N` - 查询最后的 N 条日志（从最后一条向前查询）
- `GET /api/stats?topic=xxx` - 获取指定 topic 的统计信息

## 使用方式

### 方式 1：独立 Web UI 服务器

最简单的方式，直接启动一个独立的 Web UI 服务器：

```go
import "code.tczkiot.com/seqlog"

// 创建 LogHub
hub := seqlog.NewLogHub("./logs", logger, handler)

// 启动服务
hub.Start()

// 启动 Web UI（会阻塞）
hub.ServeUI(":8080")
```

如果需要在后台运行 Web UI：

```go
go func() {
    if err := hub.ServeUI(":8080"); err != nil {
        logger.Error("Web UI 错误", "error", err)
    }
}()
```

### 方式 2：集成到现有 HTTP 服务器

如果你已经有一个 HTTP 服务器，可以将 Web UI 集成到现有的 ServeMux：

```go
import (
    "net/http"
    "code.tczkiot.com/seqlog"
)

// 创建 LogHub
hub := seqlog.NewLogHub("./logs", logger, handler)
hub.Start()

// 创建自己的 ServeMux
mux := http.NewServeMux()

// 注册业务端点
mux.HandleFunc("/api/users", handleUsers)
mux.HandleFunc("/health", handleHealth)

// 注册 seqlog Web UI 到根路径
hub.RegisterWebUIRoutes(mux)

// 启动服务器
http.ListenAndServe(":8080", mux)
```

### 方式 3：集成到子路径

如果你想将 Web UI 放在子路径下（比如 `/logs/`）：

```go
// 创建主 ServeMux
mux := http.NewServeMux()

// 注册业务端点
mux.HandleFunc("/health", handleHealth)

// 创建 Web UI 的 ServeMux
logsMux := http.NewServeMux()
hub.RegisterWebUIRoutes(logsMux)

// 挂载到 /logs/ 路径
mux.Handle("/logs/", http.StripPrefix("/logs", logsMux))

// 启动服务器
http.ListenAndServe(":8080", mux)
```

访问 http://localhost:8080/logs/ 查看 Web UI。

完整的集成示例请参考 [example/webui_integration](../webui_integration/main.go)。

### 方式 4：集成到其他 Web 框架

对于 gin、echo 等框架，可以通过适配器集成：

```go
// Gin 框架示例
import (
    "github.com/gin-gonic/gin"
    "net/http"
)

r := gin.Default()

// 业务路由
r.GET("/api/users", handleUsers)

// 创建 seqlog Web UI 的 ServeMux
logsMux := http.NewServeMux()
hub.RegisterWebUIRoutes(logsMux)

// 使用 gin.WrapH 包装 http.Handler
r.Any("/logs/*path", gin.WrapH(http.StripPrefix("/logs", logsMux)))

r.Run(":8080")
```