refactor(web): 重构前端UI主题为深色科技风

1. 整体替换网站配色为深色深蓝主题，使用#0F172A作为主背景色 2. 引入Fira Code和Fira Sans字体提升排版质感 3. 重写头部、卡片、表单等组件的样式，适配深色主题 4. 添加全局滚动条样式优化和选中文字样式 5. 移除不再需要的setup-paddlepaddle.sh脚本文件 6. 优化Home页面的标签页样式和交互逻辑
2026-05-22 17:57:39 +08:00
parent a16e684e46
commit d01698dfcb
35 changed files with 4129 additions and 455 deletions
--- a/apps/web/src/components/VideoDetection.vue
+++ b/apps/web/src/components/VideoDetection.vue
@@ -2,108 +2,13 @@
  <div class="video-detection-container">
    <!-- 左侧配置面板 -->
    <div class="left-panel" :style="{ width: leftPanelWidth + 'px' }">
-      <el-card class="config-card" shadow="hover">
-        <template #header>
-          <div class="card-header">
-            <el-icon class="header-icon"><Setting /></el-icon>
-            <span>视频检测配置</span>
-          </div>
-        </template>
-
-        <el-form label-position="top" class="config-form">
-          <el-form-item label="选择模型">
-            <el-select
-              v-model="config.model"
-              placeholder="选择检测模型"
-              class="full-width"
-              @change="updateCameraConfig"
-            >
-              <el-option
-                v-for="model in models"
-                :key="model.id"
-                :label="model.name"
-                :value="model.id"
-              >
-                <span>{{ model.name }}</span>
-                <span class="model-size">{{ model.size }}</span>
-              </el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item>
-            <template #label>
-              <span>置信度阈值</span>
-              <el-tooltip placement="top" :show-after="200">
-                <template #content>
-                  <div style="max-width: 300px; line-height: 1.6;">
-                    <p><strong>置信度是什么？</strong></p>
-                    <p>表示模型对检测结果的"确定程度"，范围 0-1</p>
-                    <ul style="margin: 8px 0; padding-left: 16px;">
-                      <li>≥0.8：高置信度（绿色）- 模型非常确定</li>
-                      <li>0.6-0.8：中等置信度（黄色）- 模型比较确定</li>
-                      <li>&lt;0.6：低置信度（红色）- 模型不太确定</li>
-                    </ul>
-                    <p><strong>阈值作用：</strong></p>
-                    <p>低于此值的检测结果会被过滤掉</p>
-                    <p>建议：0.3-0.5（火灾检测可适当降低）</p>
-                  </div>
-                </template>
-                <el-icon class="help-icon"><QuestionFilled /></el-icon>
-              </el-tooltip>
-            </template>
-            <el-slider
-              v-model="config.confidence"
-              :min="0.1"
-              :max="1.0"
-              :step="0.05"
-              :format-tooltip="formatConfidence"
-              @change="updateCameraConfig"
-            />
-            <div class="slider-value">{{ config.confidence.toFixed(2) }}</div>
-          </el-form-item>
-
-          <el-form-item>
-            <template #label>
-              <span>IOU阈值</span>
-              <el-tooltip placement="top" :show-after="200">
-                <template #content>
-                  <div style="max-width: 320px; line-height: 1.6;">
-                    <p><strong>IOU是什么？</strong></p>
-                    <p>交并比(Intersection Over Union)，衡量两个检测框的重叠程度</p>
-                    <p style="margin: 8px 0;"><strong>计算公式：</strong></p>
-                    <p style="background: #f5f5f5; padding: 4px 8px; border-radius: 4px; font-family: monospace;">IOU = 交集面积 / 并集面积</p>
-                    <p style="margin: 8px 0;"><strong>阈值作用：</strong></p>
-                    <p>用于NMS去重，IOU超过此值的框被认为是重复检测</p>
-                    <ul style="margin: 8px 0; padding-left: 16px;">
-                      <li>高阈值(0.7-0.9)：保留更多框，适合密集场景</li>
-                      <li>中阈值(0.45-0.6)：平衡，适合一般场景</li>
-                      <li>低阈值(0.1-0.3)：结果更精简，适合稀疏场景</li>
-                    </ul>
-                    <p><strong>建议：0.45-0.6</strong></p>
-                  </div>
-                </template>
-                <el-icon class="help-icon"><QuestionFilled /></el-icon>
-              </el-tooltip>
-            </template>
-            <el-slider
-              v-model="config.iou"
-              :min="0.1"
-              :max="0.9"
-              :step="0.05"
-              :format-tooltip="formatIOU"
-              @change="updateCameraConfig"
-            />
-            <div class="slider-value">{{ config.iou.toFixed(2) }}</div>
-          </el-form-item>
-
-          <!-- 算法配置（仅对人员检测模型显示） -->
-          <AlgorithmConfig 
-            v-model="config.algorithmConfig" 
-            @change="onAlgorithmChange"
-            :model-id="config.model"
-          />
-        </el-form>
-      </el-card>
+      <DetectionConfig
+        :models="models"
+        :default-type="'video'"
+        :default-model="config.model"
+        @type-change="onTypeChange"
+        @config-change="onConfigChange"
+      />
    </div>

    <!-- 拖拽调整条 -->
