You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
5.8 KiB
153 lines
5.8 KiB
<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>
|