phase 5 part 1: typescript, vue, react, ssr(Next.js 16) topics with lessons, scenarios, interviews, verified examples

catalog.json

@@ -533,42 +533,48 @@
       "domain": "frontend",
       "title": "React",
       "index": "topics/frontend/react/index.md",
-      "lessons": 0,
-      "scenarios": 0,
+      "lessons": 1,
+      "scenarios": 1,
       "interview_questions": {
-        "基础": 0,
-        "进阶": 0,
-        "场景题": 0
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
       },
-      "examples": []
+      "examples": [
+        "topics/frontend/react/examples/task-panel"
+      ]
     },
     {
       "stack": "ssr",
       "domain": "frontend",
       "title": "SSR（Nuxt / Next.js）",
       "index": "topics/frontend/ssr/index.md",
-      "lessons": 0,
-      "scenarios": 0,
+      "lessons": 2,
+      "scenarios": 1,
       "interview_questions": {
-        "基础": 0,
-        "进阶": 0,
-        "场景题": 0
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
       },
-      "examples": []
+      "examples": [
+        "topics/frontend/ssr/examples/next-ai-chat"
+      ]
     },
     {
       "stack": "typescript",
       "domain": "frontend",
       "title": "TypeScript",
       "index": "topics/frontend/typescript/index.md",
-      "lessons": 0,
-      "scenarios": 0,
+      "lessons": 1,
+      "scenarios": 1,
       "interview_questions": {
-        "基础": 0,
-        "进阶": 0,
-        "场景题": 0
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
       },
-      "examples": []
+      "examples": [
+        "topics/frontend/typescript/examples/api-client"
+      ]
     },
     {
       "stack": "vite",
@@ -587,16 +593,18 @@
     {
       "stack": "vue",
       "domain": "frontend",
-      "title": "Vue 3 + Pinia + Router",
+      "title": "Vue 3",
       "index": "topics/frontend/vue/index.md",
-      "lessons": 0,
-      "scenarios": 0,
+      "lessons": 1,
+      "scenarios": 1,
       "interview_questions": {
-        "基础": 0,
-        "进阶": 0,
-        "场景题": 0
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
       },
-      "examples": []
+      "examples": [
+        "topics/frontend/vue/examples/ai-chat-stream"
+      ]
     },
     {
       "stack": "webpack",
@@ -5502,6 +5510,48 @@
       "path": "topics/frontend/fe-testing-perf/index.md",
       "sections": []
     },
+    {
+      "id": "frontend.react.hooks-rendering",
+      "title": "React 渲染机制、Hooks 规则、状态管理和 React 19 新特性",
+      "type": "lesson",
+      "domain": "frontend",
+      "stack": [
+        "react"
+      ],
+      "tags": [
+        "React",
+        "Hooks",
+        "useEffect",
+        "useReducer",
+        "渲染",
+        "memo",
+        "并发特性",
+        "React 19",
+        "React Compiler"
+      ],
+      "level": "intermediate",
+      "prerequisites": [
+        "frontend.typescript.type-system"
+      ],
+      "related": [
+        "frontend.react.scenario.long-task-ui",
+        "frontend.ssr.nextjs-app-router",
+        "frontend.react.interview"
+      ],
+      "est_hours": 3,
+      "week": [
+        7
+      ],
+      "order": 1,
+      "path": "topics/frontend/react/01-hooks-rendering.md",
+      "sections": [
+        "解释说明",
+        "案例",
+        "代码示例",
+        "易错点",
+        "面试常问"
+      ]
+    },
     {
       "id": "frontend.react.index",
       "title": "React",
@@ -5510,7 +5560,12 @@
       "stack": [
         "react"
       ],
-      "tags": [],
+      "tags": [
+        "React",
+        "Hooks",
+        "状态管理",
+        "React 19"
+      ],
       "level": null,
       "prerequisites": [],
       "related": [],
@@ -5520,7 +5575,96 @@
       ],
       "order": null,
       "path": "topics/frontend/react/index.md",
-      "sections": []
+      "sections": [
+        "学习路线",
+        "企业场景",
+        "面试题",
+        "示例代码",
+        "在 16 周计划中",
+        "官方资料"
+      ]
+    },
+    {
+      "id": "frontend.react.interview",
+      "title": "React 面试题",
+      "type": "interview",
+      "domain": "frontend",
+      "stack": [
+        "react"
+      ],
+      "tags": [
+        "React",
+        "Hooks",
+        "渲染",
+        "面试"
+      ],
+      "level": "intermediate",
+      "prerequisites": [],
+      "related": [
+        "frontend.react.hooks-rendering"
+      ],
+      "est_hours": null,
+      "week": [
+        7,
+        16
+      ],
+      "order": null,
+      "path": "topics/frontend/react/interview.md",
+      "sections": [
+        "基础",
+        "进阶",
+        "场景题"
+      ],
+      "questions": {
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
+      }
+    },
+    {
+      "id": "frontend.react.scenario.long-task-ui",
+      "title": "长任务界面：Agent 任务的状态机、事件去重、乐观更新和恢复",
+      "type": "scenario",
+      "domain": "frontend",
+      "stack": [
+        "react",
+        "typescript",
+        "fastapi"
+      ],
+      "tags": [
+        "任务状态",
+        "状态机",
+        "useReducer",
+        "SSE",
+        "幂等",
+        "乐观更新",
+        "异常恢复"
+      ],
+      "level": "advanced",
+      "prerequisites": [
+        "frontend.react.hooks-rendering"
+      ],
+      "related": [
+        "frontend.react.interview",
+        "ai.langgraph.scenario.refund-approval",
+        "frontend.vue.scenario.ai-chat-stream"
+      ],
+      "est_hours": 2.5,
+      "week": [
+        7,
+        12
+      ],
+      "order": null,
+      "path": "topics/frontend/react/scenarios/long-task-ui.md",
+      "sections": [
+        "业务背景与问题",
+        "约束",
+        "方案设计",
+        "关键代码",
+        "取舍",
+        "易错点",
+        "面试怎么讲"
+      ]
     },
     {
       "id": "frontend.ssr.index",
@@ -5530,7 +5674,13 @@
       "stack": [
         "ssr"
       ],
-      "tags": [],
+      "tags": [
+        "SSR",
+        "SSG",
+        "水合",
+        "Next.js",
+        "Nuxt"
+      ],
       "level": null,
       "prerequisites": [],
       "related": [],
@@ -5540,7 +5690,182 @@
       ],
       "order": null,
       "path": "topics/frontend/ssr/index.md",
