[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b5123723548191b1c79fea039b7765","versionInt","title","今天吃什么？ - 单文件 React 应用","type","code/react","content","import React, { useState, useMemo } from \"react\";\n\n// 单文件 React 组件：默认导出\n// 使用 TailwindCSS 进行样式（无需额外导入）\n\nconst INITIAL_FOODS = [\n // 经典中餐\n { name: \"麻婆豆腐\", periods: [\"午餐\", \"晚餐\"], flavors: [\"辣\", \"咸\"], budget: \"正常吃\" },\n { name: \"宫保鸡丁\", periods: [\"午餐\", \"晚餐\"], flavors: [\"甜\", \"辣\", \"咸\"], budget: \"正常吃\" },\n { name: \"鱼香肉丝\", periods: [\"午餐\", \"晚餐\"], flavors: [\"甜\", \"酸\", \"辣\"], budget: \"正常吃\" },\n { name: \"水煮牛肉\", periods: [\"晚餐\"], flavors: [\"辣\"], budget: \"奢侈一把\" },\n { name: \"糖醋里脊\", periods: [\"午餐\", \"晚餐\"], flavors: [\"甜\", \"酸\"], budget: \"正常吃\" },\n { name: \"回锅肉\", periods: [\"午餐\", \"晚餐\"], flavors: [\"辣\", \"咸\"], budget: \"正常吃\" },\n { name: \"地三鲜\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n { name: \"红烧排骨\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"甜\"], budget: \"正常吃\" },\n { name: \"清蒸鲈鱼\", periods: [\"晚餐\"], flavors: [\"清淡\", \"咸\"], budget: \"奢侈一把\" },\n { name: \"北京烤鸭\", periods: [\"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"奢侈一把\" },\n { name: \"酸菜鱼\", periods: [\"午餐\", \"晚餐\"], flavors: [\"酸\", \"辣\"], budget: \"正常吃\" },\n { name: \"扬州炒饭\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\"], budget: \"省钱\" },\n { name: \"兰州拉面\", periods: [\"午餐\"], flavors: [\"咸\", \"香\"], budget: \"省钱\" },\n { name: \"重庆小面\", periods: [\"早餐\", \"午餐\"], flavors: [\"辣\"], budget: \"省钱\" },\n { name: \"麻辣烫\", periods: [\"午餐\", \"晚餐\"], flavors: [\"辣\"], budget: \"正常吃\" },\n { name: \"麻辣香锅\", periods: [\"晚餐\"], flavors: [\"辣\", \"香\"], budget: \"正常吃\" },\n { name: \"广式烧腊饭\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"甜\"], budget: \"正常吃\" },\n { name: \"白切鸡\", periods: [\"午餐\", \"晚餐\"], flavors: [\"清淡\"], budget: \"正常吃\" },\n { name: \"小笼包\", periods: [\"早餐\", \"午餐\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n { name: \"火锅\", periods: [\"晚餐\", \"夜宵\"], flavors: [\"辣\", \"咸\", \"清淡\"], budget: \"奢侈一把\" },\n { name: \"羊肉串\", periods: [\"夜宵\"], flavors: [\"辣\", \"咸\"], budget: \"正常吃\" },\n { name: \"肉夹馍\", periods: [\"早餐\", \"午餐\"], flavors: [\"咸\", \"香\"], budget: \"省钱\" },\n { name: \"螺蛳粉\", periods: [\"午餐\", \"晚餐\"], flavors: [\"辣\", \"酸\"], budget: \"正常吃\" },\n { name: \"过桥米线\", periods: [\"午餐\", \"晚餐\"], flavors: [\"清淡\", \"咸\"], budget: \"正常吃\" },\n { name: \"潮汕牛肉火锅\", periods: [\"晚餐\"], flavors: [\"清淡\"], budget: \"奢侈一把\" },\n // 快手便当\n { name: \"肯德基套餐\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n { name: \"麦当劳套餐\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n { name: \"汉堡王套餐\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n { name: \"赛百味三明治\", periods: [\"午餐\"], flavors: [\"咸\", \"清淡\"], budget: \"正常吃\" },\n { name: \"方便面\", periods: [\"夜宵\"], flavors: [\"咸\"], budget: \"省钱\" },\n { name: \"便当盒饭\", periods: [\"午餐\"], flavors: [\"咸\"], budget: \"省钱\" },\n { name: \"寿司拼盘\", periods: [\"午餐\", \"晚餐\"], flavors: [\"清淡\"], budget: \"正常吃\" },\n { name: \"饭团\", periods: [\"早餐\", \"午餐\"], flavors: [\"咸\"], budget: \"省钱\" },\n { name: \"沙县小吃\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\"], budget: \"省钱\" },\n { name: \"黄焖鸡米饭\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n // 西餐/异国\n { name: \"披萨\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\", \"甜\"], budget: \"正常吃\" },\n { name: \"意式肉酱面\", periods: [\"午餐\", \"晚餐\"], flavors: [\"酸\", \"咸\"], budget: \"正常吃\" },\n { name: \"牛排\", periods: [\"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"奢侈一把\" },\n { name: \"奶油蘑菇汤\", periods: [\"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n { name: \"凯撒沙拉\", periods: [\"午餐\"], flavors: [\"清淡\"], budget: \"正常吃\" },\n { name: \"日式拉面\", periods: [\"午餐\", \"晚餐\"], flavors: [\"咸\"], budget: \"正常吃\" },\n { name: \"韩国部队火锅\", periods: [\"晚餐\"], flavors: [\"辣\", \"咸\"], budget: \"正常吃\" },\n { name: \"石锅拌饭\", periods: [\"午餐\", \"晚餐\"], flavors: [\"辣\", \"甜\"], budget: \"正常吃\" },\n { name: \"泰国冬阴功汤\", periods: [\"午餐\", \"晚餐\"], flavors: [\"酸\", \"辣\"], budget: \"正常吃\" },\n { name: \"绿咖喱鸡\", periods: [\"午餐\", \"晚餐\"], flavors: [\"辣\", \"甜\"], budget: \"正常吃\" },\n { name: \"越南火车头河粉\", periods: [\"午餐\", \"晚餐\"], flavors: [\"清淡\", \"酸\"], budget: \"正常吃\" },\n { name: \"墨西哥鸡肉卷\", periods: [\"午餐\"], flavors: [\"辣\", \"咸\"], budget: \"正常吃\" },\n { name: \"西班牙海鲜饭\", periods: [\"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"奢侈一把\" },\n { name: \"德国烤猪肘\", periods: [\"晚餐\"], flavors: [\"咸\", \"香\"], budget: \"奢侈一把\" },\n { name: \"印度咖喱\", periods: [\"午餐\", \"晚餐\"], flavors: [\"辣\", \"香\"], budget: \"正常吃\" },\n // 早餐/小吃/甜品\n { name: \"豆浆油条\", periods: [\"早餐\"], flavors: [\"咸\", \"甜\"], budget: \"省钱\" },\n { name: \"煎饼果子\", periods: [\"早餐\"], flavors: [\"咸\", \"香\"], budget: \"省钱\" },\n { name: \"茶叶蛋\", periods: [\"早餐\"], flavors: [\"咸\"], budget: \"省钱\" },\n { name: \"小米粥\", periods: [\"早餐\", \"夜宵\"], flavors: [\"清淡\", \"甜\"], budget: \"省钱\" },\n { name: \"肠粉\", periods: [\"早餐\"], flavors: [\"清淡\", \"咸\"], budget: \"省钱\" },\n { name: \"烧烤\", periods: [\"夜宵\"], flavors: [\"辣\", \"咸\"], budget: \"正常吃\" },\n { name: \"炸鸡\", periods: [\"晚餐\", \"夜宵\"], flavors: [\"咸\", \"香\"], budget: \"正常吃\" },\n { name: \"臭豆腐\", periods: [\"夜宵\"], flavors: [\"辣\"], budget: \"省钱\" },\n { name: \"奶茶\", periods: [\"夜宵\"], flavors: [\"甜\"], budget: \"正常吃\" },\n { name: \"双皮奶\", periods: [\"夜宵\"], flavors: [\"甜\"], budget: \"正常吃\" },\n { name: \"蛋糕\", periods: [\"夜宵\"], flavors: [\"甜\"], budget: \"奢侈一把\" },\n // 注意：原列表中重复的项已合并（例如重复出现的麻婆豆腐/宫保鸡丁）\n];\n\nconst PERIODS = [\"早餐\", \"午餐\", \"晚餐\", \"夜宵\"];\nconst FLAVORS = [\"辣\", \"甜\", \"咸\", \"酸\", \"清淡\", \"香\"];\nconst BUDGETS = [\"省钱\", \"正常吃\", \"奢侈一把\"];\n\nexport default function TodayEatApp() {\n const [foods, setFoods] = useState(INITIAL_FOODS);\n\n // 筛选状态\n const [selectedPeriod, setSelectedPeriod] = useState(\"\"); // 单选\n const [selectedFlavors, setSelectedFlavors] = useState([]); // 多选\n const [selectedBudget, setSelectedBudget] = useState(\"\"); // 单选\n\n const [result, setResult] = useState(\"今天我们吃...\");\n const [manageOpen, setManageOpen] = useState(false);\n\n // 新增项临时状态\n const [newName, setNewName] = useState(\"\");\n const [newPeriods, setNewPeriods] = useState([]);\n const [newFlavors, setNewFlavors] = useState([]);\n const [newBudget, setNewBudget] = useState(BUDGETS[1]);\n\n // 帮助：切换多选\n const toggleMulti = (val, arr, setArr) => {\n if (arr.includes(val)) setArr(arr.filter((a) => a !== val));\n else setArr([...arr, val]);\n };\n\n // 两步筛选逻辑\n const filterStep = (items) => {\n // 如果没有选择 period，则匹配全部 period（用户应该至少选择一个，但我们容错）\n const periodCond = (item) =>\n !selectedPeriod || item.periods.includes(selectedPeriod);\n const budgetCond = (item) => !selectedBudget || item.budget === selectedBudget;\n\n // 精确匹配：如果用户选择了口味，则要求菜品包含所有已选口味；否则只按 period+budget\n const exact = items.filter((item) => {\n if (!periodCond(item) || !budgetCond(item)) return false;\n if (selectedFlavors.length === 0) return true;\n return selectedFlavors.every((f) => item.flavors.includes(f));\n });\n if (exact.length > 0) return exact;\n\n // 放宽匹配：找到满足 period 和 budget 的，并且口味中包含任意一个已选口味（如果用户选择了口味）\n const relaxed = items.filter((item) => {\n if (!periodCond(item) || !budgetCond(item)) return false;\n if (selectedFlavors.length === 0) return true;\n return item.flavors.some((f) => selectedFlavors.includes(f));\n });\n return relaxed;\n };\n\n const handleRescue = () => {\n const candidates = filterStep(foods);\n if (!candidates || candidates.length === 0) {\n setResult(\"糟糕，你的菜单里没有符合条件的菜哦！\");\n return;\n }\n const pick = candidates[Math.floor(Math.random() * candidates.length)];\n setResult(pick.name);\n };\n\n // 管理列表功能\n const handleDelete = (index) => {\n setFoods((prev) => prev.filter((_, i) => i !== index));\n };\n\n const handleAdd = () => {\n const name = newName.trim();\n if (!name) return;\n const item = {\n name,\n periods: newPeriods.length ? newPeriods : PERIODS,\n flavors: newFlavors,\n budget: newBudget || BUDGETS[1],\n };\n setFoods((p) => [item, ...p]);\n // 重置\n setNewName(\"\");\n setNewPeriods([]);\n setNewFlavors([]);\n setNewBudget(BUDGETS[1]);\n };\n\n // 便捷计数显示\n const counts = useMemo(() => {\n return {\n total: foods.length,\n };\n }, [foods]);\n\n return (\n

今天吃什么？

选择你的时段 / 口味 / 预算，让我来拯救你的选择困难症 🎯

\n\n {/* 筛选区 */}\n

时段选择

\n {PERIODS.map((p) => (\n setSelectedPeriod(selectedPeriod === p ? \"\" : p)}\n className={`px-3 py-1 rounded-full border ${selectedPeriod === p ? \"bg-blue-600 text-white\" : \"bg-white text-gray-700\"}`}\n >\n {p}\n \n ))}\n

\n\n

口味选择（可多选）

\n {FLAVORS.map((f) => (\n toggleMulti(f, selectedFlavors, setSelectedFlavors)}\n className={`px-3 py-1 rounded-full border ${selectedFlavors.includes(f) ? \"bg-green-600 text-white\" : \"bg-white text-gray-700\"}`}\n >\n {f}\n \n ))}\n

\n\n

预算选择

\n {BUDGETS.map((b) => (\n setSelectedBudget(selectedBudget === b ? \"\" : b)}\n className={`px-3 py-1 rounded-full border ${selectedBudget === b ? \"bg-yellow-600 text-white\" : \"bg-white text-gray-700\"}`}\n >\n {b}\n \n ))}\n

\n\n {/* 大按钮 */}\n

\n \n 拯救我的选择困难症！\n \n

\n\n {/* 结果显示区 */}\n

\n {result}\n

\n\n {/* 管理我的菜单按钮 */}\n

\n setManageOpen(!manageOpen)}\n className=\"px-3 py-2 rounded-md border inline-flex items-center gap-2\"\n >\n 管理我的菜单 ({counts.total})\n {manageOpen ? \"收起\" : \"展开\"}\n \n

\n\n {/* 管理面板 */}\n {manageOpen && (\n

当前菜单（点击删除以移除）

\n {foods.map((f, idx) => (\n

{f.name}

{[f.periods.join(\"/\"), f.flavors.join(\"/\"), f.budget].join(\" • \")}

\n {\n // 将该菜名填入结果预览（便于快速测试）\n setResult(f.name);\n }}\n className=\"px-2 py-1 rounded border text-sm\"\n >\n 预览\n \n \n

\n ))}\n

\n\n

添加新菜品

\n setNewName(e.target.value)}\n />\n\n

选择时段（可多选，默认全部）

\n {PERIODS.map((p) => (\n toggleMulti(p, newPeriods, setNewPeriods)}\n className={`px-2 py-1 rounded-full border ${newPeriods.includes(p) ? \"bg-blue-600 text-white\" : \"bg-white text-gray-700\"}`}\n >\n {p}\n \n ))}\n

\n\n

选择口味（可多选）

\n {FLAVORS.map((f) => (\n toggleMulti(f, newFlavors, setNewFlavors)}\n className={`px-2 py-1 rounded-full border ${newFlavors.includes(f) ? \"bg-green-600 text-white\" : \"bg-white text-gray-700\"}`}\n >\n {f}\n \n ))}\n

\n\n

预算

\n {BUDGETS.map((b) => (\n setNewBudget(b)}\n className={`px-2 py-1 rounded-full border ${newBudget === b ? \"bg-yellow-600 text-white\" : \"bg-white text-gray-700\"}`}\n >\n {b}\n \n ))}\n

\n\n

\n \n {\n setNewName(\"\");\n setNewPeriods([]);\n setNewFlavors([]);\n setNewBudget(BUDGETS[1]);\n }}\n className=\"px-4 py-2 rounded border\"\n >\n 重置\n \n

\n\n

\n )}\n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","736136145036607385","traceTime",1777623301335]