perf(web):优化图片检测切换到视频检测的模型切换问题

apps/web/src/components/ImageDetection.vue

@@ -5,7 +5,7 @@
       <DetectionConfig
         :models="models"
         :default-type="'image'"
-        :default-model="config.model"
+        :default-model="selectedModel || (models.length > 0 ? models[0].id : '')"
         @type-change="onTypeChange"
         @config-change="onConfigChange"
       />
@@ -351,13 +351,17 @@ const props = defineProps({
   models: {
     type: Array,
     default: () => []
+  },
+  selectedModel: {
+    type: String,
+    default: ''
   }
 })
 
-const emit = defineEmits(['type-change'])
+const emit = defineEmits(['type-change', 'model-change'])
 
 const config = ref({
-  model: props.models.length > 0 ? props.models[0].id : 'fire_detection',
+  model: props.selectedModel || (props.models.length > 0 ? props.models[0].id : 'fire_detection'),
   confidence: 0.5,
   iou: 0.45,
   composite: false,
@@ -369,7 +373,12 @@ const onTypeChange = (type) => {
 }
 
 const onConfigChange = (newConfig) => {
+  const oldModel = config.value.model
   config.value = { ...newConfig }
+  // 模型变化时通知父组件
+  if (newConfig.model && newConfig.model !== oldModel) {
+    emit('model-change', newConfig.model)
+  }
 }
 
 // 可拖拽调整宽度相关

apps/web/src/components/VideoDetection.vue

@@ -5,7 +5,7 @@
       <DetectionConfig
         :models="models"
         :default-type="'video'"
-        :default-model="config.model"
+        :default-model="selectedModel || (models.length > 0 ? models[0].id : '')"
         @type-change="onTypeChange"
         @config-change="onConfigChange"
       />
@@ -223,13 +223,17 @@ const props = defineProps({
   models: {
     type: Array,
     default: () => []
+  },
+  selectedModel: {
+    type: String,
+    default: ''
   }
 })
 
-const emit = defineEmits(['type-change'])
+const emit = defineEmits(['type-change', 'model-change'])
 
 const config = ref({
-  model: props.models.length > 0 ? props.models[0].id : 'fire_detection',
+  model: props.selectedModel || (props.models.length > 0 ? props.models[0].id : 'fire_detection'),
   confidence: 0.5,
   iou: 0.45,
   composite: false,
@@ -241,8 +245,13 @@ const onTypeChange = (type) => {
 }
 
 const onConfigChange = (newConfig) => {
+  const oldModel = config.value.model
   config.value = { ...newConfig }
-  
+  // 模型变化时通知父组件
+  if (newConfig.model && newConfig.model !== oldModel) {
+    emit('model-change', newConfig.model)
+  }
+
   // 如果摄像头已连接，实时更新配置
   if (websocket.value && cameraConnected.value) {
     updateCameraConfig()

apps/web/src/views/Home.vue

@@ -4,14 +4,18 @@
     <ImageDetection
       v-if="activeTab === 'image'"
       :models="models"
+      :selected-model="selectedModel"
       @type-change="handleTypeChange"
+      @model-change="handleModelChange"
     />
 
     <!-- 视频检测模块 -->
     <VideoDetection
       v-if="activeTab === 'video'"
       :models="models"
+      :selected-model="selectedModel"
       @type-change="handleTypeChange"
+      @model-change="handleModelChange"
     />
   </div>
 </template>
@@ -26,15 +30,24 @@ import VideoDetection from '@/components/VideoDetection.vue'
 
 const activeTab = ref('image')
 const models = ref([])
+const selectedModel = ref('')
 
 const handleTypeChange = (type) => {
   activeTab.value = type
 }
 
+const handleModelChange = (modelId) => {
+  selectedModel.value = modelId
+}
+
 const loadModels = async () => {
   try {
     const response = await detectionApi.getModels()
     models.value = response.data
+    // 初始化默认选中第一个模型
+    if (models.value.length > 0 && !selectedModel.value) {
+      selectedModel.value = models.value[0].id
+    }
   } catch (error) {
     ElMessage.error('加载模型列表失败')
   }