-      "sections": []
+      "sections": [
+        "学习路线",
+        "企业场景",
+        "面试题",
+        "示例代码",
+        "在 16 周计划中",
+        "官方资料"
+      ]
+    },
+    {
+      "id": "frontend.ssr.interview",
+      "title": "SSR 与 Next.js 面试题",
+      "type": "interview",
+      "domain": "frontend",
+      "stack": [
+        "ssr"
+      ],
+      "tags": [
+        "SSR",
+        "Next.js",
+        "Nuxt",
+        "水合",
+        "面试"
+      ],
+      "level": "intermediate",
+      "prerequisites": [],
+      "related": [
+        "frontend.ssr.rendering-modes",
+        "frontend.ssr.nextjs-app-router"
+      ],
+      "est_hours": null,
+      "week": [
+        7,
+        16
+      ],
+      "order": null,
+      "path": "topics/frontend/ssr/interview.md",
+      "sections": [
+        "基础",
+        "进阶",
+        "场景题"
+      ],
+      "questions": {
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
+      }
+    },
+    {
+      "id": "frontend.ssr.nextjs-app-router",
+      "title": "Next.js App Router：服务端组件、客户端组件、路由处理器做 AI 流式接口、缓存",
+      "type": "lesson",
+      "domain": "frontend",
+      "stack": [
+        "ssr",
+        "react"
+      ],
+      "tags": [
+        "Next.js",
+        "App Router",
+        "Server Components",
+        "use client",
+        "Route Handlers",
+        "Server Actions",
+        "流式响应",
+        "Turbopack"
+      ],
+      "level": "intermediate",
+      "prerequisites": [
+        "frontend.react.hooks-rendering",
+        "frontend.ssr.rendering-modes"
+      ],
+      "related": [
+        "frontend.ssr.scenario.help-center",
+        "backend.nodejs.index",
+        "frontend.ssr.interview"
+      ],
+      "est_hours": 3,
+      "week": [
+        7
+      ],
+      "order": 2,
+      "path": "topics/frontend/ssr/02-nextjs-app-router.md",
+      "sections": [
+        "解释说明",
+        "案例",
+        "代码示例",
+        "易错点",
+        "面试常问"
+      ]
+    },
+    {
+      "id": "frontend.ssr.rendering-modes",
+      "title": "渲染模式：CSR / SSR / SSG / ISR、水合、流式渲染和 Nuxt 基础",
+      "type": "lesson",
+      "domain": "frontend",
+      "stack": [
+        "ssr"
+      ],
+      "tags": [
+        "CSR",
+        "SSR",
+        "SSG",
+        "ISR",
+        "水合",
+        "Hydration",
+        "流式渲染",
+        "Nuxt",
+        "SEO"
+      ],
+      "level": "intermediate",
+      "prerequisites": [
+        "frontend.vue.reactivity-composition"
+      ],
+      "related": [
+        "frontend.ssr.nextjs-app-router",
+        "frontend.fe-testing-perf.index",
+        "frontend.ssr.interview"
+      ],
+      "est_hours": 2.5,
+      "week": [
+        7
+      ],
+      "order": 1,
+      "path": "topics/frontend/ssr/01-rendering-modes.md",
+      "sections": [
+        "解释说明",
+        "案例",
+        "代码示例",
+        "易错点",
+        "面试常问"
+      ]
+    },
+    {
+      "id": "frontend.ssr.scenario.help-center",
+      "title": "帮助中心 + 智能客服：SEO、渲染模式组合和 BFF 设计",
+      "type": "scenario",
+      "domain": "frontend",
+      "stack": [
+        "ssr",
+        "react",
+        "nginx",
+        "fastapi"
+      ],
+      "tags": [
+        "SEO",
+        "SSG",
+        "ISR",
+        "BFF",
+        "流式接口",
+        "鉴权",
+        "CDN 缓存"
+      ],
+      "level": "intermediate",
+      "prerequisites": [
+        "frontend.ssr.nextjs-app-router"
+      ],
+      "related": [
+        "frontend.ssr.interview",
+        "devops.nginx.scenario.ai-gateway-sse-canary"
+      ],
+      "est_hours": 2.5,
+      "week": [
+        7
+      ],
+      "order": null,
+      "path": "topics/frontend/ssr/scenarios/help-center.md",
+      "sections": [
+        "业务背景与问题",
+        "约束",
+        "方案设计",
+        "关键代码",
+        "取舍",
+        "易错点",
+        "面试怎么讲"
+      ]
     },
     {
       "id": "frontend.typescript.index",
@@ -5550,7 +5875,12 @@
       "stack": [
         "typescript"
       ],
-      "tags": [],
+      "tags": [
+        "TypeScript",
+        "类型系统",
+        "运行时校验",
+        "接口契约"
+      ],
       "level": null,
       "prerequisites": [],
       "related": [],
@@ -5560,7 +5890,131 @@
       ],
       "order": null,
       "path": "topics/frontend/typescript/index.md",
