From 9bc227f3a3feb5b0cff4aa7b2d00d86f843f44ef Mon Sep 17 00:00:00 2001
From: XuqmGroup <noreply@xuqm.com>
Date: Tue, 16 Jun 2026 16:20:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E5=BF=97=E7=9B=91=E6=8E=A7?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=20=E2=80=94=208=20=E4=B8=AA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 概览仪表盘（统计卡片 + echarts 趋势图 + Top5）
- 错误列表（分页 + 筛选）
- 错误详情（stack trace + 源码上下文）
- 事件流水（分页 + 筛选）
- 漏斗分析（动态步骤 + 转化率）
- Webhook 配置（CRUD）
- 高频/高危排行

Co-Authored-By: Claude <noreply@anthropic.com>
---
 ops-platform/src/api/log.ts                   | 144 ++++++++++++++
 ops-platform/src/router/index.ts              |   8 +
 ops-platform/src/views/layout/MainLayout.vue  |   3 +-
 .../src/views/log-monitor/LogEvents.vue       | 111 +++++++++++
 .../src/views/log-monitor/LogFunnels.vue      | 151 +++++++++++++++
 .../src/views/log-monitor/LogIssueDetail.vue  | 111 +++++++++++
 .../src/views/log-monitor/LogIssues.vue       | 130 +++++++++++++
 .../src/views/log-monitor/LogOverview.vue     | 128 +++++++++++++
 .../src/views/log-monitor/LogRankFreq.vue     |  72 +++++++
 .../src/views/log-monitor/LogRankRisk.vue     |  72 +++++++
 .../src/views/log-monitor/LogWebhooks.vue     | 178 ++++++++++++++++++
 ops-platform/vite.config.ts                   |   5 +
 12 files changed, 1112 insertions(+), 1 deletion(-)
 create mode 100644 ops-platform/src/api/log.ts
 create mode 100644 ops-platform/src/views/log-monitor/LogEvents.vue
 create mode 100644 ops-platform/src/views/log-monitor/LogFunnels.vue
 create mode 100644 ops-platform/src/views/log-monitor/LogIssueDetail.vue
 create mode 100644 ops-platform/src/views/log-monitor/LogIssues.vue
 create mode 100644 ops-platform/src/views/log-monitor/LogOverview.vue
 create mode 100644 ops-platform/src/views/log-monitor/LogRankFreq.vue
 create mode 100644 ops-platform/src/views/log-monitor/LogRankRisk.vue
 create mode 100644 ops-platform/src/views/log-monitor/LogWebhooks.vue

