From 6d87a2e1cd1512bb4e8030954b06ddb58702d537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=A4=E5=AD=A6=E4=BC=9A?= <tangxuehui@wondersgroup.com>
Date: Mon, 15 Jun 2026 02:21:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E7=BB=87=E6=A0=91?=
 =?UTF-8?q?=E7=81=B0=E8=89=B2=E8=99=9A=E7=BA=BF=E8=BF=9E=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/OrgPermissionTree.test.js  |  6 +++
 frontend/src/components/OrgPermissionTree.vue | 45 ++++++++-----------
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/OrgPermissionTree.test.js b/frontend/src/components/OrgPermissionTree.test.js
index 02d4bc0..08689a5 100644
--- a/frontend/src/components/OrgPermissionTree.test.js
+++ b/frontend/src/components/OrgPermissionTree.test.js
@@ -14,7 +14,13 @@ describe("OrgPermissionTree hierarchy lines", () => {
     assert.doesNotMatch(source, /\.org-tree-children::before/);
     assert.doesNotMatch(source, /^\.org-tree-branch::before/m);
     assert.match(source, /--tree-connector-x/);
+    assert.match(source, /--tree-node-start/);
+    assert.match(source, /--tree-arrow-gap/);
     assert.match(source, /--tree-connector-color/);
+    assert.match(source, /--tree-connector-color:\s*rgba\(148,\s*163,\s*184/);
     assert.match(source, /--tree-connector-width:\s*2px/);
+    assert.match(source, /border-left:\s*var\(--tree-connector-width\)\s*dashed\s*var\(--tree-connector-color\)/);
+    assert.match(source, /border-top:\s*var\(--tree-connector-width\)\s*dashed\s*var\(--tree-connector-color\)/);
+    assert.doesNotMatch(source, /background:\s*var\(--tree-connector-color\)/);
   });
 });
diff --git a/frontend/src/components/OrgPermissionTree.vue b/frontend/src/components/OrgPermissionTree.vue
index 70e2bde..65a16c8 100644
--- a/frontend/src/components/OrgPermissionTree.vue
+++ b/frontend/src/components/OrgPermissionTree.vue
@@ -267,9 +267,12 @@ function organizationChildren(node) {
 }
 
 function treeLevelStyle(level) {
+  const numericLevel = Math.max(Number(level || 0), 0);
+
   return {
-    "--tree-level": level,
-    "--tree-connector-x": `${15 + Number(level || 0) * 22}px`
+    "--tree-level": numericLevel,
+    "--tree-connector-x": `${15 + Math.max(numericLevel - 1, 0) * 22}px`,
+    "--tree-node-start": `${6 + numericLevel * 22}px`
   };
 }
 
@@ -577,9 +580,9 @@ function removeEmployee(employee) {
 }
 
 .org-tree-list {
-  --tree-connector-color: rgba(29, 78, 216, 0.9);
+  --tree-connector-color: rgba(148, 163, 184, 0.92);
   --tree-connector-width: 2px;
-  --tree-connector-arm: 20px;
+  --tree-arrow-gap: 6px;
   --tree-node-center: 20px;
   display: flex;
   flex: 1;
@@ -605,11 +608,8 @@ function removeEmployee(employee) {
   top: calc(-1 * var(--tree-connector-width));
   bottom: calc(-1 * var(--tree-connector-width));
   left: var(--tree-connector-x);
-  width: var(--tree-connector-width);
-  background: var(--tree-connector-color);
-  border-radius: 999px;
-  box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
-  transform: translateX(-50%);
+  width: 0;
+  border-left: var(--tree-connector-width) dashed var(--tree-connector-color);
   pointer-events: none;
 }
 
@@ -639,12 +639,10 @@ function removeEmployee(employee) {
   content: "";
   position: absolute;
   top: var(--tree-node-center);
-  left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2);
-  width: var(--tree-connector-arm);
-  height: var(--tree-connector-width);
-  background: var(--tree-connector-color);
-  border-radius: 999px;
-  box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
+  left: var(--tree-connector-x);
+  width: max(8px, calc(var(--tree-node-start) - var(--tree-connector-x) - var(--tree-arrow-gap)));
+  height: 0;
+  border-top: var(--tree-connector-width) dashed var(--tree-connector-color);
   pointer-events: none;
 }
 
@@ -811,11 +809,8 @@ function removeEmployee(employee) {
   top: calc(-1 * var(--tree-connector-width));
   bottom: calc(-1 * var(--tree-connector-width));
   left: var(--tree-connector-x);
-  width: var(--tree-connector-width);
-  background: var(--tree-connector-color);
-  border-radius: 999px;
-  box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
-  transform: translateX(-50%);
+  width: 0;
+  border-left: var(--tree-connector-width) dashed var(--tree-connector-color);
   pointer-events: none;
 }
 
@@ -846,12 +841,10 @@ function removeEmployee(employee) {
   content: "";
   position: absolute;
   top: var(--tree-node-center);
-  left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2);
-  width: var(--tree-connector-arm);
-  height: var(--tree-connector-width);
-  background: var(--tree-connector-color);
-  border-radius: 999px;
-  box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
+  left: var(--tree-connector-x);
+  width: max(8px, calc(var(--tree-node-start) - var(--tree-connector-x) - var(--tree-arrow-gap)));
+  height: 0;
+  border-top: var(--tree-connector-width) dashed var(--tree-connector-color);
   pointer-events: none;
 }