-      "sections": []
+      "sections": [
+        "学习路线",
+        "企业场景",
+        "面试题",
+        "示例代码",
+        "在 16 周计划中",
+        "官方资料"
+      ]
+    },
+    {
+      "id": "frontend.typescript.interview",
+      "title": "TypeScript 面试题",
+      "type": "interview",
+      "domain": "frontend",
+      "stack": [
+        "typescript"
+      ],
+      "tags": [
+        "TypeScript",
+        "面试"
+      ],
+      "level": "intermediate",
+      "prerequisites": [],
+      "related": [
+        "frontend.typescript.type-system"
+      ],
+      "est_hours": null,
+      "week": [
+        7,
+        16
+      ],
+      "order": null,
+      "path": "topics/frontend/typescript/interview.md",
+      "sections": [
+        "基础",
+        "进阶",
+        "场景题"
+      ],
+      "questions": {
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
+      }
+    },
+    {
+      "id": "frontend.typescript.scenario.api-contract",
+      "title": "前后端类型契约：OpenAPI 生成类型、运行时校验和接口变更管理",
+      "type": "scenario",
+      "domain": "frontend",
+      "stack": [
+        "typescript",
+        "fastapi",
+        "gin"
+      ],
+      "tags": [
+        "OpenAPI",
+        "类型生成",
+        "运行时校验",
+        "zod",
+        "接口变更",
+        "契约测试"
+      ],
+      "level": "intermediate",
+      "prerequisites": [
+        "frontend.typescript.type-system"
+      ],
+      "related": [
+        "frontend.typescript.interview",
+        "python.fastapi.index",
+        "backend.gin.scenario.unified-api-response"
+      ],
+      "est_hours": 2.5,
+      "week": [
+        7
+      ],
+      "order": null,
+      "path": "topics/frontend/typescript/scenarios/api-contract.md",
+      "sections": [
+        "业务背景与问题",
+        "约束",
+        "方案设计",
+        "关键代码",
+        "取舍",
+        "易错点",
+        "面试怎么讲"
+      ]
+    },
+    {
+      "id": "frontend.typescript.type-system",
+      "title": "TypeScript 类型系统进阶：泛型、条件类型、类型收窄、satisfies 和严格配置",
+      "type": "lesson",
+      "domain": "frontend",
+      "stack": [
+        "typescript"
+      ],
+      "tags": [
+        "TypeScript",
+        "泛型",
+        "条件类型",
+        "infer",
+        "映射类型",
+        "可辨识联合",
+        "satisfies",
+        "tsconfig"
+      ],
+      "level": "intermediate",
+      "prerequisites": [],
+      "related": [
+        "frontend.typescript.scenario.api-contract",
+        "frontend.vue.index",
+        "frontend.typescript.interview"
+      ],
+      "est_hours": 3,
+      "week": [
+        7
+      ],
+      "order": 1,
+      "path": "topics/frontend/typescript/01-type-system.md",
+      "sections": [
+        "解释说明",
+        "案例",
+        "代码示例",
+        "易错点",
+        "面试常问"
+      ]
     },
     {
       "id": "frontend.vite.index",
@@ -5584,13 +6038,19 @@
     },
     {
       "id": "frontend.vue.index",
-      "title": "Vue 3 + Pinia + Router",
+      "title": "Vue 3",
       "type": "index",
       "domain": "frontend",
       "stack": [
         "vue"
       ],
-      "tags": [],
+      "tags": [
+        "Vue 3",
+        "响应式",
+        "组合式函数",
+        "Pinia",
+        "AI 对话界面"
+      ],
       "level": null,
       "prerequisites": [],
       "related": [],
@@ -5600,7 +6060,140 @@
       ],
       "order": null,
       "path": "topics/frontend/vue/index.md",