diff --git a/ops-platform/src/api/log.ts b/ops-platform/src/api/log.ts
new file mode 100644
index 0000000..4134ee5
--- /dev/null
+++ b/ops-platform/src/api/log.ts
@@ -0,0 +1,144 @@
+import client from './client'
+
+// ---- Types ----
+
+export interface LogOverview {
+  totalIssues: number
+  todayNew: number
+  affectedUsers: number
+  crashRate: number
+  dailyTrend: Array<{ date: string; crashRate: number }>
+  topIssues: LogIssueSummary[]
+}
+
+export interface LogIssueSummary {
+  id: string
+  title: string
+  type: string
+  count: number
+  affectedUsers: number
+  platform: string
+  lastSeenAt: string
+}
+
+export interface LogIssuePage {
+  content: LogIssueSummary[]
+  total: number
+  totalPages: number
+}
+
+export interface LogIssueDetail {
+  id: string
+  title: string
+  type: string
+  count: number
+  affectedUsers: number
+  platform: string
+  firstSeenAt: string
+  lastSeenAt: string
+  status: string
+  events: LogEvent[]
+  sourceContext?: string
+}
+
+export interface LogEvent {
+  id: string
+  issueId: string
+  userId: string
+  platform: string
+  appVersion: string
+  osVersion: string
+  device: string
+  timestamp: string
+  properties: Record<string, unknown>
+  stackTrace?: string
+}
+
+export interface LogEventPage {
+  content: LogEvent[]
+  total: number
+  totalPages: number
+}
+
+export interface LogFunnelStep {
+  name: string
+  count: number
+  rate: number
+}
+
+export interface LogFunnelResult {
+  steps: LogFunnelStep[]
+  totalStart: number
+  totalEnd: number
+  overallRate: number
+}
+
+export interface LogRankingItem {
+  id: string
+  title: string
+  type: string
+  count: number
+  affectedUsers: number
+  platform: string
+  rank: number
+}
+
+export interface LogWebhook {
+  id: string
+  name: string
+  url: string
+  events: string[]
+  enabled: boolean
+  secret?: string
+  createdAt: string
+  updatedAt: string
+}
+
+// ---- API ----
+
+export const logApi = {
+  getOverview: () =>
+    client.get<{ data: LogOverview }>('/log/v1/overview'),
+
+  listIssues: (params: {
+    type?: string
+    platform?: string
+    startDate?: string
+    endDate?: string
+    page?: number
+    size?: number
+  }) =>
+    client.get<{ data: LogIssuePage }>('/log/v1/issues', { params }),
+
+  getIssueDetail: (id: string) =>
+    client.get<{ data: LogIssueDetail }>(`/log/v1/issues/${id}`),
+
+  getFrequencyRanking: (limit = 10) =>
+    client.get<{ data: LogRankingItem[] }>('/log/v1/issues/rankings/frequency', { params: { limit } }),
+
+  getRiskRanking: (limit = 10) =>
+    client.get<{ data: LogRankingItem[] }>('/log/v1/issues/rankings/risk', { params: { limit } }),
+
+  listEvents: (params: {
+    eventName?: string
+    userId?: string
+    page?: number
+    size?: number
+  }) =>
+    client.get<{ data: LogEventPage }>('/log/v1/events', { params }),
+
+  getFunnel: (steps: string[]) =>
+    client.get<{ data: LogFunnelResult }>('/log/v1/events/funnel', { params: { steps } }),
+
+  listWebhooks: () =>
+    client.get<{ data: LogWebhook[] }>('/log/v1/webhooks'),
+
+  createWebhook: (data: Omit<LogWebhook, 'id' | 'createdAt' | 'updatedAt'>) =>
+    client.post<{ data: LogWebhook }>('/log/v1/webhooks', data),
+
+  updateWebhook: (id: string, data: Partial<LogWebhook>) =>
+    client.put<{ data: LogWebhook }>(`/log/v1/webhooks/${id}`, data),
+
+  deleteWebhook: (id: string) =>
+    client.delete(`/log/v1/webhooks/${id}`),
+}
diff --git a/ops-platform/src/router/index.ts b/ops-platform/src/router/index.ts
index dadc959..9824a02 100644
--- a/ops-platform/src/router/index.ts
+++ b/ops-platform/src/router/index.ts
@@ -20,6 +20,14 @@ const router = createRouter({
         { path: 'operation-logs', component: () => import('@/views/logs/OperationLogView.vue') },
         { path: 'risk-control', component: () => import('@/views/risk/RiskControlView.vue') },
         { path: 'system-logs', component: () => import('@/views/system/ServerLogsView.vue') },
+        { path: 'log/overview', component: () => import('@/views/log-monitor/LogOverview.vue') },
+        { path: 'log/issues', component: () => import('@/views/log-monitor/LogIssues.vue') },
+        { path: 'log/issues/:id', component: () => import('@/views/log-monitor/LogIssueDetail.vue') },
+        { path: 'log/events', component: () => import('@/views/log-monitor/LogEvents.vue') },
+        { path: 'log/funnels', component: () => import('@/views/log-monitor/LogFunnels.vue') },
+        { path: 'log/webhooks', component: () => import('@/views/log-monitor/LogWebhooks.vue') },
+        { path: 'log/rank/freq', component: () => import('@/views/log-monitor/LogRankFreq.vue') },
+        { path: 'log/rank/risk', component: () => import('@/views/log-monitor/LogRankRisk.vue') },
       ],
     },
   ],
