重构：优化记录格式并修复核心功能

- 修改记录存储格式为 [4B len][8B offset][4B CRC][16B UUID][data]
- 修复 TopicProcessor 中 WaitGroup 使用错误导致 handler 不执行的问题
- 修复写入保护逻辑，避免 dirtyOffset=-1 时误判为写入中
- 添加统计信息定期持久化功能
- 改进 UTF-8 字符截断处理，防止 CJK 字符乱码
- 优化 Web UI：显示人类可读的文件大小，支持点击外部关闭弹窗
- 重构示例代码，添加 webui 和 webui_integration 示例

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

example/webui/README.md

@@ -0,0 +1,140 @@
+# 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")
+```