library generate增加删除和拖拽移动位置功能 图片放大添加键盘事件调整按钮大小

src/component/HomePage/SketchboardUpload.vue

@@ -163,7 +163,7 @@
 						<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
 						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
 						<div
-							class="delete_like_file_block"
+							class="delete_like_file_block left1"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
 							<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
@@ -171,6 +171,9 @@
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
 						</div>
+						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
+							<span class="icon iconfont icon-shanchu operate_icon"></span>
+						</div>
 						<div class="pin_block">
 							<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
 						</div>
@@ -193,19 +196,20 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, h, ref ,computed,inject, nextTick } from "vue";
+import { defineComponent, h, ref, createVNode,computed,inject, nextTick } from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { getCookie } from "@/tool/cookie";
 import { getUploadUrl } from "@/tool/util";
 import GO from "@/tool/GO";
 import { useStore } from "vuex";
-import { message, Upload } from "ant-design-vue";
+import { message, Upload, Modal } from "ant-design-vue";
 import Material from "@/component/HomePage/Material.vue";
 import Generate from "@/component/HomePage/Generate.vue";
 import scaleImage from "@/component/HomePage/scaleImage.vue";
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { useI18n } from "vue-i18n";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 
 export default defineComponent({
@@ -567,6 +571,21 @@ export default defineComponent({
 				});
 			}
 		},
+		deleteGenerate(index:any){
+			if(this.isGenerate)return
+			let _this = this
+            Modal.confirm({
+                title: this.t('LibraryPage.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					_this.generateList.splice(index,1)
+                }
+            });
+		},
         recollection() {
 			this.isUseGenerate = false
 			this.useGenerate = {
@@ -980,37 +999,6 @@ export default defineComponent({
 		}
     }
 	}
-    .delete_like_file_block{
-		display: none;
-		width: calc(3.2rem*1.2);
-		height: calc(3.2rem*1.2);
-		background: rgba(0,0,0,0.6);
-		border-radius: calc(0.4rem*1.2);
-		position: absolute;
-		top: calc(0.9rem*1.2);
-		right: calc(0.9rem*1.2);
-		text-align: center;
-		line-height: calc(3.2rem*1.2);
-		left: auto;
-		&.left{
-			left: calc(.9rem*1.2);
-		}
-		.icon-shanchu{
-			font-size: calc(1.6rem*1.2);
-			color: #fff;
-		}
-		i{
-			font-size: calc(1.6rem*1.2);
-			color: #fff;
-			&.fi-rr-heart{
-
-			}
-			&.fi-sr-heart{
-				color: red;
-			}
-		}
-	}
-
 	
 	.modal_right{
 		flex: 1;