qiming/qiming-mobile/components/agent-component/agent-component.uvue

<!-- 智能体卡片组件 -->
<template>
  <view
    class="card-container"
    hover-class="card-container-active"
    @click.prevent="handleClick"
  >
    <view class="agent-icon">
      <image
        :src="currentIcon"
        class="image"
        :alt="name || t('Mobile.Common.agentIconAlt')"
        @error="handleImageError"
      />
    </view>
    <view class="info-box">
      <view class="agent-info">
        <text class="agent-name">{{ name }}</text>
        <image
          class="avatar"
          :src="currentAvatar || defaultAvatar"
          :alt="t('Mobile.Common.avatarAlt')"
          @error="handleError"
        />
        <text class="agent-creator">{{ userName }}</text>
      </view>
      <text class="agent-description text-ellipsis">{{ description }}</text>
      <view class="agent-stats">
        <view class="stat-item">
          <image :src="iconUser" class="stat-icon" alt="" />
          <text class="stat-value">{{ userCount || 0 }}</text>
        </view>
        <view class="stat-item">
          <image :src="iconMessage" class="stat-icon" alt="" />
          <text class="stat-value">{{ convCount || 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 class="flex-1"></view>
        <view class="status-tags" v-if="paymentRequired">
          <text v-if="subscribed" class="status-tag status-active">{{ t('Mobile.AgentList.subscribedTag') }}</text>
          <text v-else class="status-tag status-warning">{{ t('Mobile.AgentList.paymentRequiredTag') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

  interface AgentComponentProps {
    // 图标
    icon: string;
    // 头像
    avatar: string;
    // 名称
    name: string;
    // 发布人
    userName: string;
    // 描述
    description: string;
    // 用户数
    userCount: number;
    // 对话数
    convCount: number;
    // 收藏数
    collectCount: number;
    // 收藏状态
    collect: boolean;
    // 是否要求订阅
    paymentRequired?: boolean;
    // 是否已订阅
    subscribed?: boolean;
  }

  const props = defineProps<AgentComponentProps>();
  const { t } = useI18n();

  // 当前显示的图标，默认使用传入的 icon
  const currentIcon = ref<string>(props.icon);
  // 当前显示的头像，默认使用传入的 avatar
  const currentAvatar = ref<string>(props.avatar);

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

  // 图片加载错误时触发，切换为默认图片
  const handleImageError = () => {
    currentIcon.value = agentImage;
  };

  // 头像加载错误时触发，切换为默认图片
  const handleError = () => {
    currentAvatar.value = defaultAvatar;
  };

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

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

<style scoped lang="scss">
  .card-container {
    gap: 24rpx;
    display: flex;
    flex-direction: row;
    padding: 24rpx 32rpx;
    // #ifdef WEB
    cursor: pointer;
    // #endif
    transform: translateZ(0);
    border-radius: 8rpx;
    transition: background-color 0.3s ease;

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

    // #ifdef WEB
    &:hover {
      background-color: rgba(12, 20, 102, 0.04);
    }
    // #endif

    .agent-icon {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      .image {
        width: 106%;
        height: 106%;
        position: absolute;
        left: -3%;
        top: -3%;
      }
    }

    .info-box {
      flex: 1;
      gap: 8rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .agent-info {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 8rpx;

        .agent-name {
          flex: 1;
          line-height: 48rpx;
          font-size: 32rpx;
          font-weight: 600;
          color: #15171f;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

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

        .agent-creator {
          max-width: 40%;
          line-height: 48rpx;
          font-size: 24rpx;
          color: rgba(21, 23, 31, 0.5);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .agent-description {
      font-size: 28rpx;
      color: rgba(21, 23, 31, 0.7);
      line-height: 44rpx;
      font-weight: 400;
    }

    .agent-stats {
      display: flex;
      align-items: center;
      flex-direction: row;
      gap: 20rpx;

      .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        height: 48rpx;
        padding: 0 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;
        }
      }

      .status-tags {
        display: flex;
        align-items: center;
        flex-shrink: 0;

        .status-tag {
          padding: 2rpx 12rpx;
          border-radius: 6rpx;
          font-size: 20rpx;
          font-weight: 500;
          line-height: 1.5;
        }

        .status-active {
          background-color: rgba(82, 196, 26, 0.1);
          color: #52c41a;
        }

        .status-warning {
          border: 2rpx solid rgba(0, 122, 255, 0.4);
          color: #007aff;
          background-color: rgba(0, 122, 255, 0.08);
        }
      }
    }
  }
</style>