mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-24 07:00:49 +08:00
Add count and description to category and tag dropdown
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 () => {
|
||||
if (tags.value.length) return
|
||||
const res = await fetch(`${API_BASE_URL}/api/tags`)
|
||||
if (!res.ok) return
|
||||
const data = await res.json()
|
||||
tags.value = [{ id: 0, name: '无标签' }, ...data]
|
||||
const isImageIcon = icon => {
|
||||
if (!icon) return false
|
||||
return /^https?:\/\//.test(icon) || icon.startsWith('/')
|
||||
}
|
||||
|
||||
const fetchTags = async (kw = '') => {
|
||||
await loadTags()
|
||||
let options = tags.value.filter(t =>
|
||||
!kw || t.name.toLowerCase().includes(kw.toLowerCase())
|
||||
)
|
||||
if (
|
||||
props.creatable &&
|
||||
kw &&
|
||||
!tags.value.some(t => t.name.toLowerCase() === kw.toLowerCase())
|
||||
) {
|
||||
options = [
|
||||
...options,
|
||||
{ id: `__create__:${kw}`, name: `创建"${kw}"` }
|
||||
]
|
||||
const url = new URL(`${API_BASE_URL}/api/tags`)
|
||||
if (kw) url.searchParams.set('keyword', kw)
|
||||
url.searchParams.set('limit', '10')
|
||||
let data = []
|
||||
try {
|
||||
const res = await fetch(url.toString())
|
||||
if (res.ok) {
|
||||
data = await res.json()
|
||||
}
|
||||
} catch {}
|
||||
|
||||
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)) {
|
||||
tags.value.push({ id: newId, name })
|
||||
if (!localTags.value.find(t => t.id === newId)) {
|
||||
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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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() {
|
||||
return tagService.listTags().stream()
|
||||
.map(this::toDto)
|
||||
public List<TagDto> list(@RequestParam(value = "keyword", required = false) String keyword,
|
||||
@RequestParam(value = "limit", required = false) Integer limit) {
|
||||
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
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user