refactor: 前端构建按需化与 Mock 懒加载

移除全量 Element Plus 与全局 VChart 注册，改为按需引入样式与组件内局部图表；Mock 适配器改为按 VITE_ENABLE_MOCK 环境变量懒加载，生产默认不拦截请求；ECharts 精简为看板所需图表，各视图与 stores 同步适配。

frontend/src/views/system/HardwareView.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import VChart from 'vue-echarts'
 import PageCard from '@/components/PageCard.vue'
+import '@/plugins/echarts-hardware'
 import { getSystemInfo } from '@/api/modules/system'
 import type { GpuInfo, SystemInfo } from '@/types'
 

frontend/src/views/system/LogsView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import PageCard from '@/components/PageCard.vue'
 import { useCountdown } from '@/composables/useCountdown'
+import { usePolling } from '@/composables/usePolling'
 import {
   getLogFiles,
   getLogContent,
@@ -30,29 +31,26 @@ const fullContent = ref('')
 // 自动刷新
 const refreshInterval = ref(10)
 const { remaining, start: startCountdown, stop: stopCountdown } = useCountdown(10)
-let refreshTimer: ReturnType<typeof setInterval> | null = null
 
-const filteredContent = computed(() => {
-  if (!keyword.value.trim()) return fullContent.value
+const filteredLog = computed(() => {
+  if (!keyword.value.trim()) return { content: fullContent.value, count: 0 }
   const kw = keyword.value.toLowerCase().trim()
-  return fullContent.value
+  const lines = fullContent.value
     .split('\n')
     .filter((line) => line.toLowerCase().includes(kw))
-    .join('\n')
+  return { content: lines.join('\n'), count: lines.length }
 })
 
-const matchCount = computed(() => {
-  if (!keyword.value.trim()) return 0
-  const kw = keyword.value.toLowerCase().trim()
-  return fullContent.value.split('\n').filter((line) => line.toLowerCase().includes(kw)).length
-})
+const filteredContent = computed(() => filteredLog.value.content)
+const matchCount = computed(() => filteredLog.value.count)
 
 async function loadSysFiles() {
   try {
     sysFiles.value = (await getLogFiles(sysDate.value)) || []
     if (sysFiles.value.length > 0) {
-      sysSelected.value = sysFiles.value[0].file
-      loadSysContent()
+      const firstFile = sysFiles.value[0].file
+      if (sysSelected.value === firstFile) void loadSysContent()
+      else sysSelected.value = firstFile
     } else {
       sysContent.value = '该日期暂无日志文件'
     }
@@ -76,8 +74,9 @@ async function loadTrainFiles() {
   try {
     trainFiles.value = (await getTrainingLogFiles()) || []
     if (trainFiles.value.length > 0) {
-      trainSelected.value = trainFiles.value[0].file
-      loadTrainContent()
+      const firstFile = trainFiles.value[0].file
+      if (trainSelected.value === firstFile) void loadTrainContent()
+      else trainSelected.value = firstFile
     } else {
       trainContent.value = '暂无训练日志'
     }
@@ -97,29 +96,28 @@ async function loadTrainContent() {
   }
 }
 
-function refresh() {
+async function refresh() {
   if (activeTab.value === 'system') {
-    loadSysContent()
+    await loadSysContent()
   } else {
-    loadTrainContent()
+    await loadTrainContent()
   }
 }
 
+const { start: startPolling, stop: stopPolling } = usePolling(
+  refresh,
+  () => refreshInterval.value * 1000,
+  { immediate: false },
+)
+
 function startAutoRefresh() {
-  stopAutoRefresh()
+  stopPolling()
   if (refreshInterval.value === 0) {
     stopCountdown()
     return
   }
   startCountdown()
-  refreshTimer = setInterval(refresh, refreshInterval.value * 1000)
-}
-
-function stopAutoRefresh() {
-  if (refreshTimer) {
-    clearInterval(refreshTimer)
-    refreshTimer = null
-  }
+  startPolling()
 }
 
 watch(refreshInterval, startAutoRefresh)
@@ -135,8 +133,6 @@ onMounted(() => {
   loadSysFiles()
   startAutoRefresh()
 })
-
-onUnmounted(stopAutoRefresh)
 </script>
 
 <template>

frontend/src/views/system/TrainingLogView.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import VChart from 'vue-echarts'
 import PageCard from '@/components/PageCard.vue'
 import ModelStatusTag from '@/components/ModelStatusTag.vue'
 import TrainingTaskOverview from './training-log/TrainingTaskOverview.vue'
+import { usePolling } from '@/composables/usePolling'
+import '@/plugins/echarts-training-log'
 import { useModelsStore } from '@/stores/models'
 import { getFineTune } from '@/api/modules/fineTune'
 import { getTrainingLogFiles, getTrainingLogContent } from '@/api/modules/log'
@@ -55,7 +58,6 @@ const paramsExpanded = ref(false)
 const GPU_PREVIEW_LIMIT = 4
 const gpuExpanded = ref(false)
 
-let timer: ReturnType<typeof setInterval> | null = null
 let refreshInFlight = false
 
 /** 三个曲线的 ECharts 配置（响应式，数据变化自动重绘） */
@@ -257,14 +259,16 @@ async function refreshAll() {
   }
 }
 
-onMounted(() => {
-  modelsStore.load()
-  refreshAll()
-  timer = setInterval(refreshAll, 5000)
-})
+const isTerminalTask = () => ['completed', 'failed', 'stopped', 'cancelled'].includes(task.value?.status || '')
+const { start: startPolling, stop: stopPolling } = usePolling(async () => {
+  await refreshAll()
+  if (isTerminalTask()) stopPolling()
+}, 5000, { immediate: false })
 
-onUnmounted(() => {
-  if (timer) clearInterval(timer)
+onMounted(async () => {
+  void modelsStore.load()
+  await refreshAll()
+  if (!isTerminalTask()) startPolling()
 })
 </script>