feat: 引入 ImageEvo 组件，优化图片加载效果并调整相关页面布局

packages/app/src/components/image-evo.vue

@@ -2,8 +2,10 @@
 withDefaults(defineProps<{ src?: string }>(), {})
 const emits = defineEmits<{ displayed: [] }>()
 const visible = ref(false)
+const imgClass = ref('blur-lg transition duration-500 hover:blur-none')
 const handleLoad = async () => {
   visible.value = true
+  imgClass.value = 'transition duration-500 hover:blur-none'
   nextTick(() => {
     emits('displayed')
   })
@@ -17,6 +19,7 @@ const handleLoad = async () => {
     height="100%"
     :style="{ visibility: visible ? 'visible' : 'hidden' }"
     :src="src"
+    :custom-class="`vertical-bottom ${imgClass}`"
     @load="handleLoad"
   ></wd-img>
   <!-- </div> -->

packages/app/src/pages/home/components/schedule-card.vue

@@ -3,6 +3,8 @@ import SectionHeading from '@/components/section-heading.vue'
 import { scheduleCardBg } from '../../../core/libs/pngs'
 import { group } from 'radash'
 import dayjs from 'dayjs'
+import ImageEvo from '@/components/image-evo.vue'
+import { useRouter } from '../../../core/utils/router'
 
 const props = withDefaults(
   defineProps<{
@@ -27,7 +29,9 @@ const props = withDefaults(
     items: () => [],
   },
 )
+const router = useRouter()
 const data = ref()
+const imgDisplayed = ref(false)
 const schedules = computed(() =>
   group(props.items, (it) => dayjs(it?.travelTime).format('YYYY-MM-DD')),
 )
@@ -39,7 +43,10 @@ const push = () => {
   data.value = currentSchedule.value.slice(0, 2)
 }
 const handleClick = async () => {
-  uni.navigateTo({ url: '/pages/home/schedule/index' })
+  router.push('/pages/home/schedule/index')
+}
+const handleImgDisplayed = () => {
+  setTimeout(() => (imgDisplayed.value = true), 300)
 }
 onMounted(() => {
   push()
@@ -86,8 +93,13 @@ onMounted(() => {
       </template>
     </div>
     <view class="w-full relative bottom-7 mb--9">
-      <wd-img :src="scheduleCardBg" width="100%" mode="widthFix"></wd-img>
-      <view class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center">
+      <div class="aspect-[2.55/1]">
+        <ImageEvo :src="scheduleCardBg" @displayed="handleImgDisplayed"></ImageEvo>
+      </div>
+      <view
+        class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center"
+        v-show="imgDisplayed"
+      >
         <wd-icon
           custom-class="relative bottom-6"
           :name="data?.length > 2 ? 'arrow-up' : 'arrow-down'"
@@ -95,7 +107,7 @@ onMounted(() => {
           color="#4f4f4f"
           @click="data?.length > 2 ? push() : pull()"
         ></wd-icon>
-        <view class="w-full">
+        <view class="w-full duration-800">
           <wd-button block size="large" custom-class="rd!" @click="handleClick">
             查看全部行程
           </wd-button>

packages/app/src/pages/home/index.vue

@@ -55,7 +55,6 @@ const { data: indexConfigsData, run: setIndexConfigsData } = useRequest(
 const { data: studyTours, run: setStudyTours } = useRequest(() => getMyStudyTours(), {
   initialData: [],
 })
-// const {} = useRequest(() =>)
 const swiperData = ref<{ data: any }[]>()
 const swiperCurrent = ref(0)
 const hotActivities =

packages/app/src/pages/mine/homepage/index.vue

@@ -30,6 +30,7 @@ import dayjs from 'dayjs'
 import wechatChannels from '@designer-hub/assets/src/libs/assets/wechatChannels'
 import { handleUpvoteClick, handleShareClick } from '../../../core/libs/actions'
 import { usePermissions } from '../../../composables/permissions'
+import ImageEvo from '@/components/image-evo.vue'
 
 const { features } = usePermissions()
 const { alert, confirm } = useMessage()
@@ -187,12 +188,13 @@ defineExpose({
   <div class="flex-grow flex flex-col">
     <NavbarEvo transparent dark :isShowBack="!isShared"></NavbarEvo>
     <div class="relative">
-      <wd-img
-        width="100%"
-        :src="designerInfo?.homePageUrl || NetImages.DesigerHomepageDefaultBg"
-        mode="aspectFill"
-        custom-class="aspect-[1.14/1]"
-      />
+      <!-- <wd-img width="100%" custom-class="aspect-[1.14/1]" /> -->
+      <div class="aspect-[1.14/1]">
+        <ImageEvo
+          :src="designerInfo?.homePageUrl || NetImages.DesigerHomepageDefaultBg"
+          mode="aspectFill"
+        ></ImageEvo>
+      </div>
       <div class="absolute bottom-0 left-0 right-0">
         <div class="bg-gradient-to-t from-black to-transparent">
           <div class="flex min-h-27">