Initial TrueGrowth source import

docs/user-manual/content/drawing/flowchart.mdx

@@ -0,0 +1,154 @@
+---
+title: 流程图
+category: drawing
+order: 5
+---
+
+# 流程图
+
+流程图是表达流程和逻辑的常用工具，Opentu 支持 AI 生成流程图和手动绘制。
+
+## 效果展示
+
+<img src="../../product_showcase/流程图.gif" alt="流程图演示" style="max-width: 100%; border-radius: 8px;" />
+
+只需用文字描述流程，AI 就能自动生成专业的流程图。
+
+## AI 生成流程图
+
+这是最快捷的方式：
+
+### 方法一：自然语言描述
+
+在底部输入框输入流程描述，如：
+
+- "用户登录流程：输入账号密码 → 验证 → 成功进入首页/失败提示重试"
+- "订单处理流程：下单 → 支付 → 发货 → 签收"
+
+AI 会理解你的描述并生成相应的流程图。
+
+### 方法二：Mermaid 语法
+
+如果你熟悉 Mermaid 语法，可以更精确地控制流程图：
+
+1. 点击工具栏的 **工具箱** 图标
+2. 选择 **Mermaid 转流程图**
+3. 输入 Mermaid 代码
+4. 点击生成
+
+**示例代码：**
+
+```mermaid
+graph TD
+    A[开始] --> B{判断条件}
+    B -->|是| C[执行操作A]
+    B -->|否| D[执行操作B]
+    C --> E[结束]
+    D --> E
+```
+
+## 手动绘制流程图
+
+<Screenshot id="flowchart-step-1" />
+<p class="screenshot-caption">流程图工具</p>
+
+### 第 1 步：添加形状
+
+<Screenshot id="flowchart-step-2" />
+<p class="screenshot-caption">选择流程图形状：① 开始/结束 ② 处理步骤 ③ 判断条件</p>
+
+1. 点击工具栏的形状工具
+2. 选择需要的形状：
+   - **矩形** - 表示操作/步骤
+   - **菱形** - 表示判断/条件
+   - **椭圆/圆角矩形** - 表示开始/结束
+   - **平行四边形** - 表示输入/输出
+
+3. 在画布上点击或拖拽创建
+
+### 第 2 步：添加文字
+
+双击形状，输入说明文字。
+
+### 第 3 步：连接形状
+
+<Screenshot id="flowchart-step-3" />
+<p class="screenshot-caption">拖动连接点创建连线，双击编辑文本</p>
+
+1. 按 `A` 键切换到箭头工具
+2. 从一个形状拖动到另一个形状
+3. 箭头会自动连接两个形状
+
+### 第 4 步：调整布局
+
+拖动形状调整位置，连接线会自动跟随调整。
+
+## 形状含义
+
+| 形状 | 含义 | 使用场景 |
+|------|------|----------|
+| 圆角矩形 | 开始/结束 | 流程的起点和终点 |
+| 矩形 | 处理/操作 | 具体的执行步骤 |
+| 菱形 | 判断/决策 | 需要做选择的节点 |
+| 平行四边形 | 输入/输出 | 数据的输入或结果输出 |
+
+## 连接线操作
+
+### 添加连接线
+
+1. 选择箭头工具（按 `A` 键）
+2. 从起始形状拖到目标形状
+
+### 添加标签
+
+双击连接线，可以添加文字标签（如"是"、"否"）。
+
+### 调整连接点
+
+拖动连接线的端点，可以改变连接位置。
+
+### 折线连接
+
+如果需要拐弯的连接线，选择 **折线箭头** 类型。
+
+## 编辑技巧
+
+### 对齐形状
+
+选中多个形状后，使用对齐功能让它们整齐排列：
+- 左对齐 / 右对齐
+- 顶部对齐 / 底部对齐
+- 水平居中 / 垂直居中
+
+### 等距分布
+
+选中多个形状，使用"等距分布"让间距均匀。
+
+### 复制结构
+
+选中一组形状和连接线，`Ctrl/Cmd + C` 复制，`Ctrl/Cmd + V` 粘贴，可以快速复制相似的结构。
+
+## 快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `R` | 矩形工具 |
+| `O` | 椭圆工具 |
+| `A` | 箭头工具 |
+| `V` | 选择工具 |
+| `双击形状` | 编辑文字 |
+| `Delete` | 删除选中项 |
+
+## 小贴士
+
+:::tip
+先用 AI 生成基础框架，再手动微调细节，效率最高。
+:::
+
+:::tip
+流程图太大？选中所有内容，缩小尺寸，或者分成多个子流程图。
+:::
+
+:::note
+导出为图片时，建议选择 PNG 格式以保持清晰度。
+:::

