20260831223203

code/link-site/link-nuxt/app/pages/news/index.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { articles, articleCategories, getCompany } from '~/data/mock'
+
+const activeCategory = ref('')
+
+const sorted = computed(() =>
+  [...articles].sort((a, b) => b.date.localeCompare(a.date))
+)
+
+const filtered = computed(() =>
+  activeCategory.value
+    ? sorted.value.filter(a => a.category === activeCategory.value)
+    : sorted.value
+)
+
+useSeoMeta({
+  title: '资讯 - 链通物流',
+  description: '物流行业运价走势、航线动态与企业实操案例分享，来自平台企业的真实内容。'
+})
+</script>
+
+<template>
+  <UPage>
+    <UPageHeader
+      headline="资讯"
+      title="行业动态与企业分享"
+      description="运价走势、航线动态、实操案例，来自平台物流企业的真实分享。"
+    />
+
+    <UPageBody>
+      <UContainer>
+        <!-- 分类筛选 -->
+        <div class="flex flex-wrap gap-2 mb-6">
+          <UButton
+            label="全部"
+            :color="activeCategory === '' ? 'primary' : 'neutral'"
+            :variant="activeCategory === '' ? 'soft' : 'ghost'"
+            size="sm"
+            @click="activeCategory = ''"
+          />
+          <UButton
+            v-for="category in articleCategories"
+            :key="category"
+            :label="category"
+            :color="activeCategory === category ? 'primary' : 'neutral'"
+            :variant="activeCategory === category ? 'soft' : 'ghost'"
+            size="sm"
+            @click="activeCategory = category"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <ArticleCard
+            v-for="article in filtered"
+            :key="article.id"
+            :article="article"
+            :company="getCompany(article.companySlug)"
+            show-company
+          />
+        </div>
+
+        <div class="h-12" />
+      </UContainer>
+    </UPageBody>
+  </UPage>
+</template>