-      "sections": []
+      "sections": [
+        "学习路线",
+        "企业场景",
+        "面试题",
+        "示例代码",
+        "在 16 周计划中",
+        "官方资料"
+      ]
+    },
+    {
+      "id": "frontend.vue.interview",
+      "title": "Vue 面试题",
+      "type": "interview",
+      "domain": "frontend",
+      "stack": [
+        "vue"
+      ],
+      "tags": [
+        "Vue 3",
+        "响应式",
+        "Pinia",
+        "面试"
+      ],
+      "level": "intermediate",
+      "prerequisites": [],
+      "related": [
+        "frontend.vue.reactivity-composition"
+      ],
+      "est_hours": null,
+      "week": [
+        7,
+        16
+      ],
+      "order": null,
+      "path": "topics/frontend/vue/interview.md",
+      "sections": [
+        "基础",
+        "进阶",
+        "场景题"
+      ],
+      "questions": {
+        "基础": 3,
+        "进阶": 3,
+        "场景题": 2
+      }
+    },
+    {
+      "id": "frontend.vue.reactivity-composition",
+      "title": "Vue 3 响应式原理、组合式函数、Pinia 和性能优化",
+      "type": "lesson",
+      "domain": "frontend",
+      "stack": [
+        "vue"
+      ],
+      "tags": [
+        "Vue 3",
+        "响应式",
+        "Proxy",
+        "ref",
+        "reactive",
+        "computed",
+        "watch",
+        "组合式函数",
+        "Pinia",
+        "性能"
+      ],
+      "level": "intermediate",
+      "prerequisites": [
+        "frontend.typescript.type-system"
+      ],
+      "related": [
+        "frontend.vue.scenario.ai-chat-stream",
+        "frontend.react.index",
+        "frontend.vue.interview"
+      ],
+      "est_hours": 3,
+      "week": [
+        7
+      ],
+      "order": 1,
+      "path": "topics/frontend/vue/01-reactivity-composition.md",
+      "sections": [
+        "解释说明",
+        "案例",
+        "代码示例",
+        "易错点",
+        "面试常问"
+      ]
+    },
+    {
+      "id": "frontend.vue.scenario.ai-chat-stream",
+      "title": "AI 对话界面：流式渲染、任务状态、停止生成和断线续传",
+      "type": "scenario",
+      "domain": "frontend",
+      "stack": [
+        "vue",
+        "typescript",
+        "fastapi",
+        "nginx"
+      ],
+      "tags": [
+        "流式输出",
+        "SSE",
+        "任务状态",
+        "断线重连",
+        "Last-Event-ID",
+        "结构化输出",
+        "AI 原生前端"
+      ],
+      "level": "advanced",
+      "prerequisites": [
+        "frontend.vue.reactivity-composition"
+      ],
+      "related": [
+        "frontend.vue.interview",
+        "python.fastapi.scenario.streaming-chat-api",
+        "devops.nginx.scenario.ai-gateway-sse-canary"
+      ],
+      "est_hours": 3,
+      "week": [
+        7,
+        12
+      ],
+      "order": null,
+      "path": "topics/frontend/vue/scenarios/ai-chat-stream.md",
+      "sections": [
+        "业务背景与问题",
+        "约束",
+        "方案设计",
+        "关键代码",
+        "取舍",
+        "易错点",
+        "面试怎么讲"
+      ]
     },
     {
       "id": "frontend.webpack.index",