Gavin（zzlw）GitHub 作品集

文中 Star / Fork / 仓库数为 shields.io 徽章实时渲染，累计数据为 github-readme-stats 统计卡片，均自动跟随 GitHub 最新数据。

一句话定位：9 年持续迭代的前端 / 全栈工程师，2026 年完成博客平台整体重写，新落地「边缘 AI Agent + 售后智能客服 Agent」，并开源 TZJ 企业官网三端 Monorepo，覆盖前端工程化、后端服务、AI 应用与 DevOps 全链路。

GitHub：https://github.com/zzlw

在线作品：

博客前台：https://jiawen.live
博客管理后台：https://admin.jiawen.live
售后智能客服 Demo：https://aftersales.jiawen.live
TZJ 拓之迹官网：https://www.tzjii.com · 管理后台：https://admin.tzjii.com（访客账号 guest / guest1234）

一、数据概览（30 秒建立第一印象）

Gavin's GitHub stats

指标	数值	说明
GitHub 账号	`zzlw`	2017 年 6 月注册，活跃至今
公开仓库		其中 40 个为原创项目，其余为学习 / 协作 fork
累计 Star	实时见上方统计卡片	主要来自早期社区项目，近期代表作以可运行系统为准
社区认可作品	4 个	`createjs` · `webpack-dev-super` · `andyBlog` · `resume`（Star 徽章见各项目详解）
近一年重点	博客平台重写 + 2 个 AI Agent + 企业官网	2026 年 6–8 月密集交付，`aftersales-agent` 两天 20 次提交；`tzj-website` 7 月开源持续迭代
近期代表作	4 套	AI 售后客服 Agent、博客全栈平台、边缘 RAG Agent、TZJ 企业官网
工程规范	已具备	CI/CD、lint + build 门禁、gitleaks 密钥扫描、Jest 单测、双语 README、Mermaid 架构图

二、面试官速览（一页版）

项目	一句话说明	为什么值得看
售后智能客服 Agent `aftersales-agent`（2026.07）	LangGraph 多轮售后客服：意图路由、混合检索、引用溯源、工单兜底、多语言；核心栈 Next.js 16 / FastAPI / LangGraph / PostgreSQL + pgvector / DeepSeek / bge-m3	有在线 Demo；SSE 8 帧协议；刷新页面无损续播；前后端分离部署 + 国内加速方案
jiawen.live 博客全栈平台 `andy-blog-*`（5 仓 · 2020 → 2026.06 重写）	SSR 博客前台 + React 管理后台 + NestJS API + Docker 部署编排；核心栈 Nuxt 4 / Vue 3 / React 19 / NestJS / MongoDB / Redis / Docker / Nginx HTTP3	一套可运行的生产级全栈平台；CI 自动构建镜像并滚动部署，可回滚；安全体系完整
博客 AI 助手 `andy-blog-ai`（2026.06）	跑在 Cloudflare Workers 上的边缘 RAG Agent，内容变更自动同步知识库；核心栈 Hono / Workers / D1 / R2 / AI Search / AI Gateway / Zod	工具驱动 Agent Loop；三层限流 + HMAC 防重放 + Prompt 注入防护；附带完整中文架构文档
React 工程脚手架 `webpack-dev-super`（2017 → 2022）	社区认可度最高的作品：开箱即用的 React + Webpack 工程模板；核心栈 React / Redux / Webpack / Babel / Mocha	覆盖 HMR、DLL 分包、按需加载、测试等完整工程能力，体现工程化基本功
npm 插件 `html-webpack-cdn`（2021）	免配置 `externals` 自动向 HTML 模板注入 unpkg CDN 的 Webpack 插件；核心栈 Node.js / Webpack Plugin	已发布到 npm（v1.0.6），面向真实开发痛点
创意与个人品牌 `createjs` / `resume` / `andyBlog`（2018 → 2023）	Canvas 动画、自动打字简历、个人站首页；核心栈 Canvas / CreateJS / Vue	最高 Star 来自 `createjs`，展示算法思维、性能意识和审美
TZJ 拓之迹企业官网 `tzj-website`（2026.07 →）	应急救援装备企业官网 + CMS 后台三端 Monorepo；核心栈 Next.js 16 / React 19 / NestJS 11 / Prisma 6 / PostgreSQL / Turborepo 2	商业项目开源；共享包设计；GitHub Actions + ACR + ECS 部署；后台只读访客账号（`guest`/`guest1234`）可在线体验

