tcctyn-ui/src/views/gisManagement/configStyle/imageLibrary.vue

<template>
  <el-dialog v-model="dialogVisible" title="选择图标/图片" width="600px" @close="handleCancel">
    <div class="image-library-content">
      <!-- 上传本地图片 -->
      <div class="upload-area">
        <el-upload action="#" :auto-upload="false" :show-file-list="false" :on-change="handleFileChange"
          accept="image/*">
          <el-button type="primary">上传本地图片</el-button>
        </el-upload>
      </div>

      <!-- 图标/图片列表 -->
      <div class="item-list">
        <div v-for="item in items" :key="item.id" :class="['item', { 'is-selected': selectedItem?.id === item.id }]"
          @click="selectItem(item)">
          <template v-if="item.type === 'system' && item.component">
            <!-- Element Plus Icon -->
            <el-icon :size="30">
              <component :is="item.component" />
            </el-icon>
          </template>
          <template v-else-if="item.type === 'system' && item.display">
            <!-- System Image URL -->
            <img :src="item.display" alt="system image" class="item-image" />
          </template>
          <template v-else-if="item.type === 'local' && item.display">
            <!-- Local Base64 Image -->
            <img :src="item.display" alt="local image" class="item-image" />
          </template>
          <div v-else class="item-placeholder">无预览</div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="!selectedItem">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { ElDialog, ElButton, ElUpload, ElIcon, ElMessage } from 'element-plus';
// 导入 Element Plus Icons (按需导入或全局注册)
// 如果是全局注册，则不需要在这里导入
// 如果是按需导入，需要导入你用到的图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  initialValue: {
    type: String, // 传入的当前选中图片的值 (URL 或 Base64)
    default: null
  }
});

// 定义 emits
const emit = defineEmits(['update:visible', 'confirm']);

// 弹窗可见性
const dialogVisible = ref(props.visible);

// 图标/图片列表数据
const items = ref([]);

// 当前选中的项
const selectedItem = ref(null);

// 默认系统图标和图片
const defaultSystemItems = [
  // Element Plus Icons (示例)
  { id: 'icon-star', type: 'system', display: 'Star', value: 'ElIconStarFilled', component: 'ElIconStarFilled' },
  { id: 'icon-picture', type: 'system', display: 'Picture', value: 'ElIconPicture', component: 'ElIconPicture' },
  { id: 'icon-folder', type: 'system', display: 'Folder', value: 'ElIconFolder', component: 'ElIconFolder' },
  { id: 'icon-setting', type: 'system', display: 'Setting', value: 'ElIconSetting', component: 'ElIconSetting' },
  { id: 'icon-user', type: 'system', display: 'User', value: 'ElIconUser', component: 'ElIconUser' },
  // System Images (示例 URLs)
  { id: 'img-placeholder-1', type: 'system', display: 'https://via.placeholder.com/50x50?text=Img1', value: 'https://via.placeholder.com/50x50?text=Img1' },
  { id: 'img-placeholder-2', type: 'system', display: 'https://via.placeholder.com/50x50?text=Img2', value: 'https://via.placeholder.com/50x50?text=Img2' },
];

// 加载默认系统项
// onMounted(() => {
//   items.value = [...defaultSystemItems];
// });

// 监听 visible prop 变化，同步弹窗状态并处理回显
// watch(() => props.visible, (newVal) => {
//   dialogVisible.value = newVal;
//   if (newVal) {
//     // 弹窗打开时，根据 initialValue 查找并选中对应的项
//     selectedItem.value = items.value.find(item => item.value === props.initialValue) || null;
//   } else {
//     // 弹窗关闭时，重置选中状态
//     selectedItem.value = null;
//   }
// });

// 处理文件上传变化
const handleFileChange = (uploadFile) => {
  const file = uploadFile.raw;
  if (!file) return;

  // 检查文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.error('只能上传图片文件!');
    return;
  }

  // 检查文件大小 (可选)
  // const isLt2M = file.size / 1024 / 1024 < 2;
  // if (!isLt2M) {
  //   ElMessage.error('图片文件大小不能超过 2MB!');
  //   return;
  // }

  const reader = new FileReader();
  reader.onloadend = () => {
    const base64String = reader.result;
    const newItem = {
      id: `local-${Date.now()}-${Math.random().toString(16).slice(2)}`, // 确保唯一ID
      type: 'local',
      display: base64String, // Base64 用于显示
      value: base64String // Base64 用于返回
    };
    items.value.push(newItem);
    // 自动选中新上传的图片 (可选)
    // selectedItem.value = newItem;
  };
  reader.readAsDataURL(file);
};

// 选中一个项
const selectItem = (item) => {
  selectedItem.value = item;
};

// 处理确定按钮点击
const handleConfirm = () => {
  if (selectedItem.value) {
    // 返回选中项的 value (URL 或 Base64)
    emit('confirm', selectedItem.value.value);
    // 关闭弹窗
    emit('update:visible', false);
  }
};

// 处理取消按钮点击或弹窗关闭
const handleCancel = () => {
  emit('update:visible', false);
};

// 将 Element Plus Icons 暴露给模板使用 (如果按需导入)
// 如果是全局注册，则不需要这一步
const icons = ElementPlusIconsVue;
</script>

<style scoped>
.image-library-content {
  padding: 0 20px 20px 20px;
  /* 调整内边距 */
}

.upload-area {
  margin-bottom: 20px;
  text-align: right;
  /* 让上传按钮靠右 */
}

.item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 项之间的间距 */
  max-height: 300px;
  /* 限制列表高度并添加滚动条 */
  overflow-y: auto;
  padding-right: 10px;
  /* 为滚动条留出空间 */
}

.item {
  width: 60px;
  /* 项的固定宽度 */
  height: 60px;
  /* 项的固定高度 */
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.3s;
  overflow: hidden;
  /* 防止图片溢出 */
  position: relative;
}

.item:hover {
  border-color: #409eff;
}

.item.is-selected {
  border-color: #409eff;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}

.item-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 保持图片比例 */
}

.item-placeholder {
  font-size: 12px;
  color: #909399;
  text-align: center;
}

/* 调整 Element Plus Icon 的样式 */
.item .el-icon {
  font-size: 30px;
  /* 确保图标大小合适 */
}
</style>