# 组织树与脑图操作能力一致 Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 让“组织树模式”和“脑图模式”只是展示形式不同，组织节点和人员节点的操作能力完全一致。

**Architecture:** 保留 `SystemPermissionView.vue` 作为唯一组织动作编排层，继续复用现有 `nodeActions(node)`、`runNodeAction(actionKey, node)`、各类 drawer 打开函数和删除/授权函数。`OrgPermissionTree.vue` 只负责展示组织树、选中节点、发出节点菜单事件，不新增第二套业务动作逻辑。

**Tech Stack:** Vue 3 `<script setup>`、现有静态 Node test、Vite、现有 `OrgPermissionTree.vue` / `SystemPermissionView.vue` 组件体系。

---

## File Structure

- Modify: `frontend/src/components/OrgPermissionTree.vue`
  - 增加右侧“节点操作”入口。
  - 继续支持组织树节点右键菜单。
  - 通过 `node-contextmenu` emit 当前节点和菜单坐标，不直接执行业务动作。
  - 调整右侧 header 按钮布局，让“节点操作”和“新增人员”共存。

- Modify: `frontend/src/components/OrgPermissionTree.test.js`
  - 锁定组织树存在“节点操作”按钮。
  - 锁定组织树节点右键仍然 emit `open-menu`。
  - 锁定组织树不新增第二套动作函数，只 emit `node-contextmenu`。

- Modify: `frontend/src/views/SystemPermissionView.vue`
  - 复用现有 `openContextMenu(eventPayload)` 和 `runNodeAction(actionKey, node)`。
  - 必要时给当前节点操作入口提供更稳定的菜单坐标处理。
  - 不复制 `nodeActions` 到子组件。

- Modify: `frontend/src/views/SystemPermissionView.test.js`
  - 锁定组织树仍绑定 `@node-contextmenu="openContextMenu"`。
  - 锁定组织树的“节点操作”最终仍进入同一套 `contextMenuActions` / `runNodeAction`。

- Modify: `frontend/src/styles/main.css` if needed
  - 如果组件 scoped 样式不够覆盖全局表格/抽屉样式，补少量全局样式。
  - 不引入新的视觉体系。

---

## Task 1: 锁定组织树动作入口契约

**Files:**
- Modify: `frontend/src/components/OrgPermissionTree.test.js`

- [ ] **Step 1: 写失败测试，要求组织树有显式节点操作入口**

在 `OrgPermissionTree.test.js` 末尾追加：

```js
describe("OrgPermissionTree node action parity", () => {
  it("exposes a visible current-node action entry that emits the shared node context menu event", () => {
    assert.match(source, /节点操作/);
    assert.match(source, /@click="openSelectedNodeMenu"/);
    assert.match(source, /function openSelectedNodeMenu\(event\)/);
    assert.match(source, /emit\("node-contextmenu"/);
    assert.doesNotMatch(source, /function runNodeAction\(/);
    assert.doesNotMatch(source, /function nodeActions\(/);
  });
});
```

- [ ] **Step 2: 运行测试确认失败**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP/frontend
node src/components/OrgPermissionTree.test.js
```

Expected:

```text
not ok ... exposes a visible current-node action entry ...
```

失败原因应是当前源码没有 `节点操作`、`openSelectedNodeMenu`。

- [ ] **Step 3: 不修改生产代码，先提交测试是不需要的**

此任务只建立红灯，不单独提交。

---

## Task 2: 在组织树右侧 header 增加“节点操作”入口

**Files:**
- Modify: `frontend/src/components/OrgPermissionTree.vue`

- [ ] **Step 1: 修改右侧 header 按钮区**

将当前右侧 header 中的单个“新增人员”按钮：

```vue
<button
  class="primary-button"
  type="button"
  :disabled="!canAddEmployee"
  @click="addEmployee"
>
  新增人员
</button>
```

替换为：

```vue
<div class="employee-head-actions">
  <button
    class="ghost-button node-action-button"
    type="button"
    :disabled="!selectedNode"
    @click="openSelectedNodeMenu"
  >
    节点操作
  </button>
  <button
    class="primary-button"
    type="button"
    :disabled="!canAddEmployee"
    @click="addEmployee"
  >
    新增人员
  </button>
