components/layout/AppFooter.vue

<script setup lang="ts">
import { Github, Twitter, Mail } from 'lucide-vue-next'

/**
 * 页脚组件
 * 展示版权信息和社交链接
 */
const currentYear = new Date().getFullYear()
</script>

<template>
  <footer class="bg-gray-50 border-t border-gray-200 pt-12 pb-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
        <!-- 品牌简介 -->
        <div class="col-span-1 md:col-span-2">
          <div class="flex items-center space-x-2 text-primary mb-4">
            <span class="text-xl font-bold">Nuxt 展示</span>
          </div>
          <p class="text-gray-500 max-w-sm">
            基于 Nuxt.js 的现代化响应式展示应用。提供快速、安全且可扩展的前端解决方案，助力企业展示核心价值。
          </p>
        </div>

        <!-- 快速导航 -->
        <div>
          <h4 class="text-gray-900 font-bold mb-4">导航</h4>
          <ul class="space-y-2">
            <li><NuxtLink to="/" class="text-gray-500 hover:text-primary transition-colors">首页</NuxtLink></li>
            <li><NuxtLink to="/about" class="text-gray-500 hover:text-primary transition-colors">关于</NuxtLink></li>
            <li><NuxtLink to="/contact" class="text-gray-500 hover:text-primary transition-colors">联系</NuxtLink></li>
          </ul>
        </div>

        <!-- 社交媒体 -->
        <div>
          <h4 class="text-gray-900 font-bold mb-4">关注我们</h4>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-primary transition-colors" aria-label="Github">
              <Github class="w-6 h-6" />
            </a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors" aria-label="Twitter">
              <Twitter class="w-6 h-6" />
            </a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors" aria-label="Email">
              <Mail class="w-6 h-6" />
            </a>
          </div>
        </div>
      </div>

      <!-- 版权信息 -->
      <div class="border-t border-gray-200 pt-8 text-center">
        <p class="text-gray-400 text-sm">
          &copy; {{ currentYear }} Nuxt 展示应用. 保留所有权利.
        </p>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.text-primary {
  color: #1890ff;
}
.hover\:text-primary:hover {
  color: #1890ff;
}
</style>