343 lines
18 KiB
Vue
343 lines
18 KiB
Vue
<template>
|
||
<div class="page">
|
||
<!-- Hero -->
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-violet-900 via-purple-800 to-fuchsia-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-purple-500/20 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/2 -left-1/4 w-[600px] h-[600px] rounded-full bg-fuchsia-500/20 blur-3xl"></div>
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1000px] rounded-full bg-violet-500/10 blur-3xl"></div>
|
||
<!-- 网格线 -->
|
||
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_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-purple-300/30 animate-pulse" style="animation-delay: 0.5s"></div>
|
||
<div class="absolute bottom-32 left-1/3 w-2 h-2 rounded-full bg-fuchsia-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="purple" class="text-white border-white/30 bg-white/20">AI 驱动</a-tag>
|
||
<a-tag color="orange" class="border-orange-300/50 bg-orange-400/20 text-orange-100">🦞 OpenClaw 兼容</a-tag>
|
||
</div>
|
||
<h1 class="mb-4 text-3xl font-bold md:text-5xl">
|
||
AI 智能体
|
||
</h1>
|
||
<p class="mb-6 text-lg text-white/90">
|
||
基于大语言模型打造企业专属 AI 助手，兼容 OpenClaw 生态，支持知识库问答、智能客服、数据分析、自动化工作流，让 AI 成为您的得力员工。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a-button type="primary" size="large" class="bg-white text-purple-700 border-white hover:bg-white/90" @click="navigateTo('/flow')">立即体验</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="relative">
|
||
<div class="rounded-2xl border border-white/20 bg-white/10 p-6 backdrop-blur">
|
||
<div class="mb-4 flex items-center gap-3">
|
||
<div class="h-10 w-10 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-lg">🤖</div>
|
||
<div class="flex-1">
|
||
<div class="rounded-lg bg-white/20 px-3 py-2 text-sm">您好，我是您的 AI 助手，有什么可以帮您？</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4 flex items-center gap-3 justify-end">
|
||
<div class="flex-1 text-right">
|
||
<div class="rounded-lg bg-purple-500/40 px-3 py-2 text-sm inline-block text-left">帮我分析一下上个月的销售数据</div>
|
||
</div>
|
||
<div class="h-8 w-8 rounded-full bg-white/20 flex items-center justify-center text-xs">我</div>
|
||
</div>
|
||
<div class="flex items-center gap-3">
|
||
<div class="h-10 w-10 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-lg">🤖</div>
|
||
<div class="flex-1">
|
||
<div class="rounded-lg bg-white/20 px-3 py-2 text-sm">好的，正在为您分析...<br/>上月销售额 ¥128,560，环比增长 23%，主要增长来自...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- OpenClaw 介绍 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-br from-orange-50 via-amber-50 to-white overflow-hidden">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid items-center gap-12 md:grid-cols-2">
|
||
<!-- 左侧：文字介绍 -->
|
||
<div>
|
||
<div class="mb-3 flex items-center gap-2">
|
||
<span class="text-4xl">🦞</span>
|
||
<a-tag color="orange" class="text-sm font-medium">当下最热开源 AI Agent</a-tag>
|
||
</div>
|
||
<h2 class="mb-4 text-2xl font-bold md:text-3xl">
|
||
什么是 OpenClaw？
|
||
</h2>
|
||
<p class="mb-4 text-slate-600 leading-relaxed">
|
||
OpenClaw（又称"AI 龙虾"，吉祥物为一只太空龙虾）是 2026 年爆火的开源个人 AI 助手框架，GitHub 收获 <strong class="text-orange-500">310,000+</strong> Star，被开发者誉为"能真正干活的 AI 助手"。
|
||
</p>
|
||
<p class="mb-4 text-slate-600 leading-relaxed">
|
||
它运行在你自己的设备上，支持接入 WhatsApp、Telegram、Discord、飞书、企业微信、钉钉等 30 多个平台，可以自由切换 Claude、GPT-4、DeepSeek 等模型，也支持本地离线模型。
|
||
</p>
|
||
<p class="mb-6 text-slate-600 leading-relaxed">
|
||
OpenClaw 的核心理念是 <strong>"任务驱动"</strong>：不只是问答，而是真正执行任务——浏览器操作、文件处理、代码运行、工作流自动化，一气呵成。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<div v-for="tag in openclawTags" :key="tag" class="rounded-full bg-orange-100 px-4 py-1.5 text-sm font-medium text-orange-700">
|
||
{{ tag }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧：特性卡片 -->
|
||
<div class="grid gap-4 grid-cols-2">
|
||
<div v-for="item in openclawFeatures" :key="item.title"
|
||
class="rounded-2xl border border-orange-100 bg-white p-5 shadow-sm hover:shadow-md transition-shadow">
|
||
<div class="mb-3 text-2xl">{{ item.emoji }}</div>
|
||
<h4 class="mb-1 font-semibold text-slate-800">{{ item.title }}</h4>
|
||
<p class="text-xs text-slate-500 leading-relaxed">{{ item.desc }}</p>
|
||
</div>
|
||
<!-- 底部 banner -->
|
||
<div class="col-span-2 rounded-2xl bg-gradient-to-r from-orange-500 to-amber-500 p-5 text-white flex items-center justify-between">
|
||
<div>
|
||
<div class="font-bold text-lg">我们的平台已兼容 OpenClaw</div>
|
||
<div class="text-sm text-white/80 mt-1">一键接入，无缝协作，享受同等生态</div>
|
||
</div>
|
||
<span class="text-4xl">🦞</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心功能 -->
|
||
<section class="py-16 md:py-24">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<h2 class="mb-3 text-2xl font-bold md:text-3xl">核心能力</h2>
|
||
<p class="text-slate-500">开箱即用的 AI 能力，快速赋能业务</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-3">
|
||
<a-card v-for="f in features" :key="f.title" class="h-full hover:shadow-lg transition-shadow">
|
||
<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-purple-50 text-purple-600">
|
||
<component :is="f.icon" class="text-xl" />
|
||
</div>
|
||
<h3 class="mb-2 text-lg font-semibold">{{ f.title }}</h3>
|
||
<p class="text-slate-500">{{ f.desc }}</p>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 应用场景 -->
|
||
<section class="bg-slate-50 py-16 md:py-24">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<h2 class="mb-3 text-2xl font-bold md:text-3xl">应用场景</h2>
|
||
<p class="text-slate-500">AI 智能体在各行业的落地实践</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-4">
|
||
<div v-for="s in scenarios" :key="s.title" class="rounded-xl bg-white p-6 shadow-sm">
|
||
<div class="mb-4 text-3xl">{{ s.emoji }}</div>
|
||
<h3 class="mb-2 font-semibold">{{ s.title }}</h3>
|
||
<p class="text-sm text-slate-500">{{ s.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 模型能力基础设施 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white overflow-hidden relative">
|
||
<div class="pointer-events-none absolute left-0 top-0 h-full w-full overflow-hidden">
|
||
<div class="absolute -top-32 left-1/4 h-[400px] w-[400px] rounded-full bg-purple-500/10 blur-3xl"></div>
|
||
<div class="absolute bottom-0 right-1/4 h-[300px] w-[300px] rounded-full bg-fuchsia-500/10 blur-3xl"></div>
|
||
</div>
|
||
<div class="relative mx-auto max-w-screen-xl px-4">
|
||
<!-- 标题 -->
|
||
<div class="mb-12 text-center">
|
||
<div class="mb-3 inline-flex items-center gap-2 rounded-full bg-purple-500/20 px-4 py-1.5 text-sm text-purple-300">
|
||
<span>⚡</span> AI 模型能力基础设施
|
||
</div>
|
||
<h2 class="mb-3 text-2xl font-bold md:text-3xl">自建模型中转平台，灵活分配 AI 能力</h2>
|
||
<p class="mx-auto max-w-xl text-slate-400">
|
||
基于 New API 搭建的模型聚合层，统一接入 GPT、Claude、DeepSeek 等主流大模型，按需为客户分配独立 Key、控制额度、追踪用量。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 架构示意 -->
|
||
<div class="mb-10 flex flex-col items-center gap-3 md:flex-row md:justify-center">
|
||
<div class="rounded-xl border border-white/10 bg-white/5 px-6 py-4 text-center">
|
||
<div class="mb-1 text-2xl">🤖</div>
|
||
<div class="text-sm font-medium">你的客户</div>
|
||
<div class="mt-1 text-xs text-slate-400">调用 AI 能力</div>
|
||
</div>
|
||
<div class="text-slate-500 text-xl md:mx-2">→</div>
|
||
<div class="rounded-xl border border-purple-500/40 bg-purple-500/10 px-6 py-4 text-center ring-1 ring-purple-500/30">
|
||
<div class="mb-1 text-2xl">🔑</div>
|
||
<div class="text-sm font-medium text-purple-300">platform.websoft.top</div>
|
||
<div class="mt-1 text-xs text-slate-400">Key 分发 · 额度管控 · 用量统计</div>
|
||
</div>
|
||
<div class="text-slate-500 text-xl md:mx-2">→</div>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div v-for="m in modelList" :key="m" class="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-center text-xs text-slate-300">
|
||
{{ m }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 特性卡片 -->
|
||
<div class="mb-10 grid gap-4 md:grid-cols-4">
|
||
<div v-for="f in platformFeatures" :key="f.title"
|
||
class="rounded-xl border border-white/10 bg-white/5 p-5 hover:border-purple-500/40 transition-colors">
|
||
<div class="mb-3 text-2xl">{{ f.emoji }}</div>
|
||
<div class="mb-1 font-semibold text-sm">{{ f.title }}</div>
|
||
<div class="text-xs text-slate-400 leading-relaxed">{{ f.desc }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA 按钮 -->
|
||
<div class="text-center">
|
||
<a href="https://platform.websoft.top" target="_blank" rel="noopener"
|
||
class="inline-flex items-center gap-2 rounded-lg bg-purple-600 hover:bg-purple-500 px-8 py-3 text-sm font-semibold text-white transition-colors">
|
||
<span>🚀</span> 进入模型管理平台
|
||
</a>
|
||
<p class="mt-3 text-xs text-slate-500">基于 New API 开源项目自建，数据私有、完全可控</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 套餐 -->
|
||
<section class="py-16 md:py-24">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<h2 class="mb-3 text-2xl font-bold md:text-3xl">套餐与价格</h2>
|
||
<p class="text-slate-500">按调用量计费，灵活选择</p>
|
||
</div>
|
||
<div class="grid gap-6 md:grid-cols-3">
|
||
<a-card v-for="p in plans" :key="p.name" class="relative h-full">
|
||
<div v-if="p.recommended" class="absolute -top-3 left-1/2 -translate-x-1/2">
|
||
<a-tag color="purple">推荐</a-tag>
|
||
</div>
|
||
<div class="mb-4 text-center">
|
||
<h3 class="text-lg font-semibold">{{ p.name }}</h3>
|
||
<div class="mt-2 text-3xl font-bold text-purple-600">{{ p.price }}</div>
|
||
<div class="text-sm text-slate-400">{{ p.period }}</div>
|
||
</div>
|
||
<a-divider />
|
||
<ul class="space-y-3">
|
||
<li v-for="feat in p.features" :key="feat" class="flex items-start gap-2">
|
||
<CheckOutlined class="mt-0.5 text-green-500" />
|
||
<span class="text-sm text-slate-600">{{ feat }}</span>
|
||
</li>
|
||
</ul>
|
||
<a-button :type="p.recommended ? 'primary' : 'default'" block class="mt-6" @click="navigateTo('/flow')">
|
||
立即开通
|
||
</a-button>
|
||
</a-card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="bg-gradient-to-r from-violet-600 to-fuchsia-600 py-16 text-white">
|
||
<div class="mx-auto max-w-screen-xl px-4 text-center">
|
||
<h2 class="mb-4 text-2xl font-bold md:text-3xl">让 AI 为您的业务赋能</h2>
|
||
<p class="mb-6 text-white/90">7×24 小时在线，永不疲倦的智能助手</p>
|
||
<div class="flex justify-center gap-3">
|
||
<a-button type="primary" size="large" ghost @click="navigateTo('/contact')">预约演示</a-button>
|
||
<a-button size="large" class="bg-white text-purple-700 border-white hover:bg-white/90" @click="navigateTo('/flow')">立即体验</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
RobotOutlined,
|
||
BookOutlined,
|
||
MessageOutlined,
|
||
BarChartOutlined,
|
||
ApiOutlined,
|
||
SafetyOutlined,
|
||
ThunderboltOutlined,
|
||
GlobalOutlined,
|
||
CheckOutlined
|
||
} from '@ant-design/icons-vue'
|
||
|
||
useHead({ title: 'AI 智能体 - 企业级 AI 助手' })
|
||
|
||
definePageMeta({ layout: 'default' })
|
||
|
||
// OpenClaw 标签
|
||
const openclawTags = ['开源免费', '本地运行', '多平台接入', '任务驱动', '模型自由切换', '310k+ GitHub Star']
|
||
|
||
// 模型能力基础设施
|
||
const modelList = ['GPT-4o', 'Claude 3.5', 'DeepSeek', 'Gemini', '本地模型', '更多...']
|
||
|
||
const platformFeatures = [
|
||
{ emoji: '🔑', title: 'Key 独立分配', desc: '为每个客户/项目创建独立 API Key，互不干扰' },
|
||
{ emoji: '📊', title: '额度精准管控', desc: '设置 Token 用量上限，超额自动停用，杜绝超支' },
|
||
{ emoji: '🔀', title: '多模型统一入口', desc: '一个 Key 按需调用所有接入模型，客户无感切换' },
|
||
{ emoji: '📈', title: '用量实时追踪', desc: '对话量、消耗 Token、费用明细一目了然' },
|
||
]
|
||
|
||
// OpenClaw 核心特性
|
||
const openclawFeatures = [
|
||
{ emoji: '🌐', title: '30+ 平台接入', desc: 'WhatsApp、飞书、企业微信、Telegram、Discord 等全面支持' },
|
||
{ emoji: '🧠', title: '模型自由切换', desc: '支持 Claude、GPT-4、DeepSeek、本地离线模型，按需使用' },
|
||
{ emoji: '⚡', title: '真正执行任务', desc: '浏览器操作、文件处理、代码运行，不只是聊天' },
|
||
{ emoji: '🔒', title: '本地私有部署', desc: '数据不出设备，完全掌握在自己手中，安全可控' },
|
||
]
|
||
|
||
const features = [
|
||
{ icon: BookOutlined, title: '知识库问答', desc: '上传文档、网页、表格，AI 自动学习并回答相关问题，支持多格式数据源' },
|
||
{ icon: MessageOutlined, title: '智能客服', desc: '7×24 小时自动回复，理解上下文，处理复杂咨询，无缝转接人工' },
|
||
{ icon: BarChartOutlined, title: '数据分析', desc: '自然语言查询业务数据，自动生成图表和洞察报告，降低数据分析门槛' },
|
||
{ icon: ThunderboltOutlined, title: '自动化工作流', desc: 'AI 自动执行重复性任务，如数据录入、邮件回复、日程安排等' },
|
||
{ icon: ApiOutlined, title: 'API 集成', desc: '开放 API 接口，轻松对接现有系统，将 AI 能力嵌入到您的应用中' },
|
||
{ icon: GlobalOutlined, title: '多语言支持', desc: '支持中英文及 20+ 语种，自动识别语言并回复，服务全球用户' },
|
||
{ icon: SafetyOutlined, title: '数据安全', desc: '企业级数据隔离，支持私有化部署，确保敏感信息不泄露' },
|
||
{ icon: RobotOutlined, title: '自定义角色', desc: '设定 AI 的人设、语气、专业知识领域，打造品牌专属形象' }
|
||
]
|
||
|
||
const scenarios = [
|
||
{ emoji: '🏢', title: '企业知识管理', desc: '构建企业知识库，员工随时查询制度、流程、技术文档' },
|
||
{ emoji: '🛒', title: '电商智能导购', desc: '根据用户需求推荐商品，解答产品问题，提升转化率' },
|
||
{ emoji: '📚', title: '在线教育辅导', desc: '个性化答疑、作业批改、学习计划制定，提升教学效率' },
|
||
{ emoji: '🏥', title: '医疗预问诊', desc: '症状询问、科室推荐、健康知识普及，缓解医疗资源压力' },
|
||
{ emoji: '💼', title: 'HR 智能助手', desc: '解答员工问题、协助招聘筛选、自动化入职流程' },
|
||
{ emoji: '📊', title: '金融理财顾问', desc: '产品咨询、风险评估、市场分析，提供专业理财建议' },
|
||
{ emoji: '🎧', title: '售后技术支持', desc: '故障排查、使用指导、工单创建，提升客户满意度' },
|
||
{ emoji: '📝', title: '内容创作辅助', desc: '文案撰写、标题优化、内容润色，提升创作效率' }
|
||
]
|
||
|
||
const plans = [
|
||
{
|
||
name: '体验版',
|
||
price: '¥0',
|
||
period: '永久免费',
|
||
recommended: false,
|
||
features: ['1,000 次/月对话额度', '1 个知识库', '基础模型', '社区支持', '标准响应速度']
|
||
},
|
||
{
|
||
name: '专业版',
|
||
price: '¥499',
|
||
period: '/月',
|
||
recommended: true,
|
||
features: ['50,000 次/月对话额度', '10 个知识库', '高级模型(GPT-4)', 'API 接口', '优先技术支持', '数据分析功能']
|
||
},
|
||
{
|
||
name: '企业版',
|
||
price: '¥1,999',
|
||
period: '/月',
|
||
recommended: false,
|
||
features: ['无限对话额度', '无限知识库', '专属模型微调', '私有化部署选项', 'SLA 保障', '专属客户成功经理']
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
}
|
||
</style>
|