From 15b214268a158a48b95c2cfe95c2959982435123 Mon Sep 17 00:00:00 2001
From: wuzhao <wuzhaozhongguo@hotmail.com>
Date: Mon, 9 Feb 2026 18:05:00 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E6=96=B0=E5=A2=9Egitignore=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 55 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..15d572f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,55 @@
+# OS / Editor
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+
+# Python
+__pycache__/
+*.py[cod]
+*.pyo
+*.pyd
+*.so
+.python-version
+.pytest_cache/
+.mypy_cache/
+.ruff_cache/
+.coverage
+.coverage.*
+htmlcov/
+.tox/
+.nox/
+.venv/
+venv/
+env/
+ENV/
+*.egg-info/
+*.egg
+
+# Node / Frontend
+node_modules/
+frontend/node_modules/
+frontend/dist/
+frontend/.vite/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Build / Runtime logs
+*.log
+logs/
+tmp/
+temp/
+
+# ML / Training / Inference outputs
+runs/
+backend/runs/
+data/runs/
+backend/static/results/
+data/static/results/
+
+# Local data artifacts
+data/uploads/
+data/cache/
+
-- 
Gitee


From b68488c82f310644b7f4f4e9083a159db4b58c7c Mon Sep 17 00:00:00 2001
From: SamllNorth_Lee <18210040298@163.com>
Date: Tue, 10 Feb 2026 13:44:34 +0800
Subject: [PATCH 2/7] =?UTF-8?q?feat:=E6=8E=A8=E7=90=86=E7=BB=93=E6=9E=9C?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=B7=BB=E5=8A=A0=E6=A0=87=E6=B3=A8=E7=BB=98?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Inference.vue | 948 ++++++++++++++++++-------------
 1 file changed, 551 insertions(+), 397 deletions(-)

diff --git a/frontend/src/views/Inference.vue b/frontend/src/views/Inference.vue
index 055a884..5dc6a59 100644
--- a/frontend/src/views/Inference.vue
+++ b/frontend/src/views/Inference.vue
@@ -4,350 +4,380 @@
       <h1>模型推理</h1>
       <p>使用训练好的模型进行目标检测</p>
     </div>
-    
+
     <!-- 推理模式选择 -->
     <div class="mode-selector">
-      <el-segmented 
-        v-model="inferenceMode" 
-        :options="modeOptions"
-        size="large"
+      <el-segmented
+          v-model="inferenceMode"
+          :options="modeOptions"
+          size="large"
       />
     </div>
-    
+
     <div class="page-content">
       <!-- 实时推理模式 -->
       <div v-if="inferenceMode === 'realtime'" class="realtime-mode">
-        <RealtimeInference />
+        <RealtimeInference/>
       </div>
-      
+
       <!-- 九宫格推理模式 -->
       <div v-else-if="inferenceMode === 'grid'" class="grid-mode">
-        <GridInference @show-source-dialog="showRealtimeSourceDialog" />
+        <GridInference @show-source-dialog="showRealtimeSourceDialog"/>
       </div>
-      
+
       <!-- 批量推理模式 -->
       <div v-else class="batch-mode">
         <el-row :gutter="20">
-        <!-- 左侧配置面板 -->
-        <el-col :xs="24" :lg="8">
-          <el-card class="config-panel">
-            <template #header>
-              <span>推理配置</span>
-            </template>
-            
-            <el-form :model="inferenceConfig" label-width="100px">
-              <el-form-item label="选择模型">
-                <div class="model-selector-container">
-                  <el-select 
-                    v-model="inferenceConfig.modelPath" 
-                    placeholder="选择模型" 
-                    filterable
-                    class="model-selector"
-                    popper-class="model-dropdown"
-                  >
-                    <el-option-group label="预训练模型">
-                      <el-option 
-                        v-for="model in pretrainedModels"
-                        :key="model.name"
-                        :label="model.display_name || model.name"
-                        :value="model.path || model.name"
-                        class="simple-model-option"
-                      >
-                        <div class="simple-option-content">
-                          <span class="model-name-simple">{{ model.display_name || model.name }}</span>
-                          <span class="model-size-simple">{{ formatFileSize(model.size) }}</span>
-                        </div>
-                      </el-option>
-                    </el-option-group>
-                  <el-option-group label="训练模型" v-if="trainedModels.length > 0">
-                    <el-option 
-                      v-for="model in trainedModels"
-                      :key="model.path"
-                      :label="model.display_name"
-                      :value="model.path"
-                      class="custom-model-option"
+          <!-- 左侧配置面板 -->
+          <el-col :xs="24" :lg="8">
+            <el-card class="config-panel">
+              <template #header>
+                <span>推理配置</span>
+              </template>
+
+              <el-form :model="inferenceConfig" label-width="100px">
+                <el-form-item label="选择模型">
+                  <div class="model-selector-container">
+                    <el-select
+                        v-model="inferenceConfig.modelPath"
+                        placeholder="选择模型"
+                        filterable
+                        class="model-selector"
+                        popper-class="model-dropdown"
                     >
-                      <div class="model-option-content">
-                        <div class="model-main-info">
-                          <div class="model-name">
-                            {{ model.display_name }}
-                            <el-tag v-if="model.is_latest" type="success" size="small" class="latest-tag">
-                              最新
-                            </el-tag>
-                          </div>
-                          <div class="model-meta">
-                            {{ model.dataset }}{{ model.epochs }} • {{ formatTime(model.modified_time) }}
+                      <el-option-group label="预训练模型">
+                        <el-option
+                            v-for="model in pretrainedModels"
+                            :key="model.name"
+                            :label="model.display_name || model.name"
+                            :value="model.path || model.name"
+                            class="simple-model-option"
+                        >
+                          <div class="simple-option-content">
+                            <span class="model-name-simple">{{ model.display_name || model.name }}</span>
+                            <span class="model-size-simple">{{ formatFileSize(model.size) }}</span>
                           </div>
-                        </div>
-                        <span class="model-size">
+                        </el-option>
+                      </el-option-group>
+                      <el-option-group label="训练模型" v-if="trainedModels.length > 0">
+                        <el-option
+                            v-for="model in trainedModels"
+                            :key="model.path"
+                            :label="model.display_name"
+                            :value="model.path"
+                            class="custom-model-option"
+                        >
+                          <div class="model-option-content">
+                            <div class="model-main-info">
+                              <div class="model-name">
+                                {{ model.display_name }}
+                                <el-tag v-if="model.is_latest" type="success" size="small" class="latest-tag">
+                                  最新
+                                </el-tag>
+                              </div>
+                              <div class="model-meta">
+                                {{ model.dataset }}{{ model.epochs }} • {{ formatTime(model.modified_time) }}
+                              </div>
+                            </div>
+                            <span class="model-size">
                           {{ formatFileSize(model.size) }}
                         </span>
-                      </div>
-                    </el-option>
-                  </el-option-group>
-                  <el-option-group label="自定义模型" v-if="customModels.length > 0">
-                    <el-option 
-                      v-for="model in customModels"
-                      :key="model.path"
-                      :label="model.name"
-                      :value="model.path"
-                    />
-                  </el-option-group>
-                  </el-select>
-                  <el-button 
-                    type="text" 
-                    size="small" 
-                    @click="loadAvailableModels" 
-                    class="refresh-btn"
-                    :loading="isLoadingModels"
-                  >
-                    刷新模型列表
-                  </el-button>
-                </div>
-              </el-form-item>
-              
-              <el-form-item label="置信度阈值">
-                <el-slider 
-                  v-model="inferenceConfig.confidence"
-                  :min="0.1"
-                  :max="1"
-                  :step="0.05"
-                  show-input
-                  input-size="small"
-                />
-              </el-form-item>
-              
-              <el-form-item label="IoU阈值">
-                <el-slider 
-                  v-model="inferenceConfig.iouThreshold"
-                  :min="0.1"
-                  :max="1"
-                  :step="0.05"
-                  show-input
-                  input-size="small"
-                />
-              </el-form-item>
-              
-              <el-form-item label="最大检测数">
-                <el-input-number 
-                  v-model="inferenceConfig.maxDetections"
-                  :min="1"
-                  :max="1000"
-                  controls-position="right"
-                />
-              </el-form-item>
-              
-              <el-form-item>
-                <el-upload
-                  ref="uploadRef"
-                  :show-file-list="false"
-                  :before-upload="handleImageUpload"
-                  accept="image/*"
-                  multiple
-                >
-                  <el-button type="primary" :loading="isProcessing">
-                    <el-icon><Upload /></el-icon>
-                    上传图片
-                  </el-button>
-                </el-upload>
-              </el-form-item>
-              
-              <el-form-item v-if="uploadedImages.length > 0">
-                <el-button 
-                  @click="runBatchInference"
-                  :loading="isProcessing"
-                  :disabled="uploadedImages.length === 0"
-                >
-                  <el-icon><VideoPlay /></el-icon>
-                  批量推理
-                </el-button>
-                <el-button @click="clearImages">
-                  <el-icon><Delete /></el-icon>
-                  清空
-                </el-button>
-              </el-form-item>
-            </el-form>
-          </el-card>
-          
-          <!-- 检测统计 -->
-          <el-card class="stats-panel">
-            <template #header>
-              <span>检测统计</span>
-            </template>
-            
-            <div class="stat-item">
-              <span class="stat-label">已处理图片:</span>
-              <span class="stat-value">{{ processedCount }}</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">总检测数:</span>
-              <span class="stat-value">{{ totalDetections }}</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">平均置信度:</span>
-              <span class="stat-value">{{ averageConfidence }}</span>
-            </div>
-            <div class="stat-item">
-              <span class="stat-label">处理时间:</span>
-              <span class="stat-value">{{ processingTime }}ms</span>
-            </div>
-          </el-card>
-        </el-col>
-        
-        <!-- 右侧结果展示 -->
-        <el-col :xs="24" :lg="16">
-          <el-card class="results-panel">
-            <template #header>
-              <div class="results-header">
-                <span>推理结果</span>
-                <div class="header-actions">
-                  <el-button-group>
-                    <el-button 
-                      :type="viewMode === 'grid' ? 'primary' : ''"
-                      @click="viewMode = 'grid'"
+                          </div>
+                        </el-option>
+                      </el-option-group>
+                      <el-option-group label="自定义模型" v-if="customModels.length > 0">
+                        <el-option
+                            v-for="model in customModels"
+                            :key="model.path"
+                            :label="model.name"
+                            :value="model.path"
+                        />
+                      </el-option-group>
+                    </el-select>
+                    <el-button
+                        type="text"
+                        size="small"
+                        @click="loadAvailableModels"
+                        class="refresh-btn"
+                        :loading="isLoadingModels"
                     >
-                      <el-icon><Grid /></el-icon>
+                      刷新模型列表
                     </el-button>
-                    <el-button 
-                      :type="viewMode === 'list' ? 'primary' : ''"
-                      @click="viewMode = 'list'"
-                    >
-                      <el-icon><List /></el-icon>
+                  </div>
+                </el-form-item>
+
+                <el-form-item label="置信度阈值">
+                  <el-slider
+                      v-model="inferenceConfig.confidence"
+                      :min="0.1"
+                      :max="1"
+                      :step="0.05"
+                      show-input
+                      input-size="small"
+                  />
+                </el-form-item>
+
+                <el-form-item label="IoU阈值">
+                  <el-slider
+                      v-model="inferenceConfig.iouThreshold"
+                      :min="0.1"
+                      :max="1"
+                      :step="0.05"
+                      show-input
+                      input-size="small"
+                  />
+                </el-form-item>
+
+                <el-form-item label="最大检测数">
+                  <el-input-number
+                      v-model="inferenceConfig.maxDetections"
+                      :min="1"
+                      :max="1000"
+                      controls-position="right"
+                  />
+                </el-form-item>
+
+                <el-form-item>
+                  <el-upload
+                      ref="uploadRef"
+                      :show-file-list="false"
+                      :before-upload="handleImageUpload"
+                      accept="image/*"
+                      multiple
+                  >
+                    <el-button type="primary" :loading="isProcessing">
+                      <el-icon>
+                        <Upload/>
+                      </el-icon>
+                      上传图片
                     </el-button>
-                  </el-button-group>
-                  
-                  <el-button @click="downloadResults" :disabled="results.length === 0">
-                    <el-icon><Download /></el-icon>
-                    下载结果
+                  </el-upload>
+                </el-form-item>
+
+                <el-form-item v-if="uploadedImages.length > 0">
+                  <el-button
+                      @click="runBatchInference"
+                      :loading="isProcessing"
+                      :disabled="uploadedImages.length === 0"
+                  >
+                    <el-icon>
+                      <VideoPlay/>
+                    </el-icon>
+                    批量推理
                   </el-button>
-                </div>
+                  <el-button @click="clearImages">
+                    <el-icon>
+                      <Delete/>
+                    </el-icon>
+                    清空
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </el-card>
+
+            <!-- 检测统计 -->
+            <el-card class="stats-panel">
+              <template #header>
+                <span>检测统计</span>
+              </template>
+
+              <div class="stat-item">
+                <span class="stat-label">已处理图片:</span>
+                <span class="stat-value">{{ processedCount }}</span>
               </div>
-            </template>
-            
-            <!-- 网格视图 -->
-            <div v-if="viewMode === 'grid'" class="grid-view">
-              <div v-if="results.length === 0" class="empty-results">
-                <el-empty description="暂无推理结果，请上传图片进行检测" />
+              <div class="stat-item">
+                <span class="stat-label">总检测数:</span>
+                <span class="stat-value">{{ totalDetections }}</span>
               </div>
