MOSE-Official-Website-20250712/src/components/technology/ArchitectureModule.vue

<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 不再使用API返回的文本数据，全部使用i18n文本

// 默认架构层级数据（当API数据不可用时使用）
const defaultLayers = [
  {
    id: 'aggregation',
    icon: 'carbon:data-share',
    title: t('architecture.layers.aggregation.title'),
    description: t('architecture.layers.aggregation.description'),
    features: [
      t('architecture.layers.aggregation.features.indexing'),
      t('architecture.layers.aggregation.features.sync'),
      t('architecture.layers.aggregation.features.storage')
    ]
  },
  {
    id: 'crosschain',
    icon: 'carbon:connect',
    title: t('architecture.layers.crosschain.title'),
    description: t('architecture.layers.crosschain.description'),
    features: [
      t('architecture.layers.crosschain.features.atomic_swap'),
      t('architecture.layers.crosschain.features.messaging'),
      t('architecture.layers.crosschain.features.privacy')
    ]
  },
  {
    id: 'routing',
    icon: 'carbon:flow',
    title: t('architecture.layers.routing.title'),
    description: t('architecture.layers.routing.description'),
    features: [
      t('architecture.layers.routing.features.algorithm'),
      t('architecture.layers.routing.features.optimization'),
      t('architecture.layers.routing.features.monitoring')
    ]
  },
  {
    id: 'application',
    icon: 'carbon:application',
    title: t('architecture.layers.application.title'),
    description: t('architecture.layers.application.description'),
    features: [
      t('architecture.layers.application.features.sdk'),
      t('architecture.layers.application.features.tools'),
      t('architecture.layers.application.features.components')
    ]
  }
];

// 最终使用的架构层级数据，全部使用i18n
const architectureLayers = computed(() => {
  return defaultLayers;
});
</script>

<template>
  <section class="py-16 px-6 md:px-12 lg:px-24">
    <div class="container mx-auto">
      <h2 class="text-2xl md:text-3xl font-bold text-text mb-6 text-center wow animate__animated animate__fadeInUp animate__duration-fast">
        {{ t('architecture.title') }}
      </h2>
      
      <p class="max-w-3xl mx-auto text-center text-text-secondary mb-12 wow animate__animated animate__fadeIn animate__delay-xs animate__duration-fast">
        {{ t('architecture.subtitle') }}
      </p>
      
      <!-- 架构图示 - 桌面端 -->
      <div class="hidden md:block mb-12 relative">
        <!-- 连接线条 -->
        <div class="absolute top-1/2 left-0 w-full h-1 bg-primary-light opacity-50 transform -translate-y-1/2 z-0"></div>
        
        <!-- 架构层级 -->
        <div class="flex justify-between relative z-10">
          <div 
            v-for="(layer, index) in architectureLayers" 
            :key="layer.id"
            class="w-1/4 px-4 wow animate__animated animate__fadeIn animate__duration-fast"
            :class="{
              'animate__delay-xs': index === 1,
              'animate__delay-sm': index === 2,
              'animate__delay-md': index === 3
            }"
          >
            <div class="bg-background-light rounded-xl p-6 shadow-card hover:shadow-lg transition-all duration-300 h-full relative">
              <!-- 顶部装饰图标 -->
              <div class="absolute top-0 left-1/2 w-10 h-10 rounded-full bg-primary flex items-center justify-center transform -translate-x-1/2 -translate-y-1/2">
                <Icon :icon="layer.icon" width="20" height="20" class="text-white" />
              </div>
              
              <h3 class="text-xl font-bold text-text mb-4 text-center pt-2">{{ layer.title }}</h3>
              <p class="text-text-secondary  text-center mb-4">{{ layer.description }}</p>
              
              <!-- 特点列表 -->
              <ul v-if="layer.features && layer.features.length > 0" class="space-y-2">
                <li 
                  v-for="(feature, featureIndex) in layer.features" 
                  :key="`${layer.id}-feature-${featureIndex}`"
                  class="flex items-center"
                >
                  <Icon icon="carbon:dot-mark" class="mr-2 text-primary-light" />
                  <span>{{ feature }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 架构图示 - 移动端 -->
      <div class="md:hidden space-y-6">
        <div 
          v-for="(layer, index) in architectureLayers" 
          :key="`mobile-${layer.id}`"
          class="bg-background-light rounded-xl p-6 shadow-card wow animate__animated animate__fadeInUp animate__duration-fast"
          :class="{
            'animate__delay-xs': index === 1,
            'animate__delay-sm': index === 2,
            'animate__delay-md': index === 3
          }"
        >
          <div class="flex items-center mb-4">
            <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-4">
              <Icon :icon="layer.icon" width="20" height="20" class="text-white" />
            </div>
            <h3 class="text-xl font-bold text-text">{{ layer.title }}</h3>
          </div>
          
          <p class="text-text-secondary mb-4">{{ layer.description }}</p>
          
          <!-- 特点列表 -->
          <ul v-if="layer.features && layer.features.length > 0" class="space-y-2">
            <li 
              v-for="(feature, featureIndex) in layer.features" 
              :key="`${layer.id}-mobile-feature-${featureIndex}`"
              class="flex items-center"
            >
              <Icon icon="carbon:dot-mark" class="mr-2 text-primary-light" />
              <span>{{ feature }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>