From c7f4a649dfa9322179e9e9d75196cba0dc6d8f86 Mon Sep 17 00:00:00 2001
From: Wang Lvyuan <74089601+LvyuanW@users.noreply.github.com>
Date: Fri, 27 Mar 2026 13:54:59 +0800
Subject: [PATCH] fix(admin): use custom select for ops log filters

---
 .../ops/components/OpsSystemLogTable.vue      | 63 +++++++++++--------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/admin/ops/components/OpsSystemLogTable.vue b/frontend/src/views/admin/ops/components/OpsSystemLogTable.vue
index d2aeb3ca..bfc9397d 100644
--- a/frontend/src/views/admin/ops/components/OpsSystemLogTable.vue
+++ b/frontend/src/views/admin/ops/components/OpsSystemLogTable.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { opsAPI, type OpsRuntimeLogConfig, type OpsSystemLog, type OpsSystemLogSinkHealth } from '@/api/admin/ops'
 import Pagination from '@/components/common/Pagination.vue'
+import Select from '@/components/common/Select.vue'
 import { useAppStore } from '@/stores'
 
 const appStore = useAppStore()
@@ -56,6 +57,37 @@ const filters = reactive({
   q: ''
 })
 
+const runtimeLevelOptions = [
+  { value: 'debug', label: 'debug' },
+  { value: 'info', label: 'info' },
+  { value: 'warn', label: 'warn' },
+  { value: 'error', label: 'error' }
+]
+
+const stacktraceLevelOptions = [
+  { value: 'none', label: 'none' },
+  { value: 'error', label: 'error' },
+  { value: 'fatal', label: 'fatal' }
+]
+
+const timeRangeOptions = [
+  { value: '5m', label: '5m' },
+  { value: '30m', label: '30m' },
+  { value: '1h', label: '1h' },
+  { value: '6h', label: '6h' },
+  { value: '24h', label: '24h' },
+  { value: '7d', label: '7d' },
+  { value: '30d', label: '30d' }
+]
+
+const filterLevelOptions = [
+  { value: '', label: '全部' },
+  { value: 'debug', label: 'debug' },
+  { value: 'info', label: 'info' },
+  { value: 'warn', label: 'warn' },
+  { value: 'error', label: 'error' }
+]
+
 const levelBadgeClass = (level: string) => {
   const v = String(level || '').toLowerCase()
   if (v === 'error' || v === 'fatal') return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
@@ -347,20 +379,11 @@ onMounted(async () => {
       <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-6">
         <label class="text-xs text-gray-600 dark:text-gray-300">
           级别
-          <select v-model="runtimeConfig.level" class="input mt-1">
-            <option value="debug">debug</option>
-            <option value="info">info</option>
-            <option value="warn">warn</option>
-            <option value="error">error</option>
-          </select>
+          <Select v-model="runtimeConfig.level" class="mt-1" :options="runtimeLevelOptions" />
         </label>
         <label class="text-xs text-gray-600 dark:text-gray-300">
           堆栈阈值
-          <select v-model="runtimeConfig.stacktrace_level" class="input mt-1">
-            <option value="none">none</option>
-            <option value="error">error</option>
-            <option value="fatal">fatal</option>
-          </select>
+          <Select v-model="runtimeConfig.stacktrace_level" class="mt-1" :options="stacktraceLevelOptions" />
         </label>
         <label class="text-xs text-gray-600 dark:text-gray-300">
           采样初始
@@ -403,15 +426,7 @@ onMounted(async () => {
     <div class="mb-4 grid grid-cols-1 gap-3 md:grid-cols-5">
       <label class="text-xs text-gray-600 dark:text-gray-300">
         时间范围
-        <select v-model="filters.time_range" class="input mt-1">
-          <option value="5m">5m</option>
-          <option value="30m">30m</option>
-          <option value="1h">1h</option>
-          <option value="6h">6h</option>
-          <option value="24h">24h</option>
-          <option value="7d">7d</option>
-          <option value="30d">30d</option>
-        </select>
+        <Select v-model="filters.time_range" class="mt-1" :options="timeRangeOptions" />
       </label>
       <label class="text-xs text-gray-600 dark:text-gray-300">
         开始时间（可选）
@@ -423,13 +438,7 @@ onMounted(async () => {
       </label>
       <label class="text-xs text-gray-600 dark:text-gray-300">
         级别
-        <select v-model="filters.level" class="input mt-1">
-          <option value="">全部</option>
-          <option value="debug">debug</option>
-          <option value="info">info</option>
-          <option value="warn">warn</option>
-          <option value="error">error</option>
-        </select>
+        <Select v-model="filters.level" class="mt-1" :options="filterLevelOptions" />
       </label>
       <label class="text-xs text-gray-600 dark:text-gray-300">
         组件