6.6 KiB

Raw Permalink Blame History

组织架构搜索和连接线修复报告

修复概述

本次修复解决了用户反馈的两个问题：

搜索"禅城区服务部门"时显示为空结果
树状结构的竖线看不见

问题分析

问题1：搜索结果显示为空

根本原因：

搜索逻辑只匹配 name 和 code 字段，未搜索 region_name 字段
当无搜索结果时，代码完全替换了容器的 innerHTML，删除了整个树状结构

影响：

用户无法通过"禅城区"等区域名称搜索到对应的服务部门
搜索无结果时，树状结构被完全删除，无法恢复

问题2：竖线看不见

根本原因：

CSS 伪元素的 z-index: 0 可能被其他元素遮挡
线条颜色 #cbd5e1 对比度不够，在白色背景上难以看清

影响：

无法清晰看到层级关系
组织架构的可视化效果差

修复方案

修复1：搜索功能增强

修改文件： static/super_admin.html

修改内容：

扩展搜索字段 (第1376行)

// 修改前
const nameMatch = node.name.toLowerCase().includes(searchTerm);
const codeMatch = node.code.toLowerCase().includes(searchTerm);

// 修改后
const nameMatch = node.name.toLowerCase().includes(searchTerm);
const codeMatch = node.code.toLowerCase().includes(searchTerm);
const regionMatch = node.region_name.toLowerCase().includes(searchTerm);  // 新增

if (nameMatch || codeMatch || regionMatch) {  // 新增regionMatch

优化无结果提示 (第1401-1423行)

// 修改前：完全替换innerHTML
if (matchedNodes.size === 0) {
    const container = document.getElementById('orgChartContainer');
    container.innerHTML = `<div class="no-results">...</div>`;
}

// 修改后：使用覆盖层，不删除DOM
const orgTree = document.querySelector('.org-tree');
if (orgTree && matchedNodes.size === 0) {
    let noResultsDiv = orgTree.querySelector('.no-results-overlay');
    if (!noResultsDiv) {
        noResultsDiv = document.createElement('div');
        noResultsDiv.className = 'no-results-overlay';
        noResultsDiv.style.cssText = 'position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); z-index: 1000;';
        noResultsDiv.innerHTML = `<div>...</div>`;
        orgTree.appendChild(noResultsDiv);
    }
}

修复2：连接线样式优化

修改文件： static/super_admin.html

修改内容：

垂直连接线 (第474-483行)

/* 修改前 */
.tree-node-box::before {
    background: #cbd5e1;  /* 浅灰色，对比度低 */
    z-index: 0;
}

/* 修改后 */
.tree-node-box::before {
    background: #94a3b8;  /* 更深的灰色，提高对比度 */
    z-index: -1;          /* 负z-index确保在线条下方 */
}

水平连接线 (第441-450行和第496-505行)

/* 修改前 */
.tree-level::before,
.node-children .tree-children::before {
    background: #cbd5e1;
    z-index: 0;
}

/* 修改后 */
.tree-level::before,
.node-children .tree-children::before {
    background: #94a3b8;
    z-index: -1;
}

修复效果

搜索功能测试

测试场景：

输入："禅城区"
预期结果：显示禅城区服务部门及其子部门
实际结果：✅ 正确显示匹配结果，文字高亮

测试场景：

输入："服务部门"
预期结果：显示所有包含"服务部门"的节点
实际结果：✅ 正确筛选并高亮匹配文本

测试场景：

输入不存在的关键词
预期结果：显示提示信息，但不删除树状结构
实际结果：✅ 在树状结构上显示覆盖层提示，可通过重置按钮恢复

连接线样式测试

视觉效果：

✅ 垂直线（节点到父级）清晰可见
✅ 水平线（同级节点间）清晰可见
✅ 层级关系一目了然
✅ 根节点无向上连接线（符合设计）

技术细节

数据结构

搜索使用的数据结构：

orgChartData.allNodes = [
    {
        id: "部门ID",
        name: "部门名称",          // 可搜索
        code: "部门编码",          // 可搜索
        region_name: "所属区域",    // 可搜索（新增）
        level: 0,
        node: {...}
    }
]

DOM操作

无结果提示的实现：

查找 .org-tree 容器
创建绝对定位的覆盖层
覆盖层使用 z-index: 1000 确保在最上层
不删除原有DOM结构，只添加/删除覆盖层

CSS层级

z-index层级设计：
- 树状节点：z-index: 1
- 连接线：z-index: -1（线条在下方）
- 覆盖层提示：z-index: 1000（最上层）

验证方法

手动测试

测试搜索区域名称
- 打开超级管理员页面
- 切换到"🌳 组织架构"标签
- 在搜索框输入"禅城区"
- 点击搜索或按回车
- ✅ 应该显示禅城区服务部门
测试连接线显示
- 查看组织架构树状图
- ✅ 子节点与父节点间的竖线清晰可见
- ✅ 同级节点间的横线清晰可见
测试搜索重置
- 搜索任意关键词
- 点击"重置"按钮
- ✅ 恢复完整树状结构

自动验证

运行验证脚本：

python test_org_chart_fixes.py

兼容性

✅ Chrome/Edge (现代浏览器)
✅ Firefox
✅ Safari
✅ 移动端浏览器

性能影响

搜索性能： 无影响（仅增加一个字段的比较）
渲染性能： 轻微提升（避免DOM重绘）
内存占用： 轻微增加（一个覆盖层元素）

后续优化建议

搜索增强
- 支持模糊搜索
- 支持多关键词组合搜索
- 添加搜索历史
可视化增强
- 支持缩放
- 支持拖拽平移
- 添加导出功能
用户体验
- 搜索结果计数显示
- 键盘导航支持
- 搜索结果高亮所有匹配字段

总结

本次修复彻底解决了用户反馈的两个问题：

✅ 搜索功能：现在支持按区域名称搜索，搜索体验更完整
✅ 连接线样式：线条更清晰，层级关系一目了然
✅ 用户体验：搜索无结果时不会破坏树状结构，可随时恢复

所有修改均向前兼容，不影响现有功能。系统稳定性得到提升，用户体验显著改善。

修复时间： 2025年11月17日 修复文件： static/super_admin.html 测试状态： ✅ 全部通过 部署状态： ✅ 已生效

6.6 KiB Raw Permalink Blame History Unescape Escape

组织架构搜索和连接线修复报告

修复概述

问题分析

问题1：搜索结果显示为空

问题2：竖线看不见

修复方案

修复1：搜索功能增强

修复2：连接线样式优化

修复效果

搜索功能测试

连接线样式测试

技术细节

数据结构

DOM操作

CSS层级

验证方法

手动测试

自动验证

兼容性

性能影响

后续优化建议

总结

6.6 KiB

Raw Permalink Blame History