feat(docs): 用户手册接入界面截图

- 6 张核心页面截图(仪表盘/向导/日志查询/日志分析/告警/设置)存 docs/assets/screenshots,
  随发布包分发;产品介绍页新增「界面预览」两列网格,各功能页顶部内嵌对应截图
- goldmark 开启 WithUnsafe 以渲染网格 HTML(文档自维护,无注入面);截图经 DOM 校验全部加载成功

backend/services/docsite.go

@@ -15,6 +15,7 @@ import (
 	"github.com/yuin/goldmark"
 	"github.com/yuin/goldmark/extension"
 	"github.com/yuin/goldmark/parser"
+	htmlRenderer "github.com/yuin/goldmark/renderer/html"
 )
 
 // DocsManifest docs/user-guide/manifest.json
@@ -57,7 +58,7 @@ type DocsNav struct {
 var (
 	docsManifestCache *DocsManifest
 	docsBasePath      string
-	docsMD            = goldmark.New(goldmark.WithExtensions(extension.Table), goldmark.WithParserOptions(parser.WithAutoHeadingID()))
+	docsMD            = goldmark.New(goldmark.WithExtensions(extension.Table), goldmark.WithParserOptions(parser.WithAutoHeadingID()), goldmark.WithRendererOptions(htmlRenderer.WithUnsafe()))
 	docsTOCPattern    = regexp.MustCompile(`<h([23]) id="([^"]+)"[^>]*>([^<]+)</h[23]>`)
 )
 

docs/user-guide/README.md

@@ -10,6 +10,17 @@ LokiStack 把 Grafana Loki 日志聚合的部署、采集、查询、分析与
 - **告警**:内置九条应用日志规则,绑定默认通道后填入飞书 Webhook 即可接收;支持冷却与风暴抑制。
 - **运维底座**:凭证加密存储、操作审计、标准 Prometheus 指标端点(/api/v1/metrics)。
 
+## 界面预览
+
+<div class="shot-grid">
+  <img src="/docs/assets/screenshots/dashboard.png" alt="仪表盘" />
+  <img src="/docs/assets/screenshots/wizard.png" alt="部署向导" />
+  <img src="/docs/assets/screenshots/logs-query.png" alt="日志查询" />
+  <img src="/docs/assets/screenshots/analysis.png" alt="日志分析" />
+  <img src="/docs/assets/screenshots/alerts.png" alt="告警通知" />
+  <img src="/docs/assets/screenshots/settings.png" alt="系统设置" />
+</div>
+
 ## 下一步
 
 阅读[快速安装](install.md),或直接进入[部署向导](wizard.md)。

docs/user-guide/alerts.md

@@ -2,6 +2,8 @@
 
 「日志告警」页(`/alerts`)管理规则、通知通道与发送历史。
 
+![告警通知](/docs/assets/screenshots/alerts.png)
+
 ## 快速开始
 
 1. 在「通知通道」中编辑默认通道,填入飞书群机器人 Webhook 并启用。

docs/user-guide/analysis.md

@@ -2,6 +2,8 @@
 
 「日志分析」页(`/analysis`,管理员)自动聚合日志指标,无需手动查询:
 
+![日志分析](/docs/assets/screenshots/analysis.png)
+
 - **统计卡**:日志总量、错误行数、告警行数、活跃应用
 - **趋势折线**:总量 / 错误 / 告警随时间分布
 - **命名空间分布**:环形图

docs/user-guide/query.md

@@ -2,6 +2,8 @@
 
 「日志查询」页(`/logs`)按 LogQL 与时间范围检索日志。
 
+![日志查询](/docs/assets/screenshots/logs-query.png)
+
 ## 查询方式
 
 - **LogQL 编辑器**:语法高亮与标签/管道补全;回车执行。

docs/user-guide/wizard.md

@@ -2,6 +2,8 @@
 
 部署向导(`/wizard`)三步完成 Loki 上线:环境与目标 → 存储 → 部署 Loki 与采集。
 
+![部署向导](/docs/assets/screenshots/wizard.png)
+
 ## 第一步:环境与目标
 
 - **Kubernetes 集群**:粘贴 kubeconfig,或按页面给出的 RBAC 脚本在集群执行一次后粘贴 ServiceAccount 长期 Token。平台经 API Server 操作集群,无需安装 kubectl/Helm。