6.6 KiB

Raw Permalink Blame History

组织架构视觉改进方案

改进概述

根据您的反馈，我们对组织架构界面进行了全面的视觉优化，使其在视觉上更好地区分上下级关系。新的设计使用颜色渐变、缩进和视觉层次来清晰地展示组织结构的层级关系。

主要改进点

1. 视觉层级分明 - 颜色分级系统

根节点 (Level 0)

背景: 深蓝紫色渐变 linear-gradient(135deg, #4338ca 0%, #6d28d9 100%)
文字: 白色，大字体(18px)，粗体
内边距: 20px (顶部/底部), 24px (左右)
边框: 2px solid #4338ca + 左侧4px强调条
用途: 代表顶级组织，如"佛山市市场监管局服务部门"

二级节点 (Level 1)

背景: 中等紫色渐变 linear-gradient(135deg, #7c3aed 0%, #a855f7 100%)
文字: 白色，较大字体(17px)，中等粗细
内边距: 18px (顶部/底部), 22px (左右)
边框: 2px solid #7c3aed + 左侧4px强调条
左边距: 20px (明显缩进)
用途: 代表区级部门，如"禅城区服务部门"、"南海区服务部门"

三级及以下节点 (Level 2+)

背景: 浅紫色渐变 linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%)
文字: 深色(#1e1b4b)，标准字体(16px)，中等粗细
内边距: 16px (顶部/底部), 20px (左右)
边框: 2px solid #a78bfa + 左侧4px强调条
左边距: 40px (更明显缩进)
用途: 代表具体执行部门，如各区市场监督管理局

2. 增强缩进指示

层级	缩进距离	视觉效果
Level 0 (根)	0px	紧贴左侧，视觉焦点
Level 1 (二级)	20px	清晰缩进，隶属关系
Level 2+ (三级)	40px	明显缩进，次级关系

3. 左侧边框指示系统

每个节点左侧都有一个4px宽的彩色竖条，与节点边框颜色一致：

根节点: #4338ca (深蓝紫)
二级节点: #7c3aed (中紫)
三级节点: #a78bfa (浅紫)

这形成了垂直的视觉引导线，强化了层级关系。

4. 子节点连接线

在 .org-children 容器中添加了左侧垂直连接线：

.org-children::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.1));
}

5. 交互反馈优化

Toggle按钮改进

尺寸: 32x32px (更大，更易点击)
形状: 方形 (现代感)
图标: ▼ (展开) / ▶ (折叠)
颜色: 半透明白色背景，与节点主题色协调
Hover效果: 放大1.05倍 + 阴影效果

节点Hover效果

阴影: 根据层级调整颜色
- 根节点: rgba(67, 56, 202, 0.35)
- 二级节点: rgba(124, 58, 237, 0.35)
- 三级节点: rgba(167, 139, 250, 0.35)
动画: 向上浮动2px
过渡: 0.2s平滑过渡

6. 叶子节点特殊处理

对于没有子节点的叶子节点：

使用 .org-node:not(.has-children) 样式
左边距使用 calc(var(--indent) + 20px)
没有toggle按钮，但有placeholder保持对齐
文字和元数据保持相同格式

7. 元数据标签优化

编码标签 (.node-code)

根/二级节点: 浅色文字，白色背景
三级节点: 深色文字，透明背景
字体加粗，提高可读性

区域标签 (.node-region)

圆角设计 (border-radius: 999px)
半透明背景，与节点主题协调
字体略小 (12px)，不抢夺主要信息焦点

技术实现

CSS类层次结构

/* 基础节点样式 */
.org-node {
    border-radius: 12px;
    border-left: 4px solid;
    box-shadow: 0 4px 12px;
    transition: all 0.2s ease;
}

/* 层级特定样式 */
.org-node[data-level="0"] { ... } /* 根节点 */
.org-node[data-level="1"] { ... } /* 二级节点 */
.org-node[data-level="2"],
.org-node[data-level="3"],
.org-node[data-level="4"],
.org-node[data-level="5"] { ... } /* 三级及以下 */

/* 交互元素 */
.toggle-btn { ... }
.org-children::before { ... } /* 连接线 */

JavaScript增强

在 renderOrgListNode() 函数中添加：

nodeDiv.setAttribute('data-level', level);
nodeDiv.style.setProperty('--indent', `${level * 30}px`);

data-level 属性允许CSS根据层级应用不同的样式。

效果对比

改进前

❌ 所有节点使用相同的背景色 (#f9fafb)
❌ 没有视觉层级区分
❌ 缩进仅20px/层级，不够明显
❌ 没有颜色编码或视觉指示器
❌ Toggle按钮小 (28px)，难以点击

改进后

✅ 三级颜色体系，清晰区分层级
✅ 递增的缩进 (0px → 20px → 40px)
✅ 左侧彩色边框和连接线
✅ 大尺寸toggle按钮 (32px)
✅ 丰富的hover反馈效果
✅ 统一的视觉语言和设计系统

文件修改清单

static/super_admin.html
- 修改 .org-node 及相关CSS类 (行 284-562)
- 更新 renderOrgListNode() JavaScript函数 (行 1297-1303)

浏览器兼容性

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

性能考虑

使用CSS渐变和过渡动画，性能友好
所有动画使用 transform 和 opacity，硬件加速
避免频繁的DOM操作

可扩展性

支持最多6级层级 (data-level="0" 到 "5")
颜色系统可轻松调整
缩进和间距可配置

测试建议

功能测试
- 展开/折叠所有层级的节点
- 搜索功能与视觉样式配合
- Hover效果在所有节点上正常工作
视觉测试
- 验证每个层级的颜色正确
- 检查缩进和对齐
- 确认连接线显示正确
响应式测试
- 在不同屏幕尺寸下测试
- 移动设备上的可用性

后续优化建议

暗色主题支持
- 添加 prefers-color-scheme: dark 媒体查询
- 为暗色模式调整颜色
动画增强
- 添加节点展开/折叠的平滑动画
- 考虑使用 FLIP 技术优化重排
可访问性改进
- 添加 aria-expanded 属性到toggle按钮
- 确保键盘导航支持
- 提升颜色对比度 (WCAG AA)
性能监控
- 添加性能指标收集
- 监控大量节点时的渲染性能

总结

通过这次改进，组织架构界面现在具有：

清晰的视觉层次 - 通过颜色、缩进和边框
直观的层级关系 - 一目了然的上下级关系
现代的设计语言 - 渐变、阴影和过渡动画
良好的交互体验 - 响应式hover和点击反馈
一致的设计系统 - 可扩展和可维护的代码结构

这些改进使组织架构更加易于理解和使用，特别适合展示复杂的政府部门层级结构。

6.6 KiB Raw Permalink Blame History Unescape Escape