三、旗舰项目详解

1. 售后智能客服 Agent（aftersales-agent）—— 旗舰 AI 项目

这是什么：一个可在线体验的多轮对话售后客服系统。用户提问后，Agent 判断意图 → 检索知识库 → 生成带引用的答案；知识不足时主动转人工工单。

系统架构

Next.js 16 前端（SSR + SSE 流式渲染）
        │  POST /api/chat（SSE）
        ▼
FastAPI 后端 ── LangGraph StateGraph ── 意图路由 / 检索评估 / 生成 / 兜底
        │
        ├── PostgreSQL 16 + pgvector（HNSW 向量检索 + tsvector 全文 → RRF 融合）
        └── DeepSeek（LLM）+ SiliconFlow bge-m3（Embedding）

技术亮点

LangGraph 状态图设计：意图路由 → 检索 → 两级评估（产品线元数据校验 + LLM 精评）→ 生成 → 兜底，状态可复现、可测试。
混合检索：pgvector HNSW 向量检索 + jieba 预分词全文检索，RRF 融合排序，中英文知识库。
SSE 8 帧协议：status / thinking / tool / delta / citation / suggest / done / error，前端流式渲染引用卡片与建议问题。
ChatGPT 同款流恢复：生成过程与 SSE 连接解耦，生成中刷新页面自动重连、无损续播；引用、执行过程、建议问题随消息持久化，刷新后完整回放。
工程化部署：Vercel（前端 Serverless）+ Railway（后端容器 + 数据库），并针对国内网络做了 Vercel 中国区节点 + Cloudflare DNS 的加速方案，README 给出完整复现命令。
知识库自维护：启动时按内容指纹比对，语料变更自动重建索引，无需手动 reindex。

为什么代表实力

它把状态机、检索质量、流式协议、断线恢复、持久化、部署选型（为什么 SSE 不适合 Serverless）、国内可达性这些生产问题都认真处理了一遍，足以作为 AI 应用能力的证明来讲。两天内 20 次提交完成从 0 到 1，README 质量接近商业项目。

链接：https://github.com/zzlw/aftersales-agent · Demo：https://aftersales.jiawen.live

2. jiawen.live 博客全栈平台（andy-blog 五仓生态）—— 体现全栈 + DevOps 综合能力

这是什么：一套个人博客产品，拆成 5 个仓库协同开发：SSR 前台、管理后台、API 服务、AI 服务、部署编排。

Internet ── Nginx 网关（HTTP/3、TLS、域名路由）
        ├── web    andy-blog-nuxt   Nuxt 4 SSR（Vue 3 / Tailwind v4 / shadcn-vue）
        ├── admin  andy-blog-admin  React 19 + Vite + Ant Design 5（SPA）
        └── api    andy-blog-koa    NestJS 11 + Fastify + MongoDB + Redis
            └── Webhook（HMAC-SHA256）── andy-blog-ai（Cloudflare Workers RAG）

技术亮点

前台（Nuxt 4 SSR）：useAsyncData 同构取数；routeRules SWR 页面缓存（首页/文章 60s、分类/标签 300s，并针对「新列表闪回旧列表」的水合问题做了缓存策略取舍）；RSS / sitemap 走 Nitro 缓存路由；marked + highlight.js 渲染文章、自动提取 TOC；暗色模式无 FOUC；简繁英三语（no_prefix 策略避免重复 URL）；音乐播放器、搜索、留言板。
管理后台（React 19 + Vite）：Axios 统一响应解包；access token 过期后并发 401 复用同一个刷新请求、静默换发并重放；CodeMirror 6 Markdown 编辑器；超级看板（指标总览 / 趋势 / 排行 / 访客分析 / AI 会话管理）。
后端（NestJS + Fastify）：Typegoose 双 ID 体系（_id + 自增 id）；Redis 归档聚合缓存 + 事件驱动失效；JWT 双令牌（access 1h / refresh 30d）+ Identity 守卫；S3 兼容对象存储（支持阿里云 OSS / R2 / MinIO）；IP 归属地解析；内容变更通过 HMAC Webhook 自动同步给 AI 服务；Jest 单测覆盖 Token 与评论等核心逻辑。
部署编排（andy-blog-deploy）：Docker Compose 一键起全栈；Nginx 网关支持 HTTP/3、按域名路由；acme.sh + 阿里云 DNS-01 泛域名证书自动续期；make 目标覆盖 dev / prod / 证书 / 回滚。
CI/CD 全链路：push main → lint + build 门禁 → Docker 构建推阿里云 ACR（latest + sha-xxxxxxx 双 tag）→ repository_dispatch 触发服务器滚动更新；workflow_dispatch 指定历史 tag 即可回滚；多个仓库并发部署串行排队；gitleaks 密钥扫描全量历史。

