# Element Mapping

内容元素到 BBCode + Markdown 混合格式的映射表。

## When to Use

| Phase | Usage | Section |
|-------|-------|---------|
| Phase 2 | 元素识别 | Detection patterns |
| Phase 3 | 格式转换 | Conversion rules |

---

## Element Detection Patterns

### 标题检测

| 类型 | Pattern | 示例 |
|------|---------|------|
| ATX 标题 | `/^#{1,6}\s+(.+)$/` | `# Title`, `## Subtitle` |
| Setext H1 | `/^(.+)\n={3,}$/` | `Title\n====` |
| Setext H2 | `/^(.+)\n-{3,}$/` | `Subtitle\n----` |

### 列表检测

| 类型 | Pattern | 示例 |
|------|---------|------|
| 无序列表 | `/^[\s]*[-*+]\s+(.+)$/` | `- item`, `* item` |
| 有序列表 | `/^[\s]*\d+\.\s+(.+)$/` | `1. item`, `2. item` |
| 任务列表 | `/^[\s]*[-*]\s+\[([ x])\]\s+(.+)$/` | `- [ ] todo`, `- [x] done` |

### Callout 检测

| 类型 | Pattern | 示例 |
|------|---------|------|
| Callout 开始 | `/^>\s*\[!(\w+)\](?:\s+(.+))?$/` | `> [!NOTE] 标题` |
| Callout 内容 | `/^>\s*(.*)$/` | `> 内容行` |
| 可折叠展开 | `/^>\s*\[!(\w+)\]\+/` | `> [!NOTE]+` |
| 可折叠收起 | `/^>\s*\[!(\w+)\]-/` | `> [!NOTE]-` |

### 代码检测

| 类型 | Pattern | 示例 |
|------|---------|------|
| 代码块开始 | `/^```(\w*)$/` | ` ```js ` |
| 代码块结束 | `/^```$/` | ` ``` ` |
| 行内代码 | `/`([^`]+)`/` | `` `code` `` |

### 其他元素

| 类型 | Pattern | 示例 |
|------|---------|------|
| 链接 | `/\[([^\]]+)\]\(([^)]+)\)/` | `[text](url)` |
| 图片 | `/!\[([^\]]*)\]\(([^)]+)\)/` | `![alt](url)` |
| 普通引用 | `/^>\s+(.+)$/` | `> quote` |
| 分隔线 | `/^[-*_]{3,}$/` | `---`, `***` |
| 高亮 | `/==(.+?)==/` | `==highlight==` |
| 粗体 | `/\*\*(.+?)\*\*/` | `**bold**` |
| 斜体 | `/\*(.+?)\*/` | `*italic*` |
| 删除线 | `/~~(.+?)~~/` | `~~strike~~` |

### HTML 元素检测

| 类型 | Pattern | 示例 |
|------|---------|------|
| 高亮 | `/<mark>(.+?)<\/mark>/` | `<mark>高亮</mark>` |
| 折叠块 | `/<details>\s*<summary>(.+?)<\/summary>([\s\S]*?)<\/details>/` | `<details><summary>标题</summary>内容</details>` |
| 下划线 | `/<u>(.+?)<\/u>/` | `<u>下划线</u>` |

---

## Element Conversion Matrix

### 标题映射 (Pixel-Based)

| Element | Markdown | BBCode Output |
|---------|----------|---------------|
| **H1** | `# text` | `[size=150][color=#2196F3][b]text[/b][/color][/size]` |
| **H2** | `## text` | `[size=120][color=#2196F3][b]text[/b][/color][/size]` |
| **H3** | `### text` | `[size=100][color=#333][b]text[/b][/color][/size]` |
| **H4** | `#### text` | `[b]text[/b]` |
| **H5** | `##### text` | `[b]text[/b]` |
| **H6** | `###### text` | `[b]text[/b]` |

### 文本样式映射

