Process

Overview

为每个节点撰写完整的markdown文档。整合本地材料与模型内化知识，生成包含概述、目录、图表、图片链接、参考资料的详细内容。

Write complete Markdown documents for each node. Integrate local materials with the model's internalized knowledge to generate detailed content including overview, directory, charts, image links, and reference materials.

Workflow

1. 读取材料映射

1. Read Material Mapping

从

download.txt

读取每个节点的材料文件列表。

Read the list of material files for each node from

download.txt

.

2. 并行撰写策略

2. Parallel Writing Strategy

启动多个子代理（使用Task工具并行执行）：

每个子代理负责1个节点
根据节点数量动态调整子代理数量
建议同时运行3-6个子代理

Launch multiple sub-agents (execute in parallel using the Task tool):

Each sub-agent is responsible for 1 node
Dynamically adjust the number of sub-agents based on the number of nodes
It is recommended to run 3-6 sub-agents simultaneously

3. 材料阅读与整合

3. Material Reading and Integration

完整材料阅读：

使用Read工具读取所有关联的materials文件
提取关键信息、数据、示例代码
整合不同来源的观点和方法
交叉验证信息的准确性

信息提取清单：

核心概念定义
关键技术原理
实践案例与代码
数据与统计信息
最佳实践建议
常见问题与解决方案

Complete Material Reading:

Use the Read tool to read all associated materials files
Extract key information, data, and sample code
Integrate viewpoints and methods from different sources
Cross-verify the accuracy of information

Information Extraction Checklist:

Core concept definitions
Key technical principles
Practical cases and code
Data and statistical information
Best practice recommendations
Common issues and solutions

4. 文档结构要求

4. Document Structure Requirements

每个节点文档必须包含以下部分：

markdown

undefined

Each node document must include the following sections:

markdown

undefined

{节点标题}

{Node Title}

概述

Overview

简短描述本节内容（2-3句话）

Briefly describe the content of this section (2-3 sentences)

正文内容

Main Content

详细、准确、完整的内容描述

Detailed, accurate, and complete content description

图表与可视化

Charts and Visualization

流程图（使用Mermaid语法）
架构图（使用Mermaid语法）
数据表格
在线图片URL

Flow chart (using Mermaid syntax)
Architecture diagram (using Mermaid syntax)
Data tables
Online image URL

参考资料

Reference Materials

列出所有引用来源

List all cited sources

Scripts

scripts/validate_document.py

scripts/validate_document.py

验证生成的文档是否符合质量标准。

检查项：

文档结构完整性
必需章节存在性
Markdown格式正确性
图片链接有效性

Verify whether the generated documents meet quality standards.

Check Items:

Completeness of document structure
Existence of required sections
Correctness of Markdown format
Validity of image links

scripts/word_count.py

scripts/word_count.py

统计文档字数，确保内容充实。

Count the number of words in documents to ensure content is substantial.

References

references/writing-guidelines.md

references/writing-guidelines.md

详细的写作规范与风格指南。

参见Writing Guidelines获取：

标题层级规范
代码块格式要求
图片引用规范
参考文献格式

Detailed writing specifications and style guides.

See Writing Guidelines for:

Title hierarchy specifications
Code block format requirements
Image citation specifications
Reference format

references/mermaid-cheatsheet.md

references/mermaid-cheatsheet.md

Mermaid图表语法速查表。

参见Mermaid Cheatsheet获取：

流程图语法
时序图语法
状态图语法
类图语法

Mermaid chart syntax cheat sheet.

See Mermaid Cheatsheet for:

Flow chart syntax
Sequence diagram syntax
State diagram syntax
Class diagram syntax

Examples

示例：节点文档

Example: Node Document

输入：

节点：
```
React Hooks入门
```

材料：

1_hooks_intro.md

,

1_hooks_guide.md

,

1_hooks_best_practices.md

输出 (

React Hooks入门.md

)：

markdown

undefined

Input:

Node:
```
Introduction to React Hooks
```

Materials:

1_hooks_intro.md

,

1_hooks_guide.md

,

1_hooks_best_practices.md

Output (

Introduction to React Hooks.md

):

markdown

undefined

React Hooks入门

Introduction to React Hooks

概述

Overview

React Hooks是React 16.8引入的新特性，允许在函数组件中使用状态和其他React特性。Hooks解决了类组件的复杂性问题，提供了更简洁的代码组织方式。

React Hooks is a new feature introduced in React 16.8 that allows the use of state and other React features in function components. Hooks solve the complexity issues of class components and provide a more concise code organization method.

Hooks简介

Introduction to Hooks

什么是Hooks

What are Hooks

Hooks是JavaScript函数，用于在函数组件中"钩入"React状态和生命周期特性。

Hooks are JavaScript functions used to "hook into" React state and lifecycle features in function components.

为什么需要Hooks

Why Do We Need Hooks

解决类组件this指向问题
简化组件逻辑复用
更好的代码组织方式

Solve the this pointer problem in class components
Simplify component logic reuse
Better code organization method

useState Hook

基本用法

Basic Usage

```jsx import { useState } from 'react';

function Counter() { const [count, setCount] = useState(0);

return ( <div> <p>你点击了 {count} 次</p> <button onClick={() => setCount(count + 1)}> 点击我 </button> </div> ); } ```

jsx

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

状态更新模式

State Update Patterns

模式	说明	示例
直接替换	简单类型	`setCount(count + 1)`
函数式更新	依赖旧值	`setCount(prev => prev + 1)`
对象更新	保留其他字段	`setUser({...user, name: '新名字'})`

