80 lines
2.4 KiB
Markdown
80 lines
2.4 KiB
Markdown
# 组织架构配色方案更新 - 柔和版
|
|
|
|
## 反馈与调整
|
|
|
|
根据您的反馈"颜色太刺眼了，背景颜色很淡，这个就没必要搞这么深色了"，我们对组织架构的颜色方案进行了全面调整，采用更柔和、更淡雅的配色。
|
|
|
|
## 新配色方案
|
|
|
|
### 层级 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 效果柔和舒适
|
|
|
|
## 总结
|
|
|
|
新的配色方案在保持清晰层级关系的同时，大幅提升了视觉舒适度：
|
|
- **柔和**: 色彩饱和度降低，不刺眼
|
|
- **淡雅**: 整体感觉清新、现代
|
|
- **专业**: 适合政府部门的正式场景
|
|
- **舒适**: 长时间使用不疲劳
|
|
|
|
这个方案更适合日常办公使用，既保持了专业感，又提供了良好的用户体验。
|