.container { position: absolute; z-index: 100; top: -5%; left: 25%; max-width: 800px; margin: 0 auto; background: white; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); overflow: hidden; } .header { padding: 15px; border-bottom: 1px solid #e8e8e8; background-color: #fafafa; } .header h2 { font-size: 16px; font-weight: normal; margin-bottom: 15px; color: #333; } .search-box { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .search-input { flex: 1; padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; } .checkbox-label { display: flex; align-items: center; font-size: 14px; color: #666; white-space: nowrap; } .checkbox-label input { margin-right: 5px; } .field-list { height: 400px; overflow-y: auto; padding: 10px 0; } .tree-node { padding: 5px 15px; cursor: pointer; display: flex; align-items: center; transition: background-color 0.2s; position: relative; /* 添加相对定位 */ } .tree-node:hover { background-color: #f0f7ff; } .tree-node.selected { background-color: #e6f7ff; } .tree-node-content { display: flex; align-items: center; flex: 1; } .expand-icon { width: 16px; height: 16px; margin-right: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #666; font-size: 12px; transition: transform 0.2s ease; } .expand-icon.expanded { transform: rotate(90deg); } .node-checkbox { margin-right: 8px; } .node-text { font-size: 14px; color: #333; } .node-type { margin-left: 8px; font-size: 12px; color: #999; background: #f0f0f0; padding: 1px 5px; border-radius: 3px; } .children { margin-left: 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .children.expanded { max-height: 300px; /* 限制子节点容器高度 */ overflow-y: auto; /* 子节点内容过多时显示滚动条 */ padding-right: 10px; /* 避免滚动条与内容重叠 */ } .footer { padding: 15px; border-top: 1px solid #e8e8e8; display: flex; justify-content: space-between; gap: 10px; background-color: #fafafa; } .footer-left { display: flex; gap: 10px; } .btn { padding: 6px 16px; border: 1px solid #d9d9d9; border-radius: 4px; background-color: white; cursor: pointer; font-size: 14px; transition: all 0.3s; } .btn-primary { background-color: #1890ff; color: white; border-color: #1890ff; } .btn-primary:hover { background-color: #40a9ff; } .btn:hover { border-color: #40a9ff; } .empty-state { text-align: center; padding: 40px 20px; color: #999; } .info-text { font-size: 12px; color: #999; margin-top: 10px; padding: 0 15px; } /* 层级缩进线优化 */ .tree-node[data-level="1"] { padding-left: 35px; } .tree-node[data-level="1"]::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 1px; background-color: #e8e8e8; } .tree-node[data-level="2"] { padding-left: 55px; } .tree-node[data-level="2"]::before { content: ""; position: absolute; left: 45px; top: 0; bottom: 0; width: 1px; background-color: #e8e8e8; } .tree-node[data-level="3"] { padding-left: 75px; } .tree-node[data-level="3"]::before { content: ""; position: absolute; left: 65px; top: 0; bottom: 0; width: 1px; background-color: #e8e8e8; } /* 连接线优化 */ .tree-node:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 50%; width: 10px; height: 1px; background-color: #e8e8e8; } .tree-node[data-level="1"]::after { left: 35px; } .tree-node[data-level="2"]::after { left: 55px; } .tree-node[data-level="3"]::after { left: 75px; } .select-field-input { padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 14px; width: 200px; } .status-bar { display: flex; align-items: center; font-size: 12px; color: #666; } /* 添加子节点滚动条样式优化 */ .children::-webkit-scrollbar { width: 6px; } .children::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; } .children::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; } .children::-webkit-scrollbar-thumb:hover { background: #aaa; }