From 605c09c88a2e2055a07dfb7a717cc62258bc5978 Mon Sep 17 00:00:00 2001
From: shenlei <shenlei@touchread.com>
Date: Wed, 29 Jul 2026 15:20:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9A=AE=E8=82=A4=E5=8C=85=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=8C=BA=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 抽出 uploadSkinFile 复用点击与拖拽两种上传方式
- 拖入时高亮上传区并提示，松开即触发上传

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/ConfigView.vue | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/ConfigView.vue b/frontend/src/views/ConfigView.vue
index d2ceabc..c0f604c 100644
--- a/frontend/src/views/ConfigView.vue
+++ b/frontend/src/views/ConfigView.vue
@@ -527,8 +527,13 @@
               </div>
             </div>
             <div v-else class="skins-hint">暂无皮肤包</div>
-            <label class="btn btn-outline skin-upload-btn" :class="{ disabled: skinUploading }">
-              {{ skinUploading ? '上传中...' : '上传皮肤包 (.zip)' }}
+            <label class="btn btn-outline skin-upload-btn"
+              :class="{ disabled: skinUploading, dragover: skinDragover }"
+              @dragover.prevent="skinDragover = true"
+              @dragenter.prevent="skinDragover = true"
+              @dragleave.prevent="skinDragover = false"
+              @drop.prevent="onSkinDrop">
+              {{ skinUploading ? '上传中...' : (skinDragover ? '松开鼠标上传' : '上传皮肤包 (.zip，或拖拽到此处)') }}
               <input type="file" accept=".zip" @change="uploadSkin" :disabled="skinUploading" hidden>
             </label>
           </div>
@@ -619,6 +624,7 @@ const editingAppId = ref(null)
 const appForm = ref({})
 const appSkins = ref([])
 const skinUploading = ref(false)
+const skinDragover = ref(false)
 
 const showSchemeModal = ref(false)
 const editingSchemeId = ref(null)
@@ -866,9 +872,9 @@ const loadSkins = async () => {
   } catch { appSkins.value = [] }
 }
 
-const uploadSkin = async (event) => {
-  const file = event.target.files[0]
+const uploadSkinFile = async (file) => {
   if (!file) return
+  if (!file.name.toLowerCase().endsWith('.zip')) { alert('仅支持 .zip 格式'); return }
   const uploadKey = appForm.value.upload_key
   if (!uploadKey) { alert('请先保存 APP 后再上传皮肤包'); return }
   skinUploading.value = true
@@ -890,7 +896,6 @@ const uploadSkin = async (event) => {
     Object.keys(certs).forEach(certType => {
       if (!certs[certType].theme) certs[certType].theme = skinTheme
     })
-    event.target.value = ''
   } catch (e) {
     alert('上传失败: ' + e.message)
   } finally {
@@ -898,6 +903,18 @@ const uploadSkin = async (event) => {
   }
 }
 
+const uploadSkin = async (event) => {
+  await uploadSkinFile(event.target.files[0])
+  event.target.value = ''
+}
+
+const onSkinDrop = (event) => {
+  skinDragover.value = false
+  if (skinUploading.value) return
+  const file = event.dataTransfer.files[0]
+  uploadSkinFile(file)
+}
+
 const updateSkin = async (skinName, event) => {
   const file = event.target.files[0]
   if (!file) return
@@ -1211,6 +1228,7 @@ const formatJson = () => {
 .btn-outline { background: white; border: 1px solid #1890ff; color: #1890ff; cursor: pointer; padding: 6px 16px; border-radius: 6px; font-size: 13px; display: inline-block; }
 .btn-outline:hover { background: #e6f7ff; }
 .btn-outline.disabled { opacity: 0.5; cursor: not-allowed; }
-.skin-upload-btn { margin-top: 8px; }
+.skin-upload-btn { margin-top: 8px; transition: background 0.15s, border-color 0.15s; }
+.skin-upload-btn.dragover { border-color: #1890ff; border-style: dashed; background: #e6f7ff; color: #1890ff; }
 .theme-select { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 6px; font-size: 14px; }
 </style>