Next.js 生活应用状态设计：不要让小组件互相抢焦点

Next.js 生活应用状态设计不要让小组件互相抢焦点一、生活工具常常很碎生活类 Web 应用常有很多小组件日程、提醒、天气、笔记、购物清单、AI 建议、情绪记录。每个组件都不复杂但放在同一页时很容易互相抢焦点。用户本来只是想看一个提醒却被多个卡片、弹窗和 AI 建议打断。Next.js 生活应用的状态设计要先考虑注意力层级而不是只考虑组件拆分。二、状态要分层flowchart TD A[页面状态] -- B[全局上下文] A -- C[组件本地状态] A -- D[临时交互状态] A -- E[AI 建议状态]全局上下文包括当前用户、时区、主题、同步状态。组件本地状态包括输入框、展开折叠、筛选。AI 建议状态要谨慎不能随意弹出覆盖用户正在做的事。如果所有状态都进全局 store页面会变得难以预测如果所有状态都在组件里跨组件协作又会困难。三、AI 建议要有展示规则type SuggestionState { id: string sourceWidget: string priority: low | normal | high displayMode: inline | toast | panel dismissedAt?: string }不是所有建议都该弹 toast。低优先级建议适合内联展示高优先级才需要更明显提醒。suggestion_display_policy: avoid_modal_by_default: true suppress_when_user_typing: true allow_dismiss: true remember_dismissal: true用户正在输入时AI 建议最好安静一点。打断会让生活工具变得焦躁。四、同步状态要清楚生活应用常跨设备使用。提醒是否已同步、笔记是否保存、AI 建议是否来自最新数据都要有清楚状态。不要让用户猜。Next.js 里可以把服务端数据和客户端交互状态分开。服务端组件负责稳定数据客户端组件负责轻交互和即时反馈。页面加载也要保持安静。生活工具不适合一打开就出现多处骨架屏闪烁。可以优先渲染当天最重要的信息低优先级小组件延迟加载。type WidgetPriority primary | secondary | background type DashboardWidget { id: string priority: WidgetPriority refreshInterval?: number }刷新策略也要分层。天气和日程不需要每几秒刷新正在执行的 AI 任务才需要更频繁更新。所有组件统一轮询会浪费资源也会让界面不安定。还要处理空状态。新用户没有日程、没有笔记、没有情绪记录时页面不应该塞满提示。每个小组件给一个轻量入口即可把完整引导放到用户愿意展开的地方。错误状态要局部化。某个小组件加载失败不应该让整个首页报错。生活应用的首页更像桌面局部失败要被温和隔离。组件之间还要有打扰预算。一天内同类提醒出现太多系统应自动降频。比如多个小组件都想提示“可以让 AI 帮你整理”最终只保留一个入口就够了。attention_budget: max_toasts_per_hour: 2 suppress_repeated_suggestion_days: 3 prefer_inline_over_popup: true状态设计的验收可以很直接用户能否在首页完成一个任务而不被打断能否看懂哪些数据已同步能否关闭不需要的小组件。少打扰是生活工具的重要性能指标。五、总结Next.js 生活应用状态设计要分清全局上下文、本地交互、同步状态和 AI 建议展示规则。小组件可以很多但用户的注意力只有一份。状态设计越克制体验越温柔。