@@ -300,21 +205,19 @@
 </template>

 <script setup>
-import { ref, computed, onUnmounted } from 'vue'
+import { ref, computed, onUnmounted, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import {
  VideoCamera,
-  Setting,
  VideoPlay,
  VideoPause,
  View,
  DataLine,
  List,
-  QuestionFilled,
  Timer,
  Delete
 } from '@element-plus/icons-vue'
-import AlgorithmConfig from './AlgorithmConfig.vue'
+import DetectionConfig from './DetectionConfig.vue'

 const props = defineProps({
  models: {
@@ -323,6 +226,8 @@ const props = defineProps({
  }
 })

+const emit = defineEmits(['type-change'])
+
 const config = ref({
  model: props.models.length > 0 ? props.models[0].id : 'fire_detection',
  confidence: 0.5,
@@ -330,6 +235,19 @@ const config = ref({
  algorithmConfig: {}
 })

+const onTypeChange = (type) => {
+  emit('type-change', type)
+}
+
+const onConfigChange = (newConfig) => {
+  config.value = { ...newConfig }
+  
+  // 如果摄像头已连接，实时更新配置
+  if (websocket.value && cameraConnected.value) {
+    updateCameraConfig()
+  }
+}
+
 // 可拖拽调整宽度相关
 const leftPanelWidth = ref(320)
 const isResizing = ref(false)
@@ -405,14 +323,6 @@ const clearLogs = () => {
  ElMessage.success('日志已清空')
 }

-const formatConfidence = (value) => {
-  return `置信度: ${value.toFixed(2)}`
-}
-
-const formatIOU = (value) => {
-  return `IOU: ${value.toFixed(2)}`
-}
-
 const toggleCamera = async () => {
  if (cameraConnected.value) {
    stopCamera()
@@ -519,14 +429,6 @@ const updateCameraConfig = () => {
  }
 }

-const onAlgorithmChange = (algoConfig) => {
-  config.value.algorithmConfig = algoConfig
-  // 如果摄像头已连接，实时更新配置
-  if (websocket.value && cameraConnected.value) {
-    updateCameraConfig()
-  }
-}
-
 const getConfidenceType = (confidence) => {
  if (!confidence && confidence !== 0) return 'info'
  if (confidence >= 0.8) return 'success'
@@ -552,6 +454,7 @@ onUnmounted(() => {
  width: 100%;
  height: calc(100vh - 100px);
  gap: 0;
+  background: #0F172A;
 }

 .left-panel {
@@ -578,25 +481,25 @@ onUnmounted(() => {
 }

 .resize-handle:hover {
-  background: #d0d0d0;
+  background: #334155;
 }

 .resize-handle.resizing {
-  background: #409eff;
+  background: #22C55E;
  cursor: col-resize;
 }

 .resize-indicator {
  width: 3px;
  height: 40px;
-  background: #c0c4cc;
+  background: #475569;
  border-radius: 2px;
  transition: background 0.2s;
 }

 .resize-handle:hover .resize-indicator,
 .resize-handle.resizing .resize-indicator {
-  background: #409eff;
+  background: #22C55E;
 }

 .right-panel {
@@ -607,16 +510,24 @@ onUnmounted(() => {

 /* 卡片通用样式 */
 :deep(.el-card) {
-  border-radius: 12px;
-  border: none;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(30, 41, 59, 0.6);
+  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+:deep(.el-card:hover) {
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+  border-color: rgba(34, 197, 94, 0.2);
 }

 :deep(.el-card__header) {
  padding: 16px 20px;
-  border-bottom: 1px solid #e4e7ed;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 12px 12px 0 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(51, 65, 85, 0.8) 100%);
+  border-radius: 16px 16px 0 0;
 }

 /* 卡片头部样式 */
@@ -626,7 +537,8 @@ onUnmounted(() => {
  justify-content: space-between;
  font-weight: 600;
  font-size: 16px;
-  color: #fff;
+  color: #F8FAFC;
+  font-family: 'Fira Sans', sans-serif;
 }

 .header-left {
@@ -637,6 +549,7 @@ onUnmounted(() => {

 .header-icon {
  font-size: 18px;
+  color: #22C55E;
 }

 /* 配置卡片样式 */
@@ -657,8 +570,9 @@ onUnmounted(() => {
 .config-form :deep(.el-form-item__label) {
  font-weight: 500;
  font-size: 14px;
-  color: #303133;
+  color: #E2E8F0;
  padding-bottom: 8px;
+  font-family: 'Fira Sans', sans-serif;
 }

 .full-width {
@@ -668,7 +582,7 @@ onUnmounted(() => {
 /* 模型选择器 */
 .model-size {
  float: right;
-  color: #909399;
+  color: #64748B;
  font-size: 12px;
 }

@@ -677,26 +591,28 @@ onUnmounted(() => {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
-  color: #409eff;
+  color: #22C55E;
  margin-top: 8px;
  padding: 6px 12px;
-  background: #ecf5ff;
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 20px;
  display: inline-block;
  min-width: 60px;
+  font-family: 'Fira Code', monospace;
 }

 /* 帮助图标样式 */
 .help-icon {
  margin-left: 6px;
  font-size: 14px;
-  color: #909399;
+  color: #64748B;
  cursor: pointer;
  transition: color 0.2s;
 }

 .help-icon:hover {
-  color: #409eff;
+  color: #22C55E;
 }

 /* 视频展示区域 */
@@ -720,8 +636,8 @@ onUnmounted(() => {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: #f5f7fa;
-  border-radius: 0 0 12px 12px;
+  background: #0F172A;
+  border-radius: 0 0 16px 16px;
  overflow: hidden;
  position: relative;
 }
@@ -735,13 +651,13 @@ onUnmounted(() => {

 .placeholder {
  text-align: center;
-  color: #909399;
+  color: #64748B;
  padding: 40px 20px;
 }

 .placeholder-icon {
  font-size: 64px;
-  color: #dcdfe6;
+  color: #334155;
  margin-bottom: 16px;
 }

@@ -758,24 +674,25 @@ onUnmounted(() => {
  justify-content: center;
  width: 100%;
  height: 100%;
-  color: #909399;
+  color: #64748B;
 }

 .empty-icon {
  font-size: 64px;
-  color: #dcdfe6;
+  color: #334155;
  margin-bottom: 16px;
 }

 .empty-text {
  font-size: 16px;
-  color: #606266;
+  color: #94A3B8;
  margin: 0 0 8px 0;
+  font-family: 'Fira Sans', sans-serif;
 }

 .empty-hint {
  font-size: 13px;
-  color: #909399;
+  color: #64748B;
  margin: 0;
 }

@@ -800,20 +717,31 @@ onUnmounted(() => {
  flex-direction: column;
  gap: 8px;
  padding: 12px;
-  background: #f5f7fa;
-  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  text-align: center;
+  align-items: center;
+}
+
+.stat-item:hover {
+  border-color: rgba(34, 197, 94, 0.3);
+  background: rgba(15, 23, 42, 0.8);
 }

 .stat-label {
  font-size: 13px;
-  color: #606266;
+  color: #94A3B8;
  font-weight: 500;
+  font-family: 'Fira Sans', sans-serif;
 }

 .stat-item :deep(.el-tag) {
  font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
  align-self: flex-start;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* 详情卡片 */
@@ -825,23 +753,65 @@ onUnmounted(() => {
  padding: 0;
 }

+.details-table :deep(.el-table) {
+  background: #1E293B;
+}
+
 .details-table :deep(.el-table__header) {
-  background: #f5f7fa;
+  background: #1E293B;
 }

 .details-table :deep(.el-table__header th) {
-  background: #f5f7fa;
+  background: #1E293B !important;
  font-weight: 600;
-  color: #303133;
+  color: #F8FAFC;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  font-family: 'Fira Sans', sans-serif;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.details-table :deep(.el-table__body) {
+  background: #1E293B;
+}
+
+.details-table :deep(.el-table__body tr) {
+  background: #1E293B !important;
+}
+
+.details-table :deep(.el-table td) {
+  background: #1E293B !important;
+  color: #E2E8F0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.details-table :deep(.el-table__row:hover) {
+  background: #334155 !important;
+}
+
+.details-table :deep(.el-table__row:hover td) {
+  background: #334155 !important;
+  color: #F8FAFC;
+}
+
+.details-table :deep(.el-table__row--striped) {
+  background: #1E293B !important;
+}
+
+.details-table :deep(.el-table__row--striped td) {
+  background: #1E293B !important;
 }

 .bbox-code {
-  background: #f5f7fa;
+  background: rgba(15, 23, 42, 0.6);
  padding: 4px 8px;
-  border-radius: 4px;
-  font-family: 'Courier New', monospace;
+  border-radius: 6px;
+  font-family: 'Fira Code', monospace;
  font-size: 12px;
-  color: #606266;
+  color: #E2E8F0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* 日志卡片 */
@@ -867,13 +837,43 @@ onUnmounted(() => {
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
+  background: #1E293B;
+}
+
+.logs-container :deep(.el-timeline) {
+  padding-left: 16px;
+}
+
+.logs-container :deep(.el-timeline-item__node) {
+  background: #22C55E;
+  border: 2px solid #1E293B;
+}
+
+.logs-container :deep(.el-timeline-item__tail) {
+  border-left: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.logs-container :deep(.el-timeline-item__timestamp) {
+  color: #94A3B8;
+  font-size: 12px;
+}
+
+.logs-container :deep(.el-timeline-item__content) {
+  color: #E2E8F0;
 }

 .log-item {
-  background: #f5f7fa;
+  background: #1E293B;
  padding: 12px;
-  border-radius: 8px;
+  border-radius: 12px;
  margin-bottom: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: all 0.3s ease;
+}
+
+.log-item:hover {
+  border-color: rgba(34, 197, 94, 0.4);
+  background: #334155;
 }

 .log-header {
@@ -885,7 +885,7 @@ onUnmounted(() => {

 .log-confidence {
  font-size: 13px;
-  color: #606266;
+  color: #94A3B8;
 }

 .log-detail {
@@ -896,16 +896,17 @@ onUnmounted(() => {

 .log-model {
  font-size: 12px;
-  color: #909399;
+  color: #94A3B8;
 }

 .log-bbox {
  font-size: 11px;
-  color: #606266;
-  background: #fff;
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: 'Courier New', monospace;
+  color: #E2E8F0;
+  background: #0F172A;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-family: 'Fira Code', monospace;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .logs-more {
@@ -916,7 +917,8 @@ onUnmounted(() => {
 /* 告警卡片 */
 .alerts-card {
  margin-bottom: 20px;
-  border: 2px solid #f56c6c;
+  border: 2px solid #EF4444;
+  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
 }

 .alerts-card .card-header {
@@ -936,11 +938,17 @@ onUnmounted(() => {
 }

 .alert-item {
-  background: #fef0f0;
-  border-left: 4px solid #f56c6c;
+  background: rgba(239, 68, 68, 0.1);
+  border-left: 4px solid #EF4444;
  padding: 12px;
-  border-radius: 4px;
+  border-radius: 8px;
  margin-bottom: 12px;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+
+.alert-item:hover {
+  background: rgba(239, 68, 68, 0.15);
 }

 .alert-header {
@@ -952,7 +960,7 @@ onUnmounted(() => {

 .alert-time {
  font-size: 12px;
-  color: #909399;
+  color: #64748B;
 }

 .alert-detail {
@@ -964,25 +972,28 @@ onUnmounted(() => {

 .alert-message {
  font-size: 14px;
-  color: #f56c6c;
+  color: #EF4444;
  font-weight: 500;
 }

 .alert-duration {
  font-size: 13px;
-  color: #606266;
-  background: #fff;
+  color: #64748B;
+  background: rgba(15, 23, 42, 0.8);
  padding: 2px 8px;
  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .alert-bbox {
  font-size: 12px;
-  color: #606266;
-  background: #fff;
+  color: #64748B;
+  background: rgba(15, 23, 42, 0.8);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  font-family: 'Fira Code', monospace;
 }

 /* 响应式布局 */