5/8/2026
知识点创建流程详解（以"1.1 整数和整除"为例）
📋 一、完整流程概览
1. 获取课本目录 → 2. 内容收集与整合 → 3. 创建本地文件 → 4. 更新数据库 → 5. 前端渲染
📚 二、详细步骤
步骤 1：获取课本目录
1.1 目录来源
- 来源文件：
/Users/su/Documents/Obsidian Vault/Documentation/数学课本/小学/六年级上.md - 获取方式：用户提供的完整课本目录网页内容
1.2 目录结构
六年级上
├── 第一章：数的整除
│ ├── 1.1 整数和整除的意义
│ ├── 1.2 因数和倍数
│ ├── 1.3 能被2、5整除的数
│ ├── 1.4 素数、合数与分解素因数
│ ├── 1.5 公因数和最大公因数
│ └── 1.6 公倍数和最小公倍数
└── ...
1.3 数据库初始化
操作：在 supabase/migrations/ 目录下创建 SQL 迁移脚本
示例文件：014_add_grade6a_chapters.sql
INSERT INTO knowledge_points (id, chapter, section, title, content, keywords, grade) VALUES
('kp-001', '第一章', '数的整除', '1.1 整数和整除', '内容...', ARRAY['整数', '整除'], '六年级上'),
...
执行命令：
/tmp/supabase db query --linked -f supabase/migrations/014_add_grade6a_chapters.sql
步骤 2：内容收集与整合
2.1 内容来源
收集多个知识来源进行整合，取长补短：
- 课本内容 - 来自小学六年级上册数学课本
- 基础定义、公式、例题
- 扩展资料 - 补充知识点
- 历史背景、数学文化
- 练习题 - 各种难度级别的题目
- 基础题、提高题、综合题
2.2 整合原则
- 全面性：覆盖所有重要知识点
- 层次性：从简单到复杂
- 实用性：包含足够的例题和练习
- 美观性：使用 Markdown 格式化
步骤 3：创建本地文件
3.1 文件存放位置
目录：/Users/su/code/holdings-monitor-web/docs/knowledge-points/
文件名示例：g6s-1-1-integer-division.md
3.2 文件名规范
格式：{grade}-{section}-{title-slug}.md
g6s= Grade 6, Second semester（六年级上）1-1= Chapter 1, Section 1integer-division= 英文标题（方便检索）
3.3 内容结构（Markdown）
# 一、整数和自然数
## 1.1.1 整数
- 定义
- 分类
- 特点
## 1.1.2 自然数
- 定义
- 注意事项
---
# 二、整除的意义
## 2.1 整除的定义
## 2.2 整除的三个必要条件
## 2.3 整除与除尽的区别
| 概念 | 被除数 | 除数 | 商 | 余数 |
| :--- | :---: | :---: | :---: | :---: |
| 整除 | 整数 | 整数 | 整数 | 0 |
| 除尽 | 不一定是整数 | 不一定是整数 | 有限小数 | 0 |
---
# 三、因数和倍数
# 四、奇数和偶数
# 五、整除的特征
# 六、历史与发展
# 七、常见错误辨析
步骤 4：更新数据库
4.1 数据库表结构
表名：knowledge_points
| 字段名 | 类型 | 说明 | |--------|------|------| | id | text | 唯一标识（如 kp-001） | | chapter | text | 章节名（如 第一章） | | section | text | 小节名（如 数的整除） | | title | text | 标题（如 1.1 整数和整除） | | content | text | 内容（Markdown 格式） | | keywords | text[] | 关键词数组 | | grade | text | 年级（如 六年级上） | | created_at | timestamptz | 创建时间 | | updated_at | timestamptz | 更新时间 |
4.2 SQL 更新脚本
文件位置：supabase/migrations/update_kp001_content.sql
脚本示例：
UPDATE knowledge_points
SET content = e'# 一、整数和自然数\n\n### 1.1.1 整数\n...完整的 Markdown 内容...'
WHERE id = 'kp-001';
执行命令：
/tmp/supabase db query --linked -f supabase/migrations/update_kp001_content.sql
步骤 5：前端渲染
5.1 组件位置
文件：/Users/su/code/holdings-monitor-web/components/KnowledgePointDetail.tsx
5.2 依赖安装
npm install react-markdown remark-gfm --save
5.3 核心代码逻辑
5.3.1 导入依赖
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'; // 支持表格、删除线等 GitHub Flavored Markdown
5.3.2 Markdown 检测函数
const isMarkdown = (content: string): boolean => {
if (!content) return false;
const trimmed = content.trim();
return trimmed.startsWith('#') ||
trimmed.startsWith('```') ||
trimmed.includes('##') ||
trimmed.includes('**') ||
trimmed.includes('| ');
};
5.3.3 Markdown 渲染函数
const renderMarkdown = (content: string) => {
return (
<ReactMarkdown
remarkPlugins={[remarkGfm]} // 启用 GFM 插件
components={{
h1: ({ ...props }) => <h1 className="text-2xl font-bold..." {...props} />,
h2: ({ ...props }) => <h2 className="text-xl font-bold..." {...props} />,
h3: ({ ...props }) => <h3 className="text-lg font-semibold..." {...props} />,
p: ({ ...props }) => <p className="mb-4 text-gray-700 leading-relaxed" {...props} />,
table: ({ ...props }) => <div className="overflow-x-auto mb-4"><table className="border-collapse w-full" {...props} /></div>,
thead: ({ ...props }) => <thead className="bg-gray-100" {...props} />,
th: ({ ...props }) => <th className="border border-gray-300 px-4 py-2 text-left font-semibold" {...props} />,
td: ({ ...props }) => <td className="border border-gray-300 px-4 py-2" {...props} />,
tr: ({ ...props }) => <tr className="even:bg-gray-50" {...props} />,
// ... 其他组件样式
}}
>
{content}
</ReactMarkdown>
);
};
5.3.4 渲染逻辑
const useMarkdownView = isMarkdown(point.content);
return (
<div>
{useMarkdownView ? (
<Card>
<CardContent className="p-6">
{renderMarkdown(point.content)}
</CardContent>
</Card>
) : (
// 旧的内容渲染方式
)}
</div>
);
📝 三、练习题创建流程
3.1 数据库表结构
表名：exercises
| 字段名 | 类型 | 说明 | |--------|------|------| | id | text | 唯一标识（如 ex-g6s-001-1） | | knowledge_point_id | text | 关联的知识点 ID（如 kp-001） | | question | text | 题目 | | options | text[] | 选项数组（可选） | | answer | text | 答案 | | explanation | text | 解析（可选） |
3.2 命名规范
格式：ex-{grade}-{kp-id}-{num}
ex-g6s-001-1= 六年级上、kp-001 知识点、第 1 题
3.3 插入 SQL 示例
INSERT INTO exercises (id, knowledge_point_id, question, options, answer, explanation) VALUES
('ex-g6s-001-1', 'kp-001', '下列哪些数是整数？', ARRAY['1.5', '0', '-3', 'π'], '0, -3', '整数包括正整数、零和负整数。'),
('ex-g6s-001-2', 'kp-001', '15 能被 3 整除吗？', ARRAY['能', '不能'], '能', '15 ÷ 3 = 5，商是整数且余数为 0。');
🎯 四、完整命令列表
开发相关
npm run dev # 启动开发服务器
npm run build # 构建生产版本
npm run lint # 代码检查
数据库相关
# 执行 SQL 迁移脚本
/tmp/supabase db query --linked -f supabase/migrations/your_script.sql
# 查询数据
/tmp/supabase db query --linked "SELECT * FROM knowledge_points"
# 连接项目（首次使用）
/tmp/supabase link --project-ref <project-ref>
📌 五、关键注意事项
-
Markdown 格式规范
- 使用标准的 GitHub Flavored Markdown 语法
- 表格使用
|和---分隔 - 标题层级清晰（#、##、###）
-
数据库字符转义
- 使用
e'...'语法支持多行字符串 - 转义单引号：
'→'' - 转义反斜杠：
\→\\
- 使用
-
ID 命名唯一性
- 知识点 ID：
kp-001, kp-002, ... - 练习题 ID：
ex-g6s-001-1, ex-g6s-001-2, ... - 确保每个 ID 全局唯一
- 知识点 ID：
-
时区处理
- 所有时间相关操作使用北京时间（UTC+8）
- 日期计算时需要进行时区转换
📊 六、项目目录结构
holdings-monitor-web/
├── app/ # Next.js App Router
│ ├── learning/ # 学习页面
│ │ └── page.tsx
│ └── api/ # API 路由
├── components/ # React 组件
│ └── KnowledgePointDetail.tsx # 知识点详情组件
├── lib/ # 工具库
│ ├── supabase.ts # Supabase 客户端
│ └── types.ts # TypeScript 类型
├── docs/ # 文档
│ └── knowledge-points/ # 知识点 Markdown 文件
└── supabase/ # 数据库
└── migrations/ # SQL 迁移脚本
最后更新：2026-05-04