fix: keep dropdown at bottom after loading more

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

@@ -100,18 +100,32 @@ public class TagController {
   )
   public List<TagDto> list(
     @RequestParam(value = "keyword", required = false) String keyword,
+    @RequestParam(value = "page", required = false) Integer page,
+    @RequestParam(value = "pageSize", required = false) Integer pageSize,
     @RequestParam(value = "limit", required = false) Integer limit
   ) {
     List<Tag> tags = tagService.searchTags(keyword);
     List<Long> tagIds = tags.stream().map(Tag::getId).toList();
     Map<Long, Long> postCntByTagIds = postService.countPostsByTagIds(tagIds);
+    if (postCntByTagIds == null) {
+      postCntByTagIds = java.util.Collections.emptyMap();
+    }
+    Map<Long, Long> finalPostCntByTagIds = postCntByTagIds;
     List<TagDto> dtos = tags
       .stream()
-      .map(t -> tagMapper.toDto(t, postCntByTagIds.getOrDefault(t.getId(), 0L)))
+      .map(t -> tagMapper.toDto(t, finalPostCntByTagIds.getOrDefault(t.getId(), 0L)))
       .sorted((a, b) -> Long.compare(b.getCount(), a.getCount()))
       .collect(Collectors.toList());
+    if (page != null && pageSize != null && page >= 0 && pageSize > 0) {
+      int fromIndex = page * pageSize;
+      if (fromIndex >= dtos.size()) {
+        return java.util.Collections.emptyList();
+      }
+      int toIndex = Math.min(fromIndex + pageSize, dtos.size());
+      return new java.util.ArrayList<>(dtos.subList(fromIndex, toIndex));
+    }
     if (limit != null && limit > 0 && dtos.size() > limit) {
-      return dtos.subList(0, limit);
+      return new java.util.ArrayList<>(dtos.subList(0, limit));
     }
     return dtos;
   }

backend/src/test/java/com/openisle/controller/TagControllerTest.java

