20260831223203

code/link-site/link-nuxt/app/components/ArticleCard.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { Article, Company } from '~/data/mock'
+
+const props = defineProps<{
+  article: Article
+  company?: Company
+  showCompany?: boolean
+}>()
+
+const company = computed(() => props.company ?? null)
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/news/${article.id}`"
+    class="group flex flex-col gap-2.5 rounded-lg bg-elevated ring ring-default hover:ring-primary/50 p-5 transition-colors"
+  >
+    <div class="flex items-center gap-2 text-xs text-dimmed">
+      <UBadge
+        :color="article.category === '行业资讯' ? 'primary' : article.category === '案例分享' ? 'info' : 'neutral'"
+        variant="soft"
+        size="sm"
+      >
+        {{ article.category }}
+      </UBadge>
+      <span class="flex items-center gap-1">
+        <UIcon
+          name="i-lucide-calendar"
+          class="size-3.5"
+        />
+        {{ article.date }}
+      </span>
+      <span class="flex items-center gap-1">
+        <UIcon
+          name="i-lucide-clock"
+          class="size-3.5"
+        />
+        {{ article.readMinutes }} 分钟
+      </span>
+    </div>
+
+    <h3 class="font-semibold text-default leading-snug group-hover:text-primary transition-colors">
+      {{ article.title }}
+    </h3>
+
+    <p class="text-sm text-muted line-clamp-2">{{ article.summary }}</p>
+
+    <div
+      v-if="showCompany && company"
+      class="flex items-center gap-2 mt-auto pt-1"
+    >
+      <CompanyLogo
+        :name="company.name"
+        :color="company.color"
+        size="sm"
+      />
+      <span class="text-sm text-toned truncate">{{ company.name }}</span>
+    </div>
+  </NuxtLink>
+</template>