docs/user-manual/content/drawing/mindmap.mdx

@@ -0,0 +1,139 @@
+---
+title: 思维导图
+category: drawing
+order: 4
+---
+
+# 思维导图
+
+思维导图是整理思路的好工具，Opentu 支持快速创建和编辑思维导图，还可以用 AI 帮你自动生成。
+
+## 效果展示
+
+<img src="../../product_showcase/思维导图.gif" alt="思维导图创建演示" style="max-width: 100%; border-radius: 8px; margin: 16px 0;" />
+
+只需输入主题，AI 就能帮你拓展思路，自动生成完整的思维导图。
+
+## 快速开始
+
+### 方法一：AI 生成思维导图
+
+这是最快的方式：
+
+1. 在底部输入框输入你的主题，如"学习 Python 的路线图"
+2. AI 会自动理解并生成思维导图
+3. 生成后可以继续编辑调整
+
+### 方法二：手动创建
+
+<Screenshot id="mindmap-toolbar-menu" />
+<p class="screenshot-caption">在更多工具中找到思维导图</p>
+
+1. 点击左侧工具栏底部的 **更多工具** 按钮（三个点图标）
+2. 在展开的菜单中选择 **思维导图**，或直接按 `M` 键
+3. 在画布上点击，创建根节点
+4. 输入中心主题
+
+## 添加节点
+
+<Screenshot id="mindmap-step-2" />
+<p class="screenshot-caption">节点操作快捷键提示</p>
+
+选中一个节点后：
+
+| 快捷键 | 功能 |
+|--------|------|
+| `Tab` | 添加子节点（向右展开） |
+| `Enter` | 添加同级节点（向下） |
+
+## 编辑节点
+
+### 修改文字
+
+双击节点，进入编辑状态，修改文字内容。
+
+### 移动节点
+
+选中后直接拖动。节点会自动调整与父节点的连接线。
+
+### 删除节点
+
+选中后按 `Delete` 键。
+
+:::note
+删除父节点时，所有子节点会一起删除。
+:::
+
+## 节点操作
+
+### 展开/折叠
+
+点击节点旁边的 **+/-** 图标，可以展开或折叠子节点。
+
+适合处理复杂的思维导图，让重点更突出。
+
+### 调整层级
+
+- 拖动节点到另一个节点上 → 成为其子节点
+- 拖动到空白处 → 成为独立的根节点
+
+### 复制分支
+
+选中节点后：
+- `Ctrl/Cmd + C` 复制
+- `Ctrl/Cmd + V` 粘贴
+
+会复制整个分支，包括所有子节点。
+
+## Markdown 转思维导图
+
+有现成的文本大纲？可以直接转换：
+
+1. 点击工具栏的 **工具箱** 图标
+2. 选择 **Markdown 转思维导图**
+3. 粘贴你的 Markdown 内容（使用 `#` 标题和 `-` 列表语法）
+4. 点击生成
+
+标题层级会自动转换为节点层级，列表项会成为子节点。
+
+## 样式调整
+
+选中节点后，可以修改：
+
+- **节点颜色** - 给不同分支设置不同颜色
+- **文字颜色** - 改变文字颜色
+- **边框样式** - 调整边框
+
+:::tip
+给重要节点添加不同的颜色，让思维导图结构更清晰！
+:::
+
+## 导出
+
+思维导图可以导出为图片：
+
+1. 按 `Ctrl/Cmd + Shift + E`
+2. 选择 PNG 或 JPG 格式
+3. 所有节点都会包含在导出的图片中
+
+## 快捷键汇总
+
+| 快捷键 | 功能 |
+|--------|------|
+| `M` | 切换到思维导图工具 |
+| `Tab` | 添加子节点 |
+| `Enter` | 添加同级节点 |
+| `Delete` | 删除节点 |
+| `双击` | 编辑节点文字 |
+| `Ctrl/Cmd + C` | 复制 |
+| `Ctrl/Cmd + V` | 粘贴 |
+
+## 小贴士
+
+:::tip
+思维导图的子节点会自动排列，你不需要手动调整位置，专注于内容就好。
+:::
+
+:::tip
+结合 AI 生成 + 手动编辑，效率最高。先让 AI 生成框架，再手动补充细节。
+:::

