qiming/qiming-mobile/components/page-card/page-card.uvue

<template>
  <view
    class="page-card-container flex flex-col relative"
    hover-class="page-card-container-active"
    @click="handleClick"
  >
    <!-- 封面图 -->
    <view class="flex items-center content-center cover-image-container">
      <image
        v-if="coverImg"
        class="image"
        :src="coverImg"
        :alt="t('Mobile.Common.coverImageAlt')"
      />
      <text v-else class="no-screenshot">{{
        t("Mobile.PageCard.noPreviewImage")
      }}</text>
    </view>
    <!-- 卡片内容 -->
    <view class="flex flex-col gap-4">
      <view class="flex flex-row items-center agent-info-box">
        <!-- 智能体名称 -->
        <view class="flex-1 agent-name text-ellipsis">{{ name }}</view>
        <!-- 使用人数 -->
        <view class="stat-item">
          <image :src="iconUser" class="stat-icon" alt="" />
          <text class="stat-value">{{ userCount || 0 }}</text>
        </view>
        <!-- 收藏按钮 -->
        <view
          class="stat-item"
          hover-class="stat-item-active"
          @click.prevent="handleCollect"
        >
          <text class="iconfont icon-Star stat-icon" v-if="!collect" />
          <text v-else class="iconfont icon-Star-fill stat-icon" />
          <text class="stat-value">{{ collectCount || 0 }}</text>
        </view>
      </view>
      <!-- 用户信息 -->
      <view class="flex flex-row items-center gap-4 user-info-box">
        <image
          class="avatar"
          :src="avatar || defaultAvatar"
          :alt="t('Mobile.Common.avatarAlt')"
          @error="handleError"
        />
        <view class="user-name text-ellipsis">
          {{ userName }}
        </view>
        <view class="created-time text-ellipsis" v-if="formattedCreated">
          {{ t("Mobile.PageCard.createdAt", { date: formattedCreated }) }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
  import defaultAvatar from "@/static/assets/avatar.png";
  import iconUser from "@/static/assets/icon_user.png";
  import { computed } from "vue";
  import { useI18n } from "@/utils/i18n";

  const { t } = useI18n();

  const props = defineProps<{
    coverImg: string;
    name: string;
    avatar: string;
    userName?: string;
    created?: string;
    collectCount?: number;
    userCount?: number;
    collect?: boolean;
  }>();

  const formattedCreated = computed(() => {
    if (!props.created) return "";
    const date = new Date(props.created);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  });

  const emit = defineEmits(["click", "collect"]);

  const handleError = () => {
    avatar.value = defaultAvatar;
  };

  const handleClick = () => {
    emit("click");
  };

  const handleCollect = (e) => {
    e.preventDefault();
    e.stopPropagation();
    emit("collect");
  };
</script>

<style lang="scss" scoped>
  .page-card-container {
    padding: 24rpx 32rpx;

    &-active {
      background-color: rgba(12, 20, 102, 0.04);
    }

    .cover-image-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 400rpx;
      border-radius: 12rpx;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.4);

      .image {
        width: 100%;
        height: 100%;
      }

      .no-screenshot {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.45);
      }
    }

    .agent-info-box {
      gap: 12rpx;
      padding: 12rpx 0;

      .agent-name {
        line-height: 56rpx;
        font-size: 28rpx;
        color: #15171f;
      }

      .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        padding: 8rpx 16rpx;
        border-radius: 8rpx;
        gap: 8rpx;

        &-active {
          background-color: rgba(12, 20, 102, 0.04);
        }

        .stat-icon {
          width: 32rpx;
          height: 32rpx;
        }

        .iconfont {
          font-size: 32rpx;
          color: rgba(21, 23, 31, 0.5);
        }

        .icon-Star-fill {
          color: #faad14;
        }

        .stat-value {
          font-size: 28rpx;
          color: rgba(21, 23, 31, 0.5);
          font-weight: 400;
        }
      }
    }

    .user-info-box {
      gap: 12rpx;

      .avatar {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
      }

      .user-name {
        flex: 0 1 auto;
        font-size: 24rpx;
        color: rgba(21, 23, 31, 0.5);
      }

      .created-time {
        text-align: right;
        min-width: 260rpx;
        flex: 1 1 auto;
        font-size: 24rpx;
        color: rgba(21, 23, 31, 0.5);
      }
    }
  }
</style>