</div>
```

- [ ] **Step 2: 添加 `openSelectedNodeMenu` 函数**

在 `openNodeMenu(payload)` 下方添加：

```js
function openSelectedNodeMenu(event) {
  if (!selectedNode.value) {
    return;
  }
  const rect = event.currentTarget?.getBoundingClientRect?.();
  emit("node-contextmenu", {
    node: selectedNode.value,
    x: rect ? rect.left : event.clientX,
    y: rect ? rect.bottom + 6 : event.clientY
  });
}
```

说明：这里仍然只 emit `node-contextmenu`，由父组件现有 `openContextMenu` 接管菜单，不在子组件里实现动作。

- [ ] **Step 3: 添加 scoped 样式**

在 `.employee-head` 附近增加：

```css
.employee-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.node-action-button {
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: #ffffff;
  color: #334155;
}

.node-action-button:hover:not(:disabled) {
  background: #eff6ff;
  color: #1d4ed8;
}
```

- [ ] **Step 4: 运行组件测试确认 Task 1 变绿**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP/frontend
node src/components/OrgPermissionTree.test.js
```

Expected:

```text
# pass ...
```

---

## Task 3: 锁定父页面复用同一套节点菜单

**Files:**
- Modify: `frontend/src/views/SystemPermissionView.test.js`

- [ ] **Step 1: 写测试确认组织树和脑图共用 `openContextMenu`**

在 `SystemPermissionView.test.js` 末尾追加：

```js
describe("SystemPermissionView organization view action parity", () => {
  it("routes both mind map and tree node actions through the same context menu action pipeline", () => {
    assert.match(source, /<OrgMindMap[\s\S]*?@node-contextmenu="openContextMenu"/);
    assert.match(source, /<OrgPermissionTree[\s\S]*?@node-contextmenu="openContextMenu"/);
    assert.match(source, /const contextMenuActions = computed\(\(\) => \(contextMenu\.node \? nodeActions\(contextMenu\.node\) : \[\]\)\);/);
    assert.match(source, /function runNodeAction\(actionKey, node\)/);
    assert.match(source, /openOrgRenameDrawer\(node\)/);
    assert.match(source, /openOrgManagerDrawer\(node\)/);
    assert.match(source, /openOrgCreateDrawer\(node,\s*"DEPARTMENT"\)/);
    assert.match(source, /openOrgEmployeeDrawer\(node\)/);
  });
});
```

- [ ] **Step 2: 运行测试**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP/frontend
node src/views/SystemPermissionView.test.js
```

Expected:

```text
# pass ...
```

如果失败，说明当前源码实际函数名或字符串不同；不要新增第二套函数，先核对现有 `nodeActions` 和 `runNodeAction`，再调整测试为真实函数名。

---

## Task 4: 优化上下文菜单打开位置与组织树使用体验

**Files:**
- Modify: `frontend/src/views/SystemPermissionView.vue`

- [ ] **Step 1: 检查现有 `openContextMenu`**

确认当前函数类似：

```js
function openContextMenu(eventPayload) {
  selectedNode.value = eventPayload.node;
  contextMenu.visible = true;
  contextMenu.x = eventPayload.x;
  contextMenu.y = eventPayload.y;
  contextMenu.node = eventPayload.node;
}
```

- [ ] **Step 2: 改为带视口保护的位置计算**

将 `openContextMenu` 替换为：

```js
function openContextMenu(eventPayload) {
  selectedNode.value = eventPayload.node;
  const menuWidth = 220;
  const menuHeight = 280;
  const viewportWidth = window.innerWidth || 1280;
  const viewportHeight = window.innerHeight || 720;
  contextMenu.visible = true;
  contextMenu.x = Math.max(12, Math.min(Number(eventPayload.x || 12), viewportWidth - menuWidth - 12));
  contextMenu.y = Math.max(12, Math.min(Number(eventPayload.y || 12), viewportHeight - menuHeight - 12));
  contextMenu.node = eventPayload.node;
}
```

说明：组织树右侧“节点操作”按钮会把菜单开在按钮下方；如果靠右或靠下，菜单不应跑出屏幕。

- [ ] **Step 3: 运行父页面测试**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP/frontend
node src/views/SystemPermissionView.test.js
```

Expected:

```text
# pass ...
```

---

## Task 5: 手动浏览器验收

**Files:**
- No code changes.

- [ ] **Step 1: 打开系统权限管理页面**

Use in-app Browser:

