feat: add context menu for individual dish AI translation
- Add right-click/click context menu on dishes in the main table - Menu includes 'AI 翻译 (Beta)' option - Translates single dish and updates the display immediately - Clicking outside closes the context menu
This commit is contained in:
+128
-19
@@ -13,7 +13,7 @@ import {
|
||||
Loader2,
|
||||
X,
|
||||
AlertCircle,
|
||||
Download, Settings,
|
||||
Download, Settings, Sparkles,
|
||||
} from "lucide-react";
|
||||
import Link from 'next/link'
|
||||
import {Button} from "@/components/ui/button";
|
||||
@@ -126,6 +126,24 @@ export default function RecipeTranslationPage() {
|
||||
orientation: "landscape",
|
||||
});
|
||||
|
||||
// 菜品浮框状态
|
||||
const [contextMenu, setContextMenu] = useState<{
|
||||
visible: boolean;
|
||||
x: number;
|
||||
y: number;
|
||||
dish: Dish | null;
|
||||
dayCode: number;
|
||||
mealCode: MealTypeCode;
|
||||
}>({ visible: false, x: 0, y: 0, dish: null, dayCode: 0, mealCode: MealTypeCode.BREAKFAST });
|
||||
const [aiTranslating, setAiTranslating] = useState(false);
|
||||
|
||||
// 关闭浮框
|
||||
useEffect(() => {
|
||||
const handleClick = () => setContextMenu((prev) => ({ ...prev, visible: false }));
|
||||
document.addEventListener("click", handleClick);
|
||||
return () => document.removeEventListener("click", handleClick);
|
||||
}, []);
|
||||
|
||||
// 加载导出配置
|
||||
useEffect(() => {
|
||||
fetch("/api/config")
|
||||
@@ -142,6 +160,53 @@ export default function RecipeTranslationPage() {
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
// 单个菜品 AI 翻译
|
||||
const handleAiTranslateSingle = useCallback(async () => {
|
||||
if (!contextMenu.dish || !contextMenu.dish.name.zh || !data) return;
|
||||
|
||||
setAiTranslating(true);
|
||||
try {
|
||||
const response = await fetch(`/api/ai/translate?word=${encodeURIComponent(contextMenu.dish.name.zh)}`);
|
||||
const result = await response.json();
|
||||
|
||||
if (result.english) {
|
||||
// 更新 data 中的翻译结果
|
||||
setData((prevData) => {
|
||||
if (!prevData) return null;
|
||||
return {
|
||||
...prevData,
|
||||
meals: prevData.meals.map((meal) => {
|
||||
if (meal.dayCode === contextMenu.dayCode && meal.mealCode === contextMenu.mealCode) {
|
||||
return {
|
||||
...meal,
|
||||
dishList: meal.dishList.map((dish) => {
|
||||
if (dish.id === contextMenu.dish?.id) {
|
||||
return {
|
||||
...dish,
|
||||
name: { ...dish.name, en: result.english },
|
||||
translated: true,
|
||||
};
|
||||
}
|
||||
return dish;
|
||||
}),
|
||||
};
|
||||
}
|
||||
return meal;
|
||||
}),
|
||||
};
|
||||
});
|
||||
setContextMenu((prev) => ({ ...prev, visible: false }));
|
||||
} else {
|
||||
alert(result.error || "翻译失败");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("AI translation error:", error);
|
||||
alert("翻译失败，请检查 AI 配置");
|
||||
} finally {
|
||||
setAiTranslating(false);
|
||||
}
|
||||
}, [contextMenu.dish, contextMenu.dayCode, contextMenu.mealCode, data]);
|
||||
|
||||
// 收集所有未翻译的菜品名称
|
||||
const getAllDishNames = useCallback((menu: WeeklyMenu): string[] => {
|
||||
const names: string[] = [];
|
||||
@@ -747,23 +812,34 @@ export default function RecipeTranslationPage() {
|
||||
(m) => m.dayCode === day.code && m.mealCode === meal.code
|
||||
);
|
||||
return (
|
||||
<td key={meal.code} className="px-4 py-3">
|
||||
<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"
|
||||
className="flex flex-col gap-0.5 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 -mx-1"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setContextMenu({
|
||||
visible: true,
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
dish,
|
||||
dayCode: day.code,
|
||||
mealCode: meal.code,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span style={{ color: dish.name.en ? undefined : exportConfig.untranslatedColor }}>
|
||||
{dish.name.zh}
|
||||
</span>
|
||||
{dish.name.en && (
|
||||
<span
|
||||
className="text-xs text-muted-foreground">
|
||||
{dish.name.en}
|
||||
</span>
|
||||
)}
|
||||
<span style={{ color: dish.name.en ? undefined : exportConfig.untranslatedColor }}>
|
||||
{dish.name.zh}
|
||||
</span>
|
||||
{dish.name.en && (
|
||||
<span
|
||||
className="text-xs text-muted-foreground">
|
||||
{dish.name.en}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
@@ -781,20 +857,31 @@ export default function RecipeTranslationPage() {
|
||||
m.dayCode === day.code &&
|
||||
m.mealCode === selectedMealType
|
||||
);
|
||||
return mealData?.dishList.length ? (
|
||||
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"
|
||||
className="flex flex-col gap-0.5 cursor-pointer hover:bg-muted/50 rounded px-1 -mx-1"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setContextMenu({
|
||||
visible: true,
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
dish,
|
||||
dayCode: day.code,
|
||||
mealCode: selectedMealType as MealTypeCode,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<span style={{ color: dish.name.en ? undefined : exportConfig.untranslatedColor }}>
|
||||
{dish.name.zh}
|
||||
</span>
|
||||
<span style={{ color: dish.name.en ? undefined : exportConfig.untranslatedColor }}>
|
||||
{dish.name.zh}
|
||||
</span>
|
||||
{dish.name.en && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{dish.name.en}
|
||||
</span>
|
||||
{dish.name.en}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@@ -813,6 +900,28 @@ export default function RecipeTranslationPage() {
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* 菜品浮框 */}
|
||||
{contextMenu.visible && contextMenu.dish && (
|
||||
<div
|
||||
className="fixed z-50 min-w-[160px] rounded-md border bg-background shadow-lg py-1"
|
||||
style={{ left: contextMenu.x, top: contextMenu.y }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<button
|
||||
className="flex w-full items-center gap-2 px-4 py-2 text-sm text-left hover:bg-muted/50 disabled:opacity-50"
|
||||
onClick={() => handleAiTranslateSingle()}
|
||||
disabled={aiTranslating || !contextMenu.dish?.name.zh}
|
||||
>
|
||||
{aiTranslating ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Sparkles className="h-4 w-4 text-primary" />
|
||||
)}
|
||||
<span>AI 翻译 (Beta)</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user