4.4 KiB

Raw Permalink Blame History

组织架构功能修复说明

🐛 修复的问题

1. 搜索功能异常

问题描述:

搜索后文本高亮会累积，导致显示错误
重置搜索后高亮无法清除
DOMContentLoaded事件监听器在页面加载前就执行

修复方案:

✅ 修改searchOrgChart()函数，确保搜索前先清理所有高亮
✅ 恢复原始文本机制：搜索为空时恢复所有节点的原始文本
✅ 使用orgChartData.allNodes缓存数据，在重置时直接读取缓存
✅ 将初始化逻辑改为initOrgSearch()函数，在loadOrgChart()完成后调用

修复代码位置:

searchOrgChart() 函数 (line 1324-1390)
highlightText() 函数 (line 1392-1409)
initOrgSearch() 函数 (line 1411-1457)

2. 连接线样式问题

问题描述:

树状图的连接线是直线延伸，不是直角折线
容易造成视觉误解，以为是线性关系而非层级关系

修复方案:

✅ 修改DOM结构，添加tree-level包装器
✅ 使用伪元素创建直角折线：
- .tree-level::before - 水平连接线
- .tree-node-box::before - 垂直连接线
✅ 根节点不显示向上的连接线
✅ 兼容的CSS选择器（不使用:has()）

HTML结构变化:

<!-- 修复前 -->
<div class="org-tree">
  <div class="tree-node root-node">
    <div class="tree-node-box">根节点</div>
    <div class="tree-children">
      <div class="node-children">
        <div class="tree-node">
          <div class="tree-node-box">子节点</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 修复后 -->
<div class="org-tree">
  <div class="tree-level">
    <div class="tree-node root-node">
      <div class="tree-node-box">根节点</div>
      <div class="tree-children">
        <div class="tree-level">
          <div class="node-children">
            <div class="tree-node">
              <div class="tree-node-box">子节点</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS样式修改:

tree-level::before - 创建水平连接线
tree-node-box::before - 创建垂直连接线
.root-node .tree-node-box::before - 根节点不显示连接线

🎨 视觉效果对比

修复前

根节点 ────
           |
           ├─ 子节点1
           └─ 子节点2

❌ 使用直线，视觉层次不清晰

修复后

     ┌───────┐
     │根节点 │
     └───────┘
        │
    ┌───┴───┐
    │       │
  子1     子2

✅ 使用直角折线，层级关系清晰

📝 技术细节

搜索功能实现

数据缓存: orgChartData.allNodes 存储扁平化数据
文本恢复: 从缓存中恢复原始文本，避免高亮残留
防抖优化: 300ms防抖避免频繁搜索
事件管理: 在DOM加载完成后正确初始化

连接线实现

多层结构:
- org-tree → 根容器
- tree-level → 层级容器
- tree-children → 子节点容器
- node-children → 单个子节点容器
CSS伪元素:
- ::before 垂直线
- ::after 水平线
Z-index层级:
- 节点: z-index: 1
- 连接线: z-index: 0

🚀 使用方法

访问路径：

http://localhost:8000/fs-ai-asistant/api/workflow/lawrisk/admin/super

操作步骤：

登录超级管理员控制台
点击"🌳 组织架构"标签页
查看树状组织架构（现在使用直角折线）
在搜索框中输入关键词进行搜索
观察搜索结果高亮显示
点击"重置"按钮恢复完整视图

✨ 测试案例

搜索测试

输入 "市级" - 高亮显示市级相关部门
输入 "FSSJ" - 高亮显示编码包含FSSJ的部门
输入 "禅城" - 高亮显示禅城区相关部门
清空搜索框 - 自动恢复所有节点原始文本

连接线测试

查看根节点与子节点间的连接线
验证是否为直角折线
确认根节点无向上连接线

📊 修复效果

✅ 搜索功能完全正常 ✅ 连接线改为直角折线 ✅ 层级关系更清晰 ✅ 无视觉误解 ✅ 代码更健壮 ✅ 兼容性更好

修复时间: 2025年11月17日
修复文件:

static/super_admin.html - 前端修复
lawrisk/services/licensing_repo.py - 后端树结构构建
lawrisk/api/v2.py - API端点

状态: ✅ 修复完成并测试通过

4.4 KiB Raw Permalink Blame History Unescape Escape