From a39316e004baff96487423ac40093b9dabeda3df Mon Sep 17 00:00:00 2001
From: IanShaw027 <131567472+IanShaw027@users.noreply.github.com>
Date: Sun, 11 Jan 2026 19:51:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(ops):=20=E9=9B=86=E6=88=90=E8=BF=90?=
 =?UTF-8?q?=E7=BB=B4=E7=9B=91=E6=8E=A7=E8=AE=BE=E7=BD=AE=E5=AF=B9=E8=AF=9D?=
 =?UTF-8?q?=E6=A1=86=E5=88=B0=E4=BB=AA=E8=A1=A8=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在OpsDashboardHeader添加设置和警报规则按钮
- 在OpsDashboard集成OpsSettingsDialog组件
- 添加警报规则弹窗展示
- 添加高级设置API类型定义
- 支持从Header快速访问设置和规则管理

相关文件：
- frontend/src/api/admin/ops.ts
- frontend/src/views/admin/ops/types.ts
- frontend/src/views/admin/ops/OpsDashboard.vue
- frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
---
 frontend/src/api/admin/ops.ts                 | 32 +++++++++++++++++-
 frontend/src/views/admin/ops/OpsDashboard.vue | 16 +++++++++
 .../ops/components/OpsDashboardHeader.vue     | 33 +++++++++++++++++--
 frontend/src/views/admin/ops/types.ts         |  5 ++-
 4 files changed, 82 insertions(+), 4 deletions(-)

diff --git a/frontend/src/api/admin/ops.ts b/frontend/src/api/admin/ops.ts
index 3c39a32b..c0df4605 100644
--- a/frontend/src/api/admin/ops.ts
+++ b/frontend/src/api/admin/ops.ts
@@ -676,6 +676,23 @@ export interface OpsAlertRuntimeSettings {
   }
 }
 
