hanye-website/pages/support/faq.vue

<template>
  <div class="min-h-screen bg-gray-900">
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-16">
        <div class="animate-spin h-8 w-8 border-2 border-blue-400 border-t-transparent rounded-full"></div>
      </div>

      <div v-else>
        <!-- 面包屑导航 -->
        <div class="bg-gray-800 border-b border-gray-700">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <nav class="flex items-center space-x-2 text-sm text-gray-400">
              <nuxt-link
                :to="`${homepagePath}/`"
                class="hover:text-blue-400 transition-colors duration-200"
              >
                {{ t("common.home") }}
              </nuxt-link>
              <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
              <nuxt-link
                :to="`${homepagePath}/support`"
                class="hover:text-blue-400 transition-colors duration-200"
              >
                {{ t("support.title") }}
              </nuxt-link>
              <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
              <span class="text-gray-200 font-medium">{{ t("support.faq.title") }}</span>
            </nav>
          </div>
        </div>

        <!-- 页面头部 -->
        <div class="bg-gray-800">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="text-center">
              <div class="flex items-center justify-center mb-6">
                <div class="w-12 h-12 bg-blue-500/20 text-blue-400 rounded-lg flex items-center justify-center mr-4">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                </div>
                <h1 class="text-3xl md:text-4xl font-bold text-white">
                  {{ t("support.faq.title") }}
                </h1>
              </div>
              <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                {{ t("support.faq.description") }}
              </p>
            </div>
          </div>
        </div>

        <!-- FAQ内容区域 -->
        <div class="bg-gray-900">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="bg-gray-800 rounded-lg shadow-lg border border-gray-700 overflow-hidden">
              <FaqContent />
            </div>
          </div>
        </div>

        <!-- 底部操作区域 -->
        <div class="bg-gray-800 border-t border-gray-700">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="flex flex-col sm:flex-row items-center justify-between">
              <div class="mb-4 sm:mb-0">
                <p class="text-gray-400 text-sm">
                  没有找到您需要的答案？我们的技术支持团队随时为您提供帮助。
                </p>
              </div>
              <div class="flex flex-col sm:flex-row gap-3">
                <nuxt-link
                  :to="`${homepagePath}/support`"
                  class="inline-flex items-center px-4 py-2 border border-gray-600 text-sm font-medium rounded-md text-gray-300 bg-gray-700 hover:bg-gray-600 transition-colors duration-200"
                >
                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                  </svg>
                  {{ t("support.backToSupport") }}
                </nuxt-link>
                <nuxt-link
                  :to="`${homepagePath}/contact`"
                  class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
                >
                  <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                  </svg>
                  联系技术支持
                </nuxt-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * FAQ详情页面
 * 专业的常见问题解答页面
 */
import { useErrorHandler } from "~/composables/useErrorHandler";

const { error, isLoading } = useErrorHandler();
const { t, locale } = useI18n();

// 计算首页路径
const homepagePath = computed(() => {
  return locale.value === "zh" ? "" : `/${locale.value}`;
});

// SEO优化
useHead({
  title: t("support.faq.title") + " - " + t("support.title") + " - Hanye",
  meta: [
    {
      name: "description",
      content: t("faq.description"),
    },
    {
      name: "keywords",
      content: t("faq.keywords"),
    },
  ],
});
</script>

<style scoped>
/* 过渡效果 */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 {
  transition-duration: 200ms;
}

/* 悬停效果 */
.hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

.hover\:bg-gray-600:hover {
  background-color: #4b5563;
}

.hover\:text-blue-400:hover {
  color: #60a5fa;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .flex-col {
    align-items: stretch;
  }
  
  .flex-col > * {
    width: 100%;
    justify-content: center;
  }
}
</style>