```text
http://localhost:5173/system-permissions
```

- [ ] **Step 2: 验收组织树模式下组织节点操作**

操作：

1. 切换到“组织树模式”。
2. 点击左侧“总公司”节点。
3. 点击右侧“节点操作”。

Expected:

```text
菜单出现，包含：重命名、添加该节点的主管、新增分公司节点。
```

- [ ] **Step 3: 验收分公司节点操作**

操作：

1. 点击“旭升车间”或“嘉恒车间”。
2. 点击“节点操作”。

Expected:

```text
菜单出现，包含：重命名、添加该节点的主管、新增部门节点、删除节点。
```

- [ ] **Step 4: 验收部门节点操作**

操作：

1. 点击“旭升加工部”或“嘉恒生产部”。
2. 点击“节点操作”。

Expected:

```text
菜单出现，包含：重命名、添加该节点的主管、新增小组节点、新增人员、删除节点。
```

- [ ] **Step 5: 验收右键入口**

操作：

1. 在组织树左侧任意组织节点上右键。

Expected:

```text
弹出的菜单内容和右侧“节点操作”按钮一致。
```

- [ ] **Step 6: 验收人员操作仍正常**

操作：

1. 在右侧人员列表点击“人员授权”。
2. 确认弹窗仍为卡片式角色授权界面。
3. 关闭弹窗。

Expected:

```text
人员授权弹窗打开正常，不受节点操作入口影响。
```

---

## Task 6: 回归验证与提交

**Files:**
- All modified files from earlier tasks.

- [ ] **Step 1: 运行关键测试**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP/frontend
node src/components/OrgPermissionTree.test.js
node src/views/SystemPermissionView.test.js
node src/utils/orgTreeEmployees.test.js
node src/App.test.js
```

Expected:

```text
# fail 0
```

- [ ] **Step 2: 运行构建**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP/frontend
npm run build
```

Expected:

```text
✓ built
```

允许出现当前项目既有的大 chunk warning，不作为阻断。

- [ ] **Step 3: 检查 diff**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP
git diff --stat
git diff -- frontend/src/components/OrgPermissionTree.vue frontend/src/components/OrgPermissionTree.test.js frontend/src/views/SystemPermissionView.vue frontend/src/views/SystemPermissionView.test.js
```

Expected:

```text
只包含组织树动作入口、菜单位置保护、相关测试和少量样式。
```

- [ ] **Step 4: 等用户确认后提交 main**

Run only after user confirms:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP
git add frontend/src/components/OrgPermissionTree.vue frontend/src/components/OrgPermissionTree.test.js frontend/src/views/SystemPermissionView.vue frontend/src/views/SystemPermissionView.test.js
git commit -m "补齐组织树节点操作能力"
git push origin main
```

Expected:

```text
main -> main
```

- [ ] **Step 5: 同步 BH_DEV**

Run only after main push succeeds:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP
git switch BH_DEV
git pull --ff-only origin BH_DEV
git cherry-pick <main_commit_hash>
```

Expected:

```text
[BH_DEV <hash>] 补齐组织树节点操作能力
```

- [ ] **Step 6: 在 BH_DEV 运行同样验证并推送**

Run:

```bash
cd /Users/souplearn/Gitlab/py/ForgeFlow-ERP/frontend
node src/components/OrgPermissionTree.test.js
node src/views/SystemPermissionView.test.js
node src/utils/orgTreeEmployees.test.js
node src/App.test.js
npm run build
cd ..
git push origin BH_DEV
```

Expected:

```text
BH_DEV -> BH_DEV
```

---

## Self-Review

**Spec coverage:**  
已覆盖“组织树和脑图只是展示不同，功能一致”的核心要求。组织树右键入口和显式“节点操作”入口都会进入现有 `openContextMenu`，菜单项仍由 `nodeActions` 根据节点类型动态决定。

**Placeholder scan:**  
未使用 TBD/TODO/后续补充。每个任务都有具体文件、代码片段、命令和预期结果。

**Type consistency:**  
计划中使用的函数名与当前代码一致：`openContextMenu`、`nodeActions`、`runNodeAction`、`openOrgCreateDrawer`、`openOrgRenameDrawer`、`openOrgManagerDrawer`、`openOrgEmployeeDrawer`、`openAuthorizeDrawer`、`removeOrgEmployee`、`removeOrgNode`。