# toc_ideator

**Repository Path**: songxf1024/toc_ideator

## Basic Information

- **Project Name**: toc_ideator
- **Description**: 文章目录构思助手。一个帮你快速搭建目录树、头脑风暴章节标题的轻量工具。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-14
- **Last Updated**: 2026-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文章目录构思器（TOC Ideator）


<img width="1280" height="460" alt="image" src="https://github.com/user-attachments/assets/3d661f9f-76e0-4e70-9588-9e205f06632b" />


一个轻量的「目录构思器」：用目录树组织章节层级，并为每个章节维护多个候选标题，适合头脑风暴与快速成稿。

- ✅ 传统 Web 技术：HTML / CSS / JS 分离
- ✅ 三级目录（一级 / 二级 / 三级）
- ✅ 每个章节支持多个候选标题（下拉选择展示其中一个）
- ✅ 拖拽排序（同级重排 + 拖到上一级成为子节点）
- ✅ 右侧效果预览（实时渲染）
- ✅ 一键复制 Markdown（点击按钮才生成，并弹出 Markdown 文本）
- ✅ 导入 / 导出（JSON 备份、迁移、分享）
- ✅ 自动本地保存（localStorage）  
- ✅ 在线分享功能  

> 在线体验：https://www.xfxuezhang.cn/web/toc/

---

## 目录结构

```text
.
├── index.html
├── styles.css
└── app.js
```

---

## 快速开始

### 方式 1：直接打开（最简单）
双击打开 `index.html` 即可使用。

> 注意：部分浏览器在 `file://` 模式下可能限制“剪贴板复制”。  
> 如果你发现“复制 Markdown”失败，请用下面的本地服务器方式打开，或在弹窗里手动复制。

### 方式 2：本地服务器（推荐）
任选其一：

```bash
# Python 3
python -m http.server 5500
# 打开 http://localhost:5500
```

```bash
# Node.js
npx serve .
```

> 如果要使用**在线分享**功能，就得用php或apache等方式启动了

---

## 使用说明

### 目录编辑
- 点击 `+ 一级`：新增一级章节
- 每条章节支持：
  - `+ 同级`：新增同级章节
  - `+ 下级`：新增下级章节（仅到三级）
  - `删除`：删除该章节（含子树）
  - `折叠/展开`：折叠或展开子章节

### 候选标题（头脑风暴）
- 每条章节右侧有一个下拉框：表示“当前展示标题”
- 点击 `候选`：
  - 新增/编辑/删除候选标题
  - 切换“展示中”的标题（最终导出时只使用展示中的标题）

### 拖拽排序
抓住每条左侧的 `⠿` 拖拽：

- **同级排序**：拖到同级条目上方/下方（出现插入线）松开即可重排
- **跨父节点移动**：把条目拖到它的**上一级**条目上（高亮）松开后成为其子节点（追加到末尾）
  - Lv2 → 可拖到 Lv1 上
  - Lv3 → 可拖到 Lv2 上
- **一级移动到根目录空白处**：拖到列表空白处松开，移动到根目录末尾

### 效果预览与 Markdown
右侧默认显示“效果预览”（渲染目录效果）。

点击 `复制 Markdown`：
- 会按当前选择生成 Markdown（# / ## / ###）
- 尝试复制到剪贴板
- 同时弹出 Markdown 文本框（可手动复制/再复制一次）

---

## 导入 / 导出

用于备份、迁移到另一台电脑或分享给协作者。

### 导出
- 点击 `导出`（按钮位置以项目实现为准）
- 会生成 JSON（可复制 / 下载）

### 导入
- 点击 `导入`
- 支持两种方式：
  1) 选择 `.json` 文件
  2) 直接粘贴 JSON 文本
- 点 `应用导入` 后会校验并覆盖当前目录

### JSON 格式
支持两类输入：

1) 完整导出包：

```json
{
  "schema": "toc-ideator",
  "version": 1,
  "exportedAt": "2026-01-10T00:00:00.000Z",
  "tree": [ ... ]
}
```

2) 仅 `tree` 数组：

```json
[
  {
    "id": "xxx",
    "level": 1,
    "options": ["第一章", "另一种写法"],
    "selected": 0,
    "collapsed": false,
    "children": [ ... ]
  }
]
```

导入时会自动做容错处理：
- 自动补齐 `id`
- `options` 至少保留 1 个
- `selected` 自动夹紧到合法范围
- 只保留 1~3 级（超出会被截断）

---

## 数据存储

- 默认使用浏览器 `localStorage` 自动保存
- 点击 `重置` 会清空当前数据与本地存储