为什么代表实力

个人项目里很少见到这种完整度：它不是单页面 Demo，而是「三端产品 + 部署编排 + CI/CD + 安全 + 测试 + 文档」的生产级形态。面试官可以从任何一个环节深挖：SSR 缓存策略、token 刷新并发控制、Webhook 签名、滚动发布、回滚方案。

链接：

前台：https://github.com/zzlw/andy-blog-nuxt · https://jiawen.live
后台：https://github.com/zzlw/andy-blog-admin · https://admin.jiawen.live
API：https://github.com/zzlw/andy-blog-koa
部署：https://github.com/zzlw/andy-blog-deploy

3. 博客 AI 助手（andy-blog-ai）—— 边缘 AI 工程能力

这是什么：让 jiawen.live 的访客可以直接向博客提问的 AI Agent，部署在 Cloudflare Workers 边缘，基于 RAG 回答博主经历、文章内容与站点规则。

技术亮点

基础设施原生：Workers + D1（SQLite 消息持久化）+ R2（Markdown 知识库）+ AI Search（向量检索）+ AI Gateway（LLM 代理、限流、日志），无自建中间件。
工具驱动 Agent Loop：LLM 只做调度，真实数据通过工具按需获取；Zod 定义工具模型并推导 JSON Schema；工具调用并发执行，最多步数硬限制防止 token 失控。
知识库自动流动：CMS 内容变更时 Webhook 通知（HMAC-SHA256 签名 + 5 分钟防重放），AI 服务实时把 Markdown 同步到 R2 并增量索引，全程无需手动运维。
安全设计完整：IP 级限流 + 会话级消息/token 双限流 + AI Gateway 限流；管理员 JWT 在边缘本地验签；用户 Token 用 HMAC 签发防伪造；System Prompt 做了注入防护并附测试用例。
模型工程经验：对比 DeepSeek 与 Gemini 的实际调校差异，针对 DeepSeek 推理欲望强的问题在代码层硬限制工具调用次数。
文档质量：ARCHITECTURE.zh-CN.md 用 Mermaid 画清数据流、表结构、鉴权与限流设计。

为什么代表实力

它证明了三件事：能独立做 AI Agent 应用；能正确使用云原生边缘组件而不是只会「调 API」；能写出让协作方看得懂的架构文档。作为「博客 AI 助手」这种轻量场景，方案选择克制（R2 而不是爬虫、本地 JWT 验签而不是跨服务回源），体现工程判断力。

链接：https://github.com/zzlw/andy-blog-ai

4. 工程化输出：webpack-dev-super + html-webpack-cdn（2017–2022）

webpack-dev-super（ / ）：React + Webpack 脚手架，覆盖 JSX / ES6、LESS / SASS、HMR、按需加载、业务代码与公共依赖分离、MD5 缓存、浏览器源码调试、ESLint、Mocha 测试、一行命令产出部署资源。它是当年社区里真正被 fork 使用的模板，代表扎实的前端工程化基本功。

html-webpack-cdn（npm 已发布 v1.0.6）：解决真实痛点——无需手写 webpack.externals，自动向 HTML 模板注入 unpkg CDN 引用。能够把一个想法做成可发布的 npm 插件，说明具备「发现问题 → 抽象成工具 → 对外交付」的能力。

链接：https://github.com/zzlw/webpack-dev-super · https://github.com/zzlw/html-webpack-cdn · https://www.npmjs.com/package/html-webpack-cdn

5. 创意与社区认可：createjs / resume / andyBlog（2018–2023）

