qiming/qiming-mobile/subpackages/pages/chat-conversation-component/components/more-info/more-info.uvue

<template>
  <view class="more-info-container">
    <!-- 头像区域 -->
    <view class="avatar-section">
      <view class="avatar-wrapper">
        <image
          class="avatar"
          :src="agentInfo?.icon"
          mode="aspectFill"
          :alt="t('Mobile.Common.avatarAlt')"
        />
      </view>
    </view>

    <!-- 标题区域 -->
    <view class="title-section">
      <text class="title text-ellipsis">{{ agentInfo?.name }}</text>
    </view>

    <!-- 作者信息 -->
    <view class="author-section">
      <text class="author-label">{{ t("Mobile.Common.from") }}</text>
      <view class="author-avatar">
        <text class="author-initial">{{ authorInitial }}</text>
      </view>
      <text class="author-name">{{
        agentInfo?.publishUser?.nickName || agentInfo?.publishUser?.userName
      }}</text>
    </view>

    <!-- 统计数据 -->
    <view class="stats-section">
      <view class="stat-item">
        <text class="iconfont icon-User" />
        <text class="stat-number">{{ agentInfo?.statistics?.userCount }}</text>
      </view>
      <view class="stat-item">
        <text class="iconfont icon-message" />
        <text class="stat-number">{{ agentInfo?.statistics?.convCount }}</text>
      </view>
      <view class="stat-item">
        <text class="iconfont icon-Star" />
        <text class="stat-number">{{
          agentInfo?.statistics?.collectCount
        }}</text>
      </view>
    </view>

    <!-- 描述文本 -->
    <view class="description-section">
      <text class="description-text">
        {{ agentInfo?.description }}
      </text>
    </view>
  </view>
</template>

<script lang="uts" setup>
  import type { AgentDetailDto } from "@/types/interfaces/agent";
  import { useI18n } from "@/utils/i18n";

  const { t } = useI18n();
  // 组件逻辑
  interface Props {
    agentInfo: AgentDetailDto;
  }

  // 接收组件属性，设置默认值
  const props = withDefaults(defineProps<Props>(), {});

  const authorInitial = computed(() => {
    const name =
      props.agentInfo?.publishUser?.nickName ||
      props.agentInfo?.publishUser?.userName ||
      "";
    const first = String(name).trim().charAt(0);
    return first || "#";
  });
</script>

<style lang="scss" scoped>
  // 变量定义
  $primary-color: #15171f;
  $secondary-color: rgba(21, 23, 31, 0.7);
  $muted-color: rgba(21, 23, 31, 0.5);
  $accent-color: #6366f1;
  $bg-primary: #fff;
  $bg-avatar: #fff3cd;
  $bg-author: #dadbff;

  // 阴影层级
  $shadow-light: 0 2rpx 8rpx rgba(232, 229, 255, 0.6);
  $shadow-heavy: 0 4rpx 12rpx rgba(255, 243, 205, 0.4);

  .more-info-container {
    padding: 40rpx 32rpx;
    background-color: $bg-primary;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    border-radius: 16rpx;

    .avatar-section {
      margin-bottom: 32rpx;

      .avatar-wrapper {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        background-color: $bg-avatar;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        z-index: 2;
        box-shadow: $shadow-heavy;
        position: relative;

        .avatar {
          width: 106%;
          height: 106%;
          position: absolute;
          left: -3%;
          top: -3%;
        }
      }
    }

    .title-section {
      margin-bottom: 24rpx;
      width: 100%;

      .title {
        font-size: 48rpx;
        font-weight: 600;
        color: $primary-color;
        line-height: 64rpx;
        text-align: center;
      }
    }

    .author-section {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-bottom: 32rpx;
      gap: 12rpx;

      .author-label {
        font-size: 28rpx;
        line-height: 44rpx;
        color: $muted-color;
      }

      .author-avatar {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        background-color: $bg-author;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        box-shadow: $shadow-light;

        .author-initial {
          font-size: 24rpx;
          color: $accent-color;
          font-weight: 500;
        }
      }

      .author-name {
        font-size: 28rpx;
        line-height: 44rpx;
        color: $primary-color;
      }
    }

    .stats-section {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 48rpx;
      margin-bottom: 40rpx;
      position: relative;
      z-index: 1;
      padding: 24rpx 32rpx;
      border-radius: 12rpx;

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

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

        .stat-number {
          font-size: 32rpx;
          line-height: 32rpx;
          color: $muted-color;
          font-weight: 500;
        }
      }
    }

    .description-section {
      // max-width: 600rpx;

      .description-text {
        font-size: 28rpx;
        line-height: 44rpx;
        color: $secondary-color;
        text-align: center;
      }
    }
  }
</style>