前端做 Agent 项目时，不能只停留在 Demo：关于系统能力、上下文工程与评测的总结
2026-03-13 3.4k 字 12 分钟

前端做 Agent 项目时，不能只停留在 Demo：关于系统能力、上下文工程与评测的总结

这篇文章想讲什么 最近在补 Agent 项目时，我越来越强烈地感受到一件事： 很多前端做 AI 项目，最容易卡住的并不是“不会接模型”，而是太容易把项目停留在 Demo 阶段。 页面能聊天、工具能调用、流程能跑通，看起来已经像一个 Agent 项目了。 但只要面试官或者更有经验的工程师继续往下问几层，问题就会暴露出来： 会话怎么管理 数据怎么存 工具失败怎么办 多轮上下文怎么裁剪 怎么判断系统真的比昨天更好 这些问题一旦答不上来，项目就很容易被判断成“只是一个能演示的样品”，而不是一个有工程价值的系统。 所以这篇文章不想从“后端必须怎么做”出发，而是想从前端视角总结： 前端做 Agen
前端初学者怎么理解 Vercel 和 AI SDK：从部署到 AI 应用入门
2026-03-12 3.5k 字 13 分钟

前端初学者怎么理解 Vercel 和 AI SDK：从部署到 AI 应用入门

这篇文章写给谁 如果你刚学前端不久，最近又经常看到这些词： Vercel AI SDK AI Gateway preview deployment 很容易出现一种感觉：每个词都像懂一点，但拼不成一张完整地图。 这篇文章的目标不是让你立刻做出复杂 agent，而是先把最重要的心智模型搭起来： Vercel 是什么 为什么前端项目会经常用到它 Vercel AI SDK 在解决什么问题 AI Gateway 和 AI SDK 是什么关系 前端初学者应该按什么顺序学 一、先别急着学 AI，先搞清楚 Vercel 是什么 很多前端初学者第一次接触 Vercel，是因为： 学了 Next.
GitHub Actions 入门与实践：前端项目怎么做自动化构建与部署
2026-03-11 2.2k 字 8 分钟

GitHub Actions 入门与实践：前端项目怎么做自动化构建与部署

这篇文章解决什么问题 很多前端项目在本地都能正常运行，但一到协作、提 PR、上线部署这些环节，就开始变得不稳定： 本地能跑，别人机器跑不起来 自己改完能通过，合并后构建失败 每次发布都要手动点很多步骤 Secret、环境变量和部署流程散落在各个地方 GitHub Actions 解决的不是“写一个 YAML 文件”这么简单。 它真正的价值是：把构建、校验、部署这些动作标准化，让项目从“我本地没问题”变成“仓库层面可验证”。 这篇文章就从前端项目视角，整理 GitHub Actions 最值得理解的部分： GitHub Actions 是什么 前端项目为什么值得接入 一个最小可用工作流长
CI/CD、单元测试与 UI 组件测试实战
2026-03-10 933 字 4 分钟

CI/CD、单元测试与 UI 组件测试实战

这篇文章不讲空话，只回答三个问题：为什么要做 CI/CD、为什么要写单元测试、UI 组件到底该怎么测。 一、CI/CD 的意义不是“自动化本身” 很多团队把 CI/CD 理解成“把命令放进流水线”。这只是表面。 CI/CD 的核心价值是把质量门槛前移，让问题在合并前暴露，而不是线上事故后补救。 可以直接落地的目标： 每个 PR 都必须通过同一套校验（格式、Lint、测试、构建）。 失败即阻断合并，避免“带病代码”进入主分支。 发布流程标准化，减少“只有某个人会发版”的单点风险。 二、单元测试为什么值得投入 单元测试不是为了追求覆盖率数字，而是为了降低改动风险。 你能直接感知到的收益
防抖与节流
2026-03-09 910 字 4 分钟

防抖与节流

为什么需要防抖与节流 前端里有一类事件触发频率非常高，比如： 输入框输入（input） 页面滚动（scroll） 窗口缩放（resize） 鼠标移动（mousemove） 如果每次触发都直接执行业务逻辑（请求、计算、重渲染），页面很容易卡顿。 防抖和节流就是用来“控制高频触发”的两个基础手段。 先说结论：两者区别 防抖（debounce）：事件停止触发一段时间后才执行一次 节流（throttle）：固定时间间隔内最多执行一次 可以这样记： 防抖关注“最后一次” 节流关注“执行频率上限” 常见使用场景 防抖适合 搜索建议输入框：用户停止输入后再发请求 表单实时校验：停止输入
什么是跨域？跨域怎么解决？跨域解决的是什么问题？
2026-03-09 1.2k 字 6 分钟