createjs 飘落动画（ / ）：用对象池复用雪花对象防止内存溢出，用帧时间而非真实时间避免浏览器最小化后动画跳变，用非中心点旋转实现漂浮感。README 把每个设计决策讲得清清楚楚，是「有性能意识、会写算法、会做动画」的早期证明。Demo：https://zzlw.github.io/createjs/
resume 自动打字简历（）：把简历做成打字机效果的可交互页面，体现产品感和前端表现力。Demo：https://zzlw.github.io/resume/public/
andyBlog 个人站首页（ / ）：Canvas 色彩循环 + 粒子视觉的个人站，被 fork 当模板使用。Demo：https://zzlw.github.io/andyBlog/

链接：

6. TZJ 拓之迹企业官网（tzj-website）—— 商业项目开源 + Monorepo 工程实践

这是什么：应急救援训练装备制造商的官网 + CMS 管理后台，Turborepo Monorepo 三端架构（官网 / 后台 / API），2026 年 7 月起持续迭代并开源。后台提供只读访客账号（guest / guest1234），面试官可直接登录体验 CMS 完整流程。

技术亮点

Monorepo 工程化：Turborepo 2 + pnpm workspace，apps/web（Next.js 16 官网 SSR/ISR）、apps/admin（Next.js 16 后台）、apps/api（NestJS 11）三应用，配合 @tzj/ui / @tzj/types / @tzj/theme / @tzj/config 四个共享包，依赖关系单向清晰。
API 设计规范：REST 前缀 /api/v1、Swagger 文档、统一响应格式 { code, message, data, pagination }、健康检查端点。
安全策略：JWT RS256 + RBAC 角色守卫（含自定义只读角色 guest，权限仅为 content.view，越权写操作返回 403）、Prisma ORM 防注入、class-validator 输入校验、CORS 白名单、zod 环境变量启动校验。
部署交付：GitHub Actions + ACR 镜像 + Docker Compose / ECS，deploy.sh + acme.sh 证书自动化；Biome lint + format 与 TypeScript strict 质量门禁。
文档完整：ARCHITECTURE.md（架构图 + 数据流 + 包依赖）、CHANGELOG、CONVENTIONS、AGENTS.md。

为什么代表实力

继个人博客之后的第二套企业级全栈交付，证明三端 Monorepo 架构设计、商业项目工程规范与云部署能力可以复制到真实客户场景，且以开源形态完整呈现。

链接：https://github.com/zzlw/tzj-website · https://www.tzjii.com · 管理后台：https://admin.tzjii.com（访客账号 guest / guest1234）

四、能力图谱

能力方向	证明
前端框架	Vue 3 / Nuxt 4 SSR / React 19 / Next.js 16，均在生产级项目中使用
前端工程化	Webpack 脚手架、npm 插件、Vite、TypeScript、Tailwind v4、shadcn、单测
后端服务	NestJS 11 + Fastify、FastAPI、JWT 双令牌、Redis 缓存、MongoDB / PostgreSQL
AI 应用	LangGraph Agent、RAG 混合检索、SSE 流式协议、边缘 Worker、LLM 成本与限流控制
DevOps	Docker Compose、Nginx HTTP/3、GitHub Actions 全链路 CI/CD、镜像仓库、滚动部署与回滚
安全	gitleaks 密钥扫描、HMAC Webhook 防重放、JWT 边缘验签、三层限流、Prompt 注入防护
文档与协作	双语 README、Mermaid 架构图、架构文档、Conventional Commits、`.env.example`

五、成长时间线

2017 前端入门：图片裁剪 rc-cut、Vue 脚手架、dva-antd-mobile、gulp-webpack 多页实践
2018 创意爆发：createjs 飘落动画（）、自动打字简历（）、企业站、Shell 文件整理脚本
2019 继续打磨 JS 基础：JSON 查看器、jq-phone 等小工具
2020 类型化与 SSR：ts-axios、zzlw.github.io、new-resume
2021 工程化输出：html-webpack-cdn 发布 npm（v1.0.6）
2022 React 工程沉淀：webpack-dev-super 稳定到 /
2023 个人品牌：andyBlog 新首页（ / ）
2024–2025 全职工作：宝马金融 · 全栈开发工程师
2026 全栈 + AI 爆发：
- 博客平台整体重写为 Nuxt 4 + React 19 + NestJS 五仓架构
- 新增 Cloudflare Workers 边缘 RAG Agent（andy-blog-ai）
- 完成 LangGraph 售后客服 Agent 并上线可体验 Demo
- 开源 TZJ 拓之迹企业官网（Next.js + NestJS 三端 Monorepo）