revert: 还原日志监控页面（Bug收集服务改由租户平台管理）
Co-Authored-By: Claude <noreply@anthropic.com>
这个提交包含在：
XuqmGroup
父节点
f6b29bac57
当前提交
1ad3cc481d
@ -1,144 +0,0 @@
|
|||||||
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}`),
|
|
||||||
}
|
|
||||||
@ -20,14 +20,6 @@ const router = createRouter({
|
|||||||
{ path: 'operation-logs', component: () => import('@/views/logs/OperationLogView.vue') },
|
{ path: 'operation-logs', component: () => import('@/views/logs/OperationLogView.vue') },
|
||||||
{ path: 'risk-control', component: () => import('@/views/risk/RiskControlView.vue') },
|
{ path: 'risk-control', component: () => import('@/views/risk/RiskControlView.vue') },
|
||||||
{ path: 'system-logs', component: () => import('@/views/system/ServerLogsView.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') },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@ -66,7 +66,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { Avatar, Bell, Menu, Monitor, TrendCharts, Grid, Document, Warning, Promotion, DataLine } from '@element-plus/icons-vue'
|
import { Avatar, Bell, Menu, Monitor, TrendCharts, Grid, Document, Warning, Promotion } from '@element-plus/icons-vue'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const isMobile = ref(false)
|
const isMobile = ref(false)
|
||||||
@ -78,7 +78,6 @@ const navItems = computed(() => [
|
|||||||
{ path: '/service-requests', label: '服务开通审核', icon: Bell },
|
{ path: '/service-requests', label: '服务开通审核', icon: Bell },
|
||||||
{ path: '/apps', label: '应用管理', icon: Grid },
|
{ path: '/apps', label: '应用管理', icon: Grid },
|
||||||
{ path: '/push', label: 'Push 诊断', icon: Promotion },
|
{ path: '/push', label: 'Push 诊断', icon: Promotion },
|
||||||
{ path: '/log/overview', label: '日志监控', icon: DataLine },
|
|
||||||
{ path: '/operation-logs', label: '操作日志', icon: Document },
|
{ path: '/operation-logs', label: '操作日志', icon: Document },
|
||||||
{ path: '/system-logs', label: '服务日志', icon: Monitor },
|
{ path: '/system-logs', label: '服务日志', icon: Monitor },
|
||||||
{ path: '/risk-control', label: '风控配置', icon: Warning },
|
{ path: '/risk-control', label: '风控配置', icon: Warning },
|
||||||
|
|||||||
@ -1,111 +0,0 @@
|
|||||||
<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: size.value,
|
|
||||||
})
|
|
||||||
const data = res.data.data
|
|
||||||
events.value = data.content ?? []
|
|
||||||
total.value = data.total ?? 0
|
|
||||||
} catch {
|
|
||||||
events.value = []
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(loadEvents)
|
|
||||||
</script>
|
|
||||||
@ -1,151 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<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: size.value,
|
|
||||||
})
|
|
||||||
const data = res.data.data
|
|
||||||
issues.value = data.content ?? []
|
|
||||||
total.value = data.total ?? 0
|
|
||||||
} catch {
|
|
||||||
issues.value = []
|
|
||||||
} finally {
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(loadIssues)
|
|
||||||
</script>
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,178 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -36,11 +36,6 @@ export default defineConfig(({ mode }) => {
|
|||||||
server: {
|
server: {
|
||||||
port: 5174,
|
port: 5174,
|
||||||
proxy: {
|
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 },
|
'/api': { target: 'http://127.0.0.1:8081', changeOrigin: true },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
正在加载...
在新工单中引用
屏蔽一个用户
