aida_front/src/component/Canvas/ExistsImageList/index.vue

<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("Canvas.photoGallery") }}</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("Canvas.NoPicture") }}</p>
          </div>
        </div>

        <div class="modal-footer">
          <div class="image-count">
            {{ $t("Canvas.general") }} {{ filteredImages.length }} {{ $t("Canvas.PicturesInTotal") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from "vue";
import { useI18n } from 'vue-i18n'

// Props
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
    validator: (list) => {
      return list.every(
        (item) =>
          item.hasOwnProperty("name") &&
          item.hasOwnProperty("type") &&
          Array.isArray(item.imgList)
      );
    },
  },
});
const {t} = useI18n();

// Emits
const emits = defineEmits(["select"]);

// 响应式数据
const showPanel = ref(false);
const selectedCategory = ref(t("Canvas.all"));

// 计算属性：获取所有分类
const categories = computed(() => {
  const allCategories = [t("Canvas.all")];
  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 === "All" || 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: 1001;
  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: contain;
    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>