YIJINLEE.COM

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

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

AI Coding 与规则工程

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

  • AI 原生转型团队治理人机协同学习路径

    别了，传统技术小测：张鑫旭的唏嘘与 AI 原生时代的软件工程指南

    背景
    张鑫旭团队停止十多年的双周分享与每周小测，折射组织打散、存量竞争与 AI 降维打击下的行业现实。
    关键挑战
    传统考 API / 刷算法的学习与活动形态失效后，个人与团队如何重建有护城河的 AI 原生工程能力。
    定位路径
    认知降维：代码生成廉价化 → 个人从 How 转向 Why → 规则与 RAG 建护栏 → 重构小测与分享形态
    最终结论
    价值从写代码转向指挥、校验、优化 AI；底层原理、全栈复合与体验审美是唯一护城河。
    复用价值
    适合需要把传统技术活动升级为 LLM-native 治理、并给团队明确转型路线的团队。

    相关能力：AI Coding / Cursor Rules / RAG / Code Review / Prompt

    查看完整复盘 →
  • AI 代码质量规则工程存量项目治理

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

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

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

    查看完整复盘 →

前端复杂排障

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

  • Vue ScopedCSS 盒模型亚像素渲染v-html

    Vue 样式穿透、亚像素模糊与盒模型陷阱：搞懂 CSS 渲染引擎的"隐藏规则"

    背景
    v-html 回显样式穿透失效、span 垂直 margin 隐身、transform 居中后高分屏图标毛刺——三类典型 CSS 幽灵现场。
    关键挑战
    区分 Vue 编译期 Scoped 隔离、IFC 行内盒模型规则与 GPU Composite 亚像素取整三条隐藏机制。
    定位路径
    Scoped 哈希与 :deep() 穿透 → inline vs inline-block 盒模型 → Layout vs Composite 居中对比
    最终结论
    :deep() 覆盖动态子树、inline-block 激活垂直 margin、margin auto 在 Layout 阶段对齐物理像素。
    复用价值
    适合 Vue + CSS 日常排障，快速定位样式"玄学"背后的渲染引擎规则。

    相关能力：Vue / CSS / :deep() / 盒模型 / 亚像素渲染

    查看完整复盘 →
  • 静态资源构建产物环境差异发布链路

    测试环境 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 协同

    查看完整复盘 →

架构治理与业务复杂度

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

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

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

    背景
    产品要求"首页加个简单冷启动弹窗"，实际涉及生命周期、频控与版本语义。
    关键挑战
    需求看似简单，但组件自启动、滑动窗口频控和跨端环境判断层层叠加。
    定位路径
    需求拆解 → 生命周期边界 → 频控算法设计 → 语义化版本比对 → 跨端回归
    最终结论
    弹窗类需求必须明确启动时机、频控策略和版本规则，不能只做 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

    查看完整复盘 →
查看全部案例 →了解作者 →