-              
-              <el-row :gutter="20" v-else>
-                <el-col 
-                  :xs="24" :sm="12" :md="8" :lg="6"
-                  v-for="(result, index) in results" 
-                  :key="index"
-                >
-                  <div class="result-card" @click="showResultDetail(result)">
-                    <div class="result-image">
-                      <img :src="result.annotatedImageUrl || result.imageUrl" :alt="result.fileName" />
-                      <div class="detection-overlay">
-                        <span class="detection-count">{{ result.detections.length }} 个目标</span>
-                      </div>
-                      <div v-if="result.annotatedImageUrl" class="annotated-badge">
-                        <el-tag type="success" size="small">已标注</el-tag>
+              <div class="stat-item">
+                <span class="stat-label">平均置信度:</span>
+                <span class="stat-value">{{ averageConfidence }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">处理时间:</span>
+                <span class="stat-value">{{ processingTime }}ms</span>
+              </div>
+            </el-card>
+          </el-col>
+
+          <!-- 右侧结果展示 -->
+          <el-col :xs="24" :lg="16">
+            <el-card class="results-panel">
+              <template #header>
+                <div class="results-header">
+                  <span>推理结果</span>
+                  <div class="header-actions">
+                    <el-button-group>
+                      <el-button
+                          :type="viewMode === 'grid' ? 'primary' : ''"
+                          @click="viewMode = 'grid'"
+                      >
+                        <el-icon>
+                          <Grid/>
+                        </el-icon>
+                      </el-button>
+                      <el-button
+                          :type="viewMode === 'list' ? 'primary' : ''"
+                          @click="viewMode = 'list'"
+                      >
+                        <el-icon>
+                          <List/>
+                        </el-icon>
+                      </el-button>
+                    </el-button-group>
+
+                    <el-button @click="downloadResults" :disabled="results.length === 0">
+                      <el-icon>
+                        <Download/>
+                      </el-icon>
+                      下载结果
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+
+              <!-- 网格视图 -->
+              <div v-if="viewMode === 'grid'" class="grid-view">
+                <div v-if="results.length === 0" class="empty-results">
+                  <el-empty description="暂无推理结果，请上传图片进行检测"/>
+                </div>
+
+                <el-row :gutter="20" v-else>
+                  <el-col
+                      :xs="24" :sm="12" :md="8" :lg="6"
+                      v-for="(result, index) in results"
+                      :key="index"
+                  >
+                    <div class="result-card" @click="showResultDetail(result)">
+                      <div class="result-image">
+                        <img :src="result.annotatedImageUrl || result.imageUrl" :alt="result.fileName"/>
+                        <div class="detection-overlay">
+                          <span class="detection-count">{{ result.detections.length }} 个目标</span>
+                        </div>
+                        <div v-if="result.annotatedImageUrl" class="annotated-badge">
+                          <el-tag type="success" size="small">已标注</el-tag>
+                        </div>
                       </div>
-                    </div>
-                    <div class="result-info">
-                      <div class="file-name">{{ result.fileName }}</div>
-                      <div class="detection-summary">
-                        <el-tag 
-                          v-for="detection in result.detections.slice(0, 3)" 
-                          :key="detection.id"
-                          size="small"
-                          class="detection-tag"
-                        >
-                          {{ detection.class }} ({{ (detection.confidence * 100).toFixed(1) }}%)
-                        </el-tag>
-                        <span v-if="result.detections.length > 3" class="more-text">
+                      <div class="result-info">
+                        <div class="file-name">{{ result.fileName }}</div>
+                        <div class="detection-summary">
+                          <el-tag
+                              v-for="detection in result.detections.slice(0, 3)"
+                              :key="detection.id"
+                              size="small"
+                              class="detection-tag"
+                          >
+                            {{ detection.class }} ({{ (detection.confidence * 100).toFixed(1) }}%)
+                          </el-tag>
+                          <span v-if="result.detections.length > 3" class="more-text">
                           +{{ result.detections.length - 3 }} 更多
                         </span>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </el-col>
-              </el-row>
-            </div>
-            
-            <!-- 列表视图 -->
-            <div v-if="viewMode === 'list'" class="list-view">
-              <el-table :data="results" v-if="results.length > 0">
-                <el-table-column label="图片" width="120">
-                  <template #default="{ row }">
-                    <img :src="row.imageUrl" class="table-image" @click="showResultDetail(row)" />
-                  </template>
-                </el-table-column>
-                <el-table-column prop="fileName" label="文件名" />
-                <el-table-column label="检测数量" width="100">
-                  <template #default="{ row }">
-                    {{ row.detections.length }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="主要目标" width="200">
-                  <template #default="{ row }">
-                    <el-tag 
-                      v-for="detection in row.detections.slice(0, 2)" 
-                      :key="detection.id"
-                      size="small"
-                      style="margin-right: 5px;"
-                    >
-                      {{ detection.class }}
-                    </el-tag>
-                  </template>
-                </el-table-column>
-                <el-table-column label="处理时间" width="100">
-                  <template #default="{ row }">
-                    {{ row.processingTime }}ms
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="120">
-                  <template #default="{ row }">
-                    <el-button size="small" @click="showResultDetail(row)">
-                      <el-icon><View /></el-icon>
-                      查看
-                    </el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-              
-              <el-empty v-else description="暂无推理结果" />
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
+                  </el-col>
+                </el-row>
+              </div>
+
+              <!-- 列表视图 -->
+              <div v-if="viewMode === 'list'" class="list-view">
+                <el-table :data="results" v-if="results.length > 0">
+                  <el-table-column label="图片" width="120">
+                    <template #default="{ row }">
+                      <img :src="row.imageUrl" class="table-image" @click="showResultDetail(row)"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="fileName" label="文件名"/>
+                  <el-table-column label="检测数量" width="100">
+                    <template #default="{ row }">
+                      {{ row.detections.length }}
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="主要目标" width="200">
+                    <template #default="{ row }">
+                      <el-tag
+                          v-for="detection in row.detections.slice(0, 2)"
+                          :key="detection.id"
+                          size="small"
+                          style="margin-right: 5px;"
+                      >
+                        {{ detection.class }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="处理时间" width="100">
+                    <template #default="{ row }">
+                      {{ row.processingTime }}ms
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" width="120">
+                    <template #default="{ row }">
+                      <el-button size="small" @click="showResultDetail(row)">
+                        <el-icon>
+                          <View/>
+                        </el-icon>
+                        查看
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+
+                <el-empty v-else description="暂无推理结果"/>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
       </div>
     </div>
-    
+
     <!-- 结果详情对话框 -->
-    <el-dialog 
-      v-model="showDetailDialog" 
-      :title="`检测结果 - ${selectedResult?.fileName}`"
-      width="900px"
-      top="5vh"
+    <el-dialog
+        v-model="showDetailDialog"
+        :title="`检测结果 - ${selectedResult?.fileName}`"
+        width="900px"
+        top="5vh"
     >
       <div v-if="selectedResult" class="result-detail">
         <el-row :gutter="20">
-                  <el-col :xs="24" :md="16">
-                    <div class="detail-image">
-                      <div class="image-tabs">
-                        <el-tabs v-model="activeImageTab" type="card">
-                          <el-tab-pane label="原始图片" name="original">
-                            <img :src="selectedResult.imageUrl" :alt="selectedResult.fileName" />
-                          </el-tab-pane>
-                          <el-tab-pane label="检测结果" name="annotated" v-if="selectedResult.annotatedImageUrl">
-                            <img :src="selectedResult.annotatedImageUrl" :alt="selectedResult.fileName + '_annotated'" />
-                          </el-tab-pane>
-                        </el-tabs>
-                      </div>
-                    </div>
-                  </el-col>
-          
+          <el-col :xs="24" :md="16">
+            <div class="detail-image">
+              <div class="image-tabs">
+                <el-tabs v-model="activeImageTab" type="card">
+                  <el-tab-pane label="原始图片" name="original">
+                    <el-image
+                        :src="selectedResult.imageUrl"
+                        :alt="selectedResult.fileName"
+                        :preview-src-list="[selectedResult.imageUrl]"
+                        fit="contain"
+                        class="detail-image-preview"
+                        preview-teleported
+                    />
+                    <div class="image-zoom-hint">点击图片可放大查看</div>
+                  </el-tab-pane>
+                  <el-tab-pane label="检测结果" name="annotated" v-if="selectedResult.annotatedImageUrl">
+                    <el-image
+                        :src="selectedResult.annotatedImageUrl"
+                        :alt="selectedResult.fileName + '_annotated'"
+                        :preview-src-list="[selectedResult.annotatedImageUrl]"
+                        fit="contain"
+                        class="detail-image-preview"
+                        preview-teleported
+                    />
+                    <div class="image-zoom-hint">点击图片可放大查看</div>
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+            </div>
+          </el-col>
+
           <el-col :xs="24" :md="8">
             <div class="detail-info">
               <h4>检测详情</h4>
               <div class="detection-list">
-                <div 
-                  v-for="detection in selectedResult.detections" 
-                  :key="detection.id"
-                  class="detection-item"
+                <div
+                    v-for="detection in selectedResult.detections"
+                    :key="detection.id"
+                    class="detection-item"
                 >
                   <div class="detection-header">
                     <span class="detection-class">{{ detection.class }}</span>
@@ -357,7 +387,8 @@
                   </div>
                   <div class="detection-coords">
                     <small>
-                      位置: ({{ detection.bbox.x1.toFixed(0) }}, {{ detection.bbox.y1.toFixed(0) }}) - ({{ detection.bbox.x2.toFixed(0) }}, {{ detection.bbox.y2.toFixed(0) }})
+                      位置: ({{ detection.bbox.x1.toFixed(0) }}, {{ detection.bbox.y1.toFixed(0) }}) -
+                      ({{ detection.bbox.x2.toFixed(0) }}, {{ detection.bbox.y2.toFixed(0) }})
                       <br/>
                       大小: {{ detection.bbox.width.toFixed(0) }} × {{ detection.bbox.height.toFixed(0) }}
                       <br/>
@@ -375,19 +406,19 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
-import { ElMessage, ElNotification } from 'element-plus'
-import { predictImage, predictBatch, getModels } from '../utils/api'
-import { saveAs } from 'file-saver'
+import {computed, onMounted, onUnmounted, reactive, ref} from 'vue'
+import {ElMessage, ElNotification} from 'element-plus'
+import {getModels, predictBatch, predictImage} from '../utils/api'
+import {saveAs} from 'file-saver'
 import RealtimeInference from '../components/RealtimeInference.vue'
 import GridInference from '../components/GridInference.vue'
 
 // 响应式数据
 const inferenceMode = ref('batch')
 const modeOptions = [
-  { label: '批量推理', value: 'batch' },
-  { label: '实时监控', value: 'realtime' },
-  { label: '九宫格监控', value: 'grid' }
+  {label: '批量推理', value: 'batch'},
+  {label: '实时监控', value: 'realtime'},
+  {label: '九宫格监控', value: 'grid'}
 ]
 
 const isProcessing = ref(false)
@@ -414,13 +445,13 @@ const isLoadingModels = ref(false)
 
 // 计算属性
 const processedCount = computed(() => results.value.length)
-const totalDetections = computed(() => 
-  results.value.reduce((sum, result) => sum + result.detections.length, 0)
+const totalDetections = computed(() =>
+    results.value.reduce((sum, result) => sum + result.detections.length, 0)
 )
 const averageConfidence = computed(() => {
   const allDetections = results.value.flatMap(result => result.detections)
   if (allDetections.length === 0) return '0.0%'
-  
+
   const avgConf = allDetections.reduce((sum, det) => sum + det.confidence, 0) / allDetections.length
   return (avgConf * 100).toFixed(1) + '%'
 })
@@ -439,10 +470,10 @@ const handleImageUpload = (file) => {
         url: e.target.result,
         name: file.name
       })
-      
+
       // 自动进行单张推理
       runSingleInference(file, e.target.result)
-      
+
       resolve(false) // 阻止默认上传
     }
     reader.readAsDataURL(file)
@@ -451,44 +482,51 @@ const handleImageUpload = (file) => {
 
 const runSingleInference = async (file, imageUrl) => {
   if (isProcessing.value) return
-  
+
   isProcessing.value = true
   const startTime = Date.now()
-  
+
   try {
     const config = {
       confidence: inferenceConfig.confidence,
       iou_threshold: inferenceConfig.iouThreshold,
       save_results: true
     }
-    
+
     const result = await predictImage(file, inferenceConfig.modelPath, config)
     const endTime = Date.now()
-    
+
     // 处理真实检测结果
-    const detections = result.results.detections || []
-    
+    const detections = result?.results?.detections ?? []
+
     // 获取标注图片URL
     let annotatedImageUrl = null
-    if (result.results.annotated_images && result.results.annotated_images.length > 0) {
-      annotatedImageUrl = `http://localhost:8000${result.results.annotated_images[0].url}`
+    const annotatedImages = result?.results?.annotated_images
+    if (annotatedImages?.length > 0) {
+      annotatedImageUrl = `http://localhost:8000${annotatedImages[0].url}`
+    } else if (detections.length > 0) {
+      try {
+        annotatedImageUrl = await drawDetectionBoxes(imageUrl, detections)
+      } catch (e) {
+        console.warn('前端绘制检测框失败:', e)
+      }
     }
-    
+
     const inferenceResult = {
-      id: result.prediction_id,
+      id: result?.prediction_id ?? `pred-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
       fileName: file.name,
       imageUrl: imageUrl,
       annotatedImageUrl: annotatedImageUrl,
       detections: detections,
       processingTime: endTime - startTime,
       timestamp: new Date(),
-      modelUsed: result.results.model_used
+      modelUsed: result?.results?.model_used
     }
-    
+
     results.value.unshift(inferenceResult)
-    
+
     ElMessage.success(`推理完成，检测到 ${detections.length} 个目标`)
-    
+
   } catch (error) {
     ElMessage.error('推理失败')
     console.error('推理错误:', error)
@@ -499,10 +537,10 @@ const runSingleInference = async (file, imageUrl) => {
 
 const runBatchInference = async () => {
   if (isProcessing.value || uploadedImages.value.length === 0) return
-  
+
   isProcessing.value = true
   const startTime = Date.now()
-  
+
   try {
     const files = uploadedImages.value.map(img => img.file)
     const config = {
@@ -510,12 +548,12 @@ const runBatchInference = async () => {
       iou_threshold: inferenceConfig.iouThreshold,
       save_results: true
     }
-    
+
     const result = await predictBatch(files, inferenceConfig.modelPath, config)
     const endTime = Date.now()
-    
+
     ElMessage.success(`批量推理完成，处理了 ${result.results.processed_images} 张图片`)
-    
+
   } catch (error) {
     ElMessage.error('批量推理失败')
   } finally {
@@ -528,25 +566,143 @@ const clearImages = () => {
   results.value = []
 }
 
-const showResultDetail = (result) => {
+const showResultDetail = async (result) => {
   selectedResult.value = result
   showDetailDialog.value = true
+  // 若当前没有标注图但有检测框，则在前端绘制并更新，便于详情里“检测结果” Tab 显示
+  if (!result.annotatedImageUrl && result.detections?.length > 0) {
+    try {
+      const annotatedUrl = await drawDetectionBoxes(result.imageUrl, result.detections)
+      result.annotatedImageUrl = annotatedUrl
+    } catch (e) {
+      console.warn('详情页绘制检测框失败:', e)
+    }
+  }
+}
+
+let drawCanvas = null;
+let canvasCtx = null;
+
+// 初始化隐藏的绘制画布（不影响页面）
+const initDrawCanvas = () => {
+  if (drawCanvas) {
+    try { document.body.removeChild(drawCanvas); } catch (e) {}
+    drawCanvas = null;
+    canvasCtx = null;
+  }
+
+  drawCanvas = document.createElement('canvas');
+  drawCanvas.style.display = 'none';       // 完全隐藏
+  drawCanvas.style.position = 'absolute';
+  drawCanvas.style.top = '-9999px';
+  drawCanvas.style.left = '-9999px';
+  document.body.appendChild(drawCanvas);
+
+  try {
+    canvasCtx = drawCanvas.getContext('2d');
+    if (!canvasCtx) throw new Error('Canvas上下文获取失败');
+  } catch (err) {
+    console.error('Canvas初始化失败:', err);
+    canvasCtx = null;
+    throw err;
+  }
+};
+
+/**
+ * 在结果图上根据算法返回的 detections 绘制检测框（支持 bbox: x1, y1, x2, y2）
+ * @param {string} imageUrl - Base64 或可访问的图片 URL
+ * @param {Array} detections - 检测结果数组，每项含 class, confidence, bbox: { x1, y1, x2, y2 }
+ * @returns {Promise<string>} 绘制后的 Base64 图片 URL
+ */
+const drawDetectionBoxes = (imageUrl, detections) => {
+  return new Promise((resolve, reject) => {
+    if (!detections || detections.length === 0) {
+      reject(new Error('检测框数组为空'))
+      return
+    }
+
+    try {
+      initDrawCanvas()
+    } catch (err) {
+      reject(err)
+      return
+    }
+    if (!canvasCtx) {
+      reject(new Error('Canvas 上下文失效'))
+      return
+    }
+
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+
+    img.onload = () => {
+      try {
+        drawCanvas.width = img.naturalWidth
+        drawCanvas.height = img.naturalHeight
+
+        canvasCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height)
+        canvasCtx.drawImage(img, 0, 0)
+
+        const lineWidth = Math.max(2, Math.min(4, img.naturalWidth / 400))
+        const fontSize = Math.max(12, Math.min(18, img.naturalWidth / 50))
+
+        detections.forEach((det) => {
+          const bbox = det.bbox || {}
+          const x1 = Number(bbox.x1) ?? 0
+          const y1 = Number(bbox.y1) ?? 0
+          const x2 = Number(bbox.x2) ?? 0
+          const y2 = Number(bbox.y2) ?? 0
+          const w = x2 - x1
+          const h = y2 - y1
+
+          const label = `${det.class || 'object'} ${((det.confidence ?? 0) * 100).toFixed(1)}%`
+
+          // 边框
+          canvasCtx.strokeStyle = '#00ff00'
+          canvasCtx.lineWidth = lineWidth
+          canvasCtx.strokeRect(x1, y1, w, h)
+
+          // 标签背景与文字
+          canvasCtx.font = `bold ${fontSize}px sans-serif`
+          const textMetrics = canvasCtx.measureText(label)
+          const textW = textMetrics.width
+          const textH = fontSize + 4
+          canvasCtx.fillStyle = 'rgba(0, 255, 0, 0.8)'
+          canvasCtx.fillRect(x1, y1 - textH - 2, textW + 8, textH + 4)
+          canvasCtx.fillStyle = '#000'
+          canvasCtx.fillText(label, x1 + 4, y1 - 4)
+        })
+
+        const annotatedUrl = drawCanvas.toDataURL('image/png', 0.95)
+        resolve(annotatedUrl)
+      } catch (err) {
+        console.error('绘制检测框失败:', err)
+        reject(err)
+      }
+    }
+
+    img.onerror = () => reject(new Error('图片加载失败'))
+    img.src = imageUrl
+  })
 }
 
 const downloadResults = () => {
   if (results.value.length === 0) return
-  
+
   // 生成检测结果CSV
   const csvHeader = 'fileName,detectionCount,averageConfidence,processingTime\n'
   const csvData = results.value.map(result => {
-    const avgConf = result.detections.reduce((sum, det) => sum + det.confidence, 0) / result.detections.length
-    return `${result.fileName},${result.detections.length},${avgConf.toFixed(3)},${result.processingTime}`
+    const len = result.detections?.length ?? 0
+    const avgConf = len > 0
+        ? result.detections.reduce((sum, det) => sum + det.confidence, 0) / len
+        : 0
+    return `${result.fileName},${len},${avgConf.toFixed(3)},${result.processingTime}`
   }).join('\n')
-  
+
   const csvContent = csvHeader + csvData
-  const blob = new Blob([csvContent], { type: 'text/csv' })
+  const blob = new Blob([csvContent], {type: 'text/csv'})
   saveAs(blob, `inference_results_${new Date().toISOString().split('T')[0]}.csv`)
-  
+
   ElMessage.success('结果已下载')
 }
 
@@ -554,49 +710,38 @@ const loadAvailableModels = async () => {
   try {
     isLoadingModels.value = true
     const modelsData = await getModels()
-    
+
     // 分离不同类型的模型
     pretrainedModels.value = modelsData.models
-      .filter(model => model.type === 'pretrained')
-      .map(model => ({
-        name: model.name,
-        path: model.path,
-        size: model.size,
-        display_name: model.display_name
-      }))
-    
+        .filter(model => model.type === 'pretrained')
+        .map(model => ({
+          name: model.name,
+          path: model.path,
+          size: model.size,
+          display_name: model.display_name
+        }))
+
     trainedModels.value = modelsData.models
-      .filter(model => model.type === 'trained')
-      .map(model => ({
-        name: model.name,
-        path: model.path,
-        size: model.size,
-        display_name: model.display_name,
-        experiment_name: model.experiment_name,
-        weight_type: model.weight_type,
-        dataset: model.dataset,
-        epochs: model.epochs,
-        is_latest: model.is_latest,
-        modified_time: model.modified_time
-      }))
-    
-    // 上传的自定义模型
-    customModels.value = modelsData.models
-      .filter(model => model.type === 'uploaded')
-      .map(model => ({
-        name: model.name,
-        path: model.path,
-        size: model.size,
-        display_name: model.display_name,
-        modified_time: model.modified_time
-      }))
-    
+        .filter(model => model.type === 'trained')
+        .map(model => ({
+          name: model.name,
+          path: model.path,
+          size: model.size,
+          display_name: model.display_name,
+          experiment_name: model.experiment_name,
+          weight_type: model.weight_type,
+          dataset: model.dataset,
+          epochs: model.epochs,
+          is_latest: model.is_latest,
+          modified_time: model.modified_time
+        }))
+
     // 自动选择最新训练的模型（如果有的话）
     if (trainedModels.value.length > 0 && trainedModels.value[0].is_latest) {
       inferenceConfig.modelPath = trainedModels.value[0].path
       ElMessage.success(`已自动选择最新训练的模型: ${trainedModels.value[0].display_name}`)
     }
-      
+
   } catch (error) {
     console.error('加载模型列表失败:', error)
     ElMessage.error('加载模型列表失败')
@@ -620,7 +765,7 @@ const formatTime = (timestamp) => {
   const diffMins = Math.floor(diffMs / 60000)
   const diffHours = Math.floor(diffMs / 3600000)
   const diffDays = Math.floor(diffMs / 86400000)
-  
+
   if (diffMins < 60) {
     return `${diffMins}分钟前`
   } else if (diffHours < 24) {
@@ -638,18 +783,16 @@ const showRealtimeSourceDialog = () => {
   ElMessage.info('请在实时监控模式中配置视频源，然后在九宫格中使用')
 }
 
-// 注意：已移除 mockDetections 函数，现在使用真实的YOLO检测结果
-
 // 训练完成事件监听
 const handleModelTrainingCompleted = (event) => {
-  const { projectName } = event.detail
+  const {projectName} = event.detail
   ElNotification({
     title: '新模型可用',
     message: `训练完成！模型 "${projectName}" 已添加到可选列表`,
     type: 'success',
     duration: 5000
   })
-  
+
   // 自动刷新模型列表
   loadAvailableModels()
 }
@@ -657,7 +800,7 @@ const handleModelTrainingCompleted = (event) => {
 // 生命周期
 onMounted(() => {
   loadAvailableModels()
-  
+
   // 监听训练完成事件
   window.addEventListener('modelTrainingCompleted', handleModelTrainingCompleted)
 })
@@ -761,7 +904,7 @@ onUnmounted(() => {
 
 .result-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .result-image {
@@ -780,7 +923,7 @@ onUnmounted(() => {
   position: absolute;
   top: 10px;
   right: 10px;
-  background: rgba(0,0,0,0.7);
+  background: rgba(0, 0, 0, 0.7);
   color: white;
   padding: 4px 8px;
   border-radius: 4px;
@@ -797,13 +940,26 @@ onUnmounted(() => {
   width: 100%;
 }
 
-.image-tabs img {
+.image-tabs img,
+.detail-image-preview {
   max-width: 100%;
+  max-height: 400px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.detail-image-preview :deep(.el-image__inner) {
   max-height: 400px;
   object-fit: contain;
   border-radius: 8px;
 }
 
+.image-zoom-hint {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 8px;
+}
+
 .result-info {
   padding: 15px;
 }
@@ -853,11 +1009,9 @@ onUnmounted(() => {
   text-align: center;
 }
 
-.detail-image img {
-  max-width: 100%;
-  max-height: 400px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+.detail-image img,
+.detail-image .detail-image-preview {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .detail-info h4 {
@@ -904,21 +1058,21 @@ onUnmounted(() => {
   .inference-page {
     padding: 10px;
   }
-  
+
   .results-header {
     flex-direction: column;
     gap: 10px;
     align-items: stretch;
   }
-  
+
   .header-actions {
     justify-content: space-between;
   }
-  
+
   .result-card {
     margin-bottom: 10px;
   }
-  
+
   .result-image {
     height: 150px;
   }
-- 
Gitee


From 929a4be91a2071acf278de1edf244d388f058dd2 Mon Sep 17 00:00:00 2001
From: SamllNorth_Lee <18210040298@163.com>
Date: Tue, 10 Feb 2026 13:50:24 +0800
Subject: [PATCH 3/7] =?UTF-8?q?feat:=E6=95=B0=E6=8D=AE=E6=A0=87=E6=B3=A8?=
 =?UTF-8?q?=EF=BC=9A=E6=B7=BB=E5=8A=A0=E6=A0=87=E6=B3=A8=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=94=BE=E5=A4=A7=E7=BC=A9=E5=B0=8F=EF=BC=8C=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E4=BC=A0=E5=90=8E=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=88=B0=E6=A0=87=E6=B3=A8=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=EF=BC=88=E6=89=B9=E9=87=8F=E9=BB=98=E8=AE=A4=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=80=E4=B8=AA=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Annotation.vue | 1960 ++++++++++-------------------
 1 file changed, 660 insertions(+), 1300 deletions(-)

diff --git a/frontend/src/views/Annotation.vue b/frontend/src/views/Annotation.vue
index 7dd9fe5..1ed5070 100644
--- a/frontend/src/views/Annotation.vue
+++ b/frontend/src/views/Annotation.vue
@@ -4,96 +4,86 @@
     <div class="toolbar">
       <div class="toolbar-left">
         <el-upload
-          ref="uploadRef"
-          :show-file-list="false"
-          :before-upload="handleImageUpload"
-          accept="image/*"
-          multiple
+            ref="uploadRef"
+            :show-file-list="false"
+            :before-upload="handleImageUpload"
+            accept="image/*"
+            multiple
         >
           <el-button type="primary">
-            <el-icon><Upload /></el-icon>
+            <el-icon>
+              <Upload/>
+            </el-icon>
             上传图片
           </el-button>
         </el-upload>
-        
+
         <el-upload
-          ref="videoUploadRef"
-          :show-file-list="false"
-          :before-upload="handleVideoUpload"
-          accept="video/*"
+            ref="videoUploadRef"
+            :show-file-list="false"
+            :before-upload="handleVideoUpload"
+            accept="video/*"
         >
           <el-button type="success">
-            <el-icon><VideoCamera /></el-icon>
+            <el-icon>
+              <VideoCamera/>
+            </el-icon>
             上传视频
           </el-button>
         </el-upload>
-        
-        <el-divider direction="vertical" />
-        
-        <el-button @click="undo" :disabled="!canUndo" title="撤销 (Ctrl+Z)">
-          <el-icon><RefreshLeft /></el-icon>
-          撤销
-        </el-button>
-        
-        <el-button @click="redo" :disabled="!canRedo" title="重做 (Ctrl+Y)">
-          <el-icon><RefreshRight /></el-icon>
-          重做
-        </el-button>
-        
-        <el-divider direction="vertical" />
-        
-        <el-button @click="openAIAssistDialog" :disabled="!currentImage" type="primary">
-          <el-icon><MagicStick /></el-icon>
-          AI辅助标注
-        </el-button>
-        
-        <el-divider direction="vertical" />
-        
+
         <el-button @click="saveAnnotations" :disabled="!currentImage">
-          <el-icon><Download /></el-icon>
+          <el-icon>
+            <Download/>
+          </el-icon>
           保存标注
         </el-button>
-        
+
         <el-button @click="showDataAugmentationDialog" :disabled="!currentImage" type="warning">
-          <el-icon><MagicStick /></el-icon>
+          <el-icon>
+            <MagicStick/>
+          </el-icon>
           数据增强
         </el-button>
         <el-button @click="exportDataset" :disabled="imageList.length === 0">
-          <el-icon><Files /></el-icon>
+          <el-icon>
+            <Files/>
+          </el-icon>
           导出数据集
         </el-button>
       </div>
-      
+
       <div class="toolbar-center">
-        <el-select v-model="currentTool" placeholder="选择工具" style="width: 140px">
-          <el-option label="选择" value="select" />
-          <el-option label="矩形框" value="rect" />
-          <el-option label="多边形" value="polygon" />
-          <el-option label="删除" value="delete" />
+        <el-select v-model="currentTool" placeholder="选择工具" style="width: 120px">
+          <el-option label="选择" value="select"/>
+          <el-option label="矩形框" value="rect"/>
+          <el-option label="删除" value="delete"/>
         </el-select>
-        
+
         <el-select v-model="currentClass" placeholder="选择类别" style="width: 150px; margin-left: 10px">
-          <el-option 
-            v-for="(cls, index) in classList" 
-            :key="index"
-            :label="`${index}: ${cls}`" 
-            :value="index" 
+          <el-option
+              v-for="(cls, index) in classList"
+              :key="index"
+              :label="`${index}: ${cls}`"
+              :value="index"
           />
         </el-select>
-        
+
         <el-button @click="showClassDialog = true" type="text">
-          <el-icon><Setting /></el-icon>
+          <el-icon>
+            <Setting/>
+          </el-icon>
           编辑类别
         </el-button>
       </div>
-      
+
       <div class="toolbar-right">
         <span v-if="currentImage">
           {{ currentImageIndex + 1 }} / {{ imageList.length }}
         </span>
       </div>
     </div>
-    
+
     <!-- 主要内容区域 -->
     <div class="main-content">
       <!-- 左侧图片列表 -->
@@ -102,116 +92,146 @@
           <h3>图片列表 ({{ imageList.length }})</h3>
         </div>
         <div class="image-list">
-          <div 
-            v-for="(image, index) in imageList" 
-            :key="index"
-            class="image-item"
-            :class="{ active: currentImageIndex === index }"
-            @click="selectImage(index)"
+          <div
+              v-for="(image, index) in imageList"
+              :key="index"
+              class="image-item"
+              :class="{ active: currentImageIndex === index }"
+              @click="selectImage(index)"
           >
-            <img :src="image.url" :alt="image.name" />
+            <el-image
+                :src="image.url"
+                :alt="image.name"
+                :preview-src-list="[image.url]"
+                fit="cover"
+                class="image-item-thumb"
+                preview-teleported
+                @click.stop
+            />
             <div class="image-info">
               <div class="image-name" :title="image.name">{{ image.name }}</div>
               <div class="annotation-count">
                 标注: {{ image.annotations?.length || 0 }}
               </div>
             </div>
-            <el-button 
-              class="delete-image-btn"
-              type="danger" 
-              size="small"
-              circle
-              @click.stop="deleteImage(index)"
+            <el-button
+                class="delete-image-btn"
+                type="danger"
+                size="small"
+                circle
+                @click.stop="deleteImage(index)"
             >
-              <el-icon><Close /></el-icon>
+              <el-icon>
+                <Close/>
+              </el-icon>
             </el-button>
           </div>
         </div>
       </div>
-      
+
       <!-- 中间画布区域 -->
       <div class="canvas-area">
         <div class="canvas-container" v-if="currentImage">
-          <!-- 多边形绘制提示 -->
-          <div v-if="currentTool === 'polygon' && currentImage" class="polygon-tip">
-            <el-alert 
-              v-if="!isDrawingPolygon"
-              title="点击画布开始绘制多边形"
-              type="info"
-              :closable="false"
-              show-icon
-            />
-            <el-alert 
-              v-else
-              :title="`已标记 ${polygonPoints.length} 个点，点击起始点完成绘制（至少需要3个点）`"
-              type="warning"
-              :closable="false"
-              show-icon
+          <div class="canvas-zoom-toolbar">
+            <el-button-group>
+              <el-button size="small" title="缩小" @click="canvasZoomOut">
+                <el-icon>
+                  <ZoomOut/>
+                </el-icon>
+              </el-button>
+              <el-button size="small" disabled>{{ Math.round(viewScale * 100) }}%</el-button>
+              <el-button size="small" title="放大" @click="canvasZoomIn">
+                <el-icon>
+                  <ZoomIn/>
+                </el-icon>
+              </el-button>
+              <el-button size="small" title="重置缩放" @click="canvasZoomReset">1:1</el-button>
+            </el-button-group>
+            <el-button
+                class="canvas-zoom-btn"
+                type="primary"
+                circle
+                size="small"
+                title="全屏预览（仅查看）"
+                @click="openCanvasImagePreview"
             >
-              <template #default>
-                <el-button size="small" type="danger" @click="cancelPolygon">取消 (Esc / 右键)</el-button>
-              </template>
-            </el-alert>
+              <el-icon>
+                <FullScreen/>
+              </el-icon>
+            </el-button>
           </div>
-          
-          <canvas 
-            ref="canvasRef"
-            :width="canvasWidth"
-            :height="canvasHeight"
-            @mousedown="handleMouseDown"
-            @mousemove="handleMouseMove"
-            @mouseup="handleMouseUp"
-            @contextmenu="handleRightClick"
-            @wheel="handleWheel"
-          ></canvas>
+          <div
+              class="canvas-viewport"
+              ref="canvasViewportRef"
+              @wheel="handleWheel"
+              @mousedown="handleCanvasViewportMouseDown"
+              @mousemove="handleCanvasViewportMouseMove"
+              @mouseup="handleCanvasViewportMouseUp"
+              @mouseleave="handleCanvasViewportMouseUp"
+              @contextmenu.prevent
+          >
+            <div class="canvas-wrap" :style="canvasWrapStyle">
+              <div class="canvas-transform-wrap" :style="canvasTransformStyle">
+                <canvas
+                    ref="canvasRef"
+                    :width="canvasWidth"
+                    :height="canvasHeight"
+                ></canvas>
+              </div>
+            </div>
+          </div>
+          <div class="canvas-hint">滚轮缩放 · 右键拖拽平移 · 放大后可正常画框标注</div>
         </div>
         <div v-else class="empty-canvas">
-          <el-empty description="请上传图片开始标注" />
+          <el-empty description="请上传图片开始标注"/>
         </div>
+        <el-image-viewer
+            v-if="showCanvasPreview"
+            :url-list="canvasPreviewUrlList"
+            :initial-index="0"
+            teleported
+            hide-on-click-modal
+            @close="showCanvasPreview = false"
+        />
       </div>
-      
+
       <!-- 右侧属性面板 -->
       <div class="properties-panel">
         <div class="panel-header">
           <h3>标注列表</h3>
         </div>
         <div class="annotations-list">
-          <div 
-            v-for="(annotation, index) in currentAnnotations" 
-            :key="index"
-            class="annotation-item"
-            :class="{ selected: selectedAnnotation === index }"
-            @click="selectAnnotation(index)"
+          <div
+              v-for="(annotation, index) in currentAnnotations"
+              :key="index"
+              class="annotation-item"
+              :class="{ selected: selectedAnnotation === index }"
+              @click="selectAnnotation(index)"
           >
             <div class="annotation-header">
-              <span class="class-label">
-                {{ classList[annotation.class] }}
-                <el-tag v-if="annotation.type === 'polygon'" size="small" type="success" style="margin-left: 5px;">多边形</el-tag>
-                <el-tag v-else size="small" type="info" style="margin-left: 5px;">矩形</el-tag>
-              </span>
-              <el-button 
-                type="danger" 
-                size="small" 
-                text
-                @click.stop="deleteAnnotation(index)"
+              <span class="class-label">{{ classList[annotation.class] }}</span>
+              <el-button
+                  type="danger"
+                  size="small"
+                  text
+                  @click.stop="deleteAnnotation(index)"
               >
-                <el-icon><Delete /></el-icon>
+                <el-icon>
+                  <Delete/>
+                </el-icon>
               </el-button>
             </div>
             <div class="annotation-coords">
-              <small v-if="annotation.type === 'polygon'">
-                顶点数: {{ annotation.points?.length || 0 }}
-              </small>
-              <small v-else>
-                x: {{ annotation.x.toFixed(3) }}, 
-                y: {{ annotation.y.toFixed(3) }}, 
-                w: {{ annotation.width.toFixed(3) }}, 
+              <small>
+                x: {{ annotation.x.toFixed(3) }},
+                y: {{ annotation.y.toFixed(3) }},
+                w: {{ annotation.width.toFixed(3) }},
                 h: {{ annotation.height.toFixed(3) }}
               </small>
             </div>
           </div>
         </div>
-        
+
         <!-- 快捷键说明 -->
         <div class="shortcuts-help">
           <h4>快捷键</h4>
@@ -227,52 +247,38 @@
           <div class="shortcut-item">
             <kbd>1-9</kbd> <span>选择类别</span>
           </div>
-          <div class="shortcut-item">
-            <kbd>Esc</kbd> <span>取消绘制</span>
-          </div>
-          <div class="shortcut-item">
-            <kbd>右键</kbd> <span>取消绘制</span>
-          </div>
-        </div>
-        
-        <!-- 多边形工具说明 -->
-        <div v-if="currentTool === 'polygon'" class="tool-help">
-          <h4>多边形工具使用说明</h4>
-          <ul>
-            <li>点击画布添加顶点</li>
-            <li>点击起始点完成绘制</li>
-            <li>右键或按Esc取消绘制</li>
-            <li>至少需要3个顶点</li>
-            <li>可拖动整个多边形移动</li>
-          </ul>
         </div>
       </div>
     </div>
-    
+
     <!-- 类别编辑对话框 -->
     <el-dialog v-model="showClassDialog" title="编辑类别" width="500px">
       <div class="class-editor">
         <el-form :model="classForm" label-width="80px">
           <el-form-item label="类别列表">
             <div class="class-list">
-              <div 
-                v-for="(cls, index) in classForm.classes" 
-                :key="index"
-                class="class-item"
+              <div
+                  v-for="(cls, index) in classForm.classes"
+                  :key="index"
+                  class="class-item"
               >
-                <el-input v-model="classForm.classes[index]" placeholder="类别名称" />
-                <el-button 
-                  type="danger" 
-                  text
-                  @click="removeClass(index)"
-                  :disabled="classForm.classes.length <= 1"
+                <el-input v-model="classForm.classes[index]" placeholder="类别名称"/>
+                <el-button
+                    type="danger"
+                    text
+                    @click="removeClass(index)"
+                    :disabled="classForm.classes.length <= 1"
                 >
-                  <el-icon><Delete /></el-icon>
+                  <el-icon>
+                    <Delete/>
+                  </el-icon>
                 </el-button>
               </div>
             </div>
             <el-button @click="addClass" type="primary" text>
-              <el-icon><Plus /></el-icon>
+              <el-icon>
+                <Plus/>
+              </el-icon>
               添加类别
             </el-button>
           </el-form-item>
@@ -286,67 +292,67 @@
 
     <!-- 数据增强对话框 -->
     <el-dialog
-      v-model="showAugmentationDialog"
-      title="数据增强"
-      width="600px"
-      center
+        v-model="showAugmentationDialog"
+        title="数据增强"
+        width="600px"
+        center
     >
       <div class="augmentation-config">
         <el-form :model="augmentationConfig" label-width="120px">
           <el-form-item label="增强数量">
-            <el-input-number 
-              v-model="augmentationConfig.count" 
-              :min="1" 
-              :max="50" 
-              :step="1"
-              controls-position="right"
+            <el-input-number
+                v-model="augmentationConfig.count"
+                :min="1"
+                :max="50"
+                :step="1"
+                controls-position="right"
             />
             <span style="margin-left: 10px; color: #909399;">
               将从当前图片生成 {{ augmentationConfig.count }} 张变体
             </span>
           </el-form-item>
-          
+
           <el-form-item label="旋转">
-            <el-switch v-model="augmentationConfig.rotation" />
+            <el-switch v-model="augmentationConfig.rotation"/>
             <span style="margin-left: 10px;">随机旋转 ±15°</span>
           </el-form-item>
-          
+
           <el-form-item label="翻转">
-            <el-switch v-model="augmentationConfig.flip" />
+            <el-switch v-model="augmentationConfig.flip"/>
             <span style="margin-left: 10px;">水平/垂直翻转</span>
           </el-form-item>
-          
+
           <el-form-item label="亮度调整">
-            <el-switch v-model="augmentationConfig.brightness" />
+            <el-switch v-model="augmentationConfig.brightness"/>
             <span style="margin-left: 10px;">随机亮度变化</span>
           </el-form-item>
-          
+
           <el-form-item label="对比度调整">
-            <el-switch v-model="augmentationConfig.contrast" />
+            <el-switch v-model="augmentationConfig.contrast"/>
             <span style="margin-left: 10px;">随机对比度变化</span>
           </el-form-item>
-          
+
           <el-form-item label="噪声添加">
-            <el-switch v-model="augmentationConfig.noise" />
+            <el-switch v-model="augmentationConfig.noise"/>
             <span style="margin-left: 10px;">添加轻微噪声</span>
           </el-form-item>
-          
+
           <el-form-item label="缩放">
-            <el-switch v-model="augmentationConfig.scale" />
+            <el-switch v-model="augmentationConfig.scale"/>
             <span style="margin-left: 10px;">随机缩放 90%-110%</span>
           </el-form-item>
         </el-form>
-        
+
         <div class="augmentation-preview" v-if="augmentationPreview.length > 0">
           <h4>预览效果</h4>
           <div class="preview-grid">
             <div v-for="(preview, index) in augmentationPreview" :key="index" class="preview-item">
-              <img :src="preview" :alt="`预览${index + 1}`" />
+              <img :src="preview" :alt="`预览${index + 1}`"/>
             </div>
           </div>
         </div>
       </div>
-      
+
       <template #footer>
         <el-button @click="generatePreview" :loading="isGeneratingPreview">
           生成预览
@@ -360,10 +366,10 @@
 
     <!-- 视频帧提取对话框 -->
     <el-dialog
-      v-model="showVideoFrameDialog"
-      title="视频帧提取"
-      width="600px"
-      center
+        v-model="showVideoFrameDialog"
+        title="视频帧提取"
+        width="600px"
+        center
     >
       <div class="video-frame-config">
         <el-form :model="videoFrameConfig" label-width="120px">
@@ -376,45 +382,45 @@
               <p><strong>分辨率:</strong> {{ currentVideoInfo?.width }}x{{ currentVideoInfo?.height }}</p>
             </div>
           </el-form-item>
-          
+
           <el-form-item label="提取间隔">
             <el-radio-group v-model="videoFrameConfig.intervalType">
               <el-radio label="fps">按帧率提取</el-radio>
               <el-radio label="count">按数量提取</el-radio>
             </el-radio-group>
           </el-form-item>
-          
+
           <el-form-item v-if="videoFrameConfig.intervalType === 'fps'" label="每秒提取帧数">
-            <el-input-number 
-              v-model="videoFrameConfig.frameInterval" 
-              :min="0.1" 
-              :max="30" 
-              :step="0.5"
-              controls-position="right"
+            <el-input-number
+                v-model="videoFrameConfig.frameInterval"
+                :min="0.1"
+                :max="30"
+                :step="0.5"
+                controls-position="right"
             />
             <span style="margin-left: 10px; color: #909399;">
               每秒提取 {{ videoFrameConfig.frameInterval }} 帧
             </span>
           </el-form-item>
-          
+
           <el-form-item v-else label="总共提取帧数">
-            <el-input-number 
-              v-model="videoFrameConfig.maxFrames" 
-              :min="1" 
-              :max="500" 
-              :step="10"
-              controls-position="right"
+            <el-input-number
+                v-model="videoFrameConfig.maxFrames"
+                :min="1"
+                :max="500"
+                :step="10"
+                controls-position="right"
             />
             <span style="margin-left: 10px; color: #909399;">
               从视频中均匀提取 {{ videoFrameConfig.maxFrames }} 帧
             </span>
           </el-form-item>
-          
+
           <el-form-item>
             <el-alert
-              type="info"
-              :closable="false"
-              show-icon
+                type="info"
+                :closable="false"
+                show-icon
             >
               <template #default>
                 <div>
@@ -425,7 +431,7 @@
           </el-form-item>
         </el-form>
       </div>
-      
+
       <template #footer>
         <el-button @click="showVideoFrameDialog = false">取消</el-button>
         <el-button type="primary" @click="extractFrames" :loading="isExtractingFrames">
@@ -433,110 +439,28 @@
         </el-button>
       </template>
     </el-dialog>
-
-    <!-- AI辅助标注对话框 -->
-    <el-dialog
-      v-model="showAIAssistDialog"
-      title="AI辅助预标注"
-      width="500px"
-      center
-    >
-      <div class="ai-assist-config">
-        <el-form :model="aiAssistConfig" label-width="120px">
-          <el-form-item label="检测模型">
-            <el-select v-model="aiAssistConfig.model" placeholder="选择模型">
-              <el-option 
-                v-for="model in availableModels" 
-                :key="model.path" 
-                :label="model.name" 
-                :value="model.path" 
-              />
-            </el-select>
-          </el-form-item>
-          
-          <el-form-item label="置信度阈值">
-            <el-slider 
-              v-model="aiAssistConfig.confidence" 
-              :min="0.1" 
-              :max="0.9" 
-              :step="0.05"
-              show-input
-            />
-            <span style="font-size: 12px; color: #909399;">
-              置信度越高，检测越严格，标注框越少
-            </span>
-          </el-form-item>
-          
-          <el-form-item label="类别映射">
-            <el-radio-group v-model="aiAssistConfig.classMode">
-              <el-radio label="auto">自动添加COCO类别</el-radio>
-              <el-radio label="manual">手动指定目标类别</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          
-          <el-form-item label="目标类别" v-if="aiAssistConfig.classMode === 'manual'">
-            <el-select 
-              v-model="aiAssistConfig.targetClass" 
-              placeholder="选择或输入类别"
-              filterable
-              allow-create
-              default-first-option
-            >
-              <el-option 
-                v-for="(cls, index) in classList" 
-                :key="index" 
-                :label="cls" 
-                :value="index" 
-              />
-            </el-select>
-            <span style="font-size: 12px; color: #909399; display: block; margin-top: 5px;">
-              所有检测到的目标将统一标记为此类别
-            </span>
-          </el-form-item>
-          
-          <el-form-item label="处理方式">
-            <el-radio-group v-model="aiAssistConfig.mode">
-              <el-radio label="replace">替换现有标注</el-radio>
-              <el-radio label="append">追加到现有标注</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          
-          <el-alert
-            type="info"
-            :closable="false"
-            show-icon
-            style="margin-bottom: 15px;"
-          >
-            <template #default>
-              <div v-if="aiAssistConfig.classMode === 'auto'">
-                <strong>自动模式：</strong>检测到的COCO类别（person、car等）将自动添加到类别列表
-              </div>
-              <div v-else>
-                <strong>手动模式：</strong>所有检测到的目标将统一标记为指定的类别，忽略COCO原始类别
-              </div>
-            </template>
-          </el-alert>
-        </el-form>
-      </div>
-      
-      <template #footer>
-        <el-button @click="showAIAssistDialog = false">取消</el-button>
-        <el-button type="primary" @click="runAIAssist" :loading="isAIAssisting">
-          <el-icon><MagicStick /></el-icon>
-          开始检测
-        </el-button>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Upload, Download, Files, Setting, Delete, Plus, MagicStick, VideoCamera, Close, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
-import { saveAs } from 'file-saver'
-import { uploadAnnotationVideo, extractVideoFrames, aiAssistAnnotation } from '../utils/api'
-import { getModels } from '../utils/api'
+import {computed, nextTick, onMounted, onUnmounted, reactive, ref} from 'vue'
+import {ElImageViewer, ElMessage, ElMessageBox} from 'element-plus'
+import {
+  Close,
+  Delete,
+  Download,
+  Files,
+  FullScreen,
+  MagicStick,
+  Plus,
+  Setting,
+  Upload,
+  VideoCamera,
+  ZoomIn,
+  ZoomOut
+} from '@element-plus/icons-vue'
+import {saveAs} from 'file-saver'
+import {extractVideoFrames, uploadAnnotationVideo} from '../utils/api'
 
 // 响应式数据
 const canvasRef = ref(null)
@@ -545,18 +469,7 @@ const videoUploadRef = ref(null)
 const showClassDialog = ref(false)
 const showAugmentationDialog = ref(false)
 const showVideoFrameDialog = ref(false)
-const showAIAssistDialog = ref(false)
-
-// AI辅助标注相关
-const isAIAssisting = ref(false)
-const availableModels = ref([])
-const aiAssistConfig = reactive({
-  model: 'yolo11n.pt',
-  confidence: 0.25,
-  mode: 'replace', // 'replace' 或 'append'
-  classMode: 'auto', // 'auto' 自动添加COCO类别，'manual' 手动指定类别
-  targetClass: 0 // 手动模式下的目标类别索引
-})
+const showCanvasPreview = ref(false)
 
 // 视频相关
 const currentVideoInfo = ref(null)
@@ -570,13 +483,13 @@ const videoFrameConfig = reactive({
 // 计算预计提取的帧数
 const estimatedFrameCount = computed(() => {
   if (!currentVideoInfo.value) return 0
-  
+
   if (videoFrameConfig.intervalType === 'fps') {
     const totalSeconds = currentVideoInfo.value.duration
     const framesPerSecond = videoFrameConfig.frameInterval
     return Math.min(
-      Math.floor(totalSeconds * framesPerSecond),
-      videoFrameConfig.maxFrames
+        Math.floor(totalSeconds * framesPerSecond),
+        videoFrameConfig.maxFrames
     )
   } else {
     return videoFrameConfig.maxFrames
@@ -603,6 +516,15 @@ const canvasHeight = ref(600)
 const scale = ref(1)
 const offsetX = ref(0)
 const offsetY = ref(0)
+// 视图缩放与平移（放大后可继续标注）
+const viewScale = ref(1)
+const viewOffsetX = ref(0)
+const viewOffsetY = ref(0)
+const viewScaleMin = 0.5
+const viewScaleMax = 5
+const panMargin = 100
+const isPanning = ref(false)
+const lastPanPoint = ref({x: 0, y: 0})
 
 // 工具和类别
 const currentTool = ref('rect')
@@ -612,79 +534,35 @@ const classList = ref(['person', 'car', 'bicycle'])
 // 图片相关
 const imageList = ref([])
 const currentImageIndex = ref(-1)
-const currentImage = computed(() => 
-  currentImageIndex.value >= 0 ? imageList.value[currentImageIndex.value] : null
+const currentImage = computed(() =>
+    currentImageIndex.value >= 0 ? imageList.value[currentImageIndex.value] : null
 )
 
+// 上传队列：保证批量上传时按顺序添加，并自动选中本次上传的第一张
+const uploadQueue = ref([])
+const isProcessingUpload = ref(false)
+
 // 标注相关
 const isDrawing = ref(false)
-const startPoint = ref({ x: 0, y: 0 })
+const startPoint = ref({x: 0, y: 0})
 const selectedAnnotation = ref(-1)
-const currentAnnotations = computed(() => 
-  currentImage.value?.annotations || []
+const currentAnnotations = computed(() =>
+    currentImage.value?.annotations || []
 )
-
-// 标注框编辑状态
-const isDragging = ref(false)
-const isResizing = ref(false)
-const dragStartPos = ref({ x: 0, y: 0 })
-const resizeHandle = ref('') // 'tl', 'tr', 'bl', 'br', 'l', 'r', 't', 'b'
-const resizeStartAnnotation = ref(null)
-
-// 多边形标注状态
-const polygonPoints = ref([]) // 当前正在绘制的多边形的点
-const isDrawingPolygon = ref(false)
-const hoveredPointIndex = ref(-1) // 鼠标悬停的点索引
-
-// 撤销/重做历史记录
-const history = ref([])
-const historyIndex = ref(-1)
-const maxHistorySize = 50
-
-// 保存当前状态到历史记录
-const saveHistory = () => {
-  if (!currentImage.value) return
-  
-  // 移除当前索引之后的所有历史记录
-  if (historyIndex.value < history.value.length - 1) {
-    history.value = history.value.slice(0, historyIndex.value + 1)
-  }
-  
-  // 深拷贝当前标注状态
-  const state = JSON.parse(JSON.stringify(currentImage.value.annotations))
-  history.value.push(state)
-  
-  // 限制历史记录大小
-  if (history.value.length > maxHistorySize) {
-    history.value.shift()
-  } else {
-    historyIndex.value++
-  }
-}
-
-// 撤销
-const undo = () => {
-  if (!canUndo.value) return
-  
-  historyIndex.value--
-  currentImage.value.annotations = JSON.parse(JSON.stringify(history.value[historyIndex.value]))
-  drawCanvas()
-  ElMessage.success('已撤销')
-}
-
-// 重做
-const redo = () => {
-  if (!canRedo.value) return
-  
-  historyIndex.value++
-  currentImage.value.annotations = JSON.parse(JSON.stringify(history.value[historyIndex.value]))
-  drawCanvas()
-  ElMessage.success('已重做')
-}
-
-// 判断是否可以撤销/重做
-const canUndo = computed(() => historyIndex.value > 0)
-const canRedo = computed(() => historyIndex.value < history.value.length - 1)
+const canvasPreviewUrlList = computed(() =>
+    currentImage.value?.url ? [currentImage.value.url] : []
+)
+const canvasViewportRef = ref(null)
+const canvasTransformStyle = computed(() => ({
+  width: `${canvasWidth.value}px`,
+  height: `${canvasHeight.value}px`,
+  transform: `translate(${panMargin + viewOffsetX.value}px, ${panMargin + viewOffsetY.value}px) scale(${viewScale.value})`,
+  transformOrigin: '0 0'
+}))
+const canvasWrapStyle = computed(() => ({
+  width: `${Math.ceil(canvasWidth.value * viewScale.value) + 2 * panMargin}px`,
+  height: `${Math.ceil(canvasHeight.value * viewScale.value) + 2 * panMargin}px`
+}))
 
 // 类别编辑表单
 const classForm = reactive({
@@ -695,9 +573,9 @@ const classForm = reactive({
 let ctx = null
 let currentImageObj = null
 
-// 方法
-const handleImageUpload = (file) => {
-  return new Promise((resolve) => {
+// 将单个文件转为图片数据并加入列表（返回 Promise）
+const addOneImageFromFile = (file) => {
+  return new Promise((resolve, reject) => {
     const reader = new FileReader()
     reader.onload = (e) => {
       const img = new Image()
@@ -710,35 +588,64 @@ const handleImageUpload = (file) => {
           annotations: []
         }
         imageList.value.push(imageData)
-        
-        if (currentImageIndex.value === -1) {
-          selectImage(0)
-        }
-        
-        ElMessage.success(`已上传图片: ${file.name}`)
-        resolve(false) // 阻止默认上传
+        resolve()
       }
+      img.onerror = () => reject(new Error(`图片加载失败: ${file.name}`))
       img.src = e.target.result
     }
+    reader.onerror = () => reject(new Error(`读取失败: ${file.name}`))
     reader.readAsDataURL(file)
   })
 }
 
+// 按顺序处理上传队列，保证本次上传的第一张自动出现在中间标注区
+const processUploadQueue = async () => {
+  if (isProcessingUpload.value || uploadQueue.value.length === 0) return
+  isProcessingUpload.value = true
+  const batchStartIndex = imageList.value.length // 本次上传的第一张在列表中的下标
+  let added = 0
+  while (uploadQueue.value.length > 0) {
+    const file = uploadQueue.value.shift()
+    try {
+      await addOneImageFromFile(file)
+      added++
+      // 本次上传的第一张添加完成后，自动选中并显示在中间标注区域
+      if (added === 1) {
+        selectImage(batchStartIndex)
+      }
+      ElMessage.success(`已上传图片: ${file.name}`)
+    } catch (err) {
+      console.error(err)
+      ElMessage.error(`上传失败: ${file.name}`)
+    }
+  }
+  isProcessingUpload.value = false
+}
+
+// 方法：上传时加入队列并处理（单张或批量都会把第一张自动放到中间）
+const handleImageUpload = (uploadFile) => {
+  const file = uploadFile?.raw ?? uploadFile
+  if (!file || !(file instanceof File)) return false
+  uploadQueue.value.push(file)
+  processUploadQueue()
+  return false // 阻止默认上传
+}
+
 // 视频上传处理
 const handleVideoUpload = async (file) => {
   try {
     ElMessage.info('正在上传视频，请稍候...')
-    
+
     const response = await uploadAnnotationVideo(file, (progress) => {
       console.log(`上传进度: ${progress}%`)
     })
-    
+
     currentVideoInfo.value = response
     showVideoFrameDialog.value = true
-    
+
     ElMessage.success('视频上传成功，请配置帧提取参数')
     return false // 阻止默认上传
-    
+
   } catch (error) {
     console.error('视频上传失败:', error)
     ElMessage.error('视频上传失败')
@@ -749,31 +656,32 @@ const handleVideoUpload = async (file) => {
 // 提取视频帧
 const extractFrames = async () => {
   if (!currentVideoInfo.value) return
-  
+
   isExtractingFrames.value = true
-  
+
   try {
     ElMessage.info('正在提取视频帧，请稍候...')
-    
+
     // 计算实际的帧间隔参数
     let frameInterval = videoFrameConfig.frameInterval
     let maxFrames = videoFrameConfig.maxFrames
-    
+
     if (videoFrameConfig.intervalType === 'count') {
       // 如果按数量提取，计算帧间隔
       const totalFrames = currentVideoInfo.value.frame_count
       frameInterval = totalFrames / maxFrames / currentVideoInfo.value.fps
     }
-    
+
     const response = await extractVideoFrames(
-      currentVideoInfo.value.video_id,
-      currentVideoInfo.value.video_path,
-      frameInterval,
-      maxFrames
+        currentVideoInfo.value.video_id,
+        currentVideoInfo.value.video_path,
+        frameInterval,
+        maxFrames
     )
-    
-    // 将提取的帧添加到图片列表
-    response.frames.forEach((frame, index) => {
+
+    // 将提取的帧添加到图片列表，并记录本批第一张的下标
+    const batchStartIndex = imageList.value.length
+    response.frames.forEach((frame) => {
       const imageData = {
         name: `${currentVideoInfo.value.filename}_frame_${frame.frame_index}.jpg`,
         url: frame.data,
@@ -785,17 +693,16 @@ const extractFrames = async () => {
       }
       imageList.value.push(imageData)
     })
-    
-    // 自动选择第一帧
-    if (currentImageIndex.value === -1 && imageList.value.length > 0) {
-      selectImage(0)
+    // 自动把本次提取的第一帧放到中间标注区域
+    if (imageList.value.length > batchStartIndex) {
+      selectImage(batchStartIndex)
     }
-    
+
     showVideoFrameDialog.value = false
     currentVideoInfo.value = null
-    
+
     ElMessage.success(`成功提取 ${response.extracted_frames} 帧，已添加到图片列表`)
-    
+
   } catch (error) {
     console.error('提取视频帧失败:', error)
     ElMessage.error('提取视频帧失败')
@@ -812,153 +719,10 @@ const formatDuration = (seconds) => {
   return `${mins}:${secs.toString().padStart(2, '0')}`
 }
 
-// 显示AI辅助标注对话框
-const openAIAssistDialog = () => {
-  if (!currentImage.value) return
-  showAIAssistDialog.value = true
-}
-
-// 执行AI辅助标注
-const runAIAssist = async () => {
-  if (!currentImage.value) return
-  
-  // 手动模式下验证是否选择了目标类别
-  if (aiAssistConfig.classMode === 'manual' && 
-      (aiAssistConfig.targetClass === null || aiAssistConfig.targetClass === undefined)) {
-    ElMessage.warning('请选择或输入目标类别')
-    return
-  }
-  
-  isAIAssisting.value = true
-  
-  try {
-    ElMessage.info('正在使用AI检测目标，请稍候...')
-    
-    // 从canvas获取base64图片数据
-    const canvas = canvasRef.value
-    if (!canvas) {
-      ElMessage.error('Canvas未初始化')
-      isAIAssisting.value = false
-      return
-    }
-    
-    // 获取图片的base64数据（不包括标注框）
-    const imageData = currentImage.value.url
-    
-    // 调用AI辅助标注API
-    const response = await aiAssistAnnotation(
-      imageData,
-      aiAssistConfig.model,
-      aiAssistConfig.confidence
-    )
-    
-    if (response.annotations && response.annotations.length > 0) {
-      // 根据模式处理标注
-      if (aiAssistConfig.mode === 'replace') {
-        // 替换模式：清空现有标注
-        currentImage.value.annotations = []
-      }
-      
-      if (aiAssistConfig.classMode === 'auto') {
-        // 自动模式：自动添加COCO类别
-        const newClasses = new Set()
-        
-        // 添加AI检测到的标注
-        response.annotations.forEach(ann => {
-          // 检查类别是否已存在
-          const className = ann.class_name || `class_${ann.class}`
-          if (!classList.value.includes(className)) {
-            newClasses.add(className)
-          }
-          
-          // 找到或添加类别索引
-          let classIndex = classList.value.indexOf(className)
-          if (classIndex === -1) {
-            classList.value.push(className)
-            classIndex = classList.value.length - 1
-          }
-          
-          currentImage.value.annotations.push({
-            class: classIndex,
-            x: ann.x,
-            y: ann.y,
-            width: ann.width,
-            height: ann.height
-          })
-        })
-        
-        // 保存更新后的类别列表到localStorage
-        if (newClasses.size > 0) {
-          localStorage.setItem('annotationClasses', JSON.stringify(classList.value))
-          ElMessage.info(`已自动添加 ${newClasses.size} 个COCO类别到类别列表`)
-        }
-      } else {
-        // 手动模式：统一使用指定的类别
-        let targetClassIndex = aiAssistConfig.targetClass
-        
-        // 如果是新输入的类别名称（字符串），添加到类别列表
-        if (typeof targetClassIndex === 'string') {
-          const newClassName = targetClassIndex
-          if (!classList.value.includes(newClassName)) {
-            classList.value.push(newClassName)
-            localStorage.setItem('annotationClasses', JSON.stringify(classList.value))
-            ElMessage.info(`已添加新类别: ${newClassName}`)
-          }
-          targetClassIndex = classList.value.indexOf(newClassName)
-        }
-        
-        // 添加所有检测到的标注，统一使用目标类别
-        response.annotations.forEach(ann => {
-          currentImage.value.annotations.push({
-            class: targetClassIndex,
-            x: ann.x,
-            y: ann.y,
-            width: ann.width,
-            height: ann.height
-          })
-        })
-        
-        ElMessage.success(`已将 ${response.annotations.length} 个目标标记为 "${classList.value[targetClassIndex]}"`)
-      }
-      
-      // 保存历史记录
-      saveHistory()
-      
-      // 重绘画布
-      drawCanvas()
-      
-      showAIAssistDialog.value = false
-      if (aiAssistConfig.classMode === 'auto') {
-        ElMessage.success(`AI检测完成！检测到 ${response.annotations.length} 个目标`)
-      }
-    } else {
-      ElMessage.warning('未检测到任何目标，请尝试降低置信度阈值')
-    }
-    
-  } catch (error) {
-    console.error('AI辅助标注失败:', error)
-    ElMessage.error(error.response?.data?.detail || 'AI辅助标注失败，请检查模型是否存在')
-  } finally {
-    isAIAssisting.value = false
-  }
-}
-
-// 加载可用模型列表
-const loadAvailableModels = async () => {
-  try {
-    const response = await getModels()
-    if (response && response.models) {
-      availableModels.value = response.models
-      // 设置默认模型：优先使用yolo11n.pt
-      if (availableModels.value.length > 0) {
-        const defaultModel = availableModels.value.find(m => m.name === 'yolo11n.pt') || availableModels.value[0]
-        aiAssistConfig.model = defaultModel.path
-      }
-    }
-  } catch (error) {
-    console.error('加载模型列表失败:', error)
-    // 如果加载失败，使用默认值
-    availableModels.value = []
+// 放大查看中间标注区域的当前图片（不占用画布点击，避免与标注操作冲突）
+const openCanvasImagePreview = () => {
+  if (currentImage.value?.url) {
+    showCanvasPreview.value = true
   }
 }
 
@@ -966,13 +730,10 @@ const selectImage = (index) => {
   if (index >= 0 && index < imageList.value.length) {
     currentImageIndex.value = index
     selectedAnnotation.value = -1
-    
-    // 初始化新图片的历史记录
-    history.value = []
-    historyIndex.value = -1
-    saveHistory()
-    
-    loadImageToCanvas()
+    // 等 DOM 更新（如 v-if 显示画布）后再加载图片到画布，否则 canvasRef 可能为 null
+    nextTick(() => {
+      loadImageToCanvas()
+    })
   }
 }
 
@@ -980,18 +741,18 @@ const selectImage = (index) => {
 const deleteImage = async (index) => {
   try {
     const result = await ElMessageBox.confirm(
-      `确定要删除图片 "${imageList.value[index].name}" 吗？`,
-      '删除确认',
-      {
-        confirmButtonText: '删除',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }
+        `确定要删除图片 "${imageList.value[index].name}" 吗？`,
+        '删除确认',
+        {
+          confirmButtonText: '删除',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
     )
-    
+
     if (result === 'confirm') {
       imageList.value.splice(index, 1)
-      
+
       // 调整当前选中的图片索引
       if (imageList.value.length === 0) {
         currentImageIndex.value = -1
@@ -1001,7 +762,7 @@ const deleteImage = async (index) => {
       } else if (currentImageIndex.value === index) {
         loadImageToCanvas()
       }
-      
+
       ElMessage.success('图片已删除')
     }
   } catch (error) {
@@ -1011,24 +772,29 @@ const deleteImage = async (index) => {
 
 const loadImageToCanvas = async () => {
   if (!currentImage.value || !canvasRef.value) return
-  
+
   const canvas = canvasRef.value
   ctx = canvas.getContext('2d')
-  
+
+  // 换图时重置视图缩放与平移
+  viewScale.value = 1
+  viewOffsetX.value = 0
+  viewOffsetY.value = 0
+
   const img = new Image()
   img.onload = () => {
     currentImageObj = img
-    
+
     // 计算合适的缩放比例
     const maxWidth = 800
     const maxHeight = 600
     const scaleX = maxWidth / img.width
     const scaleY = maxHeight / img.height
     scale.value = Math.min(scaleX, scaleY, 1)
-    
+
     canvasWidth.value = img.width * scale.value
     canvasHeight.value = img.height * scale.value
-    
+
     nextTick(() => {
       drawCanvas()
     })
@@ -1038,293 +804,93 @@ const loadImageToCanvas = async () => {
 
 const drawCanvas = () => {
   if (!ctx || !currentImageObj) return
-  
+
   // 清空画布
   ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value)
-  
+
   // 绘制图片
   ctx.drawImage(currentImageObj, 0, 0, canvasWidth.value, canvasHeight.value)
-  
+
   // 绘制标注框
   currentAnnotations.value.forEach((annotation, index) => {
     drawAnnotation(annotation, index === selectedAnnotation.value)
   })
-  
-  // 绘制正在绘制中的多边形
-  if (isDrawingPolygon.value && polygonPoints.value.length > 0) {
-    const points = polygonPoints.value.map(p => ({
-      x: p.x * canvasWidth.value,
-      y: p.y * canvasHeight.value
-    }))
-    
-    ctx.strokeStyle = '#ffff00'
-    ctx.fillStyle = 'rgba(255, 255, 0, 0.1)'
-    ctx.lineWidth = 2
-    
-    // 绘制已有的线段
-    ctx.beginPath()
-    ctx.moveTo(points[0].x, points[0].y)
-    for (let i = 1; i < points.length; i++) {
-      ctx.lineTo(points[i].x, points[i].y)
-    }
-    ctx.stroke()
-    
-    // 如果有足够的点，显示填充预览
-    if (points.length >= 3) {
-      ctx.fill()
-    }
-    
-    // 绘制顶点
-    points.forEach((point, index) => {
-      ctx.fillStyle = '#ffff00'
-      ctx.beginPath()
-      ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI)
-      ctx.fill()
-      
-      // 第一个点用不同颜色标识
-      if (index === 0) {
-        ctx.strokeStyle = '#ff0000'
-        ctx.lineWidth = 2
-        ctx.stroke()
-      }
-    })
-  }
 }
 
 const drawAnnotation = (annotation, isSelected = false) => {
   if (!ctx) return
-  
-  // 根据标注类型绘制
-  if (annotation.type === 'polygon' && annotation.points && annotation.points.length > 0) {
-    // 绘制多边形
-    const points = annotation.points.map(p => ({
-      x: p.x * canvasWidth.value,
-      y: p.y * canvasHeight.value
-    }))
-    
-    ctx.strokeStyle = isSelected ? '#ff0000' : '#00ff00'
-    ctx.fillStyle = isSelected ? 'rgba(255, 0, 0, 0.1)' : 'rgba(0, 255, 0, 0.1)'
-    ctx.lineWidth = isSelected ? 3 : 2
-    
-    // 绘制多边形填充
-    ctx.beginPath()
-    ctx.moveTo(points[0].x, points[0].y)
-    for (let i = 1; i < points.length; i++) {
-      ctx.lineTo(points[i].x, points[i].y)
-    }
-    ctx.closePath()
-    ctx.fill()
-    ctx.stroke()
-    
-    // 绘制顶点
-    points.forEach((point, index) => {
-      ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
-      ctx.beginPath()
-      ctx.arc(point.x, point.y, isSelected ? 5 : 3, 0, 2 * Math.PI)
-      ctx.fill()
-    })
-    
-    // 绘制类别标签
-    const label = classList.value[annotation.class] || `未定义 (${annotation.class})`
-    ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
-    ctx.font = '14px Arial'
-    const textWidth = ctx.measureText(label).width
-    
-    const firstPoint = points[0]
-    ctx.fillRect(firstPoint.x, firstPoint.y - 20, textWidth + 8, 20)
-    ctx.fillStyle = 'white'
-    ctx.fillText(label, firstPoint.x + 4, firstPoint.y - 6)
-    
-  } else {
-    // 绘制矩形框
-    const x = annotation.x * canvasWidth.value
-    const y = annotation.y * canvasHeight.value
-    const width = annotation.width * canvasWidth.value
-    const height = annotation.height * canvasHeight.value
-    
-    // 绘制边界框
-    ctx.strokeStyle = isSelected ? '#ff0000' : '#00ff00'
-    ctx.lineWidth = isSelected ? 3 : 2
-    ctx.strokeRect(x, y, width, height)
-    
-    // 绘制类别标签
-    const label = classList.value[annotation.class] || `未定义 (${annotation.class})`
-    ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
-    ctx.font = '14px Arial'
-    const textWidth = ctx.measureText(label).width
-    
-    ctx.fillRect(x, y - 20, textWidth + 8, 20)
-    ctx.fillStyle = 'white'
-    ctx.fillText(label, x + 4, y - 6)
-    
-    // 如果被选中，绘制调整手柄
-    if (isSelected) {
-      const handleSize = 6
-      ctx.fillStyle = '#ff0000'
-      
-      // 四个角
-      ctx.fillRect(x - handleSize/2, y - handleSize/2, handleSize, handleSize)
-      ctx.fillRect(x + width - handleSize/2, y - handleSize/2, handleSize, handleSize)
-      ctx.fillRect(x - handleSize/2, y + height - handleSize/2, handleSize, handleSize)
-      ctx.fillRect(x + width - handleSize/2, y + height - handleSize/2, handleSize, handleSize)
-      
-      // 四条边的中点
-      ctx.fillRect(x + width/2 - handleSize/2, y - handleSize/2, handleSize, handleSize)
-      ctx.fillRect(x + width/2 - handleSize/2, y + height - handleSize/2, handleSize, handleSize)
-      ctx.fillRect(x - handleSize/2, y + height/2 - handleSize/2, handleSize, handleSize)
-      ctx.fillRect(x + width - handleSize/2, y + height/2 - handleSize/2, handleSize, handleSize)
-    }
-  }
+
+  const x = annotation.x * canvasWidth.value
+  const y = annotation.y * canvasHeight.value
+  const width = annotation.width * canvasWidth.value
+  const height = annotation.height * canvasHeight.value
+
+  // 绘制边界框
+  ctx.strokeStyle = isSelected ? '#ff0000' : '#00ff00'
+  ctx.lineWidth = isSelected ? 3 : 2
+  ctx.strokeRect(x, y, width, height)
+
+  // 绘制类别标签
+  const label = classList.value[annotation.class]
+  ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
+  ctx.font = '14px Arial'
+  const textWidth = ctx.measureText(label).width
+
+  ctx.fillRect(x, y - 20, textWidth + 8, 20)
+  ctx.fillStyle = 'white'
+  ctx.fillText(label, x + 4, y - 6)
 }
 
+// 将视口上的鼠标事件转换为画布归一化坐标 (0-1)，考虑缩放、平移和滚动
 const getCanvasCoordinates = (event) => {
-  const canvas = canvasRef.value
-  const rect = canvas.getBoundingClientRect()
+  const viewport = canvasViewportRef.value
+  if (!viewport) return {x: 0, y: 0}
+  const rect = viewport.getBoundingClientRect()
+  const vx = event.clientX - rect.left + viewport.scrollLeft - panMargin - viewOffsetX.value
+  const vy = event.clientY - rect.top + viewport.scrollTop - panMargin - viewOffsetY.value
+  const contentX = vx / viewScale.value
+  const contentY = vy / viewScale.value
   return {
-    x: (event.clientX - rect.left) / canvasWidth.value,
-    y: (event.clientY - rect.top) / canvasHeight.value
+    x: contentX / canvasWidth.value,
+    y: contentY / canvasHeight.value
   }
 }
 
-// 检测鼠标是否在标注框的调整手柄上
-const getResizeHandle = (coords, annotation) => {
-  const handleSize = 8 / canvasWidth.value // 8像素的手柄大小
-  const x = annotation.x
-  const y = annotation.y
-  const w = annotation.width
-  const h = annotation.height
-  
-  // 四个角
-  if (Math.abs(coords.x - x) < handleSize && Math.abs(coords.y - y) < handleSize) return 'tl'
-  if (Math.abs(coords.x - (x + w)) < handleSize && Math.abs(coords.y - y) < handleSize) return 'tr'
-  if (Math.abs(coords.x - x) < handleSize && Math.abs(coords.y - (y + h)) < handleSize) return 'bl'
-  if (Math.abs(coords.x - (x + w)) < handleSize && Math.abs(coords.y - (y + h)) < handleSize) return 'br'
-  
-  // 四条边
-  if (Math.abs(coords.x - x) < handleSize && coords.y >= y && coords.y <= y + h) return 'l'
-  if (Math.abs(coords.x - (x + w)) < handleSize && coords.y >= y && coords.y <= y + h) return 'r'
-  if (Math.abs(coords.y - y) < handleSize && coords.x >= x && coords.x <= x + w) return 't'
-  if (Math.abs(coords.y - (y + h)) < handleSize && coords.x >= x && coords.x <= x + w) return 'b'
-  
-  return ''
-}
-
-// 检测鼠标是否在标注框内部
-const isInsideAnnotation = (coords, annotation) => {
-  if (annotation.type === 'polygon' && annotation.points) {
-    // 使用射线法判断点是否在多边形内
-    return isPointInPolygon(coords, annotation.points)
-  } else {
-    // 矩形判断
-    return coords.x >= annotation.x && 
-           coords.x <= annotation.x + annotation.width &&
-           coords.y >= annotation.y && 
-           coords.y <= annotation.y + annotation.height
+const handleCanvasViewportMouseDown = (event) => {
+  if (event.button === 2) {
+    isPanning.value = true
+    lastPanPoint.value = {x: event.clientX, y: event.clientY}
+    return
   }
+  if (event.button === 0) handleMouseDown(event)
 }
 
-// 射线法判断点是否在多边形内
-const isPointInPolygon = (point, polygonPoints) => {
-  let inside = false
-  for (let i = 0, j = polygonPoints.length - 1; i < polygonPoints.length; j = i++) {
-    const xi = polygonPoints[i].x, yi = polygonPoints[i].y
-    const xj = polygonPoints[j].x, yj = polygonPoints[j].y
-    
-    const intersect = ((yi > point.y) !== (yj > point.y)) &&
-      (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi)
-    if (intersect) inside = !inside
+const handleCanvasViewportMouseMove = (event) => {
+  if (isPanning.value) {
+    viewOffsetX.value += event.clientX - lastPanPoint.value.x
+    viewOffsetY.value += event.clientY - lastPanPoint.value.y
+    lastPanPoint.value = {x: event.clientX, y: event.clientY}
+    return
   }
-  return inside
-}
-
-// 检测鼠标是否在多边形顶点附近
-const getNearbyPolygonPoint = (coords, annotation) => {
-  if (annotation.type !== 'polygon' || !annotation.points) return -1
-  
-  const threshold = 10 / canvasWidth.value // 10像素的容差
-  for (let i = 0; i < annotation.points.length; i++) {
-    const point = annotation.points[i]
-    const distance = Math.sqrt(
-      Math.pow(coords.x - point.x, 2) + Math.pow(coords.y - point.y, 2)
-    )
-    if (distance < threshold) return i
+  handleMouseMove(event)
+}
+
+const handleCanvasViewportMouseUp = (event) => {
+  if (event.button === 2) {
+    isPanning.value = false
+    return
   }
-  return -1
+  if (event.button === 0) handleMouseUp(event)
 }
 
 const handleMouseDown = (event) => {
   if (!currentImage.value) return
-  
+
   const coords = getCanvasCoordinates(event)
-  
-  if (currentTool.value === 'polygon') {
-    // 多边形绘制模式
-    if (!isDrawingPolygon.value) {
-      // 开始绘制新多边形
-      isDrawingPolygon.value = true
-      polygonPoints.value = [coords]
-      selectedAnnotation.value = -1
-    } else {
-      // 检查是否点击在起始点附近（完成多边形）
-      const firstPoint = polygonPoints.value[0]
-      const distance = Math.sqrt(
-        Math.pow((coords.x - firstPoint.x) * canvasWidth.value, 2) + 
-        Math.pow((coords.y - firstPoint.y) * canvasHeight.value, 2)
-      )
-      
-      if (distance < 10 && polygonPoints.value.length >= 3) {
-        // 完成多边形
-        const annotation = {
-          type: 'polygon',
-          class: currentClass.value,
-          points: [...polygonPoints.value]
-        }
-        currentImage.value.annotations.push(annotation)
-        selectedAnnotation.value = currentImage.value.annotations.length - 1
-        
-        // 重置状态
-        isDrawingPolygon.value = false
-        polygonPoints.value = []
-        
-        saveHistory()
-        drawCanvas()
-        ElMessage.success('多边形标注已完成')
-      } else {
-        // 添加新点
-        polygonPoints.value.push(coords)
-        drawCanvas()
-      }
-    }
-  } else if (currentTool.value === 'rect') {
-    // 检查是否点击在已选中的标注框上
-    if (selectedAnnotation.value >= 0) {
-      const annotation = currentAnnotations.value[selectedAnnotation.value]
-      
-      // 只对矩形标注处理调整手柄
-      if (annotation.type !== 'polygon') {
-        // 检查是否点击在调整手柄上
-        const handle = getResizeHandle(coords, annotation)
-        if (handle) {
-          isResizing.value = true
-          resizeHandle.value = handle
-          resizeStartAnnotation.value = { ...annotation }
-          dragStartPos.value = coords
-          return
-        }
-      }
-      
-      // 检查是否点击在标注框内部（拖动）
-      if (isInsideAnnotation(coords, annotation)) {
-        isDragging.value = true
-        dragStartPos.value = coords
-        return
-      }
-    }
-    
-    // 否则开始绘制新的标注框
+
+  if (currentTool.value === 'rect') {
     isDrawing.value = true
     startPoint.value = coords
-    selectedAnnotation.value = -1
   } else if (currentTool.value === 'select') {
     selectAnnotationAt(coords)
   } else if (currentTool.value === 'delete') {
@@ -1333,213 +899,55 @@ const handleMouseDown = (event) => {
 }
 
 const handleMouseMove = (event) => {
+  if (!isDrawing.value || currentTool.value !== 'rect') return
+
   const coords = getCanvasCoordinates(event)
-  
-  // 多边形绘制时显示实时预览线
-  if (isDrawingPolygon.value && polygonPoints.value.length > 0) {
-    drawCanvas()
-    
-    // 绘制从最后一个点到鼠标位置的预览线
-    const lastPoint = polygonPoints.value[polygonPoints.value.length - 1]
-    ctx.strokeStyle = '#ffff00'
-    ctx.lineWidth = 2
-    ctx.setLineDash([5, 5])
-    ctx.beginPath()
-    ctx.moveTo(lastPoint.x * canvasWidth.value, lastPoint.y * canvasHeight.value)
-    ctx.lineTo(coords.x * canvasWidth.value, coords.y * canvasHeight.value)
-    ctx.stroke()
-    ctx.setLineDash([])
-    
-    // 如果鼠标靠近起始点，高亮起始点
-    const firstPoint = polygonPoints.value[0]
-    const distance = Math.sqrt(
-      Math.pow((coords.x - firstPoint.x) * canvasWidth.value, 2) + 
-      Math.pow((coords.y - firstPoint.y) * canvasHeight.value, 2)
-    )
-    if (distance < 10 && polygonPoints.value.length >= 3) {
-      ctx.fillStyle = '#ff0000'
-      ctx.beginPath()
-      ctx.arc(firstPoint.x * canvasWidth.value, firstPoint.y * canvasHeight.value, 8, 0, 2 * Math.PI)
-      ctx.fill()
-    }
-    
-    return
-  }
-  
-  // 处理拖动标注框
-  if (isDragging.value && selectedAnnotation.value >= 0) {
-    const annotation = currentAnnotations.value[selectedAnnotation.value]
-    const dx = coords.x - dragStartPos.value.x
-    const dy = coords.y - dragStartPos.value.y
-    
-    if (annotation.type === 'polygon' && annotation.points) {
-      // 拖动多边形
-      annotation.points = annotation.points.map(p => ({
-        x: Math.max(0, Math.min(1, p.x + dx)),
-        y: Math.max(0, Math.min(1, p.y + dy))
-      }))
-    } else {
-      // 拖动矩形
-      annotation.x = Math.max(0, Math.min(1 - annotation.width, annotation.x + dx))
-      annotation.y = Math.max(0, Math.min(1 - annotation.height, annotation.y + dy))
-    }
-    
-    dragStartPos.value = coords
-    drawCanvas()
-    return
-  }
-  
-  // 处理调整标注框大小（仅矩形）
-  if (isResizing.value && selectedAnnotation.value >= 0) {
-    const annotation = currentAnnotations.value[selectedAnnotation.value]
-    const start = resizeStartAnnotation.value
-    const dx = coords.x - dragStartPos.value.x
-    const dy = coords.y - dragStartPos.value.y
-    
-    switch (resizeHandle.value) {
-      case 'tl':
-        annotation.x = start.x + dx
-        annotation.y = start.y + dy
-        annotation.width = start.width - dx
-        annotation.height = start.height - dy
-        break
-      case 'tr':
-        annotation.y = start.y + dy
-        annotation.width = start.width + dx
-        annotation.height = start.height - dy
-        break
-      case 'bl':
-        annotation.x = start.x + dx
-        annotation.width = start.width - dx
-        annotation.height = start.height + dy
-        break
-      case 'br':
-        annotation.width = start.width + dx
-        annotation.height = start.height + dy
-        break
-      case 'l':
-        annotation.x = start.x + dx
-        annotation.width = start.width - dx
-        break
-      case 'r':
-        annotation.width = start.width + dx
-        break
-      case 't':
-        annotation.y = start.y + dy
-        annotation.height = start.height - dy
-        break
-      case 'b':
-        annotation.height = start.height + dy
-        break
-    }
-    
-    // 确保宽高不为负
-    if (annotation.width < 0) {
-      annotation.x += annotation.width
-      annotation.width = -annotation.width
-    }
-    if (annotation.height < 0) {
-      annotation.y += annotation.height
-      annotation.height = -annotation.height
-    }
-    
-    // 限制在画布范围内
-    annotation.x = Math.max(0, Math.min(1, annotation.x))
-    annotation.y = Math.max(0, Math.min(1, annotation.y))
-    annotation.width = Math.max(0.01, Math.min(1 - annotation.x, annotation.width))
-    annotation.height = Math.max(0.01, Math.min(1 - annotation.y, annotation.height))
-    
-    drawCanvas()
-    return
-  }
-  
-  // 处理绘制新标注框
-  if (isDrawing.value && currentTool.value === 'rect') {
-    drawCanvas()
-    
-    // 绘制预览框
-    const x = Math.min(startPoint.value.x, coords.x) * canvasWidth.value
-    const y = Math.min(startPoint.value.y, coords.y) * canvasHeight.value
-    const width = Math.abs(coords.x - startPoint.value.x) * canvasWidth.value
-    const height = Math.abs(coords.y - startPoint.value.y) * canvasHeight.value
-    
-    ctx.strokeStyle = '#ffff00'
-    ctx.lineWidth = 2
-    ctx.strokeRect(x, y, width, height)
-    return
-  }
-  
-  // 更新鼠标样式
-  if (currentTool.value === 'rect' && selectedAnnotation.value >= 0) {
-    const annotation = currentAnnotations.value[selectedAnnotation.value]
-    const handle = getResizeHandle(coords, annotation)
-    
-    if (handle) {
-      const cursors = {
-        'tl': 'nw-resize',
-        'tr': 'ne-resize',
-        'bl': 'sw-resize',
-        'br': 'se-resize',
-        'l': 'w-resize',
-        'r': 'e-resize',
-        't': 'n-resize',
-        'b': 's-resize'
-      }
-      canvasRef.value.style.cursor = cursors[handle]
-    } else if (isInsideAnnotation(coords, annotation)) {
-      canvasRef.value.style.cursor = 'move'
-    } else {
-      canvasRef.value.style.cursor = 'crosshair'
-    }
-  }
+  drawCanvas()
+
+  // 绘制预览框
+  const x = Math.min(startPoint.value.x, coords.x) * canvasWidth.value
+  const y = Math.min(startPoint.value.y, coords.y) * canvasHeight.value
+  const width = Math.abs(coords.x - startPoint.value.x) * canvasWidth.value
+  const height = Math.abs(coords.y - startPoint.value.y) * canvasHeight.value
+
+  ctx.strokeStyle = '#ffff00'
+  ctx.lineWidth = 2
+  ctx.strokeRect(x, y, width, height)
 }
 
 const handleMouseUp = (event) => {
-  // 结束拖动或调整
-  if (isDragging.value || isResizing.value) {
-    isDragging.value = false
-    isResizing.value = false
-    resizeHandle.value = ''
-    resizeStartAnnotation.value = null
-    saveHistory() // 保存历史记录
-    return
-  }
-  
-  // 处理绘制新标注框
-  if (isDrawing.value && currentTool.value === 'rect') {
-    const coords = getCanvasCoordinates(event)
-    
-    const x = Math.min(startPoint.value.x, coords.x)
-    const y = Math.min(startPoint.value.y, coords.y)
-    const width = Math.abs(coords.x - startPoint.value.x)
-    const height = Math.abs(coords.y - startPoint.value.y)
-    
-    // 只有在有效大小时才创建标注
-    if (width > 0.01 && height > 0.01) {
-      const annotation = {
-        class: currentClass.value,
-        x: x,
-        y: y,
-        width: width,
-        height: height
-      }
-      
-      currentImage.value.annotations.push(annotation)
-      selectedAnnotation.value = currentImage.value.annotations.length - 1
-      saveHistory() // 保存历史记录
-      drawCanvas()
+  if (!isDrawing.value || currentTool.value !== 'rect') return
+
+  const coords = getCanvasCoordinates(event)
+
+  const x = Math.min(startPoint.value.x, coords.x)
+  const y = Math.min(startPoint.value.y, coords.y)
+  const width = Math.abs(coords.x - startPoint.value.x)
+  const height = Math.abs(coords.y - startPoint.value.y)
+
+  // 只有在有效大小时才创建标注
+  if (width > 0.01 && height > 0.01) {
+    const annotation = {
+      class: currentClass.value,
+      x: x,
+      y: y,
+      width: width,
+      height: height
     }
-    
-    isDrawing.value = false
+
+    currentImage.value.annotations.push(annotation)
+    drawCanvas()
   }
+
+  isDrawing.value = false
 }
 
 const selectAnnotationAt = (coords) => {
   for (let i = currentAnnotations.value.length - 1; i >= 0; i--) {
     const annotation = currentAnnotations.value[i]
-    if (coords.x >= annotation.x && 
+    if (coords.x >= annotation.x &&
         coords.x <= annotation.x + annotation.width &&
-        coords.y >= annotation.y && 
+        coords.y >= annotation.y &&
         coords.y <= annotation.y + annotation.height) {
       selectedAnnotation.value = i
       drawCanvas()
@@ -1553,9 +961,9 @@ const selectAnnotationAt = (coords) => {
 const deleteAnnotationAt = (coords) => {
   for (let i = currentAnnotations.value.length - 1; i >= 0; i--) {
     const annotation = currentAnnotations.value[i]
-    if (coords.x >= annotation.x && 
+    if (coords.x >= annotation.x &&
         coords.x <= annotation.x + annotation.width &&
-        coords.y >= annotation.y && 
+        coords.y >= annotation.y &&
         coords.y <= annotation.y + annotation.height) {
       currentImage.value.annotations.splice(i, 1)
       selectedAnnotation.value = -1
@@ -1573,36 +981,64 @@ const selectAnnotation = (index) => {
 const deleteAnnotation = (index) => {
   currentImage.value.annotations.splice(index, 1)
   selectedAnnotation.value = -1
-  saveHistory() // 保存历史记录
   drawCanvas()
 }
 
 const handleWheel = (event) => {
+  if (!currentImage.value) return
   event.preventDefault()
-  // TODO: 实现缩放功能
-}
-
-// 处理右键点击
-const handleRightClick = (event) => {
-  event.preventDefault() // 阻止默认右键菜单
-  
-  // 如果正在绘制多边形，右键取消
-  if (isDrawingPolygon.value) {
-    cancelPolygon()
-  }
-}
-
-// 取消多边形绘制
-const cancelPolygon = () => {
-  isDrawingPolygon.value = false
-  polygonPoints.value = []
-  drawCanvas()
-  ElMessage.info('已取消多边形绘制')
+  const viewport = canvasViewportRef.value
+  if (!viewport) return
+  const rect = viewport.getBoundingClientRect()
+  const vx = event.clientX - rect.left + viewport.scrollLeft - panMargin - viewOffsetX.value
+  const vy = event.clientY - rect.top + viewport.scrollTop - panMargin - viewOffsetY.value
+  const contentX = vx / viewScale.value
+  const contentY = vy / viewScale.value
+  const factor = event.deltaY > 0 ? 1 / 1.15 : 1.15
+  let newScale = viewScale.value * factor
+  newScale = Math.max(viewScaleMin, Math.min(viewScaleMax, newScale))
+  viewOffsetX.value = (event.clientX - rect.left + viewport.scrollLeft - panMargin) - contentX * newScale
+  viewOffsetY.value = (event.clientY - rect.top + viewport.scrollTop - panMargin) - contentY * newScale
+  viewScale.value = newScale
+}
+
+const canvasZoomIn = () => {
+  const viewport = canvasViewportRef.value
+  if (!viewport) return
+  const rect = viewport.getBoundingClientRect()
+  const cx = rect.width / 2 + viewport.scrollLeft - panMargin
+  const cy = rect.height / 2 + viewport.scrollTop - panMargin
+  const contentX = (cx - viewOffsetX.value) / viewScale.value
+  const contentY = (cy - viewOffsetY.value) / viewScale.value
+  const newScale = Math.min(viewScaleMax, viewScale.value * 1.25)
+  viewOffsetX.value = cx - contentX * newScale
+  viewOffsetY.value = cy - contentY * newScale
+  viewScale.value = newScale
+}
+
+const canvasZoomOut = () => {
+  const viewport = canvasViewportRef.value
+  if (!viewport) return
+  const rect = viewport.getBoundingClientRect()
+  const cx = rect.width / 2 + viewport.scrollLeft - panMargin
+  const cy = rect.height / 2 + viewport.scrollTop - panMargin
+  const contentX = (cx - viewOffsetX.value) / viewScale.value
+  const contentY = (cy - viewOffsetY.value) / viewScale.value
+  const newScale = Math.max(viewScaleMin, viewScale.value / 1.25)
+  viewOffsetX.value = cx - contentX * newScale
+  viewOffsetY.value = cy - contentY * newScale
+  viewScale.value = newScale
+}
+
+const canvasZoomReset = () => {
+  viewScale.value = 1
+  viewOffsetX.value = 0
+  viewOffsetY.value = 0
 }
 
 const saveAnnotations = () => {
   if (!currentImage.value) return
-  
+
   const annotations = currentImage.value.annotations
   const yoloFormat = annotations.map(ann => {
     // 转换为YOLO相对坐标格式
@@ -1610,14 +1046,14 @@ const saveAnnotations = () => {
     const centerY = (ann.y + ann.height / 2) / currentImage.value.height
     const width = ann.width / currentImage.value.width
     const height = ann.height / currentImage.value.height
-    
+
     return `${ann.class} ${centerX.toFixed(6)} ${centerY.toFixed(6)} ${width.toFixed(6)} ${height.toFixed(6)}`
   }).join('\n')
-  
+
   const fileName = currentImage.value.name.replace(/\.[^/.]+$/, '') + '.txt'
-  const blob = new Blob([yoloFormat], { type: 'text/plain' })
+  const blob = new Blob([yoloFormat], {type: 'text/plain'})
   saveAs(blob, fileName)
-  
+
   ElMessage.success('标注文件已保存')
 }
 
@@ -1630,39 +1066,22 @@ const showDataAugmentationDialog = () => {
 
 const generatePreview = async () => {
   if (!currentImage.value) return
-  
+
   isGeneratingPreview.value = true
   try {
     // 生成3个预览样本
     const previews = []
     for (let i = 0; i < 3; i++) {
-      // 生成随机变换参数
-      const transformParams = {
-        rotation: augmentationConfig.rotation ? (Math.random() - 0.5) * 30 : 0,
-        scaleX: 1,
-        scaleY: 1,
-        flipX: false,
-        flipY: false
-      }
-      
-      if (augmentationConfig.scale) {
-        transformParams.scaleX = 0.9 + Math.random() * 0.2;
-        transformParams.scaleY = 0.9 + Math.random() * 0.2;
-      }
-      
-      if (augmentationConfig.flip) {
-        if (Math.random() > 0.5) transformParams.flipX = true;
-        if (Math.random() > 0.5) transformParams.flipY = true;
-      }
-      
-      const augmentedImage = await applyImageAugmentation(currentImage.value.url, transformParams)
+      const augmentedImage = await applyImageAugmentation(currentImage.value.url, {
+        ...augmentationConfig,
+        seed: i
+      })
       previews.push(augmentedImage)
     }
     augmentationPreview.value = previews
     ElMessage.success('预览生成完成')
   } catch (error) {
-    console.error('预览生成失败:', error)
-    ElMessage.error('预览生成失败: ' + error.message)
+    ElMessage.error('预览生成失败')
   } finally {
     isGeneratingPreview.value = false
   }
@@ -1670,45 +1089,19 @@ const generatePreview = async () => {
 
 const applyDataAugmentation = async () => {
   if (!currentImage.value) return
-  
+
   isApplyingAugmentation.value = true
   try {
     const originalImage = currentImage.value
     const newImages = []
-    
+
     // 生成增强图片
     for (let i = 0; i < augmentationConfig.count; i++) {
-      // 生成随机变换参数
-      const transformParams = {
-        rotation: augmentationConfig.rotation ? (Math.random() - 0.5) * 30 : 0, // ±15度
-        scaleX: 1,
-        scaleY: 1,
-        flipX: false,
-        flipY: false
-      }
-      
-      // 缩放变换
-      if (augmentationConfig.scale) {
-        transformParams.scaleX = 0.9 + Math.random() * 0.2; // 0.9-1.1
-        transformParams.scaleY = 0.9 + Math.random() * 0.2;
-      }
-      
-      // 翻转变换
-      if (augmentationConfig.flip) {
-        if (Math.random() > 0.5) transformParams.flipX = true;
-        if (Math.random() > 0.5) transformParams.flipY = true;
-      }
-      
-      const augmentedImageUrl = await applyImageAugmentation(originalImage.url, transformParams)
-      
-      // 变换标注坐标
-      const transformedAnnotations = transformAnnotations(
-        originalImage.annotations, 
-        originalImage.width, 
-        originalImage.height,
-        transformParams
-      )
-      
+      const augmentedImageUrl = await applyImageAugmentation(originalImage.url, {
+        ...augmentationConfig,
+        seed: i
+      })
+
       // 创建新的图片对象
       const newImage = {
         id: Date.now() + i,
@@ -1716,168 +1109,140 @@ const applyDataAugmentation = async () => {
         url: augmentedImageUrl,
         width: originalImage.width,
         height: originalImage.height,
-        annotations: transformedAnnotations
+        annotations: [...originalImage.annotations] // 复制原始标注
       }
-      
+
       newImages.push(newImage)
     }
-    
+
     // 添加到图片列表
     imageList.value.push(...newImages)
-    
+
     ElMessage.success(`成功生成 ${augmentationConfig.count} 张增强图片`)
     showAugmentationDialog.value = false
-    
+
   } catch (error) {
-    console.error('数据增强失败:', error)
-    ElMessage.error('数据增强失败: ' + error.message)
+    ElMessage.error('数据增强失败')
   } finally {
     isApplyingAugmentation.value = false
   }
 }
 
-// 标注坐标变换函数
-const transformAnnotations = (annotations, imgWidth, imgHeight, transformParams) => {
-  return annotations.map(annotation => {
-    // 获取原始标注框的中心点和尺寸
-    const centerX = annotation.x + annotation.width / 2
-    const centerY = annotation.y + annotation.height / 2
-    const width = annotation.width
-    const height = annotation.height
-    
-    // 转换为中心点坐标系 (-0.5 到 0.5)
-    let x = centerX - 0.5
-    let y = centerY - 0.5
-    
-    // 应用旋转变换
-    if (transformParams.rotation !== 0) {
-      const cos = Math.cos(transformParams.rotation * Math.PI / 180)
-      const sin = Math.sin(transformParams.rotation * Math.PI / 180)
-      const newX = x * cos - y * sin
-      const newY = x * sin + y * cos
-      x = newX
-      y = newY
-    }
-    
-    // 应用缩放变换
-    x *= transformParams.scaleX
-    y *= transformParams.scaleY
-    const newWidth = width * Math.abs(transformParams.scaleX)
-    const newHeight = height * Math.abs(transformParams.scaleY)
-    
-    // 应用翻转变换
-    if (transformParams.flipX) {
-      x = -x
-    }
-    if (transformParams.flipY) {
-      y = -y
-    }
-    
-    // 转换回图像坐标系 (0 到 1)
-    const newCenterX = x + 0.5
-    const newCenterY = y + 0.5
-    
-    // 确保坐标在有效范围内
-    if (newCenterX < 0 || newCenterX > 1 || newCenterY < 0 || newCenterY > 1 ||
-        newWidth <= 0 || newWidth > 1 || newHeight <= 0 || newHeight > 1) {
-      // 如果变换后超出范围，则返回null表示该标注应该被过滤掉
-      return null
-    }
-    
-    // 创建新的标注对象
-    return {
-      ...annotation,
-      x: newCenterX - newWidth / 2,
-      y: newCenterY - newHeight / 2,
-      width: newWidth,
-      height: newHeight
-    }
-  }).filter(annotation => annotation !== null) // 过滤掉超出范围的标注
-}
-
 // 图片增强处理函数
-const applyImageAugmentation = async (imageUrl, transformParams) => {
+const applyImageAugmentation = async (imageUrl, config) => {
   return new Promise((resolve) => {
     const img = new Image()
     img.crossOrigin = 'anonymous'
-    
+
     img.onload = () => {
       const canvas = document.createElement('canvas')
       const ctx = canvas.getContext('2d')
-      
+
       canvas.width = img.width
       canvas.height = img.height
-      
+
       // 应用变换
       ctx.save()
-      
+
       // 设置变换中心点
       const centerX = canvas.width / 2
       const centerY = canvas.height / 2
       ctx.translate(centerX, centerY)
-      
+
       // 旋转
-      if (transformParams.rotation) {
-        const angle = transformParams.rotation * Math.PI / 180
+      if (config.rotation) {
+        const angle = (Math.random() - 0.5) * 30 * Math.PI / 180 // ±15度
         ctx.rotate(angle)
       }
-      
-      // 缩放和翻转
-      const scaleX = transformParams.flipX ? -transformParams.scaleX : transformParams.scaleX
-      const scaleY = transformParams.flipY ? -transformParams.scaleY : transformParams.scaleY
-      ctx.scale(scaleX, scaleY)
-      
+
+      // 缩放
+      if (config.scale) {
+        const scaleX = config.flip && Math.random() > 0.5 ? -(0.9 + Math.random() * 0.2) : (0.9 + Math.random() * 0.2)
+        const scaleY = config.flip && Math.random() > 0.5 ? -(0.9 + Math.random() * 0.2) : (0.9 + Math.random() * 0.2)
+        ctx.scale(scaleX, scaleY)
+      } else if (config.flip) {
+        const flipX = Math.random() > 0.5 ? -1 : 1
+        const flipY = Math.random() > 0.5 ? -1 : 1
+        ctx.scale(flipX, flipY)
+      }
+
       // 绘制图片
       ctx.drawImage(img, -img.width / 2, -img.height / 2)
       ctx.restore()
-      
+
+      // 应用颜色调整
+      if (config.brightness || config.contrast) {
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+        const data = imageData.data
+
+        const brightness = config.brightness ? (0.8 + Math.random() * 0.4) : 1 // 0.8-1.2
+        const contrast = config.contrast ? (0.8 + Math.random() * 0.4) : 1 // 0.8-1.2
+
+        for (let i = 0; i < data.length; i += 4) {
+          // 应用亮度和对比度
+          data[i] = Math.min(255, Math.max(0, (data[i] - 128) * contrast + 128 + (brightness - 1) * 50))     // R
+          data[i + 1] = Math.min(255, Math.max(0, (data[i + 1] - 128) * contrast + 128 + (brightness - 1) * 50)) // G
+          data[i + 2] = Math.min(255, Math.max(0, (data[i + 2] - 128) * contrast + 128 + (brightness - 1) * 50)) // B
+
+          // 添加噪声
+          if (config.noise) {
+            const noise = (Math.random() - 0.5) * 20
+            data[i] = Math.min(255, Math.max(0, data[i] + noise))
+            data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noise))
+            data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noise))
+          }
+        }
+
+        ctx.putImageData(imageData, 0, 0)
+      }
+
       resolve(canvas.toDataURL('image/png'))
     }
-    
+
     img.src = imageUrl
   })
 }
 
 const exportDataset = async () => {
   if (imageList.value.length === 0) return
-  
+
   try {
     const result = await ElMessageBox.confirm(
-      '是否导出完整数据集？将包含所有图片和标注文件。',
-      '导出数据集',
-      {
-        confirmButtonText: '导出',
-        cancelButtonText: '取消'
-      }
+        '是否导出完整数据集？将包含所有图片和标注文件。',
+        '导出数据集',
+        {
+          confirmButtonText: '导出',
+          cancelButtonText: '取消'
+        }
     )
-    
+
     if (result === 'confirm') {
       // 创建ZIP文件
       const JSZip = (await import('jszip')).default
       const zip = new JSZip()
-      
+
       // 计算数据分割（80%训练，20%验证）
       const totalImages = imageList.value.length
       const trainCount = Math.floor(totalImages * 0.8)
       const valCount = totalImages - trainCount
-      
+
       // 随机打乱图片顺序
       const shuffledImages = [...imageList.value].sort(() => Math.random() - 0.5)
       const trainImages = shuffledImages.slice(0, trainCount)
       const valImages = shuffledImages.slice(trainCount)
-      
+
       // 添加训练集
       for (const image of trainImages) {
         // 添加训练图片
         const imageBlob = await fetch(image.url).then(r => r.blob())
         zip.file(`train/images/${image.name}`, imageBlob)
-        
+
         // 添加训练标注文件
         if (image.annotations.length > 0) {
           const annotations = image.annotations.map(ann => {
             // 检查坐标是否已经是相对坐标（0-1之间）
             let centerX, centerY, width, height
-            
+
             if (ann.x <= 1 && ann.y <= 1 && ann.width <= 1 && ann.height <= 1) {
               // 已经是相对坐标，直接使用
               centerX = ann.x + ann.width / 2
@@ -1891,27 +1256,27 @@ const exportDataset = async () => {
               width = ann.width / image.width
               height = ann.height / image.height
             }
-            
+
             return `${ann.class} ${centerX.toFixed(6)} ${centerY.toFixed(6)} ${width.toFixed(6)} ${height.toFixed(6)}`
           }).join('\n')
-          
+
           const labelFileName = image.name.replace(/\.[^/.]+$/, '') + '.txt'
           zip.file(`train/labels/${labelFileName}`, annotations)
         }
       }
-      
+
       // 添加验证集
       for (const image of valImages) {
         // 添加验证图片
         const imageBlob = await fetch(image.url).then(r => r.blob())
         zip.file(`val/images/${image.name}`, imageBlob)
-        
+
         // 添加验证标注文件
         if (image.annotations.length > 0) {
           const annotations = image.annotations.map(ann => {
             // 检查坐标是否已经是相对坐标（0-1之间）
             let centerX, centerY, width, height
-            
+
             if (ann.x <= 1 && ann.y <= 1 && ann.width <= 1 && ann.height <= 1) {
               // 已经是相对坐标，直接使用
               centerX = ann.x + ann.width / 2
@@ -1925,23 +1290,23 @@ const exportDataset = async () => {
               width = ann.width / image.width
               height = ann.height / image.height
             }
-            
+
             return `${ann.class} ${centerX.toFixed(6)} ${centerY.toFixed(6)} ${width.toFixed(6)} ${height.toFixed(6)}`
           }).join('\n')
-          
+
           const labelFileName = image.name.replace(/\.[^/.]+$/, '') + '.txt'
           zip.file(`val/labels/${labelFileName}`, annotations)
         }
       }
-      
+
       // 创建测试集目录（即使为空）
       zip.file('test/images/.gitkeep', '')
       zip.file('test/labels/.gitkeep', '')
-      
+
       // 添加类别配置文件
       const classConfig = classList.value.map((cls, index) => `${index}: ${cls}`).join('\n')
       zip.file('classes.txt', classConfig)
-      
+
       // 创建YOLO格式的dataset.yaml配置文件
       // 注意：path字段在实际使用时需要用户根据解压位置调整为绝对路径
       const datasetYaml = `names:
@@ -1953,7 +1318,7 @@ val: val
 test: test
 `
       zip.file('dataset.yaml', datasetYaml)
-      
+
       // 添加README说明文件
       const readme = `# YOLO Dataset
 
@@ -1992,12 +1357,12 @@ class_id center_x center_y width height
 \`\`\`
 `
       zip.file('README.md', readme)
-      
+
       // 生成ZIP文件
-      const zipBlob = await zip.generateAsync({ type: 'blob' })
+      const zipBlob = await zip.generateAsync({type: 'blob'})
       const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-')
       saveAs(zipBlob, `yolo_dataset_${timestamp}.zip`)
-      
+
       ElMessage.success(`数据集导出成功！训练集${trainCount}张，验证集${valCount}张`)
     }
   } catch (error) {
@@ -2022,7 +1387,7 @@ const saveClasses = () => {
     ElMessage.warning('至少需要一个类别')
     return
   }
-  
+
   classList.value = validClasses
   localStorage.setItem('annotationClasses', JSON.stringify(validClasses))
   showClassDialog.value = false
@@ -2031,21 +1396,7 @@ const saveClasses = () => {
 // 键盘事件处理
 const handleKeyDown = (event) => {
   if (!currentImage.value) return
-  
-  // Ctrl+Z 撤销
-  if (event.ctrlKey && event.key === 'z') {
-    event.preventDefault()
-    undo()
-    return
-  }
-  
-  // Ctrl+Y 重做
-  if (event.ctrlKey && event.key === 'y') {
-    event.preventDefault()
-    redo()
-    return
-  }
-  
+
   switch (event.key) {
     case 'a':
     case 'A':
@@ -2064,12 +1415,6 @@ const handleKeyDown = (event) => {
         deleteAnnotation(selectedAnnotation.value)
       }
       break
-    case 'Escape':
-      // 取消多边形绘制
-      if (isDrawingPolygon.value) {
-        cancelPolygon()
-      }
-      break
     default:
       // 数字键选择类别
       const num = parseInt(event.key)
@@ -2083,7 +1428,7 @@ const handleKeyDown = (event) => {
 // 生命周期
 onMounted(() => {
   document.addEventListener('keydown', handleKeyDown)
-  
+
   const savedClasses = localStorage.getItem('annotationClasses')
   if (savedClasses) {
     try {
@@ -2098,9 +1443,6 @@ onMounted(() => {
       localStorage.removeItem('annotationClasses')
     }
   }
-  
-  // 加载可用模型列表
-  loadAvailableModels()
 })
 
 onUnmounted(() => {
@@ -2207,12 +1549,18 @@ onUnmounted(() => {
   opacity: 1;
 }
 
-.image-item img {
+.image-item img,
+.image-item-thumb {
   width: 50px;
   height: 50px;
   object-fit: cover;
   border-radius: 4px;
   margin-right: 10px;
+  cursor: pointer;
+}
+
+.image-item-thumb :deep(.el-image__inner) {
+  border-radius: 4px;
 }
 
 .image-info {
@@ -2246,25 +1594,66 @@ onUnmounted(() => {
 
 .canvas-container {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
   max-width: 100%;
   max-height: 100%;
+}
+
+.canvas-zoom-toolbar {
+  flex-shrink: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 10px;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  gap: 12px;
 }
 
-.polygon-tip {
-  width: 100%;
-  max-width: 500px;
-  order: 2;
+.canvas-zoom-toolbar .canvas-zoom-btn {
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.canvas-viewport {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background: #e8e8e8;
+  cursor: crosshair;
+}
+
+.canvas-wrap {
+  flex-shrink: 0;
+  position: relative;
 }
 
-.canvas-container canvas {
+.canvas-transform-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.canvas-container .canvas-transform-wrap canvas {
+  display: block;
   border: 1px solid #ddd;
   background: white;
   cursor: crosshair;
-  order: 1;
+}
+
+.canvas-hint {
+  flex-shrink: 0;
+  padding: 6px 12px;
+  font-size: 12px;
+  color: #909399;
+  background: #fff;
+  border-top: 1px solid #e4e7ed;
 }
 
 .empty-canvas {
@@ -2357,30 +1746,6 @@ onUnmounted(() => {
   font-family: monospace;
 }
 
-.tool-help {
-  padding: 15px;
-  border-top: 1px solid #e4e7ed;
-  background: #fff9e6;
-  margin-top: 10px;
-}
-
-.tool-help h4 {
-  margin: 0 0 10px 0;
-  color: #e6a23c;
-  font-size: 14px;
-}
-
-.tool-help ul {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.tool-help li {
-  font-size: 12px;
-  color: #606266;
-  margin-bottom: 5px;
-}
-
 .class-editor .class-list {
   margin-bottom: 10px;
 }
@@ -2396,7 +1761,7 @@ onUnmounted(() => {
   .sidebar {
     width: 200px;
   }
-  
+
   .properties-panel {
     width: 250px;
   }
@@ -2406,13 +1771,13 @@ onUnmounted(() => {
   .main-content {
     flex-direction: column;
   }
-  
+
   .sidebar,
   .properties-panel {
     width: 100%;
     height: 200px;
   }
-  
+
   .canvas-area {
     height: 400px;
   }
@@ -2483,9 +1848,4 @@ onUnmounted(() => {
   color: #303133;
   margin-right: 8px;
 }
-
-/* AI辅助标注对话框样式 */
-.ai-assist-config {
-  padding: 10px 0;
-}
 </style>
-- 
Gitee


From fcd35441b9bc6df224a5aa22bd843f7cdf0526ee Mon Sep 17 00:00:00 2001
From: SamllNorth_Lee <18210040298@163.com>
Date: Tue, 10 Feb 2026 17:11:45 +0800
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E6=8E=A8=E7=90=86=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E5=9B=BE=E7=89=87=E6=B7=BB=E5=8A=A0=E6=A0=87=E6=B3=A8?=
 =?UTF-8?q?=E7=BB=98=E6=A1=86=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=94=BE=E5=A4=A7=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Inference.vue | 124 ++++++++++++-------------------
 1 file changed, 49 insertions(+), 75 deletions(-)

diff --git a/frontend/src/views/Inference.vue b/frontend/src/views/Inference.vue
index 5dc6a59..445fe44 100644
--- a/frontend/src/views/Inference.vue
+++ b/frontend/src/views/Inference.vue
@@ -17,12 +17,12 @@
     <div class="page-content">
       <!-- 实时推理模式 -->
       <div v-if="inferenceMode === 'realtime'" class="realtime-mode">
-        <RealtimeInference/>
+        <RealtimeInference />
       </div>
 
       <!-- 九宫格推理模式 -->
       <div v-else-if="inferenceMode === 'grid'" class="grid-mode">
-        <GridInference @show-source-dialog="showRealtimeSourceDialog"/>
+        <GridInference @show-source-dialog="showRealtimeSourceDialog" />
       </div>
 
       <!-- 批量推理模式 -->
@@ -146,9 +146,7 @@
                       multiple
                   >
                     <el-button type="primary" :loading="isProcessing">
-                      <el-icon>
-                        <Upload/>
-                      </el-icon>
+                      <el-icon><Upload /></el-icon>
                       上传图片
                     </el-button>
                   </el-upload>
@@ -160,15 +158,11 @@
                       :loading="isProcessing"
                       :disabled="uploadedImages.length === 0"
                   >
-                    <el-icon>
-                      <VideoPlay/>
-                    </el-icon>
+                    <el-icon><VideoPlay /></el-icon>
                     批量推理
                   </el-button>
                   <el-button @click="clearImages">
-                    <el-icon>
-                      <Delete/>
-                    </el-icon>
+                    <el-icon><Delete /></el-icon>
                     清空
                   </el-button>
                 </el-form-item>
@@ -212,24 +206,18 @@
                           :type="viewMode === 'grid' ? 'primary' : ''"
                           @click="viewMode = 'grid'"
                       >
-                        <el-icon>
-                          <Grid/>
-                        </el-icon>
+                        <el-icon><Grid /></el-icon>
                       </el-button>
                       <el-button
                           :type="viewMode === 'list' ? 'primary' : ''"
                           @click="viewMode = 'list'"
                       >
-                        <el-icon>
-                          <List/>
-                        </el-icon>
+                        <el-icon><List /></el-icon>
                       </el-button>
                     </el-button-group>
 
                     <el-button @click="downloadResults" :disabled="results.length === 0">
-                      <el-icon>
-                        <Download/>
-                      </el-icon>
+                      <el-icon><Download /></el-icon>
                       下载结果
                     </el-button>
                   </div>
@@ -239,7 +227,7 @@
               <!-- 网格视图 -->
               <div v-if="viewMode === 'grid'" class="grid-view">
                 <div v-if="results.length === 0" class="empty-results">
-                  <el-empty description="暂无推理结果，请上传图片进行检测"/>
+                  <el-empty description="暂无推理结果，请上传图片进行检测" />
                 </div>
 
                 <el-row :gutter="20" v-else>
@@ -250,7 +238,7 @@
                   >
                     <div class="result-card" @click="showResultDetail(result)">
                       <div class="result-image">
-                        <img :src="result.annotatedImageUrl || result.imageUrl" :alt="result.fileName"/>
+                        <img :src="result.annotatedImageUrl || result.imageUrl" :alt="result.fileName" />
                         <div class="detection-overlay">
                           <span class="detection-count">{{ result.detections.length }} 个目标</span>
                         </div>
@@ -284,10 +272,10 @@
                 <el-table :data="results" v-if="results.length > 0">
                   <el-table-column label="图片" width="120">
                     <template #default="{ row }">
-                      <img :src="row.imageUrl" class="table-image" @click="showResultDetail(row)"/>
+                      <img :src="row.imageUrl" class="table-image" @click="showResultDetail(row)" />
                     </template>
                   </el-table-column>
-                  <el-table-column prop="fileName" label="文件名"/>
+                  <el-table-column prop="fileName" label="文件名" />
                   <el-table-column label="检测数量" width="100">
                     <template #default="{ row }">
                       {{ row.detections.length }}
@@ -313,16 +301,14 @@
                   <el-table-column label="操作" width="120">
                     <template #default="{ row }">
                       <el-button size="small" @click="showResultDetail(row)">
-                        <el-icon>
-                          <View/>
-                        </el-icon>
+                        <el-icon><View /></el-icon>
                         查看
                       </el-button>
                     </template>
                   </el-table-column>
                 </el-table>
 
-                <el-empty v-else description="暂无推理结果"/>
+                <el-empty v-else description="暂无推理结果" />
               </div>
             </el-card>
           </el-col>
@@ -354,7 +340,7 @@
                     />
                     <div class="image-zoom-hint">点击图片可放大查看</div>
                   </el-tab-pane>
-                  <el-tab-pane label="检测结果" name="annotated" v-if="selectedResult.annotatedImageUrl">
+                  <el-tab-pane label="结果图片" name="annotated" v-if="selectedResult.annotatedImageUrl">
                     <el-image
                         :src="selectedResult.annotatedImageUrl"
                         :alt="selectedResult.fileName + '_annotated'"
@@ -387,8 +373,7 @@
                   </div>
                   <div class="detection-coords">
                     <small>
-                      位置: ({{ detection.bbox.x1.toFixed(0) }}, {{ detection.bbox.y1.toFixed(0) }}) -
-                      ({{ detection.bbox.x2.toFixed(0) }}, {{ detection.bbox.y2.toFixed(0) }})
+                      位置: ({{ detection.bbox.x1.toFixed(0) }}, {{ detection.bbox.y1.toFixed(0) }}) - ({{ detection.bbox.x2.toFixed(0) }}, {{ detection.bbox.y2.toFixed(0) }})
                       <br/>
                       大小: {{ detection.bbox.width.toFixed(0) }} × {{ detection.bbox.height.toFixed(0) }}
                       <br/>
@@ -406,19 +391,19 @@
 </template>
 
 <script setup>
-import {computed, onMounted, onUnmounted, reactive, ref} from 'vue'
-import {ElMessage, ElNotification} from 'element-plus'
-import {getModels, predictBatch, predictImage} from '../utils/api'
-import {saveAs} from 'file-saver'
+import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
+import { ElMessage, ElNotification } from 'element-plus'
+import { predictImage, predictBatch, getModels } from '../utils/api'
+import { saveAs } from 'file-saver'
 import RealtimeInference from '../components/RealtimeInference.vue'
 import GridInference from '../components/GridInference.vue'
 
 // 响应式数据
 const inferenceMode = ref('batch')
 const modeOptions = [
-  {label: '批量推理', value: 'batch'},
-  {label: '实时监控', value: 'realtime'},
-  {label: '九宫格监控', value: 'grid'}
+  { label: '批量推理', value: 'batch' },
+  { label: '实时监控', value: 'realtime' },
+  { label: '九宫格监控', value: 'grid' }
 ]
 
 const isProcessing = ref(false)
@@ -497,13 +482,12 @@ const runSingleInference = async (file, imageUrl) => {
     const endTime = Date.now()
 
     // 处理真实检测结果
-    const detections = result?.results?.detections ?? []
+    const detections = result.results.detections || []
 
     // 获取标注图片URL
     let annotatedImageUrl = null
-    const annotatedImages = result?.results?.annotated_images
-    if (annotatedImages?.length > 0) {
-      annotatedImageUrl = `http://localhost:8000${annotatedImages[0].url}`
+    if (result.results.annotated_images && result.results.annotated_images.length > 0) {
+      annotatedImageUrl = `http://localhost:8000${result.results.annotated_images[0].url}`
     } else if (detections.length > 0) {
       try {
         annotatedImageUrl = await drawDetectionBoxes(imageUrl, detections)
@@ -513,14 +497,14 @@ const runSingleInference = async (file, imageUrl) => {
     }
 
     const inferenceResult = {
-      id: result?.prediction_id ?? `pred-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+      id: result.prediction_id,
       fileName: file.name,
       imageUrl: imageUrl,
       annotatedImageUrl: annotatedImageUrl,
       detections: detections,
       processingTime: endTime - startTime,
       timestamp: new Date(),
-      modelUsed: result?.results?.model_used
+      modelUsed: result.results.model_used
     }
 
     results.value.unshift(inferenceResult)
@@ -566,18 +550,9 @@ const clearImages = () => {
   results.value = []
 }
 
-const showResultDetail = async (result) => {
+const showResultDetail = (result) => {
   selectedResult.value = result
   showDetailDialog.value = true
-  // 若当前没有标注图但有检测框，则在前端绘制并更新，便于详情里“检测结果” Tab 显示
-  if (!result.annotatedImageUrl && result.detections?.length > 0) {
-    try {
-      const annotatedUrl = await drawDetectionBoxes(result.imageUrl, result.detections)
-      result.annotatedImageUrl = annotatedUrl
-    } catch (e) {
-      console.warn('详情页绘制检测框失败:', e)
-    }
-  }
 }
 
 let drawCanvas = null;
@@ -692,11 +667,8 @@ const downloadResults = () => {
   // 生成检测结果CSV
   const csvHeader = 'fileName,detectionCount,averageConfidence,processingTime\n'
   const csvData = results.value.map(result => {
-    const len = result.detections?.length ?? 0
-    const avgConf = len > 0
-        ? result.detections.reduce((sum, det) => sum + det.confidence, 0) / len
-        : 0
-    return `${result.fileName},${len},${avgConf.toFixed(3)},${result.processingTime}`
+    const avgConf = result.detections.reduce((sum, det) => sum + det.confidence, 0) / result.detections.length
+    return `${result.fileName},${result.detections.length},${avgConf.toFixed(3)},${result.processingTime}`
   }).join('\n')
 
   const csvContent = csvHeader + csvData
@@ -736,6 +708,17 @@ const loadAvailableModels = async () => {
           modified_time: model.modified_time
         }))
 
+    // 上传的自定义模型
+    customModels.value = modelsData.models
+        .filter(model => model.type === 'uploaded')
+        .map(model => ({
+          name: model.name,
+          path: model.path,
+          size: model.size,
+          display_name: model.display_name,
+          modified_time: model.modified_time
+        }))
+
     // 自动选择最新训练的模型（如果有的话）
     if (trainedModels.value.length > 0 && trainedModels.value[0].is_latest) {
       inferenceConfig.modelPath = trainedModels.value[0].path
@@ -783,6 +766,8 @@ const showRealtimeSourceDialog = () => {
   ElMessage.info('请在实时监控模式中配置视频源，然后在九宫格中使用')
 }
 
+// 注意：已移除 mockDetections 函数，现在使用真实的YOLO检测结果
+
 // 训练完成事件监听
 const handleModelTrainingCompleted = (event) => {
   const {projectName} = event.detail
@@ -940,26 +925,13 @@ onUnmounted(() => {
   width: 100%;
 }
 
-.image-tabs img,
-.detail-image-preview {
+.image-tabs img {
   max-width: 100%;
-  max-height: 400px;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.detail-image-preview :deep(.el-image__inner) {
   max-height: 400px;
   object-fit: contain;
   border-radius: 8px;
 }
 
-.image-zoom-hint {
-  font-size: 12px;
-  color: #909399;
-  margin-top: 8px;
-}
-
 .result-info {
   padding: 15px;
 }
@@ -1009,8 +981,10 @@ onUnmounted(() => {
   text-align: center;
 }
 
-.detail-image img,
-.detail-image .detail-image-preview {
+.detail-image img {
+  max-width: 100%;
+  max-height: 400px;
+  border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-- 
Gitee


From dfe26d123d515ac169c4368efc3ac70d12e4cd2d Mon Sep 17 00:00:00 2001
From: SamllNorth_Lee <18210040298@163.com>
Date: Tue, 10 Feb 2026 17:29:31 +0800
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E6=A0=87?=
 =?UTF-8?q?=E6=B3=A8=E6=B7=BB=E5=8A=A0=E9=BC=A0=E6=A0=87=E6=BB=9A=E8=BD=AE?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E5=9B=BE=E7=89=87=E6=95=88=E6=9E=9C=EF=BC=8C?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=B0=8F=E7=89=A9=E4=BD=93=E4=B8=8D=E6=96=B9?=
 =?UTF-8?q?=E4=BE=BF=E6=A0=87=E6=B3=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Annotation.vue | 1598 ++++++++++++++++++++---------
 1 file changed, 1137 insertions(+), 461 deletions(-)

diff --git a/frontend/src/views/Annotation.vue b/frontend/src/views/Annotation.vue
index 1ed5070..95111fd 100644
--- a/frontend/src/views/Annotation.vue
+++ b/frontend/src/views/Annotation.vue
@@ -11,9 +11,7 @@
             multiple
         >
           <el-button type="primary">
-            <el-icon>
-              <Upload/>
-            </el-icon>
+            <el-icon><Upload /></el-icon>
             上传图片
           </el-button>
         </el-upload>
@@ -25,39 +23,53 @@
             accept="video/*"
         >
           <el-button type="success">
-            <el-icon>
-              <VideoCamera/>
-            </el-icon>
+            <el-icon><VideoCamera /></el-icon>
             上传视频
           </el-button>
         </el-upload>
 
+        <el-divider direction="vertical" />
+
+        <el-button @click="undo" :disabled="!canUndo" title="撤销 (Ctrl+Z)">
+          <el-icon><RefreshLeft /></el-icon>
+          撤销
+        </el-button>
+
+        <el-button @click="redo" :disabled="!canRedo" title="重做 (Ctrl+Y)">
+          <el-icon><RefreshRight /></el-icon>
+          重做
+        </el-button>
+
+        <el-divider direction="vertical" />
+
+        <el-button @click="openAIAssistDialog" :disabled="!currentImage" type="primary">
+          <el-icon><MagicStick /></el-icon>
+          AI辅助标注
+        </el-button>
+
+        <el-divider direction="vertical" />
+
         <el-button @click="saveAnnotations" :disabled="!currentImage">
-          <el-icon>
-            <Download/>
-          </el-icon>
+          <el-icon><Download /></el-icon>
           保存标注
         </el-button>
 
         <el-button @click="showDataAugmentationDialog" :disabled="!currentImage" type="warning">
-          <el-icon>
-            <MagicStick/>
-          </el-icon>
+          <el-icon><MagicStick /></el-icon>
           数据增强
         </el-button>
         <el-button @click="exportDataset" :disabled="imageList.length === 0">
-          <el-icon>
-            <Files/>
-          </el-icon>
+          <el-icon><Files /></el-icon>
           导出数据集
         </el-button>
       </div>
 
       <div class="toolbar-center">
-        <el-select v-model="currentTool" placeholder="选择工具" style="width: 120px">
-          <el-option label="选择" value="select"/>
-          <el-option label="矩形框" value="rect"/>
-          <el-option label="删除" value="delete"/>
+        <el-select v-model="currentTool" placeholder="选择工具" style="width: 140px">
+          <el-option label="选择" value="select" />
+          <el-option label="矩形框" value="rect" />
+          <el-option label="多边形" value="polygon" />
+          <el-option label="删除" value="delete" />
         </el-select>
 
         <el-select v-model="currentClass" placeholder="选择类别" style="width: 150px; margin-left: 10px">
@@ -70,9 +82,7 @@
         </el-select>
 
         <el-button @click="showClassDialog = true" type="text">
-          <el-icon>
-            <Setting/>
-          </el-icon>
+          <el-icon><Setting /></el-icon>
           编辑类别
         </el-button>
       </div>
@@ -99,15 +109,7 @@
               :class="{ active: currentImageIndex === index }"
               @click="selectImage(index)"
           >
-            <el-image
-                :src="image.url"
-                :alt="image.name"
-                :preview-src-list="[image.url]"
-                fit="cover"
-                class="image-item-thumb"
-                preview-teleported
-                @click.stop
-            />
+            <img :src="image.url" :alt="image.name" />
             <div class="image-info">
               <div class="image-name" :title="image.name">{{ image.name }}</div>
               <div class="annotation-count">
@@ -121,9 +123,7 @@
                 circle
                 @click.stop="deleteImage(index)"
             >
-              <el-icon>
-                <Close/>
-              </el-icon>
+              <el-icon><Close /></el-icon>
             </el-button>
           </div>
         </div>
@@ -132,67 +132,46 @@
       <!-- 中间画布区域 -->
       <div class="canvas-area">
         <div class="canvas-container" v-if="currentImage">
-          <div class="canvas-zoom-toolbar">
-            <el-button-group>
-              <el-button size="small" title="缩小" @click="canvasZoomOut">
-                <el-icon>
-                  <ZoomOut/>
-                </el-icon>
-              </el-button>
-              <el-button size="small" disabled>{{ Math.round(viewScale * 100) }}%</el-button>
-              <el-button size="small" title="放大" @click="canvasZoomIn">
-                <el-icon>
-                  <ZoomIn/>
-                </el-icon>
-              </el-button>
-              <el-button size="small" title="重置缩放" @click="canvasZoomReset">1:1</el-button>
-            </el-button-group>
-            <el-button
-                class="canvas-zoom-btn"
-                type="primary"
-                circle
-                size="small"
-                title="全屏预览（仅查看）"
-                @click="openCanvasImagePreview"
+          <!-- 多边形绘制提示 -->
+          <div v-if="currentTool === 'polygon' && currentImage" class="polygon-tip">
+            <el-alert
+                v-if="!isDrawingPolygon"
+                title="点击画布开始绘制多边形"
+                type="info"
+                :closable="false"
+                show-icon
+            />
+            <el-alert
+                v-else
+                :title="`已标记 ${polygonPoints.length} 个点，点击起始点完成绘制（至少需要3个点）`"
+                type="warning"
+                :closable="false"
+                show-icon
             >
-              <el-icon>
-                <FullScreen/>
-              </el-icon>
-            </el-button>
+              <template #default>
+                <el-button size="small" type="danger" @click="cancelPolygon">取消 (Esc / 右键)</el-button>
+              </template>
+            </el-alert>
           </div>
-          <div
-              class="canvas-viewport"
-              ref="canvasViewportRef"
+
+          <canvas
+              ref="canvasRef"
+              :width="canvasWidth"
+              :height="canvasHeight"
+              :style="{
+                transform: 'scale(' + zoom + ')',
+                transformOrigin: 'center center'
+              }"
+              @mousedown="handleMouseDown"
+              @mousemove="handleMouseMove"
+              @mouseup="handleMouseUp"
+              @contextmenu="handleRightClick"
               @wheel="handleWheel"
-              @mousedown="handleCanvasViewportMouseDown"
-              @mousemove="handleCanvasViewportMouseMove"
-              @mouseup="handleCanvasViewportMouseUp"
-              @mouseleave="handleCanvasViewportMouseUp"
-              @contextmenu.prevent
-          >
-            <div class="canvas-wrap" :style="canvasWrapStyle">
-              <div class="canvas-transform-wrap" :style="canvasTransformStyle">
-                <canvas
-                    ref="canvasRef"
-                    :width="canvasWidth"
-                    :height="canvasHeight"
-                ></canvas>
-              </div>
-            </div>
-          </div>
-          <div class="canvas-hint">滚轮缩放 · 右键拖拽平移 · 放大后可正常画框标注</div>
+          ></canvas>
         </div>
         <div v-else class="empty-canvas">
-          <el-empty description="请上传图片开始标注"/>
+          <el-empty description="请上传图片开始标注" />
         </div>
-        <el-image-viewer
-            v-if="showCanvasPreview"
-            :url-list="canvasPreviewUrlList"
-            :initial-index="0"
-            teleported
-            hide-on-click-modal
-            @close="showCanvasPreview = false"
-        />
       </div>
 
       <!-- 右侧属性面板 -->
@@ -209,20 +188,25 @@
               @click="selectAnnotation(index)"
           >
             <div class="annotation-header">
-              <span class="class-label">{{ classList[annotation.class] }}</span>
+              <span class="class-label">
+                {{ classList[annotation.class] }}
+                <el-tag v-if="annotation.type === 'polygon'" size="small" type="success" style="margin-left: 5px;">多边形</el-tag>
+                <el-tag v-else size="small" type="info" style="margin-left: 5px;">矩形</el-tag>
+              </span>
               <el-button
                   type="danger"
                   size="small"
                   text
                   @click.stop="deleteAnnotation(index)"
               >
-                <el-icon>
-                  <Delete/>
-                </el-icon>
+                <el-icon><Delete /></el-icon>
               </el-button>
             </div>
             <div class="annotation-coords">
-              <small>
+              <small v-if="annotation.type === 'polygon'">
+                顶点数: {{ annotation.points?.length || 0 }}
+              </small>
+              <small v-else>
                 x: {{ annotation.x.toFixed(3) }},
                 y: {{ annotation.y.toFixed(3) }},
                 w: {{ annotation.width.toFixed(3) }},
@@ -247,6 +231,24 @@
           <div class="shortcut-item">
             <kbd>1-9</kbd> <span>选择类别</span>
           </div>
+          <div class="shortcut-item">
+            <kbd>Esc</kbd> <span>取消绘制</span>
+          </div>
+          <div class="shortcut-item">
+            <kbd>右键</kbd> <span>取消绘制</span>
+          </div>
+        </div>
+
+        <!-- 多边形工具说明 -->
+        <div v-if="currentTool === 'polygon'" class="tool-help">
+          <h4>多边形工具使用说明</h4>
+          <ul>
+            <li>点击画布添加顶点</li>
+            <li>点击起始点完成绘制</li>
+            <li>右键或按Esc取消绘制</li>
+            <li>至少需要3个顶点</li>
+            <li>可拖动整个多边形移动</li>
+          </ul>
         </div>
       </div>
     </div>
@@ -262,23 +264,19 @@
                   :key="index"
                   class="class-item"
               >
-                <el-input v-model="classForm.classes[index]" placeholder="类别名称"/>
+                <el-input v-model="classForm.classes[index]" placeholder="类别名称" />
                 <el-button
                     type="danger"
                     text
                     @click="removeClass(index)"
                     :disabled="classForm.classes.length <= 1"
                 >
-                  <el-icon>
-                    <Delete/>
-                  </el-icon>
+                  <el-icon><Delete /></el-icon>
                 </el-button>
               </div>
             </div>
             <el-button @click="addClass" type="primary" text>
-              <el-icon>
-                <Plus/>
-              </el-icon>
+              <el-icon><Plus /></el-icon>
               添加类别
             </el-button>
           </el-form-item>
@@ -313,32 +311,32 @@
           </el-form-item>
 
           <el-form-item label="旋转">
-            <el-switch v-model="augmentationConfig.rotation"/>
+            <el-switch v-model="augmentationConfig.rotation" />
             <span style="margin-left: 10px;">随机旋转 ±15°</span>
           </el-form-item>
 
           <el-form-item label="翻转">
-            <el-switch v-model="augmentationConfig.flip"/>
+            <el-switch v-model="augmentationConfig.flip" />
             <span style="margin-left: 10px;">水平/垂直翻转</span>
           </el-form-item>
 
           <el-form-item label="亮度调整">
-            <el-switch v-model="augmentationConfig.brightness"/>
+            <el-switch v-model="augmentationConfig.brightness" />
             <span style="margin-left: 10px;">随机亮度变化</span>
           </el-form-item>
 
           <el-form-item label="对比度调整">
-            <el-switch v-model="augmentationConfig.contrast"/>
+            <el-switch v-model="augmentationConfig.contrast" />
             <span style="margin-left: 10px;">随机对比度变化</span>
           </el-form-item>
 
           <el-form-item label="噪声添加">
-            <el-switch v-model="augmentationConfig.noise"/>
+            <el-switch v-model="augmentationConfig.noise" />
             <span style="margin-left: 10px;">添加轻微噪声</span>
           </el-form-item>
 
           <el-form-item label="缩放">
-            <el-switch v-model="augmentationConfig.scale"/>
+            <el-switch v-model="augmentationConfig.scale" />
             <span style="margin-left: 10px;">随机缩放 90%-110%</span>
           </el-form-item>
         </el-form>
@@ -347,7 +345,7 @@
           <h4>预览效果</h4>
           <div class="preview-grid">
             <div v-for="(preview, index) in augmentationPreview" :key="index" class="preview-item">
-              <img :src="preview" :alt="`预览${index + 1}`"/>
+              <img :src="preview" :alt="`预览${index + 1}`" />
             </div>
           </div>
         </div>
@@ -439,28 +437,110 @@
         </el-button>
       </template>
     </el-dialog>
+
+    <!-- AI辅助标注对话框 -->
+    <el-dialog
+        v-model="showAIAssistDialog"
+        title="AI辅助预标注"
+        width="500px"
+        center
+    >
+      <div class="ai-assist-config">
+        <el-form :model="aiAssistConfig" label-width="120px">
+          <el-form-item label="检测模型">
+            <el-select v-model="aiAssistConfig.model" placeholder="选择模型">
+              <el-option
+                  v-for="model in availableModels"
+                  :key="model.path"
+                  :label="model.name"
+                  :value="model.path"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="置信度阈值">
+            <el-slider
+                v-model="aiAssistConfig.confidence"
+                :min="0.1"
+                :max="0.9"
+                :step="0.05"
+                show-input
+            />
+            <span style="font-size: 12px; color: #909399;">
+              置信度越高，检测越严格，标注框越少
+            </span>
+          </el-form-item>
+
+          <el-form-item label="类别映射">
+            <el-radio-group v-model="aiAssistConfig.classMode">
+              <el-radio label="auto">自动添加COCO类别</el-radio>
+              <el-radio label="manual">手动指定目标类别</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="目标类别" v-if="aiAssistConfig.classMode === 'manual'">
+            <el-select
+                v-model="aiAssistConfig.targetClass"
+                placeholder="选择或输入类别"
+                filterable
+                allow-create
+                default-first-option
+            >
+              <el-option
+                  v-for="(cls, index) in classList"
+                  :key="index"
+                  :label="cls"
+                  :value="index"
+              />
+            </el-select>
+            <span style="font-size: 12px; color: #909399; display: block; margin-top: 5px;">
+              所有检测到的目标将统一标记为此类别
+            </span>
+          </el-form-item>
+
+          <el-form-item label="处理方式">
+            <el-radio-group v-model="aiAssistConfig.mode">
+              <el-radio label="replace">替换现有标注</el-radio>
+              <el-radio label="append">追加到现有标注</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-alert
+              type="info"
+              :closable="false"
+              show-icon
+              style="margin-bottom: 15px;"
+          >
+            <template #default>
+              <div v-if="aiAssistConfig.classMode === 'auto'">
+                <strong>自动模式：</strong>检测到的COCO类别（person、car等）将自动添加到类别列表
+              </div>
+              <div v-else>
+                <strong>手动模式：</strong>所有检测到的目标将统一标记为指定的类别，忽略COCO原始类别
+              </div>
+            </template>
+          </el-alert>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <el-button @click="showAIAssistDialog = false">取消</el-button>
+        <el-button type="primary" @click="runAIAssist" :loading="isAIAssisting">
+          <el-icon><MagicStick /></el-icon>
+          开始检测
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import {computed, nextTick, onMounted, onUnmounted, reactive, ref} from 'vue'
-import {ElImageViewer, ElMessage, ElMessageBox} from 'element-plus'
-import {
-  Close,
-  Delete,
-  Download,
-  Files,
-  FullScreen,
-  MagicStick,
-  Plus,
-  Setting,
-  Upload,
-  VideoCamera,
-  ZoomIn,
-  ZoomOut
-} from '@element-plus/icons-vue'
-import {saveAs} from 'file-saver'
-import {extractVideoFrames, uploadAnnotationVideo} from '../utils/api'
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Upload, Download, Files, Setting, Delete, Plus, MagicStick, VideoCamera, Close, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
+import { saveAs } from 'file-saver'
+import { uploadAnnotationVideo, extractVideoFrames, aiAssistAnnotation } from '../utils/api'
+import { getModels } from '../utils/api'
 
 // 响应式数据
 const canvasRef = ref(null)
@@ -469,7 +549,18 @@ const videoUploadRef = ref(null)
 const showClassDialog = ref(false)
 const showAugmentationDialog = ref(false)
 const showVideoFrameDialog = ref(false)
-const showCanvasPreview = ref(false)
+const showAIAssistDialog = ref(false)
+
+// AI辅助标注相关
+const isAIAssisting = ref(false)
+const availableModels = ref([])
+const aiAssistConfig = reactive({
+  model: 'yolo11n.pt',
+  confidence: 0.25,
+  mode: 'replace', // 'replace' 或 'append'
+  classMode: 'auto', // 'auto' 自动添加COCO类别，'manual' 手动指定类别
+  targetClass: 0 // 手动模式下的目标类别索引
+})
 
 // 视频相关
 const currentVideoInfo = ref(null)
@@ -510,21 +601,13 @@ const augmentationPreview = ref([])
 const isGeneratingPreview = ref(false)
 const isApplyingAugmentation = ref(false)
 
-// 画布相关
+// 画布相关（适配缩放 + 交互缩放）
 const canvasWidth = ref(800)
 const canvasHeight = ref(600)
-const scale = ref(1)
+const scale = ref(1)   // 适配画布的基础缩放
+const zoom = ref(1)    // 用户交互缩放倍数（仅用于显示，不改变逻辑坐标）
 const offsetX = ref(0)
 const offsetY = ref(0)
-// 视图缩放与平移（放大后可继续标注）
-const viewScale = ref(1)
-const viewOffsetX = ref(0)
-const viewOffsetY = ref(0)
-const viewScaleMin = 0.5
-const viewScaleMax = 5
-const panMargin = 100
-const isPanning = ref(false)
-const lastPanPoint = ref({x: 0, y: 0})
 
 // 工具和类别
 const currentTool = ref('rect')
@@ -538,31 +621,75 @@ const currentImage = computed(() =>
     currentImageIndex.value >= 0 ? imageList.value[currentImageIndex.value] : null
 )
 
-// 上传队列：保证批量上传时按顺序添加，并自动选中本次上传的第一张
-const uploadQueue = ref([])
-const isProcessingUpload = ref(false)
-
 // 标注相关
 const isDrawing = ref(false)
-const startPoint = ref({x: 0, y: 0})
+const startPoint = ref({ x: 0, y: 0 })
 const selectedAnnotation = ref(-1)
 const currentAnnotations = computed(() =>
     currentImage.value?.annotations || []
 )
-const canvasPreviewUrlList = computed(() =>
-    currentImage.value?.url ? [currentImage.value.url] : []
-)
-const canvasViewportRef = ref(null)
-const canvasTransformStyle = computed(() => ({
-  width: `${canvasWidth.value}px`,
-  height: `${canvasHeight.value}px`,
-  transform: `translate(${panMargin + viewOffsetX.value}px, ${panMargin + viewOffsetY.value}px) scale(${viewScale.value})`,
-  transformOrigin: '0 0'
-}))
-const canvasWrapStyle = computed(() => ({
-  width: `${Math.ceil(canvasWidth.value * viewScale.value) + 2 * panMargin}px`,
-  height: `${Math.ceil(canvasHeight.value * viewScale.value) + 2 * panMargin}px`
-}))
+
+// 标注框编辑状态
+const isDragging = ref(false)
+const isResizing = ref(false)
+const dragStartPos = ref({ x: 0, y: 0 })
+const resizeHandle = ref('') // 'tl', 'tr', 'bl', 'br', 'l', 'r', 't', 'b'
+const resizeStartAnnotation = ref(null)
+
+// 多边形标注状态
+const polygonPoints = ref([]) // 当前正在绘制的多边形的点
+const isDrawingPolygon = ref(false)
+const hoveredPointIndex = ref(-1) // 鼠标悬停的点索引
+
+// 撤销/重做历史记录
+const history = ref([])
+const historyIndex = ref(-1)
+const maxHistorySize = 50
+
+// 保存当前状态到历史记录
+const saveHistory = () => {
+  if (!currentImage.value) return
+
+  // 移除当前索引之后的所有历史记录
+  if (historyIndex.value < history.value.length - 1) {
+    history.value = history.value.slice(0, historyIndex.value + 1)
+  }
+
+  // 深拷贝当前标注状态
+  const state = JSON.parse(JSON.stringify(currentImage.value.annotations))
+  history.value.push(state)
+
+  // 限制历史记录大小
+  if (history.value.length > maxHistorySize) {
+    history.value.shift()
+  } else {
+    historyIndex.value++
+  }
+}
+
+// 撤销
+const undo = () => {
+  if (!canUndo.value) return
+
+  historyIndex.value--
+  currentImage.value.annotations = JSON.parse(JSON.stringify(history.value[historyIndex.value]))
+  drawCanvas()
+  ElMessage.success('已撤销')
+}
+
+// 重做
+const redo = () => {
+  if (!canRedo.value) return
+
+  historyIndex.value++
+  currentImage.value.annotations = JSON.parse(JSON.stringify(history.value[historyIndex.value]))
+  drawCanvas()
+  ElMessage.success('已重做')
+}
+
+// 判断是否可以撤销/重做
+const canUndo = computed(() => historyIndex.value > 0)
+const canRedo = computed(() => historyIndex.value < history.value.length - 1)
 
 // 类别编辑表单
 const classForm = reactive({
@@ -573,9 +700,9 @@ const classForm = reactive({
 let ctx = null
 let currentImageObj = null
 
-// 将单个文件转为图片数据并加入列表（返回 Promise）
-const addOneImageFromFile = (file) => {
-  return new Promise((resolve, reject) => {
+// 方法
+const handleImageUpload = (file) => {
+  return new Promise((resolve) => {
     const reader = new FileReader()
     reader.onload = (e) => {
       const img = new Image()
@@ -588,49 +715,20 @@ const addOneImageFromFile = (file) => {
           annotations: []
         }
         imageList.value.push(imageData)
-        resolve()
+
+        if (currentImageIndex.value === -1) {
+          selectImage(0)
+        }
+
+        ElMessage.success(`已上传图片: ${file.name}`)
+        resolve(false) // 阻止默认上传
       }
-      img.onerror = () => reject(new Error(`图片加载失败: ${file.name}`))
       img.src = e.target.result
     }
-    reader.onerror = () => reject(new Error(`读取失败: ${file.name}`))
     reader.readAsDataURL(file)
   })
 }
 
-// 按顺序处理上传队列，保证本次上传的第一张自动出现在中间标注区
-const processUploadQueue = async () => {
-  if (isProcessingUpload.value || uploadQueue.value.length === 0) return
-  isProcessingUpload.value = true
-  const batchStartIndex = imageList.value.length // 本次上传的第一张在列表中的下标
-  let added = 0
-  while (uploadQueue.value.length > 0) {
-    const file = uploadQueue.value.shift()
-    try {
-      await addOneImageFromFile(file)
-      added++
-      // 本次上传的第一张添加完成后，自动选中并显示在中间标注区域
-      if (added === 1) {
-        selectImage(batchStartIndex)
-      }
-      ElMessage.success(`已上传图片: ${file.name}`)
-    } catch (err) {
-      console.error(err)
-      ElMessage.error(`上传失败: ${file.name}`)
-    }
-  }
-  isProcessingUpload.value = false
-}
-
-// 方法：上传时加入队列并处理（单张或批量都会把第一张自动放到中间）
-const handleImageUpload = (uploadFile) => {
-  const file = uploadFile?.raw ?? uploadFile
-  if (!file || !(file instanceof File)) return false
-  uploadQueue.value.push(file)
-  processUploadQueue()
-  return false // 阻止默认上传
-}
-
 // 视频上传处理
 const handleVideoUpload = async (file) => {
   try {
@@ -679,9 +777,8 @@ const extractFrames = async () => {
         maxFrames
     )
 
-    // 将提取的帧添加到图片列表，并记录本批第一张的下标
-    const batchStartIndex = imageList.value.length
-    response.frames.forEach((frame) => {
+    // 将提取的帧添加到图片列表
+    response.frames.forEach((frame, index) => {
       const imageData = {
         name: `${currentVideoInfo.value.filename}_frame_${frame.frame_index}.jpg`,
         url: frame.data,
@@ -693,9 +790,10 @@ const extractFrames = async () => {
       }
       imageList.value.push(imageData)
     })
-    // 自动把本次提取的第一帧放到中间标注区域
-    if (imageList.value.length > batchStartIndex) {
-      selectImage(batchStartIndex)
+
+    // 自动选择第一帧
+    if (currentImageIndex.value === -1 && imageList.value.length > 0) {
+      selectImage(0)
     }
 
     showVideoFrameDialog.value = false
@@ -719,10 +817,153 @@ const formatDuration = (seconds) => {
   return `${mins}:${secs.toString().padStart(2, '0')}`
 }
 
-// 放大查看中间标注区域的当前图片（不占用画布点击，避免与标注操作冲突）
-const openCanvasImagePreview = () => {
-  if (currentImage.value?.url) {
-    showCanvasPreview.value = true
+// 显示AI辅助标注对话框
+const openAIAssistDialog = () => {
+  if (!currentImage.value) return
+  showAIAssistDialog.value = true
+}
+
+// 执行AI辅助标注
+const runAIAssist = async () => {
+  if (!currentImage.value) return
+
+  // 手动模式下验证是否选择了目标类别
+  if (aiAssistConfig.classMode === 'manual' &&
+      (aiAssistConfig.targetClass === null || aiAssistConfig.targetClass === undefined)) {
+    ElMessage.warning('请选择或输入目标类别')
+    return
+  }
+
+  isAIAssisting.value = true
+
+  try {
+    ElMessage.info('正在使用AI检测目标，请稍候...')
+
+    // 从canvas获取base64图片数据
+    const canvas = canvasRef.value
+    if (!canvas) {
+      ElMessage.error('Canvas未初始化')
+      isAIAssisting.value = false
+      return
+    }
+
+    // 获取图片的base64数据（不包括标注框）
+    const imageData = currentImage.value.url
+
+    // 调用AI辅助标注API
+    const response = await aiAssistAnnotation(
+        imageData,
+        aiAssistConfig.model,
+        aiAssistConfig.confidence
+    )
+
+    if (response.annotations && response.annotations.length > 0) {
+      // 根据模式处理标注
+      if (aiAssistConfig.mode === 'replace') {
+        // 替换模式：清空现有标注
+        currentImage.value.annotations = []
+      }
+
+      if (aiAssistConfig.classMode === 'auto') {
+        // 自动模式：自动添加COCO类别
+        const newClasses = new Set()
+
+        // 添加AI检测到的标注
+        response.annotations.forEach(ann => {
+          // 检查类别是否已存在
+          const className = ann.class_name || `class_${ann.class}`
+          if (!classList.value.includes(className)) {
+            newClasses.add(className)
+          }
+
+          // 找到或添加类别索引
+          let classIndex = classList.value.indexOf(className)
+          if (classIndex === -1) {
+            classList.value.push(className)
+            classIndex = classList.value.length - 1
+          }
+
+          currentImage.value.annotations.push({
+            class: classIndex,
+            x: ann.x,
+            y: ann.y,
+            width: ann.width,
+            height: ann.height
+          })
+        })
+
+        // 保存更新后的类别列表到localStorage
+        if (newClasses.size > 0) {
+          localStorage.setItem('annotationClasses', JSON.stringify(classList.value))
+          ElMessage.info(`已自动添加 ${newClasses.size} 个COCO类别到类别列表`)
+        }
+      } else {
+        // 手动模式：统一使用指定的类别
+        let targetClassIndex = aiAssistConfig.targetClass
+
+        // 如果是新输入的类别名称（字符串），添加到类别列表
+        if (typeof targetClassIndex === 'string') {
+          const newClassName = targetClassIndex
+          if (!classList.value.includes(newClassName)) {
+            classList.value.push(newClassName)
+            localStorage.setItem('annotationClasses', JSON.stringify(classList.value))
+            ElMessage.info(`已添加新类别: ${newClassName}`)
+          }
+          targetClassIndex = classList.value.indexOf(newClassName)
+        }
+
+        // 添加所有检测到的标注，统一使用目标类别
+        response.annotations.forEach(ann => {
+          currentImage.value.annotations.push({
+            class: targetClassIndex,
+            x: ann.x,
+            y: ann.y,
+            width: ann.width,
+            height: ann.height
+          })
+        })
+
+        ElMessage.success(`已将 ${response.annotations.length} 个目标标记为 "${classList.value[targetClassIndex]}"`)
+      }
+
+      // 保存历史记录
+      saveHistory()
+
+      // 重绘画布
+      drawCanvas()
+
+      showAIAssistDialog.value = false
+      if (aiAssistConfig.classMode === 'auto') {
+        ElMessage.success(`AI检测完成！检测到 ${response.annotations.length} 个目标`)
+      }
+    } else {
+      ElMessage.warning('未检测到任何目标，请尝试降低置信度阈值')
+    }
+
+  } catch (error) {
+    console.error('AI辅助标注失败:', error)
+    ElMessage.error(error.response?.data?.detail || 'AI辅助标注失败，请检查模型是否存在')
+  } finally {
+    isAIAssisting.value = false
+  }
+}
+
+// 加载可用模型列表
+const loadAvailableModels = async () => {
+  try {
+    const response = await getModels()
+    if (response && response.models) {
+      availableModels.value = response.models
+      // 设置默认模型：优先使用yolo11n.pt
+      if (availableModels.value.length > 0) {
+        const defaultModel = availableModels.value.find(m => m.name === 'yolo11n.pt') || availableModels.value[0]
+        aiAssistConfig.model = defaultModel.path
+      }
+    }
+  } catch (error) {
+    console.error('加载模型列表失败:', error)
+    // 如果加载失败，使用默认值
+    availableModels.value = []
   }
 }
 
@@ -730,10 +971,13 @@ const selectImage = (index) => {
   if (index >= 0 && index < imageList.value.length) {
     currentImageIndex.value = index
     selectedAnnotation.value = -1
-    // 等 DOM 更新（如 v-if 显示画布）后再加载图片到画布，否则 canvasRef 可能为 null
-    nextTick(() => {
-      loadImageToCanvas()
-    })
+
+    // 初始化新图片的历史记录
+    history.value = []
+    historyIndex.value = -1
+    saveHistory()
+
+    loadImageToCanvas()
   }
 }
 
@@ -776,21 +1020,17 @@ const loadImageToCanvas = async () => {
   const canvas = canvasRef.value
   ctx = canvas.getContext('2d')
 
-  // 换图时重置视图缩放与平移
-  viewScale.value = 1
-  viewOffsetX.value = 0
-  viewOffsetY.value = 0
-
   const img = new Image()
   img.onload = () => {
     currentImageObj = img
 
-    // 计算合适的缩放比例
+    // 计算合适的缩放比例（保证整张图落在画布内）
     const maxWidth = 800
     const maxHeight = 600
     const scaleX = maxWidth / img.width
     const scaleY = maxHeight / img.height
     scale.value = Math.min(scaleX, scaleY, 1)
+    zoom.value = 1
 
     canvasWidth.value = img.width * scale.value
     canvasHeight.value = img.height * scale.value
@@ -815,72 +1055,208 @@ const drawCanvas = () => {
   currentAnnotations.value.forEach((annotation, index) => {
     drawAnnotation(annotation, index === selectedAnnotation.value)
   })
+
+  // 绘制正在绘制中的多边形
+  if (isDrawingPolygon.value && polygonPoints.value.length > 0) {
+    const points = polygonPoints.value.map(p => ({
+      x: p.x * canvasWidth.value,
+      y: p.y * canvasHeight.value
+    }))
+
+    ctx.strokeStyle = '#ffff00'
+    ctx.fillStyle = 'rgba(255, 255, 0, 0.1)'
+    ctx.lineWidth = 2
+
+    // 绘制已有的线段
+    ctx.beginPath()
+    ctx.moveTo(points[0].x, points[0].y)
+    for (let i = 1; i < points.length; i++) {
+      ctx.lineTo(points[i].x, points[i].y)
+    }
+    ctx.stroke()
+
+    // 如果有足够的点，显示填充预览
+    if (points.length >= 3) {
+      ctx.fill()
+    }
+
+    // 绘制顶点
+    points.forEach((point, index) => {
+      ctx.fillStyle = '#ffff00'
+      ctx.beginPath()
+      ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI)
+      ctx.fill()
+
+      // 第一个点用不同颜色标识
+      if (index === 0) {
+        ctx.strokeStyle = '#ff0000'
+        ctx.lineWidth = 2
+        ctx.stroke()
+      }
+    })
+  }
 }
 
 const drawAnnotation = (annotation, isSelected = false) => {
   if (!ctx) return
 
-  const x = annotation.x * canvasWidth.value
-  const y = annotation.y * canvasHeight.value
-  const width = annotation.width * canvasWidth.value
-  const height = annotation.height * canvasHeight.value
+  // 根据标注类型绘制
+  if (annotation.type === 'polygon' && annotation.points && annotation.points.length > 0) {
+    // 绘制多边形
+    const points = annotation.points.map(p => ({
+      x: p.x * canvasWidth.value,
+      y: p.y * canvasHeight.value
+    }))
+
+    ctx.strokeStyle = isSelected ? '#ff0000' : '#00ff00'
+    ctx.fillStyle = isSelected ? 'rgba(255, 0, 0, 0.1)' : 'rgba(0, 255, 0, 0.1)'
+    ctx.lineWidth = isSelected ? 3 : 2
+
+    // 绘制多边形填充
+    ctx.beginPath()
+    ctx.moveTo(points[0].x, points[0].y)
+    for (let i = 1; i < points.length; i++) {
+      ctx.lineTo(points[i].x, points[i].y)
+    }
+    ctx.closePath()
+    ctx.fill()
+    ctx.stroke()
+
+    // 绘制顶点
+    points.forEach((point, index) => {
+      ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
+      ctx.beginPath()
+      ctx.arc(point.x, point.y, isSelected ? 5 : 3, 0, 2 * Math.PI)
+      ctx.fill()
+    })
 
-  // 绘制边界框
-  ctx.strokeStyle = isSelected ? '#ff0000' : '#00ff00'
-  ctx.lineWidth = isSelected ? 3 : 2
-  ctx.strokeRect(x, y, width, height)
+    // 绘制类别标签
+    const label = classList.value[annotation.class] || `未定义 (${annotation.class})`
+    ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
+    ctx.font = '14px Arial'
+    const textWidth = ctx.measureText(label).width
 
-  // 绘制类别标签
-  const label = classList.value[annotation.class]
-  ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
-  ctx.font = '14px Arial'
-  const textWidth = ctx.measureText(label).width
+    const firstPoint = points[0]
+    ctx.fillRect(firstPoint.x, firstPoint.y - 20, textWidth + 8, 20)
+    ctx.fillStyle = 'white'
+    ctx.fillText(label, firstPoint.x + 4, firstPoint.y - 6)
 
-  ctx.fillRect(x, y - 20, textWidth + 8, 20)
-  ctx.fillStyle = 'white'
-  ctx.fillText(label, x + 4, y - 6)
+  } else {
+    // 绘制矩形框
+    const x = annotation.x * canvasWidth.value
+    const y = annotation.y * canvasHeight.value
+    const width = annotation.width * canvasWidth.value
+    const height = annotation.height * canvasHeight.value
+
+    // 绘制边界框
+    ctx.strokeStyle = isSelected ? '#ff0000' : '#00ff00'
+    ctx.lineWidth = isSelected ? 3 : 2
+    ctx.strokeRect(x, y, width, height)
+
+    // 绘制类别标签
+    const label = classList.value[annotation.class] || `未定义 (${annotation.class})`
+    ctx.fillStyle = isSelected ? '#ff0000' : '#00ff00'
+    ctx.font = '14px Arial'
+    const textWidth = ctx.measureText(label).width
+
+    ctx.fillRect(x, y - 20, textWidth + 8, 20)
+    ctx.fillStyle = 'white'
+    ctx.fillText(label, x + 4, y - 6)
+
+    // 如果被选中，绘制调整手柄
+    if (isSelected) {
+      const handleSize = 6
+      ctx.fillStyle = '#ff0000'
+
+      // 四个角
+      ctx.fillRect(x - handleSize/2, y - handleSize/2, handleSize, handleSize)
+      ctx.fillRect(x + width - handleSize/2, y - handleSize/2, handleSize, handleSize)
+      ctx.fillRect(x - handleSize/2, y + height - handleSize/2, handleSize, handleSize)
+      ctx.fillRect(x + width - handleSize/2, y + height - handleSize/2, handleSize, handleSize)
+
+      // 四条边的中点
+      ctx.fillRect(x + width/2 - handleSize/2, y - handleSize/2, handleSize, handleSize)
+      ctx.fillRect(x + width/2 - handleSize/2, y + height - handleSize/2, handleSize, handleSize)
+      ctx.fillRect(x - handleSize/2, y + height/2 - handleSize/2, handleSize, handleSize)
+      ctx.fillRect(x + width - handleSize/2, y + height/2 - handleSize/2, handleSize, handleSize)
+    }
+  }
 }
 
-// 将视口上的鼠标事件转换为画布归一化坐标 (0-1)，考虑缩放、平移和滚动
 const getCanvasCoordinates = (event) => {
-  const viewport = canvasViewportRef.value
-  if (!viewport) return {x: 0, y: 0}
-  const rect = viewport.getBoundingClientRect()
-  const vx = event.clientX - rect.left + viewport.scrollLeft - panMargin - viewOffsetX.value
-  const vy = event.clientY - rect.top + viewport.scrollTop - panMargin - viewOffsetY.value
-  const contentX = vx / viewScale.value
-  const contentY = vy / viewScale.value
+  const canvas = canvasRef.value
+  const rect = canvas.getBoundingClientRect()
+  // 使用实际渲染尺寸（包含缩放），这样缩放后坐标仍然是 0-1 的相对值
   return {
-    x: contentX / canvasWidth.value,
-    y: contentY / canvasHeight.value
+    x: (event.clientX - rect.left) / rect.width,
+    y: (event.clientY - rect.top) / rect.height
   }
 }
 
-const handleCanvasViewportMouseDown = (event) => {
-  if (event.button === 2) {
-    isPanning.value = true
-    lastPanPoint.value = {x: event.clientX, y: event.clientY}
-    return
+// 检测鼠标是否在标注框的调整手柄上
+const getResizeHandle = (coords, annotation) => {
+  const handleSize = 8 / canvasWidth.value // 8像素的手柄大小
+  const x = annotation.x
+  const y = annotation.y
+  const w = annotation.width
+  const h = annotation.height
+
+  // 四个角
+  if (Math.abs(coords.x - x) < handleSize && Math.abs(coords.y - y) < handleSize) return 'tl'
+  if (Math.abs(coords.x - (x + w)) < handleSize && Math.abs(coords.y - y) < handleSize) return 'tr'
+  if (Math.abs(coords.x - x) < handleSize && Math.abs(coords.y - (y + h)) < handleSize) return 'bl'
+  if (Math.abs(coords.x - (x + w)) < handleSize && Math.abs(coords.y - (y + h)) < handleSize) return 'br'
+
+  // 四条边
+  if (Math.abs(coords.x - x) < handleSize && coords.y >= y && coords.y <= y + h) return 'l'
+  if (Math.abs(coords.x - (x + w)) < handleSize && coords.y >= y && coords.y <= y + h) return 'r'
+  if (Math.abs(coords.y - y) < handleSize && coords.x >= x && coords.x <= x + w) return 't'
+  if (Math.abs(coords.y - (y + h)) < handleSize && coords.x >= x && coords.x <= x + w) return 'b'
+
+  return ''
+}
+
+// 检测鼠标是否在标注框内部
+const isInsideAnnotation = (coords, annotation) => {
+  if (annotation.type === 'polygon' && annotation.points) {
+    // 使用射线法判断点是否在多边形内
+    return isPointInPolygon(coords, annotation.points)
+  } else {
+    // 矩形判断
+    return coords.x >= annotation.x &&
+        coords.x <= annotation.x + annotation.width &&
+        coords.y >= annotation.y &&
+        coords.y <= annotation.y + annotation.height
   }
-  if (event.button === 0) handleMouseDown(event)
 }
 
-const handleCanvasViewportMouseMove = (event) => {
-  if (isPanning.value) {
-    viewOffsetX.value += event.clientX - lastPanPoint.value.x
-    viewOffsetY.value += event.clientY - lastPanPoint.value.y
-    lastPanPoint.value = {x: event.clientX, y: event.clientY}
-    return
+// 射线法判断点是否在多边形内
+const isPointInPolygon = (point, polygonPoints) => {
+  let inside = false
+  for (let i = 0, j = polygonPoints.length - 1; i < polygonPoints.length; j = i++) {
+    const xi = polygonPoints[i].x, yi = polygonPoints[i].y
+    const xj = polygonPoints[j].x, yj = polygonPoints[j].y
+
+    const intersect = ((yi > point.y) !== (yj > point.y)) &&
+        (point.x < (xj - xi) * (point.y - yi) / (yj - yi) + xi)
+    if (intersect) inside = !inside
   }
-  handleMouseMove(event)
+  return inside
 }
 
-const handleCanvasViewportMouseUp = (event) => {
-  if (event.button === 2) {
-    isPanning.value = false
-    return
+// 检测鼠标是否在多边形顶点附近
+const getNearbyPolygonPoint = (coords, annotation) => {
+  if (annotation.type !== 'polygon' || !annotation.points) return -1
+
+  const threshold = 10 / canvasWidth.value // 10像素的容差
+  for (let i = 0; i < annotation.points.length; i++) {
+    const point = annotation.points[i]
+    const distance = Math.sqrt(
+        Math.pow(coords.x - point.x, 2) + Math.pow(coords.y - point.y, 2)
+    )
+    if (distance < threshold) return i
   }
-  if (event.button === 0) handleMouseUp(event)
+  return -1
 }
 
 const handleMouseDown = (event) => {
@@ -888,83 +1264,318 @@ const handleMouseDown = (event) => {
 
   const coords = getCanvasCoordinates(event)
 
-  if (currentTool.value === 'rect') {
+  if (currentTool.value === 'polygon') {
+    // 多边形绘制模式
+    if (!isDrawingPolygon.value) {
+      // 开始绘制新多边形
+      isDrawingPolygon.value = true
+      polygonPoints.value = [coords]
+      selectedAnnotation.value = -1
+    } else {
+      // 检查是否点击在起始点附近（完成多边形）
+      const firstPoint = polygonPoints.value[0]
+      const distance = Math.sqrt(
+          Math.pow((coords.x - firstPoint.x) * canvasWidth.value, 2) +
+          Math.pow((coords.y - firstPoint.y) * canvasHeight.value, 2)
+      )
+
+      if (distance < 10 && polygonPoints.value.length >= 3) {
+        // 完成多边形
+        const annotation = {
+          type: 'polygon',
+          class: currentClass.value,
+          points: [...polygonPoints.value]
+        }
+        currentImage.value.annotations.push(annotation)
+        selectedAnnotation.value = currentImage.value.annotations.length - 1
+
+        // 重置状态
+        isDrawingPolygon.value = false
+        polygonPoints.value = []
+
+        saveHistory()
+        drawCanvas()
+        ElMessage.success('多边形标注已完成')
+      } else {
+        // 添加新点
+        polygonPoints.value.push(coords)
+        drawCanvas()
+      }
+    }
+  } else if (currentTool.value === 'rect') {
+    // 检查是否点击在已选中的标注框上
+    if (selectedAnnotation.value >= 0) {
+      const annotation = currentAnnotations.value[selectedAnnotation.value]
+
+      // 只对矩形标注处理调整手柄
+      if (annotation.type !== 'polygon') {
+        // 检查是否点击在调整手柄上
+        const handle = getResizeHandle(coords, annotation)
+        if (handle) {
+          isResizing.value = true
+          resizeHandle.value = handle
+          resizeStartAnnotation.value = { ...annotation }
+          dragStartPos.value = coords
+          return
+        }
+      }
+
+      // 检查是否点击在标注框内部（拖动）
+      if (isInsideAnnotation(coords, annotation)) {
+        isDragging.value = true
+        dragStartPos.value = coords
+        return
+      }
+    }
+
+    // 否则开始绘制新的标注框
     isDrawing.value = true
     startPoint.value = coords
+    selectedAnnotation.value = -1
   } else if (currentTool.value === 'select') {
-    selectAnnotationAt(coords)
+    selectAnnotationAt(coords, event)
   } else if (currentTool.value === 'delete') {
     deleteAnnotationAt(coords)
   }
 }
 
 const handleMouseMove = (event) => {
-  if (!isDrawing.value || currentTool.value !== 'rect') return
-
   const coords = getCanvasCoordinates(event)
-  drawCanvas()
 
-  // 绘制预览框
-  const x = Math.min(startPoint.value.x, coords.x) * canvasWidth.value
-  const y = Math.min(startPoint.value.y, coords.y) * canvasHeight.value
-  const width = Math.abs(coords.x - startPoint.value.x) * canvasWidth.value
-  const height = Math.abs(coords.y - startPoint.value.y) * canvasHeight.value
+  // 多边形绘制时显示实时预览线
+  if (isDrawingPolygon.value && polygonPoints.value.length > 0) {
+    drawCanvas()
 
-  ctx.strokeStyle = '#ffff00'
-  ctx.lineWidth = 2
-  ctx.strokeRect(x, y, width, height)
-}
+    // 绘制从最后一个点到鼠标位置的预览线
+    const lastPoint = polygonPoints.value[polygonPoints.value.length - 1]
+    ctx.strokeStyle = '#ffff00'
+    ctx.lineWidth = 2
+    ctx.setLineDash([5, 5])
+    ctx.beginPath()
+    ctx.moveTo(lastPoint.x * canvasWidth.value, lastPoint.y * canvasHeight.value)
+    ctx.lineTo(coords.x * canvasWidth.value, coords.y * canvasHeight.value)
+    ctx.stroke()
+    ctx.setLineDash([])
+
+    // 如果鼠标靠近起始点，高亮起始点
+    const firstPoint = polygonPoints.value[0]
+    const distance = Math.sqrt(
+        Math.pow((coords.x - firstPoint.x) * canvasWidth.value, 2) +
+        Math.pow((coords.y - firstPoint.y) * canvasHeight.value, 2)
+    )
+    if (distance < 10 && polygonPoints.value.length >= 3) {
+      ctx.fillStyle = '#ff0000'
+      ctx.beginPath()
+      ctx.arc(firstPoint.x * canvasWidth.value, firstPoint.y * canvasHeight.value, 8, 0, 2 * Math.PI)
+      ctx.fill()
+    }
 
-const handleMouseUp = (event) => {
-  if (!isDrawing.value || currentTool.value !== 'rect') return
+    return
+  }
 
-  const coords = getCanvasCoordinates(event)
+  // 处理拖动标注框
+  if (isDragging.value && selectedAnnotation.value >= 0) {
+    const annotation = currentAnnotations.value[selectedAnnotation.value]
+    const dx = coords.x - dragStartPos.value.x
+    const dy = coords.y - dragStartPos.value.y
+
+    if (annotation.type === 'polygon' && annotation.points) {
+      // 拖动多边形
+      annotation.points = annotation.points.map(p => ({
+        x: Math.max(0, Math.min(1, p.x + dx)),
+        y: Math.max(0, Math.min(1, p.y + dy))
+      }))
+    } else {
+      // 拖动矩形
+      annotation.x = Math.max(0, Math.min(1 - annotation.width, annotation.x + dx))
+      annotation.y = Math.max(0, Math.min(1 - annotation.height, annotation.y + dy))
+    }
+
+    dragStartPos.value = coords
+    drawCanvas()
+    return
+  }
+
+  // 处理调整标注框大小（仅矩形）
+  if (isResizing.value && selectedAnnotation.value >= 0) {
+    const annotation = currentAnnotations.value[selectedAnnotation.value]
+    const start = resizeStartAnnotation.value
+    const dx = coords.x - dragStartPos.value.x
+    const dy = coords.y - dragStartPos.value.y
+
+    switch (resizeHandle.value) {
+      case 'tl':
+        annotation.x = start.x + dx
+        annotation.y = start.y + dy
+        annotation.width = start.width - dx
+        annotation.height = start.height - dy
+        break
+      case 'tr':
+        annotation.y = start.y + dy
+        annotation.width = start.width + dx
+        annotation.height = start.height - dy
+        break
+      case 'bl':
+        annotation.x = start.x + dx
+        annotation.width = start.width - dx
+        annotation.height = start.height + dy
+        break
+      case 'br':
+        annotation.width = start.width + dx
+        annotation.height = start.height + dy
+        break
+      case 'l':
+        annotation.x = start.x + dx
+        annotation.width = start.width - dx
+        break
+      case 'r':
+        annotation.width = start.width + dx
+        break
+      case 't':
+        annotation.y = start.y + dy
+        annotation.height = start.height - dy
+        break
+      case 'b':
+        annotation.height = start.height + dy
+        break
+    }
 
-  const x = Math.min(startPoint.value.x, coords.x)
-  const y = Math.min(startPoint.value.y, coords.y)
-  const width = Math.abs(coords.x - startPoint.value.x)
-  const height = Math.abs(coords.y - startPoint.value.y)
-
-  // 只有在有效大小时才创建标注
-  if (width > 0.01 && height > 0.01) {
-    const annotation = {
-      class: currentClass.value,
-      x: x,
-      y: y,
-      width: width,
-      height: height
+    // 确保宽高不为负
+    if (annotation.width < 0) {
+      annotation.x += annotation.width
+      annotation.width = -annotation.width
+    }
+    if (annotation.height < 0) {
+      annotation.y += annotation.height
+      annotation.height = -annotation.height
     }
 
-    currentImage.value.annotations.push(annotation)
+    // 限制在画布范围内
+    annotation.x = Math.max(0, Math.min(1, annotation.x))
+    annotation.y = Math.max(0, Math.min(1, annotation.y))
+    annotation.width = Math.max(0.01, Math.min(1 - annotation.x, annotation.width))
+    annotation.height = Math.max(0.01, Math.min(1 - annotation.y, annotation.height))
+
     drawCanvas()
+    return
   }
 
-  isDrawing.value = false
+  // 处理绘制新标注框
+  if (isDrawing.value && currentTool.value === 'rect') {
+    drawCanvas()
+
+    // 绘制预览框
+    const x = Math.min(startPoint.value.x, coords.x) * canvasWidth.value
+    const y = Math.min(startPoint.value.y, coords.y) * canvasHeight.value
+    const width = Math.abs(coords.x - startPoint.value.x) * canvasWidth.value
+    const height = Math.abs(coords.y - startPoint.value.y) * canvasHeight.value
+
+    ctx.strokeStyle = '#ffff00'
+    ctx.lineWidth = 2
+    ctx.strokeRect(x, y, width, height)
+    return
+  }
+
+  // 更新鼠标样式
+  if (currentTool.value === 'rect' && selectedAnnotation.value >= 0) {
+    const annotation = currentAnnotations.value[selectedAnnotation.value]
+    const handle = getResizeHandle(coords, annotation)
+
+    if (handle) {
+      const cursors = {
+        'tl': 'nw-resize',
+        'tr': 'ne-resize',
+        'bl': 'sw-resize',
+        'br': 'se-resize',
+        'l': 'w-resize',
+        'r': 'e-resize',
+        't': 'n-resize',
+        'b': 's-resize'
+      }
+      canvasRef.value.style.cursor = cursors[handle]
+    } else if (isInsideAnnotation(coords, annotation)) {
+      canvasRef.value.style.cursor = 'move'
+    } else {
+      canvasRef.value.style.cursor = 'crosshair'
+    }
+  }
+}
+
+const handleMouseUp = (event) => {
+  // 结束拖动或调整
+  if (isDragging.value || isResizing.value) {
+    isDragging.value = false
+    isResizing.value = false
+    resizeHandle.value = ''
+    resizeStartAnnotation.value = null
+    saveHistory() // 保存历史记录
+    return
+  }
+
+  // 处理绘制新标注框
+  if (isDrawing.value && currentTool.value === 'rect') {
+    const coords = getCanvasCoordinates(event)
+
+    const x = Math.min(startPoint.value.x, coords.x)
+    const y = Math.min(startPoint.value.y, coords.y)
+    const width = Math.abs(coords.x - startPoint.value.x)
+    const height = Math.abs(coords.y - startPoint.value.y)
+
+    // 只有在有效大小时才创建标注
+    if (width > 0.01 && height > 0.01) {
+      const annotation = {
+        class: currentClass.value,
+        x: x,
+        y: y,
+        width: width,
+        height: height
+      }
+
+      currentImage.value.annotations.push(annotation)
+      selectedAnnotation.value = currentImage.value.annotations.length - 1
+      saveHistory() // 保存历史记录
+      drawCanvas()
+    }
+
+    isDrawing.value = false
+  }
 }
 
-const selectAnnotationAt = (coords) => {
+const selectAnnotationAt = (coords, event = null) => {
+  // 从上到下找出所有命中的标注（包含多边形）
+  const hits = []
   for (let i = currentAnnotations.value.length - 1; i >= 0; i--) {
     const annotation = currentAnnotations.value[i]
-    if (coords.x >= annotation.x &&
-        coords.x <= annotation.x + annotation.width &&
-        coords.y >= annotation.y &&
-        coords.y <= annotation.y + annotation.height) {
-      selectedAnnotation.value = i
-      drawCanvas()
-      return
+    if (isInsideAnnotation(coords, annotation)) {
+      hits.push(i)
     }
   }
-  selectedAnnotation.value = -1
+
+  if (hits.length === 0) {
+    selectedAnnotation.value = -1
+    drawCanvas()
+    return
+  }
+
+  let targetIndex
+  // Alt + 点击 重叠区域时，在命中列表中循环切换
+  if (event && event.altKey && hits.length > 1) {
+    const currentPos = hits.indexOf(selectedAnnotation.value)
+    const nextPos = currentPos >= 0 ? (currentPos + 1) % hits.length : 0
+    targetIndex = hits[nextPos]
+  } else {
+    // 默认选择最上层的一个
+    targetIndex = hits[0]
+  }
+
+  selectedAnnotation.value = targetIndex
   drawCanvas()
 }
 
 const deleteAnnotationAt = (coords) => {
   for (let i = currentAnnotations.value.length - 1; i >= 0; i--) {
     const annotation = currentAnnotations.value[i]
-    if (coords.x >= annotation.x &&
-        coords.x <= annotation.x + annotation.width &&
-        coords.y >= annotation.y &&
-        coords.y <= annotation.y + annotation.height) {
+    if (isInsideAnnotation(coords, annotation)) {
       currentImage.value.annotations.splice(i, 1)
       selectedAnnotation.value = -1
       drawCanvas()
@@ -981,59 +1592,48 @@ const selectAnnotation = (index) => {
 const deleteAnnotation = (index) => {
   currentImage.value.annotations.splice(index, 1)
   selectedAnnotation.value = -1
+  saveHistory() // 保存历史记录
+  drawCanvas()
+}
+
+const changeZoom = (factor) => {
+  if (!currentImageObj) return
+  const newZoom = Math.min(4, Math.max(0.5, zoom.value * factor))
+  if (newZoom === zoom.value) return
+  zoom.value = newZoom
+  // 只改变显示缩放，不改变画布大小，避免清空内容
+  drawCanvas()
+}
+
+const resetZoom = () => {
+  if (!currentImageObj) return
+  zoom.value = 1
   drawCanvas()
 }
 
 const handleWheel = (event) => {
-  if (!currentImage.value) return
+  if (!currentImageObj) return
   event.preventDefault()
-  const viewport = canvasViewportRef.value
-  if (!viewport) return
-  const rect = viewport.getBoundingClientRect()
-  const vx = event.clientX - rect.left + viewport.scrollLeft - panMargin - viewOffsetX.value
-  const vy = event.clientY - rect.top + viewport.scrollTop - panMargin - viewOffsetY.value
-  const contentX = vx / viewScale.value
-  const contentY = vy / viewScale.value
-  const factor = event.deltaY > 0 ? 1 / 1.15 : 1.15
-  let newScale = viewScale.value * factor
-  newScale = Math.max(viewScaleMin, Math.min(viewScaleMax, newScale))
-  viewOffsetX.value = (event.clientX - rect.left + viewport.scrollLeft - panMargin) - contentX * newScale
-  viewOffsetY.value = (event.clientY - rect.top + viewport.scrollTop - panMargin) - contentY * newScale
-  viewScale.value = newScale
-}
-
-const canvasZoomIn = () => {
-  const viewport = canvasViewportRef.value
-  if (!viewport) return
-  const rect = viewport.getBoundingClientRect()
-  const cx = rect.width / 2 + viewport.scrollLeft - panMargin
-  const cy = rect.height / 2 + viewport.scrollTop - panMargin
-  const contentX = (cx - viewOffsetX.value) / viewScale.value
-  const contentY = (cy - viewOffsetY.value) / viewScale.value
-  const newScale = Math.min(viewScaleMax, viewScale.value * 1.25)
-  viewOffsetX.value = cx - contentX * newScale
-  viewOffsetY.value = cy - contentY * newScale
-  viewScale.value = newScale
-}
-
-const canvasZoomOut = () => {
-  const viewport = canvasViewportRef.value
-  if (!viewport) return
-  const rect = viewport.getBoundingClientRect()
-  const cx = rect.width / 2 + viewport.scrollLeft - panMargin
-  const cy = rect.height / 2 + viewport.scrollTop - panMargin
-  const contentX = (cx - viewOffsetX.value) / viewScale.value
-  const contentY = (cy - viewOffsetY.value) / viewScale.value
-  const newScale = Math.max(viewScaleMin, viewScale.value / 1.25)
-  viewOffsetX.value = cx - contentX * newScale
-  viewOffsetY.value = cy - contentY * newScale
-  viewScale.value = newScale
-}
-
-const canvasZoomReset = () => {
-  viewScale.value = 1
-  viewOffsetX.value = 0
-  viewOffsetY.value = 0
+  const factor = event.deltaY < 0 ? 1.1 : 0.9
+  changeZoom(factor)
+}
+
+// 处理右键点击
+const handleRightClick = (event) => {
+  event.preventDefault() // 阻止默认右键菜单
+
+  // 如果正在绘制多边形，右键取消
+  if (isDrawingPolygon.value) {
+    cancelPolygon()
+  }
+}
+
+// 取消多边形绘制
+const cancelPolygon = () => {
+  isDrawingPolygon.value = false
+  polygonPoints.value = []
+  drawCanvas()
+  ElMessage.info('已取消多边形绘制')
 }
 
 const saveAnnotations = () => {
@@ -1051,7 +1651,7 @@ const saveAnnotations = () => {
   }).join('\n')
 
   const fileName = currentImage.value.name.replace(/\.[^/.]+$/, '') + '.txt'
-  const blob = new Blob([yoloFormat], {type: 'text/plain'})
+  const blob = new Blob([yoloFormat], { type: 'text/plain' })
   saveAs(blob, fileName)
 
   ElMessage.success('标注文件已保存')
@@ -1072,16 +1672,33 @@ const generatePreview = async () => {
     // 生成3个预览样本
     const previews = []
     for (let i = 0; i < 3; i++) {
-      const augmentedImage = await applyImageAugmentation(currentImage.value.url, {
-        ...augmentationConfig,
-        seed: i
-      })
+      // 生成随机变换参数
+      const transformParams = {
+        rotation: augmentationConfig.rotation ? (Math.random() - 0.5) * 30 : 0,
+        scaleX: 1,
+        scaleY: 1,
+        flipX: false,
+        flipY: false
+      }
+
+      if (augmentationConfig.scale) {
+        transformParams.scaleX = 0.9 + Math.random() * 0.2;
+        transformParams.scaleY = 0.9 + Math.random() * 0.2;
+      }
+
+      if (augmentationConfig.flip) {
+        if (Math.random() > 0.5) transformParams.flipX = true;
+        if (Math.random() > 0.5) transformParams.flipY = true;
+      }
+
+      const augmentedImage = await applyImageAugmentation(currentImage.value.url, transformParams)
       previews.push(augmentedImage)
     }
     augmentationPreview.value = previews
     ElMessage.success('预览生成完成')
   } catch (error) {
-    ElMessage.error('预览生成失败')
+    console.error('预览生成失败:', error)
+    ElMessage.error('预览生成失败: ' + error.message)
   } finally {
     isGeneratingPreview.value = false
   }
@@ -1097,10 +1714,36 @@ const applyDataAugmentation = async () => {
 
     // 生成增强图片
     for (let i = 0; i < augmentationConfig.count; i++) {
-      const augmentedImageUrl = await applyImageAugmentation(originalImage.url, {
-        ...augmentationConfig,
-        seed: i
-      })
+      // 生成随机变换参数
+      const transformParams = {
+        rotation: augmentationConfig.rotation ? (Math.random() - 0.5) * 30 : 0, // ±15度
+        scaleX: 1,
+        scaleY: 1,
+        flipX: false,
+        flipY: false
+      }
+
+      // 缩放变换
+      if (augmentationConfig.scale) {
+        transformParams.scaleX = 0.9 + Math.random() * 0.2; // 0.9-1.1
+        transformParams.scaleY = 0.9 + Math.random() * 0.2;
+      }
+
+      // 翻转变换
+      if (augmentationConfig.flip) {
+        if (Math.random() > 0.5) transformParams.flipX = true;
+        if (Math.random() > 0.5) transformParams.flipY = true;
+      }
+
+      const augmentedImageUrl = await applyImageAugmentation(originalImage.url, transformParams)
+
+      // 变换标注坐标
+      const transformedAnnotations = transformAnnotations(
+          originalImage.annotations,
+          originalImage.width,
+          originalImage.height,
+          transformParams
+      )
 
       // 创建新的图片对象
       const newImage = {
@@ -1109,7 +1752,7 @@ const applyDataAugmentation = async () => {
         url: augmentedImageUrl,
         width: originalImage.width,
         height: originalImage.height,
-        annotations: [...originalImage.annotations] // 复制原始标注
+        annotations: transformedAnnotations
       }
 
       newImages.push(newImage)
@@ -1122,14 +1765,74 @@ const applyDataAugmentation = async () => {
     showAugmentationDialog.value = false
 
   } catch (error) {
-    ElMessage.error('数据增强失败')
+    console.error('数据增强失败:', error)
+    ElMessage.error('数据增强失败: ' + error.message)
   } finally {
     isApplyingAugmentation.value = false
   }
 }
 
+// 标注坐标变换函数
+const transformAnnotations = (annotations, imgWidth, imgHeight, transformParams) => {
+  return annotations.map(annotation => {
+    // 获取原始标注框的中心点和尺寸
+    const centerX = annotation.x + annotation.width / 2
+    const centerY = annotation.y + annotation.height / 2
+    const width = annotation.width
+    const height = annotation.height
+
+    // 转换为中心点坐标系 (-0.5 到 0.5)
+    let x = centerX - 0.5
+    let y = centerY - 0.5
+
+    // 应用旋转变换
+    if (transformParams.rotation !== 0) {
+      const cos = Math.cos(transformParams.rotation * Math.PI / 180)
+      const sin = Math.sin(transformParams.rotation * Math.PI / 180)
+      const newX = x * cos - y * sin
+      const newY = x * sin + y * cos
+      x = newX
+      y = newY
+    }
+
+    // 应用缩放变换
+    x *= transformParams.scaleX
+    y *= transformParams.scaleY
+    const newWidth = width * Math.abs(transformParams.scaleX)
+    const newHeight = height * Math.abs(transformParams.scaleY)
+
+    // 应用翻转变换
+    if (transformParams.flipX) {
+      x = -x
+    }
+    if (transformParams.flipY) {
+      y = -y
+    }
+
+    // 转换回图像坐标系 (0 到 1)
+    const newCenterX = x + 0.5
+    const newCenterY = y + 0.5
+
+    // 确保坐标在有效范围内
+    if (newCenterX < 0 || newCenterX > 1 || newCenterY < 0 || newCenterY > 1 ||
+        newWidth <= 0 || newWidth > 1 || newHeight <= 0 || newHeight > 1) {
+      // 如果变换后超出范围，则返回null表示该标注应该被过滤掉
+      return null
+    }
+
+    // 创建新的标注对象
+    return {
+      ...annotation,
+      x: newCenterX - newWidth / 2,
+      y: newCenterY - newHeight / 2,
+      width: newWidth,
+      height: newHeight
+    }
+  }).filter(annotation => annotation !== null) // 过滤掉超出范围的标注
+}
+
 // 图片增强处理函数
-const applyImageAugmentation = async (imageUrl, config) => {
+const applyImageAugmentation = async (imageUrl, transformParams) => {
   return new Promise((resolve) => {
     const img = new Image()
     img.crossOrigin = 'anonymous'
@@ -1150,52 +1853,20 @@ const applyImageAugmentation = async (imageUrl, config) => {
       ctx.translate(centerX, centerY)
 
       // 旋转
-      if (config.rotation) {
-        const angle = (Math.random() - 0.5) * 30 * Math.PI / 180 // ±15度
+      if (transformParams.rotation) {
+        const angle = transformParams.rotation * Math.PI / 180
         ctx.rotate(angle)
       }
 
-      // 缩放
-      if (config.scale) {
-        const scaleX = config.flip && Math.random() > 0.5 ? -(0.9 + Math.random() * 0.2) : (0.9 + Math.random() * 0.2)
-        const scaleY = config.flip && Math.random() > 0.5 ? -(0.9 + Math.random() * 0.2) : (0.9 + Math.random() * 0.2)
-        ctx.scale(scaleX, scaleY)
-      } else if (config.flip) {
-        const flipX = Math.random() > 0.5 ? -1 : 1
-        const flipY = Math.random() > 0.5 ? -1 : 1
-        ctx.scale(flipX, flipY)
-      }
+      // 缩放和翻转
+      const scaleX = transformParams.flipX ? -transformParams.scaleX : transformParams.scaleX
+      const scaleY = transformParams.flipY ? -transformParams.scaleY : transformParams.scaleY
+      ctx.scale(scaleX, scaleY)
 
       // 绘制图片
       ctx.drawImage(img, -img.width / 2, -img.height / 2)
       ctx.restore()
 
-      // 应用颜色调整
-      if (config.brightness || config.contrast) {
-        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-        const data = imageData.data
-
-        const brightness = config.brightness ? (0.8 + Math.random() * 0.4) : 1 // 0.8-1.2
-        const contrast = config.contrast ? (0.8 + Math.random() * 0.4) : 1 // 0.8-1.2
-
-        for (let i = 0; i < data.length; i += 4) {
-          // 应用亮度和对比度
-          data[i] = Math.min(255, Math.max(0, (data[i] - 128) * contrast + 128 + (brightness - 1) * 50))     // R
-          data[i + 1] = Math.min(255, Math.max(0, (data[i + 1] - 128) * contrast + 128 + (brightness - 1) * 50)) // G
-          data[i + 2] = Math.min(255, Math.max(0, (data[i + 2] - 128) * contrast + 128 + (brightness - 1) * 50)) // B
-
-          // 添加噪声
-          if (config.noise) {
-            const noise = (Math.random() - 0.5) * 20
-            data[i] = Math.min(255, Math.max(0, data[i] + noise))
-            data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noise))
-            data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noise))
-          }
-        }
-
-        ctx.putImageData(imageData, 0, 0)
-      }
-
       resolve(canvas.toDataURL('image/png'))
     }
 
@@ -1359,7 +2030,7 @@ class_id center_x center_y width height
       zip.file('README.md', readme)
 
       // 生成ZIP文件
-      const zipBlob = await zip.generateAsync({type: 'blob'})
+      const zipBlob = await zip.generateAsync({ type: 'blob' })
       const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-')
       saveAs(zipBlob, `yolo_dataset_${timestamp}.zip`)
 
@@ -1397,6 +2068,20 @@ const saveClasses = () => {
 const handleKeyDown = (event) => {
   if (!currentImage.value) return
 
+  // Ctrl+Z 撤销
+  if (event.ctrlKey && event.key === 'z') {
+    event.preventDefault()
+    undo()
+    return
+  }
+
+  // Ctrl+Y 重做
+  if (event.ctrlKey && event.key === 'y') {
+    event.preventDefault()
+    redo()
+    return
+  }
+
   switch (event.key) {
     case 'a':
     case 'A':
@@ -1415,6 +2100,12 @@ const handleKeyDown = (event) => {
         deleteAnnotation(selectedAnnotation.value)
       }
       break
+    case 'Escape':
+      // 取消多边形绘制
+      if (isDrawingPolygon.value) {
+        cancelPolygon()
+      }
+      break
     default:
       // 数字键选择类别
       const num = parseInt(event.key)
@@ -1443,6 +2134,9 @@ onMounted(() => {
       localStorage.removeItem('annotationClasses')
     }
   }
+
+  // 加载可用模型列表
+  loadAvailableModels()
 })
 
 onUnmounted(() => {
@@ -1549,18 +2243,12 @@ onUnmounted(() => {
   opacity: 1;
 }
 
-.image-item img,
-.image-item-thumb {
+.image-item img {
   width: 50px;
   height: 50px;
   object-fit: cover;
   border-radius: 4px;
   margin-right: 10px;
-  cursor: pointer;
-}
-
-.image-item-thumb :deep(.el-image__inner) {
-  border-radius: 4px;
 }
 
 .image-info {
@@ -1594,66 +2282,25 @@ onUnmounted(() => {
 
 .canvas-container {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
   max-width: 100%;
   max-height: 100%;
-}
-
-.canvas-zoom-toolbar {
-  flex-shrink: 0;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: #fff;
-  border-bottom: 1px solid #e4e7ed;
-  gap: 12px;
-}
-
-.canvas-zoom-toolbar .canvas-zoom-btn {
-  flex-shrink: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.canvas-viewport {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  background: #e8e8e8;
-  cursor: crosshair;
-}
-
-.canvas-wrap {
-  flex-shrink: 0;
-  position: relative;
+  gap: 10px;
 }
 
-.canvas-transform-wrap {
-  position: absolute;
-  left: 0;
-  top: 0;
+.polygon-tip {
+  width: 100%;
+  max-width: 500px;
+  order: 2;
 }
 
-.canvas-container .canvas-transform-wrap canvas {
-  display: block;
+.canvas-container canvas {
   border: 1px solid #ddd;
   background: white;
   cursor: crosshair;
-}
-
-.canvas-hint {
-  flex-shrink: 0;
-  padding: 6px 12px;
-  font-size: 12px;
-  color: #909399;
-  background: #fff;
-  border-top: 1px solid #e4e7ed;
+  order: 1;
 }
 
 .empty-canvas {
@@ -1746,6 +2393,30 @@ onUnmounted(() => {
   font-family: monospace;
 }
 
+.tool-help {
+  padding: 15px;
+  border-top: 1px solid #e4e7ed;
+  background: #fff9e6;
+  margin-top: 10px;
+}
+
+.tool-help h4 {
+  margin: 0 0 10px 0;
+  color: #e6a23c;
+  font-size: 14px;
+}
+
+.tool-help ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.tool-help li {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 5px;
+}
+
 .class-editor .class-list {
   margin-bottom: 10px;
 }
@@ -1848,4 +2519,9 @@ onUnmounted(() => {
   color: #303133;
   margin-right: 8px;
 }
+
+/* AI辅助标注对话框样式 */
+.ai-assist-config {
+  padding: 10px 0;
+}
 </style>
-- 
Gitee


From 32c61af6f6e5e20d2b1293c026e20df3efd2a69b Mon Sep 17 00:00:00 2001
From: SamllNorth_Lee <18210040298@163.com>
Date: Tue, 10 Feb 2026 17:46:30 +0800
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=E4=B8=8A=E4=BC=A0=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=90=8E=EF=BC=8C=E9=BB=98=E8=AE=A4=E6=94=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=A0=87=E6=B3=A8=E5=8C=BA=E5=9F=9F=EF=BC=8C=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=97=B6=EF=BC=8C=E9=BB=98=E8=AE=A4=E6=94=BE?=
 =?UTF-8?q?=E7=BD=AE=E7=AC=AC=E4=B8=80=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Annotation.vue | 46 ++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/Annotation.vue b/frontend/src/views/Annotation.vue
index 95111fd..dfaa0da 100644
--- a/frontend/src/views/Annotation.vue
+++ b/frontend/src/views/Annotation.vue
@@ -699,6 +699,8 @@ const classForm = reactive({
 // 画布上下文
 let ctx = null
 let currentImageObj = null
+// 控制一次“选择文件”操作内只自动选中第一张图片（按选择顺序而不是加载顺序）
+let pendingSelectIndex = null
 
 // 方法
 const handleImageUpload = (file) => {
@@ -707,17 +709,17 @@ const handleImageUpload = (file) => {
     reader.onload = (e) => {
       const img = new Image()
       img.onload = () => {
-        const imageData = {
-          name: file.name,
-          url: e.target.result,
-          width: img.width,
-          height: img.height,
-          annotations: []
-        }
-        imageList.value.push(imageData)
-
-        if (currentImageIndex.value === -1) {
-          selectImage(0)
+        // 使用事先分配好的索引，保证索引顺序和用户选择顺序一致
+        const targetIndex = newIndex
+        const imageData = imageList.value[targetIndex]
+        imageData.url = e.target.result
+        imageData.width = img.width
+        imageData.height = img.height
+
+        // 仅在本次选择的第一张图片加载完成时，自动选中到中间标注区域
+        if (pendingSelectIndex === targetIndex) {
+          selectImage(targetIndex)
+          pendingSelectIndex = null
         }
 
         ElMessage.success(`已上传图片: ${file.name}`)
@@ -725,6 +727,21 @@ const handleImageUpload = (file) => {
       }
       img.src = e.target.result
     }
+    // 为即将加载的图片预先分配索引，保证顺序与文件选择顺序一致
+    const newIndex = imageList.value.length
+    imageList.value.push({
+      name: file.name,
+      url: '',
+      width: 0,
+      height: 0,
+      annotations: []
+    })
+
+    // 记录本次“选择文件”操作的第一张图片索引（单张、多张都生效）
+    if (pendingSelectIndex === null) {
+      pendingSelectIndex = newIndex
+    }
+
     reader.readAsDataURL(file)
   })
 }
@@ -977,7 +994,10 @@ const selectImage = (index) => {
     historyIndex.value = -1
     saveHistory()
 
-    loadImageToCanvas()
+    // 等 DOM 更新出 canvas 后再加载图片，避免第一次上传时 canvasRef 还不存在
+    nextTick(() => {
+      loadImageToCanvas()
+    })
   }
 }
 
@@ -1024,7 +1044,7 @@ const loadImageToCanvas = async () => {
   img.onload = () => {
     currentImageObj = img
 
-    // 计算合适的缩放比例（保证整张图落在画布内）
+    // 计算合适的缩放比例
     const maxWidth = 800
     const maxHeight = 600
     const scaleX = maxWidth / img.width
-- 
Gitee


From e50ac62728a9ed65efe3b437bc1c72fe8d38760c Mon Sep 17 00:00:00 2001
From: SamllNorth_Lee <18210040298@163.com>
Date: Wed, 11 Feb 2026 13:42:04 +0800
Subject: [PATCH 7/7] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=9B=86=E4=B8=8A=E4=BC=A0=E5=90=8E=EF=BC=8C=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=B2=A1=E6=9C=89=E8=8E=B7=E5=8F=96=E5=88=B0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=95=B0=E5=92=8C=E6=A0=87=E6=B3=A8=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Dataset.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/Dataset.vue b/frontend/src/views/Dataset.vue
index fd70941..63b80ad 100644
--- a/frontend/src/views/Dataset.vue
+++ b/frontend/src/views/Dataset.vue
@@ -239,15 +239,12 @@ const handleUpload = async (file) => {
     uploadStatus.value = 'success'
     ElMessage.success('数据集上传成功')
     
-    // 添加到列表
-    datasetList.value.unshift({
-      id: result.dataset_id,
-      name: file.name,
-      size: file.size,
-      createdAt: new Date(),
-      imageCount: 0,
-      annotationCount: 0
-    })
+    // 从服务端重新拉取列表，以获取图片数、标注数等完整信息
+    await loadDatasets()
+    // 若后端异步统计数量，延迟再刷新一次以确保展示正确
+    setTimeout(() => {
+      loadDatasets()
+    }, 2000)
     
     setTimeout(() => {
       uploadProgress.value = 0
-- 
Gitee