diff --git a/ops-platform/src/views/layout/MainLayout.vue b/ops-platform/src/views/layout/MainLayout.vue
index 4db4564..5ab066c 100644
--- a/ops-platform/src/views/layout/MainLayout.vue
+++ b/ops-platform/src/views/layout/MainLayout.vue
@@ -66,7 +66,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { Avatar, Bell, Menu, Monitor, TrendCharts, Grid, Document, Warning, Promotion } from '@element-plus/icons-vue'
+import { Avatar, Bell, Menu, Monitor, TrendCharts, Grid, Document, Warning, Promotion, DataLine } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const isMobile = ref(false)
@@ -78,6 +78,7 @@ const navItems = computed(() => [
   { path: '/service-requests', label: '服务开通审核', icon: Bell },
   { path: '/apps', label: '应用管理', icon: Grid },
   { path: '/push', label: 'Push 诊断', icon: Promotion },
+  { path: '/log/overview', label: '日志监控', icon: DataLine },
   { path: '/operation-logs', label: '操作日志', icon: Document },
   { path: '/system-logs', label: '服务日志', icon: Monitor },
   { path: '/risk-control', label: '风控配置', icon: Warning },
diff --git a/ops-platform/src/views/log-monitor/LogEvents.vue b/ops-platform/src/views/log-monitor/LogEvents.vue
new file mode 100644
index 0000000..6518b2c
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogEvents.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-menu mode="horizontal" :default-active="$route.path" router class="log-nav" style="margin-bottom: 16px">
+      <el-menu-item index="/log/overview">概览</el-menu-item>
+      <el-menu-item index="/log/issues">错误列表</el-menu-item>
+      <el-menu-item index="/log/events">事件流水</el-menu-item>
+      <el-menu-item index="/log/funnels">漏斗分析</el-menu-item>
+      <el-menu-item index="/log/rank/freq">高频排行</el-menu-item>
+      <el-menu-item index="/log/rank/risk">高危排行</el-menu-item>
+      <el-menu-item index="/log/webhooks">Webhook</el-menu-item>
+    </el-menu>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+      <h2 style="margin: 0">事件流水</h2>
+      <el-button @click="loadEvents" :loading="loading">刷新</el-button>
+    </div>
+
+    <el-card style="margin-bottom: 16px">
+      <el-form :inline="true" :model="filters" size="default">
+        <el-form-item label="事件名">
+          <el-input v-model="filters.eventName" placeholder="如 page_view" clearable style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="用户 ID">
+          <el-input v-model="filters.userId" placeholder="用户 ID" clearable style="width: 200px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="loadEvents">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-table :data="events" v-loading="loading" border stripe>
+      <el-table-column prop="timestamp" label="时间" width="170">
+        <template #default="{ row }">{{ formatTime(row.timestamp) }}</template>
+      </el-table-column>
+      <el-table-column prop="issueId" label="事件 ID" width="180" show-overflow-tooltip />
+      <el-table-column prop="userId" label="用户" width="160" show-overflow-tooltip />
+      <el-table-column prop="platform" label="平台" width="80" />
+      <el-table-column prop="appVersion" label="App 版本" width="100" />
+      <el-table-column prop="device" label="设备" width="140" show-overflow-tooltip />
+      <el-table-column label="属性" min-width="200">
+        <template #default="{ row }">
+          <el-popover placement="left" :width="380" trigger="click">
+            <template #reference>
+              <el-button link type="primary" size="small">查看属性</el-button>
+            </template>
+            <div style="max-height: 400px; overflow-y: auto">
+              <div
+                v-for="(val, key) in row.properties"
+                :key="String(key)"
+                style="display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px"
+              >
+                <span style="flex-shrink: 0; width: 100px; color: #909399; font-weight: 500">{{ key }}</span>
+                <span style="flex: 1; word-break: break-all; color: #303133">
+                  {{ typeof val === 'object' ? JSON.stringify(val) : String(val ?? '') }}
+                </span>
+              </div>
+            </div>
+          </el-popover>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      style="margin-top: 16px"
+      v-model:current-page="page"
+      :page-size="size"
+      :total="total"
+      layout="total, prev, pager, next"
+      @current-change="loadEvents"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { logApi, type LogEvent } from '@/api/log'
+import { formatTime } from '@/utils/date'
+
+const events = ref<LogEvent[]>([])
+const loading = ref(false)
+const page = ref(1)
+const size = ref(20)
+const total = ref(0)
+
+const filters = reactive({
+  eventName: '',
+  userId: '',
+})
+
+async function loadEvents() {
+  loading.value = true
+  try {
+    const res = await logApi.listEvents({
+      eventName: filters.eventName || undefined,
+      userId: filters.userId || undefined,
+      page: page.value - 1,
+      size,
+    })
+    const data = res.data.data
+    events.value = data.content ?? []
+    total.value = data.total ?? 0
+  } catch {
+    events.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadEvents)
+</script>
diff --git a/ops-platform/src/views/log-monitor/LogFunnels.vue b/ops-platform/src/views/log-monitor/LogFunnels.vue
new file mode 100644
index 0000000..ab0164e
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogFunnels.vue
@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <el-menu mode="horizontal" :default-active="$route.path" router class="log-nav" style="margin-bottom: 16px">
+      <el-menu-item index="/log/overview">概览</el-menu-item>
+      <el-menu-item index="/log/issues">错误列表</el-menu-item>
+      <el-menu-item index="/log/events">事件流水</el-menu-item>
+      <el-menu-item index="/log/funnels">漏斗分析</el-menu-item>
+      <el-menu-item index="/log/rank/freq">高频排行</el-menu-item>
+      <el-menu-item index="/log/rank/risk">高危排行</el-menu-item>
+      <el-menu-item index="/log/webhooks">Webhook</el-menu-item>
+    </el-menu>
+
+    <h2 style="margin-bottom: 12px">漏斗分析</h2>
+    <p style="margin: 0 0 24px; color: #606266">
+      选择事件步骤序列，分析每步转化率。
+    </p>
+
+    <el-card style="margin-bottom: 16px">
+      <el-form label-width="100px">
+        <el-form-item label="步骤序列">
+          <div style="display: flex; flex-direction: column; gap: 8px; width: 100%">
+            <div
+              v-for="(step, idx) in stepInputs"
+              :key="idx"
+              style="display: flex; gap: 8px; align-items: center"
+            >
+              <span style="width: 30px; text-align: center; color: #909399">{{ idx + 1 }}</span>
+              <el-input v-model="stepInputs[idx]" :placeholder="`步骤 ${idx + 1} 事件名`" />
+              <el-button
+                v-if="stepInputs.length > 1"
+                type="danger"
+                :icon="Delete"
+                circle
+                size="small"
+                @click="stepInputs.splice(idx, 1)"
+              />
+            </div>
+            <el-button type="primary" plain size="small" @click="stepInputs.push('')" style="align-self: flex-start">
+              + 添加步骤
+            </el-button>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="runFunnel" :loading="loading">分析</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card v-if="funnelResult">
+      <template #header>
+        <span>漏斗结果</span>
+        <span style="float: right; color: #909399; font-size: 13px">
+          总转化率: {{ funnelResult.overallRate.toFixed(1) }}%
+        </span>
+      </template>
+
+      <div class="funnel-steps">
+        <div v-for="(step, idx) in funnelResult.steps" :key="idx" class="funnel-step">
+          <div class="funnel-bar-wrap">
+            <div class="funnel-bar" :style="{ width: barWidth(step.rate) }" />
+          </div>
+          <div class="funnel-info">
+            <span class="funnel-name">{{ step.name }}</span>
+            <span class="funnel-count">{{ step.count }} 人</span>
+            <el-tag size="small" :type="step.rate >= 50 ? 'success' : step.rate >= 20 ? 'warning' : 'danger'">
+              {{ step.rate.toFixed(1) }}%
+            </el-tag>
+          </div>
+          <div v-if="idx < funnelResult.steps.length - 1" class="funnel-arrow">
+            <span style="color: #c0c4cc">流失 {{ (100 - funnelResult.steps[idx + 1].rate / step.rate * 100).toFixed(1) }}%</span>
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Delete } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { logApi, type LogFunnelResult } from '@/api/log'
+
+const stepInputs = ref<string[]>(['', '', ''])
+const loading = ref(false)
+const funnelResult = ref<LogFunnelResult | null>(null)
+
+function barWidth(rate: number): string {
+  return `${Math.max(rate, 5)}%`
+}
+
+async function runFunnel() {
+  const steps = stepInputs.value.map((s) => s.trim()).filter(Boolean)
+  if (steps.length < 2) {
+    ElMessage.warning('至少需要 2 个步骤')
+    return
+  }
+  loading.value = true
+  try {
+    const res = await logApi.getFunnel(steps)
+    funnelResult.value = res.data.data
+  } catch {
+    ElMessage.error('分析失败')
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.funnel-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.funnel-step {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.funnel-bar-wrap {
+  height: 28px;
+  background: #f5f7fa;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.funnel-bar {
+  height: 100%;
+  background: linear-gradient(90deg, #409eff, #67c23a);
+  border-radius: 4px;
+  transition: width 0.4s ease;
+}
+.funnel-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+}
+.funnel-name {
+  font-weight: 600;
+  color: #303133;
+}
+.funnel-count {
+  color: #606266;
+}
+.funnel-arrow {
+  text-align: center;
+  font-size: 12px;
+  padding: 2px 0;
+}
+</style>
diff --git a/ops-platform/src/views/log-monitor/LogIssueDetail.vue b/ops-platform/src/views/log-monitor/LogIssueDetail.vue
new file mode 100644
index 0000000..0282804
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogIssueDetail.vue
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-page-header @back="$router.back()" style="margin-bottom: 16px">
+      <template #content>错误详情</template>
+    </el-page-header>
+
+    <div v-if="issue" style="display: flex; flex-direction: column; gap: 16px">
+      <el-card>
+        <template #header>基本信息</template>
+        <el-descriptions :column="isMobile ? 1 : 2" border>
+          <el-descriptions-item label="标题" :span="2">{{ issue.title }}</el-descriptions-item>
+          <el-descriptions-item label="类型">
+            <el-tag :type="typeTag(issue.type)">{{ issue.type }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="issue.status === 'resolved' ? 'success' : 'danger'">
+              {{ issue.status }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="累计次数">{{ issue.count }}</el-descriptions-item>
+          <el-descriptions-item label="影响用户">{{ issue.affectedUsers }}</el-descriptions-item>
+          <el-descriptions-item label="平台">{{ issue.platform }}</el-descriptions-item>
+          <el-descriptions-item label="首次出现">{{ formatTime(issue.firstSeenAt) }}</el-descriptions-item>
+          <el-descriptions-item label="最后出现">{{ formatTime(issue.lastSeenAt) }}</el-descriptions-item>
+        </el-descriptions>
+      </el-card>
+
+      <el-card>
+        <template #header>最近事件</template>
+        <el-table :data="issue.events" border stripe size="small">
+          <el-table-column prop="timestamp" label="时间" width="170">
+            <template #default="{ row }">{{ formatTime(row.timestamp) }}</template>
+          </el-table-column>
+          <el-table-column prop="userId" label="用户" width="160" show-overflow-tooltip />
+          <el-table-column prop="platform" label="平台" width="80" />
+          <el-table-column prop="appVersion" label="App 版本" width="100" />
+          <el-table-column prop="osVersion" label="OS 版本" width="100" />
+          <el-table-column prop="device" label="设备" width="140" show-overflow-tooltip />
+          <el-table-column label="Stack Trace" min-width="120" align="center">
+            <template #default="{ row }">
+              <el-button v-if="row.stackTrace" link type="primary" @click="showStack(row)">查看</el-button>
+              <span v-else style="color: #c0c4cc">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <el-card v-if="issue.sourceContext">
+        <template #header>源码上下文</template>
+        <pre class="source-pre">{{ issue.sourceContext }}</pre>
+      </el-card>
+    </div>
+
+    <el-skeleton v-else :rows="6" animated />
+
+    <el-dialog v-model="stackDialogVisible" title="Stack Trace" width="700px" destroy-on-close>
+      <pre class="stack-pre">{{ currentStack }}</pre>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { logApi, type LogIssueDetail as IssueDetail, type LogEvent } from '@/api/log'
+import { formatTime } from '@/utils/date'
+
+const route = useRoute()
+const issue = ref<IssueDetail | null>(null)
+const isMobile = ref(window.innerWidth < 768)
+
+const stackDialogVisible = ref(false)
+const currentStack = ref('')
+
+function typeTag(t: string): '' | 'success' | 'warning' | 'info' | 'danger' {
+  if (t === 'crash') return 'danger'
+  if (t === 'anr') return 'warning'
+  if (t === 'js_error') return ''
+  return 'info'
+}
+
+function showStack(event: LogEvent) {
+  currentStack.value = event.stackTrace ?? ''
+  stackDialogVisible.value = true
+}
+
+onMounted(async () => {
+  const id = route.params.id as string
+  try {
+    const res = await logApi.getIssueDetail(id)
+    issue.value = res.data.data
+  } catch {
+    issue.value = null
+  }
+})
+</script>
+
+<style scoped>
+.source-pre,
+.stack-pre {
+  background: #1d2129;
+  color: #e5eaf3;
+  padding: 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-size: 13px;
+  line-height: 1.6;
+  margin: 0;
+  max-height: 480px;
+}
+</style>
diff --git a/ops-platform/src/views/log-monitor/LogIssues.vue b/ops-platform/src/views/log-monitor/LogIssues.vue
new file mode 100644
index 0000000..9b93dd0
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogIssues.vue
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <el-menu mode="horizontal" :default-active="$route.path" router class="log-nav" style="margin-bottom: 16px">
+      <el-menu-item index="/log/overview">概览</el-menu-item>
+      <el-menu-item index="/log/issues">错误列表</el-menu-item>
+      <el-menu-item index="/log/events">事件流水</el-menu-item>
+      <el-menu-item index="/log/funnels">漏斗分析</el-menu-item>
+      <el-menu-item index="/log/rank/freq">高频排行</el-menu-item>
+      <el-menu-item index="/log/rank/risk">高危排行</el-menu-item>
+      <el-menu-item index="/log/webhooks">Webhook</el-menu-item>
+    </el-menu>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+      <h2 style="margin: 0">错误列表</h2>
+      <el-button @click="loadIssues" :loading="loading">刷新</el-button>
+    </div>
+
+    <el-card style="margin-bottom: 16px">
+      <el-form :inline="true" :model="filters" size="default">
+        <el-form-item label="类型">
+          <el-select v-model="filters.type" clearable placeholder="全部" style="width: 140px">
+            <el-option label="Crash" value="crash" />
+            <el-option label="ANR" value="anr" />
+            <el-option label="JS Error" value="js_error" />
+            <el-option label="Native Error" value="native_error" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="平台">
+          <el-select v-model="filters.platform" clearable placeholder="全部" style="width: 120px">
+            <el-option label="Android" value="android" />
+            <el-option label="iOS" value="ios" />
+            <el-option label="HarmonyOS" value="harmony" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="filters.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始"
+            end-placeholder="结束"
+            value-format="YYYY-MM-DD"
+            style="width: 260px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="loadIssues">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-table :data="issues" v-loading="loading" border stripe>
+      <el-table-column prop="title" label="标题" min-width="260" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-button link type="primary" @click="$router.push(`/log/issues/${row.id}`)">
+            {{ row.title }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="类型" width="120">
+        <template #default="{ row }">
+          <el-tag size="small" :type="typeTag(row.type)">{{ row.type }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="count" label="次数" width="100" align="right" sortable />
+      <el-table-column prop="affectedUsers" label="影响用户" width="110" align="right" sortable />
+      <el-table-column prop="platform" label="平台" width="100" />
+      <el-table-column prop="lastSeenAt" label="最后出现" width="170">
+        <template #default="{ row }">{{ formatTime(row.lastSeenAt) }}</template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      style="margin-top: 16px"
+      v-model:current-page="page"
+      :page-size="size"
+      :total="total"
+      layout="total, prev, pager, next"
+      @current-change="loadIssues"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { logApi, type LogIssueSummary } from '@/api/log'
+import { formatTime } from '@/utils/date'
+
+const issues = ref<LogIssueSummary[]>([])
+const loading = ref(false)
+const page = ref(1)
+const size = ref(20)
+const total = ref(0)
+
+const filters = reactive({
+  type: '',
+  platform: '',
+  dateRange: null as [string, string] | null,
+})
+
+function typeTag(t: string): '' | 'success' | 'warning' | 'info' | 'danger' {
+  if (t === 'crash') return 'danger'
+  if (t === 'anr') return 'warning'
+  if (t === 'js_error') return ''
+  return 'info'
+}
+
+async function loadIssues() {
+  loading.value = true
+  try {
+    const res = await logApi.listIssues({
+      type: filters.type || undefined,
+      platform: filters.platform || undefined,
+      startDate: filters.dateRange?.[0] || undefined,
+      endDate: filters.dateRange?.[1] || undefined,
+      page: page.value - 1,
+      size,
+    })
+    const data = res.data.data
+    issues.value = data.content ?? []
+    total.value = data.total ?? 0
+  } catch {
+    issues.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadIssues)
+</script>
diff --git a/ops-platform/src/views/log-monitor/LogOverview.vue b/ops-platform/src/views/log-monitor/LogOverview.vue
new file mode 100644
index 0000000..b210d92
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogOverview.vue
@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+      <h2 style="margin: 0">日志监控概览</h2>
+    </div>
+
+    <el-menu mode="horizontal" :default-active="$route.path" router class="log-nav">
+      <el-menu-item index="/log/overview">概览</el-menu-item>
+      <el-menu-item index="/log/issues">错误列表</el-menu-item>
+      <el-menu-item index="/log/events">事件流水</el-menu-item>
+      <el-menu-item index="/log/funnels">漏斗分析</el-menu-item>
+      <el-menu-item index="/log/rank/freq">高频排行</el-menu-item>
+      <el-menu-item index="/log/rank/risk">高危排行</el-menu-item>
+      <el-menu-item index="/log/webhooks">Webhook</el-menu-item>
+    </el-menu>
+
+    <p style="margin: 16px 0 24px; color: #606266">
+      汇总错误追踪、崩溃率与影响用户，快速判断应用健康状态。
+    </p>
+
+    <el-row :gutter="16">
+      <el-col :xs="12" :sm="6" v-for="item in stats" :key="item.label">
+        <el-card shadow="hover">
+          <el-statistic :title="item.label" :value="item.value" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16" style="margin-top: 16px">
+      <el-col :xs="24" :md="14">
+        <el-card>
+          <template #header>近 7 天崩溃率趋势</template>
+          <div ref="trendChartRef" class="chart-box" />
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :md="10">
+        <el-card>
+          <template #header>Top 5 高频错误</template>
+          <el-table :data="topIssues" size="small" stripe>
+            <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
+            <el-table-column prop="count" label="次数" width="80" align="right" />
+            <el-table-column prop="platform" label="平台" width="80" />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { logApi, type LogIssueSummary } from '@/api/log'
+import * as echarts from 'echarts'
+
+const stats = ref([
+  { label: '总 Issue 数', value: 0 },
+  { label: '今日新增', value: 0 },
+  { label: '影响用户数', value: 0 },
+  { label: '崩溃率', value: '0%' },
+])
+
+const topIssues = ref<LogIssueSummary[]>([])
+const trendChartRef = ref<HTMLDivElement>()
+let trendChart: echarts.ECharts | null = null
+
+function initTrendChart(dailyTrend: Array<{ date: string; crashRate: number }>) {
+  if (!trendChartRef.value) return
+  const dates = dailyTrend.map((d) => {
+    const parts = d.date.split('-')
+    return `${parseInt(parts[1])}/${parseInt(parts[2])}`
+  })
+  const values = dailyTrend.map((d) => d.crashRate)
+  trendChart = echarts.init(trendChartRef.value)
+  trendChart.setOption({
+    tooltip: { trigger: 'axis', formatter: '{b}<br/>崩溃率: {c}%' },
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    xAxis: { type: 'category', data: dates, boundaryGap: false },
+    yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } },
+    series: [
+      {
+        name: '崩溃率',
+        type: 'line',
+        smooth: true,
+        data: values,
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(245,108,108,0.3)' },
+            { offset: 1, color: 'rgba(245,108,108,0.05)' },
+          ]),
+        },
+        itemStyle: { color: '#f56c6c' },
+      },
+    ],
+  })
+}
+
+function handleResize() {
+  trendChart?.resize()
+}
+
+onMounted(async () => {
+  try {
+    const res = await logApi.getOverview()
+    const d = res.data.data
+    stats.value[0].value = d.totalIssues ?? 0
+    stats.value[1].value = d.todayNew ?? 0
+    stats.value[2].value = d.affectedUsers ?? 0
+    stats.value[3].value = `${((d.crashRate ?? 0) * 100).toFixed(2)}%`
+    topIssues.value = (d.topIssues ?? []).slice(0, 5)
+    initTrendChart(d.dailyTrend ?? [])
+  } catch {
+    initTrendChart([])
+  }
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+  trendChart?.dispose()
+})
+</script>
+
+<style scoped>
+.chart-box {
+  width: 100%;
+  height: 320px;
+}
+</style>
diff --git a/ops-platform/src/views/log-monitor/LogRankFreq.vue b/ops-platform/src/views/log-monitor/LogRankFreq.vue
new file mode 100644
index 0000000..dd0499d
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogRankFreq.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <el-menu mode="horizontal" :default-active="$route.path" router class="log-nav" style="margin-bottom: 16px">
+      <el-menu-item index="/log/overview">概览</el-menu-item>
+      <el-menu-item index="/log/issues">错误列表</el-menu-item>
+      <el-menu-item index="/log/events">事件流水</el-menu-item>
+      <el-menu-item index="/log/funnels">漏斗分析</el-menu-item>
+      <el-menu-item index="/log/rank/freq">高频排行</el-menu-item>
+      <el-menu-item index="/log/rank/risk">高危排行</el-menu-item>
+      <el-menu-item index="/log/webhooks">Webhook</el-menu-item>
+    </el-menu>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+      <h2 style="margin: 0">高频错误排行</h2>
+      <el-button @click="loadRanking" :loading="loading">刷新</el-button>
+    </div>
+
+    <el-table :data="ranking" v-loading="loading" border stripe>
+      <el-table-column prop="rank" label="排名" width="70" align="center">
+        <template #default="{ row }">
+          <el-tag :type="row.rank <= 3 ? 'danger' : 'info'" effect="dark" size="small" round>
+            {{ row.rank }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="错误标题" min-width="300" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-button link type="primary" @click="$router.push(`/log/issues/${row.id}`)">
+            {{ row.title }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="类型" width="120">
+        <template #default="{ row }">
+          <el-tag size="small" :type="typeTag(row.type)">{{ row.type }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="count" label="发生次数" width="120" align="right" sortable />
+      <el-table-column prop="affectedUsers" label="影响用户" width="120" align="right" sortable />
+      <el-table-column prop="platform" label="平台" width="100" />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { logApi, type LogRankingItem } from '@/api/log'
+
+const ranking = ref<LogRankingItem[]>([])
+const loading = ref(false)
+
+function typeTag(t: string): '' | 'success' | 'warning' | 'info' | 'danger' {
+  if (t === 'crash') return 'danger'
+  if (t === 'anr') return 'warning'
+  if (t === 'js_error') return ''
+  return 'info'
+}
+
+async function loadRanking() {
+  loading.value = true
+  try {
+    const res = await logApi.getFrequencyRanking(20)
+    ranking.value = res.data.data ?? []
+  } catch {
+    ranking.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadRanking)
+</script>
diff --git a/ops-platform/src/views/log-monitor/LogRankRisk.vue b/ops-platform/src/views/log-monitor/LogRankRisk.vue
new file mode 100644
index 0000000..505fd81
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogRankRisk.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <el-menu mode="horizontal" :default-active="$route.path" router class="log-nav" style="margin-bottom: 16px">
+      <el-menu-item index="/log/overview">概览</el-menu-item>
+      <el-menu-item index="/log/issues">错误列表</el-menu-item>
+      <el-menu-item index="/log/events">事件流水</el-menu-item>
+      <el-menu-item index="/log/funnels">漏斗分析</el-menu-item>
+      <el-menu-item index="/log/rank/freq">高频排行</el-menu-item>
+      <el-menu-item index="/log/rank/risk">高危排行</el-menu-item>
+      <el-menu-item index="/log/webhooks">Webhook</el-menu-item>
+    </el-menu>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+      <h2 style="margin: 0">高危错误排行</h2>
+      <el-button @click="loadRanking" :loading="loading">刷新</el-button>
+    </div>
+
+    <el-table :data="ranking" v-loading="loading" border stripe>
+      <el-table-column prop="rank" label="排名" width="70" align="center">
+        <template #default="{ row }">
+          <el-tag :type="row.rank <= 3 ? 'danger' : 'info'" effect="dark" size="small" round>
+            {{ row.rank }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="错误标题" min-width="300" show-overflow-tooltip>
+        <template #default="{ row }">
+          <el-button link type="primary" @click="$router.push(`/log/issues/${row.id}`)">
+            {{ row.title }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="类型" width="120">
+        <template #default="{ row }">
+          <el-tag size="small" :type="typeTag(row.type)">{{ row.type }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="count" label="发生次数" width="120" align="right" sortable />
+      <el-table-column prop="affectedUsers" label="影响用户" width="120" align="right" sortable />
+      <el-table-column prop="platform" label="平台" width="100" />
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { logApi, type LogRankingItem } from '@/api/log'
+
+const ranking = ref<LogRankingItem[]>([])
+const loading = ref(false)
+
+function typeTag(t: string): '' | 'success' | 'warning' | 'info' | 'danger' {
+  if (t === 'crash') return 'danger'
+  if (t === 'anr') return 'warning'
+  if (t === 'js_error') return ''
+  return 'info'
+}
+
+async function loadRanking() {
+  loading.value = true
+  try {
+    const res = await logApi.getRiskRanking(20)
+    ranking.value = res.data.data ?? []
+  } catch {
+    ranking.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(loadRanking)
+</script>
diff --git a/ops-platform/src/views/log-monitor/LogWebhooks.vue b/ops-platform/src/views/log-monitor/LogWebhooks.vue
new file mode 100644
index 0000000..d9b39d0
--- /dev/null
+++ b/ops-platform/src/views/log-monitor/LogWebhooks.vue
@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <el-menu mode="horizontal" :default-active="$route.path" router class="log-nav" style="margin-bottom: 16px">
+      <el-menu-item index="/log/overview">概览</el-menu-item>
+      <el-menu-item index="/log/issues">错误列表</el-menu-item>
+      <el-menu-item index="/log/events">事件流水</el-menu-item>
+      <el-menu-item index="/log/funnels">漏斗分析</el-menu-item>
+      <el-menu-item index="/log/rank/freq">高频排行</el-menu-item>
+      <el-menu-item index="/log/rank/risk">高危排行</el-menu-item>
+      <el-menu-item index="/log/webhooks">Webhook</el-menu-item>
+    </el-menu>
+
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
+      <h2 style="margin: 0">Webhook 配置</h2>
+      <el-button type="primary" @click="openDialog()">新增 Webhook</el-button>
+    </div>
+
+    <el-table :data="webhooks" v-loading="loading" border stripe>
+      <el-table-column prop="name" label="名称" min-width="160" />
+      <el-table-column prop="url" label="URL" min-width="280" show-overflow-tooltip />
+      <el-table-column label="订阅事件" min-width="220">
+        <template #default="{ row }">
+          <el-tag v-for="evt in row.events" :key="evt" size="small" style="margin: 2px 4px 2px 0" effect="plain">
+            {{ evt }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="enabled" label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="row.enabled ? 'success' : 'info'" size="small">
+            {{ row.enabled ? '启用' : '禁用' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="updatedAt" label="更新时间" width="170">
+        <template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
+      </el-table-column>
+      <el-table-column label="操作" width="160" fixed="right">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openDialog(row)">编辑</el-button>
+          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑 Webhook' : '新增 Webhook'" width="560px" destroy-on-close>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-width="110px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="如：飞书告警" />
+        </el-form-item>
+        <el-form-item label="URL" prop="url">
+          <el-input v-model="form.url" placeholder="https://..." />
+        </el-form-item>
+        <el-form-item label="订阅事件" prop="events">
+          <el-select v-model="form.events" multiple placeholder="选择事件类型" style="width: 100%">
+            <el-option label="issue.created" value="issue.created" />
+            <el-option label="issue.resolved" value="issue.resolved" />
+            <el-option label="issue.regressed" value="issue.regressed" />
+            <el-option label="alert.threshold" value="alert.threshold" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Secret">
+          <el-input v-model="form.secret" placeholder="可选，用于签名验证" />
+        </el-form-item>
+        <el-form-item label="启用">
+          <el-switch v-model="form.enabled" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitForm" :loading="submitLoading">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { logApi, type LogWebhook } from '@/api/log'
+import { formatTime } from '@/utils/date'
+
+const webhooks = ref<LogWebhook[]>([])
+const loading = ref(false)
+
+const dialogVisible = ref(false)
+const isEdit = ref(false)
+const formRef = ref<FormInstance>()
+const submitLoading = ref(false)
+
+const form = reactive({
+  id: '',
+  name: '',
+  url: '',
+  events: [] as string[],
+  secret: '',
+  enabled: true,
+})
+
+const formRules: FormRules = {
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  url: [
+    { required: true, message: '请输入 URL', trigger: 'blur' },
+    { type: 'url', message: '请输入有效的 URL', trigger: 'blur' },
+  ],
+  events: [{ type: 'array', required: true, message: '请选择至少一个事件', trigger: 'change' }],
+}
+
+async function loadWebhooks() {
+  loading.value = true
+  try {
+    const res = await logApi.listWebhooks()
+    webhooks.value = res.data.data ?? []
+  } catch {
+    webhooks.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+function openDialog(row?: LogWebhook) {
+  isEdit.value = !!row
+  if (row) {
+    Object.assign(form, {
+      id: row.id,
+      name: row.name,
+      url: row.url,
+      events: [...row.events],
+      secret: row.secret ?? '',
+      enabled: row.enabled,
+    })
+  } else {
+    Object.assign(form, { id: '', name: '', url: '', events: [], secret: '', enabled: true })
+  }
+  dialogVisible.value = true
+}
+
+async function submitForm() {
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid) return
+  submitLoading.value = true
+  try {
+    const payload = {
+      name: form.name,
+      url: form.url,
+      events: form.events,
+      secret: form.secret || undefined,
+      enabled: form.enabled,
+    }
+    if (isEdit.value && form.id) {
+      await logApi.updateWebhook(form.id, payload)
+    } else {
+      await logApi.createWebhook(payload)
+    }
+    ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
+    dialogVisible.value = false
+    loadWebhooks()
+  } catch {
+    ElMessage.error('操作失败')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+async function handleDelete(row: LogWebhook) {
+  try {
+    await ElMessageBox.confirm(`确定删除 Webhook「${row.name}」吗？`, '提示', { type: 'warning' })
+    await logApi.deleteWebhook(row.id)
+    ElMessage.success('删除成功')
+    loadWebhooks()
+  } catch {
+    // cancel
+  }
+}
+
+onMounted(loadWebhooks)
+</script>
diff --git a/ops-platform/vite.config.ts b/ops-platform/vite.config.ts
index 4f6d892..9b258be 100644
--- a/ops-platform/vite.config.ts
+++ b/ops-platform/vite.config.ts
@@ -36,6 +36,11 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 5174,
       proxy: {
+        '/api/log': {
+          target: 'http://127.0.0.1:9006',
+          changeOrigin: true,
+          rewrite: (path: string) => path.replace(/^\/api/, ''),
+        },
         '/api': { target: 'http://127.0.0.1:8081', changeOrigin: true },
       },
     },