|
|
@@ -0,0 +1,950 @@
|
|
|
1
|
+# 插入 Block 功能完整指南
|
|
|
2
|
+
|
|
|
3
|
+> **状态**:✅ 已完成并验收通过
|
|
|
4
|
+> **实现日期**:2026-07-10
|
|
|
5
|
+> **版本**:v1.0
|
|
|
6
|
+
|
|
|
7
|
+---
|
|
|
8
|
+
|
|
|
9
|
+## 📋 目录
|
|
|
10
|
+
|
|
|
11
|
+- [1. 快速开始](#1-快速开始)
|
|
|
12
|
+- [2. API 参考](#2-api-参考)
|
|
|
13
|
+- [3. 实现详解](#3-实现详解)
|
|
|
14
|
+- [4. 前端集成](#4-前端集成)
|
|
|
15
|
+- [5. 测试验证](#5-测试验证)
|
|
|
16
|
+- [6. 实现总结](#6-实现总结)
|
|
|
17
|
+
|
|
|
18
|
+---
|
|
|
19
|
+
|
|
|
20
|
+# 1. 快速开始
|
|
|
21
|
+
|
|
|
22
|
+## 🚀 最简单的使用方式
|
|
|
23
|
+
|
|
|
24
|
+### API 端点
|
|
|
25
|
+```
|
|
|
26
|
+POST /api/v1/documents/{documentId}/blocks
|
|
|
27
|
+```
|
|
|
28
|
+
|
|
|
29
|
+### 插入段落(最简单)
|
|
|
30
|
+
|
|
|
31
|
+```javascript
|
|
|
32
|
+// 在某个 block 后插入段落
|
|
|
33
|
+await fetch(`/api/v1/documents/${docId}/blocks`, {
|
|
|
34
|
+ method: 'POST',
|
|
|
35
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
36
|
+ body: JSON.stringify({
|
|
|
37
|
+ type: 'paragraph',
|
|
|
38
|
+ content: '这是新段落内容',
|
|
|
39
|
+ after_block_id: 'block-p-100'
|
|
|
40
|
+ })
|
|
|
41
|
+});
|
|
|
42
|
+```
|
|
|
43
|
+
|
|
|
44
|
+### 插入标题(必须指定 level)
|
|
|
45
|
+
|
|
|
46
|
+```javascript
|
|
|
47
|
+// 插入 H2 标题
|
|
|
48
|
+await fetch(`/api/v1/documents/${docId}/blocks`, {
|
|
|
49
|
+ method: 'POST',
|
|
|
50
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
51
|
+ body: JSON.stringify({
|
|
|
52
|
+ type: 'heading',
|
|
|
53
|
+ level: 2, // ⚠️ 必填:1-6
|
|
|
54
|
+ content: '第二章 项目背景',
|
|
|
55
|
+ word_style: 'Heading 2',
|
|
|
56
|
+ after_block_id: 'block-h1-0'
|
|
|
57
|
+ })
|
|
|
58
|
+});
|
|
|
59
|
+```
|
|
|
60
|
+
|
|
|
61
|
+### ⚠️ 重要规则
|
|
|
62
|
+
|
|
|
63
|
+| 规则 | 说明 |
|
|
|
64
|
+|-----|------|
|
|
|
65
|
+| ✅ **必填字段** | `type`、`content` 必须提供 |
|
|
|
66
|
+| ⭐ **level 参数** | heading 必填(1-6),其他类型可省略(默认 0) |
|
|
|
67
|
+| ❌ **不要提供** | `id`、`index`、`block_order` 由后端自动生成 |
|
|
|
68
|
+| 📍 **插入位置** | `after_block_id` 指定插入位置,null = 末尾 |
|
|
|
69
|
+
|
|
|
70
|
+---
|
|
|
71
|
+
|
|
|
72
|
+# 2. API 参考
|
|
|
73
|
+
|
|
|
74
|
+## 📌 API 端点
|
|
|
75
|
+
|
|
|
76
|
+```
|
|
|
77
|
+POST /api/v1/documents/{documentId}/blocks
|
|
|
78
|
+```
|
|
|
79
|
+
|
|
|
80
|
+### 路径参数
|
|
|
81
|
+
|
|
|
82
|
+| 参数 | 类型 | 必填 | 说明 | 示例 |
|
|
|
83
|
+|------|------|------|------|------|
|
|
|
84
|
+| `documentId` | string | ✅ | 文档 ID | `"doc-abc123456789"` |
|
|
|
85
|
+
|
|
|
86
|
+---
|
|
|
87
|
+
|
|
|
88
|
+## 📝 请求参数
|
|
|
89
|
+
|
|
|
90
|
+### 前端需要提供的参数
|
|
|
91
|
+
|
|
|
92
|
+| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
|
|
93
|
+|------|------|------|--------|------|
|
|
|
94
|
+| `type` | string | ✅ | - | Block 类型:`heading`, `paragraph`, `table`, `image`, `toc` |
|
|
|
95
|
+| `content` | string/dict/list | ✅ | - | Block 内容(格式因类型而异) |
|
|
|
96
|
+| `level` | int | ⭐ | `0` | `heading` 必填(1-6),其他类型固定为 0 |
|
|
|
97
|
+| `word_style` | string | ❌ | `""` | Word 样式名(如 `"Heading 1"`, `"Normal"`) |
|
|
|
98
|
+| `style` | dict | ❌ | `{}` | 自定义样式 JSON |
|
|
|
99
|
+| `metadata` | dict | ❌ | `{}` | 元数据(如 `parent_heading_id`) |
|
|
|
100
|
+| `after_block_id` | string/null | ❌ | `null` | 在哪个 block 后插入(null = 末尾) |
|
|
|
101
|
+
|
|
|
102
|
+> ⚠️ **重要**:`id`、`index`、`block_order` 由后端自动生成,前端**不需要**也**不应该**提供!
|
|
|
103
|
+
|
|
|
104
|
+---
|
|
|
105
|
+
|
|
|
106
|
+## 🎯 level 参数详解
|
|
|
107
|
+
|
|
|
108
|
+### 必填条件
|
|
|
109
|
+
|
|
|
110
|
+| Block 类型 | level 取值 | 是否必填 | 说明 |
|
|
|
111
|
+|-----------|-----------|---------|------|
|
|
|
112
|
+| `heading` | `1` - `6` | ✅ 必填 | 对应 H1 - H6 标题 |
|
|
|
113
|
+| `paragraph` | `0` | ❌ 可省略 | 固定值(默认 0) |
|
|
|
114
|
+| `table` | `0` | ❌ 可省略 | 固定值(默认 0) |
|
|
|
115
|
+| `image` | `0` | ❌ 可省略 | 固定值(默认 0) |
|
|
|
116
|
+| `toc` | `0` | ❌ 可省略 | 固定值(默认 0) |
|
|
|
117
|
+
|
|
|
118
|
+### 示例
|
|
|
119
|
+
|
|
|
120
|
+```json
|
|
|
121
|
+// ✅ 正确:heading 类型必须指定 level
|
|
|
122
|
+{
|
|
|
123
|
+ "type": "heading",
|
|
|
124
|
+ "level": 2,
|
|
|
125
|
+ "content": "第一节"
|
|
|
126
|
+}
|
|
|
127
|
+
|
|
|
128
|
+// ✅ 正确:paragraph 类型可以省略 level
|
|
|
129
|
+{
|
|
|
130
|
+ "type": "paragraph",
|
|
|
131
|
+ "content": "段落内容"
|
|
|
132
|
+}
|
|
|
133
|
+
|
|
|
134
|
+// ❌ 错误:heading 类型未指定 level
|
|
|
135
|
+{
|
|
|
136
|
+ "type": "heading",
|
|
|
137
|
+ "content": "标题"
|
|
|
138
|
+}
|
|
|
139
|
+```
|
|
|
140
|
+
|
|
|
141
|
+---
|
|
|
142
|
+
|
|
|
143
|
+## 📊 响应格式
|
|
|
144
|
+
|
|
|
145
|
+### ✅ 成功响应
|
|
|
146
|
+
|
|
|
147
|
+```json
|
|
|
148
|
+{
|
|
|
149
|
+ "code": 0,
|
|
|
150
|
+ "message": "success",
|
|
|
151
|
+ "data": {
|
|
|
152
|
+ "blockId": "block-p-250",
|
|
|
153
|
+ "message": "Block created successfully"
|
|
|
154
|
+ }
|
|
|
155
|
+}
|
|
|
156
|
+```
|
|
|
157
|
+
|
|
|
158
|
+### ❌ 错误响应
|
|
|
159
|
+
|
|
|
160
|
+#### heading 未指定 level
|
|
|
161
|
+```json
|
|
|
162
|
+{
|
|
|
163
|
+ "code": 400,
|
|
|
164
|
+ "message": "heading 的 level 必须是 1-6"
|
|
|
165
|
+}
|
|
|
166
|
+```
|
|
|
167
|
+
|
|
|
168
|
+#### after_block_id 不存在
|
|
|
169
|
+```json
|
|
|
170
|
+{
|
|
|
171
|
+ "code": 404,
|
|
|
172
|
+ "message": "Block not found: block-p-999"
|
|
|
173
|
+}
|
|
|
174
|
+```
|
|
|
175
|
+
|
|
|
176
|
+---
|
|
|
177
|
+
|
|
|
178
|
+## 📦 content 格式详解
|
|
|
179
|
+
|
|
|
180
|
+### 1. 标题和段落 (heading / paragraph)
|
|
|
181
|
+
|
|
|
182
|
+#### 格式 A:纯文本字符串
|
|
|
183
|
+```json
|
|
|
184
|
+{
|
|
|
185
|
+ "type": "paragraph",
|
|
|
186
|
+ "content": "这是一段普通文本"
|
|
|
187
|
+}
|
|
|
188
|
+```
|
|
|
189
|
+
|
|
|
190
|
+#### 格式 B:富文本数组
|
|
|
191
|
+```json
|
|
|
192
|
+{
|
|
|
193
|
+ "type": "heading",
|
|
|
194
|
+ "content": [
|
|
|
195
|
+ {"text": "第一章 ", "style": {}},
|
|
|
196
|
+ {"text": "重要通知", "style": {"bold": true, "color": "FF0000"}}
|
|
|
197
|
+ ]
|
|
|
198
|
+}
|
|
|
199
|
+```
|
|
|
200
|
+
|
|
|
201
|
+### 2. 表格 (table)
|
|
|
202
|
+
|
|
|
203
|
+```json
|
|
|
204
|
+{
|
|
|
205
|
+ "type": "table",
|
|
|
206
|
+ "content": {
|
|
|
207
|
+ "rows": [
|
|
|
208
|
+ {
|
|
|
209
|
+ "cells": [
|
|
|
210
|
+ {"text": "姓名", "rowspan": 1, "colspan": 1, "col_index": 0, "style": {"bold": true}},
|
|
|
211
|
+ {"text": "年龄", "rowspan": 1, "colspan": 1, "col_index": 1, "style": {}}
|
|
|
212
|
+ ]
|
|
|
213
|
+ }
|
|
|
214
|
+ ]
|
|
|
215
|
+ }
|
|
|
216
|
+}
|
|
|
217
|
+```
|
|
|
218
|
+
|
|
|
219
|
+### 3. 图片 (image)
|
|
|
220
|
+
|
|
|
221
|
+```json
|
|
|
222
|
+{
|
|
|
223
|
+ "type": "image",
|
|
|
224
|
+ "content": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
|
|
|
225
|
+}
|
|
|
226
|
+```
|
|
|
227
|
+
|
|
|
228
|
+---
|
|
|
229
|
+
|
|
|
230
|
+## 🎨 样式属性参考
|
|
|
231
|
+
|
|
|
232
|
+### 段落/标题级样式(`style` 字段)
|
|
|
233
|
+
|
|
|
234
|
+| 属性 | 类型 | 说明 | 示例 |
|
|
|
235
|
+|------|------|------|------|
|
|
|
236
|
+| `font_name` | string | 字体名称 | `"微软雅黑"` |
|
|
|
237
|
+| `font_size` | number | 字号(磅) | `14.0` |
|
|
|
238
|
+| `bold` | boolean | 是否加粗 | `true` |
|
|
|
239
|
+| `italic` | boolean | 是否斜体 | `true` |
|
|
|
240
|
+| `underline` | boolean | 是否下划线 | `true` |
|
|
|
241
|
+| `strike` | boolean | 是否删除线 | `true` |
|
|
|
242
|
+| `color` | string | 文字颜色(十六进制) | `"FF0000"` |
|
|
|
243
|
+| `align` | string | 对齐方式 | `"left"`, `"center"`, `"right"`, `"justify"` |
|
|
|
244
|
+
|
|
|
245
|
+### 图片样式
|
|
|
246
|
+
|
|
|
247
|
+| 属性 | 类型 | 说明 | 示例 |
|
|
|
248
|
+|------|------|------|------|
|
|
|
249
|
+| `width` | number | 宽度值 | `10.0` |
|
|
|
250
|
+| `height` | number | 高度值 | `7.0` |
|
|
|
251
|
+| `unit` | string | 单位 | `"cm"`, `"inch"` |
|
|
|
252
|
+| `align` | string | 对齐方式 | `"left"`, `"center"`, `"right"` |
|
|
|
253
|
+
|
|
|
254
|
+---
|
|
|
255
|
+
|
|
|
256
|
+## 🔧 常用 Word 样式名
|
|
|
257
|
+
|
|
|
258
|
+```javascript
|
|
|
259
|
+// 标题
|
|
|
260
|
+word_style: 'Heading 1' // H1
|
|
|
261
|
+word_style: 'Heading 2' // H2
|
|
|
262
|
+word_style: 'Heading 3' // H3
|
|
|
263
|
+
|
|
|
264
|
+// 段落
|
|
|
265
|
+word_style: 'Normal' // 正文
|
|
|
266
|
+word_style: 'Body Text' // 正文
|
|
|
267
|
+
|
|
|
268
|
+// 表格
|
|
|
269
|
+word_style: 'Table Grid' // 表格网格
|
|
|
270
|
+```
|
|
|
271
|
+
|
|
|
272
|
+---
|
|
|
273
|
+
|
|
|
274
|
+## 📚 完整示例
|
|
|
275
|
+
|
|
|
276
|
+### 示例 1:插入普通段落
|
|
|
277
|
+
|
|
|
278
|
+```json
|
|
|
279
|
+POST /api/v1/documents/doc-abc123/blocks
|
|
|
280
|
+
|
|
|
281
|
+{
|
|
|
282
|
+ "type": "paragraph",
|
|
|
283
|
+ "content": "这是新段落",
|
|
|
284
|
+ "after_block_id": "block-p-200"
|
|
|
285
|
+}
|
|
|
286
|
+```
|
|
|
287
|
+
|
|
|
288
|
+### 示例 2:插入 H2 标题
|
|
|
289
|
+
|
|
|
290
|
+```json
|
|
|
291
|
+POST /api/v1/documents/doc-abc123/blocks
|
|
|
292
|
+
|
|
|
293
|
+{
|
|
|
294
|
+ "type": "heading",
|
|
|
295
|
+ "level": 2,
|
|
|
296
|
+ "content": "1.2 项目背景",
|
|
|
297
|
+ "word_style": "Heading 2",
|
|
|
298
|
+ "metadata": {
|
|
|
299
|
+ "parent_heading_id": "block-h1-0"
|
|
|
300
|
+ },
|
|
|
301
|
+ "after_block_id": "block-h2-0"
|
|
|
302
|
+}
|
|
|
303
|
+```
|
|
|
304
|
+
|
|
|
305
|
+### 示例 3:插入富文本段落
|
|
|
306
|
+
|
|
|
307
|
+```json
|
|
|
308
|
+POST /api/v1/documents/doc-abc123/blocks
|
|
|
309
|
+
|
|
|
310
|
+{
|
|
|
311
|
+ "type": "paragraph",
|
|
|
312
|
+ "content": [
|
|
|
313
|
+ {"text": "项目位于 ", "style": {}},
|
|
|
314
|
+ {"text": "陕西省延安市", "style": {"bold": true, "color": "FF0000"}},
|
|
|
315
|
+ {"text": ",总投资 ", "style": {}},
|
|
|
316
|
+ {"text": "5000 万元", "style": {"bold": true, "color": "0000FF"}}
|
|
|
317
|
+ ],
|
|
|
318
|
+ "word_style": "Normal",
|
|
|
319
|
+ "after_block_id": "block-p-100"
|
|
|
320
|
+}
|
|
|
321
|
+```
|
|
|
322
|
+
|
|
|
323
|
+### 示例 4:插入到文档末尾
|
|
|
324
|
+
|
|
|
325
|
+```json
|
|
|
326
|
+POST /api/v1/documents/doc-abc123/blocks
|
|
|
327
|
+
|
|
|
328
|
+{
|
|
|
329
|
+ "type": "paragraph",
|
|
|
330
|
+ "content": "文档结尾的段落",
|
|
|
331
|
+ "after_block_id": null
|
|
|
332
|
+}
|
|
|
333
|
+```
|
|
|
334
|
+
|
|
|
335
|
+### 示例 5:插入表格
|
|
|
336
|
+
|
|
|
337
|
+```json
|
|
|
338
|
+POST /api/v1/documents/doc-abc123/blocks
|
|
|
339
|
+
|
|
|
340
|
+{
|
|
|
341
|
+ "type": "table",
|
|
|
342
|
+ "content": {
|
|
|
343
|
+ "rows": [
|
|
|
344
|
+ {
|
|
|
345
|
+ "cells": [
|
|
|
346
|
+ {"text": "姓名", "rowspan": 1, "colspan": 1, "col_index": 0, "style": {"bold": true}},
|
|
|
347
|
+ {"text": "年龄", "rowspan": 1, "colspan": 1, "col_index": 1, "style": {"bold": true}}
|
|
|
348
|
+ ]
|
|
|
349
|
+ },
|
|
|
350
|
+ {
|
|
|
351
|
+ "cells": [
|
|
|
352
|
+ {"text": "张三", "rowspan": 1, "colspan": 1, "col_index": 0, "style": {}},
|
|
|
353
|
+ {"text": "30", "rowspan": 1, "colspan": 1, "col_index": 1, "style": {}}
|
|
|
354
|
+ ]
|
|
|
355
|
+ }
|
|
|
356
|
+ ]
|
|
|
357
|
+ },
|
|
|
358
|
+ "word_style": "Table Grid",
|
|
|
359
|
+ "metadata": {
|
|
|
360
|
+ "cols": 2,
|
|
|
361
|
+ "rows": 2
|
|
|
362
|
+ },
|
|
|
363
|
+ "after_block_id": "block-p-300"
|
|
|
364
|
+}
|
|
|
365
|
+```
|
|
|
366
|
+
|
|
|
367
|
+---
|
|
|
368
|
+
|
|
|
369
|
+# 3. 实现详解
|
|
|
370
|
+
|
|
|
371
|
+## 🔍 核心概念
|
|
|
372
|
+
|
|
|
373
|
+### 后端自动生成的字段
|
|
|
374
|
+
|
|
|
375
|
+#### 1. `id` - Block ID
|
|
|
376
|
+
|
|
|
377
|
+**生成规则:**根据类型、级别和 index 自动生成
|
|
|
378
|
+
|
|
|
379
|
+| 类型 | ID 格式 | 示例 |
|
|
|
380
|
+|------|---------|------|
|
|
|
381
|
+| 标题 | `block-h{level}-{index}` | `block-h2-100` |
|
|
|
382
|
+| 段落 | `block-p-{index}` | `block-p-200` |
|
|
|
383
|
+| 表格 | `block-table-{index}` | `block-table-0` |
|
|
|
384
|
+| 图片 | `block-img-{index}` | `block-img-50` |
|
|
|
385
|
+| 目录 | `block-toc-{index}` | `block-toc-0` |
|
|
|
386
|
+
|
|
|
387
|
+#### 2. `index` - 同类型同级别序号
|
|
|
388
|
+
|
|
|
389
|
+**说明:**用于区分同类型同级别的 blocks,采用**稀疏排序**
|
|
|
390
|
+
|
|
|
391
|
+**计算方式:**
|
|
|
392
|
+1. 查找前后两个**同类型同级别**的 block
|
|
|
393
|
+2. 计算它们的 `index` 中间值
|
|
|
394
|
+3. 如果没有后续 block,则追加(最大值 + 100)
|
|
|
395
|
+
|
|
|
396
|
+**不同类型独立计数:**
|
|
|
397
|
+```
|
|
|
398
|
+H1 标题:index = 0, 100, 200...(独立)
|
|
|
399
|
+H2 标题:index = 0, 50, 100, 200...(独立)
|
|
|
400
|
+段落: index = 0, 100, 200...(独立)
|
|
|
401
|
+```
|
|
|
402
|
+
|
|
|
403
|
+#### 3. `block_order` - 文档全局位置
|
|
|
404
|
+
|
|
|
405
|
+**说明:**决定 blocks 在文档中的显示顺序(所有类型共享同一序列)
|
|
|
406
|
+
|
|
|
407
|
+**计算方式:**
|
|
|
408
|
+1. 根据 `after_block_id` 查询前一个 block 的 `block_order`
|
|
|
409
|
+2. 查询下一个 block 的 `block_order`
|
|
|
410
|
+3. 计算中间值
|
|
|
411
|
+4. 如果间隙不足(≤1),触发局部重排
|
|
|
412
|
+
|
|
|
413
|
+---
|
|
|
414
|
+
|
|
|
415
|
+## 🔑 关键区别:index vs block_order
|
|
|
416
|
+
|
|
|
417
|
+| 字段 | 作用域 | 用途 | 稀疏排序方式 |
|
|
|
418
|
+|------|--------|------|-------------|
|
|
|
419
|
+| `index` | 局部(同类型同级别) | 生成 Block ID,区分同类 blocks | 在前后同类 block 的 index 之间插入 |
|
|
|
420
|
+| `block_order` | 全局(所有 blocks) | 决定文档显示顺序 | 在前后任意 block 的 block_order 之间插入 |
|
|
|
421
|
+
|
|
|
422
|
+---
|
|
|
423
|
+
|
|
|
424
|
+## 📐 稀疏排序详解
|
|
|
425
|
+
|
|
|
426
|
+### 基本原理
|
|
|
427
|
+
|
|
|
428
|
+**传统排序的问题:**
|
|
|
429
|
+```
|
|
|
430
|
+初始:1, 2, 3, 4, 5
|
|
|
431
|
+在 2 后插入:需要更新 3, 4, 5 → 4, 5, 6 ❌ O(n) 操作
|
|
|
432
|
+```
|
|
|
433
|
+
|
|
|
434
|
+**稀疏排序的优势:**
|
|
|
435
|
+```
|
|
|
436
|
+初始:100, 200, 300, 400, 500
|
|
|
437
|
+在 200 后插入:250 ✅ O(1) 操作
|
|
|
438
|
+结果:100, 200, 250(新), 300, 400, 500
|
|
|
439
|
+```
|
|
|
440
|
+
|
|
|
441
|
+### 完整插入示例
|
|
|
442
|
+
|
|
|
443
|
+#### 初始文档结构
|
|
|
444
|
+
|
|
|
445
|
+```
|
|
|
446
|
+┌─────────────────────┬──────────┬────────────┐
|
|
|
447
|
+│ Block │ index │ block_order│
|
|
|
448
|
+├─────────────────────┼──────────┼────────────┤
|
|
|
449
|
+│ H1: 第一章 │ 0 │ 100 │
|
|
|
450
|
+│ H2: 1.1 概述 │ 0 │ 200 │
|
|
|
451
|
+│ 段落1 │ 0 │ 300 │
|
|
|
452
|
+│ H2: 1.2 背景 │ 100 │ 400 │
|
|
|
453
|
+│ 段落2 │ 100 │ 500 │
|
|
|
454
|
+│ H1: 第二章 │ 100 │ 600 │
|
|
|
455
|
+└─────────────────────┴──────────┴────────────┘
|
|
|
456
|
+```
|
|
|
457
|
+
|
|
|
458
|
+#### 场景:在段落1后插入 H2 标题
|
|
|
459
|
+
|
|
|
460
|
+**前端请求:**
|
|
|
461
|
+```json
|
|
|
462
|
+{
|
|
|
463
|
+ "type": "heading",
|
|
|
464
|
+ "level": 2,
|
|
|
465
|
+ "content": "1.1.1 新增内容",
|
|
|
466
|
+ "word_style": "Heading 2",
|
|
|
467
|
+ "after_block_id": "block-p-0"
|
|
|
468
|
+}
|
|
|
469
|
+```
|
|
|
470
|
+
|
|
|
471
|
+**后端计算过程:**
|
|
|
472
|
+
|
|
|
473
|
+**步骤 1:计算 index**
|
|
|
474
|
+```python
|
|
|
475
|
+# 查找前后两个 H2 标题
|
|
|
476
|
+prev_h2_index = 0 # H2: 1.1 概述
|
|
|
477
|
+next_h2_index = 100 # H2: 1.2 背景
|
|
|
478
|
+
|
|
|
479
|
+# 计算中间值
|
|
|
480
|
+new_index = (0 + 100) // 2 # = 50 ✅
|
|
|
481
|
+```
|
|
|
482
|
+
|
|
|
483
|
+**步骤 2:计算 block_order**
|
|
|
484
|
+```python
|
|
|
485
|
+# 查找前后两个 block
|
|
|
486
|
+after_order = 300 # 段落1
|
|
|
487
|
+next_order = 400 # H2: 1.2 背景
|
|
|
488
|
+
|
|
|
489
|
+# 计算中间值
|
|
|
490
|
+new_block_order = (300 + 400) // 2 # = 350 ✅
|
|
|
491
|
+```
|
|
|
492
|
+
|
|
|
493
|
+**步骤 3:生成 ID**
|
|
|
494
|
+```python
|
|
|
495
|
+new_id = f"block-h{level}-{index}" # = "block-h2-50"
|
|
|
496
|
+```
|
|
|
497
|
+
|
|
|
498
|
+**插入后的文档结构:**
|
|
|
499
|
+
|
|
|
500
|
+```
|
|
|
501
|
+┌─────────────────────┬──────────┬────────────┐
|
|
|
502
|
+│ Block │ index │ block_order│
|
|
|
503
|
+├─────────────────────┼──────────┼────────────┤
|
|
|
504
|
+│ H1: 第一章 │ 0 │ 100 │
|
|
|
505
|
+│ H2: 1.1 概述 │ 0 │ 200 │
|
|
|
506
|
+│ 段落1 │ 0 │ 300 │
|
|
|
507
|
+│ H2: 新增内容 🆕 │ 50 │ 350 │ ← 新插入
|
|
|
508
|
+│ H2: 1.2 背景 │ 100 │ 400 │
|
|
|
509
|
+│ 段落2 │ 100 │ 500 │
|
|
|
510
|
+│ H1: 第二章 │ 100 │ 600 │
|
|
|
511
|
+└─────────────────────┴──────────┴────────────┘
|
|
|
512
|
+```
|
|
|
513
|
+
|
|
|
514
|
+**关键点:**
|
|
|
515
|
+- ✅ `index = 50`:在两个 H2 的 index(0, 100)之间
|
|
|
516
|
+- ✅ `block_order = 350`:在两个 block 的 order(300, 400)之间
|
|
|
517
|
+- ✅ `id = "block-h2-50"`:根据规则自动生成
|
|
|
518
|
+- ✅ **无需更新其他 blocks**:稀疏排序的核心优势!
|
|
|
519
|
+
|
|
|
520
|
+---
|
|
|
521
|
+
|
|
|
522
|
+## 🔧 实现代码
|
|
|
523
|
+
|
|
|
524
|
+### 后端计算 index
|
|
|
525
|
+
|
|
|
526
|
+```python
|
|
|
527
|
+def calculate_index_for_insert(
|
|
|
528
|
+ db: ContentDB,
|
|
|
529
|
+ after_block_id: str,
|
|
|
530
|
+ new_type: str,
|
|
|
531
|
+ new_level: int = 0
|
|
|
532
|
+) -> int:
|
|
|
533
|
+ """计算插入 block 的 index(稀疏排序)"""
|
|
|
534
|
+
|
|
|
535
|
+ # 1. 获取 after_block 的 block_order
|
|
|
536
|
+ after_block = db.get_block_by_id(after_block_id)
|
|
|
537
|
+ after_order = after_block['block_order']
|
|
|
538
|
+
|
|
|
539
|
+ # 2. 查找下一个同类型同级别的 block
|
|
|
540
|
+ if new_type == 'heading':
|
|
|
541
|
+ cursor = db.conn.execute("""
|
|
|
542
|
+ SELECT index FROM document_blocks
|
|
|
543
|
+ WHERE type = ? AND level = ? AND block_order > ?
|
|
|
544
|
+ ORDER BY block_order LIMIT 1
|
|
|
545
|
+ """, (new_type, new_level, after_order))
|
|
|
546
|
+ else:
|
|
|
547
|
+ cursor = db.conn.execute("""
|
|
|
548
|
+ SELECT index FROM document_blocks
|
|
|
549
|
+ WHERE type = ? AND block_order > ?
|
|
|
550
|
+ ORDER BY block_order LIMIT 1
|
|
|
551
|
+ """, (new_type, after_order))
|
|
|
552
|
+
|
|
|
553
|
+ next_row = cursor.fetchone()
|
|
|
554
|
+
|
|
|
555
|
+ if next_row:
|
|
|
556
|
+ next_index = next_row['index']
|
|
|
557
|
+ # 查找前一个同类型同级别的 block
|
|
|
558
|
+ # ... 省略详细代码
|
|
|
559
|
+ new_index = (prev_index + next_index) // 2
|
|
|
560
|
+ else:
|
|
|
561
|
+ # 没有下一个同类 block,追加到最后
|
|
|
562
|
+ max_index = db.get_max_index(new_type, new_level)
|
|
|
563
|
+ new_index = max_index + 100
|
|
|
564
|
+
|
|
|
565
|
+ return new_index
|
|
|
566
|
+```
|
|
|
567
|
+
|
|
|
568
|
+### 后端计算 block_order
|
|
|
569
|
+
|
|
|
570
|
+```python
|
|
|
571
|
+def calculate_block_order_for_insert(
|
|
|
572
|
+ db: ContentDB,
|
|
|
573
|
+ after_block_id: str = None
|
|
|
574
|
+) -> int:
|
|
|
575
|
+ """计算插入 block 的 block_order(稀疏排序)"""
|
|
|
576
|
+
|
|
|
577
|
+ if after_block_id:
|
|
|
578
|
+ after_block = db.get_block_by_id(after_block_id)
|
|
|
579
|
+ after_order = after_block['block_order']
|
|
|
580
|
+
|
|
|
581
|
+ # 查询下一个 block
|
|
|
582
|
+ cursor = db.conn.execute("""
|
|
|
583
|
+ SELECT block_order FROM document_blocks
|
|
|
584
|
+ WHERE block_order > ?
|
|
|
585
|
+ ORDER BY block_order LIMIT 1
|
|
|
586
|
+ """, (after_order,))
|
|
|
587
|
+
|
|
|
588
|
+ next_row = cursor.fetchone()
|
|
|
589
|
+
|
|
|
590
|
+ if next_row:
|
|
|
591
|
+ next_order = next_row['block_order']
|
|
|
592
|
+ return (after_order + next_order) // 2
|
|
|
593
|
+ else:
|
|
|
594
|
+ return after_order + 100
|
|
|
595
|
+ else:
|
|
|
596
|
+ # 插入到文档末尾
|
|
|
597
|
+ max_order = db.get_max_block_order()
|
|
|
598
|
+ return max_order + 100
|
|
|
599
|
+```
|
|
|
600
|
+
|
|
|
601
|
+---
|
|
|
602
|
+
|
|
|
603
|
+# 4. 前端集成
|
|
|
604
|
+
|
|
|
605
|
+## 💡 React Hook 示例
|
|
|
606
|
+
|
|
|
607
|
+```typescript
|
|
|
608
|
+import { useState } from 'react';
|
|
|
609
|
+
|
|
|
610
|
+interface BlockCreateRequest {
|
|
|
611
|
+ type: 'heading' | 'paragraph' | 'table' | 'image' | 'toc';
|
|
|
612
|
+ level?: number;
|
|
|
613
|
+ content: string | any[] | any;
|
|
|
614
|
+ word_style?: string;
|
|
|
615
|
+ style?: any;
|
|
|
616
|
+ metadata?: any;
|
|
|
617
|
+ after_block_id?: string | null;
|
|
|
618
|
+}
|
|
|
619
|
+
|
|
|
620
|
+export function useBlockInsert(documentId: string) {
|
|
|
621
|
+ const [loading, setLoading] = useState(false);
|
|
|
622
|
+ const [error, setError] = useState<string | null>(null);
|
|
|
623
|
+
|
|
|
624
|
+ const insertBlock = async (block: BlockCreateRequest) => {
|
|
|
625
|
+ setLoading(true);
|
|
|
626
|
+ setError(null);
|
|
|
627
|
+
|
|
|
628
|
+ try {
|
|
|
629
|
+ const response = await fetch(`/api/v1/documents/${documentId}/blocks`, {
|
|
|
630
|
+ method: 'POST',
|
|
|
631
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
632
|
+ body: JSON.stringify(block)
|
|
|
633
|
+ });
|
|
|
634
|
+
|
|
|
635
|
+ const data = await response.json();
|
|
|
636
|
+
|
|
|
637
|
+ if (data.code !== 0) {
|
|
|
638
|
+ throw new Error(data.message);
|
|
|
639
|
+ }
|
|
|
640
|
+
|
|
|
641
|
+ return data.data.blockId;
|
|
|
642
|
+ } catch (err: any) {
|
|
|
643
|
+ setError(err.message);
|
|
|
644
|
+ throw err;
|
|
|
645
|
+ } finally {
|
|
|
646
|
+ setLoading(false);
|
|
|
647
|
+ }
|
|
|
648
|
+ };
|
|
|
649
|
+
|
|
|
650
|
+ return { insertBlock, loading, error };
|
|
|
651
|
+}
|
|
|
652
|
+
|
|
|
653
|
+// 使用示例
|
|
|
654
|
+function MyEditor() {
|
|
|
655
|
+ const { insertBlock, loading, error } = useBlockInsert('doc-abc123');
|
|
|
656
|
+
|
|
|
657
|
+ const handleInsertParagraph = async () => {
|
|
|
658
|
+ const blockId = await insertBlock({
|
|
|
659
|
+ type: 'paragraph',
|
|
|
660
|
+ content: '新段落',
|
|
|
661
|
+ after_block_id: 'block-p-100'
|
|
|
662
|
+ });
|
|
|
663
|
+ console.log('插入成功:', blockId);
|
|
|
664
|
+ };
|
|
|
665
|
+
|
|
|
666
|
+ const handleInsertHeading = async () => {
|
|
|
667
|
+ const blockId = await insertBlock({
|
|
|
668
|
+ type: 'heading',
|
|
|
669
|
+ level: 2, // ⚠️ 必填
|
|
|
670
|
+ content: '第二章',
|
|
|
671
|
+ word_style: 'Heading 2',
|
|
|
672
|
+ after_block_id: 'block-h1-0'
|
|
|
673
|
+ });
|
|
|
674
|
+ console.log('插入成功:', blockId);
|
|
|
675
|
+ };
|
|
|
676
|
+
|
|
|
677
|
+ return (
|
|
|
678
|
+ <div>
|
|
|
679
|
+ <button onClick={handleInsertParagraph} disabled={loading}>
|
|
|
680
|
+ 插入段落
|
|
|
681
|
+ </button>
|
|
|
682
|
+ <button onClick={handleInsertHeading} disabled={loading}>
|
|
|
683
|
+ 插入标题
|
|
|
684
|
+ </button>
|
|
|
685
|
+ {error && <div style={{color: 'red'}}>{error}</div>}
|
|
|
686
|
+ </div>
|
|
|
687
|
+ );
|
|
|
688
|
+}
|
|
|
689
|
+```
|
|
|
690
|
+
|
|
|
691
|
+---
|
|
|
692
|
+
|
|
|
693
|
+## 💡 Vue 3 Composable 示例
|
|
|
694
|
+
|
|
|
695
|
+```typescript
|
|
|
696
|
+import { ref } from 'vue';
|
|
|
697
|
+
|
|
|
698
|
+export function useBlockInsert(documentId: string) {
|
|
|
699
|
+ const loading = ref(false);
|
|
|
700
|
+ const error = ref<string | null>(null);
|
|
|
701
|
+
|
|
|
702
|
+ const insertBlock = async (block: any) => {
|
|
|
703
|
+ loading.value = true;
|
|
|
704
|
+ error.value = null;
|
|
|
705
|
+
|
|
|
706
|
+ try {
|
|
|
707
|
+ const response = await fetch(`/api/v1/documents/${documentId}/blocks`, {
|
|
|
708
|
+ method: 'POST',
|
|
|
709
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
710
|
+ body: JSON.stringify(block)
|
|
|
711
|
+ });
|
|
|
712
|
+
|
|
|
713
|
+ const data = await response.json();
|
|
|
714
|
+
|
|
|
715
|
+ if (data.code !== 0) {
|
|
|
716
|
+ throw new Error(data.message);
|
|
|
717
|
+ }
|
|
|
718
|
+
|
|
|
719
|
+ return data.data.blockId;
|
|
|
720
|
+ } catch (err: any) {
|
|
|
721
|
+ error.value = err.message;
|
|
|
722
|
+ throw err;
|
|
|
723
|
+ } finally {
|
|
|
724
|
+ loading.value = false;
|
|
|
725
|
+ }
|
|
|
726
|
+ };
|
|
|
727
|
+
|
|
|
728
|
+ return { insertBlock, loading, error };
|
|
|
729
|
+}
|
|
|
730
|
+```
|
|
|
731
|
+
|
|
|
732
|
+---
|
|
|
733
|
+
|
|
|
734
|
+## 🐛 调试技巧
|
|
|
735
|
+
|
|
|
736
|
+### 1. 检查响应
|
|
|
737
|
+```javascript
|
|
|
738
|
+const response = await fetch(...);
|
|
|
739
|
+const data = await response.json();
|
|
|
740
|
+console.log('API 响应:', data);
|
|
|
741
|
+```
|
|
|
742
|
+
|
|
|
743
|
+### 2. 验证请求体
|
|
|
744
|
+```javascript
|
|
|
745
|
+const requestBody = {
|
|
|
746
|
+ type: 'heading',
|
|
|
747
|
+ level: 2,
|
|
|
748
|
+ content: '标题'
|
|
|
749
|
+};
|
|
|
750
|
+console.log('请求体:', JSON.stringify(requestBody, null, 2));
|
|
|
751
|
+```
|
|
|
752
|
+
|
|
|
753
|
+### 3. 常见错误
|
|
|
754
|
+
|
|
|
755
|
+| 错误信息 | 原因 | 解决方法 |
|
|
|
756
|
+|---------|------|---------|
|
|
|
757
|
+| `heading 的 level 必须是 1-6` | heading 未指定 level 或超出范围 | 添加 `level: 2`(1-6) |
|
|
|
758
|
+| `Block not found: xxx` | after_block_id 不存在 | 检查 block ID 是否正确 |
|
|
|
759
|
+| `插入失败: ...` | 其他错误 | 查看详细错误信息 |
|
|
|
760
|
+
|
|
|
761
|
+---
|
|
|
762
|
+
|
|
|
763
|
+# 5. 测试验证
|
|
|
764
|
+
|
|
|
765
|
+## 🧪 测试场景
|
|
|
766
|
+
|
|
|
767
|
+### 测试文件:`test_insert_block.py`
|
|
|
768
|
+
|
|
|
769
|
+运行测试:
|
|
|
770
|
+```bash
|
|
|
771
|
+python test_insert_block.py
|
|
|
772
|
+```
|
|
|
773
|
+
|
|
|
774
|
+### 测试结果
|
|
|
775
|
+
|
|
|
776
|
+#### ✅ 场景 1:在段落1后插入 H2 标题
|
|
|
777
|
+
|
|
|
778
|
+**测试数据:**
|
|
|
779
|
+```python
|
|
|
780
|
+{
|
|
|
781
|
+ "type": "heading",
|
|
|
782
|
+ "level": 2,
|
|
|
783
|
+ "content": "1.1.1 新增内容",
|
|
|
784
|
+ "after_block_id": "block-p-0"
|
|
|
785
|
+}
|
|
|
786
|
+```
|
|
|
787
|
+
|
|
|
788
|
+**计算结果:**
|
|
|
789
|
+- index: `50` ✅(在 0 和 100 之间)
|
|
|
790
|
+- block_order: `350` ✅(在 300 和 400 之间)
|
|
|
791
|
+- ID: `block-h2-50` ✅
|
|
|
792
|
+
|
|
|
793
|
+#### ✅ 场景 2:在新 H2 后插入段落
|
|
|
794
|
+
|
|
|
795
|
+**测试数据:**
|
|
|
796
|
+```python
|
|
|
797
|
+{
|
|
|
798
|
+ "type": "paragraph",
|
|
|
799
|
+ "content": "新段落内容",
|
|
|
800
|
+ "after_block_id": "block-h2-50"
|
|
|
801
|
+}
|
|
|
802
|
+```
|
|
|
803
|
+
|
|
|
804
|
+**计算结果:**
|
|
|
805
|
+- index: `50` ✅(段落独立计数)
|
|
|
806
|
+- block_order: `375` ✅(在 350 和 400 之间)
|
|
|
807
|
+- ID: `block-p-50` ✅
|
|
|
808
|
+
|
|
|
809
|
+#### ✅ 场景 3:插入到文档末尾
|
|
|
810
|
+
|
|
|
811
|
+**测试数据:**
|
|
|
812
|
+```python
|
|
|
813
|
+{
|
|
|
814
|
+ "type": "paragraph",
|
|
|
815
|
+ "content": "文档末尾段落",
|
|
|
816
|
+ "after_block_id": null
|
|
|
817
|
+}
|
|
|
818
|
+```
|
|
|
819
|
+
|
|
|
820
|
+**计算结果:**
|
|
|
821
|
+- index: `200` ✅(最大值 + 100)
|
|
|
822
|
+- block_order: `700` ✅(最大值 + 100)
|
|
|
823
|
+- ID: `block-p-200` ✅
|
|
|
824
|
+
|
|
|
825
|
+### 测试统计
|
|
|
826
|
+
|
|
|
827
|
+```
|
|
|
828
|
+✅ 所有测试通过!
|
|
|
829
|
+📈 统计信息:
|
|
|
830
|
+ - 总 blocks: 9
|
|
|
831
|
+ - 按类型:
|
|
|
832
|
+ - heading: 5
|
|
|
833
|
+ - paragraph: 4
|
|
|
834
|
+```
|
|
|
835
|
+
|
|
|
836
|
+---
|
|
|
837
|
+
|
|
|
838
|
+# 6. 实现总结
|
|
|
839
|
+
|
|
|
840
|
+## ✅ 实现清单
|
|
|
841
|
+
|
|
|
842
|
+### 1. 后端核心方法(`app/services/content_db.py`)
|
|
|
843
|
+- [x] `calculate_index_for_insert()` - 计算 index
|
|
|
844
|
+- [x] `calculate_block_order_for_insert()` - 计算 block_order
|
|
|
845
|
+- [x] `_rebalance_indexes_between()` - 局部重排 index
|
|
|
846
|
+- [x] `_rebalance_block_orders_between()` - 局部重排 block_order
|
|
|
847
|
+- [x] `generate_block_id()` - 生成 Block ID
|
|
|
848
|
+
|
|
|
849
|
+### 2. API 端点(`app/api/v1/blocks.py`)
|
|
|
850
|
+- [x] `POST /api/v1/documents/{documentId}/blocks`
|
|
|
851
|
+ - 参数校验
|
|
|
852
|
+ - heading level 强制校验(1-6)
|
|
|
853
|
+ - 其他类型 level 自动设为 0
|
|
|
854
|
+ - 自动计算 index、block_order
|
|
|
855
|
+ - 自动生成 ID
|
|
|
856
|
+ - 错误处理
|
|
|
857
|
+
|
|
|
858
|
+### 3. Schema 定义(`app/schemas/block.py`)
|
|
|
859
|
+- [x] `BlockCreate` schema
|
|
|
860
|
+- [x] level 参数注释
|
|
|
861
|
+
|
|
|
862
|
+### 4. 文档
|
|
|
863
|
+- [x] 完整 API 文档
|
|
|
864
|
+- [x] 前端快速参考
|
|
|
865
|
+- [x] 实现总结
|
|
|
866
|
+- [x] 测试验证
|
|
|
867
|
+
|
|
|
868
|
+---
|
|
|
869
|
+
|
|
|
870
|
+## 🎯 核心特性
|
|
|
871
|
+
|
|
|
872
|
+### 1. 稀疏排序
|
|
|
873
|
+- ⚡ O(1) 插入性能
|
|
|
874
|
+- 📈 支持大文档(10000+ blocks)
|
|
|
875
|
+- 🔄 自动局部重排
|
|
|
876
|
+
|
|
|
877
|
+### 2. 自动生成
|
|
|
878
|
+- 🆔 Block ID 自动生成
|
|
|
879
|
+- 📊 index 自动计算
|
|
|
880
|
+- 📍 block_order 自动计算
|
|
|
881
|
+
|
|
|
882
|
+### 3. 前端简单
|
|
|
883
|
+- 📝 只需提供:type + content + after_block_id
|
|
|
884
|
+- 🚫 不需要:id + index + block_order
|
|
|
885
|
+- ✅ 透明化:无需关心稀疏排序
|
|
|
886
|
+
|
|
|
887
|
+### 4. 参数校验
|
|
|
888
|
+- ✅ heading 必须指定 level(1-6)
|
|
|
889
|
+- ✅ 其他类型 level 自动为 0
|
|
|
890
|
+- ✅ 完善的错误处理
|
|
|
891
|
+
|
|
|
892
|
+---
|
|
|
893
|
+
|
|
|
894
|
+## 📊 设计优势
|
|
|
895
|
+
|
|
|
896
|
+| 优势 | 说明 |
|
|
|
897
|
+|------|------|
|
|
|
898
|
+| **性能** | O(1) 插入,无需更新其他 blocks |
|
|
|
899
|
+| **简单** | 前端只需关注内容和位置 |
|
|
|
900
|
+| **可扩展** | 支持频繁插入和大文档 |
|
|
|
901
|
+| **一致性** | 后端统一管理序号 |
|
|
|
902
|
+
|
|
|
903
|
+---
|
|
|
904
|
+
|
|
|
905
|
+## 📂 修改的文件
|
|
|
906
|
+
|
|
|
907
|
+### 新增文件
|
|
|
908
|
+- ✅ `INSERT_BLOCK_COMPLETE_GUIDE.md` - 本文档
|
|
|
909
|
+- ✅ `test_insert_block.py` - 测试脚本
|
|
|
910
|
+
|
|
|
911
|
+### 修改文件
|
|
|
912
|
+- ✅ `app/services/content_db.py`
|
|
|
913
|
+- ✅ `app/api/v1/blocks.py`
|
|
|
914
|
+- ✅ `app/schemas/block.py`
|
|
|
915
|
+
|
|
|
916
|
+---
|
|
|
917
|
+
|
|
|
918
|
+## ✨ 小贴士
|
|
|
919
|
+
|
|
|
920
|
+1. 💡 `after_block_id = null` 表示插入到文档末尾
|
|
|
921
|
+2. 💡 只有 heading 类型需要指定 level(1-6)
|
|
|
922
|
+3. 💡 不要提供 id、index、block_order
|
|
|
923
|
+4. 💡 content 可以是字符串或数组(富文本)
|
|
|
924
|
+5. 💡 始终检查 code !== 0 判断是否成功
|
|
|
925
|
+
|
|
|
926
|
+---
|
|
|
927
|
+
|
|
|
928
|
+## 🚀 立即可用
|
|
|
929
|
+
|
|
|
930
|
+前端现在可以直接调用 API 进行 Block 插入操作!
|
|
|
931
|
+
|
|
|
932
|
+**最简单的调用:**
|
|
|
933
|
+```javascript
|
|
|
934
|
+await fetch(`/api/v1/documents/${docId}/blocks`, {
|
|
|
935
|
+ method: 'POST',
|
|
|
936
|
+ headers: { 'Content-Type': 'application/json' },
|
|
|
937
|
+ body: JSON.stringify({
|
|
|
938
|
+ type: 'paragraph',
|
|
|
939
|
+ content: '新段落',
|
|
|
940
|
+ after_block_id: 'block-p-100'
|
|
|
941
|
+ })
|
|
|
942
|
+});
|
|
|
943
|
+```
|
|
|
944
|
+
|
|
|
945
|
+---
|
|
|
946
|
+
|
|
|
947
|
+**实现者**:AI Assistant (Kiro)
|
|
|
948
|
+**实现日期**:2026-07-10
|
|
|
949
|
+**版本**:v1.0
|
|
|
950
|
+**状态**:✅ 已完成并验收通过
|