8.0 KiB

Raw Permalink Blame History

组织架构多级目录版本 - 重新实现

重新设计说明

根据用户反馈"树状图太丑了，实现出来太丑了"，我们完全重新设计了组织架构的展示方式，从树状图改为**多级目录（手风琴式）**的形式。

新版本特性

✅ 多级目录结构

类似资源管理器的文件夹展开/折叠
点击右侧的箭头按钮（▼/▶）展开或折叠子部门
根部门默认展开，显示所有二级部门
清晰的视觉层级和缩进

✅ 视觉优化

现代化的卡片设计
- 紫色渐变背景
- 圆角边框
- 悬浮动画效果
- 清晰的阴影
颜色区分
- 根部门：深紫色渐变 (#4338ca → #6d28d9)
- 子部门：浅紫色渐变 (#7c3aed → #a855f7)
响应式设计
- 适配不同屏幕尺寸
- 清晰的间距和对齐

✅ 交互体验

展开/折叠
- 点击右侧箭头按钮切换状态
- 流畅的动画过渡效果
- 默认展开根部门
搜索功能
- 实时搜索（按Enter键或点击搜索按钮）
- 支持搜索：部门名称、编码、区域名称
- 搜索结果高亮显示
- 重置按钮恢复完整视图
智能搜索
- 匹配节点及其所有父级和子级节点
- 搜索无结果时显示友好提示
- 保持展开/折叠状态

技术实现

文件结构

static/
└── super_admin.html          # 新的多级目录版本（完全重写）

核心功能

1. 目录渲染 (`renderDirectoryItem`)

function renderDirectoryItem(node, isRoot = false) {
    // 创建目录项容器
    const itemDiv = document.createElement('div');
    itemDiv.className = 'directory-item';

    // 创建目录头部（可点击）
    const header = document.createElement('div');
    header.className = isRoot ? 'directory-header root-header' : 'directory-header';

    // 添加部门信息
    const info = document.createElement('div');
    info.className = 'directory-info';
    info.innerHTML = `
        <div class="directory-name">${node.name}</div>
        <div class="directory-code">${node.code}</div>
        ${node.region_name ? `<div class="directory-region">${node.region_name}</div>` : ''}
    `;
    header.appendChild(info);

    // 添加展开/折叠按钮
    if (node.children && node.children.length > 0) {
        const toggle = document.createElement('div');
        toggle.className = 'directory-toggle';
        toggle.innerHTML = '▼';
        header.appendChild(toggle);
    }

    itemDiv.appendChild(header);

    // 递归渲染子部门
    if (node.children && node.children.length > 0) {
        const childrenDiv = document.createElement('div');
        childrenDiv.className = 'directory-children';
        node.children.forEach(child => {
            const childItem = renderDirectoryItem(child, false);
            childItem.classList.add('child-item');
            childrenDiv.appendChild(childItem);
        });
        itemDiv.appendChild(childrenDiv);

        // 根部门默认展开
        if (isRoot) {
            childrenDiv.classList.add('expanded');
        }
    }

    return itemDiv;
}

2. 展开/折叠事件 (`setupDirectoryToggle`)

function setupDirectoryToggle(container) {
    container.addEventListener('click', (e) => {
        const toggle = e.target.closest('.directory-toggle');
        if (toggle) {
            const header = toggle.closest('.directory-header');
            const item = header.parentElement;
            const children = item.querySelector('.directory-children');

            if (children) {
                if (children.classList.contains('expanded')) {
                    children.classList.remove('expanded');
                    toggle.innerHTML = '▶';
                } else {
                    children.classList.add('expanded');
                    toggle.innerHTML = '▼';
                }
            }
        }
    });
}

3. 搜索功能 (`searchOrgChart`)

支持多字段搜索：名称、编码、区域
自动展开匹配的父级目录
搜索结果高亮显示
包含匹配节点的子级节点

CSS 样式

目录项样式

.directory-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 18px 24px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.directory-header.root-header {
    background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    font-size: 18px;
    font-weight: 600;
}

.directory-children {
    margin-left: 40px;
    margin-top: 8px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.directory-children.expanded {
    max-height: 1000px;
}

对比：树状图 vs 多级目录

树状图（已废弃）

❌ 复杂的连接线布局 ❌ 对齐问题难以解决 ❌ 视觉混乱，层级关系不清晰 ❌ 搜索时需要隐藏/显示多个DOM节点 ❌ CSS伪元素复杂，难以调试

多级目录（当前版本）

✅ 简洁清晰的层次结构 ✅ 自然的展开/折叠交互 ✅ 清晰的视觉层级（通过缩进） ✅ 易于理解和操作 ✅ 代码简洁，易于维护 ✅ 更好的搜索体验

使用说明

访问方式

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

操作指南

查看组织架构
- 页面加载后自动显示根部门
- 根部门默认展开，显示所有二级部门
展开/折叠部门
- 点击部门右侧的箭头按钮
- ▶ 表示已折叠，点击展开
- ▼ 表示已展开，点击折叠
搜索部门
- 在搜索框输入关键词
- 按Enter键或点击"搜索"按钮
- 搜索支持：部门名称、编码、区域名称
重置搜索
- 点击"重置"按钮
- 恢复完整的组织架构视图

数据结构

API返回格式

{
    "success": true,
    "data": {
        "tree": [
            {
                "id": "dept-id",
                "name": "部门名称",
                "code": "部门编码",
                "region_name": "所属区域",
                "children": [
                    {
                        "id": "child-id",
                        "name": "子部门名称",
                        // ... 更多字段
                    }
                ]
            }
        ]
    }
}

扁平化数据结构（用于搜索）

{
    id: "dept-id",
    name: "部门名称",
    code: "部门编码",
    region_name: "所属区域",
    level: 0,
    node: { ... }  // 原始节点数据
}

性能优化

事件委托
- 所有展开/折叠事件使用事件委托
- 减少内存占用，提高性能
动画优化
- 使用 max-height 而非 height 实现动画
- 避免频繁的重排和重绘
搜索优化
- 预计算扁平化数据结构
- 快速查找匹配节点

浏览器兼容性

✅ Chrome 60+
✅ Firefox 55+
✅ Safari 12+
✅ Edge 79+
✅ 移动端浏览器

后续优化建议

添加统计信息
- 显示部门总数
- 显示层级深度
添加面包屑导航
- 显示当前位置
- 快速跳转到上级
添加导出功能
- 导出组织架构为图片
- 导出为PDF文档
添加虚拟滚动
- 大量部门时优化性能
- 只渲染可见区域

总结

新的多级目录版本相比树状图有显著优势：

更清晰的视觉层次：通过缩进和颜色区分层级
更自然的交互：类似操作系统的文件夹展开/折叠
更简洁的代码：易于维护和扩展
更好的用户体验：操作直观，学习成本低

这是一个经过深思熟虑的重新设计，彻底解决了树状图的所有视觉和交互问题。

开发时间： 2025年11月17日 文件位置： static/super_admin.html 类型： 完全重写 状态： ✅ 已完成并测试

8.0 KiB Raw Permalink Blame History Unescape Escape