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

- 新增帮助提示组件（HelpTooltip.vue）
- 更新侧边栏添加 ops 监控菜单项
- 扩展设置视图集成 ops 配置面板
- 新增 ops 监控视图目录（dashboard, alerts, realtime, settings 等）

frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Chart as ChartJS, ArcElement, Legend, Tooltip } from 'chart.js'
+import { Doughnut } from 'vue-chartjs'
+import type { OpsErrorDistributionResponse } from '@/api/admin/ops'
+import type { ChartState } from '../types'
+import HelpTooltip from '@/components/common/HelpTooltip.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+interface Props {
+  data: OpsErrorDistributionResponse | null
+  loading: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'openDetails'): void
+}>()
+const { t } = useI18n()
+
+const isDarkMode = computed(() => document.documentElement.classList.contains('dark'))
+const colors = computed(() => ({
+  blue: '#3b82f6',
+  red: '#ef4444',
+  orange: '#f59e0b',
+  gray: '#9ca3af',
+  text: isDarkMode.value ? '#9ca3af' : '#6b7280'
+}))
+
+const hasData = computed(() => (props.data?.total ?? 0) > 0)
+
+const state = computed<ChartState>(() => {
+  if (hasData.value) return 'ready'
+  if (props.loading) return 'loading'
+  return 'empty'
+})
+
+interface ErrorCategory {
+  label: string
+  count: number
+  color: string
+}
+
+const categories = computed<ErrorCategory[]>(() => {
+  if (!props.data) return []
+
+  let upstream = 0 // 502, 503, 504
+  let client = 0 // 4xx
+  let system = 0 // 500
+  let other = 0
+
+  for (const item of props.data.items || []) {
+    const code = Number(item.status_code || 0)
+    const count = Number(item.total || 0)
+    if (!Number.isFinite(code) || !Number.isFinite(count)) continue
+
+    if ([502, 503, 504].includes(code)) upstream += count
+    else if (code >= 400 && code < 500) client += count
+    else if (code === 500) system += count
+    else other += count
+  }
+
+  const out: ErrorCategory[] = []
+  if (upstream > 0) out.push({ label: t('admin.ops.upstream'), count: upstream, color: colors.value.orange })
+  if (client > 0) out.push({ label: t('admin.ops.client'), count: client, color: colors.value.blue })
+  if (system > 0) out.push({ label: t('admin.ops.system'), count: system, color: colors.value.red })
+  if (other > 0) out.push({ label: t('admin.ops.other'), count: other, color: colors.value.gray })
+  return out
+})
+
+const topReason = computed(() => {
+  if (categories.value.length === 0) return null
+  return categories.value.reduce((prev, cur) => (cur.count > prev.count ? cur : prev))
+})
+
+const chartData = computed(() => {
+  if (!hasData.value || categories.value.length === 0) return null
+  return {
+    labels: categories.value.map((c) => c.label),
+    datasets: [
+      {
+        data: categories.value.map((c) => c.count),
+        backgroundColor: categories.value.map((c) => c.color),
+        borderWidth: 0
+      }
+    ]
+  }
+})
+
+const options = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      backgroundColor: isDarkMode.value ? '#1f2937' : '#ffffff',
+      titleColor: isDarkMode.value ? '#f3f4f6' : '#111827',
+      bodyColor: isDarkMode.value ? '#d1d5db' : '#4b5563'
+    }
+  }
+}))
+</script>
+
+<template>
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+    <div class="mb-4 flex items-center justify-between">
+      <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
+        <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+        {{ t('admin.ops.errorDistribution') }}
+        <HelpTooltip :content="t('admin.ops.tooltips.errorDistribution')" />
+      </h3>
+      <button
+        type="button"
+        class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-2 py-1 text-[11px] font-semibold text-gray-600 hover:bg-gray-50 disabled:opacity-50 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:hover:bg-dark-800"
+        :disabled="state !== 'ready'"
+        :title="t('admin.ops.errorTrend')"
+        @click="emit('openDetails')"
+      >
+        {{ t('admin.ops.requestDetails.details') }}
+      </button>
+    </div>
+
+    <div class="relative min-h-0 flex-1">
+      <div v-if="state === 'ready' && chartData" class="flex h-full flex-col">
+        <div class="flex-1">
+          <Doughnut :data="chartData" :options="{ ...options, cutout: '65%' }" />
+        </div>
+        <div class="mt-4 flex flex-col items-center gap-2">
+          <div v-if="topReason" class="text-xs font-bold text-gray-900 dark:text-white">
+            {{ t('admin.ops.top') }}: <span :style="{ color: topReason.color }">{{ topReason.label }}</span>
+          </div>
+          <div class="flex flex-wrap justify-center gap-3">
+            <div v-for="item in categories" :key="item.label" class="flex items-center gap-1.5 text-xs">
+              <span class="h-2 w-2 rounded-full" :style="{ backgroundColor: item.color }"></span>
+              <span class="text-gray-500 dark:text-gray-400">{{ item.count }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="flex h-full items-center justify-center">
+        <div v-if="state === 'loading'" class="animate-pulse text-sm text-gray-400">{{ t('common.loading') }}</div>
+        <EmptyState v-else :title="t('common.noData')" :description="t('admin.ops.charts.emptyError')" />
+      </div>
+    </div>
+  </div>
+</template>