docs/user-manual/content/drawing/pencil-tool.mdx

@@ -0,0 +1,116 @@
+---
+title: 画笔工具
+category: drawing
+order: 1
+---
+
+# 画笔工具
+
+画笔是最基础的绘图工具，让你可以在画布上自由绘制线条和图形。
+
+## 快速开始
+
+### 第 1 步：选择画笔
+
+**方法一**：点击工具栏中的画笔图标
+
+**方法二**：按键盘 `P` 键
+
+<Screenshot id="drawing-step-0" alt="工具栏" />
+
+选中后，画笔图标会高亮显示。
+
+<Screenshot id="drawing-step-1" alt="选择画笔" />
+
+### 第 2 步：开始绘制
+
+1. 在画布上按住鼠标左键
+2. 拖动鼠标绘制线条
+3. 松开鼠标完成绘制
+
+<Screenshot id="drawing-step-2" alt="绘制线条" />
+
+可以连续绘制多条线条。
+
+## 画笔类型
+
+点击画笔图标旁边的小箭头，可以选择不同类型的画笔：
+
+### 毛笔
+
+模拟毛笔效果，笔触有粗细变化，适合艺术创作。
+
+### 钢笔
+
+均匀的线条，适合精确绘制和签名。
+
+### 马克笔
+
+半透明效果，适合标注和高亮。
+
+## 调整设置
+
+选中画笔工具后，工具栏会显示设置选项：
+
+### 颜色
+
+点击颜色块，选择你喜欢的颜色。可以选择预设颜色或自定义。
+
+### 粗细
+
+拖动滑块调整画笔粗细，范围从细到粗。
+
+## 橡皮擦
+
+画错了？用橡皮擦修正：
+
+**方法一**：点击工具栏的橡皮擦图标
+
+**方法二**：按键盘 `E` 键
+
+在需要擦除的区域拖动，线条会被擦除。
+
+## 编辑已绘制的线条
+
+绘制完成后，线条会成为独立的元素，可以进一步编辑：
+
+### 选择线条
+
+1. 按 `V` 键切换到选择工具
+2. 点击线条选中它
+
+### 移动线条
+
+选中后直接拖动，或用方向键微调位置。
+
+### 删除线条
+
+选中后按 `Delete` 或 `Backspace` 键删除。
+
+### 复制线条
+
+选中后按 `Ctrl/Cmd + C` 复制，`Ctrl/Cmd + V` 粘贴。
+
+## 快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `P` | 切换到画笔工具 |
+| `E` | 切换到橡皮擦 |
+| `Shift + P` | 切换到钢笔工具 |
+| `V` | 切换到选择工具 |
+| `H` | 切换到手形工具 |
+
+## 小贴士
+
+:::tip
+使用触控板或数位板可以获得更好的绘制体验，部分设备支持压感。
+:::
+
+:::tip
+绘制时按住 `Shift` 键可以画出水平或垂直的直线。
+:::
+
+:::note
+画笔绘制的内容是矢量图形，放大后不会变模糊。
+:::

