329 lines
18 KiB
Vue
329 lines
18 KiB
Vue
<template>
|
||
<div class="page">
|
||
<!-- Hero -->
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-slate-900 via-orange-950 to-amber-900 text-white">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div class="absolute -top-1/2 -right-1/4 w-[800px] h-[800px] rounded-full bg-orange-500/20 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/2 -left-1/4 w-[600px] h-[600px] rounded-full bg-amber-500/15 blur-3xl"></div>
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[900px] rounded-full bg-red-500/10 blur-3xl"></div>
|
||
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
|
||
<div class="absolute top-20 left-20 w-2 h-2 rounded-full bg-white/40 animate-pulse"></div>
|
||
<div class="absolute top-40 right-40 w-3 h-3 rounded-full bg-orange-300/40 animate-pulse" style="animation-delay: 0.5s"></div>
|
||
<div class="absolute bottom-32 left-1/3 w-2 h-2 rounded-full bg-amber-300/40 animate-pulse" style="animation-delay: 1s"></div>
|
||
<div class="absolute top-1/3 right-1/4 w-1.5 h-1.5 rounded-full bg-white/30 animate-pulse" style="animation-delay: 1.5s"></div>
|
||
</div>
|
||
<div class="relative mx-auto max-w-screen-xl px-4 py-20 md:py-28">
|
||
<div class="grid items-center gap-10 md:grid-cols-2">
|
||
<div>
|
||
<div class="mb-4 flex flex-wrap gap-2">
|
||
<a-tag color="orange" class="border-orange-300/50 bg-orange-400/20 text-orange-100">🦞 开源免费</a-tag>
|
||
<a-tag class="border-white/20 bg-white/10 text-white">315K+ GitHub Stars</a-tag>
|
||
<a-tag class="border-white/20 bg-white/10 text-white">MIT 协议</a-tag>
|
||
</div>
|
||
<h1 class="mb-2 text-4xl font-bold md:text-6xl">OpenClaw</h1>
|
||
<p class="mb-2 text-xl text-orange-200 font-medium">AI 龙虾 · 开源个人 AI 智能体框架</p>
|
||
<p class="mb-6 text-lg text-white/85 leading-relaxed">
|
||
来自 MIT 开源协议，吉祥物为太空龙虾🦞，让 AI 拥有"双手"真正执行任务，而不只是聊天。支持 30+ 平台接入、25+ 大模型切换、本地私有部署，是 2026 年最受开发者喜爱的 AI Agent 框架。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a-button type="primary" size="large" class="bg-orange-500 border-orange-500 hover:bg-orange-400" @click="navigateTo('/ai-agent')">体验 AI 智能体</a-button>
|
||
<a-button ghost size="large" class="border-white text-white hover:bg-white/10" @click="navigateTo('/contact')">联系我们</a-button>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧：吉祥物 + 数据 -->
|
||
<div class="flex flex-col items-center gap-6">
|
||
<div class="text-center">
|
||
<div class="text-9xl mb-4 drop-shadow-2xl" style="filter: drop-shadow(0 0 40px rgba(251,146,60,0.5))">🦞</div>
|
||
<p class="text-orange-200 text-sm font-medium">"去壳！去壳！"—— OpenClaw 社区口号</p>
|
||
</div>
|
||
<div class="grid grid-cols-3 gap-4 w-full">
|
||
<div v-for="stat in heroStats" :key="stat.label" class="rounded-2xl border border-white/15 bg-white/10 backdrop-blur p-4 text-center">
|
||
<div class="text-2xl font-bold text-orange-300">{{ stat.value }}</div>
|
||
<div class="text-xs text-white/70 mt-1">{{ stat.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心理念 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-b from-amber-50 to-white">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="text-center mb-12">
|
||
<a-tag color="orange" class="mb-3">核心理念</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-3">不只是聊天，而是真正干活</h2>
|
||
<p class="text-slate-500 max-w-2xl mx-auto">
|
||
传统 AI 助手停留在问答层面，OpenClaw 的目标是让 AI 像人一样操作电脑、执行任务、完成工作流，成为真正的"数字同事"。
|
||
</p>
|
||
</div>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div v-for="idea in coreIdeas" :key="idea.title"
|
||
class="rounded-2xl border border-orange-100 bg-white p-6 shadow-sm hover:shadow-md transition-shadow text-center">
|
||
<div class="text-4xl mb-4">{{ idea.emoji }}</div>
|
||
<h3 class="font-bold text-lg mb-2">{{ idea.title }}</h3>
|
||
<p class="text-slate-500 text-sm leading-relaxed">{{ idea.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 功能特性 -->
|
||
<section class="py-16 md:py-20 bg-white">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="text-center mb-12">
|
||
<a-tag color="orange" class="mb-3">功能特性</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-3">一个框架，搞定所有 AI 场景</h2>
|
||
<p class="text-slate-500">从消息接入到任务执行，OpenClaw 提供完整的 AI Agent 能力栈</p>
|
||
</div>
|
||
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||
<div v-for="feature in features" :key="feature.title"
|
||
class="group rounded-2xl border border-slate-100 bg-white p-6 shadow-sm hover:border-orange-200 hover:shadow-md transition-all">
|
||
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 text-orange-500 text-xl group-hover:bg-orange-100 transition-colors">
|
||
{{ feature.emoji }}
|
||
</div>
|
||
<h4 class="mb-2 font-semibold text-slate-800">{{ feature.title }}</h4>
|
||
<p class="text-sm text-slate-500 leading-relaxed">{{ feature.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 平台接入 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-br from-slate-50 to-orange-50">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="text-center mb-12">
|
||
<a-tag color="orange" class="mb-3">平台生态</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-3">30+ 平台，一个 AI 全覆盖</h2>
|
||
<p class="text-slate-500">在所有主流通讯平台同时部署你的 AI，一次配置，多端同步</p>
|
||
</div>
|
||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||
<div v-for="plat in platforms" :key="plat.name"
|
||
class="flex flex-col items-center gap-2 rounded-2xl border border-slate-100 bg-white py-5 px-3 shadow-sm hover:border-orange-300 hover:shadow-md transition-all cursor-default">
|
||
<span class="text-3xl">{{ plat.emoji }}</span>
|
||
<span class="text-xs text-slate-600 font-medium text-center">{{ plat.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 模型支持 -->
|
||
<section class="py-16 md:py-20 bg-white">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid items-center gap-12 md:grid-cols-2">
|
||
<div>
|
||
<a-tag color="orange" class="mb-3">模型生态</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-4">25+ 大模型，随时切换</h2>
|
||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||
OpenClaw 支持所有主流大模型，无论是云端 API 还是本地部署，都能无缝接入。模型之间可以按需切换，不被任何厂商绑定。
|
||
</p>
|
||
<div class="space-y-3">
|
||
<div v-for="m in modelGroups" :key="m.category" class="flex items-start gap-3">
|
||
<span class="mt-0.5 flex-shrink-0 text-orange-500">✦</span>
|
||
<div>
|
||
<span class="font-medium text-slate-800">{{ m.category }}：</span>
|
||
<span class="text-slate-500 text-sm">{{ m.models }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div v-for="m in modelCards" :key="m.name"
|
||
class="rounded-2xl border border-slate-100 bg-gradient-to-br p-5 shadow-sm hover:shadow-md transition-shadow"
|
||
:class="m.bg">
|
||
<div class="text-2xl mb-2">{{ m.emoji }}</div>
|
||
<div class="font-semibold text-slate-800">{{ m.name }}</div>
|
||
<div class="text-xs text-slate-500 mt-1">{{ m.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 我们与 OpenClaw 的关系 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-r from-orange-500 to-amber-500 text-white">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid items-center gap-10 md:grid-cols-2">
|
||
<div>
|
||
<div class="mb-3 text-4xl">🤝</div>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-4">我们深度集成 OpenClaw</h2>
|
||
<p class="text-orange-100 mb-4 leading-relaxed">
|
||
葳溯科技是 OpenClaw 官方认可的国内生态合作伙伴，我们的 AI 智能体平台深度集成了 OpenClaw 框架的核心能力，让企业无需自建 AI 基础设施，即可享受 OpenClaw 完整生态。
|
||
</p>
|
||
<ul class="space-y-2 mb-6">
|
||
<li v-for="point in integrationPoints" :key="point" class="flex items-center gap-2 text-orange-50">
|
||
<span class="text-white">✓</span>{{ point }}
|
||
</li>
|
||
</ul>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a-button size="large" class="bg-white text-orange-600 border-white font-semibold hover:bg-white/90" @click="navigateTo('/ai-agent')">立即体验 AI 智能体</a-button>
|
||
<a-button ghost size="large" class="border-white text-white hover:bg-white/10" @click="navigateTo('/flow')">立即开通</a-button>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-2 gap-4">
|
||
<div v-for="card in integrationCards" :key="card.title"
|
||
class="rounded-2xl bg-white/15 border border-white/20 p-5 backdrop-blur">
|
||
<div class="text-2xl mb-3">{{ card.emoji }}</div>
|
||
<div class="font-semibold mb-1">{{ card.title }}</div>
|
||
<div class="text-sm text-orange-100">{{ card.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="relative overflow-hidden bg-slate-900 text-white py-20">
|
||
<!-- 背景装饰 -->
|
||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||
<div class="absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full bg-orange-500/10 blur-3xl"></div>
|
||
<div class="absolute -bottom-40 -left-40 w-[500px] h-[500px] rounded-full bg-amber-500/10 blur-3xl"></div>
|
||
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.015)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.015)_1px,transparent_1px)] bg-[size:60px_60px]"></div>
|
||
</div>
|
||
|
||
<div class="relative mx-auto max-w-screen-xl px-4">
|
||
<!-- 顶部数据条 -->
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-16">
|
||
<div v-for="s in ctaStats" :key="s.label"
|
||
class="rounded-2xl border border-white/10 bg-white/5 px-6 py-5 text-center">
|
||
<div class="text-3xl font-bold text-orange-400 mb-1">{{ s.value }}</div>
|
||
<div class="text-sm text-slate-400">{{ s.label }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 中间引用语 -->
|
||
<div class="text-center mb-12">
|
||
<blockquote class="text-orange-300 text-lg italic mb-6 max-w-2xl mx-auto">
|
||
"去壳！去壳！—— 让 AI 突破对话的壳，真正进入工作流"
|
||
</blockquote>
|
||
<div class="text-5xl mb-6">🦞</div>
|
||
<h2 class="text-3xl font-bold md:text-4xl mb-4">
|
||
现在就加入 OpenClaw 生态
|
||
</h2>
|
||
<p class="text-slate-400 mb-10 max-w-xl mx-auto text-lg leading-relaxed">
|
||
基于我们的平台，5 分钟接入 OpenClaw 完整能力，无需搭建基础设施，开箱即用，按需扩展。
|
||
</p>
|
||
<div class="flex justify-center flex-wrap gap-4">
|
||
<a-button type="primary" size="large"
|
||
class="bg-orange-500 border-orange-500 hover:bg-orange-400 h-12 px-8 text-base font-semibold"
|
||
@click="navigateTo('/ai-agent')">
|
||
🤖 立即体验 AI 智能体
|
||
</a-button>
|
||
<a-button size="large"
|
||
class="bg-white/10 border-white/20 text-white hover:bg-white/20 h-12 px-8 text-base"
|
||
@click="navigateTo('/flow')">
|
||
🚀 立即开通
|
||
</a-button>
|
||
<a-button ghost size="large"
|
||
class="border-slate-600 text-slate-400 hover:border-orange-400 hover:text-orange-300 h-12 px-8"
|
||
@click="navigateTo('/contact')">
|
||
预约演示
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部特性列表 -->
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 border-t border-white/10 pt-10">
|
||
<div v-for="tip in ctaTips" :key="tip" class="flex items-center gap-2 text-slate-400 text-sm">
|
||
<span class="text-orange-500 flex-shrink-0">✓</span>
|
||
<span>{{ tip }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
useHead({ title: 'OpenClaw 生态 - AI 龙虾开源框架' })
|
||
definePageMeta({ layout: 'default' })
|
||
|
||
const heroStats = [
|
||
{ value: '315K+', label: 'GitHub Stars' },
|
||
{ value: '30+', label: '平台接入' },
|
||
{ value: '25+', label: '模型支持' },
|
||
]
|
||
|
||
const coreIdeas = [
|
||
{ emoji: '🎯', title: '任务驱动', desc: '不是问答机器人，而是能接受任务指令、自主规划步骤、独立完成复杂工作的 AI 同事' },
|
||
{ emoji: '🔓', title: '完全开源', desc: 'MIT 协议，代码完全公开，无任何商业限制，可自由修改、私有部署、二次开发' },
|
||
{ emoji: '🔒', title: '隐私优先', desc: '运行在你自己的设备上，数据不经过任何第三方服务器，企业敏感数据完全安全' },
|
||
]
|
||
|
||
const features = [
|
||
{ emoji: '🌐', title: '多平台无感接入', desc: '一次部署，同时在 WhatsApp、飞书、企业微信、Telegram 等 30+ 平台运行，统一管理' },
|
||
{ emoji: '🧠', title: '多模型自由切换', desc: '支持 Claude、GPT-4、DeepSeek、Gemini、Ollama 等 25+ 模型，按场景按成本自由选择' },
|
||
{ emoji: '⚡', title: '真正执行任务', desc: '内置浏览器控制、文件读写、代码执行、API 调用能力，AI 能像人一样操作电脑' },
|
||
{ emoji: '🔧', title: 'MCP 工具扩展', desc: '支持 Model Context Protocol，可接入任意第三方工具，生态极度丰富' },
|
||
{ emoji: '⏰', title: '定时任务调度', desc: '设置 Cron 表达式，让 AI 定时自动执行任务，无需人工干预' },
|
||
{ emoji: '📚', title: 'RAG 知识库', desc: '内置 Retrieval-Augmented Generation，上传文档后 AI 即可精准回答专业问题' },
|
||
{ emoji: '🔄', title: '工作流自动化', desc: '可视化配置多步骤工作流，AI 自动按顺序执行，替代重复性人工操作' },
|
||
{ emoji: '🏠', title: '本地私有部署', desc: '完全在自己服务器上运行，零数据出境，满足金融/医疗/政务等高安全要求' },
|
||
{ emoji: '🌍', title: '中文生态友好', desc: '完整中文文档，对接飞书、企业微信、钉钉、微信公众号等国内主流平台' },
|
||
]
|
||
|
||
const platforms = [
|
||
{ emoji: '💬', name: 'WhatsApp' },
|
||
{ emoji: '✈️', name: 'Telegram' },
|
||
{ emoji: '🎮', name: 'Discord' },
|
||
{ emoji: '🐦', name: 'Slack' },
|
||
{ emoji: '📘', name: '飞书' },
|
||
{ emoji: '💼', name: '企业微信' },
|
||
{ emoji: '🔔', name: '钉钉' },
|
||
{ emoji: '🌐', name: '微信公众号' },
|
||
{ emoji: '📱', name: '微信小程序' },
|
||
{ emoji: '📧', name: 'Email' },
|
||
{ emoji: '🔗', name: 'Webhook' },
|
||
{ emoji: '⚙️', name: 'REST API' },
|
||
]
|
||
|
||
const modelGroups = [
|
||
{ category: 'OpenAI', models: 'GPT-4o、GPT-4 Turbo、o1、o3 全系列' },
|
||
{ category: 'Anthropic', models: 'Claude 3.5 Sonnet、Claude 3 Opus、Claude 3 Haiku' },
|
||
{ category: '国产模型', models: 'DeepSeek V3/R1、通义千问、文心一言、讯飞星火' },
|
||
{ category: '本地模型', models: 'Ollama（Llama、Mistral、Qwen 等）完整支持' },
|
||
{ category: 'Google', models: 'Gemini 2.0 Flash、Gemini 2.0 Pro' },
|
||
]
|
||
|
||
const modelCards = [
|
||
{ emoji: '🤖', name: 'GPT-4o', desc: '推理能力强，多模态', bg: 'from-green-50 to-emerald-50' },
|
||
{ emoji: '🧠', name: 'Claude 3.5', desc: '长上下文，代码优秀', bg: 'from-orange-50 to-amber-50' },
|
||
{ emoji: '🇨🇳', name: 'DeepSeek', desc: '国产开源，性价比高', bg: 'from-blue-50 to-indigo-50' },
|
||
{ emoji: '🏠', name: 'Ollama', desc: '本地运行，完全离线', bg: 'from-purple-50 to-violet-50' },
|
||
]
|
||
|
||
const integrationPoints = [
|
||
'无需自建 AI 基础设施，开箱即用',
|
||
'企业级多租户隔离，数据安全合规',
|
||
'可视化工作流配置，无需写代码',
|
||
'与官网、商城、小程序无缝联动',
|
||
'7×24 小时专业技术支持',
|
||
]
|
||
|
||
const integrationCards = [
|
||
{ emoji: '🚀', title: '5 分钟接入', desc: '填写配置即可，无需了解底层技术细节' },
|
||
{ emoji: '🏢', title: '企业级托管', desc: '我们负责运维，您专注业务' },
|
||
{ emoji: '🔌', title: '生态全兼容', desc: 'OpenClaw 所有插件和工具均可使用' },
|
||
{ emoji: '📊', title: '数据看板', desc: '对话量、任务完成率等数据实时可见' },
|
||
]
|
||
|
||
const ctaStats = [
|
||
{ value: '315K+', label: 'GitHub Stars' },
|
||
{ value: '5 分钟', label: '接入时间' },
|
||
{ value: '30+', label: '支持平台' },
|
||
{ value: '7×24h', label: '技术支持' },
|
||
]
|
||
|
||
const ctaTips = [
|
||
'无需搭建基础设施',
|
||
'企业级数据隔离',
|
||
'按量计费，随时扩容',
|
||
'OpenClaw 生态全兼容',
|
||
'支持私有化部署',
|
||
'中文文档与社区',
|
||
'免费试用 14 天',
|
||
'专属客户成功经理',
|
||
]
|
||
</script>
|