Yijin Lee

首页 / 案例库

前端排障与架构治理案例库

这里沉淀我在真实项目中的问题定位、架构治理与 AI 协同实践。每个案例尽量保留完整链路：问题背景、关键现象、定位过程、根因判断、解决方案、复盘结论。

AI Coding 与规则工程

关注 AI 辅助开发如何真正进入工程流程，包括 Cursor 规则、Prompt 约束、代码审查与模型输出稳定性控制。

  • AI 代码质量规则工程存量项目治理

    如何降低 AI 代码的方差：主管视角的 Cursor 规则工程实践

    背景
    多业务线存量项目中引入 AI Coding，模型输出方差大、架构边界易被突破。
    关键挑战
    如何在提效与质量控制之间找到平衡，而不是用单一全局规则文件硬扛。
    定位路径
    识别高方差场景 → 拆分 MDC 动态规则 → 联动 ESLint 门禁 → 保留人工 Review
    最终结论
    按目录动态切片规则可显著降低 AI 输出方差，但不能替代工程门禁与 Code Review。
    复用价值
    适合正在引入 Cursor / AI Coding、但担心代码质量失控的团队。

    相关能力：Cursor / MDC / Cursor Rules / Code Review

    查看完整复盘 →

前端复杂排障

关注生产或测试环境中的异常定位，包括构建产物、静态资源、接口链路、缓存、跨环境差异等问题。

  • 静态资源构建产物环境差异发布链路

    测试环境 APK 按钮离奇失踪：半小时把锅从 Nuxt 甩回 OSS

    背景
    Nuxt 3 下载页在本地和生产正常，测试环境 Direct APK 按钮稳定消失。
    关键挑战
    Jenkins 构建全绿，但构建引用与 OSS 实际文件不一致，问题不在页面逻辑。
    定位路径
    页面表现确认 → 路由与 chunk 检查 → hash 资源比对 → OSS Key 校验 → 根因确认
    最终结论
    测试环境使用了旧/不完整资源，导致构建引用与部署产物不匹配。
    复用价值
    适合排查"本地正常、生产正常、测试异常"的静态资源与发布链路问题。

    相关能力：Nuxt / OSS / Jenkins / Cursor Agent

    查看完整复盘 →
  • 跨端i18nHybrid App状态同步

    App弹窗惊现"英意"二语混编？深度拆解混合架构下的 i18n 状态同步惨案

    背景
    意大利用户 App 弹窗出现英意二语混编，标题英文、复选框意大利语、按钮又回英文。
    关键挑战
    Native、WebView、本地组件三条链路零沟通，各自维护语言状态。
    定位路径
    现象复现 → 链路分层 → 上下文隔离定位 → SSOT 方案设计
    最终结论
    跨端多语言混乱本质是上下文隔离导致的状态机碎裂，需统一语言事实源。
    复用价值
    适合 Hybrid App 中出现"多语言缝合怪"类问题的排查与架构修复。

    相关能力：Hybrid App / i18n / WebView / AI 协同

    查看完整复盘 →

架构治理与业务复杂度

关注前端系统如何在真实业务压力下保持可维护，包括组件边界、状态治理、版本规则、跨端适配和业务抽象。

  • 弹窗系统版本比较频控算法跨端适配

    告别"就加个简单弹窗"的噩梦：AppUpdateDialog 实战复盘

    背景
    产品要求"首页加个简单冷启动弹窗"，实际涉及生命周期、频控与版本语义。
    关键挑战
    需求看似简单，但组件自启动、滑动窗口频控和跨端环境判断层层叠加。
    定位路径
    需求拆解 → 生命周期边界 → 频控算法设计 → 语义化版本比对 → 跨端回归
    最终结论
    弹窗类需求必须明确启动时机、频控策略和版本规则，不能只做 UI 层封装。
    复用价值
    适合评估"简单弹窗"类需求的真实复杂度，以及 App 内 H5 跨端适配。

    相关能力：React / 版本控制 / 跨端 / AI 协同

    查看完整复盘 →
  • 存量项目条件渲染副作用治理AI 协同

    现网实录：“直接隐藏就行？”

    背景
    现网要求隐藏商详页门店模块，简单 display:none 无法阻止挂载副作用与请求。
    关键挑战
    必须在父级组装层条件渲染才能真正砍掉子树，控制爆炸半径。
    定位路径
    跨文件溯源 → 副作用链路梳理 → 父级条件渲染 → 测试矩阵闭环
    最终结论
    "隐藏模块"在 React 中从来不是改样式，而是子树生命周期与副作用治理问题。
    复用价值
    适合存量 React 项目中评估"简单隐藏"需求的真实改动面与风险。

    相关能力：React / Fiber / 副作用 / AI 协同

    查看完整复盘 →

独立产品与长期项目

关注从想法到上线的完整过程，包括 AI 应用、跑者工具、个人产品与低成本 MVP 验证。

  • AI 应用Next.jsPrompt 工程MVP

    24小时开发全栈 AI 应用实战：Next.js 接入 Kimi 大模型打造"Runner Glory"（附防翻车指南）

    背景
    24 小时内上线 Runner Glory 跑者训练计划 AI 应用，验证低成本产品化路径。
    关键挑战
    大模型输出不可控，需要 Prompt 分层、服务端校验与熔断降级。
    定位路径
    四层 Prompt 设计 → JSON 强制输出 → 服务端三层校验 → 内存缓存降本
    最终结论
    把大模型当"可控实习生"而非玄学，MVP 可在极短时间内验证产品假设。
    复用价值
    适合需要快速验证 AI 小工具、又担心输出不可解析的团队或个人。

    相关能力：Next.js / Kimi API / Prompt / MVP

    查看完整复盘 →
查看全部文章 →了解作者 →