From bcdbf6fcc553f9fb15a6928707a7377c2257fcc8 Mon Sep 17 00:00:00 2001
From: XuqmGroup <noreply@xuqm.com>
Date: Fri, 8 May 2026 10:22:39 +0800
Subject: [PATCH] feat: add drag upload for app version dialog

---
 .../views/update/VersionManagementView.vue    | 50 +++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/tenant-platform/src/views/update/VersionManagementView.vue b/tenant-platform/src/views/update/VersionManagementView.vue
index f092a39..9621a47 100644
--- a/tenant-platform/src/views/update/VersionManagementView.vue
+++ b/tenant-platform/src/views/update/VersionManagementView.vue
@@ -532,10 +532,23 @@
           <el-input v-model="appUploadForm.marketUrl" placeholder="鸿蒙应用市场详情页链接" />
         </el-form-item>
         <el-form-item v-if="appUploadForm.platform === 'ANDROID'" label="包文件">
-          <el-upload :auto-upload="false" :limit="1" :on-change="onAppPackageChange" accept=".apk">
-            <el-button :loading="appPackageInspecting" :disabled="appPackageInspecting">
-              {{ appPackageInspecting ? '上传中' : '选择文件' }}
-            </el-button>
+          <el-upload
+            class="apk-dropzone"
+            drag
+            :auto-upload="false"
+            :limit="1"
+            :on-change="onAppPackageChange"
+            accept=".apk"
+          >
+            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
+            <div class="el-upload__text">
+              将 APK 拖到这里，或 <em>点击选择文件</em>
+            </div>
+            <template #tip>
+              <div class="el-upload__tip">
+                选择或拖入文件后会自动上传并识别版本信息。
+              </div>
+            </template>
           </el-upload>
         </el-form-item>
         <el-form-item v-if="appUploadForm.platform === 'ANDROID' && appPackageUploadProgress > 0" label="文件进度">
@@ -626,6 +639,7 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { UploadFilled } from '@element-plus/icons-vue'
 import { appApi, type App } from '@/api/app'
 import { fileApi } from '@/api/file'
 import {
@@ -1833,6 +1847,34 @@ onBeforeUnmount(() => {
   line-height: 1.6;
 }
 
+.apk-dropzone {
+  width: 100%;
+}
+
+.apk-dropzone :deep(.el-upload) {
+  width: 100%;
+}
+
+.apk-dropzone :deep(.el-upload-dragger) {
+  width: 100%;
+  min-height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  border-radius: 16px;
+}
+
+.apk-dropzone :deep(.el-upload__text) {
+  margin-top: 12px;
+  color: var(--el-text-color-primary);
+}
+
+.apk-dropzone :deep(.el-upload__tip) {
+  text-align: center;
+  color: var(--el-text-color-secondary);
+}
+
 .gray-member-groups {
   width: 100%;
 }