Taylor2026 — 至今
已上线本站 · AI 知识与工程平台
Personal AI Knowledge Platform
可上线的前端技术平台：Portfolio、Engineering Lab、AI 知识助手与私人面板。
更多截图
架构示意
Layered architecture · data flow
01
项目背景
要解决的问题是：如何用一个可部署的站点，同时证明 React/Next 工程能力、AI 应用接入能力，以及前端探索兴趣——而不是再做一个静态简历页。使用场景是招聘方 / 访客在 30 秒内建立技术方向印象，并在详情与助手页追问深度。
02
技术栈
- Next.js 15
- React 19
- TypeScript
- SQLite
- Docker
- SSE
架构选择原因
- App Router：公开站（Portfolio / Lab / Assistant）与私人 Dashboard 分界，静态内容优先 Server Component，重交互下沉客户端。
- SQLite + Repository：个人体量不引入 CMS/Prisma，内容走 Git（src/content），私有数据走文件库，边界清晰可讲。
- AI：Markdown 知识库 + 本地混合检索 + SSE；无 Key 可演示，有 Key 可切 LLM，避免「必须接大模型才能跑」。
- 鉴权：JWT Cookie + bcrypt + Zod + 限流，按生产站基线做，而不是演示登录。
03
核心挑战
- Next.js 应用架构：公开内容、私人 CRUD、Lab Demo、AI SSE 同仓共存，需清晰的路由与 Client/Server 边界，避免整站变大客户端。
- AI 知识库检索：中文短问下关键词过粗；用双字切分 + 轻量向量混合，并约束回答范围，减少胡编与越界。
- SSE 输出：可中断、可展示来源、本地/LLM 双模式切换，避免被理解成「套壳聊天页」。
- Docker 部署：VPS 磁盘与 husky prepare 曾阻断生产构建；通过 HUSKY=0、prune 与诊断日志把重建做成可重复流程。
04
我的贡献
- 我独立完成产品定位、信息架构与全栈实现（页面、API、鉴权、部署）。
- 我设计 Featured（轻量）与项目详情（深度）的职责分层，以及 Lab / Assistant 入口。
- 我实现知识库加载、检索、SSE 问答与可选 LLM/Embedding 接入。
- 我搭建 ESLint/Prettier/Husky/Vitest/CI，以及 Docker + Nginx + Actions 自动部署。
05
工程实践
性能
- 粒子 Canvas dynamic import + 离开首屏暂停，降低主线程占用。
- 首页 web-vitals 实测展示 LCP/CLS/INP；Lighthouse 首页：性能 95、无障碍 96、最佳实践 96、SEO 100。
测试
- Vitest 覆盖检索/校验等纯逻辑；CI 跑 lint、typecheck、test、format。
部署
- Next standalone 镜像；GitHub Actions SSH 到 VPS 执行 compose 重建。
- 部署前 Docker prune / 磁盘检查，降低「磁盘满导致失败」的复发。
安全
- 强制 bcrypt；登录与 AI 接口限流；Zod 校验输入；Dashboard API 统一 requireApiSession。