<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=
1.0">
<title>CAD属性块分类树状视图</title>
<style>
/* 禁用整个页面的滚动条 */
html, body {
margin
: 0;
padding
: 0;
height
: 100%;
width
: 100%;
overflow
: hidden;
font-family
: "
Helvetica Neue",
Helvetica,
Arial, "PingFang SC", "Hiragino
Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei",
sans-serif;
white
-space
: nowrap;
}
/* 主容器
- 固定宽度避免闪烁 */
.container {
display
: flex;
flex
-direction
: column;
height
: 100vh;
width
: 100vw;
max
-width
: 100vw;
overflow
: hidden;
background
-color
: rgba(2
55, 2
55, 2
55, 0
.9);
position
: relative;
}
/* 标题样式 */
.header {
background
: linear
-gradient(to right, #2c3e
50, #4a649
1);
color
: white;
padding
: 15px 20
px;
text
-align
: center;
box
-shadow
: 0 4
px 6
px rgba(0, 0, 0, 0
.1);
}
.header h
1 {
margin
: 0;
font-size
: 24
px;
font-weight
: 600;
}
/* 内容区域 */
.content {
display
: flex;
flex
: 1;
overflow
: hidden;
flex
-direction
: column;
flex
-wrap
: nowrap;
justify
-content
: flex
-start;
}
.icon {
color
: #f
1c40f;
padding
-right
: 3
px;
}
/* 树状结构容器 */
.tree
-container {
flex
: 1;
background
: rgb(
59 68 83);
color
: white;
box
-shadow
: 0 2
px 10
px rgba(0, 0, 0, 0
.08);
padding
: 0
px 5px 5px 5px;
display
: flex;
flex
-direction
: column;
overflow
: hidden;
}
/* 树状结构样式 */
.tree {
list
-style
: none;
padding
: 0;
margin
: 0;
}
.tree,
.tree ul {
list
-style
: none;
padding
-left
: 2
5px;
}
.tree li {
margin
: 2
px 0;
position
: relative;
}
.node {
display
: flex;
cursor
: pointer;
transition
: all 0
.2s;
background
-color
: rgb(0 0 0 / 3
5%);
flex
-direction
: row;
flex
-wrap
: nowrap;
justify
-content
: flex
-start;
white
-space
: nowrap;
font-size
: 1rem;
}
.node
:hover {
background
-color
: #877739;
}
.toggle {
width
: 20
px;
height
: 20
px;
margin
-right
: 10
px;
display
: flex;
align
-items
: center;
justify
-content
: center;
background
-color
: #4a6
572;
color
: white;
font-size
: 14
px;
cursor
: pointer;
transition
: all 0
.2s;
}
.toggle
:hover {
background
-color
: #3449
55;
}
.node
-name {
flex
: 1;
color
: white;
}
.node
-count {
padding
: 2
px 8
px;
border
-radius
: 10
px;
font-size
: 12px;
min
-width
: 30
px;
text
-align
: center;
}
/* 自定义滚动条 */
.tree
-scroll {
flex
: 1;
overflow
-y
: scroll;
overflow
-x
: auto;
padding
-right
: 5px;
border
: 1px solid rgb(0 0 0);
box
-shadow
: 0
1px 1px rgb(
59 63 89);
}
/* 自定义滚动条样式 */
.tree
-scroll
::-webkit
-scrollbar {
width
: 0
px;
}
/* 整个水平滚动条容器 */
.tree
-scroll
::-webkit
-scrollbar
:horizontal {
height
: 10
px;
}
.tree
-scroll
::-webkit
-scrollbar
-track {
background
: #f
1f
1f
1;
border
-radius
: 1px;
}
/* 水平滚动条轨道 */
.tree
-scroll
::-webkit
-scrollbar
-track
:horizontal {
background
: #f
1f
1f
1; /* 轨道背景色 */
border
-radius
: 5px; /* 圆角 */
}
.tree
-scroll
::-webkit
-scrollbar
-thumb {
background
: #a0a0a0;
border
-radius
: 1px;
}
/* 水平滚动条滑块 */
.tree
-scroll
::-webkit
-scrollbar
-thumb
:horizontal {
border
-radius
: 5px; /* 滑块圆角 */
border
: 1px solid #f
1f
1f
1; /* 滑块边框 */
}
.tree
-scroll
::-webkit
-scrollbar
-thumb
:hover {
background
: #808080;
}
/* 鼠标悬停时滑块样式 */
.tree
-scroll
::-webkit
-scrollbar
-thumb
:horizontal
:hover {
background
: #808080;
}
/* 统计信息面板 */
.stats
-panel header {
font-size
: 14
px;
color
: white;
border
-bottom
: 1px dashed rgb(0 0 0);
}
.stats
-panel {
width
: auto;
margin
-left
: 0;
margin
-top
: 5px;
border
: 1px solid rgb(0 0 0);
}
.stat
-item {
font-size
: 12px;
display
: flex;
justify
-content
: space
-between;
border
-bottom
: 1px dashed rgb(0 0 0);
flex
-direction
: row;
flex
-wrap
: nowrap;
text
-align
: center;
}
.stat
-item
:last
-child {
border
-bottom
: none;
}
.stat
-label {
flex
: 1;
color
: #f
1c40f;
display
: flex;
flex
-direction
: row;
flex
-wrap
: nowrap;
text
-align
: center;
justify
-content
: flex
-start;
align
-items
: center;
white
-space
: nowrap;
padding
-left
: 2
px;
border
-right
: 1px dashed rgb(0 0 0);
}
.stat
-value {
flex
: 1;
color
: #4ec3af;
display
: flex;
white
-space
: nowrap;
flex
-direction
: row;
flex
-wrap
: nowrap;
text
-align
: center;
justify
-content
: flex
-end;
align
-items
: center;
padding
-right
: 2
px;
}
.search
-box {
width
: 10%;
position
: relative;
margin
-top
: 2
px;
border
-bottom
: 1px solid rgb(0 0 0);
}
.search
-box input {
padding
: 0
px 15px 0
px 5px;
border
-radius
: 30
px;
font-size
: 14
px;
outline
: none;
transition
: all 0
.3s;
}
.search
-box input
:focus {
}
.search
-icon {
position
: absolute;
left
: 15px;
top
: 50%;
transform
: translateY(
-50%);
color
: #7f8c8d;
}
/* 响应式设计 */
@media (max
-width
: 768
px) {
.content {
flex
-direction
: column;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="tree
-container">
<div class="tree
-scroll" id="treeScroll">
<ul class="tree" id="treeRoot">
<!
-- 树状结构将通过JavaScript动态生成
-->
</ul>
</div>
<div class="stats
-panel">
<header>属性</header>
<div class="stat
-item">
<span class="stat
-label">名称
:</span>
<span class="stat
-value" id="att_tag
1">气动隔膜阀</span>
</div>
<div class="stat
-item">
<span class="stat
-label">位号
:</span>
<span class="stat
-value" id="att_tag2" color>B
1TA400
1AV
10
1</span>
</div>
<div class="stat
-item">
<span class="stat
-label">设备描述
:</span>
<span class="stat
-value" id="att_tag3"></span>
</div>
<div class="stat
-item">
<span class="stat
-label">材质
:</span>
<span class="stat
-value" id="att_tag4">文本标注 (
5)</span>
</div>
<div class="stat
-item">
<span class="stat
-label">介质名称(中)
:</span>
<span class="stat
-value" id="att_tag
5">
17
.7
5</span>
</div>
<div class="stat
-item">
<span class="stat
-label">介质粘度
:</span>
<span class="stat
-value" id="att_tag6">
17
.7
5</span>
</div>
<div class="stat
-item">
<span class="stat
-label">介质密度
:</span>
<span class="stat
-value" id="att_tag7">
17
.7
5</span>
</div>
<div class="stat
-item">
<span class="stat
-label">DOCUMENTNO_
1:</span>
<span class="stat
-value" id="att_tag8">
17
.7
5</span>
</div>
<div class="stat
-item">
<span class="stat
-label">连接类型
:</span>
<span class="stat
-value" id="att_tag7">
17
.7
5</span>
</div>
</div>
</div>
</div>
</div>
<script>
// CAD属性块数据
const cadData = {
name
: "所有属性块",
count
: 142,
children
: [
{
name
: "机械部件",
count
: 4
5,
children
: [
{ name
: "齿轮", count
: 12 },
{ name
: "轴承", count
: 18 },
{ name
: "联轴器", count
: 8 },
{ name
: "紧固件", count
: 7 }
]
},
{
name
: "电气元件",
count
: 32,
children
: [
{ name
: "开关", count
: 10 },
{ name
: "继电器", count
: 8 },
{ name
: "变压器", count
: 6 },
{ name
: "连接器", count
: 8 }
]
},
{
name
: "管道系统",
count
: 28,
children
: [
{ name
: "阀门", count
: 9 },
{ name
: "法兰", count
: 7 },
{ name
: "管接头", count
: 8 },
{ name
: "过滤器", count
: 4 }
]
},
{
name
: "结构组件",
count
: 22,
children
: [
{ name
: "梁", count
: 8 },
{ name
: "柱", count
: 7 },
{ name
: "支架", count
: 5 },
{ name
: "底座", count
: 2 }
]
},
{
name
: "注释符号",
count
: 15,
children
: [
{ name
: "尺寸标注", count
: 6 },
{ name
: "表面粗糙度", count
: 4 },
{ name
: "焊接符号", count
: 3 },
{ name
: "形位公差", count
: 2 }
]
}
]
};
// 搜索功能
function setupSearch() {
const searchInput = document
.getElementById('searchInput');
searchInput
.addEventListener('input', function() {
const searchTerm = this
.value
.toLowerCase()
.trim();
const allLeafNodes = document
.querySelectorAll('
.tree
-scroll');
// 重置所有样式
allLeafNodes
.forEach(node => {
node
.classList
.remove('highlight');
node
.style
.display = '';
});
// 如果没有搜索词，显示所有节点
if (searchTerm === '') {
// 展开所有节点
document
.querySelectorAll('node')
.forEach(detail => {
detail
.open = false;
});
return;
}
// 搜索匹配项并高亮显示
let found = false;
allLeafNodes
.forEach(node => {
const itemName = node
.querySelector('
.item
-name')
.textContent
.toLowerCase();
if (itemName
.includes(searchTerm)) {
node
.classList
.add('highlight');
found = true;
// 展开父节点
let parent = node
.closest('details');
while (parent) {
parent
.open = true;
parent = parent
.parentElement
.closest('details');
}
} else {
node
.style
.display = 'none';
}
});
if (!found) {
// 如果没有找到匹配项，显示所有节点
allLeafNodes
.forEach(node => {
node
.style
.display = '';
});
}
});
}
// 生成树状结构
function generateTree(data, parentElement) {
const li = document
.createElement('li');
const node = document
.createElement('div');
node
.className = 'node';
const toggle = document
.createElement('div');
toggle
.className = 'toggle';
toggle
.textContent = '➕';
const icon = document
.createElement('div');
icon
.className = 'icon';
icon
.textContent = '👮';
const nameSpan = document
.createElement('span');
nameSpan
.className = 'node
-name';
nameSpan
.textContent = data
.name;
const countSpan = document
.createElement('span');
countSpan
.className = 'node
-count';
countSpan
.textContent = data
.count;
node
.appendChild(icon);
node
.appendChild(nameSpan);
node
.appendChild(countSpan);
node
.appendChild(toggle);
li
.appendChild(node);
if (data
.children && data
.children
.length > 0) {
const childUl = document
.createElement('ul');
data
.children
.forEach(child => {
generateTree(child, childUl);
});
li
.appendChild(childUl);
// 添加展开/折叠事件
toggle
.addEventListener('click', function(e) {
e
.stopPropagation();
const isExpanded = childUl
.style
.display !== 'none';
if (isExpanded) {
childUl
.style
.display = 'none';
toggle
.textContent = '➕';
node
.classList
.remove('expanded');
} else {
childUl
.style
.display = 'block';
toggle
.textContent = '➖';
node
.classList
.add('expanded');
}
});
// 初始折叠状态
childUl
.style
.display = 'none';
} else {
toggle
.style
.visibility = 'hidden';
}
parentElement
.appendChild(li);
}
// 初始化树状视图
document
.addEventListener('DOMContentLoaded', function() {
const treeRoot = document
.getElementById('treeRoot');
generateTree(cadData, treeRoot);
});
</script>
</body>
</html>
帮我修改这个代码，要求在树容器顶部加一个搜索框，只要根据输入内容在树节点中搜到结果，就会展开对应节点且高亮显示搜索结果
本文详细解释了网页设计中默认字体设置为font:12px/1.5Tahoma,Helvetica,Arial,sans-serif的原因。包括为何选择px而非em作为单位、行高的选择依据以及字体家族的排列顺序考量。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
