import React, { useState, useMemo } from 'react'; import { Search, ChevronLeft, ChevronRight, Home, BookOpen, Heart, Shield, Users, Menu, X, Lock, KeyRound } from 'lucide-react'; // --- 数据源整理 --- const MANTRA = { id: 'mantra', category: '心法', title: '春节防内耗六字诀', content: [ { text: '亲戚闲话耳边过', sub: '认知隔离：噪音不入心' }, { text: '爸妈情绪不背锅', sub: '拒绝勒索：责任分清楚' }, { text: '别人炫耀当看戏', sub: '心态抽离：那是他的舞台' }, { text: '我是客人笑呵呵', sub: '角色定位：客气且疏离' }, { text: '累了就把房门锁', sub: '物理防御：黄金15分钟' }, { text: '演完七天回真我', sub: '终极盼头：这一切都是暂时的' } ] }; const SCENARIOS = [ // --- 模块1：父母篇 --- { id: 'p1-1', category: '父母沟通篇', subCategory: '催婚与催生', title: '单身者：直接催促', scene: '“你也老大不小了，咋还不找对象？隔壁谁谁都二胎了。”', keywords: ['对象', '男朋友', '女朋友', '结婚', '单身', '催婚', '没人要', '另一半'], replies: [ { type: '正常', content: '是啊，这事儿确实挺重要的，我也在留意着，您放心，有合适的肯定第一时间告诉您。' }, { type: '幽默', content: '哎呀妈，主要是您把我生得太优秀了，一般人我也看不上啊，这不得慢慢挑个配得上咱家基因的嘛。' }, { type: '转移', content: '这事儿不急。哎，妈您这道鱼是怎么做的？味道跟我小时候吃的一模一样，快教教我。' } ] }, { id: 'p1-2', category: '父母沟通篇', subCategory: '催婚与催生', title: '单身者：否定标准', scene: '“别挑了，眼光别太高，差不多就行了，过日子哪有完美的。”', keywords: ['眼光高', '挑剔', '要求高', '标准', '完美', '凑合'], replies: [ { type: '正常', content: '您说得对，过日子确实得踏实。我会调整心态的，您别操心了，快趁热吃菜。' }, { type: '幽默', content: '那不行啊，我要是随便找一个，那不是砸了您二老“培养出优秀儿女”的金字招牌嘛？' }, { type: '转移', content: '说到过日子，还是您和爸厉害。当初爸是哪一点打动您的呀？给我讲讲当年的故事呗。' } ] }, { id: 'p1-3', category: '父母沟通篇', subCategory: '催婚与催生', title: '单身者：安排相亲', scene: '“初三必须去见你二姨介绍那个，人挺老实的，工作也稳定。”', keywords: ['相亲', '介绍', '二姨', '见面', '老实人'], replies: [ { type: '正常', content: '行，二姨的一番心意我领了。不过初三我有几个老同学约好了要聚，时间可能有点紧，我回头跟二姨联系看看。' }, { type: '幽默', content: '哇，二姨这效率也太高了！不过算命的说我今年犯太岁，不宜相亲，不然容易把对方克跑了，还是别祸害人家了。' }, { type: '转移', content: '相亲的事回头再说。对了，二姨最近身体怎么样？上次听她说腿疼，现在好点了吗？' } ] }, { id: 'p1-4', category: '父母沟通篇', subCategory: '催婚与催生', title: '单身者：质疑取向/能力', scene: '“你是不是有什么问题？这么大人了连个对象都带不回来。”', keywords: ['心理问题', '有病', '取向', '不喜欢异性', '没本事', '同性恋'], replies: [ { type: '正常', content: '妈，我身体和心理都很健康，只是缘分没到。咱们大过年的，聊点开心的，别说这些丧气话。' }, { type: '幽默', content: '我有问题？我最大的问题就是太爱工作了，老板都想给我颁发“年度最佳单身员工奖”呢，奖金可不少哦。' }, { type: '转移', content: '能有什么问题呀！来来来，大过年的不提这个，给您发个红包开心一下，祝您二老身体健康！' } ] }, { id: 'p1-5', category: '父母沟通篇', subCategory: '催婚与催生', title: '已婚者：催生一胎', scene: '“趁我们还能带，赶紧生一个，晚了对身体不好。”', keywords: ['生孩子', '抱孙子', '怀孕', '备孕', '小孩', '早生'], replies: [ { type: '正常', content: '知道您二老想抱孙子，也想帮我们分担。这事儿我们在计划了，等时机成熟肯定让您忙个够。' }, { type: '幽默', content: '哎呀，现在生孩子得摇号啊（开玩笑），我们正在向老天爷排队申请呢，您再耐心等等哈。' }, { type: '转移', content: '这事儿急不来。对了，表姐家的孩子今年考得怎么样？听说报了不少兴趣班，现在孩子压力也大啊。' } ] }, { id: 'p1-6', category: '父母沟通篇', subCategory: '催婚与催生', title: '已婚者：催生二胎/三胎', scene: '“一个孩子太孤单了，还是得有个伴，再生一个吧。”', keywords: ['二胎', '三胎', '生二孩', '要老二', '弟弟', '妹妹', '伴', '孤单'], replies: [ { type: '正常', content: '有个伴确实好，不过现在养孩子成本高，我们想先把老大的教育搞好，精力实在顾不过来。' }, { type: '幽默', content: '行啊，只要您二老赞助个几百万教育基金，我立马辞职回家专门生孩子，这买卖划算！' }, { type: '转移', content: '这事以后再说。快看，您大孙子刚才画了幅画，说是专门送给您的，快去看看画得像不像。' } ] }, { id: 'p1-7', category: '父母沟通篇', subCategory: '催婚与催生', title: '已婚者：性别偏好暗示', scene: '“虽然现在生男生女都一样，但如果能凑个‘好’字就更圆满了。”', keywords: ['重男轻女', '生男孩', '孙子', '孙女', '传宗接代', '好字'], replies: [ { type: '正常', content: '儿女都是缘分，现在的孩子只要健康快乐，比什么都强。咱们家现在这样挺幸福的。' }, { type: '幽默', content: '妈，现在都流行“女儿是招商银行”，再生个“建设银行”咱们家就破产了，还是留点钱给您二老旅游吧。' }, { type: '转移', content: '哎，电视上这个小品挺逗的，这演员是不是去年也上过春晚？快看快看。' } ] }, { id: 'p2-1', category: '父母沟通篇', subCategory: '情绪勒索', title: '付出感绑架：自我感动', scene: '“我这辈子不都是为了你吗？我省吃俭用供你读书，你现在就这样对我？”', keywords: ['辛苦', '不容易', '白眼狼', '没良心', '供你读书', '为了你'], replies: [ { type: '正常', content: '妈，我知道您不容易，为了这个家付出了很多，我都记在心里呢。我这也不是针对您，就是事论事。' }, { type: '幽默', content: '是是是，您就是咱家的功臣，应该给您颁个“感动中国母亲奖”！来，我给您捏捏肩，消消气。' }, { type: '转移', content: '妈，您辛苦了。哎呀，我手机响了，老板找我有急事，我得回房间接个电话，晚点再陪您聊。' } ] }, { id: 'p2-2', category: '父母沟通篇', subCategory: '情绪勒索', title: '付出感绑架：身体代价', scene: '“为了操心你的事，我头发都白了/身体都熬坏了，你还不让人省心。”', keywords: ['身体不好', '操心', '累出病', '头发白了', '生病'], replies: [ { type: '正常', content: '所以我才更希望您照顾好自己啊，儿孙自有儿孙福，您把身体养好，就是帮我最大的忙了。' }, { type: '幽默', content: '那为了您的秀发和健康，我决定——立刻闭嘴！从现在开始我就是个哑巴，绝不让您操心。' }, { type: '转移', content: '哎哟，那得赶紧补补。我这次带回来的那个补品，您记得按时吃了吗？那个对身体特好。' } ] }, { id: 'p2-3', category: '父母沟通篇', subCategory: '情绪勒索', title: '不孝指控：比较式打击', scene: '“你看人家老王的孩子多孝顺，过年给家里买这买那，你连个电话都少。”', keywords: ['别人家孩子', '比较', '老王', '孝顺', '不打电话', '没良心'], replies: [ { type: '正常', content: '确实是我平时工作太忙，疏忽了。以后我定个闹钟，争取每周都给您打个电话，向老王家孩子学习。' }, { type: '幽默', content: '老王家孩子是挺好，但听说他那发际线都快到后脑勺了？看来还是我这种“不孝顺”的让您看着舒心点，至少头发还在。' }, { type: '转移', content: '妈，别提老王了。我这次给您买的那件羽绒服您试了吗？我觉得那个颜色特衬您肤色，快穿上给我看看。' } ] }, { id: 'p3-1', category: '父母沟通篇', subCategory: '边界入侵', title: '职业否定：不稳论', scene: '“你那工作不就是打工吗？随时可能被裁，不如考个公务员实在。”', keywords: ['公务员', '铁饭碗', '编制', '不稳定', '工作', '打工', '裁员'], replies: [ { type: '正常', content: '公务员确实稳定，不过我现在这工作能学到不少东西，前景也不错。您放心，我有职业规划的。' }, { type: '幽默', content: '是是是，我这就是给资本家打工的命。不过趁年轻多赚点是一点，等老了再回来考“老年大学”的编制。' }, { type: '转移', content: '现在公务员也不容易。哎，妈您看新闻了吗？最近那个谁谁谁的演唱会票都抢疯了，现在的年轻人真舍得花钱。' } ] }, { id: 'p3-2', category: '父母沟通篇', subCategory: '边界入侵', title: '职业否定：收入刺探', scene: '“一个月到底挣多少？怎么还没存下钱？是不是都在外面乱花了？”', keywords: ['工资', '收入', '赚钱', '存钱', '月薪', '多少钱', '乱花钱'], replies: [ { type: '正常', content: '哎呀，今年大环境不好，公司没裁员就算烧高香了，工资也就刚够温饱，哪还有闲钱乱花啊。' }, { type: '幽默', content: '挣得肯定不如您二老当年“含金量”高啊！现在的钱毛得快，我这点工资也就够给您买两件衣服，还是您有福气，退休金旱涝保收。' }, { type: '转移', content: '别提钱了，提钱伤感情。对了，家里暖气费交了吗？没交的话我一会手机上给您交了。' } ] }, { id: 'p4-1', category: '父母沟通篇', subCategory: '显微镜监控', title: '作息干涉：早起强迫症', scene: '“大过年的睡什么懒觉？太阳都晒屁股了，赶紧起来吃早饭！”', keywords: ['睡懒觉', '起床', '早饭', '赖床', '太阳晒屁股', '晚起'], replies: [ { type: '正常', content: '醒了醒了，这就起。您先吃，别等我，我洗把脸就来。（然后继续磨蹭）' }, { type: '幽默', content: '妈，我这是在倒时差呢！我平时的生物钟是“美国时间”，您得让我慢慢调整回“北京时间”啊。' }, { type: '转移', content: '好香啊！我闻到香味就醒了。妈您今天早饭做的啥？闻着像是有炸带鱼？' } ] }, // --- 模块2：亲戚篇 --- { id: 'r-1', category: '亲戚沟通篇', subCategory: '财务与工作', title: '薪资与存款盘问', scene: '问月薪、问年终奖、问存了多少钱、哭穷式打听。', keywords: ['工资', '收入', '年终奖', '存钱', '借钱', '混得怎么样', '待遇', '赚钱'], replies: [ { type: '正常', content: '哎呀二姨，现在大环境您也知道，公司不裁员就谢天谢地了。我就挣个辛苦钱，刚好够在大城市吃饭租房，剩不下啥，还得指望家里支援点呢。' }, { type: '幽默', content: '那可多了！我有五千万——千万要开心，千万要快乐，千万要健康...（此时迅速给长辈倒酒），来，我也祝您拥有这五千万！' }, { type: '回怼', content: '刚够花。对了二姨，我最近刚好想换个大点的房子/投资个项目，正缺个二十万首付，您看您手头宽裕不？借我周转两年？' } ] }, { id: 'r-2', category: '亲戚沟通篇', subCategory: '财务与工作', title: '房产与车子拷问', scene: '怎么还租房、买在哪了、车子不够好。', keywords: ['买房', '买车', '房价', '租房', '房子', '车子'], replies: [ { type: '正常', content: '我也想买/换好的呀，但现在房价/车价太不稳定了。还是二姨您眼光好，买得早，现在享福了。我这还得再奋斗几年，到时候还得请教您经验呢。' }, { type: '幽默', content: '我不买房是因为我喜欢流浪，世界那么大，我想去看看。买了房就被困住了，我这人就是崇尚自由，灵魂不能有枷锁！' }, { type: '回怼', content: '现在租售比这么差，买房就是给银行打工。我算过账了，租房最划算，省下来的钱我自己吃喝玩乐，不香吗？为什么要背几百万债过苦日子？' } ] }, { id: 'r-3', category: '亲戚沟通篇', subCategory: '婚恋八卦', title: '婚恋进度施压', scene: '催找对象、单身羞辱、挑剔眼光高。', keywords: ['找对象', '结婚', '单身', '催婚', '男朋友', '女朋友'], replies: [ { type: '正常', content: '正看着呢，但这事儿得看缘分，也不能大街上随便拉一个回来气您不是？放心，有合适的我肯定第一时间带回来给您把关。' }, { type: '幽默', content: '我也急啊！但我前两天找大师算了，大师说我今年“红鸾星不动”，强求容易破财。为了咱们家的财运，我决定还是听大师的，再等等！' }, { type: '回怼', content: '这种事儿急不来。对了二姨，表哥/表姐当年结婚那么急，现在过得咋样啊？没吵架吧？我觉得还是得想清楚了再结，对自己负责。' } ] }, { id: 'r-4', category: '亲戚沟通篇', subCategory: '婚恋八卦', title: '催生与二胎', scene: '趁年轻赶紧生、一个孩子太孤单。', keywords: ['生孩子', '二胎', '养孩子', '怀孕', '备孕'], replies: [ { type: '正常', content: '我们也想生啊，但现在养个吞金兽太贵了。光补习班一年就得大几万。二姨您要是有什么发财路子带带我，钱赚够了我马上生！' }, { type: '幽默', content: '我也在等国家政策呢！听说马上发房子发钱了，这时候生岂不是亏了？我得帮咱们家薅国家羊毛，等福利到位了再说！' }, { type: '回怼', content: '生孩子简单，养孩子难啊。要不这样，生下来给您带？奶粉钱、教育费您也赞助点？您要是愿意签个“抚养赞助协议”，我明天就备孕。' } ] }, { id: 'r-5', category: '亲戚沟通篇', subCategory: '比较与打压', title: '“别人家孩子”恶意比较', scene: '表哥买宝马了、隔壁小王当初中没毕业都发财了。', keywords: ['别人家孩子', '表哥', '发财', '混得好', '比较', '不如别人'], replies: [ { type: '正常', content: '那是，表哥/小王一直都比我聪明，人家那是真本事。我这脑子笨，只能慢慢熬。咱们家族有他在，也是咱们的福气，以后我混不下去了去找他投奔！' }, { type: '幽默', content: '哇！他赚这么多啊？太好了！二姨您把他也拉进群呗，过年让他发个大红包，让我们也沾沾光！不能光说不练呀！' }, { type: '回怼', content: '赚钱是厉害。不过我看他朋友圈天天凌晨还在应酬，头发都掉了不少。我觉得还是身体重要，像我这样虽然钱少点，但吃得香睡得着，体检指标全绿，这才叫赚了。' } ] }, { id: 'r-7', category: '亲戚沟通篇', subCategory: '白嫖与占便宜', title: '技能白嫖', scene: '你是学XX的，帮我弄一下（修电脑/看病/代购）。', keywords: ['修电脑', '代购', '看病', '帮忙', '白嫖', '免费'], replies: [ { type: '正常', content: '二舅，这个（修电脑/看病）需要专业设备/详细检查，我手头没工具，弄坏了反而麻烦。我推荐您去个靠谱的店/医院，虽然花点钱，但有保障。' }, { type: '幽默', content: '行啊！熟人打八折。平时我接这活儿收500，收您400就行。二维码扫这里，款到立刻开工！过年嘛，您肯定不会让晚辈白干活对吧？' }, { type: '回怼', content: '这忙我帮不了。上次帮人修/看，结果出了点小问题，人家反过来怪我。为了咱们亲戚感情，这种责任重的事儿我坚决不碰。' } ] }, { id: 'r-9', category: '亲戚沟通篇', subCategory: '外貌评价', title: '外貌指指点点', scene: '胖了、瘦了、黑了、老了。', keywords: ['胖', '瘦', '黑', '老', '丑', '变样了', '减肥'], replies: [ { type: '正常', content: '是稍微圆润了点，这说明大城市伙食好，有福气嘛！身体健康最重要，只要不生病，胖点瘦点都是小事。' }, { type: '幽默', content: '这不叫胖，这叫“知识膨胀”！我在外面学到的知识太多了，脑子装不下，只能溢出来存到肚皮上了。' }, { type: '回怼', content: '我觉得我现在这样挺好的呀，这种风格在外面可流行了。咱们审美不一样很正常，您觉得不好看没关系，我自己看着顺眼就行。' } ] }, { id: 'r-11', category: '亲戚沟通篇', subCategory: '熊孩子与熊家长', title: '熊孩子索要/破坏物品', scene: '我要你的手办、我要玩你的Switch。', keywords: ['熊孩子', '手办', '玩具', 'Switch', '游戏机', '弄坏', '抢东西'], replies: [ { type: '正常', content: '哎呀，这个是哥哥/姐姐借别人的，得还。来，哥哥给你准备了这个（便宜零食/小玩具），这个更好玩，拿着去那边玩。' }, { type: '幽默', content: '这个手办被施了魔法，小孩子碰了晚上会尿床哦！只有大人能碰。你不信？上次那个谁碰了，尿了一星期……' }, { type: '回怼', content: '可以给，这个买的时候三千。二姨，您把钱转我，我就给弟弟了。亲兄弟明算账，教育孩子得从小教他“买东西要花钱”的道理。' } ] } ]; const COLORS = { primary: 'bg-red-700', secondary: 'bg-red-50', accent: 'text-amber-600', badge: { 正常: 'bg-blue-100 text-blue-800', 幽默: 'bg-amber-100 text-amber-800', 转移: 'bg-green-100 text-green-800', 回怼: 'bg-purple-100 text-purple-800' } }; const LoginView = ({ onLogin }) => { const [input, setInput] = useState(''); const [error, setError] = useState(false); const handleSubmit = (e) => { e.preventDefault(); if (input === 'sxl2026') { onLogin(true); } else { setError(true); setInput(''); } }; return (
福

