第三章 圈子编辑器

圈子编辑器是 Xcircle 的核心功能，提供可视化画布，让你直观地查看和编辑组织架构。

3.1 页面布局

进入圈子编辑器后，你会看到以下几个区域：

3.2 画布操作

基本操作

键盘快捷键

💡 小贴士：熟练使用键盘快捷键可以大幅提升编辑效率。Tab 创建子级、Enter 创建同级，和思维导图的操作习惯一致。

3.3 如何创建组织结构

创建子圈子

步骤：

1. 选中一个圈子节点
2. 使用以下任一方式：
   • 工具栏点击 「创建子圈」 按钮
   • 右键菜单选择 「创建子圈」
   • 按 Tab 键
3. 新的子圈子出现在当前圈子内部
4. 在信息面板中为它命名并填写属性

创建角色

步骤：

1. 选中一个圈子节点
2. 使用以下任一方式：
   • 工具栏点击 「创建角色」 按钮
   • 右键菜单选择 「创建角色」
3. 新角色出现在当前圈子中
4. 在信息面板中填写角色名称和职责

复制节点

1. 右键点击圈子或角色，选择 「创建副本」
2. 或使用 Cmd + C 复制，Cmd + V 粘贴

💡 小贴士：复制节点会保留所有属性（名称、目标、职责等），但不会复制成员分配。

删除节点

1. 选中节点，按 Backspace 或 Delete
2. 或右键选择 「删除」
3. 系统会弹出确认对话框

⚠️ 注意：删除圈子会同时删除其下的所有子圈子和角色，此操作不可撤销！

3.4 工具栏

选中节点后，画布上方会出现浮动工具栏。工具栏按节点类型显示不同的操作按钮。

选中圈子时的工具栏

选中角色时的工具栏

3.5 右键菜单

在画布中右键点击节点，弹出上下文菜单。菜单内容根据节点类型不同而不同。

圈子的右键菜单

角色的右键菜单

3.6 视觉样式设置

你可以自定义圈子的填充颜色和边框样式，让组织架构图更加清晰美观。

如何设置填充颜色

步骤：

1. 选中圈子，点击工具栏的填充颜色按钮，或右键选择 「填充样式」
2. 在弹出的颜色选择器中选择：
   • 当前色系 — 选中颜色的深浅变化
   • 基础色板 — 预设的常用颜色
   • 自定义颜色 — 点击彩虹选择器，精确选择任意颜色
3. 支持输入 Hex 色值（如 #FF6600）
4. 可调节透明度（0-100%）

如何设置边框样式

步骤：

1. 选中圈子，点击工具栏的边框样式按钮，或右键选择 「边框样式」
2. 选择边框颜色（方式同填充颜色）
3. 选择边框线型：实线、虚线、点线等
4. 可调节边框透明度

💡 小贴士：合理使用颜色来区分圈子类型（例如：产品类用蓝色、运营类用绿色、技术类用紫色），让架构图一目了然。

3.7 信息面板

信息面板是编辑圈子/角色详细属性的主要界面。

如何打开信息面板

面板头部

• 节点类型标识 — 显示「角色」或「圈子」标签
• 节点名称 — 当前选中的节点名称
• 关闭按钮 — 收起面板

面板内容区域

信息面板分为多个可折叠区域，点击区域标题的箭头可以展开/收起。

价值主张区域（Goal）

描述这个圈子/角色创造什么价值、解决什么关键问题。

编辑方式：

• 短文本：点击直接行内编辑，按 Enter 保存
• 长文本：点击后弹出编辑弹窗，提供更大的输入区域
• AI 生成：点击输入框旁的 ✨ 按钮
  • 字段为空时 → AI 自动生成内容
  • 字段有内容时 → AI 优化现有内容
  • 生成过程中会显示实时流式输出，输入框边框呈蓝色流动动画

💡 小贴士：AI 会根据圈子的上下文（名称、层级关系等）生成合适的内容，生成后你可以直接编辑修改。

产能区域（Capacity）

产能区域以紧凑的卡片形式展示四项关键信息：

角色节点的成员行：

• 显示已分配的承担者头像
• 鼠标悬停显示姓名
• 可直接点击 ✕ 移除成员
• 无成员时显示 「添加」 按钮

圈子节点的成员行：

• 汇总显示所有子角色的成员（只读）
• 无成员时显示「暂无数据」

工作量和 AI 增效可以行内编辑：

• 点击数值区域直接输入
• 自动模式时显示 ⚡ 图标，表示数值由下级自动汇总
• 详细的工作量和 AI 增效说明见第四章

权责区域（Duty）

明确该圈子/角色的职责范围和决策边界。

编辑方式与价值主张相同（行内编辑 / 弹窗编辑 / AI 生成）。

无选中节点时的面板

当没有选中任何节点时，面板会显示：

• 「邀请成员」 快捷按钮
• Xcircle 核心概念介绍卡片（圈子、角色、徽章的说明）

3.8 产能详情弹窗

点击信息面板产能区域中的任意一行，会打开产能详情弹窗，分为四个标签页。

成员标签

• 汇总栏：显示成员数、角色数、直接成员数
• 搜索并添加成员：点击添加按钮，输入用户名/手机号/邮箱搜索
• 成员列表：每行显示头像、姓名、角色路径（圈子视图）
• 移除成员：点击每行的 ✕ 按钮

💡 小贴士：搜索弹窗底部有「邀请」按钮，如果要添加的人还不在工作空间中，可以直接发出邀请。

工作量标签

• 汇总栏：显示总工作量（小时 + 人力）
• 自动/手动模式切换：
  • 点击 「手动覆盖」 → 切换到手动模式，可直接输入总值
  • 点击 「恢复自动」 → 切换回自动模式，从下级汇总计算
• 每位成员的工作量输入：可逐个编辑

AI Buff 标签

• 结构与工作量标签类似
• 显示每位成员的 AI 增效百分比
• 支持自动/手动模式切换

徽章标签

• 只读展示
• 按成员分组，显示每人持有的徽章和等级（L1-L6）

3.9 文本字段的 AI 辅助

所有文本字段（价值主张、权责描述）都内置 AI 辅助功能。

如何使用 AI 生成

步骤：

1. 点击文本字段旁的 ✨ 按钮
2. AI 开始思考并生成内容
3. 生成过程中：
   • 输入框边框呈蓝色流动动画
   • 文本以流式方式逐步显示
   • 显示「思考中...」或「生成中...」状态
4. 生成完成后，你可以直接编辑修改

AI 生成 vs AI 优化

3.10 实时协作

Xcircle 支持多人同时编辑同一个组织架构，所有修改实时同步。

工作原理

• 编辑器通过 WebSocket 保持实时连接
• 使用 Yjs（CRDT 协议） 确保多人同时编辑不会产生冲突
• 所有人的修改会即时反映在其他协作者的画布上
• 断线期间的修改会在重连后自动同步

连接状态

画布顶部居中位置会在异常时显示连接状态：

💡 小贴士：网络断开后，系统会自动尝试重连（最多 20 次）。重连成功后，断线期间的编辑会自动同步，无需手动操作。如果持续断线，请检查网络连接。

3.11 移动端适配

Xcircle 圈子编辑器在移动端做了专门的适配。

主要差异

底部抽屉面板操作

1. 点击右下角按钮打开底部面板
2. 拖拽顶部的拖动把手调整高度
3. 面板会自动吸附到三个预设高度
4. 点击面板头部的展开/收起按钮快速切换

3.12 快捷键速查表

💡 小贴士：Mac 用户使用 Cmd 键，Windows 用户使用 Ctrl 键。