Merge pull request #257 from Edric-Li/feat/ops-fullscreen-scrollbar

feat(ops): 添加运维监控全屏模式 & 优化滚动条

frontend/src/i18n/locales/en.ts

@@ -1943,6 +1943,9 @@ export default {
         '6h': 'Last 6 hours',
         '24h': 'Last 24 hours'
       },
+      fullscreen: {
+        enter: 'Enter Fullscreen'
+      },
       diagnosis: {
         title: 'Smart Diagnosis',
         footer: 'Automated diagnostic suggestions based on current metrics',

frontend/src/i18n/locales/zh.ts

@@ -2088,6 +2088,9 @@ export default {
         '6h': '近6小时',
         '24h': '近24小时'
       },
+      fullscreen: {
+        enter: '进入全屏'
+      },
       diagnosis: {
         title: '智能诊断',
         footer: '基于当前指标的自动诊断建议',

frontend/src/style.css

@@ -19,7 +19,22 @@
     @apply min-h-screen;
   }
 
-  /* 自定义滚动条 */
+  /* 自定义滚动条 - 默认隐藏，悬停或滚动时显示 */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  *:hover,
+  *:focus-within {
+    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+  }
+
+  .dark *:hover,
+  .dark *:focus-within {
+    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
+  }
+
   ::-webkit-scrollbar {
     @apply h-2 w-2;
   }
@@ -29,10 +44,15 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply rounded-full bg-gray-300 dark:bg-dark-600;
+    @apply rounded-full bg-transparent;
+    transition: background-color 0.2s ease;
+  }
+
+  *:hover::-webkit-scrollbar-thumb {
+    @apply bg-gray-300/50 dark:bg-dark-600/50;
   }
 
-  ::-webkit-scrollbar-thumb:hover {
+  *:hover::-webkit-scrollbar-thumb:hover {
     @apply bg-gray-400 dark:bg-dark-500;
   }
 

frontend/src/views/admin/ops/OpsDashboard.vue

 <template>
-  <AppLayout>
-    <div class="space-y-6 pb-12">
+  <component :is="isFullscreen ? 'div' : AppLayout" :class="isFullscreen ? 'flex min-h-screen flex-col justify-center bg-gray-50 dark:bg-dark-950' : ''">
+    <div :class="[isFullscreen ? 'p-4 md:p-6' : '', 'space-y-6 pb-12']">
       <div
         v-if="errorMessage"
         class="rounded-2xl bg-red-50 p-4 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400"
@@ -22,6 +22,7 @@
         :thresholds="metricThresholds"
         :auto-refresh-enabled="autoRefreshEnabled"
         :auto-refresh-countdown="autoRefreshCountdown"
+        :fullscreen="isFullscreen"
         @update:time-range="onTimeRangeChange"
         @update:platform="onPlatformChange"
         @update:group="onGroupChange"
@@ -31,6 +32,8 @@
         @open-error-details="openErrorDetails"
         @open-settings="showSettingsDialog = true"
         @open-alert-rules="showAlertRulesCard = true"
+        @enter-fullscreen="enterFullscreen"
+        @exit-fullscreen="exitFullscreen"
       />
 
       <!-- Row: Concurrency + Throughput -->
@@ -45,6 +48,7 @@
             :top-groups="throughputTrend?.top_groups ?? []"
             :loading="loadingTrend"
             :time-range="timeRange"
+            :fullscreen="isFullscreen"
             @select-platform="handleThroughputSelectPlatform"
             @select-group="handleThroughputSelectGroup"
             @open-details="handleOpenRequestDetails"
@@ -72,36 +76,37 @@
       <!-- Alert Events -->
       <OpsAlertEventsCard v-if="opsEnabled && !(loading && !hasLoadedOnce)" />
 
-      <!-- Settings Dialog -->
-      <OpsSettingsDialog :show="showSettingsDialog" @close="showSettingsDialog = false" @saved="onSettingsSaved" />
+      <!-- Settings Dialog (hidden in fullscreen mode) -->
+      <template v-if="!isFullscreen">
+        <OpsSettingsDialog :show="showSettingsDialog" @close="showSettingsDialog = false" @saved="onSettingsSaved" />
 
-      <!-- Alert Rules Dialog -->
-      <BaseDialog :show="showAlertRulesCard" :title="t('admin.ops.alertRules.title')" width="extra-wide" @close="showAlertRulesCard = false">
-        <OpsAlertRulesCard />
-      </BaseDialog>
+        <BaseDialog :show="showAlertRulesCard" :title="t('admin.ops.alertRules.title')" width="extra-wide" @close="showAlertRulesCard = false">
+          <OpsAlertRulesCard />
+        </BaseDialog>
 
-      <OpsErrorDetailsModal
-        :show="showErrorDetails"
-        :time-range="timeRange"
-        :platform="platform"
-        :group-id="groupId"
-        :error-type="errorDetailsType"
-        @update:show="showErrorDetails = $event"
-        @openErrorDetail="openError"
-      />
+        <OpsErrorDetailsModal
+          :show="showErrorDetails"
+          :time-range="timeRange"
+          :platform="platform"
+          :group-id="groupId"
+          :error-type="errorDetailsType"
+          @update:show="showErrorDetails = $event"
+          @openErrorDetail="openError"
+        />
 
-      <OpsErrorDetailModal v-model:show="showErrorModal" :error-id="selectedErrorId" />
+        <OpsErrorDetailModal v-model:show="showErrorModal" :error-id="selectedErrorId" />
 
-      <OpsRequestDetailsModal
-        v-model="showRequestDetails"
-        :time-range="timeRange"
-        :preset="requestDetailsPreset"
-        :platform="platform"
-        :group-id="groupId"
-        @openErrorDetail="openError"
-      />
+        <OpsRequestDetailsModal
+          v-model="showRequestDetails"
+          :time-range="timeRange"
+          :preset="requestDetailsPreset"
+          :platform="platform"
+          :group-id="groupId"
+          @openErrorDetail="openError"
+        />
+      </template>
     </div>
-  </AppLayout>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -163,12 +168,36 @@ const QUERY_KEYS = {
   timeRange: 'tr',
   platform: 'platform',
   groupId: 'group_id',
-  queryMode: 'mode'
+  queryMode: 'mode',
+  fullscreen: 'fullscreen'
 } as const
 
 const isApplyingRouteQuery = ref(false)
 const isSyncingRouteQuery = ref(false)
 
+// Fullscreen mode
+const isFullscreen = computed(() => {
+  const val = route.query[QUERY_KEYS.fullscreen]
+  return val === '1' || val === 'true'
+})
+
+function exitFullscreen() {
+  const nextQuery = { ...route.query }
+  delete nextQuery[QUERY_KEYS.fullscreen]
+  router.replace({ query: nextQuery })
+}
+
+function enterFullscreen() {
+  const nextQuery = { ...route.query, [QUERY_KEYS.fullscreen]: '1' }
+  router.replace({ query: nextQuery })
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && isFullscreen.value) {
+    exitFullscreen()
+  }
+}
+
 let dashboardFetchController: AbortController | null = null
 let dashboardFetchSeq = 0
 
