Are you an LLM? You can read better optimized documentation at /01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md for this page in Markdown format
那个时候，我认为全栈的护城河在于“掌握编程语言的数量”。只要我能写前端、能写后端、偶尔还能写点 Python 爬虫，我就是全栈。我们都在拼命地做加法，试图把自己打磨成一把无所不能的瑞士军刀。
Are you an LLM? You can read better optimized documentation at /01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md for this page in Markdown format
那个时候，我认为全栈的护城河在于“掌握编程语言的数量”。只要我能写前端、能写后端、偶尔还能写点 Python 爬虫，我就是全栈。我们都在拼命地做加法，试图把自己打磨成一把无所不能的瑞士军刀。
Are you an LLM? You can read better optimized documentation at /01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md for this page in Markdown format
过去，工程师往往是被动接收 PRD。而在 AI 时代，技术门槛的降低意味着工程师可以随时将生活和工作中的“灵感碎片”与“痛点捕获”转化为产品创意。我们需要具备极其敏锐的 AI 边界认知，明确知道哪些场景适合用传统的 CRUD 解决，哪些必须交由 LLM 去处理模糊与非确定性。
在产品应用层，我们还需要具备数据飞轮意识，注重在应用层设计埋点，收集用户的交互与纠错数据，为后续的 Agentic workflow 优化或模型微调提供高质量数据源。
这是一种全新的开发范式，开发者不再逐行手敲代码，而是通过撰写严谨的 Spec、利用 TDD（测试驱动开发）和 Lint 强约束，去“驱动”和“管理” AI 编程助手（如 Claude Code、Cursor），全栈基础设施的范畴也扩展到了跨端轻量化应用（例如利用前端技术栈快速构建高价值的浏览器插件）。
AI 应用的体验与传统软件截然不同。为了对抗大模型的延迟与幻觉，工程师必须掌握流式渲染（Streaming UI）、生成式 UI（Generative UI）等新一代交互模式，用优雅的工程设计兜底 AI 的不确定性。
无论是长文抓取、摘要提取还是打标签，都可以被封装为独立的 Skill，在复杂的 Workflow 中被 Agent 动态挂载，即插即用，在构建特定场景的 Agent（例如专注于技术资讯处理的知识管理助手）时，能够像搭积木一样，根据当前任务的上下文动态加载所需的 Skills，从而大幅提升 Agent 的泛化能力和开发效率。
随着 MCP（Model Context Protocol）等标准化协议的成熟，Agent 开发正在摆脱杂乱的胶水代码。我们可以利用熟悉的后端生态（如 Node.js）构建 MCP Server，让 AI 安全、统一地读取外部 API 或是企业内部知识库，打破信息孤岛。
如果前两层是造车和开车的，这一层就是修路和提炼石油的。这属于 AI 的“重工业”，门槛极高，主要由具备深厚算法背景和底层工程能力的顶级大厂或 AI Native 独角兽主导。
我们不应该将自己局限在“写代码的机器”这一狭窄定义中。尝试用产品 Sense 发现问题，用 AI 编程工具快速实现 MVP，用标准的 Agent skills、MCP 协议和高阶 Agentic workflow 设计赋予应用专业深度。
Are you an LLM? You can read better optimized documentation at /01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md for this page in Markdown format
过去，工程师往往是被动接收 PRD。而在 AI 时代，技术门槛的降低意味着工程师可以随时将生活和工作中的“灵感碎片”与“痛点捕获”转化为产品创意。我们需要具备极其敏锐的 AI 边界认知，明确知道哪些场景适合用传统的 CRUD 解决，哪些必须交由 LLM 去处理模糊与非确定性。
在产品应用层，我们还需要具备数据飞轮意识，注重在应用层设计埋点，收集用户的交互与纠错数据，为后续的 Agentic workflow 优化或模型微调提供高质量数据源。
这是一种全新的开发范式，开发者不再逐行手敲代码，而是通过撰写严谨的 Spec、利用 TDD（测试驱动开发）和 Lint 强约束，去“驱动”和“管理” AI 编程助手（如 Claude Code、Cursor），全栈基础设施的范畴也扩展到了跨端轻量化应用（例如利用前端技术栈快速构建高价值的浏览器插件）。
AI 应用的体验与传统软件截然不同。为了对抗大模型的延迟与幻觉，工程师必须掌握流式渲染（Streaming UI）、生成式 UI（Generative UI）等新一代交互模式，用优雅的工程设计兜底 AI 的不确定性。
无论是长文抓取、摘要提取还是打标签，都可以被封装为独立的 Skill，在复杂的 Workflow 中被 Agent 动态挂载，即插即用，在构建特定场景的 Agent（例如专注于技术资讯处理的知识管理助手）时，能够像搭积木一样，根据当前任务的上下文动态加载所需的 Skills，从而大幅提升 Agent 的泛化能力和开发效率。
随着 MCP（Model Context Protocol）等标准化协议的成熟，Agent 开发正在摆脱杂乱的胶水代码。我们可以利用熟悉的后端生态（如 Node.js）构建 MCP Server，让 AI 安全、统一地读取外部 API 或是企业内部知识库，打破信息孤岛。
如果前两层是造车和开车的，这一层就是修路和提炼石油的。这属于 AI 的“重工业”，门槛极高，主要由具备深厚算法背景和底层工程能力的顶级大厂或 AI Native 独角兽主导。
我们不应该将自己局限在“写代码的机器”这一狭窄定义中。尝试用产品 Sense 发现问题，用 AI 编程工具快速实现 MVP，用标准的 Agent skills、MCP 协议和高阶 Agentic workflow 设计赋予应用专业深度。
软件工程的历史，本质上是一部不断通过“抽象”来对抗“复杂度”的进化史。从汇编语言到高级语言，从手动内存管理到垃圾回收，每一次抽象层的上移，都会让一部分曾经引以为傲的手艺淡出舞台，同时释放出更宏大的创造力。
2025 年底，Anthropic 发布了一份具有里程碑意义的研究报告：《AI 如何改变 Anthropic 的工作方式》。作为大模型的缔造者，Anthropic 将自己变成了一个“AI 时代工作范式的实验室”。他们不仅向外输出模型，更在内部深度观测：当工程师拥有了像 Claude 这样具备自主能力的“AI 同事”后，代码的生产流程、团队的协作边界、甚至是“工程师”这一职业的底层逻辑，究竟发生了怎样的质变？
这份报告揭示了一组迷人且令人警醒的数据：在 AI 辅助下，工程师们不仅在提速，更在处理那 27% 曾经“不划算”或“超出能力边界”的任务。然而，光鲜的数据背后，是“编程技能萎缩”的隐忧和“监督悖论”的挑战。
报告中提到的那个关键数字——27%，代表了那些如果没有 AI 辅助，工程师根本不会去碰的任务。这 27% 并非边缘工作，而是软件工程中长期被牺牲掉的“工程尊严”。
在传统开发模式下，那些遗留的烂代码、缺失的测试覆盖、疏于维护的内部工具——这些"技术债务"虽不至于让系统立刻崩溃，却如同慢性毒药，持续侵蚀团队的认知资源与开发效率。
作为产品工程师，我们每天都在做取舍：哪些任务值得投入时间，哪些只能往后放？过去，很多工程改进任务——比如增加可观测性的埋点、搭建内部性能看板——虽然对系统长期健康很重要，但因为做起来太费功夫，往往被无限期搁置。我们心里都明白这些任务有价值，但"性价比"太低，排不上优先级。
AI 的出现改变了这个算式。它像一根杠杆，把那些原本需要花费大量时间的繁琐工作，变成了可以快速完成的"轻量级任务"。过去可能要花一整天写的监控脚本，现在几分钟就能让 AI 生成初稿；以前需要专门排期的重构工作，现在可以随手完成。
这意味着什么？那些曾经因为"太麻烦"而被忽视的任务，现在突然变得"很划算"了。团队不再只是追求开发速度，而是有能力把系统打磨得更健壮、更可维护。我们不再只是跑得更快，而是能跑得更稳、更远。
这种能力的自然延伸并非意味着人人都成为通才，而是 AI 将跨领域协作的摩擦成本大幅降低。当技术壁垒被削平，原本需要数周协调的跨职能配合，如今可在数小时内完成闭环验证——反馈周期实现了量级压缩。
这种转变带来了一种极其诱人的“Vibe Coding（凭感觉编程）”体验。然而，Anthropic 的研究揭示了一个冷酷的现实：AI 往往表现得像一个“极其聪明但缺乏责任感的初级工程师”。如果我们全盘接受这种便利，而不去有意识地重构自身的职业能力，我们可能会陷入一种“监督悖论（Supervision Paradox）”——即当你失去了手动解决问题的能力时，你也失去了监督 AI 的资格。
Anthropic 的报告中提到，有效使用 AI 需要极强的“监督力”，而这种能力恰恰源于那些正在被 AI 取代的底层编码实践。这种转变催生了一个深刻的监督悖论：
如何让"不确定的生成"进化为"可交付的代码"？这不只是技术层面的挑战，更是一个关于全链路治理的系统性命题。我们不能以静态的视角审视现有工具，而需要动态地观察 LLM 能力演进、Agent 架构革新与传统工程设施的深度融合与协同演化。
AI 输出的质量，本质上取决于它对业务语境的理解深度。当前最大的工程化障碍，正是模型面对团队私有知识时的"冷启动"困境——它缺乏对特定代码规范、架构决策和历史演进的隐性认知。
软件工程的历史，本质上是一部不断通过“抽象”来对抗“复杂度”的进化史。从汇编语言到高级语言，从手动内存管理到垃圾回收，每一次抽象层的上移，都会让一部分曾经引以为傲的手艺淡出舞台，同时释放出更宏大的创造力。
2025 年底，Anthropic 发布了一份具有里程碑意义的研究报告：《AI 如何改变 Anthropic 的工作方式》。作为大模型的缔造者，Anthropic 将自己变成了一个“AI 时代工作范式的实验室”。他们不仅向外输出模型，更在内部深度观测：当工程师拥有了像 Claude 这样具备自主能力的“AI 同事”后，代码的生产流程、团队的协作边界、甚至是“工程师”这一职业的底层逻辑，究竟发生了怎样的质变？
这份报告揭示了一组迷人且令人警醒的数据：在 AI 辅助下，工程师们不仅在提速，更在处理那 27% 曾经“不划算”或“超出能力边界”的任务。然而，光鲜的数据背后，是“编程技能萎缩”的隐忧和“监督悖论”的挑战。
报告中提到的那个关键数字——27%，代表了那些如果没有 AI 辅助，工程师根本不会去碰的任务。这 27% 并非边缘工作，而是软件工程中长期被牺牲掉的“工程尊严”。
在传统开发模式下，那些遗留的烂代码、缺失的测试覆盖、疏于维护的内部工具——这些"技术债务"虽不至于让系统立刻崩溃，却如同慢性毒药，持续侵蚀团队的认知资源与开发效率。
作为产品工程师，我们每天都在做取舍：哪些任务值得投入时间，哪些只能往后放？过去，很多工程改进任务——比如增加可观测性的埋点、搭建内部性能看板——虽然对系统长期健康很重要，但因为做起来太费功夫，往往被无限期搁置。我们心里都明白这些任务有价值，但"性价比"太低，排不上优先级。
AI 的出现改变了这个算式。它像一根杠杆，把那些原本需要花费大量时间的繁琐工作，变成了可以快速完成的"轻量级任务"。过去可能要花一整天写的监控脚本，现在几分钟就能让 AI 生成初稿；以前需要专门排期的重构工作，现在可以随手完成。
这意味着什么？那些曾经因为"太麻烦"而被忽视的任务，现在突然变得"很划算"了。团队不再只是追求开发速度，而是有能力把系统打磨得更健壮、更可维护。我们不再只是跑得更快，而是能跑得更稳、更远。
这种能力的自然延伸并非意味着人人都成为通才，而是 AI 将跨领域协作的摩擦成本大幅降低。当技术壁垒被削平，原本需要数周协调的跨职能配合，如今可在数小时内完成闭环验证——反馈周期实现了量级压缩。
这种转变带来了一种极其诱人的“Vibe Coding（凭感觉编程）”体验。然而，Anthropic 的研究揭示了一个冷酷的现实：AI 往往表现得像一个“极其聪明但缺乏责任感的初级工程师”。如果我们全盘接受这种便利，而不去有意识地重构自身的职业能力，我们可能会陷入一种“监督悖论（Supervision Paradox）”——即当你失去了手动解决问题的能力时，你也失去了监督 AI 的资格。
Anthropic 的报告中提到，有效使用 AI 需要极强的“监督力”，而这种能力恰恰源于那些正在被 AI 取代的底层编码实践。这种转变催生了一个深刻的监督悖论：
如何让"不确定的生成"进化为"可交付的代码"？这不只是技术层面的挑战，更是一个关于全链路治理的系统性命题。我们不能以静态的视角审视现有工具，而需要动态地观察 LLM 能力演进、Agent 架构革新与传统工程设施的深度融合与协同演化。
AI 输出的质量，本质上取决于它对业务语境的理解深度。当前最大的工程化障碍，正是模型面对团队私有知识时的"冷启动"困境——它缺乏对特定代码规范、架构决策和历史演进的隐性认知。
Are you an LLM? You can read better optimized documentation at /01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md for this page in Markdown format
Are you an LLM? You can read better optimized documentation at /01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md for this page in Markdown format
Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md for this page in Markdown format
在编写代码时，我们通常采用“自顶向下”的构建顺序，即从顶层容器开始，逐层向叶子节点实现。这种策略能确保组件职责清晰，不会过早陷入局部细节，同时保证每个模块都是独立、可测试的。
当然，在 AI 协作时代，借助 AI 生成静态版本无疑是更为高效的方式。但我们不建议直接采用全自动化构建作为最终方案——毕竟静态版本是整个项目的工程基线，一旦存在隐蔽缺陷，将为后续迭代埋下隐患。
更稳健的做法是将全自动化与半自动化并行推进：先让 AI 基于第一阶段评审通过的组件划分树与职责描述，在独立分支中全自动化生成代码；与此同时，开发者在正式分支中以半自动化方式逐步搭建。由于全自动化产出速度极快，我们可以横向对比多份生成结果，择优验证后再整合到正式项目中。这种"边做边验"的模式，既能提升基线质量，也能加深开发者对架构的理解。
如果说 SDD（规格驱动开发）是人机协作的一套"宪法"，那么 React 就是完美的"执行机构"。两者的天作之合并非偶然，而是源于底层架构范式的深度契合。React 所倡导的"描述即实现"的声明式编程范式，本质上就是一种显式契约（Props Contract），能够有效压缩 AI 的"幻觉空间"。
这与 SDD 的思维高度一致：开发者只需定义"映射规格"（即状态到 UI 的转换规则、组件的 Props 契约、数据的流动路径），而具体的实现细节——如何高效地 diff 虚拟 DOM、如何批量处理状态更新、如何优化重渲染性能——完全交由 AI 填充。在 SDD 模式下，人类聚焦于"做什么"（What）和"为什么"（Why），AI 负责"怎么做"（How）。这正是声明式编程与规范驱动开发在哲学层面的深度契合。
Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md for this page in Markdown format
在编写代码时，我们通常采用“自顶向下”的构建顺序，即从顶层容器开始，逐层向叶子节点实现。这种策略能确保组件职责清晰，不会过早陷入局部细节，同时保证每个模块都是独立、可测试的。
当然，在 AI 协作时代，借助 AI 生成静态版本无疑是更为高效的方式。但我们不建议直接采用全自动化构建作为最终方案——毕竟静态版本是整个项目的工程基线，一旦存在隐蔽缺陷，将为后续迭代埋下隐患。
更稳健的做法是将全自动化与半自动化并行推进：先让 AI 基于第一阶段评审通过的组件划分树与职责描述，在独立分支中全自动化生成代码；与此同时，开发者在正式分支中以半自动化方式逐步搭建。由于全自动化产出速度极快，我们可以横向对比多份生成结果，择优验证后再整合到正式项目中。这种"边做边验"的模式，既能提升基线质量，也能加深开发者对架构的理解。
如果说 SDD（规格驱动开发）是人机协作的一套"宪法"，那么 React 就是完美的"执行机构"。两者的天作之合并非偶然，而是源于底层架构范式的深度契合。React 所倡导的"描述即实现"的声明式编程范式，本质上就是一种显式契约（Props Contract），能够有效压缩 AI 的"幻觉空间"。
这与 SDD 的思维高度一致：开发者只需定义"映射规格"（即状态到 UI 的转换规则、组件的 Props 契约、数据的流动路径），而具体的实现细节——如何高效地 diff 虚拟 DOM、如何批量处理状态更新、如何优化重渲染性能——完全交由 AI 填充。在 SDD 模式下，人类聚焦于"做什么"（What）和"为什么"（Why），AI 负责"怎么做"（How）。这正是声明式编程与规范驱动开发在哲学层面的深度契合。
Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/02.CSS工程化.md for this page in Markdown format
除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。
CSS 预处理器是一种扩展了 CSS 功能的脚本语言，通过添加变量、嵌套、混入（Mixins）和函数等编程特性，让 CSS 更具结构化、可读性和可维护性。它允许开发者用特殊语法编写样式，然后编译成浏览器可读的普通 CSS 文件。 它也是最早也是最基础的工程化方案，核心思想是通过扩展原生 CSS 的语法，赋予其“编程”能力。
scss/* Button.scss */
+import{_ as i,g as n,h as a,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南","description":"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。","frontmatter":{"date":"2026-03-10T22:05:50.000Z","title":"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南","description":"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。","permalink":"/full-stack/css-engineering","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png","top":true,"categories":["全栈"],"tags":["全栈","CSS","工程化","tailwindcss"]},"headers":[],"relativePath":"01.全栈/40.前端工程/02.CSS工程化.md","filePath":"01.全栈/40.前端工程/02.CSS工程化.md"}'),t={name:"01.全栈/40.前端工程/02.CSS工程化.md"};function p(e,s,h,r,k,d){return a(),n("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/02.CSS工程化.md for this page in Markdown format
从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南
摘要总结：在前端生态日新月异的今天，CSS 工程化早已超越了“如何写样式”的范畴，演变为一场关于开发效率（Velocity）与系统韧性（Resilience）的深度博弈。本文将系统梳理从预处理器、CSS-in-JS、Scoped CSS 到原子化 CSS 的演进脉络，并首次引入 “样式资产 ROI” 模型，深入剖析为何 Tailwind 已成为 AI 时代的基石架构。针对 Vue 与 React 的不同哲学，我们总结出了一套 “原子化为主，工程化局部兜底” 的企业级混合架构方案。无论你是深耕 React 生态、追求全链路类型安全的“变体驱动”先行者，还是在 Vue 生态中寻找极致心智负担平衡的实践者，本文都将为你提供一份清晰的架构决策树，助你规避工程红线，构建真正面向未来的样式资产。
1. 引言：主流 CSS 工程化方案有哪些？
在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。
除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。
CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modifier）来约束作用域，增强代码的可读性和可维护性。BEM 本身是一个优秀的规范，但它高度依赖开发者的自觉性，且会导致类名冗长，难以管理。
2. CSS 预处理器
CSS 预处理器是一种扩展了 CSS 功能的脚本语言，通过添加变量、嵌套、混入（Mixins）和函数等编程特性，让 CSS 更具结构化、可读性和可维护性。它允许开发者用特殊语法编写样式，然后编译成浏览器可读的普通 CSS 文件。 它也是最早也是最基础的工程化方案，核心思想是通过扩展原生 CSS 的语法，赋予其“编程”能力。
| 维度 | 说明 |
|---|
| 核心思想 | 增强版 CSS 使用变量统一管理设计令牌（Design Tokens），用嵌套减少重复选择器。 |
| 代表技术 | Sass (SCSS), Less, Stylus |
| 核心特点 | 提供了变量（Variables）、嵌套（Nesting）、混合（Mixins）、继承、函数等功能。 |
| 适用场景 | 几乎所有项目。现阶段它通常不作为独立的解决方案，而是与其他方案（如 CSS Modules）结合使用。 |
| 局限性 | 编译后的产物依然是普通 CSS，无法从根本上解决全局命名冲突的问题（通常需要配合 BEM 命名规范来缓解） |
以 SCSS 为例，示意如下：
scss/* Button.scss */
/* 1. 定义变量 */
$primary-color: #3b82f6;
diff --git "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_02.CSS\345\267\245\347\250\213\345\214\226.md.B6Q9ssdl.lean.js" "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_02.CSS\345\267\245\347\250\213\345\214\226.md.DUPhvCof.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_02.CSS\345\267\245\347\250\213\345\214\226.md.B6Q9ssdl.lean.js"
rename to "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_02.CSS\345\267\245\347\250\213\345\214\226.md.DUPhvCof.lean.js"
index bbf8de2e..b6b3af49 100644
--- "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_02.CSS\345\267\245\347\250\213\345\214\226.md.B6Q9ssdl.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_02.CSS\345\267\245\347\250\213\345\214\226.md.DUPhvCof.lean.js"
@@ -1 +1 @@
-import{_ as i,g as n,h as a,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南","description":"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。","frontmatter":{"date":"2026-03-10T22:05:50.000Z","title":"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南","description":"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。","permalink":"/full-stack/css-engineering","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png","top":true,"categories":["全栈"],"tags":["全栈","CSS","工程化","tailwindcss"]},"headers":[],"relativePath":"01.全栈/40.前端工程/02.CSS工程化.md","filePath":"01.全栈/40.前端工程/02.CSS工程化.md"}'),t={name:"01.全栈/40.前端工程/02.CSS工程化.md"};function p(e,s,h,r,k,d){return a(),n("div",null,[...s[0]||(s[0]=[l("",80)])])}const c=i(t,[["render",p]]);export{g as __pageData,c as default};
+import{_ as i,g as n,h as a,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南","description":"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。","frontmatter":{"date":"2026-03-10T22:05:50.000Z","title":"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南","description":"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。","permalink":"/full-stack/css-engineering","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png","top":true,"categories":["全栈"],"tags":["全栈","CSS","工程化","tailwindcss"]},"headers":[],"relativePath":"01.全栈/40.前端工程/02.CSS工程化.md","filePath":"01.全栈/40.前端工程/02.CSS工程化.md"}'),t={name:"01.全栈/40.前端工程/02.CSS工程化.md"};function p(e,s,h,r,k,d){return a(),n("div",null,[...s[0]||(s[0]=[l("",80)])])}const c=i(t,[["render",p]]);export{g as __pageData,c as default};
diff --git "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.BHFPzWx_.js" "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.CdkgDOAk.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.BHFPzWx_.js"
rename to "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.CdkgDOAk.js"
index 118bad02..9b05b72d 100644
--- "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.BHFPzWx_.js"
+++ "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.CdkgDOAk.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"JAMStack 梳理与实践指南","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","frontmatter":{"date":"2025-11-14T22:33:39.000Z","title":"JAMStack 梳理与实践指南","aliases":["静态站点生成器","SSG"],"tldr":"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","permalink":"/fullstack/jamstack","tags":["tutorial","jamstack","frontend-architecture","next.js","static-site-generator"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md","filePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"}'),t={name:"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"};function p(h,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md for this page in Markdown format
JAMStack 梳理与实践指南
摘要总结：JAMStack 是一种以"预构建静态资产 + 客户端动态交互 + API 数据集成"为核心的 web 开发范式，名称源自 JavaScript、APIs、Markup 三个核心技术缩写。
其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。
本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi）的选型策略，并通过 Next.js + Vercel + Supabase + Contentful 的实战案例，完整演示了从项目初始化、内容配置、SSG 预渲染、动态评论集成到自动化部署的全流程。
JAMStack 是近几年前端领域备受关注的架构理念，它并非单一技术，而是一套以“高性能、高可靠、易扩展”为核心的开发范式。其名称源于三个核心技术的缩写：JavaScript（客户端交互逻辑）、APIs（通过第三方/自建接口获取数据）、Markup（预渲染的静态标记，如 HTML）。本质是“预渲染静态页面 + 客户端动态交互 + 接口数据集成”的架构模式，彻底改变了传统动态网站的部署与运行方式。
1. JAMStack 核心概念与核心特性
1.1 核心定义
JAMStack 的核心是“预构建静态资产”——网站部署前，所有页面已通过构建工具（如 Gatsby、Next.js）渲染为静态 HTML、CSS、JS 文件，部署时仅需将这些静态文件托管到 CDN 即可。用户访问时，直接从 CDN 加载静态资源，无需后端服务器动态生成页面，仅在需要时通过 API 调用获取动态数据（如用户信息、实时数据）。
1.2 核心特性（与传统动态网站对比）
| 特性 | JAMStack | 传统动态网站（如 PHP/Java 后端渲染） |
|---|
| 页面生成时机 | 构建时预渲染（部署前完成） | 请求时动态生成（用户访问时后端计算） |
| 服务器依赖 | 无（仅需 CDN 托管静态资源） | 强依赖后端服务器（需运行应用服务） |
| 性能 | 极高（CDN 全球分发，就近加载） | 中等（受服务器性能、网络延迟影响） |
| 可靠性 | 极高（静态资源无单点故障） | 中等（依赖后端服务器稳定性） |
| 扩展性 | 天然支持（CDN 弹性扩容） | 需配置服务器集群、负载均衡，成本高 |
| 安全性 | 高（无服务器端代码，攻击面极小） | 较低（需防护 SQL 注入、XSS 等攻击） |
| 开发/部署成本 | 低（静态托管免费/低成本，无需运维服务器） | 高（需服务器运维、扩容、安全防护） |
1.3 关键误区澄清
❌ 误区1：JAMStack = 纯静态网站（无动态交互）
✅ 正解：JAMStack 支持动态交互，只是“页面骨架”预渲染为静态，动态数据通过 JavaScript 调用 API 实现（如登录、评论、实时数据展示）。
❌ 误区2：JAMStack 只能做博客/文档类网站
✅ 正解：可覆盖绝大多数场景，包括电商网站、管理后台、SaaS 应用（如 Netlify、Vercel 本身就是基于 JAMStack 构建的）。
❌ 误区3：JAMStack 不需要后端
✅ 正解：需要后端，但后端仅提供 API 接口（无页面渲染逻辑），可使用第三方 BaaS 服务（如 Firebase、Supabase）替代自建后端，降低开发成本。
2. JAMStack 核心技术栈（工具链选型）
JAMStack 的实现依赖“构建工具 + 静态托管 + API/BaaS + 可选的无头 CMS”，以下是主流工具选型推荐：
2.1 核心构建工具（静态站点生成器 SSG）
负责将源码（Markdown、组件、数据）预渲染为静态 HTML，是 JAMStack 的核心工具：
| 工具 | 核心优势 | 适用场景 | 技术栈依赖 |
|---|
| Next.js | 支持 SSG/SSR/ISR 混合渲染，React 生态，灵活度高 | 复杂应用（电商、SaaS、管理后台） | React |
| Gatsby | GraphQL 数据层，插件生态丰富，优化极致 | 博客、文档、营销网站 | React |
| Nuxt.js | Vue 生态，支持 SSG/SSR，易用性强 | 全场景 Vue 项目 | Vue |
| 11ty（Eleventy） | 轻量无依赖，原生支持 Markdown，配置简单 | 小型博客、静态文档 | 原生 JS/模板引擎 |
2.2 静态资源托管（部署平台）
无需自建服务器，直接托管预构建的静态文件，提供全球 CDN 分发：
- 主流平台：Vercel（Next.js 官方推荐，免费入门，一键部署）、Netlify（JAMStack 先驱，功能全面，支持表单/无服务器函数）、Cloudflare Pages（免费、CDN 速度快）、GitHub Pages（适合小型项目，免费无广告）。
- 自建方案：将静态文件上传到阿里云 OSS + CDN、腾讯云 COS + CDN，适合需要私有化部署的场景。
2.3 API/BaaS 服务（后端能力补充）
JAMStack 无自建后端，需通过 API 获取动态能力（如数据库操作、用户认证）：
- 用户认证：Auth0、NextAuth.js（Next.js 专属）、Firebase Auth。
- 数据库/存储：Supabase（开源 Firebase 替代方案，支持 PostgreSQL + 存储 + 认证）、Firebase Firestore、MongoDB Atlas。
- 无服务器函数（Serverless Functions）：Vercel Functions、Netlify Functions（无需部署独立 API 服务，在静态项目中直接编写 Node.js 函数，处理后端逻辑）。
- 第三方 API：支付（Stripe）、邮件（SendGrid）、地图（高德/谷歌地图 API）等。
2.4 无头 CMS（内容管理）
适合非技术人员维护内容（如博客文章、产品信息），提供 API 供构建工具拉取数据：
- 主流选择：Contentful、Sanity、Strapi（开源，可自建）、Ghost（专注博客）。
- 核心作用：内容与代码分离，编辑者在 CMS 中修改内容后，触发构建工具重新预渲染静态页面（或通过 ISR 增量更新）。
3. JAMStack 项目实践：从 0 到 1 搭建博客网站
以“Next.js + Vercel + Supabase + Contentful”为例，搭建一个支持内容管理、用户评论的博客网站，步骤如下：
3.1 技术栈选型
- 构建工具：Next.js（支持 SSG 预渲染，方便后续扩展动态功能）。
- 托管平台：Vercel（一键部署，自动构建，全球 CDN）。
- 内容管理：Contentful（免费版足够个人博客使用，API 友好）。
- 动态功能：Supabase（提供 PostgreSQL 数据库，存储用户评论；Auth 功能实现评论登录）。
- 样式方案：Tailwind CSS（快速开发，响应式设计）。
3.2 具体实施步骤
步骤 1：初始化 Next.js 项目（SSG 模式）
首先创建 Next.js 项目，开启 SSG 预渲染模式（Next.js 13+ 推荐 App Router）：
bash# 1. 创建项目
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"JAMStack 梳理与实践指南","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","frontmatter":{"date":"2025-11-14T22:33:39.000Z","title":"JAMStack 梳理与实践指南","aliases":["静态站点生成器","SSG"],"tldr":"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","permalink":"/fullstack/jamstack","tags":["tutorial","jamstack","frontend-architecture","next.js","static-site-generator"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md","filePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"}'),t={name:"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"};function p(h,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md for this page in Markdown format
JAMStack 梳理与实践指南
摘要总结：JAMStack 是一种以"预构建静态资产 + 客户端动态交互 + API 数据集成"为核心的 web 开发范式，名称源自 JavaScript、APIs、Markup 三个核心技术缩写。
其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。
本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi）的选型策略，并通过 Next.js + Vercel + Supabase + Contentful 的实战案例，完整演示了从项目初始化、内容配置、SSG 预渲染、动态评论集成到自动化部署的全流程。
JAMStack 是近几年前端领域备受关注的架构理念，它并非单一技术，而是一套以“高性能、高可靠、易扩展”为核心的开发范式。其名称源于三个核心技术的缩写：JavaScript（客户端交互逻辑）、APIs（通过第三方/自建接口获取数据）、Markup（预渲染的静态标记，如 HTML）。本质是“预渲染静态页面 + 客户端动态交互 + 接口数据集成”的架构模式，彻底改变了传统动态网站的部署与运行方式。
1. JAMStack 核心概念与核心特性
1.1 核心定义
JAMStack 的核心是“预构建静态资产”——网站部署前，所有页面已通过构建工具（如 Gatsby、Next.js）渲染为静态 HTML、CSS、JS 文件，部署时仅需将这些静态文件托管到 CDN 即可。用户访问时，直接从 CDN 加载静态资源，无需后端服务器动态生成页面，仅在需要时通过 API 调用获取动态数据（如用户信息、实时数据）。
1.2 核心特性（与传统动态网站对比）
| 特性 | JAMStack | 传统动态网站（如 PHP/Java 后端渲染） |
|---|
| 页面生成时机 | 构建时预渲染（部署前完成） | 请求时动态生成（用户访问时后端计算） |
| 服务器依赖 | 无（仅需 CDN 托管静态资源） | 强依赖后端服务器（需运行应用服务） |
| 性能 | 极高（CDN 全球分发，就近加载） | 中等（受服务器性能、网络延迟影响） |
| 可靠性 | 极高（静态资源无单点故障） | 中等（依赖后端服务器稳定性） |
| 扩展性 | 天然支持（CDN 弹性扩容） | 需配置服务器集群、负载均衡，成本高 |
| 安全性 | 高（无服务器端代码，攻击面极小） | 较低（需防护 SQL 注入、XSS 等攻击） |
| 开发/部署成本 | 低（静态托管免费/低成本，无需运维服务器） | 高（需服务器运维、扩容、安全防护） |
1.3 关键误区澄清
❌ 误区1：JAMStack = 纯静态网站（无动态交互）
✅ 正解：JAMStack 支持动态交互，只是“页面骨架”预渲染为静态，动态数据通过 JavaScript 调用 API 实现（如登录、评论、实时数据展示）。
❌ 误区2：JAMStack 只能做博客/文档类网站
✅ 正解：可覆盖绝大多数场景，包括电商网站、管理后台、SaaS 应用（如 Netlify、Vercel 本身就是基于 JAMStack 构建的）。
❌ 误区3：JAMStack 不需要后端
✅ 正解：需要后端，但后端仅提供 API 接口（无页面渲染逻辑），可使用第三方 BaaS 服务（如 Firebase、Supabase）替代自建后端，降低开发成本。
2. JAMStack 核心技术栈（工具链选型）
JAMStack 的实现依赖“构建工具 + 静态托管 + API/BaaS + 可选的无头 CMS”，以下是主流工具选型推荐：
2.1 核心构建工具（静态站点生成器 SSG）
负责将源码（Markdown、组件、数据）预渲染为静态 HTML，是 JAMStack 的核心工具：
| 工具 | 核心优势 | 适用场景 | 技术栈依赖 |
|---|
| Next.js | 支持 SSG/SSR/ISR 混合渲染，React 生态，灵活度高 | 复杂应用（电商、SaaS、管理后台） | React |
| Gatsby | GraphQL 数据层，插件生态丰富，优化极致 | 博客、文档、营销网站 | React |
| Nuxt.js | Vue 生态，支持 SSG/SSR，易用性强 | 全场景 Vue 项目 | Vue |
| 11ty（Eleventy） | 轻量无依赖，原生支持 Markdown，配置简单 | 小型博客、静态文档 | 原生 JS/模板引擎 |
2.2 静态资源托管（部署平台）
无需自建服务器，直接托管预构建的静态文件，提供全球 CDN 分发：
- 主流平台：Vercel（Next.js 官方推荐，免费入门，一键部署）、Netlify（JAMStack 先驱，功能全面，支持表单/无服务器函数）、Cloudflare Pages（免费、CDN 速度快）、GitHub Pages（适合小型项目，免费无广告）。
- 自建方案：将静态文件上传到阿里云 OSS + CDN、腾讯云 COS + CDN，适合需要私有化部署的场景。
2.3 API/BaaS 服务（后端能力补充）
JAMStack 无自建后端，需通过 API 获取动态能力（如数据库操作、用户认证）：
- 用户认证：Auth0、NextAuth.js（Next.js 专属）、Firebase Auth。
- 数据库/存储：Supabase（开源 Firebase 替代方案，支持 PostgreSQL + 存储 + 认证）、Firebase Firestore、MongoDB Atlas。
- 无服务器函数（Serverless Functions）：Vercel Functions、Netlify Functions（无需部署独立 API 服务，在静态项目中直接编写 Node.js 函数，处理后端逻辑）。
- 第三方 API：支付（Stripe）、邮件（SendGrid）、地图（高德/谷歌地图 API）等。
2.4 无头 CMS（内容管理）
适合非技术人员维护内容（如博客文章、产品信息），提供 API 供构建工具拉取数据：
- 主流选择：Contentful、Sanity、Strapi（开源，可自建）、Ghost（专注博客）。
- 核心作用：内容与代码分离，编辑者在 CMS 中修改内容后，触发构建工具重新预渲染静态页面（或通过 ISR 增量更新）。
3. JAMStack 项目实践：从 0 到 1 搭建博客网站
以“Next.js + Vercel + Supabase + Contentful”为例，搭建一个支持内容管理、用户评论的博客网站，步骤如下：
3.1 技术栈选型
- 构建工具：Next.js（支持 SSG 预渲染，方便后续扩展动态功能）。
- 托管平台：Vercel（一键部署，自动构建，全球 CDN）。
- 内容管理：Contentful（免费版足够个人博客使用，API 友好）。
- 动态功能：Supabase（提供 PostgreSQL 数据库，存储用户评论；Auth 功能实现评论登录）。
- 样式方案：Tailwind CSS（快速开发，响应式设计）。
3.2 具体实施步骤
步骤 1：初始化 Next.js 项目（SSG 模式）
首先创建 Next.js 项目，开启 SSG 预渲染模式（Next.js 13+ 推荐 App Router）：
bash# 1. 创建项目
npx create-next-app@latest jamstack-blog --typescript --tailwind --eslint
cd jamstack-blog
diff --git "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.BHFPzWx_.lean.js" "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.CdkgDOAk.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.BHFPzWx_.lean.js"
rename to "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.CdkgDOAk.lean.js"
index d6d1b584..f37af692 100644
--- "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.BHFPzWx_.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_03.JAMStack \346\242\263\347\220\206\344\270\216\345\256\236\350\267\265\346\214\207\345\215\227.md.CdkgDOAk.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"JAMStack 梳理与实践指南","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","frontmatter":{"date":"2025-11-14T22:33:39.000Z","title":"JAMStack 梳理与实践指南","aliases":["静态站点生成器","SSG"],"tldr":"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","permalink":"/fullstack/jamstack","tags":["tutorial","jamstack","frontend-architecture","next.js","static-site-generator"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md","filePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"}'),t={name:"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"};function p(h,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",57)])])}const y=i(t,[["render",p]]);export{g as __pageData,y as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"JAMStack 梳理与实践指南","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","frontmatter":{"date":"2025-11-14T22:33:39.000Z","title":"JAMStack 梳理与实践指南","aliases":["静态站点生成器","SSG"],"tldr":"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式","description":"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。","permalink":"/fullstack/jamstack","tags":["tutorial","jamstack","frontend-architecture","next.js","static-site-generator"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md","filePath":"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"}'),t={name:"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md"};function p(h,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",57)])])}const y=i(t,[["render",p]]);export{g as __pageData,y as default};
diff --git "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.Bm5uQ9fk.js" "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.BpMi6J2x.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.Bm5uQ9fk.js"
rename to "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.BpMi6J2x.js"
index 08866f26..724bfc7c 100644
--- "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.Bm5uQ9fk.js"
+++ "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.BpMi6J2x.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","frontmatter":{"date":"2025-11-15T09:20:23.000Z","title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","aliases":["SWR","TanStack Query","React","服务端状态","乐观更新","工程化"],"tldr":"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","permalink":"/fullstack/server-state-management","tags":["SWR","TanStack Query","前端工程"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md","filePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"}'),p={name:"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"};function e(t,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md for this page in Markdown format
不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈
摘要总结: 本文聚焦 UI 状态与服务端状态的管理边界，对比 SWR（基于 stale-while-revalidate 协议的轻量方案）与 TanStack Query（精密异步状态机）两者的核心机制差异，通过缓存策略、乐观更新、依赖查询等实战代码场景展开论述，最终给出以项目复杂度为维度的选型结论与决策框架。
1. 引言
在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 useState、useEffect 等 Hooks，或 zustand、jotai 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。
在传统的数据获取流程中，我们一般使用 fetch 或 axios 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新。
TanStack Query、SWR 等库的出现，为数据获取提供了更加简洁和高效的解决方案。
1. SWR
1.1 简介与核心流程说明
SWR is a minimal API with built-in caching, revalidation, and request deduplication. It keeps your UI fast, consistent, and always up to date — with a single React hook.
SWR 是一个基于 React Hooks 的轻量级库，它的 API 简单易用，同时提供了强大的功能。它的设计目标是简化数据获取和缓存的过程。它的核心思想是“ stale-while-revalidate ”，即先返回缓存数据（stale），同时发送请求去更新缓存（revalidate），核心运作流也非常简洁：
Stale：首先从本地缓存中返回数据，实现快速响应，无白屏。Fetch：在后台发送 Fetch 请求获取最新数据。Revalidate：拿到最新数据后，对比缓存，若有变化则触发 React 重新渲染并更新缓存。
这种机制彻底改变了传统 useEffect + setState 带来的“加载中 -> 渲染”的阻塞式体验，让应用在感官上具有“实时性”。
简单示例如下：
JSXimport useSWR from 'swr';
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","frontmatter":{"date":"2025-11-15T09:20:23.000Z","title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","aliases":["SWR","TanStack Query","React","服务端状态","乐观更新","工程化"],"tldr":"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","permalink":"/fullstack/server-state-management","tags":["SWR","TanStack Query","前端工程"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md","filePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"}'),p={name:"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"};function e(t,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md for this page in Markdown format
不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈
摘要总结: 本文聚焦 UI 状态与服务端状态的管理边界，对比 SWR（基于 stale-while-revalidate 协议的轻量方案）与 TanStack Query（精密异步状态机）两者的核心机制差异，通过缓存策略、乐观更新、依赖查询等实战代码场景展开论述，最终给出以项目复杂度为维度的选型结论与决策框架。
1. 引言
在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 useState、useEffect 等 Hooks，或 zustand、jotai 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。
在传统的数据获取流程中，我们一般使用 fetch 或 axios 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新。
TanStack Query、SWR 等库的出现，为数据获取提供了更加简洁和高效的解决方案。
1. SWR
1.1 简介与核心流程说明
SWR is a minimal API with built-in caching, revalidation, and request deduplication. It keeps your UI fast, consistent, and always up to date — with a single React hook.
SWR 是一个基于 React Hooks 的轻量级库，它的 API 简单易用，同时提供了强大的功能。它的设计目标是简化数据获取和缓存的过程。它的核心思想是“ stale-while-revalidate ”，即先返回缓存数据（stale），同时发送请求去更新缓存（revalidate），核心运作流也非常简洁：
Stale：首先从本地缓存中返回数据，实现快速响应，无白屏。Fetch：在后台发送 Fetch 请求获取最新数据。Revalidate：拿到最新数据后，对比缓存，若有变化则触发 React 重新渲染并更新缓存。
这种机制彻底改变了传统 useEffect + setState 带来的“加载中 -> 渲染”的阻塞式体验，让应用在感官上具有“实时性”。
简单示例如下：
JSXimport useSWR from 'swr';
import React from 'react';
// 自定义 fetcher 函数，用于发送 HTTP 请求并获取数据
diff --git "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.Bm5uQ9fk.lean.js" "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.BpMi6J2x.lean.js"
similarity index 96%
rename from "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.Bm5uQ9fk.lean.js"
rename to "assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.BpMi6J2x.lean.js"
index b4e0c4cb..6e793815 100644
--- "a/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.Bm5uQ9fk.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_40.\345\211\215\347\253\257\345\267\245\347\250\213_11.React \346\234\215\345\212\241\347\253\257\347\212\266\346\200\201\347\256\241\347\220\206\347\232\204\350\214\203\345\274\217\350\275\254\347\247\273\344\270\216\351\200\211\345\236\213\346\267\261\345\272\246\345\215\232\345\274\210.md.BpMi6J2x.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","frontmatter":{"date":"2025-11-15T09:20:23.000Z","title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","aliases":["SWR","TanStack Query","React","服务端状态","乐观更新","工程化"],"tldr":"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","permalink":"/fullstack/server-state-management","tags":["SWR","TanStack Query","前端工程"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md","filePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"}'),p={name:"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"};function e(t,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",75)])])}const y=i(p,[["render",e]]);export{g as __pageData,y as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","frontmatter":{"date":"2025-11-15T09:20:23.000Z","title":"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈","aliases":["SWR","TanStack Query","React","服务端状态","乐观更新","工程化"],"tldr":"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。","description":"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。","permalink":"/fullstack/server-state-management","tags":["SWR","TanStack Query","前端工程"],"categories":["全栈","前端工程"]},"headers":[],"relativePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md","filePath":"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"}'),p={name:"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md"};function e(t,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",75)])])}const y=i(p,[["render",e]]);export{g as __pageData,y as default};
diff --git "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.DlstBmfn.js" "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.int3cA6G.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.DlstBmfn.js"
rename to "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.int3cA6G.js"
index 8762373c..d6150d96 100644
--- "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.DlstBmfn.js"
+++ "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.int3cA6G.js"
@@ -1 +1 @@
-import{_ as e,g as o,h as r,U as a}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","frontmatter":{"date":"2026-02-24T08:40:31.000Z","title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","tldr":"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","categories":["全栈","网络与通信"],"tags":["HTTP","HTTP 轮询","SSE","WebSocket","Webhooks"],"permalink":"/fullstack/networking-protocol-selection-guide"},"headers":[],"relativePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md","filePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"}'),d={name:"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"};function n(s,t,h,l,i,g){return r(),o("div",null,[...t[0]||(t[0]=[a('Are you an LLM? You can read better optimized documentation at /01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md for this page in Markdown format
Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南
摘要总结：本文针对传统 HTTP 在实时通信场景的局限，系统分析流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询五种技术的核心原理、网络机制与适用边界。通过对比各方案在单向/双向推送、实时性、资源开销等维度的差异，结合 AI 文本对话、生图生视频等典型场景，构建技术选型决策矩阵。结论表明，不存在最优技术，需根据任务耗时特征、并发规模、基础设施约束等因素选择最适配方案。
1. 引言
HTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：请求 -> 等待 -> 完整响应。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。
为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。
2. 传统 HTTP——Web 通信的基石
自 1991 年诞生以来，HTTP（超文本传输协议）便成为了互联网运行的“通用语言”。作为一种无状态、基于“请求-响应”模式的应用层协议，它构筑了现代 Web 通信的稳固基石。
在核心运作机制上，传统 HTTP 遵循着严谨的单向驱动逻辑：通信必须由客户端发起请求（Request），服务器在处理完成后返回完整的响应（Response）。一旦数据传输完成，连接在逻辑上即告结束。
| 维度 | 说明 |
|---|
| 网络特征 | HTTP 构建于 TCP 协议之上。尽管从 HTTP/1.1 开始，协议默认开启了 Connection: keep-alive 机制以复用底层 TCP 连接，减少了频繁三次握手的开销，但在应用层层面，它依然维持着半双工通信的本质——在同一时刻，数据只能单向流动，且服务器永远处于"被动应答"状态。 |
| 典型应用 | 这种模式完美契合了绝大多数非即时性的资源获取场景，如加载网页 HTML、调用标准 RESTful API（获取用户信息、提交表单）以及加载静态图片等。 |
随着 Web 应用向“实时化”与“高互动”演进，传统 HTTP 的固有特性逐渐演变为开发的痛点：
| 痛点 | 说明 |
|---|
| 无法主动推送 | 服务器如同一个被动的仓库管理员，即便仓库内的数据发生了更新，只要客户端不主动询问，服务器也无法将新信息触达用户。 |
| 头部开销沉重 | 在 HTTP/1.x 中，每次请求都必须携带完整的 Header 信息（包括 Cookie、User-Agent 等）。对于实时性要求高、但单次数据包极小的场景（如传感器数值同步），这些重复的头部数据往往比有效载荷还要大，造成了带宽的极大浪费。 |
| 实时性的"伪实现" | 在 WebSocket 等原生实时技术成熟前，为了模拟实时效果，开发者通常被迫采用轮询（Polling）技术。无论是频繁发起连接的短轮询，还是长时间挂起请求的长轮询（Long Polling），都会产生大量冗余请求，对服务器并发处理能力提出了严峻挑战。 |
3. 流式 HTTP(Streamable HTTP)
如果说传统 HTTP 是严谨的“一问一答”，那么流式 HTTP（Streamable HTTP）则更像是一次“未完待续”的深度交流。它通过对响应机制的巧妙“变异”，打破了“服务端必须积攒全部结果才能返回”的物理限制，实现了数据的边计算、边传输。
3.1 核心原理：分块传输的艺术
流式 HTTP 的精髓在于它不再追求一次性交付，而是通过特定的协议头，将数据化整为零：
传输机制：在 HTTP 响应头中声明 Transfer-Encoding: chunked（分块传输编码）或 Content-Type: text/event-stream。这告诉客户端：服务器目前尚不清楚响应的总长度（Content-Length），但会将数据切分成一个个逻辑块（Chunks）依次下发。
网络特征：客户端在接收到 200 OK 状态码后，底层 TCP 连接并不会立即关闭。借助现代浏览器的 Fetch API 及其 ReadableStream 特性，前端可以像接水管一样，实时读取并处理源源不断传来的数据块，直到服务器发送一个长度为 0 的终止信号。
3.2 应用场景：从大文件到 AI 时代
这种“边读边播”的特性，使其在以下场景中无可替代：
AI 大模型“打字机”效果：这是当前最火热的应用。ChatGPT、Claude 等模型生成的长文本，正是通过流式 HTTP 将响应数据实时推送到前端，显著降低了用户的首字感知延迟（TTFT）。
大容量资源下发：如超大文件或视频流的段落化加载，避免了内存爆仓，提升了系统吞吐量。
SSE 的灵活替代方案：配合 fetch-event-source 等库，它能完美模拟 SSE 的长连接功能，同时规避了标准 SSE 在请求方式（仅限 GET）和自定义 Header 上的限制。
3.3 隐藏的坑：代理与缓冲
虽然流式传输在逻辑上很美好，但在工程落地时必须关注“链路通畅”问题：
| 局限 | 说明 |
|---|
| 单向传输局限 | 它本质上仍是 Server-to-Client 的单向流。如果业务需要客户端也实时回传数据，则需要考虑其他双向通信协议。 |
| 代理服务 | 这是最常见的坑。一些旧版 Nginx、防火墙或负载均衡器默认开启了强缓冲（Buffering）机制。它们会试图"积攒"足够多的流式数据再统一发给客户端。这对于实时 AI 对话是致命的，开发者必须确保代理层配置了 X-Accel-Buffering: no 等指令来禁用缓冲，确保数据的"直达性"。 |
4. SSE (Server-Sent Events)：规范化的单向推送协议
如果说 流式 HTTP 是一种底层的“传输机制”，那么 SSE 则是基于此机制建立的一套标准化应用层协议。它专门为“服务器向客户端推送事件”而生，在逻辑上比纯粹的流式传输更具约束力，也更便于浏览器集成。
4.1 核心原理：严格的文本契约
SSE 不允许像普通流那样随心所欲地传输字符，它要求响应头强制设定为 Content-Type: text/event-stream，且数据格式必须遵循一套严密的“报文规范”：
4.2 网络机制：原生浏览器的“自动驾驶”
SSE 的一大优势在于其深度集成了浏览器原生的 EventSource API。这赋予了它许多开箱即用的高级特性：
4.3 典型场景：轻量级的实时感知
SSE 极其适合那些“高频下发、低频上报”的业务场景：
| 场景 | 说明 |
|---|
| 金融/行情 | 股票价格、加密货币的实时波动。 |
| 状态监控 | 系统资源占用大盘、CI/CD 构建进度条。 |
| 社交提醒 | 站内信通知、点赞互动的实时更新。 |
4.4 工程避坑指南：不可忽视的约束
尽管 SSE 足够轻巧，但在实际架构设计中，必须正视其局限性：
| 局限 | 说明 |
|---|
| 文本编码限制 | SSE 仅支持 UTF-8 文本流。如果需要传输二进制文件（如实时生成的缩略图），必须先转码为 Base64，这会带来约 33% 的体积开销。 |
| 浏览器"单行道"限制 | 原生的 EventSource 仅支持 GET 请求。在需要传递复杂查询参数（如超长的 JSON 过滤器）时，这一限制显得非常局促。这也是为什么许多现代项目（如 AI 聊天应用）宁愿使用 Fetch 模拟 SSE 的原因。 |
| 连接数水位线 | 在 HTTP/1.1 环境下，浏览器对同一域名的并发长连接限制通常只有 6 个。这意味着如果你在浏览器中多开了几个监控标签页，很可能会耗尽连接池，导致页面其他请求完全阻塞。(注：在 HTTP/2 及以上版本中，由于多路复用特性的存在，这一限制已基本消除)。 |
5. WebSocket：全双工通信
WebSocket 不同于 流式 HTTP 和 SSE 这种在传统 HTTP 框架下的“精雕细琢”，而是一次彻底的“范式革命”。它不仅仅是一个简单的 API，而是一个独立的、与 HTTP 平级的应用层协议。
它是一种基于 TCP 协议的全双工通信协议，真正的全双工持久连接方案，通过一次 HTTP 握手完成协议升级后，客户端与服务器可双向、实时、低延迟地传输数据，连接全程保持开放。旨在打破“请求-响应”的束缚，建立起真正意义上的“零延迟”双向通道。
5.1 核心原理
WebSocket 的建立遵循一个标准化的协议升级流程：
协议升级握手：连接初始化阶段采用标准 HTTP 请求。客户端在请求头中声明 Upgrade: websocket 与 Connection: Upgrade，表明协议升级意图。
连接状态转换：服务器确认支持 WebSocket 协议后，返回 101 Switching Protocols 状态码。至此，底层 TCP 连接完成协议切换，后续通信采用 WebSocket 帧格式进行数据传输，不再承载 HTTP 协议开销。
5.2 网络机制
在 WebSocket 连接建立后，通信双方会进入全双工对等传输状态：
全双工数据传输：客户端与服务器可随时、独立地向对端发送数据，无需等待对方请求或确认。这种双向并发通信机制彻底摆脱了 HTTP 协议"请求-响应"的串行约束，实现低延迟的实时数据交换。
轻量级帧结构：相较于 HTTP 协议数百字节的首部开销，WebSocket 数据帧首部极为紧凑，固定部分仅 2 字节，带掩码时最大 14 字节。对于高频、小数据包传输场景（如实时游戏状态同步、传感器数据采集），显著降低网络带宽占用与传输延迟。
原生二进制支持：WebSocket 协议原生支持文本（UTF-8）与二进制数据帧，无需像 SSE 那样进行 Base64 编码转换。该特性使其在实时音视频流传输、二进制协议封装等多媒体场景中具有显著的性能优势。
5.3 应用场景：高互动的终极方案
凡是需要“毫秒级同步”的场景，WebSocket 都是不二之选：
| 场景 | 典型应用 |
|---|
| 即时通讯 | 微信网页版、飞书聊天 |
| 协同办公 | Google Docs、Figma 的多人在同步编辑 |
| 竞技游戏 | 实时同步玩家坐标与指令的 MMO 或 MOBA 游戏 |
| 金融博弈 | 极速波动的量化交易终端 |
5.4 工程落地的“重装”代价
作为一种"有状态"的协议，WebSocket 在带来极致性能的同时，也给后端架构带来了沉重的复杂性：
状态维护与内存开销
不同于 HTTP 的"阅后即焚"模式，服务器必须为每一个 WebSocket 连接维持一个持久的 Session 状态。当并发量攀升至十万甚至百万级时，内存占用与长连接管理压力将呈几何级数增长，对服务器的资源调度能力提出严峻考验。
分布式系统的挑战
在水平扩容场景下，WebSocket 堪称负载均衡器的"噩梦"。由于连接具有状态属性，若用户 A 连接至机器 1，用户 B 连接至机器 2，二者间的通信便无法直接完成。此时后端必须引入 Redis Pub/Sub、消息队列（Message Queue）或专用网关等中间件，以实现跨节点的"消息对齐"与状态同步。
原始协议的局限
WebSocket 协议本身设计得极为精简，并未内置自动重连、心跳保活或消息确认等机制。为保障连接在生产环境中的鲁棒性，开发者必须在应用层自行实现 Ping/Pong 心跳检测、断线感知以及带退避策略的重连逻辑，这无疑增加了工程实现的复杂度。
6. Webhooks：事件驱动的反向回调
如果说 SSE 是服务器"主动推送给浏览器"，那么 Webhooks 则是服务器"主动推送给服务端"——它是一种基于 HTTP 的事件触发机制，专为服务端向服务端单向推送而设计。
6.1 核心原理：回调的自动化
Webhooks 的工作模式非常清晰：
事件注册：客户端（通常是第三方应用）预先在服务端注册一个回调 URL，并指定关注的事件类型（如"订单完成"、"用户注册"、"文件上传"等）。
事件触发：当服务端发生指定事件时，它会主动向客户端注册的 URL 发送一个 HTTP POST 请求，将事件详情封装在请求体中。
即时响应：客户端收到回调后，执行相应业务逻辑（如更新本地数据、发送通知等），并返回一个确认响应。
整个过程完全基于标准 HTTP，无需维护持久连接，也无需客户端持续轮询。
6.2 典型场景：跨系统的松耦合集成
| 场景 | 说明 |
|---|
| 支付回调 | 当用户在第三方支付平台（如 Stripe、支付宝）完成付款后，支付平台会向商户服务器发送 Webhook 回调，通知交易结果。 |
| 版本控制系统 | GitHub、GitLab 等平台通过 Webhooks 在代码提交、PR 创建时通知外部 CI/CD 系统。 |
| 电商订单同步 | 订单状态变更、用户注册等事件触发后，同步至 ERP、CRM 等内部系统。 |
| 消息推送集成 | 将消息平台的事件（如用户发送消息）推送至自有的聊天机器人或客服系统。 |
6.3 工程考量：可靠投递与安全防护
虽然 Webhooks 概念简单，但在生产环境中需要关注几个关键问题：
| 考量点 | 说明 |
|---|
| 可靠投递保障 | HTTP 请求可能因网络问题投递失败，因此主流平台通常支持失败重试机制，并要求回调端点返回 2xx 状态码才视为成功。 |
| 幂等性设计 | 由于重试机制的存在，同一个事件可能被多次投递。客户端应当具备幂等处理能力，避免重复业务操作。 |
| 安全验证 | 为了防止恶意伪造回调，服务端通常会在请求中加入签名（如 HMAC 签名），客户端通过验证签名来确认请求的真实性。 |
6.4 与 SSE 的本质区别
| 维度 | Webhooks | SSE |
|---|
| 推送对象 | 服务端 → 服务端 | 服务端 → 浏览器 |
| 连接方向 | 由接收方预先暴露 URL | 由发送方建立并维持连接 |
| 适用场景 | 跨系统事件同步 | 浏览器端实时更新 |
| 协议基础 | 标准 HTTP POST | 长连接 + EventSource API |
7. 关于 HTTP 轮询的讨论
HTTP 轮询是一种最朴素的实时通信方案，是实现实时性的基础方案，核心逻辑是客户端定时向服务器发起请求，主动拉取最新数据。
不少人在学习了 流式 HTTP、SSE 和 WebSocket 后，会产生一种“技术洁癖”，觉得 HTTP 轮询是上古时代的落后技术，应当被彻底淘汰。但现实是，在当前很多顶级的 AI 生图（如 Midjourney 类的第三方集成应用、部分 Stable Diffusion 商业平台）甚至部分长视频生成应用中，HTTP 轮询不仅没有消失，反而是架构师经过深思熟虑后的首选方案。
7.1 任务特性的本质差异：流式输出 vs 异步大任务
AI 应用的交互模式决定了通信协议的选型：
| 应用类型 | 场景特征 | 解释说明 |
|---|
| 文本大模型（如 ChatGPT） | 流式持续输出 | 模型在极短时间内（首个 Token 约 200ms 即可生成）就开始返回数据，随后持续"吐字"。若采用传统同步 HTTP，用户将面对长达数秒的白屏等待，体验极差。SSE/流式 HTTP 正是为此类场景量身打造。 |
| AI 生图/生视频 | 重计算异步任务 | 一张高质量图片的生成可能需要 GPU 满载运算 10~30 秒，甚至在高峰期需要排队数分钟。任务执行期间，除了偶尔的进度更新（10%、50%），并没有持续的数据流可供传输。让客户端和网关之间维持一条长达数十秒的"闲置长连接"，仅用于等待最终一个图片 URL 的返回，在系统设计上是一笔不小的开销。 |
7.2 基础设施的残酷现实：连接池枯竭与网关超时
如果 AI 生图使用 WebSocket 或保持长达 30 秒的 HTTP 连接，会遇到严峻的基础设施挑战：
| 挑战 | 说明 |
|---|
| 网关/负载均衡的超时限制 | 大多数云厂商的负载均衡器（如 AWS ALB、Nginx 默认配置）和 CDN 对 HTTP 连接都有严格超时限制（通常为 30s 至 60s）。当 AI 任务耗时过长时，网关会主动切断连接并返回 504 Gateway Timeout。 |
| 并发连接数瓶颈 | 服务器的并发连接池是有限的。假设 1 万名用户同时排队等图片：使用 WebSocket 需要维持 1 万个长连接；而使用轮询，每位用户每 3 秒发起一个极轻量的 GET 请求，查询完毕立即释放连接。无状态的短连接模式能让服务器吞吐量提升数个量级。 |
7.3 后端架构的天然要求：解耦与消息队列
现代高并发 AI 生图平台的后端架构通常是彻底解耦的：
提交任务 (Client)：客户端 POST 请求 /api/generate。
下发队列 (API Server)：API 服务器将任务投入 Kafka/RabbitMQ 队列中，生成唯一 task_id 并立即返回给客户端（耗时约 50ms）。
异步消费 (GPU Worker)：后端 GPU 节点从队列中取出任务，执行计算。生成完毕后，将图片上传至 OSS/S3 并将结果写入数据库。
获取结果 (Client)：客户端持有 task_id，每隔数秒轮询一次 /api/task/{task_id} 查询任务状态。
在这个经典的生产者-消费者模型中，处理 HTTP 请求的 Web 服务器与真正执行计算的 GPU 服务器在物理上彼此隔离。若强行使用 WebSocket 或 SSE 将二者串联，不仅违背了解耦原则，还会使 Web 服务器与 GPU 节点间的状态同步变得极为复杂。
7.4 移动端弱网环境下的"绝对鲁棒性"
试想这样一个场景：用户在地铁中使用手机生图，刚提交任务便遭遇了 5 秒的网络中断。
7.5 小结
综上所述，轮询凭借其无状态、低连接开销、高吞吐量的特性，成为 AI 生图场景下更具性价比的通信方案。
当然，如果决定使用轮询，为了兼顾体验和服务器压力，业界通常会采用退避轮询策略——即随着任务等待时间延长，逐步降低查询频率。例如前 30 秒每 2 秒查询一次，30 秒后改为每 5 秒查询一次，到后期甚至可以降至每 10 秒一次。这种策略能在保证及时获取结果的同时，有效减少不必要的请求开销。
8. 实践选型指南：不买最贵的，只选最对的
在实际应用中，脱离业务场景谈协议与通信方案的优劣是毫无意义的。WebSocket 虽强，但并非银弹；标准 HTTP 虽“老”，但在大规模分布式系统中依然是最稳健的选择。
8.1 决策矩阵：AI 与实时业务场景选型
| 业务场景 | 任务耗时特征 | 推荐通信协议 | 决策依据与变通方案 |
|---|
| AI 文本对话 (LLM) | 快速响应，持续文本流 (几秒~几十秒) | 流式 HTTP (Fetch / SSE) | 需提供“打字机”反馈以维持用户注意力。相比 WS，HTTP 更易穿透防火墙与网关。 |
| AI 实时语音/视觉助手 | 极低延迟，双向高频互动 (<500ms) | WebSocket / WebRTC | 必须消除 HTTP 握手与头部延迟，实现真正的全双工流式交互。 |
| AI 快速生图 (SDXL Turbo) | 耗时极短（<3s），无排队压力 | 标准 HTTP (Request-Response) | 简单的挂起等待即可。无需引入长连接复杂度，保持架构简洁。 |
| 高精生图/视频/长文生成 | 耗时长且需排队（10s ~ 数分钟） | 异步提交 + HTTP 轮询 | 保护网关的核心手段。解耦 GPU 计算节点与 Web 节点，客户端持 TaskID 定时查询状态。 |
| 跨系统事件同步 | 事件驱动，无固定耗时 | Webhooks | 适用于服务端间的异步事件通知（如支付回调、订单同步、Git 钩子触发 CI/CD）。接收方需预先暴露回调 URL，并确保幂等处理与签名验证。 |
8.2 深度决策逻辑：工程选型的五条金律
1、高频双向：WebSocket 的主场
核心逻辑：HTTP 及其衍生品在双向交互下，重复的头部开销会吞噬大量带宽，且无法实现真正的全双工并发。
若业务需要客户端与服务端互发高频消息（如多人竞技游戏、协作编辑、实时双向聊天），WebSocket 是唯一选择。
2、单向推送：SSE 的轻量优势
若业务场景仅需服务端向客户端单向高频推送（如股票行情大盘、服务器实时日志、监控预警）：
首选方案是 SSE。它完全复用现有的 HTTP 基础设施（负载均衡、WAF、鉴权逻辑），无需额外配置 WebSocket 网关。同时，其原生的断线重连机制极大降低了前端的开发心智负担。
3、流式响应：Streamable HTTP 的主场，AI 时代的主流选择
这是目前 LLM 文本对话中最主流的"事实标准"。
痛点：原生 SSE 受限于浏览器实现，通常只能发起 GET 请求。但在 AI 场景下，我们需要发送庞大的 system_prompt 或上下文历史（Context），GET 的 URL 长度限制成为了瓶颈。
变通方案：使用 Fetch API 结合 POST 请求，通过 ReadableStream 接收流式响应。既能突破 GET 的长度限制，又避免了 WebSocket 在维持长连接、处理心跳保活方面的额外资源损耗。这正是 fetch-event-source 这类库在 AI 社区盛行的底层逻辑。
4、异步任务：轮询的主场
对于 AI 生图、生视频等耗时较长（10s ~ 数分钟）的重计算任务，其特点是计算期间无持续数据流，仅在完成后返回结果。
此时若强行使用 WebSocket 或 SSE 维持长连接，不仅会遭遇网关超时限制（通常 30s~60s），还会造成并发连接数瓶颈。异步提交 + 轮询查询是更合理的架构：客户端提交任务后获得 TaskID，定期轮询查询状态。这种方式解耦了 Web 节点与 GPU 节点，无状态的短连接模式让服务器能够承载更高的吞吐量。
5、跨系统回调：Webhooks 的主场
若业务涉及跨服务的事件通知（如支付平台回调、订单状态变更通知、Git 仓库事件触发 CI/CD），且接收方是服务端而非浏览器：
首选方案是 Webhooks。它完全基于标准 HTTP POST 请求，无需维护持久连接，由接收方预先暴露回调 URL 即可实现事件驱动推送。这种模式天然适合服务间的松耦合集成，但需注意幂等性处理与签名验证以确保安全。
9. 结语
回望这场从 HTTP 到 WebSocket 的技术演进，我们或许能提炼出一个更普适的架构哲学：没有"最好"的技术，只有"最合适"的技术。
技术的演进从来不是"长江后浪推前浪"的简单替代，而是一种"分工细化"的自然结果。传统 HTTP 依然是 Web 的基石，流式 HTTP 让它焕发新生；SSE 在单向推送场景轻量而优雅；WebSocket 为真正的实时双向交互打开了大门；轮询在 AI 时代的大模型洪流中，依然默默支撑着无数生图、生视频应用的正常运行；而 Webhooks 则在跨系统的服务端间编织出一张事件驱动的网络。
真正成熟的架构师，不会执着于"最新"或"最复杂"的方案，而是深入理解每种技术的边界与代价，在业务场景的约束下做出最优雅的取舍。毕竟，最好的架构不是用技术堆砌出来的，而是让技术各归其位的顺势而为。
',109)])])}const T=e(d,[["render",n]]);export{c as __pageData,T as default};
+import{_ as e,g as o,h as r,U as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","frontmatter":{"date":"2026-02-24T08:40:31.000Z","title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","tldr":"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","categories":["全栈","网络与通信"],"tags":["HTTP","HTTP 轮询","SSE","WebSocket","Webhooks"],"permalink":"/fullstack/networking-protocol-selection-guide"},"headers":[],"relativePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md","filePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"}'),d={name:"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"};function n(s,t,h,l,i,g){return r(),o("div",null,[...t[0]||(t[0]=[a('Are you an LLM? You can read better optimized documentation at /01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md for this page in Markdown format
Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南
摘要总结：本文针对传统 HTTP 在实时通信场景的局限，系统分析流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询五种技术的核心原理、网络机制与适用边界。通过对比各方案在单向/双向推送、实时性、资源开销等维度的差异，结合 AI 文本对话、生图生视频等典型场景，构建技术选型决策矩阵。结论表明，不存在最优技术，需根据任务耗时特征、并发规模、基础设施约束等因素选择最适配方案。
1. 引言
HTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：请求 -> 等待 -> 完整响应。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。
为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。
2. 传统 HTTP——Web 通信的基石
自 1991 年诞生以来，HTTP（超文本传输协议）便成为了互联网运行的“通用语言”。作为一种无状态、基于“请求-响应”模式的应用层协议，它构筑了现代 Web 通信的稳固基石。
在核心运作机制上，传统 HTTP 遵循着严谨的单向驱动逻辑：通信必须由客户端发起请求（Request），服务器在处理完成后返回完整的响应（Response）。一旦数据传输完成，连接在逻辑上即告结束。
| 维度 | 说明 |
|---|
| 网络特征 | HTTP 构建于 TCP 协议之上。尽管从 HTTP/1.1 开始，协议默认开启了 Connection: keep-alive 机制以复用底层 TCP 连接，减少了频繁三次握手的开销，但在应用层层面，它依然维持着半双工通信的本质——在同一时刻，数据只能单向流动，且服务器永远处于"被动应答"状态。 |
| 典型应用 | 这种模式完美契合了绝大多数非即时性的资源获取场景，如加载网页 HTML、调用标准 RESTful API（获取用户信息、提交表单）以及加载静态图片等。 |
随着 Web 应用向“实时化”与“高互动”演进，传统 HTTP 的固有特性逐渐演变为开发的痛点：
| 痛点 | 说明 |
|---|
| 无法主动推送 | 服务器如同一个被动的仓库管理员，即便仓库内的数据发生了更新，只要客户端不主动询问，服务器也无法将新信息触达用户。 |
| 头部开销沉重 | 在 HTTP/1.x 中，每次请求都必须携带完整的 Header 信息（包括 Cookie、User-Agent 等）。对于实时性要求高、但单次数据包极小的场景（如传感器数值同步），这些重复的头部数据往往比有效载荷还要大，造成了带宽的极大浪费。 |
| 实时性的"伪实现" | 在 WebSocket 等原生实时技术成熟前，为了模拟实时效果，开发者通常被迫采用轮询（Polling）技术。无论是频繁发起连接的短轮询，还是长时间挂起请求的长轮询（Long Polling），都会产生大量冗余请求，对服务器并发处理能力提出了严峻挑战。 |
3. 流式 HTTP(Streamable HTTP)
如果说传统 HTTP 是严谨的“一问一答”，那么流式 HTTP（Streamable HTTP）则更像是一次“未完待续”的深度交流。它通过对响应机制的巧妙“变异”，打破了“服务端必须积攒全部结果才能返回”的物理限制，实现了数据的边计算、边传输。
3.1 核心原理：分块传输的艺术
流式 HTTP 的精髓在于它不再追求一次性交付，而是通过特定的协议头，将数据化整为零：
传输机制：在 HTTP 响应头中声明 Transfer-Encoding: chunked（分块传输编码）或 Content-Type: text/event-stream。这告诉客户端：服务器目前尚不清楚响应的总长度（Content-Length），但会将数据切分成一个个逻辑块（Chunks）依次下发。
网络特征：客户端在接收到 200 OK 状态码后，底层 TCP 连接并不会立即关闭。借助现代浏览器的 Fetch API 及其 ReadableStream 特性，前端可以像接水管一样，实时读取并处理源源不断传来的数据块，直到服务器发送一个长度为 0 的终止信号。
3.2 应用场景：从大文件到 AI 时代
这种“边读边播”的特性，使其在以下场景中无可替代：
AI 大模型“打字机”效果：这是当前最火热的应用。ChatGPT、Claude 等模型生成的长文本，正是通过流式 HTTP 将响应数据实时推送到前端，显著降低了用户的首字感知延迟（TTFT）。
大容量资源下发：如超大文件或视频流的段落化加载，避免了内存爆仓，提升了系统吞吐量。
SSE 的灵活替代方案：配合 fetch-event-source 等库，它能完美模拟 SSE 的长连接功能，同时规避了标准 SSE 在请求方式（仅限 GET）和自定义 Header 上的限制。
3.3 隐藏的坑：代理与缓冲
虽然流式传输在逻辑上很美好，但在工程落地时必须关注“链路通畅”问题：
| 局限 | 说明 |
|---|
| 单向传输局限 | 它本质上仍是 Server-to-Client 的单向流。如果业务需要客户端也实时回传数据，则需要考虑其他双向通信协议。 |
| 代理服务 | 这是最常见的坑。一些旧版 Nginx、防火墙或负载均衡器默认开启了强缓冲（Buffering）机制。它们会试图"积攒"足够多的流式数据再统一发给客户端。这对于实时 AI 对话是致命的，开发者必须确保代理层配置了 X-Accel-Buffering: no 等指令来禁用缓冲，确保数据的"直达性"。 |
4. SSE (Server-Sent Events)：规范化的单向推送协议
如果说 流式 HTTP 是一种底层的“传输机制”，那么 SSE 则是基于此机制建立的一套标准化应用层协议。它专门为“服务器向客户端推送事件”而生，在逻辑上比纯粹的流式传输更具约束力，也更便于浏览器集成。
4.1 核心原理：严格的文本契约
SSE 不允许像普通流那样随心所欲地传输字符，它要求响应头强制设定为 Content-Type: text/event-stream，且数据格式必须遵循一套严密的“报文规范”：
4.2 网络机制：原生浏览器的“自动驾驶”
SSE 的一大优势在于其深度集成了浏览器原生的 EventSource API。这赋予了它许多开箱即用的高级特性：
4.3 典型场景：轻量级的实时感知
SSE 极其适合那些“高频下发、低频上报”的业务场景：
| 场景 | 说明 |
|---|
| 金融/行情 | 股票价格、加密货币的实时波动。 |
| 状态监控 | 系统资源占用大盘、CI/CD 构建进度条。 |
| 社交提醒 | 站内信通知、点赞互动的实时更新。 |
4.4 工程避坑指南：不可忽视的约束
尽管 SSE 足够轻巧，但在实际架构设计中，必须正视其局限性：
| 局限 | 说明 |
|---|
| 文本编码限制 | SSE 仅支持 UTF-8 文本流。如果需要传输二进制文件（如实时生成的缩略图），必须先转码为 Base64，这会带来约 33% 的体积开销。 |
| 浏览器"单行道"限制 | 原生的 EventSource 仅支持 GET 请求。在需要传递复杂查询参数（如超长的 JSON 过滤器）时，这一限制显得非常局促。这也是为什么许多现代项目（如 AI 聊天应用）宁愿使用 Fetch 模拟 SSE 的原因。 |
| 连接数水位线 | 在 HTTP/1.1 环境下，浏览器对同一域名的并发长连接限制通常只有 6 个。这意味着如果你在浏览器中多开了几个监控标签页，很可能会耗尽连接池，导致页面其他请求完全阻塞。(注：在 HTTP/2 及以上版本中，由于多路复用特性的存在，这一限制已基本消除)。 |
5. WebSocket：全双工通信
WebSocket 不同于 流式 HTTP 和 SSE 这种在传统 HTTP 框架下的“精雕细琢”，而是一次彻底的“范式革命”。它不仅仅是一个简单的 API，而是一个独立的、与 HTTP 平级的应用层协议。
它是一种基于 TCP 协议的全双工通信协议，真正的全双工持久连接方案，通过一次 HTTP 握手完成协议升级后，客户端与服务器可双向、实时、低延迟地传输数据，连接全程保持开放。旨在打破“请求-响应”的束缚，建立起真正意义上的“零延迟”双向通道。
5.1 核心原理
WebSocket 的建立遵循一个标准化的协议升级流程：
协议升级握手：连接初始化阶段采用标准 HTTP 请求。客户端在请求头中声明 Upgrade: websocket 与 Connection: Upgrade，表明协议升级意图。
连接状态转换：服务器确认支持 WebSocket 协议后，返回 101 Switching Protocols 状态码。至此，底层 TCP 连接完成协议切换，后续通信采用 WebSocket 帧格式进行数据传输，不再承载 HTTP 协议开销。
5.2 网络机制
在 WebSocket 连接建立后，通信双方会进入全双工对等传输状态：
全双工数据传输：客户端与服务器可随时、独立地向对端发送数据，无需等待对方请求或确认。这种双向并发通信机制彻底摆脱了 HTTP 协议"请求-响应"的串行约束，实现低延迟的实时数据交换。
轻量级帧结构：相较于 HTTP 协议数百字节的首部开销，WebSocket 数据帧首部极为紧凑，固定部分仅 2 字节，带掩码时最大 14 字节。对于高频、小数据包传输场景（如实时游戏状态同步、传感器数据采集），显著降低网络带宽占用与传输延迟。
原生二进制支持：WebSocket 协议原生支持文本（UTF-8）与二进制数据帧，无需像 SSE 那样进行 Base64 编码转换。该特性使其在实时音视频流传输、二进制协议封装等多媒体场景中具有显著的性能优势。
5.3 应用场景：高互动的终极方案
凡是需要“毫秒级同步”的场景，WebSocket 都是不二之选：
| 场景 | 典型应用 |
|---|
| 即时通讯 | 微信网页版、飞书聊天 |
| 协同办公 | Google Docs、Figma 的多人在同步编辑 |
| 竞技游戏 | 实时同步玩家坐标与指令的 MMO 或 MOBA 游戏 |
| 金融博弈 | 极速波动的量化交易终端 |
5.4 工程落地的“重装”代价
作为一种"有状态"的协议，WebSocket 在带来极致性能的同时，也给后端架构带来了沉重的复杂性：
状态维护与内存开销
不同于 HTTP 的"阅后即焚"模式，服务器必须为每一个 WebSocket 连接维持一个持久的 Session 状态。当并发量攀升至十万甚至百万级时，内存占用与长连接管理压力将呈几何级数增长，对服务器的资源调度能力提出严峻考验。
分布式系统的挑战
在水平扩容场景下，WebSocket 堪称负载均衡器的"噩梦"。由于连接具有状态属性，若用户 A 连接至机器 1，用户 B 连接至机器 2，二者间的通信便无法直接完成。此时后端必须引入 Redis Pub/Sub、消息队列（Message Queue）或专用网关等中间件，以实现跨节点的"消息对齐"与状态同步。
原始协议的局限
WebSocket 协议本身设计得极为精简，并未内置自动重连、心跳保活或消息确认等机制。为保障连接在生产环境中的鲁棒性，开发者必须在应用层自行实现 Ping/Pong 心跳检测、断线感知以及带退避策略的重连逻辑，这无疑增加了工程实现的复杂度。
6. Webhooks：事件驱动的反向回调
如果说 SSE 是服务器"主动推送给浏览器"，那么 Webhooks 则是服务器"主动推送给服务端"——它是一种基于 HTTP 的事件触发机制，专为服务端向服务端单向推送而设计。
6.1 核心原理：回调的自动化
Webhooks 的工作模式非常清晰：
事件注册：客户端（通常是第三方应用）预先在服务端注册一个回调 URL，并指定关注的事件类型（如"订单完成"、"用户注册"、"文件上传"等）。
事件触发：当服务端发生指定事件时，它会主动向客户端注册的 URL 发送一个 HTTP POST 请求，将事件详情封装在请求体中。
即时响应：客户端收到回调后，执行相应业务逻辑（如更新本地数据、发送通知等），并返回一个确认响应。
整个过程完全基于标准 HTTP，无需维护持久连接，也无需客户端持续轮询。
6.2 典型场景：跨系统的松耦合集成
| 场景 | 说明 |
|---|
| 支付回调 | 当用户在第三方支付平台（如 Stripe、支付宝）完成付款后，支付平台会向商户服务器发送 Webhook 回调，通知交易结果。 |
| 版本控制系统 | GitHub、GitLab 等平台通过 Webhooks 在代码提交、PR 创建时通知外部 CI/CD 系统。 |
| 电商订单同步 | 订单状态变更、用户注册等事件触发后，同步至 ERP、CRM 等内部系统。 |
| 消息推送集成 | 将消息平台的事件（如用户发送消息）推送至自有的聊天机器人或客服系统。 |
6.3 工程考量：可靠投递与安全防护
虽然 Webhooks 概念简单，但在生产环境中需要关注几个关键问题：
| 考量点 | 说明 |
|---|
| 可靠投递保障 | HTTP 请求可能因网络问题投递失败，因此主流平台通常支持失败重试机制，并要求回调端点返回 2xx 状态码才视为成功。 |
| 幂等性设计 | 由于重试机制的存在，同一个事件可能被多次投递。客户端应当具备幂等处理能力，避免重复业务操作。 |
| 安全验证 | 为了防止恶意伪造回调，服务端通常会在请求中加入签名（如 HMAC 签名），客户端通过验证签名来确认请求的真实性。 |
6.4 与 SSE 的本质区别
| 维度 | Webhooks | SSE |
|---|
| 推送对象 | 服务端 → 服务端 | 服务端 → 浏览器 |
| 连接方向 | 由接收方预先暴露 URL | 由发送方建立并维持连接 |
| 适用场景 | 跨系统事件同步 | 浏览器端实时更新 |
| 协议基础 | 标准 HTTP POST | 长连接 + EventSource API |
7. 关于 HTTP 轮询的讨论
HTTP 轮询是一种最朴素的实时通信方案，是实现实时性的基础方案，核心逻辑是客户端定时向服务器发起请求，主动拉取最新数据。
不少人在学习了 流式 HTTP、SSE 和 WebSocket 后，会产生一种“技术洁癖”，觉得 HTTP 轮询是上古时代的落后技术，应当被彻底淘汰。但现实是，在当前很多顶级的 AI 生图（如 Midjourney 类的第三方集成应用、部分 Stable Diffusion 商业平台）甚至部分长视频生成应用中，HTTP 轮询不仅没有消失，反而是架构师经过深思熟虑后的首选方案。
7.1 任务特性的本质差异：流式输出 vs 异步大任务
AI 应用的交互模式决定了通信协议的选型：
| 应用类型 | 场景特征 | 解释说明 |
|---|
| 文本大模型（如 ChatGPT） | 流式持续输出 | 模型在极短时间内（首个 Token 约 200ms 即可生成）就开始返回数据，随后持续"吐字"。若采用传统同步 HTTP，用户将面对长达数秒的白屏等待，体验极差。SSE/流式 HTTP 正是为此类场景量身打造。 |
| AI 生图/生视频 | 重计算异步任务 | 一张高质量图片的生成可能需要 GPU 满载运算 10~30 秒，甚至在高峰期需要排队数分钟。任务执行期间，除了偶尔的进度更新（10%、50%），并没有持续的数据流可供传输。让客户端和网关之间维持一条长达数十秒的"闲置长连接"，仅用于等待最终一个图片 URL 的返回，在系统设计上是一笔不小的开销。 |
7.2 基础设施的残酷现实：连接池枯竭与网关超时
如果 AI 生图使用 WebSocket 或保持长达 30 秒的 HTTP 连接，会遇到严峻的基础设施挑战：
| 挑战 | 说明 |
|---|
| 网关/负载均衡的超时限制 | 大多数云厂商的负载均衡器（如 AWS ALB、Nginx 默认配置）和 CDN 对 HTTP 连接都有严格超时限制（通常为 30s 至 60s）。当 AI 任务耗时过长时，网关会主动切断连接并返回 504 Gateway Timeout。 |
| 并发连接数瓶颈 | 服务器的并发连接池是有限的。假设 1 万名用户同时排队等图片：使用 WebSocket 需要维持 1 万个长连接；而使用轮询，每位用户每 3 秒发起一个极轻量的 GET 请求，查询完毕立即释放连接。无状态的短连接模式能让服务器吞吐量提升数个量级。 |
7.3 后端架构的天然要求：解耦与消息队列
现代高并发 AI 生图平台的后端架构通常是彻底解耦的：
提交任务 (Client)：客户端 POST 请求 /api/generate。
下发队列 (API Server)：API 服务器将任务投入 Kafka/RabbitMQ 队列中，生成唯一 task_id 并立即返回给客户端（耗时约 50ms）。
异步消费 (GPU Worker)：后端 GPU 节点从队列中取出任务，执行计算。生成完毕后，将图片上传至 OSS/S3 并将结果写入数据库。
获取结果 (Client)：客户端持有 task_id，每隔数秒轮询一次 /api/task/{task_id} 查询任务状态。
在这个经典的生产者-消费者模型中，处理 HTTP 请求的 Web 服务器与真正执行计算的 GPU 服务器在物理上彼此隔离。若强行使用 WebSocket 或 SSE 将二者串联，不仅违背了解耦原则，还会使 Web 服务器与 GPU 节点间的状态同步变得极为复杂。
7.4 移动端弱网环境下的"绝对鲁棒性"
试想这样一个场景：用户在地铁中使用手机生图，刚提交任务便遭遇了 5 秒的网络中断。
7.5 小结
综上所述，轮询凭借其无状态、低连接开销、高吞吐量的特性，成为 AI 生图场景下更具性价比的通信方案。
当然，如果决定使用轮询，为了兼顾体验和服务器压力，业界通常会采用退避轮询策略——即随着任务等待时间延长，逐步降低查询频率。例如前 30 秒每 2 秒查询一次，30 秒后改为每 5 秒查询一次，到后期甚至可以降至每 10 秒一次。这种策略能在保证及时获取结果的同时，有效减少不必要的请求开销。
8. 实践选型指南：不买最贵的，只选最对的
在实际应用中，脱离业务场景谈协议与通信方案的优劣是毫无意义的。WebSocket 虽强，但并非银弹；标准 HTTP 虽“老”，但在大规模分布式系统中依然是最稳健的选择。
8.1 决策矩阵：AI 与实时业务场景选型
| 业务场景 | 任务耗时特征 | 推荐通信协议 | 决策依据与变通方案 |
|---|
| AI 文本对话 (LLM) | 快速响应，持续文本流 (几秒~几十秒) | 流式 HTTP (Fetch / SSE) | 需提供“打字机”反馈以维持用户注意力。相比 WS，HTTP 更易穿透防火墙与网关。 |
| AI 实时语音/视觉助手 | 极低延迟，双向高频互动 (<500ms) | WebSocket / WebRTC | 必须消除 HTTP 握手与头部延迟，实现真正的全双工流式交互。 |
| AI 快速生图 (SDXL Turbo) | 耗时极短（<3s），无排队压力 | 标准 HTTP (Request-Response) | 简单的挂起等待即可。无需引入长连接复杂度，保持架构简洁。 |
| 高精生图/视频/长文生成 | 耗时长且需排队（10s ~ 数分钟） | 异步提交 + HTTP 轮询 | 保护网关的核心手段。解耦 GPU 计算节点与 Web 节点，客户端持 TaskID 定时查询状态。 |
| 跨系统事件同步 | 事件驱动，无固定耗时 | Webhooks | 适用于服务端间的异步事件通知（如支付回调、订单同步、Git 钩子触发 CI/CD）。接收方需预先暴露回调 URL，并确保幂等处理与签名验证。 |
8.2 深度决策逻辑：工程选型的五条金律
1、高频双向：WebSocket 的主场
核心逻辑：HTTP 及其衍生品在双向交互下，重复的头部开销会吞噬大量带宽，且无法实现真正的全双工并发。
若业务需要客户端与服务端互发高频消息（如多人竞技游戏、协作编辑、实时双向聊天），WebSocket 是唯一选择。
2、单向推送：SSE 的轻量优势
若业务场景仅需服务端向客户端单向高频推送（如股票行情大盘、服务器实时日志、监控预警）：
首选方案是 SSE。它完全复用现有的 HTTP 基础设施（负载均衡、WAF、鉴权逻辑），无需额外配置 WebSocket 网关。同时，其原生的断线重连机制极大降低了前端的开发心智负担。
3、流式响应：Streamable HTTP 的主场，AI 时代的主流选择
这是目前 LLM 文本对话中最主流的"事实标准"。
痛点：原生 SSE 受限于浏览器实现，通常只能发起 GET 请求。但在 AI 场景下，我们需要发送庞大的 system_prompt 或上下文历史（Context），GET 的 URL 长度限制成为了瓶颈。
变通方案：使用 Fetch API 结合 POST 请求，通过 ReadableStream 接收流式响应。既能突破 GET 的长度限制，又避免了 WebSocket 在维持长连接、处理心跳保活方面的额外资源损耗。这正是 fetch-event-source 这类库在 AI 社区盛行的底层逻辑。
4、异步任务：轮询的主场
对于 AI 生图、生视频等耗时较长（10s ~ 数分钟）的重计算任务，其特点是计算期间无持续数据流，仅在完成后返回结果。
此时若强行使用 WebSocket 或 SSE 维持长连接，不仅会遭遇网关超时限制（通常 30s~60s），还会造成并发连接数瓶颈。异步提交 + 轮询查询是更合理的架构：客户端提交任务后获得 TaskID，定期轮询查询状态。这种方式解耦了 Web 节点与 GPU 节点，无状态的短连接模式让服务器能够承载更高的吞吐量。
5、跨系统回调：Webhooks 的主场
若业务涉及跨服务的事件通知（如支付平台回调、订单状态变更通知、Git 仓库事件触发 CI/CD），且接收方是服务端而非浏览器：
首选方案是 Webhooks。它完全基于标准 HTTP POST 请求，无需维护持久连接，由接收方预先暴露回调 URL 即可实现事件驱动推送。这种模式天然适合服务间的松耦合集成，但需注意幂等性处理与签名验证以确保安全。
9. 结语
回望这场从 HTTP 到 WebSocket 的技术演进，我们或许能提炼出一个更普适的架构哲学：没有"最好"的技术，只有"最合适"的技术。
技术的演进从来不是"长江后浪推前浪"的简单替代，而是一种"分工细化"的自然结果。传统 HTTP 依然是 Web 的基石，流式 HTTP 让它焕发新生；SSE 在单向推送场景轻量而优雅；WebSocket 为真正的实时双向交互打开了大门；轮询在 AI 时代的大模型洪流中，依然默默支撑着无数生图、生视频应用的正常运行；而 Webhooks 则在跨系统的服务端间编织出一张事件驱动的网络。
真正成熟的架构师，不会执着于"最新"或"最复杂"的方案，而是深入理解每种技术的边界与代价，在业务场景的约束下做出最优雅的取舍。毕竟，最好的架构不是用技术堆砌出来的，而是让技术各归其位的顺势而为。
',109)])])}const T=e(d,[["render",n]]);export{c as __pageData,T as default};
diff --git "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.DlstBmfn.lean.js" "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.int3cA6G.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.DlstBmfn.lean.js"
rename to "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.int3cA6G.lean.js"
index ecf86b56..d7fbc3bc 100644
--- "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.DlstBmfn.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_01.\344\273\216 HTTP \345\210\260 WebSocket \347\232\204\346\212\200\346\234\257\351\200\211\345\236\213\346\214\207\345\215\227.md.int3cA6G.lean.js"
@@ -1 +1 @@
-import{_ as e,g as o,h as r,U as a}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","frontmatter":{"date":"2026-02-24T08:40:31.000Z","title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","tldr":"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","categories":["全栈","网络与通信"],"tags":["HTTP","HTTP 轮询","SSE","WebSocket","Webhooks"],"permalink":"/fullstack/networking-protocol-selection-guide"},"headers":[],"relativePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md","filePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"}'),d={name:"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"};function n(s,t,h,l,i,g){return r(),o("div",null,[...t[0]||(t[0]=[a("",109)])])}const T=e(d,[["render",n]]);export{c as __pageData,T as default};
+import{_ as e,g as o,h as r,U as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","frontmatter":{"date":"2026-02-24T08:40:31.000Z","title":"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南","tldr":"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。","description":"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。","categories":["全栈","网络与通信"],"tags":["HTTP","HTTP 轮询","SSE","WebSocket","Webhooks"],"permalink":"/fullstack/networking-protocol-selection-guide"},"headers":[],"relativePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md","filePath":"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"}'),d={name:"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md"};function n(s,t,h,l,i,g){return r(),o("div",null,[...t[0]||(t[0]=[a("",109)])])}const T=e(d,[["render",n]]);export{c as __pageData,T as default};
diff --git "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.DBvMz_Gr.js" "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.Cp-uzdUB.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.DBvMz_Gr.js"
rename to "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.Cp-uzdUB.js"
index 2a0c749c..e0bd156d 100644
--- "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.DBvMz_Gr.js"
+++ "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.Cp-uzdUB.js"
@@ -1,4 +1,4 @@
-import{H as a}from"./chunks/HighLightText.gRdAAF3C.js";import{g as h,h as k,U as n,i as l,S as i,z as p,s as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","frontmatter":{"date":"2026-03-05T16:54:35.000Z","title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","aliases":["Server-Sent Events","HTTP Streaming"],"tldr":"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","tags":["tutorial","SSE","HTTP Streaming","全栈"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking/sse-practice"},"headers":[],"relativePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md","filePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"}'),t={name:"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"},y=Object.assign(t,{setup(r){return(E,s)=>(k(),h("div",null,[s[10]||(s[10]=n('Are you an LLM? You can read better optimized documentation at /01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md for this page in Markdown format
流式 HTTP 与 SSE 协议：从概念辨析到生产实践
摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 NestJS 为例展示服务端 SSE 响应的标准实现与 POST 请求扩展，最后涵盖指数退避重试、事件分类处理、连接状态追踪、资源清理等生产实践要点，为 AI 时代的流式响应场景提供完整技术方案。
1. 引言
在Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南中，我们对比分析了多种通信技术。在本文我们将重点探讨 SSE（Server-Sent Events） 与 流式 HTTP（HTTP Streaming） 的实践。
1.1 概念澄清：两种技术，两个层次
很多开发者容易将 SSE 与流式 HTTP 混为一谈，实际上它们处于不同的技术层次：
| 维度 | 流式 HTTP | SSE |
|---|
| 定位 | 底层传输机制 | 应用层协议 |
| 核心原理 | HTTP Chunked Transfer Encoding，数据分块连续传输 | 基于 HTTP 的事件流协议，定义了标准化的数据格式 |
| 浏览器原生支持 | 无，需自行解析数据流 | 有，EventSource API |
| 协议规范 | 无标准格式约定 | W3C 标准（text/event-stream） |
',8)),l("p",null,[s[2]||(s[2]=i("简而言之，",-1)),p(a,{bold:""},{default:e(()=>[...s[0]||(s[0]=[i("流式 HTTP 是一种“传输手段”，而 SSE 是一种“数据格式约定”",-1)])]),_:1}),s[3]||(s[3]=i("。",-1)),p(a,{type:"info"},{default:e(()=>[...s[1]||(s[1]=[i("流式 HTTP 关注的是如何把数据“边发边传”，而 SSE 关注的是如何让数据“按照固定格式组织”，便于客户端解析处理",-1)])]),_:1}),s[4]||(s[4]=i("。",-1))]),s[11]||(s[11]=n('1.2 关联与协作
尽管处于不同层次，但二者完全可以协同工作：
- SSE 必须基于流式 HTTP：SSE 的标准格式需要通过 HTTP 流式传输来实现，因此 SSE 协议的数据流底层必然依赖流式 HTTP
- 流式 HTTP 不必局限于 SSE：纯流式 HTTP 可以自定义数据格式（如 JSON Lines、NDJSON），不一定要遵循 SSE 的
event:、id:、data: 等字段约定
正是由于这种关系，我们可以利用 fetch + ReadableStream 突破 SSE 的一些局限：
- 请求方式受限：原生 SSE 仅支持 GET 请求，当需要携带较大 body 数据（如文件上传上下文、复杂查询参数）时会受到限制，而 fetch API 不受此约束。
- 身份验证不便：原生 SSE 无法灵活地在请求头中添加
Authorization: Bearer <token> 等认证信息，fetch API 则可以像调用普通接口一样自定义 Header。
因此，基于流式 HTTP，采用 fetch + ReadableStream 的方案，不仅保留了 fetch 的全部能力（POST 方法、自定义 Headers、超时控制等），同时具备了流式传输的实时性，并且在数据格式层面依然遵循 SSE 协议，保持良好的可解析性和通用性。相比原生 SSE，使用 Fetch API + ReadableStream 能突破 GET 请求限制，可携带任意大小的 body 数据，同时支持灵活的身份验证方式；相比 WebSocket，则避免了维护长连接和心跳保活的额外资源损耗。
',6)),l("p",null,[s[6]||(s[6]=i("这种“取两家之长”的方案，正是 ",-1)),s[7]||(s[7]=l("a",{href:"https://github.com/Azure/fetch-event-source",target:"_blank",rel:"noreferrer"},"@microsoft/fetch-event-source",-1)),s[8]||(s[8]=i(" 这类库在 AI 社区盛行的底层逻辑：",-1)),p(a,{bold:""},{default:e(()=>[...s[5]||(s[5]=[i("既能像调用普通接口一样编写业务逻辑，又能享受流式传输的实时性，数据格式依然遵循 SSE 协议，客户端解析毫无额外成本",-1)])]),_:1}),s[9]||(s[9]=i("。",-1))]),s[12]||(s[12]=n(`| 特性 | 标准 EventSource (SSE) | Fetch + Stream |
|---|
| HTTP 方法 | 仅限 GET | 支持 POST、PUT 等所有方法 |
| 自定义 Header | 不支持（无法传 Token 等） | 完全支持 |
| **请求体 **(Body) | 不支持 | 支持发送 JSON Payload |
| 重连机制 | 浏览器内置，难以精细控制 | 插件实现，支持高度自定义重连策略 |
| 跨域 (CORS) | 比较死板，需特定配置 | 遵循标准的 Fetch CORS 规则 |
| 底层 API | 浏览器原生 EventSource 对象 | 基于 fetch 和 ReadableStream |
1.3 SSE 协议数据格式
SSE 协议对数据流格式有明确规定，服务器返回的响应头和数据体需遵循以下规范：
markdownContent-Type: text/event-stream
+import{H as a}from"./chunks/HighLightText.BFsbuOsY.js";import{g as h,h as k,U as n,i as l,S as i,z as p,s as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","frontmatter":{"date":"2026-03-05T16:54:35.000Z","title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","aliases":["Server-Sent Events","HTTP Streaming"],"tldr":"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","tags":["tutorial","SSE","HTTP Streaming","全栈"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking/sse-practice"},"headers":[],"relativePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md","filePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"}'),t={name:"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"},y=Object.assign(t,{setup(r){return(E,s)=>(k(),h("div",null,[s[10]||(s[10]=n('Are you an LLM? You can read better optimized documentation at /01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md for this page in Markdown format
流式 HTTP 与 SSE 协议：从概念辨析到生产实践
摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 NestJS 为例展示服务端 SSE 响应的标准实现与 POST 请求扩展，最后涵盖指数退避重试、事件分类处理、连接状态追踪、资源清理等生产实践要点，为 AI 时代的流式响应场景提供完整技术方案。
1. 引言
在Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南中，我们对比分析了多种通信技术。在本文我们将重点探讨 SSE（Server-Sent Events） 与 流式 HTTP（HTTP Streaming） 的实践。
1.1 概念澄清：两种技术，两个层次
很多开发者容易将 SSE 与流式 HTTP 混为一谈，实际上它们处于不同的技术层次：
| 维度 | 流式 HTTP | SSE |
|---|
| 定位 | 底层传输机制 | 应用层协议 |
| 核心原理 | HTTP Chunked Transfer Encoding，数据分块连续传输 | 基于 HTTP 的事件流协议，定义了标准化的数据格式 |
| 浏览器原生支持 | 无，需自行解析数据流 | 有，EventSource API |
| 协议规范 | 无标准格式约定 | W3C 标准（text/event-stream） |
',8)),l("p",null,[s[2]||(s[2]=i("简而言之，",-1)),p(a,{bold:""},{default:e(()=>[...s[0]||(s[0]=[i("流式 HTTP 是一种“传输手段”，而 SSE 是一种“数据格式约定”",-1)])]),_:1}),s[3]||(s[3]=i("。",-1)),p(a,{type:"info"},{default:e(()=>[...s[1]||(s[1]=[i("流式 HTTP 关注的是如何把数据“边发边传”，而 SSE 关注的是如何让数据“按照固定格式组织”，便于客户端解析处理",-1)])]),_:1}),s[4]||(s[4]=i("。",-1))]),s[11]||(s[11]=n('1.2 关联与协作
尽管处于不同层次，但二者完全可以协同工作：
- SSE 必须基于流式 HTTP：SSE 的标准格式需要通过 HTTP 流式传输来实现，因此 SSE 协议的数据流底层必然依赖流式 HTTP
- 流式 HTTP 不必局限于 SSE：纯流式 HTTP 可以自定义数据格式（如 JSON Lines、NDJSON），不一定要遵循 SSE 的
event:、id:、data: 等字段约定
正是由于这种关系，我们可以利用 fetch + ReadableStream 突破 SSE 的一些局限：
- 请求方式受限：原生 SSE 仅支持 GET 请求，当需要携带较大 body 数据（如文件上传上下文、复杂查询参数）时会受到限制，而 fetch API 不受此约束。
- 身份验证不便：原生 SSE 无法灵活地在请求头中添加
Authorization: Bearer <token> 等认证信息，fetch API 则可以像调用普通接口一样自定义 Header。
因此，基于流式 HTTP，采用 fetch + ReadableStream 的方案，不仅保留了 fetch 的全部能力（POST 方法、自定义 Headers、超时控制等），同时具备了流式传输的实时性，并且在数据格式层面依然遵循 SSE 协议，保持良好的可解析性和通用性。相比原生 SSE，使用 Fetch API + ReadableStream 能突破 GET 请求限制，可携带任意大小的 body 数据，同时支持灵活的身份验证方式；相比 WebSocket，则避免了维护长连接和心跳保活的额外资源损耗。
',6)),l("p",null,[s[6]||(s[6]=i("这种“取两家之长”的方案，正是 ",-1)),s[7]||(s[7]=l("a",{href:"https://github.com/Azure/fetch-event-source",target:"_blank",rel:"noreferrer"},"@microsoft/fetch-event-source",-1)),s[8]||(s[8]=i(" 这类库在 AI 社区盛行的底层逻辑：",-1)),p(a,{bold:""},{default:e(()=>[...s[5]||(s[5]=[i("既能像调用普通接口一样编写业务逻辑，又能享受流式传输的实时性，数据格式依然遵循 SSE 协议，客户端解析毫无额外成本",-1)])]),_:1}),s[9]||(s[9]=i("。",-1))]),s[12]||(s[12]=n(`| 特性 | 标准 EventSource (SSE) | Fetch + Stream |
|---|
| HTTP 方法 | 仅限 GET | 支持 POST、PUT 等所有方法 |
| 自定义 Header | 不支持（无法传 Token 等） | 完全支持 |
| **请求体 **(Body) | 不支持 | 支持发送 JSON Payload |
| 重连机制 | 浏览器内置，难以精细控制 | 插件实现，支持高度自定义重连策略 |
| 跨域 (CORS) | 比较死板，需特定配置 | 遵循标准的 Fetch CORS 规则 |
| 底层 API | 浏览器原生 EventSource 对象 | 基于 fetch 和 ReadableStream |
1.3 SSE 协议数据格式
SSE 协议对数据流格式有明确规定，服务器返回的响应头和数据体需遵循以下规范：
markdownContent-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive
diff --git "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.DBvMz_Gr.lean.js" "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.Cp-uzdUB.lean.js"
similarity index 94%
rename from "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.DBvMz_Gr.lean.js"
rename to "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.Cp-uzdUB.lean.js"
index 8deebb8f..64a22c98 100644
--- "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.DBvMz_Gr.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_02.\346\265\201\345\274\217 HTTP \344\270\216 SSE \345\215\217\350\256\256\357\274\232\344\273\216\346\246\202\345\277\265\350\276\250\346\236\220\345\210\260\347\224\237\344\272\247\345\256\236\350\267\265.md.Cp-uzdUB.lean.js"
@@ -1 +1 @@
-import{H as a}from"./chunks/HighLightText.gRdAAF3C.js";import{g as h,h as k,U as n,i as l,S as i,z as p,s as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","frontmatter":{"date":"2026-03-05T16:54:35.000Z","title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","aliases":["Server-Sent Events","HTTP Streaming"],"tldr":"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","tags":["tutorial","SSE","HTTP Streaming","全栈"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking/sse-practice"},"headers":[],"relativePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md","filePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"}'),t={name:"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"},y=Object.assign(t,{setup(r){return(E,s)=>(k(),h("div",null,[s[10]||(s[10]=n("",8)),l("p",null,[s[2]||(s[2]=i("简而言之，",-1)),p(a,{bold:""},{default:e(()=>[...s[0]||(s[0]=[i("流式 HTTP 是一种“传输手段”，而 SSE 是一种“数据格式约定”",-1)])]),_:1}),s[3]||(s[3]=i("。",-1)),p(a,{type:"info"},{default:e(()=>[...s[1]||(s[1]=[i("流式 HTTP 关注的是如何把数据“边发边传”，而 SSE 关注的是如何让数据“按照固定格式组织”，便于客户端解析处理",-1)])]),_:1}),s[4]||(s[4]=i("。",-1))]),s[11]||(s[11]=n("",6)),l("p",null,[s[6]||(s[6]=i("这种“取两家之长”的方案，正是 ",-1)),s[7]||(s[7]=l("a",{href:"https://github.com/Azure/fetch-event-source",target:"_blank",rel:"noreferrer"},"@microsoft/fetch-event-source",-1)),s[8]||(s[8]=i(" 这类库在 AI 社区盛行的底层逻辑：",-1)),p(a,{bold:""},{default:e(()=>[...s[5]||(s[5]=[i("既能像调用普通接口一样编写业务逻辑，又能享受流式传输的实时性，数据格式依然遵循 SSE 协议，客户端解析毫无额外成本",-1)])]),_:1}),s[9]||(s[9]=i("。",-1))]),s[12]||(s[12]=n("",91))]))}});export{c as __pageData,y as default};
+import{H as a}from"./chunks/HighLightText.BFsbuOsY.js";import{g as h,h as k,U as n,i as l,S as i,z as p,s as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","frontmatter":{"date":"2026-03-05T16:54:35.000Z","title":"流式 HTTP 与 SSE 协议：从概念辨析到生产实践","aliases":["Server-Sent Events","HTTP Streaming"],"tldr":"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。","description":"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。","tags":["tutorial","SSE","HTTP Streaming","全栈"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking/sse-practice"},"headers":[],"relativePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md","filePath":"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"}'),t={name:"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md"},y=Object.assign(t,{setup(r){return(E,s)=>(k(),h("div",null,[s[10]||(s[10]=n("",8)),l("p",null,[s[2]||(s[2]=i("简而言之，",-1)),p(a,{bold:""},{default:e(()=>[...s[0]||(s[0]=[i("流式 HTTP 是一种“传输手段”，而 SSE 是一种“数据格式约定”",-1)])]),_:1}),s[3]||(s[3]=i("。",-1)),p(a,{type:"info"},{default:e(()=>[...s[1]||(s[1]=[i("流式 HTTP 关注的是如何把数据“边发边传”，而 SSE 关注的是如何让数据“按照固定格式组织”，便于客户端解析处理",-1)])]),_:1}),s[4]||(s[4]=i("。",-1))]),s[11]||(s[11]=n("",6)),l("p",null,[s[6]||(s[6]=i("这种“取两家之长”的方案，正是 ",-1)),s[7]||(s[7]=l("a",{href:"https://github.com/Azure/fetch-event-source",target:"_blank",rel:"noreferrer"},"@microsoft/fetch-event-source",-1)),s[8]||(s[8]=i(" 这类库在 AI 社区盛行的底层逻辑：",-1)),p(a,{bold:""},{default:e(()=>[...s[5]||(s[5]=[i("既能像调用普通接口一样编写业务逻辑，又能享受流式传输的实时性，数据格式依然遵循 SSE 协议，客户端解析毫无额外成本",-1)])]),_:1}),s[9]||(s[9]=i("。",-1))]),s[12]||(s[12]=n("",91))]))}});export{c as __pageData,y as default};
diff --git "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.J0ycjaFX.js" "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.C2A_-RUG.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.J0ycjaFX.js"
rename to "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.C2A_-RUG.js"
index 3c121876..6ca85de3 100644
--- "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.J0ycjaFX.js"
+++ "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.C2A_-RUG.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","frontmatter":{"date":"2026-02-25T22:10:48.000Z","title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","tldr":"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","tags":["HTTP 轮询","退避轮询","长轮询"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking-polling-optimization"},"headers":[],"relativePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md","filePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"}'),p={name:"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"};function h(k,s,t,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md for this page in Markdown format
HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策
摘要总结: 针对传统固定频率轮询的服务器资源浪费问题，系统分析退避轮询与长轮询两种优化策略的核心原理与运行机制。通过 TypeScript 客户端与 NestJS 服务端的完整实现示例，对比两种方案在实时性、资源占用、复杂度等维度的差异。构建包含任务耗时、并发规模、基础设施约束的技术选型决策树，并提出退避+长轮询级联、按业务分级等混合策略建议。结论表明，低实时要求高并发场景选退避轮询，高实时要求中低并发场景选长轮询，复杂场景可两者结合。
1. 引言
在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。
📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。
在当前众多顶级的 AI AIGC 应用（如 Midjourney 类的第三方集成应用、Stable Diffusion 商业平台、长视频生成等）中，任务处理往往需要数十秒甚至数分钟。在面对海量并发和复杂的网关负载均衡时，HTTP 轮询因其无状态、易扩展、断连恢复成本极低的特性，成为了架构师经过深思熟虑后的首选方案。
然而，传统的固定频率轮询（如每秒请求一次）对服务器极不友好。为了兼顾用户体验与服务器的稳定性，本文将深入探讨两种常用的 HTTP 轮询优化策略：退避轮询（Backoff Polling） 与 长轮询（Long Polling）。
2. 退避轮询
退避轮询是一种在计算机网络和分布式系统中常用的网络请求或重试策略。它的核心思想是：当服务端任务未完成时，客户端下一次查询的等待时间并非固定，而是随着查询次数的增加而递增。
2.1 为什么需要退避轮询？
在服务器过载、网络故障或由于短时间高频请求触发限流（如 HTTP 429 错误）时，如果客户端仍以固定高频重试，会引发严重的灾难：
- 惊群效应：大量客户端同时高频重试，导致服务器压力倍增，进而彻底崩溃。
- 资源浪费：服务端在执行耗时任务（如 AI 渲染）时，初期的频繁查询注定是无效的，这不仅浪费了服务器带宽，也消耗了客户端的设备电量与性能。
2.2 核心机制与运行规则
退避轮询通过不断拉大两次请求之间的延迟时间，巧妙地实现了请求分流。其典型规则如下：
设置最大值是为了避免等待时间变得不可接受（如几个小时），通常会设置一个最大等待时间（Max Delay）和最大重试次数。
2.3 客户端实现示例
在客户端中，我们可以通过简单的 while 循环和 setTimeout 挂起机制来实现：
typescript
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","frontmatter":{"date":"2026-02-25T22:10:48.000Z","title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","tldr":"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","tags":["HTTP 轮询","退避轮询","长轮询"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking-polling-optimization"},"headers":[],"relativePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md","filePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"}'),p={name:"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"};function h(k,s,t,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md for this page in Markdown format
HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策
摘要总结: 针对传统固定频率轮询的服务器资源浪费问题，系统分析退避轮询与长轮询两种优化策略的核心原理与运行机制。通过 TypeScript 客户端与 NestJS 服务端的完整实现示例，对比两种方案在实时性、资源占用、复杂度等维度的差异。构建包含任务耗时、并发规模、基础设施约束的技术选型决策树，并提出退避+长轮询级联、按业务分级等混合策略建议。结论表明，低实时要求高并发场景选退避轮询，高实时要求中低并发场景选长轮询，复杂场景可两者结合。
1. 引言
在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。
📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。
在当前众多顶级的 AI AIGC 应用（如 Midjourney 类的第三方集成应用、Stable Diffusion 商业平台、长视频生成等）中，任务处理往往需要数十秒甚至数分钟。在面对海量并发和复杂的网关负载均衡时，HTTP 轮询因其无状态、易扩展、断连恢复成本极低的特性，成为了架构师经过深思熟虑后的首选方案。
然而，传统的固定频率轮询（如每秒请求一次）对服务器极不友好。为了兼顾用户体验与服务器的稳定性，本文将深入探讨两种常用的 HTTP 轮询优化策略：退避轮询（Backoff Polling） 与 长轮询（Long Polling）。
2. 退避轮询
退避轮询是一种在计算机网络和分布式系统中常用的网络请求或重试策略。它的核心思想是：当服务端任务未完成时，客户端下一次查询的等待时间并非固定，而是随着查询次数的增加而递增。
2.1 为什么需要退避轮询？
在服务器过载、网络故障或由于短时间高频请求触发限流（如 HTTP 429 错误）时，如果客户端仍以固定高频重试，会引发严重的灾难：
- 惊群效应：大量客户端同时高频重试，导致服务器压力倍增，进而彻底崩溃。
- 资源浪费：服务端在执行耗时任务（如 AI 渲染）时，初期的频繁查询注定是无效的，这不仅浪费了服务器带宽，也消耗了客户端的设备电量与性能。
2.2 核心机制与运行规则
退避轮询通过不断拉大两次请求之间的延迟时间，巧妙地实现了请求分流。其典型规则如下：
设置最大值是为了避免等待时间变得不可接受（如几个小时），通常会设置一个最大等待时间（Max Delay）和最大重试次数。
2.3 客户端实现示例
在客户端中，我们可以通过简单的 while 循环和 setTimeout 挂起机制来实现：
typescript
interface TaskResponse {
status: 'processing' | 'completed' | 'failed';
result?: string;
diff --git "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.J0ycjaFX.lean.js" "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.C2A_-RUG.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.J0ycjaFX.lean.js"
rename to "assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.C2A_-RUG.lean.js"
index 3205fcf5..022901e4 100644
--- "a/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.J0ycjaFX.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_60.\347\275\221\347\273\234\344\270\216\351\200\232\344\277\241_03.\351\200\200\351\201\277\350\275\256\350\257\242\344\270\216\351\225\277\350\275\256\350\257\242\347\232\204\345\216\237\347\220\206\343\200\201\345\256\236\346\210\230\344\270\216\351\200\211\345\236\213\345\206\263\347\255\226.md.C2A_-RUG.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","frontmatter":{"date":"2026-02-25T22:10:48.000Z","title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","tldr":"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","tags":["HTTP 轮询","退避轮询","长轮询"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking-polling-optimization"},"headers":[],"relativePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md","filePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"}'),p={name:"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"};function h(k,s,t,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",52)])])}const y=i(p,[["render",h]]);export{g as __pageData,y as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","frontmatter":{"date":"2026-02-25T22:10:48.000Z","title":"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策","tldr":"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。","description":"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。","tags":["HTTP 轮询","退避轮询","长轮询"],"categories":["全栈","网络与通信"],"permalink":"/fullstack/networking-polling-optimization"},"headers":[],"relativePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md","filePath":"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"}'),p={name:"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md"};function h(k,s,t,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",52)])])}const y=i(p,[["render",h]]);export{g as __pageData,y as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.DMY_isjL.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.B1vmVkqI.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.DMY_isjL.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.B1vmVkqI.js"
index 97bd3eec..d5fce9da 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.DMY_isjL.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.B1vmVkqI.js"
@@ -1,4 +1,4 @@
-import{H as n}from"./chunks/HighLightText.gRdAAF3C.js";import{g as t,h as l,U as a,i as s,z as e,s as h,S as p}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const k={tabindex:"0"},E=JSON.parse('{"title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","frontmatter":{"date":"2024-03-20T22:41:41.000Z","title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","tldr":"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","permalink":"/fullstack/occams-razor-software-design","tags":["concept","engineering-fundamentals","code-design","software-engineering"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md","filePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"}'),r={name:"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"},c=Object.assign(r,{setup(d){return(o,i)=>(l(),t("div",null,[i[5]||(i[5]=a('Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md for this page in Markdown format
奥卡姆剃刀原则：从理论到编程设计的实践指南
摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为"如无必要，勿增实体"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。
1. 奥卡姆剃刀原则的核心内涵
"奥卡姆剃刀" 是哲学与科学研究中经典的思维工具，其核心思想可概括为"如无必要，勿增实体"。这一原则由 14 世纪逻辑学家、圣方济各会修士威廉·奥卡姆（William of Ockham）提出，本质是在多个能同等解释现象的理论中，选择假设最少、最简洁的那个——并非否定复杂的可能性，而是优先用简单方案解决问题，避免无意义的"过度设计"。
要正确应用奥卡姆剃刀，需先理解其三个关键前提：
',6)),s("table",k,[i[4]||(i[4]=s("thead",null,[s("tr",null,[s("th",null,"关键前提"),s("th",null,"说明")])],-1)),s("tbody",null,[i[2]||(i[2]=s("tr",null,[s("td",null,[s("strong",null,'"同等有效"是前提')]),s("td",null,'仅当多个方案能实现相同的功能、满足相同的需求时，才用"简洁性"作为筛选标准；若简单方案无法覆盖需求（如安全性、可扩展性），则必须引入复杂设计，不可为了"简"而"简"。')],-1)),i[3]||(i[3]=s("tr",null,[s("td",null,[s("strong",null,'"实体"指"不必要的假设/组件"')]),s("td",null,'例如解释"手机没电"，"电池耗尽"比"电池故障+系统休眠+充电器接触不良"更简洁，后者多了两个无证据的"实体"，应优先排除。')],-1)),s("tr",null,[s("td",null,[e(n,{type:"note",bold:""},{default:h(()=>[...i[0]||(i[0]=[p('"简洁"≠"简陋"',-1)])]),_:1})]),i[1]||(i[1]=s("td",null,'简洁是"去除冗余"，而非"省略必要环节"。比如设计登录功能，"账号+密码"是简洁，"仅靠手机号（无验证）"是简陋，后者牺牲了安全性，不符合原则。',-1))])])]),i[6]||(i[6]=a(`2. 编程与设计中应用奥卡姆剃刀的核心场景
在编程（代码实现）和设计（架构、接口、模块）中，"奥卡姆剃刀"的本质是减少"无价值的复杂性"——包括冗余代码、过度抽象、多余依赖、未使用的功能等。以下从六个核心场景展开，结合"反例"与"正例"说明实践方法：
2.1 场景1：需求实现，拒绝"提前设计未来功能"
开发中最常见的误区是"过度预判需求"：为了"可能用得上"的功能，提前加入复杂逻辑，导致代码臃肿、维护成本升高。奥卡姆剃刀的要求是：只实现"当前明确需要"的功能，未来需求留待未来迭代。
反例（过度设计）
开发一个"用户个人资料页"时，需求仅要求"展示姓名、手机号、邮箱"，但开发者预判"未来可能要加地址、生日、社交账号"，于是：
java// 提前定义了大量未使用的字段和方法
+import{H as n}from"./chunks/HighLightText.BFsbuOsY.js";import{g as t,h as l,U as a,i as s,z as e,s as h,S as p}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const k={tabindex:"0"},E=JSON.parse('{"title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","frontmatter":{"date":"2024-03-20T22:41:41.000Z","title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","tldr":"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","permalink":"/fullstack/occams-razor-software-design","tags":["concept","engineering-fundamentals","code-design","software-engineering"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md","filePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"}'),r={name:"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"},c=Object.assign(r,{setup(d){return(o,i)=>(l(),t("div",null,[i[5]||(i[5]=a('Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md for this page in Markdown format
奥卡姆剃刀原则：从理论到编程设计的实践指南
摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为"如无必要，勿增实体"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。
1. 奥卡姆剃刀原则的核心内涵
"奥卡姆剃刀" 是哲学与科学研究中经典的思维工具，其核心思想可概括为"如无必要，勿增实体"。这一原则由 14 世纪逻辑学家、圣方济各会修士威廉·奥卡姆（William of Ockham）提出，本质是在多个能同等解释现象的理论中，选择假设最少、最简洁的那个——并非否定复杂的可能性，而是优先用简单方案解决问题，避免无意义的"过度设计"。
要正确应用奥卡姆剃刀，需先理解其三个关键前提：
',6)),s("table",k,[i[4]||(i[4]=s("thead",null,[s("tr",null,[s("th",null,"关键前提"),s("th",null,"说明")])],-1)),s("tbody",null,[i[2]||(i[2]=s("tr",null,[s("td",null,[s("strong",null,'"同等有效"是前提')]),s("td",null,'仅当多个方案能实现相同的功能、满足相同的需求时，才用"简洁性"作为筛选标准；若简单方案无法覆盖需求（如安全性、可扩展性），则必须引入复杂设计，不可为了"简"而"简"。')],-1)),i[3]||(i[3]=s("tr",null,[s("td",null,[s("strong",null,'"实体"指"不必要的假设/组件"')]),s("td",null,'例如解释"手机没电"，"电池耗尽"比"电池故障+系统休眠+充电器接触不良"更简洁，后者多了两个无证据的"实体"，应优先排除。')],-1)),s("tr",null,[s("td",null,[e(n,{type:"note",bold:""},{default:h(()=>[...i[0]||(i[0]=[p('"简洁"≠"简陋"',-1)])]),_:1})]),i[1]||(i[1]=s("td",null,'简洁是"去除冗余"，而非"省略必要环节"。比如设计登录功能，"账号+密码"是简洁，"仅靠手机号（无验证）"是简陋，后者牺牲了安全性，不符合原则。',-1))])])]),i[6]||(i[6]=a(`2. 编程与设计中应用奥卡姆剃刀的核心场景
在编程（代码实现）和设计（架构、接口、模块）中，"奥卡姆剃刀"的本质是减少"无价值的复杂性"——包括冗余代码、过度抽象、多余依赖、未使用的功能等。以下从六个核心场景展开，结合"反例"与"正例"说明实践方法：
2.1 场景1：需求实现，拒绝"提前设计未来功能"
开发中最常见的误区是"过度预判需求"：为了"可能用得上"的功能，提前加入复杂逻辑，导致代码臃肿、维护成本升高。奥卡姆剃刀的要求是：只实现"当前明确需要"的功能，未来需求留待未来迭代。
反例（过度设计）
开发一个"用户个人资料页"时，需求仅要求"展示姓名、手机号、邮箱"，但开发者预判"未来可能要加地址、生日、社交账号"，于是：
java// 提前定义了大量未使用的字段和方法
public class UserProfile {
private String name; // 必用
private String phone; // 必用
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.DMY_isjL.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.B1vmVkqI.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.DMY_isjL.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.B1vmVkqI.lean.js"
index 241b8152..14d0ebcc 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.DMY_isjL.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_00.\345\245\245\345\215\241\345\247\206\345\211\203\345\210\200\345\216\237\345\210\231\357\274\232\344\273\216\347\220\206\350\256\272\345\210\260\347\274\226\347\250\213\350\256\276\350\256\241\347\232\204\345\256\236\350\267\265\346\214\207\345\215\227.md.B1vmVkqI.lean.js"
@@ -1 +1 @@
-import{H as n}from"./chunks/HighLightText.gRdAAF3C.js";import{g as t,h as l,U as a,i as s,z as e,s as h,S as p}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const k={tabindex:"0"},E=JSON.parse('{"title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","frontmatter":{"date":"2024-03-20T22:41:41.000Z","title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","tldr":"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","permalink":"/fullstack/occams-razor-software-design","tags":["concept","engineering-fundamentals","code-design","software-engineering"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md","filePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"}'),r={name:"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"},c=Object.assign(r,{setup(d){return(o,i)=>(l(),t("div",null,[i[5]||(i[5]=a("",6)),s("table",k,[i[4]||(i[4]=s("thead",null,[s("tr",null,[s("th",null,"关键前提"),s("th",null,"说明")])],-1)),s("tbody",null,[i[2]||(i[2]=s("tr",null,[s("td",null,[s("strong",null,'"同等有效"是前提')]),s("td",null,'仅当多个方案能实现相同的功能、满足相同的需求时，才用"简洁性"作为筛选标准；若简单方案无法覆盖需求（如安全性、可扩展性），则必须引入复杂设计，不可为了"简"而"简"。')],-1)),i[3]||(i[3]=s("tr",null,[s("td",null,[s("strong",null,'"实体"指"不必要的假设/组件"')]),s("td",null,'例如解释"手机没电"，"电池耗尽"比"电池故障+系统休眠+充电器接触不良"更简洁，后者多了两个无证据的"实体"，应优先排除。')],-1)),s("tr",null,[s("td",null,[e(n,{type:"note",bold:""},{default:h(()=>[...i[0]||(i[0]=[p('"简洁"≠"简陋"',-1)])]),_:1})]),i[1]||(i[1]=s("td",null,'简洁是"去除冗余"，而非"省略必要环节"。比如设计登录功能，"账号+密码"是简洁，"仅靠手机号（无验证）"是简陋，后者牺牲了安全性，不符合原则。',-1))])])]),i[6]||(i[6]=a("",60))]))}});export{E as __pageData,c as default};
+import{H as n}from"./chunks/HighLightText.BFsbuOsY.js";import{g as t,h as l,U as a,i as s,z as e,s as h,S as p}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const k={tabindex:"0"},E=JSON.parse('{"title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","frontmatter":{"date":"2024-03-20T22:41:41.000Z","title":"奥卡姆剃刀原则：从理论到编程设计的实践指南","tldr":"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。","description":"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。","permalink":"/fullstack/occams-razor-software-design","tags":["concept","engineering-fundamentals","code-design","software-engineering"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md","filePath":"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"}'),r={name:"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md"},c=Object.assign(r,{setup(d){return(o,i)=>(l(),t("div",null,[i[5]||(i[5]=a("",6)),s("table",k,[i[4]||(i[4]=s("thead",null,[s("tr",null,[s("th",null,"关键前提"),s("th",null,"说明")])],-1)),s("tbody",null,[i[2]||(i[2]=s("tr",null,[s("td",null,[s("strong",null,'"同等有效"是前提')]),s("td",null,'仅当多个方案能实现相同的功能、满足相同的需求时，才用"简洁性"作为筛选标准；若简单方案无法覆盖需求（如安全性、可扩展性），则必须引入复杂设计，不可为了"简"而"简"。')],-1)),i[3]||(i[3]=s("tr",null,[s("td",null,[s("strong",null,'"实体"指"不必要的假设/组件"')]),s("td",null,'例如解释"手机没电"，"电池耗尽"比"电池故障+系统休眠+充电器接触不良"更简洁，后者多了两个无证据的"实体"，应优先排除。')],-1)),s("tr",null,[s("td",null,[e(n,{type:"note",bold:""},{default:h(()=>[...i[0]||(i[0]=[p('"简洁"≠"简陋"',-1)])]),_:1})]),i[1]||(i[1]=s("td",null,'简洁是"去除冗余"，而非"省略必要环节"。比如设计登录功能，"账号+密码"是简洁，"仅靠手机号（无验证）"是简陋，后者牺牲了安全性，不符合原则。',-1))])])]),i[6]||(i[6]=a("",60))]))}});export{E as __pageData,c as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.DTw4Rt2C.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.BHyEzAuH.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.DTw4Rt2C.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.BHyEzAuH.js"
index 6158e848..5644502c 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.DTw4Rt2C.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.BHyEzAuH.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"TypeScript 编译与调试完全指南","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","frontmatter":{"date":"2025-08-12T22:47:47.000Z","title":"TypeScript 编译与调试完全指南","tldr":"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","permalink":"/fullstack/typescript-compilation-debugging-guide","tags":["tutorial","typescript","compilation","tooling","eslint","jest"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md","filePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"}'),p={name:"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"};function t(e,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md for this page in Markdown format
TypeScript 编译与调试完全指南
摘要总结: TypeScript 作为 JavaScript 的静态类型超集，不仅提供了类型安全，还构建了完善的编译工具链和调试能力。本文系统梳理 TypeScript 项目的编译与调试全流程，涵盖 TSC 编译器使用、tsconfig.json 各场景配置（单体项目、Monorepo 多包项目）、source map 浏览器调试、ESLint 静态检查与 Jest 单元测试等工程实践。通过对编译选项（strict、module、moduleResolution、incremental 等）的详细解读，以及 React+Vite、Node.js、npm 库等典型项目配置示例，帮助读者建立对 TypeScript 编译体系的完整认知。掌握这些核心技能，能够帮助开发者更高效地构建和维护高质量的 TypeScript 应用。
编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。
本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。
1. TypeScript 编译配置与 tsconfig.json
TSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（.ts 或 .tsx）转换为 JavaScript 代码（.js 或 .jsx）。
虽然你可以直接在终端运行 tsc 命令来编译单个文件，但在实际项目中，我们通常需要处理大量文件。为了提高编译命令的复用性和可维护性，TypeScript 提供了配置文件的方式来管理编译设置：
- 配置文件：使用
tsconfig.json 文件集中管理待编译文件路径、编译选项和输出路径等。你可以通过 tsc --init 命令快速生成一个默认配置文件，然后根据项目需求进行调整。 - 配置位置：通常将
tsconfig.json 放在项目根目录下。对于 Monorepo 项目结构，每个子项目可以拥有独立的配置文件，实现更精细的编译控制。
1.1 tsconfig.json 核心配置梳理
以下是一个生产环境常用的 tsconfig.json 配置示例，包含了 TypeScript 核心编译选项的详细注释说明：
json{
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"TypeScript 编译与调试完全指南","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","frontmatter":{"date":"2025-08-12T22:47:47.000Z","title":"TypeScript 编译与调试完全指南","tldr":"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","permalink":"/fullstack/typescript-compilation-debugging-guide","tags":["tutorial","typescript","compilation","tooling","eslint","jest"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md","filePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"}'),p={name:"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"};function t(e,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md for this page in Markdown format
TypeScript 编译与调试完全指南
摘要总结: TypeScript 作为 JavaScript 的静态类型超集，不仅提供了类型安全，还构建了完善的编译工具链和调试能力。本文系统梳理 TypeScript 项目的编译与调试全流程，涵盖 TSC 编译器使用、tsconfig.json 各场景配置（单体项目、Monorepo 多包项目）、source map 浏览器调试、ESLint 静态检查与 Jest 单元测试等工程实践。通过对编译选项（strict、module、moduleResolution、incremental 等）的详细解读，以及 React+Vite、Node.js、npm 库等典型项目配置示例，帮助读者建立对 TypeScript 编译体系的完整认知。掌握这些核心技能，能够帮助开发者更高效地构建和维护高质量的 TypeScript 应用。
编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。
本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。
1. TypeScript 编译配置与 tsconfig.json
TSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（.ts 或 .tsx）转换为 JavaScript 代码（.js 或 .jsx）。
虽然你可以直接在终端运行 tsc 命令来编译单个文件，但在实际项目中，我们通常需要处理大量文件。为了提高编译命令的复用性和可维护性，TypeScript 提供了配置文件的方式来管理编译设置：
- 配置文件：使用
tsconfig.json 文件集中管理待编译文件路径、编译选项和输出路径等。你可以通过 tsc --init 命令快速生成一个默认配置文件，然后根据项目需求进行调整。 - 配置位置：通常将
tsconfig.json 放在项目根目录下。对于 Monorepo 项目结构，每个子项目可以拥有独立的配置文件，实现更精细的编译控制。
1.1 tsconfig.json 核心配置梳理
以下是一个生产环境常用的 tsconfig.json 配置示例，包含了 TypeScript 核心编译选项的详细注释说明：
json{
/*
* ============================================
* 编译信息配置
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.DTw4Rt2C.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.BHyEzAuH.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.DTw4Rt2C.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.BHyEzAuH.lean.js"
index 13fa58c3..d6388874 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.DTw4Rt2C.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_01.\347\274\226\350\257\221\344\270\216\350\260\203\350\257\225 TypeScript \351\241\271\347\233\256\346\214\207\345\215\227.md.BHyEzAuH.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"TypeScript 编译与调试完全指南","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","frontmatter":{"date":"2025-08-12T22:47:47.000Z","title":"TypeScript 编译与调试完全指南","tldr":"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","permalink":"/fullstack/typescript-compilation-debugging-guide","tags":["tutorial","typescript","compilation","tooling","eslint","jest"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md","filePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"}'),p={name:"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"};function t(e,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",100)])])}const g=i(p,[["render",t]]);export{c as __pageData,g as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"TypeScript 编译与调试完全指南","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","frontmatter":{"date":"2025-08-12T22:47:47.000Z","title":"TypeScript 编译与调试完全指南","tldr":"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。","description":"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。","permalink":"/fullstack/typescript-compilation-debugging-guide","tags":["tutorial","typescript","compilation","tooling","eslint","jest"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md","filePath":"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"}'),p={name:"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md"};function t(e,s,h,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",100)])])}const g=i(p,[["render",t]]);export{c as __pageData,g as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.CavsGSMv.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.BpsDJhtc.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.CavsGSMv.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.BpsDJhtc.js"
index 01168baf..05295f40 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.CavsGSMv.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.BpsDJhtc.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"聊一聊 TypeScript 中的泛型","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","frontmatter":{"date":"2025-08-20T22:51:27.000Z","title":"聊一聊 TypeScript 中的泛型","tldr":"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","permalink":"/fullstack/typescript-generic-types","tags":["tutorial","typescript","generics","type-system"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md","filePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"}'),p={name:"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"};function h(k,s,t,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md for this page in Markdown format
聊一聊 TypeScript 中的泛型
摘要总结: 泛型（Generics）是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。本文从泛型的基本概念出发，对比泛型与 any 类型的本质差异（类型安全、代码复用、类型推断、可读性），深入剖析类型参数化、类型检查、类型推断与类型擦除四方面工作原理。通过大量实战代码演示泛型函数、泛型接口、泛型类及泛型类型别名的高级应用，并系统讲解基本类型约束、接口约束、多重约束与 keyof 约束等高阶用法。泛型的学习路径本质上是从具体到抽象的思维训练，掌握泛型意味着掌握了 TypeScript 类型系统高阶能力的钥匙。
1. 泛型的基本概念和作用
1.1 核心定义
泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现"编写一次，复用多次"的效果。
1.2 泛型与 any 类型的对比
| 特性 | 泛型 | any 类型 |
|---|
| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |
| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |
| 类型推断 | ✅ 编译器可推断具体类型 | ❌ 无法推断具体类型 |
| 可读性 | ✅ 明确类型意图 | ❌ 隐藏类型信息 |
1.3 泛型的工作原理
理解泛型的工作原理，需要从四个方面来把握：
1、类型参数化
当我们定义一个泛型函数 function foo<T>(arg: T): T 时，T 就像是一个"位置的占位符"。在编写代码时，我们还不知道 T 具体是什么类型，但它已经具备了类型的语义——在参数位置、返回值位置，甚至是后续的变量声明中，T 都会被当作一个有效的类型来使用。
2、类型检查
TypeScript 编译器会对泛型代码进行严格的类型检查。例如，在函数体内对 T 类型的参数调用只有特定类型才有的方法时，编译器会报错。这种检查发生在编译阶段，而不是运行时，从而避免了许多潜在的 bug。
3、类型推断
当我们调用泛型函数时，TypeScript 会根据传入的参数自动推断 T 的具体类型。比如调用 identity(42)，编译器自动推断 T 为 number。这一步是可选的，如果无法推断，我们也可以显式指定类型参数 identity<number>(42)。
4、类型擦除
这是泛型的一个重要特性——泛型类型信息只存在于编译阶段。编译为 JavaScript 时，所有 <T> 相关的类型标注都会被擦除，只保留普通的类型注释或完全没有任何类型信息。例如 function identity<T>(arg: T): T 编译后会变成 function identity(arg) { return arg; }，最终产物中不存在任何泛型的痕迹。
1.4 泛型的核心优势
泛型之所以重要，是因为它解决了 JavaScript 类型系统中的几个核心问题：
| 核心优势 | 说明 |
|---|
| 代码复用性的质变 | 在没有泛型的时代，如果我们想让一个函数同时支持 string 和 number 类型，通常需要编写两个独立函数，或者使用 any 类型牺牲类型安全。而泛型让我们编写一套代码，就能安全地处理多种类型。例如，一个 identity 函数既可以处理 number，也可以处理 string，甚至是自定义的对象类型。 |
| 类型安全是最大的保障 | 使用 any 类型意味着彻底放弃类型检查，任何类型错误都要到运行时才能发现。而泛型在编译阶段就能捕获类型不匹配的问题，将 bug 消灭在摇篮里。这对于大型项目尤为重要，因为运行时类型错误往往难以定位和修复。 |
| 代码意图更加清晰 | any 类型像是一个"黑箱"，开发者无法从类型声明中得知这个值应该是什么类型。而泛型 Array<T>、Promise<T> 等声明方式，让代码自描述性更强，后续维护者能够快速理解数据的结构和流向。 |
| 面向未来的扩展性 | 基于泛型设计的接口和类，不需要修改原有代码就能支持新的数据类型。比如我们定义了一个 Response<T> 接口，当业务需要新增一种数据类型时，只需要传入新的类型参数即可，而无需改动接口定义本身。 |
| 推动更好的设计 | 泛型鼓励开发者从一开始就从通用的角度思考问题，设计出更具抽象性和复用性的组件。这种思考方式与面向对象设计模式中的"依赖倒置"、"开闭原则"等思想不谋而合。 |
1.5 泛型的应用场景
泛型在实际开发中的应用非常广泛，以下是几个最常见的场景：
| 应用场景 | 说明 |
|---|
| 通用数据结构的实现 | 数据结构往往是通用的——一个栈不应该只能存储 number，它应该能存储任意类型。泛型让我们能够定义如 Stack<T>、Queue<T>、LinkedList<T> 这样真正通用的数据结构，同时保持对内部元素类型的严格检查。 |
| 工具函数和类库开发 | 日常开发中的工具函数，如深拷贝、JSON 序列化、数组处理等，都非常适合使用泛型。这类函数需要处理各种不同的数据类型，泛型能够在保持类型安全的同时，实现真正的复用。 |
| API 响应数据的类型化 | 与后端接口交互时，响应数据的结构往往是固定的，但具体的数据类型可能不同。通过泛型 ApiResponse<T>，我们可以为每个接口定义精确的返回类型，同时保持 API 请求逻辑的统一。 |
| 前端组件库开发 | 在 React、Vue 等框架中，组件通常需要处理各种类型的 props 和 state。泛型组件如 Table<T>、List<T> 等，能够在提供类型安全的同时，适应不同的业务数据模型。 |
| 通用接口和类的设计 | 面向对象编程中，我们经常需要定义一些有通用约束的接口。比如定义一个 Repository<T> 接口，所有实体仓储都实现这个接口，但每个仓储操作的实体类型各不相同。泛型让这种设计成为可能。 |
2. 泛型代码示例
2.1 基础泛型函数
typescript// 泛型标识函数：返回与输入相同类型的值
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"聊一聊 TypeScript 中的泛型","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","frontmatter":{"date":"2025-08-20T22:51:27.000Z","title":"聊一聊 TypeScript 中的泛型","tldr":"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","permalink":"/fullstack/typescript-generic-types","tags":["tutorial","typescript","generics","type-system"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md","filePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"}'),p={name:"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"};function h(k,s,t,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md for this page in Markdown format
聊一聊 TypeScript 中的泛型
摘要总结: 泛型（Generics）是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。本文从泛型的基本概念出发，对比泛型与 any 类型的本质差异（类型安全、代码复用、类型推断、可读性），深入剖析类型参数化、类型检查、类型推断与类型擦除四方面工作原理。通过大量实战代码演示泛型函数、泛型接口、泛型类及泛型类型别名的高级应用，并系统讲解基本类型约束、接口约束、多重约束与 keyof 约束等高阶用法。泛型的学习路径本质上是从具体到抽象的思维训练，掌握泛型意味着掌握了 TypeScript 类型系统高阶能力的钥匙。
1. 泛型的基本概念和作用
1.1 核心定义
泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现"编写一次，复用多次"的效果。
1.2 泛型与 any 类型的对比
| 特性 | 泛型 | any 类型 |
|---|
| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |
| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |
| 类型推断 | ✅ 编译器可推断具体类型 | ❌ 无法推断具体类型 |
| 可读性 | ✅ 明确类型意图 | ❌ 隐藏类型信息 |
1.3 泛型的工作原理
理解泛型的工作原理，需要从四个方面来把握：
1、类型参数化
当我们定义一个泛型函数 function foo<T>(arg: T): T 时，T 就像是一个"位置的占位符"。在编写代码时，我们还不知道 T 具体是什么类型，但它已经具备了类型的语义——在参数位置、返回值位置，甚至是后续的变量声明中，T 都会被当作一个有效的类型来使用。
2、类型检查
TypeScript 编译器会对泛型代码进行严格的类型检查。例如，在函数体内对 T 类型的参数调用只有特定类型才有的方法时，编译器会报错。这种检查发生在编译阶段，而不是运行时，从而避免了许多潜在的 bug。
3、类型推断
当我们调用泛型函数时，TypeScript 会根据传入的参数自动推断 T 的具体类型。比如调用 identity(42)，编译器自动推断 T 为 number。这一步是可选的，如果无法推断，我们也可以显式指定类型参数 identity<number>(42)。
4、类型擦除
这是泛型的一个重要特性——泛型类型信息只存在于编译阶段。编译为 JavaScript 时，所有 <T> 相关的类型标注都会被擦除，只保留普通的类型注释或完全没有任何类型信息。例如 function identity<T>(arg: T): T 编译后会变成 function identity(arg) { return arg; }，最终产物中不存在任何泛型的痕迹。
1.4 泛型的核心优势
泛型之所以重要，是因为它解决了 JavaScript 类型系统中的几个核心问题：
| 核心优势 | 说明 |
|---|
| 代码复用性的质变 | 在没有泛型的时代，如果我们想让一个函数同时支持 string 和 number 类型，通常需要编写两个独立函数，或者使用 any 类型牺牲类型安全。而泛型让我们编写一套代码，就能安全地处理多种类型。例如，一个 identity 函数既可以处理 number，也可以处理 string，甚至是自定义的对象类型。 |
| 类型安全是最大的保障 | 使用 any 类型意味着彻底放弃类型检查，任何类型错误都要到运行时才能发现。而泛型在编译阶段就能捕获类型不匹配的问题，将 bug 消灭在摇篮里。这对于大型项目尤为重要，因为运行时类型错误往往难以定位和修复。 |
| 代码意图更加清晰 | any 类型像是一个"黑箱"，开发者无法从类型声明中得知这个值应该是什么类型。而泛型 Array<T>、Promise<T> 等声明方式，让代码自描述性更强，后续维护者能够快速理解数据的结构和流向。 |
| 面向未来的扩展性 | 基于泛型设计的接口和类，不需要修改原有代码就能支持新的数据类型。比如我们定义了一个 Response<T> 接口，当业务需要新增一种数据类型时，只需要传入新的类型参数即可，而无需改动接口定义本身。 |
| 推动更好的设计 | 泛型鼓励开发者从一开始就从通用的角度思考问题，设计出更具抽象性和复用性的组件。这种思考方式与面向对象设计模式中的"依赖倒置"、"开闭原则"等思想不谋而合。 |
1.5 泛型的应用场景
泛型在实际开发中的应用非常广泛，以下是几个最常见的场景：
| 应用场景 | 说明 |
|---|
| 通用数据结构的实现 | 数据结构往往是通用的——一个栈不应该只能存储 number，它应该能存储任意类型。泛型让我们能够定义如 Stack<T>、Queue<T>、LinkedList<T> 这样真正通用的数据结构，同时保持对内部元素类型的严格检查。 |
| 工具函数和类库开发 | 日常开发中的工具函数，如深拷贝、JSON 序列化、数组处理等，都非常适合使用泛型。这类函数需要处理各种不同的数据类型，泛型能够在保持类型安全的同时，实现真正的复用。 |
| API 响应数据的类型化 | 与后端接口交互时，响应数据的结构往往是固定的，但具体的数据类型可能不同。通过泛型 ApiResponse<T>，我们可以为每个接口定义精确的返回类型，同时保持 API 请求逻辑的统一。 |
| 前端组件库开发 | 在 React、Vue 等框架中，组件通常需要处理各种类型的 props 和 state。泛型组件如 Table<T>、List<T> 等，能够在提供类型安全的同时，适应不同的业务数据模型。 |
| 通用接口和类的设计 | 面向对象编程中，我们经常需要定义一些有通用约束的接口。比如定义一个 Repository<T> 接口，所有实体仓储都实现这个接口，但每个仓储操作的实体类型各不相同。泛型让这种设计成为可能。 |
2. 泛型代码示例
2.1 基础泛型函数
typescript// 泛型标识函数：返回与输入相同类型的值
// <T>：类型参数，代表任意类型
// arg: T：参数类型为 T
// : T：返回值类型为 T
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.CavsGSMv.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.BpsDJhtc.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.CavsGSMv.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.BpsDJhtc.lean.js"
index b4af1dfe..99b4aca2 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.CavsGSMv.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_10.\350\201\212\344\270\200\350\201\212 Typescript \346\263\233\345\236\213.md.BpsDJhtc.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"聊一聊 TypeScript 中的泛型","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","frontmatter":{"date":"2025-08-20T22:51:27.000Z","title":"聊一聊 TypeScript 中的泛型","tldr":"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","permalink":"/fullstack/typescript-generic-types","tags":["tutorial","typescript","generics","type-system"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md","filePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"}'),p={name:"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"};function h(k,s,t,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l("",82)])])}const y=i(p,[["render",h]]);export{g as __pageData,y as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"聊一聊 TypeScript 中的泛型","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","frontmatter":{"date":"2025-08-20T22:51:27.000Z","title":"聊一聊 TypeScript 中的泛型","tldr":"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。","description":"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。","permalink":"/fullstack/typescript-generic-types","tags":["tutorial","typescript","generics","type-system"],"categories":["全栈","全栈基础素养"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md","filePath":"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"}'),p={name:"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md"};function h(k,s,t,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l("",82)])])}const y=i(p,[["render",h]]);export{g as __pageData,y as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.BdLdBuUH.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.CwRE_Svk.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.BdLdBuUH.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.CwRE_Svk.js"
index 78b5ddd9..3b6f9674 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.BdLdBuUH.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.CwRE_Svk.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const E=JSON.parse('{"title":"模块化编程实践指南","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","frontmatter":{"date":"2024-05-18T22:49:57.000Z","title":"模块化编程实践指南","tldr":"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","permalink":"/fullstack/module-programming-practice-guide","tags":["tutorial","ESM","DDD","微前端"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"};function h(k,s,t,e,r,F){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md for this page in Markdown format
模块化编程实践指南
作为模块化编程系列的总览文章，本文系统梳理了从基础概念到大型项目架构设计的全栈知识体系。首先介绍分层架构设计，包括前端 React 分层与后端 NestJS 分层，以及 DDD 四层架构。随后探讨微前端架构，解析 iframe、Web Components、single-spa、qiankun、模块联邦等方案的优劣势，并提供模块联邦的完整实战配置。系列文章涵盖 CommonJS、AMD、UMD、ES Modules 等规范演进，以及 TypeScript 模块增强、工程化实践与 Node.js 模块化。
1. 引言
模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。
前面的系列文章主要有：
本文将重点介绍大型项目中的模块化设计。
2.分层架构设计
分层架构是大型项目中常用的模块化设计模式，它将系统分为多个层次，每层负责特定的功能。
2.1 前端分层架构
以 React 技术栈为例，一个典型的前端分层架构通常包含以下核心层次：
| 层级 | 说明 |
|---|
| 表现层 | 负责 UI 渲染，包含组件与页面，遵循原子设计（Atomic Design）方法论 |
| 业务逻辑层 | 封装业务规则与流程，通过自定义 Hooks 和服务实现 |
| 数据访问层 | 处理与后端的通信，包括 API 请求、数据缓存与同步策略 |
| 状态管理层 | 管理全局与局部状态，确保数据流的可预测性 |
| 路由层 | 定义导航结构与路由守卫，处理权限控制与代码分割 |
| 基础设施层 | 提供横切关注点支持，包括工具函数、常量定义与配置管理 |
以下是一个基于 React + TypeScript 的现代项目目录结构示例：
shellsrc/
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const E=JSON.parse('{"title":"模块化编程实践指南","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","frontmatter":{"date":"2024-05-18T22:49:57.000Z","title":"模块化编程实践指南","tldr":"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","permalink":"/fullstack/module-programming-practice-guide","tags":["tutorial","ESM","DDD","微前端"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"};function h(k,s,t,e,r,F){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md for this page in Markdown format
模块化编程实践指南
作为模块化编程系列的总览文章，本文系统梳理了从基础概念到大型项目架构设计的全栈知识体系。首先介绍分层架构设计，包括前端 React 分层与后端 NestJS 分层，以及 DDD 四层架构。随后探讨微前端架构，解析 iframe、Web Components、single-spa、qiankun、模块联邦等方案的优劣势，并提供模块联邦的完整实战配置。系列文章涵盖 CommonJS、AMD、UMD、ES Modules 等规范演进，以及 TypeScript 模块增强、工程化实践与 Node.js 模块化。
1. 引言
模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。
前面的系列文章主要有：
本文将重点介绍大型项目中的模块化设计。
2.分层架构设计
分层架构是大型项目中常用的模块化设计模式，它将系统分为多个层次，每层负责特定的功能。
2.1 前端分层架构
以 React 技术栈为例，一个典型的前端分层架构通常包含以下核心层次：
| 层级 | 说明 |
|---|
| 表现层 | 负责 UI 渲染，包含组件与页面，遵循原子设计（Atomic Design）方法论 |
| 业务逻辑层 | 封装业务规则与流程，通过自定义 Hooks 和服务实现 |
| 数据访问层 | 处理与后端的通信，包括 API 请求、数据缓存与同步策略 |
| 状态管理层 | 管理全局与局部状态，确保数据流的可预测性 |
| 路由层 | 定义导航结构与路由守卫，处理权限控制与代码分割 |
| 基础设施层 | 提供横切关注点支持，包括工具函数、常量定义与配置管理 |
以下是一个基于 React + TypeScript 的现代项目目录结构示例：
shellsrc/
├── app/ # 应用层：应用配置和入口
│ ├── App.tsx # 应用根组件
│ ├── Router.tsx # 路由配置
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.BdLdBuUH.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.CwRE_Svk.lean.js"
similarity index 94%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.BdLdBuUH.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.CwRE_Svk.lean.js"
index 8b4c830d..f1e8bf43 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.BdLdBuUH.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_0.overview.md.CwRE_Svk.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const E=JSON.parse('{"title":"模块化编程实践指南","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","frontmatter":{"date":"2024-05-18T22:49:57.000Z","title":"模块化编程实践指南","tldr":"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","permalink":"/fullstack/module-programming-practice-guide","tags":["tutorial","ESM","DDD","微前端"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"};function h(k,s,t,e,r,F){return n(),a("div",null,[...s[0]||(s[0]=[l("",109)])])}const g=i(p,[["render",h]]);export{E as __pageData,g as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const E=JSON.parse('{"title":"模块化编程实践指南","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","frontmatter":{"date":"2024-05-18T22:49:57.000Z","title":"模块化编程实践指南","tldr":"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。","description":"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。","permalink":"/fullstack/module-programming-practice-guide","tags":["tutorial","ESM","DDD","微前端"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md"};function h(k,s,t,e,r,F){return n(),a("div",null,[...s[0]||(s[0]=[l("",109)])])}const g=i(p,[["render",h]]);export{E as __pageData,g as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.f0WM8qM3.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.BVmOGo8x.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.f0WM8qM3.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.BVmOGo8x.js"
index 7058c64d..70a0e75f 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.f0WM8qM3.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.BVmOGo8x.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"模块化编程初体验：概念、演进与设计模式","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","frontmatter":{"date":"2024-05-12T22:43:28.000Z","title":"模块化编程初体验：概念、演进与设计模式","tldr":"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","permalink":"/fullstack/frontend-module-programming-basic","tags":["tutorial","javascript","modularization","esm","design-patterns"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"}'),h={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"};function p(t,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md for this page in Markdown format
模块化编程初体验：概念、演进与设计模式
摘要总结: 本文系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。从模块化的核心痛点出发——全局变量污染、依赖关系混乱、加载性能瓶颈——逐步展开模块化编程的知识图谱。实践层面结合工厂模式（批量创建相似对象）、单例模式（全局唯一实例，如数据库连接）、观察者/发布订阅模式（模块间松耦合通信）三种经典设计模式，展示模块化与设计模式的有机结合。
1. 引言
随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。
它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。
2. 模块化编程初体验
在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：
javascript// math.js - 定义一个数学工具模块
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"模块化编程初体验：概念、演进与设计模式","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","frontmatter":{"date":"2024-05-12T22:43:28.000Z","title":"模块化编程初体验：概念、演进与设计模式","tldr":"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","permalink":"/fullstack/frontend-module-programming-basic","tags":["tutorial","javascript","modularization","esm","design-patterns"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"}'),h={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"};function p(t,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md for this page in Markdown format
模块化编程初体验：概念、演进与设计模式
摘要总结: 本文系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。从模块化的核心痛点出发——全局变量污染、依赖关系混乱、加载性能瓶颈——逐步展开模块化编程的知识图谱。实践层面结合工厂模式（批量创建相似对象）、单例模式（全局唯一实例，如数据库连接）、观察者/发布订阅模式（模块间松耦合通信）三种经典设计模式，展示模块化与设计模式的有机结合。
1. 引言
随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。
它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。
2. 模块化编程初体验
在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：
javascript// math.js - 定义一个数学工具模块
export const PI = 3.14159;
export function add(a, b) {
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.f0WM8qM3.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.BVmOGo8x.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.f0WM8qM3.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.BVmOGo8x.lean.js"
index 75203658..fcad02b7 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.f0WM8qM3.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_1.\345\211\215\347\253\257\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\237\272\347\241\200.md.BVmOGo8x.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"模块化编程初体验：概念、演进与设计模式","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","frontmatter":{"date":"2024-05-12T22:43:28.000Z","title":"模块化编程初体验：概念、演进与设计模式","tldr":"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","permalink":"/fullstack/frontend-module-programming-basic","tags":["tutorial","javascript","modularization","esm","design-patterns"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"}'),h={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"};function p(t,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",39)])])}const y=i(h,[["render",p]]);export{g as __pageData,y as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"模块化编程初体验：概念、演进与设计模式","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","frontmatter":{"date":"2024-05-12T22:43:28.000Z","title":"模块化编程初体验：概念、演进与设计模式","tldr":"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。","description":"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。","permalink":"/fullstack/frontend-module-programming-basic","tags":["tutorial","javascript","modularization","esm","design-patterns"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"}'),h={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md"};function p(t,s,k,e,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",39)])])}const y=i(h,[["render",p]]);export{g as __pageData,y as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CDvbKLWO.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CRGmbaTn.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CDvbKLWO.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CRGmbaTn.js"
index 1578dec6..2385dbd2 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CDvbKLWO.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CRGmbaTn.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as t}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","frontmatter":{"date":"2024-05-14T22:26:06.000Z","title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","tldr":"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","permalink":"/fullstack/different-module-programming-specifications","tags":["tutorial","CommonJS","AMD","UMD","ESM"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"};function h(p,s,k,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md for this page in Markdown format
JavaScript 模块化规范全景图：从 CJS 到 ESM
摘要总结: 本文横向对比 JavaScript 四大模块化规范：CommonJS、AMD、UMD、ES Modules。通过代码示例展示各规范的核心语法，并提供从 CommonJS 迁移到 ESM 的具体步骤，以及从 AMD 向 ESM 迁移的构建工具策略。最后以对比表格收尾，阐明 ESM 作为现代开发唯一推荐标准的地位。
在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。
本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。
1. CommonJS 规范：Node.js 生态的基石
CommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.js 成功的关键因素之一，在它出现之前，JavaScript 缺乏在服务器端运行所需的组织结构。它规定每个文件都是一个独立的模块，拥有私有的作用域，不会污染全局空间。
核心逻辑：
- 导出：通过
module.exports 或 exports 对象暴露成员。 - 导入：使用同步的
require() 函数加载模块。
示例代码：
javascript// 导出模块（module.exports）
+import{_ as i,g as a,h as n,U as t}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","frontmatter":{"date":"2024-05-14T22:26:06.000Z","title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","tldr":"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","permalink":"/fullstack/different-module-programming-specifications","tags":["tutorial","CommonJS","AMD","UMD","ESM"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"};function h(p,s,k,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md for this page in Markdown format
JavaScript 模块化规范全景图：从 CJS 到 ESM
摘要总结: 本文横向对比 JavaScript 四大模块化规范：CommonJS、AMD、UMD、ES Modules。通过代码示例展示各规范的核心语法，并提供从 CommonJS 迁移到 ESM 的具体步骤，以及从 AMD 向 ESM 迁移的构建工具策略。最后以对比表格收尾，阐明 ESM 作为现代开发唯一推荐标准的地位。
在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。
本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。
1. CommonJS 规范：Node.js 生态的基石
CommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.js 成功的关键因素之一，在它出现之前，JavaScript 缺乏在服务器端运行所需的组织结构。它规定每个文件都是一个独立的模块，拥有私有的作用域，不会污染全局空间。
核心逻辑：
- 导出：通过
module.exports 或 exports 对象暴露成员。 - 导入：使用同步的
require() 函数加载模块。
示例代码：
javascript// 导出模块（module.exports）
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CDvbKLWO.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CRGmbaTn.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CDvbKLWO.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CRGmbaTn.lean.js"
index cfef3817..2a383a44 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CDvbKLWO.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_2.\344\270\215\345\220\214\346\250\241\345\235\227\345\214\226\350\247\204\350\214\203\346\242\263\347\220\206.md.CRGmbaTn.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as t}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","frontmatter":{"date":"2024-05-14T22:26:06.000Z","title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","tldr":"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","permalink":"/fullstack/different-module-programming-specifications","tags":["tutorial","CommonJS","AMD","UMD","ESM"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"};function h(p,s,k,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t("",42)])])}const o=i(l,[["render",h]]);export{g as __pageData,o as default};
+import{_ as i,g as a,h as n,U as t}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","frontmatter":{"date":"2024-05-14T22:26:06.000Z","title":"JavaScript 模块化规范全景图：从 CJS 到 ESM","tldr":"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。","description":"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。","permalink":"/fullstack/different-module-programming-specifications","tags":["tutorial","CommonJS","AMD","UMD","ESM"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md"};function h(p,s,k,e,r,d){return n(),a("div",null,[...s[0]||(s[0]=[t("",42)])])}const o=i(l,[["render",h]]);export{g as __pageData,o as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.B-hcltGc.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.fPkWGUxd.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.B-hcltGc.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.fPkWGUxd.js"
index ffc91c7a..25b8724c 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.B-hcltGc.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.fPkWGUxd.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","frontmatter":{"date":"2024-05-14T22:29:32.000Z","title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","tldr":"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","permalink":"/fullstack/decode-es-modules","tags":["concept","ESM","static-analysis","Tree-Shaking","circular-dependency"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"};function h(k,s,e,t,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md for this page in Markdown format
回归标准，拥抱原生：ES Modules 核心规范与实践解析
如果说 CommonJS 是“草根英雄”，那么 ES Modules 就是“名门正派”。它是 ECMAScript 官方定义的模块系统，旨在为所有 JavaScript 环境提供统一、高效、且可静态分析的模块化方案。
理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。
1. 命名导出与导入：精准的代码引用
命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。
语法实践：：
javascript// math.js - 命名导出
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","frontmatter":{"date":"2024-05-14T22:29:32.000Z","title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","tldr":"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","permalink":"/fullstack/decode-es-modules","tags":["concept","ESM","static-analysis","Tree-Shaking","circular-dependency"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"};function h(k,s,e,t,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md for this page in Markdown format
回归标准，拥抱原生：ES Modules 核心规范与实践解析
如果说 CommonJS 是“草根英雄”，那么 ES Modules 就是“名门正派”。它是 ECMAScript 官方定义的模块系统，旨在为所有 JavaScript 环境提供统一、高效、且可静态分析的模块化方案。
理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。
1. 命名导出与导入：精准的代码引用
命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。
语法实践：：
javascript// math.js - 命名导出
// 行内导出
export const PI = 3.14159;
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.B-hcltGc.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.fPkWGUxd.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.B-hcltGc.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.fPkWGUxd.lean.js"
index 2e9805af..50cf8dfe 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.B-hcltGc.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_3.ES Modules \346\240\270\345\277\203\350\247\204\350\214\203\344\270\216\345\256\236\350\267\265\350\247\243\346\236\220.md.fPkWGUxd.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","frontmatter":{"date":"2024-05-14T22:29:32.000Z","title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","tldr":"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","permalink":"/fullstack/decode-es-modules","tags":["concept","ESM","static-analysis","Tree-Shaking","circular-dependency"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"};function h(k,s,e,t,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",51)])])}const c=i(p,[["render",h]]);export{g as __pageData,c as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","frontmatter":{"date":"2024-05-14T22:29:32.000Z","title":"回归标准，拥抱原生：ES Modules 核心规范与实践解析","tldr":"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。","description":"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。","permalink":"/fullstack/decode-es-modules","tags":["concept","ESM","static-analysis","Tree-Shaking","circular-dependency"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md"};function h(k,s,e,t,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l("",51)])])}const c=i(p,[["render",h]]);export{g as __pageData,c as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.BJ-pD4L0.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.hJ1lv1QY.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.BJ-pD4L0.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.hJ1lv1QY.js"
index 86dea155..bcc9487a 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.BJ-pD4L0.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.hJ1lv1QY.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as p}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","frontmatter":{"date":"2024-05-16T21:27:36.000Z","title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","tldr":"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","permalink":"/fullstack/typescript-module-programming-enhancement","tags":["concept","全栈","typescript","tsconfig"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"};function t(h,s,e,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[p(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md for this page in Markdown format
从逻辑隔离到类型契约：TypeScript 对模块化编程的增强
摘要总结: TypeScript 将模块间的依赖关系从简单的代码引用提升为编译时类型契约。本文系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。
1. 引言
在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。
本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。
2. 类型导出与导入：极致的运行时优化
TypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性能优化的关键——类型导入在编译为 JS 后会被完全抹除，确保不会引入冗余的运行时负载。
示例代码：
typescript// types.ts - 类型导出
+import{_ as i,g as a,h as n,U as p}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","frontmatter":{"date":"2024-05-16T21:27:36.000Z","title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","tldr":"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","permalink":"/fullstack/typescript-module-programming-enhancement","tags":["concept","全栈","typescript","tsconfig"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"};function t(h,s,e,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[p(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md for this page in Markdown format
从逻辑隔离到类型契约：TypeScript 对模块化编程的增强
摘要总结: TypeScript 将模块间的依赖关系从简单的代码引用提升为编译时类型契约。本文系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。
1. 引言
在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。
本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。
2. 类型导出与导入：极致的运行时优化
TypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性能优化的关键——类型导入在编译为 JS 后会被完全抹除，确保不会引入冗余的运行时负载。
示例代码：
typescript// types.ts - 类型导出
export interface User {
id: string;
name: string;
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.BJ-pD4L0.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.hJ1lv1QY.lean.js"
similarity index 95%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.BJ-pD4L0.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.hJ1lv1QY.lean.js"
index edb76145..84b19e75 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.BJ-pD4L0.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_4.Typescript \345\257\271\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\347\232\204\345\242\236\345\274\272.md.hJ1lv1QY.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as p}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","frontmatter":{"date":"2024-05-16T21:27:36.000Z","title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","tldr":"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","permalink":"/fullstack/typescript-module-programming-enhancement","tags":["concept","全栈","typescript","tsconfig"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"};function t(h,s,e,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[p("",41)])])}const y=i(l,[["render",t]]);export{g as __pageData,y as default};
+import{_ as i,g as a,h as n,U as p}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","frontmatter":{"date":"2024-05-16T21:27:36.000Z","title":"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强","tldr":"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。","description":"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。","permalink":"/fullstack/typescript-module-programming-enhancement","tags":["concept","全栈","typescript","tsconfig"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md"};function t(h,s,e,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[p("",41)])])}const y=i(l,[["render",t]]);export{g as __pageData,y as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.uR00Ga87.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.LTILHYsI.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.uR00Ga87.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.LTILHYsI.js"
index 123584c3..f8f19d48 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.uR00Ga87.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.LTILHYsI.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"模块化编程原则梳理与总结","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","frontmatter":{"date":"2024-05-17T22:30:50.000Z","title":"模块化编程原则梳理与总结","tldr":"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","permalink":"/fullstack/module-programming-principles-best-practices","abstract":"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。","tags":["concept","solid-principles","code-organization","best-practices","naming-conventions"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"};function h(e,s,t,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md for this page in Markdown format
模块化编程原则梳理与总结
如果说掌握模块化语法是“术”，那么理解其背后的设计原则就是“道”。在大型前端工程中，乱用模块化往往比不用更糟糕。为了构建出既健壮又易于扩展的系统，我们需要遵循一套行之有效的工程准则。
1. 单一职责原则
核心思想：一个模块应当有且只有一个被改变的原因。
模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。
代码演示：
javascript// ✅ 推荐：职责拆分明确
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"模块化编程原则梳理与总结","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","frontmatter":{"date":"2024-05-17T22:30:50.000Z","title":"模块化编程原则梳理与总结","tldr":"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","permalink":"/fullstack/module-programming-principles-best-practices","abstract":"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。","tags":["concept","solid-principles","code-organization","best-practices","naming-conventions"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"};function h(e,s,t,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md for this page in Markdown format
模块化编程原则梳理与总结
如果说掌握模块化语法是“术”，那么理解其背后的设计原则就是“道”。在大型前端工程中，乱用模块化往往比不用更糟糕。为了构建出既健壮又易于扩展的系统，我们需要遵循一套行之有效的工程准则。
1. 单一职责原则
核心思想：一个模块应当有且只有一个被改变的原因。
模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。
代码演示：
javascript// ✅ 推荐：职责拆分明确
// user-service.js - 仅处理用户数据的 CRUD
export const getUser = async (id) => { /* ... */ };
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.uR00Ga87.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.LTILHYsI.lean.js"
similarity index 97%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.uR00Ga87.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.LTILHYsI.lean.js"
index a41616ae..a647c0a5 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.uR00Ga87.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_5.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\216\237\345\210\231\344\270\216\346\234\200\344\275\263\345\256\236\350\267\265.md.LTILHYsI.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"模块化编程原则梳理与总结","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","frontmatter":{"date":"2024-05-17T22:30:50.000Z","title":"模块化编程原则梳理与总结","tldr":"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","permalink":"/fullstack/module-programming-principles-best-practices","abstract":"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。","tags":["concept","solid-principles","code-organization","best-practices","naming-conventions"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"};function h(e,s,t,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l("",31)])])}const c=i(p,[["render",h]]);export{g as __pageData,c as default};
+import{_ as i,g as a,h as n,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"模块化编程原则梳理与总结","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","frontmatter":{"date":"2024-05-17T22:30:50.000Z","title":"模块化编程原则梳理与总结","tldr":"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。","description":"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。","permalink":"/fullstack/module-programming-principles-best-practices","abstract":"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。","tags":["concept","solid-principles","code-organization","best-practices","naming-conventions"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"}'),p={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md"};function h(e,s,t,k,r,d){return n(),a("div",null,[...s[0]||(s[0]=[l("",31)])])}const c=i(p,[["render",h]]);export{g as __pageData,c as default};
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.DRe2iUDr.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.CGHtK9Bj.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.DRe2iUDr.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.CGHtK9Bj.js"
index f0e1dc94..d5fc4852 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.DRe2iUDr.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.CGHtK9Bj.js"
@@ -1,4 +1,4 @@
-import{_ as i,g as a,h as e,U as n}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"Node.js 模块化编程梳理与总结","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","frontmatter":{"date":"2024-05-17T23:33:09.000Z","title":"Node.js 模块化编程梳理与总结","tldr":"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","permalink":"/fullstack/nodejs-module-programming-summary","abstract":"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。","tags":["concept","node.js","commonjs","esm","monorepo","layered-architecture"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"};function p(t,s,r,o,h,d){return e(),a("div",null,[...s[0]||(s[0]=[n(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md for this page in Markdown format
Node.js 模块化编程梳理与总结
如果说浏览器端的模块化是为了"按需加载"，那么 Node.js 的模块化则是为了"代码组织"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。
在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。
1. CommonJS 与 ES Modules 双模共存
在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。
共存策略：
- 后缀决定论：
.mjs 始终被视为 ESM，.cjs 始终被视为 CJS。 - 包定义导向：在
package.json 中设置 "type": "module"，则目录下所有 .js 均视为 ESM，反之默认为 CJS。 - 互操作性（Interop）：
- ESM 引用 CJS：直接
import 即可，Node 会将 module.exports 包装为默认导出。 - CJS 引用 ESM：由于 ESM 是异步加载的，CJS 无法使用 require，必须使用 动态 import：
const module = await import('./es-module.mjs')
代码示例：
javascript// package.json
+import{_ as i,g as a,h as e,U as n}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"Node.js 模块化编程梳理与总结","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","frontmatter":{"date":"2024-05-17T23:33:09.000Z","title":"Node.js 模块化编程梳理与总结","tldr":"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","permalink":"/fullstack/nodejs-module-programming-summary","abstract":"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。","tags":["concept","node.js","commonjs","esm","monorepo","layered-architecture"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"};function p(t,s,r,o,h,d){return e(),a("div",null,[...s[0]||(s[0]=[n(`Are you an LLM? You can read better optimized documentation at /01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md for this page in Markdown format
Node.js 模块化编程梳理与总结
如果说浏览器端的模块化是为了"按需加载"，那么 Node.js 的模块化则是为了"代码组织"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。
在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。
1. CommonJS 与 ES Modules 双模共存
在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。
共存策略：
- 后缀决定论：
.mjs 始终被视为 ESM，.cjs 始终被视为 CJS。 - 包定义导向：在
package.json 中设置 "type": "module"，则目录下所有 .js 均视为 ESM，反之默认为 CJS。 - 互操作性（Interop）：
- ESM 引用 CJS：直接
import 即可，Node 会将 module.exports 包装为默认导出。 - CJS 引用 ESM：由于 ESM 是异步加载的，CJS 无法使用 require，必须使用 动态 import：
const module = await import('./es-module.mjs')
代码示例：
javascript// package.json
{
"type": "module"
}
diff --git "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.DRe2iUDr.lean.js" "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.CGHtK9Bj.lean.js"
similarity index 97%
rename from "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.DRe2iUDr.lean.js"
rename to "assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.CGHtK9Bj.lean.js"
index b2552882..b064730b 100644
--- "a/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.DRe2iUDr.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_80.\345\205\250\346\240\210\345\237\272\347\241\200\347\264\240\345\205\273_20.\346\250\241\345\235\227\345\214\226\347\274\226\347\250\213\345\256\236\350\267\265\346\214\207\345\215\227_6.\350\247\243\346\236\220 NodeJS \344\270\255\347\232\204\346\250\241\345\235\227\345\214\226.md.CGHtK9Bj.lean.js"
@@ -1 +1 @@
-import{_ as i,g as a,h as e,U as n}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"Node.js 模块化编程梳理与总结","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","frontmatter":{"date":"2024-05-17T23:33:09.000Z","title":"Node.js 模块化编程梳理与总结","tldr":"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","permalink":"/fullstack/nodejs-module-programming-summary","abstract":"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。","tags":["concept","node.js","commonjs","esm","monorepo","layered-architecture"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"};function p(t,s,r,o,h,d){return e(),a("div",null,[...s[0]||(s[0]=[n("",31)])])}const g=i(l,[["render",p]]);export{c as __pageData,g as default};
+import{_ as i,g as a,h as e,U as n}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"Node.js 模块化编程梳理与总结","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","frontmatter":{"date":"2024-05-17T23:33:09.000Z","title":"Node.js 模块化编程梳理与总结","tldr":"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。","description":"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。","permalink":"/fullstack/nodejs-module-programming-summary","abstract":"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。","tags":["concept","node.js","commonjs","esm","monorepo","layered-architecture"],"categories":["全栈","全栈基础素养","模块化编程实践指南"]},"headers":[],"relativePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md","filePath":"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"}'),l={name:"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md"};function p(t,s,r,o,h,d){return e(),a("div",null,[...s[0]||(s[0]=[n("",31)])])}const g=i(l,[["render",p]]);export{c as __pageData,g as default};
diff --git "a/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.Dq7Ydo7v.js" "b/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.BBjcdRsJ.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.Dq7Ydo7v.js"
rename to "assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.BBjcdRsJ.js"
index 6898717f..940504f6 100644
--- "a/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.Dq7Ydo7v.js"
+++ "b/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.BBjcdRsJ.js"
@@ -1 +1 @@
-import{_ as d,g as i,h as c,U as e,i as a,S as s}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const v=JSON.parse('{"title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","frontmatter":{"date":"2026-02-06T15:58:53.000Z","title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","permalink":"/growth/full-stack-resources","categories":["资源推荐"],"tags":["资源推荐","全栈"]},"headers":[],"relativePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md","filePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"}'),l={name:"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"};function n(o,t,r,p,_,m){return c(),i("div",null,[...t[0]||(t[0]=[e('Are you an LLM? You can read better optimized documentation at /01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md for this page in Markdown format
全栈技术资源推荐
摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，不仅是一份全栈工具检索目录，更是一份指导开发者从全局视角构建高性能、类型安全、且极具工程化思维的现代 Web 应用的最佳实践指南。
- 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。
- 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。
- 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。
1. 基本语言与环境
',4),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/HTML",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"HTML")]),a("p",{class:"desc"},"HTML (HyperText Markup Language) 是用于创建网页的标准标记语言，用于描述网页的结构和内容。它使用标签来定义文档的不同部分，如标题、段落、图像、链接等。HTML 是构建 Web 页面的基础，也是所有前端开发的起点。"),a("span",{class:"VPBadge tip badge"},"标记语言")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/CSS",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"CSS")]),a("p",{class:"desc"},"CSS (Cascading Style Sheets) 是用于描述网页样式和布局的样式表语言。它定义了文档的外观，包括字体、颜色、间距、布局等。CSS 与 HTML 结合使用，实现了网页的结构与样式的分离，使得网页设计更加灵活和可维护。"),a("span",{class:"VPBadge tip badge"},"样式表")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/1200px-JavaScript-logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"JavaScript")]),a("p",{class:"desc"},"JavaScript 是一种动态、弱类型的脚本语言，用于在 Web 浏览器中实现交互性和动态内容。它是 Web 开发的基础，也是前端开发的核心语言。"),a("span",{class:"VPBadge tip badge"},"脚本语言")]),a("a",{href:"https://www.typescriptlang.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"TypeScript")]),a("p",{class:"desc"},"TypeScript 是 JavaScript 的一个超集，添加了静态类型检查和其他高级功能，使得代码更加可靠和可维护。它在前端开发中得到广泛应用，尤其在 React 项目中。"),a("span",{class:"VPBadge tip badge"},"静态类型")]),a("a",{href:"https://webkit.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webkit.org/wp-content/themes/webkit/images/webkit.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"webkit")]),a("p",{class:"desc"},"WebKit 是一个开源的浏览器引擎，用于渲染网页内容。它是 Safari 浏览器的引擎，也是 Chrome 浏览器的一部分。WebKit 提供了高性能的网页渲染和交互功能，是构建现代 Web 应用的基础。"),a("span",{class:"VPBadge tip badge"},"浏览器引擎")]),a("a",{href:"https://nodejs.org/zh-cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Node.js")]),a("p",{class:"desc"},"Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端执行 JavaScript 代码。它允许开发者使用 JavaScript 构建高性能的网络应用程序，如服务器端渲染、实时应用程序和 API 服务。"),a("span",{class:"VPBadge tip badge"},"服务器端")])])],-1),a("h2",{id:"_2-核心-ui-框架",tabindex:"-1"},[s("2. 核心 UI 框架 "),a("a",{class:"header-anchor",href:"#_2-核心-ui-框架","aria-label":"Permalink to “2. 核心 UI 框架”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://react.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React")]),a("p",{class:"desc"},"React 是 Facebook 开发的用于构建用户界面的声明式 JavaScript 库，采用组件化架构，支持服务器端渲染和客户端交互。它允许开发者设计简单的视图，并根据数据变化高效更新渲染组件。"),a("span",{class:"VPBadge tip badge"},"声明式")]),a("a",{href:"https://vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue")]),a("p",{class:"desc"},"Vue.js 是一套用于构建用户界面的渐进式框架，采用组件化架构，支持服务器端渲染和客户端交互。强调易用性和高性能。其生态包含官方路由 (Vue Router) 和状态管理库 (Pinia)。"),a("span",{class:"VPBadge tip badge"},"渐进式")]),a("a",{href:"https://svelte.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Svelte")]),a("p",{class:"desc"},"Svelte 是一种全新的构建 Web 应用的方式，作为编译器将声明式组件转换为高效且能直接操作 DOM 的 JavaScript 代码，运行时开销极小。它强调组件化开发，开发者可以直接在 HTML 中编写组件逻辑，无需额外的运行时支持。"),a("span",{class:"VPBadge tip badge"},"编译时")])])],-1),a("h2",{id:"_3-样式与-ui-组件库-styling-component-libraries",tabindex:"-1"},[s("3. 样式与 UI 组件库 (Styling & Component Libraries) "),a("a",{class:"header-anchor",href:"#_3-样式与-ui-组件库-styling-component-libraries","aria-label":"Permalink to “3. 样式与 UI 组件库 (Styling & Component Libraries)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://tailwindcss.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/1200px-Tailwind_CSS_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Tailwind CSS")]),a("p",{class:"desc"},"现代前端首选的实用优先 (Utility-first) CSS 框架，通过类名组合实现样式，无需编写自定义 CSS。"),a("span",{class:"VPBadge tip badge"},"实用优先")]),a("a",{href:"https://daisyui.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://img.daisyui.com/images/daisyui/mark.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Daisy UI")]),a("p",{class:"desc"},"是一个基于 Tailwind CSS 的热门开源UI组件库，通过添加语义化类名（如 btn, card）来解决 Tailwind 冗长的代码问题，能帮开发者用更少的代码、更快地构建出干净、美观、响应式且支持主题自定义的 Web 界面。"),a("span",{class:"VPBadge tip badge"},"tailwind 插件")]),a("a",{href:"https://ui.shadcn.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://ui.shadcn.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"shadcn/ui")]),a("p",{class:"desc"},"shadcn/ui 不是一个传统的组件库，而是一种构建你自己的组件库的方法。它提供了一套精心设计、可访问的组件和代码分发平台，兼容你喜欢的框架和 AI 模型。"),a("span",{class:"VPBadge tip badge"},"组件原语")]),a("a",{href:"https://ant.design/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Ant Design")]),a("p",{class:"desc"},"AI 友好的「设计系统」，让美与智能并进，让工作充满「灵感」与「快乐」。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://element-plus.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://element-plus.org/images/element-plus-logo-small.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"element-plus")]),a("p",{class:"desc"},"Element Plus 是一个基于 Vue 3 设计的组件库，提供丰富的组件和样式，常用于构建后台管理系统。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://vuetifyjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://vuetifyjs.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vuetify")]),a("p",{class:"desc"},"为 Vue 3 设计的成熟 UI 库，常用于构建后台管理系统，提供丰富的组件和样式。"),a("span",{class:"VPBadge tip badge"},"组件库")])])],-1),a("h2",{id:"_4-路由与状态管理",tabindex:"-1"},[s("4. 路由与状态管理 "),a("a",{class:"header-anchor",href:"#_4-路由与状态管理","aria-label":"Permalink to “4. 路由与状态管理”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://reactrouter.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://reactrouter.com/favicon-dark.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Router")]),a("p",{class:"desc"},"React Router 是 React 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://router.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue Router")]),a("p",{class:"desc"},"Vue.js 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://github.com/pmndrs/zustand",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Zustand")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Redux 的现代化、极简主义精神继承者（自上而下的全局 Store），提供了一种简单的方式来管理全局状态。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://github.com/pmndrs/jotai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Jotai")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Recoil 的轻量化、高性能替代者（自下而上的原子化状态）。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://redux.js.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://redux.js.org/img/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Redux")]),a("p",{class:"desc"},"Redux 是一个预测性的状态容器，用于管理应用的全局状态，提供一致的状态更新和可预测的行为。"),a("span",{class:"VPBadge tip badge"},"不再推荐")]),a("a",{href:"https://pinia.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://pinia.vuejs.org/logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Pinia")]),a("p",{class:"desc"},"Vue.js 官方推荐的状态管理库，基于 Vue 3 Composition API 设计，提供简单、灵活的状态管理解决方案。"),a("span",{class:"VPBadge tip badge"},"状态管理")])])],-1),e('React 状态管理库横向对比分析：
| 特性/库 | Zustand 大部分项目的首选 | Jotai 编辑比较频繁的建议使用 | Redux 不再推荐 |
|---|
| 核心思想 | 自上而下的全局状态管理 | 自下而上的原子化状态管理 | 单向数据流、集中式全局状态 |
| 适用场景 | 中大型应用全局状态、偏好轻量方案 | 组件间状态共享、细粒度更新、贴近React思维 | 超大型复杂应用、强可预测性需求 |
| 学习曲线 | 平缓，API 简洁 | 平缓，原子概念容易理解 | 陡峭，需理解中间件、Redux Toolkit 等 |
| 代码风格 | 简洁，类似轻量版 Redux | 原子化，分散定义状态 | 相对冗长，需定义 Action、Reducer |
| 性能优化 | 支持组件精准订阅状态 | 天然细粒度更新，避免不必要重渲染 | 需配合 Reselect 等工具优化 |
| 社区生态 | 生态稳定，常用插件完善 | 生态活跃，适合实验性场景 | 生态庞大，工具链成熟 |
5. 数据获取与 API 集成 (Data Fetching & API)
',3),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Fetch API")]),a("p",{class:"desc"},"Fetch 是一个基于 Promise 的现代 JavaScript API，用于在浏览器中发起 HTTP 请求（AJAX），是 XMLHttpRequest (XHR) 的更简洁、更强大的替代方案。它允许页面在不重载的情况下从服务器获取数据，支持 GET、POST 等请求方法，并广泛应用于处理网络数据交互。"),a("span",{class:"VPBadge tip badge"},"原生 API")]),a("a",{href:"https://axios-http.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://axios-http.com/assets/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Axios")]),a("p",{class:"desc"},"Axios 是一个基于 Promise 的 HTTP 请求库，可运行在浏览器和 Node.js 环境中。它支持拦截请求和响应、转换数据、取消请求等功能，是前端开发中常用的 HTTP 请求库。"),a("span",{class:"VPBadge tip badge"},"全能请求库")]),a("a",{href:"https://swr.vercel.app/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://swr.vercel.app/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"SWR")]),a("p",{class:"desc"},'SWR 是由 Vercel 开发的一个基于 React Hooks 的轻量级数据请求库。它基于 "stale-while-revalidate" 策略，先返回缓存数据，再在后台请求最新数据，保证 UI 快速响应且数据保持更新。特点：极简主义，越轻越好，开箱即用，专注于 HTTP 缓存策略。'),a("span",{class:"VPBadge tip badge"},"按需验证缓存")]),a("a",{href:"https://tanstack.com/query/latest",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://tanstack.com/favicon-32x32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Query")]),a("p",{class:"desc"},"React Query (现更名为 TanStack Query) 是一个功能强大的 React 服务端状态管理库。它专注于处理异步数据的获取、缓存、同步和更新，开箱即用地简化了 API 请求、缓存处理、数据过期更新和加载/错误状态管理。特点：功能主义大而全，不仅是 HTTP，可用于任何异步 Promise 管理。"),a("span",{class:"VPBadge tip badge"},"服务端状态管理")]),a("a",{href:"https://graphql.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://graphql.org/_next/static/media/logo-blurred.94c9eff4.webp",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GraphQL")]),a("p",{class:"desc"},"GraphQL 是一个用于 API 的查询语言、一种描述请求数据方法的语法，通常用于客户端从服务端加载数据，主要是为了解决 REST API 中过度获取和获取不足的问题。"),a("span",{class:"VPBadge tip badge"},"按需声明式查询")]),a("a",{href:"https://trpc.io/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://trpc.io/img/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"tRPC")]),a("p",{class:"desc"},"tRPC 是基于插件化理念设计的一款支持多语言、高性能的 RPC 开发框架，旨在无需定义专门 API Schema（如 Swagger/GraphQL）的情况下，实现前后端无缝、全栈类型安全的 API 调用。它让前端能像调用本地函数一样调用后端远程函数，大大提升开发效率。"),a("span",{class:"VPBadge tip badge"},"端到端类型安全")])])],-1),e('| 技术/工具 | 核心定位与特征 | 核心优势 (能解决什么痛点) | 局限性与妥协 | 最佳实践与适用场景 |
|---|
Fetch API 通信基建 | 浏览器原生标准协议 | 无需安装第三方包、天然融入现代 Web 标准。在 Edge Runtime 环境下表现最佳。 | 默认不抛出 HTTP 错误状态码（需手动拦截）；处理 JSON 和参数拼接繁琐、缺少请求取消机制。 | 极简场景/底层封装：不需要复杂拦截器的轻量级页面；作为更高级架构的底层引擎，如 Next.js 内部的 fetch 扩展。 |
Axios
通信基建 | 全能型同构请求体 | API 极其友好、请求/响应拦截器（处理全局 Token、统一错误提示的利器）、自动转换 JSON 数据。 | 增加了一定的打包体积；基于 XHR（尽管现代版本已支持 fetch 底层），在某些最新的服务端边缘计算环境中可能受限。 | 重度依赖 RESTful 的项目：需要精细化控制请求头、进行全局鉴权拦截、处理复杂文件上传的传统全栈或中后台系统。 |
SWR
状态调度 | 按需验证的轻量级缓存 | 极致的轻量与简单；焦点聚焦时自动刷新、网络恢复时重试；带来极佳的“UI 瞬间响应”体验。 | 面对极其复杂的异步状态流转（如互相依赖的串行请求、精细的离线修改回滚）时，显得心有余而力不足。 | 内容驱动型应用：注重阅读体验的博客站点、数据实时性要求中等的数据看板。配置极简，非常适合快速迭代的产品。 |
React Query
状态调度 | 大而全的异步状态接管 | 强大的缓存生命周期管理；优雅的 Mutations（数据变更）处理与乐观更新；极好的开发调试工具。 | 学习曲线较陡峭；默认配置下有时会导致意料之外的组件重渲染；体积相对较大。 | 复杂交互型 SaaS / 强业务逻辑系统：需要处理大量表单提交、列表无限滚动、精细化缓存控制的重型单页应用（SPA）。 |
GraphQL 协议契约 | 声明式的图谱查询 | 彻底解决 Over-fetching；前端拥有极高的数据按需组合自由度；自带强类型的 Schema 文档。 | 后端开发成本极高（需编写大量 Resolver 函数）；容易产生 N+1 查询性能问题；HTTP 缓存机制难以直接利用。 | 多端复用型大中型产品：后端需要同时服务于 Web、iOS、Android 甚至第三方开发者；业务实体关系高度复杂的系统。 |
tRPC
协议契约 | 端到端的全栈类型推导 | 前后端类型零成本共享；重构时的代码安全性极高；完全不需要手写接口文档或 Schema。 | 强绑定 Node.js/TypeScript 技术栈；如果前端项目和后端代码没有在一个 Monorepo 中，威力大打折扣。 | 敏捷全栈/单人作战团队：采用 Node.js + 前端框架（React/Vue）构建的全栈项目。极度追求开发效率和产品迭代速度的团队。 |
现代 Web 数据流架构范式：
1、标准前后端分离架构：Axios + React Query（或 SWR）
- 适用场景： 异构系统（如前端使用 React/Vue，后端使用 Java/Go/Python 等非 JS 语言）；高度依赖传统 RESTful API 规范、需要精细化控制网络请求拦截器的中大型企业级项目。
- 架构机制：将网络请求的“底层通道”与“上层状态”严格解耦。Axios 专注于基础通信层的治理，负责全局请求头注入（如 Bearer Token）、统一的 HTTP 状态码拦截与静默错误上报；React Query / SWR 则专注于表现层的状态调度，接管数据的缓存生命周期、请求去重（Deduplication）以及乐观更新（Optimistic UI）。
- 工程价值：具备极高的稳健性与技术栈包容性。前后端边界清晰，互不干扰。
2、全栈类型安全架构：tRPC + React Query
- 适用场景： 采用 Monorepo 架构管理的纯 TypeScript/Node.js 全栈项目；追求敏捷开发、极速交付以及需要频繁进行业务重构的 SaaS 产品或内部系统。
- 架构机制：基于 TypeScript 的强类型推导系统，打通前后端数据流。tRPC 官方深度集成了 React Query（@trpc/react-query），在保留了完整的现代前端缓存调度能力的同时，彻底免去了手动维护 API 接口文档和 Schema 编译生成的中间环节。后端的类型变更会即刻反映为前端编译期的静态类型检查报错。
- 工程价值：极致的研发效能与结构安全性。对于专注于产品迭代与业务增长的 Node.js 全栈开发者而言，这种组合完美契合了“以更少投入获得更大收益”的工程哲学。它直接消灭了“接口联调”这一无效耗时环节，让开发者能将核心精力聚焦于产品逻辑本身。
3、多端数据聚合 BFF 架构：GraphQL + Apollo Client
- 适用场景： 数据来源庞杂且分散的大型业务系统；需要同时为多种不同客户端提供高灵活性 API，且前后端团队规模较大、需要高度并行的项目。
- 架构机制：引入 BFF（Backend For Frontend，服务于前端的后端）理念。GraphQL 作为中间件层，负责将底层分散的微服务、数据库或第三方 API 进行聚合与编排（Data Orchestration）。前端通过 Apollo Client 发起声明式查询，精准获取 UI 组件所需的数据切片，并利用 Apollo 强大的标准化缓存（Normalized Cache）管理复杂实体关系。
- 工程价值：彻底解决多端设备（Web、iOS、Android）面临的过度获取（Over-fetching）与碎片化接口治理问题，实现了数据消费端的高度自治。
',9),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://cn.vite.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://cn.vite.dev/logo-without-border.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vite")]),a("p",{class:"desc"},"Vite 是一款速度极快的前端构建工具，为下一代 Web 应用程序提供支持，它摒弃了“先打包，再启动”的模式，开启了“原生 ESM”开发的新时代。"),a("span",{class:"VPBadge tip badge"},"极速 ESM 构建")]),a("a",{href:"https://rsbuild.rs/zh/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.rspack.rs/rsbuild/favicon-128x128.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Rsbuild")]),a("p",{class:"desc"},"Rsbuild 是一个由字节跳动 Web Infra 团队开源、基于 Rust 语言编写的 Rspack 驱动的高性能构建工具。它专注于为 Web 项目提供开箱即用的开发体验，通过内置的高性能工具（如 SWC、Lightning CSS）实现极快的构建速度，并提供类似 Vite/Webpack 的零配置或低配置体验。"),a("span",{class:"VPBadge tip badge"},"Rust 高性能构建")]),a("a",{href:"https://nextjscn.org/docs/app/api-reference/turbopack",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Turbopack")]),a("p",{class:"desc"},"Turbopack 是由 Vercel 开发、基于 Rust 编写的高性能增量打包工具，专为 JavaScript 和 TypeScript 优化。它被设计为 Webpack 的继任者，旨在通过优化的机器代码和高度增量计算能力，提供比 Vite 快 10 倍、比 Webpack 快 700 倍的本地开发体验，主要内置于 Next.js。"),a("span",{class:"VPBadge tip badge"},"增量极速打包")]),a("a",{href:"https://webpack.docschina.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webpack.docschina.org/favicon.f326220248556af65f41.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Webpack")]),a("p",{class:"desc"},"Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它在内部构建依赖图，将项目中的各种资源（如 JS、CSS、图片、TypeScript 等）视为模块，并最终打包成浏览器可直接运行的静态文件。通过 Loader 和 Plugin，它能处理复杂的开发需求。"),a("span",{class:"VPBadge tip badge"},"经典模块打包")]),a("a",{href:"https://github.com/features/actions",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Actions")]),a("p",{class:"desc"},"GitHub Actions 是 GitHub 推出的持续集成和持续交付 (CI/CD) 平台，旨在帮助开发者自动执行软件开发工作流。它允许在代码仓库中直接定义自动化流程（如构建、测试、部署），支持事件触发（如提交代码），并提供虚拟机环境（Ubuntu、Windows、macOS）运行任务，使开发更高效。"),a("span",{class:"VPBadge tip badge"},"CI/CD 自动化")])])],-1),a("h2",{id:"_7-全栈框架",tabindex:"-1"},[s("7. 全栈框架 "),a("a",{class:"header-anchor",href:"#_7-全栈框架","aria-label":"Permalink to “7. 全栈框架”"},"")],-1),a("blockquote",null,[a("p",null,[a("strong",null,"同构元框架：Next.js、Nuxt"),s("，现代全栈开发倾向于使用“元框架”，它们模糊了客户端和服务器的界限，提供一体化的开发体验。")]),a("p",null,[a("strong",null,"企业级 Node 服务端框架：NestJS"),s("，一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架。")])],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://nextjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nextjs.org/favicon.ico?favicon.3fc65821.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Next.js")]),a("p",{class:"desc"},"Next.js 是一个基于 React、Node.js 的全栈 Web 开发框架，由 Vercel 公司维护，专为生产环境设计。它通过内置的服务器端渲染 (SSR)、静态站点生成 (SSG) 和增量静态再生成 (ISR) 技术，解决了传统 React 应用的 SEO 优化差 和首屏加载慢的问题，是目前最受欢迎的 React 应用开发框架之一。"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nuxtjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nuxt.com/icon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Nuxt")]),a("p",{class:"desc"},"是一个基于 Vue.js 的开源、免费的 Web 开发元框架（Meta-framework），专为构建高性能的服务端渲染（SSR）、静态站点生成（SSG）和单页应用（SPA）而设计。它集成了 Vite、Vue 3 和 Nitro 服务端引擎，旨在简化开发流程，提供卓越的 SEO 优化和开发人员体验"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nestjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nestjs.com/favicon-32x32.a39d94f4.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"NestJS")]),a("p",{class:"desc"},"NestJS 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架."),a("span",{class:"VPBadge tip badge"},"企业级 Node 框架")])])],-1),e('| 对比维度 | Next.js | Nuxt | NestJS |
|---|
| 框架定位 | React 全栈框架
(Isomorphic Meta-framework) | Vue 全栈框架
(Isomorphic Meta-framework) | 企业级 Node.js 服务端框架
(Backend Framework) |
| 底层驱动 | Webpack / Turbopack
React Server Components | Vite / Nitro 引擎
Vue3 | Express / Fastify (底层可插拔)
纯 TypeScript |
| 核心工程特性 | 混合渲染 (SSR/SSG/ISR)
Server Actions (无缝 RPC)
边缘计算路由 | 混合渲染与预渲染
极致的自动导入 (Auto-imports)
开箱即用的模块化生态 | 依赖注入 (DI) / 控制反转 (IoC)
面向切面编程 (AOP)
强主张的模块化目录 |
| 数据流职责 | 视图层渲染、BFF (服务于前端的后端)、轻量级聚合 API。 | 视图层渲染、BFF (服务于前端的后端)、轻量级聚合 API。 | 纯后端业务逻辑处理、微服务通信与编排、统一 API 供应。 |
| 最佳业务场景 | 重 SEO 的 C 端产品 (电商、内容站); 敏捷迭代的 SaaS; 单仓库极速交付。 | 重交互体验的 Web 应用; Vue 技术团队的全栈转型; 独立开发者建站。 | 复杂领域驱动设计 (DDD) 系统; 多端复用的 API 中台; 庞大的微服务集群。 |
| 需规避的反模式 | 承载高并发 CPU 密集型计算; 极其复杂的跨服务分布式事务。 | 承载高并发 CPU 密集型计算; 极其复杂的跨服务分布式事务。 | 仅需极简 CRUD 的小型外包项目; 强依赖首屏 HTML 直出的纯展示网页。 |
| 团队协作模型 | 前端主导的敏捷全栈小队, 或追求“单兵作战”的极客团队。 | 前端主导的敏捷全栈小队, 或 Vue 生态重度依赖团队。 | 后端主导的中大型团队, 前后端物理分离的标准化开发流水线。 |
8. 部署与托管 (Deployment & Hosting)
',2),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://vercel.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.vercel.com/image/upload/front/favicon/vercel/apple-touch-icon-256x256.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vercel")]),a("p",{class:"desc"},"Vercel 是一个现代前端项目的理想部署平台，它零配置、支持自动部署和预览、拥有全球加速节点，广泛用于开源项目、个人作品集、企业网站等。 无论你是用React、Vue、Svelte 还是静态HTML，只需几步就可以将项目上线。"),a("span",{class:"VPBadge tip badge"},"前端边缘托管")]),a("a",{href:"https://www.netlify.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://www.netlify.com/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Netlify")]),a("p",{class:"desc"},"与 Vercel 类似，功能更全面：支持更多的框架和静态站点生成器，有表单处理、无服务器函数等功能，免费额度更大、还支持 A/B 测试和分析。Netlify 是一个基于云计算的网站部署和托管平台，专注于为开发者提供便捷的静态网站和Jamstack 应用部署服务。 它的核心优势在于将网站构建、部署、托管以及持续集成/ 持续部署（CI/CD）流程高度集成，极大地简化了开发和运维的复杂程度"),a("span",{class:"VPBadge tip badge"},"Jamstack 平台")]),a("a",{href:"https://pages.github.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Pages")]),a("p",{class:"desc"},"GitHub Pages 是一个由 GitHub 提供的、免费的静态网站托管服务。它允许用户直接从 GitHub 仓库（Repository）获取 HTML、CSS 和 JavaScript 文件，无需额外配置服务器即可快速部署个人主页、项目文档或博客。"),a("span",{class:"VPBadge tip badge"},"纯静态托管")])])],-1),a("h2",{id:"_9-学习资源与社区-learning-community",tabindex:"-1"},[s("9. 学习资源与社区 (Learning & Community) "),a("a",{class:"header-anchor",href:"#_9-学习资源与社区-learning-community","aria-label":"Permalink to “9. 学习资源与社区 (Learning & Community)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://javascriptweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"JavaScript Weekly")]),a("p",{class:"desc"},"每周分享最新的 JavaScript 相关技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://nodeweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Node Weekly")]),a("p",{class:"desc"},"每周分享最新的 Node.js 相关技术文章、库、工具和趋势。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://www.ruanyifeng.com/blog/weekly/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"阮一峰网络日志")]),a("p",{class:"desc"},"阮一峰的网络日志，每周五发布，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E6%97%A9%E8%AF%BB%E8%AF%BE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端早读课")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E5%B7%85",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之巅")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzIxMzExMjYwOQ==&action=getalbum&album_id=1369610438157369345#wechat_redirect",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"凹凸实验室")]),a("p",{class:"desc"},"蒲公英·JELLY技术周刊，由京东·凹凸实验室维护整理的技术周刊，从团队专注的研究技术方向出发，深入挖掘业界热点，聚焦技术动态。技术周刊内容分类主要包括如下：基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%85%A8",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端大全")]),a("p",{class:"desc"},"前端大全，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E7%A5%9E",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之神")]),a("p",{class:"desc"},"前端之神，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E7%A8%8B%E5%BA%8F%E5%91%98%E6%88%90%E9%95%BF%E6%8C%87%E5%8C%97",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"程序员成长指北")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%AD%97%E8%8A%82%E5%89%8D%E7%AB%AF-ByteFE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"ByteFE")]),a("p",{class:"desc"},"字节跳动前端团队维护的专业微信公众号，分享技术前沿、文章分享、实践干货等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%BB%8E%E8%BF%9B%E9%98%B6%E5%88%B0%E5%85%A5%E9%99%A2",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端从进阶到入院")]),a("p",{class:"desc"},"前端从进阶到入院，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://www.zhangxinxu.com/wordpress/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"张鑫旭-鑫空间-鑫生活")]),a("p",{class:"desc"},"张鑫旭的个人博客，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"网络博客")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E6%B7%98%E7%B3%BB%E5%89%8D%E7%AB%AF%E5%9B%A2%E9%98%9F",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"淘系前端团队")]),a("p",{class:"desc"},"淘宝前端团队，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")])])],-1)])])}const h=d(l,[["render",n]]);export{v as __pageData,h as default};
+import{_ as d,g as i,h as c,U as e,i as a,S as s}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const v=JSON.parse('{"title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","frontmatter":{"date":"2026-02-06T15:58:53.000Z","title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","permalink":"/growth/full-stack-resources","categories":["资源推荐"],"tags":["资源推荐","全栈"]},"headers":[],"relativePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md","filePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"}'),l={name:"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"};function n(o,t,r,p,_,m){return c(),i("div",null,[...t[0]||(t[0]=[e('Are you an LLM? You can read better optimized documentation at /01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md for this page in Markdown format
全栈技术资源推荐
摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，不仅是一份全栈工具检索目录，更是一份指导开发者从全局视角构建高性能、类型安全、且极具工程化思维的现代 Web 应用的最佳实践指南。
- 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。
- 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。
- 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。
1. 基本语言与环境
',4),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/HTML",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"HTML")]),a("p",{class:"desc"},"HTML (HyperText Markup Language) 是用于创建网页的标准标记语言，用于描述网页的结构和内容。它使用标签来定义文档的不同部分，如标题、段落、图像、链接等。HTML 是构建 Web 页面的基础，也是所有前端开发的起点。"),a("span",{class:"VPBadge tip badge"},"标记语言")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/CSS",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"CSS")]),a("p",{class:"desc"},"CSS (Cascading Style Sheets) 是用于描述网页样式和布局的样式表语言。它定义了文档的外观，包括字体、颜色、间距、布局等。CSS 与 HTML 结合使用，实现了网页的结构与样式的分离，使得网页设计更加灵活和可维护。"),a("span",{class:"VPBadge tip badge"},"样式表")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/1200px-JavaScript-logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"JavaScript")]),a("p",{class:"desc"},"JavaScript 是一种动态、弱类型的脚本语言，用于在 Web 浏览器中实现交互性和动态内容。它是 Web 开发的基础，也是前端开发的核心语言。"),a("span",{class:"VPBadge tip badge"},"脚本语言")]),a("a",{href:"https://www.typescriptlang.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"TypeScript")]),a("p",{class:"desc"},"TypeScript 是 JavaScript 的一个超集，添加了静态类型检查和其他高级功能，使得代码更加可靠和可维护。它在前端开发中得到广泛应用，尤其在 React 项目中。"),a("span",{class:"VPBadge tip badge"},"静态类型")]),a("a",{href:"https://webkit.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webkit.org/wp-content/themes/webkit/images/webkit.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"webkit")]),a("p",{class:"desc"},"WebKit 是一个开源的浏览器引擎，用于渲染网页内容。它是 Safari 浏览器的引擎，也是 Chrome 浏览器的一部分。WebKit 提供了高性能的网页渲染和交互功能，是构建现代 Web 应用的基础。"),a("span",{class:"VPBadge tip badge"},"浏览器引擎")]),a("a",{href:"https://nodejs.org/zh-cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Node.js")]),a("p",{class:"desc"},"Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端执行 JavaScript 代码。它允许开发者使用 JavaScript 构建高性能的网络应用程序，如服务器端渲染、实时应用程序和 API 服务。"),a("span",{class:"VPBadge tip badge"},"服务器端")])])],-1),a("h2",{id:"_2-核心-ui-框架",tabindex:"-1"},[s("2. 核心 UI 框架 "),a("a",{class:"header-anchor",href:"#_2-核心-ui-框架","aria-label":"Permalink to “2. 核心 UI 框架”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://react.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React")]),a("p",{class:"desc"},"React 是 Facebook 开发的用于构建用户界面的声明式 JavaScript 库，采用组件化架构，支持服务器端渲染和客户端交互。它允许开发者设计简单的视图，并根据数据变化高效更新渲染组件。"),a("span",{class:"VPBadge tip badge"},"声明式")]),a("a",{href:"https://vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue")]),a("p",{class:"desc"},"Vue.js 是一套用于构建用户界面的渐进式框架，采用组件化架构，支持服务器端渲染和客户端交互。强调易用性和高性能。其生态包含官方路由 (Vue Router) 和状态管理库 (Pinia)。"),a("span",{class:"VPBadge tip badge"},"渐进式")]),a("a",{href:"https://svelte.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Svelte")]),a("p",{class:"desc"},"Svelte 是一种全新的构建 Web 应用的方式，作为编译器将声明式组件转换为高效且能直接操作 DOM 的 JavaScript 代码，运行时开销极小。它强调组件化开发，开发者可以直接在 HTML 中编写组件逻辑，无需额外的运行时支持。"),a("span",{class:"VPBadge tip badge"},"编译时")])])],-1),a("h2",{id:"_3-样式与-ui-组件库-styling-component-libraries",tabindex:"-1"},[s("3. 样式与 UI 组件库 (Styling & Component Libraries) "),a("a",{class:"header-anchor",href:"#_3-样式与-ui-组件库-styling-component-libraries","aria-label":"Permalink to “3. 样式与 UI 组件库 (Styling & Component Libraries)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://tailwindcss.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/1200px-Tailwind_CSS_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Tailwind CSS")]),a("p",{class:"desc"},"现代前端首选的实用优先 (Utility-first) CSS 框架，通过类名组合实现样式，无需编写自定义 CSS。"),a("span",{class:"VPBadge tip badge"},"实用优先")]),a("a",{href:"https://daisyui.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://img.daisyui.com/images/daisyui/mark.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Daisy UI")]),a("p",{class:"desc"},"是一个基于 Tailwind CSS 的热门开源UI组件库，通过添加语义化类名（如 btn, card）来解决 Tailwind 冗长的代码问题，能帮开发者用更少的代码、更快地构建出干净、美观、响应式且支持主题自定义的 Web 界面。"),a("span",{class:"VPBadge tip badge"},"tailwind 插件")]),a("a",{href:"https://ui.shadcn.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://ui.shadcn.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"shadcn/ui")]),a("p",{class:"desc"},"shadcn/ui 不是一个传统的组件库，而是一种构建你自己的组件库的方法。它提供了一套精心设计、可访问的组件和代码分发平台，兼容你喜欢的框架和 AI 模型。"),a("span",{class:"VPBadge tip badge"},"组件原语")]),a("a",{href:"https://ant.design/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Ant Design")]),a("p",{class:"desc"},"AI 友好的「设计系统」，让美与智能并进，让工作充满「灵感」与「快乐」。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://element-plus.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://element-plus.org/images/element-plus-logo-small.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"element-plus")]),a("p",{class:"desc"},"Element Plus 是一个基于 Vue 3 设计的组件库，提供丰富的组件和样式，常用于构建后台管理系统。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://vuetifyjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://vuetifyjs.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vuetify")]),a("p",{class:"desc"},"为 Vue 3 设计的成熟 UI 库，常用于构建后台管理系统，提供丰富的组件和样式。"),a("span",{class:"VPBadge tip badge"},"组件库")])])],-1),a("h2",{id:"_4-路由与状态管理",tabindex:"-1"},[s("4. 路由与状态管理 "),a("a",{class:"header-anchor",href:"#_4-路由与状态管理","aria-label":"Permalink to “4. 路由与状态管理”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://reactrouter.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://reactrouter.com/favicon-dark.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Router")]),a("p",{class:"desc"},"React Router 是 React 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://router.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue Router")]),a("p",{class:"desc"},"Vue.js 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://github.com/pmndrs/zustand",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Zustand")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Redux 的现代化、极简主义精神继承者（自上而下的全局 Store），提供了一种简单的方式来管理全局状态。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://github.com/pmndrs/jotai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Jotai")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Recoil 的轻量化、高性能替代者（自下而上的原子化状态）。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://redux.js.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://redux.js.org/img/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Redux")]),a("p",{class:"desc"},"Redux 是一个预测性的状态容器，用于管理应用的全局状态，提供一致的状态更新和可预测的行为。"),a("span",{class:"VPBadge tip badge"},"不再推荐")]),a("a",{href:"https://pinia.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://pinia.vuejs.org/logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Pinia")]),a("p",{class:"desc"},"Vue.js 官方推荐的状态管理库，基于 Vue 3 Composition API 设计，提供简单、灵活的状态管理解决方案。"),a("span",{class:"VPBadge tip badge"},"状态管理")])])],-1),e('React 状态管理库横向对比分析：
| 特性/库 | Zustand 大部分项目的首选 | Jotai 编辑比较频繁的建议使用 | Redux 不再推荐 |
|---|
| 核心思想 | 自上而下的全局状态管理 | 自下而上的原子化状态管理 | 单向数据流、集中式全局状态 |
| 适用场景 | 中大型应用全局状态、偏好轻量方案 | 组件间状态共享、细粒度更新、贴近React思维 | 超大型复杂应用、强可预测性需求 |
| 学习曲线 | 平缓，API 简洁 | 平缓，原子概念容易理解 | 陡峭，需理解中间件、Redux Toolkit 等 |
| 代码风格 | 简洁，类似轻量版 Redux | 原子化，分散定义状态 | 相对冗长，需定义 Action、Reducer |
| 性能优化 | 支持组件精准订阅状态 | 天然细粒度更新，避免不必要重渲染 | 需配合 Reselect 等工具优化 |
| 社区生态 | 生态稳定，常用插件完善 | 生态活跃，适合实验性场景 | 生态庞大，工具链成熟 |
5. 数据获取与 API 集成 (Data Fetching & API)
',3),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Fetch API")]),a("p",{class:"desc"},"Fetch 是一个基于 Promise 的现代 JavaScript API，用于在浏览器中发起 HTTP 请求（AJAX），是 XMLHttpRequest (XHR) 的更简洁、更强大的替代方案。它允许页面在不重载的情况下从服务器获取数据，支持 GET、POST 等请求方法，并广泛应用于处理网络数据交互。"),a("span",{class:"VPBadge tip badge"},"原生 API")]),a("a",{href:"https://axios-http.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://axios-http.com/assets/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Axios")]),a("p",{class:"desc"},"Axios 是一个基于 Promise 的 HTTP 请求库，可运行在浏览器和 Node.js 环境中。它支持拦截请求和响应、转换数据、取消请求等功能，是前端开发中常用的 HTTP 请求库。"),a("span",{class:"VPBadge tip badge"},"全能请求库")]),a("a",{href:"https://swr.vercel.app/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://swr.vercel.app/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"SWR")]),a("p",{class:"desc"},'SWR 是由 Vercel 开发的一个基于 React Hooks 的轻量级数据请求库。它基于 "stale-while-revalidate" 策略，先返回缓存数据，再在后台请求最新数据，保证 UI 快速响应且数据保持更新。特点：极简主义，越轻越好，开箱即用，专注于 HTTP 缓存策略。'),a("span",{class:"VPBadge tip badge"},"按需验证缓存")]),a("a",{href:"https://tanstack.com/query/latest",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://tanstack.com/favicon-32x32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Query")]),a("p",{class:"desc"},"React Query (现更名为 TanStack Query) 是一个功能强大的 React 服务端状态管理库。它专注于处理异步数据的获取、缓存、同步和更新，开箱即用地简化了 API 请求、缓存处理、数据过期更新和加载/错误状态管理。特点：功能主义大而全，不仅是 HTTP，可用于任何异步 Promise 管理。"),a("span",{class:"VPBadge tip badge"},"服务端状态管理")]),a("a",{href:"https://graphql.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://graphql.org/_next/static/media/logo-blurred.94c9eff4.webp",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GraphQL")]),a("p",{class:"desc"},"GraphQL 是一个用于 API 的查询语言、一种描述请求数据方法的语法，通常用于客户端从服务端加载数据，主要是为了解决 REST API 中过度获取和获取不足的问题。"),a("span",{class:"VPBadge tip badge"},"按需声明式查询")]),a("a",{href:"https://trpc.io/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://trpc.io/img/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"tRPC")]),a("p",{class:"desc"},"tRPC 是基于插件化理念设计的一款支持多语言、高性能的 RPC 开发框架，旨在无需定义专门 API Schema（如 Swagger/GraphQL）的情况下，实现前后端无缝、全栈类型安全的 API 调用。它让前端能像调用本地函数一样调用后端远程函数，大大提升开发效率。"),a("span",{class:"VPBadge tip badge"},"端到端类型安全")])])],-1),e('| 技术/工具 | 核心定位与特征 | 核心优势 (能解决什么痛点) | 局限性与妥协 | 最佳实践与适用场景 |
|---|
Fetch API 通信基建 | 浏览器原生标准协议 | 无需安装第三方包、天然融入现代 Web 标准。在 Edge Runtime 环境下表现最佳。 | 默认不抛出 HTTP 错误状态码（需手动拦截）；处理 JSON 和参数拼接繁琐、缺少请求取消机制。 | 极简场景/底层封装：不需要复杂拦截器的轻量级页面；作为更高级架构的底层引擎，如 Next.js 内部的 fetch 扩展。 |
Axios
通信基建 | 全能型同构请求体 | API 极其友好、请求/响应拦截器（处理全局 Token、统一错误提示的利器）、自动转换 JSON 数据。 | 增加了一定的打包体积；基于 XHR（尽管现代版本已支持 fetch 底层），在某些最新的服务端边缘计算环境中可能受限。 | 重度依赖 RESTful 的项目：需要精细化控制请求头、进行全局鉴权拦截、处理复杂文件上传的传统全栈或中后台系统。 |
SWR
状态调度 | 按需验证的轻量级缓存 | 极致的轻量与简单；焦点聚焦时自动刷新、网络恢复时重试；带来极佳的“UI 瞬间响应”体验。 | 面对极其复杂的异步状态流转（如互相依赖的串行请求、精细的离线修改回滚）时，显得心有余而力不足。 | 内容驱动型应用：注重阅读体验的博客站点、数据实时性要求中等的数据看板。配置极简，非常适合快速迭代的产品。 |
React Query
状态调度 | 大而全的异步状态接管 | 强大的缓存生命周期管理；优雅的 Mutations（数据变更）处理与乐观更新；极好的开发调试工具。 | 学习曲线较陡峭；默认配置下有时会导致意料之外的组件重渲染；体积相对较大。 | 复杂交互型 SaaS / 强业务逻辑系统：需要处理大量表单提交、列表无限滚动、精细化缓存控制的重型单页应用（SPA）。 |
GraphQL 协议契约 | 声明式的图谱查询 | 彻底解决 Over-fetching；前端拥有极高的数据按需组合自由度；自带强类型的 Schema 文档。 | 后端开发成本极高（需编写大量 Resolver 函数）；容易产生 N+1 查询性能问题；HTTP 缓存机制难以直接利用。 | 多端复用型大中型产品：后端需要同时服务于 Web、iOS、Android 甚至第三方开发者；业务实体关系高度复杂的系统。 |
tRPC
协议契约 | 端到端的全栈类型推导 | 前后端类型零成本共享；重构时的代码安全性极高；完全不需要手写接口文档或 Schema。 | 强绑定 Node.js/TypeScript 技术栈；如果前端项目和后端代码没有在一个 Monorepo 中，威力大打折扣。 | 敏捷全栈/单人作战团队：采用 Node.js + 前端框架（React/Vue）构建的全栈项目。极度追求开发效率和产品迭代速度的团队。 |
现代 Web 数据流架构范式：
1、标准前后端分离架构：Axios + React Query（或 SWR）
- 适用场景： 异构系统（如前端使用 React/Vue，后端使用 Java/Go/Python 等非 JS 语言）；高度依赖传统 RESTful API 规范、需要精细化控制网络请求拦截器的中大型企业级项目。
- 架构机制：将网络请求的“底层通道”与“上层状态”严格解耦。Axios 专注于基础通信层的治理，负责全局请求头注入（如 Bearer Token）、统一的 HTTP 状态码拦截与静默错误上报；React Query / SWR 则专注于表现层的状态调度，接管数据的缓存生命周期、请求去重（Deduplication）以及乐观更新（Optimistic UI）。
- 工程价值：具备极高的稳健性与技术栈包容性。前后端边界清晰，互不干扰。
2、全栈类型安全架构：tRPC + React Query
- 适用场景： 采用 Monorepo 架构管理的纯 TypeScript/Node.js 全栈项目；追求敏捷开发、极速交付以及需要频繁进行业务重构的 SaaS 产品或内部系统。
- 架构机制：基于 TypeScript 的强类型推导系统，打通前后端数据流。tRPC 官方深度集成了 React Query（@trpc/react-query），在保留了完整的现代前端缓存调度能力的同时，彻底免去了手动维护 API 接口文档和 Schema 编译生成的中间环节。后端的类型变更会即刻反映为前端编译期的静态类型检查报错。
- 工程价值：极致的研发效能与结构安全性。对于专注于产品迭代与业务增长的 Node.js 全栈开发者而言，这种组合完美契合了“以更少投入获得更大收益”的工程哲学。它直接消灭了“接口联调”这一无效耗时环节，让开发者能将核心精力聚焦于产品逻辑本身。
3、多端数据聚合 BFF 架构：GraphQL + Apollo Client
- 适用场景： 数据来源庞杂且分散的大型业务系统；需要同时为多种不同客户端提供高灵活性 API，且前后端团队规模较大、需要高度并行的项目。
- 架构机制：引入 BFF（Backend For Frontend，服务于前端的后端）理念。GraphQL 作为中间件层，负责将底层分散的微服务、数据库或第三方 API 进行聚合与编排（Data Orchestration）。前端通过 Apollo Client 发起声明式查询，精准获取 UI 组件所需的数据切片，并利用 Apollo 强大的标准化缓存（Normalized Cache）管理复杂实体关系。
- 工程价值：彻底解决多端设备（Web、iOS、Android）面临的过度获取（Over-fetching）与碎片化接口治理问题，实现了数据消费端的高度自治。
',9),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://cn.vite.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://cn.vite.dev/logo-without-border.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vite")]),a("p",{class:"desc"},"Vite 是一款速度极快的前端构建工具，为下一代 Web 应用程序提供支持，它摒弃了“先打包，再启动”的模式，开启了“原生 ESM”开发的新时代。"),a("span",{class:"VPBadge tip badge"},"极速 ESM 构建")]),a("a",{href:"https://rsbuild.rs/zh/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.rspack.rs/rsbuild/favicon-128x128.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Rsbuild")]),a("p",{class:"desc"},"Rsbuild 是一个由字节跳动 Web Infra 团队开源、基于 Rust 语言编写的 Rspack 驱动的高性能构建工具。它专注于为 Web 项目提供开箱即用的开发体验，通过内置的高性能工具（如 SWC、Lightning CSS）实现极快的构建速度，并提供类似 Vite/Webpack 的零配置或低配置体验。"),a("span",{class:"VPBadge tip badge"},"Rust 高性能构建")]),a("a",{href:"https://nextjscn.org/docs/app/api-reference/turbopack",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Turbopack")]),a("p",{class:"desc"},"Turbopack 是由 Vercel 开发、基于 Rust 编写的高性能增量打包工具，专为 JavaScript 和 TypeScript 优化。它被设计为 Webpack 的继任者，旨在通过优化的机器代码和高度增量计算能力，提供比 Vite 快 10 倍、比 Webpack 快 700 倍的本地开发体验，主要内置于 Next.js。"),a("span",{class:"VPBadge tip badge"},"增量极速打包")]),a("a",{href:"https://webpack.docschina.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webpack.docschina.org/favicon.f326220248556af65f41.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Webpack")]),a("p",{class:"desc"},"Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它在内部构建依赖图，将项目中的各种资源（如 JS、CSS、图片、TypeScript 等）视为模块，并最终打包成浏览器可直接运行的静态文件。通过 Loader 和 Plugin，它能处理复杂的开发需求。"),a("span",{class:"VPBadge tip badge"},"经典模块打包")]),a("a",{href:"https://github.com/features/actions",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Actions")]),a("p",{class:"desc"},"GitHub Actions 是 GitHub 推出的持续集成和持续交付 (CI/CD) 平台，旨在帮助开发者自动执行软件开发工作流。它允许在代码仓库中直接定义自动化流程（如构建、测试、部署），支持事件触发（如提交代码），并提供虚拟机环境（Ubuntu、Windows、macOS）运行任务，使开发更高效。"),a("span",{class:"VPBadge tip badge"},"CI/CD 自动化")])])],-1),a("h2",{id:"_7-全栈框架",tabindex:"-1"},[s("7. 全栈框架 "),a("a",{class:"header-anchor",href:"#_7-全栈框架","aria-label":"Permalink to “7. 全栈框架”"},"")],-1),a("blockquote",null,[a("p",null,[a("strong",null,"同构元框架：Next.js、Nuxt"),s("，现代全栈开发倾向于使用“元框架”，它们模糊了客户端和服务器的界限，提供一体化的开发体验。")]),a("p",null,[a("strong",null,"企业级 Node 服务端框架：NestJS"),s("，一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架。")])],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://nextjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nextjs.org/favicon.ico?favicon.3fc65821.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Next.js")]),a("p",{class:"desc"},"Next.js 是一个基于 React、Node.js 的全栈 Web 开发框架，由 Vercel 公司维护，专为生产环境设计。它通过内置的服务器端渲染 (SSR)、静态站点生成 (SSG) 和增量静态再生成 (ISR) 技术，解决了传统 React 应用的 SEO 优化差 和首屏加载慢的问题，是目前最受欢迎的 React 应用开发框架之一。"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nuxtjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nuxt.com/icon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Nuxt")]),a("p",{class:"desc"},"是一个基于 Vue.js 的开源、免费的 Web 开发元框架（Meta-framework），专为构建高性能的服务端渲染（SSR）、静态站点生成（SSG）和单页应用（SPA）而设计。它集成了 Vite、Vue 3 和 Nitro 服务端引擎，旨在简化开发流程，提供卓越的 SEO 优化和开发人员体验"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nestjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nestjs.com/favicon-32x32.a39d94f4.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"NestJS")]),a("p",{class:"desc"},"NestJS 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架."),a("span",{class:"VPBadge tip badge"},"企业级 Node 框架")])])],-1),e('| 对比维度 | Next.js | Nuxt | NestJS |
|---|
| 框架定位 | React 全栈框架
(Isomorphic Meta-framework) | Vue 全栈框架
(Isomorphic Meta-framework) | 企业级 Node.js 服务端框架
(Backend Framework) |
| 底层驱动 | Webpack / Turbopack
React Server Components | Vite / Nitro 引擎
Vue3 | Express / Fastify (底层可插拔)
纯 TypeScript |
| 核心工程特性 | 混合渲染 (SSR/SSG/ISR)
Server Actions (无缝 RPC)
边缘计算路由 | 混合渲染与预渲染
极致的自动导入 (Auto-imports)
开箱即用的模块化生态 | 依赖注入 (DI) / 控制反转 (IoC)
面向切面编程 (AOP)
强主张的模块化目录 |
| 数据流职责 | 视图层渲染、BFF (服务于前端的后端)、轻量级聚合 API。 | 视图层渲染、BFF (服务于前端的后端)、轻量级聚合 API。 | 纯后端业务逻辑处理、微服务通信与编排、统一 API 供应。 |
| 最佳业务场景 | 重 SEO 的 C 端产品 (电商、内容站); 敏捷迭代的 SaaS; 单仓库极速交付。 | 重交互体验的 Web 应用; Vue 技术团队的全栈转型; 独立开发者建站。 | 复杂领域驱动设计 (DDD) 系统; 多端复用的 API 中台; 庞大的微服务集群。 |
| 需规避的反模式 | 承载高并发 CPU 密集型计算; 极其复杂的跨服务分布式事务。 | 承载高并发 CPU 密集型计算; 极其复杂的跨服务分布式事务。 | 仅需极简 CRUD 的小型外包项目; 强依赖首屏 HTML 直出的纯展示网页。 |
| 团队协作模型 | 前端主导的敏捷全栈小队, 或追求“单兵作战”的极客团队。 | 前端主导的敏捷全栈小队, 或 Vue 生态重度依赖团队。 | 后端主导的中大型团队, 前后端物理分离的标准化开发流水线。 |
8. 部署与托管 (Deployment & Hosting)
',2),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://vercel.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.vercel.com/image/upload/front/favicon/vercel/apple-touch-icon-256x256.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vercel")]),a("p",{class:"desc"},"Vercel 是一个现代前端项目的理想部署平台，它零配置、支持自动部署和预览、拥有全球加速节点，广泛用于开源项目、个人作品集、企业网站等。 无论你是用React、Vue、Svelte 还是静态HTML，只需几步就可以将项目上线。"),a("span",{class:"VPBadge tip badge"},"前端边缘托管")]),a("a",{href:"https://www.netlify.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://www.netlify.com/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Netlify")]),a("p",{class:"desc"},"与 Vercel 类似，功能更全面：支持更多的框架和静态站点生成器，有表单处理、无服务器函数等功能，免费额度更大、还支持 A/B 测试和分析。Netlify 是一个基于云计算的网站部署和托管平台，专注于为开发者提供便捷的静态网站和Jamstack 应用部署服务。 它的核心优势在于将网站构建、部署、托管以及持续集成/ 持续部署（CI/CD）流程高度集成，极大地简化了开发和运维的复杂程度"),a("span",{class:"VPBadge tip badge"},"Jamstack 平台")]),a("a",{href:"https://pages.github.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Pages")]),a("p",{class:"desc"},"GitHub Pages 是一个由 GitHub 提供的、免费的静态网站托管服务。它允许用户直接从 GitHub 仓库（Repository）获取 HTML、CSS 和 JavaScript 文件，无需额外配置服务器即可快速部署个人主页、项目文档或博客。"),a("span",{class:"VPBadge tip badge"},"纯静态托管")])])],-1),a("h2",{id:"_9-学习资源与社区-learning-community",tabindex:"-1"},[s("9. 学习资源与社区 (Learning & Community) "),a("a",{class:"header-anchor",href:"#_9-学习资源与社区-learning-community","aria-label":"Permalink to “9. 学习资源与社区 (Learning & Community)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://javascriptweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"JavaScript Weekly")]),a("p",{class:"desc"},"每周分享最新的 JavaScript 相关技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://nodeweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Node Weekly")]),a("p",{class:"desc"},"每周分享最新的 Node.js 相关技术文章、库、工具和趋势。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://www.ruanyifeng.com/blog/weekly/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"阮一峰网络日志")]),a("p",{class:"desc"},"阮一峰的网络日志，每周五发布，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E6%97%A9%E8%AF%BB%E8%AF%BE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端早读课")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E5%B7%85",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之巅")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzIxMzExMjYwOQ==&action=getalbum&album_id=1369610438157369345#wechat_redirect",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"凹凸实验室")]),a("p",{class:"desc"},"蒲公英·JELLY技术周刊，由京东·凹凸实验室维护整理的技术周刊，从团队专注的研究技术方向出发，深入挖掘业界热点，聚焦技术动态。技术周刊内容分类主要包括如下：基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%85%A8",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端大全")]),a("p",{class:"desc"},"前端大全，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E7%A5%9E",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之神")]),a("p",{class:"desc"},"前端之神，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E7%A8%8B%E5%BA%8F%E5%91%98%E6%88%90%E9%95%BF%E6%8C%87%E5%8C%97",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"程序员成长指北")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%AD%97%E8%8A%82%E5%89%8D%E7%AB%AF-ByteFE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"ByteFE")]),a("p",{class:"desc"},"字节跳动前端团队维护的专业微信公众号，分享技术前沿、文章分享、实践干货等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%BB%8E%E8%BF%9B%E9%98%B6%E5%88%B0%E5%85%A5%E9%99%A2",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端从进阶到入院")]),a("p",{class:"desc"},"前端从进阶到入院，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://www.zhangxinxu.com/wordpress/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"张鑫旭-鑫空间-鑫生活")]),a("p",{class:"desc"},"张鑫旭的个人博客，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"网络博客")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E6%B7%98%E7%B3%BB%E5%89%8D%E7%AB%AF%E5%9B%A2%E9%98%9F",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"淘系前端团队")]),a("p",{class:"desc"},"淘宝前端团队，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")])])],-1)])])}const h=d(l,[["render",n]]);export{v as __pageData,h as default};
diff --git "a/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.Dq7Ydo7v.lean.js" "b/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.BBjcdRsJ.lean.js"
similarity index 99%
rename from "assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.Dq7Ydo7v.lean.js"
rename to "assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.BBjcdRsJ.lean.js"
index 141a7641..b8805404 100644
--- "a/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.Dq7Ydo7v.lean.js"
+++ "b/assets/01.\345\205\250\346\240\210_90.\345\267\245\345\205\267\344\270\216\350\265\204\346\272\220\346\216\250\350\215\220_90.\345\205\250\346\240\210\346\212\200\346\234\257\350\265\204\346\272\220\346\216\250\350\215\220.md.BBjcdRsJ.lean.js"
@@ -1 +1 @@
-import{_ as d,g as i,h as c,U as e,i as a,S as s}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const v=JSON.parse('{"title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","frontmatter":{"date":"2026-02-06T15:58:53.000Z","title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","permalink":"/growth/full-stack-resources","categories":["资源推荐"],"tags":["资源推荐","全栈"]},"headers":[],"relativePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md","filePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"}'),l={name:"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"};function n(o,t,r,p,_,m){return c(),i("div",null,[...t[0]||(t[0]=[e("",4),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/HTML",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"HTML")]),a("p",{class:"desc"},"HTML (HyperText Markup Language) 是用于创建网页的标准标记语言，用于描述网页的结构和内容。它使用标签来定义文档的不同部分，如标题、段落、图像、链接等。HTML 是构建 Web 页面的基础，也是所有前端开发的起点。"),a("span",{class:"VPBadge tip badge"},"标记语言")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/CSS",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"CSS")]),a("p",{class:"desc"},"CSS (Cascading Style Sheets) 是用于描述网页样式和布局的样式表语言。它定义了文档的外观，包括字体、颜色、间距、布局等。CSS 与 HTML 结合使用，实现了网页的结构与样式的分离，使得网页设计更加灵活和可维护。"),a("span",{class:"VPBadge tip badge"},"样式表")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/1200px-JavaScript-logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"JavaScript")]),a("p",{class:"desc"},"JavaScript 是一种动态、弱类型的脚本语言，用于在 Web 浏览器中实现交互性和动态内容。它是 Web 开发的基础，也是前端开发的核心语言。"),a("span",{class:"VPBadge tip badge"},"脚本语言")]),a("a",{href:"https://www.typescriptlang.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"TypeScript")]),a("p",{class:"desc"},"TypeScript 是 JavaScript 的一个超集，添加了静态类型检查和其他高级功能，使得代码更加可靠和可维护。它在前端开发中得到广泛应用，尤其在 React 项目中。"),a("span",{class:"VPBadge tip badge"},"静态类型")]),a("a",{href:"https://webkit.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webkit.org/wp-content/themes/webkit/images/webkit.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"webkit")]),a("p",{class:"desc"},"WebKit 是一个开源的浏览器引擎，用于渲染网页内容。它是 Safari 浏览器的引擎，也是 Chrome 浏览器的一部分。WebKit 提供了高性能的网页渲染和交互功能，是构建现代 Web 应用的基础。"),a("span",{class:"VPBadge tip badge"},"浏览器引擎")]),a("a",{href:"https://nodejs.org/zh-cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Node.js")]),a("p",{class:"desc"},"Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端执行 JavaScript 代码。它允许开发者使用 JavaScript 构建高性能的网络应用程序，如服务器端渲染、实时应用程序和 API 服务。"),a("span",{class:"VPBadge tip badge"},"服务器端")])])],-1),a("h2",{id:"_2-核心-ui-框架",tabindex:"-1"},[s("2. 核心 UI 框架 "),a("a",{class:"header-anchor",href:"#_2-核心-ui-框架","aria-label":"Permalink to “2. 核心 UI 框架”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://react.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React")]),a("p",{class:"desc"},"React 是 Facebook 开发的用于构建用户界面的声明式 JavaScript 库，采用组件化架构，支持服务器端渲染和客户端交互。它允许开发者设计简单的视图，并根据数据变化高效更新渲染组件。"),a("span",{class:"VPBadge tip badge"},"声明式")]),a("a",{href:"https://vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue")]),a("p",{class:"desc"},"Vue.js 是一套用于构建用户界面的渐进式框架，采用组件化架构，支持服务器端渲染和客户端交互。强调易用性和高性能。其生态包含官方路由 (Vue Router) 和状态管理库 (Pinia)。"),a("span",{class:"VPBadge tip badge"},"渐进式")]),a("a",{href:"https://svelte.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Svelte")]),a("p",{class:"desc"},"Svelte 是一种全新的构建 Web 应用的方式，作为编译器将声明式组件转换为高效且能直接操作 DOM 的 JavaScript 代码，运行时开销极小。它强调组件化开发，开发者可以直接在 HTML 中编写组件逻辑，无需额外的运行时支持。"),a("span",{class:"VPBadge tip badge"},"编译时")])])],-1),a("h2",{id:"_3-样式与-ui-组件库-styling-component-libraries",tabindex:"-1"},[s("3. 样式与 UI 组件库 (Styling & Component Libraries) "),a("a",{class:"header-anchor",href:"#_3-样式与-ui-组件库-styling-component-libraries","aria-label":"Permalink to “3. 样式与 UI 组件库 (Styling & Component Libraries)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://tailwindcss.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/1200px-Tailwind_CSS_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Tailwind CSS")]),a("p",{class:"desc"},"现代前端首选的实用优先 (Utility-first) CSS 框架，通过类名组合实现样式，无需编写自定义 CSS。"),a("span",{class:"VPBadge tip badge"},"实用优先")]),a("a",{href:"https://daisyui.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://img.daisyui.com/images/daisyui/mark.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Daisy UI")]),a("p",{class:"desc"},"是一个基于 Tailwind CSS 的热门开源UI组件库，通过添加语义化类名（如 btn, card）来解决 Tailwind 冗长的代码问题，能帮开发者用更少的代码、更快地构建出干净、美观、响应式且支持主题自定义的 Web 界面。"),a("span",{class:"VPBadge tip badge"},"tailwind 插件")]),a("a",{href:"https://ui.shadcn.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://ui.shadcn.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"shadcn/ui")]),a("p",{class:"desc"},"shadcn/ui 不是一个传统的组件库，而是一种构建你自己的组件库的方法。它提供了一套精心设计、可访问的组件和代码分发平台，兼容你喜欢的框架和 AI 模型。"),a("span",{class:"VPBadge tip badge"},"组件原语")]),a("a",{href:"https://ant.design/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Ant Design")]),a("p",{class:"desc"},"AI 友好的「设计系统」，让美与智能并进，让工作充满「灵感」与「快乐」。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://element-plus.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://element-plus.org/images/element-plus-logo-small.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"element-plus")]),a("p",{class:"desc"},"Element Plus 是一个基于 Vue 3 设计的组件库，提供丰富的组件和样式，常用于构建后台管理系统。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://vuetifyjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://vuetifyjs.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vuetify")]),a("p",{class:"desc"},"为 Vue 3 设计的成熟 UI 库，常用于构建后台管理系统，提供丰富的组件和样式。"),a("span",{class:"VPBadge tip badge"},"组件库")])])],-1),a("h2",{id:"_4-路由与状态管理",tabindex:"-1"},[s("4. 路由与状态管理 "),a("a",{class:"header-anchor",href:"#_4-路由与状态管理","aria-label":"Permalink to “4. 路由与状态管理”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://reactrouter.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://reactrouter.com/favicon-dark.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Router")]),a("p",{class:"desc"},"React Router 是 React 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://router.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue Router")]),a("p",{class:"desc"},"Vue.js 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://github.com/pmndrs/zustand",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Zustand")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Redux 的现代化、极简主义精神继承者（自上而下的全局 Store），提供了一种简单的方式来管理全局状态。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://github.com/pmndrs/jotai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Jotai")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Recoil 的轻量化、高性能替代者（自下而上的原子化状态）。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://redux.js.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://redux.js.org/img/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Redux")]),a("p",{class:"desc"},"Redux 是一个预测性的状态容器，用于管理应用的全局状态，提供一致的状态更新和可预测的行为。"),a("span",{class:"VPBadge tip badge"},"不再推荐")]),a("a",{href:"https://pinia.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://pinia.vuejs.org/logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Pinia")]),a("p",{class:"desc"},"Vue.js 官方推荐的状态管理库，基于 Vue 3 Composition API 设计，提供简单、灵活的状态管理解决方案。"),a("span",{class:"VPBadge tip badge"},"状态管理")])])],-1),e("",3),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Fetch API")]),a("p",{class:"desc"},"Fetch 是一个基于 Promise 的现代 JavaScript API，用于在浏览器中发起 HTTP 请求（AJAX），是 XMLHttpRequest (XHR) 的更简洁、更强大的替代方案。它允许页面在不重载的情况下从服务器获取数据，支持 GET、POST 等请求方法，并广泛应用于处理网络数据交互。"),a("span",{class:"VPBadge tip badge"},"原生 API")]),a("a",{href:"https://axios-http.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://axios-http.com/assets/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Axios")]),a("p",{class:"desc"},"Axios 是一个基于 Promise 的 HTTP 请求库，可运行在浏览器和 Node.js 环境中。它支持拦截请求和响应、转换数据、取消请求等功能，是前端开发中常用的 HTTP 请求库。"),a("span",{class:"VPBadge tip badge"},"全能请求库")]),a("a",{href:"https://swr.vercel.app/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://swr.vercel.app/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"SWR")]),a("p",{class:"desc"},'SWR 是由 Vercel 开发的一个基于 React Hooks 的轻量级数据请求库。它基于 "stale-while-revalidate" 策略，先返回缓存数据，再在后台请求最新数据，保证 UI 快速响应且数据保持更新。特点：极简主义，越轻越好，开箱即用，专注于 HTTP 缓存策略。'),a("span",{class:"VPBadge tip badge"},"按需验证缓存")]),a("a",{href:"https://tanstack.com/query/latest",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://tanstack.com/favicon-32x32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Query")]),a("p",{class:"desc"},"React Query (现更名为 TanStack Query) 是一个功能强大的 React 服务端状态管理库。它专注于处理异步数据的获取、缓存、同步和更新，开箱即用地简化了 API 请求、缓存处理、数据过期更新和加载/错误状态管理。特点：功能主义大而全，不仅是 HTTP，可用于任何异步 Promise 管理。"),a("span",{class:"VPBadge tip badge"},"服务端状态管理")]),a("a",{href:"https://graphql.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://graphql.org/_next/static/media/logo-blurred.94c9eff4.webp",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GraphQL")]),a("p",{class:"desc"},"GraphQL 是一个用于 API 的查询语言、一种描述请求数据方法的语法，通常用于客户端从服务端加载数据，主要是为了解决 REST API 中过度获取和获取不足的问题。"),a("span",{class:"VPBadge tip badge"},"按需声明式查询")]),a("a",{href:"https://trpc.io/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://trpc.io/img/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"tRPC")]),a("p",{class:"desc"},"tRPC 是基于插件化理念设计的一款支持多语言、高性能的 RPC 开发框架，旨在无需定义专门 API Schema（如 Swagger/GraphQL）的情况下，实现前后端无缝、全栈类型安全的 API 调用。它让前端能像调用本地函数一样调用后端远程函数，大大提升开发效率。"),a("span",{class:"VPBadge tip badge"},"端到端类型安全")])])],-1),e("",9),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://cn.vite.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://cn.vite.dev/logo-without-border.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vite")]),a("p",{class:"desc"},"Vite 是一款速度极快的前端构建工具，为下一代 Web 应用程序提供支持，它摒弃了“先打包，再启动”的模式，开启了“原生 ESM”开发的新时代。"),a("span",{class:"VPBadge tip badge"},"极速 ESM 构建")]),a("a",{href:"https://rsbuild.rs/zh/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.rspack.rs/rsbuild/favicon-128x128.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Rsbuild")]),a("p",{class:"desc"},"Rsbuild 是一个由字节跳动 Web Infra 团队开源、基于 Rust 语言编写的 Rspack 驱动的高性能构建工具。它专注于为 Web 项目提供开箱即用的开发体验，通过内置的高性能工具（如 SWC、Lightning CSS）实现极快的构建速度，并提供类似 Vite/Webpack 的零配置或低配置体验。"),a("span",{class:"VPBadge tip badge"},"Rust 高性能构建")]),a("a",{href:"https://nextjscn.org/docs/app/api-reference/turbopack",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Turbopack")]),a("p",{class:"desc"},"Turbopack 是由 Vercel 开发、基于 Rust 编写的高性能增量打包工具，专为 JavaScript 和 TypeScript 优化。它被设计为 Webpack 的继任者，旨在通过优化的机器代码和高度增量计算能力，提供比 Vite 快 10 倍、比 Webpack 快 700 倍的本地开发体验，主要内置于 Next.js。"),a("span",{class:"VPBadge tip badge"},"增量极速打包")]),a("a",{href:"https://webpack.docschina.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webpack.docschina.org/favicon.f326220248556af65f41.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Webpack")]),a("p",{class:"desc"},"Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它在内部构建依赖图，将项目中的各种资源（如 JS、CSS、图片、TypeScript 等）视为模块，并最终打包成浏览器可直接运行的静态文件。通过 Loader 和 Plugin，它能处理复杂的开发需求。"),a("span",{class:"VPBadge tip badge"},"经典模块打包")]),a("a",{href:"https://github.com/features/actions",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Actions")]),a("p",{class:"desc"},"GitHub Actions 是 GitHub 推出的持续集成和持续交付 (CI/CD) 平台，旨在帮助开发者自动执行软件开发工作流。它允许在代码仓库中直接定义自动化流程（如构建、测试、部署），支持事件触发（如提交代码），并提供虚拟机环境（Ubuntu、Windows、macOS）运行任务，使开发更高效。"),a("span",{class:"VPBadge tip badge"},"CI/CD 自动化")])])],-1),a("h2",{id:"_7-全栈框架",tabindex:"-1"},[s("7. 全栈框架 "),a("a",{class:"header-anchor",href:"#_7-全栈框架","aria-label":"Permalink to “7. 全栈框架”"},"")],-1),a("blockquote",null,[a("p",null,[a("strong",null,"同构元框架：Next.js、Nuxt"),s("，现代全栈开发倾向于使用“元框架”，它们模糊了客户端和服务器的界限，提供一体化的开发体验。")]),a("p",null,[a("strong",null,"企业级 Node 服务端框架：NestJS"),s("，一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架。")])],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://nextjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nextjs.org/favicon.ico?favicon.3fc65821.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Next.js")]),a("p",{class:"desc"},"Next.js 是一个基于 React、Node.js 的全栈 Web 开发框架，由 Vercel 公司维护，专为生产环境设计。它通过内置的服务器端渲染 (SSR)、静态站点生成 (SSG) 和增量静态再生成 (ISR) 技术，解决了传统 React 应用的 SEO 优化差 和首屏加载慢的问题，是目前最受欢迎的 React 应用开发框架之一。"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nuxtjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nuxt.com/icon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Nuxt")]),a("p",{class:"desc"},"是一个基于 Vue.js 的开源、免费的 Web 开发元框架（Meta-framework），专为构建高性能的服务端渲染（SSR）、静态站点生成（SSG）和单页应用（SPA）而设计。它集成了 Vite、Vue 3 和 Nitro 服务端引擎，旨在简化开发流程，提供卓越的 SEO 优化和开发人员体验"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nestjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nestjs.com/favicon-32x32.a39d94f4.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"NestJS")]),a("p",{class:"desc"},"NestJS 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架."),a("span",{class:"VPBadge tip badge"},"企业级 Node 框架")])])],-1),e("",2),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://vercel.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.vercel.com/image/upload/front/favicon/vercel/apple-touch-icon-256x256.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vercel")]),a("p",{class:"desc"},"Vercel 是一个现代前端项目的理想部署平台，它零配置、支持自动部署和预览、拥有全球加速节点，广泛用于开源项目、个人作品集、企业网站等。 无论你是用React、Vue、Svelte 还是静态HTML，只需几步就可以将项目上线。"),a("span",{class:"VPBadge tip badge"},"前端边缘托管")]),a("a",{href:"https://www.netlify.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://www.netlify.com/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Netlify")]),a("p",{class:"desc"},"与 Vercel 类似，功能更全面：支持更多的框架和静态站点生成器，有表单处理、无服务器函数等功能，免费额度更大、还支持 A/B 测试和分析。Netlify 是一个基于云计算的网站部署和托管平台，专注于为开发者提供便捷的静态网站和Jamstack 应用部署服务。 它的核心优势在于将网站构建、部署、托管以及持续集成/ 持续部署（CI/CD）流程高度集成，极大地简化了开发和运维的复杂程度"),a("span",{class:"VPBadge tip badge"},"Jamstack 平台")]),a("a",{href:"https://pages.github.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Pages")]),a("p",{class:"desc"},"GitHub Pages 是一个由 GitHub 提供的、免费的静态网站托管服务。它允许用户直接从 GitHub 仓库（Repository）获取 HTML、CSS 和 JavaScript 文件，无需额外配置服务器即可快速部署个人主页、项目文档或博客。"),a("span",{class:"VPBadge tip badge"},"纯静态托管")])])],-1),a("h2",{id:"_9-学习资源与社区-learning-community",tabindex:"-1"},[s("9. 学习资源与社区 (Learning & Community) "),a("a",{class:"header-anchor",href:"#_9-学习资源与社区-learning-community","aria-label":"Permalink to “9. 学习资源与社区 (Learning & Community)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://javascriptweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"JavaScript Weekly")]),a("p",{class:"desc"},"每周分享最新的 JavaScript 相关技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://nodeweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Node Weekly")]),a("p",{class:"desc"},"每周分享最新的 Node.js 相关技术文章、库、工具和趋势。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://www.ruanyifeng.com/blog/weekly/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"阮一峰网络日志")]),a("p",{class:"desc"},"阮一峰的网络日志，每周五发布，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E6%97%A9%E8%AF%BB%E8%AF%BE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端早读课")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E5%B7%85",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之巅")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzIxMzExMjYwOQ==&action=getalbum&album_id=1369610438157369345#wechat_redirect",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"凹凸实验室")]),a("p",{class:"desc"},"蒲公英·JELLY技术周刊，由京东·凹凸实验室维护整理的技术周刊，从团队专注的研究技术方向出发，深入挖掘业界热点，聚焦技术动态。技术周刊内容分类主要包括如下：基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%85%A8",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端大全")]),a("p",{class:"desc"},"前端大全，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E7%A5%9E",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之神")]),a("p",{class:"desc"},"前端之神，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E7%A8%8B%E5%BA%8F%E5%91%98%E6%88%90%E9%95%BF%E6%8C%87%E5%8C%97",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"程序员成长指北")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%AD%97%E8%8A%82%E5%89%8D%E7%AB%AF-ByteFE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"ByteFE")]),a("p",{class:"desc"},"字节跳动前端团队维护的专业微信公众号，分享技术前沿、文章分享、实践干货等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%BB%8E%E8%BF%9B%E9%98%B6%E5%88%B0%E5%85%A5%E9%99%A2",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端从进阶到入院")]),a("p",{class:"desc"},"前端从进阶到入院，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://www.zhangxinxu.com/wordpress/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"张鑫旭-鑫空间-鑫生活")]),a("p",{class:"desc"},"张鑫旭的个人博客，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"网络博客")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E6%B7%98%E7%B3%BB%E5%89%8D%E7%AB%AF%E5%9B%A2%E9%98%9F",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"淘系前端团队")]),a("p",{class:"desc"},"淘宝前端团队，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")])])],-1)])])}const h=d(l,[["render",n]]);export{v as __pageData,h as default};
+import{_ as d,g as i,h as c,U as e,i as a,S as s}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const v=JSON.parse('{"title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","frontmatter":{"date":"2026-02-06T15:58:53.000Z","title":"全栈技术资源推荐","description":"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。","permalink":"/growth/full-stack-resources","categories":["资源推荐"],"tags":["资源推荐","全栈"]},"headers":[],"relativePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md","filePath":"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"}'),l={name:"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md"};function n(o,t,r,p,_,m){return c(),i("div",null,[...t[0]||(t[0]=[e("",4),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/HTML",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"HTML")]),a("p",{class:"desc"},"HTML (HyperText Markup Language) 是用于创建网页的标准标记语言，用于描述网页的结构和内容。它使用标签来定义文档的不同部分，如标题、段落、图像、链接等。HTML 是构建 Web 页面的基础，也是所有前端开发的起点。"),a("span",{class:"VPBadge tip badge"},"标记语言")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/CSS",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"CSS")]),a("p",{class:"desc"},"CSS (Cascading Style Sheets) 是用于描述网页样式和布局的样式表语言。它定义了文档的外观，包括字体、颜色、间距、布局等。CSS 与 HTML 结合使用，实现了网页的结构与样式的分离，使得网页设计更加灵活和可维护。"),a("span",{class:"VPBadge tip badge"},"样式表")]),a("a",{href:"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/1200px-JavaScript-logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"JavaScript")]),a("p",{class:"desc"},"JavaScript 是一种动态、弱类型的脚本语言，用于在 Web 浏览器中实现交互性和动态内容。它是 Web 开发的基础，也是前端开发的核心语言。"),a("span",{class:"VPBadge tip badge"},"脚本语言")]),a("a",{href:"https://www.typescriptlang.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"TypeScript")]),a("p",{class:"desc"},"TypeScript 是 JavaScript 的一个超集，添加了静态类型检查和其他高级功能，使得代码更加可靠和可维护。它在前端开发中得到广泛应用，尤其在 React 项目中。"),a("span",{class:"VPBadge tip badge"},"静态类型")]),a("a",{href:"https://webkit.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webkit.org/wp-content/themes/webkit/images/webkit.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"webkit")]),a("p",{class:"desc"},"WebKit 是一个开源的浏览器引擎，用于渲染网页内容。它是 Safari 浏览器的引擎，也是 Chrome 浏览器的一部分。WebKit 提供了高性能的网页渲染和交互功能，是构建现代 Web 应用的基础。"),a("span",{class:"VPBadge tip badge"},"浏览器引擎")]),a("a",{href:"https://nodejs.org/zh-cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Node.js")]),a("p",{class:"desc"},"Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端执行 JavaScript 代码。它允许开发者使用 JavaScript 构建高性能的网络应用程序，如服务器端渲染、实时应用程序和 API 服务。"),a("span",{class:"VPBadge tip badge"},"服务器端")])])],-1),a("h2",{id:"_2-核心-ui-框架",tabindex:"-1"},[s("2. 核心 UI 框架 "),a("a",{class:"header-anchor",href:"#_2-核心-ui-框架","aria-label":"Permalink to “2. 核心 UI 框架”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://react.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React")]),a("p",{class:"desc"},"React 是 Facebook 开发的用于构建用户界面的声明式 JavaScript 库，采用组件化架构，支持服务器端渲染和客户端交互。它允许开发者设计简单的视图，并根据数据变化高效更新渲染组件。"),a("span",{class:"VPBadge tip badge"},"声明式")]),a("a",{href:"https://vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue")]),a("p",{class:"desc"},"Vue.js 是一套用于构建用户界面的渐进式框架，采用组件化架构，支持服务器端渲染和客户端交互。强调易用性和高性能。其生态包含官方路由 (Vue Router) 和状态管理库 (Pinia)。"),a("span",{class:"VPBadge tip badge"},"渐进式")]),a("a",{href:"https://svelte.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Svelte")]),a("p",{class:"desc"},"Svelte 是一种全新的构建 Web 应用的方式，作为编译器将声明式组件转换为高效且能直接操作 DOM 的 JavaScript 代码，运行时开销极小。它强调组件化开发，开发者可以直接在 HTML 中编写组件逻辑，无需额外的运行时支持。"),a("span",{class:"VPBadge tip badge"},"编译时")])])],-1),a("h2",{id:"_3-样式与-ui-组件库-styling-component-libraries",tabindex:"-1"},[s("3. 样式与 UI 组件库 (Styling & Component Libraries) "),a("a",{class:"header-anchor",href:"#_3-样式与-ui-组件库-styling-component-libraries","aria-label":"Permalink to “3. 样式与 UI 组件库 (Styling & Component Libraries)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://tailwindcss.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Tailwind_CSS_Logo.svg/1200px-Tailwind_CSS_Logo.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Tailwind CSS")]),a("p",{class:"desc"},"现代前端首选的实用优先 (Utility-first) CSS 框架，通过类名组合实现样式，无需编写自定义 CSS。"),a("span",{class:"VPBadge tip badge"},"实用优先")]),a("a",{href:"https://daisyui.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://img.daisyui.com/images/daisyui/mark.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Daisy UI")]),a("p",{class:"desc"},"是一个基于 Tailwind CSS 的热门开源UI组件库，通过添加语义化类名（如 btn, card）来解决 Tailwind 冗长的代码问题，能帮开发者用更少的代码、更快地构建出干净、美观、响应式且支持主题自定义的 Web 界面。"),a("span",{class:"VPBadge tip badge"},"tailwind 插件")]),a("a",{href:"https://ui.shadcn.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://ui.shadcn.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"shadcn/ui")]),a("p",{class:"desc"},"shadcn/ui 不是一个传统的组件库，而是一种构建你自己的组件库的方法。它提供了一套精心设计、可访问的组件和代码分发平台，兼容你喜欢的框架和 AI 模型。"),a("span",{class:"VPBadge tip badge"},"组件原语")]),a("a",{href:"https://ant.design/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Ant Design")]),a("p",{class:"desc"},"AI 友好的「设计系统」，让美与智能并进，让工作充满「灵感」与「快乐」。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://element-plus.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://element-plus.org/images/element-plus-logo-small.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"element-plus")]),a("p",{class:"desc"},"Element Plus 是一个基于 Vue 3 设计的组件库，提供丰富的组件和样式，常用于构建后台管理系统。"),a("span",{class:"VPBadge tip badge"},"组件库")]),a("a",{href:"https://vuetifyjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://vuetifyjs.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vuetify")]),a("p",{class:"desc"},"为 Vue 3 设计的成熟 UI 库，常用于构建后台管理系统，提供丰富的组件和样式。"),a("span",{class:"VPBadge tip badge"},"组件库")])])],-1),a("h2",{id:"_4-路由与状态管理",tabindex:"-1"},[s("4. 路由与状态管理 "),a("a",{class:"header-anchor",href:"#_4-路由与状态管理","aria-label":"Permalink to “4. 路由与状态管理”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://reactrouter.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://reactrouter.com/favicon-dark.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Router")]),a("p",{class:"desc"},"React Router 是 React 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://router.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vue Router")]),a("p",{class:"desc"},"Vue.js 官方的路由管理器，用于构建单页应用 (SPA)，提供动态路由匹配、嵌套路由、路由守卫等功能。"),a("span",{class:"VPBadge tip badge"},"路由管理器")]),a("a",{href:"https://github.com/pmndrs/zustand",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Zustand")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Redux 的现代化、极简主义精神继承者（自上而下的全局 Store），提供了一种简单的方式来管理全局状态。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://github.com/pmndrs/jotai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://avatars.githubusercontent.com/u/45790596?s=48&v=4",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Jotai")]),a("p",{class:"desc"},"pmndrs 社区出品，是 Recoil 的轻量化、高性能替代者（自下而上的原子化状态）。"),a("span",{class:"VPBadge tip badge"},"状态管理")]),a("a",{href:"https://redux.js.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://redux.js.org/img/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Redux")]),a("p",{class:"desc"},"Redux 是一个预测性的状态容器，用于管理应用的全局状态，提供一致的状态更新和可预测的行为。"),a("span",{class:"VPBadge tip badge"},"不再推荐")]),a("a",{href:"https://pinia.vuejs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://pinia.vuejs.org/logo.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Pinia")]),a("p",{class:"desc"},"Vue.js 官方推荐的状态管理库，基于 Vue 3 Composition API 设计，提供简单、灵活的状态管理解决方案。"),a("span",{class:"VPBadge tip badge"},"状态管理")])])],-1),e("",3),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Fetch API")]),a("p",{class:"desc"},"Fetch 是一个基于 Promise 的现代 JavaScript API，用于在浏览器中发起 HTTP 请求（AJAX），是 XMLHttpRequest (XHR) 的更简洁、更强大的替代方案。它允许页面在不重载的情况下从服务器获取数据，支持 GET、POST 等请求方法，并广泛应用于处理网络数据交互。"),a("span",{class:"VPBadge tip badge"},"原生 API")]),a("a",{href:"https://axios-http.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://axios-http.com/assets/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Axios")]),a("p",{class:"desc"},"Axios 是一个基于 Promise 的 HTTP 请求库，可运行在浏览器和 Node.js 环境中。它支持拦截请求和响应、转换数据、取消请求等功能，是前端开发中常用的 HTTP 请求库。"),a("span",{class:"VPBadge tip badge"},"全能请求库")]),a("a",{href:"https://swr.vercel.app/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://swr.vercel.app/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"SWR")]),a("p",{class:"desc"},'SWR 是由 Vercel 开发的一个基于 React Hooks 的轻量级数据请求库。它基于 "stale-while-revalidate" 策略，先返回缓存数据，再在后台请求最新数据，保证 UI 快速响应且数据保持更新。特点：极简主义，越轻越好，开箱即用，专注于 HTTP 缓存策略。'),a("span",{class:"VPBadge tip badge"},"按需验证缓存")]),a("a",{href:"https://tanstack.com/query/latest",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://tanstack.com/favicon-32x32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"React Query")]),a("p",{class:"desc"},"React Query (现更名为 TanStack Query) 是一个功能强大的 React 服务端状态管理库。它专注于处理异步数据的获取、缓存、同步和更新，开箱即用地简化了 API 请求、缓存处理、数据过期更新和加载/错误状态管理。特点：功能主义大而全，不仅是 HTTP，可用于任何异步 Promise 管理。"),a("span",{class:"VPBadge tip badge"},"服务端状态管理")]),a("a",{href:"https://graphql.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://graphql.org/_next/static/media/logo-blurred.94c9eff4.webp",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GraphQL")]),a("p",{class:"desc"},"GraphQL 是一个用于 API 的查询语言、一种描述请求数据方法的语法，通常用于客户端从服务端加载数据，主要是为了解决 REST API 中过度获取和获取不足的问题。"),a("span",{class:"VPBadge tip badge"},"按需声明式查询")]),a("a",{href:"https://trpc.io/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://trpc.io/img/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"tRPC")]),a("p",{class:"desc"},"tRPC 是基于插件化理念设计的一款支持多语言、高性能的 RPC 开发框架，旨在无需定义专门 API Schema（如 Swagger/GraphQL）的情况下，实现前后端无缝、全栈类型安全的 API 调用。它让前端能像调用本地函数一样调用后端远程函数，大大提升开发效率。"),a("span",{class:"VPBadge tip badge"},"端到端类型安全")])])],-1),e("",9),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://cn.vite.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://cn.vite.dev/logo-without-border.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vite")]),a("p",{class:"desc"},"Vite 是一款速度极快的前端构建工具，为下一代 Web 应用程序提供支持，它摒弃了“先打包，再启动”的模式，开启了“原生 ESM”开发的新时代。"),a("span",{class:"VPBadge tip badge"},"极速 ESM 构建")]),a("a",{href:"https://rsbuild.rs/zh/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.rspack.rs/rsbuild/favicon-128x128.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Rsbuild")]),a("p",{class:"desc"},"Rsbuild 是一个由字节跳动 Web Infra 团队开源、基于 Rust 语言编写的 Rspack 驱动的高性能构建工具。它专注于为 Web 项目提供开箱即用的开发体验，通过内置的高性能工具（如 SWC、Lightning CSS）实现极快的构建速度，并提供类似 Vite/Webpack 的零配置或低配置体验。"),a("span",{class:"VPBadge tip badge"},"Rust 高性能构建")]),a("a",{href:"https://nextjscn.org/docs/app/api-reference/turbopack",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Turbopack")]),a("p",{class:"desc"},"Turbopack 是由 Vercel 开发、基于 Rust 编写的高性能增量打包工具，专为 JavaScript 和 TypeScript 优化。它被设计为 Webpack 的继任者，旨在通过优化的机器代码和高度增量计算能力，提供比 Vite 快 10 倍、比 Webpack 快 700 倍的本地开发体验，主要内置于 Next.js。"),a("span",{class:"VPBadge tip badge"},"增量极速打包")]),a("a",{href:"https://webpack.docschina.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://webpack.docschina.org/favicon.f326220248556af65f41.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Webpack")]),a("p",{class:"desc"},"Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它在内部构建依赖图，将项目中的各种资源（如 JS、CSS、图片、TypeScript 等）视为模块，并最终打包成浏览器可直接运行的静态文件。通过 Loader 和 Plugin，它能处理复杂的开发需求。"),a("span",{class:"VPBadge tip badge"},"经典模块打包")]),a("a",{href:"https://github.com/features/actions",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Actions")]),a("p",{class:"desc"},"GitHub Actions 是 GitHub 推出的持续集成和持续交付 (CI/CD) 平台，旨在帮助开发者自动执行软件开发工作流。它允许在代码仓库中直接定义自动化流程（如构建、测试、部署），支持事件触发（如提交代码），并提供虚拟机环境（Ubuntu、Windows、macOS）运行任务，使开发更高效。"),a("span",{class:"VPBadge tip badge"},"CI/CD 自动化")])])],-1),a("h2",{id:"_7-全栈框架",tabindex:"-1"},[s("7. 全栈框架 "),a("a",{class:"header-anchor",href:"#_7-全栈框架","aria-label":"Permalink to “7. 全栈框架”"},"")],-1),a("blockquote",null,[a("p",null,[a("strong",null,"同构元框架：Next.js、Nuxt"),s("，现代全栈开发倾向于使用“元框架”，它们模糊了客户端和服务器的界限，提供一体化的开发体验。")]),a("p",null,[a("strong",null,"企业级 Node 服务端框架：NestJS"),s("，一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架。")])],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://nextjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nextjs.org/favicon.ico?favicon.3fc65821.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Next.js")]),a("p",{class:"desc"},"Next.js 是一个基于 React、Node.js 的全栈 Web 开发框架，由 Vercel 公司维护，专为生产环境设计。它通过内置的服务器端渲染 (SSR)、静态站点生成 (SSG) 和增量静态再生成 (ISR) 技术，解决了传统 React 应用的 SEO 优化差 和首屏加载慢的问题，是目前最受欢迎的 React 应用开发框架之一。"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nuxtjs.org/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nuxt.com/icon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Nuxt")]),a("p",{class:"desc"},"是一个基于 Vue.js 的开源、免费的 Web 开发元框架（Meta-framework），专为构建高性能的服务端渲染（SSR）、静态站点生成（SSG）和单页应用（SPA）而设计。它集成了 Vite、Vue 3 和 Nitro 服务端引擎，旨在简化开发流程，提供卓越的 SEO 优化和开发人员体验"),a("span",{class:"VPBadge tip badge"},"SSR/SSG/ISR")]),a("a",{href:"https://nestjs.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://nestjs.com/favicon-32x32.a39d94f4.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"NestJS")]),a("p",{class:"desc"},"NestJS 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架，它采用现代 TypeScript 编写，并完全支持它（同时也支持纯 JavaScript）。它融合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数响应式编程）的理念。其设计深受 Angular 启发，内置了依赖注入（DI）、模块化和分层架构等强主张特性，被称为 Node.js 版的 Spring 框架."),a("span",{class:"VPBadge tip badge"},"企业级 Node 框架")])])],-1),e("",2),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://vercel.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://assets.vercel.com/image/upload/front/favicon/vercel/apple-touch-icon-256x256.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Vercel")]),a("p",{class:"desc"},"Vercel 是一个现代前端项目的理想部署平台，它零配置、支持自动部署和预览、拥有全球加速节点，广泛用于开源项目、个人作品集、企业网站等。 无论你是用React、Vue、Svelte 还是静态HTML，只需几步就可以将项目上线。"),a("span",{class:"VPBadge tip badge"},"前端边缘托管")]),a("a",{href:"https://www.netlify.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://www.netlify.com/favicon/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"Netlify")]),a("p",{class:"desc"},"与 Vercel 类似，功能更全面：支持更多的框架和静态站点生成器，有表单处理、无服务器函数等功能，免费额度更大、还支持 A/B 测试和分析。Netlify 是一个基于云计算的网站部署和托管平台，专注于为开发者提供便捷的静态网站和Jamstack 应用部署服务。 它的核心优势在于将网站构建、部署、托管以及持续集成/ 持续部署（CI/CD）流程高度集成，极大地简化了开发和运维的复杂程度"),a("span",{class:"VPBadge tip badge"},"Jamstack 平台")]),a("a",{href:"https://pages.github.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://github.com/fluidicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"GitHub Pages")]),a("p",{class:"desc"},"GitHub Pages 是一个由 GitHub 提供的、免费的静态网站托管服务。它允许用户直接从 GitHub 仓库（Repository）获取 HTML、CSS 和 JavaScript 文件，无需额外配置服务器即可快速部署个人主页、项目文档或博客。"),a("span",{class:"VPBadge tip badge"},"纯静态托管")])])],-1),a("h2",{id:"_9-学习资源与社区-learning-community",tabindex:"-1"},[s("9. 学习资源与社区 (Learning & Community) "),a("a",{class:"header-anchor",href:"#_9-学习资源与社区-learning-community","aria-label":"Permalink to “9. 学习资源与社区 (Learning & Community)”"},"")],-1),a("div",{class:"container nav-card-container"},[a("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[a("a",{href:"https://javascriptweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"JavaScript Weekly")]),a("p",{class:"desc"},"每周分享最新的 JavaScript 相关技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://nodeweekly.com/issues",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"Node Weekly")]),a("p",{class:"desc"},"每周分享最新的 Node.js 相关技术文章、库、工具和趋势。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://www.ruanyifeng.com/blog/weekly/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"阮一峰网络日志")]),a("p",{class:"desc"},"阮一峰的网络日志，每周五发布，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E6%97%A9%E8%AF%BB%E8%AF%BE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端早读课")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E5%B7%85",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之巅")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzIxMzExMjYwOQ==&action=getalbum&album_id=1369610438157369345#wechat_redirect",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"凹凸实验室")]),a("p",{class:"desc"},"蒲公英·JELLY技术周刊，由京东·凹凸实验室维护整理的技术周刊，从团队专注的研究技术方向出发，深入挖掘业界热点，聚焦技术动态。技术周刊内容分类主要包括如下：基础技术、工程化、跨端框架技术、图形编程、服务端开发、桌面开发、人工智能等。"),a("span",{class:"VPBadge tip badge"},"技术周刊")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E5%A4%A7%E5%85%A8",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端大全")]),a("p",{class:"desc"},"前端大全，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%B9%8B%E7%A5%9E",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端之神")]),a("p",{class:"desc"},"前端之神，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E7%A8%8B%E5%BA%8F%E5%91%98%E6%88%90%E9%95%BF%E6%8C%87%E5%8C%97",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"程序员成长指北")]),a("p",{class:"desc"},"前端领域专业的微信公众号，发布一些与前端相关的深度技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%AD%97%E8%8A%82%E5%89%8D%E7%AB%AF-ByteFE",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"ByteFE")]),a("p",{class:"desc"},"字节跳动前端团队维护的专业微信公众号，分享技术前沿、文章分享、实践干货等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E5%89%8D%E7%AB%AF%E4%BB%8E%E8%BF%9B%E9%98%B6%E5%88%B0%E5%85%A5%E9%99%A2",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"前端从进阶到入院")]),a("p",{class:"desc"},"前端从进阶到入院，分享最新的前端技术文章、库、工具和趋势"),a("span",{class:"VPBadge tip badge"},"专业公众号")]),a("a",{href:"https://www.zhangxinxu.com/wordpress/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("span",{class:"name"},"张鑫旭-鑫空间-鑫生活")]),a("p",{class:"desc"},"张鑫旭的个人博客，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"网络博客")]),a("a",{href:"https://fed.chanceyu.com/?q=%5B%E6%9D%A5%E6%BA%90%5D%20%E6%B7%98%E7%B3%BB%E5%89%8D%E7%AB%AF%E5%9B%A2%E9%98%9F",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[a("div",{class:"nav-card__item__info"},[a("div",{class:"nav-card__item__img skeleton-image"},[a("img",{src:"https://res.wx.qq.com/a/wx_fed/assets/res/OTE0YTAw.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),a("span",{class:"name"},"淘系前端团队")]),a("p",{class:"desc"},"淘宝前端团队，分享最新的前端技术文章、库、工具和趋势等。"),a("span",{class:"VPBadge tip badge"},"专业公众号")])])],-1)])])}const h=d(l,[["render",n]]);export{v as __pageData,h as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.B9Ry8o94.js" "b/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.BlAoRUPp.js"
similarity index 97%
rename from "assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.B9Ry8o94.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.BlAoRUPp.js"
index d7ab7e62..525af203 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.B9Ry8o94.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.BlAoRUPp.js"
@@ -1 +1 @@
-import{A as t}from"./chunks/ArticleCardList.CRH3I_GT.js";import{g as r,h as s,U as i,z as o,l as n}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const a=[{title:"产品观察与拆解分析",icon:"🔍",color:"#6366f1",articles:[{title:"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者",url:"/product-sense/perplexity-knowledge-worker",description:"从产品 Sense 与工程逻辑的双重视角，深入分析 Perplexity 如何重新定义搜索体验."}]},{title:"新 T 型人：AI 时代的复合型人才",icon:"🌟",color:"#8b5cf6",articles:[{title:"AI 原生时代的复合型人才，究竟需要怎样的特质？",url:"/product-sense/ai-native-composite-talents/",description:"一篇阅读 Paul Graham 深度长文后的思考，探寻 AI 时代下跨界能力的构建路径。"},{title:'当"实现"不再是壁垒：工程师如何构建 Product Sense？',url:"/product-sense/engineer-build-product-sense",description:"工程师视角下的产品思维构建指南——将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。"}]},{title:"产品创造与商业化",icon:"💡",color:"#f59e0b",articles:[{title:"放弃增长执念，为什么“小而美”才是可持续之路？",url:"/product-sense/small-rule-learn",description:"本文结合《小而美：持续盈利的经营法则》书中提出的一种不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。从自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考"},{title:"好书籍汇总与推荐",url:"/growth/books#_2-产品与商业",description:"系统整理了产品 Sense 与创造、商业化相关的必读书籍清单，便于开发者和产品经理学习和应用产品 Sense 的理论和实践。"}]},{title:"方法论学习与总结：洞察力与经济学思维",icon:"📊",color:"#10b981",articles:[{title:"洞察力模型：如何看透产品与技术背后的系统逻辑？",url:"/product-sense/insight-model",description:"用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，建立透过现象看本质的思维框架，从根源上解决问题。"},{title:"用经济学思维做产品",url:"/product-sense/using-economics-thinking",description:"通过拆解日常生活中的经典案例，提炼成本收益、博弈均衡、有限理性、效率改进等核心经济学原理，并系统地将其应用到产品生命周期的核心环节——定义定位、定价策略、体验锁定及生态构建。"}]}],g=JSON.parse('{"title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","frontmatter":{"date":"2026-03-19T23:05:50.000Z","title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense"},"headers":[],"relativePath":"10.产品 Sense/00.学习与实践全景.md","filePath":"10.产品 Sense/00.学习与实践全景.md"}'),l={name:"10.产品 Sense/00.学习与实践全景.md"},m=Object.assign(l,{setup(c){return(d,e)=>(s(),r("div",null,[e[0]||(e[0]=i('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/00.学习与实践全景.md for this page in Markdown format
学习与实践全景
产品 Sense 的精髓在于用最小投入撬动最大价值，同时精准洞察人性：
- 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；
- 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。
解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：
- 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。
- 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。
在产品成功率不足 10% 的残酷市场中，产品 Sense 往往被误认为是某种不可复制的玄妙“直觉”。然而，它本质上是一套可拆解、可训练的思维模式，核心在于：在信息不完整、资源受限的环境下，依然能精准判断“做什么”与“不做什么”，从而确保团队在投入开发前始终是在“做对产品”。
2.精选专题
',8)),o(t,{categories:n(a)},null,8,["categories"])]))}});export{g as __pageData,m as default};
+import{A as t}from"./chunks/ArticleCardList.DFlNODKA.js";import{g as r,h as s,U as i,z as o,l as n}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const a=[{title:"产品观察与拆解分析",icon:"🔍",color:"#6366f1",articles:[{title:"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者",url:"/product-sense/perplexity-knowledge-worker",description:"从产品 Sense 与工程逻辑的双重视角，深入分析 Perplexity 如何重新定义搜索体验."}]},{title:"新 T 型人：AI 时代的复合型人才",icon:"🌟",color:"#8b5cf6",articles:[{title:"AI 原生时代的复合型人才，究竟需要怎样的特质？",url:"/product-sense/ai-native-composite-talents/",description:"一篇阅读 Paul Graham 深度长文后的思考，探寻 AI 时代下跨界能力的构建路径。"},{title:'当"实现"不再是壁垒：工程师如何构建 Product Sense？',url:"/product-sense/engineer-build-product-sense",description:"工程师视角下的产品思维构建指南——将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。"}]},{title:"产品创造与商业化",icon:"💡",color:"#f59e0b",articles:[{title:"放弃增长执念，为什么“小而美”才是可持续之路？",url:"/product-sense/small-rule-learn",description:"本文结合《小而美：持续盈利的经营法则》书中提出的一种不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。从自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考"},{title:"好书籍汇总与推荐",url:"/growth/books#_2-产品与商业",description:"系统整理了产品 Sense 与创造、商业化相关的必读书籍清单，便于开发者和产品经理学习和应用产品 Sense 的理论和实践。"}]},{title:"方法论学习与总结：洞察力与经济学思维",icon:"📊",color:"#10b981",articles:[{title:"洞察力模型：如何看透产品与技术背后的系统逻辑？",url:"/product-sense/insight-model",description:"用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，建立透过现象看本质的思维框架，从根源上解决问题。"},{title:"用经济学思维做产品",url:"/product-sense/using-economics-thinking",description:"通过拆解日常生活中的经典案例，提炼成本收益、博弈均衡、有限理性、效率改进等核心经济学原理，并系统地将其应用到产品生命周期的核心环节——定义定位、定价策略、体验锁定及生态构建。"}]}],g=JSON.parse('{"title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","frontmatter":{"date":"2026-03-19T23:05:50.000Z","title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense"},"headers":[],"relativePath":"10.产品 Sense/00.学习与实践全景.md","filePath":"10.产品 Sense/00.学习与实践全景.md"}'),l={name:"10.产品 Sense/00.学习与实践全景.md"},m=Object.assign(l,{setup(c){return(d,e)=>(s(),r("div",null,[e[0]||(e[0]=i('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/00.学习与实践全景.md for this page in Markdown format
学习与实践全景
产品 Sense 的精髓在于用最小投入撬动最大价值，同时精准洞察人性：
- 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；
- 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。
解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：
- 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。
- 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。
在产品成功率不足 10% 的残酷市场中，产品 Sense 往往被误认为是某种不可复制的玄妙“直觉”。然而，它本质上是一套可拆解、可训练的思维模式，核心在于：在信息不完整、资源受限的环境下，依然能精准判断“做什么”与“不做什么”，从而确保团队在投入开发前始终是在“做对产品”。
2.精选专题
',8)),o(t,{categories:n(a)},null,8,["categories"])]))}});export{g as __pageData,m as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.B9Ry8o94.lean.js" "b/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.BlAoRUPp.lean.js"
similarity index 96%
rename from "assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.B9Ry8o94.lean.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.BlAoRUPp.lean.js"
index c0ed0291..e8972e9b 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.B9Ry8o94.lean.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_00.\345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257.md.BlAoRUPp.lean.js"
@@ -1 +1 @@
-import{A as t}from"./chunks/ArticleCardList.CRH3I_GT.js";import{g as r,h as s,U as i,z as o,l as n}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const a=[{title:"产品观察与拆解分析",icon:"🔍",color:"#6366f1",articles:[{title:"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者",url:"/product-sense/perplexity-knowledge-worker",description:"从产品 Sense 与工程逻辑的双重视角，深入分析 Perplexity 如何重新定义搜索体验."}]},{title:"新 T 型人：AI 时代的复合型人才",icon:"🌟",color:"#8b5cf6",articles:[{title:"AI 原生时代的复合型人才，究竟需要怎样的特质？",url:"/product-sense/ai-native-composite-talents/",description:"一篇阅读 Paul Graham 深度长文后的思考，探寻 AI 时代下跨界能力的构建路径。"},{title:'当"实现"不再是壁垒：工程师如何构建 Product Sense？',url:"/product-sense/engineer-build-product-sense",description:"工程师视角下的产品思维构建指南——将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。"}]},{title:"产品创造与商业化",icon:"💡",color:"#f59e0b",articles:[{title:"放弃增长执念，为什么“小而美”才是可持续之路？",url:"/product-sense/small-rule-learn",description:"本文结合《小而美：持续盈利的经营法则》书中提出的一种不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。从自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考"},{title:"好书籍汇总与推荐",url:"/growth/books#_2-产品与商业",description:"系统整理了产品 Sense 与创造、商业化相关的必读书籍清单，便于开发者和产品经理学习和应用产品 Sense 的理论和实践。"}]},{title:"方法论学习与总结：洞察力与经济学思维",icon:"📊",color:"#10b981",articles:[{title:"洞察力模型：如何看透产品与技术背后的系统逻辑？",url:"/product-sense/insight-model",description:"用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，建立透过现象看本质的思维框架，从根源上解决问题。"},{title:"用经济学思维做产品",url:"/product-sense/using-economics-thinking",description:"通过拆解日常生活中的经典案例，提炼成本收益、博弈均衡、有限理性、效率改进等核心经济学原理，并系统地将其应用到产品生命周期的核心环节——定义定位、定价策略、体验锁定及生态构建。"}]}],g=JSON.parse('{"title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","frontmatter":{"date":"2026-03-19T23:05:50.000Z","title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense"},"headers":[],"relativePath":"10.产品 Sense/00.学习与实践全景.md","filePath":"10.产品 Sense/00.学习与实践全景.md"}'),l={name:"10.产品 Sense/00.学习与实践全景.md"},m=Object.assign(l,{setup(c){return(d,e)=>(s(),r("div",null,[e[0]||(e[0]=i("",8)),o(t,{categories:n(a)},null,8,["categories"])]))}});export{g as __pageData,m as default};
+import{A as t}from"./chunks/ArticleCardList.DFlNODKA.js";import{g as r,h as s,U as i,z as o,l as n}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const a=[{title:"产品观察与拆解分析",icon:"🔍",color:"#6366f1",articles:[{title:"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者",url:"/product-sense/perplexity-knowledge-worker",description:"从产品 Sense 与工程逻辑的双重视角，深入分析 Perplexity 如何重新定义搜索体验."}]},{title:"新 T 型人：AI 时代的复合型人才",icon:"🌟",color:"#8b5cf6",articles:[{title:"AI 原生时代的复合型人才，究竟需要怎样的特质？",url:"/product-sense/ai-native-composite-talents/",description:"一篇阅读 Paul Graham 深度长文后的思考，探寻 AI 时代下跨界能力的构建路径。"},{title:'当"实现"不再是壁垒：工程师如何构建 Product Sense？',url:"/product-sense/engineer-build-product-sense",description:"工程师视角下的产品思维构建指南——将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。"}]},{title:"产品创造与商业化",icon:"💡",color:"#f59e0b",articles:[{title:"放弃增长执念，为什么“小而美”才是可持续之路？",url:"/product-sense/small-rule-learn",description:"本文结合《小而美：持续盈利的经营法则》书中提出的一种不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。从自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考"},{title:"好书籍汇总与推荐",url:"/growth/books#_2-产品与商业",description:"系统整理了产品 Sense 与创造、商业化相关的必读书籍清单，便于开发者和产品经理学习和应用产品 Sense 的理论和实践。"}]},{title:"方法论学习与总结：洞察力与经济学思维",icon:"📊",color:"#10b981",articles:[{title:"洞察力模型：如何看透产品与技术背后的系统逻辑？",url:"/product-sense/insight-model",description:"用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，建立透过现象看本质的思维框架，从根源上解决问题。"},{title:"用经济学思维做产品",url:"/product-sense/using-economics-thinking",description:"通过拆解日常生活中的经典案例，提炼成本收益、博弈均衡、有限理性、效率改进等核心经济学原理，并系统地将其应用到产品生命周期的核心环节——定义定位、定价策略、体验锁定及生态构建。"}]}],g=JSON.parse('{"title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","frontmatter":{"date":"2026-03-19T23:05:50.000Z","title":"学习与实践全景","description":"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。","categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense"},"headers":[],"relativePath":"10.产品 Sense/00.学习与实践全景.md","filePath":"10.产品 Sense/00.学习与实践全景.md"}'),l={name:"10.产品 Sense/00.学习与实践全景.md"},m=Object.assign(l,{setup(c){return(d,e)=>(s(),r("div",null,[e[0]||(e[0]=i("",8)),o(t,{categories:n(a)},null,8,["categories"])]))}});export{g as __pageData,m as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BEH7EQLT.js" "b/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BRTIJ78C.js"
similarity index 99%
rename from "assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BEH7EQLT.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BRTIJ78C.js"
index 5de4afcf..7e4f5e41 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BEH7EQLT.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BRTIJ78C.js"
@@ -1 +1 @@
-import{_ as r,g as t,h as a,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const _=JSON.parse('{"title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","frontmatter":{"date":"2024-05-08T08:56:21.000Z","title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","permalink":"/product-sense/perplexity-knowledge-worker","categories":["产品 Sense"],"tags":["AI 搜索","知识发现","产品 Sense"]},"headers":[],"relativePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md","filePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"}'),o={name:"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"};function i(n,e,p,s,g,d){return a(),t("div",null,[...e[0]||(e[0]=[l('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md for this page in Markdown format
AI-powered 搜索引擎观察分析：Perplexity 与知识工作者
摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。
1. 引言
在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。
对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。
本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。
2. 核心定位：从“链接导航”到“知识发现”
传统搜索引擎的本质是流量分发与链接导航，而 Perplexity 的第一性原理是直接提供具有事实支撑的答案。
学术级的严谨性：Perplexity 借鉴了学术论文的引用机制。它不仅提取相关网页段落，还要求大语言模型（LLM）在生成简明答案时，每一句话都必须带有准确的脚注来源。这种设计降低了知识工作者二次核查信息的成本。
非替代关系： Perplexity 与 Google 并非零和博弈。Google 擅长处理具有确定性 UI 需求的查询（如天气、股价、标准导航），而 Perplexity 则专注于解答需要跨信息源整合、总结的复杂问题。
3. 产品交互重构：反直觉的 UI 创新
Perplexity 在交互设计上做出了几个违背传统搜索常理的决策：
降级链接的视觉权重：在传统搜索中，10 条蓝色链接是绝对的主角。Perplexity 内部曾经历过激烈的争论，最终决定将核心位置让给“生成的答案”，哪怕早期模型偶尔会出现幻觉（Hallucination）。这种反其道而行之的勇气，确立了其作为“问答引擎”的心智。
将交互起点后置：传统搜索在用户点击链接后结束，而 Perplexity 认为，用户得到答案后，交互才刚刚开始。通过在底部提供“相关问题（People also ask）”，它充当了用户的思考辅助工具，帮助不擅长提问的用户将模糊的“好奇心”具象化为清晰的 Prompt。
聚焦“魔力指标”： 相比于关注用户的停留时长，Perplexity 的核心指标是让用户感到满意的查询次数。快速、准确、易读，是驱动知识工作者留存的唯一动力。
4. 技术护城河：搜索是一项工程与模型的交响
很多人误以为 AI 搜索只是大模型的“套壳”，但实际上，做好搜索需要深厚的领域 Know-how 和极致的工程优化。
4.1 驯服幻觉（Hallucination）的四个维度
Perplexity 坚持比标准 RAG（检索增强生成）更严苛的原则：如果检索到的文档信息不足，系统必须直接拒绝回答，而不是任由模型编造。 减少幻觉需要从以下几个工程节点切入：
检索质量：提升索引的新鲜度和全面性，避免提取过时或冲突的信息。
上下文控制：避免一次性将海量文档全部丢给模型导致“注意力涣散”，精确控制摘录的颗粒度。
模型理解力： 提升模型对深层语义的理解，确保其能从一堆相关度不高的文档中，精准识别出隐藏的正确答案。
4.2 极致的性能优化：追踪尾部延迟（Tail Latency）
知识工作者对效率极其敏感。Perplexity 在性能优化上借鉴了 Google 的理念，不仅看平均响应时间，更死磕 P90 和 P99 的尾部延迟。
采用自研的 Sonar 模型（基于 Llama 3 结合 Post-training）。
LLM 层：在 LLM 层，核心关注首字生成时间（TTFT）和数据流式传输的吞吐量。
通过与 NVIDIA 合作开发 TensorRT-LLM 框架，甚至深入内核级别编写代码，确保在最差的网络环境下也能实现极低的延迟。
5. 商业逻辑：你的利润率，就是我的机会
Google 拥有过去 50 年最伟大的商业模式——广告竞价。这不仅是其利润来源，也成了其在 AI 搜索转型时的历史包袱。对于 Google 而言，为每一个长尾查询生成 AI 答案的算力成本极高，且会破坏现有的高利润广告位。
Perplexity 巧妙地利用了这一点（正如 Amazon AWS 当年切入低利润率的云市场一样）：
6. 未来演进：从被动响应到主动 Agent
搜索的终局不仅仅是回答问题，而是知识的生成与自主探索。
Perplexity Pages：这是其迈向“知识发现引擎”的重要一步。用户的优质提问和搜索会话不仅对自己有价值，将其转化为结构化的文章发布，可以极大降低新知识创造的门槛，构建类似 AI 时代的维基百科。
赋予 AI 好奇心：当前的 AI 仍是被动响应的。未来的想象空间在于，当推理成本进一步降低，AI Agent 可以带着“好奇心”在互联网上自主穿梭。用户只需抛出一个宏大的目标（如“分析某项新技术的 ROI 并生成研报”），AI 就能自行拆解问题、进行多轮搜索验证，最终带着提纯后的知识返回。
写在最后
Perplexity 的成功证明了，在巨头林立的赛道中，依然可以通过重新定义产品边界和极致的工程打磨撕开缺口。对于知识工作者而言，它不仅仅是一个搜索工具，更是一个能大幅降低信息噪音、提升信息处理转化率的“外脑”。
',30)])])}const P=r(o,[["render",i]]);export{_ as __pageData,P as default};
+import{_ as r,g as t,h as a,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const _=JSON.parse('{"title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","frontmatter":{"date":"2024-05-08T08:56:21.000Z","title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","permalink":"/product-sense/perplexity-knowledge-worker","categories":["产品 Sense"],"tags":["AI 搜索","知识发现","产品 Sense"]},"headers":[],"relativePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md","filePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"}'),o={name:"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"};function i(n,e,p,s,g,d){return a(),t("div",null,[...e[0]||(e[0]=[l('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md for this page in Markdown format
AI-powered 搜索引擎观察分析：Perplexity 与知识工作者
摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。
1. 引言
在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。
对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。
本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。
2. 核心定位：从“链接导航”到“知识发现”
传统搜索引擎的本质是流量分发与链接导航，而 Perplexity 的第一性原理是直接提供具有事实支撑的答案。
学术级的严谨性：Perplexity 借鉴了学术论文的引用机制。它不仅提取相关网页段落，还要求大语言模型（LLM）在生成简明答案时，每一句话都必须带有准确的脚注来源。这种设计降低了知识工作者二次核查信息的成本。
非替代关系： Perplexity 与 Google 并非零和博弈。Google 擅长处理具有确定性 UI 需求的查询（如天气、股价、标准导航），而 Perplexity 则专注于解答需要跨信息源整合、总结的复杂问题。
3. 产品交互重构：反直觉的 UI 创新
Perplexity 在交互设计上做出了几个违背传统搜索常理的决策：
降级链接的视觉权重：在传统搜索中，10 条蓝色链接是绝对的主角。Perplexity 内部曾经历过激烈的争论，最终决定将核心位置让给“生成的答案”，哪怕早期模型偶尔会出现幻觉（Hallucination）。这种反其道而行之的勇气，确立了其作为“问答引擎”的心智。
将交互起点后置：传统搜索在用户点击链接后结束，而 Perplexity 认为，用户得到答案后，交互才刚刚开始。通过在底部提供“相关问题（People also ask）”，它充当了用户的思考辅助工具，帮助不擅长提问的用户将模糊的“好奇心”具象化为清晰的 Prompt。
聚焦“魔力指标”： 相比于关注用户的停留时长，Perplexity 的核心指标是让用户感到满意的查询次数。快速、准确、易读，是驱动知识工作者留存的唯一动力。
4. 技术护城河：搜索是一项工程与模型的交响
很多人误以为 AI 搜索只是大模型的“套壳”，但实际上，做好搜索需要深厚的领域 Know-how 和极致的工程优化。
4.1 驯服幻觉（Hallucination）的四个维度
Perplexity 坚持比标准 RAG（检索增强生成）更严苛的原则：如果检索到的文档信息不足，系统必须直接拒绝回答，而不是任由模型编造。 减少幻觉需要从以下几个工程节点切入：
检索质量：提升索引的新鲜度和全面性，避免提取过时或冲突的信息。
上下文控制：避免一次性将海量文档全部丢给模型导致“注意力涣散”，精确控制摘录的颗粒度。
模型理解力： 提升模型对深层语义的理解，确保其能从一堆相关度不高的文档中，精准识别出隐藏的正确答案。
4.2 极致的性能优化：追踪尾部延迟（Tail Latency）
知识工作者对效率极其敏感。Perplexity 在性能优化上借鉴了 Google 的理念，不仅看平均响应时间，更死磕 P90 和 P99 的尾部延迟。
采用自研的 Sonar 模型（基于 Llama 3 结合 Post-training）。
LLM 层：在 LLM 层，核心关注首字生成时间（TTFT）和数据流式传输的吞吐量。
通过与 NVIDIA 合作开发 TensorRT-LLM 框架，甚至深入内核级别编写代码，确保在最差的网络环境下也能实现极低的延迟。
5. 商业逻辑：你的利润率，就是我的机会
Google 拥有过去 50 年最伟大的商业模式——广告竞价。这不仅是其利润来源，也成了其在 AI 搜索转型时的历史包袱。对于 Google 而言，为每一个长尾查询生成 AI 答案的算力成本极高，且会破坏现有的高利润广告位。
Perplexity 巧妙地利用了这一点（正如 Amazon AWS 当年切入低利润率的云市场一样）：
6. 未来演进：从被动响应到主动 Agent
搜索的终局不仅仅是回答问题，而是知识的生成与自主探索。
Perplexity Pages：这是其迈向“知识发现引擎”的重要一步。用户的优质提问和搜索会话不仅对自己有价值，将其转化为结构化的文章发布，可以极大降低新知识创造的门槛，构建类似 AI 时代的维基百科。
赋予 AI 好奇心：当前的 AI 仍是被动响应的。未来的想象空间在于，当推理成本进一步降低，AI Agent 可以带着“好奇心”在互联网上自主穿梭。用户只需抛出一个宏大的目标（如“分析某项新技术的 ROI 并生成研报”），AI 就能自行拆解问题、进行多轮搜索验证，最终带着提纯后的知识返回。
写在最后
Perplexity 的成功证明了，在巨头林立的赛道中，依然可以通过重新定义产品边界和极致的工程打磨撕开缺口。对于知识工作者而言，它不仅仅是一个搜索工具，更是一个能大幅降低信息噪音、提升信息处理转化率的“外脑”。
',30)])])}const P=r(o,[["render",i]]);export{_ as __pageData,P as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BEH7EQLT.lean.js" "b/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BRTIJ78C.lean.js"
similarity index 97%
rename from "assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BEH7EQLT.lean.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BRTIJ78C.lean.js"
index 9dc54cb4..c74021b1 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BEH7EQLT.lean.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_01.\344\272\247\345\223\201\350\247\202\345\257\237\344\270\216\345\210\206\346\236\220_11.AI-powered \346\220\234\347\264\242\345\274\225\346\223\216\350\247\202\345\257\237\345\210\206\346\236\220\357\274\232Perplexity \344\270\216\347\237\245\350\257\206\345\267\245\344\275\234\350\200\205.md.BRTIJ78C.lean.js"
@@ -1 +1 @@
-import{_ as r,g as t,h as a,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const _=JSON.parse('{"title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","frontmatter":{"date":"2024-05-08T08:56:21.000Z","title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","permalink":"/product-sense/perplexity-knowledge-worker","categories":["产品 Sense"],"tags":["AI 搜索","知识发现","产品 Sense"]},"headers":[],"relativePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md","filePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"}'),o={name:"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"};function i(n,e,p,s,g,d){return a(),t("div",null,[...e[0]||(e[0]=[l("",30)])])}const P=r(o,[["render",i]]);export{_ as __pageData,P as default};
+import{_ as r,g as t,h as a,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const _=JSON.parse('{"title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","frontmatter":{"date":"2024-05-08T08:56:21.000Z","title":"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者","description":"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。","permalink":"/product-sense/perplexity-knowledge-worker","categories":["产品 Sense"],"tags":["AI 搜索","知识发现","产品 Sense"]},"headers":[],"relativePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md","filePath":"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"}'),o={name:"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md"};function i(n,e,p,s,g,d){return a(),t("div",null,[...e[0]||(e[0]=[l("",30)])])}const P=r(o,[["render",i]]);export{_ as __pageData,P as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Du3qZ8xB.js" "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Xe0P5HJr.js"
similarity index 99%
rename from "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Du3qZ8xB.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Xe0P5HJr.js"
index 3aacc431..82c20384 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Du3qZ8xB.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Xe0P5HJr.js"
@@ -1 +1 @@
-import{_ as a,g as o,h as e,U as s}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const A=JSON.parse('{"title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","frontmatter":{"date":"2024-06-15T22:23:00.000Z","title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","coverImg":"/img/cover/product_sense_bg.png","permalink":"/product-sense/ai-native-composite-talents","categories":["产品 Sense"],"tags":["AI","成长"]},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md","filePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"}'),r={name:"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"};function i(l,t,p,n,c,d){return e(),o("div",null,[...t[0]||(t[0]=[s('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md for this page in Markdown format
读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？
原文标题：《How to Do Great Work》（如何取得杰出成就）
原文地址：https://paulgraham.com/greatwork.html
原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。
文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。
1. 引言：当“执行”被 AI 填平，什么才是核心壁垒？
通读保罗·格雷厄姆（以下简称 PG）这篇两万字的长文，笔者最大的感受是：这不仅是一份跨越领域的“伟大成就指南”，更是一份为 AI 原生时代量身定制的“复合型人才生存手册”。
在 AI 爆发的当下，写代码、画图、撰写基础文案甚至简单的数据分析，这些曾经被视为专业技能的“执行动作”，正在迅速贬值。当 AI 把“解答问题”的门槛降到极低时，人与人之间的差距将被什么拉开？
PG 在文章中给出了答案：找到正确的问题、保持非共识的好奇心、以及拥有极高的品味。以下是我结合 AI 时代浪潮，对文章核心观点的梳理与个人思考。
2. 从“解决问题”到“发现问题”：提问力决定生产力
【原文精髓】
“问题不仅导向答案，而且也导向更多的问题。”
PG 认为，人们在解决问题上表现出的原创性，远超在“决定解决哪些问题”上。很多人被困在时髦的漩涡里，而真正杰出的成就往往始于敏锐地注意到了知识边缘的“缺口”。
【我的体会】
在 AI 时代，这句话被赋予了史无前例的现实意义。大模型（LLM）本质上是一个超级“解答机”，它极其擅长顺着你给定的逻辑生成答案。这意味着，在未来，寻找答案的能力将不再稀缺，稀缺的是提出绝佳问题的能力。
一个 AI 原生时代的复合型人才，其核心特质就是成为一个高阶的“问题发现者”。我们需要利用 AI 快速跨越多个领域的知识盲区（即 PG 说的“到达领域前沿”），然后在前沿地带敏锐地嗅到那些被主流忽视的空白。"Prompt（提示词）质量"在某种程度上正是我们洞察力与品味的直接映射——它决定了我们能否从 AI 这座"超级解答机"中，挖掘出真正有价值的答案。
3. 培养非共识的“品味”：逃离 AI 生成的“平均数”
【原文精髓】
PG 强调：“有意识地培养对自己领域工作的品味。除非我们知道什么是最好的，以及是什么使它成为最好的，否则我们并不知道自己在追求什么。”
【我的体会】
在这个信息大爆炸的时代，AI 正在批量生产海量的、无差别的“及格线以上”的内容与代码，这带来了两个极端的现象：
这就使得 PG 提到的“品味（Taste）”变得无比重要。复合型人才必须拥有极高的审美眼光与判别能力，这种能力无法通过算法习得。当我们面对 AI 给出的多个解决方案时，需要敏锐地判断哪个方案不仅可行，而且足够“优雅”。品味，将成为我们在 AI 自动驾驶浪潮中把稳方向盘的核心资产。
4. 保持真诚与“打破规则”的勇气：抵抗 AI 的“幻觉”与平庸
【原文精髓】
“要找到新的想法，就必须抓住不合理的迹象，而不是避而不见。” PG 在文章中反复强调独立思考（无论是主动还是被动的）与真诚（Intellectual Honesty，智力诚实）的力量。一个好的新想法，一开始往往是不受待见的。
【我的体会】
大模型是基于“人类现有共识（语料库）”训练出来的产物，这也意味着如果只依赖 AI 的输出，我们将永远在已知的舒适区内打转。真正“伟大”的创新，必然是对现有常识的颠覆与补充。
这就要求复合型人才必须具备极度的“智力诚实”。我们要把 AI 当作工具去验证假设，但在 AI 给出看似完美的常规解答时，我们要敢于说：“不，这里还有缺陷。”
当所有人都沉浸在某种热门技术或框架中时，我们要敢于像 PG 说的那样，选择冷门但具有极大潜力的“问题空间”。在 AI 时代，你的原创性，恰恰体现在你敢于在 AI 给出“标准答案”时，按下暂停键，去追问一个看似疯狂但属于“正确类别”的问题。
5. 复合指数增长：以小见大的行动力
【原文精髓】
“指数增长的问题在于曲线在开始时给人的感觉很平，但它不是。” PG 指出：杰出成就的累积效应是被严重低估的，关键在于一致性。同时，我们不需要做庞大的计划，只需要做“可能有用的最简单的东西”，并在实践中不断演化。
【我的体会】
在这一节，PG 的观点与“敏捷开发”不谋而合。但在今天，有了 AI 加持，个人开发者的“复合杠杆率”被无限放大了。
过去，打造一个最小可行性产品（MVP）往往需要数周时间。如今，在 AI 编程工具的助力下，一个具备复合能力的人才或许只需一个周末就能完成原型的搭建与验证。这意味着"以项目为单位的拖延"在当下变得愈发不可承受。
AI 时代的复合型人才，不再是拥有单一深厚技能的螺丝钉，而是能够一人承担“产品经理 + 全栈工程师 + 运营”角色的超级个体。一旦找到那个令你产生深度兴趣的切入点，并持续深耕，你的成长曲线将在极短时间内迎来惊人的指数级跃升。
6. 在算力面前保持敬畏，在机器面前保持好奇
通读 PG 这篇万字长文，如果要问：在这个技术天翻地覆的时代，取得成就究竟有什么不可替代的秘诀？文章给出的最终答案是——好奇心。
AI 可以模仿语气，可以生成代码，可以计算概率，却无法拥有真正自发的好奇心。它不会为一个微小的不合理现象而抓狂，也不会为了一个未知的答案彻夜难眠。
这正是我们作为人类最后的底牌。去追寻那些让你兴奋不已、让你"过分"好奇的问题吧——借助 AI 的算力跨越执行的鸿沟，以极高的品味去甄别筛选，用不妥协的真诚去深入探索。
剩下的，正如保罗·格雷厄姆所说："还有很多发现正等待着被发现，为什么不由我们自己去发现呢？"
',24)])])}const I=a(r,[["render",i]]);export{A as __pageData,I as default};
+import{_ as a,g as o,h as e,U as s}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const A=JSON.parse('{"title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","frontmatter":{"date":"2024-06-15T22:23:00.000Z","title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","coverImg":"/img/cover/product_sense_bg.png","permalink":"/product-sense/ai-native-composite-talents","categories":["产品 Sense"],"tags":["AI","成长"]},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md","filePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"}'),r={name:"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"};function i(l,t,p,n,c,d){return e(),o("div",null,[...t[0]||(t[0]=[s('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md for this page in Markdown format
读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？
原文标题：《How to Do Great Work》（如何取得杰出成就）
原文地址：https://paulgraham.com/greatwork.html
原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。
文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。
1. 引言：当“执行”被 AI 填平，什么才是核心壁垒？
通读保罗·格雷厄姆（以下简称 PG）这篇两万字的长文，笔者最大的感受是：这不仅是一份跨越领域的“伟大成就指南”，更是一份为 AI 原生时代量身定制的“复合型人才生存手册”。
在 AI 爆发的当下，写代码、画图、撰写基础文案甚至简单的数据分析，这些曾经被视为专业技能的“执行动作”，正在迅速贬值。当 AI 把“解答问题”的门槛降到极低时，人与人之间的差距将被什么拉开？
PG 在文章中给出了答案：找到正确的问题、保持非共识的好奇心、以及拥有极高的品味。以下是我结合 AI 时代浪潮，对文章核心观点的梳理与个人思考。
2. 从“解决问题”到“发现问题”：提问力决定生产力
【原文精髓】
“问题不仅导向答案，而且也导向更多的问题。”
PG 认为，人们在解决问题上表现出的原创性，远超在“决定解决哪些问题”上。很多人被困在时髦的漩涡里，而真正杰出的成就往往始于敏锐地注意到了知识边缘的“缺口”。
【我的体会】
在 AI 时代，这句话被赋予了史无前例的现实意义。大模型（LLM）本质上是一个超级“解答机”，它极其擅长顺着你给定的逻辑生成答案。这意味着，在未来，寻找答案的能力将不再稀缺，稀缺的是提出绝佳问题的能力。
一个 AI 原生时代的复合型人才，其核心特质就是成为一个高阶的“问题发现者”。我们需要利用 AI 快速跨越多个领域的知识盲区（即 PG 说的“到达领域前沿”），然后在前沿地带敏锐地嗅到那些被主流忽视的空白。"Prompt（提示词）质量"在某种程度上正是我们洞察力与品味的直接映射——它决定了我们能否从 AI 这座"超级解答机"中，挖掘出真正有价值的答案。
3. 培养非共识的“品味”：逃离 AI 生成的“平均数”
【原文精髓】
PG 强调：“有意识地培养对自己领域工作的品味。除非我们知道什么是最好的，以及是什么使它成为最好的，否则我们并不知道自己在追求什么。”
【我的体会】
在这个信息大爆炸的时代，AI 正在批量生产海量的、无差别的“及格线以上”的内容与代码，这带来了两个极端的现象：
这就使得 PG 提到的“品味（Taste）”变得无比重要。复合型人才必须拥有极高的审美眼光与判别能力，这种能力无法通过算法习得。当我们面对 AI 给出的多个解决方案时，需要敏锐地判断哪个方案不仅可行，而且足够“优雅”。品味，将成为我们在 AI 自动驾驶浪潮中把稳方向盘的核心资产。
4. 保持真诚与“打破规则”的勇气：抵抗 AI 的“幻觉”与平庸
【原文精髓】
“要找到新的想法，就必须抓住不合理的迹象，而不是避而不见。” PG 在文章中反复强调独立思考（无论是主动还是被动的）与真诚（Intellectual Honesty，智力诚实）的力量。一个好的新想法，一开始往往是不受待见的。
【我的体会】
大模型是基于“人类现有共识（语料库）”训练出来的产物，这也意味着如果只依赖 AI 的输出，我们将永远在已知的舒适区内打转。真正“伟大”的创新，必然是对现有常识的颠覆与补充。
这就要求复合型人才必须具备极度的“智力诚实”。我们要把 AI 当作工具去验证假设，但在 AI 给出看似完美的常规解答时，我们要敢于说：“不，这里还有缺陷。”
当所有人都沉浸在某种热门技术或框架中时，我们要敢于像 PG 说的那样，选择冷门但具有极大潜力的“问题空间”。在 AI 时代，你的原创性，恰恰体现在你敢于在 AI 给出“标准答案”时，按下暂停键，去追问一个看似疯狂但属于“正确类别”的问题。
5. 复合指数增长：以小见大的行动力
【原文精髓】
“指数增长的问题在于曲线在开始时给人的感觉很平，但它不是。” PG 指出：杰出成就的累积效应是被严重低估的，关键在于一致性。同时，我们不需要做庞大的计划，只需要做“可能有用的最简单的东西”，并在实践中不断演化。
【我的体会】
在这一节，PG 的观点与“敏捷开发”不谋而合。但在今天，有了 AI 加持，个人开发者的“复合杠杆率”被无限放大了。
过去，打造一个最小可行性产品（MVP）往往需要数周时间。如今，在 AI 编程工具的助力下，一个具备复合能力的人才或许只需一个周末就能完成原型的搭建与验证。这意味着"以项目为单位的拖延"在当下变得愈发不可承受。
AI 时代的复合型人才，不再是拥有单一深厚技能的螺丝钉，而是能够一人承担“产品经理 + 全栈工程师 + 运营”角色的超级个体。一旦找到那个令你产生深度兴趣的切入点，并持续深耕，你的成长曲线将在极短时间内迎来惊人的指数级跃升。
6. 在算力面前保持敬畏，在机器面前保持好奇
通读 PG 这篇万字长文，如果要问：在这个技术天翻地覆的时代，取得成就究竟有什么不可替代的秘诀？文章给出的最终答案是——好奇心。
AI 可以模仿语气，可以生成代码，可以计算概率，却无法拥有真正自发的好奇心。它不会为一个微小的不合理现象而抓狂，也不会为了一个未知的答案彻夜难眠。
这正是我们作为人类最后的底牌。去追寻那些让你兴奋不已、让你"过分"好奇的问题吧——借助 AI 的算力跨越执行的鸿沟，以极高的品味去甄别筛选，用不妥协的真诚去深入探索。
剩下的，正如保罗·格雷厄姆所说："还有很多发现正等待着被发现，为什么不由我们自己去发现呢？"
',24)])])}const I=a(r,[["render",i]]);export{A as __pageData,I as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Du3qZ8xB.lean.js" "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Xe0P5HJr.lean.js"
similarity index 96%
rename from "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Du3qZ8xB.lean.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Xe0P5HJr.lean.js"
index 6626ce92..533e9eb9 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Du3qZ8xB.lean.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_20.\350\257\273\345\220\216\346\204\237\357\274\232AI \345\216\237\347\224\237\346\227\266\344\273\243\347\232\204\345\244\215\345\220\210\345\236\213\344\272\272\346\211\215\357\274\214\347\251\266\347\253\237\351\234\200\350\246\201\346\200\216\346\240\267\347\232\204\347\211\271\350\264\250\357\274\237.md.Xe0P5HJr.lean.js"
@@ -1 +1 @@
-import{_ as a,g as o,h as e,U as s}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const A=JSON.parse('{"title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","frontmatter":{"date":"2024-06-15T22:23:00.000Z","title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","coverImg":"/img/cover/product_sense_bg.png","permalink":"/product-sense/ai-native-composite-talents","categories":["产品 Sense"],"tags":["AI","成长"]},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md","filePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"}'),r={name:"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"};function i(l,t,p,n,c,d){return e(),o("div",null,[...t[0]||(t[0]=[s("",24)])])}const I=a(r,[["render",i]]);export{A as __pageData,I as default};
+import{_ as a,g as o,h as e,U as s}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const A=JSON.parse('{"title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","frontmatter":{"date":"2024-06-15T22:23:00.000Z","title":"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？","description":"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。","coverImg":"/img/cover/product_sense_bg.png","permalink":"/product-sense/ai-native-composite-talents","categories":["产品 Sense"],"tags":["AI","成长"]},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md","filePath":"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"}'),r={name:"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md"};function i(l,t,p,n,c,d){return e(),o("div",null,[...t[0]||(t[0]=[s("",24)])])}const I=a(r,[["render",i]]);export{A as __pageData,I as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.JciUte9l.js" "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.CO18rPj4.js"
similarity index 99%
rename from "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.JciUte9l.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.CO18rPj4.js"
index 2d2f0da0..9ca84b61 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.JciUte9l.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.CO18rPj4.js"
@@ -1 +1 @@
-import{_ as s,g as t,h as n,U as m}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const h=JSON.parse('{"title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","frontmatter":{"date":"2025-10-23T16:05:50.000Z","title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","sticky":1,"top":true,"categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/engineer-build-product-sense"},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md","filePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"}'),i={name:"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"};function o(e,a,l,r,p,d){return n(),t("div",null,[...a[0]||(a[0]=[m('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md for this page in Markdown format
当“实现”不再是壁垒：工程师如何构建产品 Sense？
摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。
1. 引言
在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。
但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 "Code Smell"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。
一个成功的产品决策，往往发生在三个维度的交汇点：
- 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更快到达目的地”。
- 商业可行性（Business Viability）：不仅能做出来，还能算得过账。像 Dropbox 早期利用病毒式裂变降低获客成本，就是商业嗅觉的体现。
- 技术可实现性（Technical Feasibility）：在“完美的架构”和“明天就能上线”之间找到平衡。ChatGPT 的爆发，正是技术积累终于跨过了“可用性阈值”的临界点。
产品 Sense 是产品经理、设计师乃至创业者经常被提及、却也难以量化的能力之一。它并非玄学，而是一套可拆解、可训练、可迭代的思维模型：在信息不完整、目标模糊、资源受限的情况下，依然能快速判断「做什么」与「不做什么」，并让用户愿意为之买单或停留。
2. 解构产品 Sense 的数学之美
如果把产品 Sense 仅仅看作是“灵光一现”的艺术，那它就是不可复制的黑盒。作为工程师，我们更习惯于透过现象探寻底层的运行规律。
事实上，那些看似玄妙的直觉判断，往往是潜意识在极短时间内完成的高维计算。为了让这个抽象概念变得可解构、可训练，我尝试用理性的数学语言来重构感性的产品直觉，将其提炼为以下三个核心公式。
2.1. 极简杠杆公式：寻找 ROI 的最大解
NOTE
核心逻辑：卓越的产品嗅觉（产品 Sense）本质上是一种寻找“高杠杆解”的能力，对投入产出比（ROI）极致敏感。它要求我们敏锐地发现那些 “价值极高，但实现较低” 的低垂机会（Low Hanging Fruits），并果断放弃那些 “价值低又很难做” 的伪需求（看似美好，实则陷入技术泥潭）。
适用场景：技术选型决策、Feature 排期优先级、MVP 边界界定。
对于技术背景的开发者，最大的陷阱往往是“对过度设计的迷恋” 与 “为了技术而技术的自我感动”。因为掌握了某个新技术，就强行创造一个需求，但好的 Product Sense 其实是投入产出比（ROI）的直觉：
Product Sense=ComplexityUser Value
- 分子——用户价值（User Value）： 痛点烈度 × 覆盖广度不仅仅是“这个问题痛不痛”，而是要量化思考：这是一个高频刚需，还是低频痒点？解决它能为业务带来多大的增量（留存、转化或效率提升）？
- 分母——实现复杂度（Complexity）： 开发成本 + 维护税复杂度不仅是 Coding 的时间，更包含未来的维护成本、系统熵增以及用户认知的负担。全栈的智慧在于：用最简单的技术栈（Low Complexity），去撬动最大的业务价值。敢于在非核心功能上使用“笨办法”，是为了在核心体验上以此换取“极致体验”。
2.2. 洞察力公式：理智与情感的共舞
NOTE
核心逻辑：同理心提供"方向"，批判性思维提供"导航"
- 同理心告诉你"用户很痛苦"，批判性思维告诉你"痛苦的根源是什么"。
- 同理心告诉你"用户想要什么"，批判性思维告诉你"为什么想要"和"有没有更好的解决方案"。
适用场景：需求分析、用户调研、产品定位、功能设计、A/B 测试方案设计。
仅有同理心，产品容易沦为“臃肿的许愿池”（用户要什么给什么，导致产品臃肿）；仅有批判性思维，产品容易变成“冰冷的逻辑机器”（数据看似完美，却缺乏打动人心的人性温度）。因此，产品 Sense 本质上也是同理心与批判性思维的结合：
例如，用户抱怨"App 太复杂"，同理心让你感受到用户的挫败感，批判性思维让你追问：是功能太多？还是导航不清晰？还是学习成本太高？——不同的根源需要不同的解决方案。
Product Sense=Empathy×Critical Thinking
注意，这里是乘法关系而不是加法，意味着任何一个为零，整个结果都是零。只有同理心但缺乏批判性思维，会做出"用户要什么就给什么"的平庸产品；只有批判性思维但缺乏同理心，会做出"技术上完美但用户不买账"的产品。
2.3. AI 前沿视角公式：从“功能产品”到“语境构建”
NOTE
核心洞察：AI 时代的稀缺资源不再是“生成答案的能力”（模型已经具备），而是“提出正确问题的能力”。Product Sense 的核心从“设计功能交互”转变为“设计隐性的思维路径”，我们需要同时具备 翻译官（将模糊需求结构化） 和 架构师（构建智能体工作流） 的双重能力。
AI 模型本身是通用的引擎，我们需要为它设计底盘和方向盘，产品 Sense 在 AI 时代也就包含了新的特征：定义问题的能力——能把模糊的人类需求翻译成 AI 能理解的精确指令和环境：
Product Sense=Problem Definition+Context Design
- 定义问题（Problem Definiton）：
- 结构化歧义：AI 拥有无限的潜力，也伴随着无限的发散。Product Sense 在此处体现为 “收敛能力”——能否将一个模糊的业务痛点（如“分析用户情绪”），拆解为一组 AI 可理解、可执行的精准意图。
- 工作流架构：这不仅仅是写出一句完美的 Prompt，更是设计 Agentic Workflow（智能体工作流）的过程。我们需要判断哪些环节利用 LLM 的逻辑推理（概率性），哪些环节必须由传统代码（确定性）来兜底，从而构建出稳定可靠的系统。
- 语境设计（Context Design）：从“喂数据”到“构建信息场域”
- 无形界面设计：在 AI 应用中，真正的 UI 往往不是屏幕上的像素，而是看不见的 Context Window（上下文窗口）。Product Sense 就是设计这个“无形界面”的艺术——决定让 AI “看到”什么，以及“忽略”什么。
- 约束与边界工程：Product Sense 在这里体现为：我们能否为 AI 构建一个“全知全能”且“专注当下”的上下文环境，使其输出精准且可控。核心挑战是：如何在有限的上下文窗口（Context Window）中，提供最关键的先验知识、约束条件和少样本（Few-Shot）案例，让 AI 在你预设的“语境场”里精准舞蹈，而不是胡乱幻觉。
3. 刻意练习：如何从“凭感觉”到“有直觉”？
很多人认为 Sense 是天赋，无法学习，但我坚信直觉是经验在潜意识里的压缩算法。我们可以通过以下三个步骤的“刻意练习”来训练这种算法：
3.1. 建立“预测-验证”的反馈闭环
这是最硬核的训练法，不要只是被动地看数据，要主动做预测。
- 练习方法：在任何新功能上线前（或者观察竞品改版时），在笔记本上写下你的预测。
- “我赌这个按钮改为红色，点击率会提升 5%。”
- “我认为竞品推出这个功能是想解决留存问题，但可能会导致用户反感。”
- 复盘：一周后，看真实数据或市场反馈。如果你猜对了，强化这个直觉。如果你猜错了，这才是最宝贵的时刻：去深究为什么？是高估了用户动力？还是低估了操作门槛？
- 原理：大模型的训练依靠 Loss Function（损失函数）来收敛，人的直觉也一样。只有通过不断的“预测失败”，我们的大脑才能修正权重，从而获得更精准的 Sense。
3.2. 培养“摩擦力日记”
很多时候我们对痛点视而不见，是因为我们习惯了，要训练产品 Sense，就要恢复对“不舒服”的敏感度。
3.3. 解构“魔法”：从惊叹到复刻的逆向工程
当我们遇到一个让自己惊叹的产品（比如初次使用 ChatGPT或沉迷于 Vibe Coding）时，千万不要只停留在消费者的视角感叹“真好用”。那是“魔法”生效的时刻，也是你作为魔术师学徒拆解戏法的最佳时机。
若想将这种惊叹内化为自己的 Sense，我们需要执行一套完整的逆向工程循环：
（1）记录 (Record)：捕捉情绪颗粒度
不要等回头再想，要在“惊叹”发生的当下，像捕捉蝴蝶一样捕捉你的情绪：
- 截屏/录屏：记录下那个让你嘴角上扬或瞳孔放大的瞬间（Aha Moment）。
- 微观情绪标注：问自己，“这一秒，为什么我觉得‘爽’？”是因为那个丝滑的转场动画，还是因为文案恰好击中了我的软肋，还是因为它的响应速度快得不可思议？
- 案例：Linear 的官网之所以让人惊叹，不仅因为设计，更因为当你按 J / K 键时的毫秒级响应，这种“掌控感”是情绪的来源。
（2）解剖 (Peel)：上帝视角的逻辑拆解
切换到产品经理的上帝视角，透过表皮看骨架。思考它做对了哪三件事：
- 它满足了哪个层级的需求？是底层的生理/安全，还是顶层的自我实现/虚荣？它是帮你省了时间，还是帮你杀了时间？
- 它极其大胆地“删减”了什么？伟大的产品往往由它不做什么来定义。TikTok 删减了用户“选择看什么”的权利，直接喂饭；Notion 早期删减了复杂的格式兼容，只保留 Block。
- 它的核心增长飞轮是什么？它是如何让你忍不住想分享给别人的？是利用了你的炫耀欲，还是单纯的互利机制？
（3）重构 (Reconstruct)：全栈视角的复刻推演
发挥全栈工程师的技术优势，在脑海中（或草稿纸上）尝试重建它。
- 技术推演：为了实现这个丝滑体验，它的前端可能用了什么技术栈？后端是如何处理高并发的？如果你来做，你会怎么设计数据库 Schema？
- 成本估算：它为了这个体验，付出了多大的工程代价？这个代价在商业上划算吗？
（4）沉淀 (Crystallize)：输出倒逼内化
这是最关键、却最常被忽略的一步。没有输出的思考，就像没有 commit 的代码，随时会丢失。
4. 结语：从“如何实现”的焦虑中解放，拥抱“为何而做”的自由
在 AI 时代，代码生成的边际成本正在无限趋近于零。当“实现”不再是不可逾越的壁垒，“洞察”与“品位”便成了新的护城河。
未来的全栈工程师将不再是 [前端 + 后端]，而是 [技术理解力 x 产品敏锐度]的化学反应：
- 技术是我们的压舱石，让我们知晓可能性的边界，不至于在天马行空中失重；
- 产品 Sense 是我们的罗盘，让在生成的洪流中锁定航向，不至于在低价值的代码堆里荒废时光。
产品 Sense 的终点从来不是“不做错的决定”——那是全知视角的奢望。它的终点是“拥有比别人更短的纠错半径”：在错误发生时，能以最低的成本感知并修正。
保持敏锐，保持饥饿，对“用户下一秒的皱眉”心存敬畏。因为算法无法计算“痛点”，而那个皱眉的瞬间，往往就是下一款好产品的起点。
',59)])])}const b=s(i,[["render",o]]);export{h as __pageData,b as default};
+import{_ as s,g as t,h as n,U as m}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const h=JSON.parse('{"title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","frontmatter":{"date":"2025-10-23T16:05:50.000Z","title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","sticky":1,"top":true,"categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/engineer-build-product-sense"},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md","filePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"}'),i={name:"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"};function o(e,a,l,r,p,d){return n(),t("div",null,[...a[0]||(a[0]=[m('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md for this page in Markdown format
当“实现”不再是壁垒：工程师如何构建产品 Sense？
摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。
1. 引言
在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。
但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 "Code Smell"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。
一个成功的产品决策，往往发生在三个维度的交汇点：
- 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更快到达目的地”。
- 商业可行性（Business Viability）：不仅能做出来，还能算得过账。像 Dropbox 早期利用病毒式裂变降低获客成本，就是商业嗅觉的体现。
- 技术可实现性（Technical Feasibility）：在“完美的架构”和“明天就能上线”之间找到平衡。ChatGPT 的爆发，正是技术积累终于跨过了“可用性阈值”的临界点。
产品 Sense 是产品经理、设计师乃至创业者经常被提及、却也难以量化的能力之一。它并非玄学，而是一套可拆解、可训练、可迭代的思维模型：在信息不完整、目标模糊、资源受限的情况下，依然能快速判断「做什么」与「不做什么」，并让用户愿意为之买单或停留。
2. 解构产品 Sense 的数学之美
如果把产品 Sense 仅仅看作是“灵光一现”的艺术，那它就是不可复制的黑盒。作为工程师，我们更习惯于透过现象探寻底层的运行规律。
事实上，那些看似玄妙的直觉判断，往往是潜意识在极短时间内完成的高维计算。为了让这个抽象概念变得可解构、可训练，我尝试用理性的数学语言来重构感性的产品直觉，将其提炼为以下三个核心公式。
2.1. 极简杠杆公式：寻找 ROI 的最大解
NOTE
核心逻辑：卓越的产品嗅觉（产品 Sense）本质上是一种寻找“高杠杆解”的能力，对投入产出比（ROI）极致敏感。它要求我们敏锐地发现那些 “价值极高，但实现较低” 的低垂机会（Low Hanging Fruits），并果断放弃那些 “价值低又很难做” 的伪需求（看似美好，实则陷入技术泥潭）。
适用场景：技术选型决策、Feature 排期优先级、MVP 边界界定。
对于技术背景的开发者，最大的陷阱往往是“对过度设计的迷恋” 与 “为了技术而技术的自我感动”。因为掌握了某个新技术，就强行创造一个需求，但好的 Product Sense 其实是投入产出比（ROI）的直觉：
Product Sense=ComplexityUser Value
- 分子——用户价值（User Value）： 痛点烈度 × 覆盖广度不仅仅是“这个问题痛不痛”，而是要量化思考：这是一个高频刚需，还是低频痒点？解决它能为业务带来多大的增量（留存、转化或效率提升）？
- 分母——实现复杂度（Complexity）： 开发成本 + 维护税复杂度不仅是 Coding 的时间，更包含未来的维护成本、系统熵增以及用户认知的负担。全栈的智慧在于：用最简单的技术栈（Low Complexity），去撬动最大的业务价值。敢于在非核心功能上使用“笨办法”，是为了在核心体验上以此换取“极致体验”。
2.2. 洞察力公式：理智与情感的共舞
NOTE
核心逻辑：同理心提供"方向"，批判性思维提供"导航"
- 同理心告诉你"用户很痛苦"，批判性思维告诉你"痛苦的根源是什么"。
- 同理心告诉你"用户想要什么"，批判性思维告诉你"为什么想要"和"有没有更好的解决方案"。
适用场景：需求分析、用户调研、产品定位、功能设计、A/B 测试方案设计。
仅有同理心，产品容易沦为“臃肿的许愿池”（用户要什么给什么，导致产品臃肿）；仅有批判性思维，产品容易变成“冰冷的逻辑机器”（数据看似完美，却缺乏打动人心的人性温度）。因此，产品 Sense 本质上也是同理心与批判性思维的结合：
例如，用户抱怨"App 太复杂"，同理心让你感受到用户的挫败感，批判性思维让你追问：是功能太多？还是导航不清晰？还是学习成本太高？——不同的根源需要不同的解决方案。
Product Sense=Empathy×Critical Thinking
注意，这里是乘法关系而不是加法，意味着任何一个为零，整个结果都是零。只有同理心但缺乏批判性思维，会做出"用户要什么就给什么"的平庸产品；只有批判性思维但缺乏同理心，会做出"技术上完美但用户不买账"的产品。
2.3. AI 前沿视角公式：从“功能产品”到“语境构建”
NOTE
核心洞察：AI 时代的稀缺资源不再是“生成答案的能力”（模型已经具备），而是“提出正确问题的能力”。Product Sense 的核心从“设计功能交互”转变为“设计隐性的思维路径”，我们需要同时具备 翻译官（将模糊需求结构化） 和 架构师（构建智能体工作流） 的双重能力。
AI 模型本身是通用的引擎，我们需要为它设计底盘和方向盘，产品 Sense 在 AI 时代也就包含了新的特征：定义问题的能力——能把模糊的人类需求翻译成 AI 能理解的精确指令和环境：
Product Sense=Problem Definition+Context Design
- 定义问题（Problem Definiton）：
- 结构化歧义：AI 拥有无限的潜力，也伴随着无限的发散。Product Sense 在此处体现为 “收敛能力”——能否将一个模糊的业务痛点（如“分析用户情绪”），拆解为一组 AI 可理解、可执行的精准意图。
- 工作流架构：这不仅仅是写出一句完美的 Prompt，更是设计 Agentic Workflow（智能体工作流）的过程。我们需要判断哪些环节利用 LLM 的逻辑推理（概率性），哪些环节必须由传统代码（确定性）来兜底，从而构建出稳定可靠的系统。
- 语境设计（Context Design）：从“喂数据”到“构建信息场域”
- 无形界面设计：在 AI 应用中，真正的 UI 往往不是屏幕上的像素，而是看不见的 Context Window（上下文窗口）。Product Sense 就是设计这个“无形界面”的艺术——决定让 AI “看到”什么，以及“忽略”什么。
- 约束与边界工程：Product Sense 在这里体现为：我们能否为 AI 构建一个“全知全能”且“专注当下”的上下文环境，使其输出精准且可控。核心挑战是：如何在有限的上下文窗口（Context Window）中，提供最关键的先验知识、约束条件和少样本（Few-Shot）案例，让 AI 在你预设的“语境场”里精准舞蹈，而不是胡乱幻觉。
3. 刻意练习：如何从“凭感觉”到“有直觉”？
很多人认为 Sense 是天赋，无法学习，但我坚信直觉是经验在潜意识里的压缩算法。我们可以通过以下三个步骤的“刻意练习”来训练这种算法：
3.1. 建立“预测-验证”的反馈闭环
这是最硬核的训练法，不要只是被动地看数据，要主动做预测。
- 练习方法：在任何新功能上线前（或者观察竞品改版时），在笔记本上写下你的预测。
- “我赌这个按钮改为红色，点击率会提升 5%。”
- “我认为竞品推出这个功能是想解决留存问题，但可能会导致用户反感。”
- 复盘：一周后，看真实数据或市场反馈。如果你猜对了，强化这个直觉。如果你猜错了，这才是最宝贵的时刻：去深究为什么？是高估了用户动力？还是低估了操作门槛？
- 原理：大模型的训练依靠 Loss Function（损失函数）来收敛，人的直觉也一样。只有通过不断的“预测失败”，我们的大脑才能修正权重，从而获得更精准的 Sense。
3.2. 培养“摩擦力日记”
很多时候我们对痛点视而不见，是因为我们习惯了，要训练产品 Sense，就要恢复对“不舒服”的敏感度。
3.3. 解构“魔法”：从惊叹到复刻的逆向工程
当我们遇到一个让自己惊叹的产品（比如初次使用 ChatGPT或沉迷于 Vibe Coding）时，千万不要只停留在消费者的视角感叹“真好用”。那是“魔法”生效的时刻，也是你作为魔术师学徒拆解戏法的最佳时机。
若想将这种惊叹内化为自己的 Sense，我们需要执行一套完整的逆向工程循环：
（1）记录 (Record)：捕捉情绪颗粒度
不要等回头再想，要在“惊叹”发生的当下，像捕捉蝴蝶一样捕捉你的情绪：
- 截屏/录屏：记录下那个让你嘴角上扬或瞳孔放大的瞬间（Aha Moment）。
- 微观情绪标注：问自己，“这一秒，为什么我觉得‘爽’？”是因为那个丝滑的转场动画，还是因为文案恰好击中了我的软肋，还是因为它的响应速度快得不可思议？
- 案例：Linear 的官网之所以让人惊叹，不仅因为设计，更因为当你按 J / K 键时的毫秒级响应，这种“掌控感”是情绪的来源。
（2）解剖 (Peel)：上帝视角的逻辑拆解
切换到产品经理的上帝视角，透过表皮看骨架。思考它做对了哪三件事：
- 它满足了哪个层级的需求？是底层的生理/安全，还是顶层的自我实现/虚荣？它是帮你省了时间，还是帮你杀了时间？
- 它极其大胆地“删减”了什么？伟大的产品往往由它不做什么来定义。TikTok 删减了用户“选择看什么”的权利，直接喂饭；Notion 早期删减了复杂的格式兼容，只保留 Block。
- 它的核心增长飞轮是什么？它是如何让你忍不住想分享给别人的？是利用了你的炫耀欲，还是单纯的互利机制？
（3）重构 (Reconstruct)：全栈视角的复刻推演
发挥全栈工程师的技术优势，在脑海中（或草稿纸上）尝试重建它。
- 技术推演：为了实现这个丝滑体验，它的前端可能用了什么技术栈？后端是如何处理高并发的？如果你来做，你会怎么设计数据库 Schema？
- 成本估算：它为了这个体验，付出了多大的工程代价？这个代价在商业上划算吗？
（4）沉淀 (Crystallize)：输出倒逼内化
这是最关键、却最常被忽略的一步。没有输出的思考，就像没有 commit 的代码，随时会丢失。
4. 结语：从“如何实现”的焦虑中解放，拥抱“为何而做”的自由
在 AI 时代，代码生成的边际成本正在无限趋近于零。当“实现”不再是不可逾越的壁垒，“洞察”与“品位”便成了新的护城河。
未来的全栈工程师将不再是 [前端 + 后端]，而是 [技术理解力 x 产品敏锐度]的化学反应：
- 技术是我们的压舱石，让我们知晓可能性的边界，不至于在天马行空中失重；
- 产品 Sense 是我们的罗盘，让在生成的洪流中锁定航向，不至于在低价值的代码堆里荒废时光。
产品 Sense 的终点从来不是“不做错的决定”——那是全知视角的奢望。它的终点是“拥有比别人更短的纠错半径”：在错误发生时，能以最低的成本感知并修正。
保持敏锐，保持饥饿，对“用户下一秒的皱眉”心存敬畏。因为算法无法计算“痛点”，而那个皱眉的瞬间，往往就是下一款好产品的起点。
',59)])])}const b=s(i,[["render",o]]);export{h as __pageData,b as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.JciUte9l.lean.js" "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.CO18rPj4.lean.js"
similarity index 96%
rename from "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.JciUte9l.lean.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.CO18rPj4.lean.js"
index 7e5ddfc4..99335b96 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.JciUte9l.lean.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_02.\346\226\260 T \345\236\213\344\272\272_21.\345\267\245\347\250\213\345\270\210\345\246\202\344\275\225\346\236\204\345\273\272\344\272\247\345\223\201 Sense.md.CO18rPj4.lean.js"
@@ -1 +1 @@
-import{_ as s,g as t,h as n,U as m}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const h=JSON.parse('{"title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","frontmatter":{"date":"2025-10-23T16:05:50.000Z","title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","sticky":1,"top":true,"categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/engineer-build-product-sense"},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md","filePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"}'),i={name:"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"};function o(e,a,l,r,p,d){return n(),t("div",null,[...a[0]||(a[0]=[m("",59)])])}const b=s(i,[["render",o]]);export{h as __pageData,b as default};
+import{_ as s,g as t,h as n,U as m}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const h=JSON.parse('{"title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","frontmatter":{"date":"2025-10-23T16:05:50.000Z","title":"当“实现”不再是壁垒：工程师如何构建产品 Sense？","description":"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。","sticky":1,"top":true,"categories":["产品 Sense","AI"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/engineer-build-product-sense"},"headers":[],"relativePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md","filePath":"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"}'),i={name:"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md"};function o(e,a,l,r,p,d){return n(),t("div",null,[...a[0]||(a[0]=[m("",59)])])}const b=s(i,[["render",o]]);export{h as __pageData,b as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.CbayMoYI.js" "b/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.gAigzrX9.js"
similarity index 99%
rename from "assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.CbayMoYI.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.gAigzrX9.js"
index adec1c19..7af8f217 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.CbayMoYI.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.gAigzrX9.js"
@@ -1 +1 @@
-import{_ as s,g as t,h as n,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","frontmatter":{"date":"2025-11-24T21:50:00.000Z","title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/small-rule-learn","categories":["产品 Sense"],"tags":["产品 Sense","商业化"]},"headers":[],"relativePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md","filePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"}'),r={name:"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"};function o(i,a,p,l,c,m){return n(),t("div",null,[...a[0]||(a[0]=[e('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md for this page in Markdown format
放弃增长执念，为什么“小而美”才是可持续之路
摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。
书籍信息
书名：《小而美：持续盈利的经营法则》
作者：[美] 萨希尔·拉文吉亚
核心标签：极简创业｜社区本位｜持续盈利｜创作者经济
一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。
1. 社区先行：从“我是谁”到“我能为谁解决问题”
传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 → 问题 → 流程 → 产品 → 商业。
极简主义创业者绝不是在真空里写代码的人，他们首先是某个社区的深度参与者和“创作者”。在动手构建任何复杂的软件架构之前，第一步永远是把自己沉浸到特定的人群中。只有当我们花时间去倾听、去贡献价值、甚至通过公开写作和分享去教授他人时，那些真实而具体的高价值痛点才会自然浮现。
对于致力于通过技术提效的开发者而言，这一逻辑尤为深刻。当我们试图构建智能化的知识管理工具，或是研发将非结构化数据自动化转换为标准代码的基建体系时，切入点不应是盲目堆砌前沿技术栈，而应深挖特定圈层里的真实痛点。当我们成为社区中那个"总能用技术手段帮大家搞定繁琐工作"的可靠支柱时，第一批种子用户会自然诞生。因此，我们要学着先做一个乐于助人的创作者，创业不过是水到渠成之事。
2. 极简流转：用“克制”对抗“熵增”，用“自动化”替代“堆人力”
书中另一个贯穿始终的理念是"少即是多"。在找到真实需求后，极简主义创业者不会立刻规划一个包罗万象的大型系统，而是先用最原始、最人工的“流程”去跑通闭环。
唯有当用户为这个人工流程付费后，才开始进入“产品化”阶段。此时的核心策略是将重复性的工作外包或交给代码，让机器替代重复，让外包承接繁琐。身处当下的技术变革期，这一点显得尤为契合时宜。借助大语言模型等智能化工具的辅助，我们不仅可以极大地降低开发成本，更能将很多以往需要极高人力成本的环节直接交给自动化程序处理。
譬如，复杂的数据清洗、异常诊断与迭代优化，可委托给智能代理自主完成；日常的内容分发与用户服务，亦能通过技术手段实现无缝流转。无需奢华的办公场地，不必急于扩充团队规模，“雇佣软件而不是雇佣人力”，这种极度的克制不仅带来了极低的试错成本，更赋予了产品快速迭代、早早交付的敏捷性。
3. 盈利自信：做时间的朋友，而非资本的奴隶
书中提出了一个极具穿透力的概念——盈利自信。
当一家企业赚的钱大于花的钱时，它就拥有了无限长的跑道。这就意味着，你不再需要为了迎合资本的审美而扭曲产品的初衷，也不需要在没有想清楚商业模式的时候就去烧钱买流量。这种自信，是坚守长期主义和价值创造的客观根基。
极简主义创业者瞄准的是前一百个愿意付费的真实客户，而不是成千上万个只索取不贡献的“僵尸粉”。他们把资金花在维护老客户和提升产品体验上，而不是虚无缥缈的广告创意上。当生存不再受制于人，我们就可以按照科学的节奏，安排好日常的专注时间，借助现代化的协同工具进行高效的异步沟通与知识沉淀，让企业的发展速度与个人的生活节奏达成一种健康的平衡。在笔者看来，这其实与全栈工程师们追求的代码高可用性与系统稳定性，在哲学层面是不谋而合的。
4. 建造你想住的房子：真实的营销与价值观契合
在营销与团队构建层面，拉文吉亚倡导“做最真实的自己”。营销不是为了制造博人眼球的头条新闻，而是通过“教学、激励、娱乐”三个层次，毫无保留地分享自己踩过的坑与获得的真知灼见，从而吸引气味相投的粉丝。这种公开构建的模式，本身就是一种极具穿透力的品牌资产。
同样的逻辑也适用于团队。企业是一栋你建造的、且需要自己住进去的房子。比起用虚高的薪水去挖人，不如尽早且频繁地公开自己的价值观和工作流。明确告诉世界：我们追求的是极简、是结果导向、是每个人都要像经营者一样主动思考并承担责任。适合永远是双向的，当你坚守这种透明和真实，自然会吸引到那些愿意通过项目互助协作、追求长期成长的优秀同路人。
5. 总结与反思
《小而美》不仅仅是一本商业指南，更是一场关于工作与生活方式的哲学探讨。它提醒我们，技术的进步与工具的完善，已经让个体有机会摆脱庞大组织的束缚，以极低的成本去解决一个具体的社会问题。
我们不必成为改变世界的庞然大物，只要能结合自身的优势，找准一个社区，用精湛的手艺和智能化的工具为他们扫除障碍，并在这个过程中保持盈利与内心的从容，这就已经是一次足够伟大的商业实践。小，绝不是格局的局限，而是克制、精准与持续繁荣的起点。
',24)])])}const g=s(r,[["render",o]]);export{d as __pageData,g as default};
+import{_ as s,g as t,h as n,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","frontmatter":{"date":"2025-11-24T21:50:00.000Z","title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/small-rule-learn","categories":["产品 Sense"],"tags":["产品 Sense","商业化"]},"headers":[],"relativePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md","filePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"}'),r={name:"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"};function o(i,a,p,l,c,m){return n(),t("div",null,[...a[0]||(a[0]=[e('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md for this page in Markdown format
放弃增长执念，为什么“小而美”才是可持续之路
摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。
书籍信息
书名：《小而美：持续盈利的经营法则》
作者：[美] 萨希尔·拉文吉亚
核心标签：极简创业｜社区本位｜持续盈利｜创作者经济
一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。
1. 社区先行：从“我是谁”到“我能为谁解决问题”
传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 → 问题 → 流程 → 产品 → 商业。
极简主义创业者绝不是在真空里写代码的人，他们首先是某个社区的深度参与者和“创作者”。在动手构建任何复杂的软件架构之前，第一步永远是把自己沉浸到特定的人群中。只有当我们花时间去倾听、去贡献价值、甚至通过公开写作和分享去教授他人时，那些真实而具体的高价值痛点才会自然浮现。
对于致力于通过技术提效的开发者而言，这一逻辑尤为深刻。当我们试图构建智能化的知识管理工具，或是研发将非结构化数据自动化转换为标准代码的基建体系时，切入点不应是盲目堆砌前沿技术栈，而应深挖特定圈层里的真实痛点。当我们成为社区中那个"总能用技术手段帮大家搞定繁琐工作"的可靠支柱时，第一批种子用户会自然诞生。因此，我们要学着先做一个乐于助人的创作者，创业不过是水到渠成之事。
2. 极简流转：用“克制”对抗“熵增”，用“自动化”替代“堆人力”
书中另一个贯穿始终的理念是"少即是多"。在找到真实需求后，极简主义创业者不会立刻规划一个包罗万象的大型系统，而是先用最原始、最人工的“流程”去跑通闭环。
唯有当用户为这个人工流程付费后，才开始进入“产品化”阶段。此时的核心策略是将重复性的工作外包或交给代码，让机器替代重复，让外包承接繁琐。身处当下的技术变革期，这一点显得尤为契合时宜。借助大语言模型等智能化工具的辅助，我们不仅可以极大地降低开发成本，更能将很多以往需要极高人力成本的环节直接交给自动化程序处理。
譬如，复杂的数据清洗、异常诊断与迭代优化，可委托给智能代理自主完成；日常的内容分发与用户服务，亦能通过技术手段实现无缝流转。无需奢华的办公场地，不必急于扩充团队规模，“雇佣软件而不是雇佣人力”，这种极度的克制不仅带来了极低的试错成本，更赋予了产品快速迭代、早早交付的敏捷性。
3. 盈利自信：做时间的朋友，而非资本的奴隶
书中提出了一个极具穿透力的概念——盈利自信。
当一家企业赚的钱大于花的钱时，它就拥有了无限长的跑道。这就意味着，你不再需要为了迎合资本的审美而扭曲产品的初衷，也不需要在没有想清楚商业模式的时候就去烧钱买流量。这种自信，是坚守长期主义和价值创造的客观根基。
极简主义创业者瞄准的是前一百个愿意付费的真实客户，而不是成千上万个只索取不贡献的“僵尸粉”。他们把资金花在维护老客户和提升产品体验上，而不是虚无缥缈的广告创意上。当生存不再受制于人，我们就可以按照科学的节奏，安排好日常的专注时间，借助现代化的协同工具进行高效的异步沟通与知识沉淀，让企业的发展速度与个人的生活节奏达成一种健康的平衡。在笔者看来，这其实与全栈工程师们追求的代码高可用性与系统稳定性，在哲学层面是不谋而合的。
4. 建造你想住的房子：真实的营销与价值观契合
在营销与团队构建层面，拉文吉亚倡导“做最真实的自己”。营销不是为了制造博人眼球的头条新闻，而是通过“教学、激励、娱乐”三个层次，毫无保留地分享自己踩过的坑与获得的真知灼见，从而吸引气味相投的粉丝。这种公开构建的模式，本身就是一种极具穿透力的品牌资产。
同样的逻辑也适用于团队。企业是一栋你建造的、且需要自己住进去的房子。比起用虚高的薪水去挖人，不如尽早且频繁地公开自己的价值观和工作流。明确告诉世界：我们追求的是极简、是结果导向、是每个人都要像经营者一样主动思考并承担责任。适合永远是双向的，当你坚守这种透明和真实，自然会吸引到那些愿意通过项目互助协作、追求长期成长的优秀同路人。
5. 总结与反思
《小而美》不仅仅是一本商业指南，更是一场关于工作与生活方式的哲学探讨。它提醒我们，技术的进步与工具的完善，已经让个体有机会摆脱庞大组织的束缚，以极低的成本去解决一个具体的社会问题。
我们不必成为改变世界的庞然大物，只要能结合自身的优势，找准一个社区，用精湛的手艺和智能化的工具为他们扫除障碍，并在这个过程中保持盈利与内心的从容，这就已经是一次足够伟大的商业实践。小，绝不是格局的局限，而是克制、精准与持续繁荣的起点。
',24)])])}const g=s(r,[["render",o]]);export{d as __pageData,g as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.CbayMoYI.lean.js" "b/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.gAigzrX9.lean.js"
similarity index 97%
rename from "assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.CbayMoYI.lean.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.gAigzrX9.lean.js"
index 7f75a59b..0d6355ce 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.CbayMoYI.lean.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_04.\344\272\247\345\223\201\345\210\233\351\200\240\344\270\216\345\225\206\344\270\232\345\214\226_30.\343\200\212\345\260\217\350\200\214\347\276\216\357\274\232\346\214\201\347\273\255\347\233\210\345\210\251\347\232\204\347\273\217\350\220\245\346\263\225\345\210\231\343\200\213\350\257\273\345\220\216\346\204\237.md.gAigzrX9.lean.js"
@@ -1 +1 @@
-import{_ as s,g as t,h as n,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","frontmatter":{"date":"2025-11-24T21:50:00.000Z","title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/small-rule-learn","categories":["产品 Sense"],"tags":["产品 Sense","商业化"]},"headers":[],"relativePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md","filePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"}'),r={name:"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"};function o(i,a,p,l,c,m){return n(),t("div",null,[...a[0]||(a[0]=[e("",24)])])}const g=s(r,[["render",o]]);export{d as __pageData,g as default};
+import{_ as s,g as t,h as n,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","frontmatter":{"date":"2025-11-24T21:50:00.000Z","title":"放弃增长执念，为什么“小而美”才是可持续之路","description":"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png","permalink":"/product-sense/small-rule-learn","categories":["产品 Sense"],"tags":["产品 Sense","商业化"]},"headers":[],"relativePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md","filePath":"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"}'),r={name:"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md"};function o(i,a,p,l,c,m){return n(),t("div",null,[...a[0]||(a[0]=[e("",24)])])}const g=s(r,[["render",o]]);export{d as __pageData,g as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.-U_WT1WE.js" "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.j-w2xxuV.js"
similarity index 99%
rename from "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.-U_WT1WE.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.j-w2xxuV.js"
index ba038174..34a4b8d7 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.-U_WT1WE.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.j-w2xxuV.js"
@@ -1 +1 @@
-import{_ as a,g as r,h as o,U as s}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","frontmatter":{"date":"2025-11-14T16:00:00.000Z","title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","permalink":"/product-sense/insight-model","categories":["产品 Sense"],"tags":["产品 Sense","系统洞察力"]},"headers":[],"relativePath":"10.产品 Sense/05.方法论/40.洞察力模型.md","filePath":"10.产品 Sense/05.方法论/40.洞察力模型.md"}'),i={name:"10.产品 Sense/05.方法论/40.洞察力模型.md"};function e(n,t,p,l,g,d){return o(),r("div",null,[...t[0]||(t[0]=[s('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/05.方法论/40.洞察力模型.md for this page in Markdown format
洞察力模型：如何看透产品与技术背后的系统逻辑？
摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。
1. 表象背后藏着决定一切的“系统黑盒”
我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。
当系统运转正常时，我们可以遵循经验和规律按部就班地做事。可一旦系统出了问题，过往的经验往往会瞬间失效。如果我们无法破译表象背后的系统，就不可能知道问题到底出在哪一行“代码”上，更别提去修复它了。因此，所谓锻炼洞察力，本质上就是为了：理解“表象”背后的“系统”，从而在根源上解决问题。
2. 系统的核心：要素 * 连接关系
系统并不是一团乱麻，而是一组相互链接的要素，它是有公式可循：系统 = 要素 * 连接关系。举个经典的机械手表例子：表盘、表冠、几百个微小的齿轮和游丝，这些都是构成手表的“要素”。而这几百个零件是如何互相咬合、传递动力的，就是它们之间的“连接关系”。
放到工作中也是同理：做产品的要素是用户、功能、流量、运营；做团队的要素是成员、岗位、目标、资源。然而，绝大多数人虽然能轻松看清这些要素，却往往习惯性忽略它们之间的连接关系——而90%的问题根源，恰恰就藏在这些看不见的连接之中。
这也带来了洞察力新的定义：透过表象，不仅能看到系统的各个要素，更能看透要素之间错综复杂的连接关系。
在现实中，我们往往很容易一眼看到“要素”（比如一个团队里有几个人，一个页面上有几个按钮），却极其容易忽略“连接关系”（比如这几个人之间的利益与权责分配，按钮背后的数据流向）。然而，真正高阶的解决方案，往往就藏在那些看不见的连接关系里。
想要练出这种能力，我们要拆解系统里的 5 个核心要点：变量、因果链、增强回路、调节回路、滞后效应。
- 1 种要素：变量
- 4 种连接关系：因果链、增强回路、调节回路、滞后效应
3. 变量：系统里的“变化因子”
变量，顾名思义，是系统中会随着时间发生变化的要素。一旦我们将变量放进时间轴里观察，它就会呈现出两种截然不同的状态：存量与流量。
存量：是某一特定时刻，系统中积累的变量总和。
流量：是一段时间内，变量流入或流出的速率。
存量是系统的“家底”，流量决定存量的增减。看懂变量的存量与流量，才能找准系统变化的源头，而不是只盯着存量结果干着急。
4. 因果链：搭建系统的骨架
用因果链连接变量，是训练洞察力的基本功。
如果说变量是独立的节点，那么将它们连接起来的线段就是“因果链”。因果链描述的是变量之间“增强”或“减弱”的关系。如果没有这些链条，再多的变量堆砌在一起，也只是一盘毫无生机的散沙，无法构成生生不息的系统。
行动小建议：
- 在日常复盘时，试着拿起两个看似相关的指标（比如“代码提测速度”和“线上故障率”），问问自己：它们之间是因增强果，还是因减弱果？
- 看似简单的因果链，一段段咬合起来，最终就构成了复杂的商业或技术系统.
5. 增强回路：造就指数级增长
变量是节点，因果链是线段，但线段总有尽头，能量传到末端就结束了。如果我们能把结尾与开头也连接起来，形成一个闭环，会发生什么？于是回路诞生了。回路分为两种：增强回路与调节回路。
不管是人生规划、产品迭代还是商业设计：小成功靠聪明才智，大成就靠建立正向的"增强回路"。所谓增强回路，就是两条或多条因果链首尾相连，形成的自我强化闭环：
正向增强回路（因增强果，果又增强因）：比如开源生态建设，你贡献的优质代码越多，吸引的用户就越多。用户越多，反馈和参与共建的开发者就越多，进而代码质量更高。长久以来，人们给这种现象起了无数霸气的名字“马太效应、赢家通吃、复利效应、指数级增长”。
负向增强回路（因减弱果，果又减弱因，即恶性循环）：典型的就是“技术债”，为了赶进度写出烂代码，导致系统 Bug 频发。为了修 Bug 占用了新功能开发时间，时间不够又只能继续写烂代码……如此无限死循环。
6. 调节回路：让系统回归平衡
如果说增强回路的存在，是让这个世界走向极端；那么调节回路的存在，就是让这个世界回归平衡。凡是有“增强回路”的地方，七步之内，必然有“调节回路”。
想象一家处于爆发期的小型科技公司：
遇到这种情况该怎么办？
答案是：切断“管理复杂度”这个“调节回路”，释放进一步增长的潜力。一旦你看懂了调节回路，你可能瞬间就顿悟了：很多时候，产品或个人的突破并不需要拼命猛踩油门，只要松开脚下的刹车就好了。
增强回路，追求极端。调节回路，回归平衡。增强回路和调节回路这对孪生兄弟，性格迥然不同，但却共同构建了最美妙的世界万物。
7. 滞后效应：时间的迷雾
因果不是瞬间连接，回路也不是瞬间闭合，它们之间有个时间差，有滞后效应。
在物理世界和现实系统中，因果并不是瞬间连接的，回路也不是瞬间闭合的，它们之间存在一个时间差，这时间差就是“滞后效应”。
滞后效应让原本在空间维度上就很复杂的系统，又增加了时间维度的复杂性。它会让原因和结果在时空上错位，极大地误导我们的判断力。就像洗澡时调水温，你觉得水冷，往热水方向拧了一点，没反应，于是你继续猛拧，结果几秒后直接被烫伤。
在试图洞察万事万物时，我们心里一定要装着一条“时间轴”。无论是发布一个新功能、重构一段底层代码，还是坚持写技术博客，效应的显现都需要时间。懂得等待，也是洞察力的一部分。
8. 总结：从观察者到洞察者
当你下次在产品或代码中遇到棘手问题时，不妨在脑海里跑一遍这 5 个关键步骤（建议把它固化进你的思考框架中）：
找到核心存量
找到关键因果链
找到增强回路（你在踩油门吗？）
找到调节回路（哪里有刹车？）
考虑滞后效应（是不是子弹还要飞一会儿？）
看看系统到底卡在哪一个节点，你可以重构哪些连接关系？做到这些，才算真正拥有了“产品 Sense”的最高形态——系统洞察力。
普通人观察表象，优秀的人洞察系统，希望这套模型，能成为你升级认知操作系统的核心组件。
',49)])])}const m=a(i,[["render",e]]);export{c as __pageData,m as default};
+import{_ as a,g as r,h as o,U as s}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","frontmatter":{"date":"2025-11-14T16:00:00.000Z","title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","permalink":"/product-sense/insight-model","categories":["产品 Sense"],"tags":["产品 Sense","系统洞察力"]},"headers":[],"relativePath":"10.产品 Sense/05.方法论/40.洞察力模型.md","filePath":"10.产品 Sense/05.方法论/40.洞察力模型.md"}'),i={name:"10.产品 Sense/05.方法论/40.洞察力模型.md"};function e(n,t,p,l,g,d){return o(),r("div",null,[...t[0]||(t[0]=[s('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/05.方法论/40.洞察力模型.md for this page in Markdown format
洞察力模型：如何看透产品与技术背后的系统逻辑？
摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。
1. 表象背后藏着决定一切的“系统黑盒”
我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。
当系统运转正常时，我们可以遵循经验和规律按部就班地做事。可一旦系统出了问题，过往的经验往往会瞬间失效。如果我们无法破译表象背后的系统，就不可能知道问题到底出在哪一行“代码”上，更别提去修复它了。因此，所谓锻炼洞察力，本质上就是为了：理解“表象”背后的“系统”，从而在根源上解决问题。
2. 系统的核心：要素 * 连接关系
系统并不是一团乱麻，而是一组相互链接的要素，它是有公式可循：系统 = 要素 * 连接关系。举个经典的机械手表例子：表盘、表冠、几百个微小的齿轮和游丝，这些都是构成手表的“要素”。而这几百个零件是如何互相咬合、传递动力的，就是它们之间的“连接关系”。
放到工作中也是同理：做产品的要素是用户、功能、流量、运营；做团队的要素是成员、岗位、目标、资源。然而，绝大多数人虽然能轻松看清这些要素，却往往习惯性忽略它们之间的连接关系——而90%的问题根源，恰恰就藏在这些看不见的连接之中。
这也带来了洞察力新的定义：透过表象，不仅能看到系统的各个要素，更能看透要素之间错综复杂的连接关系。
在现实中，我们往往很容易一眼看到“要素”（比如一个团队里有几个人，一个页面上有几个按钮），却极其容易忽略“连接关系”（比如这几个人之间的利益与权责分配，按钮背后的数据流向）。然而，真正高阶的解决方案，往往就藏在那些看不见的连接关系里。
想要练出这种能力，我们要拆解系统里的 5 个核心要点：变量、因果链、增强回路、调节回路、滞后效应。
- 1 种要素：变量
- 4 种连接关系：因果链、增强回路、调节回路、滞后效应
3. 变量：系统里的“变化因子”
变量，顾名思义，是系统中会随着时间发生变化的要素。一旦我们将变量放进时间轴里观察，它就会呈现出两种截然不同的状态：存量与流量。
存量：是某一特定时刻，系统中积累的变量总和。
流量：是一段时间内，变量流入或流出的速率。
存量是系统的“家底”，流量决定存量的增减。看懂变量的存量与流量，才能找准系统变化的源头，而不是只盯着存量结果干着急。
4. 因果链：搭建系统的骨架
用因果链连接变量，是训练洞察力的基本功。
如果说变量是独立的节点，那么将它们连接起来的线段就是“因果链”。因果链描述的是变量之间“增强”或“减弱”的关系。如果没有这些链条，再多的变量堆砌在一起，也只是一盘毫无生机的散沙，无法构成生生不息的系统。
行动小建议：
- 在日常复盘时，试着拿起两个看似相关的指标（比如“代码提测速度”和“线上故障率”），问问自己：它们之间是因增强果，还是因减弱果？
- 看似简单的因果链，一段段咬合起来，最终就构成了复杂的商业或技术系统.
5. 增强回路：造就指数级增长
变量是节点，因果链是线段，但线段总有尽头，能量传到末端就结束了。如果我们能把结尾与开头也连接起来，形成一个闭环，会发生什么？于是回路诞生了。回路分为两种：增强回路与调节回路。
不管是人生规划、产品迭代还是商业设计：小成功靠聪明才智，大成就靠建立正向的"增强回路"。所谓增强回路，就是两条或多条因果链首尾相连，形成的自我强化闭环：
正向增强回路（因增强果，果又增强因）：比如开源生态建设，你贡献的优质代码越多，吸引的用户就越多。用户越多，反馈和参与共建的开发者就越多，进而代码质量更高。长久以来，人们给这种现象起了无数霸气的名字“马太效应、赢家通吃、复利效应、指数级增长”。
负向增强回路（因减弱果，果又减弱因，即恶性循环）：典型的就是“技术债”，为了赶进度写出烂代码，导致系统 Bug 频发。为了修 Bug 占用了新功能开发时间，时间不够又只能继续写烂代码……如此无限死循环。
6. 调节回路：让系统回归平衡
如果说增强回路的存在，是让这个世界走向极端；那么调节回路的存在，就是让这个世界回归平衡。凡是有“增强回路”的地方，七步之内，必然有“调节回路”。
想象一家处于爆发期的小型科技公司：
遇到这种情况该怎么办？
答案是：切断“管理复杂度”这个“调节回路”，释放进一步增长的潜力。一旦你看懂了调节回路，你可能瞬间就顿悟了：很多时候，产品或个人的突破并不需要拼命猛踩油门，只要松开脚下的刹车就好了。
增强回路，追求极端。调节回路，回归平衡。增强回路和调节回路这对孪生兄弟，性格迥然不同，但却共同构建了最美妙的世界万物。
7. 滞后效应：时间的迷雾
因果不是瞬间连接，回路也不是瞬间闭合，它们之间有个时间差，有滞后效应。
在物理世界和现实系统中，因果并不是瞬间连接的，回路也不是瞬间闭合的，它们之间存在一个时间差，这时间差就是“滞后效应”。
滞后效应让原本在空间维度上就很复杂的系统，又增加了时间维度的复杂性。它会让原因和结果在时空上错位，极大地误导我们的判断力。就像洗澡时调水温，你觉得水冷，往热水方向拧了一点，没反应，于是你继续猛拧，结果几秒后直接被烫伤。
在试图洞察万事万物时，我们心里一定要装着一条“时间轴”。无论是发布一个新功能、重构一段底层代码，还是坚持写技术博客，效应的显现都需要时间。懂得等待，也是洞察力的一部分。
8. 总结：从观察者到洞察者
当你下次在产品或代码中遇到棘手问题时，不妨在脑海里跑一遍这 5 个关键步骤（建议把它固化进你的思考框架中）：
找到核心存量
找到关键因果链
找到增强回路（你在踩油门吗？）
找到调节回路（哪里有刹车？）
考虑滞后效应（是不是子弹还要飞一会儿？）
看看系统到底卡在哪一个节点，你可以重构哪些连接关系？做到这些，才算真正拥有了“产品 Sense”的最高形态——系统洞察力。
普通人观察表象，优秀的人洞察系统，希望这套模型，能成为你升级认知操作系统的核心组件。
',49)])])}const m=a(i,[["render",e]]);export{c as __pageData,m as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.-U_WT1WE.lean.js" "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.j-w2xxuV.lean.js"
similarity index 96%
rename from "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.-U_WT1WE.lean.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.j-w2xxuV.lean.js"
index 2303c5ad..a977001e 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.-U_WT1WE.lean.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_40.\346\264\236\345\257\237\345\212\233\346\250\241\345\236\213.md.j-w2xxuV.lean.js"
@@ -1 +1 @@
-import{_ as a,g as r,h as o,U as s}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","frontmatter":{"date":"2025-11-14T16:00:00.000Z","title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","permalink":"/product-sense/insight-model","categories":["产品 Sense"],"tags":["产品 Sense","系统洞察力"]},"headers":[],"relativePath":"10.产品 Sense/05.方法论/40.洞察力模型.md","filePath":"10.产品 Sense/05.方法论/40.洞察力模型.md"}'),i={name:"10.产品 Sense/05.方法论/40.洞察力模型.md"};function e(n,t,p,l,g,d){return o(),r("div",null,[...t[0]||(t[0]=[s("",49)])])}const m=a(i,[["render",e]]);export{c as __pageData,m as default};
+import{_ as a,g as r,h as o,U as s}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","frontmatter":{"date":"2025-11-14T16:00:00.000Z","title":"洞察力模型：如何看透产品与技术背后的系统逻辑？","description":"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。","permalink":"/product-sense/insight-model","categories":["产品 Sense"],"tags":["产品 Sense","系统洞察力"]},"headers":[],"relativePath":"10.产品 Sense/05.方法论/40.洞察力模型.md","filePath":"10.产品 Sense/05.方法论/40.洞察力模型.md"}'),i={name:"10.产品 Sense/05.方法论/40.洞察力模型.md"};function e(n,t,p,l,g,d){return o(),r("div",null,[...t[0]||(t[0]=[s("",49)])])}const m=a(i,[["render",e]]);export{c as __pageData,m as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.D6Tetc-8.js" "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.CUbjYJmR.js"
similarity index 99%
rename from "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.D6Tetc-8.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.CUbjYJmR.js"
index 5af8550d..4725d01f 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.D6Tetc-8.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.CUbjYJmR.js"
@@ -1 +1 @@
-import{_ as e,g as r,h as n,U as t}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","frontmatter":{"date":"2024-01-01T16:00:00.000Z","title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","categories":["产品 Sense"],"permalink":"/product-sense/using-economics-thinking"},"headers":[],"relativePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md","filePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"}'),i={name:"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"};function o(s,a,l,p,d,h){return n(),r("div",null,[...a[0]||(a[0]=[t('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/05.方法论/50.用经济学思维做产品.md for this page in Markdown format
用经济学思维做产品
摘要总结：经济学不仅是分析宏观数据的工具，更是洞察人性、优化资源配置、在约束条件下求最优解的思维方式。本文通过拆解日常生活中的经典案例，提炼成本收益、博弈均衡、有限理性、效率改进等核心经济学原理，并系统地将其应用到产品生命周期的核心环节——定义定位、定价策略、体验锁定及生态构建。最终，我们将这些原理沉淀为一套系统的、具有“经济直觉”的产品方法论，助力产品人完成从单纯的“体验设计师”向具备商业格局的“微观经济学家”跨越。
在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。
经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。
1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈
我们常被日常现象的“合理性”所迷惑，而经济学能帮我们拨开迷雾，看到冰山之下的成本收益权衡与竞争博弈。
1.1 容器的形状：方盒与圆瓶背后的成本战术
为什么牛奶通常装在方盒子里卖，而可乐却多装在圆瓶子里卖？用户提供的素材中，对使用习惯、包装物理属性（利乐纸易塑形，可乐高压圆柱均压）已有深刻见解。但深入思考，最核心的逻辑在于固定成本（Fixed Costs）与运营成本（Operating Costs）的权衡，以及资产特定性（Asset Specificity）。
超市里的软饮料多放在便宜的开放式货架上，运营成本极低。而牛奶需要低温储存，冰柜不仅昂贵（固定成本），且常年运行（运营成本）极高。冰柜里的存储空间不仅是资源，更是稀缺的、昂贵资产。方形容器能最大化冰柜的空间利用率，降低每单位体积的存储成本。可乐不惜牺牲这一优势，选择更趁手的圆瓶，是因为其开放式货架策略将存储成本降到了极低，可以用体验优势（使用习惯）来抵消额外的存储空间成本。
这一案例启示：产品设计不仅是关乎前端的用户体验（使用习惯），更需要从后端运营链条出发，思考核心稀缺资源的配置效率。在冰柜这个“资产特定”场景下，方盒子就是帕累托改进。
1.2 可乐的三十年价格迷局：双头垄断下的博弈均衡
可乐好像一直没有涨价，这几乎成了都市传说。深度拆解，这正是经济学中双头垄断（Duopoly）下，尤其是Bertrand 竞争博弈的经典案例。
Bertrand 竞争（Bertrand Competition）：假设两家公司生产同质化产品（如可口可乐和百事可乐），如果一家涨价，哪怕只涨一点点，精明的消费者就会全部流向另一家。为了维持市场份额，两家都不敢轻易涨价，最终价格趋向于接近零利润（或仅通过规模效应获得极低利润）的均衡状态。一旦形成博弈均衡，打破它需要巨大的替代成本和风险，例如涨价会被对方借低价抢占市场份额，且借助低利润将潜在进入者挡在门外。
规模效应与锚定效应：可乐是典型的薄利多销产品，利润通过极致的规模化获得。同时，“肥宅快乐水”的高性价比已成为消费者心理中的一个强锚定（Anchoring Effect）。涨价不仅面临博弈风险，还可能瞬间激发消费者的损失厌恶心理，导致流失。
经济学启示：在竞争激烈的成熟市场（尤其是产品高度同质化时），不仅要看用户价值，更要看博弈对手的行动边界。定价往往是竞争博弈后的动态平衡，而非单方面的价值宣称。此外，锁定效应（Lock-in Effect）不仅能锁定用户，有时也能通过“原汁原味”的营销锁定自身品牌策略。
1.3 “来都来了”与沉没成本陷阱：有限理性的普遍胜利
“来都来了，逛遍景点再说”，“来都来了，看完这昏昏欲睡的电影”。这种将错就错的思维模式，是人性的弱点，也是有限理性（Bounded Rationality）的证明。
理性人假说认为人是绝对自私且理智的，始终寻求以最小代价获得最大收益，不感情用事。但在现实中，人们往往无法客观地从未来的成本收益出发做决策，而是被已经发生在过去的投入——沉没成本（Sunk Costs）——所束缚。
经济学启示：沉没成本描述的是已经发生且与当前决策无关的费用。正确决策应“往日之不可追，来日之尚可期”，专注于未来的增量成本和收益。但对产品人而言，我们不仅要避免自己掉入沉没成本陷阱，更要深入研究用户的沉没感，将其转化为替代成本（Switching Costs），例如构建用户的网络效应、数据积累和品牌忠诚。
1.4 帕累托优化与最优体验：在约束条件下求最优解
租房案例中，兼顾价格便宜和交通便利在“既定状态”下，任何改变都不可能使一人变好而又不使另一人变坏，这便是帕累托最优（Pareto Efficiency）状态。
在产品设计中，我们不可能无限增加功能（会导致复杂度提升和体验牺牲）、不能无限降低价格（会导致商业不可持续）。优秀的产品设计就是在无数个 Trade-off 之间寻找到帕累托效率点。例如，通过 A/B 测试寻找更优解，就是试图进行帕累托改进——找到一种既不伤害核心用户体验，又能提升商业变现或用户粘性的路径。
2. 系统化方法论——将经济学思维系统化地应用到产品全生命周期
2.1 产品定义与定位：深入市场洞察与价值发现
寻找有效需求，利用供求关系发现市场蓝海：不仅要进行用户访谈，更要通过数据分析了解客户的需求、痛点和期望。深入研究市场意味着寻找那些未被满足的有效需求——即不仅有欲望且具备支付能力的（不管是金钱、时间还是隐私数据）需求。只有真正了解市场和客户，才能定位产品的核心功能和价值。
确定竞争壁垒，利用比较优势寻找产品核心竞争优势：分析竞争对手的产品、策略、市场份额，是为了找出自己的优势和不足。不仅能制定竞争策略，还能避免不必要的失误。我们应该追求做“只有你能做”或者“你做得最好”的事情，这就是产品的比较优势（Comparative Advantage）。
2.2 产品定价策略：最大化收益与捕获用户剩余
用户提供的定价点集中在价格歧视，我们将其深化和系统化，引入更多心理经济学。
2.3 产品用户体验与留存：构建锁定效应与对抗边际效用递减
利用沉没成本，利用沉没成本，利用替代成本构建锁定效应 (Lock-in Effect)：通过引导用户在产品中积累数据（云盘）、网络关系（社交网络）、品牌忠诚（生态系统），将用户的沉没投入转化为极高的替代成本，从而吸引用户持续使用。
利用边际效用递减，对抗边际效用递减增加用户活跃度。深度拆解发现：可以通过寻找帕累托改进空间，例如精细化精算法投放广告。更积极地，可以通过寻找非同质化体验、引入多阶梯奖励系统、持续迭代新功能来刺激用户，对抗边际效用递减（Diminishing Marginal Utility）带来的活跃度下降。
2.4 产品商业化与生态构建：追求帕累托改进与管理外部性
商业化路径优化：追求帕累托改进与外部性管理：通过不断学习和实践，我们需要保持敏锐。深入研究广告、会员等商业化模式。理想的商业化优化是在不降低核心用户体验的前提下，增加新的价值或收入流（帕累托改进）。
外部性管理：平台型产品（如广告平台）具有强交叉外部性（Externalities）。需要平衡广告商的外部收益（对用户的负外部性）与用户的外部收益（对广告商的正外部性）。推荐多阅读读物，深入了解外部性管理策略。
3. 总结：方法论提炼与职业修养——培养“经济直觉”
经济学思维做产品，不是让你成为数学家，而是让你成为一名具备“经济直觉”的产品人。
深入研究市场与竞争对手：这是获取准确决策信息的前提。
持续创新与改进：市场是不断变化的，技术方法在不断更新，保持敏感度，核心目标不仅是体验更好，更是商业模型更健康。
培养经济直觉（Sense）：需要理论学习和大量实践。观察生活、拆解产品（例如：为什么某些软件只允许你用一个设备，而有些允许三个？这也是一种资产特定性权衡），从微观和宏观角度预判趋势，做出准确决策。推荐一些不错读物。
关注外部环境与政策法规：宏观经济日新月异，政策、法规、行业环境（例如：数据隐私法规对精细化广告的影响）时刻影响着产品的发展边界。推荐多读读物，及时了解相关变化。
不断学习和实践：在不断实践中，只有学习和总结，才能保持竞争力。经济学思维能让我们更理智地分配资源、更精准地定价、更深刻地洞察人性，最终打造出既符合用户价值又具有商业可持续性的产品。
经济环境瞬息万变，技术方法迭代日新月异，但理性的微观经济学原理，始终是一盏指引方向的不灭灯塔。让我们从单纯的“体验设计师”向具备商业格局和深邃人性的“微观经济学家”跨越。
',36)])])}const _=e(i,[["render",o]]);export{c as __pageData,_ as default};
+import{_ as e,g as r,h as n,U as t}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","frontmatter":{"date":"2024-01-01T16:00:00.000Z","title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","categories":["产品 Sense"],"permalink":"/product-sense/using-economics-thinking"},"headers":[],"relativePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md","filePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"}'),i={name:"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"};function o(s,a,l,p,d,h){return n(),r("div",null,[...a[0]||(a[0]=[t('Are you an LLM? You can read better optimized documentation at /10.产品 Sense/05.方法论/50.用经济学思维做产品.md for this page in Markdown format
用经济学思维做产品
摘要总结：经济学不仅是分析宏观数据的工具，更是洞察人性、优化资源配置、在约束条件下求最优解的思维方式。本文通过拆解日常生活中的经典案例，提炼成本收益、博弈均衡、有限理性、效率改进等核心经济学原理，并系统地将其应用到产品生命周期的核心环节——定义定位、定价策略、体验锁定及生态构建。最终，我们将这些原理沉淀为一套系统的、具有“经济直觉”的产品方法论，助力产品人完成从单纯的“体验设计师”向具备商业格局的“微观经济学家”跨越。
在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。
经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。
1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈
我们常被日常现象的“合理性”所迷惑，而经济学能帮我们拨开迷雾，看到冰山之下的成本收益权衡与竞争博弈。
1.1 容器的形状：方盒与圆瓶背后的成本战术
为什么牛奶通常装在方盒子里卖，而可乐却多装在圆瓶子里卖？用户提供的素材中，对使用习惯、包装物理属性（利乐纸易塑形，可乐高压圆柱均压）已有深刻见解。但深入思考，最核心的逻辑在于固定成本（Fixed Costs）与运营成本（Operating Costs）的权衡，以及资产特定性（Asset Specificity）。
超市里的软饮料多放在便宜的开放式货架上，运营成本极低。而牛奶需要低温储存，冰柜不仅昂贵（固定成本），且常年运行（运营成本）极高。冰柜里的存储空间不仅是资源，更是稀缺的、昂贵资产。方形容器能最大化冰柜的空间利用率，降低每单位体积的存储成本。可乐不惜牺牲这一优势，选择更趁手的圆瓶，是因为其开放式货架策略将存储成本降到了极低，可以用体验优势（使用习惯）来抵消额外的存储空间成本。
这一案例启示：产品设计不仅是关乎前端的用户体验（使用习惯），更需要从后端运营链条出发，思考核心稀缺资源的配置效率。在冰柜这个“资产特定”场景下，方盒子就是帕累托改进。
1.2 可乐的三十年价格迷局：双头垄断下的博弈均衡
可乐好像一直没有涨价，这几乎成了都市传说。深度拆解，这正是经济学中双头垄断（Duopoly）下，尤其是Bertrand 竞争博弈的经典案例。
Bertrand 竞争（Bertrand Competition）：假设两家公司生产同质化产品（如可口可乐和百事可乐），如果一家涨价，哪怕只涨一点点，精明的消费者就会全部流向另一家。为了维持市场份额，两家都不敢轻易涨价，最终价格趋向于接近零利润（或仅通过规模效应获得极低利润）的均衡状态。一旦形成博弈均衡，打破它需要巨大的替代成本和风险，例如涨价会被对方借低价抢占市场份额，且借助低利润将潜在进入者挡在门外。
规模效应与锚定效应：可乐是典型的薄利多销产品，利润通过极致的规模化获得。同时，“肥宅快乐水”的高性价比已成为消费者心理中的一个强锚定（Anchoring Effect）。涨价不仅面临博弈风险，还可能瞬间激发消费者的损失厌恶心理，导致流失。
经济学启示：在竞争激烈的成熟市场（尤其是产品高度同质化时），不仅要看用户价值，更要看博弈对手的行动边界。定价往往是竞争博弈后的动态平衡，而非单方面的价值宣称。此外，锁定效应（Lock-in Effect）不仅能锁定用户，有时也能通过“原汁原味”的营销锁定自身品牌策略。
1.3 “来都来了”与沉没成本陷阱：有限理性的普遍胜利
“来都来了，逛遍景点再说”，“来都来了，看完这昏昏欲睡的电影”。这种将错就错的思维模式，是人性的弱点，也是有限理性（Bounded Rationality）的证明。
理性人假说认为人是绝对自私且理智的，始终寻求以最小代价获得最大收益，不感情用事。但在现实中，人们往往无法客观地从未来的成本收益出发做决策，而是被已经发生在过去的投入——沉没成本（Sunk Costs）——所束缚。
经济学启示：沉没成本描述的是已经发生且与当前决策无关的费用。正确决策应“往日之不可追，来日之尚可期”，专注于未来的增量成本和收益。但对产品人而言，我们不仅要避免自己掉入沉没成本陷阱，更要深入研究用户的沉没感，将其转化为替代成本（Switching Costs），例如构建用户的网络效应、数据积累和品牌忠诚。
1.4 帕累托优化与最优体验：在约束条件下求最优解
租房案例中，兼顾价格便宜和交通便利在“既定状态”下，任何改变都不可能使一人变好而又不使另一人变坏，这便是帕累托最优（Pareto Efficiency）状态。
在产品设计中，我们不可能无限增加功能（会导致复杂度提升和体验牺牲）、不能无限降低价格（会导致商业不可持续）。优秀的产品设计就是在无数个 Trade-off 之间寻找到帕累托效率点。例如，通过 A/B 测试寻找更优解，就是试图进行帕累托改进——找到一种既不伤害核心用户体验，又能提升商业变现或用户粘性的路径。
2. 系统化方法论——将经济学思维系统化地应用到产品全生命周期
2.1 产品定义与定位：深入市场洞察与价值发现
寻找有效需求，利用供求关系发现市场蓝海：不仅要进行用户访谈，更要通过数据分析了解客户的需求、痛点和期望。深入研究市场意味着寻找那些未被满足的有效需求——即不仅有欲望且具备支付能力的（不管是金钱、时间还是隐私数据）需求。只有真正了解市场和客户，才能定位产品的核心功能和价值。
确定竞争壁垒，利用比较优势寻找产品核心竞争优势：分析竞争对手的产品、策略、市场份额，是为了找出自己的优势和不足。不仅能制定竞争策略，还能避免不必要的失误。我们应该追求做“只有你能做”或者“你做得最好”的事情，这就是产品的比较优势（Comparative Advantage）。
2.2 产品定价策略：最大化收益与捕获用户剩余
用户提供的定价点集中在价格歧视，我们将其深化和系统化，引入更多心理经济学。
2.3 产品用户体验与留存：构建锁定效应与对抗边际效用递减
利用沉没成本，利用沉没成本，利用替代成本构建锁定效应 (Lock-in Effect)：通过引导用户在产品中积累数据（云盘）、网络关系（社交网络）、品牌忠诚（生态系统），将用户的沉没投入转化为极高的替代成本，从而吸引用户持续使用。
利用边际效用递减，对抗边际效用递减增加用户活跃度。深度拆解发现：可以通过寻找帕累托改进空间，例如精细化精算法投放广告。更积极地，可以通过寻找非同质化体验、引入多阶梯奖励系统、持续迭代新功能来刺激用户，对抗边际效用递减（Diminishing Marginal Utility）带来的活跃度下降。
2.4 产品商业化与生态构建：追求帕累托改进与管理外部性
商业化路径优化：追求帕累托改进与外部性管理：通过不断学习和实践，我们需要保持敏锐。深入研究广告、会员等商业化模式。理想的商业化优化是在不降低核心用户体验的前提下，增加新的价值或收入流（帕累托改进）。
外部性管理：平台型产品（如广告平台）具有强交叉外部性（Externalities）。需要平衡广告商的外部收益（对用户的负外部性）与用户的外部收益（对广告商的正外部性）。推荐多阅读读物，深入了解外部性管理策略。
3. 总结：方法论提炼与职业修养——培养“经济直觉”
经济学思维做产品，不是让你成为数学家，而是让你成为一名具备“经济直觉”的产品人。
深入研究市场与竞争对手：这是获取准确决策信息的前提。
持续创新与改进：市场是不断变化的，技术方法在不断更新，保持敏感度，核心目标不仅是体验更好，更是商业模型更健康。
培养经济直觉（Sense）：需要理论学习和大量实践。观察生活、拆解产品（例如：为什么某些软件只允许你用一个设备，而有些允许三个？这也是一种资产特定性权衡），从微观和宏观角度预判趋势，做出准确决策。推荐一些不错读物。
关注外部环境与政策法规：宏观经济日新月异，政策、法规、行业环境（例如：数据隐私法规对精细化广告的影响）时刻影响着产品的发展边界。推荐多读读物，及时了解相关变化。
不断学习和实践：在不断实践中，只有学习和总结，才能保持竞争力。经济学思维能让我们更理智地分配资源、更精准地定价、更深刻地洞察人性，最终打造出既符合用户价值又具有商业可持续性的产品。
经济环境瞬息万变，技术方法迭代日新月异，但理性的微观经济学原理，始终是一盏指引方向的不灭灯塔。让我们从单纯的“体验设计师”向具备商业格局和深邃人性的“微观经济学家”跨越。
',36)])])}const _=e(i,[["render",o]]);export{c as __pageData,_ as default};
diff --git "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.D6Tetc-8.lean.js" "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.CUbjYJmR.lean.js"
similarity index 93%
rename from "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.D6Tetc-8.lean.js"
rename to "assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.CUbjYJmR.lean.js"
index e53aec70..db7f3294 100644
--- "a/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.D6Tetc-8.lean.js"
+++ "b/assets/10.\344\272\247\345\223\201 Sense_05.\346\226\271\346\263\225\350\256\272_50.\347\224\250\347\273\217\346\265\216\345\255\246\346\200\235\347\273\264\345\201\232\344\272\247\345\223\201.md.CUbjYJmR.lean.js"
@@ -1 +1 @@
-import{_ as e,g as r,h as n,U as t}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","frontmatter":{"date":"2024-01-01T16:00:00.000Z","title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","categories":["产品 Sense"],"permalink":"/product-sense/using-economics-thinking"},"headers":[],"relativePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md","filePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"}'),i={name:"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"};function o(s,a,l,p,d,h){return n(),r("div",null,[...a[0]||(a[0]=[t("",36)])])}const _=e(i,[["render",o]]);export{c as __pageData,_ as default};
+import{_ as e,g as r,h as n,U as t}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","frontmatter":{"date":"2024-01-01T16:00:00.000Z","title":"用经济学思维做产品","description":"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。","categories":["产品 Sense"],"permalink":"/product-sense/using-economics-thinking"},"headers":[],"relativePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md","filePath":"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"}'),i={name:"10.产品 Sense/05.方法论/50.用经济学思维做产品.md"};function o(s,a,l,p,d,h){return n(),r("div",null,[...a[0]||(a[0]=[t("",36)])])}const _=e(i,[["render",o]]);export{c as __pageData,_ as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.C4OWiCyw.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.Bq7k-xXb.js"
similarity index 98%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.C4OWiCyw.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.Bq7k-xXb.js"
index 3d2e7010..f8145633 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.C4OWiCyw.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.Bq7k-xXb.js"
@@ -1 +1 @@
-import{A as i}from"./chunks/ArticleCardList.CRH3I_GT.js";import{g as a,h as n,i as t,z as r,S as o,l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const s=[{title:"AI 社区活动与实践小项目汇总",icon:"🚀",color:"#f97316",articles:[{title:"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统",url:"/ai-agent/deepresearch-agent",description:"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。"},{title:"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环",url:"/ai-practice/claude-agent-sdk-basic-build",description:"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。"},{title:"一次由 Product Sense 驱动的 Agent 极限实践",url:"/ai-practice/math-bot",description:"本文记录了在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖，并指出 Product Sense 对 Agent 搭建的重要性。"},{title:"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战",url:"/ai-practice/poetry-bot",description:"完记录了诗歌小精灵 Agent 搭建实践，并指出结构化 Prompt 对 Agent 搭建的重要性。"}]},{title:"Agent 原理、组件与构建模式",icon:"📚",color:"#6366f1",articles:[{title:"从提示词到数字员工：AI Agent 深度全景综述",url:"/ai-agent/overview",description:"本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。"},{title:"探寻 Agent 决策中枢：迈向确定性执行的规划范式",url:"/ai-agent/planning-module",description:"本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。"},{title:"构建 Agentic 生态：零散组件化为可持续的工作流",url:"/ai-agent/composition-ai-components",description:"面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。"},{title:"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南",url:"/ai-agent/skills-practice-summary",description:"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。"}]},{title:"AI 相关资源与工具推荐",icon:"🛠️",color:"#06b6d4",articles:[{title:"AI 助手与工作站推荐",url:"/ai-learning/tools-assistant",description:"为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。"},{title:"LLM API 服务平台推荐与选型指南",url:"/ai-learning/llm-api-resources",description:"系统梳理了国际与国内主流 LLM API 服务平台，涵盖官方直连、聚合代理等方案选择，为开发者提供全面的选型参考与接入指南。"},{title:"AI 与数学思维相关书籍推荐",url:"/growth/books#_1-ai-与数学思维",description:"系统整理、汇总了 AI 与数学思维的相关书籍，便于系统学习与理解 AI，从而提升 AI 应用的效率与效果。"}]}],u=JSON.parse('{"title":"AI 学习与实践全景","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","frontmatter":{"title":"AI 学习与实践全景","date":"2026-03-15T16:00:00.000Z","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-learning/overview","categories":["ai-practice"],"tags":["AI","LLM"]},"headers":[],"relativePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md","filePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md"}'),c={name:"20.AI 学习与实践/00.AI 学习与实践全景一览.md"},I=Object.assign(c,{setup(A){return(g,e)=>(n(),a("div",null,[e[0]||(e[0]=t("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/00.AI 学习与实践全景一览.md for this page in Markdown format",-1)),e[1]||(e[1]=t("h1",{id:"ai-学习与实践全景",tabindex:"-1"},[o("AI 学习与实践全景 "),t("a",{class:"header-anchor",href:"#ai-学习与实践全景","aria-label":"Permalink to “AI 学习与实践全景”"},"")],-1)),r(i,{categories:l(s)},null,8,["categories"])]))}});export{u as __pageData,I as default};
+import{A as i}from"./chunks/ArticleCardList.DFlNODKA.js";import{g as a,h as n,i as t,z as r,S as o,l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const s=[{title:"AI 社区活动与实践小项目汇总",icon:"🚀",color:"#f97316",articles:[{title:"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统",url:"/ai-agent/deepresearch-agent",description:"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。"},{title:"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环",url:"/ai-practice/claude-agent-sdk-basic-build",description:"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。"},{title:"一次由 Product Sense 驱动的 Agent 极限实践",url:"/ai-practice/math-bot",description:"本文记录了在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖，并指出 Product Sense 对 Agent 搭建的重要性。"},{title:"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战",url:"/ai-practice/poetry-bot",description:"完记录了诗歌小精灵 Agent 搭建实践，并指出结构化 Prompt 对 Agent 搭建的重要性。"}]},{title:"Agent 原理、组件与构建模式",icon:"📚",color:"#6366f1",articles:[{title:"从提示词到数字员工：AI Agent 深度全景综述",url:"/ai-agent/overview",description:"本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。"},{title:"探寻 Agent 决策中枢：迈向确定性执行的规划范式",url:"/ai-agent/planning-module",description:"本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。"},{title:"构建 Agentic 生态：零散组件化为可持续的工作流",url:"/ai-agent/composition-ai-components",description:"面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。"},{title:"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南",url:"/ai-agent/skills-practice-summary",description:"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。"}]},{title:"AI 相关资源与工具推荐",icon:"🛠️",color:"#06b6d4",articles:[{title:"AI 助手与工作站推荐",url:"/ai-learning/tools-assistant",description:"为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。"},{title:"LLM API 服务平台推荐与选型指南",url:"/ai-learning/llm-api-resources",description:"系统梳理了国际与国内主流 LLM API 服务平台，涵盖官方直连、聚合代理等方案选择，为开发者提供全面的选型参考与接入指南。"},{title:"AI 与数学思维相关书籍推荐",url:"/growth/books#_1-ai-与数学思维",description:"系统整理、汇总了 AI 与数学思维的相关书籍，便于系统学习与理解 AI，从而提升 AI 应用的效率与效果。"}]}],u=JSON.parse('{"title":"AI 学习与实践全景","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","frontmatter":{"title":"AI 学习与实践全景","date":"2026-03-15T16:00:00.000Z","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-learning/overview","categories":["ai-practice"],"tags":["AI","LLM"]},"headers":[],"relativePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md","filePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md"}'),c={name:"20.AI 学习与实践/00.AI 学习与实践全景一览.md"},I=Object.assign(c,{setup(A){return(g,e)=>(n(),a("div",null,[e[0]||(e[0]=t("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/00.AI 学习与实践全景一览.md for this page in Markdown format",-1)),e[1]||(e[1]=t("h1",{id:"ai-学习与实践全景",tabindex:"-1"},[o("AI 学习与实践全景 "),t("a",{class:"header-anchor",href:"#ai-学习与实践全景","aria-label":"Permalink to “AI 学习与实践全景”"},"")],-1)),r(i,{categories:l(s)},null,8,["categories"])]))}});export{u as __pageData,I as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.C4OWiCyw.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.Bq7k-xXb.lean.js"
similarity index 98%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.C4OWiCyw.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.Bq7k-xXb.lean.js"
index 3d2e7010..f8145633 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.C4OWiCyw.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_00.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265\345\205\250\346\231\257\344\270\200\350\247\210.md.Bq7k-xXb.lean.js"
@@ -1 +1 @@
-import{A as i}from"./chunks/ArticleCardList.CRH3I_GT.js";import{g as a,h as n,i as t,z as r,S as o,l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const s=[{title:"AI 社区活动与实践小项目汇总",icon:"🚀",color:"#f97316",articles:[{title:"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统",url:"/ai-agent/deepresearch-agent",description:"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。"},{title:"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环",url:"/ai-practice/claude-agent-sdk-basic-build",description:"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。"},{title:"一次由 Product Sense 驱动的 Agent 极限实践",url:"/ai-practice/math-bot",description:"本文记录了在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖，并指出 Product Sense 对 Agent 搭建的重要性。"},{title:"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战",url:"/ai-practice/poetry-bot",description:"完记录了诗歌小精灵 Agent 搭建实践，并指出结构化 Prompt 对 Agent 搭建的重要性。"}]},{title:"Agent 原理、组件与构建模式",icon:"📚",color:"#6366f1",articles:[{title:"从提示词到数字员工：AI Agent 深度全景综述",url:"/ai-agent/overview",description:"本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。"},{title:"探寻 Agent 决策中枢：迈向确定性执行的规划范式",url:"/ai-agent/planning-module",description:"本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。"},{title:"构建 Agentic 生态：零散组件化为可持续的工作流",url:"/ai-agent/composition-ai-components",description:"面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。"},{title:"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南",url:"/ai-agent/skills-practice-summary",description:"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。"}]},{title:"AI 相关资源与工具推荐",icon:"🛠️",color:"#06b6d4",articles:[{title:"AI 助手与工作站推荐",url:"/ai-learning/tools-assistant",description:"为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。"},{title:"LLM API 服务平台推荐与选型指南",url:"/ai-learning/llm-api-resources",description:"系统梳理了国际与国内主流 LLM API 服务平台，涵盖官方直连、聚合代理等方案选择，为开发者提供全面的选型参考与接入指南。"},{title:"AI 与数学思维相关书籍推荐",url:"/growth/books#_1-ai-与数学思维",description:"系统整理、汇总了 AI 与数学思维的相关书籍，便于系统学习与理解 AI，从而提升 AI 应用的效率与效果。"}]}],u=JSON.parse('{"title":"AI 学习与实践全景","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","frontmatter":{"title":"AI 学习与实践全景","date":"2026-03-15T16:00:00.000Z","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-learning/overview","categories":["ai-practice"],"tags":["AI","LLM"]},"headers":[],"relativePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md","filePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md"}'),c={name:"20.AI 学习与实践/00.AI 学习与实践全景一览.md"},I=Object.assign(c,{setup(A){return(g,e)=>(n(),a("div",null,[e[0]||(e[0]=t("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/00.AI 学习与实践全景一览.md for this page in Markdown format",-1)),e[1]||(e[1]=t("h1",{id:"ai-学习与实践全景",tabindex:"-1"},[o("AI 学习与实践全景 "),t("a",{class:"header-anchor",href:"#ai-学习与实践全景","aria-label":"Permalink to “AI 学习与实践全景”"},"")],-1)),r(i,{categories:l(s)},null,8,["categories"])]))}});export{u as __pageData,I as default};
+import{A as i}from"./chunks/ArticleCardList.DFlNODKA.js";import{g as a,h as n,i as t,z as r,S as o,l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const s=[{title:"AI 社区活动与实践小项目汇总",icon:"🚀",color:"#f97316",articles:[{title:"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统",url:"/ai-agent/deepresearch-agent",description:"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。"},{title:"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环",url:"/ai-practice/claude-agent-sdk-basic-build",description:"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。"},{title:"一次由 Product Sense 驱动的 Agent 极限实践",url:"/ai-practice/math-bot",description:"本文记录了在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖，并指出 Product Sense 对 Agent 搭建的重要性。"},{title:"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战",url:"/ai-practice/poetry-bot",description:"完记录了诗歌小精灵 Agent 搭建实践，并指出结构化 Prompt 对 Agent 搭建的重要性。"}]},{title:"Agent 原理、组件与构建模式",icon:"📚",color:"#6366f1",articles:[{title:"从提示词到数字员工：AI Agent 深度全景综述",url:"/ai-agent/overview",description:"本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。"},{title:"探寻 Agent 决策中枢：迈向确定性执行的规划范式",url:"/ai-agent/planning-module",description:"本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。"},{title:"构建 Agentic 生态：零散组件化为可持续的工作流",url:"/ai-agent/composition-ai-components",description:"面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。"},{title:"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南",url:"/ai-agent/skills-practice-summary",description:"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。"}]},{title:"AI 相关资源与工具推荐",icon:"🛠️",color:"#06b6d4",articles:[{title:"AI 助手与工作站推荐",url:"/ai-learning/tools-assistant",description:"为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。"},{title:"LLM API 服务平台推荐与选型指南",url:"/ai-learning/llm-api-resources",description:"系统梳理了国际与国内主流 LLM API 服务平台，涵盖官方直连、聚合代理等方案选择，为开发者提供全面的选型参考与接入指南。"},{title:"AI 与数学思维相关书籍推荐",url:"/growth/books#_1-ai-与数学思维",description:"系统整理、汇总了 AI 与数学思维的相关书籍，便于系统学习与理解 AI，从而提升 AI 应用的效率与效果。"}]}],u=JSON.parse('{"title":"AI 学习与实践全景","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","frontmatter":{"title":"AI 学习与实践全景","date":"2026-03-15T16:00:00.000Z","description":"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-learning/overview","categories":["ai-practice"],"tags":["AI","LLM"]},"headers":[],"relativePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md","filePath":"20.AI 学习与实践/00.AI 学习与实践全景一览.md"}'),c={name:"20.AI 学习与实践/00.AI 学习与实践全景一览.md"},I=Object.assign(c,{setup(A){return(g,e)=>(n(),a("div",null,[e[0]||(e[0]=t("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/00.AI 学习与实践全景一览.md for this page in Markdown format",-1)),e[1]||(e[1]=t("h1",{id:"ai-学习与实践全景",tabindex:"-1"},[o("AI 学习与实践全景 "),t("a",{class:"header-anchor",href:"#ai-学习与实践全景","aria-label":"Permalink to “AI 学习与实践全景”"},"")],-1)),r(i,{categories:l(s)},null,8,["categories"])]))}});export{u as __pageData,I as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.BIpWVkHy.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.DMvs5K_Q.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.BIpWVkHy.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.DMvs5K_Q.js"
index 50161d5c..3d14f707 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.BIpWVkHy.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.DMvs5K_Q.js"
@@ -1 +1 @@
-import{_ as e,g as n,h as l,U as o}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const A=JSON.parse('{"title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","frontmatter":{"date":"2026-02-12T22:31:00.000Z","title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-agent/overview","top":true,"categories":["ai-practice"],"tags":["AI Agent","Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md","filePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"}'),a={name:"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"};function r(g,t,s,i,d,u){return l(),n("div",null,[...t[0]||(t[0]=[o('Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md for this page in Markdown format
从提示词到数字员工：AI Agent 深度全景综述
摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从"以人为中心"向"以 AI 为中心"的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。
1. 什么是 Agent？——从“工具”到“实体”的进化
核心逻辑：现代 Agent 的本质是 "LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。
在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。
如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：
自主性 (Autonomy)： 无须时刻盯着，设定目标后它能自己想办法完成。
适应性 (Adaptability)： 环境变了（比如网页改版或 API 报错），它能实时调整策略。
主动性 (Proactivity)： 不只是被动响应指令，它会主动拆解目标并寻找路径。
社会性 (Sociality)： 它能像人一样，与其他 Agent 或人类进行协作。
2. 核心价值：自动化程度的阶梯式跨越
我们对 Agent 的追求，本质上是从“写好提示词（Prompt）”转向“构建自主工作流（Workflow）”。为了更直观地衡量 Agent 的能力，我们可以将其自动化程度分为三个档次：
| 自动化等级 | 核心特征 | 典型代表 |
|---|
| L1：任务执行者 | 处理单一模态、简单数据；调用少量标准工具；执行预定义的静态任务。 | 翻译脚本、简单 SQL 生成器 |
| L2：流程编排者 | 多模态感知；具备长短期记忆；能编排复杂、长尾的任务流。 | Dify, Coze, n8n |
| L3：自主进化者 | 极少人工干预；自主洞察环境变化；实现业务流程的自适应编排。 | Claude Code, Manus, OpenClaw |
随着 Agent 能力的"逐梯跨越"，过往的工作范式可能被颠覆，实现从"面向过程"到"面向目标"的根本性颠覆。对于软件系统开发人员而言，传统的软件工程思路以人为中心，AI 只是辅助工具，通过采用固定形态的交互界面和预定义有限域的任务，实现规模化的生产方式。而 Agent 工程则是以 AI 为中心，人类转型为监督者和资源提供者，采用动态人机交互界面和无预制有限域的任务，完成规模化的个性化生产。
3. 应用场景：谁会被替代，谁会被增强？
3.1 深度替代与变革型
在这类场景中，AI 已经能够闭环完成 80% 以上的工作，在显著重构工作模式后，部分岗位可能被替代：
基础编程：AI 代码助手自动生成样板代码、排查 Bug，初级 Coders 必须向架构和复杂逻辑转型。
基础学习（知识点 / 技能）：题库刷题、基础答疑、知识点检索。AI 可直接替代人工答疑 / 辅导，覆盖 80% 基础学习需求。
标准化客服：处理 90% 的售后咨询与查询，人工仅负责处理极端复杂的情感诉求。
3.2 辅助增强型（升级工作价值）
AI 作为效率工具，不替代核心岗位，而是负责脏活累活、升级工作价值，人类负责决策与审美：
- 高级咨询：Agent 可自动整理行业数据、生成分析报告初稿，咨询师从"信息收集"中解放出来，更聚焦策略洞察、客户沟通等高价值环节。
- 深度研究（学术 / 行业）：Agent 自动完成文献检索、数据清洗与报告框架搭建，研究者得以专注于核心创新结论、深度洞察与研究设计，实现从"资料整理"到"思想创造"的价值跃迁。
- 高级学习（研究性 / 技能）：Agent 辅助完成知识体系搭建、复杂技能拆解与进阶路径规划，学习者将精力投入理解内化、实践探索与自主创新，完成从"知识获取"到"能力建构"的范式转变。
3.3 生活与垂直领域（长尾覆盖）
- 健康医护：虚拟健康助手基于可穿戴设备数据提供 24h 监护，并在异常时主动预警。
- 个性化教育：Agent 就像一个 1 对 1 助教，根据你的错题逻辑实时调整教学大纲，而非死记硬背。
- 个人财务：自动追踪账单、优化预算，并根据市场动态提供初步投资建议。
4. 技术拆解：Agent 核心要素与关键技术
Agent = LLM (大脑) + 工具 (手脚) + 指令 (行为准则) + 自主工作流执行。
一个成熟的 Agent 系统通常由规划（Planning）、记忆（Memory）、工具（Tools）和行动（Action）四大核心模块构成：
- 规划（Planning）：解决"怎么做"
- 任务分解：将“帮我写一个电商 App”拆解为 UI 设计、后端架构、数据库建模等子目标。
- 反思与评价：在执行过程中不断“自我批评”，发现走不通时及时掉头。
- 记忆（Memory）：解决"我是谁，我做过什么"
- 短期记忆：与上下文学习有关，存储当前的对话流，记录最近的交互历史，如用户指令、系统响应等。
- 长期记忆：涉及信息的长时间保留和检索，存储长期的知识库，如用户个人信息、任务历史等，通常通过利用外部向量存储与快速检索来实现。
- 工具 (Tools)：解决"能力边界"。LLM 虽然博学，但不会算高难度数学，也不知道昨天的天气，工具就是它的“外挂”。
- 行动（Action）：解决"落地执行"，将规划好的逻辑转化为具体的 API 调用或代码执行，并接收环境反馈，形成闭环。
4.1 规划
Agent的规划核心包含任务分解与自我反思两部分：任务分解是将复杂目标拆解为易执行的子任务，主要有先分解后规划、边分解边规划及基于语言模型的分解三类方法；自我反思则通过“生成-反思”循环，结合相关框架与模式优化执行结果、提升运行质量。
若需进一步了解详细的规划机制，可打开：Agent规划模块
4.2 记忆
Agent的记忆是其核心模块，借鉴人类记忆分为感觉、短期、长期三类，结合内部、跨任务及外部知识积累，应用中需适配场景选择存储检索方式。
| 记忆类型 | 说明 |
|---|
| 感官记忆 | 这是最基础的阶段，指智能体接收外部输入（文本、图像、语音）的瞬时感知。在 LLM 交互中，这表现为模型对当前 Prompt 的原始解析。 |
| 短期记忆 | 主要指上下文学习（In-Context Learning），它受限于 LLM 的上下文窗口（Context Window），存储的只是有限轮次的对话历史，如用户指令、系统响应等。
• 核心功能：存储当前对话流，记录最近几轮的交互历史（指令、系统响应、中间思考过程）。
• 技术实现：通过将历史对话拼接在当前的 Prompt 中实现。 |
| 长期记忆 | 涉及信息的长时间保留和在需要时的精准检索，这是 Agent 迈向高度自主的关键。
• 核心功能：存储用户的个人偏好、长期的项目背景、历史任务的成功经验或失败教训。
• 技术实现：通常利用外部向量数据库（Vector DB）实现，通过"嵌入（Embedding）+ 向量检索"在数百万条记录中快速定位相关信息。 |
如果规划模块赋予了 Agent “逻辑”，那么记忆模块则赋予了它“灵魂”和“连续性”。随着长文本技术（Long Context）和向量搜索算法的不断演进，Agent 的记忆将变得越来越深邃且精准。
对于开发者而言，设计优秀的记忆淘汰与检索算法，比单纯追求大模型的参数规模更为重要。只有当 Agent 能够“记住”业务细节并“忘记”无关噪音时，它才真正具备了从“对话工具”进化为“数字合伙人”的素质。
4.3 工具
典型案例：Claude Code 集成了文件读写、查找、Bash 等一系列通用工具，使其成为一个能够自主写代码的"数字工程师"。
LLM 本身在处理实时信息（如天气）、精确计算（如高阶数学）或特定私域数据（如公司财务报表）时存在天然局限，而工具赋予了 Agent 超越模型内核的能力。我们可以从功能属性和实现方式两个维度来理解 Agent 的工具箱：
1、按功能属性分类：Agent 能做什么？
| 类别 | 功能定位 | 核心能力 |
|---|
| 数据类 (Data) | 解决"信息差" | 通过检索工具（Retrieval）从搜索引擎、数据库或 PDF 文档中获取最新上下文。 |
| 行动类 (Action) | 解决"执行力" | 通过 API 调用在外部系统中产生影响，例如发送邮件、修改 CRM 记录或提交订单。 |
| 编排类 (Orchestration) | 解决"复杂性" | 将多个子任务组合成一个更大的任务。一个 Agent 也可以被封装成工具，供另一个更高级的 Agent 调用，实现多智体协作。 |
2、按实现方式分类：Agent 怎么调用？
| 实现方式 | 说明 |
|---|
| 函数调用 (Function Calling) | 模型生成结构化指令，由客户端在本地执行（如操作本地文件或内网数据库），兼顾安全性与灵活性。 |
| 标准扩展 (Extensions) | 通过标准化的协议（如 OpenAPI）直接连接外部服务，使 Agent 能够像乐高积木一样无缝对接各种云端 API。 |
| 计算机使用 (Computer Use) | 对于没有 API 的陈旧系统，Agent 可以通过视觉识别和模拟鼠标键盘，像人类一样直接操作软件界面。 |
4.4 行动
行动（Action）模块是 Agent 的执行机构，它的职责是将规划阶段生成的"蓝图"转化为物理世界或数字系统中的"动作"。它不仅是指令的输出者，更是环境反馈的接收者。
行动模块的核心在于完成以下三个层面的逻辑闭环：
| 模块 | 说明 | 示例 |
|---|
| 动作生成 (Action Generation) | 将复杂的子目标转化为具体的步骤 | 规划是"调查市场趋势"，行动则是先"搜索关键词"，再"提取网页内容"，最后"生成摘要" |
| 动态调整 (Dynamic Adaptation) | 行动并非死板的执行脚本，Agent 会根据工具返回的结果（反馈）实时调整策略 | 如果一次搜索没有找到答案，行动模块会决定尝试不同的关键词或切换工具 |
| 环境交互 (Interaction) | 明确行动的范围，包括内部行动与外部工具调用 | 利用 LLM 的内在能力（如推理、总结）进行内部行动，以及通过调用外部工具（如 API、数据库）扩展行动边界，最终达成预设的行动目标 |
整体来讲，行动模块确保了 Agent 的"言行一致"：它基于记忆来决策，利用工具来施展，最终通过不断与环境互动，将抽象的目标变为真实的结果。
5. Agent 的分类与未来
目前 Agent 领域尚无统一标准，但我们可以按其业务深度与协作范式将其归纳为五大形态。从单兵作战的“全能大脑”到成群结队的“数字团队”，它们正以不同的进化路径渗透进各种复杂的生产场景。接下来，我们将逐一拆解这五种重塑生产力的核心类别。
5.1 通用 Agent
随着技术的演进，业界对智能体的认知也发生了变化：真正的 Agent 不应只是被动响应人类指令的"聊天插件"，而是一个自主的目标执行者。
在这种背景下，通用 Agent (General Agent) 脱颖而出。它并非为特定单一任务（如“写一段代码”）而生，而是一个拥有广泛能力边界、能够解决开放式问题的智能系统。其运作逻辑可以精炼为“思考（Think）、行动（Act）、学习（Learn）”的闭环：
| 阶段 | 核心功能 | 详细说明 |
|---|
| 思考 | 任务拆解与路径规划 | 智能体接收到模糊目标（如"帮我调研并搭建一个技术博客"）后，会进行任务拆解与路径规划，并在执行过程中不断反思"当前方案是否最优？是否需要调整？" |
| 行动 | 调用高度自动化的原子能力 | 基于思考结果，调用高度自动化的原子能力。除了读写文件、网页浏览、运行终端命令或访问数据库外，常见的原子能力还包括：
• 环境探测：自动识别当前操作系统环境、安装缺失的依赖包。
• 视觉交互：在没有 API 的情况下，通过屏幕截图识别 UI 元素并模拟点击。
• 资源调度：自动申请 API Key、配置云端服务或触发 GitHub Actions 工作流。
• 跨应用编排：将 A 应用的输出处理后，精准填充到 B 应用的表单中。 |
| 学习 | 个人偏好沉淀与经验积累 | 这是通用 Agent 进阶的关键。它能从交互中记住你的个人偏好（例如：报告偏好 PDF 格式、代码风格倾向于 TypeScript），并将其沉淀为"经验"，使下一次决策更符合预期。 |
为了应对不同复杂程度的任务，业界演化出了两种主流的实现范式：
- ReAct 像是一个反应敏捷的**“现场协调员”，擅长随机应变。
- Plan-and-Execute 则更像一位经验丰富的“项目经理”**，以全局规划见长。
| 范式类型 | 核心逻辑 | 优势 | 适用场景 |
|---|
| ReAct Agent | 采用"思考-行动-观测"小步快跑模式。模型走一步看一步，根据环境的即时反馈调整下一步动作。 | 实时性强、交互自然、逻辑链路透明。 | 较为简单的任务、对成本敏感的轻量级场景。 |
| Plan-and-Execute Agent | 先由一个"大脑"将复杂目标拆解为完整的步骤列表（Todo List），再由另一只 "手" 负责逐一高效执行。 | 准确率极高，能够处理具备深度依赖关系的复杂工程。 | 需要长程推理的任务、软件开发、深度行业调研。 |
5.2 多智能体系统 (Multi-Agent System)
多智能体系统通过 “专注子任务、上下文解耦、并行推进” 的逻辑，让 AI 从一个人的独角戏，演变成了指挥若定的交响乐。它不仅提高了任务的完成上限，更让 AI 的工作变得可预测、可管理。
当面对较复杂的工程任务时，单个 Agent 往往会因为任务链信息量太大而信息量太大而陷入"混乱"或出错。多智能体系统 (Multi-Agent System) 的出现，本质上是让 AI 的工作模式从"单打独斗"转向"团队协作"。
在 MAS 架构中，主智能体（Lead Agent）可以根据需求生成多个独立的子智能体（Subagent）。这些子智能体像是一群专注的专家，各自处理特定的子任务，从而带来了四个维度的核心优势：
| 维度 | 详细说明 |
|---|
| 上下文的精细隔离 | 这是多智能体最强悍的地方。每个子智能体拥有独立的记忆空间，确保细碎的中间任务不会"污染"主对话环境。例如，负责搜集海量原始数据的 Subagent，其繁杂的搜索记录会被隔离在自己的上下文中，只把最终提炼的结论汇报给主智能体，让主脑始终保持清醒的大局观。 |
| 极致的并行化效率 | 在单 Agent 模式下，任务只能一件接一件地做；而在 MAS 中，多个子智能体可以并行运行。就像一个调研项目，多个研究员可以同时在不同领域搜集数据，显著加快了复杂工作流的交付速度。 |
| 专业指令的深度定制 | 我们可以为不同的 Subagent 注入不同的"灵魂"。负责"代码审计"的拥有最严苛的安全规范，负责"文案润色"的拥有细腻的品牌调性。这种指令隔离避免了在同一个提示词（Prompt）中堆砌太多要求而导致的指令失效。 |
| 工具调用的安全边界 | 我们可以精准限制每个子智能体的权限。例如，查询数据的 Subagent 只有"只读"权限，而"发送邮件"或"修改数据库"权限被严格限制在特定的 Subagent 手中，极大降低了 AI 产生意外行为的风险。 |
典型案例：Deep Research 深度调研系统
以一个复杂的调研流程为例，系统会通过 Lead Agent + Subagent 的分层架构完美闭环：
- Lead Agent (协调员)：负责“脑力拆解”，将主题分解为若干子课题，并委派任务，它从不亲自查资料，保持绝对的简效。
- Researcher (研究员)：多个实例并行出发，每个专注于一个子主题，搜集至少 10-15 个硬核数据点。
- Data Analyst (数据分析师)：仅负责读取研究笔记，利用 Python 生成直观的图表。
- Report Writer (报告撰写员)： 汇总所有研究成果，最终调用工具生成一份专业的 PDF 报告。
5.3 知识型 Agent
如果说通用 Agent 擅长逻辑推理，那么多智能体擅长流程协作，知识型 Agent 的核心使命则是"理解并转化海量非结构化数据"。它不仅仅是一个简单的搜索工具，而是一个能够深度理解私域知识并基于此进行复杂决策的智能实体。
在企业级应用中，数据往往散落在物理文档、代码仓库、Slack 聊天记录或关系型数据库中。知识型 Agent 的核心诉求在于：
"全局理解与跨库关联"：它能跨越不同的文档格式与存储介质，建立起知识间的逻辑联系。
"动态更新与实时同步"：它能感知环境反馈，随着项目进展自动同步最新的会议纪要或技术方案。
"深度的知识推理"： 不止是"检索"，更是"思考"。
应用场景示例：
想象你需要复盘一个复杂项目的进度。知识型 Agent 可以瞬间扫描过去三个月的所有项目会议纪要、Slack 讨论记录和技术文档，最终为你总结出："导致 X 项目延期的核心原因主要集中在 A 接口的权限变动，以及 B 团队在第二周的人力缺口。"
这种 Agent 的核心价值在于，它将原本"死"的资料库变成了"活"的生产力工具。无论是基于全局文档回答复杂问题，还是结合外部非知识工具（如自动发邮件通知相关责任人），知识型 Agent 都是构建知识密集型应用的关键。
5.4 多模态 Agent
多模态 Agent 是一种能够处理多种模态数据（如文本、图像、视频等）的 Agent 类型。其核心价值在于其感知与推理的深度融合：它不仅能"读"指令，更能"看"环境，并据此生成多维度的反馈。
- 全感官输入与输出：它可以直接接收图片、视频流或实时语音，并生成对应的多媒体内容或执行具体的动作。
- 跨模态深度推理：例如，它能结合图像细节与文本逻辑，识别出复杂的对象关联或异常状态。
典型应用场景：
想象一个"自动化 QA 测试 Agent"：你只需给它一段手机屏幕录屏，它能自动识别出 UI 界面上导致崩溃的 Bug 按钮位置，精准截取关键帧，并自动在 Jira 系统中提交一个包含“操作步骤、异常截图、预期效果”的专业技术工单。
这种能"能看、能听、能说"的特性，让 Agent 彻底走出了纯文字的温室，开始在 UI 自动化测试、工业巡检、智能家居等现实交互场景中大放异彩。
5.5 迈向高度自主：OpenClaw 与"数字员工"
通用型 Agent 虽然在逻辑推理与工具调用方面取得了长足进步，但在实际落地场景中仍面临显著限制。大多数系统本质上是反应性的，依赖人类持续的指令输入，难以在没有人工干预的情况下独立完成跨越数日的长时运行任务（Long-Running Tasks）。人们对一个 7 天 24 小时不间断工作的数字员工的愿景，催生了对基础架构的重新审视。
在这种背景下，OpenClaw 脱颖而出，成为解决长时运行、自主规划与持久化状态管理等核心技术挑战的典型代表。它不仅是一个 Agent 框架，更像是一个初步成形的 “Agent OS（智能体操作系统）”。其架构设计并非简单的 API 封装，而是一个务实的分布式控制平面。其最显著的特征是实现了控制逻辑（Control Plane）与推理执行（Runtime）的深度解耦。这一设计使得 OpenClaw 能够作为机器上的长久守护进程运行，保持对各种通讯频道的监听，同时处理复杂的后台任务。
另外，通过将网关控制平面、文件优先的记忆系统与心跳触发的被动唤醒机制相结合，OpenClaw 成功构建了一个支持长效运行的基础设施。它证明了自主智能体的真正力量不在于模型有多大，而在于其与物理环境、文件系统及人类现有通讯工具的深度集成程度。随着 IronClaw 等安全增强版本的成熟，以及 OpenClaw-RL 带来的持续进化能力，这种 24/7 不间断工作的"数字员工"将从开发者的玩具，逐步演变为企业和个人不可或缺的核心生产力基础设施。
在不久的将来，智能体的竞争焦点将从单纯的推理速度转向"运营可靠性"，那些具备自我修复能力、并在严格安全约束下执行高度自主任务的系统，将最终定义 AI 时代的数字化工作范式。OpenClaw 已经为这一未来铺平了道路，并建立了一个庞大的、去中心化的技能与知识库，让人们都能通过简单的 Markdown 配置，定制属于自己的、具备高度自主权的智能体助手。
6. 结语：从“对话”到“协同”的范式革命
从最初只会吟诗作对的"聊天机器人"，到如今能够独立思考、调用工具、协同作战的"数字员工"，AI Agent 的演进正以前所未有的速度重塑着人类的劳动范式。
我们正在经历一场深刻的变革：软件的形态正在从"死板的工具"转变为"有能动性的实体"。对于开发者而言，未来的核心竞争力将不再仅仅是编写了多少行代码，而是能否构建出深谙业务逻辑、能够自主调度资源并交付结果的 Agent 系统。
Agent 不是要取代人类的智慧，而是要将我们从繁琐的、重复性的数字劳作中解放出来，去关注更具创造力的决策。在这个 AI 驱动的新纪元里，每个人都将拥有一支属于自己的数字团队。未来已来，而 Agent 正是那把开启规模化个性化生产大门的钥匙。
',83)])])}const p=e(a,[["render",r]]);export{A as __pageData,p as default};
+import{_ as e,g as n,h as l,U as o}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const A=JSON.parse('{"title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","frontmatter":{"date":"2026-02-12T22:31:00.000Z","title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-agent/overview","top":true,"categories":["ai-practice"],"tags":["AI Agent","Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md","filePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"}'),a={name:"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"};function r(g,t,s,i,d,u){return l(),n("div",null,[...t[0]||(t[0]=[o('Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md for this page in Markdown format
从提示词到数字员工：AI Agent 深度全景综述
摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从"以人为中心"向"以 AI 为中心"的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。
1. 什么是 Agent？——从“工具”到“实体”的进化
核心逻辑：现代 Agent 的本质是 "LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。
在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。
如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：
自主性 (Autonomy)： 无须时刻盯着，设定目标后它能自己想办法完成。
适应性 (Adaptability)： 环境变了（比如网页改版或 API 报错），它能实时调整策略。
主动性 (Proactivity)： 不只是被动响应指令，它会主动拆解目标并寻找路径。
社会性 (Sociality)： 它能像人一样，与其他 Agent 或人类进行协作。
2. 核心价值：自动化程度的阶梯式跨越
我们对 Agent 的追求，本质上是从“写好提示词（Prompt）”转向“构建自主工作流（Workflow）”。为了更直观地衡量 Agent 的能力，我们可以将其自动化程度分为三个档次：
| 自动化等级 | 核心特征 | 典型代表 |
|---|
| L1：任务执行者 | 处理单一模态、简单数据；调用少量标准工具；执行预定义的静态任务。 | 翻译脚本、简单 SQL 生成器 |
| L2：流程编排者 | 多模态感知；具备长短期记忆；能编排复杂、长尾的任务流。 | Dify, Coze, n8n |
| L3：自主进化者 | 极少人工干预；自主洞察环境变化；实现业务流程的自适应编排。 | Claude Code, Manus, OpenClaw |
随着 Agent 能力的"逐梯跨越"，过往的工作范式可能被颠覆，实现从"面向过程"到"面向目标"的根本性颠覆。对于软件系统开发人员而言，传统的软件工程思路以人为中心，AI 只是辅助工具，通过采用固定形态的交互界面和预定义有限域的任务，实现规模化的生产方式。而 Agent 工程则是以 AI 为中心，人类转型为监督者和资源提供者，采用动态人机交互界面和无预制有限域的任务，完成规模化的个性化生产。
3. 应用场景：谁会被替代，谁会被增强？
3.1 深度替代与变革型
在这类场景中，AI 已经能够闭环完成 80% 以上的工作，在显著重构工作模式后，部分岗位可能被替代：
基础编程：AI 代码助手自动生成样板代码、排查 Bug，初级 Coders 必须向架构和复杂逻辑转型。
基础学习（知识点 / 技能）：题库刷题、基础答疑、知识点检索。AI 可直接替代人工答疑 / 辅导，覆盖 80% 基础学习需求。
标准化客服：处理 90% 的售后咨询与查询，人工仅负责处理极端复杂的情感诉求。
3.2 辅助增强型（升级工作价值）
AI 作为效率工具，不替代核心岗位，而是负责脏活累活、升级工作价值，人类负责决策与审美：
- 高级咨询：Agent 可自动整理行业数据、生成分析报告初稿，咨询师从"信息收集"中解放出来，更聚焦策略洞察、客户沟通等高价值环节。
- 深度研究（学术 / 行业）：Agent 自动完成文献检索、数据清洗与报告框架搭建，研究者得以专注于核心创新结论、深度洞察与研究设计，实现从"资料整理"到"思想创造"的价值跃迁。
- 高级学习（研究性 / 技能）：Agent 辅助完成知识体系搭建、复杂技能拆解与进阶路径规划，学习者将精力投入理解内化、实践探索与自主创新，完成从"知识获取"到"能力建构"的范式转变。
3.3 生活与垂直领域（长尾覆盖）
- 健康医护：虚拟健康助手基于可穿戴设备数据提供 24h 监护，并在异常时主动预警。
- 个性化教育：Agent 就像一个 1 对 1 助教，根据你的错题逻辑实时调整教学大纲，而非死记硬背。
- 个人财务：自动追踪账单、优化预算，并根据市场动态提供初步投资建议。
4. 技术拆解：Agent 核心要素与关键技术
Agent = LLM (大脑) + 工具 (手脚) + 指令 (行为准则) + 自主工作流执行。
一个成熟的 Agent 系统通常由规划（Planning）、记忆（Memory）、工具（Tools）和行动（Action）四大核心模块构成：
- 规划（Planning）：解决"怎么做"
- 任务分解：将“帮我写一个电商 App”拆解为 UI 设计、后端架构、数据库建模等子目标。
- 反思与评价：在执行过程中不断“自我批评”，发现走不通时及时掉头。
- 记忆（Memory）：解决"我是谁，我做过什么"
- 短期记忆：与上下文学习有关，存储当前的对话流，记录最近的交互历史，如用户指令、系统响应等。
- 长期记忆：涉及信息的长时间保留和检索，存储长期的知识库，如用户个人信息、任务历史等，通常通过利用外部向量存储与快速检索来实现。
- 工具 (Tools)：解决"能力边界"。LLM 虽然博学，但不会算高难度数学，也不知道昨天的天气，工具就是它的“外挂”。
- 行动（Action）：解决"落地执行"，将规划好的逻辑转化为具体的 API 调用或代码执行，并接收环境反馈，形成闭环。
4.1 规划
Agent的规划核心包含任务分解与自我反思两部分：任务分解是将复杂目标拆解为易执行的子任务，主要有先分解后规划、边分解边规划及基于语言模型的分解三类方法；自我反思则通过“生成-反思”循环，结合相关框架与模式优化执行结果、提升运行质量。
若需进一步了解详细的规划机制，可打开：Agent规划模块
4.2 记忆
Agent的记忆是其核心模块，借鉴人类记忆分为感觉、短期、长期三类，结合内部、跨任务及外部知识积累，应用中需适配场景选择存储检索方式。
| 记忆类型 | 说明 |
|---|
| 感官记忆 | 这是最基础的阶段，指智能体接收外部输入（文本、图像、语音）的瞬时感知。在 LLM 交互中，这表现为模型对当前 Prompt 的原始解析。 |
| 短期记忆 | 主要指上下文学习（In-Context Learning），它受限于 LLM 的上下文窗口（Context Window），存储的只是有限轮次的对话历史，如用户指令、系统响应等。
• 核心功能：存储当前对话流，记录最近几轮的交互历史（指令、系统响应、中间思考过程）。
• 技术实现：通过将历史对话拼接在当前的 Prompt 中实现。 |
| 长期记忆 | 涉及信息的长时间保留和在需要时的精准检索，这是 Agent 迈向高度自主的关键。
• 核心功能：存储用户的个人偏好、长期的项目背景、历史任务的成功经验或失败教训。
• 技术实现：通常利用外部向量数据库（Vector DB）实现，通过"嵌入（Embedding）+ 向量检索"在数百万条记录中快速定位相关信息。 |
如果规划模块赋予了 Agent “逻辑”，那么记忆模块则赋予了它“灵魂”和“连续性”。随着长文本技术（Long Context）和向量搜索算法的不断演进，Agent 的记忆将变得越来越深邃且精准。
对于开发者而言，设计优秀的记忆淘汰与检索算法，比单纯追求大模型的参数规模更为重要。只有当 Agent 能够“记住”业务细节并“忘记”无关噪音时，它才真正具备了从“对话工具”进化为“数字合伙人”的素质。
4.3 工具
典型案例：Claude Code 集成了文件读写、查找、Bash 等一系列通用工具，使其成为一个能够自主写代码的"数字工程师"。
LLM 本身在处理实时信息（如天气）、精确计算（如高阶数学）或特定私域数据（如公司财务报表）时存在天然局限，而工具赋予了 Agent 超越模型内核的能力。我们可以从功能属性和实现方式两个维度来理解 Agent 的工具箱：
1、按功能属性分类：Agent 能做什么？
| 类别 | 功能定位 | 核心能力 |
|---|
| 数据类 (Data) | 解决"信息差" | 通过检索工具（Retrieval）从搜索引擎、数据库或 PDF 文档中获取最新上下文。 |
| 行动类 (Action) | 解决"执行力" | 通过 API 调用在外部系统中产生影响，例如发送邮件、修改 CRM 记录或提交订单。 |
| 编排类 (Orchestration) | 解决"复杂性" | 将多个子任务组合成一个更大的任务。一个 Agent 也可以被封装成工具，供另一个更高级的 Agent 调用，实现多智体协作。 |
2、按实现方式分类：Agent 怎么调用？
| 实现方式 | 说明 |
|---|
| 函数调用 (Function Calling) | 模型生成结构化指令，由客户端在本地执行（如操作本地文件或内网数据库），兼顾安全性与灵活性。 |
| 标准扩展 (Extensions) | 通过标准化的协议（如 OpenAPI）直接连接外部服务，使 Agent 能够像乐高积木一样无缝对接各种云端 API。 |
| 计算机使用 (Computer Use) | 对于没有 API 的陈旧系统，Agent 可以通过视觉识别和模拟鼠标键盘，像人类一样直接操作软件界面。 |
4.4 行动
行动（Action）模块是 Agent 的执行机构，它的职责是将规划阶段生成的"蓝图"转化为物理世界或数字系统中的"动作"。它不仅是指令的输出者，更是环境反馈的接收者。
行动模块的核心在于完成以下三个层面的逻辑闭环：
| 模块 | 说明 | 示例 |
|---|
| 动作生成 (Action Generation) | 将复杂的子目标转化为具体的步骤 | 规划是"调查市场趋势"，行动则是先"搜索关键词"，再"提取网页内容"，最后"生成摘要" |
| 动态调整 (Dynamic Adaptation) | 行动并非死板的执行脚本，Agent 会根据工具返回的结果（反馈）实时调整策略 | 如果一次搜索没有找到答案，行动模块会决定尝试不同的关键词或切换工具 |
| 环境交互 (Interaction) | 明确行动的范围，包括内部行动与外部工具调用 | 利用 LLM 的内在能力（如推理、总结）进行内部行动，以及通过调用外部工具（如 API、数据库）扩展行动边界，最终达成预设的行动目标 |
整体来讲，行动模块确保了 Agent 的"言行一致"：它基于记忆来决策，利用工具来施展，最终通过不断与环境互动，将抽象的目标变为真实的结果。
5. Agent 的分类与未来
目前 Agent 领域尚无统一标准，但我们可以按其业务深度与协作范式将其归纳为五大形态。从单兵作战的“全能大脑”到成群结队的“数字团队”，它们正以不同的进化路径渗透进各种复杂的生产场景。接下来，我们将逐一拆解这五种重塑生产力的核心类别。
5.1 通用 Agent
随着技术的演进，业界对智能体的认知也发生了变化：真正的 Agent 不应只是被动响应人类指令的"聊天插件"，而是一个自主的目标执行者。
在这种背景下，通用 Agent (General Agent) 脱颖而出。它并非为特定单一任务（如“写一段代码”）而生，而是一个拥有广泛能力边界、能够解决开放式问题的智能系统。其运作逻辑可以精炼为“思考（Think）、行动（Act）、学习（Learn）”的闭环：
| 阶段 | 核心功能 | 详细说明 |
|---|
| 思考 | 任务拆解与路径规划 | 智能体接收到模糊目标（如"帮我调研并搭建一个技术博客"）后，会进行任务拆解与路径规划，并在执行过程中不断反思"当前方案是否最优？是否需要调整？" |
| 行动 | 调用高度自动化的原子能力 | 基于思考结果，调用高度自动化的原子能力。除了读写文件、网页浏览、运行终端命令或访问数据库外，常见的原子能力还包括：
• 环境探测：自动识别当前操作系统环境、安装缺失的依赖包。
• 视觉交互：在没有 API 的情况下，通过屏幕截图识别 UI 元素并模拟点击。
• 资源调度：自动申请 API Key、配置云端服务或触发 GitHub Actions 工作流。
• 跨应用编排：将 A 应用的输出处理后，精准填充到 B 应用的表单中。 |
| 学习 | 个人偏好沉淀与经验积累 | 这是通用 Agent 进阶的关键。它能从交互中记住你的个人偏好（例如：报告偏好 PDF 格式、代码风格倾向于 TypeScript），并将其沉淀为"经验"，使下一次决策更符合预期。 |
为了应对不同复杂程度的任务，业界演化出了两种主流的实现范式：
- ReAct 像是一个反应敏捷的**“现场协调员”，擅长随机应变。
- Plan-and-Execute 则更像一位经验丰富的“项目经理”**，以全局规划见长。
| 范式类型 | 核心逻辑 | 优势 | 适用场景 |
|---|
| ReAct Agent | 采用"思考-行动-观测"小步快跑模式。模型走一步看一步，根据环境的即时反馈调整下一步动作。 | 实时性强、交互自然、逻辑链路透明。 | 较为简单的任务、对成本敏感的轻量级场景。 |
| Plan-and-Execute Agent | 先由一个"大脑"将复杂目标拆解为完整的步骤列表（Todo List），再由另一只 "手" 负责逐一高效执行。 | 准确率极高，能够处理具备深度依赖关系的复杂工程。 | 需要长程推理的任务、软件开发、深度行业调研。 |
5.2 多智能体系统 (Multi-Agent System)
多智能体系统通过 “专注子任务、上下文解耦、并行推进” 的逻辑，让 AI 从一个人的独角戏，演变成了指挥若定的交响乐。它不仅提高了任务的完成上限，更让 AI 的工作变得可预测、可管理。
当面对较复杂的工程任务时，单个 Agent 往往会因为任务链信息量太大而信息量太大而陷入"混乱"或出错。多智能体系统 (Multi-Agent System) 的出现，本质上是让 AI 的工作模式从"单打独斗"转向"团队协作"。
在 MAS 架构中，主智能体（Lead Agent）可以根据需求生成多个独立的子智能体（Subagent）。这些子智能体像是一群专注的专家，各自处理特定的子任务，从而带来了四个维度的核心优势：
| 维度 | 详细说明 |
|---|
| 上下文的精细隔离 | 这是多智能体最强悍的地方。每个子智能体拥有独立的记忆空间，确保细碎的中间任务不会"污染"主对话环境。例如，负责搜集海量原始数据的 Subagent，其繁杂的搜索记录会被隔离在自己的上下文中，只把最终提炼的结论汇报给主智能体，让主脑始终保持清醒的大局观。 |
| 极致的并行化效率 | 在单 Agent 模式下，任务只能一件接一件地做；而在 MAS 中，多个子智能体可以并行运行。就像一个调研项目，多个研究员可以同时在不同领域搜集数据，显著加快了复杂工作流的交付速度。 |
| 专业指令的深度定制 | 我们可以为不同的 Subagent 注入不同的"灵魂"。负责"代码审计"的拥有最严苛的安全规范，负责"文案润色"的拥有细腻的品牌调性。这种指令隔离避免了在同一个提示词（Prompt）中堆砌太多要求而导致的指令失效。 |
| 工具调用的安全边界 | 我们可以精准限制每个子智能体的权限。例如，查询数据的 Subagent 只有"只读"权限，而"发送邮件"或"修改数据库"权限被严格限制在特定的 Subagent 手中，极大降低了 AI 产生意外行为的风险。 |
典型案例：Deep Research 深度调研系统
以一个复杂的调研流程为例，系统会通过 Lead Agent + Subagent 的分层架构完美闭环：
- Lead Agent (协调员)：负责“脑力拆解”，将主题分解为若干子课题，并委派任务，它从不亲自查资料，保持绝对的简效。
- Researcher (研究员)：多个实例并行出发，每个专注于一个子主题，搜集至少 10-15 个硬核数据点。
- Data Analyst (数据分析师)：仅负责读取研究笔记，利用 Python 生成直观的图表。
- Report Writer (报告撰写员)： 汇总所有研究成果，最终调用工具生成一份专业的 PDF 报告。
5.3 知识型 Agent
如果说通用 Agent 擅长逻辑推理，那么多智能体擅长流程协作，知识型 Agent 的核心使命则是"理解并转化海量非结构化数据"。它不仅仅是一个简单的搜索工具，而是一个能够深度理解私域知识并基于此进行复杂决策的智能实体。
在企业级应用中，数据往往散落在物理文档、代码仓库、Slack 聊天记录或关系型数据库中。知识型 Agent 的核心诉求在于：
"全局理解与跨库关联"：它能跨越不同的文档格式与存储介质，建立起知识间的逻辑联系。
"动态更新与实时同步"：它能感知环境反馈，随着项目进展自动同步最新的会议纪要或技术方案。
"深度的知识推理"： 不止是"检索"，更是"思考"。
应用场景示例：
想象你需要复盘一个复杂项目的进度。知识型 Agent 可以瞬间扫描过去三个月的所有项目会议纪要、Slack 讨论记录和技术文档，最终为你总结出："导致 X 项目延期的核心原因主要集中在 A 接口的权限变动，以及 B 团队在第二周的人力缺口。"
这种 Agent 的核心价值在于，它将原本"死"的资料库变成了"活"的生产力工具。无论是基于全局文档回答复杂问题，还是结合外部非知识工具（如自动发邮件通知相关责任人），知识型 Agent 都是构建知识密集型应用的关键。
5.4 多模态 Agent
多模态 Agent 是一种能够处理多种模态数据（如文本、图像、视频等）的 Agent 类型。其核心价值在于其感知与推理的深度融合：它不仅能"读"指令，更能"看"环境，并据此生成多维度的反馈。
- 全感官输入与输出：它可以直接接收图片、视频流或实时语音，并生成对应的多媒体内容或执行具体的动作。
- 跨模态深度推理：例如，它能结合图像细节与文本逻辑，识别出复杂的对象关联或异常状态。
典型应用场景：
想象一个"自动化 QA 测试 Agent"：你只需给它一段手机屏幕录屏，它能自动识别出 UI 界面上导致崩溃的 Bug 按钮位置，精准截取关键帧，并自动在 Jira 系统中提交一个包含“操作步骤、异常截图、预期效果”的专业技术工单。
这种能"能看、能听、能说"的特性，让 Agent 彻底走出了纯文字的温室，开始在 UI 自动化测试、工业巡检、智能家居等现实交互场景中大放异彩。
5.5 迈向高度自主：OpenClaw 与"数字员工"
通用型 Agent 虽然在逻辑推理与工具调用方面取得了长足进步，但在实际落地场景中仍面临显著限制。大多数系统本质上是反应性的，依赖人类持续的指令输入，难以在没有人工干预的情况下独立完成跨越数日的长时运行任务（Long-Running Tasks）。人们对一个 7 天 24 小时不间断工作的数字员工的愿景，催生了对基础架构的重新审视。
在这种背景下，OpenClaw 脱颖而出，成为解决长时运行、自主规划与持久化状态管理等核心技术挑战的典型代表。它不仅是一个 Agent 框架，更像是一个初步成形的 “Agent OS（智能体操作系统）”。其架构设计并非简单的 API 封装，而是一个务实的分布式控制平面。其最显著的特征是实现了控制逻辑（Control Plane）与推理执行（Runtime）的深度解耦。这一设计使得 OpenClaw 能够作为机器上的长久守护进程运行，保持对各种通讯频道的监听，同时处理复杂的后台任务。
另外，通过将网关控制平面、文件优先的记忆系统与心跳触发的被动唤醒机制相结合，OpenClaw 成功构建了一个支持长效运行的基础设施。它证明了自主智能体的真正力量不在于模型有多大，而在于其与物理环境、文件系统及人类现有通讯工具的深度集成程度。随着 IronClaw 等安全增强版本的成熟，以及 OpenClaw-RL 带来的持续进化能力，这种 24/7 不间断工作的"数字员工"将从开发者的玩具，逐步演变为企业和个人不可或缺的核心生产力基础设施。
在不久的将来，智能体的竞争焦点将从单纯的推理速度转向"运营可靠性"，那些具备自我修复能力、并在严格安全约束下执行高度自主任务的系统，将最终定义 AI 时代的数字化工作范式。OpenClaw 已经为这一未来铺平了道路，并建立了一个庞大的、去中心化的技能与知识库，让人们都能通过简单的 Markdown 配置，定制属于自己的、具备高度自主权的智能体助手。
6. 结语：从“对话”到“协同”的范式革命
从最初只会吟诗作对的"聊天机器人"，到如今能够独立思考、调用工具、协同作战的"数字员工"，AI Agent 的演进正以前所未有的速度重塑着人类的劳动范式。
我们正在经历一场深刻的变革：软件的形态正在从"死板的工具"转变为"有能动性的实体"。对于开发者而言，未来的核心竞争力将不再仅仅是编写了多少行代码，而是能否构建出深谙业务逻辑、能够自主调度资源并交付结果的 Agent 系统。
Agent 不是要取代人类的智慧，而是要将我们从繁琐的、重复性的数字劳作中解放出来，去关注更具创造力的决策。在这个 AI 驱动的新纪元里，每个人都将拥有一支属于自己的数字团队。未来已来，而 Agent 正是那把开启规模化个性化生产大门的钥匙。
',83)])])}const p=e(a,[["render",r]]);export{A as __pageData,p as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.BIpWVkHy.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.DMvs5K_Q.lean.js"
similarity index 97%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.BIpWVkHy.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.DMvs5K_Q.lean.js"
index e1aa64e3..1fd30c8e 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.BIpWVkHy.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_01.Agent\346\246\202\350\247\210\344\270\216\347\273\274\350\277\260.md.DMvs5K_Q.lean.js"
@@ -1 +1 @@
-import{_ as e,g as n,h as l,U as o}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const A=JSON.parse('{"title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","frontmatter":{"date":"2026-02-12T22:31:00.000Z","title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-agent/overview","top":true,"categories":["ai-practice"],"tags":["AI Agent","Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md","filePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"}'),a={name:"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"};function r(g,t,s,i,d,u){return l(),n("div",null,[...t[0]||(t[0]=[o("",83)])])}const p=e(a,[["render",r]]);export{A as __pageData,p as default};
+import{_ as e,g as n,h as l,U as o}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const A=JSON.parse('{"title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","frontmatter":{"date":"2026-02-12T22:31:00.000Z","title":"从提示词到数字员工：AI Agent 深度全景综述","description":"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png","permalink":"/ai-agent/overview","top":true,"categories":["ai-practice"],"tags":["AI Agent","Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md","filePath":"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"}'),a={name:"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md"};function r(g,t,s,i,d,u){return l(),n("div",null,[...t[0]||(t[0]=[o("",83)])])}const p=e(a,[["render",r]]);export{A as __pageData,p as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.BEUNtIDI.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.C3XAsz_e.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.BEUNtIDI.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.C3XAsz_e.js"
index df850dee..d1db5543 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.BEUNtIDI.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.C3XAsz_e.js"
@@ -1 +1 @@
-import{_ as e,g as n,h as a,U as r}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","frontmatter":{"date":"2026-02-24T20:52:37.000Z","title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","permalink":"/ai-agent/planning-module","sticky":1,"top":true,"categories":["AI 学习与实践"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md","filePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"}'),l={name:"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"};function i(o,t,g,s,d,p){return a(),n("div",null,[...t[0]||(t[0]=[r('Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md for this page in Markdown format
探寻 Agent 决策中枢：迈向确定性执行的规划范式
摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。
1. 引言
在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。
Agent 的规划能力主要由两部分协同驱动：任务分解与自我反思。
2. 任务分解：化繁为简的策略
任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。
根据“规划”与“执行”发生的时间节点，业界形成了三类主流方法。
2.1 先分解后规划
这种模式类似于“建筑图纸制”，先将复杂任务拆解为多个子任务，然后再为每个子任务制订详细的执行计划，确保Agent 在动手之前，必须产出完整的步骤清单。其核心逻辑是先将任务细化为子任务，并明确依赖关系。
先分解后规划的优势在于任务与原任务联系紧密，能有效降低任务遗漏和幻觉风险。它的不足在于缺乏灵活性，一旦初始计划中的某一步在执行时受阻，由于计划已固定，整个流程容易陷入死循环或彻底失败。因此，在工程实践中，我们必须深入思考如何设计动态调整策略或引入人工干预节点，以规避问题。
2.2 边分解边规划
这种模式类似于"摸着石头过河"，让推理与行动交替进行。Agent 不预设固定的执行路径，而是根据每一步的反馈动态调整，在分解任务的同时进行规划，实时优化子任务的执行顺序和策略。
分解边规划的策略能实时响应环境反馈，根据环境反馈调整分解策略，容错率高，具有较好的灵活性和适应性。但是，在处理复杂任务时，如果整个规划过程过长，可能会因为 LLM 上下文过长而产生“幻觉”，导致后续的任务与规划偏离初始目标。
2.3 基于语言模型的自主分解
这是一种更纯粹的模式，利用 LLM 强大的语义理解能力，直接通过 Prompt 引导其生成管理子任务的指令，将自然语言目标转化为机器可理解的步骤树。
它的核心逻辑是直接将自然任务细化为子任务，无需预设计划。这种模式虽然简单，但是需要 LLM 具备强大的语义理解能力，才能准确地将自然语言目标转换为子任务。同时，由于 LLM 生成的子任务是基于当前环境反馈的，因此在处理复杂任务时，可能会因为环境变化而产生“幻觉”，导致后续规划逐渐偏离初始目标。
3. 自我反思：闭环控制的艺术
在 Agent 规划模块中，反思（Reflection）是一个重要的概念，如果说任务分解是“进攻”，那么自我反思就是“防守”与“修正”。它是一种提升 Agent 运行成功率的核心提示策略，通过模型的自我审查来改进初步成果。
反思的基本原理是通过模型的自我审查和自我反馈来改进初步生成的内容，反思机制也通常遵循一个“生成-评估-修正”的循环：
生成阶段：模型产出初步的解决方案（如一段代码或一份大纲）。
反思阶段：模型切换为“审计员”角色，对照用户需求和客观约束，找出初步结果中的不足、逻辑漏洞或错误。
修正阶段：基于反思建议，重新组织结构或调整细节，产出更高质量的最终版本。
在每一轮反思中，AI 模型会回顾生成的内容，评估其质量，并提出修改建议。这些修改建议可以是细节上的调整，也可以是对生成结构的重新组织，目的是提升内容的连贯性、逻辑性、表达清晰度或增强对用户需求的适应性。
为了让这种“自我纠错”能力规模化，业界也演化出了几种成熟框架：
4. 动态响应模式：基于 ReAct 看规划闭环
在众多 Agent 设计模式中，ReAct (Reasoning + Acting) 是目前应用最广、直观性最强的模式。它完美体现了前文提到的“边分解边规划”策略，通过将推理（Reasoning）与行动（Acting）深度耦合，让 Agent 具备了在复杂环境中“小步快跑”的能力。
- 推理（Reason）：这是思考环节，Agent 根据当前状态评估形势，分析可能的行动方案，为下一步决策提供依据。
- 行动（Action）：根据推理结果，Agent 选择并执行具体的操作，将思考转化为实际动作。
- 观测（Observation）：这是闭环中最关键的一步，是关键的反馈吸收阶段。行动执行后，Agent 收集环境反馈，评估执行效果，并将结果作为下一轮推理的输入，形成闭环。
传统的 LLM 容易在长路径任务中迷失方向，而 ReAct 的核心在于构建了一个不断自修正的逻辑闭环，引入了“动态重判断”机制：
容错性：如果 Action 的结果报错（Observation），Agent 会在下一轮 Thought 中意识到错误，并主动调整策略。
透明性：人类可以清晰地看到 Agent 的“内心独白”，理解它是如何从初始目标一步步逼近最终答案的。
终止判断：当 Observation 的结果已经足以回答问题时，Agent 会做出“无需再调用工具”的决策，直接输出 Final Answer，优雅地结束规划。
这种“推理-行动-观测”的循环，将原本死板的逻辑链路转化为了具有生命力的、可进化的工作流。
5. 预编排模式：Plan-and-Execute 下的自动化工程
在分析完侧重“边走边看”的 ReAct 模式后，我们必须讨论另一种在处理高复杂度、长链路、强依赖任务时表现更稳健的范式：Plan-and-Execute（规划与执行分离）。
5.1 核心运行机制
与 ReAct 将推理与行动混合在每一轮循环中不同，该模式通过一个显式的“计划清单”作为中转站，实现了决策与执行的解耦：
规划器：建立全局航向，当用户提交一个宏观任务（如“从零开发一个 NestJS 认证模块”）时，规划器首先介入。它利用最强模型的逻辑能力，将模糊的目标拆解为一系列结构化的 Task List。这一步是“谋定”的过程。
执行器：专注原子操作，执行器并不关心最终目标有多宏观，它只负责按照清单逐一执行。这种设计允许执行器内部进行自循环（Internal Loop），以最纯粹的方式利用工具完成特定的子任务。
重规划：动态闭环的关键，每完成一个子任务，系统会带着执行结果（Observation）进入重规划环节。此时，Agent 会面临一个关键判定：
5.2 为什么在复杂场景中这种模式更具优势？
减少“推理漂移”：在 ReAct 模式下，模型容易因为每一步都要思考而逐渐忘记“初心”。Plan-and-Execute 通过一份全局可见的任务清单，锚定了长期目标。
上下文解耦：Executor 在执行第 5 个任务时，不需要关注第 1 个任务的详细推理过程，只需要关注第 4 个任务的输出。这极大节省了上下文空间，减少了因信息过载导致的幻觉。
高效重试：当任务执行失败时，系统只需要定位到清单中的特定索引进行重试或局部修正，而不需要从头开始整个推理链条。
5.3 小结
总的来说，Plan-and-Execute 模式并非排斥“边走边看”，而是通过架构上的解耦，为 Agent 注入了“工程师思维”：先出方案、逐项落实、节点复盘。
这一模式的精髓在于引入了重规划（RePlan）回路。正如流程图所示，它并不是在执行死板的脚本，而是在每一个关键步骤后都进行一次“判定是否继续”的元认知检查。这种机制有效地对抗了 LLM 的“瞬时记忆遗忘”，让 Agent 在面对需要跨越数十个步骤的自动化工程任务时，依然能保持航向的精准。
6. 范式选择：如何为你的 Agent 配置“小脑”？
在理解了 ReAct 与 Plan-and-Execute 后，开发者面临的核心挑战是如何在实际业务中进行选型。下表从工程实践角度对两者进行了对比总结：
| 维度 | ReAct | Plan-and-Execute |
|---|
| 规划时机 | 执行过程中实时推理 | 执行前进行全局拆解 |
| 错误处理 | 依赖下一轮 Thought 修正 | 依赖 RePlan 机制重修清单 |
| 适用广度 | 开放域交互、工具调用少 | 垂直域工程、长链路、强依赖 |
| 系统熵值 | 较高（状态随交互实时变化） | 较低（状态锚定在任务清单） |
7. 结语：规划是 Agent 迈向“确定性”的定盘星
至此，我们深度拆解了 Agent 规划模块的两大支柱：任务分解与自我反思。规划模块赋予了 Agent “逻辑”，但这仅仅是构建“数字员工”的第一步。一个能在复杂业务中持久生存的智能体，除了要懂得“如何思考”，还需要解决“我是谁、我做过什么、我从哪获取知识”的问题。在构建 Agent 时，并没有绝对的优劣之分。成熟的系统往往采用混合模式：在大目标上使用 Plan-and-Execute 保证方向不偏，在具体的子任务执行中开启 ReAct。
本篇文章到此结束，建议结合前文 《AI Agent 深度全景综述》 一起阅读，构建更完整的认知闭环。
',49)])])}const A=e(l,[["render",i]]);export{c as __pageData,A as default};
+import{_ as e,g as n,h as a,U as r}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","frontmatter":{"date":"2026-02-24T20:52:37.000Z","title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","permalink":"/ai-agent/planning-module","sticky":1,"top":true,"categories":["AI 学习与实践"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md","filePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"}'),l={name:"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"};function i(o,t,g,s,d,p){return a(),n("div",null,[...t[0]||(t[0]=[r('Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md for this page in Markdown format
探寻 Agent 决策中枢：迈向确定性执行的规划范式
摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。
1. 引言
在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。
Agent 的规划能力主要由两部分协同驱动：任务分解与自我反思。
2. 任务分解：化繁为简的策略
任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。
根据“规划”与“执行”发生的时间节点，业界形成了三类主流方法。
2.1 先分解后规划
这种模式类似于“建筑图纸制”，先将复杂任务拆解为多个子任务，然后再为每个子任务制订详细的执行计划，确保Agent 在动手之前，必须产出完整的步骤清单。其核心逻辑是先将任务细化为子任务，并明确依赖关系。
先分解后规划的优势在于任务与原任务联系紧密，能有效降低任务遗漏和幻觉风险。它的不足在于缺乏灵活性，一旦初始计划中的某一步在执行时受阻，由于计划已固定，整个流程容易陷入死循环或彻底失败。因此，在工程实践中，我们必须深入思考如何设计动态调整策略或引入人工干预节点，以规避问题。
2.2 边分解边规划
这种模式类似于"摸着石头过河"，让推理与行动交替进行。Agent 不预设固定的执行路径，而是根据每一步的反馈动态调整，在分解任务的同时进行规划，实时优化子任务的执行顺序和策略。
分解边规划的策略能实时响应环境反馈，根据环境反馈调整分解策略，容错率高，具有较好的灵活性和适应性。但是，在处理复杂任务时，如果整个规划过程过长，可能会因为 LLM 上下文过长而产生“幻觉”，导致后续的任务与规划偏离初始目标。
2.3 基于语言模型的自主分解
这是一种更纯粹的模式，利用 LLM 强大的语义理解能力，直接通过 Prompt 引导其生成管理子任务的指令，将自然语言目标转化为机器可理解的步骤树。
它的核心逻辑是直接将自然任务细化为子任务，无需预设计划。这种模式虽然简单，但是需要 LLM 具备强大的语义理解能力，才能准确地将自然语言目标转换为子任务。同时，由于 LLM 生成的子任务是基于当前环境反馈的，因此在处理复杂任务时，可能会因为环境变化而产生“幻觉”，导致后续规划逐渐偏离初始目标。
3. 自我反思：闭环控制的艺术
在 Agent 规划模块中，反思（Reflection）是一个重要的概念，如果说任务分解是“进攻”，那么自我反思就是“防守”与“修正”。它是一种提升 Agent 运行成功率的核心提示策略，通过模型的自我审查来改进初步成果。
反思的基本原理是通过模型的自我审查和自我反馈来改进初步生成的内容，反思机制也通常遵循一个“生成-评估-修正”的循环：
生成阶段：模型产出初步的解决方案（如一段代码或一份大纲）。
反思阶段：模型切换为“审计员”角色，对照用户需求和客观约束，找出初步结果中的不足、逻辑漏洞或错误。
修正阶段：基于反思建议，重新组织结构或调整细节，产出更高质量的最终版本。
在每一轮反思中，AI 模型会回顾生成的内容，评估其质量，并提出修改建议。这些修改建议可以是细节上的调整，也可以是对生成结构的重新组织，目的是提升内容的连贯性、逻辑性、表达清晰度或增强对用户需求的适应性。
为了让这种“自我纠错”能力规模化，业界也演化出了几种成熟框架：
4. 动态响应模式：基于 ReAct 看规划闭环
在众多 Agent 设计模式中，ReAct (Reasoning + Acting) 是目前应用最广、直观性最强的模式。它完美体现了前文提到的“边分解边规划”策略，通过将推理（Reasoning）与行动（Acting）深度耦合，让 Agent 具备了在复杂环境中“小步快跑”的能力。
- 推理（Reason）：这是思考环节，Agent 根据当前状态评估形势，分析可能的行动方案，为下一步决策提供依据。
- 行动（Action）：根据推理结果，Agent 选择并执行具体的操作，将思考转化为实际动作。
- 观测（Observation）：这是闭环中最关键的一步，是关键的反馈吸收阶段。行动执行后，Agent 收集环境反馈，评估执行效果，并将结果作为下一轮推理的输入，形成闭环。
传统的 LLM 容易在长路径任务中迷失方向，而 ReAct 的核心在于构建了一个不断自修正的逻辑闭环，引入了“动态重判断”机制：
容错性：如果 Action 的结果报错（Observation），Agent 会在下一轮 Thought 中意识到错误，并主动调整策略。
透明性：人类可以清晰地看到 Agent 的“内心独白”，理解它是如何从初始目标一步步逼近最终答案的。
终止判断：当 Observation 的结果已经足以回答问题时，Agent 会做出“无需再调用工具”的决策，直接输出 Final Answer，优雅地结束规划。
这种“推理-行动-观测”的循环，将原本死板的逻辑链路转化为了具有生命力的、可进化的工作流。
5. 预编排模式：Plan-and-Execute 下的自动化工程
在分析完侧重“边走边看”的 ReAct 模式后，我们必须讨论另一种在处理高复杂度、长链路、强依赖任务时表现更稳健的范式：Plan-and-Execute（规划与执行分离）。
5.1 核心运行机制
与 ReAct 将推理与行动混合在每一轮循环中不同，该模式通过一个显式的“计划清单”作为中转站，实现了决策与执行的解耦：
规划器：建立全局航向，当用户提交一个宏观任务（如“从零开发一个 NestJS 认证模块”）时，规划器首先介入。它利用最强模型的逻辑能力，将模糊的目标拆解为一系列结构化的 Task List。这一步是“谋定”的过程。
执行器：专注原子操作，执行器并不关心最终目标有多宏观，它只负责按照清单逐一执行。这种设计允许执行器内部进行自循环（Internal Loop），以最纯粹的方式利用工具完成特定的子任务。
重规划：动态闭环的关键，每完成一个子任务，系统会带着执行结果（Observation）进入重规划环节。此时，Agent 会面临一个关键判定：
5.2 为什么在复杂场景中这种模式更具优势？
减少“推理漂移”：在 ReAct 模式下，模型容易因为每一步都要思考而逐渐忘记“初心”。Plan-and-Execute 通过一份全局可见的任务清单，锚定了长期目标。
上下文解耦：Executor 在执行第 5 个任务时，不需要关注第 1 个任务的详细推理过程，只需要关注第 4 个任务的输出。这极大节省了上下文空间，减少了因信息过载导致的幻觉。
高效重试：当任务执行失败时，系统只需要定位到清单中的特定索引进行重试或局部修正，而不需要从头开始整个推理链条。
5.3 小结
总的来说，Plan-and-Execute 模式并非排斥“边走边看”，而是通过架构上的解耦，为 Agent 注入了“工程师思维”：先出方案、逐项落实、节点复盘。
这一模式的精髓在于引入了重规划（RePlan）回路。正如流程图所示，它并不是在执行死板的脚本，而是在每一个关键步骤后都进行一次“判定是否继续”的元认知检查。这种机制有效地对抗了 LLM 的“瞬时记忆遗忘”，让 Agent 在面对需要跨越数十个步骤的自动化工程任务时，依然能保持航向的精准。
6. 范式选择：如何为你的 Agent 配置“小脑”？
在理解了 ReAct 与 Plan-and-Execute 后，开发者面临的核心挑战是如何在实际业务中进行选型。下表从工程实践角度对两者进行了对比总结：
| 维度 | ReAct | Plan-and-Execute |
|---|
| 规划时机 | 执行过程中实时推理 | 执行前进行全局拆解 |
| 错误处理 | 依赖下一轮 Thought 修正 | 依赖 RePlan 机制重修清单 |
| 适用广度 | 开放域交互、工具调用少 | 垂直域工程、长链路、强依赖 |
| 系统熵值 | 较高（状态随交互实时变化） | 较低（状态锚定在任务清单） |
7. 结语：规划是 Agent 迈向“确定性”的定盘星
至此，我们深度拆解了 Agent 规划模块的两大支柱：任务分解与自我反思。规划模块赋予了 Agent “逻辑”，但这仅仅是构建“数字员工”的第一步。一个能在复杂业务中持久生存的智能体，除了要懂得“如何思考”，还需要解决“我是谁、我做过什么、我从哪获取知识”的问题。在构建 Agent 时，并没有绝对的优劣之分。成熟的系统往往采用混合模式：在大目标上使用 Plan-and-Execute 保证方向不偏，在具体的子任务执行中开启 ReAct。
本篇文章到此结束，建议结合前文 《AI Agent 深度全景综述》 一起阅读，构建更完整的认知闭环。
',49)])])}const A=e(l,[["render",i]]);export{c as __pageData,A as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.BEUNtIDI.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.C3XAsz_e.lean.js"
similarity index 96%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.BEUNtIDI.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.C3XAsz_e.lean.js"
index ca84a09b..9ae0bc33 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.BEUNtIDI.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_02.Agent \350\247\204\345\210\222\346\250\241\345\235\227.md.C3XAsz_e.lean.js"
@@ -1 +1 @@
-import{_ as e,g as n,h as a,U as r}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","frontmatter":{"date":"2026-02-24T20:52:37.000Z","title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","permalink":"/ai-agent/planning-module","sticky":1,"top":true,"categories":["AI 学习与实践"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md","filePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"}'),l={name:"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"};function i(o,t,g,s,d,p){return a(),n("div",null,[...t[0]||(t[0]=[r("",49)])])}const A=e(l,[["render",i]]);export{c as __pageData,A as default};
+import{_ as e,g as n,h as a,U as r}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","frontmatter":{"date":"2026-02-24T20:52:37.000Z","title":"探寻 Agent 决策中枢：迈向确定性执行的规划范式","description":"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。","permalink":"/ai-agent/planning-module","sticky":1,"top":true,"categories":["AI 学习与实践"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md","filePath":"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"}'),l={name:"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md"};function i(o,t,g,s,d,p){return a(),n("div",null,[...t[0]||(t[0]=[r("",49)])])}const A=e(l,[["render",i]]);export{c as __pageData,A as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Bgi-7Dm_.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Dzka5_K9.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Bgi-7Dm_.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Dzka5_K9.js"
index fbb0e379..0b62c1dd 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Bgi-7Dm_.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Dzka5_K9.js"
@@ -1 +1 @@
-import{_ as o,g as r,h as s,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const h=JSON.parse('{"title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","frontmatter":{"date":"2026-02-06T15:48:23.000Z","title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png","permalink":"/ai-agent/composition-ai-components","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md","filePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"}'),n={name:"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"};function a(d,t,i,l,g,p){return s(),r("div",null,[...t[0]||(t[0]=[e('Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md for this page in Markdown format
构建 Agentic 生态：零散组件化为可持续的工作流
摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。
1. 引言
问题：在智能体生态里，各个组件到底是怎么协同工作的？
当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态，一个最核心的问题往往萦绕在开发者和用户的脑海中：在这个生态里，各个组件究竟是如何协同工作的？
事实上，一个成熟的 Agentic 生态系统，其本质是通过优雅地整合 Prompts、Skills、Projects、Subagents 以及 MCP 等核心组件，将原本零散的 AI 能力，编织成一条可持续、高可用的工作流。这不仅大幅提升了人机协作的效率，更为系统运行的稳定性提供了坚实保障。
接下来，我们将逐一拆解这些核心组件，看看它们是如何各司其职的。
2. Prompts：即时灵活的对话指令
Prompts 是生态中最基础的交互单元，如同我们在日常对话中下达的即时指令。你通过自然语言驱动 AI，它随叫随到，响应迅速。
⚠️ 注意事项：Prompts 不具备持久性，不会跨对话自动保留，关闭对话后上下文即刻失效。因此，对于重复性工作或涉及深厚专业知识的任务，强烈建议将其沉淀为 Skills 或 Projects。
适用场景：
| 场景类型 | 具体说明 |
|---|
| 一次性需求 | 快速进行文章总结、短句翻译等 |
| 对话中的迭代优化 | 临时修改文案语气、调整表述逻辑 |
| 临时数据处理 | 输入一段临时上下文，进行即时的数据分析或内容解读 |
| 指定输出格式 | 例如要求 AI "按项目符号列表输出" 或 "输出为 JSON 格式" |
3. Skills：可复用的专属能力包（把高频方法变成可复用能力）
如果说 Prompts 是随口交代的任务，那么 Skills 就是标准化的“操作手册 + 资源包”。它将高频使用的方法固化下来，确保 AI 能够稳定、专业地按照同一套标准“做事”。
Skills 是一个包含完整指令说明、配套脚本和资源文件的能力文件夹。它采用渐进式加载机制（先加载元信息，再按需加载完整说明），在处理任务时按需发现、动态加载，实现特定领域的稳定、专业执行。
适用场景：
| 类型 | 说明 | 示例 |
|---|
| 组织级工作流 | 标准化流程，固化企业内部的统一规范 | 品牌使用指南、合规审批流程、常用文档模板 |
| 领域型能力 | 专业任务能力，沉淀特定领域的操作最佳实践 | Excel 复杂建模、PDF 深度解析、数据清洗规则 |
| 个人偏好 | 个性化工作方式，固化个人的工作习惯 | 特定的笔记结构、代码风格、信息调研流程 |
一些典型的应用场景： 读写本地文件、处理 PDF/Word/Excel、运行代码分析、执行 Git 操作、生成图表和可视化、优化自己或团队的工作流。
4. Projects：长期专属工作空间
Projects 是面向特定工作主题的“独立工作室”。它是一个自包含的工作空间，旨在为 AI 提供持续积累的知识与对话上下文。因此，Projects 本质上就是 Agent 核心组件中的记忆模块的一种具体实现——它以文件夹的形式，为特定主题提供持久化的上下文存储。当然，记忆的实现方式不止这一种，但这种"项目式"的组织方式在实际使用中尤为便捷直观。
每个 Project 都配备独立的聊天记录和高达 200K 的上下文窗口，支持上传背景资料、补充领域知识，并可配置项目级的全局自定义指令。
核心辨析：Projects vs. Skills
- Projects 解决的是“背景上下文”问题（例如：存放某个产品发布的所有背景材料、公司代码库或长期客户信息）。
- Skills 解决的是“具体怎么做”问题（例如：沉淀团队的代码评审流程）。 最佳实践： 如果你发现在多个 Projects 之间需要反复复制同一套指令，请将这些通用规则抽离出来，封装成一个 Skill。
适用场景： 当需要以下能力时，优先选择 Projects：
| 场景类型 | 具体说明 |
|---|
| 持久上下文 | 需要让同一批背景知识持续作用于每一轮对话的长期任务。 |
| 工作空间隔离 | 规整工作台，将不同项目、不同工作计划的上下文物理隔离，避免信息混淆。 |
| 团队协作 | 在 Team/Enterprise 环境下共享知识库与对话历史。 |
| 角色扮演 | 为特定的专项项目设置专属的语气、视角或工作方式。 |
5. Subagents：分工明确的专项助手
正如综述中所描述的，多智能体系统 (Multi-Agent System) 的出现，本质上是让 AI 的工作模式从"单打独斗"转向"团队协作"，通过 “专注子任务、上下文解耦、并行推进” 的逻辑，不仅提高了任务的完成上限，更让 AI 的工作变得可预测、可管理。
Subagents 是系统中的“独立执行单元”或“专职打工人”,它们是专攻特定细分任务的 AI 助手，拥有独立的上下文窗口和严格限定的工具权限。
通过自动委派或手动调用，Subagents 可以独立处理离散任务，并将结果回传给主代理，从而实现复杂任务的解耦与并行工作。
核心辨析：Subagents vs. Skills 用 Skills：把“怎么做”的通用方法论教给所有代理，让大家都能用。 用 Subagents：当需要独立执行、权限隔离、上下文隔离，并且希望按角色分工完成任务时。如果希望多个代理复用同一套安全审查流程，应该写成 Skill，而不是写死在某个 Subagent 里。
适用场景：
| 场景类型 | 具体说明 |
|---|
| 专精类任务 | 自动进行代码审查、测试用例生成、安全审计等闭环工作。 |
| 上下文管理 | 将专业且细碎的脏活累活下放给子代理，保持主对话上下文的清晰与聚焦。 |
| 并行处理 | 多个 Subagent 同时处理不同维度的任务，实现多任务并行处理，提升整体吞吐量。 |
| 隔离与限制 | 将特定 Subagent 限制在更安全的边界内（例如仅授予数据库的只读权限）。 |
6. MCP：模型上下文协议（外部连接通用协议）
角色定位
解决“数据在哪儿”的“外部桥梁与 USB 协议”
最后是 MCP（Model Context Protocol，模型上下文协议）。如果前面四个组件都在解决 AI 大脑内部的组织问题，那么 MCP 解决的就是“数据在哪儿”的外部桥梁问题。
MCP 是一套开放标准的连接层协议，专门用于将 AI 助手无缝接入各类外部系统、工具与数据源，彻底打破数据孤岛。它分为 MCP 服务端（暴露外部数据与能力）和 MCP 客户端（AI 应用发起调用）。
核心辨析： MPC vs. Skills，如果 AI Agent 是操作系统，MCP 就是 USB 协议，Skills 就是应用程序。
随着 Skills 的普及，MCP 的需求会大幅减少，Anthropic 的工程博客提到：他们用"代码执行 + MCP"的方法，把一个 150,000 token 的工作流压缩到了 2,000 tokens。他们的核心思路是让 AI 写代码调用工具，而不是预加载所有工具定义。这正是 Skills 的设计方向：用脚本封装能力，用渐进式披露管理知识，最大限度减少上下文消耗。
适用场景：
| 场景类型 | 具体说明 |
|---|
| 访问外部公共数据 | 调用第三方 SaaS API，桥接 Google Drive、Slack、GitHub 或各类云端数据库。 |
| 调用常规业务系统 | 对接企业的 CRM 系统、ERP 软件或项目管理平台。 |
| 访问需要认证的外部服务 | 访问需要 API 密钥或令牌的外部服务，如支付网关、数据仓库等。 |
| 对接企业自研系统 | 为内部专属业务工具提供标准化的 AI 接入方案。 |
7. 结束语
一个强大的 Agentic 生态，绝非新奇技术组件的无序堆砌，而是一场关乎系统架构与产品思维的深刻重塑。
当我们用 MCP 作为底层的“通用接口”去连接真实的外部数据，用 Projects 构筑起持久的领域知识上下文，用 Skills 将专家的工程规范与最佳实践固化为可执行脚本，用 Subagents 优雅地拆解并并行化复杂的业务逻辑，最后通过 Prompts 进行敏捷的意图调度时——我们实际上是在构建一个高度自治、可持续运转的 AI 原生操作系统。
在这个范式下，我们面对的不再是冷冰冰的代码或碎片化的对话框。通过规范驱动（Specification-Driven）的组件编排，我们正在以前所未有的效率，将零散的 AI 能力编织成高吞吐量的工作流，这不仅是机器能力的倍增，更是人类创造力的解放。
掌握了这套生态的协同机制，我们便能真正以一个 AI 赋能构建者（AI-Augmented Builder）的视角，让前沿技术精准落地，持续为产品与业务创造不可替代的价值。
',49)])])}const b=o(n,[["render",a]]);export{h as __pageData,b as default};
+import{_ as o,g as r,h as s,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const h=JSON.parse('{"title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","frontmatter":{"date":"2026-02-06T15:48:23.000Z","title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png","permalink":"/ai-agent/composition-ai-components","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md","filePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"}'),n={name:"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"};function a(d,t,i,l,g,p){return s(),r("div",null,[...t[0]||(t[0]=[e('Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md for this page in Markdown format
构建 Agentic 生态：零散组件化为可持续的工作流
摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。
1. 引言
问题：在智能体生态里，各个组件到底是怎么协同工作的？
当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态，一个最核心的问题往往萦绕在开发者和用户的脑海中：在这个生态里，各个组件究竟是如何协同工作的？
事实上，一个成熟的 Agentic 生态系统，其本质是通过优雅地整合 Prompts、Skills、Projects、Subagents 以及 MCP 等核心组件，将原本零散的 AI 能力，编织成一条可持续、高可用的工作流。这不仅大幅提升了人机协作的效率，更为系统运行的稳定性提供了坚实保障。
接下来，我们将逐一拆解这些核心组件，看看它们是如何各司其职的。
2. Prompts：即时灵活的对话指令
Prompts 是生态中最基础的交互单元，如同我们在日常对话中下达的即时指令。你通过自然语言驱动 AI，它随叫随到，响应迅速。
⚠️ 注意事项：Prompts 不具备持久性，不会跨对话自动保留，关闭对话后上下文即刻失效。因此，对于重复性工作或涉及深厚专业知识的任务，强烈建议将其沉淀为 Skills 或 Projects。
适用场景：
| 场景类型 | 具体说明 |
|---|
| 一次性需求 | 快速进行文章总结、短句翻译等 |
| 对话中的迭代优化 | 临时修改文案语气、调整表述逻辑 |
| 临时数据处理 | 输入一段临时上下文，进行即时的数据分析或内容解读 |
| 指定输出格式 | 例如要求 AI "按项目符号列表输出" 或 "输出为 JSON 格式" |
3. Skills：可复用的专属能力包（把高频方法变成可复用能力）
如果说 Prompts 是随口交代的任务，那么 Skills 就是标准化的“操作手册 + 资源包”。它将高频使用的方法固化下来，确保 AI 能够稳定、专业地按照同一套标准“做事”。
Skills 是一个包含完整指令说明、配套脚本和资源文件的能力文件夹。它采用渐进式加载机制（先加载元信息，再按需加载完整说明），在处理任务时按需发现、动态加载，实现特定领域的稳定、专业执行。
适用场景：
| 类型 | 说明 | 示例 |
|---|
| 组织级工作流 | 标准化流程，固化企业内部的统一规范 | 品牌使用指南、合规审批流程、常用文档模板 |
| 领域型能力 | 专业任务能力，沉淀特定领域的操作最佳实践 | Excel 复杂建模、PDF 深度解析、数据清洗规则 |
| 个人偏好 | 个性化工作方式，固化个人的工作习惯 | 特定的笔记结构、代码风格、信息调研流程 |
一些典型的应用场景： 读写本地文件、处理 PDF/Word/Excel、运行代码分析、执行 Git 操作、生成图表和可视化、优化自己或团队的工作流。
4. Projects：长期专属工作空间
Projects 是面向特定工作主题的“独立工作室”。它是一个自包含的工作空间，旨在为 AI 提供持续积累的知识与对话上下文。因此，Projects 本质上就是 Agent 核心组件中的记忆模块的一种具体实现——它以文件夹的形式，为特定主题提供持久化的上下文存储。当然，记忆的实现方式不止这一种，但这种"项目式"的组织方式在实际使用中尤为便捷直观。
每个 Project 都配备独立的聊天记录和高达 200K 的上下文窗口，支持上传背景资料、补充领域知识，并可配置项目级的全局自定义指令。
核心辨析：Projects vs. Skills
- Projects 解决的是“背景上下文”问题（例如：存放某个产品发布的所有背景材料、公司代码库或长期客户信息）。
- Skills 解决的是“具体怎么做”问题（例如：沉淀团队的代码评审流程）。 最佳实践： 如果你发现在多个 Projects 之间需要反复复制同一套指令，请将这些通用规则抽离出来，封装成一个 Skill。
适用场景： 当需要以下能力时，优先选择 Projects：
| 场景类型 | 具体说明 |
|---|
| 持久上下文 | 需要让同一批背景知识持续作用于每一轮对话的长期任务。 |
| 工作空间隔离 | 规整工作台，将不同项目、不同工作计划的上下文物理隔离，避免信息混淆。 |
| 团队协作 | 在 Team/Enterprise 环境下共享知识库与对话历史。 |
| 角色扮演 | 为特定的专项项目设置专属的语气、视角或工作方式。 |
5. Subagents：分工明确的专项助手
正如综述中所描述的，多智能体系统 (Multi-Agent System) 的出现，本质上是让 AI 的工作模式从"单打独斗"转向"团队协作"，通过 “专注子任务、上下文解耦、并行推进” 的逻辑，不仅提高了任务的完成上限，更让 AI 的工作变得可预测、可管理。
Subagents 是系统中的“独立执行单元”或“专职打工人”,它们是专攻特定细分任务的 AI 助手，拥有独立的上下文窗口和严格限定的工具权限。
通过自动委派或手动调用，Subagents 可以独立处理离散任务，并将结果回传给主代理，从而实现复杂任务的解耦与并行工作。
核心辨析：Subagents vs. Skills 用 Skills：把“怎么做”的通用方法论教给所有代理，让大家都能用。 用 Subagents：当需要独立执行、权限隔离、上下文隔离，并且希望按角色分工完成任务时。如果希望多个代理复用同一套安全审查流程，应该写成 Skill，而不是写死在某个 Subagent 里。
适用场景：
| 场景类型 | 具体说明 |
|---|
| 专精类任务 | 自动进行代码审查、测试用例生成、安全审计等闭环工作。 |
| 上下文管理 | 将专业且细碎的脏活累活下放给子代理，保持主对话上下文的清晰与聚焦。 |
| 并行处理 | 多个 Subagent 同时处理不同维度的任务，实现多任务并行处理，提升整体吞吐量。 |
| 隔离与限制 | 将特定 Subagent 限制在更安全的边界内（例如仅授予数据库的只读权限）。 |
6. MCP：模型上下文协议（外部连接通用协议）
角色定位
解决“数据在哪儿”的“外部桥梁与 USB 协议”
最后是 MCP（Model Context Protocol，模型上下文协议）。如果前面四个组件都在解决 AI 大脑内部的组织问题，那么 MCP 解决的就是“数据在哪儿”的外部桥梁问题。
MCP 是一套开放标准的连接层协议，专门用于将 AI 助手无缝接入各类外部系统、工具与数据源，彻底打破数据孤岛。它分为 MCP 服务端（暴露外部数据与能力）和 MCP 客户端（AI 应用发起调用）。
核心辨析： MPC vs. Skills，如果 AI Agent 是操作系统，MCP 就是 USB 协议，Skills 就是应用程序。
随着 Skills 的普及，MCP 的需求会大幅减少，Anthropic 的工程博客提到：他们用"代码执行 + MCP"的方法，把一个 150,000 token 的工作流压缩到了 2,000 tokens。他们的核心思路是让 AI 写代码调用工具，而不是预加载所有工具定义。这正是 Skills 的设计方向：用脚本封装能力，用渐进式披露管理知识，最大限度减少上下文消耗。
适用场景：
| 场景类型 | 具体说明 |
|---|
| 访问外部公共数据 | 调用第三方 SaaS API，桥接 Google Drive、Slack、GitHub 或各类云端数据库。 |
| 调用常规业务系统 | 对接企业的 CRM 系统、ERP 软件或项目管理平台。 |
| 访问需要认证的外部服务 | 访问需要 API 密钥或令牌的外部服务，如支付网关、数据仓库等。 |
| 对接企业自研系统 | 为内部专属业务工具提供标准化的 AI 接入方案。 |
7. 结束语
一个强大的 Agentic 生态，绝非新奇技术组件的无序堆砌，而是一场关乎系统架构与产品思维的深刻重塑。
当我们用 MCP 作为底层的“通用接口”去连接真实的外部数据，用 Projects 构筑起持久的领域知识上下文，用 Skills 将专家的工程规范与最佳实践固化为可执行脚本，用 Subagents 优雅地拆解并并行化复杂的业务逻辑，最后通过 Prompts 进行敏捷的意图调度时——我们实际上是在构建一个高度自治、可持续运转的 AI 原生操作系统。
在这个范式下，我们面对的不再是冷冰冰的代码或碎片化的对话框。通过规范驱动（Specification-Driven）的组件编排，我们正在以前所未有的效率，将零散的 AI 能力编织成高吞吐量的工作流，这不仅是机器能力的倍增，更是人类创造力的解放。
掌握了这套生态的协同机制，我们便能真正以一个 AI 赋能构建者（AI-Augmented Builder）的视角，让前沿技术精准落地，持续为产品与业务创造不可替代的价值。
',49)])])}const b=o(n,[["render",a]]);export{h as __pageData,b as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Bgi-7Dm_.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Dzka5_K9.lean.js"
similarity index 96%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Bgi-7Dm_.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Dzka5_K9.lean.js"
index 147f8b73..e1650ade 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Bgi-7Dm_.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_03.\346\236\204\345\273\272 Agentic \347\224\237\346\200\201\357\274\232\345\260\206\351\233\266\346\225\243\347\273\204\344\273\266\345\214\226\344\270\272\345\217\257\346\214\201\347\273\255\347\232\204\345\267\245\344\275\234\346\265\201.md.Dzka5_K9.lean.js"
@@ -1 +1 @@
-import{_ as o,g as r,h as s,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const h=JSON.parse('{"title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","frontmatter":{"date":"2026-02-06T15:48:23.000Z","title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png","permalink":"/ai-agent/composition-ai-components","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md","filePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"}'),n={name:"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"};function a(d,t,i,l,g,p){return s(),r("div",null,[...t[0]||(t[0]=[e("",49)])])}const b=o(n,[["render",a]]);export{h as __pageData,b as default};
+import{_ as o,g as r,h as s,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const h=JSON.parse('{"title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","frontmatter":{"date":"2026-02-06T15:48:23.000Z","title":"构建 Agentic 生态：零散组件化为可持续的工作流","description":"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png","permalink":"/ai-agent/composition-ai-components","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md","filePath":"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"}'),n={name:"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md"};function a(d,t,i,l,g,p){return s(),r("div",null,[...t[0]||(t[0]=[e("",49)])])}const b=o(n,[["render",a]]);export{h as __pageData,b as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.DFSiQA8t.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.BYP2Q09s.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.DFSiQA8t.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.BYP2Q09s.js"
index 3069511d..3ad82905 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.DFSiQA8t.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.BYP2Q09s.js"
@@ -1,4 +1,4 @@
-import{T as a}from"./chunks/TwoColumnImage.C5EZ0-fZ.js";import{g as i,h as l,U as n,z as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","frontmatter":{"date":"2026-03-05T23:11:25.000Z","title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","permalink":"/ai-agent/skills-practice-summary","sticky":1,"top":true,"categories":["AI 学习与实践","Agent 系列"],"tags":["Agent Skills","Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md","filePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"}'),t={name:"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"},o=Object.assign(t,{setup(p){return(r,s)=>(l(),i("div",null,[s[0]||(s[0]=n(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md for this page in Markdown format
如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南
摘要总结：大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。
1. 引言：Agent Skills 是什么？
在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。
为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力最直接、最硬核的落地载体，便是其配套的命令行工具 Claude Code）。
我们可以从两个维度来理解 Agent Skills 是什么：
| 维度 | 说明 |
|---|
| 工程架构维度 | Agent Skills 是一种模块化的能力组件，用于更优雅地扩展 AI 智能体（Agent）的功能，让 Agent 能够在更复杂的场景下执行更专业的任务。 |
| 实现维度 | 它是一个包含完整指令说明、配套脚本和资源文件的能力文件夹，集成了完备的指令说明（Prompts）、配套脚本（Scripts）及相关资源文件，其核心精髓在于：渐进式披露、动态发现与按需执行，从而在扩展能力的同时，严格控制上下文窗口的 Token 消耗和认知过载。 |
在 构建 Agentic 生态：零散组件化为可持续的工作流 一文中，我们确立了一些 “可持续工作流” 的共识。接下来，我们将通过细节解析与工程实践，揭开 Agent Skills 的面纱。
2. 文件夹结构拆解：标准化的操作手册
从本质上来讲，Agent Skills 是提供给 AI 的“操作手册 + 资源包”，其标准化的目录树如下：
严格的工程规范：
- 主文件必须命名为
SKILL.md（区分大小写，不能有其他变体）。 - 文件夹名称必须使用 kebab-case（如
my-skill-name，不能写成 My Skill Name）。
skill-name/
+import{T as a}from"./chunks/TwoColumnImage.BAUswlD7.js";import{g as i,h as l,U as n,z as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","frontmatter":{"date":"2026-03-05T23:11:25.000Z","title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","permalink":"/ai-agent/skills-practice-summary","sticky":1,"top":true,"categories":["AI 学习与实践","Agent 系列"],"tags":["Agent Skills","Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md","filePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"}'),t={name:"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"},o=Object.assign(t,{setup(p){return(r,s)=>(l(),i("div",null,[s[0]||(s[0]=n(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md for this page in Markdown format
如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南
摘要总结：大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。
1. 引言：Agent Skills 是什么？
在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。
为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力最直接、最硬核的落地载体，便是其配套的命令行工具 Claude Code）。
我们可以从两个维度来理解 Agent Skills 是什么：
| 维度 | 说明 |
|---|
| 工程架构维度 | Agent Skills 是一种模块化的能力组件，用于更优雅地扩展 AI 智能体（Agent）的功能，让 Agent 能够在更复杂的场景下执行更专业的任务。 |
| 实现维度 | 它是一个包含完整指令说明、配套脚本和资源文件的能力文件夹，集成了完备的指令说明（Prompts）、配套脚本（Scripts）及相关资源文件，其核心精髓在于：渐进式披露、动态发现与按需执行，从而在扩展能力的同时，严格控制上下文窗口的 Token 消耗和认知过载。 |
在 构建 Agentic 生态：零散组件化为可持续的工作流 一文中，我们确立了一些 “可持续工作流” 的共识。接下来，我们将通过细节解析与工程实践，揭开 Agent Skills 的面纱。
2. 文件夹结构拆解：标准化的操作手册
从本质上来讲，Agent Skills 是提供给 AI 的“操作手册 + 资源包”，其标准化的目录树如下：
严格的工程规范：
- 主文件必须命名为
SKILL.md（区分大小写，不能有其他变体）。 - 文件夹名称必须使用 kebab-case（如
my-skill-name，不能写成 My Skill Name）。
skill-name/
├── SKILL.md ← 主文件（必需）：SKILL描述、逻辑编排、核心指令，是技能核心内容。
├── scripts/ ← 脚本（可选）：Python、Bash 等脚本， 是可执行代码。
├── references/ ← 参考资源（可选）：规则、规范、参考指南、示例等。
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.DFSiQA8t.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.BYP2Q09s.lean.js"
similarity index 91%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.DFSiQA8t.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.BYP2Q09s.lean.js"
index a5583ffe..ae3b4823 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.DFSiQA8t.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_02.Agent \347\263\273\345\210\227_10.Agent SKills.md.BYP2Q09s.lean.js"
@@ -1 +1 @@
-import{T as a}from"./chunks/TwoColumnImage.C5EZ0-fZ.js";import{g as i,h as l,U as n,z as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","frontmatter":{"date":"2026-03-05T23:11:25.000Z","title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","permalink":"/ai-agent/skills-practice-summary","sticky":1,"top":true,"categories":["AI 学习与实践","Agent 系列"],"tags":["Agent Skills","Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md","filePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"}'),t={name:"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"},o=Object.assign(t,{setup(p){return(r,s)=>(l(),i("div",null,[s[0]||(s[0]=n("",16)),e(a,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_skill_md.png","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_use_skill_md.png",leftCaption:"图 1：来自 Anthropic 官方文档",rightCaption:"图 2：核心工作机制示意"}),s[1]||(s[1]=n("",46))]))}});export{d as __pageData,o as default};
+import{T as a}from"./chunks/TwoColumnImage.BAUswlD7.js";import{g as i,h as l,U as n,z as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","frontmatter":{"date":"2026-03-05T23:11:25.000Z","title":"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南","description":"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。","permalink":"/ai-agent/skills-practice-summary","sticky":1,"top":true,"categories":["AI 学习与实践","Agent 系列"],"tags":["Agent Skills","Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md","filePath":"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"}'),t={name:"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md"},o=Object.assign(t,{setup(p){return(r,s)=>(l(),i("div",null,[s[0]||(s[0]=n("",16)),e(a,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_skill_md.png","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_use_skill_md.png",leftCaption:"图 1：来自 Anthropic 官方文档",rightCaption:"图 2：核心工作机制示意"}),s[1]||(s[1]=n("",46))]))}});export{d as __pageData,o as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DOONNKFw.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DtQSvR-M.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DOONNKFw.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DtQSvR-M.js"
index 29806d17..bfbc1fc9 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DOONNKFw.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DtQSvR-M.js"
@@ -1,4 +1,4 @@
-import{T as e}from"./chunks/TwoColumnImage.C5EZ0-fZ.js";import{g as t,h as r,U as s,z as n}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","frontmatter":{"date":"2026-04-02T00:38:37.000Z","title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","permalink":"/ai-agent/deepresearch-agent","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent SDK","Multi-Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"},h=Object.assign(p,{setup(l){return(d,a)=>(r(),t("div",null,[a[0]||(a[0]=s(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md for this page in Markdown format
声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统
摘要总结：对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过 “Lead + Subagent” 的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。
1. 引言
在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板，更通过模块化的设计增强了系统的可解释性与可控性。
但在实际工程落地中，开发者往往会面临一个尴尬的现实：简单的任务单智能体就能搞定，复杂的任务给单智能体加再多 Prompt 也会陷入“逻辑疲劳”或“上下文迷失”。深度研究（Deep Research）正是这类复杂任务的典型代表。它要求系统在长上下文环境下，同时具备高效的信息检索、严谨的数据推理和专业的文档输出能力。
本文将分享我基于 Claude Agent SDK（TypeScript 版）构建 Deep Research Agent 的实践过程。我们将探讨如何通过声明式架构实现多 Agent 的职责隔离，并展示这种模式如何通过模块化设计显著提升研究报告的专业度。
说明：
2. 为什么深度研究需要 Multi-Agent 架构模式？
回顾我们自己在某个领域或专题进行深度研究的经历，不难发现：深度研究并非单一的写作任务，而是一个多工种流水线。这其实是一个典型的多阶段任务，每个阶段都需要不同的专业能力：
| 阶段 | 描述 |
|---|
| 搜索阶段 | 专注于信息检索与收集，帮助建立对该领域的初步认知 |
| 分析阶段 | 对收集到的信息进行深度分析与归纳，提取关键洞察，并据此确定研究方向与重点 |
| 写作阶段 | 将分析成果转化为结构化的文字内容，如研究论文、技术报告等 |
| 可视化阶段 | 通过数据图表、信息图等形式直观呈现分析结果，提升信息传达效率 |
这种阶段化的专业分工，与人类研究团队中的协作模式高度契合。此外，深度研究任务往往涉及很多信息整合，具有较高的复杂度。若采用单智能体架构，通常会面临 Context Window 限制、早期信息被稀释、推理质量随任务推进而下降等挑战。
Multi-Agent 模式则通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅能显著提升任务处理的上限，更通过模块化设计增强了系统的可解释性与可控性。
3. 系统架构
3.1 核心设计与职责分配
DeepResearch Agent 通过搜索、收集、分析各种来源的信息，将这些信息整合为带有可视化图表的深度研究报告，以支持复杂的研究和决策任务。其架构采用 Lead Agent + Subagent的设计思路：
- Lead Agent 的核心规则是“只做管理，不做执行”。它的 allowedTools 被严格限制为 Task 工具。这种设计能有效防止 Lead Agent 因为过度处理细节而导致的逻辑发散。
- Researcher 须找到 10-15+ 个具体数据点（百分比、市场规模、增长率等）供 Data Analyst 可视化
- Report Writer 使用 Python + reportlab 通过 Bash 工具生成 PDF 报告，确保报告格式专业、内容
| 智能体 | 职责 | 工具 |
|---|
| Lead Agent | 协调研究，并将任务委派给子智能体。任务分解、协调调度（仅使用 Task 工具委托任务） | Task |
| Researcher | 并行网络搜索，收集量化数据（每个研究员专注一个子主题） | WebSearch, Write |
| Data Analyst | 读取研究笔记，提取指标，生成 Python/matplotlib 图表 | Glob, Read, Grep, Bash, Write, Edit |
| Report Writer | 读取研究笔记和图表，生成 reportlab PDF 报告 | Skill, Write, Glob, Read, Bash |
Claude Agent SDK 起源于 Anthropic 的 Claude Code 项目，采用了与 Claude Code 相同的声明式设计，支持自定义技能和命令，针对 DeepResearch Agent 的具体任务，我们可以利用其声明式和模块化设计，添加一些相关的自定义 Agent Skills 和 Commands 命令：
deepresearch-agent/
+import{T as e}from"./chunks/TwoColumnImage.BAUswlD7.js";import{g as t,h as r,U as s,z as n}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","frontmatter":{"date":"2026-04-02T00:38:37.000Z","title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","permalink":"/ai-agent/deepresearch-agent","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent SDK","Multi-Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"},h=Object.assign(p,{setup(l){return(d,a)=>(r(),t("div",null,[a[0]||(a[0]=s(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md for this page in Markdown format
声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统
摘要总结：对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过 “Lead + Subagent” 的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。
1. 引言
在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板，更通过模块化的设计增强了系统的可解释性与可控性。
但在实际工程落地中，开发者往往会面临一个尴尬的现实：简单的任务单智能体就能搞定，复杂的任务给单智能体加再多 Prompt 也会陷入“逻辑疲劳”或“上下文迷失”。深度研究（Deep Research）正是这类复杂任务的典型代表。它要求系统在长上下文环境下，同时具备高效的信息检索、严谨的数据推理和专业的文档输出能力。
本文将分享我基于 Claude Agent SDK（TypeScript 版）构建 Deep Research Agent 的实践过程。我们将探讨如何通过声明式架构实现多 Agent 的职责隔离，并展示这种模式如何通过模块化设计显著提升研究报告的专业度。
说明：
2. 为什么深度研究需要 Multi-Agent 架构模式？
回顾我们自己在某个领域或专题进行深度研究的经历，不难发现：深度研究并非单一的写作任务，而是一个多工种流水线。这其实是一个典型的多阶段任务，每个阶段都需要不同的专业能力：
| 阶段 | 描述 |
|---|
| 搜索阶段 | 专注于信息检索与收集，帮助建立对该领域的初步认知 |
| 分析阶段 | 对收集到的信息进行深度分析与归纳，提取关键洞察，并据此确定研究方向与重点 |
| 写作阶段 | 将分析成果转化为结构化的文字内容，如研究论文、技术报告等 |
| 可视化阶段 | 通过数据图表、信息图等形式直观呈现分析结果，提升信息传达效率 |
这种阶段化的专业分工，与人类研究团队中的协作模式高度契合。此外，深度研究任务往往涉及很多信息整合，具有较高的复杂度。若采用单智能体架构，通常会面临 Context Window 限制、早期信息被稀释、推理质量随任务推进而下降等挑战。
Multi-Agent 模式则通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅能显著提升任务处理的上限，更通过模块化设计增强了系统的可解释性与可控性。
3. 系统架构
3.1 核心设计与职责分配
DeepResearch Agent 通过搜索、收集、分析各种来源的信息，将这些信息整合为带有可视化图表的深度研究报告，以支持复杂的研究和决策任务。其架构采用 Lead Agent + Subagent的设计思路：
- Lead Agent 的核心规则是“只做管理，不做执行”。它的 allowedTools 被严格限制为 Task 工具。这种设计能有效防止 Lead Agent 因为过度处理细节而导致的逻辑发散。
- Researcher 须找到 10-15+ 个具体数据点（百分比、市场规模、增长率等）供 Data Analyst 可视化
- Report Writer 使用 Python + reportlab 通过 Bash 工具生成 PDF 报告，确保报告格式专业、内容
| 智能体 | 职责 | 工具 |
|---|
| Lead Agent | 协调研究，并将任务委派给子智能体。任务分解、协调调度（仅使用 Task 工具委托任务） | Task |
| Researcher | 并行网络搜索，收集量化数据（每个研究员专注一个子主题） | WebSearch, Write |
| Data Analyst | 读取研究笔记，提取指标，生成 Python/matplotlib 图表 | Glob, Read, Grep, Bash, Write, Edit |
| Report Writer | 读取研究笔记和图表，生成 reportlab PDF 报告 | Skill, Write, Glob, Read, Bash |
Claude Agent SDK 起源于 Anthropic 的 Claude Code 项目，采用了与 Claude Code 相同的声明式设计，支持自定义技能和命令，针对 DeepResearch Agent 的具体任务，我们可以利用其声明式和模块化设计，添加一些相关的自定义 Agent Skills 和 Commands 命令：
deepresearch-agent/
├── .claude/
│ ├── skills/ # 可使用的 Agent Skills 技能目录
│ │ ├── pdf/ # 生成 PDF 报告的技能
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DOONNKFw.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DtQSvR-M.lean.js"
similarity index 92%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DOONNKFw.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DtQSvR-M.lean.js"
index bd51e657..3155f87b 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DOONNKFw.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_10.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Deep Research Agent.md.DtQSvR-M.lean.js"
@@ -1 +1 @@
-import{T as e}from"./chunks/TwoColumnImage.C5EZ0-fZ.js";import{g as t,h as r,U as s,z as n}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","frontmatter":{"date":"2026-04-02T00:38:37.000Z","title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","permalink":"/ai-agent/deepresearch-agent","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent SDK","Multi-Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"},h=Object.assign(p,{setup(l){return(d,a)=>(r(),t("div",null,[a[0]||(a[0]=s("",39)),n(e,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_3.jpg","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_2.jpg",leftCaption:"图 1：初中生数学成绩下降原因分析",rightCaption:"图 2：不同学习方法下的数学成绩优秀率对比"}),n(e,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_math_module.jpg","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_4.jpg",leftCaption:"图 3：初中数学各模块分值占比分布示意",rightCaption:"图 4：人的记忆保持随时间变化趋势曲线"}),a[1]||(a[1]=s("",5))]))}});export{c as __pageData,h as default};
+import{T as e}from"./chunks/TwoColumnImage.BAUswlD7.js";import{g as t,h as r,U as s,z as n}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","frontmatter":{"date":"2026-04-02T00:38:37.000Z","title":"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统","description":"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。","permalink":"/ai-agent/deepresearch-agent","sticky":1,"top":true,"categories":["AI 学习与实践"],"tags":["Agent SDK","Multi-Agent"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md"},h=Object.assign(p,{setup(l){return(d,a)=>(r(),t("div",null,[a[0]||(a[0]=s("",39)),n(e,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_3.jpg","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_2.jpg",leftCaption:"图 1：初中生数学成绩下降原因分析",rightCaption:"图 2：不同学习方法下的数学成绩优秀率对比"}),n(e,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_math_module.jpg","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/mas_output_4.jpg",leftCaption:"图 3：初中数学各模块分值占比分布示意",rightCaption:"图 4：人的记忆保持随时间变化趋势曲线"}),a[1]||(a[1]=s("",5))]))}});export{c as __pageData,h as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CWhLwl8r.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CAQEdrbh.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CWhLwl8r.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CAQEdrbh.js"
index e7c630e8..e89bc7f7 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CWhLwl8r.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CAQEdrbh.js"
@@ -1,4 +1,4 @@
-import{T as n}from"./chunks/TwoColumnImage.C5EZ0-fZ.js";import{g as l,h as p,U as e,z as h,i,S as a}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","frontmatter":{"date":"2026-03-06T00:37:58.000Z","title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","permalink":"/ai-practice/claude-agent-sdk-basic-build","top":true,"categories":["AI 学习与实践"],"tags":["Agent","Agent SDK"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"}'),t={name:"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"},c=Object.assign(t,{setup(k){return(r,s)=>(p(),l("div",null,[s[0]||(s[0]=e(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md for this page in Markdown format
告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环
摘要总结：在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop、会话持久化等机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。
1. 引言
当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的"半自动"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。
近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent 的首选。
本文将基于 Claude Agent SDK，分享一个从 0 到 1 构建简单 Agent 的实践经验。相关源代码已开源至 GitHub，托管在我与几个好友共同创建的组织 full-stack-workspace 旗下的 agent-playground 仓库中，对应示例项目为：@agent-playground/basic-example
2. 为什么选择 Claude Agent SDK？
Claude Agent SDK（前身为 Claude Code SDK）是 Anthropic 官方推出的开源框架。它的核心价值在于将复杂的“规划-执行-观察”循环（Agent Loop）进行了高度工程化封装，提供简洁的 API 用于构建具有工具使用能力的 AI Agent，让开发者专注于业务逻辑和智能体行为的设计。
对于开发者而言，它解决了以下核心痛点：
| 特性 | 说明 |
|---|
| Agent Loop | SDK 内部自动管理多轮交互、规划决策和工具调用，开发者无需再手写复杂的递归或循环逻辑。 |
| 开箱即用的原生技能 | 预置了经过 Anthropic 深度优化的工具，如文件系统操作（Read/Write/Edit）、终端命令执行（Bash）以及网络访问。 |
| 渐进式权限控制 | 提供多级 PermissionMode（如 acceptEdits、dontAsk 等），在安全与效率之间取得了极佳平衡。 |
| 上下文"记忆"管理 | 通过会话 ID 自动处理对话历史和工作状态，支持复杂的长上下文理解。 |
更多了解可参考：Claude Agent SDK 文档
3.快速上手：环境配置与初始化
3.1 安装依赖
由于本项目基于 Node.js 与 TypeScript，首先需要引入核心包：
bashpnpm install @anthropic-ai/claude-agent-sdk
1
3.2 环境变量的“陷阱”与配置
SDK 默认不会主动扫描 .env 文件。为了确保 API Key 和自定义模型参数生效，我们需要在入口处显式加载：
typescript// 项目入口文件 index.ts
+import{T as n}from"./chunks/TwoColumnImage.BAUswlD7.js";import{g as l,h as p,U as e,z as h,i,S as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","frontmatter":{"date":"2026-03-06T00:37:58.000Z","title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","permalink":"/ai-practice/claude-agent-sdk-basic-build","top":true,"categories":["AI 学习与实践"],"tags":["Agent","Agent SDK"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"}'),t={name:"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"},c=Object.assign(t,{setup(k){return(r,s)=>(p(),l("div",null,[s[0]||(s[0]=e(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md for this page in Markdown format
告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环
摘要总结：在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop、会话持久化等机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。
1. 引言
当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的"半自动"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。
近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent 的首选。
本文将基于 Claude Agent SDK，分享一个从 0 到 1 构建简单 Agent 的实践经验。相关源代码已开源至 GitHub，托管在我与几个好友共同创建的组织 full-stack-workspace 旗下的 agent-playground 仓库中，对应示例项目为：@agent-playground/basic-example
2. 为什么选择 Claude Agent SDK？
Claude Agent SDK（前身为 Claude Code SDK）是 Anthropic 官方推出的开源框架。它的核心价值在于将复杂的“规划-执行-观察”循环（Agent Loop）进行了高度工程化封装，提供简洁的 API 用于构建具有工具使用能力的 AI Agent，让开发者专注于业务逻辑和智能体行为的设计。
对于开发者而言，它解决了以下核心痛点：
| 特性 | 说明 |
|---|
| Agent Loop | SDK 内部自动管理多轮交互、规划决策和工具调用，开发者无需再手写复杂的递归或循环逻辑。 |
| 开箱即用的原生技能 | 预置了经过 Anthropic 深度优化的工具，如文件系统操作（Read/Write/Edit）、终端命令执行（Bash）以及网络访问。 |
| 渐进式权限控制 | 提供多级 PermissionMode（如 acceptEdits、dontAsk 等），在安全与效率之间取得了极佳平衡。 |
| 上下文"记忆"管理 | 通过会话 ID 自动处理对话历史和工作状态，支持复杂的长上下文理解。 |
更多了解可参考：Claude Agent SDK 文档
3.快速上手：环境配置与初始化
3.1 安装依赖
由于本项目基于 Node.js 与 TypeScript，首先需要引入核心包：
bashpnpm install @anthropic-ai/claude-agent-sdk
1
3.2 环境变量的“陷阱”与配置
SDK 默认不会主动扫描 .env 文件。为了确保 API Key 和自定义模型参数生效，我们需要在入口处显式加载：
typescript// 项目入口文件 index.ts
// 显式将 .env 文件中的内容加载到环境变量中
import 'dotenv/config';
1
2
3
.env 文件配置建议：在测试阶段，建议配置 ANTHROPIC_DEFAULT_HAIKU_MODEL 处理简单逻辑，使用 SONNET 处理复杂规划，以平衡响应速度与成本。
bash# .env
ANTHROPIC_BASE_URL=your_custom_model_api_base_url
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CWhLwl8r.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CAQEdrbh.lean.js"
similarity index 96%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CWhLwl8r.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CAQEdrbh.lean.js"
index f3a1e1e0..c8cc39a3 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CWhLwl8r.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_20.\345\237\272\344\272\216 Claude Agent SDK \346\220\255\345\273\272 Agent.md.CAQEdrbh.lean.js"
@@ -1 +1 @@
-import{T as n}from"./chunks/TwoColumnImage.C5EZ0-fZ.js";import{g as l,h as p,U as e,z as h,i,S as a}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","frontmatter":{"date":"2026-03-06T00:37:58.000Z","title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","permalink":"/ai-practice/claude-agent-sdk-basic-build","top":true,"categories":["AI 学习与实践"],"tags":["Agent","Agent SDK"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"}'),t={name:"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"},c=Object.assign(t,{setup(k){return(r,s)=>(p(),l("div",null,[s[0]||(s[0]=e("",52)),h(n,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/tui_chat_1.png","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/tui_chat_2.png",leftCaption:"",rightCaption:""}),s[1]||(s[1]=i("h2",{id:"_7-结束语",tabindex:"-1"},[a("7. 结束语 "),i("a",{class:"header-anchor",href:"#_7-结束语","aria-label":"Permalink to “7. 结束语”"},"")],-1)),s[2]||(s[2]=i("blockquote",null,[i("p",null,[i("strong",null,"从“调包侠”到“AI 架构师”，迈向更复杂的业务编排。")])],-1)),s[3]||(s[3]=i("p",null,[a("通过 Claude Agent SDK ，我们仅需少量代码就能构建出具备自主执行能力的 Agent，其背后的设计思想："),i("strong",null,"通过标准化 Skill 和会话管理"),a("，将复杂的 AI 交互逻辑转化为可预测的软件工程实践。")],-1)),s[4]||(s[4]=i("p",null,"深度体验后，我最大的感触是：，Agent 的开发重心也正在转向“如何构建可靠的工程闭环”。通过 SDK 提供的 Agent Loop、会话管理和标准化的工具、Skill 和 MCP 等扩展，我们实际上是在为 AI 搭建一套专属的“操作系统”。它让 AI 的行为变得可观测（通过流式日志）、可追溯（通过会话 ID）且可扩展（通过自定义工具）。",-1)),s[5]||(s[5]=i("p",null,"这种转变标志着真正的 AI Native 软件工程的正式到来。掌握这类 SDK，本质上是在学习如何利用 AI 这个“高阶杠杆”去编排复杂的业务流。",-1)),s[6]||(s[6]=i("p",null,'目前，我正在尝试将这套理念融入我的博客内容工作流，实现从"多维信源抓取"到"风格化润色"的全流程自动化。如果你对 Agent 在真实业务场景中可能面临的"工程腐化"问题，或是其"效率边界"的探索感兴趣，欢迎持续关注本系列的后续更新。',-1))]))}});export{g as __pageData,c as default};
+import{T as n}from"./chunks/TwoColumnImage.BAUswlD7.js";import{g as l,h as p,U as e,z as h,i,S as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","frontmatter":{"date":"2026-03-06T00:37:58.000Z","title":"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环","description":"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。","permalink":"/ai-practice/claude-agent-sdk-basic-build","top":true,"categories":["AI 学习与实践"],"tags":["Agent","Agent SDK"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"}'),t={name:"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md"},c=Object.assign(t,{setup(k){return(r,s)=>(p(),l("div",null,[s[0]||(s[0]=e("",52)),h(n,{"left-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/tui_chat_1.png","right-image":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/tui_chat_2.png",leftCaption:"",rightCaption:""}),s[1]||(s[1]=i("h2",{id:"_7-结束语",tabindex:"-1"},[a("7. 结束语 "),i("a",{class:"header-anchor",href:"#_7-结束语","aria-label":"Permalink to “7. 结束语”"},"")],-1)),s[2]||(s[2]=i("blockquote",null,[i("p",null,[i("strong",null,"从“调包侠”到“AI 架构师”，迈向更复杂的业务编排。")])],-1)),s[3]||(s[3]=i("p",null,[a("通过 Claude Agent SDK ，我们仅需少量代码就能构建出具备自主执行能力的 Agent，其背后的设计思想："),i("strong",null,"通过标准化 Skill 和会话管理"),a("，将复杂的 AI 交互逻辑转化为可预测的软件工程实践。")],-1)),s[4]||(s[4]=i("p",null,"深度体验后，我最大的感触是：，Agent 的开发重心也正在转向“如何构建可靠的工程闭环”。通过 SDK 提供的 Agent Loop、会话管理和标准化的工具、Skill 和 MCP 等扩展，我们实际上是在为 AI 搭建一套专属的“操作系统”。它让 AI 的行为变得可观测（通过流式日志）、可追溯（通过会话 ID）且可扩展（通过自定义工具）。",-1)),s[5]||(s[5]=i("p",null,"这种转变标志着真正的 AI Native 软件工程的正式到来。掌握这类 SDK，本质上是在学习如何利用 AI 这个“高阶杠杆”去编排复杂的业务流。",-1)),s[6]||(s[6]=i("p",null,'目前，我正在尝试将这套理念融入我的博客内容工作流，实现从"多维信源抓取"到"风格化润色"的全流程自动化。如果你对 Agent 在真实业务场景中可能面临的"工程腐化"问题，或是其"效率边界"的探索感兴趣，欢迎持续关注本系列的后续更新。',-1))]))}});export{g as __pageData,c as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.DXM5G5Ag.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.BVW8ytPR.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.DXM5G5Ag.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.BVW8ytPR.js"
index 7247f36a..ebfbff4f 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.DXM5G5Ag.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.BVW8ytPR.js"
@@ -1,4 +1,4 @@
-import{_ as n,g as a,h as i,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","frontmatter":{"date":"2024-06-14T22:00:00.000Z","title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","coverImg":"/img/cover/llm_learning_bg_2.png","permalink":"/ai-practice/math-bot","categories":["ai-practice"],"tags":["Agent","产品 Sense"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"};function l(t,s,r,h,k,o){return i(),a("div",null,[...s[0]||(s[0]=[e(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md for this page in Markdown format
一次由 Product Sense 驱动的 Agent 极限实践
摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。
在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。
令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。
复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。
以下是关于这次“K12 数学小助手” Agent 搭建的实践总结与思考。
1. 破局点：面对 K12 赛道，谁才是真正的用户？
活动给定的命题是“K12 教育”。在极限开发的时间压力下，最容易陷入的思维陷阱就是“直线思考”——既然是 K12，那就直接做一个给学生用的解题机器人。
但这恰恰违背了产品的核心逻辑。从受众角度来看，直接面向心智尚未成熟的 K12 学生提供一个“答案生成器”，极易沦为应付作业的作弊工具，既得不到学校的认可，也会引发家长的担忧。
因此，在选题阶段，我们进行了一次关键的视角切换：将目标用户从“学生”转移到了“家长和老师”。
当代家长在辅导孩子尤其是数学作业时，最大的痛点往往不是“不知道答案”，而是“不知道如何科学地给孩子讲解”。基于这个 Product Sense，我们确定了 Agent 的核心定位——它不是一个冷冰冰的解题机，而是一位帮助家长掌握科学辅导方法的“幕后导师”。
2. 为什么选择“数学”？—— 技术边界与场景的完美契合
在众多的 K12 学科中，我们最终锁定了“数学”，这并非偶然，而是基于对大语言模型（LLM）能力边界的清晰认知：
规避“幻觉”的工程解法：众所周知，纯文本大模型在进行严谨的逻辑推演和数学计算时，极易产生“幻觉”。但自定义 Agent 拥有调用外部工具（尤其是代码解释器 Code Interpreter）的能力。这意味着我们可以让 Agent 通过编写和执行代码来处理复杂的数学计算，从而在架构层面保证了结果的准确性。
满足“解题”与“解释”的双重需求：数学不仅仅是得出正确答案，更重要的是推导过程。Agent 可以并发处理双重任务——一方面在后台精准计算，另一方面在前台用自然语言将解题思路拆解为通俗易懂的“人话”，提供全面的教学辅助。
3. Agent 核心设计：结构化的 Prompt 规范
确定了产品方向后，接下来的重点就是“规范驱动” Prompt 设计。为了让 Agent 稳定输出高质量的内容，我们对其角色、工作流、工具链和限制条件进行了严格的定义。以下是我们在比赛中使用的核心 Prompt 设计：
markdown# 角色任务
+import{_ as n,g as a,h as i,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","frontmatter":{"date":"2024-06-14T22:00:00.000Z","title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","coverImg":"/img/cover/llm_learning_bg_2.png","permalink":"/ai-practice/math-bot","categories":["ai-practice"],"tags":["Agent","产品 Sense"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"};function l(t,s,r,h,k,o){return i(),a("div",null,[...s[0]||(s[0]=[e(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md for this page in Markdown format
一次由 Product Sense 驱动的 Agent 极限实践
摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。
在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。
令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。
复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。
以下是关于这次“K12 数学小助手” Agent 搭建的实践总结与思考。
1. 破局点：面对 K12 赛道，谁才是真正的用户？
活动给定的命题是“K12 教育”。在极限开发的时间压力下，最容易陷入的思维陷阱就是“直线思考”——既然是 K12，那就直接做一个给学生用的解题机器人。
但这恰恰违背了产品的核心逻辑。从受众角度来看，直接面向心智尚未成熟的 K12 学生提供一个“答案生成器”，极易沦为应付作业的作弊工具，既得不到学校的认可，也会引发家长的担忧。
因此，在选题阶段，我们进行了一次关键的视角切换：将目标用户从“学生”转移到了“家长和老师”。
当代家长在辅导孩子尤其是数学作业时，最大的痛点往往不是“不知道答案”，而是“不知道如何科学地给孩子讲解”。基于这个 Product Sense，我们确定了 Agent 的核心定位——它不是一个冷冰冰的解题机，而是一位帮助家长掌握科学辅导方法的“幕后导师”。
2. 为什么选择“数学”？—— 技术边界与场景的完美契合
在众多的 K12 学科中，我们最终锁定了“数学”，这并非偶然，而是基于对大语言模型（LLM）能力边界的清晰认知：
规避“幻觉”的工程解法：众所周知，纯文本大模型在进行严谨的逻辑推演和数学计算时，极易产生“幻觉”。但自定义 Agent 拥有调用外部工具（尤其是代码解释器 Code Interpreter）的能力。这意味着我们可以让 Agent 通过编写和执行代码来处理复杂的数学计算，从而在架构层面保证了结果的准确性。
满足“解题”与“解释”的双重需求：数学不仅仅是得出正确答案，更重要的是推导过程。Agent 可以并发处理双重任务——一方面在后台精准计算，另一方面在前台用自然语言将解题思路拆解为通俗易懂的“人话”，提供全面的教学辅助。
3. Agent 核心设计：结构化的 Prompt 规范
确定了产品方向后，接下来的重点就是“规范驱动” Prompt 设计。为了让 Agent 稳定输出高质量的内容，我们对其角色、工作流、工具链和限制条件进行了严格的定义。以下是我们在比赛中使用的核心 Prompt 设计：
markdown# 角色任务
你是一位经验丰富的小学数学教师，专注于帮助家长掌握科学的数学辅导方法。你的核心目标是引导家长理解问题背后的思维逻辑，提升他们协助孩子分析与解决问题的能力，真正做到“授人以渔”，同时还能够举一反三。
在回应家长提问时，请严格遵循以下三步流程：
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.DXM5G5Ag.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.BVW8ytPR.lean.js"
similarity index 95%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.DXM5G5Ag.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.BVW8ytPR.lean.js"
index 05ea85e4..62d61db3 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.DXM5G5Ag.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_60.\346\225\260\345\255\246\345\260\217\345\212\251\346\211\213.md.BVW8ytPR.lean.js"
@@ -1 +1 @@
-import{_ as n,g as a,h as i,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","frontmatter":{"date":"2024-06-14T22:00:00.000Z","title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","coverImg":"/img/cover/llm_learning_bg_2.png","permalink":"/ai-practice/math-bot","categories":["ai-practice"],"tags":["Agent","产品 Sense"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"};function l(t,s,r,h,k,o){return i(),a("div",null,[...s[0]||(s[0]=[e("",25)])])}const c=n(p,[["render",l]]);export{g as __pageData,c as default};
+import{_ as n,g as a,h as i,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","frontmatter":{"date":"2024-06-14T22:00:00.000Z","title":"一次由 Product Sense 驱动的 Agent 极限实践","description":"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。","coverImg":"/img/cover/llm_learning_bg_2.png","permalink":"/ai-practice/math-bot","categories":["ai-practice"],"tags":["Agent","产品 Sense"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md"};function l(t,s,r,h,k,o){return i(),a("div",null,[...s[0]||(s[0]=[e("",25)])])}const c=n(p,[["render",l]]);export{g as __pageData,c as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.j6xnTKI4.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.C1VKntBb.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.j6xnTKI4.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.C1VKntBb.js"
index 8ea74159..d3791fa2 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.j6xnTKI4.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.C1VKntBb.js"
@@ -1,4 +1,4 @@
-import{_ as n,g as i,h as a,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","frontmatter":{"date":"2024-04-19T22:15:38.000Z","title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","coverImg":"/img/cover/llm_learning_bg_2.png","categories":["ai-practice"],"permalink":"/ai-practice/poetry-bot","tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"};function e(t,s,h,r,k,E){return a(),i("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md for this page in Markdown format
零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战
摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。
1. 实践背景
周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。
正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。
2. 平台与 Agent 基本人设
2.1 平台选择
基于零代码平台搭建的需求，可选 Coze、Dify 和文心智能体等平台，但考虑到体验自家近期更新的能力，本次实践选择在文心智能体平台上进行。
2.2 角色设定与物料生成
在 AI 时代，创建一个 Agent 的“门面”自然也要用 AI 来完成。
- Icon 生成： 平台自带的图片生成能力表现不错，生成的 Icon 符合预期。
- 名称与描述： 平台自带的文本生成结果较为生硬，缺乏“人味”。因此，我转而使用更高阶的模型（ChatGPT），经过两轮对话对齐了调性，最终确定了满意的设定：
- 智能体名称： 诗歌小精灵
- 描述： 一个擅长创作诗歌、俏皮又灵动的小精灵
3. 工作模式与工具集配置
3.1 工具/插件配置
好的诗歌创作需要能综合考虑多个因素，因此可使用联网搜索能力、诗词搜索能力等工具，来获取相关的背景信息、创作灵感等：
- ✅ 联网搜索能力：用于获取相关背景信息。
- ✅ 诗词搜索能力：用于检索古诗词典故与创作灵感。
3.2 工作模式设定
为确保 Agent 在创作过程中既能调用工具，又能进行深度思考与逻辑组织，我排除了单一的“快速对话”或纯“工具调用”，最终选择了 工具调用 + 推理（深度思考） 的综合模式。
- ✅ 工具调用 + 推理
- ❌ 快速对话
- ❌ 深度思考
- ❌ 工具调用
3. Prompt 演进：从常规 Prompt 到结构化 Prompt
> 提示词演进：从“一段有逻辑的话”到“一套逻辑”。本次实践中最核心的目标：通过对比试验，分析结构化 Prompt 到底比普通 Prompt 好在哪里。
System Prompt 的质量直接决定了 Agent 的输出下限与上限。本次实践的核心，就是对比传统 Prompt 框架与结构化 Prompt 的实际表现。
3.1 阶段一：非结构化 System Prompt（基线测试）
思路： 围绕市面上常用的 Prompt 框架与模板，编写了一个较为规范的 Prompt。但这仅仅是一个“长文本”指令，在后续的扩展和微调上缺乏灵活性。
markdown# 角色规范
+import{_ as n,g as i,h as a,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","frontmatter":{"date":"2024-04-19T22:15:38.000Z","title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","coverImg":"/img/cover/llm_learning_bg_2.png","categories":["ai-practice"],"permalink":"/ai-practice/poetry-bot","tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"};function e(t,s,h,r,k,E){return a(),i("div",null,[...s[0]||(s[0]=[l(`Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md for this page in Markdown format
零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战
摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。
1. 实践背景
周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。
正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。
2. 平台与 Agent 基本人设
2.1 平台选择
基于零代码平台搭建的需求，可选 Coze、Dify 和文心智能体等平台，但考虑到体验自家近期更新的能力，本次实践选择在文心智能体平台上进行。
2.2 角色设定与物料生成
在 AI 时代，创建一个 Agent 的“门面”自然也要用 AI 来完成。
- Icon 生成： 平台自带的图片生成能力表现不错，生成的 Icon 符合预期。
- 名称与描述： 平台自带的文本生成结果较为生硬，缺乏“人味”。因此，我转而使用更高阶的模型（ChatGPT），经过两轮对话对齐了调性，最终确定了满意的设定：
- 智能体名称： 诗歌小精灵
- 描述： 一个擅长创作诗歌、俏皮又灵动的小精灵
3. 工作模式与工具集配置
3.1 工具/插件配置
好的诗歌创作需要能综合考虑多个因素，因此可使用联网搜索能力、诗词搜索能力等工具，来获取相关的背景信息、创作灵感等：
- ✅ 联网搜索能力：用于获取相关背景信息。
- ✅ 诗词搜索能力：用于检索古诗词典故与创作灵感。
3.2 工作模式设定
为确保 Agent 在创作过程中既能调用工具，又能进行深度思考与逻辑组织，我排除了单一的“快速对话”或纯“工具调用”，最终选择了 工具调用 + 推理（深度思考） 的综合模式。
- ✅ 工具调用 + 推理
- ❌ 快速对话
- ❌ 深度思考
- ❌ 工具调用
3. Prompt 演进：从常规 Prompt 到结构化 Prompt
> 提示词演进：从“一段有逻辑的话”到“一套逻辑”。本次实践中最核心的目标：通过对比试验，分析结构化 Prompt 到底比普通 Prompt 好在哪里。
System Prompt 的质量直接决定了 Agent 的输出下限与上限。本次实践的核心，就是对比传统 Prompt 框架与结构化 Prompt 的实际表现。
3.1 阶段一：非结构化 System Prompt（基线测试）
思路： 围绕市面上常用的 Prompt 框架与模板，编写了一个较为规范的 Prompt。但这仅仅是一个“长文本”指令，在后续的扩展和微调上缺乏灵活性。
markdown# 角色规范
你是一位专业的诗人，擅长创作现代诗、七言律诗和五言诗。你的任务是帮助用户通过诗歌表达情感、描绘景象或讲述故事。当用户提供诗歌形式和主题后，你将创作相应的诗歌，并附上解读、创作思路和灵感说明，最后通过精灵寄语激发用户的诗歌创作热情。
# 思考规范
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.j6xnTKI4.lean.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.C1VKntBb.lean.js"
similarity index 96%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.j6xnTKI4.lean.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.C1VKntBb.lean.js"
index 8d7e4492..1c7b2ac9 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.j6xnTKI4.lean.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_04.\347\244\276\345\214\272\346\264\273\345\212\250\344\270\216\345\256\236\350\267\265\345\260\217\351\241\271\347\233\256_70.\350\257\227\346\255\214\345\260\217\347\262\276\347\201\265.md.C1VKntBb.lean.js"
@@ -1 +1 @@
-import{_ as n,g as i,h as a,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const g=JSON.parse('{"title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","frontmatter":{"date":"2024-04-19T22:15:38.000Z","title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","coverImg":"/img/cover/llm_learning_bg_2.png","categories":["ai-practice"],"permalink":"/ai-practice/poetry-bot","tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"};function e(t,s,h,r,k,E){return a(),i("div",null,[...s[0]||(s[0]=[l("",45)])])}const b=n(p,[["render",e]]);export{g as __pageData,b as default};
+import{_ as n,g as i,h as a,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const g=JSON.parse('{"title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","frontmatter":{"date":"2024-04-19T22:15:38.000Z","title":"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战","description":"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。","coverImg":"/img/cover/llm_learning_bg_2.png","categories":["ai-practice"],"permalink":"/ai-practice/poetry-bot","tags":["Agent","AI"]},"headers":[],"relativePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md","filePath":"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"}'),p={name:"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md"};function e(t,s,h,r,k,E){return a(),i("div",null,[...s[0]||(s[0]=[l("",45)])])}const b=n(p,[["render",e]]);export{g as __pageData,b as default};
diff --git "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_90.\350\265\204\346\272\220\344\270\216\345\267\245\345\205\267\346\216\250\350\215\220_01.\345\245\275\347\224\250\347\232\204 AI \345\212\251\346\211\213\344\270\216\345\267\245\344\275\234\347\253\231\346\216\250\350\215\220.md.vaSWKpLD.js" "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_90.\350\265\204\346\272\220\344\270\216\345\267\245\345\205\267\346\216\250\350\215\220_01.\345\245\275\347\224\250\347\232\204 AI \345\212\251\346\211\213\344\270\216\345\267\245\344\275\234\347\253\231\346\216\250\350\215\220.md.DT78Ux7f.js"
similarity index 99%
rename from "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_90.\350\265\204\346\272\220\344\270\216\345\267\245\345\205\267\346\216\250\350\215\220_01.\345\245\275\347\224\250\347\232\204 AI \345\212\251\346\211\213\344\270\216\345\267\245\344\275\234\347\253\231\346\216\250\350\215\220.md.vaSWKpLD.js"
rename to "assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_90.\350\265\204\346\272\220\344\270\216\345\267\245\345\205\267\346\216\250\350\215\220_01.\345\245\275\347\224\250\347\232\204 AI \345\212\251\346\211\213\344\270\216\345\267\245\344\275\234\347\253\231\346\216\250\350\215\220.md.DT78Ux7f.js"
index f3f8e628..e1d0741d 100644
--- "a/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_90.\350\265\204\346\272\220\344\270\216\345\267\245\345\205\267\346\216\250\350\215\220_01.\345\245\275\347\224\250\347\232\204 AI \345\212\251\346\211\213\344\270\216\345\267\245\344\275\234\347\253\231\346\216\250\350\215\220.md.vaSWKpLD.js"
+++ "b/assets/20.AI \345\255\246\344\271\240\344\270\216\345\256\236\350\267\265_90.\350\265\204\346\272\220\344\270\216\345\267\245\345\205\267\346\216\250\350\215\220_01.\345\245\275\347\224\250\347\232\204 AI \345\212\251\346\211\213\344\270\216\345\267\245\344\275\234\347\253\231\346\216\250\350\215\220.md.DT78Ux7f.js"
@@ -1 +1 @@
-import{_ as s,g as l,h as n,U as e,i as t}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const p=JSON.parse('{"title":"好用的 AI 助手与工作站推荐","description":"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。","frontmatter":{"date":"2025-11-25T00:52:28.000Z","title":"好用的 AI 助手与工作站推荐","description":"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。","permalink":"/ai-learning/tools-assistant","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png","categories":["资源推荐"],"tags":["资源推荐","AI","AI 助手","AI 搜索"]},"headers":[],"relativePath":"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md","filePath":"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md"}'),i={name:"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md"};function d(o,a,r,c,g,_){return n(),l("div",null,[...a[0]||(a[0]=[e('Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md for this page in Markdown format
好用的 AI 助手与工作站推荐
摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。
1. AI 助手
选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。
注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规性和部分定制化场景下更具优势，且访问更为便捷，适合日常使用和本地需求。
1.1. 国外
',6),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://gemini.google.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.gstatic.com/lamda/images/gemini_sparkle_aurora_33f86dc0c0257da337c63.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Gemini")]),t("p",{class:"desc"},"Gemini 是 Google 旗下的旗舰级 AI 助手，基于先进的 Gemini 大模型，融合智能问答、代码创作、文档分析、网页理解等多种能力，支持多轮对话、图像/文件输入，具备强大的推理与搜索增强功能。"),t("span",{class:"VPBadge tip badge"},"多模态")]),t("a",{href:"https://claude.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://claude.ai/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Claude")]),t("p",{class:"desc"},"Claude 是 Anthropic 推出的 AI 助手，以安全、诚实、无害为核心理念，擅长长文本理解、代码编写与复杂推理任务"),t("span",{class:"VPBadge tip badge"},"逻辑严谨")]),t("a",{href:"https://chat.openai.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://chatgpt.com/cdn/assets/favicon-l4nq08hd.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"ChatGPT")]),t("p",{class:"desc"},"OpenAI 是全球领先的人工智能公司，其 ChatGPT 是最知名的对话式 AI，可用于创作、代码、答疑、写作等多种场景"),t("span",{class:"VPBadge tip badge"},"全能助手")]),t("a",{href:"https://grok.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://grok.com/images/favicon.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Grok (xAI)")]),t("p",{class:"desc"},"Grok 是由 Elon 的 xAI 团队打造的旗舰 AI 助手，拥有实时联网、幽默对话风格和强大知识推理能力，支持多轮对话、知识问答，并且可无缝集成至 X（原 Twitter），供用户便捷调用。"),t("span",{class:"VPBadge tip badge"},"无缝集成 X")])])],-1),e('| 助手 | 🔑 核心能力标签 | 💡 典型使用场景 |
|---|
| ChatGPT | 综合能力最全面；GPT-4o 原生多模态（图/文/音/视频）；o1 / o3 系列深度推理链；GPTs 工具插件生态最丰富 | 写作与内容创作 代码生成与调试 复杂多步推理 多模态内容分析 |
| Claude | 200K 长上下文，指令遵循精准；输出逻辑严谨、结构清晰，极少幻觉；代码与文档质量高 | 长文档精读与摘要 复杂任务规划 高质量代码审查 AI Agent 推理后端 |
| Gemini | 100 万 Token 超长上下文；原生多模态（图/音频/视频）；与 Google Search、Workspace 生态深度整合 | 实时信息检索 · 跨模态内容理解 · 研究辅助 · Google 办公场景 |
| Grok | 实时接入 X（Twitter）数据流，时事感知最新；推理能力强；对话风格开放，限制少 | 时事热点与舆情追踪 · 开放性话题讨论 · 社媒内容分析 |
1.2. 国内
',2),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://www.minimaxi.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.minimaxi.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"miniMax")]),t("p",{class:"desc"},"miniMax 是国内领先的 AI 助手平台，拥有多模态大模型能力，支持对话问答、代码生成、文档处理、知识检索等丰富场景，聚焦自然语言理解与智能创作。界面体验优秀，生态开放，适合作为通用 AI 辅助工具使用。"),t("span",{class:"VPBadge tip badge"},"多模态")]),t("a",{href:"https://chatglm.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://chatglm.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"智谱清言")]),t("p",{class:"desc"},"智谱清言是由智谱AI推出的国产大模型应用平台，基于GLM系列大模型，支持对话问答、知识检索、代码生成、企业知识库等多场景，文本理解与推理能力优秀，界面简洁易用。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://kimi.moonshot.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://kimi.moonshot.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Kimi")]),t("p",{class:"desc"},"Kimi 是月之暗面（Moonshot AI）推出的智能助手，支持超长上下文对话、文件分析、智能问答、代码生成等多种能力，具备强大的中文语言理解和推理能力，界面友好，适合多场景使用。"),t("span",{class:"VPBadge tip badge"},"长上下文")]),t("a",{href:"https://www.deepseek.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.deepseek.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"deepseek")]),t("p",{class:"desc"},"DeepSeek 是国内技术领先的大模型平台，提供通用对话、AI 代码助手、文档处理、知识检索等服务，擅长代码生成、数学与逻辑推理，支持本地部署与企业级应用，性价比高、研发活跃。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://www.doubao.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/chat/favicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"豆包 (Doubao)")]),t("p",{class:"desc"},"字节跳动推出的新一代大模型“豆包”，主打轻量高效，专注智能问答、写作助手、内容总结、代码生成等场景，界面清爽体验友好，并不断开放使用与 API 能力。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://www.qianwen.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://img.alicdn.com/imgextra/i4/O1CN01uar8u91DHWktnF2fl_!!6000000000191-2-tps-110-110.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"通义千问 (Qwen)")]),t("p",{class:"desc"},"阿里云推出的通义千问大模型（Qwen），在中文理解与生成、代码和多模态等方面表现出色，适合内容创作、对话助手、企业知识库等多样业务场景，支持超长上下文和插件生态。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://yiyan.baidu.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://eb-static.cdn.bcebos.com/logo/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"文心一言 (ERNIE Bot)")]),t("p",{class:"desc"},"百度推出的文心一言（ERNIE Bot）大模型，具备强大的中文语义理解、信息检索、多轮对话与代码能力，适用于搜索问答、智能创作、企业接入等场景，拥有丰富的 API 与生态支持。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://yuanbao.tencent.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://static.yuanbao.tencent.com/m/yuanbao-web/favicon@32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"元宝 (Hunyuan)")]),t("p",{class:"desc"},"腾讯推出的元宝（Hunyuan）大模型助手，专注于中文理解与生成，支持对话问答、内容创作、代码、搜索、数据分析等多场景，界面简洁功能丰富，具备企业级接入能力。"),t("span",{class:"VPBadge tip badge"},"国内")])])],-1),e('| 助手 | 🔑 核心能力标签 | 💡 典型使用场景 |
|---|
| miniMax | 100 万 Token 超长上下文（国内领先）；文本 / 语音 / 视频多模态全覆盖；Hailuo AI 视频生成、Talkie 角色对话出海竞争力强；API 开放度高 | 超长文档理解 · AI 视频生成 · 语音合成与克隆 · 角色扮演 / AI 陪伴 · 多模态应用开发 |
| Kimi | 100 万 Token 中文长上下文；多格式文件解析（PDF / Word / 代码）；内置联网检索与深度研究（Research）模式 | 长文档阅读与结构化提炼 · 学术论文 / 法律合同分析 · 多文件对比 · 深度研究报告 |
| 智谱清言 (GLM) | GLM-4 数学与代码推理突出；支持 Function Call 工具调用；多模态（GLM-4V）；企业 RAG / Agent 生态完善 | 企业知识库问答与 RAG · 代码与数学推理 · Agent 工具链开发 · 图文多模态理解 |
| DeepSeek | 全量权重开源可本地部署；R1 具备类 o1 慢思考推理链，数学与逻辑能力顶尖；API 价格极低性价比高 | 代码生成与调试 · 数学 / 逻辑推理 · 学术研究 · 低成本私有化部署 |
| 通义千问 (Qwen) | Qwen2.5 涵盖文本 / 代码（Qwen-Coder）/ 数学 / 多模态（Qwen-VL）子模型；与钉钉、阿里云工具链深度集成；部分开源 | 中文内容创作 · 代码与数学 · 钉钉 / 阿里云生态集成 · 多模态图文生成 |
| 豆包 (Doubao) | 响应速度快，日常体验流畅；与抖音 / 飞书 / 剪映生态打通；具备联网搜索与图像理解；API 价格友好 | 日常问答与内容摘要 · 创意写作辅助 · 短视频内容策划 · 飞书 / 抖音场景集成 |
| 文心一言 (ERNIE) | 与百度搜索深度融合，联网实时性强；千帆平台支持 Fine-tuning 与私有化部署；中文知识图谱积累深厚 | 搜索增强实时问答 · 中文专业内容生成 · 企业知识库 · Fine-tuning 定制业务模型 |
| 腾讯元宝 (Hunyuan) | 融合腾讯搜索与知识图谱；无缝对接微信 / 企业微信 / 腾讯文档；多轮对话与文档分析稳定；企业合规有保障 | 企业微信客服 / 智能助理 · 办公协作场景 · 文档分析 · 腾讯生态集成 |
2. AI 学习与内容创作工作站
2.1 关键点说明
这类工具的本质是将 AI 嵌入「学习 — 整理 — 创作」全流程，我们在选择时需要关注三个维度：
- 输入能力： 能否导入 PDF / 网页 / 音视频等多种资料
- 知识关联： AI 能否跨文档建立联系、自动标签与归纳
- 输出质量： 总结 / 提问 / 大纲 / 演示文稿的实用性
2.2 选择建议
选择建议：深度学习与知识整合 → 强烈推荐 NotebookLM / YouMind（多源资料导入 + AI 总结 + 音频概述，学习神器）；个人笔记与知识库 → Notion AI；团队办公协作 → 飞书智能创作 / 飞书妙记；需要制作演示文稿 → Gamma；中文轻量知识管理 → FlowUs；流程文档与表格自动化 → Coda AI。
',7),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://notebooklm.google/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://notebooklm.google/_/static/branding/v4/light_mode/favicon/favicon.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"NotebookLM")]),t("p",{class:"desc"},'Google 出品的 AI 学习利器，可导入 PDF、网页、YouTube 视频、音频、Google Docs 等多种资料，AI 基于 Gemini 自动生成摘要、FAQ、学习指南、时间线和思维导图。独有的 Audio Overview（音频概述）功能可将任意资料转为两人播客式对话，实现"听着学"。堪称当下最强的个人学习与知识整合工具，完全免费。'),t("span",{class:"VPBadge tip badge"},"强力推荐")]),t("a",{href:"https://youmind.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://marketing-assets.youmind.com/logo-512.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"YouMind")]),t("p",{class:"desc"},"个性化 AI 学习与创作智能体，由国内前端领域知名开发者创业打造。内置浏览器插件可一键抓取网页、文章和视频内容，AI 自动整理生成知识卡片与图谱。支持多模型切换，兼顾碎片信息收集与深度创作，个人知识管理的得力助手。"),t("span",{class:"VPBadge tip badge"},"学习+创作")]),t("a",{href:"https://www.feishu.cn/product/feishuai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://p1-hera.feishucdn.com/tos-cn-i-jbbdkfciu3/1ec7129d900e442d8501d810efdaa369~tplv-jbbdkfciu3-image:0:0.image",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"飞书智能创作")]),t("p",{class:"desc"},"飞书 Docs 内置 AI 写作助手，支持文档自动生成、会议纪要智能整理、大纲生成与头脑风暴，与飞书日历、任务和项目深度联动，是企业/团队内容协作、会议知识总结与项目文档编写的首选工具。"),t("span",{class:"VPBadge tip badge"},"团队协作")]),t("a",{href:"https://www.notion.com/product/ai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Notion AI")]),t("p",{class:"desc"},"全球最受欢迎的笔记与协作平台内置 AI 助手，支持文档自动生成、内容总结、多语言翻译与润色、头脑风暴和自动分类归档，并与 Notion 数据库、看板、Wiki 无缝联动，适合个人知识库与团队项目管理中的内容整理与二次创作。"),t("span",{class:"VPBadge tip badge"},"笔记+协作")]),t("a",{href:"https://gamma.app/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://gamma.app/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Gamma")]),t("p",{class:"desc"},"新一代 AI 演示文稿与内容创作平台，输入一句话主题或导入笔记/大纲即可自动生成精美 PPT、网页或文档，AI 负责排版、配图与动效，支持实时协作和嵌入式分享。从知识输出到视觉呈现，一步到位。"),t("span",{class:"VPBadge tip badge"},"AI 演示")]),t("a",{href:"https://flowus.cn/ai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://cdn2.flowus.cn/assets/_next/static/media/favicon.0c45c594.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"FlowUs")]),t("p",{class:"desc"},"国内新一代知识管理与协作平台，类 Notion 体验但中文本地化更优，内置 AI 辅助写作 / 总结 / 翻译功能，支持多维表格、看板和文档协作，智能化解决工作、学习、生活中的各项任务。"),t("span",{class:"VPBadge tip badge"},"国内知识库")]),t("a",{href:"https://coda.io/product/ai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Coda AI")]),t("p",{class:"desc"},'一体化智能文档平台，融合 AI 文档生成、表格分析、内容自动填写与总结，强大的公式引擎与自动化工作流引擎让内容真正"活"起来，适合流程梳理、数据驱动型团队协作与知识管理场景。'),t("span",{class:"VPBadge tip badge"},"内容自动化")]),t("a",{href:"https://www.feishu.cn/minutes",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"飞书妙记")]),t("p",{class:"desc"},"飞书旗下会议智能转录与总结服务，支持中英双语实时语音转录、AI 自动摘要与知识点抽取，可直接生成结构化笔记与任务清单，适合在线学习、课程复习、会议实时记录与培训内容归档。"),t("span",{class:"VPBadge note badge"},"语音转录")])])],-1),e('| 工具 | 核心能力标签 | 典型使用场景 | 多源导入 | AI 总结 | 多人协作 |
|---|
| NotebookLM | 多源知识融合；AI 自动总结 / FAQ / 学习指南 / 时间线 / 思维导图；Audio Overview 音频概述（可将资料转为播客式对话）；Gemini3 模型驱动 | 论文精读 · 课程笔记 · 调研资料汇总 · 播客式复习 · 知识卡片管理 | ✅ | ✅ | ❌ |
| YouMind | AI 学习与创作智能体；浏览器插件一键抓取；自动整理与知识图谱；多模型可选 | 碎片信息收集 · 个人知识库 · 灵感捕捉 · 内容创作辅助 | ✅ | ✅ | ❌ |
| Notion AI | 笔记内嵌 AI 助手；文档生成 / 总结 / 翻译 / 润色；数据库 + 看板 + Wiki 一体化；模板生态丰富 | 个人知识库 · 团队项目管理 · 内容整理与二次创作 · Wiki 文档协作 | ✅ | ✅ | ✅ |
| 飞书智能创作 | 飞书 Docs 内置 AI 写作；会议纪要自动整理；头脑风暴与大纲生成；与飞书日历 / 任务深度联动 | 企业文档编写 · 会议知识总结 · 团队头脑风暴 · OKR / 周报 | ✅ | ✅ | ✅ |
| Gamma | 一句话生成精美演示文稿 / 网页 / 文档；自动排版与配图；支持导入大纲或笔记一键转 PPT | 项目汇报 · 教学课件 · 产品演示 · 知识分享 | ✅ | ✅ | ✅ |
| FlowUs | 中文友好的 Notion 替代品；AI 辅助写作 / 总结 / 翻译；支持多维表格与看板 | 个人笔记 · 团队知识库 · 项目管理 · 中文内容协作 | ✅ | ✅ | ✅ |
| Coda AI | 文档 + 表格 + 自动化三合一；AI 自动填写与内容总结；强大的公式与流程引擎 | 流程梳理 · 数据驱动文档 · 团队知识管理 · 内容自动化 | ✅ | ✅ | ✅ |
| 飞书妙记 | 中英双语实时语音转录；AI 自动摘要与知识点提取；生成笔记与任务清单 | 会议实时记录 · 在线课程复习 · 播客转文字 · 培训内容归档 | ❌ | ✅ | ✅ |
📌 上手指引
- 第一步试 NotebookLM：打开 notebooklm.google，创建一个笔记本，导入你手头的 PDF / 网页链接 / YouTube 视频，几秒钟即可获得 AI 总结、FAQ 和学习指南。别忘了点 Audio Overview 生成"播客式"音频——通勤路上听知识，效率翻倍。
- 碎片知识收集：装好 YouMind 浏览器插件，日常刷到好文章/帖子一键保存，AI 自动打标签建图谱，告别"收藏夹吃灰"。
- 知识体系搭建：用 Notion AI 或 FlowUs 建个人 Wiki，把 NotebookLM 的总结、YouMind 的碎片、自己的思考沉淀到统一知识库，AI 辅助润色与二次加工。
- 团队协作场景：会议用 飞书妙记 实时转录 → 飞书智能创作生成纪要 → Notion / 飞书 Docs 归档，形成团队知识流水线。
- 知识输出与分享：需要做汇报或分享时，把笔记丢进 Gamma，一键生成精美演示文稿，省去排版烦恼。
3. AI 搜索
3.1 关键点说明
AI 搜索 ≠ 普通搜索，它会先用大模型理解意图、实时抓取多个网页，再综合归纳成"带引用的答案"，省去你逐条点链接的过程。判断一款 AI 搜索工具的关键维度：
- 引用可溯源性：答案是否附有来源链接
- 实时性：能否检索今日新闻
- 深度研究能力：是否支持多轮追问与自动报告生成
3.2 选择建议
选择建议：需要实时、带引用的英文学术/技术检索 → 优先 Perplexity；日常中文搜索想要直接答案 → 秘塔搜索 / 夸克；需要深度专题报告 → Perplexity Deep Research / 秘塔深度研究。
',8),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://www.perplexity.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Perplexity")]),t("p",{class:"desc"},"目前最受研究者和开发者青睐的 AI 搜索引擎，每条答案均附带来源链接，支持学术、新闻、代码等垂直搜索模式；Pro 版提供 Deep Research（深度研究报告）能力，可自动规划多轮检索并生成结构化报告，是替代传统搜索引擎的首选工具。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://google.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://google.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Google AI Overviews (SGE)")]),t("p",{class:"desc"},"Google 在搜索结果顶部嵌入的 AI 摘要区域（Search Generative Experience），由 Gemini 驱动，在保留传统蓝链的同时提供综合答案，无需切换产品即可体验 AI 搜索，已在 Google Search 主站全量上线。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://metaso.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://metaso.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"秘塔搜索 (Metaso)")]),t("p",{class:"desc"},'国内 AI 搜索体验最佳之一，界面零广告，答案以"大纲 + 来源引用"结构呈现，支持简洁/深入/研究三种检索深度；"深度研究"模式可自动生成多章节专题报告，适合学术调研、竞品分析、行业洞察等场景。'),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://www.baidu.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.baidu.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"百度 AI 搜索")]),t("p",{class:"desc"},"百度在传统搜索基础上接入文心大模型，提供 AI 生成摘要答案，同时保留原有搜索结果兜底，与百度地图、百度百科、百度文库深度联动，是国内互联网资源覆盖最广的 AI 搜索入口，适合中文日常搜索需求。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://ai.quark.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://quark.sm.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"夸克 AI 搜索")]),t("p",{class:"desc"},"阿里旗下夸克浏览器内置的 AI 搜索，融合通义千问大模型，支持直接问答、文件解析、图片识别和网盘资源检索；移动端体验流畅，是国内日常使用场景下综合体验较好的 AI 搜索 App。"),t("span",{class:"VPBadge tip badge"},"国内")])])],-1),e('| 工具 | 核心能力标签 | 典型使用场景 |
|---|
| Perplexity AI | AI 答案引用透明；学术/新闻/代码垂直搜索；Deep Research 自动多轮报告。 | 英文技术文档检索 · 学术调研 · 竞品速览 · 深度专题报告 |
| Google AI Overviews | 嵌入 Google 主搜索页；Gemini 驱动；保留蓝链兜底；覆盖范围最广。
深入解读参考：Complete Guide to AI Overview Optimization 2025 | 无需切换产品的日常搜索 · 快速事实核查 · 概念解释 |
| 秘塔搜索 | 零广告；大纲结构答案；深度研究报告；简洁/深入/研究三档。 | 中文学术调研 · 行业洞察报告 · 政策/法规检索 · 无干扰信息获取 |
| 百度 AI 搜索 | 文心大模型；中文资源覆盖最广；百科/地图/文库联动；传统搜索兜底 | 中文日常搜索 · 本地生活服务 · 百科知识查询 · 国内政策法规 |
| 夸克 AI 搜索 | 通义千问驱动；文件/图片解析；网盘资源检索；移动端体验佳 | 手机端日常问答 · 文件快速解析 · 网盘资源查找 · 阿里生态联动 |
📌 上手指引
- 新手入门：先用 秘塔搜索 或 Perplexity，直接把你以前用搜索引擎搜的问题原文粘进去，对比一下答案质量与来源引用。
- 追问技巧：AI 搜索支持多轮对话，搜到初步答案后，追问「能展开说说 X 部分吗？」「有没有反面案例？」效果远好于新开一次搜索。
- 深度研究：遇到需要写报告或做调研的场景，优先用 Perplexity Deep Research（英文）或 秘塔深度研究（中文），输入一句话主题即可自动生成带引用的多章节报告。
- 引用核查：AI 搜索会有"幻觉"风险，养成点击答案中的来源链接核实关键数据的习惯，尤其是数字、时间、人名等关键事实。
- 场景匹配：技术文档/代码 → Perplexity（学术模式）；中文无广告信息获取 → 秘塔；手机端快捷 → 夸克。
Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md for this page in Markdown format
好用的 AI 助手与工作站推荐
摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。
1. AI 助手
选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。
注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规性和部分定制化场景下更具优势，且访问更为便捷，适合日常使用和本地需求。
1.1. 国外
',6),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://gemini.google.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.gstatic.com/lamda/images/gemini_sparkle_aurora_33f86dc0c0257da337c63.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Gemini")]),t("p",{class:"desc"},"Gemini 是 Google 旗下的旗舰级 AI 助手，基于先进的 Gemini 大模型，融合智能问答、代码创作、文档分析、网页理解等多种能力，支持多轮对话、图像/文件输入，具备强大的推理与搜索增强功能。"),t("span",{class:"VPBadge tip badge"},"多模态")]),t("a",{href:"https://claude.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://claude.ai/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Claude")]),t("p",{class:"desc"},"Claude 是 Anthropic 推出的 AI 助手，以安全、诚实、无害为核心理念，擅长长文本理解、代码编写与复杂推理任务"),t("span",{class:"VPBadge tip badge"},"逻辑严谨")]),t("a",{href:"https://chat.openai.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://chatgpt.com/cdn/assets/favicon-l4nq08hd.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"ChatGPT")]),t("p",{class:"desc"},"OpenAI 是全球领先的人工智能公司，其 ChatGPT 是最知名的对话式 AI，可用于创作、代码、答疑、写作等多种场景"),t("span",{class:"VPBadge tip badge"},"全能助手")]),t("a",{href:"https://grok.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://grok.com/images/favicon.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Grok (xAI)")]),t("p",{class:"desc"},"Grok 是由 Elon 的 xAI 团队打造的旗舰 AI 助手，拥有实时联网、幽默对话风格和强大知识推理能力，支持多轮对话、知识问答，并且可无缝集成至 X（原 Twitter），供用户便捷调用。"),t("span",{class:"VPBadge tip badge"},"无缝集成 X")])])],-1),e('| 助手 | 🔑 核心能力标签 | 💡 典型使用场景 |
|---|
| ChatGPT | 综合能力最全面；GPT-4o 原生多模态（图/文/音/视频）；o1 / o3 系列深度推理链；GPTs 工具插件生态最丰富 | 写作与内容创作 代码生成与调试 复杂多步推理 多模态内容分析 |
| Claude | 200K 长上下文，指令遵循精准；输出逻辑严谨、结构清晰，极少幻觉；代码与文档质量高 | 长文档精读与摘要 复杂任务规划 高质量代码审查 AI Agent 推理后端 |
| Gemini | 100 万 Token 超长上下文；原生多模态（图/音频/视频）；与 Google Search、Workspace 生态深度整合 | 实时信息检索 · 跨模态内容理解 · 研究辅助 · Google 办公场景 |
| Grok | 实时接入 X（Twitter）数据流，时事感知最新；推理能力强；对话风格开放，限制少 | 时事热点与舆情追踪 · 开放性话题讨论 · 社媒内容分析 |
1.2. 国内
',2),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://www.minimaxi.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.minimaxi.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"miniMax")]),t("p",{class:"desc"},"miniMax 是国内领先的 AI 助手平台，拥有多模态大模型能力，支持对话问答、代码生成、文档处理、知识检索等丰富场景，聚焦自然语言理解与智能创作。界面体验优秀，生态开放，适合作为通用 AI 辅助工具使用。"),t("span",{class:"VPBadge tip badge"},"多模态")]),t("a",{href:"https://chatglm.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://chatglm.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"智谱清言")]),t("p",{class:"desc"},"智谱清言是由智谱AI推出的国产大模型应用平台，基于GLM系列大模型，支持对话问答、知识检索、代码生成、企业知识库等多场景，文本理解与推理能力优秀，界面简洁易用。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://kimi.moonshot.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://kimi.moonshot.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Kimi")]),t("p",{class:"desc"},"Kimi 是月之暗面（Moonshot AI）推出的智能助手，支持超长上下文对话、文件分析、智能问答、代码生成等多种能力，具备强大的中文语言理解和推理能力，界面友好，适合多场景使用。"),t("span",{class:"VPBadge tip badge"},"长上下文")]),t("a",{href:"https://www.deepseek.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.deepseek.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"deepseek")]),t("p",{class:"desc"},"DeepSeek 是国内技术领先的大模型平台，提供通用对话、AI 代码助手、文档处理、知识检索等服务，擅长代码生成、数学与逻辑推理，支持本地部署与企业级应用，性价比高、研发活跃。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://www.doubao.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/chat/favicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"豆包 (Doubao)")]),t("p",{class:"desc"},"字节跳动推出的新一代大模型“豆包”，主打轻量高效，专注智能问答、写作助手、内容总结、代码生成等场景，界面清爽体验友好，并不断开放使用与 API 能力。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://www.qianwen.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://img.alicdn.com/imgextra/i4/O1CN01uar8u91DHWktnF2fl_!!6000000000191-2-tps-110-110.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"通义千问 (Qwen)")]),t("p",{class:"desc"},"阿里云推出的通义千问大模型（Qwen），在中文理解与生成、代码和多模态等方面表现出色，适合内容创作、对话助手、企业知识库等多样业务场景，支持超长上下文和插件生态。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://yiyan.baidu.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://eb-static.cdn.bcebos.com/logo/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"文心一言 (ERNIE Bot)")]),t("p",{class:"desc"},"百度推出的文心一言（ERNIE Bot）大模型，具备强大的中文语义理解、信息检索、多轮对话与代码能力，适用于搜索问答、智能创作、企业接入等场景，拥有丰富的 API 与生态支持。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://yuanbao.tencent.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://static.yuanbao.tencent.com/m/yuanbao-web/favicon@32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"元宝 (Hunyuan)")]),t("p",{class:"desc"},"腾讯推出的元宝（Hunyuan）大模型助手，专注于中文理解与生成，支持对话问答、内容创作、代码、搜索、数据分析等多场景，界面简洁功能丰富，具备企业级接入能力。"),t("span",{class:"VPBadge tip badge"},"国内")])])],-1),e('| 助手 | 🔑 核心能力标签 | 💡 典型使用场景 |
|---|
| miniMax | 100 万 Token 超长上下文（国内领先）；文本 / 语音 / 视频多模态全覆盖；Hailuo AI 视频生成、Talkie 角色对话出海竞争力强；API 开放度高 | 超长文档理解 · AI 视频生成 · 语音合成与克隆 · 角色扮演 / AI 陪伴 · 多模态应用开发 |
| Kimi | 100 万 Token 中文长上下文；多格式文件解析（PDF / Word / 代码）；内置联网检索与深度研究（Research）模式 | 长文档阅读与结构化提炼 · 学术论文 / 法律合同分析 · 多文件对比 · 深度研究报告 |
| 智谱清言 (GLM) | GLM-4 数学与代码推理突出；支持 Function Call 工具调用；多模态（GLM-4V）；企业 RAG / Agent 生态完善 | 企业知识库问答与 RAG · 代码与数学推理 · Agent 工具链开发 · 图文多模态理解 |
| DeepSeek | 全量权重开源可本地部署；R1 具备类 o1 慢思考推理链，数学与逻辑能力顶尖；API 价格极低性价比高 | 代码生成与调试 · 数学 / 逻辑推理 · 学术研究 · 低成本私有化部署 |
| 通义千问 (Qwen) | Qwen2.5 涵盖文本 / 代码（Qwen-Coder）/ 数学 / 多模态（Qwen-VL）子模型；与钉钉、阿里云工具链深度集成；部分开源 | 中文内容创作 · 代码与数学 · 钉钉 / 阿里云生态集成 · 多模态图文生成 |
| 豆包 (Doubao) | 响应速度快，日常体验流畅；与抖音 / 飞书 / 剪映生态打通；具备联网搜索与图像理解；API 价格友好 | 日常问答与内容摘要 · 创意写作辅助 · 短视频内容策划 · 飞书 / 抖音场景集成 |
| 文心一言 (ERNIE) | 与百度搜索深度融合，联网实时性强；千帆平台支持 Fine-tuning 与私有化部署；中文知识图谱积累深厚 | 搜索增强实时问答 · 中文专业内容生成 · 企业知识库 · Fine-tuning 定制业务模型 |
| 腾讯元宝 (Hunyuan) | 融合腾讯搜索与知识图谱；无缝对接微信 / 企业微信 / 腾讯文档；多轮对话与文档分析稳定；企业合规有保障 | 企业微信客服 / 智能助理 · 办公协作场景 · 文档分析 · 腾讯生态集成 |
2. AI 学习与内容创作工作站
2.1 关键点说明
这类工具的本质是将 AI 嵌入「学习 — 整理 — 创作」全流程，我们在选择时需要关注三个维度：
- 输入能力： 能否导入 PDF / 网页 / 音视频等多种资料
- 知识关联： AI 能否跨文档建立联系、自动标签与归纳
- 输出质量： 总结 / 提问 / 大纲 / 演示文稿的实用性
2.2 选择建议
选择建议：深度学习与知识整合 → 强烈推荐 NotebookLM / YouMind（多源资料导入 + AI 总结 + 音频概述，学习神器）；个人笔记与知识库 → Notion AI；团队办公协作 → 飞书智能创作 / 飞书妙记；需要制作演示文稿 → Gamma；中文轻量知识管理 → FlowUs；流程文档与表格自动化 → Coda AI。
',7),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://notebooklm.google/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://notebooklm.google/_/static/branding/v4/light_mode/favicon/favicon.svg",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"NotebookLM")]),t("p",{class:"desc"},'Google 出品的 AI 学习利器，可导入 PDF、网页、YouTube 视频、音频、Google Docs 等多种资料，AI 基于 Gemini 自动生成摘要、FAQ、学习指南、时间线和思维导图。独有的 Audio Overview（音频概述）功能可将任意资料转为两人播客式对话，实现"听着学"。堪称当下最强的个人学习与知识整合工具，完全免费。'),t("span",{class:"VPBadge tip badge"},"强力推荐")]),t("a",{href:"https://youmind.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://marketing-assets.youmind.com/logo-512.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"YouMind")]),t("p",{class:"desc"},"个性化 AI 学习与创作智能体，由国内前端领域知名开发者创业打造。内置浏览器插件可一键抓取网页、文章和视频内容，AI 自动整理生成知识卡片与图谱。支持多模型切换，兼顾碎片信息收集与深度创作，个人知识管理的得力助手。"),t("span",{class:"VPBadge tip badge"},"学习+创作")]),t("a",{href:"https://www.feishu.cn/product/feishuai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://p1-hera.feishucdn.com/tos-cn-i-jbbdkfciu3/1ec7129d900e442d8501d810efdaa369~tplv-jbbdkfciu3-image:0:0.image",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"飞书智能创作")]),t("p",{class:"desc"},"飞书 Docs 内置 AI 写作助手，支持文档自动生成、会议纪要智能整理、大纲生成与头脑风暴，与飞书日历、任务和项目深度联动，是企业/团队内容协作、会议知识总结与项目文档编写的首选工具。"),t("span",{class:"VPBadge tip badge"},"团队协作")]),t("a",{href:"https://www.notion.com/product/ai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Notion AI")]),t("p",{class:"desc"},"全球最受欢迎的笔记与协作平台内置 AI 助手，支持文档自动生成、内容总结、多语言翻译与润色、头脑风暴和自动分类归档，并与 Notion 数据库、看板、Wiki 无缝联动，适合个人知识库与团队项目管理中的内容整理与二次创作。"),t("span",{class:"VPBadge tip badge"},"笔记+协作")]),t("a",{href:"https://gamma.app/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://gamma.app/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Gamma")]),t("p",{class:"desc"},"新一代 AI 演示文稿与内容创作平台，输入一句话主题或导入笔记/大纲即可自动生成精美 PPT、网页或文档，AI 负责排版、配图与动效，支持实时协作和嵌入式分享。从知识输出到视觉呈现，一步到位。"),t("span",{class:"VPBadge tip badge"},"AI 演示")]),t("a",{href:"https://flowus.cn/ai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://cdn2.flowus.cn/assets/_next/static/media/favicon.0c45c594.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"FlowUs")]),t("p",{class:"desc"},"国内新一代知识管理与协作平台，类 Notion 体验但中文本地化更优，内置 AI 辅助写作 / 总结 / 翻译功能，支持多维表格、看板和文档协作，智能化解决工作、学习、生活中的各项任务。"),t("span",{class:"VPBadge tip badge"},"国内知识库")]),t("a",{href:"https://coda.io/product/ai",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Coda AI")]),t("p",{class:"desc"},'一体化智能文档平台，融合 AI 文档生成、表格分析、内容自动填写与总结，强大的公式引擎与自动化工作流引擎让内容真正"活"起来，适合流程梳理、数据驱动型团队协作与知识管理场景。'),t("span",{class:"VPBadge tip badge"},"内容自动化")]),t("a",{href:"https://www.feishu.cn/minutes",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"飞书妙记")]),t("p",{class:"desc"},"飞书旗下会议智能转录与总结服务，支持中英双语实时语音转录、AI 自动摘要与知识点抽取，可直接生成结构化笔记与任务清单，适合在线学习、课程复习、会议实时记录与培训内容归档。"),t("span",{class:"VPBadge note badge"},"语音转录")])])],-1),e('| 工具 | 核心能力标签 | 典型使用场景 | 多源导入 | AI 总结 | 多人协作 |
|---|
| NotebookLM | 多源知识融合；AI 自动总结 / FAQ / 学习指南 / 时间线 / 思维导图；Audio Overview 音频概述（可将资料转为播客式对话）；Gemini3 模型驱动 | 论文精读 · 课程笔记 · 调研资料汇总 · 播客式复习 · 知识卡片管理 | ✅ | ✅ | ❌ |
| YouMind | AI 学习与创作智能体；浏览器插件一键抓取；自动整理与知识图谱；多模型可选 | 碎片信息收集 · 个人知识库 · 灵感捕捉 · 内容创作辅助 | ✅ | ✅ | ❌ |
| Notion AI | 笔记内嵌 AI 助手；文档生成 / 总结 / 翻译 / 润色；数据库 + 看板 + Wiki 一体化；模板生态丰富 | 个人知识库 · 团队项目管理 · 内容整理与二次创作 · Wiki 文档协作 | ✅ | ✅ | ✅ |
| 飞书智能创作 | 飞书 Docs 内置 AI 写作；会议纪要自动整理；头脑风暴与大纲生成；与飞书日历 / 任务深度联动 | 企业文档编写 · 会议知识总结 · 团队头脑风暴 · OKR / 周报 | ✅ | ✅ | ✅ |
| Gamma | 一句话生成精美演示文稿 / 网页 / 文档；自动排版与配图；支持导入大纲或笔记一键转 PPT | 项目汇报 · 教学课件 · 产品演示 · 知识分享 | ✅ | ✅ | ✅ |
| FlowUs | 中文友好的 Notion 替代品；AI 辅助写作 / 总结 / 翻译；支持多维表格与看板 | 个人笔记 · 团队知识库 · 项目管理 · 中文内容协作 | ✅ | ✅ | ✅ |
| Coda AI | 文档 + 表格 + 自动化三合一；AI 自动填写与内容总结；强大的公式与流程引擎 | 流程梳理 · 数据驱动文档 · 团队知识管理 · 内容自动化 | ✅ | ✅ | ✅ |
| 飞书妙记 | 中英双语实时语音转录；AI 自动摘要与知识点提取；生成笔记与任务清单 | 会议实时记录 · 在线课程复习 · 播客转文字 · 培训内容归档 | ❌ | ✅ | ✅ |
📌 上手指引
- 第一步试 NotebookLM：打开 notebooklm.google，创建一个笔记本，导入你手头的 PDF / 网页链接 / YouTube 视频，几秒钟即可获得 AI 总结、FAQ 和学习指南。别忘了点 Audio Overview 生成"播客式"音频——通勤路上听知识，效率翻倍。
- 碎片知识收集：装好 YouMind 浏览器插件，日常刷到好文章/帖子一键保存，AI 自动打标签建图谱，告别"收藏夹吃灰"。
- 知识体系搭建：用 Notion AI 或 FlowUs 建个人 Wiki，把 NotebookLM 的总结、YouMind 的碎片、自己的思考沉淀到统一知识库，AI 辅助润色与二次加工。
- 团队协作场景：会议用 飞书妙记 实时转录 → 飞书智能创作生成纪要 → Notion / 飞书 Docs 归档，形成团队知识流水线。
- 知识输出与分享：需要做汇报或分享时，把笔记丢进 Gamma，一键生成精美演示文稿，省去排版烦恼。
3. AI 搜索
3.1 关键点说明
AI 搜索 ≠ 普通搜索，它会先用大模型理解意图、实时抓取多个网页，再综合归纳成"带引用的答案"，省去你逐条点链接的过程。判断一款 AI 搜索工具的关键维度：
- 引用可溯源性：答案是否附有来源链接
- 实时性：能否检索今日新闻
- 深度研究能力：是否支持多轮追问与自动报告生成
3.2 选择建议
选择建议：需要实时、带引用的英文学术/技术检索 → 优先 Perplexity；日常中文搜索想要直接答案 → 秘塔搜索 / 夸克；需要深度专题报告 → Perplexity Deep Research / 秘塔深度研究。
',8),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://www.perplexity.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Perplexity")]),t("p",{class:"desc"},"目前最受研究者和开发者青睐的 AI 搜索引擎，每条答案均附带来源链接，支持学术、新闻、代码等垂直搜索模式；Pro 版提供 Deep Research（深度研究报告）能力，可自动规划多轮检索并生成结构化报告，是替代传统搜索引擎的首选工具。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://google.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://google.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Google AI Overviews (SGE)")]),t("p",{class:"desc"},"Google 在搜索结果顶部嵌入的 AI 摘要区域（Search Generative Experience），由 Gemini 驱动，在保留传统蓝链的同时提供综合答案，无需切换产品即可体验 AI 搜索，已在 Google Search 主站全量上线。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://metaso.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://metaso.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"秘塔搜索 (Metaso)")]),t("p",{class:"desc"},'国内 AI 搜索体验最佳之一，界面零广告，答案以"大纲 + 来源引用"结构呈现，支持简洁/深入/研究三种检索深度；"深度研究"模式可自动生成多章节专题报告，适合学术调研、竞品分析、行业洞察等场景。'),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://www.baidu.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.baidu.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"百度 AI 搜索")]),t("p",{class:"desc"},"百度在传统搜索基础上接入文心大模型，提供 AI 生成摘要答案，同时保留原有搜索结果兜底，与百度地图、百度百科、百度文库深度联动，是国内互联网资源覆盖最广的 AI 搜索入口，适合中文日常搜索需求。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://ai.quark.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://quark.sm.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"夸克 AI 搜索")]),t("p",{class:"desc"},"阿里旗下夸克浏览器内置的 AI 搜索，融合通义千问大模型，支持直接问答、文件解析、图片识别和网盘资源检索；移动端体验流畅，是国内日常使用场景下综合体验较好的 AI 搜索 App。"),t("span",{class:"VPBadge tip badge"},"国内")])])],-1),e('| 工具 | 核心能力标签 | 典型使用场景 |
|---|
| Perplexity AI | AI 答案引用透明；学术/新闻/代码垂直搜索；Deep Research 自动多轮报告。 | 英文技术文档检索 · 学术调研 · 竞品速览 · 深度专题报告 |
| Google AI Overviews | 嵌入 Google 主搜索页；Gemini 驱动；保留蓝链兜底；覆盖范围最广。
深入解读参考：Complete Guide to AI Overview Optimization 2025 | 无需切换产品的日常搜索 · 快速事实核查 · 概念解释 |
| 秘塔搜索 | 零广告；大纲结构答案；深度研究报告；简洁/深入/研究三档。 | 中文学术调研 · 行业洞察报告 · 政策/法规检索 · 无干扰信息获取 |
| 百度 AI 搜索 | 文心大模型；中文资源覆盖最广；百科/地图/文库联动；传统搜索兜底 | 中文日常搜索 · 本地生活服务 · 百科知识查询 · 国内政策法规 |
| 夸克 AI 搜索 | 通义千问驱动；文件/图片解析；网盘资源检索；移动端体验佳 | 手机端日常问答 · 文件快速解析 · 网盘资源查找 · 阿里生态联动 |
📌 上手指引
- 新手入门：先用 秘塔搜索 或 Perplexity，直接把你以前用搜索引擎搜的问题原文粘进去，对比一下答案质量与来源引用。
- 追问技巧：AI 搜索支持多轮对话，搜到初步答案后，追问「能展开说说 X 部分吗？」「有没有反面案例？」效果远好于新开一次搜索。
- 深度研究：遇到需要写报告或做调研的场景，优先用 Perplexity Deep Research（英文）或 秘塔深度研究（中文），输入一句话主题即可自动生成带引用的多章节报告。
- 引用核查：AI 搜索会有"幻觉"风险，养成点击答案中的来源链接核实关键数据的习惯，尤其是数字、时间、人名等关键事实。
- 场景匹配：技术文档/代码 → Perplexity（学术模式）；中文无广告信息获取 → 秘塔；手机端快捷 → 夸克。
Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md for this page in Markdown format
LLM API 平台推荐与选型指南
摘要总结：截至 2026 年，LLM API 服务已形成"官方直连 + 第三方聚合"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。
1. 选模型前，先想清楚这几件事
在对比具体平台之前，可从以下四个维度梳理自身诉求，避免"眼花缭乱后随便选一个"：
| 维度 | 关键问题 | 影响决策 |
|---|
| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |
| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |
| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |
| 网络环境 | 开发/部署环境能否稳定访问海外 API？ | 决定是否需要中转或国内聚合平台 |
三类模型服务的核心差异：
- 国际顶尖模型（Claude / ChatGPT / Gemini）：综合能力最强，英文处理、代码生成、复杂推理均居前列，多模态支持完善，但价格较高，国内访问需要特殊网络；
- 国产优秀模型（DeepSeek / Kimi / GLM / MiniMax / Doubao 等）：中文理解与合规性优势突出，Token 价格极具竞争力，部分模型推理能力已逼近国际顶尖，是国内开发者的性价比首选；
- 开源模型（Qwen / LLaMA / Mixtral 等）：支持本地或私有化部署，无数据出境风险，可通过 Ollama / vLLM / 硅基流动等部署或调用，适合对数据隐私或成本极度敏感的场景。
2. 官方 API 平台
官方平台即模型研发方直接开放的 API 服务，优势是最新模型第一时间可用、文档权威、SLA 有保障，缺点是需要逐一注册账号、管理多个 Key。
2.1 国际顶尖模型
',11),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://platform.openai.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://openai.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"OpenAI Platform")]),t("p",{class:"desc"},"OpenAI 官方 API 平台，提供 GPT-4o、o1、o3、GPT-3.5 等全系列模型调用。GPT-4o 原生支持文本/图像/音频/视频多模态输入，o1/o3 系列具备深度推理链能力，适合写作、代码生成、复杂推理等高要求场景。支持 Function Calling、流式输出、Fine-tuning，文档和生态最为成熟。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://www.anthropic.com/api",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://claude.ai/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Anthropic Claude API")]),t("p",{class:"desc"},"Anthropic 官方 API，提供 Claude 4.6 Sonnet / Haiku / Opus 等多版本模型，超长上下文业界领先，指令遵循精准、幻觉率低、输出结构清晰，在长文档分析、复杂代码审查与 AI Agent 开发场景中表现尤为突出。Haiku 版价格较低，适合高并发轻量场景。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://ai.google.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.gstatic.com/images/branding/searchlogo/ico/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Gemini API")]),t("p",{class:"desc"},"Google 官方 Gemini 模型 API 平台，支持 Gemini 3.0 Pro 与 Gemini 3.0 Flash（高速低成本）等版本，原生多模态（文本/图片/音频/视频/代码），免费套餐额度慷慨，与 Google Workspace、Vertex AI 深度集成，适合研究辅助与多模态应用开发。"),t("span",{class:"VPBadge tip badge"},"国外")])])],-1),e('| 模型 / 平台 | 核心优势 | 最适场景 | 价格档位 |
|---|
| OpenAI GPT | 综合能力最全面；原生多模态（图/文/音/视频）；o 系列有深度推理链 | 写作与内容创作 · 代码生成与调试 · 多模态分析 · 复杂推理 | 高 |
| Anthropic Claude | 指令遵循精准；输出结构清晰；长文档理解最强；代码与文档质量高；幻觉率低 | 长文档精读/摘要 · 复杂任务规划 · 高质量代码审查 · Agent 推理后端 | 高（Haiku 版较低） |
| Google Gemini | 超长上下文、原生多模态；与 Google Search / Workspace 深度整合；免费额度慷慨 | 超长资料理解 · 视频/音频分析 · 研究辅助 · Google 生态集成 | 中
免费额度大 |
2.2 国内优秀模型
',2),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://platform.deepseek.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.deepseek.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"DeepSeek API")]),t("p",{class:"desc"},"DeepSeek 官方 API 平台，提供 DeepSeek-V3（通用对话）与 DeepSeek-R1（深度推理）等模型。R1 的数学、代码与逻辑推理能力已逼近 OpenAI o1，且模型完全开源支持本地部署。API 定价业内极低，是性价比最突出的国产模型，尤其推荐代码生成与数学推理场景。"),t("span",{class:"VPBadge tip badge"},"极低价")]),t("a",{href:"https://console.volcengine.com/ark",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/chat/favicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Doubao API")]),t("p",{class:"desc"},"字节跳动旗下豆包大模型开放平台，提供 Doubao-pro / lite 等系列模型 API，响应速度业内领先，API 定价极低（Token 单价为国际顶尖模型的 1/10 以下），文档完善，支持免费额度与企业接入，适合高并发轻量对话与内容摘要场景。"),t("span",{class:"VPBadge tip badge"},"极低价")]),t("a",{href:"https://platform.moonshot.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://kimi.moonshot.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Kimi API")]),t("p",{class:"desc"},"月之暗面官方 API 平台，主打超长中文上下文（最高 128K～1M Token），支持 PDF / Word / 代码等多格式文件解析与深度研究模式，中文长文档理解能力国内领先。适合法律合同分析、学术论文精读、多文件对比摘要等重度阅读场景。"),t("span",{class:"VPBadge tip badge"},"长上下文")]),t("a",{href:"https://www.minimaxi.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.minimaxi.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"miniMax API")]),t("p",{class:"desc"},"miniMax 官方开放平台，提供 MiniMax-Text（100 万 Token 长上下文）、语音合成（TTS）、Hailuo AI 视频生成等多模态 API。文本/语音/视频能力均处于国内前列，适合需要多模态输出、语音克隆与 AI 视频生成的开发者。"),t("span",{class:"VPBadge tip badge"},"多模态")]),t("a",{href:"https://bailian.console.aliyun.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://img.alicdn.com/imgextra/i4/O1CN01uar8u91DHWktnF2fl_!!6000000000191-2-tps-110-110.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Qwen API")]),t("p",{class:"desc"},"阿里云 Qwen 系列模型官方 API 平台（百炼），涵盖 Qwen-Long（长上下文）、Qwen-Coder（代码）、Qwen-Math（数学）、Qwen-VL（多模态视觉）等专项子模型，与阿里云、钉钉生态深度集成，部分模型开源，文档完善，新用户有较大免费 Token 额度。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://open.bigmodel.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://open.bigmodel.cn/img/icons/favicon-32x32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"智谱 AI (GLM)")]),t("p",{class:"desc"},"智谱 AI 官方开放平台，提供 GLM-4 / GLM-4V（多模态）/ CodeGeeX（代码）等系列模型 API，数学与代码推理能力突出，Function Call 与工具调用完善，企业 RAG / Agent 生态成熟，适合开发知识库问答、Agent 工具链与图文多模态理解应用。"),t("span",{class:"VPBadge tip badge"},"国内")])])],-1),e('| 模型 / 平台 | 核心优势 | 最适场景 | 价格档位 |
|---|
| DeepSeek | R1 推理能力逼近 o1；数学/代码/逻辑顶尖；完全开源可本地部署；API 价格极低 | 代码生成与调试 · 数学/逻辑推理 · 学术研究 · 私有化部署 | 极低 ⭐ |
| Moonshot (Kimi) | 中文长上下文最强；多格式文件解析（PDF/Word/代码）；内置深度研究模式 | 长文档阅读与结构化提炼 · 法律/合同分析 · 多文件对比 | 低 |
| miniMax | 100 万 Token 长上下文；文本/语音/视频多模态；语音合成与视频生成能力强 | 超长文档理解 · AI 视频/语音生成 · 角色扮演/AI 陪伴 | 低 |
| 豆包 (Doubao) | 响应速度极快；API 价格最低；与字节跳动生态打通 | 高并发轻量对话 · 内容摘要 · 短视频内容策划 | 极低 ⭐ |
| 通义千问 (Qwen) | 子模型丰富（Coder/Math/VL）；阿里云生态集成；部分开源 | 中文内容创作 · 代码/数学 · 钉钉/阿里云场景 | 低 |
| 智谱 GLM | 数学与代码推理突出；Function Call 工具调用完善；企业 RAG 生态成熟 | 企业知识库问答 · Agent 工具链 · 图文多模态理解 | 低 |
3. 第三方聚合平台
第三方平台将多家主流模型聚合为统一 API 入口，开发者无需逐一申请各厂商 Key，可一站访问 GPT、Claude、Gemini、 MininMax、DeepSeek 等数百个模型，按量计费、兼容 OpenAI SDK，大幅降低接入与切换成本。国际开发者首选 OpenRouter，国内开发者首选硅基流动。
',3),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://openrouter.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://openrouter.ai/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"OpenRouter")]),t("p",{class:"desc"},"目前最受开发者欢迎的 LLM API 聚合平台，统一 OpenAI 兼容接口可路由至 300+ 模型（GPT-4o / Claude 3.5 / Gemini / LLaMA / DeepSeek 等），支持按量付费、自动降级 Fallback、流式输出与 Function Call，是切换/对比多家模型的首选。无需管理多个 Key，一个账号解决所有模型接入。"),t("span",{class:"VPBadge tip badge"},"强烈推荐")]),t("a",{href:"https://cloud.siliconflow.cn/me/models",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"SiliconFlow")]),t("p",{class:"desc"},"国内最受开发者欢迎的 LLM API 聚合与推理加速平台，提供 DeepSeek / Qwen / GLM / MiniMax 等主流模型的统一 API，兼容 OpenAI 接口格式，价格业内极低（部分模型免费），国内直连稳定，注册即可快速接入，是国内开发者使用第三方 API 的首选。"),t("span",{class:"VPBadge tip badge"},"国内首选")]),t("a",{href:"https://huggingface.co/inference-api",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://huggingface.co/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Hugging Face")]),t("p",{class:"desc"},"全球最大开源 AI 社区 Hugging Face 提供的推理 API，可直接调用平台上数十万个开源模型（文本/图像/音频/多模态），支持 Serverless 按需推理与 Dedicated Endpoints 专属部署，是开源模型生态的事实标准入口。"),t("span",{class:"VPBadge tip badge"},"开源生态")]),t("a",{href:"https://console.groq.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://groq.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Groq")]),t("p",{class:"desc"},"基于自研 LPU（Language Processing Unit）芯片的超高速推理平台，开源模型（LLaMA 3 / Mixtral / Gemma / DeepSeek 等）推理速度可达普通 GPU 的数十倍，免费套餐慷慨，接口完全兼容 OpenAI SDK，适合对响应延迟极敏感的实时对话、语音助手等场景。"),t("span",{class:"VPBadge tip badge"},"极速推理")]),t("a",{href:"https://www.together.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Together AI")]),t("p",{class:"desc"},"专注开源大模型的高性能推理与微调平台，支持 LLaMA 3 / Mixtral / Qwen / DBRX 等 100+ 开源模型 API 调用，提供 Fine-tuning 训练能力，价格极具竞争力，OpenAI 兼容接口，适合开源模型研发与企业私有化微调场景。"),t("span",{class:"VPBadge tip badge"},"开源+微调")]),t("a",{href:"https://replicate.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Replicate")]),t("p",{class:"desc"},'以"模型市场"形态运营的 AI API 平台，托管数千个开源图像、语音、文本模型（Stable Diffusion / LLaMA / Whisper 等），每个模型有独立 API 端点，按 GPU 计算秒数计费，无需搭建推理基础设施，适合快速调用多模态开源模型做原型验证。'),t("span",{class:"VPBadge tip badge"},"模型市场")]),t("a",{href:"https://302.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"302.AI")]),t("p",{class:"desc"},"国内知名的 AI API 中转与聚合平台，整合 OpenAI / Claude / Gemini 等国际主流模型，提供统一 OpenAI 兼容 API，支持国内直连无需科学上网，按量充值使用，并附带 Web 体验页面，适合个人开发者快速调用海外模型。"),t("span",{class:"VPBadge tip badge"},"国内中转")]),t("a",{href:"https://api2d.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"API2D")]),t("p",{class:"desc"},"专注 OpenAI 系列模型国内中转的 API 代理平台，完全兼容 OpenAI SDK，支持 GPT / Claude / DALL·E / Whisper 等全系模型，国内直连访问稳定，按 Tokens 消耗计费，是需要在国内稳定使用 OpenAI API 的开发者的常用选择。"),t("span",{class:"VPBadge tip badge"},"OpenAI 中转")])])],-1),e('| 平台 | 核心定位 | 计费方式 | 国内可用 |
|---|
| OpenRouter | 多模型聚合路由，300+ 模型统一入口 | 按 Tokens，随用随付 | ❌
需科学上网 |
| 硅基流动 | 国内聚合推理，价格最低 | 按 Tokens，部分免费 | ✅ |
| Groq | LPU 超高速推理，延迟极低 | 免费额度 + 按量付费 | ❌
需科学上网 |
| Hugging Face | 开源生态标准入口，模型最全 | 数十万开源模型（文本/图像/音频/多模态） | Serverless 免费 + Dedicated 按量 |
| Together AI | 开源模型推理 + Fine-tuning | 按 Tokens + 训练时长 | ❌
需科学上网 |
| Replicate | 开源模型市场，多模态覆盖广 | 按 GPU 计算秒数 | ❌
需科学上网 |
| 302.AI | 国内直连海外模型中转 | 充值按量消耗 | ✅ |
| API2D | OpenAI 系列国内稳定代理 | 按 Tokens 消耗 | ✅ |
预算极有限（个人开发者 / 原型阶段）：
- 国内直连 → 硅基流动（DeepSeek / Qwen 部分模型免费）
- 有海外网络 → OpenRouter 免费模型 或 Groq 免费额度
- 需要 GPT-4o / Claude 但无法直连 → 302.AI / API2D 按量充值
成本敏感但有一定预算（初创产品 / 小团队）：
- DeepSeek API（官方直连）或 硅基流动 跑 DeepSeek / Qwen 系列
- 对质量要求高的核心场景：用 Claude Haiku（低价高质量）或 Gemini 3.0 Flash
企业级 / 不计较成本优先质量：
- 英文为主 → OpenAI GPT + Claude 4.6 Sonnet 双保险
- 中文为主且需合规 → 百度千帆（支持 Fine-tuning + 私有化）/ 阿里云百炼
📌 实战建议
- 从硅基流动起步：国内开发者强烈建议先注册 硅基流动，用免费额度把 DeepSeek-V3 / Qwen 跑起来，对比效果再决定是否升级。
- 保持接口兼容性：无论选哪家，优先使用 OpenAI 兼容格式（
/v1/chat/completions），这样换模型/换平台只需改一行 base_url，不用重写代码。 - 不要只用一个模型：推荐"主力模型 + 降级备用"组合——主力走质量优先的模型，备用走低成本模型，在 OpenRouter / 硅基流动上配置 Fallback 自动切换。
- 注意 Token 用量陷阱：长上下文模型（如 Kimi 1M）单次输入成本随 Token 数线性增长，实际使用中要做好截断策略，避免账单超出预期。
- 企业场景必看合规：涉及用户隐私、金融、医疗等数据时，优先选择支持私有化部署或数据不出境承诺的服务（百度千帆、阿里云百炼、本地部署 DeepSeek 等）。
Are you an LLM? You can read better optimized documentation at /20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md for this page in Markdown format
LLM API 平台推荐与选型指南
摘要总结：截至 2026 年，LLM API 服务已形成"官方直连 + 第三方聚合"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。
1. 选模型前，先想清楚这几件事
在对比具体平台之前，可从以下四个维度梳理自身诉求，避免"眼花缭乱后随便选一个"：
| 维度 | 关键问题 | 影响决策 |
|---|
| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |
| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |
| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |
| 网络环境 | 开发/部署环境能否稳定访问海外 API？ | 决定是否需要中转或国内聚合平台 |
三类模型服务的核心差异：
- 国际顶尖模型（Claude / ChatGPT / Gemini）：综合能力最强，英文处理、代码生成、复杂推理均居前列，多模态支持完善，但价格较高，国内访问需要特殊网络；
- 国产优秀模型（DeepSeek / Kimi / GLM / MiniMax / Doubao 等）：中文理解与合规性优势突出，Token 价格极具竞争力，部分模型推理能力已逼近国际顶尖，是国内开发者的性价比首选；
- 开源模型（Qwen / LLaMA / Mixtral 等）：支持本地或私有化部署，无数据出境风险，可通过 Ollama / vLLM / 硅基流动等部署或调用，适合对数据隐私或成本极度敏感的场景。
2. 官方 API 平台
官方平台即模型研发方直接开放的 API 服务，优势是最新模型第一时间可用、文档权威、SLA 有保障，缺点是需要逐一注册账号、管理多个 Key。
2.1 国际顶尖模型
',11),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://platform.openai.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://openai.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"OpenAI Platform")]),t("p",{class:"desc"},"OpenAI 官方 API 平台，提供 GPT-4o、o1、o3、GPT-3.5 等全系列模型调用。GPT-4o 原生支持文本/图像/音频/视频多模态输入，o1/o3 系列具备深度推理链能力，适合写作、代码生成、复杂推理等高要求场景。支持 Function Calling、流式输出、Fine-tuning，文档和生态最为成熟。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://www.anthropic.com/api",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://claude.ai/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Anthropic Claude API")]),t("p",{class:"desc"},"Anthropic 官方 API，提供 Claude 4.6 Sonnet / Haiku / Opus 等多版本模型，超长上下文业界领先，指令遵循精准、幻觉率低、输出结构清晰，在长文档分析、复杂代码审查与 AI Agent 开发场景中表现尤为突出。Haiku 版价格较低，适合高并发轻量场景。"),t("span",{class:"VPBadge tip badge"},"国外")]),t("a",{href:"https://ai.google.dev/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.gstatic.com/images/branding/searchlogo/ico/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Gemini API")]),t("p",{class:"desc"},"Google 官方 Gemini 模型 API 平台，支持 Gemini 3.0 Pro 与 Gemini 3.0 Flash（高速低成本）等版本，原生多模态（文本/图片/音频/视频/代码），免费套餐额度慷慨，与 Google Workspace、Vertex AI 深度集成，适合研究辅助与多模态应用开发。"),t("span",{class:"VPBadge tip badge"},"国外")])])],-1),e('| 模型 / 平台 | 核心优势 | 最适场景 | 价格档位 |
|---|
| OpenAI GPT | 综合能力最全面；原生多模态（图/文/音/视频）；o 系列有深度推理链 | 写作与内容创作 · 代码生成与调试 · 多模态分析 · 复杂推理 | 高 |
| Anthropic Claude | 指令遵循精准；输出结构清晰；长文档理解最强；代码与文档质量高；幻觉率低 | 长文档精读/摘要 · 复杂任务规划 · 高质量代码审查 · Agent 推理后端 | 高（Haiku 版较低） |
| Google Gemini | 超长上下文、原生多模态；与 Google Search / Workspace 深度整合；免费额度慷慨 | 超长资料理解 · 视频/音频分析 · 研究辅助 · Google 生态集成 | 中
免费额度大 |
2.2 国内优秀模型
',2),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://platform.deepseek.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.deepseek.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"DeepSeek API")]),t("p",{class:"desc"},"DeepSeek 官方 API 平台，提供 DeepSeek-V3（通用对话）与 DeepSeek-R1（深度推理）等模型。R1 的数学、代码与逻辑推理能力已逼近 OpenAI o1，且模型完全开源支持本地部署。API 定价业内极低，是性价比最突出的国产模型，尤其推荐代码生成与数学推理场景。"),t("span",{class:"VPBadge tip badge"},"极低价")]),t("a",{href:"https://console.volcengine.com/ark",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/chat/favicon.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Doubao API")]),t("p",{class:"desc"},"字节跳动旗下豆包大模型开放平台，提供 Doubao-pro / lite 等系列模型 API，响应速度业内领先，API 定价极低（Token 单价为国际顶尖模型的 1/10 以下），文档完善，支持免费额度与企业接入，适合高并发轻量对话与内容摘要场景。"),t("span",{class:"VPBadge tip badge"},"极低价")]),t("a",{href:"https://platform.moonshot.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://kimi.moonshot.cn/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Kimi API")]),t("p",{class:"desc"},"月之暗面官方 API 平台，主打超长中文上下文（最高 128K～1M Token），支持 PDF / Word / 代码等多格式文件解析与深度研究模式，中文长文档理解能力国内领先。适合法律合同分析、学术论文精读、多文件对比摘要等重度阅读场景。"),t("span",{class:"VPBadge tip badge"},"长上下文")]),t("a",{href:"https://www.minimaxi.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://www.minimaxi.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"miniMax API")]),t("p",{class:"desc"},"miniMax 官方开放平台，提供 MiniMax-Text（100 万 Token 长上下文）、语音合成（TTS）、Hailuo AI 视频生成等多模态 API。文本/语音/视频能力均处于国内前列，适合需要多模态输出、语音克隆与 AI 视频生成的开发者。"),t("span",{class:"VPBadge tip badge"},"多模态")]),t("a",{href:"https://bailian.console.aliyun.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://img.alicdn.com/imgextra/i4/O1CN01uar8u91DHWktnF2fl_!!6000000000191-2-tps-110-110.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Qwen API")]),t("p",{class:"desc"},"阿里云 Qwen 系列模型官方 API 平台（百炼），涵盖 Qwen-Long（长上下文）、Qwen-Coder（代码）、Qwen-Math（数学）、Qwen-VL（多模态视觉）等专项子模型，与阿里云、钉钉生态深度集成，部分模型开源，文档完善，新用户有较大免费 Token 额度。"),t("span",{class:"VPBadge tip badge"},"国内")]),t("a",{href:"https://open.bigmodel.cn/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://open.bigmodel.cn/img/icons/favicon-32x32.png",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"智谱 AI (GLM)")]),t("p",{class:"desc"},"智谱 AI 官方开放平台，提供 GLM-4 / GLM-4V（多模态）/ CodeGeeX（代码）等系列模型 API，数学与代码推理能力突出，Function Call 与工具调用完善，企业 RAG / Agent 生态成熟，适合开发知识库问答、Agent 工具链与图文多模态理解应用。"),t("span",{class:"VPBadge tip badge"},"国内")])])],-1),e('| 模型 / 平台 | 核心优势 | 最适场景 | 价格档位 |
|---|
| DeepSeek | R1 推理能力逼近 o1；数学/代码/逻辑顶尖；完全开源可本地部署；API 价格极低 | 代码生成与调试 · 数学/逻辑推理 · 学术研究 · 私有化部署 | 极低 ⭐ |
| Moonshot (Kimi) | 中文长上下文最强；多格式文件解析（PDF/Word/代码）；内置深度研究模式 | 长文档阅读与结构化提炼 · 法律/合同分析 · 多文件对比 | 低 |
| miniMax | 100 万 Token 长上下文；文本/语音/视频多模态；语音合成与视频生成能力强 | 超长文档理解 · AI 视频/语音生成 · 角色扮演/AI 陪伴 | 低 |
| 豆包 (Doubao) | 响应速度极快；API 价格最低；与字节跳动生态打通 | 高并发轻量对话 · 内容摘要 · 短视频内容策划 | 极低 ⭐ |
| 通义千问 (Qwen) | 子模型丰富（Coder/Math/VL）；阿里云生态集成；部分开源 | 中文内容创作 · 代码/数学 · 钉钉/阿里云场景 | 低 |
| 智谱 GLM | 数学与代码推理突出；Function Call 工具调用完善；企业 RAG 生态成熟 | 企业知识库问答 · Agent 工具链 · 图文多模态理解 | 低 |
3. 第三方聚合平台
第三方平台将多家主流模型聚合为统一 API 入口，开发者无需逐一申请各厂商 Key，可一站访问 GPT、Claude、Gemini、 MininMax、DeepSeek 等数百个模型，按量计费、兼容 OpenAI SDK，大幅降低接入与切换成本。国际开发者首选 OpenRouter，国内开发者首选硅基流动。
',3),t("div",{class:"container nav-card-container"},[t("div",{class:"nav-card index-auto",style:{"--row-gap":"20px","--column-gap":"20px","--column-min-width":"calc(100% / 4 - 60px)"}},[t("a",{href:"https://openrouter.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://openrouter.ai/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"OpenRouter")]),t("p",{class:"desc"},"目前最受开发者欢迎的 LLM API 聚合平台，统一 OpenAI 兼容接口可路由至 300+ 模型（GPT-4o / Claude 3.5 / Gemini / LLaMA / DeepSeek 等），支持按量付费、自动降级 Fallback、流式输出与 Function Call，是切换/对比多家模型的首选。无需管理多个 Key，一个账号解决所有模型接入。"),t("span",{class:"VPBadge tip badge"},"强烈推荐")]),t("a",{href:"https://cloud.siliconflow.cn/me/models",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"SiliconFlow")]),t("p",{class:"desc"},"国内最受开发者欢迎的 LLM API 聚合与推理加速平台，提供 DeepSeek / Qwen / GLM / MiniMax 等主流模型的统一 API，兼容 OpenAI 接口格式，价格业内极低（部分模型免费），国内直连稳定，注册即可快速接入，是国内开发者使用第三方 API 的首选。"),t("span",{class:"VPBadge tip badge"},"国内首选")]),t("a",{href:"https://huggingface.co/inference-api",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://huggingface.co/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Hugging Face")]),t("p",{class:"desc"},"全球最大开源 AI 社区 Hugging Face 提供的推理 API，可直接调用平台上数十万个开源模型（文本/图像/音频/多模态），支持 Serverless 按需推理与 Dedicated Endpoints 专属部署，是开源模型生态的事实标准入口。"),t("span",{class:"VPBadge tip badge"},"开源生态")]),t("a",{href:"https://console.groq.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("div",{class:"nav-card__item__img skeleton-image"},[t("img",{src:"https://groq.com/favicon.ico",class:"no-preview",onload:"this.classList.add('loaded')",onerror:"this.classList.add('loaded')"})]),t("span",{class:"name"},"Groq")]),t("p",{class:"desc"},"基于自研 LPU（Language Processing Unit）芯片的超高速推理平台，开源模型（LLaMA 3 / Mixtral / Gemma / DeepSeek 等）推理速度可达普通 GPU 的数十倍，免费套餐慷慨，接口完全兼容 OpenAI SDK，适合对响应延迟极敏感的实时对话、语音助手等场景。"),t("span",{class:"VPBadge tip badge"},"极速推理")]),t("a",{href:"https://www.together.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Together AI")]),t("p",{class:"desc"},"专注开源大模型的高性能推理与微调平台，支持 LLaMA 3 / Mixtral / Qwen / DBRX 等 100+ 开源模型 API 调用，提供 Fine-tuning 训练能力，价格极具竞争力，OpenAI 兼容接口，适合开源模型研发与企业私有化微调场景。"),t("span",{class:"VPBadge tip badge"},"开源+微调")]),t("a",{href:"https://replicate.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"Replicate")]),t("p",{class:"desc"},'以"模型市场"形态运营的 AI API 平台，托管数千个开源图像、语音、文本模型（Stable Diffusion / LLaMA / Whisper 等），每个模型有独立 API 端点，按 GPU 计算秒数计费，无需搭建推理基础设施，适合快速调用多模态开源模型做原型验证。'),t("span",{class:"VPBadge tip badge"},"模型市场")]),t("a",{href:"https://302.ai/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"302.AI")]),t("p",{class:"desc"},"国内知名的 AI API 中转与聚合平台，整合 OpenAI / Claude / Gemini 等国际主流模型，提供统一 OpenAI 兼容 API，支持国内直连无需科学上网，按量充值使用，并附带 Web 体验页面，适合个人开发者快速调用海外模型。"),t("span",{class:"VPBadge tip badge"},"国内中转")]),t("a",{href:"https://api2d.com/",target:"_blank",class:"nav-card__item row-4",style:{"--desc-line-clamp":"2"}},[t("div",{class:"nav-card__item__info"},[t("span",{class:"name"},"API2D")]),t("p",{class:"desc"},"专注 OpenAI 系列模型国内中转的 API 代理平台，完全兼容 OpenAI SDK，支持 GPT / Claude / DALL·E / Whisper 等全系模型，国内直连访问稳定，按 Tokens 消耗计费，是需要在国内稳定使用 OpenAI API 的开发者的常用选择。"),t("span",{class:"VPBadge tip badge"},"OpenAI 中转")])])],-1),e('| 平台 | 核心定位 | 计费方式 | 国内可用 |
|---|
| OpenRouter | 多模型聚合路由，300+ 模型统一入口 | 按 Tokens，随用随付 | ❌
需科学上网 |
| 硅基流动 | 国内聚合推理，价格最低 | 按 Tokens，部分免费 | ✅ |
| Groq | LPU 超高速推理，延迟极低 | 免费额度 + 按量付费 | ❌
需科学上网 |
| Hugging Face | 开源生态标准入口，模型最全 | 数十万开源模型（文本/图像/音频/多模态） | Serverless 免费 + Dedicated 按量 |
| Together AI | 开源模型推理 + Fine-tuning | 按 Tokens + 训练时长 | ❌
需科学上网 |
| Replicate | 开源模型市场，多模态覆盖广 | 按 GPU 计算秒数 | ❌
需科学上网 |
| 302.AI | 国内直连海外模型中转 | 充值按量消耗 | ✅ |
| API2D | OpenAI 系列国内稳定代理 | 按 Tokens 消耗 | ✅ |
预算极有限（个人开发者 / 原型阶段）：
- 国内直连 → 硅基流动（DeepSeek / Qwen 部分模型免费）
- 有海外网络 → OpenRouter 免费模型 或 Groq 免费额度
- 需要 GPT-4o / Claude 但无法直连 → 302.AI / API2D 按量充值
成本敏感但有一定预算（初创产品 / 小团队）：
- DeepSeek API（官方直连）或 硅基流动 跑 DeepSeek / Qwen 系列
- 对质量要求高的核心场景：用 Claude Haiku（低价高质量）或 Gemini 3.0 Flash
企业级 / 不计较成本优先质量：
- 英文为主 → OpenAI GPT + Claude 4.6 Sonnet 双保险
- 中文为主且需合规 → 百度千帆（支持 Fine-tuning + 私有化）/ 阿里云百炼
📌 实战建议
- 从硅基流动起步：国内开发者强烈建议先注册 硅基流动，用免费额度把 DeepSeek-V3 / Qwen 跑起来，对比效果再决定是否升级。
- 保持接口兼容性：无论选哪家，优先使用 OpenAI 兼容格式（
/v1/chat/completions），这样换模型/换平台只需改一行 base_url，不用重写代码。 - 不要只用一个模型：推荐"主力模型 + 降级备用"组合——主力走质量优先的模型，备用走低成本模型，在 OpenRouter / 硅基流动上配置 Fallback 自动切换。
- 注意 Token 用量陷阱：长上下文模型（如 Kimi 1M）单次输入成本随 Token 数线性增长，实际使用中要做好截断策略，避免账单超出预期。
- 企业场景必看合规：涉及用户隐私、金融、医疗等数据时，优先选择支持私有化部署或数据不出境承诺的服务（百度千帆、阿里云百炼、本地部署 DeepSeek 等）。
Are you an LLM? You can read better optimized documentation at /30.悦读时光/01.好书推荐.md for this page in Markdown format
好书推荐
1. AI 与数学思维
在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操作系统”， 理解 AI，本质上是理解数据、数学与逻辑如何重构这个世界。
这套书单从数学思维的底层逻辑出发，让我们理解 ChatGPT 等大模型背后的计算机制，将硬核的神经网络与概率统计转化为优化生活的决策工具。它不仅能界定机器智能的边界，更颠覆了传统的“目标论”，倡导在不确定性中通过“踏脚石”思维寻找突破性创新的可能。AI 的研究实践告诉我们，伟大的突破往往无法被预设，唯有拥抱“寻宝者思维”才能在未知中偶遇奇迹，我们需要颠覆传统的创新范式。
',4)),h(k,{books:g(Be)},null,8,["books"]),t[1]||(t[1]=x('2. 产品与商业
2.1 产品 Sense 与创造
在产品成功率不足 10% 的残酷市场中，好的创造绝非源于盲目的灵感，而是建立在极致的风险验证与深刻的人性洞察之上。
卓越的产品力不仅关乎功能设计，更是一场关于策略与创造力的刻意练习：我们需要通过“预型”思维以极低成本进行真实数据验证，确保我们在投入开发前是在“做对产品”；并利用用户模型、交易模型等底层框架，将零散的需求转化为可获利的商业方案。
',4)),h(k,{books:g(Ie)},null,8,["books"]),t[2]||(t[2]=e("h3",{id:"_2-2-商业化",tabindex:"-1"},[n("2.2 商业化 "),e("a",{class:"header-anchor",href:"#_2-2-商业化","aria-label":"Permalink to “2.2 商业化”"},"")],-1)),t[3]||(t[3]=e("blockquote",null,[e("p",null,[n("在追逐“独角兽”和规模扩张的狂热迷思之后，真正的商业高手正在重新回归本质："),e("strong",null,"盈利才是企业的核心护城河。"),n(" 这套书单为我们揭示了一种"),e("strong",null,"更具韧性的商业路径——“小而美”的极简经营"),n("。它教导我们如何拒绝低效的内卷与忙碌，通过“做更少但创造更多价值”的思维，打造在不确定时代下依然能保持稳定现金流的“慢公司”。")]),e("p",null,[e("strong",null,"商业的成功，往往源于敢于挑战“难而正确”的事"),n("。从皮克斯如何建立允许失败的创意土壤，到 Waze 如何通过解决被忽视的痛点实现跨越式成长，这些世界级案例证明了：卓越的组织不仅需要极简的流程与高效的分布式协作（远程办公），更需要一种“冷静”的文化，将利润置于规模之上。")])],-1)),h(k,{books:g(We)},null,8,["books"]),t[4]||(t[4]=e("h2",{id:"_3-效率与效能",tabindex:"-1"},[n("3. 效率与效能 "),e("a",{class:"header-anchor",href:"#_3-效率与效能","aria-label":"Permalink to “3. 效率与效能”"},"")],-1)),t[5]||(t[5]=e("blockquote",null,[e("p",null,[n("在信息过载与高压竞争的现代环境中，平庸与卓越的分水岭不再是做事的速度，而是"),e("strong",null,"决策的精度与责任的边界"),n("。这套书单为我们提供了一套从个人认知到组织协作的“效能防线”：首先，它"),e("strong",null,"引导我们完成从“时钟”到“罗盘”的思维跨越，打破盲目追求速度的迷思，确保将核心精力倾注在真正产生长远复利的“重要非紧急”事务之上"),n("。 真正的效能源于对复杂性的科学驾驭：")]),e("ul",null,[e("li",null,"通过“清单革命”式的认知防护，我们将最佳实践外化为可靠的防错系统，弥补人类在极端环境下的认知局限；"),e("li",null,"“猴子管理法”则以生动的视角重塑了职场协作的责任逻辑，教我们通过有效授权拒绝无谓的干扰，释放战略思考的精力；")])],-1)),h(k,{books:g(Ye)},null,8,["books"]),t[6]||(t[6]=e("h2",{id:"_4-学习与成长",tabindex:"-1"},[n("4. 学习与成长 "),e("a",{class:"header-anchor",href:"#_4-学习与成长","aria-label":"Permalink to “4. 学习与成长”"},"")],-1)),t[7]||(t[7]=e("blockquote",null,[e("p",null,[n("在信息爆炸与快速变革的时代，"),e("strong",null,"真正的成长不再是知识的被动堆砌，而是认知系统的彻底迭代"),n("。这套书单为我们构建了一个从底层思维到人生经营的闭环：")]),e("ul",null,[e("li",null,"首先，通过批判性思维与深度阅读夯实“元能力”，在泛滥的信息中识别本质，将他人的洞见转化为自己的血肉；"),e("li",null,"其次，利用“检索力”打破信息差，确保自己在任何领域都能快速获取高质量资源，掌握逆风而行的主动权。")]),e("p",null,[e("strong",null,"人生不是一场盲目的长跑，而是一场基于“原则”的精密经营"),n("。从达利欧的系统化决策，到纳瓦尔的财富与幸福逻辑，这些智者教导我们如何利用杠杆、坚持长期主义，将自己视作一家“人生有限公司”来经营。我们需要摆脱“优秀绵羊”式的被动驱动，通过识别成长的“第二曲线”，在巅峰时刻主动寻求突破，将自己打造成不可替代的稀缺资产。阅读这些经典，不仅是为了习得技能，更是为了在算法与焦虑的夹击中，重塑内心的宁静与独立判断的勇气。")])],-1)),h(k,{books:g(Te)},null,8,["books"]),t[8]||(t[8]=e("h2",{id:"_5-人文社科",tabindex:"-1"},[n("5. 人文社科 "),e("a",{class:"header-anchor",href:"#_5-人文社科","aria-label":"Permalink to “5. 人文社科”"},"")],-1)),t[9]||(t[9]=e("blockquote",null,[e("p",null,"在宏观历史与微观现实间构建认知：在碎片化与不确定性并存的时代，穿透表象、直达本质的洞察力成为必需。这套单为我们开启了两扇窗："),e("ul",null,[e("li",null,"一扇望向万年文明的宏大坐标，通过《枪炮、病菌与钢铁》的跨学科视野，拆解地理环境如何冷酷而偶然地重塑全球版图，彻底颠覆“文明优越论”的傲慢；"),e("li",null,"另一扇则照向当下社会的真实肌理，在梁晓声对各阶层生存困境的细腻描摹中，读懂大时代变革背后隐秘的结构性逻辑与阶层焦虑。")]),e("p",null,[e("strong",null,"人文思考的终极价值，在于如何将宏大叙事转化为个人的行动力量"),n("。正如项飙所倡导的“把自己作为方法”，这些著作不仅是知识的传递，更是思维的松绑。它们教导我们不再做时代的被动旁观者，而是学会在个人体验与宏观世界之间搭建桥梁，通过重建“附近”的小世界，在喧嚣中找准自我的定位。")])],-1)),h(k,{books:g(Me)},null,8,["books"]),t[10]||(t[10]=e("h2",{id:"_6-健康生活",tabindex:"-1"},[n("6. 健康生活 "),e("a",{class:"header-anchor",href:"#_6-健康生活","aria-label":"Permalink to “6. 健康生活”"},"")],-1)),t[11]||(t[11]=e("img",{src:$,style:{width:"100%","border-radius":"8px","margin-bottom":"20px"},alt:"about site background"},null,-1)),t[12]||(t[12]=e("blockquote",null,[e("p",null,[n("在面临大概率活到100岁的“长寿时代”，传统的线性人生模式正在失效。我们需要对“健康”进行一次彻底的认知重构："),e("strong",null,"健康不再仅仅是“没有疾病”，而是支撑我们跨越漫长生命周期、应对多阶段人生挑战的最核心“无形资产”"),n("。想要让这套生命系统长期平稳运行，真正的解法并不在医院的处方笺里，而是隐藏在我们每天的日常选择中。")]),e("p",null,[n("决定我们长期健康状态的，有 99 %取决于日常习惯。我们需要"),e("strong",null,"在休息、饮食、运动、睡眠这四个高频生活维度中，植入微小但杠杆率极高的改变"),n("（例如12小时进食窗口、10分钟高强度运动、睡前屏蔽数字通知等）。用最低的执行成本，置换身心状态的巨大回报。")])],-1)),h(k,{books:g($e)},null,8,["books"])]))}});export{Ge as __pageData,De as default};
+import{d as A,p as B,h as a,z as h,Y as I,s as W,g as l,y as _,v as P,i as e,W as v,x as c,F as p,t as f,S as n,T as Y,_ as C,r as j,c as T,k as M,U as x,l as g}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const $="/img/cover/health_bg.png",N={class:"book-panel__drawer"},V={class:"book-panel__header-meta"},G={class:"book-panel__title"},D={class:"book-panel__author"},F={class:"book-panel__body"},R={class:"book-panel__top-bar"},Z={class:"book-panel__top-left"},H={class:"book-panel__tags"},J={key:0,class:"book-panel__rating"},O={class:"stars"},E={key:0,viewBox:"0 0 24 24",fill:"currentColor"},K={key:1,viewBox:"0 0 24 24",class:"half-star"},Q=["id"],X=["clip-path"],U={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},ee={class:"rating-text"},te={class:"book-panel__links"},oe=["href"],ae={width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",style:{"flex-shrink":"0"}},le=["href"],re={width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",style:{"flex-shrink":"0"}},ne={class:"book-panel__section"},se={class:"book-panel__desc"},ie={key:0,class:"book-panel__section"},de={class:"book-panel__highlights"},ce=A({__name:"BookDetailPanel",props:{book:{},open:{type:Boolean},heroColor:{},tagColors:{}},emits:["close"],setup(r,{emit:b}){const t=b;return(w,o)=>(a(),B(Y,{to:"body"},[h(I,{name:"panel-slide"},{default:W(()=>[r.open&&r.book?(a(),l("div",{key:0,class:"book-panel",onClick:o[2]||(o[2]=P(i=>t("close"),["self"]))},[e("div",{class:"book-panel__overlay",onClick:o[0]||(o[0]=i=>t("close"))}),e("div",N,[e("div",{class:"book-panel__header",style:v({background:r.heroColor})},[e("button",{class:"book-panel__close",title:"关闭",onClick:o[1]||(o[1]=i=>t("close"))},[...o[3]||(o[3]=[e("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none"},[e("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})],-1)])]),e("div",V,[e("h2",G,c(r.book.title),1),e("p",D,c(r.book.author),1)])],4),e("div",F,[e("div",R,[e("div",Z,[e("div",H,[(a(!0),l(p,null,f(r.book.tags,(i,m)=>(a(),l("span",{key:i,class:"book-panel__tag",style:v({background:r.tagColors[m%r.tagColors.length].bg,color:r.tagColors[m%r.tagColors.length].text})},c(i),5))),128))]),r.book.rating!=null?(a(),l("div",J,[o[8]||(o[8]=e("span",{class:"rating-label"},"推荐指数:",-1)),e("div",O,[(a(),l(p,null,f(5,i=>e("span",{key:i,class:"star"},[i<=Math.floor(r.book.rating)?(a(),l("svg",E,[...o[4]||(o[4]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])])):i===Math.ceil(r.book.rating)&&r.book.rating%1!==0?(a(),l("svg",K,[e("defs",null,[e("clipPath",{id:"clip-"+r.book.id},[...o[5]||(o[5]=[e("rect",{x:"0",y:"0",width:"12",height:"24"},null,-1)])],8,Q)]),o[6]||(o[6]=e("path",{class:"star-empty",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"none",stroke:"currentColor","stroke-width":"1.5"},null,-1)),e("path",{class:"star-filled",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"currentColor","clip-path":"url(#clip-"+r.book.id+")"},null,8,X)])):(a(),l("svg",U,[...o[7]||(o[7]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])]))])),64))]),e("span",ee,c(r.book.rating.toFixed(1)),1)])):_("",!0)]),e("div",te,[e("a",{href:r.book.link,target:"_blank",rel:"noopener",class:"book-panel__link-btn"},[(a(),l("svg",ae,[...o[9]||(o[9]=[e("path",{d:"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])])),o[10]||(o[10]=n(" 豆瓣 ",-1))],8,oe),r.book.wereadLink?(a(),l("a",{key:0,href:r.book.wereadLink,target:"_blank",rel:"noopener",class:"book-panel__link-btn"},[(a(),l("svg",re,[...o[11]||(o[11]=[e("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",fill:"currentColor"},null,-1)])])),o[12]||(o[12]=n(" 微信读书 ",-1))],8,le)):_("",!0)])]),o[15]||(o[15]=e("div",{class:"book-panel__divider"},null,-1)),e("section",ne,[o[13]||(o[13]=e("h3",{class:"book-panel__section-title"},[e("span",{class:"book-panel__section-icon"},"📖"),n(" 内容简介 ")],-1)),e("p",se,c(r.book.desc),1)]),r.book.highlights&&r.book.highlights.length>0?(a(),l("section",ie,[o[14]||(o[14]=e("h3",{class:"book-panel__section-title"},[e("span",{class:"book-panel__section-icon"},"✨"),n(" 书籍亮点 ")],-1)),e("ul",de,[(a(!0),l(p,null,f(r.book.highlights,(i,m)=>(a(),l("li",{key:m,class:"book-panel__highlight-item"},c(i),1))),128))])])):_("",!0)])])])):_("",!0)]),_:1})]))}}),he=C(ce,[["__scopeId","data-v-1ddfc013"]]),be={class:"book-list"},ue=["onClick"],ge=["src","alt"],ke={class:"book-cover__overlay"},pe={key:0,class:"book-cover__hint"},we=["href"],me={class:"book-info"},_e={class:"book-info__title"},fe={class:"book-info__author"},qe={key:0,class:"book-info__rating"},ve={class:"stars"},je={key:0,viewBox:"0 0 24 24",fill:"currentColor"},Le={key:1,viewBox:"0 0 24 24",class:"half-star"},ye=["id"],Se=["clip-path"],xe={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},Ae={class:"rating-text"},Pe={class:"book-info__tags"},Ce={class:"book-info__desc"},ze=A({__name:"BookRecommend",props:{books:{}},setup(r){const b=["linear-gradient(135deg, #e8f0fe 0%, #c7d9fd 100%)","linear-gradient(135deg, #e6f4ea 0%, #b7dfc4 100%)","linear-gradient(135deg, #fff3e0 0%, #ffd9a0 100%)","linear-gradient(135deg, #fce4ec 0%, #f8b4c8 100%)","linear-gradient(135deg, #ede7f6 0%, #cdb8ee 100%)","linear-gradient(135deg, #e0f7fa 0%, #9ee8f0 100%)"],t=[{bg:"#e8f0fe",text:"#3b5bdb"},{bg:"#e6f4ea",text:"#2e7d32"},{bg:"#fff3e0",text:"#e65100"},{bg:"#fce4ec",text:"#c2185b"},{bg:"#ede7f6",text:"#6a1b9a"},{bg:"#e0f7fa",text:"#00838f"}],w=j(null),o=j(0),i=j(!1),m=T(()=>b[o.value%b.length]);function z(q,d){q.withPanel!==!1&&(w.value?.id===q.id&&i.value?L():(w.value=q,o.value=d,i.value=!0))}function L(){i.value=!1,setTimeout(()=>{w.value=null},300)}return(q,d)=>(a(),l(p,null,[e("div",be,[(a(!0),l(p,null,f(r.books,(s,y)=>(a(),l("div",{key:s.id,class:M(["book-card",{"book-card--active":w.value?.id===s.id&&i.value}]),onClick:u=>z(s,y)},[e("div",{class:"book-cover",style:v({background:b[y%b.length]})},[s.cover?(a(),l("img",{key:0,src:s.cover,alt:s.title,class:"book-cover__img"},null,8,ge)):_("",!0),e("div",ke,[s.withPanel!==!1?(a(),l("span",pe,"点击查看详情")):(a(),l("a",{key:1,href:s.link,target:"_blank",rel:"noopener",class:"book-cover__hint",onClick:d[0]||(d[0]=P(()=>{},["stop"]))},"查看豆瓣",8,we))])],4),e("div",me,[e("div",_e,"《"+c(s.title)+"》",1),e("div",fe,c(s.author),1),s.rating!=null?(a(),l("div",qe,[e("div",ve,[(a(),l(p,null,f(5,u=>e("span",{key:u,class:"star"},[u<=Math.floor(s.rating)?(a(),l("svg",je,[...d[1]||(d[1]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])])):u===Math.ceil(s.rating)&&s.rating%1!==0?(a(),l("svg",Le,[e("defs",null,[e("clipPath",{id:"card-clip-"+s.id},[...d[2]||(d[2]=[e("rect",{x:"0",y:"0",width:"12",height:"24"},null,-1)])],8,ye)]),d[3]||(d[3]=e("path",{class:"star-empty",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"none",stroke:"currentColor","stroke-width":"1.5"},null,-1)),e("path",{class:"star-filled",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"currentColor","clip-path":"url(#card-clip-"+s.id+")"},null,8,Se)])):(a(),l("svg",xe,[...d[4]||(d[4]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])]))])),64))]),e("span",Ae,c(s.rating.toFixed(1)),1)])):_("",!0),e("div",Pe,[(a(!0),l(p,null,f(s.tags,(u,S)=>(a(),l("span",{key:u,class:"tag",style:v({background:t[S%t.length].bg,color:t[S%t.length].text})},c(u),5))),128))]),e("p",Ce,c(s.desc),1)])],10,ue))),128))]),h(he,{book:w.value,open:i.value,"hero-color":m.value,"tag-colors":t,onClose:L},null,8,["book","open","hero-color"])],64))}}),k=C(ze,[["__scopeId","data-v-fd79cd55"]]),Be=[{id:"book-001",title:"心中有数：生活中的数学思维",author:"刘雪峰",cover:"https://cdn.weread.qq.com/weread/cover/39/3300018939/t6_3300018939.jpg",wereadLink:"https://weread.qq.com/web/reader/df6323a0813ab6de5g019a31#outline?noScroll=1",link:"https://book.douban.com/subject/35749693/",tags:["数学思维","科普","决策"],desc:"本书通过大量贴近日常的例子，展示数学思维如何优化我们的生活决策。作者用概率、统计、最优化等数学工具，为生活、职场、人际交往中的权衡问题提供分析框架，帮助读者在面对不确定性时像计算机一样找到“最优解”。",rating:4.9,highlights:["将大数定律、最小二乘法等硬核数学概念与日常生活巧妙结合","提供应对不确定性和多目标抉择的科学决策框架","强调数学不仅是公式计算，更是看世界、优化人生的高效思维工具"]},{id:"book-0020",title:"智慧的疆界：从图灵机到人工智能",author:"周志明",cover:"https://cdn.weread.qq.com/weread/cover/92/YueWen_23637052/t6_YueWen_23637052.jpg",wereadLink:"https://weread.qq.com/web/reader/b9732f007168ac3cb976eca#outline?noScroll=1",link:"https://book.douban.com/subject/30379536/",tags:["人工智能","科技史","通识读物"],desc:"本书是一部面向大众的人工智能通识读物。作者周明以时间为主线，将人工智能的发展历程、关键人物与里程碑事件串联起来，从五个维度展开：学术理论、历史沿革、技术应用、研究成果以及面临的困难与未来挑战。全书旨在用通俗的语言和巧妙的结构，把人工智能从“阳春白雪”的学术殿堂带到公众视野，帮助读者理解 AI 能做什么、做不到什么，以及背后的技术与思想根源。",rating:5,highlights:["以时间为主线，清晰梳理人工智能的发展脉络与里程碑","深入浅出，用通俗语言将复杂的学术理论带入公众视野","客观剖析，帮助读者准确界定AI“能做什么”与“做不到什么”"]},{id:"book-004",title:"为什么伟大不能被计划",author:"肯尼斯·斯坦利 / 乔尔·雷曼",cover:"https://cdn.weread.qq.com/weread/cover/22/cpplatform_wfdzhk1dx7ig9aep4gagof/t6_cpplatform_wfdzhk1dx7ig9aep4gagof1686304376.jpg",wereadLink:"https://weread.qq.com/web/reader/0bf32020813ab7e6bg016510#outline?noScroll=1",link:"https://book.douban.com/subject/36357804/",tags:["人工智能","创新思维","认知科学"],desc:"本书由两位前沿AI科学家合著，提出了颠覆传统“目标-计划”思维的全新视角。结合AI研究实践，书中论证了伟大成就往往并非出自精心设计的蓝图，而是源于对未知的好奇、随机探索与不断试错。通过“寻宝者思维”和“踏脚石模型”等方法，为读者在高度不确定的环境中激发突破性创新提供了具体的行动框架。",rating:4.5,highlights:["颠覆传统的“目标论”，论证伟大成就源自对未知的好奇与无边界的探索","提供“寻宝者思维”“踏脚石模型”“新奇性探索”三大可操作的认知与实践工具","扎根OpenAI等前沿机构的实证背景，其启发意义跨学科适用于科研、商业及人生规划"]},{id:"book-003",title:"这就是ChatGPT",author:"斯蒂芬·沃尔弗拉姆",cover:"https://cdn.weread.qq.com/weread/cover/24/cpplatform_4cn8w4tmgzntjobg9ffeny/t6_cpplatform_4cn8w4tmgzntjobg9ffeny1703648785.jpg",wereadLink:"https://weread.qq.com/web/reader/74332a90813ab86c4g019d98#outline?noScroll=1",link:"https://book.douban.com/subject/36449803/",tags:["人工智能","大模型","ChatGPT"],desc:"本书由著名科学家斯蒂芬·沃尔弗拉姆撰写，全景式拆解了ChatGPT的内部工作机制。作者用通俗语言解释了神经网络和自回归架构等核心技术，探讨了简单的计算规则如何涌现出令人惊叹的智能，帮助读者深刻理解大语言模型为何能生成高质量的人类水平文本。",rating:4.3,highlights:["全景拆解核心技术：深入浅出地讲清ChatGPT背后的神经网络与自回归架构","独特的大师视角：将大模型视为“简单的计算规则”涌现复杂智能的绝佳范例","兼顾技术与商业影响：结合算力规模与行业冲击，全面探讨AI时代的机遇与挑战"]},{id:"book-0030",title:"人工智能：现代方法（第4版）（上下册）",author:"[美]斯图尔特·罗素(Stuart Russell) / [美]彼得·诺维格(Peter Norvig)",cover:"https://cdn.weread.qq.com/weread/cover/33/cpplatform_8rthznqfhsjuz5fswwn6kx/t6_cpplatform_8rthznqfhsjuz5fswwn6kx1675928213.jpg",wereadLink:"https://weread.qq.com/web/reader/fc332020813ab7942g0102ad#outline?noScroll=1",link:"https://book.douban.com/subject/36152133",tags:["人工智能","教材","理论实践结合","经典著作","计算机科学"],desc:"本书是人工智能领域的经典权威教材，系统、深入地探讨AI领域的理论与实践，以统一风格融合当今流行的AI思想与术语到前沿应用中，真正实现理论与实践相结合。全书分7个部分共28章，理论部分涵盖逻辑、概率、连续数学、感知、推理、学习、行动及公平、信任、社会公益和安全等社会议题；实践部分选取微电子设备、机器人行星探测器、在线服务、AlphaZero、人形机器人、自动驾驶、AI辅助医疗等热门场景。由加州大学伯克利分校教授斯图尔特·罗素与前谷歌研究总监彼得·诺维格联合撰写，被全球1500多所高校采用，适合作为AI相关专业本科生和研究生教材，也可作为专业人员的参考书。",rating:5,highlights:["体系完整覆盖面广，7个部分28章构成自洽的AI理论主线，涵盖核心理论与前沿议题","理论与实践并重，既阐述核心算法与模型，又展示在热门场景中的落地实例，便于知识迁移","紧跟前沿关注社会议题，专门讨论AI伦理与安全，引导思考技术与社会的交互责任","一站式权威参考，兼具教材属性与专业参考价值，适配高校教学与产业实践双重需求","现代理念贯穿始终，通过最新案例体现AI进展与行业趋势，呈现“活”的AI生态"]},{id:"book-0031",title:"模型思维：简化世界的人工智能模型",author:"龚才春",cover:"https://cdn.weread.qq.com/weread/cover/26/YueWen_38601826/t6_YueWen_38601826.jpg",wereadLink:"https://weread.qq.com/web/reader/5a8326e0724d04625a8e740#outline?noScroll=1",link:"https://book.douban.com/subject/35488925/",tags:["模型思维","人工智能","算法模型","机器学习","入门实践"],desc:"本书聚焦“如何用模型简化世界”的核心主题，将人工智能在现实业务中面临的难题归纳为权重、状态、序列、表示、相似、分类六大问题，并围绕该框架讲解对应模型思路与算法。书中弱化复杂数学公式，以大量生活化、业务化案例阐释模型理论与落地场景，帮助读者建立“模型—场景”映射关系，降低AI模型学习门槛，既是人工智能初学者的入门读物，也可为企业工程师、科研人员提供实践参考，适合各类读者学习并将模型思维应用到生活与工作中。",rating:4.8,highlights:["以“六大问题”框架串联AI模型，可按场景快速检索适配的模型思路","侧重落地实践，搭配大量生活化与业务案例，助力建立“模型—场景”映射","降低学习门槛，少数学公式、多直观案例，兼顾初学者与工程落地需求","受众群体广泛，适配工程师、科研人员及普通读者，可迁移模型思维至实际场景"]},{id:"book-005",title:"你看起来好像……我爱你：AI的工作原理以及它为这个世界带来的稀奇古怪",author:"贾内尔·沙内",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/970/39481970/t6_39481970.jpg",wereadLink:"https://weread.qq.com/book-detail?type=1&senderVid=40710128&v=f9a32c10725a7272f9a14f9&wtheme=white&wfrom=app&wvid=40710128&scene=bottomSheetShare",link:"https://book.douban.com/subject/35407136/",tags:["人工智能","趣味科普","漫画算法"],desc:"这是一部写给普通读者的人工智能趣味科普读物。作者贾内尔·沙内结合生活化的比喻和超级可爱的漫画，深入浅出地讲解了AI的基本工作原理、实际应用及其局限性。书中通过大量幽默的AI实验与“翻车”案例，带领读者在轻松捧腹的氛围中，准确理解算法能做什么、不能做什么。",rating:4.2,highlights:["幽默可爱的漫画导览：用插图和通俗语言将“深度学习”“神经网络”等抽象概念可视化","丰富的趣味实验案例：通过精选的AI“翻车”故事，直观揭示算法背后的逻辑与潜在偏差","客观建立AI认知：在展示AI强大能力的同时，明确指出其在语境理解和处理模糊信息时的短板"]},{id:"book-006",title:"AI经济：机器人时代的工作、财富和社会福利",author:"罗杰·布特尔",cover:"https://cdn.weread.qq.com/weread/cover/30/YueWen_38229387/t6_YueWen_38229387.jpg",wereadLink:"https://weread.qq.com/web/reader/653320207247558b65332f5#outline?noScroll=1",link:"https://book.douban.com/subject/35433060/",tags:["人工智能","经济学","社会学","未来趋势"],desc:"本书由知名经济学家罗杰·布特尔撰写，聚焦AI与机器人技术对经济和社会的深远影响。作者拨开艰涩的科技术语，从经济增长、通货膨胀及财富分配等宏观视角，理性剖析AI革命将如何重塑我们的工作、教育与休闲方式，以乐观的姿态为迎接未来的社会变革指明路径。",rating:4.1,highlights:["宏观经济视角解析：深入探讨AI对经济增长、通货膨胀、财富与权力分配的真实影响","全景式社会洞察：全面检视机器人时代下，人类教育体系、工作模式与休闲形态的深刻变革","理性乐观的未来指南：拒绝技术恐慌，为个人与社会在变迁的世界中提供清晰可行的应对计划"]}],Ie=[{id:"book-007",title:"做对产品",author:"阿尔贝托·索维亚",cover:"https://cdn.weread.qq.com/weread/cover/53/YueWen_40877841/t6_YueWen_40877841.jpg",wereadLink:"https://weread.qq.com/web/reader/254322a0726fbf1125472c9#outline?noScroll=1",link:"https://book.douban.com/subject/35607961/",tags:["产品思维","创业","商业方法论"],slogan:"为什么有些产品注定失败，有些产品却能大获成功？来自谷歌与斯坦福的产品工具和产品战术。",desc:"谷歌首任产品总监阿尔贝托·索维亚结合在谷歌、斯坦福的实战经验与自身代价高昂的创业失败经历，总结出的一套防败手册。书中揭示了新产品高达90%的“市场失败律”，并创新性地提出了“预型”（Pre型）理念，指导团队在正式开发前，以极低的成本和真实数据快速验证关键假设，确保把创意打磨成“正确的它”。",rating:4.8,highlights:["揭示残酷的市场失败律：正视90%新产品必然失败的商业常态，并以此倒推破局的实战方法论","首创“预型”（Pre型）概念：提供8大测试工具，主张用极低成本和小规模试错快速逼近正确的产品形态","强调真实数据驱动决策：辅以特斯拉、谷歌等完整案例回溯，教导团队将决策建立在客观证据而非主观直觉之上"]},{id:"book-009",title:"俞军产品方法论",author:"俞军",cover:"https://cdn.weread.qq.com/weread/cover/47/YueWen_28165041/t6_YueWen_28165041.jpg",wereadLink:"https://weread.qq.com/web/reader/1cc3252071adc3b11cc0162#outline?noScroll=1",link:"https://book.douban.com/subject/34907971/",tags:["产品思维","产品经理","互联网","方法论"],desc:"“百度贴吧之父”俞军二十余年产品实践与思考的系统总结。本书将产品经理定义为“以科学方法研究人性并转化为商业方案”的交叉学科，深入解析了用户模型、交易模型和决策模型三大核心框架，为产品人提供了一套在不确定环境中权衡多方利益的实战指南。",rating:4.4,highlights:["沉淀二十年行业经验：从广为流传的“PM12条”到系统化的产品哲学，展现顶尖产品经理的认知迭代史","三大核心模型拆解：深度剖析用户模型与交易模型，指导如何通过让交易发生来创造“有利可图”的真实用户价值","兼顾科学与人文视角：强调批判性思维的运用，并清晰梳理了从新人到顶尖大牛的能力进阶路径"]},{id:"book-016",title:"策略产品经理：模型与方法论",author:"青十五",cover:"https://cdn.weread.qq.com/weread/cover/31/cpplatform_gheeqe7hjb2czyzthzf5nm/t6_cpplatform_gheeqe7hjb2czyzthzf5nm1735654872.jpg",wereadLink:"https://weread.qq.com/web/reader/4de32800813ab98d5g01286b#outline?noScroll=1",link:"https://book.douban.com/subject/35218721/",tags:["产品经理","策略产品","算法思维"],desc:"本书围绕“策略产品经理”这一复合角色，系统性地构建了从理念到实践的完整知识框架。作者从机器学习理论与经济学视角出发，结合推荐、搜索、广告、风控等核心业务场景，深入浅出地讲解了函数建模与策略应用，并对策略产品经理的核心能力与团队建设给出了详尽指导。",rating:3.9,highlights:["系统化的角色认知建构：清晰界定策略产品经理的时代背景、职责边界与工作内容，为从业者夯实概念基础","跨学科的模型与业务结合：利用机器学习的函数方法论与经济学理论，深度剖析推荐、搜索、广告、风控及定价等真实业务场景的解法","硬核算法的通俗化解析：深入浅出地拆解机器学习本质、常见算法及深度学习前沿技术，帮助产品经理真正理解策略背后的技术支撑","可落地的团队建设指南：全面拆解数据分析、沟通与项目管理等核心能力项，并针对不同产品生命周期提供策略团队的组建思路"]},{id:"book-008",title:"创造：用非传统方式做有价值的事",author:"托尼·法德尔",cover:"https://cdn.weread.qq.com/weread/cover/53/cpPlatform_tzdqT27m3vyaHnX5o8Vbwk/t6_cpPlatform_tzdqT27m3vyaHnX5o8Vbwk.jpg",wereadLink:"https://weread.qq.com/web/reader/13832ac0813ab725fg018645#outline?noScroll=1",link:"https://book.douban.com/subject/36071759/",tags:["产品思维","管理学","创业"],desc:"本书是iPod、iPhone、Nest等爆款产品幕后推手托尼·法德尔30余年职业经历的智慧结晶。作者毫无保留地分享了他在产品设计、团队管理、职业选择和公司经营等方面的“非传统”方法论，帮助读者在各自的领域内刻意练习创造力，做真正有价值的事。",rating:4.9,highlights:["源自顶级创新者的实战经验：连续打造iPod、iPhone等划时代产品的亲历复盘与真实反面教训","覆盖从个人到公司的完整路径：系统解答职业选择、产品设计、团队管理与企业经营等核心问题","提供可复制的“非传统”方法论：强调“亮点思维”与持续复盘，教导读者以反常规的视角刻意练习创造力"]},{id:"book-010",title:"产品思维",author:"刘飞",cover:"https://cdn.weread.qq.com/weread/cover/56/YueWen_25568738/t6_YueWen_25568738.jpg",wereadLink:"https://weread.qq.com/web/reader/38332ce0718625e23831fe7#outline?noScroll=1",link:"https://book.douban.com/subject/33456375/",tags:["产品思维","产品经理","个人成长","互联网"],desc:"实战派产品经理刘飞结合在一线大厂的丰富经验，围绕产品人如何实现能力跃迁展开的底层能力指南。全书掰开揉碎地讲解了认知盲点与实践痛点，通过“认知用户”“创造价值”和“产品落地”三大核心板块，系统拆解了从建立用户模型、高质量决策到快速迭代验证的完整产品方法论。",rating:4.2,highlights:["三大核心板块系统拆解：完整覆盖“认知用户”“创造价值”与“产品落地”的产品闭环","直击痛点的一线实战经验：毫无保留地分享实战中新手迫切需要却难以获取的隐性知识","聚焦底层能力与思维升维：不仅教授落地方法，更注重决策质量与思维模式的跃迁"]},{id:"book-011",title:"产品思维：创新设计的六条法则（全彩）",author:"张印帅",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/253/26687253/t6_26687253.jpg",wereadLink:"https://weread.qq.com/web/reader/a823297071973715a8202b0#outline?noScroll=1",link:"https://book.douban.com/subject/34859540/",tags:["产品设计","创新思维","方法论","设计灵感"],desc:"本书围绕作者张印帅多年产品设计实践总结出的6条创意公式展开，旨在帮助读者系统化地获取设计灵感并解决创新难题。全书通过大量经典案例，详细解析了从发散思考到重组创新的全过程，并在最后提供了从需求到草图再到最终方案的完整项目落地演示。",rating:4,highlights:["提炼6条实用的创新设计公式：将发散思考与重组创新系统化，打造可复用的设计灵感库","丰富的经典设计案例解析：详细展示“问题+方法”、“1+1>2”等法则在真实产品设计中的应用","呈现从需求到方案的落地全流程：通过综合案例演示概念打磨与草图设计的实战过程"]}],We=[{id:"book-012",title:"小而美：持续盈利的经营法则",author:"萨希尔·拉文吉亚",cover:"https://cdn.weread.qq.com/weread/cover/91/cpplatform_vl4abrrrqgxnry833gcrtt/t6_cpplatform_vl4abrrrqgxnry833gcrtt1677578056.jpg",wereadLink:"https://weread.qq.com/web/reader/02932980813ab7a43g012e77#outline?noScroll=1",link:"https://book.douban.com/subject/36280425/",tags:["创业","商业模式","极简主义"],desc:"本书打破了硅谷盲目追求“独角兽”的扩张迷思，聚焦于“规模不是唯一出路”的商业现实。作者结合创立Gumroad的亲身经历，提出了“极简创业经营”理念。全书指导创业者与管理者如何通过从社区切入、聚焦核心能力、精简团队等方式，用最少的资源打造出不仅能活下去，而且还能持续盈利的“慢公司”。",rating:5,highlights:["颠覆传统的扩张迷思：提出盈利至上而非规模至上，将持续赚钱和实际利润作为衡量企业成功的核心标准","可落地的极简法则：总结出“越少越好”“瞄准前100个客户”等7条创业清单，构建从定位、产品到销售的完整闭环","社区驱动的商业逻辑：提倡从虚拟社区入手，以“贡献-创作-教学”的方式低成本验证产品形态并获取早期信任","打造高韧性的“慢公司”：结合疫情与远程办公背景，展示如何通过精简组织和分布式协作，在不确定的时代保持稳定的现金流"]},{id:"book-013",title:"做难而正确的事：进步最快的方式",author:"尤里·莱文",cover:"https://cdn.weread.qq.com/weread/cover/53/cpplatform_bunxjyygj8m9stnwcgwqqk/t6_cpplatform_bunxjyygj8m9stnwcgwqqk1728876401.jpg",wereadLink:"https://weread.qq.com/web/reader/aa032fb0813ab9461g018406#outline?noScroll=1",link:"https://book.douban.com/subject/37054102/",tags:["创业","产品思维","商业管理"],desc:"Waze联合创始人尤里·莱文写给创业者和管理者的行动指南。作者结合连续打造两家估值超10亿美元公司的实战经验，提出“先做难事、再做正确事”的核心哲学。全书通过13个阶段的系统拆解，指导读者如何寻找真正的用户痛点、构建高价值产品，并在不确定的环境中通过不断复盘实现跨越式成长。",rating:4.9,highlights:["世界级创业者的实战复盘：连续打造两家独角兽公司的创始人亲授，提供极具可信度的第一手商业洞察与落地经验","践行“难而正确”的核心哲学：强调不追逐短期热点，而是去解决效率极低却被忽视的痛点，以此建立坚实的商业护城河","覆盖从0到1的全周期指南：系统拆解从寻找痛点、产品构建、融资运作到团队管理的13个关键阶段，提供可操作的行动清单","直面失败的心理韧性建设：不回避挫折，将“从错误中学习”提炼为核心方法，为身处高压环境的读者提供情感共鸣与心理支持","广泛的跨场景应用价值：书中给出的决策工具不仅适用于初创团队，同样能为大公司内部创新及个人职业认知升级提供指导"]},{id:"book-015",title:"创新公司：皮克斯的启示",author:"艾德·卡特姆",cover:"https://cdn.weread.qq.com/weread/cover/20/YueWen_814380/t6_YueWen_814380.jpg",wereadLink:"https://weread.qq.com/web/reader/2ef329605c6d2c2efeeb70d#outline?noScroll=1",link:"https://book.douban.com/subject/26314955/",tags:["创新思维","组织文化","企业管理"],desc:"皮克斯联合创始人艾德·卡特姆结合《玩具总动员》《机器人瓦力》等经典动画的幕后制作故事，深度揭示了皮克斯如何长期保持创意领先的秘密。本书不仅详述了皮克斯从初创到壮大的历程，更抽丝剥茧地解析了其在团队文化、跨部门协作、人才培养和允许失败等方面的独特创意管理机制，为各类组织提供了可复制的创新指南。",rating:4.5,highlights:["揭秘“皮克斯奇迹”背后的管理哲学：通过14部经典动画的真实幕后故事，展示创意从无到有、再到票房口碑双赢的全过程","深度解析创新土壤的搭建：阐述如何通过允许失败的文化、流程设计和激励机制，将“不断推动创新”彻底融入公司DNA","提供跨行业可复用的管理工具：总结项目立项、跨部门协作与风险控制的具体做法，为不同规模和行业的企业提供落地的实战模板"]},{id:"book-017",title:"重来：更为简单的商业思维",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/1/YueWen_635904/t6_YueWen_635904.jpg",wereadLink:"https://weread.qq.com/web/reader/0363228059b4000363b29e9#outline?noScroll=1",link:"https://book.douban.com/subject/5320866/",tags:["商业思维","创业","企业管理","极简主义"],desc:"37signals联合创始人基于十年创业实战经验，写给职场人与创业者的极简商业法则。本书摒弃了传统的MBA术语与复杂的商业教条，以“辛辣、直接、靠谱”的语言，颠覆了关于项目管理、人才招聘、产品设计与企业文化的常规认知，教导读者如何在真实的商业世界中“做更少，但创造更多价值”。",rating:4.3,highlights:["颠覆传统的极简商业哲学：反叛复杂的商业教条，主张“做更少，创造更多”，通过最小可行步骤降低试错成本并快速迭代","源自37signals的十年实战精髓：覆盖从项目管理、产品设计到市场营销的完整链条，提供不讲废话、拿来即用的行动指南","重塑职场与团队管理的认知：提出诸多务实且反常规的观点（如严苛的简历筛选标准），打造基于信任与结果导向的高效团队","适用面极广的实操手册：无论是寻求突破的精英企业家、小团队创业者，还是渴望提升工作效率的普通职场人，都能直接对照落地"]},{id:"book-018",title:"重来2：更为简单高效的远程工作方式",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/38/YueWen_635721/t6_YueWen_635721.jpg",wereadLink:"https://weread.qq.com/web/reader/46b3220059b34946b517012#outline?noScroll=1",link:"https://book.douban.com/subject/25861795/",tags:["企业管理","远程工作","工作方式","团队协作"],desc:"Basecamp（原37signals）创始人基于自身团队多年的全球分布式协作经验，为企业和个人提供的一套远程工作“思想升级包”。本书直面行业争议，破解了“创新只能面对面”及“文化会淡化”等常见误区，并系统提供了借助异步沟通、协作工具与流程设计来打造高效、人性化远程团队的实战指南。",rating:4.1,highlights:["提供思想层面的“升级包”：直击传统办公室痛点，用真实数据与反例打破关于远程办公的固有认知误区","第一手的分布式团队管理经验：Basecamp创始人亲授，展示如何突破地域限制招募顶尖人才，并保持健康、高效的工作节奏","系统可落地的工具与流程方法：详述如何利用协作工具降低管理成本，让远程工作从“特殊福利”真正转变为可持续的主流组织模式"]},{id:"book-019",title:"重来3：做得更少，但赚得更多",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/62/cpplatform_tqth8pnlq8h9ing5uciwhi/t6_cpplatform_tqth8pnlq8h9ing5uciwhi1748502715.jpg",wereadLink:"https://weread.qq.com/web/reader/b6a32ed0813ab9fb5g015181#outline?noScroll=1",link:"https://book.douban.com/subject/37367276/",tags:["工作方式","反内卷","企业文化"],desc:"Basecamp创始人带来的“反内卷”与“反过度忙碌”的管理指南。作者基于近20年带领54人团队服务全球10万家企业的成功经验，直击现代企业盲目扩张、无效加班等八大症结。全书主张以“冷静”颠覆“忙碌”文化，指导企业和个人通过40小时工作制、拒绝KPI和异步沟通等极简方式，在不牺牲生活质量的前提下实现健康发展与持续盈利。",rating:4.2,highlights:["以“冷静”颠覆“忙碌”文化：倡导高效比高产更重要，用稳定的节奏替代疯狂加班的内卷常态","直击现代企业八大症结：深度诊断快速扩张、无效加班、会议泛滥与目标绑架等痛点，提供对症下药的思路","提供四大可落地的管理工具：引入40小时工作制、拒绝硬性KPI、推行非实时沟通，坚持利润优先于规模","源自Basecamp的真实反向案例：展示“小而美”团队如何通过“少做但做好”的策略，跑赢新经济并保持高利润"]}],Ye=[{id:"book-024",title:"要事第一",author:"史蒂芬·柯维 / 罗杰·梅里尔 / 丽贝卡·梅里尔",cover:"https://cdn.weread.qq.com/weread/cover/57/yuewen_33091834/t6_yuewen_330918341686208943.jpg",wereadLink:"https://weread.qq.com/web/reader/f523268071f8f0faf52b806#outline?noScroll=1",link:"https://book.douban.com/subject/1028372/",tags:["时间管理","自我管理","经典思维"],desc:"作为《高效能人士的七个习惯》的延伸与加强版，本书提出了颠覆传统的“第四代时间管理”方法。作者强调，比提升做事速度（时钟）更重要的是找准人生的方向（罗盘）。全书指导读者通过自我意识的觉醒，以原则和价值观为中心，将精力聚焦于“重要而不紧急”的长期目标上，从而在繁忙的现代生活中真正做到“要事第一”。",rating:4.5,highlights:["从“时钟”到“罗盘”的思维跨越：打破一味追求“更快、更努力”的传统效率迷思，确立人生方向优先的哲学","经典的四象限时间管理矩阵：引导读者跳出紧急事务的“救火圈”，将核心精力倾注于第二象限（重要但不紧急）的高价值事务中","生动的“大石块”优先法则：通过“先放石头再倒水”的直观比喻，确保关键目标与核心使命在碎片化日程中得到绝对的优先落实","以原则为中心的自我驱动框架：不仅提供日程安排工具，更通过唤醒良知，帮助读者在工作、家庭等多元角色中实现真正的平衡与统合综效"]},{id:"book-025",title:"清单革命",author:"阿图·葛文德",cover:"https://cdn.weread.qq.com/weread/cover/12/cpPlatform_rudGZN3LDW5m9FBYr7rMBA/t6_cpPlatform_rudGZN3LDW5m9FBYr7rMBA.jpg",wereadLink:"https://weread.qq.com/web/reader/18332f80813ab7292g010065#outline?noScroll=1",link:"https://book.douban.com/subject/27168564/",tags:["管理学","认知科学","工作效率"],desc:"这是一部针对现代复杂世界所撰写的“认知防护手册”。作者阿图·葛文德通过医疗、建筑、投资等高风险领域的真实案例，揭示了人类在海量信息与高压环境下极易出现的判断疏忽。书中提出了“权力下放、简单至上、人为根本、持续改善”四大原则，指导读者将最佳实践外化为可操作的清单，从而在复杂系统中构建一道低成本、高回报的安全防线。",rating:4.6,highlights:["直面复杂时代的认知瓶颈：揭示在海量信息流中，清单如何作为“认知防护网”弥补人类记忆力与注意力分配的先天不足","提供兼具理念与落地的四大原则：通过“权力下放、简单至上、人为根本、持续改善”，构建一套可复用的清单设计哲学","扎实的医学实证背书：以手术感染率骤降等真实临床数据为支撑，证明清单思维在医疗、建筑、投资等高风险领域的跨行业普适性","简洁而具力量的流程创新：强调清单服务于人而非取代人，是帮助专业人士在高压环境下将复杂环节显性化、流程化的必备工具"]},{id:"book-020",title:"别让猴子跳回背上",author:"威廉·安肯三世",cover:"https://cdn.weread.qq.com/weread/cover/69/cpPlatform_7fFoBQ7dtqgABGSTskpJSN/t6_cpPlatform_7fFoBQ7dtqgABGSTskpJSN.jpg",wereadLink:"https://weread.qq.com/web/reader/9fc32010813ab7291g0196bd#outline?noScroll=1",link:"https://book.douban.com/subject/36103994/",tags:["时间管理","领导力","项目管理"],desc:"这是一部以“猴子”生动隐喻任务与责任的经典管理学著作。作者威廉·安肯三世深刻剖析了管理者常被琐事淹没的时间困境，并提出系统化的“猴子管理法”。通过明确任务归属、责任递减与有效授权，指导管理者如何把不属于自己的“猴子”交出去，从而释放精力专注于最高价值的战略思考，实现团队与个人的共同成长。",rating:4.3,highlights:["生动有趣的“猴子”隐喻：将枯燥的责任划分与任务流转具象化，直击职场中“忙碌却低效”的痛点","实用高效的“三步交接”法则：通过明确期望、授予资源与约定检查点，彻底避免下属的待办任务重新跳回自己背上","重塑时间管理与人才培养体系：指导高层放权、中层辅导、基层自发，将企业的成功真正建立在员工自主性的提升之上"]}],Te=[{id:"book-022",title:"学会提问（原书第12版）",author:"尼尔·布朗 / 斯图尔特·基利",cover:"https://cdn.weread.qq.com/weread/cover/68/YueWen_39980443/t6_YueWen_39980443.jpg",wereadLink:"https://weread.qq.com/web/reader/e6832d3072620d9be68aabf#outline?noScroll=1",link:"https://book.douban.com/subject/35513147/",tags:["批判性思维","逻辑学","认知科学","经典书"],desc:"这是一部培养批判性思维的经典实战指南。作者尼尔·布朗与斯图尔特·基利结合长期的教学与研究实践，提供了一套系统化、可操作的提问流程。全书通过大量真实情境案例，教导读者如何在信息泛滥的时代识别隐含假设、区分事实与观点，用高质量的“判断性问题”看透事物本质，从而做出更理性的决策。",rating:5,highlights:["聚焦批判性思考的核心能力：系统拆解“如何提出好问题”的思维过程，帮助读者在复杂信息中迅速抓住本质","提供可落地的提问与评估框架：从背景信息、关键概念到逻辑推理，构建一条完整的判断性问题链条","丰富的真实场景应用示范：结合课堂讨论、写作、日常沟通与职场决策等多元场景，让理论能“立即上手”","打造实用的思考检查单：不仅讲透“提问的价值”，更提供可直接转化为日常习惯的思维检查表，助你有效避开认知陷阱"]},{id:"book-026",title:"如何阅读一本书",author:"莫提默·J. 艾德勒 / 查尔斯·范多伦",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/810/23723810/t6_23723810.jpg",wereadLink:"https://weread.qq.com/book-detail?type=1&senderVid=40710128&v=272326407169ff22272934f&wtheme=white&wfrom=app&wvid=40710128&scene=bottomSheetShare",link:"https://book.douban.com/subject/1013208/",tags:["阅读方法","思维训练","经典"],desc:"阅读领域的“元方法”指南。作者艾德勒与范多伦将阅读划分为基础阅读、检视阅读、分析阅读与主题阅读四个进阶层次，并强调阅读是一项主动的思考活动。本书不仅提供了从“快速略读”到“系统拆解论点”的实操技巧，更致力于通过提问、归纳与批判，将阅读转化为训练理解力、批判力与终身学习的终极工具。",rating:5,highlights:["构建系统的四级阅读框架：从检视阅读到分析阅读再到主题阅读，为读者提供了一套从入门到精通的进阶路径","强调“主动与批判”的阅读观：拒绝被动接收，教导读者如何通过提问、归纳与反思，真正将作者的洞见转化为自己的认知","高效的检视阅读技巧：提供如何在有限时间内通过看目录、挑重点等方式，快速筛选并判断书目价值的核心能力","跨时代的经典效能：自1940年问世以来长盛不衰，其对逻辑拆解与深度思考的指导，是提升所有知识吸收效率的“总开关”"]},{id:"book-023",title:"检索力：打破信息差的科学方法",author:"龚芙蓉",cover:"https://cdn.weread.qq.com/weread/cover/58/cpplatform_feaxemubry47bnkzylqzwv/t6_cpplatform_feaxemubry47bnkzylqzwv1716796541.jpg",wereadLink:"https://weread.qq.com/web/reader/9de32810813ab8e00g018130#outline?noScroll=1",link:"https://book.douban.com/subject/36899979/",tags:["信息素养","检索能力","思维认知"],desc:"本书聚焦“检索力”这一核心技能，旨在帮助读者在信息过载的时代主动掌握“逆风而行”的搜索能力。作者龚芙蓉结合二十余年实践经验，用生动的人文与诺贝尔奖级科学案例，将枯燥的检索工具化为有趣的故事。不仅教授非线性、迭代式的搜索技巧，更致力于重塑读者的探究精神，赋予其走出“信息茧房”的勇气。",rating:4.2,highlights:["丰富的跨学科趣味案例驱动：用“张冠李戴的马克思名言”等生动故事，将枯燥繁琐的检索步骤转化为轻松的探索之旅","重塑非线性与迭代的搜索思维：打破按部就班的线性流程误区，建立以耐心与热情驱动的多轮迭代搜索心态","直击科研与职场的实用痛点：提供可快速落地的实操指南，帮助读者切实缩短科研周期、大幅提升工作效率","兼顾技能训练与人文底色：在教授如何利用和创造信息的同时，注重培养读者的信息素养与打破信息差的认知勇气"]},{id:"book-027",title:"原则",author:"瑞·达利欧",cover:"https://cdn.weread.qq.com/weread/cover/23/YueWen_921568/t6_YueWen_921568.jpg",wereadLink:"https://weread.qq.com/web/reader/848324405e0fe08483ab6a4#outline?noScroll=1",link:"https://book.douban.com/subject/27608239/",tags:["投资","方法论","自我管理"],desc:"桥水基金创始人瑞·达利欧总结四十余年投资、管理与人生经验的集大成之作。作者提出将生活和工作像机器一样系统化，确立了“极度求真”与“极度透明”两大基石，并通过“创意择优”与“基于可信度的决策机制”来迭代思维。书中包含500多条可操作原则，旨在帮助读者在复杂世界中保持开放心态、看清现实，并做出最优决策。",rating:4.8,highlights:["“极度求真”与“极度透明”的基石：主张诚实面对现实，通过公开决策过程来获取外部反馈，达成高效协作","创意择优与可信度加权机制：摒弃个人权威，利用数据驱动的讨论与可信度权重，在团队中选出最优方案","500余条可落地的原则清单：涵盖自我认知、投资决策、团队治理等场景，构建出一套随时可查的行动指南","系统化的“机器”思维：将生活与组织管理拆解为可维护、可迭代的系统，有效规避情绪化干扰"]},{id:"book-031",title:"价值",author:"张磊",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/958/33577958/t6_33577958.jpg",wereadLink:"https://weread.qq.com/web/reader/5be32a3072005be65bef195#outline?noScroll=1",link:"https://book.douban.com/subject/35188914/",tags:["价值投资","商业思维","创业"],desc:"高瓴资本创始人张磊首部个人及投资思想著作。全书通过回顾作者的个人求学与创业历程，系统阐释了“长期主义”与“重仓中国”的核心投资理念，并首次披露了高瓴投资的七大公式。作者将十余个典型投资案例与个人价值修养相结合，揭示了如何在不确定的商业环境中，通过坚持原则、敬畏规则与持续创新，创造长久、真实的价值。",rating:4.6,highlights:["系统构建长期主义哲学：首次系统化梳理“高瓴七大公式”，为读者提供从认知、决策到执行的价值投资实战模型","深度复盘经典实战案例：通过腾讯、货拉拉等真实商业案例，拆解如何在复杂市场中识别企业护城河与核心价值","投资之外的人文思考：延伸至教育、人才与科学观，展现作者作为顶尖投资者对社会责任与长期价值创造的深度思考","可视化的阅读体验：精选多幅手绘彩插与历史影像，将深刻的投资逻辑与企业成长叙事变得更加生动、直观"]},{id:"book-032",title:"纳瓦尔宝典",author:"埃里克·乔根森 / 纳瓦尔·拉维坎特",cover:"https://cdn.weread.qq.com/weread/cover/89/YueWen_44026191/t6_YueWen_44026191.jpg",wereadLink:"https://weread.qq.com/web/reader/e1e32b00729fc94fe1e824d#outline?noScroll=1",link:"https://book.douban.com/subject/35876121/",tags:["财富管理","个人成长","幸福哲学","思维认知"],desc:"这是一部汇集硅谷著名投资人纳瓦尔·拉维坎特过去十年关于财富与幸福思考的行动指南。全书摒弃了“致富靠运气”的传统观念，提出积累财富与幸福生活是可以通过学习掌握的技能。通过系统整理推特、播客与访谈中的智慧，本书为读者提供了如何在快速变化的科技与经济环境中，利用杠杆、发挥个人独特性，进而实现财务自由并获得持久内心满足的方法论。",rating:4.7,highlights:["将财富与幸福视为可习得的技能：打破运气论，强调通过建立杠杆、发挥个人独特性来获取非线性的回报","十年思想的系统化编纂：将碎片化的互联网智慧提炼为成体系的方法论，打造了数字时代个人的“行动指南”","兼顾财富积累与内心满足：不仅教导如何高效赚钱，更深入探讨如何通过阅读、冥想与长期主义，在职场成功中寻找内心的宁静","极具实操性的工具箱：提供如深度思考、刻意练习、构建个人品牌等具体路径，帮助读者在碎片化时代快速实现自我迭代"]},{id:"book-028",title:"优秀的绵羊",author:"威廉·德雷谢维奇",cover:"https://cdn.weread.qq.com/weread/cover/78/cpplatform_3ncoeekcuaectlzj9hf5nr/t6_cpplatform_3ncoeekcuaectlzj9hf5nr1744626569.jpg",wereadLink:"https://weread.qq.com/web/reader/1c0324c0813ab9d91g010aba#outline?noScroll=1",link:"https://book.douban.com/subject/26747208/",tags:["博雅教育","社会学","个人成长"],desc:"耶鲁大学前教授威廉·德雷谢维奇对美国常春藤精英教育体制的尖锐批判之作。作者通过二十余年的教学观察，指出顶尖学府培养出一群虽然聪明、优秀，但普遍焦虑、缺乏目标感且唯命是从的“优秀绵羊”。本书呼吁社会重新审视教育的本质，摆脱对名校与高薪的盲目崇拜，回归博雅教育，鼓励学生探索内在驱动力与自我价值。",rating:4.2,highlights:["犀利剖析精英教育弊端：直击常春藤体制培养出“聪明但没有灵魂”的学生的现实，反思唯名校与成绩论的单一评价体系","回归博雅教育的核心价值：批判应试化倾向，提倡给予学生更多探索、失败与重塑自我的空间，强调教育的本质在于帮助个体找到自我","提供挣脱外部期待的认知框架：既为迷茫的年轻人指明如何重建内在动力，也给家长和教育者敲响了关于“成功定义”的警钟","跨文化背景下的教育共鸣：尽管以美国精英教育为例，其对“教育内卷”与“缺乏目标感”的批判，引发了全球高压教育环境下的深层共鸣"]},{id:"book-029",title:"把自己变成稀缺资产",author:"何思平",cover:"https://cdn.weread.qq.com/weread/cover/98/cpplatform_ncqzerh3wdywn9mlc9cjna/t6_cpplatform_ncqzerh3wdywn9mlc9cjna1694085413.jpg",wereadLink:"https://weread.qq.com/web/reader/2fe326f0813ab821fg0146df#outline?noScroll=1",link:"https://book.douban.com/subject/36513648/",tags:["个人成长","思维认知","自我管理","投资理财"],desc:"这是一个将“人生”视作“公司”来经营的实战指南。作者何思平结合自身从严重口吃到演讲冠军、再到连续创业成功的跨越式经历，提出了“人生有限公司”的经营哲学。全书通过“生命立方体”模型，从认知、实践、精力管理三个维度拆解了如何通过持续输出与跨界学习，将自己打造为具有高壁垒、不可替代的“稀缺资产”。",rating:4.2,highlights:["提出“人生有限公司”经营哲学：倡导将自己视作最值得投资的上市公司，通过不断提升认知与能力壁垒，把“人生”经营成稀缺资产","系统化的“生命立方体”模型：从认知、实践、精力管理三个维度构建个人成长闭环，解决成长中的无序感与碎片化难题","聚焦个人核心竞争力：深度拆解认知力、学习力与共情力等稀缺能力的获取路径，教导读者在不同场景中通过实战验证自我价值","高度可操作的工具清单：摒弃鸡汤式说教，将自我成长拆解为具体的习惯改造与复盘清单，帮助读者在痛点与高光时刻都能通过反馈机制实现自我迭代"]},{id:"book-030",title:"成长第二曲线：跨越S型持续成长",author:"查尔斯·汉迪",cover:"https://cdn.weread.qq.com/weread/cover/65/YueWen_39427437/t6_YueWen_39427437.jpg",wereadLink:"https://weread.qq.com/web/reader/15d32ed072599d6d15daa86#outline?noScroll=1",link:"https://book.douban.com/subject/35531368/",tags:["管理学","个人成长","人生哲学","未来趋势"],desc:"管理大师查尔斯·汉迪的“人生长跑指南”。本书通过书信体形式，深度探讨了在数字时代背景下个人如何识别并跨越“第二曲线”。汉迪指出，无论组织还是个人，都受制于S型增长曲线，只有在第一曲线衰退前主动布局新的增长点，并保持内在价值的独立与进化，才能在不断变化的环境中获得持续且有意义的成长。",rating:4.5,highlights:["百岁管理大师的人生体悟：以书信体浓缩一生管理研究与个人经验，提供了从时间维度审视工作、学习与生活的全景视角","“第二曲线”理论的全面进阶：深刻揭示组织与个人的兴衰规律，教导读者如何在第一曲线的巅峰前就主动布局新的增长引擎","全场景下的持续进化方案：将第二曲线思维跨界应用于教育、职业规划、婚姻与家庭中，强调“变化才是常态”，鼓励持续自我重塑","面向Z世代的清醒处方：在科技高歌猛进的数字时代，提醒后人重视诚信、协作等软实力，保持独立判断，避免在算法与焦虑中迷失自我"]}],Me=[{id:"book-033",title:"枪炮、病菌与钢铁",author:"贾雷德·戴蒙德",cover:"https://cdn.weread.qq.com/weread/cover/99/YueWen_42766048/t6_YueWen_42766048.jpg",wereadLink:"https://weread.qq.com/web/reader/843329f0728c8ee08434fb1#outline?noScroll=1",link:"https://book.douban.com/subject/1813841/",tags:["人类历史","地理决定论","社会学","跨学科"],desc:"一部重新定义人类历史发展的宏大著作。作者贾雷德·戴蒙德通过生物学、地理学、人类学等多学科交叉视角，强有力地反驳了“种族决定论”和“西方文明优越论”。他提出，决定文明兴衰的关键并非种族，而是环境因素、地理格局以及动植物驯化的差异，这些自然条件的偶然性最终导致了技术、免疫力和权力结构的差异，从而重塑了现代世界的全球版图。",rating:4.8,highlights:["颠覆性的历史观：以环境与地理差异解释文明兴衰，有力冲击了长期流行的西方文明优越论，提供了理解人类历史的全新视角","跨学科的综合研究框架：巧妙融合生物学、地理学、历史学、社会学等多学科知识，重建人类文明演进的逻辑路径","系统揭示历史演变的机制：深入剖析农业、病菌传播与技术权力如何形成相互强化的循环，展示了文明发展背后复杂的资源互动","具备公共思想者的宏观视野：将严谨的科学研究转化为对人类命运与社会发展的深刻反思，为现代人理解自身在历史长河中的位置提供了绝佳参照"]},{id:"book-034",title:"中国社会各阶层分析",author:"梁晓声",cover:"https://cdn.weread.qq.com/weread/cover/0/yuewen_42682684/t6_yuewen_426826841728383400.jpg",wereadLink:"https://weread.qq.com/web/reader/085326e0728b493c085ade1#outline?noScroll=1",link:"https://book.douban.com/subject/35485315/",tags:["社会观察","阶层研究","现实主义"],desc:"茅盾文学奖得主梁晓声基于多年社会观察的现实题材力作。作者将快速变迁的中国社会划分为不同阶层，以平民视角细腻描摹各群体的生存状态、心理困境与阶层焦虑。全书不追求纯学术的枯燥分析，而是通过文学化的社会观察，勾勒出一幅当代中国社会的“浮世绘”，引导读者在时代坐标中找准定位，理解社会变迁背后的结构性逻辑。",rating:4.3,highlights:["平民视角下的社会“浮世绘”：通过细腻的笔触勾勒各阶层的生存逻辑与心理画像，帮助读者直观理解宏观社会结构","兼具现实痛点与精神深度：不仅呈现物质生活的差异，更深刻剖析阶层焦虑背后的价值困境，为理解当代社会提供人文参照","时代脉络中的命运书写：将个体命运置于历史事件的宏观背景中考察，展现了半个世纪以来社会变迁的深层脉络","文学笔触下的社会关怀：作为茅盾文学奖得主，作者通过富有故事性的叙事，既保留了批判性，又让文本充满了温暖的人文温度"]},{id:"book-021",title:"把自己作为方法",author:"项飙 / 吴琦",cover:"https://cdn.weread.qq.com/weread/cover/81/cpPlatform_3300003962/t6_cpPlatform_3300003962.jpg",wereadLink:"https://weread.qq.com/web/reader/d7532f80813ab680cg012708#outline?noScroll=1",link:"https://book.douban.com/subject/35092383/",tags:["社会学","访谈录","思想方法"],desc:"两代学人项飙与吴琦历时三年、跨越五地的深度对话实录。本书从项飙的个人经验切入，探讨了中国社会近半个世纪的变迁、全球化与民粹主义等宏大议题。在自我泛滥与思想受困的时代，作者提出“把自己作为方法”，指导读者如何在全球化年代重新定位自我、重建“附近”，并在个人体验与宏观叙事之间搭建起思考与行动的桥梁。",rating:4.6,highlights:["以“自我”切入回应宏大议题：示范如何在个人真实体验与全球化、社会变迁等宏观叙事之间搭建认知的桥梁","提供重建“附近”的行动指南：在自我泛滥的潮流中，指导读者如何审视现实，创造性地建设身边的小世界","兼具学术深度与极高可读性：将人类学、社会学的深刻理论洞察，巧妙融入生动的田野故事与双人生活化对谈中","跨越三年的思想碰撞：历时三年、跨越五地的持续对话结集，反思知识生产与公共讨论的真实处境"]}],$e=[{id:"book-035",title:"百岁人生：长寿时代的生活和工作",author:"琳达·格拉顿 / 安德鲁·斯科特",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/860/22902860/t6_22902860.jpg",wereadLink:"https://weread.qq.com/web/reader/30c323e0715d784c30c1e1b#outline?noScroll=1",link:"https://book.douban.com/subject/30245089/",tags:["人生规划","长寿时代","社会学"],desc:"基于伦敦商学院的经典课程，作者琳达·格拉顿与安德鲁·斯科特提出，面对一半概率活到100岁的长寿时代，传统的“学习-工作-退休”三段式人生模式已彻底失效。本书指导读者如何重新设计人生，通过拥抱多阶段人生模型，在更长的生命周期中平衡工作、学习与休闲，并强调在财务资产之外，更要注重健康、友谊与知识等“无形资产”的持续投入与增值。",rating:4.3,highlights:["重构人生模式：打破传统的“三段式”生活范式，提出充满弹性的“多阶段人生”模型，让工作与学习不再是线性的重复","从关注财务到“无形资产”：除了养老金，强调健康、友谊、社交网络与心理韧性等“无形资产”才是维持长寿生活质量的核心动力","职场与转型的系统规划：提供针对长寿时代的职业设计思路，涵盖何时转型、如何投资自身、怎样应对不确定性等实战框架","社会与制度的深度洞察：探讨长寿如何冲击养老金体系、劳动力市场与企业模式，帮助个人在宏观变革中把握主动权"]},{id:"book-00043",title:"重启吧！我的健康人生",author:"兰根·查特吉",cover:"https://cdn.weread.qq.com/weread/cover/80/cpplatform_kbrswv3bm7cix2zlyo6wtx/t6_cpplatform_kbrswv3bm7cix2zlyo6wtx1716362285.jpg",wereadLink:"https://weread.qq.com/web/reader/e8a32e80813ab8de4g0191c2#outline?noScroll=1",link:"https://book.douban.com/subject/36899697/",tags:["生活方式","预防医学","身心健康","自我管理"],desc:"英国临床医生基于20多年行医经验写就。本书主张“生活方式即良药”，围绕休息、饮食、运动和睡眠四个领域设计了20个微小行动计划，帮助现代人通过低成本的习惯改变逆转慢性问题。",rating:4.6,highlights:["提出99%的健康取决于日常习惯而非医学治疗，强调整体干预","构建“4×5”微行动框架，涵盖休息、饮食、运动、睡眠四个维度的20个小改变","兼顾科学深度与极简实操，如“12小时进食窗口”、“10分钟高强度运动”","关注现代职场人痛点，提供“小投入、大回报”的可叠加身心健康投资策略"]},{id:"book-00040",title:"你是你吃出来的：吃对少生病，病了这样吃",author:"夏萌",cover:"https://cdn.weread.qq.com/weread/cover/86/YueWen_920661/t6_YueWen_920661.jpg",wereadLink:"https://weread.qq.com/web/reader/7bb32c305e0c557bbdeab81#outline?noScroll=1",link:"https://book.douban.com/subject/27590675/",tags:["饮食科普","营养学","健康管理"],desc:"前安贞医院营养科主任夏萌结合十余年临床经验写成。本书颠覆“低油低脂”误区，提出回归进化的“65%植物+35%动物”膳食配比，并针对14种常见慢病给出“四分法”饮食干预方案，帮助读者重建健康饮食观。",rating:5,highlights:["指出多数慢病源于“蛋白质缺乏式营养不良”，打破常规低油低脂迷思","提出清晰量化的“65%植物类+35%动物类”科学饮食结构","针对冠心病、高血压等14种常见慢病提供实操性极强的“四分法”菜单","源于十万+真实临床病例，强调“一日三餐才是真正的保健品”"]},{id:"book-00041",title:"你是你吃出来的2",author:"夏萌",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/883/35905883/t6_35905883.jpg",wereadLink:"https://weread.qq.com/web/reader/40532d007223e15b4052fae#outline?noScroll=1",link:"https://book.douban.com/subject/35340053/",tags:["饮食指导","科普","疾病防治"],desc:"聚焦高血压、高脂血症、糖尿病等7大常见慢病，从临床营养医学角度逐一破除诸如“血压高不能吃肉”等饮食误区，提供系统的“上游-中游-下游”疾病防控思路与个体化营养处方。",rating:4.6,highlights:["专攻7大常见慢性病，为患者提供针对性的“生病了怎么吃”个体化指导","科学辟谣，破除“血压高不能吃肉”、“胆固醇高不能吃鸡蛋”等常见误区","梳理疾病发生因果链条，帮助读者从源头找到健康干预的着力点","提供从一日三餐、运动到心态调养的具体可操作生活方式清单"]}],Ge=JSON.parse('{"title":"好书推荐","description":"读书心得、推荐书籍和阅读技巧","frontmatter":{"title":"好书推荐","date":"2024-01-01T16:00:00.000Z","description":"读书心得、推荐书籍和阅读技巧","categories":["growth"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png","permalink":"/growth/books","tags":["悦读时光","资源推荐"]},"headers":[],"relativePath":"30.悦读时光/01.好书推荐.md","filePath":"30.悦读时光/01.好书推荐.md"}'),Ne={name:"30.悦读时光/01.好书推荐.md"},De=Object.assign(Ne,{setup(r){return(b,t)=>(a(),l("div",null,[t[0]||(t[0]=x('Are you an LLM? You can read better optimized documentation at /30.悦读时光/01.好书推荐.md for this page in Markdown format
好书推荐
1. AI 与数学思维
在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操作系统”， 理解 AI，本质上是理解数据、数学与逻辑如何重构这个世界。
这套书单从数学思维的底层逻辑出发，让我们理解 ChatGPT 等大模型背后的计算机制，将硬核的神经网络与概率统计转化为优化生活的决策工具。它不仅能界定机器智能的边界，更颠覆了传统的“目标论”，倡导在不确定性中通过“踏脚石”思维寻找突破性创新的可能。AI 的研究实践告诉我们，伟大的突破往往无法被预设，唯有拥抱“寻宝者思维”才能在未知中偶遇奇迹，我们需要颠覆传统的创新范式。
',4)),h(k,{books:g(Be)},null,8,["books"]),t[1]||(t[1]=x('2. 产品与商业
2.1 产品 Sense 与创造
在产品成功率不足 10% 的残酷市场中，好的创造绝非源于盲目的灵感，而是建立在极致的风险验证与深刻的人性洞察之上。
卓越的产品力不仅关乎功能设计，更是一场关于策略与创造力的刻意练习：我们需要通过“预型”思维以极低成本进行真实数据验证，确保我们在投入开发前是在“做对产品”；并利用用户模型、交易模型等底层框架，将零散的需求转化为可获利的商业方案。
',4)),h(k,{books:g(Ie)},null,8,["books"]),t[2]||(t[2]=e("h3",{id:"_2-2-商业化",tabindex:"-1"},[n("2.2 商业化 "),e("a",{class:"header-anchor",href:"#_2-2-商业化","aria-label":"Permalink to “2.2 商业化”"},"")],-1)),t[3]||(t[3]=e("blockquote",null,[e("p",null,[n("在追逐“独角兽”和规模扩张的狂热迷思之后，真正的商业高手正在重新回归本质："),e("strong",null,"盈利才是企业的核心护城河。"),n(" 这套书单为我们揭示了一种"),e("strong",null,"更具韧性的商业路径——“小而美”的极简经营"),n("。它教导我们如何拒绝低效的内卷与忙碌，通过“做更少但创造更多价值”的思维，打造在不确定时代下依然能保持稳定现金流的“慢公司”。")]),e("p",null,[e("strong",null,"商业的成功，往往源于敢于挑战“难而正确”的事"),n("。从皮克斯如何建立允许失败的创意土壤，到 Waze 如何通过解决被忽视的痛点实现跨越式成长，这些世界级案例证明了：卓越的组织不仅需要极简的流程与高效的分布式协作（远程办公），更需要一种“冷静”的文化，将利润置于规模之上。")])],-1)),h(k,{books:g(We)},null,8,["books"]),t[4]||(t[4]=e("h2",{id:"_3-效率与效能",tabindex:"-1"},[n("3. 效率与效能 "),e("a",{class:"header-anchor",href:"#_3-效率与效能","aria-label":"Permalink to “3. 效率与效能”"},"")],-1)),t[5]||(t[5]=e("blockquote",null,[e("p",null,[n("在信息过载与高压竞争的现代环境中，平庸与卓越的分水岭不再是做事的速度，而是"),e("strong",null,"决策的精度与责任的边界"),n("。这套书单为我们提供了一套从个人认知到组织协作的“效能防线”：首先，它"),e("strong",null,"引导我们完成从“时钟”到“罗盘”的思维跨越，打破盲目追求速度的迷思，确保将核心精力倾注在真正产生长远复利的“重要非紧急”事务之上"),n("。 真正的效能源于对复杂性的科学驾驭：")]),e("ul",null,[e("li",null,"通过“清单革命”式的认知防护，我们将最佳实践外化为可靠的防错系统，弥补人类在极端环境下的认知局限；"),e("li",null,"“猴子管理法”则以生动的视角重塑了职场协作的责任逻辑，教我们通过有效授权拒绝无谓的干扰，释放战略思考的精力；")])],-1)),h(k,{books:g(Ye)},null,8,["books"]),t[6]||(t[6]=e("h2",{id:"_4-学习与成长",tabindex:"-1"},[n("4. 学习与成长 "),e("a",{class:"header-anchor",href:"#_4-学习与成长","aria-label":"Permalink to “4. 学习与成长”"},"")],-1)),t[7]||(t[7]=e("blockquote",null,[e("p",null,[n("在信息爆炸与快速变革的时代，"),e("strong",null,"真正的成长不再是知识的被动堆砌，而是认知系统的彻底迭代"),n("。这套书单为我们构建了一个从底层思维到人生经营的闭环：")]),e("ul",null,[e("li",null,"首先，通过批判性思维与深度阅读夯实“元能力”，在泛滥的信息中识别本质，将他人的洞见转化为自己的血肉；"),e("li",null,"其次，利用“检索力”打破信息差，确保自己在任何领域都能快速获取高质量资源，掌握逆风而行的主动权。")]),e("p",null,[e("strong",null,"人生不是一场盲目的长跑，而是一场基于“原则”的精密经营"),n("。从达利欧的系统化决策，到纳瓦尔的财富与幸福逻辑，这些智者教导我们如何利用杠杆、坚持长期主义，将自己视作一家“人生有限公司”来经营。我们需要摆脱“优秀绵羊”式的被动驱动，通过识别成长的“第二曲线”，在巅峰时刻主动寻求突破，将自己打造成不可替代的稀缺资产。阅读这些经典，不仅是为了习得技能，更是为了在算法与焦虑的夹击中，重塑内心的宁静与独立判断的勇气。")])],-1)),h(k,{books:g(Te)},null,8,["books"]),t[8]||(t[8]=e("h2",{id:"_5-人文社科",tabindex:"-1"},[n("5. 人文社科 "),e("a",{class:"header-anchor",href:"#_5-人文社科","aria-label":"Permalink to “5. 人文社科”"},"")],-1)),t[9]||(t[9]=e("blockquote",null,[e("p",null,"在宏观历史与微观现实间构建认知：在碎片化与不确定性并存的时代，穿透表象、直达本质的洞察力成为必需。这套单为我们开启了两扇窗："),e("ul",null,[e("li",null,"一扇望向万年文明的宏大坐标，通过《枪炮、病菌与钢铁》的跨学科视野，拆解地理环境如何冷酷而偶然地重塑全球版图，彻底颠覆“文明优越论”的傲慢；"),e("li",null,"另一扇则照向当下社会的真实肌理，在梁晓声对各阶层生存困境的细腻描摹中，读懂大时代变革背后隐秘的结构性逻辑与阶层焦虑。")]),e("p",null,[e("strong",null,"人文思考的终极价值，在于如何将宏大叙事转化为个人的行动力量"),n("。正如项飙所倡导的“把自己作为方法”，这些著作不仅是知识的传递，更是思维的松绑。它们教导我们不再做时代的被动旁观者，而是学会在个人体验与宏观世界之间搭建桥梁，通过重建“附近”的小世界，在喧嚣中找准自我的定位。")])],-1)),h(k,{books:g(Me)},null,8,["books"]),t[10]||(t[10]=e("h2",{id:"_6-健康生活",tabindex:"-1"},[n("6. 健康生活 "),e("a",{class:"header-anchor",href:"#_6-健康生活","aria-label":"Permalink to “6. 健康生活”"},"")],-1)),t[11]||(t[11]=e("img",{src:$,style:{width:"100%","border-radius":"8px","margin-bottom":"20px"},alt:"about site background"},null,-1)),t[12]||(t[12]=e("blockquote",null,[e("p",null,[n("在面临大概率活到100岁的“长寿时代”，传统的线性人生模式正在失效。我们需要对“健康”进行一次彻底的认知重构："),e("strong",null,"健康不再仅仅是“没有疾病”，而是支撑我们跨越漫长生命周期、应对多阶段人生挑战的最核心“无形资产”"),n("。想要让这套生命系统长期平稳运行，真正的解法并不在医院的处方笺里，而是隐藏在我们每天的日常选择中。")]),e("p",null,[n("决定我们长期健康状态的，有 99 %取决于日常习惯。我们需要"),e("strong",null,"在休息、饮食、运动、睡眠这四个高频生活维度中，植入微小但杠杆率极高的改变"),n("（例如12小时进食窗口、10分钟高强度运动、睡前屏蔽数字通知等）。用最低的执行成本，置换身心状态的巨大回报。")])],-1)),h(k,{books:g($e)},null,8,["books"])]))}});export{Ge as __pageData,De as default};
diff --git "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_01.\345\245\275\344\271\246\346\216\250\350\215\220.md.BVzgXE8N.lean.js" "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_01.\345\245\275\344\271\246\346\216\250\350\215\220.md.lGftAF4x.lean.js"
similarity index 99%
rename from "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_01.\345\245\275\344\271\246\346\216\250\350\215\220.md.BVzgXE8N.lean.js"
rename to "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_01.\345\245\275\344\271\246\346\216\250\350\215\220.md.lGftAF4x.lean.js"
index c3de1095..0b444bff 100644
--- "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_01.\345\245\275\344\271\246\346\216\250\350\215\220.md.BVzgXE8N.lean.js"
+++ "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_01.\345\245\275\344\271\246\346\216\250\350\215\220.md.lGftAF4x.lean.js"
@@ -1 +1 @@
-import{d as A,p as B,h as a,z as h,Y as I,s as W,g as l,y as _,v as P,i as e,W as v,x as c,F as p,t as f,S as n,T as Y,_ as C,r as j,c as T,k as M,U as x,l as g}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const $="/img/cover/health_bg.png",N={class:"book-panel__drawer"},V={class:"book-panel__header-meta"},G={class:"book-panel__title"},D={class:"book-panel__author"},F={class:"book-panel__body"},R={class:"book-panel__top-bar"},Z={class:"book-panel__top-left"},H={class:"book-panel__tags"},J={key:0,class:"book-panel__rating"},O={class:"stars"},E={key:0,viewBox:"0 0 24 24",fill:"currentColor"},K={key:1,viewBox:"0 0 24 24",class:"half-star"},Q=["id"],X=["clip-path"],U={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},ee={class:"rating-text"},te={class:"book-panel__links"},oe=["href"],ae={width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",style:{"flex-shrink":"0"}},le=["href"],re={width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",style:{"flex-shrink":"0"}},ne={class:"book-panel__section"},se={class:"book-panel__desc"},ie={key:0,class:"book-panel__section"},de={class:"book-panel__highlights"},ce=A({__name:"BookDetailPanel",props:{book:{},open:{type:Boolean},heroColor:{},tagColors:{}},emits:["close"],setup(r,{emit:b}){const t=b;return(w,o)=>(a(),B(Y,{to:"body"},[h(I,{name:"panel-slide"},{default:W(()=>[r.open&&r.book?(a(),l("div",{key:0,class:"book-panel",onClick:o[2]||(o[2]=P(i=>t("close"),["self"]))},[e("div",{class:"book-panel__overlay",onClick:o[0]||(o[0]=i=>t("close"))}),e("div",N,[e("div",{class:"book-panel__header",style:v({background:r.heroColor})},[e("button",{class:"book-panel__close",title:"关闭",onClick:o[1]||(o[1]=i=>t("close"))},[...o[3]||(o[3]=[e("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none"},[e("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})],-1)])]),e("div",V,[e("h2",G,c(r.book.title),1),e("p",D,c(r.book.author),1)])],4),e("div",F,[e("div",R,[e("div",Z,[e("div",H,[(a(!0),l(p,null,f(r.book.tags,(i,m)=>(a(),l("span",{key:i,class:"book-panel__tag",style:v({background:r.tagColors[m%r.tagColors.length].bg,color:r.tagColors[m%r.tagColors.length].text})},c(i),5))),128))]),r.book.rating!=null?(a(),l("div",J,[o[8]||(o[8]=e("span",{class:"rating-label"},"推荐指数:",-1)),e("div",O,[(a(),l(p,null,f(5,i=>e("span",{key:i,class:"star"},[i<=Math.floor(r.book.rating)?(a(),l("svg",E,[...o[4]||(o[4]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])])):i===Math.ceil(r.book.rating)&&r.book.rating%1!==0?(a(),l("svg",K,[e("defs",null,[e("clipPath",{id:"clip-"+r.book.id},[...o[5]||(o[5]=[e("rect",{x:"0",y:"0",width:"12",height:"24"},null,-1)])],8,Q)]),o[6]||(o[6]=e("path",{class:"star-empty",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"none",stroke:"currentColor","stroke-width":"1.5"},null,-1)),e("path",{class:"star-filled",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"currentColor","clip-path":"url(#clip-"+r.book.id+")"},null,8,X)])):(a(),l("svg",U,[...o[7]||(o[7]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])]))])),64))]),e("span",ee,c(r.book.rating.toFixed(1)),1)])):_("",!0)]),e("div",te,[e("a",{href:r.book.link,target:"_blank",rel:"noopener",class:"book-panel__link-btn"},[(a(),l("svg",ae,[...o[9]||(o[9]=[e("path",{d:"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])])),o[10]||(o[10]=n(" 豆瓣 ",-1))],8,oe),r.book.wereadLink?(a(),l("a",{key:0,href:r.book.wereadLink,target:"_blank",rel:"noopener",class:"book-panel__link-btn"},[(a(),l("svg",re,[...o[11]||(o[11]=[e("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",fill:"currentColor"},null,-1)])])),o[12]||(o[12]=n(" 微信读书 ",-1))],8,le)):_("",!0)])]),o[15]||(o[15]=e("div",{class:"book-panel__divider"},null,-1)),e("section",ne,[o[13]||(o[13]=e("h3",{class:"book-panel__section-title"},[e("span",{class:"book-panel__section-icon"},"📖"),n(" 内容简介 ")],-1)),e("p",se,c(r.book.desc),1)]),r.book.highlights&&r.book.highlights.length>0?(a(),l("section",ie,[o[14]||(o[14]=e("h3",{class:"book-panel__section-title"},[e("span",{class:"book-panel__section-icon"},"✨"),n(" 书籍亮点 ")],-1)),e("ul",de,[(a(!0),l(p,null,f(r.book.highlights,(i,m)=>(a(),l("li",{key:m,class:"book-panel__highlight-item"},c(i),1))),128))])])):_("",!0)])])])):_("",!0)]),_:1})]))}}),he=C(ce,[["__scopeId","data-v-1ddfc013"]]),be={class:"book-list"},ue=["onClick"],ge=["src","alt"],ke={class:"book-cover__overlay"},pe={key:0,class:"book-cover__hint"},we=["href"],me={class:"book-info"},_e={class:"book-info__title"},fe={class:"book-info__author"},qe={key:0,class:"book-info__rating"},ve={class:"stars"},je={key:0,viewBox:"0 0 24 24",fill:"currentColor"},Le={key:1,viewBox:"0 0 24 24",class:"half-star"},ye=["id"],Se=["clip-path"],xe={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},Ae={class:"rating-text"},Pe={class:"book-info__tags"},Ce={class:"book-info__desc"},ze=A({__name:"BookRecommend",props:{books:{}},setup(r){const b=["linear-gradient(135deg, #e8f0fe 0%, #c7d9fd 100%)","linear-gradient(135deg, #e6f4ea 0%, #b7dfc4 100%)","linear-gradient(135deg, #fff3e0 0%, #ffd9a0 100%)","linear-gradient(135deg, #fce4ec 0%, #f8b4c8 100%)","linear-gradient(135deg, #ede7f6 0%, #cdb8ee 100%)","linear-gradient(135deg, #e0f7fa 0%, #9ee8f0 100%)"],t=[{bg:"#e8f0fe",text:"#3b5bdb"},{bg:"#e6f4ea",text:"#2e7d32"},{bg:"#fff3e0",text:"#e65100"},{bg:"#fce4ec",text:"#c2185b"},{bg:"#ede7f6",text:"#6a1b9a"},{bg:"#e0f7fa",text:"#00838f"}],w=j(null),o=j(0),i=j(!1),m=T(()=>b[o.value%b.length]);function z(q,d){q.withPanel!==!1&&(w.value?.id===q.id&&i.value?L():(w.value=q,o.value=d,i.value=!0))}function L(){i.value=!1,setTimeout(()=>{w.value=null},300)}return(q,d)=>(a(),l(p,null,[e("div",be,[(a(!0),l(p,null,f(r.books,(s,y)=>(a(),l("div",{key:s.id,class:M(["book-card",{"book-card--active":w.value?.id===s.id&&i.value}]),onClick:u=>z(s,y)},[e("div",{class:"book-cover",style:v({background:b[y%b.length]})},[s.cover?(a(),l("img",{key:0,src:s.cover,alt:s.title,class:"book-cover__img"},null,8,ge)):_("",!0),e("div",ke,[s.withPanel!==!1?(a(),l("span",pe,"点击查看详情")):(a(),l("a",{key:1,href:s.link,target:"_blank",rel:"noopener",class:"book-cover__hint",onClick:d[0]||(d[0]=P(()=>{},["stop"]))},"查看豆瓣",8,we))])],4),e("div",me,[e("div",_e,"《"+c(s.title)+"》",1),e("div",fe,c(s.author),1),s.rating!=null?(a(),l("div",qe,[e("div",ve,[(a(),l(p,null,f(5,u=>e("span",{key:u,class:"star"},[u<=Math.floor(s.rating)?(a(),l("svg",je,[...d[1]||(d[1]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])])):u===Math.ceil(s.rating)&&s.rating%1!==0?(a(),l("svg",Le,[e("defs",null,[e("clipPath",{id:"card-clip-"+s.id},[...d[2]||(d[2]=[e("rect",{x:"0",y:"0",width:"12",height:"24"},null,-1)])],8,ye)]),d[3]||(d[3]=e("path",{class:"star-empty",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"none",stroke:"currentColor","stroke-width":"1.5"},null,-1)),e("path",{class:"star-filled",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"currentColor","clip-path":"url(#card-clip-"+s.id+")"},null,8,Se)])):(a(),l("svg",xe,[...d[4]||(d[4]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])]))])),64))]),e("span",Ae,c(s.rating.toFixed(1)),1)])):_("",!0),e("div",Pe,[(a(!0),l(p,null,f(s.tags,(u,S)=>(a(),l("span",{key:u,class:"tag",style:v({background:t[S%t.length].bg,color:t[S%t.length].text})},c(u),5))),128))]),e("p",Ce,c(s.desc),1)])],10,ue))),128))]),h(he,{book:w.value,open:i.value,"hero-color":m.value,"tag-colors":t,onClose:L},null,8,["book","open","hero-color"])],64))}}),k=C(ze,[["__scopeId","data-v-fd79cd55"]]),Be=[{id:"book-001",title:"心中有数：生活中的数学思维",author:"刘雪峰",cover:"https://cdn.weread.qq.com/weread/cover/39/3300018939/t6_3300018939.jpg",wereadLink:"https://weread.qq.com/web/reader/df6323a0813ab6de5g019a31#outline?noScroll=1",link:"https://book.douban.com/subject/35749693/",tags:["数学思维","科普","决策"],desc:"本书通过大量贴近日常的例子，展示数学思维如何优化我们的生活决策。作者用概率、统计、最优化等数学工具，为生活、职场、人际交往中的权衡问题提供分析框架，帮助读者在面对不确定性时像计算机一样找到“最优解”。",rating:4.9,highlights:["将大数定律、最小二乘法等硬核数学概念与日常生活巧妙结合","提供应对不确定性和多目标抉择的科学决策框架","强调数学不仅是公式计算，更是看世界、优化人生的高效思维工具"]},{id:"book-0020",title:"智慧的疆界：从图灵机到人工智能",author:"周志明",cover:"https://cdn.weread.qq.com/weread/cover/92/YueWen_23637052/t6_YueWen_23637052.jpg",wereadLink:"https://weread.qq.com/web/reader/b9732f007168ac3cb976eca#outline?noScroll=1",link:"https://book.douban.com/subject/30379536/",tags:["人工智能","科技史","通识读物"],desc:"本书是一部面向大众的人工智能通识读物。作者周明以时间为主线，将人工智能的发展历程、关键人物与里程碑事件串联起来，从五个维度展开：学术理论、历史沿革、技术应用、研究成果以及面临的困难与未来挑战。全书旨在用通俗的语言和巧妙的结构，把人工智能从“阳春白雪”的学术殿堂带到公众视野，帮助读者理解 AI 能做什么、做不到什么，以及背后的技术与思想根源。",rating:5,highlights:["以时间为主线，清晰梳理人工智能的发展脉络与里程碑","深入浅出，用通俗语言将复杂的学术理论带入公众视野","客观剖析，帮助读者准确界定AI“能做什么”与“做不到什么”"]},{id:"book-004",title:"为什么伟大不能被计划",author:"肯尼斯·斯坦利 / 乔尔·雷曼",cover:"https://cdn.weread.qq.com/weread/cover/22/cpplatform_wfdzhk1dx7ig9aep4gagof/t6_cpplatform_wfdzhk1dx7ig9aep4gagof1686304376.jpg",wereadLink:"https://weread.qq.com/web/reader/0bf32020813ab7e6bg016510#outline?noScroll=1",link:"https://book.douban.com/subject/36357804/",tags:["人工智能","创新思维","认知科学"],desc:"本书由两位前沿AI科学家合著，提出了颠覆传统“目标-计划”思维的全新视角。结合AI研究实践，书中论证了伟大成就往往并非出自精心设计的蓝图，而是源于对未知的好奇、随机探索与不断试错。通过“寻宝者思维”和“踏脚石模型”等方法，为读者在高度不确定的环境中激发突破性创新提供了具体的行动框架。",rating:4.5,highlights:["颠覆传统的“目标论”，论证伟大成就源自对未知的好奇与无边界的探索","提供“寻宝者思维”“踏脚石模型”“新奇性探索”三大可操作的认知与实践工具","扎根OpenAI等前沿机构的实证背景，其启发意义跨学科适用于科研、商业及人生规划"]},{id:"book-003",title:"这就是ChatGPT",author:"斯蒂芬·沃尔弗拉姆",cover:"https://cdn.weread.qq.com/weread/cover/24/cpplatform_4cn8w4tmgzntjobg9ffeny/t6_cpplatform_4cn8w4tmgzntjobg9ffeny1703648785.jpg",wereadLink:"https://weread.qq.com/web/reader/74332a90813ab86c4g019d98#outline?noScroll=1",link:"https://book.douban.com/subject/36449803/",tags:["人工智能","大模型","ChatGPT"],desc:"本书由著名科学家斯蒂芬·沃尔弗拉姆撰写，全景式拆解了ChatGPT的内部工作机制。作者用通俗语言解释了神经网络和自回归架构等核心技术，探讨了简单的计算规则如何涌现出令人惊叹的智能，帮助读者深刻理解大语言模型为何能生成高质量的人类水平文本。",rating:4.3,highlights:["全景拆解核心技术：深入浅出地讲清ChatGPT背后的神经网络与自回归架构","独特的大师视角：将大模型视为“简单的计算规则”涌现复杂智能的绝佳范例","兼顾技术与商业影响：结合算力规模与行业冲击，全面探讨AI时代的机遇与挑战"]},{id:"book-0030",title:"人工智能：现代方法（第4版）（上下册）",author:"[美]斯图尔特·罗素(Stuart Russell) / [美]彼得·诺维格(Peter Norvig)",cover:"https://cdn.weread.qq.com/weread/cover/33/cpplatform_8rthznqfhsjuz5fswwn6kx/t6_cpplatform_8rthznqfhsjuz5fswwn6kx1675928213.jpg",wereadLink:"https://weread.qq.com/web/reader/fc332020813ab7942g0102ad#outline?noScroll=1",link:"https://book.douban.com/subject/36152133",tags:["人工智能","教材","理论实践结合","经典著作","计算机科学"],desc:"本书是人工智能领域的经典权威教材，系统、深入地探讨AI领域的理论与实践，以统一风格融合当今流行的AI思想与术语到前沿应用中，真正实现理论与实践相结合。全书分7个部分共28章，理论部分涵盖逻辑、概率、连续数学、感知、推理、学习、行动及公平、信任、社会公益和安全等社会议题；实践部分选取微电子设备、机器人行星探测器、在线服务、AlphaZero、人形机器人、自动驾驶、AI辅助医疗等热门场景。由加州大学伯克利分校教授斯图尔特·罗素与前谷歌研究总监彼得·诺维格联合撰写，被全球1500多所高校采用，适合作为AI相关专业本科生和研究生教材，也可作为专业人员的参考书。",rating:5,highlights:["体系完整覆盖面广，7个部分28章构成自洽的AI理论主线，涵盖核心理论与前沿议题","理论与实践并重，既阐述核心算法与模型，又展示在热门场景中的落地实例，便于知识迁移","紧跟前沿关注社会议题，专门讨论AI伦理与安全，引导思考技术与社会的交互责任","一站式权威参考，兼具教材属性与专业参考价值，适配高校教学与产业实践双重需求","现代理念贯穿始终，通过最新案例体现AI进展与行业趋势，呈现“活”的AI生态"]},{id:"book-0031",title:"模型思维：简化世界的人工智能模型",author:"龚才春",cover:"https://cdn.weread.qq.com/weread/cover/26/YueWen_38601826/t6_YueWen_38601826.jpg",wereadLink:"https://weread.qq.com/web/reader/5a8326e0724d04625a8e740#outline?noScroll=1",link:"https://book.douban.com/subject/35488925/",tags:["模型思维","人工智能","算法模型","机器学习","入门实践"],desc:"本书聚焦“如何用模型简化世界”的核心主题，将人工智能在现实业务中面临的难题归纳为权重、状态、序列、表示、相似、分类六大问题，并围绕该框架讲解对应模型思路与算法。书中弱化复杂数学公式，以大量生活化、业务化案例阐释模型理论与落地场景，帮助读者建立“模型—场景”映射关系，降低AI模型学习门槛，既是人工智能初学者的入门读物，也可为企业工程师、科研人员提供实践参考，适合各类读者学习并将模型思维应用到生活与工作中。",rating:4.8,highlights:["以“六大问题”框架串联AI模型，可按场景快速检索适配的模型思路","侧重落地实践，搭配大量生活化与业务案例，助力建立“模型—场景”映射","降低学习门槛，少数学公式、多直观案例，兼顾初学者与工程落地需求","受众群体广泛，适配工程师、科研人员及普通读者，可迁移模型思维至实际场景"]},{id:"book-005",title:"你看起来好像……我爱你：AI的工作原理以及它为这个世界带来的稀奇古怪",author:"贾内尔·沙内",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/970/39481970/t6_39481970.jpg",wereadLink:"https://weread.qq.com/book-detail?type=1&senderVid=40710128&v=f9a32c10725a7272f9a14f9&wtheme=white&wfrom=app&wvid=40710128&scene=bottomSheetShare",link:"https://book.douban.com/subject/35407136/",tags:["人工智能","趣味科普","漫画算法"],desc:"这是一部写给普通读者的人工智能趣味科普读物。作者贾内尔·沙内结合生活化的比喻和超级可爱的漫画，深入浅出地讲解了AI的基本工作原理、实际应用及其局限性。书中通过大量幽默的AI实验与“翻车”案例，带领读者在轻松捧腹的氛围中，准确理解算法能做什么、不能做什么。",rating:4.2,highlights:["幽默可爱的漫画导览：用插图和通俗语言将“深度学习”“神经网络”等抽象概念可视化","丰富的趣味实验案例：通过精选的AI“翻车”故事，直观揭示算法背后的逻辑与潜在偏差","客观建立AI认知：在展示AI强大能力的同时，明确指出其在语境理解和处理模糊信息时的短板"]},{id:"book-006",title:"AI经济：机器人时代的工作、财富和社会福利",author:"罗杰·布特尔",cover:"https://cdn.weread.qq.com/weread/cover/30/YueWen_38229387/t6_YueWen_38229387.jpg",wereadLink:"https://weread.qq.com/web/reader/653320207247558b65332f5#outline?noScroll=1",link:"https://book.douban.com/subject/35433060/",tags:["人工智能","经济学","社会学","未来趋势"],desc:"本书由知名经济学家罗杰·布特尔撰写，聚焦AI与机器人技术对经济和社会的深远影响。作者拨开艰涩的科技术语，从经济增长、通货膨胀及财富分配等宏观视角，理性剖析AI革命将如何重塑我们的工作、教育与休闲方式，以乐观的姿态为迎接未来的社会变革指明路径。",rating:4.1,highlights:["宏观经济视角解析：深入探讨AI对经济增长、通货膨胀、财富与权力分配的真实影响","全景式社会洞察：全面检视机器人时代下，人类教育体系、工作模式与休闲形态的深刻变革","理性乐观的未来指南：拒绝技术恐慌，为个人与社会在变迁的世界中提供清晰可行的应对计划"]}],Ie=[{id:"book-007",title:"做对产品",author:"阿尔贝托·索维亚",cover:"https://cdn.weread.qq.com/weread/cover/53/YueWen_40877841/t6_YueWen_40877841.jpg",wereadLink:"https://weread.qq.com/web/reader/254322a0726fbf1125472c9#outline?noScroll=1",link:"https://book.douban.com/subject/35607961/",tags:["产品思维","创业","商业方法论"],slogan:"为什么有些产品注定失败，有些产品却能大获成功？来自谷歌与斯坦福的产品工具和产品战术。",desc:"谷歌首任产品总监阿尔贝托·索维亚结合在谷歌、斯坦福的实战经验与自身代价高昂的创业失败经历，总结出的一套防败手册。书中揭示了新产品高达90%的“市场失败律”，并创新性地提出了“预型”（Pre型）理念，指导团队在正式开发前，以极低的成本和真实数据快速验证关键假设，确保把创意打磨成“正确的它”。",rating:4.8,highlights:["揭示残酷的市场失败律：正视90%新产品必然失败的商业常态，并以此倒推破局的实战方法论","首创“预型”（Pre型）概念：提供8大测试工具，主张用极低成本和小规模试错快速逼近正确的产品形态","强调真实数据驱动决策：辅以特斯拉、谷歌等完整案例回溯，教导团队将决策建立在客观证据而非主观直觉之上"]},{id:"book-009",title:"俞军产品方法论",author:"俞军",cover:"https://cdn.weread.qq.com/weread/cover/47/YueWen_28165041/t6_YueWen_28165041.jpg",wereadLink:"https://weread.qq.com/web/reader/1cc3252071adc3b11cc0162#outline?noScroll=1",link:"https://book.douban.com/subject/34907971/",tags:["产品思维","产品经理","互联网","方法论"],desc:"“百度贴吧之父”俞军二十余年产品实践与思考的系统总结。本书将产品经理定义为“以科学方法研究人性并转化为商业方案”的交叉学科，深入解析了用户模型、交易模型和决策模型三大核心框架，为产品人提供了一套在不确定环境中权衡多方利益的实战指南。",rating:4.4,highlights:["沉淀二十年行业经验：从广为流传的“PM12条”到系统化的产品哲学，展现顶尖产品经理的认知迭代史","三大核心模型拆解：深度剖析用户模型与交易模型，指导如何通过让交易发生来创造“有利可图”的真实用户价值","兼顾科学与人文视角：强调批判性思维的运用，并清晰梳理了从新人到顶尖大牛的能力进阶路径"]},{id:"book-016",title:"策略产品经理：模型与方法论",author:"青十五",cover:"https://cdn.weread.qq.com/weread/cover/31/cpplatform_gheeqe7hjb2czyzthzf5nm/t6_cpplatform_gheeqe7hjb2czyzthzf5nm1735654872.jpg",wereadLink:"https://weread.qq.com/web/reader/4de32800813ab98d5g01286b#outline?noScroll=1",link:"https://book.douban.com/subject/35218721/",tags:["产品经理","策略产品","算法思维"],desc:"本书围绕“策略产品经理”这一复合角色，系统性地构建了从理念到实践的完整知识框架。作者从机器学习理论与经济学视角出发，结合推荐、搜索、广告、风控等核心业务场景，深入浅出地讲解了函数建模与策略应用，并对策略产品经理的核心能力与团队建设给出了详尽指导。",rating:3.9,highlights:["系统化的角色认知建构：清晰界定策略产品经理的时代背景、职责边界与工作内容，为从业者夯实概念基础","跨学科的模型与业务结合：利用机器学习的函数方法论与经济学理论，深度剖析推荐、搜索、广告、风控及定价等真实业务场景的解法","硬核算法的通俗化解析：深入浅出地拆解机器学习本质、常见算法及深度学习前沿技术，帮助产品经理真正理解策略背后的技术支撑","可落地的团队建设指南：全面拆解数据分析、沟通与项目管理等核心能力项，并针对不同产品生命周期提供策略团队的组建思路"]},{id:"book-008",title:"创造：用非传统方式做有价值的事",author:"托尼·法德尔",cover:"https://cdn.weread.qq.com/weread/cover/53/cpPlatform_tzdqT27m3vyaHnX5o8Vbwk/t6_cpPlatform_tzdqT27m3vyaHnX5o8Vbwk.jpg",wereadLink:"https://weread.qq.com/web/reader/13832ac0813ab725fg018645#outline?noScroll=1",link:"https://book.douban.com/subject/36071759/",tags:["产品思维","管理学","创业"],desc:"本书是iPod、iPhone、Nest等爆款产品幕后推手托尼·法德尔30余年职业经历的智慧结晶。作者毫无保留地分享了他在产品设计、团队管理、职业选择和公司经营等方面的“非传统”方法论，帮助读者在各自的领域内刻意练习创造力，做真正有价值的事。",rating:4.9,highlights:["源自顶级创新者的实战经验：连续打造iPod、iPhone等划时代产品的亲历复盘与真实反面教训","覆盖从个人到公司的完整路径：系统解答职业选择、产品设计、团队管理与企业经营等核心问题","提供可复制的“非传统”方法论：强调“亮点思维”与持续复盘，教导读者以反常规的视角刻意练习创造力"]},{id:"book-010",title:"产品思维",author:"刘飞",cover:"https://cdn.weread.qq.com/weread/cover/56/YueWen_25568738/t6_YueWen_25568738.jpg",wereadLink:"https://weread.qq.com/web/reader/38332ce0718625e23831fe7#outline?noScroll=1",link:"https://book.douban.com/subject/33456375/",tags:["产品思维","产品经理","个人成长","互联网"],desc:"实战派产品经理刘飞结合在一线大厂的丰富经验，围绕产品人如何实现能力跃迁展开的底层能力指南。全书掰开揉碎地讲解了认知盲点与实践痛点，通过“认知用户”“创造价值”和“产品落地”三大核心板块，系统拆解了从建立用户模型、高质量决策到快速迭代验证的完整产品方法论。",rating:4.2,highlights:["三大核心板块系统拆解：完整覆盖“认知用户”“创造价值”与“产品落地”的产品闭环","直击痛点的一线实战经验：毫无保留地分享实战中新手迫切需要却难以获取的隐性知识","聚焦底层能力与思维升维：不仅教授落地方法，更注重决策质量与思维模式的跃迁"]},{id:"book-011",title:"产品思维：创新设计的六条法则（全彩）",author:"张印帅",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/253/26687253/t6_26687253.jpg",wereadLink:"https://weread.qq.com/web/reader/a823297071973715a8202b0#outline?noScroll=1",link:"https://book.douban.com/subject/34859540/",tags:["产品设计","创新思维","方法论","设计灵感"],desc:"本书围绕作者张印帅多年产品设计实践总结出的6条创意公式展开，旨在帮助读者系统化地获取设计灵感并解决创新难题。全书通过大量经典案例，详细解析了从发散思考到重组创新的全过程，并在最后提供了从需求到草图再到最终方案的完整项目落地演示。",rating:4,highlights:["提炼6条实用的创新设计公式：将发散思考与重组创新系统化，打造可复用的设计灵感库","丰富的经典设计案例解析：详细展示“问题+方法”、“1+1>2”等法则在真实产品设计中的应用","呈现从需求到方案的落地全流程：通过综合案例演示概念打磨与草图设计的实战过程"]}],We=[{id:"book-012",title:"小而美：持续盈利的经营法则",author:"萨希尔·拉文吉亚",cover:"https://cdn.weread.qq.com/weread/cover/91/cpplatform_vl4abrrrqgxnry833gcrtt/t6_cpplatform_vl4abrrrqgxnry833gcrtt1677578056.jpg",wereadLink:"https://weread.qq.com/web/reader/02932980813ab7a43g012e77#outline?noScroll=1",link:"https://book.douban.com/subject/36280425/",tags:["创业","商业模式","极简主义"],desc:"本书打破了硅谷盲目追求“独角兽”的扩张迷思，聚焦于“规模不是唯一出路”的商业现实。作者结合创立Gumroad的亲身经历，提出了“极简创业经营”理念。全书指导创业者与管理者如何通过从社区切入、聚焦核心能力、精简团队等方式，用最少的资源打造出不仅能活下去，而且还能持续盈利的“慢公司”。",rating:5,highlights:["颠覆传统的扩张迷思：提出盈利至上而非规模至上，将持续赚钱和实际利润作为衡量企业成功的核心标准","可落地的极简法则：总结出“越少越好”“瞄准前100个客户”等7条创业清单，构建从定位、产品到销售的完整闭环","社区驱动的商业逻辑：提倡从虚拟社区入手，以“贡献-创作-教学”的方式低成本验证产品形态并获取早期信任","打造高韧性的“慢公司”：结合疫情与远程办公背景，展示如何通过精简组织和分布式协作，在不确定的时代保持稳定的现金流"]},{id:"book-013",title:"做难而正确的事：进步最快的方式",author:"尤里·莱文",cover:"https://cdn.weread.qq.com/weread/cover/53/cpplatform_bunxjyygj8m9stnwcgwqqk/t6_cpplatform_bunxjyygj8m9stnwcgwqqk1728876401.jpg",wereadLink:"https://weread.qq.com/web/reader/aa032fb0813ab9461g018406#outline?noScroll=1",link:"https://book.douban.com/subject/37054102/",tags:["创业","产品思维","商业管理"],desc:"Waze联合创始人尤里·莱文写给创业者和管理者的行动指南。作者结合连续打造两家估值超10亿美元公司的实战经验，提出“先做难事、再做正确事”的核心哲学。全书通过13个阶段的系统拆解，指导读者如何寻找真正的用户痛点、构建高价值产品，并在不确定的环境中通过不断复盘实现跨越式成长。",rating:4.9,highlights:["世界级创业者的实战复盘：连续打造两家独角兽公司的创始人亲授，提供极具可信度的第一手商业洞察与落地经验","践行“难而正确”的核心哲学：强调不追逐短期热点，而是去解决效率极低却被忽视的痛点，以此建立坚实的商业护城河","覆盖从0到1的全周期指南：系统拆解从寻找痛点、产品构建、融资运作到团队管理的13个关键阶段，提供可操作的行动清单","直面失败的心理韧性建设：不回避挫折，将“从错误中学习”提炼为核心方法，为身处高压环境的读者提供情感共鸣与心理支持","广泛的跨场景应用价值：书中给出的决策工具不仅适用于初创团队，同样能为大公司内部创新及个人职业认知升级提供指导"]},{id:"book-015",title:"创新公司：皮克斯的启示",author:"艾德·卡特姆",cover:"https://cdn.weread.qq.com/weread/cover/20/YueWen_814380/t6_YueWen_814380.jpg",wereadLink:"https://weread.qq.com/web/reader/2ef329605c6d2c2efeeb70d#outline?noScroll=1",link:"https://book.douban.com/subject/26314955/",tags:["创新思维","组织文化","企业管理"],desc:"皮克斯联合创始人艾德·卡特姆结合《玩具总动员》《机器人瓦力》等经典动画的幕后制作故事，深度揭示了皮克斯如何长期保持创意领先的秘密。本书不仅详述了皮克斯从初创到壮大的历程，更抽丝剥茧地解析了其在团队文化、跨部门协作、人才培养和允许失败等方面的独特创意管理机制，为各类组织提供了可复制的创新指南。",rating:4.5,highlights:["揭秘“皮克斯奇迹”背后的管理哲学：通过14部经典动画的真实幕后故事，展示创意从无到有、再到票房口碑双赢的全过程","深度解析创新土壤的搭建：阐述如何通过允许失败的文化、流程设计和激励机制，将“不断推动创新”彻底融入公司DNA","提供跨行业可复用的管理工具：总结项目立项、跨部门协作与风险控制的具体做法，为不同规模和行业的企业提供落地的实战模板"]},{id:"book-017",title:"重来：更为简单的商业思维",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/1/YueWen_635904/t6_YueWen_635904.jpg",wereadLink:"https://weread.qq.com/web/reader/0363228059b4000363b29e9#outline?noScroll=1",link:"https://book.douban.com/subject/5320866/",tags:["商业思维","创业","企业管理","极简主义"],desc:"37signals联合创始人基于十年创业实战经验，写给职场人与创业者的极简商业法则。本书摒弃了传统的MBA术语与复杂的商业教条，以“辛辣、直接、靠谱”的语言，颠覆了关于项目管理、人才招聘、产品设计与企业文化的常规认知，教导读者如何在真实的商业世界中“做更少，但创造更多价值”。",rating:4.3,highlights:["颠覆传统的极简商业哲学：反叛复杂的商业教条，主张“做更少，创造更多”，通过最小可行步骤降低试错成本并快速迭代","源自37signals的十年实战精髓：覆盖从项目管理、产品设计到市场营销的完整链条，提供不讲废话、拿来即用的行动指南","重塑职场与团队管理的认知：提出诸多务实且反常规的观点（如严苛的简历筛选标准），打造基于信任与结果导向的高效团队","适用面极广的实操手册：无论是寻求突破的精英企业家、小团队创业者，还是渴望提升工作效率的普通职场人，都能直接对照落地"]},{id:"book-018",title:"重来2：更为简单高效的远程工作方式",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/38/YueWen_635721/t6_YueWen_635721.jpg",wereadLink:"https://weread.qq.com/web/reader/46b3220059b34946b517012#outline?noScroll=1",link:"https://book.douban.com/subject/25861795/",tags:["企业管理","远程工作","工作方式","团队协作"],desc:"Basecamp（原37signals）创始人基于自身团队多年的全球分布式协作经验，为企业和个人提供的一套远程工作“思想升级包”。本书直面行业争议，破解了“创新只能面对面”及“文化会淡化”等常见误区，并系统提供了借助异步沟通、协作工具与流程设计来打造高效、人性化远程团队的实战指南。",rating:4.1,highlights:["提供思想层面的“升级包”：直击传统办公室痛点，用真实数据与反例打破关于远程办公的固有认知误区","第一手的分布式团队管理经验：Basecamp创始人亲授，展示如何突破地域限制招募顶尖人才，并保持健康、高效的工作节奏","系统可落地的工具与流程方法：详述如何利用协作工具降低管理成本，让远程工作从“特殊福利”真正转变为可持续的主流组织模式"]},{id:"book-019",title:"重来3：做得更少，但赚得更多",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/62/cpplatform_tqth8pnlq8h9ing5uciwhi/t6_cpplatform_tqth8pnlq8h9ing5uciwhi1748502715.jpg",wereadLink:"https://weread.qq.com/web/reader/b6a32ed0813ab9fb5g015181#outline?noScroll=1",link:"https://book.douban.com/subject/37367276/",tags:["工作方式","反内卷","企业文化"],desc:"Basecamp创始人带来的“反内卷”与“反过度忙碌”的管理指南。作者基于近20年带领54人团队服务全球10万家企业的成功经验，直击现代企业盲目扩张、无效加班等八大症结。全书主张以“冷静”颠覆“忙碌”文化，指导企业和个人通过40小时工作制、拒绝KPI和异步沟通等极简方式，在不牺牲生活质量的前提下实现健康发展与持续盈利。",rating:4.2,highlights:["以“冷静”颠覆“忙碌”文化：倡导高效比高产更重要，用稳定的节奏替代疯狂加班的内卷常态","直击现代企业八大症结：深度诊断快速扩张、无效加班、会议泛滥与目标绑架等痛点，提供对症下药的思路","提供四大可落地的管理工具：引入40小时工作制、拒绝硬性KPI、推行非实时沟通，坚持利润优先于规模","源自Basecamp的真实反向案例：展示“小而美”团队如何通过“少做但做好”的策略，跑赢新经济并保持高利润"]}],Ye=[{id:"book-024",title:"要事第一",author:"史蒂芬·柯维 / 罗杰·梅里尔 / 丽贝卡·梅里尔",cover:"https://cdn.weread.qq.com/weread/cover/57/yuewen_33091834/t6_yuewen_330918341686208943.jpg",wereadLink:"https://weread.qq.com/web/reader/f523268071f8f0faf52b806#outline?noScroll=1",link:"https://book.douban.com/subject/1028372/",tags:["时间管理","自我管理","经典思维"],desc:"作为《高效能人士的七个习惯》的延伸与加强版，本书提出了颠覆传统的“第四代时间管理”方法。作者强调，比提升做事速度（时钟）更重要的是找准人生的方向（罗盘）。全书指导读者通过自我意识的觉醒，以原则和价值观为中心，将精力聚焦于“重要而不紧急”的长期目标上，从而在繁忙的现代生活中真正做到“要事第一”。",rating:4.5,highlights:["从“时钟”到“罗盘”的思维跨越：打破一味追求“更快、更努力”的传统效率迷思，确立人生方向优先的哲学","经典的四象限时间管理矩阵：引导读者跳出紧急事务的“救火圈”，将核心精力倾注于第二象限（重要但不紧急）的高价值事务中","生动的“大石块”优先法则：通过“先放石头再倒水”的直观比喻，确保关键目标与核心使命在碎片化日程中得到绝对的优先落实","以原则为中心的自我驱动框架：不仅提供日程安排工具，更通过唤醒良知，帮助读者在工作、家庭等多元角色中实现真正的平衡与统合综效"]},{id:"book-025",title:"清单革命",author:"阿图·葛文德",cover:"https://cdn.weread.qq.com/weread/cover/12/cpPlatform_rudGZN3LDW5m9FBYr7rMBA/t6_cpPlatform_rudGZN3LDW5m9FBYr7rMBA.jpg",wereadLink:"https://weread.qq.com/web/reader/18332f80813ab7292g010065#outline?noScroll=1",link:"https://book.douban.com/subject/27168564/",tags:["管理学","认知科学","工作效率"],desc:"这是一部针对现代复杂世界所撰写的“认知防护手册”。作者阿图·葛文德通过医疗、建筑、投资等高风险领域的真实案例，揭示了人类在海量信息与高压环境下极易出现的判断疏忽。书中提出了“权力下放、简单至上、人为根本、持续改善”四大原则，指导读者将最佳实践外化为可操作的清单，从而在复杂系统中构建一道低成本、高回报的安全防线。",rating:4.6,highlights:["直面复杂时代的认知瓶颈：揭示在海量信息流中，清单如何作为“认知防护网”弥补人类记忆力与注意力分配的先天不足","提供兼具理念与落地的四大原则：通过“权力下放、简单至上、人为根本、持续改善”，构建一套可复用的清单设计哲学","扎实的医学实证背书：以手术感染率骤降等真实临床数据为支撑，证明清单思维在医疗、建筑、投资等高风险领域的跨行业普适性","简洁而具力量的流程创新：强调清单服务于人而非取代人，是帮助专业人士在高压环境下将复杂环节显性化、流程化的必备工具"]},{id:"book-020",title:"别让猴子跳回背上",author:"威廉·安肯三世",cover:"https://cdn.weread.qq.com/weread/cover/69/cpPlatform_7fFoBQ7dtqgABGSTskpJSN/t6_cpPlatform_7fFoBQ7dtqgABGSTskpJSN.jpg",wereadLink:"https://weread.qq.com/web/reader/9fc32010813ab7291g0196bd#outline?noScroll=1",link:"https://book.douban.com/subject/36103994/",tags:["时间管理","领导力","项目管理"],desc:"这是一部以“猴子”生动隐喻任务与责任的经典管理学著作。作者威廉·安肯三世深刻剖析了管理者常被琐事淹没的时间困境，并提出系统化的“猴子管理法”。通过明确任务归属、责任递减与有效授权，指导管理者如何把不属于自己的“猴子”交出去，从而释放精力专注于最高价值的战略思考，实现团队与个人的共同成长。",rating:4.3,highlights:["生动有趣的“猴子”隐喻：将枯燥的责任划分与任务流转具象化，直击职场中“忙碌却低效”的痛点","实用高效的“三步交接”法则：通过明确期望、授予资源与约定检查点，彻底避免下属的待办任务重新跳回自己背上","重塑时间管理与人才培养体系：指导高层放权、中层辅导、基层自发，将企业的成功真正建立在员工自主性的提升之上"]}],Te=[{id:"book-022",title:"学会提问（原书第12版）",author:"尼尔·布朗 / 斯图尔特·基利",cover:"https://cdn.weread.qq.com/weread/cover/68/YueWen_39980443/t6_YueWen_39980443.jpg",wereadLink:"https://weread.qq.com/web/reader/e6832d3072620d9be68aabf#outline?noScroll=1",link:"https://book.douban.com/subject/35513147/",tags:["批判性思维","逻辑学","认知科学","经典书"],desc:"这是一部培养批判性思维的经典实战指南。作者尼尔·布朗与斯图尔特·基利结合长期的教学与研究实践，提供了一套系统化、可操作的提问流程。全书通过大量真实情境案例，教导读者如何在信息泛滥的时代识别隐含假设、区分事实与观点，用高质量的“判断性问题”看透事物本质，从而做出更理性的决策。",rating:5,highlights:["聚焦批判性思考的核心能力：系统拆解“如何提出好问题”的思维过程，帮助读者在复杂信息中迅速抓住本质","提供可落地的提问与评估框架：从背景信息、关键概念到逻辑推理，构建一条完整的判断性问题链条","丰富的真实场景应用示范：结合课堂讨论、写作、日常沟通与职场决策等多元场景，让理论能“立即上手”","打造实用的思考检查单：不仅讲透“提问的价值”，更提供可直接转化为日常习惯的思维检查表，助你有效避开认知陷阱"]},{id:"book-026",title:"如何阅读一本书",author:"莫提默·J. 艾德勒 / 查尔斯·范多伦",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/810/23723810/t6_23723810.jpg",wereadLink:"https://weread.qq.com/book-detail?type=1&senderVid=40710128&v=272326407169ff22272934f&wtheme=white&wfrom=app&wvid=40710128&scene=bottomSheetShare",link:"https://book.douban.com/subject/1013208/",tags:["阅读方法","思维训练","经典"],desc:"阅读领域的“元方法”指南。作者艾德勒与范多伦将阅读划分为基础阅读、检视阅读、分析阅读与主题阅读四个进阶层次，并强调阅读是一项主动的思考活动。本书不仅提供了从“快速略读”到“系统拆解论点”的实操技巧，更致力于通过提问、归纳与批判，将阅读转化为训练理解力、批判力与终身学习的终极工具。",rating:5,highlights:["构建系统的四级阅读框架：从检视阅读到分析阅读再到主题阅读，为读者提供了一套从入门到精通的进阶路径","强调“主动与批判”的阅读观：拒绝被动接收，教导读者如何通过提问、归纳与反思，真正将作者的洞见转化为自己的认知","高效的检视阅读技巧：提供如何在有限时间内通过看目录、挑重点等方式，快速筛选并判断书目价值的核心能力","跨时代的经典效能：自1940年问世以来长盛不衰，其对逻辑拆解与深度思考的指导，是提升所有知识吸收效率的“总开关”"]},{id:"book-023",title:"检索力：打破信息差的科学方法",author:"龚芙蓉",cover:"https://cdn.weread.qq.com/weread/cover/58/cpplatform_feaxemubry47bnkzylqzwv/t6_cpplatform_feaxemubry47bnkzylqzwv1716796541.jpg",wereadLink:"https://weread.qq.com/web/reader/9de32810813ab8e00g018130#outline?noScroll=1",link:"https://book.douban.com/subject/36899979/",tags:["信息素养","检索能力","思维认知"],desc:"本书聚焦“检索力”这一核心技能，旨在帮助读者在信息过载的时代主动掌握“逆风而行”的搜索能力。作者龚芙蓉结合二十余年实践经验，用生动的人文与诺贝尔奖级科学案例，将枯燥的检索工具化为有趣的故事。不仅教授非线性、迭代式的搜索技巧，更致力于重塑读者的探究精神，赋予其走出“信息茧房”的勇气。",rating:4.2,highlights:["丰富的跨学科趣味案例驱动：用“张冠李戴的马克思名言”等生动故事，将枯燥繁琐的检索步骤转化为轻松的探索之旅","重塑非线性与迭代的搜索思维：打破按部就班的线性流程误区，建立以耐心与热情驱动的多轮迭代搜索心态","直击科研与职场的实用痛点：提供可快速落地的实操指南，帮助读者切实缩短科研周期、大幅提升工作效率","兼顾技能训练与人文底色：在教授如何利用和创造信息的同时，注重培养读者的信息素养与打破信息差的认知勇气"]},{id:"book-027",title:"原则",author:"瑞·达利欧",cover:"https://cdn.weread.qq.com/weread/cover/23/YueWen_921568/t6_YueWen_921568.jpg",wereadLink:"https://weread.qq.com/web/reader/848324405e0fe08483ab6a4#outline?noScroll=1",link:"https://book.douban.com/subject/27608239/",tags:["投资","方法论","自我管理"],desc:"桥水基金创始人瑞·达利欧总结四十余年投资、管理与人生经验的集大成之作。作者提出将生活和工作像机器一样系统化，确立了“极度求真”与“极度透明”两大基石，并通过“创意择优”与“基于可信度的决策机制”来迭代思维。书中包含500多条可操作原则，旨在帮助读者在复杂世界中保持开放心态、看清现实，并做出最优决策。",rating:4.8,highlights:["“极度求真”与“极度透明”的基石：主张诚实面对现实，通过公开决策过程来获取外部反馈，达成高效协作","创意择优与可信度加权机制：摒弃个人权威，利用数据驱动的讨论与可信度权重，在团队中选出最优方案","500余条可落地的原则清单：涵盖自我认知、投资决策、团队治理等场景，构建出一套随时可查的行动指南","系统化的“机器”思维：将生活与组织管理拆解为可维护、可迭代的系统，有效规避情绪化干扰"]},{id:"book-031",title:"价值",author:"张磊",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/958/33577958/t6_33577958.jpg",wereadLink:"https://weread.qq.com/web/reader/5be32a3072005be65bef195#outline?noScroll=1",link:"https://book.douban.com/subject/35188914/",tags:["价值投资","商业思维","创业"],desc:"高瓴资本创始人张磊首部个人及投资思想著作。全书通过回顾作者的个人求学与创业历程，系统阐释了“长期主义”与“重仓中国”的核心投资理念，并首次披露了高瓴投资的七大公式。作者将十余个典型投资案例与个人价值修养相结合，揭示了如何在不确定的商业环境中，通过坚持原则、敬畏规则与持续创新，创造长久、真实的价值。",rating:4.6,highlights:["系统构建长期主义哲学：首次系统化梳理“高瓴七大公式”，为读者提供从认知、决策到执行的价值投资实战模型","深度复盘经典实战案例：通过腾讯、货拉拉等真实商业案例，拆解如何在复杂市场中识别企业护城河与核心价值","投资之外的人文思考：延伸至教育、人才与科学观，展现作者作为顶尖投资者对社会责任与长期价值创造的深度思考","可视化的阅读体验：精选多幅手绘彩插与历史影像，将深刻的投资逻辑与企业成长叙事变得更加生动、直观"]},{id:"book-032",title:"纳瓦尔宝典",author:"埃里克·乔根森 / 纳瓦尔·拉维坎特",cover:"https://cdn.weread.qq.com/weread/cover/89/YueWen_44026191/t6_YueWen_44026191.jpg",wereadLink:"https://weread.qq.com/web/reader/e1e32b00729fc94fe1e824d#outline?noScroll=1",link:"https://book.douban.com/subject/35876121/",tags:["财富管理","个人成长","幸福哲学","思维认知"],desc:"这是一部汇集硅谷著名投资人纳瓦尔·拉维坎特过去十年关于财富与幸福思考的行动指南。全书摒弃了“致富靠运气”的传统观念，提出积累财富与幸福生活是可以通过学习掌握的技能。通过系统整理推特、播客与访谈中的智慧，本书为读者提供了如何在快速变化的科技与经济环境中，利用杠杆、发挥个人独特性，进而实现财务自由并获得持久内心满足的方法论。",rating:4.7,highlights:["将财富与幸福视为可习得的技能：打破运气论，强调通过建立杠杆、发挥个人独特性来获取非线性的回报","十年思想的系统化编纂：将碎片化的互联网智慧提炼为成体系的方法论，打造了数字时代个人的“行动指南”","兼顾财富积累与内心满足：不仅教导如何高效赚钱，更深入探讨如何通过阅读、冥想与长期主义，在职场成功中寻找内心的宁静","极具实操性的工具箱：提供如深度思考、刻意练习、构建个人品牌等具体路径，帮助读者在碎片化时代快速实现自我迭代"]},{id:"book-028",title:"优秀的绵羊",author:"威廉·德雷谢维奇",cover:"https://cdn.weread.qq.com/weread/cover/78/cpplatform_3ncoeekcuaectlzj9hf5nr/t6_cpplatform_3ncoeekcuaectlzj9hf5nr1744626569.jpg",wereadLink:"https://weread.qq.com/web/reader/1c0324c0813ab9d91g010aba#outline?noScroll=1",link:"https://book.douban.com/subject/26747208/",tags:["博雅教育","社会学","个人成长"],desc:"耶鲁大学前教授威廉·德雷谢维奇对美国常春藤精英教育体制的尖锐批判之作。作者通过二十余年的教学观察，指出顶尖学府培养出一群虽然聪明、优秀，但普遍焦虑、缺乏目标感且唯命是从的“优秀绵羊”。本书呼吁社会重新审视教育的本质，摆脱对名校与高薪的盲目崇拜，回归博雅教育，鼓励学生探索内在驱动力与自我价值。",rating:4.2,highlights:["犀利剖析精英教育弊端：直击常春藤体制培养出“聪明但没有灵魂”的学生的现实，反思唯名校与成绩论的单一评价体系","回归博雅教育的核心价值：批判应试化倾向，提倡给予学生更多探索、失败与重塑自我的空间，强调教育的本质在于帮助个体找到自我","提供挣脱外部期待的认知框架：既为迷茫的年轻人指明如何重建内在动力，也给家长和教育者敲响了关于“成功定义”的警钟","跨文化背景下的教育共鸣：尽管以美国精英教育为例，其对“教育内卷”与“缺乏目标感”的批判，引发了全球高压教育环境下的深层共鸣"]},{id:"book-029",title:"把自己变成稀缺资产",author:"何思平",cover:"https://cdn.weread.qq.com/weread/cover/98/cpplatform_ncqzerh3wdywn9mlc9cjna/t6_cpplatform_ncqzerh3wdywn9mlc9cjna1694085413.jpg",wereadLink:"https://weread.qq.com/web/reader/2fe326f0813ab821fg0146df#outline?noScroll=1",link:"https://book.douban.com/subject/36513648/",tags:["个人成长","思维认知","自我管理","投资理财"],desc:"这是一个将“人生”视作“公司”来经营的实战指南。作者何思平结合自身从严重口吃到演讲冠军、再到连续创业成功的跨越式经历，提出了“人生有限公司”的经营哲学。全书通过“生命立方体”模型，从认知、实践、精力管理三个维度拆解了如何通过持续输出与跨界学习，将自己打造为具有高壁垒、不可替代的“稀缺资产”。",rating:4.2,highlights:["提出“人生有限公司”经营哲学：倡导将自己视作最值得投资的上市公司，通过不断提升认知与能力壁垒，把“人生”经营成稀缺资产","系统化的“生命立方体”模型：从认知、实践、精力管理三个维度构建个人成长闭环，解决成长中的无序感与碎片化难题","聚焦个人核心竞争力：深度拆解认知力、学习力与共情力等稀缺能力的获取路径，教导读者在不同场景中通过实战验证自我价值","高度可操作的工具清单：摒弃鸡汤式说教，将自我成长拆解为具体的习惯改造与复盘清单，帮助读者在痛点与高光时刻都能通过反馈机制实现自我迭代"]},{id:"book-030",title:"成长第二曲线：跨越S型持续成长",author:"查尔斯·汉迪",cover:"https://cdn.weread.qq.com/weread/cover/65/YueWen_39427437/t6_YueWen_39427437.jpg",wereadLink:"https://weread.qq.com/web/reader/15d32ed072599d6d15daa86#outline?noScroll=1",link:"https://book.douban.com/subject/35531368/",tags:["管理学","个人成长","人生哲学","未来趋势"],desc:"管理大师查尔斯·汉迪的“人生长跑指南”。本书通过书信体形式，深度探讨了在数字时代背景下个人如何识别并跨越“第二曲线”。汉迪指出，无论组织还是个人，都受制于S型增长曲线，只有在第一曲线衰退前主动布局新的增长点，并保持内在价值的独立与进化，才能在不断变化的环境中获得持续且有意义的成长。",rating:4.5,highlights:["百岁管理大师的人生体悟：以书信体浓缩一生管理研究与个人经验，提供了从时间维度审视工作、学习与生活的全景视角","“第二曲线”理论的全面进阶：深刻揭示组织与个人的兴衰规律，教导读者如何在第一曲线的巅峰前就主动布局新的增长引擎","全场景下的持续进化方案：将第二曲线思维跨界应用于教育、职业规划、婚姻与家庭中，强调“变化才是常态”，鼓励持续自我重塑","面向Z世代的清醒处方：在科技高歌猛进的数字时代，提醒后人重视诚信、协作等软实力，保持独立判断，避免在算法与焦虑中迷失自我"]}],Me=[{id:"book-033",title:"枪炮、病菌与钢铁",author:"贾雷德·戴蒙德",cover:"https://cdn.weread.qq.com/weread/cover/99/YueWen_42766048/t6_YueWen_42766048.jpg",wereadLink:"https://weread.qq.com/web/reader/843329f0728c8ee08434fb1#outline?noScroll=1",link:"https://book.douban.com/subject/1813841/",tags:["人类历史","地理决定论","社会学","跨学科"],desc:"一部重新定义人类历史发展的宏大著作。作者贾雷德·戴蒙德通过生物学、地理学、人类学等多学科交叉视角，强有力地反驳了“种族决定论”和“西方文明优越论”。他提出，决定文明兴衰的关键并非种族，而是环境因素、地理格局以及动植物驯化的差异，这些自然条件的偶然性最终导致了技术、免疫力和权力结构的差异，从而重塑了现代世界的全球版图。",rating:4.8,highlights:["颠覆性的历史观：以环境与地理差异解释文明兴衰，有力冲击了长期流行的西方文明优越论，提供了理解人类历史的全新视角","跨学科的综合研究框架：巧妙融合生物学、地理学、历史学、社会学等多学科知识，重建人类文明演进的逻辑路径","系统揭示历史演变的机制：深入剖析农业、病菌传播与技术权力如何形成相互强化的循环，展示了文明发展背后复杂的资源互动","具备公共思想者的宏观视野：将严谨的科学研究转化为对人类命运与社会发展的深刻反思，为现代人理解自身在历史长河中的位置提供了绝佳参照"]},{id:"book-034",title:"中国社会各阶层分析",author:"梁晓声",cover:"https://cdn.weread.qq.com/weread/cover/0/yuewen_42682684/t6_yuewen_426826841728383400.jpg",wereadLink:"https://weread.qq.com/web/reader/085326e0728b493c085ade1#outline?noScroll=1",link:"https://book.douban.com/subject/35485315/",tags:["社会观察","阶层研究","现实主义"],desc:"茅盾文学奖得主梁晓声基于多年社会观察的现实题材力作。作者将快速变迁的中国社会划分为不同阶层，以平民视角细腻描摹各群体的生存状态、心理困境与阶层焦虑。全书不追求纯学术的枯燥分析，而是通过文学化的社会观察，勾勒出一幅当代中国社会的“浮世绘”，引导读者在时代坐标中找准定位，理解社会变迁背后的结构性逻辑。",rating:4.3,highlights:["平民视角下的社会“浮世绘”：通过细腻的笔触勾勒各阶层的生存逻辑与心理画像，帮助读者直观理解宏观社会结构","兼具现实痛点与精神深度：不仅呈现物质生活的差异，更深刻剖析阶层焦虑背后的价值困境，为理解当代社会提供人文参照","时代脉络中的命运书写：将个体命运置于历史事件的宏观背景中考察，展现了半个世纪以来社会变迁的深层脉络","文学笔触下的社会关怀：作为茅盾文学奖得主，作者通过富有故事性的叙事，既保留了批判性，又让文本充满了温暖的人文温度"]},{id:"book-021",title:"把自己作为方法",author:"项飙 / 吴琦",cover:"https://cdn.weread.qq.com/weread/cover/81/cpPlatform_3300003962/t6_cpPlatform_3300003962.jpg",wereadLink:"https://weread.qq.com/web/reader/d7532f80813ab680cg012708#outline?noScroll=1",link:"https://book.douban.com/subject/35092383/",tags:["社会学","访谈录","思想方法"],desc:"两代学人项飙与吴琦历时三年、跨越五地的深度对话实录。本书从项飙的个人经验切入，探讨了中国社会近半个世纪的变迁、全球化与民粹主义等宏大议题。在自我泛滥与思想受困的时代，作者提出“把自己作为方法”，指导读者如何在全球化年代重新定位自我、重建“附近”，并在个人体验与宏观叙事之间搭建起思考与行动的桥梁。",rating:4.6,highlights:["以“自我”切入回应宏大议题：示范如何在个人真实体验与全球化、社会变迁等宏观叙事之间搭建认知的桥梁","提供重建“附近”的行动指南：在自我泛滥的潮流中，指导读者如何审视现实，创造性地建设身边的小世界","兼具学术深度与极高可读性：将人类学、社会学的深刻理论洞察，巧妙融入生动的田野故事与双人生活化对谈中","跨越三年的思想碰撞：历时三年、跨越五地的持续对话结集，反思知识生产与公共讨论的真实处境"]}],$e=[{id:"book-035",title:"百岁人生：长寿时代的生活和工作",author:"琳达·格拉顿 / 安德鲁·斯科特",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/860/22902860/t6_22902860.jpg",wereadLink:"https://weread.qq.com/web/reader/30c323e0715d784c30c1e1b#outline?noScroll=1",link:"https://book.douban.com/subject/30245089/",tags:["人生规划","长寿时代","社会学"],desc:"基于伦敦商学院的经典课程，作者琳达·格拉顿与安德鲁·斯科特提出，面对一半概率活到100岁的长寿时代，传统的“学习-工作-退休”三段式人生模式已彻底失效。本书指导读者如何重新设计人生，通过拥抱多阶段人生模型，在更长的生命周期中平衡工作、学习与休闲，并强调在财务资产之外，更要注重健康、友谊与知识等“无形资产”的持续投入与增值。",rating:4.3,highlights:["重构人生模式：打破传统的“三段式”生活范式，提出充满弹性的“多阶段人生”模型，让工作与学习不再是线性的重复","从关注财务到“无形资产”：除了养老金，强调健康、友谊、社交网络与心理韧性等“无形资产”才是维持长寿生活质量的核心动力","职场与转型的系统规划：提供针对长寿时代的职业设计思路，涵盖何时转型、如何投资自身、怎样应对不确定性等实战框架","社会与制度的深度洞察：探讨长寿如何冲击养老金体系、劳动力市场与企业模式，帮助个人在宏观变革中把握主动权"]},{id:"book-00043",title:"重启吧！我的健康人生",author:"兰根·查特吉",cover:"https://cdn.weread.qq.com/weread/cover/80/cpplatform_kbrswv3bm7cix2zlyo6wtx/t6_cpplatform_kbrswv3bm7cix2zlyo6wtx1716362285.jpg",wereadLink:"https://weread.qq.com/web/reader/e8a32e80813ab8de4g0191c2#outline?noScroll=1",link:"https://book.douban.com/subject/36899697/",tags:["生活方式","预防医学","身心健康","自我管理"],desc:"英国临床医生基于20多年行医经验写就。本书主张“生活方式即良药”，围绕休息、饮食、运动和睡眠四个领域设计了20个微小行动计划，帮助现代人通过低成本的习惯改变逆转慢性问题。",rating:4.6,highlights:["提出99%的健康取决于日常习惯而非医学治疗，强调整体干预","构建“4×5”微行动框架，涵盖休息、饮食、运动、睡眠四个维度的20个小改变","兼顾科学深度与极简实操，如“12小时进食窗口”、“10分钟高强度运动”","关注现代职场人痛点，提供“小投入、大回报”的可叠加身心健康投资策略"]},{id:"book-00040",title:"你是你吃出来的：吃对少生病，病了这样吃",author:"夏萌",cover:"https://cdn.weread.qq.com/weread/cover/86/YueWen_920661/t6_YueWen_920661.jpg",wereadLink:"https://weread.qq.com/web/reader/7bb32c305e0c557bbdeab81#outline?noScroll=1",link:"https://book.douban.com/subject/27590675/",tags:["饮食科普","营养学","健康管理"],desc:"前安贞医院营养科主任夏萌结合十余年临床经验写成。本书颠覆“低油低脂”误区，提出回归进化的“65%植物+35%动物”膳食配比，并针对14种常见慢病给出“四分法”饮食干预方案，帮助读者重建健康饮食观。",rating:5,highlights:["指出多数慢病源于“蛋白质缺乏式营养不良”，打破常规低油低脂迷思","提出清晰量化的“65%植物类+35%动物类”科学饮食结构","针对冠心病、高血压等14种常见慢病提供实操性极强的“四分法”菜单","源于十万+真实临床病例，强调“一日三餐才是真正的保健品”"]},{id:"book-00041",title:"你是你吃出来的2",author:"夏萌",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/883/35905883/t6_35905883.jpg",wereadLink:"https://weread.qq.com/web/reader/40532d007223e15b4052fae#outline?noScroll=1",link:"https://book.douban.com/subject/35340053/",tags:["饮食指导","科普","疾病防治"],desc:"聚焦高血压、高脂血症、糖尿病等7大常见慢病，从临床营养医学角度逐一破除诸如“血压高不能吃肉”等饮食误区，提供系统的“上游-中游-下游”疾病防控思路与个体化营养处方。",rating:4.6,highlights:["专攻7大常见慢性病，为患者提供针对性的“生病了怎么吃”个体化指导","科学辟谣，破除“血压高不能吃肉”、“胆固醇高不能吃鸡蛋”等常见误区","梳理疾病发生因果链条，帮助读者从源头找到健康干预的着力点","提供从一日三餐、运动到心态调养的具体可操作生活方式清单"]}],Ge=JSON.parse('{"title":"好书推荐","description":"读书心得、推荐书籍和阅读技巧","frontmatter":{"title":"好书推荐","date":"2024-01-01T16:00:00.000Z","description":"读书心得、推荐书籍和阅读技巧","categories":["growth"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png","permalink":"/growth/books","tags":["悦读时光","资源推荐"]},"headers":[],"relativePath":"30.悦读时光/01.好书推荐.md","filePath":"30.悦读时光/01.好书推荐.md"}'),Ne={name:"30.悦读时光/01.好书推荐.md"},De=Object.assign(Ne,{setup(r){return(b,t)=>(a(),l("div",null,[t[0]||(t[0]=x("",4)),h(k,{books:g(Be)},null,8,["books"]),t[1]||(t[1]=x("",4)),h(k,{books:g(Ie)},null,8,["books"]),t[2]||(t[2]=e("h3",{id:"_2-2-商业化",tabindex:"-1"},[n("2.2 商业化 "),e("a",{class:"header-anchor",href:"#_2-2-商业化","aria-label":"Permalink to “2.2 商业化”"},"")],-1)),t[3]||(t[3]=e("blockquote",null,[e("p",null,[n("在追逐“独角兽”和规模扩张的狂热迷思之后，真正的商业高手正在重新回归本质："),e("strong",null,"盈利才是企业的核心护城河。"),n(" 这套书单为我们揭示了一种"),e("strong",null,"更具韧性的商业路径——“小而美”的极简经营"),n("。它教导我们如何拒绝低效的内卷与忙碌，通过“做更少但创造更多价值”的思维，打造在不确定时代下依然能保持稳定现金流的“慢公司”。")]),e("p",null,[e("strong",null,"商业的成功，往往源于敢于挑战“难而正确”的事"),n("。从皮克斯如何建立允许失败的创意土壤，到 Waze 如何通过解决被忽视的痛点实现跨越式成长，这些世界级案例证明了：卓越的组织不仅需要极简的流程与高效的分布式协作（远程办公），更需要一种“冷静”的文化，将利润置于规模之上。")])],-1)),h(k,{books:g(We)},null,8,["books"]),t[4]||(t[4]=e("h2",{id:"_3-效率与效能",tabindex:"-1"},[n("3. 效率与效能 "),e("a",{class:"header-anchor",href:"#_3-效率与效能","aria-label":"Permalink to “3. 效率与效能”"},"")],-1)),t[5]||(t[5]=e("blockquote",null,[e("p",null,[n("在信息过载与高压竞争的现代环境中，平庸与卓越的分水岭不再是做事的速度，而是"),e("strong",null,"决策的精度与责任的边界"),n("。这套书单为我们提供了一套从个人认知到组织协作的“效能防线”：首先，它"),e("strong",null,"引导我们完成从“时钟”到“罗盘”的思维跨越，打破盲目追求速度的迷思，确保将核心精力倾注在真正产生长远复利的“重要非紧急”事务之上"),n("。 真正的效能源于对复杂性的科学驾驭：")]),e("ul",null,[e("li",null,"通过“清单革命”式的认知防护，我们将最佳实践外化为可靠的防错系统，弥补人类在极端环境下的认知局限；"),e("li",null,"“猴子管理法”则以生动的视角重塑了职场协作的责任逻辑，教我们通过有效授权拒绝无谓的干扰，释放战略思考的精力；")])],-1)),h(k,{books:g(Ye)},null,8,["books"]),t[6]||(t[6]=e("h2",{id:"_4-学习与成长",tabindex:"-1"},[n("4. 学习与成长 "),e("a",{class:"header-anchor",href:"#_4-学习与成长","aria-label":"Permalink to “4. 学习与成长”"},"")],-1)),t[7]||(t[7]=e("blockquote",null,[e("p",null,[n("在信息爆炸与快速变革的时代，"),e("strong",null,"真正的成长不再是知识的被动堆砌，而是认知系统的彻底迭代"),n("。这套书单为我们构建了一个从底层思维到人生经营的闭环：")]),e("ul",null,[e("li",null,"首先，通过批判性思维与深度阅读夯实“元能力”，在泛滥的信息中识别本质，将他人的洞见转化为自己的血肉；"),e("li",null,"其次，利用“检索力”打破信息差，确保自己在任何领域都能快速获取高质量资源，掌握逆风而行的主动权。")]),e("p",null,[e("strong",null,"人生不是一场盲目的长跑，而是一场基于“原则”的精密经营"),n("。从达利欧的系统化决策，到纳瓦尔的财富与幸福逻辑，这些智者教导我们如何利用杠杆、坚持长期主义，将自己视作一家“人生有限公司”来经营。我们需要摆脱“优秀绵羊”式的被动驱动，通过识别成长的“第二曲线”，在巅峰时刻主动寻求突破，将自己打造成不可替代的稀缺资产。阅读这些经典，不仅是为了习得技能，更是为了在算法与焦虑的夹击中，重塑内心的宁静与独立判断的勇气。")])],-1)),h(k,{books:g(Te)},null,8,["books"]),t[8]||(t[8]=e("h2",{id:"_5-人文社科",tabindex:"-1"},[n("5. 人文社科 "),e("a",{class:"header-anchor",href:"#_5-人文社科","aria-label":"Permalink to “5. 人文社科”"},"")],-1)),t[9]||(t[9]=e("blockquote",null,[e("p",null,"在宏观历史与微观现实间构建认知：在碎片化与不确定性并存的时代，穿透表象、直达本质的洞察力成为必需。这套单为我们开启了两扇窗："),e("ul",null,[e("li",null,"一扇望向万年文明的宏大坐标，通过《枪炮、病菌与钢铁》的跨学科视野，拆解地理环境如何冷酷而偶然地重塑全球版图，彻底颠覆“文明优越论”的傲慢；"),e("li",null,"另一扇则照向当下社会的真实肌理，在梁晓声对各阶层生存困境的细腻描摹中，读懂大时代变革背后隐秘的结构性逻辑与阶层焦虑。")]),e("p",null,[e("strong",null,"人文思考的终极价值，在于如何将宏大叙事转化为个人的行动力量"),n("。正如项飙所倡导的“把自己作为方法”，这些著作不仅是知识的传递，更是思维的松绑。它们教导我们不再做时代的被动旁观者，而是学会在个人体验与宏观世界之间搭建桥梁，通过重建“附近”的小世界，在喧嚣中找准自我的定位。")])],-1)),h(k,{books:g(Me)},null,8,["books"]),t[10]||(t[10]=e("h2",{id:"_6-健康生活",tabindex:"-1"},[n("6. 健康生活 "),e("a",{class:"header-anchor",href:"#_6-健康生活","aria-label":"Permalink to “6. 健康生活”"},"")],-1)),t[11]||(t[11]=e("img",{src:$,style:{width:"100%","border-radius":"8px","margin-bottom":"20px"},alt:"about site background"},null,-1)),t[12]||(t[12]=e("blockquote",null,[e("p",null,[n("在面临大概率活到100岁的“长寿时代”，传统的线性人生模式正在失效。我们需要对“健康”进行一次彻底的认知重构："),e("strong",null,"健康不再仅仅是“没有疾病”，而是支撑我们跨越漫长生命周期、应对多阶段人生挑战的最核心“无形资产”"),n("。想要让这套生命系统长期平稳运行，真正的解法并不在医院的处方笺里，而是隐藏在我们每天的日常选择中。")]),e("p",null,[n("决定我们长期健康状态的，有 99 %取决于日常习惯。我们需要"),e("strong",null,"在休息、饮食、运动、睡眠这四个高频生活维度中，植入微小但杠杆率极高的改变"),n("（例如12小时进食窗口、10分钟高强度运动、睡前屏蔽数字通知等）。用最低的执行成本，置换身心状态的巨大回报。")])],-1)),h(k,{books:g($e)},null,8,["books"])]))}});export{Ge as __pageData,De as default};
+import{d as A,p as B,h as a,z as h,Y as I,s as W,g as l,y as _,v as P,i as e,W as v,x as c,F as p,t as f,S as n,T as Y,_ as C,r as j,c as T,k as M,U as x,l as g}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const $="/img/cover/health_bg.png",N={class:"book-panel__drawer"},V={class:"book-panel__header-meta"},G={class:"book-panel__title"},D={class:"book-panel__author"},F={class:"book-panel__body"},R={class:"book-panel__top-bar"},Z={class:"book-panel__top-left"},H={class:"book-panel__tags"},J={key:0,class:"book-panel__rating"},O={class:"stars"},E={key:0,viewBox:"0 0 24 24",fill:"currentColor"},K={key:1,viewBox:"0 0 24 24",class:"half-star"},Q=["id"],X=["clip-path"],U={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},ee={class:"rating-text"},te={class:"book-panel__links"},oe=["href"],ae={width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",style:{"flex-shrink":"0"}},le=["href"],re={width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",style:{"flex-shrink":"0"}},ne={class:"book-panel__section"},se={class:"book-panel__desc"},ie={key:0,class:"book-panel__section"},de={class:"book-panel__highlights"},ce=A({__name:"BookDetailPanel",props:{book:{},open:{type:Boolean},heroColor:{},tagColors:{}},emits:["close"],setup(r,{emit:b}){const t=b;return(w,o)=>(a(),B(Y,{to:"body"},[h(I,{name:"panel-slide"},{default:W(()=>[r.open&&r.book?(a(),l("div",{key:0,class:"book-panel",onClick:o[2]||(o[2]=P(i=>t("close"),["self"]))},[e("div",{class:"book-panel__overlay",onClick:o[0]||(o[0]=i=>t("close"))}),e("div",N,[e("div",{class:"book-panel__header",style:v({background:r.heroColor})},[e("button",{class:"book-panel__close",title:"关闭",onClick:o[1]||(o[1]=i=>t("close"))},[...o[3]||(o[3]=[e("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none"},[e("path",{d:"M12 4L4 12M4 4l8 8",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round"})],-1)])]),e("div",V,[e("h2",G,c(r.book.title),1),e("p",D,c(r.book.author),1)])],4),e("div",F,[e("div",R,[e("div",Z,[e("div",H,[(a(!0),l(p,null,f(r.book.tags,(i,m)=>(a(),l("span",{key:i,class:"book-panel__tag",style:v({background:r.tagColors[m%r.tagColors.length].bg,color:r.tagColors[m%r.tagColors.length].text})},c(i),5))),128))]),r.book.rating!=null?(a(),l("div",J,[o[8]||(o[8]=e("span",{class:"rating-label"},"推荐指数:",-1)),e("div",O,[(a(),l(p,null,f(5,i=>e("span",{key:i,class:"star"},[i<=Math.floor(r.book.rating)?(a(),l("svg",E,[...o[4]||(o[4]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])])):i===Math.ceil(r.book.rating)&&r.book.rating%1!==0?(a(),l("svg",K,[e("defs",null,[e("clipPath",{id:"clip-"+r.book.id},[...o[5]||(o[5]=[e("rect",{x:"0",y:"0",width:"12",height:"24"},null,-1)])],8,Q)]),o[6]||(o[6]=e("path",{class:"star-empty",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"none",stroke:"currentColor","stroke-width":"1.5"},null,-1)),e("path",{class:"star-filled",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"currentColor","clip-path":"url(#clip-"+r.book.id+")"},null,8,X)])):(a(),l("svg",U,[...o[7]||(o[7]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])]))])),64))]),e("span",ee,c(r.book.rating.toFixed(1)),1)])):_("",!0)]),e("div",te,[e("a",{href:r.book.link,target:"_blank",rel:"noopener",class:"book-panel__link-btn"},[(a(),l("svg",ae,[...o[9]||(o[9]=[e("path",{d:"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])])),o[10]||(o[10]=n(" 豆瓣 ",-1))],8,oe),r.book.wereadLink?(a(),l("a",{key:0,href:r.book.wereadLink,target:"_blank",rel:"noopener",class:"book-panel__link-btn"},[(a(),l("svg",re,[...o[11]||(o[11]=[e("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z",fill:"currentColor"},null,-1)])])),o[12]||(o[12]=n(" 微信读书 ",-1))],8,le)):_("",!0)])]),o[15]||(o[15]=e("div",{class:"book-panel__divider"},null,-1)),e("section",ne,[o[13]||(o[13]=e("h3",{class:"book-panel__section-title"},[e("span",{class:"book-panel__section-icon"},"📖"),n(" 内容简介 ")],-1)),e("p",se,c(r.book.desc),1)]),r.book.highlights&&r.book.highlights.length>0?(a(),l("section",ie,[o[14]||(o[14]=e("h3",{class:"book-panel__section-title"},[e("span",{class:"book-panel__section-icon"},"✨"),n(" 书籍亮点 ")],-1)),e("ul",de,[(a(!0),l(p,null,f(r.book.highlights,(i,m)=>(a(),l("li",{key:m,class:"book-panel__highlight-item"},c(i),1))),128))])])):_("",!0)])])])):_("",!0)]),_:1})]))}}),he=C(ce,[["__scopeId","data-v-1ddfc013"]]),be={class:"book-list"},ue=["onClick"],ge=["src","alt"],ke={class:"book-cover__overlay"},pe={key:0,class:"book-cover__hint"},we=["href"],me={class:"book-info"},_e={class:"book-info__title"},fe={class:"book-info__author"},qe={key:0,class:"book-info__rating"},ve={class:"stars"},je={key:0,viewBox:"0 0 24 24",fill:"currentColor"},Le={key:1,viewBox:"0 0 24 24",class:"half-star"},ye=["id"],Se=["clip-path"],xe={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},Ae={class:"rating-text"},Pe={class:"book-info__tags"},Ce={class:"book-info__desc"},ze=A({__name:"BookRecommend",props:{books:{}},setup(r){const b=["linear-gradient(135deg, #e8f0fe 0%, #c7d9fd 100%)","linear-gradient(135deg, #e6f4ea 0%, #b7dfc4 100%)","linear-gradient(135deg, #fff3e0 0%, #ffd9a0 100%)","linear-gradient(135deg, #fce4ec 0%, #f8b4c8 100%)","linear-gradient(135deg, #ede7f6 0%, #cdb8ee 100%)","linear-gradient(135deg, #e0f7fa 0%, #9ee8f0 100%)"],t=[{bg:"#e8f0fe",text:"#3b5bdb"},{bg:"#e6f4ea",text:"#2e7d32"},{bg:"#fff3e0",text:"#e65100"},{bg:"#fce4ec",text:"#c2185b"},{bg:"#ede7f6",text:"#6a1b9a"},{bg:"#e0f7fa",text:"#00838f"}],w=j(null),o=j(0),i=j(!1),m=T(()=>b[o.value%b.length]);function z(q,d){q.withPanel!==!1&&(w.value?.id===q.id&&i.value?L():(w.value=q,o.value=d,i.value=!0))}function L(){i.value=!1,setTimeout(()=>{w.value=null},300)}return(q,d)=>(a(),l(p,null,[e("div",be,[(a(!0),l(p,null,f(r.books,(s,y)=>(a(),l("div",{key:s.id,class:M(["book-card",{"book-card--active":w.value?.id===s.id&&i.value}]),onClick:u=>z(s,y)},[e("div",{class:"book-cover",style:v({background:b[y%b.length]})},[s.cover?(a(),l("img",{key:0,src:s.cover,alt:s.title,class:"book-cover__img"},null,8,ge)):_("",!0),e("div",ke,[s.withPanel!==!1?(a(),l("span",pe,"点击查看详情")):(a(),l("a",{key:1,href:s.link,target:"_blank",rel:"noopener",class:"book-cover__hint",onClick:d[0]||(d[0]=P(()=>{},["stop"]))},"查看豆瓣",8,we))])],4),e("div",me,[e("div",_e,"《"+c(s.title)+"》",1),e("div",fe,c(s.author),1),s.rating!=null?(a(),l("div",qe,[e("div",ve,[(a(),l(p,null,f(5,u=>e("span",{key:u,class:"star"},[u<=Math.floor(s.rating)?(a(),l("svg",je,[...d[1]||(d[1]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])])):u===Math.ceil(s.rating)&&s.rating%1!==0?(a(),l("svg",Le,[e("defs",null,[e("clipPath",{id:"card-clip-"+s.id},[...d[2]||(d[2]=[e("rect",{x:"0",y:"0",width:"12",height:"24"},null,-1)])],8,ye)]),d[3]||(d[3]=e("path",{class:"star-empty",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"none",stroke:"currentColor","stroke-width":"1.5"},null,-1)),e("path",{class:"star-filled",d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",fill:"currentColor","clip-path":"url(#card-clip-"+s.id+")"},null,8,Se)])):(a(),l("svg",xe,[...d[4]||(d[4]=[e("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},null,-1)])]))])),64))]),e("span",Ae,c(s.rating.toFixed(1)),1)])):_("",!0),e("div",Pe,[(a(!0),l(p,null,f(s.tags,(u,S)=>(a(),l("span",{key:u,class:"tag",style:v({background:t[S%t.length].bg,color:t[S%t.length].text})},c(u),5))),128))]),e("p",Ce,c(s.desc),1)])],10,ue))),128))]),h(he,{book:w.value,open:i.value,"hero-color":m.value,"tag-colors":t,onClose:L},null,8,["book","open","hero-color"])],64))}}),k=C(ze,[["__scopeId","data-v-fd79cd55"]]),Be=[{id:"book-001",title:"心中有数：生活中的数学思维",author:"刘雪峰",cover:"https://cdn.weread.qq.com/weread/cover/39/3300018939/t6_3300018939.jpg",wereadLink:"https://weread.qq.com/web/reader/df6323a0813ab6de5g019a31#outline?noScroll=1",link:"https://book.douban.com/subject/35749693/",tags:["数学思维","科普","决策"],desc:"本书通过大量贴近日常的例子，展示数学思维如何优化我们的生活决策。作者用概率、统计、最优化等数学工具，为生活、职场、人际交往中的权衡问题提供分析框架，帮助读者在面对不确定性时像计算机一样找到“最优解”。",rating:4.9,highlights:["将大数定律、最小二乘法等硬核数学概念与日常生活巧妙结合","提供应对不确定性和多目标抉择的科学决策框架","强调数学不仅是公式计算，更是看世界、优化人生的高效思维工具"]},{id:"book-0020",title:"智慧的疆界：从图灵机到人工智能",author:"周志明",cover:"https://cdn.weread.qq.com/weread/cover/92/YueWen_23637052/t6_YueWen_23637052.jpg",wereadLink:"https://weread.qq.com/web/reader/b9732f007168ac3cb976eca#outline?noScroll=1",link:"https://book.douban.com/subject/30379536/",tags:["人工智能","科技史","通识读物"],desc:"本书是一部面向大众的人工智能通识读物。作者周明以时间为主线，将人工智能的发展历程、关键人物与里程碑事件串联起来，从五个维度展开：学术理论、历史沿革、技术应用、研究成果以及面临的困难与未来挑战。全书旨在用通俗的语言和巧妙的结构，把人工智能从“阳春白雪”的学术殿堂带到公众视野，帮助读者理解 AI 能做什么、做不到什么，以及背后的技术与思想根源。",rating:5,highlights:["以时间为主线，清晰梳理人工智能的发展脉络与里程碑","深入浅出，用通俗语言将复杂的学术理论带入公众视野","客观剖析，帮助读者准确界定AI“能做什么”与“做不到什么”"]},{id:"book-004",title:"为什么伟大不能被计划",author:"肯尼斯·斯坦利 / 乔尔·雷曼",cover:"https://cdn.weread.qq.com/weread/cover/22/cpplatform_wfdzhk1dx7ig9aep4gagof/t6_cpplatform_wfdzhk1dx7ig9aep4gagof1686304376.jpg",wereadLink:"https://weread.qq.com/web/reader/0bf32020813ab7e6bg016510#outline?noScroll=1",link:"https://book.douban.com/subject/36357804/",tags:["人工智能","创新思维","认知科学"],desc:"本书由两位前沿AI科学家合著，提出了颠覆传统“目标-计划”思维的全新视角。结合AI研究实践，书中论证了伟大成就往往并非出自精心设计的蓝图，而是源于对未知的好奇、随机探索与不断试错。通过“寻宝者思维”和“踏脚石模型”等方法，为读者在高度不确定的环境中激发突破性创新提供了具体的行动框架。",rating:4.5,highlights:["颠覆传统的“目标论”，论证伟大成就源自对未知的好奇与无边界的探索","提供“寻宝者思维”“踏脚石模型”“新奇性探索”三大可操作的认知与实践工具","扎根OpenAI等前沿机构的实证背景，其启发意义跨学科适用于科研、商业及人生规划"]},{id:"book-003",title:"这就是ChatGPT",author:"斯蒂芬·沃尔弗拉姆",cover:"https://cdn.weread.qq.com/weread/cover/24/cpplatform_4cn8w4tmgzntjobg9ffeny/t6_cpplatform_4cn8w4tmgzntjobg9ffeny1703648785.jpg",wereadLink:"https://weread.qq.com/web/reader/74332a90813ab86c4g019d98#outline?noScroll=1",link:"https://book.douban.com/subject/36449803/",tags:["人工智能","大模型","ChatGPT"],desc:"本书由著名科学家斯蒂芬·沃尔弗拉姆撰写，全景式拆解了ChatGPT的内部工作机制。作者用通俗语言解释了神经网络和自回归架构等核心技术，探讨了简单的计算规则如何涌现出令人惊叹的智能，帮助读者深刻理解大语言模型为何能生成高质量的人类水平文本。",rating:4.3,highlights:["全景拆解核心技术：深入浅出地讲清ChatGPT背后的神经网络与自回归架构","独特的大师视角：将大模型视为“简单的计算规则”涌现复杂智能的绝佳范例","兼顾技术与商业影响：结合算力规模与行业冲击，全面探讨AI时代的机遇与挑战"]},{id:"book-0030",title:"人工智能：现代方法（第4版）（上下册）",author:"[美]斯图尔特·罗素(Stuart Russell) / [美]彼得·诺维格(Peter Norvig)",cover:"https://cdn.weread.qq.com/weread/cover/33/cpplatform_8rthznqfhsjuz5fswwn6kx/t6_cpplatform_8rthznqfhsjuz5fswwn6kx1675928213.jpg",wereadLink:"https://weread.qq.com/web/reader/fc332020813ab7942g0102ad#outline?noScroll=1",link:"https://book.douban.com/subject/36152133",tags:["人工智能","教材","理论实践结合","经典著作","计算机科学"],desc:"本书是人工智能领域的经典权威教材，系统、深入地探讨AI领域的理论与实践，以统一风格融合当今流行的AI思想与术语到前沿应用中，真正实现理论与实践相结合。全书分7个部分共28章，理论部分涵盖逻辑、概率、连续数学、感知、推理、学习、行动及公平、信任、社会公益和安全等社会议题；实践部分选取微电子设备、机器人行星探测器、在线服务、AlphaZero、人形机器人、自动驾驶、AI辅助医疗等热门场景。由加州大学伯克利分校教授斯图尔特·罗素与前谷歌研究总监彼得·诺维格联合撰写，被全球1500多所高校采用，适合作为AI相关专业本科生和研究生教材，也可作为专业人员的参考书。",rating:5,highlights:["体系完整覆盖面广，7个部分28章构成自洽的AI理论主线，涵盖核心理论与前沿议题","理论与实践并重，既阐述核心算法与模型，又展示在热门场景中的落地实例，便于知识迁移","紧跟前沿关注社会议题，专门讨论AI伦理与安全，引导思考技术与社会的交互责任","一站式权威参考，兼具教材属性与专业参考价值，适配高校教学与产业实践双重需求","现代理念贯穿始终，通过最新案例体现AI进展与行业趋势，呈现“活”的AI生态"]},{id:"book-0031",title:"模型思维：简化世界的人工智能模型",author:"龚才春",cover:"https://cdn.weread.qq.com/weread/cover/26/YueWen_38601826/t6_YueWen_38601826.jpg",wereadLink:"https://weread.qq.com/web/reader/5a8326e0724d04625a8e740#outline?noScroll=1",link:"https://book.douban.com/subject/35488925/",tags:["模型思维","人工智能","算法模型","机器学习","入门实践"],desc:"本书聚焦“如何用模型简化世界”的核心主题，将人工智能在现实业务中面临的难题归纳为权重、状态、序列、表示、相似、分类六大问题，并围绕该框架讲解对应模型思路与算法。书中弱化复杂数学公式，以大量生活化、业务化案例阐释模型理论与落地场景，帮助读者建立“模型—场景”映射关系，降低AI模型学习门槛，既是人工智能初学者的入门读物，也可为企业工程师、科研人员提供实践参考，适合各类读者学习并将模型思维应用到生活与工作中。",rating:4.8,highlights:["以“六大问题”框架串联AI模型，可按场景快速检索适配的模型思路","侧重落地实践，搭配大量生活化与业务案例，助力建立“模型—场景”映射","降低学习门槛，少数学公式、多直观案例，兼顾初学者与工程落地需求","受众群体广泛，适配工程师、科研人员及普通读者，可迁移模型思维至实际场景"]},{id:"book-005",title:"你看起来好像……我爱你：AI的工作原理以及它为这个世界带来的稀奇古怪",author:"贾内尔·沙内",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/970/39481970/t6_39481970.jpg",wereadLink:"https://weread.qq.com/book-detail?type=1&senderVid=40710128&v=f9a32c10725a7272f9a14f9&wtheme=white&wfrom=app&wvid=40710128&scene=bottomSheetShare",link:"https://book.douban.com/subject/35407136/",tags:["人工智能","趣味科普","漫画算法"],desc:"这是一部写给普通读者的人工智能趣味科普读物。作者贾内尔·沙内结合生活化的比喻和超级可爱的漫画，深入浅出地讲解了AI的基本工作原理、实际应用及其局限性。书中通过大量幽默的AI实验与“翻车”案例，带领读者在轻松捧腹的氛围中，准确理解算法能做什么、不能做什么。",rating:4.2,highlights:["幽默可爱的漫画导览：用插图和通俗语言将“深度学习”“神经网络”等抽象概念可视化","丰富的趣味实验案例：通过精选的AI“翻车”故事，直观揭示算法背后的逻辑与潜在偏差","客观建立AI认知：在展示AI强大能力的同时，明确指出其在语境理解和处理模糊信息时的短板"]},{id:"book-006",title:"AI经济：机器人时代的工作、财富和社会福利",author:"罗杰·布特尔",cover:"https://cdn.weread.qq.com/weread/cover/30/YueWen_38229387/t6_YueWen_38229387.jpg",wereadLink:"https://weread.qq.com/web/reader/653320207247558b65332f5#outline?noScroll=1",link:"https://book.douban.com/subject/35433060/",tags:["人工智能","经济学","社会学","未来趋势"],desc:"本书由知名经济学家罗杰·布特尔撰写，聚焦AI与机器人技术对经济和社会的深远影响。作者拨开艰涩的科技术语，从经济增长、通货膨胀及财富分配等宏观视角，理性剖析AI革命将如何重塑我们的工作、教育与休闲方式，以乐观的姿态为迎接未来的社会变革指明路径。",rating:4.1,highlights:["宏观经济视角解析：深入探讨AI对经济增长、通货膨胀、财富与权力分配的真实影响","全景式社会洞察：全面检视机器人时代下，人类教育体系、工作模式与休闲形态的深刻变革","理性乐观的未来指南：拒绝技术恐慌，为个人与社会在变迁的世界中提供清晰可行的应对计划"]}],Ie=[{id:"book-007",title:"做对产品",author:"阿尔贝托·索维亚",cover:"https://cdn.weread.qq.com/weread/cover/53/YueWen_40877841/t6_YueWen_40877841.jpg",wereadLink:"https://weread.qq.com/web/reader/254322a0726fbf1125472c9#outline?noScroll=1",link:"https://book.douban.com/subject/35607961/",tags:["产品思维","创业","商业方法论"],slogan:"为什么有些产品注定失败，有些产品却能大获成功？来自谷歌与斯坦福的产品工具和产品战术。",desc:"谷歌首任产品总监阿尔贝托·索维亚结合在谷歌、斯坦福的实战经验与自身代价高昂的创业失败经历，总结出的一套防败手册。书中揭示了新产品高达90%的“市场失败律”，并创新性地提出了“预型”（Pre型）理念，指导团队在正式开发前，以极低的成本和真实数据快速验证关键假设，确保把创意打磨成“正确的它”。",rating:4.8,highlights:["揭示残酷的市场失败律：正视90%新产品必然失败的商业常态，并以此倒推破局的实战方法论","首创“预型”（Pre型）概念：提供8大测试工具，主张用极低成本和小规模试错快速逼近正确的产品形态","强调真实数据驱动决策：辅以特斯拉、谷歌等完整案例回溯，教导团队将决策建立在客观证据而非主观直觉之上"]},{id:"book-009",title:"俞军产品方法论",author:"俞军",cover:"https://cdn.weread.qq.com/weread/cover/47/YueWen_28165041/t6_YueWen_28165041.jpg",wereadLink:"https://weread.qq.com/web/reader/1cc3252071adc3b11cc0162#outline?noScroll=1",link:"https://book.douban.com/subject/34907971/",tags:["产品思维","产品经理","互联网","方法论"],desc:"“百度贴吧之父”俞军二十余年产品实践与思考的系统总结。本书将产品经理定义为“以科学方法研究人性并转化为商业方案”的交叉学科，深入解析了用户模型、交易模型和决策模型三大核心框架，为产品人提供了一套在不确定环境中权衡多方利益的实战指南。",rating:4.4,highlights:["沉淀二十年行业经验：从广为流传的“PM12条”到系统化的产品哲学，展现顶尖产品经理的认知迭代史","三大核心模型拆解：深度剖析用户模型与交易模型，指导如何通过让交易发生来创造“有利可图”的真实用户价值","兼顾科学与人文视角：强调批判性思维的运用，并清晰梳理了从新人到顶尖大牛的能力进阶路径"]},{id:"book-016",title:"策略产品经理：模型与方法论",author:"青十五",cover:"https://cdn.weread.qq.com/weread/cover/31/cpplatform_gheeqe7hjb2czyzthzf5nm/t6_cpplatform_gheeqe7hjb2czyzthzf5nm1735654872.jpg",wereadLink:"https://weread.qq.com/web/reader/4de32800813ab98d5g01286b#outline?noScroll=1",link:"https://book.douban.com/subject/35218721/",tags:["产品经理","策略产品","算法思维"],desc:"本书围绕“策略产品经理”这一复合角色，系统性地构建了从理念到实践的完整知识框架。作者从机器学习理论与经济学视角出发，结合推荐、搜索、广告、风控等核心业务场景，深入浅出地讲解了函数建模与策略应用，并对策略产品经理的核心能力与团队建设给出了详尽指导。",rating:3.9,highlights:["系统化的角色认知建构：清晰界定策略产品经理的时代背景、职责边界与工作内容，为从业者夯实概念基础","跨学科的模型与业务结合：利用机器学习的函数方法论与经济学理论，深度剖析推荐、搜索、广告、风控及定价等真实业务场景的解法","硬核算法的通俗化解析：深入浅出地拆解机器学习本质、常见算法及深度学习前沿技术，帮助产品经理真正理解策略背后的技术支撑","可落地的团队建设指南：全面拆解数据分析、沟通与项目管理等核心能力项，并针对不同产品生命周期提供策略团队的组建思路"]},{id:"book-008",title:"创造：用非传统方式做有价值的事",author:"托尼·法德尔",cover:"https://cdn.weread.qq.com/weread/cover/53/cpPlatform_tzdqT27m3vyaHnX5o8Vbwk/t6_cpPlatform_tzdqT27m3vyaHnX5o8Vbwk.jpg",wereadLink:"https://weread.qq.com/web/reader/13832ac0813ab725fg018645#outline?noScroll=1",link:"https://book.douban.com/subject/36071759/",tags:["产品思维","管理学","创业"],desc:"本书是iPod、iPhone、Nest等爆款产品幕后推手托尼·法德尔30余年职业经历的智慧结晶。作者毫无保留地分享了他在产品设计、团队管理、职业选择和公司经营等方面的“非传统”方法论，帮助读者在各自的领域内刻意练习创造力，做真正有价值的事。",rating:4.9,highlights:["源自顶级创新者的实战经验：连续打造iPod、iPhone等划时代产品的亲历复盘与真实反面教训","覆盖从个人到公司的完整路径：系统解答职业选择、产品设计、团队管理与企业经营等核心问题","提供可复制的“非传统”方法论：强调“亮点思维”与持续复盘，教导读者以反常规的视角刻意练习创造力"]},{id:"book-010",title:"产品思维",author:"刘飞",cover:"https://cdn.weread.qq.com/weread/cover/56/YueWen_25568738/t6_YueWen_25568738.jpg",wereadLink:"https://weread.qq.com/web/reader/38332ce0718625e23831fe7#outline?noScroll=1",link:"https://book.douban.com/subject/33456375/",tags:["产品思维","产品经理","个人成长","互联网"],desc:"实战派产品经理刘飞结合在一线大厂的丰富经验，围绕产品人如何实现能力跃迁展开的底层能力指南。全书掰开揉碎地讲解了认知盲点与实践痛点，通过“认知用户”“创造价值”和“产品落地”三大核心板块，系统拆解了从建立用户模型、高质量决策到快速迭代验证的完整产品方法论。",rating:4.2,highlights:["三大核心板块系统拆解：完整覆盖“认知用户”“创造价值”与“产品落地”的产品闭环","直击痛点的一线实战经验：毫无保留地分享实战中新手迫切需要却难以获取的隐性知识","聚焦底层能力与思维升维：不仅教授落地方法，更注重决策质量与思维模式的跃迁"]},{id:"book-011",title:"产品思维：创新设计的六条法则（全彩）",author:"张印帅",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/253/26687253/t6_26687253.jpg",wereadLink:"https://weread.qq.com/web/reader/a823297071973715a8202b0#outline?noScroll=1",link:"https://book.douban.com/subject/34859540/",tags:["产品设计","创新思维","方法论","设计灵感"],desc:"本书围绕作者张印帅多年产品设计实践总结出的6条创意公式展开，旨在帮助读者系统化地获取设计灵感并解决创新难题。全书通过大量经典案例，详细解析了从发散思考到重组创新的全过程，并在最后提供了从需求到草图再到最终方案的完整项目落地演示。",rating:4,highlights:["提炼6条实用的创新设计公式：将发散思考与重组创新系统化，打造可复用的设计灵感库","丰富的经典设计案例解析：详细展示“问题+方法”、“1+1>2”等法则在真实产品设计中的应用","呈现从需求到方案的落地全流程：通过综合案例演示概念打磨与草图设计的实战过程"]}],We=[{id:"book-012",title:"小而美：持续盈利的经营法则",author:"萨希尔·拉文吉亚",cover:"https://cdn.weread.qq.com/weread/cover/91/cpplatform_vl4abrrrqgxnry833gcrtt/t6_cpplatform_vl4abrrrqgxnry833gcrtt1677578056.jpg",wereadLink:"https://weread.qq.com/web/reader/02932980813ab7a43g012e77#outline?noScroll=1",link:"https://book.douban.com/subject/36280425/",tags:["创业","商业模式","极简主义"],desc:"本书打破了硅谷盲目追求“独角兽”的扩张迷思，聚焦于“规模不是唯一出路”的商业现实。作者结合创立Gumroad的亲身经历，提出了“极简创业经营”理念。全书指导创业者与管理者如何通过从社区切入、聚焦核心能力、精简团队等方式，用最少的资源打造出不仅能活下去，而且还能持续盈利的“慢公司”。",rating:5,highlights:["颠覆传统的扩张迷思：提出盈利至上而非规模至上，将持续赚钱和实际利润作为衡量企业成功的核心标准","可落地的极简法则：总结出“越少越好”“瞄准前100个客户”等7条创业清单，构建从定位、产品到销售的完整闭环","社区驱动的商业逻辑：提倡从虚拟社区入手，以“贡献-创作-教学”的方式低成本验证产品形态并获取早期信任","打造高韧性的“慢公司”：结合疫情与远程办公背景，展示如何通过精简组织和分布式协作，在不确定的时代保持稳定的现金流"]},{id:"book-013",title:"做难而正确的事：进步最快的方式",author:"尤里·莱文",cover:"https://cdn.weread.qq.com/weread/cover/53/cpplatform_bunxjyygj8m9stnwcgwqqk/t6_cpplatform_bunxjyygj8m9stnwcgwqqk1728876401.jpg",wereadLink:"https://weread.qq.com/web/reader/aa032fb0813ab9461g018406#outline?noScroll=1",link:"https://book.douban.com/subject/37054102/",tags:["创业","产品思维","商业管理"],desc:"Waze联合创始人尤里·莱文写给创业者和管理者的行动指南。作者结合连续打造两家估值超10亿美元公司的实战经验，提出“先做难事、再做正确事”的核心哲学。全书通过13个阶段的系统拆解，指导读者如何寻找真正的用户痛点、构建高价值产品，并在不确定的环境中通过不断复盘实现跨越式成长。",rating:4.9,highlights:["世界级创业者的实战复盘：连续打造两家独角兽公司的创始人亲授，提供极具可信度的第一手商业洞察与落地经验","践行“难而正确”的核心哲学：强调不追逐短期热点，而是去解决效率极低却被忽视的痛点，以此建立坚实的商业护城河","覆盖从0到1的全周期指南：系统拆解从寻找痛点、产品构建、融资运作到团队管理的13个关键阶段，提供可操作的行动清单","直面失败的心理韧性建设：不回避挫折，将“从错误中学习”提炼为核心方法，为身处高压环境的读者提供情感共鸣与心理支持","广泛的跨场景应用价值：书中给出的决策工具不仅适用于初创团队，同样能为大公司内部创新及个人职业认知升级提供指导"]},{id:"book-015",title:"创新公司：皮克斯的启示",author:"艾德·卡特姆",cover:"https://cdn.weread.qq.com/weread/cover/20/YueWen_814380/t6_YueWen_814380.jpg",wereadLink:"https://weread.qq.com/web/reader/2ef329605c6d2c2efeeb70d#outline?noScroll=1",link:"https://book.douban.com/subject/26314955/",tags:["创新思维","组织文化","企业管理"],desc:"皮克斯联合创始人艾德·卡特姆结合《玩具总动员》《机器人瓦力》等经典动画的幕后制作故事，深度揭示了皮克斯如何长期保持创意领先的秘密。本书不仅详述了皮克斯从初创到壮大的历程，更抽丝剥茧地解析了其在团队文化、跨部门协作、人才培养和允许失败等方面的独特创意管理机制，为各类组织提供了可复制的创新指南。",rating:4.5,highlights:["揭秘“皮克斯奇迹”背后的管理哲学：通过14部经典动画的真实幕后故事，展示创意从无到有、再到票房口碑双赢的全过程","深度解析创新土壤的搭建：阐述如何通过允许失败的文化、流程设计和激励机制，将“不断推动创新”彻底融入公司DNA","提供跨行业可复用的管理工具：总结项目立项、跨部门协作与风险控制的具体做法，为不同规模和行业的企业提供落地的实战模板"]},{id:"book-017",title:"重来：更为简单的商业思维",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/1/YueWen_635904/t6_YueWen_635904.jpg",wereadLink:"https://weread.qq.com/web/reader/0363228059b4000363b29e9#outline?noScroll=1",link:"https://book.douban.com/subject/5320866/",tags:["商业思维","创业","企业管理","极简主义"],desc:"37signals联合创始人基于十年创业实战经验，写给职场人与创业者的极简商业法则。本书摒弃了传统的MBA术语与复杂的商业教条，以“辛辣、直接、靠谱”的语言，颠覆了关于项目管理、人才招聘、产品设计与企业文化的常规认知，教导读者如何在真实的商业世界中“做更少，但创造更多价值”。",rating:4.3,highlights:["颠覆传统的极简商业哲学：反叛复杂的商业教条，主张“做更少，创造更多”，通过最小可行步骤降低试错成本并快速迭代","源自37signals的十年实战精髓：覆盖从项目管理、产品设计到市场营销的完整链条，提供不讲废话、拿来即用的行动指南","重塑职场与团队管理的认知：提出诸多务实且反常规的观点（如严苛的简历筛选标准），打造基于信任与结果导向的高效团队","适用面极广的实操手册：无论是寻求突破的精英企业家、小团队创业者，还是渴望提升工作效率的普通职场人，都能直接对照落地"]},{id:"book-018",title:"重来2：更为简单高效的远程工作方式",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/38/YueWen_635721/t6_YueWen_635721.jpg",wereadLink:"https://weread.qq.com/web/reader/46b3220059b34946b517012#outline?noScroll=1",link:"https://book.douban.com/subject/25861795/",tags:["企业管理","远程工作","工作方式","团队协作"],desc:"Basecamp（原37signals）创始人基于自身团队多年的全球分布式协作经验，为企业和个人提供的一套远程工作“思想升级包”。本书直面行业争议，破解了“创新只能面对面”及“文化会淡化”等常见误区，并系统提供了借助异步沟通、协作工具与流程设计来打造高效、人性化远程团队的实战指南。",rating:4.1,highlights:["提供思想层面的“升级包”：直击传统办公室痛点，用真实数据与反例打破关于远程办公的固有认知误区","第一手的分布式团队管理经验：Basecamp创始人亲授，展示如何突破地域限制招募顶尖人才，并保持健康、高效的工作节奏","系统可落地的工具与流程方法：详述如何利用协作工具降低管理成本，让远程工作从“特殊福利”真正转变为可持续的主流组织模式"]},{id:"book-019",title:"重来3：做得更少，但赚得更多",author:"贾森·弗里德 / 戴维·海涅迈尔·汉森",cover:"https://cdn.weread.qq.com/weread/cover/62/cpplatform_tqth8pnlq8h9ing5uciwhi/t6_cpplatform_tqth8pnlq8h9ing5uciwhi1748502715.jpg",wereadLink:"https://weread.qq.com/web/reader/b6a32ed0813ab9fb5g015181#outline?noScroll=1",link:"https://book.douban.com/subject/37367276/",tags:["工作方式","反内卷","企业文化"],desc:"Basecamp创始人带来的“反内卷”与“反过度忙碌”的管理指南。作者基于近20年带领54人团队服务全球10万家企业的成功经验，直击现代企业盲目扩张、无效加班等八大症结。全书主张以“冷静”颠覆“忙碌”文化，指导企业和个人通过40小时工作制、拒绝KPI和异步沟通等极简方式，在不牺牲生活质量的前提下实现健康发展与持续盈利。",rating:4.2,highlights:["以“冷静”颠覆“忙碌”文化：倡导高效比高产更重要，用稳定的节奏替代疯狂加班的内卷常态","直击现代企业八大症结：深度诊断快速扩张、无效加班、会议泛滥与目标绑架等痛点，提供对症下药的思路","提供四大可落地的管理工具：引入40小时工作制、拒绝硬性KPI、推行非实时沟通，坚持利润优先于规模","源自Basecamp的真实反向案例：展示“小而美”团队如何通过“少做但做好”的策略，跑赢新经济并保持高利润"]}],Ye=[{id:"book-024",title:"要事第一",author:"史蒂芬·柯维 / 罗杰·梅里尔 / 丽贝卡·梅里尔",cover:"https://cdn.weread.qq.com/weread/cover/57/yuewen_33091834/t6_yuewen_330918341686208943.jpg",wereadLink:"https://weread.qq.com/web/reader/f523268071f8f0faf52b806#outline?noScroll=1",link:"https://book.douban.com/subject/1028372/",tags:["时间管理","自我管理","经典思维"],desc:"作为《高效能人士的七个习惯》的延伸与加强版，本书提出了颠覆传统的“第四代时间管理”方法。作者强调，比提升做事速度（时钟）更重要的是找准人生的方向（罗盘）。全书指导读者通过自我意识的觉醒，以原则和价值观为中心，将精力聚焦于“重要而不紧急”的长期目标上，从而在繁忙的现代生活中真正做到“要事第一”。",rating:4.5,highlights:["从“时钟”到“罗盘”的思维跨越：打破一味追求“更快、更努力”的传统效率迷思，确立人生方向优先的哲学","经典的四象限时间管理矩阵：引导读者跳出紧急事务的“救火圈”，将核心精力倾注于第二象限（重要但不紧急）的高价值事务中","生动的“大石块”优先法则：通过“先放石头再倒水”的直观比喻，确保关键目标与核心使命在碎片化日程中得到绝对的优先落实","以原则为中心的自我驱动框架：不仅提供日程安排工具，更通过唤醒良知，帮助读者在工作、家庭等多元角色中实现真正的平衡与统合综效"]},{id:"book-025",title:"清单革命",author:"阿图·葛文德",cover:"https://cdn.weread.qq.com/weread/cover/12/cpPlatform_rudGZN3LDW5m9FBYr7rMBA/t6_cpPlatform_rudGZN3LDW5m9FBYr7rMBA.jpg",wereadLink:"https://weread.qq.com/web/reader/18332f80813ab7292g010065#outline?noScroll=1",link:"https://book.douban.com/subject/27168564/",tags:["管理学","认知科学","工作效率"],desc:"这是一部针对现代复杂世界所撰写的“认知防护手册”。作者阿图·葛文德通过医疗、建筑、投资等高风险领域的真实案例，揭示了人类在海量信息与高压环境下极易出现的判断疏忽。书中提出了“权力下放、简单至上、人为根本、持续改善”四大原则，指导读者将最佳实践外化为可操作的清单，从而在复杂系统中构建一道低成本、高回报的安全防线。",rating:4.6,highlights:["直面复杂时代的认知瓶颈：揭示在海量信息流中，清单如何作为“认知防护网”弥补人类记忆力与注意力分配的先天不足","提供兼具理念与落地的四大原则：通过“权力下放、简单至上、人为根本、持续改善”，构建一套可复用的清单设计哲学","扎实的医学实证背书：以手术感染率骤降等真实临床数据为支撑，证明清单思维在医疗、建筑、投资等高风险领域的跨行业普适性","简洁而具力量的流程创新：强调清单服务于人而非取代人，是帮助专业人士在高压环境下将复杂环节显性化、流程化的必备工具"]},{id:"book-020",title:"别让猴子跳回背上",author:"威廉·安肯三世",cover:"https://cdn.weread.qq.com/weread/cover/69/cpPlatform_7fFoBQ7dtqgABGSTskpJSN/t6_cpPlatform_7fFoBQ7dtqgABGSTskpJSN.jpg",wereadLink:"https://weread.qq.com/web/reader/9fc32010813ab7291g0196bd#outline?noScroll=1",link:"https://book.douban.com/subject/36103994/",tags:["时间管理","领导力","项目管理"],desc:"这是一部以“猴子”生动隐喻任务与责任的经典管理学著作。作者威廉·安肯三世深刻剖析了管理者常被琐事淹没的时间困境，并提出系统化的“猴子管理法”。通过明确任务归属、责任递减与有效授权，指导管理者如何把不属于自己的“猴子”交出去，从而释放精力专注于最高价值的战略思考，实现团队与个人的共同成长。",rating:4.3,highlights:["生动有趣的“猴子”隐喻：将枯燥的责任划分与任务流转具象化，直击职场中“忙碌却低效”的痛点","实用高效的“三步交接”法则：通过明确期望、授予资源与约定检查点，彻底避免下属的待办任务重新跳回自己背上","重塑时间管理与人才培养体系：指导高层放权、中层辅导、基层自发，将企业的成功真正建立在员工自主性的提升之上"]}],Te=[{id:"book-022",title:"学会提问（原书第12版）",author:"尼尔·布朗 / 斯图尔特·基利",cover:"https://cdn.weread.qq.com/weread/cover/68/YueWen_39980443/t6_YueWen_39980443.jpg",wereadLink:"https://weread.qq.com/web/reader/e6832d3072620d9be68aabf#outline?noScroll=1",link:"https://book.douban.com/subject/35513147/",tags:["批判性思维","逻辑学","认知科学","经典书"],desc:"这是一部培养批判性思维的经典实战指南。作者尼尔·布朗与斯图尔特·基利结合长期的教学与研究实践，提供了一套系统化、可操作的提问流程。全书通过大量真实情境案例，教导读者如何在信息泛滥的时代识别隐含假设、区分事实与观点，用高质量的“判断性问题”看透事物本质，从而做出更理性的决策。",rating:5,highlights:["聚焦批判性思考的核心能力：系统拆解“如何提出好问题”的思维过程，帮助读者在复杂信息中迅速抓住本质","提供可落地的提问与评估框架：从背景信息、关键概念到逻辑推理，构建一条完整的判断性问题链条","丰富的真实场景应用示范：结合课堂讨论、写作、日常沟通与职场决策等多元场景，让理论能“立即上手”","打造实用的思考检查单：不仅讲透“提问的价值”，更提供可直接转化为日常习惯的思维检查表，助你有效避开认知陷阱"]},{id:"book-026",title:"如何阅读一本书",author:"莫提默·J. 艾德勒 / 查尔斯·范多伦",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/810/23723810/t6_23723810.jpg",wereadLink:"https://weread.qq.com/book-detail?type=1&senderVid=40710128&v=272326407169ff22272934f&wtheme=white&wfrom=app&wvid=40710128&scene=bottomSheetShare",link:"https://book.douban.com/subject/1013208/",tags:["阅读方法","思维训练","经典"],desc:"阅读领域的“元方法”指南。作者艾德勒与范多伦将阅读划分为基础阅读、检视阅读、分析阅读与主题阅读四个进阶层次，并强调阅读是一项主动的思考活动。本书不仅提供了从“快速略读”到“系统拆解论点”的实操技巧，更致力于通过提问、归纳与批判，将阅读转化为训练理解力、批判力与终身学习的终极工具。",rating:5,highlights:["构建系统的四级阅读框架：从检视阅读到分析阅读再到主题阅读，为读者提供了一套从入门到精通的进阶路径","强调“主动与批判”的阅读观：拒绝被动接收，教导读者如何通过提问、归纳与反思，真正将作者的洞见转化为自己的认知","高效的检视阅读技巧：提供如何在有限时间内通过看目录、挑重点等方式，快速筛选并判断书目价值的核心能力","跨时代的经典效能：自1940年问世以来长盛不衰，其对逻辑拆解与深度思考的指导，是提升所有知识吸收效率的“总开关”"]},{id:"book-023",title:"检索力：打破信息差的科学方法",author:"龚芙蓉",cover:"https://cdn.weread.qq.com/weread/cover/58/cpplatform_feaxemubry47bnkzylqzwv/t6_cpplatform_feaxemubry47bnkzylqzwv1716796541.jpg",wereadLink:"https://weread.qq.com/web/reader/9de32810813ab8e00g018130#outline?noScroll=1",link:"https://book.douban.com/subject/36899979/",tags:["信息素养","检索能力","思维认知"],desc:"本书聚焦“检索力”这一核心技能，旨在帮助读者在信息过载的时代主动掌握“逆风而行”的搜索能力。作者龚芙蓉结合二十余年实践经验，用生动的人文与诺贝尔奖级科学案例，将枯燥的检索工具化为有趣的故事。不仅教授非线性、迭代式的搜索技巧，更致力于重塑读者的探究精神，赋予其走出“信息茧房”的勇气。",rating:4.2,highlights:["丰富的跨学科趣味案例驱动：用“张冠李戴的马克思名言”等生动故事，将枯燥繁琐的检索步骤转化为轻松的探索之旅","重塑非线性与迭代的搜索思维：打破按部就班的线性流程误区，建立以耐心与热情驱动的多轮迭代搜索心态","直击科研与职场的实用痛点：提供可快速落地的实操指南，帮助读者切实缩短科研周期、大幅提升工作效率","兼顾技能训练与人文底色：在教授如何利用和创造信息的同时，注重培养读者的信息素养与打破信息差的认知勇气"]},{id:"book-027",title:"原则",author:"瑞·达利欧",cover:"https://cdn.weread.qq.com/weread/cover/23/YueWen_921568/t6_YueWen_921568.jpg",wereadLink:"https://weread.qq.com/web/reader/848324405e0fe08483ab6a4#outline?noScroll=1",link:"https://book.douban.com/subject/27608239/",tags:["投资","方法论","自我管理"],desc:"桥水基金创始人瑞·达利欧总结四十余年投资、管理与人生经验的集大成之作。作者提出将生活和工作像机器一样系统化，确立了“极度求真”与“极度透明”两大基石，并通过“创意择优”与“基于可信度的决策机制”来迭代思维。书中包含500多条可操作原则，旨在帮助读者在复杂世界中保持开放心态、看清现实，并做出最优决策。",rating:4.8,highlights:["“极度求真”与“极度透明”的基石：主张诚实面对现实，通过公开决策过程来获取外部反馈，达成高效协作","创意择优与可信度加权机制：摒弃个人权威，利用数据驱动的讨论与可信度权重，在团队中选出最优方案","500余条可落地的原则清单：涵盖自我认知、投资决策、团队治理等场景，构建出一套随时可查的行动指南","系统化的“机器”思维：将生活与组织管理拆解为可维护、可迭代的系统，有效规避情绪化干扰"]},{id:"book-031",title:"价值",author:"张磊",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/958/33577958/t6_33577958.jpg",wereadLink:"https://weread.qq.com/web/reader/5be32a3072005be65bef195#outline?noScroll=1",link:"https://book.douban.com/subject/35188914/",tags:["价值投资","商业思维","创业"],desc:"高瓴资本创始人张磊首部个人及投资思想著作。全书通过回顾作者的个人求学与创业历程，系统阐释了“长期主义”与“重仓中国”的核心投资理念，并首次披露了高瓴投资的七大公式。作者将十余个典型投资案例与个人价值修养相结合，揭示了如何在不确定的商业环境中，通过坚持原则、敬畏规则与持续创新，创造长久、真实的价值。",rating:4.6,highlights:["系统构建长期主义哲学：首次系统化梳理“高瓴七大公式”，为读者提供从认知、决策到执行的价值投资实战模型","深度复盘经典实战案例：通过腾讯、货拉拉等真实商业案例，拆解如何在复杂市场中识别企业护城河与核心价值","投资之外的人文思考：延伸至教育、人才与科学观，展现作者作为顶尖投资者对社会责任与长期价值创造的深度思考","可视化的阅读体验：精选多幅手绘彩插与历史影像，将深刻的投资逻辑与企业成长叙事变得更加生动、直观"]},{id:"book-032",title:"纳瓦尔宝典",author:"埃里克·乔根森 / 纳瓦尔·拉维坎特",cover:"https://cdn.weread.qq.com/weread/cover/89/YueWen_44026191/t6_YueWen_44026191.jpg",wereadLink:"https://weread.qq.com/web/reader/e1e32b00729fc94fe1e824d#outline?noScroll=1",link:"https://book.douban.com/subject/35876121/",tags:["财富管理","个人成长","幸福哲学","思维认知"],desc:"这是一部汇集硅谷著名投资人纳瓦尔·拉维坎特过去十年关于财富与幸福思考的行动指南。全书摒弃了“致富靠运气”的传统观念，提出积累财富与幸福生活是可以通过学习掌握的技能。通过系统整理推特、播客与访谈中的智慧，本书为读者提供了如何在快速变化的科技与经济环境中，利用杠杆、发挥个人独特性，进而实现财务自由并获得持久内心满足的方法论。",rating:4.7,highlights:["将财富与幸福视为可习得的技能：打破运气论，强调通过建立杠杆、发挥个人独特性来获取非线性的回报","十年思想的系统化编纂：将碎片化的互联网智慧提炼为成体系的方法论，打造了数字时代个人的“行动指南”","兼顾财富积累与内心满足：不仅教导如何高效赚钱，更深入探讨如何通过阅读、冥想与长期主义，在职场成功中寻找内心的宁静","极具实操性的工具箱：提供如深度思考、刻意练习、构建个人品牌等具体路径，帮助读者在碎片化时代快速实现自我迭代"]},{id:"book-028",title:"优秀的绵羊",author:"威廉·德雷谢维奇",cover:"https://cdn.weread.qq.com/weread/cover/78/cpplatform_3ncoeekcuaectlzj9hf5nr/t6_cpplatform_3ncoeekcuaectlzj9hf5nr1744626569.jpg",wereadLink:"https://weread.qq.com/web/reader/1c0324c0813ab9d91g010aba#outline?noScroll=1",link:"https://book.douban.com/subject/26747208/",tags:["博雅教育","社会学","个人成长"],desc:"耶鲁大学前教授威廉·德雷谢维奇对美国常春藤精英教育体制的尖锐批判之作。作者通过二十余年的教学观察，指出顶尖学府培养出一群虽然聪明、优秀，但普遍焦虑、缺乏目标感且唯命是从的“优秀绵羊”。本书呼吁社会重新审视教育的本质，摆脱对名校与高薪的盲目崇拜，回归博雅教育，鼓励学生探索内在驱动力与自我价值。",rating:4.2,highlights:["犀利剖析精英教育弊端：直击常春藤体制培养出“聪明但没有灵魂”的学生的现实，反思唯名校与成绩论的单一评价体系","回归博雅教育的核心价值：批判应试化倾向，提倡给予学生更多探索、失败与重塑自我的空间，强调教育的本质在于帮助个体找到自我","提供挣脱外部期待的认知框架：既为迷茫的年轻人指明如何重建内在动力，也给家长和教育者敲响了关于“成功定义”的警钟","跨文化背景下的教育共鸣：尽管以美国精英教育为例，其对“教育内卷”与“缺乏目标感”的批判，引发了全球高压教育环境下的深层共鸣"]},{id:"book-029",title:"把自己变成稀缺资产",author:"何思平",cover:"https://cdn.weread.qq.com/weread/cover/98/cpplatform_ncqzerh3wdywn9mlc9cjna/t6_cpplatform_ncqzerh3wdywn9mlc9cjna1694085413.jpg",wereadLink:"https://weread.qq.com/web/reader/2fe326f0813ab821fg0146df#outline?noScroll=1",link:"https://book.douban.com/subject/36513648/",tags:["个人成长","思维认知","自我管理","投资理财"],desc:"这是一个将“人生”视作“公司”来经营的实战指南。作者何思平结合自身从严重口吃到演讲冠军、再到连续创业成功的跨越式经历，提出了“人生有限公司”的经营哲学。全书通过“生命立方体”模型，从认知、实践、精力管理三个维度拆解了如何通过持续输出与跨界学习，将自己打造为具有高壁垒、不可替代的“稀缺资产”。",rating:4.2,highlights:["提出“人生有限公司”经营哲学：倡导将自己视作最值得投资的上市公司，通过不断提升认知与能力壁垒，把“人生”经营成稀缺资产","系统化的“生命立方体”模型：从认知、实践、精力管理三个维度构建个人成长闭环，解决成长中的无序感与碎片化难题","聚焦个人核心竞争力：深度拆解认知力、学习力与共情力等稀缺能力的获取路径，教导读者在不同场景中通过实战验证自我价值","高度可操作的工具清单：摒弃鸡汤式说教，将自我成长拆解为具体的习惯改造与复盘清单，帮助读者在痛点与高光时刻都能通过反馈机制实现自我迭代"]},{id:"book-030",title:"成长第二曲线：跨越S型持续成长",author:"查尔斯·汉迪",cover:"https://cdn.weread.qq.com/weread/cover/65/YueWen_39427437/t6_YueWen_39427437.jpg",wereadLink:"https://weread.qq.com/web/reader/15d32ed072599d6d15daa86#outline?noScroll=1",link:"https://book.douban.com/subject/35531368/",tags:["管理学","个人成长","人生哲学","未来趋势"],desc:"管理大师查尔斯·汉迪的“人生长跑指南”。本书通过书信体形式，深度探讨了在数字时代背景下个人如何识别并跨越“第二曲线”。汉迪指出，无论组织还是个人，都受制于S型增长曲线，只有在第一曲线衰退前主动布局新的增长点，并保持内在价值的独立与进化，才能在不断变化的环境中获得持续且有意义的成长。",rating:4.5,highlights:["百岁管理大师的人生体悟：以书信体浓缩一生管理研究与个人经验，提供了从时间维度审视工作、学习与生活的全景视角","“第二曲线”理论的全面进阶：深刻揭示组织与个人的兴衰规律，教导读者如何在第一曲线的巅峰前就主动布局新的增长引擎","全场景下的持续进化方案：将第二曲线思维跨界应用于教育、职业规划、婚姻与家庭中，强调“变化才是常态”，鼓励持续自我重塑","面向Z世代的清醒处方：在科技高歌猛进的数字时代，提醒后人重视诚信、协作等软实力，保持独立判断，避免在算法与焦虑中迷失自我"]}],Me=[{id:"book-033",title:"枪炮、病菌与钢铁",author:"贾雷德·戴蒙德",cover:"https://cdn.weread.qq.com/weread/cover/99/YueWen_42766048/t6_YueWen_42766048.jpg",wereadLink:"https://weread.qq.com/web/reader/843329f0728c8ee08434fb1#outline?noScroll=1",link:"https://book.douban.com/subject/1813841/",tags:["人类历史","地理决定论","社会学","跨学科"],desc:"一部重新定义人类历史发展的宏大著作。作者贾雷德·戴蒙德通过生物学、地理学、人类学等多学科交叉视角，强有力地反驳了“种族决定论”和“西方文明优越论”。他提出，决定文明兴衰的关键并非种族，而是环境因素、地理格局以及动植物驯化的差异，这些自然条件的偶然性最终导致了技术、免疫力和权力结构的差异，从而重塑了现代世界的全球版图。",rating:4.8,highlights:["颠覆性的历史观：以环境与地理差异解释文明兴衰，有力冲击了长期流行的西方文明优越论，提供了理解人类历史的全新视角","跨学科的综合研究框架：巧妙融合生物学、地理学、历史学、社会学等多学科知识，重建人类文明演进的逻辑路径","系统揭示历史演变的机制：深入剖析农业、病菌传播与技术权力如何形成相互强化的循环，展示了文明发展背后复杂的资源互动","具备公共思想者的宏观视野：将严谨的科学研究转化为对人类命运与社会发展的深刻反思，为现代人理解自身在历史长河中的位置提供了绝佳参照"]},{id:"book-034",title:"中国社会各阶层分析",author:"梁晓声",cover:"https://cdn.weread.qq.com/weread/cover/0/yuewen_42682684/t6_yuewen_426826841728383400.jpg",wereadLink:"https://weread.qq.com/web/reader/085326e0728b493c085ade1#outline?noScroll=1",link:"https://book.douban.com/subject/35485315/",tags:["社会观察","阶层研究","现实主义"],desc:"茅盾文学奖得主梁晓声基于多年社会观察的现实题材力作。作者将快速变迁的中国社会划分为不同阶层，以平民视角细腻描摹各群体的生存状态、心理困境与阶层焦虑。全书不追求纯学术的枯燥分析，而是通过文学化的社会观察，勾勒出一幅当代中国社会的“浮世绘”，引导读者在时代坐标中找准定位，理解社会变迁背后的结构性逻辑。",rating:4.3,highlights:["平民视角下的社会“浮世绘”：通过细腻的笔触勾勒各阶层的生存逻辑与心理画像，帮助读者直观理解宏观社会结构","兼具现实痛点与精神深度：不仅呈现物质生活的差异，更深刻剖析阶层焦虑背后的价值困境，为理解当代社会提供人文参照","时代脉络中的命运书写：将个体命运置于历史事件的宏观背景中考察，展现了半个世纪以来社会变迁的深层脉络","文学笔触下的社会关怀：作为茅盾文学奖得主，作者通过富有故事性的叙事，既保留了批判性，又让文本充满了温暖的人文温度"]},{id:"book-021",title:"把自己作为方法",author:"项飙 / 吴琦",cover:"https://cdn.weread.qq.com/weread/cover/81/cpPlatform_3300003962/t6_cpPlatform_3300003962.jpg",wereadLink:"https://weread.qq.com/web/reader/d7532f80813ab680cg012708#outline?noScroll=1",link:"https://book.douban.com/subject/35092383/",tags:["社会学","访谈录","思想方法"],desc:"两代学人项飙与吴琦历时三年、跨越五地的深度对话实录。本书从项飙的个人经验切入，探讨了中国社会近半个世纪的变迁、全球化与民粹主义等宏大议题。在自我泛滥与思想受困的时代，作者提出“把自己作为方法”，指导读者如何在全球化年代重新定位自我、重建“附近”，并在个人体验与宏观叙事之间搭建起思考与行动的桥梁。",rating:4.6,highlights:["以“自我”切入回应宏大议题：示范如何在个人真实体验与全球化、社会变迁等宏观叙事之间搭建认知的桥梁","提供重建“附近”的行动指南：在自我泛滥的潮流中，指导读者如何审视现实，创造性地建设身边的小世界","兼具学术深度与极高可读性：将人类学、社会学的深刻理论洞察，巧妙融入生动的田野故事与双人生活化对谈中","跨越三年的思想碰撞：历时三年、跨越五地的持续对话结集，反思知识生产与公共讨论的真实处境"]}],$e=[{id:"book-035",title:"百岁人生：长寿时代的生活和工作",author:"琳达·格拉顿 / 安德鲁·斯科特",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/860/22902860/t6_22902860.jpg",wereadLink:"https://weread.qq.com/web/reader/30c323e0715d784c30c1e1b#outline?noScroll=1",link:"https://book.douban.com/subject/30245089/",tags:["人生规划","长寿时代","社会学"],desc:"基于伦敦商学院的经典课程，作者琳达·格拉顿与安德鲁·斯科特提出，面对一半概率活到100岁的长寿时代，传统的“学习-工作-退休”三段式人生模式已彻底失效。本书指导读者如何重新设计人生，通过拥抱多阶段人生模型，在更长的生命周期中平衡工作、学习与休闲，并强调在财务资产之外，更要注重健康、友谊与知识等“无形资产”的持续投入与增值。",rating:4.3,highlights:["重构人生模式：打破传统的“三段式”生活范式，提出充满弹性的“多阶段人生”模型，让工作与学习不再是线性的重复","从关注财务到“无形资产”：除了养老金，强调健康、友谊、社交网络与心理韧性等“无形资产”才是维持长寿生活质量的核心动力","职场与转型的系统规划：提供针对长寿时代的职业设计思路，涵盖何时转型、如何投资自身、怎样应对不确定性等实战框架","社会与制度的深度洞察：探讨长寿如何冲击养老金体系、劳动力市场与企业模式，帮助个人在宏观变革中把握主动权"]},{id:"book-00043",title:"重启吧！我的健康人生",author:"兰根·查特吉",cover:"https://cdn.weread.qq.com/weread/cover/80/cpplatform_kbrswv3bm7cix2zlyo6wtx/t6_cpplatform_kbrswv3bm7cix2zlyo6wtx1716362285.jpg",wereadLink:"https://weread.qq.com/web/reader/e8a32e80813ab8de4g0191c2#outline?noScroll=1",link:"https://book.douban.com/subject/36899697/",tags:["生活方式","预防医学","身心健康","自我管理"],desc:"英国临床医生基于20多年行医经验写就。本书主张“生活方式即良药”，围绕休息、饮食、运动和睡眠四个领域设计了20个微小行动计划，帮助现代人通过低成本的习惯改变逆转慢性问题。",rating:4.6,highlights:["提出99%的健康取决于日常习惯而非医学治疗，强调整体干预","构建“4×5”微行动框架，涵盖休息、饮食、运动、睡眠四个维度的20个小改变","兼顾科学深度与极简实操，如“12小时进食窗口”、“10分钟高强度运动”","关注现代职场人痛点，提供“小投入、大回报”的可叠加身心健康投资策略"]},{id:"book-00040",title:"你是你吃出来的：吃对少生病，病了这样吃",author:"夏萌",cover:"https://cdn.weread.qq.com/weread/cover/86/YueWen_920661/t6_YueWen_920661.jpg",wereadLink:"https://weread.qq.com/web/reader/7bb32c305e0c557bbdeab81#outline?noScroll=1",link:"https://book.douban.com/subject/27590675/",tags:["饮食科普","营养学","健康管理"],desc:"前安贞医院营养科主任夏萌结合十余年临床经验写成。本书颠覆“低油低脂”误区，提出回归进化的“65%植物+35%动物”膳食配比，并针对14种常见慢病给出“四分法”饮食干预方案，帮助读者重建健康饮食观。",rating:5,highlights:["指出多数慢病源于“蛋白质缺乏式营养不良”，打破常规低油低脂迷思","提出清晰量化的“65%植物类+35%动物类”科学饮食结构","针对冠心病、高血压等14种常见慢病提供实操性极强的“四分法”菜单","源于十万+真实临床病例，强调“一日三餐才是真正的保健品”"]},{id:"book-00041",title:"你是你吃出来的2",author:"夏萌",cover:"https://wfqqreader-1252317822.image.myqcloud.com/cover/883/35905883/t6_35905883.jpg",wereadLink:"https://weread.qq.com/web/reader/40532d007223e15b4052fae#outline?noScroll=1",link:"https://book.douban.com/subject/35340053/",tags:["饮食指导","科普","疾病防治"],desc:"聚焦高血压、高脂血症、糖尿病等7大常见慢病，从临床营养医学角度逐一破除诸如“血压高不能吃肉”等饮食误区，提供系统的“上游-中游-下游”疾病防控思路与个体化营养处方。",rating:4.6,highlights:["专攻7大常见慢性病，为患者提供针对性的“生病了怎么吃”个体化指导","科学辟谣，破除“血压高不能吃肉”、“胆固醇高不能吃鸡蛋”等常见误区","梳理疾病发生因果链条，帮助读者从源头找到健康干预的着力点","提供从一日三餐、运动到心态调养的具体可操作生活方式清单"]}],Ge=JSON.parse('{"title":"好书推荐","description":"读书心得、推荐书籍和阅读技巧","frontmatter":{"title":"好书推荐","date":"2024-01-01T16:00:00.000Z","description":"读书心得、推荐书籍和阅读技巧","categories":["growth"],"coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png","permalink":"/growth/books","tags":["悦读时光","资源推荐"]},"headers":[],"relativePath":"30.悦读时光/01.好书推荐.md","filePath":"30.悦读时光/01.好书推荐.md"}'),Ne={name:"30.悦读时光/01.好书推荐.md"},De=Object.assign(Ne,{setup(r){return(b,t)=>(a(),l("div",null,[t[0]||(t[0]=x("",4)),h(k,{books:g(Be)},null,8,["books"]),t[1]||(t[1]=x("",4)),h(k,{books:g(Ie)},null,8,["books"]),t[2]||(t[2]=e("h3",{id:"_2-2-商业化",tabindex:"-1"},[n("2.2 商业化 "),e("a",{class:"header-anchor",href:"#_2-2-商业化","aria-label":"Permalink to “2.2 商业化”"},"")],-1)),t[3]||(t[3]=e("blockquote",null,[e("p",null,[n("在追逐“独角兽”和规模扩张的狂热迷思之后，真正的商业高手正在重新回归本质："),e("strong",null,"盈利才是企业的核心护城河。"),n(" 这套书单为我们揭示了一种"),e("strong",null,"更具韧性的商业路径——“小而美”的极简经营"),n("。它教导我们如何拒绝低效的内卷与忙碌，通过“做更少但创造更多价值”的思维，打造在不确定时代下依然能保持稳定现金流的“慢公司”。")]),e("p",null,[e("strong",null,"商业的成功，往往源于敢于挑战“难而正确”的事"),n("。从皮克斯如何建立允许失败的创意土壤，到 Waze 如何通过解决被忽视的痛点实现跨越式成长，这些世界级案例证明了：卓越的组织不仅需要极简的流程与高效的分布式协作（远程办公），更需要一种“冷静”的文化，将利润置于规模之上。")])],-1)),h(k,{books:g(We)},null,8,["books"]),t[4]||(t[4]=e("h2",{id:"_3-效率与效能",tabindex:"-1"},[n("3. 效率与效能 "),e("a",{class:"header-anchor",href:"#_3-效率与效能","aria-label":"Permalink to “3. 效率与效能”"},"")],-1)),t[5]||(t[5]=e("blockquote",null,[e("p",null,[n("在信息过载与高压竞争的现代环境中，平庸与卓越的分水岭不再是做事的速度，而是"),e("strong",null,"决策的精度与责任的边界"),n("。这套书单为我们提供了一套从个人认知到组织协作的“效能防线”：首先，它"),e("strong",null,"引导我们完成从“时钟”到“罗盘”的思维跨越，打破盲目追求速度的迷思，确保将核心精力倾注在真正产生长远复利的“重要非紧急”事务之上"),n("。 真正的效能源于对复杂性的科学驾驭：")]),e("ul",null,[e("li",null,"通过“清单革命”式的认知防护，我们将最佳实践外化为可靠的防错系统，弥补人类在极端环境下的认知局限；"),e("li",null,"“猴子管理法”则以生动的视角重塑了职场协作的责任逻辑，教我们通过有效授权拒绝无谓的干扰，释放战略思考的精力；")])],-1)),h(k,{books:g(Ye)},null,8,["books"]),t[6]||(t[6]=e("h2",{id:"_4-学习与成长",tabindex:"-1"},[n("4. 学习与成长 "),e("a",{class:"header-anchor",href:"#_4-学习与成长","aria-label":"Permalink to “4. 学习与成长”"},"")],-1)),t[7]||(t[7]=e("blockquote",null,[e("p",null,[n("在信息爆炸与快速变革的时代，"),e("strong",null,"真正的成长不再是知识的被动堆砌，而是认知系统的彻底迭代"),n("。这套书单为我们构建了一个从底层思维到人生经营的闭环：")]),e("ul",null,[e("li",null,"首先，通过批判性思维与深度阅读夯实“元能力”，在泛滥的信息中识别本质，将他人的洞见转化为自己的血肉；"),e("li",null,"其次，利用“检索力”打破信息差，确保自己在任何领域都能快速获取高质量资源，掌握逆风而行的主动权。")]),e("p",null,[e("strong",null,"人生不是一场盲目的长跑，而是一场基于“原则”的精密经营"),n("。从达利欧的系统化决策，到纳瓦尔的财富与幸福逻辑，这些智者教导我们如何利用杠杆、坚持长期主义，将自己视作一家“人生有限公司”来经营。我们需要摆脱“优秀绵羊”式的被动驱动，通过识别成长的“第二曲线”，在巅峰时刻主动寻求突破，将自己打造成不可替代的稀缺资产。阅读这些经典，不仅是为了习得技能，更是为了在算法与焦虑的夹击中，重塑内心的宁静与独立判断的勇气。")])],-1)),h(k,{books:g(Te)},null,8,["books"]),t[8]||(t[8]=e("h2",{id:"_5-人文社科",tabindex:"-1"},[n("5. 人文社科 "),e("a",{class:"header-anchor",href:"#_5-人文社科","aria-label":"Permalink to “5. 人文社科”"},"")],-1)),t[9]||(t[9]=e("blockquote",null,[e("p",null,"在宏观历史与微观现实间构建认知：在碎片化与不确定性并存的时代，穿透表象、直达本质的洞察力成为必需。这套单为我们开启了两扇窗："),e("ul",null,[e("li",null,"一扇望向万年文明的宏大坐标，通过《枪炮、病菌与钢铁》的跨学科视野，拆解地理环境如何冷酷而偶然地重塑全球版图，彻底颠覆“文明优越论”的傲慢；"),e("li",null,"另一扇则照向当下社会的真实肌理，在梁晓声对各阶层生存困境的细腻描摹中，读懂大时代变革背后隐秘的结构性逻辑与阶层焦虑。")]),e("p",null,[e("strong",null,"人文思考的终极价值，在于如何将宏大叙事转化为个人的行动力量"),n("。正如项飙所倡导的“把自己作为方法”，这些著作不仅是知识的传递，更是思维的松绑。它们教导我们不再做时代的被动旁观者，而是学会在个人体验与宏观世界之间搭建桥梁，通过重建“附近”的小世界，在喧嚣中找准自我的定位。")])],-1)),h(k,{books:g(Me)},null,8,["books"]),t[10]||(t[10]=e("h2",{id:"_6-健康生活",tabindex:"-1"},[n("6. 健康生活 "),e("a",{class:"header-anchor",href:"#_6-健康生活","aria-label":"Permalink to “6. 健康生活”"},"")],-1)),t[11]||(t[11]=e("img",{src:$,style:{width:"100%","border-radius":"8px","margin-bottom":"20px"},alt:"about site background"},null,-1)),t[12]||(t[12]=e("blockquote",null,[e("p",null,[n("在面临大概率活到100岁的“长寿时代”，传统的线性人生模式正在失效。我们需要对“健康”进行一次彻底的认知重构："),e("strong",null,"健康不再仅仅是“没有疾病”，而是支撑我们跨越漫长生命周期、应对多阶段人生挑战的最核心“无形资产”"),n("。想要让这套生命系统长期平稳运行，真正的解法并不在医院的处方笺里，而是隐藏在我们每天的日常选择中。")]),e("p",null,[n("决定我们长期健康状态的，有 99 %取决于日常习惯。我们需要"),e("strong",null,"在休息、饮食、运动、睡眠这四个高频生活维度中，植入微小但杠杆率极高的改变"),n("（例如12小时进食窗口、10分钟高强度运动、睡前屏蔽数字通知等）。用最低的执行成本，置换身心状态的巨大回报。")])],-1)),h(k,{books:g($e)},null,8,["books"])]))}});export{Ge as __pageData,De as default};
diff --git "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.DaAm_LXA.js" "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.BQj2m1KY.js"
similarity index 99%
rename from "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.DaAm_LXA.js"
rename to "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.BQj2m1KY.js"
index 4eb9de55..c93d6a92 100644
--- "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.DaAm_LXA.js"
+++ "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.BQj2m1KY.js"
@@ -1 +1 @@
-import{_ as o,g as a,h as r,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","frontmatter":{"date":"2025-03-06T11:42:20.000Z","title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png","permalink":"/pages/growth/reading-tips","sticky":1,"top":true,"categories":["悦读时光"],"tags":["悦读时光"]},"headers":[],"relativePath":"30.悦读时光/10.读书三要三不要.md","filePath":"30.悦读时光/10.读书三要三不要.md"}'),i={name:"30.悦读时光/10.读书三要三不要.md"};function l(n,t,s,p,g,h){return r(),a("div",null,[...t[0]||(t[0]=[e('Are you an LLM? You can read better optimized documentation at /30.悦读时光/10.读书三要三不要.md for this page in Markdown format
读书“三要”和“三不要”
摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了读书的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。
1. 我们为什么需要读书？
读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：
- 深度与严谨：书籍往往是创作者多年思考、长期写作的产物，经过专业编辑反复修改校对，知识密度远高于日常谈话或碎片内容。
- 专注与反刍：读书允许读者专注其中，书中的信息因此往往条理清晰、逻辑严密，语言也更为精练紧凑。读者可以随时停下翻回反复琢磨、推敲。相比之下，电视画面一闪而过，很难进行层层递进的深入分析。
- 知识密度高：沉淀在书中的信息，往往逻辑性强、语言精练紧凑（即所谓的“书面语”），知识含量远超日常碎片化信息。认真读完一本好书，获得的知识与思考深度，往往超过看几部剧、刷几小时短视频，甚至聊几个小时天的总和。
认真读一本好书，往往比看一部电视剧或漫无目的地浏览网页能获得更多知识。但这并不意味着“只要捧起书就一定有收获”，关键在于怎么读。
2. 读书"三要"
第一“要”：完整地读，整本地读
对于好书，要完整地读、整本地读，不要只捡结论。
很多人习惯直接看结论和观点，觉得这样效率高。但这样做有一个根本缺陷：你只得到了答案，却错过了思考方法本身。
掌握思考方法的唯一途径，是通过完整地阅读来观摩优秀的大师是如何思考的——他们如何一步步推导出结论，如何分析和批判不同的观点，遇到困难时又如何转换视角。看得多了，自然能渐渐窥见门道，再辅以勤恳的思考训练，才能真正将思维方法内化。
相反，只知道观点、不掌握方法的后果，是"刻舟求剑"：
- 理论的适用条件只要稍有些变化，便无所适从，只会把那几条观点反复背诵套用。
- 经典著作往往具有复杂性，读起来必须动脑筋。只背诵结论不是传授学问的方法，而是培养盲从信徒的方法，而不是做学问的路径。
第二“要”：带着问题去读，构建知识树
要带着问题去读书，将散乱的信息构建成清晰的知识树。
每一本知识性书籍，背后都有一个（或一组）核心问题。知识性书籍的诞生，往往是为了解答、批驳或赞同某个特定的观点，好的作者会先把他要回答的问题交代清楚，再展开论述。
还原“问题情境”：很多流传至今的名著，现代人之所以读不进去，是因为对当时的“问题情境”一无所知。许多经典在当年都是锋芒毕露、针锋相对的论辩性作品，是为了解决当时的痛点而生。一旦你了解了这些背景，事先知道了这本书在学科谱系中的位置，阅读就会变得像追踪一场精彩的辩论一样有趣。
连点成树：带着亟待回答的问题去读书，不但不会觉得枯燥，反而能充分享受新知的乐趣。这样吸收进来的知识不再是无意义的堆积物，而是沿着“批判—反批判—再批判”线索生长出来的、清晰的知识树。有了知识树，才能真正形成自己的思想观念，才能条理清晰地理解世界。
善用指引：老师或导读无法代替你读书，但可以帮你解释问题情境、指明知识门径、交代语境（所谓“师傅领进门，修行在个人”），大大提高你的阅读效率和理解深度。
第三“要”：与人（或AI）讨论，检验理解的试金石
读完一本书，要找人讨论（也可以与能力较强的 AI 工具深度对话），讨论是检验理解的试金石。
独自阅读常形成模糊的理解链条，容易产生“我懂了”的幻觉，唯有能用自己的语言让别人听懂，才算真正理解。
真正的理解有一个更高的标准：把书中的观点用自己的话讲给别人听，让对方也能听懂。"看懂"和"讲清楚"之间，差着十万八千里。很多时候，所谓"看懂"，不过是在脑中形成了一条模糊、不连贯的"理解链"。只有当你必须用自己的语言向别人复述，并且要做到言之成理、自圆其说时，那些薄弱、缺失的环节才会立刻暴露出来（含糊的地方你会直接卡壳）。
在“刁难”中查漏补缺，讲述的过程会倒逼你：
- 把逻辑理清楚，确保"因为"和"所以"之间真的成立；
- 发现自己还没搞懂的地方，带着新问题回去再读；
- 在他人的追问和质疑中，不断深化理解。
我曾尝试将几本书的内容讲给没时间阅读的朋友听。他们可不会把我当“老师”来尊敬，遇到疑问或不同意见就会随时打断，甚至以把我“问倒”为乐。结果是，我原以为完全看懂的书，被他们一通“胡搅蛮缠”后，发现竟然还有那么多没吃透的地方，只能回去重读。下一次见面时，我必须把他们的质疑解释清楚。但也正因如此，那几本书成了我书架上理解最透彻、收获最大的书。
这里的讲述不是单方面的课堂宣讲，而是面对面的平等讨论、寻找高质量的对话。如果对话者水平高、讨论深入，效果极佳。在如今，你甚至可以把逻辑推理能力较强的 AI 工具当作你的“讨论搭子”，让它对你的观点进行提问和反驳，以此来迫使自己真正透彻地掌握知识。
3. 读书"三不要"
第一“不要”：不要怀揣哀怨心态，避免读书目的被异化
不要有哀怨心态，被哀怨情绪控制，就失去了读书的平常心和客观理解力。
读书多不等于人才，未提供社会价值则难致富。若因此怨天尤人，读书将异化为排解情绪与博取关注的工具。
一个人一旦被哀怨情绪控制，就会彻底失去读书的平常心和客观理解力。
警惕“价值转化”的幻觉：有些人确实读了不少书，说起话来头头是道，也时常能得到他人的赞许。这容易让人产生一种幻觉，自认是个“被埋没的人才”。但实际上，读书多不等于人才，真正的财富来源于你能否为别人提供有价值的商品或服务。得到别人的口头赞许，与让别人掏钱买你的服务之间，有着巨大的鸿沟。
警惕心态失衡与怨天尤人：当自诩为“人才”却迟迟未能发家致富时，很多人不会反思自己是否创造了真正的社会价值，而是将原因归咎于外界，静等着“伯乐”来发掘。当看到身边不读书的人纷纷买车买房时，这种着急就会演变成气急败坏、鄙夷与哀怨，甚至觉得“社会太不公平”。
防止阅读初衷的异化：这是最致命的一点。当怨气占据大脑，读书对于这类人来说，就不再是客观接受信息、理解世界的方式了,而是沦为了一种排解郁闷、打发时间的消极手段。他们的关注点会从书本内容彻底转移到别人的眼光上，内心的潜台词变成了表演：“你们还没看到我刻苦读书的身姿吗？还不承认我是个人才吗？还不提高我的收入吗？”
第二“不要”：不要玩物丧志，陷入对物理媒介的过度迷恋
不要玩物丧志，过度沉溺书籍细节与附属品会导致“玩物丧志”。若读书脱离获取信息的目的，则难以在知识学问上有所成就。
回归阅读的本质：读书的核心目的是为了获取信息、汲取知识，而不是为了把玩那一束装订起来的纸张。随着阅读的深入，很多人容易沉溺于书籍带来的附加体验（如纸张的手感、油墨的香气、版本的考究）。这种对物理形态的偏好可以理解，但必须有所节制，一旦喧宾夺主，甚至因此拒绝更高效的媒介，就是南辕北辙了。
顺应媒介演进的效率趋势，时代趋势不可逆：纵观历史，从丝绸、竹简到纸张，再到如今的电子书，信息媒介的演进始终朝着“更低成本、更高效率”的方向发展。在信息时代，电子书在便携性、易储性、内容可检索性（如一键全文搜索）以及知识共享方面，拥有纸质书无法比拟的优势，这对于快速定位关键信息、构建个人知识树而言是极大的助力。
警惕被“旧习惯”绑架：很多抗拒电子书的人，强调的种种理由其实与“读书”本身关系不大，更多是不愿改变旧有的阅读习惯，不愿放弃读书以外的把玩乐趣。为了坚持这种旧习惯，而不惜牺牲信息流转和获取的效率，这在信息爆炸的时代是得不偿失的。
积极拥抱新媒介的红利：真正以求知为目的的人，从来都会积极拥抱新的传播工具。在这个时代，固守传统媒介的人获取知识的成本会越来越高、效率越来越低；而愿意接纳新媒介的阅读者，则能以更轻松、愉快的方式，获取最丰沛的知识。
第三“不要”：不要只读书不知现实，避免知识结构陷入“真空”
书籍仅承载极少知识，大量隐性知识存于现实社会。只读书会导致知识结构缺陷，难以应对实务，故不可脱离现实。
书本知识只是认识世界的一小部分，脱离现实的纯粹阅读，会导致知识结构的严重扭曲。
认清书籍的局限性：知识以各种方式存在于社会的各个角落，书籍所承载的仅仅是世界知识总量中极小的一部分。由于书籍要求书面化、系统且连贯，它必然无法记录下大量不稳定、转瞬即逝、碎片化或难以用语言明确表达的知识。
重视庞大的“隐性知识”：在现实社会中，存在着诸如谈话交流、个人经验、行为方式、商业模式及人际关系等海量的非书本知识。如果一个人只是一味读书而极少参与社会实践，就会完全错失这部分在数量上更为庞大的知识宝库，导致知识结构出现重大缺陷。
警惕脱离现实的“扭曲认知”：如果只读书而不参与社会实践，会导致知识结构存在重大缺陷，在处理现实事务时会暴露无遗。在数学、计算机或棋类等高度抽象、无需太多社会经验的领域，仅凭逻辑推演确实可以成就“少年天才”。但真实世界的绝大多数领域（如法律、商业、服务业等）极度依赖从业者的社会经验和现实感。只读书不仅会造成处理实际事务时能力低下，更会以一小部分取代整体，形成对真实世界的扭曲认知。仅靠抽象逻辑是无法解决复杂现实问题的，这也是为什么世界上会有15岁的黑客，却绝不会有15岁的人事经理或法官。
4. 让书籍成为连接自我与现实的桥梁
读书从来不是为了把自己变成一个装满各类观点的“两脚书橱”，而是为了升级我们思考现实、解决问题的“底层操作系统”。
无论是坚持“三要”（掌握方法、构建体系、检验真知），还是警惕“三不要”（拒绝异化、拥抱高效、扎根现实），最终的指向都是同一个：打破书本与现实的壁垒，让知识真正为你所用。 在获取信息门槛越来越低的今天，独立思考和将知识转化为实际价值的能力愈发珍贵。
愿我们都能带着平常心去阅读，在书中观摩大师的智慧，在现实中创造真实的价值，享受纯粹而充实的悦读时光。
',43)])])}const u=o(i,[["render",l]]);export{c as __pageData,u as default};
+import{_ as o,g as a,h as r,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","frontmatter":{"date":"2025-03-06T11:42:20.000Z","title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png","permalink":"/pages/growth/reading-tips","sticky":1,"top":true,"categories":["悦读时光"],"tags":["悦读时光"]},"headers":[],"relativePath":"30.悦读时光/10.读书三要三不要.md","filePath":"30.悦读时光/10.读书三要三不要.md"}'),i={name:"30.悦读时光/10.读书三要三不要.md"};function l(n,t,s,p,g,h){return r(),a("div",null,[...t[0]||(t[0]=[e('Are you an LLM? You can read better optimized documentation at /30.悦读时光/10.读书三要三不要.md for this page in Markdown format
读书“三要”和“三不要”
摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了读书的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。
1. 我们为什么需要读书？
读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：
- 深度与严谨：书籍往往是创作者多年思考、长期写作的产物，经过专业编辑反复修改校对，知识密度远高于日常谈话或碎片内容。
- 专注与反刍：读书允许读者专注其中，书中的信息因此往往条理清晰、逻辑严密，语言也更为精练紧凑。读者可以随时停下翻回反复琢磨、推敲。相比之下，电视画面一闪而过，很难进行层层递进的深入分析。
- 知识密度高：沉淀在书中的信息，往往逻辑性强、语言精练紧凑（即所谓的“书面语”），知识含量远超日常碎片化信息。认真读完一本好书，获得的知识与思考深度，往往超过看几部剧、刷几小时短视频，甚至聊几个小时天的总和。
认真读一本好书，往往比看一部电视剧或漫无目的地浏览网页能获得更多知识。但这并不意味着“只要捧起书就一定有收获”，关键在于怎么读。
2. 读书"三要"
第一“要”：完整地读，整本地读
对于好书，要完整地读、整本地读，不要只捡结论。
很多人习惯直接看结论和观点，觉得这样效率高。但这样做有一个根本缺陷：你只得到了答案，却错过了思考方法本身。
掌握思考方法的唯一途径，是通过完整地阅读来观摩优秀的大师是如何思考的——他们如何一步步推导出结论，如何分析和批判不同的观点，遇到困难时又如何转换视角。看得多了，自然能渐渐窥见门道，再辅以勤恳的思考训练，才能真正将思维方法内化。
相反，只知道观点、不掌握方法的后果，是"刻舟求剑"：
- 理论的适用条件只要稍有些变化，便无所适从，只会把那几条观点反复背诵套用。
- 经典著作往往具有复杂性，读起来必须动脑筋。只背诵结论不是传授学问的方法，而是培养盲从信徒的方法，而不是做学问的路径。
第二“要”：带着问题去读，构建知识树
要带着问题去读书，将散乱的信息构建成清晰的知识树。
每一本知识性书籍，背后都有一个（或一组）核心问题。知识性书籍的诞生，往往是为了解答、批驳或赞同某个特定的观点，好的作者会先把他要回答的问题交代清楚，再展开论述。
还原“问题情境”：很多流传至今的名著，现代人之所以读不进去，是因为对当时的“问题情境”一无所知。许多经典在当年都是锋芒毕露、针锋相对的论辩性作品，是为了解决当时的痛点而生。一旦你了解了这些背景，事先知道了这本书在学科谱系中的位置，阅读就会变得像追踪一场精彩的辩论一样有趣。
连点成树：带着亟待回答的问题去读书，不但不会觉得枯燥，反而能充分享受新知的乐趣。这样吸收进来的知识不再是无意义的堆积物，而是沿着“批判—反批判—再批判”线索生长出来的、清晰的知识树。有了知识树，才能真正形成自己的思想观念，才能条理清晰地理解世界。
善用指引：老师或导读无法代替你读书，但可以帮你解释问题情境、指明知识门径、交代语境（所谓“师傅领进门，修行在个人”），大大提高你的阅读效率和理解深度。
第三“要”：与人（或AI）讨论，检验理解的试金石
读完一本书，要找人讨论（也可以与能力较强的 AI 工具深度对话），讨论是检验理解的试金石。
独自阅读常形成模糊的理解链条，容易产生“我懂了”的幻觉，唯有能用自己的语言让别人听懂，才算真正理解。
真正的理解有一个更高的标准：把书中的观点用自己的话讲给别人听，让对方也能听懂。"看懂"和"讲清楚"之间，差着十万八千里。很多时候，所谓"看懂"，不过是在脑中形成了一条模糊、不连贯的"理解链"。只有当你必须用自己的语言向别人复述，并且要做到言之成理、自圆其说时，那些薄弱、缺失的环节才会立刻暴露出来（含糊的地方你会直接卡壳）。
在“刁难”中查漏补缺，讲述的过程会倒逼你：
- 把逻辑理清楚，确保"因为"和"所以"之间真的成立；
- 发现自己还没搞懂的地方，带着新问题回去再读；
- 在他人的追问和质疑中，不断深化理解。
我曾尝试将几本书的内容讲给没时间阅读的朋友听。他们可不会把我当“老师”来尊敬，遇到疑问或不同意见就会随时打断，甚至以把我“问倒”为乐。结果是，我原以为完全看懂的书，被他们一通“胡搅蛮缠”后，发现竟然还有那么多没吃透的地方，只能回去重读。下一次见面时，我必须把他们的质疑解释清楚。但也正因如此，那几本书成了我书架上理解最透彻、收获最大的书。
这里的讲述不是单方面的课堂宣讲，而是面对面的平等讨论、寻找高质量的对话。如果对话者水平高、讨论深入，效果极佳。在如今，你甚至可以把逻辑推理能力较强的 AI 工具当作你的“讨论搭子”，让它对你的观点进行提问和反驳，以此来迫使自己真正透彻地掌握知识。
3. 读书"三不要"
第一“不要”：不要怀揣哀怨心态，避免读书目的被异化
不要有哀怨心态，被哀怨情绪控制，就失去了读书的平常心和客观理解力。
读书多不等于人才，未提供社会价值则难致富。若因此怨天尤人，读书将异化为排解情绪与博取关注的工具。
一个人一旦被哀怨情绪控制，就会彻底失去读书的平常心和客观理解力。
警惕“价值转化”的幻觉：有些人确实读了不少书，说起话来头头是道，也时常能得到他人的赞许。这容易让人产生一种幻觉，自认是个“被埋没的人才”。但实际上，读书多不等于人才，真正的财富来源于你能否为别人提供有价值的商品或服务。得到别人的口头赞许，与让别人掏钱买你的服务之间，有着巨大的鸿沟。
警惕心态失衡与怨天尤人：当自诩为“人才”却迟迟未能发家致富时，很多人不会反思自己是否创造了真正的社会价值，而是将原因归咎于外界，静等着“伯乐”来发掘。当看到身边不读书的人纷纷买车买房时，这种着急就会演变成气急败坏、鄙夷与哀怨，甚至觉得“社会太不公平”。
防止阅读初衷的异化：这是最致命的一点。当怨气占据大脑，读书对于这类人来说，就不再是客观接受信息、理解世界的方式了,而是沦为了一种排解郁闷、打发时间的消极手段。他们的关注点会从书本内容彻底转移到别人的眼光上，内心的潜台词变成了表演：“你们还没看到我刻苦读书的身姿吗？还不承认我是个人才吗？还不提高我的收入吗？”
第二“不要”：不要玩物丧志，陷入对物理媒介的过度迷恋
不要玩物丧志，过度沉溺书籍细节与附属品会导致“玩物丧志”。若读书脱离获取信息的目的，则难以在知识学问上有所成就。
回归阅读的本质：读书的核心目的是为了获取信息、汲取知识，而不是为了把玩那一束装订起来的纸张。随着阅读的深入，很多人容易沉溺于书籍带来的附加体验（如纸张的手感、油墨的香气、版本的考究）。这种对物理形态的偏好可以理解，但必须有所节制，一旦喧宾夺主，甚至因此拒绝更高效的媒介，就是南辕北辙了。
顺应媒介演进的效率趋势，时代趋势不可逆：纵观历史，从丝绸、竹简到纸张，再到如今的电子书，信息媒介的演进始终朝着“更低成本、更高效率”的方向发展。在信息时代，电子书在便携性、易储性、内容可检索性（如一键全文搜索）以及知识共享方面，拥有纸质书无法比拟的优势，这对于快速定位关键信息、构建个人知识树而言是极大的助力。
警惕被“旧习惯”绑架：很多抗拒电子书的人，强调的种种理由其实与“读书”本身关系不大，更多是不愿改变旧有的阅读习惯，不愿放弃读书以外的把玩乐趣。为了坚持这种旧习惯，而不惜牺牲信息流转和获取的效率，这在信息爆炸的时代是得不偿失的。
积极拥抱新媒介的红利：真正以求知为目的的人，从来都会积极拥抱新的传播工具。在这个时代，固守传统媒介的人获取知识的成本会越来越高、效率越来越低；而愿意接纳新媒介的阅读者，则能以更轻松、愉快的方式，获取最丰沛的知识。
第三“不要”：不要只读书不知现实，避免知识结构陷入“真空”
书籍仅承载极少知识，大量隐性知识存于现实社会。只读书会导致知识结构缺陷，难以应对实务，故不可脱离现实。
书本知识只是认识世界的一小部分，脱离现实的纯粹阅读，会导致知识结构的严重扭曲。
认清书籍的局限性：知识以各种方式存在于社会的各个角落，书籍所承载的仅仅是世界知识总量中极小的一部分。由于书籍要求书面化、系统且连贯，它必然无法记录下大量不稳定、转瞬即逝、碎片化或难以用语言明确表达的知识。
重视庞大的“隐性知识”：在现实社会中，存在着诸如谈话交流、个人经验、行为方式、商业模式及人际关系等海量的非书本知识。如果一个人只是一味读书而极少参与社会实践，就会完全错失这部分在数量上更为庞大的知识宝库，导致知识结构出现重大缺陷。
警惕脱离现实的“扭曲认知”：如果只读书而不参与社会实践，会导致知识结构存在重大缺陷，在处理现实事务时会暴露无遗。在数学、计算机或棋类等高度抽象、无需太多社会经验的领域，仅凭逻辑推演确实可以成就“少年天才”。但真实世界的绝大多数领域（如法律、商业、服务业等）极度依赖从业者的社会经验和现实感。只读书不仅会造成处理实际事务时能力低下，更会以一小部分取代整体，形成对真实世界的扭曲认知。仅靠抽象逻辑是无法解决复杂现实问题的，这也是为什么世界上会有15岁的黑客，却绝不会有15岁的人事经理或法官。
4. 让书籍成为连接自我与现实的桥梁
读书从来不是为了把自己变成一个装满各类观点的“两脚书橱”，而是为了升级我们思考现实、解决问题的“底层操作系统”。
无论是坚持“三要”（掌握方法、构建体系、检验真知），还是警惕“三不要”（拒绝异化、拥抱高效、扎根现实），最终的指向都是同一个：打破书本与现实的壁垒，让知识真正为你所用。 在获取信息门槛越来越低的今天，独立思考和将知识转化为实际价值的能力愈发珍贵。
愿我们都能带着平常心去阅读，在书中观摩大师的智慧，在现实中创造真实的价值，享受纯粹而充实的悦读时光。
',43)])])}const u=o(i,[["render",l]]);export{c as __pageData,u as default};
diff --git "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.DaAm_LXA.lean.js" "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.BQj2m1KY.lean.js"
similarity index 96%
rename from "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.DaAm_LXA.lean.js"
rename to "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.BQj2m1KY.lean.js"
index 7bfb6091..beedd845 100644
--- "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.DaAm_LXA.lean.js"
+++ "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_10.\350\257\273\344\271\246\344\270\211\350\246\201\344\270\211\344\270\215\350\246\201.md.BQj2m1KY.lean.js"
@@ -1 +1 @@
-import{_ as o,g as a,h as r,U as e}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","frontmatter":{"date":"2025-03-06T11:42:20.000Z","title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png","permalink":"/pages/growth/reading-tips","sticky":1,"top":true,"categories":["悦读时光"],"tags":["悦读时光"]},"headers":[],"relativePath":"30.悦读时光/10.读书三要三不要.md","filePath":"30.悦读时光/10.读书三要三不要.md"}'),i={name:"30.悦读时光/10.读书三要三不要.md"};function l(n,t,s,p,g,h){return r(),a("div",null,[...t[0]||(t[0]=[e("",43)])])}const u=o(i,[["render",l]]);export{c as __pageData,u as default};
+import{_ as o,g as a,h as r,U as e}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","frontmatter":{"date":"2025-03-06T11:42:20.000Z","title":"读书“三要”和“三不要”","description":"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png","permalink":"/pages/growth/reading-tips","sticky":1,"top":true,"categories":["悦读时光"],"tags":["悦读时光"]},"headers":[],"relativePath":"30.悦读时光/10.读书三要三不要.md","filePath":"30.悦读时光/10.读书三要三不要.md"}'),i={name:"30.悦读时光/10.读书三要三不要.md"};function l(n,t,s,p,g,h){return r(),a("div",null,[...t[0]||(t[0]=[e("",43)])])}const u=o(i,[["render",l]]);export{c as __pageData,u as default};
diff --git "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.Be9IJNun.js" "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.C7EJFVmA.js"
similarity index 99%
rename from "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.Be9IJNun.js"
rename to "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.C7EJFVmA.js"
index 10430b78..cefcd210 100644
--- "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.Be9IJNun.js"
+++ "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.C7EJFVmA.js"
@@ -1 +1 @@
-import{_ as e,g as r,h as t,U as i}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","frontmatter":{"date":"2025-11-10T12:52:28.000Z","title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","permalink":"/growth/distinguish-useful-information","categories":["资源推荐"],"tags":["信息筛选","个人成长"]},"headers":[],"relativePath":"30.悦读时光/21.如何甄别真正有用的信息.md","filePath":"30.悦读时光/21.如何甄别真正有用的信息.md"}'),l={name:"30.悦读时光/21.如何甄别真正有用的信息.md"};function o(n,a,s,h,d,_){return t(),r("div",null,[...a[0]||(a[0]=[i('Are you an LLM? You can read better optimized documentation at /30.悦读时光/21.如何甄别真正有用的信息.md for this page in Markdown format
如何甄别真正有用的信息
摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。
在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。
1. 打破“信息差”的系统性错觉
过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“人本身的差距”，具体体现在三个层面：
1.1 表面是你在筛选信息，实际是信息在筛选人
举个最常见的例子：大家都知道做技术输出、写独立博客或做个人产品能带来长期的复利，但为什么真正跑通全栈并沉淀下来的人凤毛麟角？
阻碍多数人的原因通常有三个：
- 缺乏持久化机制、执行断层：无法在短期内看到正向反馈（ROI），导致进程中途中断，缺乏持续输出的执行力（如技术文章更新、用户运营）。
- 缺乏深度计算：只是浮于表面的搬运，没有沉下心来对技术或业务进行深度解析与架构思考。
- 对不确定性（Uncertainty）的恐惧：看不到确定性的回报，对投入产出比产生动摇，导致长期投入的决策被取消。
面对这些公开的“赚钱/成长路径”，看似是我们在评估它，实际上是这些高门槛的路径在天然地筛选掉那些缺乏定力和长远产品嗅觉的人。
1.2 警惕算法构建的“信息茧房”
在网络推荐算法和同温层环境的双重作用下，我们每天接收的输入往往带有严重的偏置。这种不够客观的环境，容易导致我们在遇到真正有价值、但与既有认知冲突的客观观点时，产生本能的防御和抵触。
对于开发者和内容创作者而言，打破认知茧房本身就是一种巨大的信息差。任何技术栈或商业模式，都需要博采众长。不要对非本领域的观点一味抛出异常，而是要建立辩证的“中间件”来过滤和吸收，做好信息的甄别与筛选。
2. 信息泛滥与脑力带宽的消耗
信息即权力，掌握高维信息的人确实拥有更强的资源调配能力。但关键在于，没有人有义务把复杂的底层逻辑拆解成现成的方法论，手把手教到完全理解为止。真正造成人与人之间差距的，是解析和编译信息的能力——同样的信息，不同的人能提炼出完全不同的价值。
2.1 从“追求差”到“对抗泛滥”
如今的问题早已不是信息匮乏，而是信息熵增与泛滥。这不仅带来了极度内卷的竞争，还伴随着传播过程中的信息失真。市面上很多被大肆宣扬的“风口”，仔细扒开源码就会发现：你所看到的，其实都是别人精心设计好让你看到的。
当一个赛道人人都争先恐后时，如果你真想创造价值，不如“反者道之动”，静观其变，等待系统重构的新机会。拥挤的赛道最终必然走向卷利润、卷价格的“劣币驱逐良币”死循环。
2.2 无效信息是对算力的极大消耗
很多人把赚不到钱、做不成事归结于“信息积累不够”，于是疯狂地囤积资料、拼命地订阅各种干货，试图通过扩大信息摄入量来超越别人。 这是一个极其危险的谬论。获取和处理信息，本质上是一件极其消耗系统资源（精力和能量）的事情。
如果一个人单凭拼凑信息就能战胜市场，那大家都不需要埋头精耕细作了。人的脑容量和认知带宽是有限的，一旦缓存（Cache）被大量低质、无用的噪音占满，真正高价值的信号就无法进入，想得太多、做得太少，只会引发严重的内耗。
3. 价值创造的核心：思考+执行，突破信息壁垒
信息本质是工具，而非目的，人的核心竞争力永远是“思考+执行”，二者形成的能力壁垒，远高于单纯的信息壁垒：思考 + 执行 > 纯执行 + 不思考 > 纯思考 + 不执行 > 不思考 + 不执行
- 思考+执行：通过思考判断信息价值，通过执行验证选择，形成“信息-判断-实践-反馈”的闭环。
- 执行+不思考：机械落地但缺乏方向，效率低下但可能偶然踩中机会。
- 思考+不执行：仅停留在“知道”阶段，信息无法转化为任何价值。
- 不思考+不执行：完全被动接收信息，与机会绝缘。
“思考+执行”之所以重要，是因为它们构成了反馈闭环：思考是为了对输入的信息进行校验和逻辑判断，执行是为了将假设放入真实环境中跑通测试，从而向目标逼近。
信息不对称的根源，其实是“内部能力不对称”。将相同的技术趋势、项目机会放在两位开发者面前：前者能通过思考拆解落地路径、通过执行验证可行性；后者仅停留在“了解”层面，差距便由此产生。人们最终能获得的价值，取决于自身的思考深度、执行力度、认知高度——想要获得更多，唯一路径是“精进自身”，让能力匹配目标。
真正有价值的信息，如果传达给一个没有执行力的人，就永远停留在“已知”的内存态，无法落盘，吸收、运用和产生价值的任何一个环节都不会发生。
我们通常以为自己没成事是因为缺少某个关键的“信息差”，实际上连这个“以为”的诊断都错了。真正的原因，往往是思考的深度和执行的颗粒度不到位，导致机会流失。人终归只能赚到自己系统架构支撑得起的那部分收益，想要获得更多，唯一的路径是重构和精进自己。
4. 行动指南
4.1 信息筛选：果断做减法，锚定核心目标
- 停止抱怨外界信息的真伪，主动建立个人过滤机制，拒绝"信息焦虑"，定期清理无效信息源（如低价值技术社群、重复资讯推送）。
- 明确自身阶段目标（如“3个月掌握某框架落地”“半年实现副业变现”），仅筛选与目标强相关的信息，把有限的算力留给最高优的任务。
4.2 信息解读：穿透表象，洞察未言之意
- 接收信息时（如技术文章、行业分享），不仅要关注"说了什么"，更要洞察"没说什么"（如技术的适用场景、潜在坑点、变现逻辑的隐藏环节）。
- 优先与高信噪比人群深度交流（如资深开发者、落地型创业者、领域专家），这类沟通往往直击本质、减少冗余，能快速触达核心信息与隐性经验，同时反向倒逼自身思考质量的提升。
4.3 差异破局：向内求索，强化“思考+执行”
与其说世界上存在信息差，不如说是"人差"。将同样的文档和源码置于两人面前，由于"底层编译器"（认知框架与执行系统）的差异，前者的洞察与后者的产出必然判若云泥。一切信息不对称的表象之下，真正分野的永远是内在的认知深度与执行密度。我们只有通过持续的思考和执行提升自己的能力，才能在信息时代中获得价值。
- 停止抱怨"信息不真实"这类外部归因，把精力放在自己能掌控的事情上——提升思考深度和执行效率。
- 建立"信息落地清单"：每当获得有价值的信息，立刻拆解成三个部分——思考要点（比如是否适合自己）、执行步骤（比如本周验证什么）、反馈节点（比如两周后复盘效果），别让信息躺在那里吃灰。
',37)])])}const u=e(l,[["render",o]]);export{c as __pageData,u as default};
+import{_ as e,g as r,h as t,U as i}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","frontmatter":{"date":"2025-11-10T12:52:28.000Z","title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","permalink":"/growth/distinguish-useful-information","categories":["资源推荐"],"tags":["信息筛选","个人成长"]},"headers":[],"relativePath":"30.悦读时光/21.如何甄别真正有用的信息.md","filePath":"30.悦读时光/21.如何甄别真正有用的信息.md"}'),l={name:"30.悦读时光/21.如何甄别真正有用的信息.md"};function o(n,a,s,h,d,_){return t(),r("div",null,[...a[0]||(a[0]=[i('Are you an LLM? You can read better optimized documentation at /30.悦读时光/21.如何甄别真正有用的信息.md for this page in Markdown format
如何甄别真正有用的信息
摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。
在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。
1. 打破“信息差”的系统性错觉
过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“人本身的差距”，具体体现在三个层面：
1.1 表面是你在筛选信息，实际是信息在筛选人
举个最常见的例子：大家都知道做技术输出、写独立博客或做个人产品能带来长期的复利，但为什么真正跑通全栈并沉淀下来的人凤毛麟角？
阻碍多数人的原因通常有三个：
- 缺乏持久化机制、执行断层：无法在短期内看到正向反馈（ROI），导致进程中途中断，缺乏持续输出的执行力（如技术文章更新、用户运营）。
- 缺乏深度计算：只是浮于表面的搬运，没有沉下心来对技术或业务进行深度解析与架构思考。
- 对不确定性（Uncertainty）的恐惧：看不到确定性的回报，对投入产出比产生动摇，导致长期投入的决策被取消。
面对这些公开的“赚钱/成长路径”，看似是我们在评估它，实际上是这些高门槛的路径在天然地筛选掉那些缺乏定力和长远产品嗅觉的人。
1.2 警惕算法构建的“信息茧房”
在网络推荐算法和同温层环境的双重作用下，我们每天接收的输入往往带有严重的偏置。这种不够客观的环境，容易导致我们在遇到真正有价值、但与既有认知冲突的客观观点时，产生本能的防御和抵触。
对于开发者和内容创作者而言，打破认知茧房本身就是一种巨大的信息差。任何技术栈或商业模式，都需要博采众长。不要对非本领域的观点一味抛出异常，而是要建立辩证的“中间件”来过滤和吸收，做好信息的甄别与筛选。
2. 信息泛滥与脑力带宽的消耗
信息即权力，掌握高维信息的人确实拥有更强的资源调配能力。但关键在于，没有人有义务把复杂的底层逻辑拆解成现成的方法论，手把手教到完全理解为止。真正造成人与人之间差距的，是解析和编译信息的能力——同样的信息，不同的人能提炼出完全不同的价值。
2.1 从“追求差”到“对抗泛滥”
如今的问题早已不是信息匮乏，而是信息熵增与泛滥。这不仅带来了极度内卷的竞争，还伴随着传播过程中的信息失真。市面上很多被大肆宣扬的“风口”，仔细扒开源码就会发现：你所看到的，其实都是别人精心设计好让你看到的。
当一个赛道人人都争先恐后时，如果你真想创造价值，不如“反者道之动”，静观其变，等待系统重构的新机会。拥挤的赛道最终必然走向卷利润、卷价格的“劣币驱逐良币”死循环。
2.2 无效信息是对算力的极大消耗
很多人把赚不到钱、做不成事归结于“信息积累不够”，于是疯狂地囤积资料、拼命地订阅各种干货，试图通过扩大信息摄入量来超越别人。 这是一个极其危险的谬论。获取和处理信息，本质上是一件极其消耗系统资源（精力和能量）的事情。
如果一个人单凭拼凑信息就能战胜市场，那大家都不需要埋头精耕细作了。人的脑容量和认知带宽是有限的，一旦缓存（Cache）被大量低质、无用的噪音占满，真正高价值的信号就无法进入，想得太多、做得太少，只会引发严重的内耗。
3. 价值创造的核心：思考+执行，突破信息壁垒
信息本质是工具，而非目的，人的核心竞争力永远是“思考+执行”，二者形成的能力壁垒，远高于单纯的信息壁垒：思考 + 执行 > 纯执行 + 不思考 > 纯思考 + 不执行 > 不思考 + 不执行
- 思考+执行：通过思考判断信息价值，通过执行验证选择，形成“信息-判断-实践-反馈”的闭环。
- 执行+不思考：机械落地但缺乏方向，效率低下但可能偶然踩中机会。
- 思考+不执行：仅停留在“知道”阶段，信息无法转化为任何价值。
- 不思考+不执行：完全被动接收信息，与机会绝缘。
“思考+执行”之所以重要，是因为它们构成了反馈闭环：思考是为了对输入的信息进行校验和逻辑判断，执行是为了将假设放入真实环境中跑通测试，从而向目标逼近。
信息不对称的根源，其实是“内部能力不对称”。将相同的技术趋势、项目机会放在两位开发者面前：前者能通过思考拆解落地路径、通过执行验证可行性；后者仅停留在“了解”层面，差距便由此产生。人们最终能获得的价值，取决于自身的思考深度、执行力度、认知高度——想要获得更多，唯一路径是“精进自身”，让能力匹配目标。
真正有价值的信息，如果传达给一个没有执行力的人，就永远停留在“已知”的内存态，无法落盘，吸收、运用和产生价值的任何一个环节都不会发生。
我们通常以为自己没成事是因为缺少某个关键的“信息差”，实际上连这个“以为”的诊断都错了。真正的原因，往往是思考的深度和执行的颗粒度不到位，导致机会流失。人终归只能赚到自己系统架构支撑得起的那部分收益，想要获得更多，唯一的路径是重构和精进自己。
4. 行动指南
4.1 信息筛选：果断做减法，锚定核心目标
- 停止抱怨外界信息的真伪，主动建立个人过滤机制，拒绝"信息焦虑"，定期清理无效信息源（如低价值技术社群、重复资讯推送）。
- 明确自身阶段目标（如“3个月掌握某框架落地”“半年实现副业变现”），仅筛选与目标强相关的信息，把有限的算力留给最高优的任务。
4.2 信息解读：穿透表象，洞察未言之意
- 接收信息时（如技术文章、行业分享），不仅要关注"说了什么"，更要洞察"没说什么"（如技术的适用场景、潜在坑点、变现逻辑的隐藏环节）。
- 优先与高信噪比人群深度交流（如资深开发者、落地型创业者、领域专家），这类沟通往往直击本质、减少冗余，能快速触达核心信息与隐性经验，同时反向倒逼自身思考质量的提升。
4.3 差异破局：向内求索，强化“思考+执行”
与其说世界上存在信息差，不如说是"人差"。将同样的文档和源码置于两人面前，由于"底层编译器"（认知框架与执行系统）的差异，前者的洞察与后者的产出必然判若云泥。一切信息不对称的表象之下，真正分野的永远是内在的认知深度与执行密度。我们只有通过持续的思考和执行提升自己的能力，才能在信息时代中获得价值。
- 停止抱怨"信息不真实"这类外部归因，把精力放在自己能掌控的事情上——提升思考深度和执行效率。
- 建立"信息落地清单"：每当获得有价值的信息，立刻拆解成三个部分——思考要点（比如是否适合自己）、执行步骤（比如本周验证什么）、反馈节点（比如两周后复盘效果），别让信息躺在那里吃灰。
',37)])])}const u=e(l,[["render",o]]);export{c as __pageData,u as default};
diff --git "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.Be9IJNun.lean.js" "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.C7EJFVmA.lean.js"
similarity index 96%
rename from "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.Be9IJNun.lean.js"
rename to "assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.C7EJFVmA.lean.js"
index 85faf95c..6fa6e791 100644
--- "a/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.Be9IJNun.lean.js"
+++ "b/assets/30.\346\202\246\350\257\273\346\227\266\345\205\211_21.\345\246\202\344\275\225\347\224\204\345\210\253\347\234\237\346\255\243\346\234\211\347\224\250\347\232\204\344\277\241\346\201\257.md.C7EJFVmA.lean.js"
@@ -1 +1 @@
-import{_ as e,g as r,h as t,U as i}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","frontmatter":{"date":"2025-11-10T12:52:28.000Z","title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","permalink":"/growth/distinguish-useful-information","categories":["资源推荐"],"tags":["信息筛选","个人成长"]},"headers":[],"relativePath":"30.悦读时光/21.如何甄别真正有用的信息.md","filePath":"30.悦读时光/21.如何甄别真正有用的信息.md"}'),l={name:"30.悦读时光/21.如何甄别真正有用的信息.md"};function o(n,a,s,h,d,_){return t(),r("div",null,[...a[0]||(a[0]=[i("",37)])])}const u=e(l,[["render",o]]);export{c as __pageData,u as default};
+import{_ as e,g as r,h as t,U as i}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","frontmatter":{"date":"2025-11-10T12:52:28.000Z","title":"如何甄别真正有用的信息","description":"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。","permalink":"/growth/distinguish-useful-information","categories":["资源推荐"],"tags":["信息筛选","个人成长"]},"headers":[],"relativePath":"30.悦读时光/21.如何甄别真正有用的信息.md","filePath":"30.悦读时光/21.如何甄别真正有用的信息.md"}'),l={name:"30.悦读时光/21.如何甄别真正有用的信息.md"};function o(n,a,s,h,d,_){return t(),r("div",null,[...a[0]||(a[0]=[i("",37)])])}const u=e(l,[["render",o]]);export{c as __pageData,u as default};
diff --git "a/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_00.overview.md.DsfCImvx.js" "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_00.overview.md.DsfCImvx.js"
new file mode 100644
index 00000000..1bb84288
--- /dev/null
+++ "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_00.overview.md.DsfCImvx.js"
@@ -0,0 +1 @@
+import{_ as e,g as r,h as i,U as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const p=JSON.parse('{"title":"开源洞察","description":"","frontmatter":{"date":"2026-04-10T14:52:34.000Z","title":"开源洞察","permalink":"/repo-insight/overview","categories":["开源洞察"]},"headers":[],"relativePath":"31.开源洞察/00.overview.md","filePath":"31.开源洞察/00.overview.md"}'),o={name:"31.开源洞察/00.overview.md"};function n(s,t,l,d,h,c){return i(),r("div",null,[...t[0]||(t[0]=[a('Are you an LLM? You can read better optimized documentation at /31.开源洞察/00.overview.md for this page in Markdown format
开源洞察
说明：
本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。
repo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。
- 一键分析 - 支持 GitHub URL 或本地目录分析
- 深度报告 - 生成项目概述、架构分析、核心模块解读
- 中文支持 - 自动翻译 README、生成中文代码注释
- 全自动执行 - 调用后无需中间交互
两个 Skill 均具备以上能力，可根据需求选择使用。
开源项目解读
| 项目 | 简介 |
|---|
| fetch-event-source | 微软开源的基于 Fetch API 的 SSE 客户端库，用于简化与服务器的实时通信。
解读全文 → |
',5)])])}const _=e(o,[["render",n]]);export{p as __pageData,_ as default};
diff --git "a/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_00.overview.md.DsfCImvx.lean.js" "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_00.overview.md.DsfCImvx.lean.js"
new file mode 100644
index 00000000..67dae3e4
--- /dev/null
+++ "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_00.overview.md.DsfCImvx.lean.js"
@@ -0,0 +1 @@
+import{_ as e,g as r,h as i,U as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const p=JSON.parse('{"title":"开源洞察","description":"","frontmatter":{"date":"2026-04-10T14:52:34.000Z","title":"开源洞察","permalink":"/repo-insight/overview","categories":["开源洞察"]},"headers":[],"relativePath":"31.开源洞察/00.overview.md","filePath":"31.开源洞察/00.overview.md"}'),o={name:"31.开源洞察/00.overview.md"};function n(s,t,l,d,h,c){return i(),r("div",null,[...t[0]||(t[0]=[a("",5)])])}const _=e(o,[["render",n]]);export{p as __pageData,_ as default};
diff --git "a/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_01.fetch-event-source \346\272\220\347\240\201\350\247\243\350\257\273.md.BP_UYyAh.js" "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_01.fetch-event-source \346\272\220\347\240\201\350\247\243\350\257\273.md.BP_UYyAh.js"
new file mode 100644
index 00000000..6a6ffee8
--- /dev/null
+++ "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_01.fetch-event-source \346\272\220\347\240\201\350\247\243\350\257\273.md.BP_UYyAh.js"
@@ -0,0 +1,427 @@
+import{_ as a,g as n,h as i,U as p}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const E=JSON.parse('{"title":"fetch-event-source 源码解读","description":"","frontmatter":{"date":"2026-04-10T14:43:09.000Z","title":"fetch-event-source 源码解读","categories":["开源洞察"],"permalink":"/repo-insight/fetch-event-source"},"headers":[],"relativePath":"31.开源洞察/01.fetch-event-source 源码解读.md","filePath":"31.开源洞察/01.fetch-event-source 源码解读.md"}'),l={name:"31.开源洞察/01.fetch-event-source 源码解读.md"};function e(t,s,h,r,k,d){return i(),n("div",null,[...s[0]||(s[0]=[p(`Are you an LLM? You can read better optimized documentation at /31.开源洞察/01.fetch-event-source 源码解读.md for this page in Markdown format
fetch-event-source 源码解读
第一部分: 业务价值篇
项目定位
@microsoft/fetch-event-source 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。
解决的核心痛点
原生浏览器的 EventSource API 存在以下限制:
| 限制 | 说明 |
|---|
| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |
| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |
| 无法发送请求体 | 所有参数必须编码在 URL 中,受限于浏览器 URL 长度限制(通常 2000 字符) |
| 重试策略不可控 | 连接断开时浏览器自动重试但无法自定义重试逻辑 |
| 错误处理能力有限 | 无法优雅处理 API 网关返回的错误响应 |
技术亮点
| 技术亮点 | 说明 |
|---|
| 基于 Fetch API | 充分利用 Fetch API 的所有特性(自定义方法、头部、请求体等) |
| 完全兼容 SSE 格式 | 与标准 Event Stream 格式 100% 兼容 |
| 灵活的重试策略 | 完全掌控连接断开时的重试逻辑 |
| 页面可见性集成 | 自动在页面隐藏时断开连接、显示时重连,减少服务器负载 |
| 可替换的 fetch 实现 | 支持注入自定义 fetch 函数 |
| TypeScript 原生支持 | 完整的类型定义 |
适用场景
| 场景 | 说明 |
|---|
| 实时数据推送 | 股票行情、实时新闻、即时消息 |
| 进度更新 | 长时间运行任务的进度追踪 |
| 日志流 | 实时日志查看和监控 |
| 协作应用 | 多人协作时的实时状态同步 |
| AI 应用 | 大语言模型的流式响应输出 |
典型使用 Case
Case 1: 基础 SSE 连接
typescriptimport { fetchEventSource } from '@microsoft/fetch-event-source';
+
+await fetchEventSource('/api/sse', {
+ onmessage(ev) {
+ console.log(ev.data);
+ }
+});
1
2
3
4
5
6
7
Case 2: 带认证和自定义请求
typescriptconst ctrl = new AbortController();
+fetchEventSource('/api/sse', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Bearer token123'
+ },
+ body: JSON.stringify({ query: 'data' }),
+ signal: ctrl.signal,
+ onmessage(msg) {
+ // 处理消息
+ }
+});
1
2
3
4
5
6
7
8
9
10
11
12
13
Case 3: 自定义错误处理和重试
typescriptclass RetriableError extends Error { }
+class FatalError extends Error { }
+
+fetchEventSource('/api/sse', {
+ async onopen(response) {
+ if (response.ok && response.headers.get('content-type') === 'text/event-stream') {
+ return;
+ } else if (response.status >= 400 && response.status < 500 && response.status !== 429) {
+ throw new FatalError();
+ } else {
+ throw new RetriableError();
+ }
+ },
+ onerror(err) {
+ if (err instanceof FatalError) {
+ throw err; // 停止操作
+ }
+ // 返回重试间隔(毫秒),undefined 使用默认 1 秒
+ return 2000;
+ }
+});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
技术栈分析
| 技术 | 版本 | 用途 |
|---|
| TypeScript | ^4.2.4 | 开发语言 |
| Jasmine | ^4.3.1 | 测试框架 |
| ES2017 | - | 目标 ECMAScript 版本 |
选型决策分析
1、为什么选择 TypeScript?
- 类型安全: 为 API 提供完整的类型定义,提升开发体验
- 生态友好: TypeScript 在前端生态中已成为主流
- 维护性: 类型系统有助于长期维护和重构
2、为什么基于 Fetch API 而非 XMLHttpRequest?
- 现代标准: Fetch API 是现代浏览器的标准 API
- Promise 支持: 更优雅的异步处理方式
- 可扩展性: Request/Response 对象设计更灵活
- 流式处理: 原生支持 ReadableStream
3、为什么不直接使用 WebSocket?
- SSE 兼容性: 现有 SSE 服务器无需修改即可使用
- 单向通信: 对于仅需服务器推送的场景,SSE 更轻量
- HTTP 友好: 使用标准 HTTP,更容易通过防火墙和代理
- 自动重连: SSE 本身就有重连机制,此库进一步增强
项目结构初览
shellsrc/
+├── fetch.ts # 核心实现: fetchEventSource 函数
+├── parse.ts # 解析器: SSE 格式解析
+├── index.ts # 入口: 导出公共 API
+└── parse.spec.ts # 测试: 解析器单元测试
1
2
3
4
5
完整目录树：
shellfetch-event-source/
+├── .github/ # GitHub 配置目录
+│ └── workflows/ # GitHub Actions 工作流
+│ └── node.js.yml # Node.js CI 配置
+├── src/ # 源代码主目录
+│ ├── fetch.ts # fetchEventSource 主实现 - 连接管理、重试、页面可见性
+│ ├── index.ts # 模块入口文件 - 统一导出公共 API
+│ ├── parse.spec.ts # 解析器单元测试
+│ └── parse.ts # 事件流解析器 - SSE 格式解析流水线
+├── .gitignore # Git 忽略文件
+├── .npmignore # NPM 发布忽略文件
+├── .nycrc # 测试覆盖率配置
+├── CHANGELOG.md # 变更日志
+├── CODE_OF_CONDUCT.md # 行为准则
+├── CONTRIBUTING.md # 贡献指南
+├── LICENSE # MIT 许可证
+├── README.md # 项目说明文档(英文)
+├── SECURITY.md # 安全政策
+├── jasmine.json # Jasmine 测试框架配置
+├── package-lock.json # NPM 依赖锁定文件
+├── package.json # NPM 项目配置 - dual-package (CJS+ESM)
+├── tsconfig.esm.json # TypeScript ESM 构建配置
+└── tsconfig.json # TypeScript 主配置 - strict 模式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
核心模块职责
| 模块 | 职责 |
|---|
fetch.ts | 主 API 实现,连接管理、重试逻辑、页面可见性处理 |
parse.ts | SSE 协议解析,字节流 → 行 → 消息的转换 |
index.ts | 模块入口,统一导出 |
依赖关系
外部依赖
- 无运行时依赖: 这是一个零依赖的轻量级库
- 仅开发依赖:
TypeScript、Jasmine、rimraf、source-map-support
内部依赖
shellindex.ts → fetch.ts → parse.ts
+ ↘
+ parse.ts (直接导出类型)
1
2
3
构建输出
- CJS: CommonJS 格式 (
lib/cjs/index.js) - ESM: ES Module 格式 (
lib/esm/index.js) - 类型: TypeScript 类型定义 (
lib/cjs/index.d.ts)
支持 dual-package 发布,同时兼容 CommonJS 和 ES Module。
第二部分: 架构设计篇
系统整体架构
markdown ┌─────────────────────────────────────────────────────────────┐
+ │ fetchEventSource API │
+ │ (入口: src/index.ts) │
+ └────────────────────────────┬────────────────────────────────┘
+ │
+ ▼
+ ┌─────────────────────────────────────────────────────────────┐
+ │ 核心控制器 (src/fetch.ts) │
+ │ ┌───────────────────────────────────────────────────────┐ │
+ │ │ create() - 创建/重试连接的主循环 │ │
+ │ │ dispose() - 清理资源 │ │
+ │ │ onVisibilityChange() - 页面可见性变化处理 │ │
+ │ └───────────────────────────────────────────────────────┘ │
+ └────────────────────────────┬────────────────────────────────┘
+ │
+ ┌──────────────────────────────────────┼──────────────────────────────────────┐
+ │ │ │
+ ▼ ▼ ▼
+┌─────────────────────────┐ ┌─────────────────────────┐ ┌─────────────────────────┐
+│ 页面可见性监听 │ │ Fetch 请求处理 │ │ 重试策略控制 │
+│ - visibilitychange │ │ - 自定义方法/头部/体 │ │ - 可配置重试间隔 │
+│ - 自动断开/重连 │ │ - Last-Event-ID 头部 │ │ - 错误分类处理 │
+└─────────────────────────┘ └─────────────────────────┘ └─────────────────────────┘
+ │ │ │
+ └──────────────────────────────────────┼──────────────────────────────────────┘
+ │
+ ▼
+ ┌─────────────────────────────────────────────────────────────┐
+ │ 事件流解析器 (src/parse.ts) │
+ │ ┌───────────────────────────────────────────────────────┐ │
+ │ │ getBytes() - 读取字节流 │ │
+ │ │ getLines() - 解析行缓冲 │ │
+ │ │ getMessages() - 组装完整消息 │ │
+ │ └───────────────────────────────────────────────────────┘ │
+ └─────────────────────────────────────────────────────────────┘
+ │
+ ▼
+ ┌─────────────────────────────────────────────────────────────┐
+ │ 用户回调函数 │
+ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
+ │ │ onopen │ │ onmessage│ │ onclose │ │ onerror │ │
+ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
+ └─────────────────────────────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
核心模块设计
1. fetch.ts - 主控制器模块
职责:
- 提供
fetchEventSource 主 API 函数 - 管理连接生命周期
- 处理重试逻辑
- 集成页面可见性 API
- 协调请求/响应处理
核心数据结构:
typescriptinterface FetchEventSourceInit extends RequestInit {
+ headers?: Record<string, string>;
+ onopen?: (response: Response) => Promise<void>;
+ onmessage?: (ev: EventSourceMessage) => void;
+ onclose?: () => void;
+ onerror?: (err: any) => number | null | undefined | void;
+ openWhenHidden?: boolean;
+ fetch?: typeof fetch;
+}
1
2
3
4
5
6
7
8
9
关键函数流程:
text fetchEventSource() 入口
+ │
+ ▼
+┌─────────────────────────────────────────────────────────┐
+│ 初始化阶段: │
+│ 1. 复制并设置默认请求头 (Accept: text/event-stream) │
+│ 2. 设置页面可见性监听器 (如果 openWhenHidden=false) │
+│ 3. 初始化重试间隔 (默认 1000ms) │
+│ 4. 监听输入 AbortSignal │
+└────────────────────────────┬────────────────────────────┘
+ │
+ ▼
+ ┌───────────────┐
+ │ create() 函数 │ ←────────┐
+ └───────┬───────┘ │
+ │ │
+ ┌───────────────────┼───────────────────┐
+ │ │ │
+ ▼ ▼ ▼
+┌──────────────┐ ┌──────────────┐ ┌──────────────┐
+│ 发起请求 │ │ 验证响应 │ │ 解析事件流 │
+│ fetch() │ │ onopen() │ │ getBytes() │
+└──────┬───────┘ └──────┬───────┘ └──────┬───────┘
+ │ │ │
+ └───────────────────┼───────────────────┘
+ │
+ ▼
+ ┌──────────────────┐
+ │ 成功/错误处理 │
+ └────────┬─────────┘
+ │
+ ┌──────────┴──────────┐
+ │ │
+ ▼ ▼
+ 正常完成 异常处理
+ (resolve) (onerror 决定是否重试)
+ │
+ ▼
+ 需要重试? ──是──→ 重试 create()
+ │
+ 否
+ ▼
+ 终止 (reject)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2. parse.ts - 事件流解析模块
职责:
- 解析 SSE 格式的字节流
- 处理分块传输编码
- 组装完整的 EventSourceMessage 对象
解析流水线:
text ReadableStream<Uint8Array>
+ │
+ ▼
+ ┌───────────────┐
+ │ getBytes() │ - 从流中读取字节块
+ └───────┬───────┘
+ │
+ ▼
+ ┌───────────────┐
+ │ getLines() │ - 解析行缓冲,处理 \\r, \\n, \\r\\n
+ └───────┬───────┘ - 识别字段名位置 (第一个冒号)
+ │
+ ▼
+ ┌───────────────┐
+ │ getMessages() │ - 组装完整消息
+ └───────┬───────┘ - 处理多字段: id, event, data, retry
+ │ - 空行触发消息回调
+ ▼
+ EventSourceMessage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
核心数据结构:
typescriptinterface EventSourceMessage {
+ id: string; // 事件 ID
+ event: string; // 事件类型
+ data: string; // 事件数据
+ retry?: number; // 重试间隔(毫秒)
+}
1
2
3
4
5
6
行解析状态机:
text ┌─────────────────────────────────────────────────────────────────┐
+ │ getLines() 状态机 │
+ └─────────────────────────────────────────────────────────────────┘
+
+ 初始状态: buffer=undefined, position=0, fieldLength=-1
+
+ ┌───────────┐
+ │ 新字节块 │
+ └─────┬─────┘
+ │
+ ┌─────▼─────────────────────────────────┐
+ │ buffer 存在? │
+ ├───────────┬───────────────────────────┤
+ │ 否 │ 是 │
+ ▼ ▼ │
+ buffer = arr buffer = concat(buffer, arr) │
+ position = 0 │
+ fieldLength = -1 │
+ │ │
+ └──────────────┬─────────────────────────┘
+ │
+ ┌──────────────▼─────────────────────────┐
+ │ while position < bufLength: │
+ │ │
+ │ ┌──────────────────────────────────┐ │
+ │ │ 处理 discardTrailingNewline │ │
+ │ │ (跳过前一个 \\r 后面的 \\n) │ │
+ │ └──────────────┬───────────────────┘ │
+ │ │ │
+ │ ┌──────────────▼───────────────────┐ │
+ │ │ 查找行尾 (\\r 或 \\n) │ │
+ │ │ 同时记录第一个冒号位置 (fieldLength)│ │
+ │ └──────────────┬───────────────────┘ │
+ │ │ │
+ │ ┌──────────────▼───────────────────┐ │
+ │ │ 找到行尾? │ │
+ │ ├───────────┬───────────────────────┤ │
+ │ │ 否 │ 是 │ │
+ │ ▼ ▼ │ │
+ │ break onLine(line, fieldLength)│ │
+ │ (等待下一块) lineStart = position │ │
+ │ fieldLength = -1 │ │
+ │ └──────────────┬───────────────────┘ │
+ └─────────────────┼─────────────────────┘
+ │
+ ┌─────────────────▼─────────────────────┐
+ │ 处理剩余 buffer: │
+ │ - 全部处理完: buffer = undefined │
+ │ - 部分处理: buffer = subarray(lineStart)│
+ └───────────────────────────────────────┘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
核心数据流转时序
正常消息接收流程
mermaidsequenceDiagram
+ participant U as 用户代码
+ participant F as fetchEventSource
+ participant R as Response
+ participant B as getBytes
+ participant L as getLines
+ participant M as getMessages
+ participant C as 用户回调
+
+ U->>F: fetchEventSource(url, options)
+ F->>F: create()
+ F->>R: fetch(input, init)
+ R-->>F: Response
+ F->>C: onopen(response)
+ C-->>F: void
+ F->>B: getBytes(response.body, onChunk)
+ loop 字节流循环
+ B->>B: reader.read()
+ B-->>L: onChunk(arr)
+ loop 行解析循环
+ L-->>M: onLine(line, fieldLength)
+ alt 非空行
+ M->>M: 解析字段 (id/event/data/retry)
+ else 空行
+ M-->>C: onmessage(msg)
+ M->>M: 创建新消息
+ end
+ end
+ end
+ B-->>F: 流关闭
+ F->>C: onclose()
+ F->>F: dispose()
+ F-->>U: resolve()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
重试流程
mermaidsequenceDiagram
+ participant U as 用户代码
+ participant F as fetchEventSource
+ participant R as Response
+ participant C as 用户回调
+
+ U->>F: fetchEventSource(...)
+ F->>F: create()
+ F->>R: fetch(...)
+
+ alt 请求失败
+ R-->>F: Error
+ F->>C: onerror(err)
+ alt 需要重试
+ C-->>F: 返回重试间隔
+ F->>F: setTimeout(create, interval)
+ Note over F: 等待指定时间后重试
+ F->>F: create()
+ F->>R: fetch(..., Last-Event-ID: id)
+ else 致命错误
+ C-->>F: 抛出异常
+ F->>F: dispose()
+ F-->>U: reject(err)
+ end
+ else 响应成功但连接断开
+ R-->>F: Response
+ F->>C: onopen()
+ F->>F: 解析事件流...
+ F->>C: onclose()
+ F->>C: onerror(undefined)
+ alt 需要重试
+ C-->>F: 返回重试间隔
+ F->>F: setTimeout(create, interval)
+ else 停止
+ C-->>F: 抛出异常
+ F->>F: dispose()
+ F-->>U: reject()
+ end
+ end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
页面可见性变化流程
mermaidsequenceDiagram
+ participant D as Document
+ participant F as fetchEventSource
+ participant R as Request
+
+ Note over F: openWhenHidden = false (默认)
+ F->>D: addEventListener('visibilitychange')
+
+ D->>F: visibilitychange (hidden)
+ F->>F: curRequestController.abort()
+ F->>R: 取消请求
+
+ D->>F: visibilitychange (visible)
+ F->>F: create()
+ F->>R: fetch(..., Last-Event-ID: id)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
接口契约定义
公共 API
typescript/**
+ * 发起一个 Server-Sent Events (SSE) 请求
+ * @param input 请求 URL 或 Request 对象
+ * @param init 配置选项
+ * @returns Promise,在连接正常关闭时 resolve,出错时 reject
+ */
+export function fetchEventSource(
+ input: RequestInfo,
+ init: FetchEventSourceInit
+): Promise<void>;
+
+/**
+ * SSE 响应的 Content-Type
+ */
+export const EventStreamContentType = 'text/event-stream';
+
+/**
+ * 配置选项接口,继承自 RequestInit
+ */
+export interface FetchEventSourceInit extends RequestInit {
+ /**
+ * 请求头,仅支持 Record<string, string> 格式
+ */
+ headers?: Record<string, string>;
+
+ /**
+ * 收到响应时调用,用于验证响应是否符合预期
+ * 如果未提供,默认验证 content-type 为 text/event-stream
+ * @throws 如果响应不符合预期,抛出异常
+ */
+ onopen?: (response: Response) => Promise<void>;
+
+ /**
+ * 收到消息时调用
+ * 注意:与默认 EventSource.onmessage 不同,此回调会被所有事件调用,
+ * 包括带有自定义 event 字段的事件
+ */
+ onmessage?: (ev: EventSourceMessage) => void;
+
+ /**
+ * 响应结束时调用
+ * 如果不期望服务器关闭连接,可以在这里抛出异常并通过 onerror 重试
+ */
+ onclose?: () => void;
+
+ /**
+ * 发生任何错误时调用(请求/处理消息/回调等)
+ * 用于控制重试策略:
+ * - 如果错误是致命的,在回调内重新抛出错误以停止整个操作
+ * - 否则,可以返回一个间隔(毫秒),请求将在该间隔后自动重试
+ * - 如果未指定此回调或返回 undefined,所有错误都被视为可重试,1秒后重试
+ */
+ onerror?: (err: any) => number | null | undefined | void;
+
+ /**
+ * 如果为 true,即使文档隐藏也保持请求打开
+ * 默认情况下,fetchEventSource 会在文档隐藏时关闭请求,
+ * 并在文档再次可见时自动重新打开
+ */
+ openWhenHidden?: boolean;
+
+ /**
+ * 使用的 Fetch 函数,默认为 window.fetch
+ */
+ fetch?: typeof fetch;
+}
+
+/**
+ * 表示事件流中的一条消息
+ * https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#Event_stream_format
+ */
+export interface EventSourceMessage {
+ /** 要设置到 EventSource 对象的最后事件 ID 值的事件 ID */
+ id: string;
+ /** 标识所描述事件类型的字符串 */
+ event: string;
+ /** 事件数据 */
+ data: string;
+ /** 重试连接前等待的重连间隔(毫秒) */
+ retry?: number;
+}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
内部解析 API
typescript/**
+ * 将 ReadableStream 转换为回调模式
+ * @param stream 输入 ReadableStream
+ * @param onChunk 对每个新字节块调用的函数
+ * @returns Promise,在流关闭时 resolve
+ */
+export async function getBytes(
+ stream: ReadableStream<Uint8Array>,
+ onChunk: (arr: Uint8Array) => void
+): Promise<void>;
+
+/**
+ * 解析任意字节块为 EventSource 行缓冲
+ * 每行格式应为 "field: value",以 \\r、\\n 或 \\r\\n 结尾
+ * @param onLine 对每个新 EventSource 行调用的函数
+ * @returns 应该对每个输入字节块调用的函数
+ */
+export function getLines(
+ onLine: (line: Uint8Array, fieldLength: number) => void
+): (arr: Uint8Array) => void;
+
+/**
+ * 解析行缓冲为 EventSourceMessages
+ * @param onId 对每个 id 字段调用的函数
+ * @param onRetry 对每个 retry 字段调用的函数
+ * @param onMessage 对每条消息调用的函数
+ * @returns 应该对每个输入行缓冲调用的函数
+ */
+export function getMessages(
+ onId: (id: string) => void,
+ onRetry: (retry: number) => void,
+ onMessage?: (msg: EventSourceMessage) => void
+): (line: Uint8Array, fieldLength: number) => void;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
`,74)])])}const g=a(l,[["render",e]]);export{E as __pageData,g as default};
diff --git "a/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_01.fetch-event-source \346\272\220\347\240\201\350\247\243\350\257\273.md.BP_UYyAh.lean.js" "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_01.fetch-event-source \346\272\220\347\240\201\350\247\243\350\257\273.md.BP_UYyAh.lean.js"
new file mode 100644
index 00000000..5e7b47b6
--- /dev/null
+++ "b/assets/31.\345\274\200\346\272\220\346\264\236\345\257\237_01.fetch-event-source \346\272\220\347\240\201\350\247\243\350\257\273.md.BP_UYyAh.lean.js"
@@ -0,0 +1 @@
+import{_ as a,g as n,h as i,U as p}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const E=JSON.parse('{"title":"fetch-event-source 源码解读","description":"","frontmatter":{"date":"2026-04-10T14:43:09.000Z","title":"fetch-event-source 源码解读","categories":["开源洞察"],"permalink":"/repo-insight/fetch-event-source"},"headers":[],"relativePath":"31.开源洞察/01.fetch-event-source 源码解读.md","filePath":"31.开源洞察/01.fetch-event-source 源码解读.md"}'),l={name:"31.开源洞察/01.fetch-event-source 源码解读.md"};function e(t,s,h,r,k,d){return i(),n("div",null,[...s[0]||(s[0]=[p("",74)])])}const g=a(l,[["render",e]]);export{E as __pageData,g as default};
diff --git "a/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.BzNDwyw3.js" "b/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.CkzMieuF.js"
similarity index 99%
rename from "assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.BzNDwyw3.js"
rename to "assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.CkzMieuF.js"
index 4fa1e118..f26dbc1a 100644
--- "a/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.BzNDwyw3.js"
+++ "b/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.CkzMieuF.js"
@@ -1 +1 @@
-import{_ as t,g as s,h as n,U as o}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const e="/img/cover/about_site_bg.png",g=JSON.parse('{"title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","frontmatter":{"date":"2025-08-29T09:40:53.000Z","title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png","permalink":"/about/me","categories":["关于"]},"headers":[],"relativePath":"40.关于/01.关于我.md","filePath":"40.关于/01.关于我.md"}'),r={name:"40.关于/01.关于我.md"};function m(i,a,l,p,c,d){return n(),s("div",null,[...a[0]||(a[0]=[o('Are you an LLM? You can read better optimized documentation at /40.关于/01.关于我.md for this page in Markdown format
关于我
我是谁
我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。
自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。
Insight Stack = Engineering Logic × Product Sense × AI Force
目前，我主要在折腾和实践以下几个方向：
- 工程化 Spec 与 AI 编程磨合的实践：摸索 Vibe Coding 在复杂业务中的边界，针对 AI 生成代码"易腐烂、臃肿"且"调试难度倒挂"的痛点，尝试将SDD (规范驱动开发)范式注入到生成流。利用 OpenSpec 等工具确立工程约束，来解决生成代码的可维护性难题，从而跨越"从 Demo 到生产级系统"的鸿沟。
- Agentic Workflow 实践：不追求复杂的理论，而是在实际场景中测试智能体工作流的边界，看看如何把 AI 真正融入到代码编写、内容创作等流程中去。
- 创意落地与小产品开发：以全栈技术为手段，尝试将自己的想法转化为"小而美"的独立作品，在实践中打磨产品思维（Product Sense）。
我的认知迭代
在很长一段时间里，我和大多数开发者一样，认为"全栈"就是收集更多的技术徽章：从 React 到 NestJS，从 Python 到 Rust。我曾以为技术的广度、扎实的工程化能力就是护城河。
但在 AI 重构代码生产方式与编程范式的今天，我意识到规则变了。现在的我，不再执着于手里有多少把锤子，而更关注能构建出怎样的建筑，也更愿意将自己定义为一个 "Product Engineer" (产品型工程师) 和 "AI-Augmented Builder" (AI 增强型构建者)。
在这个博客 Insight Stack 中，记录了我对技术角色的重新思考，我相信未来的全栈不再是线性的技能堆叠，而是一个新的全栈价值公式：
Full Stack=(Engineering+Product)×AI
- Engineering (工程力)——坚实的基石：工程力从"代码设计与实现 (How)"迁移至 "架构交付 (What & Why)"。当 AI 接管了样板代码，工程师的价值体现为架构决策的权衡、复杂逻辑的审计与验收，以及构建从 Localhost 到 Production 的自动化交付体系。
- Product (产品力)——价值的指引：产品力作为工程力的方向盘，具备 "同理心" 与 "MVP 思维"。这意味着跳出技术自嗨，精准捕捉用户的真实痛点，计算体验 ROI，敏锐地识别并实现那些 "低成本高价值" 的关键特性，拒绝盲目的过度设计。
- AI (AI 杠杆)——指数级倍增器：AI 不仅仅是工具，更是让个人能力产生爆炸式增长的 乘数。它通过 Context Engineering 抹平了前后端的技术门槛（技能补全），并将从 Idea 到 Demo 的周期从数周压缩至数小时（时间压缩），让 "超级个体" 成为可能。
如果你对这些思考感兴趣，推荐阅读我的两篇核心文章：
关于本站
Insight Stack 是我的数字花园，也是我践行上述理念的实验场之一。我把它定义为 "一个探索全栈工程、产品思维与 LLM 交叉领域的数字花园"。
这里的 Stack 有两层含义：
- Tech Stack：硬核的技术积累与工程实践。
- Insight Stack：软性的思维模型与产品洞察。
我不希望这里只是枯燥的代码片段或简单的技术分享与总结，我希望你看到的是一个工程师对 LLM 落地路径的真实探索，对 产品 Sense 这一核心能力的深度复盘，以及个人在技术浪潮中的成长记录。
值得一提的是，本站也是人机协作（Human-AI Collaboration）的产物。 在文章的构思与润色过程中，我深度使用了 Gemini/Claude 等模型作为"主要配角"。我经常与它们发起激烈的"辩论"，利用 AI 来打破思维盲区。我认为，能够熟练地与 AI 共舞，将是新一代工程师最核心的元能力。
当然，一些文章在撰写过程中，我也应用了 AI，甚至用 Gemini3 Pro/Claude 来辅助我创作，并发起过不少"人机辩论"。因为我认为，AI 可以帮助我们更快、更准确地表达自己的思想，也可以帮助我们发现新的角度、新的解决方案。
❤️ 致谢
Insight Stack Blog 博客站点主要基于 VitePress 和 vitepress-theme-teek 搭建而成。
特别感谢开源社区赋予我们如此强大的工具，让我能将精力聚焦于内容的创作，而非重复造轮子。本站的核心架构基于以下优秀项目构建：
- Core: VitePress，由 Vite & Vue 驱动的极速静态网站生成器，提供了卓越的开发者体验 (DX) 和极致的性能。
- Theme: vitepress-theme-teek，一个专注于阅读体验的 VitePress 自定义主题，其简约的设计理念与本站"注重内容"的初衷不谋而合。
连接与交流
最好的学习是公开分享，最快的成长是与优秀者同行。无论是探讨全栈、AI 编程与应用、Agent 落地，还是交流产品心得，都非常欢迎你联系我~
',31)])])}const u=t(r,[["render",m]]);export{g as __pageData,u as default};
+import{_ as t,g as s,h as n,U as o}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const e="/img/cover/about_site_bg.png",g=JSON.parse('{"title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","frontmatter":{"date":"2025-08-29T09:40:53.000Z","title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png","permalink":"/about/me","categories":["关于"]},"headers":[],"relativePath":"40.关于/01.关于我.md","filePath":"40.关于/01.关于我.md"}'),r={name:"40.关于/01.关于我.md"};function m(i,a,l,p,c,d){return n(),s("div",null,[...a[0]||(a[0]=[o('Are you an LLM? You can read better optimized documentation at /40.关于/01.关于我.md for this page in Markdown format
关于我
我是谁
我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。
自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。
Insight Stack = Engineering Logic × Product Sense × AI Force
目前，我主要在折腾和实践以下几个方向：
- 工程化 Spec 与 AI 编程磨合的实践：摸索 Vibe Coding 在复杂业务中的边界，针对 AI 生成代码"易腐烂、臃肿"且"调试难度倒挂"的痛点，尝试将SDD (规范驱动开发)范式注入到生成流。利用 OpenSpec 等工具确立工程约束，来解决生成代码的可维护性难题，从而跨越"从 Demo 到生产级系统"的鸿沟。
- Agentic Workflow 实践：不追求复杂的理论，而是在实际场景中测试智能体工作流的边界，看看如何把 AI 真正融入到代码编写、内容创作等流程中去。
- 创意落地与小产品开发：以全栈技术为手段，尝试将自己的想法转化为"小而美"的独立作品，在实践中打磨产品思维（Product Sense）。
我的认知迭代
在很长一段时间里，我和大多数开发者一样，认为"全栈"就是收集更多的技术徽章：从 React 到 NestJS，从 Python 到 Rust。我曾以为技术的广度、扎实的工程化能力就是护城河。
但在 AI 重构代码生产方式与编程范式的今天，我意识到规则变了。现在的我，不再执着于手里有多少把锤子，而更关注能构建出怎样的建筑，也更愿意将自己定义为一个 "Product Engineer" (产品型工程师) 和 "AI-Augmented Builder" (AI 增强型构建者)。
在这个博客 Insight Stack 中，记录了我对技术角色的重新思考，我相信未来的全栈不再是线性的技能堆叠，而是一个新的全栈价值公式：
Full Stack=(Engineering+Product)×AI
- Engineering (工程力)——坚实的基石：工程力从"代码设计与实现 (How)"迁移至 "架构交付 (What & Why)"。当 AI 接管了样板代码，工程师的价值体现为架构决策的权衡、复杂逻辑的审计与验收，以及构建从 Localhost 到 Production 的自动化交付体系。
- Product (产品力)——价值的指引：产品力作为工程力的方向盘，具备 "同理心" 与 "MVP 思维"。这意味着跳出技术自嗨，精准捕捉用户的真实痛点，计算体验 ROI，敏锐地识别并实现那些 "低成本高价值" 的关键特性，拒绝盲目的过度设计。
- AI (AI 杠杆)——指数级倍增器：AI 不仅仅是工具，更是让个人能力产生爆炸式增长的 乘数。它通过 Context Engineering 抹平了前后端的技术门槛（技能补全），并将从 Idea 到 Demo 的周期从数周压缩至数小时（时间压缩），让 "超级个体" 成为可能。
如果你对这些思考感兴趣，推荐阅读我的两篇核心文章：
关于本站
Insight Stack 是我的数字花园，也是我践行上述理念的实验场之一。我把它定义为 "一个探索全栈工程、产品思维与 LLM 交叉领域的数字花园"。
这里的 Stack 有两层含义：
- Tech Stack：硬核的技术积累与工程实践。
- Insight Stack：软性的思维模型与产品洞察。
我不希望这里只是枯燥的代码片段或简单的技术分享与总结，我希望你看到的是一个工程师对 LLM 落地路径的真实探索，对 产品 Sense 这一核心能力的深度复盘，以及个人在技术浪潮中的成长记录。
值得一提的是，本站也是人机协作（Human-AI Collaboration）的产物。 在文章的构思与润色过程中，我深度使用了 Gemini/Claude 等模型作为"主要配角"。我经常与它们发起激烈的"辩论"，利用 AI 来打破思维盲区。我认为，能够熟练地与 AI 共舞，将是新一代工程师最核心的元能力。
当然，一些文章在撰写过程中，我也应用了 AI，甚至用 Gemini3 Pro/Claude 来辅助我创作，并发起过不少"人机辩论"。因为我认为，AI 可以帮助我们更快、更准确地表达自己的思想，也可以帮助我们发现新的角度、新的解决方案。
❤️ 致谢
Insight Stack Blog 博客站点主要基于 VitePress 和 vitepress-theme-teek 搭建而成。
特别感谢开源社区赋予我们如此强大的工具，让我能将精力聚焦于内容的创作，而非重复造轮子。本站的核心架构基于以下优秀项目构建：
- Core: VitePress，由 Vite & Vue 驱动的极速静态网站生成器，提供了卓越的开发者体验 (DX) 和极致的性能。
- Theme: vitepress-theme-teek，一个专注于阅读体验的 VitePress 自定义主题，其简约的设计理念与本站"注重内容"的初衷不谋而合。
连接与交流
最好的学习是公开分享，最快的成长是与优秀者同行。无论是探讨全栈、AI 编程与应用、Agent 落地，还是交流产品心得，都非常欢迎你联系我~
',31)])])}const u=t(r,[["render",m]]);export{g as __pageData,u as default};
diff --git "a/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.BzNDwyw3.lean.js" "b/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.CkzMieuF.lean.js"
similarity index 94%
rename from "assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.BzNDwyw3.lean.js"
rename to "assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.CkzMieuF.lean.js"
index 018ff689..804437be 100644
--- "a/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.BzNDwyw3.lean.js"
+++ "b/assets/40.\345\205\263\344\272\216_01.\345\205\263\344\272\216\346\210\221.md.CkzMieuF.lean.js"
@@ -1 +1 @@
-import{_ as t,g as s,h as n,U as o}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const e="/img/cover/about_site_bg.png",g=JSON.parse('{"title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","frontmatter":{"date":"2025-08-29T09:40:53.000Z","title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png","permalink":"/about/me","categories":["关于"]},"headers":[],"relativePath":"40.关于/01.关于我.md","filePath":"40.关于/01.关于我.md"}'),r={name:"40.关于/01.关于我.md"};function m(i,a,l,p,c,d){return n(),s("div",null,[...a[0]||(a[0]=[o("",31)])])}const u=t(r,[["render",m]]);export{g as __pageData,u as default};
+import{_ as t,g as s,h as n,U as o}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const e="/img/cover/about_site_bg.png",g=JSON.parse('{"title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","frontmatter":{"date":"2025-08-29T09:40:53.000Z","title":"关于我","description":"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png","permalink":"/about/me","categories":["关于"]},"headers":[],"relativePath":"40.关于/01.关于我.md","filePath":"40.关于/01.关于我.md"}'),r={name:"40.关于/01.关于我.md"};function m(i,a,l,p,c,d){return n(),s("div",null,[...a[0]||(a[0]=[o("",31)])])}const u=t(r,[["render",m]]);export{g as __pageData,u as default};
diff --git "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.CJpPM59I.js" "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.DJ7lWg_C.js"
similarity index 99%
rename from "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.CJpPM59I.js"
rename to "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.DJ7lWg_C.js"
index d4eb65e9..facbbb1f 100644
--- "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.CJpPM59I.js"
+++ "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.DJ7lWg_C.js"
@@ -1 +1 @@
-import{_ as i,g as s,h as r,U as a}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","frontmatter":{"date":"2024-01-15T22:16:00.000Z","title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","permalink":"/growth/outer-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png","sticky":1,"top":true,"tags":["系统思维","数学思维","模型思维","AI","疫情"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md","filePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"}'),o={name:"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"};function e(n,t,p,l,g,h){return r(),s("div",null,[...t[0]||(t[0]=[a('Are you an LLM? You can read better optimized documentation at /40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md for this page in Markdown format
走出“目标隧道”：用系统与数学思维重构底层逻辑
摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。
1. 写在前面
时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。
那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。
在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时会觉得很累。自 OpenAI 这家公司名声大噪且 LLM（大语言模型）被各行各业的人们知晓后，笔者开始质疑起了『目标』，尤其在看过 OpenAI 研究员写的《为什么伟大不能被计划》且向一些大佬咨询请教后，更觉得目标是一把双刃剑：
- 对于没有养成良好习惯的人来说，构建切实可行的目标，一旦严格执行落地，在时间的累加效应加持下，大概率是能取得预期结果的。
- 对于想要产出一些创造力或超预期效果的人来讲，目标或许弊大于利。从笔者的实践来看，很容易进入『目标隧道』去卷，更容易错过、洞察更优路径的时机（主要还是社会变化过快，打工人太忙）。
在目标制定、执行和调整之外，或许存在更通用的方法论，它既包括一些成长书中所谓的使命感，也包括个人智慧与经验等因素。因此，笔者在看书、学习数学基础知识与思维、卷 AI 大模型的过程中，尝试去寻找答案，大概率找不到最好答案，但或多或少能找出优于当前状态的路径或答案。
2. 重读《要事第一》
图1：原则、使命与角色示意树
图2：四个维度圈示意图
在重读《要事第一》后，笔者貌似找到了一部分答案。我们经常听到 "人要独立，要有自己的想法"，但我们确实生活在一个相互依赖的社会，独立与相互依赖这两个看似矛盾的点是我们需要学着平衡的：
- 生活质量本质上取决于相互依赖，我们的角色是相互依赖的，几乎每个角色实际上都至少通过另外某一个人发生人际关系；
- 独立本身并不是目的，真正的独立出现在行之有效的相互依赖之前，同时使我们自己为行之有效的相互依赖做好准备。也就是说：独立是一个人值得信赖，并且使信赖成为可能。
- 平衡思维是我们的必修课，我们在不同中长期时间段需要针对自身拆解出几个重要因素，然后借助平衡思维制定合理的多目标去多方面推动。按照这种方式，在一定程度上是可以避免进入『目标隧道』的，即使进入了隧道，也不会有大的损失和挫败，平衡思维下的多维度视角和互相依赖的社会特征会给我们一些启发来调整的。
- 在平衡思维下，目标之上还有原则、使命和角色这三样东西：原则让我们尊重客观规律，使命让我们按照自己的心意，角色让我们关注身体、社会/情感、智力、精神、自我更新等多个方面。
在平衡思维与多维度视角的基础上，我们很自然地产出长（比如年）、中（比如季度）、短（比如周）三个方面的方向或目标，而不是把自己变成一个工具或发条去卷。自然也能尝试使用《要事第一》作者推出的第四代时间管理模式：更看重『人』的范畴，所关注的焦点超越了如何对事务进行有效而机械的管理，更重视同别人进行有效的互动合作。以人为本的模式对于在家庭、组织和其他形式的团体中获得成功都是至关重要的。
鉴于笔者个人的视角也有一定的局限性，对这部分答案感兴趣的读者，可以去阅读原著，来帮助找出一些适合自己实践的答案。
3. 基于系统与模型思维构建洞察力模型
众所周知，在数字化时代，我们每天都在与各种各样的系统交互，每一个表象背后都有一个黑盒子，黑盒子才是规律产生的原因，这个黑盒子也就是系统。
当系统运转正常的时候，我们在遵循着表象的规律做事，可一旦系统出了问题，这些规律将会失效。如果我们无法洞察表象背后的系统，就不可能知道问题出在哪里，更不知道如何解决。笔者在年轻时也不晓得这个道理，所以经常会固执坚守错误的认知，此后被社会打磨得多了，也就开始琢磨系统运行原理、锻炼自己的洞察力了。
洞察力模型就是：理解『表象』背后的『黑盒子』——系统，从而真正从本质上解决问题。在现实世界中，遇到问题，可以尝试摸索，但不要停留在一些似是而非的概念世界里。在知识付费时代，人们更容易陷入概念世界的迷障，我们应该继续尝试走进科学、知识的世界，甚至是智慧世界来抽象分析，然后结合实际情况降维打击具象世界（疫情期间从 B 站林超所长视频中学到的总结，有兴趣的可自己看原创视频）：
系统是一组相互关联的要素，即：系统 = 要素 x 连接关系。在日常工作与生活中，要素是易识别，要素的关联关系容易被忽略，但问题的解决方案，常常就藏在这些『连接关系』里。
因此，我们可基于拆解与关联的思路按照以下步骤进行：
1. 寻找因果关系，人与事、人与物、人与人之间均是如此。若洞察不了关联、因果关系，就一个字『乱』，信息熵越来越大，噪声信息越来越多。因此，我们可以不断拿起两个可能有关系的变量，问自己：他们之间有增强关系吗，有减弱关系吗？
2. 寻找增强回路，因果关系只是单向线段，有头有尾，作用效果从头传到尾就结束了。因此，我们需要继续思考是否能把结尾与开头也用一条线段连接起来形成一个增强回路。生活中有很多增强回路的示例：
- 人越是积累了知识，积累新知识的能力就越强；积累新知识的能力越强，然后就更能理解新知识.
- 人越有信用，别人越愿意和你合作。别人越愿意和你合作，你就能积累更多的信用，就越有人和你合作，如此不断增强；
3. 很多时候，我们的改善并不需要一直猛踩油门，有时只要松开刹车就好，在增强回路的成效越来越低时，很难再有突破，调节回路有助于改善增强回路带来的问题。
3.1. 增强回路小例子 🌰
长久以来，人们给增强回路导致的大起大落现象，起了无数的名字，常见的有：马太效应、经济学家口中的赢家通吃、金融学中的复利效应、互联网公司的指数型增长。
小事情推动靠聪明才智，比较长远的事情要靠建立正向的增强回路。2022 年底到2023 年末，大模型相当火爆，其背后的 OpenAI 更是成为影响力很大的公司，我们可有关注他们在内部协作的增强回路呢？
OpenAI 产品推动的思路是： The model is the product，将模型的新功能融入产品，在设计产品过程中与研究团队专注设计模型行为：
笔者是一个比较喜欢阅读的人，随着阅读时间的累加，也在逐步思考怎么才能将自己获得的『输入信息』变成有一定质量与正向效果的『输出』？
起初，只想到了一些常用的 Push 方法：多读书，多与别人沟通、请教，然后尝试去改善『输出』。
后来，也不知哪天突发奇想，想起了大学老师曾经在某节课堂上（幸亏当时没有在课上睡觉）提到的一个常见的商业管理模式：推拉模式（Push/Pull）。于是就将『输入』与『输出』简化为：听、说、读、写这四个因素，从 Push 与 Pull 两个方面来编排这四个因素，就能组成输入与输出之间的增强回路：
- 所谓 Push，就是继续保持之前的习惯：多听、多读、多思考。
- 所谓 Pull，就是强调『输出』，多说、多写、多强调产出。
让两者形成一个增强回路，变成一个自动运行的卷动机，效果就会比单独 Push 或 Pull 更好。
3.2. 调节回路
如果说增强回路的存在，是让这个世界走向极端，那么调节回路的存在，就是让这个世界回归平衡。因为增强回路就是『狂卷』，追求极端，很容易陷入『目标隧道』，而调节回路，让人回归平衡、自然，在得到休息的同时增添乐趣。
因此，我们在找到自己的增强回路后也需要借助调节回路，以及上述提到的平衡思维来落地调节回路，笔者这里就不做过多赘述。
当然，模型思维固然能帮助我们很好地实践，让自己变得简洁、清晰、透彻，但也有其局限性。在模型基本确定的情况下，其能力的『天花板』也随之确定，天花板的突破需要我们根据实际情况来持续丰富、升级自己的心智模型。
4. 重读数学的乐趣
NOTE
行文至此，基本到了最后一个专题：数学。鉴于许多人对数学有着又爱又恨的恐惧心理，笔者在这里保证不会引入一些复杂的公式，而是重在强调数学思维真的又底层又有用，更贴近人们常说的『第一性原理』。
4.1. 怎么突然又学起数学了？
相信很多人都听说过分解、分类、排列、组合、四象限、流程等比较热门的词语，那么问题来了，我们是否梳理总结过自己真正实践、应用了多少呢？笔者还真的刻意梳理过：
在基础逻辑与行动指导、产出表述与写作训练阶段，只要肯花时间去学习领悟，并刻意训练，我们基本都能获得不错的效果。随着时间的积累，笔者逐渐发现自己在底层原理方面的抽象理解能力不是一般的薄弱：
- 在函数、复利、排列组合方面也尚可，但很难将决策树、贝叶斯等概率理论应用到日常工作与生活中，后来笔者也观察到身边大部分人也是没能将这些理论应用到实际工作中。
- 随着对模型思维、量化分析等兴趣的加强，以及 AI 大模型兴起（成为了 ChatGPT 靠前一批的注册者），数学方面的短板更是凸显。
因此，基于多方面遇到的问题，笔者就重新学起了数学：
- 起初会看一些数学发展史、数学家的故事、日常工作与生活中常用的数学知识。
- 在 2023 年更是启动了数学通识基础知识、概率论等基础知识的学习与理解。在大模型越来越被大家熟知后，更在数学基础知识的基础上侧重补充了一些机器学习、神经网络等模型与算法依赖的数学知识（这些知识在大学阶段虽然也学过，但毕业走向工作岗位后，很少有机会将其应用到实际工作中）。
4.2. 重新发现了有趣的数学思维
分解与分类、排列与组合
相信不少人已经比较熟悉『化繁为简』，『见缝插针』式事务管理。笔者这里依旧把『分解与分类、排列与组合』放在第一位，我们在接收九年义务教育时就开始学习这些，但很少有人能用这些比较简单的数学思维管理自己的时间与事务。
笔者这里只提一个人：雷军，刨除后来的光环不讲，他当年在武汉大学读书时真的将这些应用得淋漓尽致，后来也在不少场合以经历回顾的方式传授给很多年轻人（感兴趣的可在网上搜一些更详细的资料）。所以，笔者也认为：一个人越早学会将『分解与分类、排列与组合』应用到工作与生活中越好，带来的正向效果特别多，活得不糊里糊涂，有自己的节奏感。
多样性红利
假设一个方程代表从一个角度观察得到的结果，那么，如果我们从多个角度观察，就会得到方程组，求解方程组的过程就是整合多个角度的观察结果，找到最接近真相的答案：
图1：病态方程组：两条线特征近似，稍微发生变化就带来较大误差
图2：兼顾多样性的方程组
如果我们总是基于斜率非常接近的直线建立方程组，某条直线只要稍微变化一点，最终的答案就会有很大变化。通过病态方程组，我们可以更好地看清为什么多样性特别重要，多样性已经是一个公认的优势，任何人都会有认知盲点，站在不同角度的人在一起讨论后达成的共识往往最接近真相。
因此，我们在日常工作生活中要试着平衡，运用多样性红利，不应该『过卷、过拟合』，否则容易导致适应性下降，碰到新环境就会各种不适应。
这个世界是稀疏的
傅立叶在 1807 年提交了一篇论文，阐述了一个结论：任何一个连续的周期信号，都可以通过不同频率的正弦波叠加得出，这些正弦波前面的系数大部分为零，只有少部分系数描述了曲线的核心特征：
图1：图片来自《心中有数，生活中的数学思维》
图2：图片来自《心中有数，生活中的数学思维》
熟悉数据压缩的读者应该知道这个原理，我们只需把少量比较大的系数对应的简单图像和对应的系数一起存起来，就可以恢复原始图像，且大大压缩了存储空间：
图片来自《心中有数，生活中的数学思维》
因此，我们在遇到比较复杂的问题时，不需要害怕，因为现实世界中的事物看似复杂，一旦转换为其他的表示方法后，通常是稀疏的。我们只需要拆解并关注少部分核心要素，以及它们之间的关联即可。稀疏无处不在，很多看起来复杂的现象背后所包含的规律，往往都是稀疏且简单的。
概率的世界观
笔者在 2023 年五一假期去『杭州宋城』游玩了一下，快结束时遇到了一个特别有意思的娱乐活动："赌钱"。这里的 "赌钱"活动是游客拿着在宋城钱庄里兑换的、且消费一天后还剩余的零钱铜板去赌一把，碰碰运气，体验下宋朝的赌场。
规则很简单：拿着手里的铜板选择押大或押小，美丽的西子姑娘直接掷骰子，顾客赢了就给同样的下注铜板，庄家赢了就直接赢走下注的铜板。看似简单又粗暴的规则，一段时间下来，大部分游客基本都把仅剩的铜板留在了宋城，很少有顾客能赢。当然，笔者和朋友也不例外，不过还是采用了一个策略去反抗了下，让游戏时间延长一点：三个人约定分工，一人只能押大，另一人只能押小，最后一人拿着剩余的铜板自由调度选择押大押小。可终究没有改变最终的结果，相信熟悉 "大数定律"的人已经知道为什么了：只要一件事情发生的次数足够多，它出现某一个结果的频率就等于其概率。
宋城这个大庄家是活动举办方，一直有职员在玩，基本可以看成有 1/6 的概率稳赢，广大游客来宋城的目的是游玩，不是『赌钱』，玩得次数相对少太多，赢的概率远远比庄家少。笔者阐述这个『大数定律』的小例子，主要是想引出一些启发，觉得我们需要建立起概率的世界观：
- 基础概率是核心，是达成目标的关键因素，我们的核心是：努力提高自身的基础概率。
- 如果我们做成某件事的基础概率比较大，重复的次数就是最好的利器，可以去多次重复；
- 如果我们的基础概率比竞争对手低，需要先看看能不能提高基础概率，若不能提高基础概率，最好的选择是不参与，而是跳到另一个从概率上对自己有利的局里。
AI 教会了我们哪些？
早在几年前，传统的机器学习都是通过『投喂』特定的训练数据给某个单一模型，训练完成后模型能够完成一些特定的任务，但当我们让模型去完成一些别的任务时，其表现就相当差。 我们可以发现，『单任务学习』看起来是集中精力做一件事，但聚焦于某一特定任务并不是最好的方式，因为特别容易忽略任务之间的关联。如果我们把不同任务放在一起训练，充分利用任务之间的关系，就很可能让最后训练出来的模型比单独训练出来的模型表现得更好。相信对大模型有一定了解的读者应该已经发现，这跟大语言模型的思路很像，随着训练数据的加大，大语言模型的表现越来越让人惊艳，尤其是自然语言理解方面。
这也引出了一些好的学习方法论：通识教育是相当重要的，一个人在学习时所使用的方式、思维模型和章法也是相当重要的。“技能”通常是针对某个特定的任务而言的，而“学习方法论”则可以应用于多个不同的任务。那些综合表现好的人，一般都掌握了好的学习方法论，借助这些学习方法论，可以经过短时间的学习就能较好地完成多个不同的任务。
5. 写在最后
行文至此，"疫情后的第一年向外体验" 也基本梳理完成了.在文章的最后，顺便交代下：这是笔者第一次在文章中大篇幅尝试引入数学相关的知识，鉴于数学功底有限，肯定存在不足之处，有兴趣的可阅读一些更专业的书籍。
虽然不少人觉得大模型会成为新的泡沫，笔者这里也不好说看法是否对，但笔者曾阅读过 OpenAI 首席科学家，以及一些研究员早年写的博客，有一个比较共同的特点值得敬佩：即使有很多人在评论区质疑他们描述的 AGI，但他们大多坚信自己能搞出来通用人工智能，这些年也在用实践推动着 AI 的发展。
随着大模型被广泛熟知，AI 应用与变革的路才刚刚开始，希望更多的人能主动思变，拥抱 AI。笔者也会努力继续深入学习 AI，自从再次深入学习 AI 知识后，作为工作几年后的打工人，有点觉得自己的心态变得年轻、有趣了。
',78)])])}const m=i(o,[["render",e]]);export{d as __pageData,m as default};
+import{_ as i,g as s,h as r,U as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","frontmatter":{"date":"2024-01-15T22:16:00.000Z","title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","permalink":"/growth/outer-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png","sticky":1,"top":true,"tags":["系统思维","数学思维","模型思维","AI","疫情"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md","filePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"}'),o={name:"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"};function e(n,t,p,l,g,h){return r(),s("div",null,[...t[0]||(t[0]=[a('Are you an LLM? You can read better optimized documentation at /40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md for this page in Markdown format
走出“目标隧道”：用系统与数学思维重构底层逻辑
摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。
1. 写在前面
时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。
那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。
在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时会觉得很累。自 OpenAI 这家公司名声大噪且 LLM（大语言模型）被各行各业的人们知晓后，笔者开始质疑起了『目标』，尤其在看过 OpenAI 研究员写的《为什么伟大不能被计划》且向一些大佬咨询请教后，更觉得目标是一把双刃剑：
- 对于没有养成良好习惯的人来说，构建切实可行的目标，一旦严格执行落地，在时间的累加效应加持下，大概率是能取得预期结果的。
- 对于想要产出一些创造力或超预期效果的人来讲，目标或许弊大于利。从笔者的实践来看，很容易进入『目标隧道』去卷，更容易错过、洞察更优路径的时机（主要还是社会变化过快，打工人太忙）。
在目标制定、执行和调整之外，或许存在更通用的方法论，它既包括一些成长书中所谓的使命感，也包括个人智慧与经验等因素。因此，笔者在看书、学习数学基础知识与思维、卷 AI 大模型的过程中，尝试去寻找答案，大概率找不到最好答案，但或多或少能找出优于当前状态的路径或答案。
2. 重读《要事第一》
图1：原则、使命与角色示意树
图2：四个维度圈示意图
在重读《要事第一》后，笔者貌似找到了一部分答案。我们经常听到 "人要独立，要有自己的想法"，但我们确实生活在一个相互依赖的社会，独立与相互依赖这两个看似矛盾的点是我们需要学着平衡的：
- 生活质量本质上取决于相互依赖，我们的角色是相互依赖的，几乎每个角色实际上都至少通过另外某一个人发生人际关系；
- 独立本身并不是目的，真正的独立出现在行之有效的相互依赖之前，同时使我们自己为行之有效的相互依赖做好准备。也就是说：独立是一个人值得信赖，并且使信赖成为可能。
- 平衡思维是我们的必修课，我们在不同中长期时间段需要针对自身拆解出几个重要因素，然后借助平衡思维制定合理的多目标去多方面推动。按照这种方式，在一定程度上是可以避免进入『目标隧道』的，即使进入了隧道，也不会有大的损失和挫败，平衡思维下的多维度视角和互相依赖的社会特征会给我们一些启发来调整的。
- 在平衡思维下，目标之上还有原则、使命和角色这三样东西：原则让我们尊重客观规律，使命让我们按照自己的心意，角色让我们关注身体、社会/情感、智力、精神、自我更新等多个方面。
在平衡思维与多维度视角的基础上，我们很自然地产出长（比如年）、中（比如季度）、短（比如周）三个方面的方向或目标，而不是把自己变成一个工具或发条去卷。自然也能尝试使用《要事第一》作者推出的第四代时间管理模式：更看重『人』的范畴，所关注的焦点超越了如何对事务进行有效而机械的管理，更重视同别人进行有效的互动合作。以人为本的模式对于在家庭、组织和其他形式的团体中获得成功都是至关重要的。
鉴于笔者个人的视角也有一定的局限性，对这部分答案感兴趣的读者，可以去阅读原著，来帮助找出一些适合自己实践的答案。
3. 基于系统与模型思维构建洞察力模型
众所周知，在数字化时代，我们每天都在与各种各样的系统交互，每一个表象背后都有一个黑盒子，黑盒子才是规律产生的原因，这个黑盒子也就是系统。
当系统运转正常的时候，我们在遵循着表象的规律做事，可一旦系统出了问题，这些规律将会失效。如果我们无法洞察表象背后的系统，就不可能知道问题出在哪里，更不知道如何解决。笔者在年轻时也不晓得这个道理，所以经常会固执坚守错误的认知，此后被社会打磨得多了，也就开始琢磨系统运行原理、锻炼自己的洞察力了。
洞察力模型就是：理解『表象』背后的『黑盒子』——系统，从而真正从本质上解决问题。在现实世界中，遇到问题，可以尝试摸索，但不要停留在一些似是而非的概念世界里。在知识付费时代，人们更容易陷入概念世界的迷障，我们应该继续尝试走进科学、知识的世界，甚至是智慧世界来抽象分析，然后结合实际情况降维打击具象世界（疫情期间从 B 站林超所长视频中学到的总结，有兴趣的可自己看原创视频）：
系统是一组相互关联的要素，即：系统 = 要素 x 连接关系。在日常工作与生活中，要素是易识别，要素的关联关系容易被忽略，但问题的解决方案，常常就藏在这些『连接关系』里。
因此，我们可基于拆解与关联的思路按照以下步骤进行：
1. 寻找因果关系，人与事、人与物、人与人之间均是如此。若洞察不了关联、因果关系，就一个字『乱』，信息熵越来越大，噪声信息越来越多。因此，我们可以不断拿起两个可能有关系的变量，问自己：他们之间有增强关系吗，有减弱关系吗？
2. 寻找增强回路，因果关系只是单向线段，有头有尾，作用效果从头传到尾就结束了。因此，我们需要继续思考是否能把结尾与开头也用一条线段连接起来形成一个增强回路。生活中有很多增强回路的示例：
- 人越是积累了知识，积累新知识的能力就越强；积累新知识的能力越强，然后就更能理解新知识.
- 人越有信用，别人越愿意和你合作。别人越愿意和你合作，你就能积累更多的信用，就越有人和你合作，如此不断增强；
3. 很多时候，我们的改善并不需要一直猛踩油门，有时只要松开刹车就好，在增强回路的成效越来越低时，很难再有突破，调节回路有助于改善增强回路带来的问题。
3.1. 增强回路小例子 🌰
长久以来，人们给增强回路导致的大起大落现象，起了无数的名字，常见的有：马太效应、经济学家口中的赢家通吃、金融学中的复利效应、互联网公司的指数型增长。
小事情推动靠聪明才智，比较长远的事情要靠建立正向的增强回路。2022 年底到2023 年末，大模型相当火爆，其背后的 OpenAI 更是成为影响力很大的公司，我们可有关注他们在内部协作的增强回路呢？
OpenAI 产品推动的思路是： The model is the product，将模型的新功能融入产品，在设计产品过程中与研究团队专注设计模型行为：
笔者是一个比较喜欢阅读的人，随着阅读时间的累加，也在逐步思考怎么才能将自己获得的『输入信息』变成有一定质量与正向效果的『输出』？
起初，只想到了一些常用的 Push 方法：多读书，多与别人沟通、请教，然后尝试去改善『输出』。
后来，也不知哪天突发奇想，想起了大学老师曾经在某节课堂上（幸亏当时没有在课上睡觉）提到的一个常见的商业管理模式：推拉模式（Push/Pull）。于是就将『输入』与『输出』简化为：听、说、读、写这四个因素，从 Push 与 Pull 两个方面来编排这四个因素，就能组成输入与输出之间的增强回路：
- 所谓 Push，就是继续保持之前的习惯：多听、多读、多思考。
- 所谓 Pull，就是强调『输出』，多说、多写、多强调产出。
让两者形成一个增强回路，变成一个自动运行的卷动机，效果就会比单独 Push 或 Pull 更好。
3.2. 调节回路
如果说增强回路的存在，是让这个世界走向极端，那么调节回路的存在，就是让这个世界回归平衡。因为增强回路就是『狂卷』，追求极端，很容易陷入『目标隧道』，而调节回路，让人回归平衡、自然，在得到休息的同时增添乐趣。
因此，我们在找到自己的增强回路后也需要借助调节回路，以及上述提到的平衡思维来落地调节回路，笔者这里就不做过多赘述。
当然，模型思维固然能帮助我们很好地实践，让自己变得简洁、清晰、透彻，但也有其局限性。在模型基本确定的情况下，其能力的『天花板』也随之确定，天花板的突破需要我们根据实际情况来持续丰富、升级自己的心智模型。
4. 重读数学的乐趣
NOTE
行文至此，基本到了最后一个专题：数学。鉴于许多人对数学有着又爱又恨的恐惧心理，笔者在这里保证不会引入一些复杂的公式，而是重在强调数学思维真的又底层又有用，更贴近人们常说的『第一性原理』。
4.1. 怎么突然又学起数学了？
相信很多人都听说过分解、分类、排列、组合、四象限、流程等比较热门的词语，那么问题来了，我们是否梳理总结过自己真正实践、应用了多少呢？笔者还真的刻意梳理过：
在基础逻辑与行动指导、产出表述与写作训练阶段，只要肯花时间去学习领悟，并刻意训练，我们基本都能获得不错的效果。随着时间的积累，笔者逐渐发现自己在底层原理方面的抽象理解能力不是一般的薄弱：
- 在函数、复利、排列组合方面也尚可，但很难将决策树、贝叶斯等概率理论应用到日常工作与生活中，后来笔者也观察到身边大部分人也是没能将这些理论应用到实际工作中。
- 随着对模型思维、量化分析等兴趣的加强，以及 AI 大模型兴起（成为了 ChatGPT 靠前一批的注册者），数学方面的短板更是凸显。
因此，基于多方面遇到的问题，笔者就重新学起了数学：
- 起初会看一些数学发展史、数学家的故事、日常工作与生活中常用的数学知识。
- 在 2023 年更是启动了数学通识基础知识、概率论等基础知识的学习与理解。在大模型越来越被大家熟知后，更在数学基础知识的基础上侧重补充了一些机器学习、神经网络等模型与算法依赖的数学知识（这些知识在大学阶段虽然也学过，但毕业走向工作岗位后，很少有机会将其应用到实际工作中）。
4.2. 重新发现了有趣的数学思维
分解与分类、排列与组合
相信不少人已经比较熟悉『化繁为简』，『见缝插针』式事务管理。笔者这里依旧把『分解与分类、排列与组合』放在第一位，我们在接收九年义务教育时就开始学习这些，但很少有人能用这些比较简单的数学思维管理自己的时间与事务。
笔者这里只提一个人：雷军，刨除后来的光环不讲，他当年在武汉大学读书时真的将这些应用得淋漓尽致，后来也在不少场合以经历回顾的方式传授给很多年轻人（感兴趣的可在网上搜一些更详细的资料）。所以，笔者也认为：一个人越早学会将『分解与分类、排列与组合』应用到工作与生活中越好，带来的正向效果特别多，活得不糊里糊涂，有自己的节奏感。
多样性红利
假设一个方程代表从一个角度观察得到的结果，那么，如果我们从多个角度观察，就会得到方程组，求解方程组的过程就是整合多个角度的观察结果，找到最接近真相的答案：
图1：病态方程组：两条线特征近似，稍微发生变化就带来较大误差
图2：兼顾多样性的方程组
如果我们总是基于斜率非常接近的直线建立方程组，某条直线只要稍微变化一点，最终的答案就会有很大变化。通过病态方程组，我们可以更好地看清为什么多样性特别重要，多样性已经是一个公认的优势，任何人都会有认知盲点，站在不同角度的人在一起讨论后达成的共识往往最接近真相。
因此，我们在日常工作生活中要试着平衡，运用多样性红利，不应该『过卷、过拟合』，否则容易导致适应性下降，碰到新环境就会各种不适应。
这个世界是稀疏的
傅立叶在 1807 年提交了一篇论文，阐述了一个结论：任何一个连续的周期信号，都可以通过不同频率的正弦波叠加得出，这些正弦波前面的系数大部分为零，只有少部分系数描述了曲线的核心特征：
图1：图片来自《心中有数，生活中的数学思维》
图2：图片来自《心中有数，生活中的数学思维》
熟悉数据压缩的读者应该知道这个原理，我们只需把少量比较大的系数对应的简单图像和对应的系数一起存起来，就可以恢复原始图像，且大大压缩了存储空间：
图片来自《心中有数，生活中的数学思维》
因此，我们在遇到比较复杂的问题时，不需要害怕，因为现实世界中的事物看似复杂，一旦转换为其他的表示方法后，通常是稀疏的。我们只需要拆解并关注少部分核心要素，以及它们之间的关联即可。稀疏无处不在，很多看起来复杂的现象背后所包含的规律，往往都是稀疏且简单的。
概率的世界观
笔者在 2023 年五一假期去『杭州宋城』游玩了一下，快结束时遇到了一个特别有意思的娱乐活动："赌钱"。这里的 "赌钱"活动是游客拿着在宋城钱庄里兑换的、且消费一天后还剩余的零钱铜板去赌一把，碰碰运气，体验下宋朝的赌场。
规则很简单：拿着手里的铜板选择押大或押小，美丽的西子姑娘直接掷骰子，顾客赢了就给同样的下注铜板，庄家赢了就直接赢走下注的铜板。看似简单又粗暴的规则，一段时间下来，大部分游客基本都把仅剩的铜板留在了宋城，很少有顾客能赢。当然，笔者和朋友也不例外，不过还是采用了一个策略去反抗了下，让游戏时间延长一点：三个人约定分工，一人只能押大，另一人只能押小，最后一人拿着剩余的铜板自由调度选择押大押小。可终究没有改变最终的结果，相信熟悉 "大数定律"的人已经知道为什么了：只要一件事情发生的次数足够多，它出现某一个结果的频率就等于其概率。
宋城这个大庄家是活动举办方，一直有职员在玩，基本可以看成有 1/6 的概率稳赢，广大游客来宋城的目的是游玩，不是『赌钱』，玩得次数相对少太多，赢的概率远远比庄家少。笔者阐述这个『大数定律』的小例子，主要是想引出一些启发，觉得我们需要建立起概率的世界观：
- 基础概率是核心，是达成目标的关键因素，我们的核心是：努力提高自身的基础概率。
- 如果我们做成某件事的基础概率比较大，重复的次数就是最好的利器，可以去多次重复；
- 如果我们的基础概率比竞争对手低，需要先看看能不能提高基础概率，若不能提高基础概率，最好的选择是不参与，而是跳到另一个从概率上对自己有利的局里。
AI 教会了我们哪些？
早在几年前，传统的机器学习都是通过『投喂』特定的训练数据给某个单一模型，训练完成后模型能够完成一些特定的任务，但当我们让模型去完成一些别的任务时，其表现就相当差。 我们可以发现，『单任务学习』看起来是集中精力做一件事，但聚焦于某一特定任务并不是最好的方式，因为特别容易忽略任务之间的关联。如果我们把不同任务放在一起训练，充分利用任务之间的关系，就很可能让最后训练出来的模型比单独训练出来的模型表现得更好。相信对大模型有一定了解的读者应该已经发现，这跟大语言模型的思路很像，随着训练数据的加大，大语言模型的表现越来越让人惊艳，尤其是自然语言理解方面。
这也引出了一些好的学习方法论：通识教育是相当重要的，一个人在学习时所使用的方式、思维模型和章法也是相当重要的。“技能”通常是针对某个特定的任务而言的，而“学习方法论”则可以应用于多个不同的任务。那些综合表现好的人，一般都掌握了好的学习方法论，借助这些学习方法论，可以经过短时间的学习就能较好地完成多个不同的任务。
5. 写在最后
行文至此，"疫情后的第一年向外体验" 也基本梳理完成了.在文章的最后，顺便交代下：这是笔者第一次在文章中大篇幅尝试引入数学相关的知识，鉴于数学功底有限，肯定存在不足之处，有兴趣的可阅读一些更专业的书籍。
虽然不少人觉得大模型会成为新的泡沫，笔者这里也不好说看法是否对，但笔者曾阅读过 OpenAI 首席科学家，以及一些研究员早年写的博客，有一个比较共同的特点值得敬佩：即使有很多人在评论区质疑他们描述的 AGI，但他们大多坚信自己能搞出来通用人工智能，这些年也在用实践推动着 AI 的发展。
随着大模型被广泛熟知，AI 应用与变革的路才刚刚开始，希望更多的人能主动思变，拥抱 AI。笔者也会努力继续深入学习 AI，自从再次深入学习 AI 知识后，作为工作几年后的打工人，有点觉得自己的心态变得年轻、有趣了。
',78)])])}const m=i(o,[["render",e]]);export{d as __pageData,m as default};
diff --git "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.CJpPM59I.lean.js" "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.DJ7lWg_C.lean.js"
similarity index 97%
rename from "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.CJpPM59I.lean.js"
rename to "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.DJ7lWg_C.lean.js"
index d4b7e2d1..6e8e0e58 100644
--- "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.CJpPM59I.lean.js"
+++ "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_01.\350\265\260\345\207\272\342\200\234\347\233\256\346\240\207\351\232\247\351\201\223\342\200\235\357\274\232\347\224\250\347\263\273\347\273\237\344\270\216\346\225\260\345\255\246\346\200\235\347\273\264\351\207\215\346\236\204\345\272\225\345\261\202\351\200\273\350\276\221.md.DJ7lWg_C.lean.js"
@@ -1 +1 @@
-import{_ as i,g as s,h as r,U as a}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","frontmatter":{"date":"2024-01-15T22:16:00.000Z","title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","permalink":"/growth/outer-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png","sticky":1,"top":true,"tags":["系统思维","数学思维","模型思维","AI","疫情"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md","filePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"}'),o={name:"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"};function e(n,t,p,l,g,h){return r(),s("div",null,[...t[0]||(t[0]=[a("",78)])])}const m=i(o,[["render",e]]);export{d as __pageData,m as default};
+import{_ as i,g as s,h as r,U as a}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","frontmatter":{"date":"2024-01-15T22:16:00.000Z","title":"走出“目标隧道”：用系统与数学思维重构底层逻辑","description":"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。","permalink":"/growth/outer-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png","sticky":1,"top":true,"tags":["系统思维","数学思维","模型思维","AI","疫情"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md","filePath":"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"}'),o={name:"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md"};function e(n,t,p,l,g,h){return r(),s("div",null,[...t[0]||(t[0]=[a("",78)])])}const m=i(o,[["render",e]]);export{d as __pageData,m as default};
diff --git "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.BIUhmRg0.js" "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.Cj12M61O.js"
similarity index 99%
rename from "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.BIUhmRg0.js"
rename to "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.Cj12M61O.js"
index 0c018e2d..43f01edb 100644
--- "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.BIUhmRg0.js"
+++ "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.Cj12M61O.js"
@@ -1 +1 @@
-import{_ as r,g as t,h as i,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","frontmatter":{"date":"2023-01-08T10:23:50.000Z","title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","permalink":"/growth/inner-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png","sticky":1,"top":true,"categories":"个人成长","tags":["健康","时间","悦读时光","远程协作","疫情"]},"headers":[],"relativePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md","filePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"}'),o={name:"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"};function s(n,a,e,p,g,h){return i(),t("div",null,[...a[0]||(a[0]=[l('Are you an LLM? You can read better optimized documentation at /40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md for this page in Markdown format
向内思变：当疫情给世界按下暂停键，去重构生活秩序
摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。
写在前面
自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：
- 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有属于自己独一份的经历。笔者这三年也在疫情影响的基础上，经历了一些之前未曾遇到过的事情，幸运的是从中也学到了一些东西，并在生活实践中去尝试、去改变。因此，在疫情进入初步放开的新阶段，也想做一次复盘总结。
- 间接原因：复盘总结的可选方式有很多种，但写文章是笔者觉得挺适合自己的一种方式。所以，笔者决定借助开放平台来继续完成一篇复盘总结文章。既锻炼下自己的写作能力，也能借助开放平台或多或少收到一些反馈与建议。鉴于笔者没有过多思考要总结哪些东西，所以标题也命名为 “漫谈疫情这三年向内思变”。
疫情期间，笔者基本没有怎么出过远门，甚至阴差阳错地给自己安排了更多的独处时间。周末也倒逼自己按照比较严格的作息推动业余实践，尝试向内探索。因此，所谓 “向内思变”，用时髦的说法也叫 “闭关”，接下来就阐述下要漫谈的话题。
漫谈话题
健康，拥有的时候经常不会被珍惜，失去的时候却追悔莫及，但重新找回后却很容易再次不被珍惜（不难理解，这就是人性）
读书与学习，一个被广为熟知的话题，但笔者在这方面是有一定自信的，因为有过比较正向的实践，多少有点底气。自大学时代开始，笔者在这方面有一定的嗜好，且系统践行了此嗜好，还通过啃一些跨专业的书来学习，直至可以抛弃原来的专业，在毕业时也留下了两篇关于这方面的总结文章。当然，任何时候、任何人的经历都代表不了实力。本次漫谈笔者会结合自己的经验、思考与总结来梳理，尽最大努力让这个话题起到抛砖引玉的作用，有兴趣的小伙伴在以后的日子里可共同进步。
时间管理，这个话题虽被大家熟知，却很少有人能自信地说 “自己能很好地管理时间”，笔者肯定也不例外。但本次漫谈会梳理下笔者自己在实操方面的尝试，思考与总结。
混合工作制，这个话题在疫情到来后被大家熟知，所以笔者这里也未必能分享出多么稀奇古怪的见解，但同样会结合实操给出自己的思考与总结。
漫谈健康
健康危机
鉴于笔者在大学阶段自由学习与探索的勇气可嘉，因此在经历两次 “校园互联网小作坊” 的锻炼后，毕业时选择的工作自然而然地成为了大学兴趣的延续。当然，也延续了很多大学阶段养成的对健康不利的习惯，作息无规律，仗着无知挥霍身体；无健康意识，不怎么锻炼身体，比如：
- 很少吃早饭，经常吃早中饭或者午饭。除了工作、学习和娱乐勤快点，别的方面比较懒。
- 长期熬夜，业余也喜欢学点东西，写点代码（大概率是走出校园后看到了人外有人，随着工作的深入，慢慢意识自身不足，想要提升一些技能）。
人无作息规律地熬一天不累，熬十天就累了，熬几年也就要坏事了。就这样经过长年累月地洗礼，健康也在疫情到来的第一年亮起了小红灯。当然，经过医生、家人等多方的协力帮助，以及自己的坚忍硬扛，最终康复了。期间虽然经历了比疫情放开后大部人转阳痛苦且印象深刻多倍的事情，但不是本文的重点，这里只留下笔者事后深刻反思的几个心得：
- 不好的事情如果已经到来，懊悔等悲观情绪都没有任何用处，只能是想尽一切办法 “先治病救命，休养康复，然后再谈健康养生”。
- 现代医疗虽能救死扶伤，但终究只是最后的止损方式。我们只有在日常注重预防保健、培养健康意识，注重养身修身，才有可能在这个社会上走的更远。
- 随着社会的发展，人被技术圈和社会圈包裹了起来，人与自然之间的距离也就越来越远了，自然人也就发生了异化（放眼望去，身边充满着太多类似笔者这种不够注重自身健康的人）。
健康知识学习
既然已经知晓自身问题且暂时止损了，自然要继续寻找更长远的解决方法。但方法不会凭空从天上掉下来的，它需要自己去寻找。笔者寻找方法的主要途径是：向专业或有经验的人咨询，向书本上的健康标准和知识找。
1、向有专业或有经验的人咨询
由于笔者仍然保持着大学时代学会的“免费”思维，所以在接近康复出院的时候就开始跟医生、医护、病友等以聊天的方式咨询。众所周知，医生是经常传授病人一些健康知识的专业人员，医护是长年累月协助病人康复训练的专业人员，病友是那些与自身有着相同失误的人，向这几波人咨询更能习得比较正向的建议或小技巧。这一阶段积累了一些碎片化的健康意识，康复训练小技巧，以及戒掉不良生活习惯的注意点，也为后面的防治宜早、起居有常、适量运动等原则做了铺垫。
2、学习健康标准和知识
健康其实是有标准、有依据的：
*《皇帝内经》中的标准：形与神俱，而终其天年，度百岁乃去。 *现代的健康标准：生理健康、心理健康、社会及自然环境适应良好，道德良好，并达到人之天年。
如上所述，健康标准简单且易懂，但它不足以指导大部人去实践（除非是不世出的罕见人才，看到标准后就能推导出符合实际的解法）。所以笔者结合自身经历和健康知识，进一步采用 “分解” 和渐进明细的方式，学着梳理出一些健康原则：
- 合理饮食，日常饮食注重杂食多样，确保能量、营养、性味平衡。
- 起居有常，尝试改变生活方式，健康有序，防戒不良生活习惯。
- 适量运动，因人因时因地地制定出一套健身运动的项目，循序渐进、持之以恒地坚持下去，保持健康一点的形体，提高对环境的适应能力
- 静养心神：
- 给自己的生活做减法，宁可不合群，也要避免接触一些没有用还容易内耗的人和事。
- 多读点书，尝试将书中的一些知识用到工作和生活中。
- 防治宜早，吸取医生的建议，对亚健康状态及疾病坚持预防为主、早防早治
最后，为保证自己在理论意识上更注重身体健康，笔者还拜读了毛教员在青年时期写下的《体育之研究》。读过教员鞭辟入里的文章后，也更从理论上明白了：“体者，载知识之车而寓道德之舍也。体育一道，配德育与智育，而德智皆寄于体。”
3、健康实践
结合沉淀下来的原则，笔者花费了 1.5 年的时间，进行了两个方面的实践：
- 工作日早上坚持做早饭，三餐慢慢靠向合理均衡。周末培养一些做饭的技能，借助烟火气来平衡下工作与生活。
- 设定减肥目标，通过控制饮食、增强体育锻炼活动来实现体重的减少，提升自身健康。
随着时间的流逝，笔者现在也能自己做出 75 分的家常菜了（特别感谢很多师傅指导），且将下面这张图作为自己的日常饮食原则：
关于健身减肥方面的实践，笔者这里只阐述下主要实践思路，实践细节可参考笔者之前写的一篇文章：减肥这件小事阶段随笔汇总。
关键点 1：要考虑打工人工作比较忙碌的客观现实，将时间周期拉的长一点，目标拆解的细一点，可分阶段来。我们可以结合身边的很多例子来反思下，为什么那么多人喊着健身和减肥，真正成功的却不多呢？是耐力不够，还是客观环境不允许呢？笔者觉得两个原因都有，如果时间足够充裕，用这么多空闲时间来专注地完成一件正确的事情是没有大问题的。可现实生活中时间不会多么充裕，正是基于客观考虑，笔者才调整了实践思路：
- 严格阶段：基于“管住嘴，迈开腿”的准则，每月减 5 斤，半年减 30 斤（已完成实现）
- 巩固阶段：在 “管住嘴” 的基础上， 侧重 “迈开腿”的准则，加大运动量，提升自身身体素质（2022年执行良好）
- 持续阶段：将“每天锻炼一小时，快乐工作五十年”作为一个长期习惯来贯彻下去（希望 2023 年及以后的日子里可以继续做到）
关键点 2：实践过程中借助体脂秤的指标和数据统计，来定期分析自身数据，及时发现、纠正实操过程中的问题（这是笔者所在行业的惯用套路）。我们可以继续结合生活中的例子来看下，自己可有花些时间来反思、复盘自身存在的问题，然后调整行动呢？大部分应该都没有这么做。其实，笔者之前在这方面做的也特别少，后来随着工作和生活阅历的增加，慢慢注重这方面了。
4、健康小结
健康这个话题聊的差不多了，笔者在这个话题的最后简单分享两个自己学到的、且感觉比较实用、可广泛应用的迭代实践套路。有兴趣的朋友可去深入学习，如果还能在工作和生活中尝试起来，相信会取得更好的效果。
(1) 目标 -> 问题 -> 诊断 -> 方案 -> 践行 （套路来自《原则》这本书，该书在疫情前被笔者知晓后阅读，疫情后又翻了下，跟老朋友们也强烈推荐过）
2、一个全面质量管理的思想基础和方法依据，循环式品质管理 PDCA，又称戴明环。由戴明提出，据说他十分热爱统计学，二战时曾将统计学应用于制造业，后来在日本传授质量控制，随着日本制造技术的逐渐发达，戴明也成为了比较著名的人物。
漫谈读书与学习
1、读书的目的
读书与学习的区别是什么呢？
在笔者看来，读书与学习是两码事，读书不等于学习，想要学习成长倒是可以多读点书。当然，有些人会把读书当成一种习惯和爱好，但笔者想继续问的是：习惯和爱好不是凭空来的，这种习惯和爱好背后的本质原因和动力又是什么呢？可能答案中多少会涵盖点 “想从读书中学到点东西”吧。
身处一个知识迭代速度和生活节奏都在加快的时代，“焦虑”与“迷茫”会时不时来敲门。因此，为应对社会生活中的焦虑与迷茫，人们选择了各种各样的方式，读书与学习自然也成为了一种常用的方式。笔者之前主动跟人交流的动力不大，所以读书与自我规划学习也是笔者的选择。
因此，如果有人问起 “你读书的目的是什么”，笔者会结合读过的《纳瓦尔宝典》这本书给出现在的答案：构建自己的心智模型。当然，如果在未来 N 年后有人再问起这个问题，笔者希望自己可以结合《穷查理宝典》这本书和查理芒格这个人给出比当前更深入和细化的答案（目前不能给这个答案，因为笔者自己构建的心智模型还不够好）。
2、读书的方式
随着时间的推移，笔者在读书方面体验了以下三种方式：
- 自由式阅读，作为一种娱乐和爱好，比如阅读一些小说或自己觉得有趣的书。
- 填鸭式阅读，为短时间学习、了解某个技能或东西，而选择的类似应试教育的方式。
- 海绵式阅读，结合自身遇到的问题通过阅读学习来找答案，或阅读学习的过程基于书中的阐述来结合实际提炼出可指导实践的“套路”。
我们并不需要像辩论赛那样争论、PK 出上述哪种方式好，哪种方式不好。因为每种方式都有可能、或多或少助力我们成长。从实践效果来看，或许海绵式阅读是大多数人认可的方式，但有些采用自由式阅读的人真的在某些方面比采用海绵式阅读的人优秀；从时间维度来看，没有自由式、填鸭式的阅读，也很难直接转变为海绵式阅读。
在笔者看来，我们要关注的不是单选题，是“全都要”，要学会在不同的场景下切换到不同的阅读方式。即使是同一个人，也可根据不同的场景、不同的时间来切换到不同的阅读方式。所以，这里再做一个大胆又狂妄地的论断：为什么很多人读了很多的书，却依旧过不好这一生？因为纵使一个人满腹经纶，但 TA 没有清晰的认清问题本质，做不到学以致用与知行合一（书生误国也是这个道理）。
3、读书工具选择与实践
大学时代，自接触互联网后，笔者依旧会买一些纸质书来看，但也坚信“信息化”是大势所趋，一个大学生在学好数学等基础学科的基础上，应该花些精力来学习了解下计算机技术。经历疫情这三年后，笔者再次坚信 “数字化” 是继 “全球化” 之后的大势所趋。
在阅读工具的选择方面笔者经历了以下几个阶段：
- 纸质书 => 互联网信息
- 纸质书 + 互联网信息 + Kindle 电子书
- 纸质书 + 互联网信息 + 国内阅读APP（微信阅读、蜗牛读书等）
目前，“纸质书 + 微信阅读 + 互联网信息”成为了笔者最终选择的组合工具。在 2021 年底，笔者认为微信读书推出的年度报告产品已不足以总结自己在阅读方面的全貌，而且在闲暇的时候觉得自己在阅读方面不够系统化。因此，就创建了一个“阅读准则表格”，用于指导自己的阅读实践。表格依旧采用了分解与渐进明细的思路：
- 明确自己当前的定位，划分出四个“定位圆圈”，对每个圆圈进一步分解，从而划分出几个分类：
- 工作技能圈，包括编程技术学习、职业发展学习、互联网行业与科技 三类
- 生活短板补充圈，目前只包括身体健康与居家这一个大类
- 个人能力补充圈，包括统计与数学、经济与财经知识学习 两类
- 人文哲思调剂圈，包括哲思人生、历史读物、文学与小说 三类
- 为每一个分类配备对应的阅读工具与实践原则
4、小结
在上述“阅读准则表格”的协助下，阅读与学习这件小事在疫情期间也变得比之前明晰起来，且由于 2022 年频繁居家，节省下来的时间也就多了，笔者希望能继续向着“构建自己的心智模型”这个方向实践下去。
阅读与学习这个话题到此也基本漫谈完了，对这个话题或阅读工具感兴趣的朋友可以看下凯文凯利在几年前写的《必然》这本书（笔者坚信，微信读书这个产品在发展的过程中，其团队中肯定有人读过这本书）。当然，如果不觉得笔者在做广告，也可看下笔者毕业前留下的两篇相关文章：
漫谈时间管理
1、时间不够用问题
时间是我们在这个世界上最优质和公平的资产，可它也能是让人在其面前最无奈。因此，如何利用、管理自己的时间也成为了每个人的必修课。
身处时间碎片化、角色多元化的社会，我们的时间变得越来越碎，每个角色背后也都有一堆琐碎的事不断涌进来。很多人觉得时间管理、时间不够用是老生长谈的话题，身边充斥着讲这个方面的人和书，但没有多少实际的用处。笔者曾试图分析过这个现象，最终总结出来的主要原因有 3 个：
- 即便读遍全天下关于时间的书，遍访了全天下有相关经验的人。只要不去行动，就是白费功夫，与其这般努力，不如躺平。
- 每个人遇到的问题和设定的目标不同，采用的处理方式自然也不同，有些人的总结未必适合自己，拿来借鉴也未必能起到多少效果。
- 调整后的效果需要时间来证明，在没有看到效果前大多数人都容易放弃。即使看到了短期的效果，只要解决了当前棘手的问题，很少有人会选择继续保持。
刚好在疫情这三年，笔者有机会基于遇到的问题，在这方面尝试改善了下。重新拥有健康的身体后，有几个难题摆在了笔者面前：
- 随着工作年限和阅历的增加，需要依赖发现、分析后才能清晰的问题和事务相较之前占比多了，压力也随之上升，时间变得明显不够用。
- 合理的饮食、健康的身体、比较有规律的作息被列为头等大事，有些实践需要时间落地，有些改变需要依赖时间才能有效果
- 重新拥有健康的身体后，笔者不但想在工作方面多做些正确的事，还想在为数不多的业余时间推动“读书与学习”这件小事，通过构建稳健的心智模型来应对不稳定的大环境。
笔者相信，有过类似经历的人肯定能更明白其中的矛盾与酸楚，面对很多件抢占时间资源的事务，又不得不逼着自己想方设法找到解决办法，真的蛮有压力的。当然，躺平和摆烂是一种方式，可人躺久了也会不自觉地想要尝试突破一下局限，与其让问题与环境倒逼自己改变，不如自己思变。
2、分阶段调整时间管理
第一阶段：疯狂做减法，专注重要的事
不推荐的严格时间表，形如 7:20-7:50 起床、洗漱；7:50-8:30 锻炼身体；8:20-8:50: 吃早饭...... 这样简单地把一天时间分为线段的作息日程表.
（1）丢弃不靠谱的严格时间表，为自己减压
- 普通人勤奋些是对的，但逼着自己执行“严格时间表”只会让自己变得更加焦虑。
- 越是努力地执行严格的时间表，就越体会到挫败感、焦虑感，我们不该用理想化的方法要求自己。
（2）重新理解与应用“时间四象限”
- 使用清单 List 来管理事务。基于事务的重要程度，刻意忽略不重要的事，即紧急不重要和不紧急不重要的事务（干掉紧急不重要的事务有点过于暴力，也容易被别人误解。但由于笔者在第一阶段还处于救火阶段，会比较狠）
- 错开大众上班高峰时间，上午给自己预留 2.5 小时的无干扰时间。半小时用于健身，1.5 小时用于处理重要不紧急的事
- 正常工作时间处理重要且紧急的事，尽最大努力将重要且紧急的事务快速干掉，并尽最大努力避免重要不紧急的事务演变为重要且紧急的事务
（3）重新调整周末时间
- 周六无重要事不约不逛：周六上午预留网上冲浪和阅读文章充电时间，周六下午预留健身时间
- 周日上午随意，下午与晚上预留出阅读与学习时间
在这种“快刀斩乱麻”式的操作下，近小半年后笔者发现自己在工作方面不那么像四处灭火的“捉急状态”了。健康、读书与学习两方面的习惯得以保住，虽然体重变化存在小范围波动，但健身减肥的胜利果实也被巩固住了。
第二阶段：升级清单管理
在这个阶段，鉴于笔者看了一些时间管理相关的书，比如《哈佛时间管理课》、《哪里没有时间》等书。结合自己在第一阶段的问题，决定在第二阶段对清单进行改善。清单是个好东西，能用来梳理、分析自己的时间利用是否符合预期，有助于使用者不断思考如何将日常任务做的更好。列出来清单后能降低甚至避免焦虑，因为在执行时不是从大脑中提取，而是从清单中读取。
在升级清单管理前，笔者只有一个主要用来管理工作相关事务的清单，业余时间是没有清单管理的。但随着健康与业余自我充电相关的投入加大，升级清单管理有了一定的必要条件。升级清单管理的主要思路依旧运用了分解与渐进明细，将清单分为：碎片清单、工作日-日常清单、周末-日常清单三类：
碎片清单：
作为大脑的缓冲池而存在，收集大脑基于客观因素或主观思绪而产生的事务（不区分优先级，不区分事务大小）。把事务丢进碎片清单的目的是要在其他合适的时间再去思考它、处理它，同时保持当下时间的专注。
碎片清单是另外两个清单的主要输入，建立碎片清单，需要养成每天把碎片及时装进日常清单的习惯
删除长时间没有被迁移且渐进明细到日常清单的事务
日常清单(工作日)：
用于收集工作日的日常事务，其输入主要来自碎片清单或临时加进来的重要且紧急事务。
日常清单收集事务不能照搬碎片清单，而是碎片清单的再次分解与渐进明细。进入日常清单的任务必须有子任务或关键步骤，且基于再次分解的结论标出预估耗时。
日常清单(周末)：
用于收集周末的日常事务，其输入主要来自碎片清单，优先对健康、读书与学习相关的事务；次优先排日常起居、购物等事务。
日常清单收集事务依旧不能照搬碎片清单，而是再次分解和渐进明细碎片清单。进入周末日常清单的任务必须包含子任务和关键步骤，且基于再次分解的结论标出预估耗时。
就这样，升级后的三个清单进一步优化了笔者的时间。持续几个月后，笔者也慢慢变得敢于决断，哪怕决断错了也要干。因为改变说起来容易做起来难，如果在做的过程中还惧怕错了，那只能是被束缚得各种不适，改变也就很可能夭折。
第三阶段：刻意统计并调整时间
经历了前两个阶段的改变，某天，笔者在娱乐的时候刚好看到有个 UP 主在讲 “进入人工智能时代后，人要怎么做才能既不失业，还能活的不错”。鉴于笔者统计分析的意识已经建立起来（统计学与数学知识应用依旧存在短板），所以笔者冒出了一个想法：UP 主列出的这个东西可能就是当下自己没有梳理过的时间分配准则。
废话不多说，这里直接贴出 UP 主给出的时间消耗建议，也是笔者在第三阶段的时间统计与调整准则，具体如下图：
因此，笔者结合准则和自己在第一、二阶段沉淀下来的时间分配情况，整出了一个粗糙的时间统计。整个时间统计采用了由局部到整体的方式：
优先统计工作日早上至午休这段时间的分配，基于统计情况调整时间；然后统计并调整午休、下午和晚上等时间的分配 以此类推，次优统计并调整周末时间的分配（为避免自己变成有强迫症的人，周末调整没有工作日拆解的细，为自己预留一些挥霍的自由） 笔者这里给出统计与调整示意如下：
至此，刻意统计与调整阶段的阶段也漫谈完了。笔者在这一阶段还挺觉得有成就感的，因为终于有机会在工作之外初级又粗糙地运用了统计学分析，很好地鼓励自己在统计学分析方面继续加大投入力度。
漫谈混合工作制
书接上文，如果说时间管理其实就是对时间这一个维度进行切割，然后把工作与生活中的事务填充进去，那么混合工作制就是基于物理空间和时间这两个维度来切割平面，然后把工作与生活中的事务填充进去。因此，笔者要漫谈的最后一个话题就是混合工作制。
这里所谓的“混合工作制”，对打工人来讲其实就是一部分时间在办公室工作，一部分时间居家远程办公。如果没有疫情，这种方式在国内还不会被大范围运用，虽然互联网行业一直有弹性工作制，但国内很少有企业让员工能持续几天甚至一个月居家办公。笔者认为，疫情只是更显象化了这种方式，因为在疫情出现之前，国外真的有公司在实践，而且国外的自由职业者是比国内多出很多的。
这里不是要展开争论，而是想抛出问题：我们虽然在疫情期间熟悉了这种工作模式，但我们可觉得自己能很好地处理这种模式呢？疫情总会过去的，在疫情后我们要不要继续实践混合工作制呢？
1、适应混合工作制
如上所述，混合工作制是基于空间与时间两个维度来安排要处理的事务，所以适应混合工作制，就是基于二维平面来安排好自己的工作与生活，试着把日子过得顺畅。
笔者不敢说自己在疫情期间很好地适应了混合工作制，因为在疫情早期居家办公真的很累，工作与生活没有了界限，有时觉得自己除了睡觉就一直在工作，回到公司上班的时候就觉得特别爽。但随着疫情的多次反复，也就有了一次次地尝试改变自己来适应居家办公，拥抱混合工作制。在这种客观条件的倒逼下，终究还是适应了，也实现了向内思变。
混合工作制最大的痛点是解决居家办公的苦恼，善用居家办公的优势，甚至把居家办公的经验适当地用在办公室工作中，从而实现真正的混合工作。在居家办公的时候，笔者觉得有以下几个要点需要注意：
- 居家办公时要强调效果和效率。效果源于对重要业务或任务的识别，效率源于专注地运用工具做正确的事
- 划定出专门的办公空间，有效区分起居空间与办公区间
- 基于对重要业务和任务的识别，使用比较清晰的清单和日程表来协助重要事务的推动。笔者这里依旧沿用了时间管理中提到的三个清单：碎片清单、日常任务清单（工作日）、日常任务清单（周末）。
- 善用远程办公工具，电话会议室一种重要的沟通协作方式，开好电话会议能更明确重点，提升效率。
当从居家办公切换到办公室工作环境中，除了不用划定专门的办公空间，很多经验都是可以继续沿用的。只有在碰到特别重要紧急的事情或者娱乐的事情才需要与同事当面沟通交流，这在一定程度上可以提升个人工作效率，去尝试摆脱“无头苍蝇式的忙碌”。
2、延伸思考混合工作制
不知道细心的朋友有没有发现，在疫情到来之前，我们大多接触到一些具有数字化特性的 C 端消费品（如：体脂秤具有称 + APP数据统计 + 虚拟社区；智能手表具有手表+数据收集与分析），只在办公时间或业余遇到紧急问题时才使用远程办公工具来协作，而疫情到来后我们更加主动拥抱、主动适应远程办公工具等数字化、虚拟化产品了。这在一定程度上也表明了：
- 大家在紧锣密鼓地创造产品和服务的数字属性，并以文化、社群的方式加以体现，借助产品的数字化属性，甚至可以把需求方连成网络，从而基于虚拟网络提升服务市场的效率。
- 跨城市、跨地域地沟通协作已经成为了常态，地域化的问题在“数字化”趋势下能得到缓解，跨城市、跨地域地高效协作更容易被接受了。
那么问题来了，一个普通的打工人去延伸思考这些东西有什么用处呢？这是不是类似刚入职的员工操着 CEO 的心，或者说一个普通百姓，业余闲着没事操着治理国家的心呢？笔者个人认为：都不是。而是想基于以上延伸思考引出一个新的业余尝试：业余跨地域协作。
这也关系到疫情后要不要继续实践混合工作制？不在其位就不谋其政，笔者这里不去谈国家或公司会不会在疫情后落地混合工作制，比如“3+2”或“4+1”工作制，因为笔者想延伸地是：如何在业余更大范围地尝试、实践混合工作制。
遥想当年学生时代，一群比较合得来的学生仅仅凭借几成勇气就在业余时间集中到一个物理空间内去捣鼓一些东西，也因为这样的折腾让我们顺利走向了工作岗位。走向工作岗位后，时不时会在虚拟社群中一起侃大山，聊聊工作与生活，吐槽一下自己的改变，但最终收尾的时候多少都还流露出想要搞些有点创造力或者正能量的事情。
所以笔者认为，在上述延伸思考下，其实业余是可以协作的，主要原因有以下三点：
- 基于远程工具协作已经被运用，人们已在疫情中适应了远程办公，跨城市、跨地域的阻碍因素在降低。
- 云服务已经发展得足够简单，很多基础设施已足够便捷（不再是当年在实验室或研究所里拿着裸机装软件的年代了）。
- 数字化是趋势，轻量、小而美、短期可完成的项目是可以协作完成的（虽然雇佣关系在一定时期内仍然是主导，但自由协作关系会越来越多）。
其实最主要的问题还是在于有没有共同的诉求，能不能拿出时间来捣鼓，有没有人能组织且管理好这种自由的远程协作团伙，并合理分配项目收益，实现大家的共同诉求。在疫情中后期，笔者业余时间没少在由几个老伙计组成的社群中“传销”上述延伸思考，疫情结束后也可能会继续尝试下去。
写在最后
行文至此，疫情这三年向内思变的复盘总结基本梳理完成了，不管文章最终的水平怎么样，依旧把自己的“闭关”经历沉淀下来了。
在文章的最后，顺便聊一聊思变。经历了疫情这三年，笔者认为思变不能只“打鸡血”或者 “立Flag”，思变是要结合客观事实和自身诉求来落地的。如果我们宽泛地谈改变，然后逼着自己变，挺内耗的。因为这种改变容易失败，失败后我们又不太容易原谅自己。可如果我们慢慢固化了，一旦大环境发生变化，我们又只能被动地任由社会教育。所以，改变之前需要多思考，需要学习一些知识套路尝试着实践。
笔者在落地上述几个话题的改变时，有些侧重实践为主，基于遇到的问题寻找解决方法；有些则以读书学习、与别人沟通交流的方式推动；还有些以业余娱乐的方式观察发现来推动，但最终实践的时候其实都初窥门径地用到了一些通识且有点哲学味道的“套路”：
- 分解与渐进明细，西方还原论的部分应用，“万物皆数”，对自然认知不断细化，尝试拆解分析出影响事物的本质原因。
- 系统论，即围绕人和社会自身来改善多个影响因素，从而使自己更好地适应社会。
- 知行合一，知是行的头脑，行是知的落实；知是行的开始，行是知的完成。
最后，引用一下笔者早年看过的小说作为结束，其作者萧鼎老师说过“如果没有曾经的一段经历，自己写不出《诛仙》这样的作品”。虽然笔者与萧鼎老师相差甚远，也想在文章的最后说下：“如果没有疫情这三年的经历和刻意的向内思变，笔者也写不出一篇将多个话题串联起来的长文”。
之所以还记得《诛仙》这本小说，倒不是因为小说阐述了“天地不仁，以万物为刍狗”的法则，而是因为它也讲述了一个资质普通又平凡的少年，虽不醉心于修真，但真的凭借着坚韧、阅历一步步身兼“佛道魔”三种功法，这种特质在经济下行的大环境下可能更值得学习。
',122)])])}const m=r(o,[["render",s]]);export{d as __pageData,m as default};
+import{_ as r,g as t,h as i,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","frontmatter":{"date":"2023-01-08T10:23:50.000Z","title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","permalink":"/growth/inner-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png","sticky":1,"top":true,"categories":"个人成长","tags":["健康","时间","悦读时光","远程协作","疫情"]},"headers":[],"relativePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md","filePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"}'),o={name:"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"};function s(n,a,e,p,g,h){return i(),t("div",null,[...a[0]||(a[0]=[l('Are you an LLM? You can read better optimized documentation at /40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md for this page in Markdown format
向内思变：当疫情给世界按下暂停键，去重构生活秩序
摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。
写在前面
自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：
- 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有属于自己独一份的经历。笔者这三年也在疫情影响的基础上，经历了一些之前未曾遇到过的事情，幸运的是从中也学到了一些东西，并在生活实践中去尝试、去改变。因此，在疫情进入初步放开的新阶段，也想做一次复盘总结。
- 间接原因：复盘总结的可选方式有很多种，但写文章是笔者觉得挺适合自己的一种方式。所以，笔者决定借助开放平台来继续完成一篇复盘总结文章。既锻炼下自己的写作能力，也能借助开放平台或多或少收到一些反馈与建议。鉴于笔者没有过多思考要总结哪些东西，所以标题也命名为 “漫谈疫情这三年向内思变”。
疫情期间，笔者基本没有怎么出过远门，甚至阴差阳错地给自己安排了更多的独处时间。周末也倒逼自己按照比较严格的作息推动业余实践，尝试向内探索。因此，所谓 “向内思变”，用时髦的说法也叫 “闭关”，接下来就阐述下要漫谈的话题。
漫谈话题
健康，拥有的时候经常不会被珍惜，失去的时候却追悔莫及，但重新找回后却很容易再次不被珍惜（不难理解，这就是人性）
读书与学习，一个被广为熟知的话题，但笔者在这方面是有一定自信的，因为有过比较正向的实践，多少有点底气。自大学时代开始，笔者在这方面有一定的嗜好，且系统践行了此嗜好，还通过啃一些跨专业的书来学习，直至可以抛弃原来的专业，在毕业时也留下了两篇关于这方面的总结文章。当然，任何时候、任何人的经历都代表不了实力。本次漫谈笔者会结合自己的经验、思考与总结来梳理，尽最大努力让这个话题起到抛砖引玉的作用，有兴趣的小伙伴在以后的日子里可共同进步。
时间管理，这个话题虽被大家熟知，却很少有人能自信地说 “自己能很好地管理时间”，笔者肯定也不例外。但本次漫谈会梳理下笔者自己在实操方面的尝试，思考与总结。
混合工作制，这个话题在疫情到来后被大家熟知，所以笔者这里也未必能分享出多么稀奇古怪的见解，但同样会结合实操给出自己的思考与总结。
漫谈健康
健康危机
鉴于笔者在大学阶段自由学习与探索的勇气可嘉，因此在经历两次 “校园互联网小作坊” 的锻炼后，毕业时选择的工作自然而然地成为了大学兴趣的延续。当然，也延续了很多大学阶段养成的对健康不利的习惯，作息无规律，仗着无知挥霍身体；无健康意识，不怎么锻炼身体，比如：
- 很少吃早饭，经常吃早中饭或者午饭。除了工作、学习和娱乐勤快点，别的方面比较懒。
- 长期熬夜，业余也喜欢学点东西，写点代码（大概率是走出校园后看到了人外有人，随着工作的深入，慢慢意识自身不足，想要提升一些技能）。
人无作息规律地熬一天不累，熬十天就累了，熬几年也就要坏事了。就这样经过长年累月地洗礼，健康也在疫情到来的第一年亮起了小红灯。当然，经过医生、家人等多方的协力帮助，以及自己的坚忍硬扛，最终康复了。期间虽然经历了比疫情放开后大部人转阳痛苦且印象深刻多倍的事情，但不是本文的重点，这里只留下笔者事后深刻反思的几个心得：
- 不好的事情如果已经到来，懊悔等悲观情绪都没有任何用处，只能是想尽一切办法 “先治病救命，休养康复，然后再谈健康养生”。
- 现代医疗虽能救死扶伤，但终究只是最后的止损方式。我们只有在日常注重预防保健、培养健康意识，注重养身修身，才有可能在这个社会上走的更远。
- 随着社会的发展，人被技术圈和社会圈包裹了起来，人与自然之间的距离也就越来越远了，自然人也就发生了异化（放眼望去，身边充满着太多类似笔者这种不够注重自身健康的人）。
健康知识学习
既然已经知晓自身问题且暂时止损了，自然要继续寻找更长远的解决方法。但方法不会凭空从天上掉下来的，它需要自己去寻找。笔者寻找方法的主要途径是：向专业或有经验的人咨询，向书本上的健康标准和知识找。
1、向有专业或有经验的人咨询
由于笔者仍然保持着大学时代学会的“免费”思维，所以在接近康复出院的时候就开始跟医生、医护、病友等以聊天的方式咨询。众所周知，医生是经常传授病人一些健康知识的专业人员，医护是长年累月协助病人康复训练的专业人员，病友是那些与自身有着相同失误的人，向这几波人咨询更能习得比较正向的建议或小技巧。这一阶段积累了一些碎片化的健康意识，康复训练小技巧，以及戒掉不良生活习惯的注意点，也为后面的防治宜早、起居有常、适量运动等原则做了铺垫。
2、学习健康标准和知识
健康其实是有标准、有依据的：
*《皇帝内经》中的标准：形与神俱，而终其天年，度百岁乃去。 *现代的健康标准：生理健康、心理健康、社会及自然环境适应良好，道德良好，并达到人之天年。
如上所述，健康标准简单且易懂，但它不足以指导大部人去实践（除非是不世出的罕见人才，看到标准后就能推导出符合实际的解法）。所以笔者结合自身经历和健康知识，进一步采用 “分解” 和渐进明细的方式，学着梳理出一些健康原则：
- 合理饮食，日常饮食注重杂食多样，确保能量、营养、性味平衡。
- 起居有常，尝试改变生活方式，健康有序，防戒不良生活习惯。
- 适量运动，因人因时因地地制定出一套健身运动的项目，循序渐进、持之以恒地坚持下去，保持健康一点的形体，提高对环境的适应能力
- 静养心神：
- 给自己的生活做减法，宁可不合群，也要避免接触一些没有用还容易内耗的人和事。
- 多读点书，尝试将书中的一些知识用到工作和生活中。
- 防治宜早，吸取医生的建议，对亚健康状态及疾病坚持预防为主、早防早治
最后，为保证自己在理论意识上更注重身体健康，笔者还拜读了毛教员在青年时期写下的《体育之研究》。读过教员鞭辟入里的文章后，也更从理论上明白了：“体者，载知识之车而寓道德之舍也。体育一道，配德育与智育，而德智皆寄于体。”
3、健康实践
结合沉淀下来的原则，笔者花费了 1.5 年的时间，进行了两个方面的实践：
- 工作日早上坚持做早饭，三餐慢慢靠向合理均衡。周末培养一些做饭的技能，借助烟火气来平衡下工作与生活。
- 设定减肥目标，通过控制饮食、增强体育锻炼活动来实现体重的减少，提升自身健康。
随着时间的流逝，笔者现在也能自己做出 75 分的家常菜了（特别感谢很多师傅指导），且将下面这张图作为自己的日常饮食原则：
关于健身减肥方面的实践，笔者这里只阐述下主要实践思路，实践细节可参考笔者之前写的一篇文章：减肥这件小事阶段随笔汇总。
关键点 1：要考虑打工人工作比较忙碌的客观现实，将时间周期拉的长一点，目标拆解的细一点，可分阶段来。我们可以结合身边的很多例子来反思下，为什么那么多人喊着健身和减肥，真正成功的却不多呢？是耐力不够，还是客观环境不允许呢？笔者觉得两个原因都有，如果时间足够充裕，用这么多空闲时间来专注地完成一件正确的事情是没有大问题的。可现实生活中时间不会多么充裕，正是基于客观考虑，笔者才调整了实践思路：
- 严格阶段：基于“管住嘴，迈开腿”的准则，每月减 5 斤，半年减 30 斤（已完成实现）
- 巩固阶段：在 “管住嘴” 的基础上， 侧重 “迈开腿”的准则，加大运动量，提升自身身体素质（2022年执行良好）
- 持续阶段：将“每天锻炼一小时，快乐工作五十年”作为一个长期习惯来贯彻下去（希望 2023 年及以后的日子里可以继续做到）
关键点 2：实践过程中借助体脂秤的指标和数据统计，来定期分析自身数据，及时发现、纠正实操过程中的问题（这是笔者所在行业的惯用套路）。我们可以继续结合生活中的例子来看下，自己可有花些时间来反思、复盘自身存在的问题，然后调整行动呢？大部分应该都没有这么做。其实，笔者之前在这方面做的也特别少，后来随着工作和生活阅历的增加，慢慢注重这方面了。
4、健康小结
健康这个话题聊的差不多了，笔者在这个话题的最后简单分享两个自己学到的、且感觉比较实用、可广泛应用的迭代实践套路。有兴趣的朋友可去深入学习，如果还能在工作和生活中尝试起来，相信会取得更好的效果。
(1) 目标 -> 问题 -> 诊断 -> 方案 -> 践行 （套路来自《原则》这本书，该书在疫情前被笔者知晓后阅读，疫情后又翻了下，跟老朋友们也强烈推荐过）
2、一个全面质量管理的思想基础和方法依据，循环式品质管理 PDCA，又称戴明环。由戴明提出，据说他十分热爱统计学，二战时曾将统计学应用于制造业，后来在日本传授质量控制，随着日本制造技术的逐渐发达，戴明也成为了比较著名的人物。
漫谈读书与学习
1、读书的目的
读书与学习的区别是什么呢？
在笔者看来，读书与学习是两码事，读书不等于学习，想要学习成长倒是可以多读点书。当然，有些人会把读书当成一种习惯和爱好，但笔者想继续问的是：习惯和爱好不是凭空来的，这种习惯和爱好背后的本质原因和动力又是什么呢？可能答案中多少会涵盖点 “想从读书中学到点东西”吧。
身处一个知识迭代速度和生活节奏都在加快的时代，“焦虑”与“迷茫”会时不时来敲门。因此，为应对社会生活中的焦虑与迷茫，人们选择了各种各样的方式，读书与学习自然也成为了一种常用的方式。笔者之前主动跟人交流的动力不大，所以读书与自我规划学习也是笔者的选择。
因此，如果有人问起 “你读书的目的是什么”，笔者会结合读过的《纳瓦尔宝典》这本书给出现在的答案：构建自己的心智模型。当然，如果在未来 N 年后有人再问起这个问题，笔者希望自己可以结合《穷查理宝典》这本书和查理芒格这个人给出比当前更深入和细化的答案（目前不能给这个答案，因为笔者自己构建的心智模型还不够好）。
2、读书的方式
随着时间的推移，笔者在读书方面体验了以下三种方式：
- 自由式阅读，作为一种娱乐和爱好，比如阅读一些小说或自己觉得有趣的书。
- 填鸭式阅读，为短时间学习、了解某个技能或东西，而选择的类似应试教育的方式。
- 海绵式阅读，结合自身遇到的问题通过阅读学习来找答案，或阅读学习的过程基于书中的阐述来结合实际提炼出可指导实践的“套路”。
我们并不需要像辩论赛那样争论、PK 出上述哪种方式好，哪种方式不好。因为每种方式都有可能、或多或少助力我们成长。从实践效果来看，或许海绵式阅读是大多数人认可的方式，但有些采用自由式阅读的人真的在某些方面比采用海绵式阅读的人优秀；从时间维度来看，没有自由式、填鸭式的阅读，也很难直接转变为海绵式阅读。
在笔者看来，我们要关注的不是单选题，是“全都要”，要学会在不同的场景下切换到不同的阅读方式。即使是同一个人，也可根据不同的场景、不同的时间来切换到不同的阅读方式。所以，这里再做一个大胆又狂妄地的论断：为什么很多人读了很多的书，却依旧过不好这一生？因为纵使一个人满腹经纶，但 TA 没有清晰的认清问题本质，做不到学以致用与知行合一（书生误国也是这个道理）。
3、读书工具选择与实践
大学时代，自接触互联网后，笔者依旧会买一些纸质书来看，但也坚信“信息化”是大势所趋，一个大学生在学好数学等基础学科的基础上，应该花些精力来学习了解下计算机技术。经历疫情这三年后，笔者再次坚信 “数字化” 是继 “全球化” 之后的大势所趋。
在阅读工具的选择方面笔者经历了以下几个阶段：
- 纸质书 => 互联网信息
- 纸质书 + 互联网信息 + Kindle 电子书
- 纸质书 + 互联网信息 + 国内阅读APP（微信阅读、蜗牛读书等）
目前，“纸质书 + 微信阅读 + 互联网信息”成为了笔者最终选择的组合工具。在 2021 年底，笔者认为微信读书推出的年度报告产品已不足以总结自己在阅读方面的全貌，而且在闲暇的时候觉得自己在阅读方面不够系统化。因此，就创建了一个“阅读准则表格”，用于指导自己的阅读实践。表格依旧采用了分解与渐进明细的思路：
- 明确自己当前的定位，划分出四个“定位圆圈”，对每个圆圈进一步分解，从而划分出几个分类：
- 工作技能圈，包括编程技术学习、职业发展学习、互联网行业与科技 三类
- 生活短板补充圈，目前只包括身体健康与居家这一个大类
- 个人能力补充圈，包括统计与数学、经济与财经知识学习 两类
- 人文哲思调剂圈，包括哲思人生、历史读物、文学与小说 三类
- 为每一个分类配备对应的阅读工具与实践原则
4、小结
在上述“阅读准则表格”的协助下，阅读与学习这件小事在疫情期间也变得比之前明晰起来，且由于 2022 年频繁居家，节省下来的时间也就多了，笔者希望能继续向着“构建自己的心智模型”这个方向实践下去。
阅读与学习这个话题到此也基本漫谈完了，对这个话题或阅读工具感兴趣的朋友可以看下凯文凯利在几年前写的《必然》这本书（笔者坚信，微信读书这个产品在发展的过程中，其团队中肯定有人读过这本书）。当然，如果不觉得笔者在做广告，也可看下笔者毕业前留下的两篇相关文章：
漫谈时间管理
1、时间不够用问题
时间是我们在这个世界上最优质和公平的资产，可它也能是让人在其面前最无奈。因此，如何利用、管理自己的时间也成为了每个人的必修课。
身处时间碎片化、角色多元化的社会，我们的时间变得越来越碎，每个角色背后也都有一堆琐碎的事不断涌进来。很多人觉得时间管理、时间不够用是老生长谈的话题，身边充斥着讲这个方面的人和书，但没有多少实际的用处。笔者曾试图分析过这个现象，最终总结出来的主要原因有 3 个：
- 即便读遍全天下关于时间的书，遍访了全天下有相关经验的人。只要不去行动，就是白费功夫，与其这般努力，不如躺平。
- 每个人遇到的问题和设定的目标不同，采用的处理方式自然也不同，有些人的总结未必适合自己，拿来借鉴也未必能起到多少效果。
- 调整后的效果需要时间来证明，在没有看到效果前大多数人都容易放弃。即使看到了短期的效果，只要解决了当前棘手的问题，很少有人会选择继续保持。
刚好在疫情这三年，笔者有机会基于遇到的问题，在这方面尝试改善了下。重新拥有健康的身体后，有几个难题摆在了笔者面前：
- 随着工作年限和阅历的增加，需要依赖发现、分析后才能清晰的问题和事务相较之前占比多了，压力也随之上升，时间变得明显不够用。
- 合理的饮食、健康的身体、比较有规律的作息被列为头等大事，有些实践需要时间落地，有些改变需要依赖时间才能有效果
- 重新拥有健康的身体后，笔者不但想在工作方面多做些正确的事，还想在为数不多的业余时间推动“读书与学习”这件小事，通过构建稳健的心智模型来应对不稳定的大环境。
笔者相信，有过类似经历的人肯定能更明白其中的矛盾与酸楚，面对很多件抢占时间资源的事务，又不得不逼着自己想方设法找到解决办法，真的蛮有压力的。当然，躺平和摆烂是一种方式，可人躺久了也会不自觉地想要尝试突破一下局限，与其让问题与环境倒逼自己改变，不如自己思变。
2、分阶段调整时间管理
第一阶段：疯狂做减法，专注重要的事
不推荐的严格时间表，形如 7:20-7:50 起床、洗漱；7:50-8:30 锻炼身体；8:20-8:50: 吃早饭...... 这样简单地把一天时间分为线段的作息日程表.
（1）丢弃不靠谱的严格时间表，为自己减压
- 普通人勤奋些是对的，但逼着自己执行“严格时间表”只会让自己变得更加焦虑。
- 越是努力地执行严格的时间表，就越体会到挫败感、焦虑感，我们不该用理想化的方法要求自己。
（2）重新理解与应用“时间四象限”
- 使用清单 List 来管理事务。基于事务的重要程度，刻意忽略不重要的事，即紧急不重要和不紧急不重要的事务（干掉紧急不重要的事务有点过于暴力，也容易被别人误解。但由于笔者在第一阶段还处于救火阶段，会比较狠）
- 错开大众上班高峰时间，上午给自己预留 2.5 小时的无干扰时间。半小时用于健身，1.5 小时用于处理重要不紧急的事
- 正常工作时间处理重要且紧急的事，尽最大努力将重要且紧急的事务快速干掉，并尽最大努力避免重要不紧急的事务演变为重要且紧急的事务
（3）重新调整周末时间
- 周六无重要事不约不逛：周六上午预留网上冲浪和阅读文章充电时间，周六下午预留健身时间
- 周日上午随意，下午与晚上预留出阅读与学习时间
在这种“快刀斩乱麻”式的操作下，近小半年后笔者发现自己在工作方面不那么像四处灭火的“捉急状态”了。健康、读书与学习两方面的习惯得以保住，虽然体重变化存在小范围波动，但健身减肥的胜利果实也被巩固住了。
第二阶段：升级清单管理
在这个阶段，鉴于笔者看了一些时间管理相关的书，比如《哈佛时间管理课》、《哪里没有时间》等书。结合自己在第一阶段的问题，决定在第二阶段对清单进行改善。清单是个好东西，能用来梳理、分析自己的时间利用是否符合预期，有助于使用者不断思考如何将日常任务做的更好。列出来清单后能降低甚至避免焦虑，因为在执行时不是从大脑中提取，而是从清单中读取。
在升级清单管理前，笔者只有一个主要用来管理工作相关事务的清单，业余时间是没有清单管理的。但随着健康与业余自我充电相关的投入加大，升级清单管理有了一定的必要条件。升级清单管理的主要思路依旧运用了分解与渐进明细，将清单分为：碎片清单、工作日-日常清单、周末-日常清单三类：
碎片清单：
作为大脑的缓冲池而存在，收集大脑基于客观因素或主观思绪而产生的事务（不区分优先级，不区分事务大小）。把事务丢进碎片清单的目的是要在其他合适的时间再去思考它、处理它，同时保持当下时间的专注。
碎片清单是另外两个清单的主要输入，建立碎片清单，需要养成每天把碎片及时装进日常清单的习惯
删除长时间没有被迁移且渐进明细到日常清单的事务
日常清单(工作日)：
用于收集工作日的日常事务，其输入主要来自碎片清单或临时加进来的重要且紧急事务。
日常清单收集事务不能照搬碎片清单，而是碎片清单的再次分解与渐进明细。进入日常清单的任务必须有子任务或关键步骤，且基于再次分解的结论标出预估耗时。
日常清单(周末)：
用于收集周末的日常事务，其输入主要来自碎片清单，优先对健康、读书与学习相关的事务；次优先排日常起居、购物等事务。
日常清单收集事务依旧不能照搬碎片清单，而是再次分解和渐进明细碎片清单。进入周末日常清单的任务必须包含子任务和关键步骤，且基于再次分解的结论标出预估耗时。
就这样，升级后的三个清单进一步优化了笔者的时间。持续几个月后，笔者也慢慢变得敢于决断，哪怕决断错了也要干。因为改变说起来容易做起来难，如果在做的过程中还惧怕错了，那只能是被束缚得各种不适，改变也就很可能夭折。
第三阶段：刻意统计并调整时间
经历了前两个阶段的改变，某天，笔者在娱乐的时候刚好看到有个 UP 主在讲 “进入人工智能时代后，人要怎么做才能既不失业，还能活的不错”。鉴于笔者统计分析的意识已经建立起来（统计学与数学知识应用依旧存在短板），所以笔者冒出了一个想法：UP 主列出的这个东西可能就是当下自己没有梳理过的时间分配准则。
废话不多说，这里直接贴出 UP 主给出的时间消耗建议，也是笔者在第三阶段的时间统计与调整准则，具体如下图：
因此，笔者结合准则和自己在第一、二阶段沉淀下来的时间分配情况，整出了一个粗糙的时间统计。整个时间统计采用了由局部到整体的方式：
优先统计工作日早上至午休这段时间的分配，基于统计情况调整时间；然后统计并调整午休、下午和晚上等时间的分配 以此类推，次优统计并调整周末时间的分配（为避免自己变成有强迫症的人，周末调整没有工作日拆解的细，为自己预留一些挥霍的自由） 笔者这里给出统计与调整示意如下：
至此，刻意统计与调整阶段的阶段也漫谈完了。笔者在这一阶段还挺觉得有成就感的，因为终于有机会在工作之外初级又粗糙地运用了统计学分析，很好地鼓励自己在统计学分析方面继续加大投入力度。
漫谈混合工作制
书接上文，如果说时间管理其实就是对时间这一个维度进行切割，然后把工作与生活中的事务填充进去，那么混合工作制就是基于物理空间和时间这两个维度来切割平面，然后把工作与生活中的事务填充进去。因此，笔者要漫谈的最后一个话题就是混合工作制。
这里所谓的“混合工作制”，对打工人来讲其实就是一部分时间在办公室工作，一部分时间居家远程办公。如果没有疫情，这种方式在国内还不会被大范围运用，虽然互联网行业一直有弹性工作制，但国内很少有企业让员工能持续几天甚至一个月居家办公。笔者认为，疫情只是更显象化了这种方式，因为在疫情出现之前，国外真的有公司在实践，而且国外的自由职业者是比国内多出很多的。
这里不是要展开争论，而是想抛出问题：我们虽然在疫情期间熟悉了这种工作模式，但我们可觉得自己能很好地处理这种模式呢？疫情总会过去的，在疫情后我们要不要继续实践混合工作制呢？
1、适应混合工作制
如上所述，混合工作制是基于空间与时间两个维度来安排要处理的事务，所以适应混合工作制，就是基于二维平面来安排好自己的工作与生活，试着把日子过得顺畅。
笔者不敢说自己在疫情期间很好地适应了混合工作制，因为在疫情早期居家办公真的很累，工作与生活没有了界限，有时觉得自己除了睡觉就一直在工作，回到公司上班的时候就觉得特别爽。但随着疫情的多次反复，也就有了一次次地尝试改变自己来适应居家办公，拥抱混合工作制。在这种客观条件的倒逼下，终究还是适应了，也实现了向内思变。
混合工作制最大的痛点是解决居家办公的苦恼，善用居家办公的优势，甚至把居家办公的经验适当地用在办公室工作中，从而实现真正的混合工作。在居家办公的时候，笔者觉得有以下几个要点需要注意：
- 居家办公时要强调效果和效率。效果源于对重要业务或任务的识别，效率源于专注地运用工具做正确的事
- 划定出专门的办公空间，有效区分起居空间与办公区间
- 基于对重要业务和任务的识别，使用比较清晰的清单和日程表来协助重要事务的推动。笔者这里依旧沿用了时间管理中提到的三个清单：碎片清单、日常任务清单（工作日）、日常任务清单（周末）。
- 善用远程办公工具，电话会议室一种重要的沟通协作方式，开好电话会议能更明确重点，提升效率。
当从居家办公切换到办公室工作环境中，除了不用划定专门的办公空间，很多经验都是可以继续沿用的。只有在碰到特别重要紧急的事情或者娱乐的事情才需要与同事当面沟通交流，这在一定程度上可以提升个人工作效率，去尝试摆脱“无头苍蝇式的忙碌”。
2、延伸思考混合工作制
不知道细心的朋友有没有发现，在疫情到来之前，我们大多接触到一些具有数字化特性的 C 端消费品（如：体脂秤具有称 + APP数据统计 + 虚拟社区；智能手表具有手表+数据收集与分析），只在办公时间或业余遇到紧急问题时才使用远程办公工具来协作，而疫情到来后我们更加主动拥抱、主动适应远程办公工具等数字化、虚拟化产品了。这在一定程度上也表明了：
- 大家在紧锣密鼓地创造产品和服务的数字属性，并以文化、社群的方式加以体现，借助产品的数字化属性，甚至可以把需求方连成网络，从而基于虚拟网络提升服务市场的效率。
- 跨城市、跨地域地沟通协作已经成为了常态，地域化的问题在“数字化”趋势下能得到缓解，跨城市、跨地域地高效协作更容易被接受了。
那么问题来了，一个普通的打工人去延伸思考这些东西有什么用处呢？这是不是类似刚入职的员工操着 CEO 的心，或者说一个普通百姓，业余闲着没事操着治理国家的心呢？笔者个人认为：都不是。而是想基于以上延伸思考引出一个新的业余尝试：业余跨地域协作。
这也关系到疫情后要不要继续实践混合工作制？不在其位就不谋其政，笔者这里不去谈国家或公司会不会在疫情后落地混合工作制，比如“3+2”或“4+1”工作制，因为笔者想延伸地是：如何在业余更大范围地尝试、实践混合工作制。
遥想当年学生时代，一群比较合得来的学生仅仅凭借几成勇气就在业余时间集中到一个物理空间内去捣鼓一些东西，也因为这样的折腾让我们顺利走向了工作岗位。走向工作岗位后，时不时会在虚拟社群中一起侃大山，聊聊工作与生活，吐槽一下自己的改变，但最终收尾的时候多少都还流露出想要搞些有点创造力或者正能量的事情。
所以笔者认为，在上述延伸思考下，其实业余是可以协作的，主要原因有以下三点：
- 基于远程工具协作已经被运用，人们已在疫情中适应了远程办公，跨城市、跨地域的阻碍因素在降低。
- 云服务已经发展得足够简单，很多基础设施已足够便捷（不再是当年在实验室或研究所里拿着裸机装软件的年代了）。
- 数字化是趋势，轻量、小而美、短期可完成的项目是可以协作完成的（虽然雇佣关系在一定时期内仍然是主导，但自由协作关系会越来越多）。
其实最主要的问题还是在于有没有共同的诉求，能不能拿出时间来捣鼓，有没有人能组织且管理好这种自由的远程协作团伙，并合理分配项目收益，实现大家的共同诉求。在疫情中后期，笔者业余时间没少在由几个老伙计组成的社群中“传销”上述延伸思考，疫情结束后也可能会继续尝试下去。
写在最后
行文至此，疫情这三年向内思变的复盘总结基本梳理完成了，不管文章最终的水平怎么样，依旧把自己的“闭关”经历沉淀下来了。
在文章的最后，顺便聊一聊思变。经历了疫情这三年，笔者认为思变不能只“打鸡血”或者 “立Flag”，思变是要结合客观事实和自身诉求来落地的。如果我们宽泛地谈改变，然后逼着自己变，挺内耗的。因为这种改变容易失败，失败后我们又不太容易原谅自己。可如果我们慢慢固化了，一旦大环境发生变化，我们又只能被动地任由社会教育。所以，改变之前需要多思考，需要学习一些知识套路尝试着实践。
笔者在落地上述几个话题的改变时，有些侧重实践为主，基于遇到的问题寻找解决方法；有些则以读书学习、与别人沟通交流的方式推动；还有些以业余娱乐的方式观察发现来推动，但最终实践的时候其实都初窥门径地用到了一些通识且有点哲学味道的“套路”：
- 分解与渐进明细，西方还原论的部分应用，“万物皆数”，对自然认知不断细化，尝试拆解分析出影响事物的本质原因。
- 系统论，即围绕人和社会自身来改善多个影响因素，从而使自己更好地适应社会。
- 知行合一，知是行的头脑，行是知的落实；知是行的开始，行是知的完成。
最后，引用一下笔者早年看过的小说作为结束，其作者萧鼎老师说过“如果没有曾经的一段经历，自己写不出《诛仙》这样的作品”。虽然笔者与萧鼎老师相差甚远，也想在文章的最后说下：“如果没有疫情这三年的经历和刻意的向内思变，笔者也写不出一篇将多个话题串联起来的长文”。
之所以还记得《诛仙》这本小说，倒不是因为小说阐述了“天地不仁，以万物为刍狗”的法则，而是因为它也讲述了一个资质普通又平凡的少年，虽不醉心于修真，但真的凭借着坚韧、阅历一步步身兼“佛道魔”三种功法，这种特质在经济下行的大环境下可能更值得学习。
',122)])])}const m=r(o,[["render",s]]);export{d as __pageData,m as default};
diff --git "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.BIUhmRg0.lean.js" "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.Cj12M61O.lean.js"
similarity index 96%
rename from "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.BIUhmRg0.lean.js"
rename to "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.Cj12M61O.lean.js"
index c60b3187..d84a910f 100644
--- "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.BIUhmRg0.lean.js"
+++ "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_10.\345\220\221\345\206\205\346\200\235\345\217\230\357\274\232\345\275\223\347\226\253\346\203\205\347\273\231\344\270\226\347\225\214\346\214\211\344\270\213\346\232\202\345\201\234\351\224\256\357\274\214\345\216\273\351\207\215\346\236\204\347\224\237\346\264\273\347\247\251\345\272\217.md.Cj12M61O.lean.js"
@@ -1 +1 @@
-import{_ as r,g as t,h as i,U as l}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const d=JSON.parse('{"title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","frontmatter":{"date":"2023-01-08T10:23:50.000Z","title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","permalink":"/growth/inner-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png","sticky":1,"top":true,"categories":"个人成长","tags":["健康","时间","悦读时光","远程协作","疫情"]},"headers":[],"relativePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md","filePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"}'),o={name:"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"};function s(n,a,e,p,g,h){return i(),t("div",null,[...a[0]||(a[0]=[l("",122)])])}const m=r(o,[["render",s]]);export{d as __pageData,m as default};
+import{_ as r,g as t,h as i,U as l}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const d=JSON.parse('{"title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","frontmatter":{"date":"2023-01-08T10:23:50.000Z","title":"向内思变：当疫情给世界按下暂停键，去重构生活秩序","description":"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。","permalink":"/growth/inner-experience","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png","sticky":1,"top":true,"categories":"个人成长","tags":["健康","时间","悦读时光","远程协作","疫情"]},"headers":[],"relativePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md","filePath":"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"}'),o={name:"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md"};function s(n,a,e,p,g,h){return i(),t("div",null,[...a[0]||(a[0]=[l("",122)])])}const m=r(o,[["render",s]]);export{d as __pageData,m as default};
diff --git "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.C1xoZ0dn.js" "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.DNHfVn0b.js"
similarity index 99%
rename from "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.C1xoZ0dn.js"
rename to "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.DNHfVn0b.js"
index d56ac8a3..774ee252 100644
--- "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.C1xoZ0dn.js"
+++ "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.DNHfVn0b.js"
@@ -1 +1 @@
-import{_ as l,g as r,h as o,U as i}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","frontmatter":{"date":"2022-09-12T08:16:00.000Z","title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","permalink":"/growth/weight-loss","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png","top":true,"tags":["健康","运动"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md","filePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"}'),n={name:"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"};function s(a,t,e,g,d,p){return o(),r("div",null,[...t[0]||(t[0]=[i('Are you an LLM? You can read better optimized documentation at /40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md for this page in Markdown format
用科学与迭代改善的方式推动减肥这件小事
摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。
写在前面
在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。
因此，也就有了这篇减肥这件小事阶段随笔汇总。一方面来总结下前几个阶段的操作，在操作的过程中也有跟老同学、老朋友互相请教过，希望其中的一些操作能对需要的人有一定的帮助；另一方面也想借助网络平台，收集一些建议，来改善不足的地方。
从整体来讲，减肥的原因有以下几点：
- 【直接原因】身体康复了，也想通了一些事情，自然要向前看，去尝试改变。结合自身现状分析，体重降下去对工作、生活和一些出游都会呈现出是实实在在的益处。因此，减肥这件小事也就成了既充分也很有必要的事情，可做
- 【错误纠正】之前笔者因相信 【早饭吃得好，午饭少吃点，晚饭正常吃】可以缓解体重上升而选择大早上吃很多早餐。但由于早上 9 点左右才吃早饭，一个多月后惊奇地发现涨了 10 斤。因此，再不控制下体重，改变下生活方式，很快又要回到一心一意敲键盘，写的基本都是 bug ，业余对着电脑可以坐半天的固有模式了
- 【深层次原因】笔者业余也算是读了一定的书，刚好还有个小爱好：会关注国家大事（新时代农民工也需要通过学习来了解国家发展方向）。在读了近一年多的文章和书以后，越来越觉得：国家都能基于现状做出追赶发达国家到哪种程度的规划，并做出一系列调整动作。身为新时代的打工人，为啥就不能为自己后青春的下半场基于现状弄一个身体 + 见识启蒙 + 尝试实践，5到8年后让个人发展 + 修身 + 齐家达到某种程度的尝试。而这一切的前提是得有个健硕的身体 + 专业素养。因此，减肥这件小事也被注入了一点点小情怀，有了更高层次的追求
- 【榜样的影响】不管别人怎么看待“不追星、基本不打游戏，如果不是有特别感兴趣的话题也基本不扯闲淡”的奇葩，但笔者真的有这种偏向。笔者之前在大学时看过一些毛爷爷的相关书和电视剧后很膜拜，毛爷爷的思想和韬略真的足够学。笔者知道自己不可能达到那种高度，但伟人的很多习惯和优点适合当代年轻人学习，毕业季让即将出国的女神写了一幅字——
《沁园春.雪》，然后北上帝都。另外，前段时间看了毛爷爷在青年时期写下的 《体育之研究》。因此，在读了伟人的文章后，更从理论上理解了身体是根本的道理，即：体者，载知识之车而寓道德之舍也。体育一道，配德育与智育，而德智皆寄于体。
直接原因 、错误纠正、深层次原因、榜样的影响都有了，也就需要考虑如何真真正正的进行尝试实践了。
1、前期准备
- 体脂秤一台，用于测量体重，并粗略了解 BMI、脂肪、肌肉、体型、基础代谢率、蛋白质等指标，以及正常体重应位于什么区间。
- 与体脂秤对应的手机 APP，用于存储记录一些指标数据。在积累到一定数据量后，可以从时间维度上来了解体重走势，结合实际情况总结经验。
- 瑜伽垫、哑铃、俯卧撑支架、卷腹等健身器材，用于锻炼上半身，做一些适合的无氧运动。
2、第一阶段
NOTE
第一阶段最重要的准则是：“管住嘴，迈开腿”。
- 饮食限制时间和饭量
周末饮食保持正常
- 早餐：自己做，保证 8 点到 8 点半期间吃早饭：一个包子 + 鸡蛋 + 燕麦。
- 午餐：半份米饭 + 素菜 + 荤菜 or 轻食一份。
- 晚餐：
- 中午若吃轻食，则下午正常吃饭
- 中午若正常吃饭，则下午吃轻食
- 运动则选择每周至少三次在午休或晚休时间走一定的路，保证每日步数在5000 至 6000 步。
- 居家健身器材锻炼每周一到两次，不做过多要求。
第一阶段的时间大概维持了一个月，体重获得了 8 斤左右的下降。期间最大的困难是新习惯的建立比较难，原有的生活习惯时不时进入大脑，只能硬着头皮控制自己。由于周末没有做比较大的限制，体重也因为周末饮食不当陆续出现反弹，在下降 5 斤 到 8 斤之间跳跃。所以，周六加了一个项目：下午拍篮球 1个小时 + 遛弯1个小时，如果还有体力，骑行 30 分钟到 1个小时。这个雷打不动的项目引入，不但解决了周末饮食的主要问题，对习惯的养成起到了一定的正向作用。
3、第二阶段
本阶段主要吸收更多减肥方面的常识和习惯来调整减肥策略：
- 在保持第一阶段建立的习惯基础上，加大锻炼强度：
- 每周早上至少有三次居家 20 分钟的器材锻炼；
- 工作日每天必须在午休和晚休时间走一定的路，保证每日步数在 5000 至 6000 步；
- 周六锻炼继续保持，周日不做要求，根据称重数据适当奖励自己；
- 饮食调整
- 早餐：玉米 + 鸡蛋 + 燕麦；
- 午餐和晚餐不做大改变，米饭改为减半；
- 平时注重多与同事、同学和朋友沟通，向一些有经验的人请教方法；
这个阶段更注重强化减肥这件小事的目标合理性，以及其收益。看一些比较正向的文章，饥饿时转移注意力。业余跟老伙计保持财商与减肥方面的学习沟通，并强制每两天内必须在朋友圈至少打卡一次。
就这样，第二阶段的时间也大概维持了一个月，体重再次获得了 5 斤下降。在第二阶段快结束时遇到了体重基本不再下降，甚至一周基本保持不变的情况，经过分析体重外的指标发现：肌肉与脂肪指标数据不稳，两者基本保持此消彼长的竞争状态。基础代谢率有时达到标准状态，有时不达标。
减肥这件事情可大可小，笔者在第二阶段时还属于身体管理小白，体重维持不变后基本不晓得怎么搞了。在这期间，从微信读书上找了本书，业余翻了翻，其中大部分的讲解或许对很多人有帮助，但对于笔者存在很多不可行之处。这个时候也想过在健身房报个班，每次想去健身房看看时，就会想到在学校毕业季曾因锻炼不当锻炼后疼了很久，后来健身房也就成了几个已经找到工作的懒人的澡堂子啦。这一次比较幸运，因为一次偶然的事情出现后，从大佬口中得知他在减体重时尝试过不吃主食。
不吃主食这个事情笔者个人之前没有尝试过，听起来在一定时间内或许不会有问题，但长期看对身体可能存在某些不好的地方。在查过一些资料文章后，笔者还是决定在第三阶段试试一段时间。
4、第三阶段
第三阶段主要通过以下几个方面来继续把减肥这件小事执行下去：
- 进一步强化把握最终目标，引入平时处理项目的经验来管理、拆解目标：将总目标拆解为每 6 天至少减重 1 斤，每月体重下降至少 5 斤。另外，把日常看的时间管理相关书籍，也尝试应用于工作、生活和减肥这件小事上。
- 在保持第一和二阶段建立的习惯基础上，继续加大训练强度：
- 工作日每天早上在早饭前，进行 20-30分钟的器材锻炼；
- 工作日每天至少下一次楼梯，不乘坐电梯；
- 工作日每天午休和晚休走一定的路，保证每天步数在 6000 到 8000 步；
- 每周两次使用小区或公司健身房器材进行 30 - 40 分钟的无氧运动；
- 周六锻炼继续保持，周日不做要求，但控制饮食，多吃些蔬菜和水果；
- 饮食调整（工作日午饭和晚饭最多吃两天主食，且主食为半份糙米饭）
🥗 饮食表
| 时段 | 可选项 |
|---|
| 早餐 | 玉米/红薯 + 鸡蛋 + 低脂牛奶燕麦
玉米/红薯 + 鸡蛋羹 + 低脂牛奶燕麦 |
| 周末早饭 | 玉米/红薯/豆腐 + 鸡蛋羹 + 低脂牛奶燕麦 |
| 午餐/晚餐 | 素菜 + 小份轻食（含少部分主食）
鱼 + 素菜（不吃主食/半份糙米饭）
轻食一份 |
| 周末午餐/晚饭尝试 | 使用鸡胸肉、扇贝肉、胡萝卜、西蓝花、玉米等食材搭配做一道简版轻食 + 燕麦/少量水饺
使用三文鱼、巴沙鱼片、虾仁等食材做一道菜或汤 + 燕麦/少量水饺
使用青椒、青菜、黄瓜、木耳、鸡蛋等食材做一到两道家常菜 + 燕麦/少量水饺 |
第三阶段也是大概维持了一个月，一直到 8 月底，在吃极少量主食和加大运动量的坚持下，体重又获得了 5—6斤的下降，虽然会呈现少部分波动，但基本能够控制住整体继续下降的趋势。这一阶段，对笔者来说取得了一些比较大的进步，这些进步不局限于减肥这件小事上：
- 尝试把一些别的领域或事务的经验迁移、应用在减肥这件小事上，强化了一种万变不离其宗，万物有规则可循的思维方式；
- 学会接受并尝试别人的建议，但不会一味按照别人的建议来，要结合实际情况具体处理；
- 自身厨艺进一步获得了提升机会，对做饭这件小事也起到了促进作用，在做饭花样和做饭花费时间上的把握更加精确；
5、第四阶段（2021.09）
第四阶段，即现阶段（9月份），正在通过以下几种方式来将减肥这件小事继续：
- 坚持执行拆解后的目标：每 6 天至少减重 1 斤，每月体重下降至少 5 斤。
- 在保持第一、二、三阶段建立的习惯基础上，继续加大训练强度：
- 工作日每天早上在早饭前，进行 30 分钟的器材锻炼
- 工作日每天至少下一次楼梯，不乘坐电梯
- 工作日每天午休和晚休走一定的路，保证每天步数在 8000 步以上。周末不做限制，步数尽量不要超过10000。做限制的原因：走路只是维持正常的有氧运动，其收益不一定比一段时间强有力的无氧运动有效果，且容易影响膝盖，不能继续增加。
- 每周两到三次使用小区或公司健身房器材进行 30 - 40 分钟的无氧运动
- 周六拍篮球的场地和时间不再继续做限制，周六和周日侧重进行分组的无氧运动来加强锻炼，只要保证消耗 >= 摄入量 即可。
- 饮食微调：整体保持第三阶段的执行，在尝试去观察改善
- 工作日继续多去不同的餐区吃饭，观察同事们、工友吃什么，以及餐区大概都是做什么饭菜；
- 周末做饭，启动使用橄榄油，橄榄油的具体效用这里不做介绍，想必很多人已经知晓，确实有点小贵，幸亏当初学习培养财商，卖一部分基金还是可以消费橄榄油的；
- 继续积累常识：保持业余通过看书或文章，与同事、同学和朋友交流等方式了解一些小常识。每周阅读1- 2篇专刊会 APP 中关于运动健康方面的杂志文章，了解一些常识。
- 关注并优化体重秤日常的 总体重、基础代谢率、肌肉、水分等指标：
- 总体重需要呈现下降确实；
- 肌肉占比、基础代谢率、水分三个指标优化至稳步停留在标准范围内；
现阶段也需要维持一个月，如果出现反弹情况，甚至需要花费两个月。当前目标、运动、饮食调整基本正常执行，指标与业余学习和交流后续希望以周为单位推进。
结尾
以上仅仅是结合个人实践的记录，还需要进一步实验下去，估计未必适合每一个人。我们迈入社会后，难免会看到社会用各种属性来评判一个人。在这所更大的学校中，笔者感觉自己属于转变比较慢的一批人。
之前很多同学和朋友甚至早已融入到社会之中，而笔者个人觉得自己从 2020 年才转变为社会人。快与慢只是表象，只要能把握住规则的脉搏，结合自己的习惯和节奏也可以慢慢上轨，纵然中间有一些偏差或挫折，但触底反弹，反省自身的不足会有新的领悟境界。
',39)])])}const _=l(n,[["render",s]]);export{c as __pageData,_ as default};
+import{_ as l,g as r,h as o,U as i}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","frontmatter":{"date":"2022-09-12T08:16:00.000Z","title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","permalink":"/growth/weight-loss","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png","top":true,"tags":["健康","运动"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md","filePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"}'),n={name:"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"};function s(a,t,e,g,d,p){return o(),r("div",null,[...t[0]||(t[0]=[i('Are you an LLM? You can read better optimized documentation at /40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md for this page in Markdown format
用科学与迭代改善的方式推动减肥这件小事
摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。
写在前面
在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。
因此，也就有了这篇减肥这件小事阶段随笔汇总。一方面来总结下前几个阶段的操作，在操作的过程中也有跟老同学、老朋友互相请教过，希望其中的一些操作能对需要的人有一定的帮助；另一方面也想借助网络平台，收集一些建议，来改善不足的地方。
从整体来讲，减肥的原因有以下几点：
- 【直接原因】身体康复了，也想通了一些事情，自然要向前看，去尝试改变。结合自身现状分析，体重降下去对工作、生活和一些出游都会呈现出是实实在在的益处。因此，减肥这件小事也就成了既充分也很有必要的事情，可做
- 【错误纠正】之前笔者因相信 【早饭吃得好，午饭少吃点，晚饭正常吃】可以缓解体重上升而选择大早上吃很多早餐。但由于早上 9 点左右才吃早饭，一个多月后惊奇地发现涨了 10 斤。因此，再不控制下体重，改变下生活方式，很快又要回到一心一意敲键盘，写的基本都是 bug ，业余对着电脑可以坐半天的固有模式了
- 【深层次原因】笔者业余也算是读了一定的书，刚好还有个小爱好：会关注国家大事（新时代农民工也需要通过学习来了解国家发展方向）。在读了近一年多的文章和书以后，越来越觉得：国家都能基于现状做出追赶发达国家到哪种程度的规划，并做出一系列调整动作。身为新时代的打工人，为啥就不能为自己后青春的下半场基于现状弄一个身体 + 见识启蒙 + 尝试实践，5到8年后让个人发展 + 修身 + 齐家达到某种程度的尝试。而这一切的前提是得有个健硕的身体 + 专业素养。因此，减肥这件小事也被注入了一点点小情怀，有了更高层次的追求
- 【榜样的影响】不管别人怎么看待“不追星、基本不打游戏，如果不是有特别感兴趣的话题也基本不扯闲淡”的奇葩，但笔者真的有这种偏向。笔者之前在大学时看过一些毛爷爷的相关书和电视剧后很膜拜，毛爷爷的思想和韬略真的足够学。笔者知道自己不可能达到那种高度，但伟人的很多习惯和优点适合当代年轻人学习，毕业季让即将出国的女神写了一幅字——
《沁园春.雪》，然后北上帝都。另外，前段时间看了毛爷爷在青年时期写下的 《体育之研究》。因此，在读了伟人的文章后，更从理论上理解了身体是根本的道理，即：体者，载知识之车而寓道德之舍也。体育一道，配德育与智育，而德智皆寄于体。
直接原因 、错误纠正、深层次原因、榜样的影响都有了，也就需要考虑如何真真正正的进行尝试实践了。
1、前期准备
- 体脂秤一台，用于测量体重，并粗略了解 BMI、脂肪、肌肉、体型、基础代谢率、蛋白质等指标，以及正常体重应位于什么区间。
- 与体脂秤对应的手机 APP，用于存储记录一些指标数据。在积累到一定数据量后，可以从时间维度上来了解体重走势，结合实际情况总结经验。
- 瑜伽垫、哑铃、俯卧撑支架、卷腹等健身器材，用于锻炼上半身，做一些适合的无氧运动。
2、第一阶段
NOTE
第一阶段最重要的准则是：“管住嘴，迈开腿”。
- 饮食限制时间和饭量
周末饮食保持正常
- 早餐：自己做，保证 8 点到 8 点半期间吃早饭：一个包子 + 鸡蛋 + 燕麦。
- 午餐：半份米饭 + 素菜 + 荤菜 or 轻食一份。
- 晚餐：
- 中午若吃轻食，则下午正常吃饭
- 中午若正常吃饭，则下午吃轻食
- 运动则选择每周至少三次在午休或晚休时间走一定的路，保证每日步数在5000 至 6000 步。
- 居家健身器材锻炼每周一到两次，不做过多要求。
第一阶段的时间大概维持了一个月，体重获得了 8 斤左右的下降。期间最大的困难是新习惯的建立比较难，原有的生活习惯时不时进入大脑，只能硬着头皮控制自己。由于周末没有做比较大的限制，体重也因为周末饮食不当陆续出现反弹，在下降 5 斤 到 8 斤之间跳跃。所以，周六加了一个项目：下午拍篮球 1个小时 + 遛弯1个小时，如果还有体力，骑行 30 分钟到 1个小时。这个雷打不动的项目引入，不但解决了周末饮食的主要问题，对习惯的养成起到了一定的正向作用。
3、第二阶段
本阶段主要吸收更多减肥方面的常识和习惯来调整减肥策略：
- 在保持第一阶段建立的习惯基础上，加大锻炼强度：
- 每周早上至少有三次居家 20 分钟的器材锻炼；
- 工作日每天必须在午休和晚休时间走一定的路，保证每日步数在 5000 至 6000 步；
- 周六锻炼继续保持，周日不做要求，根据称重数据适当奖励自己；
- 饮食调整
- 早餐：玉米 + 鸡蛋 + 燕麦；
- 午餐和晚餐不做大改变，米饭改为减半；
- 平时注重多与同事、同学和朋友沟通，向一些有经验的人请教方法；
这个阶段更注重强化减肥这件小事的目标合理性，以及其收益。看一些比较正向的文章，饥饿时转移注意力。业余跟老伙计保持财商与减肥方面的学习沟通，并强制每两天内必须在朋友圈至少打卡一次。
就这样，第二阶段的时间也大概维持了一个月，体重再次获得了 5 斤下降。在第二阶段快结束时遇到了体重基本不再下降，甚至一周基本保持不变的情况，经过分析体重外的指标发现：肌肉与脂肪指标数据不稳，两者基本保持此消彼长的竞争状态。基础代谢率有时达到标准状态，有时不达标。
减肥这件事情可大可小，笔者在第二阶段时还属于身体管理小白，体重维持不变后基本不晓得怎么搞了。在这期间，从微信读书上找了本书，业余翻了翻，其中大部分的讲解或许对很多人有帮助，但对于笔者存在很多不可行之处。这个时候也想过在健身房报个班，每次想去健身房看看时，就会想到在学校毕业季曾因锻炼不当锻炼后疼了很久，后来健身房也就成了几个已经找到工作的懒人的澡堂子啦。这一次比较幸运，因为一次偶然的事情出现后，从大佬口中得知他在减体重时尝试过不吃主食。
不吃主食这个事情笔者个人之前没有尝试过，听起来在一定时间内或许不会有问题，但长期看对身体可能存在某些不好的地方。在查过一些资料文章后，笔者还是决定在第三阶段试试一段时间。
4、第三阶段
第三阶段主要通过以下几个方面来继续把减肥这件小事执行下去：
- 进一步强化把握最终目标，引入平时处理项目的经验来管理、拆解目标：将总目标拆解为每 6 天至少减重 1 斤，每月体重下降至少 5 斤。另外，把日常看的时间管理相关书籍，也尝试应用于工作、生活和减肥这件小事上。
- 在保持第一和二阶段建立的习惯基础上，继续加大训练强度：
- 工作日每天早上在早饭前，进行 20-30分钟的器材锻炼；
- 工作日每天至少下一次楼梯，不乘坐电梯；
- 工作日每天午休和晚休走一定的路，保证每天步数在 6000 到 8000 步；
- 每周两次使用小区或公司健身房器材进行 30 - 40 分钟的无氧运动；
- 周六锻炼继续保持，周日不做要求，但控制饮食，多吃些蔬菜和水果；
- 饮食调整（工作日午饭和晚饭最多吃两天主食，且主食为半份糙米饭）
🥗 饮食表
| 时段 | 可选项 |
|---|
| 早餐 | 玉米/红薯 + 鸡蛋 + 低脂牛奶燕麦
玉米/红薯 + 鸡蛋羹 + 低脂牛奶燕麦 |
| 周末早饭 | 玉米/红薯/豆腐 + 鸡蛋羹 + 低脂牛奶燕麦 |
| 午餐/晚餐 | 素菜 + 小份轻食（含少部分主食）
鱼 + 素菜（不吃主食/半份糙米饭）
轻食一份 |
| 周末午餐/晚饭尝试 | 使用鸡胸肉、扇贝肉、胡萝卜、西蓝花、玉米等食材搭配做一道简版轻食 + 燕麦/少量水饺
使用三文鱼、巴沙鱼片、虾仁等食材做一道菜或汤 + 燕麦/少量水饺
使用青椒、青菜、黄瓜、木耳、鸡蛋等食材做一到两道家常菜 + 燕麦/少量水饺 |
第三阶段也是大概维持了一个月，一直到 8 月底，在吃极少量主食和加大运动量的坚持下，体重又获得了 5—6斤的下降，虽然会呈现少部分波动，但基本能够控制住整体继续下降的趋势。这一阶段，对笔者来说取得了一些比较大的进步，这些进步不局限于减肥这件小事上：
- 尝试把一些别的领域或事务的经验迁移、应用在减肥这件小事上，强化了一种万变不离其宗，万物有规则可循的思维方式；
- 学会接受并尝试别人的建议，但不会一味按照别人的建议来，要结合实际情况具体处理；
- 自身厨艺进一步获得了提升机会，对做饭这件小事也起到了促进作用，在做饭花样和做饭花费时间上的把握更加精确；
5、第四阶段（2021.09）
第四阶段，即现阶段（9月份），正在通过以下几种方式来将减肥这件小事继续：
- 坚持执行拆解后的目标：每 6 天至少减重 1 斤，每月体重下降至少 5 斤。
- 在保持第一、二、三阶段建立的习惯基础上，继续加大训练强度：
- 工作日每天早上在早饭前，进行 30 分钟的器材锻炼
- 工作日每天至少下一次楼梯，不乘坐电梯
- 工作日每天午休和晚休走一定的路，保证每天步数在 8000 步以上。周末不做限制，步数尽量不要超过10000。做限制的原因：走路只是维持正常的有氧运动，其收益不一定比一段时间强有力的无氧运动有效果，且容易影响膝盖，不能继续增加。
- 每周两到三次使用小区或公司健身房器材进行 30 - 40 分钟的无氧运动
- 周六拍篮球的场地和时间不再继续做限制，周六和周日侧重进行分组的无氧运动来加强锻炼，只要保证消耗 >= 摄入量 即可。
- 饮食微调：整体保持第三阶段的执行，在尝试去观察改善
- 工作日继续多去不同的餐区吃饭，观察同事们、工友吃什么，以及餐区大概都是做什么饭菜；
- 周末做饭，启动使用橄榄油，橄榄油的具体效用这里不做介绍，想必很多人已经知晓，确实有点小贵，幸亏当初学习培养财商，卖一部分基金还是可以消费橄榄油的；
- 继续积累常识：保持业余通过看书或文章，与同事、同学和朋友交流等方式了解一些小常识。每周阅读1- 2篇专刊会 APP 中关于运动健康方面的杂志文章，了解一些常识。
- 关注并优化体重秤日常的 总体重、基础代谢率、肌肉、水分等指标：
- 总体重需要呈现下降确实；
- 肌肉占比、基础代谢率、水分三个指标优化至稳步停留在标准范围内；
现阶段也需要维持一个月，如果出现反弹情况，甚至需要花费两个月。当前目标、运动、饮食调整基本正常执行，指标与业余学习和交流后续希望以周为单位推进。
结尾
以上仅仅是结合个人实践的记录，还需要进一步实验下去，估计未必适合每一个人。我们迈入社会后，难免会看到社会用各种属性来评判一个人。在这所更大的学校中，笔者感觉自己属于转变比较慢的一批人。
之前很多同学和朋友甚至早已融入到社会之中，而笔者个人觉得自己从 2020 年才转变为社会人。快与慢只是表象，只要能把握住规则的脉搏，结合自己的习惯和节奏也可以慢慢上轨，纵然中间有一些偏差或挫折，但触底反弹，反省自身的不足会有新的领悟境界。
',39)])])}const _=l(n,[["render",s]]);export{c as __pageData,_ as default};
diff --git "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.C1xoZ0dn.lean.js" "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.DNHfVn0b.lean.js"
similarity index 97%
rename from "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.C1xoZ0dn.lean.js"
rename to "assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.DNHfVn0b.lean.js"
index 97c05778..06adc74a 100644
--- "a/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.C1xoZ0dn.lean.js"
+++ "b/assets/40.\345\205\263\344\272\216_30.\346\210\220\351\225\277\351\232\217\347\254\224_20.\345\207\217\350\202\245\350\277\231\344\273\266\345\260\217\344\272\213\351\230\266\346\256\265\351\232\217\347\254\224\346\261\207\346\200\273.md.DNHfVn0b.lean.js"
@@ -1 +1 @@
-import{_ as l,g as r,h as o,U as i}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","frontmatter":{"date":"2022-09-12T08:16:00.000Z","title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","permalink":"/growth/weight-loss","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png","top":true,"tags":["健康","运动"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md","filePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"}'),n={name:"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"};function s(a,t,e,g,d,p){return o(),r("div",null,[...t[0]||(t[0]=[i("",39)])])}const _=l(n,[["render",s]]);export{c as __pageData,_ as default};
+import{_ as l,g as r,h as o,U as i}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","frontmatter":{"date":"2022-09-12T08:16:00.000Z","title":"用科学与迭代改善的方式推动减肥这件小事","description":"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。","permalink":"/growth/weight-loss","coverImg":"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png","top":true,"tags":["健康","运动"],"categories":["个人成长"]},"headers":[],"relativePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md","filePath":"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"}'),n={name:"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md"};function s(a,t,e,g,d,p){return o(),r("div",null,[...t[0]||(t[0]=[i("",39)])])}const _=l(n,[["render",s]]);export{c as __pageData,_ as default};
diff --git a/assets/@pages_categoriesPage.md.Cnp1svtv.js b/assets/@pages_categoriesPage.md.DalPAP0h.js
similarity index 91%
rename from assets/@pages_categoriesPage.md.Cnp1svtv.js
rename to assets/@pages_categoriesPage.md.DalPAP0h.js
index 5b20d640..eedfc45f 100644
--- a/assets/@pages_categoriesPage.md.Cnp1svtv.js
+++ b/assets/@pages_categoriesPage.md.DalPAP0h.js
@@ -1 +1 @@
-import{_ as a,g as t,h as r,i as o}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const m=JSON.parse('{"title":"分类","description":"","frontmatter":{"title":"分类","categoriesPage":true,"permalink":"/categories","article":false,"layout":"home"},"headers":[],"relativePath":"@pages/categoriesPage.md","filePath":"@pages/categoriesPage.md"}'),s={name:"@pages/categoriesPage.md"};function i(n,e,d,c,g,p){return r(),t("div",null,[...e[0]||(e[0]=[o("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/categoriesPage.md for this page in Markdown format",-1)])])}const u=a(s,[["render",i]]);export{m as __pageData,u as default};
+import{_ as a,g as t,h as r,i as o}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const m=JSON.parse('{"title":"分类","description":"","frontmatter":{"title":"分类","categoriesPage":true,"permalink":"/categories","article":false,"layout":"home"},"headers":[],"relativePath":"@pages/categoriesPage.md","filePath":"@pages/categoriesPage.md"}'),s={name:"@pages/categoriesPage.md"};function i(n,e,d,c,g,p){return r(),t("div",null,[...e[0]||(e[0]=[o("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/categoriesPage.md for this page in Markdown format",-1)])])}const u=a(s,[["render",i]]);export{m as __pageData,u as default};
diff --git a/assets/@pages_categoriesPage.md.Cnp1svtv.lean.js b/assets/@pages_categoriesPage.md.DalPAP0h.lean.js
similarity index 91%
rename from assets/@pages_categoriesPage.md.Cnp1svtv.lean.js
rename to assets/@pages_categoriesPage.md.DalPAP0h.lean.js
index 5b20d640..eedfc45f 100644
--- a/assets/@pages_categoriesPage.md.Cnp1svtv.lean.js
+++ b/assets/@pages_categoriesPage.md.DalPAP0h.lean.js
@@ -1 +1 @@
-import{_ as a,g as t,h as r,i as o}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const m=JSON.parse('{"title":"分类","description":"","frontmatter":{"title":"分类","categoriesPage":true,"permalink":"/categories","article":false,"layout":"home"},"headers":[],"relativePath":"@pages/categoriesPage.md","filePath":"@pages/categoriesPage.md"}'),s={name:"@pages/categoriesPage.md"};function i(n,e,d,c,g,p){return r(),t("div",null,[...e[0]||(e[0]=[o("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/categoriesPage.md for this page in Markdown format",-1)])])}const u=a(s,[["render",i]]);export{m as __pageData,u as default};
+import{_ as a,g as t,h as r,i as o}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const m=JSON.parse('{"title":"分类","description":"","frontmatter":{"title":"分类","categoriesPage":true,"permalink":"/categories","article":false,"layout":"home"},"headers":[],"relativePath":"@pages/categoriesPage.md","filePath":"@pages/categoriesPage.md"}'),s={name:"@pages/categoriesPage.md"};function i(n,e,d,c,g,p){return r(),t("div",null,[...e[0]||(e[0]=[o("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/categoriesPage.md for this page in Markdown format",-1)])])}const u=a(s,[["render",i]]);export{m as __pageData,u as default};
diff --git a/assets/@pages_tagsPage.md.C5Ifm28k.js b/assets/@pages_tagsPage.md.nlt9sHhH.js
similarity index 90%
rename from assets/@pages_tagsPage.md.C5Ifm28k.js
rename to assets/@pages_tagsPage.md.nlt9sHhH.js
index 2b8189e7..54959e42 100644
--- a/assets/@pages_tagsPage.md.C5Ifm28k.js
+++ b/assets/@pages_tagsPage.md.nlt9sHhH.js
@@ -1 +1 @@
-import{_ as a,g as t,h as s,i as r}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"标签","description":"","frontmatter":{"title":"标签","permalink":"/tags","tagsPage":true,"article":false,"layout":"home"},"headers":[],"relativePath":"@pages/tagsPage.md","filePath":"@pages/tagsPage.md"}'),o={name:"@pages/tagsPage.md"};function n(i,e,d,g,p,l){return s(),t("div",null,[...e[0]||(e[0]=[r("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/tagsPage.md for this page in Markdown format",-1)])])}const u=a(o,[["render",n]]);export{c as __pageData,u as default};
+import{_ as a,g as t,h as s,i as r}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"标签","description":"","frontmatter":{"title":"标签","permalink":"/tags","tagsPage":true,"article":false,"layout":"home"},"headers":[],"relativePath":"@pages/tagsPage.md","filePath":"@pages/tagsPage.md"}'),o={name:"@pages/tagsPage.md"};function n(i,e,d,g,p,l){return s(),t("div",null,[...e[0]||(e[0]=[r("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/tagsPage.md for this page in Markdown format",-1)])])}const u=a(o,[["render",n]]);export{c as __pageData,u as default};
diff --git a/assets/@pages_tagsPage.md.C5Ifm28k.lean.js b/assets/@pages_tagsPage.md.nlt9sHhH.lean.js
similarity index 90%
rename from assets/@pages_tagsPage.md.C5Ifm28k.lean.js
rename to assets/@pages_tagsPage.md.nlt9sHhH.lean.js
index 2b8189e7..54959e42 100644
--- a/assets/@pages_tagsPage.md.C5Ifm28k.lean.js
+++ b/assets/@pages_tagsPage.md.nlt9sHhH.lean.js
@@ -1 +1 @@
-import{_ as a,g as t,h as s,i as r}from"./chunks/vitepress-theme-teek.CJu9alwu.js";const c=JSON.parse('{"title":"标签","description":"","frontmatter":{"title":"标签","permalink":"/tags","tagsPage":true,"article":false,"layout":"home"},"headers":[],"relativePath":"@pages/tagsPage.md","filePath":"@pages/tagsPage.md"}'),o={name:"@pages/tagsPage.md"};function n(i,e,d,g,p,l){return s(),t("div",null,[...e[0]||(e[0]=[r("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/tagsPage.md for this page in Markdown format",-1)])])}const u=a(o,[["render",n]]);export{c as __pageData,u as default};
+import{_ as a,g as t,h as s,i as r}from"./chunks/vitepress-theme-teek.CqY1sKvl.js";const c=JSON.parse('{"title":"标签","description":"","frontmatter":{"title":"标签","permalink":"/tags","tagsPage":true,"article":false,"layout":"home"},"headers":[],"relativePath":"@pages/tagsPage.md","filePath":"@pages/tagsPage.md"}'),o={name:"@pages/tagsPage.md"};function n(i,e,d,g,p,l){return s(),t("div",null,[...e[0]||(e[0]=[r("div",{style:{display:"none"},hidden:"true","aria-hidden":"true"},"Are you an LLM? You can read better optimized documentation at /@pages/tagsPage.md for this page in Markdown format",-1)])])}const u=a(o,[["render",n]]);export{c as __pageData,u as default};
diff --git a/assets/app.sgquq4kz.js b/assets/app.DBRhVQUD.js
similarity index 99%
rename from assets/app.sgquq4kz.js
rename to assets/app.DBRhVQUD.js
index e6c9996f..8ee2409d 100644
--- a/assets/app.sgquq4kz.js
+++ b/assets/app.DBRhVQUD.js
@@ -1,4 +1,4 @@
-import{d as go,u as Cw,a as pI,f as mm,c as dI,r as nf,b as gI,e as yI,w as mp,n as _m,o as rh,g as Yi,h as ta,i as Xt,j as mI,k as Ou,l as of,m as _I,_ as Dw,p as _p,q as SI,s as Nu,t as xI,v as Sm,x as bI,F as wI,T as TI,y as AI,z as Yh,A as Mw,B as ei,C as CI,D as Iw,E as DI,G as MI,H as II,I as LI,J as Lw,R as PI,K as RI,L as EI,M as kI,N as OI,O as NI,P as BI,Q as VI}from"./chunks/vitepress-theme-teek.CJu9alwu.js";var Sp=function(r,e){return Sp=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,a){t.__proto__=a}||function(t,a){for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])},Sp(r,e)};function k(r,e){if(typeof e!="function"&&e!==null)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");Sp(r,e);function t(){this.constructor=r}r.prototype=e===null?Object.create(e):(t.prototype=e.prototype,new t)}var zI=(function(){function r(){this.firefox=!1,this.ie=!1,this.edge=!1,this.newEdge=!1,this.weChat=!1}return r})(),GI=(function(){function r(){this.browser=new zI,this.node=!1,this.wxa=!1,this.worker=!1,this.svgSupported=!1,this.touchEventsSupported=!1,this.pointerEventsSupported=!1,this.domSupported=!1,this.transformSupported=!1,this.transform3dSupported=!1,this.hasGlobalWindow=typeof window<"u"}return r})(),yt=new GI;typeof wx=="object"&&typeof wx.getSystemInfoSync=="function"?(yt.wxa=!0,yt.touchEventsSupported=!0):typeof document>"u"&&typeof self<"u"?yt.worker=!0:!yt.hasGlobalWindow||"Deno"in window?(yt.node=!0,yt.svgSupported=!0):FI(navigator.userAgent,yt);function FI(r,e){var t=e.browser,a=r.match(/Firefox\/([\d.]+)/),n=r.match(/MSIE\s([\d.]+)/)||r.match(/Trident\/.+?rv:(([\d.]+))/),i=r.match(/Edge?\/([\d.]+)/),o=/micromessenger/i.test(r);a&&(t.firefox=!0,t.version=a[1]),n&&(t.ie=!0,t.version=n[1]),i&&(t.edge=!0,t.version=i[1],t.newEdge=+i[1].split(".")[0]>18),o&&(t.weChat=!0),e.svgSupported=typeof SVGRect<"u",e.touchEventsSupported="ontouchstart"in window&&!t.ie&&!t.edge,e.pointerEventsSupported="onpointerdown"in window&&(t.edge||t.ie&&+t.version>=11),e.domSupported=typeof document<"u";var s=document.documentElement.style;e.transform3dSupported=(t.ie&&"transition"in s||t.edge||"WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix||"MozPerspective"in s)&&!("OTransition"in s),e.transformSupported=e.transform3dSupported||t.ie&&+t.version>=9}var ug=12,Pw="sans-serif",$a=ug+"px "+Pw,HI=20,WI=100,UI="007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N";function YI(r){var e={};if(typeof JSON>"u")return e;for(var t=0;t=0)s=o*t.length;else for(var l=0;l>1)%2;s.cssText=["position: absolute","visibility: hidden","padding: 0","margin: 0","border-width: 0","user-select: none","width:0","height:0",a[l]+":0",n[u]+":0",a[1-l]+":auto",n[1-u]+":auto",""].join("!important;"),r.appendChild(o),t.push(o)}return t}function vL(r,e,t){for(var a=t?"invTrans":"trans",n=e[a],i=e.srcCoords,o=[],s=[],l=!0,u=0;u<4;u++){var f=r[u].getBoundingClientRect(),h=2*u,v=f.left,c=f.top;o.push(v,c),l=l&&i&&v===i[h]&&c===i[h+1],s.push(r[u].offsetLeft,r[u].offsetTop)}return l&&n?n:(e.srcCoords=o,e[a]=t?Tm(s,o):Tm(o,s))}function Vw(r){return r.nodeName.toUpperCase()==="CANVAS"}var cL=/([&<>"'])/g,pL={"&":"&","<":"<",">":">",'"':""","'":"'"};function Te(r){return r==null?"":(r+"").replace(cL,function(e,t){return pL[t]})}var dL=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Xh=[],gL=yt.browser.firefox&&+yt.browser.version.split(".")[0]<39;function Dp(r,e,t,a){return t=t||{},a?Cm(r,e,t):gL&&e.layerX!=null&&e.layerX!==e.offsetX?(t.zrX=e.layerX,t.zrY=e.layerY):e.offsetX!=null?(t.zrX=e.offsetX,t.zrY=e.offsetY):Cm(r,e,t),t}function Cm(r,e,t){if(yt.domSupported&&r.getBoundingClientRect){var a=e.clientX,n=e.clientY;if(Vw(r)){var i=r.getBoundingClientRect();t.zrX=a-i.left,t.zrY=n-i.top;return}else if(Cp(Xh,r,a,n)){t.zrX=Xh[0],t.zrY=Xh[1];return}}t.zrX=t.zrY=0}function gg(r){return r||window.event}function Qe(r,e,t){if(e=gg(e),e.zrX!=null)return e;var a=e.type,n=a&&a.indexOf("touch")>=0;if(n){var o=a!=="touchend"?e.targetTouches[0]:e.changedTouches[0];o&&Dp(r,o,e,t)}else{Dp(r,e,e,t);var i=yL(e);e.zrDelta=i?i/120:-(e.detail||0)/3}var s=e.button;return e.which==null&&s!==void 0&&dL.test(e.type)&&(e.which=s&1?1:s&2?3:s&4?2:0),e}function yL(r){var e=r.wheelDelta;if(e)return e;var t=r.deltaX,a=r.deltaY;if(t==null||a==null)return e;var n=Math.abs(a!==0?a:t),i=a>0?-1:a<0?1:t>0?-1:1;return 3*n*i}function Mp(r,e,t,a){r.addEventListener(e,t,a)}function mL(r,e,t,a){r.removeEventListener(e,t,a)}var la=function(r){r.preventDefault(),r.stopPropagation(),r.cancelBubble=!0};function Dm(r){return r.which===2||r.which===3}var _L=(function(){function r(){this._track=[]}return r.prototype.recognize=function(e,t,a){return this._doTrack(e,t,a),this._recognize(e)},r.prototype.clear=function(){return this._track.length=0,this},r.prototype._doTrack=function(e,t,a){var n=e.touches;if(n){for(var i={points:[],touches:[],target:t,event:e},o=0,s=n.length;o1&&a&&a.length>1){var i=Mm(a)/Mm(n);!isFinite(i)&&(i=1),e.pinchScale=i;var o=SL(a);return e.pinchX=o[0],e.pinchY=o[1],{type:"pinch",target:r[0].target,event:e}}}}};function We(){return[1,0,0,1,0,0]}function oh(r){return r[0]=1,r[1]=0,r[2]=0,r[3]=1,r[4]=0,r[5]=0,r}function yg(r,e){return r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=e[3],r[4]=e[4],r[5]=e[5],r}function na(r,e,t){var a=e[0]*t[0]+e[2]*t[1],n=e[1]*t[0]+e[3]*t[1],i=e[0]*t[2]+e[2]*t[3],o=e[1]*t[2]+e[3]*t[3],s=e[0]*t[4]+e[2]*t[5]+e[4],l=e[1]*t[4]+e[3]*t[5]+e[5];return r[0]=a,r[1]=n,r[2]=i,r[3]=o,r[4]=s,r[5]=l,r}function Hr(r,e,t){return r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=e[3],r[4]=e[4]+t[0],r[5]=e[5]+t[1],r}function fi(r,e,t,a){a===void 0&&(a=[0,0]);var n=e[0],i=e[2],o=e[4],s=e[1],l=e[3],u=e[5],f=Math.sin(t),h=Math.cos(t);return r[0]=n*h+s*f,r[1]=-n*f+s*h,r[2]=i*h+l*f,r[3]=-i*f+h*l,r[4]=h*(o-a[0])+f*(u-a[1])+a[0],r[5]=h*(u-a[1])-f*(o-a[0])+a[1],r}function mg(r,e,t){var a=t[0],n=t[1];return r[0]=e[0]*a,r[1]=e[1]*n,r[2]=e[2]*a,r[3]=e[3]*n,r[4]=e[4]*a,r[5]=e[5]*n,r}function _o(r,e){var t=e[0],a=e[2],n=e[4],i=e[1],o=e[3],s=e[5],l=t*o-i*a;return l?(l=1/l,r[0]=o*l,r[1]=-i*l,r[2]=-a*l,r[3]=t*l,r[4]=(a*s-o*n)*l,r[5]=(i*n-t*s)*l,r):null}function xL(r){var e=We();return yg(e,r),e}var ft=(function(){function r(e,t){this.x=e||0,this.y=t||0}return r.prototype.copy=function(e){return this.x=e.x,this.y=e.y,this},r.prototype.clone=function(){return new r(this.x,this.y)},r.prototype.set=function(e,t){return this.x=e,this.y=t,this},r.prototype.equal=function(e){return e.x===this.x&&e.y===this.y},r.prototype.add=function(e){return this.x+=e.x,this.y+=e.y,this},r.prototype.scale=function(e){this.x*=e,this.y*=e},r.prototype.scaleAndAdd=function(e,t){this.x+=e.x*t,this.y+=e.y*t},r.prototype.sub=function(e){return this.x-=e.x,this.y-=e.y,this},r.prototype.dot=function(e){return this.x*e.x+this.y*e.y},r.prototype.len=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},r.prototype.lenSquare=function(){return this.x*this.x+this.y*this.y},r.prototype.normalize=function(){var e=this.len();return this.x/=e,this.y/=e,this},r.prototype.distance=function(e){var t=this.x-e.x,a=this.y-e.y;return Math.sqrt(t*t+a*a)},r.prototype.distanceSquare=function(e){var t=this.x-e.x,a=this.y-e.y;return t*t+a*a},r.prototype.negate=function(){return this.x=-this.x,this.y=-this.y,this},r.prototype.transform=function(e){if(e){var t=this.x,a=this.y;return this.x=e[0]*t+e[2]*a+e[4],this.y=e[1]*t+e[3]*a+e[5],this}},r.prototype.toArray=function(e){return e[0]=this.x,e[1]=this.y,e},r.prototype.fromArray=function(e){this.x=e[0],this.y=e[1]},r.set=function(e,t,a){e.x=t,e.y=a},r.copy=function(e,t){e.x=t.x,e.y=t.y},r.len=function(e){return Math.sqrt(e.x*e.x+e.y*e.y)},r.lenSquare=function(e){return e.x*e.x+e.y*e.y},r.dot=function(e,t){return e.x*t.x+e.y*t.y},r.add=function(e,t,a){e.x=t.x+a.x,e.y=t.y+a.y},r.sub=function(e,t,a){e.x=t.x-a.x,e.y=t.y-a.y},r.scale=function(e,t,a){e.x=t.x*a,e.y=t.y*a},r.scaleAndAdd=function(e,t,a,n){e.x=t.x+a.x*n,e.y=t.y+a.y*n},r.lerp=function(e,t,a,n){var i=1-n;e.x=i*t.x+n*a.x,e.y=i*t.y+n*a.y},r})(),El=Math.min,kl=Math.max,an=new ft,nn=new ft,on=new ft,sn=new ft,Eo=new ft,ko=new ft,ht=(function(){function r(e,t,a,n){a<0&&(e=e+a,a=-a),n<0&&(t=t+n,n=-n),this.x=e,this.y=t,this.width=a,this.height=n}return r.prototype.union=function(e){var t=El(e.x,this.x),a=El(e.y,this.y);isFinite(this.x)&&isFinite(this.width)?this.width=kl(e.x+e.width,this.x+this.width)-t:this.width=e.width,isFinite(this.y)&&isFinite(this.height)?this.height=kl(e.y+e.height,this.y+this.height)-a:this.height=e.height,this.x=t,this.y=a},r.prototype.applyTransform=function(e){r.applyTransform(this,this,e)},r.prototype.calculateTransform=function(e){var t=this,a=e.width/t.width,n=e.height/t.height,i=We();return Hr(i,i,[-t.x,-t.y]),mg(i,i,[a,n]),Hr(i,i,[e.x,e.y]),i},r.prototype.intersect=function(e,t){if(!e)return!1;e instanceof r||(e=r.create(e));var a=this,n=a.x,i=a.x+a.width,o=a.y,s=a.y+a.height,l=e.x,u=e.x+e.width,f=e.y,h=e.y+e.height,v=!(ip&&(p=_,dp&&(p=S,y=a.x&&e<=a.x+a.width&&t>=a.y&&t<=a.y+a.height},r.prototype.clone=function(){return new r(this.x,this.y,this.width,this.height)},r.prototype.copy=function(e){r.copy(this,e)},r.prototype.plain=function(){return{x:this.x,y:this.y,width:this.width,height:this.height}},r.prototype.isFinite=function(){return isFinite(this.x)&&isFinite(this.y)&&isFinite(this.width)&&isFinite(this.height)},r.prototype.isZero=function(){return this.width===0||this.height===0},r.create=function(e){return new r(e.x,e.y,e.width,e.height)},r.copy=function(e,t){e.x=t.x,e.y=t.y,e.width=t.width,e.height=t.height},r.applyTransform=function(e,t,a){if(!a){e!==t&&r.copy(e,t);return}if(a[1]<1e-5&&a[1]>-1e-5&&a[2]<1e-5&&a[2]>-1e-5){var n=a[0],i=a[3],o=a[4],s=a[5];e.x=t.x*n+o,e.y=t.y*i+s,e.width=t.width*n,e.height=t.height*i,e.width<0&&(e.x+=e.width,e.width=-e.width),e.height<0&&(e.y+=e.height,e.height=-e.height);return}an.x=on.x=t.x,an.y=sn.y=t.y,nn.x=sn.x=t.x+t.width,nn.y=on.y=t.y+t.height,an.transform(a),sn.transform(a),nn.transform(a),on.transform(a),e.x=El(an.x,nn.x,on.x,sn.x),e.y=El(an.y,nn.y,on.y,sn.y);var l=kl(an.x,nn.x,on.x,sn.x),u=kl(an.y,nn.y,on.y,sn.y);e.width=l-e.x,e.height=u-e.y},r})(),zw="silent";function bL(r,e,t){return{type:r,event:t,target:e.target,topTarget:e.topTarget,cancelBubble:!1,offsetX:t.zrX,offsetY:t.zrY,gestureEvent:t.gestureEvent,pinchX:t.pinchX,pinchY:t.pinchY,pinchScale:t.pinchScale,wheelDelta:t.zrDelta,zrByTouch:t.zrByTouch,which:t.which,stop:wL}}function wL(){la(this.event)}var TL=(function(r){k(e,r);function e(){var t=r!==null&&r.apply(this,arguments)||this;return t.handler=null,t}return e.prototype.dispose=function(){},e.prototype.setCursor=function(){},e})(lr),Oo=(function(){function r(e,t){this.x=e,this.y=t}return r})(),AL=["click","dblclick","mousewheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],qh=new ht(0,0,0,0),Gw=(function(r){k(e,r);function e(t,a,n,i,o){var s=r.call(this)||this;return s._hovered=new Oo(0,0),s.storage=t,s.painter=a,s.painterRoot=i,s._pointerSize=o,n=n||new TL,s.proxy=null,s.setHandlerProxy(n),s._draggingMgr=new lL(s),s}return e.prototype.setHandlerProxy=function(t){this.proxy&&this.proxy.dispose(),t&&(D(AL,function(a){t.on&&t.on(a,this[a],this)},this),t.handler=this),this.proxy=t},e.prototype.mousemove=function(t){var a=t.zrX,n=t.zrY,i=Fw(this,a,n),o=this._hovered,s=o.target;s&&!s.__zr&&(o=this.findHover(o.x,o.y),s=o.target);var l=this._hovered=i?new Oo(a,n):this.findHover(a,n),u=l.target,f=this.proxy;f.setCursor&&f.setCursor(u?u.cursor:"default"),s&&u!==s&&this.dispatchToElement(o,"mouseout",t),this.dispatchToElement(l,"mousemove",t),u&&u!==s&&this.dispatchToElement(l,"mouseover",t)},e.prototype.mouseout=function(t){var a=t.zrEventControl;a!=="only_globalout"&&this.dispatchToElement(this._hovered,"mouseout",t),a!=="no_globalout"&&this.trigger("globalout",{type:"globalout",event:t})},e.prototype.resize=function(){this._hovered=new Oo(0,0)},e.prototype.dispatch=function(t,a){var n=this[t];n&&n.call(this,a)},e.prototype.dispose=function(){this.proxy.dispose(),this.storage=null,this.proxy=null,this.painter=null},e.prototype.setCursorStyle=function(t){var a=this.proxy;a.setCursor&&a.setCursor(t)},e.prototype.dispatchToElement=function(t,a,n){t=t||{};var i=t.target;if(!(i&&i.silent)){for(var o="on"+a,s=bL(a,t,n);i&&(i[o]&&(s.cancelBubble=!!i[o].call(i,s)),i.trigger(a,s),i=i.__hostTarget?i.__hostTarget:i.parent,!s.cancelBubble););s.cancelBubble||(this.trigger(a,s),this.painter&&this.painter.eachOtherLayer&&this.painter.eachOtherLayer(function(l){typeof l[o]=="function"&&l[o].call(l,s),l.trigger&&l.trigger(a,s)}))}},e.prototype.findHover=function(t,a,n){var i=this.storage.getDisplayList(),o=new Oo(t,a);if(Im(i,o,t,a,n),this._pointerSize&&!o.target){for(var s=[],l=this._pointerSize,u=l/2,f=new ht(t-u,a-u,l,l),h=i.length-1;h>=0;h--){var v=i[h];v!==n&&!v.ignore&&!v.ignoreCoarsePointer&&(!v.parent||!v.parent.ignoreCoarsePointer)&&(qh.copy(v.getBoundingRect()),v.transform&&qh.applyTransform(v.transform),qh.intersect(f)&&s.push(v))}if(s.length)for(var c=4,p=Math.PI/12,d=Math.PI*2,g=0;g4)return;this._downPoint=null}this.dispatchToElement(i,r,e)}});function CL(r,e,t){if(r[r.rectHover?"rectContain":"contain"](e,t)){for(var a=r,n=void 0,i=!1;a;){if(a.ignoreClip&&(i=!0),!i){var o=a.getClipPath();if(o&&!o.contain(e,t))return!1}a.silent&&(n=!0);var s=a.__hostTarget;a=s||a.parent}return n?zw:!0}return!1}function Im(r,e,t,a,n){for(var i=r.length-1;i>=0;i--){var o=r[i],s=void 0;if(o!==n&&!o.ignore&&(s=CL(o,t,a))&&(!e.topTarget&&(e.topTarget=o),s!==zw)){e.target=o;break}}}function Fw(r,e,t){var a=r.painter;return e<0||e>a.getWidth()||t<0||t>a.getHeight()}var Hw=32,No=7;function DL(r){for(var e=0;r>=Hw;)e|=r&1,r>>=1;return r+e}function Lm(r,e,t,a){var n=e+1;if(n===t)return 1;if(a(r[n++],r[e])<0){for(;n=0;)n++;return n-e}function ML(r,e,t){for(t--;e>>1,n(i,r[l])<0?s=l:o=l+1;var u=a-o;switch(u){case 3:r[o+3]=r[o+2];case 2:r[o+2]=r[o+1];case 1:r[o+1]=r[o];break;default:for(;u>0;)r[o+u]=r[o+u-1],u--}r[o]=i}}function Kh(r,e,t,a,n,i){var o=0,s=0,l=1;if(i(r,e[t+n])>0){for(s=a-n;l0;)o=l,l=(l<<1)+1,l<=0&&(l=s);l>s&&(l=s),o+=n,l+=n}else{for(s=n+1;ls&&(l=s);var u=o;o=n-l,l=n-u}for(o++;o>>1);i(r,e[t+f])>0?o=f+1:l=f}return l}function Qh(r,e,t,a,n,i){var o=0,s=0,l=1;if(i(r,e[t+n])<0){for(s=n+1;ls&&(l=s);var u=o;o=n-l,l=n-u}else{for(s=a-n;l=0;)o=l,l=(l<<1)+1,l<=0&&(l=s);l>s&&(l=s),o+=n,l+=n}for(o++;o>>1);i(r,e[t+f])<0?l=f:o=f+1}return l}function IL(r,e){var t=No,a,n,i=0,o=[];a=[],n=[];function s(c,p){a[i]=c,n[i]=p,i+=1}function l(){for(;i>1;){var c=i-2;if(c>=1&&n[c-1]<=n[c]+n[c+1]||c>=2&&n[c-2]<=n[c]+n[c-1])n[c-1]n[c+1])break;f(c)}}function u(){for(;i>1;){var c=i-2;c>0&&n[c-1]=No||w>=No);if(T)break;b<0&&(b=0),b+=2}if(t=b,t<1&&(t=1),p===1){for(y=0;y=0;y--)r[x+y]=r[b+y];r[S]=o[_];return}for(var w=t;;){var T=0,A=0,C=!1;do if(e(o[_],r[m])<0){if(r[S--]=r[m--],T++,A=0,--p===0){C=!0;break}}else if(r[S--]=o[_--],A++,T=0,--g===1){C=!0;break}while((T|A)=0;y--)r[x+y]=r[b+y];if(p===0){C=!0;break}}if(r[S--]=o[_--],--g===1){C=!0;break}if(A=g-Kh(r[m],o,0,g,g-1,e),A!==0){for(S-=A,_-=A,g-=A,x=S+1,b=_+1,y=0;y=No||A>=No);if(C)break;w<0&&(w=0),w+=2}if(t=w,t<1&&(t=1),g===1){for(S-=p,m-=p,x=S+1,b=m+1,y=p-1;y>=0;y--)r[x+y]=r[b+y];r[S]=o[_]}else{if(g===0)throw new Error;for(b=S-(g-1),y=0;ys&&(l=s),Pm(r,t,t+l,t+i,e),i=l}o.pushRun(t,i),o.mergeRuns(),n-=i,t+=i}while(n!==0);o.forceMergeRuns()}}var Fe=1,ls=2,Gi=4,Rm=!1;function Jh(){Rm||(Rm=!0,console.warn("z / z2 / zlevel of displayable is invalid, which may cause unexpected errors"))}function Em(r,e){return r.zlevel===e.zlevel?r.z===e.z?r.z2-e.z2:r.z-e.z:r.zlevel-e.zlevel}var LL=(function(){function r(){this._roots=[],this._displayList=[],this._displayListLen=0,this.displayableSortFunc=Em}return r.prototype.traverse=function(e,t){for(var a=0;a0&&(f.__clipPaths=[]),isNaN(f.z)&&(Jh(),f.z=0),isNaN(f.z2)&&(Jh(),f.z2=0),isNaN(f.zlevel)&&(Jh(),f.zlevel=0),this._displayList[this._displayListLen++]=f}var h=e.getDecalElement&&e.getDecalElement();h&&this._updateAndAddDisplayable(h,t,a);var v=e.getTextGuideLine();v&&this._updateAndAddDisplayable(v,t,a);var c=e.getTextContent();c&&this._updateAndAddDisplayable(c,t,a)}},r.prototype.addRoot=function(e){e.__zr&&e.__zr.storage===this||this._roots.push(e)},r.prototype.delRoot=function(e){if(e instanceof Array){for(var t=0,a=e.length;t=0&&this._roots.splice(n,1)},r.prototype.delAllRoots=function(){this._roots=[],this._displayList=[],this._displayListLen=0},r.prototype.getRoots=function(){return this._roots},r.prototype.dispose=function(){this._displayList=null,this._roots=null},r})(),lf;lf=yt.hasGlobalWindow&&(window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.msRequestAnimationFrame&&window.msRequestAnimationFrame.bind(window)||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame)||function(r){return setTimeout(r,16)};var xs={linear:function(r){return r},quadraticIn:function(r){return r*r},quadraticOut:function(r){return r*(2-r)},quadraticInOut:function(r){return(r*=2)<1?.5*r*r:-.5*(--r*(r-2)-1)},cubicIn:function(r){return r*r*r},cubicOut:function(r){return--r*r*r+1},cubicInOut:function(r){return(r*=2)<1?.5*r*r*r:.5*((r-=2)*r*r+2)},quarticIn:function(r){return r*r*r*r},quarticOut:function(r){return 1- --r*r*r*r},quarticInOut:function(r){return(r*=2)<1?.5*r*r*r*r:-.5*((r-=2)*r*r*r-2)},quinticIn:function(r){return r*r*r*r*r},quinticOut:function(r){return--r*r*r*r*r+1},quinticInOut:function(r){return(r*=2)<1?.5*r*r*r*r*r:.5*((r-=2)*r*r*r*r+2)},sinusoidalIn:function(r){return 1-Math.cos(r*Math.PI/2)},sinusoidalOut:function(r){return Math.sin(r*Math.PI/2)},sinusoidalInOut:function(r){return .5*(1-Math.cos(Math.PI*r))},exponentialIn:function(r){return r===0?0:Math.pow(1024,r-1)},exponentialOut:function(r){return r===1?1:1-Math.pow(2,-10*r)},exponentialInOut:function(r){return r===0?0:r===1?1:(r*=2)<1?.5*Math.pow(1024,r-1):.5*(-Math.pow(2,-10*(r-1))+2)},circularIn:function(r){return 1-Math.sqrt(1-r*r)},circularOut:function(r){return Math.sqrt(1- --r*r)},circularInOut:function(r){return(r*=2)<1?-.5*(Math.sqrt(1-r*r)-1):.5*(Math.sqrt(1-(r-=2)*r)+1)},elasticIn:function(r){var e,t=.1,a=.4;return r===0?0:r===1?1:(!t||t<1?(t=1,e=a/4):e=a*Math.asin(1/t)/(2*Math.PI),-(t*Math.pow(2,10*(r-=1))*Math.sin((r-e)*(2*Math.PI)/a)))},elasticOut:function(r){var e,t=.1,a=.4;return r===0?0:r===1?1:(!t||t<1?(t=1,e=a/4):e=a*Math.asin(1/t)/(2*Math.PI),t*Math.pow(2,-10*r)*Math.sin((r-e)*(2*Math.PI)/a)+1)},elasticInOut:function(r){var e,t=.1,a=.4;return r===0?0:r===1?1:(!t||t<1?(t=1,e=a/4):e=a*Math.asin(1/t)/(2*Math.PI),(r*=2)<1?-.5*(t*Math.pow(2,10*(r-=1))*Math.sin((r-e)*(2*Math.PI)/a)):t*Math.pow(2,-10*(r-=1))*Math.sin((r-e)*(2*Math.PI)/a)*.5+1)},backIn:function(r){var e=1.70158;return r*r*((e+1)*r-e)},backOut:function(r){var e=1.70158;return--r*r*((e+1)*r+e)+1},backInOut:function(r){var e=2.5949095;return(r*=2)<1?.5*(r*r*((e+1)*r-e)):.5*((r-=2)*r*((e+1)*r+e)+2)},bounceIn:function(r){return 1-xs.bounceOut(1-r)},bounceOut:function(r){return r<1/2.75?7.5625*r*r:r<2/2.75?7.5625*(r-=1.5/2.75)*r+.75:r<2.5/2.75?7.5625*(r-=2.25/2.75)*r+.9375:7.5625*(r-=2.625/2.75)*r+.984375},bounceInOut:function(r){return r<.5?xs.bounceIn(r*2)*.5:xs.bounceOut(r*2-1)*.5+.5}},Ol=Math.pow,Ha=Math.sqrt,uf=1e-8,Ww=1e-4,km=Ha(3),Nl=1/3,Er=ui(),er=ui(),Ki=ui();function Na(r){return r>-uf&&ruf||r<-uf}function ee(r,e,t,a,n){var i=1-n;return i*i*(i*r+3*n*e)+n*n*(n*a+3*i*t)}function Om(r,e,t,a,n){var i=1-n;return 3*(((e-r)*i+2*(t-e)*n)*i+(a-t)*n*n)}function ff(r,e,t,a,n,i){var o=a+3*(e-t)-r,s=3*(t-e*2+r),l=3*(e-r),u=r-n,f=s*s-3*o*l,h=s*l-9*o*u,v=l*l-3*s*u,c=0;if(Na(f)&&Na(h))if(Na(s))i[0]=0;else{var p=-l/s;p>=0&&p<=1&&(i[c++]=p)}else{var d=h*h-4*f*v;if(Na(d)){var g=h/f,p=-s/o+g,y=-g/2;p>=0&&p<=1&&(i[c++]=p),y>=0&&y<=1&&(i[c++]=y)}else if(d>0){var m=Ha(d),_=f*s+1.5*o*(-h+m),S=f*s+1.5*o*(-h-m);_<0?_=-Ol(-_,Nl):_=Ol(_,Nl),S<0?S=-Ol(-S,Nl):S=Ol(S,Nl);var p=(-s-(_+S))/(3*o);p>=0&&p<=1&&(i[c++]=p)}else{var b=(2*f*s-3*o*h)/(2*Ha(f*f*f)),x=Math.acos(b)/3,w=Ha(f),T=Math.cos(x),p=(-s-2*w*T)/(3*o),y=(-s+w*(T+km*Math.sin(x)))/(3*o),A=(-s+w*(T-km*Math.sin(x)))/(3*o);p>=0&&p<=1&&(i[c++]=p),y>=0&&y<=1&&(i[c++]=y),A>=0&&A<=1&&(i[c++]=A)}}return c}function Yw(r,e,t,a,n){var i=6*t-12*e+6*r,o=9*e+3*a-3*r-9*t,s=3*e-3*r,l=0;if(Na(o)){if(Uw(i)){var u=-s/i;u>=0&&u<=1&&(n[l++]=u)}}else{var f=i*i-4*o*s;if(Na(f))n[0]=-i/(2*o);else if(f>0){var h=Ha(f),u=(-i+h)/(2*o),v=(-i-h)/(2*o);u>=0&&u<=1&&(n[l++]=u),v>=0&&v<=1&&(n[l++]=v)}}return l}function Za(r,e,t,a,n,i){var o=(e-r)*n+r,s=(t-e)*n+e,l=(a-t)*n+t,u=(s-o)*n+o,f=(l-s)*n+s,h=(f-u)*n+u;i[0]=r,i[1]=o,i[2]=u,i[3]=h,i[4]=h,i[5]=f,i[6]=l,i[7]=a}function $w(r,e,t,a,n,i,o,s,l,u,f){var h,v=.005,c=1/0,p,d,g,y;Er[0]=l,Er[1]=u;for(var m=0;m<1;m+=.05)er[0]=ee(r,t,n,o,m),er[1]=ee(e,a,i,s,m),g=$n(Er,er),g=0&&g=0&&u<=1&&(n[l++]=u)}}else{var f=o*o-4*i*s;if(Na(f)){var u=-o/(2*i);u>=0&&u<=1&&(n[l++]=u)}else if(f>0){var h=Ha(f),u=(-o+h)/(2*i),v=(-o-h)/(2*i);u>=0&&u<=1&&(n[l++]=u),v>=0&&v<=1&&(n[l++]=v)}}return l}function Xw(r,e,t){var a=r+t-2*e;return a===0?.5:(r-e)/a}function Bs(r,e,t,a,n){var i=(e-r)*a+r,o=(t-e)*a+e,s=(o-i)*a+i;n[0]=r,n[1]=i,n[2]=s,n[3]=s,n[4]=o,n[5]=t}function Zw(r,e,t,a,n,i,o,s,l){var u,f=.005,h=1/0;Er[0]=o,Er[1]=s;for(var v=0;v<1;v+=.05){er[0]=se(r,t,n,v),er[1]=se(e,a,i,v);var c=$n(Er,er);c=0&&c=1?1:ff(0,a,i,1,l,s)&&ee(0,n,o,1,s[0])}}}var OL=(function(){function r(e){this._inited=!1,this._startTime=0,this._pausedTime=0,this._paused=!1,this._life=e.life||1e3,this._delay=e.delay||0,this.loop=e.loop||!1,this.onframe=e.onframe||$t,this.ondestroy=e.ondestroy||$t,this.onrestart=e.onrestart||$t,e.easing&&this.setEasing(e.easing)}return r.prototype.step=function(e,t){if(this._inited||(this._startTime=e+this._delay,this._inited=!0),this._paused){this._pausedTime+=t;return}var a=this._life,n=e-this._startTime-this._pausedTime,i=n/a;i<0&&(i=0),i=Math.min(i,1);var o=this.easingFunc,s=o?o(i):i;if(this.onframe(s),i===1)if(this.loop){var l=n%a;this._startTime=e-l,this._pausedTime=0,this.onrestart()}else return!0;return!1},r.prototype.pause=function(){this._paused=!0},r.prototype.resume=function(){this._paused=!1},r.prototype.setEasing=function(e){this.easing=e,this.easingFunc=Q(e)?e:xs[e]||_g(e)},r})(),qw=(function(){function r(e){this.value=e}return r})(),NL=(function(){function r(){this._len=0}return r.prototype.insert=function(e){var t=new qw(e);return this.insertEntry(t),t},r.prototype.insertEntry=function(e){this.head?(this.tail.next=e,e.prev=this.tail,e.next=null,this.tail=e):this.head=this.tail=e,this._len++},r.prototype.remove=function(e){var t=e.prev,a=e.next;t?t.next=a:this.head=a,a?a.prev=t:this.tail=t,e.next=e.prev=null,this._len--},r.prototype.len=function(){return this._len},r.prototype.clear=function(){this.head=this.tail=null,this._len=0},r})(),fl=(function(){function r(e){this._list=new NL,this._maxSize=10,this._map={},this._maxSize=e}return r.prototype.put=function(e,t){var a=this._list,n=this._map,i=null;if(n[e]==null){var o=a.len(),s=this._lastRemovedEntry;if(o>=this._maxSize&&o>0){var l=a.head;a.remove(l),delete n[l.key],i=l.value,this._lastRemovedEntry=l}s?s.value=t:s=new qw(t),s.key=e,a.insertEntry(s),n[e]=s}return i},r.prototype.get=function(e){var t=this._map[e],a=this._list;if(t!=null)return t!==a.tail&&(a.remove(t),a.insertEntry(t)),t.value},r.prototype.clear=function(){this._list.clear(),this._map={}},r.prototype.len=function(){return this._list.len()},r})(),Nm={transparent:[0,0,0,0],aliceblue:[240,248,255,1],antiquewhite:[250,235,215,1],aqua:[0,255,255,1],aquamarine:[127,255,212,1],azure:[240,255,255,1],beige:[245,245,220,1],bisque:[255,228,196,1],black:[0,0,0,1],blanchedalmond:[255,235,205,1],blue:[0,0,255,1],blueviolet:[138,43,226,1],brown:[165,42,42,1],burlywood:[222,184,135,1],cadetblue:[95,158,160,1],chartreuse:[127,255,0,1],chocolate:[210,105,30,1],coral:[255,127,80,1],cornflowerblue:[100,149,237,1],cornsilk:[255,248,220,1],crimson:[220,20,60,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgoldenrod:[184,134,11,1],darkgray:[169,169,169,1],darkgreen:[0,100,0,1],darkgrey:[169,169,169,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkseagreen:[143,188,143,1],darkslateblue:[72,61,139,1],darkslategray:[47,79,79,1],darkslategrey:[47,79,79,1],darkturquoise:[0,206,209,1],darkviolet:[148,0,211,1],deeppink:[255,20,147,1],deepskyblue:[0,191,255,1],dimgray:[105,105,105,1],dimgrey:[105,105,105,1],dodgerblue:[30,144,255,1],firebrick:[178,34,34,1],floralwhite:[255,250,240,1],forestgreen:[34,139,34,1],fuchsia:[255,0,255,1],gainsboro:[220,220,220,1],ghostwhite:[248,248,255,1],gold:[255,215,0,1],goldenrod:[218,165,32,1],gray:[128,128,128,1],green:[0,128,0,1],greenyellow:[173,255,47,1],grey:[128,128,128,1],honeydew:[240,255,240,1],hotpink:[255,105,180,1],indianred:[205,92,92,1],indigo:[75,0,130,1],ivory:[255,255,240,1],khaki:[240,230,140,1],lavender:[230,230,250,1],lavenderblush:[255,240,245,1],lawngreen:[124,252,0,1],lemonchiffon:[255,250,205,1],lightblue:[173,216,230,1],lightcoral:[240,128,128,1],lightcyan:[224,255,255,1],lightgoldenrodyellow:[250,250,210,1],lightgray:[211,211,211,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightsalmon:[255,160,122,1],lightseagreen:[32,178,170,1],lightskyblue:[135,206,250,1],lightslategray:[119,136,153,1],lightslategrey:[119,136,153,1],lightsteelblue:[176,196,222,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],limegreen:[50,205,50,1],linen:[250,240,230,1],magenta:[255,0,255,1],maroon:[128,0,0,1],mediumaquamarine:[102,205,170,1],mediumblue:[0,0,205,1],mediumorchid:[186,85,211,1],mediumpurple:[147,112,219,1],mediumseagreen:[60,179,113,1],mediumslateblue:[123,104,238,1],mediumspringgreen:[0,250,154,1],mediumturquoise:[72,209,204,1],mediumvioletred:[199,21,133,1],midnightblue:[25,25,112,1],mintcream:[245,255,250,1],mistyrose:[255,228,225,1],moccasin:[255,228,181,1],navajowhite:[255,222,173,1],navy:[0,0,128,1],oldlace:[253,245,230,1],olive:[128,128,0,1],olivedrab:[107,142,35,1],orange:[255,165,0,1],orangered:[255,69,0,1],orchid:[218,112,214,1],palegoldenrod:[238,232,170,1],palegreen:[152,251,152,1],paleturquoise:[175,238,238,1],palevioletred:[219,112,147,1],papayawhip:[255,239,213,1],peachpuff:[255,218,185,1],peru:[205,133,63,1],pink:[255,192,203,1],plum:[221,160,221,1],powderblue:[176,224,230,1],purple:[128,0,128,1],red:[255,0,0,1],rosybrown:[188,143,143,1],royalblue:[65,105,225,1],saddlebrown:[139,69,19,1],salmon:[250,128,114,1],sandybrown:[244,164,96,1],seagreen:[46,139,87,1],seashell:[255,245,238,1],sienna:[160,82,45,1],silver:[192,192,192,1],skyblue:[135,206,235,1],slateblue:[106,90,205,1],slategray:[112,128,144,1],slategrey:[112,128,144,1],snow:[255,250,250,1],springgreen:[0,255,127,1],steelblue:[70,130,180,1],tan:[210,180,140,1],teal:[0,128,128,1],thistle:[216,191,216,1],tomato:[255,99,71,1],turquoise:[64,224,208,1],violet:[238,130,238,1],wheat:[245,222,179,1],white:[255,255,255,1],whitesmoke:[245,245,245,1],yellow:[255,255,0,1],yellowgreen:[154,205,50,1]};function _r(r){return r=Math.round(r),r<0?0:r>255?255:r}function BL(r){return r=Math.round(r),r<0?0:r>360?360:r}function Vs(r){return r<0?0:r>1?1:r}function jh(r){var e=r;return e.length&&e.charAt(e.length-1)==="%"?_r(parseFloat(e)/100*255):_r(parseInt(e,10))}function Xn(r){var e=r;return e.length&&e.charAt(e.length-1)==="%"?Vs(parseFloat(e)/100):Vs(parseFloat(e))}function tv(r,e,t){return t<0?t+=1:t>1&&(t-=1),t*6<1?r+(e-r)*t*6:t*2<1?e:t*3<2?r+(e-r)*(2/3-t)*6:r}function Ba(r,e,t){return r+(e-r)*t}function Ke(r,e,t,a,n){return r[0]=e,r[1]=t,r[2]=a,r[3]=n,r}function Lp(r,e){return r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=e[3],r}var Kw=new fl(20),Bl=null;function _i(r,e){Bl&&Lp(Bl,e),Bl=Kw.put(r,Bl||e.slice())}function Ue(r,e){if(r){e=e||[];var t=Kw.get(r);if(t)return Lp(e,t);r=r+"";var a=r.replace(/ /g,"").toLowerCase();if(a in Nm)return Lp(e,Nm[a]),_i(r,e),e;var n=a.length;if(a.charAt(0)==="#"){if(n===4||n===5){var i=parseInt(a.slice(1,4),16);if(!(i>=0&&i<=4095)){Ke(e,0,0,0,1);return}return Ke(e,(i&3840)>>4|(i&3840)>>8,i&240|(i&240)>>4,i&15|(i&15)<<4,n===5?parseInt(a.slice(4),16)/15:1),_i(r,e),e}else if(n===7||n===9){var i=parseInt(a.slice(1,7),16);if(!(i>=0&&i<=16777215)){Ke(e,0,0,0,1);return}return Ke(e,(i&16711680)>>16,(i&65280)>>8,i&255,n===9?parseInt(a.slice(7),16)/255:1),_i(r,e),e}return}var o=a.indexOf("("),s=a.indexOf(")");if(o!==-1&&s+1===n){var l=a.substr(0,o),u=a.substr(o+1,s-(o+1)).split(","),f=1;switch(l){case"rgba":if(u.length!==4)return u.length===3?Ke(e,+u[0],+u[1],+u[2],1):Ke(e,0,0,0,1);f=Xn(u.pop());case"rgb":if(u.length>=3)return Ke(e,jh(u[0]),jh(u[1]),jh(u[2]),u.length===3?f:Xn(u[3])),_i(r,e),e;Ke(e,0,0,0,1);return;case"hsla":if(u.length!==4){Ke(e,0,0,0,1);return}return u[3]=Xn(u[3]),Pp(u,e),_i(r,e),e;case"hsl":if(u.length!==3){Ke(e,0,0,0,1);return}return Pp(u,e),_i(r,e),e;default:return}}Ke(e,0,0,0,1)}}function Pp(r,e){var t=(parseFloat(r[0])%360+360)%360/360,a=Xn(r[1]),n=Xn(r[2]),i=n<=.5?n*(a+1):n+a-n*a,o=n*2-i;return e=e||[],Ke(e,_r(tv(o,i,t+1/3)*255),_r(tv(o,i,t)*255),_r(tv(o,i,t-1/3)*255),1),r.length===4&&(e[3]=r[3]),e}function VL(r){if(r){var e=r[0]/255,t=r[1]/255,a=r[2]/255,n=Math.min(e,t,a),i=Math.max(e,t,a),o=i-n,s=(i+n)/2,l,u;if(o===0)l=0,u=0;else{s<.5?u=o/(i+n):u=o/(2-i-n);var f=((i-e)/6+o/2)/o,h=((i-t)/6+o/2)/o,v=((i-a)/6+o/2)/o;e===i?l=v-h:t===i?l=1/3+f-v:a===i&&(l=2/3+h-f),l<0&&(l+=1),l>1&&(l-=1)}var c=[l*360,u,s];return r[3]!=null&&c.push(r[3]),c}}function Rp(r,e){var t=Ue(r);if(t){for(var a=0;a<3;a++)e<0?t[a]=t[a]*(1-e)|0:t[a]=(255-t[a])*e+t[a]|0,t[a]>255?t[a]=255:t[a]<0&&(t[a]=0);return ia(t,t.length===4?"rgba":"rgb")}}function ev(r,e,t){if(!(!(e&&e.length)||!(r>=0&&r<=1))){t=t||[];var a=r*(e.length-1),n=Math.floor(a),i=Math.ceil(a),o=e[n],s=e[i],l=a-n;return t[0]=_r(Ba(o[0],s[0],l)),t[1]=_r(Ba(o[1],s[1],l)),t[2]=_r(Ba(o[2],s[2],l)),t[3]=Vs(Ba(o[3],s[3],l)),t}}function zL(r,e,t){if(!(!(e&&e.length)||!(r>=0&&r<=1))){var a=r*(e.length-1),n=Math.floor(a),i=Math.ceil(a),o=Ue(e[n]),s=Ue(e[i]),l=a-n,u=ia([_r(Ba(o[0],s[0],l)),_r(Ba(o[1],s[1],l)),_r(Ba(o[2],s[2],l)),Vs(Ba(o[3],s[3],l))],"rgba");return t?{color:u,leftIndex:n,rightIndex:i,value:a}:u}}function bs(r,e,t,a){var n=Ue(r);if(r)return n=VL(n),e!=null&&(n[0]=BL(e)),t!=null&&(n[1]=Xn(t)),a!=null&&(n[2]=Xn(a)),ia(Pp(n),"rgba")}function hf(r,e){var t=Ue(r);if(t&&e!=null)return t[3]=Vs(e),ia(t,"rgba")}function ia(r,e){if(!(!r||!r.length)){var t=r[0]+","+r[1]+","+r[2];return(e==="rgba"||e==="hsva"||e==="hsla")&&(t+=","+r[3]),e+"("+t+")"}}function vf(r,e){var t=Ue(r);return t?(.299*t[0]+.587*t[1]+.114*t[2])*t[3]/255+(1-t[3])*e:0}var Bm=new fl(100);function Ep(r){if(Y(r)){var e=Bm.get(r);return e||(e=Rp(r,-.1),Bm.put(r,e)),e}else if(nh(r)){var t=V({},r);return t.colorStops=G(r.colorStops,function(a){return{offset:a.offset,color:Rp(a.color,-.1)}}),t}return r}var cf=Math.round;function zs(r){var e;if(!r||r==="transparent")r="none";else if(typeof r=="string"&&r.indexOf("rgba")>-1){var t=Ue(r);t&&(r="rgb("+t[0]+","+t[1]+","+t[2]+")",e=t[3])}return{color:r,opacity:e??1}}var Vm=1e-4;function Va(r){return r-Vm}function Vl(r){return cf(r*1e3)/1e3}function kp(r){return cf(r*1e4)/1e4}function GL(r){return"matrix("+Vl(r[0])+","+Vl(r[1])+","+Vl(r[2])+","+Vl(r[3])+","+kp(r[4])+","+kp(r[5])+")"}var FL={left:"start",right:"end",center:"middle",middle:"middle"};function HL(r,e,t){return t==="top"?r+=e/2:t==="bottom"&&(r-=e/2),r}function WL(r){return r&&(r.shadowBlur||r.shadowOffsetX||r.shadowOffsetY)}function UL(r){var e=r.style,t=r.getGlobalScale();return[e.shadowColor,(e.shadowBlur||0).toFixed(2),(e.shadowOffsetX||0).toFixed(2),(e.shadowOffsetY||0).toFixed(2),t[0],t[1]].join(",")}function Qw(r){return r&&!!r.image}function YL(r){return r&&!!r.svgElement}function Sg(r){return Qw(r)||YL(r)}function Jw(r){return r.type==="linear"}function jw(r){return r.type==="radial"}function tT(r){return r&&(r.type==="linear"||r.type==="radial")}function sh(r){return"url(#"+r+")"}function eT(r){var e=r.getGlobalScale(),t=Math.max(e[0],e[1]);return Math.max(Math.ceil(Math.log(t)/Math.log(10)),1)}function rT(r){var e=r.x||0,t=r.y||0,a=(r.rotation||0)*Bu,n=st(r.scaleX,1),i=st(r.scaleY,1),o=r.skewX||0,s=r.skewY||0,l=[];return(e||t)&&l.push("translate("+e+"px,"+t+"px)"),a&&l.push("rotate("+a+")"),(n!==1||i!==1)&&l.push("scale("+n+","+i+")"),(o||s)&&l.push("skew("+cf(o*Bu)+"deg, "+cf(s*Bu)+"deg)"),l.join(" ")}var $L=(function(){return yt.hasGlobalWindow&&Q(window.btoa)?function(r){return window.btoa(unescape(encodeURIComponent(r)))}:typeof Buffer<"u"?function(r){return Buffer.from(r).toString("base64")}:function(r){return null}})(),Op=Array.prototype.slice;function Jr(r,e,t){return(e-r)*t+r}function rv(r,e,t,a){for(var n=e.length,i=0;ia?e:r,i=Math.min(t,a),o=n[i-1]||{color:[0,0,0,0],offset:0},s=i;so;if(s)a.length=o;else for(var l=i;l=1},r.prototype.getAdditiveTrack=function(){return this._additiveTrack},r.prototype.addKeyframe=function(e,t,a){this._needsSort=!0;var n=this.keyframes,i=n.length,o=!1,s=Gm,l=t;if(me(t)){var u=KL(t);s=u,(u===1&&!wt(t[0])||u===2&&!wt(t[0][0]))&&(o=!0)}else if(wt(t)&&!Os(t))s=Gl;else if(Y(t))if(!isNaN(+t))s=Gl;else{var f=Ue(t);f&&(l=f,s=us)}else if(nh(t)){var h=V({},l);h.colorStops=G(t.colorStops,function(c){return{offset:c.offset,color:Ue(c.color)}}),Jw(t)?s=Np:jw(t)&&(s=Bp),l=h}i===0?this.valType=s:(s!==this.valType||s===Gm)&&(o=!0),this.discrete=this.discrete||o;var v={time:e,value:l,rawValue:t,percent:0};return a&&(v.easing=a,v.easingFunc=Q(a)?a:xs[a]||_g(a)),n.push(v),v},r.prototype.prepare=function(e,t){var a=this.keyframes;this._needsSort&&a.sort(function(d,g){return d.time-g.time});for(var n=this.valType,i=a.length,o=a[i-1],s=this.discrete,l=Fl(n),u=Fm(n),f=0;f=0&&!(o[f].percent<=t);f--);f=v(f,s-2)}else{for(f=h;ft);f++);f=v(f-1,s-2)}p=o[f+1],c=o[f]}if(c&&p){this._lastFr=f,this._lastFrP=t;var g=p.percent-c.percent,y=g===0?1:v((t-c.percent)/g,1);p.easingFunc&&(y=p.easingFunc(y));var m=a?this._additiveValue:u?Bo:e[l];if((Fl(i)||u)&&!m&&(m=this._additiveValue=[]),this.discrete)e[l]=y<1?c.rawValue:p.rawValue;else if(Fl(i))i===Hu?rv(m,c[n],p[n],y):XL(m,c[n],p[n],y);else if(Fm(i)){var _=c[n],S=p[n],b=i===Np;e[l]={type:b?"linear":"radial",x:Jr(_.x,S.x,y),y:Jr(_.y,S.y,y),colorStops:G(_.colorStops,function(w,T){var A=S.colorStops[T];return{offset:Jr(w.offset,A.offset,y),color:Fu(rv([],w.color,A.color,y))}}),global:S.global},b?(e[l].x2=Jr(_.x2,S.x2,y),e[l].y2=Jr(_.y2,S.y2,y)):e[l].r=Jr(_.r,S.r,y)}else if(u)rv(m,c[n],p[n],y),a||(e[l]=Fu(m));else{var x=Jr(c[n],p[n],y);a?this._additiveValue=x:e[l]=x}a&&this._addToTarget(e)}}},r.prototype._addToTarget=function(e){var t=this.valType,a=this.propName,n=this._additiveValue;t===Gl?e[a]=e[a]+n:t===us?(Ue(e[a],Bo),zl(Bo,Bo,n,1),e[a]=Fu(Bo)):t===Hu?zl(e[a],e[a],n,1):t===aT&&zm(e[a],e[a],n,1)},r})(),xg=(function(){function r(e,t,a,n){if(this._tracks={},this._trackKeys=[],this._maxTime=0,this._started=0,this._clip=null,this._target=e,this._loop=t,t&&n){vg("Can' use additive animation on looped animation.");return}this._additiveAnimators=n,this._allowDiscrete=a}return r.prototype.getMaxTime=function(){return this._maxTime},r.prototype.getDelay=function(){return this._delay},r.prototype.getLoop=function(){return this._loop},r.prototype.getTarget=function(){return this._target},r.prototype.changeTarget=function(e){this._target=e},r.prototype.when=function(e,t,a){return this.whenWithKeys(e,t,_t(t),a)},r.prototype.whenWithKeys=function(e,t,a,n){for(var i=this._tracks,o=0;o0&&l.addKeyframe(0,ws(u),n),this._trackKeys.push(s)}l.addKeyframe(e,ws(t[s]),n)}return this._maxTime=Math.max(this._maxTime,e),this},r.prototype.pause=function(){this._clip.pause(),this._paused=!0},r.prototype.resume=function(){this._clip.resume(),this._paused=!1},r.prototype.isPaused=function(){return!!this._paused},r.prototype.duration=function(e){return this._maxTime=e,this._force=!0,this},r.prototype._doneCallback=function(){this._setTracksFinished(),this._clip=null;var e=this._doneCbs;if(e)for(var t=e.length,a=0;a0)){this._started=1;for(var t=this,a=[],n=this._maxTime||0,i=0;i1){var s=o.pop();i.addKeyframe(s.time,e[n]),i.prepare(this._maxTime,i.getAdditiveTrack())}}}},r})();function $i(){return new Date().getTime()}var JL=(function(r){k(e,r);function e(t){var a=r.call(this)||this;return a._running=!1,a._time=0,a._pausedTime=0,a._pauseStart=0,a._paused=!1,t=t||{},a.stage=t.stage||{},a}return e.prototype.addClip=function(t){t.animation&&this.removeClip(t),this._head?(this._tail.next=t,t.prev=this._tail,t.next=null,this._tail=t):this._head=this._tail=t,t.animation=this},e.prototype.addAnimator=function(t){t.animation=this;var a=t.getClip();a&&this.addClip(a)},e.prototype.removeClip=function(t){if(t.animation){var a=t.prev,n=t.next;a?a.next=n:this._head=n,n?n.prev=a:this._tail=a,t.next=t.prev=t.animation=null}},e.prototype.removeAnimator=function(t){var a=t.getClip();a&&this.removeClip(a),t.animation=null},e.prototype.update=function(t){for(var a=$i()-this._pausedTime,n=a-this._time,i=this._head;i;){var o=i.next,s=i.step(a,n);s&&(i.ondestroy(),this.removeClip(i)),i=o}this._time=a,t||(this.trigger("frame",n),this.stage.update&&this.stage.update())},e.prototype._startLoop=function(){var t=this;this._running=!0;function a(){t._running&&(lf(a),!t._paused&&t.update())}lf(a)},e.prototype.start=function(){this._running||(this._time=$i(),this._pausedTime=0,this._startLoop())},e.prototype.stop=function(){this._running=!1},e.prototype.pause=function(){this._paused||(this._pauseStart=$i(),this._paused=!0)},e.prototype.resume=function(){this._paused&&(this._pausedTime+=$i()-this._pauseStart,this._paused=!1)},e.prototype.clear=function(){for(var t=this._head;t;){var a=t.next;t.prev=t.next=t.animation=null,t=a}this._head=this._tail=null},e.prototype.isFinished=function(){return this._head==null},e.prototype.animate=function(t,a){a=a||{},this.start();var n=new xg(t,a.loop);return this.addAnimator(n),n},e})(lr),jL=300,av=yt.domSupported,nv=(function(){var r=["click","dblclick","mousewheel","wheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],e=["touchstart","touchend","touchmove"],t={pointerdown:1,pointerup:1,pointermove:1,pointerout:1},a=G(r,function(n){var i=n.replace("mouse","pointer");return t.hasOwnProperty(i)?i:n});return{mouse:r,touch:e,pointer:a}})(),Hm={mouse:["mousemove","mouseup"],pointer:["pointermove","pointerup"]},Wm=!1;function Vp(r){var e=r.pointerType;return e==="pen"||e==="touch"}function tP(r){r.touching=!0,r.touchTimer!=null&&(clearTimeout(r.touchTimer),r.touchTimer=null),r.touchTimer=setTimeout(function(){r.touching=!1,r.touchTimer=null},700)}function iv(r){r&&(r.zrByTouch=!0)}function eP(r,e){return Qe(r.dom,new rP(r,e),!0)}function nT(r,e){for(var t=e,a=!1;t&&t.nodeType!==9&&!(a=t.domBelongToZr||t!==e&&t===r.painterRoot);)t=t.parentNode;return a}var rP=(function(){function r(e,t){this.stopPropagation=$t,this.stopImmediatePropagation=$t,this.preventDefault=$t,this.type=t.type,this.target=this.currentTarget=e.dom,this.pointerType=t.pointerType,this.clientX=t.clientX,this.clientY=t.clientY}return r})(),pr={mousedown:function(r){r=Qe(this.dom,r),this.__mayPointerCapture=[r.zrX,r.zrY],this.trigger("mousedown",r)},mousemove:function(r){r=Qe(this.dom,r);var e=this.__mayPointerCapture;e&&(r.zrX!==e[0]||r.zrY!==e[1])&&this.__togglePointerCapture(!0),this.trigger("mousemove",r)},mouseup:function(r){r=Qe(this.dom,r),this.__togglePointerCapture(!1),this.trigger("mouseup",r)},mouseout:function(r){r=Qe(this.dom,r);var e=r.toElement||r.relatedTarget;nT(this,e)||(this.__pointerCapturing&&(r.zrEventControl="no_globalout"),this.trigger("mouseout",r))},wheel:function(r){Wm=!0,r=Qe(this.dom,r),this.trigger("mousewheel",r)},mousewheel:function(r){Wm||(r=Qe(this.dom,r),this.trigger("mousewheel",r))},touchstart:function(r){r=Qe(this.dom,r),iv(r),this.__lastTouchMoment=new Date,this.handler.processGesture(r,"start"),pr.mousemove.call(this,r),pr.mousedown.call(this,r)},touchmove:function(r){r=Qe(this.dom,r),iv(r),this.handler.processGesture(r,"change"),pr.mousemove.call(this,r)},touchend:function(r){r=Qe(this.dom,r),iv(r),this.handler.processGesture(r,"end"),pr.mouseup.call(this,r),+new Date-+this.__lastTouchMoment$m||r<-$m}var un=[],Si=[],sv=We(),lv=Math.abs,ea=(function(){function r(){}return r.prototype.getLocalTransform=function(e){return r.getLocalTransform(this,e)},r.prototype.setPosition=function(e){this.x=e[0],this.y=e[1]},r.prototype.setScale=function(e){this.scaleX=e[0],this.scaleY=e[1]},r.prototype.setSkew=function(e){this.skewX=e[0],this.skewY=e[1]},r.prototype.setOrigin=function(e){this.originX=e[0],this.originY=e[1]},r.prototype.needLocalTransform=function(){return ln(this.rotation)||ln(this.x)||ln(this.y)||ln(this.scaleX-1)||ln(this.scaleY-1)||ln(this.skewX)||ln(this.skewY)},r.prototype.updateTransform=function(){var e=this.parent&&this.parent.transform,t=this.needLocalTransform(),a=this.transform;if(!(t||e)){a&&(Ym(a),this.invTransform=null);return}a=a||We(),t?this.getLocalTransform(a):Ym(a),e&&(t?na(a,e,a):yg(a,e)),this.transform=a,this._resolveGlobalScaleRatio(a)},r.prototype._resolveGlobalScaleRatio=function(e){var t=this.globalScaleRatio;if(t!=null&&t!==1){this.getGlobalScale(un);var a=un[0]<0?-1:1,n=un[1]<0?-1:1,i=((un[0]-a)*t+a)/un[0]||0,o=((un[1]-n)*t+n)/un[1]||0;e[0]*=i,e[1]*=i,e[2]*=o,e[3]*=o}this.invTransform=this.invTransform||We(),_o(this.invTransform,e)},r.prototype.getComputedTransform=function(){for(var e=this,t=[];e;)t.push(e),e=e.parent;for(;e=t.pop();)e.updateTransform();return this.transform},r.prototype.setLocalTransform=function(e){if(e){var t=e[0]*e[0]+e[1]*e[1],a=e[2]*e[2]+e[3]*e[3],n=Math.atan2(e[1],e[0]),i=Math.PI/2+n-Math.atan2(e[3],e[2]);a=Math.sqrt(a)*Math.cos(i),t=Math.sqrt(t),this.skewX=i,this.skewY=0,this.rotation=-n,this.x=+e[4],this.y=+e[5],this.scaleX=t,this.scaleY=a,this.originX=0,this.originY=0}},r.prototype.decomposeTransform=function(){if(this.transform){var e=this.parent,t=this.transform;e&&e.transform&&(e.invTransform=e.invTransform||We(),na(Si,e.invTransform,t),t=Si);var a=this.originX,n=this.originY;(a||n)&&(sv[4]=a,sv[5]=n,na(Si,t,sv),Si[4]-=a,Si[5]-=n,t=Si),this.setLocalTransform(t)}},r.prototype.getGlobalScale=function(e){var t=this.transform;return e=e||[],t?(e[0]=Math.sqrt(t[0]*t[0]+t[1]*t[1]),e[1]=Math.sqrt(t[2]*t[2]+t[3]*t[3]),t[0]<0&&(e[0]=-e[0]),t[3]<0&&(e[1]=-e[1]),e):(e[0]=1,e[1]=1,e)},r.prototype.transformCoordToLocal=function(e,t){var a=[e,t],n=this.invTransform;return n&&he(a,a,n),a},r.prototype.transformCoordToGlobal=function(e,t){var a=[e,t],n=this.transform;return n&&he(a,a,n),a},r.prototype.getLineScale=function(){var e=this.transform;return e&&lv(e[0]-1)>1e-10&&lv(e[3]-1)>1e-10?Math.sqrt(lv(e[0]*e[3]-e[2]*e[1])):1},r.prototype.copyTransform=function(e){oT(this,e)},r.getLocalTransform=function(e,t){t=t||[];var a=e.originX||0,n=e.originY||0,i=e.scaleX,o=e.scaleY,s=e.anchorX,l=e.anchorY,u=e.rotation||0,f=e.x,h=e.y,v=e.skewX?Math.tan(e.skewX):0,c=e.skewY?Math.tan(-e.skewY):0;if(a||n||s||l){var p=a+s,d=n+l;t[4]=-p*i-v*d*o,t[5]=-d*o-c*p*i}else t[4]=t[5]=0;return t[0]=i,t[3]=o,t[1]=c*i,t[2]=v*o,u&&fi(t,t,u),t[4]+=a+f,t[5]+=n+h,t},r.initDefaultProps=(function(){var e=r.prototype;e.scaleX=e.scaleY=e.globalScaleRatio=1,e.x=e.y=e.originX=e.originY=e.skewX=e.skewY=e.rotation=e.anchorX=e.anchorY=0})(),r})(),Wr=["x","y","originX","originY","anchorX","anchorY","rotation","scaleX","scaleY","skewX","skewY"];function oT(r,e){for(var t=0;t"u"&&typeof self<"u"?yt.worker=!0:!yt.hasGlobalWindow||"Deno"in window?(yt.node=!0,yt.svgSupported=!0):FI(navigator.userAgent,yt);function FI(r,e){var t=e.browser,a=r.match(/Firefox\/([\d.]+)/),n=r.match(/MSIE\s([\d.]+)/)||r.match(/Trident\/.+?rv:(([\d.]+))/),i=r.match(/Edge?\/([\d.]+)/),o=/micromessenger/i.test(r);a&&(t.firefox=!0,t.version=a[1]),n&&(t.ie=!0,t.version=n[1]),i&&(t.edge=!0,t.version=i[1],t.newEdge=+i[1].split(".")[0]>18),o&&(t.weChat=!0),e.svgSupported=typeof SVGRect<"u",e.touchEventsSupported="ontouchstart"in window&&!t.ie&&!t.edge,e.pointerEventsSupported="onpointerdown"in window&&(t.edge||t.ie&&+t.version>=11),e.domSupported=typeof document<"u";var s=document.documentElement.style;e.transform3dSupported=(t.ie&&"transition"in s||t.edge||"WebKitCSSMatrix"in window&&"m11"in new WebKitCSSMatrix||"MozPerspective"in s)&&!("OTransition"in s),e.transformSupported=e.transform3dSupported||t.ie&&+t.version>=9}var ug=12,Pw="sans-serif",$a=ug+"px "+Pw,HI=20,WI=100,UI="007LLmW'55;N0500LLLLLLLLLL00NNNLzWW\\\\WQb\\0FWLg\\bWb\\WQ\\WrWWQ000CL5LLFLL0LL**F*gLLLL5F0LF\\FFF5.5N";function YI(r){var e={};if(typeof JSON>"u")return e;for(var t=0;t=0)s=o*t.length;else for(var l=0;l>1)%2;s.cssText=["position: absolute","visibility: hidden","padding: 0","margin: 0","border-width: 0","user-select: none","width:0","height:0",a[l]+":0",n[u]+":0",a[1-l]+":auto",n[1-u]+":auto",""].join("!important;"),r.appendChild(o),t.push(o)}return t}function vL(r,e,t){for(var a=t?"invTrans":"trans",n=e[a],i=e.srcCoords,o=[],s=[],l=!0,u=0;u<4;u++){var f=r[u].getBoundingClientRect(),h=2*u,v=f.left,c=f.top;o.push(v,c),l=l&&i&&v===i[h]&&c===i[h+1],s.push(r[u].offsetLeft,r[u].offsetTop)}return l&&n?n:(e.srcCoords=o,e[a]=t?Tm(s,o):Tm(o,s))}function Vw(r){return r.nodeName.toUpperCase()==="CANVAS"}var cL=/([&<>"'])/g,pL={"&":"&","<":"<",">":">",'"':""","'":"'"};function Te(r){return r==null?"":(r+"").replace(cL,function(e,t){return pL[t]})}var dL=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Xh=[],gL=yt.browser.firefox&&+yt.browser.version.split(".")[0]<39;function Dp(r,e,t,a){return t=t||{},a?Cm(r,e,t):gL&&e.layerX!=null&&e.layerX!==e.offsetX?(t.zrX=e.layerX,t.zrY=e.layerY):e.offsetX!=null?(t.zrX=e.offsetX,t.zrY=e.offsetY):Cm(r,e,t),t}function Cm(r,e,t){if(yt.domSupported&&r.getBoundingClientRect){var a=e.clientX,n=e.clientY;if(Vw(r)){var i=r.getBoundingClientRect();t.zrX=a-i.left,t.zrY=n-i.top;return}else if(Cp(Xh,r,a,n)){t.zrX=Xh[0],t.zrY=Xh[1];return}}t.zrX=t.zrY=0}function gg(r){return r||window.event}function Qe(r,e,t){if(e=gg(e),e.zrX!=null)return e;var a=e.type,n=a&&a.indexOf("touch")>=0;if(n){var o=a!=="touchend"?e.targetTouches[0]:e.changedTouches[0];o&&Dp(r,o,e,t)}else{Dp(r,e,e,t);var i=yL(e);e.zrDelta=i?i/120:-(e.detail||0)/3}var s=e.button;return e.which==null&&s!==void 0&&dL.test(e.type)&&(e.which=s&1?1:s&2?3:s&4?2:0),e}function yL(r){var e=r.wheelDelta;if(e)return e;var t=r.deltaX,a=r.deltaY;if(t==null||a==null)return e;var n=Math.abs(a!==0?a:t),i=a>0?-1:a<0?1:t>0?-1:1;return 3*n*i}function Mp(r,e,t,a){r.addEventListener(e,t,a)}function mL(r,e,t,a){r.removeEventListener(e,t,a)}var la=function(r){r.preventDefault(),r.stopPropagation(),r.cancelBubble=!0};function Dm(r){return r.which===2||r.which===3}var _L=(function(){function r(){this._track=[]}return r.prototype.recognize=function(e,t,a){return this._doTrack(e,t,a),this._recognize(e)},r.prototype.clear=function(){return this._track.length=0,this},r.prototype._doTrack=function(e,t,a){var n=e.touches;if(n){for(var i={points:[],touches:[],target:t,event:e},o=0,s=n.length;o1&&a&&a.length>1){var i=Mm(a)/Mm(n);!isFinite(i)&&(i=1),e.pinchScale=i;var o=SL(a);return e.pinchX=o[0],e.pinchY=o[1],{type:"pinch",target:r[0].target,event:e}}}}};function We(){return[1,0,0,1,0,0]}function oh(r){return r[0]=1,r[1]=0,r[2]=0,r[3]=1,r[4]=0,r[5]=0,r}function yg(r,e){return r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=e[3],r[4]=e[4],r[5]=e[5],r}function na(r,e,t){var a=e[0]*t[0]+e[2]*t[1],n=e[1]*t[0]+e[3]*t[1],i=e[0]*t[2]+e[2]*t[3],o=e[1]*t[2]+e[3]*t[3],s=e[0]*t[4]+e[2]*t[5]+e[4],l=e[1]*t[4]+e[3]*t[5]+e[5];return r[0]=a,r[1]=n,r[2]=i,r[3]=o,r[4]=s,r[5]=l,r}function Hr(r,e,t){return r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=e[3],r[4]=e[4]+t[0],r[5]=e[5]+t[1],r}function fi(r,e,t,a){a===void 0&&(a=[0,0]);var n=e[0],i=e[2],o=e[4],s=e[1],l=e[3],u=e[5],f=Math.sin(t),h=Math.cos(t);return r[0]=n*h+s*f,r[1]=-n*f+s*h,r[2]=i*h+l*f,r[3]=-i*f+h*l,r[4]=h*(o-a[0])+f*(u-a[1])+a[0],r[5]=h*(u-a[1])-f*(o-a[0])+a[1],r}function mg(r,e,t){var a=t[0],n=t[1];return r[0]=e[0]*a,r[1]=e[1]*n,r[2]=e[2]*a,r[3]=e[3]*n,r[4]=e[4]*a,r[5]=e[5]*n,r}function _o(r,e){var t=e[0],a=e[2],n=e[4],i=e[1],o=e[3],s=e[5],l=t*o-i*a;return l?(l=1/l,r[0]=o*l,r[1]=-i*l,r[2]=-a*l,r[3]=t*l,r[4]=(a*s-o*n)*l,r[5]=(i*n-t*s)*l,r):null}function xL(r){var e=We();return yg(e,r),e}var ft=(function(){function r(e,t){this.x=e||0,this.y=t||0}return r.prototype.copy=function(e){return this.x=e.x,this.y=e.y,this},r.prototype.clone=function(){return new r(this.x,this.y)},r.prototype.set=function(e,t){return this.x=e,this.y=t,this},r.prototype.equal=function(e){return e.x===this.x&&e.y===this.y},r.prototype.add=function(e){return this.x+=e.x,this.y+=e.y,this},r.prototype.scale=function(e){this.x*=e,this.y*=e},r.prototype.scaleAndAdd=function(e,t){this.x+=e.x*t,this.y+=e.y*t},r.prototype.sub=function(e){return this.x-=e.x,this.y-=e.y,this},r.prototype.dot=function(e){return this.x*e.x+this.y*e.y},r.prototype.len=function(){return Math.sqrt(this.x*this.x+this.y*this.y)},r.prototype.lenSquare=function(){return this.x*this.x+this.y*this.y},r.prototype.normalize=function(){var e=this.len();return this.x/=e,this.y/=e,this},r.prototype.distance=function(e){var t=this.x-e.x,a=this.y-e.y;return Math.sqrt(t*t+a*a)},r.prototype.distanceSquare=function(e){var t=this.x-e.x,a=this.y-e.y;return t*t+a*a},r.prototype.negate=function(){return this.x=-this.x,this.y=-this.y,this},r.prototype.transform=function(e){if(e){var t=this.x,a=this.y;return this.x=e[0]*t+e[2]*a+e[4],this.y=e[1]*t+e[3]*a+e[5],this}},r.prototype.toArray=function(e){return e[0]=this.x,e[1]=this.y,e},r.prototype.fromArray=function(e){this.x=e[0],this.y=e[1]},r.set=function(e,t,a){e.x=t,e.y=a},r.copy=function(e,t){e.x=t.x,e.y=t.y},r.len=function(e){return Math.sqrt(e.x*e.x+e.y*e.y)},r.lenSquare=function(e){return e.x*e.x+e.y*e.y},r.dot=function(e,t){return e.x*t.x+e.y*t.y},r.add=function(e,t,a){e.x=t.x+a.x,e.y=t.y+a.y},r.sub=function(e,t,a){e.x=t.x-a.x,e.y=t.y-a.y},r.scale=function(e,t,a){e.x=t.x*a,e.y=t.y*a},r.scaleAndAdd=function(e,t,a,n){e.x=t.x+a.x*n,e.y=t.y+a.y*n},r.lerp=function(e,t,a,n){var i=1-n;e.x=i*t.x+n*a.x,e.y=i*t.y+n*a.y},r})(),El=Math.min,kl=Math.max,an=new ft,nn=new ft,on=new ft,sn=new ft,Eo=new ft,ko=new ft,ht=(function(){function r(e,t,a,n){a<0&&(e=e+a,a=-a),n<0&&(t=t+n,n=-n),this.x=e,this.y=t,this.width=a,this.height=n}return r.prototype.union=function(e){var t=El(e.x,this.x),a=El(e.y,this.y);isFinite(this.x)&&isFinite(this.width)?this.width=kl(e.x+e.width,this.x+this.width)-t:this.width=e.width,isFinite(this.y)&&isFinite(this.height)?this.height=kl(e.y+e.height,this.y+this.height)-a:this.height=e.height,this.x=t,this.y=a},r.prototype.applyTransform=function(e){r.applyTransform(this,this,e)},r.prototype.calculateTransform=function(e){var t=this,a=e.width/t.width,n=e.height/t.height,i=We();return Hr(i,i,[-t.x,-t.y]),mg(i,i,[a,n]),Hr(i,i,[e.x,e.y]),i},r.prototype.intersect=function(e,t){if(!e)return!1;e instanceof r||(e=r.create(e));var a=this,n=a.x,i=a.x+a.width,o=a.y,s=a.y+a.height,l=e.x,u=e.x+e.width,f=e.y,h=e.y+e.height,v=!(ip&&(p=_,dp&&(p=S,y=a.x&&e<=a.x+a.width&&t>=a.y&&t<=a.y+a.height},r.prototype.clone=function(){return new r(this.x,this.y,this.width,this.height)},r.prototype.copy=function(e){r.copy(this,e)},r.prototype.plain=function(){return{x:this.x,y:this.y,width:this.width,height:this.height}},r.prototype.isFinite=function(){return isFinite(this.x)&&isFinite(this.y)&&isFinite(this.width)&&isFinite(this.height)},r.prototype.isZero=function(){return this.width===0||this.height===0},r.create=function(e){return new r(e.x,e.y,e.width,e.height)},r.copy=function(e,t){e.x=t.x,e.y=t.y,e.width=t.width,e.height=t.height},r.applyTransform=function(e,t,a){if(!a){e!==t&&r.copy(e,t);return}if(a[1]<1e-5&&a[1]>-1e-5&&a[2]<1e-5&&a[2]>-1e-5){var n=a[0],i=a[3],o=a[4],s=a[5];e.x=t.x*n+o,e.y=t.y*i+s,e.width=t.width*n,e.height=t.height*i,e.width<0&&(e.x+=e.width,e.width=-e.width),e.height<0&&(e.y+=e.height,e.height=-e.height);return}an.x=on.x=t.x,an.y=sn.y=t.y,nn.x=sn.x=t.x+t.width,nn.y=on.y=t.y+t.height,an.transform(a),sn.transform(a),nn.transform(a),on.transform(a),e.x=El(an.x,nn.x,on.x,sn.x),e.y=El(an.y,nn.y,on.y,sn.y);var l=kl(an.x,nn.x,on.x,sn.x),u=kl(an.y,nn.y,on.y,sn.y);e.width=l-e.x,e.height=u-e.y},r})(),zw="silent";function bL(r,e,t){return{type:r,event:t,target:e.target,topTarget:e.topTarget,cancelBubble:!1,offsetX:t.zrX,offsetY:t.zrY,gestureEvent:t.gestureEvent,pinchX:t.pinchX,pinchY:t.pinchY,pinchScale:t.pinchScale,wheelDelta:t.zrDelta,zrByTouch:t.zrByTouch,which:t.which,stop:wL}}function wL(){la(this.event)}var TL=(function(r){k(e,r);function e(){var t=r!==null&&r.apply(this,arguments)||this;return t.handler=null,t}return e.prototype.dispose=function(){},e.prototype.setCursor=function(){},e})(lr),Oo=(function(){function r(e,t){this.x=e,this.y=t}return r})(),AL=["click","dblclick","mousewheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],qh=new ht(0,0,0,0),Gw=(function(r){k(e,r);function e(t,a,n,i,o){var s=r.call(this)||this;return s._hovered=new Oo(0,0),s.storage=t,s.painter=a,s.painterRoot=i,s._pointerSize=o,n=n||new TL,s.proxy=null,s.setHandlerProxy(n),s._draggingMgr=new lL(s),s}return e.prototype.setHandlerProxy=function(t){this.proxy&&this.proxy.dispose(),t&&(D(AL,function(a){t.on&&t.on(a,this[a],this)},this),t.handler=this),this.proxy=t},e.prototype.mousemove=function(t){var a=t.zrX,n=t.zrY,i=Fw(this,a,n),o=this._hovered,s=o.target;s&&!s.__zr&&(o=this.findHover(o.x,o.y),s=o.target);var l=this._hovered=i?new Oo(a,n):this.findHover(a,n),u=l.target,f=this.proxy;f.setCursor&&f.setCursor(u?u.cursor:"default"),s&&u!==s&&this.dispatchToElement(o,"mouseout",t),this.dispatchToElement(l,"mousemove",t),u&&u!==s&&this.dispatchToElement(l,"mouseover",t)},e.prototype.mouseout=function(t){var a=t.zrEventControl;a!=="only_globalout"&&this.dispatchToElement(this._hovered,"mouseout",t),a!=="no_globalout"&&this.trigger("globalout",{type:"globalout",event:t})},e.prototype.resize=function(){this._hovered=new Oo(0,0)},e.prototype.dispatch=function(t,a){var n=this[t];n&&n.call(this,a)},e.prototype.dispose=function(){this.proxy.dispose(),this.storage=null,this.proxy=null,this.painter=null},e.prototype.setCursorStyle=function(t){var a=this.proxy;a.setCursor&&a.setCursor(t)},e.prototype.dispatchToElement=function(t,a,n){t=t||{};var i=t.target;if(!(i&&i.silent)){for(var o="on"+a,s=bL(a,t,n);i&&(i[o]&&(s.cancelBubble=!!i[o].call(i,s)),i.trigger(a,s),i=i.__hostTarget?i.__hostTarget:i.parent,!s.cancelBubble););s.cancelBubble||(this.trigger(a,s),this.painter&&this.painter.eachOtherLayer&&this.painter.eachOtherLayer(function(l){typeof l[o]=="function"&&l[o].call(l,s),l.trigger&&l.trigger(a,s)}))}},e.prototype.findHover=function(t,a,n){var i=this.storage.getDisplayList(),o=new Oo(t,a);if(Im(i,o,t,a,n),this._pointerSize&&!o.target){for(var s=[],l=this._pointerSize,u=l/2,f=new ht(t-u,a-u,l,l),h=i.length-1;h>=0;h--){var v=i[h];v!==n&&!v.ignore&&!v.ignoreCoarsePointer&&(!v.parent||!v.parent.ignoreCoarsePointer)&&(qh.copy(v.getBoundingRect()),v.transform&&qh.applyTransform(v.transform),qh.intersect(f)&&s.push(v))}if(s.length)for(var c=4,p=Math.PI/12,d=Math.PI*2,g=0;g4)return;this._downPoint=null}this.dispatchToElement(i,r,e)}});function CL(r,e,t){if(r[r.rectHover?"rectContain":"contain"](e,t)){for(var a=r,n=void 0,i=!1;a;){if(a.ignoreClip&&(i=!0),!i){var o=a.getClipPath();if(o&&!o.contain(e,t))return!1}a.silent&&(n=!0);var s=a.__hostTarget;a=s||a.parent}return n?zw:!0}return!1}function Im(r,e,t,a,n){for(var i=r.length-1;i>=0;i--){var o=r[i],s=void 0;if(o!==n&&!o.ignore&&(s=CL(o,t,a))&&(!e.topTarget&&(e.topTarget=o),s!==zw)){e.target=o;break}}}function Fw(r,e,t){var a=r.painter;return e<0||e>a.getWidth()||t<0||t>a.getHeight()}var Hw=32,No=7;function DL(r){for(var e=0;r>=Hw;)e|=r&1,r>>=1;return r+e}function Lm(r,e,t,a){var n=e+1;if(n===t)return 1;if(a(r[n++],r[e])<0){for(;n=0;)n++;return n-e}function ML(r,e,t){for(t--;e>>1,n(i,r[l])<0?s=l:o=l+1;var u=a-o;switch(u){case 3:r[o+3]=r[o+2];case 2:r[o+2]=r[o+1];case 1:r[o+1]=r[o];break;default:for(;u>0;)r[o+u]=r[o+u-1],u--}r[o]=i}}function Kh(r,e,t,a,n,i){var o=0,s=0,l=1;if(i(r,e[t+n])>0){for(s=a-n;l0;)o=l,l=(l<<1)+1,l<=0&&(l=s);l>s&&(l=s),o+=n,l+=n}else{for(s=n+1;ls&&(l=s);var u=o;o=n-l,l=n-u}for(o++;o>>1);i(r,e[t+f])>0?o=f+1:l=f}return l}function Qh(r,e,t,a,n,i){var o=0,s=0,l=1;if(i(r,e[t+n])<0){for(s=n+1;ls&&(l=s);var u=o;o=n-l,l=n-u}else{for(s=a-n;l=0;)o=l,l=(l<<1)+1,l<=0&&(l=s);l>s&&(l=s),o+=n,l+=n}for(o++;o>>1);i(r,e[t+f])<0?l=f:o=f+1}return l}function IL(r,e){var t=No,a,n,i=0,o=[];a=[],n=[];function s(c,p){a[i]=c,n[i]=p,i+=1}function l(){for(;i>1;){var c=i-2;if(c>=1&&n[c-1]<=n[c]+n[c+1]||c>=2&&n[c-2]<=n[c]+n[c-1])n[c-1]n[c+1])break;f(c)}}function u(){for(;i>1;){var c=i-2;c>0&&n[c-1]=No||w>=No);if(T)break;b<0&&(b=0),b+=2}if(t=b,t<1&&(t=1),p===1){for(y=0;y=0;y--)r[x+y]=r[b+y];r[S]=o[_];return}for(var w=t;;){var T=0,A=0,C=!1;do if(e(o[_],r[m])<0){if(r[S--]=r[m--],T++,A=0,--p===0){C=!0;break}}else if(r[S--]=o[_--],A++,T=0,--g===1){C=!0;break}while((T|A)=0;y--)r[x+y]=r[b+y];if(p===0){C=!0;break}}if(r[S--]=o[_--],--g===1){C=!0;break}if(A=g-Kh(r[m],o,0,g,g-1,e),A!==0){for(S-=A,_-=A,g-=A,x=S+1,b=_+1,y=0;y=No||A>=No);if(C)break;w<0&&(w=0),w+=2}if(t=w,t<1&&(t=1),g===1){for(S-=p,m-=p,x=S+1,b=m+1,y=p-1;y>=0;y--)r[x+y]=r[b+y];r[S]=o[_]}else{if(g===0)throw new Error;for(b=S-(g-1),y=0;ys&&(l=s),Pm(r,t,t+l,t+i,e),i=l}o.pushRun(t,i),o.mergeRuns(),n-=i,t+=i}while(n!==0);o.forceMergeRuns()}}var Fe=1,ls=2,Gi=4,Rm=!1;function Jh(){Rm||(Rm=!0,console.warn("z / z2 / zlevel of displayable is invalid, which may cause unexpected errors"))}function Em(r,e){return r.zlevel===e.zlevel?r.z===e.z?r.z2-e.z2:r.z-e.z:r.zlevel-e.zlevel}var LL=(function(){function r(){this._roots=[],this._displayList=[],this._displayListLen=0,this.displayableSortFunc=Em}return r.prototype.traverse=function(e,t){for(var a=0;a0&&(f.__clipPaths=[]),isNaN(f.z)&&(Jh(),f.z=0),isNaN(f.z2)&&(Jh(),f.z2=0),isNaN(f.zlevel)&&(Jh(),f.zlevel=0),this._displayList[this._displayListLen++]=f}var h=e.getDecalElement&&e.getDecalElement();h&&this._updateAndAddDisplayable(h,t,a);var v=e.getTextGuideLine();v&&this._updateAndAddDisplayable(v,t,a);var c=e.getTextContent();c&&this._updateAndAddDisplayable(c,t,a)}},r.prototype.addRoot=function(e){e.__zr&&e.__zr.storage===this||this._roots.push(e)},r.prototype.delRoot=function(e){if(e instanceof Array){for(var t=0,a=e.length;t=0&&this._roots.splice(n,1)},r.prototype.delAllRoots=function(){this._roots=[],this._displayList=[],this._displayListLen=0},r.prototype.getRoots=function(){return this._roots},r.prototype.dispose=function(){this._displayList=null,this._roots=null},r})(),lf;lf=yt.hasGlobalWindow&&(window.requestAnimationFrame&&window.requestAnimationFrame.bind(window)||window.msRequestAnimationFrame&&window.msRequestAnimationFrame.bind(window)||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame)||function(r){return setTimeout(r,16)};var xs={linear:function(r){return r},quadraticIn:function(r){return r*r},quadraticOut:function(r){return r*(2-r)},quadraticInOut:function(r){return(r*=2)<1?.5*r*r:-.5*(--r*(r-2)-1)},cubicIn:function(r){return r*r*r},cubicOut:function(r){return--r*r*r+1},cubicInOut:function(r){return(r*=2)<1?.5*r*r*r:.5*((r-=2)*r*r+2)},quarticIn:function(r){return r*r*r*r},quarticOut:function(r){return 1- --r*r*r*r},quarticInOut:function(r){return(r*=2)<1?.5*r*r*r*r:-.5*((r-=2)*r*r*r-2)},quinticIn:function(r){return r*r*r*r*r},quinticOut:function(r){return--r*r*r*r*r+1},quinticInOut:function(r){return(r*=2)<1?.5*r*r*r*r*r:.5*((r-=2)*r*r*r*r+2)},sinusoidalIn:function(r){return 1-Math.cos(r*Math.PI/2)},sinusoidalOut:function(r){return Math.sin(r*Math.PI/2)},sinusoidalInOut:function(r){return .5*(1-Math.cos(Math.PI*r))},exponentialIn:function(r){return r===0?0:Math.pow(1024,r-1)},exponentialOut:function(r){return r===1?1:1-Math.pow(2,-10*r)},exponentialInOut:function(r){return r===0?0:r===1?1:(r*=2)<1?.5*Math.pow(1024,r-1):.5*(-Math.pow(2,-10*(r-1))+2)},circularIn:function(r){return 1-Math.sqrt(1-r*r)},circularOut:function(r){return Math.sqrt(1- --r*r)},circularInOut:function(r){return(r*=2)<1?-.5*(Math.sqrt(1-r*r)-1):.5*(Math.sqrt(1-(r-=2)*r)+1)},elasticIn:function(r){var e,t=.1,a=.4;return r===0?0:r===1?1:(!t||t<1?(t=1,e=a/4):e=a*Math.asin(1/t)/(2*Math.PI),-(t*Math.pow(2,10*(r-=1))*Math.sin((r-e)*(2*Math.PI)/a)))},elasticOut:function(r){var e,t=.1,a=.4;return r===0?0:r===1?1:(!t||t<1?(t=1,e=a/4):e=a*Math.asin(1/t)/(2*Math.PI),t*Math.pow(2,-10*r)*Math.sin((r-e)*(2*Math.PI)/a)+1)},elasticInOut:function(r){var e,t=.1,a=.4;return r===0?0:r===1?1:(!t||t<1?(t=1,e=a/4):e=a*Math.asin(1/t)/(2*Math.PI),(r*=2)<1?-.5*(t*Math.pow(2,10*(r-=1))*Math.sin((r-e)*(2*Math.PI)/a)):t*Math.pow(2,-10*(r-=1))*Math.sin((r-e)*(2*Math.PI)/a)*.5+1)},backIn:function(r){var e=1.70158;return r*r*((e+1)*r-e)},backOut:function(r){var e=1.70158;return--r*r*((e+1)*r+e)+1},backInOut:function(r){var e=2.5949095;return(r*=2)<1?.5*(r*r*((e+1)*r-e)):.5*((r-=2)*r*((e+1)*r+e)+2)},bounceIn:function(r){return 1-xs.bounceOut(1-r)},bounceOut:function(r){return r<1/2.75?7.5625*r*r:r<2/2.75?7.5625*(r-=1.5/2.75)*r+.75:r<2.5/2.75?7.5625*(r-=2.25/2.75)*r+.9375:7.5625*(r-=2.625/2.75)*r+.984375},bounceInOut:function(r){return r<.5?xs.bounceIn(r*2)*.5:xs.bounceOut(r*2-1)*.5+.5}},Ol=Math.pow,Ha=Math.sqrt,uf=1e-8,Ww=1e-4,km=Ha(3),Nl=1/3,Er=ui(),er=ui(),Ki=ui();function Na(r){return r>-uf&&ruf||r<-uf}function ee(r,e,t,a,n){var i=1-n;return i*i*(i*r+3*n*e)+n*n*(n*a+3*i*t)}function Om(r,e,t,a,n){var i=1-n;return 3*(((e-r)*i+2*(t-e)*n)*i+(a-t)*n*n)}function ff(r,e,t,a,n,i){var o=a+3*(e-t)-r,s=3*(t-e*2+r),l=3*(e-r),u=r-n,f=s*s-3*o*l,h=s*l-9*o*u,v=l*l-3*s*u,c=0;if(Na(f)&&Na(h))if(Na(s))i[0]=0;else{var p=-l/s;p>=0&&p<=1&&(i[c++]=p)}else{var d=h*h-4*f*v;if(Na(d)){var g=h/f,p=-s/o+g,y=-g/2;p>=0&&p<=1&&(i[c++]=p),y>=0&&y<=1&&(i[c++]=y)}else if(d>0){var m=Ha(d),_=f*s+1.5*o*(-h+m),S=f*s+1.5*o*(-h-m);_<0?_=-Ol(-_,Nl):_=Ol(_,Nl),S<0?S=-Ol(-S,Nl):S=Ol(S,Nl);var p=(-s-(_+S))/(3*o);p>=0&&p<=1&&(i[c++]=p)}else{var b=(2*f*s-3*o*h)/(2*Ha(f*f*f)),x=Math.acos(b)/3,w=Ha(f),T=Math.cos(x),p=(-s-2*w*T)/(3*o),y=(-s+w*(T+km*Math.sin(x)))/(3*o),A=(-s+w*(T-km*Math.sin(x)))/(3*o);p>=0&&p<=1&&(i[c++]=p),y>=0&&y<=1&&(i[c++]=y),A>=0&&A<=1&&(i[c++]=A)}}return c}function Yw(r,e,t,a,n){var i=6*t-12*e+6*r,o=9*e+3*a-3*r-9*t,s=3*e-3*r,l=0;if(Na(o)){if(Uw(i)){var u=-s/i;u>=0&&u<=1&&(n[l++]=u)}}else{var f=i*i-4*o*s;if(Na(f))n[0]=-i/(2*o);else if(f>0){var h=Ha(f),u=(-i+h)/(2*o),v=(-i-h)/(2*o);u>=0&&u<=1&&(n[l++]=u),v>=0&&v<=1&&(n[l++]=v)}}return l}function Za(r,e,t,a,n,i){var o=(e-r)*n+r,s=(t-e)*n+e,l=(a-t)*n+t,u=(s-o)*n+o,f=(l-s)*n+s,h=(f-u)*n+u;i[0]=r,i[1]=o,i[2]=u,i[3]=h,i[4]=h,i[5]=f,i[6]=l,i[7]=a}function $w(r,e,t,a,n,i,o,s,l,u,f){var h,v=.005,c=1/0,p,d,g,y;Er[0]=l,Er[1]=u;for(var m=0;m<1;m+=.05)er[0]=ee(r,t,n,o,m),er[1]=ee(e,a,i,s,m),g=$n(Er,er),g=0&&g=0&&u<=1&&(n[l++]=u)}}else{var f=o*o-4*i*s;if(Na(f)){var u=-o/(2*i);u>=0&&u<=1&&(n[l++]=u)}else if(f>0){var h=Ha(f),u=(-o+h)/(2*i),v=(-o-h)/(2*i);u>=0&&u<=1&&(n[l++]=u),v>=0&&v<=1&&(n[l++]=v)}}return l}function Xw(r,e,t){var a=r+t-2*e;return a===0?.5:(r-e)/a}function Bs(r,e,t,a,n){var i=(e-r)*a+r,o=(t-e)*a+e,s=(o-i)*a+i;n[0]=r,n[1]=i,n[2]=s,n[3]=s,n[4]=o,n[5]=t}function Zw(r,e,t,a,n,i,o,s,l){var u,f=.005,h=1/0;Er[0]=o,Er[1]=s;for(var v=0;v<1;v+=.05){er[0]=se(r,t,n,v),er[1]=se(e,a,i,v);var c=$n(Er,er);c=0&&c=1?1:ff(0,a,i,1,l,s)&&ee(0,n,o,1,s[0])}}}var OL=(function(){function r(e){this._inited=!1,this._startTime=0,this._pausedTime=0,this._paused=!1,this._life=e.life||1e3,this._delay=e.delay||0,this.loop=e.loop||!1,this.onframe=e.onframe||$t,this.ondestroy=e.ondestroy||$t,this.onrestart=e.onrestart||$t,e.easing&&this.setEasing(e.easing)}return r.prototype.step=function(e,t){if(this._inited||(this._startTime=e+this._delay,this._inited=!0),this._paused){this._pausedTime+=t;return}var a=this._life,n=e-this._startTime-this._pausedTime,i=n/a;i<0&&(i=0),i=Math.min(i,1);var o=this.easingFunc,s=o?o(i):i;if(this.onframe(s),i===1)if(this.loop){var l=n%a;this._startTime=e-l,this._pausedTime=0,this.onrestart()}else return!0;return!1},r.prototype.pause=function(){this._paused=!0},r.prototype.resume=function(){this._paused=!1},r.prototype.setEasing=function(e){this.easing=e,this.easingFunc=Q(e)?e:xs[e]||_g(e)},r})(),qw=(function(){function r(e){this.value=e}return r})(),NL=(function(){function r(){this._len=0}return r.prototype.insert=function(e){var t=new qw(e);return this.insertEntry(t),t},r.prototype.insertEntry=function(e){this.head?(this.tail.next=e,e.prev=this.tail,e.next=null,this.tail=e):this.head=this.tail=e,this._len++},r.prototype.remove=function(e){var t=e.prev,a=e.next;t?t.next=a:this.head=a,a?a.prev=t:this.tail=t,e.next=e.prev=null,this._len--},r.prototype.len=function(){return this._len},r.prototype.clear=function(){this.head=this.tail=null,this._len=0},r})(),fl=(function(){function r(e){this._list=new NL,this._maxSize=10,this._map={},this._maxSize=e}return r.prototype.put=function(e,t){var a=this._list,n=this._map,i=null;if(n[e]==null){var o=a.len(),s=this._lastRemovedEntry;if(o>=this._maxSize&&o>0){var l=a.head;a.remove(l),delete n[l.key],i=l.value,this._lastRemovedEntry=l}s?s.value=t:s=new qw(t),s.key=e,a.insertEntry(s),n[e]=s}return i},r.prototype.get=function(e){var t=this._map[e],a=this._list;if(t!=null)return t!==a.tail&&(a.remove(t),a.insertEntry(t)),t.value},r.prototype.clear=function(){this._list.clear(),this._map={}},r.prototype.len=function(){return this._list.len()},r})(),Nm={transparent:[0,0,0,0],aliceblue:[240,248,255,1],antiquewhite:[250,235,215,1],aqua:[0,255,255,1],aquamarine:[127,255,212,1],azure:[240,255,255,1],beige:[245,245,220,1],bisque:[255,228,196,1],black:[0,0,0,1],blanchedalmond:[255,235,205,1],blue:[0,0,255,1],blueviolet:[138,43,226,1],brown:[165,42,42,1],burlywood:[222,184,135,1],cadetblue:[95,158,160,1],chartreuse:[127,255,0,1],chocolate:[210,105,30,1],coral:[255,127,80,1],cornflowerblue:[100,149,237,1],cornsilk:[255,248,220,1],crimson:[220,20,60,1],cyan:[0,255,255,1],darkblue:[0,0,139,1],darkcyan:[0,139,139,1],darkgoldenrod:[184,134,11,1],darkgray:[169,169,169,1],darkgreen:[0,100,0,1],darkgrey:[169,169,169,1],darkkhaki:[189,183,107,1],darkmagenta:[139,0,139,1],darkolivegreen:[85,107,47,1],darkorange:[255,140,0,1],darkorchid:[153,50,204,1],darkred:[139,0,0,1],darksalmon:[233,150,122,1],darkseagreen:[143,188,143,1],darkslateblue:[72,61,139,1],darkslategray:[47,79,79,1],darkslategrey:[47,79,79,1],darkturquoise:[0,206,209,1],darkviolet:[148,0,211,1],deeppink:[255,20,147,1],deepskyblue:[0,191,255,1],dimgray:[105,105,105,1],dimgrey:[105,105,105,1],dodgerblue:[30,144,255,1],firebrick:[178,34,34,1],floralwhite:[255,250,240,1],forestgreen:[34,139,34,1],fuchsia:[255,0,255,1],gainsboro:[220,220,220,1],ghostwhite:[248,248,255,1],gold:[255,215,0,1],goldenrod:[218,165,32,1],gray:[128,128,128,1],green:[0,128,0,1],greenyellow:[173,255,47,1],grey:[128,128,128,1],honeydew:[240,255,240,1],hotpink:[255,105,180,1],indianred:[205,92,92,1],indigo:[75,0,130,1],ivory:[255,255,240,1],khaki:[240,230,140,1],lavender:[230,230,250,1],lavenderblush:[255,240,245,1],lawngreen:[124,252,0,1],lemonchiffon:[255,250,205,1],lightblue:[173,216,230,1],lightcoral:[240,128,128,1],lightcyan:[224,255,255,1],lightgoldenrodyellow:[250,250,210,1],lightgray:[211,211,211,1],lightgreen:[144,238,144,1],lightgrey:[211,211,211,1],lightpink:[255,182,193,1],lightsalmon:[255,160,122,1],lightseagreen:[32,178,170,1],lightskyblue:[135,206,250,1],lightslategray:[119,136,153,1],lightslategrey:[119,136,153,1],lightsteelblue:[176,196,222,1],lightyellow:[255,255,224,1],lime:[0,255,0,1],limegreen:[50,205,50,1],linen:[250,240,230,1],magenta:[255,0,255,1],maroon:[128,0,0,1],mediumaquamarine:[102,205,170,1],mediumblue:[0,0,205,1],mediumorchid:[186,85,211,1],mediumpurple:[147,112,219,1],mediumseagreen:[60,179,113,1],mediumslateblue:[123,104,238,1],mediumspringgreen:[0,250,154,1],mediumturquoise:[72,209,204,1],mediumvioletred:[199,21,133,1],midnightblue:[25,25,112,1],mintcream:[245,255,250,1],mistyrose:[255,228,225,1],moccasin:[255,228,181,1],navajowhite:[255,222,173,1],navy:[0,0,128,1],oldlace:[253,245,230,1],olive:[128,128,0,1],olivedrab:[107,142,35,1],orange:[255,165,0,1],orangered:[255,69,0,1],orchid:[218,112,214,1],palegoldenrod:[238,232,170,1],palegreen:[152,251,152,1],paleturquoise:[175,238,238,1],palevioletred:[219,112,147,1],papayawhip:[255,239,213,1],peachpuff:[255,218,185,1],peru:[205,133,63,1],pink:[255,192,203,1],plum:[221,160,221,1],powderblue:[176,224,230,1],purple:[128,0,128,1],red:[255,0,0,1],rosybrown:[188,143,143,1],royalblue:[65,105,225,1],saddlebrown:[139,69,19,1],salmon:[250,128,114,1],sandybrown:[244,164,96,1],seagreen:[46,139,87,1],seashell:[255,245,238,1],sienna:[160,82,45,1],silver:[192,192,192,1],skyblue:[135,206,235,1],slateblue:[106,90,205,1],slategray:[112,128,144,1],slategrey:[112,128,144,1],snow:[255,250,250,1],springgreen:[0,255,127,1],steelblue:[70,130,180,1],tan:[210,180,140,1],teal:[0,128,128,1],thistle:[216,191,216,1],tomato:[255,99,71,1],turquoise:[64,224,208,1],violet:[238,130,238,1],wheat:[245,222,179,1],white:[255,255,255,1],whitesmoke:[245,245,245,1],yellow:[255,255,0,1],yellowgreen:[154,205,50,1]};function _r(r){return r=Math.round(r),r<0?0:r>255?255:r}function BL(r){return r=Math.round(r),r<0?0:r>360?360:r}function Vs(r){return r<0?0:r>1?1:r}function jh(r){var e=r;return e.length&&e.charAt(e.length-1)==="%"?_r(parseFloat(e)/100*255):_r(parseInt(e,10))}function Xn(r){var e=r;return e.length&&e.charAt(e.length-1)==="%"?Vs(parseFloat(e)/100):Vs(parseFloat(e))}function tv(r,e,t){return t<0?t+=1:t>1&&(t-=1),t*6<1?r+(e-r)*t*6:t*2<1?e:t*3<2?r+(e-r)*(2/3-t)*6:r}function Ba(r,e,t){return r+(e-r)*t}function Ke(r,e,t,a,n){return r[0]=e,r[1]=t,r[2]=a,r[3]=n,r}function Lp(r,e){return r[0]=e[0],r[1]=e[1],r[2]=e[2],r[3]=e[3],r}var Kw=new fl(20),Bl=null;function _i(r,e){Bl&&Lp(Bl,e),Bl=Kw.put(r,Bl||e.slice())}function Ue(r,e){if(r){e=e||[];var t=Kw.get(r);if(t)return Lp(e,t);r=r+"";var a=r.replace(/ /g,"").toLowerCase();if(a in Nm)return Lp(e,Nm[a]),_i(r,e),e;var n=a.length;if(a.charAt(0)==="#"){if(n===4||n===5){var i=parseInt(a.slice(1,4),16);if(!(i>=0&&i<=4095)){Ke(e,0,0,0,1);return}return Ke(e,(i&3840)>>4|(i&3840)>>8,i&240|(i&240)>>4,i&15|(i&15)<<4,n===5?parseInt(a.slice(4),16)/15:1),_i(r,e),e}else if(n===7||n===9){var i=parseInt(a.slice(1,7),16);if(!(i>=0&&i<=16777215)){Ke(e,0,0,0,1);return}return Ke(e,(i&16711680)>>16,(i&65280)>>8,i&255,n===9?parseInt(a.slice(7),16)/255:1),_i(r,e),e}return}var o=a.indexOf("("),s=a.indexOf(")");if(o!==-1&&s+1===n){var l=a.substr(0,o),u=a.substr(o+1,s-(o+1)).split(","),f=1;switch(l){case"rgba":if(u.length!==4)return u.length===3?Ke(e,+u[0],+u[1],+u[2],1):Ke(e,0,0,0,1);f=Xn(u.pop());case"rgb":if(u.length>=3)return Ke(e,jh(u[0]),jh(u[1]),jh(u[2]),u.length===3?f:Xn(u[3])),_i(r,e),e;Ke(e,0,0,0,1);return;case"hsla":if(u.length!==4){Ke(e,0,0,0,1);return}return u[3]=Xn(u[3]),Pp(u,e),_i(r,e),e;case"hsl":if(u.length!==3){Ke(e,0,0,0,1);return}return Pp(u,e),_i(r,e),e;default:return}}Ke(e,0,0,0,1)}}function Pp(r,e){var t=(parseFloat(r[0])%360+360)%360/360,a=Xn(r[1]),n=Xn(r[2]),i=n<=.5?n*(a+1):n+a-n*a,o=n*2-i;return e=e||[],Ke(e,_r(tv(o,i,t+1/3)*255),_r(tv(o,i,t)*255),_r(tv(o,i,t-1/3)*255),1),r.length===4&&(e[3]=r[3]),e}function VL(r){if(r){var e=r[0]/255,t=r[1]/255,a=r[2]/255,n=Math.min(e,t,a),i=Math.max(e,t,a),o=i-n,s=(i+n)/2,l,u;if(o===0)l=0,u=0;else{s<.5?u=o/(i+n):u=o/(2-i-n);var f=((i-e)/6+o/2)/o,h=((i-t)/6+o/2)/o,v=((i-a)/6+o/2)/o;e===i?l=v-h:t===i?l=1/3+f-v:a===i&&(l=2/3+h-f),l<0&&(l+=1),l>1&&(l-=1)}var c=[l*360,u,s];return r[3]!=null&&c.push(r[3]),c}}function Rp(r,e){var t=Ue(r);if(t){for(var a=0;a<3;a++)e<0?t[a]=t[a]*(1-e)|0:t[a]=(255-t[a])*e+t[a]|0,t[a]>255?t[a]=255:t[a]<0&&(t[a]=0);return ia(t,t.length===4?"rgba":"rgb")}}function ev(r,e,t){if(!(!(e&&e.length)||!(r>=0&&r<=1))){t=t||[];var a=r*(e.length-1),n=Math.floor(a),i=Math.ceil(a),o=e[n],s=e[i],l=a-n;return t[0]=_r(Ba(o[0],s[0],l)),t[1]=_r(Ba(o[1],s[1],l)),t[2]=_r(Ba(o[2],s[2],l)),t[3]=Vs(Ba(o[3],s[3],l)),t}}function zL(r,e,t){if(!(!(e&&e.length)||!(r>=0&&r<=1))){var a=r*(e.length-1),n=Math.floor(a),i=Math.ceil(a),o=Ue(e[n]),s=Ue(e[i]),l=a-n,u=ia([_r(Ba(o[0],s[0],l)),_r(Ba(o[1],s[1],l)),_r(Ba(o[2],s[2],l)),Vs(Ba(o[3],s[3],l))],"rgba");return t?{color:u,leftIndex:n,rightIndex:i,value:a}:u}}function bs(r,e,t,a){var n=Ue(r);if(r)return n=VL(n),e!=null&&(n[0]=BL(e)),t!=null&&(n[1]=Xn(t)),a!=null&&(n[2]=Xn(a)),ia(Pp(n),"rgba")}function hf(r,e){var t=Ue(r);if(t&&e!=null)return t[3]=Vs(e),ia(t,"rgba")}function ia(r,e){if(!(!r||!r.length)){var t=r[0]+","+r[1]+","+r[2];return(e==="rgba"||e==="hsva"||e==="hsla")&&(t+=","+r[3]),e+"("+t+")"}}function vf(r,e){var t=Ue(r);return t?(.299*t[0]+.587*t[1]+.114*t[2])*t[3]/255+(1-t[3])*e:0}var Bm=new fl(100);function Ep(r){if(Y(r)){var e=Bm.get(r);return e||(e=Rp(r,-.1),Bm.put(r,e)),e}else if(nh(r)){var t=V({},r);return t.colorStops=G(r.colorStops,function(a){return{offset:a.offset,color:Rp(a.color,-.1)}}),t}return r}var cf=Math.round;function zs(r){var e;if(!r||r==="transparent")r="none";else if(typeof r=="string"&&r.indexOf("rgba")>-1){var t=Ue(r);t&&(r="rgb("+t[0]+","+t[1]+","+t[2]+")",e=t[3])}return{color:r,opacity:e??1}}var Vm=1e-4;function Va(r){return r-Vm}function Vl(r){return cf(r*1e3)/1e3}function kp(r){return cf(r*1e4)/1e4}function GL(r){return"matrix("+Vl(r[0])+","+Vl(r[1])+","+Vl(r[2])+","+Vl(r[3])+","+kp(r[4])+","+kp(r[5])+")"}var FL={left:"start",right:"end",center:"middle",middle:"middle"};function HL(r,e,t){return t==="top"?r+=e/2:t==="bottom"&&(r-=e/2),r}function WL(r){return r&&(r.shadowBlur||r.shadowOffsetX||r.shadowOffsetY)}function UL(r){var e=r.style,t=r.getGlobalScale();return[e.shadowColor,(e.shadowBlur||0).toFixed(2),(e.shadowOffsetX||0).toFixed(2),(e.shadowOffsetY||0).toFixed(2),t[0],t[1]].join(",")}function Qw(r){return r&&!!r.image}function YL(r){return r&&!!r.svgElement}function Sg(r){return Qw(r)||YL(r)}function Jw(r){return r.type==="linear"}function jw(r){return r.type==="radial"}function tT(r){return r&&(r.type==="linear"||r.type==="radial")}function sh(r){return"url(#"+r+")"}function eT(r){var e=r.getGlobalScale(),t=Math.max(e[0],e[1]);return Math.max(Math.ceil(Math.log(t)/Math.log(10)),1)}function rT(r){var e=r.x||0,t=r.y||0,a=(r.rotation||0)*Bu,n=st(r.scaleX,1),i=st(r.scaleY,1),o=r.skewX||0,s=r.skewY||0,l=[];return(e||t)&&l.push("translate("+e+"px,"+t+"px)"),a&&l.push("rotate("+a+")"),(n!==1||i!==1)&&l.push("scale("+n+","+i+")"),(o||s)&&l.push("skew("+cf(o*Bu)+"deg, "+cf(s*Bu)+"deg)"),l.join(" ")}var $L=(function(){return yt.hasGlobalWindow&&Q(window.btoa)?function(r){return window.btoa(unescape(encodeURIComponent(r)))}:typeof Buffer<"u"?function(r){return Buffer.from(r).toString("base64")}:function(r){return null}})(),Op=Array.prototype.slice;function Jr(r,e,t){return(e-r)*t+r}function rv(r,e,t,a){for(var n=e.length,i=0;ia?e:r,i=Math.min(t,a),o=n[i-1]||{color:[0,0,0,0],offset:0},s=i;so;if(s)a.length=o;else for(var l=i;l=1},r.prototype.getAdditiveTrack=function(){return this._additiveTrack},r.prototype.addKeyframe=function(e,t,a){this._needsSort=!0;var n=this.keyframes,i=n.length,o=!1,s=Gm,l=t;if(me(t)){var u=KL(t);s=u,(u===1&&!wt(t[0])||u===2&&!wt(t[0][0]))&&(o=!0)}else if(wt(t)&&!Os(t))s=Gl;else if(Y(t))if(!isNaN(+t))s=Gl;else{var f=Ue(t);f&&(l=f,s=us)}else if(nh(t)){var h=V({},l);h.colorStops=G(t.colorStops,function(c){return{offset:c.offset,color:Ue(c.color)}}),Jw(t)?s=Np:jw(t)&&(s=Bp),l=h}i===0?this.valType=s:(s!==this.valType||s===Gm)&&(o=!0),this.discrete=this.discrete||o;var v={time:e,value:l,rawValue:t,percent:0};return a&&(v.easing=a,v.easingFunc=Q(a)?a:xs[a]||_g(a)),n.push(v),v},r.prototype.prepare=function(e,t){var a=this.keyframes;this._needsSort&&a.sort(function(d,g){return d.time-g.time});for(var n=this.valType,i=a.length,o=a[i-1],s=this.discrete,l=Fl(n),u=Fm(n),f=0;f=0&&!(o[f].percent<=t);f--);f=v(f,s-2)}else{for(f=h;ft);f++);f=v(f-1,s-2)}p=o[f+1],c=o[f]}if(c&&p){this._lastFr=f,this._lastFrP=t;var g=p.percent-c.percent,y=g===0?1:v((t-c.percent)/g,1);p.easingFunc&&(y=p.easingFunc(y));var m=a?this._additiveValue:u?Bo:e[l];if((Fl(i)||u)&&!m&&(m=this._additiveValue=[]),this.discrete)e[l]=y<1?c.rawValue:p.rawValue;else if(Fl(i))i===Hu?rv(m,c[n],p[n],y):XL(m,c[n],p[n],y);else if(Fm(i)){var _=c[n],S=p[n],b=i===Np;e[l]={type:b?"linear":"radial",x:Jr(_.x,S.x,y),y:Jr(_.y,S.y,y),colorStops:G(_.colorStops,function(w,T){var A=S.colorStops[T];return{offset:Jr(w.offset,A.offset,y),color:Fu(rv([],w.color,A.color,y))}}),global:S.global},b?(e[l].x2=Jr(_.x2,S.x2,y),e[l].y2=Jr(_.y2,S.y2,y)):e[l].r=Jr(_.r,S.r,y)}else if(u)rv(m,c[n],p[n],y),a||(e[l]=Fu(m));else{var x=Jr(c[n],p[n],y);a?this._additiveValue=x:e[l]=x}a&&this._addToTarget(e)}}},r.prototype._addToTarget=function(e){var t=this.valType,a=this.propName,n=this._additiveValue;t===Gl?e[a]=e[a]+n:t===us?(Ue(e[a],Bo),zl(Bo,Bo,n,1),e[a]=Fu(Bo)):t===Hu?zl(e[a],e[a],n,1):t===aT&&zm(e[a],e[a],n,1)},r})(),xg=(function(){function r(e,t,a,n){if(this._tracks={},this._trackKeys=[],this._maxTime=0,this._started=0,this._clip=null,this._target=e,this._loop=t,t&&n){vg("Can' use additive animation on looped animation.");return}this._additiveAnimators=n,this._allowDiscrete=a}return r.prototype.getMaxTime=function(){return this._maxTime},r.prototype.getDelay=function(){return this._delay},r.prototype.getLoop=function(){return this._loop},r.prototype.getTarget=function(){return this._target},r.prototype.changeTarget=function(e){this._target=e},r.prototype.when=function(e,t,a){return this.whenWithKeys(e,t,_t(t),a)},r.prototype.whenWithKeys=function(e,t,a,n){for(var i=this._tracks,o=0;o0&&l.addKeyframe(0,ws(u),n),this._trackKeys.push(s)}l.addKeyframe(e,ws(t[s]),n)}return this._maxTime=Math.max(this._maxTime,e),this},r.prototype.pause=function(){this._clip.pause(),this._paused=!0},r.prototype.resume=function(){this._clip.resume(),this._paused=!1},r.prototype.isPaused=function(){return!!this._paused},r.prototype.duration=function(e){return this._maxTime=e,this._force=!0,this},r.prototype._doneCallback=function(){this._setTracksFinished(),this._clip=null;var e=this._doneCbs;if(e)for(var t=e.length,a=0;a0)){this._started=1;for(var t=this,a=[],n=this._maxTime||0,i=0;i1){var s=o.pop();i.addKeyframe(s.time,e[n]),i.prepare(this._maxTime,i.getAdditiveTrack())}}}},r})();function $i(){return new Date().getTime()}var JL=(function(r){k(e,r);function e(t){var a=r.call(this)||this;return a._running=!1,a._time=0,a._pausedTime=0,a._pauseStart=0,a._paused=!1,t=t||{},a.stage=t.stage||{},a}return e.prototype.addClip=function(t){t.animation&&this.removeClip(t),this._head?(this._tail.next=t,t.prev=this._tail,t.next=null,this._tail=t):this._head=this._tail=t,t.animation=this},e.prototype.addAnimator=function(t){t.animation=this;var a=t.getClip();a&&this.addClip(a)},e.prototype.removeClip=function(t){if(t.animation){var a=t.prev,n=t.next;a?a.next=n:this._head=n,n?n.prev=a:this._tail=a,t.next=t.prev=t.animation=null}},e.prototype.removeAnimator=function(t){var a=t.getClip();a&&this.removeClip(a),t.animation=null},e.prototype.update=function(t){for(var a=$i()-this._pausedTime,n=a-this._time,i=this._head;i;){var o=i.next,s=i.step(a,n);s&&(i.ondestroy(),this.removeClip(i)),i=o}this._time=a,t||(this.trigger("frame",n),this.stage.update&&this.stage.update())},e.prototype._startLoop=function(){var t=this;this._running=!0;function a(){t._running&&(lf(a),!t._paused&&t.update())}lf(a)},e.prototype.start=function(){this._running||(this._time=$i(),this._pausedTime=0,this._startLoop())},e.prototype.stop=function(){this._running=!1},e.prototype.pause=function(){this._paused||(this._pauseStart=$i(),this._paused=!0)},e.prototype.resume=function(){this._paused&&(this._pausedTime+=$i()-this._pauseStart,this._paused=!1)},e.prototype.clear=function(){for(var t=this._head;t;){var a=t.next;t.prev=t.next=t.animation=null,t=a}this._head=this._tail=null},e.prototype.isFinished=function(){return this._head==null},e.prototype.animate=function(t,a){a=a||{},this.start();var n=new xg(t,a.loop);return this.addAnimator(n),n},e})(lr),jL=300,av=yt.domSupported,nv=(function(){var r=["click","dblclick","mousewheel","wheel","mouseout","mouseup","mousedown","mousemove","contextmenu"],e=["touchstart","touchend","touchmove"],t={pointerdown:1,pointerup:1,pointermove:1,pointerout:1},a=G(r,function(n){var i=n.replace("mouse","pointer");return t.hasOwnProperty(i)?i:n});return{mouse:r,touch:e,pointer:a}})(),Hm={mouse:["mousemove","mouseup"],pointer:["pointermove","pointerup"]},Wm=!1;function Vp(r){var e=r.pointerType;return e==="pen"||e==="touch"}function tP(r){r.touching=!0,r.touchTimer!=null&&(clearTimeout(r.touchTimer),r.touchTimer=null),r.touchTimer=setTimeout(function(){r.touching=!1,r.touchTimer=null},700)}function iv(r){r&&(r.zrByTouch=!0)}function eP(r,e){return Qe(r.dom,new rP(r,e),!0)}function nT(r,e){for(var t=e,a=!1;t&&t.nodeType!==9&&!(a=t.domBelongToZr||t!==e&&t===r.painterRoot);)t=t.parentNode;return a}var rP=(function(){function r(e,t){this.stopPropagation=$t,this.stopImmediatePropagation=$t,this.preventDefault=$t,this.type=t.type,this.target=this.currentTarget=e.dom,this.pointerType=t.pointerType,this.clientX=t.clientX,this.clientY=t.clientY}return r})(),pr={mousedown:function(r){r=Qe(this.dom,r),this.__mayPointerCapture=[r.zrX,r.zrY],this.trigger("mousedown",r)},mousemove:function(r){r=Qe(this.dom,r);var e=this.__mayPointerCapture;e&&(r.zrX!==e[0]||r.zrY!==e[1])&&this.__togglePointerCapture(!0),this.trigger("mousemove",r)},mouseup:function(r){r=Qe(this.dom,r),this.__togglePointerCapture(!1),this.trigger("mouseup",r)},mouseout:function(r){r=Qe(this.dom,r);var e=r.toElement||r.relatedTarget;nT(this,e)||(this.__pointerCapturing&&(r.zrEventControl="no_globalout"),this.trigger("mouseout",r))},wheel:function(r){Wm=!0,r=Qe(this.dom,r),this.trigger("mousewheel",r)},mousewheel:function(r){Wm||(r=Qe(this.dom,r),this.trigger("mousewheel",r))},touchstart:function(r){r=Qe(this.dom,r),iv(r),this.__lastTouchMoment=new Date,this.handler.processGesture(r,"start"),pr.mousemove.call(this,r),pr.mousedown.call(this,r)},touchmove:function(r){r=Qe(this.dom,r),iv(r),this.handler.processGesture(r,"change"),pr.mousemove.call(this,r)},touchend:function(r){r=Qe(this.dom,r),iv(r),this.handler.processGesture(r,"end"),pr.mouseup.call(this,r),+new Date-+this.__lastTouchMoment$m||r<-$m}var un=[],Si=[],sv=We(),lv=Math.abs,ea=(function(){function r(){}return r.prototype.getLocalTransform=function(e){return r.getLocalTransform(this,e)},r.prototype.setPosition=function(e){this.x=e[0],this.y=e[1]},r.prototype.setScale=function(e){this.scaleX=e[0],this.scaleY=e[1]},r.prototype.setSkew=function(e){this.skewX=e[0],this.skewY=e[1]},r.prototype.setOrigin=function(e){this.originX=e[0],this.originY=e[1]},r.prototype.needLocalTransform=function(){return ln(this.rotation)||ln(this.x)||ln(this.y)||ln(this.scaleX-1)||ln(this.scaleY-1)||ln(this.skewX)||ln(this.skewY)},r.prototype.updateTransform=function(){var e=this.parent&&this.parent.transform,t=this.needLocalTransform(),a=this.transform;if(!(t||e)){a&&(Ym(a),this.invTransform=null);return}a=a||We(),t?this.getLocalTransform(a):Ym(a),e&&(t?na(a,e,a):yg(a,e)),this.transform=a,this._resolveGlobalScaleRatio(a)},r.prototype._resolveGlobalScaleRatio=function(e){var t=this.globalScaleRatio;if(t!=null&&t!==1){this.getGlobalScale(un);var a=un[0]<0?-1:1,n=un[1]<0?-1:1,i=((un[0]-a)*t+a)/un[0]||0,o=((un[1]-n)*t+n)/un[1]||0;e[0]*=i,e[1]*=i,e[2]*=o,e[3]*=o}this.invTransform=this.invTransform||We(),_o(this.invTransform,e)},r.prototype.getComputedTransform=function(){for(var e=this,t=[];e;)t.push(e),e=e.parent;for(;e=t.pop();)e.updateTransform();return this.transform},r.prototype.setLocalTransform=function(e){if(e){var t=e[0]*e[0]+e[1]*e[1],a=e[2]*e[2]+e[3]*e[3],n=Math.atan2(e[1],e[0]),i=Math.PI/2+n-Math.atan2(e[3],e[2]);a=Math.sqrt(a)*Math.cos(i),t=Math.sqrt(t),this.skewX=i,this.skewY=0,this.rotation=-n,this.x=+e[4],this.y=+e[5],this.scaleX=t,this.scaleY=a,this.originX=0,this.originY=0}},r.prototype.decomposeTransform=function(){if(this.transform){var e=this.parent,t=this.transform;e&&e.transform&&(e.invTransform=e.invTransform||We(),na(Si,e.invTransform,t),t=Si);var a=this.originX,n=this.originY;(a||n)&&(sv[4]=a,sv[5]=n,na(Si,t,sv),Si[4]-=a,Si[5]-=n,t=Si),this.setLocalTransform(t)}},r.prototype.getGlobalScale=function(e){var t=this.transform;return e=e||[],t?(e[0]=Math.sqrt(t[0]*t[0]+t[1]*t[1]),e[1]=Math.sqrt(t[2]*t[2]+t[3]*t[3]),t[0]<0&&(e[0]=-e[0]),t[3]<0&&(e[1]=-e[1]),e):(e[0]=1,e[1]=1,e)},r.prototype.transformCoordToLocal=function(e,t){var a=[e,t],n=this.invTransform;return n&&he(a,a,n),a},r.prototype.transformCoordToGlobal=function(e,t){var a=[e,t],n=this.transform;return n&&he(a,a,n),a},r.prototype.getLineScale=function(){var e=this.transform;return e&&lv(e[0]-1)>1e-10&&lv(e[3]-1)>1e-10?Math.sqrt(lv(e[0]*e[3]-e[2]*e[1])):1},r.prototype.copyTransform=function(e){oT(this,e)},r.getLocalTransform=function(e,t){t=t||[];var a=e.originX||0,n=e.originY||0,i=e.scaleX,o=e.scaleY,s=e.anchorX,l=e.anchorY,u=e.rotation||0,f=e.x,h=e.y,v=e.skewX?Math.tan(e.skewX):0,c=e.skewY?Math.tan(-e.skewY):0;if(a||n||s||l){var p=a+s,d=n+l;t[4]=-p*i-v*d*o,t[5]=-d*o-c*p*i}else t[4]=t[5]=0;return t[0]=i,t[3]=o,t[1]=c*i,t[2]=v*o,u&&fi(t,t,u),t[4]+=a+f,t[5]+=n+h,t},r.initDefaultProps=(function(){var e=r.prototype;e.scaleX=e.scaleY=e.globalScaleRatio=1,e.x=e.y=e.originX=e.originY=e.skewX=e.skewY=e.rotation=e.anchorX=e.anchorY=0})(),r})(),Wr=["x","y","originX","originY","anchorX","anchorY","rotation","scaleX","scaleY","skewX","skewY"];function oT(r,e){for(var t=0;t=0?parseFloat(r)/100*e:parseFloat(r):r}function df(r,e,t){var a=e.position||"inside",n=e.distance!=null?e.distance:5,i=t.height,o=t.width,s=i/2,l=t.x,u=t.y,f="left",h="top";if(a instanceof Array)l+=xr(a[0],t.width),u+=xr(a[1],t.height),f=null,h=null;else switch(a){case"left":l-=n,u+=s,f="right",h="middle";break;case"right":l+=n+o,u+=s,h="middle";break;case"top":l+=o/2,u-=n,f="center",h="bottom";break;case"bottom":l+=o/2,u+=i+n,f="center";break;case"inside":l+=o/2,u+=s,f="center",h="middle";break;case"insideLeft":l+=n,u+=s,h="middle";break;case"insideRight":l+=o-n,u+=s,f="right",h="middle";break;case"insideTop":l+=o/2,u+=n,f="center";break;case"insideBottom":l+=o/2,u+=i-n,f="center",h="bottom";break;case"insideTopLeft":l+=n,u+=n;break;case"insideTopRight":l+=o-n,u+=n,f="right";break;case"insideBottomLeft":l+=n,u+=i-n,h="bottom";break;case"insideBottomRight":l+=o-n,u+=i-n,f="right",h="bottom";break}return r=r||{},r.x=l,r.y=u,r.align=f,r.verticalAlign=h,r}var uv="__zr_normal__",fv=Wr.concat(["ignore"]),sP=Fr(Wr,function(r,e){return r[e]=!0,r},{ignore:!1}),xi={},lP=new ht(0,0,0,0),uh=(function(){function r(e){this.id=kw(),this.animators=[],this.currentStates=[],this.states={},this._init(e)}return r.prototype._init=function(e){this.attr(e)},r.prototype.drift=function(e,t,a){switch(this.draggable){case"horizontal":t=0;break;case"vertical":e=0;break}var n=this.transform;n||(n=this.transform=[1,0,0,1,0,0]),n[4]+=e,n[5]+=t,this.decomposeTransform(),this.markRedraw()},r.prototype.beforeUpdate=function(){},r.prototype.afterUpdate=function(){},r.prototype.update=function(){this.updateTransform(),this.__dirty&&this.updateInnerText()},r.prototype.updateInnerText=function(e){var t=this._textContent;if(t&&(!t.ignore||e)){this.textConfig||(this.textConfig={});var a=this.textConfig,n=a.local,i=t.innerTransformable,o=void 0,s=void 0,l=!1;i.parent=n?this:null;var u=!1;if(i.copyTransform(t),a.position!=null){var f=lP;a.layoutRect?f.copy(a.layoutRect):f.copy(this.getBoundingRect()),n||f.applyTransform(this.transform),this.calculateTextPosition?this.calculateTextPosition(xi,a,f):df(xi,a,f),i.x=xi.x,i.y=xi.y,o=xi.align,s=xi.verticalAlign;var h=a.origin;if(h&&a.rotation!=null){var v=void 0,c=void 0;h==="center"?(v=f.width*.5,c=f.height*.5):(v=xr(h[0],f.width),c=xr(h[1],f.height)),u=!0,i.originX=-i.x+v+(n?0:f.x),i.originY=-i.y+c+(n?0:f.y)}}a.rotation!=null&&(i.rotation=a.rotation);var p=a.offset;p&&(i.x+=p[0],i.y+=p[1],u||(i.originX=-p[0],i.originY=-p[1]));var d=a.inside==null?typeof a.position=="string"&&a.position.indexOf("inside")>=0:a.inside,g=this._innerTextDefaultStyle||(this._innerTextDefaultStyle={}),y=void 0,m=void 0,_=void 0;d&&this.canBeInsideText()?(y=a.insideFill,m=a.insideStroke,(y==null||y==="auto")&&(y=this.getInsideTextFill()),(m==null||m==="auto")&&(m=this.getInsideTextStroke(y),_=!0)):(y=a.outsideFill,m=a.outsideStroke,(y==null||y==="auto")&&(y=this.getOutsideFill()),(m==null||m==="auto")&&(m=this.getOutsideStroke(y),_=!0)),y=y||"#000",(y!==g.fill||m!==g.stroke||_!==g.autoStroke||o!==g.align||s!==g.verticalAlign)&&(l=!0,g.fill=y,g.stroke=m,g.autoStroke=_,g.align=o,g.verticalAlign=s,t.setDefaultTextStyle(g)),t.__dirty|=Fe,l&&t.dirtyStyle(!0)}},r.prototype.canBeInsideText=function(){return!0},r.prototype.getInsideTextFill=function(){return"#fff"},r.prototype.getInsideTextStroke=function(e){return"#000"},r.prototype.getOutsideFill=function(){return this.__zr&&this.__zr.isDarkMode()?Hp:Fp},r.prototype.getOutsideStroke=function(e){var t=this.__zr&&this.__zr.getBackgroundColor(),a=typeof t=="string"&&Ue(t);a||(a=[255,255,255,1]);for(var n=a[3],i=this.__zr.isDarkMode(),o=0;o<3;o++)a[o]=a[o]*n+(i?0:255)*(1-n);return a[3]=1,ia(a,"rgba")},r.prototype.traverse=function(e,t){},r.prototype.attrKV=function(e,t){e==="textConfig"?this.setTextConfig(t):e==="textContent"?this.setTextContent(t):e==="clipPath"?this.setClipPath(t):e==="extra"?(this.extra=this.extra||{},V(this.extra,t)):this[e]=t},r.prototype.hide=function(){this.ignore=!0,this.markRedraw()},r.prototype.show=function(){this.ignore=!1,this.markRedraw()},r.prototype.attr=function(e,t){if(typeof e=="string")this.attrKV(e,t);else if(et(e))for(var a=e,n=_t(a),i=0;i0},r.prototype.getState=function(e){return this.states[e]},r.prototype.ensureState=function(e){var t=this.states;return t[e]||(t[e]={}),t[e]},r.prototype.clearStates=function(e){this.useState(uv,!1,e)},r.prototype.useState=function(e,t,a,n){var i=e===uv,o=this.hasState();if(!(!o&&i)){var s=this.currentStates,l=this.stateTransition;if(!(ct(s,e)>=0&&(t||s.length===1))){var u;if(this.stateProxy&&!i&&(u=this.stateProxy(e)),u||(u=this.states&&this.states[e]),!u&&!i){vg("State "+e+" not exists.");return}i||this.saveCurrentToNormalState(u);var f=!!(u&&u.hoverLayer||n);f&&this._toggleHoverLayerFlag(!0),this._applyStateObj(e,u,this._normalState,t,!a&&!this.__inHover&&l&&l.duration>0,l);var h=this._textContent,v=this._textGuide;return h&&h.useState(e,t,a,f),v&&v.useState(e,t,a,f),i?(this.currentStates=[],this._normalState={}):t?this.currentStates.push(e):this.currentStates=[e],this._updateAnimationTargets(),this.markRedraw(),!f&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=~Fe),u}}},r.prototype.useStates=function(e,t,a){if(!e.length)this.clearStates();else{var n=[],i=this.currentStates,o=e.length,s=o===i.length;if(s){for(var l=0;l0,p);var d=this._textContent,g=this._textGuide;d&&d.useStates(e,t,v),g&&g.useStates(e,t,v),this._updateAnimationTargets(),this.currentStates=e.slice(),this.markRedraw(),!v&&this.__inHover&&(this._toggleHoverLayerFlag(!1),this.__dirty&=~Fe)}},r.prototype.isSilent=function(){for(var e=this.silent,t=this.parent;!e&&t;){if(t.silent){e=!0;break}t=t.parent}return e},r.prototype._updateAnimationTargets=function(){for(var e=0;e=0){var a=this.currentStates.slice();a.splice(t,1),this.useStates(a)}},r.prototype.replaceState=function(e,t,a){var n=this.currentStates.slice(),i=ct(n,e),o=ct(n,t)>=0;i>=0?o?n.splice(i,1):n[i]=t:a&&!o&&n.push(t),this.useStates(n)},r.prototype.toggleState=function(e,t){t?this.useState(e,!0):this.removeState(e)},r.prototype._mergeStates=function(e){for(var t={},a,n=0;n=0&&i.splice(o,1)}),this.animators.push(e),a&&a.animation.addAnimator(e),a&&a.wakeUp()},r.prototype.updateDuringAnimation=function(e){this.markRedraw()},r.prototype.stopAnimation=function(e,t){for(var a=this.animators,n=a.length,i=[],o=0;o0&&t.during&&i[0].during(function(p,d){t.during(d)});for(var v=0;v0||n.force&&!o.length){var T=void 0,A=void 0,C=void 0;if(s){A={},v&&(T={});for(var S=0;S<_;S++){var y=d[S];A[y]=t[y],v?T[y]=a[y]:t[y]=a[y]}}else if(v){C={};for(var S=0;S<_;S++){var y=d[S];C[y]=ws(t[y]),fP(t,a,y)}}var b=new xg(t,!1,!1,h?Ct(p,function(I){return I.targetName===e}):null);b.targetName=e,n.scope&&(b.scope=n.scope),v&&T&&b.whenWithKeys(0,T,d),C&&b.whenWithKeys(0,C,d),b.whenWithKeys(u??500,s?A:a,d).delay(f||0),r.addAnimator(b,e),o.push(b)}}var at=(function(r){k(e,r);function e(t){var a=r.call(this)||this;return a.isGroup=!0,a._children=[],a.attr(t),a}return e.prototype.childrenRef=function(){return this._children},e.prototype.children=function(){return this._children.slice()},e.prototype.childAt=function(t){return this._children[t]},e.prototype.childOfName=function(t){for(var a=this._children,n=0;n=0&&(n.splice(i,0,t),this._doAdd(t))}return this},e.prototype.replace=function(t,a){var n=ct(this._children,t);return n>=0&&this.replaceAt(a,n),this},e.prototype.replaceAt=function(t,a){var n=this._children,i=n[a];if(t&&t!==this&&t.parent!==this&&t!==i){n[a]=t,i.parent=null;var o=this.__zr;o&&i.removeSelfFromZr(o),this._doAdd(t)}return this},e.prototype._doAdd=function(t){t.parent&&t.parent.remove(t),t.parent=this;var a=this.__zr;a&&a!==t.__zr&&t.addSelfToZr(a),a&&a.refresh()},e.prototype.remove=function(t){var a=this.__zr,n=this._children,i=ct(n,t);return i<0?this:(n.splice(i,1),t.parent=null,a&&t.removeSelfFromZr(a),a&&a.refresh(),this)},e.prototype.removeAll=function(){for(var t=this._children,a=this.__zr,n=0;n0&&(this._stillFrameAccum++,this._stillFrameAccum>this._sleepAfterStill&&this.animation.stop())},r.prototype.setSleepAfterStill=function(e){this._sleepAfterStill=e},r.prototype.wakeUp=function(){this._disposed||(this.animation.start(),this._stillFrameAccum=0)},r.prototype.refreshHover=function(){this._needsRefreshHover=!0},r.prototype.refreshHoverImmediately=function(){this._disposed||(this._needsRefreshHover=!1,this.painter.refreshHover&&this.painter.getType()==="canvas"&&this.painter.refreshHover())},r.prototype.resize=function(e){this._disposed||(e=e||{},this.painter.resize(e.width,e.height),this.handler.resize())},r.prototype.clearAnimation=function(){this._disposed||this.animation.clear()},r.prototype.getWidth=function(){if(!this._disposed)return this.painter.getWidth()},r.prototype.getHeight=function(){if(!this._disposed)return this.painter.getHeight()},r.prototype.setCursorStyle=function(e){this._disposed||this.handler.setCursorStyle(e)},r.prototype.findHover=function(e,t){if(!this._disposed)return this.handler.findHover(e,t)},r.prototype.on=function(e,t,a){return this._disposed||this.handler.on(e,t,a),this},r.prototype.off=function(e,t){this._disposed||this.handler.off(e,t)},r.prototype.trigger=function(e,t){this._disposed||this.handler.trigger(e,t)},r.prototype.clear=function(){if(!this._disposed){for(var e=this.storage.getRoots(),t=0;t0){if(r<=n)return o;if(r>=i)return s}else{if(r>=n)return o;if(r<=i)return s}else{if(r===n)return o;if(r===i)return s}return(r-n)/l*u+o}function W(r,e){switch(r){case"center":case"middle":r="50%";break;case"left":case"top":r="0%";break;case"right":case"bottom":r="100%";break}return Y(r)?_P(r).match(/%$/)?parseFloat(r)/100*e:parseFloat(r):r==null?NaN:+r}function Ut(r,e,t){return e==null&&(e=10),e=Math.min(Math.max(0,e),uT),r=(+r).toFixed(e),t?r:+r}function ir(r){return r.sort(function(e,t){return e-t}),r}function Or(r){if(r=+r,isNaN(r))return 0;if(r>1e-14){for(var e=1,t=0;t<15;t++,e*=10)if(Math.round(r*e)/e===r)return t}return SP(r)}function SP(r){var e=r.toString().toLowerCase(),t=e.indexOf("e"),a=t>0?+e.slice(t+1):0,n=t>0?t:e.length,i=e.indexOf("."),o=i<0?0:n-1-i;return Math.max(0,o-a)}function fT(r,e){var t=Math.log,a=Math.LN10,n=Math.floor(t(r[1]-r[0])/a),i=Math.round(t(Math.abs(e[1]-e[0]))/a),o=Math.min(Math.max(-n+i,0),20);return isFinite(o)?o:20}function xP(r,e){var t=Fr(r,function(c,p){return c+(isNaN(p)?0:p)},0);if(t===0)return[];for(var a=Math.pow(10,e),n=G(r,function(c){return(isNaN(c)?0:c)/t*a*100}),i=a*100,o=G(n,function(c){return Math.floor(c)}),s=Fr(o,function(c,p){return c+p},0),l=G(n,function(c,p){return c-o[p]});su&&(u=l[h],f=h);++o[f],l[f]=0,++s}return G(o,function(c){return c/a})}function bP(r,e){var t=Math.max(Or(r),Or(e)),a=r+e;return t>uT?a:Ut(a,t)}var Qm=9007199254740991;function hT(r){var e=Math.PI*2;return(r%e+e)%e}function Gs(r){return r>-Km&&r=10&&e++,e}function vT(r,e){var t=bg(r),a=Math.pow(10,t),n=r/a,i;return n<1.5?i=1:n<2.5?i=2:n<4?i=3:n<7?i=5:i=10,r=i*a,t>=-20?+r.toFixed(t<0?-t:0):r}function cv(r,e){var t=(r.length-1)*e+1,a=Math.floor(t),n=+r[a-1],i=t-a;return i?n+i*(r[a]-n):n}function Jm(r){r.sort(function(l,u){return s(l,u,0)?-1:1});for(var e=-1/0,t=1,a=0;a=0||i&&ct(i,l)<0)){var u=a.getShallow(l,e);u!=null&&(o[r[s][0]]=u)}}return o}}var ZP=[["fill","color"],["shadowBlur"],["shadowOffsetX"],["shadowOffsetY"],["opacity"],["shadowColor"]],qP=ni(ZP),KP=(function(){function r(){}return r.prototype.getAreaStyle=function(e,t){return qP(this,e,t)},r})(),Yp=new fl(50);function QP(r){if(typeof r=="string"){var e=Yp.get(r);return e&&e.image}else return r}function Cg(r,e,t,a,n){if(r)if(typeof r=="string"){if(e&&e.__zrImageSrc===r||!t)return e;var i=Yp.get(r),o={hostEl:t,cb:a,cbPayload:n};return i?(e=i.image,!hh(e)&&i.pending.push(o)):(e=Xa.loadImage(r,r0,r0),e.__zrImageSrc=r,Yp.put(r,e.__cachedImgObj={image:e,pending:[o]})),e}else return r;else return e}function r0(){var r=this.__cachedImgObj;this.onload=this.onerror=this.__cachedImgObj=null;for(var e=0;e=o;l++)s-=o;var u=Ye(t,e);return u>s&&(t="",u=0),s=r-u,n.ellipsis=t,n.ellipsisWidth=u,n.contentWidth=s,n.containerWidth=r,n}function AT(r,e,t){var a=t.containerWidth,n=t.font,i=t.contentWidth;if(!a){r.textLine="",r.isTruncated=!1;return}var o=Ye(e,n);if(o<=a){r.textLine=e,r.isTruncated=!1;return}for(var s=0;;s++){if(o<=i||s>=t.maxIterations){e+=t.ellipsis;break}var l=s===0?jP(e,i,t.ascCharWidth,t.cnCharWidth):o>0?Math.floor(e.length*i/o):0;e=e.substr(0,l),o=Ye(e,n)}e===""&&(e=t.placeholder),r.textLine=e,r.isTruncated=!0}function jP(r,e,t,a){for(var n=0,i=0,o=r.length;i(o(),e("div",g,[(o(!0),e(n,null,l(_.categories,(t,A)=>(o(),e("div",{key:t.title,class:"category-section"},[s("div",v,[s("div",{class:"category-icon-wrap",style:i({background:`linear-gradient(135deg, ${t.color}20, ${t.color}08)`})},[s("span",{class:"category-icon",style:i({color:t.color}),innerHTML:t.icon},null,12,k)],4),s("div",m,[s("h3",y,c(t.title),1)]),s("div",{class:"category-line",style:i({background:`linear-gradient(90deg, ${t.color}40, transparent)`})},null,4)]),s("div",f,[(o(!0),e(n,null,l(t.articles,(a,h)=>(o(),e("a",{key:a.url,href:a.url,class:"article-card"},[s("div",{class:"card-indicator",style:i({background:t.color})},null,4),s("div",C,[s("div",L,[s("span",{class:"article-index",style:i({color:t.color})},c(String(h+1).padStart(2,"0")),5),a.description?(o(),e("span",b,"文章")):d("",!0)]),s("h4",w,c(a.title),1),a.description?(o(),e("p",B,c(a.description),1)):d("",!0)]),r[0]||(r[0]=s("div",{class:"card-action"},[s("span",{class:"action-text"},"阅读"),s("svg",{class:"action-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[s("path",{d:"M5 12h14M12 5l7 7-7 7"})])],-1))],8,x))),128))])]))),128))]))}}),F=u(M,[["__scopeId","data-v-d45a9e33"]]);export{F as A};
+import{d as p,g as e,h as o,F as n,t as l,i as s,W as i,x as c,y as d,_ as u}from"./vitepress-theme-teek.CqY1sKvl.js";const g={class:"article-card-list"},v={class:"category-header"},k=["innerHTML"],m={class:"category-info"},y={class:"category-title"},f={class:"article-grid"},x=["href"],C={class:"card-body"},L={class:"article-meta"},b={key:0,class:"article-tag"},w={class:"article-title"},B={key:0,class:"article-desc"},M=p({__name:"ArticleCardList",props:{categories:{}},setup(_){return(S,r)=>(o(),e("div",g,[(o(!0),e(n,null,l(_.categories,(t,A)=>(o(),e("div",{key:t.title,class:"category-section"},[s("div",v,[s("div",{class:"category-icon-wrap",style:i({background:`linear-gradient(135deg, ${t.color}20, ${t.color}08)`})},[s("span",{class:"category-icon",style:i({color:t.color}),innerHTML:t.icon},null,12,k)],4),s("div",m,[s("h3",y,c(t.title),1)]),s("div",{class:"category-line",style:i({background:`linear-gradient(90deg, ${t.color}40, transparent)`})},null,4)]),s("div",f,[(o(!0),e(n,null,l(t.articles,(a,h)=>(o(),e("a",{key:a.url,href:a.url,class:"article-card"},[s("div",{class:"card-indicator",style:i({background:t.color})},null,4),s("div",C,[s("div",L,[s("span",{class:"article-index",style:i({color:t.color})},c(String(h+1).padStart(2,"0")),5),a.description?(o(),e("span",b,"文章")):d("",!0)]),s("h4",w,c(a.title),1),a.description?(o(),e("p",B,c(a.description),1)):d("",!0)]),r[0]||(r[0]=s("div",{class:"card-action"},[s("span",{class:"action-text"},"阅读"),s("svg",{class:"action-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},[s("path",{d:"M5 12h14M12 5l7 7-7 7"})])],-1))],8,x))),128))])]))),128))]))}}),F=u(M,[["__scopeId","data-v-d45a9e33"]]);export{F as A};
diff --git a/assets/chunks/HighLightText.gRdAAF3C.js b/assets/chunks/HighLightText.BFsbuOsY.js
similarity index 91%
rename from assets/chunks/HighLightText.gRdAAF3C.js
rename to assets/chunks/HighLightText.BFsbuOsY.js
index 76a6603f..2f9de050 100644
--- a/assets/chunks/HighLightText.gRdAAF3C.js
+++ b/assets/chunks/HighLightText.BFsbuOsY.js
@@ -1 +1 @@
-import{d as r,c as e,p,h as d,s as c,V as i,W as u,k as g,X as h,_ as m}from"./vitepress-theme-teek.CJu9alwu.js";const x=r({__name:"HighLightText",props:{type:{default:"warning"},bold:{type:Boolean,default:!1},bgColor:{},textColor:{},padding:{default:"2px 6px"},borderRadius:{default:"3px"}},setup(o){const t=o,s=e(()=>t.bold?"strong":"span"),a=e(()=>["highlight-text",`highlight-text--${t.type}`]),l=e(()=>({"--hl-padding":t.padding,"--hl-border-radius":t.borderRadius,...t.type==="custom"?{"--hl-custom-bg":t.bgColor,"--hl-custom-text":t.textColor}:{}}));return(n,f)=>(d(),p(h(s.value),{class:g(a.value),style:u(l.value)},{default:c(()=>[i(n.$slots,"default",{},void 0,!0)]),_:3},8,["class","style"]))}}),b=m(x,[["__scopeId","data-v-f601581b"]]);export{b as H};
+import{d as r,c as e,p,h as d,s as c,V as i,W as u,k as g,X as h,_ as m}from"./vitepress-theme-teek.CqY1sKvl.js";const x=r({__name:"HighLightText",props:{type:{default:"warning"},bold:{type:Boolean,default:!1},bgColor:{},textColor:{},padding:{default:"2px 6px"},borderRadius:{default:"3px"}},setup(o){const t=o,s=e(()=>t.bold?"strong":"span"),a=e(()=>["highlight-text",`highlight-text--${t.type}`]),l=e(()=>({"--hl-padding":t.padding,"--hl-border-radius":t.borderRadius,...t.type==="custom"?{"--hl-custom-bg":t.bgColor,"--hl-custom-text":t.textColor}:{}}));return(n,f)=>(d(),p(h(s.value),{class:g(a.value),style:u(l.value)},{default:c(()=>[i(n.$slots,"default",{},void 0,!0)]),_:3},8,["class","style"]))}}),b=m(x,[["__scopeId","data-v-f601581b"]]);export{b as H};
diff --git a/assets/chunks/TwoColumnImage.C5EZ0-fZ.js b/assets/chunks/TwoColumnImage.BAUswlD7.js
similarity index 91%
rename from assets/chunks/TwoColumnImage.C5EZ0-fZ.js
rename to assets/chunks/TwoColumnImage.BAUswlD7.js
index 5a24e2ef..d36cfdd4 100644
--- a/assets/chunks/TwoColumnImage.C5EZ0-fZ.js
+++ b/assets/chunks/TwoColumnImage.BAUswlD7.js
@@ -1 +1 @@
-import{d as c,g as a,h as s,i as e,y as o,x as i,_ as l}from"./vitepress-theme-teek.CJu9alwu.js";const n={class:"two-column-image"},m={class:"image-column"},g=["src","alt"],r={key:0,class:"caption"},d={class:"image-column"},h=["src","alt"],f={key:0,class:"caption"},u=c({__name:"TwoColumnImage",props:{leftImage:{},rightImage:{},leftAlt:{},rightAlt:{},leftCaption:{},rightCaption:{}},setup(t){return(_,C)=>(s(),a("div",n,[e("div",m,[e("img",{src:t.leftImage,alt:t.leftAlt||"",class:"image"},null,8,g),t.leftCaption?(s(),a("p",r,i(t.leftCaption),1)):o("",!0)]),e("div",d,[e("img",{src:t.rightImage,alt:t.rightAlt||"",class:"image"},null,8,h),t.rightCaption?(s(),a("p",f,i(t.rightCaption),1)):o("",!0)])]))}}),p=l(u,[["__scopeId","data-v-1bf3bb09"]]);export{p as T};
+import{d as c,g as a,h as s,i as e,y as o,x as i,_ as l}from"./vitepress-theme-teek.CqY1sKvl.js";const n={class:"two-column-image"},m={class:"image-column"},g=["src","alt"],r={key:0,class:"caption"},d={class:"image-column"},h=["src","alt"],f={key:0,class:"caption"},u=c({__name:"TwoColumnImage",props:{leftImage:{},rightImage:{},leftAlt:{},rightAlt:{},leftCaption:{},rightCaption:{}},setup(t){return(_,C)=>(s(),a("div",n,[e("div",m,[e("img",{src:t.leftImage,alt:t.leftAlt||"",class:"image"},null,8,g),t.leftCaption?(s(),a("p",r,i(t.leftCaption),1)):o("",!0)]),e("div",d,[e("img",{src:t.rightImage,alt:t.rightAlt||"",class:"image"},null,8,h),t.rightCaption?(s(),a("p",f,i(t.rightCaption),1)):o("",!0)])]))}}),p=l(u,[["__scopeId","data-v-1bf3bb09"]]);export{p as T};
diff --git a/assets/chunks/VPLocalSearchBox.Dqu_3HXH.js b/assets/chunks/VPLocalSearchBox.WaTilTWb.js
similarity index 99%
rename from assets/chunks/VPLocalSearchBox.Dqu_3HXH.js
rename to assets/chunks/VPLocalSearchBox.WaTilTWb.js
index 6902bda2..df291505 100644
--- a/assets/chunks/VPLocalSearchBox.Dqu_3HXH.js
+++ b/assets/chunks/VPLocalSearchBox.WaTilTWb.js
@@ -1,2 +1,2 @@
-import{Z as xt,$ as X,w as Le,c as he,a0 as _t,a1 as qe,a2 as St,a3 as Et,a4 as Tt,d as It,a5 as kt,a6 as Ge,r as oe,a7 as Nt,a8 as Ft,D as Ot,a9 as Ct,o as Ne,n as le,aa as be,j as Rt,ab as At,ac as Mt,ad as Lt,B as Dt,ae as Pt,p as zt,h as W,i as _,v as Vt,af as $t,l as C,ag as jt,ah as Bt,g as J,y as ye,k as He,t as Qe,F as Ye,S as ce,x as ue,T as Wt,ai as Ze,aj as Kt,L as Jt,J as Ut,ak as qt,_ as Gt}from"./vitepress-theme-teek.CJu9alwu.js";const Ht={root:()=>xt(()=>import("./@localSearchIndexroot.BQjtOtV7.js"),[])};var lt=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[href]:not([inert])","button:not([inert])","[tabindex]:not(slot):not([inert])","audio[controls]:not([inert])","video[controls]:not([inert])",'[contenteditable]:not([contenteditable="false"]):not([inert])',"details>summary:first-of-type:not([inert])","details:not([inert])"],Se=lt.join(","),ct=typeof Element>"u",Q=ct?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,Ee=!ct&&Element.prototype.getRootNode?function(a){var e;return a==null||(e=a.getRootNode)===null||e===void 0?void 0:e.call(a)}:function(a){return a?.ownerDocument},pe=function(e,t){var s;t===void 0&&(t=!0);var n=e==null||(s=e.getAttribute)===null||s===void 0?void 0:s.call(e,"inert"),r=n===""||n==="true",i=r||t&&e&&pe(e.parentNode);return i},Qt=function(e){var t,s=e==null||(t=e.getAttribute)===null||t===void 0?void 0:t.call(e,"contenteditable");return s===""||s==="true"},ut=function(e,t,s){if(pe(e))return[];var n=Array.prototype.slice.apply(e.querySelectorAll(Se));return t&&Q.call(e,Se)&&n.unshift(e),n=n.filter(s),n},Te=function(e,t,s){for(var n=[],r=Array.from(e);r.length;){var i=r.shift();if(!pe(i,!1))if(i.tagName==="SLOT"){var o=i.assignedElements(),l=o.length?o:i.children,c=Te(l,!0,s);s.flatten?n.push.apply(n,c):n.push({scopeParent:i,candidates:c})}else{var h=Q.call(i,Se);h&&s.filter(i)&&(t||!e.includes(i))&&n.push(i);var f=i.shadowRoot||typeof s.getShadowRoot=="function"&&s.getShadowRoot(i),p=!pe(f,!1)&&(!s.shadowRootFilter||s.shadowRootFilter(i));if(f&&p){var b=Te(f===!0?i.children:f.children,!0,s);s.flatten?n.push.apply(n,b):n.push({scopeParent:i,candidates:b})}else r.unshift.apply(r,i.children)}}return n},dt=function(e){return!isNaN(parseInt(e.getAttribute("tabindex"),10))},H=function(e){if(!e)throw new Error("No node provided");return e.tabIndex<0&&(/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||Qt(e))&&!dt(e)?0:e.tabIndex},Yt=function(e,t){var s=H(e);return s<0&&t&&!dt(e)?0:s},Zt=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},ht=function(e){return e.tagName==="INPUT"},Xt=function(e){return ht(e)&&e.type==="hidden"},es=function(e){var t=e.tagName==="DETAILS"&&Array.prototype.slice.apply(e.children).some(function(s){return s.tagName==="SUMMARY"});return t},ts=function(e,t){for(var s=0;ssummary:first-of-type"),o=i?e.parentElement:e;if(Q.call(o,"details:not([open]) *"))return!0;if(!s||s==="full"||s==="full-native"||s==="legacy-full"){if(typeof n=="function"){for(var l=e;e;){var c=e.parentElement,h=Ee(e);if(c&&!c.shadowRoot&&n(c)===!0)return Xe(e);e.assignedSlot?e=e.assignedSlot:!c&&h!==e.ownerDocument?e=h.host:e=c}e=l}if(rs(e))return!e.getClientRects().length;if(s!=="legacy-full")return!0}else if(s==="non-zero-area")return Xe(e);return!1},os=function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if(t.tagName==="FIELDSET"&&t.disabled){for(var s=0;s=0)},ft=function(e){var t=[],s=[];return e.forEach(function(n,r){var i=!!n.scopeParent,o=i?n.scopeParent:n,l=Yt(o,i),c=i?ft(n.candidates):o;l===0?i?t.push.apply(t,c):t.push(o):s.push({documentOrder:r,tabIndex:l,item:n,isScope:i,content:c})}),s.sort(Zt).reduce(function(n,r){return r.isScope?n.push.apply(n,r.content):n.push(r.content),n},[]).concat(t)},cs=function(e,t){t=t||{};var s;return t.getShadowRoot?s=Te([e],t.includeContainer,{filter:De.bind(null,t),flatten:!1,getShadowRoot:t.getShadowRoot,shadowRootFilter:ls}):s=ut(e,t.includeContainer,De.bind(null,t)),ft(s)},us=function(e,t){t=t||{};var s;return t.getShadowRoot?s=Te([e],t.includeContainer,{filter:Ie.bind(null,t),flatten:!0,getShadowRoot:t.getShadowRoot}):s=ut(e,t.includeContainer,Ie.bind(null,t)),s},Y=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return Q.call(e,Se)===!1?!1:De(t,e)},ds=lt.concat("iframe").join(","),Fe=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return Q.call(e,ds)===!1?!1:Ie(t,e)};function Pe(a,e){(e==null||e>a.length)&&(e=a.length);for(var t=0,s=Array(e);txt(()=>import("./@localSearchIndexroot.zGeIrmus.js"),[])};var lt=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[href]:not([inert])","button:not([inert])","[tabindex]:not(slot):not([inert])","audio[controls]:not([inert])","video[controls]:not([inert])",'[contenteditable]:not([contenteditable="false"]):not([inert])',"details>summary:first-of-type:not([inert])","details:not([inert])"],Se=lt.join(","),ct=typeof Element>"u",Q=ct?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,Ee=!ct&&Element.prototype.getRootNode?function(a){var e;return a==null||(e=a.getRootNode)===null||e===void 0?void 0:e.call(a)}:function(a){return a?.ownerDocument},pe=function(e,t){var s;t===void 0&&(t=!0);var n=e==null||(s=e.getAttribute)===null||s===void 0?void 0:s.call(e,"inert"),r=n===""||n==="true",i=r||t&&e&&pe(e.parentNode);return i},Qt=function(e){var t,s=e==null||(t=e.getAttribute)===null||t===void 0?void 0:t.call(e,"contenteditable");return s===""||s==="true"},ut=function(e,t,s){if(pe(e))return[];var n=Array.prototype.slice.apply(e.querySelectorAll(Se));return t&&Q.call(e,Se)&&n.unshift(e),n=n.filter(s),n},Te=function(e,t,s){for(var n=[],r=Array.from(e);r.length;){var i=r.shift();if(!pe(i,!1))if(i.tagName==="SLOT"){var o=i.assignedElements(),l=o.length?o:i.children,c=Te(l,!0,s);s.flatten?n.push.apply(n,c):n.push({scopeParent:i,candidates:c})}else{var h=Q.call(i,Se);h&&s.filter(i)&&(t||!e.includes(i))&&n.push(i);var f=i.shadowRoot||typeof s.getShadowRoot=="function"&&s.getShadowRoot(i),p=!pe(f,!1)&&(!s.shadowRootFilter||s.shadowRootFilter(i));if(f&&p){var b=Te(f===!0?i.children:f.children,!0,s);s.flatten?n.push.apply(n,b):n.push({scopeParent:i,candidates:b})}else r.unshift.apply(r,i.children)}}return n},dt=function(e){return!isNaN(parseInt(e.getAttribute("tabindex"),10))},H=function(e){if(!e)throw new Error("No node provided");return e.tabIndex<0&&(/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||Qt(e))&&!dt(e)?0:e.tabIndex},Yt=function(e,t){var s=H(e);return s<0&&t&&!dt(e)?0:s},Zt=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},ht=function(e){return e.tagName==="INPUT"},Xt=function(e){return ht(e)&&e.type==="hidden"},es=function(e){var t=e.tagName==="DETAILS"&&Array.prototype.slice.apply(e.children).some(function(s){return s.tagName==="SUMMARY"});return t},ts=function(e,t){for(var s=0;ssummary:first-of-type"),o=i?e.parentElement:e;if(Q.call(o,"details:not([open]) *"))return!0;if(!s||s==="full"||s==="full-native"||s==="legacy-full"){if(typeof n=="function"){for(var l=e;e;){var c=e.parentElement,h=Ee(e);if(c&&!c.shadowRoot&&n(c)===!0)return Xe(e);e.assignedSlot?e=e.assignedSlot:!c&&h!==e.ownerDocument?e=h.host:e=c}e=l}if(rs(e))return!e.getClientRects().length;if(s!=="legacy-full")return!0}else if(s==="non-zero-area")return Xe(e);return!1},os=function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if(t.tagName==="FIELDSET"&&t.disabled){for(var s=0;s=0)},ft=function(e){var t=[],s=[];return e.forEach(function(n,r){var i=!!n.scopeParent,o=i?n.scopeParent:n,l=Yt(o,i),c=i?ft(n.candidates):o;l===0?i?t.push.apply(t,c):t.push(o):s.push({documentOrder:r,tabIndex:l,item:n,isScope:i,content:c})}),s.sort(Zt).reduce(function(n,r){return r.isScope?n.push.apply(n,r.content):n.push(r.content),n},[]).concat(t)},cs=function(e,t){t=t||{};var s;return t.getShadowRoot?s=Te([e],t.includeContainer,{filter:De.bind(null,t),flatten:!1,getShadowRoot:t.getShadowRoot,shadowRootFilter:ls}):s=ut(e,t.includeContainer,De.bind(null,t)),ft(s)},us=function(e,t){t=t||{};var s;return t.getShadowRoot?s=Te([e],t.includeContainer,{filter:Ie.bind(null,t),flatten:!0,getShadowRoot:t.getShadowRoot}):s=ut(e,t.includeContainer,Ie.bind(null,t)),s},Y=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return Q.call(e,Se)===!1?!1:De(t,e)},ds=lt.concat("iframe").join(","),Fe=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return Q.call(e,ds)===!1?!1:Ie(t,e)};function Pe(a,e){(e==null||e>a.length)&&(e=a.length);for(var t=0,s=Array(e);t0){var s=e[e.length-1];s!==t&&s._setPausedState(!0)}var n=e.indexOf(t);n===-1||e.splice(n,1),e.push(t)},deactivateTrap:function(e,t){var s=e.indexOf(t);s!==-1&&e.splice(s,1),e.length>0&&!e[e.length-1]._isManuallyPaused()&&e[e.length-1]._setPausedState(!1)}},ws=function(e){return e.tagName&&e.tagName.toLowerCase()==="input"&&typeof e.select=="function"},xs=function(e){return e?.key==="Escape"||e?.key==="Esc"||e?.keyCode===27},fe=function(e){return e?.key==="Tab"||e?.keyCode===9},_s=function(e){return fe(e)&&!e.shiftKey},Ss=function(e){return fe(e)&&e.shiftKey},nt=function(e){return setTimeout(e,0)},de=function(e){for(var t=arguments.length,s=new Array(t>1?t-1:0),n=1;n1&&arguments[1]!==void 0?arguments[1]:{},g=d.hasFallback,E=g===void 0?!1:g,T=d.params,k=T===void 0?[]:T,m=r[u];if(typeof m=="function"&&(m=m.apply(void 0,ms(k))),m===!0&&(m=void 0),!m){if(m===void 0||m===!1)return m;throw new Error("`".concat(u,"` was specified but was not a node, or did not return a node"))}var v=m;if(typeof m=="string"){try{v=s.querySelector(m)}catch(w){throw new Error("`".concat(u,'` appears to be an invalid selector; error="').concat(w.message,'"'))}if(!v&&!E)throw new Error("`".concat(u,"` as selector refers to no known node"))}return v},f=function(){var u=h("initialFocus",{hasFallback:!0});if(u===!1)return!1;if(u===void 0||u&&!Fe(u,r.tabbableOptions))if(c(s.activeElement)>=0)u=s.activeElement;else{var d=i.tabbableGroups[0],g=d&&d.firstTabbableNode;u=g||h("fallbackFocus")}else u===null&&(u=h("fallbackFocus"));if(!u)throw new Error("Your focus-trap needs to have at least one focusable element");return u},p=function(){if(i.containerGroups=i.containers.map(function(u){var d=cs(u,r.tabbableOptions),g=us(u,r.tabbableOptions),E=d.length>0?d[0]:void 0,T=d.length>0?d[d.length-1]:void 0,k=g.find(function(w){return Y(w)}),m=g.slice().reverse().find(function(w){return Y(w)}),v=!!d.find(function(w){return H(w)>0});return{container:u,tabbableNodes:d,focusableNodes:g,posTabIndexesFound:v,firstTabbableNode:E,lastTabbableNode:T,firstDomTabbableNode:k,lastDomTabbableNode:m,nextTabbableNode:function(A){var z=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!0,L=d.indexOf(A);return L<0?z?g.slice(g.indexOf(A)+1).find(function(q){return Y(q)}):g.slice(0,g.indexOf(A)).reverse().find(function(q){return Y(q)}):d[L+(z?1:-1)]}}}),i.tabbableGroups=i.containerGroups.filter(function(u){return u.tabbableNodes.length>0}),i.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(i.containerGroups.find(function(u){return u.posTabIndexesFound})&&i.containerGroups.length>1)throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},b=function(u){var d=u.activeElement;if(d)return d.shadowRoot&&d.shadowRoot.activeElement!==null?b(d.shadowRoot):d},x=function(u){if(u!==!1&&u!==b(document)){if(!u||!u.focus){x(f());return}u.focus({preventScroll:!!r.preventScroll}),i.mostRecentlyFocusedNode=u,ws(u)&&u.select()}},S=function(u){var d=h("setReturnFocus",{params:[u]});return d||(d===!1?!1:u)},y=function(u){var d=u.target,g=u.event,E=u.isBackward,T=E===void 0?!1:E;d=d||we(g),p();var k=null;if(i.tabbableGroups.length>0){var m=c(d,g),v=m>=0?i.containerGroups[m]:void 0;if(m<0)T?k=i.tabbableGroups[i.tabbableGroups.length-1].lastTabbableNode:k=i.tabbableGroups[0].firstTabbableNode;else if(T){var w=i.tabbableGroups.findIndex(function(ne){var M=ne.firstTabbableNode;return d===M});if(w<0&&(v.container===d||Fe(d,r.tabbableOptions)&&!Y(d,r.tabbableOptions)&&!v.nextTabbableNode(d,!1))&&(w=m),w>=0){var A=w===0?i.tabbableGroups.length-1:w-1,z=i.tabbableGroups[A];k=H(d)>=0?z.lastTabbableNode:z.lastDomTabbableNode}else fe(g)||(k=v.nextTabbableNode(d,!1))}else{var L=i.tabbableGroups.findIndex(function(ne){var M=ne.lastTabbableNode;return d===M});if(L<0&&(v.container===d||Fe(d,r.tabbableOptions)&&!Y(d,r.tabbableOptions)&&!v.nextTabbableNode(d))&&(L=m),L>=0){var q=L===i.tabbableGroups.length-1?0:L+1,se=i.tabbableGroups[q];k=H(d)>=0?se.firstTabbableNode:se.firstDomTabbableNode}else fe(g)||(k=v.nextTabbableNode(d))}}else k=h("fallbackFocus");return k},N=function(u){var d=we(u);if(!(c(d,u)>=0)){if(de(r.clickOutsideDeactivates,u)){o.deactivate({returnFocus:r.returnFocusOnDeactivate});return}de(r.allowOutsideClick,u)||u.preventDefault()}},F=function(u){var d=we(u),g=c(d,u)>=0;if(g||d instanceof Document)g&&(i.mostRecentlyFocusedNode=d);else{u.stopImmediatePropagation();var E,T=!0;if(i.mostRecentlyFocusedNode)if(H(i.mostRecentlyFocusedNode)>0){var k=c(i.mostRecentlyFocusedNode),m=i.containerGroups[k].tabbableNodes;if(m.length>0){var v=m.findIndex(function(w){return w===i.mostRecentlyFocusedNode});v>=0&&(r.isKeyForward(i.recentNavEvent)?v+1=0&&(E=m[v-1],T=!1))}}else i.containerGroups.some(function(w){return w.tabbableNodes.some(function(A){return H(A)>0})})||(T=!1);else T=!1;T&&(E=y({target:i.mostRecentlyFocusedNode,isBackward:r.isKeyBackward(i.recentNavEvent)})),x(E||i.mostRecentlyFocusedNode||f())}i.recentNavEvent=void 0},$=function(u){var d=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1;i.recentNavEvent=u;var g=y({event:u,isBackward:d});g&&(fe(u)&&u.preventDefault(),x(g))},K=function(u){(r.isKeyForward(u)||r.isKeyBackward(u))&&$(u,r.isKeyBackward(u))},V=function(u){xs(u)&&de(r.escapeDeactivates,u)!==!1&&(u.preventDefault(),o.deactivate())},D=function(u){var d=we(u);c(d,u)>=0||de(r.clickOutsideDeactivates,u)||de(r.allowOutsideClick,u)||(u.preventDefault(),u.stopImmediatePropagation())},P=function(){if(i.active)return st.activateTrap(n,o),i.delayInitialFocusTimer=r.delayInitialFocus?nt(function(){x(f())}):x(f()),s.addEventListener("focusin",F,!0),s.addEventListener("mousedown",N,{capture:!0,passive:!1}),s.addEventListener("touchstart",N,{capture:!0,passive:!1}),s.addEventListener("click",D,{capture:!0,passive:!1}),s.addEventListener("keydown",K,{capture:!0,passive:!1}),s.addEventListener("keydown",V),o},ve=function(){if(i.active)return s.removeEventListener("focusin",F,!0),s.removeEventListener("mousedown",N,!0),s.removeEventListener("touchstart",N,!0),s.removeEventListener("click",D,!0),s.removeEventListener("keydown",K,!0),s.removeEventListener("keydown",V),o},O=function(u){var d=u.some(function(g){var E=Array.from(g.removedNodes);return E.some(function(T){return T===i.mostRecentlyFocusedNode})});d&&x(f())},j=typeof window<"u"&&"MutationObserver"in window?new MutationObserver(O):void 0,B=function(){j&&(j.disconnect(),i.active&&!i.paused&&i.containers.map(function(u){j.observe(u,{subtree:!0,childList:!0})}))};return o={get active(){return i.active},get paused(){return i.paused},activate:function(u){if(i.active)return this;var d=l(u,"onActivate"),g=l(u,"onPostActivate"),E=l(u,"checkCanFocusTrap");E||p(),i.active=!0,i.paused=!1,i.nodeFocusedBeforeActivation=b(s),d?.();var T=function(){E&&p(),P(),B(),g?.()};return E?(E(i.containers.concat()).then(T,T),this):(T(),this)},deactivate:function(u){if(!i.active)return this;var d=tt({onDeactivate:r.onDeactivate,onPostDeactivate:r.onPostDeactivate,checkCanReturnFocus:r.checkCanReturnFocus},u);clearTimeout(i.delayInitialFocusTimer),i.delayInitialFocusTimer=void 0,ve(),i.active=!1,i.paused=!1,B(),st.deactivateTrap(n,o);var g=l(d,"onDeactivate"),E=l(d,"onPostDeactivate"),T=l(d,"checkCanReturnFocus"),k=l(d,"returnFocus","returnFocusOnDeactivate");g?.();var m=function(){nt(function(){k&&x(S(i.nodeFocusedBeforeActivation)),E?.()})};return k&&T?(T(S(i.nodeFocusedBeforeActivation)).then(m,m),this):(m(),this)},pause:function(u){return i.active?(i.manuallyPaused=!0,this._setPausedState(!0,u)):this},unpause:function(u){return i.active?(i.manuallyPaused=!1,n[n.length-1]!==this?this:this._setPausedState(!1,u)):this},updateContainerElements:function(u){var d=[].concat(u).filter(Boolean);return i.containers=d.map(function(g){return typeof g=="string"?s.querySelector(g):g}),i.active&&p(),B(),this}},Object.defineProperties(o,{_isManuallyPaused:{value:function(){return i.manuallyPaused}},_setPausedState:{value:function(u,d){if(i.paused===u)return this;if(i.paused=u,u){var g=l(d,"onPause"),E=l(d,"onPostPause");g?.(),ve(),B(),E?.()}else{var T=l(d,"onUnpause"),k=l(d,"onPostUnpause");T?.(),p(),P(),B(),k?.()}return this}}}),o.updateContainerElements(e),o};function Is(a,e={}){let t;const{immediate:s,...n}=e,r=X(!1),i=X(!1),o=f=>t&&t.activate(f),l=f=>t&&t.deactivate(f),c=()=>{t&&(t.pause(),i.value=!0)},h=()=>{t&&(t.unpause(),i.value=!1)};return Le(he(()=>_t(qe(a)).map(f=>{const p=qe(f);return typeof p=="string"?p:St(p)}).filter(Et)),f=>{if(f.length)if(!t)t=Ts(f,{...n,onActivate(){r.value=!0,e.onActivate&&e.onActivate()},onDeactivate(){r.value=!1,e.onDeactivate&&e.onDeactivate()}}),s&&o();else{const p=t?.active;t?.updateContainerElements(f),!p&&s&&o()}},{flush:"post"}),Tt(()=>l()),{hasFocus:r,isPaused:i,activate:o,deactivate:l,pause:c,unpause:h}}class ee{constructor(e,t=!0,s=[],n=5e3){this.ctx=e,this.iframes=t,this.exclude=s,this.iframesTimeout=n}static matches(e,t){const s=typeof t=="string"?[t]:t,n=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector;if(n){let r=!1;return s.every(i=>n.call(e,i)?(r=!0,!1):!0),r}else return!1}getContexts(){let e,t=[];return typeof this.ctx>"u"||!this.ctx?e=[]:NodeList.prototype.isPrototypeOf(this.ctx)?e=Array.prototype.slice.call(this.ctx):Array.isArray(this.ctx)?e=this.ctx:typeof this.ctx=="string"?e=Array.prototype.slice.call(document.querySelectorAll(this.ctx)):e=[this.ctx],e.forEach(s=>{const n=t.filter(r=>r.contains(s)).length>0;t.indexOf(s)===-1&&!n&&t.push(s)}),t}getIframeContents(e,t,s=()=>{}){let n;try{const r=e.contentWindow;if(n=r.document,!r||!n)throw new Error("iframe inaccessible")}catch{s()}n&&t(n)}isIframeBlank(e){const t="about:blank",s=e.getAttribute("src").trim();return e.contentWindow.location.href===t&&s!==t&&s}observeIframeLoad(e,t,s){let n=!1,r=null;const i=()=>{if(!n){n=!0,clearTimeout(r);try{this.isIframeBlank(e)||(e.removeEventListener("load",i),this.getIframeContents(e,t,s))}catch{s()}}};e.addEventListener("load",i),r=setTimeout(i,this.iframesTimeout)}onIframeReady(e,t,s){try{e.contentWindow.document.readyState==="complete"?this.isIframeBlank(e)?this.observeIframeLoad(e,t,s):this.getIframeContents(e,t,s):this.observeIframeLoad(e,t,s)}catch{s()}}waitForIframes(e,t){let s=0;this.forEachIframe(e,()=>!0,n=>{s++,this.waitForIframes(n.querySelector("html"),()=>{--s||t()})},n=>{n||t()})}forEachIframe(e,t,s,n=()=>{}){let r=e.querySelectorAll("iframe"),i=r.length,o=0;r=Array.prototype.slice.call(r);const l=()=>{--i<=0&&n(o)};i||l(),r.forEach(c=>{ee.matches(c,this.exclude)?l():this.onIframeReady(c,h=>{t(c)&&(o++,s(h)),l()},l)})}createIterator(e,t,s){return document.createNodeIterator(e,t,s,!1)}createInstanceOnIframe(e){return new ee(e.querySelector("html"),this.iframes)}compareNodeIframe(e,t,s){const n=e.compareDocumentPosition(s),r=Node.DOCUMENT_POSITION_PRECEDING;if(n&r)if(t!==null){const i=t.compareDocumentPosition(s),o=Node.DOCUMENT_POSITION_FOLLOWING;if(i&o)return!0}else return!0;return!1}getIteratorNode(e){const t=e.previousNode();let s;return t===null?s=e.nextNode():s=e.nextNode()&&e.nextNode(),{prevNode:t,node:s}}checkIframeFilter(e,t,s,n){let r=!1,i=!1;return n.forEach((o,l)=>{o.val===s&&(r=l,i=o.handled)}),this.compareNodeIframe(e,t,s)?(r===!1&&!i?n.push({val:s,handled:!0}):r!==!1&&!i&&(n[r].handled=!0),!0):(r===!1&&n.push({val:s,handled:!1}),!1)}handleOpenIframes(e,t,s,n){e.forEach(r=>{r.handled||this.getIframeContents(r.val,i=>{this.createInstanceOnIframe(i).forEachNode(t,s,n)})})}iterateThroughNodes(e,t,s,n,r){const i=this.createIterator(t,e,n);let o=[],l=[],c,h,f=()=>({prevNode:h,node:c}=this.getIteratorNode(i),c);for(;f();)this.iframes&&this.forEachIframe(t,p=>this.checkIframeFilter(c,h,p,o),p=>{this.createInstanceOnIframe(p).forEachNode(e,b=>l.push(b),n)}),l.push(c);l.forEach(p=>{s(p)}),this.iframes&&this.handleOpenIframes(o,e,s,n),r()}forEachNode(e,t,s,n=()=>{}){const r=this.getContexts();let i=r.length;i||n(),r.forEach(o=>{const l=()=>{this.iterateThroughNodes(e,o,t,s,()=>{--i<=0&&n()})};this.iframes?this.waitForIframes(o,l):l()})}}let ks=class{constructor(e){this.ctx=e,this.ie=!1;const t=window.navigator.userAgent;(t.indexOf("MSIE")>-1||t.indexOf("Trident")>-1)&&(this.ie=!0)}set opt(e){this._opt=Object.assign({},{element:"",className:"",exclude:[],iframes:!1,iframesTimeout:5e3,separateWordSearch:!0,diacritics:!0,synonyms:{},accuracy:"partially",acrossElements:!1,caseSensitive:!1,ignoreJoiners:!1,ignoreGroups:0,ignorePunctuation:[],wildcards:"disabled",each:()=>{},noMatch:()=>{},filter:()=>!0,done:()=>{},debug:!1,log:window.console},e)}get opt(){return this._opt}get iterator(){return new ee(this.ctx,this.opt.iframes,this.opt.exclude,this.opt.iframesTimeout)}log(e,t="debug"){const s=this.opt.log;this.opt.debug&&typeof s=="object"&&typeof s[t]=="function"&&s[t](`mark.js: ${e}`)}escapeStr(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}createRegExp(e){return this.opt.wildcards!=="disabled"&&(e=this.setupWildcardsRegExp(e)),e=this.escapeStr(e),Object.keys(this.opt.synonyms).length&&(e=this.createSynonymsRegExp(e)),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),this.opt.diacritics&&(e=this.createDiacriticsRegExp(e)),e=this.createMergedBlanksRegExp(e),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.createJoinersRegExp(e)),this.opt.wildcards!=="disabled"&&(e=this.createWildcardsRegExp(e)),e=this.createAccuracyRegExp(e),e}createSynonymsRegExp(e){const t=this.opt.synonyms,s=this.opt.caseSensitive?"":"i",n=this.opt.ignoreJoiners||this.opt.ignorePunctuation.length?"\0":"";for(let r in t)if(t.hasOwnProperty(r)){const i=t[r],o=this.opt.wildcards!=="disabled"?this.setupWildcardsRegExp(r):this.escapeStr(r),l=this.opt.wildcards!=="disabled"?this.setupWildcardsRegExp(i):this.escapeStr(i);o!==""&&l!==""&&(e=e.replace(new RegExp(`(${this.escapeStr(o)}|${this.escapeStr(l)})`,`gm${s}`),n+`(${this.processSynomyms(o)}|${this.processSynomyms(l)})`+n))}return e}processSynomyms(e){return(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),e}setupWildcardsRegExp(e){return e=e.replace(/(?:\\)*\?/g,t=>t.charAt(0)==="\\"?"?":""),e.replace(/(?:\\)*\*/g,t=>t.charAt(0)==="\\"?"*":"")}createWildcardsRegExp(e){let t=this.opt.wildcards==="withSpaces";return e.replace(/\u0001/g,t?"[\\S\\s]?":"\\S?").replace(/\u0002/g,t?"[\\S\\s]*?":"\\S*")}setupIgnoreJoinersRegExp(e){return e.replace(/[^(|)\\]/g,(t,s,n)=>{let r=n.charAt(s+1);return/[(|)\\]/.test(r)||r===""?t:t+"\0"})}createJoinersRegExp(e){let t=[];const s=this.opt.ignorePunctuation;return Array.isArray(s)&&s.length&&t.push(this.escapeStr(s.join(""))),this.opt.ignoreJoiners&&t.push("\\u00ad\\u200b\\u200c\\u200d"),t.length?e.split(/\u0000+/).join(`[${t.join("")}]*`):e}createDiacriticsRegExp(e){const t=this.opt.caseSensitive?"":"i",s=this.opt.caseSensitive?["aàáảãạăằắẳẵặâầấẩẫậäåāą","AÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćč","CÇĆČ","dđď","DĐĎ","eèéẻẽẹêềếểễệëěēę","EÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïī","IÌÍỈĨỊÎÏĪ","lł","LŁ","nñňń","NÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøō","OÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rř","RŘ","sšśșş","SŠŚȘŞ","tťțţ","TŤȚŢ","uùúủũụưừứửữựûüůū","UÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿ","YÝỲỶỸỴŸ","zžżź","ZŽŻŹ"]:["aàáảãạăằắẳẵặâầấẩẫậäåāąAÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćčCÇĆČ","dđďDĐĎ","eèéẻẽẹêềếểễệëěēęEÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïīIÌÍỈĨỊÎÏĪ","lłLŁ","nñňńNÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøōOÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rřRŘ","sšśșşSŠŚȘŞ","tťțţTŤȚŢ","uùúủũụưừứửữựûüůūUÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿYÝỲỶỸỴŸ","zžżźZŽŻŹ"];let n=[];return e.split("").forEach(r=>{s.every(i=>{if(i.indexOf(r)!==-1){if(n.indexOf(i)>-1)return!1;e=e.replace(new RegExp(`[${i}]`,`gm${t}`),`[${i}]`),n.push(i)}return!0})}),e}createMergedBlanksRegExp(e){return e.replace(/[\s]+/gmi,"[\\s]+")}createAccuracyRegExp(e){const t="!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~¡¿";let s=this.opt.accuracy,n=typeof s=="string"?s:s.value,r=typeof s=="string"?[]:s.limiters,i="";switch(r.forEach(o=>{i+=`|${this.escapeStr(o)}`}),n){case"partially":default:return`()(${e})`;case"complementary":return i="\\s"+(i||this.escapeStr(t)),`()([^${i}]*${e}[^${i}]*)`;case"exactly":return`(^|\\s${i})(${e})(?=$|\\s${i})`}}getSeparatedKeywords(e){let t=[];return e.forEach(s=>{this.opt.separateWordSearch?s.split(" ").forEach(n=>{n.trim()&&t.indexOf(n)===-1&&t.push(n)}):s.trim()&&t.indexOf(s)===-1&&t.push(s)}),{keywords:t.sort((s,n)=>n.length-s.length),length:t.length}}isNumeric(e){return Number(parseFloat(e))==e}checkRanges(e){if(!Array.isArray(e)||Object.prototype.toString.call(e[0])!=="[object Object]")return this.log("markRanges() will only accept an array of objects"),this.opt.noMatch(e),[];const t=[];let s=0;return e.sort((n,r)=>n.start-r.start).forEach(n=>{let{start:r,end:i,valid:o}=this.callNoMatchOnInvalidRanges(n,s);o&&(n.start=r,n.length=i-r,t.push(n),s=i)}),t}callNoMatchOnInvalidRanges(e,t){let s,n,r=!1;return e&&typeof e.start<"u"?(s=parseInt(e.start,10),n=s+parseInt(e.length,10),this.isNumeric(e.start)&&this.isNumeric(e.length)&&n-t>0&&n-s>0?r=!0:(this.log(`Ignoring invalid or overlapping range: ${JSON.stringify(e)}`),this.opt.noMatch(e))):(this.log(`Ignoring invalid range: ${JSON.stringify(e)}`),this.opt.noMatch(e)),{start:s,end:n,valid:r}}checkWhitespaceRanges(e,t,s){let n,r=!0,i=s.length,o=t-i,l=parseInt(e.start,10)-o;return l=l>i?i:l,n=l+parseInt(e.length,10),n>i&&(n=i,this.log(`End range automatically set to the max value of ${i}`)),l<0||n-l<0||l>i||n>i?(r=!1,this.log(`Invalid range: ${JSON.stringify(e)}`),this.opt.noMatch(e)):s.substring(l,n).replace(/\s+/g,"")===""&&(r=!1,this.log("Skipping whitespace only range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:l,end:n,valid:r}}getTextNodes(e){let t="",s=[];this.iterator.forEachNode(NodeFilter.SHOW_TEXT,n=>{s.push({start:t.length,end:(t+=n.textContent).length,node:n})},n=>this.matchesExclude(n.parentNode)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT,()=>{e({value:t,nodes:s})})}matchesExclude(e){return ee.matches(e,this.opt.exclude.concat(["script","style","title","head","html"]))}wrapRangeInTextNode(e,t,s){const n=this.opt.element?this.opt.element:"mark",r=e.splitText(t),i=r.splitText(s-t);let o=document.createElement(n);return o.setAttribute("data-markjs","true"),this.opt.className&&o.setAttribute("class",this.opt.className),o.textContent=r.textContent,r.parentNode.replaceChild(o,r),i}wrapRangeInMappedTextNode(e,t,s,n,r){e.nodes.every((i,o)=>{const l=e.nodes[o+1];if(typeof l>"u"||l.start>t){if(!n(i.node))return!1;const c=t-i.start,h=(s>i.end?i.end:s)-i.start,f=e.value.substr(0,i.start),p=e.value.substr(h+i.start);if(i.node=this.wrapRangeInTextNode(i.node,c,h),e.value=f+p,e.nodes.forEach((b,x)=>{x>=o&&(e.nodes[x].start>0&&x!==o&&(e.nodes[x].start-=h),e.nodes[x].end-=h)}),s-=h,r(i.node.previousSibling,i.start),s>i.end)t=i.end;else return!1}return!0})}wrapMatches(e,t,s,n,r){const i=t===0?0:t+1;this.getTextNodes(o=>{o.nodes.forEach(l=>{l=l.node;let c;for(;(c=e.exec(l.textContent))!==null&&c[i]!=="";){if(!s(c[i],l))continue;let h=c.index;if(i!==0)for(let f=1;f{let l;for(;(l=e.exec(o.value))!==null&&l[i]!=="";){let c=l.index;if(i!==0)for(let f=1;fs(l[i],f),(f,p)=>{e.lastIndex=p,n(f)})}r()})}wrapRangeFromIndex(e,t,s,n){this.getTextNodes(r=>{const i=r.value.length;e.forEach((o,l)=>{let{start:c,end:h,valid:f}=this.checkWhitespaceRanges(o,i,r.value);f&&this.wrapRangeInMappedTextNode(r,c,h,p=>t(p,o,r.value.substring(c,h),l),p=>{s(p,o)})}),n()})}unwrapMatches(e){const t=e.parentNode;let s=document.createDocumentFragment();for(;e.firstChild;)s.appendChild(e.removeChild(e.firstChild));t.replaceChild(s,e),this.ie?this.normalizeTextNode(t):t.normalize()}normalizeTextNode(e){if(e){if(e.nodeType===3)for(;e.nextSibling&&e.nextSibling.nodeType===3;)e.nodeValue+=e.nextSibling.nodeValue,e.parentNode.removeChild(e.nextSibling);else this.normalizeTextNode(e.firstChild);this.normalizeTextNode(e.nextSibling)}}markRegExp(e,t){this.opt=t,this.log(`Searching with expression "${e}"`);let s=0,n="wrapMatches";const r=i=>{s++,this.opt.each(i)};this.opt.acrossElements&&(n="wrapMatchesAcrossElements"),this[n](e,this.opt.ignoreGroups,(i,o)=>this.opt.filter(o,i,s),r,()=>{s===0&&this.opt.noMatch(e),this.opt.done(s)})}mark(e,t){this.opt=t;let s=0,n="wrapMatches";const{keywords:r,length:i}=this.getSeparatedKeywords(typeof e=="string"?[e]:e),o=this.opt.caseSensitive?"":"i",l=c=>{let h=new RegExp(this.createRegExp(c),`gm${o}`),f=0;this.log(`Searching with expression "${h}"`),this[n](h,1,(p,b)=>this.opt.filter(b,c,s,f),p=>{f++,s++,this.opt.each(p)},()=>{f===0&&this.opt.noMatch(c),r[i-1]===c?this.opt.done(s):l(r[r.indexOf(c)+1])})};this.opt.acrossElements&&(n="wrapMatchesAcrossElements"),i===0?this.opt.done(s):l(r[0])}markRanges(e,t){this.opt=t;let s=0,n=this.checkRanges(e);n&&n.length?(this.log("Starting to mark with the following ranges: "+JSON.stringify(n)),this.wrapRangeFromIndex(n,(r,i,o,l)=>this.opt.filter(r,i,o,l),(r,i)=>{s++,this.opt.each(r,i)},()=>{this.opt.done(s)})):this.opt.done(s)}unmark(e){this.opt=e;let t=this.opt.element?this.opt.element:"*";t+="[data-markjs]",this.opt.className&&(t+=`.${this.opt.className}`),this.log(`Removal selector "${t}"`),this.iterator.forEachNode(NodeFilter.SHOW_ELEMENT,s=>{this.unwrapMatches(s)},s=>{const n=ee.matches(s,t),r=this.matchesExclude(s);return!n||r?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT},this.opt.done)}};function Ns(a){const e=new ks(a);return this.mark=(t,s)=>(e.mark(t,s),this),this.markRegExp=(t,s)=>(e.markRegExp(t,s),this),this.markRanges=(t,s)=>(e.markRanges(t,s),this),this.unmark=t=>(e.unmark(t),this),this}const Fs="ENTRIES",pt="KEYS",vt="VALUES",R="";class Oe{constructor(e,t){const s=e._tree,n=Array.from(s.keys());this.set=e,this._type=t,this._path=n.length>0?[{node:s,keys:n}]:[]}next(){const e=this.dive();return this.backtrack(),e}dive(){if(this._path.length===0)return{done:!0,value:void 0};const{node:e,keys:t}=Z(this._path);if(Z(t)===R)return{done:!1,value:this.result()};const s=e.get(Z(t));return this._path.push({node:s,keys:Array.from(s.keys())}),this.dive()}backtrack(){if(this._path.length===0)return;const e=Z(this._path).keys;e.pop(),!(e.length>0)&&(this._path.pop(),this.backtrack())}key(){return this.set._prefix+this._path.map(({keys:e})=>Z(e)).filter(e=>e!==R).join("")}value(){return Z(this._path).node.get(R)}result(){switch(this._type){case vt:return this.value();case pt:return this.key();default:return[this.key(),this.value()]}}[Symbol.iterator](){return this}}const Z=a=>a[a.length-1],Os=(a,e,t)=>{const s=new Map;if(e===void 0)return s;const n=e.length+1,r=n+t,i=new Uint8Array(r*n).fill(t+1);for(let o=0;o{const l=r*i;e:for(const c of a.keys())if(c===R){const h=n[l-1];h<=t&&s.set(o,[a.get(c),h])}else{let h=r;for(let f=0;ft)continue e}mt(a.get(c),e,t,s,n,h,i,o+c)}};class U{constructor(e=new Map,t=""){this._size=void 0,this._tree=e,this._prefix=t}atPrefix(e){if(!e.startsWith(this._prefix))throw new Error("Mismatched prefix");const[t,s]=ke(this._tree,e.slice(this._prefix.length));if(t===void 0){const[n,r]=je(s);for(const i of n.keys())if(i!==R&&i.startsWith(r)){const o=new Map;return o.set(i.slice(r.length),n.get(i)),new U(o,e)}}return new U(t,e)}clear(){this._size=void 0,this._tree.clear()}delete(e){return this._size=void 0,Cs(this._tree,e)}entries(){return new Oe(this,Fs)}forEach(e){for(const[t,s]of this)e(t,s,this)}fuzzyGet(e,t){return Os(this._tree,e,t)}get(e){const t=ze(this._tree,e);return t!==void 0?t.get(R):void 0}has(e){const t=ze(this._tree,e);return t!==void 0&&t.has(R)}keys(){return new Oe(this,pt)}set(e,t){if(typeof e!="string")throw new Error("key must be a string");return this._size=void 0,Ce(this._tree,e).set(R,t),this}get size(){if(this._size)return this._size;this._size=0;const e=this.entries();for(;!e.next().done;)this._size+=1;return this._size}update(e,t){if(typeof e!="string")throw new Error("key must be a string");this._size=void 0;const s=Ce(this._tree,e);return s.set(R,t(s.get(R))),this}fetch(e,t){if(typeof e!="string")throw new Error("key must be a string");this._size=void 0;const s=Ce(this._tree,e);let n=s.get(R);return n===void 0&&s.set(R,n=t()),n}values(){return new Oe(this,vt)}[Symbol.iterator](){return this.entries()}static from(e){const t=new U;for(const[s,n]of e)t.set(s,n);return t}static fromObject(e){return U.from(Object.entries(e))}}const ke=(a,e,t=[])=>{if(e.length===0||a==null)return[a,t];for(const s of a.keys())if(s!==R&&e.startsWith(s))return t.push([a,s]),ke(a.get(s),e.slice(s.length),t);return t.push([a,e]),ke(void 0,"",t)},ze=(a,e)=>{if(e.length===0||a==null)return a;for(const t of a.keys())if(t!==R&&e.startsWith(t))return ze(a.get(t),e.slice(t.length))},Ce=(a,e)=>{const t=e.length;e:for(let s=0;a&&s{const[t,s]=ke(a,e);if(t!==void 0){if(t.delete(R),t.size===0)gt(s);else if(t.size===1){const[n,r]=t.entries().next().value;bt(s,n,r)}}},gt=a=>{if(a.length===0)return;const[e,t]=je(a);if(e.delete(t),e.size===0)gt(a.slice(0,-1));else if(e.size===1){const[s,n]=e.entries().next().value;s!==R&&bt(a.slice(0,-1),s,n)}},bt=(a,e,t)=>{if(a.length===0)return;const[s,n]=je(a);s.set(n+e,t),s.delete(n)},je=a=>a[a.length-1],Be="or",yt="and",Rs="and_not";class te{constructor(e){if(e?.fields==null)throw new Error('MiniSearch: option "fields" must be provided');const t=e.autoVacuum==null||e.autoVacuum===!0?Me:e.autoVacuum;this._options={...Ae,...e,autoVacuum:t,searchOptions:{...it,...e.searchOptions||{}},autoSuggestOptions:{...Ps,...e.autoSuggestOptions||{}}},this._index=new U,this._documentCount=0,this._documentIds=new Map,this._idToShortId=new Map,this._fieldIds={},this._fieldLength=new Map,this._avgFieldLength=[],this._nextId=0,this._storedFields=new Map,this._dirtCount=0,this._currentVacuum=null,this._enqueuedVacuum=null,this._enqueuedVacuumConditions=$e,this.addFields(this._options.fields)}add(e){const{extractField:t,stringifyField:s,tokenize:n,processTerm:r,fields:i,idField:o}=this._options,l=t(e,o);if(l==null)throw new Error(`MiniSearch: document does not have ID field "${o}"`);if(this._idToShortId.has(l))throw new Error(`MiniSearch: duplicate ID ${l}`);const c=this.addDocumentId(l);this.saveStoredFields(c,e);for(const h of i){const f=t(e,h);if(f==null)continue;const p=n(s(f,h),h),b=this._fieldIds[h],x=new Set(p).size;this.addFieldLength(c,b,this._documentCount-1,x);for(const S of p){const y=r(S,h);if(Array.isArray(y))for(const N of y)this.addTerm(b,c,N);else y&&this.addTerm(b,c,y)}}}addAll(e){for(const t of e)this.add(t)}addAllAsync(e,t={}){const{chunkSize:s=10}=t,n={chunk:[],promise:Promise.resolve()},{chunk:r,promise:i}=e.reduce(({chunk:o,promise:l},c,h)=>(o.push(c),(h+1)%s===0?{chunk:[],promise:l.then(()=>new Promise(f=>setTimeout(f,0))).then(()=>this.addAll(o))}:{chunk:o,promise:l}),n);return i.then(()=>this.addAll(r))}remove(e){const{tokenize:t,processTerm:s,extractField:n,stringifyField:r,fields:i,idField:o}=this._options,l=n(e,o);if(l==null)throw new Error(`MiniSearch: document does not have ID field "${o}"`);const c=this._idToShortId.get(l);if(c==null)throw new Error(`MiniSearch: cannot remove document with ID ${l}: it is not in the index`);for(const h of i){const f=n(e,h);if(f==null)continue;const p=t(r(f,h),h),b=this._fieldIds[h],x=new Set(p).size;this.removeFieldLength(c,b,this._documentCount,x);for(const S of p){const y=s(S,h);if(Array.isArray(y))for(const N of y)this.removeTerm(b,c,N);else y&&this.removeTerm(b,c,y)}}this._storedFields.delete(c),this._documentIds.delete(c),this._idToShortId.delete(l),this._fieldLength.delete(c),this._documentCount-=1}removeAll(e){if(e)for(const t of e)this.remove(t);else{if(arguments.length>0)throw new Error("Expected documents to be present. Omit the argument to remove all documents.");this._index=new U,this._documentCount=0,this._documentIds=new Map,this._idToShortId=new Map,this._fieldLength=new Map,this._avgFieldLength=[],this._storedFields=new Map,this._nextId=0}}discard(e){const t=this._idToShortId.get(e);if(t==null)throw new Error(`MiniSearch: cannot discard document with ID ${e}: it is not in the index`);this._idToShortId.delete(e),this._documentIds.delete(t),this._storedFields.delete(t),(this._fieldLength.get(t)||[]).forEach((s,n)=>{this.removeFieldLength(t,n,this._documentCount,s)}),this._fieldLength.delete(t),this._documentCount-=1,this._dirtCount+=1,this.maybeAutoVacuum()}maybeAutoVacuum(){if(this._options.autoVacuum===!1)return;const{minDirtFactor:e,minDirtCount:t,batchSize:s,batchWait:n}=this._options.autoVacuum;this.conditionalVacuum({batchSize:s,batchWait:n},{minDirtCount:t,minDirtFactor:e})}discardAll(e){const t=this._options.autoVacuum;try{this._options.autoVacuum=!1;for(const s of e)this.discard(s)}finally{this._options.autoVacuum=t}this.maybeAutoVacuum()}replace(e){const{idField:t,extractField:s}=this._options,n=s(e,t);this.discard(n),this.add(e)}vacuum(e={}){return this.conditionalVacuum(e)}conditionalVacuum(e,t){return this._currentVacuum?(this._enqueuedVacuumConditions=this._enqueuedVacuumConditions&&t,this._enqueuedVacuum!=null?this._enqueuedVacuum:(this._enqueuedVacuum=this._currentVacuum.then(()=>{const s=this._enqueuedVacuumConditions;return this._enqueuedVacuumConditions=$e,this.performVacuuming(e,s)}),this._enqueuedVacuum)):this.vacuumConditionsMet(t)===!1?Promise.resolve():(this._currentVacuum=this.performVacuuming(e),this._currentVacuum)}async performVacuuming(e,t){const s=this._dirtCount;if(this.vacuumConditionsMet(t)){const n=e.batchSize||Ve.batchSize,r=e.batchWait||Ve.batchWait;let i=1;for(const[o,l]of this._index){for(const[c,h]of l)for(const[f]of h)this._documentIds.has(f)||(h.size<=1?l.delete(c):h.delete(f));this._index.get(o).size===0&&this._index.delete(o),i%n===0&&await new Promise(c=>setTimeout(c,r)),i+=1}this._dirtCount-=s}await null,this._currentVacuum=this._enqueuedVacuum,this._enqueuedVacuum=null}vacuumConditionsMet(e){if(e==null)return!0;let{minDirtCount:t,minDirtFactor:s}=e;return t=t||Me.minDirtCount,s=s||Me.minDirtFactor,this.dirtCount>=t&&this.dirtFactor>=s}get isVacuuming(){return this._currentVacuum!=null}get dirtCount(){return this._dirtCount}get dirtFactor(){return this._dirtCount/(1+this._documentCount+this._dirtCount)}has(e){return this._idToShortId.has(e)}getStoredFields(e){const t=this._idToShortId.get(e);if(t!=null)return this._storedFields.get(t)}search(e,t={}){const{searchOptions:s}=this._options,n={...s,...t},r=this.executeQuery(e,t),i=[];for(const[o,{score:l,terms:c,match:h}]of r){const f=c.length||1,p={id:this._documentIds.get(o),score:l*f,terms:Object.keys(h),queryTerms:c,match:h};Object.assign(p,this._storedFields.get(o)),(n.filter==null||n.filter(p))&&i.push(p)}return e===te.wildcard&&n.boostDocument==null||i.sort(at),i}autoSuggest(e,t={}){t={...this._options.autoSuggestOptions,...t};const s=new Map;for(const{score:r,terms:i}of this.search(e,t)){const o=i.join(" "),l=s.get(o);l!=null?(l.score+=r,l.count+=1):s.set(o,{score:r,terms:i,count:1})}const n=[];for(const[r,{score:i,terms:o,count:l}]of s)n.push({suggestion:r,terms:o,score:i/l});return n.sort(at),n}get documentCount(){return this._documentCount}get termCount(){return this._index.size}static loadJSON(e,t){if(t==null)throw new Error("MiniSearch: loadJSON should be given the same options used when serializing the index");return this.loadJS(JSON.parse(e),t)}static async loadJSONAsync(e,t){if(t==null)throw new Error("MiniSearch: loadJSON should be given the same options used when serializing the index");return this.loadJSAsync(JSON.parse(e),t)}static getDefault(e){if(Ae.hasOwnProperty(e))return Re(Ae,e);throw new Error(`MiniSearch: unknown option "${e}"`)}static loadJS(e,t){const{index:s,documentIds:n,fieldLength:r,storedFields:i,serializationVersion:o}=e,l=this.instantiateMiniSearch(e,t);l._documentIds=xe(n),l._fieldLength=xe(r),l._storedFields=xe(i);for(const[c,h]of l._documentIds)l._idToShortId.set(h,c);for(const[c,h]of s){const f=new Map;for(const p of Object.keys(h)){let b=h[p];o===1&&(b=b.ds),f.set(parseInt(p,10),xe(b))}l._index.set(c,f)}return l}static async loadJSAsync(e,t){const{index:s,documentIds:n,fieldLength:r,storedFields:i,serializationVersion:o}=e,l=this.instantiateMiniSearch(e,t);l._documentIds=await _e(n),l._fieldLength=await _e(r),l._storedFields=await _e(i);for(const[h,f]of l._documentIds)l._idToShortId.set(f,h);let c=0;for(const[h,f]of s){const p=new Map;for(const b of Object.keys(f)){let x=f[b];o===1&&(x=x.ds),p.set(parseInt(b,10),await _e(x))}++c%1e3===0&&await wt(0),l._index.set(h,p)}return l}static instantiateMiniSearch(e,t){const{documentCount:s,nextId:n,fieldIds:r,averageFieldLength:i,dirtCount:o,serializationVersion:l}=e;if(l!==1&&l!==2)throw new Error("MiniSearch: cannot deserialize an index created with an incompatible version");const c=new te(t);return c._documentCount=s,c._nextId=n,c._idToShortId=new Map,c._fieldIds=r,c._avgFieldLength=i,c._dirtCount=o||0,c._index=new U,c}executeQuery(e,t={}){if(e===te.wildcard)return this.executeWildcardQuery(t);if(typeof e!="string"){const p={...t,...e,queries:void 0},b=e.queries.map(x=>this.executeQuery(x,p));return this.combineResults(b,p.combineWith)}const{tokenize:s,processTerm:n,searchOptions:r}=this._options,i={tokenize:s,processTerm:n,...r,...t},{tokenize:o,processTerm:l}=i,f=o(e).flatMap(p=>l(p)).filter(p=>!!p).map(Ds(i)).map(p=>this.executeQuerySpec(p,i));return this.combineResults(f,i.combineWith)}executeQuerySpec(e,t){const s={...this._options.searchOptions,...t},n=(s.fields||this._options.fields).reduce((S,y)=>({...S,[y]:Re(s.boost,y)||1}),{}),{boostDocument:r,weights:i,maxFuzzy:o,bm25:l}=s,{fuzzy:c,prefix:h}={...it.weights,...i},f=this._index.get(e.term),p=this.termResults(e.term,e.term,1,e.termBoost,f,n,r,l);let b,x;if(e.prefix&&(b=this._index.atPrefix(e.term)),e.fuzzy){const S=e.fuzzy===!0?.2:e.fuzzy,y=S<1?Math.min(o,Math.round(e.term.length*S)):S;y&&(x=this._index.fuzzyGet(e.term,y))}if(b)for(const[S,y]of b){const N=S.length-e.term.length;if(!N)continue;x?.delete(S);const F=h*S.length/(S.length+.3*N);this.termResults(e.term,S,F,e.termBoost,y,n,r,l,p)}if(x)for(const S of x.keys()){const[y,N]=x.get(S);if(!N)continue;const F=c*S.length/(S.length+N);this.termResults(e.term,S,F,e.termBoost,y,n,r,l,p)}return p}executeWildcardQuery(e){const t=new Map,s={...this._options.searchOptions,...e};for(const[n,r]of this._documentIds){const i=s.boostDocument?s.boostDocument(r,"",this._storedFields.get(n)):1;t.set(n,{score:i,terms:[],match:{}})}return t}combineResults(e,t=Be){if(e.length===0)return new Map;const s=t.toLowerCase(),n=As[s];if(!n)throw new Error(`Invalid combination operator: ${t}`);return e.reduce(n)||new Map}toJSON(){const e=[];for(const[t,s]of this._index){const n={};for(const[r,i]of s)n[r]=Object.fromEntries(i);e.push([t,n])}return{documentCount:this._documentCount,nextId:this._nextId,documentIds:Object.fromEntries(this._documentIds),fieldIds:this._fieldIds,fieldLength:Object.fromEntries(this._fieldLength),averageFieldLength:this._avgFieldLength,storedFields:Object.fromEntries(this._storedFields),dirtCount:this._dirtCount,index:e,serializationVersion:2}}termResults(e,t,s,n,r,i,o,l,c=new Map){if(r==null)return c;for(const h of Object.keys(i)){const f=i[h],p=this._fieldIds[h],b=r.get(p);if(b==null)continue;let x=b.size;const S=this._avgFieldLength[p];for(const y of b.keys()){if(!this._documentIds.has(y)){this.removeTerm(p,y,t),x-=1;continue}const N=o?o(this._documentIds.get(y),t,this._storedFields.get(y)):1;if(!N)continue;const F=b.get(y),$=this._fieldLength.get(y)[p],K=Ls(F,x,this._documentCount,$,S,l),V=s*n*f*N*K,D=c.get(y);if(D){D.score+=V,zs(D.terms,e);const P=Re(D.match,t);P?P.push(h):D.match[t]=[h]}else c.set(y,{score:V,terms:[e],match:{[t]:[h]}})}}return c}addTerm(e,t,s){const n=this._index.fetch(s,ot);let r=n.get(e);if(r==null)r=new Map,r.set(t,1),n.set(e,r);else{const i=r.get(t);r.set(t,(i||0)+1)}}removeTerm(e,t,s){if(!this._index.has(s)){this.warnDocumentChanged(t,e,s);return}const n=this._index.fetch(s,ot),r=n.get(e);r==null||r.get(t)==null?this.warnDocumentChanged(t,e,s):r.get(t)<=1?r.size<=1?n.delete(e):r.delete(t):r.set(t,r.get(t)-1),this._index.get(s).size===0&&this._index.delete(s)}warnDocumentChanged(e,t,s){for(const n of Object.keys(this._fieldIds))if(this._fieldIds[n]===t){this._options.logger("warn",`MiniSearch: document with ID ${this._documentIds.get(e)} has changed before removal: term "${s}" was not present in field "${n}". Removing a document after it has changed can corrupt the index!`,"version_conflict");return}}addDocumentId(e){const t=this._nextId;return this._idToShortId.set(e,t),this._documentIds.set(t,e),this._documentCount+=1,this._nextId+=1,t}addFields(e){for(let t=0;tObject.prototype.hasOwnProperty.call(a,e)?a[e]:void 0,As={[Be]:(a,e)=>{for(const t of e.keys()){const s=a.get(t);if(s==null)a.set(t,e.get(t));else{const{score:n,terms:r,match:i}=e.get(t);s.score=s.score+n,s.match=Object.assign(s.match,i),rt(s.terms,r)}}return a},[yt]:(a,e)=>{const t=new Map;for(const s of e.keys()){const n=a.get(s);if(n==null)continue;const{score:r,terms:i,match:o}=e.get(s);rt(n.terms,i),t.set(s,{score:n.score+r,terms:n.terms,match:Object.assign(n.match,o)})}return t},[Rs]:(a,e)=>{for(const t of e.keys())a.delete(t);return a}},Ms={k:1.2,b:.7,d:.5},Ls=(a,e,t,s,n,r)=>{const{k:i,b:o,d:l}=r;return Math.log(1+(t-e+.5)/(e+.5))*(l+a*(i+1)/(a+i*(1-o+o*s/n)))},Ds=a=>(e,t,s)=>{const n=typeof a.fuzzy=="function"?a.fuzzy(e,t,s):a.fuzzy||!1,r=typeof a.prefix=="function"?a.prefix(e,t,s):a.prefix===!0,i=typeof a.boostTerm=="function"?a.boostTerm(e,t,s):1;return{term:e,fuzzy:n,prefix:r,termBoost:i}},Ae={idField:"id",extractField:(a,e)=>a[e],stringifyField:(a,e)=>a.toString(),tokenize:a=>a.split(Vs),processTerm:a=>a.toLowerCase(),fields:void 0,searchOptions:void 0,storeFields:[],logger:(a,e)=>{typeof console?.[a]=="function"&&console[a](e)},autoVacuum:!0},it={combineWith:Be,prefix:!1,fuzzy:!1,maxFuzzy:6,boost:{},weights:{fuzzy:.45,prefix:.375},bm25:Ms},Ps={combineWith:yt,prefix:(a,e,t)=>e===t.length-1},Ve={batchSize:1e3,batchWait:10},$e={minDirtFactor:.1,minDirtCount:20},Me={...Ve,...$e},zs=(a,e)=>{a.includes(e)||a.push(e)},rt=(a,e)=>{for(const t of e)a.includes(t)||a.push(t)},at=({score:a},{score:e})=>e-a,ot=()=>new Map,xe=a=>{const e=new Map;for(const t of Object.keys(a))e.set(parseInt(t,10),a[t]);return e},_e=async a=>{const e=new Map;let t=0;for(const s of Object.keys(a))e.set(parseInt(s,10),a[s]),++t%1e3===0&&await wt(0);return e},wt=a=>new Promise(e=>setTimeout(e,a)),Vs=/[\n\r\p{Z}\p{P}]+/u;class $s{max;cache;constructor(e=10){this.max=e,this.cache=new Map}get(e){let t=this.cache.get(e);return t!==void 0&&(this.cache.delete(e),this.cache.set(e,t)),t}set(e,t){this.cache.has(e)?this.cache.delete(e):this.cache.size===this.max&&this.cache.delete(this.first()),this.cache.set(e,t)}first(){return this.cache.keys().next().value}clear(){this.cache.clear()}}const js=["aria-owns"],Bs={class:"shell"},Ws=["title"],Ks={class:"search-actions before"},Js=["title"],Us=["aria-activedescendant","aria-controls","placeholder"],qs={class:"search-actions"},Gs=["title"],Hs=["disabled","title"],Qs=["id","role","aria-labelledby"],Ys=["id","aria-selected"],Zs=["href","aria-label","onMouseenter","onFocusin","data-index"],Xs={class:"titles"},en=["innerHTML"],tn={class:"title main"},sn=["innerHTML"],nn={key:0,class:"excerpt-wrapper"},rn={key:0,class:"excerpt",inert:""},an=["innerHTML"],on={key:0,class:"no-results"},ln={class:"search-keyboard-shortcuts"},cn=["aria-label"],un=["aria-label"],dn=["aria-label"],hn=["aria-label"],fn=It({__name:"VPLocalSearchBox",emits:["close"],setup(a,{emit:e}){const t=e,s=X(),n=X(),r=X(Ht),i=kt(),{activate:o}=Is(s,{immediate:!0,allowOutsideClick:!0,clickOutsideDeactivates:!0,escapeDeactivates:!0}),{localeIndex:l,theme:c}=i,h=Ge(async()=>Ze(te.loadJSON((await r.value[l.value]?.())?.default,{fields:["title","titles","text"],storeFields:["title","titles"],searchOptions:{fuzzy:.2,prefix:!0,boost:{title:4,text:2,titles:1},...c.value.search?.provider==="local"&&c.value.search.options?.miniSearch?.searchOptions},...c.value.search?.provider==="local"&&c.value.search.options?.miniSearch?.options}))),p=he(()=>c.value.search?.provider==="local"&&c.value.search.options?.disableQueryPersistence===!0).value?oe(""):Nt("vitepress:local-search-filter",""),b=Ft("vitepress:local-search-detailed-list",c.value.search?.provider==="local"&&c.value.search.options?.detailedView===!0),x=he(()=>c.value.search?.provider==="local"&&(c.value.search.options?.disableDetailedView===!0||c.value.search.options?.detailedView===!1)),S=he(()=>{const m=c.value.search?.options??c.value.algolia;return m?.locales?.[l.value]?.translations?.button?.buttonText||m?.translations?.button?.buttonText||"Search"});Ot(()=>{x.value&&(b.value=!1)});const y=X([]),N=oe(!1);Le(p,()=>{N.value=!1});const F=Ge(async()=>{if(n.value)return Ze(new Ns(n.value))},null),$=new $s(16);Ct(()=>[h.value,p.value,b.value],async([m,v,w],A,z)=>{A?.[0]!==m&&$.clear();let L=!1;if(z(()=>{L=!0}),!m)return;y.value=m.search(v).slice(0,16),N.value=!0;const q=w?await Promise.all(y.value.map(M=>K(M.id))):[];if(L)return;for(const{id:M,mod:me}of q){const ge=M.slice(0,M.indexOf("#"));let ie=$.get(ge);if(ie)continue;ie=new Map,$.set(ge,ie);const re=me.default??me;if(re?.render||re?.setup){const G=Kt(re);G.config.warnHandler=()=>{},G.provide(Jt,i),Object.defineProperties(G.config.globalProperties,{$frontmatter:{get(){return i.frontmatter.value}},$params:{get(){return i.page.value.params}}});const We=document.createElement("div");G.mount(We),We.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(ae=>{const Ke=ae.querySelector("a")?.getAttribute("href"),Je=Ke?.startsWith("#")&&Ke.slice(1);if(!Je)return;let Ue="";for(;(ae=ae.nextElementSibling)&&!/^h[1-6]$/i.test(ae.tagName);)Ue+=ae.outerHTML;ie.set(Je,Ue)}),G.unmount()}if(L)return}const se=new Set;if(y.value=y.value.map(M=>{const[me,ge]=M.id.split("#"),re=$.get(me)?.get(ge)??"";for(const G in M.match)se.add(G);return{...M,text:re}}),await le(),L)return;await new Promise(M=>{F.value?.unmark({done:()=>{F.value?.markRegExp(T(se),{done:M})}})});const ne=s.value?.querySelectorAll(".result .excerpt")??[];for(const M of ne)M.querySelector('mark[data-markjs="true"]')?.scrollIntoView({block:"center"});n.value?.firstElementChild?.scrollIntoView({block:"start"})},{debounce:200,immediate:!0});async function K(m){const v=Ut(m.slice(0,m.indexOf("#")));try{if(!v)throw new Error(`Cannot find file for id: ${m}`);return{id:m,mod:await import(v)}}catch(w){return console.error(w),{id:m,mod:{}}}}const V=oe(),D=he(()=>p.value?.length<=0);function P(m=!0){V.value?.focus(),m&&V.value?.select()}Ne(()=>{P()});function ve(m){m.pointerType==="mouse"&&P()}const O=oe(-1),j=oe(!0);Le(y,m=>{O.value=m.length?0:-1,B()});function B(){le(()=>{document.querySelector(".result.selected")?.scrollIntoView({block:"nearest"})})}be("ArrowUp",m=>{m.preventDefault(),O.value--,O.value<0&&(O.value=y.value.length-1),j.value=!0,B()}),be("ArrowDown",m=>{m.preventDefault(),O.value++,O.value>=y.value.length&&(O.value=0),j.value=!0,B()});const I=Rt();be("Enter",m=>{if(m.isComposing||m.target instanceof HTMLButtonElement&&m.target.type!=="submit")return;const v=y.value[O.value];if(m.target instanceof HTMLInputElement&&!v){m.preventDefault();return}v&&(I.go(v.id),t("close"))}),be("Escape",()=>{t("close")});const d=At({modal:{displayDetails:"Display detailed list",resetButtonTitle:"Reset search",backButtonTitle:"Close search",noResultsText:"No results for",footer:{selectText:"to select",selectKeyAriaLabel:"enter",navigateText:"to navigate",navigateUpKeyAriaLabel:"up arrow",navigateDownKeyAriaLabel:"down arrow",closeText:"to close",closeKeyAriaLabel:"escape"}}});Ne(()=>{window.history.pushState(null,"",null)}),Mt("popstate",m=>{m.preventDefault(),t("close")});const g=Lt(Dt?document.body:null);Ne(()=>{le(()=>{g.value=!0,le().then(()=>o())})}),Pt(()=>{g.value=!1});function E(){p.value="",le().then(()=>P(!1))}function T(m){return new RegExp([...m].sort((v,w)=>w.length-v.length).map(v=>`(${qt(v)})`).join("|"),"gi")}function k(m){if(!j.value)return;const v=m.target?.closest(".result"),w=Number.parseInt(v?.dataset.index);w>=0&&w!==O.value&&(O.value=w),j.value=!1}return(m,v)=>(W(),zt(Wt,{to:"body"},[_("div",{ref_key:"el",ref:s,role:"button","aria-owns":y.value?.length?"localsearch-list":void 0,"aria-expanded":"true","aria-haspopup":"listbox","aria-labelledby":"localsearch-label",class:"VPLocalSearchBox"},[_("div",{class:"backdrop",onClick:v[0]||(v[0]=w=>m.$emit("close"))}),_("div",Bs,[_("form",{class:"search-bar",onPointerup:v[4]||(v[4]=w=>ve(w)),onSubmit:v[5]||(v[5]=Vt(()=>{},["prevent"]))},[_("label",{title:S.value,id:"localsearch-label",for:"localsearch-input"},[...v[7]||(v[7]=[_("span",{"aria-hidden":"true",class:"vpi-search search-icon local-search-icon"},null,-1)])],8,Ws),_("div",Ks,[_("button",{class:"back-button",title:C(d)("modal.backButtonTitle"),onClick:v[1]||(v[1]=w=>m.$emit("close"))},[...v[8]||(v[8]=[_("span",{class:"vpi-arrow-left local-search-icon"},null,-1)])],8,Js)]),$t(_("input",{ref_key:"searchInput",ref:V,"onUpdate:modelValue":v[2]||(v[2]=w=>Bt(p)?p.value=w:null),"aria-activedescendant":O.value>-1?"localsearch-item-"+O.value:void 0,"aria-autocomplete":"both","aria-controls":y.value?.length?"localsearch-list":void 0,"aria-labelledby":"localsearch-label",autocapitalize:"off",autocomplete:"off",autocorrect:"off",class:"search-input",id:"localsearch-input",enterkeyhint:"go",maxlength:"64",placeholder:S.value,spellcheck:"false",type:"search"},null,8,Us),[[jt,C(p)]]),_("div",qs,[x.value?ye("",!0):(W(),J("button",{key:0,class:He(["toggle-layout-button",{"detailed-list":C(b)}]),type:"button",title:C(d)("modal.displayDetails"),onClick:v[3]||(v[3]=w=>O.value>-1&&(b.value=!C(b)))},[...v[9]||(v[9]=[_("span",{class:"vpi-layout-list local-search-icon"},null,-1)])],10,Gs)),_("button",{class:"clear-button",type:"reset",disabled:D.value,title:C(d)("modal.resetButtonTitle"),onClick:E},[...v[10]||(v[10]=[_("span",{class:"vpi-delete local-search-icon"},null,-1)])],8,Hs)])],32),_("ul",{ref_key:"resultsEl",ref:n,id:y.value?.length?"localsearch-list":void 0,role:y.value?.length?"listbox":void 0,"aria-labelledby":y.value?.length?"localsearch-label":void 0,class:"results",onMousemove:k},[(W(!0),J(Ye,null,Qe(y.value,(w,A)=>(W(),J("li",{key:w.id,id:"localsearch-item-"+A,"aria-selected":O.value===A?"true":"false",role:"option"},[_("a",{href:w.id,class:He(["result",{selected:O.value===A}]),"aria-label":[...w.titles,w.title].join(" > "),onMouseenter:z=>!j.value&&(O.value=A),onFocusin:z=>O.value=A,onClick:v[6]||(v[6]=z=>m.$emit("close")),"data-index":A},[_("div",null,[_("div",Xs,[v[12]||(v[12]=_("span",{class:"title-icon"},"#",-1)),(W(!0),J(Ye,null,Qe(w.titles,(z,L)=>(W(),J("span",{key:L,class:"title"},[_("span",{class:"text",innerHTML:z},null,8,en),v[11]||(v[11]=_("span",{class:"vpi-chevron-right local-search-icon"},null,-1))]))),128)),_("span",tn,[_("span",{class:"text",innerHTML:w.title},null,8,sn)])]),C(b)?(W(),J("div",nn,[w.text?(W(),J("div",rn,[_("div",{class:"vp-doc",innerHTML:w.text},null,8,an)])):ye("",!0),v[13]||(v[13]=_("div",{class:"excerpt-gradient-bottom"},null,-1)),v[14]||(v[14]=_("div",{class:"excerpt-gradient-top"},null,-1))])):ye("",!0)])],42,Zs)],8,Ys))),128)),C(p)&&!y.value.length&&N.value?(W(),J("li",on,[ce(ue(C(d)("modal.noResultsText"))+' "',1),_("strong",null,ue(C(p)),1),v[15]||(v[15]=ce('" ',-1))])):ye("",!0)],40,Qs),_("div",ln,[_("span",null,[_("kbd",{"aria-label":C(d)("modal.footer.navigateUpKeyAriaLabel")},[...v[16]||(v[16]=[_("span",{class:"vpi-arrow-up navigate-icon"},null,-1)])],8,cn),_("kbd",{"aria-label":C(d)("modal.footer.navigateDownKeyAriaLabel")},[...v[17]||(v[17]=[_("span",{class:"vpi-arrow-down navigate-icon"},null,-1)])],8,un),ce(" "+ue(C(d)("modal.footer.navigateText")),1)]),_("span",null,[_("kbd",{"aria-label":C(d)("modal.footer.selectKeyAriaLabel")},[...v[18]||(v[18]=[_("span",{class:"vpi-corner-down-left navigate-icon"},null,-1)])],8,dn),ce(" "+ue(C(d)("modal.footer.selectText")),1)]),_("span",null,[_("kbd",{"aria-label":C(d)("modal.footer.closeKeyAriaLabel")},"esc",8,hn),ce(" "+ue(C(d)("modal.footer.closeText")),1)])])])],8,js)]))}}),gn=Gt(fn,[["__scopeId","data-v-400916ea"]]);export{gn as default};
diff --git a/assets/chunks/metadata.4c1f2235.js b/assets/chunks/metadata.4c1f2235.js
new file mode 100644
index 00000000..34e2358a
--- /dev/null
+++ b/assets/chunks/metadata.4c1f2235.js
@@ -0,0 +1 @@
+window.__VP_HASH_MAP__=JSON.parse("{\"01.全栈_00.overview.md\":\"DRHSs2EE\",\"01.全栈_01.ai native 工程思维_01.不止于代码：构建 ai 时代全栈工程师的“认知三层塔”.md\":\"DnAdo66b\",\"01.全栈_01.ai native 工程思维_02.重构开发者：ai 时代下的工程师能力图谱与演进指南.md\":\"BzWlQ04R\",\"01.全栈_01.ai native 工程思维_10.读 anthropic 研究报告，探寻 ai 时代的工程范式重塑.md\":\"BxS8ZWIM\",\"01.全栈_10.ai 编程实践指南_00.ai编程工具与资源.md\":\"0WWjtM47\",\"01.全栈_40.前端工程_01.react 设计哲学：ai 协作时代的组件化开发实践指南.md\":\"ip_V3kmi\",\"01.全栈_40.前端工程_02.css工程化.md\":\"DUPhvCof\",\"01.全栈_40.前端工程_03.jamstack 梳理与实践指南.md\":\"CdkgDOAk\",\"01.全栈_40.前端工程_11.react 服务端状态管理的范式转移与选型深度博弈.md\":\"BpMi6J2x\",\"01.全栈_60.网络与通信_01.从 http 到 websocket 的技术选型指南.md\":\"int3cA6G\",\"01.全栈_60.网络与通信_02.流式 http 与 sse 协议：从概念辨析到生产实践.md\":\"Cp-uzdUB\",\"01.全栈_60.网络与通信_03.退避轮询与长轮询的原理、实战与选型决策.md\":\"C2A_-RUG\",\"01.全栈_80.全栈基础素养_00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\":\"B1vmVkqI\",\"01.全栈_80.全栈基础素养_01.编译与调试 typescript 项目指南.md\":\"BHyEzAuH\",\"01.全栈_80.全栈基础素养_10.聊一聊 typescript 泛型.md\":\"BpsDJhtc\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_0.overview.md\":\"CwRE_Svk\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_1.前端模块化编程基础.md\":\"BVmOGo8x\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_2.不同模块化规范梳理.md\":\"CRGmbaTn\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_3.es modules 核心规范与实践解析.md\":\"fPkWGUxd\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_4.typescript 对模块化编程的增强.md\":\"hJ1lv1QY\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_5.模块化编程原则与最佳实践.md\":\"LTILHYsI\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_6.解析 nodejs 中的模块化.md\":\"CGHtK9Bj\",\"01.全栈_90.工具与资源推荐_90.全栈技术资源推荐.md\":\"BBjcdRsJ\",\"10.产品 sense_00.学习与实践全景.md\":\"BlAoRUPp\",\"10.产品 sense_01.产品观察与分析_11.ai-powered 搜索引擎观察分析：perplexity 与知识工作者.md\":\"BRTIJ78C\",\"10.产品 sense_02.新 t 型人_20.读后感：ai 原生时代的复合型人才，究竟需要怎样的特质？.md\":\"Xe0P5HJr\",\"10.产品 sense_02.新 t 型人_21.工程师如何构建产品 sense.md\":\"CO18rPj4\",\"10.产品 sense_04.产品创造与商业化_30.《小而美：持续盈利的经营法则》读后感.md\":\"gAigzrX9\",\"10.产品 sense_05.方法论_40.洞察力模型.md\":\"j-w2xxuV\",\"10.产品 sense_05.方法论_50.用经济学思维做产品.md\":\"CUbjYJmR\",\"20.ai 学习与实践_00.ai 学习与实践全景一览.md\":\"Bq7k-xXb\",\"20.ai 学习与实践_02.agent 系列_01.agent概览与综述.md\":\"DMvs5K_Q\",\"20.ai 学习与实践_02.agent 系列_02.agent 规划模块.md\":\"C3XAsz_e\",\"20.ai 学习与实践_02.agent 系列_03.构建 agentic 生态：将零散组件化为可持续的工作流.md\":\"Dzka5_K9\",\"20.ai 学习与实践_02.agent 系列_10.agent skills.md\":\"BYP2Q09s\",\"20.ai 学习与实践_04.社区活动与实践小项目_10.基于 claude agent sdk 搭建 deep research agent.md\":\"DtQSvR-M\",\"20.ai 学习与实践_04.社区活动与实践小项目_20.基于 claude agent sdk 搭建 agent.md\":\"CAQEdrbh\",\"20.ai 学习与实践_04.社区活动与实践小项目_60.数学小助手.md\":\"BVW8ytPR\",\"20.ai 学习与实践_04.社区活动与实践小项目_70.诗歌小精灵.md\":\"C1VKntBb\",\"20.ai 学习与实践_90.资源与工具推荐_01.好用的 ai 助手与工作站推荐.md\":\"DT78Ux7f\",\"20.ai 学习与实践_90.资源与工具推荐_11. llm api 平台推荐与选型指南.md\":\"qaanG5K2\",\"30.悦读时光_01.好书推荐.md\":\"lGftAF4x\",\"30.悦读时光_10.读书三要三不要.md\":\"BQj2m1KY\",\"30.悦读时光_21.如何甄别真正有用的信息.md\":\"C7EJFVmA\",\"31.开源洞察_00.overview.md\":\"DsfCImvx\",\"31.开源洞察_01.fetch-event-source 源码解读.md\":\"BP_UYyAh\",\"40.关于_01.关于我.md\":\"CkzMieuF\",\"40.关于_30.成长随笔_01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\":\"DJ7lWg_C\",\"40.关于_30.成长随笔_10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\":\"Cj12M61O\",\"40.关于_30.成长随笔_20.减肥这件小事阶段随笔汇总.md\":\"DNHfVn0b\",\"@pages_categoriespage.md\":\"DalPAP0h\",\"@pages_tagspage.md\":\"nlt9sHhH\",\"index.md\":\"CZC8OIc5\"}");function deserializeFunctions(r){return Array.isArray(r)?r.map(deserializeFunctions):typeof r=="object"&&r!==null?Object.keys(r).reduce((t,n)=>(t[n]=deserializeFunctions(r[n]),t),{}):typeof r=="string"&&r.startsWith("_vp-fn_")?new Function(`return ${r.slice(7)}`)():r};window.__VP_SITE_DATA__=deserializeFunctions(JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"Insight Stack\",\"description\":\"A digital garden exploring the intersection of Full-stack Engineering, Product Thinking, and LLMs.,Built with VitePress and vitepress-theme-teek. Focus on Full-stack Engineering, Product Thinking, and LLMs.,VitePress 拥有三种典型的知识管理形态：结构化、碎片化、体系化，可以轻松构建一个结构化知识库，适用个人博客、文档站、知识库等场景\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"teekTheme\":true,\"teekHome\":true,\"vpHome\":false,\"sidebarTrigger\":true,\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"banner\":{\"enabled\":true,\"name\":\"\",\"bgStyle\":\"pure\",\"pureBgColor\":\"#F7F5FA\",\"imgSrc\":[\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/image.png\"],\"mask\":false,\"descStyle\":\"switch\",\"description\":[\"Insight Stack = 工程基座 × 产品思维 × AI 原力\",\"真正的好产品是让技术隐入背景，让交互因共鸣而生\"]},\"homeCardListPosition\":\"right\",\"homeCardSort\":[\"topArticle\",\"category\",\"tag\",\"docAnalysis\",\"friendLink\"],\"topArticle\":{\"enabled\":true,\"limit\":3,\"autoPage\":false,\"pageSpeed\":4000,\"dateFormat\":\"yyyy-MM-dd\"},\"category\":{\"enabled\":false,\"limit\":8,\"autoPage\":false,\"pageSpeed\":4000},\"friendLink\":{\"enabled\":false,\"limit\":5,\"list\":[{\"avatar\":\"https://vitepress.dev/vitepress-logo-large.svg\",\"name\":\"VitePress\",\"desc\":\"Vue 驱动的静态站点生成器\",\"link\":\"https://vitepress.dev/\"},{\"avatar\":\"https://vp.teek.top/teek-logo-large.png\",\"name\":\"vitepress-theme-teek\",\"desc\":\"Teek官网\",\"link\":\"https://vp.teek.top/\"}]},\"docAnalysis\":{\"enabled\":false},\"footerInfo\":{\"theme\":{\"name\":\"Theme By Teek@1.5.2\"},\"copyright\":{\"createYear\":2017,\"suffix\":\"Sqliang\"}},\"codeBlock\":{\"enabled\":false,\"collapseHeight\":700,\"overlay\":true,\"overlayHeight\":400,\"copiedDone\":\"_vp-fn_(TkMessage) => TkMessage.success(\\\"\\\\u590D\\\\u5236\\\\u6210\\\\u529F\\\\uFF01\\\")\"},\"articleShare\":{\"enabled\":true},\"articleUpdate\":{\"enabled\":false},\"post\":{},\"themeEnhance\":{\"layoutSwitch\":{\"defaultMode\":\"fullWidth\"}},\"logo\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/favicon.png\",\"darkModeSwitchLabel\":\"主题\",\"sidebarMenuLabel\":\"菜单\",\"returnToTopLabel\":\"返回顶部\",\"lastUpdatedText\":\"上次更新时间\",\"outline\":{\"level\":[2,4],\"label\":\"本页导航\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"全栈\",\"items\":[{\"text\":\"\\n \\n 全景一览\\n
\\n \",\"link\":\"/fullstack/overview\",\"activeMatch\":\"01.全栈/00.overview\"},{\"text\":\"\\n \\n AI Native 工程思维\\n
\\n \",\"link\":\"/fullstack/ai-native\",\"activeMatch\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\"},{\"text\":\"\\n \\n AI 编程实践指南\\n
\\n \",\"link\":\"/ai-learning/ai-coding-resources\",\"activeMatch\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\"},{\"text\":\"\\n \\n 前端工程\\n
\\n \",\"link\":\"/fullstack/react-design-philosophy-ai-augmented\",\"activeMatch\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\"},{\"text\":\"\\n \\n 网络与通信\\n
\\n \",\"link\":\"/fullstack/networking-protocol-selection-guide\",\"activeMatch\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\"},{\"text\":\"\\n \\n 全栈基础素养\\n
\\n \",\"link\":\"/fullstack/occams-razor-software-design\",\"activeMatch\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\"},{\"text\":\"\\n \\n 工具与资源推荐\\n
\\n \",\"link\":\"/growth/full-stack-resources\",\"activeMatch\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\"}],\"activeMatch\":\"01.全栈/90.工具与资源推荐\"},{\"text\":\"AI 学习与实践\",\"items\":[{\"text\":\"\\n \\n 全景一览\\n
\\n \",\"link\":\"/ai-learning/overview\",\"activeMatch\":\"20.AI 学习与实践/00.AI 学习与实践全景一览\"},{\"text\":\"\\n \\n Agent 系列\\n
\\n \",\"link\":\"/ai-agent/overview\",\"activeMatch\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\"},{\"text\":\"\\n \\n 社区活动与实践小项目\\n
\\n \",\"link\":\"/ai-agent/deepresearch-agent\",\"activeMatch\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\"},{\"text\":\"\\n \\n 工具与资源推荐\\n
\\n \",\"link\":\"/ai-learning/tools-assistant\",\"activeMatch\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\"}],\"activeMatch\":\"20.AI 学习与实践/90.资源与工具推荐\"},{\"text\":\"产品 Sense\",\"items\":[{\"text\":\"\\n \\n 全景一览\\n
\\n \",\"link\":\"/product-sense\",\"activeMatch\":\"10.产品 Sense/00.学习与实践全景\"},{\"text\":\"\\n \\n 产品观察与分析\\n
\\n \",\"link\":\"/product-sense/perplexity-knowledge-worker\",\"activeMatch\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\"},{\"text\":\"\\n \\n 新 T 型人\\n
\\n \",\"link\":\"/product-sense/ai-native-composite-talents\",\"activeMatch\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\"},{\"text\":\"\\n \\n 产品创造与商业化\\n
\\n \",\"link\":\"/product-sense/small-rule-learn\",\"activeMatch\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\"},{\"text\":\"\\n \\n 方法论\\n
\\n \",\"link\":\"/product-sense/insight-model\",\"activeMatch\":\"10.产品 Sense/05.方法论/40.洞察力模型\"}],\"activeMatch\":\"10.产品 Sense/05.方法论\"},{\"text\":\"开源洞察\",\"link\":\"/repo-insight/overview\",\"activeMatch\":\"31.开源洞察/00.overview\"},{\"text\":\"悦读拾光\",\"items\":[{\"text\":\"好书推荐\",\"link\":\" /growth/books\"},{\"text\":\"读书“三要”和“三不要”\",\"link\":\"/pages/growth/reading-tips\",\"activeMatch\":\"30.悦读时光/10.读书三要三不要\"},{\"text\":\"如何甄别真正有用的信息\",\"link\":\"/growth/distinguish-useful-information\",\"activeMatch\":\"30.悦读时光/21.如何甄别真正有用的信息\"}],\"activeMatch\":\"30.悦读时光\"},{\"text\":\"关于\",\"items\":[{\"text\":\"关于我\",\"link\":\"/about/me\",\"activeMatch\":\"40.关于/01.关于我\"},{\"text\":\"关于本站\",\"link\":\"/about/me#关于本站\"},{\"text\":\"成长随笔\",\"link\":\"/growth/outer-experience\",\"activeMatch\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\"}],\"activeMatch\":\"40.关于/30.成长随笔\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/sqliang\"},{\"icon\":{\"svg\":\"\"},\"link\":\"mailto:hfutsqliang@qq.com\"}],\"search\":{\"provider\":\"local\"},\"sidebar\":{\"/01.全栈/\":[{\"text\":\"全景一览\",\"collapsed\":true,\"link\":\"/01.全栈/00.overview\"},{\"text\":\"AI Native 工程思维\",\"collapsed\":true,\"items\":[{\"text\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"collapsed\":true,\"link\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\"},{\"text\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"collapsed\":true,\"link\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\"},{\"text\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"collapsed\":true,\"link\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\"}]},{\"text\":\"AI 编程实践指南\",\"collapsed\":true,\"items\":[{\"text\":\"AI 编程工具与资源推荐\",\"collapsed\":true,\"link\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\"}]},{\"text\":\"前端工程\",\"collapsed\":true,\"items\":[{\"text\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\"},{\"text\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/02.CSS工程化\"},{\"text\":\"JAMStack 梳理与实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\"},{\"text\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\"}]},{\"text\":\"网络与通信\",\"collapsed\":true,\"items\":[{\"text\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"collapsed\":true,\"link\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\"},{\"text\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"collapsed\":true,\"link\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\"},{\"text\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"collapsed\":true,\"link\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\"}]},{\"text\":\"全栈基础素养\",\"collapsed\":true,\"items\":[{\"text\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\"},{\"text\":\"TypeScript 编译与调试完全指南\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\"},{\"text\":\"聊一聊 TypeScript 中的泛型\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\"},{\"text\":\"模块化编程实践指南\",\"collapsed\":true,\"items\":[{\"text\":\"模块化编程实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\"},{\"text\":\"模块化编程初体验：概念、演进与设计模式\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\"},{\"text\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\"},{\"text\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\"},{\"text\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\"},{\"text\":\"模块化编程原则梳理与总结\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\"},{\"text\":\"Node.js 模块化编程梳理与总结\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\"}]}]},{\"text\":\"工具与资源推荐\",\"collapsed\":true,\"items\":[{\"text\":\"全栈技术资源推荐\",\"collapsed\":true,\"link\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\"}]}],\"/10.产品 Sense/\":[{\"text\":\"学习与实践全景\",\"collapsed\":true,\"link\":\"/10.产品 Sense/00.学习与实践全景\"},{\"text\":\"产品观察与分析\",\"collapsed\":true,\"items\":[{\"text\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"collapsed\":true,\"link\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\"}]},{\"text\":\"新 T 型人\",\"collapsed\":true,\"items\":[{\"text\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"collapsed\":true,\"link\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\"},{\"text\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"collapsed\":true,\"link\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\"}]},{\"text\":\"产品创造与商业化\",\"collapsed\":true,\"items\":[{\"text\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"collapsed\":true,\"link\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\"}]},{\"text\":\"方法论\",\"collapsed\":true,\"items\":[{\"text\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"collapsed\":true,\"link\":\"/10.产品 Sense/05.方法论/40.洞察力模型\"},{\"text\":\"用经济学思维做产品\",\"collapsed\":true,\"link\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\"}]}],\"/20.AI 学习与实践/\":[{\"text\":\"AI 学习与实践全景\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\"},{\"text\":\"Agent 系列\",\"collapsed\":true,\"items\":[{\"text\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\"},{\"text\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\"},{\"text\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\"},{\"text\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\"}]},{\"text\":\"社区活动与实践小项目\",\"collapsed\":true,\"items\":[{\"text\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\"},{\"text\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\"},{\"text\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\"},{\"text\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\"}]},{\"text\":\"资源与工具推荐\",\"collapsed\":true,\"items\":[{\"text\":\"好用的 AI 助手与工作站推荐\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\"},{\"text\":\"LLM API 平台推荐与选型指南\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\"}]}],\"/30.悦读时光/\":[{\"text\":\"好书推荐\",\"collapsed\":true,\"link\":\"/30.悦读时光/01.好书推荐\"},{\"text\":\"读书“三要”和“三不要”\",\"collapsed\":true,\"link\":\"/30.悦读时光/10.读书三要三不要\"},{\"text\":\"如何甄别真正有用的信息\",\"collapsed\":true,\"link\":\"/30.悦读时光/21.如何甄别真正有用的信息\"}],\"/31.开源洞察/\":[{\"text\":\"开源洞察\",\"collapsed\":true,\"link\":\"/31.开源洞察/00.overview\"},{\"text\":\"fetch-event-source 源码解读\",\"collapsed\":true,\"link\":\"/31.开源洞察/01.fetch-event-source 源码解读\"}],\"/40.关于/\":[{\"text\":\"关于我\",\"collapsed\":true,\"link\":\"/40.关于/01.关于我\"},{\"text\":\"成长随笔\",\"collapsed\":true,\"items\":[{\"text\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"collapsed\":true,\"link\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\"},{\"text\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"collapsed\":true,\"link\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\"},{\"text\":\"用科学与迭代改善的方式推动减肥这件小事\",\"collapsed\":true,\"link\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\"}]}]},\"permalinks\":{\"map\":{\"01.全栈/00.overview\":\"/fullstack/overview\",\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\":\"/fullstack/ai-native\",\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\":\"/fullstack/ai-engineer-capability\",\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\":\"/fullstack/ai-change-work-workflow\",\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\":\"/ai-learning/ai-coding-resources\",\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\":\"/fullstack/react-design-philosophy-ai-augmented\",\"01.全栈/40.前端工程/02.CSS工程化\":\"/full-stack/css-engineering\",\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\":\"/fullstack/jamstack\",\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\":\"/fullstack/server-state-management\",\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\":\"/fullstack/networking-protocol-selection-guide\",\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\":\"/fullstack/networking/sse-practice\",\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\":\"/fullstack/networking-polling-optimization\",\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\":\"/fullstack/occams-razor-software-design\",\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\":\"/fullstack/typescript-compilation-debugging-guide\",\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\":\"/fullstack/typescript-generic-types\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\":\"/fullstack/module-programming-practice-guide\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\":\"/fullstack/frontend-module-programming-basic\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\":\"/fullstack/different-module-programming-specifications\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\":\"/fullstack/decode-es-modules\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\":\"/fullstack/typescript-module-programming-enhancement\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\":\"/fullstack/module-programming-principles-best-practices\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\":\"/fullstack/nodejs-module-programming-summary\",\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\":\"/growth/full-stack-resources\",\"10.产品 Sense/00.学习与实践全景\":\"/product-sense\",\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\":\"/product-sense/perplexity-knowledge-worker\",\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\":\"/product-sense/ai-native-composite-talents\",\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\":\"/product-sense/engineer-build-product-sense\",\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\":\"/product-sense/small-rule-learn\",\"10.产品 Sense/05.方法论/40.洞察力模型\":\"/product-sense/insight-model\",\"10.产品 Sense/05.方法论/50.用经济学思维做产品\":\"/product-sense/using-economics-thinking\",\"20.AI 学习与实践/00.AI 学习与实践全景一览\":\"/ai-learning/overview\",\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\":\"/ai-agent/overview\",\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\":\"/ai-agent/planning-module\",\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\":\"/ai-agent/composition-ai-components\",\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills\":\"/ai-agent/skills-practice-summary\",\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\":\"/ai-agent/deepresearch-agent\",\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\":\"/ai-practice/claude-agent-sdk-basic-build\",\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\":\"/ai-practice/math-bot\",\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\":\"/ai-practice/poetry-bot\",\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\":\"/ai-learning/tools-assistant\",\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\":\"/ai-learning/llm-api-resources\",\"30.悦读时光/01.好书推荐\":\"/growth/books\",\"30.悦读时光/10.读书三要三不要\":\"/pages/growth/reading-tips\",\"30.悦读时光/21.如何甄别真正有用的信息\":\"/growth/distinguish-useful-information\",\"31.开源洞察/00.overview\":\"/repo-insight/overview\",\"31.开源洞察/01.fetch-event-source 源码解读\":\"/repo-insight/fetch-event-source\",\"40.关于/01.关于我\":\"/about/me\",\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\":\"/growth/outer-experience\",\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\":\"/growth/inner-experience\",\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\":\"/growth/weight-loss\",\"@pages/categoriesPage\":\"/categories\",\"@pages/tagsPage\":\"/tags\"},\"inv\":{\"/fullstack/overview\":\"01.全栈/00.overview\",\"/fullstack/ai-native\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"/fullstack/ai-engineer-capability\":\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"/fullstack/ai-change-work-workflow\":\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"/ai-learning/ai-coding-resources\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"/fullstack/react-design-philosophy-ai-augmented\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"/full-stack/css-engineering\":\"01.全栈/40.前端工程/02.CSS工程化\",\"/fullstack/jamstack\":\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"/fullstack/server-state-management\":\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"/fullstack/networking-protocol-selection-guide\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"/fullstack/networking/sse-practice\":\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"/fullstack/networking-polling-optimization\":\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"/fullstack/occams-razor-software-design\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"/fullstack/typescript-compilation-debugging-guide\":\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"/fullstack/typescript-generic-types\":\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"/fullstack/module-programming-practice-guide\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"/fullstack/frontend-module-programming-basic\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"/fullstack/different-module-programming-specifications\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"/fullstack/decode-es-modules\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"/fullstack/typescript-module-programming-enhancement\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"/fullstack/module-programming-principles-best-practices\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"/fullstack/nodejs-module-programming-summary\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"/growth/full-stack-resources\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"/product-sense\":\"10.产品 Sense/00.学习与实践全景\",\"/product-sense/perplexity-knowledge-worker\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"/product-sense/ai-native-composite-talents\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"/product-sense/engineer-build-product-sense\":\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"/product-sense/small-rule-learn\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"/product-sense/insight-model\":\"10.产品 Sense/05.方法论/40.洞察力模型\",\"/product-sense/using-economics-thinking\":\"10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"/ai-learning/overview\":\"20.AI 学习与实践/00.AI 学习与实践全景一览\",\"/ai-agent/overview\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"/ai-agent/planning-module\":\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"/ai-agent/composition-ai-components\":\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"/ai-agent/skills-practice-summary\":\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"/ai-agent/deepresearch-agent\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"/ai-practice/claude-agent-sdk-basic-build\":\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"/ai-practice/math-bot\":\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"/ai-practice/poetry-bot\":\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"/ai-learning/tools-assistant\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"/ai-learning/llm-api-resources\":\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"/growth/books\":\"30.悦读时光/01.好书推荐\",\"/pages/growth/reading-tips\":\"30.悦读时光/10.读书三要三不要\",\"/growth/distinguish-useful-information\":\"30.悦读时光/21.如何甄别真正有用的信息\",\"/repo-insight/overview\":\"31.开源洞察/00.overview\",\"/repo-insight/fetch-event-source\":\"31.开源洞察/01.fetch-event-source 源码解读\",\"/about/me\":\"40.关于/01.关于我\",\"/growth/outer-experience\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"/growth/inner-experience\":\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"/growth/weight-loss\":\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"/categories\":\"@pages/categoriesPage\",\"/tags\":\"@pages/tagsPage\"}},\"docAnalysisInfo\":{\"fileList\":[{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/00.overview.md\",\"relativePath\":\"01.全栈/00.overview.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\",\"relativePath\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/02.CSS工程化.md\",\"relativePath\":\"01.全栈/40.前端工程/02.CSS工程化.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\",\"relativePath\":\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\",\"relativePath\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\",\"relativePath\":\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\",\"relativePath\":\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\",\"relativePath\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/00.学习与实践全景.md\",\"relativePath\":\"10.产品 Sense/00.学习与实践全景.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\",\"relativePath\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\",\"relativePath\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/40.洞察力模型.md\",\"relativePath\":\"10.产品 Sense/05.方法论/40.洞察力模型.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/50.用经济学思维做产品.md\",\"relativePath\":\"10.产品 Sense/05.方法论/50.用经济学思维做产品.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/00.AI 学习与实践全景一览.md\",\"relativePath\":\"20.AI 学习与实践/00.AI 学习与实践全景一览.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/01.好书推荐.md\",\"relativePath\":\"30.悦读时光/01.好书推荐.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/10.读书三要三不要.md\",\"relativePath\":\"30.悦读时光/10.读书三要三不要.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/21.如何甄别真正有用的信息.md\",\"relativePath\":\"30.悦读时光/21.如何甄别真正有用的信息.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/31.开源洞察/00.overview.md\",\"relativePath\":\"31.开源洞察/00.overview.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/31.开源洞察/01.fetch-event-source 源码解读.md\",\"relativePath\":\"31.开源洞察/01.fetch-event-source 源码解读.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/01.关于我.md\",\"relativePath\":\"40.关于/01.关于我.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\",\"relativePath\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\",\"relativePath\":\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\",\"relativePath\":\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\"}],\"totalFileWords\":177555,\"eachFileWords\":[{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/00.overview.md\",\"relativePath\":\"01.全栈/00.overview.md\"},\"wordCount\":21,\"readingTime\":\"1m\",\"frontmatter\":{\"date\":{},\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\"},\"wordCount\":2017,\"readingTime\":\"7.2m\",\"frontmatter\":{\"date\":{},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\"},\"wordCount\":3614,\"readingTime\":\"12.9m\",\"frontmatter\":{\"date\":{},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\"},\"wordCount\":4407,\"readingTime\":\"15.2m\",\"frontmatter\":{\"date\":{},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\",\"relativePath\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\"},\"wordCount\":3472,\"readingTime\":\"13.3m\",\"frontmatter\":{\"date\":{},\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\"},\"wordCount\":5038,\"readingTime\":\"17.6m\",\"frontmatter\":{\"date\":{},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/02.CSS工程化.md\",\"relativePath\":\"01.全栈/40.前端工程/02.CSS工程化.md\"},\"wordCount\":9015,\"readingTime\":\"34.1m\",\"frontmatter\":{\"date\":{},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\"},\"wordCount\":3628,\"readingTime\":\"15m\",\"frontmatter\":{\"date\":{},\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\",\"relativePath\":\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\"},\"wordCount\":4949,\"readingTime\":\"19.2m\",\"frontmatter\":{\"date\":{},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\",\"relativePath\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\"},\"wordCount\":6770,\"readingTime\":\"23.9m\",\"frontmatter\":{\"date\":{},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\",\"relativePath\":\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\"},\"wordCount\":6634,\"readingTime\":\"26.8m\",\"frontmatter\":{\"date\":{},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\",\"relativePath\":\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\"},\"wordCount\":3295,\"readingTime\":\"12.1m\",\"frontmatter\":{\"date\":{},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\"},\"wordCount\":3233,\"readingTime\":\"11.6m\",\"frontmatter\":{\"date\":{},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\"},\"wordCount\":5040,\"readingTime\":\"20m\",\"frontmatter\":{\"date\":{},\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\"},\"wordCount\":5614,\"readingTime\":\"21.5m\",\"frontmatter\":{\"date\":{},\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\"},\"wordCount\":7414,\"readingTime\":\"30.9m\",\"frontmatter\":{\"date\":{},\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\"},\"wordCount\":2099,\"readingTime\":\"7.8m\",\"frontmatter\":{\"date\":{},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\"},\"wordCount\":1889,\"readingTime\":\"7.2m\",\"frontmatter\":{\"date\":{},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\"},\"wordCount\":1767,\"readingTime\":\"7.5m\",\"frontmatter\":{\"date\":{},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\"},\"wordCount\":1576,\"readingTime\":\"6.1m\",\"frontmatter\":{\"date\":{},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\"},\"wordCount\":1303,\"readingTime\":\"4.9m\",\"frontmatter\":{\"date\":{},\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\"},\"wordCount\":1240,\"readingTime\":\"4.7m\",\"frontmatter\":{\"date\":{},\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\",\"relativePath\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\"},\"wordCount\":7425,\"readingTime\":\"30.1m\",\"frontmatter\":{\"date\":{},\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/00.学习与实践全景.md\",\"relativePath\":\"10.产品 Sense/00.学习与实践全景.md\"},\"wordCount\":429,\"readingTime\":\"1.5m\",\"frontmatter\":{\"date\":{},\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\",\"relativePath\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\"},\"wordCount\":1833,\"readingTime\":\"6.3m\",\"frontmatter\":{\"date\":{},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\"},\"wordCount\":1994,\"readingTime\":\"6.8m\",\"frontmatter\":{\"date\":{},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\"},\"wordCount\":4356,\"readingTime\":\"15m\",\"frontmatter\":{\"date\":{},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\",\"relativePath\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\"},\"wordCount\":1982,\"readingTime\":\"6.8m\",\"frontmatter\":{\"date\":{},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/40.洞察力模型.md\",\"relativePath\":\"10.产品 Sense/05.方法论/40.洞察力模型.md\"},\"wordCount\":2572,\"readingTime\":\"9m\",\"frontmatter\":{\"date\":{},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/50.用经济学思维做产品.md\",\"relativePath\":\"10.产品 Sense/05.方法论/50.用经济学思维做产品.md\"},\"wordCount\":3150,\"readingTime\":\"10.7m\",\"frontmatter\":{\"date\":{},\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/00.AI 学习与实践全景一览.md\",\"relativePath\":\"20.AI 学习与实践/00.AI 学习与实践全景一览.md\"},\"wordCount\":25,\"readingTime\":\"1m\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":{},\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\"},\"wordCount\":6363,\"readingTime\":\"22.1m\",\"frontmatter\":{\"date\":{},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\"},\"wordCount\":3028,\"readingTime\":\"10.6m\",\"frontmatter\":{\"date\":{},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\"},\"wordCount\":2685,\"readingTime\":\"9.4m\",\"frontmatter\":{\"date\":{},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\"},\"wordCount\":3915,\"readingTime\":\"14.6m\",\"frontmatter\":{\"date\":{},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\"},\"wordCount\":2889,\"readingTime\":\"11m\",\"frontmatter\":{\"date\":{},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\"},\"wordCount\":2778,\"readingTime\":\"11.2m\",\"frontmatter\":{\"date\":{},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\"},\"wordCount\":2122,\"readingTime\":\"7.2m\",\"frontmatter\":{\"date\":{},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\"},\"wordCount\":4145,\"readingTime\":\"14.2m\",\"frontmatter\":{\"date\":{},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\"},\"wordCount\":5451,\"readingTime\":\"20.6m\",\"frontmatter\":{\"date\":{},\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\"},\"wordCount\":3534,\"readingTime\":\"13.6m\",\"frontmatter\":{\"date\":{},\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/01.好书推荐.md\",\"relativePath\":\"30.悦读时光/01.好书推荐.md\"},\"wordCount\":1847,\"readingTime\":\"6.4m\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":{},\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/10.读书三要三不要.md\",\"relativePath\":\"30.悦读时光/10.读书三要三不要.md\"},\"wordCount\":3593,\"readingTime\":\"12m\",\"frontmatter\":{\"date\":{},\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/21.如何甄别真正有用的信息.md\",\"relativePath\":\"30.悦读时光/21.如何甄别真正有用的信息.md\"},\"wordCount\":2443,\"readingTime\":\"8.2m\",\"frontmatter\":{\"date\":{},\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/31.开源洞察/00.overview.md\",\"relativePath\":\"31.开源洞察/00.overview.md\"},\"wordCount\":227,\"readingTime\":\"1m\",\"frontmatter\":{\"date\":{},\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/31.开源洞察/01.fetch-event-source 源码解读.md\",\"relativePath\":\"31.开源洞察/01.fetch-event-source 源码解读.md\"},\"wordCount\":2945,\"readingTime\":\"12.4m\",\"frontmatter\":{\"date\":{},\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/01.关于我.md\",\"relativePath\":\"40.关于/01.关于我.md\"},\"wordCount\":1634,\"readingTime\":\"5.9m\",\"frontmatter\":{\"date\":{},\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\",\"relativePath\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\"},\"wordCount\":6205,\"readingTime\":\"22.2m\",\"frontmatter\":{\"date\":{},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\",\"relativePath\":\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\"},\"wordCount\":9941,\"readingTime\":\"33.9m\",\"frontmatter\":{\"date\":{},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\",\"relativePath\":\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\"},\"wordCount\":4009,\"readingTime\":\"13.5m\",\"frontmatter\":{\"date\":{},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]}}],\"lastCommitTime\":\"2026-04-21 16:06:25\"},\"catalogues\":{\"arr\":[],\"map\":{},\"inv\":{}},\"posts\":{\"allPosts\":[{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/31.开源洞察/00.overview\",\"relativePath\":\"/31.开源洞察/00.overview\",\"frontmatter\":{\"date\":\"2026-04-10 14:52:34\",\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"开源洞察\",\"date\":\"2026-04-10 14:52:34\",\"capture\":\"本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。\\nrepo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。\\n- 一键分析 - 支持 GitHub URL 或本地目录分析\\n- 深度报告 - 生成项目概述、架构分析、核心模块解读\\n- 中文支持 - 自动翻译 README、生成中文代码注释\\n- 全自动执行 - 调用后无需中间交互\\n两个 Skill 均具备以上能力，可根据需求选择使用。\\n了解 repo-insight →\\n 开源项目解读\\n| 项目 | 简介 |\\n|----\"},{\"url\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"relativePath\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"frontmatter\":{\"date\":\"2026-04-10 14:43:09\",\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"fetch-event-source 源码解读\",\"date\":\"2026-04-10 14:43:09\",\"capture\":\"第一部分: 业务价值篇\\n 项目定位\\n`@microsoft/fetch-event-source` 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。\\n 解决的核心痛点\\n原生浏览器的 `EventSource` API 存在以下限制:\\n| 限制 | 说明 |\\n|------|------|\\n| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |\\n| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |\\n| 无法发送请求体 | 所有参数必须编码在\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"},{\"url\":\"/@pages/categoriesPage\",\"relativePath\":\"/@pages/categoriesPage\",\"frontmatter\":{\"title\":\"分类\",\"categoriesPage\":true,\"permalink\":\"/categories\",\"article\":false,\"layout\":\"home\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"分类\",\"date\":\"2026-04-21 08:06:36\",\"capture\":\"\"},{\"url\":\"/@pages/tagsPage\",\"relativePath\":\"/@pages/tagsPage\",\"frontmatter\":{\"title\":\"标签\",\"permalink\":\"/tags\",\"tagsPage\":true,\"article\":false,\"layout\":\"home\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"标签\",\"date\":\"2026-04-21 08:06:36\",\"capture\":\"\"},{\"url\":\"/\",\"relativePath\":\"/\",\"frontmatter\":{\"layout\":\"home\",\"title\":\"首页\",\"titleTemplate\":\":title | Insight Stack Blog\",\"tk\":{\"teekHome\":true,\"features\":[{\"title\":\"全栈\",\"details\":\"Engineering × Product × AI\",\"link\":\"/fullstack/overview\",\"image\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/topic/icon_full_stack_circle.webp\"},{\"title\":\"AI 学习与实践\",\"details\":\"Model × Agent × Engineering\",\"link\":\"/ai-learning/overview\",\"image\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/topic/icon_llm_circle.webp\"},{\"title\":\"产品 Sense\",\"details\":\"Impact × Simplicity\",\"link\":\"/product-sense\",\"image\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/topic/icon_product_sense_circle.webp\"}]},\"hero\":{\"name\":\"Insight Stack Blog\",\"text\":\"AI & 全栈技术 & 产品思考与成长记录\",\"tagline\":\"✨探索技术前沿，沉淀产品思考，记录成长点滴，相信时间的力量\",\"actions\":[{\"theme\":\"brand\",\"text\":\"关于我\",\"link\":\"/about/me\"},{\"theme\":\"alt\",\"text\":\"资源推荐\",\"link\":\"/growth/sites\"},{\"theme\":\"alt\",\"text\":\"书籍推荐\",\"link\":\"/growth/books\"}],\"image\":{\"src\":\"/img/full-stack/insight_stack.png\",\"alt\":\"Insight Stack Blog\"}},\"features\":[{\"icon\":\"📖\",\"title\":\"全栈技术\",\"details\":\"前端 & NodeJS & Python 等\",\"link\":\"/fullstack/overview\"},{\"icon\":\"🎉\",\"title\":\"产品 Sense\",\"details\":\"产品 Sense = 用户价值洞察 × 商业可行性 × 技术可实现性\",\"link\":\"/product-sense\"},{\"icon\":\"🎇\",\"title\":\"LLM 应用学习与实践\",\"details\":\"梳理大语言模型应用、Agent 技术、上下文工程与AI编程等专题，探索 AI 时代的技术与应用。\",\"link\":\"/ai-learning/overview\"},{\"icon\":\"📝\",\"title\":\"个人成长\",\"details\":\"收录一些不错的站点、技术周刊、AI 等资源，总结个人在时间管理、效率工具、健康管理等方面的成长经验。\",\"link\":\"/about/me\"}]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"首页\",\"date\":\"2026-04-21 08:06:36\",\"capture\":\"<style\\n/* 彩虹动画 */\\n:root {\\n animation: rainbow 12s linear infinite;\\n}\\n.tk-avatar {\\n height: var(--tk-avatar-size) !important;\\n width: var(--tk-avatar-size) !important;\\n}\\n.tk-avatar--circle {\\n border-radius: 50% !important;\\n}\\n.vp-doc hero-text {\\n display: none !important;\\n}\\n@media (min-w\"}],\"originPosts\":[{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/31.开源洞察/00.overview\",\"relativePath\":\"/31.开源洞察/00.overview\",\"frontmatter\":{\"date\":\"2026-04-10 14:52:34\",\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"开源洞察\",\"date\":\"2026-04-10 14:52:34\",\"capture\":\"本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。\\nrepo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。\\n- 一键分析 - 支持 GitHub URL 或本地目录分析\\n- 深度报告 - 生成项目概述、架构分析、核心模块解读\\n- 中文支持 - 自动翻译 README、生成中文代码注释\\n- 全自动执行 - 调用后无需中间交互\\n两个 Skill 均具备以上能力，可根据需求选择使用。\\n了解 repo-insight →\\n 开源项目解读\\n| 项目 | 简介 |\\n|----\"},{\"url\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"relativePath\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"frontmatter\":{\"date\":\"2026-04-10 14:43:09\",\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"fetch-event-source 源码解读\",\"date\":\"2026-04-10 14:43:09\",\"capture\":\"第一部分: 业务价值篇\\n 项目定位\\n`@microsoft/fetch-event-source` 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。\\n 解决的核心痛点\\n原生浏览器的 `EventSource` API 存在以下限制:\\n| 限制 | 说明 |\\n|------|------|\\n| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |\\n| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |\\n| 无法发送请求体 | 所有参数必须编码在\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"sortPostsByDateAndSticky\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/31.开源洞察/00.overview\",\"relativePath\":\"/31.开源洞察/00.overview\",\"frontmatter\":{\"date\":\"2026-04-10 14:52:34\",\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"开源洞察\",\"date\":\"2026-04-10 14:52:34\",\"capture\":\"本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。\\nrepo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。\\n- 一键分析 - 支持 GitHub URL 或本地目录分析\\n- 深度报告 - 生成项目概述、架构分析、核心模块解读\\n- 中文支持 - 自动翻译 README、生成中文代码注释\\n- 全自动执行 - 调用后无需中间交互\\n两个 Skill 均具备以上能力，可根据需求选择使用。\\n了解 repo-insight →\\n 开源项目解读\\n| 项目 | 简介 |\\n|----\"},{\"url\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"relativePath\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"frontmatter\":{\"date\":\"2026-04-10 14:43:09\",\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"fetch-event-source 源码解读\",\"date\":\"2026-04-10 14:43:09\",\"capture\":\"第一部分: 业务价值篇\\n 项目定位\\n`@microsoft/fetch-event-source` 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。\\n 解决的核心痛点\\n原生浏览器的 `EventSource` API 存在以下限制:\\n| 限制 | 说明 |\\n|------|------|\\n| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |\\n| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |\\n| 无法发送请求体 | 所有参数必须编码在\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"sortPostsByDate\":[{\"url\":\"/31.开源洞察/00.overview\",\"relativePath\":\"/31.开源洞察/00.overview\",\"frontmatter\":{\"date\":\"2026-04-10 14:52:34\",\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"开源洞察\",\"date\":\"2026-04-10 14:52:34\",\"capture\":\"本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。\\nrepo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。\\n- 一键分析 - 支持 GitHub URL 或本地目录分析\\n- 深度报告 - 生成项目概述、架构分析、核心模块解读\\n- 中文支持 - 自动翻译 README、生成中文代码注释\\n- 全自动执行 - 调用后无需中间交互\\n两个 Skill 均具备以上能力，可根据需求选择使用。\\n了解 repo-insight →\\n 开源项目解读\\n| 项目 | 简介 |\\n|----\"},{\"url\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"relativePath\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"frontmatter\":{\"date\":\"2026-04-10 14:43:09\",\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"fetch-event-source 源码解读\",\"date\":\"2026-04-10 14:43:09\",\"capture\":\"第一部分: 业务价值篇\\n 项目定位\\n`@microsoft/fetch-event-source` 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。\\n 解决的核心痛点\\n原生浏览器的 `EventSource` API 存在以下限制:\\n| 限制 | 说明 |\\n|------|------|\\n| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |\\n| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |\\n| 无法发送请求体 | 所有参数必须编码在\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"groupPostsByYear\":{\"2026 \":[{\"url\":\"/31.开源洞察/00.overview\",\"relativePath\":\"/31.开源洞察/00.overview\",\"frontmatter\":{\"date\":\"2026-04-10 14:52:34\",\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"开源洞察\",\"date\":\"2026-04-10 14:52:34\",\"capture\":\"本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。\\nrepo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。\\n- 一键分析 - 支持 GitHub URL 或本地目录分析\\n- 深度报告 - 生成项目概述、架构分析、核心模块解读\\n- 中文支持 - 自动翻译 README、生成中文代码注释\\n- 全自动执行 - 调用后无需中间交互\\n两个 Skill 均具备以上能力，可根据需求选择使用。\\n了解 repo-insight →\\n 开源项目解读\\n| 项目 | 简介 |\\n|----\"},{\"url\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"relativePath\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"frontmatter\":{\"date\":\"2026-04-10 14:43:09\",\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"fetch-event-source 源码解读\",\"date\":\"2026-04-10 14:43:09\",\"capture\":\"第一部分: 业务价值篇\\n 项目定位\\n`@microsoft/fetch-event-source` 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。\\n 解决的核心痛点\\n原生浏览器的 `EventSource` API 存在以下限制:\\n| 限制 | 说明 |\\n|------|------|\\n| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |\\n| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |\\n| 无法发送请求体 | 所有参数必须编码在\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"}],\"2025 \":[{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"}],\"2024 \":[{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}],\"2023 \":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"2022 \":[{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}]},\"groupPostsByYearMonth\":{\"2026 \":{\"04\":[{\"url\":\"/31.开源洞察/00.overview\",\"relativePath\":\"/31.开源洞察/00.overview\",\"frontmatter\":{\"date\":\"2026-04-10 14:52:34\",\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"开源洞察\",\"date\":\"2026-04-10 14:52:34\",\"capture\":\"本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。\\nrepo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。\\n- 一键分析 - 支持 GitHub URL 或本地目录分析\\n- 深度报告 - 生成项目概述、架构分析、核心模块解读\\n- 中文支持 - 自动翻译 README、生成中文代码注释\\n- 全自动执行 - 调用后无需中间交互\\n两个 Skill 均具备以上能力，可根据需求选择使用。\\n了解 repo-insight →\\n 开源项目解读\\n| 项目 | 简介 |\\n|----\"},{\"url\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"relativePath\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"frontmatter\":{\"date\":\"2026-04-10 14:43:09\",\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"fetch-event-source 源码解读\",\"date\":\"2026-04-10 14:43:09\",\"capture\":\"第一部分: 业务价值篇\\n 项目定位\\n`@microsoft/fetch-event-source` 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。\\n 解决的核心痛点\\n原生浏览器的 `EventSource` API 存在以下限制:\\n| 限制 | 说明 |\\n|------|------|\\n| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |\\n| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |\\n| 无法发送请求体 | 所有参数必须编码在\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"}],\"03\":[{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"}],\"02\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"}],\"01\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"}]},\"2025 \":{\"10\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"}],\"11\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"12\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"}],\"08\":[{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"03\":[{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"}]},\"2024 \":{\"06\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"}],\"05\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"04\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"03\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"01\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}]},\"2023 \":{\"01\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}]},\"2022 \":{\"09\":[{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}]}},\"groupPosts\":{\"categories\":{\"AI 学习与实践\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"}],\"Agent 系列\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"}],\"全栈\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"产品 Sense\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"}],\"AI\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"}],\"悦读时光\":[{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"}],\"个人成长\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"开源洞察\":[{\"url\":\"/31.开源洞察/00.overview\",\"relativePath\":\"/31.开源洞察/00.overview\",\"frontmatter\":{\"date\":\"2026-04-10 14:52:34\",\"title\":\"开源洞察\",\"permalink\":\"/repo-insight/overview\",\"categories\":[\"开源洞察\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"开源洞察\",\"date\":\"2026-04-10 14:52:34\",\"capture\":\"本专栏所有源码解读文章，均借助了本人开源的 repo-insight Agent Skill 来辅助生成。\\nrepo-insight 是一款专注于优秀开源项目代码库解读的智能助手，提供 GitHub URL 或本地目录的一键深度分析能力。\\n- 一键分析 - 支持 GitHub URL 或本地目录分析\\n- 深度报告 - 生成项目概述、架构分析、核心模块解读\\n- 中文支持 - 自动翻译 README、生成中文代码注释\\n- 全自动执行 - 调用后无需中间交互\\n两个 Skill 均具备以上能力，可根据需求选择使用。\\n了解 repo-insight →\\n 开源项目解读\\n| 项目 | 简介 |\\n|----\"},{\"url\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"relativePath\":\"/31.开源洞察/01.fetch-event-source 源码解读\",\"frontmatter\":{\"date\":\"2026-04-10 14:43:09\",\"title\":\"fetch-event-source 源码解读\",\"categories\":[\"开源洞察\"],\"permalink\":\"/repo-insight/fetch-event-source\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"fetch-event-source 源码解读\",\"date\":\"2026-04-10 14:43:09\",\"capture\":\"第一部分: 业务价值篇\\n 项目定位\\n`@microsoft/fetch-event-source` 是微软开源的一个基于 Fetch API 的 Server-Sent Events (SSE) 客户端库,为浏览器提供了更强大、更灵活的服务器推送事件接收能力。\\n 解决的核心痛点\\n原生浏览器的 `EventSource` API 存在以下限制:\\n| 限制 | 说明 |\\n|------|------|\\n| 仅支持 GET 请求 | 无法使用 POST、PUT 等其他 HTTP 方法 |\\n| 无法自定义请求头 | 无法传递认证令牌、内容类型等自定义头部 |\\n| 无法发送请求体 | 所有参数必须编码在\"}],\"ai-practice\":[{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"网络与通信\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"前端工程\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"资源推荐\":[{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"关于\":[{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"}],\"全栈基础素养\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"模块化编程实践指南\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"growth\":[{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}]},\"tags\":{\"Agent SDK\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"}],\"Multi-Agent\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"}],\"Agent Skills\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"}],\"Agent\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"AI\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"全栈\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"}],\"产品\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"}],\"悦读时光\":[{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}],\"系统思维\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"}],\"数学思维\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"}],\"模型思维\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"}],\"疫情\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"健康\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"时间\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"远程协作\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"LLM\":[{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"}],\"CSS\":[{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"}],\"工程化\":[{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"}],\"tailwindcss\":[{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"}],\"tutorial\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"SSE\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"HTTP Streaming\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"}],\"HTTP 轮询\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"退避轮询\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"}],\"长轮询\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"}],\"HTTP\":[{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"WebSocket\":[{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"Webhooks\":[{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"AI Agent\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"}],\"react\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"component-design\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"state-management\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"ai-augmented\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"specification-driven\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"资源推荐\":[{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}],\"LLM API\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"}],\"AI Coding\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"}],\"Vibe Coding\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"}],\"Agentic Engineering\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"}],\"AI 助手\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"}],\"AI 搜索\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"产品 Sense\":[{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"商业化\":[{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"}],\"SWR\":[{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"}],\"TanStack Query\":[{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"}],\"前端工程\":[{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"}],\"jamstack\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"frontend-architecture\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"next.js\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"static-site-generator\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"系统洞察力\":[{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"}],\"信息筛选\":[{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"个人成长\":[{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"typescript\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"}],\"generics\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"}],\"type-system\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"}],\"compilation\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"tooling\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"eslint\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"jest\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"成长\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"}],\"ESM\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"DDD\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"}],\"微前端\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"}],\"concept\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"node.js\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"commonjs\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"esm\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"monorepo\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"layered-architecture\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"solid-principles\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"code-organization\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"best-practices\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"naming-conventions\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"tsconfig\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"}],\"static-analysis\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"}],\"Tree-Shaking\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"}],\"circular-dependency\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"}],\"CommonJS\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"AMD\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"UMD\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"javascript\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"modularization\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"design-patterns\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"知识发现\":[{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"engineering-fundamentals\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"code-design\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"software-engineering\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"运动\":[{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}]}},\"groupCards\":{\"categories\":[{\"name\":\"AI 学习与实践\",\"length\":5},{\"name\":\"Agent 系列\",\"length\":1},{\"name\":\"全栈\",\"length\":21},{\"name\":\"产品 Sense\",\"length\":7},{\"name\":\"AI\",\"length\":2},{\"name\":\"悦读时光\",\"length\":1},{\"name\":\"个人成长\",\"length\":3},{\"name\":\"开源洞察\",\"length\":2},{\"name\":\"ai-practice\",\"length\":4},{\"name\":\"网络与通信\",\"length\":3},{\"name\":\"前端工程\",\"length\":3},{\"name\":\"资源推荐\",\"length\":5},{\"name\":\"关于\",\"length\":1},{\"name\":\"全栈基础素养\",\"length\":10},{\"name\":\"模块化编程实践指南\",\"length\":7},{\"name\":\"growth\",\"length\":1}],\"tags\":[{\"name\":\"Agent SDK\",\"length\":2},{\"name\":\"Multi-Agent\",\"length\":1},{\"name\":\"Agent Skills\",\"length\":1},{\"name\":\"Agent\",\"length\":6},{\"name\":\"AI\",\"length\":12},{\"name\":\"全栈\",\"length\":7},{\"name\":\"产品\",\"length\":1},{\"name\":\"悦读时光\",\"length\":3},{\"name\":\"系统思维\",\"length\":1},{\"name\":\"数学思维\",\"length\":1},{\"name\":\"模型思维\",\"length\":1},{\"name\":\"疫情\",\"length\":2},{\"name\":\"健康\",\"length\":2},{\"name\":\"时间\",\"length\":1},{\"name\":\"远程协作\",\"length\":1},{\"name\":\"LLM\",\"length\":1},{\"name\":\"CSS\",\"length\":1},{\"name\":\"工程化\",\"length\":1},{\"name\":\"tailwindcss\",\"length\":1},{\"name\":\"tutorial\",\"length\":8},{\"name\":\"SSE\",\"length\":2},{\"name\":\"HTTP Streaming\",\"length\":1},{\"name\":\"HTTP 轮询\",\"length\":2},{\"name\":\"退避轮询\",\"length\":1},{\"name\":\"长轮询\",\"length\":1},{\"name\":\"HTTP\",\"length\":1},{\"name\":\"WebSocket\",\"length\":1},{\"name\":\"Webhooks\",\"length\":1},{\"name\":\"AI Agent\",\"length\":1},{\"name\":\"react\",\"length\":1},{\"name\":\"component-design\",\"length\":1},{\"name\":\"state-management\",\"length\":1},{\"name\":\"ai-augmented\",\"length\":1},{\"name\":\"specification-driven\",\"length\":1},{\"name\":\"资源推荐\",\"length\":5},{\"name\":\"LLM API\",\"length\":1},{\"name\":\"AI Coding\",\"length\":1},{\"name\":\"Vibe Coding\",\"length\":1},{\"name\":\"Agentic Engineering\",\"length\":1},{\"name\":\"AI 助手\",\"length\":1},{\"name\":\"AI 搜索\",\"length\":2},{\"name\":\"产品 Sense\",\"length\":4},{\"name\":\"商业化\",\"length\":1},{\"name\":\"SWR\",\"length\":1},{\"name\":\"TanStack Query\",\"length\":1},{\"name\":\"前端工程\",\"length\":1},{\"name\":\"jamstack\",\"length\":1},{\"name\":\"frontend-architecture\",\"length\":1},{\"name\":\"next.js\",\"length\":1},{\"name\":\"static-site-generator\",\"length\":1},{\"name\":\"系统洞察力\",\"length\":1},{\"name\":\"信息筛选\",\"length\":1},{\"name\":\"个人成长\",\"length\":1},{\"name\":\"typescript\",\"length\":3},{\"name\":\"generics\",\"length\":1},{\"name\":\"type-system\",\"length\":1},{\"name\":\"compilation\",\"length\":1},{\"name\":\"tooling\",\"length\":1},{\"name\":\"eslint\",\"length\":1},{\"name\":\"jest\",\"length\":1},{\"name\":\"成长\",\"length\":1},{\"name\":\"ESM\",\"length\":3},{\"name\":\"DDD\",\"length\":1},{\"name\":\"微前端\",\"length\":1},{\"name\":\"concept\",\"length\":5},{\"name\":\"node.js\",\"length\":1},{\"name\":\"commonjs\",\"length\":1},{\"name\":\"esm\",\"length\":2},{\"name\":\"monorepo\",\"length\":1},{\"name\":\"layered-architecture\",\"length\":1},{\"name\":\"solid-principles\",\"length\":1},{\"name\":\"code-organization\",\"length\":1},{\"name\":\"best-practices\",\"length\":1},{\"name\":\"naming-conventions\",\"length\":1},{\"name\":\"tsconfig\",\"length\":1},{\"name\":\"static-analysis\",\"length\":1},{\"name\":\"Tree-Shaking\",\"length\":1},{\"name\":\"circular-dependency\",\"length\":1},{\"name\":\"CommonJS\",\"length\":1},{\"name\":\"AMD\",\"length\":1},{\"name\":\"UMD\",\"length\":1},{\"name\":\"javascript\",\"length\":1},{\"name\":\"modularization\",\"length\":1},{\"name\":\"design-patterns\",\"length\":1},{\"name\":\"知识发现\",\"length\":1},{\"name\":\"engineering-fundamentals\",\"length\":1},{\"name\":\"code-design\",\"length\":1},{\"name\":\"software-engineering\",\"length\":1},{\"name\":\"运动\",\"length\":1}]}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true,\"additionalConfig\":{}}"));
\ No newline at end of file
diff --git a/assets/chunks/metadata.7bed8ab7.js b/assets/chunks/metadata.7bed8ab7.js
deleted file mode 100644
index f48e032d..00000000
--- a/assets/chunks/metadata.7bed8ab7.js
+++ /dev/null
@@ -1 +0,0 @@
-window.__VP_HASH_MAP__=JSON.parse("{\"01.全栈_00.overview.md\":\"DTl63cj_\",\"01.全栈_01.ai native 工程思维_01.不止于代码：构建 ai 时代全栈工程师的“认知三层塔”.md\":\"Ch3CtLm0\",\"01.全栈_01.ai native 工程思维_02.重构开发者：ai 时代下的工程师能力图谱与演进指南.md\":\"w2dUgYOC\",\"01.全栈_01.ai native 工程思维_10.读 anthropic 研究报告，探寻 ai 时代的工程范式重塑.md\":\"BKsOQbXL\",\"01.全栈_10.ai 编程实践指南_00.ai编程工具与资源.md\":\"CQL4JXm2\",\"01.全栈_40.前端工程_01.react 设计哲学：ai 协作时代的组件化开发实践指南.md\":\"C0-Qj7UG\",\"01.全栈_40.前端工程_02.css工程化.md\":\"B6Q9ssdl\",\"01.全栈_40.前端工程_03.jamstack 梳理与实践指南.md\":\"BHFPzWx_\",\"01.全栈_40.前端工程_11.react 服务端状态管理的范式转移与选型深度博弈.md\":\"Bm5uQ9fk\",\"01.全栈_60.网络与通信_01.从 http 到 websocket 的技术选型指南.md\":\"DlstBmfn\",\"01.全栈_60.网络与通信_02.流式 http 与 sse 协议：从概念辨析到生产实践.md\":\"DBvMz_Gr\",\"01.全栈_60.网络与通信_03.退避轮询与长轮询的原理、实战与选型决策.md\":\"J0ycjaFX\",\"01.全栈_80.全栈基础素养_00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\":\"DMY_isjL\",\"01.全栈_80.全栈基础素养_01.编译与调试 typescript 项目指南.md\":\"DTw4Rt2C\",\"01.全栈_80.全栈基础素养_10.聊一聊 typescript 泛型.md\":\"CavsGSMv\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_0.overview.md\":\"BdLdBuUH\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_1.前端模块化编程基础.md\":\"f0WM8qM3\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_2.不同模块化规范梳理.md\":\"CDvbKLWO\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_3.es modules 核心规范与实践解析.md\":\"B-hcltGc\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_4.typescript 对模块化编程的增强.md\":\"BJ-pD4L0\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_5.模块化编程原则与最佳实践.md\":\"uR00Ga87\",\"01.全栈_80.全栈基础素养_20.模块化编程实践指南_6.解析 nodejs 中的模块化.md\":\"DRe2iUDr\",\"01.全栈_90.工具与资源推荐_90.全栈技术资源推荐.md\":\"Dq7Ydo7v\",\"10.产品 sense_00.学习与实践全景.md\":\"B9Ry8o94\",\"10.产品 sense_01.产品观察与分析_11.ai-powered 搜索引擎观察分析：perplexity 与知识工作者.md\":\"BEH7EQLT\",\"10.产品 sense_02.新 t 型人_20.读后感：ai 原生时代的复合型人才，究竟需要怎样的特质？.md\":\"Du3qZ8xB\",\"10.产品 sense_02.新 t 型人_21.工程师如何构建产品 sense.md\":\"JciUte9l\",\"10.产品 sense_04.产品创造与商业化_30.《小而美：持续盈利的经营法则》读后感.md\":\"CbayMoYI\",\"10.产品 sense_05.方法论_40.洞察力模型.md\":\"-U_WT1WE\",\"10.产品 sense_05.方法论_50.用经济学思维做产品.md\":\"D6Tetc-8\",\"20.ai 学习与实践_00.ai 学习与实践全景一览.md\":\"C4OWiCyw\",\"20.ai 学习与实践_02.agent 系列_01.agent概览与综述.md\":\"BIpWVkHy\",\"20.ai 学习与实践_02.agent 系列_02.agent 规划模块.md\":\"BEUNtIDI\",\"20.ai 学习与实践_02.agent 系列_03.构建 agentic 生态：将零散组件化为可持续的工作流.md\":\"Bgi-7Dm_\",\"20.ai 学习与实践_02.agent 系列_10.agent skills.md\":\"DFSiQA8t\",\"20.ai 学习与实践_04.社区活动与实践小项目_10.基于 claude agent sdk 搭建 deep research agent.md\":\"DOONNKFw\",\"20.ai 学习与实践_04.社区活动与实践小项目_20.基于 claude agent sdk 搭建 agent.md\":\"CWhLwl8r\",\"20.ai 学习与实践_04.社区活动与实践小项目_60.数学小助手.md\":\"DXM5G5Ag\",\"20.ai 学习与实践_04.社区活动与实践小项目_70.诗歌小精灵.md\":\"j6xnTKI4\",\"20.ai 学习与实践_90.资源与工具推荐_01.好用的 ai 助手与工作站推荐.md\":\"vaSWKpLD\",\"20.ai 学习与实践_90.资源与工具推荐_11. llm api 平台推荐与选型指南.md\":\"Pr48zsHZ\",\"30.悦读时光_01.好书推荐.md\":\"BVzgXE8N\",\"30.悦读时光_10.读书三要三不要.md\":\"DaAm_LXA\",\"30.悦读时光_21.如何甄别真正有用的信息.md\":\"Be9IJNun\",\"40.关于_01.关于我.md\":\"BzNDwyw3\",\"40.关于_30.成长随笔_01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\":\"CJpPM59I\",\"40.关于_30.成长随笔_10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\":\"BIUhmRg0\",\"40.关于_30.成长随笔_20.减肥这件小事阶段随笔汇总.md\":\"C1xoZ0dn\",\"@pages_categoriespage.md\":\"Cnp1svtv\",\"@pages_tagspage.md\":\"C5Ifm28k\",\"index.md\":\"Dpw0tPo2\"}");function deserializeFunctions(r){return Array.isArray(r)?r.map(deserializeFunctions):typeof r=="object"&&r!==null?Object.keys(r).reduce((t,n)=>(t[n]=deserializeFunctions(r[n]),t),{}):typeof r=="string"&&r.startsWith("_vp-fn_")?new Function(`return ${r.slice(7)}`)():r};window.__VP_SITE_DATA__=deserializeFunctions(JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"Insight Stack\",\"description\":\"A digital garden exploring the intersection of Full-stack Engineering, Product Thinking, and LLMs.,Built with VitePress and vitepress-theme-teek. Focus on Full-stack Engineering, Product Thinking, and LLMs.,VitePress 拥有三种典型的知识管理形态：结构化、碎片化、体系化，可以轻松构建一个结构化知识库，适用个人博客、文档站、知识库等场景\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"teekTheme\":true,\"teekHome\":true,\"vpHome\":false,\"sidebarTrigger\":true,\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"banner\":{\"enabled\":true,\"name\":\"\",\"bgStyle\":\"pure\",\"pureBgColor\":\"#F7F5FA\",\"imgSrc\":[\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/image.png\"],\"mask\":false,\"descStyle\":\"switch\",\"description\":[\"Insight Stack = 工程基座 × 产品思维 × AI 原力\",\"真正的好产品是让技术隐入背景，让交互因共鸣而生\"]},\"homeCardListPosition\":\"right\",\"homeCardSort\":[\"topArticle\",\"category\",\"tag\",\"docAnalysis\",\"friendLink\"],\"topArticle\":{\"enabled\":true,\"limit\":3,\"autoPage\":false,\"pageSpeed\":4000,\"dateFormat\":\"yyyy-MM-dd\"},\"category\":{\"enabled\":false,\"limit\":8,\"autoPage\":false,\"pageSpeed\":4000},\"friendLink\":{\"enabled\":false,\"limit\":5,\"list\":[{\"avatar\":\"https://vitepress.dev/vitepress-logo-large.svg\",\"name\":\"VitePress\",\"desc\":\"Vue 驱动的静态站点生成器\",\"link\":\"https://vitepress.dev/\"},{\"avatar\":\"https://vp.teek.top/teek-logo-large.png\",\"name\":\"vitepress-theme-teek\",\"desc\":\"Teek官网\",\"link\":\"https://vp.teek.top/\"}]},\"docAnalysis\":{\"enabled\":false},\"footerInfo\":{\"theme\":{\"name\":\"Theme By Teek@1.5.2\"},\"copyright\":{\"createYear\":2017,\"suffix\":\"Sqliang\"}},\"codeBlock\":{\"enabled\":false,\"collapseHeight\":700,\"overlay\":true,\"overlayHeight\":400,\"copiedDone\":\"_vp-fn_(TkMessage) => TkMessage.success(\\\"\\\\u590D\\\\u5236\\\\u6210\\\\u529F\\\\uFF01\\\")\"},\"articleShare\":{\"enabled\":true},\"articleUpdate\":{\"enabled\":false},\"post\":{},\"themeEnhance\":{\"layoutSwitch\":{\"defaultMode\":\"fullWidth\"}},\"logo\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/favicon.png\",\"darkModeSwitchLabel\":\"主题\",\"sidebarMenuLabel\":\"菜单\",\"returnToTopLabel\":\"返回顶部\",\"lastUpdatedText\":\"上次更新时间\",\"outline\":{\"level\":[2,4],\"label\":\"本页导航\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"全栈\",\"items\":[{\"text\":\"\\n \\n 全景一览\\n
\\n \",\"link\":\"/fullstack/overview\",\"activeMatch\":\"01.全栈/00.overview\"},{\"text\":\"\\n \\n AI Native 工程思维\\n
\\n \",\"link\":\"/fullstack/ai-native\",\"activeMatch\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\"},{\"text\":\"\\n \\n AI 编程实践指南\\n
\\n \",\"link\":\"/ai-learning/ai-coding-resources\",\"activeMatch\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\"},{\"text\":\"\\n \\n 前端工程\\n
\\n \",\"link\":\"/fullstack/react-design-philosophy-ai-augmented\",\"activeMatch\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\"},{\"text\":\"\\n \\n 网络与通信\\n
\\n \",\"link\":\"/fullstack/networking-protocol-selection-guide\",\"activeMatch\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\"},{\"text\":\"\\n \\n 全栈基础素养\\n
\\n \",\"link\":\"/fullstack/occams-razor-software-design\",\"activeMatch\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\"},{\"text\":\"\\n \\n 工具与资源推荐\\n
\\n \",\"link\":\"/growth/full-stack-resources\",\"activeMatch\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\"}],\"activeMatch\":\"01.全栈/90.工具与资源推荐\"},{\"text\":\"AI 学习与实践\",\"items\":[{\"text\":\"\\n \\n 全景一览\\n
\\n \",\"link\":\"/ai-learning/overview\",\"activeMatch\":\"20.AI 学习与实践/00.AI 学习与实践全景一览\"},{\"text\":\"\\n \\n Agent 系列\\n
\\n \",\"link\":\"/ai-agent/overview\",\"activeMatch\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\"},{\"text\":\"\\n \\n 社区活动与实践小项目\\n
\\n \",\"link\":\"/ai-agent/deepresearch-agent\",\"activeMatch\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\"},{\"text\":\"\\n \\n 工具与资源推荐\\n
\\n \",\"link\":\"/ai-learning/tools-assistant\",\"activeMatch\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\"}],\"activeMatch\":\"20.AI 学习与实践/90.资源与工具推荐\"},{\"text\":\"产品 Sense\",\"items\":[{\"text\":\"\\n \\n 全景一览\\n
\\n \",\"link\":\"/product-sense\",\"activeMatch\":\"10.产品 Sense/00.学习与实践全景\"},{\"text\":\"\\n \\n 产品观察与分析\\n
\\n \",\"link\":\"/product-sense/perplexity-knowledge-worker\",\"activeMatch\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\"},{\"text\":\"\\n \\n 新 T 型人\\n
\\n \",\"link\":\"/product-sense/ai-native-composite-talents\",\"activeMatch\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\"},{\"text\":\"\\n \\n 产品创造与商业化\\n
\\n \",\"link\":\"/product-sense/small-rule-learn\",\"activeMatch\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\"},{\"text\":\"\\n \\n 方法论\\n
\\n \",\"link\":\"/product-sense/insight-model\",\"activeMatch\":\"10.产品 Sense/05.方法论/40.洞察力模型\"}],\"activeMatch\":\"10.产品 Sense/05.方法论\"},{\"text\":\"悦读拾光\",\"items\":[{\"text\":\"好书推荐\",\"link\":\" /growth/books\"},{\"text\":\"读书“三要”和“三不要”\",\"link\":\"/pages/growth/reading-tips\",\"activeMatch\":\"30.悦读时光/10.读书三要三不要\"},{\"text\":\"如何甄别真正有用的信息\",\"link\":\"/growth/distinguish-useful-information\",\"activeMatch\":\"30.悦读时光/21.如何甄别真正有用的信息\"}],\"activeMatch\":\"30.悦读时光\"},{\"text\":\"关于\",\"items\":[{\"text\":\"关于我\",\"link\":\"/about/me\",\"activeMatch\":\"40.关于/01.关于我\"},{\"text\":\"关于本站\",\"link\":\"/about/me#关于本站\"},{\"text\":\"成长随笔\",\"link\":\"/growth/outer-experience\",\"activeMatch\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\"}],\"activeMatch\":\"40.关于/30.成长随笔\"}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/sqliang\"},{\"icon\":{\"svg\":\"\"},\"link\":\"mailto:hfutsqliang@qq.com\"}],\"search\":{\"provider\":\"local\"},\"sidebar\":{\"/01.全栈/\":[{\"text\":\"全景一览\",\"collapsed\":true,\"link\":\"/01.全栈/00.overview\"},{\"text\":\"AI Native 工程思维\",\"collapsed\":true,\"items\":[{\"text\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"collapsed\":true,\"link\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\"},{\"text\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"collapsed\":true,\"link\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\"},{\"text\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"collapsed\":true,\"link\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\"}]},{\"text\":\"AI 编程实践指南\",\"collapsed\":true,\"items\":[{\"text\":\"AI 编程工具与资源推荐\",\"collapsed\":true,\"link\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\"}]},{\"text\":\"前端工程\",\"collapsed\":true,\"items\":[{\"text\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\"},{\"text\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/02.CSS工程化\"},{\"text\":\"JAMStack 梳理与实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\"},{\"text\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"collapsed\":true,\"link\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\"}]},{\"text\":\"网络与通信\",\"collapsed\":true,\"items\":[{\"text\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"collapsed\":true,\"link\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\"},{\"text\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"collapsed\":true,\"link\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\"},{\"text\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"collapsed\":true,\"link\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\"}]},{\"text\":\"全栈基础素养\",\"collapsed\":true,\"items\":[{\"text\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\"},{\"text\":\"TypeScript 编译与调试完全指南\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\"},{\"text\":\"聊一聊 TypeScript 中的泛型\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\"},{\"text\":\"模块化编程实践指南\",\"collapsed\":true,\"items\":[{\"text\":\"模块化编程实践指南\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\"},{\"text\":\"模块化编程初体验：概念、演进与设计模式\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\"},{\"text\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\"},{\"text\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\"},{\"text\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\"},{\"text\":\"模块化编程原则梳理与总结\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\"},{\"text\":\"Node.js 模块化编程梳理与总结\",\"collapsed\":true,\"link\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\"}]}]},{\"text\":\"工具与资源推荐\",\"collapsed\":true,\"items\":[{\"text\":\"全栈技术资源推荐\",\"collapsed\":true,\"link\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\"}]}],\"/10.产品 Sense/\":[{\"text\":\"学习与实践全景\",\"collapsed\":true,\"link\":\"/10.产品 Sense/00.学习与实践全景\"},{\"text\":\"产品观察与分析\",\"collapsed\":true,\"items\":[{\"text\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"collapsed\":true,\"link\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\"}]},{\"text\":\"新 T 型人\",\"collapsed\":true,\"items\":[{\"text\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"collapsed\":true,\"link\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\"},{\"text\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"collapsed\":true,\"link\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\"}]},{\"text\":\"产品创造与商业化\",\"collapsed\":true,\"items\":[{\"text\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"collapsed\":true,\"link\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\"}]},{\"text\":\"方法论\",\"collapsed\":true,\"items\":[{\"text\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"collapsed\":true,\"link\":\"/10.产品 Sense/05.方法论/40.洞察力模型\"},{\"text\":\"用经济学思维做产品\",\"collapsed\":true,\"link\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\"}]}],\"/20.AI 学习与实践/\":[{\"text\":\"AI 学习与实践全景\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\"},{\"text\":\"Agent 系列\",\"collapsed\":true,\"items\":[{\"text\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\"},{\"text\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\"},{\"text\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\"},{\"text\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\"}]},{\"text\":\"社区活动与实践小项目\",\"collapsed\":true,\"items\":[{\"text\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\"},{\"text\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\"},{\"text\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\"},{\"text\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\"}]},{\"text\":\"资源与工具推荐\",\"collapsed\":true,\"items\":[{\"text\":\"好用的 AI 助手与工作站推荐\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\"},{\"text\":\"LLM API 平台推荐与选型指南\",\"collapsed\":true,\"link\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\"}]}],\"/30.悦读时光/\":[{\"text\":\"好书推荐\",\"collapsed\":true,\"link\":\"/30.悦读时光/01.好书推荐\"},{\"text\":\"读书“三要”和“三不要”\",\"collapsed\":true,\"link\":\"/30.悦读时光/10.读书三要三不要\"},{\"text\":\"如何甄别真正有用的信息\",\"collapsed\":true,\"link\":\"/30.悦读时光/21.如何甄别真正有用的信息\"}],\"/40.关于/\":[{\"text\":\"关于我\",\"collapsed\":true,\"link\":\"/40.关于/01.关于我\"},{\"text\":\"成长随笔\",\"collapsed\":true,\"items\":[{\"text\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"collapsed\":true,\"link\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\"},{\"text\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"collapsed\":true,\"link\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\"},{\"text\":\"用科学与迭代改善的方式推动减肥这件小事\",\"collapsed\":true,\"link\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\"}]}]},\"permalinks\":{\"map\":{\"01.全栈/00.overview\":\"/fullstack/overview\",\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\":\"/fullstack/ai-native\",\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\":\"/fullstack/ai-engineer-capability\",\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\":\"/fullstack/ai-change-work-workflow\",\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\":\"/ai-learning/ai-coding-resources\",\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\":\"/fullstack/react-design-philosophy-ai-augmented\",\"01.全栈/40.前端工程/02.CSS工程化\":\"/full-stack/css-engineering\",\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\":\"/fullstack/jamstack\",\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\":\"/fullstack/server-state-management\",\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\":\"/fullstack/networking-protocol-selection-guide\",\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\":\"/fullstack/networking/sse-practice\",\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\":\"/fullstack/networking-polling-optimization\",\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\":\"/fullstack/occams-razor-software-design\",\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\":\"/fullstack/typescript-compilation-debugging-guide\",\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\":\"/fullstack/typescript-generic-types\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\":\"/fullstack/module-programming-practice-guide\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\":\"/fullstack/frontend-module-programming-basic\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\":\"/fullstack/different-module-programming-specifications\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\":\"/fullstack/decode-es-modules\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\":\"/fullstack/typescript-module-programming-enhancement\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\":\"/fullstack/module-programming-principles-best-practices\",\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\":\"/fullstack/nodejs-module-programming-summary\",\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\":\"/growth/full-stack-resources\",\"10.产品 Sense/00.学习与实践全景\":\"/product-sense\",\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\":\"/product-sense/perplexity-knowledge-worker\",\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\":\"/product-sense/ai-native-composite-talents\",\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\":\"/product-sense/engineer-build-product-sense\",\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\":\"/product-sense/small-rule-learn\",\"10.产品 Sense/05.方法论/40.洞察力模型\":\"/product-sense/insight-model\",\"10.产品 Sense/05.方法论/50.用经济学思维做产品\":\"/product-sense/using-economics-thinking\",\"20.AI 学习与实践/00.AI 学习与实践全景一览\":\"/ai-learning/overview\",\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\":\"/ai-agent/overview\",\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\":\"/ai-agent/planning-module\",\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\":\"/ai-agent/composition-ai-components\",\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills\":\"/ai-agent/skills-practice-summary\",\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\":\"/ai-agent/deepresearch-agent\",\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\":\"/ai-practice/claude-agent-sdk-basic-build\",\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\":\"/ai-practice/math-bot\",\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\":\"/ai-practice/poetry-bot\",\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\":\"/ai-learning/tools-assistant\",\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\":\"/ai-learning/llm-api-resources\",\"30.悦读时光/01.好书推荐\":\"/growth/books\",\"30.悦读时光/10.读书三要三不要\":\"/pages/growth/reading-tips\",\"30.悦读时光/21.如何甄别真正有用的信息\":\"/growth/distinguish-useful-information\",\"40.关于/01.关于我\":\"/about/me\",\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\":\"/growth/outer-experience\",\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\":\"/growth/inner-experience\",\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\":\"/growth/weight-loss\",\"@pages/categoriesPage\":\"/categories\",\"@pages/tagsPage\":\"/tags\"},\"inv\":{\"/fullstack/overview\":\"01.全栈/00.overview\",\"/fullstack/ai-native\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"/fullstack/ai-engineer-capability\":\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"/fullstack/ai-change-work-workflow\":\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"/ai-learning/ai-coding-resources\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"/fullstack/react-design-philosophy-ai-augmented\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"/full-stack/css-engineering\":\"01.全栈/40.前端工程/02.CSS工程化\",\"/fullstack/jamstack\":\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"/fullstack/server-state-management\":\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"/fullstack/networking-protocol-selection-guide\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"/fullstack/networking/sse-practice\":\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"/fullstack/networking-polling-optimization\":\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"/fullstack/occams-razor-software-design\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"/fullstack/typescript-compilation-debugging-guide\":\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"/fullstack/typescript-generic-types\":\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"/fullstack/module-programming-practice-guide\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"/fullstack/frontend-module-programming-basic\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"/fullstack/different-module-programming-specifications\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"/fullstack/decode-es-modules\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"/fullstack/typescript-module-programming-enhancement\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"/fullstack/module-programming-principles-best-practices\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"/fullstack/nodejs-module-programming-summary\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"/growth/full-stack-resources\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"/product-sense\":\"10.产品 Sense/00.学习与实践全景\",\"/product-sense/perplexity-knowledge-worker\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"/product-sense/ai-native-composite-talents\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"/product-sense/engineer-build-product-sense\":\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"/product-sense/small-rule-learn\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"/product-sense/insight-model\":\"10.产品 Sense/05.方法论/40.洞察力模型\",\"/product-sense/using-economics-thinking\":\"10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"/ai-learning/overview\":\"20.AI 学习与实践/00.AI 学习与实践全景一览\",\"/ai-agent/overview\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"/ai-agent/planning-module\":\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"/ai-agent/composition-ai-components\":\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"/ai-agent/skills-practice-summary\":\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"/ai-agent/deepresearch-agent\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"/ai-practice/claude-agent-sdk-basic-build\":\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"/ai-practice/math-bot\":\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"/ai-practice/poetry-bot\":\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"/ai-learning/tools-assistant\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"/ai-learning/llm-api-resources\":\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"/growth/books\":\"30.悦读时光/01.好书推荐\",\"/pages/growth/reading-tips\":\"30.悦读时光/10.读书三要三不要\",\"/growth/distinguish-useful-information\":\"30.悦读时光/21.如何甄别真正有用的信息\",\"/about/me\":\"40.关于/01.关于我\",\"/growth/outer-experience\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"/growth/inner-experience\":\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"/growth/weight-loss\":\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"/categories\":\"@pages/categoriesPage\",\"/tags\":\"@pages/tagsPage\"}},\"docAnalysisInfo\":{\"fileList\":[{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/00.overview.md\",\"relativePath\":\"01.全栈/00.overview.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\",\"relativePath\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/02.CSS工程化.md\",\"relativePath\":\"01.全栈/40.前端工程/02.CSS工程化.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\",\"relativePath\":\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\",\"relativePath\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\",\"relativePath\":\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\",\"relativePath\":\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\",\"relativePath\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/00.学习与实践全景.md\",\"relativePath\":\"10.产品 Sense/00.学习与实践全景.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\",\"relativePath\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\",\"relativePath\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/40.洞察力模型.md\",\"relativePath\":\"10.产品 Sense/05.方法论/40.洞察力模型.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/50.用经济学思维做产品.md\",\"relativePath\":\"10.产品 Sense/05.方法论/50.用经济学思维做产品.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/00.AI 学习与实践全景一览.md\",\"relativePath\":\"20.AI 学习与实践/00.AI 学习与实践全景一览.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/01.好书推荐.md\",\"relativePath\":\"30.悦读时光/01.好书推荐.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/10.读书三要三不要.md\",\"relativePath\":\"30.悦读时光/10.读书三要三不要.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/21.如何甄别真正有用的信息.md\",\"relativePath\":\"30.悦读时光/21.如何甄别真正有用的信息.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/01.关于我.md\",\"relativePath\":\"40.关于/01.关于我.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\",\"relativePath\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\",\"relativePath\":\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\"},{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\",\"relativePath\":\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\"}],\"totalFileWords\":174383,\"eachFileWords\":[{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/00.overview.md\",\"relativePath\":\"01.全栈/00.overview.md\"},\"wordCount\":21,\"readingTime\":\"1m\",\"frontmatter\":{\"date\":{},\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”.md\"},\"wordCount\":2017,\"readingTime\":\"7.2m\",\"frontmatter\":{\"date\":{},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南.md\"},\"wordCount\":3614,\"readingTime\":\"12.9m\",\"frontmatter\":{\"date\":{},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\",\"relativePath\":\"01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑.md\"},\"wordCount\":4407,\"readingTime\":\"15.2m\",\"frontmatter\":{\"date\":{},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\",\"relativePath\":\"01.全栈/10.AI 编程实践指南/00.AI编程工具与资源.md\"},\"wordCount\":3472,\"readingTime\":\"13.3m\",\"frontmatter\":{\"date\":{},\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南.md\"},\"wordCount\":5038,\"readingTime\":\"17.6m\",\"frontmatter\":{\"date\":{},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/02.CSS工程化.md\",\"relativePath\":\"01.全栈/40.前端工程/02.CSS工程化.md\"},\"wordCount\":9015,\"readingTime\":\"34.1m\",\"frontmatter\":{\"date\":{},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\",\"relativePath\":\"01.全栈/40.前端工程/03.JAMStack 梳理与实践指南.md\"},\"wordCount\":3628,\"readingTime\":\"15m\",\"frontmatter\":{\"date\":{},\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\",\"relativePath\":\"01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈.md\"},\"wordCount\":4949,\"readingTime\":\"19.2m\",\"frontmatter\":{\"date\":{},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\",\"relativePath\":\"01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南.md\"},\"wordCount\":6770,\"readingTime\":\"23.9m\",\"frontmatter\":{\"date\":{},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\",\"relativePath\":\"01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践.md\"},\"wordCount\":6634,\"readingTime\":\"26.8m\",\"frontmatter\":{\"date\":{},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\",\"relativePath\":\"01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策.md\"},\"wordCount\":3295,\"readingTime\":\"12.1m\",\"frontmatter\":{\"date\":{},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南.md\"},\"wordCount\":3233,\"readingTime\":\"11.6m\",\"frontmatter\":{\"date\":{},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南.md\"},\"wordCount\":5040,\"readingTime\":\"20m\",\"frontmatter\":{\"date\":{},\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型.md\"},\"wordCount\":5614,\"readingTime\":\"21.5m\",\"frontmatter\":{\"date\":{},\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview.md\"},\"wordCount\":7414,\"readingTime\":\"30.9m\",\"frontmatter\":{\"date\":{},\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础.md\"},\"wordCount\":2099,\"readingTime\":\"7.8m\",\"frontmatter\":{\"date\":{},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理.md\"},\"wordCount\":1889,\"readingTime\":\"7.2m\",\"frontmatter\":{\"date\":{},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析.md\"},\"wordCount\":1767,\"readingTime\":\"7.5m\",\"frontmatter\":{\"date\":{},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强.md\"},\"wordCount\":1576,\"readingTime\":\"6.1m\",\"frontmatter\":{\"date\":{},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践.md\"},\"wordCount\":1303,\"readingTime\":\"4.9m\",\"frontmatter\":{\"date\":{},\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\",\"relativePath\":\"01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化.md\"},\"wordCount\":1240,\"readingTime\":\"4.7m\",\"frontmatter\":{\"date\":{},\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\",\"relativePath\":\"01.全栈/90.工具与资源推荐/90.全栈技术资源推荐.md\"},\"wordCount\":7425,\"readingTime\":\"30.1m\",\"frontmatter\":{\"date\":{},\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/00.学习与实践全景.md\",\"relativePath\":\"10.产品 Sense/00.学习与实践全景.md\"},\"wordCount\":429,\"readingTime\":\"1.5m\",\"frontmatter\":{\"date\":{},\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\",\"relativePath\":\"10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者.md\"},\"wordCount\":1833,\"readingTime\":\"6.3m\",\"frontmatter\":{\"date\":{},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？.md\"},\"wordCount\":1994,\"readingTime\":\"6.8m\",\"frontmatter\":{\"date\":{},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\",\"relativePath\":\"10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense.md\"},\"wordCount\":4356,\"readingTime\":\"15m\",\"frontmatter\":{\"date\":{},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\",\"relativePath\":\"10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感.md\"},\"wordCount\":1982,\"readingTime\":\"6.8m\",\"frontmatter\":{\"date\":{},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/40.洞察力模型.md\",\"relativePath\":\"10.产品 Sense/05.方法论/40.洞察力模型.md\"},\"wordCount\":2572,\"readingTime\":\"9m\",\"frontmatter\":{\"date\":{},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/10.产品 Sense/05.方法论/50.用经济学思维做产品.md\",\"relativePath\":\"10.产品 Sense/05.方法论/50.用经济学思维做产品.md\"},\"wordCount\":3150,\"readingTime\":\"10.7m\",\"frontmatter\":{\"date\":{},\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/00.AI 学习与实践全景一览.md\",\"relativePath\":\"20.AI 学习与实践/00.AI 学习与实践全景一览.md\"},\"wordCount\":25,\"readingTime\":\"1m\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":{},\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述.md\"},\"wordCount\":6363,\"readingTime\":\"22.1m\",\"frontmatter\":{\"date\":{},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块.md\"},\"wordCount\":3028,\"readingTime\":\"10.6m\",\"frontmatter\":{\"date\":{},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流.md\"},\"wordCount\":2685,\"readingTime\":\"9.4m\",\"frontmatter\":{\"date\":{},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\",\"relativePath\":\"20.AI 学习与实践/02.Agent 系列/10.Agent SKills.md\"},\"wordCount\":3915,\"readingTime\":\"14.6m\",\"frontmatter\":{\"date\":{},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent.md\"},\"wordCount\":2889,\"readingTime\":\"11m\",\"frontmatter\":{\"date\":{},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent.md\"},\"wordCount\":2778,\"readingTime\":\"11.2m\",\"frontmatter\":{\"date\":{},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手.md\"},\"wordCount\":2122,\"readingTime\":\"7.2m\",\"frontmatter\":{\"date\":{},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\",\"relativePath\":\"20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵.md\"},\"wordCount\":4145,\"readingTime\":\"14.2m\",\"frontmatter\":{\"date\":{},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐.md\"},\"wordCount\":5451,\"readingTime\":\"20.6m\",\"frontmatter\":{\"date\":{},\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\",\"relativePath\":\"20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南.md\"},\"wordCount\":3534,\"readingTime\":\"13.6m\",\"frontmatter\":{\"date\":{},\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/01.好书推荐.md\",\"relativePath\":\"30.悦读时光/01.好书推荐.md\"},\"wordCount\":1847,\"readingTime\":\"6.4m\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":{},\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/10.读书三要三不要.md\",\"relativePath\":\"30.悦读时光/10.读书三要三不要.md\"},\"wordCount\":3593,\"readingTime\":\"12m\",\"frontmatter\":{\"date\":{},\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/30.悦读时光/21.如何甄别真正有用的信息.md\",\"relativePath\":\"30.悦读时光/21.如何甄别真正有用的信息.md\"},\"wordCount\":2443,\"readingTime\":\"8.2m\",\"frontmatter\":{\"date\":{},\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/01.关于我.md\",\"relativePath\":\"40.关于/01.关于我.md\"},\"wordCount\":1634,\"readingTime\":\"5.9m\",\"frontmatter\":{\"date\":{},\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\",\"relativePath\":\"40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑.md\"},\"wordCount\":6205,\"readingTime\":\"22.2m\",\"frontmatter\":{\"date\":{},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\",\"relativePath\":\"40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序.md\"},\"wordCount\":9941,\"readingTime\":\"33.9m\",\"frontmatter\":{\"date\":{},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]}},{\"fileInfo\":{\"filePath\":\"/home/runner/work/insight-stack-blog/insight-stack-blog/docs/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\",\"relativePath\":\"40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总.md\"},\"wordCount\":4009,\"readingTime\":\"13.5m\",\"frontmatter\":{\"date\":{},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]}}],\"lastCommitTime\":\"2026-04-21 14:29:07\"},\"catalogues\":{\"arr\":[],\"map\":{},\"inv\":{}},\"posts\":{\"allPosts\":[{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"},{\"url\":\"/@pages/categoriesPage\",\"relativePath\":\"/@pages/categoriesPage\",\"frontmatter\":{\"title\":\"分类\",\"categoriesPage\":true,\"permalink\":\"/categories\",\"article\":false,\"layout\":\"home\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"分类\",\"date\":\"2026-04-21 06:29:18\",\"capture\":\"\"},{\"url\":\"/@pages/tagsPage\",\"relativePath\":\"/@pages/tagsPage\",\"frontmatter\":{\"title\":\"标签\",\"permalink\":\"/tags\",\"tagsPage\":true,\"article\":false,\"layout\":\"home\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"标签\",\"date\":\"2026-04-21 06:29:18\",\"capture\":\"\"},{\"url\":\"/\",\"relativePath\":\"/\",\"frontmatter\":{\"layout\":\"home\",\"title\":\"首页\",\"titleTemplate\":\":title | Insight Stack Blog\",\"tk\":{\"teekHome\":true,\"features\":[{\"title\":\"全栈\",\"details\":\"Engineering × Product × AI\",\"link\":\"/fullstack/overview\",\"image\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/topic/icon_full_stack_circle.webp\"},{\"title\":\"AI 学习与实践\",\"details\":\"Model × Agent × Engineering\",\"link\":\"/ai-learning/overview\",\"image\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/topic/icon_llm_circle.webp\"},{\"title\":\"产品 Sense\",\"details\":\"Impact × Simplicity\",\"link\":\"/product-sense\",\"image\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/topic/icon_product_sense_circle.webp\"}]},\"hero\":{\"name\":\"Insight Stack Blog\",\"text\":\"AI & 全栈技术 & 产品思考与成长记录\",\"tagline\":\"✨探索技术前沿，沉淀产品思考，记录成长点滴，相信时间的力量\",\"actions\":[{\"theme\":\"brand\",\"text\":\"关于我\",\"link\":\"/about/me\"},{\"theme\":\"alt\",\"text\":\"资源推荐\",\"link\":\"/growth/sites\"},{\"theme\":\"alt\",\"text\":\"书籍推荐\",\"link\":\"/growth/books\"}],\"image\":{\"src\":\"/img/full-stack/insight_stack.png\",\"alt\":\"Insight Stack Blog\"}},\"features\":[{\"icon\":\"📖\",\"title\":\"全栈技术\",\"details\":\"前端 & NodeJS & Python 等\",\"link\":\"/fullstack/overview\"},{\"icon\":\"🎉\",\"title\":\"产品 Sense\",\"details\":\"产品 Sense = 用户价值洞察 × 商业可行性 × 技术可实现性\",\"link\":\"/product-sense\"},{\"icon\":\"🎇\",\"title\":\"LLM 应用学习与实践\",\"details\":\"梳理大语言模型应用、Agent 技术、上下文工程与AI编程等专题，探索 AI 时代的技术与应用。\",\"link\":\"/ai-learning/overview\"},{\"icon\":\"📝\",\"title\":\"个人成长\",\"details\":\"收录一些不错的站点、技术周刊、AI 等资源，总结个人在时间管理、效率工具、健康管理等方面的成长经验。\",\"link\":\"/about/me\"}]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"首页\",\"date\":\"2026-04-21 06:29:18\",\"capture\":\"<style\\n/* 彩虹动画 */\\n:root {\\n animation: rainbow 12s linear infinite;\\n}\\n.tk-avatar {\\n height: var(--tk-avatar-size) !important;\\n width: var(--tk-avatar-size) !important;\\n}\\n.tk-avatar--circle {\\n border-radius: 50% !important;\\n}\\n.vp-doc hero-text {\\n display: none !important;\\n}\\n@media (min-w\"}],\"originPosts\":[{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"sortPostsByDateAndSticky\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"sortPostsByDate\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"groupPostsByYear\":{\"2026 \":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"}],\"2025 \":[{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"}],\"2024 \":[{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}],\"2023 \":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"2022 \":[{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}]},\"groupPostsByYearMonth\":{\"2026 \":{\"04\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"}],\"03\":[{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"}],\"02\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"}],\"01\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"}]},\"2025 \":{\"10\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"}],\"11\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"12\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"}],\"08\":[{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"03\":[{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"}]},\"2024 \":{\"06\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"}],\"05\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"04\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"03\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"01\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}]},\"2023 \":{\"01\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}]},\"2022 \":{\"09\":[{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}]}},\"groupPosts\":{\"categories\":{\"AI 学习与实践\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/02.Agent 规划模块\",\"frontmatter\":{\"date\":\"2026-02-24 20:52:37\",\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"description\":\"摘要总结：如果说 LLM 是 Agent 的大脑，规划模块则是其负责复杂决策的“前额叶”。本文深度解构了 Agent 迈向确定性执行的核心路径：从任务分解的降低熵值，到自我反思的闭环控制。通过对比“边走边看”的 ReAct 动态响应模式与“谋定后动”的 Plan-and-Execute 预编排模式，本文揭示了如何针对长链路工程任务构建稳健的决策范式，助你完成从“简单提示词”到“复杂架构设计”的认知跃迁。\",\"permalink\":\"/ai-agent/planning-module\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"探寻 Agent 决策中枢：迈向确定性执行的规划范式\",\"date\":\"2026-02-24 20:52:37\",\"capture\":\"1. 引言\\n在人类大脑中，前额叶皮层负责复杂的认知规划、决策和社交表现。对于一个 Agent 而言，规划模块正是它的“前额叶”——它决定了 Agent 是只会机械响应指令的“木偶”，还是能独立拆解目标、在复杂环境中寻找最优路径的“数字员工”。\\nAgent 的规划能力主要由两部分协同驱动：任务分解与自我反思。\\n 2. 任务分解：化繁为简的策略\\n任务分解是指将一个复杂的目标或任务拆解为多个具体、可操作的的子任务，以便 Agent 能够更高效地执行和管理。其本质是降低问题的熵值，让 Agent 能够聚焦于每一个细小的确定性步骤，从而逐步解决问题，提高规划的可行性和执行效率。\\n根据“规划”与“执行”发\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"}],\"Agent 系列\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"}],\"全栈\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/00.overview\",\"relativePath\":\"/01.全栈/00.overview\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"全景一览\",\"description\":\"本系列围绕现代全栈开发的能力体系展开，从 AI 时代的工程思维出发，覆盖前端工程（React/Vue/CSS）、全栈基础素养（TypeScript/JavaScript）、工具与资源推荐等核心领域，帮助构建从\\\"认知层 → 技术领域 → 工程能力 → 基础设施\\\"的完整全栈知识图谱。\",\"categories\":[\"全栈\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/overview\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全景一览\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"<script setup\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { fullStackCategories } from '@fragment/data/full-stack-data'\\n</script>\\n<ArticleCardList :categories=\\\"fullStackCategories\\\" />\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"产品 Sense\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"},{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"},{\"url\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"relativePath\":\"/10.产品 Sense/05.方法论/50.用经济学思维做产品\",\"frontmatter\":{\"date\":\"2024-01-01 16:00:00\",\"title\":\"用经济学思维做产品\",\"description\":\"将经济学核心原理融合进产品设计全生命周期的方法论体系，构建理性的“产品Sense”。\",\"categories\":[\"产品 Sense\"],\"permalink\":\"/product-sense/using-economics-thinking\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用经济学思维做产品\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"在产品管理的广阔天地中，我们往往强调“产品 Sense”（Product Sense）——一种对用户需求、市场风向和技术潜力的直觉性捕捉。然而，这种 Sense 绝非凭空而来的灵光乍现，它需要稳固的理性地基。在众多学科中，经济学无疑提供了最底层的逻辑支柱。\\n经济学不仅仅是关于金钱和市场的科学，它更是一种解决问题、优化决策的方式。对产品人而言，借鉴经济学思维，意味着能够理智地权衡利弊，更精准地定价，更深刻地洞察人性，最终在错综复杂的约束条件下，求解出用户价值与商业价值并重的最优解。\\n 1. 生活里的经济学洞察——洞察不仅是关于需求，更是关于成本与博弈\\n我们常被日常现象的“合理性”所迷惑，而经济学\"}],\"AI\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/21.工程师如何构建产品 Sense\",\"frontmatter\":{\"date\":\"2025-10-23 16:05:50\",\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"description\":\"摘要总结：当 AI 让代码生成的边际成本趋近于零，“技术实现”不再是不可逾越的壁垒，“产品洞察”能构筑起新的核心护城河。本文拒绝玄学，将抽象的 产品 Sense 解构为三个核心数学公式，并提供一套基于“逆向工程”的刻意练习指南，助力开发者在算力过剩的时代，完成从“代码工匠”到“价值创造者”的认知跃迁。\",\"sticky\":1,\"top\":true,\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/engineer-build-product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"当“实现”不再是壁垒：工程师如何构建产品 Sense？\",\"date\":\"2025-10-23 16:05:50\",\"capture\":\"1. 引言\\n在很长一段时间里，产品 Sense（产品感） 被视为一种玄学。它似乎是乔布斯式的灵光一现，或是张小龙式的“独断专行”。\\n但对于大多数工程师、产品经理乃至独立开发者而言，将能力寄托于“天赋”是危险的。我认为，产品 Sense 并非不可捉摸的黑魔法，而是一套经过高频训练后内化为本能的思维算法。 就像资深程序员看到一段代码就能嗅出 \\\"Code Smell\\\"（代码异味），资深产品人也能在瞬间判断一个需求是“真痛点”还是“伪需求”。\\n一个成功的产品决策，往往发生在三个维度的交汇点：\\n* 用户价值洞察（User Value Insight）：不仅听懂用户说“想要更快的马”，更能洞察他其实“想更\"},{\"url\":\"/10.产品 Sense/00.学习与实践全景\",\"relativePath\":\"/10.产品 Sense/00.学习与实践全景\",\"frontmatter\":{\"date\":\"2026-03-19 23:05:50\",\"title\":\"学习与实践全景\",\"description\":\"产品 Sense 学习与实践全景一览，涵盖 AI 产品观察、复合型人才成长、商业化思考及方法论总结等。\",\"categories\":[\"产品 Sense\",\"AI\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"学习与实践全景\",\"date\":\"2026-03-19 23:05:50\",\"capture\":\"> * 追求高杠杆——以极简技术解决复杂问题，拒绝为炫技而设计的伪需求；\\n> * 平衡感性与理性——既共情用户的真实场景与情绪，又冷静追溯痛点本质，让产品既有温度，又不至于沦为功能的堆砌。\\n解构这种产品 Sense 的基础在于对投入产出比（ROI）的极致追求与对人性的深度剖析：\\n* 一方面，卓越的产品嗅觉意味着寻找“高杠杆解”，用最克制的技术复杂度去撬动最广泛且强烈的用户价值，果断规避为了技术而技术的伪需求陷阱。\\n* 另一方面，既需要设身处地感知用户的真实使用场景与情绪，又必须保持理性去追问痛点的根源，确保产品既不沦为臃肿的需求许愿池，也不变成缺乏人性温度的冰冷机器。\\n<im\"}],\"悦读时光\":[{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"}],\"个人成长\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"ai-practice\":[{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"网络与通信\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"前端工程\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"资源推荐\":[{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"关于\":[{\"url\":\"/40.关于/01.关于我\",\"relativePath\":\"/40.关于/01.关于我\",\"frontmatter\":{\"date\":\"2025-08-29 09:40:53\",\"title\":\"关于我\",\"description\":\"摘要总结：从 Tech Stack 到 Insight Stack，当 AI 接管了实现，我更关注架构的权衡与产品的价值，专注：工程化 Spec 与 AI 编程磨合的实践 | Agent 落地 | 独立产品。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/about_me_chinese.png\",\"permalink\":\"/about/me\",\"categories\":[\"关于\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"关于我\",\"date\":\"2025-08-29 09:40:53\",\"capture\":\"我是谁\\n我是一名拥有全栈背景的开发者, 技术底色源于工作几年后积累了较为扎实的工程化实践——从基础的 Web 前端到复杂的跨平台小程序基础框架的架构升级，再到基于 NodeJS 的服务端开发，这些经历锻炼了我对系统复杂度的掌控力、工程化能力以及项目推动与团队合作的能力。\\n自 2023 年 LLM 浪潮涌现以来，我深度投身于 AI 相关的技术探索。在工作与业余项目中，主导或参与了多个基于大模型的应用落地，积累了从 Prompt 调优到 Agentic Workflow 编排的一线经验，也多次参加了国内 AI 社区相关的技术分享与交流活动，了解了 AI 领域最新的技术趋势与实践。\\n\\n目前，我主要在\"}],\"全栈基础素养\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"模块化编程实践指南\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"growth\":[{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}]},\"tags\":{\"Agent SDK\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"}],\"Multi-Agent\":[{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/10.基于 Claude Agent SDK 搭建 Deep Research Agent\",\"frontmatter\":{\"date\":\"2026-04-02 00:38:37\",\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"description\":\"对复杂研究任务时，单智能体（Single-Agent）常因上下文稀释和逻辑疲劳导致产出质量下降。本文基于 Claude Agent SDK 探讨了多智能体系统（MAS）的工程化落地。通过“Lead + Subagent”的声明式架构，我们将深度研究拆解为搜索、量化分析、可视化绘图与结构化写作四个独立环节。\",\"permalink\":\"/ai-agent/deepresearch-agent\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent SDK\",\"Multi-Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"声明式多智能体协同：基于 Claude Agent SDK 构建深度研究系统\",\"date\":\"2026-04-02 00:38:37\",\"capture\":\"> 实践证明，通过严格的职责隔离（如 Lead Agent 仅负责调度）与工程边界约束（如 Researcher 强制提取量化指标），MAS 能够生成具备专业数据图表支撑的深度报告。本文将从架构设计、工作流编排到 PDF 自动生成，完整还原这一“AI 驱动调研流水线”的构建过程，并展示其在教育研究案例中的实战效果。\\n 1. 引言\\n在 AI Agent 深度全景综述一文中，我们探讨了多智能体系统（Multi-Agent Systems, MAS）的理论优势。从理论层面看，这类系统通过任务分解、职责隔离与并行协作机制，有效突破了单智能体在复杂任务中的能力瓶颈——不仅显著提升了任务处理的天花板\"}],\"Agent Skills\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"}],\"Agent\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/20.基于 Claude Agent SDK 搭建 Agent\",\"frontmatter\":{\"date\":\"2026-03-06 00:37:58\",\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"description\":\"在 Agent 技术快速走向成熟的今天，如何低成本构建具备“自主洞察”能力的智能体？本文深度拆解 Anthropic 官方推出的 Claude Agent SDK，解析其如何通过托管 Agent Loop 和会话持久化机制，解决 Agent 开发中的状态管理难题。文章通过从无状态交互到具备流式输出能力的 TUI 自动化工具进阶实战，展示了构建低成本、高可用 AI 原生应用的完整路径。\",\"permalink\":\"/ai-practice/claude-agent-sdk-basic-build\",\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"Agent SDK\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"告别手动 Loop：借助 Claude Agent SDK 实现 Agent 的工程化闭环\",\"date\":\"2026-03-06 00:37:58\",\"capture\":\"1. 引言\\n当前，AI Agent 的演进已进入一个崭新的阶段——从需要频繁人工干预的\\\"半自动\\\"模式，进化为能够自主洞察环境变化、动态调整执行策略、实现业务流程自适应编排的智能化系统。Claude Code、Manus、OpenClaw 等代表性产品层出不穷，也标志着 Agent 技术正在快速走向成熟与普及。\\n近期，笔者在为个人博客引入智能化运营能力（如内容自动校对、审稿与发布），深入研究了多款 Agent 开发框架，如 Claude Agent SDK、Langchain、LangGraph 等。在经过初步的研究对比分析后，Claude Agent SDK 成为了低成本构建高可用 Agent\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"AI\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/10.Agent SKills\",\"frontmatter\":{\"date\":\"2026-03-05 23:11:25\",\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"description\":\"大语言模型在特定工程领域常面临“知而不行”的困境。本文深度拆解 Anthropic 最新推出的 Agent Skills 规范，揭秘其如何通过渐进式披露与三级加载机制，在控制 Token 成本的同时显著提升 Agent 的任务执行精度。文章涵盖了从文件夹架构设计到实战 git-workflow 编写的全流程指南，助你将零散的 Prompt 转化为标准化的数字资产。\",\"permalink\":\"/ai-agent/skills-practice-summary\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\",\"Agent 系列\"],\"tags\":[\"Agent Skills\",\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何编写一个高可用的 Agent Skill？从机制拆解到生产实践指南\",\"date\":\"2026-03-05 23:11:25\",\"capture\":\"1. 引言：Agent Skills 是什么？\\n在大语言模型（LLM）的落地实践中，开发者经常面临一个共性挑战：模型在特定细分领域往往处于“知而不行”的状态——虽然拥有博杂的知识，却缺乏执行复杂任务的专业路径。\\n为了解决这一痛点，Anthropic 在其旗舰模型 Claude 3.7 系列中正式推出了 Claude Skills。这一功能将 LLM 的能力封装为直观的“能力文件夹”，极大提升了智能体的实用性，并迅速在开发者社区引发热议。2025 年 12 月，随着 Anthropic 联合生态伙伴正式开源 Agent Skills 规范，Agent Skills 的标准化也正式开启（而这一能力\"},{\"url\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/03.构建 Agentic 生态：将零散组件化为可持续的工作流\",\"frontmatter\":{\"date\":\"2026-02-06 15:48:23\",\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"description\":\"摘要总结：面对层出不穷的 Prompt、MCP、Skills 和 Subagents，很多开发者和产品经理常感到困惑：这些组件究竟是重复造轮子，还是各司其职的积木？本文将深度拆解 Agentic 生态的五大核心支柱，揭示如何通过优雅的架构设计实现协同闭环，将零散的 AI 组件拼装成一套可持续进化的 AI 原生操作系统，把碎片化的 AI 能力转化为高可用的生产力流。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\",\"permalink\":\"/ai-agent/composition-ai-components\",\"sticky\":1,\"top\":true,\"categories\":[\"AI 学习与实践\"],\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"构建 Agentic 生态：零散组件化为可持续的工作流\",\"date\":\"2026-02-06 15:48:23\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/ai-practice/agent_components_zh.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 引言\\n> 问题：在智能体生态里，各个组件到底是怎么协同工作的？\\n当前，Agent（智能体）技术发展迅猛，各种设计模式、核心组件与工作机制层出不穷。面对繁杂的智能体生态\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/70.诗歌小精灵\",\"frontmatter\":{\"date\":\"2024-04-19 22:15:38\",\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"description\":\"摘要总结：在 Agent 概念满天飞的当下，决定大模型实际表现的往往是最底层的 System Prompt 设计。本文记录了周末利用文心智能体平台搭建“诗歌小精灵”的完整实践。通过对比“传统大段文本”与“LangGPT 结构化”两种 Prompt 的实际输出，深度拆解了结构化 Prompt 如何像“写代码”一样规范 AI 的思考工作流，有效解决指令漂移与幻觉问题。这不仅是一次 Prompt 调优实验，更是一场关于 AI 产品 Sense 与未来交互形态的探索。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"categories\":[\"ai-practice\"],\"permalink\":\"/ai-practice/poetry-bot\",\"tags\":[\"Agent\",\"AI\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"零代码不等于零逻辑：结构化 Prompt 驱动下的 Agent 搭建实战\",\"date\":\"2024-04-19 22:15:38\",\"capture\":\"1. 实践背景\\n周末在社区活动中再次听到了 LangGPT 作者云中江树关于“结构化提示词”的分享，让人感触颇深。虽然当前 Agent 概念火热，层出不穷的框架让人眼花缭乱，但回归本质我们就会发现：System Prompt 的底层设计、上下文工程以及指令遵循机制，才是决定一个 Agent 灵魂的关键。\\n正巧大团队自研的零代码 Agent 平台近期发布了新版本，为了亲测平台性能并实战演练结构化 Prompt 的编写技巧，我决定创建一个“诗歌小精灵” Agent。这不仅是一个趣味实验，更是为了探索 AI 在文学创作这种“感性领域”中，如何通过“理性的结构约束”达到更高的输出上限。\\n 2. 平台与\"}],\"全栈\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"},{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"},{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/02.重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"frontmatter\":{\"date\":\"2026-03-02 11:05:50\",\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"description\":\"摘要总结：当 AI 极速降低代码编写门槛，单纯的“业务代码翻译器”角色正加速贬值。本文从技术演进与产品思考的交汇点出发，将 AI 时代的开发者能力图谱重新划分为三大核心圈层：产品应用层（Insight Stack）、Agent 开发层与 AI 基础设施层。无论你是深耕视图层交互、精通 Node.js 等服务端架构的开发者，还是致力于技术落地的探索者，都能在这份演进指南中找到打破能力边界、向“超级个体”与“AI 智能体指挥官”跃迁的破局之道。\",\"permalink\":\"/fullstack/ai-engineer-capability\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"重构开发者：AI 时代下的工程师能力图谱与演进指南\",\"date\":\"2026-03-02 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/ai_engineering_arc.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site back\"},{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/10.读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"frontmatter\":{\"date\":\"2025-12-06 22:05:50\",\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"description\":\"软件工程正经历从“手写逻辑”向“意图调度”的范式迁徙。Anthropic 的研究揭示了 AI 并非简单的提效工具，而是通过释放 27% 曾经“不划算”的工程任务，重塑了软件质量的密度。在自然语言即编程语言的时代，我们需要通过规格驱动（SDD）与多智能体编排，破解“监督悖论”带来的技能平庸化危机，将 AI 的概率性生成驯化为确定性的工程交付。当编码成本趋于零，工程师的终极壁垒将是定义完美的品味，以及在 AI 迷雾中识破平庸的洞察力。\",\"permalink\":\"/fullstack/ai-change-work-workflow/\",\"top\":true,\"tags\":[\"全栈\",\"AI\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读 Anthropic 研究报告，探寻 AI 时代的工程范式重塑\",\"date\":\"2025-12-06 22:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n地址：How AI is transforming work at Anthropic\\n核心标签：`AI辅助编程` `工程` `范式转移` `工作转型` `生产力提升` `技能发展` `人机协作` \\n一句话介绍：Anthropic 不仅仅是 AI 工具的生产者，更是第一个进入“未来实验室”的深度观察者。他们通过内部数月的实验数据告诉我们：大模型对软件工程的改造，绝非简单的“提效”，而是一\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"}],\"产品\":[{\"url\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"relativePath\":\"/01.全栈/01.AI Native 工程思维/01.不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"frontmatter\":{\"date\":\"2025-10-24 11:05:50\",\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"description\":\"摘要总结：在 AI 重塑软件工程的今天，全栈不再是技术的线性叠加，正在从“技术栈堆砌”转向“认知栈重构”。本文提出 “(工程 + 产品) × AI” 的新公式，助力开发者构建“洞察-架构-杠杆”认知三层塔，利用 AI 杠杆让自己进化为价值创造者。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"permalink\":\"/fullstack/ai-native\",\"sticky\":1,\"top\":true,\"tags\":[\"全栈\",\"AI\",\"产品\"],\"categories\":[\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于代码：构建 AI 时代全栈工程师的“认知三层塔”\",\"date\":\"2025-10-24 11:05:50\",\"capture\":\"<script setup>\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在很长一段时间里，当我们谈论“全栈工程师”时，脑海中浮现的往往是一张冗长且令人疲惫的技术工序清单。\\n就像我曾经以为的那样，全栈就是线性的技能叠加与物理式的技术拼接，是一种依靠人力去填补技术鸿沟的“西西弗斯式”努力：\\n* 线性的技能叠加：我们被迫成为“全能手”，左手用 React/Vue 构建精美的 UI，右手用 Node/Go 编写高并发 API，中间还要处理数据库的 ACI\"}],\"悦读时光\":[{\"url\":\"/30.悦读时光/10.读书三要三不要\",\"relativePath\":\"/30.悦读时光/10.读书三要三不要\",\"frontmatter\":{\"date\":\"2025-03-06 11:42:20\",\"title\":\"读书“三要”和“三不要”\",\"description\":\"摘要总结：在信息爆炸的时代，读书依然是获取深度知识最高效的方式之一。但“捧起书”并不等于“有收获”，怎么读往往比读什么更重要。本文总结了高效阅读的“三要”与“三不要”：从完整阅读观摩大师思维、带着问题构建知识树，到通过讨论检验理解；同时提醒阅读者警惕哀怨心态对阅读初衷的异化、避免陷入对物理媒介的“玩物丧志”，以及切忌脱离现实的“真空”阅读。阅读不仅是向内探索的精神之旅，更是向外理解真实世界、创造社会价值的实用工具。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\",\"permalink\":\"/pages/growth/reading-tips\",\"sticky\":1,\"top\":true,\"categories\":[\"悦读时光\"],\"tags\":[\"悦读时光\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读书“三要”和“三不要”\",\"date\":\"2025-03-06 11:42:20\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/reading_need.png\\\" style=\\\"width: 100%; border-radius: 8px; margin-bottom: 20px;\\\" alt=\\\"about site background\\\">\\n 1. 我们为什么需要读书？\\n读书是从外界接受信息的一种方式，与聊天、浏览网页、听播客、看电视并无本质区别。但书这种媒介与其他信息媒介相比，有其独有的优势：\\n- 深度与严谨：书籍往往是创作者多年思考、长期\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}],\"系统思维\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"}],\"数学思维\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"}],\"模型思维\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"}],\"疫情\":[{\"url\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"relativePath\":\"/40.关于/30.成长随笔/01.走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"frontmatter\":{\"date\":\"2024-01-15 22:16:00\",\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"description\":\"摘要总结：书接上文《向内思变》，本文记录了笔者在后疫情时代从“闭关”走向“向外体验”的尝试与心得。面对机械执行带来的“目标隧道”效应，笔者尝试跳出单一的线性规划，转而寻求更底层的认知逻辑。文章通过重读《要事第一》建立平衡观，利用系统思维（增强/调节回路）构建洞察力，并重新拾起数学思维（概率、稀疏性、多样性）与 AI 视角。这是一次关于如何用科学模型替代机械执行，从本质上重构个人认知体系的深度复盘。\",\"permalink\":\"/growth/outer-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/outer_experience_bg.png\",\"sticky\":1,\"top\":true,\"tags\":[\"系统思维\",\"数学思维\",\"模型思维\",\"AI\",\"疫情\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"走出“目标隧道”：用系统与数学思维重构底层逻辑\",\"date\":\"2024-01-15 22:16:00\",\"capture\":\"1. 写在前面\\n时光荏苒，疫情已经由放开状态继续演变为过去式状态，我们人类也从『闭关』走向了『自由』的社会生活状态。笔者作为社会中的普通一员，自然也不离外，在 2023 年初洋洋洒洒写了一篇在健康、读书与学习、时间管理和混合工作制几个方面的实践与理解（向内思变：当疫情给世界按下暂停键，去重构生活秩序），就开开心心地向前看，学着向外体验了。\\n那么问题来了，相比之前写出长文，笔者又是近一年没有向外输出软文了。因此，书接上文，本次继续新增一篇中短文，漫谈一下疫情后的向外体验。\\n在倒逼自己关注身体健康和时间管理后，虽然在体重和效率两个方面有一定的正向效果，但笔者在连续坚持落地拆解出来的目标过程中，有时\"},{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"健康\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"},{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}],\"时间\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"远程协作\":[{\"url\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"relativePath\":\"/40.关于/30.成长随笔/10.向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"frontmatter\":{\"date\":\"2023-01-08 10:23:50\",\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"description\":\"摘要总结：当世界按下暂停键，如何避免内耗？本文记录了笔者三年间的“自我重构”实验。文章摒弃了单纯的情绪宣泄，而是利用分解法、渐进明细和统计分析等工程思维，对健康饮食、知识体系、时间分配及远程协作进行了系统化改造。这是一份关于如何在无常的外部环境中，建立内在确定性秩序的行动指南。\",\"permalink\":\"/growth/inner-experience\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\",\"sticky\":1,\"top\":true,\"categories\":\"个人成长\",\"tags\":[\"健康\",\"时间\",\"悦读时光\",\"远程协作\",\"疫情\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"向内思变：当疫情给世界按下暂停键，去重构生活秩序\",\"date\":\"2023-01-08 10:23:50\",\"capture\":\"<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/growth/refactor_life.png\\\" alt=\\\"目标到践行思维流程示意图\\\" style=\\\"width: 100%; border-radius: 8px;\\\" />\\n 写在前面\\n自去年 7 月份迁移几篇旧文后，笔者就没有继续写软文了，想不到再次写文章时疫情政策已经调整，且初步实现了开放。那么问题来了，为什么要继续写文章呢？概括来讲，有两个方面的原因：\\n* 直接原因：疫情这三年，每个人都体验到了不同于之前的 “难”，也都有\"}],\"LLM\":[{\"url\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"relativePath\":\"/20.AI 学习与实践/00.AI 学习与实践全景一览\",\"frontmatter\":{\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"description\":\"全景式 AI 学习与实践知识库，系统沉淀 AI Agent 设计模式、大模型工程化落地、开源小项目及社区活动经验总结，持续迭代从理论到生产的完整方法论。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-learning/overview\",\"categories\":[\"ai-practice\"],\"tags\":[\"AI\",\"LLM\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 学习与实践全景\",\"date\":\"2026-03-15 16:00:00\",\"capture\":\"<!-- 精选专题 --\\n<script setup>\\nimport ArticleCardList from '@fragment/components/ArticleCardList.vue'\\nimport { aiLearningCategories } from '@fragment/data/ai-learning-data'\\n</script>\\n<ArticleCardList :categories=\\\"aiLearningCategories\\\" />\"}],\"CSS\":[{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"}],\"工程化\":[{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"}],\"tailwindcss\":[{\"url\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"relativePath\":\"/01.全栈/40.前端工程/02.CSS工程化\",\"frontmatter\":{\"date\":\"2026-03-10 22:05:50\",\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"description\":\"本文系统剖析主流 CSS 工程化方案的底层逻辑，提出“样式资产 ROI”评估模型，并针对 Vue/React 生态给出了面向 AI 时代的企业级混合架构选型建议。\",\"permalink\":\"/full-stack/css-engineering\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/full-stack/insight_stack.png\",\"top\":true,\"categories\":[\"全栈\"],\"tags\":[\"全栈\",\"CSS\",\"工程化\",\"tailwindcss\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从原子化到变体驱动：现代 CSS 工程化的架构演进与混合实践指南\",\"date\":\"2026-03-10 22:05:50\",\"capture\":\"1. 引言：主流 CSS 工程化方案有哪些？\\n在现代前端开发中，随着项目复杂度的急剧提升，原生 CSS 常常面临全局污染、复用困难、层级嵌套过深以及维护成本极高等问题。为了解决这些痛点，社区多年来不断探索，沉淀出了多种主流的 CSS 工程化方案。\\n除原生 CSS 之外，主流方案还包括预处理器、CSS-in-JS、CSS Module、Scoped CSS、原子化 CSS 等。BEM 作为一种基于命名约定来规避命名冲突的早期方案，在现代前端工程中已基本不再使用，因此本文不再对其展开详细分析。\\n> CSS 命名规范（BEM）：通过严格的命名约定（如 Block__Element--Modif\"}],\"tutorial\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"},{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"},{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"SSE\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"HTTP Streaming\":[{\"url\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"relativePath\":\"/01.全栈/60.网络与通信/02.流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"frontmatter\":{\"date\":\"2026-03-05 16:54:35\",\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"aliases\":[\"Server-Sent Events\",\"HTTP Streaming\"],\"tldr\":\"深入解析流式 HTTP 与 SSE 协议，提供从概念到生产实践的完整解决方案。\",\"description\":\"辨析流式 HTTP 与 SSE 协议的概念与层次关系，详解客户端与服务端实现方案，提供生产实践完整指南。\",\"tags\":[\"tutorial\",\"SSE\",\"HTTP Streaming\",\"全栈\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking/sse-practice\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"流式 HTTP 与 SSE 协议：从概念辨析到生产实践\",\"date\":\"2026-03-05 16:54:35\",\"capture\":\"<script setup\\n import HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结: 针对开发者容易混淆流式 HTTP 与 SSE 协议的问题，从概念层次出发厘清二者本质区别与协作关系，指出流式 HTTP 是底层传输机制而 SSE 是应用层数据格式约定。文章依次介绍原生 EventSource API、fetch + ReadableStream 进阶方案、@microsoft/fetch-event-source 工业级实现等三种客户端方案，并以 Nes\"}],\"HTTP 轮询\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"},{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"退避轮询\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"}],\"长轮询\":[{\"url\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"relativePath\":\"/01.全栈/60.网络与通信/03.退避轮询与长轮询的原理、实战与选型决策\",\"frontmatter\":{\"date\":\"2026-02-25 22:10:48\",\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"tldr\":\"详解退避轮询与长轮询的实现原理，提供 HTTP 轮询优化策略与选型决策树。\",\"description\":\"深入剖析退避轮询与长轮询的核心机制，提供 TypeScript/NestJS 实战代码，并构建技术选型决策树与适用场景速查。\",\"tags\":[\"HTTP 轮询\",\"退避轮询\",\"长轮询\"],\"categories\":[\"全栈\",\"网络与通信\"],\"permalink\":\"/fullstack/networking-polling-optimization\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"HTTP 轮询优化指南：退避轮询与长轮询的原理、实战与选型决策\",\"date\":\"2026-02-25 22:10:48\",\"capture\":\"1. 引言\\n在现代 Web 开发中，WebSocket 和 Server-Sent Events (SSE) 常常被视为实时通信的银弹。然而，HTTP 轮询（Polling）作为最朴素的实时通信方案，非但没有退出历史舞台，反而在特定的复杂业务场景中大放异彩。\\n> 📖 如果你对 HTTP 轮询在整个 Web 通信协议体系中的定位尚不清晰，推荐先阅读 Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南，了解轮询与短连接、长连接、WebSocket、SSE 等方案的演进关系与适用边界，再结合本文深入实践。\\n在当前众多顶级的 AI AIGC 应用（如 Midjourne\"}],\"HTTP\":[{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"WebSocket\":[{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"Webhooks\":[{\"url\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"relativePath\":\"/01.全栈/60.网络与通信/01.从 HTTP 到 WebSocket 的技术选型指南\",\"frontmatter\":{\"date\":\"2026-02-24 08:40:31\",\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"tldr\":\"深入分析五种 Web 通信协议，提供 AI 时代的技术选型指南与最佳实践。\",\"description\":\"深入剖析传统 HTTP、流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询的原理与特性，结合 AI 场景提供技术选型决策矩阵。\",\"categories\":[\"全栈\",\"网络与通信\"],\"tags\":[\"HTTP\",\"HTTP 轮询\",\"SSE\",\"WebSocket\",\"Webhooks\"],\"permalink\":\"/fullstack/networking-protocol-selection-guide\"},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Web 通信协议全景：从 HTTP 到 WebSocket 的技术选型指南\",\"date\":\"2026-02-24 08:40:31\",\"capture\":\"1. 引言\\nHTTP 是一种基于文本的通信协议，主要用于 Web 浏览器、移动应用、桌面应用等客户端和 Web 服务器之间的数据传输。传统 HTTP 采用同步的请求-响应模式：`请求 -> 等待 -> 完整响应`。这种方式虽能满足大多数场景，但在实时性要求较高的领域——如游戏、聊天、视频会议，以及 AI 时代的对话式应用——却显得力不从心。\\n为解决这一问题，业界发展出了多种实时 Web 通信方案。本文将围绕 流式 HTTP、SSE、WebSocket、Webhooks、HTTP 轮询 这五种主流技术，从原理、特性、适用场景出发，探讨它们在现代分布式架构中的选型策略与工程实践。\\n 2\"}],\"AI Agent\":[{\"url\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"relativePath\":\"/20.AI 学习与实践/02.Agent 系列/01.Agent概览与综述\",\"frontmatter\":{\"date\":\"2026-02-12 22:31:00\",\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"description\":\"摘要总结：AI 的进化正经历从“对话框”向“数字员工”的根本性跨越。本文是一篇关于 AI Agent 的全景深度综述，旨在解构智能体如何从简单的 Prompt 响应者，演变为具备自主目标拆解、长短期记忆与复杂环境交互能力的“执行者”。我们将深度拆解 Agent 的四大技术基石（规划、记忆、工具、行动），并详细剖析从通用型 Agent 到多智能体协作（MAS）、再到迈向 Agent OS 时代的 OpenClaw 等五大演进形态。不仅探讨了技术架构的实现，更揭示了软件工程从“以人为中心”向“以 AI 为中心”的范式革命——在 Agent 驱动的新纪元，核心竞争力将不再是代码量，而是调度 AI 闭环解决业务问题的能力。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/llm_learning_bg_1.png\",\"permalink\":\"/ai-agent/overview\",\"top\":true,\"categories\":[\"ai-practice\"],\"tags\":[\"AI Agent\",\"Agent\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从提示词到数字员工：AI Agent 深度全景综述\",\"date\":\"2026-02-12 22:31:00\",\"capture\":\"1. 什么是 Agent？——从“工具”到“实体”的进化\\n> 核心逻辑：现代 Agent 的本质是 \\\"LLM (大脑) + 规划与记忆 (小脑) + 工具调用 (手脚)\\\"。LLM 的海量知识储备让 Agent 能够精准理解复杂指令，并将其转化为实际行动。\\n在 AI 领域，Agent（智能体） 并非一个新概念，但 LLM（大语言模型）的爆发赋予了它真正的“灵魂”。简单来说，Agent 是一种能够感知环境、自主决策并执行任务的智能实体。\\n如果说传统的 AI 是一个“问答机”，那么 Agent 就是一个“执行者”。它具备以下四大核心特质：\\n* 自主性 (Autonomy)： 无须时刻盯着，设定\"}],\"react\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"component-design\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"state-management\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"ai-augmented\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"specification-driven\":[{\"url\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/01.React 设计哲学：AI 协作时代的组件化开发实践指南\",\"frontmatter\":{\"date\":\"2026-02-10 23:33:19\",\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"tldr\":\"当 AI 承接了 30% 的编码执行时，开发者需通过“规格驱动（SDD）”重夺 70% 的设计主权：从自治组件划分到单向数据流拓扑的深度推演。\",\"description\":\"本文探讨在 AI 增强开发背景下，如何重塑 React 组件设计原则。涵盖 SRP 职责划分、静态版本基线、最小状态（Derived Data）推导以及 SDD 人机协作模式的工程落地。\",\"tags\":[\"tutorial\",\"react\",\"component-design\",\"state-management\",\"ai-augmented\",\"specification-driven\"],\"permalink\":\"/fullstack/react-design-philosophy-ai-augmented\",\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"React 设计哲学：AI 协作时代的组件化开发实践指南\",\"date\":\"2026-02-10 23:33:19\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n 1. 引言\\n在软件工程中，约 70% 的时间应投入于架构设计、需求拆解与接口语义推敲，仅 30% 用于实际编码。进入 AI 协作时代后，这一比例依然坚如磐石——开发者必须先完成深度思考，将“清晰的问题规格（Specification）”交给 AI，AI 才能输出高质量代码。<HighLightText type=\\\"note\\\" bold>AI 提升的是 30% 编码阶段的执行力，而非取\"}],\"资源推荐\":[{\"url\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"relativePath\":\"/01.全栈/90.工具与资源推荐/90.全栈技术资源推荐\",\"frontmatter\":{\"date\":\"2026-02-06 15:58:53\",\"title\":\"全栈技术资源推荐\",\"description\":\"摘要总结：本文系统梳理了现代全栈开发的完整技术图谱与演进范式，为开发者提供了一站式的技术选型指南。文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/Nuxt 同构元框架与 NestJS 企业级 Node 服务的最佳适用场景。最后，辅以 Vercel 等现代边缘部署平台及丰富的开源社区学习资源。\",\"permalink\":\"/growth/full-stack-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"全栈\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"全栈技术资源推荐\",\"date\":\"2026-02-06 15:58:53\",\"capture\":\"> - 文章从基石出发，覆盖 Web 核心语言（JS/TS） 与 主流 UI 框架（React/Vue/Svelte），并推荐以 Tailwind CSS 和 shadcn/ui 为代表的现代样式与组件原语。\\n> - 在核心业务逻辑层，深度对比了轻量化状态管理方案（首推 Zustand/Jotai），并重点解析了数据交互的三大现代架构范式：从基础 Axios 到 React Query 状态调度，再到 tRPC 和 GraphQL 带来的全栈类型安全与多端聚合。\\n> - 在工程化与服务端模块，文章全面拥抱 Vite、Rsbuild 等极速构建工具，并剖析了 Next.js/N\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"},{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"},{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/30.悦读时光/01.好书推荐\",\"relativePath\":\"/30.悦读时光/01.好书推荐\",\"frontmatter\":{\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"description\":\"读书心得、推荐书籍和阅读技巧\",\"categories\":[\"growth\"],\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/books_reading_bg.png\",\"permalink\":\"/growth/books\",\"tags\":[\"悦读时光\",\"资源推荐\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好书推荐\",\"date\":\"2024-01-01 16:00:00\",\"capture\":\"<script setup\\n import BookRecommend from './@fragment/BookRecommend.vue'\\n import {aiBooks, productSenseBooks, businessBooks, efficiencyBooks, growthBooks, humanSocialBooks, healthBooks} from './@fragment/recommends-data.ts'\\n</script>\\n 1. AI 与数学思维\\n> 在大模型发展日新月异的今天，理解 AI 本质上是在升级我们资深的“认知操\"}],\"LLM API\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/11. LLM API 平台推荐与选型指南\",\"frontmatter\":{\"date\":\"2026-01-06 15:58:53\",\"title\":\"LLM API 平台推荐与选型指南\",\"description\":\"摘要总结：截至 2026 年，LLM API 服务已形成\\\"官方直连 + 第三方聚合\\\"的双轨格局，模型能力、定价、合规性与接入便利性差异显著。本文从选型前提问出发，系统梳理国际与国内主流官方 API 平台，以及 OpenRouter、硅基流动等第三方聚合平台的核心特点，并提供基于场景的决策框架，帮助开发者和产品团队快速锁定最适合自己的方案。\",\"permalink\":\"/ai-learning/llm-api-resources\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"LLM API\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"LLM API 平台推荐与选型指南\",\"date\":\"2026-01-06 15:58:53\",\"capture\":\"1. 选模型前，先想清楚这几件事\\n在对比具体平台之前，可从以下四个维度梳理自身诉求，避免\\\"眼花缭乱后随便选一个\\\"：\\n| 维度 | 关键问题 | 影响决策 |\\n|:-----|:--------|:--------|\\n| 任务类型 | 是通用对话、代码生成、长文档分析，还是多模态理解？ | 不同模型在垂直能力上差距悬殊 |\\n| 成本预算 | 每月调用量级？能否接受海外结算与汇率风险？ | 国产模型 Token 价格通常低 3～10 倍 |\\n| 合规与部署 | 数据能否出境？能否使用海外服务？是否需要私有化部署？ | 涉及政务/金融/医疗场景必须考虑 |\\n| 网络环境 | 开发/部署环境能否稳定访\"}],\"AI Coding\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"}],\"Vibe Coding\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"}],\"Agentic Engineering\":[{\"url\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"relativePath\":\"/01.全栈/10.AI 编程实践指南/00.AI编程工具与资源\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"AI 编程工具与资源推荐\",\"description\":\"摘要总结：本文深度解析了 AI 驱动编程的三大演进范式：Vibe Coding（自然语言零门槛构建）、AI IDE（编辑器深度辅助提效）及 Agentic Engineering（自主工程师执行任务）。通过横向对比 Bolt.new、Cursor、Claude Code 等前沿工具，文章勾勒出一条从“快速原型”到“高效协同”再到“自主交付”的进阶路径。核心旨在指导用户利用 AI 工具矩阵打破技术边界，实现从创意描述到工业级交付的生产力飞跃，重塑软件开发全生命周期。\",\"permalink\":\"/ai-learning/ai-coding-resources\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI Coding\",\"Vibe Coding\",\"Agentic Engineering\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI 编程工具与资源推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. 三种编程范式速览\\n| 范式 | 一句话描述 | 你的角色 |\\n|:-----|:---------|:--------|\\n| Vibe Coding | 用自然语言描述需求，AI 直接生成可运行的完整项目 | 描述需求，让 AI 写代码(```新手友好```) |\\n| AI IDE | 在编辑器里引入 AI 辅助，边写边补全、边问边改 | 主导开发，让 AI 做副驾驶(```更多控制```) |\\n| Agentic Engineering | AI 作为\\\"自主工程师\\\"，接收任务后自动规划并执行全套代码工作流 | 提任务、审结果，让 AI 执行(```极致提效```) |\\n新手路线建议：先\"}],\"AI 助手\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"}],\"AI 搜索\":[{\"url\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"relativePath\":\"/20.AI 学习与实践/90.资源与工具推荐/01.好用的 AI 助手与工作站推荐\",\"frontmatter\":{\"date\":\"2025-11-25 00:52:28\",\"title\":\"好用的 AI 助手与工作站推荐\",\"description\":\"摘要总结：为便于高效利用 AI 工具提升学习、搜索和创作效率，本文系统整理了主流的 AI 助手与内容创作平台相关资源。内容分为“AI 助手”（如 ChatGPT、Claude、Gemini 等对话式助手）和“内容创作平台”（如写作、绘画等领域的 AI 工具与平台），且标注了其核心能力、适合场景，以及特色优势。\",\"permalink\":\"/ai-learning/tools-assistant\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/source_sites_bg.png\",\"categories\":[\"资源推荐\"],\"tags\":[\"资源推荐\",\"AI\",\"AI 助手\",\"AI 搜索\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"好用的 AI 助手与工作站推荐\",\"date\":\"2025-11-25 00:52:28\",\"capture\":\"1. AI 助手\\n> 选择建议： 英文为主 → 优先 ChatGPT / Claude / Gemini；中文为主 → 优先 Kimi / DeepSeek / 通义千问；需要联网实时信息 → Gemini / Grok；需要分析长文档 → Claude / Kimi；追求低成本开源部署 → DeepSeek。\\n>\\n> 注：目前国外模型（如 ChatGPT、Claude、Gemini 等）在英文处理、多模态能力、插件生态和 API 丰富性等方面，整体上依然优于国内模型，适合对英文创作、多语言沟通、复杂推理、代码助手等场景有更高要求的用户。不过，国内模型在中文理解、本地化、合规\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"产品 Sense\":[{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"},{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"},{\"url\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"relativePath\":\"/20.AI 学习与实践/04.社区活动与实践小项目/60.数学小助手\",\"frontmatter\":{\"date\":\"2024-06-14 22:00:00\",\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"description\":\"摘要总结：AI 时代，写好代码只是及格线。在一次极限挑战赛中，我们通过对 K12 赛道用户痛点的精准“视角切换”，打造出一款授人以渔的“数学辅导导师”并斩获大奖。本文复盘了 Agent 搭建背后的核心 SOP 设计逻辑：技术终究要回归对真实人性的体察与关怀。\",\"coverImg\":\"/img/cover/llm_learning_bg_2.png\",\"permalink\":\"/ai-practice/math-bot\",\"categories\":[\"ai-practice\"],\"tags\":[\"Agent\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"一次由 Product Sense 驱动的 Agent 极限实践\",\"date\":\"2024-06-14 22:00:00\",\"capture\":\"在刚刚过去的周末，我和好友参加了一场由千帆 Agent 举办的线下社区活动。这是一场充满极客精神的“极限挑战”——我们需要在极其有限的时间内，从零开始构思、搭建并现场展示一个完整的 Agent 应用。\\n令人惊喜的是，我们不仅顺利完成了极限开发，最终还斩获了全场的「最佳应用奖」。\\n复盘这次短暂却高密度的开发体验，最大的感触是：在 AI 时代，单纯的工程实现已经不再是唯一的壁垒，真正让应用脱颖而出的，是对真实业务场景的洞察力。当 (Engineering + Product) × AI 的飞轮开始转动时，技术才能真正转化为解决问题的利器。\\n以下是关于这次“K12 数学小助手” Agent 搭建的实\"},{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"商业化\":[{\"url\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"relativePath\":\"/10.产品 Sense/04.产品创造与商业化/30.《小而美：持续盈利的经营法则》读后感\",\"frontmatter\":{\"date\":\"2025-11-24 21:50:00\",\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"description\":\"摘要总结：在很长一段时间里，科技互联网行业的叙事都被“不惜一切代价实现超线性增长”所主导。仿佛只有拿到巨额融资、疯狂招人、成为估值破百亿的庞然大物，才算得上是成功的创业。然而，读完萨希尔·拉文吉亚的《小而美：持续盈利的经营法则》后，笔者获得了一种截然不同的商业视角：企业存在的首要目的不是为了融资和扩张，而是为了通过解决问题来获得持续的盈利。 本文结合书中的核心论点与自身的研发视角，把将这本书背后的经营逻辑与产品哲学梳理为几个核心层面的思考。\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/small-rule-learn\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"商业化\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"放弃增长执念，为什么“小而美”才是可持续之路\",\"date\":\"2025-11-24 21:50:00\",\"capture\":\"书名：《小而美：持续盈利的经营法则》\\n作者：[美] 萨希尔·拉文吉亚\\n核心标签：极简创业｜社区本位｜持续盈利｜创作者经济\\n一句话简评：在盲目崇拜规模扩张的商业语境下，这是一份写给独立创作者与开发者的清醒指南，教会我们如何用最少的资源，解决真实的痛点，并获得长久的自由。\\n更多书籍推荐信息可参考：产品 Sense 与商业化\\n 1. 社区先行：从“我是谁”到“我能为谁解决问题”\\n传统商业逻辑往往是先构思一个宏大的点子，闭门造车打磨产品，最后再砸钱去市场上寻找目标用户。而本书提出了一个颠覆性的反向路径：社区 $\\\\rightarrow$ 问题 $\\\\rightarrow$ 流程 $\\\\rightarrow$\"}],\"SWR\":[{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"}],\"TanStack Query\":[{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"}],\"前端工程\":[{\"url\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"relativePath\":\"/01.全栈/40.前端工程/11.React 服务端状态管理的范式转移与选型深度博弈\",\"frontmatter\":{\"date\":\"2025-11-15 09:20:23\",\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"aliases\":[\"SWR\",\"TanStack Query\",\"React\",\"服务端状态\",\"乐观更新\",\"工程化\"],\"tldr\":\"深入解析 SWR 的极简协议与 TanStack Query 的精密状态机。通过对比缓存失效、乐观更新等核心场景，为高复杂度 B 端应用与轻量级项目提供清晰的架构选型模型。\",\"description\":\"深度对比 React 生态中 SWR 与 TanStack Query 两大方案。从 stale-while-revalidate 机制到异步状态机架构，涵盖依赖查询、数据转换及架构级乐观更新实战。旨在帮助开发者在复杂业务中构建确定性的服务端状态基座。\",\"permalink\":\"/fullstack/server-state-management\",\"tags\":[\"SWR\",\"TanStack Query\",\"前端工程\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"不止于 Fetch：React 服务端状态管理的范式转移与选型深度博弈\",\"date\":\"2025-11-15 09:20:23\",\"capture\":\"1. 引言\\n在现代前端工程中，状态可严格区分为 UI 状态（UI State） 与 服务端状态（Server State） 两类。对于 UI 状态的管理，开发者已较为熟悉，通常可借助 `useState`、`useEffect` 等 Hooks，或 `zustand`、`jotai` 等状态管理库来实现。然而，服务端状态的管理往往缺乏统一且高效的解决方案，开发者通常需要自行实现。\\n在传统的数据获取流程中，我们一般使用 `fetch` 或 `axios` 向后端或 REST API 发送 HTTP 请求，随后手动将数据获取逻辑与前端业务逻辑及 UI 状态管理进行整合，以完成数据处理并驱动界面更新\"}],\"jamstack\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"frontend-architecture\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"next.js\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"static-site-generator\":[{\"url\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"relativePath\":\"/01.全栈/40.前端工程/03.JAMStack 梳理与实践指南\",\"frontmatter\":{\"date\":\"2025-11-14 22:33:39\",\"title\":\"JAMStack 梳理与实践指南\",\"aliases\":[\"静态站点生成器\",\"SSG\"],\"tldr\":\"预渲染静态页面 + 动态 API，CDN 分发全球，替代传统动态网站的开发部署范式\",\"description\":\"从核心概念、工具链选型（Next.js/Vercel/Supabase/Contentful）到从 0 搭建博客的完整实践，覆盖 JAMStack 适用与不适用场景，帮助判断何时选用该架构。\",\"permalink\":\"/fullstack/jamstack\",\"tags\":[\"tutorial\",\"jamstack\",\"frontend-architecture\",\"next.js\",\"static-site-generator\"],\"categories\":[\"全栈\",\"前端工程\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JAMStack 梳理与实践指南\",\"date\":\"2025-11-14 22:33:39\",\"capture\":\"> \\n> 其核心机制是在构建时将页面预渲染为静态 HTML/CSS/JS，部署至 CDN 供用户就近加载，仅在需要动态数据时通过 JavaScript 调用 API 获取。相较于传统动态网站，JAMStack 在性能、可靠性、扩展性、安全性及运维成本上具有显著优势。\\n> \\n> 本文梳理了主流构建工具（Gatsby、Next.js、Nuxt.js、11ty）、静态托管平台（Vercel、Netlify、Cloudflare Pages）、API/BaaS 服务（Supabase、Firebase、Auth0）及无头 CMS（Contentful、Sanity、Strapi\"}],\"系统洞察力\":[{\"url\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"relativePath\":\"/10.产品 Sense/05.方法论/40.洞察力模型\",\"frontmatter\":{\"date\":\"2025-11-14 16:00:00\",\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"description\":\"摘要总结：无论是做产品、搞技术，还是应对日常工作中的各种挑战，你是否遇到过这样的困境：明明按经验行事，却屡屡踩坑；刚解决表面问题，隐患又卷土重来。问题未必出在努力程度，而在于我们只盯着表象，却忽略了背后真正起作用的系统，没有看懂藏在背后的系统。为什么同样是解决问题，有人只能“头痛医头”，有人却能直击本质？这篇文章将用通俗易懂的方式，带你拆解一套实用的洞察力模型，让我们学会透过现象抓住本质，从根源上解决问题。\",\"permalink\":\"/product-sense/insight-model\",\"categories\":[\"产品 Sense\"],\"tags\":[\"产品 Sense\",\"系统洞察力\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"洞察力模型：如何看透产品与技术背后的系统逻辑？\",\"date\":\"2025-11-14 16:00:00\",\"capture\":\"1. 表象背后藏着决定一切的“系统黑盒”\\n我们在日常开发或产品设计中，总是被各种“表象”包围：DAU 突然下降了、线上出现了一个偶现的 Bug、某个功能的转化率不及预期。我们习惯了盯着这些看得见的结果找原因，却忽略了一个核心真相：每一个表象背后，其实都隐藏着一个运转复杂的“黑盒子”，正是这个黑盒子决定了事物发展的客观规律。我们可以把这个黑盒子，叫做“系统”。\\n<img src=\\\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/product/system_tips.png\\\" style=\\\"width: 1\"}],\"信息筛选\":[{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"个人成长\":[{\"url\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"relativePath\":\"/30.悦读时光/21.如何甄别真正有用的信息\",\"frontmatter\":{\"date\":\"2025-11-10 12:52:28\",\"title\":\"如何甄别真正有用的信息\",\"description\":\"摘要总结：在信息高度透明的时代，浅层信息差已被彻底抹平，信息本身的价值不断稀释。人与人的核心差距不再是获取信息的渠道，而是高信噪比信息的甄别能力、深度思考能力与落地执行力，唯有以思考校验信息、以执行验证价值，形成“信息-判断-实践-反馈”的思考与执行闭环，才能突破信息壁垒、创造真正价值。\",\"permalink\":\"/growth/distinguish-useful-information\",\"categories\":[\"资源推荐\"],\"tags\":[\"信息筛选\",\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"如何甄别真正有用的信息\",\"date\":\"2025-11-10 12:52:28\",\"capture\":\"在互联网技术普及的当下，信息已从“稀缺资源”转变为“泛滥资源”。过去依赖地域差、稀缺性的浅表层信息差逐渐被抹平，开发者通过网络可轻松获取各类技术文档、行业动态、赚钱模式，但真正能将信息转化为价值的仍是少数人。核心矛盾已从“获取信息”转变为“驾驭信息”——信息本身的价值弱化，而信息解读能力、行动执行力、筛选甄别力成为拉开差距的关键。\\n 1. 打破“信息差”的系统性错觉\\n过去，由于地域限制和传播介质的稀缺，赚钱或成功的模式往往是粗放的，建立在浅表层的“信息不对称”上，但随着技术的演进，这种低维度的信息差正在被迅速抹平。人们经常陷入“赚不到钱/抓不住机会是因为缺少信息差”的认知偏差，但本质问题在于“\"}],\"typescript\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"},{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"}],\"generics\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"}],\"type-system\":[{\"url\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"relativePath\":\"/01.全栈/80.全栈基础素养/10.聊一聊 Typescript 泛型\",\"frontmatter\":{\"date\":\"2025-08-20 22:51:27\",\"title\":\"聊一聊 TypeScript 中的泛型\",\"tldr\":\"泛型将类型作为参数，使代码在多种类型上安全运行，是 TypeScript 类型抽象的核心特性。\",\"description\":\"本文系统解析 TypeScript 泛型的核心概念与工作机制，对比泛型与 any 类型的差异，涵盖泛型函数、接口、类、类型别名的实践用法，以及基本类型约束、接口约束、多重约束、keyof 约束等高阶技巧与最佳实践。\",\"permalink\":\"/fullstack/typescript-generic-types\",\"tags\":[\"tutorial\",\"typescript\",\"generics\",\"type-system\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"聊一聊 TypeScript 中的泛型\",\"date\":\"2025-08-20 22:51:27\",\"capture\":\"1. 泛型的基本概念和作用\\n 1.1 核心定义\\n泛型（Generics） 是 TypeScript 中一种强大的类型系统特性，允许定义类型参数化的组件，使代码能够在多种类型上安全运行，同时保持类型检查。泛型的核心思想是将类型作为参数传递给函数、接口或类，实现\\\"编写一次，复用多次\\\"的效果。\\n 1.2 泛型与 any 类型的对比\\n| 特性 | 泛型 | any 类型 |\\n|------|------|----------|\\n| 类型安全 | ✅ 编译时进行类型检查 | ❌ 完全失去类型检查 |\\n| 代码复用 | ✅ 支持多种类型复用 | ✅ 支持多种类型，但失去类型信息 |\\n| 类型推断 | ✅ \"}],\"compilation\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"tooling\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"eslint\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"jest\":[{\"url\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/01.编译与调试 TypeScript 项目指南\",\"frontmatter\":{\"date\":\"2025-08-12 22:47:47\",\"title\":\"TypeScript 编译与调试完全指南\",\"tldr\":\"TypeScript 完善的编译体系与调试工具链，是构建高质量应用的基石。\",\"description\":\"深入解析 TypeScript 编译工具链与调试体系，涵盖 tsconfig.json 核心配置、Monorepo 项目配置（extends/references）、source map 调试、ESLint 与 Jest 单元测试等完整实践。\",\"permalink\":\"/fullstack/typescript-compilation-debugging-guide\",\"tags\":[\"tutorial\",\"typescript\",\"compilation\",\"tooling\",\"eslint\",\"jest\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"TypeScript 编译与调试完全指南\",\"date\":\"2025-08-12 22:47:47\",\"capture\":\"编写代码只是开发工作的起点，真正决定项目质量的是后续的编译与调试环节。TypeScript 作为 JavaScript 的静态类型超集，不仅带来了类型安全，更提供了强大的编译工具和调试能力，让我们能够更高效地构建和维护可靠的应用程序。\\n本文将对 TypeScript 项目的编译与调试进行梳理，包括编译工具 TSC 的使用、编译选项的配置、调试工具的使用等。\\n 1. TypeScript 编译配置与 tsconfig.json\\nTSC（TypeScript Compiler）是 TypeScript 官方提供的编译工具，负责将 TypeScript 代码（`.ts` 或 `.tsx`）转换为 J\"}],\"成长\":[{\"url\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"relativePath\":\"/10.产品 Sense/02.新 T 型人/20.读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"frontmatter\":{\"date\":\"2024-06-15 22:23:00\",\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"description\":\"摘要总结：本文结合保罗・格雷厄姆《How to Do Great Work》核心观点，探讨 AI 原生时代复合型人才的核心特质。AI 让基础执行能力快速贬值，人才的核心壁垒不再是解决问题，而是提出优质问题、培养非共识品味。同时需坚守智力诚实，拥有打破常规的创新勇气，借助 AI 放大个人成长杠杆，以小切口实践实现指数级成长。人类独有的好奇心，是突破 AI 平庸、取得杰出成就的最终底气。\",\"coverImg\":\"/img/cover/product_sense_bg.png\",\"permalink\":\"/product-sense/ai-native-composite-talents\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI\",\"成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"读后感：AI 原生时代的复合型人才，究竟需要怎样的特质？\",\"date\":\"2024-06-15 22:23:00\",\"capture\":\"> \\n> 原文地址：https://paulgraham.com/greatwork.html\\n> \\n> 原文作者：Paul Graham（保罗·格雷厄姆），硅谷顶级孵化器 Y Combinator 创始人，被誉为“硅谷创业教父”，也是经典技术哲学著作《黑客与画家》的作者。\\n> \\n> 文章背景：原文是保罗·格雷厄姆之前准备了半年之久的重磅长文，他试图讲明白一个适用于每个人的主题——如何做成「大事」（great work）。通读全文，你会发现，这是一篇非常实用的工作指南，并且其中的许多内容，都与AI原生时代的复合型人才所需要具备的特质非常一致。\\n 1. 引言：\"}],\"ESM\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"DDD\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"}],\"微前端\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/0.overview\",\"frontmatter\":{\"date\":\"2024-05-18 22:49:57\",\"title\":\"模块化编程实践指南\",\"tldr\":\"从 ES Modules 到大型项目分层架构与工程化实践，构建全栈模块化知识体系。\",\"description\":\"系统梳理 JavaScript 模块化演进（IIFE→CJS→ESM）、TypeScript 类型增强、分层架构与 DDD 实践。\",\"permalink\":\"/fullstack/module-programming-practice-guide\",\"tags\":[\"tutorial\",\"ESM\",\"DDD\",\"微前端\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程实践指南\",\"date\":\"2024-05-18 22:49:57\",\"capture\":\"1. 引言\\n模块化编程是现代 JavaScript/TypeScript 开发的核心原则，它通过将复杂系统拆分为独立可复用的模块，降低系统复杂性并提高可维护性与可复用性。因此，我们通过系列文章详细介绍了模块化的基础概念、演进历程、不同规范的深度解析、TypeScript模块化增强、ES Modules 核心语法与实践、模块化编程原则与最佳实践、前端工程化中的模块化、Node.js中的模块化实践、大型项目中的模块化设计、模块化与代码维护以及未来发展趋势。\\n前面的系列文章主要有：\\n- 模块化编程编程初体验与基础介绍\\n- JavaScript 模块化规范全景图：从 CJS 到 ESM\\n- 回归标准，\"}],\"concept\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"},{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"node.js\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"commonjs\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"esm\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"},{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"monorepo\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"layered-architecture\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/6.解析 NodeJS 中的模块化\",\"frontmatter\":{\"date\":\"2024-05-17 23:33:09\",\"title\":\"Node.js 模块化编程梳理与总结\",\"tldr\":\"Node.js CJS 与 ESM 双模共存：模块加载机制与分层架构实践。\",\"description\":\"解析 Node.js 中 CommonJS 与 ES Modules 的双模共存策略，涵盖模块加载优先级、缓存机制、package.json exports 条件导出及 Monorepo 架构实践。\",\"permalink\":\"/fullstack/nodejs-module-programming-summary\",\"abstract\":\"Node.js 模块化经历了从 CommonJS 独霸天下到 ES Modules 全面接入的范式转移。共存策略通过 .mjs/.cjs 后缀和 package.json type 字段控制两种规范的边界；ESM 可直接 import CJS（自动包装为默认导出），但 CJS 无法 require ESM 必须使用动态 import。模块加载遵循核心模块优先、文件模块、目录模块（index.js/package.json）、node_modules 逐级查找的优先级；require.cache 实现模块缓存，清除缓存（delete require.cache[path]）是热更新工具的核心操作。package.json exports 字段支持条件导出（import/require 返回不同入口）。pnpm workspaces 凭借硬链接机制成为现代 Monorepo 首选。后端分层架构（API/Service/Repository）实现关注点分离，换数据库只需改 Repository 层。\",\"tags\":[\"concept\",\"node.js\",\"commonjs\",\"esm\",\"monorepo\",\"layered-architecture\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"Node.js 模块化编程梳理与总结\",\"date\":\"2024-05-17 23:33:09\",\"capture\":\"如果说浏览器端的模块化是为了\\\"按需加载\\\"，那么 Node.js 的模块化则是为了\\\"代码组织\\\"。作为将 JavaScript 带入服务器端的先驱，Node.js 经历了从 CommonJS (CJS) 独霸天下到 ES Modules (ESM) 全面接入的范式转移。\\n在服务器端，模块化不仅仅是为了拆分代码，更是为了构建清晰的项目结构、管理依赖关系，以及实现代码的复用与维护。\\n 1. CommonJS 与 ES Modules 双模共存\\n在现代 Node.js 开发中，我们经常面临两种规范交织的情况。这不仅是文件后缀的改变，更是同步与异步加载逻辑的博弈。\\n共存策略：\\n1. 后缀决定论：`.mjs\"}],\"solid-principles\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"code-organization\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"best-practices\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"naming-conventions\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/5.模块化编程原则与最佳实践\",\"frontmatter\":{\"date\":\"2024-05-17 22:30:50\",\"title\":\"模块化编程原则梳理与总结\",\"tldr\":\"掌握高内聚低耦合原则：模块化编程的设计准则与粒度控制。\",\"description\":\"系统梳理模块化编程的六大核心原则：单一职责、高内聚低耦合、粒度设计、命名规范及模块版本管理，附详细的工程实践建议与避坑指南。\",\"permalink\":\"/fullstack/module-programming-principles-best-practices\",\"abstract\":\"如果说掌握模块化语法是术，那么理解其背后的设计原则就是道。单一职责原则强调模块只应有一个被改变的原因，避免 God Object 反模式。高内聚低耦合是衡量模块质量的终极标准——模块内部元素联系紧密，模块之间依赖关系尽可能简单。粒度设计要求单个模块保持在 100-500 行之间，功能能用一句话清晰描述，出现多分支复杂逻辑时通常是拆分信号。命名规范统一团队沟通语境（kebab-case 文件名、camelCase 方法名、PascalCase 类名）。模块版本管理遵循 SemVer 语义化版本，为公共模块的维护者与使用者建立契约。强调清晰的模块边界是 AI 辅助编程时代 AI 准确理解代码的前提。\",\"tags\":[\"concept\",\"solid-principles\",\"code-organization\",\"best-practices\",\"naming-conventions\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程原则梳理与总结\",\"date\":\"2024-05-17 22:30:50\",\"capture\":\"1. 单一职责原则\\n核心思想：一个模块应当有且只有一个被改变的原因。\\n模块不应成为功能的“杂货铺”。当一个模块承担了太多不相关的业务逻辑时，它的复杂度会呈指数级上升，任何微小的改动都可能引发意想不到的连锁反应。\\n代码演示：\\n```javascript\\n// ✅ 推荐：职责拆分明确\\n// user-service.js - 仅处理用户数据的 CRUD\\nexport const getUser = async (id) => { /* ... */ };\\n// auth-provider.js - 仅处理鉴权状态与逻辑\\nexport const login = async (credenti\"}],\"tsconfig\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/4.Typescript 对模块化编程的增强\",\"frontmatter\":{\"date\":\"2024-05-16 21:27:36\",\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"tldr\":\"TypeScript 将模块依赖提升为编译时类型契约，从 import type 到声明文件。\",\"description\":\"系统讲解 TypeScript 对 ES Modules 的类型增强，涵盖 import type 运行时优化、接口契约、声明文件 .d.ts 及 tsconfig 模块化配置。\",\"permalink\":\"/fullstack/typescript-module-programming-enhancement\",\"tags\":[\"concept\",\"全栈\",\"typescript\",\"tsconfig\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"从逻辑隔离到类型契约：TypeScript 对模块化编程的增强\",\"date\":\"2024-05-16 21:27:36\",\"capture\":\"1. 引言\\n在原生 JavaScript 模块化解决了代码组织问题后，TypeScript（TS）进一步将其推向了工业级高度。TS 不仅仅是为模块添加了类型标注，它通过类型导出导入、编译时优化、以及声明文件系统，将模块间的依赖关系从简单的“代码引用”提升到了“契约交互”。\\n本文我们将聚焦于 TypeScript 如何通过类型系统增强模块化编程，并探讨在现代工程（尤其是 TS 5.0+ 时代）下的最佳配置实践。\\n 2. 类型导出与导入：极致的运行时优化\\nTypeScript 对 ES Modules 语法最显著的扩展是支持“仅类型”（Type-only）的导出与导入。这不仅是语义上的清晰，更是性\"}],\"static-analysis\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"}],\"Tree-Shaking\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"}],\"circular-dependency\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/3.ES Modules 核心规范与实践解析\",\"frontmatter\":{\"date\":\"2024-05-14 22:29:32\",\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"tldr\":\"ES Modules 核心语法与执行模型：静态分析如何重塑前端构建效率。\",\"description\":\"深度解析 ES Modules 命名导出/导入、默认导出、动态导入等语法，以及模块执行顺序、循环依赖处理与编译时优化机制。\",\"permalink\":\"/fullstack/decode-es-modules\",\"tags\":[\"concept\",\"ESM\",\"static-analysis\",\"Tree-Shaking\",\"circular-dependency\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"回归标准，拥抱原生：ES Modules 核心规范与实践解析\",\"date\":\"2024-05-14 22:29:32\",\"capture\":\"> \\n> 理解 ESM，不仅仅是学会 import 和 export，更重要的是理解它如何通过编译时优化彻底改变了前端构建的效率。\\n 1. 命名导出与导入：精准的代码引用\\n命名导出（Named Exports）是 ESM 最常用的形式，它允许一个模块暴露多个成员。其核心优势在于：导入方可以按需引入，且 IDE 能提供精准的补全。\\n语法实践：：\\n```javascript\\n// math.js - 命名导出\\n// 行内导出\\nexport const PI = 3.14159;\\nexport function circleArea(radius) {\\n return PI * rad\"}],\"CommonJS\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"AMD\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"UMD\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/2.不同模块化规范梳理\",\"frontmatter\":{\"date\":\"2024-05-14 22:26:06\",\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"tldr\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 等核心规范，附现代迁移策略。\",\"description\":\"全面梳理 CommonJS、AMD、UMD、ES Modules 四大模块化规范的核心语法与适用场景，解析各规范的关键差异，并提供从旧规范向 ESM 迁移的实操策略。\",\"permalink\":\"/fullstack/different-module-programming-specifications\",\"tags\":[\"tutorial\",\"CommonJS\",\"AMD\",\"UMD\",\"ESM\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"JavaScript 模块化规范全景图：从 CJS 到 ESM\",\"date\":\"2024-05-14 22:26:06\",\"capture\":\"在 JavaScript 进化史上，“模块化”始终是一个核心命题。从早期 script 标签满天飞的“混沌时代”，到各路规范群雄逐鹿的“战国时代”，再到如今 ES Modules 定于一尊，开发者们在解决依赖管理、作用域污染和异步加载等问题上付出了巨大的努力。\\n本文将带你梳理 JavaScript 历史上最重要的几种模块化规范，便于构建起全栈开发的底层知识图谱。\\n 1. CommonJS 规范：Node.js 生态的基石\\nCommonJS 是伴随 Node.js 诞生的规范,由 Kevin Dangoor 提出，初衷是让 JavaScript 脱离浏览器也能构建复杂的系统应用。它是 Node.\"}],\"javascript\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"modularization\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"design-patterns\":[{\"url\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"relativePath\":\"/01.全栈/80.全栈基础素养/20.模块化编程实践指南/1.前端模块化编程基础\",\"frontmatter\":{\"date\":\"2024-05-12 22:43:28\",\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"tldr\":\"从全局变量到 ES Modules：JavaScript 模块化演进与工厂、单例、观察者等设计模式实践。\",\"description\":\"系统讲解 JavaScript 模块化编程基础，涵盖 IIFE、CommonJS、ES Modules 规范演进，以及工厂、单例、观察者等设计模式与模块化的结合。\",\"permalink\":\"/fullstack/frontend-module-programming-basic\",\"tags\":[\"tutorial\",\"javascript\",\"modularization\",\"esm\",\"design-patterns\"],\"categories\":[\"全栈\",\"全栈基础素养\",\"模块化编程实践指南\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"模块化编程初体验：概念、演进与设计模式\",\"date\":\"2024-05-12 22:43:28\",\"capture\":\"1. 引言\\n随着项目规模日益膨胀，代码量从几千行迅速增长到数万甚至数十万行，将所有逻辑塞进少数几个文件的做法早已难以为继。在这样的背景下，模块化编程应运而生，成为现代前端开发的标配。\\n它的核心理念简洁而优雅：像搭积木一样，将庞大复杂的系统拆解为一个个独立、功能单一且可复用的模块，让每个模块各司其职，再通过标准接口灵活组合。\\n 2. 模块化编程初体验\\n在深入理论之前，让我们先通过一个简单的 JavaScript 示例，直观地感受一下什么是模块化。假设我们需要处理一些数学运算，我们可以将其封装成一个独立的工具模块：\\n```javascript\\n// math.js - 定义一个数学工具模块\\nexp\"}],\"知识发现\":[{\"url\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"relativePath\":\"/10.产品 Sense/01.产品观察与分析/11.AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"frontmatter\":{\"date\":\"2024-05-08 08:56:21\",\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"description\":\"摘要总结：在大模型重塑互联网交互的当下，Perplexity 并未选择成为“下一个 Google”，而是以“知识发现引擎”的全新定位，精准切入知识工作者的核心工作流。本文跳出单纯的模型能力对比，从产品 Sense 与工程逻辑的双重视角，深度拆解 Perplexity 的破局之道。我们将探讨它如何通过反直觉的 UI 创新重塑交互起点，如何在工程层面死磕尾部延迟与幻觉控制，以及它如何利用巨头的利润率护城河实现错位竞争。最终，我们将视线投向未来，一窥 AI 从被动响应走向主动探索的演进蓝图。\",\"permalink\":\"/product-sense/perplexity-knowledge-worker\",\"categories\":[\"产品 Sense\"],\"tags\":[\"AI 搜索\",\"知识发现\",\"产品 Sense\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"AI-powered 搜索引擎观察分析：Perplexity 与知识工作者\",\"date\":\"2024-05-08 08:56:21\",\"capture\":\"1. 引言\\n在 AI 浪潮下，搜索引擎的范式正在发生转移。作为当前备受瞩目的 AI 搜索产品，Perplexity 并没有试图成为“下一个 Google”，而是将自己定义为知识发现引擎。\\n对于每天需要处理海量信息、进行复杂决策的知识工作者而言，如何高效地“去噪”并获取高信度知识是核心诉求。笔者将从产品交互、技术工程、商业逻辑与未来演进四个维度，分析 Perplexity 是如何重塑信息获取工作流的。\\n本文旨在通过对 Perplexity 的深度产品观察与分析，帮助读者理解 AI 搜索产品的设计逻辑与用户体验优化路径，同时为知识工作者提供可落地的效率提升方法，并在过程中培养结构化产品分析思维。\\n\"}],\"engineering-fundamentals\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"code-design\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"software-engineering\":[{\"url\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"relativePath\":\"/01.全栈/80.全栈基础素养/00.奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"frontmatter\":{\"date\":\"2024-03-20 22:41:41\",\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"tldr\":\"在需求边界内追求最小复杂度——不是拒绝复杂，而是不主动制造复杂。\",\"description\":\"深入解析奥卡姆剃刀原则在编程与设计中的六大场景：拒绝过度预判、移除冗余逻辑、匹配架构规模、克制依赖引入、封装最小接口、先排查简单原因，并给出三个关键边界。\",\"permalink\":\"/fullstack/occams-razor-software-design\",\"tags\":[\"concept\",\"engineering-fundamentals\",\"code-design\",\"software-engineering\"],\"categories\":[\"全栈\",\"全栈基础素养\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"奥卡姆剃刀原则：从理论到编程设计的实践指南\",\"date\":\"2024-03-20 22:41:41\",\"capture\":\"<script setup\\nimport HighLightText from '@fragment/components/HighLightText.vue'\\n</script>\\n> 摘要总结：奥卡姆剃刀原则由 14 世纪逻辑学家威廉·奥卡姆提出，其核心为\\\"如无必要，勿增实体\\\"——在多个同等有效的方案中，选择假设最少、最简洁的那个。该原则并非否定复杂性，而是避免无意义的过度设计。文章从编程与设计实践出发，依次探讨了需求实现、代码实现、架构设计、依赖管理、接口设计、调试优化六大场景的反例与正例，并明确指出三个关键边界：不可牺牲可维护性、可扩展性、安全性换取简洁。\\n 1.\"}],\"运动\":[{\"url\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"relativePath\":\"/40.关于/30.成长随笔/20.减肥这件小事阶段随笔汇总\",\"frontmatter\":{\"date\":\"2022-09-12 08:16:00\",\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"description\":\"摘要总结：从“书生意气”到初入社会的“中年油腻”危机，一次健康警报让笔者开启了这场深刻的自我对话与行动。本文详细复盘了笔者从健康危机出发，通过四个阶段的循序渐进，成功实现体重管理的过程。区别于盲目跟风，笔者在实践中引入了目标拆解、数据监控（体脂秤指标）、跨领域经验迁移（如项目管理、时间管理）以及对不同策略（如控制饮食、加大无氧运动、尝试不吃主食）的辩证采纳。这不仅是一份减肥记录，更是一次用科学与迭代思维重构生活秩序、实现身心升级的实操指南。\",\"permalink\":\"/growth/weight-loss\",\"coverImg\":\"https://insight-stack-1252300811.cos.ap-shanghai.myqcloud.com/img/cover/health_bg.png\",\"top\":true,\"tags\":[\"健康\",\"运动\"],\"categories\":[\"个人成长\"]},\"author\":{\"name\":\"sqliang\",\"link\":\"https://github.com/sqliang\"},\"title\":\"用科学与迭代改善的方式推动减肥这件小事\",\"date\":\"2022-09-12 08:16:00\",\"capture\":\"写在前面\\n在经济快速发展的大背景下，一批又一批的大学生陆续走出校门进入社会大舞台。随着年龄与工作年限的增长，不知置身于其中的你是否感慨过自己在阅历上从“书生意气”渐渐演变为“四平八稳，游刃有余”；在身体养护方面从“身材无敌，年龄成迷，实打实一个传奇”演变为“中年油腻”。每个人多少都有自己的答案，笔者的答案是：走出校门进入社会后，当初对身边人有点苛刻，遇事火急火燎的自己逐渐得到了改善。身体却因原本在大学时没有怎么在意，经过长年累月地洗礼亮了一次小红灯。在康复期间，不止一次反思过之前的生活方式和入世模式，想一想 + 四处看一看后，慢慢也就开悟了，自然要启动一些改变尝试。\\n因此，也就有了这篇减肥这件\"}]}},\"groupCards\":{\"categories\":[{\"name\":\"AI 学习与实践\",\"length\":5},{\"name\":\"Agent 系列\",\"length\":1},{\"name\":\"全栈\",\"length\":21},{\"name\":\"产品 Sense\",\"length\":7},{\"name\":\"AI\",\"length\":2},{\"name\":\"悦读时光\",\"length\":1},{\"name\":\"个人成长\",\"length\":3},{\"name\":\"ai-practice\",\"length\":4},{\"name\":\"网络与通信\",\"length\":3},{\"name\":\"前端工程\",\"length\":3},{\"name\":\"资源推荐\",\"length\":5},{\"name\":\"关于\",\"length\":1},{\"name\":\"全栈基础素养\",\"length\":10},{\"name\":\"模块化编程实践指南\",\"length\":7},{\"name\":\"growth\",\"length\":1}],\"tags\":[{\"name\":\"Agent SDK\",\"length\":2},{\"name\":\"Multi-Agent\",\"length\":1},{\"name\":\"Agent Skills\",\"length\":1},{\"name\":\"Agent\",\"length\":6},{\"name\":\"AI\",\"length\":12},{\"name\":\"全栈\",\"length\":7},{\"name\":\"产品\",\"length\":1},{\"name\":\"悦读时光\",\"length\":3},{\"name\":\"系统思维\",\"length\":1},{\"name\":\"数学思维\",\"length\":1},{\"name\":\"模型思维\",\"length\":1},{\"name\":\"疫情\",\"length\":2},{\"name\":\"健康\",\"length\":2},{\"name\":\"时间\",\"length\":1},{\"name\":\"远程协作\",\"length\":1},{\"name\":\"LLM\",\"length\":1},{\"name\":\"CSS\",\"length\":1},{\"name\":\"工程化\",\"length\":1},{\"name\":\"tailwindcss\",\"length\":1},{\"name\":\"tutorial\",\"length\":8},{\"name\":\"SSE\",\"length\":2},{\"name\":\"HTTP Streaming\",\"length\":1},{\"name\":\"HTTP 轮询\",\"length\":2},{\"name\":\"退避轮询\",\"length\":1},{\"name\":\"长轮询\",\"length\":1},{\"name\":\"HTTP\",\"length\":1},{\"name\":\"WebSocket\",\"length\":1},{\"name\":\"Webhooks\",\"length\":1},{\"name\":\"AI Agent\",\"length\":1},{\"name\":\"react\",\"length\":1},{\"name\":\"component-design\",\"length\":1},{\"name\":\"state-management\",\"length\":1},{\"name\":\"ai-augmented\",\"length\":1},{\"name\":\"specification-driven\",\"length\":1},{\"name\":\"资源推荐\",\"length\":5},{\"name\":\"LLM API\",\"length\":1},{\"name\":\"AI Coding\",\"length\":1},{\"name\":\"Vibe Coding\",\"length\":1},{\"name\":\"Agentic Engineering\",\"length\":1},{\"name\":\"AI 助手\",\"length\":1},{\"name\":\"AI 搜索\",\"length\":2},{\"name\":\"产品 Sense\",\"length\":4},{\"name\":\"商业化\",\"length\":1},{\"name\":\"SWR\",\"length\":1},{\"name\":\"TanStack Query\",\"length\":1},{\"name\":\"前端工程\",\"length\":1},{\"name\":\"jamstack\",\"length\":1},{\"name\":\"frontend-architecture\",\"length\":1},{\"name\":\"next.js\",\"length\":1},{\"name\":\"static-site-generator\",\"length\":1},{\"name\":\"系统洞察力\",\"length\":1},{\"name\":\"信息筛选\",\"length\":1},{\"name\":\"个人成长\",\"length\":1},{\"name\":\"typescript\",\"length\":3},{\"name\":\"generics\",\"length\":1},{\"name\":\"type-system\",\"length\":1},{\"name\":\"compilation\",\"length\":1},{\"name\":\"tooling\",\"length\":1},{\"name\":\"eslint\",\"length\":1},{\"name\":\"jest\",\"length\":1},{\"name\":\"成长\",\"length\":1},{\"name\":\"ESM\",\"length\":3},{\"name\":\"DDD\",\"length\":1},{\"name\":\"微前端\",\"length\":1},{\"name\":\"concept\",\"length\":5},{\"name\":\"node.js\",\"length\":1},{\"name\":\"commonjs\",\"length\":1},{\"name\":\"esm\",\"length\":2},{\"name\":\"monorepo\",\"length\":1},{\"name\":\"layered-architecture\",\"length\":1},{\"name\":\"solid-principles\",\"length\":1},{\"name\":\"code-organization\",\"length\":1},{\"name\":\"best-practices\",\"length\":1},{\"name\":\"naming-conventions\",\"length\":1},{\"name\":\"tsconfig\",\"length\":1},{\"name\":\"static-analysis\",\"length\":1},{\"name\":\"Tree-Shaking\",\"length\":1},{\"name\":\"circular-dependency\",\"length\":1},{\"name\":\"CommonJS\",\"length\":1},{\"name\":\"AMD\",\"length\":1},{\"name\":\"UMD\",\"length\":1},{\"name\":\"javascript\",\"length\":1},{\"name\":\"modularization\",\"length\":1},{\"name\":\"design-patterns\",\"length\":1},{\"name\":\"知识发现\",\"length\":1},{\"name\":\"engineering-fundamentals\",\"length\":1},{\"name\":\"code-design\",\"length\":1},{\"name\":\"software-engineering\",\"length\":1},{\"name\":\"运动\",\"length\":1}]}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":true,\"additionalConfig\":{}}"));
\ No newline at end of file
diff --git a/assets/chunks/vitepress-theme-teek.CJu9alwu.js b/assets/chunks/vitepress-theme-teek.CqY1sKvl.js
similarity index 99%
rename from assets/chunks/vitepress-theme-teek.CJu9alwu.js
rename to assets/chunks/vitepress-theme-teek.CqY1sKvl.js
index 2b36aa46..307614b6 100644
--- a/assets/chunks/vitepress-theme-teek.CJu9alwu.js
+++ b/assets/chunks/vitepress-theme-teek.CqY1sKvl.js
@@ -1,6 +1,6 @@
function ln(e){const t=Object.create(null);for(const n of e.split(","))t[n]=1;return n=>n in t}const Le={},fo=[],Ht=()=>{},ao=()=>!1,Ys=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),ic=e=>e.startsWith("onUpdate:"),Ie=Object.assign,rc=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},A2=Object.prototype.hasOwnProperty,De=(e,t)=>A2.call(e,t),ce=Array.isArray,ho=e=>Io(e)==="[object Map]",Gs=e=>Io(e)==="[object Set]",Hu=e=>Io(e)==="[object Date]",$2=e=>Io(e)==="[object RegExp]",ye=e=>typeof e=="function",_e=e=>typeof e=="string",Gt=e=>typeof e=="symbol",Ue=e=>e!==null&&typeof e=="object",ac=e=>(Ue(e)||ye(e))&&ye(e.then)&&ye(e.catch),n1=Object.prototype.toString,Io=e=>n1.call(e),L2=e=>Io(e).slice(8,-1),Qr=e=>Io(e)==="[object Object]",lc=e=>_e(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Cs=ln(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),I2=ln("bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo"),Zr=e=>{const t=Object.create(null);return(n=>t[n]||(t[n]=e(n)))},P2=/-\w/g,tt=Zr(e=>e.replace(P2,t=>t.slice(1).toUpperCase())),M2=/\B([A-Z])/g,Kt=Zr(e=>e.replace(M2,"-$1").toLowerCase()),Js=Zr(e=>e.charAt(0).toUpperCase()+e.slice(1)),po=Zr(e=>e?`on${Js(e)}`:""),Ot=(e,t)=>!Object.is(e,t),mo=(e,...t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:s,value:n})},ea=e=>{const t=parseFloat(e);return isNaN(t)?e:t},kr=e=>{const t=_e(e)?Number(e):NaN;return isNaN(t)?e:t};let zu;const ta=()=>zu||(zu=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{}),F2="Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt,console,Error,Symbol",B2=ln(F2);function Fe(e){if(ce(e)){const t={};for(let n=0;n{if(n){const s=n.split(V2);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function T(e){let t="";if(_e(e))t=e;else if(ce(e))for(let n=0;nxs(n,t))}const r1=e=>!!(e&&e.__v_isRef===!0),W=e=>_e(e)?e:e==null?"":ce(e)||Ue(e)&&(e.toString===n1||!ye(e.toString))?r1(e)?W(e.value):JSON.stringify(e,a1,2):String(e),a1=(e,t)=>r1(t)?a1(e,t.value):ho(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,o],i)=>(n[Pa(s,i)+" =>"]=o,n),{})}:Gs(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>Pa(n))}:Gt(t)?Pa(t):Ue(t)&&!ce(t)&&!Qr(t)?String(t):t,Pa=(e,t="")=>{var n;return Gt(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};function J2(e){return e==null?"initial":typeof e=="string"?e===""?" ":e:String(e)}let $t;class cc{constructor(t=!1){this.detached=t,this._active=!0,this._on=0,this.effects=[],this.cleanups=[],this._isPaused=!1,this.parent=$t,!t&&$t&&(this.index=($t.scopes||($t.scopes=[])).push(this)-1)}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t0&&--this._on===0&&($t=this.prevScope,this.prevScope=void 0)}stop(t){if(this._active){this._active=!1;let n,s;for(n=0,s=this.effects.length;n0)return;if(Go){let t=Go;for(Go=void 0;t;){const n=t.next;t.next=void 0,t.flags&=-9,t=n}}let e;for(;Yo;){let t=Yo;for(Yo=void 0;t;){const n=t.next;if(t.next=void 0,t.flags&=-9,t.flags&1)try{t.trigger()}catch(s){e||(e=s)}t=n}}if(e)throw e}function f1(e){for(let t=e.deps;t;t=t.nextDep)t.version=-1,t.prevActiveLink=t.dep.activeLink,t.dep.activeLink=t}function d1(e){let t,n=e.depsTail,s=n;for(;s;){const o=s.prevDep;s.version===-1?(s===n&&(n=o),hc(s),X2(s)):t=s,s.dep.activeLink=s.prevActiveLink,s.prevActiveLink=void 0,s=o}e.deps=t,e.depsTail=n}function ol(e){for(let t=e.deps;t;t=t.nextDep)if(t.dep.version!==t.version||t.dep.computed&&(h1(t.dep.computed)||t.dep.version!==t.version))return!0;return!!e._dirty}function h1(e){if(e.flags&4&&!(e.flags&16)||(e.flags&=-17,e.globalVersion===ii)||(e.globalVersion=ii,!e.isSSR&&e.flags&128&&(!e.deps&&!e._dirty||!ol(e))))return;e.flags|=2;const t=e.dep,n=Qe,s=xn;Qe=e,xn=!0;try{f1(e);const o=e.fn(e._value);(t.version===0||Ot(o,e._value))&&(e.flags|=128,e._value=o,t.version++)}catch(o){throw t.version++,o}finally{Qe=n,xn=s,d1(e),e.flags&=-3}}function hc(e,t=!1){const{dep:n,prevSub:s,nextSub:o}=e;if(s&&(s.nextSub=o,e.prevSub=void 0),o&&(o.prevSub=s,e.nextSub=void 0),n.subs===e&&(n.subs=s,!s&&n.computed)){n.computed.flags&=-5;for(let i=n.computed.deps;i;i=i.nextDep)hc(i,!0)}!t&&!--n.sc&&n.map&&n.map.delete(n.key)}function X2(e){const{prevDep:t,nextDep:n}=e;t&&(t.nextDep=n,e.prevDep=void 0),n&&(n.prevDep=t,e.nextDep=void 0)}function Q2(e,t){e.effect instanceof oi&&(e=e.effect.fn);const n=new oi(e);t&&Ie(n,t);try{n.run()}catch(o){throw n.stop(),o}const s=n.run.bind(n);return s.effect=n,s}function Z2(e){e.effect.stop()}let xn=!0;const p1=[];function ss(){p1.push(xn),xn=!1}function os(){const e=p1.pop();xn=e===void 0?!0:e}function ju(e){const{cleanup:t}=e;if(e.cleanup=void 0,t){const n=Qe;Qe=void 0;try{t()}finally{Qe=n}}}let ii=0;class em{constructor(t,n){this.sub=t,this.dep=n,this.version=n.version,this.nextDep=this.prevDep=this.nextSub=this.prevSub=this.prevActiveLink=void 0}}class sa{constructor(t){this.computed=t,this.version=0,this.activeLink=void 0,this.subs=void 0,this.map=void 0,this.key=void 0,this.sc=0,this.__v_skip=!0}track(t){if(!Qe||!xn||Qe===this.computed)return;let n=this.activeLink;if(n===void 0||n.sub!==Qe)n=this.activeLink=new em(Qe,this),Qe.deps?(n.prevDep=Qe.depsTail,Qe.depsTail.nextDep=n,Qe.depsTail=n):Qe.deps=Qe.depsTail=n,m1(n);else if(n.version===-1&&(n.version=this.version,n.nextDep)){const s=n.nextDep;s.prevDep=n.prevDep,n.prevDep&&(n.prevDep.nextDep=s),n.prevDep=Qe.depsTail,n.nextDep=void 0,Qe.depsTail.nextDep=n,Qe.depsTail=n,Qe.deps===n&&(Qe.deps=s)}return n}trigger(t){this.version++,ii++,this.notify(t)}notify(t){fc();try{for(let n=this.subs;n;n=n.prevSub)n.sub.notify()&&n.sub.dep.notify()}finally{dc()}}}function m1(e){if(e.dep.sc++,e.sub.flags&4){const t=e.dep.computed;if(t&&!e.dep.subs){t.flags|=20;for(let s=t.deps;s;s=s.nextDep)m1(s)}const n=e.dep.subs;n!==e&&(e.prevSub=n,n&&(n.nextSub=e)),e.dep.subs=e}}const wr=new WeakMap,Os=Symbol(""),il=Symbol(""),ri=Symbol("");function Pt(e,t,n){if(xn&&Qe){let s=wr.get(e);s||wr.set(e,s=new Map);let o=s.get(n);o||(s.set(n,o=new sa),o.map=s,o.key=n),o.track()}}function Xn(e,t,n,s,o,i){const r=wr.get(e);if(!r){ii++;return}const a=c=>{c&&c.trigger()};if(fc(),t==="clear")r.forEach(a);else{const c=ce(e),u=c&&lc(n);if(c&&n==="length"){const f=Number(s);r.forEach((d,h)=>{(h==="length"||h===ri||!Gt(h)&&h>=f)&&a(d)})}else switch((n!==void 0||r.has(void 0))&&a(r.get(n)),u&&a(r.get(ri)),t){case"add":c?u&&a(r.get("length")):(a(r.get(Os)),ho(e)&&a(r.get(il)));break;case"delete":c||(a(r.get(Os)),ho(e)&&a(r.get(il)));break;case"set":ho(e)&&a(r.get(Os));break}}dc()}function tm(e,t){const n=wr.get(e);return n&&n.get(t)}function eo(e){const t=Pe(e);return t===e?t:(Pt(t,"iterate",ri),an(e)?t:t.map(_t))}function oa(e){return Pt(e=Pe(e),"iterate",ri),e}const nm={__proto__:null,[Symbol.iterator](){return Fa(this,Symbol.iterator,_t)},concat(...e){return eo(this).concat(...e.map(t=>ce(t)?eo(t):t))},entries(){return Fa(this,"entries",e=>(e[1]=_t(e[1]),e))},every(e,t){return qn(this,"every",e,t,void 0,arguments)},filter(e,t){return qn(this,"filter",e,t,n=>n.map(_t),arguments)},find(e,t){return qn(this,"find",e,t,_t,arguments)},findIndex(e,t){return qn(this,"findIndex",e,t,void 0,arguments)},findLast(e,t){return qn(this,"findLast",e,t,_t,arguments)},findLastIndex(e,t){return qn(this,"findLastIndex",e,t,void 0,arguments)},forEach(e,t){return qn(this,"forEach",e,t,void 0,arguments)},includes(...e){return Ba(this,"includes",e)},indexOf(...e){return Ba(this,"indexOf",e)},join(e){return eo(this).join(e)},lastIndexOf(...e){return Ba(this,"lastIndexOf",e)},map(e,t){return qn(this,"map",e,t,void 0,arguments)},pop(){return Ho(this,"pop")},push(...e){return Ho(this,"push",e)},reduce(e,...t){return Uu(this,"reduce",e,t)},reduceRight(e,...t){return Uu(this,"reduceRight",e,t)},shift(){return Ho(this,"shift")},some(e,t){return qn(this,"some",e,t,void 0,arguments)},splice(...e){return Ho(this,"splice",e)},toReversed(){return eo(this).toReversed()},toSorted(e){return eo(this).toSorted(e)},toSpliced(...e){return eo(this).toSpliced(...e)},unshift(...e){return Ho(this,"unshift",e)},values(){return Fa(this,"values",_t)}};function Fa(e,t,n){const s=oa(e),o=s[t]();return s!==e&&!an(e)&&(o._next=o.next,o.next=()=>{const i=o._next();return i.done||(i.value=n(i.value)),i}),o}const sm=Array.prototype;function qn(e,t,n,s,o,i){const r=oa(e),a=r!==e&&!an(e),c=r[t];if(c!==sm[t]){const d=c.apply(e,i);return a?_t(d):d}let u=n;r!==e&&(a?u=function(d,h){return n.call(this,_t(d),h,e)}:n.length>2&&(u=function(d,h){return n.call(this,d,h,e)}));const f=c.call(r,u,s);return a&&o?o(f):f}function Uu(e,t,n,s){const o=oa(e);let i=n;return o!==e&&(an(e)?n.length>3&&(i=function(r,a,c){return n.call(this,r,a,c,e)}):i=function(r,a,c){return n.call(this,r,_t(a),c,e)}),o[t](i,...s)}function Ba(e,t,n){const s=Pe(e);Pt(s,"iterate",ri);const o=s[t](...n);return(o===-1||o===!1)&&aa(n[0])?(n[0]=Pe(n[0]),s[t](...n)):o}function Ho(e,t,n=[]){ss(),fc();const s=Pe(e)[t].apply(e,n);return dc(),os(),s}const om=ln("__proto__,__v_isRef,__isVue"),g1=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Gt));function im(e){Gt(e)||(e=String(e));const t=Pe(this);return Pt(t,"has",e),t.hasOwnProperty(e)}class v1{constructor(t=!1,n=!1){this._isReadonly=t,this._isShallow=n}get(t,n,s){if(n==="__v_skip")return t.__v_skip;const o=this._isReadonly,i=this._isShallow;if(n==="__v_isReactive")return!o;if(n==="__v_isReadonly")return o;if(n==="__v_isShallow")return i;if(n==="__v_raw")return s===(o?i?_1:C1:i?w1:k1).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(s)?t:void 0;const r=ce(t);if(!o){let c;if(r&&(c=nm[n]))return c;if(n==="hasOwnProperty")return im}const a=Reflect.get(t,n,Ye(t)?t:s);if((Gt(n)?g1.has(n):om(n))||(o||Pt(t,"get",n),i))return a;if(Ye(a)){const c=r&&lc(n)?a:a.value;return o&&Ue(c)?It(c):c}return Ue(a)?o?It(a):Dn(a):a}}class y1 extends v1{constructor(t=!1){super(!1,t)}set(t,n,s,o){let i=t[n];if(!this._isShallow){const c=is(i);if(!an(s)&&!is(s)&&(i=Pe(i),s=Pe(s)),!ce(t)&&Ye(i)&&!Ye(s))return c||(i.value=s),!0}const r=ce(t)&&lc(n)?Number(n)e,Bi=e=>Reflect.getPrototypeOf(e);function um(e,t,n){return function(...s){const o=this.__v_raw,i=Pe(o),r=ho(i),a=e==="entries"||e===Symbol.iterator&&r,c=e==="keys"&&r,u=o[e](...s),f=n?rl:t?Cr:_t;return!t&&Pt(i,"iterate",c?il:Os),{next(){const{value:d,done:h}=u.next();return h?{value:d,done:h}:{value:a?[f(d[0]),f(d[1])]:f(d),done:h}},[Symbol.iterator](){return this}}}}function Ni(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function fm(e,t){const n={get(o){const i=this.__v_raw,r=Pe(i),a=Pe(o);e||(Ot(o,a)&&Pt(r,"get",o),Pt(r,"get",a));const{has:c}=Bi(r),u=t?rl:e?Cr:_t;if(c.call(r,o))return u(i.get(o));if(c.call(r,a))return u(i.get(a));i!==r&&i.get(o)},get size(){const o=this.__v_raw;return!e&&Pt(Pe(o),"iterate",Os),o.size},has(o){const i=this.__v_raw,r=Pe(i),a=Pe(o);return e||(Ot(o,a)&&Pt(r,"has",o),Pt(r,"has",a)),o===a?i.has(o):i.has(o)||i.has(a)},forEach(o,i){const r=this,a=r.__v_raw,c=Pe(a),u=t?rl:e?Cr:_t;return!e&&Pt(c,"iterate",Os),a.forEach((f,d)=>o.call(i,u(f),u(d),r))}};return Ie(n,e?{add:Ni("add"),set:Ni("set"),delete:Ni("delete"),clear:Ni("clear")}:{add(o){!t&&!an(o)&&!is(o)&&(o=Pe(o));const i=Pe(this);return Bi(i).has.call(i,o)||(i.add(o),Xn(i,"add",o,o)),this},set(o,i){!t&&!an(i)&&!is(i)&&(i=Pe(i));const r=Pe(this),{has:a,get:c}=Bi(r);let u=a.call(r,o);u||(o=Pe(o),u=a.call(r,o));const f=c.call(r,o);return r.set(o,i),u?Ot(i,f)&&Xn(r,"set",o,i):Xn(r,"add",o,i),this},delete(o){const i=Pe(this),{has:r,get:a}=Bi(i);let c=r.call(i,o);c||(o=Pe(o),c=r.call(i,o)),a&&a.call(i,o);const u=i.delete(o);return c&&Xn(i,"delete",o,void 0),u},clear(){const o=Pe(this),i=o.size!==0,r=o.clear();return i&&Xn(o,"clear",void 0,void 0),r}}),["keys","values","entries",Symbol.iterator].forEach(o=>{n[o]=um(o,e,t)}),n}function ia(e,t){const n=fm(e,t);return(s,o,i)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?s:Reflect.get(De(n,o)&&o in s?n:s,o,i)}const dm={get:ia(!1,!1)},hm={get:ia(!1,!0)},pm={get:ia(!0,!1)},mm={get:ia(!0,!0)},k1=new WeakMap,w1=new WeakMap,C1=new WeakMap,_1=new WeakMap;function gm(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function vm(e){return e.__v_skip||!Object.isExtensible(e)?0:gm(L2(e))}function Dn(e){return is(e)?e:ra(e,!1,rm,dm,k1)}function pc(e){return ra(e,!1,lm,hm,w1)}function It(e){return ra(e,!0,am,pm,C1)}function al(e){return ra(e,!0,cm,mm,_1)}function ra(e,t,n,s,o){if(!Ue(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=vm(e);if(i===0)return e;const r=o.get(e);if(r)return r;const a=new Proxy(e,i===2?s:n);return o.set(e,a),a}function _s(e){return is(e)?_s(e.__v_raw):!!(e&&e.__v_isReactive)}function is(e){return!!(e&&e.__v_isReadonly)}function an(e){return!!(e&&e.__v_isShallow)}function aa(e){return e?!!e.__v_raw:!1}function Pe(e){const t=e&&e.__v_raw;return t?Pe(t):e}function go(e){return!De(e,"__v_skip")&&Object.isExtensible(e)&&s1(e,"__v_skip",!0),e}const _t=e=>Ue(e)?Dn(e):e,Cr=e=>Ue(e)?It(e):e;function Ye(e){return e?e.__v_isRef===!0:!1}function j(e){return S1(e,!1)}function ze(e){return S1(e,!0)}function S1(e,t){return Ye(e)?e:new ym(e,t)}class ym{constructor(t,n){this.dep=new sa,this.__v_isRef=!0,this.__v_isShallow=!1,this._rawValue=n?t:Pe(t),this._value=n?t:_t(t),this.__v_isShallow=n}get value(){return this.dep.track(),this._value}set value(t){const n=this._rawValue,s=this.__v_isShallow||an(t)||is(t);t=s?t:Pe(t),Ot(t,n)&&(this._rawValue=t,this._value=s?t:_t(t),this.dep.trigger())}}function bm(e){e.dep&&e.dep.trigger()}function l(e){return Ye(e)?e.value:e}function Se(e){return ye(e)?e():l(e)}const km={get:(e,t,n)=>t==="__v_raw"?e:l(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const o=e[t];return Ye(o)&&!Ye(n)?(o.value=n,!0):Reflect.set(e,t,n,s)}};function mc(e){return _s(e)?e:new Proxy(e,km)}class wm{constructor(t){this.__v_isRef=!0,this._value=void 0;const n=this.dep=new sa,{get:s,set:o}=t(n.track.bind(n),n.trigger.bind(n));this._get=s,this._set=o}get value(){return this._value=this._get()}set value(t){this._set(t)}}function gc(e){return new wm(e)}function Cm(e){const t=ce(e)?new Array(e.length):{};for(const n in e)t[n]=E1(e,n);return t}class _m{constructor(t,n,s){this._object=t,this._key=n,this._defaultValue=s,this.__v_isRef=!0,this._value=void 0}get value(){const t=this._object[this._key];return this._value=t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return tm(Pe(this._object),this._key)}}class Sm{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0,this._value=void 0}get value(){return this._value=this._getter()}}function T1(e,t,n){return Ye(e)?e:ye(e)?new Sm(e):Ue(e)&&arguments.length>1?E1(e,t,n):j(e)}function E1(e,t,n){const s=e[t];return Ye(s)?s:new _m(e,t,n)}class Tm{constructor(t,n,s){this.fn=t,this.setter=n,this._value=void 0,this.dep=new sa(this),this.__v_isRef=!0,this.deps=void 0,this.depsTail=void 0,this.flags=16,this.globalVersion=ii-1,this.next=void 0,this.effect=this,this.__v_isReadonly=!n,this.isSSR=s}notify(){if(this.flags|=16,!(this.flags&8)&&Qe!==this)return u1(this,!0),!0}get value(){const t=this.dep.track();return h1(this),t&&(t.version=this.dep.version),this._value}set value(t){this.setter&&this.setter(t)}}function Em(e,t,n=!1){let s,o;return ye(e)?s=e:(s=e.get,o=e.set),new Tm(s,o,n)}const xm={GET:"get",HAS:"has",ITERATE:"iterate"},Am={SET:"set",ADD:"add",DELETE:"delete",CLEAR:"clear"},Vi={},_r=new WeakMap;let gs;function $m(){return gs}function x1(e,t=!1,n=gs){if(n){let s=_r.get(n);s||_r.set(n,s=[]),s.push(e)}}function Lm(e,t,n=Le){const{immediate:s,deep:o,once:i,scheduler:r,augmentJob:a,call:c}=n,u=_=>o?_:an(_)||o===!1||o===0?Qn(_,1):Qn(_);let f,d,h,p,g=!1,v=!1;if(Ye(e)?(d=()=>e.value,g=an(e)):_s(e)?(d=()=>u(e),g=!0):ce(e)?(v=!0,g=e.some(_=>_s(_)||an(_)),d=()=>e.map(_=>{if(Ye(_))return _.value;if(_s(_))return u(_);if(ye(_))return c?c(_,2):_()})):ye(e)?t?d=c?()=>c(e,2):e:d=()=>{if(h){ss();try{h()}finally{os()}}const _=gs;gs=f;try{return c?c(e,3,[p]):e(p)}finally{gs=_}}:d=Ht,t&&o){const _=d,x=o===!0?1/0:o;d=()=>Qn(_(),x)}const k=_i(),b=()=>{f.stop(),k&&k.active&&rc(k.effects,f)};if(i&&t){const _=t;t=(...x)=>{_(...x),b()}}let w=v?new Array(e.length).fill(Vi):Vi;const y=_=>{if(!(!(f.flags&1)||!f.dirty&&!_))if(t){const x=f.run();if(o||g||(v?x.some((L,V)=>Ot(L,w[V])):Ot(x,w))){h&&h();const L=gs;gs=f;try{const V=[x,w===Vi?void 0:v&&w[0]===Vi?[]:w,p];w=x,c?c(t,3,V):t(...V)}finally{gs=L}}}else f.run()};return a&&a(y),f=new oi(d),f.scheduler=r?()=>r(y,!1):y,p=_=>x1(_,!1,f),h=f.onStop=()=>{const _=_r.get(f);if(_){if(c)c(_,4);else for(const x of _)x();_r.delete(f)}},t?s?y(!0):w=f.run():r?r(y.bind(null,!0),!0):f.run(),b.pause=f.pause.bind(f),b.resume=f.resume.bind(f),b.stop=b,b}function Qn(e,t=1/0,n){if(t<=0||!Ue(e)||e.__v_skip||(n=n||new Map,(n.get(e)||0)>=t))return e;if(n.set(e,t),t--,Ye(e))Qn(e.value,t,n);else if(ce(e))for(let s=0;s{Qn(s,t,n)});else if(Qr(e)){for(const s in e)Qn(e[s],t,n);for(const s of Object.getOwnPropertySymbols(e))Object.prototype.propertyIsEnumerable.call(e,s)&&Qn(e[s],t,n)}return e}const A1=[];function Im(e){A1.push(e)}function Pm(){A1.pop()}function Mm(e,t){}const Fm={SETUP_FUNCTION:0,0:"SETUP_FUNCTION",RENDER_FUNCTION:1,1:"RENDER_FUNCTION",NATIVE_EVENT_HANDLER:5,5:"NATIVE_EVENT_HANDLER",COMPONENT_EVENT_HANDLER:6,6:"COMPONENT_EVENT_HANDLER",VNODE_HOOK:7,7:"VNODE_HOOK",DIRECTIVE_HOOK:8,8:"DIRECTIVE_HOOK",TRANSITION_HOOK:9,9:"TRANSITION_HOOK",APP_ERROR_HANDLER:10,10:"APP_ERROR_HANDLER",APP_WARN_HANDLER:11,11:"APP_WARN_HANDLER",FUNCTION_REF:12,12:"FUNCTION_REF",ASYNC_COMPONENT_LOADER:13,13:"ASYNC_COMPONENT_LOADER",SCHEDULER:14,14:"SCHEDULER",COMPONENT_UPDATE:15,15:"COMPONENT_UPDATE",APP_UNMOUNT_CLEANUP:16,16:"APP_UNMOUNT_CLEANUP"},Bm={sp:"serverPrefetch hook",bc:"beforeCreate hook",c:"created hook",bm:"beforeMount hook",m:"mounted hook",bu:"beforeUpdate hook",u:"updated",bum:"beforeUnmount hook",um:"unmounted hook",a:"activated hook",da:"deactivated hook",ec:"errorCaptured hook",rtc:"renderTracked hook",rtg:"renderTriggered hook",0:"setup function",1:"render function",2:"watcher getter",3:"watcher callback",4:"watcher cleanup function",5:"native event handler",6:"component event handler",7:"vnode hook",8:"directive hook",9:"transition hook",10:"app errorHandler",11:"app warnHandler",12:"ref function",13:"async component loader",14:"scheduler flush",15:"component update",16:"app unmount cleanup function"};function Po(e,t,n,s){try{return s?e(...s):e()}catch(o){Xs(o,t,n)}}function yn(e,t,n,s){if(ye(e)){const o=Po(e,t,n,s);return o&&ac(o)&&o.catch(i=>{Xs(i,t,n)}),o}if(ce(e)){const o=[];for(let i=0;i>>1,o=Dt[s],i=li(o);i=li(n)?Dt.push(e):Dt.splice(Vm(t),0,e),e.flags|=1,L1()}}function L1(){Sr||(Sr=$1.then(I1))}function ai(e){ce(e)?vo.push(...e):vs&&e.id===-1?vs.splice(oo+1,0,e):e.flags&1||(vo.push(e),e.flags|=1),L1()}function Wu(e,t,n=Bn+1){for(;nli(n)-li(s));if(vo.length=0,vs){vs.push(...t);return}for(vs=t,oo=0;ooe.id==null?e.flags&2?-1:1/0:e.id;function I1(e){try{for(Bn=0;Bnio.emit(o,...i)),Oi=[]):typeof window<"u"&&window.HTMLElement&&!((s=(n=window.navigator)==null?void 0:n.userAgent)!=null&&s.includes("jsdom"))?((t.__VUE_DEVTOOLS_HOOK_REPLAY__=t.__VUE_DEVTOOLS_HOOK_REPLAY__||[]).push(i=>{P1(i,t)}),setTimeout(()=>{io||(t.__VUE_DEVTOOLS_HOOK_REPLAY__=null,Oi=[])},3e3)):Oi=[]}let Tt=null,la=null;function ci(e){const t=Tt;return Tt=e,la=e&&e.type.__scopeId||null,t}function Om(e){la=e}function Dm(){la=null}const Rm=e=>O;function O(e,t=Tt,n){if(!t||e._n)return e;const s=(...o)=>{s._d&&di(-1);const i=ci(t);let r;try{r=e(...o)}finally{ci(i),s._d&&di(1)}return r};return s._n=!0,s._c=!0,s._d=!0,s}function et(e,t){if(Tt===null)return e;const n=xi(Tt),s=e.dirs||(e.dirs=[]);for(let o=0;oe.__isTeleport,Jo=e=>e&&(e.disabled||e.disabled===""),qu=e=>e&&(e.defer||e.defer===""),Ku=e=>typeof SVGElement<"u"&&e instanceof SVGElement,Yu=e=>typeof MathMLElement=="function"&&e instanceof MathMLElement,ll=(e,t)=>{const n=e&&e.to;return _e(n)?t?t(n):null:n},B1={name:"Teleport",__isTeleport:!0,process(e,t,n,s,o,i,r,a,c,u){const{mc:f,pc:d,pbc:h,o:{insert:p,querySelector:g,createText:v,createComment:k}}=u,b=Jo(t.props);let{shapeFlag:w,children:y,dynamicChildren:_}=t;if(e==null){const x=t.el=v(""),L=t.anchor=v("");p(x,n,s),p(L,n,s);const V=(I,P)=>{w&16&&f(y,I,P,o,i,r,a,c)},E=()=>{const I=t.target=ll(t.props,g),P=N1(I,t,v,p);I&&(r!=="svg"&&Ku(I)?r="svg":r!=="mathml"&&Yu(I)&&(r="mathml"),o&&o.isCE&&(o.ce._teleportTargets||(o.ce._teleportTargets=new Set)).add(I),b||(V(I,P),rr(t,!1)))};b&&(V(n,L),rr(t,!0)),qu(t.props)?(t.el.__isMounted=!1,pt(()=>{E(),delete t.el.__isMounted},i)):E()}else{if(qu(t.props)&&e.el.__isMounted===!1){pt(()=>{B1.process(e,t,n,s,o,i,r,a,c,u)},i);return}t.el=e.el,t.targetStart=e.targetStart;const x=t.anchor=e.anchor,L=t.target=e.target,V=t.targetAnchor=e.targetAnchor,E=Jo(e.props),I=E?n:L,P=E?x:V;if(r==="svg"||Ku(L)?r="svg":(r==="mathml"||Yu(L))&&(r="mathml"),_?(h(e.dynamicChildren,_,I,o,i,r,a),Ic(e,t,!0)):c||d(e,t,I,P,o,i,r,a,!1),b)E?t.props&&e.props&&t.props.to!==e.props.to&&(t.props.to=e.props.to):Di(t,n,x,u,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const N=t.target=ll(t.props,g);N&&Di(t,N,null,u,0)}else E&&Di(t,L,V,u,1);rr(t,b)}},remove(e,t,n,{um:s,o:{remove:o}},i){const{shapeFlag:r,children:a,anchor:c,targetStart:u,targetAnchor:f,target:d,props:h}=e;if(d&&(o(u),o(f)),i&&o(c),r&16){const p=i||!Jo(h);for(let g=0;g{e.isMounted=!0}),ls(()=>{e.isUnmounting=!0}),e}const dn=[Function,Array],bc={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:dn,onEnter:dn,onAfterEnter:dn,onEnterCancelled:dn,onBeforeLeave:dn,onLeave:dn,onAfterLeave:dn,onLeaveCancelled:dn,onBeforeAppear:dn,onAppear:dn,onAfterAppear:dn,onAppearCancelled:dn},V1=e=>{const t=e.subTree;return t.component?V1(t.component):t},zm={name:"BaseTransition",props:bc,setup(e,{slots:t}){const n=dt(),s=yc();return()=>{const o=t.default&&ua(t.default(),!0);if(!o||!o.length)return;const i=O1(o),r=Pe(e),{mode:a}=r;if(s.isLeaving)return Na(i);const c=Gu(i);if(!c)return Na(i);let u=ko(c,r,s,n,d=>u=d);c.type!==ut&&rs(c,u);let f=n.subTree&&Gu(n.subTree);if(f&&f.type!==ut&&!Tn(f,c)&&V1(n).type!==ut){let d=ko(f,r,s,n);if(rs(f,d),a==="out-in"&&c.type!==ut)return s.isLeaving=!0,d.afterLeave=()=>{s.isLeaving=!1,n.job.flags&8||n.update(),delete d.afterLeave,f=void 0},Na(i);a==="in-out"&&c.type!==ut?d.delayLeave=(h,p,g)=>{const v=R1(s,f);v[String(f.key)]=f,h[Jn]=()=>{p(),h[Jn]=void 0,delete u.delayedLeave,f=void 0},u.delayedLeave=()=>{g(),delete u.delayedLeave,f=void 0}}:f=void 0}else f&&(f=void 0);return i}}};function O1(e){let t=e[0];if(e.length>1){for(const n of e)if(n.type!==ut){t=n;break}}return t}const D1=zm;function R1(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function ko(e,t,n,s,o){const{appear:i,mode:r,persisted:a=!1,onBeforeEnter:c,onEnter:u,onAfterEnter:f,onEnterCancelled:d,onBeforeLeave:h,onLeave:p,onAfterLeave:g,onLeaveCancelled:v,onBeforeAppear:k,onAppear:b,onAfterAppear:w,onAppearCancelled:y}=t,_=String(e.key),x=R1(n,e),L=(I,P)=>{I&&yn(I,s,9,P)},V=(I,P)=>{const N=P[1];L(I,P),ce(I)?I.every($=>$.length<=1)&&N():I.length<=1&&N()},E={mode:r,persisted:a,beforeEnter(I){let P=c;if(!n.isMounted)if(i)P=k||c;else return;I[Jn]&&I[Jn](!0);const N=x[_];N&&Tn(e,N)&&N.el[Jn]&&N.el[Jn](),L(P,[I])},enter(I){let P=u,N=f,$=d;if(!n.isMounted)if(i)P=b||u,N=w||f,$=y||d;else return;let U=!1;const q=I[Ri]=J=>{U||(U=!0,J?L($,[I]):L(N,[I]),E.delayedLeave&&E.delayedLeave(),I[Ri]=void 0)};P?V(P,[I,q]):q()},leave(I,P){const N=String(e.key);if(I[Ri]&&I[Ri](!0),n.isUnmounting)return P();L(h,[I]);let $=!1;const U=I[Jn]=q=>{$||($=!0,P(),q?L(v,[I]):L(g,[I]),I[Jn]=void 0,x[N]===e&&delete x[N])};x[N]=e,p?V(p,[I,U]):U()},clone(I){const P=ko(I,t,n,s,o);return o&&o(P),P}};return E}function Na(e){if(Si(e))return e=Rn(e),e.children=null,e}function Gu(e){if(!Si(e))return F1(e.type)&&e.children?O1(e.children):e;if(e.component)return e.component.subTree;const{shapeFlag:t,children:n}=e;if(n){if(t&16)return n[0];if(t&32&&ye(n.default))return n.default()}}function rs(e,t){e.shapeFlag&6&&e.component?(e.transition=t,rs(e.component.subTree,t)):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function ua(e,t=!1,n){let s=[],o=0;for(let i=0;i1)for(let i=0;in.value,set:i=>n.value=i})}return n}const Er=new WeakMap;function yo(e,t,n,s,o=!1){if(ce(e)){e.forEach((g,v)=>yo(g,t&&(ce(t)?t[v]:t),n,s,o));return}if(Ss(s)&&!o){s.shapeFlag&512&&s.type.__asyncResolved&&s.component.subTree.component&&yo(e,t,n,s.component.subTree);return}const i=s.shapeFlag&4?xi(s.component):s.el,r=o?null:i,{i:a,r:c}=e,u=t&&t.r,f=a.refs===Le?a.refs={}:a.refs,d=a.setupState,h=Pe(d),p=d===Le?ao:g=>De(h,g);if(u!=null&&u!==c){if(Ju(t),_e(u))f[u]=null,p(u)&&(d[u]=null);else if(Ye(u)){u.value=null;const g=t;g.k&&(f[g.k]=null)}}if(ye(c))Po(c,a,12,[r,f]);else{const g=_e(c),v=Ye(c);if(g||v){const k=()=>{if(e.f){const b=g?p(c)?d[c]:f[c]:c.value;if(o)ce(b)&&rc(b,i);else if(ce(b))b.includes(i)||b.push(i);else if(g)f[c]=[i],p(c)&&(d[c]=f[c]);else{const w=[i];c.value=w,e.k&&(f[e.k]=w)}}else g?(f[c]=r,p(c)&&(d[c]=r)):v&&(c.value=r,e.k&&(f[e.k]=r))};if(r){const b=()=>{k(),Er.delete(e)};b.id=-1,Er.set(e,b),pt(b,n)}else Ju(e),k()}}}function Ju(e){const t=Er.get(e);t&&(t.flags|=8,Er.delete(e))}let Xu=!1;const to=()=>{Xu||(console.error("Hydration completed but contains mismatches."),Xu=!0)},jm=e=>e.namespaceURI.includes("svg")&&e.tagName!=="foreignObject",Um=e=>e.namespaceURI.includes("MathML"),Hi=e=>{if(e.nodeType===1){if(jm(e))return"svg";if(Um(e))return"mathml"}},lo=e=>e.nodeType===8;function Wm(e){const{mt:t,p:n,o:{patchProp:s,createText:o,nextSibling:i,parentNode:r,remove:a,insert:c,createComment:u}}=e,f=(y,_)=>{if(!_.hasChildNodes()){n(null,y,_),Tr(),_._vnode=y;return}d(_.firstChild,y,null,null,null),Tr(),_._vnode=y},d=(y,_,x,L,V,E=!1)=>{E=E||!!_.dynamicChildren;const I=lo(y)&&y.data==="[",P=()=>v(y,_,x,L,V,I),{type:N,ref:$,shapeFlag:U,patchFlag:q}=_;let J=y.nodeType;_.el=y,q===-2&&(E=!1,_.dynamicChildren=null);let G=null;switch(N){case Ts:J!==3?_.children===""?(c(_.el=o(""),r(y),y),G=y):G=P():(y.data!==_.children&&(to(),y.data=_.children),G=i(y));break;case ut:w(y)?(G=i(y),b(_.el=y.content.firstChild,y,x)):J!==8||I?G=P():G=i(y);break;case Rs:if(I&&(y=i(y),J=y.nodeType),J===1||J===3){G=y;const ae=!_.children.length;for(let ne=0;ne<_.staticCount;ne++)ae&&(_.children+=G.nodeType===1?G.outerHTML:G.data),ne===_.staticCount-1&&(_.anchor=G),G=i(G);return I?i(G):G}else P();break;case Y:I?G=g(y,_,x,L,V,E):G=P();break;default:if(U&1)(J!==1||_.type.toLowerCase()!==y.tagName.toLowerCase())&&!w(y)?G=P():G=h(y,_,x,L,V,E);else if(U&6){_.slotScopeIds=V;const ae=r(y);if(I?G=k(y):lo(y)&&y.data==="teleport start"?G=k(y,y.data,"teleport end"):G=i(y),t(_,ae,null,x,L,Hi(ae),E),Ss(_)&&!_.type.__asyncResolved){let ne;I?(ne=H(Y),ne.anchor=G?G.previousSibling:ae.lastChild):ne=y.nodeType===3?rt(""):H("div"),ne.el=y,_.component.subTree=ne}}else U&64?J!==8?G=P():G=_.type.hydrate(y,_,x,L,V,E,e,p):U&128&&(G=_.type.hydrate(y,_,x,L,Hi(r(y)),V,E,e,d))}return $!=null&&yo($,null,L,_),G},h=(y,_,x,L,V,E)=>{E=E||!!_.dynamicChildren;const{type:I,props:P,patchFlag:N,shapeFlag:$,dirs:U,transition:q}=_,J=I==="input"||I==="option";if(J||N!==-1){U&&Nn(_,null,x,"created");let G=!1;if(w(y)){G=h0(null,q)&&x&&x.vnode.props&&x.vnode.props.appear;const ne=y.content.firstChild;if(G){const he=ne.getAttribute("class");he&&(ne.$cls=he),q.beforeEnter(ne)}b(ne,y,x),_.el=y=ne}if($&16&&!(P&&(P.innerHTML||P.textContent))){let ne=p(y.firstChild,_,y,x,L,V,E);for(;ne;){zi(y,1)||to();const he=ne;ne=ne.nextSibling,a(he)}}else if($&8){let ne=_.children;ne[0]===`
`&&(y.tagName==="PRE"||y.tagName==="TEXTAREA")&&(ne=ne.slice(1));const{textContent:he}=y;he!==ne&&he!==ne.replace(/\r\n|\r/g,`
-`)&&(zi(y,0)||to(),y.textContent=_.children)}if(P){if(J||!E||N&48){const ne=y.tagName.includes("-");for(const he in P)(J&&(he.endsWith("value")||he==="indeterminate")||Ys(he)&&!Cs(he)||he[0]==="."||ne)&&s(y,he,null,P[he],void 0,x)}else if(P.onClick)s(y,"onClick",null,P.onClick,void 0,x);else if(N&4&&_s(P.style))for(const ne in P.style)P.style[ne]}let ae;(ae=P&&P.onVnodeBeforeMount)&&Ut(ae,x,_),U&&Nn(_,null,x,"beforeMount"),((ae=P&&P.onVnodeMounted)||U||G)&&C0(()=>{ae&&Ut(ae,x,_),G&&q.enter(y),U&&Nn(_,null,x,"mounted")},L)}return y.nextSibling},p=(y,_,x,L,V,E,I)=>{I=I||!!_.dynamicChildren;const P=_.children,N=P.length;for(let $=0;${const{slotScopeIds:I}=_;I&&(V=V?V.concat(I):I);const P=r(y),N=p(i(y),_,P,x,L,V,E);return N&&lo(N)&&N.data==="]"?i(_.anchor=N):(to(),c(_.anchor=u("]"),P,N),N)},v=(y,_,x,L,V,E)=>{if(zi(y.parentElement,1)||to(),_.el=null,E){const N=k(y);for(;;){const $=i(y);if($&&$!==N)a($);else break}}const I=i(y),P=r(y);return a(y),n(null,_,P,I,x,L,Hi(P),V),x&&(x.vnode.el=_.el,pa(x,_.el)),I},k=(y,_="[",x="]")=>{let L=0;for(;y;)if(y=i(y),y&&lo(y)&&(y.data===_&&L++,y.data===x)){if(L===0)return i(y);L--}return y},b=(y,_,x)=>{const L=_.parentNode;L&&L.replaceChild(y,_);let V=x;for(;V;)V.vnode.el===_&&(V.vnode.el=V.subTree.el=y),V=V.parent},w=y=>y.nodeType===1&&y.tagName==="TEMPLATE";return[f,d]}const Qu="data-allow-mismatch",qm={0:"text",1:"children",2:"class",3:"style",4:"attribute"};function zi(e,t){if(t===0||t===1)for(;e&&!e.hasAttribute(Qu);)e=e.parentElement;const n=e&&e.getAttribute(Qu);if(n==null)return!1;if(n==="")return!0;{const s=n.split(",");return t===0&&s.includes("children")?!0:s.includes(qm[t])}}const Km=ta().requestIdleCallback||(e=>setTimeout(e,1)),Ym=ta().cancelIdleCallback||(e=>clearTimeout(e)),Gm=(e=1e4)=>t=>{const n=Km(t,{timeout:e});return()=>Ym(n)};function Jm(e){const{top:t,left:n,bottom:s,right:o}=e.getBoundingClientRect(),{innerHeight:i,innerWidth:r}=window;return(t>0&&t0&&s0&&n0&&o(t,n)=>{const s=new IntersectionObserver(o=>{for(const i of o)if(i.isIntersecting){s.disconnect(),t();break}},e);return n(o=>{if(o instanceof Element){if(Jm(o))return t(),s.disconnect(),!1;s.observe(o)}}),()=>s.disconnect()},Qm=e=>t=>{if(e){const n=matchMedia(e);if(n.matches)t();else return n.addEventListener("change",t,{once:!0}),()=>n.removeEventListener("change",t)}},Zm=(e=[])=>(t,n)=>{_e(e)&&(e=[e]);let s=!1;const o=r=>{s||(s=!0,i(),t(),r.target.dispatchEvent(new r.constructor(r.type,r)))},i=()=>{n(r=>{for(const a of e)r.removeEventListener(a,o)})};return n(r=>{for(const a of e)r.addEventListener(a,o,{once:!0})}),i};function eg(e,t){if(lo(e)&&e.data==="["){let n=1,s=e.nextSibling;for(;s;){if(s.nodeType===1){if(t(s)===!1)break}else if(lo(s))if(s.data==="]"){if(--n===0)break}else s.data==="["&&n++;s=s.nextSibling}}else t(e)}const Ss=e=>!!e.type.__asyncLoader;function wc(e){ye(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:s,delay:o=200,hydrate:i,timeout:r,suspensible:a=!0,onError:c}=e;let u=null,f,d=0;const h=()=>(d++,u=null,p()),p=()=>{let g;return u||(g=u=t().catch(v=>{if(v=v instanceof Error?v:new Error(String(v)),c)return new Promise((k,b)=>{c(v,()=>k(h()),()=>b(v),d+1)});throw v}).then(v=>g!==u&&u?u:(v&&(v.__esModule||v[Symbol.toStringTag]==="Module")&&(v=v.default),f=v,v)))};return z({name:"AsyncComponentWrapper",__asyncLoader:p,__asyncHydrate(g,v,k){let b=!1;(v.bu||(v.bu=[])).push(()=>b=!0);const w=()=>{b||k()},y=i?()=>{const _=i(w,x=>eg(g,x));_&&(v.bum||(v.bum=[])).push(_)}:w;f?y():p().then(()=>!v.isUnmounted&&y())},get __asyncResolved(){return f},setup(){const g=St;if(kc(g),f)return()=>ji(f,g);const v=y=>{u=null,Xs(y,g,13,!s)};if(a&&g.suspense||wo)return p().then(y=>()=>ji(y,g)).catch(y=>(v(y),()=>s?H(s,{error:y}):null));const k=j(!1),b=j(),w=j(!!o);return o&&setTimeout(()=>{w.value=!1},o),r!=null&&setTimeout(()=>{if(!k.value&&!b.value){const y=new Error(`Async component timed out after ${r}ms.`);v(y),b.value=y}},r),p().then(()=>{k.value=!0,g.parent&&Si(g.parent.vnode)&&g.parent.update()}).catch(y=>{v(y),b.value=y}),()=>{if(k.value&&f)return ji(f,g);if(b.value&&s)return H(s,{error:b.value});if(n&&!w.value)return ji(n,g)}}})}function ji(e,t){const{ref:n,props:s,children:o,ce:i}=t.vnode,r=H(e,s,o);return r.ref=n,r.ce=i,delete t.vnode.ce,r}const Si=e=>e.type.__isKeepAlive,tg={name:"KeepAlive",__isKeepAlive:!0,props:{include:[String,RegExp,Array],exclude:[String,RegExp,Array],max:[String,Number]},setup(e,{slots:t}){const n=dt(),s=n.ctx;if(!s.renderer)return()=>{const w=t.default&&t.default();return w&&w.length===1?w[0]:w};const o=new Map,i=new Set;let r=null;const a=n.suspense,{renderer:{p:c,m:u,um:f,o:{createElement:d}}}=s,h=d("div");s.activate=(w,y,_,x,L)=>{const V=w.component;u(w,y,_,0,a),c(V.vnode,w,y,_,V,a,x,w.slotScopeIds,L),pt(()=>{V.isDeactivated=!1,V.a&&mo(V.a);const E=w.props&&w.props.onVnodeMounted;E&&Ut(E,V.parent,w)},a)},s.deactivate=w=>{const y=w.component;Ar(y.m),Ar(y.a),u(w,h,null,1,a),pt(()=>{y.da&&mo(y.da);const _=w.props&&w.props.onVnodeUnmounted;_&&Ut(_,y.parent,w),y.isDeactivated=!0},a)};function p(w){Va(w),f(w,n,a,!0)}function g(w){o.forEach((y,_)=>{const x=bl(y.type);x&&!w(x)&&v(_)})}function v(w){const y=o.get(w);y&&(!r||!Tn(y,r))?p(y):r&&Va(r),o.delete(w),i.delete(w)}te(()=>[e.include,e.exclude],([w,y])=>{w&&g(_=>qo(w,_)),y&&g(_=>!qo(y,_))},{flush:"post",deep:!0});let k=null;const b=()=>{k!=null&&($r(n.subTree.type)?pt(()=>{o.set(k,Ui(n.subTree))},n.subTree.suspense):o.set(k,Ui(n.subTree)))};return be(b),Fo(b),ls(()=>{o.forEach(w=>{const{subTree:y,suspense:_}=n,x=Ui(y);if(w.type===x.type&&w.key===x.key){Va(x);const L=x.component.da;L&&pt(L,_);return}p(w)})}),()=>{if(k=null,!t.default)return r=null;const w=t.default(),y=w[0];if(w.length>1)return r=null,w;if(!Ln(y)||!(y.shapeFlag&4)&&!(y.shapeFlag&128))return r=null,y;let _=Ui(y);if(_.type===ut)return r=null,_;const x=_.type,L=bl(Ss(_)?_.type.__asyncResolved||{}:x),{include:V,exclude:E,max:I}=e;if(V&&(!L||!qo(V,L))||E&&L&&qo(E,L))return _.shapeFlag&=-257,r=_,y;const P=_.key==null?x:_.key,N=o.get(P);return _.el&&(_=Rn(_),y.shapeFlag&128&&(y.ssContent=_)),k=P,N?(_.el=N.el,_.component=N.component,_.transition&&rs(_,_.transition),_.shapeFlag|=512,i.delete(P),i.add(P)):(i.add(P),I&&i.size>parseInt(I,10)&&v(i.values().next().value)),_.shapeFlag|=256,r=_,$r(y.type)?y:_}}},ng=tg;function qo(e,t){return ce(e)?e.some(n=>qo(n,t)):_e(e)?e.split(",").includes(t):$2(e)?(e.lastIndex=0,e.test(t)):!1}function j1(e,t){W1(e,"a",t)}function U1(e,t){W1(e,"da",t)}function W1(e,t,n=St){const s=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(fa(t,s,n),n){let o=n.parent;for(;o&&o.parent;)Si(o.parent.vnode)&&sg(s,t,n,o),o=o.parent}}function sg(e,t,n,s){const o=fa(t,e,s,!0);cn(()=>{rc(s[t],o)},n)}function Va(e){e.shapeFlag&=-257,e.shapeFlag&=-513}function Ui(e){return e.shapeFlag&128?e.ssContent:e}function fa(e,t,n=St,s=!1){if(n){const o=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...r)=>{ss();const a=qs(n),c=yn(t,n,e,r);return a(),os(),c});return s?o.unshift(i):o.push(i),i}}const as=e=>(t,n=St)=>{(!wo||e==="sp")&&fa(e,(...s)=>t(...s),n)},Mo=as("bm"),be=as("m"),Cc=as("bu"),Fo=as("u"),ls=as("bum"),cn=as("um"),q1=as("sp"),K1=as("rtg"),Y1=as("rtc");function G1(e,t=St){fa("ec",e,t)}const _c="components",og="directives";function un(e,t){return Sc(_c,e,!0,t)||e}const J1=Symbol.for("v-ndc");function Be(e){return _e(e)?Sc(_c,e,!1)||e:e||J1}function ig(e){return Sc(og,e)}function Sc(e,t,n=!0,s=!1){const o=Tt||St;if(o){const i=o.type;if(e===_c){const a=bl(i,!1);if(a&&(a===t||a===tt(t)||a===Js(tt(t))))return i}const r=Zu(o[e]||i[e],t)||Zu(o.appContext[e],t);return!r&&s?i:r}}function Zu(e,t){return e&&(e[t]||e[tt(t)]||e[Js(tt(t))])}function le(e,t,n,s){let o;const i=n&&n[s],r=ce(e);if(r||_e(e)){const a=r&&_s(e);let c=!1,u=!1;a&&(c=!an(e),u=is(e),e=oa(e)),o=new Array(e.length);for(let f=0,d=e.length;ft(a,c,void 0,i&&i[c]));else{const a=Object.keys(e);o=new Array(a.length);for(let c=0,u=a.length;c{const i=s.fn(...o);return i&&(i.key=s.key),i}:s.fn)}return e}function M(e,t,n={},s,o){if(Tt.ce||Tt.parent&&Ss(Tt.parent)&&Tt.parent.ce){const u=Object.keys(n).length>0;return t!=="default"&&(n.name=t),m(),D(Y,null,[H("slot",n,s&&s())],u?-2:64)}let i=e[t];i&&i._c&&(i._d=!1),m();const r=i&&Tc(i(n)),a=n.key||r&&r.key,c=D(Y,{key:(a&&!Gt(a)?a:`_${t}`)+(!r&&s?"_fb":"")},r||(s?s():[]),r&&e._===1?64:-2);return!o&&c.scopeId&&(c.slotScopeIds=[c.scopeId+"-s"]),i&&i._c&&(i._d=!0),c}function Tc(e){return e.some(t=>Ln(t)?!(t.type===ut||t.type===Y&&!Tc(t.children)):!0)?e:null}function Ec(e,t){const n={};for(const s in e)n[t&&/[A-Z]/.test(s)?`on:${s}`:po(s)]=e[s];return n}const cl=e=>e?A0(e)?xi(e):cl(e.parent):null,Xo=Ie(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>cl(e.parent),$root:e=>cl(e.root),$host:e=>e.ce,$emit:e=>e.emit,$options:e=>xc(e),$forceUpdate:e=>e.f||(e.f=()=>{vc(e.update)}),$nextTick:e=>e.n||(e.n=Oe.bind(e.proxy)),$watch:e=>Lg.bind(e)}),Oa=(e,t)=>e!==Le&&!e.__isScriptSetup&&De(e,t),ul={get({_:e},t){if(t==="__v_skip")return!0;const{ctx:n,setupState:s,data:o,props:i,accessCache:r,type:a,appContext:c}=e;let u;if(t[0]!=="$"){const p=r[t];if(p!==void 0)switch(p){case 1:return s[t];case 2:return o[t];case 4:return n[t];case 3:return i[t]}else{if(Oa(s,t))return r[t]=1,s[t];if(o!==Le&&De(o,t))return r[t]=2,o[t];if((u=e.propsOptions[0])&&De(u,t))return r[t]=3,i[t];if(n!==Le&&De(n,t))return r[t]=4,n[t];fl&&(r[t]=0)}}const f=Xo[t];let d,h;if(f)return t==="$attrs"&&Pt(e.attrs,"get",""),f(e);if((d=a.__cssModules)&&(d=d[t]))return d;if(n!==Le&&De(n,t))return r[t]=4,n[t];if(h=c.config.globalProperties,De(h,t))return h[t]},set({_:e},t,n){const{data:s,setupState:o,ctx:i}=e;return Oa(o,t)?(o[t]=n,!0):s!==Le&&De(s,t)?(s[t]=n,!0):De(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:o,propsOptions:i,type:r}},a){let c,u;return!!(n[a]||e!==Le&&a[0]!=="$"&&De(e,a)||Oa(t,a)||(c=i[0])&&De(c,a)||De(s,a)||De(Xo,a)||De(o.config.globalProperties,a)||(u=r.__cssModules)&&u[a])},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:De(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}},rg=Ie({},ul,{get(e,t){if(t!==Symbol.unscopables)return ul.get(e,t,e)},has(e,t){return t[0]!=="_"&&!B2(t)}});function ag(){return null}function lg(){return null}function cg(e){}function ug(e){}function fg(){return null}function dg(){}function hg(e,t){return null}function Ti(){return X1().slots}function pg(){return X1().attrs}function X1(e){const t=dt();return t.setupContext||(t.setupContext=I0(t))}function ui(e){return ce(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}function Q1(e,t){const n=ui(e);for(const s in t){if(s.startsWith("__skip"))continue;let o=n[s];o?ce(o)||ye(o)?o=n[s]={type:o,default:t[s]}:o.default=t[s]:o===null&&(o=n[s]={default:t[s]}),o&&t[`__skip_${s}`]&&(o.skipFactory=!0)}return n}function $n(e,t){return!e||!t?e||t:ce(e)&&ce(t)?e.concat(t):Ie({},ui(e),ui(t))}function Z1(e,t){const n={};for(const s in e)t.includes(s)||Object.defineProperty(n,s,{enumerable:!0,get:()=>e[s]});return n}function mg(e){const t=dt();let n=e();return gl(),ac(n)&&(n=n.catch(s=>{throw qs(t),s})),[n,()=>qs(t)]}let fl=!0;function gg(e){const t=xc(e),n=e.proxy,s=e.ctx;fl=!1,t.beforeCreate&&ef(t.beforeCreate,e,"bc");const{data:o,computed:i,methods:r,watch:a,provide:c,inject:u,created:f,beforeMount:d,mounted:h,beforeUpdate:p,updated:g,activated:v,deactivated:k,beforeDestroy:b,beforeUnmount:w,destroyed:y,unmounted:_,render:x,renderTracked:L,renderTriggered:V,errorCaptured:E,serverPrefetch:I,expose:P,inheritAttrs:N,components:$,directives:U,filters:q}=t;if(u&&vg(u,s,null),r)for(const ae in r){const ne=r[ae];ye(ne)&&(s[ae]=ne.bind(n))}if(o){const ae=o.call(n,n);Ue(ae)&&(e.data=Dn(ae))}if(fl=!0,i)for(const ae in i){const ne=i[ae],he=ye(ne)?ne.bind(n,n):ye(ne.get)?ne.get.bind(n,n):Ht,st=!ye(ne)&&ye(ne.set)?ne.set.bind(n):Ht,je=F({get:he,set:st});Object.defineProperty(s,ae,{enumerable:!0,configurable:!0,get:()=>je.value,set:yt=>je.value=yt})}if(a)for(const ae in a)e0(a[ae],s,n,ae);if(c){const ae=ye(c)?c.call(n):c;Reflect.ownKeys(ae).forEach(ne=>{In(ne,ae[ne])})}f&&ef(f,e,"c");function G(ae,ne){ce(ne)?ne.forEach(he=>ae(he.bind(n))):ne&&ae(ne.bind(n))}if(G(Mo,d),G(be,h),G(Cc,p),G(Fo,g),G(j1,v),G(U1,k),G(G1,E),G(Y1,L),G(K1,V),G(ls,w),G(cn,_),G(q1,I),ce(P))if(P.length){const ae=e.exposed||(e.exposed={});P.forEach(ne=>{Object.defineProperty(ae,ne,{get:()=>n[ne],set:he=>n[ne]=he,enumerable:!0})})}else e.exposed||(e.exposed={});x&&e.render===Ht&&(e.render=x),N!=null&&(e.inheritAttrs=N),$&&(e.components=$),U&&(e.directives=U),I&&kc(e)}function vg(e,t,n=Ht){ce(e)&&(e=dl(e));for(const s in e){const o=e[s];let i;Ue(o)?"default"in o?i=qe(o.from||s,o.default,!0):i=qe(o.from||s):i=qe(o),Ye(i)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>i.value,set:r=>i.value=r}):t[s]=i}}function ef(e,t,n){yn(ce(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function e0(e,t,n,s){let o=s.includes(".")?y0(n,s):()=>n[s];if(_e(e)){const i=t[e];ye(i)&&te(o,i)}else if(ye(e))te(o,e.bind(n));else if(Ue(e))if(ce(e))e.forEach(i=>e0(i,t,n,s));else{const i=ye(e.handler)?e.handler.bind(n):t[e.handler];ye(i)&&te(o,i,e)}}function xc(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:o,optionsCache:i,config:{optionMergeStrategies:r}}=e.appContext,a=i.get(t);let c;return a?c=a:!o.length&&!n&&!s?c=t:(c={},o.length&&o.forEach(u=>xr(c,u,r,!0)),xr(c,t,r)),Ue(t)&&i.set(t,c),c}function xr(e,t,n,s=!1){const{mixins:o,extends:i}=t;i&&xr(e,i,n,!0),o&&o.forEach(r=>xr(e,r,n,!0));for(const r in t)if(!(s&&r==="expose")){const a=yg[r]||n&&n[r];e[r]=a?a(e[r],t[r]):t[r]}return e}const yg={data:tf,props:nf,emits:nf,methods:Ko,computed:Ko,beforeCreate:Vt,created:Vt,beforeMount:Vt,mounted:Vt,beforeUpdate:Vt,updated:Vt,beforeDestroy:Vt,beforeUnmount:Vt,destroyed:Vt,unmounted:Vt,activated:Vt,deactivated:Vt,errorCaptured:Vt,serverPrefetch:Vt,components:Ko,directives:Ko,watch:kg,provide:tf,inject:bg};function tf(e,t){return t?e?function(){return Ie(ye(e)?e.call(this,this):e,ye(t)?t.call(this,this):t)}:t:e}function bg(e,t){return Ko(dl(e),dl(t))}function dl(e){if(ce(e)){const t={};for(let n=0;n1)return n&&ye(t)?t.call(s&&s.proxy):t}}function Ac(){return!!(dt()||Ds)}const n0={},s0=()=>Object.create(n0),o0=e=>Object.getPrototypeOf(e)===n0;function _g(e,t,n,s=!1){const o={},i=s0();e.propsDefaults=Object.create(null),i0(e,t,o,i);for(const r in e.propsOptions[0])r in o||(o[r]=void 0);n?e.props=s?o:pc(o):e.type.props?e.props=o:e.props=i,e.attrs=i}function Sg(e,t,n,s){const{props:o,attrs:i,vnode:{patchFlag:r}}=e,a=Pe(o),[c]=e.propsOptions;let u=!1;if((s||r>0)&&!(r&16)){if(r&8){const f=e.vnode.dynamicProps;for(let d=0;d