docs/user-manual/content/drawing/shapes.mdx

@@ -0,0 +1,140 @@
+---
+title: 形状工具
+category: drawing
+order: 2
+---
+
+# 形状工具
+
+形状工具可以快速创建矩形、圆形、箭头等几何图形。
+
+## 快速开始
+
+### 第 1 步：选择形状工具
+
+点击工具栏中的形状图标。
+
+<Screenshot id="shape-step-1" alt="选择形状" />
+
+### 第 2 步：创建形状
+
+**方法一**：点击画布
+
+在画布上点击，会在该位置创建一个默认大小的形状。
+
+**方法二**：拖拽创建
+
+1. 在画布上按住鼠标
+2. 拖动到想要的大小
+3. 松开鼠标完成
+
+<Screenshot id="shape-step-2" alt="创建形状" />
+
+按住 `Shift` 键拖拽可以创建正方形或正圆。
+
+## 形状类型
+
+点击形状工具旁边的小箭头，可以选择不同形状：
+
+### 基础形状
+
+- **矩形** (`R` 键) - 最常用的形状
+- **圆形/椭圆** (`O` 键) - 圆形和椭圆
+- **三角形** - 等边三角形
+- **菱形** - 45度旋转的正方形
+
+### 箭头
+
+- **直线箭头** (`A` 键) - 单向箭头
+- **双向箭头** - 表示双向关系
+- **折线箭头** - 带拐点的箭头
+
+## 编辑形状
+
+### 调整大小
+
+选中形状后，拖动角落或边缘的控制点来调整大小。
+
+**技巧**：
+- 按住 `Shift` 保持等比例缩放
+- 拖动角点可以同时改变宽高
+- 拖动边点只改变单一方向
+
+### 移动位置
+
+选中形状后：
+- 直接拖动到新位置
+- 或用方向键微调
+
+### 旋转
+
+选中形状后，拖动上方的旋转手柄。
+
+### 修改样式
+
+选中形状后，可以在工具栏中修改：
+
+- **填充颜色** - 形状内部的颜色
+- **边框颜色** - 形状轮廓的颜色
+- **边框粗细** - 轮廓线的宽度
+
+### 添加文字
+
+双击形状，可以在内部添加文字。文字会自动居中显示。
+
+## 连接形状
+
+### 用箭头连接
+
+1. 选择箭头工具
+2. 从一个形状拖到另一个形状
+3. 箭头会自动连接两个形状
+
+### 连接点
+
+当你移动形状时，连接的箭头会自动调整位置。
+
+## 组合操作
+
+### 多选
+
+按住 `Ctrl/Cmd` 键点击多个形状，或拖动框选多个形状。
+
+### 组合
+
+选中多个形状后，按 `Ctrl/Cmd + G` 组合成一个整体。
+
+### 取消组合
+
+选中组合后，按 `Ctrl/Cmd + Shift + G` 取消组合。
+
+## 对齐
+
+选中多个形状后，可以使用对齐功能：
+
+- **左对齐** - 所有形状的左边对齐
+- **居中对齐** - 所有形状的中心对齐
+- **右对齐** - 所有形状的右边对齐
+- **等距分布** - 均匀分布间距
+
+## 快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `R` | 矩形工具 |
+| `O` | 椭圆工具 |
+| `A` | 箭头工具 |
+| `Shift + 拖拽` | 创建正方形/正圆 |
+| `Ctrl/Cmd + G` | 组合 |
+| `Ctrl/Cmd + Shift + G` | 取消组合 |
+| `Ctrl/Cmd + D` | 复制形状 |
+
+## 小贴士
+
+:::tip
+双击形状可以直接编辑内部文字，无需切换到文本工具。
+:::
+
+:::tip
+按住 `Alt` 键拖拽形状可以复制一个新的形状。
+:::

