365 lines
20 KiB
Vue
365 lines
20 KiB
Vue
<template>
|
||
<div class="page">
|
||
|
||
<!-- Hero -->
|
||
<section class="relative overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-indigo-950 text-white">
|
||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||
<div class="absolute -top-1/2 -right-1/4 w-[700px] h-[700px] rounded-full bg-indigo-500/15 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/2 -left-1/4 w-[600px] h-[600px] rounded-full bg-violet-500/10 blur-3xl"></div>
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full bg-cyan-500/8 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-1.5 h-1.5 rounded-full bg-indigo-400/60 animate-pulse"></div>
|
||
<div class="absolute top-48 right-32 w-2 h-2 rounded-full bg-cyan-400/40 animate-pulse" style="animation-delay:0.6s"></div>
|
||
<div class="absolute bottom-28 left-1/3 w-1.5 h-1.5 rounded-full bg-violet-400/50 animate-pulse" style="animation-delay:1.2s"></div>
|
||
<div class="absolute top-1/3 right-1/5 w-1 h-1 rounded-full bg-white/30 animate-pulse" style="animation-delay:1.8s"></div>
|
||
</div>
|
||
|
||
<div class="relative mx-auto max-w-screen-xl px-4 py-20 md:py-28">
|
||
<div class="grid items-center gap-12 md:grid-cols-2">
|
||
<div>
|
||
<div class="mb-5 flex flex-wrap gap-2">
|
||
<a-tag class="border-indigo-400/40 bg-indigo-500/20 text-indigo-200">🛠️ 开发者中心</a-tag>
|
||
<a-tag class="border-cyan-400/30 bg-cyan-500/15 text-cyan-200">开放 API</a-tag>
|
||
<a-tag class="border-violet-400/30 bg-violet-500/15 text-violet-200">源码交付</a-tag>
|
||
</div>
|
||
<h1 class="mb-4 text-4xl font-bold leading-tight md:text-5xl">
|
||
构建下一代<br>
|
||
<span class="bg-gradient-to-r from-indigo-400 via-cyan-400 to-violet-400 bg-clip-text text-transparent">AI 原生应用</span>
|
||
</h1>
|
||
<p class="mb-8 text-lg text-slate-300 leading-relaxed">
|
||
完整的开放 API、SDK、源码交付与二次开发支持。从 SaaS 到私有化部署，让您的团队完全掌控每一行代码。
|
||
</p>
|
||
<div class="flex flex-wrap gap-3">
|
||
<a-button type="primary" size="large"
|
||
class="bg-indigo-600 border-indigo-600 hover:bg-indigo-500 font-semibold"
|
||
@click="navigateTo('/developer')">
|
||
进入开发者控制台
|
||
</a-button>
|
||
<a-button ghost size="large" class="border-white/30 text-white hover:bg-white/10"
|
||
@click="navigateTo('/developer/docs')">
|
||
查看开发文档
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧代码卡片 -->
|
||
<div class="relative">
|
||
<div class="rounded-2xl border border-white/10 bg-slate-800/80 backdrop-blur overflow-hidden shadow-2xl">
|
||
<!-- 顶栏 -->
|
||
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-slate-900/60">
|
||
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
|
||
<div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
|
||
<div class="w-3 h-3 rounded-full bg-green-500/80"></div>
|
||
<span class="ml-3 text-xs text-slate-400 font-mono">quickstart.ts</span>
|
||
</div>
|
||
<pre class="p-5 text-sm font-mono leading-relaxed overflow-x-auto"><code><span class="text-slate-400">// 初始化 SDK</span>
|
||
<span class="text-cyan-400">import</span> <span class="text-white">{ WebsopyClient }</span> <span class="text-cyan-400">from</span> <span class="text-green-400">'@websopy/sdk'</span>
|
||
|
||
<span class="text-cyan-400">const</span> <span class="text-indigo-300">client</span> <span class="text-white">= new</span> <span class="text-yellow-300">WebsopyClient</span><span class="text-white">({</span>
|
||
<span class="text-slate-300">tenantId</span><span class="text-white">:</span> <span class="text-green-400">'your-tenant-id'</span><span class="text-white">,</span>
|
||
<span class="text-slate-300">apiKey</span><span class="text-white">:</span> <span class="text-green-400">'sk-xxxxxxxxxxxxxxxx'</span>
|
||
<span class="text-white">})</span>
|
||
|
||
<span class="text-slate-400">// 调用 AI 智能体</span>
|
||
<span class="text-cyan-400">const</span> <span class="text-indigo-300">reply</span> <span class="text-white">=</span> <span class="text-cyan-400">await</span> <span class="text-indigo-300">client</span><span class="text-white">.</span><span class="text-yellow-300">agent</span><span class="text-white">.</span><span class="text-yellow-300">chat</span><span class="text-white">({</span>
|
||
<span class="text-slate-300">message</span><span class="text-white">:</span> <span class="text-green-400">'帮我分析本月销售数据'</span>
|
||
<span class="text-white">})</span>
|
||
|
||
<span class="text-indigo-300">console</span><span class="text-white">.</span><span class="text-yellow-300">log</span><span class="text-white">(</span><span class="text-indigo-300">reply</span><span class="text-white">.</span><span class="text-slate-300">content</span><span class="text-white">)</span>
|
||
</code></pre>
|
||
</div>
|
||
<!-- 浮动标签 -->
|
||
<div class="absolute -top-3 -right-3 rounded-xl bg-green-500 px-3 py-1.5 text-xs font-semibold text-white shadow-lg">
|
||
✓ TypeScript 支持
|
||
</div>
|
||
<div class="absolute -bottom-3 -left-3 rounded-xl bg-indigo-500 px-3 py-1.5 text-xs font-semibold text-white shadow-lg">
|
||
OpenAPI 3.0 规范
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据横幅 -->
|
||
<section class="bg-gradient-to-r from-indigo-600 via-violet-600 to-indigo-700 py-8">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid grid-cols-2 gap-6 md:grid-cols-4">
|
||
<div v-for="s in bannerStats" :key="s.label" class="text-center text-white">
|
||
<div class="text-2xl font-bold md:text-3xl">{{ s.value }}</div>
|
||
<div class="mt-1 text-sm text-indigo-200">{{ s.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 核心能力 -->
|
||
<section class="py-16 md:py-24 bg-white">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<a-tag color="blue" 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">从 API 调用到源码级二次开发，覆盖所有开发场景</p>
|
||
</div>
|
||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
<div v-for="cap in capabilities" :key="cap.title"
|
||
class="group relative rounded-2xl border border-slate-100 bg-white p-7 shadow-sm hover:border-indigo-200 hover:shadow-lg transition-all cursor-default">
|
||
<div class="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl text-2xl"
|
||
:class="cap.iconBg">
|
||
{{ cap.emoji }}
|
||
</div>
|
||
<h3 class="mb-2 font-bold text-lg text-slate-800">{{ cap.title }}</h3>
|
||
<p class="text-sm text-slate-500 leading-relaxed mb-4">{{ cap.desc }}</p>
|
||
<div class="flex flex-wrap gap-1.5">
|
||
<span v-for="tag in cap.tags" :key="tag"
|
||
class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600">{{ tag }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 开发流程 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-b from-slate-50 to-white">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<a-tag color="blue" class="mb-3">快速上手</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-3">4 步完成接入</h2>
|
||
<p class="text-slate-500">从注册到上线，最快 30 分钟</p>
|
||
</div>
|
||
<div class="relative grid gap-6 md:grid-cols-4">
|
||
<div v-for="(step, i) in steps" :key="step.title" class="relative text-center">
|
||
<!-- 连接线 -->
|
||
<div v-if="i < steps.length - 1"
|
||
class="absolute top-8 left-[calc(50%+36px)] right-0 h-0.5 bg-gradient-to-r from-indigo-300 to-transparent hidden md:block"></div>
|
||
<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white text-2xl shadow-lg">
|
||
{{ step.emoji }}
|
||
</div>
|
||
<div class="mb-1 text-xs font-bold text-indigo-500 uppercase tracking-wider">Step {{ i + 1 }}</div>
|
||
<h4 class="mb-2 font-bold text-slate-800">{{ step.title }}</h4>
|
||
<p class="text-sm text-slate-500 leading-relaxed">{{ step.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- API & SDK 展示 -->
|
||
<section class="py-16 md:py-20 bg-slate-950 text-white">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="grid items-start gap-12 md:grid-cols-2">
|
||
<div>
|
||
<a-tag class="mb-4 border-indigo-400/40 bg-indigo-500/20 text-indigo-200">REST API</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-4">完整的 REST API</h2>
|
||
<p class="text-slate-400 mb-6 leading-relaxed">
|
||
基于 OpenAPI 3.0 规范，支持所有主流语言调用。提供完整的 Swagger 文档，支持在线调试。
|
||
</p>
|
||
<div class="space-y-3 mb-8">
|
||
<div v-for="api in apiFeatures" :key="api" class="flex items-center gap-3 text-slate-300">
|
||
<span class="text-indigo-400 flex-shrink-0">▸</span>{{ api }}
|
||
</div>
|
||
</div>
|
||
<a-button size="large"
|
||
class="bg-indigo-600 border-indigo-600 text-white hover:bg-indigo-500"
|
||
@click="navigateTo('/developer/apps')">
|
||
查看 API 文档
|
||
</a-button>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<div v-for="sdk in sdkList" :key="sdk.lang"
|
||
class="flex items-center gap-4 rounded-xl border border-white/10 bg-white/5 px-5 py-4 hover:border-indigo-500/50 hover:bg-white/8 transition-all">
|
||
<span class="text-3xl flex-shrink-0">{{ sdk.emoji }}</span>
|
||
<div class="flex-1">
|
||
<div class="font-semibold text-white">{{ sdk.lang }}</div>
|
||
<div class="text-sm text-slate-400 mt-0.5">{{ sdk.desc }}</div>
|
||
</div>
|
||
<span class="rounded-full px-2.5 py-0.5 text-xs font-medium" :class="sdk.statusClass">{{ sdk.status }}</span>
|
||
</div>
|
||
</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 class="grid grid-cols-2 gap-4">
|
||
<div v-for="item in sourceItems" :key="item.title"
|
||
class="rounded-2xl border border-slate-100 bg-gradient-to-br p-5 shadow-sm hover:shadow-md transition-shadow"
|
||
:class="item.bg">
|
||
<div class="text-3xl mb-3">{{ item.emoji }}</div>
|
||
<div class="font-bold text-slate-800 mb-1">{{ item.title }}</div>
|
||
<div class="text-xs text-slate-500 leading-relaxed">{{ item.desc }}</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<a-tag color="blue" class="mb-4">源码交付</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-4">拿到代码，完全掌控</h2>
|
||
<p class="text-slate-600 mb-6 leading-relaxed">
|
||
购买源码权益后，通过 Git 仓库直接获取完整项目代码。支持私有化部署、二次开发，无任何商用限制。
|
||
</p>
|
||
<ul class="space-y-3 mb-8">
|
||
<li v-for="point in sourcePoints" :key="point" class="flex items-center gap-3 text-slate-700">
|
||
<span class="flex h-5 w-5 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 text-xs flex-shrink-0">✓</span>
|
||
{{ point }}
|
||
</li>
|
||
</ul>
|
||
<a-button type="primary" size="large"
|
||
class="bg-indigo-600 border-indigo-600 hover:bg-indigo-500"
|
||
@click="navigateTo('/developer/source')">
|
||
申请源码访问权限
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 开发者社区 -->
|
||
<section class="py-16 md:py-20 bg-gradient-to-br from-slate-50 to-indigo-50">
|
||
<div class="mx-auto max-w-screen-xl px-4">
|
||
<div class="mb-12 text-center">
|
||
<a-tag color="blue" class="mb-3">开发者生态</a-tag>
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-3">加入开发者社区</h2>
|
||
<p class="text-slate-500">与数千名开发者共同构建 AI 应用生态</p>
|
||
</div>
|
||
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||
<div v-for="community in communities" :key="community.title"
|
||
class="rounded-2xl bg-white border border-slate-100 p-6 text-center shadow-sm hover:shadow-md hover:border-indigo-200 transition-all">
|
||
<div class="text-4xl mb-4">{{ community.emoji }}</div>
|
||
<h4 class="font-bold text-slate-800 mb-2">{{ community.title }}</h4>
|
||
<p class="text-sm text-slate-500 leading-relaxed">{{ community.desc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA -->
|
||
<section class="relative overflow-hidden bg-gradient-to-r from-indigo-600 via-violet-600 to-indigo-700 py-16 text-white">
|
||
<div class="pointer-events-none absolute inset-0">
|
||
<div class="absolute -top-1/2 right-0 w-[500px] h-[500px] rounded-full bg-white/5 blur-3xl"></div>
|
||
<div class="absolute -bottom-1/2 left-0 w-[400px] h-[400px] rounded-full bg-white/5 blur-3xl"></div>
|
||
</div>
|
||
<div class="relative mx-auto max-w-screen-xl px-4 text-center">
|
||
<h2 class="text-2xl font-bold md:text-3xl mb-3">准备好开始构建了吗？</h2>
|
||
<p class="text-indigo-200 mb-8 max-w-xl mx-auto">注册开发者账号，立即获取 API Key，免费体验全部接口</p>
|
||
<div class="flex justify-center flex-wrap gap-4">
|
||
<a-button size="large"
|
||
class="bg-white text-indigo-700 border-white font-semibold hover:bg-white/90"
|
||
@click="navigateTo('/developer')">
|
||
🚀 进入开发者控制台
|
||
</a-button>
|
||
<a-button ghost size="large" class="border-white text-white hover:bg-white/10"
|
||
@click="navigateTo('/developer/docs')">
|
||
📖 查看开发文档
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
useHead({ title: '开发者中心 - 开放 API · SDK · 源码交付' })
|
||
definePageMeta({ layout: 'default' })
|
||
|
||
const bannerStats = [
|
||
{ value: '200+', label: 'REST API 接口' },
|
||
{ value: '30min', label: '最快接入时间' },
|
||
{ value: '5+', label: 'SDK 语言支持' },
|
||
{ value: '99.9%', label: 'API 可用性 SLA' },
|
||
]
|
||
|
||
const capabilities = [
|
||
{
|
||
emoji: '🔌',
|
||
title: 'REST API',
|
||
iconBg: 'bg-indigo-50',
|
||
desc: '200+ 标准接口，覆盖用户、内容、AI、支付等全部业务模块，OpenAPI 3.0 规范，支持 Swagger 在线调试。',
|
||
tags: ['OpenAPI 3.0', 'Swagger UI', 'Webhook', 'OAuth 2.0'],
|
||
},
|
||
{
|
||
emoji: '📦',
|
||
title: 'SDK & 客户端库',
|
||
iconBg: 'bg-violet-50',
|
||
desc: '官方提供 TypeScript / JavaScript SDK，社区维护 Python、Java、Go、PHP 版本，降低接入成本。',
|
||
tags: ['TypeScript', 'Python', 'Java', 'Go'],
|
||
},
|
||
{
|
||
emoji: '💻',
|
||
title: '源码交付',
|
||
iconBg: 'bg-cyan-50',
|
||
desc: '购买源码权益后，通过私有 Git 仓库获取完整源代码，支持私有化部署与无限制二次开发。',
|
||
tags: ['Git 仓库', '私有化部署', '二次开发', 'MIT 授权'],
|
||
},
|
||
{
|
||
emoji: '🤖',
|
||
title: 'AI 智能体 API',
|
||
iconBg: 'bg-orange-50',
|
||
desc: '基于 OpenClaw 框架的 AI Agent 接口，支持会话管理、知识库召回、工作流触发、多模型切换。',
|
||
tags: ['OpenClaw', 'RAG', 'Function Call', '流式输出'],
|
||
},
|
||
{
|
||
emoji: '🔔',
|
||
title: 'Webhook 事件',
|
||
iconBg: 'bg-green-50',
|
||
desc: '订阅业务事件推送：订单支付、用户注册、AI 任务完成等，实时触发您的业务逻辑。',
|
||
tags: ['事件订阅', '重试机制', '签名验证', '日志追踪'],
|
||
},
|
||
{
|
||
emoji: '🛡️',
|
||
title: '权限与安全',
|
||
iconBg: 'bg-rose-50',
|
||
desc: 'API Key 多级权限控制，支持 IP 白名单、请求频率限制、操作审计日志，保障接口安全。',
|
||
tags: ['API Key', 'IP 白名单', 'Rate Limit', '审计日志'],
|
||
},
|
||
]
|
||
|
||
const steps = [
|
||
{ emoji: '📝', title: '注册开发者账号', desc: '使用平台账号申请开发者权限，审核后即可获取 API Key' },
|
||
{ emoji: '🔑', title: '获取 API Key', desc: '在控制台生成专属 API Key，支持多 Key 管理与权限分级' },
|
||
{ emoji: '📖', title: '阅读接入文档', desc: '参考快速开始指南，选择合适的 SDK 或直接调用 REST API' },
|
||
{ emoji: '🚀', title: '上线发布', desc: '完成联调测试，切换生产环境，享受 99.9% 可用性保障' },
|
||
]
|
||
|
||
const apiFeatures = [
|
||
'完整的 RESTful 设计，语义清晰',
|
||
'支持 JSON / multipart 请求格式',
|
||
'统一的错误码与响应格式',
|
||
'分页、过滤、排序参数规范',
|
||
'支持流式响应（SSE）',
|
||
'提供 Postman Collection 下载',
|
||
]
|
||
|
||
const sdkList = [
|
||
{ emoji: '🟦', lang: 'TypeScript / JavaScript', desc: '官方维护，完整类型定义，支持 Node.js 与浏览器端', status: '稳定版', statusClass: 'bg-green-500/20 text-green-400' },
|
||
{ emoji: '🐍', lang: 'Python', desc: '社区维护，支持 asyncio，适合数据处理与 AI 场景', status: '稳定版', statusClass: 'bg-green-500/20 text-green-400' },
|
||
{ emoji: '☕', lang: 'Java', desc: '适用于企业级 Spring Boot 项目快速接入', status: 'Beta', statusClass: 'bg-yellow-500/20 text-yellow-400' },
|
||
{ emoji: '🐹', lang: 'Go', desc: '高性能微服务场景，轻量无依赖', status: 'Beta', statusClass: 'bg-yellow-500/20 text-yellow-400' },
|
||
{ emoji: '🐘', lang: 'PHP', desc: '适用于 Laravel / ThinkPHP 等框架', status: '规划中', statusClass: 'bg-slate-500/20 text-slate-400' },
|
||
]
|
||
|
||
const sourceItems = [
|
||
{ emoji: '🗂️', title: 'Nuxt 4 前端', desc: 'Vue 3 + TypeScript，完整 SSR 源码', bg: 'from-indigo-50 to-blue-50' },
|
||
{ emoji: '⚙️', title: 'Java 后端', desc: 'Spring Boot 3，多租户 SaaS 架构', bg: 'from-violet-50 to-purple-50' },
|
||
{ emoji: '🤖', title: 'AI 模块', desc: 'OpenClaw 集成，RAG 知识库引擎', bg: 'from-orange-50 to-amber-50' },
|
||
{ emoji: '🚢', title: '部署脚本', desc: 'Docker Compose + CI/CD 流水线', bg: 'from-green-50 to-emerald-50' },
|
||
]
|
||
|
||
const sourcePoints = [
|
||
'完整的多租户 SaaS 源码',
|
||
'私有 Git 仓库，持续同步更新',
|
||
'无商用限制，可自由二次开发',
|
||
'提供详细的架构说明文档',
|
||
'支持私有化本地/云端部署',
|
||
]
|
||
|
||
const communities = [
|
||
{ emoji: '💬', title: '开发者论坛', desc: '提问、讨论、分享最佳实践，社区互助' },
|
||
{ emoji: '📘', title: '开发文档', desc: '完整 API 参考、教程、示例代码库' },
|
||
{ emoji: '🐙', title: 'GitHub', desc: '开源组件、SDK 源码、示例项目' },
|
||
{ emoji: '🎓', title: '视频教程', desc: '从入门到进阶的系列开发实战课程' },
|
||
]
|
||
</script>
|