tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-06 15:46:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:17:45 +08:00
parent 08e61ce833
commit e0eb4e5975
334 changed files with 17212 additions and 12321 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/developer-section.tsx
+92 -56
View File
@@ -1,9 +1,9 @@
import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import { Button } from "@/components/ui/button";
import { Book, Check, Copy, Terminal } from "lucide-react";
import * as React from 'react';
import Link from 'next/link';
import { cn } from '@/lib/utils';
import { motion } from 'motion/react';
import { Button } from '@/components/ui/button';
import { Book, Check, Copy, Terminal } from 'lucide-react';
export interface DeveloperSectionProps {
className?: string;
@@ -12,7 +12,9 @@ export interface DeveloperSectionProps {
/**
* Developer Section - 开发者体验展示
*/
export const DeveloperSection = React.memo(function DeveloperSection({ className }: DeveloperSectionProps) {
export const DeveloperSection = React.memo(function DeveloperSection({
className,
}: DeveloperSectionProps) {
const [copied, setCopied] = React.useState(false);
const codeContent = `# 注册用户
@@ -31,13 +33,13 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
setTimeout(() => setCopied(false), 2000);
} catch {
// Fallback for older browsers
const textArea = document.createElement("textarea");
const textArea = document.createElement('textarea');
textArea.value = codeContent;
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.position = 'fixed';
textArea.style.left = '-9999px';
document.body.appendChild(textArea);
textArea.select();
document.execCommand("copy");
document.execCommand('copy');
document.body.removeChild(textArea);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
@@ -45,97 +47,131 @@ curl -X POST https://api.example.com/api/v1/auth/register \\
};
return (
<section className={cn("relative z-10 w-full min-h-screen flex items-center justify-center px-6 overflow-hidden", className)}>
<div className="absolute inset-0 pointer-events-none">
<div className="absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_20%,black_80%,transparent)]">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] max-w-[90vw] max-h-[90vh] bg-purple-500/10 rounded-full blur-[120px] animate-pulse" />
<section
className={cn(
'relative z-10 w-full min-h-screen flex items-center justify-center px-6 overflow-hidden',
className,
)}
>
<div className='absolute inset-0 pointer-events-none'>
<div className='absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_20%,black_80%,transparent)]'>
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] max-w-[90vw] max-h-[90vh] bg-purple-500/10 rounded-full blur-[120px] animate-pulse' />
</div>
</div>
<div className="container mx-auto max-w-7xl grid lg:grid-cols-2 gap-12 lg:gap-20 items-center relative z-10">
<div className='container mx-auto max-w-7xl grid lg:grid-cols-2 gap-12 lg:gap-20 items-center relative z-10'>
<motion.div
initial={{ opacity: 0, x: -30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
className="order-2 lg:order-1 relative"
className='order-2 lg:order-1 relative'
>
<div className="relative overflow-hidden rounded-xl border border-white/20 bg-black backdrop-blur-xl shadow-2xl max-w-full">
<div className="flex items-center px-4 py-3 border-b border-white/20 w-full">
<div className="flex-1 flex gap-2">
<div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
<div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
<div className="w-3 h-3 rounded-full bg-[#27c93f]" />
<div className='relative overflow-hidden rounded-xl border border-white/20 bg-black backdrop-blur-xl shadow-2xl max-w-full'>
<div className='flex items-center px-4 py-3 border-b border-white/20 w-full'>
<div className='flex-1 flex gap-2'>
<div className='w-3 h-3 rounded-full bg-[#ff5f56]' />
<div className='w-3 h-3 rounded-full bg-[#ffbd2e]' />
<div className='w-3 h-3 rounded-full bg-[#27c93f]' />
</div>
<div className="flex-none text-xs text-muted-foreground font-mono flex items-center gap-1">
<Terminal className="w-3 h-3" />
<div className='flex-none text-xs text-muted-foreground font-mono flex items-center gap-1'>
<Terminal className='w-3 h-3' />
bash
</div>
<div className="flex-1" />
<div className='flex-1' />
</div>
<div className="p-6 overflow-x-auto relative group">
<div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
<Button variant="ghost" size="icon" className="h-8 w-8 text-neutral-400 hover:text-white" onClick={onCopy}>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
<div className='p-6 overflow-x-auto relative group'>
<div className='absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity'>
<Button
variant='ghost'
size='icon'
className='h-8 w-8 text-neutral-400 hover:text-white'
onClick={onCopy}
>
{copied ? (
<Check className='w-4 h-4' />
) : (
<Copy className='w-4 h-4' />
)}
</Button>
</div>
<pre className="text-xs sm:text-sm font-mono text-neutral-300 leading-relaxed whitespace-pre-wrap break-all sm:whitespace-pre sm:break-normal overflow-x-auto">
<code className="block">
<span className="text-green-400"># 快速开始</span>{'\n'}
<span className="text-purple-400">curl</span> -X <span className="text-yellow-400">POST</span> <span className="text-green-400">https://api.example.com/api/v1/auth/register</span> \{'\n'}
{' '}-H <span className="text-blue-400">&quot;Content-Type: application/json&quot;</span> \{'\n'}
{' '}-d <span className="text-orange-400">&quot;username=dev&amp;password=***&quot;</span>
<pre className='text-xs sm:text-sm font-mono text-neutral-300 leading-relaxed whitespace-pre-wrap break-all sm:whitespace-pre sm:break-normal overflow-x-auto'>
<code className='block'>
<span className='text-green-400'># 快速开始</span>
{'\n'}
<span className='text-purple-400'>curl</span> -X{' '}
<span className='text-yellow-400'>POST</span>{' '}
<span className='text-green-400'>
https://api.example.com/api/v1/auth/register
</span>{' '}
\{'\n'}
{' '}-H{' '}
<span className='text-blue-400'>
&quot;Content-Type: application/json&quot;
</span>{' '}
\{'\n'}
{' '}-d{' '}
<span className='text-orange-400'>
&quot;username=dev&amp;password=***&quot;
</span>
</code>
</pre>
</div>
</div>
<div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />
<div className='absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-blue-500/20 rounded-full blur-3xl animate-pulse' />
</motion.div>
<div className="flex flex-col justify-center space-y-8 order-1 lg:order-2">
<div className='flex flex-col justify-center space-y-8 order-1 lg:order-2'>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.8 }}
>
<h2 className="text-3xl md:text-5xl font-bold tracking-tight text-foreground leading-[1.1] mb-6">
开发者友好，<br />
<h2 className='text-3xl md:text-5xl font-bold tracking-tight text-foreground leading-[1.1] mb-6'>
开发者友好，
<br />
极速集成上手
</h2>
<p className="text-muted-foreground text-lg leading-relaxed mb-8">
标准化的 RESTful API 接口，完整的 TypeScript 类型定义，详细的文档和 Swagger UI。无论使用什么编程语言，只需几行代码，即可快速集成。
<p className='text-muted-foreground text-lg leading-relaxed mb-8'>
标准化的 RESTful API 接口，完整的 TypeScript
类型定义，详细的文档和 Swagger
UI。无论使用什么编程语言，只需几行代码，即可快速集成。
</p>
<ul className="space-y-4 mb-8">
<ul className='space-y-4 mb-8'>
{[
"RESTful API，语义清晰，易于理解",
"OpenAPI / Swagger 接口文档",
"TypeScript 类型定义，开发友好",
"丰富的代码示例和集成指南"
'RESTful API，语义清晰，易于理解',
'OpenAPI / Swagger 接口文档',
'TypeScript 类型定义，开发友好',
'丰富的代码示例和集成指南',
].map((item, i) => (
<li key={i} className="flex items-center gap-3 text-sm text-foreground/80">
<div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary">
<Check className="w-3.5 h-3.5" />
<li
key={i}
className='flex items-center gap-3 text-sm text-foreground/80'
>
<div className='w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary'>
<Check className='w-3.5 h-3.5' />
</div>
{item}
</li>
))}
</ul>
<div className="flex flex-wrap gap-4">
<Link href="/docs/api">
<Button variant="secondary" className="rounded-full text-xs hover:bg-muted-foreground/10">
<Book className="w-3 h-3" />
<div className='flex flex-wrap gap-4'>
<Link href='/docs/api'>
<Button
variant='secondary'
className='rounded-full text-xs hover:bg-muted-foreground/10'
>
<Book className='w-3 h-3' />
API 文档
</Button>
</Link>
</div>
</motion.div>
</div>
</div>
</section>
);