20260831223203

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { Company } from '~/data/mock'
+
+const props = defineProps<{
+  company: Company
+}>()
+
+const route = useRoute()
+
+// 企业空间的纯导航（平台导航收敛为左端一个弱化入口，栏内不显示公司信息）
+const tabs = computed(() => [
+  { label: '主页', to: `/company/${props.company.slug}` },
+  { label: '关于', to: `/company/${props.company.slug}/about` },
+  { label: '服务', to: `/company/${props.company.slug}/services` },
+  { label: '新闻', to: `/company/${props.company.slug}/articles` },
+  { label: '联系', to: `/company/${props.company.slug}/contact` }
+])
+
+const homePath = computed(() => `/company/${props.company.slug}`)
+
+function isActive(tab: { to: string }): boolean {
+  if (tab.to === homePath.value) {
+    return route.path === homePath.value
+  }
+  return route.path.startsWith(tab.to)
+}
+</script>
+
+<template>
+  <div class="sticky top-0 z-50 border-b border-default bg-elevated/90 backdrop-blur">
+    <UContainer class="max-w-6xl">
+      <div class="flex items-center justify-between gap-4 h-14">
+        <!-- 平台入口：极简弱化，仅一个返回平台的低调入口，让企业页更“纯” -->
+        <div class="flex items-center shrink-0">
+          <UButton
+            to="/"
+            icon="i-lucide-ship"
+            label="链通物流"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+          />
+        </div>
+
+        <!-- 企业菜单：纯导航，栏内不显示公司信息 -->
+        <nav class="flex gap-1 overflow-x-auto">
+          <NuxtLink
+            v-for="tab in tabs"
+            :key="tab.to"
+            :to="tab.to"
+            class="flex items-center gap-1.5 px-3.5 py-3 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition-colors"
+            :class="isActive(tab)
+              ? 'border-primary text-primary'
+              : 'border-transparent text-muted hover:text-default hover:border-muted'"
+          >
+            {{ tab.label }}
+          </NuxtLink>
+        </nav>
+      </div>
+    </UContainer>
+  </div>
+</template>