| Element | Markdown/HTML | BBCode |
|---------|---------------|--------|
| **Bold** | `**text**` 或 `__text__` | `[b]text[/b]` |
| **Italic** | `*text*` 或 `_text_` | `[i]text[/i]` |
| **Bold+Italic** | `***text***` | `[b][i]text[/i][/b]` |
| **Strike** | `~~text~~` | `[s]text[/s]` |
| **Underline** | `<u>text</u>` | `[u]text[/u]` |
| **Highlight** | `==text==` 或 `<mark>text</mark>` | `[color=yellow]text[/color]` |
| **Code (inline)** | `` `text` `` | 保持原样 |

### HTML 转 BBCode 映射

| HTML | BBCode |
|------|--------|
| `<mark>text</mark>` | `[color=yellow]text[/color]` |
| `<u>text</u>` | `[u]text[/u]` |
| `<details><summary>标题</summary>内容</details>` | `[spoiler=标题]内容[/spoiler]` |

### 块级元素映射

| Element | Markdown | BBCode |
|---------|----------|--------|
| **Code Block** | ` ```lang\ncode\n``` ` | `[code]code[/code]` |
| **Quote** | `> text` | `[quote]text[/quote]` |
| **HR** | `---` | `---` (保持 Markdown) |
| **List Item** | `- text` | `• text` |
| **Paragraph** | `text\n\ntext` | `text\n\ntext` |

### 链接和媒体映射

| Element | Markdown | BBCode |
|---------|----------|--------|
| **Link** | `[text](url)` | `[url=url]text[/url]` |
| **Image** | `![alt](url)` | `[img]url[/img]` |

---

## Callout Mapping

### 类型到样式映射

| Callout Type | Color | Icon | Label |
|--------------|-------|------|-------|
| note | #2196F3 | 📝 | 注意 |
| info | #2196F3 | ℹ️ | 信息 |
| tip | #4CAF50 | 💡 | 提示 |
| hint | #4CAF50 | 💡 | 提示 |
| success | #4CAF50 | ✅ | 成功 |
| check | #4CAF50 | ✅ | 完成 |
| done | #4CAF50 | ✅ | 完成 |
| warning | #FF9800 | ⚠️ | 警告 |
| caution | #FF9800 | ⚠️ | 注意 |
| attention | #FF9800 | ⚠️ | 注意 |
| danger | #F44336 | ❌ | 危险 |
| error | #F44336 | ❌ | 错误 |
| bug | #F44336 | 🐛 | Bug |
| example | #9C27B0 | 📋 | 示例 |
| question | #FF9800 | ❓ | 问题 |
| help | #FF9800 | ❓ | 帮助 |
| faq | #FF9800 | ❓ | FAQ |
| quote | gray | 💬 | 引用 |
| cite | gray | 💬 | 引用 |
| abstract | #2196F3 | 📄 | 摘要 |
| summary | #2196F3 | 📄 | 摘要 |
| tldr | #2196F3 | 📄 | 摘要 |
| todo | #FF9800 | 📋 | 待办 |
| important | #F44336 | ⭐ | 重要 |

### Callout 输出模板

```bbcode
[quote]
[size=100][color={color}][b]{icon} {title}[/b][/color][/size]

{content}
[/quote]
```

---

## Unsupported Elements

### 不支持转换的元素

| 元素 | 原因 | 降级方案 |
|------|------|----------|
| 表格 | BBCode 表格支持有限 | 转为代码块或列表 |
| 脚注 | 不支持 | 转为括号注释 `(注: ...)` |
| 数学公式 | 不支持 | 保留原始文本 |
| 嵌入内容 | 不支持 | 转为链接 |
| 任务列表 | 复选框不支持 | 转为普通列表 `☐`/`☑` |

### 降级示例

**表格**:
```
| A | B |
|---|---|
| 1 | 2 |

→ 降级为:

A: 1
B: 2
```

**脚注**:
```
文本[^1]

[^1]: 脚注内容

→ 降级为:

文本 (注: 脚注内容)
```

**任务列表**:
```
- [ ] 待办
- [x] 已完成

→ 降级为:

☐ 待办
☑ 已完成
```

---

## Validation Rules

### 转换验证

- [ ] 所有 H1-H3 使用像素值 size (150/120/100)
- [ ] 未使用 `[align]` 标签
- [ ] 未使用 `[hr]` 标签
- [ ] 分隔线保持 `---`
- [ ] Callout 正确识别并转换
- [ ] 颜色值使用 hex 格式