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>

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

@@ -5,7 +5,19 @@
     multiple
     placeholder="选择标签"
     remote
-  />
+  >
+    <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,31 +34,34 @@ export default {
   },
   emits: ['update:modelValue'],
   setup(props, { emit }) {
-    const tags = ref([])
+    const localTags = ref([])
 
-    const loadTags = async () => {
+    const isImageIcon = icon => {
-      if (tags.value.length) return
+      if (!icon) return false
-      const res = await fetch(`${API_BASE_URL}/api/tags`)
+      return /^https?:\/\//.test(icon) || icon.startsWith('/')
-      if (!res.ok) return
-      const data = await res.json()
-      tags.value = [{ id: 0, name: '无标签' }, ...data]
     }
 
     const fetchTags = async (kw = '') => {
-      await loadTags()
+      const url = new URL(`${API_BASE_URL}/api/tags`)
-      let options = tags.value.filter(t =>
+      if (kw) url.searchParams.set('keyword', kw)
-        !kw || t.name.toLowerCase().includes(kw.toLowerCase())
+      url.searchParams.set('limit', '10')
-      )
+      let data = []
-      if (
+      try {
-        props.creatable &&
+        const res = await fetch(url.toString())
-        kw &&
+        if (res.ok) {
-        !tags.value.some(t => t.name.toLowerCase() === kw.toLowerCase())
+          data = await res.json()
-      ) {
+        }
-        options = [
+      } catch {}
-          ...options,
+
-          { id: `__create__:${kw}`, name: `创建"${kw}"` }
+      let options = [...data, ...localTags.value]
-        ]
+
+      if (props.creatable && kw && !options.some(t => t.name.toLowerCase() === kw.toLowerCase())) {
+        options.push({ id: `__create__:${kw}`, name: `创建"${kw}"` })
       }
+
+      options = options.filter((v, i, arr) => arr.findIndex(t => t.id === v.id) === i)
+
+      options.unshift({ id: 0, name: '无标签' })
       return options
     }
 
@@ -66,8 +81,8 @@ export default {
             if (typeof id === 'string' && id.startsWith('__create__:')) {
               const name = id.slice(11)
               const newId = `__new__:${name}`
-              if (!tags.value.find(t => t.id === newId)) {
+              if (!localTags.value.find(t => t.id === newId)) {
-                tags.value.push({ id: newId, name })
+                localTags.value.push({ id: newId, name })
               }
               return newId
             }
@@ -78,7 +93,21 @@ export default {
       }
     })
 
-    return { fetchTags, selected }
+    return { fetchTags, 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>

src/main/java/com/openisle/controller/CategoryController.java

@@ -20,13 +20,15 @@ public class CategoryController {
     @PostMapping
     public CategoryDto create(@RequestBody CategoryRequest req) {
         Category c = categoryService.createCategory(req.getName(), req.getDescription(), req.getIcon(), req.getSmallIcon());
-        return toDto(c);
+        long count = postService.countPostsByCategory(c.getId());
+        return toDto(c, count);
     }
 
     @PutMapping("/{id}")
     public CategoryDto update(@PathVariable Long id, @RequestBody CategoryRequest req) {
         Category c = categoryService.updateCategory(id, req.getName(), req.getDescription(), req.getIcon(), req.getSmallIcon());
-        return toDto(c);
+        long count = postService.countPostsByCategory(c.getId());
+        return toDto(c, count);
     }
 
     @DeleteMapping("/{id}")
@@ -37,13 +39,16 @@ public class CategoryController {
     @GetMapping
     public List<CategoryDto> list() {
         return categoryService.listCategories().stream()
-                .map(this::toDto)
+                .map(c -> toDto(c, postService.countPostsByCategory(c.getId())))
+                .sorted((a, b) -> Long.compare(b.getCount(), a.getCount()))
                 .collect(Collectors.toList());
     }
 
     @GetMapping("/{id}")
     public CategoryDto get(@PathVariable Long id) {
-        return toDto(categoryService.getCategory(id));
+        Category c = categoryService.getCategory(id);
+        long count = postService.countPostsByCategory(c.getId());
+        return toDto(c, count);
     }
 
     @GetMapping("/{id}/posts")
@@ -61,13 +66,14 @@ public class CategoryController {
                 .collect(Collectors.toList());
     }
 
-    private CategoryDto toDto(Category c) {
+    private CategoryDto toDto(Category c, long count) {
         CategoryDto dto = new CategoryDto();
         dto.setId(c.getId());
         dto.setName(c.getName());
         dto.setIcon(c.getIcon());
         dto.setSmallIcon(c.getSmallIcon());
         dto.setDescription(c.getDescription());
+        dto.setCount(count);
         return dto;
     }
 
@@ -86,6 +92,7 @@ public class CategoryController {
         private String description;
         private String icon;
         private String smallIcon;
+        private Long count;
     }
 
     @Data

src/main/java/com/openisle/controller/TagController.java

@@ -20,13 +20,15 @@ public class TagController {
     @PostMapping
     public TagDto create(@RequestBody TagRequest req) {
         Tag tag = tagService.createTag(req.getName(), req.getDescription(), req.getIcon(), req.getSmallIcon());
-        return toDto(tag);
+        long count = postService.countPostsByTag(tag.getId());
+        return toDto(tag, count);
     }
 
     @PutMapping("/{id}")
     public TagDto update(@PathVariable Long id, @RequestBody TagRequest req) {
         Tag tag = tagService.updateTag(id, req.getName(), req.getDescription(), req.getIcon(), req.getSmallIcon());
-        return toDto(tag);
+        long count = postService.countPostsByTag(tag.getId());
+        return toDto(tag, count);
     }
 
     @DeleteMapping("/{id}")
@@ -35,15 +37,23 @@ public class TagController {
     }
 
     @GetMapping
-    public List<TagDto> list() {
+    public List<TagDto> list(@RequestParam(value = "keyword", required = false) String keyword,
-        return tagService.listTags().stream()
+                             @RequestParam(value = "limit", required = false) Integer limit) {
-                .map(this::toDto)
+        List<TagDto> dtos = tagService.searchTags(keyword).stream()
+                .map(t -> toDto(t, postService.countPostsByTag(t.getId())))
+                .sorted((a, b) -> Long.compare(b.getCount(), a.getCount()))
                 .collect(Collectors.toList());
+        if (limit != null && limit > 0 && dtos.size() > limit) {
+            return dtos.subList(0, limit);
+        }
+        return dtos;
     }
 
     @GetMapping("/{id}")
     public TagDto get(@PathVariable Long id) {
-        return toDto(tagService.getTag(id));
+        Tag tag = tagService.getTag(id);
+        long count = postService.countPostsByTag(tag.getId());
+        return toDto(tag, count);
     }
 
     @GetMapping("/{id}/posts")
@@ -61,13 +71,14 @@ public class TagController {
                 .collect(Collectors.toList());
     }
 
-    private TagDto toDto(Tag tag) {
+    private TagDto toDto(Tag tag, long count) {
         TagDto dto = new TagDto();
         dto.setId(tag.getId());
         dto.setName(tag.getName());
         dto.setIcon(tag.getIcon());
         dto.setSmallIcon(tag.getSmallIcon());
         dto.setDescription(tag.getDescription());
+        dto.setCount(count);
         return dto;
     }
 
@@ -86,6 +97,7 @@ public class TagController {
         private String description;
         private String icon;
         private String smallIcon;
+        private Long count;
     }
 
     @Data

src/main/java/com/openisle/repository/PostRepository.java

@@ -41,4 +41,8 @@ public interface PostRepository extends JpaRepository<Post, Long> {
 
     @Query("SELECT SUM(p.views) FROM Post p WHERE p.author.username = :username AND p.status = com.openisle.model.PostStatus.PUBLISHED")
     Long sumViews(@Param("username") String username);
+
+    long countByCategory_Id(Long categoryId);
+
+    long countDistinctByTags_Id(Long tagId);
 }

src/main/java/com/openisle/repository/TagRepository.java

@@ -3,5 +3,8 @@ package com.openisle.repository;
 import com.openisle.model.Tag;
 import org.springframework.data.jpa.repository.JpaRepository;
 
+import java.util.List;
+
 public interface TagRepository extends JpaRepository<Tag, Long> {
+    List<Tag> findByNameContainingIgnoreCase(String keyword);
 }

src/main/java/com/openisle/service/PostService.java

@@ -274,4 +274,12 @@ public class PostService {
     public java.util.List<Post> getPostsByIds(java.util.List<Long> ids) {
         return postRepository.findAllById(ids);
     }
+
+    public long countPostsByCategory(Long categoryId) {
+        return postRepository.countByCategory_Id(categoryId);
+    }
+
+    public long countPostsByTag(Long tagId) {
+        return postRepository.countDistinctByTags_Id(tagId);
+    }
 }

src/main/java/com/openisle/service/TagService.java

@@ -54,4 +54,11 @@ public class TagService {
     public List<Tag> listTags() {
         return tagRepository.findAll();
     }
+
+    public List<Tag> searchTags(String keyword) {
+        if (keyword == null || keyword.isBlank()) {
+            return tagRepository.findAll();
+        }
+        return tagRepository.findByNameContainingIgnoreCase(keyword);
+    }
 }