mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-07-27 04:20:43 +08:00
refactor(home&post-card): 调整点击事件绑定位置并优化空状态样式
1. 将作者卡片的点击事件从子组件移到父容器上,简化子组件依赖 2. 给空状态提示容器添加box-border类统一样式规范 3. 为文章卡片添加点击跳转详情页的逻辑
This commit is contained in:
@@ -93,20 +93,26 @@ const textFooterClass = computed(() => {
|
|||||||
}
|
}
|
||||||
return 'gap-x-2'
|
return 'gap-x-2'
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function handleToPostDetail() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages-blog/post-detail/post-detail?metadataName=${props.post.metadata.name}`,
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view v-if="post" class="uh-shadow-xs box-border w-full flex justify-center overflow-hidden rounded-2xl bg-white p-4" :class="wrapClass">
|
<view v-if="post" class="uh-shadow-xs box-border w-full flex justify-center overflow-hidden rounded-2xl bg-white p-4" :class="wrapClass">
|
||||||
<view class="shrink-0 overflow-hidden rounded-lg" :class="coverClass">
|
<view class="shrink-0 overflow-hidden rounded-lg" :class="coverClass" @click="handleToPostDetail">
|
||||||
<image :src="completeUrl(post.spec.cover)" mode="aspectFill" class="h-full w-full" />
|
<image :src="completeUrl(post.spec.cover)" mode="aspectFill" class="h-full w-full" />
|
||||||
<view v-if="props.type === 'rightCover'" class="absolute bottom-0 left-0 top-0 z-10 h-full w-full from-white/0 via-white/10 to-white bg-gradient-to-l" />
|
<view v-if="props.type === 'rightCover'" class="absolute bottom-0 left-0 top-0 z-10 h-full w-full from-white/0 via-white/10 to-white bg-gradient-to-l" />
|
||||||
</view>
|
</view>
|
||||||
<view class="box-border flex-1" :class="textWrapClass">
|
<view class="box-border flex-1" :class="textWrapClass">
|
||||||
<view class="h-full flex flex-1 flex-col justify-between" :class="textContainerClass">
|
<view class="h-full flex flex-1 flex-col justify-between" :class="textContainerClass">
|
||||||
<view class="line-clamp-1 text-sm text-gray-900 font-bold">
|
<view class="line-clamp-1 text-sm text-gray-900 font-bold" @click="handleToPostDetail">
|
||||||
{{ post.spec.title }}
|
{{ post.spec.title }}
|
||||||
</view>
|
</view>
|
||||||
<view class="line-clamp-2 text-xs text-gray-500">
|
<view class="line-clamp-2 text-xs text-gray-500" @click="handleToPostDetail">
|
||||||
{{ post.status.excerpt }}
|
{{ post.status.excerpt }}
|
||||||
</view>
|
</view>
|
||||||
<view class="w-full flex items-center" :class="textFooterClass">
|
<view class="w-full flex items-center" :class="textFooterClass">
|
||||||
|
|||||||
@@ -168,8 +168,8 @@ onPageScroll(() => { })
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 作者卡片 -->
|
<!-- 作者卡片 -->
|
||||||
<view class="relative z-10 box-border px-4 -mt-12">
|
<view class="relative z-10 box-border px-4 -mt-12" @click="showPostCardModeSelector = !showPostCardModeSelector">
|
||||||
<profile-card @click="showPostCardModeSelector = !showPostCardModeSelector" />
|
<profile-card />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 测试 -->
|
<!-- 测试 -->
|
||||||
@@ -233,7 +233,7 @@ onPageScroll(() => { })
|
|||||||
<text class="text-sm text-gray-900 font-bold">最新笔记</text>
|
<text class="text-sm text-gray-900 font-bold">最新笔记</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="box-border w-full flex flex-col items-center justify-center gap-y-4 overflow-hidden">
|
<view class="box-border w-full flex flex-col items-center justify-center gap-y-4 overflow-hidden">
|
||||||
<view v-if="error && postList.length > 0" class="un-shadow-xs w-full rounded-2xl bg-white py-12">
|
<view v-if="error && postList.length > 0" class="un-shadow-xs box-border w-full rounded-2xl bg-white py-12">
|
||||||
<wd-empty :icon-size="60" icon="no-result" tip="暂无数据" />
|
<wd-empty :icon-size="60" icon="no-result" tip="暂无数据" />
|
||||||
</view>
|
</view>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
|||||||
Reference in New Issue
Block a user