什么是跨域？跨域怎么解决？跨域解决的是什么问题？

前言：为什么会有跨域 跨域（Cross-Origin Resource Sharing，简称 CORS）是一种安全策略，用于限制一个域的网页如何与另一个域的资源进行交互。这是浏览器实现的同源策略（Same-Origin Policy）的一部分，目的是防止恶意网站通过一个域的网页访问另一个域的敏感数据。 由于浏览器实施了同源策略（Same Origin Policy），整个 Web 体系建立在这一策略之上。该策略禁止来自不同域的 JavaScript 脚本与另一个域的资源进行交互。所谓同源，指的是两个页面必须具有相同的协议（protocol）、域名（host）和端口号（port）。 一、如何
2026东方Project幻想乡指南
2026-03-07 850 字 3 分钟

2026东方Project幻想乡指南

这不是入坑攻略，是我眼里的幻想乡 到 2026 年，我还是会反复回到东方。 不是因为“设定最宏大”，也不是因为“难度最硬核”，而是幻想乡这个地方有一种很少见的气质：它不急着解释你，却一直邀请你靠近它。 很多作品都在追求“信息密度”，东方反而在追求“情绪密度”。你第一次记住的，往往不是某条完整设定，而是一段旋律、一个出场镜头、某句台词停顿后的余味。 这种创作方法很聪明。它把想象空间留给读者，也把二创空间留给同好。所以东方能活这么久，不是奇迹，是结构上的必然。 红魔馆是我理解幻想乡美学的起点 我一直偏爱红魔馆，不只是因为角色人气高，而是因为它几乎把东方的美学骨架都放在了台面上。 红月、洋馆、钟
记第一场面试
2026-03-06 2.4k 字 9 分钟

记第一场面试

说明：本文根据一面沟通纪要整理，角色已匿名化为“面试官 / 候选人”。目标是把过程型记录转成可复习的面试题清单。 面试体验 HR 和面试官都非常好，整体沟通体验顺畅。 HR 非常积极推动流程，反馈及时、对接清晰。 面试官很擅长提问，也给我提供了有价值的改进建议。 一、面试总体结论 候选人前端编码能力有基础，但“项目完成度”和“核心原理理解深度”不足。 面试官核心反馈是两点：项目要做完整、基础概念要讲透。 重点改进方向是聚焦一个主项目（AI 对话项目），补齐后端、持久化和知识库链路。 二、项目深挖题（deep SCAN / easy meeting） 1) 你这个 AI 对话
Prettier、ESLint、质量规则与 engines 版本锁定
2026-03-04 686 字 3 分钟

Prettier、ESLint、质量规则与 engines 版本锁定

工程化常见误区：把 Prettier 和 ESLint 混在一起、规则互相打架、团队环境版本不一致。本文给一套可执行的最小方案。 一、先定边界：Prettier 和 ESLint 分工不同 明确分工后，配置会简单很多： Prettier：只负责代码格式（空格、换行、分号、引号等）。 ESLint：负责代码质量与潜在 bug（未使用变量、危险写法、React Hooks 依赖等）。 如果把“格式”也交给 ESLint，常见结果是规则冲突、开发体验差、CI 噪音大。 二、为什么会出现“质量规则重叠” 重叠通常来自两类问题： ESLint 同时启用了格式化类规则。 Prettier 与
Next.js 学习记录：从零开始（2026）
2026-03-02 1.1k 字 5 分钟

Next.js 学习记录：从零开始（2026）

Next.js 是什么 Next.js 是一个基于 React 的全栈框架，适合做内容站、管理后台和中大型前端应用。 它的核心能力之一是支持多种渲染方式，最常见的是： 静态生成（SSG）：在构建阶段生成 HTML，适合更新频率不高、可缓存的页面。 服务端渲染（SSR）：在请求阶段动态生成 HTML，适合需要实时数据或个性化输出的页面。 在实际项目里，通常会按页面职责混合使用 SSG 和 SSR，而不是全站只选一种。 为什么开始学 Next.js 2026 年重新系统学习 Next.js，目标不是只会跑模板，而是能独立完成一套可部署、可维护的全栈前端项目。 学习目标（第一阶段） 搞清