欢迎回来

请输入访问密码开启防内耗工具包

{ setInput(e.target.value); setError(false); }} placeholder="访问密码" className={`w-full pl-10 pr-4 py-3 border rounded-xl outline-none transition-all ${error ? 'border-red-500 bg-red-50 focus:ring-2 focus:ring-red-200' : 'border-gray-200 focus:border-red-500 focus:ring-2 focus:ring-red-100'}`} />
{error &&

密码错误，请重试

}

祝您新春快乐，万事如意

); }; const App = () => { const [isAuthenticated, setIsAuthenticated] = useState(false); const [view, setView] = useState('directory'); // directory, card const [currentIndex, setCurrentIndex] = useState(0); const [searchQuery, setSearchQuery] = useState(''); // 搜索逻辑 const filteredScenarios = useMemo(() => { if (!searchQuery) return SCENARIOS; const lowerQ = searchQuery.toLowerCase(); return SCENARIOS.filter( item => item.title.toLowerCase().includes(lowerQ) || item.scene.toLowerCase().includes(lowerQ) || item.category.toLowerCase().includes(lowerQ) || item.subCategory.toLowerCase().includes(lowerQ) || (item.keywords && item.keywords.some(k => k.toLowerCase().includes(lowerQ))) ); }, [searchQuery]); // 导航逻辑 const handleScenarioClick = (id) => { const index = SCENARIOS.findIndex(s => s.id === id); if (index !== -1) { setCurrentIndex(index); setView('card'); setSearchQuery(''); // 清空搜索以便浏览 } }; const handleNext = () => { if (currentIndex < SCENARIOS.length - 1) { setCurrentIndex(prev => prev + 1); } }; const handlePrev = () => { if (currentIndex > 0) { setCurrentIndex(prev => prev - 1); } }; const goHome = () => { setView('directory'); setSearchQuery(''); }; // --- 组件：目录页 --- const DirectoryView = () => (
福

春节回家

防内耗工具包

{/* 六字诀 - 直接展示 */}

春节防内耗六字诀

{MANTRA.content.map((item, idx) => (
{item.text}
{item.sub}
))}
{/* 父母篇入口 */}
模块1：父母沟通篇
{SCENARIOS.filter(s => s.category.includes('父母')).map((item, idx) => ( ))}
{/* 亲戚篇入口 */}
模块2：亲戚沟通篇
{SCENARIOS.filter(s => s.category.includes('亲戚')).map((item, idx) => ( ))}
); // --- 组件：卡片详情页 --- const CardView = () => { const data = SCENARIOS[currentIndex]; return (
{/* 顶部导航 */}
{currentIndex + 1} / {SCENARIOS.length}
{/* 占位 */}
{/* 卡片主体 */}
{/* 卡片头 */}
{data.category}
{data.subCategory}