docs/user-manual/content/drawing/text.mdx

@@ -0,0 +1,143 @@
+---
+title: 文本工具
+category: drawing
+order: 3
+---
+
+# 文本工具
+
+文本工具可以在画布上添加文字，用于标注、说明或创作。
+
+## 快速开始
+
+### 第 1 步：选择文本工具
+
+**方法一**：点击工具栏中的文本图标
+
+**方法二**：按键盘 `T` 键
+
+<Screenshot id="text-step-1" alt="选择文本工具" />
+
+### 第 2 步：添加文本
+
+在画布上点击，会创建一个文本框，光标自动进入编辑状态。
+
+<Screenshot id="text-step-2" alt="输入文本" />
+
+直接输入你想要的文字内容。
+
+### 第 3 步：完成编辑
+
+点击画布空白处，或按 `Esc` 键退出编辑。
+
+## 编辑文本
+
+### 进入编辑模式
+
+- **双击**文本框
+- 或选中后按 **Enter** 键
+
+### 选择文字
+
+- **双击** - 选中一个词
+- **三击** - 选中整行
+- **Ctrl/Cmd + A** - 全选
+
+### 文字格式
+
+选中文字后，可以设置格式：
+
+- **粗体** - 点击工具栏的 **B** 按钮
+- **斜体** - 点击工具栏的 **I** 按钮
+
+:::note
+注意：当前版本暂不支持下划线快捷键（Ctrl/Cmd + U 是添加图片的快捷键）。
+:::
+
+## 文本样式
+
+### 字体
+
+从工具栏的字体下拉菜单中选择：
+
+- **系统字体** - 苹方、微软雅黑、黑体等
+- **艺术字体** - 站酷系列、马善政书法等
+- **代码字体** - 等宽字体，适合代码
+
+### 字号
+
+点击字号选择器，选择合适的大小。也可以直接输入数字。
+
+### 颜色
+
+- **文字颜色** - 改变文字本身的颜色
+- **背景颜色** - 给文字添加背景高亮
+
+### 对齐
+
+- **左对齐** - 文字靠左
+- **居中** - 文字居中
+- **右对齐** - 文字靠右
+
+## 文本框操作
+
+### 移动
+
+选中文本框后：
+- 直接拖动到新位置
+- 或用方向键微调
+
+### 调整大小
+
+拖动文本框边缘的控制点。文字会自动换行适应新的宽度。
+
+### 旋转
+
+拖动文本框上方的旋转手柄。
+
+### 删除
+
+选中后按 `Delete` 或 `Backspace` 键。
+
+## 从其他地方粘贴文本
+
+你可以从其他应用（如网页、Word）复制文字，然后在 Opentu 中粘贴：
+
+1. 在其他应用中复制文字（Ctrl/Cmd + C）
+2. 在 Opentu 画布上按 Ctrl/Cmd + V
+3. 文字会自动创建为文本框
+
+:::tip
+粘贴的文字会自动换行，不会出现超长的一行。
+:::
+
+## 在形状中添加文字
+
+很多形状都支持添加内部文字：
+
+1. 双击形状
+2. 输入文字
+3. 文字会自动在形状中居中
+
+这对于制作流程图、思维导图非常有用。
+
+## 快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `T` | 切换到文本工具 |
+| `Enter` | 开始编辑 / 换行 |
+| `Esc` | 退出编辑 |
+| `Ctrl/Cmd + A` | 全选文字 |
+| `Ctrl/Cmd + C` | 复制 |
+| `Ctrl/Cmd + V` | 粘贴 |
+
+## 小贴士
+
+:::tip
+在画布任意位置直接开始打字，会自动创建一个文本框。
+:::
+
+:::tip
+需要多行文本？按 Enter 键换行即可。
+:::