uni-halo/src/components/uh-post-card/uh-post-card.vue

<script setup lang="ts">
import { completeUrl } from '@/utils/url'
import { timeFrom } from '@/utils/base/timeFrom'
import type { ListedPostVo } from '@halo-dev/api-client'

interface IProps {
  post?: ListedPostVo
  type?: 'noCover' | 'leftCover' | 'bottomCover' | 'rightCover' | 'topCover'
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'leftCover',
  post: undefined,
})

const wrapClass = computed(() => {
  if (props.type === 'topCover') {
    return 'flex-col gap-y-4'
  }
  if (props.type === 'rightCover') {
    return 'relative h-28 p-0! border-2 border-solid border-white'
  }
  if (props.type === 'noCover') {
    return 'pl-0'
  }
  if (props.type === 'leftCover') {
    return ' '
  }
  if (props.type === 'bottomCover') {
    return 'flex-col gap-y-2'
  }
  return ''
})

const coverClass = computed(() => {
  if (props.type === 'topCover') {
    return 'h-32 w-full'
  }
  if (props.type === 'rightCover') {
    return 'absolute right-0 top-0 bottom-0 w-32 rounded-lt-0 rounded-lb-0'
  }
  if (props.type === 'noCover') {
    return 'hidden!'
  }
  if (props.type === 'leftCover') {
    return 'h-22 w-22'
  }
  if (props.type === 'bottomCover') {
    return 'w-full h-32 order-2'
  }
  return ''
})

const textWrapClass = computed(() => {
  if (props.type === 'topCover') {
    return ''
  }
  if (props.type === 'rightCover') {
    return 'p-4 pr-32 relative z-10'
  }

  if (props.type === 'bottomCover') {
    return 'order-1'
  }
  return 'pl-4'
})

const textContainerClass = computed(() => {
  if (props.type === 'topCover') {
    return 'gap-y-2'
  }
  if (props.type === 'noCover') {
    return 'gap-y-2'
  }
  if (props.type === 'rightCover') {
    return ''
  }
  if (props.type === 'bottomCover') {
    return 'gap-y-2'
  }
  return ''
})

const textFooterClass = computed(() => {
  if (props.type === 'topCover') {
    return 'justify-between gap-x-2'
  }
  if (props.type === 'rightCover') {
    return 'gap-x-2'
  }
  if (props.type === 'bottomCover') {
    return ''
  }
  return 'gap-x-2'
})

function handleToPostDetail() {
  uni.navigateTo({
    url: `/pages-blog/post-detail/post-detail?metadataName=${props.post.metadata.name}`,
  })
}
</script>

<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 class="shrink-0 overflow-hidden rounded-lg" :class="coverClass" @click="handleToPostDetail">
      <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>
    <view class="box-border flex-1" :class="textWrapClass">
      <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" @click="handleToPostDetail">
          {{ post.spec.title }}
        </view>
        <view class="line-clamp-2 text-xs text-gray-500" @click="handleToPostDetail">
          {{ post.status.excerpt }}
        </view>
        <view class="w-full flex items-center" :class="textFooterClass">
          <view class="line-clamp-1 text-[11px] text-gray-600">
            {{ timeFrom(post.spec.publishTime) }}
          </view>
          <view class="shrink-0 text-xs text-gray-600">
            ·
          </view>
          <view class="line-clamp-1 text-[11px] text-gray-600">
            {{ post.categories.map(c => c.spec.displayName).join('·') }}
          </view>
          <template v-if="props.type === 'topCover'">
            <view class="shrink-0 text-xs text-gray-600">
              ·
            </view>
            <view class="text-[11px] text-gray-600">
              点赞 {{ post.stats.upvote }} 次
            </view>
          </template>
          <view class="shrink-0 text-xs text-gray-600">
            ·
          </view>
          <view class="line-clamp-1 text-[11px] text-gray-600">
            浏览 {{ post.stats.visit }} 次
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.uh-shadow-xs {
  box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.035);
}
</style>