feat: improve org chart visual design with soft color scheme
## 改进内容 ### 视觉优化 - 实现三级颜色体系区分组织层级（根/二级/三级节点） - 调整配色为柔和淡雅的浅色系，不再刺眼 - 增强缩进指示（0px → 20px → 40px） - 添加左侧彩色边框和垂直连接线 ### 交互体验 - 优化toggle按钮（32x32px，易于点击） - 改进hover效果（柔和阴影 + 轻微浮动） - 添加平滑过渡动画（0.2s） ### 配色方案 - 根节点：淡蓝紫渐变 + 深蓝紫文字 - 二级节点：淡紫渐变 + 深紫文字 - 三级节点：很浅淡紫 + 深紫文字 - 所有节点均采用浅色背景配深色文字，舒适不刺眼 ### 文件变更 - static/super_admin.html: 更新CSS样式和JavaScript逻辑 - 添加配色方案更新文档和视觉改进说明 - 创建柔和配色预览页面 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Codex Agent
parent
3a9bf9aeca
commit
942884fe4b
|
|
@ -0,0 +1,79 @@
|
|||
# 组织架构配色方案更新 - 柔和版
|
||||
|
||||
## 反馈与调整
|
||||
|
||||
根据您的反馈"颜色太刺眼了，背景颜色很淡，这个就没必要搞这么深色了"，我们对组织架构的颜色方案进行了全面调整，采用更柔和、更淡雅的配色。
|
||||
|
||||
## 新配色方案
|
||||
|
||||
### 层级 0 - 根节点
|
||||
- **背景**: 淡蓝紫渐变 `#e0e7ff → #f0f4ff`
|
||||
- **文字**: 深蓝紫色 `#312e81` (不刺眼)
|
||||
- **边框**: 柔和蓝色 `#818cf8`
|
||||
- **标签背景**: `#e0e7ff`
|
||||
|
||||
### 层级 1 - 二级节点
|
||||
- **背景**: 淡紫渐变 `#ede9fe → #f3e8ff`
|
||||
- **文字**: 深紫色 `#5b21b6` (温和)
|
||||
- **边框**: 柔和紫色 `#a78bfa`
|
||||
- **标签背景**: `#ede9fe`
|
||||
|
||||
### 层级 2+ - 三级节点
|
||||
- **背景**: 很浅淡紫 `#f5f3ff → #faf5ff`
|
||||
- **文字**: 深紫色 `#4c1d95` (非常柔和)
|
||||
- **边框**: 很浅紫色 `#c4b5fd`
|
||||
- **标签背景**: `#f5f3ff`
|
||||
|
||||
## 主要改进
|
||||
|
||||
### ✅ 视觉舒适度提升
|
||||
- **之前**: 深色背景 + 白色文字，色彩饱和度高，刺眼
|
||||
- **现在**: 浅色背景 + 深色文字，色彩柔和，不刺眼
|
||||
|
||||
### ✅ 保持层级区分
|
||||
- 通过背景色的深浅变化区分层级
|
||||
- 保持缩进距离不变 (0px → 20px → 40px)
|
||||
- 左侧边框颜色渐变，层次清晰
|
||||
|
||||
### ✅ 对比度优化
|
||||
- 深色文字配浅色背景，符合 WCAG 可读性标准
|
||||
- 避免长时间使用的视觉疲劳
|
||||
- 在浅色背景下文字清晰易读
|
||||
|
||||
### ✅ 阴影效果柔和
|
||||
- 降低阴影不透明度至 0.25
|
||||
- 使用对应主题色作为阴影色
|
||||
- Hover 效果明显但不突兀
|
||||
|
||||
## 文件修改
|
||||
|
||||
**static/super_admin.html** (行 308-562)
|
||||
- 调整所有层级的背景渐变色
|
||||
- 修改文字颜色为深色系
|
||||
- 降低边框和阴影强度
|
||||
- 优化标签和按钮颜色
|
||||
|
||||
## 预览效果
|
||||
|
||||
您可以通过以下方式查看新的柔和配色：
|
||||
1. 直接访问 `static/super_admin.html` (已更新)
|
||||
2. 查看独立预览页：`test_org_chart_soft.html`
|
||||
|
||||
## 测试验证
|
||||
|
||||
已通过自动化测试验证：
|
||||
- ✅ 根节点配色柔和正确
|
||||
- ✅ 5个二级节点配色统一
|
||||
- ✅ 6个三级节点配色淡雅
|
||||
- ✅ Toggle 按钮交互正常
|
||||
- ✅ Hover 效果柔和舒适
|
||||
|
||||
## 总结
|
||||
|
||||
新的配色方案在保持清晰层级关系的同时，大幅提升了视觉舒适度：
|
||||
- **柔和**: 色彩饱和度降低，不刺眼
|
||||
- **淡雅**: 整体感觉清新、现代
|
||||
- **专业**: 适合政府部门的正式场景
|
||||
- **舒适**: 长时间使用不疲劳
|
||||
|
||||
这个方案更适合日常办公使用，既保持了专业感，又提供了良好的用户体验。
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
# 组织架构视觉改进方案
|
||||
|
||||
## 改进概述
|
||||
|
||||
根据您的反馈，我们对组织架构界面进行了全面的视觉优化，使其在视觉上更好地区分上下级关系。新的设计使用颜色渐变、缩进和视觉层次来清晰地展示组织结构的层级关系。
|
||||
|
||||
## 主要改进点
|
||||
|
||||
### 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. **一致的设计系统** - 可扩展和可维护的代码结构
|
||||
|
||||
这些改进使组织架构更加易于理解和使用，特别适合展示复杂的政府部门层级结构。
|
||||
|
|
@ -276,140 +276,289 @@
|
|||
padding: 10px 0 30px;
|
||||
}
|
||||
|
||||
.org-tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
#orgChartContainer {
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.tree-node-box {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 16px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
|
||||
min-width: 200px;
|
||||
max-width: 280px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tree-node-box:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 28px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.tree-node.root-node > .tree-node-box {
|
||||
background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
|
||||
border: 2px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.tree-node-box .node-name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tree-node-box .node-code {
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tree-node-box .node-region {
|
||||
font-size: 12px;
|
||||
opacity: 0.85;
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tree-level {
|
||||
.org-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 28px;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.tree-level.root-level {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
.org-node {
|
||||
--indent: 0px;
|
||||
border-radius: 12px;
|
||||
background: #f9fafb;
|
||||
border-left: 4px solid #cbd5e1;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tree-level:not(.root-level) {
|
||||
margin-top: 40px;
|
||||
padding-top: 26px;
|
||||
.org-node:hover {
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tree-level:not(.root-level)::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #94a3b8;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tree-level.single-child::before {
|
||||
.org-node.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree-children {
|
||||
/* 层级 0 - 根节点 */
|
||||
.org-node[data-level="0"] {
|
||||
background: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 100%);
|
||||
border-left-color: #818cf8;
|
||||
border: 2px solid #818cf8;
|
||||
}
|
||||
|
||||
.org-node[data-level="0"] .node-name {
|
||||
color: #312e81;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.org-node[data-level="0"] .org-node-meta .node-code {
|
||||
color: #4338ca;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.org-node[data-level="0"] .org-node-meta .node-region {
|
||||
background: #e0e7ff;
|
||||
color: #4338ca;
|
||||
border: 1px solid #c7d2fe;
|
||||
}
|
||||
|
||||
.org-node[data-level="0"] .toggle-btn {
|
||||
background: #e0e7ff;
|
||||
border-color: #818cf8;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.org-node[data-level="0"] .toggle-btn:hover {
|
||||
background: #c7d2fe;
|
||||
}
|
||||
|
||||
/* 层级 1 - 二级节点 */
|
||||
.org-node[data-level="1"] {
|
||||
background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
|
||||
border-left-color: #a78bfa;
|
||||
border: 2px solid #a78bfa;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.org-node[data-level="1"] .node-name {
|
||||
color: #5b21b6;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.org-node[data-level="1"] .org-node-meta .node-code {
|
||||
color: #6d28d9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.org-node[data-level="1"] .org-node-meta .node-region {
|
||||
background: #ede9fe;
|
||||
color: #6d28d9;
|
||||
border: 1px solid #ddd6fe;
|
||||
}
|
||||
|
||||
.org-node[data-level="1"] .toggle-btn {
|
||||
background: #ede9fe;
|
||||
border-color: #a78bfa;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.org-node[data-level="1"] .toggle-btn:hover {
|
||||
background: #ddd6fe;
|
||||
}
|
||||
|
||||
/* 层级 2+ - 三级及以下节点 */
|
||||
.org-node[data-level="2"],
|
||||
.org-node[data-level="3"],
|
||||
.org-node[data-level="4"],
|
||||
.org-node[data-level="5"] {
|
||||
background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
|
||||
border-left-color: #c4b5fd;
|
||||
border: 2px solid #c4b5fd;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.org-node[data-level="2"] .node-name,
|
||||
.org-node[data-level="3"] .node-name,
|
||||
.org-node[data-level="4"] .node-name,
|
||||
.org-node[data-level="5"] .node-name {
|
||||
color: #4c1d95;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.org-node[data-level="2"] .org-node-meta .node-code,
|
||||
.org-node[data-level="3"] .org-node-meta .node-code,
|
||||
.org-node[data-level="4"] .org-node-meta .node-code,
|
||||
.org-node[data-level="5"] .org-node-meta .node-code {
|
||||
color: #6d28d9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.org-node[data-level="2"] .org-node-meta .node-region,
|
||||
.org-node[data-level="3"] .org-node-meta .node-region,
|
||||
.org-node[data-level="4"] .org-node-meta .node-region,
|
||||
.org-node[data-level="5"] .org-node-meta .node-region {
|
||||
background: #f5f3ff;
|
||||
color: #6d28d9;
|
||||
border: 1px solid #e9d5ff;
|
||||
}
|
||||
|
||||
.org-node[data-level="2"] .toggle-btn,
|
||||
.org-node[data-level="3"] .toggle-btn,
|
||||
.org-node[data-level="4"] .toggle-btn,
|
||||
.org-node[data-level="5"] .toggle-btn {
|
||||
background: #f5f3ff;
|
||||
border-color: #c4b5fd;
|
||||
color: #6d28d9;
|
||||
}
|
||||
|
||||
.org-node[data-level="2"] .toggle-btn:hover,
|
||||
.org-node[data-level="3"] .toggle-btn:hover,
|
||||
.org-node[data-level="4"] .toggle-btn:hover,
|
||||
.org-node[data-level="5"] .toggle-btn:hover {
|
||||
background: #e9d5ff;
|
||||
}
|
||||
|
||||
.org-node-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
margin-top: 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.node-children {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
padding-left: calc(var(--indent) + 20px);
|
||||
}
|
||||
|
||||
.org-node[data-level="0"] .org-node-header {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.org-node[data-level="1"] .org-node-header {
|
||||
padding: 18px 22px;
|
||||
}
|
||||
|
||||
.org-node-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.org-node .node-name {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.org-node-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.org-node-meta .node-code {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.org-node-meta .node-region {
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.org-node-actions {
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
min-width: 160px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #c7d2fe;
|
||||
background: #eef2ff;
|
||||
color: #4338ca;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(67, 56, 202, 0.2);
|
||||
}
|
||||
|
||||
.toggle-btn::before {
|
||||
content: '▼';
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.toggle-btn.collapsed::before {
|
||||
content: '▶';
|
||||
}
|
||||
|
||||
.toggle-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.org-children {
|
||||
padding-bottom: 8px;
|
||||
position: relative;
|
||||
padding: 20px 14px 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.node-children::before {
|
||||
.org-children::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: #94a3b8;
|
||||
z-index: 0;
|
||||
background: linear-gradient(to bottom, rgba(99, 102, 241, 0.3), rgba(99, 102, 241, 0.1));
|
||||
}
|
||||
|
||||
.tree-node.has-children > .tree-node-box::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: #94a3b8;
|
||||
transform: translateX(-50%);
|
||||
z-index: 0;
|
||||
.org-node.has-children.collapsed > .org-children {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 叶子节点样式（无子节点） */
|
||||
.org-node:not(.has-children) {
|
||||
margin-left: calc(var(--indent) + 20px);
|
||||
}
|
||||
|
||||
.org-node:not(.has-children) .org-node-header {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* 增强的hover效果 */
|
||||
.org-node[data-level="0"]:hover {
|
||||
box-shadow: 0 12px 28px rgba(129, 140, 248, 0.25);
|
||||
}
|
||||
|
||||
.org-node[data-level="1"]:hover {
|
||||
box-shadow: 0 12px 28px rgba(167, 139, 250, 0.25);
|
||||
}
|
||||
|
||||
.org-node[data-level="2"]:hover,
|
||||
.org-node[data-level="3"]:hover,
|
||||
.org-node[data-level="4"]:hover,
|
||||
.org-node[data-level="5"]:hover {
|
||||
box-shadow: 0 12px 28px rgba(196, 181, 253, 0.25);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
|
@ -697,7 +846,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="org-chart-container">
|
||||
<div class="org-tree" id="orgChartContainer">
|
||||
<div class="org-list-root" id="orgChartContainer">
|
||||
<div class="loading">正在加载组织架构...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1133,73 +1282,140 @@ function getMaxLevel(nodes, level = 0) {
|
|||
function renderOrgTree(tree) {
|
||||
if (!orgChartContainer) return;
|
||||
orgChartContainer.innerHTML = '';
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'org-tree';
|
||||
orgChartContainer.appendChild(wrapper);
|
||||
|
||||
const rootLevel = document.createElement('div');
|
||||
rootLevel.className = 'tree-level root-level';
|
||||
wrapper.appendChild(rootLevel);
|
||||
|
||||
if (!tree.length) {
|
||||
orgChartContainer.innerHTML = '<div class="loading">暂无组织架构数据</div>';
|
||||
return;
|
||||
}
|
||||
const list = document.createElement('div');
|
||||
list.className = 'org-list';
|
||||
tree.forEach(node => {
|
||||
rootLevel.appendChild(renderTreeNode(node, true));
|
||||
list.appendChild(renderOrgListNode(node, 0));
|
||||
});
|
||||
orgChartContainer.appendChild(list);
|
||||
}
|
||||
|
||||
function renderTreeNode(node, isRoot = false) {
|
||||
function renderOrgListNode(node, level) {
|
||||
const nodeId = node.id != null ? String(node.id) : '';
|
||||
const nodeDiv = document.createElement('div');
|
||||
nodeDiv.className = isRoot ? 'tree-node root-node' : 'tree-node';
|
||||
nodeDiv.setAttribute('data-node-id', node.id != null ? String(node.id) : '');
|
||||
nodeDiv.className = 'org-node';
|
||||
nodeDiv.setAttribute('data-node-id', nodeId);
|
||||
nodeDiv.setAttribute('data-level', level);
|
||||
nodeDiv.style.setProperty('--indent', `${level * 30}px`);
|
||||
|
||||
const nodeBox = document.createElement('div');
|
||||
nodeBox.className = 'tree-node-box';
|
||||
const header = document.createElement('div');
|
||||
header.className = 'org-node-header';
|
||||
header.setAttribute('data-node-id', nodeId);
|
||||
|
||||
const nameSpan = document.createElement('span');
|
||||
const hasChildren = Array.isArray(node.children) && node.children.length > 0;
|
||||
if (hasChildren) {
|
||||
nodeDiv.classList.add('has-children');
|
||||
const toggleBtn = document.createElement('button');
|
||||
toggleBtn.type = 'button';
|
||||
toggleBtn.className = 'toggle-btn';
|
||||
header.appendChild(toggleBtn);
|
||||
const shouldExpand = level <= 1;
|
||||
nodeDiv.dataset.defaultExpanded = shouldExpand ? 'true' : 'false';
|
||||
setNodeExpanded(nodeDiv, shouldExpand, toggleBtn);
|
||||
toggleBtn.addEventListener('click', (evt) => {
|
||||
evt.stopPropagation();
|
||||
const willExpand = nodeDiv.classList.contains('collapsed');
|
||||
setNodeExpanded(nodeDiv, willExpand, toggleBtn);
|
||||
});
|
||||
} else {
|
||||
const spacer = document.createElement('div');
|
||||
spacer.className = 'toggle-placeholder';
|
||||
header.appendChild(spacer);
|
||||
nodeDiv.dataset.defaultExpanded = 'true';
|
||||
}
|
||||
|
||||
const info = document.createElement('div');
|
||||
info.className = 'org-node-info';
|
||||
const nameSpan = document.createElement('div');
|
||||
nameSpan.className = 'node-name';
|
||||
nameSpan.textContent = node.name || '未知部门';
|
||||
nodeBox.appendChild(nameSpan);
|
||||
info.appendChild(nameSpan);
|
||||
|
||||
const metaRow = document.createElement('div');
|
||||
metaRow.className = 'org-node-meta';
|
||||
if (node.code) {
|
||||
const codeSpan = document.createElement('span');
|
||||
codeSpan.className = 'node-code';
|
||||
codeSpan.textContent = node.code;
|
||||
nodeBox.appendChild(codeSpan);
|
||||
metaRow.appendChild(codeSpan);
|
||||
}
|
||||
|
||||
if (node.region_name) {
|
||||
const regionSpan = document.createElement('span');
|
||||
regionSpan.className = 'node-region';
|
||||
regionSpan.textContent = node.region_name;
|
||||
nodeBox.appendChild(regionSpan);
|
||||
metaRow.appendChild(regionSpan);
|
||||
}
|
||||
if (!metaRow.children.length) {
|
||||
metaRow.style.display = 'none';
|
||||
}
|
||||
info.appendChild(metaRow);
|
||||
header.appendChild(info);
|
||||
addTooltip(header, node);
|
||||
nodeDiv.appendChild(header);
|
||||
|
||||
addTooltip(nodeBox, node);
|
||||
nodeDiv.appendChild(nodeBox);
|
||||
|
||||
if (node.children && node.children.length) {
|
||||
nodeDiv.classList.add('has-children');
|
||||
const childrenWrapper = document.createElement('div');
|
||||
childrenWrapper.className = 'tree-children';
|
||||
const nextLevel = document.createElement('div');
|
||||
nextLevel.className = 'tree-level';
|
||||
if (node.children.length === 1) {
|
||||
nextLevel.classList.add('single-child');
|
||||
}
|
||||
|
||||
if (hasChildren) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
node.children.forEach(child => {
|
||||
const childHolder = document.createElement('div');
|
||||
childHolder.className = 'node-children';
|
||||
childHolder.appendChild(renderTreeNode(child, false));
|
||||
nextLevel.appendChild(childHolder);
|
||||
fragment.appendChild(renderOrgListNode(child, level + 1));
|
||||
});
|
||||
|
||||
childrenWrapper.appendChild(nextLevel);
|
||||
const childrenWrapper = document.createElement('div');
|
||||
childrenWrapper.className = 'org-children';
|
||||
childrenWrapper.appendChild(fragment);
|
||||
nodeDiv.appendChild(childrenWrapper);
|
||||
}
|
||||
|
||||
return nodeDiv;
|
||||
}
|
||||
|
||||
function findToggleButton(nodeElement) {
|
||||
const nodeId = nodeElement.getAttribute('data-node-id');
|
||||
if (!nodeId) {
|
||||
return nodeElement.querySelector('.org-node-header > .toggle-btn');
|
||||
}
|
||||
return nodeElement.querySelector(`.org-node-header[data-node-id="${nodeId}"] > .toggle-btn`);
|
||||
}
|
||||
|
||||
function setNodeExpanded(nodeElement, expanded, toggleBtn) {
|
||||
if (!nodeElement.classList.contains('has-children')) {
|
||||
return;
|
||||
}
|
||||
nodeElement.classList.toggle('collapsed', !expanded);
|
||||
const button = toggleBtn || findToggleButton(nodeElement);
|
||||
if (button) {
|
||||
button.classList.toggle('collapsed', !expanded);
|
||||
button.classList.toggle('expanded', expanded);
|
||||
button.setAttribute('aria-expanded', expanded ? 'true' : 'false');
|
||||
}
|
||||
}
|
||||
|
||||
function restoreDefaultCollapseState() {
|
||||
document.querySelectorAll('#orgChartContainer .org-node.has-children').forEach(nodeDiv => {
|
||||
const defaultExpanded = nodeDiv.dataset.defaultExpanded !== 'false';
|
||||
setNodeExpanded(nodeDiv, defaultExpanded);
|
||||
});
|
||||
}
|
||||
|
||||
function expandPathToNode(nodeId) {
|
||||
let currentId = nodeId;
|
||||
while (currentId) {
|
||||
const nodeElement = document.querySelector(`#orgChartContainer .org-node[data-node-id="${currentId}"]`);
|
||||
if (nodeElement) {
|
||||
setNodeExpanded(nodeElement, true);
|
||||
}
|
||||
currentId = orgChartData.parentMap[currentId];
|
||||
}
|
||||
}
|
||||
|
||||
function ensureSearchVisibility(matchedNodes) {
|
||||
matchedNodes.forEach(nodeId => {
|
||||
expandPathToNode(nodeId);
|
||||
});
|
||||
}
|
||||
|
||||
function addTooltip(element, node) {
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.className = 'tooltip';
|
||||
|
|
@ -1240,7 +1456,7 @@ function searchOrgChart(query) {
|
|||
orgChartData.allNodes.forEach(node => {
|
||||
const nameMatch = node.name.toLowerCase().includes(searchTerm);
|
||||
const codeMatch = node.code.toLowerCase().includes(searchTerm);
|
||||
const regionMatch = node.region_name.toLowerCase().includes(searchTerm);
|
||||
const regionMatch = (node.region_name || '').toLowerCase().includes(searchTerm);
|
||||
if (nameMatch || codeMatch || regionMatch) {
|
||||
matchedNodes.add(node.id);
|
||||
includeAncestorNodes(node.id, matchedNodes);
|
||||
|
|
@ -1254,7 +1470,7 @@ function searchOrgChart(query) {
|
|||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.org-tree .tree-node').forEach(nodeDiv => {
|
||||
document.querySelectorAll('#orgChartContainer .org-node').forEach(nodeDiv => {
|
||||
const nodeId = nodeDiv.getAttribute('data-node-id');
|
||||
if (nodeId && matchedNodes.has(nodeId)) {
|
||||
nodeDiv.classList.remove('hidden');
|
||||
|
|
@ -1263,11 +1479,14 @@ function searchOrgChart(query) {
|
|||
}
|
||||
});
|
||||
|
||||
if (matchedNodes.size) {
|
||||
ensureSearchVisibility(matchedNodes);
|
||||
}
|
||||
toggleNoResultsOverlay(matchedNodes.size === 0);
|
||||
}
|
||||
|
||||
function highlightText(searchTerm, nodeId, field) {
|
||||
const nodeDiv = document.querySelector(`.tree-node[data-node-id="${nodeId}"]`);
|
||||
const nodeDiv = document.querySelector(`#orgChartContainer .org-node[data-node-id="${nodeId}"]`);
|
||||
if (!nodeDiv) return;
|
||||
const element = nodeDiv.querySelector(field === 'name' ? '.node-name' : '.node-code');
|
||||
if (!element) return;
|
||||
|
|
@ -1298,7 +1517,7 @@ function includeDescendantNodes(nodeData, matchedNodes) {
|
|||
}
|
||||
|
||||
function resetOrgSearchView(clearInput = false) {
|
||||
document.querySelectorAll('.org-tree .tree-node').forEach(nodeDiv => {
|
||||
document.querySelectorAll('#orgChartContainer .org-node').forEach(nodeDiv => {
|
||||
nodeDiv.classList.remove('hidden');
|
||||
const nodeId = nodeDiv.getAttribute('data-node-id');
|
||||
const nodeData = orgChartData.nodeMap[nodeId];
|
||||
|
|
@ -1308,6 +1527,7 @@ function resetOrgSearchView(clearInput = false) {
|
|||
if (nameEl) nameEl.textContent = nodeData.name;
|
||||
if (codeEl) codeEl.textContent = nodeData.code;
|
||||
});
|
||||
restoreDefaultCollapseState();
|
||||
if (clearInput) {
|
||||
const input = document.getElementById('orgSearchInput');
|
||||
if (input) input.value = '';
|
||||
|
|
@ -1317,9 +1537,7 @@ function resetOrgSearchView(clearInput = false) {
|
|||
|
||||
function toggleNoResultsOverlay(show) {
|
||||
if (!orgChartContainer) return;
|
||||
const treeRoot = orgChartContainer.querySelector('.org-tree');
|
||||
if (!treeRoot) return;
|
||||
let overlay = treeRoot.querySelector('.no-results-overlay');
|
||||
let overlay = orgChartContainer.querySelector('.no-results-overlay');
|
||||
if (show) {
|
||||
if (!overlay) {
|
||||
overlay = document.createElement('div');
|
||||
|
|
@ -1336,7 +1554,7 @@ function toggleNoResultsOverlay(show) {
|
|||
resetOrgSearchView(true);
|
||||
});
|
||||
overlay.appendChild(closeBtn);
|
||||
treeRoot.appendChild(overlay);
|
||||
orgChartContainer.appendChild(overlay);
|
||||
}
|
||||
} else if (overlay) {
|
||||
overlay.remove();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,439 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>组织架构预览 - 柔和版</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
color: #111827;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.org-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.org-node {
|
||||
--indent: 0px;
|
||||
border-radius: 12px;
|
||||
background: #f9fafb;
|
||||
border-left: 4px solid #cbd5e1;
|
||||
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.org-node:hover {
|
||||
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.org-node.hidden {
|
||||
display: none;
|
||||
}
|
||||
/* 层级 0 - 根节点 - 柔和蓝紫色 */
|
||||
.org-node[data-level="0"] {
|
||||
background: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 100%);
|
||||
border-left-color: #818cf8;
|
||||
border: 2px solid #818cf8;
|
||||
}
|
||||
.org-node[data-level="0"] .node-name {
|
||||
color: #312e81;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.org-node[data-level="0"] .org-node-meta .node-code {
|
||||
color: #4338ca;
|
||||
font-weight: 600;
|
||||
}
|
||||
.org-node[data-level="0"] .org-node-meta .node-region {
|
||||
background: #e0e7ff;
|
||||
color: #4338ca;
|
||||
border: 1px solid #c7d2fe;
|
||||
}
|
||||
.org-node[data-level="0"] .toggle-btn {
|
||||
background: #e0e7ff;
|
||||
border-color: #818cf8;
|
||||
color: #4338ca;
|
||||
}
|
||||
.org-node[data-level="0"] .toggle-btn:hover {
|
||||
background: #c7d2fe;
|
||||
}
|
||||
/* 层级 1 - 二级节点 - 柔和紫色 */
|
||||
.org-node[data-level="1"] {
|
||||
background: linear-gradient(135deg, #ede9fe 0%, #f3e8ff 100%);
|
||||
border-left-color: #a78bfa;
|
||||
border: 2px solid #a78bfa;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.org-node[data-level="1"] .node-name {
|
||||
color: #5b21b6;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.org-node[data-level="1"] .org-node-meta .node-code {
|
||||
color: #6d28d9;
|
||||
font-weight: 600;
|
||||
}
|
||||
.org-node[data-level="1"] .org-node-meta .node-region {
|
||||
background: #ede9fe;
|
||||
color: #6d28d9;
|
||||
border: 1px solid #ddd6fe;
|
||||
}
|
||||
.org-node[data-level="1"] .toggle-btn {
|
||||
background: #ede9fe;
|
||||
border-color: #a78bfa;
|
||||
color: #6d28d9;
|
||||
}
|
||||
.org-node[data-level="1"] .toggle-btn:hover {
|
||||
background: #ddd6fe;
|
||||
}
|
||||
/* 层级 2+ - 三级及以下节点 - 很浅的淡紫色 */
|
||||
.org-node[data-level="2"],
|
||||
.org-node[data-level="3"],
|
||||
.org-node[data-level="4"],
|
||||
.org-node[data-level="5"] {
|
||||
background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
|
||||
border-left-color: #c4b5fd;
|
||||
border: 2px solid #c4b5fd;
|
||||
margin-left: 40px;
|
||||
}
|
||||
.org-node[data-level="2"] .node-name,
|
||||
.org-node[data-level="3"] .node-name,
|
||||
.org-node[data-level="4"] .node-name,
|
||||
.org-node[data-level="5"] .node-name {
|
||||
color: #4c1d95;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.org-node[data-level="2"] .org-node-meta .node-code,
|
||||
.org-node[data-level="3"] .org-node-meta .node-code,
|
||||
.org-node[data-level="4"] .org-node-meta .node-code,
|
||||
.org-node[data-level="5"] .org-node-meta .node-code {
|
||||
color: #6d28d9;
|
||||
font-weight: 600;
|
||||
}
|
||||
.org-node[data-level="2"] .org-node-meta .node-region,
|
||||
.org-node[data-level="3"] .org-node-meta .node-region,
|
||||
.org-node[data-level="4"] .org-node-meta .node-region,
|
||||
.org-node[data-level="5"] .org-node-meta .node-region {
|
||||
background: #f5f3ff;
|
||||
color: #6d28d9;
|
||||
border: 1px solid #e9d5ff;
|
||||
}
|
||||
.org-node[data-level="2"] .toggle-btn,
|
||||
.org-node[data-level="3"] .toggle-btn,
|
||||
.org-node[data-level="4"] .toggle-btn,
|
||||
.org-node[data-level="5"] .toggle-btn {
|
||||
background: #f5f3ff;
|
||||
border-color: #c4b5fd;
|
||||
color: #6d28d9;
|
||||
}
|
||||
.org-node[data-level="2"] .toggle-btn:hover,
|
||||
.org-node[data-level="3"] .toggle-btn:hover,
|
||||
.org-node[data-level="4"] .toggle-btn:hover,
|
||||
.org-node[data-level="5"] .toggle-btn:hover {
|
||||
background: #e9d5ff;
|
||||
}
|
||||
.org-node-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
padding-left: calc(var(--indent) + 20px);
|
||||
}
|
||||
.org-node[data-level="0"] .org-node-header {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
.org-node[data-level="1"] .org-node-header {
|
||||
padding: 18px 22px;
|
||||
}
|
||||
.org-node-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.org-node .node-name {
|
||||
line-height: 1.4;
|
||||
}
|
||||
.org-node-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.org-node-meta .node-code {
|
||||
font-weight: 500;
|
||||
}
|
||||
.org-node-meta .node-region {
|
||||
padding: 2px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.toggle-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #c7d2fe;
|
||||
background: #eef2ff;
|
||||
color: #4338ca;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.toggle-btn:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(67, 56, 202, 0.2);
|
||||
}
|
||||
.toggle-btn::before {
|
||||
content: '▼';
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
.toggle-btn.collapsed::before {
|
||||
content: '▶';
|
||||
}
|
||||
.toggle-placeholder {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.org-children {
|
||||
padding-bottom: 8px;
|
||||
position: relative;
|
||||
}
|
||||
.org-children::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.05));
|
||||
}
|
||||
.org-node.has-children.collapsed > .org-children {
|
||||
display: none;
|
||||
}
|
||||
.org-node:not(.has-children) {
|
||||
margin-left: calc(var(--indent) + 20px);
|
||||
}
|
||||
.org-node:not(.has-children) .org-node-header {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.org-node[data-level="0"]:hover {
|
||||
box-shadow: 0 12px 28px rgba(129, 140, 248, 0.25);
|
||||
}
|
||||
.org-node[data-level="1"]:hover {
|
||||
box-shadow: 0 12px 28px rgba(167, 139, 250, 0.25);
|
||||
}
|
||||
.org-node[data-level="2"]:hover,
|
||||
.org-node[data-level="3"]:hover,
|
||||
.org-node[data-level="4"]:hover,
|
||||
.org-node[data-level="5"]:hover {
|
||||
box-shadow: 0 12px 28px rgba(196, 181, 253, 0.25);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🌳 组织架构预览 - 柔和配色版</h1>
|
||||
<div class="org-list">
|
||||
<!-- 根节点 -->
|
||||
<div class="org-node has-children" data-level="0">
|
||||
<div class="org-node-header">
|
||||
<button type="button" class="toggle-btn expanded"></button>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">佛山市市场监管局服务部门</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-001</span>
|
||||
<span class="node-region">佛山市</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-children">
|
||||
<!-- 二级节点 1 -->
|
||||
<div class="org-node has-children" data-level="1">
|
||||
<div class="org-node-header">
|
||||
<button type="button" class="toggle-btn expanded"></button>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">禅城区服务部门</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-CCQ</span>
|
||||
<span class="node-region">禅城区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-children">
|
||||
<!-- 三级节点 -->
|
||||
<div class="org-node" data-level="2">
|
||||
<div class="org-node-header">
|
||||
<div class="toggle-placeholder"></div>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">禅城区市场监督管理局</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-CCQ-001</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-node" data-level="2">
|
||||
<div class="org-node-header">
|
||||
<div class="toggle-placeholder"></div>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">禅城区知识产权局</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-CCQ-002</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级节点 2 -->
|
||||
<div class="org-node has-children" data-level="1">
|
||||
<div class="org-node-header">
|
||||
<button type="button" class="toggle-btn expanded"></button>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">南海区服务部门</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-NHQ</span>
|
||||
<span class="node-region">南海区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-children">
|
||||
<div class="org-node" data-level="2">
|
||||
<div class="org-node-header">
|
||||
<div class="toggle-placeholder"></div>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">南海区市场监督管理局</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-NHQ-001</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级节点 3 -->
|
||||
<div class="org-node has-children" data-level="1">
|
||||
<div class="org-node-header">
|
||||
<button type="button" class="toggle-btn expanded"></button>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">顺德区服务部门</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-SDQ</span>
|
||||
<span class="node-region">顺德区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-children">
|
||||
<div class="org-node" data-level="2">
|
||||
<div class="org-node-header">
|
||||
<div class="toggle-placeholder"></div>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">顺德区市场监督管理局</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-SDQ-001</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级节点 4 -->
|
||||
<div class="org-node has-children" data-level="1">
|
||||
<div class="org-node-header">
|
||||
<button type="button" class="toggle-btn expanded"></button>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">三水区服务部门</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-SSQ</span>
|
||||
<span class="node-region">三水区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-children">
|
||||
<div class="org-node" data-level="2">
|
||||
<div class="org-node-header">
|
||||
<div class="toggle-placeholder"></div>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">三水区市场监督管理局</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-SSQ-001</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级节点 5 -->
|
||||
<div class="org-node has-children" data-level="1">
|
||||
<div class="org-node-header">
|
||||
<button type="button" class="toggle-btn expanded"></button>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">高明区服务部门</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-GMQ</span>
|
||||
<span class="node-region">高明区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="org-children">
|
||||
<div class="org-node" data-level="2">
|
||||
<div class="org-node-header">
|
||||
<div class="toggle-placeholder"></div>
|
||||
<div class="org-node-info">
|
||||
<div class="node-name">高明区市场监督管理局</div>
|
||||
<div class="org-node-meta">
|
||||
<span class="node-code">FS-ADMIN-GMQ-001</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 添加toggle功能
|
||||
document.querySelectorAll('.toggle-btn').forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
const nodeDiv = btn.closest('.org-node');
|
||||
const willExpand = btn.classList.contains('collapsed');
|
||||
btn.classList.toggle('collapsed', !willExpand);
|
||||
btn.classList.toggle('expanded', willExpand);
|
||||
nodeDiv.classList.toggle('collapsed', !willExpand);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue