huangrh
/
fs-lawrisk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
fs-lawrisk/test_org_chart_soft.html

440 lines
18 KiB
HTML
Raw Normal View History

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>
2025-11-17 14:49:23 +08:00
<!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>