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 914c8ed99f
commit b74a4ad6d4
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-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\)/);
});
});

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

@ -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;
}