171 lines
4.4 KiB
Markdown
171 lines
4.4 KiB
Markdown
# 组织架构功能修复说明
|
||
|
||
## 🐛 修复的问题
|
||
|
||
### 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结构变化**:
|
||
```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
|
||
```
|
||
✅ 使用直角折线，层级关系清晰
|
||
|
||
## 📝 技术细节
|
||
|
||
### 搜索功能实现
|
||
|
||
1. **数据缓存**: `orgChartData.allNodes` 存储扁平化数据
|
||
2. **文本恢复**: 从缓存中恢复原始文本，避免高亮残留
|
||
3. **防抖优化**: 300ms防抖避免频繁搜索
|
||
4. **事件管理**: 在DOM加载完成后正确初始化
|
||
|
||
### 连接线实现
|
||
|
||
1. **多层结构**:
|
||
- `org-tree` → 根容器
|
||
- `tree-level` → 层级容器
|
||
- `tree-children` → 子节点容器
|
||
- `node-children` → 单个子节点容器
|
||
|
||
2. **CSS伪元素**:
|
||
- `::before` 垂直线
|
||
- `::after` 水平线
|
||
|
||
3. **Z-index层级**:
|
||
- 节点: `z-index: 1`
|
||
- 连接线: `z-index: 0`
|
||
|
||
## 🚀 使用方法
|
||
|
||
访问路径：
|
||
```
|
||
http://localhost:8000/fs-ai-asistant/api/workflow/lawrisk/admin/super
|
||
```
|
||
|
||
操作步骤：
|
||
1. 登录超级管理员控制台
|
||
2. 点击"🌳 组织架构"标签页
|
||
3. 查看树状组织架构（现在使用直角折线）
|
||
4. 在搜索框中输入关键词进行搜索
|
||
5. 观察搜索结果高亮显示
|
||
6. 点击"重置"按钮恢复完整视图
|
||
|
||
## ✨ 测试案例
|
||
|
||
### 搜索测试
|
||
- 输入 "市级" - 高亮显示市级相关部门
|
||
- 输入 "FSSJ" - 高亮显示编码包含FSSJ的部门
|
||
- 输入 "禅城" - 高亮显示禅城区相关部门
|
||
- 清空搜索框 - 自动恢复所有节点原始文本
|
||
|
||
### 连接线测试
|
||
- 查看根节点与子节点间的连接线
|
||
- 验证是否为直角折线
|
||
- 确认根节点无向上连接线
|
||
|
||
## 📊 修复效果
|
||
|
||
✅ 搜索功能完全正常
|
||
✅ 连接线改为直角折线
|
||
✅ 层级关系更清晰
|
||
✅ 无视觉误解
|
||
✅ 代码更健壮
|
||
✅ 兼容性更好
|
||
|
||
---
|
||
|
||
**修复时间**: 2025年11月17日
|
||
**修复文件**:
|
||
- `static/super_admin.html` - 前端修复
|
||
- `lawrisk/services/licensing_repo.py` - 后端树结构构建
|
||
- `lawrisk/api/v2.py` - API端点
|
||
|
||
**状态**: ✅ 修复完成并测试通过
|