From da9c2badeffe5b3689804461103e955d660c6b71 Mon Sep 17 00:00:00 2001
From: bighuixiang <472705331@qq.com>
Date: Mon, 23 Jun 2025 16:48:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=BA=93=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=92=8C=E5=B1=95=E7=A4=BA=E4=B8=8D=E5=90=8C=E7=B1=BB?=
 =?UTF-8?q?=E5=88=AB=E7=9A=84=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/CImageList.svg               |   1 +
 .../CanvasEditor/components/HeaderMenu.vue    |   7 +
 src/component/Canvas/CanvasEditor/index.vue   |   7 +-
 .../Canvas/ExistsImageList/index.vue          | 508 ++++++++++++++++++
 src/component/Canvas/canvasExample.vue        |  47 +-
 5 files changed, 568 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/icons/CImageList.svg
 create mode 100644 src/component/Canvas/ExistsImageList/index.vue

diff --git a/src/assets/icons/CImageList.svg b/src/assets/icons/CImageList.svg
new file mode 100644
index 00000000..861cf64b
--- /dev/null
+++ b/src/assets/icons/CImageList.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750665335802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6223" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1004.488 930.504c-13.04 13.04-28.664 19.576-46.936 19.576L292.912 950.08c-18.272 0-33.904-6.536-46.936-19.576-13-13.08-19.52-28.752-19.52-47.088L226.456 376.864c0-18.328 6.52-33.992 19.52-47.056 13.024-13.04 28.664-19.576 46.936-19.576l664.632 0c18.272 0 33.896 6.536 46.936 19.576 13 13.072 19.512 28.728 19.512 47.056l0 506.544C1024 901.752 1017.488 917.424 1004.488 930.504zM970.832 376.888c0-3.624-1.328-6.744-3.968-9.368-2.624-2.648-5.744-3.952-9.352-3.952L292.912 363.568c-3.608 0-6.728 1.304-9.344 3.952-2.624 2.64-3.944 5.744-3.944 9.368l0 506.56c0 3.584 1.32 6.712 3.944 9.336 2.648 2.656 5.736 3.976 9.344 3.976l664.6 0c3.608 0 6.728-1.32 9.352-3.976 2.64-2.624 3.968-5.752 3.968-9.336L970.832 376.888zM332.816 763.456 465.712 630.16l66.456 66.664 212.672-213.296 172.816 173.28 0 186.64L332.816 843.448 332.816 763.456zM412.56 576.824c-22.168 0-40.992-7.752-56.488-23.32-15.52-15.536-23.264-34.432-23.264-56.64 0-22.232 7.736-41.104 23.264-56.656 15.496-15.544 34.32-23.328 56.488-23.328 22.144 0 40.984 7.784 56.48 23.328 15.496 15.552 23.256 34.424 23.256 56.656 0 22.208-7.76 41.104-23.256 56.64C453.544 569.072 434.704 576.824 412.56 576.824zM852.68 258.736c0-3.616-1.32-6.736-3.968-9.368-2.624-2.656-5.744-3.952-9.344-3.952L174.76 245.416c-3.608 0-6.72 1.296-9.344 3.952-2.624 2.632-3.944 5.744-3.944 9.368l0 506.552c0 3.584 1.32 6.712 3.944 9.336 2.648 2.656 5.736 3.984 9.344 3.984l12.32 0 0 23.84c0 10.424 2.072 20.36 5.752 29.464l-18.072 0c-18.272 0-33.904-6.536-46.928-19.576-13.008-13.08-19.52-28.752-19.52-47.088L108.312 258.712c0-18.328 6.512-33.992 19.52-47.056 13.024-13.032 28.664-19.576 46.928-19.576l664.632 0c18.272 0 33.896 6.536 46.936 19.576 13 13.072 19.512 28.728 19.512 47.056l0 12.056-53.168 0L852.672 258.736zM744.376 140.584c0-3.624-1.328-6.744-3.968-9.368-2.624-2.648-5.744-3.944-9.352-3.944L66.456 127.272c-3.616 0-6.728 1.296-9.344 3.952-2.624 2.64-3.944 5.744-3.944 9.368l0 506.552c0 3.592 1.32 6.72 3.944 9.344 2.648 2.648 5.736 3.976 9.344 3.976l12.32 0 0 23.84c0 10.432 2.072 20.36 5.752 29.464L66.456 713.768c-18.272 0-33.904-6.528-46.936-19.568C6.52 681.12 0 665.448 0 647.112L0 140.56c0-18.328 6.52-33.992 19.52-47.056 13.024-13.04 28.664-19.576 46.936-19.576l664.632 0c18.272 0 33.896 6.536 46.928 19.576 13 13.072 19.52 28.728 19.52 47.056l0 12.056-53.168 0L744.368 140.584z" p-id="6224"></path></svg>
\ No newline at end of file
diff --git a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
index a26e584d..8df5ab96 100644
--- a/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
+++ b/src/component/Canvas/CanvasEditor/components/HeaderMenu.vue
@@ -318,6 +318,13 @@ onMounted(() => {
             <span class="color-dropdown">▼</span>
           </div>
         </div>
+
+        <!-- 菜单扩展插槽 -->
+        <template v-if="$slots.existsImageList">
+          <div class="setting-group">
+            <slot name="existsImageList" />
+          </div>
+        </template>
       </div>
 
       <!-- <div class="setting-group">
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index 54284477..8db2b205 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -795,7 +795,12 @@ defineExpose({
         @update:brushSize="brushSize = $event"
         @canvas-size-change="updateCanvasSize"
         @canvas-color-change="updateCanvasColor"
-      />
+      >
+        <!-- 菜单扩展插槽 -->
+        <template #existsImageList>
+          <slot name="existsImageList" />
+        </template>
+      </HeaderMenu>
     </div>
 
     <div class="main-content">
diff --git a/src/component/Canvas/ExistsImageList/index.vue b/src/component/Canvas/ExistsImageList/index.vue
new file mode 100644
index 00000000..514df954
--- /dev/null
+++ b/src/component/Canvas/ExistsImageList/index.vue
@@ -0,0 +1,508 @@
+<template>
+  <div class="image-list-container">
+    <!-- 触发按钮 -->
+    <div
+      class="image-list-trigger"
+      @click="showPanel = true"
+      :title="$t('打开图片库')"
+    >
+      <SvgIcon name="CImageList" :size="20" />
+    </div>
+
+    <!-- 图片列表面板 -->
+    <div
+      v-if="showPanel"
+      class="image-list-overlay"
+      @click.self="showPanel = false"
+    >
+      <div class="image-list-modal">
+        <div class="modal-header">
+          <h3>{{ $t("图片库") }}</h3>
+          <button class="close-btn" @click="showPanel = false">&times;</button>
+        </div>
+
+        <div class="modal-content">
+          <!-- 分类标签 -->
+          <div class="image-categories">
+            <div
+              v-for="category in categories"
+              :key="category"
+              :class="[
+                'category-btn',
+                { active: selectedCategory === category },
+              ]"
+              @click="selectedCategory = category"
+            >
+              {{ category }}
+            </div>
+          </div>
+
+          <!-- 图片网格 -->
+          <div class="image-grid">
+            <div
+              v-for="(item, index) in filteredImages"
+              :key="index"
+              class="image-item"
+              @click="handleImageClick(item)"
+            >
+              <div class="image-wrapper">
+                <img
+                  :src="item.url"
+                  :alt="item.name || '图片'"
+                  @error="handleImageError"
+                  loading="lazy"
+                />
+                <div class="image-overlay">
+                  <span class="image-name">{{ item.name || "未命名" }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 空状态 -->
+          <div v-if="filteredImages.length === 0" class="empty-state">
+            <div class="empty-icon">📷</div>
+            <p>{{ $t("暂无图片") }}</p>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <div class="image-count">
+            {{ $t("共") }} {{ filteredImages.length }} {{ $t("张图片") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineProps, defineEmits } from "vue";
+
+// Props
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+    validator: (list) => {
+      return list.every(
+        (item) =>
+          item.hasOwnProperty("name") &&
+          item.hasOwnProperty("type") &&
+          Array.isArray(item.imgList)
+      );
+    },
+  },
+});
+
+// Emits
+const emits = defineEmits(["select"]);
+
+// 响应式数据
+const showPanel = ref(false);
+const selectedCategory = ref("全部");
+
+// 计算属性：获取所有分类
+const categories = computed(() => {
+  const allCategories = ["全部"];
+  const typeSet = new Set();
+
+  props.list.forEach((item) => {
+    if (item.type && !typeSet.has(item.type)) {
+      typeSet.add(item.type);
+      allCategories.push(item.type);
+    }
+  });
+
+  return allCategories;
+});
+
+// 计算属性：扁平化所有图片并添加分类信息
+const allImages = computed(() => {
+  const images = [];
+
+  props.list.forEach((item) => {
+    if (item.imgList && Array.isArray(item.imgList)) {
+      item.imgList.forEach((img) => {
+        images.push({
+          ...img,
+          categoryName: item.name,
+          categoryType: item.type,
+          originalItem: item,
+        });
+      });
+    }
+  });
+
+  return images;
+});
+
+// 计算属性：根据选择的分类过滤图片
+const filteredImages = computed(() => {
+  if (selectedCategory.value === "全部") {
+    return allImages.value;
+  }
+
+  return allImages.value.filter(
+    (img) => img.categoryType === selectedCategory.value
+  );
+});
+
+// 处理图片点击
+const handleImageClick = (item) => {
+  emits("select", item);
+  showPanel.value = false;
+};
+
+// 处理图片加载错误
+const handleImageError = (event) => {
+  event.target.src =
+    "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWbvueJh+WKoOi9veWksei0pe+8jOivt+ajgOafpeWbvueJh+i3r+W+hDwvdGV4dD48L3N2Zz4=";
+  event.target.alt = "图片加载失败";
+};
+</script>
+
+<style scoped lang="less">
+.image-list-container {
+  position: relative;
+  display: inline-block;
+}
+
+.image-list-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #666;
+
+  &:hover {
+    background-color: rgba(66, 133, 244, 0.1);
+    border-color: rgba(66, 133, 244, 0.2);
+    color: #4285f4;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+/* 弹窗遮罩层 */
+.image-list-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* 弹窗主体 */
+.image-list-modal {
+  background-color: #fff;
+  border-radius: 12px;
+  width: 90%;
+  max-width: 1200px;
+  max-height: 85vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  animation: modalSlideUp 0.3s ease;
+}
+
+@keyframes modalSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 弹窗头部 */
+.modal-header {
+  padding: 16px 20px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+
+  h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: #666;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.7;
+  transition: all 0.2s;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    opacity: 1;
+    color: #333;
+    transform: scale(1.1);
+  }
+}
+
+/* 弹窗内容 */
+.modal-content {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background-color: #fff;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 分类标签 */
+.image-categories {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 12px;
+  flex-wrap: wrap;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+}
+
+.category-btn {
+  padding: 8px 16px;
+  border-radius: 6px;
+  background-color: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  color: #333;
+  cursor: pointer;
+  font-size: 14px;
+  white-space: nowrap;
+  transition: all 0.2s;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+
+  &.active {
+    background-color: rgba(66, 133, 244, 0.1);
+    border-color: rgba(66, 133, 244, 0.2);
+    color: #4285f4;
+  }
+
+  &:hover:not(.active) {
+    background-color: rgba(0, 0, 0, 0.05);
+    transform: translateY(-1px);
+  }
+}
+
+/* 图片网格 */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+  min-height: 200px;
+  max-height: 500px;
+
+  @media screen and (max-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 12px;
+  }
+
+  @media screen and (max-width: 480px) {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 10px;
+  }
+}
+
+.image-item {
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    border-color: rgba(66, 133, 244, 0.2);
+
+    .image-overlay {
+      opacity: 1;
+    }
+  }
+}
+
+.image-wrapper {
+  position: relative;
+  width: 100%;
+  height: 220px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.2s ease;
+  }
+
+  &:hover img {
+    transform: scale(1.05);
+  }
+}
+
+.image-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  color: white;
+  padding: 16px 12px 12px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.image-name {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #666;
+  min-height: 300px;
+
+  .empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  p {
+    font-size: 16px;
+    margin: 0;
+  }
+}
+
+/* 弹窗底部 */
+.modal-footer {
+  padding: 16px 20px;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.image-count {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 1024px) {
+  .image-list-modal {
+    width: 95%;
+    max-width: 900px;
+  }
+
+  .modal-content {
+    padding: 16px;
+  }
+
+  .modal-header,
+  .modal-footer {
+    padding: 14px 16px;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .image-list-modal {
+    width: 98%;
+    margin: 10px;
+    max-height: 90vh;
+  }
+
+  .modal-content {
+    padding: 12px;
+    gap: 16px;
+  }
+
+  .modal-header h3 {
+    font-size: 16px;
+  }
+
+  .image-categories {
+    gap: 8px;
+    padding-bottom: 8px;
+  }
+
+  .category-btn {
+    padding: 6px 12px;
+    font-size: 13px;
+    height: 32px;
+  }
+}
+</style>
diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue
index c2873f4d..d3e232fa 100644
--- a/src/component/Canvas/canvasExample.vue
+++ b/src/component/Canvas/canvasExample.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import CanvasEditor from "./CanvasEditor/index.vue";
 import RedGreenModeExample from "./RedGreenModeExample.vue";
+import ExistsImageList from "@/component/Canvas/ExistsImageList/index.vue";
 
 // 当前显示的组件
 const canvasEditor = ref();
@@ -21,6 +22,46 @@ const editorConfig = {
   backgroundColor: "#f8f8f8",
 };
 
+const imageData = [
+  {
+    name: "风景照片",
+    type: "风景",
+    imgList: [
+      { url: "/src/assets/work/1.PNG", name: "山景" },
+      { url: "/src/assets/work/2.PNG", name: "海景" },
+    ],
+  },
+  {
+    name: "人物照片",
+    type: "人物",
+    imgList: [
+      { url: "/src/assets/work/3.PNG", name: "肖像1" },
+      { url: "/src/assets/work/5.PNG", name: "肖像2" },
+    ],
+  },
+  {
+    name: "衣服照片",
+    type: "衣服",
+    imgList: [
+      { url: "/src/assets/work/3.PNG", name: "肖像1" },
+      { url: "/src/assets/work/5.PNG", name: "肖像2" },
+    ],
+  },
+  {
+    name: "裤子照片",
+    type: "裤子",
+    imgList: [
+      { url: "/src/assets/work/IMG_0001.PNG", name: "肖像1" },
+      { url: "/src/assets/work/IMG_0008.PNG", name: "肖像2" },
+    ],
+  },
+];
+
+const handleImageSelect = (selectedImage) => {
+  console.log("选中的图片:", selectedImage);
+  // selectedImage 包含：url, name, categoryName, categoryType, originalItem
+};
+
 const getJSON = () => {
   if (canvasEditor.value) {
     const json = canvasEditor.value.getJSON();
@@ -96,7 +137,11 @@ const changeFixedImage = () => {
         :clothing-image-opts="{
           imageMode: 'contains', // 设置底图包含在画布内
         }"
-      />
+      >
+        <template #existsImageList>
+          <ExistsImageList :list="imageData" @select="handleImageSelect" />
+        </template>
+      </CanvasEditor>
     </div>
   </div>
 </template>