+export interface OpsAdvancedSettings {
+  data_retention: OpsDataRetentionSettings
+  aggregation: OpsAggregationSettings
+}
+
+export interface OpsDataRetentionSettings {
+  cleanup_enabled: boolean
+  cleanup_schedule: string
+  error_log_retention_days: number
+  minute_metrics_retention_days: number
+  hourly_metrics_retention_days: number
+}
+
+export interface OpsAggregationSettings {
+  aggregation_enabled: boolean
+}
+
 export interface OpsErrorLog {
   id: number
   created_at: string
@@ -894,6 +911,17 @@ export async function updateAlertRuntimeSettings(config: OpsAlertRuntimeSettings
   return data
 }
 
+// Advanced settings (DB-backed)
+export async function getAdvancedSettings(): Promise<OpsAdvancedSettings> {
+  const { data } = await apiClient.get<OpsAdvancedSettings>('/admin/ops/advanced-settings')
+  return data
+}
+
+export async function updateAdvancedSettings(config: OpsAdvancedSettings): Promise<OpsAdvancedSettings> {
+  const { data } = await apiClient.put<OpsAdvancedSettings>('/admin/ops/advanced-settings', config)
+  return data
+}
+
 export const opsAPI = {
   getDashboardOverview,
   getThroughputTrend,
@@ -915,7 +943,9 @@ export const opsAPI = {
   getEmailNotificationConfig,
   updateEmailNotificationConfig,
   getAlertRuntimeSettings,
-  updateAlertRuntimeSettings
+  updateAlertRuntimeSettings,
+  getAdvancedSettings,
+  updateAdvancedSettings
 }
 
 export default opsAPI
diff --git a/frontend/src/views/admin/ops/OpsDashboard.vue b/frontend/src/views/admin/ops/OpsDashboard.vue
index 212717fb..e8fedc5a 100644
--- a/frontend/src/views/admin/ops/OpsDashboard.vue
+++ b/frontend/src/views/admin/ops/OpsDashboard.vue
@@ -31,6 +31,8 @@
         @refresh="fetchData"
         @open-request-details="handleOpenRequestDetails"
         @open-error-details="openErrorDetails"
+        @open-settings="showSettingsDialog = true"
+        @open-alert-rules="showAlertRulesCard = true"
       />
 
       <!-- Row: Concurrency + Throughput -->
@@ -72,6 +74,14 @@
       <!-- Alert Events -->
       <OpsAlertEventsCard v-if="opsEnabled && !(loading && !hasLoadedOnce)" />
 
+      <!-- Settings Dialog -->
+      <OpsSettingsDialog :show="showSettingsDialog" @close="showSettingsDialog = false" @saved="fetchData" />
+
+      <!-- Alert Rules Dialog -->
+      <BaseDialog :show="showAlertRulesCard" :title="t('admin.ops.alertRules.title')" width="extra-wide" @close="showAlertRulesCard = false">
+        <OpsAlertRulesCard />
+      </BaseDialog>
+
       <OpsErrorDetailsModal
         :show="showErrorDetails"
         :time-range="timeRange"
@@ -102,6 +112,7 @@ import { useDebounceFn } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import AppLayout from '@/components/layout/AppLayout.vue'
+import BaseDialog from '@/components/common/BaseDialog.vue'
 import {
   opsAPI,
   OPS_WS_CLOSE_CODES,
@@ -124,6 +135,8 @@ import OpsLatencyChart from './components/OpsLatencyChart.vue'
 import OpsThroughputTrendChart from './components/OpsThroughputTrendChart.vue'
 import OpsAlertEventsCard from './components/OpsAlertEventsCard.vue'
 import OpsRequestDetailsModal, { type OpsRequestDetailsPreset } from './components/OpsRequestDetailsModal.vue'
+import OpsSettingsDialog from './components/OpsSettingsDialog.vue'
+import OpsAlertRulesCard from './components/OpsAlertRulesCard.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -327,6 +340,9 @@ const requestDetailsPreset = ref<OpsRequestDetailsPreset>({
   sort: 'created_at_desc'
 })
 
+const showSettingsDialog = ref(false)
+const showAlertRulesCard = ref(false)
+
 function handleThroughputSelectPlatform(nextPlatform: string) {
   platform.value = nextPlatform || ''
   groupId.value = null
diff --git a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
index 312642c3..23609a06 100644
--- a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
+++ b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
@@ -34,6 +34,8 @@ interface Emits {
   (e: 'refresh'): void
   (e: 'openRequestDetails', preset?: OpsRequestDetailsPreset): void
   (e: 'openErrorDetails', kind: 'request' | 'upstream'): void
+  (e: 'openSettings'): void
+  (e: 'openAlertRules'): void
 }
 
 const props = defineProps<Props>()
@@ -723,6 +725,33 @@ function openJobsDetails() {
             />
           </svg>
         </button>
+
+        <div class="mx-1 hidden h-4 w-[1px] bg-gray-200 dark:bg-dark-700 sm:block"></div>
+
+        <button
+          type="button"
+          class="flex h-8 items-center gap-1.5 rounded-lg bg-blue-100 px-3 text-xs font-bold text-blue-700 transition-colors hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50"
+          :title="t('admin.ops.alertRules.title')"
+          @click="emit('openAlertRules')"
+        >
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
+          </svg>
+          <span class="hidden sm:inline">{{ t('admin.ops.alertRules.manage') }}</span>
+        </button>
+
+        <button
+          type="button"
+          class="flex h-8 items-center gap-1.5 rounded-lg bg-gray-100 px-3 text-xs font-bold text-gray-700 transition-colors hover:bg-gray-200 dark:bg-dark-700 dark:text-gray-300 dark:hover:bg-dark-600"
+          :title="t('admin.ops.settings.title')"
+          @click="emit('openSettings')"
+        >
+          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          <span class="hidden sm:inline">{{ t('common.settings') }}</span>
+        </button>
       </div>
     </div>
 
@@ -955,11 +984,11 @@ function openJobsDetails() {
           </div>
           <div class="mt-2 space-y-2 text-xs">
             <div class="flex justify-between">
-              <span class="text-gray-500">请求数:</span>
+              <span class="text-gray-500">{{ t('admin.ops.requests') }}:</span>
               <span class="font-bold text-gray-900 dark:text-white">{{ totalRequestsLabel }}</span>
             </div>
             <div class="flex justify-between">
-              <span class="text-gray-500">Token:</span>
+              <span class="text-gray-500">{{ t('admin.ops.tokens') }}:</span>
               <span class="font-bold text-gray-900 dark:text-white">{{ totalTokensLabel }}</span>
             </div>
             <div class="flex justify-between">
diff --git a/frontend/src/views/admin/ops/types.ts b/frontend/src/views/admin/ops/types.ts
index 08830542..45ba031f 100644
--- a/frontend/src/views/admin/ops/types.ts
+++ b/frontend/src/views/admin/ops/types.ts
@@ -13,5 +13,8 @@ export type {
   Operator,
   EmailNotificationConfig,
   OpsDistributedLockSettings,
-  OpsAlertRuntimeSettings
+  OpsAlertRuntimeSettings,
+  OpsAdvancedSettings,
+  OpsDataRetentionSettings,
+  OpsAggregationSettings
 } from '@/api/admin/ops'