qiming/qiming-mobile/components/recent-used-agent-item/recent-used-agent-item.uvue

<!-- 智能体卡片组件 -->
<template>
  <view
    class="container"
    hover-class="container-active"
    @click.prevent="handleClick"
    @longpress.stop.prevent="handleLongPress"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @touchcancel="handleTouchEnd"
  >
    <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-name-row">
        <text class="agent-name text-ellipsis">{{ name }}</text>
        <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>
        <text class="agent-time text-ellipsis" v-if="modifiedTime">
          {{ modifiedTime }}
        </text>
      </view>
      <text class="agent-description text-ellipsis" v-if="description">
        {{ description }}
      </text>
    </view>
  </view>
</template>

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

  interface AgentComponentProps {
    // 图标
    icon: string;
    // 名称
    name: string;
    // 是否展示修改时间
    showModifiedTime?: boolean;
    // 修改时间
    modifiedTime: string;
    // 描述
    description?: string;
    // 是否要求订阅
    paymentRequired?: boolean;
    // 是否已订阅
    subscribed?: boolean;
  }

  const props = withDefaults(defineProps<AgentComponentProps>(), {
    showModifiedTime: true,
    modifiedTime: "",
    description: "",
    paymentRequired: false,
    subscribed: false,
  });
  const { t } = useI18n();

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

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

  // 触控位移与滚动判断
  const touchStartX = ref<number>(0);
  const touchStartY = ref<number>(0);
  const hasMoved = ref<boolean>(false);

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

  const handleTouchStart = (e: any) => {
    const touch = e.touches?.[0];
    if (!touch) return;
    touchStartX.value = touch.clientX;
    touchStartY.value = touch.clientY;
    hasMoved.value = false;
  };

  const handleTouchMove = (e: any) => {
    const touch = e.touches?.[0];
    if (!touch) return;
    const deltaX = Math.abs(touch.clientX - touchStartX.value);
    const deltaY = Math.abs(touch.clientY - touchStartY.value);
    // 超过一定位移阈值，认为是滚动，不再触发长按
    if (deltaX > 10 || deltaY > 10) {
      hasMoved.value = true;
    }
  };

  const handleTouchEnd = () => {
    // 结束时不做处理，长按逻辑在 handleLongPress 中根据 hasMoved 判断
  };

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

  const handleLongPress = () => {
    // 如果在长按过程中发生了明显位移（上下滑动），则认为是滚动，不触发长按
    if (hasMoved.value) {
      return;
    }
    emit("longpress");
  };
</script>

<style scoped lang="scss">
  .container {
    height: 150rpx;
    gap: 24rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16rpx 0 32rpx;
    transform: translateZ(0);
    transition: background-color 0.3s ease;

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

    .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 {
      height: 150rpx;
      flex: 1;
      gap: 8rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
      border-bottom: 2rpx solid #f0f0f0;

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

        .agent-name {
          flex: 1;
          font-size: 32rpx;
          font-weight: 600;
          color: #15171f;
          overflow: hidden;
        }

        .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);
          }
        }

        .agent-time {
          flex-shrink: 0;
          width: 180rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: rgba(21, 23, 31, 0.5);
          text-align: right;
          overflow: hidden;
        }
      }

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