{data.title}

{/* 场景描述 */}
敌方技能 (场景)

{data.scene}

{/* 回复列表 */}
我方招式 (回复)
{data.replies.map((reply, ridx) => (
{reply.type}

{reply.content}

))}
{/* 底部控制栏 */}
); }; // --- 全局搜索栏 (Overlay) --- const SearchOverlay = () => (
{searchQuery && filteredScenarios.length === 0 && (
没找到相关场景，这题超纲了...
)} {searchQuery && filteredScenarios.map(item => ( ))}
); // 如果未验证，显示登录页 if (!isAuthenticated) { return ; } // 验证通过，显示主应用 return (
{/* 全局顶部搜索框 */}
setSearchQuery(e.target.value)} className="block w-full pl-10 pr-3 py-2 border-transparent leading-5 rounded-lg bg-red-800 text-red-100 placeholder-red-300 focus:outline-none focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 transition duration-150 ease-in-out sm:text-sm" /> {searchQuery && ( )}
{/* 搜索结果覆盖层 */} {searchQuery &&
setSearchQuery('')} />} {searchQuery && (
{filteredScenarios.length === 0 ? (

🤔 没找到这个雷区...

试试搜：工资、对象、孩子

) : ( filteredScenarios.map(item => ( )) )}
)} {/* 主视图渲染 */}
{view === 'directory' && } {view === 'card' && }
); }; export default App;