From ea7d671ad03ed843a4d44bb7223a310c2d54e53f Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Thu, 21 Mar 2024 21:48:39 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=AB=96?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/home.ts                 | 4 ++++
 src/views/home/content/Content.vue | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/config/home.ts b/src/config/home.ts
index 1ddb665..5ef6e55 100644
--- a/src/config/home.ts
+++ b/src/config/home.ts
@@ -30,6 +30,10 @@ export const viewOptions = [
     label: '平铺',
     value: 'masonry',
   },
+  {
+    label: '竖版',
+    value: 'verticalVersion',
+  },
   {
     label: '3:4',
     value: '3:4',
diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 9b6ba34..e420cca 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -166,6 +166,8 @@ const gridHeight = computed(() => {
     height =''
   }else if(viewMode.value ==='horizontalVersion'){
     height ='145px'
+  }else if(viewMode.value ==='verticalVersion'){
+    height ='320px'
   }else if(viewMode.value ==='3:4'){
     height ='240px'
   }
@@ -307,7 +309,7 @@ function sortHandler() {
               > -->
               <n-image
                 class="img" :img-props="{ onClick: hideDownload }"
-                :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4' }" :preview-src="item.imgUrl" :src="item.thumburl"
+                :class="{ 'img-fit': viewMode === 'horizontalVersion', 'img-full': viewMode === '3:4'|| viewMode === 'verticalVersion' }" :preview-src="item.imgUrl" :src="item.thumburl"
               />
               <div class="percent">
                 <SvgIcon size="42" name="tag" />
@@ -401,8 +403,9 @@ function sortHandler() {
       width: 100%;
       overflow: hidden;
       ::v-deep(img) {
-        height: 100%;
         width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
     }
 

From 8543258c89ae412e9e8558510e44f24585b7cfb6 Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Fri, 22 Mar 2024 00:30:44 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/aside/comp/Upload.vue | 51 ++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/src/views/home/aside/comp/Upload.vue b/src/views/home/aside/comp/Upload.vue
index 7c4970f..f723701 100644
--- a/src/views/home/aside/comp/Upload.vue
+++ b/src/views/home/aside/comp/Upload.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import type { GlobalThemeOverrides, UploadCustomRequestOptions } from 'naive-ui'
-import { computed, ref, unref } from 'vue'
-import { useElementHover } from '@vueuse/core'
-import { useThemeVars } from 'naive-ui'
 import { upload } from '@/api/home/main'
-import { getImgUrl } from '@/utils/urlUtils'
-import { useConfig } from '@/store/modules/asideConfig'
 import { hideDownload } from '@/utils/image'
+import { getImgUrl } from '@/utils/urlUtils'
+import { useElementHover } from '@vueuse/core'
+import type { GlobalThemeOverrides, UploadCustomRequestOptions } from 'naive-ui'
+import { useThemeVars } from 'naive-ui'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
   value: string
@@ -16,9 +15,9 @@ const emit = defineEmits<{
   (e: 'update:value', value: string): void
 }>()
 
-const configStore = useConfig()
 
 const figureUrl = ref(props.value)
+const uploadRef = ref(null);
 
 async function customRequest(data: UploadCustomRequestOptions) {
   const result = await upload({ file: data.file.file as any })
@@ -39,6 +38,7 @@ function clearHandler(event: MouseEvent) {
   event.stopImmediatePropagation()
   event.stopPropagation()
   figureUrl.value = ''
+  emit('update:value', '')
 }
 
 function previewHandler(event: MouseEvent) {
@@ -60,11 +60,41 @@ const imageGroupThemeOverrides = computed(() => {
   }
   return themeOverrides
 })
+
+// 拖拽经过其他元素时触发
+const handleDragOver = (e) => {
+  e.preventDefault(); // 阻止默认事件
+  e.dataTransfer.dropEffect = 'copy'; // 设置拖拽效果为复制
+};
+
+// 开始拖拽时触发
+const handleDragLeave = (e) => {
+  e.preventDefault(); // 阻止默认事件
+};
+
+// 停止拖拽时触发
+const handleDrop = (e) => {
+  e.preventDefault(); // 阻止默认事件
+  const files = e.dataTransfer.files;
+  const draggedElement = e.dataTransfer.getData('text/plain');
+  if (files.length === 0) {
+  fetch(draggedElement)
+    .then(res => res.blob())
+    .then(async blob => {
+      const file = new File([blob], String(new Date().getTime()) + '.jpg', { type: 'image/jpeg' });
+      const result = await upload({ file: file as any })
+      const imgUrl = getImgUrl(result.data)
+      figureUrl.value = imgUrl
+      emit('update:value', result.data)
+    });
+  }
+};
 </script>
 
 <template>
   <n-space>
-    <n-upload directory-dnd :show-file-list="false" accept=".png,.jpg,.bmp" :custom-request="customRequest">
+    <n-upload ref="uploadRef" directory-dnd :show-file-list="false" accept=".png,.jpg,.bmp"
+      :custom-request="customRequest" @dragover="handleDragOver" @dragleave="handleDragLeave" @drop="handleDrop">
       <n-upload-dragger class="wrapper">
         <div v-show="!showFigure" class="wrapper-dragger">
           <SvgIcon size="30" name="upload" />
@@ -72,7 +102,8 @@ const imageGroupThemeOverrides = computed(() => {
           <span class="wrapper-tip2">上传格式为：.png .jpg .bmp 20M以内</span>
         </div>
         <div v-show="showFigure" ref="figureRef" class="wrapper-figure">
-          <n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :theme-overrides="imageGroupThemeOverrides" width="288" height="116" :src="figureUrl" />
+          <n-image ref="imageRef" :img-props="{ onClick: hideDownload }" :theme-overrides="imageGroupThemeOverrides"
+            width="288" height="116" :src="figureUrl" />
           <div v-show="figureHovered" class="wrapper-figure-tools">
             <SvgIcon size="28" name="view" @click="previewHandler" />
             <div class="wrapper-figure-line" />
@@ -133,7 +164,7 @@ const imageGroupThemeOverrides = computed(() => {
       justify-content: center;
       width: 100%;
       height: 100%;
-      background-color:rgba(102, 102, 102, 0.2)
+      background-color: rgba(102, 102, 102, 0.2)
     }
 
     &-line {

From 2ad890d4741b756609066d6bafeda74f9d4b8a7f Mon Sep 17 00:00:00 2001
From: lizijiee <562949697@qq.com>
Date: Fri, 22 Mar 2024 00:48:48 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/aside/comp/Upload.vue | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/views/home/aside/comp/Upload.vue b/src/views/home/aside/comp/Upload.vue
index f723701..bc619ef 100644
--- a/src/views/home/aside/comp/Upload.vue
+++ b/src/views/home/aside/comp/Upload.vue
@@ -73,20 +73,14 @@ const handleDragLeave = (e) => {
 };
 
 // 停止拖拽时触发
-const handleDrop = (e) => {
+const handleDrop = async (e) => {
   e.preventDefault(); // 阻止默认事件
   const files = e.dataTransfer.files;
-  const draggedElement = e.dataTransfer.getData('text/plain');
-  if (files.length === 0) {
-  fetch(draggedElement)
-    .then(res => res.blob())
-    .then(async blob => {
-      const file = new File([blob], String(new Date().getTime()) + '.jpg', { type: 'image/jpeg' });
-      const result = await upload({ file: file as any })
-      const imgUrl = getImgUrl(result.data)
-      figureUrl.value = imgUrl
-      emit('update:value', result.data)
-    });
+  if( files[0] ){
+    const result = await upload({ file: files[0] as any })
+    const imgUrl = getImgUrl(result.data)
+    figureUrl.value = imgUrl
+    emit('update:value', result.data)
   }
 };
 </script>