fix: keep dropdown at bottom after loading more

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" />
@@ -89,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="搜索" />
@@ -153,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 = () => {
@@ -202,6 +205,13 @@ 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)
     }
@@ -255,7 +265,7 @@ export default {
       return /^https?:\/\//.test(icon) || icon.startsWith('/')
     }
 
-    expose({ toggle, close, reload })
+    expose({ toggle, close, reload, scrollToBottom })
 
     return {
       open,
@@ -265,6 +275,8 @@ export default {
       search,
       filteredOptions,
       wrapper,
+      menuRef,
+      mobileMenuRef,
       selectedLabels,
       isSelected,
       loading,