@@ -82,6 +82,7 @@ class TagControllerTest {
     t.setIcon("i2");
     t.setSmallIcon("s2");
     Mockito.when(tagService.searchTags(null)).thenReturn(List.of(t));
+    Mockito.when(postService.countPostsByTagIds(List.of(2L))).thenReturn(java.util.Map.of());
 
     mockMvc
       .perform(get("/api/tags"))
@@ -93,6 +94,31 @@ class TagControllerTest {
       .andExpect(jsonPath("$[0].smallIcon").value("s2"));
   }
 
+  @Test
+  void listTagsWithPagination() throws Exception {
+    Tag t1 = new Tag();
+    t1.setId(1L);
+    t1.setName("java");
+    Tag t2 = new Tag();
+    t2.setId(2L);
+    t2.setName("spring");
+    Mockito.when(tagService.searchTags(null)).thenReturn(List.of(t1, t2));
+    Mockito.when(postService.countPostsByTagIds(List.of(1L, 2L))).thenReturn(
+      java.util.Map.of(1L, 1L, 2L, 5L)
+    );
+
+    mockMvc
+      .perform(get("/api/tags").param("page", "1").param("pageSize", "1"))
+      .andExpect(status().isOk())
+      .andExpect(jsonPath("$", org.hamcrest.Matchers.hasSize(1)))
+      .andExpect(jsonPath("$[0].id").value(1));
+
+    mockMvc
+      .perform(get("/api/tags").param("page", "2").param("pageSize", "1"))
+      .andExpect(status().isOk())
+      .andExpect(jsonPath("$", org.hamcrest.Matchers.hasSize(0)));
+  }
+
   @Test
   void updateTag() throws Exception {
     Tag t = new Tag();

frontend_nuxt/components/Dropdown.vue

@@ -52,6 +52,7 @@
       v-if="open && !isMobile && (loading || filteredOptions.length > 0 || showSearch)"
       :class="['dropdown-menu', menuClass]"
       v-click-outside="close"
+      ref="menuRef"
     >
       <div v-if="showSearch" class="dropdown-search">
         <search-icon class="search-icon" />
@@ -80,6 +81,7 @@
             <span>{{ o.name }}</span>
           </slot>
         </div>
+        <slot name="footer" :close="close" :loading="loading" />
       </template>
     </div>
     <Teleport to="body">
@@ -88,7 +90,7 @@
           <next class="back-icon" @click="close" />
           <span class="mobile-title">{{ placeholder }}</span>
         </div>
-        <div class="dropdown-mobile-menu">
+        <div class="dropdown-mobile-menu" ref="mobileMenuRef">
           <div v-if="showSearch" class="dropdown-search">
             <search-icon class="search-icon" />
             <input type="text" v-model="search" placeholder="搜索" />
@@ -116,6 +118,7 @@
                 <span>{{ o.name }}</span>
               </slot>
             </div>
+            <slot name="footer" :close="close" :loading="loading" />
           </template>
         </div>
       </div>
@@ -151,6 +154,8 @@ export default {
     const loaded = ref(false)
     const loading = ref(false)
     const wrapper = ref(null)
+    const menuRef = ref(null)
+    const mobileMenuRef = ref(null)
     const isMobile = useIsMobile()
 
     const toggle = () => {
@@ -200,6 +205,17 @@ export default {
       }
     }
 
+    const scrollToBottom = () => {
+      const el = isMobile.value ? mobileMenuRef.value : menuRef.value
+      if (el) {
+        el.scrollTop = el.scrollHeight
+      }
+    }
+
+    const reload = async () => {
+      await loadOptions(props.remote ? search.value : undefined)
+    }
+
     watch(
       () => props.initialOptions,
       (val) => {
@@ -249,7 +265,7 @@ export default {
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
     }
 
-    expose({ toggle, close })
+    expose({ toggle, close, reload, scrollToBottom })
 
     return {
       open,
@@ -259,6 +275,8 @@ export default {
       search,
       filteredOptions,
       wrapper,
+      menuRef,
+      mobileMenuRef,
       selectedLabels,
       isSelected,
       loading,

frontend_nuxt/components/MenuComponent.vue

@@ -116,30 +116,42 @@
             <div v-if="isLoadingTag" class="menu-loading-container">
               <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
             </div>
-            <div 
-                v-else 
-                v-for="t in tagData" 
-                :key="t.id" 
-                class="section-item" 
-                :class="{ selected: isTagSelected(t.id) }" 
+            <template v-else>
+              <div
+                v-for="t in tagData"
+                :key="t.id"
+                class="section-item"
+                :class="{ selected: isTagSelected(t.id) }"
                 @click="gotoTag(t)"
               >
-              <BaseImage
-                v-if="isImageIcon(t.smallIcon || t.icon)"
-                :src="t.smallIcon || t.icon"
-                class="section-item-icon"
-                :alt="t.name"
-              />
-              <component
-                v-else-if="t.smallIcon || t.icon"
-                :is="t.smallIcon || t.icon"
-                class="section-item-icon"
-              />
-              <tag-one v-else class="section-item-icon" />
-              <span class="section-item-text"
-                >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
-              >
-            </div>
+                <BaseImage
+                  v-if="isImageIcon(t.smallIcon || t.icon)"
+                  :src="t.smallIcon || t.icon"
+                  class="section-item-icon"
+                  :alt="t.name"
+                />
+                <component
+                  v-else-if="t.smallIcon || t.icon"
+                  :is="t.smallIcon || t.icon"
+                  class="section-item-icon"
+                />
+                <tag-one v-else class="section-item-icon" />
+                <span class="section-item-text"
+                  >{{ t.name }} <span class="section-item-text-count">x {{ t.count }}</span></span
+                >
+              </div>
+              <div v-if="hasMoreTags || isLoadingMoreTags" class="section-item more-item">
+                <a
+                  v-if="hasMoreTags && !isLoadingMoreTags"
+                  href="#"
+                  class="more-link"
+                  @click.prevent="loadMoreTags"
+                >
+                  查看更多
+                </a>
+                <span v-else class="more-loading">加载中...</span>
+              </div>
+            </template>
           </div>
         </div>
       </div>
@@ -207,16 +219,88 @@ const {
   },
 )
 
+const TAG_PAGE_SIZE = 10
+const tagPage = ref(0)
+const hasMoreTags = ref(true)
+const isLoadingMoreTags = ref(false)
+
+const buildTagUrl = (page = 0) => {
+  const base = API_BASE_URL || (import.meta.client ? window.location.origin : '')
+  const url = new URL('/api/tags', base)
+  url.searchParams.set('page', String(page))
+  url.searchParams.set('pageSize', String(TAG_PAGE_SIZE))
+  return url.toString()
+}
+
+const fetchTagPage = async (page = 0) => {
+  try {
+    return await $fetch(buildTagUrl(page))
+  } catch (e) {
+    console.error('Failed to fetch tags', e)
+    return []
+  }
+}
+
 const {
   data: tagData,
   pending: isLoadingTag,
   error: tagError,
-} = await useAsyncData('menu:tags', () => $fetch(`${API_BASE_URL}/api/tags?limit=10`), {
+} = await useAsyncData('menu:tags', () => fetchTagPage(0), {
   server: true,
   default: () => [],
   staleTime: 5 * 60 * 1000,
 })
 
+const dedupeTags = (list) => Array.from(new Map(list.map((tag) => [tag.id, tag])).values())
+
+const initializeTagState = (val) => {
+  const initial = Array.isArray(val) ? val : []
+  if (!Array.isArray(val)) {
+    tagData.value = []
+  }
+  tagPage.value = 0
+  hasMoreTags.value = initial.length === TAG_PAGE_SIZE
+}
+
+initializeTagState(tagData.value)
+
+watch(
+  tagData,
+  (val, oldVal) => {
+    const next = Array.isArray(val) ? val : []
+    if (!Array.isArray(val)) {
+      tagData.value = []
+    }
+    const shouldReset =
+      !Array.isArray(oldVal) || oldVal.length > next.length || next.length <= TAG_PAGE_SIZE
+    if (shouldReset) {
+      tagPage.value = 0
+      hasMoreTags.value = next.length === TAG_PAGE_SIZE
+    }
+  },
+  { deep: false },
+)
+
+const loadMoreTags = async () => {
+  if (isLoadingMoreTags.value || !hasMoreTags.value) return
+  isLoadingMoreTags.value = true
+  const nextPage = tagPage.value + 1
+  try {
+    const result = await fetchTagPage(nextPage)
+    const data = Array.isArray(result) ? result : []
+    const existing = Array.isArray(tagData.value) ? tagData.value : []
+    tagData.value = dedupeTags([...existing, ...data])
+    tagPage.value = nextPage
+    if (data.length < TAG_PAGE_SIZE) {
+      hasMoreTags.value = false
+    }
+  } catch (e) {
+    console.error('Failed to load more tags', e)
+  } finally {
+    isLoadingMoreTags.value = false
+  }
+}
+
 /** 其余逻辑保持不变 */
 const iconClass = computed(() => {
   switch (themeState.mode) {
@@ -433,6 +517,27 @@ const gotoTag = (t) => {
   transition: background-color 0.5s ease;
 }
 
+.more-item {
+  justify-content: center;
+}
+
+.more-link {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.more-link:hover {
+  text-decoration: underline;
+}
+
+.more-loading {
+  font-size: 13px;
+  color: var(--menu-text-color);
+  opacity: 0.7;
+}
+
 .section-item:hover {
   background-color: var(--menu-selected-background-color-hover);
 }
@@ -441,7 +546,6 @@ const gotoTag = (t) => {
   background-color: var(--menu-selected-background-color);
 }
 
-
 .section-item-text-count {
   font-size: 12px;
   color: var(--menu-text-color);

frontend_nuxt/components/TagSelect.vue

@@ -1,5 +1,6 @@
 <template>
   <Dropdown
+    ref="dropdownRef"
     v-model="selected"
     :fetch-options="fetchTags"
     multiple
@@ -25,11 +26,23 @@
         <div v-if="option.description" class="option-desc">{{ option.description }}</div>
       </div>
     </template>
+    <template #footer>
+      <div v-if="hasMoreRemoteTags" class="dropdown-footer">
+        <a
+          href="#"
+          class="dropdown-more"
+          :class="{ disabled: loadMoreRequested }"
+          @click.prevent="loadMoreRemoteTags"
+        >
+          {{ loadMoreRequested ? '加载中...' : '查看更多' }}
+        </a>
+      </div>
+    </template>
   </Dropdown>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch, nextTick } from 'vue'
 import { toast } from '~/main'
 import Dropdown from '~/components/Dropdown.vue'
 const config = useRuntimeConfig()
@@ -42,9 +55,19 @@ const props = defineProps({
   options: { type: Array, default: () => [] },
 })
 
+const dropdownRef = ref(null)
 const localTags = ref([])
 const providedTags = ref(Array.isArray(props.options) ? [...props.options] : [])
 
+const TAG_PAGE_SIZE = 10
+const remoteState = reactive({
+  keyword: '',
+  nextPage: 0,
+  hasMore: true,
+  options: [],
+})
+const loadMoreRequested = ref(false)
+
 watch(
   () => props.options,
   (val) => {
@@ -53,7 +76,7 @@ watch(
 )
 
 const mergedOptions = computed(() => {
-  const arr = [...providedTags.value, ...localTags.value]
+  const arr = [...providedTags.value, ...localTags.value, ...remoteState.options]
   return arr.filter((v, i, a) => a.findIndex((t) => t.id === v.id) === i)
 })
 
@@ -62,44 +85,93 @@ const isImageIcon = (icon) => {
   return /^https?:\/\//.test(icon) || icon.startsWith('/')
 }
 
-const buildTagsUrl = (kw = '') => {
+const buildTagsUrl = (kw = '', page = 0) => {
   const base = API_BASE_URL || (import.meta.client ? window.location.origin : '')
   const url = new URL('/api/tags', base)
 
   if (kw) url.searchParams.set('keyword', kw)
-  url.searchParams.set('limit', '10')
+  url.searchParams.set('page', String(page))
+  url.searchParams.set('pageSize', String(TAG_PAGE_SIZE))
 
   return url.toString()
 }
 
+const fetchRemoteTags = async (kw = '', page = 0) => {
+  const url = buildTagsUrl(kw, page)
+  try {
+    const res = await fetch(url)
+    if (res.ok) {
+      const data = await res.json()
+      return Array.isArray(data) ? data : []
+    }
+    throw new Error('failed to fetch tags')
+  } catch (e) {
+    console.error('Failed to fetch tags', e)
+    toast.error('获取标签失败')
+    throw e
+  }
+}
+
+const combineOptions = (remoteOptions = []) => {
+  const options = [...providedTags.value, ...localTags.value, ...remoteOptions]
+  return Array.from(new Map(options.map((t) => [t.id, t])).values())
+}
+
 const fetchTags = async (kw = '') => {
   const defaultOption = { id: 0, name: '无标签' }
 
-  // 1) 先拼 URL（自动兜底到 window.location.origin）
-  const url = buildTagsUrl(kw)
-
-  // 2) 拉数据
-  let data = []
-  try {
-    const res = await fetch(url)
-    if (res.ok) data = await res.json()
-  } catch {
-    toast.error('获取标签失败')
+  if (kw !== remoteState.keyword) {
+    remoteState.keyword = kw
+    remoteState.nextPage = 0
+    remoteState.options = []
+    remoteState.hasMore = true
   }
 
-  // 3) 合并、去重、可创建
-  let options = [...data, ...localTags.value]
+  const shouldFetch = remoteState.options.length === 0 || loadMoreRequested.value
+  if (shouldFetch) {
+    const pageToFetch = loadMoreRequested.value ? remoteState.nextPage : 0
+    try {
+      const data = await fetchRemoteTags(remoteState.keyword, pageToFetch)
+      if (pageToFetch === 0) {
+        remoteState.options = data
+      } else {
+        const existing = Array.isArray(remoteState.options) ? remoteState.options : []
+        const merged = [...existing, ...data]
+        remoteState.options = Array.from(new Map(merged.map((t) => [t.id, t])).values())
+      }
+      remoteState.hasMore = data.length === TAG_PAGE_SIZE
+      remoteState.nextPage = pageToFetch + 1
+    } catch (e) {
+      return [defaultOption, ...combineOptions(remoteState.options)]
+    } finally {
+      loadMoreRequested.value = false
+    }
+  }
+
+  let options = combineOptions(remoteState.options)
 
   if (props.creatable && kw && !options.some((t) => t.name.toLowerCase() === kw.toLowerCase())) {
     options.push({ id: `__create__:${kw}`, name: `创建"${kw}"` })
   }
 
-  options = Array.from(new Map(options.map((t) => [t.id, t])).values())
-
-  // 4) 最终结果
   return [defaultOption, ...options]
 }
 
+const hasMoreRemoteTags = computed(() => remoteState.hasMore)
+
+const loadMoreRemoteTags = async () => {
+  if (!remoteState.hasMore || loadMoreRequested.value) return
+  loadMoreRequested.value = true
+  try {
+    await dropdownRef.value?.reload()
+    await nextTick()
+    dropdownRef.value?.scrollToBottom?.()
+  } catch (e) {
+    console.error('Failed to load more tags', e)
+    loadMoreRequested.value = false
+  }
+}
+
 const selected = computed({
   get: () => props.modelValue,
   set: (v) => {
@@ -151,4 +223,21 @@ const selected = computed({
   font-weight: bold;
   opacity: 0.4;
 }
+
+.dropdown-footer {
+  padding: 8px 20px;
+  text-align: center;
+  border-top: 1px solid var(--normal-border-color);
+}
+
+.dropdown-more {
+  color: var(--primary-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.dropdown-more.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
 </style>