tangxh/ForgeFlow-ERP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化组织树灰色虚线连接

Browse Source
This commit is contained in:
汤学会 2026-06-15 02:21:01 +08:00
parent 707db3a482
commit 6d87a2e1cd
2 changed files with 25 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/OrgPermissionTree.test.js
View File

@ -14,7 +14,13 @@ describe("OrgPermissionTree hierarchy lines", () => {
assert.doesNotMatch(source, /\.org-tree-children::before/); assert.doesNotMatch(source, /\.org-tree-children::before/);
assert.doesNotMatch(source, /^\.org-tree-branch::before/m); assert.doesNotMatch(source, /^\.org-tree-branch::before/m);
assert.match(source, /--tree-connector-x/); 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/);
assert.match(source, /--tree-connector-color:\s*rgba\(148,\s*163,\s*184/);
assert.match(source, /--tree-connector-width:\s*2px/); 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\)/);
}); });
}); });

45
frontend/src/components/OrgPermissionTree.vue
View File

@ -267,9 +267,12 @@ function organizationChildren(node) {
} }
function treeLevelStyle(level) { function treeLevelStyle(level) {
const numericLevel = Math.max(Number(level || 0), 0);
return { return {
"--tree-level": level, "--tree-level": numericLevel,
"--tree-connector-x": `${15 + Number(level || 0) * 22}px` "--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 { .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-width: 2px;
--tree-connector-arm: 20px; --tree-arrow-gap: 6px;
--tree-node-center: 20px; --tree-node-center: 20px;
display: flex; display: flex;
flex: 1; flex: 1;
@ -605,11 +608,8 @@ function removeEmployee(employee) {
top: calc(-1 * var(--tree-connector-width)); top: calc(-1 * var(--tree-connector-width));
bottom: calc(-1 * var(--tree-connector-width)); bottom: calc(-1 * var(--tree-connector-width));
left: var(--tree-connector-x); left: var(--tree-connector-x);
width: var(--tree-connector-width); width: 0;
background: var(--tree-connector-color); border-left: var(--tree-connector-width) dashed var(--tree-connector-color);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
transform: translateX(-50%);
pointer-events: none; pointer-events: none;
} }
@ -639,12 +639,10 @@ function removeEmployee(employee) {
content: ""; content: "";
position: absolute; position: absolute;
top: var(--tree-node-center); top: var(--tree-node-center);
left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2); left: var(--tree-connector-x);
width: var(--tree-connector-arm); width: max(8px, calc(var(--tree-node-start) - var(--tree-connector-x) - var(--tree-arrow-gap)));
height: var(--tree-connector-width); height: 0;
background: var(--tree-connector-color); border-top: var(--tree-connector-width) dashed var(--tree-connector-color);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
pointer-events: none; pointer-events: none;
} }
@ -811,11 +809,8 @@ function removeEmployee(employee) {
top: calc(-1 * var(--tree-connector-width)); top: calc(-1 * var(--tree-connector-width));
bottom: calc(-1 * var(--tree-connector-width)); bottom: calc(-1 * var(--tree-connector-width));
left: var(--tree-connector-x); left: var(--tree-connector-x);
width: var(--tree-connector-width); width: 0;
background: var(--tree-connector-color); border-left: var(--tree-connector-width) dashed var(--tree-connector-color);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
transform: translateX(-50%);
pointer-events: none; pointer-events: none;
} }
@ -846,12 +841,10 @@ function removeEmployee(employee) {
content: ""; content: "";
position: absolute; position: absolute;
top: var(--tree-node-center); top: var(--tree-node-center);
left: calc(var(--tree-connector-x) - var(--tree-connector-width) / 2); left: var(--tree-connector-x);
width: var(--tree-connector-arm); width: max(8px, calc(var(--tree-node-start) - var(--tree-connector-x) - var(--tree-arrow-gap)));
height: var(--tree-connector-width); height: 0;
background: var(--tree-connector-color); border-top: var(--tree-connector-width) dashed var(--tree-connector-color);
border-radius: 999px;
box-shadow: 0 0 0 1px rgba(219, 234, 254, 0.85);
pointer-events: none; pointer-events: none;
} }