chore: initialize qiming workspace repository

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

@@ -0,0 +1,204 @@
+<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>