fix: Adjust the store page scrolling behavior

xmcl-keystone-ui/src/components/StoreProjectExternal.vue

@@ -4,14 +4,16 @@
       {{ t('modrinth.externalResources') }}
     </v-subheader>
     <div class="my-2 flex w-full flex-1 flex-grow-0 flex-wrap gap-4 px-4">
-      <a
+      <span
         v-for="link of project.links"
         :key="link.url"
-        :href="link.url"
-        class="flex flex-grow-0 items-center gap-1"
+        class="flex flex-grow-0 items-center"
       >
-        <v-icon>open_in_new</v-icon> {{ link.name }}
-      </a>
+        <v-icon left>open_in_new</v-icon>
+        <a :href="link.url">
+          {{ link.name }}
+        </a>
+      </span>
     </div>
   </div>
 </template>

xmcl-keystone-ui/src/views/StoreEntry.vue

@@ -181,6 +181,7 @@ const { push } = useRouter()
 
 function ensureQuery(query: Record<string, string | (string| null)[] | null | undefined>) {
   query.page = '1'
+  scrollToView()
   if (!query.query) {
     if (query.sort === '0') {
       query.sort = '1'
@@ -486,6 +487,13 @@ const items = computed(() => {
 // Scroll to the search result
 const container = ref<any>(null)
 const exploreHeader = ref<any | null>(null)
+function scrollToView() {
+  const component = exploreHeader.value
+  const el = component?.$el as HTMLElement | undefined
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth' })
+  }
+}
 watch(items, () => {
   if (query.value || gameVersion.value || modLoaders.value.length > 0 || _modrinthCategories.value.length > 0 || curseforgeCategory.value) {
     // Scroll to the element
@@ -501,6 +509,10 @@ watch(items, () => {
   }
 })
 
+watch(page, () => {
+  scrollToView()
+})
+
 // Hovered project
 const hovered = ref(undefined as ExploreProject | undefined)
 const onMouseEnter = (event: MouseEvent, proj: ExploreProject) => {