feat: 添加图片库功能，支持选择和展示不同类别的图片

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>