20260831223203

code/link-site/link-nuxt/app/pages/news/[id].vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { getArticle, getCompany, getLatestArticles } from '~/data/mock'
+
+const route = useRoute()
+
+const article = getArticle(route.params.id as string)
+
+if (!article) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: '文章不存在',
+    fatal: true
+  })
+}
+
+const company = getCompany(article.companySlug)
+const related = getLatestArticles(4).filter(a => a.id !== article.id).slice(0, 3)
+
+useSeoMeta({
+  title: `${article.title} - 链通物流`,
+  description: article.summary,
+  ogTitle: article.title,
+  ogDescription: article.summary,
+  articlePublishedTime: article.date
+})
+</script>
+
+<template>
+  <UPage>
+    <UPageBody>
+      <UContainer class="max-w-3xl">
+        <UBreadcrumb
+          :items="[{
+            label: '资讯',
+            to: '/news'
+          }, {
+            label: article.category
+          }]"
+          class="mb-6"
+        />
+
+        <article v-if="article">
+          <!-- 文章头部 -->
+          <div class="flex items-center gap-2 mb-3 text-sm text-dimmed">
+            <UBadge
+              :color="article.category === '行业资讯' ? 'primary' : article.category === '案例分享' ? 'info' : 'neutral'"
+              variant="soft"
+            >
+              {{ article.category }}
+            </UBadge>
+            <span class="flex items-center gap-1">
+              <UIcon
+                name="i-lucide-calendar"
+                class="size-4"
+              />
+              {{ article.date }}
+            </span>
+            <span class="flex items-center gap-1">
+              <UIcon
+                name="i-lucide-clock"
+                class="size-4"
+              />
+              {{ article.readMinutes }} 分钟阅读
+            </span>
+          </div>
+
+          <h1 class="text-2xl sm:text-3xl font-bold text-highlighted leading-tight mb-8">
+            {{ article.title }}
+          </h1>
+
+          <!-- 内容 -->
+          <div class="space-y-5 text-default leading-relaxed">
+            <p
+              v-for="(paragraph, i) in article.content"
+              :key="i"
+            >
+              {{ paragraph }}
+            </p>
+          </div>
+
+          <USeparator class="my-10" />
+
+          <!-- 来源企业 -->
+          <NuxtLink
+            v-if="company"
+            :to="`/company/${company.slug}`"
+            class="flex items-center gap-3 rounded-lg bg-elevated ring ring-default hover:ring-primary/50 p-4 transition-colors"
+          >
+            <CompanyLogo
+              :name="company.name"
+              :color="company.color"
+            />
+            <div class="flex-1 min-w-0">
+              <p class="text-sm text-dimmed">发布自</p>
+              <p class="font-semibold text-default truncate">{{ company.name }}</p>
+            </div>
+            <UBadge
+              v-if="company.verified"
+              icon="i-lucide-badge-check"
+              color="primary"
+              variant="soft"
+            >
+              认证企业
+            </UBadge>
+            <UIcon
+              name="i-lucide-arrow-right"
+              class="size-5 text-muted"
+            />
+          </NuxtLink>
+
+          <!-- 相关阅读 -->
+          <div
+            v-if="related.length"
+            class="mt-10"
+          >
+            <h2 class="font-semibold text-highlighted mb-4">
+              相关阅读
+            </h2>
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <ArticleCard
+                v-for="rel in related"
+                :key="rel.id"
+                :article="rel"
+                :company="getCompany(rel.companySlug)"
+              />
+            </div>
+          </div>
+        </article>
+
+        <div class="h-12" />
+      </UContainer>
+    </UPageBody>
+  </UPage>
+</template>

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>