229 lines
6.6 KiB
Markdown
229 lines
6.6 KiB
Markdown
# 组织架构视觉改进方案
|
||
|
||
## 改进概述
|
||
|
||
根据您的反馈，我们对组织架构界面进行了全面的视觉优化，使其在视觉上更好地区分上下级关系。新的设计使用颜色渐变、缩进和视觉层次来清晰地展示组织结构的层级关系。
|
||
|
||
## 主要改进点
|
||
|
||
### 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` 容器中添加了左侧垂直连接线：
|
||
```css
|
||
.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类层次结构
|
||
|
||
```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()` 函数中添加：
|
||
```javascript
|
||
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反馈效果
|
||
- ✅ 统一的视觉语言和设计系统
|
||
|
||
## 文件修改清单
|
||
|
||
1. **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")
|
||
- 颜色系统可轻松调整
|
||
- 缩进和间距可配置
|
||
|
||
## 测试建议
|
||
|
||
1. **功能测试**
|
||
- 展开/折叠所有层级的节点
|
||
- 搜索功能与视觉样式配合
|
||
- Hover效果在所有节点上正常工作
|
||
|
||
2. **视觉测试**
|
||
- 验证每个层级的颜色正确
|
||
- 检查缩进和对齐
|
||
- 确认连接线显示正确
|
||
|
||
3. **响应式测试**
|
||
- 在不同屏幕尺寸下测试
|
||
- 移动设备上的可用性
|
||
|
||
## 后续优化建议
|
||
|
||
1. **暗色主题支持**
|
||
- 添加 `prefers-color-scheme: dark` 媒体查询
|
||
- 为暗色模式调整颜色
|
||
|
||
2. **动画增强**
|
||
- 添加节点展开/折叠的平滑动画
|
||
- 考虑使用 FLIP 技术优化重排
|
||
|
||
3. **可访问性改进**
|
||
- 添加 `aria-expanded` 属性到toggle按钮
|
||
- 确保键盘导航支持
|
||
- 提升颜色对比度 (WCAG AA)
|
||
|
||
4. **性能监控**
|
||
- 添加性能指标收集
|
||
- 监控大量节点时的渲染性能
|
||
|
||
---
|
||
|
||
## 总结
|
||
|
||
通过这次改进，组织架构界面现在具有：
|
||
|
||
1. **清晰的视觉层次** - 通过颜色、缩进和边框
|
||
2. **直观的层级关系** - 一目了然的上下级关系
|
||
3. **现代的设计语言** - 渐变、阴影和过渡动画
|
||
4. **良好的交互体验** - 响应式hover和点击反馈
|
||
5. **一致的设计系统** - 可扩展和可维护的代码结构
|
||
|
||
这些改进使组织架构更加易于理解和使用，特别适合展示复杂的政府部门层级结构。
|