From bfd68026ca5f08758743c366dd5f513be4a52b9a Mon Sep 17 00:00:00 2001
From: wuzhuorong <973204353@qq.com>
Date: Mon, 15 Jun 2026 17:38:03 +0800
Subject: [PATCH] =?UTF-8?q?perf(web):=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=A3=80=E6=B5=8B=E5=88=87=E6=8D=A2=E5=88=B0=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=A3=80=E6=B5=8B=E7=9A=84=E6=A8=A1=E5=9E=8B=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/ImageDetection.vue | 15 ++++++++++++---
 apps/web/src/components/VideoDetection.vue | 17 +++++++++++++----
 apps/web/src/views/Home.vue                | 13 +++++++++++++
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/ImageDetection.vue b/apps/web/src/components/ImageDetection.vue
index 645f635..28fbeb9 100644
--- a/apps/web/src/components/ImageDetection.vue
+++ b/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)
+  }
 }
 
 // 可拖拽调整宽度相关
diff --git a/apps/web/src/components/VideoDetection.vue b/apps/web/src/components/VideoDetection.vue
index 314831f..fbd06c0 100644
--- a/apps/web/src/components/VideoDetection.vue
+++ b/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()
diff --git a/apps/web/src/views/Home.vue b/apps/web/src/views/Home.vue
index f386414..b5f7d8b 100644
--- a/apps/web/src/views/Home.vue
+++ b/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('加载模型列表失败')
   }