@@ -603,6 +632,9 @@ watch(
 )
 
 onMounted(async () => {
+  // Fullscreen mode: listen for ESC key
+  window.addEventListener('keydown', handleKeydown)
+
   await adminSettingsStore.fetch()
   if (!adminSettingsStore.opsMonitoringEnabled) {
     await router.replace('/admin/settings')
@@ -637,6 +669,7 @@ async function loadThresholds() {
 }
 
 onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown)
   abortDashboardFetch()
   pauseAutoRefresh()
   pauseCountdown()

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

@@ -19,6 +19,7 @@ interface Props {
   timeRange: string
   byPlatform?: OpsThroughputPlatformBreakdownItem[]
   topGroups?: OpsThroughputGroupBreakdownItem[]
+  fullscreen?: boolean
 }
 
 const props = defineProps<Props>()
@@ -179,38 +180,40 @@ function downloadChart() {
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
         </svg>
         {{ t('admin.ops.throughputTrend') }}
-        <HelpTooltip :content="t('admin.ops.tooltips.throughputTrend')" />
+        <HelpTooltip v-if="!props.fullscreen" :content="t('admin.ops.tooltips.throughputTrend')" />
       </h3>
       <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
         <span class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-blue-500"></span>{{ t('admin.ops.qps') }}</span>
         <span class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-green-500"></span>{{ t('admin.ops.tpsK') }}</span>
-        <button
-          type="button"
-          class="ml-2 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.requestDetails.title')"
-          @click="emit('openDetails')"
-        >
-          {{ t('admin.ops.requestDetails.details') }}
-        </button>
-        <button
-          type="button"
-          class="ml-2 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.charts.resetZoomHint')"
-          @click="resetZoom"
-        >
-          {{ t('admin.ops.charts.resetZoom') }}
-        </button>
-        <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.charts.downloadChartHint')"
-          @click="downloadChart"
-        >
-          {{ t('admin.ops.charts.downloadChart') }}
-        </button>
+        <template v-if="!props.fullscreen">
+          <button
+            type="button"
+            class="ml-2 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.requestDetails.title')"
+            @click="emit('openDetails')"
+          >
+            {{ t('admin.ops.requestDetails.details') }}
+          </button>
+          <button
+            type="button"
+            class="ml-2 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.charts.resetZoomHint')"
+            @click="resetZoom"
+          >
+            {{ t('admin.ops.charts.resetZoom') }}
+          </button>
+          <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.charts.downloadChartHint')"
+            @click="downloadChart"
+          >
+            {{ t('admin.ops.charts.downloadChart') }}
+          </button>
+        </template>
       </div>
     </div>