feat(前端UI): 实现运维监控前端界面

- 新增帮助提示组件（HelpTooltip.vue） - 更新侧边栏添加 ops 监控菜单项 - 扩展设置视图集成 ops 配置面板 - 新增 ops 监控视图目录（dashboard, alerts, realtime, settings 等）
2026-01-09 21:00:04 +08:00
parent fc32b57798
commit 8ae75e7f6e
21 changed files with 5362 additions and 6 deletions
--- a/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import Select from '@/components/common/Select.vue'
+import OpsErrorLogTable from './OpsErrorLogTable.vue'
+import { opsAPI, type OpsErrorLog } from '@/api/admin/ops'
+
+interface Props {
+  show: boolean
+  timeRange: string
+  platform?: string
+  groupId?: number | null
+  errorType: 'request' | 'upstream'
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+  (e: 'openErrorDetail', errorId: number): void
+}>()
+
+const { t } = useI18n()
+
+const loading = ref(false)
+const rows = ref<OpsErrorLog[]>([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(50)
+
+const q = ref('')
+const statusCode = ref<number | null>(null)
+const phase = ref<string>('')
+const accountIdInput = ref<string>('')
+
+const accountId = computed<number | null>(() => {
+  const raw = String(accountIdInput.value || '').trim()
+  if (!raw) return null
+  const n = Number.parseInt(raw, 10)
+  return Number.isFinite(n) && n > 0 ? n : null
+})
+
+const modalTitle = computed(() => {
+  return props.errorType === 'upstream' ? t('admin.ops.errorDetails.upstreamErrors') : t('admin.ops.errorDetails.requestErrors')
+})
+
+const statusCodeSelectOptions = computed(() => {
+  const codes = [400, 401, 403, 404, 409, 422, 429, 500, 502, 503, 504, 529]
+  return [
+    { value: null, label: t('common.all') },
+    ...codes.map((c) => ({ value: c, label: String(c) }))
+  ]
+})
+
+const phaseSelectOptions = computed(() => {
+  const options = [
+    { value: '', label: t('common.all') },
+    { value: 'upstream', label: 'upstream' },
+    { value: 'network', label: 'network' },
+    { value: 'routing', label: 'routing' },
+    { value: 'auth', label: 'auth' },
+    { value: 'billing', label: 'billing' },
+    { value: 'concurrency', label: 'concurrency' },
+    { value: 'internal', label: 'internal' }
+  ]
+  return options
+})
+
+function close() {
+  emit('update:show', false)
+}
+
+onKeyStroke('Escape', () => {
+  if (props.show) close()
+})
+
+async function fetchErrorLogs() {
+  if (!props.show) return
+
+  loading.value = true
+  try {
+    const params: Record<string, any> = {
+      page: page.value,
+      page_size: pageSize.value,
+      time_range: props.timeRange
+    }
+
+    const platform = String(props.platform || '').trim()
+    if (platform) params.platform = platform
+    if (typeof props.groupId === 'number' && props.groupId > 0) params.group_id = props.groupId
+
+    if (q.value.trim()) params.q = q.value.trim()
+    if (typeof statusCode.value === 'number') params.status_codes = String(statusCode.value)
+    if (typeof accountId.value === 'number') params.account_id = accountId.value
+
+    const phaseVal = String(phase.value || '').trim()
+    if (phaseVal) params.phase = phaseVal
+
+    const res = await opsAPI.listErrorLogs(params)
+    rows.value = res.items || []
+    total.value = res.total || 0
+  } catch (err) {
+    console.error('[OpsErrorDetailsModal] Failed to fetch error logs', err)
+    rows.value = []
+    total.value = 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function resetFilters() {
+  q.value = ''
+  statusCode.value = null
+  phase.value = props.errorType === 'upstream' ? 'upstream' : ''
+  accountIdInput.value = ''
+  page.value = 1
+  fetchErrorLogs()
+}
+
+watch(
+  () => props.show,
+  (open) => {
+    if (!open) return
+    page.value = 1
+    pageSize.value = 50
+    resetFilters()
+  }
+)
+
+watch(
+  () => [props.timeRange, props.platform, props.groupId] as const,
+  () => {
+    if (!props.show) return
+    page.value = 1
+    fetchErrorLogs()
+  }
+)
+
+watch(
+  () => [page.value, pageSize.value] as const,
+  () => {
+    if (!props.show) return
+    fetchErrorLogs()
+  }
+)
+
+let searchTimeout: number | null = null
+watch(
+  () => q.value,
+  () => {
+    if (!props.show) return
+    if (searchTimeout) window.clearTimeout(searchTimeout)
+    searchTimeout = window.setTimeout(() => {
+      page.value = 1
+      fetchErrorLogs()
+    }, 350)
+  }
+)
+
+watch(
+  () => [statusCode.value, phase.value] as const,
+  () => {
+    if (!props.show) return
+    page.value = 1
+    fetchErrorLogs()
+  }
+)
+
+watch(
+  () => accountId.value,
+  () => {
+    if (!props.show) return
+    page.value = 1
+    fetchErrorLogs()
+  }
+)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4" @click.self="close">
+        <Transition
+          enter-active-class="transition duration-300 ease-out"
+          enter-from-class="opacity-0 scale-95"
+          enter-to-class="opacity-100 scale-100"
+          leave-active-class="transition duration-200 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-95"
+        >
+          <div v-if="show" class="relative flex max-h-[90vh] w-full max-w-7xl flex-col overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-dark-800">
+            <!-- Header -->
+            <div class="flex items-center justify-between border-b border-gray-200 px-6 py-5 dark:border-dark-700">
+              <div class="flex items-center gap-3">
+                <div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-orange-50 dark:bg-orange-900/20">
+                  <svg class="h-6 w-6 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <div>
+                  <h3 class="text-lg font-black text-gray-900 dark:text-white">{{ modalTitle }}</h3>
+                  <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                    {{ t('admin.ops.errorDetails.total') }} {{ total }}
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                class="flex h-8 w-8 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-dark-700"
+                @click="close"
+              >
+                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <!-- Filters -->
+            <div class="border-b border-gray-200 px-6 py-4 dark:border-dark-700">
+              <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
+                <div class="lg:col-span-5">
+                  <div class="relative group">
+                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+                      <svg
+                        class="h-4 w-4 text-gray-400 transition-colors group-focus-within:text-blue-500"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                      </svg>
+                    </div>
+                    <input
+                      v-model="q"
+                      type="text"
+                      class="w-full rounded-2xl border-gray-200 bg-gray-50/50 py-2 pl-10 pr-4 text-sm font-medium text-gray-700 transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:focus:bg-dark-800"
+                      :placeholder="t('admin.ops.errorDetails.searchPlaceholder')"
+                    />
+                  </div>
+                </div>
+
+                <div class="lg:col-span-2">
+                  <Select :model-value="statusCode" :options="statusCodeSelectOptions" class="w-full" @update:model-value="statusCode = $event as any" />
+                </div>
+
+                <div class="lg:col-span-2">
+                  <Select :model-value="phase" :options="phaseSelectOptions" class="w-full" @update:model-value="phase = String($event ?? '')" />
+                </div>
+
+                <div class="lg:col-span-2">
+                  <input
+                    v-model="accountIdInput"
+                    type="text"
+                    inputmode="numeric"
+                    class="input w-full text-sm"
+                    :placeholder="t('admin.ops.errorDetails.accountIdPlaceholder')"
+                  />
+                </div>
+
+                <div class="lg:col-span-1 flex items-center justify-end">
+                  <button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">
+                    {{ t('common.reset') }}
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <!-- Body -->
+            <div class="min-h-0 flex-1 overflow-y-auto px-6 py-6">
+              <OpsErrorLogTable
+                :rows="rows"
+                :total="total"
+                :loading="loading"
+                :page="page"
+                :page-size="pageSize"
+                @openErrorDetail="emit('openErrorDetail', $event)"
+                @update:page="page = $event"
+                @update:pageSize="pageSize = $event"
+              />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>