richarjiang
140608845a
将合图处理从服务端迁移到浏览器端，使用 Web Worker 实现高性能打包算法，新增三栏布局界面和精灵动画预览功能 - 新增 atlasStore 状态管理，实现文件、配置、结果的统一管理 - 新增 atlas-packer 打包算法库（MaxRects/Shelf），支持浏览器端快速合图 - 新增 atlas-worker Web Worker，实现异步打包处理避免阻塞 UI - 新增三栏布局组件：FileListPanel、CanvasPreview、AtlasConfigPanel - 新增 AnimationPreviewDialog 支持精灵动画帧预览和帧率控制 - 优化所有工具页面的响应式布局和交互体验 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Sparkles } from "lucide-react";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import { useTranslation, getServerTranslations } from "@/lib/i18n";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function Footer() {
|
|
const pathname = usePathname();
|
|
const [mounted, setMounted] = useState(false);
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => setMounted(true), []);
|
|
|
|
const getT = (key: string, params?: Record<string, string | number>) => {
|
|
if (!mounted) return getServerTranslations("en").t(key, params);
|
|
return t(key, params);
|
|
};
|
|
|
|
const toolLinks = useMemo(
|
|
() => [
|
|
{ name: getT("sidebar.videoToFrames"), href: "/tools/video-frames" },
|
|
{ name: getT("sidebar.imageCompression"), href: "/tools/image-compress" },
|
|
{ name: getT("sidebar.audioCompression"), href: "/tools/audio-compress" },
|
|
],
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[mounted]
|
|
);
|
|
|
|
// Check if we're in the dashboard area (tools pages)
|
|
const isDashboard = pathname?.startsWith("/tools");
|
|
|
|
return (
|
|
<footer className={cn(
|
|
"border-t border-white/5 bg-background/50",
|
|
isDashboard && "lg:ml-64"
|
|
)}>
|
|
<div className="container py-12">
|
|
<div className="grid gap-10 md:grid-cols-[1.5fr_1fr]">
|
|
<div>
|
|
<Link href="/" className="inline-flex items-center gap-2">
|
|
<span className="grid h-9 w-9 place-items-center rounded-xl bg-primary text-primary-foreground shadow-[0_0_0_1px_rgba(255,255,255,0.1)]">
|
|
<Sparkles className="h-5 w-5" />
|
|
</span>
|
|
<span className="text-base font-semibold tracking-tight">{getT("common.appName")}</span>
|
|
</Link>
|
|
|
|
<p className="mt-4 max-w-md text-sm leading-relaxed text-muted-foreground">
|
|
{getT("footer.tagline")}
|
|
</p>
|
|
|
|
<p className="mt-6 text-xs text-muted-foreground">
|
|
{getT("footer.note")}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-8">
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{getT("footer.sections.tools")}
|
|
</div>
|
|
<ul className="mt-4 space-y-2 text-sm">
|
|
{toolLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href} className="text-muted-foreground hover:text-foreground">
|
|
{link.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{getT("footer.sections.company")}
|
|
</div>
|
|
<ul className="mt-4 space-y-2 text-sm">
|
|
<li>
|
|
<Link href="/" className="text-muted-foreground hover:text-foreground">
|
|
{getT("footer.links.home")}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-10 border-t border-white/5 pt-6">
|
|
<div className="flex flex-col items-center justify-center gap-2 text-center">
|
|
<p className="text-xs text-muted-foreground">
|
|
© {new Date().getFullYear()} {getT("common.appName")}. {getT("footer.copyright")}
|
|
</p>
|
|
<Link
|
|
href="https://beian.miit.gov.cn"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
粤ICP备2021179543号
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|