feat: 列表跳转新页面，页码切换滚至顶部

src/components/list/ListPagination.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script setup lang="ts">
+import { useWindowScroll } from '@vueuse/core';
+
 withDefaults(
   defineProps<{
     currentPage: number;
@@ -22,15 +24,23 @@ withDefaults(
   {},
 );
 
+const { y } = useWindowScroll({ behavior: 'smooth' });
+
 const emit = defineEmits<{
   'update:current-page': [page: number];
   'update:page-size': [page: number];
 }>();
 
+const scrollTop = () => {
+  y.value = 0;
+};
+
 const handlePageChange = (page: number) => {
+  scrollTop();
   emit('update:current-page', page);
 };
 const handlePageSizeChange = (size: number) => {
+  scrollTop();
   emit('update:page-size', size);
 };
 </script>

src/components/list/ParkItem.vue

 <template>
   <div v-if="item">
     <div class="flex min-h-[156px]">
-      <div>
-        <img class="h-[156px] w-[208px] rounded-sm" :src="item.imgUrl" alt="产业园" />
+      <div @click="handleDetail">
+        <img
+          class="h-[156px] w-[208px] cursor-pointer rounded-sm"
+          :src="item.imgUrl"
+          alt="产业园"
+        />
       </div>
       <div class="ml-4 flex-1 py-2">
         <div class="flex items-center">
-          <div class="text-xl font-semibold leading-6 text-[#1a1a1a]">{{ item.name }}</div>
+          <div
+            class="cursor-pointer text-xl font-semibold leading-6 text-[#1a1a1a]"
+            @click="handleDetail"
+          >
+            {{ item.name }}
+          </div>
           <div v-if="currentStatusTag" class="ml-2">
             <div :class="['status-tag', currentStatusTag.className]">
               {{ currentStatusTag.name }}
@@ -41,15 +50,20 @@ import { useItemStatus } from '@/composable/useItemStatus.ts';
 import type { IndustrialParkItem } from '@/types/api/industrialParkList.ts';
 import { filterAddress } from '@/utils/filters.ts';
 import { computed } from 'vue';
+import type { DevelopZoneItem } from '@/types/api/developZoneList';
 import ListInfo from './ListInfo.vue';
 
 const props = withDefaults(
   defineProps<{
-    item: IndustrialParkItem;
+    item: Partial<IndustrialParkItem & DevelopZoneItem>;
   }>(),
   {},
 );
 
+const emit = defineEmits<{
+  'to-detail': [];
+}>();
+
 const { currentStatusTag, superTag } = useItemStatus(props.item);
 
 /** 最大展示招商方向数量 */
@@ -63,4 +77,8 @@ const infos = computed(() => {
 const directions = computed(() => {
   return props.item.investmentDirection?.slice?.(0, MAX_DIRECTION_COUNT) || [];
 });
+
+const handleDetail = () => {
+  emit('to-detail');
+};
 </script>

src/composable/useJump.ts

+import type { RouteLocationRaw } from 'vue-router';
+import { useRouter } from 'vue-router';
+
+/**
+ * 路由跳转
+ */
+export function useJump() {
+  const router = useRouter();
+
+  /**
+   * @param isNew 是否在新窗口打开
+   */
+  const open = (path: RouteLocationRaw, isNew = true) => {
+    const { href } = router.resolve(path);
+    window.open(href, isNew ? '_blank' : '_self');
+  };
+
+  return {
+    router,
+    open,
+  };
+}

src/composable/useListView.ts

@@ -2,15 +2,15 @@ import { useQueryList } from '@/composable/useQueryList.ts';
 import { ref, watchEffect, type Ref } from 'vue';
 import { RequestUrl } from '@/types/api.ts';
 import type { CommonListResp, CommonListParams } from '@/types/common';
-import { useRouter } from 'vue-router';
 import type { RouteName } from '@/router/router.ts';
 import { useRequest } from './useRequest.ts';
+import { useJump } from './useJump.ts';
 
 export function useListView<
   T extends { id: number; [index: string]: any },
   C extends Record<any, any>,
 >(url: RequestUrl) {
-  const router = useRouter();
+  const { open } = useJump();
   const { request: requestList } = useRequest<CommonListResp<T>, CommonListParams<C>>(url, {
     method: 'POST',
   });
@@ -33,7 +33,7 @@ export function useListView<
    * 跳转详情页
    */
   const handleDetail = (name: RouteName, item: T) => {
-    router.push({
+    open({
       name,
       query: {
         id: item.id,

src/views/develop/DevelopZoneList.vue

@@ -6,7 +6,7 @@
         v-for="item in datas"
         :key="item.id"
         :item="item"
-        @click="handleDetail(RouteName.industrialParkDetail, item)"
+        @to-detail="handleDetail(RouteName.developZoneDetail, item)"
       ></ParkItem>
 
       <ListPagination

src/views/industrial-park/IndustrialParkList.vue

@@ -7,7 +7,7 @@
           v-for="item in datas"
           :key="item.id"
           :item="item"
-          @click="handleDetail(RouteName.industrialParkDetail, item)"
+          @to-detail="handleDetail(RouteName.industrialParkDetail, item)"
         ></ParkItem>
       </div>