Pattern	Description	Example
Direct Replacement	Simple types	`setCount(count + 1)`
Functional Update	Depends on old value	`setCount(prev => prev + 1)`
Object Update	Retain other fields	`setUser({...user, name: 'New Name'})`

useEffect Hook

基本用法

Basic Usage

```jsx useEffect(() => { // 副作用逻辑 document.title = `点击了 ${count} 次`;

return () => { // 清理函数 }; }, [count]); // 依赖数组 ```

jsx

useEffect(() => {
  // Side effect logic
  document.title = `You clicked ${count} times`;

  return () => {
    // Cleanup function
  };
}, [count]); // Dependency array

依赖数组规则

Dependency Array Rules

```mermaid graph TD A[useEffect] --> B{依赖数组} B -->|无| C[每次渲染都执行] B -->|空[]| D[仅挂载时执行] B -->|有值| E[依赖变化时执行] ```

mermaid

graph TD
    A[useEffect] --> B{Dependency Array}
    B -->|None| C[Execute on every render]
    B -->|Empty []| D[Execute only on mount]
    B -->|With values| E[Execute when dependencies change]

自定义Hooks

Custom Hooks

创建自定义Hook

Create Custom Hook

```jsx function useWindowSize() { const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

useEffect(() => { const handleResize = () => { setSize({ width: window.innerWidth, height: window.innerHeight }); };

window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);

}, []);

return size; } ```

jsx

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}

最佳实践

Best Practices

只在最顶层使用Hooks：不要在循环、条件或嵌套函数中调用
只在React函数中调用：在函数组件或自定义Hook中调用
使用ESLint插件：
```
eslint-plugin-react-hooks
```
自动检测违规

Only use Hooks at the top level: Do not call them in loops, conditions, or nested functions
Only call Hooks in React functions: Call in function components or custom Hooks
Use ESLint plugin:
```
eslint-plugin-react-hooks
```
automatically detects violations

参考资料

Reference Materials

Troubleshooting

问题	解决方案
材料不足导致内容单薄	使用模型内化知识补充，保持客观
不同材料观点冲突	明确标注不同观点，保持中立
代码示例无法运行	验证代码完整性，添加环境说明
图片链接失效	使用稳定的官方资源URL
文档结构不统一	参考标准模板检查

Issue	Solution
Thin content due to insufficient materials	Use the model's internalized knowledge to supplement, remain objective
Conflicting viewpoints from different materials	Clearly mark different viewpoints, remain neutral
Unrunable code examples	Verify code completeness, add environment descriptions
Invalid image links	Use stable official resource URLs
Inconsistent document structure	Check against the standard template

Content Requirements

概述部分

Overview Section

2-3句话概括本节内容
说明本节在整体中的位置
预告本节将解决什么问题

2-3 sentences summarizing the content of this section
Explain the position of this section in the whole context
Preview the problems this section will solve

正文内容

Main Content

使用小标题组织内容
代码示例带注释
重要概念加粗强调
使用表格对比不同方案

Organize content with subheadings
Code examples with comments
Emphasize important concepts in bold
Use tables to compare different solutions

图表与可视化

Charts and Visualization

流程图使用Mermaid语法
架构图使用Mermaid graph语法
数据对比使用表格
截图使用在线URL（可从官方文档获取）

Flow charts use Mermaid syntax
Architecture diagrams use Mermaid graph syntax
Data comparisons use tables
Screenshots use online URLs (available from official documents)

参考资料

Reference Materials

使用标准引用格式
包含完整URL
按重要性排序
标注访问时间（可选）

Use standard citation format
Include complete URLs
Sort by importance
Mark access time (optional)

process

Original

Translation

Process

Process

Overview

Overview

Workflow

Workflow

1. 读取材料映射

1. Read Material Mapping

2. 并行撰写策略

2. Parallel Writing Strategy

3. 材料阅读与整合

3. Material Reading and Integration

4. 文档结构要求

4. Document Structure Requirements

{节点标题}

{Node Title}

概述

Overview

目录

Directory

正文内容

Main Content

图表与可视化

Charts and Visualization

参考资料

Reference Materials

相关链接

Related Links

5. 输出格式

5. Output Format

6. 内容质量标准

6. Content Quality Standards

Scripts

Scripts

scripts/validate_document.py

scripts/validate_document.py

scripts/word_count.py

scripts/word_count.py

References

References

references/writing-guidelines.md

references/writing-guidelines.md

references/mermaid-cheatsheet.md

references/mermaid-cheatsheet.md

Examples

Examples

示例：节点文档

Example: Node Document

React Hooks入门

Introduction to React Hooks

概述

Overview

目录

Directory

Hooks简介

Introduction to Hooks

什么是Hooks

What are Hooks

为什么需要Hooks

Why Do We Need Hooks

useState Hook

useState Hook

基本用法

Basic Usage

状态更新模式

State Update Patterns

useEffect Hook

useEffect Hook

基本用法

Basic Usage

依赖数组规则

Dependency Array Rules

自定义Hooks

Custom Hooks

创建自定义Hook

Create Custom Hook

最佳实践

`scripts/validate_document.py`

`scripts/validate_document.py`

`scripts/word_count.py`

`scripts/word_count.py`

`references/writing-guidelines.md`

`references/writing-guidelines.md`

`references/mermaid-cheatsheet.md`

`references/mermaid-cheatsheet.md`