tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-13 02:26:36 +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/footer-section.tsx
+103 -51
View File
@@ -1,7 +1,7 @@
import * as React from "react";
import {cn} from "@/lib/utils";
import Link from "next/link";
import {Github, LucideIcon, WavesIcon} from "lucide-react";
import * as React from 'react';
import { cn } from '@/lib/utils';
import Link from 'next/link';
import { Github, LucideIcon, WavesIcon } from 'lucide-react';
export interface FooterSectionProps {
className?: string;
@@ -10,66 +10,106 @@ export interface FooterSectionProps {
/**
* Footer Section - 页脚
*/
export const FooterSection = React.memo(function FooterSection({ className }: FooterSectionProps) {
export const FooterSection = React.memo(function FooterSection({
className,
}: FooterSectionProps) {
return (
<footer className={cn("relative z-10 w-full bg-transparent border-t border-white/10 mt-0 backdrop-blur-sm", className)}>
<div className="container mx-auto max-w-7xl px-6 py-20 lg:py-32">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-20">
<div className="lg:col-span-2 space-y-6">
<Link href="/" className="flex items-center gap-2">
<span className="flex size-9 items-center justify-center rounded-full bg-foreground text-background [@media(max-height:700px)]:size-8">
<WavesIcon aria-hidden="true" />
<footer
className={cn(
'relative z-10 w-full bg-transparent border-t border-white/10 mt-0 backdrop-blur-sm',
className,
)}
>
<div className='container mx-auto max-w-7xl px-6 py-20 lg:py-32'>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-20'>
<div className='lg:col-span-2 space-y-6'>
<Link href='/' className='flex items-center gap-2'>
<span className='flex size-9 items-center justify-center rounded-full bg-foreground text-background [@media(max-height:700px)]:size-8'>
<WavesIcon aria-hidden='true' />
</span>
<span className='text-2xl font-bold tracking-tight text-foreground'>
Wavelet
</span>
<span className="text-2xl font-bold tracking-tight text-foreground">Wavelet</span>
</Link>
<p className="text-muted-foreground text-base leading-relaxed max-w-sm">
通用的、现代化的后台管理系统脚手架。基于 Go + React 构建，开箱即用、完整基建、极易扩展。
<p className='text-muted-foreground text-base leading-relaxed max-w-sm'>
通用的、现代化的后台管理系统脚手架。基于 Go + React
构建，开箱即用、完整基建、极易扩展。
</p>
<div className="flex gap-4 pt-2">
<SocialLink icon={Github} href="https://github.com/Rain-kl/Wavelet/" />
<div className='flex gap-4 pt-2'>
<SocialLink
icon={Github}
href='https://github.com/Rain-kl/Wavelet/'
/>
</div>
</div>
<div className="lg:col-span-1">
<h3 className="font-semibold text-foreground mb-6">产品</h3>
<ul className="space-y-4 text-sm text-muted-foreground">
<li><FooterLink href="/home">仪表盘</FooterLink></li>
<li><FooterLink href="/settings">个人设置</FooterLink></li>
<div className='lg:col-span-1'>
<h3 className='font-semibold text-foreground mb-6'>产品</h3>
<ul className='space-y-4 text-sm text-muted-foreground'>
<li>
<FooterLink href='/home'>仪表盘</FooterLink>
</li>
<li>
<FooterLink href='/settings'>个人设置</FooterLink>
</li>
</ul>
</div>
<div className="lg:col-span-1">
<h3 className="font-semibold text-foreground mb-6">开发</h3>
<ul className="space-y-4 text-sm text-muted-foreground">
<li><FooterLink href="/docs/how-to-use">快速开始</FooterLink></li>
<li><FooterLink href="/docs/api">API 文档</FooterLink></li>
<li><FooterLink href="https://github.com/Rain-kl/Wavelet">源代码</FooterLink></li>
<div className='lg:col-span-1'>
<h3 className='font-semibold text-foreground mb-6'>开发</h3>
<ul className='space-y-4 text-sm text-muted-foreground'>
<li>
<FooterLink href='/docs/how-to-use'>快速开始</FooterLink>
</li>
<li>
<FooterLink href='/docs/api'>API 文档</FooterLink>
</li>
<li>
<FooterLink href='https://github.com/Rain-kl/Wavelet'>
源代码
</FooterLink>
</li>
</ul>
</div>
<div className="lg:col-span-1">
<h3 className="font-semibold text-foreground mb-6">社区</h3>
<ul className="space-y-4 text-sm text-muted-foreground">
<li><FooterLink href="https://github.com/Rain-kl/Wavelet/issues">GitHub Issues</FooterLink></li>
<li><FooterLink href="https://github.com/Rain-kl/Wavelet/discussions">讨论</FooterLink></li>
<div className='lg:col-span-1'>
<h3 className='font-semibold text-foreground mb-6'>社区</h3>
<ul className='space-y-4 text-sm text-muted-foreground'>
<li>
<FooterLink href='https://github.com/Rain-kl/Wavelet/issues'>
GitHub Issues
</FooterLink>
</li>
<li>
<FooterLink href='https://github.com/Rain-kl/Wavelet/discussions'>
讨论
</FooterLink>
</li>
</ul>
</div>
</div>
<div className="pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
<div className='pt-8 border-t border-border flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-muted-foreground'>
<p>© 2026 Modern Platform. All rights reserved.</p>
<div className="flex gap-8">
<Link href="/docs/privacy-policy" className="hover:text-foreground transition-colors">隐私政策</Link>
<Link href="/docs/terms-of-service" className="hover:text-foreground transition-colors">服务条款</Link>
<div className='flex gap-8'>
<Link
href='/docs/privacy-policy'
className='hover:text-foreground transition-colors'
>
隐私政策
</Link>
<Link
href='/docs/terms-of-service'
className='hover:text-foreground transition-colors'
>
服务条款
</Link>
</div>
</div>
</div>
<div className="absolute bottom-0 left-0 w-full overflow-hidden pointer-events-none opacity-[0.02]">
<div className="text-[12vw] 2xl:text-[180px] font-black leading-none text-foreground whitespace-nowrap select-none text-center transform translate-y-1/3 transition-all duration-700">
<div className='absolute bottom-0 left-0 w-full overflow-hidden pointer-events-none opacity-[0.02]'>
<div className='text-[12vw] 2xl:text-[180px] font-black leading-none text-foreground whitespace-nowrap select-none text-center transform translate-y-1/3 transition-all duration-700'>
Modern Platform
</div>
</div>
@@ -77,21 +117,33 @@ export const FooterSection = React.memo(function FooterSection({ className }: Fo
);
});
function SocialLink({ icon: Icon, href }: { icon: LucideIcon, href: string }) {
function SocialLink({ icon: Icon, href }: { icon: LucideIcon; href: string }) {
return (
<Link href={href} className="w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-all duration-300">
<Icon className="w-5 h-5" />
<Link
href={href}
className='w-10 h-10 rounded-full bg-muted/50 flex items-center justify-center text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-all duration-300'
>
<Icon className='w-5 h-5' />
</Link>
)
);
}
function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
function FooterLink({
href,
children,
}: {
href: string;
children: React.ReactNode;
}) {
return (
<Link href={href} className="hover:text-foreground transition-colors flex items-center group">
<span className="relative">
<Link
href={href}
className='hover:text-foreground transition-colors flex items-center group'
>
<span className='relative'>
{children}
<span className="absolute left-0 -bottom-0.5 w-0 h-px bg-foreground transition-all duration-300 group-hover:w-full" />
<span className='absolute left-0 -bottom-0.5 w-0 h-px bg-foreground transition-all duration-300 group-hover:w-full' />
</span>
</Link>
)
);
}