画布选择图片改为多选

src/component/Canvas/CanvasEditor/index.vue

@@ -340,7 +340,7 @@ onMounted(async () => {
     props.redGreenImageUrl
   ) {
     canvasManager.canvas.fill = "#fff"; // 设置画布背景色为白色    // 初始化红绿图模式管理器
-    redGreenModeManager = new toolManagerRedGreenModeManager({
+    redGreenModeManager = new RedGreenModeManager({
       canvas: canvasManager.canvas,
       canvasManager,
       layerManager,

src/component/Canvas/ExistsImageList/index.vue

@@ -56,6 +56,9 @@
                   <span class="image-name">{{ item.name || "未命名" }}</span>
                 </div>
               </div>
+			  <div class="image-select" v-show="selectList.includes(item.url)">
+				<i class="fi fi-sr-check-circle"></i>
+			</div>
             </div>
           </div>
 
@@ -70,6 +73,7 @@
           <div class="image-count">
             {{ $t("Canvas.general") }} {{ filteredImages.length }} {{ $t("Canvas.PicturesInTotal") }}
           </div>
+		  <div class="image-submit gallery_btn" @click="confirm">{{ $t("Canvas.confirm") }}</div>
         </div>
       </div>
     </div>
@@ -103,6 +107,7 @@ const emits = defineEmits(["select"]);
 // 响应式数据
 const showPanel = ref(false);
 const selectedCategory = ref(t("Canvas.all"));
+const selectList = ref([])
 
 // 计算属性：获取所有分类
 const categories = computed(() => {
@@ -152,8 +157,12 @@ const filteredImages = computed(() => {
 
 // 处理图片点击
 const handleImageClick = (item) => {
-  emits("select", item);
-  showPanel.value = false;
+	// 已选中，取消选中
+	if(selectList.value.includes(item.url)){
+		selectList.value = selectList.value.filter(url => url !== item.url)
+	}else{
+		selectList.value.push(item.url)
+	}
 };
 
 // 处理图片加载错误
@@ -162,6 +171,12 @@ const handleImageError = (event) => {
     "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWbvueJh+WKoOi9veWksei0pe+8jOivt+ajgOafpeWbvueJh+i3r+W+hDwvdGV4dD48L3N2Zz4=";
   event.target.alt = "图片加载失败";
 };
+
+//提交选中的T图片
+const confirm = ()=>{
+	emits("select", selectList.value);
+	showPanel.value = false;
+}
 </script>
 
 <style scoped lang="less">
@@ -368,10 +383,11 @@ const handleImageError = (event) => {
 .image-item {
   cursor: pointer;
   border-radius: 8px;
-  overflow: hidden;
+//   overflow: hidden;
   transition: all 0.2s ease;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.05);
+  position: relative;
 
   &:hover {
     transform: translateY(-4px);
@@ -414,6 +430,17 @@ const handleImageError = (event) => {
   transition: opacity 0.2s ease;
 }
 
+.image-select{
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	z-index: 2;
+	transform: translate(50%,50%);
+	i{
+		font-size: 2.5rem;
+	}
+}
+
 .image-name {
   font-size: 14px;
   font-weight: 500;