gxwebsoft/tiantian-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化2

Browse Source
This commit is contained in:
赵忠林
2026-04-08 17:10:58 +08:00
commit 4986d90eb9
532 changed files with 112617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

326
app/pages/index.vue Normal file
View File

@@ -0,0 +1,326 @@
<template>
<div>
<section class="relative overflow-hidden bg-gradient-to-b from-gray-950 to-gray-900 text-white">
<div class="pointer-events-none absolute left-1/2 top-[-140px] h-[420px] w-[900px] -translate-x-1/2 rounded-full bg-green-500/20 blur-3xl" />
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:py-24 relative">
<a-tag color="orange" class="mb-6">
<span class="flex items-center gap-1">
<span class="text-lg">🦞</span>
{{ $t('home.heroTag') }}
</span>
</a-tag>
<a-typography-title :level="1" class="!text-white !mb-4">
{{ $t('home.heroTitle') }}
</a-typography-title>
<a-typography-paragraph class="!text-gray-300 !text-lg !mb-8">
{{ $t('home.heroDesc') }}
</a-typography-paragraph>
<a-space size="middle" wrap>
<a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.bookDemo') }}</a-button>
<a-button size="large" @click="navigateTo('/flow')">{{ $t('home.viewFlow') }}</a-button>
<a-button size="large" @click="navigateTo('/deploy')">{{ $t('home.deploy') }}</a-button>
</a-space>
<a-row class="mt-10" :gutter="[16, 16]">
<a-col :xs="12" :md="6">
<!-- <a-statistic title="平台定位" value="SaaS" />-->
</a-col>
<a-col :xs="12" :md="6">
<!-- <a-statistic title="交付模式" value="私有化" />-->
</a-col>
<a-col :xs="12" :md="6">
<!-- <a-statistic title="能力" value="模板/插件" />-->
</a-col>
<a-col :xs="12" :md="6">
<!-- <a-statistic title="开通" value="自动化" />-->
</a-col>
</a-row>
<!-- 平台介绍视频 -->
<div class="mt-12 rounded-2xl overflow-hidden shadow-2xl border border-gray-700/50 bg-gray-900/50">
<ClientOnly>
<video
class="w-full aspect-video"
:src="videoSrc"
poster="/images/video-poster.jpg"
controls
preload="metadata"
playsinline
@error="handleVideoError"
>
<p class="text-white text-center py-8">{{ $t('home.videoNotSupported') }}</p>
</video>
<template #fallback>
<div class="w-full aspect-video bg-gray-800 flex items-center justify-center">
<span class="text-gray-400">{{ $t('common.loading') }}</span>
</div>
</template>
</ClientOnly>
</div>
</div>
</section>
<!-- OpenClaw AI 智能体生态 -->
<section class="relative overflow-hidden bg-gradient-to-r from-orange-50 via-orange-100/50 to-orange-50">
<div class="pointer-events-none absolute left-1/4 top-0 h-[300px] w-[300px] rounded-full bg-orange-200/50 blur-3xl" />
<div class="pointer-events-none absolute right-1/4 bottom-0 h-[200px] w-[250px] rounded-full bg-red-200/50 blur-3xl" />
<div class="mx-auto max-w-screen-xl px-4 py-16 relative">
<div class="text-center mb-10">
<div class="inline-flex items-center gap-2 px-4 py-2 bg-orange-500 rounded-full text-white text-sm font-medium mb-4">
<span class="text-xl">🦞</span>
{{ $t('home.openclawTitle') }}
</div>
<a-typography-title :level="2" class="!text-gray-900 !mb-2">
{{ $t('home.openclawSubtitle') }}
</a-typography-title>
<a-typography-paragraph class="!text-gray-600 !mb-0 !text-base">
{{ $t('home.openclawDesc') }}
</a-typography-paragraph>
</div>
<a-row :gutter="[24, 24]" class="px-4">
<a-col :xs="24" :md="8">
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
<div class="text-4xl mb-4">🔗</div>
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiPlatform') }}</div>
<div class="text-gray-600 text-sm">{{ $t('home.multiPlatformDesc') }}</div>
</div>
</a-col>
<a-col :xs="24" :md="8">
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
<div class="text-4xl mb-4">🧠</div>
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.multiModel') }}</div>
<div class="text-gray-600 text-sm">{{ $t('home.multiModelDesc') }}</div>
</div>
</a-col>
<a-col :xs="24" :md="8">
<div class="text-center p-6 rounded-xl bg-white border border-orange-200 shadow-sm hover:shadow-md hover:border-orange-300 transition-all">
<div class="text-4xl mb-4">⚡</div>
<div class="text-gray-900 font-semibold mb-2">{{ $t('home.autoWorkflow') }}</div>
<div class="text-gray-600 text-sm">{{ $t('home.autoWorkflowDesc') }}</div>
</div>
</a-col>
</a-row>
<div class="text-center mt-10">
<a-space size="middle">
<a-button type="primary" @click="navigateTo('/ai-agent')">
<span class="flex items-center gap-2">
<span>🦞</span> {{ $t('home.experienceAI') }}
</span>
</a-button>
<a-button @click="navigateTo('/openclaw')">{{ $t('common.learnMore') }}</a-button>
</a-space>
</div>
</div>
</section>
<section class="mx-auto max-w-screen-xl px-4 py-14">
<a-typography-title :level="2" class="!mb-2">{{ $t('home.productMatrix') }}</a-typography-title>
<a-typography-paragraph class="!text-gray-500 !mb-8">
{{ $t('home.productMatrixDesc') }}
</a-typography-paragraph>
<a-row :gutter="[16, 16]">
<a-col v-for="p in products" :key="p.title" :xs="24" :md="12" :lg="8">
<a-card :title="p.title">
<template #extra>
<a-tag v-if="p.recommend" color="green">{{ $t('home.recommend') }}</a-tag>
</template>
<a-typography-paragraph class="!text-gray-600">
{{ p.desc }}
</a-typography-paragraph>
<div class="flex flex-wrap gap-2">
<a-tag v-for="t in p.tags" :key="t">{{ t }}</a-tag>
</div>
<div class="mt-5 flex justify-between items-center">
<a-tag color="green">{{ p.domain }}</a-tag>
<a-button type="primary" @click="go(p.adminUrl)">{{ $t('common.goNow') }}</a-button>
</div>
</a-card>
</a-col>
</a-row>
<div class="mt-6">
<a-button @click="navigateTo('/products')">{{ $t('home.viewAll') || $t('common.viewAll') }}</a-button>
</div>
</section>
<section class="bg-gray-50">
<div class="mx-auto max-w-screen-xl px-4 py-14">
<a-typography-title :level="2" class="!mb-2">{{ $t('home.coreCapabilities') }}</a-typography-title>
<a-typography-paragraph class="!text-gray-500 !mb-8">
{{ $t('home.coreCapabilitiesDesc') }}
</a-typography-paragraph>
<a-row :gutter="[16, 16]">
<a-col v-for="item in capabilities" :key="item.title" :xs="24" :md="12" :lg="8">
<a-card :title="item.title">
<template #extra>
<a-tag color="green">{{ item.badge }}</a-tag>
</template>
<a-typography-paragraph class="!mb-0 !text-gray-600">
{{ item.desc }}
</a-typography-paragraph>
</a-card>
</a-col>
</a-row>
</div>
</section>
<section>
<div class="mx-auto max-w-screen-xl px-4 py-14">
<a-row :gutter="[24, 24]">
<a-col :xs="24" :lg="12">
<a-typography-title :level="2" class="!mb-2">{{ $t('home.payToActivate') }}</a-typography-title>
<a-typography-paragraph class="!text-gray-600 !mb-6">
{{ $t('home.payToActivateDesc') }}
</a-typography-paragraph>
<a-button type="primary" @click="navigateTo('/flow')">{{ $t('home.viewFullFlow') }}</a-button>
</a-col>
<a-col :xs="24" :lg="12">
<a-card>
<a-steps direction="vertical" :current="-1" size="small">
<a-step :title="$t('home.selectProduct')" :description="$t('home.selectProductDesc')" />
<a-step :title="$t('home.placeOrder')" :description="$t('home.placeOrderDesc')" />
<a-step :title="$t('home.createTenant')" :description="$t('home.createTenantDesc')" />
<a-step :title="$t('home.initModules')" :description="$t('home.initModulesDesc')" />
<a-step :title="$t('home.deliverOnline')" :description="$t('home.deliverOnlineDesc')" />
</a-steps>
</a-card>
</a-col>
</a-row>
</div>
</section>
<section class="bg-gray-50">
<div class="mx-auto max-w-screen-xl px-4 py-14">
<a-typography-title :level="2" class="!mb-2">{{ $t('home.templatePluginEcosystem') }}</a-typography-title>
<a-typography-paragraph class="!text-gray-500 !mb-8">
{{ $t('home.templatePluginDesc') }}
</a-typography-paragraph>
<a-tabs>
<a-tab-pane key="template" :tab="$t('home.template')">
<a-row :gutter="[16, 16]">
<a-col :xs="24" :md="12">
<a-card :title="$t('home.industryTemplate')">
<a-typography-paragraph class="!mb-0 !text-gray-600">
{{ $t('home.industryTemplateDesc') }}
</a-typography-paragraph>
</a-card>
</a-col>
<a-col :xs="24" :md="12">
<a-card :title="$t('home.deliveryStandard')">
<a-typography-paragraph class="!mb-0 !text-gray-600">
{{ $t('home.deliveryStandardDesc') }}
</a-typography-paragraph>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="plugin" :tab="$t('home.plugin')">
<a-row :gutter="[16, 16]">
<a-col :xs="24" :md="12">
<a-card :title="$t('home.capabilityExtend')">
<a-typography-paragraph class="!mb-0 !text-gray-600">
{{ $t('home.capabilityExtendDesc') }}
</a-typography-paragraph>
</a-card>
</a-col>
<a-col :xs="24" :md="12">
<a-card :title="$t('home.upgradeAuth')">
<a-typography-paragraph class="!mb-0 !text-gray-600">
{{ $t('home.upgradeAuthDesc') }}
</a-typography-paragraph>
</a-card>
</a-col>
</a-row>
</a-tab-pane>
</a-tabs>
<div class="mt-6">
<a-button @click="navigateTo('/market')">{{ $t('home.exploreMarket') }}</a-button>
</div>
</div>
</section>
<section class="bg-white">
<div class="mx-auto max-w-screen-xl px-4 py-12 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<div class="text-xl font-semibold">{{ $t('home.ctaTitle') }}</div>
<div class="mt-1 text-gray-500">{{ $t('home.ctaDesc') }}</div>
</div>
<a-space>
<a-button size="large" @click="navigateTo('/products')">{{ $t('home.viewProducts') }}</a-button>
<a-button type="primary" size="large" @click="navigateTo('/contact')">{{ $t('home.contactNow') }}</a-button>
</a-space>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { usePageSeo } from '@/composables/usePageSeo'
import { productMatrix } from '@/config/products'
const { t } = useI18n()
// 视频路径（使用 public 目录，可直接通过 URL 访问）
const videoSrc = '/videos/websopy-intro.mp4'
usePageSeo({
title: t('pageTitle.homeTitle'),
description: t('pageTitle.homeDescription')
})
const go = (url?: string) => {
if (!url) return
if (/^https?:\/\//i.test(url)) {
if (import.meta.client) window.open(url, '_blank', 'noopener,noreferrer')
return
}
return navigateTo(url)
}
// 视频加载错误处理
const handleVideoError = (e: Event) => {
console.error('视频加载失败:', e)
}
const products = productMatrix
const capabilities = [
{
title: t('home.openclawAI'),
badge: 'NEW',
desc: t('home.openclawAIDesc')
},
{
title: t('home.ragKnowledge'),
badge: 'AI',
desc: t('home.ragKnowledgeDesc')
},
{
title: t('home.saasMultiTenant'),
badge: '核心',
desc: t('home.saasMultiTenantDesc')
},
{
title: t('home.privateDeploy'),
badge: '可选',
desc: t('home.privateDeployDesc')
},
{
title: t('home.templateMarket'),
badge: '生态',
desc: t('home.templateMarketDesc')
},
{
title: t('home.autoActivate'),
badge: '交付',
desc: t('home.autoActivateDesc')
}
]
</script>