Add count and description to category and tag dropdown

open-isle-cli/src/components/CategorySelect.vue

@@ -1,5 +1,17 @@
 <template>
-  <Dropdown v-model="selected" :fetch-options="fetchCategories" placeholder="选择分类" />
+  <Dropdown v-model="selected" :fetch-options="fetchCategories" placeholder="选择分类">
+    <template #option="{ option }">
+      <div class="option-main">
+        <template v-if="option.icon">
+          <img v-if="isImageIcon(option.icon)" :src="option.icon" class="option-icon" />
+          <i v-else :class="['option-icon', option.icon]"></i>
+        </template>
+        <span>{{ option.name }}</span>
+        <span v-if="option.count > 0"> x {{ option.count }}</span>
+      </div>
+      <div v-if="option.description" class="option-desc">{{ option.description }}</div>
+    </template>
+  </Dropdown>
 </template>
 
 <script>
@@ -22,12 +34,31 @@ export default {
       return [{ id: '', name: '无分类' }, ...data]
     }
 
+    const isImageIcon = icon => {
+      if (!icon) return false
+      return /^https?:\/\//.test(icon) || icon.startsWith('/')
+    }
+
     const selected = computed({
       get: () => props.modelValue,
       set: v => emit('update:modelValue', v)
     })
 
-    return { fetchCategories, selected }
+    return { fetchCategories, selected, isImageIcon }
   }
 }
 </script>
+
+<style scoped>
+.option-main {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.option-desc {
+  font-size: 12px;
+  color: #666;
+  margin-left: 21px;
+}
+</style>