feat: add recipe translation tool with AI translation and settings management

- Add Word document parsing and translation export - Add database configuration management - Add AI/LLM translation configuration - Add translation vocabulary management - Add export settings (colors, page orientation, headers) - Separate database and AI configurations - Add debounced search to prevent database overload
2026-04-12 23:50:54 +08:00
parent 57e119635e
commit a249fb038c
24 changed files with 3383 additions and 70 deletions
@@ -0,0 +1,103 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+    Database,
+    Globe,
+    FileText,
+    ChevronRight,
+    UtensilsCrossed,
+    Bandage
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const settingsMenu = [
+    {
+        title: "数据库配置",
+        icon: Database,
+        href: "/settings/database",
+    },
+    {
+        title: "翻译词库",
+        icon: Globe,
+        href: "/settings/translation",
+    },
+    {
+        title: "导出设置",
+        icon: FileText,
+        href: "/settings/export",
+    },
+    {
+        title: "大模型设置",
+        icon: Bandage,
+        href: "/settings/ai",
+    },
+];
+
+export default function SettingsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const pathname = usePathname();
+
+    return (
+        <div className="min-h-screen bg-background">
+            <header className="border-b bg-card">
+                <div className="mx-auto max-w-6xl px-4 py-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-3">
+                            <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
+                                <UtensilsCrossed className="h-5 w-5"/>
+                            </div>
+                            <div>
+                                <h1 className="text-xl font-semibold">食谱翻译工具</h1>
+                                <p className="text-sm text-muted-foreground">设置</p>
+                            </div>
+                        </div>
+                        <Link href="/">
+                            <Button variant="ghost" size="sm">
+                                返回首页
+                            </Button>
+                        </Link>
+                    </div>
+                </div>
+            </header>
+
+            <div className="mx-auto max-w-6xl px-4 py-8">
+                <div className="flex gap-8">
+                    {/* 左侧菜单 */}
+                    <aside className="w-64 shrink-0">
+                        <nav className="space-y-1">
+                            {settingsMenu.map((item) => {
+                                const Icon = item.icon;
+                                const isActive = pathname === item.href;
+                                return (
+                                    <Link
+                                        key={item.href}
+                                        href={item.href}
+                                        className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors ${
+                                            isActive
+                                                ? "bg-primary text-primary-foreground"
+                                                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+                                        }`}
+                                    >
+                                        <Icon className="h-4 w-4"/>
+                                        {item.title}
+                                        {isActive && <ChevronRight className="ml-auto h-4 w-4"/>}
+                                    </Link>
+                                );
+                            })}
+                        </nav>
+                    </aside>
+
+                    {/* 右侧内容 */}
+                    <main className="flex-1 rounded-xl border bg-card p-6">
+                        {children}
+                    </main>
+                </div>
+            </div>
+        </div>
+    );
+}