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
This commit is contained in:
+723
-63
@@ -1,65 +1,725 @@
|
||||
import Image from "next/image";
|
||||
"use client";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
import {useState, useCallback} from "react";
|
||||
import {
|
||||
Upload,
|
||||
Sun,
|
||||
Apple,
|
||||
UtensilsCrossed,
|
||||
Cookie,
|
||||
Heart,
|
||||
Languages,
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
X,
|
||||
AlertCircle,
|
||||
Download, Settings,
|
||||
} from "lucide-react";
|
||||
import Link from 'next/link'
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {
|
||||
Document,
|
||||
Packer,
|
||||
Table,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TextRun,
|
||||
Paragraph,
|
||||
AlignmentType,
|
||||
WidthType,
|
||||
PageOrientation,
|
||||
TableLayoutType
|
||||
} from "docx";
|
||||
|
||||
// 餐食类型
|
||||
enum MealTypeCode {
|
||||
BREAKFAST = "breakfast",
|
||||
FRUIT = "fruit",
|
||||
LUNCH = "lunch",
|
||||
SNACK = "snack",
|
||||
SPECIAL = "special",
|
||||
}
|
||||
|
||||
// 语言名称项
|
||||
interface LangName {
|
||||
zh: string;
|
||||
en?: string;
|
||||
}
|
||||
|
||||
// 单个菜品
|
||||
interface Dish {
|
||||
id?: string;
|
||||
name: LangName;
|
||||
translated?: boolean; // 是否已翻译
|
||||
}
|
||||
|
||||
// 单日食谱
|
||||
interface DailyMeal {
|
||||
dayCode: number;
|
||||
mealCode: MealTypeCode;
|
||||
dishList: Dish[];
|
||||
}
|
||||
|
||||
// 一周食谱
|
||||
interface WeeklyMenu {
|
||||
menuId?: string;
|
||||
weekNumber?: string;
|
||||
title: LangName;
|
||||
days: { code: number; name: LangName }[];
|
||||
mealCategories: { code: MealTypeCode; name: LangName; sort: number }[];
|
||||
meals: DailyMeal[];
|
||||
}
|
||||
|
||||
// 餐食类型配置 (体弱儿在第四位)
|
||||
const MEAL_TYPES = [
|
||||
{code: MealTypeCode.BREAKFAST, label: "早餐", icon: Sun},
|
||||
{code: MealTypeCode.FRUIT, label: "水果餐", icon: Apple},
|
||||
{code: MealTypeCode.LUNCH, label: "中餐", icon: UtensilsCrossed},
|
||||
{code: MealTypeCode.SPECIAL, label: "体弱儿餐", icon: Heart},
|
||||
{code: MealTypeCode.SNACK, label: "午点", icon: Cookie},
|
||||
];
|
||||
|
||||
type UploadState = "idle" | "uploading" | "parsing" | "done" | "error";
|
||||
type TranslateState = "idle" | "translating" | "done";
|
||||
|
||||
/**
|
||||
* 头部组件
|
||||
* */
|
||||
function HarderCompose() {
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-4 py-6">
|
||||
<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">Word 文档解析 · 智能翻译</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/settings">
|
||||
<Button variant="ghost" size="sm">
|
||||
<Settings className="h-4 w-4"/>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RecipeTranslationPage() {
|
||||
const [uploadState, setUploadState] = useState<UploadState>("idle");
|
||||
const [translateState, setTranslateState] = useState<TranslateState>("idle");
|
||||
const [selectedMealType, setSelectedMealType] = useState<MealTypeCode | "all">("all");
|
||||
const [data, setData] = useState<WeeklyMenu | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [fileName, setFileName] = useState<string>("");
|
||||
|
||||
// 收集所有未翻译的菜品名称
|
||||
const getAllDishNames = useCallback((menu: WeeklyMenu): string[] => {
|
||||
const names: string[] = [];
|
||||
for (const meal of menu.meals) {
|
||||
for (const dish of meal.dishList) {
|
||||
if (dish.name.zh && !dish.name.en) {
|
||||
names.push(dish.name.zh);
|
||||
}
|
||||
}
|
||||
}
|
||||
return [...new Set(names)]; // 去重
|
||||
}, []);
|
||||
|
||||
// 批量翻译
|
||||
const handleTranslateAll = useCallback(async () => {
|
||||
if (!data) return;
|
||||
|
||||
const dishNames = getAllDishNames(data);
|
||||
if (dishNames.length === 0) {
|
||||
alert("所有菜品都已翻译！");
|
||||
return;
|
||||
}
|
||||
|
||||
setTranslateState("translating");
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/translate", {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({names: dishNames}),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.error || "翻译失败");
|
||||
}
|
||||
|
||||
// 更新 data 中的翻译结果
|
||||
const translations = result.translations as Record<string, string | null>;
|
||||
|
||||
setData((prevData) => {
|
||||
if (!prevData) return null;
|
||||
|
||||
const newMeals = prevData.meals.map((meal) => ({
|
||||
...meal,
|
||||
dishList: meal.dishList.map((dish) => {
|
||||
const translation = dish.name.zh ? translations[dish.name.zh] : null;
|
||||
if (translation) {
|
||||
return {
|
||||
...dish,
|
||||
name: {...dish.name, en: translation},
|
||||
translated: true,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...dish,
|
||||
translated: dish.translated || false,
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
return {...prevData, meals: newMeals};
|
||||
});
|
||||
|
||||
setTranslateState("done");
|
||||
} catch (err) {
|
||||
console.error("Translation error:", err);
|
||||
alert("翻译失败，请重试");
|
||||
setTranslateState("idle");
|
||||
}
|
||||
}, [data, getAllDishNames]);
|
||||
|
||||
// 导出 Word 文档
|
||||
const handleExport = useCallback(async () => {
|
||||
if (!data) return;
|
||||
|
||||
try {
|
||||
// 1. 收集所有需要翻译的内容（星期、餐食类型、菜品）
|
||||
const allNames: string[] = [];
|
||||
|
||||
// 收集星期名称（使用实际数据中的星期）
|
||||
for (const day of data.days) {
|
||||
if (day.name.zh) {
|
||||
allNames.push(day.name.zh);
|
||||
}
|
||||
}
|
||||
|
||||
// 收集餐食类型名称
|
||||
for (const meal of MEAL_TYPES) {
|
||||
allNames.push(meal.label);
|
||||
}
|
||||
|
||||
// 收集所有菜品名称（去重）
|
||||
const dishNamesSet = new Set<string>();
|
||||
for (const meal of data.meals) {
|
||||
for (const dish of meal.dishList) {
|
||||
if (dish.name.zh) {
|
||||
dishNamesSet.add(dish.name.zh);
|
||||
}
|
||||
}
|
||||
}
|
||||
allNames.push(...dishNamesSet);
|
||||
|
||||
// 2. 调用翻译 API
|
||||
const response = await fetch("/api/translate", {
|
||||
method: "POST",
|
||||
headers: {"Content-Type": "application/json"},
|
||||
body: JSON.stringify({names: [...new Set(allNames)]}),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.error || "翻译失败");
|
||||
}
|
||||
|
||||
const translations = result.translations as Record<string, string | null>;
|
||||
|
||||
// 3. 构建翻译映射函数
|
||||
const t = (zh: string): string => translations[zh] || "";
|
||||
|
||||
// 4. 构建表格数据
|
||||
const tableRows: TableRow[] = [];
|
||||
|
||||
// 表头行 - 星期列头 + 餐食类型都要上中下英
|
||||
const headerCells: TableCell[] = [];
|
||||
const weekEnglish = translations["week"] || translations["Week"] || "Day";
|
||||
headerCells.push(
|
||||
new TableCell({
|
||||
children: [
|
||||
new Paragraph({children: [new TextRun({text: "星期 / Week", bold: true})]}),
|
||||
].filter((p): p is Paragraph => p !== null) as unknown as Paragraph[],
|
||||
width: {size: 12, type: WidthType.PERCENTAGE},
|
||||
}),
|
||||
);
|
||||
|
||||
for (const mealType of MEAL_TYPES) {
|
||||
const zhText = mealType.label;
|
||||
const enText = t(zhText);
|
||||
headerCells.push(
|
||||
new TableCell({
|
||||
children: [
|
||||
new Paragraph({children: [new TextRun({text: enText || zhText, bold: true})]}),
|
||||
enText ? new Paragraph({
|
||||
children: [new TextRun({
|
||||
text: zhText,
|
||||
color: "666666",
|
||||
size: 18
|
||||
})]
|
||||
}) : null,
|
||||
].filter((p): p is Paragraph => p !== null) as unknown as Paragraph[],
|
||||
width: {size: 17.6, type: WidthType.PERCENTAGE},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
tableRows.push(new TableRow({children: headerCells, tableHeader: true}));
|
||||
|
||||
// 数据行（使用实际数据中的星期）- 上中下英
|
||||
for (const day of data.days) {
|
||||
const dayZh = day.name.zh || "";
|
||||
const dayEn = t(dayZh) || translations[dayZh] || "";
|
||||
const dayCells: TableCell[] = [
|
||||
new TableCell({
|
||||
children: [
|
||||
new Paragraph({children: [new TextRun({text: dayZh})]}),
|
||||
dayEn ? new Paragraph({
|
||||
children: [new TextRun({
|
||||
text: dayEn,
|
||||
color: "666666",
|
||||
size: 18
|
||||
})]
|
||||
}) : null,
|
||||
].filter((p): p is Paragraph => p !== null) as unknown as Paragraph[],
|
||||
}),
|
||||
];
|
||||
|
||||
for (const mealType of MEAL_TYPES) {
|
||||
const mealData = data.meals.find(
|
||||
(m) => m.dayCode === day.code && m.mealCode === mealType.code
|
||||
);
|
||||
|
||||
const cellContent: Paragraph[] = [];
|
||||
|
||||
if (mealData?.dishList && mealData.dishList.length > 0) {
|
||||
for (const dish of mealData.dishList) {
|
||||
const zhText = dish.name.zh;
|
||||
const enText = dish.name.en || t(zhText);
|
||||
|
||||
if (enText) {
|
||||
cellContent.push(
|
||||
new Paragraph({
|
||||
children: [new TextRun({text: zhText})],
|
||||
})
|
||||
);
|
||||
cellContent.push(
|
||||
new Paragraph({
|
||||
children: [new TextRun({text: enText, color: "666666", size: 18})],
|
||||
})
|
||||
);
|
||||
} else {
|
||||
cellContent.push(
|
||||
new Paragraph({
|
||||
children: [new TextRun({text: zhText, color: "CC0000"})],
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
cellContent.push(new Paragraph({children: [new TextRun({text: "—", color: "999999"})]}));
|
||||
}
|
||||
|
||||
dayCells.push(
|
||||
new TableCell({
|
||||
children: cellContent,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
tableRows.push(new TableRow({children: dayCells}));
|
||||
}
|
||||
|
||||
// 5. 创建文档 - 横向 A4
|
||||
const doc = new Document({
|
||||
sections: [
|
||||
{
|
||||
properties: {
|
||||
page: {
|
||||
size: {
|
||||
orientation: PageOrientation.LANDSCAPE,
|
||||
width: 11906,
|
||||
height: 16838,
|
||||
},
|
||||
margin: {
|
||||
top: 700, // 约1.27厘米
|
||||
bottom: 700,
|
||||
left: 900, // 约1.9厘米
|
||||
right: 900,
|
||||
},
|
||||
},
|
||||
},
|
||||
children: [
|
||||
new Paragraph({
|
||||
children: [
|
||||
new TextRun({
|
||||
text: t(data.title?.zh || "食谱") || data.title?.zh || "食谱",
|
||||
bold: true,
|
||||
size: 32,
|
||||
}),
|
||||
],
|
||||
alignment: AlignmentType.CENTER,
|
||||
}),
|
||||
new Paragraph({children: []}),
|
||||
new Table({
|
||||
rows: tableRows,
|
||||
width: {size: 100, type: WidthType.PERCENTAGE},
|
||||
layout: TableLayoutType.FIXED,
|
||||
}),
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 6. 生成并下载
|
||||
const blob = await Packer.toBlob(doc);
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `${fileName || data.title?.zh || "食谱翻译"}.docx`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
console.error("Export error:", err);
|
||||
alert("导出失败，请重试");
|
||||
}
|
||||
}, [data, fileName]);
|
||||
|
||||
const handleFileUpload = useCallback(
|
||||
async (file: File) => {
|
||||
if (!file.name.endsWith(".docx")) {
|
||||
setError("请上传 .docx 格式的文件");
|
||||
setUploadState("error");
|
||||
return;
|
||||
}
|
||||
|
||||
setUploadState("uploading");
|
||||
setError(null);
|
||||
setTranslateState("idle");
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
setUploadState("parsing");
|
||||
|
||||
const response = await fetch("/api/recipe", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.error || "解析失败");
|
||||
}
|
||||
|
||||
setData(result.data);
|
||||
setFileName(file.name.replace(/\.docx$/i, ""));
|
||||
setUploadState("done");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "文件解析失败，请检查格式");
|
||||
setUploadState("error");
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) handleFileUpload(file);
|
||||
},
|
||||
[handleFileUpload]
|
||||
);
|
||||
|
||||
const handleFileInput = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) handleFileUpload(file);
|
||||
},
|
||||
[handleFileUpload]
|
||||
);
|
||||
|
||||
const reset = () => {
|
||||
setUploadState("idle");
|
||||
setData(null);
|
||||
setError(null);
|
||||
setTranslateState("idle");
|
||||
setSelectedMealType("all");
|
||||
setFileName("");
|
||||
};
|
||||
|
||||
// 统计翻译状态
|
||||
const untranslatedCount = data ? getAllDishNames(data).length : 0;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="border-b bg-card">
|
||||
<HarderCompose/>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-6xl px-4 py-8">
|
||||
{/* Upload Zone - 闲置状态 */}
|
||||
{uploadState === "idle" && (
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
className="group relative flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-border bg-muted/50 p-12 transition-all hover:border-primary/50 hover:bg-muted"
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
accept=".docx"
|
||||
onChange={handleFileInput}
|
||||
className="absolute inset-0 cursor-pointer opacity-0"
|
||||
/>
|
||||
<div
|
||||
className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary transition-transform group-hover:scale-110">
|
||||
<Upload className="h-8 w-8"/>
|
||||
</div>
|
||||
<p className="mb-1 text-lg font-medium">点击上传或拖拽 Word 文档</p>
|
||||
<p className="text-sm text-muted-foreground">支持 .docx 格式</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 上传中 */}
|
||||
{uploadState === "uploading" && (
|
||||
<div className="flex flex-col items-center justify-center rounded-2xl border bg-card p-12">
|
||||
<Loader2 className="mb-4 h-12 w-12 animate-spin text-primary"/>
|
||||
<p className="text-lg font-medium">正在上传文件...</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 解析中 */}
|
||||
{uploadState === "parsing" && (
|
||||
<div className="flex flex-col items-center justify-center rounded-2xl border bg-card p-12">
|
||||
<Loader2 className="mb-4 h-12 w-12 animate-spin text-primary"/>
|
||||
<p className="text-lg font-medium">正在解析文档内容...</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">提取文字并识别食谱结构</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 错误状态 */}
|
||||
{uploadState === "error" && (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center rounded-2xl border border-destructive/50 bg-destructive/5 p-12">
|
||||
<div
|
||||
className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10 text-destructive">
|
||||
<X className="h-8 w-8"/>
|
||||
</div>
|
||||
<p className="mb-1 text-lg font-medium text-destructive">{error}</p>
|
||||
<Button variant="outline" onClick={reset} className="mt-4">
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 完成 - 显示结果 */}
|
||||
{uploadState === "done" && data && (
|
||||
<div className="space-y-6">
|
||||
{/* 成功提示 + 重新上传 */}
|
||||
<div className="flex items-center justify-between rounded-xl border bg-card p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle2 className="h-5 w-5 text-primary"/>
|
||||
<span className="font-medium">文档解析完成</span>
|
||||
<span className="text-sm text-muted-foreground">{data.title.zh}</span>
|
||||
{untranslatedCount > 0 && translateState !== "translating" && (
|
||||
<span className="flex items-center gap-1 text-sm text-destructive">
|
||||
<AlertCircle className="h-4 w-4"/>
|
||||
{untranslatedCount} 个菜品待翻译
|
||||
</span>
|
||||
)}
|
||||
{translateState === "done" && untranslatedCount === 0 && (
|
||||
<span className="flex items-center gap-1 text-sm text-green-600">
|
||||
<CheckCircle2 className="h-4 w-4"/>
|
||||
全部翻译完成
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={reset}>
|
||||
重新上传
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 餐食类型筛选 + 操作按钮 */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
{/* 餐食类型筛选 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant={selectedMealType === "all" ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setSelectedMealType("all")}
|
||||
>
|
||||
全部
|
||||
</Button>
|
||||
{MEAL_TYPES.map((meal) => {
|
||||
const Icon = meal.icon;
|
||||
return (
|
||||
<Button
|
||||
key={meal.code}
|
||||
variant={selectedMealType === meal.code ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setSelectedMealType(meal.code)}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Icon className="h-4 w-4"/>
|
||||
{meal.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="gap-2"
|
||||
onClick={handleExport}
|
||||
disabled={translateState === "translating"}
|
||||
>
|
||||
<Download className="h-4 w-4"/>
|
||||
导出翻译结果
|
||||
</Button>
|
||||
<Button
|
||||
className="gap-2"
|
||||
onClick={handleTranslateAll}
|
||||
disabled={translateState === "translating" || untranslatedCount === 0}
|
||||
>
|
||||
{translateState === "translating" ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin"/>
|
||||
翻译中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Languages className="h-4 w-4"/>
|
||||
一键翻译全部
|
||||
{untranslatedCount > 0 &&
|
||||
<span className="text-xs opacity-70">({untranslatedCount})</span>}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 食谱表格 */}
|
||||
<div className="overflow-x-auto rounded-xl border bg-card">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b bg-muted/50">
|
||||
<th className="min-w-[80px] px-4 py-3 text-left font-medium">星期</th>
|
||||
{selectedMealType === "all"
|
||||
? MEAL_TYPES.map((meal) => {
|
||||
const Icon = meal.icon;
|
||||
return (
|
||||
<th key={meal.code} className="px-4 py-3 text-center font-medium">
|
||||
<div className="flex items-center justify-center gap-1.5">
|
||||
<Icon className="h-4 w-4"/>
|
||||
{meal.label}
|
||||
</div>
|
||||
</th>
|
||||
);
|
||||
})
|
||||
: MEAL_TYPES.find((m) => m.code === selectedMealType)?.icon && (
|
||||
<th className="px-4 py-3 text-center font-medium">
|
||||
{
|
||||
MEAL_TYPES.find((m) => m.code === selectedMealType)
|
||||
?.label
|
||||
}
|
||||
</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.days.map((day) => (
|
||||
<tr key={day.code} className="border-b last:border-0 hover:bg-muted/30">
|
||||
<td className="px-4 py-3 font-medium">{day.name.zh}</td>
|
||||
{selectedMealType === "all" ? (
|
||||
MEAL_TYPES.map((meal) => {
|
||||
const mealData = data.meals.find(
|
||||
(m) => m.dayCode === day.code && m.mealCode === meal.code
|
||||
);
|
||||
return (
|
||||
<td key={meal.code} className="px-4 py-3">
|
||||
<div className="flex flex-col gap-1">
|
||||
{mealData?.dishList.length ? (
|
||||
mealData.dishList.map((dish) => (
|
||||
<div
|
||||
key={dish.id}
|
||||
className="flex flex-col gap-0.5 text-sm"
|
||||
>
|
||||
<span className={dish.name.en ? "text-foreground" : "text-destructive"}>
|
||||
{dish.name.zh}
|
||||
</span>
|
||||
{dish.name.en && (
|
||||
<span
|
||||
className="text-xs text-muted-foreground">
|
||||
{dish.name.en}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<td className="px-4 py-3">
|
||||
{(() => {
|
||||
const mealData = data.meals.find(
|
||||
(m) =>
|
||||
m.dayCode === day.code &&
|
||||
m.mealCode === selectedMealType
|
||||
);
|
||||
return mealData?.dishList.length ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{mealData.dishList.map((dish) => (
|
||||
<div
|
||||
key={dish.id}
|
||||
className="flex flex-col gap-0.5"
|
||||
>
|
||||
<span className={dish.name.en ? "text-foreground" : "text-destructive"}>
|
||||
{dish.name.zh}
|
||||
</span>
|
||||
{dish.name.en && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{dish.name.en}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">—</span>
|
||||
);
|
||||
})()}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user