文件的分开

src/components/common-select/index.vue

@@ -14,19 +14,30 @@
     :maxTagCount="maxTagCount"
     @change="handleChange"
   >
-    <Option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
+    <Option v-for="(item, index) in validOptions" :key="index" :value="item.value" :label="item.label">
       <div class="flex items-center">
-        <img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-8px rounded-4px" />
-        {{ item.name }}
+        <img v-if="item.icon" :src="item.icon" class="w-16px h-16px mr-4px rounded-4px" />
+        <span>{{ item.label }}</span>
       </div>
     </Option>
+    <template #tag="{ label, icon }">
+      <div class="flex items-center">
+        <img v-if="icon" :src="icon" class="w-16px h-16px mr-4px rounded-4px" />
+        <span>{{ label }}</span>
+      </div>
+    </template>
+    <template v-if="!allowSearch" #empty>
+      <div v-if="validOptions.length === 0" class="empty-placeholder">
+        {{ placeholder || '暂无数据' }}
+      </div>
+    </template>
   </Select>
 </template>
 
 <script setup>
 import { Select } from 'ant-design-vue';
 const { Option } = Select;
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 
 const props = defineProps({
   modelValue: {
@@ -48,7 +59,7 @@ const props = defineProps({
   maxTagCount: {
     type: Number,
     default: 3,
-  },  
+  },
   allClear: {
     type: Boolean,
     default: true,
@@ -56,13 +67,28 @@ const props = defineProps({
   allowSearch: {
     type: Boolean,
     default: false,
-  }
+  },
 });
 
 const emits = defineEmits(['update:modelValue', 'change']);
 
 const selectedValues = ref(props.multiple ? [] : '');
 
+// 计算有效选项，兼容不同的数据格式
+const validOptions = computed(() => {
+  if (!props.options || !Array.isArray(props.options)) {
+    return [];
+  }
+  
+  return props.options
+    .filter(item => item && (item.id !== undefined || item.value !== undefined) && (item.name !== undefined || item.label !== undefined))
+    .map(item => ({
+      ...item,
+      value: item.id !== undefined ? item.id : item.value,
+      label: item.name !== undefined ? item.name : item.label
+    }));
+});
+
 watch(
   () => props.modelValue,
   (newVal) => {
@@ -79,4 +105,12 @@ const handleChange = (value) => {
   selectedValues.value = value;
   emits('change', value);
 };
-</script>
+</script>
+
+<style scoped>
+.empty-placeholder {
+  padding: 8px 12px;
+  color: #8f959e;
+  text-align: center;
+}
+</style>